@cloudflare/kumo 1.16.0 → 1.18.0

package/dist/chunks/{Legend-bov5dqf08wemc2qj.js → Legend-o0ntojbaplmszwk0.js}

@@ -147,6 +147,7 @@ function oe({
         data: G,
         color: o.color,
         name: o.name,
+        emphasis: { focus: "series" },
         ...L ? { areaStyle: L } : {},
         ...S
       });
@@ -155,7 +156,8 @@ function oe({
         name: o.name,
         type: "line",
         lineStyle: { type: "dashed" },
-        showSymbol: !1
+        showSymbol: !1,
+        emphasis: { focus: "series" }
       };
       $.length > 0 && g.push({
         ...A,
@@ -416,4 +418,4 @@ export {
   ae as a,
   T as b
 };
-//# sourceMappingURL=Legend-bov5dqf08wemc2qj.js.map
+//# sourceMappingURL=Legend-o0ntojbaplmszwk0.js.map

package/dist/chunks/Legend-o0ntojbaplmszwk0.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Legend-o0ntojbaplmszwk0.js","sources":["../../src/components/chart/Color.ts","../../src/components/chart/EChart.tsx","../../src/components/chart/TimeseriesChart.tsx","../../src/components/chart/Legend.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 = \"#086FFF\",\n  Violet = \"#CF7EE9\",\n  Cyan = \"#73CEE6\",\n  Indigo = \"#5B5FEF\",\n  LightBlue = \"#82B6FF\",\n  Pink = \"#F5609F\",\n  Indigo3 = \"#C2BDF3\",\n  Violet2 = \"#8D1EB1\",\n  Violet3 = \"#EBCAF6\",\n  Indigo2 = \"#7366E4\",\n}\n\n/**\n * Categorical colors for dark mode — same hues as the light palette but with\n * `E6` alpha (90% opacity) appended to soften contrast on dark backgrounds.\n */\nenum ChartCategoricalDarkColors {\n  Blue = \"#086FFFE6\",\n  Violet = \"#CF7EE9E6\",\n  Cyan = \"#73CEE6E6\",\n  Indigo = \"#5B5FEFE6\",\n  LightBlue = \"#82B6FFE6\",\n  Pink = \"#F5609FE6\",\n  Indigo3 = \"#C2BDF3E6\",\n  Violet2 = \"#8D1EB1E6\",\n  Violet3 = \"#EBCAF6E6\",\n  Indigo2 = \"#7366E4E6\",\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  Neutral = \"#82B6FF\",\n  NeutralLight = \"#B9D6FF\",\n  Disabled = \"#B6B6B6\",\n  DisabledLight = \"#D9D9D9\",\n}\n\n/**\n * Semantic colors for dark mode — same meanings as the light palette but with\n * `E6` alpha (90% opacity) for dark backgrounds.\n */\nenum ChartSemanticDarkColors {\n  Attention = \"#FC574AE6\",\n  Warning = \"#F8A054E6\",\n  Neutral = \"#82B6FFE6\",\n  NeutralLight = \"#B9D6FFE6\",\n  Disabled = \"#B6B6B6E6\",\n  DisabledLight = \"#D9D9D9E6\",\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.Violet,\n  ChartCategoricalLightColors.Cyan,\n  ChartCategoricalLightColors.Indigo,\n  ChartCategoricalLightColors.LightBlue,\n  ChartCategoricalLightColors.Pink,\n  ChartCategoricalLightColors.Indigo3,\n  ChartCategoricalLightColors.Violet2,\n  ChartCategoricalLightColors.Violet3,\n  ChartCategoricalLightColors.Indigo2,\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.Violet,\n  ChartCategoricalDarkColors.Cyan,\n  ChartCategoricalDarkColors.Indigo,\n  ChartCategoricalDarkColors.LightBlue,\n  ChartCategoricalDarkColors.Pink,\n  ChartCategoricalDarkColors.Indigo3,\n  ChartCategoricalDarkColors.Violet2,\n  ChartCategoricalDarkColors.Violet3,\n  ChartCategoricalDarkColors.Indigo2,\n];\n\n/**\n * Utilities for resolving Kumo chart colors by semantic name or series index.\n * Both functions accept an `isDarkMode` flag and return the appropriate hex color.\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)       // \"#F8A054E6\" (dark)\n   * ```\n   */\n  export function semantic(\n    name:\n      | \"Attention\"\n      | \"Warning\"\n      | \"Neutral\"\n      | \"NeutralLight\"\n      | \"Disabled\"\n      | \"DisabledLight\",\n    isDarkMode = false,\n  ) {\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 (10 colors).\n   *\n   * @example\n   * ```ts\n   * ChartPalette.color(0)        // Blue (light)\n   * ChartPalette.color(0, true)  // Blue with E6 alpha (dark)\n   * ChartPalette.color(10)       // wraps back to Blue\n   * ```\n   */\n  export function color(index: number, isDarkMode = false) {\n    return isDarkMode\n      ? CHART_DARK_COLORS[index % CHART_DARK_COLORS.length]\n      : CHART_LIGHT_COLORS[index % CHART_LIGHT_COLORS.length];\n  }\n}\n","import type * as echarts from \"echarts/core\";\nimport type { EChartsOption, SetOptionOpts } 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 * 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: EChartsOption;\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\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(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 } from \"echarts\";\nimport { useEffect, useMemo, useRef } from \"react\";\nimport { Chart, ChartEvents } 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        snapToData: true,\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        axisPointer: { type: \"shadow\" as const },\n        formatter: (params: any) => {\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];\n          const ts = first?.value?.[0] ?? first?.axisValue;\n          const header =\n            ts != null\n              ? `<div style=\"font-weight:600;margin-bottom:4px;\">${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              return `${param.marker} ${param.seriesName}: <strong>${formatFn ? formatFn(value) : value}</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,\n    };\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"],"names":["ChartSemanticLightColors","ChartSemanticDarkColors","CHART_LIGHT_COLORS","CHART_DARK_COLORS","ChartPalette","semantic","name","isDarkMode","color","index","Chart","forwardRef","echarts","options","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","events","range","hasTimeRangeCallback","ChartWaveLoader","mid","amp","period","steps","points","i","x","d","strokeColor","alpha","rgbMatch","hex","r","g","b","pad","n","LargeItem","unit","inactive","jsxs","SmallItem","ChartLegend"],"mappings":"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"}

package/dist/chunks/badge-dan90i0rzy4pwa1j.js

@@ -0,0 +1,102 @@
+"use client";
+import { jsx as i } from "react/jsx-runtime";
+import { c as r } from "./cn-ct4n7r74mh8y0f48.js";
+const o = "inline-flex w-fit flex-none shrink-0 items-center justify-self-start rounded-full px-2 py-0.5 text-xs font-medium whitespace-nowrap", s = {
+  variant: {
+    /** Semantic token badges */
+    primary: {
+      classes: "bg-kumo-badge-inverted text-kumo-badge-inverted",
+      description: "Primary badge"
+    },
+    secondary: {
+      classes: "bg-kumo-fill text-kumo-badge-neutral-subtle",
+      description: "Secondary badge"
+    },
+    error: {
+      classes: "bg-kumo-danger-tint/60 text-kumo-danger",
+      description: "Error badge"
+    },
+    warning: {
+      classes: "bg-kumo-warning-tint/70 text-kumo-warning",
+      description: "Warning badge"
+    },
+    success: {
+      classes: "bg-kumo-success-tint/70 text-kumo-success",
+      description: "Success badge"
+    },
+    destructive: {
+      classes: "bg-kumo-badge-red text-white",
+      description: "Deprecated. Use red instead."
+    },
+    info: {
+      classes: "bg-kumo-info-tint/70 text-kumo-info",
+      description: "Info badge"
+    },
+    beta: {
+      classes: "border border-dashed border-kumo-brand bg-transparent text-kumo-link",
+      description: "Indicates beta or experimental features"
+    },
+    outline: {
+      classes: "border border-kumo-fill bg-transparent text-kumo-default",
+      description: "Bordered badge with transparent background"
+    },
+    /** Other color token variants */
+    red: {
+      classes: "bg-kumo-badge-red text-white",
+      description: "Red badge"
+    },
+    green: {
+      classes: "bg-kumo-badge-green text-white",
+      description: "Green badge"
+    },
+    neutral: {
+      classes: "bg-kumo-badge-neutral text-white",
+      description: "Neutral badge"
+    },
+    orange: {
+      classes: "bg-kumo-badge-orange text-black",
+      description: "Orange badge"
+    },
+    purple: {
+      classes: "bg-kumo-badge-purple text-white",
+      description: "Purple badge"
+    },
+    teal: {
+      classes: "bg-kumo-badge-teal text-white",
+      description: "Teal badge"
+    },
+    "teal-subtle": {
+      classes: "bg-kumo-badge-teal-subtle text-kumo-badge-teal-subtle",
+      description: "Subtle teal badge"
+    },
+    blue: {
+      classes: "bg-kumo-badge-blue text-white",
+      description: "Blue badge"
+    }
+  }
+}, a = {
+  variant: "primary"
+};
+function d({
+  variant: e = a.variant
+} = {}) {
+  const t = s.variant[e];
+  return r(
+    // Base styles (exported as KUMO_BADGE_BASE_STYLES for Figma plugin)
+    o,
+    // Apply variant styles from KUMO_BADGE_VARIANTS (fallback to primary if variant not found)
+    t?.classes ?? s.variant[a.variant].classes
+  );
+}
+function g({
+  variant: e = a.variant,
+  className: t,
+  children: n
+}) {
+  return /* @__PURE__ */ i("span", { className: r(d({ variant: e }), t), children: n });
+}
+export {
+  g as B,
+  o as K
+};
+//# sourceMappingURL=badge-dan90i0rzy4pwa1j.js.map

package/dist/chunks/badge-dan90i0rzy4pwa1j.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge-dan90i0rzy4pwa1j.js","sources":["../../src/components/badge/badge.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Base styles applied to all badge variants. */\nexport const KUMO_BADGE_BASE_STYLES =\n  \"inline-flex w-fit flex-none shrink-0 items-center justify-self-start rounded-full px-2 py-0.5 text-xs font-medium whitespace-nowrap\";\n\n/** Badge variant definitions mapping variant names to their Tailwind classes and descriptions. */\nexport const KUMO_BADGE_VARIANTS = {\n  variant: {\n    /** Semantic token badges */\n    primary: {\n      classes: \"bg-kumo-badge-inverted text-kumo-badge-inverted\",\n      description: \"Primary badge\",\n    },\n    secondary: {\n      classes: \"bg-kumo-fill text-kumo-badge-neutral-subtle\",\n      description: \"Secondary badge\",\n    },\n    error: {\n      classes: \"bg-kumo-danger-tint/60 text-kumo-danger\",\n      description: \"Error badge\",\n    },\n    warning: {\n      classes: \"bg-kumo-warning-tint/70 text-kumo-warning\",\n      description: \"Warning badge\",\n    },\n    success: {\n      classes: \"bg-kumo-success-tint/70 text-kumo-success\",\n      description: \"Success badge\",\n    },\n    destructive: {\n      classes: \"bg-kumo-badge-red text-white\",\n      description: \"Deprecated. Use red instead.\",\n    },\n    info: {\n      classes: \"bg-kumo-info-tint/70 text-kumo-info\",\n      description: \"Info badge\",\n    },\n    beta: {\n      classes:\n        \"border border-dashed border-kumo-brand bg-transparent text-kumo-link\",\n      description: \"Indicates beta or experimental features\",\n    },\n    outline: {\n      classes: \"border border-kumo-fill bg-transparent text-kumo-default\",\n      description: \"Bordered badge with transparent background\",\n    },\n\n    /** Other color token variants */\n\n    red: {\n      classes: \"bg-kumo-badge-red text-white\",\n      description: \"Red badge\",\n    },\n    green: {\n      classes: \"bg-kumo-badge-green text-white\",\n      description: \"Green badge\",\n    },\n    neutral: {\n      classes: \"bg-kumo-badge-neutral text-white\",\n      description: \"Neutral badge\",\n    },\n    orange: {\n      classes: \"bg-kumo-badge-orange text-black\",\n      description: \"Orange badge\",\n    },\n    purple: {\n      classes: \"bg-kumo-badge-purple text-white\",\n      description: \"Purple badge\",\n    },\n    teal: {\n      classes: \"bg-kumo-badge-teal text-white\",\n      description: \"Teal badge\",\n    },\n    \"teal-subtle\": {\n      classes: \"bg-kumo-badge-teal-subtle text-kumo-badge-teal-subtle\",\n      description: \"Subtle teal badge\",\n    },\n    blue: {\n      classes: \"bg-kumo-badge-blue text-white\",\n      description: \"Blue badge\",\n    },\n  },\n} as const;\n\nexport const KUMO_BADGE_DEFAULT_VARIANTS = {\n  variant: \"primary\",\n} as const;\n\n// Derived types from KUMO_BADGE_VARIANTS\nexport type KumoBadgeVariant = keyof typeof KUMO_BADGE_VARIANTS.variant;\n\nexport interface KumoBadgeVariantsProps {\n  variant?: KumoBadgeVariant;\n}\n\nexport function badgeVariants({\n  variant = KUMO_BADGE_DEFAULT_VARIANTS.variant,\n}: KumoBadgeVariantsProps = {}) {\n  const variantConfig = KUMO_BADGE_VARIANTS.variant[variant];\n  return cn(\n    // Base styles (exported as KUMO_BADGE_BASE_STYLES for Figma plugin)\n    KUMO_BADGE_BASE_STYLES,\n    // Apply variant styles from KUMO_BADGE_VARIANTS (fallback to primary if variant not found)\n    variantConfig?.classes ??\n      KUMO_BADGE_VARIANTS.variant[KUMO_BADGE_DEFAULT_VARIANTS.variant].classes,\n  );\n}\n\n// Legacy type alias for backwards compatibility\nexport type BadgeVariant = KumoBadgeVariant;\n\n/**\n * Badge component props.\n *\n * @example\n * ```tsx\n * <Badge variant=\"green\">Active</Badge>\n * <Badge variant=\"red\">Error</Badge>\n * <Badge variant=\"neutral\">Inactive</Badge>\n * ```\n */\nexport interface BadgeProps {\n  /**\n   * Color variant of the badge.\n   * Recommended semantic variants:\n   * - `\"primary\"` — Primary badge\n   * - `\"secondary\"` — Secondary badge\n   * - `\"error\"` — Error badge\n   * - `\"warning\"` — Warning badge\n   * - `\"success\"` — Success badge\n   * - `\"info\"` — Info badge\n   *\n   * Additional token variants:\n   * - `\"red\"`, `\"orange\"`, `\"green\"`, `\"teal\"`, `\"blue\"`, `\"purple\"`, `\"neutral\"`\n   * - `\"teal-subtle\"`, `\"neutral-subtle\"`\n   * - `\"inverted\"`\n   * - `\"outline\"` — Bordered badge with transparent background\n   * - `\"beta\"` — Dashed-border badge for beta/experimental features\n   * @default \"secondary\"\n   */\n  variant?: KumoBadgeVariant;\n  /** Additional CSS classes merged via `cn()`. */\n  className?: string;\n  /** Content rendered inside the badge. */\n  children: ReactNode;\n}\n\n/**\n * Small status label for categorizing or highlighting content.\n *\n * @example\n * ```tsx\n * <Badge variant=\"green\">Active</Badge>\n * ```\n */\nexport function Badge({\n  variant = KUMO_BADGE_DEFAULT_VARIANTS.variant,\n  className,\n  children,\n}: BadgeProps) {\n  return (\n    <span className={cn(badgeVariants({ variant }), className)}>\n      {children}\n    </span>\n  );\n}\n"],"names":["KUMO_BADGE_BASE_STYLES","KUMO_BADGE_VARIANTS","KUMO_BADGE_DEFAULT_VARIANTS","badgeVariants","variant","variantConfig","cn","Badge","className","children","jsx"],"mappings":";;;AAIO,MAAMA,IACX,uIAGWC,IAAsB;AAAA,EACjC,SAAS;AAAA;AAAA,IAEP,SAAS;AAAA,MACP,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,WAAW;AAAA,MACT,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,OAAO;AAAA,MACL,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,SAAS;AAAA,MACP,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,SAAS;AAAA,MACP,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,aAAa;AAAA,MACX,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,MAAM;AAAA,MACJ,SACE;AAAA,MACF,aAAa;AAAA,IAAA;AAAA,IAEf,SAAS;AAAA,MACP,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA;AAAA,IAKf,KAAK;AAAA,MACH,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,OAAO;AAAA,MACL,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,SAAS;AAAA,MACP,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,QAAQ;AAAA,MACN,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,QAAQ;AAAA,MACN,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,eAAe;AAAA,MACb,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,EACf;AAEJ,GAEaC,IAA8B;AAAA,EACzC,SAAS;AACX;AASO,SAASC,EAAc;AAAA,EAC5B,SAAAC,IAAUF,EAA4B;AACxC,IAA4B,IAAI;AAC9B,QAAMG,IAAgBJ,EAAoB,QAAQG,CAAO;AACzD,SAAOE;AAAA;AAAA,IAELN;AAAA;AAAA,IAEAK,GAAe,WACbJ,EAAoB,QAAQC,EAA4B,OAAO,EAAE;AAAA,EAAA;AAEvE;AAiDO,SAASK,EAAM;AAAA,EACpB,SAAAH,IAAUF,EAA4B;AAAA,EACtC,WAAAM;AAAA,EACA,UAAAC;AACF,GAAe;AACb,SACE,gBAAAC,EAAC,QAAA,EAAK,WAAWJ,EAAGH,EAAc,EAAE,SAAAC,GAAS,GAAGI,CAAS,GACtD,UAAAC,EAAA,CACH;AAEJ;"}

package/dist/chunks/banner-eiwcnk7ts21s3bnb.js

@@ -0,0 +1,79 @@
+"use client";
+import { jsxs as i, jsx as s } from "react/jsx-runtime";
+import { forwardRef as p, isValidElement as g } from "react";
+import { c as r } from "./cn-ct4n7r74mh8y0f48.js";
+const E = "flex w-full items-start gap-3 rounded-lg border px-4 py-3 text-base", x = {
+  variant: {
+    default: {
+      classes: "bg-kumo-info-tint/30 border-kumo-info/50 text-kumo-info selection:bg-kumo-info",
+      iconClasses: "text-kumo-info",
+      description: "Informational banner for general messages"
+    },
+    alert: {
+      classes: "bg-kumo-warning-tint/15 border-kumo-warning/50 text-kumo-warning selection:bg-kumo-warning",
+      iconClasses: "text-kumo-warning",
+      description: "Warning banner for cautionary messages"
+    },
+    error: {
+      classes: "bg-kumo-danger-tint/15 border-kumo-danger/50 text-kumo-danger selection:bg-kumo-danger",
+      iconClasses: "text-kumo-danger",
+      description: "Error banner for critical issues"
+    }
+  }
+}, k = {
+  variant: "default"
+};
+function f({
+  variant: e = k.variant
+} = {}) {
+  return r(
+    // Base styles (exported as KUMO_BANNER_BASE_STYLES for Figma plugin)
+    E,
+    // Apply variant styles from KUMO_BANNER_VARIANTS
+    x.variant[e].classes
+  );
+}
+var R = /* @__PURE__ */ ((e) => (e[e.DEFAULT = 0] = "DEFAULT", e[e.ALERT = 1] = "ALERT", e[e.ERROR = 2] = "ERROR", e))(R || {});
+const v = p(function({
+  icon: a,
+  title: t,
+  description: n,
+  action: c,
+  children: N,
+  text: b,
+  variant: o = k.variant,
+  className: m
+}, d) {
+  const u = x.variant[o];
+  if (t || n)
+    return /* @__PURE__ */ i("div", { ref: d, className: r(f({ variant: o }), m), children: [
+      a && /* @__PURE__ */ s(
+        "span",
+        {
+          className: r(
+            "shrink-0 flex items-center h-[1.375em]",
+            u.iconClasses
+          ),
+          children: a
+        }
+      ),
+      /* @__PURE__ */ i("div", { className: "flex min-w-0 flex-1 items-center justify-between gap-3", children: [
+        /* @__PURE__ */ i("div", { className: "flex flex-col gap-0.5", children: [
+          t && /* @__PURE__ */ s("p", { className: "font-medium leading-snug", children: t }),
+          n && /* @__PURE__ */ s("div", { className: "text-sm leading-snug", children: g(n) ? n : /* @__PURE__ */ s("p", { children: n }) })
+        ] }),
+        c && /* @__PURE__ */ s("div", { className: "flex shrink-0 items-center gap-2", children: c })
+      ] })
+    ] });
+  const l = N ?? b, h = g(l) ? l : /* @__PURE__ */ s("p", { children: l });
+  return /* @__PURE__ */ i("div", { ref: d, className: r(f({ variant: o }), m), children: [
+    a && /* @__PURE__ */ s("span", { className: r("shrink-0", u.iconClasses), children: a }),
+    h
+  ] });
+});
+v.displayName = "Banner";
+export {
+  v as B,
+  R as a
+};
+//# sourceMappingURL=banner-eiwcnk7ts21s3bnb.js.map

package/dist/chunks/banner-eiwcnk7ts21s3bnb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"banner-eiwcnk7ts21s3bnb.js","sources":["../../src/components/banner/banner.tsx"],"sourcesContent":["import { type ReactNode, isValidElement, forwardRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Base styles applied to all banner variants. */\nexport const KUMO_BANNER_BASE_STYLES =\n  \"flex w-full items-start gap-3 rounded-lg border px-4 py-3 text-base\";\n\n/** Banner variant definitions mapping variant names to their Tailwind classes and descriptions. */\nexport const KUMO_BANNER_VARIANTS = {\n  variant: {\n    default: {\n      classes:\n        \"bg-kumo-info-tint/30 border-kumo-info/50 text-kumo-info selection:bg-kumo-info\",\n      iconClasses: \"text-kumo-info\",\n      description: \"Informational banner for general messages\",\n    },\n    alert: {\n      classes:\n        \"bg-kumo-warning-tint/15 border-kumo-warning/50 text-kumo-warning selection:bg-kumo-warning\",\n      iconClasses: \"text-kumo-warning\",\n      description: \"Warning banner for cautionary messages\",\n    },\n    error: {\n      classes:\n        \"bg-kumo-danger-tint/15 border-kumo-danger/50 text-kumo-danger selection:bg-kumo-danger\",\n      iconClasses: \"text-kumo-danger\",\n      description: \"Error banner for critical issues\",\n    },\n  },\n} as const;\n\nexport const KUMO_BANNER_DEFAULT_VARIANTS = {\n  variant: \"default\",\n} as const;\n\n// Derived types from KUMO_BANNER_VARIANTS\nexport type KumoBannerVariant = keyof typeof KUMO_BANNER_VARIANTS.variant;\n\nexport interface KumoBannerVariantsProps {\n  /**\n   * Visual style of the banner.\n   * - `\"default\"` — Informational banner for general messages\n   * - `\"alert\"` — Warning banner for cautionary messages\n   * - `\"error\"` — Error banner for critical issues\n   * @default \"default\"\n   */\n  variant?: KumoBannerVariant;\n}\n\nexport function bannerVariants({\n  variant = KUMO_BANNER_DEFAULT_VARIANTS.variant,\n}: KumoBannerVariantsProps = {}) {\n  return cn(\n    // Base styles (exported as KUMO_BANNER_BASE_STYLES for Figma plugin)\n    KUMO_BANNER_BASE_STYLES,\n    // Apply variant styles from KUMO_BANNER_VARIANTS\n    KUMO_BANNER_VARIANTS.variant[variant].classes,\n  );\n}\n\n// Legacy enum for backwards compatibility\nexport enum BannerVariant {\n  DEFAULT,\n  ALERT,\n  ERROR,\n}\n\n/**\n * Banner component props.\n *\n * @example\n * ```tsx\n * <Banner title=\"Update available\" description=\"A new version is ready to install.\" />\n * <Banner variant=\"alert\" title=\"Session expiring\" description=\"Your session will expire soon.\" />\n * <Banner variant=\"error\" title=\"Save failed\" description=\"We couldn't save your changes.\" />\n * ```\n */\nexport interface BannerProps {\n  /** Icon element rendered before the banner content (e.g. from `@phosphor-icons/react`). */\n  icon?: ReactNode;\n  /** Primary heading text for the banner. Use for i18n string injection. */\n  title?: string;\n  /** Secondary description text displayed below the title. Use for i18n string injection. */\n  description?: ReactNode;\n  /** Action slot rendered at the trailing end of the banner (e.g. a CTA button or link). Only used in structured mode (with `title` or `description`). */\n  action?: ReactNode;\n  /** @deprecated Use `title` and `description` instead. Will be removed in a future major version. */\n  text?: string;\n  /** @deprecated Use `title` and `description` instead for better i18n support. */\n  children?: ReactNode;\n  /**\n   * Visual style of the banner.\n   * - `\"default\"` — Informational blue banner for general messages\n   * - `\"alert\"` — Warning yellow banner for cautionary messages\n   * - `\"error\"` — Error red banner for critical issues\n   * @default \"default\"\n   */\n  variant?: KumoBannerVariant;\n  /** Additional CSS classes merged via `cn()`. */\n  className?: string;\n}\n\n/**\n * Full-width message bar for informational, warning, or error notices.\n * Supports structured title/description for i18n, or simple children for basic usage.\n *\n * @example\n * ```tsx\n * // Structured (recommended for i18n)\n * <Banner\n *   variant=\"alert\"\n *   icon={<WarningCircle />}\n *   title=\"Review required\"\n *   description=\"Please review your billing information.\"\n * />\n *\n * // Simple (backwards compatible)\n * <Banner variant=\"alert\" icon={<WarningCircle />}>\n *   Review your billing information.\n * </Banner>\n * ```\n */\nexport const Banner = forwardRef<HTMLDivElement, BannerProps>(function Banner(\n  {\n    icon,\n    title,\n    description,\n    action,\n    children,\n    text,\n    variant = KUMO_BANNER_DEFAULT_VARIANTS.variant,\n    className,\n  },\n  ref,\n) {\n  const variantConfig = KUMO_BANNER_VARIANTS.variant[variant];\n\n  // Structured mode: title and/or description provided\n  if (title || description) {\n    return (\n      <div ref={ref} className={cn(bannerVariants({ variant }), className)}>\n        {icon && (\n          <span\n            className={cn(\n              \"shrink-0 flex items-center h-[1.375em]\",\n              variantConfig.iconClasses,\n            )}\n          >\n            {icon}\n          </span>\n        )}\n        <div className=\"flex min-w-0 flex-1 items-center justify-between gap-3\">\n          <div className=\"flex flex-col gap-0.5\">\n            {title && <p className=\"font-medium leading-snug\">{title}</p>}\n            {description && (\n              <div className=\"text-sm leading-snug\">\n                {isValidElement(description) ? (\n                  description\n                ) : (\n                  <p>{description}</p>\n                )}\n              </div>\n            )}\n          </div>\n          {action && (\n            <div className=\"flex shrink-0 items-center gap-2\">{action}</div>\n          )}\n        </div>\n      </div>\n    );\n  }\n\n  // Legacy mode: children or text prop\n  const value = children ?? text;\n  const content = isValidElement(value) ? value : <p>{value}</p>;\n\n  return (\n    <div ref={ref} className={cn(bannerVariants({ variant }), className)}>\n      {icon && (\n        <span className={cn(\"shrink-0\", variantConfig.iconClasses)}>\n          {icon}\n        </span>\n      )}\n      {content}\n    </div>\n  );\n});\n\nBanner.displayName = \"Banner\";\n"],"names":["KUMO_BANNER_BASE_STYLES","KUMO_BANNER_VARIANTS","KUMO_BANNER_DEFAULT_VARIANTS","bannerVariants","variant","cn","BannerVariant","Banner","forwardRef","icon","title","description","action","children","text","className","ref","variantConfig","jsxs","jsx","isValidElement","value","content"],"mappings":";;;;AAIO,MAAMA,IACX,uEAGWC,IAAuB;AAAA,EAClC,SAAS;AAAA,IACP,SAAS;AAAA,MACP,SACE;AAAA,MACF,aAAa;AAAA,MACb,aAAa;AAAA,IAAA;AAAA,IAEf,OAAO;AAAA,MACL,SACE;AAAA,MACF,aAAa;AAAA,MACb,aAAa;AAAA,IAAA;AAAA,IAEf,OAAO;AAAA,MACL,SACE;AAAA,MACF,aAAa;AAAA,MACb,aAAa;AAAA,IAAA;AAAA,EACf;AAEJ,GAEaC,IAA+B;AAAA,EAC1C,SAAS;AACX;AAgBO,SAASC,EAAe;AAAA,EAC7B,SAAAC,IAAUF,EAA6B;AACzC,IAA6B,IAAI;AAC/B,SAAOG;AAAA;AAAA,IAELL;AAAA;AAAA,IAEAC,EAAqB,QAAQG,CAAO,EAAE;AAAA,EAAA;AAE1C;AAGO,IAAKE,sBAAAA,OACVA,EAAAA,EAAA,UAAA,CAAA,IAAA,WACAA,EAAAA,EAAA,QAAA,CAAA,IAAA,SACAA,EAAAA,EAAA,QAAA,CAAA,IAAA,SAHUA,IAAAA,KAAA,CAAA,CAAA;AA6DL,MAAMC,IAASC,EAAwC,SAC5D;AAAA,EACE,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,SAAAV,IAAUF,EAA6B;AAAA,EACvC,WAAAa;AACF,GACAC,GACA;AACA,QAAMC,IAAgBhB,EAAqB,QAAQG,CAAO;AAG1D,MAAIM,KAASC;AACX,WACE,gBAAAO,EAAC,OAAA,EAAI,KAAAF,GAAU,WAAWX,EAAGF,EAAe,EAAE,SAAAC,EAAA,CAAS,GAAGW,CAAS,GAChE,UAAA;AAAA,MAAAN,KACC,gBAAAU;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWd;AAAA,YACT;AAAA,YACAY,EAAc;AAAA,UAAA;AAAA,UAGf,UAAAR;AAAA,QAAA;AAAA,MAAA;AAAA,MAGL,gBAAAS,EAAC,OAAA,EAAI,WAAU,0DACb,UAAA;AAAA,QAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,yBACZ,UAAA;AAAA,UAAAR,KAAS,gBAAAS,EAAC,KAAA,EAAE,WAAU,4BAA4B,UAAAT,GAAM;AAAA,UACxDC,KACC,gBAAAQ,EAAC,OAAA,EAAI,WAAU,wBACZ,UAAAC,EAAeT,CAAW,IACzBA,IAEA,gBAAAQ,EAAC,KAAA,EAAG,UAAAR,EAAA,CAAY,EAAA,CAEpB;AAAA,QAAA,GAEJ;AAAA,QACCC,KACC,gBAAAO,EAAC,OAAA,EAAI,WAAU,oCAAoC,UAAAP,EAAA,CAAO;AAAA,MAAA,EAAA,CAE9D;AAAA,IAAA,GACF;AAKJ,QAAMS,IAAQR,KAAYC,GACpBQ,IAAUF,EAAeC,CAAK,IAAIA,IAAQ,gBAAAF,EAAC,OAAG,UAAAE,GAAM;AAE1D,SACE,gBAAAH,EAAC,OAAA,EAAI,KAAAF,GAAU,WAAWX,EAAGF,EAAe,EAAE,SAAAC,EAAA,CAAS,GAAGW,CAAS,GAChE,UAAA;AAAA,IAAAN,KACC,gBAAAU,EAAC,UAAK,WAAWd,EAAG,YAAYY,EAAc,WAAW,GACtD,UAAAR,EAAA,CACH;AAAA,IAEDa;AAAA,EAAA,GACH;AAEJ,CAAC;AAEDf,EAAO,cAAc;"}

package/dist/chunks/{breadcrumbs-m79gm4gjwbfajpna.js → breadcrumbs-k39s28qx05vbxxth.js}

@@ -2,8 +2,8 @@
 import { jsxs as l, jsx as r } from "react/jsx-runtime";
 import { Children as h, cloneElement as d, isValidElement as k, useState as x, useEffect as C } from "react";
 import { CheckIcon as g, CopyIcon as w } from "@phosphor-icons/react";
-import { B as N } from "./button-j0hi0afn33w9lxgi.js";
-import { S as y } from "./skeleton-line-1j5exu6vv07mmhfb.js";
+import { B as N } from "./button-cdxnqcgzwko8ooha.js";
+import { S as y } from "./skeleton-line-epxenksfesr2fkcv.js";
 import { u as v } from "./link-provider-mn2voeohon7cj9o4.js";
 import { c as b } from "./cn-ct4n7r74mh8y0f48.js";
 const I = {
@@ -163,4 +163,4 @@ export {
   B as a,
   L as b
 };
-//# sourceMappingURL=breadcrumbs-m79gm4gjwbfajpna.js.map
+//# sourceMappingURL=breadcrumbs-k39s28qx05vbxxth.js.map

package/dist/chunks/{breadcrumbs-m79gm4gjwbfajpna.js.map → breadcrumbs-k39s28qx05vbxxth.js.map}

@@ -1 +1 @@
-{"version":3,"file":"breadcrumbs-m79gm4gjwbfajpna.js","sources":["../../src/components/breadcrumbs/breadcrumbs.tsx"],"sourcesContent":["import {\n  Children,\n  cloneElement,\n  isValidElement,\n  useEffect,\n  useState,\n  type PropsWithChildren,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\nimport { CheckIcon, CopyIcon } from \"@phosphor-icons/react\";\nimport { Button } from \"../../components/button\";\nimport { SkeletonLine } from \"../../components/loader/skeleton-line\";\nimport { useLinkComponent } from \"../../utils/link-provider\";\nimport { cn } from \"../../utils/cn\";\n\n/** Breadcrumbs size variant definitions. */\nexport const KUMO_BREADCRUMBS_VARIANTS = {\n  size: {\n    sm: {\n      classes: \"text-sm h-10 gap-0.5\",\n      description: \"Compact breadcrumbs for dense UIs\",\n    },\n    base: {\n      classes: \"text-base h-12 gap-1\",\n      description: \"Default breadcrumbs size\",\n    },\n  },\n} as const;\n\nexport const KUMO_BREADCRUMBS_DEFAULT_VARIANTS = {\n  size: \"base\",\n} as const;\n\nexport type KumoBreadcrumbsSize = keyof typeof KUMO_BREADCRUMBS_VARIANTS.size;\n\nexport interface KumoBreadcrumbsVariantsProps {\n  /**\n   * Size of the breadcrumbs.\n   * - `\"sm\"` — Compact breadcrumbs for dense UIs\n   * - `\"base\"` — Default breadcrumbs size\n   * @default \"base\"\n   */\n  size?: KumoBreadcrumbsSize;\n}\n\nexport function breadcrumbsVariants({\n  size = KUMO_BREADCRUMBS_DEFAULT_VARIANTS.size,\n}: KumoBreadcrumbsVariantsProps = {}) {\n  return cn(\n    \"group mr-4 flex min-w-0 grow items-center overflow-hidden whitespace-nowrap\",\n    KUMO_BREADCRUMBS_VARIANTS.size[size].classes,\n  );\n}\n\nexport interface BreadcrumbsItemProps {\n  href: string;\n  icon?: React.ReactNode;\n}\n\nconst Link = ({\n  href,\n  icon,\n  children,\n}: PropsWithChildren<BreadcrumbsItemProps>) => {\n  const LinkComponent = useLinkComponent();\n\n  return (\n    <LinkComponent\n      to={href}\n      className=\"flex min-w-0 max-w-full items-center gap-1 text-kumo-subtle no-underline\"\n    >\n      {!!icon && <span className=\"flex shrink-0 items-center\">{icon}</span>}\n      <span className=\"truncate\">{children}</span>\n    </LinkComponent>\n  );\n};\n\ninterface BreadcrumbsCurrentProps {\n  loading?: boolean;\n  icon?: React.ReactNode;\n}\n\nfunction Current({\n  children,\n  icon,\n  loading,\n}: PropsWithChildren<BreadcrumbsCurrentProps>) {\n  if (loading) {\n    return (\n      <div className=\"flex w-[125px] min-w-0 items-center gap-1\">\n        {icon && <span className=\"flex shrink-0 items-center\">{icon}</span>}\n        <SkeletonLine />\n      </div>\n    );\n  }\n\n  return (\n    <div\n      className=\"flex min-w-0 max-w-full items-center gap-1 font-medium\"\n      aria-current=\"page\"\n    >\n      {icon && <span className=\"flex shrink-0 items-center\">{icon}</span>}\n      <span className=\"truncate\">{children}</span>\n    </div>\n  );\n}\n\nfunction Separator() {\n  return (\n    <span\n      className=\"flex shrink-0 items-center text-kumo-inactive\"\n      aria-hidden=\"true\"\n    >\n      <svg width=\"24\" height=\"24\" fill=\"none\" viewBox=\"0 0 24 24\">\n        <path\n          stroke=\"currentColor\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"1.5\"\n          d=\"M10.75 8.75L14.25 12L10.75 15.25\"\n        />\n      </svg>\n    </span>\n  );\n}\n\nfunction MobileEllipsis() {\n  return (\n    <span className=\"flex shrink-0 items-center text-kumo-subtle\" aria-hidden>\n      ...\n    </span>\n  );\n}\n\nfunction Clipboard({ text }: { text: string }) {\n  const [isCopied, setIsCopied] = useState(false);\n\n  useEffect(() => {\n    if (!isCopied) return;\n\n    const timeoutId = setTimeout(() => setIsCopied(false), 2000);\n    return () => clearTimeout(timeoutId);\n  }, [isCopied]);\n\n  const handleCopyDeeplink = async () => {\n    if (!text) return;\n\n    try {\n      await navigator.clipboard.writeText(text);\n      setIsCopied(true);\n    } catch (err) {\n      console.error(\"Failed to copy deeplink:\", err);\n    }\n  };\n\n  return (\n    <Button\n      variant=\"ghost\"\n      shape=\"square\"\n      size=\"sm\"\n      className=\"opacity-0 transition-[opacity] group-hover:opacity-100\"\n      onClick={handleCopyDeeplink}\n      title=\"Click to copy\"\n      aria-label=\"Copy\"\n    >\n      {isCopied ? (\n        <CheckIcon weight=\"bold\" className=\"text-kumo-success\" />\n      ) : (\n        <CopyIcon weight=\"regular\" />\n      )}\n    </Button>\n  );\n}\n\n/**\n * Breadcrumbs component props.\n *\n * @example\n * ```tsx\n * <Breadcrumbs>\n *   <Breadcrumbs.Link href=\"/\">Home</Breadcrumbs.Link>\n *   <Breadcrumbs.Separator />\n *   <Breadcrumbs.Link href=\"/docs\">Docs</Breadcrumbs.Link>\n *   <Breadcrumbs.Separator />\n *   <Breadcrumbs.Current>Current Page</Breadcrumbs.Current>\n * </Breadcrumbs>\n * ```\n */\nexport interface BreadcrumbsProps\n  extends PropsWithChildren,\n    KumoBreadcrumbsVariantsProps {\n  /** Additional CSS classes merged via `cn()`. */\n  className?: string;\n}\n\n/**\n * Navigation breadcrumb trail showing the current page's location in a hierarchy.\n * Compound component with `Breadcrumbs.Link`, `Breadcrumbs.Current`, `Breadcrumbs.Separator`, and `Breadcrumbs.Clipboard`.\n *\n * @example\n * ```tsx\n * <Breadcrumbs>\n *   <Breadcrumbs.Link href=\"/\">Home</Breadcrumbs.Link>\n *   <Breadcrumbs.Separator />\n *   <Breadcrumbs.Current>Dashboard</Breadcrumbs.Current>\n * </Breadcrumbs>\n * ```\n */\nexport function Breadcrumb({\n  children,\n  size = \"base\",\n  className,\n}: BreadcrumbsProps) {\n  const childArray = Children.toArray(children);\n  const mobileChildren = getMobileBreadcrumbChildren(childArray);\n\n  return (\n    <nav\n      className={cn(breadcrumbsVariants({ size }), className)}\n      aria-label=\"breadcrumb\"\n    >\n      <div className=\"contents sm:hidden\">{mobileChildren}</div>\n      <div className=\"hidden sm:contents\">{childArray}</div>\n    </nav>\n  );\n}\n\nfunction isComponentElement(\n  child: ReactNode,\n  component: unknown,\n): child is ReactElement {\n  return isValidElement(child) && child.type === component;\n}\n\nfunction getMobileBreadcrumbChildren(children: ReactNode[]): ReactNode[] {\n  const breadcrumbItems = children.filter(\n    (child) =>\n      isComponentElement(child, Link) || isComponentElement(child, Current),\n  ) as ReactElement[];\n\n  if (breadcrumbItems.length <= 2) {\n    return children;\n  }\n\n  const [parentItem, currentItem] = breadcrumbItems.slice(-2);\n  const trailingItems: ReactNode[] = [\n    <MobileEllipsis key=\"kumo-breadcrumb-mobile-ellipsis\" />,\n    <Separator key=\"kumo-breadcrumb-mobile-separator-leading\" />,\n    cloneElement(parentItem, { key: \"kumo-breadcrumb-mobile-parent\" }),\n    <Separator key=\"kumo-breadcrumb-mobile-separator-trailing\" />,\n    cloneElement(currentItem, { key: \"kumo-breadcrumb-mobile-current\" }),\n  ];\n\n  const extras = children.filter(\n    (child) =>\n      !isComponentElement(child, Link) &&\n      !isComponentElement(child, Current) &&\n      !isComponentElement(child, Separator),\n  );\n\n  return [...trailingItems, ...extras];\n}\n\nBreadcrumb.Link = Link;\nBreadcrumb.Current = Current;\nBreadcrumb.Separator = Separator;\nBreadcrumb.Clipboard = Clipboard;\n"],"names":["KUMO_BREADCRUMBS_VARIANTS","KUMO_BREADCRUMBS_DEFAULT_VARIANTS","breadcrumbsVariants","size","cn","Link","href","icon","children","LinkComponent","useLinkComponent","jsxs","jsx","Current","loading","SkeletonLine","Separator","MobileEllipsis","Clipboard","text","isCopied","setIsCopied","useState","useEffect","timeoutId","Button","err","CheckIcon","CopyIcon","Breadcrumb","className","childArray","Children","mobileChildren","getMobileBreadcrumbChildren","isComponentElement","child","component","isValidElement","breadcrumbItems","parentItem","currentItem","trailingItems","cloneElement","extras"],"mappings":"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"}
+{"version":3,"file":"breadcrumbs-k39s28qx05vbxxth.js","sources":["../../src/components/breadcrumbs/breadcrumbs.tsx"],"sourcesContent":["import {\n  Children,\n  cloneElement,\n  isValidElement,\n  useEffect,\n  useState,\n  type PropsWithChildren,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\nimport { CheckIcon, CopyIcon } from \"@phosphor-icons/react\";\nimport { Button } from \"../../components/button\";\nimport { SkeletonLine } from \"../../components/loader/skeleton-line\";\nimport { useLinkComponent } from \"../../utils/link-provider\";\nimport { cn } from \"../../utils/cn\";\n\n/** Breadcrumbs size variant definitions. */\nexport const KUMO_BREADCRUMBS_VARIANTS = {\n  size: {\n    sm: {\n      classes: \"text-sm h-10 gap-0.5\",\n      description: \"Compact breadcrumbs for dense UIs\",\n    },\n    base: {\n      classes: \"text-base h-12 gap-1\",\n      description: \"Default breadcrumbs size\",\n    },\n  },\n} as const;\n\nexport const KUMO_BREADCRUMBS_DEFAULT_VARIANTS = {\n  size: \"base\",\n} as const;\n\nexport type KumoBreadcrumbsSize = keyof typeof KUMO_BREADCRUMBS_VARIANTS.size;\n\nexport interface KumoBreadcrumbsVariantsProps {\n  /**\n   * Size of the breadcrumbs.\n   * - `\"sm\"` — Compact breadcrumbs for dense UIs\n   * - `\"base\"` — Default breadcrumbs size\n   * @default \"base\"\n   */\n  size?: KumoBreadcrumbsSize;\n}\n\nexport function breadcrumbsVariants({\n  size = KUMO_BREADCRUMBS_DEFAULT_VARIANTS.size,\n}: KumoBreadcrumbsVariantsProps = {}) {\n  return cn(\n    \"group mr-4 flex min-w-0 grow items-center overflow-hidden whitespace-nowrap\",\n    KUMO_BREADCRUMBS_VARIANTS.size[size].classes,\n  );\n}\n\nexport interface BreadcrumbsItemProps {\n  href: string;\n  icon?: React.ReactNode;\n}\n\nconst Link = ({\n  href,\n  icon,\n  children,\n}: PropsWithChildren<BreadcrumbsItemProps>) => {\n  const LinkComponent = useLinkComponent();\n\n  return (\n    <LinkComponent\n      to={href}\n      className=\"flex min-w-0 max-w-full items-center gap-1 text-kumo-subtle no-underline\"\n    >\n      {!!icon && <span className=\"flex shrink-0 items-center\">{icon}</span>}\n      <span className=\"truncate\">{children}</span>\n    </LinkComponent>\n  );\n};\n\ninterface BreadcrumbsCurrentProps {\n  loading?: boolean;\n  icon?: React.ReactNode;\n}\n\nfunction Current({\n  children,\n  icon,\n  loading,\n}: PropsWithChildren<BreadcrumbsCurrentProps>) {\n  if (loading) {\n    return (\n      <div className=\"flex w-[125px] min-w-0 items-center gap-1\">\n        {icon && <span className=\"flex shrink-0 items-center\">{icon}</span>}\n        <SkeletonLine />\n      </div>\n    );\n  }\n\n  return (\n    <div\n      className=\"flex min-w-0 max-w-full items-center gap-1 font-medium\"\n      aria-current=\"page\"\n    >\n      {icon && <span className=\"flex shrink-0 items-center\">{icon}</span>}\n      <span className=\"truncate\">{children}</span>\n    </div>\n  );\n}\n\nfunction Separator() {\n  return (\n    <span\n      className=\"flex shrink-0 items-center text-kumo-inactive\"\n      aria-hidden=\"true\"\n    >\n      <svg width=\"24\" height=\"24\" fill=\"none\" viewBox=\"0 0 24 24\">\n        <path\n          stroke=\"currentColor\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"1.5\"\n          d=\"M10.75 8.75L14.25 12L10.75 15.25\"\n        />\n      </svg>\n    </span>\n  );\n}\n\nfunction MobileEllipsis() {\n  return (\n    <span className=\"flex shrink-0 items-center text-kumo-subtle\" aria-hidden>\n      ...\n    </span>\n  );\n}\n\nfunction Clipboard({ text }: { text: string }) {\n  const [isCopied, setIsCopied] = useState(false);\n\n  useEffect(() => {\n    if (!isCopied) return;\n\n    const timeoutId = setTimeout(() => setIsCopied(false), 2000);\n    return () => clearTimeout(timeoutId);\n  }, [isCopied]);\n\n  const handleCopyDeeplink = async () => {\n    if (!text) return;\n\n    try {\n      await navigator.clipboard.writeText(text);\n      setIsCopied(true);\n    } catch (err) {\n      console.error(\"Failed to copy deeplink:\", err);\n    }\n  };\n\n  return (\n    <Button\n      variant=\"ghost\"\n      shape=\"square\"\n      size=\"sm\"\n      className=\"opacity-0 transition-[opacity] group-hover:opacity-100\"\n      onClick={handleCopyDeeplink}\n      title=\"Click to copy\"\n      aria-label=\"Copy\"\n    >\n      {isCopied ? (\n        <CheckIcon weight=\"bold\" className=\"text-kumo-success\" />\n      ) : (\n        <CopyIcon weight=\"regular\" />\n      )}\n    </Button>\n  );\n}\n\n/**\n * Breadcrumbs component props.\n *\n * @example\n * ```tsx\n * <Breadcrumbs>\n *   <Breadcrumbs.Link href=\"/\">Home</Breadcrumbs.Link>\n *   <Breadcrumbs.Separator />\n *   <Breadcrumbs.Link href=\"/docs\">Docs</Breadcrumbs.Link>\n *   <Breadcrumbs.Separator />\n *   <Breadcrumbs.Current>Current Page</Breadcrumbs.Current>\n * </Breadcrumbs>\n * ```\n */\nexport interface BreadcrumbsProps\n  extends PropsWithChildren,\n    KumoBreadcrumbsVariantsProps {\n  /** Additional CSS classes merged via `cn()`. */\n  className?: string;\n}\n\n/**\n * Navigation breadcrumb trail showing the current page's location in a hierarchy.\n * Compound component with `Breadcrumbs.Link`, `Breadcrumbs.Current`, `Breadcrumbs.Separator`, and `Breadcrumbs.Clipboard`.\n *\n * @example\n * ```tsx\n * <Breadcrumbs>\n *   <Breadcrumbs.Link href=\"/\">Home</Breadcrumbs.Link>\n *   <Breadcrumbs.Separator />\n *   <Breadcrumbs.Current>Dashboard</Breadcrumbs.Current>\n * </Breadcrumbs>\n * ```\n */\nexport function Breadcrumb({\n  children,\n  size = \"base\",\n  className,\n}: BreadcrumbsProps) {\n  const childArray = Children.toArray(children);\n  const mobileChildren = getMobileBreadcrumbChildren(childArray);\n\n  return (\n    <nav\n      className={cn(breadcrumbsVariants({ size }), className)}\n      aria-label=\"breadcrumb\"\n    >\n      <div className=\"contents sm:hidden\">{mobileChildren}</div>\n      <div className=\"hidden sm:contents\">{childArray}</div>\n    </nav>\n  );\n}\n\nfunction isComponentElement(\n  child: ReactNode,\n  component: unknown,\n): child is ReactElement {\n  return isValidElement(child) && child.type === component;\n}\n\nfunction getMobileBreadcrumbChildren(children: ReactNode[]): ReactNode[] {\n  const breadcrumbItems = children.filter(\n    (child) =>\n      isComponentElement(child, Link) || isComponentElement(child, Current),\n  ) as ReactElement[];\n\n  if (breadcrumbItems.length <= 2) {\n    return children;\n  }\n\n  const [parentItem, currentItem] = breadcrumbItems.slice(-2);\n  const trailingItems: ReactNode[] = [\n    <MobileEllipsis key=\"kumo-breadcrumb-mobile-ellipsis\" />,\n    <Separator key=\"kumo-breadcrumb-mobile-separator-leading\" />,\n    cloneElement(parentItem, { key: \"kumo-breadcrumb-mobile-parent\" }),\n    <Separator key=\"kumo-breadcrumb-mobile-separator-trailing\" />,\n    cloneElement(currentItem, { key: \"kumo-breadcrumb-mobile-current\" }),\n  ];\n\n  const extras = children.filter(\n    (child) =>\n      !isComponentElement(child, Link) &&\n      !isComponentElement(child, Current) &&\n      !isComponentElement(child, Separator),\n  );\n\n  return [...trailingItems, ...extras];\n}\n\nBreadcrumb.Link = Link;\nBreadcrumb.Current = Current;\nBreadcrumb.Separator = Separator;\nBreadcrumb.Clipboard = Clipboard;\n"],"names":["KUMO_BREADCRUMBS_VARIANTS","KUMO_BREADCRUMBS_DEFAULT_VARIANTS","breadcrumbsVariants","size","cn","Link","href","icon","children","LinkComponent","useLinkComponent","jsxs","jsx","Current","loading","SkeletonLine","Separator","MobileEllipsis","Clipboard","text","isCopied","setIsCopied","useState","useEffect","timeoutId","Button","err","CheckIcon","CopyIcon","Breadcrumb","className","childArray","Children","mobileChildren","getMobileBreadcrumbChildren","isComponentElement","child","component","isValidElement","breadcrumbItems","parentItem","currentItem","trailingItems","cloneElement","extras"],"mappings":"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"}