@schandlergarcia/sf-web-components 1.0.0

package/dist/components/library/chat/useChatState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useChatState.js","sources":["../../../../src/components/library/chat/useChatState.jsx"],"sourcesContent":["import { useState, useCallback, useRef } from \"react\";\n\nlet _nextId = 1;\nfunction uid() {\n  return `msg-${Date.now()}-${_nextId++}`;\n}\n\n/**\n * Core state management hook for AI chat.\n *\n * @param {Object} options\n * @param {Array}  options.initialMessages — seed the conversation\n * @param {Function} options.onSend — async (userMessage, allMessages) => assistantMessage | void\n *   Return a message object to add it, or use appendChunk / addMessage for streaming.\n *\n * @returns {Object}\n *\n * @example\n * const chat = useChatState({\n *   onSend: async (msg, history) => {\n *     const res = await fetch(\"/api/chat\", { method: \"POST\", body: JSON.stringify({ messages: history }) });\n *     const data = await res.json();\n *     return { role: \"assistant\", content: data.reply, components: data.components };\n *   },\n * });\n */\nexport default function useChatState({ initialMessages = [], onSend } = {}) {\n  const [messages, setMessages] = useState(() =>\n    initialMessages.map((m) => ({ id: uid(), timestamp: new Date().toISOString(), ...m }))\n  );\n  const [isLoading, setIsLoading] = useState(false);\n  const [isStreaming, setIsStreaming] = useState(false);\n  const [error, setError] = useState(null);\n  const onSendRef = useRef(onSend);\n  onSendRef.current = onSend;\n\n  const addMessage = useCallback((msg) => {\n    const full = { id: uid(), timestamp: new Date().toISOString(), ...msg };\n    setMessages((prev) => [...prev, full]);\n    return full.id;\n  }, []);\n\n  const updateMessage = useCallback((id, updates) => {\n    setMessages((prev) =>\n      prev.map((m) => (m.id === id ? { ...m, ...updates } : m))\n    );\n  }, []);\n\n  const appendChunk = useCallback((id, chunk) => {\n    setMessages((prev) =>\n      prev.map((m) =>\n        m.id === id ? { ...m, content: (m.content ?? \"\") + chunk } : m\n      )\n    );\n  }, []);\n\n  const removeMessage = useCallback((id) => {\n    setMessages((prev) => prev.filter((m) => m.id !== id));\n  }, []);\n\n  const clearMessages = useCallback(() => {\n    setMessages([]);\n    setError(null);\n  }, []);\n\n  const sendMessage = useCallback(\n    async (content, extra = {}) => {\n      if (!content?.trim()) return;\n      setError(null);\n\n      const userMsg = { role: \"user\", content: content.trim(), ...extra };\n      const userId = uid();\n      const fullUser = { ...userMsg, id: userId, timestamp: new Date().toISOString() };\n\n      setMessages((prev) => [...prev, fullUser]);\n      setIsLoading(true);\n\n      try {\n        const allMsgs = [...messages, fullUser];\n        const result = await onSendRef.current?.(fullUser, allMsgs, {\n          addMessage,\n          updateMessage,\n          appendChunk,\n          setStreaming: setIsStreaming,\n        });\n\n        if (result && typeof result === \"object\" && result.role) {\n          addMessage(result);\n        }\n      } catch (err) {\n        setError(err?.message ?? \"Failed to send message\");\n        addMessage({\n          role: \"system\",\n          content: err?.message ?? \"Something went wrong. Please try again.\",\n          isError: true,\n        });\n      } finally {\n        setIsLoading(false);\n        setIsStreaming(false);\n      }\n    },\n    [messages, addMessage, updateMessage, appendChunk]\n  );\n\n  const retryLast = useCallback(() => {\n    const lastUser = [...messages].reverse().find((m) => m.role === \"user\");\n    if (!lastUser) return;\n\n    const idx = messages.lastIndexOf(lastUser);\n    setMessages(messages.slice(0, idx));\n    setError(null);\n\n    sendMessage(lastUser.content);\n  }, [messages, sendMessage]);\n\n  return {\n    messages,\n    isLoading,\n    isStreaming,\n    error,\n    sendMessage,\n    addMessage,\n    updateMessage,\n    appendChunk,\n    removeMessage,\n    clearMessages,\n    retryLast,\n    setError,\n  };\n}\n"],"names":["_nextId","uid","useChatState","initialMessages","onSend","messages","setMessages","useState","m","isLoading","setIsLoading","isStreaming","setIsStreaming","error","setError","onSendRef","useRef","addMessage","useCallback","msg","full","prev","updateMessage","id","updates","appendChunk","chunk","removeMessage","clearMessages","sendMessage","content","extra","userMsg","userId","fullUser","allMsgs","result","err","retryLast","lastUser","idx"],"mappings":"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"}

package/dist/components/library/data/DataModeProvider.js

@@ -0,0 +1,47 @@
+import { jsx as m } from "react/jsx-runtime";
+import t from "react";
+const i = t.createContext({
+  mode: "sample",
+  isSample: !0,
+  isLive: !1,
+  toggle: () => {
+  },
+  setMode: () => {
+  }
+}), l = "app-data-mode", c = ["sample", "live"];
+function f() {
+  return t.useContext(i);
+}
+function v({ initialMode: n = "sample", children: r }) {
+  const [o, s] = t.useState(n);
+  t.useEffect(() => {
+    try {
+      const e = window.localStorage.getItem(l);
+      c.includes(e) && s(e);
+    } catch {
+    }
+  }, []), t.useEffect(() => {
+    try {
+      window.localStorage.setItem(l, o);
+    } catch {
+    }
+  }, [o]);
+  const a = t.useCallback((e) => {
+    c.includes(e) && s(e);
+  }, []), d = t.useMemo(
+    () => ({
+      mode: o,
+      isSample: o === "sample",
+      isLive: o === "live",
+      toggle: () => s((e) => e === "sample" ? "live" : "sample"),
+      setMode: a
+    }),
+    [o, a]
+  );
+  return /* @__PURE__ */ m(i.Provider, { value: d, children: r });
+}
+export {
+  v as default,
+  f as useDataMode
+};
+//# sourceMappingURL=DataModeProvider.js.map

package/dist/components/library/data/DataModeProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataModeProvider.js","sources":["../../../../src/components/library/data/DataModeProvider.jsx"],"sourcesContent":["import React from \"react\";\n\nconst DataModeContext = React.createContext({\n  mode: \"sample\",\n  isSample: true,\n  isLive: false,\n  toggle: () => {},\n  setMode: () => {},\n});\n\nconst STORAGE_KEY = \"app-data-mode\";\nconst VALID_MODES = [\"sample\", \"live\"];\n\n/**\n * Read the current data mode from any component.\n *\n * @returns {{ mode: \"sample\"|\"live\", isSample: boolean, isLive: boolean, toggle: () => void, setMode: (mode) => void }}\n */\nexport function useDataMode() {\n  return React.useContext(DataModeContext);\n}\n\n/**\n * Provides global data-mode state (sample vs live) to the component tree.\n * Persists to localStorage so the choice survives page reloads.\n *\n * Wrap once in _app.js alongside AppThemeProvider.\n */\nexport default function DataModeProvider({ initialMode = \"sample\", children }) {\n  const [mode, setModeState] = React.useState(initialMode);\n\n  React.useEffect(() => {\n    try {\n      const stored = window.localStorage.getItem(STORAGE_KEY);\n      if (VALID_MODES.includes(stored)) setModeState(stored);\n    } catch {\n      // SSR or storage unavailable\n    }\n  }, []);\n\n  React.useEffect(() => {\n    try {\n      window.localStorage.setItem(STORAGE_KEY, mode);\n    } catch {\n      // ignore\n    }\n  }, [mode]);\n\n  const setMode = React.useCallback((m) => {\n    if (VALID_MODES.includes(m)) setModeState(m);\n  }, []);\n\n  const value = React.useMemo(\n    () => ({\n      mode,\n      isSample: mode === \"sample\",\n      isLive: mode === \"live\",\n      toggle: () => setModeState((m) => (m === \"sample\" ? \"live\" : \"sample\")),\n      setMode,\n    }),\n    [mode, setMode]\n  );\n\n  return (\n    <DataModeContext.Provider value={value}>{children}</DataModeContext.Provider>\n  );\n}\n"],"names":["DataModeContext","React","STORAGE_KEY","VALID_MODES","useDataMode","DataModeProvider","initialMode","children","mode","setModeState","stored","setMode","m","value","jsx"],"mappings":";;AAEA,MAAMA,IAAkBC,EAAM,cAAc;AAAA,EAC1C,MAAM;AAAA,EACN,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,QAAQ,MAAM;AAAA,EAAC;AAAA,EACf,SAAS,MAAM;AAAA,EAAC;AAClB,CAAC,GAEKC,IAAc,iBACdC,IAAc,CAAC,UAAU,MAAM;AAO9B,SAASC,IAAc;AAC5B,SAAOH,EAAM,WAAWD,CAAe;AACzC;AAQA,SAAwBK,EAAiB,EAAE,aAAAC,IAAc,UAAU,UAAAC,KAAY;AAC7E,QAAM,CAACC,GAAMC,CAAY,IAAIR,EAAM,SAASK,CAAW;AAEvD,EAAAL,EAAM,UAAU,MAAM;AACpB,QAAI;AACF,YAAMS,IAAS,OAAO,aAAa,QAAQR,CAAW;AACtD,MAAIC,EAAY,SAASO,CAAM,OAAgBA,CAAM;AAAA,IACvD,QAAQ;AAAA,IAER;AAAA,EACF,GAAG,CAAA,CAAE,GAELT,EAAM,UAAU,MAAM;AACpB,QAAI;AACF,aAAO,aAAa,QAAQC,GAAaM,CAAI;AAAA,IAC/C,QAAQ;AAAA,IAER;AAAA,EACF,GAAG,CAACA,CAAI,CAAC;AAET,QAAMG,IAAUV,EAAM,YAAY,CAACW,MAAM;AACvC,IAAIT,EAAY,SAASS,CAAC,OAAgBA,CAAC;AAAA,EAC7C,GAAG,CAAA,CAAE,GAECC,IAAQZ,EAAM;AAAA,IAClB,OAAO;AAAA,MACL,MAAAO;AAAA,MACA,UAAUA,MAAS;AAAA,MACnB,QAAQA,MAAS;AAAA,MACjB,QAAQ,MAAMC,EAAa,CAACG,MAAOA,MAAM,WAAW,SAAS,QAAS;AAAA,MACtE,SAAAD;AAAA,IAAA;AAAA,IAEF,CAACH,GAAMG,CAAO;AAAA,EAAA;AAGhB,SACE,gBAAAG,EAACd,EAAgB,UAAhB,EAAyB,OAAAa,GAAe,UAAAN,EAAA,CAAS;AAEtD;"}

package/dist/components/library/data/DataModeToggle.js

@@ -0,0 +1,28 @@
+import { jsxs as d, jsx as a } from "react/jsx-runtime";
+import "react";
+import { useDataMode as m } from "./DataModeProvider.js";
+import { BeakerIcon as l, SignalIcon as i } from "@heroicons/react/24/outline";
+function c({ className: o = "" }) {
+  const { mode: r, toggle: t } = m(), e = r === "sample";
+  return /* @__PURE__ */ d(
+    "button",
+    {
+      type: "button",
+      onClick: t,
+      className: [
+        "inline-flex items-center gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs font-semibold shadow-sm transition",
+        e ? "border-amber-200 bg-amber-50 text-amber-700 hover:bg-amber-100 dark:border-amber-800 dark:bg-amber-950/40 dark:text-amber-300 dark:hover:bg-amber-950/60" : "border-emerald-200 bg-emerald-50 text-emerald-700 hover:bg-emerald-100 dark:border-emerald-800 dark:bg-emerald-950/40 dark:text-emerald-300 dark:hover:bg-emerald-950/60",
+        o
+      ].filter(Boolean).join(" "),
+      "aria-label": `Data mode: ${r}. Click to switch to ${e ? "live" : "sample"}.`,
+      children: [
+        e ? /* @__PURE__ */ a(l, { className: "h-3.5 w-3.5", "aria-hidden": "true" }) : /* @__PURE__ */ a(i, { className: "h-3.5 w-3.5", "aria-hidden": "true" }),
+        e ? "Sample" : "Live"
+      ]
+    }
+  );
+}
+export {
+  c as default
+};
+//# sourceMappingURL=DataModeToggle.js.map

package/dist/components/library/data/DataModeToggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataModeToggle.js","sources":["../../../../src/components/library/data/DataModeToggle.jsx"],"sourcesContent":["import React from \"react\";\nimport { useDataMode } from \"./DataModeProvider\";\nimport { BeakerIcon, SignalIcon } from \"@heroicons/react/24/outline\";\n\n/**\n * Pill toggle for switching between sample and live data modes.\n * Place in the AppShell header next to the theme toggle.\n */\nexport default function DataModeToggle({ className = \"\" }) {\n  const { mode, toggle } = useDataMode();\n  const isSample = mode === \"sample\";\n\n  return (\n    <button\n      type=\"button\"\n      onClick={toggle}\n      className={[\n        \"inline-flex items-center gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs font-semibold shadow-sm transition\",\n        isSample\n          ? \"border-amber-200 bg-amber-50 text-amber-700 hover:bg-amber-100 dark:border-amber-800 dark:bg-amber-950/40 dark:text-amber-300 dark:hover:bg-amber-950/60\"\n          : \"border-emerald-200 bg-emerald-50 text-emerald-700 hover:bg-emerald-100 dark:border-emerald-800 dark:bg-emerald-950/40 dark:text-emerald-300 dark:hover:bg-emerald-950/60\",\n        className,\n      ]\n        .filter(Boolean)\n        .join(\" \")}\n      aria-label={`Data mode: ${mode}. Click to switch to ${isSample ? \"live\" : \"sample\"}.`}\n    >\n      {isSample ? (\n        <BeakerIcon className=\"h-3.5 w-3.5\" aria-hidden=\"true\" />\n      ) : (\n        <SignalIcon className=\"h-3.5 w-3.5\" aria-hidden=\"true\" />\n      )}\n      {isSample ? \"Sample\" : \"Live\"}\n    </button>\n  );\n}\n"],"names":["DataModeToggle","className","mode","toggle","useDataMode","isSample","jsxs","jsx","BeakerIcon","SignalIcon"],"mappings":";;;;AAQA,SAAwBA,EAAe,EAAE,WAAAC,IAAY,MAAM;AACzD,QAAM,EAAE,MAAAC,GAAM,QAAAC,EAAA,IAAWC,EAAA,GACnBC,IAAWH,MAAS;AAE1B,SACE,gBAAAI;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,SAASH;AAAA,MACT,WAAW;AAAA,QACT;AAAA,QACAE,IACI,6JACA;AAAA,QACJJ;AAAA,MAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MACX,cAAY,cAAcC,CAAI,wBAAwBG,IAAW,SAAS,QAAQ;AAAA,MAEjF,UAAA;AAAA,QAAAA,IACC,gBAAAE,EAACC,GAAA,EAAW,WAAU,eAAc,eAAY,OAAA,CAAO,IAEvD,gBAAAD,EAACE,GAAA,EAAW,WAAU,eAAc,eAAY,QAAO;AAAA,QAExDJ,IAAW,WAAW;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG7B;"}

package/dist/components/library/data/filterUtils.js

@@ -0,0 +1,71 @@
+function u(n, i, t = []) {
+  if (!i || !i.trim()) return n;
+  const e = i.trim().toLowerCase();
+  return n.filter(
+    (r) => t.some((o) => {
+      const l = r?.[o];
+      return l != null && String(l).toLowerCase().includes(e);
+    })
+  );
+}
+function f(n, i, t) {
+  return t == null || t === "" || t === "all" ? n : n.filter((e) => {
+    const r = e?.[i];
+    return typeof r == "string" && typeof t == "string" ? r.toLowerCase() === t.toLowerCase() : r === t;
+  });
+}
+function c(n, i, t, e) {
+  return t ? n.filter((r) => {
+    const o = r?.[i];
+    return e !== void 0 ? o === e : !!o;
+  }) : n;
+}
+function a(n, i, t) {
+  if (!t) return n;
+  const e = t.start ? new Date(t.start) : null, r = t.end ? new Date(t.end) : null;
+  return !e && !r ? n : n.filter((o) => {
+    const l = o?.[i];
+    if (l == null) return !1;
+    const s = l instanceof Date ? l : new Date(l);
+    return !(Number.isNaN(s.getTime()) || e && s < e || r && s > r);
+  });
+}
+function y(n, i, t = "asc") {
+  if (!i) return n;
+  const e = t === "desc" ? -1 : 1;
+  return [...n].sort((r, o) => {
+    const l = r?.[i], s = o?.[i];
+    return l == null && s == null ? 0 : l == null ? -1 * e : s == null ? 1 * e : typeof l == "number" && typeof s == "number" ? (l - s) * e : String(l).localeCompare(String(s)) * e;
+  });
+}
+function p(n, i = [], t = {}) {
+  let e = n;
+  for (const r of i) {
+    const o = t[r.id];
+    if (o != null)
+      switch (r.type) {
+        case "search":
+          e = u(e, o, r.keys ?? []);
+          break;
+        case "select":
+          e = f(e, r.key, o);
+          break;
+        case "toggle":
+          e = c(e, r.key, o, r.matchValue);
+          break;
+        case "dateRange":
+          e = a(e, r.key, o);
+          break;
+      }
+  }
+  return e;
+}
+export {
+  p as applyFilters,
+  a as filterByDateRange,
+  u as filterBySearch,
+  c as filterByToggle,
+  f as filterByValue,
+  y as sortByKey
+};
+//# sourceMappingURL=filterUtils.js.map

package/dist/components/library/data/filterUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filterUtils.js","sources":["../../../../src/components/library/data/filterUtils.jsx"],"sourcesContent":["/**\n * Pure data utilities for filtering, sorting, and searching.\n * Stateless — combine with usePageFilters hook for state management.\n */\n\n/**\n * Text search across multiple keys.\n * @param {Array} data\n * @param {string} query — search string\n * @param {string[]} keys — object keys to search within\n * @returns {Array} filtered data\n */\nexport function filterBySearch(data, query, keys = []) {\n  if (!query || !query.trim()) return data;\n  const q = query.trim().toLowerCase();\n  return data.filter((row) =>\n    keys.some((key) => {\n      const val = row?.[key];\n      return val != null && String(val).toLowerCase().includes(q);\n    })\n  );\n}\n\n/**\n * Filter rows where key matches a specific value.\n * Pass \"all\" or \"\" to skip filtering.\n * @param {Array} data\n * @param {string} key — object key to match\n * @param {*} value — value to match (exact, case-insensitive for strings)\n * @returns {Array}\n */\nexport function filterByValue(data, key, value) {\n  if (value == null || value === \"\" || value === \"all\") return data;\n  return data.filter((row) => {\n    const v = row?.[key];\n    if (typeof v === \"string\" && typeof value === \"string\") {\n      return v.toLowerCase() === value.toLowerCase();\n    }\n    return v === value;\n  });\n}\n\n/**\n * Filter rows where a boolean condition is met.\n * When toggle is off, returns all data (no filtering).\n * @param {Array} data\n * @param {string} key — object key to check\n * @param {boolean} isActive — whether the toggle is on\n * @param {*} matchValue — value that key should equal when active (default: truthy check)\n * @returns {Array}\n */\nexport function filterByToggle(data, key, isActive, matchValue) {\n  if (!isActive) return data;\n  return data.filter((row) => {\n    const v = row?.[key];\n    if (matchValue !== undefined) return v === matchValue;\n    return Boolean(v);\n  });\n}\n\n/**\n * Filter rows where a date field falls within a range.\n * @param {Array} data\n * @param {string} key — object key containing date (ISO string or Date)\n * @param {{ start?: Date|string, end?: Date|string }} range\n * @returns {Array}\n */\nexport function filterByDateRange(data, key, range) {\n  if (!range) return data;\n  const start = range.start ? new Date(range.start) : null;\n  const end = range.end ? new Date(range.end) : null;\n  if (!start && !end) return data;\n\n  return data.filter((row) => {\n    const raw = row?.[key];\n    if (raw == null) return false;\n    const d = raw instanceof Date ? raw : new Date(raw);\n    if (Number.isNaN(d.getTime())) return false;\n    if (start && d < start) return false;\n    if (end && d > end) return false;\n    return true;\n  });\n}\n\n/**\n * Sort data by a key.\n * @param {Array} data\n * @param {string} key — object key to sort by\n * @param {\"asc\"|\"desc\"} direction\n * @returns {Array} new sorted array\n */\nexport function sortByKey(data, key, direction = \"asc\") {\n  if (!key) return data;\n  const dir = direction === \"desc\" ? -1 : 1;\n  return [...data].sort((a, b) => {\n    const av = a?.[key];\n    const bv = b?.[key];\n    if (av == null && bv == null) return 0;\n    if (av == null) return -1 * dir;\n    if (bv == null) return 1 * dir;\n    if (typeof av === \"number\" && typeof bv === \"number\") return (av - bv) * dir;\n    return String(av).localeCompare(String(bv)) * dir;\n  });\n}\n\n/**\n * Apply a set of filter definitions to data.\n * Each filter in `filters` has { id, type, key/keys } and `values` holds the current state.\n *\n * @param {Array} data\n * @param {Array} filters — filter definitions [{ id, type, key?, keys? }]\n * @param {Object} values — current filter values keyed by filter id\n * @returns {Array} filtered data\n */\nexport function applyFilters(data, filters = [], values = {}) {\n  let result = data;\n\n  for (const filter of filters) {\n    const val = values[filter.id];\n    if (val === undefined || val === null) continue;\n\n    switch (filter.type) {\n      case \"search\":\n        result = filterBySearch(result, val, filter.keys ?? []);\n        break;\n      case \"select\":\n        result = filterByValue(result, filter.key, val);\n        break;\n      case \"toggle\":\n        result = filterByToggle(result, filter.key, val, filter.matchValue);\n        break;\n      case \"dateRange\":\n        result = filterByDateRange(result, filter.key, val);\n        break;\n      default:\n        break;\n    }\n  }\n\n  return result;\n}\n"],"names":["filterBySearch","data","query","keys","q","row","key","val","filterByValue","value","v","filterByToggle","isActive","matchValue","filterByDateRange","range","start","end","raw","d","sortByKey","direction","dir","a","b","av","bv","applyFilters","filters","values","result","filter"],"mappings":"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"}

package/dist/components/library/data/useDataSource.js

@@ -0,0 +1,13 @@
+import { useMemo as u } from "react";
+import { useDataMode as n } from "./DataModeProvider.js";
+function c({ sample: t, live: e }) {
+  const { mode: r } = n();
+  return u(() => {
+    const o = r === "sample" ? t : e;
+    return typeof o == "function" ? o() : o;
+  }, [r, t, e]);
+}
+export {
+  c as default
+};
+//# sourceMappingURL=useDataSource.js.map

package/dist/components/library/data/useDataSource.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDataSource.js","sources":["../../../../src/components/library/data/useDataSource.jsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { useDataMode } from \"./DataModeProvider\";\n\n/**\n * Select between sample and live data based on the global data mode.\n *\n * Values can be plain data or functions (lazy-evaluated only when active).\n *\n * @param {{ sample: any | () => any, live: any | () => any }} sources\n * @returns {any} the resolved value for the active mode\n *\n * @example\n * // Static data\n * const incidents = useDataSource({\n *   sample: sampleIncidents,\n *   live: fetchedIncidents,\n * });\n *\n * @example\n * // Lazy — factory only runs when that mode is active\n * const metrics = useDataSource({\n *   sample: () => generateSampleMetrics(),\n *   live: () => computeFromAPI(apiData),\n * });\n */\nexport default function useDataSource({ sample, live }) {\n  const { mode } = useDataMode();\n\n  return useMemo(() => {\n    const source = mode === \"sample\" ? sample : live;\n    return typeof source === \"function\" ? source() : source;\n  }, [mode, sample, live]);\n}\n"],"names":["useDataSource","sample","live","mode","useDataMode","useMemo","source"],"mappings":";;AAyBA,SAAwBA,EAAc,EAAE,QAAAC,GAAQ,MAAAC,KAAQ;AACtD,QAAM,EAAE,MAAAC,EAAA,IAASC,EAAA;AAEjB,SAAOC,EAAQ,MAAM;AACnB,UAAMC,IAASH,MAAS,WAAWF,IAASC;AAC5C,WAAO,OAAOI,KAAW,aAAaA,EAAA,IAAWA;AAAA,EACnD,GAAG,CAACH,GAAMF,GAAQC,CAAI,CAAC;AACzB;"}

package/dist/components/library/data/usePageFilters.js

@@ -0,0 +1,46 @@
+import { useMemo as r, useState as p, useCallback as a } from "react";
+import { applyFilters as h, sortByKey as C } from "./filterUtils.js";
+function b({ data: u = [], filters: o = [], defaultSort: y = null } = {}) {
+  const c = r(() => {
+    const t = {};
+    for (const e of o)
+      e.defaultValue !== void 0 ? t[e.id] = e.defaultValue : e.type === "search" ? t[e.id] = "" : e.type === "select" ? t[e.id] = "all" : e.type === "toggle" ? t[e.id] = !1 : e.type === "dateRange" && (t[e.id] = null);
+    return t;
+  }, [o]), [l, f] = p(c), [i, d] = p(y), g = a((t, e) => {
+    f((s) => ({ ...s, [t]: e }));
+  }, []), m = a(() => {
+    f(c);
+  }, [c]), F = a((t, e) => {
+    d(t ? { key: t, direction: e ?? "asc" } : null);
+  }, []), S = a((t) => {
+    d((e) => e?.key !== t ? { key: t, direction: "asc" } : e.direction === "asc" ? { key: t, direction: "desc" } : null);
+  }, []), n = r(
+    () => h(u, o, l),
+    [u, o, l]
+  ), v = r(
+    () => i ? C(n, i.key, i.direction) : n,
+    [n, i]
+  ), V = r(() => {
+    let t = 0;
+    for (const e of o) {
+      const s = l[e.id];
+      (e.type === "search" && s && s.trim() || e.type === "select" && s && s !== "all" || e.type === "toggle" && s || e.type === "dateRange" && s) && t++;
+    }
+    return t;
+  }, [o, l]);
+  return {
+    values: l,
+    setFilter: g,
+    resetFilters: m,
+    sort: i,
+    setSort: F,
+    toggleSort: S,
+    filteredData: n,
+    sortedData: v,
+    activeFilterCount: V
+  };
+}
+export {
+  b as default
+};
+//# sourceMappingURL=usePageFilters.js.map

package/dist/components/library/data/usePageFilters.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePageFilters.js","sources":["../../../../src/components/library/data/usePageFilters.jsx"],"sourcesContent":["import { useState, useMemo, useCallback } from \"react\";\nimport { applyFilters, sortByKey } from \"./filterUtils\";\n\n/**\n * Hook for managing page-level filter and sort state.\n *\n * @param {Object} options\n * @param {Array}  options.data — raw data array\n * @param {Array}  options.filters — filter definitions [{ id, type, key?, keys?, defaultValue? }]\n * @param {Object} options.defaultSort — { key, direction } or null\n * @returns {Object} { values, setFilter, resetFilters, sort, setSort, filteredData, sortedData, activeFilterCount }\n *\n * @example\n * const { values, setFilter, resetFilters, sortedData } = usePageFilters({\n *   data: incidents,\n *   filters: [\n *     { id: \"search\", type: \"search\", keys: [\"title\", \"description\"] },\n *     { id: \"severity\", type: \"select\", key: \"severity\", defaultValue: \"all\" },\n *     { id: \"active\", type: \"toggle\", key: \"resolved\", matchValue: false },\n *   ],\n *   defaultSort: { key: \"timestamp\", direction: \"desc\" },\n * });\n */\nexport default function usePageFilters({ data = [], filters = [], defaultSort = null } = {}) {\n  const initialValues = useMemo(() => {\n    const v = {};\n    for (const f of filters) {\n      if (f.defaultValue !== undefined) {\n        v[f.id] = f.defaultValue;\n      } else if (f.type === \"search\") {\n        v[f.id] = \"\";\n      } else if (f.type === \"select\") {\n        v[f.id] = \"all\";\n      } else if (f.type === \"toggle\") {\n        v[f.id] = false;\n      } else if (f.type === \"dateRange\") {\n        v[f.id] = null;\n      }\n    }\n    return v;\n  }, [filters]);\n\n  const [values, setValues] = useState(initialValues);\n  const [sort, setSortState] = useState(defaultSort);\n\n  const setFilter = useCallback((id, value) => {\n    setValues((prev) => ({ ...prev, [id]: value }));\n  }, []);\n\n  const resetFilters = useCallback(() => {\n    setValues(initialValues);\n  }, [initialValues]);\n\n  const setSort = useCallback((key, direction) => {\n    setSortState(key ? { key, direction: direction ?? \"asc\" } : null);\n  }, []);\n\n  const toggleSort = useCallback((key) => {\n    setSortState((prev) => {\n      if (prev?.key !== key) return { key, direction: \"asc\" };\n      if (prev.direction === \"asc\") return { key, direction: \"desc\" };\n      return null;\n    });\n  }, []);\n\n  const filteredData = useMemo(\n    () => applyFilters(data, filters, values),\n    [data, filters, values]\n  );\n\n  const sortedData = useMemo(\n    () => (sort ? sortByKey(filteredData, sort.key, sort.direction) : filteredData),\n    [filteredData, sort]\n  );\n\n  const activeFilterCount = useMemo(() => {\n    let count = 0;\n    for (const f of filters) {\n      const v = values[f.id];\n      if (f.type === \"search\" && v && v.trim()) count++;\n      else if (f.type === \"select\" && v && v !== \"all\") count++;\n      else if (f.type === \"toggle\" && v) count++;\n      else if (f.type === \"dateRange\" && v) count++;\n    }\n    return count;\n  }, [filters, values]);\n\n  return {\n    values,\n    setFilter,\n    resetFilters,\n    sort,\n    setSort,\n    toggleSort,\n    filteredData,\n    sortedData,\n    activeFilterCount,\n  };\n}\n"],"names":["usePageFilters","data","filters","defaultSort","initialValues","useMemo","v","f","values","setValues","useState","sort","setSortState","setFilter","useCallback","id","value","prev","resetFilters","setSort","key","direction","toggleSort","filteredData","applyFilters","sortedData","sortByKey","activeFilterCount","count"],"mappings":";;AAuBA,SAAwBA,EAAe,EAAE,MAAAC,IAAO,IAAI,SAAAC,IAAU,CAAA,GAAI,aAAAC,IAAc,KAAA,IAAS,IAAI;AAC3F,QAAMC,IAAgBC,EAAQ,MAAM;AAClC,UAAMC,IAAI,CAAA;AACV,eAAWC,KAAKL;AACd,MAAIK,EAAE,iBAAiB,SACrBD,EAAEC,EAAE,EAAE,IAAIA,EAAE,eACHA,EAAE,SAAS,WACpBD,EAAEC,EAAE,EAAE,IAAI,KACDA,EAAE,SAAS,WACpBD,EAAEC,EAAE,EAAE,IAAI,QACDA,EAAE,SAAS,WACpBD,EAAEC,EAAE,EAAE,IAAI,KACDA,EAAE,SAAS,gBACpBD,EAAEC,EAAE,EAAE,IAAI;AAGd,WAAOD;AAAA,EACT,GAAG,CAACJ,CAAO,CAAC,GAEN,CAACM,GAAQC,CAAS,IAAIC,EAASN,CAAa,GAC5C,CAACO,GAAMC,CAAY,IAAIF,EAASP,CAAW,GAE3CU,IAAYC,EAAY,CAACC,GAAIC,MAAU;AAC3C,IAAAP,EAAU,CAACQ,OAAU,EAAE,GAAGA,GAAM,CAACF,CAAE,GAAGC,EAAA,EAAQ;AAAA,EAChD,GAAG,CAAA,CAAE,GAECE,IAAeJ,EAAY,MAAM;AACrC,IAAAL,EAAUL,CAAa;AAAA,EACzB,GAAG,CAACA,CAAa,CAAC,GAEZe,IAAUL,EAAY,CAACM,GAAKC,MAAc;AAC9C,IAAAT,EAAaQ,IAAM,EAAE,KAAAA,GAAK,WAAWC,KAAa,MAAA,IAAU,IAAI;AAAA,EAClE,GAAG,CAAA,CAAE,GAECC,IAAaR,EAAY,CAACM,MAAQ;AACtC,IAAAR,EAAa,CAACK,MACRA,GAAM,QAAQG,IAAY,EAAE,KAAAA,GAAK,WAAW,MAAA,IAC5CH,EAAK,cAAc,QAAc,EAAE,KAAAG,GAAK,WAAW,OAAA,IAChD,IACR;AAAA,EACH,GAAG,CAAA,CAAE,GAECG,IAAelB;AAAA,IACnB,MAAMmB,EAAavB,GAAMC,GAASM,CAAM;AAAA,IACxC,CAACP,GAAMC,GAASM,CAAM;AAAA,EAAA,GAGlBiB,IAAapB;AAAA,IACjB,MAAOM,IAAOe,EAAUH,GAAcZ,EAAK,KAAKA,EAAK,SAAS,IAAIY;AAAA,IAClE,CAACA,GAAcZ,CAAI;AAAA,EAAA,GAGfgB,IAAoBtB,EAAQ,MAAM;AACtC,QAAIuB,IAAQ;AACZ,eAAWrB,KAAKL,GAAS;AACvB,YAAMI,IAAIE,EAAOD,EAAE,EAAE;AACrB,OAAIA,EAAE,SAAS,YAAYD,KAAKA,EAAE,UACzBC,EAAE,SAAS,YAAYD,KAAKA,MAAM,SAClCC,EAAE,SAAS,YAAYD,KACvBC,EAAE,SAAS,eAAeD,MAAGsB;AAAA,IACxC;AACA,WAAOA;AAAA,EACT,GAAG,CAAC1B,GAASM,CAAM,CAAC;AAEpB,SAAO;AAAA,IACL,QAAAA;AAAA,IACA,WAAAK;AAAA,IACA,cAAAK;AAAA,IACA,MAAAP;AAAA,IACA,SAAAQ;AAAA,IACA,YAAAG;AAAA,IACA,cAAAC;AAAA,IACA,YAAAE;AAAA,IACA,mBAAAE;AAAA,EAAA;AAEJ;"}

package/dist/components/library/filters/FilterBar.js

@@ -0,0 +1,89 @@
+import { jsxs as m, jsx as a } from "react/jsx-runtime";
+import "react";
+import p from "./SearchFilter.js";
+import u from "./SelectFilter.js";
+import h from "./ToggleFilter.js";
+import { XMarkIcon as x } from "@heroicons/react/24/outline";
+function f({
+  filters: o = [],
+  values: d = {},
+  onChange: s,
+  onReset: c,
+  activeCount: t = 0,
+  layout: i = "inline"
+}) {
+  if (!o.length) return null;
+  const n = i === "stacked";
+  return /* @__PURE__ */ m(
+    "div",
+    {
+      className: [
+        "flex gap-3",
+        n ? "flex-col" : "flex-col sm:flex-row sm:flex-wrap sm:items-center"
+      ].join(" "),
+      children: [
+        o.map((e) => {
+          const r = d[e.id];
+          switch (e.type) {
+            case "search":
+              return /* @__PURE__ */ a(
+                p,
+                {
+                  value: r ?? "",
+                  onChange: (l) => s?.(e.id, l),
+                  placeholder: e.placeholder ?? "Search…",
+                  className: e.className ?? (n ? "w-full" : "w-full sm:w-64")
+                },
+                e.id
+              );
+            case "select":
+              return /* @__PURE__ */ a(
+                u,
+                {
+                  value: r ?? "all",
+                  onChange: (l) => s?.(e.id, l),
+                  options: e.options ?? [],
+                  label: e.label,
+                  placeholder: e.placeholder ?? "All",
+                  className: e.className
+                },
+                e.id
+              );
+            case "toggle":
+              return /* @__PURE__ */ a(
+                h,
+                {
+                  value: r ?? !1,
+                  onChange: (l) => s?.(e.id, l),
+                  label: e.label,
+                  className: e.className
+                },
+                e.id
+              );
+            default:
+              return null;
+          }
+        }),
+        t > 0 && c ? /* @__PURE__ */ m(
+          "button",
+          {
+            type: "button",
+            onClick: c,
+            className: "inline-flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-xs font-medium text-slate-500 transition hover:bg-slate-100 hover:text-slate-700 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-slate-200",
+            children: [
+              /* @__PURE__ */ a(x, { className: "h-3.5 w-3.5", "aria-hidden": "true" }),
+              "Clear ",
+              t,
+              " ",
+              t === 1 ? "filter" : "filters"
+            ]
+          }
+        ) : null
+      ]
+    }
+  );
+}
+export {
+  f as default
+};
+//# sourceMappingURL=FilterBar.js.map

package/dist/components/library/filters/FilterBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterBar.js","sources":["../../../../src/components/library/filters/FilterBar.jsx"],"sourcesContent":["import React from \"react\";\nimport SearchFilter from \"./SearchFilter\";\nimport SelectFilter from \"./SelectFilter\";\nimport ToggleFilter from \"./ToggleFilter\";\nimport { FunnelIcon, XMarkIcon } from \"@heroicons/react/24/outline\";\n\n/**\n * Renders a row of filter controls from a definitions array.\n * Pairs with usePageFilters hook for state management.\n *\n * @param {Array}    filters — filter definitions [{ id, type, ... }]\n * @param {Object}   values  — current filter values keyed by filter id\n * @param {Function} onChange — (filterId, value) => void\n * @param {Function} onReset  — () => void\n * @param {number}   activeCount — number of active filters (for badge)\n * @param {string}   layout — \"inline\" (default) or \"stacked\"\n */\nexport default function FilterBar({\n  filters = [],\n  values = {},\n  onChange,\n  onReset,\n  activeCount = 0,\n  layout = \"inline\",\n}) {\n  if (!filters.length) return null;\n\n  const isStacked = layout === \"stacked\";\n\n  return (\n    <div\n      className={[\n        \"flex gap-3\",\n        isStacked\n          ? \"flex-col\"\n          : \"flex-col sm:flex-row sm:flex-wrap sm:items-center\",\n      ].join(\" \")}\n    >\n      {filters.map((filter) => {\n        const val = values[filter.id];\n\n        switch (filter.type) {\n          case \"search\":\n            return (\n              <SearchFilter\n                key={filter.id}\n                value={val ?? \"\"}\n                onChange={(v) => onChange?.(filter.id, v)}\n                placeholder={filter.placeholder ?? \"Search…\"}\n                className={filter.className ?? (isStacked ? \"w-full\" : \"w-full sm:w-64\")}\n              />\n            );\n\n          case \"select\":\n            return (\n              <SelectFilter\n                key={filter.id}\n                value={val ?? \"all\"}\n                onChange={(v) => onChange?.(filter.id, v)}\n                options={filter.options ?? []}\n                label={filter.label}\n                placeholder={filter.placeholder ?? \"All\"}\n                className={filter.className}\n              />\n            );\n\n          case \"toggle\":\n            return (\n              <ToggleFilter\n                key={filter.id}\n                value={val ?? false}\n                onChange={(v) => onChange?.(filter.id, v)}\n                label={filter.label}\n                className={filter.className}\n              />\n            );\n\n          default:\n            return null;\n        }\n      })}\n\n      {activeCount > 0 && onReset ? (\n        <button\n          type=\"button\"\n          onClick={onReset}\n          className=\"inline-flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-xs font-medium text-slate-500 transition hover:bg-slate-100 hover:text-slate-700 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-slate-200\"\n        >\n          <XMarkIcon className=\"h-3.5 w-3.5\" aria-hidden=\"true\" />\n          Clear {activeCount} {activeCount === 1 ? \"filter\" : \"filters\"}\n        </button>\n      ) : null}\n    </div>\n  );\n}\n"],"names":["FilterBar","filters","values","onChange","onReset","activeCount","layout","isStacked","jsxs","filter","val","jsx","SearchFilter","v","SelectFilter","ToggleFilter","XMarkIcon"],"mappings":";;;;;;AAiBA,SAAwBA,EAAU;AAAA,EAChC,SAAAC,IAAU,CAAA;AAAA,EACV,QAAAC,IAAS,CAAA;AAAA,EACT,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,QAAAC,IAAS;AACX,GAAG;AACD,MAAI,CAACL,EAAQ,OAAQ,QAAO;AAE5B,QAAMM,IAAYD,MAAW;AAE7B,SACE,gBAAAE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACAD,IACI,aACA;AAAA,MAAA,EACJ,KAAK,GAAG;AAAA,MAET,UAAA;AAAA,QAAAN,EAAQ,IAAI,CAACQ,MAAW;AACvB,gBAAMC,IAAMR,EAAOO,EAAO,EAAE;AAE5B,kBAAQA,EAAO,MAAA;AAAA,YACb,KAAK;AACH,qBACE,gBAAAE;AAAA,gBAACC;AAAA,gBAAA;AAAA,kBAEC,OAAOF,KAAO;AAAA,kBACd,UAAU,CAACG,MAAMV,IAAWM,EAAO,IAAII,CAAC;AAAA,kBACxC,aAAaJ,EAAO,eAAe;AAAA,kBACnC,WAAWA,EAAO,cAAcF,IAAY,WAAW;AAAA,gBAAA;AAAA,gBAJlDE,EAAO;AAAA,cAAA;AAAA,YAQlB,KAAK;AACH,qBACE,gBAAAE;AAAA,gBAACG;AAAA,gBAAA;AAAA,kBAEC,OAAOJ,KAAO;AAAA,kBACd,UAAU,CAACG,MAAMV,IAAWM,EAAO,IAAII,CAAC;AAAA,kBACxC,SAASJ,EAAO,WAAW,CAAA;AAAA,kBAC3B,OAAOA,EAAO;AAAA,kBACd,aAAaA,EAAO,eAAe;AAAA,kBACnC,WAAWA,EAAO;AAAA,gBAAA;AAAA,gBANbA,EAAO;AAAA,cAAA;AAAA,YAUlB,KAAK;AACH,qBACE,gBAAAE;AAAA,gBAACI;AAAA,gBAAA;AAAA,kBAEC,OAAOL,KAAO;AAAA,kBACd,UAAU,CAACG,MAAMV,IAAWM,EAAO,IAAII,CAAC;AAAA,kBACxC,OAAOJ,EAAO;AAAA,kBACd,WAAWA,EAAO;AAAA,gBAAA;AAAA,gBAJbA,EAAO;AAAA,cAAA;AAAA,YAQlB;AACE,qBAAO;AAAA,UAAA;AAAA,QAEb,CAAC;AAAA,QAEAJ,IAAc,KAAKD,IAClB,gBAAAI;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,SAASJ;AAAA,YACT,WAAU;AAAA,YAEV,UAAA;AAAA,cAAA,gBAAAO,EAACK,GAAA,EAAU,WAAU,eAAc,eAAY,QAAO;AAAA,cAAE;AAAA,cACjDX;AAAA,cAAY;AAAA,cAAEA,MAAgB,IAAI,WAAW;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA,IAEpD;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGV;"}

package/dist/components/library/filters/SearchFilter.js

@@ -0,0 +1,44 @@
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import "react";
+import { MagnifyingGlassIcon as n, XMarkIcon as i } from "@heroicons/react/24/outline";
+function f({
+  value: t = "",
+  onChange: a,
+  placeholder: r = "Search…",
+  className: l = ""
+}) {
+  return /* @__PURE__ */ o("div", { className: ["relative", l].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ e(
+      n,
+      {
+        className: "pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400 dark:text-slate-500",
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ e(
+      "input",
+      {
+        type: "text",
+        value: t,
+        onChange: (s) => a?.(s.target.value),
+        placeholder: r,
+        className: "h-9 w-full rounded-lg border border-slate-200 bg-white pl-9 pr-8 text-sm text-slate-900 shadow-sm placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 dark:border-slate-800 dark:bg-slate-900 dark:text-slate-50 dark:placeholder:text-slate-500 dark:focus:ring-offset-slate-950",
+        "aria-label": r
+      }
+    ),
+    t ? /* @__PURE__ */ e(
+      "button",
+      {
+        type: "button",
+        onClick: () => a?.(""),
+        className: "absolute right-2 top-1/2 -translate-y-1/2 rounded p-0.5 text-slate-400 hover:text-slate-600 dark:text-slate-500 dark:hover:text-slate-300",
+        "aria-label": "Clear search",
+        children: /* @__PURE__ */ e(i, { className: "h-4 w-4" })
+      }
+    ) : null
+  ] });
+}
+export {
+  f as default
+};
+//# sourceMappingURL=SearchFilter.js.map

package/dist/components/library/filters/SearchFilter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchFilter.js","sources":["../../../../src/components/library/filters/SearchFilter.jsx"],"sourcesContent":["import React from \"react\";\nimport { MagnifyingGlassIcon, XMarkIcon } from \"@heroicons/react/24/outline\";\n\nexport default function SearchFilter({\n  value = \"\",\n  onChange,\n  placeholder = \"Search…\",\n  className = \"\",\n}) {\n  return (\n    <div className={[\"relative\", className].filter(Boolean).join(\" \")}>\n      <MagnifyingGlassIcon\n        className=\"pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400 dark:text-slate-500\"\n        aria-hidden=\"true\"\n      />\n      <input\n        type=\"text\"\n        value={value}\n        onChange={(e) => onChange?.(e.target.value)}\n        placeholder={placeholder}\n        className=\"h-9 w-full rounded-lg border border-slate-200 bg-white pl-9 pr-8 text-sm text-slate-900 shadow-sm placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 dark:border-slate-800 dark:bg-slate-900 dark:text-slate-50 dark:placeholder:text-slate-500 dark:focus:ring-offset-slate-950\"\n        aria-label={placeholder}\n      />\n      {value ? (\n        <button\n          type=\"button\"\n          onClick={() => onChange?.(\"\")}\n          className=\"absolute right-2 top-1/2 -translate-y-1/2 rounded p-0.5 text-slate-400 hover:text-slate-600 dark:text-slate-500 dark:hover:text-slate-300\"\n          aria-label=\"Clear search\"\n        >\n          <XMarkIcon className=\"h-4 w-4\" />\n        </button>\n      ) : null}\n    </div>\n  );\n}\n"],"names":["SearchFilter","value","onChange","placeholder","className","jsxs","jsx","MagnifyingGlassIcon","e","XMarkIcon"],"mappings":";;;AAGA,SAAwBA,EAAa;AAAA,EACnC,OAAAC,IAAQ;AAAA,EACR,UAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,WAAAC,IAAY;AACd,GAAG;AACD,SACE,gBAAAC,EAAC,OAAA,EAAI,WAAW,CAAC,YAAYD,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAC9D,UAAA;AAAA,IAAA,gBAAAE;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,eAAY;AAAA,MAAA;AAAA,IAAA;AAAA,IAEd,gBAAAD;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAAL;AAAA,QACA,UAAU,CAACO,MAAMN,IAAWM,EAAE,OAAO,KAAK;AAAA,QAC1C,aAAAL;AAAA,QACA,WAAU;AAAA,QACV,cAAYA;AAAA,MAAA;AAAA,IAAA;AAAA,IAEbF,IACC,gBAAAK;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS,MAAMJ,IAAW,EAAE;AAAA,QAC5B,WAAU;AAAA,QACV,cAAW;AAAA,QAEX,UAAA,gBAAAI,EAACG,GAAA,EAAU,WAAU,UAAA,CAAU;AAAA,MAAA;AAAA,IAAA,IAE/B;AAAA,EAAA,GACN;AAEJ;"}

package/dist/components/library/filters/SelectFilter.js

@@ -0,0 +1,44 @@
+import { jsxs as n, jsx as t } from "react/jsx-runtime";
+import "react";
+import { ChevronDownIcon as u } from "@heroicons/react/24/outline";
+function h({
+  value: r = "all",
+  onChange: s,
+  options: i = [],
+  label: a,
+  placeholder: l,
+  className: o = ""
+}) {
+  const d = i.map(
+    (e) => typeof e == "string" ? { value: e, label: e } : e
+  );
+  return /* @__PURE__ */ n("div", { className: ["relative inline-flex items-center gap-2", o].filter(Boolean).join(" "), children: [
+    a ? /* @__PURE__ */ t("span", { className: "shrink-0 text-xs font-medium text-slate-500 dark:text-slate-400", children: a }) : null,
+    /* @__PURE__ */ n("div", { className: "relative", children: [
+      /* @__PURE__ */ n(
+        "select",
+        {
+          value: r,
+          onChange: (e) => s?.(e.target.value),
+          className: "h-9 appearance-none rounded-lg border border-slate-200 bg-white py-0 pl-3 pr-8 text-sm font-medium text-slate-700 shadow-sm focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 dark:border-slate-800 dark:bg-slate-900 dark:text-slate-200 dark:focus:ring-offset-slate-950",
+          "aria-label": a ?? l ?? "Filter",
+          children: [
+            l ? /* @__PURE__ */ t("option", { value: "all", children: l }) : null,
+            d.map((e) => /* @__PURE__ */ t("option", { value: e.value, children: e.label }, e.value))
+          ]
+        }
+      ),
+      /* @__PURE__ */ t(
+        u,
+        {
+          className: "pointer-events-none absolute right-2 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400 dark:text-slate-500",
+          "aria-hidden": "true"
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  h as default
+};
+//# sourceMappingURL=SelectFilter.js.map

package/dist/components/library/filters/SelectFilter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectFilter.js","sources":["../../../../src/components/library/filters/SelectFilter.jsx"],"sourcesContent":["import React from \"react\";\nimport { ChevronDownIcon } from \"@heroicons/react/24/outline\";\n\n/**\n * Dropdown select filter.\n *\n * @param {string} value — current selected value\n * @param {Function} onChange — (value) => void\n * @param {Array} options — [{ value, label }] or [\"string\", ...]\n * @param {string} label — visible label\n * @param {string} placeholder — placeholder when no value selected\n */\nexport default function SelectFilter({\n  value = \"all\",\n  onChange,\n  options = [],\n  label,\n  placeholder,\n  className = \"\",\n}) {\n  const normalizedOptions = options.map((opt) =>\n    typeof opt === \"string\" ? { value: opt, label: opt } : opt\n  );\n\n  return (\n    <div className={[\"relative inline-flex items-center gap-2\", className].filter(Boolean).join(\" \")}>\n      {label ? (\n        <span className=\"shrink-0 text-xs font-medium text-slate-500 dark:text-slate-400\">\n          {label}\n        </span>\n      ) : null}\n      <div className=\"relative\">\n        <select\n          value={value}\n          onChange={(e) => onChange?.(e.target.value)}\n          className=\"h-9 appearance-none rounded-lg border border-slate-200 bg-white py-0 pl-3 pr-8 text-sm font-medium text-slate-700 shadow-sm focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 dark:border-slate-800 dark:bg-slate-900 dark:text-slate-200 dark:focus:ring-offset-slate-950\"\n          aria-label={label ?? placeholder ?? \"Filter\"}\n        >\n          {placeholder ? (\n            <option value=\"all\">{placeholder}</option>\n          ) : null}\n          {normalizedOptions.map((opt) => (\n            <option key={opt.value} value={opt.value}>\n              {opt.label}\n            </option>\n          ))}\n        </select>\n        <ChevronDownIcon\n          className=\"pointer-events-none absolute right-2 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400 dark:text-slate-500\"\n          aria-hidden=\"true\"\n        />\n      </div>\n    </div>\n  );\n}\n"],"names":["SelectFilter","value","onChange","options","label","placeholder","className","normalizedOptions","opt","jsxs","jsx","ChevronDownIcon"],"mappings":";;;AAYA,SAAwBA,EAAa;AAAA,EACnC,OAAAC,IAAQ;AAAA,EACR,UAAAC;AAAA,EACA,SAAAC,IAAU,CAAA;AAAA,EACV,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC,IAAY;AACd,GAAG;AACD,QAAMC,IAAoBJ,EAAQ;AAAA,IAAI,CAACK,MACrC,OAAOA,KAAQ,WAAW,EAAE,OAAOA,GAAK,OAAOA,MAAQA;AAAA,EAAA;AAGzD,SACE,gBAAAC,EAAC,OAAA,EAAI,WAAW,CAAC,2CAA2CH,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAC5F,UAAA;AAAA,IAAAF,IACC,gBAAAM,EAAC,QAAA,EAAK,WAAU,mEACb,aACH,IACE;AAAA,IACJ,gBAAAD,EAAC,OAAA,EAAI,WAAU,YACb,UAAA;AAAA,MAAA,gBAAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAAR;AAAA,UACA,UAAU,CAAC,MAAMC,IAAW,EAAE,OAAO,KAAK;AAAA,UAC1C,WAAU;AAAA,UACV,cAAYE,KAASC,KAAe;AAAA,UAEnC,UAAA;AAAA,YAAAA,IACC,gBAAAK,EAAC,UAAA,EAAO,OAAM,OAAO,aAAY,IAC/B;AAAA,YACHH,EAAkB,IAAI,CAACC,MACtB,gBAAAE,EAAC,UAAA,EAAuB,OAAOF,EAAI,OAChC,UAAAA,EAAI,MAAA,GADMA,EAAI,KAEjB,CACD;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MAEH,gBAAAE;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,eAAY;AAAA,QAAA;AAAA,MAAA;AAAA,IACd,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;"}

package/dist/components/library/filters/ToggleFilter.js

@@ -0,0 +1,48 @@
+import { jsxs as o, jsx as n } from "react/jsx-runtime";
+import "react";
+function l({
+  value: e = !1,
+  onChange: r,
+  label: t,
+  className: s = ""
+}) {
+  return /* @__PURE__ */ o(
+    "label",
+    {
+      className: [
+        "inline-flex cursor-pointer items-center gap-2",
+        s
+      ].filter(Boolean).join(" "),
+      children: [
+        /* @__PURE__ */ n(
+          "button",
+          {
+            type: "button",
+            role: "switch",
+            "aria-checked": e,
+            onClick: () => r?.(!e),
+            className: [
+              "relative inline-flex h-5 w-9 shrink-0 rounded-full border-2 border-transparent transition-colors focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 dark:focus:ring-offset-slate-950",
+              e ? "bg-brand-500" : "bg-slate-200 dark:bg-slate-700"
+            ].join(" "),
+            children: /* @__PURE__ */ n(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: [
+                  "pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow ring-0 transition-transform",
+                  e ? "translate-x-4" : "translate-x-0"
+                ].join(" ")
+              }
+            )
+          }
+        ),
+        t ? /* @__PURE__ */ n("span", { className: "text-sm font-medium text-slate-700 dark:text-slate-200", children: t }) : null
+      ]
+    }
+  );
+}
+export {
+  l as default
+};
+//# sourceMappingURL=ToggleFilter.js.map

package/dist/components/library/filters/ToggleFilter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleFilter.js","sources":["../../../../src/components/library/filters/ToggleFilter.jsx"],"sourcesContent":["import React from \"react\";\n\n/**\n * Toggle switch filter.\n *\n * @param {boolean} value — current on/off state\n * @param {Function} onChange — (boolean) => void\n * @param {string} label — visible label\n */\nexport default function ToggleFilter({\n  value = false,\n  onChange,\n  label,\n  className = \"\",\n}) {\n  return (\n    <label\n      className={[\n        \"inline-flex cursor-pointer items-center gap-2\",\n        className,\n      ]\n        .filter(Boolean)\n        .join(\" \")}\n    >\n      <button\n        type=\"button\"\n        role=\"switch\"\n        aria-checked={value}\n        onClick={() => onChange?.(!value)}\n        className={[\n          \"relative inline-flex h-5 w-9 shrink-0 rounded-full border-2 border-transparent transition-colors focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 dark:focus:ring-offset-slate-950\",\n          value\n            ? \"bg-brand-500\"\n            : \"bg-slate-200 dark:bg-slate-700\",\n        ].join(\" \")}\n      >\n        <span\n          aria-hidden=\"true\"\n          className={[\n            \"pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow ring-0 transition-transform\",\n            value ? \"translate-x-4\" : \"translate-x-0\",\n          ].join(\" \")}\n        />\n      </button>\n      {label ? (\n        <span className=\"text-sm font-medium text-slate-700 dark:text-slate-200\">\n          {label}\n        </span>\n      ) : null}\n    </label>\n  );\n}\n"],"names":["ToggleFilter","value","onChange","label","className","jsxs","jsx"],"mappings":";;AASA,SAAwBA,EAAa;AAAA,EACnC,OAAAC,IAAQ;AAAA,EACR,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC,IAAY;AACd,GAAG;AACD,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACAD;AAAA,MAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MAEX,UAAA;AAAA,QAAA,gBAAAE;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,MAAK;AAAA,YACL,gBAAcL;AAAA,YACd,SAAS,MAAMC,IAAW,CAACD,CAAK;AAAA,YAChC,WAAW;AAAA,cACT;AAAA,cACAA,IACI,iBACA;AAAA,YAAA,EACJ,KAAK,GAAG;AAAA,YAEV,UAAA,gBAAAK;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,eAAY;AAAA,gBACZ,WAAW;AAAA,kBACT;AAAA,kBACAL,IAAQ,kBAAkB;AAAA,gBAAA,EAC1B,KAAK,GAAG;AAAA,cAAA;AAAA,YAAA;AAAA,UACZ;AAAA,QAAA;AAAA,QAEDE,IACC,gBAAAG,EAAC,QAAA,EAAK,WAAU,0DACb,aACH,IACE;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGV;"}