@mindlogic-ai/logician-ui 5.0.0-alpha.11 → 5.0.0-alpha.13

package/dist/components/NavList/NavList.styles.mjs

@@ -0,0 +1,97 @@
+"use client";
+/**
+ * The tokens a row paints, exported so the usage page's token table reads what
+ * the component renders.
+ *
+ * **The current row is a PLACE, not a value** — the same rule as `TAB_RAMP`
+ * and the app's nav rail (`NavigationLinkButton.utils.tsx` in factchat-nextjs).
+ * It is carried by ink, weight and a neutral fill, never by the brand hue: a
+ * rail that spends colour on "you are here" is what stops a success or error
+ * colour from registering when it appears.
+ *
+ * `bg.emphasized` rather than `bg.muted` for the fill, because rails sit on the
+ * sidebar wash and the fill has to separate from THAT: in light `bg.muted` is
+ * only OKLab dE 0.027 from the wash, under the threshold where two flat areas
+ * read as different, and `bg.emphasized` is 0.052 (measured in that file).
+ * Hover uses the same fill, so the current row does not change under the
+ * pointer and a hovered row previews exactly what selecting it looks like.
+ *
+ * `currentLabel` is `fg.emphasized`, which the theme aliases to `fg.default`
+ * today — so on the stock theme the current row is told apart by WEIGHT and
+ * FILL, not by a second ink. The role is still named separately so a theme
+ * that splits the two (and the app's nav rail, which reads the same pair)
+ * moves the current label without touching the rest.
+ *
+ * **Pressed is one step past hover**, on every row, current ones included —
+ * otherwise a press on the row you are already on gives no sign it landed.
+ * No `bg.*` role is darker than `bg.emphasized` in light (it is the top of
+ * the `layer.1` ladder), so the step is `border.default`: the next neutral in
+ * both modes (light `#D8D2CA` after `#E5DFD9`, dark `#48443E` after
+ * `#3F3B34`), the same fill the BottomSheet handle uses. Under
+ * `prefers-contrast: more` that token turns into a 3:1 stroke grey and the
+ * label would drop to 2.8:1, so high contrast takes `border.strong`, which
+ * high contrast leaves alone. `NavList.test.tsx` checks every pair.
+ */
+const NAV_LIST_RAMP = {
+    label: 'fg.default',
+    currentLabel: 'fg.emphasized',
+    currentFill: 'bg.emphasized',
+    hoverFill: 'bg.emphasized',
+    pressedFill: 'border.default',
+    pressedFillMoreContrast: 'border.strong',
+    trailing: 'fg.muted',
+    groupTitle: 'fg.muted',
+};
+/** The pressed fill, with its high-contrast swap. */
+const pressedFill = {
+    bg: NAV_LIST_RAMP.pressedFill,
+    _moreContrast: { bg: NAV_LIST_RAMP.pressedFillMoreContrast },
+};
+/**
+ * Chakra's `_rtl`/`_ltr` and `:dir()` read `dir` ATTRIBUTES, and zag stamps
+ * `dir="ltr"` on every part it renders (tooltip triggers — the rows — and the
+ * collapsible group) from Ark's locale, before any effect can measure the
+ * page. An author `direction` beats the UA rule that maps the attribute, so
+ * every stamped element takes the direction it inherits instead: the server
+ * render lays an RTL rail out right to left on its first paint.
+ */
+const inheritDirection = { direction: 'inherit' };
+/**
+ * A locale whose direction is `dir`: the inherited one when it already
+ * agrees, so a Korean app keeps formatting in Korean, otherwise a stand-in.
+ * Ark has no other way to set the `dir` zag stamps (its hooks omit the prop).
+ */
+const localeFor = (inherited, dir) => inherited.dir === dir ? inherited.locale : dir === 'rtl' ? 'ar' : 'en-US';
+/**
+ * Map an orientation (or a per-breakpoint object of them) to a style value per
+ * breakpoint, so the axis switch is CSS rather than a `useBreakpointValue`
+ * that renders the wrong axis on the server.
+ */
+const byOrientation = (orientation, vertical, horizontal) => {
+    const pick = (o) => o === 'horizontal' ? horizontal : vertical;
+    if (typeof orientation === 'string')
+        return pick(orientation);
+    // A breakpoint object with no `base` still starts vertical — the default —
+    // instead of leaving the smallest screens with no axis at all.
+    return Object.fromEntries(Object.entries({ base: 'vertical', ...orientation }).map(([bp, o]) => [
+        bp,
+        pick(o),
+    ]));
+};
+/** The list box shared by the root list and every group's list. */
+const listStyles = (orientation) => ({
+    listStyleType: 'none',
+    m: 0,
+    p: 0,
+    display: 'flex',
+    gap: 0.5,
+    minW: 0,
+    flexDirection: byOrientation(orientation, 'column', 'row'),
+    alignItems: byOrientation(orientation, 'stretch', 'center'),
+    // A row never wraps: a strip that grows to three lines as items are added
+    // eats the content it navigates. The root scrolls sideways instead.
+    flexWrap: 'nowrap',
+});
+
+export { NAV_LIST_RAMP, byOrientation, inheritDirection, listStyles, localeFor, pressedFill };
+//# sourceMappingURL=NavList.styles.mjs.map

package/dist/components/NavList/NavList.styles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavList.styles.mjs","sources":["../../../src/components/NavList/NavList.styles.ts"],"sourcesContent":[null],"names":[],"mappings":";AAKA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgCG;AACI,MAAM,aAAa,GAAG;AAC3B,IAAA,KAAK,EAAE,YAAY;AACnB,IAAA,YAAY,EAAE,eAAe;AAC7B,IAAA,WAAW,EAAE,eAAe;AAC5B,IAAA,SAAS,EAAE,eAAe;AAC1B,IAAA,WAAW,EAAE,gBAAgB;AAC7B,IAAA,uBAAuB,EAAE,eAAe;AACxC,IAAA,QAAQ,EAAE,UAAU;AACpB,IAAA,UAAU,EAAE,UAAU;;AAGxB;AACO,MAAM,WAAW,GAAG;IACzB,EAAE,EAAE,aAAa,CAAC,WAAW;AAC7B,IAAA,aAAa,EAAE,EAAE,EAAE,EAAE,aAAa,CAAC,uBAAuB,EAAE;;AAG9D;;;;;;;AAOG;MACU,gBAAgB,GAAG,EAAE,SAAS,EAAE,SAAS;AAEtD;;;;AAIG;AACI,MAAM,SAAS,GAAG,CACvB,SAAiD,EACjD,GAAkB,KAElB,SAAS,CAAC,GAAG,KAAK,GAAG,GAAG,SAAS,CAAC,MAAM,GAAG,GAAG,KAAK,KAAK,GAAG,IAAI,GAAG;AAEpE;;;;AAIG;AACI,MAAM,aAAa,GAAG,CAC3B,WAAyC,EACzC,QAAW,EACX,UAAa,KACY;AACzB,IAAA,MAAM,IAAI,GAAG,CAAC,CAAqB,KACjC,CAAC,KAAK,YAAY,GAAG,UAAU,GAAG,QAAQ;IAC5C,IAAI,OAAO,WAAW,KAAK,QAAQ;AAAE,QAAA,OAAO,IAAI,CAAC,WAAW,CAAC;;;AAG7D,IAAA,OAAO,MAAM,CAAC,WAAW,CACvB,MAAM,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,WAAW,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK;QACpE,EAAE;QACF,IAAI,CAAC,CAAuB,CAAC;AAC9B,KAAA,CAAC,CACH;AACH;AAEA;MACa,UAAU,GAAG,CAAC,WAAyC,MACjE;AACC,IAAA,aAAa,EAAE,MAAM;AACrB,IAAA,CAAC,EAAE,CAAC;AACJ,IAAA,CAAC,EAAE,CAAC;AACJ,IAAA,OAAO,EAAE,MAAM;AACf,IAAA,GAAG,EAAE,GAAG;AACR,IAAA,IAAI,EAAE,CAAC;IACP,aAAa,EAAE,aAAa,CAAC,WAAW,EAAE,QAAQ,EAAE,KAAK,CAAC;IAC1D,UAAU,EAAE,aAAa,CAAC,WAAW,EAAE,SAAS,EAAE,QAAQ,CAAC;;;AAG3D,IAAA,QAAQ,EAAE,QAAQ;AACnB,CAAA;;;;"}

package/dist/components/NavList/NavList.translations.json.js

@@ -0,0 +1,19 @@
+"use client";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var nav_list_opens_new_window = {
+	ko: "새 창 열림",
+	en: "opens in a new window",
+	zh: "在新窗口中打开",
+	ja: "新しいウィンドウで開く",
+	es: "se abre en una ventana nueva"
+};
+var NavListTranslations = {
+	nav_list_opens_new_window: nav_list_opens_new_window
+};
+
+exports.default = NavListTranslations;
+exports.nav_list_opens_new_window = nav_list_opens_new_window;
+//# sourceMappingURL=NavList.translations.json.js.map

package/dist/components/NavList/NavList.translations.json.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavList.translations.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;"}

package/dist/components/NavList/NavList.translations.json.mjs

@@ -0,0 +1,14 @@
+"use client";
+var nav_list_opens_new_window = {
+	ko: "새 창 열림",
+	en: "opens in a new window",
+	zh: "在新窗口中打开",
+	ja: "新しいウィンドウで開く",
+	es: "se abre en una ventana nueva"
+};
+var NavListTranslations = {
+	nav_list_opens_new_window: nav_list_opens_new_window
+};
+
+export { NavListTranslations as default, nav_list_opens_new_window };
+//# sourceMappingURL=NavList.translations.json.mjs.map

package/dist/components/NavList/NavList.translations.json.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavList.translations.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;"}

package/dist/components/NavList/NavList.types.d.ts

@@ -0,0 +1,131 @@
+import type { MouseEventHandler, ReactNode } from 'react';
+import type { HTMLChakraProps } from '@chakra-ui/react';
+export type NavListOrientation = 'vertical' | 'horizontal';
+type NavListBreakpoint = 'base' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+/**
+ * One orientation, or one per breakpoint. The media-template rails and the
+ * Drive source rail lie down into a sideways-scrolling row below `md`:
+ *
+ * ```tsx
+ * <NavList orientation={{ base: 'horizontal', md: 'vertical' }} />
+ * ```
+ *
+ * The switch is pure CSS (one rule per breakpoint), so it never renders the
+ * wrong axis first and corrects itself after hydration.
+ */
+export type NavListResponsiveOrientation = NavListOrientation | Partial<Record<NavListBreakpoint, NavListOrientation>>;
+export type NavListProps = Omit<HTMLChakraProps<'ul'>, 'children'> & {
+    children?: ReactNode;
+    /**
+     * `vertical` is a rail; `horizontal` is a single row that scrolls sideways
+     * instead of wrapping. Accepts a per-breakpoint object.
+     * @default 'vertical'
+     */
+    orientation?: NavListResponsiveOrientation;
+    /**
+     * Naming the list makes it a `<nav>` landmark around the list. Leave it off
+     * when the list already sits inside a named landmark (the app sidebar) — a
+     * second, unnamed `nav` is noise in the landmark menu.
+     */
+    'aria-label'?: string;
+    /** As `aria-label`, pointing at a visible heading. Also makes it a `<nav>`. */
+    'aria-labelledby'?: string;
+    /**
+     * The collapsed rail: every row is a 40px icon-only square whose label is
+     * still its accessible name (visually hidden) and shows as a tooltip on
+     * hover and keyboard focus. `trailingVisual`, `trailingAction` and group
+     * titles are hidden; a collapsible group shows its rows. Every row needs a
+     * `leadingVisual` in this mode. Vertical only.
+     * @default false
+     */
+    isCollapsed?: boolean;
+};
+export type NavListTrailingActionVisibility = 'always' | 'hover';
+export type NavListItemProps = Omit<HTMLChakraProps<'a'>, 'children' | 'onClick' | 'aria-current' | 'asChild'> & {
+    /**
+     * The label. With `asChild`, the single link element (e.g. `next/link`)
+     * whose own children are the label.
+     */
+    children?: ReactNode;
+    /** Renders an `<a>`. Without `href` (and without `asChild`) the row is a `<button>`. */
+    href?: string;
+    /**
+     * Merge the row onto the one child element instead of rendering an `<a>` —
+     * for a router link: `<NavList.Item asChild><NextLink href="/x">X</NextLink></NavList.Item>`.
+     * The row is treated as a link.
+     */
+    asChild?: boolean;
+    onClick?: MouseEventHandler<HTMLElement>;
+    /**
+     * This row is where the user is: `aria-current="page"` on a link,
+     * `aria-current="true"` on a button (the active filter of a rail). Shown as
+     * an ink label, bold, on a `bg.emphasized` fill.
+     */
+    isCurrent?: boolean;
+    /**
+     * A button becomes `disabled`. A link — `asChild` included — is rendered
+     * as an `<a role="link" aria-disabled="true">` with no `href`: still
+     * announced as a link, out of the tab order, and nothing to open in a new tab.
+     */
+    isDisabled?: boolean;
+    /** Icon before the label. Decorative — the label names the row. */
+    leadingVisual?: ReactNode;
+    /** Count or badge after the label, in muted text. Read as part of the row's name. */
+    trailingVisual?: ReactNode;
+    /**
+     * A separate control beside the row (more-menu, remove), e.g. an
+     * `IconButton` with its own `aria-label`. It is a sibling of the row, never
+     * inside it, so there is no interactive element nested in another.
+     */
+    trailingAction?: ReactNode;
+    /**
+     * `hover`: the trailing action is transparent until the row is hovered, or
+     * focus is anywhere in the row, or the action's own menu is open
+     * (`aria-expanded="true"` / `data-state="open"` inside it). It is never
+     * removed, so Tab still reaches it — focusing it is what reveals it. Always
+     * shown on touch screens (`hover: none`), where there is no hover to reveal it.
+     * @default 'always'
+     */
+    trailingActionVisibility?: NavListTrailingActionVisibility;
+    /**
+     * A tooltip that adds to the label — a description, or why a row is
+     * disabled. It is also the row's accessible DESCRIPTION, through a hidden
+     * element that is referenced whether or not the tooltip is open — so a
+     * disabled row, which cannot take focus, still says why. It must not repeat
+     * the label. In a collapsed list it shows under the label.
+     *
+     * Label tooltips need no prop: a label cut off by the ellipsis shows itself
+     * in full on hover/focus, and every row of a collapsed list shows its label.
+     * Those are not wired as a description, because they would read the name twice.
+     */
+    tooltip?: ReactNode;
+};
+export type NavListGroupProps = Omit<HTMLChakraProps<'li'>, 'children' | 'title'> & {
+    children?: ReactNode;
+    /**
+     * Text above the group's rows, in overline style. Not interactive and not a
+     * heading element — it names the group's list (`aria-labelledby`), so it
+     * does not add a level to the page outline.
+     */
+    title?: ReactNode;
+    /**
+     * The title becomes a `<button aria-expanded>` that shows and hides the
+     * group's rows. Needs a `title`. Persisting the state (local storage, a
+     * store) is the caller's: pass `isOpen` + `onOpenChange`.
+     * @default false
+     */
+    isCollapsible?: boolean;
+    /** Controlled open state of a collapsible group. */
+    isOpen?: boolean;
+    /** Uncontrolled initial state of a collapsible group. @default true */
+    defaultOpen?: boolean;
+    onOpenChange?: (isOpen: boolean) => void;
+};
+export type NavListSkeletonProps = Omit<HTMLChakraProps<'ul'>, 'children'> & {
+    /** How many placeholder rows. @default 5 */
+    count?: number;
+    /** Lay the placeholders out like the list they stand in for. @default 'vertical' */
+    orientation?: NavListResponsiveOrientation;
+};
+export {};
+//# sourceMappingURL=NavList.types.d.ts.map

package/dist/components/NavList/NavList.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavList.types.d.ts","sourceRoot":"","sources":["../../../src/components/NavList/NavList.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC1D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAExD,MAAM,MAAM,kBAAkB,GAAG,UAAU,GAAG,YAAY,CAAC;AAE3D,KAAK,iBAAiB,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;AAEpE;;;;;;;;;;GAUG;AACH,MAAM,MAAM,4BAA4B,GACpC,kBAAkB,GAClB,OAAO,CAAC,MAAM,CAAC,iBAAiB,EAAE,kBAAkB,CAAC,CAAC,CAAC;AAE3D,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC,GAAG;IACnE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;OAIG;IACH,WAAW,CAAC,EAAE,4BAA4B,CAAC;IAC3C;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,+EAA+E;IAC/E,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;;;;;OAOG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,+BAA+B,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEjE,MAAM,MAAM,gBAAgB,GAAG,IAAI,CACjC,eAAe,CAAC,GAAG,CAAC,EACpB,UAAU,GAAG,SAAS,GAAG,cAAc,GAAG,SAAS,CACpD,GAAG;IACF;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,wFAAwF;IACxF,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,iBAAiB,CAAC,WAAW,CAAC,CAAC;IACzC;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,mEAAmE;IACnE,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,qFAAqF;IACrF,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B;;;;OAIG;IACH,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B;;;;;;;OAOG;IACH,wBAAwB,CAAC,EAAE,+BAA+B,CAAC;IAC3D;;;;;;;;;;OAUG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAClC,eAAe,CAAC,IAAI,CAAC,EACrB,UAAU,GAAG,OAAO,CACrB,GAAG;IACF,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,oDAAoD;IACpD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,uEAAuE;IACvE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC,GAAG;IAC3E,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oFAAoF;IACpF,WAAW,CAAC,EAAE,4BAA4B,CAAC;CAC5C,CAAC"}

package/dist/components/NavList/NavListContext.d.ts

@@ -0,0 +1,30 @@
+import type { NavListResponsiveOrientation } from './NavList.types';
+export declare const NavListContext: import("react").Context<{
+    orientation: NavListResponsiveOrientation;
+    isCollapsed: boolean;
+    /**
+     * The direction the list inherits, measured after mount — for the rows'
+     * tooltips (their text direction, and which side a collapsed rail's tooltip
+     * opens on) and the `dir` attribute zag stamps on its parts. Never for
+     * layout: rows inherit `direction` in CSS, so a server render is right
+     * before this is known.
+     */
+    tooltipDir: "ltr" | "rtl";
+    /** A row that just became current asks the list to bring it into view. */
+    revealCurrent: () => void;
+}>;
+export declare const useNavListContext: () => {
+    orientation: NavListResponsiveOrientation;
+    isCollapsed: boolean;
+    /**
+     * The direction the list inherits, measured after mount — for the rows'
+     * tooltips (their text direction, and which side a collapsed rail's tooltip
+     * opens on) and the `dir` attribute zag stamps on its parts. Never for
+     * layout: rows inherit `direction` in CSS, so a server render is right
+     * before this is known.
+     */
+    tooltipDir: "ltr" | "rtl";
+    /** A row that just became current asks the list to bring it into view. */
+    revealCurrent: () => void;
+};
+//# sourceMappingURL=NavListContext.d.ts.map

package/dist/components/NavList/NavListContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavListContext.d.ts","sourceRoot":"","sources":["../../../src/components/NavList/NavListContext.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,iBAAiB,CAAC;AAEpE,eAAO,MAAM,cAAc;iBACZ,4BAA4B;iBAC5B,OAAO;IACpB;;;;;;OAMG;gBACS,KAAK,GAAG,KAAK;IACzB,0EAA0E;mBAC3D,MAAM,IAAI;EAMzB,CAAC;AAEH,eAAO,MAAM,iBAAiB;iBAnBf,4BAA4B;iBAC5B,OAAO;IACpB;;;;;;OAMG;gBACS,KAAK,GAAG,KAAK;IACzB,0EAA0E;mBAC3D,MAAM,IAAI;CAQsC,CAAC"}

package/dist/components/NavList/NavListContext.js

@@ -0,0 +1,16 @@
+"use client";
+'use strict';
+
+var React = require('react');
+
+const NavListContext = React.createContext({
+    orientation: 'vertical',
+    isCollapsed: false,
+    tooltipDir: 'ltr',
+    revealCurrent: () => { },
+});
+const useNavListContext = () => React.useContext(NavListContext);
+
+exports.NavListContext = NavListContext;
+exports.useNavListContext = useNavListContext;
+//# sourceMappingURL=NavListContext.js.map

package/dist/components/NavList/NavListContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavListContext.js","sources":["../../../src/components/NavList/NavListContext.ts"],"sourcesContent":[null],"names":["createContext","useContext"],"mappings":";;;;;AAIO,MAAM,cAAc,GAAGA,mBAAa,CAaxC;AACD,IAAA,WAAW,EAAE,UAAU;AACvB,IAAA,WAAW,EAAE,KAAK;AAClB,IAAA,UAAU,EAAE,KAAK;AACjB,IAAA,aAAa,EAAE,MAAK,EAAE,CAAC;AACxB,CAAA;AAEM,MAAM,iBAAiB,GAAG,MAAMC,gBAAU,CAAC,cAAc;;;;;"}

package/dist/components/NavList/NavListContext.mjs

@@ -0,0 +1,13 @@
+"use client";
+import { createContext, useContext } from 'react';
+
+const NavListContext = createContext({
+    orientation: 'vertical',
+    isCollapsed: false,
+    tooltipDir: 'ltr',
+    revealCurrent: () => { },
+});
+const useNavListContext = () => useContext(NavListContext);
+
+export { NavListContext, useNavListContext };
+//# sourceMappingURL=NavListContext.mjs.map

package/dist/components/NavList/NavListContext.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavListContext.mjs","sources":["../../../src/components/NavList/NavListContext.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAIO,MAAM,cAAc,GAAG,aAAa,CAaxC;AACD,IAAA,WAAW,EAAE,UAAU;AACvB,IAAA,WAAW,EAAE,KAAK;AAClB,IAAA,UAAU,EAAE,KAAK;AACjB,IAAA,aAAa,EAAE,MAAK,EAAE,CAAC;AACxB,CAAA;AAEM,MAAM,iBAAiB,GAAG,MAAM,UAAU,CAAC,cAAc;;;;"}

package/dist/components/NavList/NavListGroup.d.ts

@@ -0,0 +1,31 @@
+/**
+ * A run of rows under an optional title.
+ *
+ * Rendered as `<li>` → title + nested `<ul aria-labelledby={title}>`, so a
+ * screen reader announces "목록, 공유 드라이브, 3개 항목" on entering it. The
+ * title is overline text, not `<h*>`: which heading level a rail's group is
+ * can only be known at the call site, and a typography default that decides
+ * the outline is exactly the `Subtitle as="h6"` defect in `ACCESSIBILITY.md`.
+ *
+ * `isCollapsible` turns the title into a disclosure button
+ * (`aria-expanded` + `aria-controls`); the list stays labelled by the title
+ * text. A collapsed RAIL (`NavList isCollapsed`) shows every group's rows and
+ * folds the titles away visually — a column of icons has no room for either.
+ *
+ * The rows open and close on Collapsible's own motion: Ark's collapsible
+ * measures the list into `--height`, the recipe's `expand-height` /
+ * `collapse-height` move it, and `animationStyle="presence"` sets the house
+ * clock (300ms in, 150ms out) with a fade instead of the height under reduced
+ * motion. Ark sets `hidden` once the close has finished, so closed rows are
+ * out of the tab order and the accessibility tree; `inert` covers the 150ms
+ * the list is still leaving, so a closing row cannot be tabbed into.
+ */
+export declare const NavListGroup: import("react").ForwardRefExoticComponent<Omit<import("@chakra-ui/react").HTMLChakraProps<"li">, "title" | "children"> & {
+    children?: import("react").ReactNode;
+    title?: import("react").ReactNode;
+    isCollapsible?: boolean;
+    isOpen?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (isOpen: boolean) => void;
+} & import("react").RefAttributes<HTMLLIElement>>;
+//# sourceMappingURL=NavListGroup.d.ts.map

package/dist/components/NavList/NavListGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavListGroup.d.ts","sourceRoot":"","sources":["../../../src/components/NavList/NavListGroup.tsx"],"names":[],"mappings":"AAuBA;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,YAAY;;;;;;;iDAmMxB,CAAC"}

package/dist/components/NavList/NavListGroup.js

@@ -0,0 +1,115 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var react = require('@chakra-ui/react');
+var index = require('../Icon/index.js');
+var Overline = require('../Typography/Overline.js');
+var focusRing = require('../../utils/focusRing.js');
+var NavList_styles = require('./NavList.styles.js');
+var NavListContext = require('./NavListContext.js');
+
+/**
+ * A run of rows under an optional title.
+ *
+ * Rendered as `<li>` → title + nested `<ul aria-labelledby={title}>`, so a
+ * screen reader announces "목록, 공유 드라이브, 3개 항목" on entering it. The
+ * title is overline text, not `<h*>`: which heading level a rail's group is
+ * can only be known at the call site, and a typography default that decides
+ * the outline is exactly the `Subtitle as="h6"` defect in `ACCESSIBILITY.md`.
+ *
+ * `isCollapsible` turns the title into a disclosure button
+ * (`aria-expanded` + `aria-controls`); the list stays labelled by the title
+ * text. A collapsed RAIL (`NavList isCollapsed`) shows every group's rows and
+ * folds the titles away visually — a column of icons has no room for either.
+ *
+ * The rows open and close on Collapsible's own motion: Ark's collapsible
+ * measures the list into `--height`, the recipe's `expand-height` /
+ * `collapse-height` move it, and `animationStyle="presence"` sets the house
+ * clock (300ms in, 150ms out) with a fade instead of the height under reduced
+ * motion. Ark sets `hidden` once the close has finished, so closed rows are
+ * out of the tab order and the accessibility tree; `inert` covers the 150ms
+ * the list is still leaving, so a closing row cannot be tabbed into.
+ */
+const NavListGroup = React.forwardRef(({ title, children, isCollapsible = false, isOpen: isOpenProp, defaultOpen = true, onOpenChange, ...rest }, ref) => {
+    const { orientation, isCollapsed, tooltipDir } = NavListContext.useNavListContext();
+    const inherited = react.useLocaleContext();
+    const titleId = React.useId();
+    const listId = React.useId();
+    const hasTitle = title != null && title !== false;
+    const [isOpenState, setIsOpenState] = React.useState(defaultOpen);
+    // The disclosure exists whenever the caller asked for one; a collapsed
+    // rail only forces it open, so toggling the rail does not remount rows.
+    const isDisclosure = isCollapsible && hasTitle;
+    const canCollapse = isDisclosure && !isCollapsed;
+    const isOpen = !canCollapse || (isOpenProp ?? isOpenState);
+    const listRef = React.useRef(null);
+    // A DOM property rather than the attribute: React 18 does not know
+    // `inert`, and 19 reads it as a boolean.
+    React.useEffect(() => {
+        if (listRef.current)
+            listRef.current.inert = !isOpen;
+    }, [isOpen]);
+    const toggle = () => {
+        const next = !isOpen;
+        if (isOpenProp === undefined)
+            setIsOpenState(next);
+        onOpenChange?.(next);
+    };
+    // Space on the axis the rows stack along, on both sides of a group: before
+    // it unless it opens the list, and before whatever row follows it, so the
+    // row after a group does not read as one more member of it.
+    const gapBefore = {
+        marginTop: NavList_styles.byOrientation(orientation, 3, 0),
+        marginInlineStart: NavList_styles.byOrientation(orientation, 0, 3),
+    };
+    const titleText = (jsxRuntime.jsx(Overline.Overline, { as: "span", id: titleId, display: "block", color: NavList_styles.NAV_LIST_RAMP.groupTitle, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", children: title }));
+    let heading = null;
+    if (canCollapse) {
+        heading = (jsxRuntime.jsxs(react.chakra.button, { type: "button", "aria-expanded": isOpen, "aria-controls": listId, onClick: toggle, display: "flex", alignItems: "center", justifyContent: "space-between", gap: 2, minH: 8, px: 2.5, borderRadius: "md", bg: "transparent", border: "none", cursor: "pointer", color: NavList_styles.NAV_LIST_RAMP.groupTitle, textAlign: "start", _hover: { bg: NavList_styles.NAV_LIST_RAMP.hoverFill }, _active: NavList_styles.pressedFill, ...focusRing.focusRingInset, children: [titleText, jsxRuntime.jsx(index.ChevronDownIcon, { "aria-hidden": true, boxSize: 4, flexShrink: 0, 
+                    // Closed points to the inline end: right, or left on an RTL page.
+                    rotate: isOpen ? '0deg' : '-90deg', _rtl: { rotate: isOpen ? '0deg' : '90deg' }, 
+                    // Turns with the list, on the same clock as its enter.
+                    animationStyle: "travel", transitionProperty: "rotate" })] }));
+    }
+    else if (hasTitle) {
+        heading = (jsxRuntime.jsx(react.chakra.span, { display: "block", px: 2.5, py: NavList_styles.byOrientation(orientation, 1, 0), children: titleText }));
+    }
+    // A collapsed rail has no room for titles. The title folds to no height
+    // and fades on the rows' clock instead of being swapped out, so the rows
+    // under it slide up with the rail rather than jumping. It stays in the
+    // DOM either way: it is what names the group's list.
+    if (heading) {
+        heading = (jsxRuntime.jsx(react.chakra.div, { display: "grid", gridTemplateRows: isCollapsed ? '0fr' : '1fr', opacity: isCollapsed ? 0 : 1, animationStyle: "feedback", transitionProperty: "grid-template-rows, opacity", children: jsxRuntime.jsx(react.chakra.div, { minH: 0, overflow: "hidden", display: "flex", flexDirection: "column", children: heading }) }));
+    }
+    const listProps = {
+        id: listId,
+        'aria-labelledby': hasTitle ? titleId : undefined,
+        ...NavList_styles.listStyles(orientation),
+        alignItems: NavList_styles.byOrientation(orientation, 'stretch', 'center'),
+        ...NavList_styles.inheritDirection,
+    };
+    const list = isDisclosure ? (jsxRuntime.jsx(react.Collapsible.Content, { asChild: true, animationStyle: "presence", 
+        // `hidden` loses to the list's own `display: flex`.
+        css: { '&[hidden]': { display: 'none' } }, children: jsxRuntime.jsx(react.chakra.ul, { ref: listRef, ...listProps, children: children }) })) : (jsxRuntime.jsx(react.chakra.ul, { ...listProps, children: children }));
+    const group = (jsxRuntime.jsx(react.chakra.li, { ref: ref, display: "flex", flexDirection: NavList_styles.byOrientation(orientation, 'column', 'row'), alignItems: NavList_styles.byOrientation(orientation, 'stretch', 'center'), gap: 0.5, flexShrink: 0, minW: 0, css: {
+            '&:not(:first-child)': gapBefore,
+            '& + li': gapBefore,
+        }, ...NavList_styles.inheritDirection, ...rest, children: jsxRuntime.jsxs(react.LocaleProvider, { locale: inherited.locale, children: [heading, list] }) }));
+    if (!isDisclosure)
+        return group;
+    // The title stays our own button, so `aria-expanded` flips on the click
+    // rather than when the closing animation ends, and the rail can force the
+    // group open without the button having a say.
+    return (
+    // Zag stamps `dir` on the group and its list; give it the measured
+    // direction so the attributes agree with the layout after mount. The
+    // layout does not read it (`inheritDirection`), and the rows inside get
+    // the caller's own locale back.
+    jsxRuntime.jsx(react.LocaleProvider, { locale: NavList_styles.localeFor(inherited, tooltipDir), children: jsxRuntime.jsx(react.Collapsible.Root, { asChild: true, open: isOpen, ids: { content: listId }, children: group }) }));
+});
+NavListGroup.displayName = 'NavList.Group';
+
+exports.NavListGroup = NavListGroup;
+//# sourceMappingURL=NavListGroup.js.map

package/dist/components/NavList/NavListGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavListGroup.js","sources":["../../../src/components/NavList/NavListGroup.tsx"],"sourcesContent":[null],"names":["forwardRef","useNavListContext","useLocaleContext","useId","useState","useRef","useEffect","byOrientation","_jsx","Overline","NAV_LIST_RAMP","_jsxs","chakra","pressedFill","focusRingInset","ChevronDownIcon","listStyles","inheritDirection","ChakraCollapsible","LocaleProvider","localeFor"],"mappings":"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"}

package/dist/components/NavList/NavListGroup.mjs

@@ -0,0 +1,113 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, useId, useState, useRef, useEffect } from 'react';
+import { useLocaleContext, chakra, Collapsible, LocaleProvider } from '@chakra-ui/react';
+import { ChevronDownIcon } from '../Icon/index.mjs';
+import { Overline } from '../Typography/Overline.mjs';
+import { focusRingInset } from '../../utils/focusRing.mjs';
+import { byOrientation, NAV_LIST_RAMP, pressedFill, listStyles, inheritDirection, localeFor } from './NavList.styles.mjs';
+import { useNavListContext } from './NavListContext.mjs';
+
+/**
+ * A run of rows under an optional title.
+ *
+ * Rendered as `<li>` → title + nested `<ul aria-labelledby={title}>`, so a
+ * screen reader announces "목록, 공유 드라이브, 3개 항목" on entering it. The
+ * title is overline text, not `<h*>`: which heading level a rail's group is
+ * can only be known at the call site, and a typography default that decides
+ * the outline is exactly the `Subtitle as="h6"` defect in `ACCESSIBILITY.md`.
+ *
+ * `isCollapsible` turns the title into a disclosure button
+ * (`aria-expanded` + `aria-controls`); the list stays labelled by the title
+ * text. A collapsed RAIL (`NavList isCollapsed`) shows every group's rows and
+ * folds the titles away visually — a column of icons has no room for either.
+ *
+ * The rows open and close on Collapsible's own motion: Ark's collapsible
+ * measures the list into `--height`, the recipe's `expand-height` /
+ * `collapse-height` move it, and `animationStyle="presence"` sets the house
+ * clock (300ms in, 150ms out) with a fade instead of the height under reduced
+ * motion. Ark sets `hidden` once the close has finished, so closed rows are
+ * out of the tab order and the accessibility tree; `inert` covers the 150ms
+ * the list is still leaving, so a closing row cannot be tabbed into.
+ */
+const NavListGroup = forwardRef(({ title, children, isCollapsible = false, isOpen: isOpenProp, defaultOpen = true, onOpenChange, ...rest }, ref) => {
+    const { orientation, isCollapsed, tooltipDir } = useNavListContext();
+    const inherited = useLocaleContext();
+    const titleId = useId();
+    const listId = useId();
+    const hasTitle = title != null && title !== false;
+    const [isOpenState, setIsOpenState] = useState(defaultOpen);
+    // The disclosure exists whenever the caller asked for one; a collapsed
+    // rail only forces it open, so toggling the rail does not remount rows.
+    const isDisclosure = isCollapsible && hasTitle;
+    const canCollapse = isDisclosure && !isCollapsed;
+    const isOpen = !canCollapse || (isOpenProp ?? isOpenState);
+    const listRef = useRef(null);
+    // A DOM property rather than the attribute: React 18 does not know
+    // `inert`, and 19 reads it as a boolean.
+    useEffect(() => {
+        if (listRef.current)
+            listRef.current.inert = !isOpen;
+    }, [isOpen]);
+    const toggle = () => {
+        const next = !isOpen;
+        if (isOpenProp === undefined)
+            setIsOpenState(next);
+        onOpenChange?.(next);
+    };
+    // Space on the axis the rows stack along, on both sides of a group: before
+    // it unless it opens the list, and before whatever row follows it, so the
+    // row after a group does not read as one more member of it.
+    const gapBefore = {
+        marginTop: byOrientation(orientation, 3, 0),
+        marginInlineStart: byOrientation(orientation, 0, 3),
+    };
+    const titleText = (jsx(Overline, { as: "span", id: titleId, display: "block", color: NAV_LIST_RAMP.groupTitle, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", children: title }));
+    let heading = null;
+    if (canCollapse) {
+        heading = (jsxs(chakra.button, { type: "button", "aria-expanded": isOpen, "aria-controls": listId, onClick: toggle, display: "flex", alignItems: "center", justifyContent: "space-between", gap: 2, minH: 8, px: 2.5, borderRadius: "md", bg: "transparent", border: "none", cursor: "pointer", color: NAV_LIST_RAMP.groupTitle, textAlign: "start", _hover: { bg: NAV_LIST_RAMP.hoverFill }, _active: pressedFill, ...focusRingInset, children: [titleText, jsx(ChevronDownIcon, { "aria-hidden": true, boxSize: 4, flexShrink: 0, 
+                    // Closed points to the inline end: right, or left on an RTL page.
+                    rotate: isOpen ? '0deg' : '-90deg', _rtl: { rotate: isOpen ? '0deg' : '90deg' }, 
+                    // Turns with the list, on the same clock as its enter.
+                    animationStyle: "travel", transitionProperty: "rotate" })] }));
+    }
+    else if (hasTitle) {
+        heading = (jsx(chakra.span, { display: "block", px: 2.5, py: byOrientation(orientation, 1, 0), children: titleText }));
+    }
+    // A collapsed rail has no room for titles. The title folds to no height
+    // and fades on the rows' clock instead of being swapped out, so the rows
+    // under it slide up with the rail rather than jumping. It stays in the
+    // DOM either way: it is what names the group's list.
+    if (heading) {
+        heading = (jsx(chakra.div, { display: "grid", gridTemplateRows: isCollapsed ? '0fr' : '1fr', opacity: isCollapsed ? 0 : 1, animationStyle: "feedback", transitionProperty: "grid-template-rows, opacity", children: jsx(chakra.div, { minH: 0, overflow: "hidden", display: "flex", flexDirection: "column", children: heading }) }));
+    }
+    const listProps = {
+        id: listId,
+        'aria-labelledby': hasTitle ? titleId : undefined,
+        ...listStyles(orientation),
+        alignItems: byOrientation(orientation, 'stretch', 'center'),
+        ...inheritDirection,
+    };
+    const list = isDisclosure ? (jsx(Collapsible.Content, { asChild: true, animationStyle: "presence", 
+        // `hidden` loses to the list's own `display: flex`.
+        css: { '&[hidden]': { display: 'none' } }, children: jsx(chakra.ul, { ref: listRef, ...listProps, children: children }) })) : (jsx(chakra.ul, { ...listProps, children: children }));
+    const group = (jsx(chakra.li, { ref: ref, display: "flex", flexDirection: byOrientation(orientation, 'column', 'row'), alignItems: byOrientation(orientation, 'stretch', 'center'), gap: 0.5, flexShrink: 0, minW: 0, css: {
+            '&:not(:first-child)': gapBefore,
+            '& + li': gapBefore,
+        }, ...inheritDirection, ...rest, children: jsxs(LocaleProvider, { locale: inherited.locale, children: [heading, list] }) }));
+    if (!isDisclosure)
+        return group;
+    // The title stays our own button, so `aria-expanded` flips on the click
+    // rather than when the closing animation ends, and the rail can force the
+    // group open without the button having a say.
+    return (
+    // Zag stamps `dir` on the group and its list; give it the measured
+    // direction so the attributes agree with the layout after mount. The
+    // layout does not read it (`inheritDirection`), and the rows inside get
+    // the caller's own locale back.
+    jsx(LocaleProvider, { locale: localeFor(inherited, tooltipDir), children: jsx(Collapsible.Root, { asChild: true, open: isOpen, ids: { content: listId }, children: group }) }));
+});
+NavListGroup.displayName = 'NavList.Group';
+
+export { NavListGroup };
+//# sourceMappingURL=NavListGroup.mjs.map