@ktnpm_devops/react-component 0.2.1 → 0.4.0

package/dist/index29.js.map

@@ -1 +1 @@
-{"version":3,"file":"index29.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":"index29.js","sources":["../src/charts/SankeyChartCard/SankeyChartCard.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport ReactECharts from 'echarts-for-react';\nimport clsx from 'clsx';\nimport type { SankeyChartCardProps } from './SankeyChartCard.types';\nimport type { EChartsInstance, SankeyColorMetric, SankeyWidthMetric } from '../../types/chart.types';\nimport { MAX_SANKEY_NODES, CHART_COLORS } from '../../constants';\nimport styles from './SankeyChartCard.module.css';\n\n/** Colour metric labels for the toolbar selector. */\nconst COLOR_METRIC_OPTIONS: { value: SankeyColorMetric; label: string }[] = [\n  { value: 'deviation', label: 'Deviation' },\n  { value: 'severity', label: 'Severity' },\n  { value: 'origin', label: 'Origin' },\n  { value: 'persistence', label: 'Persistence' },\n];\n\n/** Width metric labels for the toolbar selector. */\nconst WIDTH_METRIC_OPTIONS: { value: SankeyWidthMetric; label: string }[] = [\n  { value: 'slots', label: 'Slots' },\n  { value: 'distinct_objects', label: 'Distinct Objects' },\n];\n\n/** Build a unique node list from source/target pairs. */\nconst buildNodes = (rows: SankeyChartCardProps['rows']) => {\n  const seen = new Set<string>();\n  const nodes: { name: string }[] = [];\n\n  for (const row of rows) {\n    if (!seen.has(row.source)) {\n      seen.add(row.source);\n      nodes.push({ name: row.source });\n    }\n    if (!seen.has(row.target)) {\n      seen.add(row.target);\n      nodes.push({ name: row.target });\n    }\n  }\n\n  return nodes;\n};\n\nexport const SankeyChartCard = ({\n  title,\n  rows,\n  isLoading = false,\n  error = null,\n  onRetry,\n  onChartReady,\n  actions,\n  className,\n  colorMetric = 'deviation',\n  widthMetric = 'slots',\n  onColorMetricChange,\n  onWidthMetricChange,\n  onNodeClick,\n  onNodeContextMenu,\n  maxNodes = MAX_SANKEY_NODES,\n}: SankeyChartCardProps) => {\n  const isTruncated = rows.length > maxNodes;\n  const visibleRows = isTruncated ? rows.slice(0, maxNodes) : rows;\n\n  const option = useMemo(() => {\n    const nodes = buildNodes(visibleRows);\n    const links = visibleRows.map((row) => ({\n      source: row.source,\n      target: row.target,\n      value: row.value,\n      lineStyle: row.color ? { color: row.color } : undefined,\n    }));\n\n    return {\n      tooltip: { trigger: 'item' as const },\n      series: [\n        {\n          type: 'sankey' as const,\n          data: nodes.map((node, i) => ({\n            ...node,\n            itemStyle: { color: CHART_COLORS[i % CHART_COLORS.length] },\n          })),\n          links,\n          emphasis: { focus: 'adjacency' as const },\n          lineStyle: { color: 'gradient' as const, curveness: 0.5 },\n        },\n      ],\n    };\n  }, [visibleRows]);\n\n  const handleChartReady = (instance: EChartsInstance) => {\n    if (onNodeClick) {\n      instance.on('click', (params: unknown) => {\n        const p = params as { dataType?: string; name?: string };\n        if (p.dataType === 'node' && p.name) {\n          onNodeClick({ name: p.name, type: 'node' });\n        }\n      });\n    }\n\n    if (onNodeContextMenu) {\n      instance.on('contextmenu', (params: unknown) => {\n        const p = params as { dataType?: string; name?: string; event?: { offsetX?: number; offsetY?: number } };\n        if (p.dataType === 'node' && p.name) {\n          onNodeContextMenu(\n            { name: p.name, type: 'node' },\n            { x: p.event?.offsetX ?? 0, y: p.event?.offsetY ?? 0 },\n          );\n        }\n      });\n    }\n\n    onChartReady?.(instance);\n  };\n\n  const hasToolbar = onColorMetricChange || onWidthMetricChange;\n\n  return (\n    <div className={clsx(styles.root, 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      {hasToolbar && (\n        <div className={styles.toolbar}>\n          {onColorMetricChange && (\n            <label>\n              <span className={styles.toolbarLabel}>Color: </span>\n              <select\n                className={styles.toolbarSelect}\n                value={colorMetric}\n                onChange={(e) => onColorMetricChange(e.target.value as SankeyColorMetric)}\n              >\n                {COLOR_METRIC_OPTIONS.map((opt) => (\n                  <option key={opt.value} value={opt.value}>\n                    {opt.label}\n                  </option>\n                ))}\n              </select>\n            </label>\n          )}\n          {onWidthMetricChange && (\n            <label>\n              <span className={styles.toolbarLabel}>Width: </span>\n              <select\n                className={styles.toolbarSelect}\n                value={widthMetric}\n                onChange={(e) => onWidthMetricChange(e.target.value as SankeyWidthMetric)}\n              >\n                {WIDTH_METRIC_OPTIONS.map((opt) => (\n                  <option key={opt.value} value={opt.value}>\n                    {opt.label}\n                  </option>\n                ))}\n              </select>\n            </label>\n          )}\n        </div>\n      )}\n\n      {isTruncated && (\n        <div className={styles.warning}>\n          Showing {maxNodes} of {rows.length} flows. Some data has been truncated.\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 && rows.length === 0 && (\n        <div className={styles.empty}>No flow data available.</div>\n      )}\n\n      {!isLoading && !error && rows.length > 0 && (\n        <div className={styles.chartContainer}>\n          <ReactECharts\n            option={option}\n            style={{ height: '100%', minHeight: '25rem' }}\n            onChartReady={handleChartReady}\n          />\n        </div>\n      )}\n    </div>\n  );\n};\n\nSankeyChartCard.displayName = 'SankeyChartCard';\n"],"names":[],"mappings":"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"}

package/dist/index3.cjs

@@ -1,19 +1,79 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const react = require("react");
-function useClickOutside(ref, handler) {
-  react.useEffect(() => {
-    const listener = (event) => {
-      if (!ref.current || ref.current.contains(event.target)) return;
-      handler(event);
-    };
-    document.addEventListener("mousedown", listener);
-    document.addEventListener("touchstart", listener);
-    return () => {
-      document.removeEventListener("mousedown", listener);
-      document.removeEventListener("touchstart", listener);
-    };
-  }, [ref, handler]);
-}
-exports.useClickOutside = useClickOutside;
+const orbitTokens = {
+  brand: {
+    orange: "#FF6B5A",
+    orangeLight: "#FF8575",
+    orangeDark: "#E65548",
+    orangeSoft: "rgba(255, 107, 90, 0.12)"
+  },
+  purple: {
+    base: "#2D1B2E",
+    light: "#4A3044"
+  },
+  semantic: {
+    success: "#047857",
+    successSoft: "#ECFDF5",
+    warning: "#B45309",
+    warningSoft: "#FFFBEB",
+    danger: "#B91C1C",
+    dangerSoft: "#FEF2F2",
+    info: "#1D4ED8",
+    infoSoft: "#DBEAFE"
+  },
+  dark: {
+    semantic: {
+      success: "#34D399",
+      successSoft: "rgba(16, 185, 129, 0.12)",
+      warning: "#FACC15",
+      warningSoft: "rgba(250, 204, 21, 0.12)",
+      danger: "#F87171",
+      dangerSoft: "rgba(248, 113, 113, 0.12)",
+      info: "#60A5FA",
+      infoSoft: "rgba(96, 165, 250, 0.12)"
+    }
+  },
+  radius: {
+    sm: "6px",
+    md: "10px",
+    lg: "16px",
+    pill: "999px"
+  },
+  typography: {
+    fontSize: {
+      "2xs": "0.625rem",
+      xs: "0.6875rem",
+      sm: "0.8125rem",
+      base: "0.875rem",
+      md: "0.875rem",
+      lg: "1rem",
+      xl: "1.125rem",
+      "2xl": "1.25rem",
+      "3xl": "1.5rem",
+      "4xl": "1.875rem"
+    },
+    fontWeight: {
+      normal: "400",
+      medium: "500",
+      semibold: "600",
+      bold: "700"
+    },
+    lineHeight: {
+      tight: "1.25",
+      normal: "1.5",
+      relaxed: "1.75"
+    }
+  },
+  spacing: {
+    "2xs": "0.125rem",
+    xs: "0.375rem",
+    sm: "0.625rem",
+    md: "1rem",
+    lg: "1.5rem",
+    xl: "2rem",
+    "2xl": "3rem",
+    "3xl": "4rem"
+  }
+};
+exports.orbitTokens = orbitTokens;
 //# sourceMappingURL=index3.cjs.map

package/dist/index3.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index3.cjs","sources":["../src/hooks/useClickOutside.ts"],"sourcesContent":["import { useEffect, type RefObject } from 'react';\n\n/** Calls `handler` when a click occurs outside the element referenced by `ref`. */\nexport function useClickOutside<T extends HTMLElement>(\n  ref: RefObject<T | null>,\n  handler: (event: MouseEvent | TouchEvent) => void,\n) {\n  useEffect(() => {\n    const listener = (event: MouseEvent | TouchEvent) => {\n      if (!ref.current || ref.current.contains(event.target as Node)) return;\n      handler(event);\n    };\n    document.addEventListener('mousedown', listener);\n    document.addEventListener('touchstart', listener);\n    return () => {\n      document.removeEventListener('mousedown', listener);\n      document.removeEventListener('touchstart', listener);\n    };\n  }, [ref, handler]);\n}\n"],"names":["useEffect"],"mappings":";;;AAGO,SAAS,gBACd,KACA,SACA;AACAA,QAAAA,UAAU,MAAM;AACd,UAAM,WAAW,CAAC,UAAmC;AACnD,UAAI,CAAC,IAAI,WAAW,IAAI,QAAQ,SAAS,MAAM,MAAc,EAAG;AAChE,cAAQ,KAAK;AAAA,IACf;AACA,aAAS,iBAAiB,aAAa,QAAQ;AAC/C,aAAS,iBAAiB,cAAc,QAAQ;AAChD,WAAO,MAAM;AACX,eAAS,oBAAoB,aAAa,QAAQ;AAClD,eAAS,oBAAoB,cAAc,QAAQ;AAAA,IACrD;AAAA,EACF,GAAG,CAAC,KAAK,OAAO,CAAC;AACnB;;"}
+{"version":3,"file":"index3.cjs","sources":["../src/tokens/tokens.ts"],"sourcesContent":["/** Orbit design token values for programmatic use (e.g., ECharts theming). */\nexport const orbitTokens = {\n  brand: {\n    orange: '#FF6B5A',\n    orangeLight: '#FF8575',\n    orangeDark: '#E65548',\n    orangeSoft: 'rgba(255, 107, 90, 0.12)',\n  },\n  purple: {\n    base: '#2D1B2E',\n    light: '#4A3044',\n  },\n  semantic: {\n    success: '#047857',\n    successSoft: '#ECFDF5',\n    warning: '#B45309',\n    warningSoft: '#FFFBEB',\n    danger: '#B91C1C',\n    dangerSoft: '#FEF2F2',\n    info: '#1D4ED8',\n    infoSoft: '#DBEAFE',\n  },\n  dark: {\n    semantic: {\n      success: '#34D399',\n      successSoft: 'rgba(16, 185, 129, 0.12)',\n      warning: '#FACC15',\n      warningSoft: 'rgba(250, 204, 21, 0.12)',\n      danger: '#F87171',\n      dangerSoft: 'rgba(248, 113, 113, 0.12)',\n      info: '#60A5FA',\n      infoSoft: 'rgba(96, 165, 250, 0.12)',\n    },\n  },\n  radius: {\n    sm: '6px',\n    md: '10px',\n    lg: '16px',\n    pill: '999px',\n  },\n  typography: {\n    fontSize: {\n      '2xs': '0.625rem',\n      xs: '0.6875rem',\n      sm: '0.8125rem',\n      base: '0.875rem',\n      md: '0.875rem',\n      lg: '1rem',\n      xl: '1.125rem',\n      '2xl': '1.25rem',\n      '3xl': '1.5rem',\n      '4xl': '1.875rem',\n    },\n    fontWeight: {\n      normal: '400',\n      medium: '500',\n      semibold: '600',\n      bold: '700',\n    },\n    lineHeight: {\n      tight: '1.25',\n      normal: '1.5',\n      relaxed: '1.75',\n    },\n  },\n  spacing: {\n    '2xs': '0.125rem',\n    xs: '0.375rem',\n    sm: '0.625rem',\n    md: '1rem',\n    lg: '1.5rem',\n    xl: '2rem',\n    '2xl': '3rem',\n    '3xl': '4rem',\n  },\n} as const;\n"],"names":[],"mappings":";;AACO,MAAM,cAAc;AAAA,EACzB,OAAO;AAAA,IACL,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,YAAY;AAAA,EAAA;AAAA,EAEd,QAAQ;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,EAAA;AAAA,EAET,UAAU;AAAA,IACR,SAAS;AAAA,IACT,aAAa;AAAA,IACb,SAAS;AAAA,IACT,aAAa;AAAA,IACb,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,MAAM;AAAA,IACN,UAAU;AAAA,EAAA;AAAA,EAEZ,MAAM;AAAA,IACJ,UAAU;AAAA,MACR,SAAS;AAAA,MACT,aAAa;AAAA,MACb,SAAS;AAAA,MACT,aAAa;AAAA,MACb,QAAQ;AAAA,MACR,YAAY;AAAA,MACZ,MAAM;AAAA,MACN,UAAU;AAAA,IAAA;AAAA,EACZ;AAAA,EAEF,QAAQ;AAAA,IACN,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,MAAM;AAAA,EAAA;AAAA,EAER,YAAY;AAAA,IACV,UAAU;AAAA,MACR,OAAO;AAAA,MACP,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,OAAO;AAAA,MACP,OAAO;AAAA,IAAA;AAAA,IAET,YAAY;AAAA,MACV,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,MAAM;AAAA,IAAA;AAAA,IAER,YAAY;AAAA,MACV,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,SAAS;AAAA,IAAA;AAAA,EACX;AAAA,EAEF,SAAS;AAAA,IACP,OAAO;AAAA,IACP,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,OAAO;AAAA,EAAA;AAEX;;"}

package/dist/index3.js

@@ -1,19 +1,79 @@
-import { useEffect } from "react";
-function useClickOutside(ref, handler) {
-  useEffect(() => {
-    const listener = (event) => {
-      if (!ref.current || ref.current.contains(event.target)) return;
-      handler(event);
-    };
-    document.addEventListener("mousedown", listener);
-    document.addEventListener("touchstart", listener);
-    return () => {
-      document.removeEventListener("mousedown", listener);
-      document.removeEventListener("touchstart", listener);
-    };
-  }, [ref, handler]);
-}
+const orbitTokens = {
+  brand: {
+    orange: "#FF6B5A",
+    orangeLight: "#FF8575",
+    orangeDark: "#E65548",
+    orangeSoft: "rgba(255, 107, 90, 0.12)"
+  },
+  purple: {
+    base: "#2D1B2E",
+    light: "#4A3044"
+  },
+  semantic: {
+    success: "#047857",
+    successSoft: "#ECFDF5",
+    warning: "#B45309",
+    warningSoft: "#FFFBEB",
+    danger: "#B91C1C",
+    dangerSoft: "#FEF2F2",
+    info: "#1D4ED8",
+    infoSoft: "#DBEAFE"
+  },
+  dark: {
+    semantic: {
+      success: "#34D399",
+      successSoft: "rgba(16, 185, 129, 0.12)",
+      warning: "#FACC15",
+      warningSoft: "rgba(250, 204, 21, 0.12)",
+      danger: "#F87171",
+      dangerSoft: "rgba(248, 113, 113, 0.12)",
+      info: "#60A5FA",
+      infoSoft: "rgba(96, 165, 250, 0.12)"
+    }
+  },
+  radius: {
+    sm: "6px",
+    md: "10px",
+    lg: "16px",
+    pill: "999px"
+  },
+  typography: {
+    fontSize: {
+      "2xs": "0.625rem",
+      xs: "0.6875rem",
+      sm: "0.8125rem",
+      base: "0.875rem",
+      md: "0.875rem",
+      lg: "1rem",
+      xl: "1.125rem",
+      "2xl": "1.25rem",
+      "3xl": "1.5rem",
+      "4xl": "1.875rem"
+    },
+    fontWeight: {
+      normal: "400",
+      medium: "500",
+      semibold: "600",
+      bold: "700"
+    },
+    lineHeight: {
+      tight: "1.25",
+      normal: "1.5",
+      relaxed: "1.75"
+    }
+  },
+  spacing: {
+    "2xs": "0.125rem",
+    xs: "0.375rem",
+    sm: "0.625rem",
+    md: "1rem",
+    lg: "1.5rem",
+    xl: "2rem",
+    "2xl": "3rem",
+    "3xl": "4rem"
+  }
+};
 export {
-  useClickOutside
+  orbitTokens
 };
 //# sourceMappingURL=index3.js.map

package/dist/index3.js.map

@@ -1 +1 @@
-{"version":3,"file":"index3.js","sources":["../src/hooks/useClickOutside.ts"],"sourcesContent":["import { useEffect, type RefObject } from 'react';\n\n/** Calls `handler` when a click occurs outside the element referenced by `ref`. */\nexport function useClickOutside<T extends HTMLElement>(\n  ref: RefObject<T | null>,\n  handler: (event: MouseEvent | TouchEvent) => void,\n) {\n  useEffect(() => {\n    const listener = (event: MouseEvent | TouchEvent) => {\n      if (!ref.current || ref.current.contains(event.target as Node)) return;\n      handler(event);\n    };\n    document.addEventListener('mousedown', listener);\n    document.addEventListener('touchstart', listener);\n    return () => {\n      document.removeEventListener('mousedown', listener);\n      document.removeEventListener('touchstart', listener);\n    };\n  }, [ref, handler]);\n}\n"],"names":[],"mappings":";AAGO,SAAS,gBACd,KACA,SACA;AACA,YAAU,MAAM;AACd,UAAM,WAAW,CAAC,UAAmC;AACnD,UAAI,CAAC,IAAI,WAAW,IAAI,QAAQ,SAAS,MAAM,MAAc,EAAG;AAChE,cAAQ,KAAK;AAAA,IACf;AACA,aAAS,iBAAiB,aAAa,QAAQ;AAC/C,aAAS,iBAAiB,cAAc,QAAQ;AAChD,WAAO,MAAM;AACX,eAAS,oBAAoB,aAAa,QAAQ;AAClD,eAAS,oBAAoB,cAAc,QAAQ;AAAA,IACrD;AAAA,EACF,GAAG,CAAC,KAAK,OAAO,CAAC;AACnB;"}
+{"version":3,"file":"index3.js","sources":["../src/tokens/tokens.ts"],"sourcesContent":["/** Orbit design token values for programmatic use (e.g., ECharts theming). */\nexport const orbitTokens = {\n  brand: {\n    orange: '#FF6B5A',\n    orangeLight: '#FF8575',\n    orangeDark: '#E65548',\n    orangeSoft: 'rgba(255, 107, 90, 0.12)',\n  },\n  purple: {\n    base: '#2D1B2E',\n    light: '#4A3044',\n  },\n  semantic: {\n    success: '#047857',\n    successSoft: '#ECFDF5',\n    warning: '#B45309',\n    warningSoft: '#FFFBEB',\n    danger: '#B91C1C',\n    dangerSoft: '#FEF2F2',\n    info: '#1D4ED8',\n    infoSoft: '#DBEAFE',\n  },\n  dark: {\n    semantic: {\n      success: '#34D399',\n      successSoft: 'rgba(16, 185, 129, 0.12)',\n      warning: '#FACC15',\n      warningSoft: 'rgba(250, 204, 21, 0.12)',\n      danger: '#F87171',\n      dangerSoft: 'rgba(248, 113, 113, 0.12)',\n      info: '#60A5FA',\n      infoSoft: 'rgba(96, 165, 250, 0.12)',\n    },\n  },\n  radius: {\n    sm: '6px',\n    md: '10px',\n    lg: '16px',\n    pill: '999px',\n  },\n  typography: {\n    fontSize: {\n      '2xs': '0.625rem',\n      xs: '0.6875rem',\n      sm: '0.8125rem',\n      base: '0.875rem',\n      md: '0.875rem',\n      lg: '1rem',\n      xl: '1.125rem',\n      '2xl': '1.25rem',\n      '3xl': '1.5rem',\n      '4xl': '1.875rem',\n    },\n    fontWeight: {\n      normal: '400',\n      medium: '500',\n      semibold: '600',\n      bold: '700',\n    },\n    lineHeight: {\n      tight: '1.25',\n      normal: '1.5',\n      relaxed: '1.75',\n    },\n  },\n  spacing: {\n    '2xs': '0.125rem',\n    xs: '0.375rem',\n    sm: '0.625rem',\n    md: '1rem',\n    lg: '1.5rem',\n    xl: '2rem',\n    '2xl': '3rem',\n    '3xl': '4rem',\n  },\n} as const;\n"],"names":[],"mappings":"AACO,MAAM,cAAc;AAAA,EACzB,OAAO;AAAA,IACL,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,YAAY;AAAA,EAAA;AAAA,EAEd,QAAQ;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,EAAA;AAAA,EAET,UAAU;AAAA,IACR,SAAS;AAAA,IACT,aAAa;AAAA,IACb,SAAS;AAAA,IACT,aAAa;AAAA,IACb,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,MAAM;AAAA,IACN,UAAU;AAAA,EAAA;AAAA,EAEZ,MAAM;AAAA,IACJ,UAAU;AAAA,MACR,SAAS;AAAA,MACT,aAAa;AAAA,MACb,SAAS;AAAA,MACT,aAAa;AAAA,MACb,QAAQ;AAAA,MACR,YAAY;AAAA,MACZ,MAAM;AAAA,MACN,UAAU;AAAA,IAAA;AAAA,EACZ;AAAA,EAEF,QAAQ;AAAA,IACN,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,MAAM;AAAA,EAAA;AAAA,EAER,YAAY;AAAA,IACV,UAAU;AAAA,MACR,OAAO;AAAA,MACP,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,OAAO;AAAA,MACP,OAAO;AAAA,IAAA;AAAA,IAET,YAAY;AAAA,MACV,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,MAAM;AAAA,IAAA;AAAA,IAER,YAAY;AAAA,MACV,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,SAAS;AAAA,IAAA;AAAA,EACX;AAAA,EAEF,SAAS;AAAA,IACP,OAAO;AAAA,IACP,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,OAAO;AAAA,EAAA;AAEX;"}

package/dist/index30.cjs

@@ -2,146 +2,11 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 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("./index40.cjs");
-const SingleSelectDropdown_module = require("./index61.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
-          );
-        })
-      ] })
-    ] })
-  ] });
-};
-exports.SingleSelectDropdown = SingleSelectDropdown;
+const clsx = require("./index38.cjs");
+const Select_module = require("./index57.cjs");
+const Select = react.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("select", { ref, className: clsx.clsx(Select_module.default.root, className), ...props, children })
+);
+Select.displayName = "Select";
+exports.Select = Select;
 //# sourceMappingURL=index30.cjs.map

package/dist/index30.cjs.map

@@ -1 +1 @@
-{"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":";;;;;;;;;AA8BO,MAAM,uBAAuB,CAAC;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,kBAAkB;AACpB,MAAiC;AAC/B,QAAM,CAAC,QAAQ,SAAS,IAAIA,MAAAA,SAAS,KAAK;AAC1C,QAAM,CAAC,YAAY,aAAa,IAAIA,MAAAA,SAAS,EAAE;AAC/C,QAAM,CAAC,cAAc,eAAe,IAAIA,MAAAA,SAAS,EAAE;AACnD,QAAM,eAAeC,MAAAA,OAAuB,IAAI;AAChD,QAAM,UAAUA,MAAAA,OAAuB,IAAI;AAE3C,QAAM,QAAQC,MAAAA,YAAY,MAAM;AAC9B,cAAU,KAAK;AACf,kBAAc,EAAE;AAChB,oBAAgB,EAAE;AAAA,EACpB,GAAG,CAAA,CAAE;AAELC,kBAAAA,gBAAgB,cAAc,KAAK;AACnCC,eAAAA,aAAa,OAAO,MAAM;AAE1B,QAAM,kBAAkBC,MAAAA,QAAQ,MAAM;AACpC,QAAI,CAAC,WAAW,KAAA,EAAQ,QAAO;AAC/B,UAAM,OAAO,WAAW,KAAA,EAAO,YAAA;AAC/B,WAAO,QAAQ,OAAO,CAAC,QAAQ;AAC7B,YAAM,MAAM,IAAI,SAAS,IAAI;AAC7B,aAAO,IAAI,cAAc,SAAS,IAAI,KAAK,IAAI,MAAM,cAAc,SAAS,IAAI;AAAA,IAClF,CAAC;AAAA,EACH,GAAG,CAAC,SAAS,UAAU,CAAC;AAExB,QAAM,eAAe,CAAC,UAAkB;AACtC,aAAS,KAAK;AACd,UAAA;AAAA,EACF;AAEA,QAAM,cAAc,CAAC,MAAwB;AAC3C,MAAE,gBAAA;AACF;AACA,UAAA;AAAA,EACF;AAEA,QAAM,gBAAgB,CAAC,MAA2B;AAChD,QAAI,CAAC,OAAQ;AAEb,QAAI,EAAE,QAAQ,aAAa;AACzB,QAAE,eAAA;AACF,sBAAgB,CAAC,SAAS,KAAK,IAAI,OAAO,GAAG,gBAAgB,SAAS,CAAC,CAAC;AAAA,IAC1E,WAAW,EAAE,QAAQ,WAAW;AAC9B,QAAE,eAAA;AACF,sBAAgB,CAAC,SAAS,KAAK,IAAI,OAAO,GAAG,CAAC,CAAC;AAAA,IACjD,WAAW,EAAE,QAAQ,WAAW,gBAAgB,KAAK,eAAe,gBAAgB,QAAQ;AAC1F,QAAE,eAAA;AACF,mBAAa,gBAAgB,YAAY,EAAE,KAAK;AAAA,IAClD;AAAA,EACF;AAEA,QAAM,iBAAiB,QAAQ,KAAK,CAAC,MAAM,EAAE,UAAU,QAAQ;AAC/D,QAAM,eAAe,uBAAsB,iDAAgB,WAAS,iDAAgB,UAAS;AAC7F,QAAM,YAAY,mBAAmB,aAAa;AAElD,SACEC,gCAAC,SAAI,WAAWC,4BAAAA,QAAO,MAAM,KAAK,cAAc,WAAW,eACzD,UAAA;AAAA,IAAAC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAWC,KAAAA,KAAKF,4BAAAA,QAAO,SAAS,EAAE,CAACA,oCAAO,MAAM,GAAG,QAAQ;AAAA,QAC3D,SAAS,MAAM;AACb,oBAAU,CAAC,SAAS,CAAC,IAAI;AACzB,0BAAgB,EAAE;AAAA,QACpB;AAAA,QACA,iBAAe;AAAA,QACf,iBAAc;AAAA,QAEd,UAAAD,2BAAAA,KAAC,OAAA,EAAI,WAAWC,4BAAAA,QAAO,gBACrB,UAAA;AAAA,UAAAC,2BAAAA,IAAC,OAAA,EAAI,WAAWD,4BAAAA,QAAO,SAAS,OAAOG,UAAAA,UAAU,IAAI,QAAQA,UAAAA,UAAU,IAAI,SAASC,UAAAA,aAAa,MAAK,QAAO,QAAO,gBAAe,aAAaC,UAAAA,kBAAkB,eAAc,SAAQ,gBAAe,SACrM,UAAAJ,2BAAAA,IAAC,YAAA,EAAS,QAAO,iBAAA,CAAiB,EAAA,CACpC;AAAA,UACAA,2BAAAA,IAAC,QAAA,EAAK,WAAWD,4BAAAA,QAAO,OAAQ,UAAA,OAAM;AAAA,UACtCC,2BAAAA,IAAC,QAAA,EAAK,WAAWD,4BAAAA,QAAO,OAAQ,UAAA,cAAa;AAAA,UAC5C,aACCC,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWD,4BAAAA,QAAO;AAAA,cAClB,SAAS;AAAA,cACT,MAAK;AAAA,cACL,UAAU;AAAA,cACV,cAAY,SAAS,KAAK;AAAA,cAC1B,WAAW,CAAC,MAAM;AAAE,oBAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AAAE,oBAAE,eAAA;AAAkB,8BAAY,CAAgC;AAAA,gBAAG;AAAA,cAAE;AAAA,cAEnI,0CAAC,OAAA,EAAI,OAAOG,UAAAA,UAAU,IAAI,QAAQA,UAAAA,UAAU,IAAI,SAASC,UAAAA,aAAa,MAAK,QAAO,QAAO,gBAAe,aAAaC,UAAAA,kBAAkB,eAAc,SAAQ,gBAAe,SAC1K,UAAA;AAAA,gBAAAJ,2BAAAA,IAAC,QAAA,EAAK,IAAG,MAAK,IAAG,KAAI,IAAG,KAAI,IAAG,KAAA,CAAK;AAAA,gBACpCA,2BAAAA,IAAC,UAAK,IAAG,KAAI,IAAG,KAAI,IAAG,MAAK,IAAG,KAAA,CAAK;AAAA,cAAA,EAAA,CACtC;AAAA,YAAA;AAAA,UAAA;AAAA,QACF,EAAA,CAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,IAGD,0CACE,OAAA,EAAI,WAAWD,4BAAAA,QAAO,OAAO,MAAK,WAAU,KAAK,SAChD,UAAA;AAAA,MAAAC,2BAAAA,IAAC,OAAA,EAAI,WAAWD,4BAAAA,QAAO,iBACrB,UAAAC,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAWD,4BAAAA,QAAO;AAAA,UAClB,aAAa,UAAU,MAAM,YAAA,CAAa;AAAA,UAC1C,OAAO;AAAA,UACP,UAAU,CAAC,MAAM;AACf,0BAAc,EAAE,OAAO,KAAK;AAC5B,4BAAgB,EAAE;AAAA,UACpB;AAAA,UACA,SAAS,CAAC,MAAM,EAAE,gBAAA;AAAA,QAAgB;AAAA,MAAA,GAEtC;AAAA,MACAD,2BAAAA,KAAC,OAAA,EAAI,WAAWC,4BAAAA,QAAO,MACpB,UAAA;AAAA,QAAA,gBAAgB,WAAW,KAC1BC,2BAAAA,IAAC,SAAI,WAAWD,oCAAO,WAAW,UAAA,mBAAA,CAAgB;AAAA,QAEnD,gBAAgB,IAAI,CAAC,KAAK,MAAM;AAC/B,gBAAM,aAAa,IAAI,UAAU;AACjC,gBAAM,YAAY,MAAM;AACxB,iBACEC,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cAEC,MAAK;AAAA,cACL,WAAWC,KAAAA,KAAKF,4BAAAA,QAAO,QAAQ;AAAA,gBAC7B,CAACA,4BAAAA,QAAO,QAAQ,GAAG;AAAA,gBACnB,CAACA,4BAAAA,QAAO,OAAO,GAAG;AAAA,cAAA,CACnB;AAAA,cACD,SAAS,MAAM,aAAa,IAAI,KAAK;AAAA,cACrC,MAAK;AAAA,cACL,iBAAe;AAAA,cAEf,UAAAD,2BAAAA,KAAC,QAAA,EAAK,WAAWC,4BAAAA,QAAO,aACrB,UAAA;AAAA,gBAAA,IAAI,SAAS,IAAI;AAAA,gBACjB,IAAI,UAAU,UACbC,2BAAAA,IAAC,UAAK,WAAWD,4BAAAA,QAAO,aAAc,UAAA,IAAI,MAAA,CAAM;AAAA,cAAA,EAAA,CAEpD;AAAA,YAAA;AAAA,YAfK,IAAI;AAAA,UAAA;AAAA,QAkBf,CAAC;AAAA,MAAA,EAAA,CACH;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,GAEJ;AAEJ;;"}
+{"version":3,"file":"index30.cjs","sources":["../src/primitives/Select/Select.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport styles from './Select.module.css';\n\nexport interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {}\n\nexport const Select = forwardRef<HTMLSelectElement, SelectProps>(\n  ({ className, children, ...props }, ref) => (\n    <select ref={ref} className={clsx(styles.root, className)} {...props}>\n      {children}\n    </select>\n  ),\n);\n\nSelect.displayName = 'Select';\n"],"names":["forwardRef","jsx","clsx","styles"],"mappings":";;;;;;AAMO,MAAM,SAASA,MAAAA;AAAAA,EACpB,CAAC,EAAE,WAAW,UAAU,GAAG,MAAA,GAAS,QAClCC,2BAAAA,IAAC,YAAO,KAAU,WAAWC,KAAAA,KAAKC,sBAAO,MAAM,SAAS,GAAI,GAAG,OAC5D,SAAA,CACH;AAEJ;AAEA,OAAO,cAAc;;"}

package/dist/index30.js

@@ -1,147 +1,12 @@
-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 "./index40.js";
-import styles from "./index61.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
-          );
-        })
-      ] })
-    ] })
-  ] });
-};
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { clsx } from "./index38.js";
+import styles from "./index57.js";
+const Select = forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx("select", { ref, className: clsx(styles.root, className), ...props, children })
+);
+Select.displayName = "Select";
 export {
-  SingleSelectDropdown
+  Select
 };
 //# sourceMappingURL=index30.js.map