@ktnpm_devops/react-component 0.1.0 → 0.2.0

package/dist/index30.cjs

@@ -1,30 +1,147 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const ICON_SIZE = {
-  SM: 14,
-  MD: 16,
-  LG: 18
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const clsx = require("./index35.cjs");
+const useClickOutside = require("./index3.cjs");
+const useEscapeKey = require("./index4.cjs");
+const constants = require("./index38.cjs");
+const SingleSelectDropdown_module = require("./index47.cjs");
+const SingleSelectDropdown = ({
+  label,
+  options,
+  selected,
+  onSelect,
+  customTriggerLabel,
+  onClear,
+  showClearButton = false
+}) => {
+  const [isOpen, setIsOpen] = react.useState(false);
+  const [searchTerm, setSearchTerm] = react.useState("");
+  const [focusedIndex, setFocusedIndex] = react.useState(-1);
+  const containerRef = react.useRef(null);
+  const listRef = react.useRef(null);
+  const close = react.useCallback(() => {
+    setIsOpen(false);
+    setSearchTerm("");
+    setFocusedIndex(-1);
+  }, []);
+  useClickOutside.useClickOutside(containerRef, close);
+  useEscapeKey.useEscapeKey(close, isOpen);
+  const filteredOptions = react.useMemo(() => {
+    if (!searchTerm.trim()) return options;
+    const term = searchTerm.trim().toLowerCase();
+    return options.filter((opt) => {
+      const lbl = opt.label ?? opt.value;
+      return lbl.toLowerCase().includes(term) || opt.value.toLowerCase().includes(term);
+    });
+  }, [options, searchTerm]);
+  const handleSelect = (value) => {
+    onSelect(value);
+    close();
+  };
+  const handleClear = (e) => {
+    e.stopPropagation();
+    onClear == null ? void 0 : onClear();
+    close();
+  };
+  const handleKeyDown = (e) => {
+    if (!isOpen) return;
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setFocusedIndex((prev) => Math.min(prev + 1, filteredOptions.length - 1));
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setFocusedIndex((prev) => Math.max(prev - 1, 0));
+    } else if (e.key === "Enter" && focusedIndex >= 0 && focusedIndex < filteredOptions.length) {
+      e.preventDefault();
+      handleSelect(filteredOptions[focusedIndex].value);
+    }
+  };
+  const selectedOption = options.find((o) => o.value === selected);
+  const displayLabel = customTriggerLabel || (selectedOption == null ? void 0 : selectedOption.label) || (selectedOption == null ? void 0 : selectedOption.value) || "Select";
+  const showClear = showClearButton && selected !== null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: SingleSelectDropdown_module.default.root, ref: containerRef, onKeyDown: handleKeyDown, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        className: clsx.clsx(SingleSelectDropdown_module.default.trigger, { [SingleSelectDropdown_module.default.active]: isOpen }),
+        onClick: () => {
+          setIsOpen((prev) => !prev);
+          setFocusedIndex(-1);
+        },
+        "aria-expanded": isOpen,
+        "aria-haspopup": "listbox",
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: SingleSelectDropdown_module.default.triggerContent, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("svg", { className: SingleSelectDropdown_module.default.chevron, width: constants.ICON_SIZE.MD, height: constants.ICON_SIZE.MD, viewBox: constants.SVG_VIEWBOX, fill: "none", stroke: "currentColor", strokeWidth: constants.SVG_STROKE_WIDTH, strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "6 9 12 15 18 9" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: SingleSelectDropdown_module.default.label, children: label }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: SingleSelectDropdown_module.default.value, children: displayLabel }),
+          showClear && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: SingleSelectDropdown_module.default.clear,
+              onClick: handleClear,
+              role: "button",
+              tabIndex: 0,
+              "aria-label": `Clear ${label}`,
+              onKeyDown: (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  handleClear(e);
+                }
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: constants.ICON_SIZE.SM, height: constants.ICON_SIZE.SM, viewBox: constants.SVG_VIEWBOX, fill: "none", stroke: "currentColor", strokeWidth: constants.SVG_STROKE_WIDTH, strokeLinecap: "round", strokeLinejoin: "round", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+              ] })
+            }
+          )
+        ] })
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: SingleSelectDropdown_module.default.panel, role: "listbox", ref: listRef, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: SingleSelectDropdown_module.default.searchContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          type: "search",
+          className: SingleSelectDropdown_module.default.search,
+          placeholder: `Search ${label.toLowerCase()}`,
+          value: searchTerm,
+          onChange: (e) => {
+            setSearchTerm(e.target.value);
+            setFocusedIndex(-1);
+          },
+          onClick: (e) => e.stopPropagation()
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: SingleSelectDropdown_module.default.list, children: [
+        filteredOptions.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: SingleSelectDropdown_module.default.noResults, children: "No matches found" }),
+        filteredOptions.map((opt, i) => {
+          const isSelected = opt.value === selected;
+          const isFocused = i === focusedIndex;
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: clsx.clsx(SingleSelectDropdown_module.default.option, {
+                [SingleSelectDropdown_module.default.selected]: isSelected,
+                [SingleSelectDropdown_module.default.focused]: isFocused
+              }),
+              onClick: () => handleSelect(opt.value),
+              role: "option",
+              "aria-selected": isSelected,
+              children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: SingleSelectDropdown_module.default.optionLabel, children: [
+                opt.label ?? opt.value,
+                opt.count !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: SingleSelectDropdown_module.default.optionCount, children: opt.count })
+              ] })
+            },
+            opt.value
+          );
+        })
+      ] })
+    ] })
+  ] });
 };
-const SVG_VIEWBOX = "0 0 24 24";
-const SVG_STROKE_WIDTH = 2;
-const KEYBOARD_STEP = 2;
-const VIEWPORT_MARGIN = 32;
-const CONTEXT_MENU_MARGIN = 10;
-const CHART_MODAL = {
-  MIN_WIDTH: 960,
-  MIN_HEIGHT: 480,
-  MAX_WIDTH: 2400,
-  MAX_HEIGHT: 1300,
-  DEFAULT_WIDTH: 1500,
-  DEFAULT_HEIGHT: 820,
-  FALLBACK_WIDTH: 1400,
-  FALLBACK_HEIGHT: 800
-};
-exports.CHART_MODAL = CHART_MODAL;
-exports.CONTEXT_MENU_MARGIN = CONTEXT_MENU_MARGIN;
-exports.ICON_SIZE = ICON_SIZE;
-exports.KEYBOARD_STEP = KEYBOARD_STEP;
-exports.SVG_STROKE_WIDTH = SVG_STROKE_WIDTH;
-exports.SVG_VIEWBOX = SVG_VIEWBOX;
-exports.VIEWPORT_MARGIN = VIEWPORT_MARGIN;
+exports.SingleSelectDropdown = SingleSelectDropdown;
 //# sourceMappingURL=index30.cjs.map

package/dist/index30.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index30.cjs","sources":["../src/constants.ts"],"sourcesContent":["/**\n * Shared constants for the component library.\n * Centralises magic numbers used across components.\n */\n\n/** SVG icon rendered sizes (px — used as HTML/SVG attributes, not CSS). */\nexport const ICON_SIZE = {\n  SM: 14,\n  MD: 16,\n  LG: 18,\n} as const;\n\n/** Standard SVG viewBox for 24×24 icon grid. */\nexport const SVG_VIEWBOX = '0 0 24 24';\n\n/** Standard SVG stroke width. */\nexport const SVG_STROKE_WIDTH = 2;\n\n/** Keyboard accessibility step (percentage points per arrow press). */\nexport const KEYBOARD_STEP = 2;\n\n/** Viewport safety margin (px — used in JS calculations with DOM APIs). */\nexport const VIEWPORT_MARGIN = 32;\n\n/** ContextMenu viewport margin (px). */\nexport const CONTEXT_MENU_MARGIN = 10;\n\n/** ChartExpandModal dimension constraints (px — used with window.innerWidth). */\nexport const CHART_MODAL = {\n  MIN_WIDTH: 960,\n  MIN_HEIGHT: 480,\n  MAX_WIDTH: 2400,\n  MAX_HEIGHT: 1300,\n  DEFAULT_WIDTH: 1500,\n  DEFAULT_HEIGHT: 820,\n  FALLBACK_WIDTH: 1400,\n  FALLBACK_HEIGHT: 800,\n} as const;\n"],"names":[],"mappings":";;AAMO,MAAM,YAAY;AAAA,EACvB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAGO,MAAM,cAAc;AAGpB,MAAM,mBAAmB;AAGzB,MAAM,gBAAgB;AAGtB,MAAM,kBAAkB;AAGxB,MAAM,sBAAsB;AAG5B,MAAM,cAAc;AAAA,EACzB,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,iBAAiB;AACnB;;;;;;;;"}
+{"version":3,"file":"index30.cjs","sources":["../src/composites/SingleSelectDropdown/SingleSelectDropdown.tsx"],"sourcesContent":["import { useState, useRef, useMemo, useCallback } 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 styles from './SingleSelectDropdown.module.css';\n\nexport interface SingleSelectOption {\n  value: string;\n  label?: string;\n  count?: number;\n}\n\nexport interface SingleSelectDropdownProps {\n  /** Label displayed on the trigger. */\n  label: string;\n  /** Available options. */\n  options: SingleSelectOption[];\n  /** Currently selected value (controlled). `null` means no selection. */\n  selected: string | null;\n  /** Called when the user selects an option. */\n  onSelect: (value: string) => void;\n  /** Override the trigger value label. */\n  customTriggerLabel?: string;\n  /** Called when the user clears the selection. */\n  onClear?: () => void;\n  /** Show clear button when a value is selected. */\n  showClearButton?: boolean;\n}\n\nexport const SingleSelectDropdown = ({\n  label,\n  options,\n  selected,\n  onSelect,\n  customTriggerLabel,\n  onClear,\n  showClearButton = false,\n}: SingleSelectDropdownProps) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const [searchTerm, setSearchTerm] = useState('');\n  const [focusedIndex, setFocusedIndex] = useState(-1);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const listRef = useRef<HTMLDivElement>(null);\n\n  const close = useCallback(() => {\n    setIsOpen(false);\n    setSearchTerm('');\n    setFocusedIndex(-1);\n  }, []);\n\n  useClickOutside(containerRef, close);\n  useEscapeKey(close, isOpen);\n\n  const filteredOptions = useMemo(() => {\n    if (!searchTerm.trim()) return options;\n    const term = searchTerm.trim().toLowerCase();\n    return options.filter((opt) => {\n      const lbl = opt.label ?? opt.value;\n      return lbl.toLowerCase().includes(term) || opt.value.toLowerCase().includes(term);\n    });\n  }, [options, searchTerm]);\n\n  const handleSelect = (value: string) => {\n    onSelect(value);\n    close();\n  };\n\n  const handleClear = (e: React.MouseEvent) => {\n    e.stopPropagation();\n    onClear?.();\n    close();\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    if (!isOpen) return;\n\n    if (e.key === 'ArrowDown') {\n      e.preventDefault();\n      setFocusedIndex((prev) => Math.min(prev + 1, filteredOptions.length - 1));\n    } else if (e.key === 'ArrowUp') {\n      e.preventDefault();\n      setFocusedIndex((prev) => Math.max(prev - 1, 0));\n    } else if (e.key === 'Enter' && focusedIndex >= 0 && focusedIndex < filteredOptions.length) {\n      e.preventDefault();\n      handleSelect(filteredOptions[focusedIndex].value);\n    }\n  };\n\n  const selectedOption = options.find((o) => o.value === selected);\n  const displayLabel = customTriggerLabel || selectedOption?.label || selectedOption?.value || 'Select';\n  const showClear = showClearButton && selected !== null;\n\n  return (\n    <div className={styles.root} ref={containerRef} onKeyDown={handleKeyDown}>\n      <button\n        type=\"button\"\n        className={clsx(styles.trigger, { [styles.active]: isOpen })}\n        onClick={() => {\n          setIsOpen((prev) => !prev);\n          setFocusedIndex(-1);\n        }}\n        aria-expanded={isOpen}\n        aria-haspopup=\"listbox\"\n      >\n        <div className={styles.triggerContent}>\n          <svg className={styles.chevron} width={ICON_SIZE.MD} height={ICON_SIZE.MD} viewBox={SVG_VIEWBOX} fill=\"none\" stroke=\"currentColor\" strokeWidth={SVG_STROKE_WIDTH} strokeLinecap=\"round\" strokeLinejoin=\"round\">\n            <polyline points=\"6 9 12 15 18 9\" />\n          </svg>\n          <span className={styles.label}>{label}</span>\n          <span className={styles.value}>{displayLabel}</span>\n          {showClear && (\n            <span\n              className={styles.clear}\n              onClick={handleClear}\n              role=\"button\"\n              tabIndex={0}\n              aria-label={`Clear ${label}`}\n              onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); handleClear(e as unknown as React.MouseEvent); } }}\n            >\n              <svg width={ICON_SIZE.SM} height={ICON_SIZE.SM} viewBox={SVG_VIEWBOX} fill=\"none\" stroke=\"currentColor\" strokeWidth={SVG_STROKE_WIDTH} strokeLinecap=\"round\" strokeLinejoin=\"round\">\n                <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n                <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n              </svg>\n            </span>\n          )}\n        </div>\n      </button>\n\n      {isOpen && (\n        <div className={styles.panel} role=\"listbox\" ref={listRef}>\n          <div className={styles.searchContainer}>\n            <input\n              type=\"search\"\n              className={styles.search}\n              placeholder={`Search ${label.toLowerCase()}`}\n              value={searchTerm}\n              onChange={(e) => {\n                setSearchTerm(e.target.value);\n                setFocusedIndex(-1);\n              }}\n              onClick={(e) => e.stopPropagation()}\n            />\n          </div>\n          <div className={styles.list}>\n            {filteredOptions.length === 0 && (\n              <div className={styles.noResults}>No matches found</div>\n            )}\n            {filteredOptions.map((opt, i) => {\n              const isSelected = opt.value === selected;\n              const isFocused = i === focusedIndex;\n              return (\n                <button\n                  key={opt.value}\n                  type=\"button\"\n                  className={clsx(styles.option, {\n                    [styles.selected]: isSelected,\n                    [styles.focused]: isFocused,\n                  })}\n                  onClick={() => handleSelect(opt.value)}\n                  role=\"option\"\n                  aria-selected={isSelected}\n                >\n                  <span className={styles.optionLabel}>\n                    {opt.label ?? opt.value}\n                    {opt.count !== undefined && (\n                      <span className={styles.optionCount}>{opt.count}</span>\n                    )}\n                  </span>\n                </button>\n              );\n            })}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["useState","useRef","useCallback","useClickOutside","useEscapeKey","useMemo","jsxs","styles","jsx","clsx","ICON_SIZE","SVG_VIEWBOX","SVG_STROKE_WIDTH"],"mappings":"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"}

package/dist/index30.js

@@ -1,30 +1,147 @@
-const ICON_SIZE = {
-  SM: 14,
-  MD: 16,
-  LG: 18
-};
-const SVG_VIEWBOX = "0 0 24 24";
-const SVG_STROKE_WIDTH = 2;
-const KEYBOARD_STEP = 2;
-const VIEWPORT_MARGIN = 32;
-const CONTEXT_MENU_MARGIN = 10;
-const CHART_MODAL = {
-  MIN_WIDTH: 960,
-  MIN_HEIGHT: 480,
-  MAX_WIDTH: 2400,
-  MAX_HEIGHT: 1300,
-  DEFAULT_WIDTH: 1500,
-  DEFAULT_HEIGHT: 820,
-  FALLBACK_WIDTH: 1400,
-  FALLBACK_HEIGHT: 800
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useRef, useCallback, useMemo } from "react";
+import { clsx } from "./index35.js";
+import { useClickOutside } from "./index3.js";
+import { useEscapeKey } from "./index4.js";
+import { SVG_STROKE_WIDTH, SVG_VIEWBOX, ICON_SIZE } from "./index38.js";
+import styles from "./index47.js";
+const SingleSelectDropdown = ({
+  label,
+  options,
+  selected,
+  onSelect,
+  customTriggerLabel,
+  onClear,
+  showClearButton = false
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [focusedIndex, setFocusedIndex] = useState(-1);
+  const containerRef = useRef(null);
+  const listRef = useRef(null);
+  const close = useCallback(() => {
+    setIsOpen(false);
+    setSearchTerm("");
+    setFocusedIndex(-1);
+  }, []);
+  useClickOutside(containerRef, close);
+  useEscapeKey(close, isOpen);
+  const filteredOptions = useMemo(() => {
+    if (!searchTerm.trim()) return options;
+    const term = searchTerm.trim().toLowerCase();
+    return options.filter((opt) => {
+      const lbl = opt.label ?? opt.value;
+      return lbl.toLowerCase().includes(term) || opt.value.toLowerCase().includes(term);
+    });
+  }, [options, searchTerm]);
+  const handleSelect = (value) => {
+    onSelect(value);
+    close();
+  };
+  const handleClear = (e) => {
+    e.stopPropagation();
+    onClear == null ? void 0 : onClear();
+    close();
+  };
+  const handleKeyDown = (e) => {
+    if (!isOpen) return;
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setFocusedIndex((prev) => Math.min(prev + 1, filteredOptions.length - 1));
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setFocusedIndex((prev) => Math.max(prev - 1, 0));
+    } else if (e.key === "Enter" && focusedIndex >= 0 && focusedIndex < filteredOptions.length) {
+      e.preventDefault();
+      handleSelect(filteredOptions[focusedIndex].value);
+    }
+  };
+  const selectedOption = options.find((o) => o.value === selected);
+  const displayLabel = customTriggerLabel || (selectedOption == null ? void 0 : selectedOption.label) || (selectedOption == null ? void 0 : selectedOption.value) || "Select";
+  const showClear = showClearButton && selected !== null;
+  return /* @__PURE__ */ jsxs("div", { className: styles.root, ref: containerRef, onKeyDown: handleKeyDown, children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: clsx(styles.trigger, { [styles.active]: isOpen }),
+        onClick: () => {
+          setIsOpen((prev) => !prev);
+          setFocusedIndex(-1);
+        },
+        "aria-expanded": isOpen,
+        "aria-haspopup": "listbox",
+        children: /* @__PURE__ */ jsxs("div", { className: styles.triggerContent, children: [
+          /* @__PURE__ */ jsx("svg", { className: styles.chevron, width: ICON_SIZE.MD, height: ICON_SIZE.MD, viewBox: SVG_VIEWBOX, fill: "none", stroke: "currentColor", strokeWidth: SVG_STROKE_WIDTH, strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("polyline", { points: "6 9 12 15 18 9" }) }),
+          /* @__PURE__ */ jsx("span", { className: styles.label, children: label }),
+          /* @__PURE__ */ jsx("span", { className: styles.value, children: displayLabel }),
+          showClear && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: styles.clear,
+              onClick: handleClear,
+              role: "button",
+              tabIndex: 0,
+              "aria-label": `Clear ${label}`,
+              onKeyDown: (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  handleClear(e);
+                }
+              },
+              children: /* @__PURE__ */ jsxs("svg", { width: ICON_SIZE.SM, height: ICON_SIZE.SM, viewBox: SVG_VIEWBOX, fill: "none", stroke: "currentColor", strokeWidth: SVG_STROKE_WIDTH, strokeLinecap: "round", strokeLinejoin: "round", children: [
+                /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+              ] })
+            }
+          )
+        ] })
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsxs("div", { className: styles.panel, role: "listbox", ref: listRef, children: [
+      /* @__PURE__ */ jsx("div", { className: styles.searchContainer, children: /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "search",
+          className: styles.search,
+          placeholder: `Search ${label.toLowerCase()}`,
+          value: searchTerm,
+          onChange: (e) => {
+            setSearchTerm(e.target.value);
+            setFocusedIndex(-1);
+          },
+          onClick: (e) => e.stopPropagation()
+        }
+      ) }),
+      /* @__PURE__ */ jsxs("div", { className: styles.list, children: [
+        filteredOptions.length === 0 && /* @__PURE__ */ jsx("div", { className: styles.noResults, children: "No matches found" }),
+        filteredOptions.map((opt, i) => {
+          const isSelected = opt.value === selected;
+          const isFocused = i === focusedIndex;
+          return /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: clsx(styles.option, {
+                [styles.selected]: isSelected,
+                [styles.focused]: isFocused
+              }),
+              onClick: () => handleSelect(opt.value),
+              role: "option",
+              "aria-selected": isSelected,
+              children: /* @__PURE__ */ jsxs("span", { className: styles.optionLabel, children: [
+                opt.label ?? opt.value,
+                opt.count !== void 0 && /* @__PURE__ */ jsx("span", { className: styles.optionCount, children: opt.count })
+              ] })
+            },
+            opt.value
+          );
+        })
+      ] })
+    ] })
+  ] });
 };
 export {
-  CHART_MODAL,
-  CONTEXT_MENU_MARGIN,
-  ICON_SIZE,
-  KEYBOARD_STEP,
-  SVG_STROKE_WIDTH,
-  SVG_VIEWBOX,
-  VIEWPORT_MARGIN
+  SingleSelectDropdown
 };
 //# sourceMappingURL=index30.js.map

package/dist/index30.js.map

@@ -1 +1 @@
-{"version":3,"file":"index30.js","sources":["../src/constants.ts"],"sourcesContent":["/**\n * Shared constants for the component library.\n * Centralises magic numbers used across components.\n */\n\n/** SVG icon rendered sizes (px — used as HTML/SVG attributes, not CSS). */\nexport const ICON_SIZE = {\n  SM: 14,\n  MD: 16,\n  LG: 18,\n} as const;\n\n/** Standard SVG viewBox for 24×24 icon grid. */\nexport const SVG_VIEWBOX = '0 0 24 24';\n\n/** Standard SVG stroke width. */\nexport const SVG_STROKE_WIDTH = 2;\n\n/** Keyboard accessibility step (percentage points per arrow press). */\nexport const KEYBOARD_STEP = 2;\n\n/** Viewport safety margin (px — used in JS calculations with DOM APIs). */\nexport const VIEWPORT_MARGIN = 32;\n\n/** ContextMenu viewport margin (px). */\nexport const CONTEXT_MENU_MARGIN = 10;\n\n/** ChartExpandModal dimension constraints (px — used with window.innerWidth). */\nexport const CHART_MODAL = {\n  MIN_WIDTH: 960,\n  MIN_HEIGHT: 480,\n  MAX_WIDTH: 2400,\n  MAX_HEIGHT: 1300,\n  DEFAULT_WIDTH: 1500,\n  DEFAULT_HEIGHT: 820,\n  FALLBACK_WIDTH: 1400,\n  FALLBACK_HEIGHT: 800,\n} as const;\n"],"names":[],"mappings":"AAMO,MAAM,YAAY;AAAA,EACvB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAGO,MAAM,cAAc;AAGpB,MAAM,mBAAmB;AAGzB,MAAM,gBAAgB;AAGtB,MAAM,kBAAkB;AAGxB,MAAM,sBAAsB;AAG5B,MAAM,cAAc;AAAA,EACzB,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,iBAAiB;AACnB;"}
+{"version":3,"file":"index30.js","sources":["../src/composites/SingleSelectDropdown/SingleSelectDropdown.tsx"],"sourcesContent":["import { useState, useRef, useMemo, useCallback } 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 styles from './SingleSelectDropdown.module.css';\n\nexport interface SingleSelectOption {\n  value: string;\n  label?: string;\n  count?: number;\n}\n\nexport interface SingleSelectDropdownProps {\n  /** Label displayed on the trigger. */\n  label: string;\n  /** Available options. */\n  options: SingleSelectOption[];\n  /** Currently selected value (controlled). `null` means no selection. */\n  selected: string | null;\n  /** Called when the user selects an option. */\n  onSelect: (value: string) => void;\n  /** Override the trigger value label. */\n  customTriggerLabel?: string;\n  /** Called when the user clears the selection. */\n  onClear?: () => void;\n  /** Show clear button when a value is selected. */\n  showClearButton?: boolean;\n}\n\nexport const SingleSelectDropdown = ({\n  label,\n  options,\n  selected,\n  onSelect,\n  customTriggerLabel,\n  onClear,\n  showClearButton = false,\n}: SingleSelectDropdownProps) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const [searchTerm, setSearchTerm] = useState('');\n  const [focusedIndex, setFocusedIndex] = useState(-1);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const listRef = useRef<HTMLDivElement>(null);\n\n  const close = useCallback(() => {\n    setIsOpen(false);\n    setSearchTerm('');\n    setFocusedIndex(-1);\n  }, []);\n\n  useClickOutside(containerRef, close);\n  useEscapeKey(close, isOpen);\n\n  const filteredOptions = useMemo(() => {\n    if (!searchTerm.trim()) return options;\n    const term = searchTerm.trim().toLowerCase();\n    return options.filter((opt) => {\n      const lbl = opt.label ?? opt.value;\n      return lbl.toLowerCase().includes(term) || opt.value.toLowerCase().includes(term);\n    });\n  }, [options, searchTerm]);\n\n  const handleSelect = (value: string) => {\n    onSelect(value);\n    close();\n  };\n\n  const handleClear = (e: React.MouseEvent) => {\n    e.stopPropagation();\n    onClear?.();\n    close();\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    if (!isOpen) return;\n\n    if (e.key === 'ArrowDown') {\n      e.preventDefault();\n      setFocusedIndex((prev) => Math.min(prev + 1, filteredOptions.length - 1));\n    } else if (e.key === 'ArrowUp') {\n      e.preventDefault();\n      setFocusedIndex((prev) => Math.max(prev - 1, 0));\n    } else if (e.key === 'Enter' && focusedIndex >= 0 && focusedIndex < filteredOptions.length) {\n      e.preventDefault();\n      handleSelect(filteredOptions[focusedIndex].value);\n    }\n  };\n\n  const selectedOption = options.find((o) => o.value === selected);\n  const displayLabel = customTriggerLabel || selectedOption?.label || selectedOption?.value || 'Select';\n  const showClear = showClearButton && selected !== null;\n\n  return (\n    <div className={styles.root} ref={containerRef} onKeyDown={handleKeyDown}>\n      <button\n        type=\"button\"\n        className={clsx(styles.trigger, { [styles.active]: isOpen })}\n        onClick={() => {\n          setIsOpen((prev) => !prev);\n          setFocusedIndex(-1);\n        }}\n        aria-expanded={isOpen}\n        aria-haspopup=\"listbox\"\n      >\n        <div className={styles.triggerContent}>\n          <svg className={styles.chevron} width={ICON_SIZE.MD} height={ICON_SIZE.MD} viewBox={SVG_VIEWBOX} fill=\"none\" stroke=\"currentColor\" strokeWidth={SVG_STROKE_WIDTH} strokeLinecap=\"round\" strokeLinejoin=\"round\">\n            <polyline points=\"6 9 12 15 18 9\" />\n          </svg>\n          <span className={styles.label}>{label}</span>\n          <span className={styles.value}>{displayLabel}</span>\n          {showClear && (\n            <span\n              className={styles.clear}\n              onClick={handleClear}\n              role=\"button\"\n              tabIndex={0}\n              aria-label={`Clear ${label}`}\n              onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); handleClear(e as unknown as React.MouseEvent); } }}\n            >\n              <svg width={ICON_SIZE.SM} height={ICON_SIZE.SM} viewBox={SVG_VIEWBOX} fill=\"none\" stroke=\"currentColor\" strokeWidth={SVG_STROKE_WIDTH} strokeLinecap=\"round\" strokeLinejoin=\"round\">\n                <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n                <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n              </svg>\n            </span>\n          )}\n        </div>\n      </button>\n\n      {isOpen && (\n        <div className={styles.panel} role=\"listbox\" ref={listRef}>\n          <div className={styles.searchContainer}>\n            <input\n              type=\"search\"\n              className={styles.search}\n              placeholder={`Search ${label.toLowerCase()}`}\n              value={searchTerm}\n              onChange={(e) => {\n                setSearchTerm(e.target.value);\n                setFocusedIndex(-1);\n              }}\n              onClick={(e) => e.stopPropagation()}\n            />\n          </div>\n          <div className={styles.list}>\n            {filteredOptions.length === 0 && (\n              <div className={styles.noResults}>No matches found</div>\n            )}\n            {filteredOptions.map((opt, i) => {\n              const isSelected = opt.value === selected;\n              const isFocused = i === focusedIndex;\n              return (\n                <button\n                  key={opt.value}\n                  type=\"button\"\n                  className={clsx(styles.option, {\n                    [styles.selected]: isSelected,\n                    [styles.focused]: isFocused,\n                  })}\n                  onClick={() => handleSelect(opt.value)}\n                  role=\"option\"\n                  aria-selected={isSelected}\n                >\n                  <span className={styles.optionLabel}>\n                    {opt.label ?? opt.value}\n                    {opt.count !== undefined && (\n                      <span className={styles.optionCount}>{opt.count}</span>\n                    )}\n                  </span>\n                </button>\n              );\n            })}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/index31.cjs

@@ -1,60 +1,109 @@
 "use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const root = "krc-root--s1oD";
-const trigger = "krc-trigger-WMlNa";
-const active = "krc-active-O65lj";
-const triggerContent = "krc-triggerContent-JipmE";
-const chevron = "krc-chevron-J2Zsy";
-const label = "krc-label-lZlV-";
-const value = "krc-value-HsQrC";
-const clear = "krc-clear-bsi5j";
-const panel = "krc-panel--0odx";
-const searchContainer = "krc-searchContainer-WRS-U";
-const search = "krc-search-Dh3pY";
-const list = "krc-list-1RUtr";
-const noResults = "krc-noResults-Hin1U";
-const option = "krc-option-0mFGi";
-const focused = "krc-focused-0-7tE";
-const selected = "krc-selected-1zIqI";
-const optionLabel = "krc-optionLabel-pj-hL";
-const optionCount = "krc-optionCount-rVlCP";
-const styles = {
-  root,
-  trigger,
-  active,
-  triggerContent,
-  chevron,
-  label,
-  value,
-  clear,
-  panel,
-  searchContainer,
-  search,
-  list,
-  noResults,
-  option,
-  focused,
-  selected,
-  optionLabel,
-  optionCount
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const ReactECharts = require("echarts-for-react");
+const clsx = require("./index35.cjs");
+const constants = require("./index38.cjs");
+const buildChartOptions = require("./index56.cjs");
+const StackedBarChartCard_module = require("./index57.cjs");
+const CHART_TYPE_LABELS = {
+  bar: "Bar",
+  pie: "Pie",
+  sunburst: "Sunburst"
 };
-exports.active = active;
-exports.chevron = chevron;
-exports.clear = clear;
-exports.default = styles;
-exports.focused = focused;
-exports.label = label;
-exports.list = list;
-exports.noResults = noResults;
-exports.option = option;
-exports.optionCount = optionCount;
-exports.optionLabel = optionLabel;
-exports.panel = panel;
-exports.root = root;
-exports.search = search;
-exports.searchContainer = searchContainer;
-exports.selected = selected;
-exports.trigger = trigger;
-exports.triggerContent = triggerContent;
-exports.value = value;
+const CHART_TYPES = ["bar", "pie", "sunburst"];
+const StackedBarChartCard = ({
+  title,
+  data,
+  subtitle,
+  chartType = "bar",
+  isLoading = false,
+  error,
+  onRetry,
+  onChartReady,
+  onSelectCategory,
+  // onAnalyzeRootCause — reserved for context menu integration
+  maxCategories = constants.MAX_CATEGORIES,
+  maxSubcategories = constants.MAX_SUBCATEGORIES,
+  showOthersBucket = true,
+  invertAxis = false,
+  hideLegend = false,
+  enableScroll = false,
+  toolbar,
+  actions,
+  className
+}) => {
+  const { categories, series } = react.useMemo(
+    () => buildChartOptions.aggregateData(data, maxCategories, maxSubcategories, showOthersBucket),
+    [data, maxCategories, maxSubcategories, showOthersBucket]
+  );
+  const option = react.useMemo(() => {
+    switch (chartType) {
+      case "pie":
+        return buildChartOptions.buildPieOption(categories, series, hideLegend);
+      case "sunburst":
+        return buildChartOptions.buildSunburstOption(categories, series);
+      default:
+        return buildChartOptions.buildBarOption(categories, series, invertAxis, hideLegend, enableScroll);
+    }
+  }, [chartType, categories, series, invertAxis, hideLegend, enableScroll]);
+  const handleChartReady = react.useCallback(
+    (instance) => {
+      onChartReady == null ? void 0 : onChartReady(instance);
+    },
+    [onChartReady]
+  );
+  const handleChartClick = react.useCallback(
+    (params) => {
+      if (!onSelectCategory || !params.name) return;
+      onSelectCategory({
+        category: params.name,
+        subCategory: params.seriesName ?? null
+      });
+    },
+    [onSelectCategory]
+  );
+  const hasData = data.length > 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx.clsx(StackedBarChartCard_module.default.root, className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: StackedBarChartCard_module.default.header, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: StackedBarChartCard_module.default.headerLeft, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: StackedBarChartCard_module.default.title, children: title }),
+        subtitle && /* @__PURE__ */ jsxRuntime.jsx("div", { className: StackedBarChartCard_module.default.subtitle, children: subtitle })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: StackedBarChartCard_module.default.headerRight, children: [
+        toolbar && /* @__PURE__ */ jsxRuntime.jsx("div", { className: StackedBarChartCard_module.default.toolbar, children: toolbar }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: StackedBarChartCard_module.default.chartTypeToggle, children: CHART_TYPES.map((type) => /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: chartType === type ? StackedBarChartCard_module.default.active : void 0,
+            "aria-pressed": chartType === type,
+            disabled: true,
+            children: CHART_TYPE_LABELS[type]
+          },
+          type
+        )) }),
+        actions
+      ] })
+    ] }),
+    isLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: StackedBarChartCard_module.default.loading, children: "Loading chart data..." }),
+    !isLoading && error && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: StackedBarChartCard_module.default.error, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: error }),
+      onRetry && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: StackedBarChartCard_module.default.retryButton, onClick: onRetry, children: "Retry" })
+    ] }),
+    !isLoading && !error && !hasData && /* @__PURE__ */ jsxRuntime.jsx("div", { className: StackedBarChartCard_module.default.empty, children: "No data available" }),
+    !isLoading && !error && hasData && /* @__PURE__ */ jsxRuntime.jsx("div", { className: StackedBarChartCard_module.default.chartContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+      ReactECharts,
+      {
+        option,
+        style: { height: "100%", width: "100%" },
+        onChartReady: handleChartReady,
+        onEvents: { click: handleChartClick },
+        notMerge: true
+      }
+    ) })
+  ] });
+};
+exports.StackedBarChartCard = StackedBarChartCard;
 //# sourceMappingURL=index31.cjs.map

package/dist/index31.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index31.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index31.cjs","sources":["../src/charts/StackedBarChartCard/StackedBarChartCard.tsx"],"sourcesContent":["import { useMemo, useCallback } from 'react';\nimport ReactECharts from 'echarts-for-react';\nimport clsx from 'clsx';\nimport type { EChartsInstance } from '../../types/chart.types';\nimport { MAX_CATEGORIES, MAX_SUBCATEGORIES } from '../../constants';\nimport type { StackedBarChartCardProps, StackedBarChartType } from './StackedBarChartCard.types';\nimport { aggregateData, buildBarOption, buildPieOption, buildSunburstOption } from './buildChartOptions';\nimport styles from './StackedBarChartCard.module.css';\n\n/** Label map for chart type toggle buttons. */\nconst CHART_TYPE_LABELS: Record<StackedBarChartType, string> = {\n  bar: 'Bar',\n  pie: 'Pie',\n  sunburst: 'Sunburst',\n};\n\n/** All available chart types for the toggle group. */\nconst CHART_TYPES: StackedBarChartType[] = ['bar', 'pie', 'sunburst'];\n\nexport const StackedBarChartCard = ({\n  title,\n  data,\n  subtitle,\n  chartType = 'bar',\n  isLoading = false,\n  error,\n  onRetry,\n  onChartReady,\n  onSelectCategory,\n  // onAnalyzeRootCause — reserved for context menu integration\n  maxCategories = MAX_CATEGORIES,\n  maxSubcategories = MAX_SUBCATEGORIES,\n  showOthersBucket = true,\n  invertAxis = false,\n  hideLegend = false,\n  enableScroll = false,\n  toolbar,\n  actions,\n  className,\n}: StackedBarChartCardProps) => {\n  const { categories, series } = useMemo(\n    () => aggregateData(data, maxCategories, maxSubcategories, showOthersBucket),\n    [data, maxCategories, maxSubcategories, showOthersBucket],\n  );\n\n  const option = useMemo(() => {\n    switch (chartType) {\n      case 'pie':\n        return buildPieOption(categories, series, hideLegend);\n      case 'sunburst':\n        return buildSunburstOption(categories, series);\n      default:\n        return buildBarOption(categories, series, invertAxis, hideLegend, enableScroll);\n    }\n  }, [chartType, categories, series, invertAxis, hideLegend, enableScroll]);\n\n  const handleChartReady = useCallback(\n    (instance: EChartsInstance) => {\n      onChartReady?.(instance);\n    },\n    [onChartReady],\n  );\n\n  const handleChartClick = useCallback(\n    (params: { name?: string; seriesName?: string }) => {\n      if (!onSelectCategory || !params.name) return;\n      onSelectCategory({\n        category: params.name,\n        subCategory: params.seriesName ?? null,\n      });\n    },\n    [onSelectCategory],\n  );\n\n  const hasData = data.length > 0;\n\n  return (\n    <div className={clsx(styles.root, className)}>\n      <div className={styles.header}>\n        <div className={styles.headerLeft}>\n          <h3 className={styles.title}>{title}</h3>\n          {subtitle && <div className={styles.subtitle}>{subtitle}</div>}\n        </div>\n        <div className={styles.headerRight}>\n          {toolbar && <div className={styles.toolbar}>{toolbar}</div>}\n          <div className={styles.chartTypeToggle}>\n            {CHART_TYPES.map((type) => (\n              <button\n                key={type}\n                type=\"button\"\n                className={chartType === type ? styles.active : undefined}\n                aria-pressed={chartType === type}\n                disabled\n              >\n                {CHART_TYPE_LABELS[type]}\n              </button>\n            ))}\n          </div>\n          {actions}\n        </div>\n      </div>\n\n      {isLoading && <div className={styles.loading}>Loading chart data...</div>}\n\n      {!isLoading && error && (\n        <div className={styles.error}>\n          <span>{error}</span>\n          {onRetry && (\n            <button type=\"button\" className={styles.retryButton} onClick={onRetry}>\n              Retry\n            </button>\n          )}\n        </div>\n      )}\n\n      {!isLoading && !error && !hasData && (\n        <div className={styles.empty}>No data available</div>\n      )}\n\n      {!isLoading && !error && hasData && (\n        <div className={styles.chartContainer}>\n          <ReactECharts\n            option={option}\n            style={{ height: '100%', width: '100%' }}\n            onChartReady={handleChartReady}\n            onEvents={{ click: handleChartClick }}\n            notMerge\n          />\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["MAX_CATEGORIES","MAX_SUBCATEGORIES","useMemo","aggregateData","buildPieOption","buildSunburstOption","buildBarOption","useCallback","clsx","styles","jsxs","jsx"],"mappings":"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"}