@hadoku/task-ui-components 0.0.0-stage → 4.20.3

package/dist/components/NumberInput.js

@@ -0,0 +1,131 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React, { useRef, useState, useEffect, useCallback } from "react";
+import { Icon } from "@wolffm/themes";
+/* empty css                  */
+const REPEAT_DELAY_MS = 400;
+const REPEAT_EVERY_MS = 60;
+const ICON_SIZE = { sm: 12, md: 14, lg: 16 };
+const NumberInput = React.forwardRef(
+  function NumberInput2({
+    size = "md",
+    increaseLabel = "Increase",
+    decreaseLabel = "Decrease",
+    className,
+    disabled,
+    readOnly,
+    onInput,
+    ...rest
+  }, ref) {
+    const inputRef = useRef(null);
+    const repeat = useRef({});
+    const [current, setCurrent] = useState(String(rest.value ?? rest.defaultValue ?? ""));
+    useEffect(() => {
+      if (rest.value !== void 0) setCurrent(String(rest.value));
+    }, [rest.value]);
+    const setRef = useCallback(
+      (node) => {
+        inputRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
+      [ref]
+    );
+    const stop = useCallback(() => {
+      clearTimeout(repeat.current.delay);
+      clearInterval(repeat.current.every);
+      repeat.current = {};
+    }, []);
+    useEffect(() => stop, [stop]);
+    const stepOnce = useCallback((dir) => {
+      const input = inputRef.current;
+      if (!input || input.disabled || input.readOnly) return false;
+      const before = input.value;
+      if (dir === 1) input.stepUp();
+      else input.stepDown();
+      if (input.value === before) return false;
+      input.dispatchEvent(new Event("input", { bubbles: true }));
+      input.dispatchEvent(new Event("change", { bubbles: true }));
+      return true;
+    }, []);
+    const start = (dir) => (e) => {
+      if (e.button !== 0) return;
+      e.preventDefault();
+      inputRef.current?.focus({ preventScroll: true });
+      stop();
+      if (!stepOnce(dir)) return;
+      repeat.current.delay = setTimeout(() => {
+        repeat.current.every = setInterval(() => {
+          if (!stepOnce(dir)) stop();
+        }, REPEAT_EVERY_MS);
+      }, REPEAT_DELAY_MS);
+    };
+    const n = current === "" ? NaN : Number(current);
+    const min = rest.min === void 0 || rest.min === "" ? -Infinity : Number(rest.min);
+    const max = rest.max === void 0 || rest.max === "" ? Infinity : Number(rest.max);
+    const locked = disabled || readOnly;
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: [
+          "hdk-number",
+          `hdk-number--${size}`,
+          disabled && "hdk-number--disabled",
+          className
+        ].filter(Boolean).join(" "),
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: setRef,
+              type: "number",
+              className: "hdk-number__input",
+              disabled,
+              readOnly,
+              onInput: (e) => {
+                setCurrent(e.currentTarget.value);
+                onInput?.(e);
+              },
+              ...rest
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { className: "hdk-number__steps", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                tabIndex: -1,
+                className: "hdk-number__step",
+                "aria-label": increaseLabel,
+                disabled: locked || n >= max,
+                onPointerDown: start(1),
+                onPointerUp: stop,
+                onPointerLeave: stop,
+                onPointerCancel: stop,
+                children: /* @__PURE__ */ jsx(Icon, { name: "chevron-up", size: ICON_SIZE[size] })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                tabIndex: -1,
+                className: "hdk-number__step",
+                "aria-label": decreaseLabel,
+                disabled: locked || n <= min,
+                onPointerDown: start(-1),
+                onPointerUp: stop,
+                onPointerLeave: stop,
+                onPointerCancel: stop,
+                children: /* @__PURE__ */ jsx(Icon, { name: "chevron-down", size: ICON_SIZE[size] })
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+export {
+  NumberInput
+};
+//# sourceMappingURL=NumberInput.js.map

package/dist/components/NumberInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberInput.js","sources":["../../src/components/NumberInput.tsx"],"sourcesContent":["/**\n * NumberInput Component\n * A themed number field with its own stepper, for the OS spinner arrows that\n * no CSS can style (controls.css removes them from a bare <input type=number>).\n *\n * It is a real <input type=\"number\"> with every input prop passed through, so\n * it works controlled (`value` + `onChange`) or uncontrolled (`defaultValue`),\n * submits in a form, and keeps native min/max/step validation and the arrow\n * keys. The buttons call the input's own stepUp()/stepDown() and then fire\n * `input` and `change`, so `onChange` sees an ordinary edit: React's value\n * tracker compares against what React last wrote, and stepUp() goes around it.\n *\n * Holding a button repeats, like the native spinner. The buttons are not tab\n * stops — the arrow keys on the field already step — but they are labelled.\n */\n\nimport React, { useCallback, useEffect, useRef, useState } from 'react'\nimport { Icon } from '@wolffm/themes'\nimport '../number-input.css'\n\nexport type NumberInputSize = 'sm' | 'md' | 'lg'\n\nexport interface NumberInputProps\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {\n  size?: NumberInputSize\n  /** Labels for the two buttons; default \"Increase\" / \"Decrease\". */\n  increaseLabel?: string\n  decreaseLabel?: string\n}\n\nconst REPEAT_DELAY_MS = 400\nconst REPEAT_EVERY_MS = 60\nconst ICON_SIZE: Record<NumberInputSize, number> = { sm: 12, md: 14, lg: 16 }\n\nexport const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(\n  function NumberInput(\n    {\n      size = 'md',\n      increaseLabel = 'Increase',\n      decreaseLabel = 'Decrease',\n      className,\n      disabled,\n      readOnly,\n      onInput,\n      ...rest\n    },\n    ref\n  ) {\n    const inputRef = useRef<HTMLInputElement | null>(null)\n    const repeat = useRef<{\n      delay?: ReturnType<typeof setTimeout>\n      every?: ReturnType<typeof setInterval>\n    }>({})\n    // Mirrors the field so the buttons can disable at min/max, controlled or not.\n    const [current, setCurrent] = useState<string>(String(rest.value ?? rest.defaultValue ?? ''))\n    useEffect(() => {\n      if (rest.value !== undefined) setCurrent(String(rest.value))\n    }, [rest.value])\n\n    const setRef = useCallback(\n      (node: HTMLInputElement | null) => {\n        inputRef.current = node\n        if (typeof ref === 'function') ref(node)\n        else if (ref) ref.current = node\n      },\n      [ref]\n    )\n\n    const stop = useCallback(() => {\n      clearTimeout(repeat.current.delay)\n      clearInterval(repeat.current.every)\n      repeat.current = {}\n    }, [])\n    useEffect(() => stop, [stop])\n\n    const stepOnce = useCallback((dir: 1 | -1) => {\n      const input = inputRef.current\n      if (!input || input.disabled || input.readOnly) return false\n      const before = input.value\n      if (dir === 1) input.stepUp()\n      else input.stepDown()\n      if (input.value === before) return false\n      input.dispatchEvent(new Event('input', { bubbles: true }))\n      input.dispatchEvent(new Event('change', { bubbles: true }))\n      return true\n    }, [])\n\n    const start = (dir: 1 | -1) => (e: React.PointerEvent) => {\n      if (e.button !== 0) return\n      // Keep focus (and the caret) in the field, as the native spinner does.\n      e.preventDefault()\n      inputRef.current?.focus({ preventScroll: true })\n      stop()\n      if (!stepOnce(dir)) return\n      repeat.current.delay = setTimeout(() => {\n        repeat.current.every = setInterval(() => {\n          if (!stepOnce(dir)) stop()\n        }, REPEAT_EVERY_MS)\n      }, REPEAT_DELAY_MS)\n    }\n\n    const n = current === '' ? NaN : Number(current)\n    const min = rest.min === undefined || rest.min === '' ? -Infinity : Number(rest.min)\n    const max = rest.max === undefined || rest.max === '' ? Infinity : Number(rest.max)\n    const locked = disabled || readOnly\n\n    return (\n      <span\n        className={[\n          'hdk-number',\n          `hdk-number--${size}`,\n          disabled && 'hdk-number--disabled',\n          className\n        ]\n          .filter(Boolean)\n          .join(' ')}\n      >\n        <input\n          ref={setRef}\n          type=\"number\"\n          className=\"hdk-number__input\"\n          disabled={disabled}\n          readOnly={readOnly}\n          onInput={e => {\n            setCurrent(e.currentTarget.value)\n            onInput?.(e)\n          }}\n          {...rest}\n        />\n        <span className=\"hdk-number__steps\">\n          <button\n            type=\"button\"\n            tabIndex={-1}\n            className=\"hdk-number__step\"\n            aria-label={increaseLabel}\n            disabled={locked || n >= max}\n            onPointerDown={start(1)}\n            onPointerUp={stop}\n            onPointerLeave={stop}\n            onPointerCancel={stop}\n          >\n            <Icon name=\"chevron-up\" size={ICON_SIZE[size]} />\n          </button>\n          <button\n            type=\"button\"\n            tabIndex={-1}\n            className=\"hdk-number__step\"\n            aria-label={decreaseLabel}\n            disabled={locked || n <= min}\n            onPointerDown={start(-1)}\n            onPointerUp={stop}\n            onPointerLeave={stop}\n            onPointerCancel={stop}\n          >\n            <Icon name=\"chevron-down\" size={ICON_SIZE[size]} />\n          </button>\n        </span>\n      </span>\n    )\n  }\n)\n"],"names":["NumberInput"],"mappings":"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"}

package/dist/components/Select.d.ts

@@ -0,0 +1,52 @@
+/**
+ * Select Component
+ * Themed single-select dropdown. The open list is a real ARIA listbox with
+ * full keyboard support, so it can replace a native <select> wherever the
+ * browser's own popup (unthemeable, OS-drawn) looks out of place.
+ *
+ * The list is portalled into the anchor's theme scope (see themeScopeOf) and
+ * positioned fixed from the trigger's rect, so it keeps the theme's tokens and
+ * escapes both `overflow: hidden` and transformed ancestors.
+ */
+import React from 'react';
+import { type IconName } from '@wolffm/themes';
+import '../select.css';
+import '../scrollbar.css';
+export type SelectVariant = 'outline' | 'filled' | 'ghost' | 'underline';
+export type SelectSize = 'sm' | 'md' | 'lg';
+export interface SelectOption<V extends string = string> {
+    value: V;
+    /** Plain text so typeahead can match it. */
+    label: string;
+    icon?: IconName;
+    /** Secondary line under the label in the open list. */
+    description?: string;
+    disabled?: boolean;
+}
+export interface SelectProps<V extends string = string> {
+    value: V | null;
+    onChange: (value: V) => void;
+    options: SelectOption<V>[];
+    /** Shown while `value` is null. */
+    placeholder?: string;
+    variant?: SelectVariant;
+    size?: SelectSize;
+    disabled?: boolean;
+    /** Required when no visible <label htmlFor={id}> names the control. */
+    'aria-label'?: string;
+    id?: string;
+    className?: string;
+}
+export declare function Select<V extends string = string>({ value, onChange, options, placeholder, variant, size, disabled, 'aria-label': ariaLabel, id, className }: SelectProps<V>): React.JSX.Element;
+export interface NativeSelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
+    variant?: SelectVariant;
+    size?: SelectSize;
+}
+/**
+ * A native <select> wearing the same trigger as <Select>. Use it where the
+ * OS picker is the better UX — long lists on mobile, forms that must submit
+ * natively. The popup itself stays OS-drawn; `color-scheme` from the theme
+ * gets it to the right light/dark mode.
+ */
+export declare function NativeSelect({ variant, size, className, children, ...rest }: NativeSelectProps): React.JSX.Element;
+//# sourceMappingURL=Select.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../src/components/Select.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAA2E,MAAM,OAAO,CAAA;AAE/F,OAAO,EAAQ,KAAK,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AACpD,OAAO,eAAe,CAAA;AACtB,OAAO,kBAAkB,CAAA;AAIzB,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,WAAW,CAAA;AACxE,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAE3C,MAAM,WAAW,YAAY,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IACrD,KAAK,EAAE,CAAC,CAAA;IACR,4CAA4C;IAC5C,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,uDAAuD;IACvD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,WAAW,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IACpD,KAAK,EAAE,CAAC,GAAG,IAAI,CAAA;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAA;IAC5B,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAA;IAC1B,mCAAmC;IACnC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,OAAO,CAAC,EAAE,aAAa,CAAA;IACvB,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,uEAAuE;IACvE,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAID,wBAAgB,MAAM,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,EAChD,KAAK,EACL,QAAQ,EACR,OAAO,EACP,WAAuB,EACvB,OAAmB,EACnB,IAAW,EACX,QAAgB,EAChB,YAAY,EAAE,SAAS,EACvB,EAAE,EACF,SAAS,EACV,EAAE,WAAW,CAAC,CAAC,CAAC,qBAqQhB;AAED,MAAM,WAAW,iBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IACnE,OAAO,CAAC,EAAE,aAAa,CAAA;IACvB,IAAI,CAAC,EAAE,UAAU,CAAA;CAClB;AAED;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,EAC3B,OAAmB,EACnB,IAAW,EACX,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,iBAAiB,qBAiBnB"}

package/dist/components/Select.js

@@ -0,0 +1,281 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useId, useState, useRef, useCallback, useLayoutEffect, useEffect } from "react";
+import { createPortal } from "react-dom";
+import { Icon } from "@wolffm/themes";
+/* empty css            */
+/* empty css               */
+import { themeScopeOf } from "../lib/themeScope.js";
+import { placeMenu } from "../lib/menuPlacement.js";
+const TYPEAHEAD_RESET_MS = 600;
+function Select({
+  value,
+  onChange,
+  options,
+  placeholder = "Select…",
+  variant = "outline",
+  size = "md",
+  disabled = false,
+  "aria-label": ariaLabel,
+  id,
+  className
+}) {
+  const autoId = useId();
+  const triggerId = id ?? `${autoId}-trigger`;
+  const listId = `${autoId}-list`;
+  const optionId = (i) => `${autoId}-opt-${i}`;
+  const [open, setOpen] = useState(false);
+  const [active, setActive] = useState(-1);
+  const [position, setPosition] = useState(null);
+  const [scope, setScope] = useState(null);
+  const triggerRef = useRef(null);
+  const listRef = useRef(null);
+  const typeahead = useRef({ text: "", at: 0 });
+  const selectedIndex = options.findIndex((o) => o.value === value);
+  const selected = selectedIndex >= 0 ? options[selectedIndex] : null;
+  const step = useCallback(
+    (from, dir) => {
+      for (let i = 1; i <= options.length; i++) {
+        const next = (from + dir * i + options.length) % options.length;
+        if (!options[next].disabled) return next;
+      }
+      return from;
+    },
+    [options]
+  );
+  const edge = useCallback(
+    (dir) => step(dir === 1 ? -1 : options.length, dir),
+    [options.length, step]
+  );
+  const openMenu = (start) => {
+    if (disabled || options.length === 0) return;
+    let initial = selectedIndex;
+    if (start === "first" || initial < 0) initial = edge(1);
+    if (start === "last") initial = edge(-1);
+    setActive(initial);
+    setScope(themeScopeOf(triggerRef.current));
+    setOpen(true);
+  };
+  const closeMenu = (refocus) => {
+    setOpen(false);
+    setPosition(null);
+    if (refocus) triggerRef.current?.focus();
+  };
+  const choose = (index) => {
+    const option = options[index];
+    if (!option || option.disabled) return;
+    onChange(option.value);
+    closeMenu(true);
+  };
+  const place = useCallback(() => {
+    const trigger = triggerRef.current;
+    if (!trigger) return;
+    setPosition(placeMenu(trigger.getBoundingClientRect(), listRef.current?.scrollHeight ?? 0));
+  }, []);
+  useLayoutEffect(() => {
+    if (open && scope) place();
+  }, [open, scope, place]);
+  const placed = position !== null;
+  useLayoutEffect(() => {
+    if (open && placed) listRef.current?.focus({ preventScroll: true });
+  }, [open, placed]);
+  useEffect(() => {
+    if (!open) return;
+    const onPointerDown = (e) => {
+      const target = e.target;
+      if (triggerRef.current?.contains(target) || listRef.current?.contains(target)) return;
+      closeMenu(false);
+    };
+    window.addEventListener("scroll", place, true);
+    window.addEventListener("resize", place);
+    document.addEventListener("pointerdown", onPointerDown);
+    return () => {
+      window.removeEventListener("scroll", place, true);
+      window.removeEventListener("resize", place);
+      document.removeEventListener("pointerdown", onPointerDown);
+    };
+  }, [open, place]);
+  useEffect(() => {
+    if (!open || active < 0) return;
+    document.getElementById(`${autoId}-opt-${active}`)?.scrollIntoView({ block: "nearest" });
+  }, [open, active, autoId]);
+  const matchTypeahead = (key) => {
+    const now = Date.now();
+    const t = typeahead.current;
+    t.text = now - t.at > TYPEAHEAD_RESET_MS ? key : t.text + key;
+    t.at = now;
+    const needle = t.text.toLowerCase();
+    const start = Math.max(active, 0);
+    for (let i = 0; i < options.length; i++) {
+      const offset = t.text.length === 1 ? i + 1 : i;
+      const idx = (start + offset) % options.length;
+      const o = options[idx];
+      if (!o.disabled && o.label.toLowerCase().startsWith(needle)) return idx;
+    }
+    return -1;
+  };
+  const onTriggerKeyDown = (e) => {
+    if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      openMenu();
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      openMenu("last");
+    } else if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
+      const idx = matchTypeahead(e.key);
+      if (idx >= 0) onChange(options[idx].value);
+    }
+  };
+  const onListKeyDown = (e) => {
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        setActive((a) => step(a, 1));
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        setActive((a) => step(a, -1));
+        break;
+      case "Home":
+        e.preventDefault();
+        setActive(edge(1));
+        break;
+      case "End":
+        e.preventDefault();
+        setActive(edge(-1));
+        break;
+      case "Enter":
+      case " ":
+        e.preventDefault();
+        choose(active);
+        break;
+      case "Escape":
+        e.preventDefault();
+        e.stopPropagation();
+        closeMenu(true);
+        break;
+      case "Tab":
+        closeMenu(false);
+        break;
+      default:
+        if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
+          const idx = matchTypeahead(e.key);
+          if (idx >= 0) setActive(idx);
+        }
+    }
+  };
+  const style = position ? {
+    left: position.left,
+    minWidth: position.width,
+    top: position.top,
+    bottom: position.bottom,
+    maxHeight: position.maxHeight
+  } : { visibility: "hidden" };
+  const iconSize = size === "lg" ? 18 : size === "sm" ? 14 : 16;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: [
+        "hdk-select",
+        `hdk-select--${variant}`,
+        `hdk-select--${size}`,
+        open && "hdk-select--open",
+        className
+      ].filter(Boolean).join(" "),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            ref: triggerRef,
+            id: triggerId,
+            type: "button",
+            className: "hdk-select__trigger",
+            "aria-haspopup": "listbox",
+            "aria-expanded": open,
+            "aria-controls": open ? listId : void 0,
+            "aria-label": ariaLabel,
+            disabled,
+            onClick: () => open ? closeMenu(true) : openMenu(),
+            onKeyDown: onTriggerKeyDown,
+            children: [
+              selected?.icon && /* @__PURE__ */ jsx(Icon, { name: selected.icon, size: iconSize }),
+              /* @__PURE__ */ jsx("span", { className: `hdk-select__value ${selected ? "" : "hdk-select__value--placeholder"}`, children: selected ? selected.label : placeholder }),
+              /* @__PURE__ */ jsx(Icon, { name: "chevron-down", size: iconSize, className: "hdk-select__chevron" })
+            ]
+          }
+        ),
+        open && scope && createPortal(
+          /* @__PURE__ */ jsx(
+            "ul",
+            {
+              ref: listRef,
+              id: listId,
+              role: "listbox",
+              tabIndex: -1,
+              "aria-labelledby": triggerId,
+              "aria-activedescendant": active >= 0 ? optionId(active) : void 0,
+              className: "hdk-select__menu hdk-scroll hdk-scroll--thin",
+              style,
+              onKeyDown: onListKeyDown,
+              children: options.map((o, i) => /* @__PURE__ */ jsxs(
+                "li",
+                {
+                  id: optionId(i),
+                  role: "option",
+                  "aria-selected": i === selectedIndex,
+                  "aria-disabled": o.disabled || void 0,
+                  className: [
+                    "hdk-select__option",
+                    i === active && "hdk-select__option--active",
+                    i === selectedIndex && "hdk-select__option--selected"
+                  ].filter(Boolean).join(" "),
+                  onPointerMove: () => !o.disabled && i !== active && setActive(i),
+                  onClick: () => choose(i),
+                  children: [
+                    o.icon && /* @__PURE__ */ jsx(Icon, { name: o.icon, size: iconSize }),
+                    /* @__PURE__ */ jsxs("span", { className: "hdk-select__option-text", children: [
+                      /* @__PURE__ */ jsx("span", { className: "hdk-select__option-label", children: o.label }),
+                      o.description && /* @__PURE__ */ jsx("span", { className: "hdk-select__option-desc", children: o.description })
+                    ] }),
+                    i === selectedIndex && /* @__PURE__ */ jsx(Icon, { name: "check", size: iconSize, className: "hdk-select__check" })
+                  ]
+                },
+                o.value
+              ))
+            }
+          ),
+          scope
+        )
+      ]
+    }
+  );
+}
+function NativeSelect({
+  variant = "outline",
+  size = "md",
+  className,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: ["hdk-select", `hdk-select--${variant}`, `hdk-select--${size}`, className].filter(Boolean).join(" "),
+      children: [
+        /* @__PURE__ */ jsx("select", { className: "hdk-select__trigger hdk-select__native", ...rest, children }),
+        /* @__PURE__ */ jsx(
+          Icon,
+          {
+            name: "chevron-down",
+            size: size === "lg" ? 18 : size === "sm" ? 14 : 16,
+            className: "hdk-select__chevron hdk-select__chevron--native"
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  NativeSelect,
+  Select
+};
+//# sourceMappingURL=Select.js.map

package/dist/components/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","sources":["../../src/components/Select.tsx"],"sourcesContent":["/**\n * Select Component\n * Themed single-select dropdown. The open list is a real ARIA listbox with\n * full keyboard support, so it can replace a native <select> wherever the\n * browser's own popup (unthemeable, OS-drawn) looks out of place.\n *\n * The list is portalled into the anchor's theme scope (see themeScopeOf) and\n * positioned fixed from the trigger's rect, so it keeps the theme's tokens and\n * escapes both `overflow: hidden` and transformed ancestors.\n */\n\nimport React, { useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from 'react'\nimport { createPortal } from 'react-dom'\nimport { Icon, type IconName } from '@wolffm/themes'\nimport '../select.css'\nimport '../scrollbar.css'\nimport { themeScopeOf } from '../lib/themeScope'\nimport { placeMenu, type MenuPosition } from '../lib/menuPlacement'\n\nexport type SelectVariant = 'outline' | 'filled' | 'ghost' | 'underline'\nexport type SelectSize = 'sm' | 'md' | 'lg'\n\nexport interface SelectOption<V extends string = string> {\n  value: V\n  /** Plain text so typeahead can match it. */\n  label: string\n  icon?: IconName\n  /** Secondary line under the label in the open list. */\n  description?: string\n  disabled?: boolean\n}\n\nexport interface SelectProps<V extends string = string> {\n  value: V | null\n  onChange: (value: V) => void\n  options: SelectOption<V>[]\n  /** Shown while `value` is null. */\n  placeholder?: string\n  variant?: SelectVariant\n  size?: SelectSize\n  disabled?: boolean\n  /** Required when no visible <label htmlFor={id}> names the control. */\n  'aria-label'?: string\n  id?: string\n  className?: string\n}\n\nconst TYPEAHEAD_RESET_MS = 600\n\nexport function Select<V extends string = string>({\n  value,\n  onChange,\n  options,\n  placeholder = 'Select…',\n  variant = 'outline',\n  size = 'md',\n  disabled = false,\n  'aria-label': ariaLabel,\n  id,\n  className\n}: SelectProps<V>) {\n  const autoId = useId()\n  const triggerId = id ?? `${autoId}-trigger`\n  const listId = `${autoId}-list`\n  const optionId = (i: number) => `${autoId}-opt-${i}`\n\n  const [open, setOpen] = useState(false)\n  const [active, setActive] = useState(-1)\n  const [position, setPosition] = useState<MenuPosition | null>(null)\n  const [scope, setScope] = useState<HTMLElement | null>(null)\n  const triggerRef = useRef<HTMLButtonElement>(null)\n  const listRef = useRef<HTMLUListElement>(null)\n  const typeahead = useRef({ text: '', at: 0 })\n\n  const selectedIndex = options.findIndex(o => o.value === value)\n  const selected = selectedIndex >= 0 ? options[selectedIndex] : null\n\n  const step = useCallback(\n    (from: number, dir: 1 | -1) => {\n      for (let i = 1; i <= options.length; i++) {\n        const next = (from + dir * i + options.length) % options.length\n        if (!options[next].disabled) return next\n      }\n      return from\n    },\n    [options]\n  )\n\n  const edge = useCallback(\n    (dir: 1 | -1) => step(dir === 1 ? -1 : options.length, dir),\n    [options.length, step]\n  )\n\n  const openMenu = (start?: 'first' | 'last') => {\n    if (disabled || options.length === 0) return\n    let initial = selectedIndex\n    if (start === 'first' || initial < 0) initial = edge(1)\n    if (start === 'last') initial = edge(-1)\n    setActive(initial)\n    setScope(themeScopeOf(triggerRef.current))\n    setOpen(true)\n  }\n\n  const closeMenu = (refocus: boolean) => {\n    setOpen(false)\n    setPosition(null)\n    if (refocus) triggerRef.current?.focus()\n  }\n\n  const choose = (index: number) => {\n    const option = options[index]\n    if (!option || option.disabled) return\n    onChange(option.value)\n    closeMenu(true)\n  }\n\n  const place = useCallback(() => {\n    const trigger = triggerRef.current\n    if (!trigger) return\n    setPosition(placeMenu(trigger.getBoundingClientRect(), listRef.current?.scrollHeight ?? 0))\n  }, [])\n\n  // Measure once the list exists, then follow the trigger while open.\n  useLayoutEffect(() => {\n    if (open && scope) place()\n  }, [open, scope, place])\n\n  // Focus only once placed: until then the list is visibility: hidden, and a\n  // hidden element silently refuses focus — keys would stay on the trigger.\n  const placed = position !== null\n  useLayoutEffect(() => {\n    if (open && placed) listRef.current?.focus({ preventScroll: true })\n  }, [open, placed])\n\n  useEffect(() => {\n    if (!open) return\n    const onPointerDown = (e: PointerEvent) => {\n      const target = e.target as Node\n      if (triggerRef.current?.contains(target) || listRef.current?.contains(target)) return\n      closeMenu(false)\n    }\n    // Capture, so scrolling ANY ancestor re-places the list.\n    window.addEventListener('scroll', place, true)\n    window.addEventListener('resize', place)\n    document.addEventListener('pointerdown', onPointerDown)\n    return () => {\n      window.removeEventListener('scroll', place, true)\n      window.removeEventListener('resize', place)\n      document.removeEventListener('pointerdown', onPointerDown)\n    }\n  }, [open, place])\n\n  // Keep the active option in view as the keyboard moves it.\n  useEffect(() => {\n    if (!open || active < 0) return\n    document.getElementById(`${autoId}-opt-${active}`)?.scrollIntoView({ block: 'nearest' })\n  }, [open, active, autoId])\n\n  const matchTypeahead = (key: string) => {\n    const now = Date.now()\n    const t = typeahead.current\n    t.text = now - t.at > TYPEAHEAD_RESET_MS ? key : t.text + key\n    t.at = now\n    const needle = t.text.toLowerCase()\n    const start = Math.max(active, 0)\n    for (let i = 0; i < options.length; i++) {\n      // A single repeated key cycles; a longer prefix stays on the current match.\n      const offset = t.text.length === 1 ? i + 1 : i\n      const idx = (start + offset) % options.length\n      const o = options[idx]\n      if (!o.disabled && o.label.toLowerCase().startsWith(needle)) return idx\n    }\n    return -1\n  }\n\n  const onTriggerKeyDown = (e: React.KeyboardEvent) => {\n    if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault()\n      openMenu()\n    } else if (e.key === 'ArrowUp') {\n      e.preventDefault()\n      openMenu('last')\n    } else if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {\n      // Typeahead on a closed select changes the value, like a native one.\n      const idx = matchTypeahead(e.key)\n      if (idx >= 0) onChange(options[idx].value)\n    }\n  }\n\n  const onListKeyDown = (e: React.KeyboardEvent) => {\n    switch (e.key) {\n      case 'ArrowDown':\n        e.preventDefault()\n        setActive(a => step(a, 1))\n        break\n      case 'ArrowUp':\n        e.preventDefault()\n        setActive(a => step(a, -1))\n        break\n      case 'Home':\n        e.preventDefault()\n        setActive(edge(1))\n        break\n      case 'End':\n        e.preventDefault()\n        setActive(edge(-1))\n        break\n      case 'Enter':\n      case ' ':\n        e.preventDefault()\n        choose(active)\n        break\n      case 'Escape':\n        // Stop here so an enclosing Modal does not close along with the list.\n        e.preventDefault()\n        e.stopPropagation()\n        closeMenu(true)\n        break\n      case 'Tab':\n        closeMenu(false)\n        break\n      default:\n        if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {\n          const idx = matchTypeahead(e.key)\n          if (idx >= 0) setActive(idx)\n        }\n    }\n  }\n\n  const style: React.CSSProperties | undefined = position\n    ? {\n        left: position.left,\n        minWidth: position.width,\n        top: position.top,\n        bottom: position.bottom,\n        maxHeight: position.maxHeight\n      }\n    : { visibility: 'hidden' }\n\n  const iconSize = size === 'lg' ? 18 : size === 'sm' ? 14 : 16\n\n  return (\n    <div\n      className={[\n        'hdk-select',\n        `hdk-select--${variant}`,\n        `hdk-select--${size}`,\n        open && 'hdk-select--open',\n        className\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <button\n        ref={triggerRef}\n        id={triggerId}\n        type=\"button\"\n        className=\"hdk-select__trigger\"\n        aria-haspopup=\"listbox\"\n        aria-expanded={open}\n        aria-controls={open ? listId : undefined}\n        aria-label={ariaLabel}\n        disabled={disabled}\n        onClick={() => (open ? closeMenu(true) : openMenu())}\n        onKeyDown={onTriggerKeyDown}\n      >\n        {selected?.icon && <Icon name={selected.icon} size={iconSize} />}\n        <span className={`hdk-select__value ${selected ? '' : 'hdk-select__value--placeholder'}`}>\n          {selected ? selected.label : placeholder}\n        </span>\n        <Icon name=\"chevron-down\" size={iconSize} className=\"hdk-select__chevron\" />\n      </button>\n\n      {open &&\n        scope &&\n        createPortal(\n          <ul\n            ref={listRef}\n            id={listId}\n            role=\"listbox\"\n            tabIndex={-1}\n            aria-labelledby={triggerId}\n            aria-activedescendant={active >= 0 ? optionId(active) : undefined}\n            className=\"hdk-select__menu hdk-scroll hdk-scroll--thin\"\n            style={style}\n            onKeyDown={onListKeyDown}\n          >\n            {options.map((o, i) => (\n              <li\n                key={o.value}\n                id={optionId(i)}\n                role=\"option\"\n                aria-selected={i === selectedIndex}\n                aria-disabled={o.disabled || undefined}\n                className={[\n                  'hdk-select__option',\n                  i === active && 'hdk-select__option--active',\n                  i === selectedIndex && 'hdk-select__option--selected'\n                ]\n                  .filter(Boolean)\n                  .join(' ')}\n                onPointerMove={() => !o.disabled && i !== active && setActive(i)}\n                onClick={() => choose(i)}\n              >\n                {o.icon && <Icon name={o.icon} size={iconSize} />}\n                <span className=\"hdk-select__option-text\">\n                  <span className=\"hdk-select__option-label\">{o.label}</span>\n                  {o.description && (\n                    <span className=\"hdk-select__option-desc\">{o.description}</span>\n                  )}\n                </span>\n                {i === selectedIndex && (\n                  <Icon name=\"check\" size={iconSize} className=\"hdk-select__check\" />\n                )}\n              </li>\n            ))}\n          </ul>,\n          scope\n        )}\n    </div>\n  )\n}\n\nexport interface NativeSelectProps\n  extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size'> {\n  variant?: SelectVariant\n  size?: SelectSize\n}\n\n/**\n * A native <select> wearing the same trigger as <Select>. Use it where the\n * OS picker is the better UX — long lists on mobile, forms that must submit\n * natively. The popup itself stays OS-drawn; `color-scheme` from the theme\n * gets it to the right light/dark mode.\n */\nexport function NativeSelect({\n  variant = 'outline',\n  size = 'md',\n  className,\n  children,\n  ...rest\n}: NativeSelectProps) {\n  return (\n    <span\n      className={['hdk-select', `hdk-select--${variant}`, `hdk-select--${size}`, className]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <select className=\"hdk-select__trigger hdk-select__native\" {...rest}>\n        {children}\n      </select>\n      <Icon\n        name=\"chevron-down\"\n        size={size === 'lg' ? 18 : size === 'sm' ? 14 : 16}\n        className=\"hdk-select__chevron hdk-select__chevron--native\"\n      />\n    </span>\n  )\n}\n"],"names":[],"mappings":"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"}

package/dist/components/SettingsModal.d.ts

@@ -0,0 +1,69 @@
+/**
+ * SettingsModal Component
+ * Generic settings dialog that can be customized with sections
+ */
+import React from 'react';
+export interface SettingsSection {
+    id: string;
+    title: string;
+    fields: SettingsField[];
+}
+export type SettingsField = SettingsToggleField | SettingsTextInputField | SettingsPasswordField | SettingsSelectField | SettingsButtonField | SettingsCustomField;
+export interface BaseSettingsField {
+    id: string;
+    label: string;
+    description?: string;
+    disabled?: boolean;
+}
+export interface SettingsToggleField extends BaseSettingsField {
+    type: 'toggle';
+    value: boolean;
+    onChange: (value: boolean) => void;
+}
+export interface SettingsTextInputField extends BaseSettingsField {
+    type: 'text';
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+}
+export interface SettingsPasswordField extends BaseSettingsField {
+    type: 'password';
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    showButton?: boolean;
+    buttonLabel?: string;
+    onButtonClick?: () => void | Promise<void>;
+    buttonDisabled?: boolean;
+    error?: string | null;
+    autoComplete?: string;
+}
+export interface SettingsSelectField extends BaseSettingsField {
+    type: 'select';
+    value: string;
+    onChange: (value: string) => void;
+    options: Array<{
+        value: string;
+        label: string;
+    }>;
+}
+export interface SettingsButtonField extends BaseSettingsField {
+    type: 'button';
+    buttonLabel: string;
+    onClick: () => void | Promise<void>;
+    variant?: 'primary' | 'danger' | 'default';
+}
+export interface SettingsCustomField extends BaseSettingsField {
+    type: 'custom';
+    render: () => React.ReactNode;
+}
+export interface SettingsModalProps {
+    isOpen: boolean;
+    title?: string;
+    sections: SettingsSection[];
+    onClose: () => void;
+    className?: string;
+    showCloseButton?: boolean;
+}
+export declare function SettingsModal({ isOpen, title, sections, onClose, className, showCloseButton }: SettingsModalProps): React.JSX.Element;
+//# sourceMappingURL=SettingsModal.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SettingsModal.d.ts","sourceRoot":"","sources":["../../src/components/SettingsModal.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,aAAa,EAAE,CAAA;CACxB;AAED,MAAM,MAAM,aAAa,GACrB,mBAAmB,GACnB,sBAAsB,GACtB,qBAAqB,GACrB,mBAAmB,GACnB,mBAAmB,GACnB,mBAAmB,CAAA;AAEvB,MAAM,WAAW,iBAAiB;IAChC,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,mBAAoB,SAAQ,iBAAiB;IAC5D,IAAI,EAAE,QAAQ,CAAA;IACd,KAAK,EAAE,OAAO,CAAA;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;CACnC;AAED,MAAM,WAAW,sBAAuB,SAAQ,iBAAiB;IAC/D,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,MAAM,WAAW,qBAAsB,SAAQ,iBAAiB;IAC9D,IAAI,EAAE,UAAU,CAAA;IAChB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,aAAa,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;IAC1C,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAED,MAAM,WAAW,mBAAoB,SAAQ,iBAAiB;IAC5D,IAAI,EAAE,QAAQ,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,OAAO,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;CACjD;AAED,MAAM,WAAW,mBAAoB,SAAQ,iBAAiB;IAC5D,IAAI,EAAE,QAAQ,CAAA;IACd,WAAW,EAAE,MAAM,CAAA;IACnB,OAAO,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;IACnC,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAA;CAC3C;AAED,MAAM,WAAW,mBAAoB,SAAQ,iBAAiB;IAC5D,IAAI,EAAE,QAAQ,CAAA;IACd,MAAM,EAAE,MAAM,KAAK,CAAC,SAAS,CAAA;CAC9B;AAED,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,OAAO,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,EAAE,eAAe,EAAE,CAAA;IAC3B,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B;AAED,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EACN,KAAkB,EAClB,QAAQ,EACR,OAAO,EACP,SAAc,EACd,eAAsB,EACvB,EAAE,kBAAkB,qBA+IpB"}