@yarcl/react 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Eugene Yakhnenko
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,53 @@
+# @yarcl/react
+
+Yet another react component library. Your config file is the design system: every key becomes a typed prop and a rendered style.
+
+```sh
+npm install @yarcl/react
+```
+
+```ts
+// vite.config.ts
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
+import { yarcl } from '@yarcl/react/plugin';
+
+export default defineConfig({ plugins: [react(), yarcl({ config: 'src/yarcl.config.ts' })] });
+```
+
+```jsonc
+// tsconfig.json
+{
+  "compilerOptions": {
+    "paths": {
+      "@yarcl/config": ["./src/yarcl.config.ts", "./node_modules/@yarcl/react/src/yarcl.config.ts"]
+    }
+  }
+}
+```
+
+```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: '#4f46e5', dark: '#a5b4fc' },
+  },
+});
+```
+
+```tsx
+import { Button } from '@yarcl/react';
+
+<Button color="brand">Save</Button>;
+```
+
+Documentation: [yarcl.dev](https://yarcl.dev)
+
+## License
+
+MIT

package/dist/color.d.ts

@@ -0,0 +1,12 @@
+type Rgb = [number, number, number];
+export declare function parseHex(value: string): Rgb | null;
+export declare function contrast(a: Rgb, b: Rgb): number;
+export declare function mix(a: Rgb, b: Rgb, amount: number): Rgb;
+export declare function toHex(rgb: Rgb): string;
+/**
+ * The color, mixed toward `toward` in small steps until it reaches `min` contrast
+ * against every background. Returns the color unchanged when it already passes.
+ */
+export declare function readableText(color: Rgb, backgrounds: Rgb[], toward: Rgb, min: number): Rgb;
+export declare function readableOn(background: Rgb): string;
+export {};

package/dist/color.js

@@ -0,0 +1,41 @@
+export function parseHex(value) {
+    const hex = value.trim().replace(/^#/, '');
+    if (!/^([0-9a-f]{3}|[0-9a-f]{6})$/i.test(hex))
+        return null;
+    const full = hex.length === 3 ? [...hex].map((c) => c + c).join('') : hex;
+    return [0, 2, 4].map((i) => parseInt(full.slice(i, i + 2), 16));
+}
+function luminance([r, g, b]) {
+    const [lr, lg, lb] = [r, g, b].map((c) => {
+        const s = c / 255;
+        return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
+    });
+    return 0.2126 * lr + 0.7152 * lg + 0.0722 * lb;
+}
+export function contrast(a, b) {
+    const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x);
+    return (hi + 0.05) / (lo + 0.05);
+}
+const WHITE = [255, 255, 255];
+const BLACK = [0, 0, 0];
+export function mix(a, b, amount) {
+    return a.map((channel, i) => Math.round(channel + (b[i] - channel) * amount));
+}
+export function toHex(rgb) {
+    return `#${rgb.map((c) => c.toString(16).padStart(2, '0')).join('')}`;
+}
+/**
+ * The color, mixed toward `toward` in small steps until it reaches `min` contrast
+ * against every background. Returns the color unchanged when it already passes.
+ */
+export function readableText(color, backgrounds, toward, min) {
+    for (let step = 0; step <= 20; step++) {
+        const candidate = mix(color, toward, step / 20);
+        if (backgrounds.every((bg) => contrast(candidate, bg) >= min))
+            return candidate;
+    }
+    return toward;
+}
+export function readableOn(background) {
+    return contrast(background, WHITE) >= contrast(background, BLACK) ? '#ffffff' : '#000000';
+}

package/dist/css.d.ts

@@ -0,0 +1,10 @@
+import type { YarclShape } from './define.ts';
+/**
+ * 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 declare function generateCss(config: YarclShape, warn?: (message: string) => void): string;

package/dist/css.js

@@ -0,0 +1,175 @@
+import { contrast, mix, parseHex, readableOn, readableText, toHex } from "./color.js";
+const MIN_CONTRAST = 4.5;
+function ident(key) {
+    return key.replace(/[^a-zA-Z0-9_-]/g, (c) => `\\${c}`);
+}
+function pair({ 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 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)],
+};
+const 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)',
+};
+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 TEXT_TINTS = [0, 0.14, 0.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] });
+}
+function rule(selector, declarations) {
+    return `${selector} {\n${declarations.map(([p, v]) => `  ${p}: ${v};`).join('\n')}\n}`;
+}
+/**
+ * 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';
+}