@viax.io/uxm 4.36.0

package/dist/ui/banner/banner.js

@@ -0,0 +1,49 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../helpers/index.js";
+import { Icon } from "../icon/index.js";
+const VARIANT_GLYPH = {
+  success: "check-circle",
+  info: "info",
+  warning: "exclamation-triangle",
+  error: "exclamation-circle"
+};
+function Banner({
+  variant = "info",
+  title,
+  icon,
+  children,
+  onDismiss,
+  dismissLabel = "Dismiss",
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: variant === "error" ? "alert" : "status",
+      className: cn("uxm-banner", `uxm-banner--${variant}`, className),
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "uxm-banner__icon", "aria-hidden": "true", children: icon ?? /* @__PURE__ */ jsx(Icon, { glyph: VARIANT_GLYPH[variant], size: 20, strokeWidth: 1.5 }) }),
+        /* @__PURE__ */ jsxs("div", { className: "uxm-banner__body", children: [
+          title && /* @__PURE__ */ jsx("p", { className: "uxm-banner__title", children: title }),
+          children && /* @__PURE__ */ jsx("div", { className: "uxm-banner__content", children })
+        ] }),
+        onDismiss && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "uxm-banner__close",
+            "aria-label": dismissLabel,
+            onClick: onDismiss,
+            children: /* @__PURE__ */ jsx(Icon, { glyph: "close", size: 14, strokeWidth: 2 })
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  Banner
+};
+//# sourceMappingURL=banner.js.map

package/dist/ui/banner/banner.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/banner/banner.tsx"],"sourcesContent":["import { cn } from '@/helpers';\n\nimport { Icon } from '../icon';\n\nimport type { HTMLAttributes, ReactNode } from 'react';\n\nexport type BannerVariant = 'success' | 'info' | 'warning' | 'error';\n\nexport interface BannerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n  variant?: BannerVariant;\n  title?: ReactNode;\n  icon?: ReactNode;\n  children?: ReactNode;\n  /**\n   * When set, renders a close affordance (X icon, right-aligned) that\n   * calls this handler. Banners are persistent by design — they stay\n   * until the user dismisses, or until the consumer removes them from\n   * state. They do NOT auto-disappear; for transient feedback use\n   * `toast.*()` instead (`Toast` rendered by `Toaster`).\n   */\n  onDismiss?: () => void;\n  /** Accessible label for the close affordance. Default `\"Dismiss\"`. */\n  dismissLabel?: string;\n}\n\n// Map each banner variant to its glyph in the Icon registry. Callers\n// that want a custom icon can still pass `icon={...}` to override.\nconst VARIANT_GLYPH: Record<BannerVariant, string> = {\n  success: 'check-circle',\n  info: 'info',\n  warning: 'exclamation-triangle',\n  error: 'exclamation-circle',\n};\n\n/**\n * Banner — a full-width persistent strip rendered inline in page flow.\n * Stays visible until the user acts (via `onDismiss`) or the consumer\n * removes it from state. Doesn't block the rest of the page.\n *\n * Use for system states / announcements: \"Maintenance at 02:00\",\n * \"Subscription expiring\", \"Q1 forecast beat target\". For transient\n * after-the-fact feedback (\"Saved\", \"Copied\") use the Toast atom via\n * the `toast.*()` API instead — Banner stays persistent, Toast\n * auto-dismisses in a corner.\n */\nexport function Banner({\n  variant = 'info',\n  title,\n  icon,\n  children,\n  onDismiss,\n  dismissLabel = 'Dismiss',\n  className,\n  ...rest\n}: BannerProps) {\n  return (\n    <div\n      role={variant === 'error' ? 'alert' : 'status'}\n      className={cn('uxm-banner', `uxm-banner--${variant}`, className)}\n      {...rest}\n    >\n      <span className=\"uxm-banner__icon\" aria-hidden=\"true\">\n        {icon ?? <Icon glyph={VARIANT_GLYPH[variant]} size={20} strokeWidth={1.5} />}\n      </span>\n      <div className=\"uxm-banner__body\">\n        {title && <p className=\"uxm-banner__title\">{title}</p>}\n        {children && <div className=\"uxm-banner__content\">{children}</div>}\n      </div>\n      {onDismiss && (\n        <button\n          type=\"button\"\n          className=\"uxm-banner__close\"\n          aria-label={dismissLabel}\n          onClick={onDismiss}\n        >\n          <Icon glyph=\"close\" size={14} strokeWidth={2} />\n        </button>\n      )}\n    </div>\n  );\n}\n"],"mappings":"AA8DiB,cAEX,YAFW;AA9DjB,SAAS,UAAU;AAEnB,SAAS,YAAY;AAyBrB,MAAM,gBAA+C;AAAA,EACnD,SAAS;AAAA,EACT,MAAM;AAAA,EACN,SAAS;AAAA,EACT,OAAO;AACT;AAaO,SAAS,OAAO;AAAA,EACrB,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA,GAAG;AACL,GAAgB;AACd,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,YAAY,UAAU,UAAU;AAAA,MACtC,WAAW,GAAG,cAAc,eAAe,OAAO,IAAI,SAAS;AAAA,MAC9D,GAAG;AAAA,MAEJ;AAAA,4BAAC,UAAK,WAAU,oBAAmB,eAAY,QAC5C,kBAAQ,oBAAC,QAAK,OAAO,cAAc,OAAO,GAAG,MAAM,IAAI,aAAa,KAAK,GAC5E;AAAA,QACA,qBAAC,SAAI,WAAU,oBACZ;AAAA,mBAAS,oBAAC,OAAE,WAAU,qBAAqB,iBAAM;AAAA,UACjD,YAAY,oBAAC,SAAI,WAAU,uBAAuB,UAAS;AAAA,WAC9D;AAAA,QACC,aACC;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,WAAU;AAAA,YACV,cAAY;AAAA,YACZ,SAAS;AAAA,YAET,8BAAC,QAAK,OAAM,SAAQ,MAAM,IAAI,aAAa,GAAG;AAAA;AAAA,QAChD;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

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

package/dist/ui/banner/index.cjs.map

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

package/dist/ui/banner/index.d.ts

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

package/dist/ui/banner/index.d.ts.map

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

package/dist/ui/banner/index.js

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

package/dist/ui/banner/index.js.map

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

package/dist/ui/breadcrumb/breadcrumb-preview.cjs

@@ -0,0 +1,152 @@
+"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 breadcrumb_preview_exports = {};
+__export(breadcrumb_preview_exports, {
+  BreadcrumbPreview: () => BreadcrumbPreview
+});
+module.exports = __toCommonJS(breadcrumb_preview_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_helpers = require("../../helpers/index.cjs");
+var import_ui = require("../../ui/index.cjs");
+var import_ui2 = require("../../ui/index.cjs");
+var import_ui3 = require("../../ui/index.cjs");
+const ITEMS = [
+  { label: "Home", href: "#home" },
+  { label: "Products", href: "#products" },
+  { label: "Smartphones", href: "#smartphones" },
+  { label: "iPhone 15", href: "#iphone-15" }
+];
+function buildVars(styles) {
+  return {
+    "--uxm-breadcrumb-inactive-text": styles.inactiveText,
+    "--uxm-breadcrumb-hover-text": styles.hoverText,
+    "--uxm-breadcrumb-focus-text": styles.focusText,
+    "--uxm-breadcrumb-focus-ring": styles.focusRing,
+    "--uxm-breadcrumb-active-text": styles.activeText,
+    "--uxm-breadcrumb-active-font-weight": styles.activeFontWeight,
+    "--uxm-breadcrumb-disabled-text": styles.disabledText,
+    "--uxm-breadcrumb-disabled-opacity": styles.disabledOpacity != null ? String(styles.disabledOpacity) : void 0,
+    "--uxm-breadcrumb-link-weight": styles.linkWeight,
+    "--uxm-breadcrumb-separator-color": styles.separatorColor,
+    "--uxm-breadcrumb-separator-size": `${styles.separatorSize}px`,
+    "--uxm-breadcrumb-font-size": `${styles.fontSize}px`,
+    "--uxm-breadcrumb-gap": `${styles.gap}px`,
+    "--uxm-breadcrumb-underline-offset": `${styles.underlineOffset}px`,
+    "--uxm-breadcrumb-underline-thickness": `${styles.underlineThickness}px`
+  };
+}
+function StaticShowcase({ state }) {
+  const stateClass = ["hover", "focus", "active"].includes(state) ? `uxm-link--state-${state}` : null;
+  const showAriaDisabled = state === "disabled";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "nav",
+    {
+      "aria-label": "Breadcrumb",
+      className: "uxm-breadcrumb",
+      style: { pointerEvents: "none" },
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "a",
+        {
+          href: "#preview",
+          onClick: (e) => e.preventDefault(),
+          tabIndex: -1,
+          className: (0, import_helpers.cn)(
+            "uxm-link",
+            "uxm-link--underline-hover",
+            "uxm-breadcrumb__link",
+            stateClass
+          ),
+          ...showAriaDisabled ? { "aria-disabled": true } : {},
+          children: "Smartphones"
+        }
+      )
+    }
+  );
+}
+const SECTION_LABEL = {
+  fontSize: 11,
+  color: "var(--color-text-muted)",
+  marginBottom: 12,
+  letterSpacing: 0.5,
+  textTransform: "uppercase"
+};
+function BreadcrumbPreview({ styles, variants }) {
+  const state = variants.state ?? "default";
+  const separator = variants.separator ?? "chevron";
+  const cssVars = buildVars(styles);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 32, minWidth: 320, ...cssVars }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: SECTION_LABEL, children: [
+        state,
+        " state"
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StaticShowcase, { state })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InteractiveBreadcrumb, { state, separator }, state)
+  ] });
+}
+function InteractiveBreadcrumb({
+  state,
+  separator
+}) {
+  const [currentIndex, setCurrentIndex] = (0, import_react.useState)(ITEMS.length - 1);
+  const interactiveItems = ITEMS.slice(0, currentIndex + 1).map((item, i) => {
+    const isCurrent = i === currentIndex;
+    return {
+      label: item.label,
+      href: isCurrent ? void 0 : item.href,
+      disabled: state === "disabled" && i === currentIndex - 1
+    };
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { borderTop: "1px solid var(--color-border)", paddingTop: 16 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", width: "100%", alignItems: "center", justifyContent: "space-between", gap: 16, marginBottom: 12 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { ...SECTION_LABEL, marginBottom: 0 }, children: "Interactive" }),
+      currentIndex < ITEMS.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_ui3.InlineAction,
+        {
+          onClick: () => setCurrentIndex(ITEMS.length - 1),
+          icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui2.Icon, { glyph: "refresh", strokeWidth: 2.25, "aria-hidden": true }),
+          title: "Restore the full breadcrumb path",
+          children: "Reset path"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_ui.Breadcrumb,
+      {
+        separator,
+        items: interactiveItems,
+        onClick: (e) => {
+          e.preventDefault();
+          const anchor = e.target.closest("a.uxm-link");
+          if (!anchor || anchor.getAttribute("aria-disabled") === "true") return;
+          const all = Array.from(e.currentTarget.querySelectorAll("a.uxm-link"));
+          const idx = all.indexOf(anchor);
+          if (idx >= 0) setCurrentIndex(idx);
+        }
+      }
+    )
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BreadcrumbPreview
+});
+//# sourceMappingURL=breadcrumb-preview.cjs.map

package/dist/ui/breadcrumb/breadcrumb-preview.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/breadcrumb/breadcrumb-preview.tsx"],"sourcesContent":["import { useState, type CSSProperties } from 'react';\n\nimport { cn } from '@/helpers';\nimport type { PreviewProps } from '@/previews/types';\nimport { Breadcrumb, type BreadcrumbSeparator } from '@/ui';\nimport { Icon } from '@/ui';\nimport { InlineAction } from '@/ui';\n\ntype Styles = PreviewProps['styles'];\n\nconst ITEMS = [\n  { label: 'Home', href: '#home' },\n  { label: 'Products', href: '#products' },\n  { label: 'Smartphones', href: '#smartphones' },\n  { label: 'iPhone 15', href: '#iphone-15' },\n];\n\n/**\n * Project every registry knob as a `--uxm-breadcrumb-*` custom property\n * on the wrapper. The showcase isolates a single link crumb in the\n * displayed state (no separators, no neighbouring crumbs) so the state\n * treatment reads cleanly. The interactive instance below renders the\n * full Breadcrumb atom; clicking any link crumb truncates the path so\n * that crumb becomes the new current — exercising the active-state\n * styling against the projected vars.\n */\nfunction buildVars(styles: Styles): CSSProperties {\n  return {\n    '--uxm-breadcrumb-inactive-text': styles.inactiveText as string,\n    '--uxm-breadcrumb-hover-text': styles.hoverText as string,\n    '--uxm-breadcrumb-focus-text': styles.focusText as string,\n    '--uxm-breadcrumb-focus-ring': styles.focusRing as string,\n    '--uxm-breadcrumb-active-text': styles.activeText as string,\n    '--uxm-breadcrumb-active-font-weight': styles.activeFontWeight as string,\n    '--uxm-breadcrumb-disabled-text': styles.disabledText as string,\n    '--uxm-breadcrumb-disabled-opacity':\n      styles.disabledOpacity != null ? String(styles.disabledOpacity) : undefined,\n    '--uxm-breadcrumb-link-weight': styles.linkWeight as string,\n    '--uxm-breadcrumb-separator-color': styles.separatorColor as string,\n    '--uxm-breadcrumb-separator-size': `${styles.separatorSize}px`,\n    '--uxm-breadcrumb-font-size': `${styles.fontSize}px`,\n    '--uxm-breadcrumb-gap': `${styles.gap}px`,\n    '--uxm-breadcrumb-underline-offset': `${styles.underlineOffset}px`,\n    '--uxm-breadcrumb-underline-thickness': `${styles.underlineThickness}px`,\n  } as CSSProperties;\n}\n\n/**\n * Static showcase — a single link crumb in the displayed state, wrapped\n * in a `.uxm-breadcrumb` scope so the breadcrumb-scoped CSS rules apply.\n * Inert: `pointer-events: none` blocks `:hover` from firing on mouse-\n * over and `tabIndex={-1}` keeps the anchor out of the focus order so\n * `:focus-visible` can't fire from real keyboard input. The interactive\n * instance below uses the real atom — so production CSS exercises on\n * real interaction.\n */\nfunction StaticShowcase({ state }: { state: string }) {\n  const stateClass = ['hover', 'focus', 'active'].includes(state)\n    ? `uxm-link--state-${state}`\n    : null;\n  const showAriaDisabled = state === 'disabled';\n\n  return (\n    <nav\n      aria-label=\"Breadcrumb\"\n      className=\"uxm-breadcrumb\"\n      style={{ pointerEvents: 'none' }}\n    >\n      <a\n        href=\"#preview\"\n        onClick={(e) => e.preventDefault()}\n        tabIndex={-1}\n        className={cn(\n          'uxm-link',\n          'uxm-link--underline-hover',\n          'uxm-breadcrumb__link',\n          stateClass,\n        )}\n        {...(showAriaDisabled ? { 'aria-disabled': true } : {})}\n      >\n        Smartphones\n      </a>\n    </nav>\n  );\n}\n\nconst SECTION_LABEL: CSSProperties = {\n  fontSize: 11,\n  color: 'var(--color-text-muted)',\n  marginBottom: 12,\n  letterSpacing: 0.5,\n  textTransform: 'uppercase',\n};\n\nexport function BreadcrumbPreview({ styles, variants }: PreviewProps) {\n  const state = (variants.state as string) ?? 'default';\n  const separator = (variants.separator ?? 'chevron') as BreadcrumbSeparator;\n  const cssVars = buildVars(styles);\n\n  return (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: 32, minWidth: 320, ...cssVars } as CSSProperties}>\n      <div>\n        <div style={SECTION_LABEL}>{state} state</div>\n        <StaticShowcase state={state} />\n      </div>\n\n      {/* Interactive instance — keyed by state so changing the State knob\n          remounts and restores the full path. Real `:hover` /\n          `:focus-visible` exercise the production CSS via the projected\n          vars above; the State dropdown only carries through to\n          `disabled` here (applied to the crumb before current). */}\n      <InteractiveBreadcrumb key={state} state={state} separator={separator} />\n    </div>\n  );\n}\n\nfunction InteractiveBreadcrumb({\n  state,\n  separator,\n}: {\n  state: string;\n  separator: BreadcrumbSeparator;\n}) {\n  // Track which crumb is the \"active\" (current) one. Clicking a link crumb\n  // truncates the path so that crumb becomes the new current — links lose\n  // their href on the truncated tail. Parent's `key={state}` resets this\n  // to `ITEMS.length - 1` on every State change.\n  const [currentIndex, setCurrentIndex] = useState(ITEMS.length - 1);\n\n  // Build the interactive item list. Items past the current crumb are\n  // dropped (truncating the path so the clicked crumb becomes the new\n  // tail). When State=disabled, the crumb before current is rendered\n  // disabled to demo the styling alongside enabled crumbs.\n  const interactiveItems = ITEMS.slice(0, currentIndex + 1).map((item, i) => {\n    const isCurrent = i === currentIndex;\n    return {\n      label: item.label,\n      href: isCurrent ? undefined : item.href,\n      disabled: state === 'disabled' && i === currentIndex - 1,\n    };\n  });\n\n  return (\n    <div style={{ borderTop: '1px solid var(--color-border)', paddingTop: 16 }}>\n      <div style={{ display: 'flex', width: '100%', alignItems: 'center', justifyContent: 'space-between', gap: 16, marginBottom: 12 }}>\n        <div style={{ ...SECTION_LABEL, marginBottom: 0 }}>Interactive</div>\n        {currentIndex < ITEMS.length - 1 && (\n          <InlineAction\n            onClick={() => setCurrentIndex(ITEMS.length - 1)}\n            icon={<Icon glyph=\"refresh\" strokeWidth={2.25} aria-hidden />}\n            title=\"Restore the full breadcrumb path\"\n          >\n            Reset path\n          </InlineAction>\n        )}\n      </div>\n      <Breadcrumb\n        separator={separator}\n        items={interactiveItems}\n        onClick={(e) => {\n          e.preventDefault();\n          const anchor = (e.target as HTMLElement).closest('a.uxm-link');\n          if (!anchor || anchor.getAttribute('aria-disabled') === 'true') return;\n          const all = Array.from(e.currentTarget.querySelectorAll('a.uxm-link'));\n          const idx = all.indexOf(anchor as HTMLAnchorElement);\n          if (idx >= 0) setCurrentIndex(idx);\n        }}\n      />\n    </div>\n  );\n}\n"],"mappings":"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","names":["import_ui"]}

package/dist/ui/breadcrumb/breadcrumb-preview.d.ts

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

package/dist/ui/breadcrumb/breadcrumb-preview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb-preview.d.ts","sourceRoot":"","sources":["../../../src/ui/breadcrumb/breadcrumb-preview.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AA2FrD,wBAAgB,iBAAiB,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,YAAY,2CAoBnE"}

package/dist/ui/breadcrumb/breadcrumb-preview.js

@@ -0,0 +1,128 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { cn } from "../../helpers/index.js";
+import { Breadcrumb } from "../../ui/index.js";
+import { Icon } from "../../ui/index.js";
+import { InlineAction } from "../../ui/index.js";
+const ITEMS = [
+  { label: "Home", href: "#home" },
+  { label: "Products", href: "#products" },
+  { label: "Smartphones", href: "#smartphones" },
+  { label: "iPhone 15", href: "#iphone-15" }
+];
+function buildVars(styles) {
+  return {
+    "--uxm-breadcrumb-inactive-text": styles.inactiveText,
+    "--uxm-breadcrumb-hover-text": styles.hoverText,
+    "--uxm-breadcrumb-focus-text": styles.focusText,
+    "--uxm-breadcrumb-focus-ring": styles.focusRing,
+    "--uxm-breadcrumb-active-text": styles.activeText,
+    "--uxm-breadcrumb-active-font-weight": styles.activeFontWeight,
+    "--uxm-breadcrumb-disabled-text": styles.disabledText,
+    "--uxm-breadcrumb-disabled-opacity": styles.disabledOpacity != null ? String(styles.disabledOpacity) : void 0,
+    "--uxm-breadcrumb-link-weight": styles.linkWeight,
+    "--uxm-breadcrumb-separator-color": styles.separatorColor,
+    "--uxm-breadcrumb-separator-size": `${styles.separatorSize}px`,
+    "--uxm-breadcrumb-font-size": `${styles.fontSize}px`,
+    "--uxm-breadcrumb-gap": `${styles.gap}px`,
+    "--uxm-breadcrumb-underline-offset": `${styles.underlineOffset}px`,
+    "--uxm-breadcrumb-underline-thickness": `${styles.underlineThickness}px`
+  };
+}
+function StaticShowcase({ state }) {
+  const stateClass = ["hover", "focus", "active"].includes(state) ? `uxm-link--state-${state}` : null;
+  const showAriaDisabled = state === "disabled";
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      "aria-label": "Breadcrumb",
+      className: "uxm-breadcrumb",
+      style: { pointerEvents: "none" },
+      children: /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: "#preview",
+          onClick: (e) => e.preventDefault(),
+          tabIndex: -1,
+          className: cn(
+            "uxm-link",
+            "uxm-link--underline-hover",
+            "uxm-breadcrumb__link",
+            stateClass
+          ),
+          ...showAriaDisabled ? { "aria-disabled": true } : {},
+          children: "Smartphones"
+        }
+      )
+    }
+  );
+}
+const SECTION_LABEL = {
+  fontSize: 11,
+  color: "var(--color-text-muted)",
+  marginBottom: 12,
+  letterSpacing: 0.5,
+  textTransform: "uppercase"
+};
+function BreadcrumbPreview({ styles, variants }) {
+  const state = variants.state ?? "default";
+  const separator = variants.separator ?? "chevron";
+  const cssVars = buildVars(styles);
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 32, minWidth: 320, ...cssVars }, children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsxs("div", { style: SECTION_LABEL, children: [
+        state,
+        " state"
+      ] }),
+      /* @__PURE__ */ jsx(StaticShowcase, { state })
+    ] }),
+    /* @__PURE__ */ jsx(InteractiveBreadcrumb, { state, separator }, state)
+  ] });
+}
+function InteractiveBreadcrumb({
+  state,
+  separator
+}) {
+  const [currentIndex, setCurrentIndex] = useState(ITEMS.length - 1);
+  const interactiveItems = ITEMS.slice(0, currentIndex + 1).map((item, i) => {
+    const isCurrent = i === currentIndex;
+    return {
+      label: item.label,
+      href: isCurrent ? void 0 : item.href,
+      disabled: state === "disabled" && i === currentIndex - 1
+    };
+  });
+  return /* @__PURE__ */ jsxs("div", { style: { borderTop: "1px solid var(--color-border)", paddingTop: 16 }, children: [
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", width: "100%", alignItems: "center", justifyContent: "space-between", gap: 16, marginBottom: 12 }, children: [
+      /* @__PURE__ */ jsx("div", { style: { ...SECTION_LABEL, marginBottom: 0 }, children: "Interactive" }),
+      currentIndex < ITEMS.length - 1 && /* @__PURE__ */ jsx(
+        InlineAction,
+        {
+          onClick: () => setCurrentIndex(ITEMS.length - 1),
+          icon: /* @__PURE__ */ jsx(Icon, { glyph: "refresh", strokeWidth: 2.25, "aria-hidden": true }),
+          title: "Restore the full breadcrumb path",
+          children: "Reset path"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      Breadcrumb,
+      {
+        separator,
+        items: interactiveItems,
+        onClick: (e) => {
+          e.preventDefault();
+          const anchor = e.target.closest("a.uxm-link");
+          if (!anchor || anchor.getAttribute("aria-disabled") === "true") return;
+          const all = Array.from(e.currentTarget.querySelectorAll("a.uxm-link"));
+          const idx = all.indexOf(anchor);
+          if (idx >= 0) setCurrentIndex(idx);
+        }
+      }
+    )
+  ] });
+}
+export {
+  BreadcrumbPreview
+};
+//# sourceMappingURL=breadcrumb-preview.js.map

package/dist/ui/breadcrumb/breadcrumb-preview.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/breadcrumb/breadcrumb-preview.tsx"],"sourcesContent":["import { useState, type CSSProperties } from 'react';\n\nimport { cn } from '@/helpers';\nimport type { PreviewProps } from '@/previews/types';\nimport { Breadcrumb, type BreadcrumbSeparator } from '@/ui';\nimport { Icon } from '@/ui';\nimport { InlineAction } from '@/ui';\n\ntype Styles = PreviewProps['styles'];\n\nconst ITEMS = [\n  { label: 'Home', href: '#home' },\n  { label: 'Products', href: '#products' },\n  { label: 'Smartphones', href: '#smartphones' },\n  { label: 'iPhone 15', href: '#iphone-15' },\n];\n\n/**\n * Project every registry knob as a `--uxm-breadcrumb-*` custom property\n * on the wrapper. The showcase isolates a single link crumb in the\n * displayed state (no separators, no neighbouring crumbs) so the state\n * treatment reads cleanly. The interactive instance below renders the\n * full Breadcrumb atom; clicking any link crumb truncates the path so\n * that crumb becomes the new current — exercising the active-state\n * styling against the projected vars.\n */\nfunction buildVars(styles: Styles): CSSProperties {\n  return {\n    '--uxm-breadcrumb-inactive-text': styles.inactiveText as string,\n    '--uxm-breadcrumb-hover-text': styles.hoverText as string,\n    '--uxm-breadcrumb-focus-text': styles.focusText as string,\n    '--uxm-breadcrumb-focus-ring': styles.focusRing as string,\n    '--uxm-breadcrumb-active-text': styles.activeText as string,\n    '--uxm-breadcrumb-active-font-weight': styles.activeFontWeight as string,\n    '--uxm-breadcrumb-disabled-text': styles.disabledText as string,\n    '--uxm-breadcrumb-disabled-opacity':\n      styles.disabledOpacity != null ? String(styles.disabledOpacity) : undefined,\n    '--uxm-breadcrumb-link-weight': styles.linkWeight as string,\n    '--uxm-breadcrumb-separator-color': styles.separatorColor as string,\n    '--uxm-breadcrumb-separator-size': `${styles.separatorSize}px`,\n    '--uxm-breadcrumb-font-size': `${styles.fontSize}px`,\n    '--uxm-breadcrumb-gap': `${styles.gap}px`,\n    '--uxm-breadcrumb-underline-offset': `${styles.underlineOffset}px`,\n    '--uxm-breadcrumb-underline-thickness': `${styles.underlineThickness}px`,\n  } as CSSProperties;\n}\n\n/**\n * Static showcase — a single link crumb in the displayed state, wrapped\n * in a `.uxm-breadcrumb` scope so the breadcrumb-scoped CSS rules apply.\n * Inert: `pointer-events: none` blocks `:hover` from firing on mouse-\n * over and `tabIndex={-1}` keeps the anchor out of the focus order so\n * `:focus-visible` can't fire from real keyboard input. The interactive\n * instance below uses the real atom — so production CSS exercises on\n * real interaction.\n */\nfunction StaticShowcase({ state }: { state: string }) {\n  const stateClass = ['hover', 'focus', 'active'].includes(state)\n    ? `uxm-link--state-${state}`\n    : null;\n  const showAriaDisabled = state === 'disabled';\n\n  return (\n    <nav\n      aria-label=\"Breadcrumb\"\n      className=\"uxm-breadcrumb\"\n      style={{ pointerEvents: 'none' }}\n    >\n      <a\n        href=\"#preview\"\n        onClick={(e) => e.preventDefault()}\n        tabIndex={-1}\n        className={cn(\n          'uxm-link',\n          'uxm-link--underline-hover',\n          'uxm-breadcrumb__link',\n          stateClass,\n        )}\n        {...(showAriaDisabled ? { 'aria-disabled': true } : {})}\n      >\n        Smartphones\n      </a>\n    </nav>\n  );\n}\n\nconst SECTION_LABEL: CSSProperties = {\n  fontSize: 11,\n  color: 'var(--color-text-muted)',\n  marginBottom: 12,\n  letterSpacing: 0.5,\n  textTransform: 'uppercase',\n};\n\nexport function BreadcrumbPreview({ styles, variants }: PreviewProps) {\n  const state = (variants.state as string) ?? 'default';\n  const separator = (variants.separator ?? 'chevron') as BreadcrumbSeparator;\n  const cssVars = buildVars(styles);\n\n  return (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: 32, minWidth: 320, ...cssVars } as CSSProperties}>\n      <div>\n        <div style={SECTION_LABEL}>{state} state</div>\n        <StaticShowcase state={state} />\n      </div>\n\n      {/* Interactive instance — keyed by state so changing the State knob\n          remounts and restores the full path. Real `:hover` /\n          `:focus-visible` exercise the production CSS via the projected\n          vars above; the State dropdown only carries through to\n          `disabled` here (applied to the crumb before current). */}\n      <InteractiveBreadcrumb key={state} state={state} separator={separator} />\n    </div>\n  );\n}\n\nfunction InteractiveBreadcrumb({\n  state,\n  separator,\n}: {\n  state: string;\n  separator: BreadcrumbSeparator;\n}) {\n  // Track which crumb is the \"active\" (current) one. Clicking a link crumb\n  // truncates the path so that crumb becomes the new current — links lose\n  // their href on the truncated tail. Parent's `key={state}` resets this\n  // to `ITEMS.length - 1` on every State change.\n  const [currentIndex, setCurrentIndex] = useState(ITEMS.length - 1);\n\n  // Build the interactive item list. Items past the current crumb are\n  // dropped (truncating the path so the clicked crumb becomes the new\n  // tail). When State=disabled, the crumb before current is rendered\n  // disabled to demo the styling alongside enabled crumbs.\n  const interactiveItems = ITEMS.slice(0, currentIndex + 1).map((item, i) => {\n    const isCurrent = i === currentIndex;\n    return {\n      label: item.label,\n      href: isCurrent ? undefined : item.href,\n      disabled: state === 'disabled' && i === currentIndex - 1,\n    };\n  });\n\n  return (\n    <div style={{ borderTop: '1px solid var(--color-border)', paddingTop: 16 }}>\n      <div style={{ display: 'flex', width: '100%', alignItems: 'center', justifyContent: 'space-between', gap: 16, marginBottom: 12 }}>\n        <div style={{ ...SECTION_LABEL, marginBottom: 0 }}>Interactive</div>\n        {currentIndex < ITEMS.length - 1 && (\n          <InlineAction\n            onClick={() => setCurrentIndex(ITEMS.length - 1)}\n            icon={<Icon glyph=\"refresh\" strokeWidth={2.25} aria-hidden />}\n            title=\"Restore the full breadcrumb path\"\n          >\n            Reset path\n          </InlineAction>\n        )}\n      </div>\n      <Breadcrumb\n        separator={separator}\n        items={interactiveItems}\n        onClick={(e) => {\n          e.preventDefault();\n          const anchor = (e.target as HTMLElement).closest('a.uxm-link');\n          if (!anchor || anchor.getAttribute('aria-disabled') === 'true') return;\n          const all = Array.from(e.currentTarget.querySelectorAll('a.uxm-link'));\n          const idx = all.indexOf(anchor as HTMLAnchorElement);\n          if (idx >= 0) setCurrentIndex(idx);\n        }}\n      />\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/ui/breadcrumb/breadcrumb.cjs

@@ -0,0 +1,75 @@
+"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 breadcrumb_exports = {};
+__export(breadcrumb_exports, {
+  Breadcrumb: () => Breadcrumb
+});
+module.exports = __toCommonJS(breadcrumb_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_helpers = require("../../helpers/index.cjs");
+var import_icon = require("../icon/index.cjs");
+var import_link = require("../link/index.cjs");
+const SEPARATOR_GLYPH = {
+  slash: "/",
+  dot: "\xB7",
+  dash: "\u2014"
+};
+function Breadcrumb({
+  items,
+  separator = "chevron",
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("nav", { "aria-label": "Breadcrumb", className: (0, import_helpers.cn)("uxm-breadcrumb", className), ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ol", { className: "uxm-breadcrumb__list", children: items.map((item, i) => {
+    const isLast = i === items.length - 1;
+    const showSeparator = !isLast;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { className: "uxm-breadcrumb__item", children: [
+      item.href && !isLast ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_link.Link,
+        {
+          href: item.href,
+          underline: "hover",
+          disabled: item.disabled,
+          className: "uxm-breadcrumb__link",
+          children: item.label
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "span",
+        {
+          className: "uxm-breadcrumb__current",
+          "aria-current": isLast ? "page" : void 0,
+          children: item.label
+        }
+      ),
+      showSeparator && (separator === "chevron" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_icon.Icon,
+        {
+          glyph: "chevron-right",
+          className: "uxm-breadcrumb__separator uxm-breadcrumb__separator--icon",
+          "aria-hidden": true
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-breadcrumb__separator", "aria-hidden": true, children: SEPARATOR_GLYPH[separator] }))
+    ] }, i);
+  }) }) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Breadcrumb
+});
+//# sourceMappingURL=breadcrumb.cjs.map

package/dist/ui/breadcrumb/breadcrumb.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/breadcrumb/breadcrumb.tsx"],"sourcesContent":["import { cn } from '@/helpers';\n\nimport { Icon } from '../icon';\nimport { Link } from '../link';\n\nimport type { HTMLAttributes, ReactNode } from 'react';\n\nexport type BreadcrumbSeparator = 'slash' | 'chevron' | 'dot' | 'dash';\n\nexport interface BreadcrumbCrumb {\n  label: ReactNode;\n  href?: string;\n  /** Disabled crumbs render as a Link with `aria-disabled` so the CSS\n   *  disabled rule paints. The crumb stays clickable in the DOM tree but\n   *  `pointer-events: none` blocks interaction. */\n  disabled?: boolean;\n}\n\nexport interface BreadcrumbProps extends HTMLAttributes<HTMLElement> {\n  items: BreadcrumbCrumb[];\n  separator?: BreadcrumbSeparator;\n}\n\nconst SEPARATOR_GLYPH: Record<Exclude<BreadcrumbSeparator, 'chevron'>, string> = {\n  slash: '/',\n  dot: '·',\n  dash: '—',\n};\n\nexport function Breadcrumb({\n  items,\n  separator = 'chevron',\n  className,\n  ...rest\n}: BreadcrumbProps) {\n  return (\n    <nav aria-label=\"Breadcrumb\" className={cn('uxm-breadcrumb', className)} {...rest}>\n      <ol className=\"uxm-breadcrumb__list\">\n        {items.map((item, i) => {\n          const isLast = i === items.length - 1;\n          const showSeparator = !isLast;\n          return (\n            <li key={i} className=\"uxm-breadcrumb__item\">\n              {item.href && !isLast ? (\n                <Link\n                  href={item.href}\n                  underline=\"hover\"\n                  disabled={item.disabled}\n                  className=\"uxm-breadcrumb__link\"\n                >\n                  {item.label}\n                </Link>\n              ) : (\n                <span\n                  className=\"uxm-breadcrumb__current\"\n                  aria-current={isLast ? 'page' : undefined}\n                >\n                  {item.label}\n                </span>\n              )}\n              {showSeparator &&\n                (separator === 'chevron' ? (\n                  <Icon\n                    glyph=\"chevron-right\"\n                    className=\"uxm-breadcrumb__separator uxm-breadcrumb__separator--icon\"\n                    aria-hidden\n                  />\n                ) : (\n                  <span className=\"uxm-breadcrumb__separator\" aria-hidden>\n                    {SEPARATOR_GLYPH[separator]}\n                  </span>\n                ))}\n            </li>\n          );\n        })}\n      </ol>\n    </nav>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA0CY;AA1CZ,qBAAmB;AAEnB,kBAAqB;AACrB,kBAAqB;AAoBrB,MAAM,kBAA2E;AAAA,EAC/E,OAAO;AAAA,EACP,KAAK;AAAA,EACL,MAAM;AACR;AAEO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA,GAAG;AACL,GAAoB;AAClB,SACE,4CAAC,SAAI,cAAW,cAAa,eAAW,mBAAG,kBAAkB,SAAS,GAAI,GAAG,MAC3E,sDAAC,QAAG,WAAU,wBACX,gBAAM,IAAI,CAAC,MAAM,MAAM;AACtB,UAAM,SAAS,MAAM,MAAM,SAAS;AACpC,UAAM,gBAAgB,CAAC;AACvB,WACE,6CAAC,QAAW,WAAU,wBACnB;AAAA,WAAK,QAAQ,CAAC,SACb;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,KAAK;AAAA,UACX,WAAU;AAAA,UACV,UAAU,KAAK;AAAA,UACf,WAAU;AAAA,UAET,eAAK;AAAA;AAAA,MACR,IAEA;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,gBAAc,SAAS,SAAS;AAAA,UAE/B,eAAK;AAAA;AAAA,MACR;AAAA,MAED,kBACE,cAAc,YACb;AAAA,QAAC;AAAA;AAAA,UACC,OAAM;AAAA,UACN,WAAU;AAAA,UACV,eAAW;AAAA;AAAA,MACb,IAEA,4CAAC,UAAK,WAAU,6BAA4B,eAAW,MACpD,0BAAgB,SAAS,GAC5B;AAAA,SA5BG,CA8BT;AAAA,EAEJ,CAAC,GACH,GACF;AAEJ;","names":[]}

package/dist/ui/breadcrumb/breadcrumb.css

@@ -0,0 +1,62 @@
+@charset "UTF-8";
+/* ── breadcrumb ── */
+/* Breadcrumb — composes Link for clickable crumbs. Uses descendant
+   selectors (.uxm-breadcrumb .uxm-link) so breadcrumb-scope styling wins
+   over Link's own saved global overrides on the `.uxm-link` single-class
+   selector. Breadcrumb is sovereign in its own scope for color, hover,
+   and font-size; anything Breadcrumb doesn't override (font-weight,
+   underline offset/thickness) inherits from Link naturally.
+
+   State colours read the studio `--uxm-breadcrumb-{state}-text` vars
+   (generate-css names), falling back to the legacy `-link-*` vars, then
+   the resting token — so saved overrides apply and the look is unchanged. */
+.uxm-breadcrumb {
+  font-size: calc(var(--uxm-breadcrumb-font-size, 13px) * var(--type-scale, 1));
+}
+.uxm-breadcrumb .uxm-link {
+  color: var(--uxm-breadcrumb-inactive-text, var(--uxm-breadcrumb-link-color, var(--color-text-muted)));
+  font-size: calc(var(--uxm-breadcrumb-font-size, 13px) * var(--type-scale, 1));
+  font-weight: var(--uxm-breadcrumb-link-weight, 500);
+  text-decoration-thickness: var(--uxm-breadcrumb-underline-thickness, 1px);
+  text-underline-offset: var(--uxm-breadcrumb-underline-offset, 3px);
+}
+.uxm-breadcrumb .uxm-link:hover {
+  color: var(--uxm-breadcrumb-hover-text, var(--uxm-breadcrumb-link-hover-color, var(--color-text)));
+}
+.uxm-breadcrumb .uxm-link:focus-visible {
+  color: var(--uxm-breadcrumb-focus-text, var(--color-text));
+  outline: 2px solid var(--uxm-breadcrumb-focus-ring, var(--color-accent));
+  outline-offset: 2px;
+}
+.uxm-breadcrumb .uxm-link[aria-disabled=true] {
+  color: var(--uxm-breadcrumb-disabled-text, var(--color-text-subtle));
+  opacity: var(--uxm-breadcrumb-disabled-opacity, 0.5);
+}
+.uxm-breadcrumb__list {
+  align-items: center;
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: var(--uxm-breadcrumb-gap, 6px);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.uxm-breadcrumb__item {
+  align-items: center;
+  display: inline-flex;
+  gap: var(--uxm-breadcrumb-gap, 6px);
+}
+.uxm-breadcrumb__current {
+  color: var(--uxm-breadcrumb-active-text, var(--uxm-breadcrumb-current-color, var(--color-text)));
+  font-weight: var(--uxm-breadcrumb-active-font-weight, var(--uxm-breadcrumb-current-weight, 600));
+}
+.uxm-breadcrumb__separator {
+  color: var(--uxm-breadcrumb-separator-color, var(--color-text-subtle));
+  flex-shrink: 0;
+  font-size: calc(var(--uxm-breadcrumb-separator-size, 13px) * var(--type-scale, 1));
+  line-height: 1;
+}
+.uxm-breadcrumb__separator--icon {
+  height: var(--uxm-breadcrumb-separator-size, 13px);
+  width: var(--uxm-breadcrumb-separator-size, 13px);
+}

package/dist/ui/breadcrumb/breadcrumb.d.ts

@@ -0,0 +1,16 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export type BreadcrumbSeparator = 'slash' | 'chevron' | 'dot' | 'dash';
+export interface BreadcrumbCrumb {
+    label: ReactNode;
+    href?: string;
+    /** Disabled crumbs render as a Link with `aria-disabled` so the CSS
+     *  disabled rule paints. The crumb stays clickable in the DOM tree but
+     *  `pointer-events: none` blocks interaction. */
+    disabled?: boolean;
+}
+export interface BreadcrumbProps extends HTMLAttributes<HTMLElement> {
+    items: BreadcrumbCrumb[];
+    separator?: BreadcrumbSeparator;
+}
+export declare function Breadcrumb({ items, separator, className, ...rest }: BreadcrumbProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=breadcrumb.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb.d.ts","sourceRoot":"","sources":["../../../src/ui/breadcrumb/breadcrumb.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,SAAS,GAAG,KAAK,GAAG,MAAM,CAAC;AAEvE,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;qDAEiD;IACjD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,eAAgB,SAAQ,cAAc,CAAC,WAAW,CAAC;IAClE,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB,SAAS,CAAC,EAAE,mBAAmB,CAAC;CACjC;AAQD,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,SAAqB,EACrB,SAAS,EACT,GAAG,IAAI,EACR,EAAE,eAAe,2CA4CjB"}