ui changes and cs prices

src/lib/components/ui/command/command-dialog.svelte

@@ -1,23 +1,42 @@
 <script lang="ts">
-	import type { Dialog as DialogPrimitive } from 'bits-ui';
-	import type { Command as CommandPrimitive } from 'cmdk-sv';
-	import Command from './command.svelte';
 	import * as Dialog from '$lib/components/ui/dialog/index.js';
+	import { cn, type WithoutChildrenOrChild } from '$lib/utils.js';
+	import Command from './command.svelte';
+	import type { Command as CommandPrimitive, Dialog as DialogPrimitive } from 'bits-ui';
+	import type { Snippet } from 'svelte';
 
-	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(''),
+		title = 'Command Palette',
+		description = 'Search for a command to run...',
+		showCloseButton = false,
+		portalProps,
+		children,
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<DialogPrimitive.RootProps> &
+		WithoutChildrenOrChild<CommandPrimitive.RootProps> & {
+			portalProps?: DialogPrimitive.PortalProps;
+			children: Snippet;
+			title?: string;
+			description?: string;
+			showCloseButton?: boolean;
+			class?: string;
+		} = $props();
 </script>
 
-<Dialog.Root bind:open {...$$restProps}>
-	<Dialog.Content class="overflow-hidden p-0 shadow-lg">
-		<Command
-			class="[&_[data-cmdk-group-heading]]:text-muted-foreground [&_[data-cmdk-group-heading]]:px-2 [&_[data-cmdk-group-heading]]:font-medium [&_[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}
-			bind:value
-		>
-			<slot />
-		</Command>
+<Dialog.Root bind:open {...restProps}>
+	<Dialog.Header class="sr-only">
+		<Dialog.Title>{title}</Dialog.Title>
+		<Dialog.Description>{description}</Dialog.Description>
+	</Dialog.Header>
+	<Dialog.Content
+		class={cn('rounded-xl! top-1/3 translate-y-0 overflow-hidden p-0', className)}
+		{showCloseButton}
+		{portalProps}
+	>
+		<Command {...restProps} bind:value bind:ref {children} />
 	</Dialog.Content>
 </Dialog.Root>

src/lib/components/ui/command/command-empty.svelte

@@ -1,12 +1,17 @@
 <script lang="ts">
-	import { Command as CommandPrimitive } from 'cmdk-sv';
+	import { Command as CommandPrimitive } from 'bits-ui';
 	import { cn } from '$lib/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
+	bind:ref
+	data-slot="command-empty"
+	class={cn('py-6 text-center text-sm', className)}
+	{...restProps}
+/>

src/lib/components/ui/command/command-group.svelte

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

src/lib/components/ui/command/command-input.svelte

@@ -1,23 +1,36 @@
 <script lang="ts">
-	import { Command as CommandPrimitive } from 'cmdk-sv';
-	import Search from 'lucide-svelte/icons/search';
+	import { Command as CommandPrimitive } from 'bits-ui';
+	import * as InputGroup from '$lib/components/ui/input-group/index.js';
+	import SearchIcon from '@lucide/svelte/icons/search';
 	import { cn } from '$lib/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" />
-	<CommandPrimitive.Input
-		class={cn(
-			'placeholder:text-muted-foreground flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50',
-			className
-		)}
-		{...$$restProps}
-		bind:value
-	/>
+<div data-slot="command-input-wrapper" class="p-1 pb-0">
+	<InputGroup.Root
+		class="bg-input/30 border-input/30 h-8! rounded-lg! shadow-none! *:data-[slot=input-group-addon]:pl-2!"
+	>
+		<CommandPrimitive.Input
+			{value}
+			data-slot="command-input"
+			class={cn(
+				'w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
+				className
+			)}
+			{...restProps}
+		>
+			{#snippet child({ props })}
+				<InputGroup.Input {...props} bind:value bind:ref />
+			{/snippet}
+		</CommandPrimitive.Input>
+		<InputGroup.Addon>
+			<SearchIcon class="size-4 shrink-0 opacity-50" />
+		</InputGroup.Addon>
+	</InputGroup.Root>
 </div>

src/lib/components/ui/command/command-item.svelte

@@ -1,24 +1,27 @@
 <script lang="ts">
-	import { Command as CommandPrimitive } from 'cmdk-sv';
+	import { Command as CommandPrimitive } from 'bits-ui';
+	import CheckIcon from '@lucide/svelte/icons/check';
 	import { cn } from '$lib/utils.js';
 
-	type $$Props = CommandPrimitive.ItemProps;
-
-	export let asChild = false;
-
-	let className: string | undefined | null = undefined;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: CommandPrimitive.ItemProps = $props();
 </script>
 
 <CommandPrimitive.Item
-	{asChild}
+	bind:ref
+	data-slot="command-item"
 	class={cn(
-		'aria-selected:bg-accent aria-selected:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+		"data-selected:bg-muted data-selected:text-foreground data-selected:**:[svg]:text-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! [&_svg:not([class*='size-'])]:size-4 group/command-item data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		className
 	)}
-	{...$$restProps}
-	let:action
-	let:attrs
+	{...restProps}
 >
-	<slot {action} {attrs} />
+	{@render children?.()}
+	<CheckIcon
+		class="ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100"
+	/>
 </CommandPrimitive.Item>

src/lib/components/ui/command/command-link-item.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CommandPrimitive.LinkItemProps = $props();
+</script>
+
+<CommandPrimitive.LinkItem
+	bind:ref
+	data-slot="command-item"
+	class={cn(
+		"data-selected:bg-muted data-selected:text-foreground data-selected:**:[svg]:text-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! [&_svg:not([class*='size-'])]:size-4 group/command-item data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		className
+	)}
+	{...restProps}
+/>

src/lib/components/ui/command/command-list.svelte

@@ -1,15 +1,20 @@
 <script lang="ts">
-	import { Command as CommandPrimitive } from 'cmdk-sv';
+	import { Command as CommandPrimitive } from 'bits-ui';
 	import { cn } from '$lib/utils.js';
 
-	type $$Props = CommandPrimitive.ListProps;
-	let className: string | undefined | null = undefined;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CommandPrimitive.ListProps = $props();
 </script>
 
 <CommandPrimitive.List
-	class={cn('max-h-[300px] overflow-y-auto overflow-x-hidden', className)}
-	{...$$restProps}
->
-	<slot />
-</CommandPrimitive.List>
+	bind:ref
+	data-slot="command-list"
+	class={cn(
+		'no-scrollbar max-h-72 scroll-py-1 outline-none overflow-x-hidden overflow-y-auto',
+		className
+	)}
+	{...restProps}
+/>

src/lib/components/ui/command/command-loading.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from 'bits-ui';
+
+	let { ref = $bindable(null), ...restProps }: CommandPrimitive.LoadingProps = $props();
+</script>
+
+<CommandPrimitive.Loading bind:ref {...restProps} />

src/lib/components/ui/command/command-separator.svelte

@@ -1,10 +1,17 @@
 <script lang="ts">
-	import { Command as CommandPrimitive } from 'cmdk-sv';
+	import { Command as CommandPrimitive } from 'bits-ui';
 	import { cn } from '$lib/utils.js';
 
-	type $$Props = CommandPrimitive.SeparatorProps;
-	let className: string | undefined | null = undefined;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CommandPrimitive.SeparatorProps = $props();
 </script>
 
-<CommandPrimitive.Separator class={cn('bg-border -mx-1 h-px', className)} {...$$restProps} />
+<CommandPrimitive.Separator
+	bind:ref
+	data-slot="command-separator"
+	class={cn('bg-border -mx-1 h-px w-auto', className)}
+	{...restProps}
+/>

src/lib/components/ui/command/command-shortcut.svelte

@@ -1,16 +1,23 @@
 <script lang="ts">
+	import { cn, type WithElementRef } from '$lib/utils.js';
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn } from '$lib/utils.js';
 
-	type $$Props = HTMLAttributes<HTMLSpanElement>;
-
-	let className: string | undefined | null = undefined;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
 </script>
 
 <span
-	class={cn('text-muted-foreground ml-auto text-xs tracking-widest', className)}
-	{...$$restProps}
+	bind:this={ref}
+	data-slot="command-shortcut"
+	class={cn(
+		'text-muted-foreground group-data-selected/command-item:text-foreground ml-auto text-xs tracking-widest',
+		className
+	)}
+	{...restProps}
 >
-	<slot />
+	{@render children?.()}
 </span>

src/lib/components/ui/command/command.svelte

@@ -1,22 +1,28 @@
 <script lang="ts">
-	import { Command as CommandPrimitive } from 'cmdk-sv';
+	import { Command as CommandPrimitive } from 'bits-ui';
 	import { cn } from '$lib/utils.js';
 
-	type $$Props = CommandPrimitive.CommandProps;
+	export type CommandRootApi = CommandPrimitive.Root;
 
-	export let value: $$Props['value'] = undefined;
-
-	let className: string | undefined | null = undefined;
-	export { className as class };
+	let {
+		api = $bindable(null),
+		ref = $bindable(null),
+		value = $bindable(''),
+		class: className,
+		...restProps
+	}: CommandPrimitive.RootProps & {
+		api?: CommandRootApi | null;
+	} = $props();
 </script>
 
 <CommandPrimitive.Root
+	bind:this={api}
+	bind:value
+	bind:ref
+	data-slot="command"
 	class={cn(
-		'bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md',
+		'bg-popover text-popover-foreground rounded-xl! p-1 flex size-full flex-col overflow-hidden',
 		className
 	)}
-	bind:value
-	{...$$restProps}
->
-	<slot />
-</CommandPrimitive.Root>
+	{...restProps}
+/>

src/lib/components/ui/command/index.ts

@@ -1,16 +1,14 @@
-import { Command as CommandPrimitive } from 'cmdk-sv';
-
-import Root from './command.svelte';
 import Dialog from './command-dialog.svelte';
 import Empty from './command-empty.svelte';
 import Group from './command-group.svelte';
-import Item from './command-item.svelte';
 import Input from './command-input.svelte';
+import Item from './command-item.svelte';
+import LinkItem from './command-link-item.svelte';
 import List from './command-list.svelte';
+import Loading from './command-loading.svelte';
 import Separator from './command-separator.svelte';
 import Shortcut from './command-shortcut.svelte';
-
-const Loading = CommandPrimitive.Loading;
+import Root from './command.svelte';
 
 export {
 	Root,
@@ -18,6 +16,7 @@ export {
 	Empty,
 	Group,
 	Item,
+	LinkItem,
 	Input,
 	List,
 	Separator,
@@ -29,6 +28,7 @@ export {
 	Empty as CommandEmpty,
 	Group as CommandGroup,
 	Item as CommandItem,
+	LinkItem as CommandLinkItem,
 	Input as CommandInput,
 	List as CommandList,
 	Separator as CommandSeparator,