@signalflare-ai/ui 0.5.0

package/dist/chart-Bes4MN3C.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-Bes4MN3C.js","names":[],"sources":["../src/components/chart/color.ts","../src/components/chart/echart.tsx","../src/components/chart/timeseries-chart.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 * 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 */\nfunction 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 */\nfunction 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/**\n * Utilities for resolving SignalFlare chart colors by semantic name or series index.\n * Both functions accept an `isDarkMode` flag and return the appropriate hex color.\n */\nexport const ChartPalette = { semantic, color };\n","import type { EChartsOption, SetOptionOpts } from \"echarts\";\nimport type * as echarts from \"echarts/core\";\nimport { forwardRef, useEffect, useRef } from \"react\";\n\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 { EChartsOption } from \"echarts\";\nimport type { LineSeriesOption, BarSeriesOption } from \"echarts/charts\";\nimport type * as echarts from \"echarts/core\";\nimport { useEffect, useMemo, useRef } from \"react\";\n\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      <style>{`@keyframes sf-chart-wave{from{transform:translateX(0)}to{transform:translateX(${period}px)}}`}</style>\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: `sf-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 = Number.parseInt(hex.slice(0, 2), 16);\n  const g = Number.parseInt(hex.slice(2, 4), 16);\n  const b = Number.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-sf-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"],"mappings":"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"}

package/dist/checkbox-CPX7lBaU.js

@@ -0,0 +1,153 @@
+"use client";
+import { t as cn } from "./cn-YROP2_ox.js";
+import { t as Label } from "./label-QtJxtJ4u.js";
+import { createContext, forwardRef, useContext } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon, MinusIcon } from "@phosphor-icons/react";
+import { Checkbox } from "@base-ui/react/checkbox";
+import { CheckboxGroup } from "@base-ui/react/checkbox-group";
+import { Field } from "@base-ui/react/field";
+import { Fieldset } from "@base-ui/react/fieldset";
+//#region src/components/checkbox/checkbox.tsx
+/** Checkbox variant definitions mapping variant names to their Tailwind classes. */
+var SF_CHECKBOX_VARIANTS = { variant: {
+	default: {
+		classes: "[&:focus-within>span]:ring-sf-ring [&:hover>span]:ring-sf-ring",
+		description: "Default checkbox appearance"
+	},
+	error: {
+		classes: "[&>span]:ring-sf-danger",
+		description: "Error state for validation failures"
+	}
+} };
+var SF_CHECKBOX_DEFAULT_VARIANTS = { variant: "default" };
+var CheckboxGroupContext = createContext({ controlFirst: true });
+var CheckboxBase = forwardRef(({ className, checked, indeterminate, disabled, variant = "default", label, labelTooltip, controlFirst = true, onCheckedChange, onValueChange, onChange, required, name, ...props }, ref) => {
+	if (process.env.NODE_ENV !== "production") {
+		const hasLabel = Boolean(label);
+		const hasAriaLabel = Boolean(props["aria-label"]);
+		const hasAriaLabelledBy = Boolean(props["aria-labelledby"]);
+		if (!hasLabel && !hasAriaLabel && !hasAriaLabelledBy) console.warn("[SF Checkbox]: Checkbox must have an accessible name. Provide either:\n  - label prop: <Checkbox label='Accept terms' />\n  - aria-label: <Checkbox aria-label='Select item' />\n  - aria-labelledby for custom label association\n  Note: When used inside Checkbox.Group, label is optional");
+	}
+	const handleCheckedChange = (newChecked, eventDetails) => {
+		onCheckedChange?.(newChecked);
+		onValueChange?.(newChecked);
+		if (onChange) onChange(Object.assign(eventDetails.event, { target: { checked: newChecked } }));
+	};
+	const checkboxControl = /* @__PURE__ */ jsx(Checkbox.Root, {
+		ref,
+		name,
+		checked,
+		indeterminate,
+		disabled,
+		onCheckedChange: handleCheckedChange,
+		className: cn("flex h-3.5 w-3.5 items-center justify-center rounded-sm border-0 bg-sf-base ring", variant === "error" ? "ring-sf-danger" : "ring-sf-line", !disabled && "hover:ring-sf-ring focus-visible:ring-sf-ring", "data-[checked]:bg-sf-contrast data-[checked]:ring-sf-contrast data-[indeterminate]:bg-sf-contrast data-[indeterminate]:ring-sf-contrast", disabled && "cursor-not-allowed opacity-50", className),
+		...props,
+		children: /* @__PURE__ */ jsx(Checkbox.Indicator, {
+			className: "flex items-center justify-center text-sf-inverse",
+			render: (renderProps, state) => {
+				const Icon = state.indeterminate ? MinusIcon : CheckIcon;
+				return /* @__PURE__ */ jsx("span", {
+					...renderProps,
+					children: (state.checked || state.indeterminate) && /* @__PURE__ */ jsx(Icon, {
+						weight: "bold",
+						size: 10
+					})
+				});
+			}
+		})
+	});
+	if (!label) return checkboxControl;
+	return /* @__PURE__ */ jsx(Field.Root, {
+		className: "inline-flex",
+		children: /* @__PURE__ */ jsxs(Field.Label, {
+			className: cn("inline-flex items-center gap-2", controlFirst ? "flex-row" : "flex-row-reverse justify-end", disabled ? "cursor-not-allowed" : "cursor-pointer"),
+			children: [checkboxControl, /* @__PURE__ */ jsx(Label, {
+				showOptional: required === false,
+				tooltip: labelTooltip,
+				asContent: true,
+				children: label
+			})]
+		})
+	});
+});
+CheckboxBase.displayName = "Checkbox";
+var CheckboxItem = forwardRef(({ className, checked, indeterminate, disabled, variant = "default", label, value, onCheckedChange, onValueChange, name }, ref) => {
+	const { controlFirst } = useContext(CheckboxGroupContext);
+	const handleCheckedChange = (newChecked) => {
+		onCheckedChange?.(newChecked);
+		onValueChange?.(newChecked);
+	};
+	return /* @__PURE__ */ jsxs("label", {
+		className: cn("relative inline-flex items-center gap-2", !controlFirst && "flex-row-reverse justify-end", disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer", className),
+		children: [/* @__PURE__ */ jsx(Checkbox.Root, {
+			ref,
+			value,
+			name,
+			checked,
+			indeterminate,
+			disabled,
+			onCheckedChange: handleCheckedChange,
+			className: cn("peer flex h-3.5 w-3.5 items-center justify-center rounded-sm border-0 bg-sf-base ring", variant === "error" ? "ring-sf-danger" : "ring-sf-line", !disabled && "group-hover:ring-sf-ring hover:ring-sf-ring focus-visible:ring-sf-ring", "data-[checked]:bg-sf-contrast data-[checked]:ring-sf-contrast data-[indeterminate]:bg-sf-contrast data-[indeterminate]:ring-sf-contrast"),
+			children: /* @__PURE__ */ jsx(Checkbox.Indicator, {
+				className: "flex items-center justify-center text-sf-inverse",
+				render: (props, state) => {
+					const Icon = state.indeterminate ? MinusIcon : CheckIcon;
+					return /* @__PURE__ */ jsx("span", {
+						...props,
+						children: (state.checked || state.indeterminate) && /* @__PURE__ */ jsx(Icon, {
+							weight: "bold",
+							size: 10
+						})
+					});
+				}
+			})
+		}), /* @__PURE__ */ jsx("span", {
+			className: "text-base font-medium text-sf-default",
+			children: label
+		})]
+	});
+});
+CheckboxItem.displayName = "Checkbox.Item";
+function CheckboxGroup$1({ legend, children, error, description, defaultValue, value, onValueChange, allValues, disabled, controlFirst = true, className }) {
+	return /* @__PURE__ */ jsx(CheckboxGroupContext.Provider, {
+		value: { controlFirst },
+		children: /* @__PURE__ */ jsx(CheckboxGroup, {
+			defaultValue,
+			value,
+			onValueChange,
+			allValues,
+			disabled,
+			children: /* @__PURE__ */ jsxs(Fieldset.Root, {
+				className: cn("flex flex-col gap-4 rounded-lg border border-sf-line p-4", className),
+				children: [
+					/* @__PURE__ */ jsx(Fieldset.Legend, {
+						className: "text-lg font-medium text-sf-default",
+						children: legend
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "flex flex-col gap-2",
+						children
+					}),
+					error && /* @__PURE__ */ jsx("p", {
+						className: "text-sm text-sf-danger",
+						children: error
+					}),
+					description && /* @__PURE__ */ jsx("p", {
+						className: "text-sm text-sf-subtle",
+						children: description
+					})
+				]
+			})
+		})
+	});
+}
+var Checkbox$1 = Object.assign(CheckboxBase, {
+	Item: CheckboxItem,
+	Group: CheckboxGroup$1
+});
+Checkbox$1.displayName = "Checkbox";
+//#endregion
+export { SF_CHECKBOX_DEFAULT_VARIANTS as n, SF_CHECKBOX_VARIANTS as r, Checkbox$1 as t };
+
+//# sourceMappingURL=checkbox-CPX7lBaU.js.map

package/dist/checkbox-CPX7lBaU.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-CPX7lBaU.js","names":[],"sources":["../src/components/checkbox/checkbox.tsx"],"sourcesContent":["import {\n  Checkbox as BaseCheckbox,\n  type CheckboxRootChangeEventDetails,\n} from \"@base-ui/react/checkbox\";\nimport { CheckboxGroup as BaseCheckboxGroup } from \"@base-ui/react/checkbox-group\";\nimport { Field as FieldBase } from \"@base-ui/react/field\";\nimport { Fieldset } from \"@base-ui/react/fieldset\";\nimport { CheckIcon, MinusIcon } from \"@phosphor-icons/react\";\nimport { forwardRef, createContext, useContext, type ReactNode } from \"react\";\n\nimport { cn } from \"../../utils/cn\";\nimport { Label } from \"../label\";\n\n/** Checkbox variant definitions mapping variant names to their Tailwind classes. */\nexport const SF_CHECKBOX_VARIANTS = {\n  variant: {\n    default: {\n      classes: \"[&:focus-within>span]:ring-sf-ring [&:hover>span]:ring-sf-ring\",\n      description: \"Default checkbox appearance\",\n    },\n    error: {\n      classes: \"[&>span]:ring-sf-danger\",\n      description: \"Error state for validation failures\",\n    },\n  },\n} as const;\n\nexport const SF_CHECKBOX_DEFAULT_VARIANTS = {\n  variant: \"default\",\n} as const;\n\n// Derived types from SF_CHECKBOX_VARIANTS\nexport type SFCheckboxVariant = keyof typeof SF_CHECKBOX_VARIANTS.variant;\n\nexport interface SFCheckboxVariantsProps {\n  /**\n   * Visual variant.\n   * - `\"default\"` — Standard checkbox appearance\n   * - `\"error\"` — Error state for validation failures\n   * @default \"default\"\n   */\n  variant?: SFCheckboxVariant;\n}\n\nexport function checkboxVariants({\n  variant = SF_CHECKBOX_DEFAULT_VARIANTS.variant,\n}: SFCheckboxVariantsProps = {}) {\n  return cn(SF_CHECKBOX_VARIANTS.variant[variant].classes);\n}\n\n// Legacy type alias for backwards compatibility\nexport type CheckboxVariant = SFCheckboxVariant;\n\n// Context for passing controlFirst from Group to Items\nconst CheckboxGroupContext = createContext<{ controlFirst: boolean }>({\n  controlFirst: true,\n});\n\n/**\n * Single checkbox component props with accessibility guidance.\n *\n * **Accessible Name Required:** Checkbox should have one of:\n * 1. `label` prop (recommended) - built-in Field wrapper with horizontal layout\n * 2. `aria-label` - for checkboxes without visible label\n * 3. `aria-labelledby` - for custom label association\n *\n * **Note:** When used inside Checkbox.Group or Dropdown, label is optional (parent provides context).\n *\n * Missing accessible names will trigger console warnings in development (unless inside a group).\n *\n * @example\n * // Recommended: Built-in Field wrapper with label\n * <Checkbox label=\"Accept terms and conditions\" />\n *\n * @example\n * // Control-first layout (checkbox before label)\n * <Checkbox label=\"Remember me\" controlFirst={true} />\n *\n * @example\n * // Label-first layout (label before checkbox)\n * <Checkbox label=\"Enable notifications\" controlFirst={false} />\n *\n * @example\n * // Error variant (visual only, no error text for single checkboxes)\n * <Checkbox label=\"Required field\" variant=\"error\" />\n *\n * @example\n * // Without visible label (aria-label required)\n * <Checkbox aria-label=\"Select all items\" />\n *\n * @example\n * // Custom label association\n * <label id=\"terms-label\">I accept the terms</label>\n * <Checkbox aria-labelledby=\"terms-label\" />\n *\n * @example\n * // Inside Checkbox.Group (label optional)\n * <Checkbox.Group legend=\"Preferences\">\n *   <Checkbox.Item value=\"email\" label=\"Email notifications\" />\n *   <Checkbox.Item value=\"sms\" label=\"SMS notifications\" />\n * </Checkbox.Group>\n */\nexport type CheckboxProps = {\n  /** Visual variant: \"default\" or \"error\" for validation failures (visual only, no error text) */\n  variant?: CheckboxVariant;\n  /** Label content for the checkbox (enables built-in 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  /** When true (default), checkbox appears before label. When false, label appears before checkbox. */\n  controlFirst?: boolean;\n  /** Whether the checkbox is checked (controlled) */\n  checked?: boolean;\n  /** Whether the checkbox is in indeterminate state */\n  indeterminate?: boolean;\n  /** Whether the checkbox is disabled */\n  disabled?: boolean;\n  /** Callback when the checked state changes */\n  onCheckedChange?: (checked: boolean) => void;\n  /** @deprecated Use onCheckedChange instead */\n  onValueChange?: (checked: boolean) => void;\n  /** @deprecated Use onCheckedChange instead */\n  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;\n  /** Click handler */\n  onClick?: (event: React.MouseEvent) => void;\n  /** Name for form submission */\n  name?: string;\n  /** Whether the field is required */\n  required?: boolean;\n  /** Additional class name */\n  className?: string;\n  /** Accessible label when no visible label is provided */\n  \"aria-label\"?: string;\n  /** ID of element that labels this checkbox */\n  \"aria-labelledby\"?: string;\n};\n\n/**\n * Checkbox group component props (with built-in Fieldset and CheckboxGroup)\n *\n * Usage:\n * ```tsx\n * <Checkbox.Group\n *   legend=\"Choose preferences\"\n *   defaultValue={['email']}\n *   error=\"You must select at least one option\"\n * >\n *   <Checkbox.Item label=\"Email notifications\" value=\"email\" />\n *   <Checkbox.Item label=\"SMS notifications\" value=\"sms\" />\n * </Checkbox.Group>\n * ```\n */\nexport interface CheckboxGroupProps {\n  /** Legend text for the group */\n  legend: string;\n  /** Child Checkbox.Item components */\n  children: ReactNode;\n  /** Error message for the group (only appears in groups, not single checkboxes) */\n  error?: string;\n  /** Helper text for the group */\n  description?: ReactNode;\n  /** Values of checkboxes that should be initially checked (uncontrolled) */\n  defaultValue?: string[];\n  /** Values of checkboxes that should be checked (controlled) */\n  value?: string[];\n  /** Event handler called when checkbox values change */\n  onValueChange?: (value: string[]) => void;\n  /** All possible checkbox values (required for parent checkbox pattern) */\n  allValues?: string[];\n  /** Whether all checkboxes in the group are disabled */\n  disabled?: boolean;\n  /** When true (default), checkbox appears before label. When false, label appears before checkbox. */\n  controlFirst?: boolean;\n  /** Additional CSS classes */\n  className?: string;\n}\n\n/**\n * Individual checkbox item within a group\n */\nexport type CheckboxItemProps = {\n  /** Visual variant: \"default\" or \"error\" for validation failures */\n  variant?: CheckboxVariant;\n  /** Label text displayed next to checkbox */\n  label: string;\n  /** Value of the checkbox (required when used in Checkbox.Group) */\n  value?: string;\n  /** Additional CSS classes for the label wrapper */\n  className?: string;\n  checked?: boolean;\n  indeterminate?: boolean;\n  disabled?: boolean;\n  /** Callback when the checked state changes */\n  onCheckedChange?: (checked: boolean) => void;\n  /** @deprecated Use onCheckedChange instead */\n  onValueChange?: (checked: boolean) => void;\n  name?: string;\n};\n\n// Single checkbox with built-in Field\nconst CheckboxBase = forwardRef<HTMLButtonElement, CheckboxProps>(\n  (\n    {\n      className,\n      checked,\n      indeterminate,\n      disabled,\n      variant = \"default\",\n      label,\n      labelTooltip,\n      controlFirst = true,\n      onCheckedChange,\n      onValueChange,\n      onChange,\n      required,\n      name,\n      ...props\n    },\n    ref\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(props[\"aria-label\"]);\n      const hasAriaLabelledBy = Boolean(props[\"aria-labelledby\"]);\n\n      if (!hasLabel && !hasAriaLabel && !hasAriaLabelledBy) {\n        console.warn(\n          \"[SF Checkbox]: Checkbox must have an accessible name. Provide either:\\n\" +\n            \"  - label prop: <Checkbox label='Accept terms' />\\n\" +\n            \"  - aria-label: <Checkbox aria-label='Select item' />\\n\" +\n            \"  - aria-labelledby for custom label association\\n\" +\n            \"  Note: When used inside Checkbox.Group, label is optional\"\n        );\n      }\n    }\n\n    // Handle onCheckedChange (preferred) and deprecated onValueChange/onChange\n    const handleCheckedChange = (\n      newChecked: boolean,\n      eventDetails: CheckboxRootChangeEventDetails\n    ) => {\n      onCheckedChange?.(newChecked);\n      onValueChange?.(newChecked);\n      if (onChange) {\n        // Backwards compatibility: extend native event with target.checked\n        // so existing code using `e.target.checked` continues to work\n        const event = Object.assign(eventDetails.event, {\n          target: { checked: newChecked },\n        });\n        onChange(event as never);\n      }\n    };\n\n    const checkboxControl = (\n      <BaseCheckbox.Root\n        ref={ref}\n        name={name}\n        checked={checked}\n        indeterminate={indeterminate}\n        disabled={disabled}\n        onCheckedChange={handleCheckedChange}\n        className={cn(\n          \"flex h-3.5 w-3.5 items-center justify-center rounded-sm border-0 bg-sf-base ring\",\n          variant === \"error\" ? \"ring-sf-danger\" : \"ring-sf-line\",\n          !disabled && \"hover:ring-sf-ring focus-visible:ring-sf-ring\",\n          \"data-[checked]:bg-sf-contrast data-[checked]:ring-sf-contrast data-[indeterminate]:bg-sf-contrast data-[indeterminate]:ring-sf-contrast\",\n          disabled && \"cursor-not-allowed opacity-50\",\n          className\n        )}\n        {...props}\n      >\n        <BaseCheckbox.Indicator\n          className=\"flex items-center justify-center text-sf-inverse\"\n          render={(renderProps, state) => {\n            const Icon = state.indeterminate ? MinusIcon : CheckIcon;\n            return (\n              <span {...renderProps}>\n                {(state.checked || state.indeterminate) && (\n                  <Icon weight=\"bold\" size={10} />\n                )}\n              </span>\n            );\n          }}\n        />\n      </BaseCheckbox.Root>\n    );\n\n    // If no label provided, return bare checkbox (for use in other components like Dropdown)\n    if (!label) {\n      return checkboxControl;\n    }\n\n    // Use Field.Root + Field.Label enclosing pattern for proper a11y association\n    // See: https://base-ui.com/react/components/field\n    return (\n      <FieldBase.Root className=\"inline-flex\">\n        <FieldBase.Label\n          className={cn(\n            \"inline-flex items-center gap-2\",\n            controlFirst ? \"flex-row\" : \"flex-row-reverse justify-end\",\n            disabled ? \"cursor-not-allowed\" : \"cursor-pointer\"\n          )}\n        >\n          {checkboxControl}\n          <Label\n            showOptional={required === false}\n            tooltip={labelTooltip}\n            asContent\n          >\n            {label}\n          </Label>\n        </FieldBase.Label>\n      </FieldBase.Root>\n    );\n  }\n);\n\nCheckboxBase.displayName = \"Checkbox\";\n\n// Checkbox.Item for use within Checkbox.Group\nconst CheckboxItem = forwardRef<HTMLButtonElement, CheckboxItemProps>(\n  (\n    {\n      className,\n      checked,\n      indeterminate,\n      disabled,\n      variant = \"default\",\n      label,\n      value,\n      onCheckedChange,\n      onValueChange,\n      name,\n    },\n    ref\n  ) => {\n    const { controlFirst } = useContext(CheckboxGroupContext);\n\n    // Handle onCheckedChange (preferred) and deprecated onValueChange\n    const handleCheckedChange = (newChecked: boolean) => {\n      onCheckedChange?.(newChecked);\n      onValueChange?.(newChecked);\n    };\n\n    return (\n      <label\n        className={cn(\n          \"relative inline-flex items-center gap-2\",\n          // Control first (default): checkbox before label\n          // Label first: label before checkbox using flex-row-reverse\n          !controlFirst && \"flex-row-reverse justify-end\",\n          disabled ? \"cursor-not-allowed opacity-50\" : \"cursor-pointer\",\n          className\n        )}\n      >\n        <BaseCheckbox.Root\n          ref={ref}\n          value={value}\n          name={name}\n          checked={checked}\n          indeterminate={indeterminate}\n          disabled={disabled}\n          onCheckedChange={handleCheckedChange}\n          className={cn(\n            \"peer flex h-3.5 w-3.5 items-center justify-center rounded-sm border-0 bg-sf-base ring\",\n            variant === \"error\" ? \"ring-sf-danger\" : \"ring-sf-line\",\n            !disabled &&\n              \"group-hover:ring-sf-ring hover:ring-sf-ring focus-visible:ring-sf-ring\",\n            \"data-[checked]:bg-sf-contrast data-[checked]:ring-sf-contrast data-[indeterminate]:bg-sf-contrast data-[indeterminate]:ring-sf-contrast\"\n          )}\n        >\n          <BaseCheckbox.Indicator\n            className=\"flex items-center justify-center text-sf-inverse\"\n            render={(props, state) => {\n              const Icon = state.indeterminate ? MinusIcon : CheckIcon;\n              return (\n                <span {...props}>\n                  {(state.checked || state.indeterminate) && (\n                    <Icon weight=\"bold\" size={10} />\n                  )}\n                </span>\n              );\n            }}\n          />\n        </BaseCheckbox.Root>\n        <span className=\"text-base font-medium text-sf-default\">{label}</span>\n      </label>\n    );\n  }\n);\n\nCheckboxItem.displayName = \"Checkbox.Item\";\n\n// Checkbox.Group with built-in Fieldset and CheckboxGroup\nfunction CheckboxGroup({\n  legend,\n  children,\n  error,\n  description,\n  defaultValue,\n  value,\n  onValueChange,\n  allValues,\n  disabled,\n  controlFirst = true,\n  className,\n}: CheckboxGroupProps) {\n  return (\n    <CheckboxGroupContext.Provider value={{ controlFirst }}>\n      <BaseCheckboxGroup\n        defaultValue={defaultValue}\n        value={value}\n        onValueChange={onValueChange}\n        allValues={allValues}\n        disabled={disabled}\n      >\n        <Fieldset.Root\n          className={cn(\n            \"flex flex-col gap-4 rounded-lg border border-sf-line p-4\",\n            className\n          )}\n        >\n          <Fieldset.Legend className=\"text-lg font-medium text-sf-default\">\n            {legend}\n          </Fieldset.Legend>\n          <div className=\"flex flex-col gap-2\">{children}</div>\n          {error && <p className=\"text-sm text-sf-danger\">{error}</p>}\n          {description && (\n            <p className=\"text-sm text-sf-subtle\">{description}</p>\n          )}\n        </Fieldset.Root>\n      </BaseCheckboxGroup>\n    </CheckboxGroupContext.Provider>\n  );\n}\n\n// Compound component\nexport const Checkbox = Object.assign(CheckboxBase, {\n  Item: CheckboxItem,\n  Group: CheckboxGroup,\n});\n\nCheckbox.displayName = \"Checkbox\";\n"],"mappings":"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"}

package/dist/clipboard-text-92YeCybc.js

@@ -0,0 +1,176 @@
+"use client";
+import { t as cn } from "./cn-YROP2_ox.js";
+import { t as Button } from "./button-De0267YU.js";
+import { r as inputVariants } from "./input-BxQAnXki.js";
+import { forwardRef, useCallback, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Tooltip } from "@base-ui/react/tooltip";
+import { CheckIcon, CopyIcon } from "@phosphor-icons/react";
+import { Toast } from "@base-ui/react/toast";
+//#region src/components/clipboard-text/clipboard-text.tsx
+var clipboardToastManager = Toast.createToastManager();
+/** ClipboardText size variant definitions mapping sizes to their Tailwind classes. */
+var SF_CLIPBOARD_TEXT_VARIANTS = { size: {
+	sm: {
+		classes: "text-xs",
+		buttonSize: "sm",
+		description: "Small clipboard text for compact UIs"
+	},
+	base: {
+		classes: "text-sm",
+		buttonSize: "base",
+		description: "Default clipboard text size"
+	},
+	lg: {
+		classes: "text-sm",
+		buttonSize: "lg",
+		description: "Large clipboard text for prominent display"
+	}
+} };
+var SF_CLIPBOARD_TEXT_DEFAULT_VARIANTS = { size: "lg" };
+var clipboardTextAnimations = { slide: {
+	initial: "pointer-events-none absolute inset-0 flex items-center justify-center opacity-0 translate-y-full",
+	animate: "translate-y-0 opacity-100",
+	end: "pointer-events-none absolute inset-0 flex items-center justify-center opacity-0 -translate-y-full"
+} };
+function clipboardTextVariants({ size = SF_CLIPBOARD_TEXT_DEFAULT_VARIANTS.size } = {}) {
+	return cn("flex items-center overflow-hidden bg-sf-base px-0 font-mono", SF_CLIPBOARD_TEXT_VARIANTS.size[size].classes);
+}
+/**
+* Anchored toasts viewport - renders "Copied" toasts anchored to buttons
+*/
+function AnchoredToasts() {
+	const { toasts } = Toast.useToastManager();
+	return /* @__PURE__ */ jsx(Toast.Viewport, {
+		className: "pointer-events-none fixed inset-0 z-50",
+		children: toasts.map((toast) => /* @__PURE__ */ jsx(Toast.Positioner, {
+			toast,
+			className: "absolute",
+			children: /* @__PURE__ */ jsx(Toast.Root, {
+				toast,
+				className: cn("flex origin-[var(--transform-origin)] flex-col rounded-md bg-sf-base px-3 py-1.5 text-xs text-sf-default font-sans", "shadow-lg shadow-sf-tip-shadow outline outline-sf-fill"),
+				children: /* @__PURE__ */ jsx(Toast.Description, {})
+			})
+		}, toast.id))
+	});
+}
+/**
+* Internal wrapper that provides Toast context when tooltip is enabled.
+*/
+function TooltipWrapper({ children }) {
+	return /* @__PURE__ */ jsx(Tooltip.Provider, { children: /* @__PURE__ */ jsxs(Toast.Provider, {
+		toastManager: clipboardToastManager,
+		children: [/* @__PURE__ */ jsx(AnchoredToasts, {}), children]
+	}) });
+}
+/**
+* Read-only text field with a one-click copy-to-clipboard button.
+*
+* @example
+* ```tsx
+* <ClipboardText text="0c239dd2" />
+* ```
+*/
+var ClipboardText = forwardRef(({ text, className, size = SF_CLIPBOARD_TEXT_DEFAULT_VARIANTS.size, onCopy, tooltip, labels: { copyAction = "Copy to clipboard" } = {} }, ref) => {
+	const [copied, setCopied] = useState(false);
+	const buttonRef = useRef(null);
+	const sizeConfig = SF_CLIPBOARD_TEXT_VARIANTS.size[size];
+	const { text: tooltipText = "Copy", copiedText = "Copied", side: tooltipSide = "top" } = tooltip ?? {};
+	const copyToClipboard = useCallback(async () => {
+		try {
+			if (typeof navigator !== "undefined" && navigator.clipboard && typeof navigator.clipboard.writeText === "function") await navigator.clipboard.writeText(text);
+			else if (typeof document !== "undefined") {
+				const textarea = document.createElement("textarea");
+				textarea.value = text;
+				textarea.setAttribute("readonly", "");
+				textarea.style.position = "absolute";
+				textarea.style.left = "-9999px";
+				document.body.appendChild(textarea);
+				const selection = document.getSelection();
+				const previousRange = selection?.rangeCount ? selection.getRangeAt(0) : null;
+				textarea.select();
+				try {
+					document.execCommand("copy");
+				} finally {
+					document.body.removeChild(textarea);
+					if (previousRange) {
+						selection?.removeAllRanges();
+						selection?.addRange(previousRange);
+					}
+				}
+			}
+			setCopied(true);
+			if (tooltip) clipboardToastManager.add({
+				description: copiedText,
+				positionerProps: {
+					anchor: buttonRef.current,
+					side: tooltipSide,
+					sideOffset: 8
+				},
+				timeout: 1500,
+				onClose() {
+					setCopied(false);
+				}
+			});
+			else setTimeout(() => setCopied(false), 1500);
+			onCopy?.();
+		} catch (error) {
+			console.warn("Clipboard copy failed", error);
+		}
+	}, [
+		text,
+		onCopy,
+		tooltip,
+		copiedText,
+		tooltipSide
+	]);
+	const copyButton = /* @__PURE__ */ jsxs(Button, {
+		ref: buttonRef,
+		size: sizeConfig.buttonSize,
+		variant: "ghost",
+		className: "rounded-none border-l! border-sf-line! px-3 relative overflow-hidden transition-all duration-200",
+		onClick: copyToClipboard,
+		"aria-label": copyAction,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: cn("flex items-center gap-1 transition-all duration-200", copied ? clipboardTextAnimations.slide.animate : clipboardTextAnimations.slide.initial),
+			children: /* @__PURE__ */ jsx(CheckIcon, {})
+		}), /* @__PURE__ */ jsx("span", {
+			className: cn("flex items-center justify-center transition-all duration-200", copied ? clipboardTextAnimations.slide.end : clipboardTextAnimations.slide.animate),
+			children: /* @__PURE__ */ jsx(CopyIcon, {})
+		})]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cn(inputVariants({ size: sizeConfig.buttonSize }), clipboardTextVariants({ size }), className),
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "grow truncate ps-4 pe-2",
+				children: text
+			}),
+			tooltip ? /* @__PURE__ */ jsx(TooltipWrapper, { children: /* @__PURE__ */ jsxs(Tooltip.Root, {
+				disabled: copied,
+				onOpenChange: (open, eventDetails) => {
+					if (eventDetails.reason === "trigger-press") eventDetails.cancel();
+				},
+				children: [/* @__PURE__ */ jsx(Tooltip.Trigger, { render: copyButton }), /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, {
+					side: tooltipSide,
+					sideOffset: 8,
+					children: /* @__PURE__ */ jsx(Tooltip.Popup, {
+						className: cn("flex origin-[var(--transform-origin)] flex-col rounded-md bg-sf-base px-3 py-1.5 text-xs text-sf-default", "shadow-lg shadow-sf-tip-shadow outline outline-sf-fill"),
+						children: tooltipText
+					})
+				}) })]
+			}) }) : copyButton,
+			/* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				"aria-live": "polite",
+				children: copied ? copiedText : ""
+			})
+		]
+	});
+});
+ClipboardText.displayName = "ClipboardText";
+//#endregion
+export { ClipboardText as t };
+
+//# sourceMappingURL=clipboard-text-92YeCybc.js.map

package/dist/clipboard-text-92YeCybc.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"clipboard-text-92YeCybc.js","names":[],"sources":["../src/components/clipboard-text/clipboard-text.tsx"],"sourcesContent":["import { Toast } from \"@base-ui/react/toast\";\nimport { Tooltip } from \"@base-ui/react/tooltip\";\nimport { CheckIcon, CopyIcon } from \"@phosphor-icons/react\";\nimport { forwardRef, useCallback, useRef, useState } from \"react\";\n\nimport { cn } from \"../../utils/cn\";\nimport { Button } from \"../button\";\nimport { inputVariants } from \"../input\";\n\n// Create a toast manager for anchored \"Copied\" toasts\nconst clipboardToastManager = Toast.createToastManager();\n\n/** ClipboardText size variant definitions mapping sizes to their Tailwind classes. */\nexport const SF_CLIPBOARD_TEXT_VARIANTS = {\n  size: {\n    sm: {\n      classes: \"text-xs\",\n      buttonSize: \"sm\" as const,\n      description: \"Small clipboard text for compact UIs\",\n    },\n    base: {\n      classes: \"text-sm\",\n      buttonSize: \"base\" as const,\n      description: \"Default clipboard text size\",\n    },\n    lg: {\n      classes: \"text-sm\",\n      buttonSize: \"lg\" as const,\n      description: \"Large clipboard text for prominent display\",\n    },\n  },\n} as const;\n\nexport const SF_CLIPBOARD_TEXT_DEFAULT_VARIANTS = {\n  size: \"lg\",\n} as const;\n\nconst clipboardTextAnimations = {\n  slide: {\n    initial:\n      \"pointer-events-none absolute inset-0 flex items-center justify-center opacity-0 translate-y-full\",\n    animate: \"translate-y-0 opacity-100\",\n    end: \"pointer-events-none absolute inset-0 flex items-center justify-center opacity-0 -translate-y-full\",\n  },\n} as const;\n\n// Derived types from SF_CLIPBOARD_TEXT_VARIANTS\nexport type SFClipboardTextSize = keyof typeof SF_CLIPBOARD_TEXT_VARIANTS.size;\n\nexport interface SFClipboardTextVariantsProps {\n  /**\n   * Size of the clipboard text field.\n   * - `\"sm\"` — Small clipboard text for compact UIs\n   * - `\"base\"` — Default clipboard text size\n   * - `\"lg\"` — Large clipboard text for prominent display\n   * @default \"lg\"\n   */\n  size?: SFClipboardTextSize;\n}\n\nexport function clipboardTextVariants({\n  size = SF_CLIPBOARD_TEXT_DEFAULT_VARIANTS.size,\n}: SFClipboardTextVariantsProps = {}) {\n  return cn(\n    // Base styles\n    \"flex items-center overflow-hidden bg-sf-base px-0 font-mono\",\n    // Apply size styles from SF_CLIPBOARD_TEXT_VARIANTS\n    SF_CLIPBOARD_TEXT_VARIANTS.size[size].classes\n  );\n}\n\n// Legacy type alias for backwards compatibility\nexport type ClipboardTextSize = SFClipboardTextSize;\n\n/**\n * ClipboardText component props.\n *\n * @example\n * ```tsx\n * <ClipboardText text=\"sk_live_abc123\" />\n * <ClipboardText text=\"npm install @signalflare-ai/ui\" size=\"sm\" />\n * ```\n */\nexport interface ClipboardTextProps extends SFClipboardTextVariantsProps {\n  /** The text to display and copy to clipboard. */\n  text: string;\n  /** Additional CSS classes merged via `cn()`. */\n  className?: string;\n  /** Callback fired after text is copied to clipboard. */\n  onCopy?: () => void;\n  /**\n   * Tooltip config. Shows tooltip on hover, anchored toast on click.\n   * @example\n   * ```tsx\n   * <ClipboardText\n   *   text=\"abc123\"\n   *   tooltip={{ text: \"Copy\", copiedText: \"Copied!\", side: \"top\" }}\n   * />\n   * ```\n   */\n  tooltip?: {\n    /** Text shown in tooltip on hover. @default \"Copy\" */\n    text?: string;\n    /** Text shown in toast after copying. @default \"Copied\" */\n    copiedText?: string;\n    /** Tooltip/toast placement. @default \"top\" */\n    side?: \"top\" | \"bottom\" | \"left\" | \"right\";\n  };\n  /** Accessible labels for i18n. */\n  labels?: {\n    /** @default \"Copy to clipboard\" */\n    copyAction?: string;\n  };\n}\n\n/**\n * Anchored toasts viewport - renders \"Copied\" toasts anchored to buttons\n */\nfunction AnchoredToasts() {\n  const { toasts } = Toast.useToastManager();\n  return (\n    <Toast.Viewport className=\"pointer-events-none fixed inset-0 z-50\">\n      {toasts.map((toast) => (\n        <Toast.Positioner key={toast.id} toast={toast} className=\"absolute\">\n          <Toast.Root\n            toast={toast}\n            className={cn(\n              \"flex origin-[var(--transform-origin)] flex-col rounded-md bg-sf-base px-3 py-1.5 text-xs text-sf-default font-sans\",\n              \"shadow-lg shadow-sf-tip-shadow outline outline-sf-fill\"\n            )}\n          >\n            <Toast.Description />\n          </Toast.Root>\n        </Toast.Positioner>\n      ))}\n    </Toast.Viewport>\n  );\n}\n\n/**\n * Internal wrapper that provides Toast context when tooltip is enabled.\n */\nfunction TooltipWrapper({ children }: { children: React.ReactNode }) {\n  return (\n    <Tooltip.Provider>\n      <Toast.Provider toastManager={clipboardToastManager}>\n        <AnchoredToasts />\n        {children}\n      </Toast.Provider>\n    </Tooltip.Provider>\n  );\n}\n\n/**\n * Read-only text field with a one-click copy-to-clipboard button.\n *\n * @example\n * ```tsx\n * <ClipboardText text=\"0c239dd2\" />\n * ```\n */\nexport const ClipboardText = forwardRef<HTMLDivElement, ClipboardTextProps>(\n  (\n    {\n      text,\n      className,\n      size = SF_CLIPBOARD_TEXT_DEFAULT_VARIANTS.size,\n      onCopy,\n      tooltip,\n      labels: { copyAction = \"Copy to clipboard\" } = {},\n    },\n    ref\n  ) => {\n    const [copied, setCopied] = useState(false);\n    const buttonRef = useRef<HTMLButtonElement | null>(null);\n    const sizeConfig = SF_CLIPBOARD_TEXT_VARIANTS.size[size];\n\n    // Destructure tooltip config with defaults\n    const {\n      text: tooltipText = \"Copy\",\n      copiedText = \"Copied\",\n      side: tooltipSide = \"top\",\n    } = tooltip ?? {};\n\n    const copyToClipboard = useCallback(async () => {\n      try {\n        if (\n          typeof navigator !== \"undefined\" &&\n          navigator.clipboard &&\n          typeof navigator.clipboard.writeText === \"function\"\n        ) {\n          await navigator.clipboard.writeText(text);\n        } else if (typeof document !== \"undefined\") {\n          // Fallback for older browsers\n          const textarea = document.createElement(\"textarea\");\n          textarea.value = text;\n          textarea.setAttribute(\"readonly\", \"\");\n          textarea.style.position = \"absolute\";\n          textarea.style.left = \"-9999px\";\n          document.body.appendChild(textarea);\n          const selection = document.getSelection();\n          const previousRange = selection?.rangeCount\n            ? selection.getRangeAt(0)\n            : null;\n          textarea.select();\n          try {\n            document.execCommand(\"copy\");\n          } finally {\n            document.body.removeChild(textarea);\n            if (previousRange) {\n              selection?.removeAllRanges();\n              selection?.addRange(previousRange);\n            }\n          }\n        }\n\n        setCopied(true);\n\n        // Show anchored toast if tooltip mode is enabled\n        if (tooltip) {\n          clipboardToastManager.add({\n            description: copiedText,\n            positionerProps: {\n              anchor: buttonRef.current,\n              side: tooltipSide,\n              sideOffset: 8,\n            },\n            timeout: 1500,\n            onClose() {\n              setCopied(false);\n            },\n          });\n        } else {\n          // Reset copied state after delay when no tooltip\n          setTimeout(() => setCopied(false), 1500);\n        }\n\n        onCopy?.();\n      } catch (error) {\n        console.warn(\"Clipboard copy failed\", error);\n      }\n    }, [text, onCopy, tooltip, copiedText, tooltipSide]);\n\n    const copyButton = (\n      <Button\n        ref={buttonRef}\n        size={sizeConfig.buttonSize}\n        variant=\"ghost\"\n        className=\"rounded-none border-l! border-sf-line! px-3 relative overflow-hidden transition-all duration-200\"\n        onClick={copyToClipboard}\n        aria-label={copyAction}\n      >\n        <span\n          className={cn(\n            \"flex items-center gap-1 transition-all duration-200\",\n            copied\n              ? clipboardTextAnimations.slide.animate\n              : clipboardTextAnimations.slide.initial\n          )}\n        >\n          <CheckIcon />\n        </span>\n        <span\n          className={cn(\n            \"flex items-center justify-center transition-all duration-200\",\n            copied\n              ? clipboardTextAnimations.slide.end\n              : clipboardTextAnimations.slide.animate\n          )}\n        >\n          <CopyIcon />\n        </span>\n      </Button>\n    );\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          inputVariants({ size: sizeConfig.buttonSize }),\n          clipboardTextVariants({ size }),\n          className\n        )}\n      >\n        <span className=\"grow truncate ps-4 pe-2\">{text}</span>\n        {tooltip ? (\n          <TooltipWrapper>\n            <Tooltip.Root\n              disabled={copied}\n              onOpenChange={(open, eventDetails) => {\n                // Prevent tooltip from closing when button is clicked\n                if (eventDetails.reason === \"trigger-press\") {\n                  eventDetails.cancel();\n                }\n              }}\n            >\n              <Tooltip.Trigger render={copyButton} />\n              <Tooltip.Portal>\n                <Tooltip.Positioner side={tooltipSide} sideOffset={8}>\n                  <Tooltip.Popup\n                    className={cn(\n                      \"flex origin-[var(--transform-origin)] flex-col rounded-md bg-sf-base px-3 py-1.5 text-xs text-sf-default\",\n                      \"shadow-lg shadow-sf-tip-shadow outline outline-sf-fill\"\n                    )}\n                  >\n                    {tooltipText}\n                  </Tooltip.Popup>\n                </Tooltip.Positioner>\n              </Tooltip.Portal>\n            </Tooltip.Root>\n          </TooltipWrapper>\n        ) : (\n          copyButton\n        )}\n        <span className=\"sr-only\" aria-live=\"polite\">\n          {copied ? copiedText : \"\"}\n        </span>\n      </div>\n    );\n  }\n);\n\nClipboardText.displayName = \"ClipboardText\";\n"],"mappings":"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"}

package/dist/cn-YROP2_ox.js

@@ -0,0 +1,25 @@
+"use client";
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+//#region src/utils/cn.ts
+function cn(...inputs) {
+	return twMerge(clsx(inputs));
+}
+var toHex = (n) => n.toString(16).padStart(2, "0");
+function safeRandomId() {
+	const c = (typeof globalThis !== "undefined" ? globalThis : {}).crypto;
+	if (c && typeof c.randomUUID === "function") return c.randomUUID();
+	if (c && typeof c.getRandomValues === "function") {
+		const bytes = new Uint8Array(16);
+		c.getRandomValues(bytes);
+		bytes[6] = bytes[6] & 15 | 64;
+		bytes[8] = bytes[8] & 63 | 128;
+		const hex = Array.from(bytes, toHex).join("");
+		return `${hex.slice(0, 8)}-${hex.slice(8, 12)}-${hex.slice(12, 16)}-${hex.slice(16, 20)}-${hex.slice(20)}`;
+	}
+	return `r${Math.random().toString(36).slice(2)}${Date.now().toString(36)}`;
+}
+//#endregion
+export { safeRandomId as n, cn as t };
+
+//# sourceMappingURL=cn-YROP2_ox.js.map

package/dist/cn-YROP2_ox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cn-YROP2_ox.js","names":[],"sources":["../src/utils/cn.ts"],"sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\nconst toHex = (n: number) => n.toString(16).padStart(2, \"0\");\n\nexport function safeRandomId(): string {\n  const g: any = typeof globalThis !== \"undefined\" ? (globalThis as any) : {};\n  const c = g.crypto;\n  if (c && typeof c.randomUUID === \"function\") {\n    return c.randomUUID();\n  }\n  // RFC4122 v4 using getRandomValues if available\n  if (c && typeof c.getRandomValues === \"function\") {\n    const bytes = new Uint8Array(16);\n    c.getRandomValues(bytes);\n    bytes[6] = (bytes[6] & 0x0f) | 0x40; // version 4\n    bytes[8] = (bytes[8] & 0x3f) | 0x80; // variant 10\n    const hex = Array.from(bytes, toHex).join(\"\");\n    return `${hex.slice(0, 8)}-${hex.slice(8, 12)}-${hex.slice(\n      12,\n      16\n    )}-${hex.slice(16, 20)}-${hex.slice(20)}`;\n  }\n  // Last-resort fallback\n  return `r${Math.random().toString(36).slice(2)}${Date.now().toString(36)}`;\n}\n"],"mappings":";;;;AAGA,SAAgB,GAAG,GAAG,QAAsB;AAC1C,QAAO,QAAQ,KAAK,OAAO,CAAC;;AAG9B,IAAM,SAAS,MAAc,EAAE,SAAS,GAAG,CAAC,SAAS,GAAG,IAAI;AAE5D,SAAgB,eAAuB;CAErC,MAAM,KADS,OAAO,eAAe,cAAe,aAAqB,EAAE,EAC/D;AACZ,KAAI,KAAK,OAAO,EAAE,eAAe,WAC/B,QAAO,EAAE,YAAY;AAGvB,KAAI,KAAK,OAAO,EAAE,oBAAoB,YAAY;EAChD,MAAM,QAAQ,IAAI,WAAW,GAAG;AAChC,IAAE,gBAAgB,MAAM;AACxB,QAAM,KAAM,MAAM,KAAK,KAAQ;AAC/B,QAAM,KAAM,MAAM,KAAK,KAAQ;EAC/B,MAAM,MAAM,MAAM,KAAK,OAAO,MAAM,CAAC,KAAK,GAAG;AAC7C,SAAO,GAAG,IAAI,MAAM,GAAG,EAAE,CAAC,GAAG,IAAI,MAAM,GAAG,GAAG,CAAC,GAAG,IAAI,MACnD,IACA,GACD,CAAC,GAAG,IAAI,MAAM,IAAI,GAAG,CAAC,GAAG,IAAI,MAAM,GAAG;;AAGzC,QAAO,IAAI,KAAK,QAAQ,CAAC,SAAS,GAAG,CAAC,MAAM,EAAE,GAAG,KAAK,KAAK,CAAC,SAAS,GAAG"}

package/dist/code-DE1Yy1Cu.js

@@ -0,0 +1,97 @@
+"use client";
+import { t as cn } from "./cn-YROP2_ox.js";
+import { n as highlightToTokens } from "./highlight-to-react-ClEfL81q.js";
+import { jsx } from "react/jsx-runtime";
+import { highlight } from "sugar-high";
+//#region src/components/code/code.tsx
+/** Code language variant definitions. */
+var SF_CODE_VARIANTS = { lang: {
+	ts: {
+		classes: "",
+		description: "TypeScript code"
+	},
+	tsx: {
+		classes: "",
+		description: "TypeScript JSX code"
+	},
+	jsonc: {
+		classes: "",
+		description: "JSON with comments"
+	},
+	bash: {
+		classes: "",
+		description: "Shell/Bash commands"
+	},
+	css: {
+		classes: "",
+		description: "CSS styles"
+	}
+} };
+var SF_CODE_DEFAULT_VARIANTS = { lang: "ts" };
+function codeVariants({ lang = SF_CODE_DEFAULT_VARIANTS.lang } = {}) {
+	return cn("m-0 w-auto rounded-none border-none bg-transparent p-0 font-mono text-sm leading-[20px] text-sf-default", SF_CODE_VARIANTS.lang[lang].classes);
+}
+/**
+* Substitutes `{{key}}` placeholders in the raw code string before highlighting.
+* Returns the substituted code and a set of highlighted values to wrap post-highlight.
+*/
+function applyValues(code, values) {
+	const highlights = /* @__PURE__ */ new Map();
+	if (!values) return {
+		code,
+		highlights
+	};
+	return {
+		code: code.replace(/\{\{(\w+)\}\}/g, (_, key) => {
+			const entry = values[key];
+			if (!entry) return `{{${key}}}`;
+			if (entry.highlight) highlights.set(entry.value, entry.value);
+			return entry.value;
+		}),
+		highlights
+	};
+}
+/**
+* Syntax-highlighted code component powered by sugar-high.
+*
+* Renders code in a monospace font with token-level syntax highlighting.
+* For a bordered container version, use `Code.Block` or `CodeBlock`.
+*
+* **Styling:**
+* - Typography: `font-mono text-sm leading-[20px]`
+* - Colors: semantic `--sh-*` CSS variables (defined in SF theme)
+* - No borders or padding (use CodeBlock for styled container)
+*/
+function CodeComponent({ code, lang = SF_CODE_DEFAULT_VARIANTS.lang, values, className, style }) {
+	const { code: substituted } = applyValues(code, values);
+	const tokens = highlightToTokens(highlight(substituted));
+	return /* @__PURE__ */ jsx("pre", {
+		className: cn(codeVariants({ lang }), className),
+		style,
+		children: /* @__PURE__ */ jsx("code", { children: tokens })
+	});
+}
+CodeComponent.displayName = "Code";
+/**
+* Syntax-highlighted code block with border and background container.
+*
+* **Styling:**
+* - Container: `min-w-0 rounded-md border border-sf-line bg-sf-recessed`
+* - Inner padding: `p-4` (16px)
+*/
+function CodeBlockComponent({ code, lang }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "min-w-0 overflow-x-auto rounded-md border border-sf-line bg-sf-recessed [&>pre]:p-4",
+		children: /* @__PURE__ */ jsx(CodeComponent, {
+			lang,
+			code
+		})
+	});
+}
+CodeBlockComponent.displayName = "CodeBlock";
+var Code = Object.assign(CodeComponent, { Block: CodeBlockComponent });
+var CodeBlock = CodeBlockComponent;
+//#endregion
+export { CodeBlock as n, Code as t };
+
+//# sourceMappingURL=code-DE1Yy1Cu.js.map