@yarcl/react 0.1.0 → 0.2.0

package/dist/themes/index.js

@@ -0,0 +1,45 @@
+import yarcl_config_default from "../yarcl.config.js";
+import { brutalist } from "./brutalist.js";
+import { compact } from "./compact.js";
+import { editorial } from "./editorial.js";
+import { bloom } from "./bloom.js";
+//#region src/themes/index.ts
+/**
+* Every bundled theme, keyed by id, including the library defaults as `yarcl`.
+* All of them satisfy {@link ThemeContract}, so they're interchangeable.
+*
+* @example
+* ```ts
+* // src/yarcl.config.ts: use a theme as is
+* export { editorial as default } from '@yarcl/react/themes';
+* ```
+*
+* @example
+* ```ts
+* // or start from one and change what you need
+* import { defineConfig } from '@yarcl/react/define';
+* import { bloom } from '@yarcl/react/themes';
+*
+* export default defineConfig({
+*   ...bloom,
+*   colors: { ...bloom.colors, primary: { light: '#db2777', dark: '#f9a8d4' } },
+* });
+* ```
+*/
+var themes = {
+	yarcl: yarcl_config_default,
+	brutalist,
+	bloom,
+	compact,
+	editorial
+};
+/** Display names of the bundled themes. */
+var themeNames = {
+	yarcl: "yarcl (default)",
+	brutalist: "Brutalist",
+	bloom: "Bloom",
+	compact: "Compact",
+	editorial: "Editorial"
+};
+//#endregion
+export { bloom, brutalist, compact, editorial, themeNames, themes };

package/{src/types.ts → dist/types.d.ts}

@@ -1,7 +1,6 @@
 import type config from '@yarcl/config';
-
+import type { ComponentName } from './define';
 type Config = typeof config;
-
 /** A key of the consumer's `sizes` config. */
 export type Size = keyof Config['sizes'] & string;
 /** A key of the consumer's `radii` config. */
@@ -20,50 +19,54 @@ export type Density = keyof Config['density'] & string;
 export type ModalSize = keyof Config['modalSizes'] & string;
 /** A key of the consumer's `typography.styles` config. */
 export type TextStyle = keyof Config['typography']['styles'] & string;
-
+type ConfiguredComponents = Config extends {
+    components?: infer C;
+} ? NonNullable<C> : Record<never, never>;
+/** A component's allowed size keys, or every global size when it has no restriction. */
+export type ComponentSize<C extends ComponentName> = C extends keyof ConfiguredComponents ? ConfiguredComponents[C] extends {
+    allowedSizes: readonly (infer S)[];
+} ? Extract<S, Size> : Size : Size;
 /** Design token props shared by every sized, colored component. */
-export interface TokenProps {
-  /**
-   * Control size, from the `sizes` config.
-   * @default config.defaults.size
-   */
-  size?: Size;
-  /**
-   * Border radius, from the `radii` config, or `'size'` for the radius named like the control's size.
-   * @default config.defaults.radius
-   */
-  radius?: Radius | 'size';
-  /**
-   * Semantic color, from the `colors` config.
-   * @default config.defaults.color
-   */
-  color?: Color;
+export interface TokenProps<C extends ComponentName | undefined = undefined> {
+    /**
+     * Control size, from the `sizes` config.
+     * @default config.defaults.size
+     */
+    size?: C extends ComponentName ? ComponentSize<C> : Size;
+    /**
+     * Border radius, from the `radii` config, or `'size'` for the radius named like the control's size.
+     * @default config.defaults.radius
+     */
+    radius?: Radius | 'size';
+    /**
+     * Semantic color, from the `colors` config.
+     * @default config.defaults.color
+     */
+    color?: Color;
 }
-
 /** Cross-axis alignment for layout components. */
 export type Align = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
 /** Main-axis distribution for layout components. */
 export type Justify = 'start' | 'center' | 'end' | 'between';
-
 /** The `variant` prop shared by components that apply a style recipe. */
 export interface VariantProps {
-  /**
-   * Style recipe, from the `variants` config.
-   * @default config.defaults.variant
-   */
-  variant?: Variant;
+    /**
+     * Style recipe, from the `variants` config.
+     * @default config.defaults.variant
+     */
+    variant?: Variant;
 }
-
 /** Values a component can receive from `components` in the config. */
 export interface ComponentDefaults {
-  size?: Size;
-  radius?: Radius | 'size';
-  color?: Color;
-  variant?: Variant;
-  selectedVariant?: Variant;
-  gap?: Spacing;
-  padding?: Spacing;
-  shadow?: Shadow;
-  density?: Density;
-  textStyle?: TextStyle;
+    size?: Size;
+    radius?: Radius | 'size';
+    color?: Color;
+    variant?: Variant;
+    selectedVariant?: Variant;
+    gap?: Spacing;
+    padding?: Spacing;
+    shadow?: Shadow;
+    density?: Density;
+    textStyle?: TextStyle;
 }
+export {};

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

package/dist/vite.d.ts

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

package/dist/vite.js

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

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

package/dist/webpack.d.ts

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

package/dist/webpack.js

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

package/dist/yarcl.config.d.ts

@@ -0,0 +1,276 @@
+/** The library's default design system, used when the consumer provides no config. */
+declare const _default: {
+    readonly colors: {
+        readonly primary: {
+            readonly light: "#2d4bb8";
+            readonly dark: "#8aa2ff";
+        };
+        readonly neutral: {
+            readonly light: "#4b5263";
+            readonly dark: "#a3a9b8";
+        };
+        readonly success: {
+            readonly light: "#15803d";
+            readonly dark: "#4ade80";
+        };
+        readonly warning: {
+            readonly light: "#b45309";
+            readonly dark: "#fbbf24";
+        };
+        readonly danger: {
+            readonly light: "#dc2626";
+            readonly dark: "#f87171";
+        };
+        readonly info: {
+            readonly light: "#0369a1";
+            readonly dark: "#38bdf8";
+        };
+    };
+    readonly neutrals: {
+        readonly bg: {
+            readonly light: "#f8f9fb";
+            readonly dark: "#0f1115";
+        };
+        readonly surface: {
+            readonly light: "#ffffff";
+            readonly dark: "#181b21";
+        };
+        readonly text: {
+            readonly light: "#101828";
+            readonly dark: "#e6e8ec";
+        };
+        readonly muted: {
+            readonly light: "#667085";
+            readonly dark: "#8b93a1";
+        };
+        readonly border: {
+            readonly light: "#d0d5dd";
+            readonly dark: "#2e333d";
+        };
+    };
+    readonly sizes: {
+        readonly xs: {
+            readonly height: "1.75rem";
+            readonly paddingX: "0.625rem";
+            readonly fontSize: "0.75rem";
+            readonly iconSize: "0.75rem";
+        };
+        readonly sm: {
+            readonly height: "2rem";
+            readonly paddingX: "0.75rem";
+            readonly fontSize: "0.8125rem";
+            readonly iconSize: "0.875rem";
+        };
+        readonly md: {
+            readonly height: "2.5rem";
+            readonly paddingX: "1rem";
+            readonly fontSize: "0.875rem";
+            readonly iconSize: "1rem";
+        };
+        readonly lg: {
+            readonly height: "3rem";
+            readonly paddingX: "1.25rem";
+            readonly fontSize: "1rem";
+            readonly iconSize: "1.25rem";
+        };
+        readonly xl: {
+            readonly height: "3.5rem";
+            readonly paddingX: "1.5rem";
+            readonly fontSize: "1.125rem";
+            readonly iconSize: "1.5rem";
+        };
+    };
+    readonly radii: {
+        readonly square: "0";
+        readonly sm: "0.25rem";
+        readonly md: "0.375rem";
+        readonly lg: "0.5rem";
+        readonly xl: "0.75rem";
+        readonly rounded: "9999px";
+    };
+    readonly variants: {
+        readonly solid: {
+            readonly background: "fill";
+            readonly border: "color";
+            readonly text: "on";
+        };
+        readonly soft: {
+            readonly background: "tint";
+            readonly border: "none";
+            readonly text: "color";
+        };
+        readonly outline: {
+            readonly background: "none";
+            readonly border: "color";
+            readonly text: "color";
+        };
+        readonly ghost: {
+            readonly background: "none";
+            readonly border: "none";
+            readonly text: "color";
+        };
+    };
+    readonly spacing: {
+        readonly xs: "0.25rem";
+        readonly sm: "0.5rem";
+        readonly md: "1rem";
+        readonly lg: "1.5rem";
+        readonly xl: "2rem";
+    };
+    readonly shadows: {
+        readonly sm: "0 1px 2px light-dark(rgb(0 0 0 / 0.08), rgb(0 0 0 / 0.5))";
+        readonly md: "0 4px 12px light-dark(rgb(0 0 0 / 0.12), rgb(0 0 0 / 0.6))";
+        readonly lg: "0 12px 32px light-dark(rgb(0 0 0 / 0.18), rgb(0 0 0 / 0.7))";
+    };
+    readonly density: {
+        readonly compact: {
+            readonly paddingX: "0.5rem";
+            readonly paddingY: "0.25rem";
+            readonly fontSize: "0.8125rem";
+        };
+        readonly comfortable: {
+            readonly paddingX: "0.75rem";
+            readonly paddingY: "0.625rem";
+            readonly fontSize: "0.875rem";
+        };
+    };
+    readonly modalSizes: {
+        readonly sm: "24rem";
+        readonly md: "32rem";
+        readonly lg: "48rem";
+        readonly xl: "64rem";
+        readonly full: "100vw";
+    };
+    readonly typography: {
+        readonly families: {
+            readonly sans: "system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif";
+            readonly mono: "ui-monospace, \"SF Mono\", Menlo, Consolas, monospace";
+        };
+        readonly styles: {
+            readonly display: {
+                readonly family: "sans";
+                readonly size: "2.25rem";
+                readonly weight: 800;
+                readonly lineHeight: 1.1;
+                readonly letterSpacing: "-0.02em";
+            };
+            readonly heading: {
+                readonly family: "sans";
+                readonly size: "1.5rem";
+                readonly weight: 700;
+                readonly lineHeight: 1.25;
+                readonly letterSpacing: "-0.01em";
+            };
+            readonly subheading: {
+                readonly family: "sans";
+                readonly size: "1.125rem";
+                readonly weight: 600;
+                readonly lineHeight: 1.35;
+            };
+            readonly body: {
+                readonly family: "sans";
+                readonly size: "1rem";
+                readonly weight: 400;
+                readonly lineHeight: 1.5;
+            };
+            readonly caption: {
+                readonly family: "sans";
+                readonly size: "0.8125rem";
+                readonly weight: 400;
+                readonly lineHeight: 1.4;
+            };
+            readonly code: {
+                readonly family: "mono";
+                readonly size: "0.875rem";
+                readonly weight: 400;
+                readonly lineHeight: 1.5;
+            };
+            readonly label: {
+                readonly family: "sans";
+                readonly size: "0.875rem";
+                readonly weight: 500;
+                readonly lineHeight: 1.4;
+            };
+        };
+        readonly headings: {
+            readonly h1: "display";
+            readonly h2: "heading";
+            readonly h3: "subheading";
+            readonly h4: "subheading";
+            readonly h5: "label";
+            readonly h6: "label";
+        };
+    };
+    readonly zIndex: {
+        readonly dropdown: 1000;
+        readonly tooltip: 1100;
+        readonly dialog: 1200;
+        readonly toast: 1300;
+    };
+    readonly motion: {
+        readonly fast: "120ms";
+        readonly base: "200ms";
+        readonly easing: "cubic-bezier(0.2, 0, 0, 1)";
+    };
+    readonly timing: {
+        readonly tooltipDelay: 400;
+        readonly hoverOpenDelay: 300;
+        readonly hoverCloseDelay: 150;
+        readonly toastDuration: 5000;
+    };
+    readonly borders: {
+        readonly width: "1px";
+    };
+    readonly focusRing: {
+        readonly width: "2px";
+        readonly offset: "2px";
+        readonly color: "primary";
+    };
+    readonly defaults: {
+        readonly size: "md";
+        readonly radius: "md";
+        readonly color: "primary";
+        readonly variant: "solid";
+        readonly errorColor: "danger";
+        readonly textStyle: "body";
+        readonly labelStyle: "label";
+        readonly helperStyle: "caption";
+        readonly gap: "md";
+        readonly padding: "lg";
+        readonly floatingShadow: "md";
+        readonly density: "comfortable";
+        readonly softVariant: "soft";
+        readonly modalSize: "md";
+    };
+    readonly components: {
+        readonly Avatar: {
+            readonly radius: "rounded";
+        };
+        readonly EmptyState: {
+            readonly color: "neutral";
+            readonly gap: "sm";
+            readonly padding: "lg";
+            readonly textStyle: "body";
+        };
+        readonly Alert: {
+            readonly gap: "sm";
+            readonly padding: "md";
+            readonly textStyle: "label";
+        };
+        readonly Drawer: {
+            readonly size: "sm";
+        };
+        readonly Tooltip: {
+            readonly radius: "md";
+            readonly padding: "sm";
+            readonly textStyle: "caption";
+        };
+        readonly Toast: {
+            readonly radius: "lg";
+            readonly gap: "sm";
+            readonly padding: "md";
+            readonly textStyle: "label";
+        };
+    };
+};
+export default _default;