@bridger-kr/react 0.1.0

package/dist/components/navigation/Menu.mjs

@@ -0,0 +1,102 @@
+import { useState, useRef, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/navigation/Menu.tsx
+function Menu({ trigger, items = [], align = "left", width = 200, style, ...rest }) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef(null);
+  useEffect(() => {
+    if (!open) return void 0;
+    const onDoc = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
+    };
+    window.addEventListener("mousedown", onDoc);
+    return () => window.removeEventListener("mousedown", onDoc);
+  }, [open]);
+  const handleTriggerKeyDown = (e) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      setOpen((v) => !v);
+    } else if (e.key === "ArrowDown") {
+      e.preventDefault();
+      const firstItem = ref.current?.querySelector('button[role="menuitem"]');
+      firstItem?.focus();
+    }
+  };
+  const handleItemClick = (item) => {
+    if (item.onClick) {
+      item.onClick();
+      setOpen(false);
+    }
+  };
+  const handleTriggerClick = () => {
+    setOpen((v) => !v);
+  };
+  return /* @__PURE__ */ jsxs("span", { ...rest, ref, style: { position: "relative", display: "inline-flex", ...style }, children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: handleTriggerClick,
+        onKeyDown: handleTriggerKeyDown,
+        "aria-expanded": open,
+        "aria-haspopup": "menu",
+        style: { display: "inline-flex", cursor: "pointer", border: "none", background: "transparent", padding: 0, fontSize: "inherit", fontFamily: "inherit" },
+        children: trigger
+      }
+    ),
+    open ? /* @__PURE__ */ jsxs("div", { role: "menu", "aria-orientation": "vertical", style: {
+      position: "absolute",
+      top: "100%",
+      [align]: 0,
+      marginTop: 6,
+      zIndex: 80,
+      width,
+      padding: 5,
+      background: "var(--dt-surface)",
+      borderRadius: "var(--dt-radius-md)",
+      boxShadow: "var(--dt-shadow-lg)",
+      animation: "dt-menu 130ms var(--dt-ease)"
+    }, children: [
+      items.map((it, i) => it.divider ? /* @__PURE__ */ jsx("div", { style: { height: 1, background: "var(--dt-border)", margin: "5px 0" } }, `d${i}`) : /* @__PURE__ */ jsxs(
+        "button",
+        {
+          role: "menuitem",
+          onClick: () => handleItemClick(it),
+          style: {
+            display: "flex",
+            alignItems: "center",
+            gap: 9,
+            width: "100%",
+            textAlign: "left",
+            padding: "8px 10px",
+            border: "none",
+            borderRadius: "var(--dt-radius-sm)",
+            cursor: "pointer",
+            background: "transparent",
+            fontSize: 13.5,
+            fontWeight: 500,
+            fontFamily: "inherit",
+            color: it.danger ? "var(--dt-danger)" : "var(--dt-ink)"
+          },
+          onMouseEnter: (e) => {
+            e.currentTarget.style.background = it.danger ? "var(--dt-tint-danger)" : "var(--dt-surface-sunken)";
+          },
+          onMouseLeave: (e) => {
+            e.currentTarget.style.background = "transparent";
+          },
+          children: [
+            it.icon ? /* @__PURE__ */ jsx("span", { style: { display: "inline-flex", color: it.danger ? "var(--dt-danger)" : "var(--dt-muted-strong)" }, children: it.icon }) : null,
+            it.label
+          ]
+        },
+        i
+      )),
+      /* @__PURE__ */ jsx("style", { children: `@keyframes dt-menu{from{opacity:0;transform:translateY(-4px)}}` })
+    ] }) : null
+  ] });
+}
+
+export { Menu };
+//# sourceMappingURL=Menu.mjs.map
+//# sourceMappingURL=Menu.mjs.map

package/dist/components/navigation/Menu.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/navigation/Menu.tsx"],"names":[],"mappings":"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","file":"Menu.mjs","sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport type { CSSProperties, HTMLAttributes, KeyboardEvent, MouseEvent as ReactMouseEvent, ReactNode } from 'react';\n\nexport interface MenuItem {\n  label?: ReactNode;\n  icon?: ReactNode;\n  onClick?: () => void;\n  danger?: boolean;\n  divider?: boolean;\n}\n\nexport interface MenuProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {\n  trigger: ReactNode;\n  items?: MenuItem[];\n  align?: 'left' | 'right';\n  width?: number;\n  style?: CSSProperties;\n}\n\nexport function Menu({ trigger, items = [], align = 'left', width = 200, style, ...rest }: MenuProps) {\n  const [open, setOpen] = useState(false);\n  const ref = useRef<HTMLSpanElement>(null);\n\n  useEffect(() => {\n    if (!open) return undefined;\n    const onDoc = (e: MouseEvent) => { if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false); };\n    window.addEventListener('mousedown', onDoc);\n    return () => window.removeEventListener('mousedown', onDoc);\n  }, [open]);\n\n  const handleTriggerKeyDown = (e: KeyboardEvent) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      setOpen((v) => !v);\n    } else if (e.key === 'ArrowDown') {\n      e.preventDefault();\n      const firstItem = ref.current?.querySelector('button[role=\"menuitem\"]') as HTMLButtonElement | null;\n      firstItem?.focus();\n    }\n  };\n\n  const handleItemClick = (item: MenuItem) => {\n    if (item.onClick) {\n      item.onClick();\n      setOpen(false);\n    }\n  };\n\n  const handleTriggerClick = () => {\n    setOpen((v) => !v);\n  };\n\n  return (\n    <span {...rest} ref={ref} style={{ position: 'relative', display: 'inline-flex', ...style }}>\n      <button\n        type=\"button\"\n        onClick={handleTriggerClick}\n        onKeyDown={handleTriggerKeyDown}\n        aria-expanded={open}\n        aria-haspopup=\"menu\"\n        style={{ display: 'inline-flex', cursor: 'pointer', border: 'none', background: 'transparent', padding: 0, fontSize: 'inherit', fontFamily: 'inherit' }}\n      >\n        {trigger}\n      </button>\n      {open ? (\n        <div role=\"menu\" aria-orientation=\"vertical\" style={{\n          position: 'absolute', top: '100%', [align]: 0, marginTop: 6, zIndex: 80, width,\n          padding: 5, background: 'var(--dt-surface)', borderRadius: 'var(--dt-radius-md)',\n          boxShadow: 'var(--dt-shadow-lg)', animation: 'dt-menu 130ms var(--dt-ease)',\n        }}>\n          {items.map((it, i) => it.divider\n            ? <div key={`d${i}`} style={{ height: 1, background: 'var(--dt-border)', margin: '5px 0' }} />\n            : (\n              <button\n                key={i}\n                role=\"menuitem\"\n                onClick={() => handleItemClick(it)}\n                style={{\n                  display: 'flex', alignItems: 'center', gap: 9, width: '100%', textAlign: 'left',\n                  padding: '8px 10px', border: 'none', borderRadius: 'var(--dt-radius-sm)', cursor: 'pointer',\n                  background: 'transparent', fontSize: 13.5, fontWeight: 500, fontFamily: 'inherit',\n                  color: it.danger ? 'var(--dt-danger)' : 'var(--dt-ink)',\n                }}\n                onMouseEnter={(e: ReactMouseEvent<HTMLButtonElement>) => { e.currentTarget.style.background = it.danger ? 'var(--dt-tint-danger)' : 'var(--dt-surface-sunken)'; }}\n                onMouseLeave={(e: ReactMouseEvent<HTMLButtonElement>) => { e.currentTarget.style.background = 'transparent'; }}>\n                {it.icon ? <span style={{ display: 'inline-flex', color: it.danger ? 'var(--dt-danger)' : 'var(--dt-muted-strong)' }}>{it.icon}</span> : null}\n                {it.label}\n              </button>\n            ))}\n          <style>{`@keyframes dt-menu{from{opacity:0;transform:translateY(-4px)}}`}</style>\n        </div>\n      ) : null}\n    </span>\n  );\n}\n"]}

package/dist/components/navigation/Sidebar.cjs

@@ -0,0 +1,60 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/navigation/Sidebar.tsx
+function Sidebar({ brand, sections = [], footer, width = 232, style, ...rest }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "nav",
+    {
+      ...rest,
+      style: {
+        width,
+        display: "flex",
+        flexDirection: "column",
+        background: "var(--dt-surface)",
+        borderRight: "1px solid var(--dt-border-strong)",
+        fontFamily: "var(--dt-font-sans)",
+        ...style
+      },
+      children: [
+        brand ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "16px 18px", borderBottom: "1px solid var(--dt-border)" }, children: brand }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1, overflowY: "auto", padding: "12px 10px", display: "grid", gap: 16, alignContent: "start" }, children: sections.map((sec, si) => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "grid", gap: 2 }, children: [
+          sec.heading ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontFamily: "var(--dt-font-mono)", fontSize: 10, letterSpacing: ".1em", textTransform: "uppercase", color: "var(--dt-muted)", padding: "4px 10px 6px" }, children: sec.heading }) : null,
+          sec.items.map((it, ii) => /* @__PURE__ */ jsxRuntime.jsxs(
+            "a",
+            {
+              href: it.href || "#",
+              "aria-current": it.active ? "page" : void 0,
+              style: {
+                position: "relative",
+                display: "flex",
+                alignItems: "center",
+                gap: 11,
+                padding: "8px 10px 8px 12px",
+                borderRadius: "var(--dt-radius-md)",
+                textDecoration: "none",
+                fontSize: 13.5,
+                fontWeight: it.active ? 600 : 500,
+                color: it.active ? "var(--dt-accent)" : "var(--dt-muted-strong)",
+                background: it.active ? "var(--dt-tint-accent)" : "transparent"
+              },
+              children: [
+                it.active ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: { position: "absolute", left: 0, top: 7, bottom: 7, width: 3, borderRadius: 2, background: "var(--dt-accent)" } }) : null,
+                it.icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: { display: "inline-flex", flex: "0 0 auto", color: it.active ? "var(--dt-accent)" : "var(--dt-muted)" }, "aria-hidden": "true", children: it.icon }) : null,
+                /* @__PURE__ */ jsxRuntime.jsx("span", { style: { flex: 1, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: it.label }),
+                it.badge != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontFamily: "var(--dt-font-mono)", fontSize: 11, color: it.active ? "var(--dt-accent)" : "var(--dt-muted)", fontVariantNumeric: "tabular-nums" }, children: it.badge }) : null
+              ]
+            },
+            ii
+          ))
+        ] }, si)) }),
+        footer ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "12px 16px", borderTop: "1px solid var(--dt-border)" }, children: footer }) : null
+      ]
+    }
+  );
+}
+
+exports.Sidebar = Sidebar;
+//# sourceMappingURL=Sidebar.cjs.map
+//# sourceMappingURL=Sidebar.cjs.map

package/dist/components/navigation/Sidebar.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/navigation/Sidebar.tsx"],"names":["jsxs","jsx"],"mappings":"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","file":"Sidebar.cjs","sourcesContent":["import type { CSSProperties, HTMLAttributes, ReactNode } from 'react';\n\nexport interface SidebarItem {\n  label: string;\n  icon?: ReactNode;\n  href?: string;\n  active?: boolean;\n  /** Trailing count (e.g. tool count), rendered tabular-mono. */\n  badge?: ReactNode;\n}\n\nexport interface SidebarSection {\n  heading?: string;\n  items: SidebarItem[];\n}\n\nexport interface SidebarProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {\n  /** Brand block for the header (e.g. <BrandLogo/>). */\n  brand?: ReactNode;\n  sections?: SidebarSection[];\n  footer?: ReactNode;\n  width?: number;\n  style?: CSSProperties;\n}\n\n/**\n * Console primary nav — flat column, active item marked by a persimmon left bar.\n * @startingPoint section=\"Navigation\" subtitle=\"Console nav rail\" viewport=\"260x440\"\n */\nexport function Sidebar({ brand, sections = [], footer, width = 232, style, ...rest }: SidebarProps) {\n  return (\n    <nav\n      {...rest}\n      style={{\n        width, display: 'flex', flexDirection: 'column',\n        background: 'var(--dt-surface)', borderRight: '1px solid var(--dt-border-strong)',\n        fontFamily: 'var(--dt-font-sans)', ...style,\n      }}\n    >\n      {brand ? (\n        <div style={{ padding: '16px 18px', borderBottom: '1px solid var(--dt-border)' }}>{brand}</div>\n      ) : null}\n\n      <div style={{ flex: 1, overflowY: 'auto', padding: '12px 10px', display: 'grid', gap: 16, alignContent: 'start' }}>\n        {sections.map((sec, si) => (\n          <div key={si} style={{ display: 'grid', gap: 2 }}>\n            {sec.heading ? (\n              <div style={{ fontFamily: 'var(--dt-font-mono)', fontSize: 10, letterSpacing: '.1em', textTransform: 'uppercase', color: 'var(--dt-muted)', padding: '4px 10px 6px' }}>{sec.heading}</div>\n            ) : null}\n            {sec.items.map((it, ii) => (\n              <a\n                key={ii}\n                href={it.href || '#'}\n                aria-current={it.active ? 'page' : undefined}\n                style={{\n                  position: 'relative', display: 'flex', alignItems: 'center', gap: 11,\n                  padding: '8px 10px 8px 12px', borderRadius: 'var(--dt-radius-md)', textDecoration: 'none',\n                  fontSize: 13.5, fontWeight: it.active ? 600 : 500,\n                  color: it.active ? 'var(--dt-accent)' : 'var(--dt-muted-strong)',\n                  background: it.active ? 'var(--dt-tint-accent)' : 'transparent',\n                }}\n              >\n                {it.active ? <span style={{ position: 'absolute', left: 0, top: 7, bottom: 7, width: 3, borderRadius: 2, background: 'var(--dt-accent)' }} /> : null}\n                {it.icon ? <span style={{ display: 'inline-flex', flex: '0 0 auto', color: it.active ? 'var(--dt-accent)' : 'var(--dt-muted)' }} aria-hidden=\"true\">{it.icon}</span> : null}\n                <span style={{ flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{it.label}</span>\n                {it.badge != null ? (\n                  <span style={{ fontFamily: 'var(--dt-font-mono)', fontSize: 11, color: it.active ? 'var(--dt-accent)' : 'var(--dt-muted)', fontVariantNumeric: 'tabular-nums' }}>{it.badge}</span>\n                ) : null}\n              </a>\n            ))}\n          </div>\n        ))}\n      </div>\n\n      {footer ? <div style={{ padding: '12px 16px', borderTop: '1px solid var(--dt-border)' }}>{footer}</div> : null}\n    </nav>\n  );\n}\n"]}

package/dist/components/navigation/Sidebar.d.cts

@@ -0,0 +1,30 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode, CSSProperties } from 'react';
+
+interface SidebarItem {
+    label: string;
+    icon?: ReactNode;
+    href?: string;
+    active?: boolean;
+    /** Trailing count (e.g. tool count), rendered tabular-mono. */
+    badge?: ReactNode;
+}
+interface SidebarSection {
+    heading?: string;
+    items: SidebarItem[];
+}
+interface SidebarProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
+    /** Brand block for the header (e.g. <BrandLogo/>). */
+    brand?: ReactNode;
+    sections?: SidebarSection[];
+    footer?: ReactNode;
+    width?: number;
+    style?: CSSProperties;
+}
+/**
+ * Console primary nav — flat column, active item marked by a persimmon left bar.
+ * @startingPoint section="Navigation" subtitle="Console nav rail" viewport="260x440"
+ */
+declare function Sidebar({ brand, sections, footer, width, style, ...rest }: SidebarProps): react.JSX.Element;
+
+export { Sidebar, type SidebarItem, type SidebarProps, type SidebarSection };

package/dist/components/navigation/Sidebar.d.ts

@@ -0,0 +1,30 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode, CSSProperties } from 'react';
+
+interface SidebarItem {
+    label: string;
+    icon?: ReactNode;
+    href?: string;
+    active?: boolean;
+    /** Trailing count (e.g. tool count), rendered tabular-mono. */
+    badge?: ReactNode;
+}
+interface SidebarSection {
+    heading?: string;
+    items: SidebarItem[];
+}
+interface SidebarProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
+    /** Brand block for the header (e.g. <BrandLogo/>). */
+    brand?: ReactNode;
+    sections?: SidebarSection[];
+    footer?: ReactNode;
+    width?: number;
+    style?: CSSProperties;
+}
+/**
+ * Console primary nav — flat column, active item marked by a persimmon left bar.
+ * @startingPoint section="Navigation" subtitle="Console nav rail" viewport="260x440"
+ */
+declare function Sidebar({ brand, sections, footer, width, style, ...rest }: SidebarProps): react.JSX.Element;
+
+export { Sidebar, type SidebarItem, type SidebarProps, type SidebarSection };

package/dist/components/navigation/Sidebar.mjs

@@ -0,0 +1,58 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/navigation/Sidebar.tsx
+function Sidebar({ brand, sections = [], footer, width = 232, style, ...rest }) {
+  return /* @__PURE__ */ jsxs(
+    "nav",
+    {
+      ...rest,
+      style: {
+        width,
+        display: "flex",
+        flexDirection: "column",
+        background: "var(--dt-surface)",
+        borderRight: "1px solid var(--dt-border-strong)",
+        fontFamily: "var(--dt-font-sans)",
+        ...style
+      },
+      children: [
+        brand ? /* @__PURE__ */ jsx("div", { style: { padding: "16px 18px", borderBottom: "1px solid var(--dt-border)" }, children: brand }) : null,
+        /* @__PURE__ */ jsx("div", { style: { flex: 1, overflowY: "auto", padding: "12px 10px", display: "grid", gap: 16, alignContent: "start" }, children: sections.map((sec, si) => /* @__PURE__ */ jsxs("div", { style: { display: "grid", gap: 2 }, children: [
+          sec.heading ? /* @__PURE__ */ jsx("div", { style: { fontFamily: "var(--dt-font-mono)", fontSize: 10, letterSpacing: ".1em", textTransform: "uppercase", color: "var(--dt-muted)", padding: "4px 10px 6px" }, children: sec.heading }) : null,
+          sec.items.map((it, ii) => /* @__PURE__ */ jsxs(
+            "a",
+            {
+              href: it.href || "#",
+              "aria-current": it.active ? "page" : void 0,
+              style: {
+                position: "relative",
+                display: "flex",
+                alignItems: "center",
+                gap: 11,
+                padding: "8px 10px 8px 12px",
+                borderRadius: "var(--dt-radius-md)",
+                textDecoration: "none",
+                fontSize: 13.5,
+                fontWeight: it.active ? 600 : 500,
+                color: it.active ? "var(--dt-accent)" : "var(--dt-muted-strong)",
+                background: it.active ? "var(--dt-tint-accent)" : "transparent"
+              },
+              children: [
+                it.active ? /* @__PURE__ */ jsx("span", { style: { position: "absolute", left: 0, top: 7, bottom: 7, width: 3, borderRadius: 2, background: "var(--dt-accent)" } }) : null,
+                it.icon ? /* @__PURE__ */ jsx("span", { style: { display: "inline-flex", flex: "0 0 auto", color: it.active ? "var(--dt-accent)" : "var(--dt-muted)" }, "aria-hidden": "true", children: it.icon }) : null,
+                /* @__PURE__ */ jsx("span", { style: { flex: 1, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: it.label }),
+                it.badge != null ? /* @__PURE__ */ jsx("span", { style: { fontFamily: "var(--dt-font-mono)", fontSize: 11, color: it.active ? "var(--dt-accent)" : "var(--dt-muted)", fontVariantNumeric: "tabular-nums" }, children: it.badge }) : null
+              ]
+            },
+            ii
+          ))
+        ] }, si)) }),
+        footer ? /* @__PURE__ */ jsx("div", { style: { padding: "12px 16px", borderTop: "1px solid var(--dt-border)" }, children: footer }) : null
+      ]
+    }
+  );
+}
+
+export { Sidebar };
+//# sourceMappingURL=Sidebar.mjs.map
+//# sourceMappingURL=Sidebar.mjs.map

package/dist/components/navigation/Sidebar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/navigation/Sidebar.tsx"],"names":[],"mappings":"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","file":"Sidebar.mjs","sourcesContent":["import type { CSSProperties, HTMLAttributes, ReactNode } from 'react';\n\nexport interface SidebarItem {\n  label: string;\n  icon?: ReactNode;\n  href?: string;\n  active?: boolean;\n  /** Trailing count (e.g. tool count), rendered tabular-mono. */\n  badge?: ReactNode;\n}\n\nexport interface SidebarSection {\n  heading?: string;\n  items: SidebarItem[];\n}\n\nexport interface SidebarProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {\n  /** Brand block for the header (e.g. <BrandLogo/>). */\n  brand?: ReactNode;\n  sections?: SidebarSection[];\n  footer?: ReactNode;\n  width?: number;\n  style?: CSSProperties;\n}\n\n/**\n * Console primary nav — flat column, active item marked by a persimmon left bar.\n * @startingPoint section=\"Navigation\" subtitle=\"Console nav rail\" viewport=\"260x440\"\n */\nexport function Sidebar({ brand, sections = [], footer, width = 232, style, ...rest }: SidebarProps) {\n  return (\n    <nav\n      {...rest}\n      style={{\n        width, display: 'flex', flexDirection: 'column',\n        background: 'var(--dt-surface)', borderRight: '1px solid var(--dt-border-strong)',\n        fontFamily: 'var(--dt-font-sans)', ...style,\n      }}\n    >\n      {brand ? (\n        <div style={{ padding: '16px 18px', borderBottom: '1px solid var(--dt-border)' }}>{brand}</div>\n      ) : null}\n\n      <div style={{ flex: 1, overflowY: 'auto', padding: '12px 10px', display: 'grid', gap: 16, alignContent: 'start' }}>\n        {sections.map((sec, si) => (\n          <div key={si} style={{ display: 'grid', gap: 2 }}>\n            {sec.heading ? (\n              <div style={{ fontFamily: 'var(--dt-font-mono)', fontSize: 10, letterSpacing: '.1em', textTransform: 'uppercase', color: 'var(--dt-muted)', padding: '4px 10px 6px' }}>{sec.heading}</div>\n            ) : null}\n            {sec.items.map((it, ii) => (\n              <a\n                key={ii}\n                href={it.href || '#'}\n                aria-current={it.active ? 'page' : undefined}\n                style={{\n                  position: 'relative', display: 'flex', alignItems: 'center', gap: 11,\n                  padding: '8px 10px 8px 12px', borderRadius: 'var(--dt-radius-md)', textDecoration: 'none',\n                  fontSize: 13.5, fontWeight: it.active ? 600 : 500,\n                  color: it.active ? 'var(--dt-accent)' : 'var(--dt-muted-strong)',\n                  background: it.active ? 'var(--dt-tint-accent)' : 'transparent',\n                }}\n              >\n                {it.active ? <span style={{ position: 'absolute', left: 0, top: 7, bottom: 7, width: 3, borderRadius: 2, background: 'var(--dt-accent)' }} /> : null}\n                {it.icon ? <span style={{ display: 'inline-flex', flex: '0 0 auto', color: it.active ? 'var(--dt-accent)' : 'var(--dt-muted)' }} aria-hidden=\"true\">{it.icon}</span> : null}\n                <span style={{ flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{it.label}</span>\n                {it.badge != null ? (\n                  <span style={{ fontFamily: 'var(--dt-font-mono)', fontSize: 11, color: it.active ? 'var(--dt-accent)' : 'var(--dt-muted)', fontVariantNumeric: 'tabular-nums' }}>{it.badge}</span>\n                ) : null}\n              </a>\n            ))}\n          </div>\n        ))}\n      </div>\n\n      {footer ? <div style={{ padding: '12px 16px', borderTop: '1px solid var(--dt-border)' }}>{footer}</div> : null}\n    </nav>\n  );\n}\n"]}

package/dist/components/navigation/Stepper.cjs

@@ -0,0 +1,55 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/navigation/Stepper.tsx
+function Stepper({ steps = [], current = 0, orientation = "horizontal", style, ...rest }) {
+  const vertical = orientation === "vertical";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...rest,
+      style: {
+        display: "flex",
+        flexDirection: vertical ? "column" : "row",
+        alignItems: vertical ? "stretch" : "flex-start",
+        gap: 0,
+        ...style
+      },
+      children: steps.map((s, i) => {
+        const done = i < current, active = i === current;
+        const accent = done || active;
+        return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: vertical ? "row" : "column", alignItems: vertical ? "flex-start" : "stretch", flex: vertical ? "none" : 1, minWidth: 0, gap: vertical ? 12 : 0 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: vertical ? "column" : "row", alignItems: "center", gap: vertical ? 6 : 10, ...vertical ? {} : { width: "100%" } }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { style: {
+              flex: "0 0 auto",
+              width: 26,
+              height: 26,
+              display: "grid",
+              placeItems: "center",
+              borderRadius: "var(--dt-radius-sm)",
+              fontFamily: "var(--dt-font-mono)",
+              fontSize: 12,
+              fontWeight: 700,
+              background: done ? "var(--dt-accent)" : active ? "var(--dt-tint-accent)" : "var(--dt-surface-sunken)",
+              color: done ? "#fff" : active ? "var(--dt-accent)" : "var(--dt-muted)",
+              boxShadow: active ? "inset 0 0 0 1.5px var(--dt-accent)" : done ? "none" : "inset 0 0 0 1px var(--dt-border-strong)"
+            }, children: done ? /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 6L9 17l-5-5", stroke: "currentColor", strokeWidth: "2.6", strokeLinecap: "round", strokeLinejoin: "round" }) }) : i + 1 }),
+            i < steps.length - 1 ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: {
+              background: done ? "var(--dt-accent)" : "var(--dt-border-strong)",
+              ...vertical ? { width: 2, minHeight: 22, flex: 1, marginTop: 2 } : { height: 2, flex: 1 }
+            } }) : null
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: vertical ? "2px 0 16px" : "10px 14px 0 0" }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 13.5, fontWeight: accent ? 650 : 500, color: accent ? "var(--dt-ink-strong)" : "var(--dt-muted)" }, children: s.label }),
+            s.description ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 12, color: "var(--dt-muted)", marginTop: 3, lineHeight: 1.45 }, children: s.description }) : null
+          ] })
+        ] }, i);
+      })
+    }
+  );
+}
+
+exports.Stepper = Stepper;
+//# sourceMappingURL=Stepper.cjs.map
+//# sourceMappingURL=Stepper.cjs.map

package/dist/components/navigation/Stepper.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/navigation/Stepper.tsx"],"names":["jsx","jsxs"],"mappings":"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","file":"Stepper.cjs","sourcesContent":["import type { CSSProperties, HTMLAttributes } from 'react';\n\nexport interface Step {\n  label: string;\n  description?: string;\n}\n\nexport interface StepperProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {\n  steps?: Step[];\n  /** Index of the in-progress step; earlier steps render as done. */\n  current?: number;\n  orientation?: 'horizontal' | 'vertical';\n  style?: CSSProperties;\n}\n\n/**\n * Multi-step progress — done (check) / current (persimmon) / upcoming (muted).\n * @startingPoint section=\"Navigation\" subtitle=\"Onboarding step progress\" viewport=\"560x120\"\n */\nexport function Stepper({ steps = [], current = 0, orientation = 'horizontal', style, ...rest }: StepperProps) {\n  const vertical = orientation === 'vertical';\n  return (\n    <div\n      {...rest}\n      style={{\n        display: 'flex', flexDirection: vertical ? 'column' : 'row',\n        alignItems: vertical ? 'stretch' : 'flex-start', gap: 0, ...style,\n      }}\n    >\n      {steps.map((s, i) => {\n        const done = i < current, active = i === current;\n        const accent = done || active;\n        return (\n          <div key={i} style={{ display: 'flex', flexDirection: vertical ? 'row' : 'column', alignItems: vertical ? 'flex-start' : 'stretch', flex: vertical ? 'none' : 1, minWidth: 0, gap: vertical ? 12 : 0 }}>\n            {/* marker + connector */}\n            <div style={{ display: 'flex', flexDirection: vertical ? 'column' : 'row', alignItems: 'center', gap: vertical ? 6 : 10, ...(vertical ? {} : { width: '100%' }) }}>\n              <span style={{\n                flex: '0 0 auto', width: 26, height: 26, display: 'grid', placeItems: 'center',\n                borderRadius: 'var(--dt-radius-sm)', fontFamily: 'var(--dt-font-mono)', fontSize: 12, fontWeight: 700,\n                background: done ? 'var(--dt-accent)' : active ? 'var(--dt-tint-accent)' : 'var(--dt-surface-sunken)',\n                color: done ? '#fff' : active ? 'var(--dt-accent)' : 'var(--dt-muted)',\n                boxShadow: active ? 'inset 0 0 0 1.5px var(--dt-accent)' : done ? 'none' : 'inset 0 0 0 1px var(--dt-border-strong)',\n              }}>\n                {done ? <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\"><path d=\"M20 6L9 17l-5-5\" stroke=\"currentColor\" strokeWidth=\"2.6\" strokeLinecap=\"round\" strokeLinejoin=\"round\" /></svg> : i + 1}\n              </span>\n              {i < steps.length - 1 ? (\n                <span style={{\n                  background: done ? 'var(--dt-accent)' : 'var(--dt-border-strong)',\n                  ...(vertical ? { width: 2, minHeight: 22, flex: 1, marginTop: 2 } : { height: 2, flex: 1 }),\n                }} />\n              ) : null}\n            </div>\n            {/* label */}\n            <div style={{ padding: vertical ? '2px 0 16px' : '10px 14px 0 0' }}>\n              <div style={{ fontSize: 13.5, fontWeight: accent ? 650 : 500, color: accent ? 'var(--dt-ink-strong)' : 'var(--dt-muted)' }}>{s.label}</div>\n              {s.description ? <div style={{ fontSize: 12, color: 'var(--dt-muted)', marginTop: 3, lineHeight: 1.45 }}>{s.description}</div> : null}\n            </div>\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n"]}

package/dist/components/navigation/Stepper.d.cts

@@ -0,0 +1,21 @@
+import * as react from 'react';
+import { HTMLAttributes, CSSProperties } from 'react';
+
+interface Step {
+    label: string;
+    description?: string;
+}
+interface StepperProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    steps?: Step[];
+    /** Index of the in-progress step; earlier steps render as done. */
+    current?: number;
+    orientation?: 'horizontal' | 'vertical';
+    style?: CSSProperties;
+}
+/**
+ * Multi-step progress — done (check) / current (persimmon) / upcoming (muted).
+ * @startingPoint section="Navigation" subtitle="Onboarding step progress" viewport="560x120"
+ */
+declare function Stepper({ steps, current, orientation, style, ...rest }: StepperProps): react.JSX.Element;
+
+export { type Step, Stepper, type StepperProps };

package/dist/components/navigation/Stepper.d.ts

@@ -0,0 +1,21 @@
+import * as react from 'react';
+import { HTMLAttributes, CSSProperties } from 'react';
+
+interface Step {
+    label: string;
+    description?: string;
+}
+interface StepperProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    steps?: Step[];
+    /** Index of the in-progress step; earlier steps render as done. */
+    current?: number;
+    orientation?: 'horizontal' | 'vertical';
+    style?: CSSProperties;
+}
+/**
+ * Multi-step progress — done (check) / current (persimmon) / upcoming (muted).
+ * @startingPoint section="Navigation" subtitle="Onboarding step progress" viewport="560x120"
+ */
+declare function Stepper({ steps, current, orientation, style, ...rest }: StepperProps): react.JSX.Element;
+
+export { type Step, Stepper, type StepperProps };

package/dist/components/navigation/Stepper.mjs

@@ -0,0 +1,53 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/components/navigation/Stepper.tsx
+function Stepper({ steps = [], current = 0, orientation = "horizontal", style, ...rest }) {
+  const vertical = orientation === "vertical";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...rest,
+      style: {
+        display: "flex",
+        flexDirection: vertical ? "column" : "row",
+        alignItems: vertical ? "stretch" : "flex-start",
+        gap: 0,
+        ...style
+      },
+      children: steps.map((s, i) => {
+        const done = i < current, active = i === current;
+        const accent = done || active;
+        return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: vertical ? "row" : "column", alignItems: vertical ? "flex-start" : "stretch", flex: vertical ? "none" : 1, minWidth: 0, gap: vertical ? 12 : 0 }, children: [
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: vertical ? "column" : "row", alignItems: "center", gap: vertical ? 6 : 10, ...vertical ? {} : { width: "100%" } }, children: [
+            /* @__PURE__ */ jsx("span", { style: {
+              flex: "0 0 auto",
+              width: 26,
+              height: 26,
+              display: "grid",
+              placeItems: "center",
+              borderRadius: "var(--dt-radius-sm)",
+              fontFamily: "var(--dt-font-mono)",
+              fontSize: 12,
+              fontWeight: 700,
+              background: done ? "var(--dt-accent)" : active ? "var(--dt-tint-accent)" : "var(--dt-surface-sunken)",
+              color: done ? "#fff" : active ? "var(--dt-accent)" : "var(--dt-muted)",
+              boxShadow: active ? "inset 0 0 0 1.5px var(--dt-accent)" : done ? "none" : "inset 0 0 0 1px var(--dt-border-strong)"
+            }, children: done ? /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M20 6L9 17l-5-5", stroke: "currentColor", strokeWidth: "2.6", strokeLinecap: "round", strokeLinejoin: "round" }) }) : i + 1 }),
+            i < steps.length - 1 ? /* @__PURE__ */ jsx("span", { style: {
+              background: done ? "var(--dt-accent)" : "var(--dt-border-strong)",
+              ...vertical ? { width: 2, minHeight: 22, flex: 1, marginTop: 2 } : { height: 2, flex: 1 }
+            } }) : null
+          ] }),
+          /* @__PURE__ */ jsxs("div", { style: { padding: vertical ? "2px 0 16px" : "10px 14px 0 0" }, children: [
+            /* @__PURE__ */ jsx("div", { style: { fontSize: 13.5, fontWeight: accent ? 650 : 500, color: accent ? "var(--dt-ink-strong)" : "var(--dt-muted)" }, children: s.label }),
+            s.description ? /* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "var(--dt-muted)", marginTop: 3, lineHeight: 1.45 }, children: s.description }) : null
+          ] })
+        ] }, i);
+      })
+    }
+  );
+}
+
+export { Stepper };
+//# sourceMappingURL=Stepper.mjs.map
+//# sourceMappingURL=Stepper.mjs.map

package/dist/components/navigation/Stepper.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/navigation/Stepper.tsx"],"names":[],"mappings":"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","file":"Stepper.mjs","sourcesContent":["import type { CSSProperties, HTMLAttributes } from 'react';\n\nexport interface Step {\n  label: string;\n  description?: string;\n}\n\nexport interface StepperProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {\n  steps?: Step[];\n  /** Index of the in-progress step; earlier steps render as done. */\n  current?: number;\n  orientation?: 'horizontal' | 'vertical';\n  style?: CSSProperties;\n}\n\n/**\n * Multi-step progress — done (check) / current (persimmon) / upcoming (muted).\n * @startingPoint section=\"Navigation\" subtitle=\"Onboarding step progress\" viewport=\"560x120\"\n */\nexport function Stepper({ steps = [], current = 0, orientation = 'horizontal', style, ...rest }: StepperProps) {\n  const vertical = orientation === 'vertical';\n  return (\n    <div\n      {...rest}\n      style={{\n        display: 'flex', flexDirection: vertical ? 'column' : 'row',\n        alignItems: vertical ? 'stretch' : 'flex-start', gap: 0, ...style,\n      }}\n    >\n      {steps.map((s, i) => {\n        const done = i < current, active = i === current;\n        const accent = done || active;\n        return (\n          <div key={i} style={{ display: 'flex', flexDirection: vertical ? 'row' : 'column', alignItems: vertical ? 'flex-start' : 'stretch', flex: vertical ? 'none' : 1, minWidth: 0, gap: vertical ? 12 : 0 }}>\n            {/* marker + connector */}\n            <div style={{ display: 'flex', flexDirection: vertical ? 'column' : 'row', alignItems: 'center', gap: vertical ? 6 : 10, ...(vertical ? {} : { width: '100%' }) }}>\n              <span style={{\n                flex: '0 0 auto', width: 26, height: 26, display: 'grid', placeItems: 'center',\n                borderRadius: 'var(--dt-radius-sm)', fontFamily: 'var(--dt-font-mono)', fontSize: 12, fontWeight: 700,\n                background: done ? 'var(--dt-accent)' : active ? 'var(--dt-tint-accent)' : 'var(--dt-surface-sunken)',\n                color: done ? '#fff' : active ? 'var(--dt-accent)' : 'var(--dt-muted)',\n                boxShadow: active ? 'inset 0 0 0 1.5px var(--dt-accent)' : done ? 'none' : 'inset 0 0 0 1px var(--dt-border-strong)',\n              }}>\n                {done ? <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\"><path d=\"M20 6L9 17l-5-5\" stroke=\"currentColor\" strokeWidth=\"2.6\" strokeLinecap=\"round\" strokeLinejoin=\"round\" /></svg> : i + 1}\n              </span>\n              {i < steps.length - 1 ? (\n                <span style={{\n                  background: done ? 'var(--dt-accent)' : 'var(--dt-border-strong)',\n                  ...(vertical ? { width: 2, minHeight: 22, flex: 1, marginTop: 2 } : { height: 2, flex: 1 }),\n                }} />\n              ) : null}\n            </div>\n            {/* label */}\n            <div style={{ padding: vertical ? '2px 0 16px' : '10px 14px 0 0' }}>\n              <div style={{ fontSize: 13.5, fontWeight: accent ? 650 : 500, color: accent ? 'var(--dt-ink-strong)' : 'var(--dt-muted)' }}>{s.label}</div>\n              {s.description ? <div style={{ fontSize: 12, color: 'var(--dt-muted)', marginTop: 3, lineHeight: 1.45 }}>{s.description}</div> : null}\n            </div>\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n"]}