@cueplusplus/ui 0.1.0

package/dist/theming/serialize.js

@@ -0,0 +1,165 @@
+//#region src/theming/serialize.ts
+/**
+* Turning a resolved token map back into the stylesheet the tokens build would
+* have written.
+*
+* This module exists so there is exactly **one** spelling of the output format.
+* The spec's whole third-party theming story is "tier 2 always compiles down to
+* tier 1" — a generated theme has to be indistinguishable from a hand-authored
+* `[data-theme]` block, or a consumer ends up with two vocabularies and the
+* generator becomes a toy. So the shapes below mirror `build.mjs` deliberately,
+* comments included: same selector form, same declaration order, same section
+* breaks. `test/theming/presets.test.ts` diffs the two.
+*
+* It is also the only place that touches raw strings, which makes it the place
+* to stop injection. A theme name lands inside an attribute selector and a font
+* stack lands inside a declaration; both are checked here rather than trusted.
+*/
+/** The one custom-property prefix this design system emits. */
+const CUE_TOKEN_PREFIX = "--cue-";
+/**
+* What a theme may be called.
+*
+* The name is interpolated into `[data-theme="…"]`, so the pattern is a
+* whitelist rather than an escape: a CSS identifier, which is also what a
+* `data-theme` attribute is expected to hold and what a file called
+* `<name>.css` can be named.
+*/
+const THEME_NAME_PATTERN = /^[a-z][a-z0-9-]*$/i;
+/**
+* Characters a value may never contain: the ones that end a declaration, end a
+* block, or open a comment.
+*
+* Colour anchors do not need this — they are parsed by culori and re-emitted, so
+* a value that is not a colour never reaches the output. Font stacks are the
+* exception: they are free text by nature, and pass through verbatim.
+*/
+const UNSAFE_VALUE = /[;{}]|\/\*/;
+/**
+* Check a theme name and hand it back.
+*
+* @param name - The proposed theme name.
+* @returns The same name, once it is known to be safe to interpolate.
+* @throws TypeError if the name is not a CSS identifier.
+* @example
+* assertThemeName("acme-dark"); // → "acme-dark"
+*/
+function assertThemeName(name) {
+	if (!THEME_NAME_PATTERN.test(name)) throw new TypeError(`theme name must be a CSS identifier (letters, digits and dashes, starting with a letter), got ${JSON.stringify(name)}`);
+	return name;
+}
+/**
+* Check a free-text declaration value and hand it back.
+*
+* @param name - The token the value belongs to, for the error message.
+* @param value - The proposed value.
+* @returns The same value, once it is known to stay inside its declaration.
+* @throws TypeError if the value could end the declaration or the block.
+* @example
+* assertCssValue("font-mono", '"Berkeley Mono", monospace');
+*/
+function assertCssValue(name, value) {
+	if (UNSAFE_VALUE.test(value)) throw new TypeError(`${name} may not contain ";", "{", "}" or "/*" — got ${JSON.stringify(value)}`);
+	return value;
+}
+/**
+* The custom property a token is emitted as.
+*
+* Idempotent, so code that already holds `--cue-bg` can pass it straight back
+* through instead of stripping the prefix first.
+*
+* @param name - A bare token name, or an already-prefixed property.
+* @returns The `--cue-*` custom property name.
+* @example
+* tokenProperty("surface-1"); // → "--cue-surface-1"
+*/
+function tokenProperty(name) {
+	return name.startsWith("--cue-") ? name : `${CUE_TOKEN_PREFIX}${name}`;
+}
+/**
+* The selector a theme's declarations live under.
+*
+* Attribute selectors, not classes, because the two axes have to compose: a
+* `[data-theme]` on the root and another on a portal, a `[data-mode]` crossed
+* over either, all at the same specificity so later blocks win predictably.
+*
+* @param name - The theme name. Not re-checked — {@link assertThemeName} owns that.
+* @param options - Which axes to cross with.
+* @returns The CSS selector.
+* @example
+* themeSelector("acme", { mode: "light" }); // → '[data-theme="acme"][data-mode="light"]'
+*/
+function themeSelector(name, options = {}) {
+	const { mode, density } = options;
+	return [
+		`[data-theme="${name}"]`,
+		mode === "light" ? "[data-mode=\"light\"]" : "",
+		density === void 0 ? "" : `[data-density="${density}"]`
+	].join("");
+}
+/**
+* The derived colours every theme block carries, as `[token, value]` pairs.
+*
+* They are `color-mix()` expressions over `var(--cue-*)` rather than resolved
+* literals, and they are emitted **inside** the theme block rather than once on
+* `:root`, for the same reason the build does it: a custom property's `var()`
+* references are substituted at the element that declares it, so a `:root`-level
+* mix would freeze the default theme's accent into every nested theme.
+*/
+const DERIVED_TOKEN_TEMPLATES = [["accent-soft", "color-mix(in oklch, var(--cue-accent) 14%, transparent)"], ...[
+	"ok",
+	"busy",
+	"warn",
+	"danger",
+	"info"
+].flatMap((status) => [[`${status}-soft`, `color-mix(in oklch, var(--cue-${status}) 12%, transparent)`], [`${status}-border`, `color-mix(in oklch, var(--cue-${status}) 35%, transparent)`]])];
+/**
+* {@link DERIVED_TOKEN_TEMPLATES} as a property → value map.
+*
+* @returns The eleven derived declarations, keyed by custom property.
+* @example
+* derivedTokens()["--cue-accent-soft"];
+*/
+function derivedTokens() {
+	return Object.fromEntries(DERIVED_TOKEN_TEMPLATES.map(([name, value]) => [tokenProperty(name), value]));
+}
+/**
+* One rule, printed.
+*
+* Empty sections vanish rather than leaving a comment with nothing under it —
+* which is what makes "emit the fonts section only if there are fonts" a
+* data decision instead of a branch at every call site.
+*
+* @param block - Selector, colour scheme and sections.
+* @returns The rule, without a trailing newline.
+* @example
+* serializeThemeBlock({ selector: ":root", sections: [{ declarations: [["--cue-bg", "#000"]] }] });
+*/
+function serializeThemeBlock(block) {
+	const lines = [];
+	if (block.colorScheme !== void 0) lines.push(`  color-scheme: ${block.colorScheme};`);
+	for (const section of block.sections) {
+		if (section.declarations.length === 0) continue;
+		if (section.comment !== void 0) {
+			if (lines.length > 0) lines.push("");
+			lines.push(`  /* ${section.comment} */`);
+		}
+		for (const [name, value] of section.declarations) lines.push(`  ${name}: ${value};`);
+	}
+	return `${block.selector} {\n${lines.join("\n")}\n}`;
+}
+/**
+* A whole generated stylesheet: banner, then one rule per block.
+*
+* @param blocks - The rules, in cascade order — later blocks win ties.
+* @param options - Banner text.
+* @returns The stylesheet, newline-terminated.
+* @example
+* serializeThemeCss(blocks, { banner: "@cueplusplus/ui — createTheme()" });
+*/
+function serializeThemeCss(blocks, options = {}) {
+	const rules = blocks.map(serializeThemeBlock);
+	return `${[...options.banner === void 0 ? [] : [`/*! ${options.banner}\n * Generated by createTheme(). Do not edit by hand.\n */`], ...rules].join("\n\n")}\n`;
+}
+//#endregion
+export { CUE_TOKEN_PREFIX, DERIVED_TOKEN_TEMPLATES, THEME_NAME_PATTERN, assertCssValue, assertThemeName, derivedTokens, serializeThemeBlock, serializeThemeCss, themeSelector, tokenProperty };

package/package.json

@@ -0,0 +1,216 @@
+{
+  "name": "@cueplusplus/ui",
+  "version": "0.1.0",
+  "description": "CUE++ design system components: Tailwind v4 styled wrappers over Base UI, driven by @cueplusplus/tokens.",
+  "license": "MIT",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/cueplusplus/product-design-system"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "engines": {
+    "node": ">=22"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css",
+    "./package.json": "./package.json",
+    "./primitives": {
+      "types": "./dist/primitives/index.d.ts",
+      "default": "./dist/primitives/index.js"
+    },
+    "./forms": {
+      "types": "./dist/forms/index.d.ts",
+      "default": "./dist/forms/index.js"
+    },
+    "./overlays": {
+      "types": "./dist/overlays/index.d.ts",
+      "default": "./dist/overlays/index.js"
+    },
+    "./charts": {
+      "types": "./dist/charts/index.d.ts",
+      "default": "./dist/charts/index.js"
+    },
+    "./chat": {
+      "types": "./dist/chat/index.d.ts",
+      "default": "./dist/chat/index.js"
+    },
+    "./chrome": {
+      "types": "./dist/chrome/index.d.ts",
+      "default": "./dist/chrome/index.js"
+    },
+    "./dmx": {
+      "types": "./dist/dmx/index.d.ts",
+      "default": "./dist/dmx/index.js"
+    },
+    "./midi": {
+      "types": "./dist/midi/index.d.ts",
+      "default": "./dist/midi/index.js"
+    },
+    "./flow": {
+      "types": "./dist/flow/index.d.ts",
+      "default": "./dist/flow/index.js"
+    },
+    "./flow.css": "./dist/flow/flow.css",
+    "./instruments": {
+      "types": "./dist/instruments/index.d.ts",
+      "default": "./dist/instruments/index.js"
+    },
+    "./instruments/log-viewer": {
+      "types": "./dist/instruments/log-viewer.d.ts",
+      "default": "./dist/instruments/log-viewer.js"
+    },
+    "./instruments/data-table": {
+      "types": "./dist/instruments/data-table.d.ts",
+      "default": "./dist/instruments/data-table.js"
+    },
+    "./date": {
+      "types": "./dist/date/index.d.ts",
+      "default": "./dist/date/index.js"
+    },
+    "./color": {
+      "types": "./dist/color/index.d.ts",
+      "default": "./dist/color/index.js"
+    },
+    "./configurator": {
+      "types": "./dist/configurator/index.d.ts",
+      "default": "./dist/configurator/index.js"
+    },
+    "./layout": {
+      "types": "./dist/layout/index.d.ts",
+      "default": "./dist/layout/index.js"
+    },
+    "./layout/carousel": {
+      "types": "./dist/layout/carousel.d.ts",
+      "default": "./dist/layout/carousel.js"
+    },
+    "./layout/resizable": {
+      "types": "./dist/layout/resizable.d.ts",
+      "default": "./dist/layout/resizable.js"
+    },
+    "./system": {
+      "types": "./dist/system/index.d.ts",
+      "default": "./dist/system/index.js"
+    },
+    "./theming": {
+      "types": "./dist/theming/index.d.ts",
+      "default": "./dist/theming/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "culori": "^4.0.2",
+    "tailwind-merge": "^3.6.0",
+    "@cueplusplus/tokens": "0.1.0"
+  },
+  "peerDependencies": {
+    "@base-ui/react": "^1.7.0",
+    "@internationalized/date": "^3.12.3",
+    "@tanstack/react-table": "^9.1.2",
+    "@tanstack/react-virtual": "^3.14.9",
+    "@xyflow/react": "^12.11.3",
+    "anser": "^2.3.5",
+    "date-fns": "^4.4.0",
+    "embla-carousel-react": "^8.6.0",
+    "lucide-react": "^1.31.0",
+    "react": "^19.0.0",
+    "react-aria-components": "^1.20.0",
+    "react-day-picker": "^10.0.1",
+    "react-dom": "^19.0.0",
+    "react-resizable-panels": "^4.12.3",
+    "recharts": "^3.10.1",
+    "tailwindcss": "^4.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@internationalized/date": {
+      "optional": true
+    },
+    "@tanstack/react-table": {
+      "optional": true
+    },
+    "@tanstack/react-virtual": {
+      "optional": true
+    },
+    "@xyflow/react": {
+      "optional": true
+    },
+    "anser": {
+      "optional": true
+    },
+    "date-fns": {
+      "optional": true
+    },
+    "embla-carousel-react": {
+      "optional": true
+    },
+    "lucide-react": {
+      "optional": true
+    },
+    "react-aria-components": {
+      "optional": true
+    },
+    "react-day-picker": {
+      "optional": true
+    },
+    "react-resizable-panels": {
+      "optional": true
+    },
+    "recharts": {
+      "optional": true
+    },
+    "tailwindcss": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@arethetypeswrong/cli": "^0.18.5",
+    "@base-ui/react": "^1.7.0",
+    "@internationalized/date": "^3.12.3",
+    "@tanstack/react-table": "^9.1.2",
+    "@tanstack/react-virtual": "^3.14.9",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.4",
+    "@types/culori": "^4.0.1",
+    "@types/node": "^24.0.0",
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
+    "@vitejs/plugin-react": "^6.0.5",
+    "@xyflow/react": "^12.11.3",
+    "anser": "^2.3.5",
+    "date-fns": "^4.4.0",
+    "embla-carousel-react": "^8.6.0",
+    "jsdom": "^30.0.1",
+    "lucide-react": "^1.31.0",
+    "publint": "^0.3.23",
+    "react": "^19.2.0",
+    "react-aria-components": "^1.20.0",
+    "react-day-picker": "^10.0.1",
+    "react-dom": "^19.2.0",
+    "react-resizable-panels": "^4.12.3",
+    "recharts": "^3.10.1",
+    "tailwindcss": "^4.3.3",
+    "tsdown": "0.22.14",
+    "typescript": "^5.7.0",
+    "vitest": "^4.1.10",
+    "@repo/typescript-config": "0.0.0"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "test": "vitest run",
+    "check:publish": "publint && attw --pack ."
+  }
+}