@keboola/design 9.1.0 → 10.1.0

package/src/styles.css

@@ -60,7 +60,10 @@
 
   /* Border / Input / Ring */
   --border: 229 231 235; /* #e5e7eb */
-  --input: 203 213 225; /* #cbd5e1 */
+  --input: 203 213 225; /* #cbd5e1 — the control's border, not its fill */
+  /* The fill of a form control. Its own token rather than `card`: a field is not
+     a raised container, and a brand tints the two independently. */
+  --input-background: 255 255 255; /* #ffffff */
   --ring: var(--primary); /* follows brand primary (default #2563eb) */
   --ring-offset: 255 255 255; /* #ffffff — focus-ring offset gap */
 
@@ -200,7 +203,11 @@
 
   /* Border / Input / Ring */
   --border: 52 53 62; /* #34353e */
-  --input: 60 61 71; /* #3c3d47 */
+  --input: 60 61 71; /* #3c3d47 — the control's border, not its fill */
+  /* Lighter than `background` (#131317), `card` (#222228) and `popover` (#26262d)
+     so a field stays legible as its own surface on all three — a single opaque
+     fill has to clear the lightest container it can sit in. */
+  --input-background: 47 48 55; /* #2f3037 */
   --ring: var(--primary); /* follows brand primary (default #1f8fff) */
   --ring-offset: 19 19 23; /* #131317 — focus-ring offset gap (dark background) */
 
@@ -368,11 +375,40 @@
   }
 }
 
-@layer components {
+/* Legacy (dark) tooltip chrome — invert nested prose for contrast. Must live in
+ * `utilities`: `.tw\:prose` declares the same `--tw-prose-*` variables from that
+ * layer, and the layer order at the top of this file makes `utilities` win over
+ * `components` regardless of specificity. */
+@layer utilities {
   [data-tooltip-content='true'] .tw\:prose {
     @apply tw:prose-invert;
+
+    /* Typography's own `a`/`code` rules are `:where()`-wrapped (specificity 0), so
+     * the inverted variables never reach a link rendered by design's `Link`
+     * (`tw:text-primary`) nor an inline-code background a host's global CSS paints. */
+    a {
+      @apply tw:text-blue-300 tw:hover:text-blue-200;
+    }
+
+    /* Inline code only — scoped the way AIKit's markdown prose does it
+     * (`tw:[&_:not(pre)>code]:…` in `blocks/AIKit/Markdown.tsx`) so a fenced
+     * block's `pre > code` keeps `--tw-prose-invert-pre-bg`. */
+    :not(pre) > code {
+      @apply tw:bg-white/10 tw:text-neutral-100;
+    }
+
+    /* `.tw\:prose blockquote` (components layer, below) fills with the light
+     * `--muted`; on the dark tooltip that would put the now-inverted light text
+     * on a light fill. Re-fill with the same `white/10` wash the inline-code
+     * chip uses — the file's one translucent-overlay idiom, and the only fill
+     * that works against a fixed `bg-neutral-800` without a second token. */
+    blockquote {
+      @apply tw:bg-white/10;
+    }
   }
+}
 
+@layer components {
   .tw\:prose blockquote {
     border-left: 4px solid rgb(var(--border));
     background-color: rgb(var(--muted));
@@ -392,3 +428,24 @@
     pointer-events: auto !important;
   }
 }
+
+@layer utilities {
+  /* Tailwind Typography pins its own palette (`--tw-prose-bold`, `--tw-prose-headings`,
+     …) to light-mode values, so those elements stay near-black when the semantic tokens
+     flip — bold text in a Markdown answer renders dark-on-dark. `prose` has no awareness
+     of `[data-theme]`, so invert it here.
+     
+     In `utilities`, not `components`: `.tw:prose` is itself a utility, and a v4 cascade
+     layer beats specificity outright — a more specific rule in `components` still loses
+     to the plain utility. Same layer, higher specificity, so this wins. */
+  [data-theme='dark'] .tw\:prose {
+    @apply tw:prose-invert;
+  }
+}
+
+@layer utilities {
+  [data-header-span='full']
+    > [data-app-shell-slot]:has(> [data-collapsible='off-canvas'][data-state='collapsed']) {
+    overflow-x: clip;
+  }
+}

package/src/theme.css

@@ -118,6 +118,7 @@
   --color-accent-foreground: rgb(var(--accent-foreground));
   --color-border: rgb(var(--border));
   --color-input: rgb(var(--input));
+  --color-input-background: rgb(var(--input-background));
   --color-ring: rgb(var(--ring));
   --color-ring-offset: rgb(var(--ring-offset));
   --color-chart-1: rgb(var(--chart-1));

package/dist/charts.cjs

@@ -1,268 +0,0 @@
-'use strict';
-
-var recharts = require('recharts');
-var clsx = require('clsx');
-var tailwindMerge = require('tailwind-merge');
-var jsxRuntime = require('react/jsx-runtime');
-
-// src/blocks/Charts/ChartContainer.tsx
-var twMerge = tailwindMerge.extendTailwindMerge({
-  prefix: "tw"
-});
-var cn = (...classes) => twMerge(clsx.clsx(...classes));
-var ChartContainer = ({
-  height = 300,
-  width = "100%",
-  className,
-  children,
-  ...props
-}) => /* @__PURE__ */ jsxRuntime.jsx(
-  "div",
-  {
-    className: cn(
-      "tw:text-xs",
-      // Axis ticks and labels follow the muted foreground token.
-      "tw:[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground",
-      "tw:[&_.recharts-polar-angle-axis-tick_text]:fill-muted-foreground",
-      "tw:[&_.recharts-label]:fill-muted-foreground",
-      "tw:[&_.recharts-legend-item-text]:!text-muted-foreground",
-      // Grid lines, axis lines and the hover cursor follow the border token.
-      "tw:[&_.recharts-cartesian-grid_line]:stroke-border/60",
-      "tw:[&_.recharts-cartesian-axis-line]:stroke-border",
-      "tw:[&_.recharts-cartesian-axis-tick-line]:stroke-border",
-      "tw:[&_.recharts-curve.recharts-tooltip-cursor]:stroke-border",
-      "tw:[&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted/60",
-      "tw:[&_.recharts-surface]:outline-hidden",
-      className
-    ),
-    ...props,
-    children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width, height, children })
-  }
-);
-var ChartTooltipContent = ({
-  active,
-  label,
-  payload,
-  valueFormatter,
-  className
-}) => {
-  if (!active || !payload?.length) return null;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: cn(
-        "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",
-        className
-      ),
-      children: [
-        label != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tw:mb-1 tw:font-medium", children: label }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tw:flex tw:flex-col tw:gap-1", children: payload.map((entry) => {
-          const name = String(entry.name ?? entry.dataKey ?? "");
-          const value = entry.value;
-          const hasNumber = value != null && value !== "" && Number.isFinite(Number(value));
-          const display = hasNumber ? valueFormatter ? valueFormatter(Number(value), name) : String(Number(value)) : value ?? "";
-          return /* @__PURE__ */ jsxRuntime.jsxs(
-            "div",
-            {
-              className: "tw:flex tw:items-center tw:justify-between tw:gap-3",
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "tw:flex tw:items-center tw:gap-1.5", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    "span",
-                    {
-                      className: "tw:size-2 tw:shrink-0 tw:rounded-[2px]",
-                      style: { backgroundColor: entry.color }
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tw:text-muted-foreground", children: name })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tw:font-medium tw:tabular-nums", children: display })
-              ]
-            },
-            String(entry.dataKey ?? name)
-          );
-        }) })
-      ]
-    }
-  );
-};
-var ChartTooltip = ({ valueFormatter, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
-  recharts.Tooltip,
-  {
-    cursor: { strokeWidth: 1 },
-    content: /* @__PURE__ */ jsxRuntime.jsx(ChartTooltipContent, { valueFormatter }),
-    ...props
-  }
-);
-
-// src/blocks/Charts/format.ts
-var formatValue = (value, valueFormatter) => {
-  if (value == null || value === "") return "";
-  const num = Number(value);
-  if (!Number.isFinite(num)) return "";
-  return valueFormatter ? valueFormatter(num) : String(num);
-};
-var AXIS_PROPS = {
-  tickLine: false,
-  axisLine: false,
-  tick: { fontSize: 11 }
-};
-var cartesianChrome = ({
-  xKey,
-  showGrid = true,
-  showYAxis = true,
-  showLegend = false,
-  showTooltip = true,
-  valueFormatter
-}) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-  showGrid && /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { strokeDasharray: "3 3", vertical: false }),
-  /* @__PURE__ */ jsxRuntime.jsx(recharts.XAxis, { dataKey: xKey, ...AXIS_PROPS }),
-  showYAxis && /* @__PURE__ */ jsxRuntime.jsx(
-    recharts.YAxis,
-    {
-      width: 48,
-      ...AXIS_PROPS,
-      tickFormatter: valueFormatter ? (value) => formatValue(value, valueFormatter) : void 0
-    }
-  ),
-  showTooltip && /* @__PURE__ */ jsxRuntime.jsx(
-    ChartTooltip,
-    {
-      valueFormatter: valueFormatter ? (value) => formatValue(value, valueFormatter) : void 0
-    }
-  ),
-  showLegend && /* @__PURE__ */ jsxRuntime.jsx(recharts.Legend, { wrapperStyle: { fontSize: 11 } })
-] });
-
-// src/blocks/Charts/theme.ts
-var CHART_TOKEN_COUNT = 5;
-var chartTokenColor = (index) => {
-  const slot = (index % CHART_TOKEN_COUNT + CHART_TOKEN_COUNT) % CHART_TOKEN_COUNT + 1;
-  return `rgb(var(--chart-${slot}))`;
-};
-var resolveSeriesColor = (index, token) => chartTokenColor(token ? token - 1 : index);
-var LineChart = ({
-  data,
-  xKey,
-  series,
-  height,
-  width,
-  className,
-  ...chrome
-}) => /* @__PURE__ */ jsxRuntime.jsx(ChartContainer, { height, width, className, children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.LineChart, { data, margin: { top: 8, right: 8, left: 0, bottom: 0 }, children: [
-  cartesianChrome({ xKey, ...chrome }),
-  series.map((s, index) => {
-    const color = resolveSeriesColor(index, s.color);
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      recharts.Line,
-      {
-        type: "monotone",
-        dataKey: s.dataKey,
-        name: s.name ?? s.dataKey,
-        stroke: color,
-        strokeWidth: 2,
-        dot: { r: 3, fill: color, stroke: color },
-        activeDot: { r: 4 },
-        isAnimationActive: false
-      },
-      s.dataKey
-    );
-  })
-] }) });
-var BarChart = ({
-  data,
-  xKey,
-  series,
-  height,
-  width,
-  className,
-  stacked = false,
-  ...chrome
-}) => /* @__PURE__ */ jsxRuntime.jsx(ChartContainer, { height, width, className, children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.BarChart, { data, margin: { top: 8, right: 8, left: 0, bottom: 0 }, children: [
-  cartesianChrome({ xKey, ...chrome }),
-  series.map((s, index) => /* @__PURE__ */ jsxRuntime.jsx(
-    recharts.Bar,
-    {
-      dataKey: s.dataKey,
-      name: s.name ?? s.dataKey,
-      fill: resolveSeriesColor(index, s.color),
-      radius: stacked ? 0 : [4, 4, 0, 0],
-      stackId: stacked ? "stack" : void 0,
-      isAnimationActive: false
-    },
-    s.dataKey
-  ))
-] }) });
-var AreaChart = ({
-  data,
-  xKey,
-  series,
-  height,
-  width,
-  className,
-  stacked = false,
-  ...chrome
-}) => /* @__PURE__ */ jsxRuntime.jsx(ChartContainer, { height, width, className, children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.AreaChart, { data, margin: { top: 8, right: 8, left: 0, bottom: 0 }, children: [
-  cartesianChrome({ xKey, ...chrome }),
-  series.map((s, index) => {
-    const color = resolveSeriesColor(index, s.color);
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      recharts.Area,
-      {
-        type: "monotone",
-        dataKey: s.dataKey,
-        name: s.name ?? s.dataKey,
-        stroke: color,
-        fill: color,
-        fillOpacity: 0.15,
-        strokeWidth: 2,
-        stackId: stacked ? "stack" : void 0,
-        isAnimationActive: false
-      },
-      s.dataKey
-    );
-  })
-] }) });
-var PieChart = ({
-  data,
-  nameKey,
-  dataKey,
-  innerRadius = 0,
-  height,
-  width,
-  className,
-  showLegend = true,
-  showTooltip = true,
-  valueFormatter
-}) => /* @__PURE__ */ jsxRuntime.jsx(ChartContainer, { height, width, className, children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.PieChart, { children: [
-  showTooltip && /* @__PURE__ */ jsxRuntime.jsx(
-    ChartTooltip,
-    {
-      valueFormatter: valueFormatter ? (value) => formatValue(value, valueFormatter) : void 0
-    }
-  ),
-  showLegend && /* @__PURE__ */ jsxRuntime.jsx(recharts.Legend, { wrapperStyle: { fontSize: 11 } }),
-  /* @__PURE__ */ jsxRuntime.jsx(
-    recharts.Pie,
-    {
-      data,
-      nameKey,
-      dataKey,
-      innerRadius,
-      stroke: "rgb(var(--background))",
-      isAnimationActive: false,
-      children: data.map((datum, index) => /* @__PURE__ */ jsxRuntime.jsx(recharts.Cell, { fill: chartTokenColor(index) }, String(datum[nameKey] ?? index)))
-    }
-  )
-] }) });
-
-exports.AreaChart = AreaChart;
-exports.BarChart = BarChart;
-exports.ChartContainer = ChartContainer;
-exports.ChartTooltip = ChartTooltip;
-exports.ChartTooltipContent = ChartTooltipContent;
-exports.LineChart = LineChart;
-exports.PieChart = PieChart;
-exports.chartTokenColor = chartTokenColor;
-//# sourceMappingURL=charts.cjs.map
-//# sourceMappingURL=charts.cjs.map

package/dist/charts.cjs.map

@@ -1 +0,0 @@
-{"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":["extendTailwindMerge","clsx","jsx","ResponsiveContainer","jsxs","RechartsTooltip","Fragment","CartesianGrid","XAxis","YAxis","Legend","RechartsLineChart","Line","RechartsBarChart","Bar","RechartsAreaChart","Area","RechartsPieChart","Pie","Cell"],"mappings":"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","file":"charts.cjs","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"]}

package/dist/charts.d.cts

@@ -1,181 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ComponentProps, ReactElement } from 'react';
-import { Tooltip } from 'recharts';
-
-/** A length that recharts' `<ResponsiveContainer>` accepts: px number or `"NN%"`. */
-type ChartDimension = number | `${number}%`;
-type ChartContainerProps = Omit<ComponentProps<'div'>, 'children'> & {
-    /**
-     * Height as a px number or percentage string. Charts have no intrinsic
-     * height, so a container needs one either here or from a sized ancestor.
-     * Defaults to 300.
-     */
-    height?: ChartDimension;
-    /** Width as a px number or percentage. Defaults to `"100%"` (fills parent). */
-    width?: ChartDimension;
-    /** A single recharts chart element (`<LineChart>`, `<BarChart>`, …). */
-    children: ReactElement;
-};
-/**
- * Responsive, brand-themed frame for a chart. Wraps the chart in recharts'
- * `<ResponsiveContainer>` and applies the semantic-token chrome (axis text,
- * grid, cursor) through CSS so every chart inside inherits it. Sizing is
- * intrinsic: give it a `height` (default 300) and it fills the parent width.
- */
-declare const ChartContainer: ({ height, width, className, children, ...props }: ChartContainerProps) => react_jsx_runtime.JSX.Element;
-
-type TooltipPayloadEntry = {
-    name?: string | number;
-    value?: string | number;
-    color?: string;
-    dataKey?: string | number;
-};
-type ChartTooltipContentProps = {
-    active?: boolean;
-    label?: string | number;
-    payload?: TooltipPayloadEntry[];
-    /** Format a value for display (e.g. currency, percentage). */
-    valueFormatter?: (value: string | number, name: string) => string;
-    className?: string;
-};
-/**
- * Brand-themed tooltip body. Surfaces (background, border, text) resolve from
- * semantic tokens, and each series swatch reuses the recharts-provided series
- * `color` (already a `--chart-*` token from this package's charts).
- */
-declare const ChartTooltipContent: ({ active, label, payload, valueFormatter, className, }: ChartTooltipContentProps) => react_jsx_runtime.JSX.Element | null;
-type ChartTooltipProps = ComponentProps<typeof Tooltip> & {
-    valueFormatter?: (value: string | number, name: string) => string;
-};
-/**
- * Drop-in recharts `<Tooltip>` pre-wired to render {@link ChartTooltipContent}.
- * Each chart mounts one by default; pass `showTooltip={false}` on the chart to omit.
- */
-declare const ChartTooltip: ({ valueFormatter, ...props }: ChartTooltipProps) => react_jsx_runtime.JSX.Element;
-
-/** Number of the semantic chart token (`1`–`5`) a series maps to. */
-type ChartColorToken = 1 | 2 | 3 | 4 | 5;
-/**
- * The CSS color for a chart token. `index` is 0-based (series position); it
- * wraps around the five-slot palette so any number of series stays on-brand.
- */
-declare const chartTokenColor: (index: number) => string;
-
-/** A single row of chart data — an object keyed by the axis + series keys. */
-type ChartDatum = Record<string, string | number | null | undefined>;
-/**
- * One plotted series (a line, bar, or area). Its color comes from the semantic
- * chart palette: by series order, or pinned to a specific token via `color`.
- */
-type ChartSeries = {
-    /** Key into each datum for this series' value. */
-    dataKey: string;
-    /** Human label for legend/tooltip. Defaults to `dataKey`. */
-    name?: string;
-    /** Pin to a specific palette token (1–5). Defaults to the series position. */
-    color?: ChartColorToken;
-};
-/** Props shared by the cartesian charts (line / bar / area). */
-type CartesianChartProps = {
-    /** The rows to plot. */
-    data: ChartDatum[];
-    /** Key into each datum for the category (x) axis. */
-    xKey: string;
-    /** Series to plot. */
-    series: ChartSeries[];
-    /** Height as a px number or percentage. Defaults to 300. */
-    height?: ChartDimension;
-    /** Width as a px number or percentage. Defaults to `"100%"`. */
-    width?: ChartDimension;
-    /** Show the cartesian background grid. Defaults to `true`. */
-    showGrid?: boolean;
-    /** Show the value (y) axis. Defaults to `true`. */
-    showYAxis?: boolean;
-    /** Show a legend below the chart. Defaults to `false`. */
-    showLegend?: boolean;
-    /** Show the hover tooltip. Defaults to `true`. */
-    showTooltip?: boolean;
-    /** Format a series value for the axis and tooltip. */
-    valueFormatter?: (value: number) => string;
-    className?: string;
-};
-
-/**
- * A themed multi-series line chart. Each series' color comes from the semantic
- * `--chart-*` palette (by order, or pinned via `series[].color`), which
- * follows the active color scheme and the active brand's `colors.chart` when it
- * defines one. Wrap-free — mounts its own {@link ChartContainer}.
- *
- * @example
- * <LineChart
- *   data={data}
- *   xKey="month"
- *   series={[{ dataKey: 'revenue', name: 'Revenue' }, { dataKey: 'cost' }]}
- * />
- */
-declare const LineChart: ({ data, xKey, series, height, width, className, ...chrome }: CartesianChartProps) => react_jsx_runtime.JSX.Element;
-
-type BarChartProps = CartesianChartProps & {
-    /** Stack the series into a single bar per category. Defaults to grouped. */
-    stacked?: boolean;
-};
-/**
- * A themed multi-series bar chart. Series colors come from the semantic
- * `--chart-*` palette (by order, or pinned via `series[].color`), which
- * follows the active color scheme and the active brand's `colors.chart` when it
- * defines one. Pass `stacked` to stack the series instead of grouping them.
- *
- * @example
- * <BarChart data={data} xKey="month" series={[{ dataKey: 'revenue' }]} />
- */
-declare const BarChart: ({ data, xKey, series, height, width, className, stacked, ...chrome }: BarChartProps) => react_jsx_runtime.JSX.Element;
-
-type AreaChartProps = CartesianChartProps & {
-    /** Stack the series into a cumulative area. Defaults to overlaid. */
-    stacked?: boolean;
-};
-/**
- * A themed multi-series area chart. Each series is stroked and softly filled
- * from the semantic `--chart-*` palette (by order, or pinned via
- * `series[].color`), which follows the active color scheme and the active
- * brand's `colors.chart` when it defines one. Pass `stacked` to stack the
- * series cumulatively.
- *
- * @example
- * <AreaChart data={data} xKey="month" series={[{ dataKey: 'revenue' }]} />
- */
-declare const AreaChart: ({ data, xKey, series, height, width, className, stacked, ...chrome }: AreaChartProps) => react_jsx_runtime.JSX.Element;
-
-type PieChartProps = {
-    /** The rows to plot — one sector per row. */
-    data: ChartDatum[];
-    /** Key into each datum for the sector label. */
-    nameKey: string;
-    /** Key into each datum for the sector value. */
-    dataKey: string;
-    /** Render as a donut with a hole of this inner radius (px or %). */
-    innerRadius?: ChartDimension;
-    /** Height as a px number or percentage. Defaults to 300. */
-    height?: ChartDimension;
-    /** Width as a px number or percentage. Defaults to `"100%"`. */
-    width?: ChartDimension;
-    /** Show a legend below the chart. Defaults to `true`. */
-    showLegend?: boolean;
-    /** Show the hover tooltip. Defaults to `true`. */
-    showTooltip?: boolean;
-    /** Format a sector value for the tooltip. */
-    valueFormatter?: (value: number) => string;
-    className?: string;
-};
-/**
- * A themed pie / donut chart. Each sector cycles through the semantic
- * `--chart-*` palette, which follows the active color scheme and the
- * active brand's `colors.chart` when it defines one. Pass `innerRadius` to make
- * a donut.
- *
- * @example
- * <PieChart data={data} nameKey="engine" dataKey="rows" innerRadius="60%" />
- */
-declare const PieChart: ({ data, nameKey, dataKey, innerRadius, height, width, className, showLegend, showTooltip, valueFormatter, }: PieChartProps) => react_jsx_runtime.JSX.Element;
-
-export { AreaChart, type AreaChartProps, BarChart, type BarChartProps, type CartesianChartProps, type ChartColorToken, ChartContainer, type ChartContainerProps, type ChartDatum, type ChartDimension, type ChartSeries, ChartTooltip, ChartTooltipContent, type ChartTooltipProps, LineChart, PieChart, type PieChartProps, chartTokenColor };

package/dist/constants-D3gaMY-W.d.cts

@@ -1,39 +0,0 @@
-declare const CHUNK_TYPE: {
-    readonly UNCHANGED: "unchanged";
-    readonly ADDED: "added";
-    readonly REMOVED: "removed";
-};
-type ChunkType = (typeof CHUNK_TYPE)[keyof typeof CHUNK_TYPE];
-type DiffChunk = {
-    type: ChunkType;
-    value: string;
-    /** 1-indexed start line in the old (left) text */
-    oldStart: number;
-    /** 1-indexed end line in the old (left) text */
-    oldEnd: number;
-    /** 1-indexed start line in the new (right) text */
-    newStart: number;
-    /** 1-indexed end line in the new (right) text */
-    newEnd: number;
-};
-/**
- * A paired conflict: adjacent REMOVED + ADDED chunks from diffLines,
- * representing a section that was modified. If only one side exists,
- * the other is empty (pure insertion or deletion).
- */
-type MergeConflict = {
-    id: string;
-    oldValue: string;
-    oldStartLine: number;
-    oldEndLine: number;
-    newValue: string;
-    newStartLine: number;
-    newEndLine: number;
-};
-declare const CHANGE_CLASS: {
-    readonly SAFE: "safe";
-    readonly CONFLICT: "conflict";
-};
-type ChangeClassification = (typeof CHANGE_CLASS)[keyof typeof CHANGE_CLASS];
-
-export type { ChangeClassification as C, DiffChunk as D, MergeConflict as M };