@yarcl/react 0.1.0 → 0.2.0

package/dist/css.d.ts

@@ -1,7 +1,7 @@
-import type { YarclShape } from './define.ts';
+import type { YarclShape } from './define';
 /**
  * Generates the stylesheet for a config: CSS variables on `:root`, one class per key and
- * `@font-face` rules. The Vite plugin calls this at build time; call it yourself to preview
+ * `@font-face` rules. The build plugin calls this at build time; call it yourself to preview
  * or switch themes at runtime (inject the result into a `<style>` element).
  *
  * @param config A config from `defineConfig`, e.g. one of `@yarcl/react/themes`.

package/dist/css.js

@@ -1,175 +1,211 @@
 import { contrast, mix, parseHex, readableOn, readableText, toHex } from "./color.js";
-const MIN_CONTRAST = 4.5;
+//#region src/css.ts
+var MIN_CONTRAST = 4.5;
 function ident(key) {
-    return key.replace(/[^a-zA-Z0-9_-]/g, (c) => `\\${c}`);
+	return key.replace(/[^a-zA-Z0-9_-]/g, (c) => `\\${c}`);
 }
 function pair({ light, dark }) {
-    return light === dark ? light : `light-dark(${light}, ${dark})`;
+	return light === dark ? light : `light-dark(${light}, ${dark})`;
 }
 function foreground(name, token, warn) {
-    const modes = ['light', 'dark'];
-    const on = typeof token.on === 'string' ? { light: token.on, dark: token.on } : token.on;
-    const resolved = modes.map((mode) => {
-        const bg = parseHex(token[mode]);
-        if (on) {
-            const fg = parseHex(on[mode]);
-            if (bg && fg && contrast(bg, fg) < MIN_CONTRAST) {
-                warn(`colors.${name}: ${mode} foreground contrast ${contrast(bg, fg).toFixed(2)}:1 is below ${MIN_CONTRAST}:1`);
-            }
-            return on[mode];
-        }
-        if (!bg) {
-            warn(`colors.${name}: cannot compute a ${mode} foreground from "${token[mode]}"; use a hex value or set \`on\``);
-            return '#ffffff';
-        }
-        const fg = readableOn(bg);
-        const ratio = contrast(bg, parseHex(fg));
-        if (ratio < MIN_CONTRAST) {
-            warn(`colors.${name}: best ${mode} foreground contrast is ${ratio.toFixed(2)}:1, below ${MIN_CONTRAST}:1`);
-        }
-        return fg;
-    });
-    return pair({ light: resolved[0], dark: resolved[1] });
+	const modes = ["light", "dark"];
+	const on = typeof token.on === "string" ? {
+		light: token.on,
+		dark: token.on
+	} : token.on;
+	const resolved = modes.map((mode) => {
+		const bg = parseHex(token[mode]);
+		if (on) {
+			const fg = parseHex(on[mode]);
+			if (bg && fg && contrast(bg, fg) < MIN_CONTRAST) warn(`colors.${name}: ${mode} foreground contrast ${contrast(bg, fg).toFixed(2)}:1 is below ${MIN_CONTRAST}:1`);
+			return on[mode];
+		}
+		if (!bg) {
+			warn(`colors.${name}: cannot compute a ${mode} foreground from "${token[mode]}"; use a hex value or set \`on\``);
+			return "#ffffff";
+		}
+		const fg = readableOn(bg);
+		const ratio = contrast(bg, parseHex(fg));
+		if (ratio < MIN_CONTRAST) warn(`colors.${name}: best ${mode} foreground contrast is ${ratio.toFixed(2)}:1, below ${MIN_CONTRAST}:1`);
+		return fg;
+	});
+	return pair({
+		light: resolved[0],
+		dark: resolved[1]
+	});
 }
-const tint = (percent) => `color-mix(in oklab, var(--yarcl-c) ${percent}%, transparent)`;
-const shade = (percent) => `color-mix(in oklab, var(--yarcl-c), var(--yarcl-c-on) ${percent}%)`;
-const backgrounds = {
-    fill: ['var(--yarcl-c)', shade(12), shade(20)],
-    tint: [tint(14), tint(22), tint(30)],
-    none: ['transparent', tint(10), tint(18)],
+var tint = (percent) => `color-mix(in oklab, var(--yarcl-c) ${percent}%, transparent)`;
+var shade = (percent) => `color-mix(in oklab, var(--yarcl-c), var(--yarcl-c-on) ${percent}%)`;
+var backgrounds = {
+	fill: [
+		"var(--yarcl-c)",
+		shade(12),
+		shade(20)
+	],
+	tint: [
+		tint(14),
+		tint(22),
+		tint(30)
+	],
+	none: [
+		"transparent",
+		tint(10),
+		tint(18)
+	]
 };
-const borders = {
-    color: 'var(--yarcl-c)',
-    neutral: 'var(--yarcl-neutral-border)',
-    none: 'transparent',
+var borders = {
+	color: "var(--yarcl-c)",
+	neutral: "var(--yarcl-neutral-border)",
+	none: "transparent"
 };
-const texts = {
-    on: 'var(--yarcl-c-on)',
-    color: 'var(--yarcl-c-text)',
-    neutral: 'var(--yarcl-neutral-text)',
+var texts = {
+	on: "var(--yarcl-c-on)",
+	color: "var(--yarcl-c-text)",
+	neutral: "var(--yarcl-neutral-text)"
+};
+var formats = {
+	woff2: "woff2",
+	woff: "woff",
+	ttf: "truetype",
+	otf: "opentype"
 };
-const formats = { woff2: 'woff2', woff: 'woff', ttf: 'truetype', otf: 'opentype' };
 function fontFace(face) {
-    const sources = (Array.isArray(face.src) ? face.src : [face.src]).map((src) => {
-        if (src.startsWith('local('))
-            return src;
-        const format = formats[src.split(/[?#]/)[0].split('.').pop()?.toLowerCase() ?? ''];
-        return `url(${JSON.stringify(src)})${format ? ` format("${format}")` : ''}`;
-    });
-    return rule('@font-face', [
-        ['font-family', JSON.stringify(face.family)],
-        ['src', sources.join(', ')],
-        ...(face.weight != null ? [['font-weight', face.weight]] : []),
-        ...(face.style ? [['font-style', face.style]] : []),
-        ['font-display', face.display ?? 'swap'],
-    ]);
+	const sources = (Array.isArray(face.src) ? face.src : [face.src]).map((src) => {
+		if (src.startsWith("local(")) return src;
+		const format = formats[src.split(/[?#]/)[0].split(".").pop()?.toLowerCase() ?? ""];
+		return `url(${JSON.stringify(src)})${format ? ` format("${format}")` : ""}`;
+	});
+	return rule("@font-face", [
+		["font-family", JSON.stringify(face.family)],
+		["src", sources.join(", ")],
+		...face.weight != null ? [["font-weight", face.weight]] : [],
+		...face.style ? [["font-style", face.style]] : [],
+		["font-display", face.display ?? "swap"]
+	]);
 }
-const TEXT_TINTS = [0, 0.14, 0.22];
+var TEXT_TINTS = [
+	0,
+	.14,
+	.22
+];
 function textShade(name, token, neutrals) {
-    if (token.text)
-        return pair(typeof token.text === 'string' ? { light: token.text, dark: token.text } : token.text);
-    const modes = ['light', 'dark'];
-    const resolved = modes.map((mode) => {
-        const color = parseHex(token[mode]);
-        const text = parseHex(neutrals.text[mode]);
-        const grounds = [parseHex(neutrals.bg[mode]), parseHex(neutrals.surface[mode])];
-        if (!color || !text || grounds.some((g) => !g))
-            return token[mode];
-        const backgrounds = grounds.flatMap((ground) => TEXT_TINTS.map((alpha) => mix(ground, color, alpha)));
-        return toHex(readableText(color, backgrounds, text, MIN_CONTRAST));
-    });
-    return pair({ light: resolved[0], dark: resolved[1] });
+	if (token.text) return pair(typeof token.text === "string" ? {
+		light: token.text,
+		dark: token.text
+	} : token.text);
+	const resolved = ["light", "dark"].map((mode) => {
+		const color = parseHex(token[mode]);
+		const text = parseHex(neutrals.text[mode]);
+		const grounds = [parseHex(neutrals.bg[mode]), parseHex(neutrals.surface[mode])];
+		if (!color || !text || grounds.some((g) => !g)) return token[mode];
+		const backgrounds = grounds.flatMap((ground) => TEXT_TINTS.map((alpha) => mix(ground, color, alpha)));
+		return toHex(readableText(color, backgrounds, text, MIN_CONTRAST));
+	});
+	return pair({
+		light: resolved[0],
+		dark: resolved[1]
+	});
 }
 function rule(selector, declarations) {
-    return `${selector} {\n${declarations.map(([p, v]) => `  ${p}: ${v};`).join('\n')}\n}`;
+	return `${selector} {\n${declarations.map(([p, v]) => `  ${p}: ${v};`).join("\n")}\n}`;
 }
+var sizeProperties = {
+	height: "h",
+	paddingX: "px",
+	fontSize: "fs",
+	iconSize: "icon"
+};
 /**
- * Generates the stylesheet for a config: CSS variables on `:root`, one class per key and
- * `@font-face` rules. The Vite plugin calls this at build time; call it yourself to preview
- * or switch themes at runtime (inject the result into a `<style>` element).
- *
- * @param config A config from `defineConfig`, e.g. one of `@yarcl/react/themes`.
- * @param warn Receives contrast warnings.
- */
-export function generateCss(config, warn = () => { }) {
-    const root = [['color-scheme', 'light dark']];
-    const rules = [];
-    for (const [key, token] of Object.entries(config.colors)) {
-        const k = ident(key);
-        root.push([`--yarcl-color-${k}`, pair(token)], [`--yarcl-color-${k}-on`, foreground(key, token, warn)], [`--yarcl-color-${k}-text`, textShade(key, token, config.neutrals)]);
-        rules.push(rule(`.yarcl-color-${k}`, [
-            ['--yarcl-c', `var(--yarcl-color-${k})`],
-            ['--yarcl-c-on', `var(--yarcl-color-${k}-on)`],
-            ['--yarcl-c-text', `var(--yarcl-color-${k}-text)`],
-        ]));
-    }
-    for (const [key, value] of Object.entries(config.neutrals))
-        root.push([`--yarcl-neutral-${ident(key)}`, pair(value)]);
-    for (const [key, size] of Object.entries(config.sizes)) {
-        const k = ident(key);
-        root.push([`--yarcl-size-${k}-height`, size.height], [`--yarcl-size-${k}-padding-x`, size.paddingX], [`--yarcl-size-${k}-font-size`, size.fontSize], [`--yarcl-size-${k}-icon-size`, size.iconSize]);
-        rules.push(rule(`.yarcl-size-${k}`, [
-            ['--yarcl-h', `var(--yarcl-size-${k}-height)`],
-            ['--yarcl-px', `var(--yarcl-size-${k}-padding-x)`],
-            ['--yarcl-fs', `var(--yarcl-size-${k}-font-size)`],
-            ['--yarcl-icon', `var(--yarcl-size-${k}-icon-size)`],
-        ]));
-    }
-    for (const [key, value] of Object.entries(config.radii)) {
-        const k = ident(key);
-        root.push([`--yarcl-radius-${k}`, value]);
-        rules.push(rule(`.yarcl-radius-${k}`, [['--yarcl-r', `var(--yarcl-radius-${k})`]]));
-    }
-    for (const [key, variant] of Object.entries(config.variants)) {
-        const [bg, hover, active] = backgrounds[variant.background];
-        rules.push(rule(`.yarcl-variant-${ident(key)}`, [
-            ['--yarcl-v-bg', bg],
-            ['--yarcl-v-bg-hover', hover],
-            ['--yarcl-v-bg-active', active],
-            ['--yarcl-v-border', borders[variant.border]],
-            ['--yarcl-v-fg', texts[variant.text]],
-        ]));
-    }
-    for (const [key, value] of Object.entries(config.spacing)) {
-        const k = ident(key);
-        root.push([`--yarcl-space-${k}`, value]);
-        rules.push(rule(`.yarcl-gap-${k}`, [['gap', `var(--yarcl-space-${k})`]]), rule(`.yarcl-padding-${k}`, [['padding', `var(--yarcl-space-${k})`]]));
-    }
-    for (const [key, value] of Object.entries(config.shadows)) {
-        const k = ident(key);
-        root.push([`--yarcl-shadow-${k}`, value]);
-        rules.push(rule(`.yarcl-shadow-${k}`, [['box-shadow', `var(--yarcl-shadow-${k})`]]));
-    }
-    for (const [key, value] of Object.entries(config.modalSizes)) {
-        const k = ident(key);
-        root.push([`--yarcl-modal-${k}`, value]);
-        rules.push(rule(`.yarcl-modal-size-${k}`, [['--yarcl-modal-width', `var(--yarcl-modal-${k})`]]));
-    }
-    for (const [key, density] of Object.entries(config.density)) {
-        rules.push(rule(`.yarcl-density-${ident(key)}`, [
-            ['--yarcl-cell-px', density.paddingX],
-            ['--yarcl-cell-py', density.paddingY],
-            ['--yarcl-cell-fs', density.fontSize],
-        ]));
-    }
-    for (const [key, value] of Object.entries(config.typography.families))
-        root.push([`--yarcl-font-${ident(key)}`, value]);
-    for (const [key, style] of Object.entries(config.typography.styles)) {
-        rules.push(rule(`.yarcl-type-${ident(key)}`, [
-            ['font-family', `var(--yarcl-font-${ident(style.family)})`],
-            ['font-size', style.size],
-            ['font-weight', style.weight],
-            ['line-height', style.lineHeight],
-            ...(style.letterSpacing ? [['letter-spacing', style.letterSpacing]] : []),
-        ]));
-    }
-    for (const [key, value] of Object.entries(config.zIndex))
-        root.push([`--yarcl-z-${ident(key)}`, value]);
-    for (const [key, value] of Object.entries(config.motion))
-        root.push([`--yarcl-motion-${ident(key)}`, value]);
-    for (const [key, value] of Object.entries(config.borders))
-        root.push([`--yarcl-border-${ident(key)}`, value]);
-    root.push(['--yarcl-focus-width', config.focusRing.width], ['--yarcl-focus-offset', config.focusRing.offset], ['--yarcl-focus-style', config.focusRing.style ?? 'solid'], ['--yarcl-focus-color', `var(--yarcl-color-${ident(config.focusRing.color)})`], ['--yarcl-error', `var(--yarcl-color-${ident(config.defaults.errorColor)})`], ['--yarcl-floating-shadow', `var(--yarcl-shadow-${ident(config.defaults.floatingShadow)})`], ['--yarcl-padding', `var(--yarcl-space-${ident(config.defaults.padding)})`], ['--yarcl-gap', `var(--yarcl-space-${ident(config.defaults.gap)})`]);
-    const faces = (config.typography.fontFaces ?? []).map(fontFace);
-    return [...faces, rule(':root', root), ...rules].join('\n\n') + '\n';
+* Generates the stylesheet for a config: CSS variables on `:root`, one class per key and
+* `@font-face` rules. The build plugin calls this at build time; call it yourself to preview
+* or switch themes at runtime (inject the result into a `<style>` element).
+*
+* @param config A config from `defineConfig`, e.g. one of `@yarcl/react/themes`.
+* @param warn Receives contrast warnings.
+*/
+function generateCss(config, warn = () => {}) {
+	const root = [["color-scheme", "light dark"]];
+	const rules = [];
+	for (const [key, token] of Object.entries(config.colors)) {
+		const k = ident(key);
+		root.push([`--yarcl-color-${k}`, pair(token)], [`--yarcl-color-${k}-on`, foreground(key, token, warn)], [`--yarcl-color-${k}-text`, textShade(key, token, config.neutrals)]);
+		rules.push(rule(`.yarcl-color-${k}`, [
+			["--yarcl-c", `var(--yarcl-color-${k})`],
+			["--yarcl-c-on", `var(--yarcl-color-${k}-on)`],
+			["--yarcl-c-text", `var(--yarcl-color-${k}-text)`]
+		]));
+	}
+	for (const [key, value] of Object.entries(config.neutrals)) root.push([`--yarcl-neutral-${ident(key)}`, pair(value)]);
+	for (const [key, size] of Object.entries(config.sizes)) {
+		const k = ident(key);
+		root.push([`--yarcl-size-${k}-height`, size.height], [`--yarcl-size-${k}-padding-x`, size.paddingX], [`--yarcl-size-${k}-font-size`, size.fontSize], [`--yarcl-size-${k}-icon-size`, size.iconSize]);
+		rules.push(rule(`.yarcl-size-${k}`, [
+			["--yarcl-h", `var(--yarcl-size-${k}-height)`],
+			["--yarcl-px", `var(--yarcl-size-${k}-padding-x)`],
+			["--yarcl-fs", `var(--yarcl-size-${k}-font-size)`],
+			["--yarcl-icon", `var(--yarcl-size-${k}-icon-size)`]
+		]));
+	}
+	for (const [component, { sizeOverrides }] of Object.entries(config.components ?? {})) for (const [key, overrides] of Object.entries(sizeOverrides ?? {})) {
+		const declarations = Object.entries(overrides).map(([property, value]) => [`--yarcl-${sizeProperties[property]}`, value]);
+		const marker = `.yarcl-sized-${ident(component)}`;
+		const sized = `.yarcl-size-${ident(key)}`;
+		if (declarations.length) rules.push(rule(`${marker}${sized},\n${marker}${marker} ${sized}`, declarations));
+	}
+	for (const [key, value] of Object.entries(config.radii)) {
+		const k = ident(key);
+		root.push([`--yarcl-radius-${k}`, value]);
+		rules.push(rule(`.yarcl-radius-${k}`, [["--yarcl-r", `var(--yarcl-radius-${k})`]]));
+	}
+	for (const [key, variant] of Object.entries(config.variants)) {
+		const [bg, hover, active] = backgrounds[variant.background];
+		rules.push(rule(`.yarcl-variant-${ident(key)}`, [
+			["--yarcl-v-bg", bg],
+			["--yarcl-v-bg-hover", hover],
+			["--yarcl-v-bg-active", active],
+			["--yarcl-v-border", borders[variant.border]],
+			["--yarcl-v-fg", texts[variant.text]]
+		]));
+	}
+	for (const [key, value] of Object.entries(config.spacing)) {
+		const k = ident(key);
+		root.push([`--yarcl-space-${k}`, value]);
+		rules.push(rule(`.yarcl-gap-${k}`, [["--yarcl-component-gap", `var(--yarcl-space-${k})`]]), rule(`.yarcl-padding-${k}`, [["--yarcl-component-padding", `var(--yarcl-space-${k})`]]));
+	}
+	for (const [key, value] of Object.entries(config.shadows)) {
+		const k = ident(key);
+		root.push([`--yarcl-shadow-${k}`, value]);
+		rules.push(rule(`.yarcl-shadow-${k}`, [["box-shadow", `var(--yarcl-shadow-${k})`]]));
+	}
+	for (const [key, value] of Object.entries(config.modalSizes)) {
+		const k = ident(key);
+		root.push([`--yarcl-modal-${k}`, value]);
+		rules.push(rule(`.yarcl-modal-size-${k}`, [["--yarcl-modal-width", `var(--yarcl-modal-${k})`]]));
+	}
+	for (const [key, density] of Object.entries(config.density)) rules.push(rule(`.yarcl-density-${ident(key)}`, [
+		["--yarcl-cell-px", density.paddingX],
+		["--yarcl-cell-py", density.paddingY],
+		["--yarcl-cell-fs", density.fontSize]
+	]));
+	for (const [key, value] of Object.entries(config.typography.families)) root.push([`--yarcl-font-${ident(key)}`, value]);
+	for (const [key, style] of Object.entries(config.typography.styles)) rules.push(rule(`.yarcl-type-${ident(key)}`, [
+		["font-family", `var(--yarcl-font-${ident(style.family)})`],
+		["font-size", style.size],
+		["font-weight", style.weight],
+		["line-height", style.lineHeight],
+		...style.letterSpacing ? [["letter-spacing", style.letterSpacing]] : []
+	]));
+	for (const [key, value] of Object.entries(config.zIndex)) root.push([`--yarcl-z-${ident(key)}`, value]);
+	for (const [key, value] of Object.entries(config.motion)) root.push([`--yarcl-motion-${ident(key)}`, value]);
+	for (const [key, value] of Object.entries(config.borders)) root.push([`--yarcl-border-${ident(key)}`, value]);
+	const defaultSize = ident(config.defaults.size);
+	const defaultRadius = config.defaults.radius === "size" ? defaultSize : ident(config.defaults.radius);
+	root.push(["--yarcl-focus-width", config.focusRing.width], ["--yarcl-focus-offset", config.focusRing.offset], ["--yarcl-focus-style", config.focusRing.style ?? "solid"], ["--yarcl-focus-color", `var(--yarcl-color-${ident(config.focusRing.color)})`], ["--yarcl-error", `var(--yarcl-color-${ident(config.defaults.errorColor)})`], ["--yarcl-floating-shadow", `var(--yarcl-shadow-${ident(config.defaults.floatingShadow)})`], ["--yarcl-padding", `var(--yarcl-space-${ident(config.defaults.padding)})`], ["--yarcl-gap", `var(--yarcl-space-${ident(config.defaults.gap)})`], ["--yarcl-h", `var(--yarcl-size-${defaultSize}-height)`], ["--yarcl-px", `var(--yarcl-size-${defaultSize}-padding-x)`], ["--yarcl-fs", `var(--yarcl-size-${defaultSize}-font-size)`], ["--yarcl-icon", `var(--yarcl-size-${defaultSize}-icon-size)`], ["--yarcl-r", `var(--yarcl-radius-${defaultRadius}, 0)`]);
+	return [
+		...(config.typography.fontFaces ?? []).map(fontFace),
+		rule(":root", root),
+		...rules
+	].join("\n\n") + "\n";
 }
+//#endregion
+export { generateCss };

package/dist/define.d.ts

@@ -21,8 +21,8 @@ export interface ColorToken extends ColorPair {
     text?: string | ColorPair;
 }
 /**
- * A single step of the shared control size scale.
- * Every sized control reads the same entry, so controls of the same size share the same height.
+ * A single step of the base control size scale. Sized controls share it unless their component
+ * config overrides individual fields.
  */
 export interface SizeToken {
     /** Control height, e.g. `'2.5rem'`. */
@@ -106,7 +106,9 @@ export interface ComponentTokenProps {
     Switch: 'size' | 'color';
     Slider: 'size' | 'radius' | 'color';
     Badge: 'size' | 'radius' | 'color' | 'variant';
-    Alert: 'radius' | 'color' | 'variant';
+    Avatar: 'size' | 'radius' | 'color' | 'variant';
+    AvatarGroup: 'size' | 'radius' | 'color' | 'variant';
+    Alert: 'radius' | 'color' | 'variant' | 'gap' | 'padding' | 'textStyle';
     Card: 'radius' | 'padding' | 'shadow';
     Popover: 'radius' | 'padding';
     HoverCard: 'radius' | 'padding';
@@ -117,20 +119,33 @@ export interface ComponentTokenProps {
     Tabs: 'size' | 'color';
     Pagination: 'size' | 'radius' | 'color' | 'variant' | 'selectedVariant';
     Accordion: 'size' | 'radius' | 'color';
-    Table: 'density';
+    Table: 'density' | 'radius';
     Stack: 'gap';
     Inline: 'gap';
     Text: 'textStyle' | 'color';
-    Label: 'textStyle' | 'color';
+    Label: 'textStyle' | 'color' | 'variant' | 'size' | 'radius';
     Link: 'color';
     Breadcrumb: 'textStyle' | 'color';
     Spinner: 'size' | 'color';
     Skeleton: 'size' | 'radius';
     Progress: 'size' | 'color' | 'radius';
-    Toast: 'color';
+    EmptyState: 'color' | 'gap' | 'padding' | 'textStyle';
+    Tooltip: 'radius' | 'padding' | 'textStyle';
+    Toast: 'radius' | 'color' | 'gap' | 'padding' | 'textStyle';
 }
 /** Names of components that accept defaults in `components`. */
 export type ComponentName = keyof ComponentTokenProps;
+type ControlSizeComponentName = Exclude<{
+    [C in ComponentName]: 'size' extends ComponentTokenProps[C] ? C : never;
+}[ComponentName], 'Dialog' | 'Drawer'>;
+type ComponentConfig<C extends ComponentName> = {
+    [P in ComponentTokenProps[C]]?: string;
+} & (C extends ControlSizeComponentName ? {
+    /** Global size keys this component accepts. All global sizes are accepted when omitted. */
+    allowedSizes?: readonly string[];
+    /** Partial overrides of global size tokens, scoped to this component. */
+    sizeOverrides?: Record<string, Partial<SizeToken>>;
+} : object);
 /**
  * The structure every yarcl config must satisfy.
  *
@@ -155,7 +170,7 @@ export interface YarclShape {
         /** Default border. */
         border: ColorPair;
     };
-    /** Control size scale. Keys become the valid values of the `size` prop. */
+    /** Base control size scale. Keys become valid `size` values unless a component restricts them. */
     sizes: Record<string, SizeToken>;
     /**
      * Border radii. Keys become the valid values of the `radius` prop. Name them after your
@@ -240,13 +255,11 @@ export interface YarclShape {
         style?: 'solid' | 'dashed' | 'dotted' | 'double';
     };
     /**
-     * Per-component defaults, e.g. `{ Button: { radius: 'square' } }`. Applied when a prop is omitted,
-     * before the global `defaults`. Each value must be a key of its group.
+     * Per-component defaults and sizing, e.g. `{ Button: { radius: 'square', allowedSizes: ['sm', 'md'] } }`.
+     * Defaults apply when a prop is omitted, before the global `defaults`.
      */
     components?: {
-        [C in ComponentName]?: {
-            [P in ComponentTokenProps[C]]?: string;
-        };
+        [C in ComponentName]?: ComponentConfig<C>;
     };
     /** Values used when a component prop is omitted. Each must be a key of its group. */
     defaults: {
@@ -300,8 +313,20 @@ interface TokenKeys<T extends YarclShape> {
 }
 type ComponentChecks<T extends YarclShape> = {
     [C in keyof T['components']]: C extends ComponentName ? {
-        [P in keyof T['components'][C]]: P extends ComponentTokenProps[C] ? C extends 'Dialog' | 'Drawer' ? P extends 'size' ? keyof T['modalSizes'] : TokenKeys<T>[P] : TokenKeys<T>[P] : never;
-    } : {
+        [P in keyof T['components'][C]]: P extends ComponentTokenProps[C] ? C extends 'Dialog' | 'Drawer' ? P extends 'size' ? keyof T['modalSizes'] : TokenKeys<T>[P] : P extends 'size' ? T['components'][C] extends {
+            allowedSizes: readonly (infer S)[];
+        } ? S : keyof T['sizes'] : TokenKeys<T>[P] : P extends 'allowedSizes' ? C extends ControlSizeComponentName ? readonly [keyof T['sizes'], ...(keyof T['sizes'])[]] : never : P extends 'sizeOverrides' ? C extends ControlSizeComponentName ? {
+            [K in keyof T['components'][C][P]]: K extends keyof T['sizes'] ? T['components'][C] extends {
+                allowedSizes: readonly (infer S)[];
+            } ? K extends S ? Partial<SizeToken> : never : Partial<SizeToken> : never;
+        } : never : never;
+    } & (C extends ControlSizeComponentName ? T['components'][C] extends {
+        allowedSizes: readonly (infer S)[];
+    } ? T['components'][C] extends {
+        size: unknown;
+    } ? object : T['defaults']['size'] extends S ? object : {
+        size: S;
+    } : object : object) : {
         error: `Unknown component "${C & string}"`;
     };
 };
@@ -360,7 +385,7 @@ type Checks<T extends YarclShape> = {
  * - every color has a `light` and `dark` value
  * - `defaults`, `focusRing.color`, `typography.headings` and each text style's `family` reference existing keys
  * - no key contains whitespace
- * - `components` only names known components, only sets props they have, and only uses existing keys
+ * - `components` only names known components, only sets supported options, and only uses existing keys
  *
  * Returns the config unchanged with literal types preserved, so the library can derive
  * its prop types from it. Spread `@yarcl/react/defaults` to extend the library defaults instead

package/dist/define.js

@@ -1,29 +1,32 @@
+//#region src/define.ts
 /**
- * Declares a yarcl design system config.
- *
- * Checks at compile time that:
- * - every color has a `light` and `dark` value
- * - `defaults`, `focusRing.color`, `typography.headings` and each text style's `family` reference existing keys
- * - no key contains whitespace
- * - `components` only names known components, only sets props they have, and only uses existing keys
- *
- * Returns the config unchanged with literal types preserved, so the library can derive
- * its prop types from it. Spread `@yarcl/react/defaults` to extend the library defaults instead
- * of replacing them.
- *
- * @example
- * ```ts
- * // src/yarcl.config.ts
- * import { defineConfig } from '@yarcl/react/define';
- * import defaults from '@yarcl/react/defaults';
- *
- * export default defineConfig({
- *   ...defaults,
- *   colors: { ...defaults.colors, brand: { light: '#2d4bb8', dark: '#8aa2ff' } },
- *   defaults: { ...defaults.defaults, color: 'brand' },
- * });
- * ```
- */
-export function defineConfig(config) {
-    return config;
+* Declares a yarcl design system config.
+*
+* Checks at compile time that:
+* - every color has a `light` and `dark` value
+* - `defaults`, `focusRing.color`, `typography.headings` and each text style's `family` reference existing keys
+* - no key contains whitespace
+* - `components` only names known components, only sets supported options, and only uses existing keys
+*
+* Returns the config unchanged with literal types preserved, so the library can derive
+* its prop types from it. Spread `@yarcl/react/defaults` to extend the library defaults instead
+* of replacing them.
+*
+* @example
+* ```ts
+* // src/yarcl.config.ts
+* import { defineConfig } from '@yarcl/react/define';
+* import defaults from '@yarcl/react/defaults';
+*
+* export default defineConfig({
+*   ...defaults,
+*   colors: { ...defaults.colors, brand: { light: '#2d4bb8', dark: '#8aa2ff' } },
+*   defaults: { ...defaults.defaults, color: 'brand' },
+* });
+* ```
+*/
+function defineConfig(config) {
+	return config;
 }
+//#endregion
+export { defineConfig };

package/dist/demo.d.ts

@@ -0,0 +1,2 @@
+export { DemoYarcl } from './reference/DemoYarcl';
+export type { DemoYarclProps } from './reference/DemoYarcl';

package/dist/demo.js

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

package/dist/esbuild.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`}}}).esbuild;module.exports=q;

package/dist/esbuild.d.ts

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

package/dist/esbuild.js

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