@yenio-pld/blocks 0.0.0-stage → 0.0.0

package/package.json

@@ -1,6 +1,282 @@
 {
-  "name": "@yenio-pld/blocks",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+	"name": "@yenio-pld/blocks",
+	"version": "0.0.0",
+	"description": "Shared UI components for Yenio applications",
+	"type": "module",
+	"main": "./dist/index.cjs",
+	"module": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"exports": {
+		".": {
+			"import": {
+				"types": "./dist/index.d.ts",
+				"default": "./dist/index.js"
+			},
+			"require": {
+				"types": "./dist/index.d.cts",
+				"default": "./dist/index.cjs"
+			}
+		},
+		"./avatar": {
+			"import": {
+				"types": "./dist/avatar.d.ts",
+				"default": "./dist/avatar.js"
+			},
+			"require": {
+				"types": "./dist/avatar.d.cts",
+				"default": "./dist/avatar.cjs"
+			}
+		},
+		"./consent": {
+			"import": {
+				"types": "./dist/consent.d.ts",
+				"default": "./dist/consent.js"
+			},
+			"require": {
+				"types": "./dist/consent.d.cts",
+				"default": "./dist/consent.cjs"
+			}
+		},
+		"./theme-init": {
+			"import": {
+				"types": "./dist/theme-init.d.ts",
+				"default": "./dist/theme-init.js"
+			},
+			"require": {
+				"types": "./dist/theme-init.d.cts",
+				"default": "./dist/theme-init.cjs"
+			}
+		},
+		"./theme.css": "./src/theme.css",
+		"./ui/alert": {
+			"types": "./dist/ui/alert.d.ts",
+			"default": "./dist/ui/alert.js"
+		},
+		"./ui/alert-dialog": {
+			"types": "./dist/ui/alert-dialog.d.ts",
+			"default": "./dist/ui/alert-dialog.js"
+		},
+		"./ui/avatar": {
+			"types": "./dist/ui/avatar.d.ts",
+			"default": "./dist/ui/avatar.js"
+		},
+		"./ui/badge": {
+			"types": "./dist/ui/badge.d.ts",
+			"default": "./dist/ui/badge.js"
+		},
+		"./ui/breadcrumb": {
+			"types": "./dist/ui/breadcrumb.d.ts",
+			"default": "./dist/ui/breadcrumb.js"
+		},
+		"./ui/bubble": {
+			"types": "./dist/ui/bubble.d.ts",
+			"default": "./dist/ui/bubble.js"
+		},
+		"./ui/button": {
+			"types": "./dist/ui/button.d.ts",
+			"default": "./dist/ui/button.js"
+		},
+		"./ui/card": {
+			"types": "./dist/ui/card.d.ts",
+			"default": "./dist/ui/card.js"
+		},
+		"./ui/collapsible": {
+			"types": "./dist/ui/collapsible.d.ts",
+			"default": "./dist/ui/collapsible.js"
+		},
+		"./ui/dialog": {
+			"types": "./dist/ui/dialog.d.ts",
+			"default": "./dist/ui/dialog.js"
+		},
+		"./ui/dropdown-menu": {
+			"types": "./dist/ui/dropdown-menu.d.ts",
+			"default": "./dist/ui/dropdown-menu.js"
+		},
+		"./ui/input": {
+			"types": "./dist/ui/input.d.ts",
+			"default": "./dist/ui/input.js"
+		},
+		"./ui/input-otp": {
+			"types": "./dist/ui/input-otp.d.ts",
+			"default": "./dist/ui/input-otp.js"
+		},
+		"./ui/label": {
+			"types": "./dist/ui/label.d.ts",
+			"default": "./dist/ui/label.js"
+		},
+		"./ui/message": {
+			"types": "./dist/ui/message.d.ts",
+			"default": "./dist/ui/message.js"
+		},
+		"./ui/progress": {
+			"types": "./dist/ui/progress.d.ts",
+			"default": "./dist/ui/progress.js"
+		},
+		"./ui/separator": {
+			"types": "./dist/ui/separator.d.ts",
+			"default": "./dist/ui/separator.js"
+		},
+		"./ui/sheet": {
+			"types": "./dist/ui/sheet.d.ts",
+			"default": "./dist/ui/sheet.js"
+		},
+		"./ui/sidebar": {
+			"types": "./dist/ui/sidebar.d.ts",
+			"default": "./dist/ui/sidebar.js"
+		},
+		"./ui/skeleton": {
+			"types": "./dist/ui/skeleton.d.ts",
+			"default": "./dist/ui/skeleton.js"
+		},
+		"./ui/sonner": {
+			"types": "./dist/ui/sonner.d.ts",
+			"default": "./dist/ui/sonner.js"
+		},
+		"./ui/switch": {
+			"types": "./dist/ui/switch.d.ts",
+			"default": "./dist/ui/switch.js"
+		},
+		"./ui/table": {
+			"types": "./dist/ui/table.d.ts",
+			"default": "./dist/ui/table.js"
+		},
+		"./ui/tooltip": {
+			"types": "./dist/ui/tooltip.d.ts",
+			"default": "./dist/ui/tooltip.js"
+		},
+		"./ui/use-mobile": {
+			"types": "./dist/ui/use-mobile.d.ts",
+			"default": "./dist/ui/use-mobile.js"
+		}
+	},
+	"files": [
+		"dist",
+		"README.md",
+		"scripts/check-theme.mjs",
+		"src/theme.css"
+	],
+	"sideEffects": [
+		"**/*.css"
+	],
+	"scripts": {
+		"build": "tsup && tsup --config tsup.ui.config.ts && node scripts/prepend-use-client.mjs && node scripts/assert-ui-entries.mjs",
+		"dev": "tsup --watch",
+		"typecheck": "tsc --noEmit && tsc --noEmit -p tsconfig.storybook.json",
+		"lint": "eslint . --max-warnings=0",
+		"lint:fix": "eslint . --fix",
+		"format": "prettier --write .",
+		"format:check": "prettier --check .",
+		"test": "vitest run --coverage",
+		"test:watch": "vitest",
+		"theme:check": "node scripts/check-theme.mjs",
+		"prepare": "node scripts/prepare.mjs",
+		"prepublishOnly": "pnpm build",
+		"release": "semantic-release",
+		"ci:check": "pnpm run format:check && pnpm run lint && pnpm run typecheck && pnpm run test && pnpm run theme:check && pnpm run build",
+		"storybook": "storybook dev -p 6006",
+		"build-storybook": "storybook build"
+	},
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/yenio-pld/blocks.git"
+	},
+	"bugs": {
+		"url": "https://github.com/yenio-pld/blocks/issues"
+	},
+	"homepage": "https://github.com/yenio-pld/blocks#readme",
+	"keywords": [
+		"react",
+		"ui",
+		"components",
+		"compliance"
+	],
+	"author": "Yenio",
+	"license": "MIT",
+	"publishConfig": {
+		"access": "public"
+	},
+	"peerDependencies": {
+		"framer-motion": ">=11.0.0",
+		"lucide-react": ">=0.400.0",
+		"next-themes": ">=0.4.0",
+		"react": ">=18.0.0",
+		"react-dom": ">=18.0.0"
+	},
+	"peerDependenciesMeta": {
+		"framer-motion": {
+			"optional": true
+		},
+		"next-themes": {
+			"optional": true
+		}
+	},
+	"dependencies": {
+		"@base-ui/react": "^1.8.0",
+		"@radix-ui/react-alert-dialog": "^1.1.15",
+		"@radix-ui/react-dialog": "^1.1.15",
+		"@radix-ui/react-dropdown-menu": "^2.1.4",
+		"@radix-ui/react-label": "^2.1.15",
+		"@radix-ui/react-slider": "^1.3.6",
+		"@radix-ui/react-slot": "^1.1.1",
+		"@radix-ui/react-toggle": "^1.1.10",
+		"class-variance-authority": "^0.7.1",
+		"clsx": "^2.1.1",
+		"input-otp": "^1.5.0",
+		"sonner": "^2.0.8",
+		"tailwind-merge": "^3.3.0",
+		"vaul": "^1.1.2"
+	},
+	"devDependencies": {
+		"@commitlint/cli": "^19.8.1",
+		"@commitlint/config-conventional": "^19.8.1",
+		"@eslint/js": "^9.26.0",
+		"@fontsource/inter": "^5.3.0",
+		"@semantic-release/changelog": "^6.0.3",
+		"@semantic-release/git": "^10.0.1",
+		"@semantic-release/github": "^11.0.1",
+		"@semantic-release/npm": "^13.1.3",
+		"@storybook/addon-a11y": "^10.6.0",
+		"@storybook/addon-docs": "^10.6.0",
+		"@storybook/react-vite": "^10.6.0",
+		"@tailwindcss/postcss": "4.1.17",
+		"@testing-library/jest-dom": "6.9.1",
+		"@testing-library/react": "^16.3.0",
+		"@testing-library/user-event": "^14.6.1",
+		"@types/react": "^19.1.3",
+		"@types/react-dom": "^19.1.3",
+		"@vitest/coverage-istanbul": "^4.0.0",
+		"conventional-changelog-conventionalcommits": "^9.3.1",
+		"eslint": "^9.26.0",
+		"eslint-config-prettier": "^10.1.3",
+		"eslint-plugin-storybook": "^10.6.0",
+		"framer-motion": "^12.26.2",
+		"husky": "^9.1.7",
+		"jsdom": "^26.1.0",
+		"lint-staged": "^16.2.7",
+		"lucide-react": "^0.560.0",
+		"next-themes": "^0.4.4",
+		"prettier": "^3.5.3",
+		"react": "^19.1.0",
+		"react-dom": "^19.1.0",
+		"semantic-release": "^25.0.2",
+		"storybook": "^10.6.0",
+		"tailwindcss": "4.1.17",
+		"tsup": "^8.5.0",
+		"tw-animate-css": "^1.4.0",
+		"typescript": "^5.9.3",
+		"typescript-eslint": "^8.32.1",
+		"vitest": "^4.0.0",
+		"vitest-axe": "^0.1.0"
+	},
+	"pnpm": {
+		"onlyBuiltDependencies": [
+			"esbuild"
+		]
+	},
+	"lint-staged": {
+		"**/*.{js,jsx,ts,tsx,md,json,yml,yaml,css}": [
+			"prettier --write"
+		]
+	},
+	"packageManager": "pnpm@10.23.0+sha512.21c4e5698002ade97e4efe8b8b4a89a8de3c85a37919f957e7a0f30f38fbc5bbdd05980ffe29179b2fb6e6e691242e098d945d1601772cad0fef5fb6411e2a4b"
+}

package/scripts/check-theme.mjs

@@ -0,0 +1,74 @@
+import { existsSync, readdirSync, readFileSync, realpathSync } from "node:fs";
+import { dirname, join, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const SKIP_DIRS = new Set([
+	"node_modules",
+	"dist",
+	"coverage",
+	"storybook-static",
+	".git",
+]);
+
+const TOKEN_DECLARATION =
+	/--(?:background|foreground|card|popover|primary|secondary|muted|accent|destructive|border|input|ring|skeleton|sidebar|chart-[1-5])\s*:/;
+
+const canonical = resolve(
+	dirname(fileURLToPath(import.meta.url)),
+	"../src/theme.css",
+);
+
+function identity(path) {
+	const resolved = resolve(path);
+	return existsSync(resolved) ? realpathSync(resolved) : resolved;
+}
+
+const canonicalId = identity(canonical);
+
+function walk(dir, out) {
+	let entries;
+	try {
+		entries = readdirSync(dir, { withFileTypes: true });
+	} catch (error) {
+		console.error(`check-theme: cannot read ${dir}`);
+		console.error(error instanceof Error ? error.message : error);
+		process.exit(1);
+	}
+	for (const entry of entries) {
+		if (SKIP_DIRS.has(entry.name)) continue;
+		const path = join(dir, entry.name);
+		if (entry.isDirectory()) {
+			walk(path, out);
+		} else if (entry.isFile() && entry.name.endsWith(".css")) {
+			out.push(path);
+		}
+	}
+}
+
+const roots = process.argv.slice(2);
+const scanRoots = roots.length > 0 ? roots : [process.cwd()];
+const files = [];
+for (const root of scanRoots) {
+	walk(resolve(root), files);
+}
+
+const failures = [];
+for (const file of files) {
+	if (identity(file) === canonicalId) continue;
+	const text = readFileSync(file, "utf8");
+	if (TOKEN_DECLARATION.test(text)) {
+		failures.push(file);
+	}
+}
+
+if (failures.length > 0) {
+	console.error(
+		"Color tokens belong only in @yenio-pld/blocks theme.css. Duplicate declarations:",
+	);
+	for (const file of failures) {
+		console.error(`  ${file}`);
+	}
+	process.exit(1);
+}
+
+console.log("theme tokens ok");

package/src/theme.css

@@ -0,0 +1,191 @@
+/* Provisional Yenio palette. Precise, calm, and trustworthy.
+   Not a final brand sign-off. This file is the only color-token source.
+   Import it after `tailwindcss`. Do not copy these values into an app.
+   CSS only: no JavaScript and no client boundary. */
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+	--background: oklch(0.985 0.004 230);
+	--foreground: oklch(0.28 0.02 250);
+	--card: oklch(0.995 0.002 230);
+	--card-foreground: oklch(0.28 0.02 250);
+	--popover: oklch(0.995 0.002 230);
+	--popover-foreground: oklch(0.28 0.02 250);
+	--primary: oklch(0.4 0.07 230);
+	--primary-foreground: oklch(0.985 0.004 230);
+	--secondary: oklch(0.95 0.008 230);
+	--secondary-foreground: oklch(0.28 0.02 250);
+	--muted: oklch(0.95 0.006 230);
+	--muted-foreground: oklch(0.48 0.02 250);
+	--skeleton: oklch(0.9 0 0);
+	--accent: oklch(0.93 0.02 200);
+	--accent-foreground: oklch(0.28 0.02 250);
+	--destructive: oklch(0.52 0.16 25);
+	--destructive-foreground: oklch(0.98 0.01 95);
+	--border: oklch(0.9 0.008 230);
+	--input: oklch(0.86 0.01 230);
+	--ring: oklch(0.4 0.07 230);
+	--chart-1: oklch(0.55 0.08 230);
+	--chart-2: oklch(0.55 0.07 170);
+	--chart-3: oklch(0.55 0.06 90);
+	--chart-4: oklch(0.55 0.08 30);
+	--chart-5: oklch(0.5 0.07 300);
+	--sidebar: oklch(0.975 0.006 230);
+	--sidebar-foreground: oklch(0.28 0.02 250);
+	--sidebar-primary: oklch(0.4 0.07 230);
+	--sidebar-primary-foreground: oklch(0.985 0.004 230);
+	--sidebar-accent: oklch(0.93 0.02 200);
+	--sidebar-accent-foreground: oklch(0.28 0.02 250);
+	--sidebar-border: oklch(0.9 0.008 230);
+	--sidebar-ring: oklch(0.4 0.07 230);
+	--font-sans: Inter, ui-sans-serif, sans-serif, system-ui;
+	--font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+	--font-mono:
+		ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+		"Courier New", monospace;
+	--radius: 0.625rem;
+	--shadow-x: 0;
+	--shadow-y: 1px;
+	--shadow-blur: 3px;
+	--shadow-spread: 0px;
+	--shadow-opacity: 0.1;
+	--shadow-color: #000000;
+	--shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+	--shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+	--shadow-sm:
+		0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
+	--shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
+	--shadow-md:
+		0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
+	--shadow-lg:
+		0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
+	--shadow-xl:
+		0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
+	--shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
+	--tracking-normal: 0em;
+	--spacing: 0.25rem;
+	color-scheme: light;
+}
+
+.dark {
+	--background: oklch(0.2 0.015 250);
+	--foreground: oklch(0.9 0.01 230);
+	--card: oklch(0.24 0.016 250);
+	--card-foreground: oklch(0.9 0.01 230);
+	--popover: oklch(0.24 0.016 250);
+	--popover-foreground: oklch(0.9 0.01 230);
+	--primary: oklch(0.74 0.06 220);
+	--primary-foreground: oklch(0.2 0.015 250);
+	--secondary: oklch(0.3 0.012 250);
+	--secondary-foreground: oklch(0.9 0.01 230);
+	--muted: oklch(0.28 0.012 250);
+	--muted-foreground: oklch(0.68 0.015 230);
+	--skeleton: oklch(0.32 0 0);
+	--accent: oklch(0.3 0.02 210);
+	--accent-foreground: oklch(0.95 0.01 230);
+	--destructive: oklch(0.65 0.15 25);
+	--destructive-foreground: oklch(0.98 0.005 250);
+	--border: oklch(0.34 0.012 250);
+	--input: oklch(0.34 0.012 250);
+	--ring: oklch(0.74 0.06 220);
+	--chart-1: oklch(0.7 0.07 230);
+	--chart-2: oklch(0.7 0.06 170);
+	--chart-3: oklch(0.75 0.05 95);
+	--chart-4: oklch(0.7 0.07 40);
+	--chart-5: oklch(0.68 0.07 310);
+	--sidebar: oklch(0.22 0.016 250);
+	--sidebar-foreground: oklch(0.9 0.01 230);
+	--sidebar-primary: oklch(0.74 0.06 220);
+	--sidebar-primary-foreground: oklch(0.2 0.015 250);
+	--sidebar-accent: oklch(0.3 0.02 210);
+	--sidebar-accent-foreground: oklch(0.95 0.01 230);
+	--sidebar-border: oklch(0.3 0.012 250);
+	--sidebar-ring: oklch(0.74 0.06 220);
+	--font-sans: Inter, ui-sans-serif, sans-serif, system-ui;
+	--font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+	--font-mono:
+		ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+		"Courier New", monospace;
+	--radius: 0.625rem;
+	--shadow-x: 0;
+	--shadow-y: 1px;
+	--shadow-blur: 3px;
+	--shadow-spread: 0px;
+	--shadow-opacity: 0.1;
+	--shadow-color: #000000;
+	--shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+	--shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+	--shadow-sm:
+		0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
+	--shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
+	--shadow-md:
+		0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
+	--shadow-lg:
+		0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
+	--shadow-xl:
+		0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
+	--shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
+	color-scheme: dark;
+}
+
+@theme inline {
+	--color-background: var(--background);
+	--color-foreground: var(--foreground);
+	--color-card: var(--card);
+	--color-card-foreground: var(--card-foreground);
+	--color-popover: var(--popover);
+	--color-popover-foreground: var(--popover-foreground);
+	--color-primary: var(--primary);
+	--color-primary-foreground: var(--primary-foreground);
+	--color-secondary: var(--secondary);
+	--color-secondary-foreground: var(--secondary-foreground);
+	--color-muted: var(--muted);
+	--color-muted-foreground: var(--muted-foreground);
+	--color-skeleton: var(--skeleton);
+	--color-accent: var(--accent);
+	--color-accent-foreground: var(--accent-foreground);
+	--color-destructive: var(--destructive);
+	--color-destructive-foreground: var(--destructive-foreground);
+	--color-border: var(--border);
+	--color-input: var(--input);
+	--color-ring: var(--ring);
+	--color-chart-1: var(--chart-1);
+	--color-chart-2: var(--chart-2);
+	--color-chart-3: var(--chart-3);
+	--color-chart-4: var(--chart-4);
+	--color-chart-5: var(--chart-5);
+	--color-sidebar: var(--sidebar);
+	--color-sidebar-foreground: var(--sidebar-foreground);
+	--color-sidebar-primary: var(--sidebar-primary);
+	--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+	--color-sidebar-accent: var(--sidebar-accent);
+	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+	--color-sidebar-border: var(--sidebar-border);
+	--color-sidebar-ring: var(--sidebar-ring);
+
+	--font-sans: var(--font-sans);
+	--font-mono: var(--font-mono);
+	--font-serif: var(--font-serif);
+
+	--radius-sm: calc(var(--radius) - 4px);
+	--radius-md: calc(var(--radius) - 2px);
+	--radius-lg: var(--radius);
+	--radius-xl: calc(var(--radius) + 4px);
+
+	--shadow-2xs: var(--shadow-2xs);
+	--shadow-xs: var(--shadow-xs);
+	--shadow-sm: var(--shadow-sm);
+	--shadow: var(--shadow);
+	--shadow-md: var(--shadow-md);
+	--shadow-lg: var(--shadow-lg);
+	--shadow-xl: var(--shadow-xl);
+	--shadow-2xl: var(--shadow-2xl);
+
+	--tracking-tighter: calc(var(--tracking-normal) - 0.05em);
+	--tracking-tight: calc(var(--tracking-normal) - 0.025em);
+	--tracking-normal: var(--tracking-normal);
+	--tracking-wide: calc(var(--tracking-normal) + 0.025em);
+	--tracking-wider: calc(var(--tracking-normal) + 0.05em);
+	--tracking-widest: calc(var(--tracking-normal) + 0.1em);
+}