@kuzenbo/core 0.0.3 → 0.0.5

package/dist/ui/navigation-list.js

@@ -1,3 +1,5 @@
+"use client";
+
 import { a as useComponentSize } from "../size-provider-18EvJgDT.js";
 import { Separator } from "./separator.js";
 import { Skeleton } from "./skeleton.js";
@@ -48,23 +50,23 @@ const useNavigationListItemContext = () => useContext(NavigationListItemContext)
 //#endregion
 //#region src/ui/navigation-list/navigation-list-action.tsx
 const navigationListActionVariants = tv({
-	base: "absolute right-1 flex aspect-square cursor-pointer items-center justify-center rounded-md p-0 outline-hidden transition-transform group-data-[collapsible=true]/navigation-list-item:right-10 group-has-data-[slot=navigation-list-badge]/navigation-list-item:right-14 [&>svg]:shrink-0",
+	base: "cursor-clickable absolute right-1 flex aspect-square items-center justify-center rounded-md p-0 outline-hidden transition-transform group-has-data-[slot=navigation-list-badge]/navigation-list-item:right-14 group-data-[collapsible=true]/navigation-list-item:right-10 [&>svg]:shrink-0",
+	defaultVariants: {
+		size: "md",
+		tone: "surface"
+	},
 	variants: {
 		size: {
-			xs: "top-0.5 w-4 [&>svg:not([class*='size-'])]:size-3",
-			sm: "top-1 w-5 [&>svg:not([class*='size-'])]:size-3.5",
-			md: "top-1.5 w-5 [&>svg:not([class*='size-'])]:size-4",
 			lg: "top-2 w-6 [&>svg:not([class*='size-'])]:size-4",
-			xl: "top-2.5 w-7 [&>svg:not([class*='size-'])]:size-5"
+			md: "top-1.5 w-5 [&>svg:not([class*='size-'])]:size-4",
+			sm: "top-1 w-5 [&>svg:not([class*='size-'])]:size-3.5",
+			xl: "top-2.5 w-7 [&>svg:not([class*='size-'])]:size-5",
+			xs: "top-0.5 w-4 [&>svg:not([class*='size-'])]:size-3"
 		},
 		tone: {
-			surface: "text-muted-foreground ring-ring hover:bg-muted hover:text-foreground focus-visible:ring-2 peer-hover/navigation-list-link:text-foreground peer-data-active/navigation-list-link:text-foreground",
-			sidebar: "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/navigation-list-link:text-sidebar-accent-foreground peer-data-active/navigation-list-link:text-sidebar-accent-foreground"
+			sidebar: "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/navigation-list-link:text-sidebar-accent-foreground peer-data-active/navigation-list-link:text-sidebar-accent-foreground focus-visible:ring-2",
+			surface: "text-muted-foreground ring-ring hover:bg-muted hover:text-foreground peer-hover/navigation-list-link:text-foreground peer-data-active/navigation-list-link:text-foreground focus-visible:ring-2"
 		}
-	},
-	defaultVariants: {
-		size: "md",
-		tone: "surface"
 	}
 });
 const NavigationListAction = ({ className, render, showOnHover = false, size, tone, ...props }) => {
@@ -77,7 +79,7 @@ const NavigationListAction = ({ className, render, showOnHover = false, size, to
 			className: cn(navigationListActionVariants({
 				size: resolvedSize,
 				tone: resolvedTone
-			}), itemContext.variant === "filled" && resolvedTone === "surface" && "peer-data-active/navigation-list-link:text-primary-foreground", itemContext.variant === "filled" && resolvedTone === "sidebar" && "peer-data-active/navigation-list-link:text-sidebar-primary-foreground", "peer-data-[size=xs]/navigation-list-link:top-0.5 peer-data-[size=sm]/navigation-list-link:top-1 peer-data-[size=md]/navigation-list-link:top-1.5 peer-data-[size=lg]/navigation-list-link:top-2 peer-data-[size=xl]/navigation-list-link:top-2.5", showOnHover && "group-focus-within/navigation-list-item:opacity-100 group-hover/navigation-list-item:opacity-100 peer-data-active/navigation-list-link:opacity-100 md:opacity-0", className),
+			}), itemContext.variant === "filled" && resolvedTone === "surface" && "peer-data-active/navigation-list-link:text-primary-foreground", itemContext.variant === "filled" && resolvedTone === "sidebar" && "peer-data-active/navigation-list-link:text-sidebar-primary-foreground", "peer-data-[size=lg]/navigation-list-link:top-2 peer-data-[size=md]/navigation-list-link:top-1.5 peer-data-[size=sm]/navigation-list-link:top-1 peer-data-[size=xl]/navigation-list-link:top-2.5 peer-data-[size=xs]/navigation-list-link:top-0.5", showOnHover && "group-focus-within/navigation-list-item:opacity-100 group-hover/navigation-list-item:opacity-100 peer-data-active/navigation-list-link:opacity-100 md:opacity-0", className),
 			type: render ? void 0 : "button"
 		}, props),
 		render,
@@ -93,22 +95,22 @@ const NavigationListAction = ({ className, render, showOnHover = false, size, to
 //#region src/ui/navigation-list/navigation-list-badge.tsx
 const navigationListBadgeVariants = tv({
 	base: "pointer-events-none absolute right-1 flex items-center justify-center rounded-md px-1 font-medium tabular-nums select-none group-data-[collapsible=true]/navigation-list-item:right-8",
+	defaultVariants: {
+		size: "md",
+		tone: "surface"
+	},
 	variants: {
 		size: {
-			xs: "top-0.5 h-4 min-w-4 text-[10px]",
-			sm: "top-1 h-5 min-w-5 text-[11px]",
-			md: "top-1.5 h-5 min-w-5 text-xs",
 			lg: "top-2 h-6 min-w-6 text-xs",
-			xl: "top-2.5 h-7 min-w-7 text-sm"
+			md: "top-1.5 h-5 min-w-5 text-xs",
+			sm: "top-1 h-5 min-w-5 text-[11px]",
+			xl: "top-2.5 h-7 min-w-7 text-sm",
+			xs: "top-0.5 h-4 min-w-4 text-[10px]"
 		},
 		tone: {
-			surface: "text-muted-foreground peer-hover/navigation-list-link:text-foreground peer-data-active/navigation-list-link:text-foreground",
-			sidebar: "text-sidebar-foreground peer-hover/navigation-list-link:text-sidebar-accent-foreground peer-data-active/navigation-list-link:text-sidebar-accent-foreground"
+			sidebar: "text-sidebar-foreground peer-hover/navigation-list-link:text-sidebar-accent-foreground peer-data-active/navigation-list-link:text-sidebar-accent-foreground",
+			surface: "text-muted-foreground peer-hover/navigation-list-link:text-foreground peer-data-active/navigation-list-link:text-foreground"
 		}
-	},
-	defaultVariants: {
-		size: "md",
-		tone: "surface"
 	}
 });
 const NavigationListBadge = ({ className, size, tone, ...props }) => {
@@ -131,28 +133,28 @@ const NavigationListBadge = ({ className, size, tone, ...props }) => {
 //#region src/ui/navigation-list/navigation-list-content.tsx
 const navigationListContentVariants = tv({
 	base: "flex min-w-0 list-none flex-col rounded-lg border",
+	defaultVariants: {
+		size: "md",
+		tone: "surface",
+		variant: "light"
+	},
 	variants: {
 		size: {
-			xs: "gap-0.5 p-1",
-			sm: "gap-1 p-1.5",
-			md: "gap-1 p-2",
 			lg: "gap-1.5 p-2.5",
-			xl: "gap-2 p-3"
+			md: "gap-1 p-2",
+			sm: "gap-1 p-1.5",
+			xl: "gap-2 p-3",
+			xs: "gap-0.5 p-1"
 		},
 		tone: {
-			surface: "border-border bg-background text-foreground",
-			sidebar: "border-sidebar-border bg-sidebar text-sidebar-foreground"
+			sidebar: "border-sidebar-border bg-sidebar text-sidebar-foreground",
+			surface: "border-border bg-background text-foreground"
 		},
 		variant: {
-			subtle: "",
+			filled: "",
 			light: "",
-			filled: ""
+			subtle: ""
 		}
-	},
-	defaultVariants: {
-		size: "md",
-		tone: "surface",
-		variant: "light"
 	}
 });
 const NavigationListContent = ({ className, size, tone, variant, ...props }) => {
@@ -178,28 +180,28 @@ const NavigationListContent = ({ className, size, tone, variant, ...props }) =>
 //#region src/ui/navigation-list/navigation-list-group.tsx
 const navigationListGroupVariants = tv({
 	base: "list-none space-y-1",
+	defaultVariants: {
+		size: "md",
+		tone: "surface",
+		variant: "light"
+	},
 	variants: {
 		size: {
-			xs: "",
-			sm: "",
-			md: "",
 			lg: "",
-			xl: ""
+			md: "",
+			sm: "",
+			xl: "",
+			xs: ""
 		},
 		tone: {
-			surface: "",
-			sidebar: ""
+			sidebar: "",
+			surface: ""
 		},
 		variant: {
-			subtle: "",
+			filled: "",
 			light: "",
-			filled: ""
+			subtle: ""
 		}
-	},
-	defaultVariants: {
-		size: "md",
-		tone: "surface",
-		variant: "light"
 	}
 });
 const NavigationListGroup = ({ className, size, tone, variant, ...props }) => {
@@ -224,28 +226,28 @@ const NavigationListGroup = ({ className, size, tone, variant, ...props }) => {
 //#region src/ui/navigation-list/navigation-list-group-content.tsx
 const navigationListGroupContentVariants = tv({
 	base: "flex list-none flex-col",
+	defaultVariants: {
+		size: "md",
+		tone: "surface",
+		variant: "light"
+	},
 	variants: {
 		size: {
-			xs: "gap-0.5",
-			sm: "gap-0.5",
-			md: "gap-1",
 			lg: "gap-1",
-			xl: "gap-1.5"
+			md: "gap-1",
+			sm: "gap-0.5",
+			xl: "gap-1.5",
+			xs: "gap-0.5"
 		},
 		tone: {
-			surface: "",
-			sidebar: ""
+			sidebar: "",
+			surface: ""
 		},
 		variant: {
-			subtle: "",
+			filled: "",
 			light: "",
-			filled: ""
+			subtle: ""
 		}
-	},
-	defaultVariants: {
-		size: "md",
-		tone: "surface",
-		variant: "light"
 	}
 });
 const NavigationListGroupContent = ({ className, size, tone, variant, ...props }) => {
@@ -269,23 +271,23 @@ const NavigationListGroupContent = ({ className, size, tone, variant, ...props }
 //#endregion
 //#region src/ui/navigation-list/navigation-list-group-label.tsx
 const navigationListGroupLabelVariants = tv({
-	base: "flex items-center rounded-md px-2 font-medium uppercase tracking-wide",
+	base: "flex items-center rounded-md px-2 font-medium tracking-wide uppercase",
+	defaultVariants: {
+		size: "md",
+		tone: "surface"
+	},
 	variants: {
 		size: {
-			xs: "h-6 text-[10px]",
-			sm: "h-7 text-[10px]",
-			md: "h-8 text-[11px]",
 			lg: "h-9 text-xs",
-			xl: "h-10 text-xs"
+			md: "h-8 text-[11px]",
+			sm: "h-7 text-[10px]",
+			xl: "h-10 text-xs",
+			xs: "h-6 text-[10px]"
 		},
 		tone: {
-			surface: "text-muted-foreground",
-			sidebar: "text-sidebar-foreground/70"
+			sidebar: "text-sidebar-foreground/70",
+			surface: "text-muted-foreground"
 		}
-	},
-	defaultVariants: {
-		size: "md",
-		tone: "surface"
 	}
 });
 const NavigationListGroupLabel = ({ className, render, size, tone, ...props }) => {
@@ -299,8 +301,8 @@ const NavigationListGroupLabel = ({ className, render, size, tone, ...props }) =
 		}), className) }, props),
 		render,
 		state: {
-			slot: "navigation-list-group-label",
 			size: resolvedSize,
+			slot: "navigation-list-group-label",
 			tone: resolvedTone
 		}
 	});
@@ -310,28 +312,28 @@ const NavigationListGroupLabel = ({ className, render, size, tone, ...props }) =
 //#region src/ui/navigation-list/navigation-list-item.tsx
 const navigationListItemVariants = tv({
 	base: "group/navigation-list-item relative list-none",
+	defaultVariants: {
+		size: "md",
+		tone: "surface",
+		variant: "light"
+	},
 	variants: {
 		size: {
-			xs: "",
-			sm: "",
-			md: "",
 			lg: "",
-			xl: ""
+			md: "",
+			sm: "",
+			xl: "",
+			xs: ""
 		},
 		tone: {
-			surface: "",
-			sidebar: ""
+			sidebar: "",
+			surface: ""
 		},
 		variant: {
-			subtle: "",
+			filled: "",
 			light: "",
-			filled: ""
+			subtle: ""
 		}
-	},
-	defaultVariants: {
-		size: "md",
-		tone: "surface",
-		variant: "light"
 	}
 });
 const NavigationListItem = ({ className, collapsible = false, opened, defaultOpened = false, onOpenedChange, disabled = false, size, tone, variant, children, ...props }) => {
@@ -397,104 +399,104 @@ const NavigationListItem = ({ className, collapsible = false, opened, defaultOpe
 //#endregion
 //#region src/ui/navigation-list/navigation-list-link.tsx
 const navigationListLinkVariants = tv({
-	base: "peer/navigation-list-link flex w-full cursor-pointer gap-2 overflow-hidden rounded-md text-left ring-offset-background outline-hidden transition-colors group-has-data-[slot=navigation-list-action]/navigation-list-item:pr-20 group-has-data-[slot=navigation-list-badge]/navigation-list-item:pr-20 focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50",
-	variants: {
-		size: {
-			xs: "min-h-6 px-1.5 text-xs [&_svg:not([class*='size-'])]:size-3",
-			sm: "min-h-7 px-2 text-xs [&_svg:not([class*='size-'])]:size-3.5",
-			md: "min-h-8 px-2 text-sm [&_svg:not([class*='size-'])]:size-4",
-			lg: "min-h-9 px-2.5 text-sm [&_svg:not([class*='size-'])]:size-4",
-			xl: "min-h-10 px-3 text-base [&_svg:not([class*='size-'])]:size-5"
-		},
-		tone: {
-			surface: "ring-ring",
-			sidebar: "ring-sidebar-ring"
-		},
-		variant: {
-			subtle: "",
-			light: "",
-			filled: ""
-		},
-		noWrap: {
-			true: "",
-			false: ""
-		},
-		hasDescription: {
-			true: "items-start py-1.5",
-			false: "items-center"
-		}
-	},
-	defaultVariants: {
-		size: "md",
-		tone: "surface",
-		variant: "light",
-		noWrap: false,
-		hasDescription: false
-	},
+	base: "peer/navigation-list-link cursor-clickable ring-offset-background flex w-full gap-2 overflow-hidden rounded-md text-left outline-hidden transition-colors group-has-data-[slot=navigation-list-action]/navigation-list-item:pr-20 group-has-data-[slot=navigation-list-badge]/navigation-list-item:pr-20 focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50",
 	compoundVariants: [
 		{
+			className: "hover:bg-muted/70 hover:text-foreground data-active:bg-muted/50 data-active:text-foreground data-active:font-medium",
 			tone: "surface",
-			variant: "subtle",
-			className: "hover:bg-muted/70 hover:text-foreground data-active:bg-muted/50 data-active:text-foreground data-active:font-medium"
+			variant: "subtle"
 		},
 		{
+			className: "hover:bg-muted hover:text-foreground data-active:bg-muted data-active:text-foreground data-active:font-medium",
 			tone: "surface",
-			variant: "light",
-			className: "hover:bg-muted hover:text-foreground data-active:bg-muted data-active:text-foreground data-active:font-medium"
+			variant: "light"
 		},
 		{
+			className: "hover:bg-muted hover:text-foreground data-active:bg-primary data-active:text-primary-foreground data-active:font-medium",
 			tone: "surface",
-			variant: "filled",
-			className: "hover:bg-muted hover:text-foreground data-active:bg-primary data-active:text-primary-foreground data-active:font-medium"
+			variant: "filled"
 		},
 		{
+			className: "hover:bg-sidebar-accent/70 hover:text-sidebar-accent-foreground data-active:bg-sidebar-accent/60 data-active:text-sidebar-accent-foreground data-active:font-medium",
 			tone: "sidebar",
-			variant: "subtle",
-			className: "hover:bg-sidebar-accent/70 hover:text-sidebar-accent-foreground data-active:bg-sidebar-accent/60 data-active:text-sidebar-accent-foreground data-active:font-medium"
+			variant: "subtle"
 		},
 		{
+			className: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-active:font-medium",
 			tone: "sidebar",
-			variant: "light",
-			className: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-active:font-medium"
+			variant: "light"
 		},
 		{
+			className: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground data-active:bg-sidebar-primary data-active:text-sidebar-primary-foreground data-active:font-medium",
 			tone: "sidebar",
-			variant: "filled",
-			className: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground data-active:bg-sidebar-primary data-active:text-sidebar-primary-foreground data-active:font-medium"
+			variant: "filled"
+		}
+	],
+	defaultVariants: {
+		hasDescription: false,
+		noWrap: false,
+		size: "md",
+		tone: "surface",
+		variant: "light"
+	},
+	variants: {
+		hasDescription: {
+			false: "items-center",
+			true: "items-start py-1.5"
+		},
+		noWrap: {
+			false: "",
+			true: ""
+		},
+		size: {
+			lg: "min-h-9 px-2.5 text-sm [&_svg:not([class*='size-'])]:size-4",
+			md: "min-h-8 px-2 text-sm [&_svg:not([class*='size-'])]:size-4",
+			sm: "min-h-7 px-2 text-xs [&_svg:not([class*='size-'])]:size-3.5",
+			xl: "min-h-10 px-3 text-base [&_svg:not([class*='size-'])]:size-5",
+			xs: "min-h-6 px-1.5 text-xs [&_svg:not([class*='size-'])]:size-3"
+		},
+		tone: {
+			sidebar: "ring-sidebar-ring",
+			surface: "ring-ring"
+		},
+		variant: {
+			filled: "",
+			light: "",
+			subtle: ""
 		}
-	]
+	}
 });
 const navigationListLinkBodyVariants = tv({
 	base: "min-w-0 flex-1",
+	defaultVariants: { noWrap: false },
 	variants: { noWrap: {
-		true: "truncate",
-		false: ""
-	} },
-	defaultVariants: { noWrap: false }
+		false: "",
+		true: "truncate"
+	} }
 });
 const navigationListLinkLabelVariants = tv({
 	base: "block",
+	defaultVariants: { noWrap: false },
 	variants: { noWrap: {
-		true: "truncate",
-		false: ""
-	} },
-	defaultVariants: { noWrap: false }
+		false: "",
+		true: "truncate"
+	} }
 });
 const navigationListLinkDescriptionVariants = tv({
 	base: "mt-0.5 block text-xs",
+	defaultVariants: {
+		noWrap: false,
+		tone: "surface"
+	},
 	variants: {
 		noWrap: {
-			true: "truncate",
-			false: ""
+			false: "",
+			true: "truncate"
 		},
 		tone: {
-			surface: "text-muted-foreground",
-			sidebar: "text-sidebar-foreground/70"
+			sidebar: "text-sidebar-foreground/70",
+			surface: "text-muted-foreground"
 		}
-	},
-	defaultVariants: {
-		noWrap: false,
-		tone: "surface"
 	}
 });
 const navigationListDefaultChevron = /* @__PURE__ */ jsx(HugeiconsIcon, {
@@ -587,14 +589,14 @@ const NavigationListLink = ({ className, render, href, active, label, descriptio
 	const renderedLinkElement = useRender({
 		defaultTagName: "button",
 		props: mergeProps({
-			className: mergedClassName,
 			"aria-current": resolvedAriaCurrent,
 			"aria-disabled": resolvedDisabled ? "true" : void 0,
+			children: composedContent,
+			className: mergedClassName,
 			disabled: isLinkLike ? void 0 : resolvedDisabled,
 			onClick: handleClick,
 			onKeyDown,
-			type: isLinkLike ? void 0 : "button",
-			children: composedContent
+			type: isLinkLike ? void 0 : "button"
 		}, props),
 		render: resolvedRender,
 		state
@@ -632,22 +634,22 @@ const NavigationListSeparator = ({ className, tone, ...props }) => {
 //#region src/ui/navigation-list/navigation-list-skeleton.tsx
 const navigationListSkeletonVariants = tv({
 	base: "flex items-center gap-2 rounded-md px-2",
+	defaultVariants: {
+		size: "md",
+		tone: "surface"
+	},
 	variants: {
 		size: {
-			xs: "h-6",
-			sm: "h-7",
-			md: "h-8",
 			lg: "h-9",
-			xl: "h-10"
+			md: "h-8",
+			sm: "h-7",
+			xl: "h-10",
+			xs: "h-6"
 		},
 		tone: {
-			surface: "",
-			sidebar: ""
+			sidebar: "",
+			surface: ""
 		}
-	},
-	defaultVariants: {
-		size: "md",
-		tone: "surface"
 	}
 });
 const NavigationListSkeleton = ({ className, showIcon = false, size, tone, ...props }) => {
@@ -677,29 +679,29 @@ const NavigationListSkeleton = ({ className, showIcon = false, size, tone, ...pr
 //#endregion
 //#region src/ui/navigation-list/navigation-list-sub.tsx
 const navigationListSubVariants = tv({
-	base: "mx-2 mt-1 flex min-w-0 list-none flex-col border-l overflow-hidden [&[hidden]:not([hidden='until-found'])]:hidden data-[open=false]:pointer-events-none data-[open=false]:mt-0 data-[open=false]:max-h-0 data-[open=false]:opacity-0 data-[open=false]:py-0 data-[open=false]:border-transparent data-[open=true]:max-h-[48rem] data-[open=true]:opacity-100",
+	base: "mx-2 mt-1 flex min-w-0 list-none flex-col overflow-hidden border-l data-[open=false]:pointer-events-none data-[open=false]:mt-0 data-[open=false]:max-h-0 data-[open=false]:border-transparent data-[open=false]:py-0 data-[open=false]:opacity-0 data-[open=true]:max-h-[48rem] data-[open=true]:opacity-100 [&[hidden]:not([hidden='until-found'])]:hidden",
+	defaultVariants: {
+		size: "md",
+		tone: "surface",
+		variant: "light"
+	},
 	variants: {
 		size: {
-			xs: "gap-0.5 px-1 py-0.5",
-			sm: "gap-0.5 px-1.5 py-0.5",
-			md: "gap-1 px-2 py-0.5",
 			lg: "gap-1 px-2.5 py-1",
-			xl: "gap-1.5 px-3 py-1"
+			md: "gap-1 px-2 py-0.5",
+			sm: "gap-0.5 px-1.5 py-0.5",
+			xl: "gap-1.5 px-3 py-1",
+			xs: "gap-0.5 px-1 py-0.5"
 		},
 		tone: {
-			surface: "border-border",
-			sidebar: "border-sidebar-border"
+			sidebar: "border-sidebar-border",
+			surface: "border-border"
 		},
 		variant: {
-			subtle: "",
+			filled: "",
 			light: "",
-			filled: ""
+			subtle: ""
 		}
-	},
-	defaultVariants: {
-		size: "md",
-		tone: "surface",
-		variant: "light"
 	}
 });
 const NavigationListSub = ({ className, keepMounted = true, size, tone, variant, ...props }) => {
@@ -748,66 +750,66 @@ const NavigationListSubItem = ({ className, ...props }) => /* @__PURE__ */ jsx("
 //#region src/ui/navigation-list/navigation-list-sub-link.tsx
 const navigationListSubLinkVariants = tv({
 	base: "flex min-w-0 items-center gap-2 overflow-hidden rounded-md text-left outline-hidden transition-colors focus-visible:ring-2 [&>span:last-child]:truncate",
-	variants: {
-		size: {
-			xs: "h-6 px-1.5 text-xs [&_svg:not([class*='size-'])]:size-3",
-			sm: "h-7 px-2 text-xs [&_svg:not([class*='size-'])]:size-3.5",
-			md: "h-8 px-2 text-sm [&_svg:not([class*='size-'])]:size-4",
-			lg: "h-9 px-2.5 text-sm [&_svg:not([class*='size-'])]:size-4",
-			xl: "h-10 px-3 text-base [&_svg:not([class*='size-'])]:size-5"
-		},
-		tone: {
-			surface: "ring-ring",
-			sidebar: "ring-sidebar-ring"
-		},
-		variant: {
-			subtle: "",
-			light: "",
-			filled: ""
-		},
-		active: {
-			true: "font-medium",
-			false: ""
-		}
-	},
-	defaultVariants: {
-		size: "md",
-		tone: "surface",
-		variant: "light",
-		active: false
-	},
 	compoundVariants: [
 		{
+			className: "hover:bg-muted/70 hover:text-foreground data-active:bg-muted/50",
 			tone: "surface",
-			variant: "subtle",
-			className: "hover:bg-muted/70 hover:text-foreground data-active:bg-muted/50"
+			variant: "subtle"
 		},
 		{
+			className: "hover:bg-muted hover:text-foreground data-active:bg-muted",
 			tone: "surface",
-			variant: "light",
-			className: "hover:bg-muted hover:text-foreground data-active:bg-muted"
+			variant: "light"
 		},
 		{
+			className: "hover:bg-muted hover:text-foreground data-active:bg-primary data-active:text-primary-foreground",
 			tone: "surface",
-			variant: "filled",
-			className: "hover:bg-muted hover:text-foreground data-active:bg-primary data-active:text-primary-foreground"
+			variant: "filled"
 		},
 		{
+			className: "hover:bg-sidebar-accent/70 hover:text-sidebar-accent-foreground data-active:bg-sidebar-accent/60 data-active:text-sidebar-accent-foreground",
 			tone: "sidebar",
-			variant: "subtle",
-			className: "hover:bg-sidebar-accent/70 hover:text-sidebar-accent-foreground data-active:bg-sidebar-accent/60 data-active:text-sidebar-accent-foreground"
+			variant: "subtle"
 		},
 		{
+			className: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground",
 			tone: "sidebar",
-			variant: "light",
-			className: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground"
+			variant: "light"
 		},
 		{
+			className: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground data-active:bg-sidebar-primary data-active:text-sidebar-primary-foreground",
 			tone: "sidebar",
-			variant: "filled",
-			className: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground data-active:bg-sidebar-primary data-active:text-sidebar-primary-foreground"
+			variant: "filled"
 		}
-	]
+	],
+	defaultVariants: {
+		active: false,
+		size: "md",
+		tone: "surface",
+		variant: "light"
+	},
+	variants: {
+		active: {
+			false: "",
+			true: "font-medium"
+		},
+		size: {
+			lg: "h-9 px-2.5 text-sm [&_svg:not([class*='size-'])]:size-4",
+			md: "h-8 px-2 text-sm [&_svg:not([class*='size-'])]:size-4",
+			sm: "h-7 px-2 text-xs [&_svg:not([class*='size-'])]:size-3.5",
+			xl: "h-10 px-3 text-base [&_svg:not([class*='size-'])]:size-5",
+			xs: "h-6 px-1.5 text-xs [&_svg:not([class*='size-'])]:size-3"
+		},
+		tone: {
+			sidebar: "ring-sidebar-ring",
+			surface: "ring-ring"
+		},
+		variant: {
+			filled: "",
+			light: "",
+			subtle: ""
+		}
+	}
 });
 const NavigationListSubLink = ({ className, render, active, size, tone, variant, ...props }) => {
 	const itemContext = useNavigationListItemContext();
@@ -842,28 +844,28 @@ const NavigationListSubLink = ({ className, render, active, size, tone, variant,
 //#region src/ui/navigation-list/navigation-list.tsx
 const navigationListVariants = tv({
 	base: "flex min-w-0 flex-col",
+	defaultVariants: {
+		size: "md",
+		tone: "surface",
+		variant: "light"
+	},
 	variants: {
 		size: {
-			xs: "gap-1",
-			sm: "gap-1",
-			md: "gap-1.5",
 			lg: "gap-2",
-			xl: "gap-2.5"
+			md: "gap-1.5",
+			sm: "gap-1",
+			xl: "gap-2.5",
+			xs: "gap-1"
 		},
 		tone: {
-			surface: "",
-			sidebar: ""
+			sidebar: "",
+			surface: ""
 		},
 		variant: {
-			subtle: "",
+			filled: "",
 			light: "",
-			filled: ""
+			subtle: ""
 		}
-	},
-	defaultVariants: {
-		size: "md",
-		tone: "surface",
-		variant: "light"
 	}
 });
 const NavigationList = ({ className, size: providedSize, tone = "surface", variant = "light", children, ...props }) => {
@@ -874,12 +876,17 @@ const NavigationList = ({ className, size: providedSize, tone = "surface", varia
 		tone,
 		variant
 	}) : className;
+	const contextValue = useMemo(() => ({
+		size,
+		tone,
+		variant
+	}), [
+		size,
+		tone,
+		variant
+	]);
 	return /* @__PURE__ */ jsx(NavigationListContext.Provider, {
-		value: {
-			size,
-			tone,
-			variant
-		},
+		value: contextValue,
 		children: /* @__PURE__ */ jsx("nav", {
 			className: cn(navigationListVariants({
 				size,