@ktnpm_devops/react-component 0.6.0 → 0.7.1

package/dist/composites/FilterDropdown/FilterDropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FilterDropdown.d.ts","sourceRoot":"","sources":["../../../src/composites/FilterDropdown/FilterDropdown.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAGlE,eAAO,MAAM,cAAc;kHAYxB,mBAAmB;;CAyHrB,CAAC"}
+{"version":3,"file":"FilterDropdown.d.ts","sourceRoot":"","sources":["../../../src/composites/FilterDropdown/FilterDropdown.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAGlE,eAAO,MAAM,cAAc;kHAYxB,mBAAmB;;CA6HrB,CAAC"}

package/dist/composites/MultiSelectDropdown/MultiSelectDropdown.d.ts

@@ -24,6 +24,10 @@ export interface MultiSelectDropdownProps {
     customTriggerLabel?: string;
     /** Explicit selection mode override. */
     selectionMode?: 'all' | 'custom';
+    /** Treat an empty `selected` array as "all selected" (opt-in, legacy behavior). */
+    emptyMeansAll?: boolean;
+    /** What the trigger shows as a summary: the value label ('text') or just the count badge ('count'). */
+    triggerSummary?: 'text' | 'count';
 }
-export declare const MultiSelectDropdown: ({ label, options, selected, onApply, isLoading, error, allowCustomValues, customTriggerLabel, selectionMode, }: MultiSelectDropdownProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MultiSelectDropdown: ({ label, options, selected, onApply, isLoading, error, allowCustomValues, customTriggerLabel, selectionMode, emptyMeansAll, triggerSummary, }: MultiSelectDropdownProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=MultiSelectDropdown.d.ts.map

package/dist/composites/MultiSelectDropdown/MultiSelectDropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelectDropdown.d.ts","sourceRoot":"","sources":["../../../src/composites/MultiSelectDropdown/MultiSelectDropdown.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,wBAAwB;IACvC,6CAA6C;IAC7C,KAAK,EAAE,MAAM,CAAC;IACd,yBAAyB;IACzB,OAAO,EAAE,iBAAiB,EAAE,CAAC;IAC7B,8CAA8C;IAC9C,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,oDAAoD;IACpD,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,EAAE,QAAQ,EAAE;QAAE,aAAa,EAAE,KAAK,GAAG,QAAQ,CAAA;KAAE,KAAK,IAAI,CAAC;IACnF,mDAAmD;IACnD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,mDAAmD;IACnD,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,wCAAwC;IACxC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,wCAAwC;IACxC,aAAa,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;CAClC;AAQD,eAAO,MAAM,mBAAmB,GAAI,gHAUjC,wBAAwB,4CAwP1B,CAAC"}
+{"version":3,"file":"MultiSelectDropdown.d.ts","sourceRoot":"","sources":["../../../src/composites/MultiSelectDropdown/MultiSelectDropdown.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,wBAAwB;IACvC,6CAA6C;IAC7C,KAAK,EAAE,MAAM,CAAC;IACd,yBAAyB;IACzB,OAAO,EAAE,iBAAiB,EAAE,CAAC;IAC7B,8CAA8C;IAC9C,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,oDAAoD;IACpD,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,EAAE,QAAQ,EAAE;QAAE,aAAa,EAAE,KAAK,GAAG,QAAQ,CAAA;KAAE,KAAK,IAAI,CAAC;IACnF,mDAAmD;IACnD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,mDAAmD;IACnD,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,wCAAwC;IACxC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,wCAAwC;IACxC,aAAa,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IACjC,mFAAmF;IACnF,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,uGAAuG;IACvG,cAAc,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CACnC;AAQD,eAAO,MAAM,mBAAmB,GAAI,+IAYjC,wBAAwB,4CA0P1B,CAAC"}

package/dist/index10.cjs

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const clsx = require("./index48.cjs");
-const AuthLayout_module = require("./index60.cjs");
+const AuthLayout_module = require("./index70.cjs");
 const AuthLayout = ({
   children,
   logo,

package/dist/index10.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { clsx } from "./index48.js";
-import styles from "./index60.js";
+import styles from "./index70.js";
 const AuthLayout = ({
   children,
   logo,

package/dist/index11.cjs

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const clsx = require("./index48.cjs");
-const Avatar_module = require("./index62.cjs");
+const Avatar_module = require("./index57.cjs");
 const Avatar = ({ label, size = "md", className, ...props }) => {
   const initials = label.split(" ").filter(Boolean).map((part) => part[0]).join("").slice(0, 2).toUpperCase();
   return /* @__PURE__ */ jsxRuntime.jsx(

package/dist/index11.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { clsx } from "./index48.js";
-import styles from "./index62.js";
+import styles from "./index57.js";
 const Avatar = ({ label, size = "md", className, ...props }) => {
   const initials = label.split(" ").filter(Boolean).map((part) => part[0]).join("").slice(0, 2).toUpperCase();
   return /* @__PURE__ */ jsx(

package/dist/index12.cjs

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const clsx = require("./index48.cjs");
-const Badge_module = require("./index52.cjs");
+const Badge_module = require("./index51.cjs");
 const Badge = ({ className, variant = "info", ...props }) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx.clsx(Badge_module.default.root, Badge_module.default[variant], className), ...props });
 exports.Badge = Badge;
 //# sourceMappingURL=index12.cjs.map

package/dist/index12.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { clsx } from "./index48.js";
-import styles from "./index52.js";
+import styles from "./index51.js";
 const Badge = ({ className, variant = "info", ...props }) => /* @__PURE__ */ jsx("span", { className: clsx(styles.root, styles[variant], className), ...props });
 export {
   Badge

package/dist/index14.cjs

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const clsx = require("./index48.cjs");
-const Card_module = require("./index59.cjs");
+const Card_module = require("./index50.cjs");
 const Card = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx.clsx(Card_module.default.root, className), ...props });
 const CardHeader = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx.clsx(Card_module.default.header, className), ...props });
 const CardContent = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx.clsx(Card_module.default.content, className), ...props });

package/dist/index14.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { clsx } from "./index48.js";
-import styles from "./index59.js";
+import styles from "./index50.js";
 const Card = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: clsx(styles.root, className), ...props });
 const CardHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: clsx(styles.header, className), ...props });
 const CardContent = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: clsx(styles.content, className), ...props });

package/dist/index15.cjs

@@ -4,9 +4,9 @@ const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const reactDom = require("react-dom");
 const useEscapeKey = require("./index5.cjs");
-const constants = require("./index51.cjs");
+const constants = require("./index53.cjs");
 const clsx = require("./index48.cjs");
-const ChartExpandModal_module = require("./index67.cjs");
+const ChartExpandModal_module = require("./index83.cjs");
 const getInitialSize = (override) => {
   if (typeof window === "undefined") {
     return {

package/dist/index15.js

@@ -2,9 +2,9 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useState, useRef, useEffect, useCallback } from "react";
 import { createPortal } from "react-dom";
 import { useEscapeKey } from "./index5.js";
-import { SVG_STROKE_WIDTH, SVG_VIEWBOX, ICON_SIZE, CHART_MODAL, VIEWPORT_MARGIN } from "./index51.js";
+import { SVG_STROKE_WIDTH, SVG_VIEWBOX, ICON_SIZE, CHART_MODAL, VIEWPORT_MARGIN } from "./index53.js";
 import { clsx } from "./index48.js";
-import styles from "./index67.js";
+import styles from "./index83.js";
 const getInitialSize = (override) => {
   if (typeof window === "undefined") {
     return {

package/dist/index16.cjs

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const clsx = require("./index48.cjs");
-const ChatLayout_module = require("./index84.cjs");
+const ChatLayout_module = require("./index69.cjs");
 const ChatLayout = ({
   sidebar,
   conversationList,

package/dist/index16.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { clsx } from "./index48.js";
-import styles from "./index84.js";
+import styles from "./index69.js";
 const ChatLayout = ({
   sidebar,
   conversationList,

package/dist/index17.cjs

@@ -3,7 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const clsx = require("./index48.cjs");
-const Col_module = require("./index76.cjs");
+const Col_module = require("./index62.cjs");
 const GRID_COLUMNS = 12;
 function toFlexValue(value) {
   if (value === true) return 1;

package/dist/index17.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { clsx } from "./index48.js";
-import styles from "./index76.js";
+import styles from "./index62.js";
 const GRID_COLUMNS = 12;
 function toFlexValue(value) {
   if (value === true) return 1;

package/dist/index18.cjs

@@ -4,9 +4,9 @@ const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const reactDom = require("react-dom");
 const useEscapeKey = require("./index5.cjs");
-const constants = require("./index51.cjs");
+const constants = require("./index53.cjs");
 const clsx = require("./index48.cjs");
-const ContextMenu_module = require("./index70.cjs");
+const ContextMenu_module = require("./index84.cjs");
 const ContextMenu = ({ x, y, items, onClose }) => {
   const menuRef = react.useRef(null);
   const [focusedIndex, setFocusedIndex] = react.useState(-1);

package/dist/index18.js

@@ -2,9 +2,9 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useRef, useState, useCallback, useEffect } from "react";
 import { createPortal } from "react-dom";
 import { useEscapeKey } from "./index5.js";
-import { CONTEXT_MENU_MARGIN } from "./index51.js";
+import { CONTEXT_MENU_MARGIN } from "./index53.js";
 import { clsx } from "./index48.js";
-import styles from "./index70.js";
+import styles from "./index84.js";
 const ContextMenu = ({ x, y, items, onClose }) => {
   const menuRef = useRef(null);
   const [focusedIndex, setFocusedIndex] = useState(-1);

package/dist/index19.cjs

@@ -4,8 +4,8 @@ const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const ReactECharts = require("echarts-for-react");
 const clsx = require("./index48.cjs");
-const constants = require("./index51.cjs");
-const CounterTimeseriesChart_module = require("./index88.cjs");
+const constants = require("./index53.cjs");
+const CounterTimeseriesChart_module = require("./index81.cjs");
 const DEFAULT_TIME_RANGE_OPTIONS = ["auto", "1h", "6h", "24h", "7d", "30d"];
 const buildMarkAreas = (annotations) => annotations.filter((a) => a.end).map((a) => [
   { name: a.label, xAxis: a.start, itemStyle: { color: a.color ?? "rgba(255,107,90,0.12)" } },

package/dist/index19.js

@@ -2,8 +2,8 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
 import ReactECharts from "echarts-for-react";
 import { clsx } from "./index48.js";
-import { CHART_COLORS } from "./index51.js";
-import styles from "./index88.js";
+import { CHART_COLORS } from "./index53.js";
+import styles from "./index81.js";
 const DEFAULT_TIME_RANGE_OPTIONS = ["auto", "1h", "6h", "24h", "7d", "30d"];
 const buildMarkAreas = (annotations) => annotations.filter((a) => a.end).map((a) => [
   { name: a.label, xAxis: a.start, itemStyle: { color: a.color ?? "rgba(255,107,90,0.12)" } },

package/dist/index20.cjs

@@ -3,8 +3,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const clsx = require("./index48.cjs");
-const constants = require("./index51.cjs");
-const CountersAnalysisCard_module = require("./index77.cjs");
+const constants = require("./index53.cjs");
+const CountersAnalysisCard_module = require("./index82.cjs");
 const CounterTimeseriesChart = require("./index19.cjs");
 const COLUMN_HEADERS = [
   { key: "counter", label: "Counter" },

package/dist/index20.js

@@ -1,8 +1,8 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useState, useMemo } from "react";
 import { clsx } from "./index48.js";
-import { COUNTERS_PAGE_SIZE } from "./index51.js";
-import styles from "./index77.js";
+import { COUNTERS_PAGE_SIZE } from "./index53.js";
+import styles from "./index82.js";
 import { CounterTimeseriesChart } from "./index19.js";
 const COLUMN_HEADERS = [
   { key: "counter", label: "Counter" },

package/dist/index21.cjs

@@ -6,7 +6,7 @@ const clsx = require("./index48.cjs");
 const useClickOutside = require("./index4.cjs");
 const useEscapeKey = require("./index5.cjs");
 const format = require("./index7.cjs");
-const CustomRangePicker_module = require("./index64.cjs");
+const CustomRangePicker_module = require("./index58.cjs");
 const formatInputValue = (iso) => {
   if (!iso) return "";
   const date = new Date(iso);

package/dist/index21.js

@@ -4,7 +4,7 @@ import { clsx } from "./index48.js";
 import { useClickOutside } from "./index4.js";
 import { useEscapeKey } from "./index5.js";
 import { formatLocalISOString } from "./index7.js";
-import styles from "./index64.js";
+import styles from "./index58.js";
 const formatInputValue = (iso) => {
   if (!iso) return "";
   const date = new Date(iso);

package/dist/index22.cjs

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const clsx = require("./index48.cjs");
-const DashboardLayout_module = require("./index82.cjs");
+const DashboardLayout_module = require("./index71.cjs");
 const DashboardLayout = ({
   sidebar,
   filterBar,

package/dist/index22.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { clsx } from "./index48.js";
-import styles from "./index82.js";
+import styles from "./index71.js";
 const DashboardLayout = ({
   sidebar,
   filterBar,

package/dist/index23.cjs

@@ -5,7 +5,7 @@ const react = require("react");
 const clsx = require("./index48.cjs");
 const useClickOutside = require("./index4.cjs");
 const useEscapeKey = require("./index5.cjs");
-const DatePickerDropdown_module = require("./index80.cjs");
+const DatePickerDropdown_module = require("./index75.cjs");
 const MONTHS = [
   "January",
   "February",

package/dist/index23.js

@@ -3,7 +3,7 @@ import { useState, useRef, useCallback, useEffect, useMemo } from "react";
 import { clsx } from "./index48.js";
 import { useClickOutside } from "./index4.js";
 import { useEscapeKey } from "./index5.js";
-import styles from "./index80.js";
+import styles from "./index75.js";
 const MONTHS = [
   "January",
   "February",

package/dist/index24.cjs

@@ -5,7 +5,8 @@ const react = require("react");
 const clsx = require("./index48.cjs");
 const useClickOutside = require("./index4.cjs");
 const useEscapeKey = require("./index5.cjs");
-const FilterDropdown_module = require("./index81.cjs");
+const constants = require("./index53.cjs");
+const FilterDropdown_module = require("./index60.cjs");
 const FilterDropdown = ({
   label,
   mode,
@@ -58,32 +59,34 @@ const FilterDropdown = ({
   };
   const clearHandler = mode === "multi" ? onClear : clearText;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, className: clsx.clsx(FilterDropdown_module.default.root, className), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
+    /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
         type: "button",
-        className: clsx.clsx(FilterDropdown_module.default.trigger, hasSelection && FilterDropdown_module.default.isActive),
+        className: FilterDropdown_module.default.trigger,
         "aria-haspopup": "true",
         "aria-expanded": isOpen,
         onClick: () => setIsOpen((open) => !open),
-        children: [
-          label,
-          count > 0 && ` (${count})`,
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: FilterDropdown_module.default.triggerContent, children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             "svg",
             {
-              className: clsx.clsx(FilterDropdown_module.default.arrow, isOpen && FilterDropdown_module.default.arrowOpen),
-              viewBox: "0 0 24 24",
+              className: clsx.clsx(FilterDropdown_module.default.chevron, isOpen && FilterDropdown_module.default.chevronOpen),
+              width: constants.ICON_SIZE.MD,
+              height: constants.ICON_SIZE.MD,
+              viewBox: constants.SVG_VIEWBOX,
               fill: "none",
               stroke: "currentColor",
-              strokeWidth: "2",
+              strokeWidth: constants.SVG_STROKE_WIDTH,
               strokeLinecap: "round",
               strokeLinejoin: "round",
               "aria-hidden": "true",
               children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "6 9 12 15 18 9" })
             }
-          )
-        ]
+          ),
+          label,
+          count > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: FilterDropdown_module.default.badge, children: count })
+        ] })
       }
     ),
     isOpen && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: FilterDropdown_module.default.pop, children: [

package/dist/index24.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index24.cjs","sources":["../src/composites/FilterDropdown/FilterDropdown.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport clsx from 'clsx';\nimport { useClickOutside } from '../../hooks/useClickOutside';\nimport { useEscapeKey } from '../../hooks/useEscapeKey';\nimport type { FilterDropdownProps } from './FilterDropdown.types';\nimport styles from './FilterDropdown.module.css';\n\nexport const FilterDropdown = ({\n  label,\n  mode,\n  options = [],\n  selected,\n  onToggle,\n  onClear,\n  value = '',\n  onChange,\n  placeholder,\n  clearLabel = 'Limpiar',\n  className,\n}: FilterDropdownProps) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  // Text mode keeps a draft that is only committed on Enter / blur / close.\n  const [draft, setDraft] = useState(value);\n  const lastCommitted = useRef(value);\n  useEffect(() => {\n    if (isOpen) {\n      setDraft(value);\n      lastCommitted.current = value;\n    }\n  }, [isOpen, value]);\n\n  const commitDraft = useCallback(() => {\n    if (draft !== lastCommitted.current) {\n      lastCommitted.current = draft;\n      onChange?.(draft);\n    }\n  }, [draft, onChange]);\n\n  const close = useCallback(() => {\n    if (mode === 'text') commitDraft();\n    setIsOpen(false);\n  }, [mode, commitDraft]);\n\n  const cancel = useCallback(() => {\n    setDraft(lastCommitted.current);\n    setIsOpen(false);\n  }, []);\n\n  useClickOutside(containerRef, close);\n  useEscapeKey(cancel, isOpen);\n\n  const selectedSet = useMemo(\n    () => (selected instanceof Set ? selected : new Set(selected ?? [])),\n    [selected],\n  );\n\n  const count = mode === 'multi' ? selectedSet.size : value ? 1 : 0;\n  const hasSelection = count > 0;\n\n  const clearText = () => {\n    setDraft('');\n    lastCommitted.current = '';\n    (onClear ?? (() => onChange?.('')))();\n  };\n  const clearHandler = mode === 'multi' ? onClear : clearText;\n\n  return (\n    <div ref={containerRef} className={clsx(styles.root, className)}>\n      <button\n        type=\"button\"\n        className={clsx(styles.trigger, hasSelection && styles.isActive)}\n        aria-haspopup=\"true\"\n        aria-expanded={isOpen}\n        onClick={() => setIsOpen((open) => !open)}\n      >\n        {label}\n        {count > 0 && ` (${count})`}\n        <svg\n          className={clsx(styles.arrow, isOpen && styles.arrowOpen)}\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          aria-hidden=\"true\"\n        >\n          <polyline points=\"6 9 12 15 18 9\" />\n        </svg>\n      </button>\n\n      {isOpen && (\n        <div className={styles.pop}>\n          {mode === 'multi' ? (\n            <div className={styles.chips}>\n              {options.map((option) => {\n                const on = selectedSet.has(option.value);\n                return (\n                  <button\n                    key={option.value}\n                    type=\"button\"\n                    className={clsx(styles.chip, on && styles.chipOn)}\n                    aria-pressed={on}\n                    onClick={() => onToggle?.(option.value)}\n                  >\n                    {option.label}\n                  </button>\n                );\n              })}\n            </div>\n          ) : (\n            <input\n              type=\"text\"\n              className={styles.input}\n              value={draft}\n              placeholder={placeholder}\n              aria-label={label}\n              onChange={(event) => setDraft(event.target.value)}\n              onKeyDown={(event) => {\n                if (event.key === 'Enter') {\n                  event.preventDefault();\n                  close();\n                }\n              }}\n              onBlur={(event) => {\n                if (!containerRef.current?.contains(event.relatedTarget as Node)) commitDraft();\n              }}\n            />\n          )}\n          {hasSelection && clearHandler && (\n            <button type=\"button\" className={styles.clear} onClick={clearHandler}>\n              {clearLabel} {label.toLowerCase()}\n            </button>\n          )}\n        </div>\n      )}\n    </div>\n  );\n};\n\nFilterDropdown.displayName = 'FilterDropdown';\n"],"names":["useState","useRef","useEffect","useCallback","useClickOutside","useEscapeKey","useMemo","jsxs","clsx","styles","jsx"],"mappings":"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"}
+{"version":3,"file":"index24.cjs","sources":["../src/composites/FilterDropdown/FilterDropdown.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport clsx from 'clsx';\nimport { useClickOutside } from '../../hooks/useClickOutside';\nimport { useEscapeKey } from '../../hooks/useEscapeKey';\nimport { ICON_SIZE, SVG_VIEWBOX, SVG_STROKE_WIDTH } from '../../constants';\nimport type { FilterDropdownProps } from './FilterDropdown.types';\nimport styles from './FilterDropdown.module.css';\n\nexport const FilterDropdown = ({\n  label,\n  mode,\n  options = [],\n  selected,\n  onToggle,\n  onClear,\n  value = '',\n  onChange,\n  placeholder,\n  clearLabel = 'Limpiar',\n  className,\n}: FilterDropdownProps) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  // Text mode keeps a draft that is only committed on Enter / blur / close.\n  const [draft, setDraft] = useState(value);\n  const lastCommitted = useRef(value);\n  useEffect(() => {\n    if (isOpen) {\n      setDraft(value);\n      lastCommitted.current = value;\n    }\n  }, [isOpen, value]);\n\n  const commitDraft = useCallback(() => {\n    if (draft !== lastCommitted.current) {\n      lastCommitted.current = draft;\n      onChange?.(draft);\n    }\n  }, [draft, onChange]);\n\n  const close = useCallback(() => {\n    if (mode === 'text') commitDraft();\n    setIsOpen(false);\n  }, [mode, commitDraft]);\n\n  const cancel = useCallback(() => {\n    setDraft(lastCommitted.current);\n    setIsOpen(false);\n  }, []);\n\n  useClickOutside(containerRef, close);\n  useEscapeKey(cancel, isOpen);\n\n  const selectedSet = useMemo(\n    () => (selected instanceof Set ? selected : new Set(selected ?? [])),\n    [selected],\n  );\n\n  const count = mode === 'multi' ? selectedSet.size : value ? 1 : 0;\n  const hasSelection = count > 0;\n\n  const clearText = () => {\n    setDraft('');\n    lastCommitted.current = '';\n    (onClear ?? (() => onChange?.('')))();\n  };\n  const clearHandler = mode === 'multi' ? onClear : clearText;\n\n  return (\n    <div ref={containerRef} className={clsx(styles.root, className)}>\n      <button\n        type=\"button\"\n        className={styles.trigger}\n        aria-haspopup=\"true\"\n        aria-expanded={isOpen}\n        onClick={() => setIsOpen((open) => !open)}\n      >\n        <div className={styles.triggerContent}>\n          <svg\n            className={clsx(styles.chevron, isOpen && styles.chevronOpen)}\n            width={ICON_SIZE.MD}\n            height={ICON_SIZE.MD}\n            viewBox={SVG_VIEWBOX}\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeWidth={SVG_STROKE_WIDTH}\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <polyline points=\"6 9 12 15 18 9\" />\n          </svg>\n          {label}\n          {count > 0 && <span className={styles.badge}>{count}</span>}\n        </div>\n      </button>\n\n      {isOpen && (\n        <div className={styles.pop}>\n          {mode === 'multi' ? (\n            <div className={styles.chips}>\n              {options.map((option) => {\n                const on = selectedSet.has(option.value);\n                return (\n                  <button\n                    key={option.value}\n                    type=\"button\"\n                    className={clsx(styles.chip, on && styles.chipOn)}\n                    aria-pressed={on}\n                    onClick={() => onToggle?.(option.value)}\n                  >\n                    {option.label}\n                  </button>\n                );\n              })}\n            </div>\n          ) : (\n            <input\n              type=\"text\"\n              className={styles.input}\n              value={draft}\n              placeholder={placeholder}\n              aria-label={label}\n              onChange={(event) => setDraft(event.target.value)}\n              onKeyDown={(event) => {\n                if (event.key === 'Enter') {\n                  event.preventDefault();\n                  close();\n                }\n              }}\n              onBlur={(event) => {\n                if (!containerRef.current?.contains(event.relatedTarget as Node)) commitDraft();\n              }}\n            />\n          )}\n          {hasSelection && clearHandler && (\n            <button type=\"button\" className={styles.clear} onClick={clearHandler}>\n              {clearLabel} {label.toLowerCase()}\n            </button>\n          )}\n        </div>\n      )}\n    </div>\n  );\n};\n\nFilterDropdown.displayName = 'FilterDropdown';\n"],"names":["useState","useRef","useEffect","useCallback","useClickOutside","useEscapeKey","useMemo","jsxs","clsx","styles","jsx","ICON_SIZE","SVG_VIEWBOX","SVG_STROKE_WIDTH"],"mappings":"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"}

package/dist/index24.js

@@ -3,7 +3,8 @@ import { useState, useRef, useEffect, useCallback, useMemo } from "react";
 import { clsx } from "./index48.js";
 import { useClickOutside } from "./index4.js";
 import { useEscapeKey } from "./index5.js";
-import styles from "./index81.js";
+import { SVG_STROKE_WIDTH, SVG_VIEWBOX, ICON_SIZE } from "./index53.js";
+import styles from "./index60.js";
 const FilterDropdown = ({
   label,
   mode,
@@ -56,32 +57,34 @@ const FilterDropdown = ({
   };
   const clearHandler = mode === "multi" ? onClear : clearText;
   return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: clsx(styles.root, className), children: [
-    /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx(
       "button",
       {
         type: "button",
-        className: clsx(styles.trigger, hasSelection && styles.isActive),
+        className: styles.trigger,
         "aria-haspopup": "true",
         "aria-expanded": isOpen,
         onClick: () => setIsOpen((open) => !open),
-        children: [
-          label,
-          count > 0 && ` (${count})`,
+        children: /* @__PURE__ */ jsxs("div", { className: styles.triggerContent, children: [
           /* @__PURE__ */ jsx(
             "svg",
             {
-              className: clsx(styles.arrow, isOpen && styles.arrowOpen),
-              viewBox: "0 0 24 24",
+              className: clsx(styles.chevron, isOpen && styles.chevronOpen),
+              width: ICON_SIZE.MD,
+              height: ICON_SIZE.MD,
+              viewBox: SVG_VIEWBOX,
               fill: "none",
               stroke: "currentColor",
-              strokeWidth: "2",
+              strokeWidth: SVG_STROKE_WIDTH,
               strokeLinecap: "round",
               strokeLinejoin: "round",
               "aria-hidden": "true",
               children: /* @__PURE__ */ jsx("polyline", { points: "6 9 12 15 18 9" })
             }
-          )
-        ]
+          ),
+          label,
+          count > 0 && /* @__PURE__ */ jsx("span", { className: styles.badge, children: count })
+        ] })
       }
     ),
     isOpen && /* @__PURE__ */ jsxs("div", { className: styles.pop, children: [

package/dist/index24.js.map

@@ -1 +1 @@
-{"version":3,"file":"index24.js","sources":["../src/composites/FilterDropdown/FilterDropdown.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport clsx from 'clsx';\nimport { useClickOutside } from '../../hooks/useClickOutside';\nimport { useEscapeKey } from '../../hooks/useEscapeKey';\nimport type { FilterDropdownProps } from './FilterDropdown.types';\nimport styles from './FilterDropdown.module.css';\n\nexport const FilterDropdown = ({\n  label,\n  mode,\n  options = [],\n  selected,\n  onToggle,\n  onClear,\n  value = '',\n  onChange,\n  placeholder,\n  clearLabel = 'Limpiar',\n  className,\n}: FilterDropdownProps) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  // Text mode keeps a draft that is only committed on Enter / blur / close.\n  const [draft, setDraft] = useState(value);\n  const lastCommitted = useRef(value);\n  useEffect(() => {\n    if (isOpen) {\n      setDraft(value);\n      lastCommitted.current = value;\n    }\n  }, [isOpen, value]);\n\n  const commitDraft = useCallback(() => {\n    if (draft !== lastCommitted.current) {\n      lastCommitted.current = draft;\n      onChange?.(draft);\n    }\n  }, [draft, onChange]);\n\n  const close = useCallback(() => {\n    if (mode === 'text') commitDraft();\n    setIsOpen(false);\n  }, [mode, commitDraft]);\n\n  const cancel = useCallback(() => {\n    setDraft(lastCommitted.current);\n    setIsOpen(false);\n  }, []);\n\n  useClickOutside(containerRef, close);\n  useEscapeKey(cancel, isOpen);\n\n  const selectedSet = useMemo(\n    () => (selected instanceof Set ? selected : new Set(selected ?? [])),\n    [selected],\n  );\n\n  const count = mode === 'multi' ? selectedSet.size : value ? 1 : 0;\n  const hasSelection = count > 0;\n\n  const clearText = () => {\n    setDraft('');\n    lastCommitted.current = '';\n    (onClear ?? (() => onChange?.('')))();\n  };\n  const clearHandler = mode === 'multi' ? onClear : clearText;\n\n  return (\n    <div ref={containerRef} className={clsx(styles.root, className)}>\n      <button\n        type=\"button\"\n        className={clsx(styles.trigger, hasSelection && styles.isActive)}\n        aria-haspopup=\"true\"\n        aria-expanded={isOpen}\n        onClick={() => setIsOpen((open) => !open)}\n      >\n        {label}\n        {count > 0 && ` (${count})`}\n        <svg\n          className={clsx(styles.arrow, isOpen && styles.arrowOpen)}\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          aria-hidden=\"true\"\n        >\n          <polyline points=\"6 9 12 15 18 9\" />\n        </svg>\n      </button>\n\n      {isOpen && (\n        <div className={styles.pop}>\n          {mode === 'multi' ? (\n            <div className={styles.chips}>\n              {options.map((option) => {\n                const on = selectedSet.has(option.value);\n                return (\n                  <button\n                    key={option.value}\n                    type=\"button\"\n                    className={clsx(styles.chip, on && styles.chipOn)}\n                    aria-pressed={on}\n                    onClick={() => onToggle?.(option.value)}\n                  >\n                    {option.label}\n                  </button>\n                );\n              })}\n            </div>\n          ) : (\n            <input\n              type=\"text\"\n              className={styles.input}\n              value={draft}\n              placeholder={placeholder}\n              aria-label={label}\n              onChange={(event) => setDraft(event.target.value)}\n              onKeyDown={(event) => {\n                if (event.key === 'Enter') {\n                  event.preventDefault();\n                  close();\n                }\n              }}\n              onBlur={(event) => {\n                if (!containerRef.current?.contains(event.relatedTarget as Node)) commitDraft();\n              }}\n            />\n          )}\n          {hasSelection && clearHandler && (\n            <button type=\"button\" className={styles.clear} onClick={clearHandler}>\n              {clearLabel} {label.toLowerCase()}\n            </button>\n          )}\n        </div>\n      )}\n    </div>\n  );\n};\n\nFilterDropdown.displayName = 'FilterDropdown';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index24.js","sources":["../src/composites/FilterDropdown/FilterDropdown.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport clsx from 'clsx';\nimport { useClickOutside } from '../../hooks/useClickOutside';\nimport { useEscapeKey } from '../../hooks/useEscapeKey';\nimport { ICON_SIZE, SVG_VIEWBOX, SVG_STROKE_WIDTH } from '../../constants';\nimport type { FilterDropdownProps } from './FilterDropdown.types';\nimport styles from './FilterDropdown.module.css';\n\nexport const FilterDropdown = ({\n  label,\n  mode,\n  options = [],\n  selected,\n  onToggle,\n  onClear,\n  value = '',\n  onChange,\n  placeholder,\n  clearLabel = 'Limpiar',\n  className,\n}: FilterDropdownProps) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  // Text mode keeps a draft that is only committed on Enter / blur / close.\n  const [draft, setDraft] = useState(value);\n  const lastCommitted = useRef(value);\n  useEffect(() => {\n    if (isOpen) {\n      setDraft(value);\n      lastCommitted.current = value;\n    }\n  }, [isOpen, value]);\n\n  const commitDraft = useCallback(() => {\n    if (draft !== lastCommitted.current) {\n      lastCommitted.current = draft;\n      onChange?.(draft);\n    }\n  }, [draft, onChange]);\n\n  const close = useCallback(() => {\n    if (mode === 'text') commitDraft();\n    setIsOpen(false);\n  }, [mode, commitDraft]);\n\n  const cancel = useCallback(() => {\n    setDraft(lastCommitted.current);\n    setIsOpen(false);\n  }, []);\n\n  useClickOutside(containerRef, close);\n  useEscapeKey(cancel, isOpen);\n\n  const selectedSet = useMemo(\n    () => (selected instanceof Set ? selected : new Set(selected ?? [])),\n    [selected],\n  );\n\n  const count = mode === 'multi' ? selectedSet.size : value ? 1 : 0;\n  const hasSelection = count > 0;\n\n  const clearText = () => {\n    setDraft('');\n    lastCommitted.current = '';\n    (onClear ?? (() => onChange?.('')))();\n  };\n  const clearHandler = mode === 'multi' ? onClear : clearText;\n\n  return (\n    <div ref={containerRef} className={clsx(styles.root, className)}>\n      <button\n        type=\"button\"\n        className={styles.trigger}\n        aria-haspopup=\"true\"\n        aria-expanded={isOpen}\n        onClick={() => setIsOpen((open) => !open)}\n      >\n        <div className={styles.triggerContent}>\n          <svg\n            className={clsx(styles.chevron, isOpen && styles.chevronOpen)}\n            width={ICON_SIZE.MD}\n            height={ICON_SIZE.MD}\n            viewBox={SVG_VIEWBOX}\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeWidth={SVG_STROKE_WIDTH}\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <polyline points=\"6 9 12 15 18 9\" />\n          </svg>\n          {label}\n          {count > 0 && <span className={styles.badge}>{count}</span>}\n        </div>\n      </button>\n\n      {isOpen && (\n        <div className={styles.pop}>\n          {mode === 'multi' ? (\n            <div className={styles.chips}>\n              {options.map((option) => {\n                const on = selectedSet.has(option.value);\n                return (\n                  <button\n                    key={option.value}\n                    type=\"button\"\n                    className={clsx(styles.chip, on && styles.chipOn)}\n                    aria-pressed={on}\n                    onClick={() => onToggle?.(option.value)}\n                  >\n                    {option.label}\n                  </button>\n                );\n              })}\n            </div>\n          ) : (\n            <input\n              type=\"text\"\n              className={styles.input}\n              value={draft}\n              placeholder={placeholder}\n              aria-label={label}\n              onChange={(event) => setDraft(event.target.value)}\n              onKeyDown={(event) => {\n                if (event.key === 'Enter') {\n                  event.preventDefault();\n                  close();\n                }\n              }}\n              onBlur={(event) => {\n                if (!containerRef.current?.contains(event.relatedTarget as Node)) commitDraft();\n              }}\n            />\n          )}\n          {hasSelection && clearHandler && (\n            <button type=\"button\" className={styles.clear} onClick={clearHandler}>\n              {clearLabel} {label.toLowerCase()}\n            </button>\n          )}\n        </div>\n      )}\n    </div>\n  );\n};\n\nFilterDropdown.displayName = 'FilterDropdown';\n"],"names":[],"mappings":"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"}

package/dist/index25.cjs

@@ -3,7 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const clsx = require("./index48.cjs");
-const HeatmapMatrix_module = require("./index78.cjs");
+const HeatmapMatrix_module = require("./index88.cjs");
 function activateOnKey(event, action) {
   if (event.key === "Enter" || event.key === " ") {
     event.preventDefault();

package/dist/index25.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { clsx } from "./index48.js";
-import styles from "./index78.js";
+import styles from "./index88.js";
 function activateOnKey(event, action) {
   if (event.key === "Enter" || event.key === " ") {
     event.preventDefault();

package/dist/index27.cjs

@@ -3,8 +3,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const clsx = require("./index48.cjs");
-const constants = require("./index51.cjs");
-const LiveExplorerTable_module = require("./index79.cjs");
+const constants = require("./index53.cjs");
+const LiveExplorerTable_module = require("./index76.cjs");
 const SKELETON_ROWS = 5;
 const FULL_PERCENT = 100;
 const LiveExplorerTable = ({

package/dist/index27.js

@@ -1,8 +1,8 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useRef, useEffect, useCallback } from "react";
 import { clsx } from "./index48.js";
-import { MIN_COLUMN_WIDTH } from "./index51.js";
-import styles from "./index79.js";
+import { MIN_COLUMN_WIDTH } from "./index53.js";
+import styles from "./index76.js";
 const SKELETON_ROWS = 5;
 const FULL_PERCENT = 100;
 const LiveExplorerTable = ({

package/dist/index28.cjs

@@ -4,7 +4,7 @@ const jsxRuntime = require("react/jsx-runtime");
 const reactDom = require("react-dom");
 const clsx = require("./index48.cjs");
 const useEscapeKey = require("./index5.cjs");
-const Modal_module = require("./index69.cjs");
+const Modal_module = require("./index63.cjs");
 const Modal = ({
   open,
   title,

package/dist/index28.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { createPortal } from "react-dom";
 import { clsx } from "./index48.js";
 import { useEscapeKey } from "./index5.js";
-import styles from "./index69.js";
+import styles from "./index63.js";
 const Modal = ({
   open,
   title,