@lerianstudio/sindarian-ui 2.0.0-beta.2 → 2.0.0-beta.21

package/dist/esm/components/ui/icon-button/index.d.ts

@@ -2,7 +2,7 @@ import { type VariantProps } from 'class-variance-authority';
 import { buttonVariants } from '../button/index.js';
 export declare const iconButtonVariants: (props?: ({
     rounded?: boolean | null | undefined;
-    size?: "default" | "small" | null | undefined;
+    size?: "small" | "default" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type IconButtonProps = React.ComponentProps<'button'> & VariantProps<typeof buttonVariants> & {
     rounded?: boolean;

package/dist/esm/components/ui/lerian-wordmark/index.d.ts

@@ -0,0 +1,6 @@
+export type LerianWordmarkProps = {
+    className?: string;
+    title?: string;
+};
+export declare function LerianWordmark({ className, title }: LerianWordmarkProps): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/ui/lerian-wordmark/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/lerian-wordmark/index.tsx"],"names":[],"mappings":"AAAA,MAAM,MAAM,mBAAmB,GAAG;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,wBAAgB,cAAc,CAAC,EAC7B,SAAS,EACT,KAAgB,EACjB,EAAE,mBAAmB,+BAiBrB"}

package/dist/esm/components/ui/lerian-wordmark/index.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function LerianWordmark({ className, title = 'Lerian' }) {
+    return (_jsx("svg", { "data-slot": "lerian-wordmark", viewBox: "0 0 1090.88 280", role: "img", "aria-label": title, fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", className: className, children: _jsx("path", { fillRule: "evenodd", d: "M619.42,29.69c0,15.43-10.87,27.93-27.93,27.93s-27.93-12.51-27.93-27.93,10.86-27.93,27.92-27.93,27.93,12.51,27.93,27.93h0ZM158.64,242.4v33.54H12.13v-33.55h48.36c3.16,0,5.73-2.57,5.73-5.73V87.77c0-3.16-2.57-5.73-5.73-5.73H7.85v-34.31h98.33v188.94c0,3.16,2.57,5.73,5.73,5.73h46.74ZM168.85,179.86c0,58.52,37.29,98.33,99.47,98.33,49.15,0,79.7-30.6,86.27-67.08h-40.69c-6.29,24.54-26.97,33.91-48.61,33.91-48.85,0-53.41-45.18-53.83-55-.04-1.02.77-1.87,1.79-1.87h143.61c.76-5.26,1.13-10.42,1.13-15.44,0-32.71-20.25-91.92-95.33-91.92-57.04,0-93.8,41.26-93.81,99.07ZM314.47,158.39l-99.49.02c-1.08,0-1.94-.96-1.78-2.02,4.49-31.28,30.98-42.82,50.98-42.82,33.88,0,48.71,21.59,52.08,42.79.17,1.08-.69,2.04-1.78,2.04h0ZM867.2,83.16h0s0,0,0,0h0ZM826.87,83.16h40.33v192.83h-40.32v-24.53c0-3.09-3.92-4.41-5.79-1.95-.18.23-.35.47-.53.71h0s0,.02,0,.02h0c-.11.16-.23.32-.35.47-7.92,10.56-20.68,27.53-56.24,27.53-60.83,0-91.19-46.33-91.19-98.7,0-61.42,40.37-98.72,91.17-98.72,36.73,0,48.44,15.73,56.64,26.75l.49.66c1.86,2.49,5.81,1.18,5.81-1.93v-23.14ZM770.75,115.48c34.78,0,56.14,27.81,56.14,64.8h0c0,42-26.32,63.68-56.14,63.68-34.83,0-56.14-27.43-56.14-64.43,0-42.07,26.11-64.05,56.14-64.05ZM1063.39,101.7c14.42,14.06,21.64,36.67,21.64,67.8v106.25h-41.06v-103.99c0-43.98-22.35-56.14-45.96-56.14-31.99,0-51.6,23.22-51.6,62.92v97.21h-40.68V83.15h39.93v25.07c0,3.11,3.95,4.4,5.82,1.92,8.55-11.4,26.72-29.52,55.98-29.52,37.55,0,55.75,20.88,55.93,21.08ZM657.42,275.94v-33.54h0s-37.37,0-37.37,0c-3.16,0-5.73-2.57-5.73-5.73V83.14h-81.34v34.31h37.54c3.16,0,5.73,2.57,5.73,5.73v113.48c0,3.16-2.57,5.73-5.73,5.73h-38.14v33.55h125.03ZM499.27,119.27c0,.13-.1.23-.23.23h0s-36.31,0-36.31,0c-28.68,0-28.65,24.99-28.64,43.62,0,.46,0,.92,0,1.37v111.24c0,.13-.1.23-.23.23h-41.01c-.13,0-.23-.1-.23-.23V83.27c0-.13.1-.23.23-.23h36.49c.13,0,.23.1.23.23v24.03c0,4.05,5.24,5.65,7.49,2.28.22-.32.43-.64.65-.97,8.18-12.25,18.71-28.02,52.51-28.02h9.05v38.68Z" }) }));
+}

package/dist/esm/components/ui/otp-input/index.js

@@ -12,7 +12,7 @@ function InputOTPGroup({ className, ...props }) {
 function InputOTPSlot({ index, className, ...props }) {
     const inputOTPContext = React.useContext(OTPInputContext);
     const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};
-    return (_jsxs("div", { "data-slot": "input-otp-slot", "data-active": isActive, className: cn('border-input-border bg-background text-foreground', 'relative flex h-14 w-12 items-center justify-center border-y border-r text-2xl font-semibold shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md', 'data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:z-10 data-[active=true]:ring-2', className), ...props, children: [char, hasFakeCaret && (_jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: _jsx("div", { className: "motion-safe:animate-caret-blink bg-foreground h-6 w-px duration-1000" }) }))] }));
+    return (_jsxs("div", { "data-slot": "input-otp-slot", "data-active": isActive, className: cn('border-input-border bg-background text-foreground', 'relative flex h-14 w-12 items-center justify-center border-y border-r text-2xl font-semibold shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md', 'data-[active=true]:ring-ring data-[active=true]:z-10 data-[active=true]:ring-2', className), ...props, children: [char, hasFakeCaret && (_jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: _jsx("div", { className: "motion-safe:animate-caret-blink bg-foreground h-6 w-px duration-1000" }) }))] }));
 }
 function InputOTPSeparator({ ...props }) {
     return (_jsx("div", { "data-slot": "input-otp-separator", role: "separator", ...props, children: _jsx(MinusIcon, {}) }));

package/dist/esm/components/ui/radio-group/index.js

@@ -7,6 +7,6 @@ function RadioGroup({ className, ...props }) {
     return (_jsx(RadioGroupPrimitive.Root, { "data-slot": "radio-group", className: cn('grid gap-3', className), ...props }));
 }
 function RadioGroupItem({ className, ...props }) {
-    return (_jsx(RadioGroupPrimitive.Item, { "data-slot": "radio-group-item", className: cn('border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:aria-invalid:ring-destructive/40 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50', className), ...props, children: _jsx(RadioGroupPrimitive.Indicator, { "data-slot": "radio-group-indicator", className: "relative flex items-center justify-center", children: _jsx(Circle, { className: "fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" }) }) }));
+    return (_jsx(RadioGroupPrimitive.Item, { "data-slot": "radio-group-item", className: cn('border-input-border text-primary focus-visible:ring-ring aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:aria-invalid:ring-destructive/40 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50', className), ...props, children: _jsx(RadioGroupPrimitive.Indicator, { "data-slot": "radio-group-indicator", className: "relative flex items-center justify-center", children: _jsx(Circle, { className: "fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" }) }) }));
 }
 export { RadioGroup, RadioGroupItem };

package/dist/esm/components/ui/select/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/select/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAA;AAKzD,iBAAS,MAAM,CAAC,EACd,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,qBAEnD;AAED,iBAAS,WAAW,CAAC,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,qBAEpD;AAED;;;;GAIG;AACH,iBAAS,WAAW,CAAC,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,qBAEpD;AAED,KAAK,kBAAkB,GAAG,KAAK,CAAC,cAAc,CAC5C,OAAO,eAAe,CAAC,OAAO,CAC/B,GAAG;IACF,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAsBD,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,kBAAkB,qBAsBpB;AAED,iBAAS,oBAAoB,CAAC,EAC5B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,cAAc,CAAC,qBAU7D;AACD,iBAAS,sBAAsB,CAAC,EAC9B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,gBAAgB,CAAC,qBAU/D;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,QAAQ,EACR,QAAmB,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,qBA0CtD;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,qBAQvC;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,qBAQpD;AAED,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,qBAgBnD;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,SAAS,CAAC,qBAQxD;AAED,OAAO,EACL,MAAM,EACN,WAAW,EACX,WAAW,EACX,aAAa,EACb,aAAa,EACb,WAAW,EACX,WAAW,EACX,UAAU,EACV,eAAe,EACf,oBAAoB,EACpB,sBAAsB,EACvB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/select/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAA;AAKzD,iBAAS,MAAM,CAAC,EACd,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,qBAEnD;AAED,iBAAS,WAAW,CAAC,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,qBAEpD;AAED;;;;GAIG;AACH,iBAAS,WAAW,CAAC,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,qBAEpD;AAED,KAAK,kBAAkB,GAAG,KAAK,CAAC,cAAc,CAC5C,OAAO,eAAe,CAAC,OAAO,CAC/B,GAAG;IACF,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AA0BD,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,kBAAkB,qBAsBpB;AAED,iBAAS,oBAAoB,CAAC,EAC5B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,cAAc,CAAC,qBAU7D;AACD,iBAAS,sBAAsB,CAAC,EAC9B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,gBAAgB,CAAC,qBAU/D;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,QAAQ,EACR,QAAmB,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,qBA0CtD;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,qBAQvC;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,qBAQpD;AAED,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,qBAgBnD;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,SAAS,CAAC,qBAQxD;AAED,OAAO,EACL,MAAM,EACN,WAAW,EACX,WAAW,EACX,aAAa,EACb,aAAa,EACb,WAAW,EACX,WAAW,EACX,UAAU,EACV,eAAe,EACf,oBAAoB,EACpB,sBAAsB,EACvB,CAAA"}

package/dist/esm/components/ui/select/index.js

@@ -27,15 +27,19 @@ function SelectValue({ ...props }) {
  * slot shrink, `truncate` ellipsises what no longer fits — the chevron keeps its
  * place because the value absorbs all the shrinkage.
  *
- * Written as a child-scoped variant on the TRIGGER because Radix strips
- * `className` off `Select.Value` itself; the `>` combinator holds because Radix
- * renders that span as the trigger's direct child.
+ * Written as a descendant-scoped variant on the TRIGGER because Radix strips
+ * `className` off `Select.Value` itself. DESCENDANT, not `>`: a trigger that
+ * carries a leading glyph groups the glyph and the value into one flex child
+ * (see `SelectField`'s `leadingIcon`), so the value span is no longer the
+ * trigger's direct child and a `>` combinator stopped truncating exactly where
+ * the trigger has the least room. The wrapper carries `min-w-0` itself, which
+ * is what lets the shrinkage reach the value.
  *
  * Truncation hides text, so a trigger showing a long value should also carry
  * `title` — on the trigger, never on the value slot, which Radix renders
  * `pointer-events: none`.
  */
-const VALUE_OVERFLOW_CLASS = '[&>[data-slot=select-value]]:min-w-0 [&>[data-slot=select-value]]:truncate';
+const VALUE_OVERFLOW_CLASS = '[&_[data-slot=select-value]]:min-w-0 [&_[data-slot=select-value]]:truncate';
 function SelectTrigger({ className, readOnly, children, ...props }) {
     return (_jsxs(SelectPrimitive.Trigger, { "data-slot": "select-trigger", "data-size": "default", className: cn('select-trigger select-read-only select-disabled', VALUE_OVERFLOW_CLASS, className), "aria-readonly": readOnly, "data-read-only": readOnly ? '' : undefined, ...props, children: [children, !readOnly && (_jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(ChevronDown, { className: "select-chevron" }) }))] }));
 }

package/dist/esm/components/ui/sheet/index.d.ts

@@ -6,6 +6,48 @@ declare function SheetTrigger({ ...props }: React.ComponentProps<typeof SheetPri
 declare function SheetClose({ ...props }: React.ComponentProps<typeof SheetPrimitive.Close>): React.JSX.Element;
 declare function SheetPortal({ ...props }: React.ComponentProps<typeof SheetPrimitive.Portal>): React.JSX.Element;
 declare function SheetOverlay({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Overlay>): React.JSX.Element;
+/**
+ * ⛔ A PANEL BUILT FOR A DESKTOP HAS TO STOP BEING TWO FIFTHS ON A PHONE.
+ *
+ * `w-2/5` and `p-12` were unconditional. At a 390px viewport that is a 156px
+ * panel with 59px of usable width, and a form field inside it measures 9px of
+ * text — a sheet that cannot be read, let alone filled in. At 320px the panel
+ * is 128px and the field has NOTHING: its own padding is wider than its box.
+ * Thirteen product-console routes opened a sheet that looked like that, which
+ * is why that console has carried a rule against `[data-slot='sheet-content']`
+ * since its M10 lane; this is that rule brought home, and the console can drop
+ * its copy.
+ *
+ * ⚠️ THE PHONE VALUES CARRY THE MODIFIER, THE DESKTOP ONES DO NOT, AND THAT
+ * ASYMMETRY IS THE WHOLE MECHANISM. `cn` resolves these through tailwind-merge
+ * before the cascade sees them, and tailwind-merge only drops a conflicting
+ * class carrying the SAME modifiers. So a caller's `w-[594px]` replaces
+ * `w-2/5` and leaves `max-sm:w-full` standing: the fifteen product-console
+ * sheets that declare a pixel width of their own — and the two that declare
+ * `w-full` — all still fill a phone, with no edit at the call site. Written
+ * the other way round — `w-full sm:w-2/5` — the caller's bare `w-[594px]`
+ * would have been overruled by `sm:w-2/5` at every desktop width instead,
+ * which is the same bug pointing the other way.
+ *
+ * ⚠️ IT CUTS BOTH WAYS, AND THE PADDING IS WHERE THAT IS FELT. A caller's bare
+ * `p-0` drops `p-12` and cannot reach `max-sm:px-4` either, so a panel that
+ * asked for no padding gets 16px a side below 40rem. That is deliberate — it
+ * is what makes the phone step reach the call sites that need it most — and it
+ * is what product-console's own unlayered rule already did to those five
+ * sheets, so nothing there moves. For any other consumer it is a behaviour
+ * change from 2.0.0-beta.11, and the way out is one token.
+ *
+ * A call site that genuinely wants its own phone width or padding says so with
+ * the modifier (`max-sm:w-[320px]`, `max-sm:p-0`), which is one token and
+ * strictly more than the console's unlayered rule allowed anyone.
+ *
+ * 40rem rather than 768px, unlike `SidebarTrigger` next door: nothing here is
+ * paired with a pixel media query in JavaScript. This is a reading-width
+ * decision and it is the complement of `sm:`, so it moves with the reader's
+ * font exactly as the rest of the package's responsive steps do. The one panel
+ * that IS coupled to the pixel breakpoint is the navigation drawer, and
+ * `SidebarRoot` opts it out by restating both tokens under `max-sm:`.
+ */
 declare const sheetVariants: (props?: ({
     side?: "bottom" | "left" | "right" | "top" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/esm/components/ui/sheet/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/sheet/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,cAAc,MAAM,wBAAwB,CAAA;AACxD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,iBAAS,KAAK,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,IAAI,CAAC,qBAE5E;AAED,iBAAS,YAAY,CAAC,EACpB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,qBAErD;AAED,iBAAS,UAAU,CAAC,EAClB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,KAAK,CAAC,qBAEnD;AAED,iBAAS,WAAW,CAAC,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,MAAM,CAAC,qBAEpD;AAED,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,qBAWrD;AAED,QAAA,MAAM,aAAa;;8EAiBlB,CAAA;AAED,KAAK,iBAAiB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,GAC1E,YAAY,CAAC,OAAO,aAAa,CAAC,CAAA;AAEpC,iBAAS,YAAY,CAAC,EACpB,IAAc,EACd,SAAS,EACT,QAAQ,EACR,iBAAiB,EACjB,GAAG,KAAK,EACT,EAAE,iBAAiB,qBAsCnB;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAWxE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAWxE;AAED,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,KAAK,CAAC,qBAWnD;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,WAAW,CAAC,qBAQzD;AAED,OAAO,EACL,KAAK,EACL,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,WAAW,EACX,WAAW,EACX,UAAU,EACV,gBAAgB,EACjB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/sheet/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,cAAc,MAAM,wBAAwB,CAAA;AACxD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,iBAAS,KAAK,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,IAAI,CAAC,qBAE5E;AAED,iBAAS,YAAY,CAAC,EACpB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,qBAErD;AAED,iBAAS,UAAU,CAAC,EAClB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,KAAK,CAAC,qBAEnD;AAED,iBAAS,WAAW,CAAC,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,MAAM,CAAC,qBAEpD;AAED,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,qBAWrD;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,QAAA,MAAM,aAAa;;8EAiBlB,CAAA;AAED,KAAK,iBAAiB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,GAC1E,YAAY,CAAC,OAAO,aAAa,CAAC,CAAA;AAEpC,iBAAS,YAAY,CAAC,EACpB,IAAc,EACd,SAAS,EACT,QAAQ,EACR,iBAAiB,EACjB,GAAG,KAAK,EACT,EAAE,iBAAiB,qBA6BnB;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAWxE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAWxE;AAED,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,KAAK,CAAC,qBAWnD;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,WAAW,CAAC,qBAQzD;AAED,OAAO,EACL,KAAK,EACL,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,WAAW,EACX,WAAW,EACX,UAAU,EACV,gBAAgB,EACjB,CAAA"}

package/dist/esm/components/ui/sheet/index.js

@@ -1,10 +1,9 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
 import * as SheetPrimitive from '@radix-ui/react-dialog';
 import { cva } from 'class-variance-authority';
 import { X } from 'lucide-react';
-import { cn } from '../../../lib/utils.js';
+import { cn, keepOpenOnToast } from '../../../lib/utils.js';
 function Sheet({ ...props }) {
     return _jsx(SheetPrimitive.Root, { "data-slot": "sheet", ...props });
 }
@@ -20,13 +19,55 @@ function SheetPortal({ ...props }) {
 function SheetOverlay({ className, ...props }) {
     return (_jsx(SheetPrimitive.Overlay, { "data-slot": "sheet-overlay", className: cn('motion-safe:data-[state=open]:animate-in motion-safe:data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80', className), ...props }));
 }
-const sheetVariants = cva('fixed z-50 gap-4 bg-background p-12 shadow-lg transition ease-in-out motion-safe:data-[state=open]:animate-in motion-safe:data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500', {
+/**
+ * ⛔ A PANEL BUILT FOR A DESKTOP HAS TO STOP BEING TWO FIFTHS ON A PHONE.
+ *
+ * `w-2/5` and `p-12` were unconditional. At a 390px viewport that is a 156px
+ * panel with 59px of usable width, and a form field inside it measures 9px of
+ * text — a sheet that cannot be read, let alone filled in. At 320px the panel
+ * is 128px and the field has NOTHING: its own padding is wider than its box.
+ * Thirteen product-console routes opened a sheet that looked like that, which
+ * is why that console has carried a rule against `[data-slot='sheet-content']`
+ * since its M10 lane; this is that rule brought home, and the console can drop
+ * its copy.
+ *
+ * ⚠️ THE PHONE VALUES CARRY THE MODIFIER, THE DESKTOP ONES DO NOT, AND THAT
+ * ASYMMETRY IS THE WHOLE MECHANISM. `cn` resolves these through tailwind-merge
+ * before the cascade sees them, and tailwind-merge only drops a conflicting
+ * class carrying the SAME modifiers. So a caller's `w-[594px]` replaces
+ * `w-2/5` and leaves `max-sm:w-full` standing: the fifteen product-console
+ * sheets that declare a pixel width of their own — and the two that declare
+ * `w-full` — all still fill a phone, with no edit at the call site. Written
+ * the other way round — `w-full sm:w-2/5` — the caller's bare `w-[594px]`
+ * would have been overruled by `sm:w-2/5` at every desktop width instead,
+ * which is the same bug pointing the other way.
+ *
+ * ⚠️ IT CUTS BOTH WAYS, AND THE PADDING IS WHERE THAT IS FELT. A caller's bare
+ * `p-0` drops `p-12` and cannot reach `max-sm:px-4` either, so a panel that
+ * asked for no padding gets 16px a side below 40rem. That is deliberate — it
+ * is what makes the phone step reach the call sites that need it most — and it
+ * is what product-console's own unlayered rule already did to those five
+ * sheets, so nothing there moves. For any other consumer it is a behaviour
+ * change from 2.0.0-beta.11, and the way out is one token.
+ *
+ * A call site that genuinely wants its own phone width or padding says so with
+ * the modifier (`max-sm:w-[320px]`, `max-sm:p-0`), which is one token and
+ * strictly more than the console's unlayered rule allowed anyone.
+ *
+ * 40rem rather than 768px, unlike `SidebarTrigger` next door: nothing here is
+ * paired with a pixel media query in JavaScript. This is a reading-width
+ * decision and it is the complement of `sm:`, so it moves with the reader's
+ * font exactly as the rest of the package's responsive steps do. The one panel
+ * that IS coupled to the pixel breakpoint is the navigation drawer, and
+ * `SidebarRoot` opts it out by restating both tokens under `max-sm:`.
+ */
+const sheetVariants = cva('fixed z-50 gap-4 bg-background p-12 max-sm:px-4 shadow-lg transition ease-in-out motion-safe:data-[state=open]:animate-in motion-safe:data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500', {
     variants: {
         side: {
             top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
             bottom: 'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
-            left: 'inset-y-0 left-0 h-full w-2/5 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left',
-            right: 'inset-y-0 right-0 h-full w-2/5  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right'
+            left: 'inset-y-0 left-0 h-full w-2/5 max-sm:w-full border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left',
+            right: 'inset-y-0 right-0 h-full w-2/5 max-sm:w-full border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right'
         }
     },
     defaultVariants: {
@@ -34,15 +75,7 @@ const sheetVariants = cva('fixed z-50 gap-4 bg-background p-12 shadow-lg transit
     }
 });
 function SheetContent({ side = 'right', className, children, onInteractOutside, ...props }) {
-    const handleInteractOutside = React.useCallback((event) => {
-        const target = event.target;
-        if (target?.closest('[data-sonner-toaster]')) {
-            event.preventDefault();
-            return;
-        }
-        onInteractOutside?.(event);
-    }, [onInteractOutside]);
-    return (_jsxs(SheetPortal, { children: [_jsx(SheetOverlay, {}), _jsxs(SheetPrimitive.Content, { "data-slot": "sheet-content", className: cn('flex max-h-screen flex-col overflow-x-auto px-8 pb-0', sheetVariants({ side }), className), onInteractOutside: handleInteractOutside, ...props, children: [children, _jsxs(SheetPrimitive.Close, { className: "data-[state=open]:bg-secondary absolute top-7 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-hidden disabled:pointer-events-none", children: [_jsx(X, { className: "h-6 w-6" }), _jsx("span", { className: "sr-only", children: "Close" })] })] })] }));
+    return (_jsxs(SheetPortal, { children: [_jsx(SheetOverlay, {}), _jsxs(SheetPrimitive.Content, { "data-slot": "sheet-content", className: cn('flex max-h-screen flex-col overflow-x-auto px-8 pb-0', sheetVariants({ side }), className), onInteractOutside: keepOpenOnToast(onInteractOutside), ...props, children: [children, _jsxs(SheetPrimitive.Close, { className: "data-[state=open]:bg-secondary ring-offset-background focus-visible:ring-ring absolute top-7 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none", children: [_jsx(X, { className: "h-6 w-6" }), _jsx("span", { className: "sr-only", children: "Close" })] })] })] }));
 }
 function SheetHeader({ className, ...props }) {
     return (_jsx("div", { "data-slot": "sheet-header", className: cn('mb-4 flex flex-col space-y-2 text-center sm:text-left', className), ...props }));
@@ -54,6 +87,6 @@ function SheetTitle({ className, ...props }) {
     return (_jsx(SheetPrimitive.Title, { "data-slot": "sheet-title", className: cn('text-muted-foreground mb-2 flex text-xl font-bold', className), ...props }));
 }
 function SheetDescription({ className, ...props }) {
-    return (_jsx(SheetPrimitive.Description, { "data-slot": "sheet-description", className: cn('text-shadcn-500 text-sm font-medium', className), ...props }));
+    return (_jsx(SheetPrimitive.Description, { "data-slot": "sheet-description", className: cn('text-muted-foreground text-sm font-medium', className), ...props }));
 }
 export { Sheet, SheetPortal, SheetOverlay, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription };

package/dist/esm/components/ui/sidebar/index.d.ts

@@ -4,6 +4,7 @@ export * from './sidebar-item-icon-button.js';
 export * from './sidebar-item-button.js';
 export * from './sidebar-item.js';
 export * from './sidebar-expand-button.js';
+export * from './sidebar-trigger.js';
 export * from './sidebar-back-button.js';
 export * from './sidebar-provider.js';
 export * from './sidebar-item-collapsible.js';

package/dist/esm/components/ui/sidebar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/sidebar/index.tsx"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAA;AAC9B,cAAc,sBAAsB,CAAA;AACpC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,uBAAuB,CAAA;AACrC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,yBAAyB,CAAA;AACvC,cAAc,uBAAuB,CAAA;AACrC,cAAc,oBAAoB,CAAA;AAClC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,kBAAkB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/sidebar/index.tsx"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAA;AAC9B,cAAc,sBAAsB,CAAA;AACpC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,uBAAuB,CAAA;AACrC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,oBAAoB,CAAA;AAClC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,kBAAkB,CAAA"}

package/dist/esm/components/ui/sidebar/index.js

@@ -4,6 +4,7 @@ export * from './sidebar-item-icon-button.js';
 export * from './sidebar-item-button.js';
 export * from './sidebar-item.js';
 export * from './sidebar-expand-button.js';
+export * from './sidebar-trigger.js';
 export * from './sidebar-back-button.js';
 export * from './sidebar-provider.js';
 export * from './sidebar-item-collapsible.js';

package/dist/esm/components/ui/sidebar/sidebar-expand-button.d.ts

@@ -7,6 +7,6 @@ type SidebarExpandButtonProps = {
      */
     tooltip?: string;
 };
-export declare const SidebarExpandButton: ({ tooltip }: SidebarExpandButtonProps) => React.JSX.Element;
+export declare const SidebarExpandButton: ({ tooltip }: SidebarExpandButtonProps) => React.JSX.Element | null;
 export {};
 //# sourceMappingURL=sidebar-expand-button.d.ts.map

package/dist/esm/components/ui/sidebar/sidebar-expand-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar-expand-button.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/sidebar/sidebar-expand-button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAYzB,KAAK,wBAAwB,GAAG;IAC9B;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB,CAAA;AAED,eAAO,MAAM,mBAAmB,GAAI,aAAa,wBAAwB,sBAyDxE,CAAA"}
+{"version":3,"file":"sidebar-expand-button.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/sidebar/sidebar-expand-button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAYzB,KAAK,wBAAwB,GAAG;IAC9B;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB,CAAA;AAED,eAAO,MAAM,mBAAmB,GAAI,aAAa,wBAAwB,6BAwExE,CAAA"}

package/dist/esm/components/ui/sidebar/sidebar-expand-button.js

@@ -7,7 +7,21 @@ import { SidebarFooter } from './sidebar-components.js';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../ui/tooltip/index.js';
 import { IconButton } from '../icon-button/index.js';
 export const SidebarExpandButton = ({ tooltip }) => {
-    const { isCollapsed, toggleSidebar } = useSidebar();
+    const { isCollapsed, isDrawer, toggleSidebar } = useSidebar();
+    /**
+     * Nothing to collapse in a drawer. The expanded branch below hangs its button
+     * at `right-[-20px]`, twenty pixels outside the rail — off the canvas of an
+     * overlay that has no page beside it — and collapsing to a 72px strip inside
+     * a 244px sheet is not a state worth reaching. The drawer's own close control
+     * and the backdrop are how it is dismissed.
+     *
+     * ⚠️ `isDrawer`, NOT `isMobile`. A consumer left on the default
+     * `mobile="inline"` still has a real rail below 768px, and its collapse
+     * control has to come with it.
+     */
+    if (isDrawer) {
+        return null;
+    }
     return (_jsxs(React.Fragment, { children: [!isCollapsed && (_jsx("div", { "data-slot": "sidebar-expand-button", className: "border-border bg-card flex w-full", children: _jsx("div", { className: "absolute right-[-20px] bottom-4", children: _jsx(IconButton, { variant: "secondary", rounded: true, onClick: toggleSidebar, "aria-label": tooltip || 'Collapse sidebar', "aria-expanded": true, children: _jsx(PanelLeftClose, { className: "text-muted-foreground" }) }) }) })), isCollapsed && (_jsx(SidebarFooter, { children: _jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger
                             // `hover:text-accent-foreground` on the TRIGGER, not only on
                             // the glyph below. The base ink here used to be base/400, which

package/dist/esm/components/ui/sidebar/sidebar-item.d.ts

@@ -9,5 +9,5 @@ export type SidebarItemProps = React.ComponentProps<typeof SidebarItemButton> &
     disabled?: boolean;
     children?: React.ReactNode;
 };
-export declare const SidebarItem: ({ active, href, children: _children, ...props }: SidebarItemProps) => React.JSX.Element;
+export declare const SidebarItem: ({ active, href, children: _children, onClick, ...props }: SidebarItemProps) => React.JSX.Element;
 //# sourceMappingURL=sidebar-item.d.ts.map

package/dist/esm/components/ui/sidebar/sidebar-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar-item.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/sidebar/sidebar-item.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAA;AACzD,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAA;AAIlE,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,iBAAiB,CAAC,GAC3E,KAAK,CAAC,cAAc,CAAC,OAAO,qBAAqB,CAAC,GAAG;IACnD,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;IACrB,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,CAAA;AAEH,eAAO,MAAM,WAAW,GAAI,iDAKzB,gBAAgB,sBA0BlB,CAAA"}
+{"version":3,"file":"sidebar-item.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/sidebar/sidebar-item.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAA;AACzD,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAA;AAIlE,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,iBAAiB,CAAC,GAC3E,KAAK,CAAC,cAAc,CAAC,OAAO,qBAAqB,CAAC,GAAG;IACnD,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;IACrB,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,CAAA;AAEH,eAAO,MAAM,WAAW,GAAI,0DAMzB,gBAAgB,sBAsDlB,CAAA"}

package/dist/esm/components/ui/sidebar/sidebar-item.js

@@ -4,13 +4,37 @@ import { SidebarItemButton } from './sidebar-item-button.js';
 import { SidebarItemIconButton } from './sidebar-item-icon-button.js';
 import { useSidebar } from './sidebar-provider.js';
 import { useSidebarRouter } from './sidebar-router.js';
-export const SidebarItem = ({ active, href, children: _children, ...props }) => {
+export const SidebarItem = ({ active, href, children: _children, onClick, ...props }) => {
     const { usePathname } = useSidebarRouter();
     const pathname = usePathname();
-    const { isCollapsed } = useSidebar();
+    const { isCollapsed, isDrawer, setOpenMobile } = useSidebar();
     const isActive = (href) => pathname === href;
+    /**
+     * ⛔ ACTIVATING A DESTINATION CLOSES THE DRAWER. It is the whole point of the
+     * drawer and it was the one interaction that left it open: Escape, the
+     * backdrop and the X all dismissed it, a navigation link did not.
+     *
+     * The overlay is modal, so `document.body` carries `pointer-events: none`
+     * while it is up, and a consumer's `SidebarItem` is a client-side `Link`
+     * under a provider that survives the route change — so the reader landed on
+     * the new page rendered INERT behind a drawer they had to dismiss a second
+     * time, on a phone.
+     *
+     * Here rather than in `SidebarRoot`, because this is the component that knows
+     * an activation happened; `SidebarBackButton` and every
+     * `SidebarItemCollapsibleContent` leaf render through it, so they are covered
+     * by construction. Guarded on `isDrawer` so an inline rail — where nothing is
+     * covering the page — behaves exactly as before, and the consumer's own
+     * handler still runs either way.
+     */
+    const handleClick = (event) => {
+        onClick?.(event);
+        if (isDrawer) {
+            setOpenMobile(false);
+        }
+    };
     if (isCollapsed) {
-        return (_jsx(SidebarItemIconButton, { "data-slot": "sidebar-item", href: href, active: isActive(href) || active, ...props }));
+        return (_jsx(SidebarItemIconButton, { "data-slot": "sidebar-item", href: href, active: isActive(href) || active, onClick: handleClick, ...props }));
     }
-    return (_jsx(SidebarItemButton, { "data-slot": "sidebar-item", href: href, active: isActive(href) || active, ...props }));
+    return (_jsx(SidebarItemButton, { "data-slot": "sidebar-item", href: href, active: isActive(href) || active, onClick: handleClick, ...props }));
 };

package/dist/esm/components/ui/sidebar/sidebar-provider.d.ts

@@ -1,12 +1,70 @@
 import React from 'react';
+/**
+ * The viewport below which the rail stops being a layout and becomes a drawer.
+ *
+ * ⛔ THE NEGATION OF THE TRIGGER'S QUERY, SPELLED AS A NEGATION.
+ *
+ * `SidebarTrigger` hides itself at `min-[768px]`, which is `width >= 768`. This
+ * is its exact complement AT ANY PRECISION, which `(max-width: 767px)` was not:
+ * that pair leaves the open interval (767, 768) matched by neither rule, and a
+ * viewport there draws the rail AND a hamburger that opens nothing — with the
+ * rail inline, `SidebarRoot` mounts no `Sheet`, so the control is dead. Chromium
+ * snaps its layout viewport to a whole pixel and never lands there, measured at
+ * four zoom levels; that is a rounding behaviour to rely on, not a boundary.
+ *
+ * ⚠️ THE PAIR HAS TO BE IN THE SAME UNIT. It used to be `md:hidden` over there,
+ * and `md` is 48rem: rem in a media query follows the BROWSER'S default font
+ * size, so at Chrome's "Small" setting that class hid the hamburger from 576px
+ * while this query still asked for a drawer up to 767px — a band of viewports
+ * with no navigation at all. Anything else that hides or shows a control at
+ * this boundary states it in pixels for the same reason.
+ *
+ * Media Queries Level 4 boolean logic, which is not a new requirement here:
+ * Tailwind v4 emits MQ4 RANGE syntax for everything this package ships —
+ * `min-[768px]` on the trigger compiles to `@media (width >= 768px)` and
+ * `max-sm:` on `SheetContent` to `@media (width < 40rem)` — and range syntax
+ * and boolean `not` landed in the same browsers (Chrome 88, Firefox 64,
+ * Safari 16.4). `(width < 768px)` is the equivalent range spelling of this
+ * line, should a reader prefer the pair to match character for character.
+ */
+export declare const SIDEBAR_MOBILE_QUERY = "not (min-width: 768px)";
 export type SidebarContextProps = {
     isCollapsed: boolean;
+    /**
+     * True only inside a drawer that `SidebarRoot` is actually rendering, which
+     * needs `mobile="drawer"` as well as a narrow viewport. `SidebarRoot`
+     * re-provides the context for that subtree; nothing else sets it.
+     */
+    isDrawer: boolean;
+    /**
+     * True while the viewport is narrow enough for a drawer. Reported in BOTH
+     * modes, so a consumer still on `mobile="inline"` can build its own
+     * responsive behaviour from it.
+     */
+    isMobile: boolean;
+    /** Whether the mobile drawer is showing. Meaningless while `isMobile` is false. */
+    openMobile: boolean;
+    setOpenMobile: (open: boolean) => void;
+    /**
+     * Puts focus back on whatever opened the drawer. `SidebarRoot` calls it when
+     * the drawer closes; nothing else should need it.
+     */
+    restoreDrawerFocus: () => void;
+    /** The drawer's DOM id, so `SidebarTrigger` can point `aria-controls` at it. */
+    sidebarId: string;
     items: Record<string, boolean>;
     setItems: React.Dispatch<React.SetStateAction<Record<string, boolean>>>;
     getItemCollapsed: (key: string) => boolean;
     setItemCollapsed: (key: string, value: boolean) => void;
     toggleSidebar: () => void;
 };
+/**
+ * Exported so `SidebarRoot` can re-provide it for the drawer's subtree. That
+ * subtree is the only place `isCollapsed` and `isDrawer` differ from the
+ * provider's own values, and scoping the override to it is what keeps a
+ * consumer on `mobile="inline"` seeing exactly today's rail.
+ */
+export declare const SidebarContext: React.Context<SidebarContextProps | undefined>;
 export declare const useSidebar: () => SidebarContextProps;
 export declare const SidebarProvider: ({ children }: React.PropsWithChildren) => React.JSX.Element;
 //# sourceMappingURL=sidebar-provider.d.ts.map

package/dist/esm/components/ui/sidebar/sidebar-provider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar-provider.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/sidebar/sidebar-provider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,MAAM,MAAM,mBAAmB,GAAG;IAChC,WAAW,EAAE,OAAO,CAAA;IACpB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IAC9B,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,CAAA;IACvE,gBAAgB,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAA;IAC1C,gBAAgB,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;IACvD,aAAa,EAAE,MAAM,IAAI,CAAA;CAC1B,CAAA;AAMD,eAAO,MAAM,UAAU,2BAMtB,CAAA;AAED,eAAO,MAAM,eAAe,GAAI,cAAc,KAAK,CAAC,iBAAiB,sBAqDpE,CAAA"}
+{"version":3,"file":"sidebar-provider.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/sidebar/sidebar-provider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,eAAO,MAAM,oBAAoB,2BAA2B,CAAA;AAU5D,MAAM,MAAM,mBAAmB,GAAG;IAChC,WAAW,EAAE,OAAO,CAAA;IACpB;;;;OAIG;IACH,QAAQ,EAAE,OAAO,CAAA;IACjB;;;;OAIG;IACH,QAAQ,EAAE,OAAO,CAAA;IACjB,mFAAmF;IACnF,UAAU,EAAE,OAAO,CAAA;IACnB,aAAa,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC;;;OAGG;IACH,kBAAkB,EAAE,MAAM,IAAI,CAAA;IAC9B,gFAAgF;IAChF,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IAC9B,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,CAAA;IACvE,gBAAgB,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAA;IAC1C,gBAAgB,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;IACvD,aAAa,EAAE,MAAM,IAAI,CAAA;CAC1B,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,cAAc,gDAEf,CAAA;AAEZ,eAAO,MAAM,UAAU,2BAMtB,CAAA;AAED,eAAO,MAAM,eAAe,GAAI,cAAc,KAAK,CAAC,iBAAiB,sBAkKpE,CAAA"}

package/dist/esm/components/ui/sidebar/sidebar-provider.js

@@ -2,7 +2,49 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { getStorage, getStorageObject } from '../../../lib/storage/index.js';
-const SidebarContext = React.createContext(undefined);
+/**
+ * The viewport below which the rail stops being a layout and becomes a drawer.
+ *
+ * ⛔ THE NEGATION OF THE TRIGGER'S QUERY, SPELLED AS A NEGATION.
+ *
+ * `SidebarTrigger` hides itself at `min-[768px]`, which is `width >= 768`. This
+ * is its exact complement AT ANY PRECISION, which `(max-width: 767px)` was not:
+ * that pair leaves the open interval (767, 768) matched by neither rule, and a
+ * viewport there draws the rail AND a hamburger that opens nothing — with the
+ * rail inline, `SidebarRoot` mounts no `Sheet`, so the control is dead. Chromium
+ * snaps its layout viewport to a whole pixel and never lands there, measured at
+ * four zoom levels; that is a rounding behaviour to rely on, not a boundary.
+ *
+ * ⚠️ THE PAIR HAS TO BE IN THE SAME UNIT. It used to be `md:hidden` over there,
+ * and `md` is 48rem: rem in a media query follows the BROWSER'S default font
+ * size, so at Chrome's "Small" setting that class hid the hamburger from 576px
+ * while this query still asked for a drawer up to 767px — a band of viewports
+ * with no navigation at all. Anything else that hides or shows a control at
+ * this boundary states it in pixels for the same reason.
+ *
+ * Media Queries Level 4 boolean logic, which is not a new requirement here:
+ * Tailwind v4 emits MQ4 RANGE syntax for everything this package ships —
+ * `min-[768px]` on the trigger compiles to `@media (width >= 768px)` and
+ * `max-sm:` on `SheetContent` to `@media (width < 40rem)` — and range syntax
+ * and boolean `not` landed in the same browsers (Chrome 88, Firefox 64,
+ * Safari 16.4). `(width < 768px)` is the equivalent range spelling of this
+ * line, should a reader prefer the pair to match character for character.
+ */
+export const SIDEBAR_MOBILE_QUERY = 'not (min-width: 768px)';
+/**
+ * Where focus goes when the rail has to receive it. The rail's own content is
+ * links and buttons, so this is deliberately the short list rather than the
+ * full tabbable grammar: a `[tabindex]` sweep would have to exclude `-1`, and
+ * nothing in a sidebar carries one.
+ */
+const FOCUSABLE = 'a[href], button:not([disabled])';
+/**
+ * Exported so `SidebarRoot` can re-provide it for the drawer's subtree. That
+ * subtree is the only place `isCollapsed` and `isDrawer` differ from the
+ * provider's own values, and scoping the override to it is what keeps a
+ * consumer on `mobile="inline"` seeing exactly today's rail.
+ */
+export const SidebarContext = React.createContext(undefined);
 export const useSidebar = () => {
     const context = React.useContext(SidebarContext);
     if (!context) {
@@ -14,6 +56,61 @@ export const SidebarProvider = ({ children }) => {
     const [hydrated, setHydrated] = React.useState(false);
     const [collapsed, setCollapsed] = React.useState(false);
     const [items, _setItems] = React.useState({});
+    const [isMobile, setIsMobile] = React.useState(false);
+    const [openMobile, _setOpenMobile] = React.useState(false);
+    const sidebarId = React.useId();
+    /**
+     * ⛔ RADIX CANNOT RESTORE THIS FOCUS BY ITSELF. `DialogContent` preventDefaults
+     * the focus scope's own restore and focuses `triggerRef.current` instead —
+     * the ref a `SheetTrigger` would have filled. The drawer is opened from this
+     * state rather than from a trigger inside the dialog, so that ref is null and
+     * closing dropped focus onto `<body>`: a keyboard reader who opened the
+     * navigation and pressed Escape was returned to the top of the document.
+     *
+     * Captured here rather than in `SidebarTrigger` so that a consumer opening
+     * the drawer from its own control gets the same behaviour.
+     */
+    const opener = React.useRef(null);
+    const setOpenMobile = React.useCallback((open) => {
+        if (open && typeof document !== 'undefined') {
+            opener.current = document.activeElement;
+        }
+        _setOpenMobile(open);
+    }, []);
+    /**
+     * ⛔ THE VIEWPORT AT THE MOMENT FOCUS MOVES, NOT AT THE MOMENT IT OPENED.
+     *
+     * Radix calls `restoreDrawerFocus` from the focus scope's UNMOUNT handler,
+     * which is the last thing in the commit to touch focus — later than any
+     * effect in this provider, so the decision has to be made inside the handler
+     * rather than beside it. By then `isMobile` has already flipped.
+     */
+    const isMobileRef = React.useRef(false);
+    isMobileRef.current = isMobile;
+    const restoreDrawerFocus = React.useCallback(() => {
+        // `isConnected`: the control that opened the drawer may itself have been
+        // unmounted by whatever the reader did inside it.
+        //
+        // ⛔ AND NOT AT ALL WHEN THE VIEWPORT IS THE ONE THAT DISMISSED IT. A
+        // tablet rotated from portrait to landscape with the navigation open
+        // crosses 768px, so the drawer is replaced by the rail and the opener is
+        // `SidebarTrigger` — which the same breakpoint just hid.
+        // `.focus()` on a `display: none` element is a silent no-op, and Radix's
+        // own restore is already `preventDefault()`ed, so focus fell to `<body>`
+        // and the reader lost their place (SC 2.4.3). Measured in Chromium at
+        // 390 → 1280: `{"rails":1,"triggerDisplay":"none","focus":"BODY:"}`.
+        if (isMobileRef.current && opener.current?.isConnected) {
+            opener.current.focus();
+            return;
+        }
+        // The rail is what the drawer became, so that is where the reader goes.
+        // Below the breakpoint there is nothing here to find — a closed drawer
+        // leaves no navigation in the DOM — and focus stays where Radix left it.
+        document
+            .getElementById(sidebarId)
+            ?.querySelector(FOCUSABLE)
+            ?.focus();
+    }, [sidebarId]);
     const toggleSidebar = () => setCollapsed((collapsed) => !collapsed);
     const getItemCollapsed = (key) => {
         return items[key] || false;
@@ -27,6 +124,37 @@ export const SidebarProvider = ({ children }) => {
         _setItems(getStorageObject('sidebar-items', {}));
         setHydrated(true);
     }, []);
+    /**
+     * ⚠️ FALSE UNTIL THE CLIENT SAYS OTHERWISE. There is no viewport on the
+     * server, so the first paint is always the rail and the drawer appears on
+     * hydration; starting from a guess would make the markup differ between the
+     * two renders. The `matchMedia` guard is the one `theme-provider.tsx` next
+     * door already carries: jsdom and some embedded runtimes ship without it, and
+     * a missing media API is a desktop, not a crash.
+     */
+    React.useEffect(() => {
+        if (typeof window.matchMedia !== 'function') {
+            return;
+        }
+        const media = window.matchMedia(SIDEBAR_MOBILE_QUERY);
+        const sync = () => setIsMobile(media.matches);
+        sync();
+        media.addEventListener('change', sync);
+        return () => media.removeEventListener('change', sync);
+    }, []);
+    /**
+     * A drawer left open while the viewport grows back would keep an overlay and
+     * a focus trap over a layout that is already showing its rail, with nothing
+     * on screen to dismiss them.
+     *
+     * Where focus goes afterwards is `restoreDrawerFocus`'s decision, not this
+     * effect's: Radix's unmount handler runs later than anything here.
+     */
+    React.useEffect(() => {
+        if (!isMobile) {
+            _setOpenMobile(false);
+        }
+    }, [isMobile]);
     // Only persist to localStorage after hydration to avoid overwriting stored values
     React.useEffect(() => {
         if (!hydrated) {
@@ -41,7 +169,21 @@ export const SidebarProvider = ({ children }) => {
         localStorage.setItem('sidebar-items', JSON.stringify(items));
     }, [items, hydrated]);
     return (_jsx(SidebarContext.Provider, { value: {
+            /**
+             * ⚠️ A NARROW VIEWPORT DOES NOT TOUCH THIS. It used to be forced false
+             * whenever `isMobile`, which silently changed the rail for every
+             * consumer — including the ones that never asked for a drawer.
+             * `SidebarRoot` overrides it for the drawer's own subtree instead, so
+             * the stored preference reaches an inline rail unchanged at every
+             * viewport.
+             */
             isCollapsed: collapsed,
+            isDrawer: false,
+            isMobile,
+            openMobile,
+            setOpenMobile,
+            restoreDrawerFocus,
+            sidebarId,
             items,
             setItems: _setItems,
             getItemCollapsed,