@jcsoftdev/ui 0.1.6 → 0.2.0

package/icons/svg/scissors.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <circle cx="6" cy="6" r="3" />
+  <path d="M8.12 8.12 12 12" />
+  <path d="M20 4 8.12 15.88" />
+  <circle cx="6" cy="18" r="3" />
+  <path d="M14.8 14.8 20 20" />
+</svg>

package/icons/svg/scroll-text.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M15 12h-5" />
+  <path d="M15 8h-5" />
+  <path d="M19 17V5a2 2 0 0 0-2-2H4" />
+  <path d="M8 21h12a2 2 0 0 0 2-2v-1a1 1 0 0 0-1-1H11a1 1 0 0 0-1 1v1a2 2 0 1 1-4 0V5a2 2 0 1 0-4 0v2a1 1 0 0 0 1 1h3" />
+</svg>

package/icons/svg/search.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="m21 21-4.34-4.34" />
+  <circle cx="11" cy="11" r="8" />
+</svg>

package/icons/svg/send.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z" />
+  <path d="m21.854 2.147-10.94 10.939" />
+</svg>

package/icons/svg/settings.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915" />
+  <circle cx="12" cy="12" r="3" />
+</svg>

package/icons/svg/shield.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" />
+</svg>

package/icons/svg/shopping-bag.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M16 10a4 4 0 0 1-8 0" />
+  <path d="M3.103 6.034h17.794" />
+  <path d="M3.4 5.467a2 2 0 0 0-.4 1.2V20a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6.667a2 2 0 0 0-.4-1.2l-2-2.667A2 2 0 0 0 17 2H7a2 2 0 0 0-1.6.8z" />
+</svg>

package/icons/svg/shopping-cart.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="m2.05 2.05 1.099-.028a1 1 0 0 1 1.008.815l2.69 14.347A1 1 0 0 0 7.83 18H18" />
+  <path d="M4.563 5h16.435a1 1 0 0 1 .981 1.204l-1.026 6.226A2 2 0 0 1 18.962 14H6.25" />
+  <circle cx="18" cy="20" r="2" />
+  <circle cx="8" cy="20" r="2" />
+</svg>

package/icons/svg/sliders-horizontal.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M10 5H3" />
+  <path d="M12 19H3" />
+  <path d="M14 3v4" />
+  <path d="M16 17v4" />
+  <path d="M21 12h-9" />
+  <path d="M21 19h-5" />
+  <path d="M21 5h-7" />
+  <path d="M8 10v4" />
+  <path d="M8 12H3" />
+</svg>

package/icons/svg/smartphone.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <rect width="14" height="20" x="5" y="2" rx="2" ry="2" />
+  <path d="M12 18h.01" />
+</svg>

package/icons/svg/sparkles.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z" />
+  <path d="M20 2v4" />
+  <path d="M22 4h-4" />
+  <circle cx="4" cy="20" r="2" />
+</svg>

package/icons/svg/square.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <rect width="18" height="18" x="3" y="3" rx="2" />
+</svg>

package/icons/svg/star.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z" />
+</svg>

package/icons/svg/sun.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <circle cx="12" cy="12" r="4" />
+  <path d="M12 2v2" />
+  <path d="M12 20v2" />
+  <path d="m4.93 4.93 1.41 1.41" />
+  <path d="m17.66 17.66 1.41 1.41" />
+  <path d="M2 12h2" />
+  <path d="M20 12h2" />
+  <path d="m6.34 17.66-1.41 1.41" />
+  <path d="m19.07 4.93-1.41 1.41" />
+</svg>

package/icons/svg/tags.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M13.172 2a2 2 0 0 1 1.414.586l6.71 6.71a2.4 2.4 0 0 1 0 3.408l-4.592 4.592a2.4 2.4 0 0 1-3.408 0l-6.71-6.71A2 2 0 0 1 6 9.172V3a1 1 0 0 1 1-1z" />
+  <path d="M2 7v6.172a2 2 0 0 0 .586 1.414l6.71 6.71a2.4 2.4 0 0 0 3.191.193" />
+  <circle cx="10.5" cy="6.5" r=".5" fill="currentColor" />
+</svg>

package/icons/svg/thumbs-down.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22a3.13 3.13 0 0 1-3-3.88Z" />
+  <path d="M17 14V2" />
+</svg>

package/icons/svg/thumbs-up.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z" />
+  <path d="M7 10v12" />
+</svg>

package/icons/svg/trash.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M10 11v6" />
+  <path d="M14 11v6" />
+  <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" />
+  <path d="M3 6h18" />
+  <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
+</svg>

package/icons/svg/triangle-alert.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" />
+  <path d="M12 9v4" />
+  <path d="M12 17h.01" />
+</svg>

package/icons/svg/truck.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2" />
+  <path d="M15 18H9" />
+  <path d="M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14" />
+  <circle cx="17" cy="18" r="2" />
+  <circle cx="7" cy="18" r="2" />
+</svg>

package/icons/svg/underline.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M6 4v6a6 6 0 0 0 12 0V4" />
+  <line x1="4" x2="20" y1="20" y2="20" />
+</svg>

package/icons/svg/undo-2.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M9 14 4 9l5-5" />
+  <path d="M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11" />
+</svg>

package/icons/svg/unlink.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="m18.84 12.25 1.72-1.71h-.02a5.004 5.004 0 0 0-.12-7.07 5.006 5.006 0 0 0-6.95 0l-1.72 1.71" />
+  <path d="m5.17 11.75-1.71 1.71a5.004 5.004 0 0 0 .12 7.07 5.006 5.006 0 0 0 6.95 0l1.71-1.71" />
+  <line x1="8" x2="8" y1="2" y2="5" />
+  <line x1="2" x2="5" y1="8" y2="8" />
+  <line x1="16" x2="16" y1="19" y2="22" />
+  <line x1="19" x2="22" y1="16" y2="16" />
+</svg>

package/icons/svg/upload.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M12 3v12" />
+  <path d="m17 8-5-5-5 5" />
+  <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+</svg>

package/icons/svg/user-check.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="m16 11 2 2 4-4" />
+  <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
+  <circle cx="9" cy="7" r="4" />
+</svg>

package/icons/svg/user-cog.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M10 15H6a4 4 0 0 0-4 4v2" />
+  <path d="m14.305 16.53.923-.382" />
+  <path d="m15.228 13.852-.923-.383" />
+  <path d="m16.852 12.228-.383-.923" />
+  <path d="m16.852 17.772-.383.924" />
+  <path d="m19.148 12.228.383-.923" />
+  <path d="m19.53 18.696-.382-.924" />
+  <path d="m20.772 13.852.924-.383" />
+  <path d="m20.772 16.148.924.383" />
+  <circle cx="18" cy="15" r="3" />
+  <circle cx="9" cy="7" r="4" />
+</svg>

package/icons/svg/user-plus.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
+  <circle cx="9" cy="7" r="4" />
+  <line x1="19" x2="19" y1="8" y2="14" />
+  <line x1="22" x2="16" y1="11" y2="11" />
+</svg>

package/icons/svg/user-round.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <circle cx="12" cy="8" r="5" />
+  <path d="M20 21a8 8 0 0 0-16 0" />
+</svg>

package/icons/svg/user.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" />
+  <circle cx="12" cy="7" r="4" />
+</svg>

package/icons/svg/users.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
+  <path d="M16 3.128a4 4 0 0 1 0 7.744" />
+  <path d="M22 21v-2a4 4 0 0 0-3-3.87" />
+  <circle cx="9" cy="7" r="4" />
+</svg>

package/icons/svg/video.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5" />
+  <rect x="2" y="6" width="14" height="12" rx="2" />
+</svg>

package/icons/svg/wallet.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1" />
+  <path d="M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4" />
+</svg>

package/icons/svg/wrench.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.106-3.105c.32-.322.863-.22.983.218a6 6 0 0 1-8.259 7.057l-7.91 7.91a1 1 0 0 1-2.999-3l7.91-7.91a6 6 0 0 1 7.057-8.259c.438.12.54.662.219.984z" />
+</svg>

package/icons/svg/x.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M18 6 6 18" />
+  <path d="m6 6 12 12" />
+</svg>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@jcsoftdev/ui",
-  "version": "0.1.6",
-  "description": "Token-driven React component library: React 19, Radix, Tailwind v4.",
+  "version": "0.2.0",
+  "description": "Token-driven React component library: React 19, Tailwind v4.",
   "author": "jcsoftdev",
   "license": "MIT",
   "homepage": "https://ui.jcsoftdev.com",
@@ -20,7 +20,8 @@
     "component-library",
     "design-system",
     "design-tokens",
-    "radix-ui",
+    "headless",
+    "primitives",
     "tailwindcss",
     "tailwind-v4",
     "charts",
@@ -42,8 +43,11 @@
     "styles",
     "tokens",
     "bin",
+    "icons",
     "scripts/build-theme.mjs",
     "README.md",
+    "CHANGELOG.md",
+    "THIRD_PARTY_NOTICES.md",
     "LICENSE"
   ],
   "exports": {
@@ -55,6 +59,12 @@
       "source": "./src/rich-text/index.ts",
       "import": "./dist/rich-text/index.js"
     },
+    "./primitives": {
+      "types": "./dist/primitives/index.d.ts",
+      "source": "./src/primitives/index.ts",
+      "import": "./dist/primitives/index.js"
+    },
+    "./primitives/*": null,
     "./*": {
       "types": "./dist/*/index.d.ts",
       "source": "./src/*/index.ts",
@@ -62,7 +72,9 @@
     }
   },
   "scripts": {
-    "build": "pnpm build:styles && tsup && tsc -p tsconfig.build.json",
+    "build": "pnpm build:styles && pnpm build:class-tokens && tsup && tsc -p tsconfig.build.json",
+    "build:icons": "node scripts/build-icons.mjs",
+    "build:class-tokens": "node scripts/build-class-tokens.mjs",
     "build:styles": "node bin/ui-theme.mjs build tokens/default.json --out styles",
     "lint": "biome check .",
     "storybook": "storybook dev -p 6006",
@@ -70,25 +82,10 @@
     "format": "biome check --write .",
     "typecheck": "tsc --noEmit",
     "test": "node --test \"test/*.test.mjs\"",
-    "check:treeshake": "node test/treeshake.mjs"
-  },
-  "dependencies": {
-    "@radix-ui/react-avatar": "^1.2.6",
-    "@radix-ui/react-checkbox": "^1.3.11",
-    "@radix-ui/react-dialog": "^1.1.23",
-    "@radix-ui/react-dropdown-menu": "^2.1.24",
-    "@radix-ui/react-popover": "^1.1.23",
-    "@radix-ui/react-progress": "^1.1.16",
-    "@radix-ui/react-radio-group": "^1.4.7",
-    "@radix-ui/react-slot": "^1.3.3",
-    "@radix-ui/react-switch": "^1.3.7",
-    "@radix-ui/react-tabs": "^1.1.21",
-    "@radix-ui/react-toggle-group": "^1.1.19",
-    "clsx": "^2.1.1",
-    "cmdk": "^1.1.1",
-    "lucide-react": "^1.47.0",
-    "sonner": "^2.0.8",
-    "tailwind-merge": "^3.3.1"
+    "test:stories": "vitest run --project stories",
+    "check:treeshake": "node test/treeshake.mjs",
+    "check:dist-imports": "node test/dist-imports.mjs",
+    "check:docs-examples": "tsc -p tsconfig.docs.json && node test/docs-examples.mjs"
   },
   "peerDependencies": {
     "react": "^19.0.0",
@@ -98,19 +95,24 @@
     "@biomejs/biome": "^2.2.0",
     "@storybook/addon-a11y": "10.6.0",
     "@storybook/addon-docs": "10.6.0",
+    "@storybook/addon-vitest": "10.6.0",
     "@storybook/react-vite": "10.6.0",
     "@tailwindcss/vite": "4.3.3",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
+    "@vitest/browser": "4.1.11",
+    "@vitest/browser-playwright": "4.1.11",
     "esbuild": "^0.28.2",
+    "playwright": "1.64.0",
     "react": "19.3.0",
     "react-dom": "19.3.0",
     "storybook": "10.6.0",
     "tailwindcss": "4.3.3",
     "tsup": "^8.5.0",
     "typescript": "^5.5.4",
-    "vite": "7.3.6"
+    "vite": "7.3.6",
+    "vitest": "4.1.11"
   },
   "publishConfig": {
     "access": "public"

package/scripts/build-theme.mjs

@@ -284,6 +284,14 @@ export function buildThemeCss(tokens) {
       lines.push(`  --text-${s.name}--letter-spacing: ${s.letterSpacing};`);
     }
   }
+  if ((tokens.type?.sizeScale ?? []).length > 0) {
+    lines.push(
+      "  /* Size-only scale (px x 10, no line-height or weight) for dense UI text that must not inherit a role's weight. */",
+    );
+  }
+  for (const s of tokens.type?.sizeScale ?? []) {
+    lines.push(`  --text-${s.name}: ${s.fontSize};`);
+  }
   const styles = stylesOf(tokens);
   for (const [themeVar, name] of Object.entries(tokens.styles?.tailwind ?? {})) {
     if (!styles.byName.has(name)) throw new Error(`styles.tailwind: unknown token "${name}"`);

package/src/ai/attachment/attachment.tsx

@@ -1,11 +1,21 @@
-import { CircleAlert, FileText, X } from "lucide-react";
 import type { ComponentPropsWithoutRef } from "react";
+import { CircleAlert, FileText, X } from "../../icons/index.js";
+import type { ClassNames } from "../../utils/class-names.js";
 import { cn } from "../../utils/cn.js";
 import { IconAction } from "../internal/icon-action.js";
 
 export type AttachmentStatus = "done" | "uploading" | "error";
 export type AttachmentVariant = "chip" | "preview";
 
+export type AttachmentPart =
+  | "root"
+  | "thumbnail"
+  | "text"
+  | "name"
+  | "detail"
+  | "progress"
+  | "remove";
+
 export interface AttachmentProps extends Omit<ComponentPropsWithoutRef<"fieldset">, "children"> {
   name: string;
   /** Pre-formatted size, e.g. `240 KB`. */
@@ -19,6 +29,8 @@ export interface AttachmentProps extends Omit<ComponentPropsWithoutRef<"fieldset
   variant?: AttachmentVariant;
   /** Shows the remove button. */
   onRemove?: () => void;
+  /** Per-part classes merged with `cn`; consumer classes win. `className` still targets the root and is merged last. */
+  classNames?: ClassNames<AttachmentPart>;
 }
 
 /** File chip or preview tile for prompt attachments, with an optional remove button. */
@@ -31,6 +43,7 @@ export function Attachment({
   variant = "chip",
   onRemove,
   className,
+  classNames,
   ...props
 }: AttachmentProps) {
   const preview = variant === "preview";
@@ -57,6 +70,7 @@ export function Attachment({
           ? "w-40 flex-col items-stretch rounded-card p-1.5"
           : "h-control-sm rounded-button pl-1.5 pr-1",
         status === "error" && "text-danger",
+        classNames?.root,
         className,
       )}
       {...props}
@@ -65,15 +79,20 @@ export function Attachment({
         className={cn(
           "grid shrink-0 place-items-center overflow-hidden rounded-badge bg-surface-sunken",
           preview ? "h-20 w-full" : "size-6",
+          classNames?.thumbnail,
         )}
       >
         {thumb}
       </span>
-      <span className="grid min-w-0 flex-1 leading-tight">
-        <span className="truncate text-meta font-medium">{name}</span>
+      <span className={cn("grid min-w-0 flex-1 leading-tight", classNames?.text)}>
+        <span className={cn("truncate text-meta font-medium", classNames?.name)}>{name}</span>
         {detail && (preview || status !== "done") ? (
           <span
-            className={cn("truncate text-meta", status === "error" ? "text-danger" : "text-ink-3")}
+            className={cn(
+              "truncate text-meta",
+              status === "error" ? "text-danger" : "text-ink-3",
+              classNames?.detail,
+            )}
           >
             {detail}
           </span>
@@ -86,7 +105,10 @@ export function Attachment({
           aria-valuemin={0}
           aria-valuemax={100}
           aria-valuenow={Math.round(progress)}
-          className="absolute inset-x-1.5 bottom-0.5 h-0.5 overflow-hidden rounded-badge bg-track"
+          className={cn(
+            "absolute inset-x-1.5 bottom-0.5 h-0.5 overflow-hidden rounded-badge bg-track",
+            classNames?.progress,
+          )}
         >
           <span
             className="block h-full bg-accent"
@@ -101,6 +123,7 @@ export function Attachment({
           className={cn(
             "size-5",
             preview && "absolute right-2.5 top-2.5 bg-surface-overlay shadow-control",
+            classNames?.remove,
           )}
         >
           <X aria-hidden />

package/src/ai/chain-of-thought/chain-of-thought.tsx

@@ -1,5 +1,6 @@
-import { Brain, Check } from "lucide-react";
 import type { ReactNode } from "react";
+import { Brain, Check } from "../../icons/index.js";
+import type { ClassNames } from "../../utils/class-names.js";
 import { cn } from "../../utils/cn.js";
 import { Disclosure } from "../internal/disclosure.js";
 import { TextShimmer } from "../text-shimmer/text-shimmer.js";
@@ -13,6 +14,17 @@ export interface ThoughtStep {
   status?: ThoughtStatus;
 }
 
+export type ChainOfThoughtPart =
+  | "root"
+  | "title"
+  | "duration"
+  | "list"
+  | "step"
+  | "rail"
+  | "marker"
+  | "label"
+  | "detail";
+
 export interface ChainOfThoughtProps {
   steps: ThoughtStep[];
   /** Header text; while any step is `active` it shimmers. */
@@ -23,6 +35,8 @@ export interface ChainOfThoughtProps {
   defaultOpen?: boolean;
   onOpenChange?: (open: boolean) => void;
   className?: string;
+  /** Per-part classes merged with `cn`; consumer classes win. `className` still targets the root and is merged last. */
+  classNames?: ClassNames<ChainOfThoughtPart>;
 }
 
 /** Collapsible list of reasoning steps with a status rail. */
@@ -34,12 +48,14 @@ export function ChainOfThought({
   defaultOpen = false,
   onOpenChange,
   className,
+  classNames,
 }: ChainOfThoughtProps) {
   const active = steps.some((step) => step.status === "active");
   return (
     <div
       className={cn(
         "@container/thought min-w-0 rounded-card bg-surface-sunken p-2 text-ink",
+        classNames?.root,
         className,
       )}
     >
@@ -51,32 +67,51 @@ export function ChainOfThought({
           <>
             <Brain aria-hidden className="size-3.5 shrink-0 text-ink-3" />
             {active ? (
-              <TextShimmer className="truncate text-meta font-medium">{title}…</TextShimmer>
+              <TextShimmer className={cn("truncate text-meta font-medium", classNames?.title)}>
+                {title}…
+              </TextShimmer>
             ) : (
-              <span className="truncate text-meta font-medium text-ink-2">{title}</span>
+              <span className={cn("truncate text-meta font-medium text-ink-2", classNames?.title)}>
+                {title}
+              </span>
             )}
             {duration ? (
-              <span className="ml-auto shrink-0 text-meta text-ink-3">{duration}</span>
+              <span className={cn("ml-auto shrink-0 text-meta text-ink-3", classNames?.duration)}>
+                {duration}
+              </span>
             ) : null}
           </>
         }
       >
-        <ol className="grid gap-0 pt-density-sm">
+        <ol className={cn("grid gap-0 pt-density-sm", classNames?.list)}>
           {steps.map((step, index) => {
             const status = step.status ?? "done";
             const last = index === steps.length - 1;
             return (
-              <li key={step.id} className="relative flex gap-density-sm pb-density last:pb-0">
+              <li
+                key={step.id}
+                className={cn(
+                  "relative flex gap-density-sm pb-density last:pb-0",
+                  classNames?.step,
+                )}
+              >
                 {last ? null : (
-                  <span aria-hidden className="absolute bottom-0 left-[9px] top-5 w-px bg-line" />
+                  <span
+                    aria-hidden
+                    className={cn(
+                      "absolute bottom-0 left-2.25 top-5 w-px bg-line",
+                      classNames?.rail,
+                    )}
+                  />
                 )}
                 <span
                   aria-hidden
                   className={cn(
-                    "relative mt-0.5 grid size-[19px] shrink-0 place-items-center rounded-full",
+                    "relative mt-0.5 grid size-4.75 shrink-0 place-items-center rounded-full",
                     status === "done" && "bg-success-soft text-success",
                     status === "active" && "bg-accent-soft text-accent-ink",
                     status === "pending" && "bg-surface-2 text-ink-3",
+                    classNames?.marker,
                   )}
                 >
                   {status === "done" ? (
@@ -90,7 +125,7 @@ export function ChainOfThought({
                     />
                   )}
                 </span>
-                <div className="grid min-w-0 flex-1 gap-0.5">
+                <div className={cn("grid min-w-0 flex-1 gap-0.5", classNames?.label)}>
                   <p
                     className={cn(
                       "break-words text-meta font-medium",
@@ -107,7 +142,9 @@ export function ChainOfThought({
                     {step.label}
                   </p>
                   {step.detail ? (
-                    <div className="break-words text-meta text-ink-2">{step.detail}</div>
+                    <div className={cn("break-words text-meta text-ink-2", classNames?.detail)}>
+                      {step.detail}
+                    </div>
                   ) : null}
                 </div>
               </li>