@5voltfx/design-system 0.1.1 → 0.3.0

package/dist/chunk-2KHDM6UP.js

@@ -0,0 +1,58 @@
+// src/components/Accordion/Accordion.jsx
+import { useId, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Accordion({
+  items = [],
+  multiple = false,
+  defaultOpen = [],
+  className = ""
+}) {
+  const baseId = useId();
+  const [openIds, setOpenIds] = useState(() => new Set(defaultOpen));
+  function toggle(id) {
+    setOpenIds((prev) => {
+      const next = new Set(multiple ? prev : []);
+      if (prev.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  }
+  return /* @__PURE__ */ jsx("div", { className: ["ds-accordion", className].filter(Boolean).join(" "), children: items.map((item) => {
+    const isOpen = openIds.has(item.id);
+    const headerId = `${baseId}-${item.id}-header`;
+    const panelId = `${baseId}-${item.id}-panel`;
+    return /* @__PURE__ */ jsxs("div", { className: "ds-accordion__item", children: [
+      /* @__PURE__ */ jsx("h3", { className: "ds-accordion__heading", children: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          id: headerId,
+          className: "ds-accordion__trigger",
+          "aria-expanded": isOpen,
+          "aria-controls": panelId,
+          onClick: () => toggle(item.id),
+          children: [
+            /* @__PURE__ */ jsx("span", { children: item.title }),
+            /* @__PURE__ */ jsx("span", { className: "ds-accordion__icon", "aria-hidden": "true" })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          id: panelId,
+          className: "ds-accordion__panel",
+          role: "region",
+          "aria-labelledby": headerId,
+          hidden: !isOpen,
+          children: /* @__PURE__ */ jsx("div", { className: "ds-accordion__content", children: item.content })
+        }
+      )
+    ] }, item.id);
+  }) });
+}
+
+export {
+  Accordion
+};
+//# sourceMappingURL=chunk-2KHDM6UP.js.map

package/dist/chunk-2KHDM6UP.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Accordion/Accordion.jsx"],"sourcesContent":["import { useId, useState } from \"react\";\nimport \"./Accordion.css\";\n\n/**\n * @typedef {object} AccordionItem\n * @property {string} id\n * @property {import(\"react\").ReactNode} title\n * @property {import(\"react\").ReactNode} content\n */\n\n/**\n * Disclosure list built on native <button aria-expanded> + a region panel.\n * Single-open by default; set `multiple` to allow several panels open at once.\n *\n * @param {object} props\n * @param {AccordionItem[]} props.items\n * @param {boolean} [props.multiple] - Allow multiple panels open. Default false.\n * @param {string[]} [props.defaultOpen] - Item ids open initially.\n * @param {string} [props.className]\n * @returns {import(\"react\").ReactElement}\n */\nexport function Accordion({\n  items = [],\n  multiple = false,\n  defaultOpen = [],\n  className = \"\",\n}) {\n  const baseId = useId();\n  const [openIds, setOpenIds] = useState(() => new Set(defaultOpen));\n\n  function toggle(id) {\n    setOpenIds((prev) => {\n      const next = new Set(multiple ? prev : []);\n      if (prev.has(id)) next.delete(id);\n      else next.add(id);\n      return next;\n    });\n  }\n\n  return (\n    <div className={[\"ds-accordion\", className].filter(Boolean).join(\" \")}>\n      {items.map((item) => {\n        const isOpen = openIds.has(item.id);\n        const headerId = `${baseId}-${item.id}-header`;\n        const panelId = `${baseId}-${item.id}-panel`;\n        return (\n          <div className=\"ds-accordion__item\" key={item.id}>\n            <h3 className=\"ds-accordion__heading\">\n              <button\n                type=\"button\"\n                id={headerId}\n                className=\"ds-accordion__trigger\"\n                aria-expanded={isOpen}\n                aria-controls={panelId}\n                onClick={() => toggle(item.id)}\n              >\n                <span>{item.title}</span>\n                <span className=\"ds-accordion__icon\" aria-hidden=\"true\" />\n              </button>\n            </h3>\n            <div\n              id={panelId}\n              className=\"ds-accordion__panel\"\n              role=\"region\"\n              aria-labelledby={headerId}\n              hidden={!isOpen}\n            >\n              <div className=\"ds-accordion__content\">{item.content}</div>\n            </div>\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";AAAA,SAAS,OAAO,gBAAgB;AAgDlB,SAQE,KARF;AA3BP,SAAS,UAAU;AAAA,EACxB,QAAQ,CAAC;AAAA,EACT,WAAW;AAAA,EACX,cAAc,CAAC;AAAA,EACf,YAAY;AACd,GAAG;AACD,QAAM,SAAS,MAAM;AACrB,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,MAAM,IAAI,IAAI,WAAW,CAAC;AAEjE,WAAS,OAAO,IAAI;AAClB,eAAW,CAAC,SAAS;AACnB,YAAM,OAAO,IAAI,IAAI,WAAW,OAAO,CAAC,CAAC;AACzC,UAAI,KAAK,IAAI,EAAE,EAAG,MAAK,OAAO,EAAE;AAAA,UAC3B,MAAK,IAAI,EAAE;AAChB,aAAO;AAAA,IACT,CAAC;AAAA,EACH;AAEA,SACE,oBAAC,SAAI,WAAW,CAAC,gBAAgB,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GACjE,gBAAM,IAAI,CAAC,SAAS;AACnB,UAAM,SAAS,QAAQ,IAAI,KAAK,EAAE;AAClC,UAAM,WAAW,GAAG,MAAM,IAAI,KAAK,EAAE;AACrC,UAAM,UAAU,GAAG,MAAM,IAAI,KAAK,EAAE;AACpC,WACE,qBAAC,SAAI,WAAU,sBACb;AAAA,0BAAC,QAAG,WAAU,yBACZ;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,IAAI;AAAA,UACJ,WAAU;AAAA,UACV,iBAAe;AAAA,UACf,iBAAe;AAAA,UACf,SAAS,MAAM,OAAO,KAAK,EAAE;AAAA,UAE7B;AAAA,gCAAC,UAAM,eAAK,OAAM;AAAA,YAClB,oBAAC,UAAK,WAAU,sBAAqB,eAAY,QAAO;AAAA;AAAA;AAAA,MAC1D,GACF;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,IAAI;AAAA,UACJ,WAAU;AAAA,UACV,MAAK;AAAA,UACL,mBAAiB;AAAA,UACjB,QAAQ,CAAC;AAAA,UAET,8BAAC,SAAI,WAAU,yBAAyB,eAAK,SAAQ;AAAA;AAAA,MACvD;AAAA,SAtBuC,KAAK,EAuB9C;AAAA,EAEJ,CAAC,GACH;AAEJ;","names":[]}

package/dist/chunk-45346SXP.js

@@ -0,0 +1,65 @@
+// src/components/Radio/Radio.jsx
+import { useContext } from "react";
+
+// src/components/Radio/RadioGroupContext.js
+import { createContext } from "react";
+var RadioGroupContext = createContext(null);
+
+// src/components/Radio/Radio.jsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function Radio({ label, value, className = "", ...rest }) {
+  const group = useContext(RadioGroupContext);
+  const groupProps = group ? {
+    name: group.name,
+    checked: group.value === value,
+    onChange: () => group.onChange?.(value)
+  } : {};
+  return /* @__PURE__ */ jsxs("label", { className: ["ds-radio", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "radio",
+        className: "ds-radio__input",
+        value,
+        ...groupProps,
+        ...rest
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: "ds-radio__dot", "aria-hidden": "true" }),
+    label != null && /* @__PURE__ */ jsx("span", { className: "ds-radio__label", children: label })
+  ] });
+}
+
+// src/components/Radio/RadioGroup.jsx
+import { useId, useMemo } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function RadioGroup({
+  name,
+  value,
+  onChange,
+  options,
+  children,
+  className = "",
+  ...rest
+}) {
+  const autoName = useId();
+  const ctx = useMemo(
+    () => ({ name: name ?? autoName, value, onChange }),
+    [name, autoName, value, onChange]
+  );
+  return /* @__PURE__ */ jsx2(RadioGroupContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx2(
+    "div",
+    {
+      role: "radiogroup",
+      className: ["ds-radio-group", className].filter(Boolean).join(" "),
+      ...rest,
+      children: options ? options.map((opt) => /* @__PURE__ */ jsx2(Radio, { value: opt.value, label: opt.label }, opt.value)) : children
+    }
+  ) });
+}
+
+export {
+  Radio,
+  RadioGroup
+};
+//# sourceMappingURL=chunk-45346SXP.js.map

package/dist/chunk-45346SXP.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Radio/Radio.jsx","../src/components/Radio/RadioGroupContext.js","../src/components/Radio/RadioGroup.jsx"],"sourcesContent":["import { useContext } from \"react\";\nimport { RadioGroupContext } from \"./RadioGroupContext.js\";\nimport \"./Radio.css\";\n\n/**\n * Radio button with a styled indicator over a native <input type=\"radio\">.\n * Inside a RadioGroup it inherits `name` and selection state automatically;\n * standalone, pass `name`/`checked`/`onChange` yourself via `...rest`.\n *\n * @param {object} props\n * @param {import(\"react\").ReactNode} [props.label] - Visible label text.\n * @param {string} [props.value] - This option's value (used by RadioGroup).\n * @param {string} [props.className]\n * @returns {import(\"react\").ReactElement}\n */\nexport function Radio({ label, value, className = \"\", ...rest }) {\n  const group = useContext(RadioGroupContext);\n\n  const groupProps = group\n    ? {\n        name: group.name,\n        checked: group.value === value,\n        onChange: () => group.onChange?.(value),\n      }\n    : {};\n\n  return (\n    <label className={[\"ds-radio\", className].filter(Boolean).join(\" \")}>\n      <input\n        type=\"radio\"\n        className=\"ds-radio__input\"\n        value={value}\n        {...groupProps}\n        {...rest}\n      />\n      <span className=\"ds-radio__dot\" aria-hidden=\"true\" />\n      {label != null && <span className=\"ds-radio__label\">{label}</span>}\n    </label>\n  );\n}\n","import { createContext } from \"react\";\n\n/**\n * Lets a RadioGroup share its `name` and controlled value/onChange with any\n * Radio rendered inside it, without prop-drilling. `null` when a Radio is\n * used standalone.\n */\nexport const RadioGroupContext = createContext(null);\n","import { useId, useMemo } from \"react\";\nimport { RadioGroupContext } from \"./RadioGroupContext.js\";\nimport { Radio } from \"./Radio.jsx\";\nimport \"./Radio.css\";\n\n/**\n * Groups Radios under one `name` with a single controlled selection. Provide\n * either an `options` array or Radio children.\n *\n * @param {object} props\n * @param {string} [props.name] - Shared input name. Auto-generated if omitted.\n * @param {string} [props.value] - Currently selected value (controlled).\n * @param {(value: string) => void} [props.onChange]\n * @param {{ value: string, label: import(\"react\").ReactNode }[]} [props.options]\n * @param {import(\"react\").ReactNode} [props.children]\n * @param {string} [props.className]\n * @returns {import(\"react\").ReactElement}\n */\nexport function RadioGroup({\n  name,\n  value,\n  onChange,\n  options,\n  children,\n  className = \"\",\n  ...rest\n}) {\n  const autoName = useId();\n  const ctx = useMemo(\n    () => ({ name: name ?? autoName, value, onChange }),\n    [name, autoName, value, onChange]\n  );\n\n  return (\n    <RadioGroupContext.Provider value={ctx}>\n      <div\n        role=\"radiogroup\"\n        className={[\"ds-radio-group\", className].filter(Boolean).join(\" \")}\n        {...rest}\n      >\n        {options\n          ? options.map((opt) => (\n              <Radio key={opt.value} value={opt.value} label={opt.label} />\n            ))\n          : children}\n      </div>\n    </RadioGroupContext.Provider>\n  );\n}\n"],"mappings":";AAAA,SAAS,kBAAkB;;;ACA3B,SAAS,qBAAqB;AAOvB,IAAM,oBAAoB,cAAc,IAAI;;;ADoB/C,SACE,KADF;AAZG,SAAS,MAAM,EAAE,OAAO,OAAO,YAAY,IAAI,GAAG,KAAK,GAAG;AAC/D,QAAM,QAAQ,WAAW,iBAAiB;AAE1C,QAAM,aAAa,QACf;AAAA,IACE,MAAM,MAAM;AAAA,IACZ,SAAS,MAAM,UAAU;AAAA,IACzB,UAAU,MAAM,MAAM,WAAW,KAAK;AAAA,EACxC,IACA,CAAC;AAEL,SACE,qBAAC,WAAM,WAAW,CAAC,YAAY,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAChE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAU;AAAA,QACV;AAAA,QACC,GAAG;AAAA,QACH,GAAG;AAAA;AAAA,IACN;AAAA,IACA,oBAAC,UAAK,WAAU,iBAAgB,eAAY,QAAO;AAAA,IAClD,SAAS,QAAQ,oBAAC,UAAK,WAAU,mBAAmB,iBAAM;AAAA,KAC7D;AAEJ;;;AEvCA,SAAS,OAAO,eAAe;AA0CjB,gBAAAA,YAAA;AAxBP,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,GAAG;AACL,GAAG;AACD,QAAM,WAAW,MAAM;AACvB,QAAM,MAAM;AAAA,IACV,OAAO,EAAE,MAAM,QAAQ,UAAU,OAAO,SAAS;AAAA,IACjD,CAAC,MAAM,UAAU,OAAO,QAAQ;AAAA,EAClC;AAEA,SACE,gBAAAA,KAAC,kBAAkB,UAAlB,EAA2B,OAAO,KACjC,0BAAAA;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAW,CAAC,kBAAkB,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,MAChE,GAAG;AAAA,MAEH,oBACG,QAAQ,IAAI,CAAC,QACX,gBAAAA,KAAC,SAAsB,OAAO,IAAI,OAAO,OAAO,IAAI,SAAxC,IAAI,KAA2C,CAC5D,IACD;AAAA;AAAA,EACN,GACF;AAEJ;","names":["jsx"]}

package/dist/chunk-BAISLPWP.js

@@ -0,0 +1,14 @@
+// src/components/Checkbox/Checkbox.jsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function Checkbox({ label, className = "", ...rest }) {
+  return /* @__PURE__ */ jsxs("label", { className: ["ds-checkbox", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsx("input", { type: "checkbox", className: "ds-checkbox__input", ...rest }),
+    /* @__PURE__ */ jsx("span", { className: "ds-checkbox__box", "aria-hidden": "true" }),
+    label != null && /* @__PURE__ */ jsx("span", { className: "ds-checkbox__label", children: label })
+  ] });
+}
+
+export {
+  Checkbox
+};
+//# sourceMappingURL=chunk-BAISLPWP.js.map

package/dist/chunk-BAISLPWP.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Checkbox/Checkbox.jsx"],"sourcesContent":["import \"./Checkbox.css\";\n\n/**\n * Checkbox with a styled indicator over a native <input type=\"checkbox\">, so\n * keyboard/focus/toggle behavior stays native. Controlled or uncontrolled via\n * `...rest` (checked/defaultChecked, onChange).\n *\n * @param {object} props\n * @param {import(\"react\").ReactNode} [props.label] - Visible label text.\n * @param {string} [props.className]\n * @returns {import(\"react\").ReactElement}\n */\nexport function Checkbox({ label, className = \"\", ...rest }) {\n  return (\n    <label className={[\"ds-checkbox\", className].filter(Boolean).join(\" \")}>\n      <input type=\"checkbox\" className=\"ds-checkbox__input\" {...rest} />\n      <span className=\"ds-checkbox__box\" aria-hidden=\"true\" />\n      {label != null && <span className=\"ds-checkbox__label\">{label}</span>}\n    </label>\n  );\n}\n"],"mappings":";AAcI,SACE,KADF;AAFG,SAAS,SAAS,EAAE,OAAO,YAAY,IAAI,GAAG,KAAK,GAAG;AAC3D,SACE,qBAAC,WAAM,WAAW,CAAC,eAAe,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GACnE;AAAA,wBAAC,WAAM,MAAK,YAAW,WAAU,sBAAsB,GAAG,MAAM;AAAA,IAChE,oBAAC,UAAK,WAAU,oBAAmB,eAAY,QAAO;AAAA,IACrD,SAAS,QAAQ,oBAAC,UAAK,WAAU,sBAAsB,iBAAM;AAAA,KAChE;AAEJ;","names":[]}

package/dist/chunk-CT2TMR44.js

@@ -0,0 +1 @@
+//# sourceMappingURL=chunk-CT2TMR44.js.map

package/dist/chunk-CT2TMR44.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chunk-DD5VKG3L.js

@@ -0,0 +1,22 @@
+// src/components/Switch/Switch.jsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function Switch({ label, className = "", ...rest }) {
+  return /* @__PURE__ */ jsxs("label", { className: ["ds-switch", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "checkbox",
+        role: "switch",
+        className: "ds-switch__input",
+        ...rest
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: "ds-switch__track", "aria-hidden": "true", children: /* @__PURE__ */ jsx("span", { className: "ds-switch__thumb" }) }),
+    label != null && /* @__PURE__ */ jsx("span", { className: "ds-switch__label", children: label })
+  ] });
+}
+
+export {
+  Switch
+};
+//# sourceMappingURL=chunk-DD5VKG3L.js.map

package/dist/chunk-DD5VKG3L.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Switch/Switch.jsx"],"sourcesContent":["import \"./Switch.css\";\n\n/**\n * Toggle switch built on a native <input type=\"checkbox\"> — same semantics as\n * a checkbox, styled as a sliding track. Controlled or uncontrolled via\n * `...rest` (checked/defaultChecked, onChange).\n *\n * @param {object} props\n * @param {import(\"react\").ReactNode} [props.label] - Visible label text.\n * @param {string} [props.className]\n * @returns {import(\"react\").ReactElement}\n */\nexport function Switch({ label, className = \"\", ...rest }) {\n  return (\n    <label className={[\"ds-switch\", className].filter(Boolean).join(\" \")}>\n      <input\n        type=\"checkbox\"\n        role=\"switch\"\n        className=\"ds-switch__input\"\n        {...rest}\n      />\n      <span className=\"ds-switch__track\" aria-hidden=\"true\">\n        <span className=\"ds-switch__thumb\" />\n      </span>\n      {label != null && <span className=\"ds-switch__label\">{label}</span>}\n    </label>\n  );\n}\n"],"mappings":";AAcI,SACE,KADF;AAFG,SAAS,OAAO,EAAE,OAAO,YAAY,IAAI,GAAG,KAAK,GAAG;AACzD,SACE,qBAAC,WAAM,WAAW,CAAC,aAAa,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GACjE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,MAAK;AAAA,QACL,WAAU;AAAA,QACT,GAAG;AAAA;AAAA,IACN;AAAA,IACA,oBAAC,UAAK,WAAU,oBAAmB,eAAY,QAC7C,8BAAC,UAAK,WAAU,oBAAmB,GACrC;AAAA,IACC,SAAS,QAAQ,oBAAC,UAAK,WAAU,oBAAoB,iBAAM;AAAA,KAC9D;AAEJ;","names":[]}

package/dist/chunk-HLP2MPQ6.js

@@ -0,0 +1,110 @@
+// src/components/Modal/Modal.jsx
+import { useCallback, useEffect, useRef } from "react";
+import { createPortal } from "react-dom";
+import { jsx, jsxs } from "react/jsx-runtime";
+var FOCUSABLE = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
+function Modal({
+  open,
+  onClose,
+  title,
+  size = "md",
+  children,
+  className = ""
+}) {
+  const panelRef = useRef(null);
+  const titleId = useRef(
+    `ds-modal-${Math.random().toString(36).slice(2, 9)}`
+  ).current;
+  const handleKeyDown = useCallback(
+    (event) => {
+      if (event.key === "Escape") {
+        event.stopPropagation();
+        onClose?.();
+        return;
+      }
+      if (event.key !== "Tab") return;
+      const nodes = panelRef.current?.querySelectorAll(FOCUSABLE);
+      if (!nodes || nodes.length === 0) {
+        event.preventDefault();
+        return;
+      }
+      const first = nodes[0];
+      const last = nodes[nodes.length - 1];
+      const active = document.activeElement;
+      if (event.shiftKey && active === first) {
+        event.preventDefault();
+        last.focus();
+      } else if (!event.shiftKey && active === last) {
+        event.preventDefault();
+        first.focus();
+      }
+    },
+    [onClose]
+  );
+  useEffect(() => {
+    if (!open) return void 0;
+    const previouslyFocused = document.activeElement;
+    const { overflow } = document.body.style;
+    document.body.style.overflow = "hidden";
+    const nodes = panelRef.current?.querySelectorAll(FOCUSABLE);
+    if (nodes && nodes.length > 0) nodes[0].focus();
+    else panelRef.current?.focus();
+    return () => {
+      document.body.style.overflow = overflow;
+      if (previouslyFocused instanceof HTMLElement) previouslyFocused.focus();
+    };
+  }, [open]);
+  if (!open) return null;
+  return createPortal(
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: ["ds-modal", className].filter(Boolean).join(" "),
+        onKeyDown: handleKeyDown,
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "ds-modal__backdrop",
+              onClick: onClose,
+              "data-testid": "ds-modal-backdrop"
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ref: panelRef,
+              className: `ds-modal__panel ds-modal__panel--${size}`,
+              role: "dialog",
+              "aria-modal": "true",
+              "aria-labelledby": title ? titleId : void 0,
+              tabIndex: -1,
+              children: [
+                title != null && /* @__PURE__ */ jsxs("div", { className: "ds-modal__header", children: [
+                  /* @__PURE__ */ jsx("h2", { id: titleId, className: "ds-modal__title", children: title }),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: "ds-modal__close",
+                      "aria-label": "Close",
+                      onClick: onClose,
+                      children: "\xD7"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: "ds-modal__body", children })
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    document.body
+  );
+}
+
+export {
+  Modal
+};
+//# sourceMappingURL=chunk-HLP2MPQ6.js.map

package/dist/chunk-HLP2MPQ6.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Modal/Modal.jsx"],"sourcesContent":["import { useCallback, useEffect, useRef } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport \"./Modal.css\";\n\nconst FOCUSABLE =\n  'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\n/**\n * Accessible dialog rendered in a portal on document.body. Handles focus trap,\n * Escape-to-close, backdrop click, body scroll lock, and returns focus to the\n * element that was focused before it opened. Nothing renders when `open` is\n * false.\n *\n * @param {object} props\n * @param {boolean} props.open\n * @param {() => void} props.onClose\n * @param {import(\"react\").ReactNode} [props.title]\n * @param {\"sm\"|\"md\"|\"lg\"} [props.size] - Panel max-width. Default \"md\".\n * @param {import(\"react\").ReactNode} [props.children]\n * @param {string} [props.className]\n * @returns {import(\"react\").ReactPortal | null}\n */\nexport function Modal({\n  open,\n  onClose,\n  title,\n  size = \"md\",\n  children,\n  className = \"\",\n}) {\n  const panelRef = useRef(null);\n  const titleId = useRef(\n    `ds-modal-${Math.random().toString(36).slice(2, 9)}`\n  ).current;\n\n  const handleKeyDown = useCallback(\n    (event) => {\n      if (event.key === \"Escape\") {\n        event.stopPropagation();\n        onClose?.();\n        return;\n      }\n      if (event.key !== \"Tab\") return;\n\n      const nodes = panelRef.current?.querySelectorAll(FOCUSABLE);\n      if (!nodes || nodes.length === 0) {\n        event.preventDefault();\n        return;\n      }\n      const first = nodes[0];\n      const last = nodes[nodes.length - 1];\n      const active = document.activeElement;\n\n      if (event.shiftKey && active === first) {\n        event.preventDefault();\n        last.focus();\n      } else if (!event.shiftKey && active === last) {\n        event.preventDefault();\n        first.focus();\n      }\n    },\n    [onClose]\n  );\n\n  useEffect(() => {\n    if (!open) return undefined;\n\n    const previouslyFocused = document.activeElement;\n    const { overflow } = document.body.style;\n    document.body.style.overflow = \"hidden\";\n\n    // Focus the first focusable element (or the panel itself) on open.\n    const nodes = panelRef.current?.querySelectorAll(FOCUSABLE);\n    if (nodes && nodes.length > 0) nodes[0].focus();\n    else panelRef.current?.focus();\n\n    return () => {\n      document.body.style.overflow = overflow;\n      if (previouslyFocused instanceof HTMLElement) previouslyFocused.focus();\n    };\n  }, [open]);\n\n  if (!open) return null;\n\n  return createPortal(\n    <div\n      className={[\"ds-modal\", className].filter(Boolean).join(\" \")}\n      onKeyDown={handleKeyDown}\n    >\n      <div\n        className=\"ds-modal__backdrop\"\n        onClick={onClose}\n        data-testid=\"ds-modal-backdrop\"\n      />\n      <div\n        ref={panelRef}\n        className={`ds-modal__panel ds-modal__panel--${size}`}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={title ? titleId : undefined}\n        tabIndex={-1}\n      >\n        {title != null && (\n          <div className=\"ds-modal__header\">\n            <h2 id={titleId} className=\"ds-modal__title\">\n              {title}\n            </h2>\n            <button\n              type=\"button\"\n              className=\"ds-modal__close\"\n              aria-label=\"Close\"\n              onClick={onClose}\n            >\n              ×\n            </button>\n          </div>\n        )}\n        <div className=\"ds-modal__body\">{children}</div>\n      </div>\n    </div>,\n    document.body\n  );\n}\n"],"mappings":";AAAA,SAAS,aAAa,WAAW,cAAc;AAC/C,SAAS,oBAAoB;AAwFvB,cAcI,YAdJ;AArFN,IAAM,YACJ;AAiBK,SAAS,MAAM;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,YAAY;AACd,GAAG;AACD,QAAM,WAAW,OAAO,IAAI;AAC5B,QAAM,UAAU;AAAA,IACd,YAAY,KAAK,OAAO,EAAE,SAAS,EAAE,EAAE,MAAM,GAAG,CAAC,CAAC;AAAA,EACpD,EAAE;AAEF,QAAM,gBAAgB;AAAA,IACpB,CAAC,UAAU;AACT,UAAI,MAAM,QAAQ,UAAU;AAC1B,cAAM,gBAAgB;AACtB,kBAAU;AACV;AAAA,MACF;AACA,UAAI,MAAM,QAAQ,MAAO;AAEzB,YAAM,QAAQ,SAAS,SAAS,iBAAiB,SAAS;AAC1D,UAAI,CAAC,SAAS,MAAM,WAAW,GAAG;AAChC,cAAM,eAAe;AACrB;AAAA,MACF;AACA,YAAM,QAAQ,MAAM,CAAC;AACrB,YAAM,OAAO,MAAM,MAAM,SAAS,CAAC;AACnC,YAAM,SAAS,SAAS;AAExB,UAAI,MAAM,YAAY,WAAW,OAAO;AACtC,cAAM,eAAe;AACrB,aAAK,MAAM;AAAA,MACb,WAAW,CAAC,MAAM,YAAY,WAAW,MAAM;AAC7C,cAAM,eAAe;AACrB,cAAM,MAAM;AAAA,MACd;AAAA,IACF;AAAA,IACA,CAAC,OAAO;AAAA,EACV;AAEA,YAAU,MAAM;AACd,QAAI,CAAC,KAAM,QAAO;AAElB,UAAM,oBAAoB,SAAS;AACnC,UAAM,EAAE,SAAS,IAAI,SAAS,KAAK;AACnC,aAAS,KAAK,MAAM,WAAW;AAG/B,UAAM,QAAQ,SAAS,SAAS,iBAAiB,SAAS;AAC1D,QAAI,SAAS,MAAM,SAAS,EAAG,OAAM,CAAC,EAAE,MAAM;AAAA,QACzC,UAAS,SAAS,MAAM;AAE7B,WAAO,MAAM;AACX,eAAS,KAAK,MAAM,WAAW;AAC/B,UAAI,6BAA6B,YAAa,mBAAkB,MAAM;AAAA,IACxE;AAAA,EACF,GAAG,CAAC,IAAI,CAAC;AAET,MAAI,CAAC,KAAM,QAAO;AAElB,SAAO;AAAA,IACL;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,CAAC,YAAY,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,QAC3D,WAAW;AAAA,QAEX;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,SAAS;AAAA,cACT,eAAY;AAAA;AAAA,UACd;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,KAAK;AAAA,cACL,WAAW,oCAAoC,IAAI;AAAA,cACnD,MAAK;AAAA,cACL,cAAW;AAAA,cACX,mBAAiB,QAAQ,UAAU;AAAA,cACnC,UAAU;AAAA,cAET;AAAA,yBAAS,QACR,qBAAC,SAAI,WAAU,oBACb;AAAA,sCAAC,QAAG,IAAI,SAAS,WAAU,mBACxB,iBACH;AAAA,kBACA;AAAA,oBAAC;AAAA;AAAA,sBACC,MAAK;AAAA,sBACL,WAAU;AAAA,sBACV,cAAW;AAAA,sBACX,SAAS;AAAA,sBACV;AAAA;AAAA,kBAED;AAAA,mBACF;AAAA,gBAEF,oBAAC,SAAI,WAAU,kBAAkB,UAAS;AAAA;AAAA;AAAA,UAC5C;AAAA;AAAA;AAAA,IACF;AAAA,IACA,SAAS;AAAA,EACX;AACF;","names":[]}

package/dist/chunk-HPOL5NKF.js

@@ -0,0 +1,22 @@
+// src/components/Select/Select.jsx
+import { jsx } from "react/jsx-runtime";
+function Select({
+  size = "md",
+  invalid = false,
+  className = "",
+  children,
+  ...rest
+}) {
+  const classes = [
+    "ds-select",
+    `ds-select--${size}`,
+    invalid ? "ds-select--invalid" : "",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("select", { className: classes, "aria-invalid": invalid || void 0, ...rest, children });
+}
+
+export {
+  Select
+};
+//# sourceMappingURL=chunk-HPOL5NKF.js.map

package/dist/chunk-HPOL5NKF.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Select/Select.jsx"],"sourcesContent":["import \"./Select.css\";\n\n/**\n * Native <select> styled to match Input. Keeping it native avoids a\n * dependency and stays accessible for free. Pass <option> children.\n *\n * @param {object} props\n * @param {\"sm\"|\"md\"|\"lg\"} [props.size] - Control height/padding. Default \"md\".\n * @param {boolean} [props.invalid] - Applies error styling + aria-invalid.\n * @param {import(\"react\").ReactNode} [props.children]\n * @param {string} [props.className]\n * @returns {import(\"react\").ReactElement}\n */\nexport function Select({\n  size = \"md\",\n  invalid = false,\n  className = \"\",\n  children,\n  ...rest\n}) {\n  const classes = [\n    \"ds-select\",\n    `ds-select--${size}`,\n    invalid ? \"ds-select--invalid\" : \"\",\n    className,\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <select className={classes} aria-invalid={invalid || undefined} {...rest}>\n      {children}\n    </select>\n  );\n}\n"],"mappings":";AA8BI;AAjBG,SAAS,OAAO;AAAA,EACrB,OAAO;AAAA,EACP,UAAU;AAAA,EACV,YAAY;AAAA,EACZ;AAAA,EACA,GAAG;AACL,GAAG;AACD,QAAM,UAAU;AAAA,IACd;AAAA,IACA,cAAc,IAAI;AAAA,IAClB,UAAU,uBAAuB;AAAA,IACjC;AAAA,EACF,EACG,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,oBAAC,YAAO,WAAW,SAAS,gBAAc,WAAW,QAAY,GAAG,MACjE,UACH;AAEJ;","names":[]}

package/dist/chunk-I3NS5MAC.js

@@ -0,0 +1,23 @@
+// src/components/Textarea/Textarea.jsx
+import { jsx } from "react/jsx-runtime";
+function Textarea({ invalid = false, rows = 4, className = "", ...rest }) {
+  const classes = [
+    "ds-textarea",
+    invalid ? "ds-textarea--invalid" : "",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      className: classes,
+      rows,
+      "aria-invalid": invalid || void 0,
+      ...rest
+    }
+  );
+}
+
+export {
+  Textarea
+};
+//# sourceMappingURL=chunk-I3NS5MAC.js.map

package/dist/chunk-I3NS5MAC.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Textarea/Textarea.jsx"],"sourcesContent":["import \"./Textarea.css\";\n\n/**\n * Multi-line text input. Shares Input's field styling. All native <textarea>\n * props pass through via `...rest`.\n *\n * @param {object} props\n * @param {boolean} [props.invalid] - Applies error styling + aria-invalid.\n * @param {number} [props.rows] - Default 4.\n * @param {string} [props.className]\n * @returns {import(\"react\").ReactElement}\n */\nexport function Textarea({ invalid = false, rows = 4, className = \"\", ...rest }) {\n  const classes = [\n    \"ds-textarea\",\n    invalid ? \"ds-textarea--invalid\" : \"\",\n    className,\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <textarea\n      className={classes}\n      rows={rows}\n      aria-invalid={invalid || undefined}\n      {...rest}\n    />\n  );\n}\n"],"mappings":";AAsBI;AAVG,SAAS,SAAS,EAAE,UAAU,OAAO,OAAO,GAAG,YAAY,IAAI,GAAG,KAAK,GAAG;AAC/E,QAAM,UAAU;AAAA,IACd;AAAA,IACA,UAAU,yBAAyB;AAAA,IACnC;AAAA,EACF,EACG,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX;AAAA,MACA,gBAAc,WAAW;AAAA,MACxB,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}

package/dist/chunk-LPEUQ2DE.js

@@ -0,0 +1,48 @@
+import {
+  Label
+} from "./chunk-VRGTUKSJ.js";
+
+// src/components/FormField/FormField.jsx
+import { cloneElement, isValidElement, useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function FormField({
+  label,
+  help,
+  error,
+  required = false,
+  htmlFor,
+  children,
+  className = "",
+  ...rest
+}) {
+  const autoId = useId();
+  const id = htmlFor ?? autoId;
+  const helpId = help ? `${id}-help` : void 0;
+  const errorId = error ? `${id}-error` : void 0;
+  const describedBy = [helpId, errorId].filter(Boolean).join(" ") || void 0;
+  const control = isValidElement(children) ? cloneElement(children, {
+    id,
+    // Preserve any describedby the control already declared.
+    "aria-describedby": [children.props["aria-describedby"], describedBy].filter(Boolean).join(" ") || void 0,
+    invalid: error ? true : children.props.invalid,
+    required: required || children.props.required
+  }) : children;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: ["ds-form-field", className].filter(Boolean).join(" "),
+      ...rest,
+      children: [
+        label != null && /* @__PURE__ */ jsx(Label, { htmlFor: id, required, children: label }),
+        control,
+        help != null && /* @__PURE__ */ jsx("span", { id: helpId, className: "ds-form-field__help", children: help }),
+        error != null && /* @__PURE__ */ jsx("span", { id: errorId, className: "ds-form-field__error", role: "alert", children: error })
+      ]
+    }
+  );
+}
+
+export {
+  FormField
+};
+//# sourceMappingURL=chunk-LPEUQ2DE.js.map

package/dist/chunk-LPEUQ2DE.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/FormField/FormField.jsx"],"sourcesContent":["import { cloneElement, isValidElement, useId } from \"react\";\nimport { Label } from \"../Label/Label.jsx\";\nimport \"./FormField.css\";\n\n/**\n * Wraps a single form control with a label plus optional help/error text, and\n * wires up accessibility: it generates an id, links the label via `htmlFor`,\n * connects help/error text through `aria-describedby`, and sets `aria-invalid`\n * + the control's `invalid` styling when `error` is present. The control is\n * passed as the only child (Input, Textarea, Select, etc.).\n *\n * @param {object} props\n * @param {import(\"react\").ReactNode} [props.label]\n * @param {import(\"react\").ReactNode} [props.help] - Hint text below the control.\n * @param {import(\"react\").ReactNode} [props.error] - Error text; also marks the control invalid.\n * @param {boolean} [props.required]\n * @param {string} [props.htmlFor] - Override the auto-generated control id.\n * @param {import(\"react\").ReactElement} props.children - The control element.\n * @param {string} [props.className]\n * @returns {import(\"react\").ReactElement}\n */\nexport function FormField({\n  label,\n  help,\n  error,\n  required = false,\n  htmlFor,\n  children,\n  className = \"\",\n  ...rest\n}) {\n  const autoId = useId();\n  const id = htmlFor ?? autoId;\n  const helpId = help ? `${id}-help` : undefined;\n  const errorId = error ? `${id}-error` : undefined;\n  const describedBy = [helpId, errorId].filter(Boolean).join(\" \") || undefined;\n\n  const control = isValidElement(children)\n    ? cloneElement(children, {\n        id,\n        // Preserve any describedby the control already declared.\n        \"aria-describedby\":\n          [children.props[\"aria-describedby\"], describedBy]\n            .filter(Boolean)\n            .join(\" \") || undefined,\n        invalid: error ? true : children.props.invalid,\n        required: required || children.props.required,\n      })\n    : children;\n\n  return (\n    <div\n      className={[\"ds-form-field\", className].filter(Boolean).join(\" \")}\n      {...rest}\n    >\n      {label != null && (\n        <Label htmlFor={id} required={required}>\n          {label}\n        </Label>\n      )}\n      {control}\n      {help != null && (\n        <span id={helpId} className=\"ds-form-field__help\">\n          {help}\n        </span>\n      )}\n      {error != null && (\n        <span id={errorId} className=\"ds-form-field__error\" role=\"alert\">\n          {error}\n        </span>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;AAAA,SAAS,cAAc,gBAAgB,aAAa;AAmDhD,SAKI,KALJ;AA9BG,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,GAAG;AACL,GAAG;AACD,QAAM,SAAS,MAAM;AACrB,QAAM,KAAK,WAAW;AACtB,QAAM,SAAS,OAAO,GAAG,EAAE,UAAU;AACrC,QAAM,UAAU,QAAQ,GAAG,EAAE,WAAW;AACxC,QAAM,cAAc,CAAC,QAAQ,OAAO,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,KAAK;AAEnE,QAAM,UAAU,eAAe,QAAQ,IACnC,aAAa,UAAU;AAAA,IACrB;AAAA;AAAA,IAEA,oBACE,CAAC,SAAS,MAAM,kBAAkB,GAAG,WAAW,EAC7C,OAAO,OAAO,EACd,KAAK,GAAG,KAAK;AAAA,IAClB,SAAS,QAAQ,OAAO,SAAS,MAAM;AAAA,IACvC,UAAU,YAAY,SAAS,MAAM;AAAA,EACvC,CAAC,IACD;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,CAAC,iBAAiB,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,MAC/D,GAAG;AAAA,MAEH;AAAA,iBAAS,QACR,oBAAC,SAAM,SAAS,IAAI,UACjB,iBACH;AAAA,QAED;AAAA,QACA,QAAQ,QACP,oBAAC,UAAK,IAAI,QAAQ,WAAU,uBACzB,gBACH;AAAA,QAED,SAAS,QACR,oBAAC,UAAK,IAAI,SAAS,WAAU,wBAAuB,MAAK,SACtD,iBACH;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

package/dist/chunk-LY5MPGW2.js

@@ -0,0 +1,129 @@
+// src/components/Menu/Menu.jsx
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Menu({ trigger, items = [], align = "start", className = "" }) {
+  const [open, setOpen] = useState(false);
+  const [activeIndex, setActiveIndex] = useState(-1);
+  const rootRef = useRef(null);
+  const itemRefs = useRef([]);
+  const close = useCallback(() => {
+    setOpen(false);
+    setActiveIndex(-1);
+  }, []);
+  useEffect(() => {
+    if (!open) return void 0;
+    function onPointerDown(event) {
+      if (!rootRef.current?.contains(event.target)) close();
+    }
+    document.addEventListener("pointerdown", onPointerDown);
+    return () => document.removeEventListener("pointerdown", onPointerDown);
+  }, [open, close]);
+  useLayoutEffect(() => {
+    if (open && activeIndex >= 0) itemRefs.current[activeIndex]?.focus();
+  }, [open, activeIndex]);
+  const firstEnabled = () => items.findIndex((it) => !it.disabled);
+  const lastEnabled = () => {
+    for (let i = items.length - 1; i >= 0; i -= 1)
+      if (!items[i].disabled) return i;
+    return -1;
+  };
+  const nextEnabled = (from, dir) => {
+    let i = from;
+    for (let step = 0; step < items.length; step += 1) {
+      i = (i + dir + items.length) % items.length;
+      if (!items[i].disabled) return i;
+    }
+    return from;
+  };
+  function onTriggerKeyDown(event) {
+    if (event.key === "ArrowDown" || event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      setOpen(true);
+      setActiveIndex(firstEnabled());
+    } else if (event.key === "ArrowUp") {
+      event.preventDefault();
+      setOpen(true);
+      setActiveIndex(lastEnabled());
+    }
+  }
+  function onMenuKeyDown(event) {
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        setActiveIndex((i) => nextEnabled(i < 0 ? -1 : i, 1));
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        setActiveIndex((i) => nextEnabled(i < 0 ? 0 : i, -1));
+        break;
+      case "Home":
+        event.preventDefault();
+        setActiveIndex(firstEnabled());
+        break;
+      case "End":
+        event.preventDefault();
+        setActiveIndex(lastEnabled());
+        break;
+      case "Escape":
+        event.preventDefault();
+        close();
+        rootRef.current?.querySelector(".ds-menu__trigger")?.focus();
+        break;
+      default:
+        break;
+    }
+  }
+  function select(item) {
+    if (item.disabled) return;
+    item.onSelect?.();
+    close();
+    rootRef.current?.querySelector(".ds-menu__trigger")?.focus();
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: rootRef,
+      className: ["ds-menu", className].filter(Boolean).join(" "),
+      children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "ds-menu__trigger",
+            "aria-haspopup": "menu",
+            "aria-expanded": open,
+            onClick: () => open ? close() : setOpen(true),
+            onKeyDown: onTriggerKeyDown,
+            children: trigger
+          }
+        ),
+        open && /* @__PURE__ */ jsx(
+          "ul",
+          {
+            className: `ds-menu__list ds-menu__list--${align}`,
+            role: "menu",
+            onKeyDown: onMenuKeyDown,
+            children: items.map((item, index) => /* @__PURE__ */ jsx("li", { role: "none", children: /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                role: "menuitem",
+                ref: (el) => itemRefs.current[index] = el,
+                className: "ds-menu__item",
+                tabIndex: index === activeIndex ? 0 : -1,
+                disabled: item.disabled,
+                onClick: () => select(item),
+                children: item.label
+              }
+            ) }, index))
+          }
+        )
+      ]
+    }
+  );
+}
+
+export {
+  Menu
+};
+//# sourceMappingURL=chunk-LY5MPGW2.js.map

package/dist/chunk-LY5MPGW2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Menu/Menu.jsx"],"sourcesContent":["import { useCallback, useEffect, useLayoutEffect, useRef, useState } from \"react\";\nimport \"./Menu.css\";\n\n/**\n * @typedef {object} MenuItem\n * @property {import(\"react\").ReactNode} label\n * @property {() => void} [onSelect]\n * @property {boolean} [disabled]\n */\n\n/**\n * Dropdown menu: a trigger button that toggles a popover list. Closes on\n * outside click and Escape; Up/Down arrows move a roving focus between items,\n * Enter/Space activates. Uses role=\"menu\"/\"menuitem\".\n *\n * @param {object} props\n * @param {import(\"react\").ReactNode} props.trigger - Trigger button content.\n * @param {MenuItem[]} props.items\n * @param {\"start\"|\"end\"} [props.align] - Which edge the menu aligns to. Default \"start\".\n * @param {string} [props.className]\n * @returns {import(\"react\").ReactElement}\n */\nexport function Menu({ trigger, items = [], align = \"start\", className = \"\" }) {\n  const [open, setOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState(-1);\n  const rootRef = useRef(null);\n  const itemRefs = useRef([]);\n\n  const close = useCallback(() => {\n    setOpen(false);\n    setActiveIndex(-1);\n  }, []);\n\n  useEffect(() => {\n    if (!open) return undefined;\n    function onPointerDown(event) {\n      if (!rootRef.current?.contains(event.target)) close();\n    }\n    document.addEventListener(\"pointerdown\", onPointerDown);\n    return () => document.removeEventListener(\"pointerdown\", onPointerDown);\n  }, [open, close]);\n\n  // Keep DOM focus on the active item so screen readers track it.\n  useLayoutEffect(() => {\n    if (open && activeIndex >= 0) itemRefs.current[activeIndex]?.focus();\n  }, [open, activeIndex]);\n\n  const firstEnabled = () => items.findIndex((it) => !it.disabled);\n  const lastEnabled = () => {\n    for (let i = items.length - 1; i >= 0; i -= 1)\n      if (!items[i].disabled) return i;\n    return -1;\n  };\n  const nextEnabled = (from, dir) => {\n    let i = from;\n    for (let step = 0; step < items.length; step += 1) {\n      i = (i + dir + items.length) % items.length;\n      if (!items[i].disabled) return i;\n    }\n    return from;\n  };\n\n  function onTriggerKeyDown(event) {\n    if (event.key === \"ArrowDown\" || event.key === \"Enter\" || event.key === \" \") {\n      event.preventDefault();\n      setOpen(true);\n      setActiveIndex(firstEnabled());\n    } else if (event.key === \"ArrowUp\") {\n      event.preventDefault();\n      setOpen(true);\n      setActiveIndex(lastEnabled());\n    }\n  }\n\n  function onMenuKeyDown(event) {\n    switch (event.key) {\n      case \"ArrowDown\":\n        event.preventDefault();\n        setActiveIndex((i) => nextEnabled(i < 0 ? -1 : i, 1));\n        break;\n      case \"ArrowUp\":\n        event.preventDefault();\n        setActiveIndex((i) => nextEnabled(i < 0 ? 0 : i, -1));\n        break;\n      case \"Home\":\n        event.preventDefault();\n        setActiveIndex(firstEnabled());\n        break;\n      case \"End\":\n        event.preventDefault();\n        setActiveIndex(lastEnabled());\n        break;\n      case \"Escape\":\n        event.preventDefault();\n        close();\n        rootRef.current?.querySelector(\".ds-menu__trigger\")?.focus();\n        break;\n      default:\n        break;\n    }\n  }\n\n  function select(item) {\n    if (item.disabled) return;\n    item.onSelect?.();\n    close();\n    rootRef.current?.querySelector(\".ds-menu__trigger\")?.focus();\n  }\n\n  return (\n    <div\n      ref={rootRef}\n      className={[\"ds-menu\", className].filter(Boolean).join(\" \")}\n    >\n      <button\n        type=\"button\"\n        className=\"ds-menu__trigger\"\n        aria-haspopup=\"menu\"\n        aria-expanded={open}\n        onClick={() => (open ? close() : setOpen(true))}\n        onKeyDown={onTriggerKeyDown}\n      >\n        {trigger}\n      </button>\n      {open && (\n        <ul\n          className={`ds-menu__list ds-menu__list--${align}`}\n          role=\"menu\"\n          onKeyDown={onMenuKeyDown}\n        >\n          {items.map((item, index) => (\n            <li key={index} role=\"none\">\n              <button\n                type=\"button\"\n                role=\"menuitem\"\n                ref={(el) => (itemRefs.current[index] = el)}\n                className=\"ds-menu__item\"\n                tabIndex={index === activeIndex ? 0 : -1}\n                disabled={item.disabled}\n                onClick={() => select(item)}\n              >\n                {item.label}\n              </button>\n            </li>\n          ))}\n        </ul>\n      )}\n    </div>\n  );\n}\n"],"mappings":";AAAA,SAAS,aAAa,WAAW,iBAAiB,QAAQ,gBAAgB;AA8GtE,SAIE,KAJF;AAxFG,SAAS,KAAK,EAAE,SAAS,QAAQ,CAAC,GAAG,QAAQ,SAAS,YAAY,GAAG,GAAG;AAC7E,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,EAAE;AACjD,QAAM,UAAU,OAAO,IAAI;AAC3B,QAAM,WAAW,OAAO,CAAC,CAAC;AAE1B,QAAM,QAAQ,YAAY,MAAM;AAC9B,YAAQ,KAAK;AACb,mBAAe,EAAE;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,YAAU,MAAM;AACd,QAAI,CAAC,KAAM,QAAO;AAClB,aAAS,cAAc,OAAO;AAC5B,UAAI,CAAC,QAAQ,SAAS,SAAS,MAAM,MAAM,EAAG,OAAM;AAAA,IACtD;AACA,aAAS,iBAAiB,eAAe,aAAa;AACtD,WAAO,MAAM,SAAS,oBAAoB,eAAe,aAAa;AAAA,EACxE,GAAG,CAAC,MAAM,KAAK,CAAC;AAGhB,kBAAgB,MAAM;AACpB,QAAI,QAAQ,eAAe,EAAG,UAAS,QAAQ,WAAW,GAAG,MAAM;AAAA,EACrE,GAAG,CAAC,MAAM,WAAW,CAAC;AAEtB,QAAM,eAAe,MAAM,MAAM,UAAU,CAAC,OAAO,CAAC,GAAG,QAAQ;AAC/D,QAAM,cAAc,MAAM;AACxB,aAAS,IAAI,MAAM,SAAS,GAAG,KAAK,GAAG,KAAK;AAC1C,UAAI,CAAC,MAAM,CAAC,EAAE,SAAU,QAAO;AACjC,WAAO;AAAA,EACT;AACA,QAAM,cAAc,CAAC,MAAM,QAAQ;AACjC,QAAI,IAAI;AACR,aAAS,OAAO,GAAG,OAAO,MAAM,QAAQ,QAAQ,GAAG;AACjD,WAAK,IAAI,MAAM,MAAM,UAAU,MAAM;AACrC,UAAI,CAAC,MAAM,CAAC,EAAE,SAAU,QAAO;AAAA,IACjC;AACA,WAAO;AAAA,EACT;AAEA,WAAS,iBAAiB,OAAO;AAC/B,QAAI,MAAM,QAAQ,eAAe,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;AAC3E,YAAM,eAAe;AACrB,cAAQ,IAAI;AACZ,qBAAe,aAAa,CAAC;AAAA,IAC/B,WAAW,MAAM,QAAQ,WAAW;AAClC,YAAM,eAAe;AACrB,cAAQ,IAAI;AACZ,qBAAe,YAAY,CAAC;AAAA,IAC9B;AAAA,EACF;AAEA,WAAS,cAAc,OAAO;AAC5B,YAAQ,MAAM,KAAK;AAAA,MACjB,KAAK;AACH,cAAM,eAAe;AACrB,uBAAe,CAAC,MAAM,YAAY,IAAI,IAAI,KAAK,GAAG,CAAC,CAAC;AACpD;AAAA,MACF,KAAK;AACH,cAAM,eAAe;AACrB,uBAAe,CAAC,MAAM,YAAY,IAAI,IAAI,IAAI,GAAG,EAAE,CAAC;AACpD;AAAA,MACF,KAAK;AACH,cAAM,eAAe;AACrB,uBAAe,aAAa,CAAC;AAC7B;AAAA,MACF,KAAK;AACH,cAAM,eAAe;AACrB,uBAAe,YAAY,CAAC;AAC5B;AAAA,MACF,KAAK;AACH,cAAM,eAAe;AACrB,cAAM;AACN,gBAAQ,SAAS,cAAc,mBAAmB,GAAG,MAAM;AAC3D;AAAA,MACF;AACE;AAAA,IACJ;AAAA,EACF;AAEA,WAAS,OAAO,MAAM;AACpB,QAAI,KAAK,SAAU;AACnB,SAAK,WAAW;AAChB,UAAM;AACN,YAAQ,SAAS,cAAc,mBAAmB,GAAG,MAAM;AAAA,EAC7D;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW,CAAC,WAAW,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,MAE1D;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,WAAU;AAAA,YACV,iBAAc;AAAA,YACd,iBAAe;AAAA,YACf,SAAS,MAAO,OAAO,MAAM,IAAI,QAAQ,IAAI;AAAA,YAC7C,WAAW;AAAA,YAEV;AAAA;AAAA,QACH;AAAA,QACC,QACC;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,gCAAgC,KAAK;AAAA,YAChD,MAAK;AAAA,YACL,WAAW;AAAA,YAEV,gBAAM,IAAI,CAAC,MAAM,UAChB,oBAAC,QAAe,MAAK,QACnB;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,MAAK;AAAA,gBACL,KAAK,CAAC,OAAQ,SAAS,QAAQ,KAAK,IAAI;AAAA,gBACxC,WAAU;AAAA,gBACV,UAAU,UAAU,cAAc,IAAI;AAAA,gBACtC,UAAU,KAAK;AAAA,gBACf,SAAS,MAAM,OAAO,IAAI;AAAA,gBAEzB,eAAK;AAAA;AAAA,YACR,KAXO,KAYT,CACD;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":[]}