pika-ux 1.0.0-beta.9 → 1.0.0

package/dist/cli/template-files/pnpm-workspace.yaml

@@ -1,8 +1,8 @@
 catalog:
   '@iconify-json/ci': ^1.2.2
-  '@iconify-json/lucide': ^1.2.44
+  '@iconify-json/lucide': ^1.2.68
   '@internationalized/date': ^3.8.1
-  '@lucide/svelte': ^0.482.0
+  '@lucide/svelte': ^0.544.0
   '@sveltejs/vite-plugin-svelte': ^6.2.0
   '@tailwindcss/typography': ^0.5.16
   '@tailwindcss/vite': ^4.1.13
@@ -17,5 +17,5 @@ catalog:
   tailwindcss: ^4.1.11
   tw-animate-css: ^1.4.0
   typescript: ^5.9.2
-  unplugin-icons: ^22.3.0
+  unplugin-icons: ^22.4.1
   vite: ^7.1.7

package/dist/cli/template-files/src/App.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import './app.css';
-    import Counter from './lib/Counter.svelte';
+    import Counter from './lib/counter.svelte';
 </script>
 
 <main class="flex flex-col items-center justify-center h-screen">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pika-ux",
-  "version": "1.0.0-beta.9",
+  "version": "1.0.0",
   "type": "module",
   "exports": {
     "./pika/*": "./src/pika/*",

package/src/App.svelte

@@ -1,13 +1,11 @@
 <script lang="ts">
     import './app.css';
     import Navigation from './lib/docsite/Navigation.svelte';
-
-    // Page components
-    import GettingStarted from './lib/docsite/pages/GettingStarted.svelte';
-    import Icons from './lib/docsite/pages/Icons.svelte';
     import Colors from './lib/docsite/pages/Colors.svelte';
     import Components from './lib/docsite/pages/Components.svelte';
     import Button from './lib/docsite/pages/components/Button.svelte';
+    import GettingStarted from './lib/docsite/pages/GettingStarted.svelte';
+    import Icons from './lib/docsite/pages/Icons.svelte';
 
     // Simple routing state
     let currentPage = $state('getting-started');

package/src/pika/confirm-dialog/confirm-dialog.svelte

@@ -37,7 +37,7 @@
         }
     }}
 >
-    <Dialog.Content>
+    <Dialog.Content class="max-w-xl max-h-[80vh] overflow-hidden flex flex-col">
         <Dialog.Title>{title ?? 'Confirm'}</Dialog.Title>
         {confirmQuestion}
         <Dialog.Footer>

package/src/shadcn/dropdown-menu/dropdown-menu-group.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
-
-	let { ref = $bindable(null), ...restProps }: DropdownMenuPrimitive.GroupProps = $props();
+    import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+    let { ref = $bindable(null), ...restProps }: DropdownMenuPrimitive.GroupProps = $props();
 </script>
 
 <DropdownMenuPrimitive.Group bind:ref data-slot="dropdown-menu-group" {...restProps} />

package/src/shadcn/dropdown-menu/dropdown-menu-item.svelte

@@ -20,7 +20,7 @@
     data-inset={inset}
     data-variant={variant}
     class={cn(
-        "data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:data-highlighted:bg-destructive/10 dark:data-[variant=destructive]:data-highlighted:bg-destructive/20 data-[variant=destructive]:data-highlighted:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground outline-hidden relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm data-[disabled]:pointer-events-none data-[inset]:pl-8 data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:data-[highlighted]:bg-destructive/10 dark:data-[variant=destructive]:data-[highlighted]:bg-destructive/20 data-[variant=destructive]:data-[highlighted]:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground outline-hidden relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm data-[disabled]:pointer-events-none data-[inset]:pl-8 data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
         className
     )}
     {...restProps}

package/src/shadcn/dropdown-menu/dropdown-menu-label.svelte

@@ -13,12 +13,6 @@
     } = $props();
 </script>
 
-<div
-    bind:this={ref}
-    data-slot="dropdown-menu-label"
-    data-inset={inset}
-    class={cn('px-2 py-1.5 text-sm font-semibold data-[inset]:pl-8', className)}
-    {...restProps}
->
+<div bind:this={ref} data-slot="dropdown-menu-label" data-inset={inset} class={cn('px-2 py-1.5 text-sm font-semibold data-[inset]:pl-8', className)} {...restProps}>
     {@render children?.()}
 </div>

package/src/shadcn/dropdown-menu/dropdown-menu-radio-group.svelte

@@ -1,16 +1,6 @@
 <script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
-
-	let {
-		ref = $bindable(null),
-		value = $bindable(),
-		...restProps
-	}: DropdownMenuPrimitive.RadioGroupProps = $props();
+    import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+    let { ref = $bindable(null), value = $bindable(), ...restProps }: DropdownMenuPrimitive.RadioGroupProps = $props();
 </script>
 
-<DropdownMenuPrimitive.RadioGroup
-	bind:ref
-	bind:value
-	data-slot="dropdown-menu-radio-group"
-	{...restProps}
-/>
+<DropdownMenuPrimitive.RadioGroup bind:ref bind:value data-slot="dropdown-menu-radio-group" {...restProps} />

package/src/shadcn/dropdown-menu/dropdown-menu-radio-item.svelte

@@ -2,7 +2,6 @@
     import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
     import CircleIcon from '$icons/lucide/circle';
     import { cn, type WithoutChild } from '../utils.js';
-
     let { ref = $bindable(null), class: className, children: childrenProp, ...restProps }: WithoutChild<DropdownMenuPrimitive.RadioItemProps> = $props();
 </script>
 

package/src/shadcn/dropdown-menu/dropdown-menu-separator.svelte

@@ -1,13 +1,7 @@
 <script lang="ts">
     import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
     import { cn } from '../utils.js';
-
     let { ref = $bindable(null), class: className, ...restProps }: DropdownMenuPrimitive.SeparatorProps = $props();
 </script>
 
-<DropdownMenuPrimitive.Separator
-    bind:ref
-    data-slot="dropdown-menu-separator"
-    class={cn('bg-border -mx-1 my-1 h-px', className)}
-    {...restProps}
-/>
+<DropdownMenuPrimitive.Separator bind:ref data-slot="dropdown-menu-separator" class={cn('bg-border -mx-1 my-1 h-px', className)} {...restProps} />

package/src/shadcn/dropdown-menu/dropdown-menu-shortcut.svelte

@@ -1,20 +1,9 @@
 <script lang="ts">
     import type { HTMLAttributes } from 'svelte/elements';
     import { cn, type WithElementRef } from '../utils.js';
-
-    let {
-        ref = $bindable(null),
-        class: className,
-        children,
-        ...restProps
-    }: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
+    let { ref = $bindable(null), class: className, children, ...restProps }: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
 </script>
 
-<span
-    bind:this={ref}
-    data-slot="dropdown-menu-shortcut"
-    class={cn('text-muted-foreground ml-auto text-xs tracking-widest', className)}
-    {...restProps}
->
+<span bind:this={ref} data-slot="dropdown-menu-shortcut" class={cn('text-muted-foreground ml-auto text-xs tracking-widest', className)} {...restProps}>
     {@render children?.()}
 </span>

package/src/shadcn/dropdown-menu/dropdown-menu-sub-content.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
     import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
     import { cn } from '../utils.js';
-
     let { ref = $bindable(null), class: className, ...restProps }: DropdownMenuPrimitive.SubContentProps = $props();
 </script>
 

package/src/shadcn/dropdown-menu/dropdown-menu-sub-trigger.svelte

@@ -2,7 +2,6 @@
     import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
     import ChevronRightIcon from '$icons/lucide/chevron-right';
     import { cn } from '../utils.js';
-
     let {
         ref = $bindable(null),
         class: className,
@@ -19,7 +18,7 @@
     data-slot="dropdown-menu-sub-trigger"
     data-inset={inset}
     class={cn(
-        "data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground outline-hidden [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm data-[disabled]:pointer-events-none data-[inset]:pl-8 data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground outline-hidden [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm data-[disabled]:pointer-events-none data-[inset]:pl-8 data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
         className
     )}
     {...restProps}

package/src/shadcn/dropdown-menu/dropdown-menu-trigger.svelte

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

package/src/shadcn/dropdown-menu/index.ts

@@ -1,49 +1,48 @@
-import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
-import CheckboxItem from "./dropdown-menu-checkbox-item.svelte";
-import Content from "./dropdown-menu-content.svelte";
-import Group from "./dropdown-menu-group.svelte";
-import Item from "./dropdown-menu-item.svelte";
-import Label from "./dropdown-menu-label.svelte";
-import RadioGroup from "./dropdown-menu-radio-group.svelte";
-import RadioItem from "./dropdown-menu-radio-item.svelte";
-import Separator from "./dropdown-menu-separator.svelte";
-import Shortcut from "./dropdown-menu-shortcut.svelte";
-import Trigger from "./dropdown-menu-trigger.svelte";
-import SubContent from "./dropdown-menu-sub-content.svelte";
-import SubTrigger from "./dropdown-menu-sub-trigger.svelte";
-import GroupHeading from "./dropdown-menu-group-heading.svelte";
+import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+import CheckboxItem from './dropdown-menu-checkbox-item.svelte';
+import Content from './dropdown-menu-content.svelte';
+import Group from './dropdown-menu-group.svelte';
+import Item from './dropdown-menu-item.svelte';
+import Label from './dropdown-menu-label.svelte';
+import RadioGroup from './dropdown-menu-radio-group.svelte';
+import RadioItem from './dropdown-menu-radio-item.svelte';
+import Separator from './dropdown-menu-separator.svelte';
+import Shortcut from './dropdown-menu-shortcut.svelte';
+import Trigger from './dropdown-menu-trigger.svelte';
+import SubContent from './dropdown-menu-sub-content.svelte';
+import SubTrigger from './dropdown-menu-sub-trigger.svelte';
+import GroupHeading from './dropdown-menu-group-heading.svelte';
 const Sub = DropdownMenuPrimitive.Sub;
 const Root = DropdownMenuPrimitive.Root;
-
 export {
-	CheckboxItem,
-	Content,
-	Root as DropdownMenu,
-	CheckboxItem as DropdownMenuCheckboxItem,
-	Content as DropdownMenuContent,
-	Group as DropdownMenuGroup,
-	Item as DropdownMenuItem,
-	Label as DropdownMenuLabel,
-	RadioGroup as DropdownMenuRadioGroup,
-	RadioItem as DropdownMenuRadioItem,
-	Separator as DropdownMenuSeparator,
-	Shortcut as DropdownMenuShortcut,
-	Sub as DropdownMenuSub,
-	SubContent as DropdownMenuSubContent,
-	SubTrigger as DropdownMenuSubTrigger,
-	Trigger as DropdownMenuTrigger,
-	GroupHeading as DropdownMenuGroupHeading,
-	Group,
-	GroupHeading,
-	Item,
-	Label,
-	RadioGroup,
-	RadioItem,
-	Root,
-	Separator,
-	Shortcut,
-	Sub,
-	SubContent,
-	SubTrigger,
-	Trigger,
+    CheckboxItem,
+    Content,
+    Root as DropdownMenu,
+    CheckboxItem as DropdownMenuCheckboxItem,
+    Content as DropdownMenuContent,
+    Group as DropdownMenuGroup,
+    Item as DropdownMenuItem,
+    Label as DropdownMenuLabel,
+    RadioGroup as DropdownMenuRadioGroup,
+    RadioItem as DropdownMenuRadioItem,
+    Separator as DropdownMenuSeparator,
+    Shortcut as DropdownMenuShortcut,
+    Sub as DropdownMenuSub,
+    SubContent as DropdownMenuSubContent,
+    SubTrigger as DropdownMenuSubTrigger,
+    Trigger as DropdownMenuTrigger,
+    GroupHeading as DropdownMenuGroupHeading,
+    Group,
+    GroupHeading,
+    Item,
+    Label,
+    RadioGroup,
+    RadioItem,
+    Root,
+    Separator,
+    Shortcut,
+    Sub,
+    SubContent,
+    SubTrigger,
+    Trigger
 };

package/src/shadcn/dropdown-menu copy/dropdown-menu-checkbox-item.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+    import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+    import CheckIcon from '$icons/lucide/check';
+    import MinusIcon from '$icons/lucide/minus';
+    import { cn, type WithoutChildrenOrChild } from '../utils.js';
+    import type { Snippet } from 'svelte';
+
+    let {
+        ref = $bindable(null),
+        checked = $bindable(false),
+        indeterminate = $bindable(false),
+        class: className,
+        children: childrenProp,
+        ...restProps
+    }: WithoutChildrenOrChild<DropdownMenuPrimitive.CheckboxItemProps> & {
+        children?: Snippet;
+    } = $props();
+</script>
+
+<DropdownMenuPrimitive.CheckboxItem
+    bind:ref
+    bind:checked
+    bind:indeterminate
+    data-slot="dropdown-menu-checkbox-item"
+    class={cn(
+        "focus:bg-accent focus:text-accent-foreground outline-hidden relative flex cursor-default select-none items-center gap-2 rounded-sm py-1.5 pl-8 pr-2 text-sm data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className
+    )}
+    {...restProps}
+>
+    {#snippet children({ checked, indeterminate })}
+        <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+            {#if indeterminate}
+                <MinusIcon class="size-4" />
+            {:else}
+                <CheckIcon class={cn('size-4', !checked && 'text-transparent')} />
+            {/if}
+        </span>
+        {@render childrenProp?.()}
+    {/snippet}
+</DropdownMenuPrimitive.CheckboxItem>

package/src/shadcn/dropdown-menu copy/dropdown-menu-content.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+    import { cn } from '../utils.js';
+    import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+
+    let {
+        ref = $bindable(null),
+        sideOffset = 4,
+        portalProps,
+        class: className,
+        ...restProps
+    }: DropdownMenuPrimitive.ContentProps & {
+        portalProps?: DropdownMenuPrimitive.PortalProps;
+    } = $props();
+</script>
+
+<DropdownMenuPrimitive.Portal {...portalProps}>
+    <DropdownMenuPrimitive.Content
+        bind:ref
+        data-slot="dropdown-menu-content"
+        {sideOffset}
+        class={cn(
+            'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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 max-h-(--bits-dropdown-menu-content-available-height) origin-(--bits-dropdown-menu-content-transform-origin) z-50 min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border p-1 shadow-md outline-none',
+            className
+        )}
+        {...restProps}
+    />
+</DropdownMenuPrimitive.Portal>

package/src/shadcn/dropdown-menu copy/dropdown-menu-group-heading.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+    import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+    import { cn } from '../utils.js';
+    import type { ComponentProps } from 'svelte';
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        inset,
+        ...restProps
+    }: ComponentProps<typeof DropdownMenuPrimitive.GroupHeading> & {
+        inset?: boolean;
+    } = $props();
+</script>
+
+<DropdownMenuPrimitive.GroupHeading
+    bind:ref
+    data-slot="dropdown-menu-group-heading"
+    data-inset={inset}
+    class={cn('px-2 py-1.5 text-sm font-semibold data-[inset]:pl-8', className)}
+    {...restProps}
+/>

package/src/shadcn/dropdown-menu copy/dropdown-menu-group.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: DropdownMenuPrimitive.GroupProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Group bind:ref data-slot="dropdown-menu-group" {...restProps} />

package/src/shadcn/dropdown-menu copy/dropdown-menu-item.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+    import { cn } from '../utils.js';
+    import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        inset,
+        variant = 'default',
+        ...restProps
+    }: DropdownMenuPrimitive.ItemProps & {
+        inset?: boolean;
+        variant?: 'default' | 'destructive';
+    } = $props();
+</script>
+
+<DropdownMenuPrimitive.Item
+    bind:ref
+    data-slot="dropdown-menu-item"
+    data-inset={inset}
+    data-variant={variant}
+    class={cn(
+        "data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:data-highlighted:bg-destructive/10 dark:data-[variant=destructive]:data-highlighted:bg-destructive/20 data-[variant=destructive]:data-highlighted:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground outline-hidden relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm data-[disabled]:pointer-events-none data-[inset]:pl-8 data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className
+    )}
+    {...restProps}
+/>

package/src/shadcn/dropdown-menu copy/dropdown-menu-label.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+    import { cn, type WithElementRef } from '../utils.js';
+    import type { HTMLAttributes } from 'svelte/elements';
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        inset,
+        children,
+        ...restProps
+    }: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+        inset?: boolean;
+    } = $props();
+</script>
+
+<div
+    bind:this={ref}
+    data-slot="dropdown-menu-label"
+    data-inset={inset}
+    class={cn('px-2 py-1.5 text-sm font-semibold data-[inset]:pl-8', className)}
+    {...restProps}
+>
+    {@render children?.()}
+</div>

package/src/shadcn/dropdown-menu copy/dropdown-menu-radio-group.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		...restProps
+	}: DropdownMenuPrimitive.RadioGroupProps = $props();
+</script>
+
+<DropdownMenuPrimitive.RadioGroup
+	bind:ref
+	bind:value
+	data-slot="dropdown-menu-radio-group"
+	{...restProps}
+/>

package/src/shadcn/dropdown-menu copy/dropdown-menu-radio-item.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+    import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+    import CircleIcon from '$icons/lucide/circle';
+    import { cn, type WithoutChild } from '../utils.js';
+
+    let { ref = $bindable(null), class: className, children: childrenProp, ...restProps }: WithoutChild<DropdownMenuPrimitive.RadioItemProps> = $props();
+</script>
+
+<DropdownMenuPrimitive.RadioItem
+    bind:ref
+    data-slot="dropdown-menu-radio-item"
+    class={cn(
+        "focus:bg-accent focus:text-accent-foreground outline-hidden relative flex cursor-default select-none items-center gap-2 rounded-sm py-1.5 pl-8 pr-2 text-sm data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className
+    )}
+    {...restProps}
+>
+    {#snippet children({ checked })}
+        <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+            {#if checked}
+                <CircleIcon class="size-2 fill-current" />
+            {/if}
+        </span>
+        {@render childrenProp?.({ checked })}
+    {/snippet}
+</DropdownMenuPrimitive.RadioItem>

package/src/shadcn/dropdown-menu copy/dropdown-menu-separator.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+    import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+    import { cn } from '../utils.js';
+
+    let { ref = $bindable(null), class: className, ...restProps }: DropdownMenuPrimitive.SeparatorProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Separator
+    bind:ref
+    data-slot="dropdown-menu-separator"
+    class={cn('bg-border -mx-1 my-1 h-px', className)}
+    {...restProps}
+/>

package/src/shadcn/dropdown-menu copy/dropdown-menu-shortcut.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+    import type { HTMLAttributes } from 'svelte/elements';
+    import { cn, type WithElementRef } from '../utils.js';
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        children,
+        ...restProps
+    }: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
+</script>
+
+<span
+    bind:this={ref}
+    data-slot="dropdown-menu-shortcut"
+    class={cn('text-muted-foreground ml-auto text-xs tracking-widest', className)}
+    {...restProps}
+>
+    {@render children?.()}
+</span>

package/src/shadcn/dropdown-menu copy/dropdown-menu-sub-content.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+    import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+    import { cn } from '../utils.js';
+
+    let { ref = $bindable(null), class: className, ...restProps }: DropdownMenuPrimitive.SubContentProps = $props();
+</script>
+
+<DropdownMenuPrimitive.SubContent
+    bind:ref
+    data-slot="dropdown-menu-sub-content"
+    class={cn(
+        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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-dropdown-menu-content-transform-origin) z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-lg',
+        className
+    )}
+    {...restProps}
+/>

package/src/shadcn/dropdown-menu copy/dropdown-menu-sub-trigger.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+    import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+    import ChevronRightIcon from '$icons/lucide/chevron-right';
+    import { cn } from '../utils.js';
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        inset,
+        children,
+        ...restProps
+    }: DropdownMenuPrimitive.SubTriggerProps & {
+        inset?: boolean;
+    } = $props();
+</script>
+
+<DropdownMenuPrimitive.SubTrigger
+    bind:ref
+    data-slot="dropdown-menu-sub-trigger"
+    data-inset={inset}
+    class={cn(
+        "data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground outline-hidden [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm data-[disabled]:pointer-events-none data-[inset]:pl-8 data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className
+    )}
+    {...restProps}
+>
+    {@render children?.()}
+    <ChevronRightIcon class="ml-auto size-4" />
+</DropdownMenuPrimitive.SubTrigger>

package/src/shadcn/dropdown-menu copy/dropdown-menu-trigger.svelte

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

package/src/shadcn/spinner/index.ts

@@ -0,0 +1 @@
+export { default as Spinner } from './spinner.svelte';

package/src/shadcn/spinner/spinner.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+    import { cn } from '../utils.js';
+    import Loader2Icon from '$icons/lucide/loader-circle';
+    import type { ComponentProps } from 'svelte';
+    type Props = ComponentProps<typeof Loader2Icon>;
+    let { class: className, ...restProps }: Props = $props();
+</script>
+
+<Loader2Icon role="status" aria-label="Loading" class={cn('size-4 animate-spin', className)} {...restProps} />