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

package/dist/components/LoadingSkeleton.d.ts

@@ -0,0 +1,14 @@
+/**
+ * LoadingSkeleton Component
+ * Displays a loading skeleton with theme support
+ * Can be customized with different layouts
+ */
+import React from 'react';
+export interface LoadingSkeletonProps {
+    isDarkTheme?: boolean;
+    className?: string;
+    layout?: 'default' | 'minimal' | 'custom';
+    customContent?: React.ReactNode;
+}
+export declare function LoadingSkeleton({ isDarkTheme, className, layout, customContent }: LoadingSkeletonProps): React.JSX.Element;
+//# sourceMappingURL=LoadingSkeleton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingSkeleton.d.ts","sourceRoot":"","sources":["../../src/components/LoadingSkeleton.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,MAAM,WAAW,oBAAoB;IACnC,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAA;IACzC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAChC;AAED,wBAAgB,eAAe,CAAC,EAC9B,WAAmB,EACnB,SAAc,EACd,MAAkB,EAClB,aAAa,EACd,EAAE,oBAAoB,qBA+DtB"}

package/dist/components/LoadingSkeleton.js

@@ -0,0 +1,62 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+function LoadingSkeleton({
+  isDarkTheme = false,
+  className = "",
+  layout = "default",
+  customContent
+}) {
+  if (layout === "custom" && customContent) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `loading-skeleton ${className}`,
+        "data-dark-theme": isDarkTheme ? "true" : "false",
+        children: customContent
+      }
+    );
+  }
+  if (layout === "minimal") {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `loading-skeleton loading-skeleton--minimal ${className}`,
+        "data-dark-theme": isDarkTheme ? "true" : "false",
+        children: /* @__PURE__ */ jsx("div", { className: "skeleton-spinner" })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `loading-skeleton ${className}`,
+      "data-dark-theme": isDarkTheme ? "true" : "false",
+      children: /* @__PURE__ */ jsxs("div", { className: "loading-skeleton__content", children: [
+        /* @__PURE__ */ jsxs("div", { className: "skeleton-header-row", children: [
+          /* @__PURE__ */ jsx("div", { className: "skeleton-header" }),
+          /* @__PURE__ */ jsx("div", { className: "skeleton-button" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "skeleton-nav", children: [
+          /* @__PURE__ */ jsx("div", { className: "skeleton-nav-item" }),
+          /* @__PURE__ */ jsx("div", { className: "skeleton-nav-item" }),
+          /* @__PURE__ */ jsx("div", { className: "skeleton-nav-item" })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "skeleton-input" }),
+        /* @__PURE__ */ jsxs("div", { className: "skeleton-filters", children: [
+          /* @__PURE__ */ jsx("div", { className: "skeleton-filter" }),
+          /* @__PURE__ */ jsx("div", { className: "skeleton-filter" }),
+          /* @__PURE__ */ jsx("div", { className: "skeleton-filter" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "skeleton-content", children: [
+          /* @__PURE__ */ jsx("div", { className: "skeleton-content-header" }),
+          /* @__PURE__ */ jsx("div", { className: "skeleton-item" }),
+          /* @__PURE__ */ jsx("div", { className: "skeleton-item" }),
+          /* @__PURE__ */ jsx("div", { className: "skeleton-item" })
+        ] })
+      ] })
+    }
+  );
+}
+export {
+  LoadingSkeleton
+};
+//# sourceMappingURL=LoadingSkeleton.js.map

package/dist/components/LoadingSkeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingSkeleton.js","sources":["../../src/components/LoadingSkeleton.tsx"],"sourcesContent":["/**\r\n * LoadingSkeleton Component\r\n * Displays a loading skeleton with theme support\r\n * Can be customized with different layouts\r\n */\r\n\r\nimport React from 'react'\r\n\r\nexport interface LoadingSkeletonProps {\r\n  isDarkTheme?: boolean\r\n  className?: string\r\n  layout?: 'default' | 'minimal' | 'custom'\r\n  customContent?: React.ReactNode\r\n}\r\n\r\nexport function LoadingSkeleton({\r\n  isDarkTheme = false,\r\n  className = '',\r\n  layout = 'default',\r\n  customContent\r\n}: LoadingSkeletonProps) {\r\n  if (layout === 'custom' && customContent) {\r\n    return (\r\n      <div\r\n        className={`loading-skeleton ${className}`}\r\n        data-dark-theme={isDarkTheme ? 'true' : 'false'}\r\n      >\r\n        {customContent}\r\n      </div>\r\n    )\r\n  }\r\n\r\n  if (layout === 'minimal') {\r\n    return (\r\n      <div\r\n        className={`loading-skeleton loading-skeleton--minimal ${className}`}\r\n        data-dark-theme={isDarkTheme ? 'true' : 'false'}\r\n      >\r\n        <div className=\"skeleton-spinner\"></div>\r\n      </div>\r\n    )\r\n  }\r\n\r\n  // Default layout - task app specific but can be overridden\r\n  return (\r\n    <div\r\n      className={`loading-skeleton ${className}`}\r\n      data-dark-theme={isDarkTheme ? 'true' : 'false'}\r\n    >\r\n      <div className=\"loading-skeleton__content\">\r\n        {/* Header */}\r\n        <div className=\"skeleton-header-row\">\r\n          <div className=\"skeleton-header\"></div>\r\n          <div className=\"skeleton-button\"></div>\r\n        </div>\r\n\r\n        {/* Navigation */}\r\n        <div className=\"skeleton-nav\">\r\n          <div className=\"skeleton-nav-item\"></div>\r\n          <div className=\"skeleton-nav-item\"></div>\r\n          <div className=\"skeleton-nav-item\"></div>\r\n        </div>\r\n\r\n        {/* Input */}\r\n        <div className=\"skeleton-input\"></div>\r\n\r\n        {/* Filters */}\r\n        <div className=\"skeleton-filters\">\r\n          <div className=\"skeleton-filter\"></div>\r\n          <div className=\"skeleton-filter\"></div>\r\n          <div className=\"skeleton-filter\"></div>\r\n        </div>\r\n\r\n        {/* Content */}\r\n        <div className=\"skeleton-content\">\r\n          <div className=\"skeleton-content-header\"></div>\r\n          <div className=\"skeleton-item\"></div>\r\n          <div className=\"skeleton-item\"></div>\r\n          <div className=\"skeleton-item\"></div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  )\r\n}\r\n"],"names":[],"mappings":";AAeO,SAAS,gBAAgB;AAAA,EAC9B,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,SAAS;AAAA,EACT;AACF,GAAyB;AACvB,MAAI,WAAW,YAAY,eAAe;AACxC,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,oBAAoB,SAAS;AAAA,QACxC,mBAAiB,cAAc,SAAS;AAAA,QAEvC,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AAEA,MAAI,WAAW,WAAW;AACxB,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,8CAA8C,SAAS;AAAA,QAClE,mBAAiB,cAAc,SAAS;AAAA,QAExC,UAAA,oBAAC,OAAA,EAAI,WAAU,mBAAA,CAAmB;AAAA,MAAA;AAAA,IAAA;AAAA,EAGxC;AAGA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,oBAAoB,SAAS;AAAA,MACxC,mBAAiB,cAAc,SAAS;AAAA,MAExC,UAAA,qBAAC,OAAA,EAAI,WAAU,6BAEb,UAAA;AAAA,QAAA,qBAAC,OAAA,EAAI,WAAU,uBACb,UAAA;AAAA,UAAA,oBAAC,OAAA,EAAI,WAAU,kBAAA,CAAkB;AAAA,UACjC,oBAAC,OAAA,EAAI,WAAU,kBAAA,CAAkB;AAAA,QAAA,GACnC;AAAA,QAGA,qBAAC,OAAA,EAAI,WAAU,gBACb,UAAA;AAAA,UAAA,oBAAC,OAAA,EAAI,WAAU,oBAAA,CAAoB;AAAA,UACnC,oBAAC,OAAA,EAAI,WAAU,oBAAA,CAAoB;AAAA,UACnC,oBAAC,OAAA,EAAI,WAAU,oBAAA,CAAoB;AAAA,QAAA,GACrC;AAAA,QAGA,oBAAC,OAAA,EAAI,WAAU,iBAAA,CAAiB;AAAA,QAGhC,qBAAC,OAAA,EAAI,WAAU,oBACb,UAAA;AAAA,UAAA,oBAAC,OAAA,EAAI,WAAU,kBAAA,CAAkB;AAAA,UACjC,oBAAC,OAAA,EAAI,WAAU,kBAAA,CAAkB;AAAA,UACjC,oBAAC,OAAA,EAAI,WAAU,kBAAA,CAAkB;AAAA,QAAA,GACnC;AAAA,QAGA,qBAAC,OAAA,EAAI,WAAU,oBACb,UAAA;AAAA,UAAA,oBAAC,OAAA,EAAI,WAAU,0BAAA,CAA0B;AAAA,UACzC,oBAAC,OAAA,EAAI,WAAU,gBAAA,CAAgB;AAAA,UAC/B,oBAAC,OAAA,EAAI,WAAU,gBAAA,CAAgB;AAAA,UAC/B,oBAAC,OAAA,EAAI,WAAU,gBAAA,CAAgB;AAAA,QAAA,EAAA,CACjC;AAAA,MAAA,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/Modal.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Modal Component
+ * Generic modal dialog with keyboard shortcuts and customizable actions
+ *
+ * Styles ship with the package: import '@wolffm/task-ui-components/modal.css'
+ */
+import React from 'react';
+export interface ModalProps {
+    isOpen: boolean;
+    title: string;
+    onClose: () => void;
+    onConfirm?: () => void | Promise<void>;
+    children?: React.ReactNode;
+    inputValue?: string;
+    onInputChange?: (value: string) => void;
+    inputPlaceholder?: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    confirmDisabled?: boolean;
+    confirmDanger?: boolean;
+    showCancel?: boolean;
+    showConfirm?: boolean;
+    className?: string;
+    overlayClassName?: string;
+    /**
+     * Replaces the whole action row. A wizard has Back/Cancel/Regenerate/Create,
+     * which the fixed Cancel+Confirm pair cannot express — and that is what
+     * pushes an app to hand-roll its own dialog instead of adopting this one.
+     *
+     * `null` means *no* row at all (a progress step, a viewer); omitting it means
+     * "use the default row". `??` collapses those two, so the check below is
+     * against `undefined` explicitly.
+     */
+    actions?: React.ReactNode;
+    /** Rendered left of the title, e.g. a wizard's Back button. */
+    lead?: React.ReactNode;
+}
+export declare function Modal({ isOpen, title, onClose, onConfirm, children, inputValue, onInputChange, inputPlaceholder, confirmLabel, cancelLabel, confirmDisabled, confirmDanger, showCancel, showConfirm, className, overlayClassName, actions, lead }: ModalProps): React.JSX.Element | null;
+//# sourceMappingURL=Modal.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../src/components/Modal.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAmC,MAAM,OAAO,CAAA;AAEvD,MAAM,WAAW,UAAU;IACzB,MAAM,EAAE,OAAO,CAAA;IACf,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;IACtC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,+DAA+D;IAC/D,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB;AASD,wBAAgB,KAAK,CAAC,EACpB,MAAM,EACN,KAAK,EACL,OAAO,EACP,SAAS,EACT,QAAQ,EACR,UAAU,EACV,aAAa,EACb,gBAAgB,EAChB,YAAwB,EACxB,WAAsB,EACtB,eAAuB,EACvB,aAAqB,EACrB,UAAiB,EACjB,WAAkB,EAClB,SAAc,EACd,gBAAqB,EACrB,OAAO,EACP,IAAI,EACL,EAAE,UAAU,4BAwGZ"}

package/dist/components/Modal.js

@@ -0,0 +1,106 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId, useRef, useEffect } from "react";
+const escapeStack = [];
+function Modal({
+  isOpen,
+  title,
+  onClose,
+  onConfirm,
+  children,
+  inputValue,
+  onInputChange,
+  inputPlaceholder,
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  confirmDisabled = false,
+  confirmDanger = false,
+  showCancel = true,
+  showConfirm = true,
+  className = "",
+  overlayClassName = "",
+  actions,
+  lead
+}) {
+  const titleId = useId();
+  const cardRef = useRef(null);
+  const onCloseRef = useRef(onClose);
+  onCloseRef.current = onClose;
+  useEffect(() => {
+    if (!isOpen) return;
+    const id = Symbol("modal");
+    escapeStack.push(id);
+    const onKey = (e) => {
+      if (e.key !== "Escape") return;
+      if (escapeStack[escapeStack.length - 1] !== id) return;
+      e.preventDefault();
+      onCloseRef.current();
+    };
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      const at = escapeStack.lastIndexOf(id);
+      if (at >= 0) escapeStack.splice(at, 1);
+    };
+  }, [isOpen]);
+  useEffect(() => {
+    if (!isOpen) return;
+    const card = cardRef.current;
+    if (!card) return;
+    const focusable = card.querySelector(
+      'input:not([type=hidden]), textarea, select, button:not([disabled]), [href], [tabindex]:not([tabindex="-1"])'
+    );
+    (focusable ?? card).focus();
+  }, [isOpen]);
+  if (!isOpen) return null;
+  return /* @__PURE__ */ jsx("div", { className: `modal-overlay ${overlayClassName}`.trim(), onClick: onClose, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: cardRef,
+      className: `modal-card ${className}`.trim(),
+      onClick: (e) => e.stopPropagation(),
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-labelledby": titleId,
+      tabIndex: -1,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "modal-head", children: [
+          lead,
+          /* @__PURE__ */ jsx("h3", { id: titleId, children: title })
+        ] }),
+        children,
+        onInputChange && /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "text",
+            className: "modal-input",
+            value: inputValue || "",
+            onChange: (e) => onInputChange(e.target.value),
+            placeholder: inputPlaceholder,
+            onKeyDown: (e) => {
+              if (e.key === "Enter" && !confirmDisabled && onConfirm) {
+                e.preventDefault();
+                void onConfirm();
+              }
+            }
+          }
+        ),
+        actions !== void 0 ? actions : /* @__PURE__ */ jsxs("div", { className: "modal-actions", children: [
+          showCancel && /* @__PURE__ */ jsx("button", { className: "modal-button", onClick: onClose, children: cancelLabel }),
+          showConfirm && onConfirm && /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: `modal-button ${confirmDanger ? "modal-button--danger" : "modal-button--primary"}`,
+              onClick: () => void onConfirm(),
+              disabled: confirmDisabled,
+              children: confirmLabel
+            }
+          )
+        ] })
+      ]
+    }
+  ) });
+}
+export {
+  Modal
+};
+//# sourceMappingURL=Modal.js.map

package/dist/components/Modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.js","sources":["../../src/components/Modal.tsx"],"sourcesContent":["/**\r\n * Modal Component\r\n * Generic modal dialog with keyboard shortcuts and customizable actions\r\n *\r\n * Styles ship with the package: import '@wolffm/task-ui-components/modal.css'\r\n */\r\n\r\nimport React, { useEffect, useId, useRef } from 'react'\r\n\r\nexport interface ModalProps {\r\n  isOpen: boolean\r\n  title: string\r\n  onClose: () => void\r\n  onConfirm?: () => void | Promise<void>\r\n  children?: React.ReactNode\r\n  inputValue?: string\r\n  onInputChange?: (value: string) => void\r\n  inputPlaceholder?: string\r\n  confirmLabel?: string\r\n  cancelLabel?: string\r\n  confirmDisabled?: boolean\r\n  confirmDanger?: boolean\r\n  showCancel?: boolean\r\n  showConfirm?: boolean\r\n  className?: string\r\n  overlayClassName?: string\r\n  /**\r\n   * Replaces the whole action row. A wizard has Back/Cancel/Regenerate/Create,\r\n   * which the fixed Cancel+Confirm pair cannot express — and that is what\r\n   * pushes an app to hand-roll its own dialog instead of adopting this one.\r\n   *\r\n   * `null` means *no* row at all (a progress step, a viewer); omitting it means\r\n   * \"use the default row\". `??` collapses those two, so the check below is\r\n   * against `undefined` explicitly.\r\n   */\r\n  actions?: React.ReactNode\r\n  /** Rendered left of the title, e.g. a wizard's Back button. */\r\n  lead?: React.ReactNode\r\n}\r\n\r\n/**\r\n * Open dialogs, outermost first. Each mounted-and-open Modal pushes a token\r\n * and pops it on close, so the handler can tell whether it is the one the\r\n * keypress is meant for.\r\n */\r\nconst escapeStack: symbol[] = []\r\n\r\nexport function Modal({\r\n  isOpen,\r\n  title,\r\n  onClose,\r\n  onConfirm,\r\n  children,\r\n  inputValue,\r\n  onInputChange,\r\n  inputPlaceholder,\r\n  confirmLabel = 'Confirm',\r\n  cancelLabel = 'Cancel',\r\n  confirmDisabled = false,\r\n  confirmDanger = false,\r\n  showCancel = true,\r\n  showConfirm = true,\r\n  className = '',\r\n  overlayClassName = '',\r\n  actions,\r\n  lead\r\n}: ModalProps) {\r\n  const titleId = useId()\r\n  const cardRef = useRef<HTMLDivElement>(null)\r\n\r\n  // Escape closes from anywhere in the dialog, not just from a focused input.\r\n  // Bound to the document rather than the card so it works before anything\r\n  // inside has been focused — previously the handler hung off the optional\r\n  // text input, so a dialog without one could not be dismissed by keyboard.\r\n  //\r\n  // Only the TOP-MOST open dialog answers, which is what makes a confirm\r\n  // nested inside another modal usable: the parent's document listener is\r\n  // still live underneath it, so without the stack one Escape closes both.\r\n  // onClose is read through a ref so a caller passing an unmemoised handler\r\n  // cannot re-run this effect and shuffle itself back to the top of the stack.\r\n  const onCloseRef = useRef(onClose)\r\n  onCloseRef.current = onClose\r\n  useEffect(() => {\r\n    if (!isOpen) return\r\n    const id = Symbol('modal')\r\n    escapeStack.push(id)\r\n    const onKey = (e: KeyboardEvent) => {\r\n      if (e.key !== 'Escape') return\r\n      if (escapeStack[escapeStack.length - 1] !== id) return\r\n      e.preventDefault()\r\n      onCloseRef.current()\r\n    }\r\n    document.addEventListener('keydown', onKey)\r\n    return () => {\r\n      document.removeEventListener('keydown', onKey)\r\n      const at = escapeStack.lastIndexOf(id)\r\n      if (at >= 0) escapeStack.splice(at, 1)\r\n    }\r\n  }, [isOpen])\r\n\r\n  // Move focus into the dialog on open, so the keyboard starts inside it.\r\n  useEffect(() => {\r\n    if (!isOpen) return\r\n    const card = cardRef.current\r\n    if (!card) return\r\n    const focusable = card.querySelector<HTMLElement>(\r\n      'input:not([type=hidden]), textarea, select, button:not([disabled]), [href], [tabindex]:not([tabindex=\"-1\"])'\r\n    )\r\n    ;(focusable ?? card).focus()\r\n  }, [isOpen])\r\n\r\n  if (!isOpen) return null\r\n\r\n  return (\r\n    <div className={`modal-overlay ${overlayClassName}`.trim()} onClick={onClose}>\r\n      <div\r\n        ref={cardRef}\r\n        className={`modal-card ${className}`.trim()}\r\n        onClick={e => e.stopPropagation()}\r\n        role=\"dialog\"\r\n        aria-modal=\"true\"\r\n        aria-labelledby={titleId}\r\n        tabIndex={-1}\r\n      >\r\n        <div className=\"modal-head\">\r\n          {lead}\r\n          <h3 id={titleId}>{title}</h3>\r\n        </div>\r\n\r\n        {children}\r\n\r\n        {onInputChange && (\r\n          <input\r\n            type=\"text\"\r\n            className=\"modal-input\"\r\n            value={inputValue || ''}\r\n            onChange={e => onInputChange(e.target.value)}\r\n            placeholder={inputPlaceholder}\r\n            onKeyDown={e => {\r\n              if (e.key === 'Enter' && !confirmDisabled && onConfirm) {\r\n                e.preventDefault()\r\n                void onConfirm()\r\n              }\r\n            }}\r\n          />\r\n        )}\r\n\r\n        {actions !== undefined ? (\r\n          actions\r\n        ) : (\r\n          <div className=\"modal-actions\">\r\n            {showCancel && (\r\n              <button className=\"modal-button\" onClick={onClose}>\r\n                {cancelLabel}\r\n              </button>\r\n            )}\r\n            {showConfirm && onConfirm && (\r\n              <button\r\n                className={`modal-button ${confirmDanger ? 'modal-button--danger' : 'modal-button--primary'}`}\r\n                onClick={() => void onConfirm()}\r\n                disabled={confirmDisabled}\r\n              >\r\n                {confirmLabel}\r\n              </button>\r\n            )}\r\n          </div>\r\n        )}\r\n      </div>\r\n    </div>\r\n  )\r\n}\r\n"],"names":[],"mappings":";;AA6CA,MAAM,cAAwB,CAAA;AAEvB,SAAS,MAAM;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,cAAc;AAAA,EACd,kBAAkB;AAAA,EAClB,gBAAgB;AAAA,EAChB,aAAa;AAAA,EACb,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,mBAAmB;AAAA,EACnB;AAAA,EACA;AACF,GAAe;AACb,QAAM,UAAU,MAAA;AAChB,QAAM,UAAU,OAAuB,IAAI;AAY3C,QAAM,aAAa,OAAO,OAAO;AACjC,aAAW,UAAU;AACrB,YAAU,MAAM;AACd,QAAI,CAAC,OAAQ;AACb,UAAM,KAAK,OAAO,OAAO;AACzB,gBAAY,KAAK,EAAE;AACnB,UAAM,QAAQ,CAAC,MAAqB;AAClC,UAAI,EAAE,QAAQ,SAAU;AACxB,UAAI,YAAY,YAAY,SAAS,CAAC,MAAM,GAAI;AAChD,QAAE,eAAA;AACF,iBAAW,QAAA;AAAA,IACb;AACA,aAAS,iBAAiB,WAAW,KAAK;AAC1C,WAAO,MAAM;AACX,eAAS,oBAAoB,WAAW,KAAK;AAC7C,YAAM,KAAK,YAAY,YAAY,EAAE;AACrC,UAAI,MAAM,EAAG,aAAY,OAAO,IAAI,CAAC;AAAA,IACvC;AAAA,EACF,GAAG,CAAC,MAAM,CAAC;AAGX,YAAU,MAAM;AACd,QAAI,CAAC,OAAQ;AACb,UAAM,OAAO,QAAQ;AACrB,QAAI,CAAC,KAAM;AACX,UAAM,YAAY,KAAK;AAAA,MACrB;AAAA,IAAA;AAED,KAAC,aAAa,MAAM,MAAA;AAAA,EACvB,GAAG,CAAC,MAAM,CAAC;AAEX,MAAI,CAAC,OAAQ,QAAO;AAEpB,SACE,oBAAC,SAAI,WAAW,iBAAiB,gBAAgB,GAAG,KAAA,GAAQ,SAAS,SACnE,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW,cAAc,SAAS,GAAG,KAAA;AAAA,MACrC,SAAS,CAAA,MAAK,EAAE,gBAAA;AAAA,MAChB,MAAK;AAAA,MACL,cAAW;AAAA,MACX,mBAAiB;AAAA,MACjB,UAAU;AAAA,MAEV,UAAA;AAAA,QAAA,qBAAC,OAAA,EAAI,WAAU,cACZ,UAAA;AAAA,UAAA;AAAA,UACD,oBAAC,MAAA,EAAG,IAAI,SAAU,UAAA,MAAA,CAAM;AAAA,QAAA,GAC1B;AAAA,QAEC;AAAA,QAEA,iBACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,WAAU;AAAA,YACV,OAAO,cAAc;AAAA,YACrB,UAAU,CAAA,MAAK,cAAc,EAAE,OAAO,KAAK;AAAA,YAC3C,aAAa;AAAA,YACb,WAAW,CAAA,MAAK;AACd,kBAAI,EAAE,QAAQ,WAAW,CAAC,mBAAmB,WAAW;AACtD,kBAAE,eAAA;AACF,qBAAK,UAAA;AAAA,cACP;AAAA,YACF;AAAA,UAAA;AAAA,QAAA;AAAA,QAIH,YAAY,SACX,UAEA,qBAAC,OAAA,EAAI,WAAU,iBACZ,UAAA;AAAA,UAAA,kCACE,UAAA,EAAO,WAAU,gBAAe,SAAS,SACvC,UAAA,aACH;AAAA,UAED,eAAe,aACd;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW,gBAAgB,gBAAgB,yBAAyB,uBAAuB;AAAA,cAC3F,SAAS,MAAM,KAAK,UAAA;AAAA,cACpB,UAAU;AAAA,cAET,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACH,EAAA,CAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAGN;AAEJ;"}

package/dist/components/NumberInput.d.ts

@@ -0,0 +1,26 @@
+/**
+ * NumberInput Component
+ * A themed number field with its own stepper, for the OS spinner arrows that
+ * no CSS can style (controls.css removes them from a bare <input type=number>).
+ *
+ * It is a real <input type="number"> with every input prop passed through, so
+ * it works controlled (`value` + `onChange`) or uncontrolled (`defaultValue`),
+ * submits in a form, and keeps native min/max/step validation and the arrow
+ * keys. The buttons call the input's own stepUp()/stepDown() and then fire
+ * `input` and `change`, so `onChange` sees an ordinary edit: React's value
+ * tracker compares against what React last wrote, and stepUp() goes around it.
+ *
+ * Holding a button repeats, like the native spinner. The buttons are not tab
+ * stops — the arrow keys on the field already step — but they are labelled.
+ */
+import React from 'react';
+import '../number-input.css';
+export type NumberInputSize = 'sm' | 'md' | 'lg';
+export interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
+    size?: NumberInputSize;
+    /** Labels for the two buttons; default "Increase" / "Decrease". */
+    increaseLabel?: string;
+    decreaseLabel?: string;
+}
+export declare const NumberInput: React.ForwardRefExoticComponent<NumberInputProps & React.RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=NumberInput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NumberInput.d.ts","sourceRoot":"","sources":["../../src/components/NumberInput.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAmD,MAAM,OAAO,CAAA;AAEvE,OAAO,qBAAqB,CAAA;AAE5B,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAEhD,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1E,IAAI,CAAC,EAAE,eAAe,CAAA;IACtB,mEAAmE;IACnE,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AAMD,eAAO,MAAM,WAAW,2FA8HvB,CAAA"}

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