@kayord/ui 3.0.11 → 4.0.0

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

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
-	import { getEmblaContext } from "./context.js";
 	import { cn, type WithElementRef } from "../../../utils.js";
+	import { getEmblaContext } from "./context.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
@@ -18,7 +18,11 @@
 	data-slot="carousel-item"
 	role="group"
 	aria-roledescription="slide"
-	class={cn("min-w-0 shrink-0 grow-0 basis-full", emblaCtx.orientation === "horizontal" ? "ps-4" : "pt-4", className)}
+	class={cn(
+		"min-w-0 shrink-0 grow-0 basis-full",
+		emblaCtx.orientation === "horizontal" ? "ps-4" : "pt-4",
+		className
+	)}
 	data-embla-slide=""
 	{...restProps}
 >

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

@@ -1,5 +1,5 @@
-import type { HTMLAttributes } from "svelte/elements";
 import { type WithElementRef } from "../../../utils.js";
+import type { HTMLAttributes } from "svelte/elements";
 declare const CarouselItem: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
 type CarouselItem = ReturnType<typeof CarouselItem>;
 export default CarouselItem;

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

@@ -1,9 +1,9 @@
 <script lang="ts">
-	import type { WithoutChildren } from "bits-ui";
-	import { getEmblaContext } from "./context.js";
-	import { cn } from "../../../utils.js";
+	import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
 	import { Button, type Props } from "../button/index.js";
-	import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
+	import { cn } from "../../../utils.js";
+	import { getEmblaContext } from "./context.js";
+	import type { WithoutChildren } from "bits-ui";
 
 	let {
 		ref = $bindable(null),
@@ -23,7 +23,7 @@
 	aria-disabled={!emblaCtx.canScrollNext}
 	disabled={!emblaCtx.canScrollNext}
 	class={cn(
-		"absolute touch-manipulation rounded-full",
+		"rounded-full absolute touch-manipulation",
 		emblaCtx.orientation === "horizontal"
 			? "inset-y-0 -end-12 my-auto"
 			: "start-1/2 -bottom-12 -translate-x-1/2 rotate-90",
@@ -34,6 +34,6 @@
 	bind:ref
 	{...restProps}
 >
-	<ChevronRightIcon />
+	<ChevronRightIcon  />
 	<span class="sr-only">Next slide</span>
 </Button>

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

@@ -1,9 +1,9 @@
 <script lang="ts">
-	import type { WithoutChildren } from "bits-ui";
-	import { getEmblaContext } from "./context.js";
-	import { cn } from "../../../utils.js";
+	import ChevronLeftIcon from '@lucide/svelte/icons/chevron-left';
 	import { Button, type Props } from "../button/index.js";
-	import ChevronLeftIcon from "@lucide/svelte/icons/chevron-left";
+	import { cn } from "../../../utils.js";
+	import { getEmblaContext } from "./context.js";
+	import type { WithoutChildren } from "bits-ui";
 
 	let {
 		ref = $bindable(null),
@@ -23,7 +23,7 @@
 	aria-disabled={!emblaCtx.canScrollPrev}
 	disabled={!emblaCtx.canScrollPrev}
 	class={cn(
-		"absolute touch-manipulation rounded-full",
+		"rounded-full absolute touch-manipulation",
 		emblaCtx.orientation === "horizontal"
 			? "inset-y-0 -start-12 my-auto"
 			: "start-1/2 -top-12 -translate-x-1/2 rotate-90",
@@ -34,6 +34,6 @@
 	{...restProps}
 	bind:ref
 >
-	<ChevronLeftIcon />
+	<ChevronLeftIcon  />
 	<span class="sr-only">Previous slide</span>
 </Button>

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

@@ -1,6 +1,11 @@
 <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";
 
 	let {
 		ref = $bindable(null),

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

@@ -1,5 +1,5 @@
-import { type CarouselProps } from "./context.js";
 import { type WithElementRef } from "../../../utils.js";
+import { type CarouselProps } from "./context.js";
 declare const Carousel: import("svelte").Component<WithElementRef<CarouselProps>, {}, "ref">;
 type Carousel = ReturnType<typeof Carousel>;
 export default Carousel;

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

@@ -1,6 +1,6 @@
-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";
+import Previous from "./carousel-previous.svelte";
+import Root from "./carousel.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,8 +1,8 @@
-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";
+import Previous from "./carousel-previous.svelte";
+import Root from "./carousel.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/chart/chart-container.svelte

@@ -1,8 +1,8 @@
 <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";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	const uid = $props.id();
 
@@ -55,8 +55,8 @@
 		// 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",
+		"[&_.lc-grid-x-radial-circle]:stroke-border [&_.lc-grid-x-radial-line]:stroke-border",
+		"[&_.lc-grid-y-radial-circle]:stroke-border [&_.lc-grid-y-radial-line]:stroke-border",
 
 		// Legend adjustments
 		"[&_.lc-legend-swatch-button]:items-center [&_.lc-legend-swatch-button]:gap-1.5",

package/dist/components/ui/chart/chart-container.svelte.d.ts

@@ -1,6 +1,6 @@
 import { type WithElementRef } from "../../../utils.js";
-import type { HTMLAttributes } from "svelte/elements";
 import { type ChartConfig } from "./chart-utils.js";
+import type { HTMLAttributes } from "svelte/elements";
 type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLElement>> & {
     config: ChartConfig;
 };

package/dist/components/ui/chart/chart-tooltip.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
+	import { getChartContext, Tooltip as TooltipPrimitive } from "layerchart";
 	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 { getChartContext, Tooltip as TooltipPrimitive } from "layerchart";
 	import type { Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	function defaultFormatter(value: any, _payload: TooltipPayload[]) {
@@ -32,8 +32,7 @@
 		labelKey?: string;
 		hideIndicator?: boolean;
 		labelClassName?: string;
-		labelFormatter?:
-			// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		labelFormatter?: // eslint-disable-next-line @typescript-eslint/no-explicit-any
 			((value: any, payload: TooltipPayload[]) => string | number | Snippet) | null;
 		formatter?: Snippet<
 			[
@@ -53,7 +52,9 @@
 
 	// Filter to series with defined values (important for item-based charts like Pie/Arc
 	// where only the hovered item has a value)
-	const visibleSeries = $derived(chartCtx.tooltip.series.filter((s: TooltipPayload) => s.value !== undefined));
+	const visibleSeries = $derived(
+		chartCtx.tooltip.series.filter((s: TooltipPayload) => s.value !== undefined)
+	);
 
 	const formattedLabel = $derived.by(() => {
 		if (hideLabel || !visibleSeries?.length) return null;
@@ -105,7 +106,7 @@
 	<div
 		bind:this={ref}
 		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",
+			"grid min-w-[9rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
 			className
 		)}
 		{...restProps}
@@ -116,11 +117,16 @@
 		<div class="grid gap-1.5">
 			{#each visibleSeries as item, i (item.key + i)}
 				{@const key = `${nameKey || item.key || item.label || "value"}`}
-				{@const itemConfig = getPayloadConfigFromPayload(chart.config, item, key, chartCtx.tooltip.data)}
+				{@const itemConfig = getPayloadConfigFromPayload(
+					chart.config,
+					item,
+					key,
+					chartCtx.tooltip.data
+				)}
 				{@const indicatorColor = color || item.config?.color || item.color}
 				<div
 					class={cn(
-						"[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:size-2.5",
+						"flex w-full flex-wrap items-stretch gap-2 [&>svg]:size-2.5 [&>svg]:text-muted-foreground",
 						indicator === "dot" && "items-center"
 					)}
 				>
@@ -147,7 +153,10 @@
 							></div>
 						{/if}
 						<div
-							class={cn("flex flex-1 shrink-0 justify-between leading-none", nestLabel ? "items-end" : "items-center")}
+							class={cn(
+								"flex flex-1 shrink-0 justify-between leading-none",
+								nestLabel ? "items-end" : "items-center"
+							)}
 						>
 							<div class="grid gap-1.5">
 								{#if nestLabel}
@@ -158,7 +167,7 @@
 								</span>
 							</div>
 							{#if item.value !== undefined}
-								<span class="text-foreground font-mono font-medium tabular-nums">
+								<span class="font-mono font-medium text-foreground tabular-nums">
 									{item.value.toLocaleString()}
 								</span>
 							{/if}

package/dist/components/ui/chart/chart-tooltip.svelte.d.ts

@@ -1,7 +1,7 @@
 import { type WithElementRef, type WithoutChildren } from "../../../utils.js";
-import type { HTMLAttributes } from "svelte/elements";
 import { type TooltipPayload } from "./chart-utils.js";
 import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
 type $$ComponentProps = WithoutChildren<WithElementRef<HTMLAttributes<HTMLDivElement>>> & {
     hideLabel?: boolean;
     label?: string;
@@ -10,7 +10,8 @@ type $$ComponentProps = WithoutChildren<WithElementRef<HTMLAttributes<HTMLDivEle
     labelKey?: string;
     hideIndicator?: boolean;
     labelClassName?: string;
-    labelFormatter?: ((value: any, payload: TooltipPayload[]) => string | number | Snippet) | null;
+    labelFormatter?: // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    ((value: any, payload: TooltipPayload[]) => string | number | Snippet) | null;
     formatter?: Snippet<[
         {
             value: unknown;

package/dist/components/ui/chart/chart-utils.d.ts

@@ -1,5 +1,5 @@
-import type { Tooltip } from "layerchart";
 import { type Component, type Snippet } from "svelte";
+import type { Tooltip } from "layerchart";
 export declare const THEMES: {
     readonly light: "";
     readonly dark: ".dark";

package/dist/components/ui/chart/chart-utils.js

@@ -6,7 +6,9 @@ export function getPayloadConfigFromPayload(config, payload, key,
 data) {
     if (typeof payload !== "object" || payload === null)
         return undefined;
-    const payloadConfig = "config" in payload && typeof payload.config === "object" && payload.config !== null ? payload.config : undefined;
+    const payloadConfig = "config" in payload && typeof payload.config === "object" && payload.config !== null
+        ? payload.config
+        : undefined;
     let configLabelKey = key;
     if (payload.key === key) {
         configLabelKey = payload.key;

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

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { Checkbox as CheckboxPrimitive } from "bits-ui";
+	import CheckIcon from '@lucide/svelte/icons/check';
+	import MinusIcon from '@lucide/svelte/icons/minus';
 	import { cn, type WithoutChildrenOrChild } from "../../../utils.js";
-	import CheckIcon from "@lucide/svelte/icons/check";
-	import MinusIcon from "@lucide/svelte/icons/minus";
 
 	let {
 		ref = $bindable(null),
@@ -17,7 +17,7 @@
 	bind:ref
 	data-slot="checkbox"
 	class={cn(
-		"border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3",
+		"flex size-4 items-center justify-center rounded-[4px] border border-input transition-colors group-has-disabled/field:opacity-50 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50",
 		className
 	)}
 	bind:checked
@@ -25,11 +25,14 @@
 	{...restProps}
 >
 	{#snippet children({ checked, indeterminate })}
-		<div data-slot="checkbox-indicator" class="grid place-content-center text-current transition-none [&>svg]:size-3.5">
+		<div
+			data-slot="checkbox-indicator"
+			class="[&>svg]:size-3.5 grid place-content-center text-current transition-none"
+		>
 			{#if checked}
-				<CheckIcon />
+				<CheckIcon  />
 			{:else if indeterminate}
-				<MinusIcon />
+				<MinusIcon  />
 			{/if}
 		</div>
 	{/snippet}

package/dist/components/ui/collapsible/collapsible.svelte

@@ -1,7 +1,11 @@
 <script lang="ts">
 	import { Collapsible as CollapsiblePrimitive } from "bits-ui";
 
-	let { ref = $bindable(null), open = $bindable(false), ...restProps }: CollapsiblePrimitive.RootProps = $props();
+	let {
+		ref = $bindable(null),
+		open = $bindable(false),
+		...restProps
+	}: CollapsiblePrimitive.RootProps = $props();
 </script>
 
 <CollapsiblePrimitive.Root bind:ref bind:open data-slot="collapsible" {...restProps} />

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

@@ -1,4 +1,4 @@
-import Root from "./collapsible.svelte";
-import Trigger from "./collapsible-trigger.svelte";
 import Content from "./collapsible-content.svelte";
+import Trigger from "./collapsible-trigger.svelte";
+import Root from "./collapsible.svelte";
 export { Root, Content, Trigger, Root as Collapsible, Content as CollapsibleContent, Trigger as CollapsibleTrigger, };

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

@@ -1,6 +1,6 @@
-import Root from "./collapsible.svelte";
-import Trigger from "./collapsible-trigger.svelte";
 import Content from "./collapsible-content.svelte";
+import Trigger from "./collapsible-trigger.svelte";
+import Root from "./collapsible.svelte";
 export { Root, Content, Trigger, 
 //
 Root as Collapsible, Content as CollapsibleContent, Trigger as CollapsibleTrigger, };

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

@@ -1,9 +1,9 @@
 <script lang="ts">
-	import type { Command as CommandPrimitive, Dialog as DialogPrimitive } from "bits-ui";
-	import type { Snippet } from "svelte";
-	import Command from "./command.svelte";
 	import * as Dialog from "../dialog/index.js";
 	import { cn, type WithoutChildrenOrChild } from "../../../utils.js";
+	import Command from "./command.svelte";
+	import type { Command as CommandPrimitive, Dialog as DialogPrimitive } from "bits-ui";
+	import type { Snippet } from "svelte";
 
 	let {
 		open = $bindable(false),
@@ -33,7 +33,7 @@
 		<Dialog.Description>{description}</Dialog.Description>
 	</Dialog.Header>
 	<Dialog.Content
-		class={cn("top-1/3 translate-y-0 overflow-hidden rounded-xl! p-0", className)}
+		class={cn("rounded-xl! top-1/3 translate-y-0 overflow-hidden p-0", className)}
 		{showCloseButton}
 		{portalProps}
 	>

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

@@ -1,6 +1,6 @@
+import { type WithoutChildrenOrChild } from "../../../utils.js";
 import type { Command as CommandPrimitive, Dialog as DialogPrimitive } from "bits-ui";
 import type { Snippet } from "svelte";
-import { type WithoutChildrenOrChild } from "../../../utils.js";
 type $$ComponentProps = WithoutChildrenOrChild<DialogPrimitive.RootProps> & WithoutChildrenOrChild<CommandPrimitive.RootProps> & {
     portalProps?: DialogPrimitive.PortalProps;
     children: Snippet;

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

@@ -2,7 +2,11 @@
 	import { Command as CommandPrimitive } from "bits-ui";
 	import { cn } from "../../../utils.js";
 
-	let { ref = $bindable(null), class: className, ...restProps }: CommandPrimitive.EmptyProps = $props();
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CommandPrimitive.EmptyProps = $props();
 </script>
 
 <CommandPrimitive.Empty

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

@@ -17,15 +17,12 @@
 <CommandPrimitive.Group
 	bind:ref
 	data-slot="command-group"
-	class={cn(
-		"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
-	)}
+	class={cn("overflow-hidden p-1 text-foreground **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground", className)}
 	value={value ?? heading ?? `----${useId()}`}
 	{...restProps}
 >
 	{#if heading}
-		<CommandPrimitive.GroupHeading class="text-muted-foreground px-2 py-1.5 text-xs font-medium">
+		<CommandPrimitive.GroupHeading class="px-2 py-1.5 text-xs font-medium text-muted-foreground">
 			{heading}
 		</CommandPrimitive.GroupHeading>
 	{/if}

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

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { Command as CommandPrimitive } from "bits-ui";
-	import { cn } from "../../../utils.js";
 	import * as InputGroup from "../input-group/index.js";
-	import SearchIcon from "@lucide/svelte/icons/search";
+	import SearchIcon from '@lucide/svelte/icons/search';
+	import { cn } from "../../../utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -13,13 +13,14 @@
 </script>
 
 <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!"
-	>
+	<InputGroup.Root class="h-8! rounded-lg! border-input/30 bg-input/30 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)}
+			class={cn(
+				"w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+				className
+			)}
 			{...restProps}
 		>
 			{#snippet child({ props })}

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

@@ -1,22 +1,25 @@
 <script lang="ts">
 	import { Command as CommandPrimitive } from "bits-ui";
+	import CheckIcon from '@lucide/svelte/icons/check';
 	import { cn } from "../../../utils.js";
-	import CheckIcon from "@lucide/svelte/icons/check";
 
-	let { ref = $bindable(null), class: className, children, ...restProps }: CommandPrimitive.ItemProps = $props();
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: CommandPrimitive.ItemProps = $props();
 </script>
 
 <CommandPrimitive.Item
 	bind:ref
 	data-slot="command-item"
 	class={cn(
-		"group/command-item 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! data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		"group/command-item 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! data-selected:bg-muted data-selected:text-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-selected:*:[svg]:text-foreground",
 		className
 	)}
 	{...restProps}
 >
 	{@render children?.()}
-	<CheckIcon
-		class="cn-command-item-indicator ml-auto opacity-0 group-has-[[data-slot=command-shortcut]]/command-item:hidden group-data-[checked=true]/command-item:opacity-100"
-	/>
+	<CheckIcon class="cn-command-item-indicator ml-auto opacity-0 group-has-[[data-slot=command-shortcut]]/command-item:hidden group-data-[checked=true]/command-item:opacity-100" />
 </CommandPrimitive.Item>

package/dist/components/ui/command/command-link-item.svelte

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

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

@@ -2,12 +2,16 @@
 	import { Command as CommandPrimitive } from "bits-ui";
 	import { cn } from "../../../utils.js";
 
-	let { ref = $bindable(null), class: className, ...restProps }: CommandPrimitive.ListProps = $props();
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CommandPrimitive.ListProps = $props();
 </script>
 
 <CommandPrimitive.List
 	bind:ref
 	data-slot="command-list"
-	class={cn("no-scrollbar max-h-72 scroll-py-1 overflow-x-hidden overflow-y-auto outline-none", className)}
+	class={cn("no-scrollbar max-h-72 scroll-py-1 outline-none overflow-x-hidden overflow-y-auto", className)}
 	{...restProps}
 />

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

@@ -2,12 +2,16 @@
 	import { Command as CommandPrimitive } from "bits-ui";
 	import { cn } from "../../../utils.js";
 
-	let { ref = $bindable(null), class: className, ...restProps }: CommandPrimitive.SeparatorProps = $props();
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CommandPrimitive.SeparatorProps = $props();
 </script>
 
 <CommandPrimitive.Separator
 	bind:ref
 	data-slot="command-separator"
-	class={cn("bg-border -mx-1 h-px", className)}
+	class={cn("-mx-1 h-px bg-border", className)}
 	{...restProps}
 />

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

@@ -13,10 +13,7 @@
 <span
 	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
-	)}
+	class={cn("ml-auto text-xs tracking-widest text-muted-foreground group-data-selected/command-item:text-foreground", className)}
 	{...restProps}
 >
 	{@render children?.()}

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

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn } from "../../../utils.js";
 	import { Command as CommandPrimitive } from "bits-ui";
+	import { cn } from "../../../utils.js";
 
 	export type CommandRootApi = CommandPrimitive.Root;
 
@@ -20,6 +20,6 @@
 	bind:value
 	bind:ref
 	data-slot="command"
-	class={cn("bg-popover text-popover-foreground flex size-full flex-col overflow-hidden rounded-xl! p-1", className)}
+	class={cn("rounded-xl! bg-popover p-1 text-popover-foreground flex size-full flex-col overflow-hidden", className)}
 	{...restProps}
 />

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

@@ -1,12 +1,12 @@
-import Root from "./command.svelte";
-import Loading from "./command-loading.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";
-import LinkItem from "./command-link-item.svelte";
+import Root from "./command.svelte";
 export { Root, Dialog, Empty, Group, Item, LinkItem, Input, List, Separator, Shortcut, Loading, Root as Command, Dialog as CommandDialog, Empty as CommandEmpty, Group as CommandGroup, Item as CommandItem, LinkItem as CommandLinkItem, Input as CommandInput, List as CommandList, Separator as CommandSeparator, Shortcut as CommandShortcut, Loading as CommandLoading, };

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

@@ -1,14 +1,14 @@
-import Root from "./command.svelte";
-import Loading from "./command-loading.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";
-import LinkItem from "./command-link-item.svelte";
+import Root from "./command.svelte";
 export { Root, Dialog, Empty, Group, Item, LinkItem, Input, List, Separator, Shortcut, Loading, 
 //
 Root as Command, Dialog as CommandDialog, Empty as CommandEmpty, Group as CommandGroup, Item as CommandItem, LinkItem as CommandLinkItem, Input as CommandInput, List as CommandList, Separator as CommandSeparator, Shortcut as CommandShortcut, Loading as CommandLoading, };