@keboola/design 9.1.0 → 11.0.0

package/dist/charts.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/utils/classNames.ts","../src/blocks/Charts/ChartContainer.tsx","../src/blocks/Charts/ChartTooltip.tsx","../src/blocks/Charts/format.ts","../src/blocks/Charts/cartesian.tsx","../src/blocks/Charts/theme.ts","../src/blocks/Charts/LineChart.tsx","../src/blocks/Charts/BarChart.tsx","../src/blocks/Charts/AreaChart.tsx","../src/blocks/Charts/PieChart.tsx"],"names":["jsx","RechartsTooltip","jsxs","RechartsLineChart","RechartsBarChart","RechartsAreaChart","RechartsPieChart","Legend"],"mappings":"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","file":"charts.js","sourcesContent":["import { type ClassValue, clsx } from 'clsx';\nimport { extendTailwindMerge } from 'tailwind-merge';\n\n// tailwind-merge v3 (Tailwind v4): the prefix drops the trailing separator —\n// `tw:` → `tw` (the `:` separator is implied).\nconst twMerge = extendTailwindMerge({\n  prefix: 'tw',\n});\n\nexport const cn = (...classes: ClassValue[]) => twMerge(clsx(...classes));\n","import { type ComponentProps, type ReactElement } from 'react';\nimport { ResponsiveContainer } from 'recharts';\n\nimport { cn } from '../../utils';\n\n/** A length that recharts' `<ResponsiveContainer>` accepts: px number or `\"NN%\"`. */\nexport type ChartDimension = number | `${number}%`;\n\nexport type ChartContainerProps = Omit<ComponentProps<'div'>, 'children'> & {\n  /**\n   * Height as a px number or percentage string. Charts have no intrinsic\n   * height, so a container needs one either here or from a sized ancestor.\n   * Defaults to 300.\n   */\n  height?: ChartDimension;\n  /** Width as a px number or percentage. Defaults to `\"100%\"` (fills parent). */\n  width?: ChartDimension;\n  /** A single recharts chart element (`<LineChart>`, `<BarChart>`, …). */\n  children: ReactElement;\n};\n\n/**\n * Responsive, brand-themed frame for a chart. Wraps the chart in recharts'\n * `<ResponsiveContainer>` and applies the semantic-token chrome (axis text,\n * grid, cursor) through CSS so every chart inside inherits it. Sizing is\n * intrinsic: give it a `height` (default 300) and it fills the parent width.\n */\nexport const ChartContainer = ({\n  height = 300,\n  width = '100%',\n  className,\n  children,\n  ...props\n}: ChartContainerProps) => (\n  <div\n    className={cn(\n      'tw:text-xs',\n      // Axis ticks and labels follow the muted foreground token.\n      'tw:[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground',\n      'tw:[&_.recharts-polar-angle-axis-tick_text]:fill-muted-foreground',\n      'tw:[&_.recharts-label]:fill-muted-foreground',\n      'tw:[&_.recharts-legend-item-text]:!text-muted-foreground',\n      // Grid lines, axis lines and the hover cursor follow the border token.\n      'tw:[&_.recharts-cartesian-grid_line]:stroke-border/60',\n      'tw:[&_.recharts-cartesian-axis-line]:stroke-border',\n      'tw:[&_.recharts-cartesian-axis-tick-line]:stroke-border',\n      'tw:[&_.recharts-curve.recharts-tooltip-cursor]:stroke-border',\n      'tw:[&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted/60',\n      'tw:[&_.recharts-surface]:outline-hidden',\n      className,\n    )}\n    {...props}\n  >\n    <ResponsiveContainer width={width} height={height}>\n      {children}\n    </ResponsiveContainer>\n  </div>\n);\n","import { type ComponentProps } from 'react';\nimport { Tooltip as RechartsTooltip } from 'recharts';\n\nimport { cn } from '../../utils';\n\ntype TooltipPayloadEntry = {\n  name?: string | number;\n  value?: string | number;\n  color?: string;\n  dataKey?: string | number;\n};\n\ntype ChartTooltipContentProps = {\n  active?: boolean;\n  label?: string | number;\n  payload?: TooltipPayloadEntry[];\n  /** Format a value for display (e.g. currency, percentage). */\n  valueFormatter?: (value: string | number, name: string) => string;\n  className?: string;\n};\n\n/**\n * Brand-themed tooltip body. Surfaces (background, border, text) resolve from\n * semantic tokens, and each series swatch reuses the recharts-provided series\n * `color` (already a `--chart-*` token from this package's charts).\n */\nexport const ChartTooltipContent = ({\n  active,\n  label,\n  payload,\n  valueFormatter,\n  className,\n}: ChartTooltipContentProps) => {\n  if (!active || !payload?.length) return null;\n\n  return (\n    <div\n      className={cn(\n        'tw:min-w-32 tw:rounded-md tw:border tw:border-border tw:bg-popover tw:px-2.5 tw:py-1.5 tw:text-xs tw:text-popover-foreground tw:shadow-md',\n        className,\n      )}\n    >\n      {label != null && <div className=\"tw:mb-1 tw:font-medium\">{label}</div>}\n      <div className=\"tw:flex tw:flex-col tw:gap-1\">\n        {payload.map((entry) => {\n          const name = String(entry.name ?? entry.dataKey ?? '');\n          const value = entry.value;\n          // Missing / non-numeric values render blank rather than \"NaN\"/\"0\";\n          // only well-formed numbers reach the formatter.\n          const hasNumber = value != null && value !== '' && Number.isFinite(Number(value));\n          const display = hasNumber\n            ? valueFormatter\n              ? valueFormatter(Number(value), name)\n              : String(Number(value))\n            : (value ?? '');\n          return (\n            <div\n              key={String(entry.dataKey ?? name)}\n              className=\"tw:flex tw:items-center tw:justify-between tw:gap-3\"\n            >\n              <span className=\"tw:flex tw:items-center tw:gap-1.5\">\n                <span\n                  className=\"tw:size-2 tw:shrink-0 tw:rounded-[2px]\"\n                  style={{ backgroundColor: entry.color }}\n                />\n                <span className=\"tw:text-muted-foreground\">{name}</span>\n              </span>\n              <span className=\"tw:font-medium tw:tabular-nums\">{display}</span>\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n\nexport type ChartTooltipProps = ComponentProps<typeof RechartsTooltip> & {\n  valueFormatter?: (value: string | number, name: string) => string;\n};\n\n/**\n * Drop-in recharts `<Tooltip>` pre-wired to render {@link ChartTooltipContent}.\n * Each chart mounts one by default; pass `showTooltip={false}` on the chart to omit.\n */\nexport const ChartTooltip = ({ valueFormatter, ...props }: ChartTooltipProps) => (\n  <RechartsTooltip\n    cursor={{ strokeWidth: 1 }}\n    content={<ChartTooltipContent valueFormatter={valueFormatter} />}\n    {...props}\n  />\n);\n","/**\n * Apply a numeric `valueFormatter` safely. recharts hands axis ticks and\n * tooltip payload values as `string | number | null | undefined`, and partial\n * or streaming data can carry gaps. Coercing those straight through\n * `Number(value)` would render `$0` (empty string → 0) or `$NaN` (non-numeric),\n * so a missing / non-finite value is rendered as an empty string instead of\n * being fed to the formatter.\n */\nexport const formatValue = (\n  value: string | number | null | undefined,\n  valueFormatter?: (value: number) => string,\n): string => {\n  if (value == null || value === '') return '';\n  const num = Number(value);\n  if (!Number.isFinite(num)) return '';\n  return valueFormatter ? valueFormatter(num) : String(num);\n};\n","import { CartesianGrid, Legend, XAxis, YAxis } from 'recharts';\n\nimport { ChartTooltip } from './ChartTooltip';\nimport { formatValue } from './format';\nimport { type CartesianChartProps } from './types';\n\nconst AXIS_PROPS = {\n  tickLine: false,\n  axisLine: false,\n  tick: { fontSize: 11 },\n} as const;\n\n/**\n * The grid + axes + tooltip + legend shared by the line, bar, and area charts.\n * Colors are applied via `ChartContainer`'s CSS chrome, not inline props, so\n * these stay brand-safe.\n */\nexport const cartesianChrome = ({\n  xKey,\n  showGrid = true,\n  showYAxis = true,\n  showLegend = false,\n  showTooltip = true,\n  valueFormatter,\n}: Pick<\n  CartesianChartProps,\n  'xKey' | 'showGrid' | 'showYAxis' | 'showLegend' | 'showTooltip' | 'valueFormatter'\n>) => (\n  <>\n    {showGrid && <CartesianGrid strokeDasharray=\"3 3\" vertical={false} />}\n    <XAxis dataKey={xKey} {...AXIS_PROPS} />\n    {showYAxis && (\n      <YAxis\n        width={48}\n        {...AXIS_PROPS}\n        tickFormatter={\n          valueFormatter\n            ? (value: string | number) => formatValue(value, valueFormatter)\n            : undefined\n        }\n      />\n    )}\n    {showTooltip && (\n      <ChartTooltip\n        valueFormatter={valueFormatter ? (value) => formatValue(value, valueFormatter) : undefined}\n      />\n    )}\n    {showLegend && <Legend wrapperStyle={{ fontSize: 11 }} />}\n  </>\n);\n","/**\n * The design system ships a five-slot categorical chart palette as CSS\n * variables (`--chart-1` … `--chart-5`). Charts resolve their\n * series colors from these tokens only — never from inline hex or a primitive\n * scale — so they follow both the active color scheme (light/dark, via\n * `data-theme` in `styles.css`) and the active brand: a brand reskins charts\n * by defining `colors.chart` (and `colorsDark.chart`) in its\n * `@keboola/brand-registry` definition, which `ThemeProvider` emits as the\n * `--chart-*` variables.\n *\n * The CSS variables hold raw `R G B` channels (for Tailwind's `<alpha-value>`\n * opacity modifiers), so they are wrapped in `rgb(...)` before handing them to\n * recharts as ordinary SVG `stroke` / `fill` strings.\n */\nconst CHART_TOKEN_COUNT = 5;\n\n/** Number of the semantic chart token (`1`–`5`) a series maps to. */\nexport type ChartColorToken = 1 | 2 | 3 | 4 | 5;\n\n/**\n * The CSS color for a chart token. `index` is 0-based (series position); it\n * wraps around the five-slot palette so any number of series stays on-brand.\n */\nexport const chartTokenColor = (index: number): string => {\n  // Euclidean modulo so negative indices still land in 1..CHART_TOKEN_COUNT\n  // (plain `%` would yield e.g. `--chart-0` for index -1).\n  const slot = (((index % CHART_TOKEN_COUNT) + CHART_TOKEN_COUNT) % CHART_TOKEN_COUNT) + 1;\n  return `rgb(var(--chart-${slot}))`;\n};\n\n/** Resolve an explicit token (1–5) or fall back to the series position. */\nexport const resolveSeriesColor = (index: number, token?: ChartColorToken): string =>\n  chartTokenColor(token ? token - 1 : index);\n","import { Line, LineChart as RechartsLineChart } from 'recharts';\n\nimport { cartesianChrome } from './cartesian';\nimport { ChartContainer } from './ChartContainer';\nimport { resolveSeriesColor } from './theme';\nimport { type CartesianChartProps } from './types';\n\n/**\n * A themed multi-series line chart. Each series' color comes from the semantic\n * `--chart-*` palette (by order, or pinned via `series[].color`), which\n * follows the active color scheme and the active brand's `colors.chart` when it\n * defines one. Wrap-free — mounts its own {@link ChartContainer}.\n *\n * @example\n * <LineChart\n *   data={data}\n *   xKey=\"month\"\n *   series={[{ dataKey: 'revenue', name: 'Revenue' }, { dataKey: 'cost' }]}\n * />\n */\nexport const LineChart = ({\n  data,\n  xKey,\n  series,\n  height,\n  width,\n  className,\n  ...chrome\n}: CartesianChartProps) => (\n  <ChartContainer height={height} width={width} className={className}>\n    <RechartsLineChart data={data} margin={{ top: 8, right: 8, left: 0, bottom: 0 }}>\n      {cartesianChrome({ xKey, ...chrome })}\n      {series.map((s, index) => {\n        const color = resolveSeriesColor(index, s.color);\n        return (\n          <Line\n            key={s.dataKey}\n            type=\"monotone\"\n            dataKey={s.dataKey}\n            name={s.name ?? s.dataKey}\n            stroke={color}\n            strokeWidth={2}\n            dot={{ r: 3, fill: color, stroke: color }}\n            activeDot={{ r: 4 }}\n            isAnimationActive={false}\n          />\n        );\n      })}\n    </RechartsLineChart>\n  </ChartContainer>\n);\n","import { Bar, BarChart as RechartsBarChart } from 'recharts';\n\nimport { cartesianChrome } from './cartesian';\nimport { ChartContainer } from './ChartContainer';\nimport { resolveSeriesColor } from './theme';\nimport { type CartesianChartProps } from './types';\n\nexport type BarChartProps = CartesianChartProps & {\n  /** Stack the series into a single bar per category. Defaults to grouped. */\n  stacked?: boolean;\n};\n\n/**\n * A themed multi-series bar chart. Series colors come from the semantic\n * `--chart-*` palette (by order, or pinned via `series[].color`), which\n * follows the active color scheme and the active brand's `colors.chart` when it\n * defines one. Pass `stacked` to stack the series instead of grouping them.\n *\n * @example\n * <BarChart data={data} xKey=\"month\" series={[{ dataKey: 'revenue' }]} />\n */\nexport const BarChart = ({\n  data,\n  xKey,\n  series,\n  height,\n  width,\n  className,\n  stacked = false,\n  ...chrome\n}: BarChartProps) => (\n  <ChartContainer height={height} width={width} className={className}>\n    <RechartsBarChart data={data} margin={{ top: 8, right: 8, left: 0, bottom: 0 }}>\n      {cartesianChrome({ xKey, ...chrome })}\n      {series.map((s, index) => (\n        <Bar\n          key={s.dataKey}\n          dataKey={s.dataKey}\n          name={s.name ?? s.dataKey}\n          fill={resolveSeriesColor(index, s.color)}\n          radius={stacked ? 0 : [4, 4, 0, 0]}\n          stackId={stacked ? 'stack' : undefined}\n          isAnimationActive={false}\n        />\n      ))}\n    </RechartsBarChart>\n  </ChartContainer>\n);\n","import { Area, AreaChart as RechartsAreaChart } from 'recharts';\n\nimport { cartesianChrome } from './cartesian';\nimport { ChartContainer } from './ChartContainer';\nimport { resolveSeriesColor } from './theme';\nimport { type CartesianChartProps } from './types';\n\nexport type AreaChartProps = CartesianChartProps & {\n  /** Stack the series into a cumulative area. Defaults to overlaid. */\n  stacked?: boolean;\n};\n\n/**\n * A themed multi-series area chart. Each series is stroked and softly filled\n * from the semantic `--chart-*` palette (by order, or pinned via\n * `series[].color`), which follows the active color scheme and the active\n * brand's `colors.chart` when it defines one. Pass `stacked` to stack the\n * series cumulatively.\n *\n * @example\n * <AreaChart data={data} xKey=\"month\" series={[{ dataKey: 'revenue' }]} />\n */\nexport const AreaChart = ({\n  data,\n  xKey,\n  series,\n  height,\n  width,\n  className,\n  stacked = false,\n  ...chrome\n}: AreaChartProps) => (\n  <ChartContainer height={height} width={width} className={className}>\n    <RechartsAreaChart data={data} margin={{ top: 8, right: 8, left: 0, bottom: 0 }}>\n      {cartesianChrome({ xKey, ...chrome })}\n      {series.map((s, index) => {\n        const color = resolveSeriesColor(index, s.color);\n        return (\n          <Area\n            key={s.dataKey}\n            type=\"monotone\"\n            dataKey={s.dataKey}\n            name={s.name ?? s.dataKey}\n            stroke={color}\n            fill={color}\n            fillOpacity={0.15}\n            strokeWidth={2}\n            stackId={stacked ? 'stack' : undefined}\n            isAnimationActive={false}\n          />\n        );\n      })}\n    </RechartsAreaChart>\n  </ChartContainer>\n);\n","import { Cell, Legend, Pie, PieChart as RechartsPieChart } from 'recharts';\n\nimport { ChartContainer, type ChartDimension } from './ChartContainer';\nimport { ChartTooltip } from './ChartTooltip';\nimport { formatValue } from './format';\nimport { chartTokenColor } from './theme';\nimport { type ChartDatum } from './types';\n\nexport type PieChartProps = {\n  /** The rows to plot — one sector per row. */\n  data: ChartDatum[];\n  /** Key into each datum for the sector label. */\n  nameKey: string;\n  /** Key into each datum for the sector value. */\n  dataKey: string;\n  /** Render as a donut with a hole of this inner radius (px or %). */\n  innerRadius?: ChartDimension;\n  /** Height as a px number or percentage. Defaults to 300. */\n  height?: ChartDimension;\n  /** Width as a px number or percentage. Defaults to `\"100%\"`. */\n  width?: ChartDimension;\n  /** Show a legend below the chart. Defaults to `true`. */\n  showLegend?: boolean;\n  /** Show the hover tooltip. Defaults to `true`. */\n  showTooltip?: boolean;\n  /** Format a sector value for the tooltip. */\n  valueFormatter?: (value: number) => string;\n  className?: string;\n};\n\n/**\n * A themed pie / donut chart. Each sector cycles through the semantic\n * `--chart-*` palette, which follows the active color scheme and the\n * active brand's `colors.chart` when it defines one. Pass `innerRadius` to make\n * a donut.\n *\n * @example\n * <PieChart data={data} nameKey=\"engine\" dataKey=\"rows\" innerRadius=\"60%\" />\n */\nexport const PieChart = ({\n  data,\n  nameKey,\n  dataKey,\n  innerRadius = 0,\n  height,\n  width,\n  className,\n  showLegend = true,\n  showTooltip = true,\n  valueFormatter,\n}: PieChartProps) => (\n  <ChartContainer height={height} width={width} className={className}>\n    <RechartsPieChart>\n      {showTooltip && (\n        <ChartTooltip\n          valueFormatter={\n            valueFormatter ? (value) => formatValue(value, valueFormatter) : undefined\n          }\n        />\n      )}\n      {showLegend && <Legend wrapperStyle={{ fontSize: 11 }} />}\n      <Pie\n        data={data}\n        nameKey={nameKey}\n        dataKey={dataKey}\n        innerRadius={innerRadius}\n        // Separate sectors with the brand surface color rather than recharts'\n        // hardcoded white default.\n        stroke=\"rgb(var(--background))\"\n        isAnimationActive={false}\n      >\n        {data.map((datum, index) => (\n          <Cell key={String(datum[nameKey] ?? index)} fill={chartTokenColor(index)} />\n        ))}\n      </Pie>\n    </RechartsPieChart>\n  </ChartContainer>\n);\n"]}
+{"version":3,"sources":["../src/blocks/Charts/ChartContainer.tsx","../src/blocks/Charts/ChartTooltip.tsx","../src/blocks/Charts/format.ts","../src/blocks/Charts/cartesian.tsx","../src/blocks/Charts/theme.ts","../src/blocks/Charts/LineChart.tsx","../src/blocks/Charts/BarChart.tsx","../src/blocks/Charts/AreaChart.tsx","../src/blocks/Charts/PieChart.tsx"],"names":["jsx","RechartsTooltip","jsxs","RechartsLineChart","RechartsBarChart","RechartsAreaChart","RechartsPieChart","Legend"],"mappings":"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","file":"charts.js","sourcesContent":["import { type ComponentProps, type ReactElement } from 'react';\nimport { ResponsiveContainer } from 'recharts';\n\nimport { cn } from '../../utils';\n\n/** A length that recharts' `<ResponsiveContainer>` accepts: px number or `\"NN%\"`. */\nexport type ChartDimension = number | `${number}%`;\n\nexport type ChartContainerProps = Omit<ComponentProps<'div'>, 'children'> & {\n  /**\n   * Height as a px number or percentage string. Charts have no intrinsic\n   * height, so a container needs one either here or from a sized ancestor.\n   * Defaults to 300.\n   */\n  height?: ChartDimension;\n  /** Width as a px number or percentage. Defaults to `\"100%\"` (fills parent). */\n  width?: ChartDimension;\n  /** A single recharts chart element (`<LineChart>`, `<BarChart>`, …). */\n  children: ReactElement;\n};\n\n/**\n * Responsive, brand-themed frame for a chart. Wraps the chart in recharts'\n * `<ResponsiveContainer>` and applies the semantic-token chrome (axis text,\n * grid, cursor) through CSS so every chart inside inherits it. Sizing is\n * intrinsic: give it a `height` (default 300) and it fills the parent width.\n */\nexport const ChartContainer = ({\n  height = 300,\n  width = '100%',\n  className,\n  children,\n  ...props\n}: ChartContainerProps) => (\n  <div\n    className={cn(\n      'tw:text-xs',\n      // Axis ticks and labels follow the muted foreground token.\n      'tw:[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground',\n      'tw:[&_.recharts-polar-angle-axis-tick_text]:fill-muted-foreground',\n      'tw:[&_.recharts-label]:fill-muted-foreground',\n      'tw:[&_.recharts-legend-item-text]:!text-muted-foreground',\n      // Grid lines, axis lines and the hover cursor follow the border token.\n      'tw:[&_.recharts-cartesian-grid_line]:stroke-border/60',\n      'tw:[&_.recharts-cartesian-axis-line]:stroke-border',\n      'tw:[&_.recharts-cartesian-axis-tick-line]:stroke-border',\n      'tw:[&_.recharts-curve.recharts-tooltip-cursor]:stroke-border',\n      'tw:[&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted/60',\n      'tw:[&_.recharts-surface]:outline-hidden',\n      className,\n    )}\n    {...props}\n  >\n    <ResponsiveContainer width={width} height={height}>\n      {children}\n    </ResponsiveContainer>\n  </div>\n);\n","import { type ComponentProps } from 'react';\nimport { Tooltip as RechartsTooltip } from 'recharts';\n\nimport { cn } from '../../utils';\n\ntype TooltipPayloadEntry = {\n  name?: string | number;\n  value?: string | number;\n  color?: string;\n  dataKey?: string | number;\n};\n\ntype ChartTooltipContentProps = {\n  active?: boolean;\n  label?: string | number;\n  payload?: TooltipPayloadEntry[];\n  /** Format a value for display (e.g. currency, percentage). */\n  valueFormatter?: (value: string | number, name: string) => string;\n  className?: string;\n};\n\n/**\n * Brand-themed tooltip body. Surfaces (background, border, text) resolve from\n * semantic tokens, and each series swatch reuses the recharts-provided series\n * `color` (already a `--chart-*` token from this package's charts).\n */\nexport const ChartTooltipContent = ({\n  active,\n  label,\n  payload,\n  valueFormatter,\n  className,\n}: ChartTooltipContentProps) => {\n  if (!active || !payload?.length) return null;\n\n  return (\n    <div\n      className={cn(\n        'tw:min-w-32 tw:rounded-md tw:border tw:border-border tw:bg-popover tw:px-2.5 tw:py-1.5 tw:text-xs tw:text-popover-foreground tw:shadow-md',\n        className,\n      )}\n    >\n      {label != null && <div className=\"tw:mb-1 tw:font-medium\">{label}</div>}\n      <div className=\"tw:flex tw:flex-col tw:gap-1\">\n        {payload.map((entry) => {\n          const name = String(entry.name ?? entry.dataKey ?? '');\n          const value = entry.value;\n          // Missing / non-numeric values render blank rather than \"NaN\"/\"0\";\n          // only well-formed numbers reach the formatter.\n          const hasNumber = value != null && value !== '' && Number.isFinite(Number(value));\n          const display = hasNumber\n            ? valueFormatter\n              ? valueFormatter(Number(value), name)\n              : String(Number(value))\n            : (value ?? '');\n          return (\n            <div\n              key={String(entry.dataKey ?? name)}\n              className=\"tw:flex tw:items-center tw:justify-between tw:gap-3\"\n            >\n              <span className=\"tw:flex tw:items-center tw:gap-1.5\">\n                <span\n                  className=\"tw:size-2 tw:shrink-0 tw:rounded-[2px]\"\n                  style={{ backgroundColor: entry.color }}\n                />\n                <span className=\"tw:text-muted-foreground\">{name}</span>\n              </span>\n              <span className=\"tw:font-medium tw:tabular-nums\">{display}</span>\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n\nexport type ChartTooltipProps = ComponentProps<typeof RechartsTooltip> & {\n  valueFormatter?: (value: string | number, name: string) => string;\n};\n\n/**\n * Drop-in recharts `<Tooltip>` pre-wired to render {@link ChartTooltipContent}.\n * Each chart mounts one by default; pass `showTooltip={false}` on the chart to omit.\n */\nexport const ChartTooltip = ({ valueFormatter, ...props }: ChartTooltipProps) => (\n  <RechartsTooltip\n    cursor={{ strokeWidth: 1 }}\n    content={<ChartTooltipContent valueFormatter={valueFormatter} />}\n    {...props}\n  />\n);\n","/**\n * Apply a numeric `valueFormatter` safely. recharts hands axis ticks and\n * tooltip payload values as `string | number | null | undefined`, and partial\n * or streaming data can carry gaps. Coercing those straight through\n * `Number(value)` would render `$0` (empty string → 0) or `$NaN` (non-numeric),\n * so a missing / non-finite value is rendered as an empty string instead of\n * being fed to the formatter.\n */\nexport const formatValue = (\n  value: string | number | null | undefined,\n  valueFormatter?: (value: number) => string,\n): string => {\n  if (value == null || value === '') return '';\n  const num = Number(value);\n  if (!Number.isFinite(num)) return '';\n  return valueFormatter ? valueFormatter(num) : String(num);\n};\n","import { CartesianGrid, Legend, XAxis, YAxis } from 'recharts';\n\nimport { ChartTooltip } from './ChartTooltip';\nimport { formatValue } from './format';\nimport { type CartesianChartProps, type ChartAxisDomain } from './types';\n\nconst AXIS_PROPS = {\n  tickLine: false,\n  axisLine: false,\n  tick: { fontSize: 11 },\n} as const;\n\n/**\n * The grid + axes + tooltip + legend shared by the line, bar, and area charts.\n * Colors are applied via `ChartContainer`'s CSS chrome, not inline props, so\n * these stay brand-safe.\n */\nexport const cartesianChrome = ({\n  xKey,\n  showGrid = true,\n  showYAxis = true,\n  showLegend = false,\n  showTooltip = true,\n  valueFormatter,\n  yDomain,\n}: Pick<\n  CartesianChartProps,\n  'xKey' | 'showGrid' | 'showYAxis' | 'showLegend' | 'showTooltip' | 'valueFormatter'\n> & { yDomain?: ChartAxisDomain }) => (\n  <>\n    {showGrid && <CartesianGrid strokeDasharray=\"3 3\" vertical={false} />}\n    <XAxis dataKey={xKey} {...AXIS_PROPS} />\n    {/* A domain has to reach recharts through a mounted <YAxis>, so a chart that\n        hides its axis but sets one still gets the element — hidden, and taking\n        no layout width. Without a domain the hidden case renders nothing, as\n        before, and recharts falls back to its implicit axis. */}\n    {(showYAxis || yDomain !== undefined) && (\n      <YAxis\n        hide={!showYAxis}\n        domain={yDomain}\n        width={48}\n        {...AXIS_PROPS}\n        tickFormatter={\n          valueFormatter\n            ? (value: string | number) => formatValue(value, valueFormatter)\n            : undefined\n        }\n      />\n    )}\n    {showTooltip && (\n      <ChartTooltip\n        valueFormatter={valueFormatter ? (value) => formatValue(value, valueFormatter) : undefined}\n      />\n    )}\n    {showLegend && <Legend wrapperStyle={{ fontSize: 11 }} />}\n  </>\n);\n","/**\n * The design system ships a five-slot categorical chart palette as CSS\n * variables (`--chart-1` … `--chart-5`). Charts resolve their\n * series colors from these tokens only — never from inline hex or a primitive\n * scale — so they follow both the active color scheme (light/dark, via\n * `data-theme` in `styles.css`) and the active brand: a brand reskins charts\n * by defining `colors.chart` (and `colorsDark.chart`) in its\n * `@keboola/brand-registry` definition, which `ThemeProvider` emits as the\n * `--chart-*` variables.\n *\n * The CSS variables hold raw `R G B` channels (for Tailwind's `<alpha-value>`\n * opacity modifiers), so they are wrapped in `rgb(...)` before handing them to\n * recharts as ordinary SVG `stroke` / `fill` strings.\n */\nconst CHART_TOKEN_COUNT = 5;\n\n/** Number of the semantic chart token (`1`–`5`) a series maps to. */\nexport type ChartColorToken = 1 | 2 | 3 | 4 | 5;\n\n/**\n * The CSS color for a chart token. `index` is 0-based (series position); it\n * wraps around the five-slot palette so any number of series stays on-brand.\n */\nexport const chartTokenColor = (index: number): string => {\n  // Euclidean modulo so negative indices still land in 1..CHART_TOKEN_COUNT\n  // (plain `%` would yield e.g. `--chart-0` for index -1).\n  const slot = (((index % CHART_TOKEN_COUNT) + CHART_TOKEN_COUNT) % CHART_TOKEN_COUNT) + 1;\n  return `rgb(var(--chart-${slot}))`;\n};\n\n/** Resolve an explicit token (1–5) or fall back to the series position. */\nexport const resolveSeriesColor = (index: number, token?: ChartColorToken): string =>\n  chartTokenColor(token ? token - 1 : index);\n","import { Line, LineChart as RechartsLineChart } from 'recharts';\n\nimport { cartesianChrome } from './cartesian';\nimport { ChartContainer } from './ChartContainer';\nimport { resolveSeriesColor } from './theme';\nimport { type CartesianChartProps, type ChartAxisDomain } from './types';\n\nexport type LineChartProps = CartesianChartProps & {\n  /**\n   * `[min, max]` bounds for the value (y) axis — numbers, `'auto'`, or padded\n   * data extremes (`['dataMin - 500', 'dataMax + 500']`). Defaults to a zero\n   * baseline.\n   *\n   * Only the line chart takes this. A line encodes value by POSITION, so moving\n   * the baseline rescales it without misstating it; bars and areas encode by\n   * length and filled area from the baseline, and truncating those makes the\n   * geometry lie about the ratios. Use it to compare two series of similar\n   * magnitude far from zero — not for a single series whose magnitude the\n   * reader is meant to judge.\n   */\n  yDomain?: ChartAxisDomain;\n};\n\n/**\n * A themed multi-series line chart. Each series' color comes from the semantic\n * `--chart-*` palette (by order, or pinned via `series[].color`), which\n * follows the active color scheme and the active brand's `colors.chart` when it\n * defines one. Wrap-free — mounts its own {@link ChartContainer}.\n *\n * @example\n * <LineChart\n *   data={data}\n *   xKey=\"month\"\n *   series={[{ dataKey: 'revenue', name: 'Revenue' }, { dataKey: 'cost' }]}\n * />\n *\n * @example Two close-but-high series, on a baseline that shows the gap\n * <LineChart data={data} xKey=\"month\" series={series} yDomain={[7000, 9000]} />\n */\nexport const LineChart = ({\n  data,\n  xKey,\n  series,\n  height,\n  width,\n  className,\n  ...chrome\n}: LineChartProps) => (\n  <ChartContainer height={height} width={width} className={className}>\n    <RechartsLineChart data={data} margin={{ top: 8, right: 8, left: 0, bottom: 0 }}>\n      {cartesianChrome({ xKey, ...chrome })}\n      {series.map((s, index) => {\n        const color = resolveSeriesColor(index, s.color);\n        return (\n          <Line\n            key={s.dataKey}\n            type=\"monotone\"\n            dataKey={s.dataKey}\n            name={s.name ?? s.dataKey}\n            stroke={color}\n            strokeWidth={2}\n            dot={{ r: 3, fill: color, stroke: color }}\n            activeDot={{ r: 4 }}\n            isAnimationActive={false}\n          />\n        );\n      })}\n    </RechartsLineChart>\n  </ChartContainer>\n);\n","import { Bar, BarChart as RechartsBarChart } from 'recharts';\n\nimport { cartesianChrome } from './cartesian';\nimport { ChartContainer } from './ChartContainer';\nimport { resolveSeriesColor } from './theme';\nimport { type CartesianChartProps } from './types';\n\nexport type BarChartProps = CartesianChartProps & {\n  /** Stack the series into a single bar per category. Defaults to grouped. */\n  stacked?: boolean;\n};\n\n/**\n * A themed multi-series bar chart. Series colors come from the semantic\n * `--chart-*` palette (by order, or pinned via `series[].color`), which\n * follows the active color scheme and the active brand's `colors.chart` when it\n * defines one. Pass `stacked` to stack the series instead of grouping them.\n *\n * @example\n * <BarChart data={data} xKey=\"month\" series={[{ dataKey: 'revenue' }]} />\n */\nexport const BarChart = ({\n  data,\n  xKey,\n  series,\n  height,\n  width,\n  className,\n  stacked = false,\n  ...chrome\n}: BarChartProps) => (\n  <ChartContainer height={height} width={width} className={className}>\n    <RechartsBarChart data={data} margin={{ top: 8, right: 8, left: 0, bottom: 0 }}>\n      {cartesianChrome({ xKey, ...chrome })}\n      {series.map((s, index) => (\n        <Bar\n          key={s.dataKey}\n          dataKey={s.dataKey}\n          name={s.name ?? s.dataKey}\n          fill={resolveSeriesColor(index, s.color)}\n          radius={stacked ? 0 : [4, 4, 0, 0]}\n          stackId={stacked ? 'stack' : undefined}\n          isAnimationActive={false}\n        />\n      ))}\n    </RechartsBarChart>\n  </ChartContainer>\n);\n","import { Area, AreaChart as RechartsAreaChart } from 'recharts';\n\nimport { cartesianChrome } from './cartesian';\nimport { ChartContainer } from './ChartContainer';\nimport { resolveSeriesColor } from './theme';\nimport { type CartesianChartProps } from './types';\n\nexport type AreaChartProps = CartesianChartProps & {\n  /** Stack the series into a cumulative area. Defaults to overlaid. */\n  stacked?: boolean;\n};\n\n/**\n * A themed multi-series area chart. Each series is stroked and softly filled\n * from the semantic `--chart-*` palette (by order, or pinned via\n * `series[].color`), which follows the active color scheme and the active\n * brand's `colors.chart` when it defines one. Pass `stacked` to stack the\n * series cumulatively.\n *\n * @example\n * <AreaChart data={data} xKey=\"month\" series={[{ dataKey: 'revenue' }]} />\n */\nexport const AreaChart = ({\n  data,\n  xKey,\n  series,\n  height,\n  width,\n  className,\n  stacked = false,\n  ...chrome\n}: AreaChartProps) => (\n  <ChartContainer height={height} width={width} className={className}>\n    <RechartsAreaChart data={data} margin={{ top: 8, right: 8, left: 0, bottom: 0 }}>\n      {cartesianChrome({ xKey, ...chrome })}\n      {series.map((s, index) => {\n        const color = resolveSeriesColor(index, s.color);\n        return (\n          <Area\n            key={s.dataKey}\n            type=\"monotone\"\n            dataKey={s.dataKey}\n            name={s.name ?? s.dataKey}\n            stroke={color}\n            fill={color}\n            fillOpacity={0.15}\n            strokeWidth={2}\n            stackId={stacked ? 'stack' : undefined}\n            isAnimationActive={false}\n          />\n        );\n      })}\n    </RechartsAreaChart>\n  </ChartContainer>\n);\n","import { Cell, Legend, Pie, PieChart as RechartsPieChart } from 'recharts';\n\nimport { ChartContainer, type ChartDimension } from './ChartContainer';\nimport { ChartTooltip } from './ChartTooltip';\nimport { formatValue } from './format';\nimport { chartTokenColor } from './theme';\nimport { type ChartDatum } from './types';\n\nexport type PieChartProps = {\n  /** The rows to plot — one sector per row. */\n  data: ChartDatum[];\n  /** Key into each datum for the sector label. */\n  nameKey: string;\n  /** Key into each datum for the sector value. */\n  dataKey: string;\n  /** Render as a donut with a hole of this inner radius (px or %). */\n  innerRadius?: ChartDimension;\n  /** Height as a px number or percentage. Defaults to 300. */\n  height?: ChartDimension;\n  /** Width as a px number or percentage. Defaults to `\"100%\"`. */\n  width?: ChartDimension;\n  /** Show a legend below the chart. Defaults to `true`. */\n  showLegend?: boolean;\n  /** Show the hover tooltip. Defaults to `true`. */\n  showTooltip?: boolean;\n  /** Format a sector value for the tooltip. */\n  valueFormatter?: (value: number) => string;\n  className?: string;\n};\n\n/**\n * A themed pie / donut chart. Each sector cycles through the semantic\n * `--chart-*` palette, which follows the active color scheme and the\n * active brand's `colors.chart` when it defines one. Pass `innerRadius` to make\n * a donut.\n *\n * @example\n * <PieChart data={data} nameKey=\"engine\" dataKey=\"rows\" innerRadius=\"60%\" />\n */\nexport const PieChart = ({\n  data,\n  nameKey,\n  dataKey,\n  innerRadius = 0,\n  height,\n  width,\n  className,\n  showLegend = true,\n  showTooltip = true,\n  valueFormatter,\n}: PieChartProps) => (\n  <ChartContainer height={height} width={width} className={className}>\n    <RechartsPieChart>\n      {showTooltip && (\n        <ChartTooltip\n          valueFormatter={\n            valueFormatter ? (value) => formatValue(value, valueFormatter) : undefined\n          }\n        />\n      )}\n      {showLegend && <Legend wrapperStyle={{ fontSize: 11 }} />}\n      <Pie\n        data={data}\n        nameKey={nameKey}\n        dataKey={dataKey}\n        innerRadius={innerRadius}\n        // Separate sectors with the brand surface color rather than recharts'\n        // hardcoded white default.\n        stroke=\"rgb(var(--background))\"\n        isAnimationActive={false}\n      >\n        {data.map((datum, index) => (\n          <Cell key={String(datum[nameKey] ?? index)} fill={chartTokenColor(index)} />\n        ))}\n      </Pie>\n    </RechartsPieChart>\n  </ChartContainer>\n);\n"]}

package/dist/chunk-2YYJDKSP.js

@@ -0,0 +1,51 @@
+import { Skeleton } from './chunk-PACNBKJV.js';
+import { cn } from './chunk-LXLIQ2D6.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var duplicateArray = (arr, times) => {
+  return Array(times).fill(arr).flat();
+};
+var Item = ({
+  className,
+  iconHeight = "md",
+  rowHeight = "sm",
+  iconClassName = "tw:w-6 "
+}) => /* @__PURE__ */ jsxs("div", { className: "tw:flex tw:items-center tw:gap-3", children: [
+  /* @__PURE__ */ jsx(Skeleton, { height: iconHeight, className: cn("tw:rounded-full tw:shrink-0", iconClassName) }),
+  /* @__PURE__ */ jsx(Skeleton, { height: rowHeight, className })
+] });
+var SkeletonList = ({
+  hasHeading = false,
+  groups = 3,
+  className,
+  iconHeight = "md",
+  rowHeight = "sm",
+  iconClassName
+}) => /* @__PURE__ */ jsxs("div", { className: cn("tw:flex tw:flex-col tw:gap-4", className), children: [
+  hasHeading ? /* @__PURE__ */ jsx(Skeleton, { height: "xxs", className: "tw:w-28" }) : null,
+  /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "tw:flex tw:flex-col",
+        ["xxs", "xs"].includes(rowHeight) ? "tw:gap-3" : "tw:gap-4"
+      ),
+      children: duplicateArray(["tw:w-5/6", "tw:w-3/4", "tw:w-4/5", "tw:w-2/3"], groups).map(
+        (className2, index) => /* @__PURE__ */ jsx(
+          Item,
+          {
+            iconHeight,
+            rowHeight,
+            iconClassName,
+            className: className2
+          },
+          `${className2}-${index}`
+        )
+      )
+    }
+  )
+] });
+
+export { SkeletonList };
+//# sourceMappingURL=chunk-2YYJDKSP.js.map
+//# sourceMappingURL=chunk-2YYJDKSP.js.map

package/dist/chunk-2YYJDKSP.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Skeleton/SkeletonList.tsx"],"names":["className"],"mappings":";;;;AAKA,IAAM,cAAA,GAAiB,CAAC,GAAA,EAAe,KAAA,KAAkB;AACvD,EAAA,OAAO,MAAM,KAAK,CAAA,CAAE,IAAA,CAAK,GAAG,EAAE,IAAA,EAAK;AACrC,CAAA;AAEA,IAAM,OAAO,CAAC;AAAA,EACZ,SAAA;AAAA,EACA,UAAA,GAAa,IAAA;AAAA,EACb,SAAA,GAAY,IAAA;AAAA,EACZ,aAAA,GAAgB;AAClB,CAAA,qBAME,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,kCAAA,EACb,QAAA,EAAA;AAAA,kBAAA,GAAA,CAAC,YAAS,MAAA,EAAQ,UAAA,EAAY,WAAW,EAAA,CAAG,6BAAA,EAA+B,aAAa,CAAA,EAAG,CAAA;AAAA,kBAC3F,GAAA,CAAC,QAAA,EAAA,EAAS,MAAA,EAAQ,SAAA,EAAW,SAAA,EAAsB;AAAA,CAAA,EACrD,CAAA;AAGK,IAAM,eAAe,CAAC;AAAA,EAC3B,UAAA,GAAa,KAAA;AAAA,EACb,MAAA,GAAS,CAAA;AAAA,EACT,SAAA;AAAA,EACA,UAAA,GAAa,IAAA;AAAA,EACb,SAAA,GAAY,IAAA;AAAA,EACZ;AACF,CAAA,0BAQG,KAAA,EAAA,EAAI,SAAA,EAAW,EAAA,CAAG,8BAAA,EAAgC,SAAS,CAAA,EACzD,QAAA,EAAA;AAAA,EAAA,UAAA,uBAAc,QAAA,EAAA,EAAS,MAAA,EAAO,KAAA,EAAM,SAAA,EAAU,WAAU,CAAA,GAAK,IAAA;AAAA,kBAE9D,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA;AAAA,QACT,qBAAA;AAAA,QACA,CAAC,KAAA,EAAO,IAAI,EAAE,QAAA,CAAS,SAAS,IAAI,UAAA,GAAa;AAAA,OACnD;AAAA,MAEC,QAAA,EAAA,cAAA,CAAe,CAAC,UAAA,EAAY,UAAA,EAAY,YAAY,UAAU,CAAA,EAAG,MAAM,CAAA,CAAE,GAAA;AAAA,QACxE,CAACA,YAAW,KAAA,qBACV,GAAA;AAAA,UAAC,IAAA;AAAA,UAAA;AAAA,YAGC,UAAA;AAAA,YACA,SAAA;AAAA,YACA,aAAA;AAAA,YACA,SAAA,EAAWA;AAAA,WAAA;AAAA,UAJN,CAAA,EAAGA,UAAS,CAAA,CAAA,EAAI,KAAK,CAAA;AAAA;AAK5B;AAEJ;AAAA;AACF,CAAA,EACF","file":"chunk-2YYJDKSP.js","sourcesContent":["import { cn } from '../../utils';\n\nimport type { Height } from './Skeleton';\nimport { Skeleton } from './Skeleton';\n\nconst duplicateArray = (arr: string[], times: number) => {\n  return Array(times).fill(arr).flat();\n};\n\nconst Item = ({\n  className,\n  iconHeight = 'md',\n  rowHeight = 'sm',\n  iconClassName = 'tw:w-6 ',\n}: {\n  className: string;\n  iconHeight?: Height;\n  rowHeight?: Height;\n  iconClassName?: string;\n}) => (\n  <div className=\"tw:flex tw:items-center tw:gap-3\">\n    <Skeleton height={iconHeight} className={cn('tw:rounded-full tw:shrink-0', iconClassName)} />\n    <Skeleton height={rowHeight} className={className} />\n  </div>\n);\n\nexport const SkeletonList = ({\n  hasHeading = false,\n  groups = 3,\n  className,\n  iconHeight = 'md',\n  rowHeight = 'sm',\n  iconClassName,\n}: {\n  hasHeading?: boolean;\n  groups?: number;\n  className?: string;\n  iconHeight?: Height;\n  rowHeight?: Height;\n  iconClassName?: string;\n}) => (\n  <div className={cn('tw:flex tw:flex-col tw:gap-4', className)}>\n    {hasHeading ? <Skeleton height=\"xxs\" className=\"tw:w-28\" /> : null}\n\n    <div\n      className={cn(\n        'tw:flex tw:flex-col',\n        ['xxs', 'xs'].includes(rowHeight) ? 'tw:gap-3' : 'tw:gap-4',\n      )}\n    >\n      {duplicateArray(['tw:w-5/6', 'tw:w-3/4', 'tw:w-4/5', 'tw:w-2/3'], groups).map(\n        (className, index) => (\n          <Item\n            // oxlint-disable-next-line react/no-array-index-key\n            key={`${className}-${index}`}\n            iconHeight={iconHeight}\n            rowHeight={rowHeight}\n            iconClassName={iconClassName}\n            className={className}\n          />\n        ),\n      )}\n    </div>\n  </div>\n);\n"]}

package/dist/chunk-3P5UUCFI.js

@@ -0,0 +1,385 @@
+import { Button } from './chunk-IXAYNBOY.js';
+import { CircleCheck, AlertTriangle, Info } from './chunk-RQVK4IYC.js';
+import { useArgoDesign } from './chunk-WETKNYZX.js';
+import { cn } from './chunk-LXLIQ2D6.js';
+import { createContext, useState, useRef, useEffect, useCallback, useMemo, use } from 'react';
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+import { Root, Trigger, Portal, Content, Cancel, Action, Overlay, Title } from '@radix-ui/react-alert-dialog';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var AlertModalDescription = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  AlertDialogPrimitive.Description,
+  {
+    className: cn(
+      "tw:font-sans",
+      "tw:tracking-normal",
+      "tw:font-normal",
+      "tw:text-muted-foreground",
+      "tw:group-data-[design=default]/alert-modal:text-foreground",
+      "tw:group-data-[design=default]/alert-modal:text-sm",
+      className
+    ),
+    ...props
+  }
+);
+var AlertModalFooter = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "tw:flex",
+      "tw:gap-2",
+      "tw:group-data-[design=default]/alert-modal:flex-col",
+      "tw:group-data-[design=default]/alert-modal:sm:flex-row",
+      "tw:group-data-[design=argo]/alert-modal:justify-end",
+      className
+    ),
+    ...props
+  }
+);
+var AlertModalHeader = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "tw:grid",
+      "tw:grid-cols-[auto_1fr]",
+      "tw:items-start",
+      "tw:gap-y-1",
+      // default (legacy) needs more breathing room below the title's separator border
+      "tw:group-data-[design=default]/alert-modal:gap-y-4",
+      "tw:group-data-[design=argo]/alert-modal:gap-x-3",
+      className
+    ),
+    ...props
+  }
+);
+var VARIANT_ICONS = {
+  info: /* @__PURE__ */ jsx(Info, {}),
+  warning: /* @__PURE__ */ jsx(AlertTriangle, {}),
+  danger: /* @__PURE__ */ jsx(AlertTriangle, {}),
+  success: /* @__PURE__ */ jsx(CircleCheck, {})
+};
+var AlertModalIcon = ({ variant, icon }) => {
+  const glyph = icon ?? VARIANT_ICONS[variant];
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-slot": "alert-modal-icon",
+        className: cn(
+          "tw:group-data-[design=argo]/alert-modal:hidden",
+          "tw:absolute",
+          "tw:top-0",
+          "tw:left-8",
+          "tw:translate-y-[-50%]",
+          "tw:size-12"
+        ),
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn("tw:relative", "tw:rounded-full", "tw:size-12", {
+              "tw:bg-blue-500": variant === "info",
+              "tw:bg-warning-500": variant === "warning",
+              "tw:bg-error-500": variant === "danger",
+              "tw:bg-green-500": variant === "success"
+            }),
+            children: /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "tw:absolute",
+                  "tw:inset-0",
+                  "tw:flex",
+                  "tw:items-center",
+                  "tw:justify-center",
+                  "tw:text-white",
+                  'tw:[&_svg:not([class*="tw:size-"])]:size-6',
+                  "tw:[&_svg]:aspect-square"
+                ),
+                children: glyph
+              }
+            )
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        "data-slot": "alert-modal-icon",
+        className: cn(
+          "tw:hidden",
+          "tw:group-data-[design=argo]/alert-modal:inline-flex",
+          // grid placement: column 1 of the first row, top-aligned with the first line of content
+          "tw:col-start-1",
+          "tw:row-start-1",
+          "tw:self-start",
+          "tw:shrink-0",
+          "tw:items-center",
+          "tw:justify-center",
+          "tw:rounded",
+          "tw:size-8",
+          'tw:[&_svg:not([class*="tw:size-"])]:size-5',
+          {
+            "tw:bg-blue-100 tw:text-blue-600": variant === "info",
+            "tw:bg-warning-100 tw:text-warning-500": variant === "warning",
+            "tw:bg-error-100 tw:text-error-500": variant === "danger",
+            "tw:bg-green-100 tw:text-green-900": variant === "success"
+          }
+        ),
+        children: glyph
+      }
+    )
+  ] });
+};
+var AlertModalOverlay = ({ ref, className, ...props }) => /* @__PURE__ */ jsx(
+  Overlay,
+  {
+    ...props,
+    ref,
+    className: cn(
+      // positioning
+      "tw:fixed",
+      "tw:inset-0",
+      "tw:z-[1051]",
+      // background
+      "tw:bg-black/50",
+      // opening animation
+      "tw:data-[state=open]:duration-500",
+      "tw:data-[state=open]:fade-in-0",
+      "tw:data-[state=open]:animate-in",
+      // closing animation
+      "tw:data-[state=closed]:duration-500",
+      "tw:data-[state=closed]:fade-out-0",
+      "tw:data-[state=closed]:animate-out",
+      className
+    )
+  }
+);
+var AlertModalTitle = ({ children, className, ...props }) => /* @__PURE__ */ jsx(
+  Title,
+  {
+    ...props,
+    asChild: true,
+    className: cn(
+      "tw:font-medium",
+      "tw:text-foreground",
+      "tw:break-anywhere",
+      // default (legacy) gets a Modal-style separator line under the title (Modal uses border-neutral-150)
+      "tw:group-data-[design=default]/alert-modal:border-b",
+      "tw:group-data-[design=default]/alert-modal:border-neutral-150",
+      "tw:group-data-[design=default]/alert-modal:pb-3",
+      className
+    ),
+    children: /* @__PURE__ */ jsx("h3", { children })
+  }
+);
+var AlertModalContext = createContext(null);
+var AlertModalContextProvider = AlertModalContext.Provider;
+var useAlertModalContext = () => {
+  const context = use(AlertModalContext);
+  if (context === null)
+    throw new Error("AlertModal compound components must be rendered inside <AlertModal>.");
+  return context;
+};
+var AlertModalContent = ({
+  variant = "info",
+  icon,
+  title,
+  cancelLabel = "Cancel",
+  confirmLabel: actionLabel = "Confirm",
+  confirmDisabled = false,
+  container,
+  className,
+  children,
+  onEscapeKeyDown,
+  ...props
+}) => {
+  const { isLoading, onConfirm, onCancel } = useAlertModalContext();
+  const designLanguage = useArgoDesign() ? "argo" : "default";
+  const handleEscapeKeyDown = (event) => {
+    event.stopPropagation();
+    if (isLoading) event.preventDefault();
+    onEscapeKeyDown?.(event);
+  };
+  return /* @__PURE__ */ jsx(Portal, { container, children: /* @__PURE__ */ jsx(
+    AlertModalOverlay,
+    {
+      onClick: (event) => event.stopPropagation(),
+      onKeyDown: (event) => {
+        if (event.key !== "Escape") event.stopPropagation();
+      },
+      children: /* @__PURE__ */ jsxs(
+        Content,
+        {
+          "data-design": designLanguage,
+          ...children ? {} : { "aria-describedby": void 0 },
+          onEscapeKeyDown: handleEscapeKeyDown,
+          className: cn(
+            "tailwindcss-preflight",
+            "tw:group/alert-modal",
+            "tw:text-base",
+            // positioning - horizontally centered; vertical anchor depends on the design language
+            "tw:fixed",
+            "tw:left-1/2",
+            "tw:-translate-x-1/2",
+            "tw:z-[1051]",
+            "tw:data-[design=default]:top-20",
+            "tw:data-[design=argo]:top-1/2",
+            "tw:data-[design=argo]:-translate-y-1/2",
+            // sizing - compact alert width
+            "tw:w-full",
+            "tw:max-w-[480px]",
+            "tw:max-h-[calc(100vh-2*theme(spacing.20))]",
+            "tw:data-[design=argo]:overflow-y-auto",
+            // layout: stack the header and footer (each owns its own internal layout)
+            "tw:flex",
+            "tw:flex-col",
+            "tw:gap-4",
+            "tw:data-[design=default]:rounded-lg",
+            "tw:data-[design=argo]:rounded-3xl",
+            "tw:bg-popover",
+            "tw:text-popover-foreground",
+            "tw:data-[design=default]:px-7",
+            "tw:data-[design=default]:py-8",
+            "tw:data-[design=argo]:p-4",
+            // animation — shared
+            "tw:duration-200",
+            "tw:data-[state=open]:animate-in",
+            "tw:data-[state=open]:fade-in-0",
+            "tw:data-[state=closed]:animate-out",
+            "tw:data-[state=closed]:fade-out-0",
+            // default design: Modal-style slide-down + zoom. No `slide-*-left-1/2`: under v4 the
+            // x-centring lives on the `translate` PROPERTY (it persists through the transform-based
+            // animation), so an enter `-50%` would stack on it (= -100%) and fly in from the left.
+            "tw:data-[design=default]:data-[state=open]:zoom-in-80",
+            "tw:data-[design=default]:data-[state=open]:slide-in-from-top-[48%]",
+            "tw:data-[design=default]:data-[state=closed]:zoom-out-80",
+            "tw:data-[design=default]:data-[state=closed]:slide-out-to-top-[48%]",
+            // argo design: pop from the centre — zoom only (centring persists on the translate property)
+            "tw:data-[design=argo]:data-[state=open]:zoom-in-95",
+            "tw:data-[design=argo]:data-[state=closed]:zoom-out-95",
+            className
+          ),
+          ...props,
+          children: [
+            /* @__PURE__ */ jsxs(AlertModalHeader, { children: [
+              /* @__PURE__ */ jsx(AlertModalIcon, { variant, icon }),
+              title && /* @__PURE__ */ jsx(AlertModalTitle, { className: "tw:col-start-2 tw:row-start-1 tw:self-center", children: title }),
+              children && /* @__PURE__ */ jsx(
+                AlertModalDescription,
+                {
+                  className: cn(
+                    "tw:col-start-2",
+                    title ? "tw:row-start-2" : "tw:row-start-1 tw:self-center"
+                  ),
+                  children
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs(AlertModalFooter, { children: [
+              /* @__PURE__ */ jsx(Cancel, { asChild: true, children: /* @__PURE__ */ jsx(
+                Button,
+                {
+                  type: "button",
+                  variant: "outline",
+                  disabled: isLoading,
+                  onClick: onCancel,
+                  className: "tw:group-data-[design=default]/alert-modal:flex-1",
+                  children: cancelLabel
+                }
+              ) }),
+              /* @__PURE__ */ jsx(Action, { asChild: true, children: /* @__PURE__ */ jsx(
+                Button,
+                {
+                  type: "button",
+                  variant: variant === "danger" ? "danger" : "primary",
+                  isLoading,
+                  disabled: isLoading || confirmDisabled,
+                  onClick: onConfirm,
+                  className: "tw:group-data-[design=default]/alert-modal:flex-1",
+                  children: actionLabel
+                }
+              ) })
+            ] })
+          ]
+        }
+      )
+    }
+  ) });
+};
+var AlertModalTrigger = ({ ref, onClick, onKeyDown, ...props }) => /* @__PURE__ */ jsx(
+  Trigger,
+  {
+    ...props,
+    ref,
+    onClick: (event) => {
+      event.stopPropagation();
+      onClick?.(event);
+    },
+    onKeyDown: (event) => {
+      if (event.key === "Enter" || event.key === " ") event.stopPropagation();
+      onKeyDown?.(event);
+    }
+  }
+);
+var noop = () => void 0;
+var AlertModal = ({
+  children,
+  onConfirm = noop,
+  onCancel = noop,
+  skipAsyncWait = false,
+  isLoading = false,
+  open,
+  defaultOpen,
+  onOpenChange,
+  ...rest
+}) => {
+  const [isConfirming, setIsConfirming] = useState(false);
+  const isControlled = open !== void 0;
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen ?? false);
+  const isOpen = isControlled ? open : uncontrolledOpen;
+  const confirmRef = useRef(onConfirm);
+  const cancelRef = useRef(onCancel);
+  const onOpenChangeRef = useRef(onOpenChange);
+  useEffect(() => {
+    confirmRef.current = onConfirm;
+    cancelRef.current = onCancel;
+    onOpenChangeRef.current = onOpenChange;
+  }, [onConfirm, onCancel, onOpenChange]);
+  const setOpen = useCallback(
+    (next) => {
+      if (!isControlled) setUncontrolledOpen(next);
+      onOpenChangeRef.current?.(next);
+    },
+    [isControlled]
+  );
+  const context = useMemo(
+    () => ({
+      // The two sources of "the confirm action is running" converge here, so every consumer
+      // downstream reads one answer regardless of which way the host drives it.
+      isLoading: isConfirming || isLoading,
+      onConfirm: (event) => {
+        const result = confirmRef.current(event);
+        const isThenable = result !== null && typeof result === "object" && typeof result.then === "function";
+        if (!isThenable || skipAsyncWait) return;
+        event.preventDefault();
+        setIsConfirming(true);
+        Promise.resolve(result).finally(() => {
+          setIsConfirming(false);
+          setOpen(false);
+        });
+      },
+      onCancel: (event) => {
+        cancelRef.current(event);
+      }
+    }),
+    [isConfirming, isLoading, skipAsyncWait, setOpen]
+  );
+  return /* @__PURE__ */ jsx(Root, { ...rest, open: isOpen, onOpenChange: setOpen, children: /* @__PURE__ */ jsx(AlertModalContextProvider, { value: context, children }) });
+};
+AlertModal.Trigger = AlertModalTrigger;
+AlertModal.Content = AlertModalContent;
+
+export { AlertModal };
+//# sourceMappingURL=chunk-3P5UUCFI.js.map
+//# sourceMappingURL=chunk-3P5UUCFI.js.map

package/dist/chunk-3P5UUCFI.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/AlertModal/AlertModalDescription.tsx","../src/components/AlertModal/AlertModalFooter.tsx","../src/components/AlertModal/AlertModalHeader.tsx","../src/components/AlertModal/AlertModalIcon.tsx","../src/components/AlertModal/AlertModalOverlay.tsx","../src/components/AlertModal/AlertModalTitle.tsx","../src/components/AlertModal/context.ts","../src/components/AlertModal/AlertModalContent.tsx","../src/components/AlertModal/AlertModalTrigger.tsx","../src/components/AlertModal/AlertModal.tsx"],"names":["jsx","jsxs"],"mappings":"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","file":"chunk-3P5UUCFI.js","sourcesContent":["import type { ComponentPropsWithRef } from 'react';\nimport * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentPropsWithRef<typeof AlertDialogPrimitive.Description>;\n\nexport const AlertModalDescription = ({ className, ...props }: Props) => (\n  <AlertDialogPrimitive.Description\n    className={cn(\n      'tw:font-sans',\n      'tw:tracking-normal',\n      'tw:font-normal',\n      'tw:text-muted-foreground',\n\n      'tw:group-data-[design=default]/alert-modal:text-foreground',\n      'tw:group-data-[design=default]/alert-modal:text-sm',\n      className,\n    )}\n    {...props}\n  />\n);\n","import type { ComponentPropsWithRef } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentPropsWithRef<'div'>;\n\nexport const AlertModalFooter = ({ className, ...props }: Props) => (\n  <div\n    className={cn(\n      'tw:flex',\n      'tw:gap-2',\n\n      'tw:group-data-[design=default]/alert-modal:flex-col',\n      'tw:group-data-[design=default]/alert-modal:sm:flex-row',\n\n      'tw:group-data-[design=argo]/alert-modal:justify-end',\n      className,\n    )}\n    {...props}\n  />\n);\n","import type { ComponentPropsWithRef } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentPropsWithRef<'div'>;\n\nexport const AlertModalHeader = ({ className, ...props }: Props) => (\n  <div\n    className={cn(\n      'tw:grid',\n      'tw:grid-cols-[auto_1fr]',\n      'tw:items-start',\n      'tw:gap-y-1',\n\n      // default (legacy) needs more breathing room below the title's separator border\n      'tw:group-data-[design=default]/alert-modal:gap-y-4',\n      'tw:group-data-[design=argo]/alert-modal:gap-x-3',\n      className,\n    )}\n    {...props}\n  />\n);\n","import type { ReactNode } from 'react';\n\nimport { AlertTriangle, CircleCheck, Info } from '../../icons';\nimport { cn } from '../../utils';\n\nimport type { AlertModalVariant } from './variant';\n\nconst VARIANT_ICONS: Record<AlertModalVariant, ReactNode> = {\n  info: <Info />,\n  warning: <AlertTriangle />,\n  danger: <AlertTriangle />,\n  success: <CircleCheck />,\n};\n\ntype Props = {\n  variant: AlertModalVariant;\n  icon?: ReactNode;\n};\n\nexport const AlertModalIcon = ({ variant, icon }: Props) => {\n  const glyph = icon ?? VARIANT_ICONS[variant];\n\n  return (\n    <>\n      {/* Default design language: floating circular badge (Modal-style). Hidden in argo. */}\n      <div\n        data-slot=\"alert-modal-icon\"\n        className={cn(\n          'tw:group-data-[design=argo]/alert-modal:hidden',\n          'tw:absolute',\n          'tw:top-0',\n          'tw:left-8',\n          'tw:translate-y-[-50%]',\n          'tw:size-12',\n        )}\n      >\n        <div\n          className={cn('tw:relative', 'tw:rounded-full', 'tw:size-12', {\n            'tw:bg-blue-500': variant === 'info',\n            'tw:bg-warning-500': variant === 'warning',\n            'tw:bg-error-500': variant === 'danger',\n            'tw:bg-green-500': variant === 'success',\n          })}\n        >\n          <span\n            className={cn(\n              'tw:absolute',\n              'tw:inset-0',\n              'tw:flex',\n              'tw:items-center',\n              'tw:justify-center',\n              'tw:text-white',\n              'tw:[&_svg:not([class*=\"tw:size-\"])]:size-6',\n              'tw:[&_svg]:aspect-square',\n            )}\n          >\n            {glyph}\n          </span>\n        </div>\n      </div>\n\n      {/* Argo design language: inline tinted badge (Badge \"*-inverse\" pattern). Hidden in default. */}\n      <span\n        data-slot=\"alert-modal-icon\"\n        className={cn(\n          'tw:hidden',\n          'tw:group-data-[design=argo]/alert-modal:inline-flex',\n          // grid placement: column 1 of the first row, top-aligned with the first line of content\n          'tw:col-start-1',\n          'tw:row-start-1',\n          'tw:self-start',\n          'tw:shrink-0',\n          'tw:items-center',\n          'tw:justify-center',\n          'tw:rounded',\n          'tw:size-8',\n          'tw:[&_svg:not([class*=\"tw:size-\"])]:size-5',\n          {\n            'tw:bg-blue-100 tw:text-blue-600': variant === 'info',\n            'tw:bg-warning-100 tw:text-warning-500': variant === 'warning',\n            'tw:bg-error-100 tw:text-error-500': variant === 'danger',\n            'tw:bg-green-100 tw:text-green-900': variant === 'success',\n          },\n        )}\n      >\n        {glyph}\n      </span>\n    </>\n  );\n};\n","import type { ComponentPropsWithRef } from 'react';\nimport { Overlay } from '@radix-ui/react-alert-dialog';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentPropsWithRef<typeof Overlay>;\n\nexport const AlertModalOverlay = ({ ref, className, ...props }: Props) => (\n  <Overlay\n    {...props}\n    ref={ref}\n    className={cn(\n      // positioning\n      'tw:fixed',\n      'tw:inset-0',\n      'tw:z-[1051]',\n\n      // background\n      'tw:bg-black/50',\n\n      // opening animation\n      'tw:data-[state=open]:duration-500',\n      'tw:data-[state=open]:fade-in-0',\n      'tw:data-[state=open]:animate-in',\n\n      // closing animation\n      'tw:data-[state=closed]:duration-500',\n      'tw:data-[state=closed]:fade-out-0',\n      'tw:data-[state=closed]:animate-out',\n\n      className,\n    )}\n  />\n);\n","import type { ComponentPropsWithRef } from 'react';\nimport { Title } from '@radix-ui/react-alert-dialog';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentPropsWithRef<typeof Title>;\n\nexport const AlertModalTitle = ({ children, className, ...props }: Props) => (\n  <Title\n    {...props}\n    asChild\n    className={cn(\n      'tw:font-medium',\n      'tw:text-foreground',\n      'tw:break-anywhere',\n\n      // default (legacy) gets a Modal-style separator line under the title (Modal uses border-neutral-150)\n      'tw:group-data-[design=default]/alert-modal:border-b',\n      'tw:group-data-[design=default]/alert-modal:border-neutral-150',\n      'tw:group-data-[design=default]/alert-modal:pb-3',\n      className,\n    )}\n  >\n    <h3>{children}</h3>\n  </Title>\n);\n","import { createContext, use } from 'react';\nimport type { MouseEvent } from 'react';\n\ntype AlertModalContextType = {\n  isLoading: boolean;\n  onConfirm: (event: MouseEvent<HTMLButtonElement>) => void;\n  onCancel: (event: MouseEvent<HTMLButtonElement>) => void;\n};\n\nconst AlertModalContext = createContext<AlertModalContextType | null>(null);\n\nexport const AlertModalContextProvider = AlertModalContext.Provider;\n\nexport const useAlertModalContext = (): AlertModalContextType => {\n  const context = use(AlertModalContext);\n  if (context === null)\n    throw new Error('AlertModal compound components must be rendered inside <AlertModal>.');\n  return context;\n};\n","import type { ComponentProps, ReactNode } from 'react';\nimport { Action, Cancel, Content, Portal } from '@radix-ui/react-alert-dialog';\n\nimport { cn } from '../../utils';\nimport { Button } from '../Button';\nimport { useArgoDesign } from '../ThemeProvider/context';\n\nimport { AlertModalDescription } from './AlertModalDescription';\nimport { AlertModalFooter } from './AlertModalFooter';\nimport { AlertModalHeader } from './AlertModalHeader';\nimport { AlertModalIcon } from './AlertModalIcon';\nimport { AlertModalOverlay } from './AlertModalOverlay';\nimport { AlertModalTitle } from './AlertModalTitle';\nimport { useAlertModalContext } from './context';\nimport type { AlertModalVariant } from './variant';\n\ntype Props = {\n  variant?: AlertModalVariant;\n  icon?: ReactNode;\n  title?: ReactNode;\n  cancelLabel?: ReactNode;\n  confirmLabel?: ReactNode;\n  /** Blocks the confirm action while a host-tracked precondition is unmet. Cancel stays available. */\n  confirmDisabled?: boolean;\n  container?: ComponentProps<typeof Portal>['container'];\n} & Omit<ComponentProps<typeof Content>, 'title'>;\n\nexport const AlertModalContent = ({\n  variant = 'info',\n  icon,\n  title,\n  cancelLabel = 'Cancel',\n  confirmLabel: actionLabel = 'Confirm',\n  confirmDisabled = false,\n  container,\n  className,\n  children,\n  onEscapeKeyDown,\n  ...props\n}: Props) => {\n  const { isLoading, onConfirm, onCancel } = useAlertModalContext();\n  const designLanguage = useArgoDesign() ? 'argo' : 'default';\n\n  const handleEscapeKeyDown: ComponentProps<typeof Content>['onEscapeKeyDown'] = (event) => {\n    // Stop propagation so a parent Modal/Sheet doesn't also close when this is a nested confirmation.\n    event.stopPropagation();\n    // Lock dismissal while the action is running.\n    if (isLoading) event.preventDefault();\n    onEscapeKeyDown?.(event);\n  };\n\n  return (\n    <Portal container={container}>\n      <AlertModalOverlay\n        // Stop propagation at the overlay (common ancestor of backdrop + content):\n        // - without it, clicks/Enter inside the modal also fire handlers on the host that rendered\n        //   <AlertModal> (e.g. a clickable row, or an editor that opens a code block on Enter)\n        // - portaling the content does not prevent this\n        // - Escape is exempt so Radix can still close on Esc\n        onClick={(event) => event.stopPropagation()}\n        onKeyDown={(event) => {\n          if (event.key !== 'Escape') event.stopPropagation();\n        }}\n      >\n        <Content\n          data-design={designLanguage}\n          // Radix auto-links `aria-describedby` to `<AlertModalDescription>`. With no description\n          // (no children) it warns about the missing link — suppress it like Modal/Sheet do.\n          {...(children ? {} : { 'aria-describedby': undefined })}\n          onEscapeKeyDown={handleEscapeKeyDown}\n          className={cn(\n            'tailwindcss-preflight',\n            'tw:group/alert-modal',\n            'tw:text-base',\n\n            // positioning - horizontally centered; vertical anchor depends on the design language\n            'tw:fixed',\n            'tw:left-1/2',\n            'tw:-translate-x-1/2',\n            'tw:z-[1051]',\n            'tw:data-[design=default]:top-20',\n            'tw:data-[design=argo]:top-1/2',\n            'tw:data-[design=argo]:-translate-y-1/2',\n\n            // sizing - compact alert width\n            'tw:w-full',\n            'tw:max-w-[480px]',\n            'tw:max-h-[calc(100vh-2*theme(spacing.20))]',\n            'tw:data-[design=argo]:overflow-y-auto',\n\n            // layout: stack the header and footer (each owns its own internal layout)\n            'tw:flex',\n            'tw:flex-col',\n            'tw:gap-4',\n\n            'tw:data-[design=default]:rounded-lg',\n            'tw:data-[design=argo]:rounded-3xl',\n            'tw:bg-popover',\n            'tw:text-popover-foreground',\n\n            'tw:data-[design=default]:px-7',\n            'tw:data-[design=default]:py-8',\n            'tw:data-[design=argo]:p-4',\n\n            // animation — shared\n            'tw:duration-200',\n            'tw:data-[state=open]:animate-in',\n            'tw:data-[state=open]:fade-in-0',\n            'tw:data-[state=closed]:animate-out',\n            'tw:data-[state=closed]:fade-out-0',\n\n            // default design: Modal-style slide-down + zoom. No `slide-*-left-1/2`: under v4 the\n            // x-centring lives on the `translate` PROPERTY (it persists through the transform-based\n            // animation), so an enter `-50%` would stack on it (= -100%) and fly in from the left.\n            'tw:data-[design=default]:data-[state=open]:zoom-in-80',\n            'tw:data-[design=default]:data-[state=open]:slide-in-from-top-[48%]',\n            'tw:data-[design=default]:data-[state=closed]:zoom-out-80',\n            'tw:data-[design=default]:data-[state=closed]:slide-out-to-top-[48%]',\n\n            // argo design: pop from the centre — zoom only (centring persists on the translate property)\n            'tw:data-[design=argo]:data-[state=open]:zoom-in-95',\n            'tw:data-[design=argo]:data-[state=closed]:zoom-out-95',\n\n            className,\n          )}\n          {...props}\n        >\n          <AlertModalHeader>\n            <AlertModalIcon variant={variant} icon={icon} />\n\n            {title && (\n              <AlertModalTitle className=\"tw:col-start-2 tw:row-start-1 tw:self-center\">\n                {title}\n              </AlertModalTitle>\n            )}\n\n            {children && (\n              <AlertModalDescription\n                className={cn(\n                  'tw:col-start-2',\n                  title ? 'tw:row-start-2' : 'tw:row-start-1 tw:self-center',\n                )}\n              >\n                {children}\n              </AlertModalDescription>\n            )}\n          </AlertModalHeader>\n\n          <AlertModalFooter>\n            <Cancel asChild>\n              <Button\n                type=\"button\"\n                variant=\"outline\"\n                disabled={isLoading}\n                onClick={onCancel}\n                className=\"tw:group-data-[design=default]/alert-modal:flex-1\"\n              >\n                {cancelLabel}\n              </Button>\n            </Cancel>\n\n            <Action asChild>\n              <Button\n                type=\"button\"\n                variant={variant === 'danger' ? 'danger' : 'primary'}\n                isLoading={isLoading}\n                disabled={isLoading || confirmDisabled}\n                onClick={onConfirm}\n                className=\"tw:group-data-[design=default]/alert-modal:flex-1\"\n              >\n                {actionLabel}\n              </Button>\n            </Action>\n          </AlertModalFooter>\n        </Content>\n      </AlertModalOverlay>\n    </Portal>\n  );\n};\n","import type { ComponentPropsWithRef } from 'react';\nimport { Trigger } from '@radix-ui/react-alert-dialog';\n\ntype Props = ComponentPropsWithRef<typeof Trigger>;\n\nexport const AlertModalTrigger = ({ ref, onClick, onKeyDown, ...props }: Props) => (\n  <Trigger\n    {...props}\n    ref={ref}\n    onClick={(event) => {\n      // The trigger sits in the normal DOM tree, often inside a clickable row/card. Stop the\n      // open-click from bubbling to that ancestor's onClick. (Radix still opens the modal —\n      // stopPropagation only blocks ancestors, not the open handler on the same element.)\n      event.stopPropagation();\n      onClick?.(event);\n    }}\n    onKeyDown={(event) => {\n      // Only the activation keys open the modal and would leak; stop just those so Tab/arrows/etc.\n      // still reach ancestor keyboard handlers. The button still activates (stopPropagation only\n      // blocks ancestors).\n      if (event.key === 'Enter' || event.key === ' ') event.stopPropagation();\n      onKeyDown?.(event);\n    }}\n  />\n);\n","import { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport type { ComponentProps, MouseEvent } from 'react';\nimport { Root } from '@radix-ui/react-alert-dialog';\n\nimport { AlertModalContent } from './AlertModalContent';\nimport { AlertModalTrigger } from './AlertModalTrigger';\nimport { AlertModalContextProvider } from './context';\n\nconst noop = () => undefined;\n\ntype ConfirmHandler = (event: MouseEvent<HTMLButtonElement>) => void | Promise<unknown>;\ntype CancelHandler = (event: MouseEvent<HTMLButtonElement>) => void;\n\ntype Props = {\n  onConfirm?: ConfirmHandler;\n  onCancel?: CancelHandler;\n  skipAsyncWait?: boolean;\n  /** Marks the confirm action busy from the outside, on top of the state inferred from a thenable `onConfirm`. */\n  isLoading?: boolean;\n} & ComponentProps<typeof Root>;\n\nexport const AlertModal = ({\n  children,\n  onConfirm = noop,\n  onCancel = noop,\n  skipAsyncWait = false,\n  isLoading = false,\n  open,\n  defaultOpen,\n  onOpenChange,\n  ...rest\n}: Props) => {\n  const [isConfirming, setIsConfirming] = useState(false);\n\n  // Controllable open state: when `open` is provided the parent owns it; otherwise we keep our own.\n  const isControlled = open !== undefined;\n  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen ?? false);\n  const isOpen = isControlled ? open : uncontrolledOpen;\n\n  const confirmRef = useRef(onConfirm);\n  const cancelRef = useRef(onCancel);\n  const onOpenChangeRef = useRef(onOpenChange);\n\n  // Latest-ref pattern: keep the handlers out of `context`'s deps so its identity stays stable,\n  // without writing to refs during render (synced in an effect, before any handler can fire).\n  useEffect(() => {\n    confirmRef.current = onConfirm;\n    cancelRef.current = onCancel;\n    onOpenChangeRef.current = onOpenChange;\n  }, [onConfirm, onCancel, onOpenChange]);\n\n  const setOpen = useCallback(\n    (next: boolean) => {\n      if (!isControlled) setUncontrolledOpen(next);\n      onOpenChangeRef.current?.(next);\n    },\n    [isControlled],\n  );\n\n  const context = useMemo(\n    () => ({\n      // The two sources of \"the confirm action is running\" converge here, so every consumer\n      // downstream reads one answer regardless of which way the host drives it.\n      isLoading: isConfirming || isLoading,\n      onConfirm: (event: MouseEvent<HTMLButtonElement>) => {\n        const result = confirmRef.current(event);\n\n        // Treat any thenable as async, not just native promises.\n        const isThenable =\n          result !== null && typeof result === 'object' && typeof result.then === 'function';\n        if (!isThenable || skipAsyncWait) return;\n\n        // Keep the modal open while the async action runs, then close once it settles.\n        event.preventDefault();\n        setIsConfirming(true);\n        Promise.resolve(result).finally(() => {\n          setIsConfirming(false);\n          setOpen(false);\n        });\n      },\n      onCancel: (event: MouseEvent<HTMLButtonElement>) => {\n        cancelRef.current(event);\n      },\n    }),\n    [isConfirming, isLoading, skipAsyncWait, setOpen],\n  );\n\n  return (\n    <Root {...rest} open={isOpen} onOpenChange={setOpen}>\n      <AlertModalContextProvider value={context}>{children}</AlertModalContextProvider>\n    </Root>\n  );\n};\n\nAlertModal.Trigger = AlertModalTrigger;\nAlertModal.Content = AlertModalContent;\n"]}