@lessly/ui 0.2.1 → 0.3.1

package/dist/index.d.ts

@@ -730,6 +730,67 @@ interface UseSidebarResult {
  */
 declare function useSidebar(options?: UseSidebarOptions): UseSidebarResult;
 
+type NavRowVariant = 'rail' | 'menu';
+interface NavRowOwnProps {
+    /** Leading glyph. Rendered in a fixed 20px box; SVGs are normalized to 18px.
+     *  A falsy value (`null`/`false`/`0`/`''`) renders nothing — there is no reserved
+     *  empty slot, so the row's content shifts left when `icon` is falsy. */
+    icon?: React$1.ReactNode;
+    label: string;
+    active?: boolean;
+    variant: NavRowVariant;
+    /** Right-aligned adornment: chevron, checkmark, action. Keeps its own size.
+     *  A falsy value (`null`/`false`/`0`/`''`) renders nothing — e.g. passing
+     *  `trailing={count}` with `count === 0` produces no adornment, not a "0". */
+    trailing?: React$1.ReactNode;
+    /** Icon-only row (collapsed rails). `label` becomes the aria-label. */
+    hideLabel?: boolean;
+}
+/** Render the single child element instead of a button, e.g. a router <Link>.
+ *  The row composes its content from props, so the child's own children are replaced —
+ *  `children` is only accepted when `asChild` is true; otherwise it is rejected at the
+ *  type level rather than silently dropped at render time. */
+type NavRowProps = NavRowOwnProps & Omit<React$1.ComponentPropsWithoutRef<'button'>, 'children'> & ({
+    asChild: true;
+    children: React$1.ReactElement;
+} | {
+    asChild?: false;
+    children?: never;
+});
+/** Nav row primitive (rail and menu variants). Composes an icon, label and trailing slot
+ *  into a button, or into a single child via `asChild` (e.g. a router `<Link>`).
+ *
+ *  Rail rows are designed for the `bg-surface` canvas: in the light theme `--hov-bg`
+ *  equals `--color-bg-elevated`/`--menu-bg` (`#ffffff`), so a rail `NavRow` placed on an
+ *  elevated/white surface has no hover contrast in light mode. This is the approved
+ *  design and the token is not expected to change — avoid using rail `NavRow` off the
+ *  `bg-surface` canvas in light theme. */
+declare const NavRow: React$1.ForwardRefExoticComponent<NavRowProps & React$1.RefAttributes<HTMLButtonElement>>;
+
+type NavSectionLabelProps = React$1.HTMLAttributes<HTMLDivElement>;
+/** Section header for nav rails and menu popups. Insets match the 0.3.0 prototype
+ *  (4px 4px 2px 8px), so it hangs slightly left of the rows it labels. */
+declare const NavSectionLabel: React$1.ForwardRefExoticComponent<NavSectionLabelProps & React$1.RefAttributes<HTMLDivElement>>;
+
+interface MenuPopupProps {
+    /** The element that opens the menu. Rendered via PopoverTrigger asChild. */
+    trigger: React$1.ReactNode;
+    children: React$1.ReactNode;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Which way the panel opens from its trigger. Default 'down'. */
+    direction?: 'up' | 'down';
+    align?: 'start' | 'center' | 'end';
+    /** Gap between trigger and panel, in px. Default 6 (prototype). */
+    sideOffset?: number;
+    className?: string;
+}
+/** Popup menu shell. Wraps the repo's Radix Popover, so outside-click close, focus
+ *  management and portalling come from the primitive rather than being re-implemented. */
+declare function MenuPopup({ trigger, children, open, defaultOpen, onOpenChange, direction, align, sideOffset, className, }: MenuPopupProps): React$1.JSX.Element;
+declare const MenuDivider: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+
 interface NavItem {
     label: string;
     href: string;
@@ -788,4 +849,4 @@ declare function AppShell({ sidebar, topBar, children, className }: AppShellProp
 /** Alias of AppShell — reads better in app router files. */
 declare const AuthenticatedLayout: typeof AppShell;
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AppShell, type AppShellProps, AppSidebar, type AppSidebarProps, AspectRatio, AuthenticatedLayout, Avatar, AvatarFallback, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ConfirmDialog, type ConfirmDialogProps, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, type CopyButtonProps, DatePicker, type DatePickerProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DocsLink, type DocsLinkProps, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, ExtensionIcon, type ExtensionIconProps, ExtensionLink, type ExtensionLinkProps, type ExtensionLinkUiMode, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, HoverCard, HoverCardContent, HoverCardTrigger, InlineError, type InlineErrorProps, Input, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Label, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, type NavItem, type NavLinkComponent, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, ScrollArea, ScrollBar, SectionIntro, Select, type SelectOption, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarNav, SidebarNavLink, type SidebarNavLinkProps, type SidebarNavProps, Skeleton, Slider, StatCard, type StatCardProps, StatusDot, type StatusDotProps, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type TextareaProps, ThemeToggle, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type UseSidebarOptions, type UseSidebarResult, UserMenu, type UserMenuItem, type UserMenuProps, type UserMenuUser, alertVariants, badgeVariants, buttonVariants, cn, isKnownExtensionIcon, navigationMenuTriggerStyle, statusDotVariants, toggleVariants, useCarousel, useFormField, useIsMobile, useSidebar, useTheme };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AppShell, type AppShellProps, AppSidebar, type AppSidebarProps, AspectRatio, AuthenticatedLayout, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonProps, Calendar, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, type CarouselApi, CarouselContent, type CarouselContextProps, CarouselItem, CarouselNext, type CarouselOptions, type CarouselPlugin, CarouselPrevious, type CarouselProps, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ConfirmDialog, type ConfirmDialogProps, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, type CopyButtonProps, DatePicker, type DatePickerProps, type DeltaDirection, type DeltaTone, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DocsLink, type DocsLinkProps, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, ExtensionIcon, type ExtensionIconProps, ExtensionLink, type ExtensionLinkProps, type ExtensionLinkUiMode, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, HoverCard, HoverCardContent, HoverCardTrigger, InlineError, type InlineErrorProps, Input, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputProps, Label, MenuDivider, MenuPopup, type MenuPopupProps, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, type NavItem, type NavLinkComponent, NavRow, type NavRowProps, type NavRowVariant, NavSectionLabel, type NavSectionLabelProps, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, type PaginationLinkProps, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, type ResolvedTheme, ScrollArea, ScrollBar, SectionIntro, type SectionIntroProps, Select, type SelectOption, type SelectProps, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarNav, SidebarNavLink, type SidebarNavLinkProps, type SidebarNavProps, Skeleton, Slider, StatCard, type StatCardProps, StatusDot, type StatusDotProps, Switch, type SwitchProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type TextareaProps, type Theme, ThemeToggle, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type UseSidebarOptions, type UseSidebarResult, UserMenu, type UserMenuItem, type UserMenuProps, type UserMenuUser, alertVariants, badgeVariants, buttonVariants, cn, isKnownExtensionIcon, navigationMenuTriggerStyle, statusDotVariants, toggleVariants, useCarousel, useFormField, useIsMobile, useSidebar, useTheme };

package/dist/index.js

@@ -1878,6 +1878,10 @@ NavigationMenuIndicator.displayName = NavigationMenuPrimitive.Indicator.displayN
 // src/hooks/useTheme.ts
 import { useEffect, useState, useCallback } from "react";
 var STORAGE_KEY = "lessly_theme";
+var THEMES = ["light", "dark", "system"];
+function parseStoredTheme(stored) {
+  return THEMES.includes(stored) ? stored : "system";
+}
 function getSystemTheme() {
   if (typeof window === "undefined") return "dark";
   return window.matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark";
@@ -1896,10 +1900,9 @@ function applyTheme(resolved) {
   }
 }
 function useTheme() {
-  const [theme, setThemeState] = useState(() => {
-    const stored = localStorage.getItem(STORAGE_KEY);
-    return stored || "system";
-  });
+  const [theme, setThemeState] = useState(
+    () => parseStoredTheme(localStorage.getItem(STORAGE_KEY))
+  );
   const resolvedTheme = resolveTheme(theme);
   const setTheme = useCallback((newTheme) => {
     setThemeState(newTheme);
@@ -2632,7 +2635,7 @@ function UserMenu({ user, items, collapsed = false, align = "end" }) {
     "button",
     {
       type: "button",
-      className: "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left transition-colors hover:bg-bg-secondary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus",
+      className: "flex w-full items-center gap-2.5 rounded-xl px-2.5 py-1.5 text-left transition-colors hover:bg-[var(--hov-bg)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus",
       children: [
         avatar,
         /* @__PURE__ */ jsxs25("span", { className: "min-w-0 flex-1", children: [
@@ -2649,30 +2652,41 @@ function UserMenu({ user, items, collapsed = false, align = "end" }) {
       /* @__PURE__ */ jsx52(TooltipTrigger, { asChild: true, children: menuTrigger }),
       /* @__PURE__ */ jsx52(TooltipContent, { side: "right", children: user.name })
     ] }) }) : menuTrigger,
-    /* @__PURE__ */ jsxs25(DropdownMenuContent, { align, className: "w-56", children: [
-      /* @__PURE__ */ jsxs25(DropdownMenuLabel, { children: [
-        /* @__PURE__ */ jsx52("span", { className: "block truncate text-sm font-medium text-text-primary", children: user.name }),
-        user.email && /* @__PURE__ */ jsx52("span", { className: "block truncate text-xs font-normal text-text-tertiary", children: user.email })
-      ] }),
-      /* @__PURE__ */ jsx52(DropdownMenuSeparator, {}),
-      items.map((item, i) => {
-        const Icon = item.icon;
-        const content = /* @__PURE__ */ jsxs25(Fragment, { children: [
-          Icon && /* @__PURE__ */ jsx52(Icon, { className: "size-4", "aria-hidden": "true" }),
-          item.label
-        ] });
-        return /* @__PURE__ */ jsx52(
-          DropdownMenuItem,
-          {
-            onSelect: item.onSelect,
-            className: cn("gap-2", item.destructive && "text-text-danger focus:text-text-danger"),
-            asChild: Boolean(item.href),
-            children: item.href ? /* @__PURE__ */ jsx52("a", { href: item.href, children: content }) : content
-          },
-          `${item.label}-${i}`
-        );
-      })
-    ] })
+    /* @__PURE__ */ jsxs25(
+      DropdownMenuContent,
+      {
+        align,
+        sideOffset: 6,
+        className: "flex w-56 flex-col gap-px rounded-xl border-border-subtle bg-[var(--menu-bg)] p-1 shadow-(--menu-shadow)",
+        children: [
+          /* @__PURE__ */ jsxs25(DropdownMenuLabel, { className: "px-2 pt-1.5 pb-1 text-xs font-medium text-text-tertiary", children: [
+            /* @__PURE__ */ jsx52("span", { className: "block truncate text-sm font-medium text-text-primary", children: user.name }),
+            user.email && /* @__PURE__ */ jsx52("span", { className: "block truncate text-xs font-normal text-text-tertiary", children: user.email })
+          ] }),
+          /* @__PURE__ */ jsx52(DropdownMenuSeparator, { className: "mx-0 shrink-0 bg-border-subtle" }),
+          items.map((item, i) => {
+            const Icon = item.icon;
+            const content = /* @__PURE__ */ jsxs25(Fragment, { children: [
+              Icon && /* @__PURE__ */ jsx52(Icon, { className: "size-4", "aria-hidden": "true" }),
+              item.label
+            ] });
+            return /* @__PURE__ */ jsx52(
+              DropdownMenuItem,
+              {
+                onSelect: item.onSelect,
+                className: cn(
+                  "gap-2 rounded-md px-2 py-1.5 text-sm font-medium text-text-secondary focus:bg-[var(--menu-hov)] focus:text-text-primary",
+                  item.destructive && "text-text-danger focus:text-text-danger"
+                ),
+                asChild: Boolean(item.href),
+                children: item.href ? /* @__PURE__ */ jsx52("a", { href: item.href, children: content }) : content
+              },
+              `${item.label}-${i}`
+            );
+          })
+        ]
+      }
+    )
   ] });
   return menu;
 }
@@ -2770,9 +2784,113 @@ function useSidebar(options = {}) {
   return { collapsed, setCollapsed, toggle };
 }
 
+// src/components/nav-row.tsx
+import * as React47 from "react";
+import { Slot as Slot4 } from "@radix-ui/react-slot";
+import { Fragment as Fragment2, jsx as jsx55, jsxs as jsxs26 } from "react/jsx-runtime";
+var base = "flex w-full items-center text-left text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus";
+var shape = {
+  rail: "gap-[14px] rounded-xl px-2.5 py-2",
+  menu: "gap-2 rounded-md px-2 py-1.5"
+};
+var state = {
+  rail: {
+    idle: "font-medium text-text-secondary hover:bg-[var(--hov-bg)] hover:text-text-primary",
+    active: "bg-bg-brand-subtle font-semibold text-text-brand"
+  },
+  menu: {
+    idle: "font-medium text-text-secondary hover:bg-[var(--menu-hov)]",
+    active: "font-semibold text-text-brand hover:bg-[var(--menu-hov)]"
+  }
+};
+var NavRow = React47.forwardRef(function NavRow2({ icon, label, active = false, variant, trailing, hideLabel = false, asChild = false, className, children, ...props }, ref) {
+  const content = /* @__PURE__ */ jsxs26(Fragment2, { children: [
+    icon && /* @__PURE__ */ jsx55(
+      "span",
+      {
+        className: "flex size-5 shrink-0 items-center justify-center [&_svg]:size-[18px]",
+        "aria-hidden": "true",
+        children: icon
+      }
+    ),
+    !hideLabel && /* @__PURE__ */ jsx55("span", { className: "min-w-0 flex-1 truncate", children: label }),
+    trailing && /* @__PURE__ */ jsx55("span", { className: "flex shrink-0 items-center", children: trailing })
+  ] });
+  const classes = cn(base, shape[variant], state[variant][active ? "active" : "idle"], className);
+  if (asChild) {
+    const child = React47.Children.only(children);
+    return /* @__PURE__ */ jsx55(Slot4, { ref, className: classes, "aria-label": hideLabel ? label : void 0, ...props, children: React47.cloneElement(child, void 0, content) });
+  }
+  return /* @__PURE__ */ jsx55("button", { ref, type: "button", className: classes, "aria-label": hideLabel ? label : void 0, ...props, children: content });
+});
+NavRow.displayName = "NavRow";
+
+// src/components/nav-section-label.tsx
+import * as React48 from "react";
+import { jsx as jsx56 } from "react/jsx-runtime";
+var NavSectionLabel = React48.forwardRef(
+  function NavSectionLabel2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx56(
+      "div",
+      {
+        ref,
+        className: cn("pt-1 pr-1 pb-0.5 pl-2 text-xs font-medium text-text-tertiary", className),
+        ...props
+      }
+    );
+  }
+);
+NavSectionLabel.displayName = "NavSectionLabel";
+
+// src/components/menu-popup.tsx
+import * as React49 from "react";
+import { jsx as jsx57, jsxs as jsxs27 } from "react/jsx-runtime";
+function MenuPopup({
+  trigger,
+  children,
+  open,
+  defaultOpen,
+  onOpenChange,
+  direction = "down",
+  align = "start",
+  sideOffset = 6,
+  className
+}) {
+  return /* @__PURE__ */ jsxs27(Popover, { open, defaultOpen, onOpenChange, children: [
+    /* @__PURE__ */ jsx57(PopoverTrigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsx57(
+      PopoverContent,
+      {
+        side: direction === "up" ? "top" : "bottom",
+        align,
+        sideOffset,
+        className: cn(
+          "flex w-56 flex-col gap-px rounded-xl border border-border-subtle bg-[var(--menu-bg)] p-1 shadow-(--menu-shadow)",
+          className
+        ),
+        children
+      }
+    )
+  ] });
+}
+var MenuDivider = React49.forwardRef(
+  function MenuDivider2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx57(
+      "div",
+      {
+        ref,
+        role: "separator",
+        className: cn("my-1 h-px shrink-0 bg-border-subtle", className),
+        ...props
+      }
+    );
+  }
+);
+MenuDivider.displayName = "MenuDivider";
+
 // src/components/sidebar-nav.tsx
 import { Link as Link3, useLocation } from "react-router";
-import { jsx as jsx55, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs28 } from "react/jsx-runtime";
 function isActivePath(pathname, full, exact) {
   if (exact) return pathname === full;
   return pathname === full || pathname.startsWith(`${full}/`);
@@ -2788,28 +2906,23 @@ function SidebarNavLink({
   const Comp = LinkComponent ?? Link3;
   const to = `${basePath}${item.href}`;
   const Icon = item.icon;
-  const link = /* @__PURE__ */ jsxs26(
-    Comp,
+  const link = /* @__PURE__ */ jsx58(
+    NavRow,
     {
-      to,
-      className: cn(
-        "flex items-center rounded-lg text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus",
-        collapsed ? "size-9 justify-center" : "w-full gap-2.5 px-2.5 py-[7px]",
-        active ? "bg-bg-secondary font-medium text-text-brand" : "text-text-secondary hover:bg-bg-secondary hover:text-text-primary",
-        className
-      ),
-      "aria-current": active ? "page" : void 0,
-      "aria-label": collapsed ? item.label : void 0,
-      children: [
-        Icon && /* @__PURE__ */ jsx55(Icon, { className: "size-[18px] shrink-0", "aria-hidden": "true" }),
-        !collapsed && item.label
-      ]
+      variant: "rail",
+      active,
+      label: item.label,
+      hideLabel: collapsed,
+      icon: Icon ? /* @__PURE__ */ jsx58(Icon, { "aria-hidden": "true" }) : void 0,
+      className: cn(collapsed && "size-9 justify-center px-0 py-0", className),
+      asChild: true,
+      children: /* @__PURE__ */ jsx58(Comp, { to, "aria-current": active ? "page" : void 0 })
     }
   );
   if (!collapsed) return link;
-  return /* @__PURE__ */ jsxs26(Tooltip, { children: [
-    /* @__PURE__ */ jsx55(TooltipTrigger, { asChild: true, children: link }),
-    /* @__PURE__ */ jsx55(TooltipContent, { side: "right", children: item.label })
+  return /* @__PURE__ */ jsxs28(Tooltip, { children: [
+    /* @__PURE__ */ jsx58(TooltipTrigger, { asChild: true, children: link }),
+    /* @__PURE__ */ jsx58(TooltipContent, { side: "right", children: item.label })
   ] });
 }
 function SidebarNav({
@@ -2821,18 +2934,18 @@ function SidebarNav({
   className
 }) {
   const { pathname } = useLocation();
-  const nav = /* @__PURE__ */ jsx55(
+  const nav = /* @__PURE__ */ jsx58(
     "nav",
     {
       className: cn(
         "flex flex-col gap-0.5",
-        collapsed ? "items-center px-1" : "px-2",
+        collapsed ? "items-center px-1" : "px-3",
         className
       ),
       children: items.map((item) => {
         const full = `${basePath}${item.href}`;
         const active = isItemActive ? isItemActive(item, pathname) : isActivePath(pathname, full, item.exact);
-        return /* @__PURE__ */ jsx55(
+        return /* @__PURE__ */ jsx58(
           SidebarNavLink,
           {
             item,
@@ -2846,12 +2959,12 @@ function SidebarNav({
       })
     }
   );
-  return collapsed ? /* @__PURE__ */ jsx55(TooltipProvider, { children: nav }) : nav;
+  return collapsed ? /* @__PURE__ */ jsx58(TooltipProvider, { children: nav }) : nav;
 }
 
 // src/components/app-sidebar.tsx
 import { PanelLeft } from "lucide-react";
-import { jsx as jsx56, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx59, jsxs as jsxs29 } from "react/jsx-runtime";
 function AppSidebar({
   items,
   logo,
@@ -2871,7 +2984,7 @@ function AppSidebar({
     defaultCollapsed,
     onCollapsedChange
   });
-  return /* @__PURE__ */ jsxs27(
+  return /* @__PURE__ */ jsxs29(
     "aside",
     {
       "data-collapsed": collapsed,
@@ -2881,76 +2994,76 @@ function AppSidebar({
         className
       ),
       children: [
-        collapsed ? /* @__PURE__ */ jsx56("div", { className: "flex justify-center border-b border-border-subtle p-2", children: header ?? /* @__PURE__ */ jsxs27("div", { className: "group relative flex size-8 items-center justify-center", children: [
-          /* @__PURE__ */ jsx56("span", { className: "pointer-events-none transition-opacity group-hover:opacity-0 group-focus-within:opacity-0", children: logoCollapsed ?? logo }),
-          /* @__PURE__ */ jsx56(
+        collapsed ? /* @__PURE__ */ jsx59("div", { className: "flex justify-center border-b border-border-subtle p-2", children: header ?? /* @__PURE__ */ jsxs29("div", { className: "group relative flex size-8 items-center justify-center", children: [
+          /* @__PURE__ */ jsx59("span", { className: "pointer-events-none transition-opacity group-hover:opacity-0 group-focus-within:opacity-0", children: logoCollapsed ?? logo }),
+          /* @__PURE__ */ jsx59(
             "button",
             {
               type: "button",
               onClick: toggle,
               "aria-label": "Expand sidebar",
               "aria-expanded": false,
-              className: "absolute inset-0 flex items-center justify-center rounded-md text-text-secondary opacity-0 transition-opacity hover:bg-bg-secondary focus-visible:outline-none focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-border-focus group-hover:opacity-100 group-focus-within:opacity-100",
-              children: /* @__PURE__ */ jsx56(PanelLeft, { className: "size-4", "aria-hidden": "true" })
+              className: "absolute inset-0 flex items-center justify-center rounded-md text-text-secondary opacity-0 transition-opacity hover:bg-[var(--hov-bg)] focus-visible:outline-none focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-border-focus group-hover:opacity-100 group-focus-within:opacity-100",
+              children: /* @__PURE__ */ jsx59(PanelLeft, { className: "size-4", "aria-hidden": "true" })
             }
           )
-        ] }) }) : /* @__PURE__ */ jsxs27("div", { className: "flex items-center justify-between border-b border-border-subtle p-2", children: [
+        ] }) }) : /* @__PURE__ */ jsxs29("div", { className: "flex items-center justify-between border-b border-border-subtle p-3", children: [
           header ?? logo,
-          /* @__PURE__ */ jsx56(
+          /* @__PURE__ */ jsx59(
             "button",
             {
               type: "button",
               onClick: toggle,
               "aria-label": "Collapse sidebar",
               "aria-expanded": true,
-              className: "flex size-6 items-center justify-center rounded-md text-text-secondary transition-colors hover:bg-bg-secondary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus",
-              children: /* @__PURE__ */ jsx56(PanelLeft, { className: "size-4", "aria-hidden": "true" })
+              className: "flex size-6 items-center justify-center rounded-md text-text-secondary transition-colors hover:bg-[var(--hov-bg)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus",
+              children: /* @__PURE__ */ jsx59(PanelLeft, { className: "size-4", "aria-hidden": "true" })
             }
           )
         ] }),
-        /* @__PURE__ */ jsx56("div", { className: "flex-1 overflow-y-auto overflow-x-hidden py-2", children: /* @__PURE__ */ jsx56(SidebarNav, { items, collapsed, basePath, LinkComponent, isItemActive }) }),
-        footer && /* @__PURE__ */ jsx56("div", { className: cn("border-t border-border-subtle", collapsed ? "px-1 py-2" : "px-2 py-2"), children: footer })
+        /* @__PURE__ */ jsx59("div", { className: "flex-1 overflow-y-auto overflow-x-hidden pt-3 pb-2", children: /* @__PURE__ */ jsx59(SidebarNav, { items, collapsed, basePath, LinkComponent, isItemActive }) }),
+        footer && /* @__PURE__ */ jsx59("div", { className: cn("border-t border-border-subtle", collapsed ? "px-1 py-2" : "px-3 py-3"), children: footer })
       ]
     }
   );
 }
 
 // src/components/app-shell.tsx
-import * as React47 from "react";
+import * as React50 from "react";
 import { Menu as Menu2 } from "lucide-react";
 import { useLocation as useLocation2 } from "react-router";
-import { jsx as jsx57, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx60, jsxs as jsxs30 } from "react/jsx-runtime";
 function expandedSidebar(sidebar) {
-  return React47.isValidElement(sidebar) ? React47.cloneElement(sidebar, { collapsed: false }) : sidebar;
+  return React50.isValidElement(sidebar) ? React50.cloneElement(sidebar, { collapsed: false }) : sidebar;
 }
 function AppShell({ sidebar, topBar, children, className }) {
   const { pathname } = useLocation2();
-  const [mobileOpen, setMobileOpen] = React47.useState(false);
-  React47.useEffect(() => {
+  const [mobileOpen, setMobileOpen] = React50.useState(false);
+  React50.useEffect(() => {
     setMobileOpen(false);
   }, [pathname]);
   const isMobile = useIsMobile();
   if (isMobile) {
-    return /* @__PURE__ */ jsx57(TooltipProvider, { children: /* @__PURE__ */ jsxs28("div", { className: cn("flex min-h-screen flex-col bg-bg-sunken", className), children: [
-      /* @__PURE__ */ jsxs28("header", { className: "flex shrink-0 items-center justify-between border-b border-border-subtle bg-bg-surface px-4 py-3", children: [
-        /* @__PURE__ */ jsxs28(Sheet, { open: mobileOpen, onOpenChange: setMobileOpen, children: [
-          /* @__PURE__ */ jsx57(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsx57(Button, { variant: "ghost", size: "icon", className: "size-8 text-text-secondary", "aria-label": "Open navigation", children: /* @__PURE__ */ jsx57(Menu2, { className: "size-5" }) }) }),
-          /* @__PURE__ */ jsxs28(SheetContent, { side: "left", className: "w-[240px] bg-bg-surface p-0", children: [
-            /* @__PURE__ */ jsx57(SheetTitle, { className: "sr-only", children: "Navigation" }),
-            /* @__PURE__ */ jsx57(SheetDescription, { className: "sr-only", children: "Application navigation menu" }),
+    return /* @__PURE__ */ jsx60(TooltipProvider, { children: /* @__PURE__ */ jsxs30("div", { className: cn("flex min-h-screen flex-col bg-bg-sunken", className), children: [
+      /* @__PURE__ */ jsxs30("header", { className: "flex shrink-0 items-center justify-between border-b border-border-subtle bg-bg-surface px-4 py-3", children: [
+        /* @__PURE__ */ jsxs30(Sheet, { open: mobileOpen, onOpenChange: setMobileOpen, children: [
+          /* @__PURE__ */ jsx60(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsx60(Button, { variant: "ghost", size: "icon", className: "size-8 text-text-secondary", "aria-label": "Open navigation", children: /* @__PURE__ */ jsx60(Menu2, { className: "size-5" }) }) }),
+          /* @__PURE__ */ jsxs30(SheetContent, { side: "left", className: "w-[240px] bg-bg-surface p-0", children: [
+            /* @__PURE__ */ jsx60(SheetTitle, { className: "sr-only", children: "Navigation" }),
+            /* @__PURE__ */ jsx60(SheetDescription, { className: "sr-only", children: "Application navigation menu" }),
             expandedSidebar(sidebar)
           ] })
         ] }),
-        /* @__PURE__ */ jsx57("div", { className: "flex items-center gap-2", children: topBar })
+        /* @__PURE__ */ jsx60("div", { className: "flex items-center gap-2", children: topBar })
       ] }),
-      /* @__PURE__ */ jsx57("main", { className: "flex-1 overflow-auto p-4", children })
+      /* @__PURE__ */ jsx60("main", { className: "flex-1 overflow-auto p-4", children })
     ] }) });
   }
-  return /* @__PURE__ */ jsx57(TooltipProvider, { children: /* @__PURE__ */ jsxs28("div", { className: cn("flex min-h-screen gap-3 bg-bg-sunken p-6", className), children: [
-    /* @__PURE__ */ jsx57("div", { className: "sticky top-6 h-[calc(100vh-48px)] shrink-0", children: sidebar }),
-    /* @__PURE__ */ jsxs28("div", { className: "flex min-w-0 flex-1 flex-col overflow-hidden rounded-2xl border border-border-subtle bg-bg-surface", children: [
-      /* @__PURE__ */ jsx57("div", { className: "flex min-h-[52px] shrink-0 items-center justify-end gap-2 border-b border-border-subtle px-5", children: topBar }),
-      /* @__PURE__ */ jsx57("main", { className: "flex-1 overflow-auto px-7 py-8", children })
+  return /* @__PURE__ */ jsx60(TooltipProvider, { children: /* @__PURE__ */ jsxs30("div", { className: cn("flex min-h-screen gap-2 bg-bg-sunken p-4", className), children: [
+    /* @__PURE__ */ jsx60("div", { className: "sticky top-4 h-[calc(100vh-32px)] shrink-0", children: sidebar }),
+    /* @__PURE__ */ jsxs30("div", { className: "flex min-w-0 flex-1 flex-col overflow-hidden rounded-2xl border border-border-subtle bg-bg-surface", children: [
+      /* @__PURE__ */ jsx60("div", { className: "flex min-h-[52px] shrink-0 items-center justify-end gap-2 border-b border-border-subtle px-5", children: topBar }),
+      /* @__PURE__ */ jsx60("main", { className: "flex-1 overflow-auto px-7 py-8", children })
     ] })
   ] }) });
 }
@@ -3089,6 +3202,8 @@ export {
   InputOTPSeparator,
   InputOTPSlot,
   Label2 as Label,
+  MenuDivider,
+  MenuPopup,
   Menubar,
   MenubarCheckboxItem,
   MenubarContent,
@@ -3105,6 +3220,8 @@ export {
   MenubarSubContent,
   MenubarSubTrigger,
   MenubarTrigger,
+  NavRow,
+  NavSectionLabel,
   NavigationMenu,
   NavigationMenuContent,
   NavigationMenuIndicator,

package/dist/styles.css

@@ -107,6 +107,14 @@
   --color-border-success: #1da456;
   --color-border-warning: #b3780e;
   --color-border-danger: #e82020;
+  /* === Nav / menu surfaces (0.3.0 sidebar) === */
+  /* --menu-shadow is a literal: this package ships no --shadow-* variables (shadows live
+     in the generated Tailwind preset's boxShadow map), so var(--shadow-md) would resolve
+     to nothing. Value mirrors the 0.3.0 prototype DS's own --shadow-md. */
+  --hov-bg: color-mix(in srgb, var(--color-text-primary) 7%, transparent);
+  --menu-bg: var(--color-bg-elevated);
+  --menu-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
+  --menu-hov: var(--hov-bg);
 }
 
 .light {
@@ -116,7 +124,7 @@
   --color-bg-elevated: #ffffff;
   --color-bg-sunken: #e1e2e4;
   --color-bg-brand: #06297d;
-  --color-bg-brand-subtle: #eaeef4;
+  --color-bg-brand-subtle: #e4ecfe;
   --color-bg-brand-bright: #165ff2;
   --color-bg-brand-hover: #05226a;
   --color-bg-success: #13703c;
@@ -137,7 +145,7 @@
   --color-text-on-success: #f6f7f7;
   --color-text-on-warning: #08090c;
   --color-text-on-danger: #f6f7f7;
-  --color-text-brand: #0940b8;
+  --color-text-brand: #0b4cd5;
   --color-text-success: #13703c;
   --color-text-warning: #7a5409;
   --color-text-danger: #94120e;
@@ -146,7 +154,7 @@
   --color-icon-primary: #252936;
   --color-icon-secondary: #535a6e;
   --color-icon-disabled: #8a91a7;
-  --color-icon-brand: #0940b8;
+  --color-icon-brand: #165ff2;
   --color-icon-success: #13703c;
   --color-icon-warning: #7a5409;
   --color-icon-danger: #94120e;
@@ -158,6 +166,11 @@
   --color-border-success: #188a49;
   --color-border-warning: #b3780e;
   --color-border-danger: #e82020;
+  /* Light keeps opaque plates: a translucent text-mix would vanish on a white menu. */
+  --hov-bg: #ffffff;
+  --menu-bg: #ffffff;
+  --menu-shadow: 0 12px 32px rgba(16, 24, 40, 0.1), 0 2px 8px rgba(16, 24, 40, 0.06);
+  --menu-hov: #f2f4f7;
 }
 
 /* === Base === */

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@lessly/ui",
-  "version": "0.2.1",
+  "version": "0.3.1",
   "description": "Lessly design system — shared UI primitives, tokens, and theme",
   "type": "module",
+  "packageManager": "pnpm@10.30.3",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -26,6 +27,20 @@
   "engines": {
     "node": ">=20"
   },
+  "scripts": {
+    "build": "tsup && node scripts/build-styles.mjs",
+    "prepare": "pnpm build",
+    "test": "vitest run",
+    "type-check": "tsc --noEmit",
+    "lint": "eslint .",
+    "prepublishOnly": "pnpm build && pnpm test && node scripts/check-package-contract.mjs",
+    "storybook": "storybook dev -p 6006 --no-open",
+    "build-storybook": "storybook build",
+    "changeset": "changeset",
+    "release:version": "changeset version && node scripts/stamp-changelog-date.mjs",
+    "release:publish": "node scripts/release-publish.mjs",
+    "release:tag": "changeset tag"
+  },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public"
@@ -101,17 +116,5 @@
     "typescript-eslint": "^8.63.0",
     "vite": "^5.4.21",
     "vitest": "^3.0.5"
-  },
-  "scripts": {
-    "build": "tsup && node scripts/build-styles.mjs",
-    "test": "vitest run",
-    "type-check": "tsc --noEmit",
-    "lint": "eslint .",
-    "storybook": "storybook dev -p 6006 --no-open",
-    "build-storybook": "storybook build",
-    "changeset": "changeset",
-    "release:version": "changeset version && node scripts/stamp-changelog-date.mjs",
-    "release:publish": "node scripts/release-publish.mjs",
-    "release:tag": "changeset tag"
   }
-}
+}