@codelitdev/design-system 0.1.0-alpha.6 → 0.2.0

package/README.md

@@ -16,17 +16,17 @@ under the `alpha` dist-tag.
 > `latest` on a package's first-ever publish, regardless of `--tag` — this is
 > unavoidable until a real stable version is cut, at which point publishing it
 > moves `latest` forward automatically. Until then, **always pin the exact
-> version** — do not `npm install @codelitdev/design-system` bare, and do not
+> version** — do not `bun add @codelitdev/design-system` bare, and do not
 > use a caret/tilde range (`^0.1.0-alpha.0` would still resolve to a
 > prerelease, which is at least explicit — but a bare install with no version
 > silently means "whatever `latest` is," which right now is this alpha).
 
 ```sh
-npm install @codelitdev/design-system@0.1.0-alpha.0
+bun add @codelitdev/design-system@0.1.0-alpha.6
 ```
 
-Inside a workspace/monorepo you can still consume it as `workspace:*` when the
-package is vendored locally.
+Platform examples consume the package as `workspace:*`. Product repositories
+consume an exact published version.
 
 ## Use in a shadcn app
 
@@ -85,7 +85,7 @@ Add the registry namespace to your app's `components.json`:
 ```jsonc
 {
   "registries": {
-    "@codelit": "https://raw.githubusercontent.com/codelitdev/design-system/main/public/r/{name}.json"
+    "@codelit": "https://raw.githubusercontent.com/codelitdev/platform/main/packages/design-system/public/r/{name}.json"
   }
 }
 ```
@@ -93,13 +93,13 @@ Add the registry namespace to your app's `components.json`:
 Then install components like any other shadcn component:
 
 ```sh
-npx shadcn@latest add @codelit/button @codelit/badge @codelit/card
+bunx shadcn@latest add @codelit/button @codelit/badge @codelit/card
 ```
 
 Or install a single component directly by URL, no config:
 
 ```sh
-npx shadcn@latest add https://raw.githubusercontent.com/codelitdev/design-system/main/public/r/button.json
+bunx shadcn@latest add https://raw.githubusercontent.com/codelitdev/platform/main/packages/design-system/public/r/button.json
 ```
 
 ### Available components
@@ -126,28 +126,28 @@ npx shadcn@latest add https://raw.githubusercontent.com/codelitdev/design-system
 Install everything at once:
 
 ```sh
-npx shadcn@latest add @codelit/button @codelit/icon-button @codelit/badge @codelit/card \
+bunx shadcn@latest add @codelit/button @codelit/icon-button @codelit/badge @codelit/card \
   @codelit/input @codelit/textarea @codelit/label @codelit/checkbox @codelit/radio-group \
   @codelit/switch @codelit/select @codelit/tabs @codelit/dialog @codelit/dropdown-menu \
   @codelit/tooltip @codelit/toast
 ```
 
 **Maintainers:** component sources live in `registry/codelit/ui/`. After changing
-one, rebuild the served JSON with `pnpm registry:build` (→ `public/r/*.json`) and
+one, rebuild the served JSON with `bun run registry:build` (→ `public/r/*.json`) and
 commit it — the raw-URL install serves those committed files.
 
 ## Publishing
 
-Prereleases go under the `alpha` dist-tag so a plain `npm install` never grabs
-one. **Always publish with an explicit tag** — `publishConfig.tag` is not
-honored by npm 11.x, so a bare `npm publish` would land on `latest`:
+Prereleases go under the `alpha` dist-tag so a plain `bun add` never grabs
+one. Releases are driven from the Platform root through Changesets; do not run
+`bun publish` from this package directory:
 
 ```sh
-npm run release:alpha            # → npm publish --tag alpha
-# add --otp=<code> if 2FA is enabled
+bun run changeset
+bun run release:alpha
 ```
 
-Verify: `npm view @codelitdev/design-system dist-tags` should show the
+Verify: `bun info @codelitdev/design-system --json` should show the
 prerelease under `alpha` and leave `latest` untouched.
 
 ## License

package/package.json

@@ -1,22 +1,22 @@
 {
   "name": "@codelitdev/design-system",
-  "version": "0.1.0-alpha.6",
+  "version": "0.2.0",
   "description": "Shared CodeLit design tokens, Tailwind preset, and React primitives for CourseLit, MediaLit, SendLit, and FrontLit.",
   "license": "Apache-2.0",
   "author": "CodeLit",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/codelitdev/design-system.git"
+    "url": "git+https://github.com/codelitdev/platform.git",
+    "directory": "packages/design-system"
   },
-  "homepage": "https://github.com/codelitdev/design-system#readme",
+  "homepage": "https://github.com/codelitdev/platform/tree/main/packages/design-system#readme",
   "bugs": {
-    "url": "https://github.com/codelitdev/design-system/issues"
+    "url": "https://github.com/codelitdev/platform/issues"
   },
   "main": "src/index.ts",
   "types": "src/index.ts",
   "scripts": {
     "check": "tsc --noEmit && esbuild src/index.ts --bundle --platform=browser --format=esm --jsx=automatic --external:react --external:react-dom --outfile=/tmp/design-system-check.js",
-    "release:alpha": "npm run check && npm publish --tag alpha",
     "registry:build": "shadcn build"
   },
   "exports": {
@@ -31,7 +31,7 @@
   },
   "publishConfig": {
     "access": "public",
-    "tag": "alpha"
+    "tag": "latest"
   },
   "files": [
     "src",
@@ -41,7 +41,7 @@
   ],
   "devDependencies": {
     "@types/react": "^19.2.17",
-    "@types/react-dom": "^19.2.7",
+    "@types/react-dom": "^19.2.5",
     "esbuild": "^0.28.1",
     "lucide-react": "^0.544.0",
     "react": "^19.2.8",

package/src/assets/logo-codelit.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><g fill="none" stroke="oklch(0.62 0.16 60)" stroke-width="2.6"><path d="M32,23 C27.8,19 27,12.4 32,9 C37,12.4 36.2,19 32,23 Z" transform="translate(0,4.5)"></path><path d="M32,23 C27.8,19 27,12.4 32,9 C37,12.4 36.2,19 32,23 Z" transform="translate(0,4.5) rotate(120 32 32)"></path><path d="M32,23 C27.8,19 27,12.4 32,9 C37,12.4 36.2,19 32,23 Z" transform="translate(0,4.5) rotate(240 32 32)"></path></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><title>CodeLit logo</title><g fill="none" stroke="oklch(0.62 0.16 60)" stroke-width="2.6"><path d="M32,23 C27.8,19 27,12.4 32,9 C37,12.4 36.2,19 32,23 Z" transform="translate(0,4.5)"></path><path d="M32,23 C27.8,19 27,12.4 32,9 C37,12.4 36.2,19 32,23 Z" transform="translate(0,4.5) rotate(120 32 32)"></path><path d="M32,23 C27.8,19 27,12.4 32,9 C37,12.4 36.2,19 32,23 Z" transform="translate(0,4.5) rotate(240 32 32)"></path></g></svg>

package/src/assets/logo-courselit.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><g fill="oklch(0.62 0.16 30 / 0.18)" stroke="oklch(0.62 0.16 30)" stroke-width="2.6" stroke-linejoin="round"><path d="M32,10 L38,28 L32,34 L26,28 Z"></path><path d="M32,10 L38,28 L32,34 L26,28 Z" transform="rotate(90 32 32)"></path><path d="M32,10 L38,28 L32,34 L26,28 Z" transform="rotate(180 32 32)"></path><path d="M32,10 L38,28 L32,34 L26,28 Z" transform="rotate(270 32 32)"></path></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><title>CourseLit logo</title><g fill="oklch(0.62 0.16 30 / 0.18)" stroke="oklch(0.62 0.16 30)" stroke-width="2.6" stroke-linejoin="round"><path d="M32,10 L38,28 L32,34 L26,28 Z"></path><path d="M32,10 L38,28 L32,34 L26,28 Z" transform="rotate(90 32 32)"></path><path d="M32,10 L38,28 L32,34 L26,28 Z" transform="rotate(180 32 32)"></path><path d="M32,10 L38,28 L32,34 L26,28 Z" transform="rotate(270 32 32)"></path></g></svg>

package/src/assets/logo-frontlit.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><g fill="oklch(0.62 0.16 230 / 0.15)" stroke="oklch(0.62 0.16 230)" stroke-width="2.4" stroke-linejoin="round"><path d="M0,-11 C5.5,-5.5 5.5,5.5 0,11 C-5.5,5.5 -5.5,-5.5 0,-11 Z" transform="translate(41.19,22.81) rotate(45)"></path><path d="M0,-11 C5.5,-5.5 5.5,5.5 0,11 C-5.5,5.5 -5.5,-5.5 0,-11 Z" transform="translate(41.19,41.19) rotate(135)"></path><path d="M0,-11 C5.5,-5.5 5.5,5.5 0,11 C-5.5,5.5 -5.5,-5.5 0,-11 Z" transform="translate(22.81,41.19) rotate(225)"></path><path d="M0,-11 C5.5,-5.5 5.5,5.5 0,11 C-5.5,5.5 -5.5,-5.5 0,-11 Z" transform="translate(22.81,22.81) rotate(315)"></path></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><title>FrontLit logo</title><g fill="oklch(0.62 0.16 230 / 0.15)" stroke="oklch(0.62 0.16 230)" stroke-width="2.4" stroke-linejoin="round"><path d="M0,-11 C5.5,-5.5 5.5,5.5 0,11 C-5.5,5.5 -5.5,-5.5 0,-11 Z" transform="translate(41.19,22.81) rotate(45)"></path><path d="M0,-11 C5.5,-5.5 5.5,5.5 0,11 C-5.5,5.5 -5.5,-5.5 0,-11 Z" transform="translate(41.19,41.19) rotate(135)"></path><path d="M0,-11 C5.5,-5.5 5.5,5.5 0,11 C-5.5,5.5 -5.5,-5.5 0,-11 Z" transform="translate(22.81,41.19) rotate(225)"></path><path d="M0,-11 C5.5,-5.5 5.5,5.5 0,11 C-5.5,5.5 -5.5,-5.5 0,-11 Z" transform="translate(22.81,22.81) rotate(315)"></path></g></svg>

package/src/assets/logo-medialit.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><g fill="oklch(0.62 0.16 300 / 0.15)" stroke="oklch(0.62 0.16 300)" stroke-width="2.6" stroke-linejoin="round"><path d="M32,24 C28.8,19 28.8,13.5 32,10 C35.2,13.5 35.2,19 32,24 Z"></path><path d="M32,24 C28.8,19 28.8,13.5 32,10 C35.2,13.5 35.2,19 32,24 Z" transform="rotate(90 32 32)"></path><path d="M32,24 C28.8,19 28.8,13.5 32,10 C35.2,13.5 35.2,19 32,24 Z" transform="rotate(180 32 32)"></path><path d="M32,24 C28.8,19 28.8,13.5 32,10 C35.2,13.5 35.2,19 32,24 Z" transform="rotate(270 32 32)"></path></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><title>MediaLit logo</title><g fill="oklch(0.62 0.16 300 / 0.15)" stroke="oklch(0.62 0.16 300)" stroke-width="2.6" stroke-linejoin="round"><path d="M32,24 C28.8,19 28.8,13.5 32,10 C35.2,13.5 35.2,19 32,24 Z"></path><path d="M32,24 C28.8,19 28.8,13.5 32,10 C35.2,13.5 35.2,19 32,24 Z" transform="rotate(90 32 32)"></path><path d="M32,24 C28.8,19 28.8,13.5 32,10 C35.2,13.5 35.2,19 32,24 Z" transform="rotate(180 32 32)"></path><path d="M32,24 C28.8,19 28.8,13.5 32,10 C35.2,13.5 35.2,19 32,24 Z" transform="rotate(270 32 32)"></path></g></svg>

package/src/assets/logo-sendlit.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><g fill="none" stroke="oklch(0.62 0.16 150)" stroke-width="2.6" stroke-linecap="round" transform="translate(-2,0)"><path d="M32,32 C23,29.5 18.5,20.5 23,12.5 C26.5,17 26.5,24 31,26.5"></path><path d="M32,32 C23,29.5 18.5,20.5 23,12.5 C26.5,17 26.5,24 31,26.5" transform="rotate(120 32 32)"></path><path d="M32,32 C23,29.5 18.5,20.5 23,12.5 C26.5,17 26.5,24 31,26.5" transform="rotate(240 32 32)"></path></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><title>SendLit logo</title><g fill="none" stroke="oklch(0.62 0.16 150)" stroke-width="2.6" stroke-linecap="round" transform="translate(-2,0)"><path d="M32,32 C23,29.5 18.5,20.5 23,12.5 C26.5,17 26.5,24 31,26.5"></path><path d="M32,32 C23,29.5 18.5,20.5 23,12.5 C26.5,17 26.5,24 31,26.5" transform="rotate(120 32 32)"></path><path d="M32,32 C23,29.5 18.5,20.5 23,12.5 C26.5,17 26.5,24 31,26.5" transform="rotate(240 32 32)"></path></g></svg>

package/src/components/actions/Button.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React from "react";
+import type React from "react";
 
 export interface ButtonProps {
   /** Visual style. `soft` is the accent-wash variant unique to CodeLit. */
@@ -14,7 +14,15 @@ export interface ButtonProps {
 }
 
 /** Primary action affordance. Variants: primary, secondary, outline, ghost, soft, destructive. */
-export function Button({ variant = "primary", size = "md", disabled, children, style, onClick, type = "button" }: ButtonProps) {
+export function Button({
+  variant = "primary",
+  size = "md",
+  disabled,
+  children,
+  style,
+  onClick,
+  type = "button",
+}: ButtonProps) {
   return (
     <button
       type={type}

package/src/components/actions/IconButton.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React from "react";
+import type React from "react";
 
 export interface IconButtonProps {
   variant?: "ghost" | "outline";
@@ -14,7 +14,14 @@ export interface IconButtonProps {
 }
 
 /** Square icon-only button for toolbars, table rows, headers. */
-export function IconButton({ variant = "ghost", size = "md", label, children, style, onClick }: IconButtonProps) {
+export function IconButton({
+  variant = "ghost",
+  size = "md",
+  label,
+  children,
+  style,
+  onClick,
+}: IconButtonProps) {
   return (
     <button
       type="button"

package/src/components/display/Badge.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import type React from "react";
 
 export interface BadgeProps {
   variant?: "default" | "neutral" | "success" | "warning" | "destructive" | "outline";

package/src/components/display/Card.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import type React from "react";
 
 export interface CardProps {
   title?: React.ReactNode;

package/src/components/display/Tabs.tsx

@@ -14,7 +14,14 @@ export interface TabsProps {
 }
 
 /** Tab bar. Controlled via value/onChange or uncontrolled via defaultValue. */
-export function Tabs({ tabs = [], value, defaultValue, onChange, variant = "segmented", style }: TabsProps) {
+export function Tabs({
+  tabs = [],
+  value,
+  defaultValue,
+  onChange,
+  variant = "segmented",
+  style,
+}: TabsProps) {
   const [internal, setInternal] = React.useState(defaultValue ?? tabs[0]);
   const active = value ?? internal;
   const pick = (t: string) => {
@@ -22,9 +29,20 @@ export function Tabs({ tabs = [], value, defaultValue, onChange, variant = "segm
     if (onChange) onChange(t);
   };
   return (
-    <div className={`cl-tabs__list ${variant === "underline" ? "cl-tabs__list--underline" : ""}`} role="tablist" style={style}>
+    <div
+      className={`cl-tabs__list ${variant === "underline" ? "cl-tabs__list--underline" : ""}`}
+      role="tablist"
+      style={style}
+    >
       {tabs.map((t) => (
-        <button key={t} type="button" role="tab" className="cl-tabs__trigger" data-active={String(t === active)} onClick={() => pick(t)}>
+        <button
+          key={t}
+          type="button"
+          role="tab"
+          className="cl-tabs__trigger"
+          data-active={String(t === active)}
+          onClick={() => pick(t)}
+        >
           {t}
         </button>
       ))}

package/src/components/feedback/Dialog.tsx

@@ -12,21 +12,38 @@ export interface DialogProps {
   style?: React.CSSProperties;
   children?: React.ReactNode;
 }
+
 import { Button } from "../actions/Button";
 
 /** Modal dialog with scrim. Controlled: open + onClose. */
-export function Dialog({ open, onClose, title, description, footer, children, style }: DialogProps) {
+export function Dialog({
+  open,
+  onClose,
+  title,
+  description,
+  footer,
+  children,
+  style,
+}: DialogProps) {
   if (!open) return null;
   return (
     <div className="cl-dialog__scrim" onClick={onClose}>
-      <div className="cl-dialog" role="dialog" aria-modal="true" style={style} onClick={(e) => e.stopPropagation()}>
+      <div
+        className="cl-dialog"
+        role="dialog"
+        aria-modal="true"
+        style={style}
+        onClick={(e) => e.stopPropagation()}
+      >
         {title ? <h2 className="cl-dialog__title">{title}</h2> : null}
         {description ? <p className="cl-dialog__description">{description}</p> : null}
         {children}
         <div className="cl-dialog__footer">
           {footer ?? (
             <React.Fragment>
-              <Button variant="outline" onClick={onClose}>Cancel</Button>
+              <Button variant="outline" onClick={onClose}>
+                Cancel
+              </Button>
               <Button onClick={onClose}>Confirm</Button>
             </React.Fragment>
           )}

package/src/components/feedback/Loader.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import type React from "react";
 
 export interface LoaderProps {
   /** Which product mark to draw. Omit for the CodeLit house mark (amber). */
@@ -10,9 +10,18 @@ export interface LoaderProps {
 
 const PATHS: Record<string, { d: string; transform?: string }[]> = {
   codelit: [
-    { d: "M32,23 C27.8,19 27,12.4 32,9 C37,12.4 36.2,19 32,23 Z", transform: "translate(0,4.5)" },
-    { d: "M32,23 C27.8,19 27,12.4 32,9 C37,12.4 36.2,19 32,23 Z", transform: "translate(0,4.5) rotate(120 32 32)" },
-    { d: "M32,23 C27.8,19 27,12.4 32,9 C37,12.4 36.2,19 32,23 Z", transform: "translate(0,4.5) rotate(240 32 32)" },
+    {
+      d: "M32,23 C27.8,19 27,12.4 32,9 C37,12.4 36.2,19 32,23 Z",
+      transform: "translate(0,4.5)",
+    },
+    {
+      d: "M32,23 C27.8,19 27,12.4 32,9 C37,12.4 36.2,19 32,23 Z",
+      transform: "translate(0,4.5) rotate(120 32 32)",
+    },
+    {
+      d: "M32,23 C27.8,19 27,12.4 32,9 C37,12.4 36.2,19 32,23 Z",
+      transform: "translate(0,4.5) rotate(240 32 32)",
+    },
   ],
   courselit: [
     { d: "M32,10 L38,28 L32,34 L26,28 Z" },
@@ -22,20 +31,47 @@ const PATHS: Record<string, { d: string; transform?: string }[]> = {
   ],
   medialit: [
     { d: "M32,24 C28.8,19 28.8,13.5 32,10 C35.2,13.5 35.2,19 32,24 Z" },
-    { d: "M32,24 C28.8,19 28.8,13.5 32,10 C35.2,13.5 35.2,19 32,24 Z", transform: "rotate(90 32 32)" },
-    { d: "M32,24 C28.8,19 28.8,13.5 32,10 C35.2,13.5 35.2,19 32,24 Z", transform: "rotate(180 32 32)" },
-    { d: "M32,24 C28.8,19 28.8,13.5 32,10 C35.2,13.5 35.2,19 32,24 Z", transform: "rotate(270 32 32)" },
+    {
+      d: "M32,24 C28.8,19 28.8,13.5 32,10 C35.2,13.5 35.2,19 32,24 Z",
+      transform: "rotate(90 32 32)",
+    },
+    {
+      d: "M32,24 C28.8,19 28.8,13.5 32,10 C35.2,13.5 35.2,19 32,24 Z",
+      transform: "rotate(180 32 32)",
+    },
+    {
+      d: "M32,24 C28.8,19 28.8,13.5 32,10 C35.2,13.5 35.2,19 32,24 Z",
+      transform: "rotate(270 32 32)",
+    },
   ],
   sendlit: [
     { d: "M32,32 C23,29.5 18.5,20.5 23,12.5 C26.5,17 26.5,24 31,26.5" },
-    { d: "M32,32 C23,29.5 18.5,20.5 23,12.5 C26.5,17 26.5,24 31,26.5", transform: "rotate(120 32 32)" },
-    { d: "M32,32 C23,29.5 18.5,20.5 23,12.5 C26.5,17 26.5,24 31,26.5", transform: "rotate(240 32 32)" },
+    {
+      d: "M32,32 C23,29.5 18.5,20.5 23,12.5 C26.5,17 26.5,24 31,26.5",
+      transform: "rotate(120 32 32)",
+    },
+    {
+      d: "M32,32 C23,29.5 18.5,20.5 23,12.5 C26.5,17 26.5,24 31,26.5",
+      transform: "rotate(240 32 32)",
+    },
   ],
   frontlit: [
-    { d: "M0,-11 C5.5,-5.5 5.5,5.5 0,11 C-5.5,5.5 -5.5,-5.5 0,-11 Z", transform: "translate(41.19,22.81) rotate(45)" },
-    { d: "M0,-11 C5.5,-5.5 5.5,5.5 0,11 C-5.5,5.5 -5.5,-5.5 0,-11 Z", transform: "translate(41.19,41.19) rotate(135)" },
-    { d: "M0,-11 C5.5,-5.5 5.5,5.5 0,11 C-5.5,5.5 -5.5,-5.5 0,-11 Z", transform: "translate(22.81,41.19) rotate(225)" },
-    { d: "M0,-11 C5.5,-5.5 5.5,5.5 0,11 C-5.5,5.5 -5.5,-5.5 0,-11 Z", transform: "translate(22.81,22.81) rotate(315)" },
+    {
+      d: "M0,-11 C5.5,-5.5 5.5,5.5 0,11 C-5.5,5.5 -5.5,-5.5 0,-11 Z",
+      transform: "translate(41.19,22.81) rotate(45)",
+    },
+    {
+      d: "M0,-11 C5.5,-5.5 5.5,5.5 0,11 C-5.5,5.5 -5.5,-5.5 0,-11 Z",
+      transform: "translate(41.19,41.19) rotate(135)",
+    },
+    {
+      d: "M0,-11 C5.5,-5.5 5.5,5.5 0,11 C-5.5,5.5 -5.5,-5.5 0,-11 Z",
+      transform: "translate(22.81,41.19) rotate(225)",
+    },
+    {
+      d: "M0,-11 C5.5,-5.5 5.5,5.5 0,11 C-5.5,5.5 -5.5,-5.5 0,-11 Z",
+      transform: "translate(22.81,22.81) rotate(315)",
+    },
   ],
 };
 
@@ -72,8 +108,14 @@ export function Loader({ product = "codelit", size = 40, style }: LoaderProps) {
         strokeLinecap={joined ? undefined : "round"}
         transform={product === "sendlit" ? "translate(-2,0)" : undefined}
       >
-        {paths.map((p, i) => (
-          <path key={i} d={p.d} transform={p.transform} strokeDasharray={200} className="cl-loader__path" />
+        {paths.map((p) => (
+          <path
+            key={`${p.d}:${p.transform ?? ""}`}
+            d={p.d}
+            transform={p.transform}
+            strokeDasharray={200}
+            className="cl-loader__path"
+          />
         ))}
       </g>
     </svg>

package/src/components/feedback/Toast.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import type React from "react";
 
 export interface ToastProps {
   variant?: "default" | "success" | "destructive";
@@ -8,9 +8,56 @@ export interface ToastProps {
 }
 
 const icons = {
-  default: <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M12 16v-4"></path><path d="M12 8h.01"></path></svg>,
-  success: <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="m9 12 2 2 4-4"></path></svg>,
-  destructive: <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M12 8v4"></path><path d="M12 16h.01"></path></svg>,
+  default: (
+    <svg
+      aria-hidden="true"
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <circle cx="12" cy="12" r="10"></circle>
+      <path d="M12 16v-4"></path>
+      <path d="M12 8h.01"></path>
+    </svg>
+  ),
+  success: (
+    <svg
+      aria-hidden="true"
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <circle cx="12" cy="12" r="10"></circle>
+      <path d="m9 12 2 2 4-4"></path>
+    </svg>
+  ),
+  destructive: (
+    <svg
+      aria-hidden="true"
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <circle cx="12" cy="12" r="10"></circle>
+      <path d="M12 8v4"></path>
+      <path d="M12 16h.01"></path>
+    </svg>
+  ),
 };
 
 /** Notification card. Render inside a fixed bottom-right stack in real apps. */

package/src/components/feedback/Tooltip.tsx

@@ -22,7 +22,11 @@ export function Tooltip({ label, open, children, style }: TooltipProps) {
       onMouseLeave={() => setHover(false)}
     >
       {children}
-      {show ? <span className="cl-tooltip" role="tooltip">{label}</span> : null}
+      {show ? (
+        <span className="cl-tooltip" role="tooltip">
+          {label}
+        </span>
+      ) : null}
     </span>
   );
 }

package/src/components/forms/Checkbox.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React from "react";
+import type React from "react";
 
 export interface CheckboxProps {
   label?: React.ReactNode;
@@ -14,12 +14,38 @@ export interface CheckboxProps {
 }
 
 /** Checkbox with label and optional sub-description. */
-export function Checkbox({ label, description, checked, defaultChecked, disabled, onChange, style }: CheckboxProps) {
+export function Checkbox({
+  label,
+  description,
+  checked,
+  defaultChecked,
+  disabled,
+  onChange,
+  style,
+}: CheckboxProps) {
   return (
     <label className={`cl-check ${disabled ? "cl-check--disabled" : ""}`} style={style}>
-      <input type="checkbox" checked={checked} defaultChecked={defaultChecked} disabled={disabled} onChange={onChange} />
+      <input
+        type="checkbox"
+        checked={checked}
+        defaultChecked={defaultChecked}
+        disabled={disabled}
+        onChange={onChange}
+      />
       <span className="cl-check__box">
-        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6 9 17l-5-5"></path></svg>
+        <svg
+          aria-hidden="true"
+          width="12"
+          height="12"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="3.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <path d="M20 6 9 17l-5-5"></path>
+        </svg>
       </span>
       {label ? (
         <span className="cl-check__label">

package/src/components/forms/Input.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React from "react";
+import type React from "react";
 
 export interface InputProps {
   label?: React.ReactNode;
@@ -29,6 +29,7 @@ export function Input({ label, hint, error, multiline, style, ...rest }: InputPr
   );
   if (!label && !hint && !error) return control;
   return (
+    /* biome-ignore lint/a11y/noLabelWithoutControl: the control is rendered inside this label. */
     <label className="cl-field" style={style}>
       {label ? <span className="cl-field__label">{label}</span> : null}
       {control}

package/src/components/forms/Radio.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React from "react";
+import type React from "react";
 
 export interface RadioProps {
   label?: React.ReactNode;
@@ -15,10 +15,28 @@ export interface RadioProps {
 }
 
 /** Radio button; group by sharing `name`. */
-export function Radio({ label, description, name, value, checked, defaultChecked, disabled, onChange, style }: RadioProps) {
+export function Radio({
+  label,
+  description,
+  name,
+  value,
+  checked,
+  defaultChecked,
+  disabled,
+  onChange,
+  style,
+}: RadioProps) {
   return (
     <label className={`cl-check ${disabled ? "cl-check--disabled" : ""}`} style={style}>
-      <input type="radio" name={name} value={value} checked={checked} defaultChecked={defaultChecked} disabled={disabled} onChange={onChange} />
+      <input
+        type="radio"
+        name={name}
+        value={value}
+        checked={checked}
+        defaultChecked={defaultChecked}
+        disabled={disabled}
+        onChange={onChange}
+      />
       <span className="cl-check__box cl-check__box--radio">
         <span className="cl-check__radio-dot"></span>
       </span>

package/src/components/forms/Select.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React from "react";
+import type React from "react";
 
 export interface SelectProps {
   label?: React.ReactNode;
@@ -21,19 +21,36 @@ export function Select({ label, hint, options = [], style, ...rest }: SelectProp
       <select {...rest}>
         {options.map((o) =>
           typeof o === "string" ? (
-            <option key={o} value={o}>{o}</option>
+            <option key={o} value={o}>
+              {o}
+            </option>
           ) : (
-            <option key={o.value} value={o.value}>{o.label}</option>
-          )
+            <option key={o.value} value={o.value}>
+              {o.label}
+            </option>
+          ),
         )}
       </select>
       <span className="cl-select__chevron">
-        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m6 9 6 6 6-6"></path></svg>
+        <svg
+          aria-hidden="true"
+          width="14"
+          height="14"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <path d="m6 9 6 6 6-6"></path>
+        </svg>
       </span>
     </span>
   );
   if (!label && !hint) return <span style={style}>{control}</span>;
   return (
+    /* biome-ignore lint/a11y/noLabelWithoutControl: the select control is rendered inside this label. */
     <label className="cl-field" style={style}>
       {label ? <span className="cl-field__label">{label}</span> : null}
       {control}