@lerianstudio/sindarian-ui 2.0.0-beta.25 → 2.0.0-beta.27

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

@@ -1,40 +1 @@
-'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
-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, onClick, ...props }) => {
-    const { usePathname } = useSidebarRouter();
-    const pathname = usePathname();
-    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, onClick: handleClick, ...props }));
-    }
-    return (_jsx(SidebarItemButton, { "data-slot": "sidebar-item", href: href, active: isActive(href) || active, onClick: handleClick, ...props }));
-};
+"use client";import{jsx as a}from"react/jsx-runtime";import{SidebarItemButton as b}from"./sidebar-item-button.js";import{SidebarItemIconButton as f}from"./sidebar-item-icon-button.js";import{useSidebar as p}from"./sidebar-provider.js";import{useSidebarRouter as S}from"./sidebar-router.js";export const SidebarItem=({active:i,href:t,children:h,onClick:n,...o})=>{const{usePathname:m}=S();const c=m();const{isCollapsed:d,isDrawer:l,setOpenMobile:u}=p();const r=e=>c===e;const s=e=>{n?.(e);if(l){u(false)}};if(d){return a(f,{"data-slot":"sidebar-item",href:t,active:r(t)||i,onClick:s,...o})}return a(b,{"data-slot":"sidebar-item",href:t,active:r(t)||i,onClick:s,...o})};

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

@@ -1,193 +1 @@
-'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
-import { getStorage, getStorageObject } from '../../../lib/storage/index.js';
-/**
- * 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) {
-        throw new Error('useSidebar must be used within a SidebarProvider');
-    }
-    return context;
-};
-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;
-    };
-    const setItemCollapsed = (key, value) => {
-        _setItems((items) => ({ ...items, [key]: value }));
-    };
-    // Read from localStorage after hydration to avoid SSR mismatch
-    React.useEffect(() => {
-        setCollapsed(getStorage('sidebar-collapsed', false) === 'true');
-        _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) {
-            return;
-        }
-        localStorage.setItem('sidebar-collapsed', JSON.stringify(collapsed));
-    }, [collapsed, hydrated]);
-    React.useEffect(() => {
-        if (!hydrated) {
-            return;
-        }
-        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,
-            setItemCollapsed,
-            toggleSidebar
-        }, children: children }));
-};
+"use client";import{jsx as w}from"react/jsx-runtime";import e from"react";import{getStorage as y,getStorageObject as M}from"../../../lib/storage/index.js";export const SIDEBAR_MOBILE_QUERY="not (min-width: 768px)";const v="a[href], button:not([disabled])";export const SidebarContext=e.createContext(void 0);export const useSidebar=()=>{const r=e.useContext(SidebarContext);if(!r){throw new Error("useSidebar must be used within a SidebarProvider")}return r};export const SidebarProvider=({children:r})=>{const[o,b]=e.useState(false);const[c,l]=e.useState(false);const[n,i]=e.useState({});const[a,p]=e.useState(false);const[S,f]=e.useState(false);const u=e.useId();const d=e.useRef(null);const g=e.useCallback(t=>{if(t&&typeof document!=="undefined"){d.current=document.activeElement}f(t)},[]);const m=e.useRef(false);m.current=a;const E=e.useCallback(()=>{if(m.current&&d.current?.isConnected){d.current.focus();return}document.getElementById(u)?.querySelector(v)?.focus()},[u]);const I=()=>l(t=>!t);const h=t=>{return n[t]||false};const x=(t,s)=>{i(C=>({...C,[t]:s}))};e.useEffect(()=>{l(y("sidebar-collapsed",false)==="true");i(M("sidebar-items",{}));b(true)},[]);e.useEffect(()=>{if(typeof window.matchMedia!=="function"){return}const t=window.matchMedia(SIDEBAR_MOBILE_QUERY);const s=()=>p(t.matches);s();t.addEventListener("change",s);return()=>t.removeEventListener("change",s)},[]);e.useEffect(()=>{if(!a){f(false)}},[a]);e.useEffect(()=>{if(!o){return}localStorage.setItem("sidebar-collapsed",JSON.stringify(c))},[c,o]);e.useEffect(()=>{if(!o){return}localStorage.setItem("sidebar-items",JSON.stringify(n))},[n,o]);return w(SidebarContext.Provider,{value:{isCollapsed:c,isDrawer:false,isMobile:a,openMobile:S,setOpenMobile:g,restoreDrawerFocus:E,sidebarId:u,items:n,setItems:i,getItemCollapsed:h,setItemCollapsed:x,toggleSidebar:I},children:r})};

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

@@ -1,126 +1 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cva } from 'class-variance-authority';
-import { SidebarContext, useSidebar } from './sidebar-provider.js';
-import { cn } from '../../../lib/utils.js';
-import { Sheet, SheetContent, SheetTitle } from '../sheet/index.js';
-/**
- * ⛔ THE WIDTHS ARE TOKENS, NOT LITERALS.
- *
- * They were `w-[72px]` and `w-[244px]`, which a consumer could only override by
- * winning a specificity argument with `cn`. `--sidebar-width` and
- * `--sidebar-width-collapsed` are declared in `tokens.css`, so the default
- * still ships with the stylesheet, and a consumer re-points either one with
- * `className="[--sidebar-width:280px]"` ON THE RAIL, which moves the rail and
- * the mobile drawer together (see `liftWidthOverrides` below), or with a rule
- * on `:root`/`html`.
- *
- * ⚠️ A DECLARATION ON A REACT-TREE ANCESTOR REACHES THE RAIL AND NOT THE
- * DRAWER. Custom properties inherit down the DOM tree, and the drawer is
- * portalled to `document.body`, so a layout wrapper is not an ancestor of it.
- * `:root` is, which is why it is named above and a wrapper is not.
- */
-const sidebarVariants = cva('group/sidebar shadow-sidebar relative flex flex-col transition-[width] duration-300 ease-in-out', {
-    variants: {
-        collapsed: {
-            true: 'w-[var(--sidebar-width-collapsed)]',
-            false: 'w-[var(--sidebar-width)]'
-        }
-    },
-    defaultVariants: {
-        collapsed: false
-    }
-});
-/**
- * Tailwind arbitrary-property classes that re-point the sidebar geometry, e.g.
- * `[--sidebar-width:320px]` or `[--sidebar-width-collapsed:88px]`.
- *
- * ⚠️ ANCHORED TO A CLASS BOUNDARY, WHICH IS THE WHOLE POINT OF THE LOOKBEHIND.
- * Unanchored it also matched the tail of `md:[--sidebar-width:320px]` and
- * lifted it with the prefix stripped — an override a consumer scoped to
- * ≥768px, applied unconditionally to the drawer that only exists below it.
- */
-const WIDTH_OVERRIDE = /(?<=^|\s)\[--sidebar-width(?:-collapsed)?:[^\]]+\]/g;
-/**
- * ⛔ THE ONE PART OF THE CONSUMER'S className THAT HAS TO CROSS THE PORTAL.
- *
- * `SheetContent` mounts through `SheetPortal` into `document.body`, and custom
- * properties inherit down the DOM tree rather than the React tree. So the
- * documented override — a class on the rail — set `--sidebar-width` on an
- * element the drawer is not a descendant of, and the whole className that DOES
- * travel lands on the inner `<nav>`, which is BELOW the element that reads the
- * variable. Measured in Chromium: rail 320px, drawer 244px. Following the
- * instruction handed to product-console produced a 280px rail on desktop and a
- * 244px drawer on a phone, silently.
- *
- * ⚠️ ONLY THE GEOMETRY TOKENS. The rest of a rail className is rail-shaped —
- * `h-full`, and the `data-[collapsed=false]:min-w-70` all eight console
- * sidebars pass — and putting that on the sheet would reinstate the
- * 280px-inside-a-244px-sheet overflow from the other side.
- */
-function liftWidthOverrides(className) {
-    return className?.match(WIDTH_OVERRIDE)?.join(' ');
-}
-/**
- * ⛔ BELOW 768px A RAIL IS NOT A LAYOUT — once a consumer opts in.
- *
- * The widths above are a fixed share of a flex row, so at 390px the expanded
- * rail took 63% of the screen and left the page 146px, and the only affordance
- * — `SidebarExpandButton` — shrinks it to 72px, which is still 18% and still
- * permanently on screen. There was nothing that removed it.
- *
- * With `mobile="drawer"` the rail is replaced below the breakpoint by an
- * overlay drawer. Escape, the backdrop click, the focus trap and returning
- * focus to whatever opened it are Radix Dialog's, through the kit's own
- * `Sheet`; none of that is re-implemented here.
- */
-export const SidebarRoot = ({ className, id, mobile = 'inline', mobileTitle = 'Navigation', mobileCloseLabel = 'Close', ...props }) => {
-    const context = useSidebar();
-    const { isCollapsed, isMobile, openMobile, setOpenMobile, restoreDrawerFocus, sidebarId } = context;
-    if (!isMobile || mobile === 'inline') {
-        return (_jsx("nav", { "data-slot": "sidebar-root", className: cn(sidebarVariants({ collapsed: isCollapsed }), className), "data-collapsed": isCollapsed, ...props, id: mobile === 'drawer' ? sidebarId : id }));
-    }
-    return (_jsx(SidebarContext.Provider, { value: { ...context, isCollapsed: false, isDrawer: true }, children: _jsx(Sheet, { open: openMobile, onOpenChange: setOpenMobile, children: _jsxs(SheetContent, { side: "left", closeLabel: mobileCloseLabel, 
-                // The Sheet's own paddings are built for a form panel; a rail brings
-                // its own. `max-w-full` so a consumer widening `--sidebar-width` past
-                // the viewport still cannot push the drawer off screen. The lifted
-                // override goes LAST so it re-points the variable this element reads.
-                //
-                // ⛔ THE `max-sm:` PAIR IS NOT A DUPLICATE. `SheetContent` grew a
-                // phone step — `max-sm:w-full max-sm:px-4` — because a form panel at
-                // two fifths of a 390px screen is unreadable. A NAVIGATION drawer is
-                // the one panel that must not take it: 244px over a dimmed page is
-                // the design, and full-bleed removes the tap-outside-to-close target
-                // that every other way out of this drawer is an alternative to.
-                // tailwind-merge drops a conflicting class only when the modifiers
-                // match, so a bare `w-[…]` cannot reach `max-sm:w-full` and these two
-                // tokens are what state the exemption. Measured: without them the
-                // drawer is 390px wide with 16px of inset on a 390px phone.
-                className: cn('w-[var(--sidebar-width)] max-w-full gap-0 p-0 max-sm:w-[var(--sidebar-width)] max-sm:p-0', liftWidthOverrides(className)), "aria-describedby": undefined, 
-                // ⛔ RADIX'S OWN RESTORE GOES NOWHERE HERE. `DialogContent`
-                // preventDefaults the focus scope's restore and focuses the ref a
-                // `SheetTrigger` would have filled; this drawer is opened from provider
-                // state, so that ref is null and closing dropped focus onto `<body>`.
-                // Running first means `composeEventHandlers` skips Radix's half.
-                onCloseAutoFocus: (event) => {
-                    event.preventDefault();
-                    restoreDrawerFocus();
-                }, children: [_jsx(SheetTitle, { className: "sr-only", children: mobileTitle }), _jsx("nav", { "data-slot": "sidebar-root", "data-mobile": "true", 
-                        /* ⛔ NO `data-collapsed` HERE. The consumer className is forwarded
-                           verbatim, and all eight console sidebars pass
-                           `data-[collapsed=false]:min-w-70`; stamping the attribute armed
-                           it, giving the navigation a 280px min-width inside a 244px sheet.
-                           `min-width` resolves after `max-width`, so the sheet could not
-                           claw it back and the contents were 36px wider than the drawer.
-                           `data-mobile` already names this surface and a drawer is never
-                           collapsed, so the attribute had nothing left to say. */
-                        className: cn(sidebarVariants({ collapsed: false }), 'h-full w-full shadow-none', className), ...props, 
-                        /* ⛔ AFTER THE SPREAD, AND NOT THE CALLER'S. This is the target of
-                           `SidebarTrigger`'s `aria-controls` and the handle the provider
-                           uses to put focus back into the navigation when the viewport
-                           grows. Spread first, a caller that set `id` replaced it and left
-                           a dangling `aria-controls` — which axe reports as a CRITICAL
-                           `aria-valid-attr-value` — and a focus restore that lands on
-                           `<body>`. Both silent. */
-                        id: sidebarId })] }) }) }));
-};
+"use client";import{jsx as a,jsxs as w}from"react/jsx-runtime";import{cva as v}from"class-variance-authority";import{SidebarContext as x,useSidebar as C}from"./sidebar-provider.js";import{cn as s}from"../../../lib/utils.js";import{Sheet as S,SheetContent as g,SheetTitle as j}from"../sheet/index.js";const d=v("group/sidebar shadow-sidebar relative flex flex-col transition-[width] duration-300 ease-in-out",{variants:{collapsed:{true:"w-[var(--sidebar-width-collapsed)]",false:"w-[var(--sidebar-width)]"}},defaultVariants:{collapsed:false}});const D=/(?<=^|\s)\[--sidebar-width(?:-collapsed)?:[^\]]+\]/g;function O(e){return e?.match(D)?.join(" ")}export const SidebarRoot=({className:e,id:n,mobile:r="inline",mobileTitle:c="Navigation",mobileCloseLabel:p="Close",...i})=>{const t=C();const{isCollapsed:o,isMobile:u,openMobile:f,setOpenMobile:b,restoreDrawerFocus:h,sidebarId:l}=t;if(!u||r==="inline"){return a("nav",{"data-slot":"sidebar-root",className:s(d({collapsed:o}),e),"data-collapsed":o,...i,id:r==="drawer"?l:n})}return a(x.Provider,{value:{...t,isCollapsed:false,isDrawer:true},children:a(S,{open:f,onOpenChange:b,children:w(g,{side:"left",closeLabel:p,className:s("w-[var(--sidebar-width)] max-w-full gap-0 p-0 max-sm:w-[var(--sidebar-width)] max-sm:p-0",O(e)),"aria-describedby":void 0,onCloseAutoFocus:m=>{m.preventDefault();h()},children:[a(j,{className:"sr-only",children:c}),a("nav",{"data-slot":"sidebar-root","data-mobile":"true",className:s(d({collapsed:false}),"h-full w-full shadow-none",e),...i,id:l})]})})})};

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

@@ -1,89 +1 @@
-'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * Router injection for the sidebar's links.
- *
- * The sidebar needs exactly two things from a router: a component that renders
- * a client-side-navigating link, and a way to read the current pathname (for
- * the active item). Nothing else.
- *
- * Resolution order, per render:
- *   1. a mounted <SidebarRouterProvider> — what a Vite/TanStack Router app uses
- *   2. next/link + next/navigation, when the app runs under Next.js
- *   3. a plain <a> (full page loads) + a dev-only warning
- *
- * Step 2 is why a Next.js app needs no provider and no code change: the default
- * still routes through next/link exactly as the hard import used to.
- */
-import * as React from 'react';
-import { loadNextRouter } from './next-router.cjs';
-const SidebarRouterContext = React.createContext(null);
-/**
- * Teaches the sidebar how to navigate. Mount it above any sidebar in an app
- * that is not Next.js:
- *
- *   <SidebarRouterProvider router={{ Link: MyLink, usePathname: useMyPathname }}>
- *
- * Keep `router` referentially stable (module constant or useMemo): `usePathname`
- * is called as a hook, so swapping the object for a different implementation
- * mid-tree would change hook identity.
- */
-export function SidebarRouterProvider({ router, children }) {
-    return (_jsx(SidebarRouterContext.Provider, { value: router, children: children }));
-}
-/**
- * Resolve Next's router once, at module load, so the returned object — and
- * therefore `usePathname`'s identity — is stable across renders.
- *
- * The resolution itself lives in `next-router.cjs`: it needs a literal
- * `require`, which exists in the CommonJS output but not in the ESM one. That
- * file is CommonJS in both builds, so a Next.js consumer keeps client-side
- * navigation whichever format its bundler picks. See the file for the details.
- */
-const NEXT_ROUTER = loadNextRouter();
-let warned = false;
-/**
- * The router-only props, as a runtime key set. Typed `Record<keyof
- * RouterOnlyLinkProps, true>` so it is exhaustive BY CONSTRUCTION: adding a
- * prop to the type without listing it here is a compile error, and the two can
- * never drift. Forwarding any of these to a DOM `<a>` earns a React
- * unknown-attribute warning.
- */
-const ROUTER_ONLY_PROPS = {
-    as: true,
-    replace: true,
-    scroll: true,
-    shallow: true,
-    passHref: true,
-    prefetch: true,
-    unstable_dynamicOnHover: true,
-    locale: true,
-    legacyBehavior: true,
-    onNavigate: true,
-    transitionTypes: true
-};
-/** Last resort: a real link that costs a full page load. Warns once, in dev. */
-function PlainLink({ href, children, ...rest }) {
-    if (!warned && process.env.NODE_ENV !== 'production') {
-        warned = true;
-        console.warn('sindarian-ui: sidebar links are falling back to plain <a>, so every ' +
-            'navigation reloads the page and no item will show as active. Mount ' +
-            '<SidebarRouterProvider router={{ Link, usePathname }}> above the ' +
-            "sidebar with your router's equivalents.");
-    }
-    const anchorProps = { ...rest };
-    for (const key of Object.keys(ROUTER_ONLY_PROPS))
-        delete anchorProps[key];
-    return (_jsx("a", { href: href, ...anchorProps, children: children }));
-}
-const FALLBACK_ROUTER = {
-    Link: PlainLink,
-    // No router, no truth. Returning '' marks nothing active rather than
-    // guessing from location.pathname, which would go stale on the first
-    // client-side navigation anyway.
-    usePathname: () => ''
-};
-/** The router the sidebar should use: injected, else Next, else plain anchors. */
-export function useSidebarRouter() {
-    return (React.useContext(SidebarRouterContext) ?? NEXT_ROUTER ?? FALLBACK_ROUTER);
-}
+"use client";import{jsx as o}from"react/jsx-runtime";import*as n from"react";import{loadNextRouter as l}from"./next-router.cjs";const a=n.createContext(null);export function SidebarRouterProvider({router:e,children:r}){return o(a.Provider,{value:e,children:r})}const c=l();let i=false;const d={as:true,replace:true,scroll:true,shallow:true,passHref:true,prefetch:true,unstable_dynamicOnHover:true,locale:true,legacyBehavior:true,onNavigate:true,transitionTypes:true};function f({href:e,children:r,...s}){if(!i&&process.env.NODE_ENV!=="production"){i=true;console.warn("sindarian-ui: sidebar links are falling back to plain <a>, so every navigation reloads the page and no item will show as active. Mount <SidebarRouterProvider router={{ Link, usePathname }}> above the sidebar with your router's equivalents.")}const t={...s};for(const u of Object.keys(d))delete t[u];return o("a",{href:e,...t,children:r})}const p={Link:f,usePathname:()=>""};export function useSidebarRouter(){return n.useContext(a)??c??p}

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

@@ -1,53 +1 @@
-'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Menu } from 'lucide-react';
-import { cn } from '../../../lib/utils.js';
-import { IconButton } from '../icon-button/index.js';
-import { useSidebar } from './sidebar-provider.js';
-/**
- * The control that opens the mobile drawer.
- *
- * Hidden from 768px up by default, because above it the rail is already on
- * screen and a second way to reach it is a second thing to explain; a consumer
- * that wants it everywhere passes its own display class.
- *
- * ⛔ THE BREAKPOINT IS IN PIXELS, AND `md:hidden` IS NOT A SPELLING OF IT.
- *
- * Whether the rail became a drawer is decided by `SIDEBAR_MOBILE_QUERY`, which
- * is `not (min-width: 768px)` — pixels. `md:` is 48rem, and rem inside a MEDIA
- * QUERY resolves against the browser's default font size rather than anything
- * the page declares, so the two flip at different widths the moment a reader
- * changes that setting. At Chrome's "Small" (12px) `md:` turns over at 576px
- * while the drawer still turns over at 768px: every window between them showed
- * NO RAIL AND NO HAMBURGER, which is a console with no navigation at all.
- * Measured on product-console; the band is four of this package's own fixtures
- * in `scripts/measure-phone-shapes.mjs`. At "Very large" (20px) the same
- * mismatch runs the other way and 768–959px drew both.
- *
- * `min-[768px]:hidden` is the exact complement of that query, at every font
- * size AND at any sub-pixel precision — which is why the query next door is
- * spelled as a negation rather than as `(max-width: 767px)`: that pair leaves
- * the open interval (767, 768) matched by neither, and a viewport there draws
- * the rail plus a hamburger that opens nothing.
- *
- * ⚠️ THE PROPERTY IS ABOUT THE TWO MEDIA DECISIONS, NOT ABOUT THE FIRST PAINT.
- * The harness enforces one of the two and never neither or both, which holds
- * wherever `isMobile` has been read. `isMobile` starts false on purpose — there
- * is no viewport on the server — and is corrected in an effect, so on a phone
- * the first painted frame shows the inline rail while this control is already
- * on screen. That one hydration is the deliberate price of hydration safety,
- * documented on `SidebarProvider`'s own effect, and predates this class.
- *
- * ⚠️ `aria-controls` IS SET ONLY WHILE THE DRAWER EXISTS. Radix unmounts the
- * dialog content when closed, and a reference to an element that is not in the
- * DOM is what axe-core reports as a CRITICAL `aria-valid-attr-value` — the same
- * defect the Autocomplete panel was repaired for (console-sdk#150). A toggle
- * with `aria-expanded="false"` and no `aria-controls` is complete on its own.
- */
-export const SidebarTrigger = ({ className, onClick, 'aria-label': ariaLabel = 'Open navigation', ...props }) => {
-    const { openMobile, setOpenMobile, sidebarId } = useSidebar();
-    return (_jsx(IconButton, { type: "button", variant: "outline", "data-slot": "sidebar-trigger", "aria-label": ariaLabel, "aria-expanded": openMobile, "aria-controls": openMobile ? sidebarId : undefined, className: cn('min-[768px]:hidden', className), onClick: (event) => {
-            onClick?.(event);
-            setOpenMobile(!openMobile);
-        }, ...props, children: _jsx(Menu, { "aria-hidden": true }) }));
-};
+"use client";import{jsx as r}from"react/jsx-runtime";import{Menu as l}from"lucide-react";import{cn as m}from"../../../lib/utils.js";import{IconButton as p}from"../icon-button/index.js";import{useSidebar as b}from"./sidebar-provider.js";export const SidebarTrigger=({className:i,onClick:a,"aria-label":n="Open navigation",...o})=>{const{openMobile:e,setOpenMobile:t,sidebarId:d}=b();return r(p,{type:"button",variant:"outline","data-slot":"sidebar-trigger","aria-label":n,"aria-expanded":e,"aria-controls":e?d:void 0,className:m("min-[768px]:hidden",i),onClick:s=>{a?.(s);t(!e)},...o,children:r(l,{"aria-hidden":true})})};

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

@@ -1,6 +1 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from '../../../lib/utils.js';
-function Skeleton({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "skeleton", className: cn('bg-muted rounded-md motion-safe:animate-pulse', className), ...props }));
-}
-export { Skeleton };
+import{jsx as t}from"react/jsx-runtime";import{cn as m}from"../../../lib/utils.js";function n({className:e,...o}){return t("div",{"data-slot":"skeleton",className:m("bg-muted rounded-md motion-safe:animate-pulse",e),...o})}export{n as Skeleton};

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

@@ -1,20 +1 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { cn } from '../../../lib/utils.js';
-import { CircleCheck } from 'lucide-react';
-import { Skeleton } from '../skeleton/index.js';
-export function Stepper({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "stepper", className: cn('stepper', className), ...props }));
-}
-export function StepperItem({ className, active = false, complete = false, ...props }) {
-    return (_jsx("div", { "data-slot": "stepper-item", "data-active": active, "data-complete": complete, className: cn('stepper-item group', className), ...props }));
-}
-export function StepperItemNumber({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "stepper-item-number", className: cn('stepper-item-number', className), ...props }));
-}
-export function StepperItemText({ className, title, description, ...props }) {
-    return (_jsxs("div", { "data-slot": "stepper-item-text", className: cn('stepper-item-text', className), ...props, children: [_jsxs("div", { className: "stepper-item-title", children: [_jsx("p", { children: title }), _jsx(CircleCheck, { className: "stepper-item-icon", width: 16, height: 16 })] }), description && _jsx("p", { className: "stepper-item-description", children: description })] }));
-}
-export const StepperContent = ({ active, children }) => {
-    return active ? _jsx(_Fragment, { children: children }) : null;
-};
-export const StepperItemSkeleton = () => (_jsxs("div", { className: "flex flex-row items-center gap-3", children: [_jsx(Skeleton, { className: "bg-muted h-8 w-8 rounded-full" }), _jsx(Skeleton, { className: "bg-muted h-5 w-32" })] }));
+import{jsx as r,jsxs as m,Fragment as n}from"react/jsx-runtime";import{cn as s}from"../../../lib/utils.js";import{CircleCheck as l}from"lucide-react";import{Skeleton as i}from"../skeleton/index.js";export function Stepper({className:e,...t}){return r("div",{"data-slot":"stepper",className:s("stepper",e),...t})}export function StepperItem({className:e,active:t=false,complete:p=false,...a}){return r("div",{"data-slot":"stepper-item","data-active":t,"data-complete":p,className:s("stepper-item group",e),...a})}export function StepperItemNumber({className:e,...t}){return r("div",{"data-slot":"stepper-item-number",className:s("stepper-item-number",e),...t})}export function StepperItemText({className:e,title:t,description:p,...a}){return m("div",{"data-slot":"stepper-item-text",className:s("stepper-item-text",e),...a,children:[m("div",{className:"stepper-item-title",children:[r("p",{children:t}),r(l,{className:"stepper-item-icon",width:16,height:16})]}),p&&r("p",{className:"stepper-item-description",children:p})]})}export const StepperContent=({active:e,children:t})=>{return e?r(n,{children:t}):null};export const StepperItemSkeleton=()=>m("div",{className:"flex flex-row items-center gap-3",children:[r(i,{className:"bg-muted h-8 w-8 rounded-full"}),r(i,{className:"bg-muted h-5 w-32"})]});

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

@@ -1,8 +1 @@
-'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as SwitchPrimitives from '@radix-ui/react-switch';
-import { cn } from '../../../lib/utils.js';
-function Switch({ className, ...props }) {
-    return (_jsx(SwitchPrimitives.Root, { "data-slot": "switch", className: cn('focus-visible:ring-ring focus-visible:ring-offset-background data-[state=checked]:bg-primary data-[state=unchecked]:bg-muted peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50', className), ...props, children: _jsx(SwitchPrimitives.Thumb, { "data-slot": "switch-thumb", className: cn('bg-background pointer-events-none block h-5 w-5 rounded-full shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0') }) }));
-}
-export { Switch };
+"use client";import{jsx as e}from"react/jsx-runtime";import*as t from"@radix-ui/react-switch";import{cn as i}from"../../../lib/utils.js";function o({className:r,...s}){return e(t.Root,{"data-slot":"switch",className:i("focus-visible:ring-ring focus-visible:ring-offset-background data-[state=checked]:bg-primary data-[state=unchecked]:bg-muted peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50",r),...s,children:e(t.Thumb,{"data-slot":"switch-thumb",className:i("bg-background pointer-events-none block h-5 w-5 rounded-full shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0")})})}export{o as Switch};

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

@@ -1,44 +1 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from '../../../lib/utils.js';
-function TableContainer({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "data-table-container", className: cn('mt-4', className), ...props }));
-}
-function Table({ className, ...props }) {
-    return (_jsx("div", { className: "relative w-full overflow-auto", children: _jsx("table", { "data-slot": "data-table", className: cn('w-full caption-bottom text-sm', className), ...props }) }));
-}
-function TableHeader({ className, ...props }) {
-    return (_jsx("thead", { "data-slot": "data-table-header", className: cn('[&_tr]:border-b hover:[&_tr]:bg-transparent', className), ...props }));
-}
-function TableBody({ className, ...props }) {
-    return (_jsx("tbody", { "data-slot": "data-table-body", className: cn('', className), ...props }));
-}
-function TableFooter({ className, ...props }) {
-    return (_jsx("tfoot", { "data-slot": "data-table-footer", className: cn('bg-muted/50 border-t font-medium last:[&>tr]:border-b-0', className), ...props }));
-}
-function TableRow({ className, active, button, ...props }) {
-    return (_jsx("tr", { "data-slot": "data-table-row", className: cn('data-[state=selected]:bg-muted hover:bg-muted border-b transition-colors', {
-            'cursor-pointer': button,
-            'bg-accent/50 hover:bg-accent/50': active
-        }, className), ...props }));
-}
-function TableHead({ className, align, ...props }) {
-    return (_jsx("th", { "data-slot": "data-table-head", className: cn('text-muted-foreground h-12 px-6 py-4 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0', {
-            'text-center': align === 'center',
-            'text-right': align === 'right'
-        }, className), ...props }));
-}
-function TableCell({ className, onClick, ...props }) {
-    return (_jsx("td", { "data-slot": "data-table-cell", className: cn('group/table-cell text-foreground px-6 py-4 align-middle text-sm font-normal [&:has([role=checkbox])]:pr-0', {
-            'hover:underline': onClick
-        }, className), onClick: onClick, ...props }));
-}
-function TableCellWrapper({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "data-table-cell-wrapper", className: cn('flex items-center', className), ...props }));
-}
-function TableCellAction({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "data-table-cell-action", className: cn('ml-4 w-fit opacity-0 transition-opacity group-hover/table-cell:opacity-100', className), ...props }));
-}
-function TableCaption({ className, ...props }) {
-    return (_jsx("caption", { "data-slot": "data-table-caption", className: cn('text-muted-foreground mt-4 text-sm', className), ...props }));
-}
-export { TableContainer, Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCellWrapper, TableCellAction, TableCaption };
+import{jsx as e}from"react/jsx-runtime";import{cn as o}from"../../../lib/utils.js";function n({className:a,...t}){return e("div",{"data-slot":"data-table-container",className:o("mt-4",a),...t})}function d({className:a,...t}){return e("div",{className:"relative w-full overflow-auto",children:e("table",{"data-slot":"data-table",className:o("w-full caption-bottom text-sm",a),...t})})}function c({className:a,...t}){return e("thead",{"data-slot":"data-table-header",className:o("[&_tr]:border-b hover:[&_tr]:bg-transparent",a),...t})}function s({className:a,...t}){return e("tbody",{"data-slot":"data-table-body",className:o("",a),...t})}function i({className:a,...t}){return e("tfoot",{"data-slot":"data-table-footer",className:o("bg-muted/50 border-t font-medium last:[&>tr]:border-b-0",a),...t})}function b({className:a,active:t,button:r,...l}){return e("tr",{"data-slot":"data-table-row",className:o("data-[state=selected]:bg-muted hover:bg-muted border-b transition-colors",{"cursor-pointer":r,"bg-accent/50 hover:bg-accent/50":t},a),...l})}function u({className:a,align:t,...r}){return e("th",{"data-slot":"data-table-head",className:o("text-muted-foreground h-12 px-6 py-4 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0",{"text-center":t==="center","text-right":t==="right"},a),...r})}function m({className:a,onClick:t,...r}){return e("td",{"data-slot":"data-table-cell",className:o("group/table-cell text-foreground px-6 py-4 align-middle text-sm font-normal [&:has([role=checkbox])]:pr-0",{"hover:underline":t},a),onClick:t,...r})}function f({className:a,...t}){return e("div",{"data-slot":"data-table-cell-wrapper",className:o("flex items-center",a),...t})}function p({className:a,...t}){return e("div",{"data-slot":"data-table-cell-action",className:o("ml-4 w-fit opacity-0 transition-opacity group-hover/table-cell:opacity-100",a),...t})}function h({className:a,...t}){return e("caption",{"data-slot":"data-table-caption",className:o("text-muted-foreground mt-4 text-sm",a),...t})}export{n as TableContainer,d as Table,c as TableHeader,s as TableBody,i as TableFooter,u as TableHead,b as TableRow,m as TableCell,f as TableCellWrapper,p as TableCellAction,h as TableCaption};

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

@@ -1,17 +1 @@
-'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as TabsPrimitive from '@radix-ui/react-tabs';
-import { cn } from '../../../lib/utils.js';
-function Tabs({ className, ...props }) {
-    return (_jsx(TabsPrimitive.Root, { "data-slot": "tabs", className: cn('tabs', className), ...props }));
-}
-function TabsList({ className, ...props }) {
-    return (_jsx(TabsPrimitive.List, { "data-slot": "tabs-list", className: cn('tabs-list', className), ...props }));
-}
-function TabsTrigger({ className, ...props }) {
-    return (_jsx(TabsPrimitive.Trigger, { "data-slot": "tabs-trigger", className: cn('!focus-visible:outline-none !focus-visible:ring-2 !focus-visible:ring-slate-950 !focus-visible:ring-offset-2 tabs-trigger tabs-trigger-disabled', className), ...props }));
-}
-function TabsContent({ className, ...props }) {
-    return (_jsx(TabsPrimitive.Content, { "data-slot": "tabs-content", className: cn('tabs-content', className), ...props }));
-}
-export { Tabs, TabsList, TabsTrigger, TabsContent };
+"use client";import{jsx as a}from"react/jsx-runtime";import*as i from"@radix-ui/react-tabs";import{cn as e}from"../../../lib/utils.js";function r({className:t,...s}){return a(i.Root,{"data-slot":"tabs",className:e("tabs",t),...s})}function n({className:t,...s}){return a(i.List,{"data-slot":"tabs-list",className:e("tabs-list",t),...s})}function o({className:t,...s}){return a(i.Trigger,{"data-slot":"tabs-trigger",className:e("!focus-visible:outline-none !focus-visible:ring-2 !focus-visible:ring-slate-950 !focus-visible:ring-offset-2 tabs-trigger tabs-trigger-disabled",t),...s})}function b({className:t,...s}){return a(i.Content,{"data-slot":"tabs-content",className:e("tabs-content",t),...s})}export{r as Tabs,n as TabsList,o as TabsTrigger,b as TabsContent};