@viax.io/uxm 4.36.0

package/dist/ui/menu/menu.d.ts

@@ -0,0 +1,174 @@
+import { type CSSProperties, type ReactNode } from 'react';
+import { type PopoverPlacement } from '../popover/index.js';
+/**
+ * One actionable row in the menu. Selecting it fires `onSelect` and
+ * closes the menu — menus are about INVOKING an action, not holding a
+ * selected value (that's Listbox/Select): pick → act → dismiss.
+ *
+ * `current` is not a counter-example. It marks where the user already IS
+ * (the workspace they're in), which the menu reflects rather than owns —
+ * there is still no value the menu holds, no `aria-selected`, and nothing
+ * the atom mutates on pick. Reach for Listbox/Select the moment the panel
+ * is supposed to OWN the chosen value.
+ */
+export interface MenuItem {
+    /** Stable identity — used as React key and for keyboard focus tracking. */
+    key: string;
+    /** Row content. A plain string renders as the label; pass a node for richer rows. */
+    label: ReactNode;
+    /**
+     * Optional secondary line rendered beneath `label`, turning the row into a
+     * two-line item: `label` is the headline, `subtitle` the supporting text
+     * (e.g. a description or the current value). Single-line rows omit it.
+     */
+    subtitle?: ReactNode;
+    /** Optional leading icon glyph (see icons.ts). */
+    icon?: string;
+    /**
+     * Per-row colour for the leading glyph, applied inline — overrides the
+     * shared `--uxm-menu-item-icon-color` for THIS row only. For icons that
+     * carry identity rather than decoration: a workspace's own colour, a
+     * status tint.
+     *
+     * Prefer a token reference (`'var(--color-category-composite)'`) so MODO
+     * re-tinting still reaches it. A raw hex is only legitimate when the
+     * colour is entity DATA from a backend, not a brand choice — otherwise it
+     * punches a hole in the two-layer theming model.
+     *
+     * Being inline it wins over the `color: inherit` that `--active` /
+     * `--danger` rows apply to the glyph. Deliberate — an identity colour
+     * should survive highlighting — but it also means a `danger` row keeps
+     * this colour instead of folding to the danger tone.
+     */
+    iconColor?: string;
+    /** Optional trailing hint (e.g. a keyboard shortcut "⌘C"). */
+    hint?: ReactNode;
+    /** Invoked on click / Enter / Space. The menu closes afterward. */
+    onSelect?: () => void;
+    /** Greyed + non-interactive; skipped by keyboard nav. */
+    disabled?: boolean;
+    /** Destructive styling (danger color) — e.g. Delete. */
+    danger?: boolean;
+    /**
+     * Marks the row the user is currently ON — the workspace they're in, the
+     * view they're looking at. Renders a trailing ✓ plus a heavier label, and
+     * sets `aria-current="true"`.
+     *
+     * Named `current`, NOT `active`: `--active` already means "the row under
+     * the keyboard cursor" throughout this atom. The two compose — `--current`
+     * contributes weight + ✓, `--active` contributes the highlight surface —
+     * so a row that is both reads as both.
+     *
+     * Deliberately not `aria-selected` (invalid on `menuitem`) and not
+     * `role="menuitemradio"` + `aria-checked`, even though the latter is the
+     * canonical ARIA answer for "one of a set is checked in a menu": a radio
+     * set requires EVERY member to carry `aria-checked`, which a flat
+     * `MenuEntry[]` cannot infer. Consumers would have to pass `current:
+     * false` on every sibling, and forgetting one leaves a lone radio with no
+     * set — worse than no role at all. `aria-current` is also already this
+     * repo's idiom for "where you are" (sidebar-nav-item, breadcrumb,
+     * calendar). Revisit `menuitemradio` if one panel ever needs TWO
+     * independent switcher sets.
+     */
+    current?: boolean;
+}
+/** A non-interactive divider between groups of items. */
+export interface MenuSeparator {
+    separator: true;
+    /** Optional key; falls back to positional. */
+    key?: string;
+}
+export type MenuEntry = MenuItem | MenuSeparator;
+/**
+ * Props spread onto the consumer's trigger element. Mirrors Listbox's
+ * trigger contract — the consumer owns the trigger entirely (an
+ * IconButton ⋮, a Button, anything) and the menu wires open/close +
+ * ARIA through these. Do NOT add your own onClick / aria-expanded /
+ * aria-haspopup — they would override the menu's wiring.
+ */
+export interface MenuTriggerProps {
+    ref: (el: HTMLElement | null) => void;
+    onClick: () => void;
+    onKeyDown: (e: React.KeyboardEvent<HTMLElement>) => void;
+    'aria-haspopup': 'menu';
+    'aria-expanded': boolean;
+    'aria-controls'?: string;
+}
+export interface MenuProps {
+    /** Menu entries — actionable items + separators, in display order. */
+    items: MenuEntry[];
+    /** Render the trigger. Spread `triggerProps` onto your interactive element. */
+    renderTrigger: (api: {
+        open: boolean;
+        triggerProps: MenuTriggerProps;
+    }) => ReactNode;
+    /** Preferred placement. Flips if it would clip. Default `bottom-end` (menus typically align to a trailing ⋮). */
+    placement?: PopoverPlacement;
+    /** Controlled open state. Pair with `onOpenChange`. Omit for uncontrolled. */
+    open?: boolean;
+    /** Called whenever the menu wants to open/close. Required if `open` is passed. */
+    onOpenChange?: (open: boolean) => void;
+    /** Minimum panel width in px. Default 160 — unless `matchAnchorWidth` is set; see there. */
+    minWidth?: number;
+    /** Maximum panel width in px — long labels truncate beyond it. Default 280 — unless `matchAnchorWidth` is set; see there. */
+    maxWidth?: number;
+    /**
+     * Tie the panel width to the trigger: `true` makes it equal, `'min'` makes
+     * the trigger width a floor the panel may grow past. Default `false` —
+     * width from content, clamped by `minWidth` / `maxWidth`.
+     *
+     * Which is right follows from what the trigger IS. A field-like trigger
+     * that DISPLAYS a value (a workspace switcher, a scope picker) wants the
+     * panel tied to it — the native `<select>` convention, where the panel
+     * reads as a continuation of the control rather than a separate floating
+     * card; `'min'` is the forgiving choice there, since user-authored labels
+     * outgrow a fixed width. An icon-only or ⋮ trigger must NOT match, or you
+     * get a 32px panel — which is exactly why the default is `false` and
+     * `placement` is `bottom-end`: content width, aligned to the trailing
+     * edge the ⋮ sits on.
+     *
+     * Setting this also drops the default 160/280 clamp. Popover applies
+     * `maxWidth` unconditionally, so leaving 280 in place would paint a panel
+     * NARROWER than a trigger wider than 280.
+     *
+     * On restoring bounds, mind the asymmetry — `Popover` treats the two
+     * differently (popover.tsx: `minWidth: matchAnchorWidth === 'min' ?
+     * anchorWidth : minWidth`):
+     *   - `maxWidth` is always honoured, in either mode.
+     *   - `minWidth` is honoured with `true`, but **ignored with `'min'`** — that
+     *     mode makes the measured anchor width the floor and discards whatever
+     *     you pass. So you cannot demand a floor WIDER than the trigger in
+     *     `'min'` mode; use `true` plus an explicit `minWidth` if you need that.
+     */
+    matchAnchorWidth?: boolean | 'min';
+    /** Accessible name for the menu panel. */
+    'aria-label'?: string;
+    /** Class on the in-page wrapper around the trigger. */
+    className?: string;
+    /** Class on the portaled panel. */
+    panelClassName?: string;
+    /** Style merged onto the portaled panel (after computed position). */
+    panelStyle?: CSSProperties;
+}
+/**
+ * Action / dropdown menu — a list of commands invoked from a
+ * consumer-owned trigger. Built on the headless `Popover` (positioning,
+ * portal, outside-click, Escape) with proper menu semantics
+ * (`role="menu"` / `menuitem` / `separator`), arrow-key navigation that
+ * skips separators + disabled rows, separators, leading icons, trailing
+ * hints, destructive (danger) items, and a `current` row for switchers.
+ *
+ * Distinct from Listbox by design: a menu holds NO value — picking a row
+ * runs its action and closes. Reach for Listbox/Select when the panel must
+ * OWN the chosen value (`role=listbox`, `aria-selected`); reach for Menu
+ * for row ⋮ actions, overflow menus, command lists, and context switchers
+ * (`role=menu`). A switcher marks where you are with `current`
+ * (`aria-current` + a trailing ✓) — a reflection of state that lives
+ * elsewhere, not a value the menu keeps.
+ *
+ * Trigger ownership stays with the consumer (`renderTrigger` + spread
+ * `triggerProps`) so an IconButton ⋮, a Button, or any surface works
+ * without renderProp acrobatics — same contract as Listbox.
+ */
+export declare function Menu({ items, renderTrigger, placement, open: openProp, onOpenChange, minWidth, maxWidth, matchAnchorWidth, 'aria-label': ariaLabel, className, panelClassName, panelStyle, }: MenuProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=menu.d.ts.map

package/dist/ui/menu/menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../../src/ui/menu/menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,aAAa,EAClB,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AAIf,OAAO,EAAW,KAAK,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAM5D;;;;;;;;;;GAUG;AACH,MAAM,WAAW,QAAQ;IACvB,2EAA2E;IAC3E,GAAG,EAAE,MAAM,CAAC;IACZ,qFAAqF;IACrF,KAAK,EAAE,SAAS,CAAC;IACjB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,kDAAkD;IAClD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;;;;;;;;;;;;OAeG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8DAA8D;IAC9D,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,mEAAmE;IACnE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wDAAwD;IACxD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;;;;;;;;;;;;;;;;;OAoBG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,yDAAyD;AACzD,MAAM,WAAW,aAAa;IAC5B,SAAS,EAAE,IAAI,CAAC;IAChB,8CAA8C;IAC9C,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,aAAa,CAAC;AAMjD;;;;;;GAMG;AACH,MAAM,WAAW,gBAAgB;IAC/B,GAAG,EAAE,CAAC,EAAE,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IACtC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACzD,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,MAAM,WAAW,SAAS;IACxB,sEAAsE;IACtE,KAAK,EAAE,SAAS,EAAE,CAAC;IACnB,+EAA+E;IAC/E,aAAa,EAAE,CAAC,GAAG,EAAE;QAAE,IAAI,EAAE,OAAO,CAAC;QAAC,YAAY,EAAE,gBAAgB,CAAA;KAAE,KAAK,SAAS,CAAC;IACrF,iHAAiH;IACjH,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,8EAA8E;IAC9E,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,kFAAkF;IAClF,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,4FAA4F;IAC5F,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,6HAA6H;IAC7H,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;;;;;;;;;;;;;;;;;;;;;;;OA2BG;IACH,gBAAgB,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IACnC,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,uDAAuD;IACvD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mCAAmC;IACnC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,sEAAsE;IACtE,UAAU,CAAC,EAAE,aAAa,CAAC;CAC5B;AAMD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,IAAI,CAAC,EACnB,KAAK,EACL,aAAa,EACb,SAAwB,EACxB,IAAI,EAAE,QAAQ,EACd,YAAY,EACZ,QAAQ,EACR,QAAQ,EACR,gBAAwB,EACxB,YAAY,EAAE,SAAS,EACvB,SAAS,EACT,cAAc,EACd,UAAU,GACX,EAAE,SAAS,2CA+RX"}

package/dist/ui/menu/menu.js

@@ -0,0 +1,240 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  useCallback,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { cn } from "../../helpers/cn.js";
+import { Icon } from "../icon/index.js";
+import { Popover } from "../popover/index.js";
+function isSeparator(entry) {
+  return entry.separator === true;
+}
+function Menu({
+  items,
+  renderTrigger,
+  placement = "bottom-end",
+  open: openProp,
+  onOpenChange,
+  minWidth,
+  maxWidth,
+  matchAnchorWidth = false,
+  "aria-label": ariaLabel,
+  className,
+  panelClassName,
+  panelStyle
+}) {
+  const anchorTied = matchAnchorWidth !== false;
+  const resolvedMinWidth = minWidth ?? (anchorTied ? void 0 : 160);
+  const resolvedMaxWidth = maxWidth ?? (anchorTied ? void 0 : 280);
+  const triggerRef = useRef(null);
+  const itemRefs = useRef(/* @__PURE__ */ new Map());
+  const panelId = useId();
+  const [openInternal, setOpenInternal] = useState(false);
+  const open = openProp ?? openInternal;
+  const setOpen = useCallback(
+    (next) => {
+      if (openProp === void 0) setOpenInternal(next);
+      onOpenChange?.(next);
+    },
+    [openProp, onOpenChange]
+  );
+  const focusableIndices = useMemo(() => {
+    const idx = [];
+    items.forEach((entry, i) => {
+      if (!isSeparator(entry) && !entry.disabled) idx.push(i);
+    });
+    return idx;
+  }, [items]);
+  const hasCurrent = useMemo(
+    () => items.some((entry) => !isSeparator(entry) && entry.current),
+    [items]
+  );
+  const [active, setActive] = useState(0);
+  const listRef = useRef(null);
+  const openedByKeyboard = useRef(false);
+  useEffect(() => {
+    if (!open) {
+      openedByKeyboard.current = false;
+      return;
+    }
+    setActive(openedByKeyboard.current || !hasCurrent ? 0 : -1);
+    openedByKeyboard.current = false;
+    const t = setTimeout(() => listRef.current?.focus(), 0);
+    return () => clearTimeout(t);
+  }, [open]);
+  useEffect(() => {
+    if (!open || active < 0) return;
+    const itemIndex = focusableIndices[active];
+    if (itemIndex == null) return;
+    const entry = items[itemIndex];
+    if (isSeparator(entry)) return;
+    itemRefs.current.get(entry.key)?.scrollIntoView({ block: "nearest" });
+  }, [active, open, items, focusableIndices]);
+  const select = useCallback(
+    (item) => {
+      if (item.disabled) return;
+      item.onSelect?.();
+      setOpen(false);
+    },
+    [setOpen]
+  );
+  const onPanelKeyDown = useCallback(
+    (e) => {
+      const n = focusableIndices.length;
+      if (n === 0) return;
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setActive((i) => i < 0 ? 0 : (i + 1) % n);
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setActive((i) => i < 0 ? n - 1 : (i - 1 + n) % n);
+      } else if (e.key === "Home") {
+        e.preventDefault();
+        setActive(0);
+      } else if (e.key === "End") {
+        e.preventDefault();
+        setActive(n - 1);
+      } else if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        if (active < 0) return;
+        const itemIndex = focusableIndices[active];
+        const entry = itemIndex != null ? items[itemIndex] : void 0;
+        if (entry && !isSeparator(entry)) select(entry);
+      }
+    },
+    [active, focusableIndices, items, select]
+  );
+  const onTriggerKeyDown = useCallback(
+    (e) => {
+      if (e.key === "Enter" || e.key === " " || e.key === "ArrowDown") {
+        e.preventDefault();
+        openedByKeyboard.current = true;
+        setOpen(true);
+      }
+    },
+    [setOpen]
+  );
+  const triggerProps = useMemo(
+    () => ({
+      ref: (el) => {
+        triggerRef.current = el;
+      },
+      onClick: () => setOpen(!open),
+      onKeyDown: onTriggerKeyDown,
+      "aria-haspopup": "menu",
+      "aria-expanded": open,
+      "aria-controls": open ? panelId : void 0
+    }),
+    [open, onTriggerKeyDown, panelId, setOpen]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: cn("uxm-menu", className), children: [
+    renderTrigger({ open, triggerProps }),
+    /* @__PURE__ */ jsx(
+      Popover,
+      {
+        open,
+        onOpenChange: setOpen,
+        anchor: triggerRef,
+        placement,
+        minWidth: resolvedMinWidth,
+        maxWidth: resolvedMaxWidth,
+        matchAnchorWidth,
+        initialFocus: listRef,
+        role: "menu",
+        "aria-label": ariaLabel,
+        id: panelId,
+        className: cn("uxm-menu__panel", panelClassName),
+        style: panelStyle,
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: listRef,
+            className: "uxm-menu__list",
+            tabIndex: -1,
+            onKeyDown: onPanelKeyDown,
+            children: items.map((entry, i) => {
+              if (isSeparator(entry)) {
+                return /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "uxm-menu__separator",
+                    role: "separator"
+                  },
+                  entry.key ?? `__sep_${i}`
+                );
+              }
+              const isActive = active >= 0 && focusableIndices[active] === i;
+              return /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  ref: (el) => {
+                    if (el) itemRefs.current.set(entry.key, el);
+                    else itemRefs.current.delete(entry.key);
+                  },
+                  type: "button",
+                  role: "menuitem",
+                  "aria-current": entry.current ? "true" : void 0,
+                  "aria-disabled": entry.disabled || void 0,
+                  disabled: entry.disabled || void 0,
+                  onMouseDown: (e) => {
+                    e.preventDefault();
+                    select(entry);
+                  },
+                  onMouseEnter: () => {
+                    if (entry.disabled) return;
+                    const flatIdx = focusableIndices.indexOf(i);
+                    if (flatIdx >= 0) setActive(flatIdx);
+                  },
+                  className: cn(
+                    "uxm-menu__item",
+                    isActive && "uxm-menu__item--active",
+                    entry.disabled && "uxm-menu__item--disabled",
+                    entry.danger && "uxm-menu__item--danger",
+                    entry.current && "uxm-menu__item--current"
+                  ),
+                  children: [
+                    entry.icon && /* @__PURE__ */ jsx(
+                      Icon,
+                      {
+                        glyph: entry.icon,
+                        size: 16,
+                        className: "uxm-menu__item-icon",
+                        style: entry.iconColor ? { color: entry.iconColor } : void 0
+                      }
+                    ),
+                    entry.subtitle != null ? (
+                      // Two-line row: headline + subtitle stacked in a column so
+                      // the label keeps its ellipsis and the trailing hint still
+                      // right-aligns against the block.
+                      /* @__PURE__ */ jsxs("span", { className: "uxm-menu__item-text", children: [
+                        /* @__PURE__ */ jsx("span", { className: "uxm-menu__item-label", children: entry.label }),
+                        /* @__PURE__ */ jsx("span", { className: "uxm-menu__item-subtitle", children: entry.subtitle })
+                      ] })
+                    ) : /* @__PURE__ */ jsx("span", { className: "uxm-menu__item-label", children: entry.label }),
+                    entry.hint != null && /* @__PURE__ */ jsx("span", { className: "uxm-menu__item-hint", children: entry.hint }),
+                    entry.current && // Trailing ✓, after any hint. It needs NO `margin-left:
+                    // auto` — the label / text column already carries `flex: 1`
+                    // and eats the free space. Adding one would split that space
+                    // with the hint's own auto margin and float the hint
+                    // mid-row. `aria-current` on the row already carries the
+                    // meaning, so the glyph stays out of the a11y tree.
+                    /* @__PURE__ */ jsx("span", { className: "uxm-menu__item-checkmark", "aria-hidden": "true", children: /* @__PURE__ */ jsx(Icon, { glyph: "check", size: 14 }) })
+                  ]
+                },
+                entry.key
+              );
+            })
+          }
+        )
+      }
+    )
+  ] });
+}
+export {
+  Menu
+};
+//# sourceMappingURL=menu.js.map

package/dist/ui/menu/menu.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/menu/menu.tsx"],"sourcesContent":["import {\n  useCallback,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n  type CSSProperties,\n  type ReactNode,\n  type RefObject,\n} from 'react';\n\nimport { cn } from '../../helpers/cn';\nimport { Icon } from '../icon';\nimport { Popover, type PopoverPlacement } from '../popover';\n\n// ─────────────────────────────────────────────────────────────────────────────\n//  Types\n// ─────────────────────────────────────────────────────────────────────────────\n\n/**\n * One actionable row in the menu. Selecting it fires `onSelect` and\n * closes the menu — menus are about INVOKING an action, not holding a\n * selected value (that's Listbox/Select): pick → act → dismiss.\n *\n * `current` is not a counter-example. It marks where the user already IS\n * (the workspace they're in), which the menu reflects rather than owns —\n * there is still no value the menu holds, no `aria-selected`, and nothing\n * the atom mutates on pick. Reach for Listbox/Select the moment the panel\n * is supposed to OWN the chosen value.\n */\nexport interface MenuItem {\n  /** Stable identity — used as React key and for keyboard focus tracking. */\n  key: string;\n  /** Row content. A plain string renders as the label; pass a node for richer rows. */\n  label: ReactNode;\n  /**\n   * Optional secondary line rendered beneath `label`, turning the row into a\n   * two-line item: `label` is the headline, `subtitle` the supporting text\n   * (e.g. a description or the current value). Single-line rows omit it.\n   */\n  subtitle?: ReactNode;\n  /** Optional leading icon glyph (see icons.ts). */\n  icon?: string;\n  /**\n   * Per-row colour for the leading glyph, applied inline — overrides the\n   * shared `--uxm-menu-item-icon-color` for THIS row only. For icons that\n   * carry identity rather than decoration: a workspace's own colour, a\n   * status tint.\n   *\n   * Prefer a token reference (`'var(--color-category-composite)'`) so MODO\n   * re-tinting still reaches it. A raw hex is only legitimate when the\n   * colour is entity DATA from a backend, not a brand choice — otherwise it\n   * punches a hole in the two-layer theming model.\n   *\n   * Being inline it wins over the `color: inherit` that `--active` /\n   * `--danger` rows apply to the glyph. Deliberate — an identity colour\n   * should survive highlighting — but it also means a `danger` row keeps\n   * this colour instead of folding to the danger tone.\n   */\n  iconColor?: string;\n  /** Optional trailing hint (e.g. a keyboard shortcut \"⌘C\"). */\n  hint?: ReactNode;\n  /** Invoked on click / Enter / Space. The menu closes afterward. */\n  onSelect?: () => void;\n  /** Greyed + non-interactive; skipped by keyboard nav. */\n  disabled?: boolean;\n  /** Destructive styling (danger color) — e.g. Delete. */\n  danger?: boolean;\n  /**\n   * Marks the row the user is currently ON — the workspace they're in, the\n   * view they're looking at. Renders a trailing ✓ plus a heavier label, and\n   * sets `aria-current=\"true\"`.\n   *\n   * Named `current`, NOT `active`: `--active` already means \"the row under\n   * the keyboard cursor\" throughout this atom. The two compose — `--current`\n   * contributes weight + ✓, `--active` contributes the highlight surface —\n   * so a row that is both reads as both.\n   *\n   * Deliberately not `aria-selected` (invalid on `menuitem`) and not\n   * `role=\"menuitemradio\"` + `aria-checked`, even though the latter is the\n   * canonical ARIA answer for \"one of a set is checked in a menu\": a radio\n   * set requires EVERY member to carry `aria-checked`, which a flat\n   * `MenuEntry[]` cannot infer. Consumers would have to pass `current:\n   * false` on every sibling, and forgetting one leaves a lone radio with no\n   * set — worse than no role at all. `aria-current` is also already this\n   * repo's idiom for \"where you are\" (sidebar-nav-item, breadcrumb,\n   * calendar). Revisit `menuitemradio` if one panel ever needs TWO\n   * independent switcher sets.\n   */\n  current?: boolean;\n}\n\n/** A non-interactive divider between groups of items. */\nexport interface MenuSeparator {\n  separator: true;\n  /** Optional key; falls back to positional. */\n  key?: string;\n}\n\nexport type MenuEntry = MenuItem | MenuSeparator;\n\nfunction isSeparator(entry: MenuEntry): entry is MenuSeparator {\n  return (entry as MenuSeparator).separator === true;\n}\n\n/**\n * Props spread onto the consumer's trigger element. Mirrors Listbox's\n * trigger contract — the consumer owns the trigger entirely (an\n * IconButton ⋮, a Button, anything) and the menu wires open/close +\n * ARIA through these. Do NOT add your own onClick / aria-expanded /\n * aria-haspopup — they would override the menu's wiring.\n */\nexport interface MenuTriggerProps {\n  ref: (el: HTMLElement | null) => void;\n  onClick: () => void;\n  onKeyDown: (e: React.KeyboardEvent<HTMLElement>) => void;\n  'aria-haspopup': 'menu';\n  'aria-expanded': boolean;\n  'aria-controls'?: string;\n}\n\nexport interface MenuProps {\n  /** Menu entries — actionable items + separators, in display order. */\n  items: MenuEntry[];\n  /** Render the trigger. Spread `triggerProps` onto your interactive element. */\n  renderTrigger: (api: { open: boolean; triggerProps: MenuTriggerProps }) => ReactNode;\n  /** Preferred placement. Flips if it would clip. Default `bottom-end` (menus typically align to a trailing ⋮). */\n  placement?: PopoverPlacement;\n  /** Controlled open state. Pair with `onOpenChange`. Omit for uncontrolled. */\n  open?: boolean;\n  /** Called whenever the menu wants to open/close. Required if `open` is passed. */\n  onOpenChange?: (open: boolean) => void;\n  /** Minimum panel width in px. Default 160 — unless `matchAnchorWidth` is set; see there. */\n  minWidth?: number;\n  /** Maximum panel width in px — long labels truncate beyond it. Default 280 — unless `matchAnchorWidth` is set; see there. */\n  maxWidth?: number;\n  /**\n   * Tie the panel width to the trigger: `true` makes it equal, `'min'` makes\n   * the trigger width a floor the panel may grow past. Default `false` —\n   * width from content, clamped by `minWidth` / `maxWidth`.\n   *\n   * Which is right follows from what the trigger IS. A field-like trigger\n   * that DISPLAYS a value (a workspace switcher, a scope picker) wants the\n   * panel tied to it — the native `<select>` convention, where the panel\n   * reads as a continuation of the control rather than a separate floating\n   * card; `'min'` is the forgiving choice there, since user-authored labels\n   * outgrow a fixed width. An icon-only or ⋮ trigger must NOT match, or you\n   * get a 32px panel — which is exactly why the default is `false` and\n   * `placement` is `bottom-end`: content width, aligned to the trailing\n   * edge the ⋮ sits on.\n   *\n   * Setting this also drops the default 160/280 clamp. Popover applies\n   * `maxWidth` unconditionally, so leaving 280 in place would paint a panel\n   * NARROWER than a trigger wider than 280.\n   *\n   * On restoring bounds, mind the asymmetry — `Popover` treats the two\n   * differently (popover.tsx: `minWidth: matchAnchorWidth === 'min' ?\n   * anchorWidth : minWidth`):\n   *   - `maxWidth` is always honoured, in either mode.\n   *   - `minWidth` is honoured with `true`, but **ignored with `'min'`** — that\n   *     mode makes the measured anchor width the floor and discards whatever\n   *     you pass. So you cannot demand a floor WIDER than the trigger in\n   *     `'min'` mode; use `true` plus an explicit `minWidth` if you need that.\n   */\n  matchAnchorWidth?: boolean | 'min';\n  /** Accessible name for the menu panel. */\n  'aria-label'?: string;\n  /** Class on the in-page wrapper around the trigger. */\n  className?: string;\n  /** Class on the portaled panel. */\n  panelClassName?: string;\n  /** Style merged onto the portaled panel (after computed position). */\n  panelStyle?: CSSProperties;\n}\n\n// ─────────────────────────────────────────────────────────────────────────────\n//  Menu\n// ─────────────────────────────────────────────────────────────────────────────\n\n/**\n * Action / dropdown menu — a list of commands invoked from a\n * consumer-owned trigger. Built on the headless `Popover` (positioning,\n * portal, outside-click, Escape) with proper menu semantics\n * (`role=\"menu\"` / `menuitem` / `separator`), arrow-key navigation that\n * skips separators + disabled rows, separators, leading icons, trailing\n * hints, destructive (danger) items, and a `current` row for switchers.\n *\n * Distinct from Listbox by design: a menu holds NO value — picking a row\n * runs its action and closes. Reach for Listbox/Select when the panel must\n * OWN the chosen value (`role=listbox`, `aria-selected`); reach for Menu\n * for row ⋮ actions, overflow menus, command lists, and context switchers\n * (`role=menu`). A switcher marks where you are with `current`\n * (`aria-current` + a trailing ✓) — a reflection of state that lives\n * elsewhere, not a value the menu keeps.\n *\n * Trigger ownership stays with the consumer (`renderTrigger` + spread\n * `triggerProps`) so an IconButton ⋮, a Button, or any surface works\n * without renderProp acrobatics — same contract as Listbox.\n */\nexport function Menu({\n  items,\n  renderTrigger,\n  placement = 'bottom-end',\n  open: openProp,\n  onOpenChange,\n  minWidth,\n  maxWidth,\n  matchAnchorWidth = false,\n  'aria-label': ariaLabel,\n  className,\n  panelClassName,\n  panelStyle,\n}: MenuProps) {\n  // Content-width defaults apply only while the panel is NOT tied to the\n  // anchor. Popover always forwards `maxWidth`, so keeping 280 alongside\n  // `matchAnchorWidth` would clamp a wide trigger's panel to less than the\n  // trigger itself; the symmetric trap is a 160 floor making the panel wider\n  // than a narrow trigger. An explicit `maxWidth` still wins either way; an\n  // explicit `minWidth` wins with `true` but is discarded by Popover under\n  // `'min'`, which always uses the measured anchor width as the floor.\n  const anchorTied = matchAnchorWidth !== false;\n  const resolvedMinWidth = minWidth ?? (anchorTied ? undefined : 160);\n  const resolvedMaxWidth = maxWidth ?? (anchorTied ? undefined : 280);\n\n  const triggerRef = useRef<HTMLElement | null>(null);\n  const itemRefs = useRef<Map<string, HTMLButtonElement>>(new Map());\n  const panelId = useId();\n\n  // Open state — controlled if `open` is provided, else internal.\n  const [openInternal, setOpenInternal] = useState(false);\n  const open = openProp ?? openInternal;\n  const setOpen = useCallback(\n    (next: boolean) => {\n      if (openProp === undefined) setOpenInternal(next);\n      onOpenChange?.(next);\n    },\n    [openProp, onOpenChange],\n  );\n\n  // Flat list of indices into `items` that are focusable (enabled\n  // actionable rows) — separators + disabled rows are skipped by\n  // keyboard nav. `active` is an index INTO this array, not into `items`.\n  const focusableIndices = useMemo(() => {\n    const idx: number[] = [];\n    items.forEach((entry, i) => {\n      if (!isSeparator(entry) && !entry.disabled) idx.push(i);\n    });\n    return idx;\n  }, [items]);\n\n  // A switcher already says where you are — the `current` row carries the ✓ and\n  // the heavier label. Lighting a SECOND row on open then competes with it, and\n  // because hover and keyboard highlight share one `--active` class, that row is\n  // indistinguishable from \"your pointer is here\". So a menu that has a\n  // `current` row opens with NOTHING highlighted (`active = -1`).\n  //\n  // Scoped to `current` on purpose: a plain action menu has no other way to say\n  // \"start here\", so it keeps lighting row one exactly as before — no existing\n  // consumer changes behaviour, since none of them pass `current` yet.\n  const hasCurrent = useMemo(\n    () => items.some((entry) => !isSeparator(entry) && entry.current),\n    [items],\n  );\n\n  const [active, setActive] = useState(0);\n  const listRef = useRef<HTMLDivElement | null>(null);\n  // Set by the trigger's key handler just before it opens, read once by the open\n  // effect. A ref, not state — it has to be readable in the same commit that\n  // flips `open`, without a render of its own. A keyboard-opened menu always\n  // takes a position, `current` row or not: otherwise ArrowDown-to-open would\n  // need a SECOND ArrowDown just to enter the list.\n  const openedByKeyboard = useRef(false);\n\n  // Reset highlight to the first item each time the menu opens, and move\n  // focus into the panel so arrow keys navigate the menu (WAI-ARIA\n  // menu-button pattern). The panel list is `tabIndex=-1` and owns the\n  // keyboard handler — focusing it is what routes keys there.\n  //\n  // The focus is deferred to a macrotask: Popover mounts the panel\n  // `visibility: hidden` and only flips it visible once it has measured +\n  // positioned it, and `focus()` on a `visibility: hidden` element is a\n  // no-op. A `setTimeout(0)` lands after that position-settle re-render\n  // (and, unlike rAF, still fires when the tab is backgrounded). We own\n  // this rather than leaning on Popover's `initialFocus` (which we still\n  // pass, for focus restoration on close) — the menu's keyboard contract\n  // is the atom's own responsibility.\n  useEffect(() => {\n    if (!open) {\n      // Also clear on close, not only after a successful open. In CONTROLLED\n      // mode a consumer's `onOpenChange` may decline to flip `open` (gating it\n      // behind async state), and without this the flag would survive to\n      // mis-attribute a later pointer-open as a keyboard one.\n      openedByKeyboard.current = false;\n      return;\n    }\n    setActive(openedByKeyboard.current || !hasCurrent ? 0 : -1);\n    openedByKeyboard.current = false;\n    const t = setTimeout(() => listRef.current?.focus(), 0);\n    return () => clearTimeout(t);\n    // `hasCurrent` is read here but deliberately left OUT of the deps: this is a\n    // one-shot reset for the open transition. Re-running it because the item set\n    // gained or lost a `current` row mid-interaction would yank the highlight\n    // and re-steal focus.\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- see above\n  }, [open]);\n\n  // Keep the highlighted row scrolled into view after arrow nav.\n  useEffect(() => {\n    if (!open || active < 0) return;\n    const itemIndex = focusableIndices[active];\n    if (itemIndex == null) return;\n    const entry = items[itemIndex];\n    if (isSeparator(entry)) return;\n    itemRefs.current.get(entry.key)?.scrollIntoView({ block: 'nearest' });\n  }, [active, open, items, focusableIndices]);\n\n  const select = useCallback(\n    (item: MenuItem) => {\n      if (item.disabled) return;\n      item.onSelect?.();\n      setOpen(false);\n    },\n    [setOpen],\n  );\n\n  // Panel keyboard nav — the panel itself is focused on open (tabIndex\n  // -1) so arrows work without any text input. Wraps at both ends, like\n  // Listbox.\n  const onPanelKeyDown = useCallback(\n     \n    (e: React.KeyboardEvent) => {\n      const n = focusableIndices.length;\n      if (n === 0) return;\n      if (e.key === 'ArrowDown') {\n        e.preventDefault();\n        // From \"nothing highlighted\" the first press lands on the FIRST row,\n        // not the second.\n        setActive((i) => (i < 0 ? 0 : (i + 1) % n));\n      } else if (e.key === 'ArrowUp') {\n        e.preventDefault();\n        setActive((i) => (i < 0 ? n - 1 : (i - 1 + n) % n));\n      } else if (e.key === 'Home') {\n        e.preventDefault();\n        setActive(0);\n      } else if (e.key === 'End') {\n        e.preventDefault();\n        setActive(n - 1);\n      } else if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault();\n        if (active < 0) return;\n        const itemIndex = focusableIndices[active];\n        const entry = itemIndex != null ? items[itemIndex] : undefined;\n        if (entry && !isSeparator(entry)) select(entry);\n      }\n      // Escape is handled globally by Popover.\n    },\n    [active, focusableIndices, items, select],\n  );\n\n  // Trigger keyboard — Enter/Space/ArrowDown open the menu, matching the\n  // WAI-ARIA menu-button pattern.\n  const onTriggerKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLElement>) => {\n      if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {\n        e.preventDefault();\n        openedByKeyboard.current = true;\n        setOpen(true);\n      }\n    },\n    [setOpen],\n  );\n\n  // Memoised so a single `{...triggerProps}` spread doesn't hand the\n  // consumer a fresh `ref` callback every render — React would call the\n  // old callback with `null` then the new one with the element on each\n  // cycle, briefly nulling `triggerRef.current` (which Popover reads to\n  // position the panel). Mirrors the Listbox implementation.\n  const triggerProps: MenuTriggerProps = useMemo(\n    () => ({\n      ref: (el: HTMLElement | null) => {\n        triggerRef.current = el;\n      },\n      onClick: () => setOpen(!open),\n      onKeyDown: onTriggerKeyDown,\n      'aria-haspopup': 'menu',\n      'aria-expanded': open,\n      'aria-controls': open ? panelId : undefined,\n    }),\n    [open, onTriggerKeyDown, panelId, setOpen],\n  );\n\n  return (\n    <div className={cn('uxm-menu', className)}>\n      {/* eslint-disable-next-line react-hooks/refs -- triggerProps contains a ref-setter callback; the rule flags the pattern but the callback is the React-blessed way to wire a ref through a consumer-rendered element (same as Listbox) */}\n      {renderTrigger({ open, triggerProps })}\n      <Popover\n        open={open}\n        onOpenChange={setOpen}\n        anchor={triggerRef}\n        placement={placement}\n        minWidth={resolvedMinWidth}\n        maxWidth={resolvedMaxWidth}\n        matchAnchorWidth={matchAnchorWidth}\n        initialFocus={listRef as RefObject<HTMLElement | null>}\n        role=\"menu\"\n        aria-label={ariaLabel}\n        id={panelId}\n        className={cn('uxm-menu__panel', panelClassName)}\n        style={panelStyle}\n      >\n        {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions -- the panel carries role=\"menu\" (set on the Popover above); this inner list is the focus target + key-router for WAI-ARIA menu nav, with full keyboard support via onKeyDown */}\n        <div\n          ref={listRef}\n          className=\"uxm-menu__list\"\n          tabIndex={-1}\n          onKeyDown={onPanelKeyDown}\n        >\n          {items.map((entry, i) => {\n            if (isSeparator(entry)) {\n              return (\n                <div\n                  key={entry.key ?? `__sep_${i}`}\n                  className=\"uxm-menu__separator\"\n                  role=\"separator\"\n                />\n              );\n            }\n            const isActive = active >= 0 && focusableIndices[active] === i;\n            return (\n              <button\n                key={entry.key}\n                ref={(el) => {\n                  if (el) itemRefs.current.set(entry.key, el);\n                  else itemRefs.current.delete(entry.key);\n                }}\n                type=\"button\"\n                role=\"menuitem\"\n                aria-current={entry.current ? 'true' : undefined}\n                aria-disabled={entry.disabled || undefined}\n                disabled={entry.disabled || undefined}\n                // mousedown (not click) so focus stays on the panel and a\n                // pointer pick doesn't blur-then-reopen.\n                onMouseDown={(e) => {\n                  e.preventDefault();\n                  select(entry);\n                }}\n                onMouseEnter={() => {\n                  if (entry.disabled) return;\n                  const flatIdx = focusableIndices.indexOf(i);\n                  if (flatIdx >= 0) setActive(flatIdx);\n                }}\n                className={cn(\n                  'uxm-menu__item',\n                  isActive && 'uxm-menu__item--active',\n                  entry.disabled && 'uxm-menu__item--disabled',\n                  entry.danger && 'uxm-menu__item--danger',\n                  entry.current && 'uxm-menu__item--current',\n                )}\n              >\n                {entry.icon && (\n                  <Icon\n                    glyph={entry.icon}\n                    size={16}\n                    className=\"uxm-menu__item-icon\"\n                    style={entry.iconColor ? { color: entry.iconColor } : undefined}\n                  />\n                )}\n                {entry.subtitle != null ? (\n                  // Two-line row: headline + subtitle stacked in a column so\n                  // the label keeps its ellipsis and the trailing hint still\n                  // right-aligns against the block.\n                  <span className=\"uxm-menu__item-text\">\n                    <span className=\"uxm-menu__item-label\">{entry.label}</span>\n                    <span className=\"uxm-menu__item-subtitle\">{entry.subtitle}</span>\n                  </span>\n                ) : (\n                  <span className=\"uxm-menu__item-label\">{entry.label}</span>\n                )}\n                {entry.hint != null && (\n                  <span className=\"uxm-menu__item-hint\">{entry.hint}</span>\n                )}\n                {entry.current && (\n                  // Trailing ✓, after any hint. It needs NO `margin-left:\n                  // auto` — the label / text column already carries `flex: 1`\n                  // and eats the free space. Adding one would split that space\n                  // with the hint's own auto margin and float the hint\n                  // mid-row. `aria-current` on the row already carries the\n                  // meaning, so the glyph stays out of the a11y tree.\n                  <span className=\"uxm-menu__item-checkmark\" aria-hidden=\"true\">\n                    <Icon glyph=\"check\" size={14} />\n                  </span>\n                )}\n              </button>\n            );\n          })}\n        </div>\n      </Popover>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/ui/meta-row/index.cjs

@@ -0,0 +1,23 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var meta_row_exports = {};
+module.exports = __toCommonJS(meta_row_exports);
+__reExport(meta_row_exports, require("./meta-row.cjs"), module.exports);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ...require("./meta-row.cjs")
+});
+//# sourceMappingURL=index.cjs.map

package/dist/ui/meta-row/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/meta-row/index.ts"],"sourcesContent":["export * from './meta-row';\n"],"mappings":";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,6BAAc,uBAAd;","names":[]}

package/dist/ui/meta-row/index.d.ts

@@ -0,0 +1,2 @@
+export * from './meta-row.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/meta-row/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/meta-row/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC"}

package/dist/ui/meta-row/index.js

@@ -0,0 +1,2 @@
+export * from "./meta-row.js";
+//# sourceMappingURL=index.js.map

package/dist/ui/meta-row/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/meta-row/index.ts"],"sourcesContent":["export * from './meta-row';\n"],"mappings":"AAAA,cAAc;","names":[]}

package/dist/ui/meta-row/meta-row-preview.cjs

@@ -0,0 +1,44 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var meta_row_preview_exports = {};
+__export(meta_row_preview_exports, {
+  MetaRowPreview: () => MetaRowPreview
+});
+module.exports = __toCommonJS(meta_row_preview_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_ui = require("../../ui/index.cjs");
+function MetaRowPreview({ styles }) {
+  const cssVars = {
+    "--uxm-meta-row-font-size": `${styles.fontSize}px`,
+    "--uxm-meta-row-color": styles.color,
+    "--uxm-meta-row-gap": `${styles.gap}px`,
+    "--uxm-meta-row-dot-size": `${styles.dotSize}px`,
+    "--uxm-meta-row-dot-color": styles.dotColor
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ui.MetaRow, { style: cssVars, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "v1.2.0" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "3 days ago" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Sarah Chen" })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MetaRowPreview
+});
+//# sourceMappingURL=meta-row-preview.cjs.map

package/dist/ui/meta-row/meta-row-preview.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/meta-row/meta-row-preview.tsx"],"sourcesContent":["import type { PreviewProps } from '@/previews/types';\nimport { MetaRow } from '@/ui';\n\nimport type { CSSProperties } from 'react';\n\nexport function MetaRowPreview({ styles }: PreviewProps) {\n  const cssVars = {\n    '--uxm-meta-row-font-size': `${styles.fontSize}px`,\n    '--uxm-meta-row-color': styles.color as string,\n    '--uxm-meta-row-gap': `${styles.gap}px`,\n    '--uxm-meta-row-dot-size': `${styles.dotSize}px`,\n    '--uxm-meta-row-dot-color': styles.dotColor as string,\n  } as CSSProperties;\n  return (\n    <MetaRow style={cssVars}>\n      <span>v1.2.0</span>\n      <span>3 days ago</span>\n      <span>Sarah Chen</span>\n    </MetaRow>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAcI;AAbJ,gBAAwB;AAIjB,SAAS,eAAe,EAAE,OAAO,GAAiB;AACvD,QAAM,UAAU;AAAA,IACd,4BAA4B,GAAG,OAAO,QAAQ;AAAA,IAC9C,wBAAwB,OAAO;AAAA,IAC/B,sBAAsB,GAAG,OAAO,GAAG;AAAA,IACnC,2BAA2B,GAAG,OAAO,OAAO;AAAA,IAC5C,4BAA4B,OAAO;AAAA,EACrC;AACA,SACE,6CAAC,qBAAQ,OAAO,SACd;AAAA,gDAAC,UAAK,oBAAM;AAAA,IACZ,4CAAC,UAAK,wBAAU;AAAA,IAChB,4CAAC,UAAK,wBAAU;AAAA,KAClB;AAEJ;","names":[]}

package/dist/ui/meta-row/meta-row-preview.d.ts

@@ -0,0 +1,3 @@
+import type { PreviewProps } from '../../previews/types.js';
+export declare function MetaRowPreview({ styles }: PreviewProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=meta-row-preview.d.ts.map

package/dist/ui/meta-row/meta-row-preview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta-row-preview.d.ts","sourceRoot":"","sources":["../../../src/ui/meta-row/meta-row-preview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAKrD,wBAAgB,cAAc,CAAC,EAAE,MAAM,EAAE,EAAE,YAAY,2CAetD"}

package/dist/ui/meta-row/meta-row-preview.js

@@ -0,0 +1,20 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { MetaRow } from "../../ui/index.js";
+function MetaRowPreview({ styles }) {
+  const cssVars = {
+    "--uxm-meta-row-font-size": `${styles.fontSize}px`,
+    "--uxm-meta-row-color": styles.color,
+    "--uxm-meta-row-gap": `${styles.gap}px`,
+    "--uxm-meta-row-dot-size": `${styles.dotSize}px`,
+    "--uxm-meta-row-dot-color": styles.dotColor
+  };
+  return /* @__PURE__ */ jsxs(MetaRow, { style: cssVars, children: [
+    /* @__PURE__ */ jsx("span", { children: "v1.2.0" }),
+    /* @__PURE__ */ jsx("span", { children: "3 days ago" }),
+    /* @__PURE__ */ jsx("span", { children: "Sarah Chen" })
+  ] });
+}
+export {
+  MetaRowPreview
+};
+//# sourceMappingURL=meta-row-preview.js.map

package/dist/ui/meta-row/meta-row-preview.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/meta-row/meta-row-preview.tsx"],"sourcesContent":["import type { PreviewProps } from '@/previews/types';\nimport { MetaRow } from '@/ui';\n\nimport type { CSSProperties } from 'react';\n\nexport function MetaRowPreview({ styles }: PreviewProps) {\n  const cssVars = {\n    '--uxm-meta-row-font-size': `${styles.fontSize}px`,\n    '--uxm-meta-row-color': styles.color as string,\n    '--uxm-meta-row-gap': `${styles.gap}px`,\n    '--uxm-meta-row-dot-size': `${styles.dotSize}px`,\n    '--uxm-meta-row-dot-color': styles.dotColor as string,\n  } as CSSProperties;\n  return (\n    <MetaRow style={cssVars}>\n      <span>v1.2.0</span>\n      <span>3 days ago</span>\n      <span>Sarah Chen</span>\n    </MetaRow>\n  );\n}\n"],"mappings":"AAcI,SACE,KADF;AAbJ,SAAS,eAAe;AAIjB,SAAS,eAAe,EAAE,OAAO,GAAiB;AACvD,QAAM,UAAU;AAAA,IACd,4BAA4B,GAAG,OAAO,QAAQ;AAAA,IAC9C,wBAAwB,OAAO;AAAA,IAC/B,sBAAsB,GAAG,OAAO,GAAG;AAAA,IACnC,2BAA2B,GAAG,OAAO,OAAO;AAAA,IAC5C,4BAA4B,OAAO;AAAA,EACrC;AACA,SACE,qBAAC,WAAQ,OAAO,SACd;AAAA,wBAAC,UAAK,oBAAM;AAAA,IACZ,oBAAC,UAAK,wBAAU;AAAA,IAChB,oBAAC,UAAK,wBAAU;AAAA,KAClB;AAEJ;","names":[]}