@lessly/ui 0.3.0 → 0.3.2

package/dist/index.d.ts

@@ -760,11 +760,10 @@ type NavRowProps = NavRowOwnProps & Omit<React$1.ComponentPropsWithoutRef<'butto
 /** 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. */
+ *  Rail rows are designed for the `bg-surface` canvas. In the light theme `--hov-bg` is an
+ *  opaque `#ffffff` plate, so a rail `NavRow` has no hover contrast on a surface that is
+ *  already white — notably a `--menu-bg` plate. Use the `menu` variant there; its
+ *  `--menu-hov` is tuned for that surface. */
 declare const NavRow: React$1.ForwardRefExoticComponent<NavRowProps & React$1.RefAttributes<HTMLButtonElement>>;
 
 type NavSectionLabelProps = React$1.HTMLAttributes<HTMLDivElement>;
@@ -849,4 +848,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, 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, 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);

package/dist/styles.css

@@ -59,13 +59,13 @@
   --spacing: 0.25rem;
 }
 :root {
-  --color-bg-primary: #0e1015;
+  --color-bg-primary: #191b24;
   --color-bg-secondary: #12141b;
-  --color-bg-surface: #191b24;
-  --color-bg-elevated: #1f222d;
-  --color-bg-sunken: #08090c;
+  --color-bg-surface: #1f222d;
+  --color-bg-elevated: #252936;
+  --color-bg-sunken: #0e1015;
   --color-bg-brand: #06297d;
-  --color-bg-brand-subtle: #080d1b;
+  --color-bg-brand-subtle: #1f2541;
   --color-bg-brand-bright: #165ff2;
   --color-bg-brand-hover: #08349b;
   --color-bg-success: #13703c;
@@ -79,7 +79,7 @@
   --color-bg-rose-subtle: #1a090b;
   --color-text-primary: #eeeff0;
   --color-text-secondary: #a5a9b5;
-  --color-text-tertiary: #737c95;
+  --color-text-tertiary: #8a93a8;
   --color-text-disabled: #60687f;
   --color-text-inverse: #0e1015;
   --color-text-on-brand: #f6f7f7;
@@ -99,7 +99,7 @@
   --color-icon-success: #2eda76;
   --color-icon-warning: #efb042;
   --color-icon-danger: #f06a6a;
-  --color-border-subtle: #1f222d;
+  --color-border-subtle: #2a2e3b;
   --color-border-default: #60687f;
   --color-border-strong: #737c95;
   --color-border-brand: #165ff2;
@@ -118,10 +118,10 @@
 }
 
 .light {
-  --color-bg-primary: #e1e2e4;
+  --color-bg-primary: #f6f7f7;
   --color-bg-secondary: #eeeff0;
-  --color-bg-surface: #f6f7f7;
-  --color-bg-elevated: #ffffff;
+  --color-bg-surface: #f2f3f4;
+  --color-bg-elevated: #edeef0;
   --color-bg-sunken: #e1e2e4;
   --color-bg-brand: #06297d;
   --color-bg-brand-subtle: #e4ecfe;

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@lessly/ui",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "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"
   }
-}
+}