diff --git a/apps/examples/sveltekit/components.json b/apps/examples/sveltekit/components.json new file mode 100644 index 0000000000..b2c229a724 --- /dev/null +++ b/apps/examples/sveltekit/components.json @@ -0,0 +1,14 @@ +{ + "$schema": "https://shadcn-svelte.com/schema.json", + "style": "new-york", + "tailwind": { + "config": "tailwind.config.ts", + "css": "src/app.css", + "baseColor": "zinc" + }, + "aliases": { + "components": "$lib/components", + "utils": "$lib/utils" + }, + "typescript": true +} \ No newline at end of file diff --git a/apps/examples/sveltekit/package.json b/apps/examples/sveltekit/package.json index 151c5e122d..80162d389f 100644 --- a/apps/examples/sveltekit/package.json +++ b/apps/examples/sveltekit/package.json @@ -17,13 +17,23 @@ "@sveltejs/adapter-auto": "3.2.0", "@sveltejs/kit": "2.8.3", "@sveltejs/vite-plugin-svelte": "^3.1.0", + "@tailwindcss/typography": "^0.5.14", + "autoprefixer": "^10.4.20", + "bits-ui": "^0.21.16", + "clsx": "^2.1.1", + "postcss": "^8.4.49", "svelte": "4.2.19", "svelte-check": "3.6.9", + "svelte-radix": "^1.1.1", + "tailwind-merge": "^2.5.4", + "tailwind-variants": "^0.3.0", + "tailwindcss": "^3.4.13", "typescript": "5.4.5", "vite": "5.2.14" }, "dependencies": { - "@auth/sveltekit": "latest" + "@auth/sveltekit": "latest", + "mode-watcher": "^0.5.0" }, "type": "module" } diff --git a/apps/examples/sveltekit/postcss.config.js b/apps/examples/sveltekit/postcss.config.js new file mode 100644 index 0000000000..ba80730477 --- /dev/null +++ b/apps/examples/sveltekit/postcss.config.js @@ -0,0 +1,6 @@ +export default { + plugins: { + tailwindcss: {}, + autoprefixer: {} + } +}; diff --git a/apps/examples/sveltekit/src/app.css b/apps/examples/sveltekit/src/app.css new file mode 100644 index 0000000000..6662813bb3 --- /dev/null +++ b/apps/examples/sveltekit/src/app.css @@ -0,0 +1,78 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer base { + :root { + --background: 0 0% 100%; + --foreground: 240 10% 3.9%; + + --muted: 240 4.8% 95.9%; + --muted-foreground: 240 3.8% 46.1%; + + --popover: 0 0% 100%; + --popover-foreground: 240 10% 3.9%; + + --card: 0 0% 100%; + --card-foreground: 240 10% 3.9%; + + --border: 240 5.9% 90%; + --input: 240 5.9% 90%; + + --primary: 240 5.9% 10%; + --primary-foreground: 0 0% 98%; + + --secondary: 240 4.8% 95.9%; + --secondary-foreground: 240 5.9% 10%; + + --accent: 240 4.8% 95.9%; + --accent-foreground: 240 5.9% 10%; + + --destructive: 0 72.2% 50.6%; + --destructive-foreground: 0 0% 98%; + + --ring: 240 10% 3.9%; + + --radius: 0.5rem; + } + + .dark { + --background: 240 10% 3.9%; + --foreground: 0 0% 98%; + + --muted: 240 3.7% 15.9%; + --muted-foreground: 240 5% 64.9%; + + --popover: 240 10% 3.9%; + --popover-foreground: 0 0% 98%; + + --card: 240 10% 3.9%; + --card-foreground: 0 0% 98%; + + --border: 240 3.7% 15.9%; + --input: 240 3.7% 15.9%; + + --primary: 0 0% 98%; + --primary-foreground: 240 5.9% 10%; + + --secondary: 240 3.7% 15.9%; + --secondary-foreground: 0 0% 98%; + + --accent: 240 3.7% 15.9%; + --accent-foreground: 0 0% 98%; + + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 0 0% 98%; + + --ring: 240 4.9% 83.9%; + } +} + +@layer base { + * { + @apply border-border; + } + body { + @apply bg-background text-foreground; + } +} \ No newline at end of file diff --git a/apps/examples/sveltekit/src/components/footer.svelte b/apps/examples/sveltekit/src/components/footer.svelte deleted file mode 100644 index ab045f986a..0000000000 --- a/apps/examples/sveltekit/src/components/footer.svelte +++ /dev/null @@ -1,56 +0,0 @@ - - - - - diff --git a/apps/examples/sveltekit/src/components/header.svelte b/apps/examples/sveltekit/src/components/header.svelte deleted file mode 100644 index 7fe13ed293..0000000000 --- a/apps/examples/sveltekit/src/components/header.svelte +++ /dev/null @@ -1,112 +0,0 @@ - - -
-
-
- User avatar - {#if $page.data.session} - - {$page.data.session.user?.email ?? $page.data.session.user?.name} - - -
Sign out
- - {:else} - You are not signed in - -
Sign in
- - {/if} -
-
- -
- - diff --git a/apps/examples/sveltekit/src/components/external-icon.svelte b/apps/examples/sveltekit/src/lib/components/external-icon.svelte similarity index 100% rename from apps/examples/sveltekit/src/components/external-icon.svelte rename to apps/examples/sveltekit/src/lib/components/external-icon.svelte diff --git a/apps/examples/sveltekit/src/lib/components/footer.svelte b/apps/examples/sveltekit/src/lib/components/footer.svelte new file mode 100644 index 0000000000..906f52c2a4 --- /dev/null +++ b/apps/examples/sveltekit/src/lib/components/footer.svelte @@ -0,0 +1,47 @@ + + + diff --git a/apps/examples/sveltekit/src/lib/components/header.svelte b/apps/examples/sveltekit/src/lib/components/header.svelte new file mode 100644 index 0000000000..466ab6746b --- /dev/null +++ b/apps/examples/sveltekit/src/lib/components/header.svelte @@ -0,0 +1,73 @@ + + +
+
+ + +
+ {#if user} + + + + + + +
+

+ {user?.name || "Anonymous"} +

+

+ {user?.email || "anonymous@example.com"} +

+
+ + + + + Sign out + + + + + {:else} + + + + {/if} +
+
+
diff --git a/apps/examples/sveltekit/src/lib/components/ui/avatar/avatar-fallback.svelte b/apps/examples/sveltekit/src/lib/components/ui/avatar/avatar-fallback.svelte new file mode 100644 index 0000000000..893031ea96 --- /dev/null +++ b/apps/examples/sveltekit/src/lib/components/ui/avatar/avatar-fallback.svelte @@ -0,0 +1,16 @@ + + + + + diff --git a/apps/examples/sveltekit/src/lib/components/ui/avatar/avatar-image.svelte b/apps/examples/sveltekit/src/lib/components/ui/avatar/avatar-image.svelte new file mode 100644 index 0000000000..6558dc479a --- /dev/null +++ b/apps/examples/sveltekit/src/lib/components/ui/avatar/avatar-image.svelte @@ -0,0 +1,18 @@ + + + diff --git a/apps/examples/sveltekit/src/lib/components/ui/avatar/avatar.svelte b/apps/examples/sveltekit/src/lib/components/ui/avatar/avatar.svelte new file mode 100644 index 0000000000..ba1379b6e6 --- /dev/null +++ b/apps/examples/sveltekit/src/lib/components/ui/avatar/avatar.svelte @@ -0,0 +1,18 @@ + + + + + diff --git a/apps/examples/sveltekit/src/lib/components/ui/avatar/index.ts b/apps/examples/sveltekit/src/lib/components/ui/avatar/index.ts new file mode 100644 index 0000000000..d06457be0d --- /dev/null +++ b/apps/examples/sveltekit/src/lib/components/ui/avatar/index.ts @@ -0,0 +1,13 @@ +import Root from "./avatar.svelte"; +import Image from "./avatar-image.svelte"; +import Fallback from "./avatar-fallback.svelte"; + +export { + Root, + Image, + Fallback, + // + Root as Avatar, + Image as AvatarImage, + Fallback as AvatarFallback, +}; diff --git a/apps/examples/sveltekit/src/lib/components/ui/button/button.svelte b/apps/examples/sveltekit/src/lib/components/ui/button/button.svelte new file mode 100644 index 0000000000..86827f32d3 --- /dev/null +++ b/apps/examples/sveltekit/src/lib/components/ui/button/button.svelte @@ -0,0 +1,25 @@ + + + + + diff --git a/apps/examples/sveltekit/src/lib/components/ui/button/index.ts b/apps/examples/sveltekit/src/lib/components/ui/button/index.ts new file mode 100644 index 0000000000..f0f4612434 --- /dev/null +++ b/apps/examples/sveltekit/src/lib/components/ui/button/index.ts @@ -0,0 +1,50 @@ +import type { Button as ButtonPrimitive } from "bits-ui"; +import { type VariantProps, tv } from "tailwind-variants"; +import Root from "./button.svelte"; + +const buttonVariants = tv({ + base: "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-1 disabled:pointer-events-none disabled:opacity-50", + variants: { + variant: { + default: "bg-primary text-primary-foreground hover:bg-primary/90 shadow", + destructive: + "bg-destructive text-destructive-foreground hover:bg-destructive/90 shadow-sm", + outline: + "border-input bg-background hover:bg-accent hover:text-accent-foreground border shadow-sm", + secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 shadow-sm", + ghost: "hover:bg-accent hover:text-accent-foreground", + link: "text-primary underline-offset-4 hover:underline", + }, + size: { + default: "h-9 px-4 py-2", + sm: "h-8 rounded-md px-3 text-xs", + lg: "h-10 rounded-md px-8", + icon: "h-9 w-9", + }, + }, + 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/apps/examples/sveltekit/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte b/apps/examples/sveltekit/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte new file mode 100644 index 0000000000..0f408c6f36 --- /dev/null +++ b/apps/examples/sveltekit/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte @@ -0,0 +1,35 @@ + + + + + + + + + + diff --git a/apps/examples/sveltekit/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte b/apps/examples/sveltekit/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte new file mode 100644 index 0000000000..03a586654f --- /dev/null +++ b/apps/examples/sveltekit/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte @@ -0,0 +1,26 @@ + + + + + diff --git a/apps/examples/sveltekit/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte b/apps/examples/sveltekit/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte new file mode 100644 index 0000000000..b89f5fb830 --- /dev/null +++ b/apps/examples/sveltekit/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte @@ -0,0 +1,31 @@ + + + + + diff --git a/apps/examples/sveltekit/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte b/apps/examples/sveltekit/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte new file mode 100644 index 0000000000..43f1527770 --- /dev/null +++ b/apps/examples/sveltekit/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte @@ -0,0 +1,19 @@ + + + + + diff --git a/apps/examples/sveltekit/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte b/apps/examples/sveltekit/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte new file mode 100644 index 0000000000..1c74ae1a0e --- /dev/null +++ b/apps/examples/sveltekit/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte @@ -0,0 +1,11 @@ + + + + + diff --git a/apps/examples/sveltekit/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte b/apps/examples/sveltekit/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte new file mode 100644 index 0000000000..7cdfdcab4c --- /dev/null +++ b/apps/examples/sveltekit/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte @@ -0,0 +1,35 @@ + + + + + + + + + + diff --git a/apps/examples/sveltekit/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte b/apps/examples/sveltekit/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte new file mode 100644 index 0000000000..8b16e03db9 --- /dev/null +++ b/apps/examples/sveltekit/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte @@ -0,0 +1,14 @@ + + + diff --git a/apps/examples/sveltekit/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte b/apps/examples/sveltekit/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte new file mode 100644 index 0000000000..d8c7378c5a --- /dev/null +++ b/apps/examples/sveltekit/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte @@ -0,0 +1,13 @@ + + + + + diff --git a/apps/examples/sveltekit/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte b/apps/examples/sveltekit/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte new file mode 100644 index 0000000000..042398d725 --- /dev/null +++ b/apps/examples/sveltekit/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte @@ -0,0 +1,29 @@ + + + + + diff --git a/apps/examples/sveltekit/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte b/apps/examples/sveltekit/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte new file mode 100644 index 0000000000..f207f300fc --- /dev/null +++ b/apps/examples/sveltekit/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte @@ -0,0 +1,32 @@ + + + + + + diff --git a/apps/examples/sveltekit/src/lib/components/ui/dropdown-menu/index.ts b/apps/examples/sveltekit/src/lib/components/ui/dropdown-menu/index.ts new file mode 100644 index 0000000000..c1749e923e --- /dev/null +++ b/apps/examples/sveltekit/src/lib/components/ui/dropdown-menu/index.ts @@ -0,0 +1,48 @@ +import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui"; +import Item from "./dropdown-menu-item.svelte"; +import Label from "./dropdown-menu-label.svelte"; +import Content from "./dropdown-menu-content.svelte"; +import Shortcut from "./dropdown-menu-shortcut.svelte"; +import RadioItem from "./dropdown-menu-radio-item.svelte"; +import Separator from "./dropdown-menu-separator.svelte"; +import RadioGroup from "./dropdown-menu-radio-group.svelte"; +import SubContent from "./dropdown-menu-sub-content.svelte"; +import SubTrigger from "./dropdown-menu-sub-trigger.svelte"; +import CheckboxItem from "./dropdown-menu-checkbox-item.svelte"; + +const Sub = DropdownMenuPrimitive.Sub; +const Root = DropdownMenuPrimitive.Root; +const Trigger = DropdownMenuPrimitive.Trigger; +const Group = DropdownMenuPrimitive.Group; + +export { + Sub, + Root, + Item, + Label, + Group, + Trigger, + Content, + Shortcut, + Separator, + RadioItem, + SubContent, + SubTrigger, + RadioGroup, + CheckboxItem, + // + Root as DropdownMenu, + Sub as DropdownMenuSub, + Item as DropdownMenuItem, + Label as DropdownMenuLabel, + Group as DropdownMenuGroup, + Content as DropdownMenuContent, + Trigger as DropdownMenuTrigger, + Shortcut as DropdownMenuShortcut, + RadioItem as DropdownMenuRadioItem, + Separator as DropdownMenuSeparator, + RadioGroup as DropdownMenuRadioGroup, + SubContent as DropdownMenuSubContent, + SubTrigger as DropdownMenuSubTrigger, + CheckboxItem as DropdownMenuCheckboxItem, +}; diff --git a/apps/examples/sveltekit/src/lib/utils.ts b/apps/examples/sveltekit/src/lib/utils.ts new file mode 100644 index 0000000000..88712453a4 --- /dev/null +++ b/apps/examples/sveltekit/src/lib/utils.ts @@ -0,0 +1,62 @@ +import { type ClassValue, clsx } from "clsx"; +import { twMerge } from "tailwind-merge"; +import { cubicOut } from "svelte/easing"; +import type { TransitionConfig } from "svelte/transition"; + +export function cn(...inputs: ClassValue[]) { + return twMerge(clsx(inputs)); +} + +type FlyAndScaleParams = { + y?: number; + x?: number; + start?: number; + duration?: number; +}; + +export const flyAndScale = ( + node: Element, + params: FlyAndScaleParams = { y: -8, x: 0, start: 0.95, duration: 150 } +): TransitionConfig => { + const style = getComputedStyle(node); + const transform = style.transform === "none" ? "" : style.transform; + + const scaleConversion = ( + valueA: number, + scaleA: [number, number], + scaleB: [number, number] + ) => { + const [minA, maxA] = scaleA; + const [minB, maxB] = scaleB; + + const percentage = (valueA - minA) / (maxA - minA); + const valueB = percentage * (maxB - minB) + minB; + + return valueB; + }; + + const styleToString = ( + style: Record + ): string => { + return Object.keys(style).reduce((str, key) => { + if (style[key] === undefined) return str; + return str + `${key}:${style[key]};`; + }, ""); + }; + + return { + duration: params.duration ?? 200, + delay: 0, + css: (t) => { + const y = scaleConversion(t, [0, 1], [params.y ?? 5, 0]); + const x = scaleConversion(t, [0, 1], [params.x ?? 0, 0]); + const scale = scaleConversion(t, [0, 1], [params.start ?? 0.95, 1]); + + return styleToString({ + transform: `${transform} translate3d(${x}px, ${y}px, 0) scale(${scale})`, + opacity: t + }); + }, + easing: cubicOut + }; +}; \ No newline at end of file diff --git a/apps/examples/sveltekit/src/routes/+layout.svelte b/apps/examples/sveltekit/src/routes/+layout.svelte index fd915fd802..28de93fb0c 100644 --- a/apps/examples/sveltekit/src/routes/+layout.svelte +++ b/apps/examples/sveltekit/src/routes/+layout.svelte @@ -1,55 +1,18 @@ - -
-
- -