@ktnpm_devops/react-component 0.0.1 → 0.1.1

package/dist/index14.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index14.cjs","sources":["../src/primitives/Select/Select.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport styles from './Select.module.css';\n\nexport interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {}\n\nexport const Select = forwardRef<HTMLSelectElement, SelectProps>(\n  ({ className, children, ...props }, ref) => (\n    <select ref={ref} className={clsx(styles.root, className)} {...props}>\n      {children}\n    </select>\n  ),\n);\n\nSelect.displayName = 'Select';\n"],"names":["forwardRef","jsx","clsx","styles"],"mappings":";;;;;;AAMO,MAAM,SAASA,MAAAA;AAAAA,EACpB,CAAC,EAAE,WAAW,UAAU,GAAG,MAAA,GAAS,QAClCC,2BAAAA,IAAC,YAAO,KAAU,WAAWC,KAAAA,KAAKC,sBAAO,MAAM,SAAS,GAAI,GAAG,OAC5D,SAAA,CACH;AAEJ;AAEA,OAAO,cAAc;;"}
+{"version":3,"file":"index14.cjs","sources":["../src/composites/CustomRangePicker/CustomRangePicker.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef, useState, useCallback } from 'react';\nimport clsx from 'clsx';\nimport { useClickOutside } from '../../hooks/useClickOutside';\nimport { useEscapeKey } from '../../hooks/useEscapeKey';\nimport { formatLocalISOString } from '../../utils/format';\nimport styles from './CustomRangePicker.module.css';\n\nexport interface CustomRangePickerProps {\n  /** Start of the current range (ISO string). */\n  from?: string;\n  /** End of the current range (ISO string). */\n  to?: string;\n  /** Called when user applies a valid range. */\n  onApply: (range: { from: string; to: string }) => void;\n}\n\nconst formatInputValue = (iso?: string): string => {\n  if (!iso) return '';\n  const date = new Date(iso);\n  if (Number.isNaN(date.getTime())) return '';\n  const y = date.getFullYear();\n  const m = `${date.getMonth() + 1}`.padStart(2, '0');\n  const d = `${date.getDate()}`.padStart(2, '0');\n  const h = `${date.getHours()}`.padStart(2, '0');\n  const min = `${date.getMinutes()}`.padStart(2, '0');\n  return `${y}-${m}-${d}T${h}:${min}`;\n};\n\nconst toLocalTimestamp = (value: string): string | null => {\n  if (!value) return null;\n  const date = new Date(value);\n  if (Number.isNaN(date.getTime())) return null;\n  return formatLocalISOString(date);\n};\n\nexport const CustomRangePicker = ({ from, to, onApply }: CustomRangePickerProps) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const [startValue, setStartValue] = useState(() => formatInputValue(from));\n  const [endValue, setEndValue] = useState(() => formatInputValue(to));\n  const [error, setError] = useState<string | null>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const isActive = Boolean(from && to);\n\n  const close = useCallback(() => setIsOpen(false), []);\n  useClickOutside(containerRef, close);\n  useEscapeKey(close, isOpen);\n\n  useEffect(() => {\n    if (!isOpen) return;\n    setStartValue(formatInputValue(from));\n    setEndValue(formatInputValue(to));\n    setError(null);\n  }, [from, to, isOpen]);\n\n  const summary = useMemo(() => {\n    if (!from || !to) return null;\n    const s = new Date(from);\n    const e = new Date(to);\n    if (Number.isNaN(s.getTime()) || Number.isNaN(e.getTime())) return null;\n    const fmt = new Intl.DateTimeFormat(undefined, {\n      year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit',\n    });\n    return `${fmt.format(s)} – ${fmt.format(e)}`;\n  }, [from, to]);\n\n  const handleApply = () => {\n    const startIso = toLocalTimestamp(startValue);\n    const endIso = toLocalTimestamp(endValue);\n    if (!startIso || !endIso) {\n      setError('Both start and end date are required.');\n      return;\n    }\n    if (startIso >= endIso) {\n      setError('End of range must be after the start.');\n      return;\n    }\n    onApply({ from: startIso, to: endIso });\n    setIsOpen(false);\n  };\n\n  const handleCancel = () => {\n    setStartValue(formatInputValue(from));\n    setEndValue(formatInputValue(to));\n    setError(null);\n    setIsOpen(false);\n  };\n\n  return (\n    <div className={styles.root} ref={containerRef}>\n      <button\n        type=\"button\"\n        className={clsx(styles.chip, { [styles.active]: isActive })}\n        onClick={() => setIsOpen((v) => !v)}\n      >\n        Custom\n      </button>\n      {summary && <span className={styles.summary}>{summary}</span>}\n\n      {isOpen && (\n        <div className={styles.popover} role=\"dialog\" aria-modal=\"false\">\n          <header className={styles.popoverHeader}>\n            <h4>Custom Time Range</h4>\n          </header>\n          <div className={styles.fields}>\n            <label className={styles.field}>\n              <span>Start</span>\n              <input\n                type=\"datetime-local\"\n                value={startValue}\n                onChange={(e) => setStartValue(e.target.value)}\n                max={endValue || undefined}\n              />\n            </label>\n            <label className={styles.field}>\n              <span>End</span>\n              <input\n                type=\"datetime-local\"\n                value={endValue}\n                onChange={(e) => setEndValue(e.target.value)}\n                min={startValue || undefined}\n              />\n            </label>\n          </div>\n          {error && <p className={styles.error}>{error}</p>}\n          <footer className={styles.actions}>\n            <button type=\"button\" className={styles.btnGhost} onClick={handleCancel}>\n              Cancel\n            </button>\n            <button type=\"button\" className={styles.btnPrimary} onClick={handleApply}>\n              Apply\n            </button>\n          </footer>\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["formatLocalISOString","useState","useRef","useCallback","useClickOutside","useEscapeKey","useEffect","useMemo","styles","jsx","clsx","jsxs"],"mappings":"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"}

package/dist/index14.js

@@ -1,12 +1,125 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { clsx } from "./index17.js";
-import styles from "./index20.js";
-const Select = forwardRef(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx("select", { ref, className: clsx(styles.root, className), ...props, children })
-);
-Select.displayName = "Select";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useRef, useCallback, useEffect, useMemo } from "react";
+import { clsx } from "./index23.js";
+import { useClickOutside } from "./index3.js";
+import { useEscapeKey } from "./index4.js";
+import { formatLocalISOString } from "./index6.js";
+import styles from "./index36.js";
+const formatInputValue = (iso) => {
+  if (!iso) return "";
+  const date = new Date(iso);
+  if (Number.isNaN(date.getTime())) return "";
+  const y = date.getFullYear();
+  const m = `${date.getMonth() + 1}`.padStart(2, "0");
+  const d = `${date.getDate()}`.padStart(2, "0");
+  const h = `${date.getHours()}`.padStart(2, "0");
+  const min = `${date.getMinutes()}`.padStart(2, "0");
+  return `${y}-${m}-${d}T${h}:${min}`;
+};
+const toLocalTimestamp = (value) => {
+  if (!value) return null;
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return null;
+  return formatLocalISOString(date);
+};
+const CustomRangePicker = ({ from, to, onApply }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [startValue, setStartValue] = useState(() => formatInputValue(from));
+  const [endValue, setEndValue] = useState(() => formatInputValue(to));
+  const [error, setError] = useState(null);
+  const containerRef = useRef(null);
+  const isActive = Boolean(from && to);
+  const close = useCallback(() => setIsOpen(false), []);
+  useClickOutside(containerRef, close);
+  useEscapeKey(close, isOpen);
+  useEffect(() => {
+    if (!isOpen) return;
+    setStartValue(formatInputValue(from));
+    setEndValue(formatInputValue(to));
+    setError(null);
+  }, [from, to, isOpen]);
+  const summary = useMemo(() => {
+    if (!from || !to) return null;
+    const s = new Date(from);
+    const e = new Date(to);
+    if (Number.isNaN(s.getTime()) || Number.isNaN(e.getTime())) return null;
+    const fmt = new Intl.DateTimeFormat(void 0, {
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+      hour: "2-digit",
+      minute: "2-digit"
+    });
+    return `${fmt.format(s)} – ${fmt.format(e)}`;
+  }, [from, to]);
+  const handleApply = () => {
+    const startIso = toLocalTimestamp(startValue);
+    const endIso = toLocalTimestamp(endValue);
+    if (!startIso || !endIso) {
+      setError("Both start and end date are required.");
+      return;
+    }
+    if (startIso >= endIso) {
+      setError("End of range must be after the start.");
+      return;
+    }
+    onApply({ from: startIso, to: endIso });
+    setIsOpen(false);
+  };
+  const handleCancel = () => {
+    setStartValue(formatInputValue(from));
+    setEndValue(formatInputValue(to));
+    setError(null);
+    setIsOpen(false);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: styles.root, ref: containerRef, children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: clsx(styles.chip, { [styles.active]: isActive }),
+        onClick: () => setIsOpen((v) => !v),
+        children: "Custom"
+      }
+    ),
+    summary && /* @__PURE__ */ jsx("span", { className: styles.summary, children: summary }),
+    isOpen && /* @__PURE__ */ jsxs("div", { className: styles.popover, role: "dialog", "aria-modal": "false", children: [
+      /* @__PURE__ */ jsx("header", { className: styles.popoverHeader, children: /* @__PURE__ */ jsx("h4", { children: "Custom Time Range" }) }),
+      /* @__PURE__ */ jsxs("div", { className: styles.fields, children: [
+        /* @__PURE__ */ jsxs("label", { className: styles.field, children: [
+          /* @__PURE__ */ jsx("span", { children: "Start" }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "datetime-local",
+              value: startValue,
+              onChange: (e) => setStartValue(e.target.value),
+              max: endValue || void 0
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("label", { className: styles.field, children: [
+          /* @__PURE__ */ jsx("span", { children: "End" }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "datetime-local",
+              value: endValue,
+              onChange: (e) => setEndValue(e.target.value),
+              min: startValue || void 0
+            }
+          )
+        ] })
+      ] }),
+      error && /* @__PURE__ */ jsx("p", { className: styles.error, children: error }),
+      /* @__PURE__ */ jsxs("footer", { className: styles.actions, children: [
+        /* @__PURE__ */ jsx("button", { type: "button", className: styles.btnGhost, onClick: handleCancel, children: "Cancel" }),
+        /* @__PURE__ */ jsx("button", { type: "button", className: styles.btnPrimary, onClick: handleApply, children: "Apply" })
+      ] })
+    ] })
+  ] });
+};
 export {
-  Select
+  CustomRangePicker
 };
 //# sourceMappingURL=index14.js.map

package/dist/index14.js.map

@@ -1 +1 @@
-{"version":3,"file":"index14.js","sources":["../src/primitives/Select/Select.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport styles from './Select.module.css';\n\nexport interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {}\n\nexport const Select = forwardRef<HTMLSelectElement, SelectProps>(\n  ({ className, children, ...props }, ref) => (\n    <select ref={ref} className={clsx(styles.root, className)} {...props}>\n      {children}\n    </select>\n  ),\n);\n\nSelect.displayName = 'Select';\n"],"names":[],"mappings":";;;;AAMO,MAAM,SAAS;AAAA,EACpB,CAAC,EAAE,WAAW,UAAU,GAAG,MAAA,GAAS,QAClC,oBAAC,YAAO,KAAU,WAAW,KAAK,OAAO,MAAM,SAAS,GAAI,GAAG,OAC5D,SAAA,CACH;AAEJ;AAEA,OAAO,cAAc;"}
+{"version":3,"file":"index14.js","sources":["../src/composites/CustomRangePicker/CustomRangePicker.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef, useState, useCallback } from 'react';\nimport clsx from 'clsx';\nimport { useClickOutside } from '../../hooks/useClickOutside';\nimport { useEscapeKey } from '../../hooks/useEscapeKey';\nimport { formatLocalISOString } from '../../utils/format';\nimport styles from './CustomRangePicker.module.css';\n\nexport interface CustomRangePickerProps {\n  /** Start of the current range (ISO string). */\n  from?: string;\n  /** End of the current range (ISO string). */\n  to?: string;\n  /** Called when user applies a valid range. */\n  onApply: (range: { from: string; to: string }) => void;\n}\n\nconst formatInputValue = (iso?: string): string => {\n  if (!iso) return '';\n  const date = new Date(iso);\n  if (Number.isNaN(date.getTime())) return '';\n  const y = date.getFullYear();\n  const m = `${date.getMonth() + 1}`.padStart(2, '0');\n  const d = `${date.getDate()}`.padStart(2, '0');\n  const h = `${date.getHours()}`.padStart(2, '0');\n  const min = `${date.getMinutes()}`.padStart(2, '0');\n  return `${y}-${m}-${d}T${h}:${min}`;\n};\n\nconst toLocalTimestamp = (value: string): string | null => {\n  if (!value) return null;\n  const date = new Date(value);\n  if (Number.isNaN(date.getTime())) return null;\n  return formatLocalISOString(date);\n};\n\nexport const CustomRangePicker = ({ from, to, onApply }: CustomRangePickerProps) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const [startValue, setStartValue] = useState(() => formatInputValue(from));\n  const [endValue, setEndValue] = useState(() => formatInputValue(to));\n  const [error, setError] = useState<string | null>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const isActive = Boolean(from && to);\n\n  const close = useCallback(() => setIsOpen(false), []);\n  useClickOutside(containerRef, close);\n  useEscapeKey(close, isOpen);\n\n  useEffect(() => {\n    if (!isOpen) return;\n    setStartValue(formatInputValue(from));\n    setEndValue(formatInputValue(to));\n    setError(null);\n  }, [from, to, isOpen]);\n\n  const summary = useMemo(() => {\n    if (!from || !to) return null;\n    const s = new Date(from);\n    const e = new Date(to);\n    if (Number.isNaN(s.getTime()) || Number.isNaN(e.getTime())) return null;\n    const fmt = new Intl.DateTimeFormat(undefined, {\n      year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit',\n    });\n    return `${fmt.format(s)} – ${fmt.format(e)}`;\n  }, [from, to]);\n\n  const handleApply = () => {\n    const startIso = toLocalTimestamp(startValue);\n    const endIso = toLocalTimestamp(endValue);\n    if (!startIso || !endIso) {\n      setError('Both start and end date are required.');\n      return;\n    }\n    if (startIso >= endIso) {\n      setError('End of range must be after the start.');\n      return;\n    }\n    onApply({ from: startIso, to: endIso });\n    setIsOpen(false);\n  };\n\n  const handleCancel = () => {\n    setStartValue(formatInputValue(from));\n    setEndValue(formatInputValue(to));\n    setError(null);\n    setIsOpen(false);\n  };\n\n  return (\n    <div className={styles.root} ref={containerRef}>\n      <button\n        type=\"button\"\n        className={clsx(styles.chip, { [styles.active]: isActive })}\n        onClick={() => setIsOpen((v) => !v)}\n      >\n        Custom\n      </button>\n      {summary && <span className={styles.summary}>{summary}</span>}\n\n      {isOpen && (\n        <div className={styles.popover} role=\"dialog\" aria-modal=\"false\">\n          <header className={styles.popoverHeader}>\n            <h4>Custom Time Range</h4>\n          </header>\n          <div className={styles.fields}>\n            <label className={styles.field}>\n              <span>Start</span>\n              <input\n                type=\"datetime-local\"\n                value={startValue}\n                onChange={(e) => setStartValue(e.target.value)}\n                max={endValue || undefined}\n              />\n            </label>\n            <label className={styles.field}>\n              <span>End</span>\n              <input\n                type=\"datetime-local\"\n                value={endValue}\n                onChange={(e) => setEndValue(e.target.value)}\n                min={startValue || undefined}\n              />\n            </label>\n          </div>\n          {error && <p className={styles.error}>{error}</p>}\n          <footer className={styles.actions}>\n            <button type=\"button\" className={styles.btnGhost} onClick={handleCancel}>\n              Cancel\n            </button>\n            <button type=\"button\" className={styles.btnPrimary} onClick={handleApply}>\n              Apply\n            </button>\n          </footer>\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/index15.cjs

@@ -1,10 +1,12 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const clsx = require("./index17.cjs");
-const Table_module = require("./index19.cjs");
-const TableContainer = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx.clsx(Table_module.default.container, className), ...props });
-const Table = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("table", { className: clsx.clsx(Table_module.default.root, className), ...props });
-exports.Table = Table;
-exports.TableContainer = TableContainer;
+const react = require("react");
+const clsx = require("./index23.cjs");
+const Input_module = require("./index37.cjs");
+const Input = react.forwardRef(
+  ({ className, type = "text", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("input", { ref, type, className: clsx.clsx(Input_module.default.root, className), ...props })
+);
+Input.displayName = "Input";
+exports.Input = Input;
 //# sourceMappingURL=index15.cjs.map

package/dist/index15.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index15.cjs","sources":["../src/primitives/Table/Table.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport styles from './Table.module.css';\n\nexport interface TableContainerProps extends React.HTMLAttributes<HTMLDivElement> {}\nexport interface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {}\n\nexport const TableContainer = ({ className, ...props }: TableContainerProps) => (\n  <div className={clsx(styles.container, className)} {...props} />\n);\n\nexport const Table = ({ className, ...props }: TableProps) => (\n  <table className={clsx(styles.root, className)} {...props} />\n);\n"],"names":["jsx","clsx","styles"],"mappings":";;;;;AAMO,MAAM,iBAAiB,CAAC,EAAE,WAAW,GAAG,YAC7CA,2BAAAA,IAAC,OAAA,EAAI,WAAWC,KAAAA,KAAKC,aAAAA,QAAO,WAAW,SAAS,GAAI,GAAG,MAAA,CAAO;AAGzD,MAAM,QAAQ,CAAC,EAAE,WAAW,GAAG,YACpCF,2BAAAA,IAAC,SAAA,EAAM,WAAWC,KAAAA,KAAKC,aAAAA,QAAO,MAAM,SAAS,GAAI,GAAG,MAAA,CAAO;;;"}
+{"version":3,"file":"index15.cjs","sources":["../src/primitives/Input/Input.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport styles from './Input.module.css';\n\nexport interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(\n  ({ className, type = 'text', ...props }, ref) => (\n    <input ref={ref} type={type} className={clsx(styles.root, className)} {...props} />\n  ),\n);\n\nInput.displayName = 'Input';\n"],"names":["forwardRef","jsx","clsx","styles"],"mappings":";;;;;;AAMO,MAAM,QAAQA,MAAAA;AAAAA,EACnB,CAAC,EAAE,WAAW,OAAO,QAAQ,GAAG,SAAS,QACvCC,2BAAAA,IAAC,WAAM,KAAU,MAAY,WAAWC,UAAKC,aAAAA,QAAO,MAAM,SAAS,GAAI,GAAG,MAAA,CAAO;AAErF;AAEA,MAAM,cAAc;;"}

package/dist/index15.js

@@ -1,10 +1,12 @@
 import { jsx } from "react/jsx-runtime";
-import { clsx } from "./index17.js";
-import styles from "./index19.js";
-const TableContainer = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: clsx(styles.container, className), ...props });
-const Table = ({ className, ...props }) => /* @__PURE__ */ jsx("table", { className: clsx(styles.root, className), ...props });
+import { forwardRef } from "react";
+import { clsx } from "./index23.js";
+import styles from "./index37.js";
+const Input = forwardRef(
+  ({ className, type = "text", ...props }, ref) => /* @__PURE__ */ jsx("input", { ref, type, className: clsx(styles.root, className), ...props })
+);
+Input.displayName = "Input";
 export {
-  Table,
-  TableContainer
+  Input
 };
 //# sourceMappingURL=index15.js.map

package/dist/index15.js.map

@@ -1 +1 @@
-{"version":3,"file":"index15.js","sources":["../src/primitives/Table/Table.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport styles from './Table.module.css';\n\nexport interface TableContainerProps extends React.HTMLAttributes<HTMLDivElement> {}\nexport interface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {}\n\nexport const TableContainer = ({ className, ...props }: TableContainerProps) => (\n  <div className={clsx(styles.container, className)} {...props} />\n);\n\nexport const Table = ({ className, ...props }: TableProps) => (\n  <table className={clsx(styles.root, className)} {...props} />\n);\n"],"names":[],"mappings":";;;AAMO,MAAM,iBAAiB,CAAC,EAAE,WAAW,GAAG,YAC7C,oBAAC,OAAA,EAAI,WAAW,KAAK,OAAO,WAAW,SAAS,GAAI,GAAG,MAAA,CAAO;AAGzD,MAAM,QAAQ,CAAC,EAAE,WAAW,GAAG,YACpC,oBAAC,SAAA,EAAM,WAAW,KAAK,OAAO,MAAM,SAAS,GAAI,GAAG,MAAA,CAAO;"}
+{"version":3,"file":"index15.js","sources":["../src/primitives/Input/Input.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport styles from './Input.module.css';\n\nexport interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(\n  ({ className, type = 'text', ...props }, ref) => (\n    <input ref={ref} type={type} className={clsx(styles.root, className)} {...props} />\n  ),\n);\n\nInput.displayName = 'Input';\n"],"names":[],"mappings":";;;;AAMO,MAAM,QAAQ;AAAA,EACnB,CAAC,EAAE,WAAW,OAAO,QAAQ,GAAG,SAAS,QACvC,oBAAC,WAAM,KAAU,MAAY,WAAW,KAAK,OAAO,MAAM,SAAS,GAAI,GAAG,MAAA,CAAO;AAErF;AAEA,MAAM,cAAc;"}

package/dist/index16.cjs

@@ -1,12 +1,42 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const react = require("react");
-const clsx = require("./index17.cjs");
-const Textarea_module = require("./index23.cjs");
-const Textarea = react.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("textarea", { ref, className: clsx.clsx(Textarea_module.default.root, className), ...props })
-);
-Textarea.displayName = "Textarea";
-exports.Textarea = Textarea;
+const reactDom = require("react-dom");
+const clsx = require("./index23.cjs");
+const useEscapeKey = require("./index4.cjs");
+const Modal_module = require("./index33.cjs");
+const Modal = ({
+  open,
+  title,
+  onClose,
+  children,
+  footer,
+  portalTarget,
+  className,
+  bodyClassName,
+  style,
+  closeLabel = "×"
+}) => {
+  useEscapeKey.useEscapeKey(onClose, open);
+  if (!open) return null;
+  const modalContent = /* @__PURE__ */ jsxRuntime.jsx("div", { className: Modal_module.default.overlay, role: "dialog", "aria-modal": "true", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx.clsx(Modal_module.default.root, className), style, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Modal_module.default.header, children: [
+      title ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: Modal_module.default.title, children: title }) : /* @__PURE__ */ jsxRuntime.jsx("span", {}),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onClose,
+          className: Modal_module.default.closeBtn,
+          "aria-label": "Close modal",
+          children: closeLabel
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx.clsx(Modal_module.default.body, bodyClassName), children }),
+    footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: Modal_module.default.footer, children: footer })
+  ] }) });
+  return reactDom.createPortal(modalContent, portalTarget ?? document.body);
+};
+exports.Modal = Modal;
 //# sourceMappingURL=index16.cjs.map

package/dist/index16.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index16.cjs","sources":["../src/primitives/Textarea/Textarea.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport styles from './Textarea.module.css';\n\nexport interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}\n\nexport const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(\n  ({ className, ...props }, ref) => (\n    <textarea ref={ref} className={clsx(styles.root, className)} {...props} />\n  ),\n);\n\nTextarea.displayName = 'Textarea';\n"],"names":["forwardRef","jsx","clsx","styles"],"mappings":";;;;;;AAMO,MAAM,WAAWA,MAAAA;AAAAA,EACtB,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QACxBC,2BAAAA,IAAC,YAAA,EAAS,KAAU,WAAWC,KAAAA,KAAKC,gBAAAA,QAAO,MAAM,SAAS,GAAI,GAAG,MAAA,CAAO;AAE5E;AAEA,SAAS,cAAc;;"}
+{"version":3,"file":"index16.cjs","sources":["../src/primitives/Modal/Modal.tsx"],"sourcesContent":["import { type CSSProperties, type ReactNode } from 'react';\nimport { createPortal } from 'react-dom';\nimport clsx from 'clsx';\nimport { useEscapeKey } from '../../hooks/useEscapeKey';\nimport styles from './Modal.module.css';\n\nexport interface ModalProps {\n  open: boolean;\n  title?: ReactNode;\n  onClose: () => void;\n  children: ReactNode;\n  footer?: ReactNode;\n  portalTarget?: HTMLElement;\n  className?: string;\n  bodyClassName?: string;\n  style?: CSSProperties;\n  closeLabel?: ReactNode;\n}\n\nexport const Modal = ({\n  open,\n  title,\n  onClose,\n  children,\n  footer,\n  portalTarget,\n  className,\n  bodyClassName,\n  style,\n  closeLabel = '\\u00D7',\n}: ModalProps) => {\n  useEscapeKey(onClose, open);\n\n  if (!open) return null;\n\n  const modalContent = (\n    <div className={styles.overlay} role=\"dialog\" aria-modal=\"true\">\n      <div className={clsx(styles.root, className)} style={style}>\n        <div className={styles.header}>\n          {title ? <h2 className={styles.title}>{title}</h2> : <span />}\n          <button\n            type=\"button\"\n            onClick={onClose}\n            className={styles.closeBtn}\n            aria-label=\"Close modal\"\n          >\n            {closeLabel}\n          </button>\n        </div>\n        <div className={clsx(styles.body, bodyClassName)}>{children}</div>\n        {footer && <div className={styles.footer}>{footer}</div>}\n      </div>\n    </div>\n  );\n\n  return createPortal(modalContent, portalTarget ?? document.body);\n};\n"],"names":["useEscapeKey","jsx","styles","jsxs","clsx","createPortal"],"mappings":";;;;;;;AAmBO,MAAM,QAAQ,CAAC;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AACf,MAAkB;AAChBA,eAAAA,aAAa,SAAS,IAAI;AAE1B,MAAI,CAAC,KAAM,QAAO;AAElB,QAAM,eACJC,+BAAC,OAAA,EAAI,WAAWC,aAAAA,QAAO,SAAS,MAAK,UAAS,cAAW,QACvD,UAAAC,gCAAC,SAAI,WAAWC,KAAAA,KAAKF,qBAAO,MAAM,SAAS,GAAG,OAC5C,UAAA;AAAA,IAAAC,2BAAAA,KAAC,OAAA,EAAI,WAAWD,aAAAA,QAAO,QACpB,UAAA;AAAA,MAAA,QAAQD,2BAAAA,IAAC,QAAG,WAAWC,aAAAA,QAAO,OAAQ,UAAA,MAAA,CAAM,mCAAS,QAAA,CAAA,CAAK;AAAA,MAC3DD,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAS;AAAA,UACT,WAAWC,aAAAA,QAAO;AAAA,UAClB,cAAW;AAAA,UAEV,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,GACF;AAAA,IACAD,+BAAC,SAAI,WAAWG,KAAAA,KAAKF,aAAAA,QAAO,MAAM,aAAa,GAAI,UAAS;AAAA,IAC3D,UAAUD,2BAAAA,IAAC,OAAA,EAAI,WAAWC,aAAAA,QAAO,QAAS,UAAA,OAAA,CAAO;AAAA,EAAA,EAAA,CACpD,EAAA,CACF;AAGF,SAAOG,SAAAA,aAAa,cAAc,gBAAgB,SAAS,IAAI;AACjE;;"}

package/dist/index16.js

@@ -1,12 +1,42 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { clsx } from "./index17.js";
-import styles from "./index23.js";
-const Textarea = forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("textarea", { ref, className: clsx(styles.root, className), ...props })
-);
-Textarea.displayName = "Textarea";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+import { clsx } from "./index23.js";
+import { useEscapeKey } from "./index4.js";
+import styles from "./index33.js";
+const Modal = ({
+  open,
+  title,
+  onClose,
+  children,
+  footer,
+  portalTarget,
+  className,
+  bodyClassName,
+  style,
+  closeLabel = "×"
+}) => {
+  useEscapeKey(onClose, open);
+  if (!open) return null;
+  const modalContent = /* @__PURE__ */ jsx("div", { className: styles.overlay, role: "dialog", "aria-modal": "true", children: /* @__PURE__ */ jsxs("div", { className: clsx(styles.root, className), style, children: [
+    /* @__PURE__ */ jsxs("div", { className: styles.header, children: [
+      title ? /* @__PURE__ */ jsx("h2", { className: styles.title, children: title }) : /* @__PURE__ */ jsx("span", {}),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onClose,
+          className: styles.closeBtn,
+          "aria-label": "Close modal",
+          children: closeLabel
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: clsx(styles.body, bodyClassName), children }),
+    footer && /* @__PURE__ */ jsx("div", { className: styles.footer, children: footer })
+  ] }) });
+  return createPortal(modalContent, portalTarget ?? document.body);
+};
 export {
-  Textarea
+  Modal
 };
 //# sourceMappingURL=index16.js.map

package/dist/index16.js.map

@@ -1 +1 @@
-{"version":3,"file":"index16.js","sources":["../src/primitives/Textarea/Textarea.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport styles from './Textarea.module.css';\n\nexport interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}\n\nexport const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(\n  ({ className, ...props }, ref) => (\n    <textarea ref={ref} className={clsx(styles.root, className)} {...props} />\n  ),\n);\n\nTextarea.displayName = 'Textarea';\n"],"names":[],"mappings":";;;;AAMO,MAAM,WAAW;AAAA,EACtB,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QACxB,oBAAC,YAAA,EAAS,KAAU,WAAW,KAAK,OAAO,MAAM,SAAS,GAAI,GAAG,MAAA,CAAO;AAE5E;AAEA,SAAS,cAAc;"}
+{"version":3,"file":"index16.js","sources":["../src/primitives/Modal/Modal.tsx"],"sourcesContent":["import { type CSSProperties, type ReactNode } from 'react';\nimport { createPortal } from 'react-dom';\nimport clsx from 'clsx';\nimport { useEscapeKey } from '../../hooks/useEscapeKey';\nimport styles from './Modal.module.css';\n\nexport interface ModalProps {\n  open: boolean;\n  title?: ReactNode;\n  onClose: () => void;\n  children: ReactNode;\n  footer?: ReactNode;\n  portalTarget?: HTMLElement;\n  className?: string;\n  bodyClassName?: string;\n  style?: CSSProperties;\n  closeLabel?: ReactNode;\n}\n\nexport const Modal = ({\n  open,\n  title,\n  onClose,\n  children,\n  footer,\n  portalTarget,\n  className,\n  bodyClassName,\n  style,\n  closeLabel = '\\u00D7',\n}: ModalProps) => {\n  useEscapeKey(onClose, open);\n\n  if (!open) return null;\n\n  const modalContent = (\n    <div className={styles.overlay} role=\"dialog\" aria-modal=\"true\">\n      <div className={clsx(styles.root, className)} style={style}>\n        <div className={styles.header}>\n          {title ? <h2 className={styles.title}>{title}</h2> : <span />}\n          <button\n            type=\"button\"\n            onClick={onClose}\n            className={styles.closeBtn}\n            aria-label=\"Close modal\"\n          >\n            {closeLabel}\n          </button>\n        </div>\n        <div className={clsx(styles.body, bodyClassName)}>{children}</div>\n        {footer && <div className={styles.footer}>{footer}</div>}\n      </div>\n    </div>\n  );\n\n  return createPortal(modalContent, portalTarget ?? document.body);\n};\n"],"names":[],"mappings":";;;;;AAmBO,MAAM,QAAQ,CAAC;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AACf,MAAkB;AAChB,eAAa,SAAS,IAAI;AAE1B,MAAI,CAAC,KAAM,QAAO;AAElB,QAAM,eACJ,oBAAC,OAAA,EAAI,WAAW,OAAO,SAAS,MAAK,UAAS,cAAW,QACvD,UAAA,qBAAC,SAAI,WAAW,KAAK,OAAO,MAAM,SAAS,GAAG,OAC5C,UAAA;AAAA,IAAA,qBAAC,OAAA,EAAI,WAAW,OAAO,QACpB,UAAA;AAAA,MAAA,QAAQ,oBAAC,QAAG,WAAW,OAAO,OAAQ,UAAA,MAAA,CAAM,wBAAS,QAAA,CAAA,CAAK;AAAA,MAC3D;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAS;AAAA,UACT,WAAW,OAAO;AAAA,UAClB,cAAW;AAAA,UAEV,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,GACF;AAAA,IACA,oBAAC,SAAI,WAAW,KAAK,OAAO,MAAM,aAAa,GAAI,UAAS;AAAA,IAC3D,UAAU,oBAAC,OAAA,EAAI,WAAW,OAAO,QAAS,UAAA,OAAA,CAAO;AAAA,EAAA,EAAA,CACpD,EAAA,CACF;AAGF,SAAO,aAAa,cAAc,gBAAgB,SAAS,IAAI;AACjE;"}

package/dist/index17.cjs

@@ -1,18 +1,228 @@
 "use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-function r(e) {
-  var t, f, n = "";
-  if ("string" == typeof e || "number" == typeof e) n += e;
-  else if ("object" == typeof e) if (Array.isArray(e)) {
-    var o = e.length;
-    for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
-  } else for (f in e) e[f] && (n && (n += " "), n += f);
-  return n;
-}
-function clsx() {
-  for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
-  return n;
-}
-exports.clsx = clsx;
-exports.default = clsx;
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const clsx = require("./index23.cjs");
+const useClickOutside = require("./index3.cjs");
+const constants = require("./index30.cjs");
+const MultiSelectDropdown_module = require("./index31.cjs");
+const arraysMatch = (a, b) => {
+  if (a.length !== b.length) return false;
+  const set = new Set(b);
+  return a.every((v) => set.has(v));
+};
+const MultiSelectDropdown = ({
+  label,
+  options,
+  selected,
+  onApply,
+  isLoading = false,
+  error = null,
+  allowCustomValues = false,
+  customTriggerLabel,
+  selectionMode
+}) => {
+  const [isOpen, setIsOpen] = react.useState(false);
+  const [searchTerm, setSearchTerm] = react.useState("");
+  const containerRef = react.useRef(null);
+  const normalizedOptions = react.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    options.forEach((opt) => map.set(opt.value, opt));
+    if (Array.isArray(selected)) {
+      selected.forEach((v) => {
+        if (v && !map.has(v)) map.set(v, { value: v });
+      });
+    }
+    return Array.from(map.values());
+  }, [options, selected]);
+  const filteredOptions = react.useMemo(() => {
+    if (!searchTerm.trim()) return normalizedOptions;
+    const term = searchTerm.trim().toLowerCase();
+    return normalizedOptions.filter((opt) => {
+      const lbl = opt.label ?? opt.value;
+      return lbl.toLowerCase().includes(term) || opt.value.toLowerCase().includes(term);
+    });
+  }, [normalizedOptions, searchTerm]);
+  const allOptionValues = react.useMemo(() => normalizedOptions.map((o) => o.value), [normalizedOptions]);
+  const initialSelection = react.useMemo(
+    () => Array.isArray(selected) && selected.length ? Array.from(new Set(selected)) : allOptionValues,
+    [selected, allOptionValues]
+  );
+  const [pendingSelection, setPendingSelection] = react.useState(initialSelection);
+  const closeAndReset = react.useCallback(() => {
+    setIsOpen(false);
+    setPendingSelection(initialSelection);
+    setSearchTerm("");
+  }, [initialSelection]);
+  useClickOutside.useClickOutside(containerRef, closeAndReset);
+  react.useEffect(() => {
+    if (isOpen) {
+      setPendingSelection(initialSelection);
+      setSearchTerm("");
+    }
+  }, [isOpen, initialSelection]);
+  react.useEffect(() => {
+    if (!isOpen) setPendingSelection(initialSelection);
+  }, [initialSelection, isOpen]);
+  const handleToggleOption = (value) => {
+    setPendingSelection((prev) => {
+      const unique = Array.from(new Set(prev));
+      return unique.includes(value) ? unique.filter((v) => v !== value) : [...unique, value];
+    });
+  };
+  const handleSelectAll = () => {
+    if (filteredOptions.length === 0) {
+      setPendingSelection([]);
+      return;
+    }
+    setPendingSelection(filteredOptions.map((o) => o.value));
+  };
+  const handleClearAll = () => setPendingSelection([]);
+  const handleApply = () => {
+    const unique = Array.from(new Set(pendingSelection));
+    const mode = unique.length === 0 || unique.length === normalizedOptions.length ? "all" : "custom";
+    onApply(unique, { selectionMode: mode });
+    setIsOpen(false);
+  };
+  const handleCancel = () => {
+    setPendingSelection(Array.from(new Set(Array.isArray(selected) ? selected : [])));
+    setIsOpen(false);
+  };
+  const pendingSet = react.useMemo(() => new Set(pendingSelection), [pendingSelection]);
+  const selectedSet = react.useMemo(() => new Set(Array.isArray(selected) ? selected : []), [selected]);
+  const hasChanges = !arraysMatch(Array.from(pendingSet), Array.from(selectedSet));
+  const totalOptions = normalizedOptions.length;
+  const selectedSize = selectedSet.size;
+  const pendingSize = pendingSet.size;
+  const isSelectedAll = selectedSize === 0 || selectedSize === totalOptions;
+  const isPendingAll = pendingSize === 0 || pendingSize === totalOptions;
+  const selectedCountValue = isSelectedAll ? totalOptions : selectedSize;
+  const pendingCountValue = isPendingAll ? totalOptions : pendingSize;
+  const isActiveFilter = selectionMode !== void 0 ? selectionMode === "custom" : !isSelectedAll;
+  const getSelectedLabel = () => {
+    if (isSelectedAll) return "All";
+    if (selectedSize === 1) {
+      const val = Array.from(selectedSet)[0];
+      const opt = normalizedOptions.find((o) => o.value === val);
+      return (opt == null ? void 0 : opt.label) || (opt == null ? void 0 : opt.value) || String(selectedCountValue);
+    }
+    return String(selectedCountValue);
+  };
+  const shouldDisableControls = isLoading || options.length === 0;
+  const normalizedSearch = searchTerm.trim();
+  const canCreateCustom = allowCustomValues && normalizedSearch.length > 0 && !normalizedOptions.some((o) => o.value.toLowerCase() === normalizedSearch.toLowerCase());
+  const handleCreateCustom = () => {
+    if (!normalizedSearch) return;
+    setPendingSelection((prev) => Array.from(/* @__PURE__ */ new Set([...prev, normalizedSearch])));
+    setSearchTerm("");
+  };
+  const handleClearFilter = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    onApply([], { selectionMode: "all" });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: MultiSelectDropdown_module.default.root, ref: containerRef, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        className: clsx.clsx(MultiSelectDropdown_module.default.trigger, { [MultiSelectDropdown_module.default.active]: isOpen }),
+        onClick: () => setIsOpen((prev) => !prev),
+        "aria-expanded": isOpen,
+        "aria-haspopup": "listbox",
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: MultiSelectDropdown_module.default.triggerContent, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("svg", { className: MultiSelectDropdown_module.default.chevron, width: constants.ICON_SIZE.MD, height: constants.ICON_SIZE.MD, viewBox: constants.SVG_VIEWBOX, fill: "none", stroke: "currentColor", strokeWidth: constants.SVG_STROKE_WIDTH, strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "6 9 12 15 18 9" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: MultiSelectDropdown_module.default.label, children: label }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: MultiSelectDropdown_module.default.valueGroup, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: MultiSelectDropdown_module.default.value, children: customTriggerLabel || getSelectedLabel() }),
+            isActiveFilter && /* @__PURE__ */ jsxRuntime.jsx("span", { className: MultiSelectDropdown_module.default.badge, children: selectedCountValue }),
+            isActiveFilter && /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                role: "button",
+                tabIndex: 0,
+                className: MultiSelectDropdown_module.default.clear,
+                onClick: handleClearFilter,
+                onKeyDown: (e) => {
+                  if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    handleClearFilter(e);
+                  }
+                },
+                "aria-label": `Clear ${label} filter`,
+                children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: constants.ICON_SIZE.SM, height: constants.ICON_SIZE.SM, viewBox: constants.SVG_VIEWBOX, fill: "none", stroke: "currentColor", strokeWidth: constants.SVG_STROKE_WIDTH, strokeLinecap: "round", strokeLinejoin: "round", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+                ] })
+              }
+            )
+          ] })
+        ] })
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: MultiSelectDropdown_module.default.panel, role: "dialog", "aria-label": `${label} filter`, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: MultiSelectDropdown_module.default.header, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "search",
+            className: MultiSelectDropdown_module.default.search,
+            placeholder: `Search ${label.toLowerCase()}`,
+            value: searchTerm,
+            onChange: (e) => setSearchTerm(e.target.value),
+            disabled: shouldDisableControls
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: MultiSelectDropdown_module.default.headerActions, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: MultiSelectDropdown_module.default.chip, onClick: handleSelectAll, disabled: shouldDisableControls, children: "Select all" }),
+          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: clsx.clsx(MultiSelectDropdown_module.default.chip, MultiSelectDropdown_module.default.chipGhost), onClick: handleClearAll, disabled: pendingSize === 0, children: "Deselect all" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: MultiSelectDropdown_module.default.list, role: "listbox", children: [
+        isLoading && /* @__PURE__ */ jsxRuntime.jsx("p", { className: MultiSelectDropdown_module.default.status, children: "Loading options..." }),
+        !isLoading && error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: clsx.clsx(MultiSelectDropdown_module.default.status, MultiSelectDropdown_module.default.statusError), children: error }),
+        !isLoading && !error && filteredOptions.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("p", { className: MultiSelectDropdown_module.default.status, children: "No matches" }),
+        !isLoading && !error && filteredOptions.map((opt) => {
+          const checked = pendingSet.has(opt.value);
+          return /* @__PURE__ */ jsxRuntime.jsxs("label", { className: MultiSelectDropdown_module.default.option, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                type: "checkbox",
+                checked,
+                onChange: () => handleToggleOption(opt.value),
+                "aria-checked": checked
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: MultiSelectDropdown_module.default.optionLabel, children: [
+              opt.label ?? opt.value,
+              opt.count !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: MultiSelectDropdown_module.default.optionCount, children: opt.count })
+            ] })
+          ] }, opt.value);
+        }),
+        !isLoading && !error && canCreateCustom && /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: MultiSelectDropdown_module.default.create, onClick: handleCreateCustom, children: [
+          'Use "',
+          normalizedSearch,
+          '"'
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: MultiSelectDropdown_module.default.footer, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: MultiSelectDropdown_module.default.selection, children: [
+          isPendingAll ? "All selected" : `${pendingCountValue} selected`,
+          hasChanges && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: MultiSelectDropdown_module.default.selectionDelta, children: [
+            "(",
+            pendingCountValue - selectedCountValue >= 0 ? "+" : "",
+            pendingCountValue - selectedCountValue,
+            ")"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: MultiSelectDropdown_module.default.footerActions, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: clsx.clsx(MultiSelectDropdown_module.default.chip, MultiSelectDropdown_module.default.chipGhost), onClick: handleCancel, children: "Cancel" }),
+          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: MultiSelectDropdown_module.default.chip, onClick: handleApply, disabled: !hasChanges, children: "Apply" })
+        ] })
+      ] })
+    ] })
+  ] });
+};
+exports.MultiSelectDropdown = MultiSelectDropdown;
 //# sourceMappingURL=index17.cjs.map