@keboola/design 4.4.0 → 5.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keboola/design",
-  "version": "4.4.0",
+  "version": "5.1.0",
   "description": "Keboola UI platform design system — shadcn-aligned React primitives, Keboola-branded blocks, and the form bindings built on TanStack Form.",
   "license": "MIT",
   "type": "module",
@@ -12,6 +12,9 @@
   "types": "./dist/index.d.ts",
   "typesVersions": {
     "*": {
+      "charts": [
+        "./dist/charts.d.ts"
+      ],
       "mermaid": [
         "./dist/mermaid.d.ts"
       ],
@@ -45,6 +48,16 @@
     },
     "./styles": "./src/styles.css",
     "./styles/compiled": "./dist/styles.css",
+    "./charts": {
+      "import": {
+        "types": "./dist/charts.d.ts",
+        "default": "./dist/charts.js"
+      },
+      "require": {
+        "types": "./dist/charts.d.cts",
+        "default": "./dist/charts.cjs"
+      }
+    },
     "./mermaid": {
       "import": {
         "types": "./dist/mermaid.d.ts",
@@ -141,6 +154,7 @@
     "@arethetypeswrong/cli": "^0.18.2",
     "@google/design.md": "0.2.0",
     "@playwright/test": "1.60.0",
+    "@size-limit/file": "12.1.0",
     "@storybook/addon-a11y": "10.2.19",
     "@storybook/addon-docs": "^10.2.19",
     "@storybook/addon-links": "^10.2.19",
@@ -152,6 +166,7 @@
     "@testing-library/user-event": "^14.6.1",
     "@types/react": "^19.2.15",
     "@types/react-dom": "^19.2.3",
+    "@typescript/native": "npm:typescript@^7.0.2",
     "@vitejs/plugin-react": "^6.0.0",
     "@vitest/browser": "4.1.8",
     "@vitest/browser-playwright": "4.1.8",
@@ -164,16 +179,17 @@
     "react": "^19.2.7",
     "react-docgen-typescript": "^2.2.2",
     "react-dom": "^19.2.7",
+    "size-limit": "12.1.0",
     "storybook": "^10.2.19",
     "tailwindcss": "^3.4.17",
     "tsup": "^8.5.1",
     "tsx": "^4.19.4",
-    "typescript": "^6.0.3",
+    "typescript": "npm:@typescript/typescript6@^6.0.2",
     "vite": "^8.0.16",
     "vitest": "^4.1.8",
-    "@keboola/oxlint-config": "^2.0.1",
-    "@keboola/tsconfig": "^0.1.2",
-    "@keboola/postcss-config": "^0.1.1"
+    "@keboola/oxlint-config": "^5.0.0",
+    "@keboola/postcss-config": "^0.1.1",
+    "@keboola/tsconfig": "^0.2.0"
   },
   "peerDependencies": {
     "@testing-library/react": "^16.3.2",
@@ -197,12 +213,8 @@
     "@codemirror/legacy-modes": "^6.5.3",
     "@codemirror/lint": "^6.9.7",
     "@codemirror/merge": "^6.12.2",
-    "@codemirror/state": "^6.7.0",
-    "@codemirror/view": "^6.43.4",
-    "@keboola/brand-registry": "^1.1.0",
-    "@keboola/codemirror-lang-sfsql": "^1.2.1",
-    "@keboola/codemirror-lang-sql": "^0.2.1",
-    "@keboola/tailwind-config": "^0.3.0",
+    "@codemirror/state": "^6.7.1",
+    "@codemirror/view": "^6.43.6",
     "@lexical/code": "^0.42.0",
     "@lexical/link": "^0.42.0",
     "@lexical/list": "^0.42.0",
@@ -236,8 +248,8 @@
     "@rjsf/validator-ajv8": "^6.5.2",
     "@tanstack/react-form": "^1.29.1",
     "@testing-library/jest-dom": "^6.8.0",
-    "@uiw/codemirror-theme-github": "^4.25.2",
-    "@uiw/react-codemirror": "^4.25.7",
+    "@uiw/codemirror-theme-github": "^4.25.10",
+    "@uiw/react-codemirror": "^4.25.10",
     "beautiful-mermaid": "^1.1.3",
     "boring-avatars": "^2.0.4",
     "class-variance-authority": "^0.7.1",
@@ -250,12 +262,19 @@
     "lucide-react": "^1.17.0",
     "mermaid": "^11.15.0",
     "node-diff3": "^3.2.0",
-    "react-day-picker": "^9.13.0",
+    "react-day-picker": "^10.0.1",
     "react-dropzone": "^14.2.3",
-    "react-resizable-panels": "^3.0.4",
+    "react-markdown": "^10.1.0",
+    "react-resizable-panels": "^4.12.1",
     "react-textarea-autosize": "^8.5.9",
+    "recharts": "^3.0.0",
+    "remark-gfm": "^4.0.0",
     "sonner": "^2.0.7",
-    "tailwind-merge": "^2.6.0"
+    "tailwind-merge": "^2.6.0",
+    "@keboola/brand-registry": "^1.3.0",
+    "@keboola/codemirror-lang-sfsql": "^1.2.1",
+    "@keboola/tailwind-config": "^0.6.0",
+    "@keboola/codemirror-lang-sql": "^0.2.2"
   },
   "scripts": {
     "dev": "storybook dev -p 6006",
@@ -277,7 +296,8 @@
     "lint:format": "oxfmt --check",
     "lint:oxlint": "oxlint . --quiet",
     "lint:design": "designmd lint DESIGN.md",
-    "ci-checks": "pnpm check:api",
+    "ci-checks": "pnpm check:api && pnpm size",
+    "size": "size-limit",
     "generate:api": "tsx scripts/generate-component-api.ts",
     "check:api": "tsx scripts/generate-component-api.ts --check",
     "type-check": "tsc"

package/src/styles.css

@@ -40,7 +40,8 @@
   /* Border / Input / Ring */
   --color-border: 229 231 235; /* #e5e7eb */
   --color-input: 203 213 225; /* #cbd5e1 */
-  --color-ring: 31 143 255; /* #1f8fff — focus ring (brand blue) */
+  --color-ring: var(--color-primary); /* follows brand primary (default #1f8fff) */
+  --color-ring-offset: 255 255 255; /* #ffffff — focus-ring offset gap */
 
   /* Chart — categorical palette (brand-derived, mutually distinct). */
   --color-chart-1: 31 143 255; /* #1f8fff */
@@ -49,29 +50,89 @@
   --color-chart-4: 245 147 0; /* #f59300 */
   --color-chart-5: 237 94 223; /* #ed5edf */
 
-  /* Status — categorical (meaning-encoding), tunable per color scheme. */
+  /* Status — themeable semantic tokens; defaults ship AA-legible as text/icon on their own tint. */
   --color-destructive: 220 38 38; /* #dc2626 */
   --color-destructive-foreground: 255 255 255; /* #ffffff */
-  --color-success: 31 157 97; /* #1f9d61 */
+  --color-success: 24 122 76; /* #187a4c — AA-legible (≥4.5:1) as text/icon on its tint */
   --color-success-foreground: 255 255 255; /* #ffffff */
-  --color-warning: 245 147 0; /* #f59300 */
-  --color-warning-foreground: 82 49 0; /* #523100 — dark text for legibility on amber */
-  --color-info: 31 143 255; /* #1f8fff */
+  --color-warning: 138 82 16; /* #8a5210 — AA-legible as text/icon on its tint */
+  --color-warning-foreground: 255 255 255; /* #ffffff — token is now dark, so solid fills take white text */
+  --color-info: 22 104 196; /* #1668c4 — AA-legible as text/icon on its tint (decoupled from brand blue) */
   --color-info-foreground: 255 255 255; /* #ffffff */
 
   /* Muted */
   --color-muted: 241 245 249; /* #f1f5f9 */
   --color-muted-foreground: 100 116 139; /* #64748b */
 
+  /* Skeleton placeholder fill — a touch darker than `muted` so the loading
+     block stays perceptible on white cards / off-white background (muted is
+     too close to both), and the shimmer highlight reads against it. */
+  --color-skeleton: 219 225 235; /* #dbe1eb */
+
   /* Sidebar */
   --color-sidebar: 255 255 255; /* #ffffff */
   --color-sidebar-foreground: 30 41 59; /* #1e293b */
-  --color-sidebar-primary: 31 143 255; /* #1f8fff */
+  --color-sidebar-primary: var(--color-primary); /* follows brand primary (default #1f8fff) */
   --color-sidebar-primary-foreground: 255 255 255; /* #ffffff */
   --color-sidebar-accent: 219 234 254; /* #dbeafe */
   --color-sidebar-accent-foreground: 30 41 59; /* #1e293b */
   --color-sidebar-border: 229 231 235; /* #e5e7eb */
-  --color-sidebar-ring: 31 143 255; /* #1f8fff */
+  --color-sidebar-ring: var(--color-primary); /* follows brand primary (default #1f8fff) */
+
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-sm: 0.25rem;
+
+  /* Elevation — a brand overrides via `theme.shadows`; defaults match the stock
+     Tailwind shadow scale so unset brands render identically. `lift` is a
+     stronger hover/raised shadow. */
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --shadow-lift: 0 10px 30px -12px rgb(0 0 0 / 0.28), 0 2px 6px rgb(0 0 0 / 0.06);
+  /* Raised-surface elevation for Card / Search. The light value is a pale
+     blue-gray tuned for white backgrounds; the dark scheme overrides it below
+     with a black shadow so it doesn't read as a light halo on dark surfaces. */
+  --shadow-raised: 0 2px 6px 0 rgb(100 135 153 / 0.13);
+
+  /* Typography pairing — display + mono faces; a brand overrides via
+     `theme.typography.fontDisplay` / `fontMono`. Display defaults to the body
+     face (`--font-sans`), then the canonical Inter stack, so unset brands keep
+     a single typeface (not a generic `sans-serif`). */
+  --font-display: var(
+    --font-sans,
+    'Inter',
+    system-ui,
+    -apple-system,
+    'Segoe UI',
+    Roboto,
+    'Helvetica Neue',
+    Arial,
+    'Noto Sans',
+    'Liberation Sans',
+    sans-serif,
+    'Apple Color Emoji',
+    'Segoe UI Emoji',
+    'Segoe UI Symbol',
+    'Noto Color Emoji'
+  );
+  --font-mono:
+    'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', monospace;
+
+  /* Density — semantic spacing a brand can shift via `theme.spacing`. */
+  --space-gutter: 1.5rem;
+  --space-inset: 1.5rem;
+
+  /* Motion — brand overrides via `theme.motion`. */
+  --motion-duration: 200ms;
+  --motion-easing: cubic-bezier(0.2, 0.7, 0.2, 1);
+
+  /* Brand gradient — defaults to a primary→accent sweep; override via `theme.gradient`. */
+  --gradient-brand: linear-gradient(
+    135deg,
+    rgb(var(--color-primary)),
+    rgb(var(--color-accent, var(--color-primary)))
+  );
 }
 
 /* Dark mode (Graphite) — Keboola-blue accent, not reachable until the theme toggle ships. */
@@ -101,7 +162,8 @@
   /* Border / Input / Ring */
   --color-border: 52 53 62; /* #34353e */
   --color-input: 60 61 71; /* #3c3d47 */
-  --color-ring: 31 143 255; /* #1f8fff — focus ring (brand blue) */
+  --color-ring: var(--color-primary); /* follows brand primary (default #1f8fff) */
+  --color-ring-offset: 19 19 23; /* #131317 — focus-ring offset gap (dark background) */
 
   /* Chart — categorical palette (brand-derived, lightened for dark surfaces). */
   --color-chart-1: 92 173 255; /* #5cadff */
@@ -110,7 +172,7 @@
   --color-chart-4: 255 190 92; /* #ffbe5c */
   --color-chart-5: 242 140 232; /* #f28ce8 */
 
-  /* Status — categorical (meaning-encoding), tuned for dark surfaces. */
+  /* Status — themeable semantic tokens, tuned lighter for dark surfaces. */
   --color-destructive: 229 72 77; /* #e5484d */
   --color-destructive-foreground: 255 255 255; /* #ffffff */
   --color-success: 62 207 127; /* #3ecf7f */
@@ -124,34 +186,23 @@
   --color-muted: 38 38 45; /* #26262d */
   --color-muted-foreground: 141 144 153; /* #8d9099 */
 
+  /* Skeleton — lighter than `muted` so it stays visible on both the dark
+     background and the (lighter) card surface. */
+  --color-skeleton: 52 53 62; /* #34353e */
+
   /* Sidebar */
   --color-sidebar: 14 14 18; /* #0e0e12 */
   --color-sidebar-foreground: 229 230 236; /* #e5e6ec */
-  --color-sidebar-primary: 31 143 255; /* #1f8fff */
+  --color-sidebar-primary: var(--color-primary); /* follows brand primary (default #1f8fff) */
   --color-sidebar-primary-foreground: 255 255 255; /* #ffffff */
   --color-sidebar-accent: 38 38 45; /* #26262d */
   --color-sidebar-accent-foreground: 229 230 236; /* #e5e6ec */
   --color-sidebar-border: 48 49 57; /* #303139 */
-  --color-sidebar-ring: 31 143 255; /* #1f8fff */
-}
+  --color-sidebar-ring: var(--color-primary); /* follows brand primary (default #1f8fff) */
 
-/* Alert variant tints are categorical light fills (e.g. error-100) that don't
-   flip via the semantic tokens above, so they need dark-mode equivalents. Scoped
-   to the alert group class — NOT bare [data-variant], which Toast/Badge/Button/
-   Select also set. `[data-theme='dark']` never activates for keboola-legacy
-   (light-only), so this is inert for kbc-ui. Pairs with AlertRoot's
-   brand-driven `tw-text-foreground` text (argo brands) so both bg and text flip. */
-[data-theme='dark'] [class~='tw-group/alert'][data-variant='error'] {
-  background-color: rgb(51 22 25); /* #331619 */
-}
-[data-theme='dark'] [class~='tw-group/alert'][data-variant='warning'] {
-  background-color: rgb(51 36 15); /* #33240f */
-}
-[data-theme='dark'] [class~='tw-group/alert'][data-variant='success'] {
-  background-color: rgb(20 42 28); /* #142a1c */
-}
-[data-theme='dark'] [class~='tw-group/alert'][data-variant='info'] {
-  background-color: rgb(21 37 53); /* #152535 */
+  /* Raised-surface elevation — black shadow instead of the light-tuned pale
+     blue-gray, which reads as a halo around Card / Search on dark surfaces. */
+  --shadow-raised: 0 2px 6px 0 rgb(0 0 0 / 0.4);
 }
 
 @layer base {