@ktnpm_devops/react-component 0.3.0 → 0.4.0

package/dist/index32.cjs

@@ -2,108 +2,80 @@
 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("./index36.cjs");
-const constants = require("./index39.cjs");
-const buildChartOptions = require("./index55.cjs");
-const StackedBarChartCard_module = require("./index56.cjs");
-const CHART_TYPE_LABELS = {
-  bar: "Bar",
-  pie: "Pie",
-  sunburst: "Sunburst"
-};
-const CHART_TYPES = ["bar", "pie", "sunburst"];
-const StackedBarChartCard = ({
+const clsx = require("./index38.cjs");
+const constants = require("./index48.cjs");
+const Sidebar_module = require("./index50.cjs");
+const SidebarContext = react.createContext({ isCollapsed: false });
+const useSidebarContext = () => react.useContext(SidebarContext);
+const SidebarSection = ({
   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,
+  children,
+  collapsible = false,
+  defaultCollapsed = false
+}) => {
+  const { isCollapsed: sidebarCollapsed } = useSidebarContext();
+  const [sectionCollapsed, setSectionCollapsed] = react.useState(defaultCollapsed);
+  const titleId = react.useId();
+  const isOpen = !collapsible || !sectionCollapsed;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Sidebar_module.default.section, role: "group", "aria-labelledby": title ? titleId : void 0, children: [
+    title && !sidebarCollapsed && (collapsible ? /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        id: titleId,
+        type: "button",
+        className: Sidebar_module.default.sectionToggle,
+        onClick: () => setSectionCollapsed((prev) => !prev),
+        "aria-expanded": isOpen,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: Sidebar_module.default.sectionTitle, children: title }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx.clsx(Sidebar_module.default.sectionChevron, { [Sidebar_module.default.sectionChevronOpen]: isOpen }), children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: 12, height: 12, viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 4.5L6 7.5L9 4.5", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }) }) })
+        ]
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsx("span", { id: titleId, className: Sidebar_module.default.sectionTitle, children: title })),
+    isOpen && /* @__PURE__ */ jsxRuntime.jsx("div", { className: Sidebar_module.default.sectionItems, children })
+  ] });
+};
+SidebarSection.displayName = "Sidebar.Section";
+const SidebarRoot = ({
+  isCollapsed = false,
+  onToggleCollapse,
+  width = constants.SIDEBAR.WIDTH,
+  collapsedWidth = constants.SIDEBAR.COLLAPSED_WIDTH,
+  header,
+  footer,
+  children,
   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(
+  const currentWidth = isCollapsed ? collapsedWidth : width;
+  return /* @__PURE__ */ jsxRuntime.jsx(SidebarContext.Provider, { value: { isCollapsed }, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "nav",
+    {
+      className: clsx.clsx(Sidebar_module.default.root, { [Sidebar_module.default.collapsed]: isCollapsed }, className),
+      style: { width: `${currentWidth}px` },
+      "aria-label": "Main navigation",
+      children: [
+        header && /* @__PURE__ */ jsxRuntime.jsx("div", { className: Sidebar_module.default.header, children: header }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: Sidebar_module.default.body, children }),
+        footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: Sidebar_module.default.footer, children: footer }),
+        onToggleCollapse && /* @__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
-      }
-    ) })
-  ] });
+            className: Sidebar_module.default.toggle,
+            onClick: onToggleCollapse,
+            "aria-expanded": !isCollapsed,
+            "aria-label": "Toggle sidebar",
+            children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: isCollapsed ? /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 3L11 8L6 13", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }) : /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10 3L5 8L10 13", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }) })
+          }
+        )
+      ]
+    }
+  ) });
 };
-exports.StackedBarChartCard = StackedBarChartCard;
+SidebarRoot.displayName = "Sidebar";
+const Sidebar = Object.assign(SidebarRoot, {
+  Section: SidebarSection
+});
+exports.Sidebar = Sidebar;
+exports.useSidebarContext = useSidebarContext;
 //# sourceMappingURL=index32.cjs.map

package/dist/index32.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index32.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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"}
+{"version":3,"file":"index32.cjs","sources":["../src/composites/Sidebar/Sidebar.tsx"],"sourcesContent":["import { createContext, useContext, useId, useState } from 'react';\nimport clsx from 'clsx';\nimport { SIDEBAR } from '../../constants';\nimport type { SidebarProps, SidebarSectionProps } from './Sidebar.types';\nimport styles from './Sidebar.module.css';\n\ninterface SidebarContextValue {\n  isCollapsed: boolean;\n}\n\nconst SidebarContext = createContext<SidebarContextValue>({ isCollapsed: false });\n\n/** Hook to read sidebar collapsed state from context. */\nexport const useSidebarContext = () => useContext(SidebarContext);\n\n/* ------------------------------------------------------------------ */\n/*  Sidebar.Section                                                    */\n/* ------------------------------------------------------------------ */\n\nconst SidebarSection = ({\n  title,\n  children,\n  collapsible = false,\n  defaultCollapsed = false,\n}: SidebarSectionProps) => {\n  const { isCollapsed: sidebarCollapsed } = useSidebarContext();\n  const [sectionCollapsed, setSectionCollapsed] = useState(defaultCollapsed);\n  const titleId = useId();\n\n  const isOpen = !collapsible || !sectionCollapsed;\n\n  return (\n    <div className={styles.section} role=\"group\" aria-labelledby={title ? titleId : undefined}>\n      {title && !sidebarCollapsed && (\n        collapsible ? (\n          <button\n            id={titleId}\n            type=\"button\"\n            className={styles.sectionToggle}\n            onClick={() => setSectionCollapsed((prev) => !prev)}\n            aria-expanded={isOpen}\n          >\n            <span className={styles.sectionTitle}>{title}</span>\n            <span className={clsx(styles.sectionChevron, { [styles.sectionChevronOpen]: isOpen })}>\n              <svg width={12} height={12} viewBox=\"0 0 12 12\" fill=\"none\" aria-hidden=\"true\">\n                <path d=\"M3 4.5L6 7.5L9 4.5\" stroke=\"currentColor\" strokeWidth={1.5} strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n              </svg>\n            </span>\n          </button>\n        ) : (\n          <span id={titleId} className={styles.sectionTitle}>\n            {title}\n          </span>\n        )\n      )}\n      {isOpen && <div className={styles.sectionItems}>{children}</div>}\n    </div>\n  );\n};\n\nSidebarSection.displayName = 'Sidebar.Section';\n\n/* ------------------------------------------------------------------ */\n/*  Sidebar                                                            */\n/* ------------------------------------------------------------------ */\n\nconst SidebarRoot = ({\n  isCollapsed = false,\n  onToggleCollapse,\n  width = SIDEBAR.WIDTH,\n  collapsedWidth = SIDEBAR.COLLAPSED_WIDTH,\n  header,\n  footer,\n  children,\n  className,\n}: SidebarProps) => {\n  const currentWidth = isCollapsed ? collapsedWidth : width;\n\n  return (\n    <SidebarContext.Provider value={{ isCollapsed }}>\n      <nav\n        className={clsx(styles.root, { [styles.collapsed]: isCollapsed }, className)}\n        style={{ width: `${currentWidth}px` }}\n        aria-label=\"Main navigation\"\n      >\n        {header && <div className={styles.header}>{header}</div>}\n\n        <div className={styles.body}>{children}</div>\n\n        {footer && <div className={styles.footer}>{footer}</div>}\n\n        {onToggleCollapse && (\n          <button\n            type=\"button\"\n            className={styles.toggle}\n            onClick={onToggleCollapse}\n            aria-expanded={!isCollapsed}\n            aria-label=\"Toggle sidebar\"\n          >\n            <svg width={16} height={16} viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\n              {isCollapsed ? (\n                <path d=\"M6 3L11 8L6 13\" stroke=\"currentColor\" strokeWidth={1.5} strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n              ) : (\n                <path d=\"M10 3L5 8L10 13\" stroke=\"currentColor\" strokeWidth={1.5} strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n              )}\n            </svg>\n          </button>\n        )}\n      </nav>\n    </SidebarContext.Provider>\n  );\n};\n\nSidebarRoot.displayName = 'Sidebar';\n\n/** Compound Sidebar component. */\nexport const Sidebar = Object.assign(SidebarRoot, {\n  Section: SidebarSection,\n});\n"],"names":["createContext","useContext","useState","useId","jsxs","styles","jsx","clsx","SIDEBAR"],"mappings":"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"}

package/dist/index32.js

@@ -1,109 +1,81 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useMemo, useCallback } from "react";
-import ReactECharts from "echarts-for-react";
-import { clsx } from "./index36.js";
-import { MAX_CATEGORIES, MAX_SUBCATEGORIES } from "./index39.js";
-import { aggregateData, buildBarOption, buildSunburstOption, buildPieOption } from "./index55.js";
-import styles from "./index56.js";
-const CHART_TYPE_LABELS = {
-  bar: "Bar",
-  pie: "Pie",
-  sunburst: "Sunburst"
-};
-const CHART_TYPES = ["bar", "pie", "sunburst"];
-const StackedBarChartCard = ({
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useContext, useState, useId, createContext } from "react";
+import { clsx } from "./index38.js";
+import { SIDEBAR } from "./index48.js";
+import styles from "./index50.js";
+const SidebarContext = createContext({ isCollapsed: false });
+const useSidebarContext = () => useContext(SidebarContext);
+const SidebarSection = ({
   title,
-  data,
-  subtitle,
-  chartType = "bar",
-  isLoading = false,
-  error,
-  onRetry,
-  onChartReady,
-  onSelectCategory,
-  // onAnalyzeRootCause — reserved for context menu integration
-  maxCategories = MAX_CATEGORIES,
-  maxSubcategories = MAX_SUBCATEGORIES,
-  showOthersBucket = true,
-  invertAxis = false,
-  hideLegend = false,
-  enableScroll = false,
-  toolbar,
-  actions,
+  children,
+  collapsible = false,
+  defaultCollapsed = false
+}) => {
+  const { isCollapsed: sidebarCollapsed } = useSidebarContext();
+  const [sectionCollapsed, setSectionCollapsed] = useState(defaultCollapsed);
+  const titleId = useId();
+  const isOpen = !collapsible || !sectionCollapsed;
+  return /* @__PURE__ */ jsxs("div", { className: styles.section, role: "group", "aria-labelledby": title ? titleId : void 0, children: [
+    title && !sidebarCollapsed && (collapsible ? /* @__PURE__ */ jsxs(
+      "button",
+      {
+        id: titleId,
+        type: "button",
+        className: styles.sectionToggle,
+        onClick: () => setSectionCollapsed((prev) => !prev),
+        "aria-expanded": isOpen,
+        children: [
+          /* @__PURE__ */ jsx("span", { className: styles.sectionTitle, children: title }),
+          /* @__PURE__ */ jsx("span", { className: clsx(styles.sectionChevron, { [styles.sectionChevronOpen]: isOpen }), children: /* @__PURE__ */ jsx("svg", { width: 12, height: 12, viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M3 4.5L6 7.5L9 4.5", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }) }) })
+        ]
+      }
+    ) : /* @__PURE__ */ jsx("span", { id: titleId, className: styles.sectionTitle, children: title })),
+    isOpen && /* @__PURE__ */ jsx("div", { className: styles.sectionItems, children })
+  ] });
+};
+SidebarSection.displayName = "Sidebar.Section";
+const SidebarRoot = ({
+  isCollapsed = false,
+  onToggleCollapse,
+  width = SIDEBAR.WIDTH,
+  collapsedWidth = SIDEBAR.COLLAPSED_WIDTH,
+  header,
+  footer,
+  children,
   className
 }) => {
-  const { categories, series } = useMemo(
-    () => aggregateData(data, maxCategories, maxSubcategories, showOthersBucket),
-    [data, maxCategories, maxSubcategories, showOthersBucket]
-  );
-  const option = useMemo(() => {
-    switch (chartType) {
-      case "pie":
-        return buildPieOption(categories, series, hideLegend);
-      case "sunburst":
-        return buildSunburstOption(categories, series);
-      default:
-        return buildBarOption(categories, series, invertAxis, hideLegend, enableScroll);
-    }
-  }, [chartType, categories, series, invertAxis, hideLegend, enableScroll]);
-  const handleChartReady = useCallback(
-    (instance) => {
-      onChartReady == null ? void 0 : onChartReady(instance);
-    },
-    [onChartReady]
-  );
-  const handleChartClick = useCallback(
-    (params) => {
-      if (!onSelectCategory || !params.name) return;
-      onSelectCategory({
-        category: params.name,
-        subCategory: params.seriesName ?? null
-      });
-    },
-    [onSelectCategory]
-  );
-  const hasData = data.length > 0;
-  return /* @__PURE__ */ jsxs("div", { className: clsx(styles.root, className), children: [
-    /* @__PURE__ */ jsxs("div", { className: styles.header, children: [
-      /* @__PURE__ */ jsxs("div", { className: styles.headerLeft, children: [
-        /* @__PURE__ */ jsx("h3", { className: styles.title, children: title }),
-        subtitle && /* @__PURE__ */ jsx("div", { className: styles.subtitle, children: subtitle })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: styles.headerRight, children: [
-        toolbar && /* @__PURE__ */ jsx("div", { className: styles.toolbar, children: toolbar }),
-        /* @__PURE__ */ jsx("div", { className: styles.chartTypeToggle, children: CHART_TYPES.map((type) => /* @__PURE__ */ jsx(
+  const currentWidth = isCollapsed ? collapsedWidth : width;
+  return /* @__PURE__ */ jsx(SidebarContext.Provider, { value: { isCollapsed }, children: /* @__PURE__ */ jsxs(
+    "nav",
+    {
+      className: clsx(styles.root, { [styles.collapsed]: isCollapsed }, className),
+      style: { width: `${currentWidth}px` },
+      "aria-label": "Main navigation",
+      children: [
+        header && /* @__PURE__ */ jsx("div", { className: styles.header, children: header }),
+        /* @__PURE__ */ jsx("div", { className: styles.body, children }),
+        footer && /* @__PURE__ */ jsx("div", { className: styles.footer, children: footer }),
+        onToggleCollapse && /* @__PURE__ */ jsx(
           "button",
           {
             type: "button",
-            className: chartType === type ? styles.active : void 0,
-            "aria-pressed": chartType === type,
-            disabled: true,
-            children: CHART_TYPE_LABELS[type]
-          },
-          type
-        )) }),
-        actions
-      ] })
-    ] }),
-    isLoading && /* @__PURE__ */ jsx("div", { className: styles.loading, children: "Loading chart data..." }),
-    !isLoading && error && /* @__PURE__ */ jsxs("div", { className: styles.error, children: [
-      /* @__PURE__ */ jsx("span", { children: error }),
-      onRetry && /* @__PURE__ */ jsx("button", { type: "button", className: styles.retryButton, onClick: onRetry, children: "Retry" })
-    ] }),
-    !isLoading && !error && !hasData && /* @__PURE__ */ jsx("div", { className: styles.empty, children: "No data available" }),
-    !isLoading && !error && hasData && /* @__PURE__ */ jsx("div", { className: styles.chartContainer, children: /* @__PURE__ */ jsx(
-      ReactECharts,
-      {
-        option,
-        style: { height: "100%", width: "100%" },
-        onChartReady: handleChartReady,
-        onEvents: { click: handleChartClick },
-        notMerge: true
-      }
-    ) })
-  ] });
+            className: styles.toggle,
+            onClick: onToggleCollapse,
+            "aria-expanded": !isCollapsed,
+            "aria-label": "Toggle sidebar",
+            children: /* @__PURE__ */ jsx("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: isCollapsed ? /* @__PURE__ */ jsx("path", { d: "M6 3L11 8L6 13", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }) : /* @__PURE__ */ jsx("path", { d: "M10 3L5 8L10 13", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }) })
+          }
+        )
+      ]
+    }
+  ) });
 };
+SidebarRoot.displayName = "Sidebar";
+const Sidebar = Object.assign(SidebarRoot, {
+  Section: SidebarSection
+});
 export {
-  StackedBarChartCard
+  Sidebar,
+  useSidebarContext
 };
 //# sourceMappingURL=index32.js.map

package/dist/index32.js.map

@@ -1 +1 @@
-{"version":3,"file":"index32.js","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":[],"mappings":"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"}
+{"version":3,"file":"index32.js","sources":["../src/composites/Sidebar/Sidebar.tsx"],"sourcesContent":["import { createContext, useContext, useId, useState } from 'react';\nimport clsx from 'clsx';\nimport { SIDEBAR } from '../../constants';\nimport type { SidebarProps, SidebarSectionProps } from './Sidebar.types';\nimport styles from './Sidebar.module.css';\n\ninterface SidebarContextValue {\n  isCollapsed: boolean;\n}\n\nconst SidebarContext = createContext<SidebarContextValue>({ isCollapsed: false });\n\n/** Hook to read sidebar collapsed state from context. */\nexport const useSidebarContext = () => useContext(SidebarContext);\n\n/* ------------------------------------------------------------------ */\n/*  Sidebar.Section                                                    */\n/* ------------------------------------------------------------------ */\n\nconst SidebarSection = ({\n  title,\n  children,\n  collapsible = false,\n  defaultCollapsed = false,\n}: SidebarSectionProps) => {\n  const { isCollapsed: sidebarCollapsed } = useSidebarContext();\n  const [sectionCollapsed, setSectionCollapsed] = useState(defaultCollapsed);\n  const titleId = useId();\n\n  const isOpen = !collapsible || !sectionCollapsed;\n\n  return (\n    <div className={styles.section} role=\"group\" aria-labelledby={title ? titleId : undefined}>\n      {title && !sidebarCollapsed && (\n        collapsible ? (\n          <button\n            id={titleId}\n            type=\"button\"\n            className={styles.sectionToggle}\n            onClick={() => setSectionCollapsed((prev) => !prev)}\n            aria-expanded={isOpen}\n          >\n            <span className={styles.sectionTitle}>{title}</span>\n            <span className={clsx(styles.sectionChevron, { [styles.sectionChevronOpen]: isOpen })}>\n              <svg width={12} height={12} viewBox=\"0 0 12 12\" fill=\"none\" aria-hidden=\"true\">\n                <path d=\"M3 4.5L6 7.5L9 4.5\" stroke=\"currentColor\" strokeWidth={1.5} strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n              </svg>\n            </span>\n          </button>\n        ) : (\n          <span id={titleId} className={styles.sectionTitle}>\n            {title}\n          </span>\n        )\n      )}\n      {isOpen && <div className={styles.sectionItems}>{children}</div>}\n    </div>\n  );\n};\n\nSidebarSection.displayName = 'Sidebar.Section';\n\n/* ------------------------------------------------------------------ */\n/*  Sidebar                                                            */\n/* ------------------------------------------------------------------ */\n\nconst SidebarRoot = ({\n  isCollapsed = false,\n  onToggleCollapse,\n  width = SIDEBAR.WIDTH,\n  collapsedWidth = SIDEBAR.COLLAPSED_WIDTH,\n  header,\n  footer,\n  children,\n  className,\n}: SidebarProps) => {\n  const currentWidth = isCollapsed ? collapsedWidth : width;\n\n  return (\n    <SidebarContext.Provider value={{ isCollapsed }}>\n      <nav\n        className={clsx(styles.root, { [styles.collapsed]: isCollapsed }, className)}\n        style={{ width: `${currentWidth}px` }}\n        aria-label=\"Main navigation\"\n      >\n        {header && <div className={styles.header}>{header}</div>}\n\n        <div className={styles.body}>{children}</div>\n\n        {footer && <div className={styles.footer}>{footer}</div>}\n\n        {onToggleCollapse && (\n          <button\n            type=\"button\"\n            className={styles.toggle}\n            onClick={onToggleCollapse}\n            aria-expanded={!isCollapsed}\n            aria-label=\"Toggle sidebar\"\n          >\n            <svg width={16} height={16} viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\n              {isCollapsed ? (\n                <path d=\"M6 3L11 8L6 13\" stroke=\"currentColor\" strokeWidth={1.5} strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n              ) : (\n                <path d=\"M10 3L5 8L10 13\" stroke=\"currentColor\" strokeWidth={1.5} strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n              )}\n            </svg>\n          </button>\n        )}\n      </nav>\n    </SidebarContext.Provider>\n  );\n};\n\nSidebarRoot.displayName = 'Sidebar';\n\n/** Compound Sidebar component. */\nexport const Sidebar = Object.assign(SidebarRoot, {\n  Section: SidebarSection,\n});\n"],"names":[],"mappings":"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"}