diff --git a/bun.lockb b/bun.lockb index 2b63242..15cd4e3 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/package.json b/package.json index 22f0839..114cfb3 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "@types/better-sqlite3": "^7.6.11", "@types/eslint": "^9.6.0", "autoprefixer": "^10.4.20", + "bits-ui": "^0.21.16", "clsx": "^2.1.1", "drizzle-kit": "^0.22.0", "eslint": "^9.7.0", @@ -46,6 +47,7 @@ "@oslojs/crypto": "^1.0.1", "@oslojs/encoding": "^1.1.0", "better-sqlite3": "^11.1.2", - "drizzle-orm": "^0.33.0" + "drizzle-orm": "^0.33.0", + "lucide-svelte": "^0.454.0" } } diff --git a/src/app.html b/src/app.html index 77a5ff5..2a7ca6b 100644 --- a/src/app.html +++ b/src/app.html @@ -7,6 +7,6 @@ %sveltekit.head% -
%sveltekit.body%
+
%sveltekit.body%
diff --git a/src/lib/components/app/auth-form/auth-form.svelte b/src/lib/components/app/auth-form/auth-form.svelte new file mode 100644 index 0000000..1e4b3d3 --- /dev/null +++ b/src/lib/components/app/auth-form/auth-form.svelte @@ -0,0 +1,28 @@ + + +
+ +
diff --git a/src/lib/components/app/auth-form/index.ts b/src/lib/components/app/auth-form/index.ts new file mode 100644 index 0000000..0747bae --- /dev/null +++ b/src/lib/components/app/auth-form/index.ts @@ -0,0 +1,7 @@ +import Root from "./auth-form.svelte"; + +export { + Root, + // + Root as AuthForm, +}; diff --git a/src/lib/components/ui/button/button.svelte b/src/lib/components/ui/button/button.svelte new file mode 100644 index 0000000..86827f3 --- /dev/null +++ b/src/lib/components/ui/button/button.svelte @@ -0,0 +1,25 @@ + + + + + diff --git a/src/lib/components/ui/button/index.ts b/src/lib/components/ui/button/index.ts new file mode 100644 index 0000000..af1e188 --- /dev/null +++ b/src/lib/components/ui/button/index.ts @@ -0,0 +1,49 @@ +import { type VariantProps, tv } from "tailwind-variants"; +import type { Button as ButtonPrimitive } from "bits-ui"; +import Root from "./button.svelte"; + +const buttonVariants = tv({ + base: "ring-offset-background focus-visible:ring-ring inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", + variants: { + variant: { + default: "bg-primary text-primary-foreground hover:bg-primary/90", + destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90", + outline: + "border-input bg-background hover:bg-accent hover:text-accent-foreground border", + secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", + ghost: "hover:bg-accent hover:text-accent-foreground", + link: "text-primary underline-offset-4 hover:underline", + }, + size: { + default: "h-10 px-4 py-2", + sm: "h-9 rounded-md px-3", + lg: "h-11 rounded-md px-8", + icon: "h-10 w-10", + }, + }, + defaultVariants: { + variant: "default", + size: "default", + }, +}); + +type Variant = VariantProps["variant"]; +type Size = VariantProps["size"]; + +type Props = ButtonPrimitive.Props & { + variant?: Variant; + size?: Size; +}; + +type Events = ButtonPrimitive.Events; + +export { + Root, + type Props, + type Events, + // + Root as Button, + type Props as ButtonProps, + type Events as ButtonEvents, + buttonVariants, +}; diff --git a/src/lib/components/ui/input/index.ts b/src/lib/components/ui/input/index.ts new file mode 100644 index 0000000..75e3bc2 --- /dev/null +++ b/src/lib/components/ui/input/index.ts @@ -0,0 +1,29 @@ +import Root from "./input.svelte"; + +export type FormInputEvent = T & { + currentTarget: EventTarget & HTMLInputElement; +}; +export type InputEvents = { + blur: FormInputEvent; + change: FormInputEvent; + click: FormInputEvent; + focus: FormInputEvent; + focusin: FormInputEvent; + focusout: FormInputEvent; + keydown: FormInputEvent; + keypress: FormInputEvent; + keyup: FormInputEvent; + mouseover: FormInputEvent; + mouseenter: FormInputEvent; + mouseleave: FormInputEvent; + mousemove: FormInputEvent; + paste: FormInputEvent; + input: FormInputEvent; + wheel: FormInputEvent; +}; + +export { + Root, + // + Root as Input, +}; diff --git a/src/lib/components/ui/input/input.svelte b/src/lib/components/ui/input/input.svelte new file mode 100644 index 0000000..cab1457 --- /dev/null +++ b/src/lib/components/ui/input/input.svelte @@ -0,0 +1,42 @@ + + + diff --git a/src/lib/components/ui/label/index.ts b/src/lib/components/ui/label/index.ts new file mode 100644 index 0000000..8bfca0b --- /dev/null +++ b/src/lib/components/ui/label/index.ts @@ -0,0 +1,7 @@ +import Root from "./label.svelte"; + +export { + Root, + // + Root as Label, +}; diff --git a/src/lib/components/ui/label/label.svelte b/src/lib/components/ui/label/label.svelte new file mode 100644 index 0000000..2a7d479 --- /dev/null +++ b/src/lib/components/ui/label/label.svelte @@ -0,0 +1,21 @@ + + + + + diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 9b776b7..95b05e8 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -3,4 +3,17 @@ let { children } = $props(); -{@render children()} +
+

My App

+ +
+
+ {@render children()} +
+ +
+

© 2024

+
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index cc88df0..e3ee03d 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -1,2 +1,7 @@ + +

Welcome to SvelteKit

-

Visit svelte.dev/docs/kit to read the documentation

+ +