@bridger-kr/react 0.1.0

package/dist/components/forms/Slider.d.cts

@@ -0,0 +1,24 @@
+import * as react from 'react';
+import { InputHTMLAttributes, CSSProperties } from 'react';
+
+interface SliderProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'defaultValue' | 'id' | 'max' | 'min' | 'onChange' | 'step' | 'style' | 'value'> {
+    label?: string;
+    min?: number;
+    max?: number;
+    step?: number;
+    value?: number;
+    defaultValue?: number;
+    onChange?: (value: number) => void;
+    /** Suffix shown after the value readout, e.g. "회/일" or "ms". */
+    unit?: string;
+    hint?: string;
+    id?: string;
+    style?: CSSProperties;
+}
+/**
+ * Numeric range input — hairline track, persimmon fill, tabular value readout.
+ * @startingPoint section="Forms" subtitle="Numeric range with tabular readout" viewport="420x90"
+ */
+declare function Slider({ label, min, max, step, value, defaultValue, onChange, unit, hint, id, style, }: SliderProps): react.JSX.Element;
+
+export { Slider, type SliderProps };

package/dist/components/forms/Slider.d.ts

@@ -0,0 +1,24 @@
+import * as react from 'react';
+import { InputHTMLAttributes, CSSProperties } from 'react';
+
+interface SliderProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'defaultValue' | 'id' | 'max' | 'min' | 'onChange' | 'step' | 'style' | 'value'> {
+    label?: string;
+    min?: number;
+    max?: number;
+    step?: number;
+    value?: number;
+    defaultValue?: number;
+    onChange?: (value: number) => void;
+    /** Suffix shown after the value readout, e.g. "회/일" or "ms". */
+    unit?: string;
+    hint?: string;
+    id?: string;
+    style?: CSSProperties;
+}
+/**
+ * Numeric range input — hairline track, persimmon fill, tabular value readout.
+ * @startingPoint section="Forms" subtitle="Numeric range with tabular readout" viewport="420x90"
+ */
+declare function Slider({ label, min, max, step, value, defaultValue, onChange, unit, hint, id, style, }: SliderProps): react.JSX.Element;
+
+export { Slider, type SliderProps };

package/dist/components/forms/Slider.mjs

@@ -0,0 +1,127 @@
+import { useState, useRef } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/forms/Slider.tsx
+function Slider({
+  label,
+  min = 0,
+  max = 100,
+  step = 1,
+  value,
+  defaultValue,
+  onChange,
+  unit = "",
+  hint,
+  id,
+  style
+}) {
+  const [internal, setInternal] = useState(defaultValue ?? min);
+  const v = value != null ? value : internal;
+  const trackRef = useRef(null);
+  const sId = id || (label ? `sl-${label.replace(/\s+/g, "-")}` : void 0);
+  const pct = (v - min) / (max - min) * 100;
+  const set = (nv) => {
+    const clamped = Math.min(max, Math.max(min, Math.round(nv / step) * step));
+    if (value == null) setInternal(clamped);
+    onChange?.(clamped);
+  };
+  const fromClientX = (clientX) => {
+    const r = trackRef.current.getBoundingClientRect();
+    const ratio = Math.min(1, Math.max(0, (clientX - r.left) / r.width));
+    return min + ratio * (max - min);
+  };
+  const onPointerDown = (e) => {
+    e.preventDefault();
+    set(fromClientX(e.clientX));
+    const move = (ev) => set(fromClientX(ev.clientX));
+    const up = () => {
+      window.removeEventListener("pointermove", move);
+      window.removeEventListener("pointerup", up);
+    };
+    window.addEventListener("pointermove", move);
+    window.addEventListener("pointerup", up);
+  };
+  const onKey = (e) => {
+    if (e.key === "ArrowRight" || e.key === "ArrowUp") {
+      e.preventDefault();
+      set(v + step);
+    } else if (e.key === "ArrowLeft" || e.key === "ArrowDown") {
+      e.preventDefault();
+      set(v - step);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { style: { display: "grid", gap: 9, ...style }, children: [
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "baseline", justifyContent: "space-between" }, children: [
+      label ? /* @__PURE__ */ jsx("label", { htmlFor: sId, style: { fontSize: 13, fontWeight: 600, color: "var(--dt-muted-strong)" }, children: label }) : /* @__PURE__ */ jsx("span", {}),
+      /* @__PURE__ */ jsxs(
+        "span",
+        {
+          style: {
+            fontFamily: "var(--dt-font-mono)",
+            fontSize: 13,
+            fontWeight: 600,
+            color: "var(--dt-ink-strong)",
+            fontVariantNumeric: "tabular-nums"
+          },
+          children: [
+            v,
+            unit ? /* @__PURE__ */ jsx("span", { style: { color: "var(--dt-muted)", fontWeight: 400 }, children: unit }) : null
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: trackRef,
+        id: sId,
+        role: "slider",
+        tabIndex: 0,
+        "aria-valuemin": min,
+        "aria-valuemax": max,
+        "aria-valuenow": v,
+        onPointerDown,
+        onKeyDown: onKey,
+        style: { position: "relative", height: 20, display: "flex", alignItems: "center", cursor: "pointer", outline: "none" },
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                left: 0,
+                right: 0,
+                height: 4,
+                borderRadius: 2,
+                background: "var(--dt-surface-sunken)",
+                boxShadow: "inset 0 0 0 1px var(--dt-border-strong)"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { style: { position: "absolute", left: 0, width: `${pct}%`, height: 4, borderRadius: 2, background: "var(--dt-accent)" } }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                left: `${pct}%`,
+                transform: "translateX(-50%)",
+                width: 16,
+                height: 16,
+                borderRadius: "var(--dt-radius-sm)",
+                background: "var(--dt-surface)",
+                boxShadow: "0 0 0 1.5px var(--dt-accent)",
+                border: "3px solid var(--dt-surface)"
+              }
+            }
+          )
+        ]
+      }
+    ),
+    hint ? /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "var(--dt-muted)" }, children: hint }) : null
+  ] });
+}
+
+export { Slider };
+//# sourceMappingURL=Slider.mjs.map
+//# sourceMappingURL=Slider.mjs.map

package/dist/components/forms/Slider.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/forms/Slider.tsx"],"names":[],"mappings":"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","file":"Slider.mjs","sourcesContent":["import { useRef, useState } from 'react';\nimport type { CSSProperties, InputHTMLAttributes, KeyboardEvent, PointerEvent } from 'react';\n\nexport interface SliderProps\n  extends Omit<\n    InputHTMLAttributes<HTMLInputElement>,\n    'defaultValue' | 'id' | 'max' | 'min' | 'onChange' | 'step' | 'style' | 'value'\n  > {\n  label?: string;\n  min?: number;\n  max?: number;\n  step?: number;\n  value?: number;\n  defaultValue?: number;\n  onChange?: (value: number) => void;\n  /** Suffix shown after the value readout, e.g. \"회/일\" or \"ms\". */\n  unit?: string;\n  hint?: string;\n  id?: string;\n  style?: CSSProperties;\n}\n\n/**\n * Numeric range input — hairline track, persimmon fill, tabular value readout.\n * @startingPoint section=\"Forms\" subtitle=\"Numeric range with tabular readout\" viewport=\"420x90\"\n */\nexport function Slider({\n  label,\n  min = 0,\n  max = 100,\n  step = 1,\n  value,\n  defaultValue,\n  onChange,\n  unit = '',\n  hint,\n  id,\n  style,\n}: SliderProps) {\n  const [internal, setInternal] = useState(defaultValue ?? min);\n  const v = value != null ? value : internal;\n  const trackRef = useRef<HTMLDivElement>(null);\n  const sId = id || (label ? `sl-${label.replace(/\\s+/g, '-')}` : undefined);\n  const pct = ((v - min) / (max - min)) * 100;\n\n  const set = (nv: number) => {\n    const clamped = Math.min(max, Math.max(min, Math.round(nv / step) * step));\n    if (value == null) setInternal(clamped);\n    onChange?.(clamped);\n  };\n\n  const fromClientX = (clientX: number) => {\n    const r = trackRef.current!.getBoundingClientRect();\n    const ratio = Math.min(1, Math.max(0, (clientX - r.left) / r.width));\n    return min + ratio * (max - min);\n  };\n\n  const onPointerDown = (e: PointerEvent<HTMLDivElement>) => {\n    e.preventDefault();\n    set(fromClientX(e.clientX));\n    const move = (ev: globalThis.PointerEvent) => set(fromClientX(ev.clientX));\n    const up = () => {\n      window.removeEventListener('pointermove', move);\n      window.removeEventListener('pointerup', up);\n    };\n    window.addEventListener('pointermove', move);\n    window.addEventListener('pointerup', up);\n  };\n\n  const onKey = (e: KeyboardEvent<HTMLDivElement>) => {\n    if (e.key === 'ArrowRight' || e.key === 'ArrowUp') {\n      e.preventDefault();\n      set(v + step);\n    } else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') {\n      e.preventDefault();\n      set(v - step);\n    }\n  };\n\n  return (\n    <div style={{ display: 'grid', gap: 9, ...style }}>\n      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>\n          {label ? (\n            <label htmlFor={sId} style={{ fontSize: 13, fontWeight: 600, color: 'var(--dt-muted-strong)' }}>\n              {label}\n            </label>\n          ) : (\n            <span />\n          )}\n          <span\n            style={{\n              fontFamily: 'var(--dt-font-mono)',\n              fontSize: 13,\n              fontWeight: 600,\n              color: 'var(--dt-ink-strong)',\n              fontVariantNumeric: 'tabular-nums',\n            }}\n          >\n            {v}\n            {unit ? <span style={{ color: 'var(--dt-muted)', fontWeight: 400 }}>{unit}</span> : null}\n          </span>\n        </div>\n      <div\n        ref={trackRef}\n        id={sId}\n        role=\"slider\"\n        tabIndex={0}\n        aria-valuemin={min}\n        aria-valuemax={max}\n        aria-valuenow={v}\n        onPointerDown={onPointerDown}\n        onKeyDown={onKey}\n        style={{ position: 'relative', height: 20, display: 'flex', alignItems: 'center', cursor: 'pointer', outline: 'none' }}\n      >\n        <div\n          style={{\n            position: 'absolute',\n            left: 0,\n            right: 0,\n            height: 4,\n            borderRadius: 2,\n            background: 'var(--dt-surface-sunken)',\n            boxShadow: 'inset 0 0 0 1px var(--dt-border-strong)',\n          }}\n        />\n        <div style={{ position: 'absolute', left: 0, width: `${pct}%`, height: 4, borderRadius: 2, background: 'var(--dt-accent)' }} />\n        <div\n          style={{\n            position: 'absolute',\n            left: `${pct}%`,\n            transform: 'translateX(-50%)',\n            width: 16,\n            height: 16,\n            borderRadius: 'var(--dt-radius-sm)',\n            background: 'var(--dt-surface)',\n            boxShadow: '0 0 0 1.5px var(--dt-accent)',\n            border: '3px solid var(--dt-surface)',\n          }}\n        />\n      </div>\n      {hint ? <span style={{ fontSize: 12, color: 'var(--dt-muted)' }}>{hint}</span> : null}\n    </div>\n  );\n}\n"]}

package/dist/components/forms/Switch.cjs

@@ -0,0 +1,101 @@
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/forms/Switch.tsx
+function Switch({ checked, defaultChecked, onChange, disabled, label, style }) {
+  const [internal, setInternal] = react.useState(defaultChecked ?? false);
+  const isOn = checked !== void 0 ? checked : internal;
+  const toggle = () => {
+    if (disabled) return;
+    if (checked === void 0) setInternal((v) => !v);
+    onChange?.(!isOn);
+  };
+  const sw = /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      role: "switch",
+      "aria-checked": isOn,
+      disabled,
+      onClick: toggle,
+      style: {
+        width: 38,
+        height: 22,
+        flex: "0 0 auto",
+        borderRadius: 9999,
+        border: "none",
+        padding: 2,
+        background: isOn ? "var(--dt-accent)" : "var(--dt-border-strong)",
+        cursor: disabled ? "not-allowed" : "pointer",
+        opacity: disabled ? 0.55 : 1,
+        transition: "background-color 160ms var(--dt-ease)",
+        display: "inline-flex"
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          style: {
+            width: 18,
+            height: 18,
+            borderRadius: 9999,
+            background: "#fff",
+            boxShadow: "0 1px 2px rgba(0,0,0,0.25)",
+            transform: isOn ? "translateX(16px)" : "translateX(0)",
+            transition: "transform 160ms var(--dt-ease)"
+          }
+        }
+      )
+    }
+  );
+  if (!label) return sw;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "label",
+    {
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 10,
+        cursor: disabled ? "not-allowed" : "pointer",
+        ...style
+      },
+      children: [
+        sw,
+        /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 14, color: "var(--dt-ink)" }, children: label })
+      ]
+    }
+  );
+}
+function ToggleSwitch({
+  checked,
+  label,
+  onChange,
+  disabled = false,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      role: "switch",
+      "aria-checked": checked,
+      "aria-label": label,
+      disabled,
+      onClick: () => onChange(!checked),
+      className: `relative inline-flex h-6 w-11 shrink-0 items-center rounded-full border transition-colors disabled:cursor-not-allowed disabled:opacity-50 ${checked ? "border-success/40 bg-success/80" : "border-line-strong bg-raised"} ${className}`,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          "aria-hidden": true,
+          className: `inline-block h-4 w-4 transform rounded-full bg-surface shadow-dtSubtle transition-transform ${checked ? "translate-x-6" : "translate-x-1"}`
+        }
+      )
+    }
+  );
+}
+
+exports.Switch = Switch;
+exports.ToggleSwitch = ToggleSwitch;
+//# sourceMappingURL=Switch.cjs.map
+//# sourceMappingURL=Switch.cjs.map

package/dist/components/forms/Switch.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/forms/Switch.tsx"],"names":["useState","jsx","jsxs"],"mappings":"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","file":"Switch.cjs","sourcesContent":["import { useState } from 'react';\nimport type { CSSProperties, InputHTMLAttributes, ReactNode } from 'react';\n\nexport interface SwitchProps\n  extends Omit<\n    InputHTMLAttributes<HTMLInputElement>,\n    'checked' | 'defaultChecked' | 'disabled' | 'id' | 'onChange' | 'style'\n  > {\n  checked?: boolean;\n  defaultChecked?: boolean;\n  onChange?: (checked: boolean) => void;\n  disabled?: boolean;\n  label?: ReactNode;\n  id?: string;\n  style?: CSSProperties;\n}\n\n/** Toggle switch for instant on/off settings — persimmon track when on. */\nexport function Switch({ checked, defaultChecked, onChange, disabled, label, style }: SwitchProps) {\n  const [internal, setInternal] = useState(defaultChecked ?? false);\n  const isOn = checked !== undefined ? checked : internal;\n  const toggle = () => {\n    if (disabled) return;\n    if (checked === undefined) setInternal((v) => !v);\n    onChange?.(!isOn);\n  };\n  const sw = (\n    <button\n      type=\"button\"\n      role=\"switch\"\n      aria-checked={isOn}\n      disabled={disabled}\n      onClick={toggle}\n      style={{\n        width: 38,\n        height: 22,\n        flex: '0 0 auto',\n        borderRadius: 9999,\n        border: 'none',\n        padding: 2,\n        background: isOn ? 'var(--dt-accent)' : 'var(--dt-border-strong)',\n        cursor: disabled ? 'not-allowed' : 'pointer',\n        opacity: disabled ? 0.55 : 1,\n        transition: 'background-color 160ms var(--dt-ease)',\n        display: 'inline-flex',\n      }}\n    >\n      <span\n        style={{\n          width: 18,\n          height: 18,\n          borderRadius: 9999,\n          background: '#fff',\n          boxShadow: '0 1px 2px rgba(0,0,0,0.25)',\n          transform: isOn ? 'translateX(16px)' : 'translateX(0)',\n          transition: 'transform 160ms var(--dt-ease)',\n        }}\n      />\n    </button>\n  );\n  if (!label) return sw;\n  return (\n    <label\n      style={{\n        display: 'inline-flex',\n        alignItems: 'center',\n        gap: 10,\n        cursor: disabled ? 'not-allowed' : 'pointer',\n        ...style,\n      }}\n    >\n      {sw}\n      <span style={{ fontSize: 14, color: 'var(--dt-ink)' }}>{label}</span>\n    </label>\n  );\n}\n\nexport interface ToggleSwitchProps {\n  readonly checked: boolean;\n  readonly label: string;\n  readonly onChange: (next: boolean) => void;\n  readonly disabled?: boolean;\n  readonly className?: string;\n}\n\nexport function ToggleSwitch({\n  checked,\n  label,\n  onChange,\n  disabled = false,\n  className = '',\n}: ToggleSwitchProps) {\n  return (\n    <button\n      type=\"button\"\n      role=\"switch\"\n      aria-checked={checked}\n      aria-label={label}\n      disabled={disabled}\n      onClick={() => onChange(!checked)}\n      className={`relative inline-flex h-6 w-11 shrink-0 items-center rounded-full border transition-colors disabled:cursor-not-allowed disabled:opacity-50 ${\n        checked ? 'border-success/40 bg-success/80' : 'border-line-strong bg-raised'\n      } ${className}`}\n    >\n      <span\n        aria-hidden\n        className={`inline-block h-4 w-4 transform rounded-full bg-surface shadow-dtSubtle transition-transform ${\n          checked ? 'translate-x-6' : 'translate-x-1'\n        }`}\n      />\n    </button>\n  );\n}\n"]}

package/dist/components/forms/Switch.d.cts

@@ -0,0 +1,24 @@
+import * as react from 'react';
+import { InputHTMLAttributes, ReactNode, CSSProperties } from 'react';
+
+interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'checked' | 'defaultChecked' | 'disabled' | 'id' | 'onChange' | 'style'> {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    label?: ReactNode;
+    id?: string;
+    style?: CSSProperties;
+}
+/** Toggle switch for instant on/off settings — persimmon track when on. */
+declare function Switch({ checked, defaultChecked, onChange, disabled, label, style }: SwitchProps): react.JSX.Element;
+interface ToggleSwitchProps {
+    readonly checked: boolean;
+    readonly label: string;
+    readonly onChange: (next: boolean) => void;
+    readonly disabled?: boolean;
+    readonly className?: string;
+}
+declare function ToggleSwitch({ checked, label, onChange, disabled, className, }: ToggleSwitchProps): react.JSX.Element;
+
+export { Switch, type SwitchProps, ToggleSwitch, type ToggleSwitchProps };

package/dist/components/forms/Switch.d.ts

@@ -0,0 +1,24 @@
+import * as react from 'react';
+import { InputHTMLAttributes, ReactNode, CSSProperties } from 'react';
+
+interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'checked' | 'defaultChecked' | 'disabled' | 'id' | 'onChange' | 'style'> {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    label?: ReactNode;
+    id?: string;
+    style?: CSSProperties;
+}
+/** Toggle switch for instant on/off settings — persimmon track when on. */
+declare function Switch({ checked, defaultChecked, onChange, disabled, label, style }: SwitchProps): react.JSX.Element;
+interface ToggleSwitchProps {
+    readonly checked: boolean;
+    readonly label: string;
+    readonly onChange: (next: boolean) => void;
+    readonly disabled?: boolean;
+    readonly className?: string;
+}
+declare function ToggleSwitch({ checked, label, onChange, disabled, className, }: ToggleSwitchProps): react.JSX.Element;
+
+export { Switch, type SwitchProps, ToggleSwitch, type ToggleSwitchProps };

package/dist/components/forms/Switch.mjs

@@ -0,0 +1,98 @@
+import { useState } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/forms/Switch.tsx
+function Switch({ checked, defaultChecked, onChange, disabled, label, style }) {
+  const [internal, setInternal] = useState(defaultChecked ?? false);
+  const isOn = checked !== void 0 ? checked : internal;
+  const toggle = () => {
+    if (disabled) return;
+    if (checked === void 0) setInternal((v) => !v);
+    onChange?.(!isOn);
+  };
+  const sw = /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      role: "switch",
+      "aria-checked": isOn,
+      disabled,
+      onClick: toggle,
+      style: {
+        width: 38,
+        height: 22,
+        flex: "0 0 auto",
+        borderRadius: 9999,
+        border: "none",
+        padding: 2,
+        background: isOn ? "var(--dt-accent)" : "var(--dt-border-strong)",
+        cursor: disabled ? "not-allowed" : "pointer",
+        opacity: disabled ? 0.55 : 1,
+        transition: "background-color 160ms var(--dt-ease)",
+        display: "inline-flex"
+      },
+      children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          style: {
+            width: 18,
+            height: 18,
+            borderRadius: 9999,
+            background: "#fff",
+            boxShadow: "0 1px 2px rgba(0,0,0,0.25)",
+            transform: isOn ? "translateX(16px)" : "translateX(0)",
+            transition: "transform 160ms var(--dt-ease)"
+          }
+        }
+      )
+    }
+  );
+  if (!label) return sw;
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 10,
+        cursor: disabled ? "not-allowed" : "pointer",
+        ...style
+      },
+      children: [
+        sw,
+        /* @__PURE__ */ jsx("span", { style: { fontSize: 14, color: "var(--dt-ink)" }, children: label })
+      ]
+    }
+  );
+}
+function ToggleSwitch({
+  checked,
+  label,
+  onChange,
+  disabled = false,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      role: "switch",
+      "aria-checked": checked,
+      "aria-label": label,
+      disabled,
+      onClick: () => onChange(!checked),
+      className: `relative inline-flex h-6 w-11 shrink-0 items-center rounded-full border transition-colors disabled:cursor-not-allowed disabled:opacity-50 ${checked ? "border-success/40 bg-success/80" : "border-line-strong bg-raised"} ${className}`,
+      children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": true,
+          className: `inline-block h-4 w-4 transform rounded-full bg-surface shadow-dtSubtle transition-transform ${checked ? "translate-x-6" : "translate-x-1"}`
+        }
+      )
+    }
+  );
+}
+
+export { Switch, ToggleSwitch };
+//# sourceMappingURL=Switch.mjs.map
+//# sourceMappingURL=Switch.mjs.map

package/dist/components/forms/Switch.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/forms/Switch.tsx"],"names":[],"mappings":"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","file":"Switch.mjs","sourcesContent":["import { useState } from 'react';\nimport type { CSSProperties, InputHTMLAttributes, ReactNode } from 'react';\n\nexport interface SwitchProps\n  extends Omit<\n    InputHTMLAttributes<HTMLInputElement>,\n    'checked' | 'defaultChecked' | 'disabled' | 'id' | 'onChange' | 'style'\n  > {\n  checked?: boolean;\n  defaultChecked?: boolean;\n  onChange?: (checked: boolean) => void;\n  disabled?: boolean;\n  label?: ReactNode;\n  id?: string;\n  style?: CSSProperties;\n}\n\n/** Toggle switch for instant on/off settings — persimmon track when on. */\nexport function Switch({ checked, defaultChecked, onChange, disabled, label, style }: SwitchProps) {\n  const [internal, setInternal] = useState(defaultChecked ?? false);\n  const isOn = checked !== undefined ? checked : internal;\n  const toggle = () => {\n    if (disabled) return;\n    if (checked === undefined) setInternal((v) => !v);\n    onChange?.(!isOn);\n  };\n  const sw = (\n    <button\n      type=\"button\"\n      role=\"switch\"\n      aria-checked={isOn}\n      disabled={disabled}\n      onClick={toggle}\n      style={{\n        width: 38,\n        height: 22,\n        flex: '0 0 auto',\n        borderRadius: 9999,\n        border: 'none',\n        padding: 2,\n        background: isOn ? 'var(--dt-accent)' : 'var(--dt-border-strong)',\n        cursor: disabled ? 'not-allowed' : 'pointer',\n        opacity: disabled ? 0.55 : 1,\n        transition: 'background-color 160ms var(--dt-ease)',\n        display: 'inline-flex',\n      }}\n    >\n      <span\n        style={{\n          width: 18,\n          height: 18,\n          borderRadius: 9999,\n          background: '#fff',\n          boxShadow: '0 1px 2px rgba(0,0,0,0.25)',\n          transform: isOn ? 'translateX(16px)' : 'translateX(0)',\n          transition: 'transform 160ms var(--dt-ease)',\n        }}\n      />\n    </button>\n  );\n  if (!label) return sw;\n  return (\n    <label\n      style={{\n        display: 'inline-flex',\n        alignItems: 'center',\n        gap: 10,\n        cursor: disabled ? 'not-allowed' : 'pointer',\n        ...style,\n      }}\n    >\n      {sw}\n      <span style={{ fontSize: 14, color: 'var(--dt-ink)' }}>{label}</span>\n    </label>\n  );\n}\n\nexport interface ToggleSwitchProps {\n  readonly checked: boolean;\n  readonly label: string;\n  readonly onChange: (next: boolean) => void;\n  readonly disabled?: boolean;\n  readonly className?: string;\n}\n\nexport function ToggleSwitch({\n  checked,\n  label,\n  onChange,\n  disabled = false,\n  className = '',\n}: ToggleSwitchProps) {\n  return (\n    <button\n      type=\"button\"\n      role=\"switch\"\n      aria-checked={checked}\n      aria-label={label}\n      disabled={disabled}\n      onClick={() => onChange(!checked)}\n      className={`relative inline-flex h-6 w-11 shrink-0 items-center rounded-full border transition-colors disabled:cursor-not-allowed disabled:opacity-50 ${\n        checked ? 'border-success/40 bg-success/80' : 'border-line-strong bg-raised'\n      } ${className}`}\n    >\n      <span\n        aria-hidden\n        className={`inline-block h-4 w-4 transform rounded-full bg-surface shadow-dtSubtle transition-transform ${\n          checked ? 'translate-x-6' : 'translate-x-1'\n        }`}\n      />\n    </button>\n  );\n}\n"]}

package/dist/components/forms/Textarea.cjs

@@ -0,0 +1,35 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/forms/Textarea.tsx
+function Textarea({ label, hint, rows = 4, mono = false, id, style, ...rest }) {
+  const taId = id || (label ? `ta-${label.replace(/\s+/g, "-")}` : void 0);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "grid", gap: 7 }, children: [
+    label ? /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: taId, style: { fontSize: 13, fontWeight: 600, color: "var(--dt-muted-strong)" }, children: label }) : null,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "textarea",
+      {
+        id: taId,
+        rows,
+        className: "dt-field",
+        style: {
+          width: "100%",
+          resize: "vertical",
+          padding: "11px 13px",
+          fontSize: mono ? 13 : 14,
+          fontFamily: mono ? "var(--dt-font-mono)" : "inherit",
+          lineHeight: 1.55,
+          color: "var(--dt-ink-strong)",
+          ...style
+        },
+        ...rest
+      }
+    ),
+    hint ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 12, color: "var(--dt-muted)" }, children: hint }) : null
+  ] });
+}
+
+exports.Textarea = Textarea;
+//# sourceMappingURL=Textarea.cjs.map
+//# sourceMappingURL=Textarea.cjs.map

package/dist/components/forms/Textarea.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/forms/Textarea.tsx"],"names":["jsxs","jsx"],"mappings":";;;;;AAYO,SAAS,QAAA,CAAS,EAAE,KAAA,EAAO,IAAA,EAAM,IAAA,GAAO,CAAA,EAAG,IAAA,GAAO,KAAA,EAAO,EAAA,EAAI,KAAA,EAAO,GAAG,IAAA,EAAK,EAAkB;AACnG,EAAA,MAAM,IAAA,GAAO,OAAO,KAAA,GAAQ,CAAA,GAAA,EAAM,MAAM,OAAA,CAAQ,MAAA,EAAQ,GAAG,CAAC,CAAA,CAAA,GAAK,MAAA,CAAA;AACjE,EAAA,uBACEA,eAAA,CAAC,SAAI,KAAA,EAAO,EAAE,SAAS,MAAA,EAAQ,GAAA,EAAK,GAAE,EACnC,QAAA,EAAA;AAAA,IAAA,KAAA,mBACCC,cAAA,CAAC,OAAA,EAAA,EAAM,OAAA,EAAS,IAAA,EAAM,OAAO,EAAE,QAAA,EAAU,EAAA,EAAI,UAAA,EAAY,GAAA,EAAK,KAAA,EAAO,wBAAA,EAAyB,EAC3F,iBACH,CAAA,GACE,IAAA;AAAA,oBACJA,cAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,EAAA,EAAI,IAAA;AAAA,QACJ,IAAA;AAAA,QACA,SAAA,EAAU,UAAA;AAAA,QACV,KAAA,EAAO;AAAA,UACL,KAAA,EAAO,MAAA;AAAA,UACP,MAAA,EAAQ,UAAA;AAAA,UACR,OAAA,EAAS,WAAA;AAAA,UACT,QAAA,EAAU,OAAO,EAAA,GAAK,EAAA;AAAA,UACtB,UAAA,EAAY,OAAO,qBAAA,GAAwB,SAAA;AAAA,UAC3C,UAAA,EAAY,IAAA;AAAA,UACZ,KAAA,EAAO,sBAAA;AAAA,UACP,GAAG;AAAA,SACL;AAAA,QACC,GAAG;AAAA;AAAA,KACN;AAAA,IACC,IAAA,mBAAOA,cAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAO,EAAE,QAAA,EAAU,EAAA,EAAI,KAAA,EAAO,iBAAA,EAAkB,EAAI,QAAA,EAAA,IAAA,EAAK,CAAA,GAAU;AAAA,GAAA,EACnF,CAAA;AAEJ","file":"Textarea.cjs","sourcesContent":["import type { CSSProperties, TextareaHTMLAttributes } from 'react';\n\nexport interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'style'> {\n  label?: string;\n  hint?: string;\n  rows?: number;\n  /** Render in JetBrains Mono (for JSON / payloads). */\n  mono?: boolean;\n  style?: CSSProperties;\n}\n\n/** Multi-line text field with a persimmon focus ring. */\nexport function Textarea({ label, hint, rows = 4, mono = false, id, style, ...rest }: TextareaProps) {\n  const taId = id || (label ? `ta-${label.replace(/\\s+/g, '-')}` : undefined);\n  return (\n    <div style={{ display: 'grid', gap: 7 }}>\n      {label ? (\n        <label htmlFor={taId} style={{ fontSize: 13, fontWeight: 600, color: 'var(--dt-muted-strong)' }}>\n          {label}\n        </label>\n      ) : null}\n      <textarea\n        id={taId}\n        rows={rows}\n        className=\"dt-field\"\n        style={{\n          width: '100%',\n          resize: 'vertical',\n          padding: '11px 13px',\n          fontSize: mono ? 13 : 14,\n          fontFamily: mono ? 'var(--dt-font-mono)' : 'inherit',\n          lineHeight: 1.55,\n          color: 'var(--dt-ink-strong)',\n          ...style,\n        }}\n        {...rest}\n      />\n      {hint ? <span style={{ fontSize: 12, color: 'var(--dt-muted)' }}>{hint}</span> : null}\n    </div>\n  );\n}\n"]}

package/dist/components/forms/Textarea.d.cts

@@ -0,0 +1,15 @@
+import * as react from 'react';
+import { TextareaHTMLAttributes, CSSProperties } from 'react';
+
+interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'style'> {
+    label?: string;
+    hint?: string;
+    rows?: number;
+    /** Render in JetBrains Mono (for JSON / payloads). */
+    mono?: boolean;
+    style?: CSSProperties;
+}
+/** Multi-line text field with a persimmon focus ring. */
+declare function Textarea({ label, hint, rows, mono, id, style, ...rest }: TextareaProps): react.JSX.Element;
+
+export { Textarea, type TextareaProps };

package/dist/components/forms/Textarea.d.ts

@@ -0,0 +1,15 @@
+import * as react from 'react';
+import { TextareaHTMLAttributes, CSSProperties } from 'react';
+
+interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'style'> {
+    label?: string;
+    hint?: string;
+    rows?: number;
+    /** Render in JetBrains Mono (for JSON / payloads). */
+    mono?: boolean;
+    style?: CSSProperties;
+}
+/** Multi-line text field with a persimmon focus ring. */
+declare function Textarea({ label, hint, rows, mono, id, style, ...rest }: TextareaProps): react.JSX.Element;
+
+export { Textarea, type TextareaProps };

package/dist/components/forms/Textarea.mjs

@@ -0,0 +1,33 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/forms/Textarea.tsx
+function Textarea({ label, hint, rows = 4, mono = false, id, style, ...rest }) {
+  const taId = id || (label ? `ta-${label.replace(/\s+/g, "-")}` : void 0);
+  return /* @__PURE__ */ jsxs("div", { style: { display: "grid", gap: 7 }, children: [
+    label ? /* @__PURE__ */ jsx("label", { htmlFor: taId, style: { fontSize: 13, fontWeight: 600, color: "var(--dt-muted-strong)" }, children: label }) : null,
+    /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        id: taId,
+        rows,
+        className: "dt-field",
+        style: {
+          width: "100%",
+          resize: "vertical",
+          padding: "11px 13px",
+          fontSize: mono ? 13 : 14,
+          fontFamily: mono ? "var(--dt-font-mono)" : "inherit",
+          lineHeight: 1.55,
+          color: "var(--dt-ink-strong)",
+          ...style
+        },
+        ...rest
+      }
+    ),
+    hint ? /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "var(--dt-muted)" }, children: hint }) : null
+  ] });
+}
+
+export { Textarea };
+//# sourceMappingURL=Textarea.mjs.map
+//# sourceMappingURL=Textarea.mjs.map

package/dist/components/forms/Textarea.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/forms/Textarea.tsx"],"names":[],"mappings":";;;AAYO,SAAS,QAAA,CAAS,EAAE,KAAA,EAAO,IAAA,EAAM,IAAA,GAAO,CAAA,EAAG,IAAA,GAAO,KAAA,EAAO,EAAA,EAAI,KAAA,EAAO,GAAG,IAAA,EAAK,EAAkB;AACnG,EAAA,MAAM,IAAA,GAAO,OAAO,KAAA,GAAQ,CAAA,GAAA,EAAM,MAAM,OAAA,CAAQ,MAAA,EAAQ,GAAG,CAAC,CAAA,CAAA,GAAK,MAAA,CAAA;AACjE,EAAA,uBACE,IAAA,CAAC,SAAI,KAAA,EAAO,EAAE,SAAS,MAAA,EAAQ,GAAA,EAAK,GAAE,EACnC,QAAA,EAAA;AAAA,IAAA,KAAA,mBACC,GAAA,CAAC,OAAA,EAAA,EAAM,OAAA,EAAS,IAAA,EAAM,OAAO,EAAE,QAAA,EAAU,EAAA,EAAI,UAAA,EAAY,GAAA,EAAK,KAAA,EAAO,wBAAA,EAAyB,EAC3F,iBACH,CAAA,GACE,IAAA;AAAA,oBACJ,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,EAAA,EAAI,IAAA;AAAA,QACJ,IAAA;AAAA,QACA,SAAA,EAAU,UAAA;AAAA,QACV,KAAA,EAAO;AAAA,UACL,KAAA,EAAO,MAAA;AAAA,UACP,MAAA,EAAQ,UAAA;AAAA,UACR,OAAA,EAAS,WAAA;AAAA,UACT,QAAA,EAAU,OAAO,EAAA,GAAK,EAAA;AAAA,UACtB,UAAA,EAAY,OAAO,qBAAA,GAAwB,SAAA;AAAA,UAC3C,UAAA,EAAY,IAAA;AAAA,UACZ,KAAA,EAAO,sBAAA;AAAA,UACP,GAAG;AAAA,SACL;AAAA,QACC,GAAG;AAAA;AAAA,KACN;AAAA,IACC,IAAA,mBAAO,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAO,EAAE,QAAA,EAAU,EAAA,EAAI,KAAA,EAAO,iBAAA,EAAkB,EAAI,QAAA,EAAA,IAAA,EAAK,CAAA,GAAU;AAAA,GAAA,EACnF,CAAA;AAEJ","file":"Textarea.mjs","sourcesContent":["import type { CSSProperties, TextareaHTMLAttributes } from 'react';\n\nexport interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'style'> {\n  label?: string;\n  hint?: string;\n  rows?: number;\n  /** Render in JetBrains Mono (for JSON / payloads). */\n  mono?: boolean;\n  style?: CSSProperties;\n}\n\n/** Multi-line text field with a persimmon focus ring. */\nexport function Textarea({ label, hint, rows = 4, mono = false, id, style, ...rest }: TextareaProps) {\n  const taId = id || (label ? `ta-${label.replace(/\\s+/g, '-')}` : undefined);\n  return (\n    <div style={{ display: 'grid', gap: 7 }}>\n      {label ? (\n        <label htmlFor={taId} style={{ fontSize: 13, fontWeight: 600, color: 'var(--dt-muted-strong)' }}>\n          {label}\n        </label>\n      ) : null}\n      <textarea\n        id={taId}\n        rows={rows}\n        className=\"dt-field\"\n        style={{\n          width: '100%',\n          resize: 'vertical',\n          padding: '11px 13px',\n          fontSize: mono ? 13 : 14,\n          fontFamily: mono ? 'var(--dt-font-mono)' : 'inherit',\n          lineHeight: 1.55,\n          color: 'var(--dt-ink-strong)',\n          ...style,\n        }}\n        {...rest}\n      />\n      {hint ? <span style={{ fontSize: 12, color: 'var(--dt-muted)' }}>{hint}</span> : null}\n    </div>\n  );\n}\n"]}

package/dist/components/navigation/Breadcrumb.cjs

@@ -0,0 +1,27 @@
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/navigation/Breadcrumb.tsx
+function Breadcrumb({ items = [], style, ...rest }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "nav",
+    {
+      ...rest,
+      "aria-label": "breadcrumb",
+      style: { display: "flex", alignItems: "center", gap: 6, flexWrap: "wrap", ...style },
+      children: items.map((it, i) => {
+        const last = i === items.length - 1;
+        return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
+          last ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-current": "page", style: { fontSize: 13, fontWeight: 600, color: "var(--dt-ink-strong)" }, children: it.label }) : /* @__PURE__ */ jsxRuntime.jsx("a", { href: it.href || "#", style: { fontSize: 13, fontWeight: 500, color: "var(--dt-muted)", textDecoration: "none" }, children: it.label }),
+          !last ? /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", style: { color: "var(--dt-border-strong)" }, "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 6l6 6-6 6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) : null
+        ] }, i);
+      })
+    }
+  );
+}
+
+exports.Breadcrumb = Breadcrumb;
+//# sourceMappingURL=Breadcrumb.cjs.map
+//# sourceMappingURL=Breadcrumb.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/navigation/Breadcrumb.tsx"],"names":["jsx","Fragment"],"mappings":";;;;;;AAcO,SAAS,UAAA,CAAW,EAAE,KAAA,GAAQ,IAAI,KAAA,EAAO,GAAG,MAAK,EAAoB;AAC1E,EAAA,uBACEA,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,YAAA,EAAW,YAAA;AAAA,MACX,KAAA,EAAO,EAAE,OAAA,EAAS,MAAA,EAAQ,UAAA,EAAY,QAAA,EAAU,GAAA,EAAK,CAAA,EAAG,QAAA,EAAU,MAAA,EAAQ,GAAG,KAAA,EAAM;AAAA,MAElF,QAAA,EAAA,KAAA,CAAM,GAAA,CAAI,CAAC,EAAA,EAAI,CAAA,KAAM;AACpB,QAAA,MAAM,IAAA,GAAO,CAAA,KAAM,KAAA,CAAM,MAAA,GAAS,CAAA;AAClC,QAAA,uCACGC,cAAA,EAAA,EACE,QAAA,EAAA;AAAA,UAAA,IAAA,mBACGD,cAAA,CAAC,MAAA,EAAA,EAAK,cAAA,EAAa,MAAA,EAAO,OAAO,EAAE,QAAA,EAAU,EAAA,EAAI,UAAA,EAAY,KAAK,KAAA,EAAO,sBAAA,EAAuB,EAAI,QAAA,EAAA,EAAA,CAAG,OAAM,CAAA,mBAC7GA,cAAA,CAAC,GAAA,EAAA,EAAE,IAAA,EAAM,EAAA,CAAG,IAAA,IAAQ,GAAA,EAAK,KAAA,EAAO,EAAE,QAAA,EAAU,EAAA,EAAI,UAAA,EAAY,GAAA,EAAK,OAAO,iBAAA,EAAmB,cAAA,EAAgB,MAAA,EAAO,EAAI,aAAG,KAAA,EAAM,CAAA;AAAA,UAClI,CAAC,IAAA,mBACAA,cAAA,CAAC,KAAA,EAAA,EAAI,OAAM,IAAA,EAAK,MAAA,EAAO,IAAA,EAAK,OAAA,EAAQ,WAAA,EAAY,IAAA,EAAK,MAAA,EAAO,KAAA,EAAO,EAAE,KAAA,EAAO,yBAAA,EAA0B,EAAG,aAAA,EAAY,MAAA,EACnH,QAAA,kBAAAA,cAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,gBAAe,MAAA,EAAO,cAAA,EAAe,WAAA,EAAY,GAAA,EAAI,aAAA,EAAc,OAAA,EAAQ,cAAA,EAAe,OAAA,EAAQ,GAC5G,CAAA,GACE;AAAA,SAAA,EAAA,EARS,CASf,CAAA;AAAA,MAEJ,CAAC;AAAA;AAAA,GACH;AAEJ","file":"Breadcrumb.cjs","sourcesContent":["import { Fragment } from 'react';\nimport type { CSSProperties, HTMLAttributes, ReactNode } from 'react';\n\nexport interface BreadcrumbItem {\n  label: ReactNode;\n  href?: string;\n}\n\nexport interface BreadcrumbProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {\n  items?: BreadcrumbItem[];\n  style?: CSSProperties;\n}\n\n/** Breadcrumb trail — last item is the current page. */\nexport function Breadcrumb({ items = [], style, ...rest }: BreadcrumbProps) {\n  return (\n    <nav\n      {...rest}\n      aria-label=\"breadcrumb\"\n      style={{ display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap', ...style }}\n    >\n      {items.map((it, i) => {\n        const last = i === items.length - 1;\n        return (\n          <Fragment key={i}>\n            {last\n              ? <span aria-current=\"page\" style={{ fontSize: 13, fontWeight: 600, color: 'var(--dt-ink-strong)' }}>{it.label}</span>\n              : <a href={it.href || '#'} style={{ fontSize: 13, fontWeight: 500, color: 'var(--dt-muted)', textDecoration: 'none' }}>{it.label}</a>}\n            {!last ? (\n              <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" style={{ color: 'var(--dt-border-strong)' }} aria-hidden=\"true\">\n                <path d=\"M9 6l6 6-6 6\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n              </svg>\n            ) : null}\n          </Fragment>\n        );\n      })}\n    </nav>\n  );\n}\n"]}

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

@@ -0,0 +1,15 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode, CSSProperties } from 'react';
+
+interface BreadcrumbItem {
+    label: ReactNode;
+    href?: string;
+}
+interface BreadcrumbProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
+    items?: BreadcrumbItem[];
+    style?: CSSProperties;
+}
+/** Breadcrumb trail — last item is the current page. */
+declare function Breadcrumb({ items, style, ...rest }: BreadcrumbProps): react.JSX.Element;
+
+export { Breadcrumb, type BreadcrumbItem, type BreadcrumbProps };