@milktop/react-ui 0.0.0-stage → 0.1.2

package/dist/select/select.css

@@ -0,0 +1,52 @@
+@layer ui {
+  [data-scope=select][data-part=root] { display: inline-block; position: relative; min-width: 12rem;
+    color: var(--ui-text); font-family: var(--ui-font);
+    --tag-bg: var(--ui-hover); --tag-text: var(--ui-text); --tag-border: transparent;
+    &[data-variant=accent] { --tag-bg: var(--ui-accent-soft); --tag-text: var(--ui-accent-soft-text); }
+    &[data-variant=outline] { --tag-bg: var(--ui-surface); --tag-border: var(--ui-border); } }
+  /* With tags: the picks as chips in the trigger, which grows to fit them. */
+  [data-scope=select][data-part=tags] { display: flex; flex-wrap: wrap; gap: 0.25rem; min-width: 0; padding: 0.25rem 0; }
+  [data-scope=select][data-part=trigger]:has([data-part=tags]) { height: auto; min-height: var(--ui-control-height); }
+  [data-scope=select][data-part=tag] { display: inline-flex; align-items: center; height: 1.5rem; padding: 0 0.5rem; box-sizing: border-box;
+    border-radius: calc(var(--ui-radius) - 2px); background: var(--tag-bg); color: var(--tag-text); border: 1px solid var(--tag-border);
+    font-size: 13px; font-weight: 500; white-space: nowrap; }
+  [data-scope=select][data-part=label] { display: block; font-size: 14px; font-weight: 500; margin-bottom: 0.375rem; }
+  [data-scope=select][data-part=control] { display: flex; align-items: center; position: relative; }
+  [data-scope=select][data-part=trigger] { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
+    width: 100%; height: var(--ui-control-height); padding: 0 0.75rem; box-sizing: border-box;
+    background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
+    color: inherit; font-family: var(--ui-font); font-size: 14px; text-align: left; cursor: pointer;
+    &:focus-visible { border-color: var(--ui-ring); outline: 2px solid var(--ui-ring-soft); }
+    &[data-disabled] { opacity: 0.5; cursor: not-allowed; }
+    &[data-invalid], &[aria-invalid=true] { border-color: var(--ui-danger); }
+    [data-size=sm] & { height: var(--ui-control-height-sm); padding: 0 0.625rem; font-size: 13px; } }
+  [data-scope=select][data-part=clear-trigger] { position: absolute; right: 2rem; display: grid; place-items: center;
+    width: 1.5rem; height: 1.5rem; border: none; background: transparent; border-radius: 4px; color: var(--ui-muted); cursor: pointer;
+    &:hover { background: var(--ui-hover); color: var(--ui-text); } }
+  /* Room for the clear button, between the value and the chevron. */
+  [data-scope=select][data-part=control]:has([data-part=clear-trigger]:not([hidden])) [data-part=value-text] { margin-right: auto; padding-right: 1.75rem; }
+  [data-scope=select][data-part=value-text] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+    &[data-placeholder-shown] { color: var(--ui-muted); } }
+  [data-scope=select][data-part=indicator] { display: inline-flex; color: var(--ui-muted); transition: rotate 150ms;
+    &[data-state=open] { rotate: 180deg; } }
+
+  /* Zag copies the content's z-index onto its positioner. */
+  [data-scope=select][data-part=content] { z-index: 50; margin: 0; padding: 0.25rem; list-style: none; box-sizing: border-box;
+    outline: none; max-height: min(300px, var(--available-height)); overflow-y: auto;
+    background: var(--ui-surface); border: 1px solid var(--ui-border);
+    border-radius: calc(var(--ui-radius) + 2px); box-shadow: var(--ui-shadow); }
+  [data-scope=select][data-part=empty] { padding: 0.5rem; font-size: 14px; color: var(--ui-muted); }
+  [data-scope=select][data-part=item] { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
+    padding: 0.375rem 0.5rem; border-radius: 4px; font-size: 14px; cursor: pointer;
+    &[data-highlighted] { background: var(--ui-hover); }
+    &[data-state=checked] { font-weight: 500; }
+    &[data-disabled] { opacity: 0.4; cursor: not-allowed; } }
+  [data-scope=select][data-part=item-indicator] { display: none; color: var(--ui-accent);
+    &[data-state=checked] { display: inline-flex; } }
+  /* `start`: before the value (a colour's dot, an icon). */
+  [data-scope=select][data-part=start] { display: inline-flex; align-items: center; flex-shrink: 0; color: var(--ui-muted);
+    [data-part=control] > & { margin-left: 0.625rem; } }
+  [data-scope=select][data-part=value-text]:not([data-placeholder]) { display: inline-flex; align-items: center; gap: 0.375rem; }
+  /* After a `start`, the value fills the space up to the chevron. */
+  [data-scope=select][data-part=start] + [data-part=value-text] { flex-grow: 1; justify-content: flex-start; text-align: left; }
+}

package/dist/sheet/Sheet.d.ts

@@ -0,0 +1,88 @@
+/**
+ * A panel that slides in from an edge of the screen, for viewing or editing
+ * something without leaving the page.
+ *
+ *   <Sheet heading="Edit student" open={editing} onOpenChange={setEditing}
+ *     footer={<Button variant="primary">Save</Button>}>
+ *     …body…
+ *   </Sheet>
+ *
+ * A modal dialog underneath: focus is trapped, the page behind doesn't
+ * scroll, Escape or the backdrop closes it, and focus returns to the trigger.
+ *
+ * - `side`: 'right' (default), 'left', 'top' or 'bottom'
+ * - `size`: 'sm', 'md' (default) or 'lg': the width (or height for top and bottom)
+ * - `open`, `defaultOpen`, `onOpenChange`, `trigger`, `heading`, `description`,
+ *   `footer`, `closable`, `alert`: as for Dialog
+ *
+ * Or composed from Sheet.Header (heading, description), Sheet.Body and
+ * Sheet.Footer, with a Sheet.Trigger child, as Dialog is. By hand, Dialog's
+ * Ark parts work too: give them data-scope="sheet" (Sheet.Content and the
+ * rest here do that for you).
+ */
+import { type ComponentProps, type ReactElement, type ReactNode } from 'react';
+import { Dialog as Ark, type DialogOpenChangeDetails } from '@ark-ui/react/dialog';
+import 'iconify-icon';
+import { type Classes } from '../utils.js';
+import '../theme.css';
+import './sheet.css';
+export type SheetProps = Omit<Ark.ContentProps, 'children'> & {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean, details: DialogOpenChangeDetails) => void;
+    side?: 'right' | 'left' | 'top' | 'bottom';
+    size?: 'sm' | 'md' | 'lg';
+    heading?: ReactNode;
+    description?: ReactNode;
+    alert?: boolean;
+    closable?: boolean;
+    trigger?: ReactElement | null;
+    footer?: ReactNode;
+    classes?: Classes<'backdrop' | 'positioner' | 'content' | 'closeTrigger' | 'header' | 'title' | 'description' | 'body' | 'footer'>;
+    children?: ReactNode;
+};
+type HeaderProps = ComponentProps<'div'> & {
+    heading?: ReactNode;
+    description?: ReactNode;
+};
+declare function Header({ heading, description, children, ...rest }: HeaderProps): import("react").JSX.Element;
+declare function SheetShortcut({ open, defaultOpen, onOpenChange, side, size, heading, description, alert, closable, trigger, footer, className, classes, children, ...rest }: SheetProps): import("react").JSX.Element;
+export declare const Sheet: typeof SheetShortcut & {
+    Header: typeof Header;
+    Body: {
+        (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>): ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+        displayName: string;
+    };
+    Footer: {
+        (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>): ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+        displayName: string;
+    };
+    Root: (props: Ark.RootProps) => import("react").JSX.Element;
+    Trigger: import("react").ForwardRefExoticComponent<Ark.TriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Backdrop: {
+        (props: Ark.BackdropProps & import("react").RefAttributes<HTMLDivElement>): import("react").JSX.Element;
+        displayName: string;
+    };
+    Positioner: {
+        (props: Ark.PositionerProps & import("react").RefAttributes<HTMLDivElement>): import("react").JSX.Element;
+        displayName: string;
+    };
+    Content: {
+        (props: Ark.ContentProps & import("react").RefAttributes<HTMLDivElement>): import("react").JSX.Element;
+        displayName: string;
+    };
+    CloseTrigger: {
+        (props: Ark.CloseTriggerProps & import("react").RefAttributes<HTMLButtonElement>): import("react").JSX.Element;
+        displayName: string;
+    };
+    Title: {
+        (props: Ark.TitleProps & import("react").RefAttributes<HTMLHeadingElement>): import("react").JSX.Element;
+        displayName: string;
+    };
+    Description: {
+        (props: Ark.DescriptionProps & import("react").RefAttributes<HTMLDivElement>): import("react").JSX.Element;
+        displayName: string;
+    };
+    Context: (props: Ark.ContextProps) => ReactNode;
+};
+export {};

package/dist/sheet/Sheet.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * A panel that slides in from an edge of the screen, for viewing or editing
+ * something without leaving the page.
+ *
+ *   <Sheet heading="Edit student" open={editing} onOpenChange={setEditing}
+ *     footer={<Button variant="primary">Save</Button>}>
+ *     …body…
+ *   </Sheet>
+ *
+ * A modal dialog underneath: focus is trapped, the page behind doesn't
+ * scroll, Escape or the backdrop closes it, and focus returns to the trigger.
+ *
+ * - `side`: 'right' (default), 'left', 'top' or 'bottom'
+ * - `size`: 'sm', 'md' (default) or 'lg': the width (or height for top and bottom)
+ * - `open`, `defaultOpen`, `onOpenChange`, `trigger`, `heading`, `description`,
+ *   `footer`, `closable`, `alert`: as for Dialog
+ *
+ * Or composed from Sheet.Header (heading, description), Sheet.Body and
+ * Sheet.Footer, with a Sheet.Trigger child, as Dialog is. By hand, Dialog's
+ * Ark parts work too: give them data-scope="sheet" (Sheet.Content and the
+ * rest here do that for you).
+ */
+import { Children, isValidElement } from 'react';
+import { Dialog as Ark } from '@ark-ui/react/dialog';
+import { Portal } from '@ark-ui/react/portal';
+import 'iconify-icon';
+import { cx, on, partOf, partsOf, withParts } from '../utils.js';
+import { useMessages } from '../format/LocaleProvider.js';
+import '../theme.css';
+import './sheet.css';
+// Ark's dialog stamps data-scope="dialog"; ours wins, so Dialog's CSS stays off.
+const scoped = (name) => ({ 'data-scope': 'sheet', 'data-part': name });
+function Header({ heading = null, description = null, children, ...rest }) {
+    return (_jsxs("div", { ...scoped('header'), ...rest, children: [heading && _jsx(Ark.Title, { ...scoped('title'), children: heading }), description && _jsx(Ark.Description, { ...scoped('description'), children: description }), children] }));
+}
+const Body = partOf('sheet', 'body');
+const Footer = partOf('sheet', 'footer');
+const layout = [Header, Body, Footer];
+// Ark's parts under the sheet scope, for building one by hand.
+const withScope = (Part, name) => {
+    const Scoped = (props) => _jsx(Part, { ...props, ...scoped(name) });
+    Scoped.displayName = `Sheet.${name}`;
+    return Scoped;
+};
+function SheetShortcut({ open, defaultOpen, onOpenChange, side = 'right', size = 'md', heading = null, description = null, alert = false, closable = true, trigger = null, footer = null, className, classes, children, ...rest }) {
+    const t = useMessages();
+    const part = partsOf('sheet', classes);
+    const nodes = Children.toArray(children);
+    const composed = nodes.some((node) => isValidElement(node) && layout.includes(node.type));
+    const triggers = nodes.filter((node) => isValidElement(node) && node.type === Ark.Trigger);
+    const content = composed ? nodes.filter((node) => !triggers.includes(node)) : children;
+    return (_jsxs(Ark.Root, { ...(open !== undefined && { open }), ...(defaultOpen !== undefined && { defaultOpen }), ...on('onOpenChange', onOpenChange, (details) => details.open), role: alert ? 'alertdialog' : 'dialog', closeOnInteractOutside: !alert, lazyMount: true, unmountOnExit: true, children: [trigger && _jsx(Ark.Trigger, { asChild: true, children: trigger }), composed && triggers, _jsxs(Portal, { children: [_jsx(Ark.Backdrop, { ...part('backdrop') }), _jsx(Ark.Positioner, { ...part('positioner'), "data-side": side, children: _jsxs(Ark.Content, { ...rest, ...part('content'), className: cx(className, classes?.content), "data-side": side, "data-size": size, children: [closable && _jsx(Ark.CloseTrigger, { ...part('close-trigger'), "aria-label": t.common.close, children: _jsx("iconify-icon", { icon: "lucide:x" }) }), composed ? content : _jsxs(_Fragment, { children: [(heading || description) && (_jsxs("div", { ...part('header'), children: [heading && _jsx(Ark.Title, { ...part('title'), children: heading }), description && _jsx(Ark.Description, { ...part('description'), children: description })] })), _jsx("div", { ...part('body'), children: children }), footer && _jsx("div", { ...part('footer'), children: footer })] })] }) })] })] }));
+}
+export const Sheet = withParts(SheetShortcut, {
+    Header, Body, Footer,
+    Root: Ark.Root,
+    Trigger: Ark.Trigger,
+    Backdrop: withScope(Ark.Backdrop, 'backdrop'),
+    Positioner: withScope(Ark.Positioner, 'positioner'),
+    Content: withScope(Ark.Content, 'content'),
+    CloseTrigger: withScope(Ark.CloseTrigger, 'close-trigger'),
+    Title: withScope(Ark.Title, 'title'),
+    Description: withScope(Ark.Description, 'description'),
+    Context: Ark.Context,
+});

package/dist/sheet/sheet.css

@@ -0,0 +1,44 @@
+@layer ui {
+  [data-scope=sheet][data-part=backdrop] { position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, 0.45);
+    &[data-state=open] { animation: ui-sheet-fade-in 200ms ease-out; }
+    &[data-state=closed] { animation: ui-sheet-fade-out 160ms ease-in forwards; } }
+  /* Covers the screen and lines the panel up against one edge; clicks pass through to the backdrop. */
+  [data-scope=sheet][data-part=positioner] { position: fixed; inset: 0; z-index: 100; display: flex; pointer-events: none;
+    &[data-side=right] { justify-content: flex-end; }
+    &[data-side=top] { align-items: flex-start; }
+    &[data-side=bottom] { align-items: flex-end; } }
+  [data-scope=sheet][data-part=content] {
+    position: relative; display: flex; flex-direction: column; box-sizing: border-box; outline: none; pointer-events: auto;
+    background: var(--ui-surface); color: var(--ui-text); font-family: var(--ui-font); font-size: 14px; box-shadow: var(--ui-shadow);
+    &[data-state=open] { animation: ui-sheet-in 240ms cubic-bezier(0.32, 0.72, 0, 1); }
+    &[data-state=closed] { animation: ui-sheet-out 180ms ease-in forwards; }
+    /* Left and right: full height, a width by size. */
+    &:is([data-side=right], [data-side=left]) { height: 100dvh; width: 28rem; max-width: calc(100vw - 2.5rem);
+      &[data-size=sm] { width: 20rem; }
+      &[data-size=lg] { width: 40rem; } }
+    &[data-side=right] { border-left: 1px solid var(--ui-border); --sheet-from: translateX(100%); }
+    &[data-side=left] { border-right: 1px solid var(--ui-border); --sheet-from: translateX(-100%); }
+    /* Top and bottom: full width, a height that fits its content up to a limit. */
+    &:is([data-side=top], [data-side=bottom]) { width: 100%; max-height: 70dvh;
+      &[data-size=sm] { max-height: 40dvh; }
+      &[data-size=lg] { max-height: 90dvh; } }
+    &[data-side=top] { border-bottom: 1px solid var(--ui-border); border-radius: 0 0 calc(var(--ui-radius) + 6px) calc(var(--ui-radius) + 6px); --sheet-from: translateY(-100%); }
+    &[data-side=bottom] { border-top: 1px solid var(--ui-border); border-radius: calc(var(--ui-radius) + 6px) calc(var(--ui-radius) + 6px) 0 0; --sheet-from: translateY(100%); }
+  }
+  [data-scope=sheet][data-part=header] { padding: 1.5rem 3rem 0 1.5rem; flex-shrink: 0; }
+  [data-scope=sheet][data-part=title] { margin: 0; font-size: 18px; font-weight: 600; }
+  [data-scope=sheet][data-part=description] { margin: 0.375rem 0 0; color: var(--ui-muted); }
+  /* The body scrolls; the header and footer stay put. */
+  [data-scope=sheet][data-part=body] { flex-grow: 1; min-height: 0; padding: 1rem 1.5rem; overflow-y: auto;
+    [data-part=close-trigger] + & { padding: 1.5rem 3.5rem 1rem 1.5rem; } }
+  [data-scope=sheet][data-part=footer] { display: flex; justify-content: flex-end; gap: 0.5rem; flex-wrap: wrap; padding: 1rem 1.5rem; flex-shrink: 0;
+    border-top: 1px solid var(--ui-border); }
+  [data-scope=sheet][data-part=close-trigger] { position: absolute; top: 1rem; right: 1rem; display: grid; place-items: center; width: 2rem; height: 2rem;
+    border: none; background: transparent; border-radius: 6px; color: var(--ui-muted); cursor: pointer; font-size: 16px;
+    &:hover { background: var(--ui-hover); color: var(--ui-text); }
+    &:focus-visible { outline: 2px solid var(--ui-ring-soft); } }
+  @keyframes ui-sheet-fade-in { from { opacity: 0; } }
+  @keyframes ui-sheet-fade-out { to { opacity: 0; } }
+  @keyframes ui-sheet-in { from { transform: var(--sheet-from); } }
+  @keyframes ui-sheet-out { to { transform: var(--sheet-from); } }
+}

package/dist/sidebar/NavGroup.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Nav items under a label that opens and closes.
+ *
+ *   <NavGroup label="Forms" icon="lucide:form" defaultOpen>
+ *     <NavItem href="/input">Input</NavItem>
+ *   </NavGroup>
+ *
+ * - `label`: its text; `icon`: an Iconify name
+ * - `open`, `defaultOpen`; `onOpenChange`: called with the new open state.
+ *   In an `accordion` Sidebar, opening one closes the others.
+ *
+ * In the rail only its icon shows, and its items open beside it as a flyout:
+ * on hover, or on click for keyboard and touch. Escape, leaving it or
+ * following a link closes it.
+ */
+import { type HTMLAttributes } from 'react';
+import 'iconify-icon';
+import { type Classes } from '../utils.js';
+import '../theme.css';
+import './sidebar.css';
+export type NavGroupProps = HTMLAttributes<HTMLDivElement> & {
+    label: string;
+    icon?: string | null;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    classes?: Classes<'root' | 'trigger' | 'icon' | 'text' | 'indicator' | 'children' | 'panel' | 'flyoutHeading'>;
+};
+export declare function NavGroup({ label, icon, open: openProp, defaultOpen, onOpenChange, className, classes, children, ...rest }: NavGroupProps): import("react").JSX.Element;

package/dist/sidebar/NavGroup.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Nav items under a label that opens and closes.
+ *
+ *   <NavGroup label="Forms" icon="lucide:form" defaultOpen>
+ *     <NavItem href="/input">Input</NavItem>
+ *   </NavGroup>
+ *
+ * - `label`: its text; `icon`: an Iconify name
+ * - `open`, `defaultOpen`; `onOpenChange`: called with the new open state.
+ *   In an `accordion` Sidebar, opening one closes the others.
+ *
+ * In the rail only its icon shows, and its items open beside it as a flyout:
+ * on hover, or on click for keyboard and touch. Escape, leaving it or
+ * following a link closes it.
+ */
+import { useContext, useEffect, useId, useRef, useState } from 'react';
+import 'iconify-icon';
+import { useShell } from '../app-shell/shell.js';
+import { cx, partsOf, useControllable } from '../utils.js';
+import { FlyoutContext, SectionContext, useSidebar } from './context.js';
+import '../theme.css';
+import './sidebar.css';
+export function NavGroup({ label, icon = null, open: openProp, defaultOpen = false, onOpenChange, className, classes, children, ...rest }) {
+    const shell = useShell();
+    const sidebar = useSidebar();
+    const section = useContext(SectionContext);
+    const part = partsOf('nav-group', classes);
+    const id = useId();
+    const rail = !!shell?.rail;
+    const [own, setOwn] = useControllable(openProp, defaultOpen, onOpenChange);
+    // In an accordion, open only while it's the one open group (or none has
+    // been picked yet, as at the start).
+    const open = own && !(sidebar?.accordion && sidebar.openGroup !== null && sidebar.openGroup !== id);
+    const setOpen = (next) => {
+        setOwn(next);
+        if (next && sidebar?.accordion)
+            sidebar.setOpenGroup(id);
+    };
+    // The latest setter, for the section's "collapse all".
+    const latest = useRef(setOpen);
+    useEffect(() => { latest.current = setOpen; });
+    useEffect(() => section?.register(id, (next) => latest.current(next)), [section, id]);
+    useEffect(() => section?.report(id, open), [section, id, open]);
+    const [flyout, setFlyout] = useState(false);
+    const [position, setPosition] = useState({ top: 0, left: 0 });
+    const root = useRef(null);
+    const toggleEl = useRef(null);
+    const showing = rail && flyout;
+    function showFlyout() {
+        if (!rail || !toggleEl.current)
+            return;
+        const box = toggleEl.current.getBoundingClientRect();
+        setPosition({ top: box.top, left: box.right });
+        setFlyout(true);
+    }
+    function toggle() {
+        if (!rail)
+            setOpen(!open);
+        else if (showing)
+            setFlyout(false);
+        else
+            showFlyout();
+    }
+    // Leaving by keyboard closes the flyout.
+    function focusLeft(e) {
+        if (showing && !root.current?.contains(e.relatedTarget))
+            setFlyout(false);
+    }
+    function escaped(e) {
+        if (e.key !== 'Escape' || !showing)
+            return;
+        setFlyout(false);
+        toggleEl.current?.focus();
+    }
+    return (_jsxs("div", { ...rest, ...part('root'), className: cx(className, classes?.root), ref: root, "data-open": open || undefined, "data-rail": rail || undefined, "data-flyout": showing || undefined, onPointerEnter: showFlyout, onPointerLeave: () => setFlyout(false), onBlur: focusLeft, onKeyDown: escaped, children: [_jsxs("button", { ...part('trigger'), ref: toggleEl, type: "button", "aria-expanded": rail ? showing : open, "aria-controls": `${id}-panel`, "aria-label": rail ? label : undefined, onClick: toggle, children: [icon && _jsx("iconify-icon", { ...part('icon'), icon: icon, "aria-hidden": "true" }), _jsx("span", { ...part('text'), children: label }), _jsx("iconify-icon", { ...part('indicator'), icon: "lucide:chevron-down", "aria-hidden": "true" })] }), (rail ? showing : open) && (_jsx("div", { ...part('children'), id: `${id}-panel`, role: "presentation", style: { '--flyout-top': `${position.top}px`, '--flyout-left': `${position.left}px` }, onClick: (e) => { if (e.target.closest('a'))
+                    setFlyout(false); }, children: _jsxs("div", { ...part('panel'), children: [rail && _jsx("div", { ...part('flyout-heading'), "aria-hidden": "true", children: label }), _jsx(FlyoutContext, { value: true, children: children })] }) }))] }));
+}

package/dist/sidebar/NavItem.d.ts

@@ -0,0 +1,33 @@
+/**
+ * A sidebar link (or a button, without `href`). Other props (onClick,
+ * data-*) go on the link.
+ *
+ *   <NavItem icon="lucide:users" href="/students" active={isCurrent('/students')} badge={3}>Students</NavItem>
+ *   <NavItem icon="lucide:users" link={<Link to="/students" />}>Students</NavItem>
+ *
+ * - `icon`: an Iconify name
+ * - `href`: where it goes (without one it's a button: give it `onClick`)
+ * - `link`: your router's link element to render in place of the <a>
+ *   (`<Link to="…" />`); it gets the item's props and content
+ * - `active`: the current page (sets aria-current)
+ * - `badge`: a count or short text on the right (hidden at 0)
+ * - `label`: its text, in place of the content
+ *
+ * In the rail only the icon shows, with its text in a tooltip (inside a
+ * group's flyout the text stays); in the drawer, following a link closes it.
+ */
+import { type AnchorHTMLAttributes, type ReactElement, type ReactNode } from 'react';
+import 'iconify-icon';
+import { type Classes } from '../utils.js';
+import '../theme.css';
+import './sidebar.css';
+export type NavItemProps = Omit<AnchorHTMLAttributes<HTMLElement>, 'href'> & {
+    icon?: string | null;
+    href?: string | null;
+    link?: ReactElement | null;
+    active?: boolean;
+    badge?: ReactNode;
+    label?: string | null;
+    classes?: Classes<'root' | 'link' | 'icon' | 'text' | 'badge'>;
+};
+export declare function NavItem({ icon, href, link, active, badge, label, onClick, className, classes, children, ...rest }: NavItemProps): import("react").JSX.Element;

package/dist/sidebar/NavItem.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A sidebar link (or a button, without `href`). Other props (onClick,
+ * data-*) go on the link.
+ *
+ *   <NavItem icon="lucide:users" href="/students" active={isCurrent('/students')} badge={3}>Students</NavItem>
+ *   <NavItem icon="lucide:users" link={<Link to="/students" />}>Students</NavItem>
+ *
+ * - `icon`: an Iconify name
+ * - `href`: where it goes (without one it's a button: give it `onClick`)
+ * - `link`: your router's link element to render in place of the <a>
+ *   (`<Link to="…" />`); it gets the item's props and content
+ * - `active`: the current page (sets aria-current)
+ * - `badge`: a count or short text on the right (hidden at 0)
+ * - `label`: its text, in place of the content
+ *
+ * In the rail only the icon shows, with its text in a tooltip (inside a
+ * group's flyout the text stays); in the drawer, following a link closes it.
+ */
+import { Children, cloneElement, isValidElement, useContext } from 'react';
+import 'iconify-icon';
+import { Tooltip } from '../tooltip/Tooltip.js';
+import { useShell } from '../app-shell/shell.js';
+import { cx, partsOf } from '../utils.js';
+import { FlyoutContext } from './context.js';
+import '../theme.css';
+import './sidebar.css';
+// The text of some content, for the rail's tooltip.
+const textOf = (node) => Children.toArray(node).map((child) => typeof child === 'string' || typeof child === 'number' ? String(child)
+    : isValidElement(child) ? textOf(child.props.children) : '').join('').trim();
+export function NavItem({ icon = null, href = null, link = null, active = false, badge = null, label = null, onClick, className, classes, children, ...rest }) {
+    const shell = useShell();
+    const flyout = useContext(FlyoutContext);
+    const part = partsOf('nav-item', classes);
+    const rail = !!shell?.rail && !flyout;
+    const text = label ?? textOf(children);
+    function follow(e) {
+        onClick?.(e);
+        if ((href || link) && shell?.mobile)
+            shell.close();
+    }
+    const props = {
+        ...rest, ...part('link'), onClick: follow,
+        'aria-current': active ? 'page' : undefined, 'aria-label': rail ? text : undefined,
+    };
+    const content = _jsxs(_Fragment, { children: [icon && _jsx("iconify-icon", { ...part('icon'), icon: icon, "aria-hidden": "true" }), _jsx("span", { ...part('text'), children: children ?? label }), badge !== null && badge !== undefined && badge !== 0 && _jsx("span", { ...part('badge'), children: badge })] });
+    return (_jsx("div", { ...part('root'), className: cx(className, classes?.root), "data-active": active || undefined, children: _jsx(Tooltip, { content: text, placement: "right", disabled: !rail, children: link ? cloneElement(link, props, content)
+                : href ? _jsx("a", { ...props, href: href, children: content })
+                    : _jsx("button", { ...props, type: "button", children: content }) }) }));
+}

package/dist/sidebar/NavSection.d.ts

@@ -0,0 +1,20 @@
+/**
+ * A group of nav items, with an optional heading (hidden in the rail).
+ *
+ *   <NavSection heading="Settings" collapsible>…NavGroups…</NavSection>
+ *
+ * - `heading`
+ * - `collapsible`: a button beside the heading that collapses (or expands)
+ *   all the section's groups at once
+ */
+import { type HTMLAttributes, type ReactNode } from 'react';
+import 'iconify-icon';
+import { type Classes } from '../utils.js';
+import '../theme.css';
+import './sidebar.css';
+export type NavSectionProps = HTMLAttributes<HTMLDivElement> & {
+    heading?: ReactNode;
+    collapsible?: boolean;
+    classes?: Classes<'root' | 'headingRow' | 'heading' | 'collapseAll'>;
+};
+export declare function NavSection({ heading, collapsible, className, classes, children, ...rest }: NavSectionProps): import("react").JSX.Element;

package/dist/sidebar/NavSection.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A group of nav items, with an optional heading (hidden in the rail).
+ *
+ *   <NavSection heading="Settings" collapsible>…NavGroups…</NavSection>
+ *
+ * - `heading`
+ * - `collapsible`: a button beside the heading that collapses (or expands)
+ *   all the section's groups at once
+ */
+import { useMemo, useRef, useState } from 'react';
+import 'iconify-icon';
+import { useShell } from '../app-shell/shell.js';
+import { cx, partsOf } from '../utils.js';
+import { useMessages } from '../format/LocaleProvider.js';
+import { SectionContext } from './context.js';
+import '../theme.css';
+import './sidebar.css';
+export function NavSection({ heading = null, collapsible = false, className, classes, children, ...rest }) {
+    const t = useMessages();
+    const shell = useShell();
+    const part = partsOf('nav-section', classes);
+    const setters = useRef(new Map());
+    const [openIds, setOpenIds] = useState([]);
+    const anyOpen = openIds.length > 0;
+    const section = useMemo(() => ({
+        register(id, setOpen) {
+            setters.current.set(id, setOpen);
+            return () => {
+                setters.current.delete(id);
+                setOpenIds((ids) => ids.filter((other) => other !== id));
+            };
+        },
+        report(id, open) {
+            setOpenIds((ids) => (open === ids.includes(id) ? ids : open ? [...ids, id] : ids.filter((other) => other !== id)));
+        },
+    }), []);
+    function toggleAll() {
+        for (const setOpen of setters.current.values())
+            setOpen(!anyOpen);
+    }
+    const toggleLabel = anyOpen ? t.shell.collapseAll : t.shell.expandAll;
+    return (_jsx(SectionContext, { value: section, children: _jsxs("div", { ...rest, ...part('root'), className: cx(className, classes?.root), role: "group", "aria-label": typeof heading === 'string' ? heading : undefined, children: [(heading || collapsible) && (_jsxs("div", { ...part('heading-row'), children: [_jsx("div", { ...part('heading'), "aria-hidden": "true", children: heading }), collapsible && !shell?.rail && (_jsx("button", { ...part('collapse-all'), type: "button", onClick: toggleAll, "aria-label": toggleLabel, title: toggleLabel, children: _jsx("iconify-icon", { icon: anyOpen ? 'lucide:chevrons-down-up' : 'lucide:chevrons-up-down', "aria-hidden": "true" }) }))] })), children] }) }));
+}

package/dist/sidebar/Sidebar.d.ts

@@ -0,0 +1,65 @@
+/**
+ * An app sidebar: a logo, the nav, and a footer. In an AppShell it collapses
+ * to an icon rail (its button, or ⌘B) and becomes a drawer on phones.
+ *
+ *   <Sidebar logo="TutorApp" footer={<SidebarUser name="Ada Lovelace" items={account} />}>
+ *     <NavSection heading="Menu">
+ *       <NavItem icon="lucide:house" href="/" active>Dashboard</NavItem>
+ *       <NavGroup label="Settings" icon="lucide:settings">…</NavGroup>
+ *     </NavSection>
+ *   </Sidebar>
+ *
+ * - `logo`; `logoCollapsed`: shown instead in the rail (a mark)
+ * - `footer`: along the bottom (a SidebarUser)
+ * - `accordion`: one NavGroup open at a time
+ * - `items`: the nav as data, in place of (or before) the content:
+ *   `[{ heading, items: [{ label, icon, href, active, badge, items }] }]`
+ * - `edge`: a thin strip along the right edge that collapses or expands it
+ *   on click: 'rail' (default) shows it only while collapsed, true always,
+ *   false never
+ * - `label`: the nav's accessible name ('Main')
+ * - restyle its items with the `--ui-sidebar-*` tokens, e.g.
+ *   style={{ '--ui-sidebar-active': 'var(--ui-accent-soft)' }}
+ *
+ * Its parts are on it too: Sidebar.Section, Sidebar.Group, Sidebar.Item and
+ * Sidebar.User are NavSection, NavGroup, NavItem and SidebarUser.
+ */
+import { type HTMLAttributes, type ReactNode } from 'react';
+import 'iconify-icon';
+import { type Classes } from '../utils.js';
+import { NavSection } from './NavSection.js';
+import { NavGroup } from './NavGroup.js';
+import { NavItem } from './NavItem.js';
+import { SidebarUser } from './SidebarUser.js';
+import '../theme.css';
+import './sidebar.css';
+export type SidebarLink = {
+    label: string;
+    icon?: string;
+    href?: string;
+    active?: boolean;
+    badge?: ReactNode;
+    items?: SidebarLink[];
+};
+export type SidebarSection = {
+    heading?: ReactNode;
+    items?: SidebarLink[];
+};
+export type SidebarProps = HTMLAttributes<HTMLElement> & {
+    logo?: ReactNode;
+    logoCollapsed?: ReactNode;
+    footer?: ReactNode;
+    accordion?: boolean;
+    items?: SidebarSection[] | null;
+    edge?: 'rail' | boolean;
+    label?: string;
+    classes?: Classes<'root' | 'header' | 'logo' | 'toggle' | 'nav' | 'footer' | 'edge'>;
+};
+declare function SidebarShortcut({ logo, logoCollapsed, footer, accordion, items, edge, label: labelProp, className, classes, children, ...rest }: SidebarProps): import("react").JSX.Element;
+export declare const Sidebar: typeof SidebarShortcut & {
+    Section: typeof NavSection;
+    Group: typeof NavGroup;
+    Item: typeof NavItem;
+    User: typeof SidebarUser;
+};
+export {};

package/dist/sidebar/Sidebar.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * An app sidebar: a logo, the nav, and a footer. In an AppShell it collapses
+ * to an icon rail (its button, or ⌘B) and becomes a drawer on phones.
+ *
+ *   <Sidebar logo="TutorApp" footer={<SidebarUser name="Ada Lovelace" items={account} />}>
+ *     <NavSection heading="Menu">
+ *       <NavItem icon="lucide:house" href="/" active>Dashboard</NavItem>
+ *       <NavGroup label="Settings" icon="lucide:settings">…</NavGroup>
+ *     </NavSection>
+ *   </Sidebar>
+ *
+ * - `logo`; `logoCollapsed`: shown instead in the rail (a mark)
+ * - `footer`: along the bottom (a SidebarUser)
+ * - `accordion`: one NavGroup open at a time
+ * - `items`: the nav as data, in place of (or before) the content:
+ *   `[{ heading, items: [{ label, icon, href, active, badge, items }] }]`
+ * - `edge`: a thin strip along the right edge that collapses or expands it
+ *   on click: 'rail' (default) shows it only while collapsed, true always,
+ *   false never
+ * - `label`: the nav's accessible name ('Main')
+ * - restyle its items with the `--ui-sidebar-*` tokens, e.g.
+ *   style={{ '--ui-sidebar-active': 'var(--ui-accent-soft)' }}
+ *
+ * Its parts are on it too: Sidebar.Section, Sidebar.Group, Sidebar.Item and
+ * Sidebar.User are NavSection, NavGroup, NavItem and SidebarUser.
+ */
+import { useMemo, useState } from 'react';
+import 'iconify-icon';
+import { Tooltip } from '../tooltip/Tooltip.js';
+import { useShell } from '../app-shell/shell.js';
+import { cx, partsOf, withParts } from '../utils.js';
+import { useMessages } from '../format/LocaleProvider.js';
+import { SidebarContext } from './context.js';
+import { NavSection } from './NavSection.js';
+import { NavGroup } from './NavGroup.js';
+import { NavItem } from './NavItem.js';
+import { SidebarUser } from './SidebarUser.js';
+import '../theme.css';
+import './sidebar.css';
+function SidebarShortcut({ logo = null, logoCollapsed = null, footer = null, accordion = false, items = null, edge = 'rail', label: labelProp, className, classes, children, ...rest }) {
+    const t = useMessages();
+    const label = labelProp ?? t.shell.nav;
+    const shell = useShell();
+    const part = partsOf('sidebar', classes);
+    const rail = !!shell?.rail;
+    // The open accordion group, by id.
+    const [openGroup, setOpenGroup] = useState(null);
+    const sidebar = useMemo(() => ({ accordion, openGroup, setOpenGroup }), [accordion, openGroup]);
+    const toggleButton = (expand) => (_jsx(Tooltip, { content: `${expand ? t.shell.expandSidebar : t.shell.collapseSidebar} (⌘B)`, placement: "right", children: _jsx("button", { ...part('toggle'), type: "button", onClick: shell?.toggle, "aria-label": expand ? t.shell.expandSidebar : t.shell.collapseSidebar, children: _jsx("iconify-icon", { icon: expand ? 'lucide:panel-left-open' : 'lucide:panel-left-close', "aria-hidden": "true" }) }) }));
+    return (_jsx(SidebarContext, { value: sidebar, children: _jsxs("aside", { ...rest, ...part('root'), className: cx(className, classes?.root), "data-rail": rail || undefined, "data-mobile": shell?.mobile || undefined, "data-open": shell?.drawerOpen || undefined, children: [(logo || shell) && (_jsx("div", { ...part('header'), children: rail
+                        ? logoCollapsed && _jsx("div", { ...part('logo'), children: logoCollapsed })
+                        : _jsxs(_Fragment, { children: [logo && _jsx("div", { ...part('logo'), children: logo }), shell?.mobile
+                                    ? _jsx("button", { ...part('toggle'), type: "button", onClick: shell.toggle, "aria-label": t.shell.closeMenu, children: _jsx("iconify-icon", { icon: "lucide:x", "aria-hidden": "true" }) })
+                                    : shell && toggleButton(false)] }) })), _jsxs("nav", { ...part('nav'), "aria-label": label, children: [(items ?? []).map((section, i) => (_jsx(NavSection, { heading: section.heading, children: (section.items ?? []).map((item, j) => item.items
+                                ? _jsx(NavGroup, { label: item.label, icon: item.icon, defaultOpen: item.items.some((child) => child.active), children: item.items.map((child, k) => (_jsx(NavItem, { href: child.href, icon: child.icon, active: child.active, badge: child.badge, label: child.label }, k))) }, j)
+                                : _jsx(NavItem, { href: item.href, icon: item.icon, active: item.active, badge: item.badge, label: item.label }, j)) }, i))), children] }), (footer || rail) && (_jsxs("div", { ...part('footer'), children: [footer, rail && toggleButton(true)] })), shell && !shell.mobile && (edge === 'rail' ? rail : edge) && (_jsx("button", { ...part('edge'), type: "button", tabIndex: -1, "aria-hidden": "true", title: rail ? t.shell.expandSidebar : t.shell.collapseSidebar, onMouseDown: (e) => e.preventDefault(), onClick: shell.toggle }))] }) }));
+}
+export const Sidebar = withParts(SidebarShortcut, { Section: NavSection, Group: NavGroup, Item: NavItem, User: SidebarUser });