@krizaka/ui 1.2.0 → 2.0.0-beta.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@krizaka/ui",
-  "version": "1.2.0",
-  "description": "The Krizaka brand layer shared by every product: the animated marks (Krizaka, Orazaka, Orochia) and the Krizaka motion signature, in CSS and React.",
+  "version": "2.0.0-beta.0",
+  "description": "The Krizaka front-end platform's components: the primitives (button, badge, avatar, field, theme, countdown…) on the semantic --kz-* tokens, the animated marks (Krizaka, Orazaka, Orochia) and the motion signature — web and /native.",
   "keywords": [
     "krizaka",
     "orazaka",
@@ -11,7 +11,10 @@
     "motion",
     "animation",
     "design-system",
-    "brand"
+    "brand",
+    "primitives",
+    "tailwindcss",
+    "components"
   ],
   "homepage": "https://github.com/krizaka/krizaka-ui#readme",
   "bugs": "https://github.com/krizaka/krizaka-ui/issues",
@@ -31,15 +34,61 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
+    "./cn": {
+      "types": "./dist/cn.d.ts",
+      "import": "./dist/cn.js"
+    },
+    "./slot": {
+      "types": "./dist/slot.d.ts",
+      "import": "./dist/slot.js"
+    },
+    "./button": {
+      "types": "./dist/button.d.ts",
+      "import": "./dist/button.js"
+    },
+    "./badge": {
+      "types": "./dist/badge.d.ts",
+      "import": "./dist/badge.js"
+    },
+    "./field": {
+      "types": "./dist/field.d.ts",
+      "import": "./dist/field.js"
+    },
+    "./skeleton": {
+      "types": "./dist/skeleton.d.ts",
+      "import": "./dist/skeleton.js"
+    },
+    "./empty-state": {
+      "types": "./dist/empty-state.d.ts",
+      "import": "./dist/empty-state.js"
+    },
+    "./spinner": {
+      "types": "./dist/spinner.d.ts",
+      "import": "./dist/spinner.js"
+    },
+    "./avatar": {
+      "types": "./dist/avatar.d.ts",
+      "import": "./dist/avatar.js"
+    },
+    "./theme": {
+      "types": "./dist/theme.d.ts",
+      "import": "./dist/theme.js"
+    },
+    "./countdown": {
+      "types": "./dist/countdown.d.ts",
+      "import": "./dist/countdown.js"
+    },
     "./motion.css": "./dist/motion.css",
-    "./package.json": "./package.json",
+    "./tailwind.css": "./tailwind.css",
     "./native": {
       "types": "./dist/native.d.ts",
       "import": "./dist/native.js"
-    }
+    },
+    "./package.json": "./package.json"
   },
   "files": [
     "dist",
+    "tailwind.css",
     "README.md",
     "LICENSE"
   ],
@@ -47,19 +96,25 @@
     "*.css"
   ],
   "peerDependencies": {
+    "@krizaka/tailwind": ">=2.0.0-beta.0",
     "react": ">=18",
     "react-dom": ">=18",
     "react-native": ">=0.76",
-    "react-native-svg": ">=15"
+    "react-native-svg": ">=15",
+    "tailwindcss": "^4.1"
   },
   "devDependencies": {
     "@arethetypeswrong/cli": "^0.18.5",
     "@size-limit/preset-small-lib": "^14.2.0",
+    "@storybook/react-vite": "10.6.1",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.7",
     "@types/node": "^22.15.0",
     "@types/react": "^19.2.0",
     "@types/react-dom": "^19.2.0",
+    "axe-core": "^4.14.0",
+    "eslint": "^9.39.0",
     "happy-dom": "^20.0.0",
     "publint": "^0.3.25",
     "react": "^19.2.0",
@@ -67,9 +122,12 @@
     "react-native": "^0.86.3",
     "react-native-svg": "^15.15.4",
     "size-limit": "^14.2.0",
+    "storybook": "10.6.1",
+    "tailwindcss": "^4.3.3",
     "tsup": "^8.5.1",
     "typescript": "^5.9.0",
-    "vitest": "^4.1.11"
+    "vitest": "^4.1.11",
+    "@krizaka/config": "0.1.0"
   },
   "engines": {
     "node": ">=20"
@@ -78,6 +136,9 @@
     "access": "public"
   },
   "peerDependenciesMeta": {
+    "@krizaka/tailwind": {
+      "optional": true
+    },
     "react-dom": {
       "optional": true
     },
@@ -86,6 +147,9 @@
     },
     "react-native-svg": {
       "optional": true
+    },
+    "tailwindcss": {
+      "optional": true
     }
   },
   "size-limit": [
@@ -100,14 +164,125 @@
       "path": "dist/native.js",
       "limit": "6 kB",
       "gzip": true
+    },
+    {
+      "name": "./cn (the shared runtime: clsx + tailwind-variants and its merge engine)",
+      "path": "dist/cn.js",
+      "limit": "14 kB",
+      "gzip": true
+    },
+    {
+      "name": "./button",
+      "path": "dist/button.js",
+      "limit": "3 kB",
+      "gzip": true,
+      "ignore": [
+        "tailwind-variants",
+        "clsx"
+      ]
+    },
+    {
+      "name": "./badge",
+      "path": "dist/badge.js",
+      "limit": "1 kB",
+      "gzip": true,
+      "ignore": [
+        "tailwind-variants",
+        "clsx"
+      ]
+    },
+    {
+      "name": "./avatar",
+      "path": "dist/avatar.js",
+      "limit": "6 kB",
+      "gzip": true,
+      "ignore": [
+        "tailwind-variants",
+        "clsx"
+      ]
+    },
+    {
+      "name": "./field",
+      "path": "dist/field.js",
+      "limit": "1.5 kB",
+      "gzip": true,
+      "ignore": [
+        "tailwind-variants",
+        "clsx"
+      ]
+    },
+    {
+      "name": "./theme",
+      "path": "dist/theme.js",
+      "limit": "2 kB",
+      "gzip": true,
+      "ignore": [
+        "tailwind-variants",
+        "clsx"
+      ]
+    },
+    {
+      "name": "./countdown",
+      "path": "dist/countdown.js",
+      "limit": "2 kB",
+      "gzip": true,
+      "ignore": [
+        "tailwind-variants",
+        "clsx"
+      ]
+    },
+    {
+      "name": "./skeleton",
+      "path": "dist/skeleton.js",
+      "limit": "1 kB",
+      "gzip": true,
+      "ignore": [
+        "tailwind-variants",
+        "clsx"
+      ]
+    },
+    {
+      "name": "./spinner",
+      "path": "dist/spinner.js",
+      "limit": "1 kB",
+      "gzip": true,
+      "ignore": [
+        "tailwind-variants",
+        "clsx"
+      ]
+    },
+    {
+      "name": "./empty-state",
+      "path": "dist/empty-state.js",
+      "limit": "1 kB",
+      "gzip": true,
+      "ignore": [
+        "tailwind-variants",
+        "clsx"
+      ]
+    },
+    {
+      "name": "./slot",
+      "path": "dist/slot.js",
+      "limit": "2 kB",
+      "gzip": true,
+      "ignore": [
+        "tailwind-variants",
+        "clsx"
+      ]
     }
   ],
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "radix-ui": "^1.7.0",
+    "tailwind-variants": "^3.3.1"
+  },
   "scripts": {
-    "build": "tsup && node -e \"require('node:fs').copyFileSync('src/motion.css','dist/motion.css')\"",
-    "lint": "tsc --noEmit --noUnusedParameters --noFallthroughCasesInSwitch --noImplicitReturns",
+    "build": "node -e \"require('node:fs').rmSync('dist',{recursive:true,force:true})\" && tsup && node -e \"require('node:fs').copyFileSync('src/motion.css','dist/motion.css')\"",
+    "lint": "eslint . --max-warnings 0 && tsc --noEmit --noUnusedParameters --noFallthroughCasesInSwitch --noImplicitReturns",
     "typecheck": "tsc --noEmit",
     "test": "vitest run",
     "size": "size-limit",
-    "publint": "publint && attw --pack . --profile esm-only --exclude-entrypoints ./motion.css"
+    "publint": "publint && attw --pack . --profile esm-only --exclude-entrypoints ./motion.css ./tailwind.css"
   }
 }

package/tailwind.css

@@ -0,0 +1,3 @@
+/* @krizaka/ui/tailwind.css — imported by the app after the preset (@import "@krizaka/tailwind"):
+   Tailwind generates the classes the primitives use, read from the built package. */
+@source "./dist";