pika-ux 1.0.0-beta.8 → 1.0.0

package/src/shadcn/carousel/carousel.svelte

@@ -1,88 +1,92 @@
 <script lang="ts">
-    import { type CarouselAPI, type CarouselProps, type EmblaContext, setEmblaContext } from './context.js';
-    import { cn, type WithElementRef } from '../utils.js';
+	import {
+		type CarouselAPI,
+		type CarouselProps,
+		type EmblaContext,
+		setEmblaContext,
+	} from "./context.js";
+	import { cn } from "../utils.js";
 
-    let {
-        ref = $bindable(null),
-        opts = {},
-        plugins = [],
-        setApi = () => {},
-        orientation = 'horizontal',
-        class: className,
-        children,
-        ...restProps
-    }: WithElementRef<CarouselProps> = $props();
+	let {
+		opts = {},
+		plugins = [],
+		setApi = () => {},
+		orientation = "horizontal",
+		class: className,
+		children,
+		...restProps
+	}: CarouselProps = $props();
 
-    let carouselState = $state<EmblaContext>({
-        api: undefined,
-        scrollPrev,
-        scrollNext,
-        orientation,
-        canScrollNext: false,
-        canScrollPrev: false,
-        handleKeyDown,
-        options: opts,
-        plugins,
-        onInit,
-        scrollSnaps: [],
-        selectedIndex: 0,
-        scrollTo,
-    });
+	let carouselState = $state<EmblaContext>({
+		api: undefined,
+		scrollPrev,
+		scrollNext,
+		orientation,
+		canScrollNext: false,
+		canScrollPrev: false,
+		handleKeyDown,
+		options: opts,
+		plugins,
+		onInit,
+		scrollSnaps: [],
+		selectedIndex: 0,
+		scrollTo,
+	});
 
-    setEmblaContext(carouselState);
+	setEmblaContext(carouselState);
 
-    function scrollPrev() {
-        carouselState.api?.scrollPrev();
-    }
+	function scrollPrev() {
+		carouselState.api?.scrollPrev();
+	}
+	function scrollNext() {
+		carouselState.api?.scrollNext();
+	}
+	function scrollTo(index: number, jump?: boolean) {
+		carouselState.api?.scrollTo(index, jump);
+	}
 
-    function scrollNext() {
-        carouselState.api?.scrollNext();
-    }
+	function onSelect(api: CarouselAPI) {
+		if (!api) return;
+		carouselState.canScrollPrev = api.canScrollPrev();
+		carouselState.canScrollNext = api.canScrollNext();
+		carouselState.selectedIndex = api.selectedScrollSnap();
+	}
 
-    function scrollTo(index: number, jump?: boolean) {
-        carouselState.api?.scrollTo(index, jump);
-    }
+	$effect(() => {
+		if (carouselState.api) {
+			onSelect(carouselState.api);
+			carouselState.api.on("select", onSelect);
+			carouselState.api.on("reInit", onSelect);
+		}
+	});
 
-    function onSelect() {
-        if (!carouselState.api) return;
-        carouselState.selectedIndex = carouselState.api.selectedScrollSnap();
-        carouselState.canScrollNext = carouselState.api.canScrollNext();
-        carouselState.canScrollPrev = carouselState.api.canScrollPrev();
-    }
+	function handleKeyDown(e: KeyboardEvent) {
+		if (e.key === "ArrowLeft") {
+			e.preventDefault();
+			scrollPrev();
+		} else if (e.key === "ArrowRight") {
+			e.preventDefault();
+			scrollNext();
+		}
+	}
 
-    function handleKeyDown(e: KeyboardEvent) {
-        if (e.key === 'ArrowLeft') {
-            e.preventDefault();
-            scrollPrev();
-        } else if (e.key === 'ArrowRight') {
-            e.preventDefault();
-            scrollNext();
-        }
-    }
+	$effect(() => {
+		setApi(carouselState.api);
+	});
 
-    function onInit(event: CustomEvent<CarouselAPI>) {
-        carouselState.api = event.detail;
-        setApi(carouselState.api);
+	function onInit(event: CustomEvent<CarouselAPI>) {
+		carouselState.api = event.detail;
 
-        carouselState.scrollSnaps = carouselState.api.scrollSnapList();
-        carouselState.api.on('select', onSelect);
-        onSelect();
-    }
+		carouselState.scrollSnaps = carouselState.api.scrollSnapList();
+	}
 
-    $effect(() => {
-        return () => {
-            carouselState.api?.off('select', onSelect);
-        };
-    });
+	$effect(() => {
+		return () => {
+			carouselState.api?.off("select", onSelect);
+		};
+	});
 </script>
 
-<div
-    bind:this={ref}
-    data-slot="carousel"
-    class={cn('relative', className)}
-    role="region"
-    aria-roledescription="carousel"
-    {...restProps}
->
-    {@render children?.()}
+<div class={cn("relative", className)} role="region" aria-roledescription="carousel" {...restProps}>
+	{@render children?.()}
 </div>

package/src/shadcn/carousel/context.ts

@@ -1,51 +1,56 @@
-import type { WithElementRef } from '../utils.js';
-import type { EmblaCarouselSvelteType, default as emblaCarouselSvelte } from 'embla-carousel-svelte';
-import { getContext, hasContext, setContext } from 'svelte';
-import type { HTMLAttributes } from 'svelte/elements';
+import type { EmblaCarouselSvelteType } from "embla-carousel-svelte";
+import type emblaCarouselSvelte from "embla-carousel-svelte";
+import { getContext, hasContext, setContext } from "svelte";
+import type { WithElementRef } from "bits-ui";
+import type { HTMLAttributes } from "svelte/elements";
 
 export type CarouselAPI =
-    NonNullable<NonNullable<EmblaCarouselSvelteType['$$_attributes']>['on:emblaInit']> extends (evt: CustomEvent<infer CarouselAPI>) => void ? CarouselAPI : never;
+	NonNullable<NonNullable<EmblaCarouselSvelteType["$$_attributes"]>["on:emblaInit"]> extends (
+		evt: CustomEvent<infer CarouselAPI>
+	) => void
+		? CarouselAPI
+		: never;
 
 type EmblaCarouselConfig = NonNullable<Parameters<typeof emblaCarouselSvelte>[1]>;
 
-export type CarouselOptions = EmblaCarouselConfig['options'];
-export type CarouselPlugins = EmblaCarouselConfig['plugins'];
+export type CarouselOptions = EmblaCarouselConfig["options"];
+export type CarouselPlugins = EmblaCarouselConfig["plugins"];
 
 ////
 
 export type CarouselProps = {
-    opts?: CarouselOptions;
-    plugins?: CarouselPlugins;
-    setApi?: (api: CarouselAPI | undefined) => void;
-    orientation?: 'horizontal' | 'vertical';
+	opts?: CarouselOptions;
+	plugins?: CarouselPlugins;
+	setApi?: (api: CarouselAPI | undefined) => void;
+	orientation?: "horizontal" | "vertical";
 } & WithElementRef<HTMLAttributes<HTMLDivElement>>;
 
-const EMBLA_CAROUSEL_CONTEXT = Symbol('EMBLA_CAROUSEL_CONTEXT');
+const EMBLA_CAROUSEL_CONTEXT = Symbol("EMBLA_CAROUSEL_CONTEXT");
 
 export type EmblaContext = {
-    api: CarouselAPI | undefined;
-    orientation: 'horizontal' | 'vertical';
-    scrollNext: () => void;
-    scrollPrev: () => void;
-    canScrollNext: boolean;
-    canScrollPrev: boolean;
-    handleKeyDown: (e: KeyboardEvent) => void;
-    options: CarouselOptions;
-    plugins: CarouselPlugins;
-    onInit: (e: CustomEvent<CarouselAPI>) => void;
-    scrollTo: (index: number, jump?: boolean) => void;
-    scrollSnaps: number[];
-    selectedIndex: number;
+	api: CarouselAPI | undefined;
+	orientation: "horizontal" | "vertical";
+	scrollNext: () => void;
+	scrollPrev: () => void;
+	canScrollNext: boolean;
+	canScrollPrev: boolean;
+	handleKeyDown: (e: KeyboardEvent) => void;
+	options: CarouselOptions;
+	plugins: CarouselPlugins;
+	onInit: (e: CustomEvent<CarouselAPI>) => void;
+	scrollTo: (index: number, jump?: boolean) => void;
+	scrollSnaps: number[];
+	selectedIndex: number;
 };
 
 export function setEmblaContext(config: EmblaContext): EmblaContext {
-    setContext(EMBLA_CAROUSEL_CONTEXT, config);
-    return config;
+	setContext(EMBLA_CAROUSEL_CONTEXT, config);
+	return config;
 }
 
-export function getEmblaContext(name = 'This component') {
-    if (!hasContext(EMBLA_CAROUSEL_CONTEXT)) {
-        throw new Error(`${name} must be used within a <Carousel.Root> component`);
-    }
-    return getContext<ReturnType<typeof setEmblaContext>>(EMBLA_CAROUSEL_CONTEXT);
+export function getEmblaContext(name = "This component") {
+	if (!hasContext(EMBLA_CAROUSEL_CONTEXT)) {
+		throw new Error(`${name} must be used within a <Carousel.Root> component`);
+	}
+	return getContext<ReturnType<typeof setEmblaContext>>(EMBLA_CAROUSEL_CONTEXT);
 }

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>