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

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"}

package/dist/components/SettingsModal.js

@@ -0,0 +1,141 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Modal } from "./Modal.js";
+import { Select } from "./Select.js";
+function SettingsModal({
+  isOpen,
+  title = "Settings",
+  sections,
+  onClose,
+  className = "",
+  showCloseButton = true
+}) {
+  const renderField = (field) => {
+    switch (field.type) {
+      case "toggle":
+        return /* @__PURE__ */ jsxs("div", { className: "settings-field", children: [
+          /* @__PURE__ */ jsxs("div", { className: "settings-field-header", children: [
+            /* @__PURE__ */ jsx("label", { className: "settings-field-label", htmlFor: field.id, children: field.label }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "checkbox",
+                id: field.id,
+                className: "settings-toggle",
+                checked: field.value,
+                onChange: (e) => field.onChange(e.target.checked),
+                disabled: field.disabled
+              }
+            )
+          ] }),
+          field.description && /* @__PURE__ */ jsx("p", { className: "settings-field-description", children: field.description })
+        ] }, field.id);
+      case "text":
+        return /* @__PURE__ */ jsxs("div", { className: "settings-field", children: [
+          /* @__PURE__ */ jsx("label", { className: "settings-field-label", htmlFor: field.id, children: field.label }),
+          field.description && /* @__PURE__ */ jsx("p", { className: "settings-field-description", children: field.description }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "text",
+              id: field.id,
+              className: "settings-text-input",
+              value: field.value,
+              onChange: (e) => field.onChange(e.target.value),
+              placeholder: field.placeholder,
+              disabled: field.disabled
+            }
+          )
+        ] }, field.id);
+      case "password":
+        return /* @__PURE__ */ jsxs("div", { className: "settings-field", children: [
+          /* @__PURE__ */ jsx("label", { className: "settings-field-label", htmlFor: field.id, children: field.label }),
+          field.description && /* @__PURE__ */ jsx("p", { className: "settings-field-description", children: field.description }),
+          /* @__PURE__ */ jsxs("div", { className: "settings-field-input-group", children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "password",
+                id: field.id,
+                name: field.autoComplete || field.id,
+                autoComplete: field.autoComplete || "off",
+                className: "settings-text-input",
+                value: field.value,
+                onChange: (e) => field.onChange(e.target.value),
+                placeholder: field.placeholder,
+                disabled: field.disabled
+              }
+            ),
+            field.showButton && field.onButtonClick && /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: "settings-button",
+                onClick: field.onButtonClick,
+                disabled: field.buttonDisabled || field.disabled,
+                children: field.buttonLabel || "Submit"
+              }
+            )
+          ] }),
+          field.error && /* @__PURE__ */ jsx("p", { className: "settings-field-error", children: field.error })
+        ] }, field.id);
+      case "select":
+        return /* @__PURE__ */ jsxs("div", { className: "settings-field", children: [
+          /* @__PURE__ */ jsx("label", { className: "settings-field-label", htmlFor: field.id, children: field.label }),
+          field.description && /* @__PURE__ */ jsx("p", { className: "settings-field-description", children: field.description }),
+          /* @__PURE__ */ jsx(
+            Select,
+            {
+              id: field.id,
+              className: "settings-select",
+              value: field.value,
+              onChange: field.onChange,
+              options: field.options,
+              disabled: field.disabled
+            }
+          )
+        ] }, field.id);
+      case "button":
+        return /* @__PURE__ */ jsxs("div", { className: "settings-field", children: [
+          field.label && /* @__PURE__ */ jsx("label", { className: "settings-field-label", children: field.label }),
+          field.description && /* @__PURE__ */ jsx("p", { className: "settings-field-description", children: field.description }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: `settings-button settings-button--${field.variant || "default"}`,
+              onClick: field.onClick,
+              disabled: field.disabled,
+              children: field.buttonLabel
+            }
+          )
+        ] }, field.id);
+      case "custom":
+        return /* @__PURE__ */ jsxs("div", { className: "settings-field", children: [
+          field.label && /* @__PURE__ */ jsx("label", { className: "settings-field-label", children: field.label }),
+          field.description && /* @__PURE__ */ jsx("p", { className: "settings-field-description", children: field.description }),
+          field.render()
+        ] }, field.id);
+      default:
+        return null;
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    Modal,
+    {
+      isOpen,
+      title,
+      onClose,
+      onConfirm: showCloseButton ? onClose : void 0,
+      confirmLabel: "Close",
+      showCancel: false,
+      showConfirm: showCloseButton,
+      className: `settings-modal ${className}`,
+      children: /* @__PURE__ */ jsx("div", { className: "settings-content", children: sections.map((section) => /* @__PURE__ */ jsxs("div", { className: "settings-section", children: [
+        /* @__PURE__ */ jsx("h4", { className: "settings-section-title", children: section.title }),
+        section.fields.map((field) => renderField(field))
+      ] }, section.id)) })
+    }
+  );
+}
+export {
+  SettingsModal
+};
+//# sourceMappingURL=SettingsModal.js.map

package/dist/components/SettingsModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SettingsModal.js","sources":["../../src/components/SettingsModal.tsx"],"sourcesContent":["/**\n * SettingsModal Component\n * Generic settings dialog that can be customized with sections\n */\n\nimport React from 'react'\nimport { Modal } from './Modal'\nimport { Select } from './Select'\n\nexport interface SettingsSection {\n  id: string\n  title: string\n  fields: SettingsField[]\n}\n\nexport type SettingsField =\n  | SettingsToggleField\n  | SettingsTextInputField\n  | SettingsPasswordField\n  | SettingsSelectField\n  | SettingsButtonField\n  | SettingsCustomField\n\nexport interface BaseSettingsField {\n  id: string\n  label: string\n  description?: string\n  disabled?: boolean\n}\n\nexport interface SettingsToggleField extends BaseSettingsField {\n  type: 'toggle'\n  value: boolean\n  onChange: (value: boolean) => void\n}\n\nexport interface SettingsTextInputField extends BaseSettingsField {\n  type: 'text'\n  value: string\n  onChange: (value: string) => void\n  placeholder?: string\n}\n\nexport interface SettingsPasswordField extends BaseSettingsField {\n  type: 'password'\n  value: string\n  onChange: (value: string) => void\n  placeholder?: string\n  showButton?: boolean\n  buttonLabel?: string\n  onButtonClick?: () => void | Promise<void>\n  buttonDisabled?: boolean\n  error?: string | null\n  autoComplete?: string\n}\n\nexport interface SettingsSelectField extends BaseSettingsField {\n  type: 'select'\n  value: string\n  onChange: (value: string) => void\n  options: Array<{ value: string; label: string }>\n}\n\nexport interface SettingsButtonField extends BaseSettingsField {\n  type: 'button'\n  buttonLabel: string\n  onClick: () => void | Promise<void>\n  variant?: 'primary' | 'danger' | 'default'\n}\n\nexport interface SettingsCustomField extends BaseSettingsField {\n  type: 'custom'\n  render: () => React.ReactNode\n}\n\nexport interface SettingsModalProps {\n  isOpen: boolean\n  title?: string\n  sections: SettingsSection[]\n  onClose: () => void\n  className?: string\n  showCloseButton?: boolean\n}\n\nexport function SettingsModal({\n  isOpen,\n  title = 'Settings',\n  sections,\n  onClose,\n  className = '',\n  showCloseButton = true\n}: SettingsModalProps) {\n  const renderField = (field: SettingsField) => {\n    switch (field.type) {\n      case 'toggle':\n        return (\n          <div key={field.id} className=\"settings-field\">\n            <div className=\"settings-field-header\">\n              <label className=\"settings-field-label\" htmlFor={field.id}>\n                {field.label}\n              </label>\n              <input\n                type=\"checkbox\"\n                id={field.id}\n                className=\"settings-toggle\"\n                checked={field.value}\n                onChange={e => field.onChange(e.target.checked)}\n                disabled={field.disabled}\n              />\n            </div>\n            {field.description && <p className=\"settings-field-description\">{field.description}</p>}\n          </div>\n        )\n\n      case 'text':\n        return (\n          <div key={field.id} className=\"settings-field\">\n            <label className=\"settings-field-label\" htmlFor={field.id}>\n              {field.label}\n            </label>\n            {field.description && <p className=\"settings-field-description\">{field.description}</p>}\n            <input\n              type=\"text\"\n              id={field.id}\n              className=\"settings-text-input\"\n              value={field.value}\n              onChange={e => field.onChange(e.target.value)}\n              placeholder={field.placeholder}\n              disabled={field.disabled}\n            />\n          </div>\n        )\n\n      case 'password':\n        return (\n          <div key={field.id} className=\"settings-field\">\n            <label className=\"settings-field-label\" htmlFor={field.id}>\n              {field.label}\n            </label>\n            {field.description && <p className=\"settings-field-description\">{field.description}</p>}\n            <div className=\"settings-field-input-group\">\n              <input\n                type=\"password\"\n                id={field.id}\n                name={field.autoComplete || field.id}\n                autoComplete={field.autoComplete || 'off'}\n                className=\"settings-text-input\"\n                value={field.value}\n                onChange={e => field.onChange(e.target.value)}\n                placeholder={field.placeholder}\n                disabled={field.disabled}\n              />\n              {field.showButton && field.onButtonClick && (\n                <button\n                  className=\"settings-button\"\n                  onClick={field.onButtonClick}\n                  disabled={field.buttonDisabled || field.disabled}\n                >\n                  {field.buttonLabel || 'Submit'}\n                </button>\n              )}\n            </div>\n            {field.error && <p className=\"settings-field-error\">{field.error}</p>}\n          </div>\n        )\n\n      case 'select':\n        return (\n          <div key={field.id} className=\"settings-field\">\n            <label className=\"settings-field-label\" htmlFor={field.id}>\n              {field.label}\n            </label>\n            {field.description && <p className=\"settings-field-description\">{field.description}</p>}\n            <Select\n              id={field.id}\n              className=\"settings-select\"\n              value={field.value}\n              onChange={field.onChange}\n              options={field.options}\n              disabled={field.disabled}\n            />\n          </div>\n        )\n\n      case 'button':\n        return (\n          <div key={field.id} className=\"settings-field\">\n            {field.label && <label className=\"settings-field-label\">{field.label}</label>}\n            {field.description && <p className=\"settings-field-description\">{field.description}</p>}\n            <button\n              className={`settings-button settings-button--${field.variant || 'default'}`}\n              onClick={field.onClick}\n              disabled={field.disabled}\n            >\n              {field.buttonLabel}\n            </button>\n          </div>\n        )\n\n      case 'custom':\n        return (\n          <div key={field.id} className=\"settings-field\">\n            {field.label && <label className=\"settings-field-label\">{field.label}</label>}\n            {field.description && <p className=\"settings-field-description\">{field.description}</p>}\n            {field.render()}\n          </div>\n        )\n\n      default:\n        return null\n    }\n  }\n\n  return (\n    <Modal\n      isOpen={isOpen}\n      title={title}\n      onClose={onClose}\n      onConfirm={showCloseButton ? onClose : undefined}\n      confirmLabel=\"Close\"\n      showCancel={false}\n      showConfirm={showCloseButton}\n      className={`settings-modal ${className}`}\n    >\n      <div className=\"settings-content\">\n        {sections.map(section => (\n          <div key={section.id} className=\"settings-section\">\n            <h4 className=\"settings-section-title\">{section.title}</h4>\n            {section.fields.map(field => renderField(field))}\n          </div>\n        ))}\n      </div>\n    </Modal>\n  )\n}\n"],"names":[],"mappings":"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"}

package/dist/components/ThemeIcons.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Component icons - Simple monochrome SVG icons for theme picker
+ * All icons use currentColor so they can be styled with CSS
+ */
+import React from 'react';
+export declare const SettingsIcon: () => React.JSX.Element;
+export declare const TagIcon: () => React.JSX.Element;
+export declare const CircleIcon: () => React.JSX.Element;
+export declare const SquareIcon: () => React.JSX.Element;
+export declare const TriangleIcon: () => React.JSX.Element;
+export declare const DiamondIcon: () => React.JSX.Element;
+export declare const StarIcon: () => React.JSX.Element;
+export declare const HexagonIcon: () => React.JSX.Element;
+export declare const PentagonIcon: () => React.JSX.Element;
+export declare const OctagonIcon: () => React.JSX.Element;
+/**
+ * Fallback icon sets for themes - provides 8 distinct shapes
+ * Use these when you don't have specific icons for your themes
+ */
+export declare const FALLBACK_ICONS: readonly [() => React.JSX.Element, () => React.JSX.Element, () => React.JSX.Element, () => React.JSX.Element, () => React.JSX.Element, () => React.JSX.Element, () => React.JSX.Element, () => React.JSX.Element];
+/**
+ * Get a fallback icon for a theme by index
+ * Icons repeat after 8 themes to provide consistent differentiation
+ */
+export declare function getFallbackIcon(index: number): React.JSX.Element;
+//# sourceMappingURL=ThemeIcons.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeIcons.d.ts","sourceRoot":"","sources":["../../src/components/ThemeIcons.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAA;AAazB,eAAO,MAAM,YAAY,yBAyBxB,CAAA;AAED,eAAO,MAAM,OAAO,yBAOnB,CAAA;AAED,eAAO,MAAM,UAAU,yBAItB,CAAA;AAED,eAAO,MAAM,UAAU,yBAItB,CAAA;AAED,eAAO,MAAM,YAAY,yBAIxB,CAAA;AAED,eAAO,MAAM,WAAW,yBAIvB,CAAA;AAED,eAAO,MAAM,QAAQ,yBAIpB,CAAA;AAED,eAAO,MAAM,WAAW,yBAIvB,CAAA;AAED,eAAO,MAAM,YAAY,yBAIxB,CAAA;AAED,eAAO,MAAM,WAAW,yBAIvB,CAAA;AAED;;;GAGG;AAEH,eAAO,MAAM,cAAc,mNASjB,CAAA;AAEV;;;GAGG;AAEH,wBAAgB,eAAe,CAAC,KAAK,EAAE,MAAM,qBAG5C"}