@aphexcms/ui 0.1.0 → 0.1.1

package/dist/components/ui/tabs/tabs-list.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Tabs as TabsPrimitive } from 'bits-ui';
+	import { cn } from '../../../utils.js';
+
+	let { ref = $bindable(null), class: className, ...restProps }: TabsPrimitive.ListProps = $props();
+</script>
+
+<TabsPrimitive.List
+	bind:ref
+	data-slot="tabs-list"
+	class={cn(
+		'bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]',
+		className
+	)}
+	{...restProps}
+/>

package/dist/components/ui/tabs/tabs-list.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Tabs as TabsPrimitive } from 'bits-ui';
+declare const TabsList: import("svelte").Component<TabsPrimitive.ListProps, {}, "ref">;
+type TabsList = ReturnType<typeof TabsList>;
+export default TabsList;

package/dist/components/ui/tabs/tabs-trigger.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Tabs as TabsPrimitive } from 'bits-ui';
+	import { cn } from '../../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: TabsPrimitive.TriggerProps = $props();
+</script>
+
+<TabsPrimitive.Trigger
+	bind:ref
+	data-slot="tabs-trigger"
+	class={cn(
+		"data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 whitespace-nowrap rounded-md border border-transparent px-2 py-1 text-sm font-medium transition-[color,box-shadow] focus-visible:outline-1 focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		className
+	)}
+	{...restProps}
+/>

package/dist/components/ui/tabs/tabs-trigger.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Tabs as TabsPrimitive } from 'bits-ui';
+declare const TabsTrigger: import("svelte").Component<TabsPrimitive.TriggerProps, {}, "ref">;
+type TabsTrigger = ReturnType<typeof TabsTrigger>;
+export default TabsTrigger;

package/dist/components/ui/tabs/tabs.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Tabs as TabsPrimitive } from 'bits-ui';
+	import { cn } from '../../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(''),
+		class: className,
+		...restProps
+	}: TabsPrimitive.RootProps = $props();
+</script>
+
+<TabsPrimitive.Root
+	bind:ref
+	bind:value
+	data-slot="tabs"
+	class={cn('flex flex-col gap-2', className)}
+	{...restProps}
+/>

package/dist/components/ui/tabs/tabs.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Tabs as TabsPrimitive } from 'bits-ui';
+declare const Tabs: import("svelte").Component<TabsPrimitive.RootProps, {}, "ref" | "value">;
+type Tabs = ReturnType<typeof Tabs>;
+export default Tabs;

package/dist/components/ui/textarea/index.d.ts

@@ -0,0 +1,2 @@
+import Root from './textarea.svelte';
+export { Root, Root as Textarea };

package/dist/components/ui/textarea/index.js

@@ -0,0 +1,4 @@
+import Root from './textarea.svelte';
+export { Root, 
+//
+Root as Textarea };

package/dist/components/ui/textarea/textarea.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { cn, type WithElementRef, type WithoutChildren } from '../../../utils.js';
+	import type { HTMLTextareaAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		class: className,
+		...restProps
+	}: WithoutChildren<WithElementRef<HTMLTextareaAttributes>> = $props();
+</script>
+
+<textarea
+	bind:this={ref}
+	data-slot="textarea"
+	class={cn(
+		'border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 field-sizing-content shadow-xs flex min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base outline-none transition-[color,box-shadow] focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+		className
+	)}
+	bind:value
+	{...restProps}
+></textarea>

package/dist/components/ui/textarea/textarea.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type WithElementRef } from '../../../utils.js';
+import type { HTMLTextareaAttributes } from 'svelte/elements';
+declare const Textarea: import("svelte").Component<Omit<WithElementRef<HTMLTextareaAttributes>, "children">, {}, "ref" | "value">;
+type Textarea = ReturnType<typeof Textarea>;
+export default Textarea;

package/dist/components/ui/tooltip/index.d.ts

@@ -0,0 +1,7 @@
+import { Tooltip as TooltipPrimitive } from 'bits-ui';
+import Trigger from './tooltip-trigger.svelte';
+import Content from './tooltip-content.svelte';
+declare const Root: import("svelte").Component<TooltipPrimitive.RootProps, {}, "open">;
+declare const Provider: import("svelte").Component<TooltipPrimitive.ProviderProps, {}, "">;
+declare const Portal: import("svelte").Component<TooltipPrimitive.PortalProps, {}, "">;
+export { Root, Trigger, Content, Provider, Portal, Root as Tooltip, Content as TooltipContent, Trigger as TooltipTrigger, Provider as TooltipProvider, Portal as TooltipPortal };

package/dist/components/ui/tooltip/index.js

@@ -0,0 +1,9 @@
+import { Tooltip as TooltipPrimitive } from 'bits-ui';
+import Trigger from './tooltip-trigger.svelte';
+import Content from './tooltip-content.svelte';
+const Root = TooltipPrimitive.Root;
+const Provider = TooltipPrimitive.Provider;
+const Portal = TooltipPrimitive.Portal;
+export { Root, Trigger, Content, Provider, Portal, 
+//
+Root as Tooltip, Content as TooltipContent, Trigger as TooltipTrigger, Provider as TooltipProvider, Portal as TooltipPortal };

package/dist/components/ui/tooltip/tooltip-content.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+	import { Tooltip as TooltipPrimitive } from 'bits-ui';
+	import { cn } from '../../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		sideOffset = 0,
+		side = 'top',
+		children,
+		arrowClasses,
+		...restProps
+	}: TooltipPrimitive.ContentProps & {
+		arrowClasses?: string;
+	} = $props();
+</script>
+
+<TooltipPrimitive.Portal>
+	<TooltipPrimitive.Content
+		bind:ref
+		data-slot="tooltip-content"
+		{sideOffset}
+		{side}
+		class={cn(
+			'bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--bits-tooltip-content-transform-origin) z-50 w-fit text-balance rounded-md px-3 py-1.5 text-xs',
+			className
+		)}
+		{...restProps}
+	>
+		{@render children?.()}
+		<TooltipPrimitive.Arrow>
+			{#snippet child({ props })}
+				<div
+					class={cn(
+						'bg-primary z-50 size-2.5 rotate-45 rounded-[2px]',
+						'data-[side=top]:translate-x-1/2 data-[side=top]:translate-y-[calc(-50%_+_2px)]',
+						'data-[side=bottom]:-translate-x-1/2 data-[side=bottom]:-translate-y-[calc(-50%_+_1px)]',
+						'data-[side=right]:translate-x-[calc(50%_+_2px)] data-[side=right]:translate-y-1/2',
+						'data-[side=left]:-translate-y-[calc(50%_-_3px)]',
+						arrowClasses
+					)}
+					{...props}
+				></div>
+			{/snippet}
+		</TooltipPrimitive.Arrow>
+	</TooltipPrimitive.Content>
+</TooltipPrimitive.Portal>

package/dist/components/ui/tooltip/tooltip-content.svelte.d.ts

@@ -0,0 +1,7 @@
+import { Tooltip as TooltipPrimitive } from 'bits-ui';
+type $$ComponentProps = TooltipPrimitive.ContentProps & {
+    arrowClasses?: string;
+};
+declare const TooltipContent: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type TooltipContent = ReturnType<typeof TooltipContent>;
+export default TooltipContent;

package/dist/components/ui/tooltip/tooltip-trigger.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Tooltip as TooltipPrimitive } from 'bits-ui';
+
+	let { ref = $bindable(null), ...restProps }: TooltipPrimitive.TriggerProps = $props();
+</script>
+
+<TooltipPrimitive.Trigger bind:ref data-slot="tooltip-trigger" {...restProps} />

package/dist/components/ui/tooltip/tooltip-trigger.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Tooltip as TooltipPrimitive } from 'bits-ui';
+declare const TooltipTrigger: import("svelte").Component<TooltipPrimitive.TriggerProps, {}, "ref">;
+type TooltipTrigger = ReturnType<typeof TooltipTrigger>;
+export default TooltipTrigger;

package/dist/hooks/is-mobile.svelte.d.ts

@@ -0,0 +1,4 @@
+import { MediaQuery } from 'svelte/reactivity';
+export declare class IsMobile extends MediaQuery {
+    constructor(breakpoint?: number);
+}

package/dist/hooks/is-mobile.svelte.js

@@ -0,0 +1,7 @@
+import { MediaQuery } from 'svelte/reactivity';
+const DEFAULT_MOBILE_BREAKPOINT = 768;
+export class IsMobile extends MediaQuery {
+    constructor(breakpoint = DEFAULT_MOBILE_BREAKPOINT) {
+        super(`max-width: ${breakpoint - 1}px`);
+    }
+}

package/dist/utils.d.ts

@@ -0,0 +1,12 @@
+import { type ClassValue } from 'clsx';
+export declare function cn(...inputs: ClassValue[]): string;
+export type WithoutChild<T> = T extends {
+    child?: any;
+} ? Omit<T, 'child'> : T;
+export type WithoutChildren<T> = T extends {
+    children?: any;
+} ? Omit<T, 'children'> : T;
+export type WithoutChildrenOrChild<T> = WithoutChildren<WithoutChild<T>>;
+export type WithElementRef<T, U extends HTMLElement = HTMLElement> = T & {
+    ref?: U | null;
+};

package/dist/utils.js

@@ -0,0 +1,5 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}

package/package.json

@@ -1,11 +1,12 @@
 {
 	"name": "@aphexcms/ui",
-	"version": "0.1.0",
+	"version": "0.1.1",
 	"description": "Shared UI components for Aphex CMS (shadcn-svelte)",
 	"type": "module",
 	"scripts": {
 		"build": "svelte-package",
-		"shadcn": "pnpm dlx shadcn-svelte@latest add"
+		"shadcn": "pnpm dlx shadcn-svelte@latest add",
+		"prepublishOnly": "pnpm build"
 	},
 	"exports": {
 		"./shadcn/*": {
@@ -20,8 +21,23 @@
 		}
 	},
 	"files": [
+		"dist",
 		"src"
 	],
+	"publishConfig": {
+		"exports": {
+			"./shadcn/*": {
+				"types": "./dist/components/ui/*/index.d.ts",
+				"svelte": "./dist/components/ui/*/index.js",
+				"default": "./dist/components/ui/*/index.js"
+			},
+			"./shadcn/css": "./src/app.css",
+			"./utils": {
+				"types": "./dist/utils.d.ts",
+				"default": "./dist/utils.js"
+			}
+		}
+	},
 	"peerDependencies": {
 		"bits-ui": "^2.11.1",
 		"clsx": "^2.1.1",

package/src/app.css

@@ -5,145 +5,145 @@
 @custom-variant dark (&:is(.dark *));
 
 :root {
-  --background: oklch(0.98 0.01 95.10);
-  --foreground: oklch(0.34 0.03 95.72);
-  --card: oklch(0.98 0.01 95.10);
-  --card-foreground: oklch(0.19 0.00 106.59);
-  --popover: oklch(1.00 0 0);
-  --popover-foreground: oklch(0.27 0.02 98.94);
-  --primary: oklch(0.62 0.14 39.04);
-  --primary-foreground: oklch(1.00 0 0);
-  --secondary: oklch(0.92 0.01 92.99);
-  --secondary-foreground: oklch(0.43 0.02 98.60);
-  --muted: oklch(0.93 0.02 90.24);
-  --muted-foreground: oklch(0.61 0.01 97.42);
-  --accent: oklch(0.92 0.01 92.99);
-  --accent-foreground: oklch(0.27 0.02 98.94);
-  --destructive: oklch(0.19 0.00 106.59);
-  --border: oklch(0.88 0.01 97.36);
-  --input: oklch(0.76 0.02 98.35);
-  --ring: oklch(0.59 0.17 253.06);
-  --chart-1: oklch(0.56 0.13 43.00);
-  --chart-2: oklch(0.69 0.16 290.41);
-  --chart-3: oklch(0.88 0.03 93.13);
-  --chart-4: oklch(0.88 0.04 298.18);
-  --chart-5: oklch(0.56 0.13 42.06);
-  --sidebar: oklch(0.97 0.01 98.88);
-  --sidebar-foreground: oklch(0.36 0.01 106.65);
-  --sidebar-primary: oklch(0.62 0.14 39.04);
-  --sidebar-primary-foreground: oklch(0.99 0 0);
-  --sidebar-accent: oklch(0.92 0.01 92.99);
-  --sidebar-accent-foreground: oklch(0.33 0 0);
-  --sidebar-border: oklch(0.94 0 0);
-  --sidebar-ring: oklch(0.77 0 0);
-  --destructive-foreground: oklch(1.0000 0 0);
-  --radius: 0.5rem;
-  --shadow-2xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
-  --shadow-xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
-  --shadow-sm: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10);
-  --shadow: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10);
-  --shadow-md: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 2px 4px -2px hsl(0 0% 0% / 0.10);
-  --shadow-lg: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 4px 6px -2px hsl(0 0% 0% / 0.10);
-  --shadow-xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 8px 10px -2px hsl(0 0% 0% / 0.10);
-  --shadow-2xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.25);
-  --tracking-normal: 0em;
+	--background: oklch(0.98 0.01 95.1);
+	--foreground: oklch(0.34 0.03 95.72);
+	--card: oklch(0.98 0.01 95.1);
+	--card-foreground: oklch(0.19 0 106.59);
+	--popover: oklch(1 0 0);
+	--popover-foreground: oklch(0.27 0.02 98.94);
+	--primary: oklch(0.62 0.14 39.04);
+	--primary-foreground: oklch(1 0 0);
+	--secondary: oklch(0.92 0.01 92.99);
+	--secondary-foreground: oklch(0.43 0.02 98.6);
+	--muted: oklch(0.93 0.02 90.24);
+	--muted-foreground: oklch(0.61 0.01 97.42);
+	--accent: oklch(0.92 0.01 92.99);
+	--accent-foreground: oklch(0.27 0.02 98.94);
+	--destructive: oklch(0.19 0 106.59);
+	--border: oklch(0.88 0.01 97.36);
+	--input: oklch(0.76 0.02 98.35);
+	--ring: oklch(0.59 0.17 253.06);
+	--chart-1: oklch(0.56 0.13 43);
+	--chart-2: oklch(0.69 0.16 290.41);
+	--chart-3: oklch(0.88 0.03 93.13);
+	--chart-4: oklch(0.88 0.04 298.18);
+	--chart-5: oklch(0.56 0.13 42.06);
+	--sidebar: oklch(0.97 0.01 98.88);
+	--sidebar-foreground: oklch(0.36 0.01 106.65);
+	--sidebar-primary: oklch(0.62 0.14 39.04);
+	--sidebar-primary-foreground: oklch(0.99 0 0);
+	--sidebar-accent: oklch(0.92 0.01 92.99);
+	--sidebar-accent-foreground: oklch(0.33 0 0);
+	--sidebar-border: oklch(0.94 0 0);
+	--sidebar-ring: oklch(0.77 0 0);
+	--destructive-foreground: oklch(1 0 0);
+	--radius: 0.5rem;
+	--shadow-2xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
+	--shadow-xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
+	--shadow-sm: 0px 4px 8px -1px hsl(0 0% 0% / 0.1), 0px 1px 2px -2px hsl(0 0% 0% / 0.1);
+	--shadow: 0px 4px 8px -1px hsl(0 0% 0% / 0.1), 0px 1px 2px -2px hsl(0 0% 0% / 0.1);
+	--shadow-md: 0px 4px 8px -1px hsl(0 0% 0% / 0.1), 0px 2px 4px -2px hsl(0 0% 0% / 0.1);
+	--shadow-lg: 0px 4px 8px -1px hsl(0 0% 0% / 0.1), 0px 4px 6px -2px hsl(0 0% 0% / 0.1);
+	--shadow-xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.1), 0px 8px 10px -2px hsl(0 0% 0% / 0.1);
+	--shadow-2xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.25);
+	--tracking-normal: 0em;
 }
 
 .dark {
-  --background: oklch(0.27 0.00 106.64);
-  --foreground: oklch(0.81 0.01 93.01);
-  --card: oklch(0.27 0.00 106.64);
-  --card-foreground: oklch(0.98 0.01 95.10);
-  --popover: oklch(0.31 0.00 106.60);
-  --popover-foreground: oklch(0.92 0.00 106.48);
-  --primary: oklch(0.67 0.13 38.76);
-  --primary-foreground: oklch(1.00 0 0);
-  --secondary: oklch(0.98 0.01 95.10);
-  --secondary-foreground: oklch(0.31 0.00 106.60);
-  --muted: oklch(0.22 0.00 106.71);
-  --muted-foreground: oklch(0.77 0.02 99.07);
-  --accent: oklch(0.21 0.01 95.42);
-  --accent-foreground: oklch(0.97 0.01 98.88);
-  --destructive: oklch(0.64 0.21 25.33);
-  --border: oklch(0.36 0.01 106.89);
-  --input: oklch(0.43 0.01 100.22);
-  --ring: oklch(0.59 0.17 253.06);
-  --chart-1: oklch(0.56 0.13 43.00);
-  --chart-2: oklch(0.69 0.16 290.41);
-  --chart-3: oklch(0.21 0.01 95.42);
-  --chart-4: oklch(0.31 0.05 289.32);
-  --chart-5: oklch(0.56 0.13 42.06);
-  --sidebar: oklch(0.24 0.00 67.71);
-  --sidebar-foreground: oklch(0.81 0.01 93.01);
-  --sidebar-primary: oklch(0.33 0 0);
-  --sidebar-primary-foreground: oklch(0.99 0 0);
-  --sidebar-accent: oklch(0.17 0.00 106.62);
-  --sidebar-accent-foreground: oklch(0.81 0.01 93.01);
-  --sidebar-border: oklch(0.94 0 0);
-  --sidebar-ring: oklch(0.77 0 0);
-  --destructive-foreground: oklch(1.0000 0 0);
-  --radius: 0.5rem;
-  --shadow-2xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
-  --shadow-xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
-  --shadow-sm: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10);
-  --shadow: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10);
-  --shadow-md: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 2px 4px -2px hsl(0 0% 0% / 0.10);
-  --shadow-lg: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 4px 6px -2px hsl(0 0% 0% / 0.10);
-  --shadow-xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 8px 10px -2px hsl(0 0% 0% / 0.10);
-  --shadow-2xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.25);
+	--background: oklch(0.27 0 106.64);
+	--foreground: oklch(0.81 0.01 93.01);
+	--card: oklch(0.27 0 106.64);
+	--card-foreground: oklch(0.98 0.01 95.1);
+	--popover: oklch(0.31 0 106.6);
+	--popover-foreground: oklch(0.92 0 106.48);
+	--primary: oklch(0.67 0.13 38.76);
+	--primary-foreground: oklch(1 0 0);
+	--secondary: oklch(0.98 0.01 95.1);
+	--secondary-foreground: oklch(0.31 0 106.6);
+	--muted: oklch(0.22 0 106.71);
+	--muted-foreground: oklch(0.77 0.02 99.07);
+	--accent: oklch(0.21 0.01 95.42);
+	--accent-foreground: oklch(0.97 0.01 98.88);
+	--destructive: oklch(0.64 0.21 25.33);
+	--border: oklch(0.36 0.01 106.89);
+	--input: oklch(0.43 0.01 100.22);
+	--ring: oklch(0.59 0.17 253.06);
+	--chart-1: oklch(0.56 0.13 43);
+	--chart-2: oklch(0.69 0.16 290.41);
+	--chart-3: oklch(0.21 0.01 95.42);
+	--chart-4: oklch(0.31 0.05 289.32);
+	--chart-5: oklch(0.56 0.13 42.06);
+	--sidebar: oklch(0.24 0 67.71);
+	--sidebar-foreground: oklch(0.81 0.01 93.01);
+	--sidebar-primary: oklch(0.33 0 0);
+	--sidebar-primary-foreground: oklch(0.99 0 0);
+	--sidebar-accent: oklch(0.17 0 106.62);
+	--sidebar-accent-foreground: oklch(0.81 0.01 93.01);
+	--sidebar-border: oklch(0.94 0 0);
+	--sidebar-ring: oklch(0.77 0 0);
+	--destructive-foreground: oklch(1 0 0);
+	--radius: 0.5rem;
+	--shadow-2xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
+	--shadow-xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
+	--shadow-sm: 0px 4px 8px -1px hsl(0 0% 0% / 0.1), 0px 1px 2px -2px hsl(0 0% 0% / 0.1);
+	--shadow: 0px 4px 8px -1px hsl(0 0% 0% / 0.1), 0px 1px 2px -2px hsl(0 0% 0% / 0.1);
+	--shadow-md: 0px 4px 8px -1px hsl(0 0% 0% / 0.1), 0px 2px 4px -2px hsl(0 0% 0% / 0.1);
+	--shadow-lg: 0px 4px 8px -1px hsl(0 0% 0% / 0.1), 0px 4px 6px -2px hsl(0 0% 0% / 0.1);
+	--shadow-xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.1), 0px 8px 10px -2px hsl(0 0% 0% / 0.1);
+	--shadow-2xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.25);
 }
 
 @theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
-  --color-destructive-foreground: var(--destructive-foreground);
+	--color-background: var(--background);
+	--color-foreground: var(--foreground);
+	--color-card: var(--card);
+	--color-card-foreground: var(--card-foreground);
+	--color-popover: var(--popover);
+	--color-popover-foreground: var(--popover-foreground);
+	--color-primary: var(--primary);
+	--color-primary-foreground: var(--primary-foreground);
+	--color-secondary: var(--secondary);
+	--color-secondary-foreground: var(--secondary-foreground);
+	--color-muted: var(--muted);
+	--color-muted-foreground: var(--muted-foreground);
+	--color-accent: var(--accent);
+	--color-accent-foreground: var(--accent-foreground);
+	--color-destructive: var(--destructive);
+	--color-border: var(--border);
+	--color-input: var(--input);
+	--color-ring: var(--ring);
+	--color-chart-1: var(--chart-1);
+	--color-chart-2: var(--chart-2);
+	--color-chart-3: var(--chart-3);
+	--color-chart-4: var(--chart-4);
+	--color-chart-5: var(--chart-5);
+	--color-sidebar: var(--sidebar);
+	--color-sidebar-foreground: var(--sidebar-foreground);
+	--color-sidebar-primary: var(--sidebar-primary);
+	--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+	--color-sidebar-accent: var(--sidebar-accent);
+	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+	--color-sidebar-border: var(--sidebar-border);
+	--color-sidebar-ring: var(--sidebar-ring);
+	--color-destructive-foreground: var(--destructive-foreground);
 
-  --font-sans: var(--font-sans);
-  --font-mono: var(--font-mono);
-  --font-serif: var(--font-serif);
+	--font-sans: var(--font-sans);
+	--font-mono: var(--font-mono);
+	--font-serif: var(--font-serif);
 
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
+	--radius-sm: calc(var(--radius) - 4px);
+	--radius-md: calc(var(--radius) - 2px);
+	--radius-lg: var(--radius);
+	--radius-xl: calc(var(--radius) + 4px);
 
-  --shadow-2xs: var(--shadow-2xs);
-  --shadow-xs: var(--shadow-xs);
-  --shadow-sm: var(--shadow-sm);
-  --shadow: var(--shadow);
-  --shadow-md: var(--shadow-md);
-  --shadow-lg: var(--shadow-lg);
-  --shadow-xl: var(--shadow-xl);
-  --shadow-2xl: var(--shadow-2xl);
+	--shadow-2xs: var(--shadow-2xs);
+	--shadow-xs: var(--shadow-xs);
+	--shadow-sm: var(--shadow-sm);
+	--shadow: var(--shadow);
+	--shadow-md: var(--shadow-md);
+	--shadow-lg: var(--shadow-lg);
+	--shadow-xl: var(--shadow-xl);
+	--shadow-2xl: var(--shadow-2xl);
 }
 
 @layer base {