@cloudflare/kumo 2.1.0 → 2.2.0

package/dist/chunks/SankeyChart-i4vgcatj89zpgpl9.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"SankeyChart-i4vgcatj89zpgpl9.js","sources":["../../src/components/chart/Color.ts","../../src/components/chart/EChart.tsx","../../src/components/chart/TimeseriesChart.tsx","../../src/components/chart/Legend.tsx","../../src/components/chart/SankeyChart.tsx"],"sourcesContent":["/**\n * Categorical colors for light mode — used when assigning colors to data series\n * by index (e.g. the first series gets Blue, the second gets Violet, etc.).\n */\nenum ChartCategoricalLightColors {\n  Blue = \"#4290F0\",\n  Yellow = \"#F5B647\",\n  Pink = \"#E8649D\",\n  Purple = \"#8D58EE\",\n  Teal = \"#50C3B6\",\n  Orange = \"#D37536\",\n}\n\n/**\n * Categorical colors for dark mode\n */\nenum ChartCategoricalDarkColors {\n  Blue = \"#4290F0\",\n  Yellow = \"#EEB720\",\n  Pink = \"#E8649D\",\n  Purple = \"#8D58EE\",\n  Teal = \"#50C3B6\",\n  Orange = \"#D37536\",\n}\n\n/**\n * Semantic colors for light mode — used to convey meaning (status, severity)\n * rather than just distinguishing series. Use via `ChartPalette.semantic()`.\n */\nenum ChartSemanticLightColors {\n  Attention = \"#FC574A\",\n  Warning = \"#F8A054\",\n  Success = \"#00A63E\",\n  Neutral = \"#B9D6FF\",\n  Disabled = \"#CBCBCB\",\n  Skeleton = \"#DDDDDD\",\n}\n\n/**\n * Semantic colors for dark mode\n */\nenum ChartSemanticDarkColors {\n  Attention = \"#FC574A\",\n  Warning = \"#F8A054\",\n  Success = \"#00A63E\",\n  Neutral = \"#8EC5FF\",\n  Disabled = \"#878787\",\n  Skeleton = \"#5C5C5C\",\n}\n\nexport type ChartSemanticColorName =\n  | \"Attention\"\n  | \"Warning\"\n  | \"Success\"\n  | \"Neutral\"\n  | \"Disabled\"\n  | \"Skeleton\";\n\n/**\n * Sequential color palettes for light mode with the colour in position #2 of the array as the base.\n */\nconst sequentialLight = {\n  blues: [\"#E1EAF4\", \"#8EBCF6\", \"#4290F0\", \"#0E58B4\", \"#03254F\"],\n};\n\n/**\n * Sequential color palettes for dark mode. These are the reverse of the light mode palettes using the same base color (position 2).\n */\nconst sequentialDark = {\n  blues: [\"#03254F\", \"#0E58B4\", \"#4290F0\", \"#A6BFDD\", \"#E1EAF4\"],\n};\n\n/**\n * Ordered list of categorical colors for light mode, indexed by series position.\n * Used as the default ECharts color palette when `isDarkMode` is `false`.\n */\nexport const CHART_LIGHT_COLORS = [\n  ChartCategoricalLightColors.Blue,\n  ChartCategoricalLightColors.Yellow,\n  ChartCategoricalLightColors.Pink,\n  ChartCategoricalLightColors.Purple,\n  ChartCategoricalLightColors.Teal,\n  ChartCategoricalLightColors.Orange,\n];\n\n/**\n * Ordered list of categorical colors for dark mode, indexed by series position.\n * Used as the default ECharts color palette when `isDarkMode` is `true`.\n */\nexport const CHART_DARK_COLORS = [\n  ChartCategoricalDarkColors.Blue,\n  ChartCategoricalDarkColors.Yellow,\n  ChartCategoricalDarkColors.Pink,\n  ChartCategoricalDarkColors.Purple,\n  ChartCategoricalDarkColors.Teal,\n  ChartCategoricalDarkColors.Orange,\n];\n\n/**\n * Utilities for resolving Kumo chart colors by semantic name or series index.\n * All functions accept an `isDarkMode` flag and return the appropriate color string.\n */\nexport namespace ChartPalette {\n  /**\n   * Returns the hex color for a named semantic value (status, severity, etc.).\n   *\n   * @example\n   * ```ts\n   * ChartPalette.semantic(\"Attention\")           // \"#FC574A\" (light)\n   * ChartPalette.semantic(\"Warning\", true)       // \"#F8A054\" (dark)\n   * ```\n   */\n  export function semantic(\n    name: ChartSemanticColorName,\n    isDarkMode = false,\n  ): string {\n    return isDarkMode\n      ? ChartSemanticDarkColors[name]\n      : ChartSemanticLightColors[name];\n  }\n\n  /**\n   * Returns the categorical color for a given series index.\n   * Wraps around via modulo when `index` exceeds the palette length (6 colors).\n   *\n   * @example\n   * ```ts\n   * ChartPalette.categorical(0)        // Blue (light)\n   * ChartPalette.categorical(0, true)  // Blue (dark)\n   * ChartPalette.categorical(6)        // wraps back to Blue\n   * ```\n   */\n  export function categorical(index: number, isDarkMode = false): string {\n    return isDarkMode\n      ? CHART_DARK_COLORS[index % CHART_DARK_COLORS.length]\n      : CHART_LIGHT_COLORS[index % CHART_LIGHT_COLORS.length];\n  }\n\n  /**\n   * Returns all steps of a named sequential palette as an array.\n   *\n   * @example\n   * ```ts\n   * ChartPalette.sequential(\"blues\")        // 5-step array (light)\n   * ChartPalette.sequential(\"blues\", true)  // 5-step array (dark)\n   * ```\n   */\n  export function sequential(\n    palette: keyof typeof sequentialLight,\n    isDarkMode = false,\n  ): string[] {\n    return isDarkMode\n      ? [...sequentialDark[palette]]\n      : [...sequentialLight[palette]];\n  }\n\n  /**\n   * Returns the hex color for chart text/labels.\n   *\n   * @example\n   * ```ts\n   * ChartPalette.text(\"primary\")        // \"#6B7280\" (light)\n   * ChartPalette.text(\"primary\", true)  // \"#9CA3AF\" (dark)\n   * ChartPalette.text(\"secondary\")      // \"#9CA3AF\" (light)\n   * ```\n   */\n  export function text(variant: \"primary\" | \"secondary\", isDarkMode = false) {\n    const colors = {\n      light: { primary: \"#6B7280\", secondary: \"#9CA3AF\" },\n      dark: { primary: \"#9CA3AF\", secondary: \"#6B7280\" },\n    };\n    return isDarkMode ? colors.dark[variant] : colors.light[variant];\n  }\n}\n","import type * as echarts from \"echarts/core\";\nimport type {\n  EChartsOption,\n  SetOptionOpts,\n  TooltipComponentOption,\n} from \"echarts\";\nimport { forwardRef, useEffect, useRef } from \"react\";\nimport { cn } from \"../../utils\";\nimport { CHART_DARK_COLORS, CHART_LIGHT_COLORS } from \"./Color\";\n\n/** Parameters passed to mouse event handlers on chart elements */\ntype EChartsMouseEventParams = {\n  /** The type of component that triggered the event (e.g. \"series\", \"markPoint\") */\n  componentType: string;\n  /** Series type (e.g. \"line\", \"bar\") — present when componentType is \"series\" */\n  seriesType?: string;\n  /** Zero-based index of the series in the option.series array */\n  seriesIndex?: number;\n  /** Name of the series */\n  seriesName?: string;\n  /** Name of the data item */\n  name?: string;\n  /** Zero-based index of the data item within its series */\n  dataIndex?: number;\n  /** Raw data item value */\n  data?: any;\n  /** Sub-type of data (e.g. \"node\", \"edge\" for graph series) */\n  dataType?: string;\n  /** Numeric or array value of the data item */\n  value?: number | any[];\n  /** Resolved color of the series or data item */\n  color?: string;\n};\n\n/**\n * Tooltip options with the `formatter` property removed and replaced with\n * `dangerousHtmlFormatter` to make the security implications more explicit.\n */\nexport type SafeTooltipOption = Omit<TooltipComponentOption, \"formatter\"> & {\n  /**\n   * USE WITH CAUTION: Use this only for trusted HTML content.\n   * When building tooltip HTML with user-provided data, always sanitize\n   * the input to prevent XSS vulnerabilities. Recommended: use\n   * `encodeHTML` from `echarts/format` to escape HTML special characters.\n   */\n  dangerousHtmlFormatter?: TooltipComponentOption[\"formatter\"];\n};\n\nexport type KumoChartOption = {\n  [K in keyof EChartsOption]: K extends \"tooltip\"\n    ? SafeTooltipOption | SafeTooltipOption[] | undefined\n    : EChartsOption[K];\n};\n\n/**\n * ECharts event handlers that can be attached to a `Chart`.\n * Pass a subset via the `onEvents` prop; handlers are registered lazily and\n * cleaned up automatically when removed or when the chart is unmounted.\n */\nexport interface ChartEvents {\n  // Mouse events — fired on chart elements (series, marks, etc.)\n  click: (params: EChartsMouseEventParams) => void;\n  dblclick: (params: EChartsMouseEventParams) => void;\n  mousedown: (params: EChartsMouseEventParams) => void;\n  mousemove: (params: EChartsMouseEventParams) => void;\n  mouseup: (params: EChartsMouseEventParams) => void;\n  mouseover: (params: EChartsMouseEventParams) => void;\n  mouseout: (params: EChartsMouseEventParams) => void;\n  /** Fired when the pointer leaves the chart canvas entirely */\n  globalout: (params: any) => void;\n  contextmenu: (params: any) => void;\n\n  // Legend events\n  /** Fired when any legend item's selected state changes */\n  legendselectchanged: (params: {\n    name: string;\n    /** Map of series name → selected state for all legend items */\n    selected: Record<string, boolean>;\n  }) => void;\n  legendselected: (params: any) => void;\n  legendunselected: (params: any) => void;\n  legendscroll: (params: any) => void;\n\n  // Data zoom / timeline events\n  datazoom: (params: any) => void;\n  datarangeselected: (params: any) => void;\n  timelinechanged: (params: any) => void;\n  timelineplaychanged: (params: any) => void;\n\n  // Toolbox events\n  restore: (params: any) => void;\n  dataviewchanged: (params: any) => void;\n  magictypechanged: (params: any) => void;\n\n  // Pie chart selection events\n  pieselectchanged: (params: any) => void;\n  pieselected: (params: any) => void;\n  pieunselected: (params: any) => void;\n\n  // Map / geo selection events\n  mapselectchanged: (params: any) => void;\n  mapselected: (params: any) => void;\n  mapunselected: (params: any) => void;\n  geoselectchanged: (params: any) => void;\n  geoselected: (params: any) => void;\n  geounselected: (params: any) => void;\n\n  axisareaselected: (params: any) => void;\n\n  // Brush / selection events\n  brush: (params: any) => void;\n  brushselected: (params: any) => void;\n  /** Fired when the user finishes drawing a brush selection */\n  brushend: (params: {\n    areas: Array<{\n      /** Coordinate range covered by the brush — interpretation depends on axis type */\n      coordRange: any;\n      brushType?: string;\n      panelId?: string;\n      range?: any;\n    }>;\n  }) => void;\n}\n\n/** Props for the low-level `Chart` wrapper around Apache ECharts */\nexport interface ChartProps {\n  /**\n   * The ECharts core instance imported by the consumer.\n   * Passed in rather than imported directly so the consumer controls which\n   * ECharts modules are bundled (tree-shaking).\n   */\n  echarts: typeof echarts;\n  /** ECharts option object — passed through to `chart.setOption()` */\n  options: KumoChartOption;\n  /**\n   * Additional options passed as the second argument to `chart.setOption()`.\n   * Defaults to `{ notMerge: false, lazyUpdate: true }`.\n   */\n  optionUpdateBehavior?: SetOptionOpts;\n  /** Additional CSS classes applied to the chart container `<div>` */\n  className?: string;\n  /**\n   * When `true`, initialises ECharts with its built-in dark theme.\n   * Changing this value after mount destroys and re-creates the chart instance.\n   */\n  isDarkMode?: boolean;\n  /** Height of the chart container in pixels. Defaults to `350`. */\n  height?: number;\n  /** Subset of ECharts events to listen for. Handlers are bound/unbound reactively. */\n  onEvents?: Partial<ChartEvents>;\n}\n\nconst transformTooltip = (tooltipObj: SafeTooltipOption) => {\n  const { dangerousHtmlFormatter, ...restOfTooltip } = tooltipObj;\n  return {\n    ...restOfTooltip,\n    formatter: dangerousHtmlFormatter,\n  };\n};\n\nconst prepareChartOptions = (options: KumoChartOption): EChartsOption => {\n  if (!options.tooltip) return options;\n\n  return {\n    ...options,\n    tooltip: Array.isArray(options.tooltip)\n      ? options.tooltip.map(transformTooltip)\n      : transformTooltip(options.tooltip),\n  };\n};\n\n/**\n * Chart — a low-level wrapper around [Apache ECharts](https://echarts.apache.org).\n *\n * Manages the ECharts instance lifecycle (init, option updates, event binding,\n * resize observation, and disposal). Exposes the raw `echarts.ECharts` instance\n * via `ref` for imperative access when needed.\n *\n * Prefer `TimeseriesChart` for time-series data; use this component when you\n * need full control over the ECharts option object.\n *\n * @example\n * ```tsx\n * import * as echarts from \"echarts/core\";\n * import { BarChart } from \"echarts/charts\";\n * import { GridComponent } from \"echarts/components\";\n * import { CanvasRenderer } from \"echarts/renderers\";\n *\n * echarts.use([BarChart, GridComponent, CanvasRenderer]);\n *\n * <Chart\n *   echarts={echarts}\n *   options={{ xAxis: { data: [\"A\", \"B\"] }, yAxis: {}, series: [{ type: \"bar\", data: [1, 2] }] }}\n * />\n * ```\n */\nexport const Chart = forwardRef<echarts.ECharts, ChartProps>(function Chart(\n  {\n    echarts,\n    options,\n    optionUpdateBehavior,\n    className,\n    isDarkMode,\n    height = 350,\n    onEvents,\n  }: ChartProps,\n  ref,\n) {\n  // Ref to the container DOM node that ECharts renders into\n  const elRef = useRef<HTMLDivElement | null>(null);\n  // Ref to the active ECharts instance\n  const chartRef = useRef<echarts.ECharts | null>(null);\n  // Keeps the latest onEvents object without triggering re-binding on every render\n  const handlersRef = useRef<Partial<ChartEvents>>({});\n  // Stable wrapper functions per event name — avoids creating new closures on re-render\n  const wrappersRef = useRef<Record<string, (params: any) => void>>({});\n  // Tracks which event names are currently bound to the chart instance\n  const boundEventsRef = useRef<Set<string>>(new Set());\n\n  // Init and cleanup\n  useEffect(() => {\n    if (!elRef.current) return;\n\n    const chart = echarts.init(\n      elRef.current,\n      isDarkMode\n        ? \"dark\"\n        : {\n            color: isDarkMode ? CHART_DARK_COLORS : CHART_LIGHT_COLORS,\n          },\n    );\n    chartRef.current = chart;\n\n    if (typeof ref === \"function\") ref(chart);\n    else if (ref) ref.current = chart;\n\n    return () => {\n      for (const event of boundEventsRef.current) {\n        const wrapper = wrappersRef.current[event];\n        if (wrapper) chart.off(event, wrapper);\n      }\n      boundEventsRef.current.clear();\n      if (typeof ref === \"function\") ref(null);\n      else if (ref) ref.current = null;\n      chartRef.current = null;\n      chart.dispose();\n    };\n  }, [elRef, isDarkMode]);\n\n  // Update options\n  useEffect(() => {\n    const chart = chartRef.current;\n    if (!chart) return;\n\n    chart.setOption(prepareChartOptions(options), {\n      notMerge: false,\n      lazyUpdate: true,\n      ...optionUpdateBehavior,\n    });\n  }, [isDarkMode, optionUpdateBehavior, options]);\n\n  // Keep handlersRef in sync so wrapper closures always call the latest handler\n  // without needing to re-bind listeners on every render\n  useEffect(() => {\n    handlersRef.current = onEvents ?? {};\n  }, [onEvents]);\n\n  // Reactively bind and unbind event listeners when onEvents changes.\n  // Uses stable wrapper functions (wrappersRef) so the same function reference\n  // is passed to both chart.on() and chart.off(), which ECharts requires.\n  useEffect(() => {\n    const chart = chartRef.current;\n    if (!chart) return;\n\n    const nextBound = new Set<string>();\n\n    for (const [event, handler] of Object.entries(onEvents ?? {})) {\n      if (typeof handler !== \"function\") continue;\n      nextBound.add(event);\n\n      if (!wrappersRef.current[event]) {\n        wrappersRef.current[event] = (params: any) => {\n          const current = handlersRef.current as Record<\n            string,\n            ((p: any) => void) | undefined\n          >;\n          current[event]?.(params);\n        };\n      }\n\n      if (!boundEventsRef.current.has(event)) {\n        chart.on(event, wrappersRef.current[event]);\n      }\n    }\n\n    for (const event of boundEventsRef.current) {\n      if (nextBound.has(event)) continue;\n      const wrapper = wrappersRef.current[event];\n      if (wrapper) {\n        chart.off(event, wrapper);\n      }\n    }\n\n    boundEventsRef.current = nextBound;\n  }, [echarts, isDarkMode, onEvents]);\n\n  // Resize handling\n  useEffect(() => {\n    const chart = chartRef.current;\n    const el = elRef.current;\n    if (!chart || !el) return;\n\n    // Flag to skip the very first trigger\n    let isInitial = true;\n\n    const ro = new ResizeObserver(() => {\n      if (isInitial) {\n        isInitial = false;\n        return; // Skip the first resize to let the animation play\n      }\n      chart.resize();\n    });\n\n    ro.observe(el);\n\n    return () => ro.disconnect();\n  }, []);\n\n  return (\n    <div\n      ref={elRef}\n      className={cn(\"w-full\", className)}\n      style={{ height }}\n      tabIndex={options.aria?.enabled ? 0 : undefined}\n      role={options.aria?.enabled ? \"img\" : undefined}\n    />\n  );\n});\n\nChart.displayName = \"Chart\";\n","import type * as echarts from \"echarts/core\";\nimport type { LineSeriesOption, BarSeriesOption } from \"echarts/charts\";\nimport type { EChartsOption, SeriesOption } from \"echarts\";\nimport { useEffect, useMemo, useRef } from \"react\";\nimport { Chart, ChartEvents, KumoChartOption } from \"./EChart\";\n\n/** A single data series rendered on a `TimeseriesChart` */\nexport interface TimeseriesData {\n  /** Display name shown in tooltips and legends */\n  name: string;\n  /** Array of `[timestamp_ms, value]` tuples ordered by time */\n  data: [number, number][];\n  /** Hex color string used for this series' line, bars, and legend dot */\n  color: string;\n}\n\n/** Props for `TimeseriesChart` */\nexport interface TimeseriesChartProps {\n  /**\n   * The ECharts core instance imported by the consumer.\n   * Passed in rather than imported directly so the consumer controls which\n   * ECharts modules are bundled (tree-shaking).\n   */\n  echarts: typeof echarts;\n  /** Visual style of each series. Defaults to `\"line\"`. */\n  type?: \"line\" | \"bar\";\n  /** Array of time series data to display on the chart */\n  data: TimeseriesData[];\n  /** Label for the x-axis (time axis) */\n  xAxisName?: string;\n  /** Number of ticks to display on the x-axis */\n  xAxisTickCount?: number;\n  /**\n   * Custom formatter for x-axis tick labels.\n   * Receives the raw timestamp in milliseconds and returns a display string,\n   * overriding ECharts' built-in time formatting.\n   */\n  xAxisTickFormat?: (value: number) => string;\n  /**\n   * Custom formatter for y-axis tick labels.\n   * Receives the raw value and returns a display string.\n   * When omitted, ECharts' built-in formatter is used.\n   */\n  yAxisTickFormat?: (value: number) => string;\n  /**\n   * @deprecated Use `tooltipValueFormat` instead. This prop formats tooltip\n   * values, not y-axis tick labels. It will be removed in a future major version.\n   */\n  yAxisTickLabelFormat?: (value: number) => string;\n  /** Label for the y-axis (value axis) */\n  yAxisName?: string;\n  /** Number of ticks to display on the y-axis */\n  yAxisTickCount?: number;\n  /**\n   * Custom formatter for tooltip values.\n   * Receives the raw y-value and returns a display string.\n   * When omitted, the raw value is shown. Takes precedence over the\n   * deprecated `yAxisTickLabelFormat` prop.\n   */\n  tooltipValueFormat?: (value: number) => string;\n  /** Indicates incomplete data periods with optional before/after timestamps in ms */\n  incomplete?: { before?: number; after?: number };\n  /** Height of the chart in pixels. Defaults to `350`. */\n  height?: number;\n  /** Callback fired when user selects a time range via brush selection */\n  onTimeRangeChange?: (from: number, to: number) => void;\n  /** When `true`, switches the chart to ECharts' built-in dark theme */\n  isDarkMode?: boolean;\n  /**\n   * When `true`, renders a vertical gradient fill beneath each line series.\n   * The gradient fades from the series' color at the top to transparent at the bottom.\n   * Has no effect when `type` is `\"bar\"`.\n   */\n  gradient?: boolean;\n  /**\n   * When `true`, hides the chart and displays an animated sine-wave skeleton\n   * that oscillates back and forth to indicate that data is being fetched.\n   */\n  loading?: boolean;\n  /**\n   * Accessible description for screen readers. When provided, it is passed to\n   * ECharts' `aria.label.description` and announced when the chart receives\n   * focus. Consumers are responsible for writing a meaningful description —\n   * see the W3C guidance on complex images for recommendations.\n   *\n   * @see https://www.w3.org/WAI/tutorials/images/complex/\n   * @see https://echarts.apache.org/handbook/en/best-practices/aria/\n   */\n  ariaDescription?: string;\n}\n\n/**\n * TimeseriesChart — a time-series line or bar chart.\n *\n * Built on `Chart` (Apache ECharts) with opinionated defaults for time-series data:\n * a time-typed x-axis, dashed lines for incomplete data periods, brush-based\n * time range selection, and automatic tooltip deduplication.\n *\n * @example\n * ```tsx\n * import * as echarts from \"echarts/core\";\n * import { LineChart } from \"echarts/charts\";\n * import { GridComponent, TooltipComponent, BrushComponent, ToolboxComponent } from \"echarts/components\";\n * import { CanvasRenderer } from \"echarts/renderers\";\n *\n * echarts.use([LineChart, GridComponent, TooltipComponent, BrushComponent, ToolboxComponent, CanvasRenderer]);\n *\n * const [range, setRange] = useState<[number, number]>();\n *\n * <TimeseriesChart\n *   echarts={echarts}\n *   data={[{ name: \"Requests\", data: [[Date.now(), 42]], color: \"#086FFF\" }]}\n *   xAxisName=\"Time\"\n *   xAxisTickFormat={(ts) => new Date(ts).toLocaleTimeString()}\n *   yAxisName=\"Count\"\n *   yAxisTickFormat={(value) => `${value / 1000}k`}\n *   tooltipValueFormat={(value) => `${value.toFixed(2)} req/s`}\n *   onTimeRangeChange={(from, to) => setRange([from, to])}\n * />\n * ```\n */\nexport function TimeseriesChart({\n  echarts,\n  type = \"line\",\n  data,\n  xAxisName,\n  xAxisTickCount,\n  xAxisTickFormat,\n  yAxisTickFormat,\n  yAxisTickLabelFormat,\n  yAxisName,\n  yAxisTickCount,\n  tooltipValueFormat,\n  onTimeRangeChange,\n  height = 350,\n  incomplete,\n  isDarkMode,\n  gradient,\n  loading,\n  ariaDescription,\n}: TimeseriesChartProps) {\n  const chartRef = useRef<echarts.ECharts | null>(null);\n  const incompleteBefore = incomplete?.before;\n  const incompleteAfter = incomplete?.after;\n\n  const options = useMemo(() => {\n    const transformSeries: Array<LineSeriesOption | BarSeriesOption> = [];\n\n    const seriesType =\n      type === \"bar\"\n        ? ({ type: \"bar\", stack: \"total\" } as const)\n        : ({ type: \"line\", showSymbol: false } as const);\n\n    for (const s of data) {\n      const incompleteBeforePoints =\n        incompleteBefore && type === \"line\"\n          ? s.data.filter((point) => point[0] <= incompleteBefore)\n          : [];\n\n      const incompleteAfterPoints =\n        incompleteAfter && type === \"line\"\n          ? s.data.filter((point) => point[0] >= incompleteAfter)\n          : [];\n\n      const completePoints =\n        incompleteBeforePoints.length > 0 || incompleteAfterPoints.length > 0\n          ? s.data.slice(\n              Math.max(0, incompleteBeforePoints.length - 1),\n              Math.max(0, s.data.length - incompleteAfterPoints.length + 1),\n            )\n          : s.data;\n\n      // Main complete data series\n      const areaStyle =\n        gradient && type === \"line\"\n          ? {\n              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [\n                { offset: 0, color: colorWithOpacity(s.color, 0.4) },\n                { offset: 1, color: colorWithOpacity(s.color, 0) },\n              ]),\n            }\n          : undefined;\n\n      transformSeries.push({\n        data: completePoints,\n        color: s.color,\n        name: s.name,\n        emphasis: { focus: \"series\" },\n        ...(areaStyle ? { areaStyle } : {}),\n        ...seriesType,\n      });\n\n      // Incomplete data series with dashed lines\n      const incompleteSeriesConfig = {\n        color: s.color,\n        name: s.name,\n        type: \"line\" as const,\n        lineStyle: { type: \"dashed\" as const },\n        showSymbol: false,\n        emphasis: { focus: \"series\" as const },\n      };\n\n      if (incompleteBeforePoints.length > 0) {\n        transformSeries.push({\n          ...incompleteSeriesConfig,\n          data: incompleteBeforePoints,\n        });\n      }\n\n      if (incompleteAfterPoints.length > 0) {\n        transformSeries.push({\n          ...incompleteSeriesConfig,\n          data: incompleteAfterPoints,\n        });\n      }\n    }\n\n    return {\n      aria: {\n        enabled: true,\n        ...(ariaDescription && { label: { description: ariaDescription } }),\n      },\n      brush: {\n        xAxisIndex: \"all\" as const,\n        brushType: \"lineX\" as const,\n        brushMode: \"single\" as const,\n        outOfBrush: {\n          colorAlpha: 0.3,\n        },\n        brushStyle: {\n          borderWidth: 1,\n          color: \"rgba(120,140,180,0.3)\",\n          borderColor: \"rgba(120,140,180,0.8)\",\n        },\n      },\n      tooltip: {\n        trigger: \"axis\" as const,\n        appendTo: \"body\",\n        axisPointer: { type: \"shadow\" as const },\n        dangerousHtmlFormatter: (params) => {\n          const items = Array.isArray(params) ? params : [params];\n\n          // Track seen series names to avoid duplicates in tooltip\n          // This is needed because incomplete data series (dashed lines) and complete data series\n          // can overlap at the same timestamp, causing duplicate entries in the tooltip\n          const seenNames = new Set<string>();\n          const filteredParams = items.filter((param: any) => {\n            if (seenNames.has(param.seriesName)) return false;\n            seenNames.add(param.seriesName);\n            return true;\n          });\n\n          const first = filteredParams[0] as {\n            value?: [number, number];\n            axisValue?: number;\n          };\n\n          const ts = first?.value?.[0] ?? first?.axisValue;\n\n          const header =\n            ts != null\n              ? `<div style=\"font-weight:600;margin-bottom:4px;\">${echarts.format.encodeHTML(formatTimestamp(ts))}</div>`\n              : \"\";\n\n          const rows = filteredParams\n            .map((param: any) => {\n              const value = param?.value?.[1];\n              const formatFn = tooltipValueFormat ?? yAxisTickLabelFormat;\n              const formattedValue = formatFn\n                ? echarts.format.encodeHTML(String(formatFn(value)))\n                : echarts.format.encodeHTML(String(value));\n\n              return `${param.marker} ${echarts.format.encodeHTML(param.seriesName)}: <strong>${formattedValue}</strong>`;\n            })\n            .join(\"<br/>\");\n\n          return `${header}${rows}`;\n        },\n      },\n      backgroundColor: \"transparent\",\n      toolbox: { show: false },\n      xAxis: {\n        name: xAxisName,\n        nameLocation: \"middle\" as const,\n        nameGap: 30,\n        type: \"time\" as const,\n        splitLine: {\n          show: false,\n        },\n        axisLine: { show: false },\n        splitNumber: xAxisTickCount ?? 5,\n        ...(xAxisTickFormat && {\n          axisLabel: {\n            formatter: (value: number) => xAxisTickFormat(value),\n          },\n        }),\n      },\n      yAxis: {\n        name: yAxisName,\n        nameLocation: \"middle\" as const,\n        nameGap: 40,\n        type: \"value\" as const,\n        axisTick: { show: true },\n        axisLabel: {\n          margin: 15,\n          ...(yAxisTickFormat && {\n            formatter: (value: number) => yAxisTickFormat(value),\n          }),\n        },\n        splitLine: {\n          show: true,\n          lineStyle: { type: \"dashed\" as const, width: 1 },\n        },\n        splitNumber: yAxisTickCount,\n      },\n      grid: {\n        left: yAxisName ? 30 : 24,\n        right: 24,\n        top: 24,\n        bottom: xAxisName ? 30 : 24,\n      },\n      series: transformSeries as SeriesOption[],\n    } satisfies KumoChartOption;\n  }, [\n    data,\n    xAxisName,\n    xAxisTickCount,\n    xAxisTickFormat,\n    yAxisTickFormat,\n    yAxisTickLabelFormat,\n    yAxisName,\n    yAxisTickCount,\n    tooltipValueFormat,\n    incompleteBefore,\n    incompleteAfter,\n    type,\n    gradient,\n    echarts,\n    ariaDescription,\n  ]);\n\n  const events = useMemo<Partial<ChartEvents>>(() => {\n    if (!onTimeRangeChange) return {};\n\n    return {\n      brushend: (params) => {\n        const range = params.areas[0].coordRange;\n        onTimeRangeChange(range[0], range[1]);\n        chartRef.current?.dispatchAction({ type: \"brush\", areas: [] });\n      },\n    };\n  }, [onTimeRangeChange]);\n\n  // Activate the lineX brush cursor when a time-range callback is provided,\n  // and deactivate it on cleanup so the cursor resets when the prop is removed.\n  const hasTimeRangeCallback = !!onTimeRangeChange;\n  useEffect(() => {\n    const chart = chartRef.current;\n    if (chart && hasTimeRangeCallback) {\n      chart.dispatchAction({\n        type: \"takeGlobalCursor\",\n        key: \"brush\",\n        brushOption: {\n          brushType: \"lineX\" as const,\n          brushMode: \"single\" as const,\n        },\n      });\n\n      return () => {\n        chart.dispatchAction({\n          type: \"takeGlobalCursor\",\n          key: \"brush\",\n          brushOption: {\n            brushType: false,\n          },\n        });\n      };\n    }\n    // `loading` controls whether <Chart> is mounted. When it flips to false,\n    // chartRef.current becomes available and the brush cursor must be activated.\n    // Without this dep, the effect won't re-run after Chart mounts.\n  }, [chartRef, hasTimeRangeCallback, loading]);\n\n  return (\n    <div className=\"relative w-full\" style={{ height }}>\n      {loading && <ChartWaveLoader height={height} isDarkMode={isDarkMode} />}\n      {!loading && (\n        <Chart\n          echarts={echarts}\n          ref={chartRef}\n          options={options as EChartsOption}\n          height={height}\n          isDarkMode={isDarkMode}\n          onEvents={events}\n        />\n      )}\n    </div>\n  );\n}\n\n/**\n * Animated sine-wave skeleton shown while `TimeseriesChart` is in `loading` state.\n * Renders multiple staggered wave paths that sweep continuously left-to-right,\n * mimicking the motion of live time-series data being drawn.\n */\nfunction ChartWaveLoader({\n  height,\n  isDarkMode,\n}: {\n  height: number;\n  isDarkMode?: boolean;\n}) {\n  const mid = height / 2;\n  const amp = Math.min(height * 0.12, 28);\n  const period = 400;\n  const steps = 120;\n\n  const points: string[] = [];\n  for (let i = 0; i <= steps; i++) {\n    const x = -period + (i / steps) * period * 3;\n    const y = mid + Math.sin((i / steps) * 2 * Math.PI * 3) * amp;\n    points.push(`${i === 0 ? \"M\" : \"L\"}${x.toFixed(2)},${y.toFixed(2)}`);\n  }\n  const d = points.join(\" \");\n\n  const strokeColor = isDarkMode ? \"rgba(255,255,255,0.5)\" : \"rgba(0,0,0,0.2)\";\n\n  return (\n    <div\n      aria-hidden=\"true\"\n      className=\"absolute inset-0 overflow-hidden\"\n      style={{ height }}\n    >\n      <svg\n        width=\"100%\"\n        height={height}\n        viewBox={`0 0 ${period} ${height}`}\n        preserveAspectRatio=\"none\"\n        className=\"w-full animate-pulse\"\n      >\n        <path\n          d={d}\n          fill=\"none\"\n          stroke={strokeColor}\n          strokeWidth=\"2\"\n          style={{\n            animation: `kumo-chart-wave 2.4s linear infinite`,\n            transformOrigin: \"0 0\",\n          }}\n        />\n      </svg>\n    </div>\n  );\n}\n\n/**\n * Returns an `rgba(r, g, b, alpha)` string for any hex or rgb(a) color input,\n * replacing whatever opacity was already present with the given `alpha` (0–1).\n *\n * Handles:\n * - 6-digit hex:  `#RRGGBB`\n * - 8-digit hex:  `#RRGGBBAA`  ← strips existing alpha\n * - 3-digit hex:  `#RGB`\n * - `rgb(r, g, b)`\n * - `rgba(r, g, b, a)`  ← replaces existing alpha\n */\nfunction colorWithOpacity(color: string, alpha: number): string {\n  const a = Math.max(0, Math.min(1, alpha));\n\n  // rgb / rgba\n  const rgbMatch = color.match(\n    /rgba?\\(\\s*([\\d.]+)\\s*,\\s*([\\d.]+)\\s*,\\s*([\\d.]+)/i,\n  );\n  if (rgbMatch) {\n    return `rgba(${rgbMatch[1]}, ${rgbMatch[2]}, ${rgbMatch[3]}, ${a})`;\n  }\n\n  // hex — strip leading #\n  let hex = color.replace(/^#/, \"\");\n\n  // expand 3-digit → 6-digit\n  if (hex.length === 3) {\n    hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];\n  }\n\n  // strip 8-digit alpha → keep only 6\n  if (hex.length === 8) {\n    hex = hex.slice(0, 6);\n  }\n\n  const r = parseInt(hex.slice(0, 2), 16);\n  const g = parseInt(hex.slice(2, 4), 16);\n  const b = parseInt(hex.slice(4, 6), 16);\n\n  return `rgba(${r}, ${g}, ${b}, ${a})`;\n}\n\n/** Zero-pads a number to two digits (e.g. `5` → `\"05\"`) */\nfunction pad(n: number) {\n  return n.toString().padStart(2, \"0\");\n}\n\n/**\n * Formats a timestamp as `\"YYYY-MM-DD HH:mm:ss\"` for use in chart tooltips.\n * Accepts a Unix timestamp in milliseconds, an ISO date string, or a `Date` object.\n */\nfunction formatTimestamp(ts: number | string | Date): string {\n  const d = new Date(ts);\n  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;\n}\n","import { cn } from \"../../utils\";\n\n/** Shared props for both legend item variants */\ninterface LegendItemProps {\n  /** Series name shown as a label */\n  name: string;\n  /** Hex color string for the series indicator dot */\n  color: string;\n  /** Formatted value string to display */\n  value: string;\n  /** Optional unit label shown after the value (e.g. `\"ms\"`, `\"%\"`) */\n  unit?: string;\n  /** When `true`, renders the item at 50% opacity to indicate a deselected state */\n  inactive?: boolean;\n}\n\n/**\n * Large legend item — stacked layout with a colored dot + series name on top\n * and a large value with an optional small unit below. Use for prominent\n * single-metric displays such as dashboard cards.\n */\nfunction LargeItem({ color, value, name, unit, inactive }: LegendItemProps) {\n  return (\n    <div className=\"inline-flex flex-col gap-2 min-w-42 py-2\">\n      <div className=\"flex items-center gap-2\">\n        <span\n          className={cn(\"size-2 rounded-full inline-block\", {\n            \"opacity-50\": inactive,\n          })}\n          style={{ backgroundColor: color }}\n        />\n        <span className={cn(\"text-xs\", { \"opacity-50\": inactive })}>\n          {name}\n        </span>\n      </div>\n      <div className=\"flex items-baseline gap-0.5\">\n        <span\n          className={cn(\"text-lg font-medium leading-none\", {\n            \"opacity-50\": inactive,\n          })}\n        >\n          {value}\n        </span>\n        {unit && (\n          <span\n            className={cn(\"text-xs text-kumo-subtle leading-none\", {\n              \"opacity-50\": inactive,\n            })}\n          >\n            {unit}\n          </span>\n        )}\n      </div>\n    </div>\n  );\n}\n\n/**\n * Small legend item — inline layout with a colored dot, series name, and value\n * on a single row. Use for compact legends below or beside a chart.\n */\nfunction SmallItem({ color, value, name, inactive }: LegendItemProps) {\n  return (\n    <div className=\"inline-flex items-center gap-2\">\n      <span\n        className={cn(\"size-2 rounded-full inline-block\", {\n          \"opacity-50\": inactive,\n        })}\n        style={{ backgroundColor: color }}\n      />\n      <span className={cn(\"text-xs\", { \"opacity-50\": inactive })}>{name}</span>\n      <span className={cn(\"text-xs font-medium\", { \"opacity-50\": inactive })}>\n        {value}\n      </span>\n    </div>\n  );\n}\n\n/**\n * ChartLegend — pre-built legend item components for use alongside a chart.\n *\n * - `ChartLegend.SmallItem` — compact inline layout; suited for multi-series legends\n * - `ChartLegend.LargeItem` — stacked layout with a large value; suited for single-metric cards\n *\n * @example\n * ```tsx\n * <ChartLegend.SmallItem name=\"Requests\" color=\"#086FFF\" value=\"1,234\" />\n * <ChartLegend.LargeItem name=\"Latency\" color=\"#CF7EE9\" value=\"42\" unit=\"ms\" inactive />\n * ```\n */\nexport const ChartLegend = {\n  SmallItem,\n  LargeItem,\n};\n","import type * as echarts from \"echarts/core\";\nimport type { EChartsOption } from \"echarts\";\nimport { useMemo, useCallback } from \"react\";\nimport { Chart, type ChartEvents } from \"./EChart\";\nimport { ChartPalette } from \"./Color\";\n\nexport interface SankeyNodeData {\n  id?: string;\n  name: string;\n  color?: string;\n  /** Optional value/count to display above the node label */\n  value?: number;\n  /** Additional data to show in tooltip (e.g., { Apps: 166, Sessions: 122600 }) */\n  tooltipData?: Record<string, number | string>;\n  isDrillable?: boolean;\n  childCount?: number;\n}\n\nexport interface SankeyLinkData {\n  id?: string;\n  source: number;\n  target: number;\n  value: number;\n  isDrillable?: boolean;\n}\n\nexport type DrillTarget =\n  | { type: \"node\"; nodeId: string }\n  | { type: \"link\"; sourceId: string; targetId: string };\n\nexport interface DrillSelection {\n  id: string;\n  type: \"node\" | \"link\";\n  label: string;\n  depth: number;\n}\n\nexport interface DrillDownContext {\n  selections: DrillSelection[];\n  isMultiSelect: boolean;\n}\n\nexport interface SankeyData {\n  nodes: SankeyNodeData[];\n  links: SankeyLinkData[];\n}\n\n/** Parameters passed to the tooltip formatter */\nexport interface SankeyTooltipParams {\n  type: \"node\" | \"link\";\n  name: string;\n  node?: SankeyNodeData;\n  link?: { source: string; target: string; value: number };\n  color?: string;\n}\n\nexport interface SankeyChartProps {\n  /**\n   * The ECharts core instance imported by the consumer.\n   * Passed in rather than imported directly so the consumer controls which\n   * ECharts modules are bundled (tree-shaking).\n   */\n  echarts: typeof echarts;\n  /** Array of nodes in the Sankey diagram */\n  nodes: SankeyNodeData[];\n  /** Array of links connecting nodes by index */\n  links: SankeyLinkData[];\n  /** Height of the chart in pixels */\n  height?: number;\n  /** Show node values above labels (default: true if any node has a value) */\n  showNodeValues?: boolean;\n  /** Format function for node values (default: toLocaleString) */\n  formatValue?: (value: number) => string;\n  /** Custom tooltip formatter. Return HTML string or empty string to hide tooltip. */\n  tooltipFormatter?: (params: SankeyTooltipParams) => string;\n  nodeWidth?: number;\n  nodePadding?: number;\n  showTooltip?: boolean;\n  defaultNodeColor?: string;\n  /** Link fill style: 'gradient' blends source to target colors, 'gray' uses flat gray */\n  linkColor?: \"gradient\" | \"gray\";\n  linkOpacity?: number;\n  className?: string;\n  isDarkMode?: boolean;\n  onNodeClick?: (node: SankeyNodeData) => void;\n  onLinkClick?: (link: SankeyLinkData) => void;\n}\n\nconst defaultFormatValue = (value: number) => value.toLocaleString();\n\n/** Type guard for ECharts tooltip params */\ninterface TooltipParams {\n  dataType?: string;\n  name?: string;\n  data?: { source?: string; target?: string; value?: number };\n  value?: number | number[];\n  color?: string;\n}\n\nfunction isTooltipParams(params: unknown): params is TooltipParams {\n  return typeof params === \"object\" && params !== null;\n}\n\n/** Escape HTML special characters to prevent XSS in tooltips */\nconst escapeHtml = (str: string): string =>\n  str\n    .replace(/&/g, \"&amp;\")\n    .replace(/</g, \"&lt;\")\n    .replace(/>/g, \"&gt;\")\n    .replace(/\"/g, \"&quot;\")\n    .replace(/'/g, \"&#39;\");\n\n/**\n * Escape ECharts rich text metacharacters to prevent formatting issues.\n * Rich text syntax uses {styleName|text}, so | and } must be escaped.\n */\nconst escapeRichText = (str: string): string =>\n  str.replace(/[{}|]/g, (char) => `\\\\${char}`);\n\n/**\n * Sanitize a CSS color value to prevent injection attacks.\n * Only allows valid hex colors, rgb/rgba, hsl/hsla, and named colors.\n */\nconst sanitizeColor = (color: string): string => {\n  const fallback = \"#666\";\n  if (!color || typeof color !== \"string\") return fallback;\n\n  // Hex colors: #RGB, #RRGGBB, #RRGGBBAA\n  if (/^#(?:[0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(color)) {\n    return color;\n  }\n\n  // rgb/rgba: rgb(0,0,0) or rgba(0,0,0,0.5)\n  if (\n    /^rgba?\\(\\s*\\d{1,3}\\s*,\\s*\\d{1,3}\\s*,\\s*\\d{1,3}\\s*(?:,\\s*[\\d.]+\\s*)?\\)$/i.test(\n      color,\n    )\n  ) {\n    return color;\n  }\n\n  // hsl/hsla: hsl(0,0%,0%) or hsla(0,0%,0%,0.5)\n  if (\n    /^hsla?\\(\\s*\\d{1,3}\\s*,\\s*\\d{1,3}%\\s*,\\s*\\d{1,3}%\\s*(?:,\\s*[\\d.]+\\s*)?\\)$/i.test(\n      color,\n    )\n  ) {\n    return color;\n  }\n\n  // Named colors (basic set) - only alphanumeric, no special chars\n  if (/^[a-z]{3,20}$/i.test(color)) {\n    return color;\n  }\n\n  return fallback;\n};\n\nexport function SankeyChart({\n  echarts,\n  nodes,\n  links,\n  height = 400,\n  nodeWidth = 8,\n  nodePadding = 10,\n  showTooltip: enableTooltip = true,\n  showNodeValues,\n  formatValue = defaultFormatValue,\n  tooltipFormatter,\n  defaultNodeColor,\n  linkColor = \"gradient\",\n  linkOpacity = 0.5,\n  className,\n  isDarkMode,\n  onNodeClick,\n  onLinkClick,\n}: SankeyChartProps) {\n  const hasNodeValues = nodes.some((n) => n.value !== undefined);\n  const shouldShowValues = showNodeValues ?? hasNodeValues;\n  const options = useMemo<EChartsOption>(() => {\n    const labelColor = ChartPalette.text(\"primary\", isDarkMode);\n    const secondaryColor = ChartPalette.text(\"secondary\", isDarkMode);\n    // Build a map of node name to original node data for tooltip access\n    const nodeDataMap = new Map(nodes.map((n) => [n.name, n]));\n\n    const echartsNodes = nodes.map((node, index) => ({\n      name: node.name,\n      value: node.value,\n      itemStyle: {\n        color:\n          node.color ??\n          defaultNodeColor ??\n          ChartPalette.categorical(index, isDarkMode),\n      },\n    }));\n\n    const echartsLinks = links.map((link) => ({\n      source: nodes[link.source]?.name ?? \"\",\n      target: nodes[link.target]?.name ?? \"\",\n      value: link.value,\n    }));\n\n    return {\n      animation: true,\n      animationDuration: 500,\n      animationDurationUpdate: 300,\n      animationEasingUpdate: \"cubicInOut\",\n      tooltip: enableTooltip\n        ? {\n            trigger: \"item\",\n            triggerOn: \"mousemove\",\n            dangerousHtmlFormatter: (params: unknown) => {\n              if (!isTooltipParams(params)) return \"\";\n\n              if (params.dataType === \"node\" && params.name) {\n                const nodeData = nodeDataMap.get(params.name);\n                const color = sanitizeColor(\n                  nodeData?.color ?? params.color ?? \"#666\",\n                );\n\n                // Use custom formatter if provided\n                if (tooltipFormatter) {\n                  return tooltipFormatter({\n                    type: \"node\",\n                    name: params.name,\n                    node: nodeData,\n                    color,\n                  });\n                }\n\n                // Default node tooltip\n                const safeName = escapeHtml(params.name);\n                return `<div style=\"display:flex;align-items:center;gap:6px;\"><span style=\"display:inline-block;width:10px;height:10px;border-radius:50%;background:${color}\"></span><strong>${safeName}</strong></div>`;\n              }\n\n              if (params.dataType === \"edge\" && params.data) {\n                const { source, target, value } = params.data;\n\n                // Use custom formatter if provided\n                if (tooltipFormatter) {\n                  return tooltipFormatter({\n                    type: \"link\",\n                    name: `${source} → ${target}`,\n                    link: {\n                      source: source ?? \"\",\n                      target: target ?? \"\",\n                      value: value ?? 0,\n                    },\n                  });\n                }\n\n                // Get colors for source and target nodes\n                const sourceNode = nodeDataMap.get(source ?? \"\");\n                const targetNode = nodeDataMap.get(target ?? \"\");\n                const sourceColor = sanitizeColor(sourceNode?.color ?? \"#666\");\n                const targetColor = sanitizeColor(targetNode?.color ?? \"#666\");\n\n                // Default link tooltip with colored dots\n                const safeSource = escapeHtml(source ?? \"\");\n                const safeTarget = escapeHtml(target ?? \"\");\n                return `<div style=\"display:flex;align-items:center;gap:6px;margin-bottom:4px;\">\n                  <span style=\"display:inline-block;width:10px;height:10px;border-radius:50%;background:${sourceColor}\"></span>\n                  <strong>${safeSource}</strong>\n                  <span style=\"color:${secondaryColor}\">→</span>\n                  <span style=\"display:inline-block;width:10px;height:10px;border-radius:50%;background:${targetColor}\"></span>\n                  <strong>${safeTarget}</strong>\n                </div>\n                <strong>${value !== undefined ? escapeHtml(formatValue(value)) : \"\"}</strong>`;\n              }\n\n              return \"\";\n            },\n          }\n        : undefined,\n      series: [\n        {\n          type: \"sankey\",\n          data: echartsNodes,\n          links: echartsLinks,\n          draggable: false,\n          emphasis: {\n            focus: \"adjacency\",\n          },\n          nodeWidth,\n          nodeGap: nodePadding,\n          lineStyle: {\n            color: linkColor === \"gradient\" ? \"source\" : \"#d1d5db\",\n            opacity: linkColor === \"gradient\" ? linkOpacity : 0.4,\n            curveness: 0.5,\n          },\n          label: {\n            show: true,\n            color: labelColor,\n            fontSize: 12,\n            formatter: shouldShowValues\n              ? (params: { name?: string }) => {\n                  const name = params.name ?? \"\";\n                  const nodeData = nodeDataMap.get(name);\n                  const safeName = escapeRichText(name);\n                  if (nodeData?.value !== undefined) {\n                    return `{value|${escapeRichText(formatValue(nodeData.value))}}\\n{name|${safeName}}`;\n                  }\n                  return safeName;\n                }\n              : undefined,\n            rich: shouldShowValues\n              ? {\n                  value: {\n                    fontSize: 11,\n                    color: labelColor,\n                    lineHeight: 16,\n                  },\n                  name: {\n                    fontSize: 12,\n                    color: labelColor,\n                    fontWeight: 700,\n                  },\n                }\n              : undefined,\n          },\n        },\n      ],\n    };\n  }, [\n    nodes,\n    links,\n    enableTooltip,\n    nodeWidth,\n    nodePadding,\n    defaultNodeColor,\n    isDarkMode,\n    linkColor,\n    linkOpacity,\n    shouldShowValues,\n    formatValue,\n    tooltipFormatter,\n  ]);\n\n  const handleClick = useCallback(\n    (params: Parameters<ChartEvents[\"click\"]>[0]) => {\n      if (params.dataType === \"node\" && onNodeClick && params.name) {\n        const nodeIndex = nodes.findIndex((n) => n.name === params.name);\n        const originalNode = nodeIndex >= 0 ? nodes[nodeIndex] : null;\n\n        const nodeData: SankeyNodeData = {\n          ...originalNode,\n          name: params.name,\n        };\n        onNodeClick(nodeData);\n      } else if (params.dataType === \"edge\" && onLinkClick && params.data) {\n        const data = params.data;\n        const source =\n          typeof data === \"object\" && data !== null && \"source\" in data\n            ? String(data.source)\n            : \"\";\n        const target =\n          typeof data === \"object\" && data !== null && \"target\" in data\n            ? String(data.target)\n            : \"\";\n        const sourceIndex = nodes.findIndex((n) => n.name === source);\n        const targetIndex = nodes.findIndex((n) => n.name === target);\n\n        if (sourceIndex === -1 || targetIndex === -1) return;\n\n        const rawValue = params.value;\n        const value =\n          typeof rawValue === \"number\"\n            ? rawValue\n            : Array.isArray(rawValue) && typeof rawValue[0] === \"number\"\n              ? rawValue[0]\n              : 0;\n\n        // Find original link to preserve id and isDrillable properties\n        const originalLink = links.find(\n          (l) => l.source === sourceIndex && l.target === targetIndex,\n        );\n        onLinkClick({\n          ...originalLink,\n          source: sourceIndex,\n          target: targetIndex,\n          value,\n        });\n      }\n    },\n    [nodes, links, onNodeClick, onLinkClick],\n  );\n\n  const onEvents = useMemo<Partial<ChartEvents>>(\n    () => ({\n      click: handleClick,\n    }),\n    [handleClick],\n  );\n\n  return (\n    <Chart\n      echarts={echarts}\n      options={options}\n      className={className}\n      isDarkMode={isDarkMode}\n      height={height}\n      onEvents={onEvents}\n    />\n  );\n}\n\nSankeyChart.displayName = \"SankeyChart\";\n"],"names":["ChartSemanticLightColors","ChartSemanticDarkColors","sequentialLight","sequentialDark","CHART_LIGHT_COLORS","CHART_DARK_COLORS","ChartPalette","semantic","name","isDarkMode","categorical","index","sequential","palette","text","variant","colors","transformTooltip","tooltipObj","dangerousHtmlFormatter","restOfTooltip","prepareChartOptions","options","Chart","forwardRef","echarts","optionUpdateBehavior","className","height","onEvents","ref","elRef","useRef","chartRef","handlersRef","wrappersRef","boundEventsRef","useEffect","chart","event","wrapper","nextBound","handler","params","el","isInitial","ro","jsx","cn","TimeseriesChart","type","data","xAxisName","xAxisTickCount","xAxisTickFormat","yAxisTickFormat","yAxisTickLabelFormat","yAxisName","yAxisTickCount","tooltipValueFormat","onTimeRangeChange","incomplete","gradient","loading","ariaDescription","incompleteBefore","incompleteAfter","useMemo","transformSeries","seriesType","s","incompleteBeforePoints","point","incompleteAfterPoints","completePoints","areaStyle","colorWithOpacity","incompleteSeriesConfig","items","seenNames","filteredParams","param","first","ts","header","formatTimestamp","rows","value","formatFn","formattedValue","events","range","hasTimeRangeCallback","ChartWaveLoader","mid","amp","period","steps","points","i","x","y","d","strokeColor","color","alpha","a","rgbMatch","hex","r","g","b","pad","n","LargeItem","unit","inactive","jsxs","SmallItem","ChartLegend","defaultFormatValue","isTooltipParams","escapeHtml","str","escapeRichText","char","sanitizeColor","fallback","SankeyChart","nodes","links","nodeWidth","nodePadding","enableTooltip","showNodeValues","formatValue","tooltipFormatter","defaultNodeColor","linkColor","linkOpacity","onNodeClick","onLinkClick","hasNodeValues","shouldShowValues","labelColor","secondaryColor","nodeDataMap","echartsNodes","node","echartsLinks","link","nodeData","safeName","source","target","sourceNode","targetNode","sourceColor","targetColor","safeSource","safeTarget","handleClick","useCallback","nodeIndex","sourceIndex","targetIndex","rawValue","originalLink","l"],"mappings":"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"}

package/dist/chunks/field-mil8efu3x0s68eed.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"field-mil8efu3x0s68eed.js","sources":["../../src/components/field/field.tsx"],"sourcesContent":["import { Field as FieldBase } from \"@base-ui/react/field\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Label } from \"../label\";\n\n/** Field variant definitions (currently empty, reserved for future additions). */\nexport const KUMO_FIELD_VARIANTS = {\n  // Field currently has no variant options but structure is ready for future additions\n} as const;\n\nexport const KUMO_FIELD_DEFAULT_VARIANTS = {} as const;\n\n// Derived types from KUMO_FIELD_VARIANTS\nexport interface KumoFieldVariantsProps {\n  /**\n   * When true, places the control (checkbox/switch) before the label visually.\n   * When false (default), places the label before the control.\n   * Used to support different layout patterns (e.g., iOS-style toggles on the right).\n   */\n  controlFirst?: boolean;\n}\n\nexport function fieldVariants({\n  controlFirst = false,\n}: KumoFieldVariantsProps = {}) {\n  return cn(\n    // Base styles - vertical layout (default)\n    \"grid gap-2\",\n\n    // Horizontal layout for checkbox and switch\n    // Default: Grid auto-reverses in RTL (desired)\n    \"has-[input[type=checkbox]]:grid-cols-[auto_1fr] has-[input[type=checkbox]]:items-center\",\n    \"has-[[role=switch]]:grid-cols-[auto_1fr] has-[[role=switch]]:items-center\",\n\n    // Control first: use flexbox with row-reverse to flip visual order without affecting text direction\n    // flex-row-reverse in LTR: Control→Label, in RTL: Label→Control (opposite of grid default)\n    controlFirst && [\n      \"has-[input[type=checkbox]]:flex has-[input[type=checkbox]]:flex-row-reverse has-[input[type=checkbox]]:flex-wrap has-[input[type=checkbox]]:items-center\",\n      \"has-[[role=switch]]:flex has-[[role=switch]]:flex-row-reverse has-[[role=switch]]:flex-wrap has-[[role=switch]]:items-center\",\n      \"[&>label]:flex-1\",\n    ],\n  );\n}\n\n/**\n * Match type for field validation errors.\n * Can be a boolean or a key from the browser's ValidityState interface.\n * Source: BaseErrorProps[\"match\"] (ComponentPropsWithoutRef<typeof FieldBase.Error>)\n */\nexport type FieldErrorMatch =\n  | boolean\n  | \"badInput\"\n  | \"customError\"\n  | \"patternMismatch\"\n  | \"rangeOverflow\"\n  | \"rangeUnderflow\"\n  | \"stepMismatch\"\n  | \"tooLong\"\n  | \"tooShort\"\n  | \"typeMismatch\"\n  | \"valid\"\n  | \"valueMissing\";\n\n/**\n * Field component props — wraps a form control with label, description, and error message.\n *\n * @example\n * ```tsx\n * <Field label=\"Email\" required>\n *   <Input placeholder=\"you@example.com\" />\n * </Field>\n *\n * <Field label=\"Phone\" required={false} description=\"We'll only use this for account recovery.\">\n *   <Input placeholder=\"+1 555-0000\" />\n * </Field>\n * ```\n */\nexport interface FieldProps extends KumoFieldVariantsProps {\n  /** The form control element(s) to wrap (Input, Select, Checkbox, etc.). */\n  children: ReactNode;\n  /** The label content — can be a string or any React node. */\n  label: ReactNode;\n  /**\n   * When explicitly `false`, shows gray \"(optional)\" text after the label.\n   * When `true` or `undefined`, no indicator is shown.\n   */\n  required?: boolean;\n  /** Tooltip content displayed next to the label via an info icon. */\n  labelTooltip?: ReactNode;\n  /** Validation error with a message and a browser `ValidityState` match key. */\n  error?: {\n    message: ReactNode;\n    match: FieldErrorMatch;\n  };\n  /** Helper text displayed below the control (hidden when `error` is present). */\n  description?: ReactNode;\n  /** When `true`, places the control before the label (for checkbox/switch layouts). */\n  controlFirst?: boolean;\n}\n\n/**\n * Form field wrapper that provides a label, optional description, and error display\n * around any form control. Built on Base UI Field primitives.\n *\n * @example\n * ```tsx\n * <Field label=\"Username\">\n *   <Input placeholder=\"Choose a username\" />\n * </Field>\n * ```\n */\nexport function Field({\n  children,\n  label,\n  required,\n  labelTooltip,\n  error,\n  description,\n  controlFirst = false,\n}: FieldProps) {\n  // Show \"(optional)\" when required is explicitly false\n  const showOptional = required === false;\n\n  return (\n    <FieldBase.Root className={fieldVariants({ controlFirst })}>\n      <FieldBase.Label className=\"m-0 text-base font-medium text-kumo-default\">\n        <Label showOptional={showOptional} tooltip={labelTooltip} asContent>\n          {label}\n        </Label>\n      </FieldBase.Label>\n      {children}\n      {error ? (\n        <FieldBase.Error\n          className={cn(\n            \"text-sm leading-snug text-kumo-danger\",\n            // Span full width in horizontal layout\n            \"col-span-full\",\n          )}\n          match={error.match}\n        >\n          {error.message}\n        </FieldBase.Error>\n      ) : (\n        description && (\n          <FieldBase.Description\n            className={cn(\n              \"text-sm leading-snug text-kumo-subtle\",\n              // Span full width in horizontal layout\n              \"col-span-full\",\n            )}\n          >\n            {description}\n          </FieldBase.Description>\n        )\n      )}\n    </FieldBase.Root>\n  );\n}\n"],"names":["KUMO_FIELD_VARIANTS","KUMO_FIELD_DEFAULT_VARIANTS","fieldVariants","controlFirst","cn","Field","children","label","required","labelTooltip","error","description","showOptional","jsxs","FieldBase.Root","jsx","FieldBase.Label","Label","FieldBase.Error","FieldBase.Description"],"mappings":";;;;;AAMO,MAAMA,IAAsB;AAAA;AAEnC,GAEaC,IAA8B,CAAA;AAYpC,SAASC,EAAc;AAAA,EAC5B,cAAAC,IAAe;AACjB,IAA4B,IAAI;AAC9B,SAAOC;AAAA;AAAA,IAEL;AAAA;AAAA;AAAA,IAIA;AAAA,IACA;AAAA;AAAA;AAAA,IAIAD,KAAgB;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EACF;AAEJ;AAqEO,SAASE,EAAM;AAAA,EACpB,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAR,IAAe;AACjB,GAAe;AAEb,QAAMS,IAAeJ,MAAa;AAElC,SACE,gBAAAK,EAACC,GAAA,EAAe,WAAWZ,EAAc,EAAE,cAAAC,EAAA,CAAc,GACvD,UAAA;AAAA,IAAA,gBAAAY,EAACC,GAAA,EAAgB,WAAU,+CACzB,UAAA,gBAAAD,EAACE,GAAA,EAAM,cAAAL,GAA4B,SAASH,GAAc,WAAS,IAChE,aACH,GACF;AAAA,IACCH;AAAA,IACAI,IACC,gBAAAK;AAAA,MAACG;AAAAA,MAAA;AAAA,QACC,WAAWd;AAAA,UACT;AAAA;AAAA,UAEA;AAAA,QAAA;AAAA,QAEF,OAAOM,EAAM;AAAA,QAEZ,UAAAA,EAAM;AAAA,MAAA;AAAA,IAAA,IAGTC,KACE,gBAAAI;AAAA,MAACI;AAAAA,MAAA;AAAA,QACC,WAAWf;AAAA,UACT;AAAA;AAAA,UAEA;AAAA,QAAA;AAAA,QAGD,UAAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GAGN;AAEJ;"}

package/dist/chunks/input-area-hl1rdb9xcrqyt8xw.js

@@ -1,78 +0,0 @@
-"use client";
-import { jsx as e } from "react/jsx-runtime";
-import { i as y } from "./input-kmztt6h4mzy101ho.js";
-import { c as N } from "./cn-ct4n7r74mh8y0f48.js";
-import * as x from "react";
-import { useCallback as I } from "react";
-import { F as b } from "./field-mil8efu3x0s68eed.js";
-import { aT as w } from "./vendor-base-ui-epfrwb4nfbd4btaz.js";
-const c = x.forwardRef(
-  (u, t) => {
-    const {
-      className: d,
-      onValueChange: n,
-      size: f = "base",
-      variant: s,
-      onChange: i,
-      label: p,
-      labelTooltip: h,
-      description: g,
-      error: r,
-      ...o
-    } = u;
-    process.env.NODE_ENV !== "production" && s === "error" && console.warn(
-      '[Kumo InputArea]: variant="error" is deprecated. Error styling is now automatically applied when the `error` prop is truthy. Simply remove the variant prop and pass an error message instead.'
-    );
-    const v = s ?? (r ? "error" : "default"), { required: C } = o, l = I(
-      (a) => {
-        i?.(a), n?.(a.target.value);
-      },
-      [i, n]
-    ), m = N(
-      y({ size: f, variant: v, focusIndicator: !0 }),
-      "h-auto py-2",
-      // Input variant always comes with size, but it does not apply for textarea
-      d
-    );
-    return p ? /* @__PURE__ */ e(
-      b,
-      {
-        label: p,
-        required: C,
-        labelTooltip: h,
-        description: g,
-        error: r ? typeof r == "string" ? { message: r, match: !0 } : r : void 0,
-        children: /* @__PURE__ */ e(
-          w,
-          {
-            render: (a) => /* @__PURE__ */ e(
-              "textarea",
-              {
-                ...a,
-                ref: t,
-                className: m,
-                onChange: l,
-                ...o
-              }
-            )
-          }
-        )
-      }
-    ) : /* @__PURE__ */ e(
-      "textarea",
-      {
-        ref: t,
-        className: m,
-        onChange: l,
-        ...o
-      }
-    );
-  }
-);
-c.displayName = "InputArea";
-const j = c;
-export {
-  c as I,
-  j as T
-};
-//# sourceMappingURL=input-area-hl1rdb9xcrqyt8xw.js.map

package/dist/chunks/input-area-hl1rdb9xcrqyt8xw.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"input-area-hl1rdb9xcrqyt8xw.js","sources":["../../src/components/input/input-area.tsx"],"sourcesContent":["import { inputVariants } from \"./input\";\nimport { cn } from \"../../utils/cn\";\nimport { useCallback, type ReactNode } from \"react\";\nimport * as React from \"react\";\nimport { Field as FieldBase } from \"@base-ui/react/field\";\nimport { Field as KumoField, type FieldErrorMatch } from \"../field/field\";\n\nexport const InputArea = React.forwardRef<HTMLTextAreaElement, InputAreaProps>(\n  (props, ref) => {\n    const {\n      className,\n      onValueChange,\n      size = \"base\",\n      variant: variantProp,\n      onChange,\n      label,\n      labelTooltip,\n      description,\n      error,\n      ...inputProps\n    } = props;\n\n    // Deprecation warning for variant=\"error\"\n    if (process.env.NODE_ENV !== \"production\" && variantProp === \"error\") {\n      console.warn(\n        '[Kumo InputArea]: variant=\"error\" is deprecated. ' +\n          \"Error styling is now automatically applied when the `error` prop is truthy. \" +\n          \"Simply remove the variant prop and pass an error message instead.\",\n      );\n    }\n\n    // Auto-apply error styling when error prop is truthy\n    // Explicit variant prop takes precedence for backwards compatibility\n    const variant = variantProp ?? (error ? \"error\" : \"default\");\n\n    // Extract required from inputProps to pass to Field for label decoration\n    const { required } = inputProps;\n    const handleChange = useCallback(\n      (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n        onChange?.(event);\n        onValueChange?.(event.target.value);\n      },\n      [onChange, onValueChange],\n    );\n\n    const textareaClassName = cn(\n      inputVariants({ size, variant, focusIndicator: true }),\n      \"h-auto py-2\", // Input variant always comes with size, but it does not apply for textarea\n      className,\n    );\n\n    // Render with Field wrapper if label is provided\n    // Use FieldBase.Control with render callback to ensure proper label-textarea association.\n    // The render callback receives props with the correct id/aria-labelledby from Field context.\n    if (label) {\n      return (\n        <KumoField\n          label={label}\n          required={required}\n          labelTooltip={labelTooltip}\n          description={description}\n          error={\n            error\n              ? typeof error === \"string\"\n                ? { message: error, match: true }\n                : error\n              : undefined\n          }\n        >\n          <FieldBase.Control\n            render={(controlProps) => (\n              <textarea\n                {...controlProps}\n                ref={ref}\n                className={textareaClassName}\n                onChange={handleChange}\n                {...inputProps}\n              />\n            )}\n          />\n        </KumoField>\n      );\n    }\n\n    // Render bare textarea without Field wrapper\n    return (\n      <textarea\n        ref={ref}\n        className={textareaClassName}\n        onChange={handleChange}\n        {...inputProps}\n      />\n    );\n  },\n);\n\nInputArea.displayName = \"InputArea\";\n\n/** Alias for InputArea — provided for discoverability when migrating from other libraries */\nexport const Textarea = InputArea;\n\n/**\n * InputArea component props\n * @property {ReactNode} [label] - Label content for the textarea (enables Field wrapper)\n * @property {ReactNode} [description] - Helper text displayed below the textarea\n * @property {string | { message: ReactNode, match: FieldErrorMatch }} [error] - Error message or validation error object\n */\nexport type InputAreaProps = {\n  onValueChange?: (value: string) => void;\n  variant?: \"default\" | \"error\";\n  size?: \"xs\" | \"sm\" | \"base\" | \"lg\";\n  // Then other custom props\n  children?: React.ReactNode;\n  className?: string;\n  /** Label content for the textarea (enables Field wrapper) - can be a string or any React node */\n  label?: ReactNode;\n  /** Tooltip content to display next to the label via an info icon */\n  labelTooltip?: ReactNode;\n  /** Helper text displayed below the textarea */\n  description?: ReactNode;\n  /** Error message or validation error object */\n  error?: string | { message: ReactNode; match: FieldErrorMatch };\n\n  // Finally, spread the native input props (least important)\n} & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, \"size\">;\n"],"names":["InputArea","React","props","ref","className","onValueChange","size","variantProp","onChange","label","labelTooltip","description","error","inputProps","variant","required","handleChange","useCallback","event","textareaClassName","cn","inputVariants","jsx","KumoField","FieldBase.Control","controlProps","Textarea"],"mappings":";;;;;;;;AAOO,MAAMA,IAAYC,EAAM;AAAA,EAC7B,CAACC,GAAOC,MAAQ;AACd,UAAM;AAAA,MACJ,WAAAC;AAAA,MACA,eAAAC;AAAA,MACA,MAAAC,IAAO;AAAA,MACP,SAASC;AAAA,MACT,UAAAC;AAAA,MACA,OAAAC;AAAA,MACA,cAAAC;AAAA,MACA,aAAAC;AAAA,MACA,OAAAC;AAAA,MACA,GAAGC;AAAA,IAAA,IACDX;AAGJ,IAAI,QAAQ,IAAI,aAAa,gBAAgBK,MAAgB,WAC3D,QAAQ;AAAA,MACN;AAAA,IAAA;AAQJ,UAAMO,IAAUP,MAAgBK,IAAQ,UAAU,YAG5C,EAAE,UAAAG,MAAaF,GACfG,IAAeC;AAAA,MACnB,CAACC,MAAkD;AACjD,QAAAV,IAAWU,CAAK,GAChBb,IAAgBa,EAAM,OAAO,KAAK;AAAA,MACpC;AAAA,MACA,CAACV,GAAUH,CAAa;AAAA,IAAA,GAGpBc,IAAoBC;AAAA,MACxBC,EAAc,EAAE,MAAAf,GAAM,SAAAQ,GAAS,gBAAgB,IAAM;AAAA,MACrD;AAAA;AAAA,MACAV;AAAA,IAAA;AAMF,WAAIK,IAEA,gBAAAa;AAAA,MAACC;AAAAA,MAAA;AAAA,QACC,OAAAd;AAAA,QACA,UAAAM;AAAA,QACA,cAAAL;AAAA,QACA,aAAAC;AAAA,QACA,OACEC,IACI,OAAOA,KAAU,WACf,EAAE,SAASA,GAAO,OAAO,GAAA,IACzBA,IACF;AAAA,QAGN,UAAA,gBAAAU;AAAA,UAACE;AAAAA,UAAA;AAAA,YACC,QAAQ,CAACC,MACP,gBAAAH;AAAA,cAAC;AAAA,cAAA;AAAA,gBACE,GAAGG;AAAA,gBACJ,KAAAtB;AAAA,gBACA,WAAWgB;AAAA,gBACX,UAAUH;AAAA,gBACT,GAAGH;AAAA,cAAA;AAAA,YAAA;AAAA,UACN;AAAA,QAAA;AAAA,MAEJ;AAAA,IAAA,IAOJ,gBAAAS;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAnB;AAAA,QACA,WAAWgB;AAAA,QACX,UAAUH;AAAA,QACT,GAAGH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AAEAb,EAAU,cAAc;AAGjB,MAAM0B,IAAW1B;"}

package/dist/chunks/input-kmztt6h4mzy101ho.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"input-kmztt6h4mzy101ho.js","sources":["../../src/components/input/input.tsx"],"sourcesContent":["import { cn } from \"../../utils/cn\";\nimport { resolveVariant } from \"../../utils/resolve-variant\";\nimport {\n  forwardRef,\n  type ComponentPropsWithoutRef,\n  type ReactNode,\n} from \"react\";\nimport { Input as BaseInput } from \"@base-ui/react/input\";\nimport { Field, type FieldErrorMatch } from \"../field/field\";\n\n/** Input size and variant definitions mapping names to their Tailwind classes. */\nexport const KUMO_INPUT_VARIANTS = {\n  size: {\n    xs: {\n      classes: \"h-5 gap-1 rounded-sm px-1.5 text-xs\",\n      description: \"Extra small input for compact UIs\",\n    },\n    sm: {\n      classes: \"h-6.5 gap-1 rounded-md px-2 text-xs\",\n      description: \"Small input for secondary fields\",\n    },\n    base: {\n      classes: \"h-9 gap-1.5 rounded-lg px-3 text-base\",\n      description: \"Default input size\",\n    },\n    lg: {\n      classes: \"h-10 gap-2 rounded-lg px-4 text-base\",\n      description: \"Large input for prominent fields\",\n    },\n  },\n  variant: {\n    default: {\n      classes: \"focus:ring-kumo-focus/50 focus:ring-[1.5px]\",\n      description: \"Default input appearance\",\n    },\n    error: {\n      classes: \"!ring-kumo-danger focus:ring-kumo-danger/50 focus:ring-[1.5px]\",\n      description: \"Error state for validation failures\",\n    },\n  },\n} as const;\n\nexport const KUMO_INPUT_DEFAULT_VARIANTS = {\n  size: \"base\",\n  variant: \"default\",\n} as const;\n\nexport const KUMO_INPUT_STYLING = {\n  dimensions: {\n    xs: { height: 20, paddingX: 6, fontSize: 12, borderRadius: 2, width: 160 },\n    sm: { height: 26, paddingX: 8, fontSize: 12, borderRadius: 6, width: 200 },\n    base: {\n      height: 36,\n      paddingX: 12,\n      fontSize: 16,\n      borderRadius: 8,\n      width: 280,\n    },\n    lg: { height: 40, paddingX: 16, fontSize: 16, borderRadius: 8, width: 320 },\n  },\n  baseTokens: {\n    background: \"color-secondary\",\n    text: \"text-color-surface\",\n    placeholder: \"text-color-muted\",\n    ring: \"color-border\",\n  },\n  stateTokens: {\n    focus: { ring: \"color-active\" },\n    error: { ring: \"color-error\" },\n    disabled: { opacity: 0.5, text: \"text-color-muted\" },\n  },\n} as const;\n\n// Derived types from KUMO_INPUT_VARIANTS\nexport type KumoInputSize = keyof typeof KUMO_INPUT_VARIANTS.size;\nexport type KumoInputVariant = keyof typeof KUMO_INPUT_VARIANTS.variant;\n\nexport interface KumoInputVariantsProps {\n  /**\n   * Input size.\n   * - `\"xs\"` — Extra small for compact UIs\n   * - `\"sm\"` — Small for secondary fields\n   * - `\"base\"` — Default size\n   * - `\"lg\"` — Large for prominent fields\n   * @default \"base\"\n   */\n  size?: KumoInputSize;\n  /**\n   * Visual variant.\n   * - `\"default\"` — Standard input\n   * - `\"error\"` — Error state for validation failures\n   * @default \"default\"\n   */\n  variant?: KumoInputVariant;\n  parentFocusIndicator?: boolean;\n  focusIndicator?: boolean;\n}\n\n// Omit native `size` attribute (number) to avoid conflict with our custom `size` variant\ntype BaseInputProps = Omit<ComponentPropsWithoutRef<typeof BaseInput>, \"size\">;\n\nexport function inputVariants({\n  variant = KUMO_INPUT_DEFAULT_VARIANTS.variant,\n  size = KUMO_INPUT_DEFAULT_VARIANTS.size,\n  parentFocusIndicator = false,\n  focusIndicator = false,\n}: KumoInputVariantsProps = {}) {\n  return cn(\n    // Base styles\n    \"border-0 bg-kumo-control text-kumo-default ring ring-kumo-line outline-none focus:outline-none\",\n    // Disabled state and placeholder styles (using vanilla CSS class for Chrome compatibility)\n    \"kumo-input-placeholder disabled:text-kumo-disabled\",\n    // Apply size styles from KUMO_INPUT_VARIANTS\n    resolveVariant(KUMO_INPUT_VARIANTS.size, size, KUMO_INPUT_DEFAULT_VARIANTS.size).classes,\n    // Apply variant styles from KUMO_INPUT_VARIANTS\n    resolveVariant(KUMO_INPUT_VARIANTS.variant, variant, KUMO_INPUT_DEFAULT_VARIANTS.variant).classes,\n    // Focus state handling\n    parentFocusIndicator &&\n      (variant === \"error\"\n        ? \"focus-within:ring-kumo-danger/50 focus-within:ring-[1.5px]\"\n        : \"focus-within:ring-kumo-focus/50 focus-within:ring-[1.5px]\"),\n    focusIndicator &&\n      (variant === \"error\"\n        ? \"focus:ring-kumo-danger/50 focus:ring-[1.5px]\"\n        : \"focus:ring-kumo-focus/50 focus:ring-[1.5px]\"),\n  );\n}\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {\n  const {\n    className,\n    size = \"base\",\n    variant: variantProp,\n    label,\n    labelTooltip,\n    description,\n    error,\n    ...inputProps\n  } = props;\n\n  // Deprecation warning for variant=\"error\"\n  if (process.env.NODE_ENV !== \"production\" && variantProp === \"error\") {\n    console.warn(\n      '[Kumo Input]: variant=\"error\" is deprecated. ' +\n        \"Error styling is now automatically applied when the `error` prop is truthy. \" +\n        \"Simply remove the variant prop and pass an error message instead.\",\n    );\n  }\n\n  // Auto-apply error styling when error prop is truthy\n  // Explicit variant prop takes precedence for backwards compatibility\n  const variant = variantProp ?? (error ? \"error\" : \"default\");\n\n  // Extract required from inputProps to pass to Field for label decoration\n  const { required } = inputProps;\n\n  // A11y enforcement: warn in dev if no accessible name provided\n  if (process.env.NODE_ENV !== \"production\") {\n    const hasLabel = Boolean(label);\n    const hasAriaLabel = Boolean(inputProps[\"aria-label\"]);\n    const hasAriaLabelledBy = Boolean(inputProps[\"aria-labelledby\"]);\n\n    if (!hasLabel && !hasAriaLabel && !hasAriaLabelledBy) {\n      console.warn(\n        \"[Kumo Input]: Input must have an accessible name. Provide either:\\n\" +\n          \"  - label prop: <Input label='Email' />\\n\" +\n          \"  - aria-label: <Input aria-label='Email address' />\\n\" +\n          \"  - aria-labelledby for custom label association\",\n      );\n    }\n  }\n\n  const input = (\n    <BaseInput\n      ref={ref}\n      className={cn(\n        inputVariants({ size, variant, focusIndicator: true }),\n        className,\n      )}\n      {...inputProps}\n    />\n  );\n\n  // Render with Field wrapper if label is provided\n  if (label) {\n    return (\n      <Field\n        label={label}\n        required={required}\n        labelTooltip={labelTooltip}\n        description={description}\n        error={\n          error\n            ? typeof error === \"string\"\n              ? { message: error, match: true }\n              : error\n            : undefined\n        }\n      >\n        {input}\n      </Field>\n    );\n  }\n\n  // Render bare input without Field wrapper\n  return input;\n});\n\nInput.displayName = \"Input\";\n\n/**\n * Input component props with accessibility guidance.\n *\n * **Accessible Name Required:** Input should have one of:\n * 1. `label` prop (recommended) - enables Field wrapper with label/description/error\n * 2. `placeholder` + `aria-label` - for bare inputs with visual placeholder\n * 3. `aria-labelledby` - for custom label association\n *\n * Missing accessible names will trigger console warnings in development.\n *\n * @example\n * // Recommended: Built-in Field wrapper\n * <Input label=\"Email\" placeholder=\"you@example.com\" />\n *\n * @example\n * // Bare input with placeholder and aria-label\n * <Input placeholder=\"Search...\" aria-label=\"Search products\" />\n *\n * @example\n * // Custom label association\n * <label id=\"email-label\">Email</label>\n * <Input aria-labelledby=\"email-label\" />\n *\n * @example\n * // With description and error\n * <Input\n *   label=\"Password\"\n *   description=\"Must be at least 8 characters\"\n *   error=\"Password is too short\"\n * />\n */\nexport type InputProps = Pick<KumoInputVariantsProps, \"size\" | \"variant\"> &\n  BaseInputProps & {\n    /** Label content for the input (enables Field wrapper) - can be a string or any React node */\n    label?: ReactNode;\n    /** Tooltip content to display next to the label via an info icon */\n    labelTooltip?: ReactNode;\n    /** Helper text displayed below the input */\n    description?: ReactNode;\n    /** Error message or validation error object */\n    error?: string | { message: ReactNode; match: FieldErrorMatch };\n  };\n"],"names":["KUMO_INPUT_VARIANTS","KUMO_INPUT_DEFAULT_VARIANTS","inputVariants","variant","size","parentFocusIndicator","focusIndicator","cn","resolveVariant","Input","forwardRef","props","ref","className","variantProp","label","labelTooltip","description","error","inputProps","required","hasLabel","hasAriaLabel","hasAriaLabelledBy","input","jsx","BaseInput","Field"],"mappings":";;;;;;;AAWO,MAAMA,IAAsB;AAAA,EACjC,MAAM;AAAA,IACJ,IAAI;AAAA,MACF,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,IAAI;AAAA,MACF,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,IAAI;AAAA,MACF,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,EACf;AAAA,EAEF,SAAS;AAAA,IACP,SAAS;AAAA,MACP,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,OAAO;AAAA,MACL,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,EACf;AAEJ,GAEaC,IAA8B;AAAA,EACzC,MAAM;AAAA,EACN,SAAS;AACX;AAwDO,SAASC,EAAc;AAAA,EAC5B,SAAAC,IAAUF,EAA4B;AAAA,EACtC,MAAAG,IAAOH,EAA4B;AAAA,EACnC,sBAAAI,IAAuB;AAAA,EACvB,gBAAAC,IAAiB;AACnB,IAA4B,IAAI;AAC9B,SAAOC;AAAA;AAAA,IAEL;AAAA;AAAA,IAEA;AAAA;AAAA,IAEAC,EAAeR,EAAoB,MAAMI,GAAMH,EAA4B,IAAI,EAAE;AAAA;AAAA,IAEjFO,EAAeR,EAAoB,SAASG,GAASF,EAA4B,OAAO,EAAE;AAAA;AAAA,IAE1FI,MACGF,MAAY,UACT,+DACA;AAAA,IACNG,MACGH,MAAY,UACT,iDACA;AAAA,EAAA;AAEV;AAEO,MAAMM,IAAQC,EAAyC,CAACC,GAAOC,MAAQ;AAC5E,QAAM;AAAA,IACJ,WAAAC;AAAA,IACA,MAAAT,IAAO;AAAA,IACP,SAASU;AAAA,IACT,OAAAC;AAAA,IACA,cAAAC;AAAA,IACA,aAAAC;AAAA,IACA,OAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDR;AAGJ,EAAI,QAAQ,IAAI,aAAa,gBAAgBG,MAAgB,WAC3D,QAAQ;AAAA,IACN;AAAA,EAAA;AAQJ,QAAMX,IAAUW,MAAgBI,IAAQ,UAAU,YAG5C,EAAE,UAAAE,MAAaD;AAGrB,MAAI,QAAQ,IAAI,aAAa,cAAc;AACzC,UAAME,IAAW,EAAQN,GACnBO,IAAe,EAAQH,EAAW,YAAY,GAC9CI,IAAoB,EAAQJ,EAAW,iBAAiB;AAE9D,IAAI,CAACE,KAAY,CAACC,KAAgB,CAACC,KACjC,QAAQ;AAAA,MACN;AAAA;AAAA;AAAA;AAAA,IAAA;AAAA,EAMN;AAEA,QAAMC,IACJ,gBAAAC;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,KAAAd;AAAA,MACA,WAAWL;AAAA,QACTL,EAAc,EAAE,MAAAE,GAAM,SAAAD,GAAS,gBAAgB,IAAM;AAAA,QACrDU;AAAA,MAAA;AAAA,MAED,GAAGM;AAAA,IAAA;AAAA,EAAA;AAKR,SAAIJ,IAEA,gBAAAU;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,OAAAZ;AAAA,MACA,UAAAK;AAAA,MACA,cAAAJ;AAAA,MACA,aAAAC;AAAA,MACA,OACEC,IACI,OAAOA,KAAU,WACf,EAAE,SAASA,GAAO,OAAO,GAAA,IACzBA,IACF;AAAA,MAGL,UAAAM;AAAA,IAAA;AAAA,EAAA,IAMAA;AACT,CAAC;AAEDf,EAAM,cAAc;"}

package/dist/chunks/select-brzswxbhhf1ktx9t.js

@@ -1,215 +0,0 @@
-"use client";
-import { jsxs as m, jsx as a } from "react/jsx-runtime";
-import { CaretUpDownIcon as R, CheckIcon as B } from "@phosphor-icons/react";
-import { useId as W, forwardRef as p } from "react";
-import { c as o } from "./cn-ct4n7r74mh8y0f48.js";
-import { b as q } from "./button-n859eyw550yi2b9z.js";
-import { K as H } from "./input-kmztt6h4mzy101ho.js";
-import { S as J } from "./skeleton-line-epxenksfesr2fkcv.js";
-import { F as Q } from "./field-mil8efu3x0s68eed.js";
-import { u as X } from "./portal-provider-hwmkdmkpvct0cb76.js";
-import { a$ as Y, b0 as Z, b1 as ee, b2 as te, b3 as ae, b4 as se, b5 as le, b6 as oe, b7 as ie, b8 as ne, b9 as re, ba as ce, bb as de, S as ue } from "./vendor-base-ui-epfrwb4nfbd4btaz.js";
-H.size;
-const I = {
-  size: "base"
-};
-function me({
-  size: e = I.size
-} = {}) {
-  return o(
-    q({ size: e }),
-    "justify-between font-normal",
-    "focus:opacity-100 focus:ring-kumo-focus/50 focus-visible:ring-inset *:in-focus:opacity-100"
-  );
-}
-const k = {
-  xs: { iconSize: 12, className: "text-kumo-subtle" },
-  sm: { iconSize: 14, className: "text-kumo-subtle" },
-  base: { iconSize: 16, className: "text-kumo-subtle" },
-  lg: { iconSize: 18, className: "text-kumo-subtle" }
-};
-function L(e) {
-  if (e == null || typeof e != "object" || Array.isArray(e) || "$$typeof" in e || e instanceof Promise) return !1;
-  const s = e;
-  return "label" in s && s.label !== void 0;
-}
-function w(e) {
-  return Array.isArray(e) ? e : Object.entries(e).map(([s, l]) => ({
-    value: s,
-    label: L(l) ? l.label : l
-  }));
-}
-function be(e) {
-  const s = w(e), l = /* @__PURE__ */ new Map();
-  if (!Array.isArray(e))
-    for (const [t, r] of Object.entries(e))
-      L(r) && l.set(t, { disabled: r.disabled });
-  return s.filter((t) => t.value !== null).map((t, r) => {
-    const c = typeof t.value == "string" ? t.value : `option-${r}`, u = typeof t.value == "string" ? l.get(t.value) : void 0;
-    return /* @__PURE__ */ a(z, { value: t.value, disabled: u?.disabled, children: t.label }, c);
-  });
-}
-function d({
-  children: e,
-  className: s,
-  renderValue: l,
-  label: t,
-  hideLabel: r,
-  placeholder: c,
-  loading: u,
-  size: b = I.size,
-  labelTooltip: F,
-  description: f,
-  error: i,
-  required: G,
-  container: j,
-  ...n
-}) {
-  const g = W(), P = X(), T = j ?? P ?? void 0, S = n, _ = S["aria-label"], E = S["aria-labelledby"], U = typeof t == "string" ? t : c;
-  process.env.NODE_ENV !== "production" && r !== void 0 && console.warn(
-    '[Kumo Select]: `hideLabel` is deprecated. For hidden labels, use `aria-label` instead of `label` + `hideLabel={true}`.\n  Migration:\n  - For visible labels: <Select label="Country" /> (hideLabel no longer needed)\n  - For hidden labels: <Select aria-label="Select a country" /> (remove label and hideLabel)'
-  );
-  const h = t && r !== !0, y = h ? void 0 : E ?? (t ? g : void 0), V = _ ?? (y ? void 0 : U), $ = n.items ? w(n.items) : void 0, D = e || (n.items ? be(n.items) : null), K = l ? (v) => v == null ? c == null ? null : /* @__PURE__ */ a("span", { className: "text-kumo-placeholder", children: c }) : l(v) : void 0, { items: fe, ...M } = n, x = /* @__PURE__ */ m(
-    Y,
-    {
-      ...M,
-      items: $,
-      disabled: u || n.disabled,
-      children: [
-        /* @__PURE__ */ m(
-          Z,
-          {
-            className: o(
-              me({ size: b }),
-              n.disabled && "cursor-not-allowed opacity-50",
-              s
-            ),
-            "aria-label": V,
-            "aria-labelledby": y,
-            children: [
-              u ? /* @__PURE__ */ a(J, { className: "w-32" }) : /* @__PURE__ */ a(
-                ee,
-                {
-                  placeholder: c,
-                  className: "min-w-0 truncate data-[placeholder]:text-kumo-placeholder",
-                  children: K
-                }
-              ),
-              /* @__PURE__ */ a(
-                te,
-                {
-                  className: o(
-                    "flex shrink-0 items-center",
-                    k[b].className
-                  ),
-                  children: /* @__PURE__ */ a(
-                    R,
-                    {
-                      size: k[b].iconSize,
-                      className: "fill-current"
-                    }
-                  )
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ a(ae, { container: T, children: /* @__PURE__ */ a(se, { children: /* @__PURE__ */ a(
-          le,
-          {
-            className: o(
-              "flex flex-col",
-              "max-h-[var(--available-height)] bg-kumo-base text-kumo-default",
-              "rounded-lg shadow-lg ring ring-kumo-line",
-              "min-w-[calc(var(--anchor-width)+3px)] py-1.5"
-            ),
-            children: /* @__PURE__ */ a(
-              oe,
-              {
-                className: o(
-                  "min-h-0 flex-1 overflow-y-auto overscroll-none scroll-pt-2 scroll-pb-2"
-                ),
-                children: D
-              }
-            )
-          }
-        ) }) })
-      ]
-    }
-  );
-  if (h)
-    return /* @__PURE__ */ a(
-      Q,
-      {
-        label: t,
-        required: G,
-        labelTooltip: F,
-        description: f,
-        error: i ? typeof i == "string" ? { message: i, match: !0 } : i : void 0,
-        children: x
-      }
-    );
-  const N = i ? typeof i == "string" ? { message: i } : i : void 0;
-  return /* @__PURE__ */ m("div", { className: "grid gap-2", children: [
-    t && /* @__PURE__ */ a("span", { id: g, className: "sr-only", children: t }),
-    x,
-    N ? /* @__PURE__ */ a("span", { className: "text-sm text-kumo-danger", children: N.message }) : f && /* @__PURE__ */ a("span", { className: "text-sm leading-snug text-kumo-subtle", children: f })
-  ] });
-}
-function z({ children: e, value: s, disabled: l, className: t }) {
-  return /* @__PURE__ */ m(
-    ie,
-    {
-      value: s,
-      disabled: l,
-      className: o(
-        "group mx-1.5 flex cursor-pointer items-center justify-between gap-2 rounded px-2 py-1.5 text-base outline-none",
-        "focus-visible:z-50 focus-visible:ring-2 focus-visible:ring-kumo-brand focus-visible:ring-inset",
-        "data-highlighted:bg-kumo-tint",
-        "data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50",
-        t
-      ),
-      children: [
-        /* @__PURE__ */ a(ne, { children: e }),
-        /* @__PURE__ */ a(re, { children: /* @__PURE__ */ a(B, {}) })
-      ]
-    }
-  );
-}
-const A = p(
-  ({ children: e, className: s }, l) => /* @__PURE__ */ a(ce, { ref: l, className: o(s), children: e })
-);
-A.displayName = "Select.Group";
-const O = p(
-  ({ children: e, className: s }, l) => /* @__PURE__ */ a(
-    de,
-    {
-      ref: l,
-      className: o(
-        "px-3.5 py-1.5 text-sm font-semibold text-kumo-subtle",
-        s
-      ),
-      children: e
-    }
-  )
-);
-O.displayName = "Select.GroupLabel";
-const C = p(
-  ({ className: e }, s) => /* @__PURE__ */ a(
-    ue,
-    {
-      ref: s,
-      className: o("-mx-1 my-1 h-px bg-kumo-hairline", e)
-    }
-  )
-);
-C.displayName = "Select.Separator";
-d.Option = z;
-d.Group = A;
-d.GroupLabel = O;
-d.Separator = C;
-d.Option.displayName = "Select.Option";
-export {
-  d as S
-};
-//# sourceMappingURL=select-brzswxbhhf1ktx9t.js.map

package/dist/chunks/select-brzswxbhhf1ktx9t.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"select-brzswxbhhf1ktx9t.js","sources":["../../src/components/select/select.tsx"],"sourcesContent":["import { Select as SelectBase } from \"@base-ui/react/select\";\nimport { CaretUpDownIcon, CheckIcon } from \"@phosphor-icons/react\";\nimport { forwardRef, useId } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { buttonVariants } from \"../button\";\nimport { KUMO_INPUT_VARIANTS, type KumoInputSize } from \"../input/input\";\nimport { SkeletonLine } from \"../loader\";\nimport { Field, type FieldErrorMatch } from \"../field/field\";\nimport {\n  usePortalContainer,\n  type PortalContainer,\n} from \"../../utils/portal-provider\";\n\n/** Select variant definitions. */\nexport const KUMO_SELECT_VARIANTS = {\n  size: KUMO_INPUT_VARIANTS.size,\n} as const;\n\nexport const KUMO_SELECT_DEFAULT_VARIANTS = {\n  size: \"base\",\n} as const;\n\n/**\n * Select component styling metadata for Figma plugin code generation\n * Extracted from select.tsx implementation (source of truth)\n */\nexport const KUMO_SELECT_STYLING = {\n  trigger: {\n    height: 36, // h-9\n    paddingX: 12, // px-3\n    borderRadius: 8, // rounded-lg\n    background: \"bg-kumo-elevated\",\n    text: \"text-color-surface\",\n    ring: \"color-border\",\n    fontSize: 16, // text-base\n    fontWeight: 400, // font-normal\n  },\n  stateTokens: {\n    focus: { ring: \"color-active\" },\n    disabled: { opacity: 0.5 },\n  },\n  icons: {\n    caret: { name: \"ph-caret-up-down\", size: 20 },\n    check: { name: \"ph-check\", size: 20 },\n  },\n  popup: {\n    background: \"bg-kumo-elevated\",\n    ring: \"border-kumo-line\",\n    borderRadius: 8, // rounded-lg\n    padding: 6, // p-1.5\n  },\n  option: {\n    paddingX: 8, // px-2\n    paddingY: 6, // py-1.5\n    borderRadius: 4, // rounded\n    fontSize: 16, // text-base\n    highlightBackground: \"color-surface-secondary\",\n  },\n} as const;\n\n// Derived types from KUMO_SELECT_VARIANTS\nexport type KumoSelectSize = keyof typeof KUMO_SELECT_VARIANTS.size;\n\nexport interface KumoSelectVariantsProps {\n  /**\n   * Size of the select trigger. Matches Input component sizes.\n   * - `\"xs\"` — Extra small for compact UIs (h-5 / 20px)\n   * - `\"sm\"` — Small for secondary fields (h-6.5 / 26px)\n   * - `\"base\"` — Default size (h-9 / 36px)\n   * - `\"lg\"` — Large for prominent fields (h-10 / 40px)\n   * @default \"base\"\n   */\n  size?: KumoSelectSize;\n}\n\nexport function selectVariants({\n  size = KUMO_SELECT_DEFAULT_VARIANTS.size,\n}: KumoSelectVariantsProps = {}) {\n  return cn(\n    buttonVariants({ size }),\n    \"justify-between font-normal\",\n    \"focus:opacity-100 focus:ring-kumo-focus/50 focus-visible:ring-inset *:in-focus:opacity-100\",\n  );\n}\n\nconst triggerIconStyles: Record<\n  KumoInputSize,\n  { iconSize: number; className: string }\n> = {\n  xs: { iconSize: 12, className: \"text-kumo-subtle\" },\n  sm: { iconSize: 14, className: \"text-kumo-subtle\" },\n  base: { iconSize: 16, className: \"text-kumo-subtle\" },\n  lg: { iconSize: 18, className: \"text-kumo-subtle\" },\n};\n\n/**\n * Shape for items that carry extra metadata (disabled state, tooltip).\n * Plain `ReactNode` values are still supported for backward compatibility.\n */\nexport interface SelectItemDescriptor {\n  /** Display label for the option. */\n  label: ReactNode;\n  /** When `true`, the option cannot be selected. */\n  disabled?: boolean;\n}\n\n/** Value type accepted by the `items` object-map prop. */\nexport type SelectItemValue = ReactNode | SelectItemDescriptor;\n\nfunction isItemDescriptor(\n  value: SelectItemValue,\n): value is SelectItemDescriptor {\n  if (value === null || value === undefined) return false;\n  if (typeof value !== \"object\" || Array.isArray(value)) return false;\n  // React elements have $$typeof — exclude them\n  if (\"$$typeof\" in (value as object)) return false;\n  // Promises are not descriptors\n  if (value instanceof Promise) return false;\n  // Must have a defined label (not just the key existing)\n  const candidate = value as unknown as Record<string, unknown>;\n  return \"label\" in candidate && candidate.label !== undefined;\n}\n\n/**\n * Normalizes items to array format for Base UI.\n * Object maps are converted to array format so Base UI can properly\n * handle value matching and placeholder display.\n */\nfunction normalizeItems<T>(\n  items:\n    | Record<string, SelectItemValue>\n    | ReadonlyArray<{ label: ReactNode; value: T }>,\n): ReadonlyArray<{ label: ReactNode; value: T }> {\n  if (Array.isArray(items)) {\n    return items;\n  }\n  // Convert object map to array format\n  return Object.entries(items).map(([key, entry]) => ({\n    value: key as T,\n    label: isItemDescriptor(entry) ? entry.label : entry,\n  }));\n}\n\n/**\n * Auto-generates Select.Option elements from items prop.\n * Only used when children are not explicitly provided.\n * Filters out null values (typically used for placeholders).\n */\nfunction renderOptionsFromItems<T>(\n  items:\n    | Record<string, SelectItemValue>\n    | ReadonlyArray<{ label: ReactNode; value: T }>,\n): ReactNode {\n  const normalizedItems = normalizeItems(items);\n\n  // Build a lookup for disabled metadata from object-map items.\n  // Object-map keys are always strings (Record<string, ...>), so the lookup\n  // uses string keys. The array form ({ label, value }[]) does not support\n  // descriptors — consumers should use the children API for that case.\n  const disabledLookup = new Map<string, { disabled?: boolean }>();\n  if (!Array.isArray(items)) {\n    for (const [key, entry] of Object.entries(items)) {\n      if (isItemDescriptor(entry)) {\n        disabledLookup.set(key, { disabled: entry.disabled });\n      }\n    }\n  }\n\n  // Filter out null values and render options\n  return normalizedItems\n    .filter((item) => item.value !== null)\n    .map((item, index) => {\n      const key =\n        typeof item.value === \"string\" ? item.value : `option-${index}`;\n      // When items is an object-map, value is always a string key from\n      // Object.entries. When items is an array, disabledLookup is empty.\n      const meta =\n        typeof item.value === \"string\"\n          ? disabledLookup.get(item.value)\n          : undefined;\n\n      return (\n        <Option key={key} value={item.value} disabled={meta?.disabled}>\n          {item.label}\n        </Option>\n      );\n    });\n}\n\ntype SelectPropsGeneric<T, Multiple extends boolean | undefined = false> = Omit<\n  SelectBase.Root.Props<T, Multiple>,\n  \"items\"\n> &\n  KumoSelectVariantsProps & {\n    multiple?: Multiple;\n    /**\n     * A function that returns a `ReactNode` to format the selected value.\n     * Only called when a value is selected — use `placeholder` for the empty state.\n     * @example\n     * ```tsx\n     * <Select\n     *   placeholder=\"Select a user...\"\n     *   renderValue={(user) => user.name}\n     * />\n     * ```\n     */\n    renderValue?: (value: Multiple extends true ? T[] : T) => ReactNode;\n    className?: string;\n    /**\n     * Data structure of items rendered in the popup.\n     * Accepts a plain object map (`{ key: \"Label\" }`) or an array of `{ label, value }`.\n     *\n     * Object-map values can be a `ReactNode` (backward-compatible) **or** a\n     * `SelectItemDescriptor` for extra metadata:\n     *\n     * ```tsx\n     * items={{\n     *   apple: \"Apple\",\n     *   banana: { label: \"Banana\", disabled: true, disabledReason: \"Out of season\" },\n     * }}\n     * ```\n     */\n    items?:\n      | Record<string, SelectItemValue>\n      | ReadonlyArray<{ label: ReactNode; value: T }>;\n    /**\n     * Label content for the select.\n     * When provided, enables the Field wrapper with a visible label.\n     * For accessibility without a visible label, use `aria-label` instead.\n     */\n    label?: ReactNode;\n    /**\n     * @deprecated Use `aria-label` for hidden labels instead of `label` + `hideLabel={true}`.\n     * When `label` is provided without `hideLabel`, the label is now visible by default (matching Input behavior).\n     * This prop will be removed in a future version.\n     */\n    hideLabel?: boolean;\n    placeholder?: string;\n    loading?: boolean;\n    /** Tooltip content to display next to the label via an info icon */\n    labelTooltip?: ReactNode;\n    /** Helper text displayed below the select */\n    description?: ReactNode;\n    /** Error message or validation error object */\n    error?: string | { message: ReactNode; match: FieldErrorMatch };\n    /**\n     * Container element for the portal. Use this to render the select inside\n     * a Shadow DOM or custom container. Overrides `KumoPortalProvider` context.\n     * @default document.body (or KumoPortalProvider container if set)\n     */\n    container?: PortalContainer;\n  };\n\n/**\n * Select component props.\n *\n * **Accessible Name Required:** Select should have one of:\n * 1. `label` prop (recommended) - enables Field wrapper with visible label\n * 2. `aria-label` - for selects without visible label (accessibility-only)\n * 3. `aria-labelledby` - for custom label association\n *\n * @example\n * ```tsx\n * // With visible label (recommended)\n * <Select label=\"Country\" onValueChange={setValue}>\n *   <Select.Option value=\"us\">United States</Select.Option>\n *   <Select.Option value=\"uk\">United Kingdom</Select.Option>\n * </Select>\n *\n * // Without visible label (use aria-label for accessibility)\n * <Select aria-label=\"Select a country\" onValueChange={setValue}>\n *   <Select.Option value=\"us\">United States</Select.Option>\n * </Select>\n * ```\n */\nexport interface SelectProps {\n  /** Additional CSS classes merged via `cn()`. */\n  className?: string;\n  /** Size of the select trigger. Matches Input component sizes. */\n  size?: KumoSelectSize;\n  /**\n   * Label content for the select.\n   * When provided, enables the Field wrapper with a visible label above the select.\n   * For accessibility without a visible label, use `aria-label` instead.\n   */\n  label?: ReactNode;\n  /**\n   * @deprecated Use `aria-label` for hidden labels instead of `label` + `hideLabel={true}`.\n   * When `label` is provided without `hideLabel`, the label is now visible by default (matching Input behavior).\n   * This prop will be removed in a future version.\n   */\n  hideLabel?: boolean;\n  /** Placeholder text shown when no value is selected. */\n  placeholder?: string;\n  /** When `true`, shows a skeleton loader in place of the selected value. */\n  loading?: boolean;\n  /** Whether the select is disabled. */\n  disabled?: boolean;\n  /** Whether the select is required. When `false`, shows \"(optional)\" text. */\n  required?: boolean;\n  /** Tooltip content displayed next to the label via an info icon. */\n  labelTooltip?: ReactNode;\n  /** Currently selected value (controlled mode). */\n  value?: unknown;\n  /** Initial value for uncontrolled mode. */\n  defaultValue?: unknown;\n  /** Callback fired when the selected value changes. */\n  onValueChange?: (value: unknown) => void;\n  /** Enable multi-select mode. */\n  multiple?: boolean;\n  /** `Select.Option` elements to render in the dropdown. */\n  children?: ReactNode;\n  /** Helper text displayed below the select. */\n  description?: ReactNode;\n  /** Error message string or validation error object with `match` key. */\n  error?: string | { message: ReactNode; match: FieldErrorMatch };\n}\n\n/**\n * Select.Option component props.\n */\nexport interface SelectOptionProps {\n  /** The option content. */\n  children: ReactNode;\n  /** The value associated with this option. */\n  value: unknown;\n  /** When `true`, the option cannot be selected. */\n  disabled?: boolean;\n  /** Additional CSS classes merged via `cn()`. */\n  className?: string;\n}\n\n/**\n * Dropdown for selecting a value from a list of options.\n * Wraps Base UI Select with Kumo styling and optional Field integration.\n *\n * @example\n * ```tsx\n * <Select label=\"Fruit\" onValueChange={setFruit}>\n *   <Select.Option value=\"apple\">Apple</Select.Option>\n *   <Select.Option value=\"banana\">Banana</Select.Option>\n * </Select>\n * ```\n */\nexport function Select<T, Multiple extends boolean | undefined = false>({\n  children,\n  className,\n  renderValue,\n  label,\n  hideLabel,\n  placeholder,\n  loading,\n  size = KUMO_SELECT_DEFAULT_VARIANTS.size,\n  labelTooltip,\n  description,\n  error,\n  required,\n  container: containerProp,\n  ...props\n}: SelectPropsGeneric<T, Multiple> & { required?: boolean }) {\n  const labelId = useId();\n  const contextContainer = usePortalContainer();\n  const container = containerProp ?? contextContainer ?? undefined;\n  const propLookup = props as Record<string, unknown>;\n  const ariaLabel = propLookup[\"aria-label\"] as string | undefined;\n  const ariaLabelledby = propLookup[\"aria-labelledby\"] as string | undefined;\n  // For aria-label, use string label or placeholder (ReactNode labels can't be used for aria-label)\n  const fallbackLabel = typeof label === \"string\" ? label : placeholder;\n\n  // Deprecation warning for hideLabel\n  if (process.env.NODE_ENV !== \"production\" && hideLabel !== undefined) {\n    console.warn(\n      \"[Kumo Select]: `hideLabel` is deprecated. For hidden labels, use `aria-label` instead of `label` + `hideLabel={true}`.\\n\" +\n        \"  Migration:\\n\" +\n        '  - For visible labels: <Select label=\"Country\" /> (hideLabel no longer needed)\\n' +\n        '  - For hidden labels: <Select aria-label=\"Select a country\" /> (remove label and hideLabel)',\n    );\n  }\n\n  // New behavior: label presence determines Field wrapper visibility (like Input)\n  // hideLabel is only respected for backward compatibility when explicitly set to true\n  const useFieldWrapper = label && hideLabel !== true;\n  const triggerLabelledBy = useFieldWrapper\n    ? undefined\n    : (ariaLabelledby ?? (label ? labelId : undefined));\n  const triggerAriaLabel =\n    ariaLabel ?? (!triggerLabelledBy ? fallbackLabel : undefined);\n\n  // Normalize items to array format for Base UI compatibility\n  // This fixes placeholder not showing with object map items\n  const normalizedItems = props.items ? normalizeItems(props.items) : undefined;\n\n  // Auto-render children from items if no explicit children provided\n  const renderedChildren = children\n    ? children\n    : props.items\n      ? renderOptionsFromItems(props.items)\n      : null;\n\n  // Wrap renderValue to handle null values properly:\n  // - When value is null, show placeholder (Base UI ignores placeholder when children fn provided)\n  // - When value is non-null, call user's renderValue\n  const valueChildrenFn = renderValue\n    ? (value: unknown) => {\n        if (value == null) {\n          // If no placeholder provided, return null to show nothing (same as no renderValue)\n          if (placeholder == null) {\n            return null;\n          }\n          return <span className=\"text-kumo-placeholder\">{placeholder}</span>;\n        }\n        // Cast through `any` as a deliberate type boundary: Base UI passes `unknown`,\n        // but our renderValue expects the generic T (or T[] for multiple)\n        return renderValue(value as any);\n      }\n    : undefined;\n\n  // Exclude Kumo-extended `items` from Base UI spread — we pass `normalizedItems` instead\n  const { items: _items, ...baseProps } = props;\n\n  const selectControl = (\n    <SelectBase.Root\n      {...baseProps}\n      items={normalizedItems}\n      disabled={loading || props.disabled}\n    >\n      <SelectBase.Trigger\n        className={cn(\n          selectVariants({ size }),\n          props.disabled && \"cursor-not-allowed opacity-50\",\n          className,\n        )}\n        aria-label={triggerAriaLabel}\n        aria-labelledby={triggerLabelledBy}\n      >\n        {loading ? (\n          <SkeletonLine className=\"w-32\" />\n        ) : (\n          <SelectBase.Value\n            placeholder={placeholder}\n            className=\"min-w-0 truncate data-[placeholder]:text-kumo-placeholder\"\n          >\n            {valueChildrenFn}\n          </SelectBase.Value>\n        )}\n        <SelectBase.Icon\n          className={cn(\n            \"flex shrink-0 items-center\",\n            triggerIconStyles[size].className,\n          )}\n        >\n          <CaretUpDownIcon\n            size={triggerIconStyles[size].iconSize}\n            className=\"fill-current\"\n          />\n        </SelectBase.Icon>\n      </SelectBase.Trigger>\n      <SelectBase.Portal container={container}>\n        <SelectBase.Positioner>\n          <SelectBase.Popup\n            className={cn(\n              \"flex flex-col\",\n              \"max-h-[var(--available-height)] bg-kumo-base text-kumo-default\",\n              \"rounded-lg shadow-lg ring ring-kumo-line\",\n              \"min-w-[calc(var(--anchor-width)+3px)] py-1.5\",\n            )}\n          >\n            <SelectBase.List\n              className={cn(\n                \"min-h-0 flex-1 overflow-y-auto overscroll-none scroll-pt-2 scroll-pb-2\",\n              )}\n            >\n              {renderedChildren}\n            </SelectBase.List>\n          </SelectBase.Popup>\n        </SelectBase.Positioner>\n      </SelectBase.Portal>\n    </SelectBase.Root>\n  );\n\n  // Use Field wrapper when label is provided and not hidden\n  if (useFieldWrapper) {\n    return (\n      <Field\n        label={label}\n        required={required}\n        labelTooltip={labelTooltip}\n        description={description}\n        error={\n          error\n            ? typeof error === \"string\"\n              ? { message: error, match: true }\n              : error\n            : undefined\n        }\n      >\n        {selectControl}\n      </Field>\n    );\n  }\n\n  // Render with standalone label when label is hidden (sr-only)\n  // Still show description/error for accessibility and UX\n  const normalizedError = error\n    ? typeof error === \"string\"\n      ? { message: error, match: true as const }\n      : error\n    : undefined;\n\n  return (\n    <div className=\"grid gap-2\">\n      {label && (\n        <span id={labelId} className=\"sr-only\">\n          {label}\n        </span>\n      )}\n      {selectControl}\n      {normalizedError ? (\n        <span className=\"text-sm text-kumo-danger\">\n          {normalizedError.message}\n        </span>\n      ) : (\n        description && (\n          <span className=\"text-sm leading-snug text-kumo-subtle\">\n            {description}\n          </span>\n        )\n      )}\n    </div>\n  );\n}\n\ntype OptionProps<T> = {\n  children: ReactNode;\n  value: T;\n  /** When `true`, the option cannot be selected. */\n  disabled?: boolean;\n  /** Additional CSS classes merged via `cn()`. */\n  className?: string;\n};\n\nfunction Option<T>({ children, value, disabled, className }: OptionProps<T>) {\n  return (\n    <SelectBase.Item\n      value={value}\n      disabled={disabled}\n      className={cn(\n        \"group mx-1.5 flex cursor-pointer items-center justify-between gap-2 rounded px-2 py-1.5 text-base outline-none\",\n        \"focus-visible:z-50 focus-visible:ring-2 focus-visible:ring-kumo-brand focus-visible:ring-inset\",\n        \"data-highlighted:bg-kumo-tint\",\n        \"data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50\",\n        className,\n      )}\n    >\n      <SelectBase.ItemText>{children}</SelectBase.ItemText>\n      <SelectBase.ItemIndicator>\n        <CheckIcon />\n      </SelectBase.ItemIndicator>\n    </SelectBase.Item>\n  );\n}\n\n// --- Select.Group ---\n\ntype GroupProps = {\n  children: ReactNode;\n  /** Additional CSS classes merged via `cn()`. */\n  className?: string;\n};\n\n/**\n * Groups related options together with an accessible `role=\"group\"`.\n * Use with `Select.GroupLabel` to provide a visible heading for the group.\n *\n * @example\n * ```tsx\n * <Select.Group>\n *   <Select.GroupLabel>Fruits</Select.GroupLabel>\n *   <Select.Option value=\"apple\">Apple</Select.Option>\n * </Select.Group>\n * ```\n */\nconst Group = forwardRef<HTMLDivElement, GroupProps>(\n  ({ children, className }, ref) => (\n    <SelectBase.Group ref={ref} className={cn(className)}>\n      {children}\n    </SelectBase.Group>\n  ),\n);\nGroup.displayName = \"Select.Group\";\n\n// --- Select.GroupLabel ---\n\ntype GroupLabelProps = {\n  children: ReactNode;\n  /** Additional CSS classes merged via `cn()`. */\n  className?: string;\n};\n\n/**\n * A visible heading for a `Select.Group`.\n * Automatically associated with its parent group for accessibility.\n *\n * @example\n * ```tsx\n * <Select.Group>\n *   <Select.GroupLabel>Available</Select.GroupLabel>\n *   <Select.Option value=\"a\">Option A</Select.Option>\n * </Select.Group>\n * ```\n */\nconst GroupLabel = forwardRef<HTMLDivElement, GroupLabelProps>(\n  ({ children, className }, ref) => (\n    <SelectBase.GroupLabel\n      ref={ref}\n      className={cn(\n        \"px-3.5 py-1.5 text-sm font-semibold text-kumo-subtle\",\n        className,\n      )}\n    >\n      {children}\n    </SelectBase.GroupLabel>\n  ),\n);\nGroupLabel.displayName = \"Select.GroupLabel\";\n\n// --- Select.Separator ---\n\ntype SeparatorProps = {\n  /** Additional CSS classes merged via `cn()`. */\n  className?: string;\n};\n\n/**\n * A visual divider between option groups.\n *\n * @example\n * ```tsx\n * <Select.Option value=\"a\">Option A</Select.Option>\n * <Select.Separator />\n * <Select.Option value=\"b\">Option B</Select.Option>\n * ```\n */\nconst Separator = forwardRef<HTMLDivElement, SeparatorProps>(\n  ({ className }, ref) => (\n    <SelectBase.Separator\n      ref={ref}\n      className={cn(\"-mx-1 my-1 h-px bg-kumo-hairline\", className)}\n    />\n  ),\n);\nSeparator.displayName = \"Select.Separator\";\n\n// --- Assign sub-components ---\n\nSelect.Option = Option;\nSelect.Group = Group;\nSelect.GroupLabel = GroupLabel;\nSelect.Separator = Separator;\n\n(Select.Option as { displayName?: string }).displayName = \"Select.Option\";\n"],"names":["KUMO_INPUT_VARIANTS","KUMO_SELECT_DEFAULT_VARIANTS","selectVariants","size","cn","buttonVariants","triggerIconStyles","isItemDescriptor","value","candidate","normalizeItems","items","key","entry","renderOptionsFromItems","normalizedItems","disabledLookup","item","index","meta","jsx","Option","Select","children","className","renderValue","label","hideLabel","placeholder","loading","labelTooltip","description","error","required","containerProp","props","labelId","useId","contextContainer","usePortalContainer","container","propLookup","ariaLabel","ariaLabelledby","fallbackLabel","useFieldWrapper","triggerLabelledBy","triggerAriaLabel","renderedChildren","valueChildrenFn","_items","baseProps","selectControl","jsxs","SelectBase.Root","SelectBase.Trigger","SkeletonLine","SelectBase.Value","SelectBase.Icon","CaretUpDownIcon","SelectBase.Portal","SelectBase.Positioner","SelectBase.Popup","SelectBase.List","Field","normalizedError","disabled","SelectBase.Item","SelectBase.ItemText","SelectBase.ItemIndicator","CheckIcon","Group","forwardRef","ref","SelectBase.Group","GroupLabel","SelectBase.GroupLabel","Separator","SelectBase.Separator"],"mappings":"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"}