@5voltfx/design-system 0.1.0 → 0.2.0

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

package/dist/chunk-NE25337V.js

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

package/dist/chunk-NE25337V.js.map

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

package/dist/chunk-R42A3ZCY.js

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

package/dist/chunk-R42A3ZCY.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Input/Input.jsx"],"sourcesContent":["import \"./Input.css\";\n\n/**\n * Text-like input. Controlled or uncontrolled — all native <input> props pass\n * through via `...rest` (value/defaultValue, onChange, type, placeholder, …).\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 {string} [props.className]\n * @returns {import(\"react\").ReactElement}\n */\nexport function Input({ size = \"md\", invalid = false, className = \"\", ...rest }) {\n  const classes = [\n    \"ds-input\",\n    `ds-input--${size}`,\n    invalid ? \"ds-input--invalid\" : \"\",\n    className,\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <input className={classes} aria-invalid={invalid || undefined} {...rest} />\n  );\n}\n"],"mappings":";AAuBI;AAXG,SAAS,MAAM,EAAE,OAAO,MAAM,UAAU,OAAO,YAAY,IAAI,GAAG,KAAK,GAAG;AAC/E,QAAM,UAAU;AAAA,IACd;AAAA,IACA,aAAa,IAAI;AAAA,IACjB,UAAU,sBAAsB;AAAA,IAChC;AAAA,EACF,EACG,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,oBAAC,WAAM,WAAW,SAAS,gBAAc,WAAW,QAAY,GAAG,MAAM;AAE7E;","names":[]}

package/dist/chunk-SFECTSQP.js

@@ -0,0 +1,68 @@
+// src/components/Layout/Container.jsx
+import { jsx } from "react/jsx-runtime";
+function Container({ as: Component = "div", className = "", ...rest }) {
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      className: ["ds-container", className].filter(Boolean).join(" "),
+      ...rest
+    }
+  );
+}
+
+// src/components/Layout/Stack.jsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function Stack({
+  as: Component = "div",
+  gap = "4",
+  direction = "column",
+  align,
+  className = "",
+  style,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx2(
+    Component,
+    {
+      className: ["ds-stack", className].filter(Boolean).join(" "),
+      style: {
+        "--ds-stack-gap": `var(--ds-space-${gap})`,
+        flexDirection: direction,
+        alignItems: align,
+        ...style
+      },
+      ...rest
+    }
+  );
+}
+
+// src/components/Layout/Grid.jsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function Grid({
+  as: Component = "div",
+  columns = 2,
+  gap = "4",
+  className = "",
+  style,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx3(
+    Component,
+    {
+      className: ["ds-grid", className].filter(Boolean).join(" "),
+      style: {
+        gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
+        gap: `var(--ds-space-${gap})`,
+        ...style
+      },
+      ...rest
+    }
+  );
+}
+
+export {
+  Container,
+  Stack,
+  Grid
+};
+//# sourceMappingURL=chunk-SFECTSQP.js.map

package/dist/chunk-SFECTSQP.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Layout/Container.jsx","../src/components/Layout/Stack.jsx","../src/components/Layout/Grid.jsx"],"sourcesContent":["import \"./Layout.css\";\n\nexport function Container({ as: Component = \"div\", className = \"\", ...rest }) {\n  return (\n    <Component\n      className={[\"ds-container\", className].filter(Boolean).join(\" \")}\n      {...rest}\n    />\n  );\n}\n","import \"./Layout.css\";\n\nexport function Stack({\n  as: Component = \"div\",\n  gap = \"4\",\n  direction = \"column\",\n  align,\n  className = \"\",\n  style,\n  ...rest\n}) {\n  return (\n    <Component\n      className={[\"ds-stack\", className].filter(Boolean).join(\" \")}\n      style={{\n        \"--ds-stack-gap\": `var(--ds-space-${gap})`,\n        flexDirection: direction,\n        alignItems: align,\n        ...style,\n      }}\n      {...rest}\n    />\n  );\n}\n","import \"./Layout.css\";\n\nexport function Grid({\n  as: Component = \"div\",\n  columns = 2,\n  gap = \"4\",\n  className = \"\",\n  style,\n  ...rest\n}) {\n  return (\n    <Component\n      className={[\"ds-grid\", className].filter(Boolean).join(\" \")}\n      style={{\n        gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,\n        gap: `var(--ds-space-${gap})`,\n        ...style,\n      }}\n      {...rest}\n    />\n  );\n}\n"],"mappings":";AAII;AAFG,SAAS,UAAU,EAAE,IAAI,YAAY,OAAO,YAAY,IAAI,GAAG,KAAK,GAAG;AAC5E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,CAAC,gBAAgB,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,MAC9D,GAAG;AAAA;AAAA,EACN;AAEJ;;;ACGI,gBAAAA,YAAA;AAVG,SAAS,MAAM;AAAA,EACpB,IAAI,YAAY;AAAA,EAChB,MAAM;AAAA,EACN,YAAY;AAAA,EACZ;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA,GAAG;AACL,GAAG;AACD,SACE,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,CAAC,YAAY,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,MAC3D,OAAO;AAAA,QACL,kBAAkB,kBAAkB,GAAG;AAAA,QACvC,eAAe;AAAA,QACf,YAAY;AAAA,QACZ,GAAG;AAAA,MACL;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;;;ACZI,gBAAAC,YAAA;AATG,SAAS,KAAK;AAAA,EACnB,IAAI,YAAY;AAAA,EAChB,UAAU;AAAA,EACV,MAAM;AAAA,EACN,YAAY;AAAA,EACZ;AAAA,EACA,GAAG;AACL,GAAG;AACD,SACE,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,CAAC,WAAW,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,MAC1D,OAAO;AAAA,QACL,qBAAqB,UAAU,OAAO;AAAA,QACtC,KAAK,kBAAkB,GAAG;AAAA,QAC1B,GAAG;AAAA,MACL;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;","names":["jsx","jsx"]}