@jiwambe/components 0.2.0

package/dist/components/Accordion/Accordion.js

@@ -0,0 +1,297 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId, useState, useEffect, useRef, useCallback } from "react";
+function ChevronIcon({ className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className,
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("path", { d: "M6 9l6 6 6-6" })
+    }
+  );
+}
+function triggerStyles(variant, disabled) {
+  const base = "flex w-full items-center justify-between py-space-4 px-space-4 text-form-text font-medium text-left transition-colors outline-none";
+  if (disabled) {
+    switch (variant) {
+      case "secondary":
+        return `${base} bg-fill-action-primary-disabled text-text-inverse-disabled cursor-not-allowed`;
+      case "inverse":
+        return `${base} text-text-disabled cursor-not-allowed`;
+      default:
+        return `${base} text-text-disabled cursor-not-allowed`;
+    }
+  }
+  switch (variant) {
+    case "secondary":
+      return `${base} bg-fill-action-primary text-text-primary-inverse hover:bg-fill-action-primary-hover active:bg-fill-action-primary-active focus-visible:outline-none cursor-pointer`;
+    case "inverse":
+      return `${base} text-text-primary hover:bg-fill-bg-secondary active:bg-fill-bg-secondary focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-border-focus cursor-pointer`;
+    default:
+      return `${base} text-text-primary hover:bg-fill-bg-secondary active:bg-fill-bg-secondary focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-border-focus cursor-pointer`;
+  }
+}
+function panelStyles(variant, disabled) {
+  if (disabled) {
+    switch (variant) {
+      case "secondary":
+        return "px-space-4 pb-space-4 text-text-sm text-text-inverse-disabled bg-fill-action-primary-disabled";
+      default:
+        return "px-space-4 pb-space-4 text-text-sm text-text-disabled";
+    }
+  }
+  switch (variant) {
+    case "secondary":
+      return "px-space-4 pb-space-4 text-text-sm text-text-primary-inverse bg-fill-action-primary";
+    default:
+      return "px-space-4 pb-space-4 text-text-sm text-text-secondary";
+  }
+}
+function wrapperBorder(variant) {
+  switch (variant) {
+    case "secondary":
+      return "";
+    default:
+      return "divide-y divide-neutral-200 border-b border-neutral-200";
+  }
+}
+function itemBorder(variant) {
+  switch (variant) {
+    case "secondary":
+      return "rounded-rad-md overflow-hidden focus-within:outline-[1.5px] focus-within:outline-border-focus focus-within:outline-offset-[3px] focus-within:rounded-rad-lg";
+    default:
+      return "";
+  }
+}
+function Accordion({ items, variant = "primary", defaultOpenIndex, value, onChange, className = "", style, ref, ...rest }) {
+  const baseId = useId();
+  const isControlled = value !== void 0;
+  const [internalOpen, setInternalOpen] = useState(defaultOpenIndex ?? -1);
+  const openIndex = isControlled ? value : internalOpen;
+  useEffect(() => {
+    if (!isControlled && defaultOpenIndex !== void 0) {
+      setInternalOpen(defaultOpenIndex);
+    }
+  }, [defaultOpenIndex, isControlled]);
+  const triggerRefs = useRef([]);
+  const toggle = useCallback(
+    (index) => {
+      const next = openIndex === index ? -1 : index;
+      if (isControlled) {
+        onChange == null ? void 0 : onChange(next);
+      } else {
+        setInternalOpen(next);
+      }
+    },
+    [openIndex, isControlled, onChange]
+  );
+  const focusTrigger = (index) => {
+    var _a;
+    (_a = triggerRefs.current[index]) == null ? void 0 : _a.focus();
+  };
+  const handleKeyDown = (e, index) => {
+    const enabledIndices = items.map((item, i) => item.disabled ? -1 : i).filter((i) => i !== -1);
+    const currentPos = enabledIndices.indexOf(index);
+    switch (e.key) {
+      case "ArrowDown": {
+        e.preventDefault();
+        focusTrigger(enabledIndices[(currentPos + 1) % enabledIndices.length]);
+        break;
+      }
+      case "ArrowUp": {
+        e.preventDefault();
+        focusTrigger(enabledIndices[(currentPos - 1 + enabledIndices.length) % enabledIndices.length]);
+        break;
+      }
+      case "Home": {
+        e.preventDefault();
+        focusTrigger(enabledIndices[0]);
+        break;
+      }
+      case "End": {
+        e.preventDefault();
+        focusTrigger(enabledIndices[enabledIndices.length - 1]);
+        break;
+      }
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: `w-full ${wrapperBorder(variant)} ${variant === "secondary" ? "flex flex-col gap-space-2" : ""} ${className}`,
+      style,
+      ...rest,
+      children: items.map((item, index) => {
+        const isOpen = openIndex === index;
+        const triggerId = `${baseId}-trigger-${index}`;
+        const panelId = `${baseId}-panel-${index}`;
+        const disabled = !!item.disabled;
+        return /* @__PURE__ */ jsxs("div", { className: itemBorder(variant), children: [
+          /* @__PURE__ */ jsx("h3", { children: /* @__PURE__ */ jsxs(
+            "button",
+            {
+              ref: (el) => {
+                triggerRefs.current[index] = el;
+              },
+              id: triggerId,
+              type: "button",
+              className: triggerStyles(variant, disabled),
+              "aria-expanded": isOpen,
+              "aria-controls": panelId,
+              "aria-disabled": disabled || void 0,
+              disabled,
+              onClick: () => toggle(index),
+              onKeyDown: (e) => handleKeyDown(e, index),
+              children: [
+                /* @__PURE__ */ jsx("span", { children: item.title }),
+                /* @__PURE__ */ jsx(
+                  ChevronIcon,
+                  {
+                    className: `h-6 w-6 shrink-0 transition-transform duration-200 ${isOpen ? "rotate-180" : ""}`
+                  }
+                )
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              id: panelId,
+              role: "region",
+              "aria-labelledby": triggerId,
+              className: `overflow-hidden transition-all duration-200 ease-in-out ${isOpen ? "max-h-[2000px] opacity-100" : "max-h-0 opacity-0"}`,
+              children: /* @__PURE__ */ jsx("div", { className: panelStyles(variant, disabled), children: item.content })
+            }
+          )
+        ] }, index);
+      })
+    }
+  );
+}
+function AccordionSpecs({ items, layout = "vertical", defaultOpenIndex, value, onChange, className = "", style, ref, ...rest }) {
+  const baseId = useId();
+  const isControlled = value !== void 0;
+  const [internalOpen, setInternalOpen] = useState(defaultOpenIndex ?? -1);
+  const openIndex = isControlled ? value : internalOpen;
+  useEffect(() => {
+    if (!isControlled && defaultOpenIndex !== void 0) {
+      setInternalOpen(defaultOpenIndex);
+    }
+  }, [defaultOpenIndex, isControlled]);
+  const triggerRefs = useRef([]);
+  const toggle = useCallback(
+    (index) => {
+      const next = openIndex === index ? -1 : index;
+      if (isControlled) {
+        onChange == null ? void 0 : onChange(next);
+      } else {
+        setInternalOpen(next);
+      }
+    },
+    [openIndex, isControlled, onChange]
+  );
+  const focusTrigger = (index) => {
+    var _a;
+    (_a = triggerRefs.current[index]) == null ? void 0 : _a.focus();
+  };
+  const handleKeyDown = (e, index) => {
+    const enabledIndices = items.map((item, i) => item.disabled ? -1 : i).filter((i) => i !== -1);
+    const currentPos = enabledIndices.indexOf(index);
+    switch (e.key) {
+      case "ArrowDown": {
+        e.preventDefault();
+        focusTrigger(enabledIndices[(currentPos + 1) % enabledIndices.length]);
+        break;
+      }
+      case "ArrowUp": {
+        e.preventDefault();
+        focusTrigger(enabledIndices[(currentPos - 1 + enabledIndices.length) % enabledIndices.length]);
+        break;
+      }
+      case "Home": {
+        e.preventDefault();
+        focusTrigger(enabledIndices[0]);
+        break;
+      }
+      case "End": {
+        e.preventDefault();
+        focusTrigger(enabledIndices[enabledIndices.length - 1]);
+        break;
+      }
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: `w-full divide-y divide-neutral-200 border-b border-neutral-200 ${className}`,
+      style,
+      ...rest,
+      children: items.map((item, index) => {
+        const isOpen = openIndex === index;
+        const triggerId = `${baseId}-spec-trigger-${index}`;
+        const panelId = `${baseId}-spec-panel-${index}`;
+        const disabled = !!item.disabled;
+        return /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("h3", { children: /* @__PURE__ */ jsxs(
+            "button",
+            {
+              ref: (el) => {
+                triggerRefs.current[index] = el;
+              },
+              id: triggerId,
+              type: "button",
+              className: `flex w-full items-center justify-between py-space-4 px-space-4 text-form-text font-medium text-left transition-colors outline-none ${disabled ? "text-text-disabled cursor-not-allowed" : "text-text-primary hover:bg-fill-bg-secondary active:bg-fill-bg-secondary focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-border-focus cursor-pointer"}`,
+              "aria-expanded": isOpen,
+              "aria-controls": panelId,
+              "aria-disabled": disabled || void 0,
+              disabled,
+              onClick: () => toggle(index),
+              onKeyDown: (e) => handleKeyDown(e, index),
+              children: [
+                /* @__PURE__ */ jsx("span", { children: item.title }),
+                /* @__PURE__ */ jsx(
+                  ChevronIcon,
+                  {
+                    className: `h-6 w-6 shrink-0 transition-transform duration-200 ${isOpen ? "rotate-180" : ""}`
+                  }
+                )
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              id: panelId,
+              role: "region",
+              "aria-labelledby": triggerId,
+              className: `overflow-hidden transition-all duration-200 ease-in-out ${isOpen ? "max-h-[4000px] opacity-100" : "max-h-0 opacity-0"}`,
+              children: /* @__PURE__ */ jsx("div", { className: `px-space-4 pb-space-4 ${disabled ? "opacity-50" : ""}`, children: layout === "horizontal" ? /* @__PURE__ */ jsx("div", { className: "grid grid-cols-4 gap-space-2", children: item.specs.map((spec, si) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-space-1", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-text-xs text-text-secondary", children: spec.label }),
+                /* @__PURE__ */ jsx("span", { className: "text-text-sm text-text-primary", children: spec.value })
+              ] }, si)) }) : /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-space-3", children: item.specs.map((spec, si) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-space-1", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-text-xs text-text-secondary", children: spec.label }),
+                /* @__PURE__ */ jsx("span", { className: "text-text-sm text-text-primary", children: spec.value })
+              ] }, si)) }) })
+            }
+          )
+        ] }, index);
+      })
+    }
+  );
+}
+export {
+  Accordion,
+  AccordionSpecs
+};
+//# sourceMappingURL=Accordion.js.map

package/dist/components/Accordion/Accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.js","sources":["../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["'use client';\n\nimport React, { useState, useRef, useCallback, useId, useEffect } from 'react';\nimport type { AccordionItem, AccordionVariant, AccordionSpecItem } from '../../types';\n\n// ---------------------------------------------------------------------------\n// Chevron icon\n// ---------------------------------------------------------------------------\n\nfunction ChevronIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      className={className}\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"M6 9l6 6 6-6\" />\n    </svg>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Variant style helpers\n// ---------------------------------------------------------------------------\n\nfunction triggerStyles(variant: AccordionVariant, disabled: boolean) {\n  const base =\n    'flex w-full items-center justify-between py-space-4 px-space-4 text-form-text font-medium text-left transition-colors outline-none';\n\n  if (disabled) {\n    switch (variant) {\n      case 'secondary':\n        return `${base} bg-fill-action-primary-disabled text-text-inverse-disabled cursor-not-allowed`;\n      case 'inverse':\n        return `${base} text-text-disabled cursor-not-allowed`;\n      default:\n        return `${base} text-text-disabled cursor-not-allowed`;\n    }\n  }\n\n  switch (variant) {\n    case 'secondary':\n      return `${base} bg-fill-action-primary text-text-primary-inverse hover:bg-fill-action-primary-hover active:bg-fill-action-primary-active focus-visible:outline-none cursor-pointer`;\n    case 'inverse':\n      return `${base} text-text-primary hover:bg-fill-bg-secondary active:bg-fill-bg-secondary focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-border-focus cursor-pointer`;\n    default:\n      return `${base} text-text-primary hover:bg-fill-bg-secondary active:bg-fill-bg-secondary focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-border-focus cursor-pointer`;\n  }\n}\n\nfunction panelStyles(variant: AccordionVariant, disabled: boolean) {\n  if (disabled) {\n    switch (variant) {\n      case 'secondary':\n        return 'px-space-4 pb-space-4 text-text-sm text-text-inverse-disabled bg-fill-action-primary-disabled';\n      default:\n        return 'px-space-4 pb-space-4 text-text-sm text-text-disabled';\n    }\n  }\n  switch (variant) {\n    case 'secondary':\n      return 'px-space-4 pb-space-4 text-text-sm text-text-primary-inverse bg-fill-action-primary';\n    default:\n      return 'px-space-4 pb-space-4 text-text-sm text-text-secondary';\n  }\n}\n\nfunction wrapperBorder(variant: AccordionVariant) {\n  switch (variant) {\n    case 'secondary':\n      return '';\n    default:\n      return 'divide-y divide-neutral-200 border-b border-neutral-200';\n  }\n}\n\nfunction itemBorder(variant: AccordionVariant) {\n  switch (variant) {\n    case 'secondary':\n      return 'rounded-rad-md overflow-hidden focus-within:outline-[1.5px] focus-within:outline-border-focus focus-within:outline-offset-[3px] focus-within:rounded-rad-lg';\n    default:\n      return '';\n  }\n}\n\n// ---------------------------------------------------------------------------\n// Accordion (text variant)\n// ---------------------------------------------------------------------------\n\n/**\n * Props for the Accordion component. Each item has title, content, and optional disabled.\n */\nexport interface AccordionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /**\n   * Array of accordion items. Each item: title (string), content (ReactNode), disabled? (boolean).\n   * @see AccordionItem\n   */\n  items: AccordionItem[];\n  /**\n   * Visual style of the accordion. 'primary' — neutral background, dividers; 'secondary' — filled\n   * trigger panels; 'inverse' — for use on dark backgrounds.\n   * @default 'primary'\n   */\n  variant?: AccordionVariant;\n  /** Index of the panel open by default (uncontrolled). -1 = none. @default undefined */\n  defaultOpenIndex?: number;\n  /** Controlled open index. When set, accordion is controlled; use with onChange. @default undefined */\n  value?: number;\n  /** Called when the open panel changes (controlled). Receives the new index or -1 when closed. @default undefined */\n  onChange?: (index: number) => void;\n  /** Forwarded ref for the root div. @default undefined */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/**\n * Accordion of expandable panels. Renders a list of triggers; each expands to show its\n * content. Use for FAQs, disclosure sections, or any collapsible content. Supports\n * controlled (value/onChange) or uncontrolled (defaultOpenIndex) usage.\n *\n * @example\n * <Accordion items={[{ title: 'Section 1', content: <p>Content here.</p> }]} variant=\"primary\" />\n *\n * @example\n * <Accordion items={faqItems} defaultOpenIndex={0} variant=\"secondary\" />\n */\nexport function Accordion({ items, variant = 'primary', defaultOpenIndex, value, onChange, className = '', style, ref, ...rest }: AccordionProps) {\n    const baseId = useId();\n    const isControlled = value !== undefined;\n\n    const [internalOpen, setInternalOpen] = useState<number>(defaultOpenIndex ?? -1);\n    const openIndex = isControlled ? value : internalOpen;\n\n    useEffect(() => {\n      if (!isControlled && defaultOpenIndex !== undefined) {\n        setInternalOpen(defaultOpenIndex);\n      }\n    }, [defaultOpenIndex, isControlled]);\n\n    const triggerRefs = useRef<(HTMLButtonElement | null)[]>([]);\n\n    const toggle = useCallback(\n      (index: number) => {\n        const next = openIndex === index ? -1 : index;\n        if (isControlled) {\n          onChange?.(next);\n        } else {\n          setInternalOpen(next);\n        }\n      },\n      [openIndex, isControlled, onChange],\n    );\n\n    const focusTrigger = (index: number) => {\n      triggerRefs.current[index]?.focus();\n    };\n\n    const handleKeyDown = (e: React.KeyboardEvent, index: number) => {\n      const enabledIndices = items\n        .map((item, i) => (item.disabled ? -1 : i))\n        .filter((i) => i !== -1);\n      const currentPos = enabledIndices.indexOf(index);\n\n      switch (e.key) {\n        case 'ArrowDown': {\n          e.preventDefault();\n          focusTrigger(enabledIndices[(currentPos + 1) % enabledIndices.length]);\n          break;\n        }\n        case 'ArrowUp': {\n          e.preventDefault();\n          focusTrigger(enabledIndices[(currentPos - 1 + enabledIndices.length) % enabledIndices.length]);\n          break;\n        }\n        case 'Home': {\n          e.preventDefault();\n          focusTrigger(enabledIndices[0]);\n          break;\n        }\n        case 'End': {\n          e.preventDefault();\n          focusTrigger(enabledIndices[enabledIndices.length - 1]);\n          break;\n        }\n      }\n    };\n\n    return (\n      <div\n        ref={ref}\n        className={`w-full ${wrapperBorder(variant)} ${variant === 'secondary' ? 'flex flex-col gap-space-2' : ''} ${className}`}\n        style={style}\n        {...rest}\n      >\n        {items.map((item, index) => {\n          const isOpen = openIndex === index;\n          const triggerId = `${baseId}-trigger-${index}`;\n          const panelId = `${baseId}-panel-${index}`;\n          const disabled = !!item.disabled;\n\n          return (\n            <div key={index} className={itemBorder(variant)}>\n              <h3>\n                <button\n                  ref={(el) => { triggerRefs.current[index] = el; }}\n                  id={triggerId}\n                  type=\"button\"\n                  className={triggerStyles(variant, disabled)}\n                  aria-expanded={isOpen}\n                  aria-controls={panelId}\n                  aria-disabled={disabled || undefined}\n                  disabled={disabled}\n                  onClick={() => toggle(index)}\n                  onKeyDown={(e) => handleKeyDown(e, index)}\n                >\n                  <span>{item.title}</span>\n                  <ChevronIcon\n                    className={`h-6 w-6 shrink-0 transition-transform duration-200 ${isOpen ? 'rotate-180' : ''}`}\n                  />\n                </button>\n              </h3>\n              <div\n                id={panelId}\n                role=\"region\"\n                aria-labelledby={triggerId}\n                className={`overflow-hidden transition-all duration-200 ease-in-out ${\n                  isOpen ? 'max-h-[2000px] opacity-100' : 'max-h-0 opacity-0'\n                }`}\n              >\n                <div className={panelStyles(variant, disabled)}>\n                  {item.content}\n                </div>\n              </div>\n            </div>\n          );\n        })}\n      </div>\n    );\n}\n\n// ---------------------------------------------------------------------------\n// AccordionSpecs (product-specs variant)\n// ---------------------------------------------------------------------------\n\n/**\n * Props for AccordionSpecs. Each item has title and an array of label-value specs.\n */\nexport interface AccordionSpecsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /**\n   * Array of spec items. Each item: title (string), specs (array of { label, value }), disabled? (boolean).\n   * @see AccordionSpecItem\n   */\n  items: AccordionSpecItem[];\n  /**\n   * Layout of label-value pairs when expanded. 'vertical' — stacked; 'horizontal' — grid row.\n   * @default 'vertical'\n   */\n  layout?: 'vertical' | 'horizontal';\n  /** Index of the panel open by default (uncontrolled). -1 = none. @default undefined */\n  defaultOpenIndex?: number;\n  /** Controlled open index. Use with onChange. @default undefined */\n  value?: number;\n  /** Called when the open panel changes. @default undefined */\n  onChange?: (index: number) => void;\n  /** Forwarded ref for the root div. @default undefined */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/**\n * Accordion that displays label-value pairs when expanded. Use for product specs, feature\n * lists, or any key-value content. Same expand/collapse behaviour as Accordion; items\n * use AccordionSpecItem (title + specs array) instead of raw content.\n *\n * @example\n * <AccordionSpecs items={[{ title: 'Engine', specs: [{ label: 'Type', value: '1.2L' }] }]} />\n *\n * @example\n * <AccordionSpecs items={specItems} layout=\"horizontal\" defaultOpenIndex={0} />\n */\nexport function AccordionSpecs({ items, layout = 'vertical', defaultOpenIndex, value, onChange, className = '', style, ref, ...rest }: AccordionSpecsProps) {\n    const baseId = useId();\n    const isControlled = value !== undefined;\n\n    const [internalOpen, setInternalOpen] = useState<number>(defaultOpenIndex ?? -1);\n    const openIndex = isControlled ? value : internalOpen;\n\n    useEffect(() => {\n      if (!isControlled && defaultOpenIndex !== undefined) {\n        setInternalOpen(defaultOpenIndex);\n      }\n    }, [defaultOpenIndex, isControlled]);\n\n    const triggerRefs = useRef<(HTMLButtonElement | null)[]>([]);\n\n    const toggle = useCallback(\n      (index: number) => {\n        const next = openIndex === index ? -1 : index;\n        if (isControlled) {\n          onChange?.(next);\n        } else {\n          setInternalOpen(next);\n        }\n      },\n      [openIndex, isControlled, onChange],\n    );\n\n    const focusTrigger = (index: number) => {\n      triggerRefs.current[index]?.focus();\n    };\n\n    const handleKeyDown = (e: React.KeyboardEvent, index: number) => {\n      const enabledIndices = items\n        .map((item, i) => (item.disabled ? -1 : i))\n        .filter((i) => i !== -1);\n      const currentPos = enabledIndices.indexOf(index);\n\n      switch (e.key) {\n        case 'ArrowDown': {\n          e.preventDefault();\n          focusTrigger(enabledIndices[(currentPos + 1) % enabledIndices.length]);\n          break;\n        }\n        case 'ArrowUp': {\n          e.preventDefault();\n          focusTrigger(enabledIndices[(currentPos - 1 + enabledIndices.length) % enabledIndices.length]);\n          break;\n        }\n        case 'Home': {\n          e.preventDefault();\n          focusTrigger(enabledIndices[0]);\n          break;\n        }\n        case 'End': {\n          e.preventDefault();\n          focusTrigger(enabledIndices[enabledIndices.length - 1]);\n          break;\n        }\n      }\n    };\n\n    return (\n      <div\n        ref={ref}\n        className={`w-full divide-y divide-neutral-200 border-b border-neutral-200 ${className}`}\n        style={style}\n        {...rest}\n      >\n        {items.map((item, index) => {\n          const isOpen = openIndex === index;\n          const triggerId = `${baseId}-spec-trigger-${index}`;\n          const panelId = `${baseId}-spec-panel-${index}`;\n          const disabled = !!item.disabled;\n\n          return (\n            <div key={index}>\n              <h3>\n                <button\n                  ref={(el) => { triggerRefs.current[index] = el; }}\n                  id={triggerId}\n                  type=\"button\"\n                  className={`flex w-full items-center justify-between py-space-4 px-space-4 text-form-text font-medium text-left transition-colors outline-none ${\n                    disabled\n                      ? 'text-text-disabled cursor-not-allowed'\n                      : 'text-text-primary hover:bg-fill-bg-secondary active:bg-fill-bg-secondary focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-border-focus cursor-pointer'\n                  }`}\n                  aria-expanded={isOpen}\n                  aria-controls={panelId}\n                  aria-disabled={disabled || undefined}\n                  disabled={disabled}\n                  onClick={() => toggle(index)}\n                  onKeyDown={(e) => handleKeyDown(e, index)}\n                >\n                  <span>{item.title}</span>\n                  <ChevronIcon\n                    className={`h-6 w-6 shrink-0 transition-transform duration-200 ${isOpen ? 'rotate-180' : ''}`}\n                  />\n                </button>\n              </h3>\n              <div\n                id={panelId}\n                role=\"region\"\n                aria-labelledby={triggerId}\n                className={`overflow-hidden transition-all duration-200 ease-in-out ${\n                  isOpen ? 'max-h-[4000px] opacity-100' : 'max-h-0 opacity-0'\n                }`}\n              >\n                <div className={`px-space-4 pb-space-4 ${disabled ? 'opacity-50' : ''}`}>\n                  {layout === 'horizontal' ? (\n                    <div className=\"grid grid-cols-4 gap-space-2\">\n                      {item.specs.map((spec, si) => (\n                        <div key={si} className=\"flex flex-col gap-space-1\">\n                          <span className=\"text-text-xs text-text-secondary\">{spec.label}</span>\n                          <span className=\"text-text-sm text-text-primary\">{spec.value}</span>\n                        </div>\n                      ))}\n                    </div>\n                  ) : (\n                    <div className=\"flex flex-col gap-space-3\">\n                      {item.specs.map((spec, si) => (\n                        <div key={si} className=\"flex flex-col gap-space-1\">\n                          <span className=\"text-text-xs text-text-secondary\">{spec.label}</span>\n                          <span className=\"text-text-sm text-text-primary\">{spec.value}</span>\n                        </div>\n                      ))}\n                    </div>\n                  )}\n                </div>\n              </div>\n            </div>\n          );\n        })}\n      </div>\n    );\n}\n"],"names":[],"mappings":";;;AASA;AACE;AACE;AAAC;AAAA;AACC;AACM;AACC;AACC;AACH;AACE;AACK;AACE;AACC;AACH;AAEW;AAAA;AAG7B;AAMA;AACE;AAGA;AACE;AAAQ;AAEJ;AAAc;AAEd;AAAc;AAEd;AAAc;AAAA;AAIpB;AAAQ;AAEJ;AAAc;AAEd;AAAc;AAEd;AAAc;AAEpB;AAEA;AACE;AACE;AAAQ;AAEJ;AAAO;AAEP;AAAO;AAAA;AAGb;AAAQ;AAEJ;AAAO;AAEP;AAAO;AAEb;AAEA;AACE;AAAQ;AAEJ;AAAO;AAEP;AAAO;AAEb;AAEA;AACE;AAAQ;AAEJ;AAAO;AAEP;AAAO;AAEb;AA0CO;AACH;AACA;AAEA;AACA;AAEA;AACE;AACE;AAAgC;AAClC;AAGF;AAEA;AAAe;AAEX;AACA;AACE;AAAW;AAEX;AAAoB;AACtB;AACF;AACkC;AAGpC;;AACE;AAA4B;AAG9B;AACE;AAGA;AAEA;AAAU;AAEN;AACA;AACA;AAAA;AACF;AAEE;AACA;AACA;AAAA;AACF;AAEE;AACA;AACA;AAAA;AACF;AAEE;AACA;AACA;AAAA;AACF;AAAA;AAIJ;AACE;AAAC;AAAA;AACC;AACsH;AACtH;AACI;AAGF;AACA;AACA;AACA;AAEA;AAEI;AACE;AAAC;AAAA;AACgB;AAA6B;AAAI;AAC5C;AACC;AACqC;AAC3B;AACA;AACY;AAC3B;AAC2B;AACa;AAExC;AAAkB;AAClB;AAAC;AAAA;AAC4F;AAAA;AAAA;AAC7F;AAAA;AAEJ;AACA;AAAC;AAAA;AACK;AACC;AACY;AAGjB;AAIA;AAAA;AAAA;AAEJ;AAEH;AAAA;AAGT;AAyCO;AACH;AACA;AAEA;AACA;AAEA;AACE;AACE;AAAgC;AAClC;AAGF;AAEA;AAAe;AAEX;AACA;AACE;AAAW;AAEX;AAAoB;AACtB;AACF;AACkC;AAGpC;;AACE;AAA4B;AAG9B;AACE;AAGA;AAEA;AAAU;AAEN;AACA;AACA;AAAA;AACF;AAEE;AACA;AACA;AAAA;AACF;AAEE;AACA;AACA;AAAA;AACF;AAEE;AACA;AACA;AAAA;AACF;AAAA;AAIJ;AACE;AAAC;AAAA;AACC;AACsF;AACtF;AACI;AAGF;AACA;AACA;AACA;AAEA;AAEI;AACE;AAAC;AAAA;AACgB;AAA6B;AAAI;AAC5C;AACC;AAKL;AACe;AACA;AACY;AAC3B;AAC2B;AACa;AAExC;AAAkB;AAClB;AAAC;AAAA;AAC4F;AAAA;AAAA;AAC7F;AAAA;AAEJ;AACA;AAAC;AAAA;AACK;AACC;AACY;AAGjB;AAOU;AAA+D;AACF;AAQ7D;AAA+D;AACF;AAKvE;AAAA;AAAA;AAEJ;AAEH;AAAA;AAGT;;;;;"}

package/dist/components/Box/Box.d.ts

@@ -0,0 +1,56 @@
+import { default as React } from 'react';
+import { SystemProps, ResponsiveValue } from '../../utils/responsive-props';
+import { SpacingProps } from '../../types/spacing';
+import { LayoutProps } from '../../types/layout';
+type SystemPropsWithoutSpacing = Omit<SystemProps, 'p' | 'px' | 'py' | 'pt' | 'pb' | 'pl' | 'pr' | 'm' | 'mx' | 'my' | 'mt' | 'mb' | 'ml' | 'mr'>;
+/** Omit display so LayoutProps (class-based) takes precedence over SystemProps (inline). */
+type SystemPropsWithoutSpacingAndDisplay = Omit<SystemPropsWithoutSpacing, 'display'>;
+/**
+ * Props for the Box component. Extends HTML attributes, system props
+ * (dimensions, position, flex), SpacingProps, and LayoutProps.
+ */
+export interface BoxProps extends Omit<React.HTMLAttributes<HTMLElement>, 'display'>, SystemPropsWithoutSpacingAndDisplay, SpacingProps, LayoutProps {
+    /**
+     * The HTML element or React component to render as the root element.
+     * Accepts any valid HTML tag string ('div', 'section', 'article',
+     * 'span', 'main', 'aside', 'header', 'footer', 'nav', 'ul', 'ol' etc.)
+     * or a React component type.
+     *
+     * Use this to maintain correct semantic HTML without sacrificing
+     * design system layout control.
+     * @default 'div'
+     */
+    as?: React.ElementType;
+    /** Forwarded ref for the root element. @default undefined */
+    ref?: React.Ref<HTMLElement>;
+    /** Child content. @default undefined */
+    children?: React.ReactNode;
+}
+/**
+ * General-purpose layout primitive. Renders any HTML element via the
+ * as prop (default: div). Use Box when you need box-model control
+ * (spacing, sizing) or display/alignment props on an arbitrary element.
+ * Prefer Stack for linear sequences, Grid for multi-column layouts,
+ * and Container for page-width constraints.
+ *
+ * @example
+ * // Basic spacing
+ * <Box p="space-4" mt="space-8">Content</Box>
+ *
+ * @example
+ * // Inline flex wrapper
+ * <Box as="span" display="inline-flex" alignItems="center">
+ *   <Icon />
+ *   Label
+ * </Box>
+ *
+ * @example
+ * // Semantic section element
+ * <Box as="section" py="fluid-8-16">Content</Box>
+ */
+export declare function Box({ as: Tag, children, className, style, ref, ...allRest }: BoxProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Box {
+    var displayName: string;
+}
+export type { ResponsiveValue };
+//# sourceMappingURL=Box.d.ts.map

package/dist/components/Box/Box.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../src/components/Box/Box.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAGL,KAAK,WAAW,EAChB,KAAK,eAAe,EACrB,MAAM,8BAA8B,CAAC;AACtC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAItD,KAAK,yBAAyB,GAAG,IAAI,CACnC,WAAW,EACX,GAAG,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,GAAG,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAC9F,CAAC;AAEF,4FAA4F;AAC5F,KAAK,mCAAmC,GAAG,IAAI,CAAC,yBAAyB,EAAE,SAAS,CAAC,CAAC;AAEtF;;;GAGG;AACH,MAAM,WAAW,QACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,SAAS,CAAC,EACxD,mCAAmC,EACnC,YAAY,EACZ,WAAW;IACb;;;;;;;;;OASG;IACH,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IACvB,6DAA6D;IAC7D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B,wCAAwC;IACxC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,GAAG,CAAC,EAClB,EAAE,EAAE,GAAW,EACf,QAAQ,EACR,SAAc,EACd,KAAK,EACL,GAAG,EACH,GAAG,OAAO,EACX,EAAE,QAAQ,2CAyCV;yBAhDe,GAAG;;;AAoDnB,YAAY,EAAE,eAAe,EAAE,CAAC"}

package/dist/components/Box/Box.js

@@ -0,0 +1,51 @@
+import { jsxs, Fragment } from "react/jsx-runtime";
+import React from "react";
+import { stripSystemProps, renderSystemProps } from "../../utils/responsive-props.js";
+import { SPACING_PROP_KEYS, resolveSpacing } from "../../utils/spacing.js";
+import { LAYOUT_PROP_KEYS, resolveLayout } from "../../utils/layoutClasses.js";
+function Box({
+  as: Tag = "div",
+  children,
+  className = "",
+  style,
+  ref,
+  ...allRest
+}) {
+  const systemPropsOnly = { ...allRest };
+  for (const key of SPACING_PROP_KEYS) {
+    delete systemPropsOnly[key];
+  }
+  for (const key of LAYOUT_PROP_KEYS) {
+    delete systemPropsOnly[key];
+  }
+  const rest = stripSystemProps(allRest);
+  const domRest = { ...rest };
+  for (const key of LAYOUT_PROP_KEYS) {
+    delete domRest[key];
+  }
+  const { style: systemStyle, styleTag, dataId } = renderSystemProps(
+    systemPropsOnly,
+    style
+  );
+  const spacingClasses = resolveSpacing(allRest);
+  const layoutClasses = resolveLayout(allRest);
+  const mergedClassName = [layoutClasses, spacingClasses, className].filter(Boolean).join(" ");
+  const elementProps = {
+    ref,
+    className: mergedClassName || void 0,
+    style: systemStyle,
+    ...domRest
+  };
+  if (dataId) {
+    elementProps["data-jds"] = dataId;
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    styleTag,
+    React.createElement(Tag, elementProps, children)
+  ] });
+}
+Box.displayName = "Box";
+export {
+  Box
+};
+//# sourceMappingURL=Box.js.map

package/dist/components/Box/Box.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Box.js","sources":["../../../src/components/Box/Box.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  renderSystemProps,\n  stripSystemProps,\n  type SystemProps,\n  type ResponsiveValue,\n} from '../../utils/responsive-props';\nimport type { SpacingProps } from '../../types/spacing';\nimport type { LayoutProps } from '../../types/layout';\nimport { resolveSpacing, SPACING_PROP_KEYS } from '../../utils/spacing';\nimport { resolveLayout, LAYOUT_PROP_KEYS } from '../../utils/layoutClasses';\n\ntype SystemPropsWithoutSpacing = Omit<\n  SystemProps,\n  'p' | 'px' | 'py' | 'pt' | 'pb' | 'pl' | 'pr' | 'm' | 'mx' | 'my' | 'mt' | 'mb' | 'ml' | 'mr'\n>;\n\n/** Omit display so LayoutProps (class-based) takes precedence over SystemProps (inline). */\ntype SystemPropsWithoutSpacingAndDisplay = Omit<SystemPropsWithoutSpacing, 'display'>;\n\n/**\n * Props for the Box component. Extends HTML attributes, system props\n * (dimensions, position, flex), SpacingProps, and LayoutProps.\n */\nexport interface BoxProps\n  extends Omit<React.HTMLAttributes<HTMLElement>, 'display'>,\n    SystemPropsWithoutSpacingAndDisplay,\n    SpacingProps,\n    LayoutProps {\n  /**\n   * The HTML element or React component to render as the root element.\n   * Accepts any valid HTML tag string ('div', 'section', 'article',\n   * 'span', 'main', 'aside', 'header', 'footer', 'nav', 'ul', 'ol' etc.)\n   * or a React component type.\n   *\n   * Use this to maintain correct semantic HTML without sacrificing\n   * design system layout control.\n   * @default 'div'\n   */\n  as?: React.ElementType;\n  /** Forwarded ref for the root element. @default undefined */\n  ref?: React.Ref<HTMLElement>;\n  /** Child content. @default undefined */\n  children?: React.ReactNode;\n}\n\n/**\n * General-purpose layout primitive. Renders any HTML element via the\n * as prop (default: div). Use Box when you need box-model control\n * (spacing, sizing) or display/alignment props on an arbitrary element.\n * Prefer Stack for linear sequences, Grid for multi-column layouts,\n * and Container for page-width constraints.\n *\n * @example\n * // Basic spacing\n * <Box p=\"space-4\" mt=\"space-8\">Content</Box>\n *\n * @example\n * // Inline flex wrapper\n * <Box as=\"span\" display=\"inline-flex\" alignItems=\"center\">\n *   <Icon />\n *   Label\n * </Box>\n *\n * @example\n * // Semantic section element\n * <Box as=\"section\" py=\"fluid-8-16\">Content</Box>\n */\nexport function Box({\n  as: Tag = 'div',\n  children,\n  className = '',\n  style,\n  ref,\n  ...allRest\n}: BoxProps) {\n  const systemPropsOnly = { ...allRest };\n  for (const key of SPACING_PROP_KEYS) {\n    delete (systemPropsOnly as Record<string, unknown>)[key];\n  }\n  for (const key of LAYOUT_PROP_KEYS) {\n    delete (systemPropsOnly as Record<string, unknown>)[key];\n  }\n  const rest = stripSystemProps(allRest);\n  const domRest = { ...rest };\n  for (const key of LAYOUT_PROP_KEYS) {\n    delete (domRest as Record<string, unknown>)[key];\n  }\n  const { style: systemStyle, styleTag, dataId } = renderSystemProps(\n    systemPropsOnly as SystemPropsWithoutSpacingAndDisplay,\n    style,\n  );\n\n  const spacingClasses = resolveSpacing(allRest);\n  const layoutClasses = resolveLayout(allRest as LayoutProps);\n  const mergedClassName = [layoutClasses, spacingClasses, className]\n    .filter(Boolean)\n    .join(' ');\n\n  const elementProps: Record<string, unknown> = {\n    ref,\n    className: mergedClassName || undefined,\n    style: systemStyle,\n    ...domRest,\n  };\n\n  if (dataId) {\n    elementProps['data-jds'] = dataId;\n  }\n\n  return (\n    <>\n      {styleTag}\n      {React.createElement(Tag, elementProps, children)}\n    </>\n  );\n}\n\nBox.displayName = 'Box';\n\nexport type { ResponsiveValue };\n"],"names":[],"mappings":";;;;;AAoEO,SAAS,IAAI;AAAA,EAClB,IAAI,MAAM;AAAA,EACV;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAa;AACX,QAAM,kBAAkB,EAAE,GAAG,QAAA;AAC7B,aAAW,OAAO,mBAAmB;AACnC,WAAQ,gBAA4C,GAAG;AAAA,EACzD;AACA,aAAW,OAAO,kBAAkB;AAClC,WAAQ,gBAA4C,GAAG;AAAA,EACzD;AACA,QAAM,OAAO,iBAAiB,OAAO;AACrC,QAAM,UAAU,EAAE,GAAG,KAAA;AACrB,aAAW,OAAO,kBAAkB;AAClC,WAAQ,QAAoC,GAAG;AAAA,EACjD;AACA,QAAM,EAAE,OAAO,aAAa,UAAU,WAAW;AAAA,IAC/C;AAAA,IACA;AAAA,EAAA;AAGF,QAAM,iBAAiB,eAAe,OAAO;AAC7C,QAAM,gBAAgB,cAAc,OAAsB;AAC1D,QAAM,kBAAkB,CAAC,eAAe,gBAAgB,SAAS,EAC9D,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,QAAM,eAAwC;AAAA,IAC5C;AAAA,IACA,WAAW,mBAAmB;AAAA,IAC9B,OAAO;AAAA,IACP,GAAG;AAAA,EAAA;AAGL,MAAI,QAAQ;AACV,iBAAa,UAAU,IAAI;AAAA,EAC7B;AAEA,SACE,qBAAA,UAAA,EACG,UAAA;AAAA,IAAA;AAAA,IACA,MAAM,cAAc,KAAK,cAAc,QAAQ;AAAA,EAAA,GAClD;AAEJ;AAEA,IAAI,cAAc;"}

package/dist/components/Breadcrumb/Breadcrumb.d.ts

@@ -0,0 +1,66 @@
+import { default as React } from 'react';
+import { LinkVariant } from '../../types';
+/**
+ * A single breadcrumb item. If `href` is provided, the item is rendered as a link;
+ * otherwise it is the current page (last segment) and rendered as text with aria-current="page".
+ */
+export interface BreadcrumbItem {
+    /** Display label for the segment. */
+    label: string;
+    /** Optional URL. Omit for the current page (typically the last item). */
+    href?: string;
+}
+/**
+ * Visual style for the separator between breadcrumb items.
+ * - 'slash'    Forward slash (/) — matches design system default.
+ * - 'chevron'  Right-pointing chevron.
+ */
+export type BreadcrumbSeparator = 'slash' | 'chevron';
+/**
+ * Props for the Breadcrumb component. Renders a WAI-ARIA compliant breadcrumb navigation.
+ * Matches design: slash separators, optional truncation with ellipsis for long paths.
+ */
+export interface BreadcrumbProps {
+    /** List of breadcrumb segments. Last item without `href` is treated as current page. */
+    items: BreadcrumbItem[];
+    /**
+     * When true and there are more than 3 items, collapse the middle to "..." (e.g. Root ... Level-04 / Level-05).
+     * @default false
+     */
+    truncate?: boolean;
+    /**
+     * Link variant for non-current segments. Use tertiary or secondary for muted breadcrumb links.
+     * @default 'tertiary'
+     */
+    linkVariant?: LinkVariant;
+    /**
+     * Separator between items.
+     * @default 'slash'
+     */
+    separator?: BreadcrumbSeparator;
+    /** Accessible name for the navigation landmark. @default 'Breadcrumb' */
+    'aria-label'?: string;
+    /** Additional CSS class names. */
+    className?: string;
+    /** Inline styles. */
+    style?: React.CSSProperties;
+}
+/**
+ * Renders a breadcrumb navigation with accessible structure (nav + list), slash or
+ * chevron separators, and optional truncation (first ... second-to-last / current).
+ * Matches design: links underlined, current page not underlined, separators in disabled color.
+ *
+ * @example
+ * ```tsx
+ * <Breadcrumb
+ *   items={[
+ *     { label: 'Root', href: '/' },
+ *     { label: 'Level-01', href: '/l1' },
+ *     { label: 'Level-02' },
+ *   ]}
+ * />
+ * <Breadcrumb items={manyItems} truncate />
+ * ```
+ */
+export declare function Breadcrumb({ items, truncate, linkVariant, separator, 'aria-label': ariaLabel, className, style, }: BreadcrumbProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=Breadcrumb.d.ts.map

package/dist/components/Breadcrumb/Breadcrumb.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumb.d.ts","sourceRoot":"","sources":["../../../src/components/Breadcrumb/Breadcrumb.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C;;;GAGG;AACH,MAAM,WAAW,cAAc;IAC7B,qCAAqC;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,yEAAyE;IACzE,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;;GAIG;AACH,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,SAAS,CAAC;AAEtD;;;GAGG;AACH,MAAM,WAAW,eAAe;IAC9B,wFAAwF;IACxF,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B;;;OAGG;IACH,SAAS,CAAC,EAAE,mBAAmB,CAAC;IAChC,yEAAyE;IACzE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kCAAkC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qBAAqB;IACrB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAUD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,QAAgB,EAChB,WAAwB,EACxB,SAAmB,EACnB,YAAY,EAAE,SAAwB,EACtC,SAAc,EACd,KAAK,GACN,EAAE,eAAe,kDAwFjB"}

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,54 @@
+import { default as React } from 'react';
+import { ButtonVariant, ButtonSize } from '../../types';
+/**
+ * Props for the Button component. Extends native button HTML attributes.
+ */
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Visual style variant (primary, secondary, inverse, ghost). */
+    variant: ButtonVariant;
+    /**
+     * Button size. Affects height, padding, and typography.
+     * @default 'small'
+     */
+    size?: ButtonSize;
+    /** Icon or element rendered before the button text. @default undefined */
+    iconLeft?: React.ReactNode;
+    /** Icon or element rendered after the button text. @default undefined */
+    iconRight?: React.ReactNode;
+    /**
+     * When provided, renders a square icon-only button with no text.
+     * You must provide aria-label for accessibility.
+     * @default undefined
+     * @see aria-label
+     */
+    iconOnly?: React.ReactNode;
+    /** When true, disables the button and applies disabled styling. @default false */
+    disabled?: boolean;
+    /** Button label or content. Omit when using iconOnly. @default undefined */
+    children?: React.ReactNode;
+    /** Additional CSS class names. Merged with variant/size classes. @default undefined */
+    className?: string;
+    /** Inline styles. @default undefined */
+    style?: React.CSSProperties;
+    /**
+     * Accessible label. Required when iconOnly is set; recommended for icon buttons.
+     * @default undefined
+     * @see iconOnly
+     */
+    'aria-label'?: string;
+    /** Forwarded ref for the button element. @default undefined */
+    ref?: React.Ref<HTMLButtonElement>;
+}
+/**
+ * Button component with design-system variants, sizes, icon support, and
+ * an accessible focus ring that appears only on keyboard navigation.
+ *
+ * @example
+ * ```tsx
+ * <Button variant="primary" size="large">Click Me</Button>
+ * <Button variant="secondary" iconLeft={<SearchIcon />}>Search</Button>
+ * <Button variant="ghost" iconOnly={<MenuIcon />} aria-label="Open menu" />
+ * ```
+ */
+export declare function Button({ variant, size, iconLeft, iconRight, iconOnly, disabled, children, className, style, ref, ...rest }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Button.d.ts.map

package/dist/components/Button/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE7D;;GAEG;AACH,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IAChF,iEAAiE;IACjE,OAAO,EAAE,aAAa,CAAC;IACvB;;;OAGG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,yEAAyE;IACzE,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,kFAAkF;IAClF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,uFAAuF;IACvF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wCAAwC;IACxC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,+DAA+D;IAC/D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;CACpC;AAkED;;;;;;;;;;GAUG;AACH,wBAAgB,MAAM,CAAC,EACrB,OAAO,EACP,IAAc,EACd,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,QAAgB,EAChB,QAAQ,EACR,SAAc,EACd,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,WAAW,2CAqDb"}