themelia-ui 2.0.1 → 3.0.0

package/dist/{text-inputs-BBpgIQEI.js → text-inputs-DF_lD7pA.js}

@@ -1,4 +1,3 @@
-import "./css/text-inputs.css";
 import { t as e } from "./cx--CBrhWH0.js";
 import { ChevronDownIcon as t, CircleXIcon as n, EyeIcon as r, EyeOffIcon as i, Loader2Icon as a, SearchIcon as o } from "lucide-react";
 import * as s from "react";
@@ -174,7 +173,7 @@ var b = s.forwardRef(function({ className: t, type: r = "text", startIcon: i, en
 			})
 		]
 	});
-}), x = s.forwardRef(function({ className: t, strings: r, maxLength: i, showCharacterCount: o, clearable: c, onClear: l, loading: u, invalid: d, minRows: h, maxRows: v, value: y, defaultValue: b, onChange: x, id: S, rows: C, style: w, ...T }, E) {
+}), x = s.forwardRef(function({ className: t, strings: r, maxLength: i, showCharacterCount: o, clearable: c, onClear: l, loading: u = !1, invalid: d, minRows: h, maxRows: v, value: y, defaultValue: b, onChange: x, id: S, rows: C, style: w, ...T }, E) {
 	let D = {
 		...m,
 		...r

package/dist/{timeline-ptWoY2GY.js → timeline-BdaGRyj-.js}

@@ -1,7 +1,6 @@
-import "./css/timeline.css";
 import { t as e } from "./cx--CBrhWH0.js";
 import { o as t } from "./typography-BkxEiwQ1.js";
-import { d as n } from "./display-Dehpw83R.js";
+import { d as n } from "./display-B3Q17h5z.js";
 import { t as r } from "./strings-Co9_qArR.js";
 import { CheckIcon as i } from "lucide-react";
 import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";

package/dist/{timelines-BquC31uF.js → timelines-BB7550mz.js}

@@ -1,11 +1,10 @@
-import "./css/timelines.css";
 import { t as e } from "./cx--CBrhWH0.js";
 import { o as t } from "./typography-BkxEiwQ1.js";
-import { s as n } from "./feedback-C8QtkdHc.js";
-import { B as r, T as i } from "./primitives-BnXNg-Kr.js";
-import { t as a } from "./badge-D34FkKLD.js";
+import { s as n } from "./feedback-DRerHGuV.js";
+import { B as r, T as i } from "./primitives-D0bdDozz.js";
+import { t as a } from "./badge-CxOuTfVr.js";
 import { t as o } from "./strings-Co9_qArR.js";
-import { r as s, t as c } from "./timeline-ptWoY2GY.js";
+import { r as s, t as c } from "./timeline-BdaGRyj-.js";
 import { CheckIcon as l, CircleIcon as u, ClockIcon as d, XIcon as f } from "lucide-react";
 import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
 //#region src/components/patterns/timelines/timelines.strings.ts

package/dist/{toaster-DOBJDiXt.js → toaster-bBMgXm8z.js}

@@ -1,6 +1,5 @@
-import "./css/toaster.css";
 import { t as e } from "./cx--CBrhWH0.js";
-import { n as t, u as n } from "./ui-provider-gNDv-ZRY.js";
+import { n as t, u as n } from "./ui-provider-Cmoq6i_D.js";
 import { t as r } from "./use-hydrated-lyN9MFHH.js";
 import { CircleCheckIcon as i, InfoIcon as a, Loader2Icon as o, OctagonXIcon as s, TriangleAlertIcon as c, XIcon as l } from "lucide-react";
 import { useCallback as u, useEffect as d, useRef as f, useSyncExternalStore as p } from "react";

package/dist/tokens.json

@@ -1,5 +1,5 @@
 {
-  "$description": "themelia-ui design tokens, W3C DTCG format. Generated by scripts/gen-dtcg-tokens.mjs.",
+  "$description": "themelia-ui design tokens in the W3C Design Tokens (DTCG) format.",
   "palette": {
     "$type": "color",
     "neutral": {
@@ -1000,7 +1000,6 @@
   },
   "$extensions": {
     "org.themelia-ui": {
-      "generator": "scripts/gen-dtcg-tokens.mjs",
       "skipped": [
         "--shadow-2xs: multi-layer shadow with a color-mix colour — DTCG has no equivalent",
         "--shadow-xs: multi-layer shadow with a color-mix colour — DTCG has no equivalent",

package/dist/{toolbar-3GLSD7Fi.js → toolbar-DWRywF0R.js}

@@ -1,6 +1,5 @@
-import "./css/toolbar.css";
 import { t as e } from "./cx--CBrhWH0.js";
-import { c as t } from "./buttons-riLAPVQV.js";
+import { c as t } from "./buttons-CqXKWty3.js";
 import "react";
 import { jsx as n } from "react/jsx-runtime";
 import { Toolbar as r } from "@base-ui/react/toolbar";

package/dist/{tooltip-DksScngC.js → tooltip-t1VQQ2tZ.js}

@@ -1,6 +1,5 @@
-import "./css/tooltip.css";
 import { t as e } from "./cx--CBrhWH0.js";
-import { u as t } from "./ui-provider-gNDv-ZRY.js";
+import { u as t } from "./ui-provider-Cmoq6i_D.js";
 import { createContext as n, useContext as r, useId as i, useState as a } from "react";
 import { jsx as o, jsxs as s } from "react/jsx-runtime";
 import { Tooltip as c } from "@base-ui/react/tooltip";

package/dist/typography-BkxEiwQ1.js

@@ -1,4 +1,3 @@
-import "./css/typography.css";
 import { t as e } from "./cvm-DtsCA8iZ.js";
 import { t } from "./cx--CBrhWH0.js";
 import * as n from "react";

package/dist/{ui-provider-gNDv-ZRY.js → ui-provider-Cmoq6i_D.js}

@@ -24,8 +24,8 @@ var f = {
 		format: "dd MMM yyyy",
 		timeFormat: "HH:mm"
 	}
-}, p = e(f), m = e(!1), h = e(null);
-function g(e, t = {}) {
+}, p = e(f), m = e(!1), h = e({}), g = e(null);
+function _(e, t = {}) {
 	return {
 		...e,
 		...t,
@@ -35,20 +35,20 @@ function g(e, t = {}) {
 		theme: {
 			...e.theme,
 			...t.theme,
-			colors: _(e.theme?.colors, t.theme?.colors),
-			palette: _(e.theme?.palette, t.theme?.palette),
-			vars: _(e.theme?.vars, t.theme?.vars)
+			colors: v(e.theme?.colors, t.theme?.colors),
+			palette: v(e.theme?.palette, t.theme?.palette),
+			vars: v(e.theme?.vars, t.theme?.vars)
 		},
 		typography: {
 			...e.typography,
 			...t.typography,
-			fonts: _(e.typography?.fonts, t.typography?.fonts),
-			sizes: _(e.typography?.sizes, t.typography?.sizes)
+			fonts: v(e.typography?.fonts, t.typography?.fonts),
+			sizes: v(e.typography?.sizes, t.typography?.sizes)
 		},
 		motion: {
 			...e.motion,
 			...t.motion,
-			durations: _(e.motion?.durations, t.motion?.durations)
+			durations: v(e.motion?.durations, t.motion?.durations)
 		},
 		overlay: {
 			...e.overlay,
@@ -70,16 +70,16 @@ function g(e, t = {}) {
 			...e.dates,
 			...t.dates
 		},
-		defaults: v(e.defaults, t.defaults)
+		defaults: y(e.defaults, t.defaults)
 	};
 }
-function _(e, t) {
+function v(e, t) {
 	return e ? t ? {
 		...e,
 		...t
 	} : e : t;
 }
-function v(e, t) {
+function y(e, t) {
 	if (!e) return t;
 	if (!t) return e;
 	let n = e, r = t, i = { ...n };
@@ -91,7 +91,7 @@ function v(e, t) {
 }
 //#endregion
 //#region src/lib/ui-provider/tokens.ts
-function y(e) {
+function b(e) {
 	let t = {}, n = (e, n) => {
 		n !== void 0 && (t[`--${e}`] = n);
 	}, { theme: r, typography: i, motion: a, overlay: o, scale: s } = e;
@@ -117,59 +117,59 @@ function y(e) {
 	}
 	return t;
 }
-function b(e) {
+function x(e) {
 	let t = {};
 	return e.density && e.density !== "default" && (t["data-density"] = e.density), (e.colorScheme === "light" || e.colorScheme === "dark") && (t["data-theme"] = e.colorScheme), t;
 }
 //#endregion
 //#region src/lib/ui-provider/use-iphone-input-zoom.ts
-var x = () => () => {}, S = () => !1, C = () => typeof navigator < "u" && /iPhone/i.test(navigator.userAgent);
-function w(e) {
-	let t = o(x, C, S);
+var S = () => () => {}, C = () => !1, w = () => typeof navigator < "u" && /iPhone/i.test(navigator.userAgent);
+function T(e) {
+	let t = o(S, w, C);
 	return e === !0 && t;
 }
 //#endregion
 //#region src/lib/ui-provider/root.tsx
-var T = [
+var E = [
 	"data-theme",
 	"data-density",
 	"data-iphone-input-zoom"
-], E = /* @__PURE__ */ new Map(), D = 0, O = /* @__PURE__ */ new Map();
-function k(e) {
+], D = /* @__PURE__ */ new Map(), O = 0, k = /* @__PURE__ */ new Map();
+function A(e) {
 	return typeof document > "u" ? null : e === "body" ? document.body : document.documentElement;
 }
-function A(e) {
-	let t = k(e);
+function j(e) {
+	let t = A(e);
 	if (!t) return;
 	let n = null;
-	for (let t of E.values()) t.target === e && (n === null || t.order < n.order) && (n = t);
+	for (let t of D.values()) t.target === e && (n === null || t.order < n.order) && (n = t);
 	if (n === null) {
-		for (let [n, r] of O.get(e) ?? []) r === null ? t.removeAttribute(n) : t.setAttribute(n, r);
-		O.delete(e);
+		for (let [n, r] of k.get(e) ?? []) r === null ? t.removeAttribute(n) : t.setAttribute(n, r);
+		k.delete(e);
 		return;
 	}
-	O.has(e) || O.set(e, new Map(T.map((e) => [e, t.getAttribute(e)])));
-	for (let e of T) {
+	k.has(e) || k.set(e, new Map(E.map((e) => [e, t.getAttribute(e)])));
+	for (let e of E) {
 		let r = n.attributes[e];
 		r == null ? t.removeAttribute(e) : t.setAttribute(e, r);
 	}
 }
-function j({ config: e, documentTarget: a = !1, children: o }) {
-	let c = t(p), l = r(() => g(c, e), [c, e]), u = w(l.forms?.preventIPhoneZoom), d = i(null);
+function M({ config: e, documentTarget: a = !1, children: o }) {
+	let c = t(p), l = r(() => _(c, e), [c, e]), u = T(l.forms?.preventIPhoneZoom), d = i(null);
 	d.current ??= Symbol("ui-root");
 	let f = i(null);
-	return f.current ??= D++, n(() => {
+	return f.current ??= O++, n(() => {
 		if (a === !1 || typeof document > "u") return;
 		let e = a, t = d.current;
-		return E.set(t, {
+		return D.set(t, {
 			order: f.current,
 			target: e,
 			attributes: {
-				...b(l),
+				...x(l),
 				"data-iphone-input-zoom": String(u)
 			}
-		}), A(e), () => {
-			E.delete(t), A(e);
+		}), j(e), () => {
+			D.delete(t), j(e);
 		};
 	}, [
 		a,
@@ -185,47 +185,53 @@ function j({ config: e, documentTarget: a = !1, children: o }) {
 }
 //#endregion
 //#region src/lib/ui-provider/ui-scope.tsx
-function M({ config: e, transparent: n = !0, render: i, className: a, style: o, ...c }) {
-	let d = t(p), f = r(() => g(d, e), [d, e]), h = w(f.forms?.preventIPhoneZoom), _ = r(() => ({
+function N({ config: e, transparent: n = !0, render: i, className: a, style: o, ...c }) {
+	let d = t(p), f = t(h), g = r(() => _(d, e), [d, e]), v = T(g.forms?.preventIPhoneZoom), y = r(() => ({
+		...f,
+		...b(e ?? {})
+	}), [f, e]), S = r(() => ({
 		...n ? { display: "contents" } : null,
-		...y(e ?? {}),
+		...y,
 		...o
 	}), [
-		e,
+		y,
 		n,
 		o
-	]), v = r(() => b(f), [f]), x = u({
+	]), C = r(() => x(g), [g]), w = u({
 		defaultTagName: "div",
 		props: l({
 			className: a,
-			style: _,
-			...v,
+			style: S,
+			...C,
 			"data-ui-scope": "",
-			"data-iphone-input-zoom": String(h)
+			"data-iphone-input-zoom": String(v)
 		}, c),
 		render: i
 	});
 	return /* @__PURE__ */ s(p.Provider, {
-		value: f,
-		children: /* @__PURE__ */ s(m.Provider, {
-			value: !0,
-			children: x
+		value: g,
+		children: /* @__PURE__ */ s(h.Provider, {
+			value: y,
+			children: /* @__PURE__ */ s(m.Provider, {
+				value: !0,
+				children: w
+			})
 		})
 	});
 }
 //#endregion
 //#region src/lib/ui-provider/provider.tsx
-function N({ config: e, transparent: n = !0, className: r, style: i, children: a }) {
-	return t(m) ? /* @__PURE__ */ s(M, {
+function P({ config: e, transparent: n = !0, className: r, style: i, children: a }) {
+	return t(m) ? /* @__PURE__ */ s(N, {
 		config: e,
 		transparent: n,
 		className: r,
 		style: i,
 		children: a
-	}) : /* @__PURE__ */ s(j, {
+	}) : /* @__PURE__ */ s(M, {
 		config: e,
 		documentTarget: "documentElement",
-		children: /* @__PURE__ */ s(M, {
+		children: /* @__PURE__ */ s(N, {
 			config: e,
 			transparent: n,
 			className: r,
@@ -236,28 +242,31 @@ function N({ config: e, transparent: n = !0, className: r, style: i, children: a
 }
 //#endregion
 //#region src/lib/ui-provider/csp-provider.tsx
-function P(e) {
+function F(e) {
 	return /* @__PURE__ */ s(d, { ...e });
 }
 //#endregion
 //#region src/lib/ui-provider/scope.tsx
-function F({ vars: e, as: t = "div", transparent: n = !0, className: r, style: i, children: a }) {
-	return /* @__PURE__ */ s(t, {
-		"data-ui-scope": "",
-		className: r,
-		style: {
-			...n ? { display: "contents" } : null,
-			...e,
-			...i
-		},
-		children: a
+function I({ vars: e, transparent: t = !0, render: n, className: r, style: i, ...a }) {
+	return u({
+		defaultTagName: "div",
+		props: l({
+			className: r,
+			style: {
+				...t ? { display: "contents" } : null,
+				...e,
+				...i
+			},
+			"data-ui-scope": ""
+		}, a),
+		render: n
 	});
 }
 //#endregion
 //#region src/lib/ui-provider/portal-host.tsx
-function I({ container: e, children: t }) {
+function L({ container: e, children: t }) {
 	let [n, r] = a(null);
-	return /* @__PURE__ */ c(h.Provider, {
+	return /* @__PURE__ */ c(g.Provider, {
 		value: e ?? n,
 		children: [t, e === void 0 && /* @__PURE__ */ s("div", {
 			ref: r,
@@ -268,44 +277,44 @@ function I({ container: e, children: t }) {
 }
 //#endregion
 //#region src/lib/ui-provider/hooks.ts
-function L() {
+function R() {
 	return t(p);
 }
-function R() {
+function z() {
 	return t(p).formatting;
 }
-function z() {
+function B() {
 	return t(p).money;
 }
-function B() {
+function V() {
 	return t(p).dates;
 }
-function V() {
+function H() {
 	return t(p).overlay;
 }
-function H() {
+function U() {
 	return t(p).typography;
 }
-function U() {
+function W() {
 	let { density: e, scale: n } = t(p);
 	return {
 		density: e,
 		scale: n
 	};
 }
-function W() {
+function G() {
 	return t(p).scale;
 }
-function G(e, n) {
+function K(e, n) {
 	let i = t(p).defaults?.[e];
 	return r(() => i ? {
 		...n,
 		...i
 	} : n, [n, i]);
 }
-function K(e) {
-	let n = t(h);
+function q(e) {
+	let n = t(g);
 	return e ?? n ?? void 0;
 }
 //#endregion
-export { f as S, b as _, z as a, m as b, H as c, I as d, F as f, j as g, M as h, R as i, L as l, N as m, G as n, V as o, P as p, U as r, W as s, B as t, K as u, y as v, g as x, p as y };
+export { f as S, x as _, B as a, m as b, U as c, L as d, I as f, M as g, N as h, z as i, R as l, P as m, K as n, H as o, F as p, W as r, G as s, V as t, q as u, b as v, _ as x, p as y };

package/dist/ui-provider.js

@@ -1,3 +1,3 @@
 "use client";
-import { S as e, _ as t, a as n, b as r, c as i, d as a, f as o, g as s, h as c, i as l, l as u, m as d, n as f, o as p, p as m, r as h, s as g, t as _, u as v, v as y, x as b, y as x } from "./ui-provider-gNDv-ZRY.js";
+import { S as e, _ as t, a as n, b as r, c as i, d as a, f as o, g as s, h as c, i as l, l as u, m as d, n as f, o as p, p as m, r as h, s as g, t as _, u as v, v as y, x as b, y as x } from "./ui-provider-Cmoq6i_D.js";
 export { m as CSPProvider, e as DEFAULT_UI_CONFIG, o as Scope, x as UIConfigContext, r as UINestedContext, a as UIPortalHost, d as UIProvider, s as UIRoot, c as UIScope, t as configToAttributes, y as configToCssVars, b as mergeUIConfig, _ as useDatesConfig, f as useDefaults, h as useDensity, l as useFormatting, n as useMoneyConfig, p as useOverlayConfig, g as useScale, i as useTypographyConfig, u as useUIConfig, v as useUIPortalContainer };

package/dist/{upload-wTBh4QQx.js → upload-B38YZeFJ.js}

@@ -1,10 +1,9 @@
-import "./css/upload.css";
 import { t as e } from "./cx--CBrhWH0.js";
-import { h as t } from "./feedback-C8QtkdHc.js";
-import { c as n } from "./buttons-riLAPVQV.js";
-import { d as r } from "./display-Dehpw83R.js";
-import { C as i, S as a } from "./primitives-BnXNg-Kr.js";
-import { t as o } from "./badge-D34FkKLD.js";
+import { h as t } from "./feedback-DRerHGuV.js";
+import { c as n } from "./buttons-CqXKWty3.js";
+import { d as r } from "./display-B3Q17h5z.js";
+import { C as i, S as a } from "./primitives-D0bdDozz.js";
+import { t as o } from "./badge-CxOuTfVr.js";
 import { t as s } from "./strings-Co9_qArR.js";
 import { CheckIcon as c, CircleAlertIcon as l, ClockIcon as u, FileIcon as d, ImageIcon as f, ImagePlusIcon as p, Loader2Icon as m, PaperclipIcon as h, PencilIcon as g, RotateCwIcon as _, TrashIcon as v, UploadCloudIcon as y, UserIcon as b, XIcon as x } from "lucide-react";
 import { useCallback as S, useEffect as C, useId as w, useMemo as T, useRef as E, useState as D } from "react";

package/dist/{value-inputs-DnQKmVqW.js → value-inputs-Q4ymjXlV.js}

@@ -1,11 +1,10 @@
-import "./css/value-inputs.css";
 import { t as e } from "./cx--CBrhWH0.js";
 import { o as t } from "./typography-BkxEiwQ1.js";
-import { d as n } from "./display-Dehpw83R.js";
+import { d as n } from "./display-B3Q17h5z.js";
 import { o as r } from "./structure-D0WGQAP3.js";
-import { d as i, l as a } from "./text-inputs-BBpgIQEI.js";
-import { s as o } from "./choice-inputs-BjZYCdzk.js";
-import { c as s, u as c } from "./date-pickers-1_Ah7qWO.js";
+import { d as i, l as a } from "./text-inputs-DF_lD7pA.js";
+import { s as o } from "./choice-inputs-OUDn0kQw.js";
+import { c as s, u as c } from "./date-pickers-DOwIT-Nk.js";
 import { XIcon as l } from "lucide-react";
 import * as u from "react";
 import { forwardRef as d, useCallback as f, useId as p, useMemo as m, useRef as h, useState as g } from "react";

package/docs/README.md

@@ -5,26 +5,28 @@ Documents are grouped by audience. The first three directories ship in the npm p
 | Directory | Audience | What belongs there |
 |---|---|---|
 | `learn/` | **Learn** | Installation, composition, framework wiring, provider and scoping, theming, forms, i18n, troubleshooting, verification, and migration policy. |
-| `generated/` | **Components** | The exact public API — imports, props, types, CSS paths, recipes, and choose/avoid guidance. Machine-written, never hand-edited. |
+| `generated/` | **Components** | The exact public API — imports, props, types, CSS paths, recipes, and choose/avoid guidance. Written by generators, never edited by hand. |
 | `build/` | **Build** | Adaptable live-preview recipes, with surrounding app-owned responsibilities called out. |
-| `maintainers/` | **Maintainer diagnostics** | Architecture reasoning, audits, and package workflow. Repository only; not instructions to consumers. |
-| `adr/` | Decisions | Why an expensive or irreversible choice was made, and what evidence would justify revisiting it. |
+| `adr/` | Decisions | Why an expensive or irreversible choice was made, and what evidence would justify revisiting it. Repository only. |
 
 ## The generated surface
 
+Generated from the source by the package build and shipped in the package, not committed to
+the repository: in a clone, `npm run build:lib` writes it.
+
 ```text
-docs/generated/imports.md               every family's exact JS and CSS import
+docs/generated/imports.md               every module's exact JS and CSS import
 docs/generated/public-api.md            every public symbol, its subpath, its page
-docs/generated/profiles.md              which families each profile ships
-docs/generated/component-index.json     the machine surface — agent skills read this
-docs/generated/components/              one complete API reference per family
+docs/generated/profiles.md              which modules each profile ships
+docs/generated/component-index.json     the machine-readable catalogue the component finder and the skill read
+docs/generated/components/              one complete API reference per module
 docs/generated/recipes.json             live-preview recipes, keyed by task
 ```
 
 ## Where to start
 
 Start with [Installation](./learn/installation.md), then read
-[Composition](./learn/composition.md). Choose a family from the generated
+[Composition](./learn/composition.md). Choose a module from the generated
 [component API](./generated/components/INDEX.md), use [Framework wiring](./learn/framework-wiring.md)
 to connect application policy, and finish with the [consumer verification](./learn/verification.md)
 matrix. [Troubleshooting](./learn/troubleshooting.md) covers the common integration failures.
@@ -36,15 +38,8 @@ components, selection reasons and API anchors:
 node node_modules/themelia-ui/scripts/consumer/find-component.mjs "mobile filters for a table" --explain
 ```
 
-## Maintaining these documents
-
-In a repository checkout, start with `docs/maintainers/component-workflow.md`. Regenerate the
-generated surface with `npm run docs:sync-skill`, which builds and checks the API first.
-`verify docs-freshness` fails when a generated file differs from its generator's output,
-when prose names a retired directory, or when a document cites an `npm run` script that does
-not exist.
+## Working on the library
 
-Prose must not restate a fact the generator owns, such as a family or layer count; link to
-the generated file instead. A document that is finished history declares `**Historical.**` in
-its opening lines, which exempts it from the dead-script rule. `prior-attempt/` and
-`superpowers/` are archives; nothing current links into them.
+Setup, the repository layout, the checks, how these documents are generated and how a release
+is cut are in [CONTRIBUTING.md](https://github.com/nicolasvlachos/themelia-ui/blob/master/CONTRIBUTING.md)
+at the repository root.