@kayord/ui 3.0.11 → 4.0.0

package/dist/components/ui/sheet/sheet-description.svelte

@@ -2,12 +2,16 @@
 	import { Dialog as SheetPrimitive } from "bits-ui";
 	import { cn } from "../../../utils.js";
 
-	let { ref = $bindable(null), class: className, ...restProps }: SheetPrimitive.DescriptionProps = $props();
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: SheetPrimitive.DescriptionProps = $props();
 </script>
 
 <SheetPrimitive.Description
 	bind:ref
 	data-slot="sheet-description"
-	class={cn("text-muted-foreground text-sm", className)}
+	class={cn("text-sm text-muted-foreground", className)}
 	{...restProps}
 />

package/dist/components/ui/sheet/sheet-footer.svelte

@@ -10,6 +10,11 @@
 	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
-<div bind:this={ref} data-slot="sheet-footer" class={cn("mt-auto flex flex-col gap-2 p-4", className)} {...restProps}>
+<div
+	bind:this={ref}
+	data-slot="sheet-footer"
+	class={cn("gap-2 p-4 mt-auto flex flex-col", className)}
+	{...restProps}
+>
 	{@render children?.()}
 </div>

package/dist/components/ui/sheet/sheet-header.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<HTMLDivElement>> = $props();
 </script>
 
-<div bind:this={ref} data-slot="sheet-header" class={cn("flex flex-col gap-0.5 p-4", className)} {...restProps}>
+<div
+	bind:this={ref}
+	data-slot="sheet-header"
+	class={cn("gap-0.5 p-4 flex flex-col", className)}
+	{...restProps}
+>
 	{@render children?.()}
 </div>

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

package/dist/components/ui/sheet/sheet-overlay.svelte

@@ -2,12 +2,16 @@
 	import { Dialog as SheetPrimitive } from "bits-ui";
 	import { cn } from "../../../utils.js";
 
-	let { ref = $bindable(null), class: className, ...restProps }: SheetPrimitive.OverlayProps = $props();
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: SheetPrimitive.OverlayProps = $props();
 </script>
 
 <SheetPrimitive.Overlay
 	bind:ref
 	data-slot="sheet-overlay"
-	class={cn("fixed inset-0 z-50 bg-black/10 supports-backdrop-filter:backdrop-blur-xs", className)}
+	class={cn("bg-black/10 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50", className)}
 	{...restProps}
 />

package/dist/components/ui/sheet/sheet-title.svelte

@@ -2,12 +2,16 @@
 	import { Dialog as SheetPrimitive } from "bits-ui";
 	import { cn } from "../../../utils.js";
 
-	let { ref = $bindable(null), class: className, ...restProps }: SheetPrimitive.TitleProps = $props();
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: SheetPrimitive.TitleProps = $props();
 </script>
 
 <SheetPrimitive.Title
 	bind:ref
 	data-slot="sheet-title"
-	class={cn("text-foreground text-base font-medium", className)}
+	class={cn("text-base font-medium text-foreground", className)}
 	{...restProps}
 />

package/dist/components/ui/sidebar/context.svelte.js

@@ -1,5 +1,5 @@
-import { IsMobile } from "../../../hooks/is-mobile.svelte.js";
 import { getContext, setContext } from "svelte";
+import { IsMobile } from "../../../hooks/is-mobile.svelte.js";
 import { SIDEBAR_KEYBOARD_SHORTCUT } from "./constants.js";
 class SidebarState {
     props;

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

@@ -1,4 +1,3 @@
-import { useSidebar } from "./context.svelte.js";
 import Content from "./sidebar-content.svelte";
 import Footer from "./sidebar-footer.svelte";
 import GroupAction from "./sidebar-group-action.svelte";
@@ -22,4 +21,5 @@ import Rail from "./sidebar-rail.svelte";
 import Separator from "./sidebar-separator.svelte";
 import Trigger from "./sidebar-trigger.svelte";
 import Root from "./sidebar.svelte";
+import { useSidebar } from "./context.svelte.js";
 export { Content, Footer, Group, GroupAction, GroupContent, GroupLabel, Header, Input, Inset, Menu, MenuAction, MenuBadge, MenuButton, MenuItem, MenuSkeleton, MenuSub, MenuSubButton, MenuSubItem, Provider, Rail, Root, Separator, Root as Sidebar, Content as SidebarContent, Footer as SidebarFooter, Group as SidebarGroup, GroupAction as SidebarGroupAction, GroupContent as SidebarGroupContent, GroupLabel as SidebarGroupLabel, Header as SidebarHeader, Input as SidebarInput, Inset as SidebarInset, Menu as SidebarMenu, MenuAction as SidebarMenuAction, MenuBadge as SidebarMenuBadge, MenuButton as SidebarMenuButton, MenuItem as SidebarMenuItem, MenuSkeleton as SidebarMenuSkeleton, MenuSub as SidebarMenuSub, MenuSubButton as SidebarMenuSubButton, MenuSubItem as SidebarMenuSubItem, Provider as SidebarProvider, Rail as SidebarRail, Separator as SidebarSeparator, Trigger as SidebarTrigger, Trigger, useSidebar, };

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

@@ -1,4 +1,3 @@
-import { useSidebar } from "./context.svelte.js";
 import Content from "./sidebar-content.svelte";
 import Footer from "./sidebar-footer.svelte";
 import GroupAction from "./sidebar-group-action.svelte";
@@ -22,6 +21,7 @@ import Rail from "./sidebar-rail.svelte";
 import Separator from "./sidebar-separator.svelte";
 import Trigger from "./sidebar-trigger.svelte";
 import Root from "./sidebar.svelte";
+import { useSidebar } from "./context.svelte.js";
 export { Content, Footer, Group, GroupAction, GroupContent, GroupLabel, Header, Input, Inset, Menu, MenuAction, MenuBadge, MenuButton, MenuItem, MenuSkeleton, MenuSub, MenuSubButton, MenuSubItem, Provider, Rail, Root, Separator, 
 //
 Root as Sidebar, Content as SidebarContent, Footer as SidebarFooter, Group as SidebarGroup, GroupAction as SidebarGroupAction, GroupContent as SidebarGroupContent, GroupLabel as SidebarGroupLabel, Header as SidebarHeader, Input as SidebarInput, Inset as SidebarInset, Menu as SidebarMenu, MenuAction as SidebarMenuAction, MenuBadge as SidebarMenuBadge, MenuButton as SidebarMenuButton, MenuItem as SidebarMenuItem, MenuSkeleton as SidebarMenuSkeleton, MenuSub as SidebarMenuSub, MenuSubButton as SidebarMenuSubButton, MenuSubItem as SidebarMenuSubItem, Provider as SidebarProvider, Rail as SidebarRail, Separator as SidebarSeparator, Trigger as SidebarTrigger, Trigger, useSidebar, };

package/dist/components/ui/sidebar/sidebar-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),
@@ -15,7 +15,7 @@
 	data-slot="sidebar-content"
 	data-sidebar="content"
 	class={cn(
-		"no-scrollbar flex min-h-0 flex-1 flex-col gap-0 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+		"no-scrollbar gap-0 flex min-h-0 flex-1 flex-col overflow-auto group-data-[collapsible=icon]:overflow-hidden",
 		className
 	)}
 	{...restProps}

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

package/dist/components/ui/sidebar/sidebar-footer.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),
@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="sidebar-footer"
 	data-sidebar="footer"
-	class={cn("flex flex-col gap-2 p-2", className)}
+	class={cn("gap-2 p-2 flex flex-col", className)}
 	{...restProps}
 >
 	{@render children?.()}

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

package/dist/components/ui/sidebar/sidebar-group-action.svelte

@@ -15,7 +15,7 @@
 
 	const mergedProps = $derived({
 		class: cn(
-			"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 w-5 rounded-md p-0 focus-visible:ring-2 [&>svg]:size-4 flex aspect-square items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0",
+			"absolute top-3.5 right-3 w-5 rounded-md p-0 text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 flex aspect-square items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0",
 			className
 		),
 		"data-slot": "sidebar-group-action",

package/dist/components/ui/sidebar/sidebar-group-content.svelte

@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="sidebar-group-content"
 	data-sidebar="group-content"
-	class={cn("w-full text-sm", className)}
+	class={cn("text-sm w-full", className)}
 	{...restProps}
 >
 	{@render children?.()}

package/dist/components/ui/sidebar/sidebar-group-label.svelte

@@ -15,7 +15,7 @@
 
 	const mergedProps = $derived({
 		class: cn(
-			"text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-md px-2 text-xs font-medium transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 flex shrink-0 items-center outline-hidden [&>svg]:shrink-0",
+			"h-8 rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 flex shrink-0 items-center outline-hidden [&>svg]:shrink-0",
 			className
 		),
 		"data-slot": "sidebar-group-label",

package/dist/components/ui/sidebar/sidebar-group.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),
@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="sidebar-group"
 	data-sidebar="group"
-	class={cn("relative flex w-full min-w-0 flex-col p-2", className)}
+	class={cn("p-2 relative flex w-full min-w-0 flex-col", className)}
 	{...restProps}
 >
 	{@render children?.()}

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

package/dist/components/ui/sidebar/sidebar-header.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),
@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="sidebar-header"
 	data-sidebar="header"
-	class={cn("flex flex-col gap-2 p-2", className)}
+	class={cn("gap-2 p-2 flex flex-col", className)}
 	{...restProps}
 >
 	{@render children?.()}

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

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

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import type { ComponentProps } from "svelte";
 	import { Input } from "../input/index.js";
 	import { cn } from "../../../utils.js";
+	import type { ComponentProps } from "svelte";
 
 	let {
 		ref = $bindable(null),
@@ -16,6 +16,6 @@
 	bind:value
 	data-slot="sidebar-input"
 	data-sidebar="input"
-	class={cn("bg-background h-8 w-full shadow-none", className)}
+	class={cn("h-8 w-full bg-background shadow-none", className)}
 	{...restProps}
 />

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

@@ -2,7 +2,7 @@ declare const SidebarInput: import("svelte").Component<(Omit<import("svelte/elem
     type: "file";
     files?: FileList;
 } | {
-    type?: "number" | "submit" | "reset" | "button" | "search" | "checkbox" | "radio" | (string & {}) | "text" | "tel" | "url" | "email" | "hidden" | "color" | "date" | "time" | "datetime-local" | "image" | "month" | "password" | "range" | "week";
+    type?: "number" | "hidden" | "color" | "search" | "button" | "checkbox" | "radio" | (string & {}) | "text" | "tel" | "url" | "email" | "date" | "time" | "submit" | "reset" | "datetime-local" | "image" | "month" | "password" | "range" | "week";
     files?: undefined;
 })) & {
     ref?: HTMLElement | null | undefined;

package/dist/components/ui/sidebar/sidebar-inset.svelte

@@ -13,10 +13,7 @@
 <main
 	bind:this={ref}
 	data-slot="sidebar-inset"
-	class={cn(
-		"bg-background relative flex w-full flex-1 flex-col md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
-		className
-	)}
+	class={cn("bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 relative flex w-full flex-1 flex-col", className)}
 	{...restProps}
 >
 	{@render children?.()}

package/dist/components/ui/sidebar/sidebar-menu-action.svelte

@@ -17,9 +17,9 @@
 
 	const mergedProps = $derived({
 		class: cn(
-			"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 aspect-square w-5 rounded-md p-0 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 focus-visible:ring-2 [&>svg]:size-4 flex items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0",
+			"absolute top-1.5 right-1 aspect-square w-5 rounded-md p-0 text-sidebar-foreground ring-sidebar-ring peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 flex items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0",
 			showOnHover &&
-				"peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-open:opacity-100 md:opacity-0",
+				"group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-active/menu-button:text-sidebar-accent-foreground md:opacity-0 data-open:opacity-100",
 			className
 		),
 		"data-slot": "sidebar-menu-action",

package/dist/components/ui/sidebar/sidebar-menu-badge.svelte

@@ -15,7 +15,7 @@
 	data-slot="sidebar-menu-badge"
 	data-sidebar="menu-badge"
 	class={cn(
-		"text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground pointer-events-none absolute right-1 flex flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none group-data-[collapsible=icon]:hidden peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1",
+		"pointer-events-none absolute right-1 flex h-5 min-w-5 rounded-md px-1 text-xs font-medium text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 peer-data-active/menu-button:text-sidebar-accent-foreground flex items-center justify-center tabular-nums select-none group-data-[collapsible=icon]:hidden",
 		className
 	)}
 	{...restProps}

package/dist/components/ui/sidebar/sidebar-menu-button.svelte

@@ -2,12 +2,11 @@
 	import { tv, type VariantProps } from "tailwind-variants";
 
 	export const sidebarMenuButtonVariants = tv({
-		base: "ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-md p-2 text-left text-sm transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button group/menu-button flex w-full items-center overflow-hidden outline-hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate",
+		base: "gap-2 rounded-md p-2 text-left text-sm ring-sidebar-ring transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground peer/menu-button group/menu-button flex w-full items-center overflow-hidden outline-hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate",
 		variants: {
 			variant: {
 				default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
-				outline:
-					"bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_var(--sidebar-border)] hover:shadow-[0_0_0_1px_var(--sidebar-accent)]",
+				outline: "bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_var(--sidebar-accent)]",
 			},
 			size: {
 				default: "h-8 text-sm",
@@ -26,12 +25,12 @@
 </script>
 
 <script lang="ts">
+	import { mergeProps } from "bits-ui";
 	import * as Tooltip from "../tooltip/index.js";
 	import { cn, type WithElementRef, type WithoutChildrenOrChild } from "../../../utils.js";
-	import { mergeProps } from "bits-ui";
+	import { useSidebar } from "./context.svelte.js";
 	import type { ComponentProps, Snippet } from "svelte";
 	import type { HTMLAttributes } from "svelte/elements";
-	import { useSidebar } from "./context.svelte.js";
 
 	let {
 		ref = $bindable(null),

package/dist/components/ui/sidebar/sidebar-menu-button.svelte.d.ts

@@ -1,35 +1,35 @@
 import { type VariantProps } from "tailwind-variants";
 export declare const sidebarMenuButtonVariants: import("tailwind-variants").TVReturnType<{
     variant: {
-        default: string;
-        outline: string;
+        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground";
+        outline: "bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_var(--sidebar-accent)]";
     };
     size: {
-        default: string;
-        sm: string;
-        lg: string;
+        default: "h-8 text-sm";
+        sm: "h-7 text-xs";
+        lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!";
     };
-}, undefined, "ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-md p-2 text-left text-sm transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button group/menu-button flex w-full items-center overflow-hidden outline-hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate", {
+}, undefined, "gap-2 rounded-md p-2 text-left text-sm ring-sidebar-ring transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground peer/menu-button group/menu-button flex w-full items-center overflow-hidden outline-hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate", {
     variant: {
-        default: string;
-        outline: string;
+        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground";
+        outline: "bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_var(--sidebar-accent)]";
     };
     size: {
-        default: string;
-        sm: string;
-        lg: string;
+        default: "h-8 text-sm";
+        sm: "h-7 text-xs";
+        lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!";
     };
-}, undefined, import("tailwind-variants").TVReturnType<{
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
-        default: string;
-        outline: string;
+        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground";
+        outline: "bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_var(--sidebar-accent)]";
     };
     size: {
-        default: string;
-        sm: string;
-        lg: string;
+        default: "h-8 text-sm";
+        sm: "h-7 text-xs";
+        lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!";
     };
-}, undefined, "ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-md p-2 text-left text-sm transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button group/menu-button flex w-full items-center overflow-hidden outline-hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate", unknown, unknown, undefined>>;
+}, undefined>>;
 export type SidebarMenuButtonVariant = VariantProps<typeof sidebarMenuButtonVariants>["variant"];
 export type SidebarMenuButtonSize = VariantProps<typeof sidebarMenuButtonVariants>["size"];
 import * as Tooltip from "../tooltip/index.js";

package/dist/components/ui/sidebar/sidebar-menu-skeleton.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from "../../../utils.js";
 	import { Skeleton } from "../skeleton/index.js";
+	import { cn, type WithElementRef } from "../../../utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
@@ -21,7 +21,7 @@
 	bind:this={ref}
 	data-slot="sidebar-menu-skeleton"
 	data-sidebar="menu-skeleton"
-	class={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
+	class={cn("h-8 gap-2 rounded-md px-2 flex items-center", className)}
 	{...restProps}
 >
 	{#if showIcon}

package/dist/components/ui/sidebar/sidebar-menu-sub-button.svelte

@@ -19,7 +19,7 @@
 
 	const mergedProps = $derived({
 		class: cn(
-			"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground h-7 gap-2 rounded-md px-2 focus-visible:ring-2 data-[size=md]:text-sm data-[size=sm]:text-xs [&>svg]:size-4 flex min-w-0 -translate-x-px items-center overflow-hidden outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0",
+			"h-7 gap-2 rounded-md px-2 text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground data-[size=md]:text-sm data-[size=sm]:text-xs data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:text-sidebar-accent-foreground flex min-w-0 -translate-x-px items-center overflow-hidden outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0",
 			className
 		),
 		"data-slot": "sidebar-menu-sub-button",

package/dist/components/ui/sidebar/sidebar-menu-sub.svelte

@@ -14,10 +14,7 @@
 	bind:this={ref}
 	data-slot="sidebar-menu-sub"
 	data-sidebar="menu-sub"
-	class={cn(
-		"border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5 group-data-[collapsible=icon]:hidden",
-		className
-	)}
+	class={cn("mx-3.5 translate-x-px gap-1 border-l border-sidebar-border px-2.5 py-0.5 group-data-[collapsible=icon]:hidden flex min-w-0 flex-col", className)}
 	{...restProps}
 >
 	{@render children?.()}

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

@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="sidebar-menu"
 	data-sidebar="menu"
-	class={cn("flex w-full min-w-0 flex-col gap-0", className)}
+	class={cn("gap-0 flex w-full min-w-0 flex-col", className)}
 	{...restProps}
 >
 	{@render children?.()}

package/dist/components/ui/sidebar/sidebar-provider.svelte

@@ -1,9 +1,14 @@
 <script lang="ts">
 	import * as Tooltip from "../tooltip/index.js";
 	import { cn, type WithElementRef } from "../../../utils.js";
-	import type { HTMLAttributes } from "svelte/elements";
-	import { SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON } from "./constants.js";
+	import {
+		SIDEBAR_COOKIE_MAX_AGE,
+		SIDEBAR_COOKIE_NAME,
+		SIDEBAR_WIDTH,
+		SIDEBAR_WIDTH_ICON,
+	} from "./constants.js";
 	import { setSidebar } from "./context.svelte.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
@@ -36,7 +41,10 @@
 	<div
 		data-slot="sidebar-wrapper"
 		style="--sidebar-width: {SIDEBAR_WIDTH}; --sidebar-width-icon: {SIDEBAR_WIDTH_ICON}; {style}"
-		class={cn("group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full", className)}
+		class={cn(
+			"group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar",
+			className
+		)}
 		bind:this={ref}
 		{...restProps}
 	>

package/dist/components/ui/sidebar/sidebar-rail.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { cn, type WithElementRef } from "../../../utils.js";
-	import type { HTMLAttributes } from "svelte/elements";
 	import { useSidebar } from "./context.svelte.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
@@ -25,7 +25,7 @@
 		"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex",
 		"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
 		"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
-		"hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
+		"group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar",
 		"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
 		"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
 		className

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

@@ -3,13 +3,17 @@
 	import { cn } from "../../../utils.js";
 	import type { ComponentProps } from "svelte";
 
-	let { ref = $bindable(null), class: className, ...restProps }: ComponentProps<typeof Separator> = $props();
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: ComponentProps<typeof Separator> = $props();
 </script>
 
 <Separator
 	bind:ref
 	data-slot="sidebar-separator"
 	data-sidebar="separator"
-	class={cn("bg-sidebar-border mx-2 w-auto", className)}
+	class={cn("mx-2 bg-sidebar-border w-auto", className)}
 	{...restProps}
 />

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

@@ -1,9 +1,9 @@
 <script lang="ts">
+	import PanelLeftIcon from '@lucide/svelte/icons/panel-left';
 	import { Button } from "../button/index.js";
-	import PanelLeftIcon from "@lucide/svelte/icons/panel-left";
 	import { cn } from "../../../utils.js";
-	import type { ComponentProps } from "svelte";
 	import { useSidebar } from "./context.svelte.js";
+	import type { ComponentProps } from "svelte";
 
 	let {
 		ref = $bindable(null),
@@ -31,6 +31,6 @@
 	}}
 	{...restProps}
 >
-	<PanelLeftIcon />
+	<PanelLeftIcon  />
 	<span class="sr-only">Toggle Sidebar</span>
 </Button>