@kayord/ui 0.11.1 → 0.12.0

package/dist/components/ui/carousel/carousel.svelte

@@ -1,54 +1,59 @@
 <script lang="ts">
-	import { writable } from "svelte/store";
-	import { onDestroy } from "svelte";
-	import { type CarouselAPI, type CarouselProps, setEmblaContext } from "./context.js";
+	import { type CarouselAPI, type CarouselProps, type EmblaContext, setEmblaContext } from "./context.js";
 	import { cn } from "../../../utils.js";
 
-	type $$Props = CarouselProps;
+	let {
+		opts = {},
+		plugins = [],
+		setApi = () => {},
+		orientation = "horizontal",
+		class: className,
+		children,
+		...restProps
+	}: CarouselProps = $props();
 
-	export let opts = {};
-	export let plugins: NonNullable<$$Props["plugins"]> = [];
-	export let api: $$Props["api"] = undefined;
-	export let orientation: NonNullable<$$Props["orientation"]> = "horizontal";
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
-
-	const apiStore = writable<CarouselAPI | undefined>(undefined);
-	const orientationStore = writable(orientation);
-	const canScrollPrev = writable(false);
-	const canScrollNext = writable(false);
-	const optionsStore = writable(opts);
-	const pluginStore = writable(plugins);
-	const scrollSnapsStore = writable<number[]>([]);
-	const selectedIndexStore = writable(0);
+	let carouselState = $state<EmblaContext>({
+		api: undefined,
+		scrollPrev,
+		scrollNext,
+		orientation,
+		canScrollNext: false,
+		canScrollPrev: false,
+		handleKeyDown,
+		options: opts,
+		plugins,
+		onInit,
+		scrollSnaps: [],
+		selectedIndex: 0,
+		scrollTo,
+	});
 
-	$: orientationStore.set(orientation);
-	$: pluginStore.set(plugins);
-	$: optionsStore.set(opts);
+	setEmblaContext(carouselState);
 
 	function scrollPrev() {
-		api?.scrollPrev();
+		carouselState.api?.scrollPrev();
 	}
 	function scrollNext() {
-		api?.scrollNext();
+		carouselState.api?.scrollNext();
 	}
 	function scrollTo(index: number, jump?: boolean) {
-		api?.scrollTo(index, jump);
+		carouselState.api?.scrollTo(index, jump);
 	}
 
 	function onSelect(api: CarouselAPI) {
 		if (!api) return;
-		canScrollPrev.set(api.canScrollPrev());
-		canScrollNext.set(api.canScrollNext());
-		selectedIndexStore.set(api.selectedScrollSnap());
+		carouselState.canScrollPrev = api.canScrollPrev();
+		carouselState.canScrollNext = api.canScrollNext();
+		carouselState.selectedIndex = api.selectedScrollSnap();
 	}
 
-	$: if (api) {
-		onSelect(api);
-		api.on("select", onSelect);
-		api.on("reInit", onSelect);
-	}
+	$effect(() => {
+		if (carouselState.api) {
+			onSelect(carouselState.api);
+			carouselState.api.on("select", onSelect);
+			carouselState.api.on("reInit", onSelect);
+		}
+	});
 
 	function handleKeyDown(e: KeyboardEvent) {
 		if (e.key === "ArrowLeft") {
@@ -60,40 +65,23 @@
 		}
 	}
 
-	setEmblaContext({
-		api: apiStore,
-		scrollPrev,
-		scrollNext,
-		orientation: orientationStore,
-		canScrollNext,
-		canScrollPrev,
-		handleKeyDown,
-		options: optionsStore,
-		plugins: pluginStore,
-		onInit,
-		scrollSnaps: scrollSnapsStore,
-		selectedIndex: selectedIndexStore,
-		scrollTo,
+	$effect(() => {
+		setApi(carouselState.api);
 	});
 
 	function onInit(event: CustomEvent<CarouselAPI>) {
-		api = event.detail;
-		apiStore.set(api);
-		scrollSnapsStore.set(api.scrollSnapList());
+		carouselState.api = event.detail;
+
+		carouselState.scrollSnaps = carouselState.api.scrollSnapList();
 	}
 
-	onDestroy(() => {
-		api?.off("select", onSelect);
+	$effect(() => {
+		return () => {
+			carouselState.api?.off("select", onSelect);
+		};
 	});
 </script>
 
-<div
-	class={cn("relative", className)}
-	on:mouseenter
-	on:mouseleave
-	role="region"
-	aria-roledescription="carousel"
-	{...$$restProps}
->
-	<slot />
+<div class={cn("relative", className)} role="region" aria-roledescription="carousel" {...restProps}>
+	{@render children?.()}
 </div>

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

@@ -1,31 +1,3 @@
 import { type CarouselProps } from "./context.js";
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const Carousel: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<CarouselProps, {
-    default: {};
-}>, {
-    mouseenter: MouseEvent;
-    mouseleave: MouseEvent;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type Carousel = InstanceType<typeof Carousel>;
+declare const Carousel: import("svelte").Component<CarouselProps, {}, "">;
 export default Carousel;

package/dist/components/ui/carousel/context.d.ts

@@ -1,7 +1,7 @@
+import type { WithElementRef } from "bits-ui";
 import type { EmblaCarouselSvelteType } from "embla-carousel-svelte";
 import type emblaCarouselSvelte from "embla-carousel-svelte";
 import type { HTMLAttributes } from "svelte/elements";
-import type { Readable, Writable } from "svelte/store";
 export type CarouselAPI = 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"];
@@ -9,23 +9,23 @@ export type CarouselPlugins = EmblaCarouselConfig["plugins"];
 export type CarouselProps = {
     opts?: CarouselOptions;
     plugins?: CarouselPlugins;
-    api?: CarouselAPI;
+    setApi?: (api: CarouselAPI | undefined) => void;
     orientation?: "horizontal" | "vertical";
-} & HTMLAttributes<HTMLDivElement>;
-type EmblaContext = {
-    api: Writable<CarouselAPI | undefined>;
-    orientation: Writable<"horizontal" | "vertical">;
+} & WithElementRef<HTMLAttributes<HTMLDivElement>>;
+export type EmblaContext = {
+    api: CarouselAPI | undefined;
+    orientation: "horizontal" | "vertical";
     scrollNext: () => void;
     scrollPrev: () => void;
-    canScrollNext: Readable<boolean>;
-    canScrollPrev: Readable<boolean>;
+    canScrollNext: boolean;
+    canScrollPrev: boolean;
     handleKeyDown: (e: KeyboardEvent) => void;
-    options: Writable<CarouselOptions>;
-    plugins: Writable<CarouselPlugins>;
+    options: CarouselOptions;
+    plugins: CarouselPlugins;
     onInit: (e: CustomEvent<CarouselAPI>) => void;
     scrollTo: (index: number, jump?: boolean) => void;
-    scrollSnaps: Readable<number[]>;
-    selectedIndex: Readable<number>;
+    scrollSnaps: number[];
+    selectedIndex: number;
 };
 export declare function setEmblaContext(config: EmblaContext): EmblaContext;
 export declare function getEmblaContext(name?: string): EmblaContext;

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

@@ -1,5 +1,6 @@
-export { default as Root } from "./carousel.svelte";
-export { default as Content } from "./carousel-content.svelte";
-export { default as Item } from "./carousel-item.svelte";
-export { default as Previous } from "./carousel-previous.svelte";
-export { default as Next } from "./carousel-next.svelte";
+import Root from "./carousel.svelte";
+import Content from "./carousel-content.svelte";
+import Item from "./carousel-item.svelte";
+import Previous from "./carousel-previous.svelte";
+import Next from "./carousel-next.svelte";
+export { Root, Content, Item, Previous, Next, Root as Carousel, Content as CarouselContent, Item as CarouselItem, Previous as CarouselPrevious, Next as CarouselNext, };

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

@@ -1,5 +1,8 @@
-export { default as Root } from "./carousel.svelte";
-export { default as Content } from "./carousel-content.svelte";
-export { default as Item } from "./carousel-item.svelte";
-export { default as Previous } from "./carousel-previous.svelte";
-export { default as Next } from "./carousel-next.svelte";
+import Root from "./carousel.svelte";
+import Content from "./carousel-content.svelte";
+import Item from "./carousel-item.svelte";
+import Previous from "./carousel-previous.svelte";
+import Next from "./carousel-next.svelte";
+export { Root, Content, Item, Previous, Next, 
+//
+Root as Carousel, Content as CarouselContent, Item as CarouselItem, Previous as CarouselPrevious, Next as CarouselNext, };

package/dist/components/ui/checkbox/checkbox.svelte

@@ -1,35 +1,33 @@
 <script lang="ts">
-	import { Checkbox as CheckboxPrimitive } from "bits-ui";
+	import { Checkbox as CheckboxPrimitive, type WithoutChildrenOrChild } from "bits-ui";
 	import Check from "lucide-svelte/icons/check";
 	import Minus from "lucide-svelte/icons/minus";
 	import { cn } from "../../../utils.js";
 
-	type $$Props = CheckboxPrimitive.Props;
-	type $$Events = CheckboxPrimitive.Events;
-
-	let className: $$Props["class"] = undefined;
-	export let checked: $$Props["checked"] = false;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		checked = $bindable(false),
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<CheckboxPrimitive.RootProps> = $props();
 </script>
 
 <CheckboxPrimitive.Root
+	bind:ref
 	class={cn(
-		"peer box-content h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[disabled=true]:cursor-not-allowed data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[disabled=true]:opacity-50",
+		"peer box-content size-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[disabled=true]:cursor-not-allowed data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[disabled=true]:opacity-50",
 		className
 	)}
 	bind:checked
-	{...$$restProps}
-	on:click
+	{...restProps}
 >
-	<CheckboxPrimitive.Indicator
-		class={cn("flex h-4 w-4 items-center justify-center text-current")}
-		let:isChecked
-		let:isIndeterminate
-	>
-		{#if isChecked}
-			<Check class="h-3.5 w-3.5" />
-		{:else if isIndeterminate}
-			<Minus class="h-3.5 w-3.5" />
-		{/if}
-	</CheckboxPrimitive.Indicator>
+	{#snippet children({ checked })}
+		<div class="flex size-4 items-center justify-center text-current">
+			{#if checked === "indeterminate"}
+				<Minus class="size-3.5" />
+			{:else}
+				<Check class={cn("size-3.5", !checked && "text-transparent")} />
+			{/if}
+		</div>
+	{/snippet}
 </CheckboxPrimitive.Root>

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

@@ -1,17 +1,3 @@
 import { Checkbox as CheckboxPrimitive } from "bits-ui";
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Checkbox: $$__sveltets_2_IsomorphicComponent<CheckboxPrimitive.Props, CheckboxPrimitive.Events, {}, {}, string>;
-type Checkbox = InstanceType<typeof Checkbox>;
+declare const Checkbox: import("svelte").Component<Omit<Omit<CheckboxPrimitive.RootProps, "child">, "children">, {}, "ref" | "checked">;
 export default Checkbox;

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

@@ -1,7 +1,7 @@
 import { Collapsible as CollapsiblePrimitive } from "bits-ui";
-import Content from "./collapsible-content.svelte";
 const Root = CollapsiblePrimitive.Root;
 const Trigger = CollapsiblePrimitive.Trigger;
+const Content = CollapsiblePrimitive.Content;
 export { Root, Content, Trigger, 
 //
 Root as Collapsible, Content as CollapsibleContent, Trigger as CollapsibleTrigger, };

package/dist/components/ui/command/command-dialog.svelte

@@ -1,23 +1,29 @@
 <script lang="ts">
-	import type { Dialog as DialogPrimitive } from "bits-ui";
-	import type { Command as CommandPrimitive } from "cmdk-sv";
+	import type { Command as CommandPrimitive, Dialog as DialogPrimitive, WithoutChildrenOrChild } from "bits-ui";
+	import type { Snippet } from "svelte";
 	import Command from "./command.svelte";
 	import * as Dialog from "../dialog/index.js";
 
-	type $$Props = DialogPrimitive.Props & CommandPrimitive.CommandProps;
-
-	export let open: $$Props["open"] = false;
-	export let value: $$Props["value"] = undefined;
+	let {
+		open = $bindable(false),
+		ref = $bindable(null),
+		value = $bindable(""),
+		children,
+		...restProps
+	}: WithoutChildrenOrChild<DialogPrimitive.RootProps> &
+		WithoutChildrenOrChild<CommandPrimitive.RootProps> & {
+			children: Snippet;
+		} = $props();
 </script>
 
-<Dialog.Root bind:open {...$$restProps}>
+<Dialog.Root bind:open {...restProps}>
 	<Dialog.Content class="overflow-hidden p-0 shadow-lg">
 		<Command
-			class="[&_[data-cmdk-group-heading]]:px-2 [&_[data-cmdk-group-heading]]:font-medium [&_[data-cmdk-group-heading]]:text-muted-foreground [&_[data-cmdk-group]:not([hidden])_~[data-cmdk-group]]:pt-0 [&_[data-cmdk-group]]:px-2 [&_[data-cmdk-input-wrapper]_svg]:h-5 [&_[data-cmdk-input-wrapper]_svg]:w-5 [&_[data-cmdk-input]]:h-12 [&_[data-cmdk-item]]:px-2 [&_[data-cmdk-item]]:py-3 [&_[data-cmdk-item]_svg]:h-5 [&_[data-cmdk-item]_svg]:w-5"
-			{...$$restProps}
+			class="[&_[data-command-group]:not([hidden])_~[data-command-group]]:pt-0 [&_[data-command-group]]:px-2 [&_[data-command-input-wrapper]_svg]:h-5 [&_[data-command-input-wrapper]_svg]:w-5 [&_[data-command-input]]:h-12 [&_[data-command-item]]:px-2 [&_[data-command-item]]:py-3 [&_[data-command-item]_svg]:h-5 [&_[data-command-item]_svg]:w-5"
+			{...restProps}
 			bind:value
-		>
-			<slot />
-		</Command>
+			bind:ref
+			{children}
+		/>
 	</Dialog.Content>
 </Dialog.Root>

package/dist/components/ui/command/command-dialog.svelte.d.ts

@@ -1,49 +1,6 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const CommandDialog: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    preventScroll?: boolean | undefined;
-    closeOnEscape?: boolean | undefined;
-    closeOnOutsideClick?: boolean | undefined;
-    onOutsideClick?: ((event: PointerEvent | MouseEvent | TouchEvent) => void) | undefined;
-    portal?: (HTMLElement | string | null) | undefined;
-    open?: ((boolean | undefined) & {}) | undefined;
-    onOpenChange?: import("bits-ui/dist/internal").OnChangeFn<boolean> | undefined;
-    openFocus?: import("bits-ui").FocusProp | undefined;
-    closeFocus?: import("bits-ui").FocusProp | undefined;
-} & {
-    state?: import("svelte/store").Writable<import("cmdk-sv").State> | undefined;
-    label?: string | undefined;
-    shouldFilter?: boolean | undefined;
-    filter?: ((value: string, search: string) => number) | undefined;
-    value?: string | undefined;
-    onValueChange?: ((value: string) => void) | undefined;
-    loop?: boolean | undefined;
-    ids?: Partial<import("cmdk-sv").CommandIds> | undefined;
-} & import("cmdk-sv/dist/internal").HTMLDivAttributes & {
-    onKeydown?: (e: KeyboardEvent) => void;
-    asChild?: boolean;
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type CommandDialog = InstanceType<typeof CommandDialog>;
+import type { Command as CommandPrimitive } from "bits-ui";
+import type { Snippet } from "svelte";
+declare const CommandDialog: import("svelte").Component<Omit<import("bits-ui").AlertDialogRootPropsWithoutHTML, "children"> & Omit<Omit<CommandPrimitive.RootProps, "child">, "children"> & {
+    children: Snippet;
+}, {}, "ref" | "value" | "open">;
 export default CommandDialog;

package/dist/components/ui/command/command-empty.svelte

@@ -1,12 +1,8 @@
 <script lang="ts">
-	import { Command as CommandPrimitive } from "cmdk-sv";
+	import { Command as CommandPrimitive } from "bits-ui";
 	import { cn } from "../../../utils.js";
 
-	type $$Props = CommandPrimitive.EmptyProps;
-	let className: string | undefined | null = undefined;
-	export { className as class };
+	let { ref = $bindable(null), class: className, ...restProps }: CommandPrimitive.EmptyProps = $props();
 </script>
 
-<CommandPrimitive.Empty class={cn("py-6 text-center text-sm", className)} {...$$restProps}>
-	<slot />
-</CommandPrimitive.Empty>
+<CommandPrimitive.Empty class={cn("py-6 text-center text-sm", className)} {...restProps} />

package/dist/components/ui/command/command-empty.svelte.d.ts

@@ -1,28 +1,3 @@
-import { Command as CommandPrimitive } from "cmdk-sv";
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const CommandEmpty: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<CommandPrimitive.EmptyProps, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type CommandEmpty = InstanceType<typeof CommandEmpty>;
+import { Command as CommandPrimitive } from "bits-ui";
+declare const CommandEmpty: import("svelte").Component<CommandPrimitive.EmptyProps, {}, "ref">;
 export default CommandEmpty;

package/dist/components/ui/command/command-group.svelte

@@ -1,18 +1,23 @@
 <script lang="ts">
-	import { Command as CommandPrimitive } from "cmdk-sv";
+	import { Command as CommandPrimitive } from "bits-ui";
 	import { cn } from "../../../utils.js";
-	type $$Props = CommandPrimitive.GroupProps;
 
-	let className: string | undefined | null = undefined;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		heading,
+		...restProps
+	}: CommandPrimitive.GroupProps & {
+		heading?: string;
+	} = $props();
 </script>
 
-<CommandPrimitive.Group
-	class={cn(
-		"overflow-hidden p-1 text-foreground [&_[data-cmdk-group-heading]]:px-2 [&_[data-cmdk-group-heading]]:py-1.5 [&_[data-cmdk-group-heading]]:text-xs [&_[data-cmdk-group-heading]]:font-medium [&_[data-cmdk-group-heading]]:text-muted-foreground",
-		className
-	)}
-	{...$$restProps}
->
-	<slot />
+<CommandPrimitive.Group class={cn("overflow-hidden p-1 text-foreground", className)} bind:ref {...restProps}>
+	{#if heading}
+		<CommandPrimitive.GroupHeading class="px-2 py-1.5 text-xs font-medium text-muted-foreground">
+			{heading}
+		</CommandPrimitive.GroupHeading>
+	{/if}
+	<CommandPrimitive.GroupItems {children} />
 </CommandPrimitive.Group>

package/dist/components/ui/command/command-group.svelte.d.ts

@@ -1,28 +1,14 @@
-import { Command as CommandPrimitive } from "cmdk-sv";
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const CommandGroup: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<CommandPrimitive.GroupProps, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type CommandGroup = InstanceType<typeof CommandGroup>;
+declare const CommandGroup: import("svelte").Component<Omit<{
+    value?: string;
+    forceMount?: boolean;
+}, "child" | "children"> & {
+    child?: import("svelte").Snippet<[{
+        props: Record<string, unknown>;
+    }]> | undefined;
+    children?: import("svelte").Snippet<[]> | undefined;
+    style?: import("bits-ui").StyleProperties | string | null | undefined;
+    ref?: HTMLElement | null | undefined;
+} & import("bits-ui").Without<import("bits-ui").BitsPrimitiveDivAttributes, import("bits-ui").CommandGroupPropsWithoutHTML> & {
+    heading?: string;
+}, {}, "ref">;
 export default CommandGroup;

package/dist/components/ui/command/command-input.svelte

@@ -1,23 +1,25 @@
 <script lang="ts">
-	import { Command as CommandPrimitive } from "cmdk-sv";
+	import { Command as CommandPrimitive } from "bits-ui";
 	import Search from "lucide-svelte/icons/search";
 	import { cn } from "../../../utils.js";
 
-	type $$Props = CommandPrimitive.InputProps;
-
-	let className: string | undefined | null = undefined;
-	export { className as class };
-	export let value: string = "";
+	let {
+		ref = $bindable(null),
+		class: className,
+		value = $bindable(""),
+		...restProps
+	}: CommandPrimitive.InputProps = $props();
 </script>
 
-<div class="flex items-center border-b px-2" data-cmdk-input-wrapper="">
-	<Search class="mr-2 h-4 w-4 shrink-0 opacity-50" />
+<div class="flex items-center border-b px-2" data-command-input-wrapper="">
+	<Search class="mr-2 size-4 shrink-0 opacity-50" />
 	<CommandPrimitive.Input
 		class={cn(
 			"flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
 			className
 		)}
-		{...$$restProps}
+		bind:ref
+		{...restProps}
 		bind:value
 	/>
 </div>

package/dist/components/ui/command/command-input.svelte.d.ts

@@ -1,19 +1,3 @@
-import { Command as CommandPrimitive } from "cmdk-sv";
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const CommandInput: $$__sveltets_2_IsomorphicComponent<CommandPrimitive.InputProps, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type CommandInput = InstanceType<typeof CommandInput>;
+import { Command as CommandPrimitive } from "bits-ui";
+declare const CommandInput: import("svelte").Component<CommandPrimitive.InputProps, {}, "ref" | "value">;
 export default CommandInput;