@ktnpm_devops/react-component 0.9.0 → 0.11.0

package/dist/index40.js

@@ -1,21 +1,102 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { clsx } from "./index51.js";
-import styles from "./index82.js";
-const SettingsLayout = ({
-  sidebar,
-  children,
+import { useMemo, useEffect } from "react";
+import ReactECharts from "echarts-for-react";
+import { clsx } from "./index54.js";
+import { foldPoints } from "./index98.js";
+import { buildScatterOption } from "./index99.js";
+import { SCATTER } from "./index61.js";
+import styles from "./index100.js";
+const SOURCE_INDEX_DIM = 3;
+const buildAriaLabel = (title, xLabel, yLabel) => xLabel && yLabel ? `${title}: scatter plot of ${yLabel} against ${xLabel}` : `${title}: scatter plot`;
+const ScatterChartCard = ({
   title,
-  maxWidth = "48rem",
-  sidebarCollapsed = false,
+  data,
+  xLabel,
+  yLabel,
+  categoryLabel,
+  mergeCoincident = true,
+  maxPoints = SCATTER.MAX_POINTS,
+  onRender,
+  onSelectPoint,
+  enableDataZoom = false,
+  hideLegend = false,
+  compact = false,
+  toolbar,
+  isLoading = false,
+  error = null,
+  onRetry,
+  onChartReady,
+  actions,
   className
-}) => /* @__PURE__ */ jsxs("div", { className: clsx(styles.root, className), children: [
-  sidebar && /* @__PURE__ */ jsx("aside", { className: clsx(styles.sidebar, { [styles.sidebarCollapsed]: sidebarCollapsed }), children: sidebar }),
-  /* @__PURE__ */ jsx("main", { className: styles.main, children: /* @__PURE__ */ jsxs("div", { className: styles.content, style: { maxWidth }, children: [
-    title && /* @__PURE__ */ jsx("h1", { className: styles.title, children: title }),
-    children
-  ] }) })
-] });
+}) => {
+  const { points, info } = useMemo(
+    () => foldPoints(data, maxPoints, mergeCoincident),
+    [data, maxPoints, mergeCoincident]
+  );
+  const hasCategories = points.some((p) => p.point.category != null);
+  const showLegend = !hideLegend && !compact && hasCategories;
+  const option = useMemo(
+    () => buildScatterOption(points, { xLabel, yLabel, categoryLabel, showLegend, enableDataZoom }),
+    [points, xLabel, yLabel, categoryLabel, showLegend, enableDataZoom]
+  );
+  useEffect(() => {
+    onRender == null ? void 0 : onRender(info);
+  }, [onRender, info]);
+  const handleChartReady = (instance) => {
+    if (onSelectPoint) {
+      instance.on("click", (params) => {
+        var _a;
+        const index = (_a = params.value) == null ? void 0 : _a[SOURCE_INDEX_DIM];
+        if (index != null && data[index]) onSelectPoint({ point: data[index], index });
+      });
+    }
+    onChartReady == null ? void 0 : onChartReady(instance);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: clsx(styles.root, compact && styles.compact, className), children: [
+    /* @__PURE__ */ jsxs("header", { className: styles.header, children: [
+      /* @__PURE__ */ jsx("h3", { className: styles.title, children: title }),
+      actions && /* @__PURE__ */ jsx("div", { className: styles.headerActions, children: actions })
+    ] }),
+    toolbar && /* @__PURE__ */ jsx("div", { className: styles.toolbar, children: toolbar }),
+    info.dropped > 0 && /* @__PURE__ */ jsxs("div", { className: styles.warning, role: "status", children: [
+      "Showing ",
+      info.total - info.dropped,
+      " of ",
+      info.total,
+      " points (",
+      info.dropped,
+      " dropped by the",
+      " ",
+      maxPoints,
+      " mark cap)."
+    ] }),
+    isLoading && /* @__PURE__ */ jsx("div", { className: styles.loading, children: "Loading chart..." }),
+    !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 && data.length === 0 && /* @__PURE__ */ jsx("div", { className: styles.empty, children: "No point data available." }),
+    !isLoading && !error && data.length > 0 && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: styles.chartContainer,
+        role: "figure",
+        "aria-label": buildAriaLabel(title, xLabel, yLabel),
+        children: /* @__PURE__ */ jsx(
+          ReactECharts,
+          {
+            option,
+            style: { height: "100%", width: "100%" },
+            onChartReady: handleChartReady,
+            notMerge: true
+          }
+        )
+      }
+    )
+  ] });
+};
+ScatterChartCard.displayName = "ScatterChartCard";
 export {
-  SettingsLayout
+  ScatterChartCard
 };
 //# sourceMappingURL=index40.js.map

package/dist/index40.js.map

@@ -1 +1 @@
-{"version":3,"file":"index40.js","sources":["../src/layouts/SettingsLayout/SettingsLayout.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport type { SettingsLayoutProps } from './SettingsLayout.types';\nimport styles from './SettingsLayout.module.css';\n\nexport const SettingsLayout = ({\n  sidebar,\n  children,\n  title,\n  maxWidth = '48rem',\n  sidebarCollapsed = false,\n  className,\n}: SettingsLayoutProps) => (\n  <div className={clsx(styles.root, className)}>\n    {sidebar && (\n      <aside className={clsx(styles.sidebar, { [styles.sidebarCollapsed]: sidebarCollapsed })}>\n        {sidebar}\n      </aside>\n    )}\n    <main className={styles.main}>\n      <div className={styles.content} style={{ maxWidth }}>\n        {title && <h1 className={styles.title}>{title}</h1>}\n        {children}\n      </div>\n    </main>\n  </div>\n);\n"],"names":[],"mappings":";;;AAIO,MAAM,iBAAiB,CAAC;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,mBAAmB;AAAA,EACnB;AACF,2BACG,OAAA,EAAI,WAAW,KAAK,OAAO,MAAM,SAAS,GACxC,UAAA;AAAA,EAAA,WACC,oBAAC,SAAA,EAAM,WAAW,KAAK,OAAO,SAAS,EAAE,CAAC,OAAO,gBAAgB,GAAG,iBAAA,CAAkB,GACnF,UAAA,SACH;AAAA,EAEF,oBAAC,QAAA,EAAK,WAAW,OAAO,MACtB,UAAA,qBAAC,OAAA,EAAI,WAAW,OAAO,SAAS,OAAO,EAAE,YACtC,UAAA;AAAA,IAAA,SAAS,oBAAC,MAAA,EAAG,WAAW,OAAO,OAAQ,UAAA,OAAM;AAAA,IAC7C;AAAA,EAAA,EAAA,CACH,EAAA,CACF;AAAA,EAAA,CACF;"}
+{"version":3,"file":"index40.js","sources":["../src/charts/ScatterChartCard/ScatterChartCard.tsx"],"sourcesContent":["import { useEffect, useMemo } from 'react';\nimport ReactECharts from 'echarts-for-react';\nimport clsx from 'clsx';\nimport type { ScatterChartCardProps } from './ScatterChartCard.types';\nimport type { EChartsInstance } from '../../types/chart.types';\nimport { foldPoints } from './foldPoints';\nimport { buildScatterOption } from './buildScatterOption';\nimport { SCATTER } from '../../constants';\nimport styles from './ScatterChartCard.module.css';\n\n/** Index of the source-point index inside an echarts data item's `value` array. */\nconst SOURCE_INDEX_DIM = 3;\n\nconst buildAriaLabel = (title: string, xLabel?: string, yLabel?: string) =>\n  xLabel && yLabel ? `${title}: scatter plot of ${yLabel} against ${xLabel}` : `${title}: scatter plot`;\n\nexport const ScatterChartCard = ({\n  title,\n  data,\n  xLabel,\n  yLabel,\n  categoryLabel,\n  mergeCoincident = true,\n  maxPoints = SCATTER.MAX_POINTS,\n  onRender,\n  onSelectPoint,\n  enableDataZoom = false,\n  hideLegend = false,\n  compact = false,\n  toolbar,\n  isLoading = false,\n  error = null,\n  onRetry,\n  onChartReady,\n  actions,\n  className,\n}: ScatterChartCardProps) => {\n  const { points, info } = useMemo(\n    () => foldPoints(data, maxPoints, mergeCoincident),\n    [data, maxPoints, mergeCoincident],\n  );\n\n  const hasCategories = points.some((p) => p.point.category != null);\n  const showLegend = !hideLegend && !compact && hasCategories;\n\n  const option = useMemo(\n    () =>\n      buildScatterOption(points, { xLabel, yLabel, categoryLabel, showLegend, enableDataZoom }),\n    [points, xLabel, yLabel, categoryLabel, showLegend, enableDataZoom],\n  );\n\n  useEffect(() => {\n    onRender?.(info);\n  }, [onRender, info]);\n\n  const handleChartReady = (instance: EChartsInstance) => {\n    if (onSelectPoint) {\n      instance.on('click', (params: unknown) => {\n        const index = (params as { value?: number[] }).value?.[SOURCE_INDEX_DIM];\n        if (index != null && data[index]) onSelectPoint({ point: data[index], index });\n      });\n    }\n\n    onChartReady?.(instance);\n  };\n\n  return (\n    <div className={clsx(styles.root, compact && styles.compact, className)}>\n      <header className={styles.header}>\n        <h3 className={styles.title}>{title}</h3>\n        {actions && <div className={styles.headerActions}>{actions}</div>}\n      </header>\n\n      {toolbar && <div className={styles.toolbar}>{toolbar}</div>}\n\n      {info.dropped > 0 && (\n        <div className={styles.warning} role=\"status\">\n          Showing {info.total - info.dropped} of {info.total} points ({info.dropped} dropped by the{' '}\n          {maxPoints} mark cap).\n        </div>\n      )}\n\n      {isLoading && <div className={styles.loading}>Loading chart...</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 && data.length === 0 && (\n        <div className={styles.empty}>No point data available.</div>\n      )}\n\n      {!isLoading && !error && data.length > 0 && (\n        <div\n          className={styles.chartContainer}\n          role=\"figure\"\n          aria-label={buildAriaLabel(title, xLabel, yLabel)}\n        >\n          <ReactECharts\n            option={option}\n            style={{ height: '100%', width: '100%' }}\n            onChartReady={handleChartReady}\n            notMerge\n          />\n        </div>\n      )}\n    </div>\n  );\n};\n\nScatterChartCard.displayName = 'ScatterChartCard';\n"],"names":[],"mappings":"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"}

package/dist/index41.cjs

@@ -2,80 +2,75 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const clsx = require("./index51.cjs");
-const constants = require("./index56.cjs");
-const Sidebar_module = require("./index92.cjs");
-const SidebarContext = react.createContext({ isCollapsed: false });
-const useSidebarContext = () => react.useContext(SidebarContext);
-const SidebarSection = ({
-  title,
-  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 currentWidth = isCollapsed ? collapsedWidth : width;
-  return /* @__PURE__ */ jsxRuntime.jsx(SidebarContext.Provider, { value: { isCollapsed }, children: /* @__PURE__ */ jsxRuntime.jsxs(
-    "nav",
+const clsx = require("./index54.cjs");
+const SegmentedControl_module = require("./index56.cjs");
+function nextEnabledIndex(options, from, step) {
+  const count = options.length;
+  for (let i = 1; i <= count; i += 1) {
+    const idx = (from + step * i + count * i) % count;
+    if (!options[idx].disabled) return idx;
+  }
+  return from;
+}
+function SegmentedControlInner({
+  options,
+  value,
+  onChange,
+  shape = "pill",
+  size = "md",
+  className,
+  ...props
+}, ref) {
+  const buttonsRef = react.useRef([]);
+  const move = (currentIndex, step) => {
+    var _a;
+    const target = nextEnabledIndex(options, currentIndex, step);
+    if (target === currentIndex) return;
+    onChange(options[target].value);
+    (_a = buttonsRef.current[target]) == null ? void 0 : _a.focus();
+  };
+  const handleKeyDown = (event, index) => {
+    if (event.key === "ArrowRight" || event.key === "ArrowDown") {
+      event.preventDefault();
+      move(index, 1);
+    } else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
+      event.preventDefault();
+      move(index, -1);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
     {
-      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(
+      ref,
+      role: "radiogroup",
+      className: clsx.clsx(SegmentedControl_module.default.root, SegmentedControl_module.default[shape], SegmentedControl_module.default[size], className),
+      ...props,
+      children: options.map((option, index) => {
+        const selected = option.value === value;
+        return /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
+            ref: (node) => {
+              buttonsRef.current[index] = node;
+            },
             type: "button",
-            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" }) })
-          }
-        )
-      ]
+            role: "radio",
+            "aria-checked": selected,
+            tabIndex: selected ? 0 : -1,
+            disabled: option.disabled,
+            className: clsx.clsx(SegmentedControl_module.default.segment, selected && SegmentedControl_module.default.isOn),
+            onClick: () => onChange(option.value),
+            onKeyDown: (event) => handleKeyDown(event, index),
+            children: option.label
+          },
+          option.value
+        );
+      })
     }
-  ) });
-};
-SidebarRoot.displayName = "Sidebar";
-const Sidebar = Object.assign(SidebarRoot, {
-  Section: SidebarSection
-});
-exports.Sidebar = Sidebar;
-exports.useSidebarContext = useSidebarContext;
+  );
+}
+const SegmentedControlBase = react.forwardRef(SegmentedControlInner);
+SegmentedControlBase.displayName = "SegmentedControl";
+const SegmentedControl = SegmentedControlBase;
+exports.SegmentedControl = SegmentedControl;
 //# sourceMappingURL=index41.cjs.map

package/dist/index41.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index41.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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"}
+{"version":3,"file":"index41.cjs","sources":["../src/primitives/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import { forwardRef, useRef } from 'react';\nimport clsx from 'clsx';\nimport type {\n  SegmentedControlOption,\n  SegmentedControlProps,\n} from './SegmentedControl.types';\nimport styles from './SegmentedControl.module.css';\n\nfunction nextEnabledIndex<T extends string>(\n  options: SegmentedControlOption<T>[],\n  from: number,\n  step: 1 | -1,\n): number {\n  const count = options.length;\n  for (let i = 1; i <= count; i += 1) {\n    const idx = (from + step * i + count * i) % count;\n    if (!options[idx].disabled) return idx;\n  }\n  return from;\n}\n\nfunction SegmentedControlInner<T extends string>(\n  {\n    options,\n    value,\n    onChange,\n    shape = 'pill',\n    size = 'md',\n    className,\n    ...props\n  }: SegmentedControlProps<T>,\n  ref: React.ForwardedRef<HTMLDivElement>,\n) {\n  const buttonsRef = useRef<(HTMLButtonElement | null)[]>([]);\n\n  const move = (currentIndex: number, step: 1 | -1) => {\n    const target = nextEnabledIndex(options, currentIndex, step);\n    if (target === currentIndex) return;\n    onChange(options[target].value);\n    buttonsRef.current[target]?.focus();\n  };\n\n  const handleKeyDown = (event: React.KeyboardEvent, index: number) => {\n    if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {\n      event.preventDefault();\n      move(index, 1);\n    } else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {\n      event.preventDefault();\n      move(index, -1);\n    }\n  };\n\n  return (\n    <div\n      ref={ref}\n      role=\"radiogroup\"\n      className={clsx(styles.root, styles[shape], styles[size], className)}\n      {...props}\n    >\n      {options.map((option, index) => {\n        const selected = option.value === value;\n        return (\n          <button\n            key={option.value}\n            ref={(node) => {\n              buttonsRef.current[index] = node;\n            }}\n            type=\"button\"\n            role=\"radio\"\n            aria-checked={selected}\n            tabIndex={selected ? 0 : -1}\n            disabled={option.disabled}\n            className={clsx(styles.segment, selected && styles.isOn)}\n            onClick={() => onChange(option.value)}\n            onKeyDown={(event) => handleKeyDown(event, index)}\n          >\n            {option.label}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n\nconst SegmentedControlBase = forwardRef(SegmentedControlInner);\n(SegmentedControlBase as { displayName?: string }).displayName = 'SegmentedControl';\n\n/**\n * Cast preserves the generic `T` for consumers (forwardRef otherwise collapses\n * it to `string`), while the runtime object keeps its `displayName`.\n */\nexport const SegmentedControl = SegmentedControlBase as <T extends string>(\n  props: SegmentedControlProps<T> & React.RefAttributes<HTMLDivElement>,\n) => React.ReactElement | null;\n"],"names":["useRef","jsx","clsx","styles","forwardRef"],"mappings":";;;;;;AAQA,SAAS,iBACP,SACA,MACA,MACQ;AACR,QAAM,QAAQ,QAAQ;AACtB,WAAS,IAAI,GAAG,KAAK,OAAO,KAAK,GAAG;AAClC,UAAM,OAAO,OAAO,OAAO,IAAI,QAAQ,KAAK;AAC5C,QAAI,CAAC,QAAQ,GAAG,EAAE,SAAU,QAAO;AAAA,EACrC;AACA,SAAO;AACT;AAEA,SAAS,sBACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,OAAO;AAAA,EACP;AAAA,EACA,GAAG;AACL,GACA,KACA;AACA,QAAM,aAAaA,MAAAA,OAAqC,EAAE;AAE1D,QAAM,OAAO,CAAC,cAAsB,SAAiB;;AACnD,UAAM,SAAS,iBAAiB,SAAS,cAAc,IAAI;AAC3D,QAAI,WAAW,aAAc;AAC7B,aAAS,QAAQ,MAAM,EAAE,KAAK;AAC9B,qBAAW,QAAQ,MAAM,MAAzB,mBAA4B;AAAA,EAC9B;AAEA,QAAM,gBAAgB,CAAC,OAA4B,UAAkB;AACnE,QAAI,MAAM,QAAQ,gBAAgB,MAAM,QAAQ,aAAa;AAC3D,YAAM,eAAA;AACN,WAAK,OAAO,CAAC;AAAA,IACf,WAAW,MAAM,QAAQ,eAAe,MAAM,QAAQ,WAAW;AAC/D,YAAM,eAAA;AACN,WAAK,OAAO,EAAE;AAAA,IAChB;AAAA,EACF;AAEA,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,MAAK;AAAA,MACL,WAAWC,KAAAA,KAAKC,wBAAAA,QAAO,MAAMA,wBAAAA,QAAO,KAAK,GAAGA,wBAAAA,QAAO,IAAI,GAAG,SAAS;AAAA,MAClE,GAAG;AAAA,MAEH,UAAA,QAAQ,IAAI,CAAC,QAAQ,UAAU;AAC9B,cAAM,WAAW,OAAO,UAAU;AAClC,eACEF,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YAEC,KAAK,CAAC,SAAS;AACb,yBAAW,QAAQ,KAAK,IAAI;AAAA,YAC9B;AAAA,YACA,MAAK;AAAA,YACL,MAAK;AAAA,YACL,gBAAc;AAAA,YACd,UAAU,WAAW,IAAI;AAAA,YACzB,UAAU,OAAO;AAAA,YACjB,WAAWC,KAAAA,KAAKC,wBAAAA,QAAO,SAAS,YAAYA,wBAAAA,QAAO,IAAI;AAAA,YACvD,SAAS,MAAM,SAAS,OAAO,KAAK;AAAA,YACpC,WAAW,CAAC,UAAU,cAAc,OAAO,KAAK;AAAA,YAE/C,UAAA,OAAO;AAAA,UAAA;AAAA,UAbH,OAAO;AAAA,QAAA;AAAA,MAgBlB,CAAC;AAAA,IAAA;AAAA,EAAA;AAGP;AAEA,MAAM,uBAAuBC,MAAAA,WAAW,qBAAqB;AAC5D,qBAAkD,cAAc;AAM1D,MAAM,mBAAmB;;"}

package/dist/index41.js

@@ -1,81 +1,76 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useContext, useState, useId, createContext } from "react";
-import { clsx } from "./index51.js";
-import { SIDEBAR } from "./index56.js";
-import styles from "./index92.js";
-const SidebarContext = createContext({ isCollapsed: false });
-const useSidebarContext = () => useContext(SidebarContext);
-const SidebarSection = ({
-  title,
-  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 currentWidth = isCollapsed ? collapsedWidth : width;
-  return /* @__PURE__ */ jsx(SidebarContext.Provider, { value: { isCollapsed }, children: /* @__PURE__ */ jsxs(
-    "nav",
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useRef } from "react";
+import { clsx } from "./index54.js";
+import styles from "./index56.js";
+function nextEnabledIndex(options, from, step) {
+  const count = options.length;
+  for (let i = 1; i <= count; i += 1) {
+    const idx = (from + step * i + count * i) % count;
+    if (!options[idx].disabled) return idx;
+  }
+  return from;
+}
+function SegmentedControlInner({
+  options,
+  value,
+  onChange,
+  shape = "pill",
+  size = "md",
+  className,
+  ...props
+}, ref) {
+  const buttonsRef = useRef([]);
+  const move = (currentIndex, step) => {
+    var _a;
+    const target = nextEnabledIndex(options, currentIndex, step);
+    if (target === currentIndex) return;
+    onChange(options[target].value);
+    (_a = buttonsRef.current[target]) == null ? void 0 : _a.focus();
+  };
+  const handleKeyDown = (event, index) => {
+    if (event.key === "ArrowRight" || event.key === "ArrowDown") {
+      event.preventDefault();
+      move(index, 1);
+    } else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
+      event.preventDefault();
+      move(index, -1);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
     {
-      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(
+      ref,
+      role: "radiogroup",
+      className: clsx(styles.root, styles[shape], styles[size], className),
+      ...props,
+      children: options.map((option, index) => {
+        const selected = option.value === value;
+        return /* @__PURE__ */ jsx(
           "button",
           {
+            ref: (node) => {
+              buttonsRef.current[index] = node;
+            },
             type: "button",
-            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" }) })
-          }
-        )
-      ]
+            role: "radio",
+            "aria-checked": selected,
+            tabIndex: selected ? 0 : -1,
+            disabled: option.disabled,
+            className: clsx(styles.segment, selected && styles.isOn),
+            onClick: () => onChange(option.value),
+            onKeyDown: (event) => handleKeyDown(event, index),
+            children: option.label
+          },
+          option.value
+        );
+      })
     }
-  ) });
-};
-SidebarRoot.displayName = "Sidebar";
-const Sidebar = Object.assign(SidebarRoot, {
-  Section: SidebarSection
-});
+  );
+}
+const SegmentedControlBase = forwardRef(SegmentedControlInner);
+SegmentedControlBase.displayName = "SegmentedControl";
+const SegmentedControl = SegmentedControlBase;
 export {
-  Sidebar,
-  useSidebarContext
+  SegmentedControl
 };
 //# sourceMappingURL=index41.js.map

package/dist/index41.js.map

@@ -1 +1 @@
-{"version":3,"file":"index41.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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"}
+{"version":3,"file":"index41.js","sources":["../src/primitives/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import { forwardRef, useRef } from 'react';\nimport clsx from 'clsx';\nimport type {\n  SegmentedControlOption,\n  SegmentedControlProps,\n} from './SegmentedControl.types';\nimport styles from './SegmentedControl.module.css';\n\nfunction nextEnabledIndex<T extends string>(\n  options: SegmentedControlOption<T>[],\n  from: number,\n  step: 1 | -1,\n): number {\n  const count = options.length;\n  for (let i = 1; i <= count; i += 1) {\n    const idx = (from + step * i + count * i) % count;\n    if (!options[idx].disabled) return idx;\n  }\n  return from;\n}\n\nfunction SegmentedControlInner<T extends string>(\n  {\n    options,\n    value,\n    onChange,\n    shape = 'pill',\n    size = 'md',\n    className,\n    ...props\n  }: SegmentedControlProps<T>,\n  ref: React.ForwardedRef<HTMLDivElement>,\n) {\n  const buttonsRef = useRef<(HTMLButtonElement | null)[]>([]);\n\n  const move = (currentIndex: number, step: 1 | -1) => {\n    const target = nextEnabledIndex(options, currentIndex, step);\n    if (target === currentIndex) return;\n    onChange(options[target].value);\n    buttonsRef.current[target]?.focus();\n  };\n\n  const handleKeyDown = (event: React.KeyboardEvent, index: number) => {\n    if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {\n      event.preventDefault();\n      move(index, 1);\n    } else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {\n      event.preventDefault();\n      move(index, -1);\n    }\n  };\n\n  return (\n    <div\n      ref={ref}\n      role=\"radiogroup\"\n      className={clsx(styles.root, styles[shape], styles[size], className)}\n      {...props}\n    >\n      {options.map((option, index) => {\n        const selected = option.value === value;\n        return (\n          <button\n            key={option.value}\n            ref={(node) => {\n              buttonsRef.current[index] = node;\n            }}\n            type=\"button\"\n            role=\"radio\"\n            aria-checked={selected}\n            tabIndex={selected ? 0 : -1}\n            disabled={option.disabled}\n            className={clsx(styles.segment, selected && styles.isOn)}\n            onClick={() => onChange(option.value)}\n            onKeyDown={(event) => handleKeyDown(event, index)}\n          >\n            {option.label}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n\nconst SegmentedControlBase = forwardRef(SegmentedControlInner);\n(SegmentedControlBase as { displayName?: string }).displayName = 'SegmentedControl';\n\n/**\n * Cast preserves the generic `T` for consumers (forwardRef otherwise collapses\n * it to `string`), while the runtime object keeps its `displayName`.\n */\nexport const SegmentedControl = SegmentedControlBase as <T extends string>(\n  props: SegmentedControlProps<T> & React.RefAttributes<HTMLDivElement>,\n) => React.ReactElement | null;\n"],"names":[],"mappings":";;;;AAQA,SAAS,iBACP,SACA,MACA,MACQ;AACR,QAAM,QAAQ,QAAQ;AACtB,WAAS,IAAI,GAAG,KAAK,OAAO,KAAK,GAAG;AAClC,UAAM,OAAO,OAAO,OAAO,IAAI,QAAQ,KAAK;AAC5C,QAAI,CAAC,QAAQ,GAAG,EAAE,SAAU,QAAO;AAAA,EACrC;AACA,SAAO;AACT;AAEA,SAAS,sBACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,OAAO;AAAA,EACP;AAAA,EACA,GAAG;AACL,GACA,KACA;AACA,QAAM,aAAa,OAAqC,EAAE;AAE1D,QAAM,OAAO,CAAC,cAAsB,SAAiB;;AACnD,UAAM,SAAS,iBAAiB,SAAS,cAAc,IAAI;AAC3D,QAAI,WAAW,aAAc;AAC7B,aAAS,QAAQ,MAAM,EAAE,KAAK;AAC9B,qBAAW,QAAQ,MAAM,MAAzB,mBAA4B;AAAA,EAC9B;AAEA,QAAM,gBAAgB,CAAC,OAA4B,UAAkB;AACnE,QAAI,MAAM,QAAQ,gBAAgB,MAAM,QAAQ,aAAa;AAC3D,YAAM,eAAA;AACN,WAAK,OAAO,CAAC;AAAA,IACf,WAAW,MAAM,QAAQ,eAAe,MAAM,QAAQ,WAAW;AAC/D,YAAM,eAAA;AACN,WAAK,OAAO,EAAE;AAAA,IAChB;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,MAAK;AAAA,MACL,WAAW,KAAK,OAAO,MAAM,OAAO,KAAK,GAAG,OAAO,IAAI,GAAG,SAAS;AAAA,MAClE,GAAG;AAAA,MAEH,UAAA,QAAQ,IAAI,CAAC,QAAQ,UAAU;AAC9B,cAAM,WAAW,OAAO,UAAU;AAClC,eACE;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,KAAK,CAAC,SAAS;AACb,yBAAW,QAAQ,KAAK,IAAI;AAAA,YAC9B;AAAA,YACA,MAAK;AAAA,YACL,MAAK;AAAA,YACL,gBAAc;AAAA,YACd,UAAU,WAAW,IAAI;AAAA,YACzB,UAAU,OAAO;AAAA,YACjB,WAAW,KAAK,OAAO,SAAS,YAAY,OAAO,IAAI;AAAA,YACvD,SAAS,MAAM,SAAS,OAAO,KAAK;AAAA,YACpC,WAAW,CAAC,UAAU,cAAc,OAAO,KAAK;AAAA,YAE/C,UAAA,OAAO;AAAA,UAAA;AAAA,UAbH,OAAO;AAAA,QAAA;AAAA,MAgBlB,CAAC;AAAA,IAAA;AAAA,EAAA;AAGP;AAEA,MAAM,uBAAuB,WAAW,qBAAqB;AAC5D,qBAAkD,cAAc;AAM1D,MAAM,mBAAmB;"}