@keboola/design 3.2.3 → 4.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keboola/design",
-  "version": "3.2.3",
+  "version": "4.0.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",
@@ -18,6 +18,9 @@
       "markdown-editor": [
         "./dist/markdown-editor.d.ts"
       ],
+      "editors": [
+        "./dist/editors.d.ts"
+      ],
       "icons": [
         "./dist/icons.d.ts"
       ],
@@ -59,6 +62,16 @@
         "default": "./dist/markdown-editor.cjs"
       }
     },
+    "./editors": {
+      "import": {
+        "types": "./dist/editors.d.ts",
+        "default": "./dist/editors.js"
+      },
+      "require": {
+        "types": "./dist/editors.d.cts",
+        "default": "./dist/editors.cjs"
+      }
+    },
     "./icons": {
       "import": {
         "types": "./dist/icons.d.ts",
@@ -108,41 +121,12 @@
     "shadcn",
     "components"
   ],
-  "scripts": {
-    "dev": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "transit": "yarn build",
-    "build": "yarn build:js && yarn build:css",
-    "build:js": "tsup",
-    "build:css": "tailwindcss --postcss -c tailwind.config.js -i src/styles.css -o dist/styles.css --minify",
-    "build:check": "attw --pack . --exclude-entrypoints ./styles ./styles/compiled",
-    "prepublishOnly": "yarn build && yarn build:check",
-    "test": "vitest run --config vite.config.ts --passWithNoTests --reporter=dot",
-    "test:stories": "vitest run --config vitest.config.ts",
-    "test:stories:coverage": "vitest run --config vitest.config.ts --coverage",
-    "test:visual": "playwright test -c playwright.visual.config.ts",
-    "test:visual:update": "playwright test -c playwright.visual.config.ts --update-snapshots",
-    "lint": "yarn lint:format && yarn lint:oxlint && yarn lint:design",
-    "lint:fix": "oxlint --fix . && oxfmt",
-    "knip:check": "yarn --cwd ../.. exec knip --workspace packages/design",
-    "knip:fix": "yarn --cwd ../.. exec knip --workspace packages/design --fix-type types,exports,files",
-    "lint:format": "oxfmt --check",
-    "lint:oxlint": "oxlint . --quiet",
-    "lint:design": "designmd lint DESIGN.md",
-    "ci-checks": "yarn check:api",
-    "generate:api": "tsx scripts/generate-component-api.ts",
-    "check:api": "tsx scripts/generate-component-api.ts --check",
-    "type-check": "tsc"
-  },
   "engines": {
     "node": "24.x"
   },
   "devDependencies": {
     "@arethetypeswrong/cli": "^0.18.2",
     "@google/design.md": "0.2.0",
-    "@keboola/oxlint-config": "workspace:^",
-    "@keboola/postcss-config": "workspace:^",
-    "@keboola/tsconfig": "workspace:^",
     "@playwright/test": "1.60.0",
     "@storybook/addon-a11y": "10.2.19",
     "@storybook/addon-docs": "^10.2.19",
@@ -161,16 +145,19 @@
     "oxfmt": "^0.44.0",
     "oxlint": "^1.56.0",
     "playwright": "1.60.0",
-    "react": "^19.2.6",
+    "react": "^19.2.7",
     "react-docgen-typescript": "^2.2.2",
-    "react-dom": "^19.2.6",
+    "react-dom": "^19.2.7",
     "storybook": "^10.2.19",
     "tailwindcss": "^3.4.17",
     "tsup": "^8.5.1",
     "tsx": "^4.19.4",
     "typescript": "^6.0.3",
     "vite": "^8.0.16",
-    "vitest": "^4.1.8"
+    "vitest": "^4.1.8",
+    "@keboola/postcss-config": "^0.1.1",
+    "@keboola/oxlint-config": "^1.0.0",
+    "@keboola/tsconfig": "^0.1.2"
   },
   "peerDependencies": {
     "@testing-library/react": "^16.3.2",
@@ -249,5 +236,30 @@
     "react-textarea-autosize": "^8.5.9",
     "sonner": "^2.0.7",
     "tailwind-merge": "^2.6.0"
+  },
+  "scripts": {
+    "dev": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "transit": "pnpm build",
+    "build": "pnpm build:js && pnpm build:css",
+    "build:js": "tsup",
+    "build:css": "tailwindcss --postcss -c tailwind.config.js -i src/styles.css -o dist/styles.css --minify",
+    "build:check": "attw --pack . --exclude-entrypoints ./styles ./styles/compiled",
+    "test": "vitest run --config vite.config.ts --passWithNoTests --reporter=dot",
+    "test:stories": "vitest run --config vitest.config.ts",
+    "test:stories:coverage": "vitest run --config vitest.config.ts --coverage",
+    "test:visual": "playwright test -c playwright.visual.config.ts",
+    "test:visual:update": "playwright test -c playwright.visual.config.ts --update-snapshots",
+    "lint": "pnpm lint:format && pnpm lint:oxlint && pnpm lint:design",
+    "lint:fix": "oxlint --fix . && oxfmt",
+    "knip:check": "pnpm --dir ../.. exec knip --workspace packages/design",
+    "knip:fix": "pnpm --dir ../.. exec knip --workspace packages/design --fix-type types,exports,files",
+    "lint:format": "oxfmt --check",
+    "lint:oxlint": "oxlint . --quiet",
+    "lint:design": "designmd lint DESIGN.md",
+    "ci-checks": "pnpm check:api",
+    "generate:api": "tsx scripts/generate-component-api.ts",
+    "check:api": "tsx scripts/generate-component-api.ts --check",
+    "type-check": "tsc"
   }
-}
+}

package/src/styles.css

@@ -97,6 +97,25 @@
   --color-sidebar-ring: 31 143 255; /* #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
+   `data-[argo=true]:tw-text-foreground` text 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 */
+}
+
 @layer base {
   @font-face {
     font-family: 'Inter';