@lessly/ui 1.1.0 → 1.2.0

package/dist/index.d.ts

@@ -2437,15 +2437,17 @@ declare function SidebarNav({ items, collapsed, basePath, LinkComponent, isItemA
 interface AppSidebarProps {
     items: NavItem[];
     /** Expanded-slot mark/wordmark, rendered when `header` is absent. Also the collapsed-rail
-     *  fallback when `logoCollapsed` isn't given — see `logoCollapsed`. */
+     *  fallback when `logoCollapsed` isn't given, on a rail that isn't `collapsible` — see
+     *  `logoCollapsed`. */
     logo?: React$1.ReactNode;
-    /** Collapsed-rail identity — a small mark, shown overlaid by the pin on hover/focus when
-     *  `collapsible`. A collapsible rail should supply this (or `logo`): `header` is expanded-only
-     *  and is never read while collapsed, so without a mark the collapsed rail shows just the pin. */
+    /** Collapsed-rail identity — a small mark, for a rail that cannot be expanded from inside it.
+     *  A `collapsible` rail shows the pin here instead and never reads this: the 52px rail holds
+     *  one box, and the way back to expanded is what it holds. */
     logoCollapsed?: React$1.ReactNode;
     /** Identity slot above the rail — e.g. an <OrgProductSwitcher/> (#266). Falls back to `logo`.
      *  Expanded-only: rendering it in the 52px collapsed rail would overflow, so the collapsed
-     *  branch never reads it — supply `logoCollapsed` (or `logo`) for that state instead. */
+     *  branch never reads it. What stands in depends on `collapsible` — the pin when it is set,
+     *  `logoCollapsed ?? logo` when it is not. */
     header?: React$1.ReactNode;
     /** Account slot below the rail — e.g. a <UserMenu/>. Its divider renders only with it. */
     footer?: React$1.ReactNode;

package/dist/index.js

@@ -12,6 +12,7 @@ var twMerge = extendTailwindMerge((config) => {
       { [group.replace("border-w", "border")]: TOKEN_BORDER_WIDTHS }
     ];
   }
+  config.conflictingClassGroups["font-size"] = [];
   return config;
 });
 function cn(...inputs) {
@@ -592,13 +593,14 @@ Label2.displayName = LabelPrimitive.Root.displayName;
 // src/components/option-card.tsx
 import * as React9 from "react";
 import { cva as cva3 } from "class-variance-authority";
+import { Check as Check2 } from "lucide-react";
 import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 var optionCardVariants = cva3(
   "flex w-full items-center gap-3 rounded-lg border border-border-default p-3 text-left transition-colors hover:bg-bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus",
   {
     variants: {
       selected: {
-        true: "ring-2 ring-border-strong",
+        true: "border-border-strong",
         false: ""
       }
     },
@@ -619,7 +621,8 @@ var OptionCard = React9.forwardRef(
         /* @__PURE__ */ jsxs6("span", { className: "flex min-w-0 flex-col", children: [
           /* @__PURE__ */ jsx9("span", { className: "text-sm font-medium text-text-primary", children: title }),
           description && /* @__PURE__ */ jsx9("span", { className: "truncate text-xs text-text-tertiary", children: description })
-        ] })
+        ] }),
+        selected !== void 0 && /* @__PURE__ */ jsx9(Check2, { className: cn("ml-auto size-3.5 shrink-0 text-text-primary", !selected && "invisible") })
       ]
     }
   )
@@ -816,7 +819,7 @@ var SettingRow = React11.forwardRef(function SettingRow2({ icon: Icon, label, de
 SettingRow.displayName = "SettingRow";
 
 // src/components/switch.tsx
-import { Check as Check2 } from "lucide-react";
+import { Check as Check3 } from "lucide-react";
 import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
 function Switch({
   checked,
@@ -850,7 +853,7 @@ function Switch({
           "span",
           {
             className: `pointer-events-none absolute inset-y-0 left-0 flex w-6 items-center justify-center transition-opacity ${checked ? "opacity-100" : "opacity-0"}`,
-            children: /* @__PURE__ */ jsx15(Check2, { className: "size-3 text-white" })
+            children: /* @__PURE__ */ jsx15(Check3, { className: "size-3 text-white" })
           }
         ),
         /* @__PURE__ */ jsx15(
@@ -868,7 +871,7 @@ function Switch({
 // src/components/checkbox.tsx
 import * as React12 from "react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-import { Check as Check3 } from "lucide-react";
+import { Check as Check4 } from "lucide-react";
 import { jsx as jsx16 } from "react/jsx-runtime";
 var Checkbox = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx16(
   CheckboxPrimitive.Root,
@@ -882,7 +885,7 @@ var Checkbox = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__
       className
     ),
     ...props,
-    children: /* @__PURE__ */ jsx16(CheckboxPrimitive.Indicator, { className: "flex items-center justify-center text-current", children: /* @__PURE__ */ jsx16(Check3, { className: "h-4 w-4" }) })
+    children: /* @__PURE__ */ jsx16(CheckboxPrimitive.Indicator, { className: "flex items-center justify-center text-current", children: /* @__PURE__ */ jsx16(Check4, { className: "h-4 w-4" }) })
   }
 ));
 Checkbox.displayName = CheckboxPrimitive.Root.displayName;
@@ -1488,7 +1491,7 @@ AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
 // src/components/context-menu.tsx
 import * as React25 from "react";
 import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
-import { Check as Check4, ChevronRight as ChevronRight2, Circle as Circle3 } from "lucide-react";
+import { Check as Check5, ChevronRight as ChevronRight2, Circle as Circle3 } from "lucide-react";
 import { jsx as jsx29, jsxs as jsxs18 } from "react/jsx-runtime";
 var ContextMenu = ContextMenuPrimitive.Root;
 var ContextMenuTrigger = ContextMenuPrimitive.Trigger;
@@ -1561,7 +1564,7 @@ var ContextMenuCheckboxItem = React25.forwardRef(({ className, children, checked
     checked,
     ...props,
     children: [
-      /* @__PURE__ */ jsx29("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx29(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx29(Check4, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ jsx29("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx29(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx29(Check5, { className: "h-4 w-4" }) }) }),
       children
     ]
   }
@@ -1609,7 +1612,7 @@ ContextMenuShortcut.displayName = "ContextMenuShortcut";
 // src/components/menubar.tsx
 import * as React26 from "react";
 import * as MenubarPrimitive from "@radix-ui/react-menubar";
-import { Check as Check5, ChevronRight as ChevronRight3, Circle as Circle4 } from "lucide-react";
+import { Check as Check6, ChevronRight as ChevronRight3, Circle as Circle4 } from "lucide-react";
 import { jsx as jsx30, jsxs as jsxs19 } from "react/jsx-runtime";
 var MenubarMenu = (props) => /* @__PURE__ */ jsx30(MenubarPrimitive.Menu, { ...props });
 MenubarMenu.displayName = "MenubarMenu";
@@ -1709,7 +1712,7 @@ var MenubarCheckboxItem = React26.forwardRef(({ className, children, checked, ..
     checked,
     ...props,
     children: [
-      /* @__PURE__ */ jsx30("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx30(MenubarPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx30(Check5, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ jsx30("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx30(MenubarPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx30(Check6, { className: "h-4 w-4" }) }) }),
       children
     ]
   }
@@ -3177,7 +3180,7 @@ EmptyState.displayName = "EmptyState";
 
 // src/components/copy-button.tsx
 import * as React50 from "react";
-import { Check as Check6, Copy } from "lucide-react";
+import { Check as Check7, Copy } from "lucide-react";
 import { jsx as jsx60, jsxs as jsxs34 } from "react/jsx-runtime";
 var MASK = "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022";
 var CopyButton = React50.forwardRef(
@@ -3213,7 +3216,7 @@ var CopyButton = React50.forwardRef(
           className: cn(className),
           ...props,
           "aria-label": copied ? "Copied" : masked ? `${label} ending ${tail}` : label,
-          icon: copied ? /* @__PURE__ */ jsx60(Check6, { className: "text-text-success" }) : /* @__PURE__ */ jsx60(Copy, {})
+          icon: copied ? /* @__PURE__ */ jsx60(Check7, { className: "text-text-success" }) : /* @__PURE__ */ jsx60(Copy, {})
         }
       )
     );
@@ -4497,7 +4500,7 @@ RemoveButton.displayName = "RemoveButton";
 
 // src/components/grant-role-picker.tsx
 import * as React63 from "react";
-import { Check as Check7 } from "lucide-react";
+import { Check as Check8 } from "lucide-react";
 import { Fragment as Fragment7, jsx as jsx76, jsxs as jsxs48 } from "react/jsx-runtime";
 var WEIGHT_TONE = {
   faint: "text-text-secondary",
@@ -4536,7 +4539,7 @@ var GrantRolePicker = React63.forwardRef(
     const removeWords = grantRemoveLabel(void 0, notInForce !== void 0);
     const valueNote = !current ? notes?.missing : rungs && !pickable.some((r) => r.id === value) ? notes?.aboveCap : void 0;
     const item = (r) => /* @__PURE__ */ jsxs48(DropdownMenuItem, { onSelect: () => onChange(r.id), className: "items-start gap-2 py-1.5", children: [
-      /* @__PURE__ */ jsx76(Check7, { className: cn("mt-0.5 size-3.5 shrink-0 text-text-primary", r.id !== value && "invisible") }),
+      /* @__PURE__ */ jsx76(Check8, { className: cn("mt-0.5 size-3.5 shrink-0 text-text-primary", r.id !== value && "invisible") }),
       /* @__PURE__ */ jsxs48("span", { className: "flex flex-col", children: [
         /* @__PURE__ */ jsx76("span", { className: cn("text-sm", WEIGHT_TONE[r.weight ?? "normal"]), children: r.name }),
         r.hint && /* @__PURE__ */ jsx76("span", { className: "text-xs text-text-tertiary", children: r.hint })
@@ -4580,7 +4583,7 @@ var GrantRolePicker = React63.forwardRef(
               "aria-label": removeDetail ? grantRemoveLabel(removeDetail, notInForce !== void 0) : void 0,
               className: "gap-2 py-1.5",
               children: [
-                rungs && /* @__PURE__ */ jsx76(Check7, { className: "invisible size-3.5 shrink-0" }),
+                rungs && /* @__PURE__ */ jsx76(Check8, { className: "invisible size-3.5 shrink-0" }),
                 removeWords
               ]
             }
@@ -5028,28 +5031,10 @@ function AppSidebar({
         className
       ),
       children: [
-        /* @__PURE__ */ jsx83("div", { className: cn("flex h-14 items-center gap-2", collapsed ? "justify-center px-1" : "px-3"), children: collapsed ? collapsible ? logoCollapsed ?? logo ? (
-          /* The collapsed rail (52px) can't fit the logo mark beside the pin side by side —
-             so the pin overlays the mark instead, revealed on hover/focus, same as pre-flat-rail. */
-          /* @__PURE__ */ jsxs54("div", { className: "group relative flex size-8 items-center justify-center", children: [
-            /* @__PURE__ */ jsx83("span", { className: "pointer-events-none transition-opacity group-hover:opacity-0 group-focus-within:opacity-0", children: logoCollapsed ?? logo }),
-            /* @__PURE__ */ jsx83(
-              "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-[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__ */ jsx83(PanelLeft, { className: "size-4", "aria-hidden": "true" })
-              }
-            )
-          ] })
-        ) : (
-          /* No mark to hide behind (no `logoCollapsed`/`logo` given — `header` doesn't
-             count, it's expanded-only). Hover-revealing the pin over nothing would leave
-             an invisible 32px box as the only way back to expanded, so render it plain
-             and fully visible instead. */
+        /* @__PURE__ */ jsx83("div", { className: cn("flex h-14 items-center gap-2", collapsed ? "justify-center px-1" : "px-3"), children: collapsed ? collapsible ? (
+          /* The 52px rail holds one 32px box, and the way back to expanded is what it holds.
+             The logo has the expanded band and the top bar; the pin has nowhere else, and a
+             pin hidden behind the mark is no pin at all on a device that cannot hover. */
           /* @__PURE__ */ jsx83(
             "button",
             {
@@ -5110,7 +5095,7 @@ var SidebarProductHeader = React69.forwardRef(
 SidebarProductHeader.displayName = "SidebarProductHeader";
 
 // src/components/org-product-switcher.tsx
-import { ChevronsUpDown as ChevronsUpDown3, Check as Check8 } from "lucide-react";
+import { ChevronsUpDown as ChevronsUpDown3, Check as Check9 } from "lucide-react";
 import { Fragment as Fragment11, jsx as jsx85, jsxs as jsxs56 } from "react/jsx-runtime";
 var triggerBox = "flex w-full items-center gap-2.5 rounded-xl px-1.5 py-1 text-left transition-colors hover:bg-[var(--hov-bg)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus";
 var menuItem = "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";
@@ -5189,7 +5174,7 @@ function OrgProductSwitcher({
           organizations.map((o) => /* @__PURE__ */ jsxs56(DropdownMenuItem, { className: menuItem, onSelect: () => onOrgSelect(o.id), children: [
             /* @__PURE__ */ jsx85(Mark2, { item: o, size: "sm" }),
             /* @__PURE__ */ jsx85(ItemLabel, { item: o, kind: "organization" }),
-            o.id === activeOrgId && /* @__PURE__ */ jsx85(Check8, { className: "size-4 shrink-0 text-text-secondary", "aria-hidden": "true" })
+            o.id === activeOrgId && /* @__PURE__ */ jsx85(Check9, { className: "size-4 shrink-0 text-text-secondary", "aria-hidden": "true" })
           ] }, o.id)),
           products.length > 0 && /* @__PURE__ */ jsxs56(Fragment11, { children: [
             /* @__PURE__ */ jsx85(DropdownMenuSeparator, { className: "mx-0 shrink-0 bg-border-subtle" }),
@@ -5197,7 +5182,7 @@ function OrgProductSwitcher({
             products.map((p) => /* @__PURE__ */ jsxs56(DropdownMenuItem, { className: menuItem, onSelect: () => onProductSelect?.(p.id), children: [
               /* @__PURE__ */ jsx85(Mark2, { item: p, size: "sm" }),
               /* @__PURE__ */ jsx85(ItemLabel, { item: p, kind: "product" }),
-              p.id === activeProductId && /* @__PURE__ */ jsx85(Check8, { className: "size-4 shrink-0 text-text-secondary", "aria-hidden": "true" })
+              p.id === activeProductId && /* @__PURE__ */ jsx85(Check9, { className: "size-4 shrink-0 text-text-secondary", "aria-hidden": "true" })
             ] }, p.id))
           ] }),
           actions && actions.length > 0 && /* @__PURE__ */ jsxs56(Fragment11, { children: [
@@ -6173,21 +6158,23 @@ import { BellRing, Settings } from "lucide-react";
 import * as React79 from "react";
 
 // src/components/notification-parts.tsx
-import { Check as Check9 } from "lucide-react";
+import { Check as Check10 } from "lucide-react";
 import { jsx as jsx96 } from "react/jsx-runtime";
 var rowControlHitArea = "relative after:absolute after:-inset-x-2 after:-top-1.5 after:-bottom-2.5";
 function rowControlName(label, title) {
   return `${label} "${title}"`;
 }
 function MarkReadButton({ title, onClick }) {
+  const label = `Mark "${title}" as read`;
   return /* @__PURE__ */ jsx96(
-    "button",
+    Button,
     {
-      type: "button",
-      "aria-label": `Mark "${title}" as read`,
+      variant: "ghost",
+      size: "xs",
+      icon: /* @__PURE__ */ jsx96(Check10, {}),
+      "aria-label": label,
       onClick,
-      className: "relative flex size-5 shrink-0 items-center justify-center rounded-md text-text-tertiary opacity-0 transition-opacity after:absolute after:-inset-3 hover:text-text-primary focus-visible:opacity-100 group-hover:opacity-100",
-      children: /* @__PURE__ */ jsx96(Check9, { className: "size-3.5", "aria-hidden": "true" })
+      className: "relative text-text-secondary after:absolute after:-inset-3 hover:text-text-primary"
     }
   );
 }
@@ -6399,7 +6386,7 @@ NotificationBell.displayName = "NotificationBell";
 
 // src/components/notification-center.tsx
 import * as React81 from "react";
-import { Check as Check10, Search as Search2 } from "lucide-react";
+import { Check as Check11, Search as Search2 } from "lucide-react";
 import { jsx as jsx99, jsxs as jsxs66 } from "react/jsx-runtime";
 var chipBase = "rounded-lg px-3 py-1.5 text-sm font-medium transition-colors";
 var chipOn = "bg-bg-brand-subtle text-text-brand";
@@ -6446,7 +6433,7 @@ function CenterRow({
     item.body && /* @__PURE__ */ jsx99("p", { className: "mt-0.5 text-sm leading-snug text-text-secondary", children: item.body }),
     (item.receipt || item.deepLink) && /* @__PURE__ */ jsxs66("div", { className: "mt-2 flex flex-wrap items-center gap-x-4 gap-y-1.5", children: [
       item.receipt && /* @__PURE__ */ jsxs66("span", { className: "inline-flex items-center gap-1.5 text-sm text-text-tertiary", children: [
-        /* @__PURE__ */ jsx99(Check10, { className: "size-3 shrink-0 text-text-success", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx99(Check11, { className: "size-3 shrink-0 text-text-success", "aria-hidden": "true" }),
         item.receipt
       ] }),
       item.deepLink && /* @__PURE__ */ jsx99(
@@ -7677,7 +7664,7 @@ ListCells.displayName = "ListCells";
 
 // src/components/theme-picker.tsx
 import * as React87 from "react";
-import { Check as Check11, Monitor as Monitor2 } from "lucide-react";
+import { Check as Check12, Monitor as Monitor2 } from "lucide-react";
 import { jsx as jsx105, jsxs as jsxs71 } from "react/jsx-runtime";
 var THEME_SWATCHES = {
   //        --bg-surface  --bg-sunken   --bg-overlay  --border-default  --text-tertiary
@@ -7753,7 +7740,7 @@ var Picker = React87.forwardRef(function Picker2({ value, onValueChange, classNa
                   selected ? "font-semibold text-text-primary" : "text-text-secondary"
                 ),
                 children: [
-                  /* @__PURE__ */ jsx105(Check11, { className: cn("size-4 shrink-0", !selected && "invisible"), "aria-hidden": true }),
+                  /* @__PURE__ */ jsx105(Check12, { className: cn("size-4 shrink-0", !selected && "invisible"), "aria-hidden": true }),
                   o.label
                 ]
               }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lessly/ui",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Lessly design system — shared UI primitives, tokens, and theme",
   "type": "module",
   "packageManager": "pnpm@10.30.3",
@@ -37,7 +37,7 @@
     "storybook": "storybook dev -p 6006 --no-open",
     "build-storybook": "storybook build",
     "changeset": "changeset",
-    "release:version": "changeset version && node scripts/stamp-changelog-date.mjs",
+    "release:version": "changeset version && node scripts/stamp-changelog-date.mjs && pnpm gen-changelog",
     "release:publish": "node scripts/release-publish.mjs",
     "release:tag": "changeset tag",
     "dev-site": "vite --config site/vite.config.ts",