pika-ux 1.0.0-beta.9 → 1.0.1

package/src/pika/pika-toggle-group/toggle-group.svelte

@@ -0,0 +1,72 @@
+<script lang="ts" module>
+    import { getContext, setContext } from 'svelte';
+    
+    type ToggleGroupContext = {
+        type: 'single' | 'multiple';
+        getValue: () => string | string[];
+        toggle: (itemValue: string) => void;
+        buttonWidth?: string;
+    };
+    
+    export function setToggleGroupCtx(ctx: ToggleGroupContext) {
+        setContext('pika-toggle-group', ctx);
+    }
+
+    export function getToggleGroupCtx() {
+        return getContext<ToggleGroupContext>('pika-toggle-group');
+    }
+</script>
+
+<script lang="ts">
+    import { cn } from '../../shadcn/utils.js';
+    import type { Snippet } from 'svelte';
+
+    type Props = {
+        value?: string | string[];
+        type?: 'single' | 'multiple';
+        buttonWidth?: string;
+        class?: string;
+        variant?: 'default' | 'outline';
+        children?: Snippet;
+    };
+
+    let {
+        type = 'single',
+        value = $bindable(type === 'single' ? '' : []),
+        buttonWidth,
+        class: className,
+        variant = 'outline',
+        children
+    }: Props = $props();
+
+    function toggle(itemValue: string) {
+        if (type === 'single') {
+            value = value === itemValue ? '' : itemValue;
+        } else {
+            const arr = Array.isArray(value) ? value : [];
+            const index = arr.indexOf(itemValue);
+            if (index > -1) {
+                value = arr.filter(v => v !== itemValue);
+            } else {
+                value = [...arr, itemValue];
+            }
+        }
+    }
+
+    setToggleGroupCtx({
+        type,
+        getValue: () => value,
+        toggle,
+        buttonWidth
+    });
+</script>
+
+<div 
+    class={cn(
+        'flex w-fit items-center',
+        className
+    )}
+    role="group"
+>
+    {@render children?.()}
+</div>

package/src/pika/popup-help/popup-help.svelte

@@ -1,15 +1,17 @@
 <script lang="ts">
     import HelpCircleOutline from '$icons/ci/help-circle-outline';
+    import InfoIcon from '$icons/lucide/info';
+    import type { Snippet } from 'svelte';
     import * as Popover from '../../shadcn/popover';
     import { cn } from '../../shadcn/utils';
-    import type { Snippet } from 'svelte';
 
     interface Props {
         popoverClasses?: string;
         children?: Snippet;
+        useInfoIcon?: boolean;
     }
 
-    let { popoverClasses, children }: Props = $props();
+    let { popoverClasses, children, useInfoIcon = false }: Props = $props();
 
     let open = $state(false);
 </script>
@@ -24,7 +26,11 @@
             open = false;
         }}
     >
-        <HelpCircleOutline class="w-4 h-4 text-gray-400 hover:text-blue-500 transition-colors" />
+        {#if useInfoIcon}
+            <InfoIcon class="w-4 h-4 text-gray-400 hover:text-blue-500 transition-colors" />
+        {:else}
+            <HelpCircleOutline class="w-4 h-4 text-gray-400 hover:text-blue-500 transition-colors" />
+        {/if}
     </Popover.Trigger>
 
     <Popover.Content class={cn('w-120', popoverClasses)}>

package/src/shadcn/chart/chart-container.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+    import { cn, type WithElementRef } from '../utils.js';
+    import type { HTMLAttributes } from 'svelte/elements';
+    import ChartStyle from './chart-style.svelte';
+    import { setChartContext, type ChartConfig } from './chart-utils.js';
+    const uid = $props.id();
+    let {
+        ref = $bindable(null),
+        id = uid,
+        class: className,
+        children,
+        config,
+        ...restProps
+    }: WithElementRef<HTMLAttributes<HTMLElement>> & {
+        config: ChartConfig;
+    } = $props();
+    const chartId = `chart-${id || uid.replace(/:/g, '')}`;
+    setChartContext({
+        get config() {
+            return config;
+        }
+    });
+</script>
+
+<div
+    bind:this={ref}
+    data-chart={chartId}
+    data-slot="chart"
+    class={cn(
+        'flex aspect-video justify-center overflow-visible text-xs',
+        // Overrides
+        //
+        // Stroke around dots/marks when hovering
+        '[&_.stroke-white]:stroke-transparent',
+        // override the default stroke color of lines
+        '[&_.lc-line]:stroke-border/50',
+        // by default, layerchart shows a line intersecting the point when hovering, this hides that
+        '[&_.lc-highlight-line]:stroke-0',
+        // by default, when you hover a point on a stacked series chart, it will drop the opacity
+        // of the other series, this overrides that
+        '[&_.lc-area-path]:opacity-100 [&_.lc-highlight-line]:opacity-100 [&_.lc-highlight-point]:opacity-100 [&_.lc-spline-path]:opacity-100 [&_.lc-text-svg]:overflow-visible [&_.lc-text]:text-xs',
+        // We don't want the little tick lines between the axis labels and the chart, so we remove
+        // the stroke. The alternative is to manually disable `tickMarks` on the x/y axis of every
+        // chart.
+        '[&_.lc-axis-tick]:stroke-0',
+        // We don't want to display the rule on the x/y axis, as there is already going to be
+        // a grid line there and rule ends up overlapping the marks because it is rendered after
+        // the marks
+        '[&_.lc-rule-x-line:not(.lc-grid-x-rule)]:stroke-0 [&_.lc-rule-y-line:not(.lc-grid-y-rule)]:stroke-0',
+        '[&_.lc-grid-x-radial-line]:stroke-border [&_.lc-grid-x-radial-circle]:stroke-border',
+        '[&_.lc-grid-y-radial-line]:stroke-border [&_.lc-grid-y-radial-circle]:stroke-border',
+        // Legend adjustments
+        '[&_.lc-legend-swatch-button]:items-center [&_.lc-legend-swatch-button]:gap-1.5',
+        '[&_.lc-legend-swatch-group]:items-center [&_.lc-legend-swatch-group]:gap-4',
+        '[&_.lc-legend-swatch]:size-2.5 [&_.lc-legend-swatch]:rounded-[2px]',
+        // Labels
+        '[&_.lc-labels-text:not([fill])]:fill-foreground [&_text]:stroke-transparent',
+        // Tick labels on th x/y axes
+        '[&_.lc-axis-tick-label]:fill-muted-foreground [&_.lc-axis-tick-label]:font-normal',
+        '[&_.lc-tooltip-rects-g]:fill-transparent',
+        '[&_.lc-layout-svg-g]:fill-transparent',
+        '[&_.lc-root-container]:w-full',
+        className
+    )}
+    {...restProps}
+>
+    <ChartStyle id={chartId} {config} />
+    {@render children?.()}
+</div>

package/src/shadcn/chart/chart-style.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+    import { THEMES, type ChartConfig } from './chart-utils.js';
+    let { id, config }: { id: string; config: ChartConfig } = $props();
+    const colorConfig = $derived(config ? Object.entries(config).filter(([, config]) => config.theme || config.color) : null);
+    const themeContents = $derived.by(() => {
+        if (!colorConfig || !colorConfig.length) return;
+        const themeContents = [];
+        for (let [_theme, prefix] of Object.entries(THEMES)) {
+            let content = `${prefix} [data-chart=${id}] {\n`;
+            const color = colorConfig.map(([key, itemConfig]) => {
+                const theme = _theme as keyof typeof itemConfig.theme;
+                const color = itemConfig.theme?.[theme] || itemConfig.color;
+                return color ? `\t--color-${key}: ${color};` : null;
+            });
+            content += color.join('\n') + '\n}';
+            themeContents.push(content);
+        }
+        return themeContents.join('\n');
+    });
+</script>
+
+{#if themeContents}
+    {#key id}
+        <svelte:element this={'style'}>
+            {themeContents}
+        </svelte:element>
+    {/key}
+{/if}

package/src/shadcn/chart/chart-tooltip.svelte

@@ -0,0 +1,126 @@
+<script lang="ts">
+    import { cn, type WithElementRef, type WithoutChildren } from '../utils.js';
+    import type { HTMLAttributes } from 'svelte/elements';
+    import { getPayloadConfigFromPayload, useChart, type TooltipPayload } from './chart-utils.js';
+    import { getTooltipContext, Tooltip as TooltipPrimitive } from 'layerchart';
+    import type { Snippet } from 'svelte';
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    function defaultFormatter(value: any, _payload: TooltipPayload[]) {
+        return `${value}`;
+    }
+    let {
+        ref = $bindable(null),
+        class: className,
+        hideLabel = false,
+        indicator = 'dot',
+        hideIndicator = false,
+        labelKey,
+        label,
+        labelFormatter = defaultFormatter,
+        labelClassName,
+        formatter,
+        nameKey,
+        color,
+        ...restProps
+    }: WithoutChildren<WithElementRef<HTMLAttributes<HTMLDivElement>>> & {
+        hideLabel?: boolean;
+        label?: string;
+        indicator?: 'line' | 'dot' | 'dashed';
+        nameKey?: string;
+        labelKey?: string;
+        hideIndicator?: boolean;
+        labelClassName?: string;
+        labelFormatter?: // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        ((value: any, payload: TooltipPayload[]) => string | number | Snippet) | null;
+        formatter?: Snippet<
+            [
+                {
+                    value: unknown;
+                    name: string;
+                    item: TooltipPayload;
+                    index: number;
+                    payload: TooltipPayload[];
+                }
+            ]
+        >;
+    } = $props();
+    const chart = useChart();
+    const tooltipCtx = getTooltipContext();
+    const formattedLabel = $derived.by(() => {
+        if (hideLabel || !tooltipCtx.payload?.length) return null;
+        const [item] = tooltipCtx.payload;
+        const key = labelKey ?? item?.label ?? item?.name ?? 'value';
+        const itemConfig = getPayloadConfigFromPayload(chart.config, item, key);
+        const value = !labelKey && typeof label === 'string' ? (chart.config[label as keyof typeof chart.config]?.label ?? label) : (itemConfig?.label ?? item.label);
+        if (value === undefined) return null;
+        if (!labelFormatter) return value;
+        return labelFormatter(value, tooltipCtx.payload);
+    });
+    const nestLabel = $derived(tooltipCtx.payload.length === 1 && indicator !== 'dot');
+</script>
+
+{#snippet TooltipLabel()}
+    {#if formattedLabel}
+        <div class={cn('font-medium', labelClassName)}>
+            {#if typeof formattedLabel === 'function'}
+                {@render formattedLabel()}
+            {:else}
+                {formattedLabel}
+            {/if}
+        </div>
+    {/if}
+{/snippet}
+<TooltipPrimitive.Root variant="none">
+    <div class={cn('border-border/50 bg-background grid min-w-[9rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl', className)} {...restProps}>
+        {#if !nestLabel}
+            {@render TooltipLabel()}
+        {/if}
+        <div class="grid gap-1.5">
+            {#each tooltipCtx.payload as item, i (item.key + i)}
+                {@const key = `${nameKey || item.key || item.name || 'value'}`}
+                {@const itemConfig = getPayloadConfigFromPayload(chart.config, item, key)}
+                {@const indicatorColor = color || item.payload?.color || item.color}
+                <div class={cn('[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:size-2.5', indicator === 'dot' && 'items-center')}>
+                    {#if formatter && item.value !== undefined && item.name}
+                        {@render formatter({
+                            value: item.value,
+                            name: item.name,
+                            item,
+                            index: i,
+                            payload: tooltipCtx.payload
+                        })}
+                    {:else}
+                        {#if itemConfig?.icon}
+                            <itemConfig.icon />
+                        {:else if !hideIndicator}
+                            <div
+                                style="--color-bg: {indicatorColor}; --color-border: {indicatorColor};"
+                                class={cn('border-(--color-border) bg-(--color-bg) shrink-0 rounded-[2px]', {
+                                    'size-2.5': indicator === 'dot',
+                                    'h-full w-1': indicator === 'line',
+                                    'w-0 border-[1.5px] border-dashed bg-transparent': indicator === 'dashed',
+                                    'my-0.5': nestLabel && indicator === 'dashed'
+                                })}
+                            ></div>
+                        {/if}
+                        <div class={cn('flex flex-1 shrink-0 justify-between leading-none', nestLabel ? 'items-end' : 'items-center')}>
+                            <div class="grid gap-1.5">
+                                {#if nestLabel}
+                                    {@render TooltipLabel()}
+                                {/if}
+                                <span class="text-muted-foreground">
+                                    {itemConfig?.label || item.name}
+                                </span>
+                            </div>
+                            {#if item.value !== undefined}
+                                <span class="text-foreground font-mono font-medium tabular-nums">
+                                    {item.value.toLocaleString()}
+                                </span>
+                            {/if}
+                        </div>
+                    {/if}
+                </div>
+            {/each}
+        </div>
+    </div>
+</TooltipPrimitive.Root>

package/src/shadcn/chart/chart-utils.ts

@@ -0,0 +1,37 @@
+import type { Tooltip } from 'layerchart';
+import { getContext, setContext, type Component, type ComponentProps, type Snippet } from 'svelte';
+export const THEMES = { light: '', dark: '.dark' } as const;
+export type ChartConfig = {
+    [k in string]: {
+        label?: string;
+        icon?: Component;
+    } & ({ color?: string; theme?: never } | { color?: never; theme: Record<keyof typeof THEMES, string> });
+};
+export type ExtractSnippetParams<T> = T extends Snippet<[infer P]> ? P : never;
+export type TooltipPayload = ExtractSnippetParams<ComponentProps<typeof Tooltip.Root>['children']>['payload'][number];
+// Helper to extract item config from a payload.
+export function getPayloadConfigFromPayload(config: ChartConfig, payload: TooltipPayload, key: string) {
+    if (typeof payload !== 'object' || payload === null) return undefined;
+    const payloadPayload = 'payload' in payload && typeof payload.payload === 'object' && payload.payload !== null ? payload.payload : undefined;
+    let configLabelKey: string = key;
+    if (payload.key === key) {
+        configLabelKey = payload.key;
+    } else if (payload.name === key) {
+        configLabelKey = payload.name;
+    } else if (key in payload && typeof payload[key as keyof typeof payload] === 'string') {
+        configLabelKey = payload[key as keyof typeof payload] as string;
+    } else if (payloadPayload !== undefined && key in payloadPayload && typeof payloadPayload[key as keyof typeof payloadPayload] === 'string') {
+        configLabelKey = payloadPayload[key as keyof typeof payloadPayload] as string;
+    }
+    return configLabelKey in config ? config[configLabelKey] : config[key as keyof typeof config];
+}
+type ChartContextValue = {
+    config: ChartConfig;
+};
+const chartContextKey = Symbol('chart-context');
+export function setChartContext(value: ChartContextValue) {
+    return setContext(chartContextKey, value);
+}
+export function useChart() {
+    return getContext<ChartContextValue>(chartContextKey);
+}

package/src/shadcn/chart/index.ts

@@ -0,0 +1,4 @@
+import ChartContainer from './chart-container.svelte';
+import ChartTooltip from './chart-tooltip.svelte';
+export { getPayloadConfigFromPayload, type ChartConfig } from './chart-utils.js';
+export { ChartContainer, ChartTooltip, ChartContainer as Container, ChartTooltip as Tooltip };

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>