@yarcl/react 0.1.0 → 0.2.0

package/dist/reference/DesignReference.js

@@ -0,0 +1,403 @@
+import { useConfig } from "../runtime.js";
+import { Button } from "../components/Button.js";
+import { IconButton } from "../components/IconButton.js";
+import { Input } from "../components/Input.js";
+import { Text } from "../components/Text.js";
+import { Heading } from "../components/Heading.js";
+import { Stack } from "../components/Stack.js";
+import { Inline } from "../components/Inline.js";
+import { Card } from "../components/Card.js";
+import { Table } from "../components/Table.js";
+import { contrast, parseHex, readableOn } from "../color.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import "./reference.css";
+//#region src/reference/DesignReference.tsx
+var keys = (group) => Object.keys(group);
+function ratio(background, token, mode) {
+	const bg = parseHex(background);
+	if (!bg) return "n/a";
+	const onValue = typeof token.on === "string" ? token.on : token.on?.[mode];
+	const fg = parseHex(onValue ?? readableOn(bg));
+	return fg ? `${contrast(bg, fg).toFixed(1)}:1` : "n/a";
+}
+function Section({ title, description, children }) {
+	return /* @__PURE__ */ jsxs(Stack, {
+		as: "section",
+		className: "yarcl-ref-section",
+		children: [
+			/* @__PURE__ */ jsx(Heading, {
+				level: 2,
+				children: title
+			}),
+			description != null && /* @__PURE__ */ jsx(Text, {
+				as: "p",
+				muted: true,
+				children: description
+			}),
+			children
+		]
+	});
+}
+function Code({ children }) {
+	return /* @__PURE__ */ jsx("code", {
+		className: "yarcl-ref-code",
+		children
+	});
+}
+function KeyValues({ caption, rows }) {
+	const config = useConfig();
+	return /* @__PURE__ */ jsx(Table, {
+		caption,
+		density: config.defaults.density,
+		children: /* @__PURE__ */ jsx(Table.Body, { children: rows.map(([key, value]) => /* @__PURE__ */ jsxs(Table.Row, { children: [/* @__PURE__ */ jsx(Table.HeaderCell, {
+			scope: "row",
+			children: key
+		}), /* @__PURE__ */ jsx(Table.Cell, { children: value })] }, key)) })
+	});
+}
+var pair = (value) => /* @__PURE__ */ jsxs(Fragment, { children: [
+	/* @__PURE__ */ jsx(Code, { children: value.light }),
+	" / ",
+	/* @__PURE__ */ jsx(Code, { children: value.dark })
+] });
+/**
+* A living reference of the active design system, rendered from the consumer's config:
+* colors with contrast ratios, the size scale with live controls, radii, variants, spacing,
+* shadows, fonts, text styles, heading levels, density, other tokens and defaults.
+* Import from `@yarcl/react/reference`.
+*
+* @example
+* ```tsx
+* import { DesignReference } from '@yarcl/react/reference';
+*
+* <DesignReference title="Acme design system" />
+* ```
+*/
+function DesignReference({ title = "Design reference" }) {
+	const config = useConfig();
+	const shape = config;
+	const colors = keys(config.colors);
+	const variants = keys(config.variants);
+	const { typography } = shape;
+	return /* @__PURE__ */ jsxs(Stack, {
+		gap: config.defaults.padding,
+		className: "yarcl-ref",
+		children: [
+			/* @__PURE__ */ jsx(Heading, {
+				level: 1,
+				children: title
+			}),
+			/* @__PURE__ */ jsx(Section, {
+				title: "Colors",
+				description: "Semantic colors for the color prop. Ratios are foreground on background, light / dark.",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "yarcl-ref-grid",
+					children: colors.map((key) => {
+						const token = shape.colors[key];
+						return /* @__PURE__ */ jsxs(Card, {
+							padding: config.defaults.gap,
+							className: "yarcl-ref-color",
+							children: [/* @__PURE__ */ jsx("div", {
+								className: `yarcl-ref-swatch yarcl-color-${key}`,
+								children: "Aa"
+							}), /* @__PURE__ */ jsxs(Stack, {
+								gap: config.defaults.gap,
+								children: [
+									/* @__PURE__ */ jsx(Text, {
+										textStyle: config.defaults.labelStyle,
+										children: key
+									}),
+									/* @__PURE__ */ jsx(Text, {
+										textStyle: config.defaults.helperStyle,
+										muted: true,
+										children: pair(token)
+									}),
+									/* @__PURE__ */ jsxs(Text, {
+										textStyle: config.defaults.helperStyle,
+										muted: true,
+										children: [
+											ratio(token.light, token, "light"),
+											" / ",
+											ratio(token.dark, token, "dark")
+										]
+									})
+								]
+							})]
+						}, key);
+					})
+				})
+			}),
+			/* @__PURE__ */ jsx(Section, {
+				title: "Neutrals",
+				description: "Backgrounds, text and borders.",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "yarcl-ref-grid",
+					children: Object.entries(shape.neutrals).map(([key, value]) => /* @__PURE__ */ jsxs(Card, {
+						padding: config.defaults.gap,
+						className: "yarcl-ref-color",
+						children: [
+							/* @__PURE__ */ jsx("div", {
+								className: "yarcl-ref-swatch yarcl-ref-neutral",
+								style: { background: `var(--yarcl-neutral-${key})` }
+							}),
+							/* @__PURE__ */ jsx(Text, {
+								textStyle: config.defaults.labelStyle,
+								children: key
+							}),
+							/* @__PURE__ */ jsx(Text, {
+								textStyle: config.defaults.helperStyle,
+								muted: true,
+								children: pair(value)
+							})
+						]
+					}, key))
+				})
+			}),
+			/* @__PURE__ */ jsx(Section, {
+				title: "Sizes",
+				description: "The base scale shared by every control, before per-component overrides.",
+				children: /* @__PURE__ */ jsxs(Table, {
+					caption: "Control sizes",
+					density: config.defaults.density,
+					children: [/* @__PURE__ */ jsx(Table.Head, { children: /* @__PURE__ */ jsxs(Table.Row, { children: [
+						/* @__PURE__ */ jsx(Table.HeaderCell, { children: "Size" }),
+						/* @__PURE__ */ jsx(Table.HeaderCell, { children: "Height" }),
+						/* @__PURE__ */ jsx(Table.HeaderCell, { children: "Padding X" }),
+						/* @__PURE__ */ jsx(Table.HeaderCell, { children: "Font" }),
+						/* @__PURE__ */ jsx(Table.HeaderCell, { children: "Icon" }),
+						/* @__PURE__ */ jsx(Table.HeaderCell, { children: "Preview" })
+					] }) }), /* @__PURE__ */ jsx(Table.Body, { children: keys(config.sizes).map((key) => {
+						const size = shape.sizes[key];
+						return /* @__PURE__ */ jsxs(Table.Row, { children: [
+							/* @__PURE__ */ jsx(Table.HeaderCell, {
+								scope: "row",
+								children: key
+							}),
+							/* @__PURE__ */ jsx(Table.Cell, { children: /* @__PURE__ */ jsx(Code, { children: size.height }) }),
+							/* @__PURE__ */ jsx(Table.Cell, { children: /* @__PURE__ */ jsx(Code, { children: size.paddingX }) }),
+							/* @__PURE__ */ jsx(Table.Cell, { children: /* @__PURE__ */ jsx(Code, { children: size.fontSize }) }),
+							/* @__PURE__ */ jsx(Table.Cell, { children: /* @__PURE__ */ jsx(Code, { children: size.iconSize }) }),
+							/* @__PURE__ */ jsx(Table.Cell, { children: /* @__PURE__ */ jsxs(Inline, {
+								gap: config.defaults.gap,
+								wrap: false,
+								children: [
+									/* @__PURE__ */ jsx(Input, {
+										size: key,
+										placeholder: "Input",
+										"aria-label": `Input ${key}`,
+										className: "yarcl-ref-input"
+									}),
+									/* @__PURE__ */ jsx(Button, {
+										size: key,
+										children: "Button"
+									}),
+									/* @__PURE__ */ jsx(IconButton, {
+										size: key,
+										"aria-label": "Add",
+										children: "+"
+									})
+								]
+							}) })
+						] }, key);
+					}) })]
+				})
+			}),
+			/* @__PURE__ */ jsx(Section, {
+				title: "Radii",
+				description: shape.defaults.radius === "size" ? "Controls use the radius named like their size; other keys are exceptions." : `Default radius: ${shape.defaults.radius}.`,
+				children: /* @__PURE__ */ jsx(Inline, { children: keys(config.radii).map((key) => /* @__PURE__ */ jsxs(Stack, {
+					gap: config.defaults.gap,
+					align: "center",
+					children: [
+						/* @__PURE__ */ jsx("div", { className: `yarcl-ref-radius yarcl-radius-${key}` }),
+						/* @__PURE__ */ jsx(Text, {
+							textStyle: config.defaults.labelStyle,
+							children: key
+						}),
+						/* @__PURE__ */ jsx(Text, {
+							textStyle: config.defaults.helperStyle,
+							muted: true,
+							children: /* @__PURE__ */ jsx(Code, { children: shape.radii[key] })
+						})
+					]
+				}, key)) })
+			}),
+			/* @__PURE__ */ jsx(Section, {
+				title: "Variants",
+				description: "Recipes applied on top of any color.",
+				children: variants.map((key) => {
+					const recipe = shape.variants[key];
+					return /* @__PURE__ */ jsxs(Inline, { children: [
+						/* @__PURE__ */ jsx(Text, {
+							textStyle: config.defaults.labelStyle,
+							className: "yarcl-ref-label",
+							children: key
+						}),
+						colors.map((color) => /* @__PURE__ */ jsx(Button, {
+							variant: key,
+							color,
+							size: config.defaults.size,
+							children: color
+						}, color)),
+						/* @__PURE__ */ jsxs(Text, {
+							textStyle: config.defaults.helperStyle,
+							muted: true,
+							children: [
+								"background ",
+								/* @__PURE__ */ jsx(Code, { children: recipe.background }),
+								", border ",
+								/* @__PURE__ */ jsx(Code, { children: recipe.border }),
+								", text ",
+								/* @__PURE__ */ jsx(Code, { children: recipe.text })
+							]
+						})
+					] }, key);
+				})
+			}),
+			/* @__PURE__ */ jsx(Section, {
+				title: "Spacing",
+				children: keys(config.spacing).map((key) => /* @__PURE__ */ jsxs(Inline, { children: [
+					/* @__PURE__ */ jsx(Text, {
+						textStyle: config.defaults.labelStyle,
+						className: "yarcl-ref-label",
+						children: key
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "yarcl-ref-space",
+						style: { width: `var(--yarcl-space-${key})` }
+					}),
+					/* @__PURE__ */ jsx(Code, { children: shape.spacing[key] })
+				] }, key))
+			}),
+			/* @__PURE__ */ jsx(Section, {
+				title: "Shadows",
+				children: /* @__PURE__ */ jsx(Inline, {
+					gap: config.defaults.padding,
+					children: keys(config.shadows).map((key) => /* @__PURE__ */ jsx(Card, {
+						shadow: key,
+						className: "yarcl-ref-shadow",
+						children: /* @__PURE__ */ jsx(Text, {
+							textStyle: config.defaults.labelStyle,
+							children: key
+						})
+					}, key))
+				})
+			}),
+			/* @__PURE__ */ jsxs(Section, {
+				title: "Typography",
+				children: [
+					(typography.fontFaces?.length ?? 0) > 0 && /* @__PURE__ */ jsxs(Table, {
+						caption: "Font files",
+						density: config.defaults.density,
+						children: [/* @__PURE__ */ jsx(Table.Head, { children: /* @__PURE__ */ jsxs(Table.Row, { children: [
+							/* @__PURE__ */ jsx(Table.HeaderCell, { children: "Family" }),
+							/* @__PURE__ */ jsx(Table.HeaderCell, { children: "Source" }),
+							/* @__PURE__ */ jsx(Table.HeaderCell, { children: "Weight" }),
+							/* @__PURE__ */ jsx(Table.HeaderCell, { children: "Style" })
+						] }) }), /* @__PURE__ */ jsx(Table.Body, { children: typography.fontFaces.map((face, i) => /* @__PURE__ */ jsxs(Table.Row, { children: [
+							/* @__PURE__ */ jsx(Table.Cell, { children: face.family }),
+							/* @__PURE__ */ jsx(Table.Cell, { children: /* @__PURE__ */ jsx(Code, { children: [face.src].flat().join(", ") }) }),
+							/* @__PURE__ */ jsx(Table.Cell, { children: face.weight ?? "n/a" }),
+							/* @__PURE__ */ jsx(Table.Cell, { children: face.style ?? "normal" })
+						] }, i)) })]
+					}),
+					/* @__PURE__ */ jsx(KeyValues, {
+						caption: "Families",
+						rows: Object.entries(typography.families).map(([key, stack]) => [key, /* @__PURE__ */ jsxs("span", {
+							style: { fontFamily: `var(--yarcl-font-${key})` },
+							children: ["The quick brown fox ", /* @__PURE__ */ jsx(Code, { children: stack })]
+						})])
+					}),
+					/* @__PURE__ */ jsx(Table, {
+						caption: "Text styles",
+						density: config.defaults.density,
+						children: /* @__PURE__ */ jsx(Table.Body, { children: keys(config.typography.styles).map((key) => {
+							const style = typography.styles[key];
+							return /* @__PURE__ */ jsxs(Table.Row, { children: [
+								/* @__PURE__ */ jsx(Table.HeaderCell, {
+									scope: "row",
+									children: key
+								}),
+								/* @__PURE__ */ jsx(Table.Cell, { children: /* @__PURE__ */ jsx(Text, {
+									textStyle: key,
+									children: "The quick brown fox"
+								}) }),
+								/* @__PURE__ */ jsx(Table.Cell, { children: /* @__PURE__ */ jsxs(Text, {
+									textStyle: config.defaults.helperStyle,
+									muted: true,
+									children: [
+										style.family,
+										" · ",
+										style.size,
+										" · ",
+										style.weight,
+										" · ",
+										style.lineHeight,
+										style.letterSpacing ? ` · ${style.letterSpacing}` : ""
+									]
+								}) })
+							] }, key);
+						}) })
+					}),
+					/* @__PURE__ */ jsx(KeyValues, {
+						caption: "Heading levels",
+						rows: [
+							"h1",
+							"h2",
+							"h3",
+							"h4",
+							"h5",
+							"h6"
+						].map((level) => [level, /* @__PURE__ */ jsx(Text, {
+							textStyle: config.typography.headings[level],
+							children: typography.headings[level]
+						})])
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx(Section, {
+				title: "Modal sizes",
+				description: "Widths of dialogs and drawers.",
+				children: /* @__PURE__ */ jsx(KeyValues, {
+					caption: "Modal sizes",
+					rows: Object.entries(shape.modalSizes).map(([key, value]) => [key, /* @__PURE__ */ jsx(Code, { children: value })])
+				})
+			}),
+			/* @__PURE__ */ jsx(Section, {
+				title: "Density",
+				children: /* @__PURE__ */ jsx(KeyValues, {
+					caption: "Table density",
+					rows: keys(config.density).map((key) => {
+						const density = shape.density[key];
+						return [key, /* @__PURE__ */ jsx(Code, { children: `${density.paddingY} ${density.paddingX} · ${density.fontSize}` })];
+					})
+				})
+			}),
+			/* @__PURE__ */ jsx(Section, {
+				title: "Other tokens",
+				children: /* @__PURE__ */ jsx(KeyValues, {
+					caption: "Layers, motion, borders and focus",
+					rows: [
+						...Object.entries(shape.zIndex).map(([k, v]) => [`zIndex.${k}`, /* @__PURE__ */ jsx(Code, { children: v })]),
+						...Object.entries(shape.motion).map(([k, v]) => [`motion.${k}`, /* @__PURE__ */ jsx(Code, { children: v })]),
+						...Object.entries(shape.borders).map(([k, v]) => [`borders.${k}`, /* @__PURE__ */ jsx(Code, { children: v })]),
+						["focusRing", /* @__PURE__ */ jsx(Code, { children: `${shape.focusRing.width} · offset ${shape.focusRing.offset} · ${shape.focusRing.color}` })]
+					]
+				})
+			}),
+			/* @__PURE__ */ jsxs(Section, {
+				title: "Defaults",
+				description: "Values used when a component prop is omitted: the prop, then an enclosing group, then component defaults, then global defaults.",
+				children: [Object.keys(shape.components ?? {}).length > 0 && /* @__PURE__ */ jsx(KeyValues, {
+					caption: "Component defaults",
+					rows: Object.entries(shape.components ?? {}).map(([name, values]) => [name, /* @__PURE__ */ jsx(Code, { children: Object.entries(values ?? {}).map(([prop, value]) => `${prop}: ${value}`).join(" · ") })])
+				}), /* @__PURE__ */ jsx(KeyValues, {
+					caption: "Global defaults",
+					rows: Object.entries(shape.defaults).map(([key, value]) => [key, /* @__PURE__ */ jsx(Code, { children: value })])
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { DesignReference };

package/dist/reference/index.js

@@ -0,0 +1,2 @@
+import { DesignReference } from "./DesignReference.js";
+export { DesignReference };

package/dist/rollup.cjs

@@ -0,0 +1,5 @@
+let e=require("node:fs"),t=require("node:fs/promises"),n=require("node:module"),r=require("node:path"),i=require("jiti"),a=require("unplugin"),o=require("jsonc-parser");function s(e){let t=e.trim().replace(/^#/,``);if(!/^([0-9a-f]{3}|[0-9a-f]{6})$/i.test(t))return null;let n=t.length===3?[...t].map(e=>e+e).join(``):t;return[0,2,4].map(e=>parseInt(n.slice(e,e+2),16))}function c([e,t,n]){let[r,i,a]=[e,t,n].map(e=>{let t=e/255;return t<=.03928?t/12.92:((t+.055)/1.055)**2.4});return .2126*r+.7152*i+.0722*a}function l(e,t){let[n,r]=[c(e),c(t)].sort((e,t)=>t-e);return(n+.05)/(r+.05)}var u=[255,255,255],d=[0,0,0];function f(e,t,n){return e.map((e,r)=>Math.round(e+(t[r]-e)*n))}function p(e){return`#${e.map(e=>e.toString(16).padStart(2,`0`)).join(``)}`}function m(e,t,n,r){for(let i=0;i<=20;i++){let a=f(e,n,i/20);if(t.every(e=>l(a,e)>=r))return a}return n}function h(e){return l(e,u)>=l(e,d)?`#ffffff`:`#000000`}var g=4.5;function _(e){return e.replace(/[^a-zA-Z0-9_-]/g,e=>`\\${e}`)}function v({light:e,dark:t}){return e===t?e:`light-dark(${e}, ${t})`}function y(e,t,n){let r=[`light`,`dark`],i=typeof t.on==`string`?{light:t.on,dark:t.on}:t.on,a=r.map(r=>{let a=s(t[r]);if(i){let t=s(i[r]);return a&&t&&l(a,t)<g&&n(`colors.${e}: ${r} foreground contrast ${l(a,t).toFixed(2)}:1 is below ${g}:1`),i[r]}if(!a)return n(`colors.${e}: cannot compute a ${r} foreground from "${t[r]}"; use a hex value or set \`on\``),`#ffffff`;let o=h(a),c=l(a,s(o));return c<g&&n(`colors.${e}: best ${r} foreground contrast is ${c.toFixed(2)}:1, below ${g}:1`),o});return v({light:a[0],dark:a[1]})}var b=e=>`color-mix(in oklab, var(--yarcl-c) ${e}%, transparent)`,x=e=>`color-mix(in oklab, var(--yarcl-c), var(--yarcl-c-on) ${e}%)`,S={fill:[`var(--yarcl-c)`,x(12),x(20)],tint:[b(14),b(22),b(30)],none:[`transparent`,b(10),b(18)]},C={color:`var(--yarcl-c)`,neutral:`var(--yarcl-neutral-border)`,none:`transparent`},w={on:`var(--yarcl-c-on)`,color:`var(--yarcl-c-text)`,neutral:`var(--yarcl-neutral-text)`},T={woff2:`woff2`,woff:`woff`,ttf:`truetype`,otf:`opentype`};function E(e){let t=(Array.isArray(e.src)?e.src:[e.src]).map(e=>{if(e.startsWith(`local(`))return e;let t=T[e.split(/[?#]/)[0].split(`.`).pop()?.toLowerCase()??``];return`url(${JSON.stringify(e)})${t?` format("${t}")`:``}`});return k(`@font-face`,[[`font-family`,JSON.stringify(e.family)],[`src`,t.join(`, `)],...e.weight==null?[]:[[`font-weight`,e.weight]],...e.style?[[`font-style`,e.style]]:[],[`font-display`,e.display??`swap`]])}var D=[0,.14,.22];function O(e,t,n){if(t.text)return v(typeof t.text==`string`?{light:t.text,dark:t.text}:t.text);let r=[`light`,`dark`].map(e=>{let r=s(t[e]),i=s(n.text[e]),a=[s(n.bg[e]),s(n.surface[e])];return!r||!i||a.some(e=>!e)?t[e]:p(m(r,a.flatMap(e=>D.map(t=>f(e,r,t))),i,g))});return v({light:r[0],dark:r[1]})}function k(e,t){return`${e} {\n${t.map(([e,t])=>`  ${e}: ${t};`).join(`
+`)}\n}`}var A={height:`h`,paddingX:`px`,fontSize:`fs`,iconSize:`icon`};function j(e,t=()=>{}){let n=[[`color-scheme`,`light dark`]],r=[];for(let[i,a]of Object.entries(e.colors)){let o=_(i);n.push([`--yarcl-color-${o}`,v(a)],[`--yarcl-color-${o}-on`,y(i,a,t)],[`--yarcl-color-${o}-text`,O(i,a,e.neutrals)]),r.push(k(`.yarcl-color-${o}`,[[`--yarcl-c`,`var(--yarcl-color-${o})`],[`--yarcl-c-on`,`var(--yarcl-color-${o}-on)`],[`--yarcl-c-text`,`var(--yarcl-color-${o}-text)`]]))}for(let[t,r]of Object.entries(e.neutrals))n.push([`--yarcl-neutral-${_(t)}`,v(r)]);for(let[t,i]of Object.entries(e.sizes)){let e=_(t);n.push([`--yarcl-size-${e}-height`,i.height],[`--yarcl-size-${e}-padding-x`,i.paddingX],[`--yarcl-size-${e}-font-size`,i.fontSize],[`--yarcl-size-${e}-icon-size`,i.iconSize]),r.push(k(`.yarcl-size-${e}`,[[`--yarcl-h`,`var(--yarcl-size-${e}-height)`],[`--yarcl-px`,`var(--yarcl-size-${e}-padding-x)`],[`--yarcl-fs`,`var(--yarcl-size-${e}-font-size)`],[`--yarcl-icon`,`var(--yarcl-size-${e}-icon-size)`]]))}for(let[t,{sizeOverrides:n}]of Object.entries(e.components??{}))for(let[e,i]of Object.entries(n??{})){let n=Object.entries(i).map(([e,t])=>[`--yarcl-${A[e]}`,t]),a=`.yarcl-sized-${_(t)}`,o=`.yarcl-size-${_(e)}`;n.length&&r.push(k(`${a}${o},\n${a}${a} ${o}`,n))}for(let[t,i]of Object.entries(e.radii)){let e=_(t);n.push([`--yarcl-radius-${e}`,i]),r.push(k(`.yarcl-radius-${e}`,[[`--yarcl-r`,`var(--yarcl-radius-${e})`]]))}for(let[t,n]of Object.entries(e.variants)){let[e,i,a]=S[n.background];r.push(k(`.yarcl-variant-${_(t)}`,[[`--yarcl-v-bg`,e],[`--yarcl-v-bg-hover`,i],[`--yarcl-v-bg-active`,a],[`--yarcl-v-border`,C[n.border]],[`--yarcl-v-fg`,w[n.text]]]))}for(let[t,i]of Object.entries(e.spacing)){let e=_(t);n.push([`--yarcl-space-${e}`,i]),r.push(k(`.yarcl-gap-${e}`,[[`--yarcl-component-gap`,`var(--yarcl-space-${e})`]]),k(`.yarcl-padding-${e}`,[[`--yarcl-component-padding`,`var(--yarcl-space-${e})`]]))}for(let[t,i]of Object.entries(e.shadows)){let e=_(t);n.push([`--yarcl-shadow-${e}`,i]),r.push(k(`.yarcl-shadow-${e}`,[[`box-shadow`,`var(--yarcl-shadow-${e})`]]))}for(let[t,i]of Object.entries(e.modalSizes)){let e=_(t);n.push([`--yarcl-modal-${e}`,i]),r.push(k(`.yarcl-modal-size-${e}`,[[`--yarcl-modal-width`,`var(--yarcl-modal-${e})`]]))}for(let[t,n]of Object.entries(e.density))r.push(k(`.yarcl-density-${_(t)}`,[[`--yarcl-cell-px`,n.paddingX],[`--yarcl-cell-py`,n.paddingY],[`--yarcl-cell-fs`,n.fontSize]]));for(let[t,r]of Object.entries(e.typography.families))n.push([`--yarcl-font-${_(t)}`,r]);for(let[t,n]of Object.entries(e.typography.styles))r.push(k(`.yarcl-type-${_(t)}`,[[`font-family`,`var(--yarcl-font-${_(n.family)})`],[`font-size`,n.size],[`font-weight`,n.weight],[`line-height`,n.lineHeight],...n.letterSpacing?[[`letter-spacing`,n.letterSpacing]]:[]]));for(let[t,r]of Object.entries(e.zIndex))n.push([`--yarcl-z-${_(t)}`,r]);for(let[t,r]of Object.entries(e.motion))n.push([`--yarcl-motion-${_(t)}`,r]);for(let[t,r]of Object.entries(e.borders))n.push([`--yarcl-border-${_(t)}`,r]);let i=_(e.defaults.size),a=e.defaults.radius===`size`?i:_(e.defaults.radius);return n.push([`--yarcl-focus-width`,e.focusRing.width],[`--yarcl-focus-offset`,e.focusRing.offset],[`--yarcl-focus-style`,e.focusRing.style??`solid`],[`--yarcl-focus-color`,`var(--yarcl-color-${_(e.focusRing.color)})`],[`--yarcl-error`,`var(--yarcl-color-${_(e.defaults.errorColor)})`],[`--yarcl-floating-shadow`,`var(--yarcl-shadow-${_(e.defaults.floatingShadow)})`],[`--yarcl-padding`,`var(--yarcl-space-${_(e.defaults.padding)})`],[`--yarcl-gap`,`var(--yarcl-space-${_(e.defaults.gap)})`],[`--yarcl-h`,`var(--yarcl-size-${i}-height)`],[`--yarcl-px`,`var(--yarcl-size-${i}-padding-x)`],[`--yarcl-fs`,`var(--yarcl-size-${i}-font-size)`],[`--yarcl-icon`,`var(--yarcl-size-${i}-icon-size)`],[`--yarcl-r`,`var(--yarcl-radius-${a}, 0)`]),[...(e.typography.fontFaces??[]).map(E),k(`:root`,n),...r].join(`
+
+`)+`
+`}var M=`@yarcl/config`,N=[`tsconfig.app.json`,`tsconfig.json`];function P(t){return N.map(e=>(0,r.resolve)(t,e)).find(t=>(0,e.existsSync)(t))}function F(e,t){let n=(0,r.relative)(e,t).split(r.sep).join(`/`);return n.startsWith(`.`)?n:`./${n}`}function I(t,n,i=`build tool`){let a=P(t);if(!a)throw Error(`yarcl: No tsconfig.app.json or tsconfig.json found in ${t}. Run "yarcl init".`);let s=[],c=(0,o.parse)((0,e.readFileSync)(a,`utf8`),s,{allowTrailingComma:!0});if(s.length>0)throw Error(`yarcl: Could not parse ${F(t,a)}.`);let l=c?.compilerOptions?.paths?.[M],u=(0,r.resolve)(t,n),d=Array.isArray(l)&&typeof l[0]==`string`?(0,r.resolve)((0,r.dirname)(a),l[0]):void 0;if(d===u)return;let f=d?`"${F(t,d)}"`:`no path`;throw Error(`yarcl: Config path mismatch. ${i} uses "${n}", but ${F(t,a)} has ${f} for "${M}". Run "yarcl init --config ${n}".`)}var L=`@yarcl/react/styles.css`,R=`\0${L}`,z=`@yarcl/config`,B=`@yarcl/react`,V=(0,n.createRequire)(typeof __filename==`string`?__filename:{}.url),H=[``,`.ts`,`.tsx`,`.mts`,`.cts`,`.js`,`.jsx`,`.mjs`,`.cjs`,`.json`],U=/(?:\bimport\s*(?:[\s\S]*?\sfrom\s*)?|\bexport\s*[\s\S]*?\sfrom\s*|\bimport\s*\()(['"])(\.{1,2}\/[^'"]+)\1/g;function W(t,n){let i=(0,r.resolve)((0,r.dirname)(t),n);for(let t of H){let n=`${i}${t}`;if((0,e.existsSync)(n))return n}for(let t of H.slice(1)){let n=(0,r.resolve)(i,`index${t}`);if((0,e.existsSync)(n))return n}}async function G(e){let n=new Set,i=async e=>{if(n.has(e)||(n.add(e),(0,r.extname)(e)===`.json`))return;let a=[...(await(0,t.readFile)(e,`utf8`)).matchAll(U)].map(t=>W(e,t[2])).filter(e=>e!==void 0);await Promise.all(a.map(i))};return await i(e),n}function K(){return V.resolve(`@yarcl/react/defaults`)}var q=(0,a.createUnplugin)((n={},a)=>{let o=n.config??`src/yarcl.config.ts`,s=(0,r.resolve)(n.root??process.cwd()),c=``,l=``,u=``,d=``,f=``,p=new Set,m=()=>{I(s,o,a.framework);let t=(0,r.resolve)(s,o),n=K();c=(0,e.existsSync)(t)?t:n,d=(0,r.resolve)((0,r.dirname)(n),`styles.css`),f=(0,r.resolve)((0,r.dirname)(n),`reference/reference.css`)};return{name:`yarcl`,enforce:`pre`,buildStart(){m()},resolveId:{filter:{id:/^(?:@yarcl\/config|@yarcl\/react\/styles\.css)$/},handler(e){if(e===z)return a.framework===`esbuild`?void 0:c;if(e===L)return R}},load:{filter:{id:/(?:@yarcl\/react\/styles\.css|\/(?:styles|reference)\.css)$/},async handler(n){if(a.framework===`rollup`&&(n===d||n===f))return l+=`${await(0,t.readFile)(n,`utf8`)}\n`,``;if(n!==R)return;let o=await(0,i.createJiti)((0,r.resolve)(s,`package.json`),{moduleCache:!1}).import(c,{default:!0});p=(0,e.existsSync)(c)?await G(c):new Set([c]),p.forEach(e=>this.addWatchFile(e));let m=j(o,e=>this.warn(e));return a.framework===`rollup`?(u=m,``):m}},rollup:{generateBundle(){this.emitFile({type:`asset`,fileName:`yarcl.css`,source:`${u}\n${l}`})}},vite:{config(e){return s=(0,r.resolve)(n.root??e.root??process.cwd()),{optimizeDeps:{exclude:[B],include:[`@floating-ui/react`,`date-fns`,`date-fns/locale`,`date-fns/locale/en-US`].map(e=>`${B} > ${e}`)},ssr:{noExternal:[B]}}},handleHotUpdate({file:e,server:t,modules:n}){if(!p.has(e))return;let r=t.moduleGraph.getModuleById(R);if(r)return t.moduleGraph.invalidateModule(r),[...n,r]}},webpack(e){s=(0,r.resolve)(n.root??e.context)},rspack(e){s=(0,r.resolve)(n.root??e.context)},esbuild:{config(e){s=(0,r.resolve)(n.root??e.absWorkingDir??process.cwd()),m()},setup(e){e.onResolve({filter:/^@yarcl\/config$/},()=>({path:c}))},loader:`css`}}}).rollup;module.exports=q;

package/dist/rollup.d.ts

@@ -0,0 +1,4 @@
+/** Connects yarcl to Rollup. */
+declare const yarcl: (options?: import("./plugin").YarclPluginOptions | undefined) => import("unplugin").RollupPlugin<any> | import("unplugin").RollupPlugin<any>[];
+export type { YarclPluginOptions } from './plugin';
+export default yarcl;

package/dist/rollup.js

@@ -0,0 +1,6 @@
+import { yarclPlugin } from "./plugin.js";
+//#region src/rollup.ts
+/** Connects yarcl to Rollup. */
+var yarcl = yarclPlugin.rollup;
+//#endregion
+export { yarcl as default };

package/dist/rspack.cjs

@@ -0,0 +1,5 @@
+let e=require("node:fs"),t=require("node:fs/promises"),n=require("node:module"),r=require("node:path"),i=require("jiti"),a=require("unplugin"),o=require("jsonc-parser");function s(e){let t=e.trim().replace(/^#/,``);if(!/^([0-9a-f]{3}|[0-9a-f]{6})$/i.test(t))return null;let n=t.length===3?[...t].map(e=>e+e).join(``):t;return[0,2,4].map(e=>parseInt(n.slice(e,e+2),16))}function c([e,t,n]){let[r,i,a]=[e,t,n].map(e=>{let t=e/255;return t<=.03928?t/12.92:((t+.055)/1.055)**2.4});return .2126*r+.7152*i+.0722*a}function l(e,t){let[n,r]=[c(e),c(t)].sort((e,t)=>t-e);return(n+.05)/(r+.05)}var u=[255,255,255],d=[0,0,0];function f(e,t,n){return e.map((e,r)=>Math.round(e+(t[r]-e)*n))}function p(e){return`#${e.map(e=>e.toString(16).padStart(2,`0`)).join(``)}`}function m(e,t,n,r){for(let i=0;i<=20;i++){let a=f(e,n,i/20);if(t.every(e=>l(a,e)>=r))return a}return n}function h(e){return l(e,u)>=l(e,d)?`#ffffff`:`#000000`}var g=4.5;function _(e){return e.replace(/[^a-zA-Z0-9_-]/g,e=>`\\${e}`)}function v({light:e,dark:t}){return e===t?e:`light-dark(${e}, ${t})`}function y(e,t,n){let r=[`light`,`dark`],i=typeof t.on==`string`?{light:t.on,dark:t.on}:t.on,a=r.map(r=>{let a=s(t[r]);if(i){let t=s(i[r]);return a&&t&&l(a,t)<g&&n(`colors.${e}: ${r} foreground contrast ${l(a,t).toFixed(2)}:1 is below ${g}:1`),i[r]}if(!a)return n(`colors.${e}: cannot compute a ${r} foreground from "${t[r]}"; use a hex value or set \`on\``),`#ffffff`;let o=h(a),c=l(a,s(o));return c<g&&n(`colors.${e}: best ${r} foreground contrast is ${c.toFixed(2)}:1, below ${g}:1`),o});return v({light:a[0],dark:a[1]})}var b=e=>`color-mix(in oklab, var(--yarcl-c) ${e}%, transparent)`,x=e=>`color-mix(in oklab, var(--yarcl-c), var(--yarcl-c-on) ${e}%)`,S={fill:[`var(--yarcl-c)`,x(12),x(20)],tint:[b(14),b(22),b(30)],none:[`transparent`,b(10),b(18)]},C={color:`var(--yarcl-c)`,neutral:`var(--yarcl-neutral-border)`,none:`transparent`},w={on:`var(--yarcl-c-on)`,color:`var(--yarcl-c-text)`,neutral:`var(--yarcl-neutral-text)`},T={woff2:`woff2`,woff:`woff`,ttf:`truetype`,otf:`opentype`};function E(e){let t=(Array.isArray(e.src)?e.src:[e.src]).map(e=>{if(e.startsWith(`local(`))return e;let t=T[e.split(/[?#]/)[0].split(`.`).pop()?.toLowerCase()??``];return`url(${JSON.stringify(e)})${t?` format("${t}")`:``}`});return k(`@font-face`,[[`font-family`,JSON.stringify(e.family)],[`src`,t.join(`, `)],...e.weight==null?[]:[[`font-weight`,e.weight]],...e.style?[[`font-style`,e.style]]:[],[`font-display`,e.display??`swap`]])}var D=[0,.14,.22];function O(e,t,n){if(t.text)return v(typeof t.text==`string`?{light:t.text,dark:t.text}:t.text);let r=[`light`,`dark`].map(e=>{let r=s(t[e]),i=s(n.text[e]),a=[s(n.bg[e]),s(n.surface[e])];return!r||!i||a.some(e=>!e)?t[e]:p(m(r,a.flatMap(e=>D.map(t=>f(e,r,t))),i,g))});return v({light:r[0],dark:r[1]})}function k(e,t){return`${e} {\n${t.map(([e,t])=>`  ${e}: ${t};`).join(`
+`)}\n}`}var A={height:`h`,paddingX:`px`,fontSize:`fs`,iconSize:`icon`};function j(e,t=()=>{}){let n=[[`color-scheme`,`light dark`]],r=[];for(let[i,a]of Object.entries(e.colors)){let o=_(i);n.push([`--yarcl-color-${o}`,v(a)],[`--yarcl-color-${o}-on`,y(i,a,t)],[`--yarcl-color-${o}-text`,O(i,a,e.neutrals)]),r.push(k(`.yarcl-color-${o}`,[[`--yarcl-c`,`var(--yarcl-color-${o})`],[`--yarcl-c-on`,`var(--yarcl-color-${o}-on)`],[`--yarcl-c-text`,`var(--yarcl-color-${o}-text)`]]))}for(let[t,r]of Object.entries(e.neutrals))n.push([`--yarcl-neutral-${_(t)}`,v(r)]);for(let[t,i]of Object.entries(e.sizes)){let e=_(t);n.push([`--yarcl-size-${e}-height`,i.height],[`--yarcl-size-${e}-padding-x`,i.paddingX],[`--yarcl-size-${e}-font-size`,i.fontSize],[`--yarcl-size-${e}-icon-size`,i.iconSize]),r.push(k(`.yarcl-size-${e}`,[[`--yarcl-h`,`var(--yarcl-size-${e}-height)`],[`--yarcl-px`,`var(--yarcl-size-${e}-padding-x)`],[`--yarcl-fs`,`var(--yarcl-size-${e}-font-size)`],[`--yarcl-icon`,`var(--yarcl-size-${e}-icon-size)`]]))}for(let[t,{sizeOverrides:n}]of Object.entries(e.components??{}))for(let[e,i]of Object.entries(n??{})){let n=Object.entries(i).map(([e,t])=>[`--yarcl-${A[e]}`,t]),a=`.yarcl-sized-${_(t)}`,o=`.yarcl-size-${_(e)}`;n.length&&r.push(k(`${a}${o},\n${a}${a} ${o}`,n))}for(let[t,i]of Object.entries(e.radii)){let e=_(t);n.push([`--yarcl-radius-${e}`,i]),r.push(k(`.yarcl-radius-${e}`,[[`--yarcl-r`,`var(--yarcl-radius-${e})`]]))}for(let[t,n]of Object.entries(e.variants)){let[e,i,a]=S[n.background];r.push(k(`.yarcl-variant-${_(t)}`,[[`--yarcl-v-bg`,e],[`--yarcl-v-bg-hover`,i],[`--yarcl-v-bg-active`,a],[`--yarcl-v-border`,C[n.border]],[`--yarcl-v-fg`,w[n.text]]]))}for(let[t,i]of Object.entries(e.spacing)){let e=_(t);n.push([`--yarcl-space-${e}`,i]),r.push(k(`.yarcl-gap-${e}`,[[`--yarcl-component-gap`,`var(--yarcl-space-${e})`]]),k(`.yarcl-padding-${e}`,[[`--yarcl-component-padding`,`var(--yarcl-space-${e})`]]))}for(let[t,i]of Object.entries(e.shadows)){let e=_(t);n.push([`--yarcl-shadow-${e}`,i]),r.push(k(`.yarcl-shadow-${e}`,[[`box-shadow`,`var(--yarcl-shadow-${e})`]]))}for(let[t,i]of Object.entries(e.modalSizes)){let e=_(t);n.push([`--yarcl-modal-${e}`,i]),r.push(k(`.yarcl-modal-size-${e}`,[[`--yarcl-modal-width`,`var(--yarcl-modal-${e})`]]))}for(let[t,n]of Object.entries(e.density))r.push(k(`.yarcl-density-${_(t)}`,[[`--yarcl-cell-px`,n.paddingX],[`--yarcl-cell-py`,n.paddingY],[`--yarcl-cell-fs`,n.fontSize]]));for(let[t,r]of Object.entries(e.typography.families))n.push([`--yarcl-font-${_(t)}`,r]);for(let[t,n]of Object.entries(e.typography.styles))r.push(k(`.yarcl-type-${_(t)}`,[[`font-family`,`var(--yarcl-font-${_(n.family)})`],[`font-size`,n.size],[`font-weight`,n.weight],[`line-height`,n.lineHeight],...n.letterSpacing?[[`letter-spacing`,n.letterSpacing]]:[]]));for(let[t,r]of Object.entries(e.zIndex))n.push([`--yarcl-z-${_(t)}`,r]);for(let[t,r]of Object.entries(e.motion))n.push([`--yarcl-motion-${_(t)}`,r]);for(let[t,r]of Object.entries(e.borders))n.push([`--yarcl-border-${_(t)}`,r]);let i=_(e.defaults.size),a=e.defaults.radius===`size`?i:_(e.defaults.radius);return n.push([`--yarcl-focus-width`,e.focusRing.width],[`--yarcl-focus-offset`,e.focusRing.offset],[`--yarcl-focus-style`,e.focusRing.style??`solid`],[`--yarcl-focus-color`,`var(--yarcl-color-${_(e.focusRing.color)})`],[`--yarcl-error`,`var(--yarcl-color-${_(e.defaults.errorColor)})`],[`--yarcl-floating-shadow`,`var(--yarcl-shadow-${_(e.defaults.floatingShadow)})`],[`--yarcl-padding`,`var(--yarcl-space-${_(e.defaults.padding)})`],[`--yarcl-gap`,`var(--yarcl-space-${_(e.defaults.gap)})`],[`--yarcl-h`,`var(--yarcl-size-${i}-height)`],[`--yarcl-px`,`var(--yarcl-size-${i}-padding-x)`],[`--yarcl-fs`,`var(--yarcl-size-${i}-font-size)`],[`--yarcl-icon`,`var(--yarcl-size-${i}-icon-size)`],[`--yarcl-r`,`var(--yarcl-radius-${a}, 0)`]),[...(e.typography.fontFaces??[]).map(E),k(`:root`,n),...r].join(`
+
+`)+`
+`}var M=`@yarcl/config`,N=[`tsconfig.app.json`,`tsconfig.json`];function P(t){return N.map(e=>(0,r.resolve)(t,e)).find(t=>(0,e.existsSync)(t))}function F(e,t){let n=(0,r.relative)(e,t).split(r.sep).join(`/`);return n.startsWith(`.`)?n:`./${n}`}function I(t,n,i=`build tool`){let a=P(t);if(!a)throw Error(`yarcl: No tsconfig.app.json or tsconfig.json found in ${t}. Run "yarcl init".`);let s=[],c=(0,o.parse)((0,e.readFileSync)(a,`utf8`),s,{allowTrailingComma:!0});if(s.length>0)throw Error(`yarcl: Could not parse ${F(t,a)}.`);let l=c?.compilerOptions?.paths?.[M],u=(0,r.resolve)(t,n),d=Array.isArray(l)&&typeof l[0]==`string`?(0,r.resolve)((0,r.dirname)(a),l[0]):void 0;if(d===u)return;let f=d?`"${F(t,d)}"`:`no path`;throw Error(`yarcl: Config path mismatch. ${i} uses "${n}", but ${F(t,a)} has ${f} for "${M}". Run "yarcl init --config ${n}".`)}var L=`@yarcl/react/styles.css`,R=`\0${L}`,z=`@yarcl/config`,B=`@yarcl/react`,V=(0,n.createRequire)(typeof __filename==`string`?__filename:{}.url),H=[``,`.ts`,`.tsx`,`.mts`,`.cts`,`.js`,`.jsx`,`.mjs`,`.cjs`,`.json`],U=/(?:\bimport\s*(?:[\s\S]*?\sfrom\s*)?|\bexport\s*[\s\S]*?\sfrom\s*|\bimport\s*\()(['"])(\.{1,2}\/[^'"]+)\1/g;function W(t,n){let i=(0,r.resolve)((0,r.dirname)(t),n);for(let t of H){let n=`${i}${t}`;if((0,e.existsSync)(n))return n}for(let t of H.slice(1)){let n=(0,r.resolve)(i,`index${t}`);if((0,e.existsSync)(n))return n}}async function G(e){let n=new Set,i=async e=>{if(n.has(e)||(n.add(e),(0,r.extname)(e)===`.json`))return;let a=[...(await(0,t.readFile)(e,`utf8`)).matchAll(U)].map(t=>W(e,t[2])).filter(e=>e!==void 0);await Promise.all(a.map(i))};return await i(e),n}function K(){return V.resolve(`@yarcl/react/defaults`)}var q=(0,a.createUnplugin)((n={},a)=>{let o=n.config??`src/yarcl.config.ts`,s=(0,r.resolve)(n.root??process.cwd()),c=``,l=``,u=``,d=``,f=``,p=new Set,m=()=>{I(s,o,a.framework);let t=(0,r.resolve)(s,o),n=K();c=(0,e.existsSync)(t)?t:n,d=(0,r.resolve)((0,r.dirname)(n),`styles.css`),f=(0,r.resolve)((0,r.dirname)(n),`reference/reference.css`)};return{name:`yarcl`,enforce:`pre`,buildStart(){m()},resolveId:{filter:{id:/^(?:@yarcl\/config|@yarcl\/react\/styles\.css)$/},handler(e){if(e===z)return a.framework===`esbuild`?void 0:c;if(e===L)return R}},load:{filter:{id:/(?:@yarcl\/react\/styles\.css|\/(?:styles|reference)\.css)$/},async handler(n){if(a.framework===`rollup`&&(n===d||n===f))return l+=`${await(0,t.readFile)(n,`utf8`)}\n`,``;if(n!==R)return;let o=await(0,i.createJiti)((0,r.resolve)(s,`package.json`),{moduleCache:!1}).import(c,{default:!0});p=(0,e.existsSync)(c)?await G(c):new Set([c]),p.forEach(e=>this.addWatchFile(e));let m=j(o,e=>this.warn(e));return a.framework===`rollup`?(u=m,``):m}},rollup:{generateBundle(){this.emitFile({type:`asset`,fileName:`yarcl.css`,source:`${u}\n${l}`})}},vite:{config(e){return s=(0,r.resolve)(n.root??e.root??process.cwd()),{optimizeDeps:{exclude:[B],include:[`@floating-ui/react`,`date-fns`,`date-fns/locale`,`date-fns/locale/en-US`].map(e=>`${B} > ${e}`)},ssr:{noExternal:[B]}}},handleHotUpdate({file:e,server:t,modules:n}){if(!p.has(e))return;let r=t.moduleGraph.getModuleById(R);if(r)return t.moduleGraph.invalidateModule(r),[...n,r]}},webpack(e){s=(0,r.resolve)(n.root??e.context)},rspack(e){s=(0,r.resolve)(n.root??e.context)},esbuild:{config(e){s=(0,r.resolve)(n.root??e.absWorkingDir??process.cwd()),m()},setup(e){e.onResolve({filter:/^@yarcl\/config$/},()=>({path:c}))},loader:`css`}}}).rspack;module.exports=q;

package/dist/rspack.d.ts

@@ -0,0 +1,4 @@
+/** Connects yarcl to Rspack. */
+declare const yarcl: (options?: import("./plugin").YarclPluginOptions | undefined) => import("unplugin").RspackPluginInstance;
+export type { YarclPluginOptions } from './plugin';
+export default yarcl;

package/dist/rspack.js

@@ -0,0 +1,6 @@
+import { yarclPlugin } from "./plugin.js";
+//#region src/rspack.ts
+/** Connects yarcl to Rspack. */
+var yarcl = yarclPlugin.rspack;
+//#endregion
+export { yarcl as default };

package/dist/runtime.d.ts

@@ -0,0 +1,13 @@
+import buildConfig from '@yarcl/config';
+import type { ComponentName, YarclShape } from './define';
+import type { ComponentDefaults } from './types';
+type Config = typeof buildConfig;
+export declare function activeConfig(): Config;
+export declare function setActiveConfig(next: YarclShape | null): void;
+/**
+ * The config components currently read their defaults from: the build-time config, or the
+ * theme passed to `applyTheme`. Re-renders the caller when the theme changes.
+ */
+export declare function useConfig(): Config;
+export declare function useDefaults(component: ComponentName): ComponentDefaults;
+export {};

package/dist/runtime.js

@@ -0,0 +1,30 @@
+import buildConfig from "@yarcl/config";
+import { useSyncExternalStore } from "react";
+//#region src/runtime.ts
+var active = buildConfig;
+var listeners = /* @__PURE__ */ new Set();
+function subscribe(listener) {
+	listeners.add(listener);
+	return () => {
+		listeners.delete(listener);
+	};
+}
+function activeConfig() {
+	return active;
+}
+function setActiveConfig(next) {
+	active = next ?? buildConfig;
+	listeners.forEach((listener) => listener());
+}
+/**
+* The config components currently read their defaults from: the build-time config, or the
+* theme passed to `applyTheme`. Re-renders the caller when the theme changes.
+*/
+function useConfig() {
+	return useSyncExternalStore(subscribe, activeConfig, () => buildConfig);
+}
+function useDefaults(component) {
+	return useConfig().components?.[component] ?? {};
+}
+//#endregion
+export { activeConfig, setActiveConfig, useConfig, useDefaults };

package/dist/setup.d.ts

@@ -0,0 +1,6 @@
+export declare const DEFAULT_CONFIG_PATH = "src/yarcl.config.ts";
+export declare const CONFIG_MODULE = "@yarcl/config";
+export declare function findTsconfig(root: string): string | undefined;
+export declare function projectPath(from: string, target: string): string;
+export declare function configMappings(root: string, tsconfig: string, configPath: string): string[];
+export declare function assertConfigMapping(root: string, configPath: string, buildTool?: string): void;

package/dist/setup.js

@@ -0,0 +1,33 @@
+import { existsSync, readFileSync } from "node:fs";
+import { dirname, relative, resolve, sep } from "node:path";
+import { parse } from "jsonc-parser";
+//#region src/setup.ts
+var DEFAULT_CONFIG_PATH = "src/yarcl.config.ts";
+var CONFIG_MODULE = "@yarcl/config";
+var tsconfigNames = ["tsconfig.app.json", "tsconfig.json"];
+function findTsconfig(root) {
+	return tsconfigNames.map((name) => resolve(root, name)).find((file) => existsSync(file));
+}
+function projectPath(from, target) {
+	const path = relative(from, target).split(sep).join("/");
+	return path.startsWith(".") ? path : `./${path}`;
+}
+function configMappings(root, tsconfig, configPath) {
+	const base = dirname(tsconfig);
+	return [projectPath(base, resolve(root, configPath)), projectPath(base, resolve(root, "node_modules/@yarcl/react/dist/yarcl.config.d.ts"))];
+}
+function assertConfigMapping(root, configPath, buildTool = "build tool") {
+	const tsconfig = findTsconfig(root);
+	if (!tsconfig) throw new Error(`yarcl: No tsconfig.app.json or tsconfig.json found in ${root}. Run "yarcl init".`);
+	const errors = [];
+	const config = parse(readFileSync(tsconfig, "utf8"), errors, { allowTrailingComma: true });
+	if (errors.length > 0) throw new Error(`yarcl: Could not parse ${projectPath(root, tsconfig)}.`);
+	const mapping = config?.compilerOptions?.paths?.[CONFIG_MODULE];
+	const expected = resolve(root, configPath);
+	const actual = Array.isArray(mapping) && typeof mapping[0] === "string" ? resolve(dirname(tsconfig), mapping[0]) : void 0;
+	if (actual === expected) return;
+	const current = actual ? `"${projectPath(root, actual)}"` : "no path";
+	throw new Error(`yarcl: Config path mismatch. ${buildTool} uses "${configPath}", but ${projectPath(root, tsconfig)} has ${current} for "${CONFIG_MODULE}". Run "yarcl init --config ${configPath}".`);
+}
+//#endregion
+export { CONFIG_MODULE, DEFAULT_CONFIG_PATH, assertConfigMapping, configMappings, findTsconfig, projectPath };