@kayord/ui 3.0.11 → 4.0.0

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

@@ -19,9 +19,6 @@
 	data-slot="menubar-item"
 	data-inset={inset}
 	data-variant={variant}
-	class={cn(
-		"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive! not-data-[variant=destructive]:focus:**:text-accent-foreground group/menubar-item flex items-center gap-1.5 rounded-md px-1.5 py-1 text-sm data-disabled:opacity-50 data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4",
-		className
-	)}
+	class={cn("gap-1.5 rounded-md px-1.5 py-1 text-sm focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive! group/menubar-item flex items-center", className)}
 	{...restProps}
 />

package/dist/components/ui/menubar/menubar-label.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn } from "../../../utils.js";
 	import { type WithElementRef } from "bits-ui";
+	import { cn } from "../../../utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
 
 	let {

package/dist/components/ui/menubar/menubar-radio-group.svelte

@@ -1,7 +1,11 @@
 <script lang="ts">
 	import { Menubar as MenubarPrimitive } from "bits-ui";
 
-	let { ref = $bindable(null), value = $bindable(""), ...restProps }: MenubarPrimitive.RadioGroupProps = $props();
+	let {
+		ref = $bindable(null),
+		value = $bindable(""),
+		...restProps
+	}: MenubarPrimitive.RadioGroupProps = $props();
 </script>
 
 <MenubarPrimitive.RadioGroup bind:ref bind:value data-slot="menubar-radio-group" {...restProps} />

package/dist/components/ui/menubar/menubar-radio-item.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { Menubar as MenubarPrimitive } from "bits-ui";
+	import CheckIcon from '@lucide/svelte/icons/check';
 	import { cn, type WithoutChild } from "../../../utils.js";
-	import CheckIcon from "@lucide/svelte/icons/check";
 
 	let {
 		ref = $bindable(null),
@@ -19,17 +19,17 @@
 	data-slot="menubar-radio-item"
 	data-inset={inset}
 	class={cn(
-		"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		"gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		className
 	)}
 	{...restProps}
 >
 	{#snippet children({ checked })}
 		<span
-			class="pointer-events-none absolute left-1.5 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4"
+			class="left-1.5 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center"
 		>
 			{#if checked}
-				<CheckIcon />
+				<CheckIcon  />
 			{/if}
 		</span>
 		{@render childrenProp?.({ checked })}

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

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

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

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
 	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
@@ -13,10 +13,7 @@
 <span
 	bind:this={ref}
 	data-slot="menubar-shortcut"
-	class={cn(
-		"text-muted-foreground group-focus/menubar-item:text-accent-foreground ml-auto text-xs tracking-widest",
-		className
-	)}
+	class={cn("text-xs tracking-widest text-muted-foreground group-focus/menubar-item:text-accent-foreground ml-auto", className)}
 	{...restProps}
 >
 	{@render children?.()}

package/dist/components/ui/menubar/menubar-shortcut.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 MenubarShortcut: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLSpanElement>>, {}, "ref">;
 type MenubarShortcut = ReturnType<typeof MenubarShortcut>;
 export default MenubarShortcut;

package/dist/components/ui/menubar/menubar-sub-content.svelte

@@ -2,15 +2,16 @@
 	import { Menubar as MenubarPrimitive } from "bits-ui";
 	import { cn } from "../../../utils.js";
 
-	let { ref = $bindable(null), class: className, ...restProps }: MenubarPrimitive.SubContentProps = $props();
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: MenubarPrimitive.SubContentProps = $props();
 </script>
 
 <MenubarPrimitive.SubContent
 	bind:ref
 	data-slot="menubar-sub-content"
-	class={cn(
-		"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-32 rounded-lg p-1 shadow-lg ring-1 duration-100",
-		className
-	)}
+	class={cn("min-w-32 rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className)}
 	{...restProps}
 />

package/dist/components/ui/menubar/menubar-sub-trigger.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { Menubar as MenubarPrimitive } from "bits-ui";
+	import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
 	import { cn, type WithoutChild } from "../../../utils.js";
-	import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
 
 	let {
 		ref = $bindable(null),
@@ -19,7 +19,7 @@
 	data-slot="menubar-sub-trigger"
 	data-inset={inset}
 	class={cn(
-		"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-none select-none data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4",
+		"gap-1.5 rounded-md px-1.5 py-1 text-sm focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-open:bg-accent data-open:text-accent-foreground [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-none select-none",
 		className
 	)}
 	{...restProps}

package/dist/components/ui/menubar/menubar-trigger.svelte

@@ -2,15 +2,16 @@
 	import { Menubar as MenubarPrimitive } from "bits-ui";
 	import { cn } from "../../../utils.js";
 
-	let { ref = $bindable(null), class: className, ...restProps }: MenubarPrimitive.TriggerProps = $props();
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: MenubarPrimitive.TriggerProps = $props();
 </script>
 
 <MenubarPrimitive.Trigger
 	bind:ref
 	data-slot="menubar-trigger"
-	class={cn(
-		"hover:bg-muted aria-expanded:bg-muted flex items-center rounded-sm px-1.5 py-[2px] text-sm font-medium outline-hidden select-none",
-		className
-	)}
+	class={cn("rounded-sm px-1.5 py-[2px] text-sm font-medium hover:bg-muted aria-expanded:bg-muted flex items-center outline-hidden select-none", className)}
 	{...restProps}
 />

package/dist/components/ui/menubar/menubar.svelte

@@ -2,12 +2,16 @@
 	import { Menubar as MenubarPrimitive } from "bits-ui";
 	import { cn } from "../../../utils.js";
 
-	let { ref = $bindable(null), class: className, ...restProps }: MenubarPrimitive.RootProps = $props();
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: MenubarPrimitive.RootProps = $props();
 </script>
 
 <MenubarPrimitive.Root
 	bind:ref
 	data-slot="menubar"
-	class={cn("flex h-8 items-center gap-0.5 rounded-lg border p-[3px]", className)}
+	class={cn("h-8 gap-0.5 rounded-lg border p-[3px] flex items-center", className)}
 	{...restProps}
 />

package/dist/components/ui/native-select/index.d.ts

@@ -1,4 +1,4 @@
-import Root from "./native-select.svelte";
-import Option from "./native-select-option.svelte";
 import OptGroup from "./native-select-opt-group.svelte";
-export { Root, Option, OptGroup, Root as NativeSelect, Option as NativeSelectOption, OptGroup as NativeSelectOptGroup };
+import Option from "./native-select-option.svelte";
+import Root from "./native-select.svelte";
+export { Root, Option, OptGroup, Root as NativeSelect, Option as NativeSelectOption, OptGroup as NativeSelectOptGroup, };

package/dist/components/ui/native-select/index.js

@@ -1,4 +1,4 @@
-import Root from "./native-select.svelte";
-import Option from "./native-select-option.svelte";
 import OptGroup from "./native-select-opt-group.svelte";
-export { Root, Option, OptGroup, Root as NativeSelect, Option as NativeSelectOption, OptGroup as NativeSelectOptGroup };
+import Option from "./native-select-option.svelte";
+import Root from "./native-select.svelte";
+export { Root, Option, OptGroup, Root as NativeSelect, Option as NativeSelectOption, OptGroup as NativeSelectOptGroup, };

package/dist/components/ui/native-select/native-select-opt-group.svelte

@@ -1,8 +1,12 @@
 <script lang="ts">
-	import type { HTMLOptgroupAttributes } from "svelte/elements";
 	import type { WithElementRef } from "../../../utils.js";
+	import type { HTMLOptgroupAttributes } from "svelte/elements";
 
-	let { ref = $bindable(null), children, ...restProps }: WithElementRef<HTMLOptgroupAttributes> = $props();
+	let {
+		ref = $bindable(null),
+		children,
+		...restProps
+	}: WithElementRef<HTMLOptgroupAttributes> = $props();
 </script>
 
 <optgroup bind:this={ref} data-slot="native-select-opt-group" {...restProps}>

package/dist/components/ui/native-select/native-select-opt-group.svelte.d.ts

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

package/dist/components/ui/native-select/native-select-option.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLOptionAttributes } from "svelte/elements";
 	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLOptionAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),

package/dist/components/ui/native-select/native-select-option.svelte.d.ts

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

package/dist/components/ui/native-select/native-select.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
+	import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
 	import { cn, type WithElementRef } from "../../../utils.js";
 	import type { HTMLSelectAttributes } from "svelte/elements";
-	import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
 
 	type NativeSelectProps = Omit<WithElementRef<HTMLSelectAttributes>, "size"> & {
 		size?: "sm" | "default";
@@ -18,7 +18,10 @@
 </script>
 
 <div
-	class={cn("cn-native-select-wrapper group/native-select relative w-fit has-[select:disabled]:opacity-50", className)}
+	class={cn(
+		"cn-native-select-wrapper group/native-select relative w-fit has-[select:disabled]:opacity-50",
+		className
+	)}
 	data-slot="native-select-wrapper"
 	data-size={size}
 >
@@ -27,14 +30,10 @@
 		bind:this={ref}
 		data-slot="native-select"
 		data-size={size}
-		class="border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-8 w-full min-w-0 appearance-none rounded-lg border bg-transparent py-1 pr-8 pl-2.5 text-sm transition-colors outline-none select-none focus-visible:ring-3 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:ring-3 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5"
+		class="h-8 w-full min-w-0 appearance-none rounded-lg border border-input bg-transparent py-1 pr-8 pl-2.5 text-sm transition-colors select-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground 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 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 outline-none disabled:pointer-events-none disabled:cursor-not-allowed"
 		{...restProps}
 	>
 		{@render children?.()}
 	</select>
-	<ChevronDownIcon
-		class="text-muted-foreground pointer-events-none absolute top-1/2 right-2.5 size-4 -translate-y-1/2 select-none"
-		aria-hidden
-		data-slot="native-select-icon"
-	/>
+	<ChevronDownIcon class="top-1/2 right-2.5 size-4 -translate-y-1/2 text-muted-foreground pointer-events-none absolute select-none" aria-hidden data-slot="native-select-icon" />
 </div>

package/dist/components/ui/navigation-menu/index.d.ts

@@ -1,4 +1,3 @@
-import Root from "./navigation-menu.svelte";
 import Content from "./navigation-menu-content.svelte";
 import Indicator from "./navigation-menu-indicator.svelte";
 import Item from "./navigation-menu-item.svelte";
@@ -6,4 +5,5 @@ import Link from "./navigation-menu-link.svelte";
 import List from "./navigation-menu-list.svelte";
 import Trigger from "./navigation-menu-trigger.svelte";
 import Viewport from "./navigation-menu-viewport.svelte";
+import Root from "./navigation-menu.svelte";
 export { Root, Content, Indicator, Item, Link, List, Trigger, Viewport, Root as NavigationMenuRoot, Content as NavigationMenuContent, Indicator as NavigationMenuIndicator, Item as NavigationMenuItem, Link as NavigationMenuLink, List as NavigationMenuList, Trigger as NavigationMenuTrigger, Viewport as NavigationMenuViewport, };

package/dist/components/ui/navigation-menu/index.js

@@ -1,4 +1,3 @@
-import Root from "./navigation-menu.svelte";
 import Content from "./navigation-menu-content.svelte";
 import Indicator from "./navigation-menu-indicator.svelte";
 import Item from "./navigation-menu-item.svelte";
@@ -6,6 +5,7 @@ import Link from "./navigation-menu-link.svelte";
 import List from "./navigation-menu-list.svelte";
 import Trigger from "./navigation-menu-trigger.svelte";
 import Viewport from "./navigation-menu-viewport.svelte";
+import Root from "./navigation-menu.svelte";
 export { Root, Content, Indicator, Item, Link, List, Trigger, Viewport, 
 //
 Root as NavigationMenuRoot, Content as NavigationMenuContent, Indicator as NavigationMenuIndicator, Item as NavigationMenuItem, Link as NavigationMenuLink, List as NavigationMenuList, Trigger as NavigationMenuTrigger, Viewport as NavigationMenuViewport, };

package/dist/components/ui/navigation-menu/navigation-menu-content.svelte

@@ -2,14 +2,18 @@
 	import { NavigationMenu as NavigationMenuPrimitive } from "bits-ui";
 	import { cn } from "../../../utils.js";
 
-	let { ref = $bindable(null), class: className, ...restProps }: NavigationMenuPrimitive.ContentProps = $props();
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: NavigationMenuPrimitive.ContentProps = $props();
 </script>
 
 <NavigationMenuPrimitive.Content
 	bind:ref
 	data-slot="navigation-menu-content"
 	class={cn(
-		"data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:ring-foreground/10 top-0 left-0 w-full p-1 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-lg group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:duration-300 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none md:absolute md:w-auto",
+		"p-1 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-lg group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:ring-foreground/10 group-data-[viewport=false]/navigation-menu:duration-300 data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 top-0 left-0 w-full group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none md:absolute md:w-auto",
 		className
 	)}
 	{...restProps}

package/dist/components/ui/navigation-menu/navigation-menu-indicator.svelte

@@ -2,17 +2,21 @@
 	import { NavigationMenu as NavigationMenuPrimitive } from "bits-ui";
 	import { cn } from "../../../utils.js";
 
-	let { ref = $bindable(null), class: className, ...restProps }: NavigationMenuPrimitive.IndicatorProps = $props();
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: NavigationMenuPrimitive.IndicatorProps = $props();
 </script>
 
 <NavigationMenuPrimitive.Indicator
 	bind:ref
 	data-slot="navigation-menu-indicator"
 	class={cn(
-		"data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden",
+		"data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:animate-in data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden",
 		className
 	)}
 	{...restProps}
 >
-	<div class="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md"></div>
+	<div class="rounded-tl-sm bg-border shadow-md relative top-[60%] h-2 w-2 rotate-45"></div>
 </NavigationMenuPrimitive.Indicator>

package/dist/components/ui/navigation-menu/navigation-menu-item.svelte

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

package/dist/components/ui/navigation-menu/navigation-menu-link.svelte

@@ -2,15 +2,16 @@
 	import { NavigationMenu as NavigationMenuPrimitive } from "bits-ui";
 	import { cn } from "../../../utils.js";
 
-	let { ref = $bindable(null), class: className, ...restProps }: NavigationMenuPrimitive.LinkProps = $props();
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: NavigationMenuPrimitive.LinkProps = $props();
 </script>
 
 <NavigationMenuPrimitive.Link
 	bind:ref
 	data-slot="navigation-menu-link"
-	class={cn(
-		"data-active:focus:bg-muted data-active:hover:bg-muted data-active:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-2 rounded-lg p-2 text-sm transition-all outline-none focus-visible:ring-3 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-md [&_svg:not([class*='size-'])]:size-4",
-		className
-	)}
+	class={cn("flex items-center gap-2 rounded-lg p-2 text-sm transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-md data-active:bg-muted/50 data-active:hover:bg-muted data-active:focus:bg-muted [&_svg:not([class*='size-'])]:size-4", className)}
 	{...restProps}
 />

package/dist/components/ui/navigation-menu/navigation-menu-list.svelte

@@ -2,12 +2,19 @@
 	import { NavigationMenu as NavigationMenuPrimitive } from "bits-ui";
 	import { cn } from "../../../utils.js";
 
-	let { ref = $bindable(null), class: className, ...restProps }: NavigationMenuPrimitive.ListProps = $props();
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: NavigationMenuPrimitive.ListProps = $props();
 </script>
 
 <NavigationMenuPrimitive.List
 	bind:ref
 	data-slot="navigation-menu-list"
-	class={cn("group flex flex-1 list-none items-center justify-center gap-0", className)}
+	class={cn(
+		"gap-0 group flex flex-1 list-none items-center justify-center",
+		className
+	)}
 	{...restProps}
 />

package/dist/components/ui/navigation-menu/navigation-menu-trigger.svelte

@@ -1,15 +1,15 @@
 <script lang="ts" module>
-	import { cn } from "../../../utils.js";
 	import { tv } from "tailwind-variants";
+	import { cn } from "../../../utils.js";
 
 	export const navigationMenuTriggerStyle = tv({
-		base: "hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-lg px-2.5 py-1.5 text-sm font-medium transition-all focus-visible:ring-3 focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center outline-none disabled:pointer-events-none",
+		base: "rounded-lg px-2.5 py-1.5 text-sm font-medium transition-all hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 disabled:opacity-50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted data-open:bg-muted/50 data-open:hover:bg-muted data-open:focus:bg-muted group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center outline-none disabled:pointer-events-none",
 	});
 </script>
 
 <script lang="ts">
 	import { NavigationMenu as NavigationMenuPrimitive } from "bits-ui";
-	import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
+	import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
 	let {
 		ref = $bindable(null),
 		class: className,
@@ -25,8 +25,5 @@
 	{...restProps}
 >
 	{@render children?.()}
-	<ChevronDownIcon
-		class="relative top-px ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180"
-		aria-hidden="true"
-	/>
+	<ChevronDownIcon class="relative top-px ml-1 size-3 transition duration-300 group-data-popup-open/navigation-menu-trigger:rotate-180 group-data-open/navigation-menu-trigger:rotate-180" aria-hidden="true" />
 </NavigationMenuPrimitive.Trigger>

package/dist/components/ui/navigation-menu/navigation-menu-trigger.svelte.d.ts

@@ -1,4 +1,4 @@
-export declare const navigationMenuTriggerStyle: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-lg px-2.5 py-1.5 text-sm font-medium transition-all focus-visible:ring-3 focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center outline-none disabled:pointer-events-none", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-lg px-2.5 py-1.5 text-sm font-medium transition-all focus-visible:ring-3 focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center outline-none disabled:pointer-events-none", unknown, unknown, undefined>>;
+export declare const navigationMenuTriggerStyle: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "rounded-lg px-2.5 py-1.5 text-sm font-medium transition-all hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 disabled:opacity-50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted data-open:bg-muted/50 data-open:hover:bg-muted data-open:focus:bg-muted group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center outline-none disabled:pointer-events-none", {} | {}, undefined, import("tailwind-variants").TVReturnTypeLike<unknown, undefined>>;
 import { NavigationMenu as NavigationMenuPrimitive } from "bits-ui";
 declare const NavigationMenuTrigger: import("svelte").Component<NavigationMenuPrimitive.TriggerProps, {}, "ref">;
 type NavigationMenuTrigger = ReturnType<typeof NavigationMenuTrigger>;

package/dist/components/ui/navigation-menu/navigation-menu-viewport.svelte

@@ -2,7 +2,11 @@
 	import { NavigationMenu as NavigationMenuPrimitive } from "bits-ui";
 	import { cn } from "../../../utils.js";
 
-	let { ref = $bindable(null), class: className, ...restProps }: NavigationMenuPrimitive.ViewportProps = $props();
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: NavigationMenuPrimitive.ViewportProps = $props();
 </script>
 
 <div class={cn("absolute start-0 top-full isolate z-50 flex justify-center")}>
@@ -10,7 +14,7 @@
 		bind:ref
 		data-slot="navigation-menu-viewport"
 		class={cn(
-			"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:zoom-out-90 data-open:zoom-in-90 ring-foreground/10 origin-top-center relative mt-1.5 h-[calc(var(--bits-navigation-menu-viewport-height)+1rem)] w-full overflow-hidden rounded-lg shadow ring-1 duration-100 md:w-[calc(var(--bits-navigation-menu-viewport-width)+1rem)]",
+			"rounded-lg bg-popover text-popover-foreground shadow ring-1 ring-foreground/10 duration-100 data-open:animate-in data-open:zoom-in-90 data-closed:animate-out data-closed:zoom-out-90 origin-top-center relative mt-1.5 h-[calc(var(--bits-navigation-menu-viewport-height)+1rem)] w-full overflow-hidden md:w-[calc(var(--bits-navigation-menu-viewport-width)+1rem)]",
 			className
 		)}
 		{...restProps}

package/dist/components/ui/navigation-menu/navigation-menu.svelte

@@ -18,7 +18,10 @@
 	bind:ref
 	data-slot="navigation-menu"
 	data-viewport={viewport}
-	class={cn("group/navigation-menu relative flex max-w-max max-w-max flex-1 items-center justify-center", className)}
+	class={cn(
+		"max-w-max group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
+		className
+	)}
 	{...restProps}
 >
 	{@render children?.()}

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

@@ -1,12 +1,12 @@
-import Root from "./pagination.svelte";
 import Content from "./pagination-content.svelte";
+import Ellipsis from "./pagination-ellipsis.svelte";
 import Item from "./pagination-item.svelte";
 import Link from "./pagination-link.svelte";
-import PrevButton from "./pagination-prev-button.svelte";
 import NextButton from "./pagination-next-button.svelte";
-import Ellipsis from "./pagination-ellipsis.svelte";
-import Previous from "./pagination-previous.svelte";
 import Next from "./pagination-next.svelte";
+import PrevButton from "./pagination-prev-button.svelte";
+import Previous from "./pagination-previous.svelte";
+import Root from "./pagination.svelte";
 export { Root, Content, Item, Link, PrevButton, // old
 NextButton, // old
 Ellipsis, Previous, Next, Root as Pagination, Content as PaginationContent, Item as PaginationItem, Link as PaginationLink, PrevButton as PaginationPrevButton, // old

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

@@ -1,12 +1,12 @@
-import Root from "./pagination.svelte";
 import Content from "./pagination-content.svelte";
+import Ellipsis from "./pagination-ellipsis.svelte";
 import Item from "./pagination-item.svelte";
 import Link from "./pagination-link.svelte";
-import PrevButton from "./pagination-prev-button.svelte";
 import NextButton from "./pagination-next-button.svelte";
-import Ellipsis from "./pagination-ellipsis.svelte";
-import Previous from "./pagination-previous.svelte";
 import Next from "./pagination-next.svelte";
+import PrevButton from "./pagination-prev-button.svelte";
+import Previous from "./pagination-previous.svelte";
+import Root from "./pagination.svelte";
 export { Root, Content, Item, Link, PrevButton, // old
 NextButton, // old
 Ellipsis, Previous, Next, 

package/dist/components/ui/pagination/pagination-content.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
 	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
@@ -10,6 +10,11 @@
 	}: WithElementRef<HTMLAttributes<HTMLUListElement>> = $props();
 </script>
 
-<ul bind:this={ref} data-slot="pagination-content" class={cn("flex items-center gap-0.5", className)} {...restProps}>
+<ul
+	bind:this={ref}
+	data-slot="pagination-content"
+	class={cn("gap-0.5 flex items-center", className)}
+	{...restProps}
+>
 	{@render children?.()}
 </ul>

package/dist/components/ui/pagination/pagination-content.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 PaginationContent: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLUListElement>>, {}, "ref">;
 type PaginationContent = ReturnType<typeof PaginationContent>;
 export default PaginationContent;

package/dist/components/ui/pagination/pagination-ellipsis.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
+	import MoreHorizontalIcon from '@lucide/svelte/icons/more-horizontal';
 	import { cn, type WithElementRef, type WithoutChildren } from "../../../utils.js";
-	import MoreHorizontalIcon from "@lucide/svelte/icons/more-horizontal";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
@@ -14,12 +14,9 @@
 	bind:this={ref}
 	aria-hidden="true"
 	data-slot="pagination-ellipsis"
-	class={cn(
-		"flex size-8 items-center items-center justify-center justify-center [&_svg:not([class*='size-'])]:size-4",
-		className
-	)}
+	class={cn("size-8 items-center justify-center [&_svg:not([class*='size-'])]:size-4 flex items-center justify-center", className)}
 	{...restProps}
 >
-	<MoreHorizontalIcon />
+	<MoreHorizontalIcon  />
 	<span class="sr-only">More pages</span>
 </span>

package/dist/components/ui/pagination/pagination-ellipsis.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 PaginationEllipsis: import("svelte").Component<Omit<WithElementRef<HTMLAttributes<HTMLSpanElement>>, "children">, {}, "ref">;
 type PaginationEllipsis = ReturnType<typeof PaginationEllipsis>;
 export default PaginationEllipsis;