@lessly/ui 3.0.0 → 4.1.0

package/dist/{chunk-CEXND5YW.js → chunk-LTHOLX7I.js}

@@ -71,10 +71,12 @@ var buttonVariants = cva(
       // colour would reach the element beside the variant's and stylesheet order would pick.
       variant: {
         default: "bg-blue-400 text-text-on-brand focus-visible:ring-border-focus hover:bg-blue-350",
-        /** The frame carries the danger at rest and the text stays neutral, because a hover-only
-         *  signal is no signal on a touch device. Hover adds the wash and the red label; keyboard
+        /** The wash carries the danger at rest, on the neutral frame every object button wears — so
+         *  a pair still ranks by weight rather than by colour, and the signal survives a touch
+         *  device that never hovers. The label rests neutral because a variant differs by frame and
+         *  fill and never by text colour (#449). Hover reddens the frame and the label; keyboard
          *  focus reddens the ring alone. */
-        destructive: "border border-border-danger bg-transparent text-text-primary focus-visible:ring-border-danger hover:bg-bg-danger-subtle hover:text-text-danger",
+        destructive: "border border-border-default bg-bg-danger-subtle text-text-primary focus-visible:ring-border-danger hover:border-border-danger hover:text-text-danger",
         /** The borderless form of `destructive`, for an icon-only revoke repeated down a list — a row
          *  of framed ✕ buttons would shout. */
         "destructive-ghost": "text-text-tertiary focus-visible:ring-border-focus hover:bg-bg-danger-subtle hover:text-text-danger",
@@ -83,7 +85,7 @@ var buttonVariants = cva(
          *  `StepUpChallenge destructive` one. Use `destructive` for any trigger that sits on a page. */
         "destructive-solid": "bg-bg-danger text-text-on-danger focus-visible:ring-border-focus hover:bg-bg-danger-a90",
         outline: "border border-border-default bg-transparent text-text-primary focus-visible:ring-border-focus hover:bg-bg-secondary",
-        secondary: "bg-bg-secondary text-text-primary focus-visible:ring-border-focus hover:bg-bg-secondary-a80",
+        secondary: "border border-border-default bg-bg-secondary text-text-primary focus-visible:ring-border-focus hover:bg-bg-secondary-a80",
         /** The frameless console tone, and the add affordance — `variant="ghost" size="xs"` with a
          *  leading `+`. It rests at `text-text-primary` because a button's variant differs by frame
          *  and fill, never by text colour; `destructive-ghost` keeps its quieter rest on purpose. */
@@ -290,7 +292,7 @@ var SheetContent = React3.forwardRef(({ side = "right", className, children, ...
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsxs2(SheetPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm text-text-tertiary opacity-70 transition-opacity duration-fast hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-border-focus disabled:pointer-events-none", children: [
+        /* @__PURE__ */ jsxs2(SheetPrimitive.Close, { className: "absolute right-4 top-4 cursor-pointer rounded-sm text-text-tertiary opacity-70 transition-opacity duration-fast hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-border-focus disabled:pointer-events-none", children: [
           /* @__PURE__ */ jsx3(X, { className: "h-4 w-4" }),
           /* @__PURE__ */ jsx3("span", { className: "sr-only", children: "Close" })
         ] })
@@ -334,6 +336,112 @@ var SheetDescription = React3.forwardRef(({ className, ...props }, ref) => /* @_
 ));
 SheetDescription.displayName = SheetPrimitive.Description.displayName;
 
+// src/components/scroll-area.tsx
+import * as React4 from "react";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var ScrollArea = React4.forwardRef(({ className, children, viewportClassName, viewportProps, type = "scroll", scrollHideDelay = 600, ...props }, ref) => /* @__PURE__ */ jsxs3(
+  ScrollAreaPrimitive.Root,
+  {
+    ref,
+    type,
+    scrollHideDelay,
+    className: cn("group/scroll relative overflow-hidden", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx4(
+        ScrollAreaPrimitive.Viewport,
+        {
+          ...viewportProps,
+          className: cn("scroll-overlay-viewport h-full w-full rounded-[inherit]", viewportClassName),
+          children
+        }
+      ),
+      /* @__PURE__ */ jsx4(ScrollBar, {}),
+      /* @__PURE__ */ jsx4(ScrollAreaPrimitive.Corner, {})
+    ]
+  }
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+var ScrollBar = React4.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx4(
+  ScrollAreaPrimitive.ScrollAreaScrollbar,
+  {
+    ref,
+    orientation,
+    forceMount: true,
+    className: cn(
+      "motion-scroll-overlay flex touch-none select-none p-[2px] opacity-0",
+      "data-[state=visible]:opacity-100 group-hover/scroll:opacity-100 hover:opacity-100",
+      orientation === "vertical" && "h-full w-2",
+      orientation === "horizontal" && "h-2 flex-col",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx4(ScrollAreaPrimitive.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-border-strong" })
+  }
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+
+// src/components/entity-row.tsx
+import * as React5 from "react";
+import { Slot as Slot2 } from "@radix-ui/react-slot";
+import { ChevronDown, ChevronRight } from "lucide-react";
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var rowClass = "flex w-full items-center gap-3 px-4 py-2.5 text-left";
+var plateClass = "relative isolate after:pointer-events-none after:absolute after:inset-x-1.5 after:inset-y-1 after:-z-10 after:rounded-lg hover:after:bg-[var(--hov-bg)] disabled:hover:after:bg-transparent focus-visible:outline-none focus-visible:after:ring-2 focus-visible:after:ring-inset focus-visible:after:ring-border-focus";
+var stackClass = "flex-col items-stretch gap-1";
+var caretMotion = {
+  transitionDuration: "var(--motion-duration-normal)",
+  transitionTimingFunction: "var(--motion-easing-standard)"
+};
+var EntityRow = React5.forwardRef(function EntityRow2({ mark, title, badge, sub, meta, summary, opens = "page", expanded, asChild = false, className, children, ...props }, ref) {
+  if (process.env.NODE_ENV !== "production" && opens === "disclosure" && expanded === void 0) {
+    console.warn(
+      '[EntityRow] `opens="disclosure"` needs `expanded`: it draws the caret AND sets `aria-expanded`, and without it the row renders a caret that never turns and states no state at all. Pass `expanded={open}`, or use `opens="page"` / `opens="modal"`.'
+    );
+  }
+  const line = /* @__PURE__ */ jsxs4(Fragment2, { children: [
+    mark,
+    /* @__PURE__ */ jsxs4("span", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsxs4("span", { className: "flex min-h-5 items-center gap-2", children: [
+        /* @__PURE__ */ jsx5("span", { className: cn("truncate text-sm text-text-primary", opens !== "none" && "font-medium"), children: title }),
+        badge != null && /* @__PURE__ */ jsx5("span", { className: "flex h-5 shrink-0 items-center", children: badge })
+      ] }),
+      sub != null && /* @__PURE__ */ jsx5("span", { className: "block truncate text-xs text-text-secondary", children: sub })
+    ] }),
+    meta != null && /* @__PURE__ */ jsx5("span", { className: "shrink-0 text-sm text-text-secondary", children: meta }),
+    opens !== "none" && /* @__PURE__ */ jsxs4("span", { className: "flex size-4 shrink-0 items-center justify-center", children: [
+      opens === "page" && /* @__PURE__ */ jsx5(ChevronRight, { className: "size-4 text-text-tertiary", "aria-hidden": true }),
+      opens === "disclosure" && /* @__PURE__ */ jsx5(
+        ChevronDown,
+        {
+          className: cn(
+            "size-4 shrink-0 text-text-tertiary transition-transform",
+            expanded ? "rotate-180" : "rotate-0"
+          ),
+          style: caretMotion,
+          "aria-hidden": true
+        }
+      )
+    ] })
+  ] });
+  const content = summary == null ? line : /* @__PURE__ */ jsxs4(Fragment2, { children: [
+    /* @__PURE__ */ jsx5("span", { className: "flex w-full items-center gap-3", children: line }),
+    /* @__PURE__ */ jsx5("span", { className: "block w-full text-xs text-text-secondary", children: summary })
+  ] });
+  const classes = cn(rowClass, opens !== "none" && ["cursor-pointer", plateClass], summary != null && stackClass, className);
+  const stateProps = opens === "disclosure" ? { "aria-expanded": expanded } : void 0;
+  if (opens === "none") {
+    return /* @__PURE__ */ jsx5("div", { ...props, ref, className: classes, children: content });
+  }
+  if (asChild) {
+    const child = React5.Children.only(children);
+    return /* @__PURE__ */ jsx5(Slot2, { ...props, ref, className: classes, ...stateProps, children: React5.cloneElement(child, stateProps, content) });
+  }
+  return /* @__PURE__ */ jsx5("button", { ...props, ref, type: "button", className: classes, ...stateProps, children: content });
+});
+EntityRow.displayName = "EntityRow";
+
 // src/hooks/use-mobile.ts
 import { useEffect, useState as useState2 } from "react";
 var MD_BREAKPOINT = 768;
@@ -376,10 +484,11 @@ function useSidebar(options = {}) {
 }
 
 // src/components/nav-row.tsx
-import * as React4 from "react";
-import { Slot as Slot2 } from "@radix-ui/react-slot";
-import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-var base = "flex w-full items-center text-left text-sm transition-colors duration-fast focus-visible:outline-none";
+import * as React6 from "react";
+import { Slot as Slot3 } from "@radix-ui/react-slot";
+import { ChevronDown as ChevronDown2, ChevronRight as ChevronRight2 } from "lucide-react";
+import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var base = "flex w-full cursor-pointer items-center text-left text-sm transition-colors duration-fast focus-visible:outline-none";
 var ring = "focus-visible:ring-2 focus-visible:ring-border-focus";
 var plate = "relative isolate after:pointer-events-none after:absolute after:inset-x-1.5 after:inset-y-1 after:-z-10 after:rounded-lg";
 var shape = {
@@ -390,23 +499,43 @@ var shape = {
 var state = {
   rail: {
     idle: "font-medium text-text-secondary hover:bg-[var(--hov-bg)] hover:text-text-primary",
-    active: "bg-bg-sunken font-semibold text-text-primary"
+    active: "bg-[var(--current-bg)] font-semibold text-text-primary hover:bg-[var(--hov-current)]"
   },
   menu: {
     idle: "font-medium text-text-secondary hover:bg-[var(--menu-hov)]",
-    active: "bg-bg-sunken font-semibold text-text-primary"
+    active: "ring-1 ring-inset ring-border-strong font-semibold text-text-primary hover:bg-[var(--menu-hov)]"
   },
   // A settings line reads as a label, not as navigation, so it idles at the body weight the rest of
   // the card is set in — and never marks itself current, because it isn't.
   card: {
-    idle: "text-text-primary hover:after:bg-bg-elevated",
-    active: "text-text-primary hover:after:bg-bg-elevated"
+    idle: "text-text-primary hover:after:bg-[var(--hov-bg)]",
+    active: "text-text-primary hover:after:bg-[var(--hov-bg)]"
   }
 };
-var NavRow = React4.forwardRef(function NavRow2({ icon, label, sub, active = false, variant, trailing, mutedTrailing = false, hideLabel = false, asChild = false, className, children, ...props }, ref) {
+function Mark({ mark, open }) {
+  return /* @__PURE__ */ jsx6(
+    "span",
+    {
+      className: cn(
+        "flex size-5 items-center justify-center",
+        mark === "drill" ? "rounded-md transition-colors duration-fast group-hover/nav-row:bg-[color-mix(in_srgb,var(--text-primary)_10%,transparent)]" : "text-text-tertiary"
+      ),
+      children: mark === "drill" ? /* @__PURE__ */ jsx6(ChevronRight2, { className: "size-4", "aria-hidden": "true" }) : /* @__PURE__ */ jsx6(
+        ChevronDown2,
+        {
+          className: "size-4",
+          style: { ...caretMotion, transitionProperty: "transform", transform: open ? "rotate(180deg)" : "rotate(0deg)" },
+          "aria-hidden": "true"
+        }
+      )
+    }
+  );
+}
+var NavRow = React6.forwardRef(function NavRow2({ icon, label, sub, active = false, variant, trailing, mark, markOpen, mutedTrailing = false, hideLabel = false, asChild = false, className, children, ...props }, ref) {
   const card = variant === "card";
-  const content = /* @__PURE__ */ jsxs3(Fragment2, { children: [
-    Boolean(icon) && /* @__PURE__ */ jsx4(
+  const adornment = mark ? !hideLabel && /* @__PURE__ */ jsx6(Mark, { mark, open: markOpen }) : trailing;
+  const content = /* @__PURE__ */ jsxs5(Fragment3, { children: [
+    Boolean(icon) && /* @__PURE__ */ jsx6(
       "span",
       {
         className: cn(
@@ -417,31 +546,92 @@ var NavRow = React4.forwardRef(function NavRow2({ icon, label, sub, active = fal
         children: icon
       }
     ),
-    !hideLabel && (card ? /* @__PURE__ */ jsxs3("span", { className: "min-w-0 flex-1", children: [
-      /* @__PURE__ */ jsx4("span", { className: "block truncate", children: label }),
-      Boolean(sub) && /* @__PURE__ */ jsx4("span", { className: "block truncate text-xs text-text-secondary", children: sub })
-    ] }) : /* @__PURE__ */ jsx4("span", { className: "min-w-0 flex-1 truncate", children: label })),
-    Boolean(trailing) && /* @__PURE__ */ jsx4(
+    !hideLabel && (card ? /* @__PURE__ */ jsxs5("span", { "data-slot": "nav-row-label", className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsx6("span", { className: "block truncate", children: label }),
+      Boolean(sub) && /* @__PURE__ */ jsx6("span", { className: "block truncate text-xs text-text-secondary", children: sub })
+    ] }) : /* @__PURE__ */ jsx6("span", { "data-slot": "nav-row-label", className: "min-w-0 flex-1 truncate", children: label })),
+    Boolean(adornment) && /* @__PURE__ */ jsx6(
       "span",
       {
+        "data-slot": "nav-row-trailing",
         className: cn(
           "flex shrink-0 items-center",
           mutedTrailing ? "text-text-tertiary" : card && "text-text-secondary"
         ),
-        children: trailing
+        children: adornment
       }
     ),
-    card && /* @__PURE__ */ jsx4("span", { className: "size-4 shrink-0", "aria-hidden": "true" })
+    card && /* @__PURE__ */ jsx6("span", { className: "size-4 shrink-0", "aria-hidden": "true" })
   ] });
-  const classes = cn(base, shape[variant], state[variant][active ? "active" : "idle"], className);
+  const classes = cn(
+    base,
+    shape[variant],
+    state[variant][active ? "active" : "idle"],
+    // The drill mark's own plate lights on the row, so the row is what the plate hangs off.
+    mark === "drill" && "group/nav-row",
+    className
+  );
+  const expanded = mark === "disclosure" ? markOpen : void 0;
   if (asChild) {
-    const child = React4.Children.only(children);
-    return /* @__PURE__ */ jsx4(Slot2, { ref, className: classes, "aria-label": hideLabel ? label : void 0, ...props, children: React4.cloneElement(child, void 0, content) });
+    const child = React6.Children.only(children);
+    return /* @__PURE__ */ jsx6(Slot3, { ref, className: classes, "aria-label": hideLabel ? label : void 0, "aria-expanded": expanded, ...props, children: React6.cloneElement(child, void 0, content) });
   }
-  return /* @__PURE__ */ jsx4("button", { ref, type: "button", className: classes, "aria-label": hideLabel ? label : void 0, ...props, children: content });
+  return /* @__PURE__ */ jsx6("button", { ref, type: "button", className: classes, "aria-label": hideLabel ? label : void 0, "aria-expanded": expanded, ...props, children: content });
 });
 NavRow.displayName = "NavRow";
 
+// src/components/rail-toggle.tsx
+import * as React7 from "react";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+var RAIL_COLUMN_BOX = "flex size-10 shrink-0 items-center justify-center [&>*]:shrink-0";
+var BAR_TRAVEL = 6;
+function RailMark({ collapsed, className }) {
+  return /* @__PURE__ */ jsxs6(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className: cn("size-4", className),
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx7("rect", { "data-slot": "rail-mark-frame", x: "3", y: "3", width: "18", height: "18", rx: "2" }),
+        /* @__PURE__ */ jsx7(
+          "path",
+          {
+            "data-slot": "rail-mark-bar",
+            className: "motion-rail-collapse",
+            d: "M9 3v18",
+            style: { transform: `translateX(${collapsed ? BAR_TRAVEL : 0}px)` }
+          }
+        )
+      ]
+    }
+  );
+}
+var RailToggle = React7.forwardRef(function RailToggle2({ collapsed, className, "aria-label": ariaLabel, ...rest }, ref) {
+  return /* @__PURE__ */ jsx7(
+    "button",
+    {
+      ref,
+      type: "button",
+      "aria-label": ariaLabel ?? (collapsed ? "Expand sidebar" : "Collapse sidebar"),
+      "aria-expanded": !collapsed,
+      className: cn(
+        RAIL_COLUMN_BOX,
+        "cursor-pointer rounded-md text-text-secondary transition-colors duration-fast hover:bg-[var(--hov-bg)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus",
+        className
+      ),
+      ...rest,
+      children: /* @__PURE__ */ jsx7(RailMark, { collapsed })
+    }
+  );
+});
+
 export {
   cn,
   buttonVariants,
@@ -460,7 +650,12 @@ export {
   SheetFooter,
   SheetTitle,
   SheetDescription,
+  ScrollArea,
+  ScrollBar,
+  EntityRow,
   useIsMobile,
   useSidebar,
-  NavRow
+  NavRow,
+  RAIL_COLUMN_BOX,
+  RailToggle
 };