@yarcl/react 0.1.0 → 0.2.0

package/dist/yarcl.config.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yarcl/react",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Yet another react component library. Your config file is the design system: every key becomes a typed prop and a rendered style.",
   "license": "MIT",
   "author": "Eugene Yakhnenko",
@@ -17,29 +17,79 @@
     "design-system",
     "design-tokens",
     "theming",
-    "vite-plugin",
+    "build-plugin",
     "typescript"
   ],
   "type": "module",
+  "bin": {
+    "yarcl": "./dist/cli.js"
+  },
+  "sideEffects": [
+    "./dist/index.js",
+    "**/*.css"
+  ],
   "files": [
-    "src",
     "dist"
   ],
   "exports": {
-    ".": "./src/index.ts",
-    "./define": "./src/define.ts",
-    "./defaults": "./src/yarcl.config.ts",
-    "./plugin": {
-      "types": "./dist/plugin.d.ts",
-      "default": "./dist/plugin.js"
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./define": {
+      "types": "./dist/define.d.ts",
+      "default": "./dist/define.js"
+    },
+    "./defaults": {
+      "types": "./dist/yarcl.config.d.ts",
+      "default": "./dist/yarcl.config.js"
+    },
+    "./vite": {
+      "types": "./dist/vite.d.ts",
+      "import": "./dist/vite.js",
+      "require": "./dist/vite.cjs"
+    },
+    "./webpack": {
+      "types": "./dist/webpack.d.ts",
+      "import": "./dist/webpack.js",
+      "require": "./dist/webpack.cjs"
+    },
+    "./rspack": {
+      "types": "./dist/rspack.d.ts",
+      "import": "./dist/rspack.js",
+      "require": "./dist/rspack.cjs"
+    },
+    "./rollup": {
+      "types": "./dist/rollup.d.ts",
+      "import": "./dist/rollup.js",
+      "require": "./dist/rollup.cjs"
+    },
+    "./esbuild": {
+      "types": "./dist/esbuild.d.ts",
+      "import": "./dist/esbuild.js",
+      "require": "./dist/esbuild.cjs"
+    },
+    "./reference": {
+      "types": "./dist/reference/index.d.ts",
+      "default": "./dist/reference/index.js"
+    },
+    "./demo": {
+      "types": "./dist/demo.d.ts",
+      "default": "./dist/demo.js"
+    },
+    "./themes": {
+      "types": "./dist/themes/index.d.ts",
+      "default": "./dist/themes/index.js"
     },
-    "./reference": "./src/reference/index.ts",
-    "./themes": "./src/themes/index.ts",
-    "./css": "./src/apply.ts"
+    "./css": {
+      "types": "./dist/apply.d.ts",
+      "default": "./dist/apply.js"
+    }
   },
   "scripts": {
-    "build": "tsc -p tsconfig.build.json",
-    "prepare": "tsc -p tsconfig.build.json"
+    "build": "node scripts/build.mjs",
+    "prepare": "node scripts/build.mjs",
+    "test": "vitest run --config vitest.config.ts"
   },
   "publishConfig": {
     "access": "public",
@@ -47,12 +97,14 @@
   },
   "peerDependencies": {
     "react": ">=19",
-    "react-dom": ">=19",
-    "vite": ">=6.1"
+    "react-dom": ">=19"
   },
   "dependencies": {
     "@floating-ui/react": "^0.27.20",
-    "date-fns": "^4.4.0"
+    "date-fns": "^4.4.0",
+    "jiti": "^2.7.0",
+    "jsonc-parser": "^3.3.1",
+    "unplugin": "^3.4.0"
   },
   "devDependencies": {
     "@types/node": "^24.0.0",

package/src/classes.ts

@@ -1,23 +0,0 @@
-import { activeConfig } from './runtime';
-import type { Color, Density, Radius, Shadow, Size, Spacing, TextStyle, Variant } from './types';
-
-export function cx(...parts: (string | false | null | undefined)[]): string {
-  return parts.filter(Boolean).join(' ');
-}
-
-export const sizeClass = (size: Size = activeConfig().defaults.size) => `yarcl-size-${size}`;
-export function radiusClass(radius?: Radius | 'size', size?: Size): string | undefined {
-  const value: Radius | 'size' = radius ?? (activeConfig().defaults.radius as Radius | 'size');
-  if (value !== 'size') return `yarcl-radius-${value}`;
-  const match = size ?? activeConfig().defaults.size;
-  return match in activeConfig().radii ? `yarcl-radius-${match}` : undefined;
-}
-export const colorClass = (color: Color = activeConfig().defaults.color) => `yarcl-color-${color}`;
-export const variantClass = (variant: Variant = activeConfig().defaults.variant) => `yarcl-variant-${variant}`;
-export const gapClass = (gap: Spacing = activeConfig().defaults.gap) => `yarcl-gap-${gap}`;
-export const paddingClass = (padding: Spacing = activeConfig().defaults.padding) => `yarcl-padding-${padding}`;
-export const shadowClass = (shadow?: Shadow) => shadow && `yarcl-shadow-${shadow}`;
-export const typeClass = (style: TextStyle) => `yarcl-type-${style}`;
-export const densityClass = (density: Density = activeConfig().defaults.density) => `yarcl-density-${density}`;
-export const softVariantClass = (variant: Variant = activeConfig().defaults.softVariant) => `yarcl-variant-${variant}`;
-

package/src/color.ts

@@ -1,48 +0,0 @@
-type Rgb = [number, number, number];
-
-export function parseHex(value: string): Rgb | null {
-  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)) as Rgb;
-}
-
-function luminance([r, g, b]: Rgb): number {
-  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: Rgb, b: Rgb): number {
-  const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x);
-  return (hi + 0.05) / (lo + 0.05);
-}
-
-const WHITE: Rgb = [255, 255, 255];
-const BLACK: Rgb = [0, 0, 0];
-
-export function mix(a: Rgb, b: Rgb, amount: number): Rgb {
-  return a.map((channel, i) => Math.round(channel + (b[i] - channel) * amount)) as Rgb;
-}
-
-export function toHex(rgb: Rgb): string {
-  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: Rgb, backgrounds: Rgb[], toward: Rgb, min: number): Rgb {
-  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: Rgb): string {
-  return contrast(background, WHITE) >= contrast(background, BLACK) ? '#ffffff' : '#000000';
-}