@5voltfx/design-system 0.1.0 → 0.2.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-3LTHHL5C.js

@@ -0,0 +1,11 @@
+// src/components/Card/Card.jsx
+import { jsx } from "react/jsx-runtime";
+function Card({ as: Component = "div", className = "", ...rest }) {
+  const classes = ["ds-card", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx(Component, { className: classes, ...rest });
+}
+
+export {
+  Card
+};
+//# sourceMappingURL=chunk-3LTHHL5C.js.map

package/dist/chunk-3LTHHL5C.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Card/Card.jsx"],"sourcesContent":["import \"./Card.css\";\n\nexport function Card({ as: Component = \"div\", className = \"\", ...rest }) {\n  const classes = [\"ds-card\", className].filter(Boolean).join(\" \");\n  return <Component className={classes} {...rest} />;\n}\n"],"mappings":";AAIS;AAFF,SAAS,KAAK,EAAE,IAAI,YAAY,OAAO,YAAY,IAAI,GAAG,KAAK,GAAG;AACvE,QAAM,UAAU,CAAC,WAAW,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAC/D,SAAO,oBAAC,aAAU,WAAW,SAAU,GAAG,MAAM;AAClD;","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-5KN5TPGG.js

@@ -0,0 +1,30 @@
+import {
+  ThemeSwitcher
+} from "./chunk-YCZXDQJZ.js";
+
+// src/components/Footer/Footer.jsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function Footer({
+  brand = "5VoltFX/Matt Welker",
+  showThemeSwitcher = true,
+  left,
+  right,
+  className = ""
+}) {
+  const year = (/* @__PURE__ */ new Date()).getFullYear();
+  return /* @__PURE__ */ jsx("footer", { className: ["ds-footer", className].filter(Boolean).join(" "), children: /* @__PURE__ */ jsxs("div", { className: "ds-footer__inner", children: [
+    /* @__PURE__ */ jsx("div", { className: "ds-footer__left", children: left }),
+    /* @__PURE__ */ jsx("div", { className: "ds-footer__center", children: showThemeSwitcher && /* @__PURE__ */ jsx(ThemeSwitcher, {}) }),
+    /* @__PURE__ */ jsx("div", { className: "ds-footer__right", children: right ?? /* @__PURE__ */ jsxs("span", { className: "ds-footer__copyright", children: [
+      "\xA9 ",
+      year,
+      " ",
+      brand
+    ] }) })
+  ] }) });
+}
+
+export {
+  Footer
+};
+//# sourceMappingURL=chunk-5KN5TPGG.js.map

package/dist/chunk-5KN5TPGG.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Footer/Footer.jsx"],"sourcesContent":["import { ThemeSwitcher } from \"../ThemeSwitcher/ThemeSwitcher.jsx\";\nimport \"./Footer.css\";\n\n/**\n * Generalizes the 3 existing footers: 5voltfx.com's simple centered\n * copyright, song-chart's minimal bar, and mattwelker.com's 3-column\n * layout (auth links / theme swatches / copyright). `left` and `right`\n * default to nothing and a copyright string respectively, so a single\n * centered ThemeSwitcher is the only thing rendered out of the box.\n */\nexport function Footer({\n  brand = \"5VoltFX/Matt Welker\",\n  showThemeSwitcher = true,\n  left,\n  right,\n  className = \"\",\n}) {\n  const year = new Date().getFullYear();\n\n  return (\n    <footer className={[\"ds-footer\", className].filter(Boolean).join(\" \")}>\n      <div className=\"ds-footer__inner\">\n        <div className=\"ds-footer__left\">{left}</div>\n        <div className=\"ds-footer__center\">\n          {showThemeSwitcher && <ThemeSwitcher />}\n        </div>\n        <div className=\"ds-footer__right\">\n          {right ?? (\n            <span className=\"ds-footer__copyright\">\n              © {year} {brand}\n            </span>\n          )}\n        </div>\n      </div>\n    </footer>\n  );\n}\n"],"mappings":";;;;;AAsBQ,cAMI,YANJ;AAZD,SAAS,OAAO;AAAA,EACrB,QAAQ;AAAA,EACR,oBAAoB;AAAA,EACpB;AAAA,EACA;AAAA,EACA,YAAY;AACd,GAAG;AACD,QAAM,QAAO,oBAAI,KAAK,GAAE,YAAY;AAEpC,SACE,oBAAC,YAAO,WAAW,CAAC,aAAa,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAClE,+BAAC,SAAI,WAAU,oBACb;AAAA,wBAAC,SAAI,WAAU,mBAAmB,gBAAK;AAAA,IACvC,oBAAC,SAAI,WAAU,qBACZ,+BAAqB,oBAAC,iBAAc,GACvC;AAAA,IACA,oBAAC,SAAI,WAAU,oBACZ,mBACC,qBAAC,UAAK,WAAU,wBAAuB;AAAA;AAAA,MAClC;AAAA,MAAK;AAAA,MAAE;AAAA,OACZ,GAEJ;AAAA,KACF,GACF;AAEJ;","names":[]}

package/dist/chunk-AYAMNHNF.js

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

package/dist/chunk-AYAMNHNF.js.map

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

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-BOPVPQLB.js

@@ -0,0 +1,25 @@
+import {
+  Nav
+} from "./chunk-TNWQQ56F.js";
+
+// src/components/Header/Header.jsx
+import { Link } from "react-router-dom";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Header({
+  brand,
+  brandHref = "/",
+  links = [],
+  actions,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsx("header", { className: ["ds-header", className].filter(Boolean).join(" "), children: /* @__PURE__ */ jsxs("div", { className: "ds-header__inner", children: [
+    /* @__PURE__ */ jsx(Link, { to: brandHref, className: "ds-header__brand", children: brand }),
+    links.length > 0 && /* @__PURE__ */ jsx(Nav, { links, className: "ds-header__nav" }),
+    actions && /* @__PURE__ */ jsx("div", { className: "ds-header__actions", children: actions })
+  ] }) });
+}
+
+export {
+  Header
+};
+//# sourceMappingURL=chunk-BOPVPQLB.js.map

package/dist/chunk-BOPVPQLB.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Header/Header.jsx"],"sourcesContent":["import { Link } from \"react-router-dom\";\nimport { Nav } from \"../Nav/Nav.jsx\";\nimport \"./Header.css\";\n\n/**\n * Generic header shell with brand/nav/actions slots, so each site's\n * bespoke chrome (song-chart's auth-aware menu + fullscreen toggle,\n * mattwelker.com's audio-loop toggle + Venmo link, 5voltfx.com's plain\n * logo-with-text-fallback) stays app-specific and is passed in rather\n * than encoded into this component.\n */\nexport function Header({\n  brand,\n  brandHref = \"/\",\n  links = [],\n  actions,\n  className = \"\",\n}) {\n  return (\n    <header className={[\"ds-header\", className].filter(Boolean).join(\" \")}>\n      <div className=\"ds-header__inner\">\n        <Link to={brandHref} className=\"ds-header__brand\">\n          {brand}\n        </Link>\n        {links.length > 0 && <Nav links={links} className=\"ds-header__nav\" />}\n        {actions && <div className=\"ds-header__actions\">{actions}</div>}\n      </div>\n    </header>\n  );\n}\n"],"mappings":";;;;;AAAA,SAAS,YAAY;AAoBf,SACE,KADF;AATC,SAAS,OAAO;AAAA,EACrB;AAAA,EACA,YAAY;AAAA,EACZ,QAAQ,CAAC;AAAA,EACT;AAAA,EACA,YAAY;AACd,GAAG;AACD,SACE,oBAAC,YAAO,WAAW,CAAC,aAAa,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAClE,+BAAC,SAAI,WAAU,oBACb;AAAA,wBAAC,QAAK,IAAI,WAAW,WAAU,oBAC5B,iBACH;AAAA,IACC,MAAM,SAAS,KAAK,oBAAC,OAAI,OAAc,WAAU,kBAAiB;AAAA,IAClE,WAAW,oBAAC,SAAI,WAAU,sBAAsB,mBAAQ;AAAA,KAC3D,GACF;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-EW3S3GK6.js

@@ -0,0 +1,41 @@
+// src/components/Typography/Heading.jsx
+import { jsx } from "react/jsx-runtime";
+var SCALE_BY_LEVEL = { 1: "700", 2: "600", 3: "500", 4: "400", 5: "300", 6: "200" };
+function Heading({
+  level = 1,
+  size,
+  decorative = false,
+  className = "",
+  children,
+  ...rest
+}) {
+  const Component = `h${level}`;
+  const scale = size ?? SCALE_BY_LEVEL[level] ?? "300";
+  const classes = [
+    "ds-heading",
+    `ds-heading--${scale}`,
+    decorative ? "ds-heading--decorative" : "",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx(Component, { className: classes, ...rest, children });
+}
+
+// src/components/Typography/Text.jsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function Text({
+  as: Component = "p",
+  size = "200",
+  tone = "default",
+  className = "",
+  children,
+  ...rest
+}) {
+  const classes = ["ds-text", `ds-text--${size}`, `ds-text--${tone}`, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx2(Component, { className: classes, ...rest, children });
+}
+
+export {
+  Heading,
+  Text
+};
+//# sourceMappingURL=chunk-EW3S3GK6.js.map

package/dist/chunk-EW3S3GK6.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Typography/Heading.jsx","../src/components/Typography/Text.jsx"],"sourcesContent":["import \"./Typography.css\";\n\nconst SCALE_BY_LEVEL = { 1: \"700\", 2: \"600\", 3: \"500\", 4: \"400\", 5: \"300\", 6: \"200\" };\n\nexport function Heading({\n  level = 1,\n  size,\n  decorative = false,\n  className = \"\",\n  children,\n  ...rest\n}) {\n  const Component = `h${level}`;\n  const scale = size ?? SCALE_BY_LEVEL[level] ?? \"300\";\n  const classes = [\n    \"ds-heading\",\n    `ds-heading--${scale}`,\n    decorative ? \"ds-heading--decorative\" : \"\",\n    className,\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <Component className={classes} {...rest}>\n      {children}\n    </Component>\n  );\n}\n","import \"./Typography.css\";\n\nexport function Text({\n  as: Component = \"p\",\n  size = \"200\",\n  tone = \"default\",\n  className = \"\",\n  children,\n  ...rest\n}) {\n  const classes = [\"ds-text\", `ds-text--${size}`, `ds-text--${tone}`, className]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <Component className={classes} {...rest}>\n      {children}\n    </Component>\n  );\n}\n"],"mappings":";AAwBI;AAtBJ,IAAM,iBAAiB,EAAE,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,MAAM;AAE7E,SAAS,QAAQ;AAAA,EACtB,QAAQ;AAAA,EACR;AAAA,EACA,aAAa;AAAA,EACb,YAAY;AAAA,EACZ;AAAA,EACA,GAAG;AACL,GAAG;AACD,QAAM,YAAY,IAAI,KAAK;AAC3B,QAAM,QAAQ,QAAQ,eAAe,KAAK,KAAK;AAC/C,QAAM,UAAU;AAAA,IACd;AAAA,IACA,eAAe,KAAK;AAAA,IACpB,aAAa,2BAA2B;AAAA,IACxC;AAAA,EACF,EACG,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,oBAAC,aAAU,WAAW,SAAU,GAAG,MAChC,UACH;AAEJ;;;ACbI,gBAAAA,YAAA;AAbG,SAAS,KAAK;AAAA,EACnB,IAAI,YAAY;AAAA,EAChB,OAAO;AAAA,EACP,OAAO;AAAA,EACP,YAAY;AAAA,EACZ;AAAA,EACA,GAAG;AACL,GAAG;AACD,QAAM,UAAU,CAAC,WAAW,YAAY,IAAI,IAAI,YAAY,IAAI,IAAI,SAAS,EAC1E,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAA,KAAC,aAAU,WAAW,SAAU,GAAG,MAChC,UACH;AAEJ;","names":["jsx"]}

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":[]}