@cascivo/react 0.8.0 → 0.10.0

package/dist/time-picker/time-picker.js

@@ -11,49 +11,49 @@ var s = n({
 		focused: { on: { BLUR: "idle" } }
 	}
 });
-function c({ value: n, defaultValue: c, onChange: l, min: u, max: d, step: f, label: p, hint: m, error: h, size: g = "md", className: _, id: v, onFocus: y, onBlur: b, ...x }) {
+function c({ value: n, defaultValue: c, onValueChange: l, onChange: u, min: d, max: f, step: p, label: m, hint: h, error: g, size: _ = "md", className: v, id: y, onFocus: b, onBlur: x, ...S }) {
 	i();
-	let [S, C] = r(s), w = v ?? (p ? `cascade-time-picker-${p.toLowerCase().replace(/\s+/g, "-")}` : void 0);
+	let [C, w] = r(s), T = y ?? (m ? `cascade-time-picker-${m.toLowerCase().replace(/\s+/g, "-")}` : void 0);
 	return /* @__PURE__ */ o("div", {
-		className: t(e.wrapper, _),
-		"data-state": h ? "error" : S.value,
-		"data-size": g,
+		className: t(e.wrapper, v),
+		"data-state": g ? "error" : C.value,
+		"data-size": _,
 		children: [
-			p && /* @__PURE__ */ a("label", {
+			m && /* @__PURE__ */ a("label", {
 				className: e.label,
-				htmlFor: w,
-				children: p
+				htmlFor: T,
+				children: m
 			}),
 			/* @__PURE__ */ a("input", {
-				id: w,
+				id: T,
 				type: "time",
 				className: e.input,
 				value: n,
 				defaultValue: c,
-				min: u,
-				max: d,
-				step: f,
-				"aria-invalid": h ? !0 : void 0,
-				"aria-describedby": h ? `${w}-error` : m ? `${w}-hint` : void 0,
-				onChange: (e) => l?.(e.target.value),
+				min: d,
+				max: f,
+				step: p,
+				"aria-invalid": g ? !0 : void 0,
+				"aria-describedby": g ? `${T}-error` : h ? `${T}-hint` : void 0,
+				onChange: (e) => (l ?? u)?.(e.target.value),
 				onFocus: (e) => {
-					C("FOCUS"), y?.(e);
+					w("FOCUS"), b?.(e);
 				},
 				onBlur: (e) => {
-					C("BLUR"), b?.(e);
+					w("BLUR"), x?.(e);
 				},
-				...x
+				...S
 			}),
-			h && /* @__PURE__ */ a("span", {
-				id: `${w}-error`,
+			g && /* @__PURE__ */ a("span", {
+				id: `${T}-error`,
 				className: e.error,
 				role: "alert",
-				children: h
+				children: g
 			}),
-			!h && m && /* @__PURE__ */ a("span", {
-				id: `${w}-hint`,
+			!g && h && /* @__PURE__ */ a("span", {
+				id: `${T}-hint`,
 				className: e.hint,
-				children: m
+				children: h
 			})
 		]
 	});

package/dist/toggle/toggle.js

@@ -4,34 +4,34 @@ import e from "./toggle.module.js";
 import { cn as t, createMachine as n, useMachine as r, useSignals as i } from "@cascivo/core";
 import { jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region ../components/src/toggle/toggle.tsx
-function s({ checked: s, defaultChecked: c = !1, onChange: l, label: u, size: d = "md", className: f, disabled: p, ...m }) {
+function s({ checked: s, defaultChecked: c = !1, onValueChange: l, onChange: u, label: d, size: f = "md", className: p, disabled: m, ...h }) {
 	i();
-	let [h, g] = r(n({
+	let [g, _] = r(n({
 		initial: c ? "on" : "off",
 		states: {
 			off: { on: { TOGGLE: "on" } },
 			on: { on: { TOGGLE: "off" } }
 		}
-	})), _ = s !== void 0, v = _ ? s : h.value === "on";
+	})), v = s !== void 0, y = v ? s : g.value === "on";
 	return /* @__PURE__ */ o("button", {
 		type: "button",
 		role: "switch",
-		"aria-checked": v,
-		"data-state": v ? "on" : "off",
-		"data-size": d,
-		disabled: p,
-		className: t(e.toggle, f),
+		"aria-checked": y,
+		"data-state": y ? "on" : "off",
+		"data-size": f,
+		disabled: m,
+		className: t(e.toggle, p),
 		onClick: () => {
-			_ || g("TOGGLE"), l?.(!v);
+			v || _("TOGGLE"), (l ?? u)?.(!y);
 		},
-		...m,
+		...h,
 		children: [/* @__PURE__ */ a("span", {
 			className: e.track,
 			"aria-hidden": "true",
 			children: /* @__PURE__ */ a("span", { className: e.thumb })
-		}), u && /* @__PURE__ */ a("span", {
+		}), d && /* @__PURE__ */ a("span", {
 			className: e.label,
-			children: u
+			children: d
 		})]
 	});
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cascivo/react",
-  "version": "0.8.0",
+  "version": "0.10.0",
   "private": false,
   "description": "Prebuilt cascivo design system components — use without copying source",
   "keywords": [
@@ -33,8 +33,9 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/react/src/index.js",
-      "default": "./dist/react/src/index.js"
+      "node": "./dist/node/index.js",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
     },
     "./styles.css": "./dist/styles.css",
     "./package.json": "./package.json"
@@ -44,8 +45,8 @@
     "provenance": true
   },
   "dependencies": {
-    "@cascivo/core": "^0.4.1",
-    "@cascivo/i18n": "^0.2.8"
+    "@cascivo/core": "^0.5.1",
+    "@cascivo/i18n": "^0.2.9"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",
@@ -61,7 +62,7 @@
     "@cascivo/components": "0.0.0"
   },
   "peerDependencies": {
-    "@preact/signals-react": ">=2.0.0",
+    "@preact/signals-react": ">=3.0.0",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
   },

package/readme.body.md

@@ -18,12 +18,17 @@ supplies the tokens and themes the components read.
 Charts live in a separate package — add [`@cascivo/charts`](https://github.com/cascivo/cascivo/tree/main/packages/charts)
 for `LineChart`, `AreaChart`, `BarChart`, `Sparkline`, and more.
 
+> **Types are the reference.** The shipped `dist/index.d.ts` is a self-contained, flat
+> rollup — every component's `…Props` interface is real, documentation-grade API. Reading
+> it (or the per-component [`/llms/<name>.md`](https://cascivo.com/llms.txt)) is the fastest
+> way to learn a component's props with no web access.
+
 ### Framework setup (Next.js App Router)
 
 In a Server Component file (e.g. `app/layout.tsx`), import the themes once:
 
 ```tsx
-import '@cascivo/themes/all'
+import '@cascivo/themes/all.css'
 ```
 
 Component CSS ships **per component** and is pulled in automatically when you
@@ -40,19 +45,27 @@ RSC without any extra wrapper.
 > only if you prefer one explicit stylesheet over per-component tree-shaking, or
 > for Vite SSR (below), where it is required.
 
-> **Vite SSR / TanStack Start / Remix / workerd?** Those per-component `.css`
-> imports need a bundler to resolve them; a bare server-side ESM loader throws
-> `Unknown file extension ".css"`. Add `ssr: { noExternal: [/^@cascivo\//] }` (or
-> the `cascivoSsr()` plugin from `@cascivo/vite-plugin`) and import
-> `@cascivo/react/styles.css` once in your root entry. Full recipe:
-> [USING-WITH-VITE-SSR.md](https://github.com/cascivo/cascivo/blob/main/docs/USING-WITH-VITE-SSR.md).
+> **Vite SSR / TanStack Start / Remix / workerd?** The 4-line SSR checklist (full
+> recipe: [USING-WITH-VITE-SSR.md](https://github.com/cascivo/cascivo/blob/main/docs/USING-WITH-VITE-SSR.md)):
+>
+> 1. **`ssr: { noExternal: [/^@cascivo\//] }`** in `vite.config` (or the
+>    `cascivoSsr()` plugin from `@cascivo/vite-plugin`). Without it a bare
+>    server-side ESM loader can't resolve the per-component `.css` side-effect
+>    imports and throws `Unknown file extension ".css"`.
+> 2. **`@preact/signals-react` 3.x** — on React 19 the 2.x line fails to load. The
+>    peer range enforces `>=3`.
+> 3. **Import the CSS once** in your root entry: `@cascivo/react/styles.css` +
+>    `@cascivo/themes/all` (+ `@cascivo/charts/styles.css` if you use charts).
+> 4. **Theme without a mismatch:** inline `themePreloadScript()` in `<head>` and add
+>    `suppressHydrationWarning` to `<html>`, or hard-code `data-theme` for a fixed theme.
+>
 > Next.js App Router needs none of this.
 
 ## Use
 
 ```tsx
 // once, in your entry file — themes are the only global import
-import '@cascivo/themes/all' // tokens (once) + base typography + light & dark
+import '@cascivo/themes/all.css' // tokens (once) + base typography + light & dark
 
 // anywhere — each component brings its own CSS along
 import { Button, Card, CardContent, Toggle } from '@cascivo/react'
@@ -79,9 +92,9 @@ Prefer à-la-carte? Import only the themes you need — each self-imports the to
 (deduped by URL, so light + dark load tokens once):
 
 ```tsx
-import '@cascivo/themes/base' // base typography (font/line-height/color)
-import '@cascivo/themes/light'
-import '@cascivo/themes/dark'
+import '@cascivo/themes/base.css' // base typography (font/line-height/color)
+import '@cascivo/themes/light.css'
+import '@cascivo/themes/dark.css'
 ```
 
 Scope a theme with `data-theme="light" | "dark" | "warm"` on any container. Brand