preparing to use shadcn-svelte@next

frontend/components.json

@@ -1,5 +1,5 @@
 {
-	"$schema": "https://shadcn-svelte.com/schema.json",
+	"$schema": "https://next.shadcn-svelte.com/schema.json",
 	"style": "default",
 	"tailwind": {
 		"config": "tailwind.config.js",
@@ -8,6 +8,10 @@
 	},
 	"aliases": {
 		"components": "$lib/components",
-		"utils": "$lib/utils"
+		"utils": "$lib/utils",
-	}
+		"ui": "$lib/components/ui",
-}
+		"hooks": "$lib/hooks"
+	},
+	"typescript": true,
+	"registry": "https://next.shadcn-svelte.com/registry"
+}

frontend/package.json

@@ -33,6 +33,7 @@
 		"svelte-adapter-bun": "^0.5.1",
 		"svelte-check": "^4.0.0",
 		"tailwindcss": "^3.3.2",
+		"tailwindcss-animate": "^1.0.7",
 		"tslib": "^2.4.1",
 		"typescript": "^5.5.0",
 		"vite": "^5.4.4"
@@ -47,12 +48,12 @@
 		"arctic": "^1.9.2",
 		"argon2": "^0.41.0",
 		"bits-ui": "^0.21.15",
-		"clsx": "^2.0.0",
+		"clsx": "^2.1.1",
 		"cmdk-sv": "^0.0.13",
 		"drizzle-orm": "^0.32.1",
 		"formsnap": "^1.0.0",
 		"he": "^1.2.0",
-		"lucide-svelte": "^0.441.0",
+		"lucide-svelte": "^0.456.0",
 		"mode-watcher": "^0.1.2",
 		"nanoid": "^5.0.3",
 		"node-html-parser": "^6.1.12",
@@ -64,8 +65,8 @@
 		"stripe": "^16.8.0",
 		"svelte-sonner": "^0.3.10",
 		"sveltekit-superforms": "^2.12.2",
-		"tailwind-merge": "^2.0.0",
+		"tailwind-merge": "^2.5.4",
-		"tailwind-variants": "^0.1.18",
+		"tailwind-variants": "^0.2.1",
 		"vaul-svelte": "^0.3.1",
 		"zod": "^3.22.4"
 	}

frontend/src/app.postcss

@@ -44,6 +44,15 @@
 		--ring: 240 4.8% 95.9%;
 
 		--radius: 0.5rem;
+
+		--sidebar-background: 0 0% 98%;
+		--sidebar-foreground: 240 5.3% 26.1%;
+		--sidebar-primary: 240 5.9% 10%;
+		--sidebar-primary-foreground: 0 0% 98%;
+		--sidebar-accent: 240 4.8% 95.9%;
+		--sidebar-accent-foreground: 240 5.9% 10%;
+		--sidebar-border: 220 13% 91%;
+		--sidebar-ring: 217.2 91.2% 59.8%;
 	}
 
 	.dark {
@@ -85,6 +94,15 @@
 		--warning-foreground: 0 0% 98%;
 
 		--ring: 240 3.7% 15.9%;
+
+		--sidebar-background: 240 5.9% 10%;
+		--sidebar-foreground: 240 4.8% 95.9%;
+		--sidebar-primary: 224.3 76.3% 48%;
+		--sidebar-primary-foreground: 0 0% 100%;
+		--sidebar-accent: 240 3.7% 15.9%;
+		--sidebar-accent-foreground: 240 4.8% 95.9%;
+		--sidebar-border: 240 3.7% 15.9%;
+		--sidebar-ring: 217.2 91.2% 59.8%;
 	}
 }
 

frontend/tailwind.config.js

@@ -1,4 +1,5 @@
 import { fontFamily } from 'tailwindcss/defaultTheme'
+import tailwindcssAnimate from 'tailwindcss-animate'
 
 /** @type {import('tailwindcss').Config} */
 const config = {
@@ -67,6 +68,18 @@ const config = {
 					DEFAULT: 'hsl(var(--card) / <alpha-value>)',
 					foreground: 'hsl(var(--card-foreground) / <alpha-value>)',
 				},
+				sidebar: {
+					DEFAULT: 'hsl(var(--sidebar-background))',
+					foreground: 'hsl(var(--sidebar-foreground))',
+					primary: 'hsl(var(--sidebar-primary))',
+					'primary-foreground':
+						'hsl(var(--sidebar-primary-foreground))',
+					accent: 'hsl(var(--sidebar-accent))',
+					'accent-foreground':
+						'hsl(var(--sidebar-accent-foreground))',
+					border: 'hsl(var(--sidebar-border))',
+					ring: 'hsl(var(--sidebar-ring))',
+				},
 			},
 			borderRadius: {
 				lg: 'var(--radius)',
@@ -76,8 +89,28 @@ const config = {
 			fontFamily: {
 				sans: [...fontFamily.sans],
 			},
+			keyframes: {
+				'accordion-down': {
+					from: { height: '0' },
+					to: { height: 'var(--bits-accordion-content-height)' },
+				},
+				'accordion-up': {
+					from: { height: 'var(--bits-accordion-content-height)' },
+					to: { height: '0' },
+				},
+				'caret-blink': {
+					'0%,70%,100%': { opacity: '1' },
+					'20%,50%': { opacity: '0' },
+				},
+			},
+			animation: {
+				'accordion-down': 'accordion-down 0.2s ease-out',
+				'accordion-up': 'accordion-up 0.2s ease-out',
+				'caret-blink': 'caret-blink 1.25s ease-out infinite',
+			},
 		},
 	},
+	plugins: [tailwindcssAnimate],
 }
 
 export default config