@viax.io/uxm 4.36.0

package/dist/ui/explorer-section/explorer-section-preview.js

@@ -0,0 +1,132 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { cn } from "../../helpers/index.js";
+import { ExplorerSection } from "../../ui/index.js";
+import { Icon } from "../../ui/index.js";
+const SECTIONS = [
+  { name: "Buttons", count: 5, color: "var(--color-accent)" },
+  { name: "Inputs", count: 7, color: "var(--color-accent-light)" },
+  { name: "Display", count: 12, color: "var(--color-highlight-warm)" }
+];
+function buildVars(styles) {
+  return {
+    "--uxm-explorer-section-inactive-bg": styles.inactiveBg,
+    "--uxm-explorer-section-inactive-text": styles.inactiveText,
+    "--uxm-explorer-section-hover-bg": styles.hoverBg,
+    "--uxm-explorer-section-hover-text": styles.hoverText,
+    "--uxm-explorer-section-focus-text": styles.focusText,
+    "--uxm-explorer-section-focus-ring": styles.focusRing,
+    "--uxm-explorer-section-disabled-bg": styles.disabledBg,
+    "--uxm-explorer-section-disabled-text": styles.disabledText,
+    "--uxm-explorer-section-disabled-opacity": styles.disabledOpacity != null ? String(styles.disabledOpacity) : void 0,
+    "--uxm-explorer-section-border-radius": `${styles.borderRadius}px`,
+    "--uxm-explorer-section-padding-x": `${styles.paddingX}px`,
+    "--uxm-explorer-section-padding-y": `${styles.paddingY}px`,
+    "--uxm-explorer-section-font-size": `${styles.fontSize}px`,
+    "--uxm-explorer-section-font-weight": styles.fontWeight,
+    "--uxm-explorer-section-gap": `${styles.gap}px`,
+    "--uxm-explorer-section-chevron-color": styles.chevronColor,
+    "--uxm-explorer-section-chevron-size": `${styles.chevronSize}px`,
+    "--uxm-explorer-section-trailing-color": styles.trailingColor,
+    "--uxm-explorer-section-trailing-size": `${styles.trailingSize}px`
+  };
+}
+function StaticShowcase({ state, open }) {
+  const isDisabled = state === "disabled";
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      tabIndex: -1,
+      disabled: isDisabled,
+      "aria-expanded": open,
+      className: cn(
+        "uxm-explorer-section",
+        open && "uxm-explorer-section--open",
+        state === "hover" && "uxm-explorer-section--state-hover",
+        state === "focus" && "uxm-explorer-section--state-focus"
+      ),
+      style: { pointerEvents: "none" },
+      children: [
+        /* @__PURE__ */ jsx(
+          Icon,
+          {
+            glyph: "chevron-down",
+            size: 12,
+            strokeWidth: 2.5,
+            className: "uxm-explorer-section__chevron",
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "uxm-explorer-section__indicator", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              width: 8,
+              height: 8,
+              borderRadius: "50%",
+              backgroundColor: "var(--color-accent)",
+              display: "inline-block"
+            }
+          }
+        ) }),
+        /* @__PURE__ */ jsx("span", { className: "uxm-explorer-section__label", children: "Buttons" }),
+        /* @__PURE__ */ jsx("span", { className: "uxm-explorer-section__trailing", children: "5" })
+      ]
+    }
+  );
+}
+function ExplorerSectionPreview({ styles, variants }) {
+  const state = variants.state ?? "default";
+  const initialOpen = variants.open !== "false";
+  const [openMap, setOpenMap] = useState(
+    () => Object.fromEntries(SECTIONS.map((s) => [s.name, initialOpen]))
+  );
+  const cssVars = buildVars(styles);
+  const sectionLabel = {
+    fontSize: 11,
+    color: "var(--color-text-muted)",
+    marginBottom: 12,
+    letterSpacing: 0.5,
+    textTransform: "uppercase"
+  };
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 32, minWidth: 280, ...cssVars }, children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsxs("div", { style: sectionLabel, children: [
+        state,
+        " state"
+      ] }),
+      /* @__PURE__ */ jsx(StaticShowcase, { state, open: initialOpen })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: { borderTop: "1px solid var(--color-border)", paddingTop: 16 }, children: [
+      /* @__PURE__ */ jsx("div", { style: sectionLabel, children: "Interactive" }),
+      /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: SECTIONS.map((s, i) => /* @__PURE__ */ jsx(
+        ExplorerSection,
+        {
+          open: openMap[s.name],
+          disabled: state === "disabled" && i === 1,
+          onClick: () => setOpenMap((prev) => ({ ...prev, [s.name]: !prev[s.name] })),
+          indicator: /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                width: 8,
+                height: 8,
+                borderRadius: "50%",
+                backgroundColor: s.color,
+                display: "inline-block"
+              }
+            }
+          ),
+          trailing: s.count,
+          children: s.name
+        },
+        s.name
+      )) })
+    ] })
+  ] });
+}
+export {
+  ExplorerSectionPreview
+};
+//# sourceMappingURL=explorer-section-preview.js.map

package/dist/ui/explorer-section/explorer-section-preview.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/explorer-section/explorer-section-preview.tsx"],"sourcesContent":["import { useState, type CSSProperties } from 'react';\n\nimport { cn } from '@/helpers';\nimport type { PreviewProps } from '@/previews/types';\nimport { ExplorerSection } from '@/ui';\nimport { Icon } from '@/ui';\n\ntype Styles = PreviewProps['styles'];\n\nconst SECTIONS: { name: string; count: number; color: string }[] = [\n  { name: 'Buttons', count: 5, color: 'var(--color-accent)' },\n  { name: 'Inputs', count: 7, color: 'var(--color-accent-light)' },\n  { name: 'Display', count: 12, color: 'var(--color-highlight-warm)' },\n];\n\n/**\n * Project every registry knob as a `--uxm-explorer-section-*` custom\n * property on the wrapper. Both the static showcase and the interactive\n * list below read from the same vars; the showcase forces a state via\n * the `--state-*` modifier class, while the interactive list exercises\n * the production `:hover` / `:focus-visible` / `:disabled` rules on\n * real input.\n */\nfunction buildVars(styles: Styles): CSSProperties {\n  return {\n    '--uxm-explorer-section-inactive-bg': styles.inactiveBg as string,\n    '--uxm-explorer-section-inactive-text': styles.inactiveText as string,\n    '--uxm-explorer-section-hover-bg': styles.hoverBg as string,\n    '--uxm-explorer-section-hover-text': styles.hoverText as string,\n    '--uxm-explorer-section-focus-text': styles.focusText as string,\n    '--uxm-explorer-section-focus-ring': styles.focusRing as string,\n    '--uxm-explorer-section-disabled-bg': styles.disabledBg as string,\n    '--uxm-explorer-section-disabled-text': styles.disabledText as string,\n    '--uxm-explorer-section-disabled-opacity':\n      styles.disabledOpacity != null ? String(styles.disabledOpacity) : undefined,\n    '--uxm-explorer-section-border-radius': `${styles.borderRadius}px`,\n    '--uxm-explorer-section-padding-x': `${styles.paddingX}px`,\n    '--uxm-explorer-section-padding-y': `${styles.paddingY}px`,\n    '--uxm-explorer-section-font-size': `${styles.fontSize}px`,\n    '--uxm-explorer-section-font-weight': styles.fontWeight as string,\n    '--uxm-explorer-section-gap': `${styles.gap}px`,\n    '--uxm-explorer-section-chevron-color': styles.chevronColor as string,\n    '--uxm-explorer-section-chevron-size': `${styles.chevronSize}px`,\n    '--uxm-explorer-section-trailing-color': styles.trailingColor as string,\n    '--uxm-explorer-section-trailing-size': `${styles.trailingSize}px`,\n  } as CSSProperties;\n}\n\n/**\n * Static showcase — ONE ExplorerSection hand-rendered with the\n * forced-state class matching the State dropdown. Inert\n * (`pointer-events: none` + `tabIndex={-1}`) so the forced state\n * isn't overridden by real input. Hand-rendered because the atom\n * doesn't expose a way to set the showcase-only `--state-*` modifier.\n */\nfunction StaticShowcase({ state, open }: { state: string; open: boolean }) {\n  const isDisabled = state === 'disabled';\n  return (\n    <button\n      type=\"button\"\n      tabIndex={-1}\n      disabled={isDisabled}\n      aria-expanded={open}\n      className={cn(\n        'uxm-explorer-section',\n        open && 'uxm-explorer-section--open',\n        state === 'hover' && 'uxm-explorer-section--state-hover',\n        state === 'focus' && 'uxm-explorer-section--state-focus',\n      )}\n      style={{ pointerEvents: 'none' }}\n    >\n      <Icon\n        glyph=\"chevron-down\"\n        size={12}\n        strokeWidth={2.5}\n        className=\"uxm-explorer-section__chevron\"\n        aria-hidden=\"true\"\n      />\n      <span className=\"uxm-explorer-section__indicator\" aria-hidden=\"true\">\n        <span\n          style={{\n            width: 8,\n            height: 8,\n            borderRadius: '50%',\n            backgroundColor: 'var(--color-accent)',\n            display: 'inline-block',\n          }}\n        />\n      </span>\n      <span className=\"uxm-explorer-section__label\">Buttons</span>\n      <span className=\"uxm-explorer-section__trailing\">5</span>\n    </button>\n  );\n}\n\nexport function ExplorerSectionPreview({ styles, variants }: PreviewProps) {\n  const state = (variants.state as string) ?? 'default';\n  const initialOpen = (variants.open as string) !== 'false';\n  const [openMap, setOpenMap] = useState<Record<string, boolean>>(() =>\n    Object.fromEntries(SECTIONS.map((s) => [s.name, initialOpen])),\n  );\n  const cssVars = buildVars(styles);\n\n  const sectionLabel = {\n    fontSize: 11,\n    color: 'var(--color-text-muted)',\n    marginBottom: 12,\n    letterSpacing: 0.5,\n    textTransform: 'uppercase' as const,\n  };\n\n  return (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: 32, minWidth: 280, ...cssVars } as CSSProperties}>\n      <div>\n        <div style={sectionLabel}>{state} state</div>\n        <StaticShowcase state={state} open={initialOpen} />\n      </div>\n\n      {/* Interactive instance — three real <ExplorerSection> atoms.\n          Real `:hover` / `:focus-visible` exercise the production CSS\n          via the projected vars above. Clicking a section toggles its\n          chevron + `aria-expanded`. The State dropdown carries through\n          to `disabled` (applied to the second section); the rest fire\n          on real input. */}\n      <div style={{ borderTop: '1px solid var(--color-border)', paddingTop: 16 }}>\n        <div style={sectionLabel}>Interactive</div>\n        <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>\n          {SECTIONS.map((s, i) => (\n            <ExplorerSection\n              key={s.name}\n              open={openMap[s.name]}\n              disabled={state === 'disabled' && i === 1}\n              onClick={() =>\n                setOpenMap((prev) => ({ ...prev, [s.name]: !prev[s.name] }))\n              }\n              indicator={\n                <span\n                  style={{\n                    width: 8,\n                    height: 8,\n                    borderRadius: '50%',\n                    backgroundColor: s.color,\n                    display: 'inline-block',\n                  }}\n                />\n              }\n              trailing={s.count}\n            >\n              {s.name}\n            </ExplorerSection>\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/ui/explorer-section/explorer-section.cjs

@@ -0,0 +1,87 @@
+"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 explorer_section_exports = {};
+__export(explorer_section_exports, {
+  ExplorerSection: () => ExplorerSection
+});
+module.exports = __toCommonJS(explorer_section_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_helpers = require("../../helpers/index.cjs");
+var import_icon = require("../icon/index.cjs");
+function ExplorerSection({
+  children,
+  open: controlledOpen,
+  defaultOpen = false,
+  onOpenChange,
+  indicator,
+  trailing,
+  className,
+  type = "button",
+  onClick,
+  id,
+  ...rest
+}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = (0, import_react.useState)(defaultOpen);
+  const isControlled = controlledOpen !== void 0;
+  const open = isControlled ? controlledOpen : uncontrolledOpen;
+  const generatedId = (0, import_react.useId)();
+  const panelId = `${id ?? generatedId}-panel`;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "button",
+    {
+      type,
+      id,
+      "aria-expanded": open,
+      "aria-controls": panelId,
+      className: (0, import_helpers.cn)(
+        "uxm-explorer-section",
+        open && "uxm-explorer-section--open",
+        className
+      ),
+      onClick: (e) => {
+        const next = !open;
+        if (!isControlled) setUncontrolledOpen(next);
+        onOpenChange?.(next);
+        onClick?.(e);
+      },
+      ...rest,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_icon.Icon,
+          {
+            glyph: "chevron-down",
+            size: 12,
+            strokeWidth: 2.5,
+            className: "uxm-explorer-section__chevron",
+            "aria-hidden": "true"
+          }
+        ),
+        indicator && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-explorer-section__indicator", "aria-hidden": "true", children: indicator }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-explorer-section__label", children }),
+        trailing && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-explorer-section__trailing", children: trailing })
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ExplorerSection
+});
+//# sourceMappingURL=explorer-section.cjs.map

package/dist/ui/explorer-section/explorer-section.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/explorer-section/explorer-section.tsx"],"sourcesContent":["import { useId, useState } from 'react';\n\nimport { cn } from '@/helpers';\n\nimport { Icon } from '../icon';\n\nimport type { ButtonHTMLAttributes, ReactNode } from 'react';\n\nexport interface ExplorerSectionProps\n  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {\n  /** Section heading text. */\n  children: ReactNode;\n  /**\n   * Whether the section is currently expanded — controls chevron rotation.\n   * Omit for uncontrolled usage (pair with `defaultOpen`); pass it (with\n   * `onOpenChange`) to fully control the open state, same as `Disclosure`.\n   */\n  open?: boolean;\n  /** Initial open state for uncontrolled usage. Ignored when `open` is passed. Default `false`. */\n  defaultOpen?: boolean;\n  /** Fires with the next open state on every click (controlled or uncontrolled), before the native `onClick`. */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * Optional leading indicator slot — typically a category color dot, but\n   * accepts any ReactNode (small icon, swatch, etc.).\n   */\n  indicator?: ReactNode;\n  /**\n   * Optional trailing content — typically a count or status, rendered\n   * right-aligned with muted styling.\n   */\n  trailing?: ReactNode;\n  /** Disabled sections render `disabled` natively on the button — CSS\n   *  `:disabled` paints the dimmed treatment and clicks are blocked. */\n  disabled?: boolean;\n}\n\n/**\n * Disclosure-style section header used to group rows in a navigation list\n * (e.g. component-explorer categories, file-tree folders). Renders a\n * chevron that rotates with `open`, an optional indicator slot, the\n * heading, and an optional trailing slot.\n *\n * Renders as a `<button>` since clicking toggles the section. Supports the\n * same controlled/uncontrolled `open`/`defaultOpen`/`onOpenChange` pair as\n * `Disclosure` — pass `open` (with `onOpenChange`) when the caller owns the\n * state (e.g. to persist it to localStorage), or omit `open` and let the\n * atom track it internally via `defaultOpen`. `onClick` still fires either\n * way for callers that only need the toggle notification.\n *\n * Theming flows through the `explorer-section` registry. The chevron\n * size/colour, label colour, hover bg, and trailing styling are all\n * separately editable.\n */\nexport function ExplorerSection({\n  children,\n  open: controlledOpen,\n  defaultOpen = false,\n  onOpenChange,\n  indicator,\n  trailing,\n  className,\n  type = 'button',\n  onClick,\n  id,\n  ...rest\n}: ExplorerSectionProps) {\n  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);\n  const isControlled = controlledOpen !== undefined;\n  const open = isControlled ? controlledOpen : uncontrolledOpen;\n\n  // ExplorerSection is header-only — the collapsible body (the grouped\n  // rows) lives outside this component, owned by the consumer. We can't\n  // set an id on an element we don't render, so we generate a stable\n  // `-panel` id (derived from a caller-supplied `id` when present,\n  // otherwise from `useId`) and expose it via `aria-controls` per\n  // WAI-ARIA's disclosure pattern (§F2). Give your rendered body the\n  // matching `id` to complete the wiring.\n  const generatedId = useId();\n  const panelId = `${id ?? generatedId}-panel`;\n\n  return (\n    <button\n      type={type}\n      id={id}\n      aria-expanded={open}\n      aria-controls={panelId}\n      className={cn(\n        'uxm-explorer-section',\n        open && 'uxm-explorer-section--open',\n        className,\n      )}\n      onClick={(e) => {\n        const next = !open;\n        if (!isControlled) setUncontrolledOpen(next);\n        onOpenChange?.(next);\n        onClick?.(e);\n      }}\n      {...rest}\n    >\n      <Icon\n        glyph=\"chevron-down\"\n        size={12}\n        strokeWidth={2.5}\n        className=\"uxm-explorer-section__chevron\"\n        aria-hidden=\"true\"\n      />\n      {indicator && (\n        <span className=\"uxm-explorer-section__indicator\" aria-hidden=\"true\">\n          {indicator}\n        </span>\n      )}\n      <span className=\"uxm-explorer-section__label\">{children}</span>\n      {trailing && (\n        <span className=\"uxm-explorer-section__trailing\">{trailing}</span>\n      )}\n    </button>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAkFI;AAlFJ,mBAAgC;AAEhC,qBAAmB;AAEnB,kBAAqB;AAkDd,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA,MAAM;AAAA,EACN,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAyB;AACvB,QAAM,CAAC,kBAAkB,mBAAmB,QAAI,uBAAS,WAAW;AACpE,QAAM,eAAe,mBAAmB;AACxC,QAAM,OAAO,eAAe,iBAAiB;AAS7C,QAAM,kBAAc,oBAAM;AAC1B,QAAM,UAAU,GAAG,MAAM,WAAW;AAEpC,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,eAAW;AAAA,QACT;AAAA,QACA,QAAQ;AAAA,QACR;AAAA,MACF;AAAA,MACA,SAAS,CAAC,MAAM;AACd,cAAM,OAAO,CAAC;AACd,YAAI,CAAC,aAAc,qBAAoB,IAAI;AAC3C,uBAAe,IAAI;AACnB,kBAAU,CAAC;AAAA,MACb;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,OAAM;AAAA,YACN,MAAM;AAAA,YACN,aAAa;AAAA,YACb,WAAU;AAAA,YACV,eAAY;AAAA;AAAA,QACd;AAAA,QACC,aACC,4CAAC,UAAK,WAAU,mCAAkC,eAAY,QAC3D,qBACH;AAAA,QAEF,4CAAC,UAAK,WAAU,+BAA+B,UAAS;AAAA,QACvD,YACC,4CAAC,UAAK,WAAU,kCAAkC,oBAAS;AAAA;AAAA;AAAA,EAE/D;AAEJ;","names":[]}

package/dist/ui/explorer-section/explorer-section.css

@@ -0,0 +1,70 @@
+@charset "UTF-8";
+/* ── explorer-section ── */
+/* ── ExplorerSection ──
+   Disclosure header for grouping rows in a navigation list. Chevron
+   rotates with `--open`; indicator slot is for category color dots
+   etc. Hover bg matches the row hover so the section header feels
+   continuous with the list. */
+.uxm-explorer-section {
+  align-items: center;
+  background-color: var(--uxm-explorer-section-inactive-bg, transparent);
+  border: none;
+  border-radius: var(--uxm-explorer-section-border-radius, 6px);
+  color: var(--uxm-explorer-section-inactive-text, var(--uxm-explorer-section-color, var(--color-text-muted)));
+  cursor: pointer;
+  display: flex;
+  gap: var(--uxm-explorer-section-gap, 8px);
+  padding-block: var(--uxm-explorer-section-padding-y, 4px);
+  padding-inline: var(--uxm-explorer-section-padding-x, 8px);
+  text-align: left;
+  transition: background-color 0.12s, color 0.12s;
+  width: 100%;
+}
+.uxm-explorer-section:hover {
+  background-color: var(--uxm-explorer-section-hover-bg, color-mix(in srgb, var(--color-surface) 40%, transparent));
+  color: var(--uxm-explorer-section-hover-text, var(--uxm-explorer-section-hover-color, var(--color-text-strong)));
+}
+.uxm-explorer-section:focus-visible {
+  color: var(--uxm-explorer-section-focus-text, var(--color-text-strong));
+  outline: 2px solid var(--uxm-explorer-section-focus-ring, var(--color-accent));
+  outline-offset: -2px;
+}
+.uxm-explorer-section:disabled, .uxm-explorer-section[aria-disabled=true] {
+  background-color: var(--uxm-explorer-section-disabled-bg, transparent);
+  color: var(--uxm-explorer-section-disabled-text, var(--color-text-subtle));
+  opacity: var(--uxm-explorer-section-disabled-opacity, 0.5);
+}
+.uxm-explorer-section__chevron {
+  color: var(--uxm-explorer-section-chevron-color, var(--color-text-muted));
+  flex-shrink: 0;
+  height: var(--uxm-explorer-section-chevron-size, 12px);
+  transform: rotate(-90deg);
+  transition: transform 0.15s ease;
+  width: var(--uxm-explorer-section-chevron-size, 12px);
+}
+.uxm-explorer-section--open .uxm-explorer-section__chevron {
+  transform: rotate(0deg);
+}
+.uxm-explorer-section__indicator {
+  align-items: center;
+  display: inline-flex;
+  flex-shrink: 0;
+  justify-content: center;
+}
+.uxm-explorer-section__label {
+  flex: 1;
+  font-size: calc(var(--uxm-explorer-section-font-size, 11px) * var(--type-scale, 1));
+  font-weight: var(--uxm-explorer-section-font-weight, 600);
+  letter-spacing: 0.06em;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+.uxm-explorer-section__trailing {
+  color: var(--uxm-explorer-section-trailing-color, var(--color-text-subtle));
+  flex-shrink: 0;
+  font-size: calc(var(--uxm-explorer-section-trailing-size, 10px) * var(--type-scale, 1));
+  font-variant-numeric: tabular-nums;
+}

package/dist/ui/explorer-section/explorer-section.d.ts

@@ -0,0 +1,47 @@
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+export interface ExplorerSectionProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+    /** Section heading text. */
+    children: ReactNode;
+    /**
+     * Whether the section is currently expanded — controls chevron rotation.
+     * Omit for uncontrolled usage (pair with `defaultOpen`); pass it (with
+     * `onOpenChange`) to fully control the open state, same as `Disclosure`.
+     */
+    open?: boolean;
+    /** Initial open state for uncontrolled usage. Ignored when `open` is passed. Default `false`. */
+    defaultOpen?: boolean;
+    /** Fires with the next open state on every click (controlled or uncontrolled), before the native `onClick`. */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Optional leading indicator slot — typically a category color dot, but
+     * accepts any ReactNode (small icon, swatch, etc.).
+     */
+    indicator?: ReactNode;
+    /**
+     * Optional trailing content — typically a count or status, rendered
+     * right-aligned with muted styling.
+     */
+    trailing?: ReactNode;
+    /** Disabled sections render `disabled` natively on the button — CSS
+     *  `:disabled` paints the dimmed treatment and clicks are blocked. */
+    disabled?: boolean;
+}
+/**
+ * Disclosure-style section header used to group rows in a navigation list
+ * (e.g. component-explorer categories, file-tree folders). Renders a
+ * chevron that rotates with `open`, an optional indicator slot, the
+ * heading, and an optional trailing slot.
+ *
+ * Renders as a `<button>` since clicking toggles the section. Supports the
+ * same controlled/uncontrolled `open`/`defaultOpen`/`onOpenChange` pair as
+ * `Disclosure` — pass `open` (with `onOpenChange`) when the caller owns the
+ * state (e.g. to persist it to localStorage), or omit `open` and let the
+ * atom track it internally via `defaultOpen`. `onClick` still fires either
+ * way for callers that only need the toggle notification.
+ *
+ * Theming flows through the `explorer-section` registry. The chevron
+ * size/colour, label colour, hover bg, and trailing styling are all
+ * separately editable.
+ */
+export declare function ExplorerSection({ children, open: controlledOpen, defaultOpen, onOpenChange, indicator, trailing, className, type, onClick, id, ...rest }: ExplorerSectionProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=explorer-section.d.ts.map

package/dist/ui/explorer-section/explorer-section.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"explorer-section.d.ts","sourceRoot":"","sources":["../../../src/ui/explorer-section/explorer-section.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE7D,MAAM,WAAW,oBACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC;IACjE,4BAA4B;IAC5B,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,iGAAiG;IACjG,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,+GAA+G;IAC/G,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;0EACsE;IACtE,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,IAAI,EAAE,cAAc,EACpB,WAAmB,EACnB,YAAY,EACZ,SAAS,EACT,QAAQ,EACR,SAAS,EACT,IAAe,EACf,OAAO,EACP,EAAE,EACF,GAAG,IAAI,EACR,EAAE,oBAAoB,2CAoDtB"}

package/dist/ui/explorer-section/explorer-section.js

@@ -0,0 +1,63 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId, useState } from "react";
+import { cn } from "../../helpers/index.js";
+import { Icon } from "../icon/index.js";
+function ExplorerSection({
+  children,
+  open: controlledOpen,
+  defaultOpen = false,
+  onOpenChange,
+  indicator,
+  trailing,
+  className,
+  type = "button",
+  onClick,
+  id,
+  ...rest
+}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+  const isControlled = controlledOpen !== void 0;
+  const open = isControlled ? controlledOpen : uncontrolledOpen;
+  const generatedId = useId();
+  const panelId = `${id ?? generatedId}-panel`;
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type,
+      id,
+      "aria-expanded": open,
+      "aria-controls": panelId,
+      className: cn(
+        "uxm-explorer-section",
+        open && "uxm-explorer-section--open",
+        className
+      ),
+      onClick: (e) => {
+        const next = !open;
+        if (!isControlled) setUncontrolledOpen(next);
+        onOpenChange?.(next);
+        onClick?.(e);
+      },
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(
+          Icon,
+          {
+            glyph: "chevron-down",
+            size: 12,
+            strokeWidth: 2.5,
+            className: "uxm-explorer-section__chevron",
+            "aria-hidden": "true"
+          }
+        ),
+        indicator && /* @__PURE__ */ jsx("span", { className: "uxm-explorer-section__indicator", "aria-hidden": "true", children: indicator }),
+        /* @__PURE__ */ jsx("span", { className: "uxm-explorer-section__label", children }),
+        trailing && /* @__PURE__ */ jsx("span", { className: "uxm-explorer-section__trailing", children: trailing })
+      ]
+    }
+  );
+}
+export {
+  ExplorerSection
+};
+//# sourceMappingURL=explorer-section.js.map

package/dist/ui/explorer-section/explorer-section.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/explorer-section/explorer-section.tsx"],"sourcesContent":["import { useId, useState } from 'react';\n\nimport { cn } from '@/helpers';\n\nimport { Icon } from '../icon';\n\nimport type { ButtonHTMLAttributes, ReactNode } from 'react';\n\nexport interface ExplorerSectionProps\n  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {\n  /** Section heading text. */\n  children: ReactNode;\n  /**\n   * Whether the section is currently expanded — controls chevron rotation.\n   * Omit for uncontrolled usage (pair with `defaultOpen`); pass it (with\n   * `onOpenChange`) to fully control the open state, same as `Disclosure`.\n   */\n  open?: boolean;\n  /** Initial open state for uncontrolled usage. Ignored when `open` is passed. Default `false`. */\n  defaultOpen?: boolean;\n  /** Fires with the next open state on every click (controlled or uncontrolled), before the native `onClick`. */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * Optional leading indicator slot — typically a category color dot, but\n   * accepts any ReactNode (small icon, swatch, etc.).\n   */\n  indicator?: ReactNode;\n  /**\n   * Optional trailing content — typically a count or status, rendered\n   * right-aligned with muted styling.\n   */\n  trailing?: ReactNode;\n  /** Disabled sections render `disabled` natively on the button — CSS\n   *  `:disabled` paints the dimmed treatment and clicks are blocked. */\n  disabled?: boolean;\n}\n\n/**\n * Disclosure-style section header used to group rows in a navigation list\n * (e.g. component-explorer categories, file-tree folders). Renders a\n * chevron that rotates with `open`, an optional indicator slot, the\n * heading, and an optional trailing slot.\n *\n * Renders as a `<button>` since clicking toggles the section. Supports the\n * same controlled/uncontrolled `open`/`defaultOpen`/`onOpenChange` pair as\n * `Disclosure` — pass `open` (with `onOpenChange`) when the caller owns the\n * state (e.g. to persist it to localStorage), or omit `open` and let the\n * atom track it internally via `defaultOpen`. `onClick` still fires either\n * way for callers that only need the toggle notification.\n *\n * Theming flows through the `explorer-section` registry. The chevron\n * size/colour, label colour, hover bg, and trailing styling are all\n * separately editable.\n */\nexport function ExplorerSection({\n  children,\n  open: controlledOpen,\n  defaultOpen = false,\n  onOpenChange,\n  indicator,\n  trailing,\n  className,\n  type = 'button',\n  onClick,\n  id,\n  ...rest\n}: ExplorerSectionProps) {\n  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);\n  const isControlled = controlledOpen !== undefined;\n  const open = isControlled ? controlledOpen : uncontrolledOpen;\n\n  // ExplorerSection is header-only — the collapsible body (the grouped\n  // rows) lives outside this component, owned by the consumer. We can't\n  // set an id on an element we don't render, so we generate a stable\n  // `-panel` id (derived from a caller-supplied `id` when present,\n  // otherwise from `useId`) and expose it via `aria-controls` per\n  // WAI-ARIA's disclosure pattern (§F2). Give your rendered body the\n  // matching `id` to complete the wiring.\n  const generatedId = useId();\n  const panelId = `${id ?? generatedId}-panel`;\n\n  return (\n    <button\n      type={type}\n      id={id}\n      aria-expanded={open}\n      aria-controls={panelId}\n      className={cn(\n        'uxm-explorer-section',\n        open && 'uxm-explorer-section--open',\n        className,\n      )}\n      onClick={(e) => {\n        const next = !open;\n        if (!isControlled) setUncontrolledOpen(next);\n        onOpenChange?.(next);\n        onClick?.(e);\n      }}\n      {...rest}\n    >\n      <Icon\n        glyph=\"chevron-down\"\n        size={12}\n        strokeWidth={2.5}\n        className=\"uxm-explorer-section__chevron\"\n        aria-hidden=\"true\"\n      />\n      {indicator && (\n        <span className=\"uxm-explorer-section__indicator\" aria-hidden=\"true\">\n          {indicator}\n        </span>\n      )}\n      <span className=\"uxm-explorer-section__label\">{children}</span>\n      {trailing && (\n        <span className=\"uxm-explorer-section__trailing\">{trailing}</span>\n      )}\n    </button>\n  );\n}\n"],"mappings":"AAkFI,SAkBE,KAlBF;AAlFJ,SAAS,OAAO,gBAAgB;AAEhC,SAAS,UAAU;AAEnB,SAAS,YAAY;AAkDd,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA,MAAM;AAAA,EACN,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAyB;AACvB,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAS,WAAW;AACpE,QAAM,eAAe,mBAAmB;AACxC,QAAM,OAAO,eAAe,iBAAiB;AAS7C,QAAM,cAAc,MAAM;AAC1B,QAAM,UAAU,GAAG,MAAM,WAAW;AAEpC,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,WAAW;AAAA,QACT;AAAA,QACA,QAAQ;AAAA,QACR;AAAA,MACF;AAAA,MACA,SAAS,CAAC,MAAM;AACd,cAAM,OAAO,CAAC;AACd,YAAI,CAAC,aAAc,qBAAoB,IAAI;AAC3C,uBAAe,IAAI;AACnB,kBAAU,CAAC;AAAA,MACb;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,OAAM;AAAA,YACN,MAAM;AAAA,YACN,aAAa;AAAA,YACb,WAAU;AAAA,YACV,eAAY;AAAA;AAAA,QACd;AAAA,QACC,aACC,oBAAC,UAAK,WAAU,mCAAkC,eAAY,QAC3D,qBACH;AAAA,QAEF,oBAAC,UAAK,WAAU,+BAA+B,UAAS;AAAA,QACvD,YACC,oBAAC,UAAK,WAAU,kCAAkC,oBAAS;AAAA;AAAA;AAAA,EAE/D;AAEJ;","names":[]}

package/dist/ui/explorer-section/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 explorer_section_exports = {};
+module.exports = __toCommonJS(explorer_section_exports);
+__reExport(explorer_section_exports, require("./explorer-section.cjs"), module.exports);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ...require("./explorer-section.cjs")
+});
+//# sourceMappingURL=index.cjs.map

package/dist/ui/explorer-section/index.cjs.map

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

package/dist/ui/explorer-section/index.d.ts

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

package/dist/ui/explorer-section/index.d.ts.map

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

package/dist/ui/explorer-section/index.js

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

package/dist/ui/explorer-section/index.js.map

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

package/dist/ui/field-error/field-error.cjs

@@ -0,0 +1,36 @@
+"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 field_error_exports = {};
+__export(field_error_exports, {
+  FieldError: () => FieldError
+});
+module.exports = __toCommonJS(field_error_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_icon = require("../icon/index.cjs");
+function FieldError({ className, id, children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className, id, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.Icon, { glyph: "exclamation-circle", "aria-hidden": "true", className: "uxm-field-error__icon" }),
+    children
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FieldError
+});
+//# sourceMappingURL=field-error.cjs.map

package/dist/ui/field-error/field-error.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/field-error/field-error.tsx"],"sourcesContent":["import { Icon } from '../icon';\n\nimport type { ReactNode } from 'react';\n\nexport interface FieldErrorProps {\n  /**\n   * The atom's OWN per-atom message class — `uxm-{atom}__error-message`.\n   * This stays per-atom on purpose: it carries the themable\n   * `--uxm-{atom}-error-color` / `-error-message-size` vars and preserves\n   * the editor's \"Match in N other Inputs\" sync. This helper does NOT\n   * introduce a shared `.uxm-field-error` class — it only DRYs the\n   * icon + text structure so every atom's error message is identical to\n   * the others (and to Banner / Toast).\n   */\n  className: string;\n  /**\n   * Stable id so the owning control can point at this message via\n   * `aria-describedby` — `aria-invalid` alone says the field is wrong,\n   * not why.\n   */\n  id?: string;\n  children: ReactNode;\n}\n\n/**\n * Shared error-message renderer for the whole input family. Leads with an\n * `exclamation-circle` icon — the same glyph Banner and Toast use for their\n * error variant — so the error reads as an error even without color\n * (colorblind users) and gives a consistent, stronger signal across every\n * field.\n *\n * The icon is sized in `em` and colored via `currentColor`, so it inherits\n * the per-atom message's `font-size` (the `errorMessageSize` knob) and\n * `color` (the `errorColor` knob) automatically — no extra CSS, no shared\n * class. It's `aria-hidden` because the message text already conveys the\n * error to assistive tech (and `aria-invalid` lives on the control).\n */\nexport function FieldError({ className, id, children }: FieldErrorProps) {\n  return (\n    <span className={className} id={id}>\n      <Icon glyph=\"exclamation-circle\" aria-hidden=\"true\" className=\"uxm-field-error__icon\" />\n      {children}\n    </span>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAuCI;AAvCJ,kBAAqB;AAqCd,SAAS,WAAW,EAAE,WAAW,IAAI,SAAS,GAAoB;AACvE,SACE,6CAAC,UAAK,WAAsB,IAC1B;AAAA,gDAAC,oBAAK,OAAM,sBAAqB,eAAY,QAAO,WAAU,yBAAwB;AAAA,IACrF;AAAA,KACH;AAEJ;","names":[]}

package/dist/ui/field-error/field-error.css

@@ -0,0 +1,6 @@
+.uxm-field-error__icon {
+  width: 1em;
+  height: 1em;
+  margin-inline-end: 0.4em;
+  vertical-align: -0.15em;
+}

package/dist/ui/field-error/field-error.d.ts

@@ -0,0 +1,35 @@
+import type { ReactNode } from 'react';
+export interface FieldErrorProps {
+    /**
+     * The atom's OWN per-atom message class — `uxm-{atom}__error-message`.
+     * This stays per-atom on purpose: it carries the themable
+     * `--uxm-{atom}-error-color` / `-error-message-size` vars and preserves
+     * the editor's "Match in N other Inputs" sync. This helper does NOT
+     * introduce a shared `.uxm-field-error` class — it only DRYs the
+     * icon + text structure so every atom's error message is identical to
+     * the others (and to Banner / Toast).
+     */
+    className: string;
+    /**
+     * Stable id so the owning control can point at this message via
+     * `aria-describedby` — `aria-invalid` alone says the field is wrong,
+     * not why.
+     */
+    id?: string;
+    children: ReactNode;
+}
+/**
+ * Shared error-message renderer for the whole input family. Leads with an
+ * `exclamation-circle` icon — the same glyph Banner and Toast use for their
+ * error variant — so the error reads as an error even without color
+ * (colorblind users) and gives a consistent, stronger signal across every
+ * field.
+ *
+ * The icon is sized in `em` and colored via `currentColor`, so it inherits
+ * the per-atom message's `font-size` (the `errorMessageSize` knob) and
+ * `color` (the `errorColor` knob) automatically — no extra CSS, no shared
+ * class. It's `aria-hidden` because the message text already conveys the
+ * error to assistive tech (and `aria-invalid` lives on the control).
+ */
+export declare function FieldError({ className, id, children }: FieldErrorProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=field-error.d.ts.map

package/dist/ui/field-error/field-error.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-error.d.ts","sourceRoot":"","sources":["../../../src/ui/field-error/field-error.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,eAAe;IAC9B;;;;;;;;OAQG;IACH,SAAS,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,UAAU,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,eAAe,2CAOtE"}

package/dist/ui/field-error/field-error.js

@@ -0,0 +1,12 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Icon } from "../icon/index.js";
+function FieldError({ className, id, children }) {
+  return /* @__PURE__ */ jsxs("span", { className, id, children: [
+    /* @__PURE__ */ jsx(Icon, { glyph: "exclamation-circle", "aria-hidden": "true", className: "uxm-field-error__icon" }),
+    children
+  ] });
+}
+export {
+  FieldError
+};
+//# sourceMappingURL=field-error.js.map

package/dist/ui/field-error/field-error.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/field-error/field-error.tsx"],"sourcesContent":["import { Icon } from '../icon';\n\nimport type { ReactNode } from 'react';\n\nexport interface FieldErrorProps {\n  /**\n   * The atom's OWN per-atom message class — `uxm-{atom}__error-message`.\n   * This stays per-atom on purpose: it carries the themable\n   * `--uxm-{atom}-error-color` / `-error-message-size` vars and preserves\n   * the editor's \"Match in N other Inputs\" sync. This helper does NOT\n   * introduce a shared `.uxm-field-error` class — it only DRYs the\n   * icon + text structure so every atom's error message is identical to\n   * the others (and to Banner / Toast).\n   */\n  className: string;\n  /**\n   * Stable id so the owning control can point at this message via\n   * `aria-describedby` — `aria-invalid` alone says the field is wrong,\n   * not why.\n   */\n  id?: string;\n  children: ReactNode;\n}\n\n/**\n * Shared error-message renderer for the whole input family. Leads with an\n * `exclamation-circle` icon — the same glyph Banner and Toast use for their\n * error variant — so the error reads as an error even without color\n * (colorblind users) and gives a consistent, stronger signal across every\n * field.\n *\n * The icon is sized in `em` and colored via `currentColor`, so it inherits\n * the per-atom message's `font-size` (the `errorMessageSize` knob) and\n * `color` (the `errorColor` knob) automatically — no extra CSS, no shared\n * class. It's `aria-hidden` because the message text already conveys the\n * error to assistive tech (and `aria-invalid` lives on the control).\n */\nexport function FieldError({ className, id, children }: FieldErrorProps) {\n  return (\n    <span className={className} id={id}>\n      <Icon glyph=\"exclamation-circle\" aria-hidden=\"true\" className=\"uxm-field-error__icon\" />\n      {children}\n    </span>\n  );\n}\n"],"mappings":"AAuCI,SACE,KADF;AAvCJ,SAAS,YAAY;AAqCd,SAAS,WAAW,EAAE,WAAW,IAAI,SAAS,GAAoB;AACvE,SACE,qBAAC,UAAK,WAAsB,IAC1B;AAAA,wBAAC,QAAK,OAAM,sBAAqB,eAAY,QAAO,WAAU,yBAAwB;AAAA,IACrF;AAAA,KACH;AAEJ;","names":[]}

package/dist/ui/field-error/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 field_error_exports = {};
+module.exports = __toCommonJS(field_error_exports);
+__reExport(field_error_exports, require("./field-error.cjs"), module.exports);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ...require("./field-error.cjs")
+});
+//# sourceMappingURL=index.cjs.map

package/dist/ui/field-error/index.cjs.map

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