@ctrl-ui/react 0.9.5 → 0.9.8

package/lint/eslint-plugin.mjs

@@ -0,0 +1,87 @@
+import { componentStyleClass, componentStyleMessage, controlUiImportPattern, rawTypeClass, rawTypeMessage } from "./class-policy.mjs";
+
+const componentStyle = new RegExp(componentStyleClass);
+const rawType = new RegExp(rawTypeClass);
+
+function stringsIn(node) {
+  if (Array.isArray(node)) return node.flatMap(stringsIn);
+  if (!node || typeof node !== "object") return [];
+  if (node.type === "Literal") return typeof node.value === "string" ? [node.value] : [];
+  if (node.type === "TemplateElement") return [node.value.cooked ?? node.value.raw];
+  return Object.entries(node).flatMap(([key, child]) => (key === "parent" ? [] : stringsIn(child)));
+}
+
+function classNameMatches(attribute, pattern) {
+  if (attribute.name.name !== "className" || !attribute.value) return false;
+  return stringsIn(attribute.value).some((text) => pattern.test(text));
+}
+
+function elementRootName(name) {
+  if (name.type === "JSXIdentifier") return name.name;
+  if (name.type === "JSXMemberExpression") return elementRootName(name.object);
+  return undefined;
+}
+
+function controlUiLocalNames(program, controlUiImport) {
+  const names = new Set();
+  for (const statement of program.body) {
+    if (statement.type !== "ImportDeclaration" || statement.importKind === "type") continue;
+    if (!controlUiImport.test(statement.source.value)) continue;
+    for (const specifier of statement.specifiers) names.add(specifier.local.name);
+  }
+  return names;
+}
+
+const noComponentStyleClasses = {
+  meta: {
+    type: "problem",
+    docs: { description: "Keep className on Control UI components to layout; the component owns its look." },
+    messages: { componentStyle: componentStyleMessage },
+    schema: [
+      {
+        type: "object",
+        properties: { importSources: { type: "array", items: { type: "string" } } },
+        additionalProperties: false,
+      },
+    ],
+  },
+  create(context) {
+    const controlUiImport = new RegExp(`^${controlUiImportPattern(context.options[0]?.importSources)}`);
+    let controlUiNames = new Set();
+    return {
+      Program(program) {
+        controlUiNames = controlUiLocalNames(program, controlUiImport);
+      },
+      JSXAttribute(attribute) {
+        if (!controlUiNames.has(elementRootName(attribute.parent.name))) return;
+        if (classNameMatches(attribute, componentStyle)) context.report({ node: attribute, messageId: "componentStyle" });
+      },
+    };
+  },
+};
+
+const noRawTypeClasses = {
+  meta: {
+    type: "problem",
+    docs: { description: "Size text through the Control UI type scale instead of text-* classes." },
+    messages: { rawType: rawTypeMessage },
+    schema: [],
+  },
+  create(context) {
+    return {
+      JSXAttribute(attribute) {
+        if (classNameMatches(attribute, rawType)) context.report({ node: attribute, messageId: "rawType" });
+      },
+    };
+  },
+};
+
+const plugin = {
+  meta: { name: "control-ui" },
+  rules: {
+    "no-component-style-classes": noComponentStyleClasses,
+    "no-raw-type-classes": noRawTypeClasses,
+  },
+};
+
+export default plugin;

package/lint/grit-rules.mjs

@@ -0,0 +1,40 @@
+import { componentStyleClass, componentStyleMessage, controlUiImportPattern, rawTypeClass, rawTypeMessage } from "./class-policy.mjs";
+
+function gritRegex(pattern) {
+  return `r"(?s).*(?:${pattern.replaceAll('"', '\\"')}).*"`;
+}
+
+function gritString(text) {
+  return JSON.stringify(text);
+}
+
+const stringTexts = "or { JsxString(), JsStringLiteralExpression(), JsTemplateChunkElement() }";
+
+export function gritRules(importSources = []) {
+  return {
+    "no-component-style-classes.grit": `language js(typescript, jsx)
+
+or {
+  JsxSelfClosingElement(name=$name, attributes=$attributes),
+  JsxOpeningElement(name=$name, attributes=$attributes)
+} as $element where {
+  $name <: r"([A-Z]\\w*)(?:\\.[\\w.]+)?"($component),
+  $attributes <: some JsxAttribute(name=\`className\`) as $attr,
+  $attr <: contains ${stringTexts} as $text where { $text <: ${gritRegex(componentStyleClass)} },
+  $element <: within JsModule() as $module,
+  $module <: contains JsImport() as $import where {
+    $import <: ${gritRegex(String.raw`from\s+['"]${controlUiImportPattern(importSources)}`)},
+    $import <: contains JsIdentifierBinding() as $binding where { $binding <: $component }
+  },
+  register_diagnostic(span=$attr, message=${gritString(componentStyleMessage)}, severity="error")
+}
+`,
+    "no-raw-type-classes.grit": `language js(typescript, jsx)
+
+JsxAttribute(name=\`className\`) as $attr where {
+  $attr <: contains ${stringTexts} as $text where { $text <: ${gritRegex(rawTypeClass)} },
+  register_diagnostic(span=$attr, message=${gritString(rawTypeMessage)}, severity="error")
+}
+`,
+  };
+}

package/lint/no-component-style-classes.grit

@@ -0,0 +1,16 @@
+language js(typescript, jsx)
+
+or {
+  JsxSelfClosingElement(name=$name, attributes=$attributes),
+  JsxOpeningElement(name=$name, attributes=$attributes)
+} as $element where {
+  $name <: r"([A-Z]\w*)(?:\.[\w.]+)?"($component),
+  $attributes <: some JsxAttribute(name=`className`) as $attr,
+  $attr <: contains or { JsxString(), JsStringLiteralExpression(), JsTemplateChunkElement() } as $text where { $text <: r"(?s).*(?:[^\s\"'\x60]!(?:[\s\"'\x60]|$)|(?:^|[\s\"'\x60])![\w\[-]|(?:^|[^\w-])(?:p[xytrblse]?-|bg-[\w\[]|text-(?:foreground|muted|primary|secondary|accent|destructive|success|warning|info|card|popover|sidebar|background|canvas|current|inherit|transparent|white|black|[a-z]+-\d{2,3}|\[(?:#|oklch|rgb|hsl|lab|lch|color|var))|font-|leading-|tracking-|border|divide-|rounded|shadow|ring\b|ring-|outline|opacity-|backdrop-|fill-|stroke-|decoration-|underline|line-through|italic|uppercase|lowercase|capitalize|tabular-nums|(?:hover|focus|focus-visible|focus-within|active|disabled|open|checked|dark|placeholder|aria-[^:\s]*|data-[^:\s]*|group-[^:\s]*|peer-[^:\s]*|has-[^:\s]*|\*|\[&[^\s]*?\]):)).*" },
+  $element <: within JsModule() as $module,
+  $module <: contains JsImport() as $import where {
+    $import <: r"(?s).*(?:from\s+['\"](?:(?:@ctrl-ui/react|[^'\"]*components/control-ui)/)).*",
+    $import <: contains JsIdentifierBinding() as $binding where { $binding <: $component }
+  },
+  register_diagnostic(span=$attr, message="Control UI component styled through className: color, type, padding, borders, radius, shadows, state styles and !important belong to the component. Use its props or a --cui-* knob; keep className for layout (flex, gap, width, margin, placement).", severity="error")
+}

package/lint/no-raw-type-classes.grit

@@ -1,7 +1,6 @@
 language js(typescript, jsx)
 
-JsxAttribute(name=$name, initializer=$value) as $attr where {
-  $name <: `className`,
-  $value <: contains r".*\btext-(?:micro|caption|label|body|body-lg|heading-[1-4]|display)\b.*",
-  register_diagnostic(span=$attr, message="Type rung in className: render text through <Text>/<Heading>, or size the control with its size prop or --cui-*-font-size knob.", severity="warn")
+JsxAttribute(name=`className`) as $attr where {
+  $attr <: contains or { JsxString(), JsStringLiteralExpression(), JsTemplateChunkElement() } as $text where { $text <: r"(?s).*(?:(?:^|[^\w-])text-(?:micro|caption|label|body|body-lg|heading-[1-4]|display|xs|sm|base|lg|xl|[2-9]xl)\b|(?:^|[^\w-])text-\[\d[^\]]*\]).*" },
+  register_diagnostic(span=$attr, message="Text size in className: render text through <Text>/<Heading> on the type scale, or size the control with its size prop or --cui-*-font-size knob.", severity="error")
 }

package/lint/write-grit-rules.mjs

@@ -0,0 +1,19 @@
+#!/usr/bin/env node
+import { mkdirSync, writeFileSync } from "node:fs";
+import path from "node:path";
+import { parseArgs } from "node:util";
+import { gritRules } from "./grit-rules.mjs";
+
+const { values } = parseArgs({
+  options: {
+    "import-source": { type: "string", multiple: true, default: [] },
+    out: { type: "string" },
+  },
+});
+
+if (!values.out) throw new Error("control-ui-grit needs --out <directory>");
+
+mkdirSync(values.out, { recursive: true });
+for (const [file, source] of Object.entries(gritRules(values["import-source"]))) {
+  writeFileSync(path.join(values.out, file), source);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ctrl-ui/react",
-  "version": "0.9.5",
+  "version": "0.9.8",
   "description": "100+ React components for Tailwind CSS and shadcn/ui: pickers, trees, editors, canvases, app templates, and AI chat surfaces, with neutral defaults and consumer-owned themes.",
   "keywords": [
     "react",
@@ -28,12 +28,17 @@
   },
   "homepage": "https://control-ui.dev",
   "type": "module",
+  "bin": {
+    "control-ui-grit": "./lint/write-grit-rules.mjs"
+  },
   "sideEffects": [
     "**/*.css"
   ],
   "files": [
     "dist",
-    "lint/*.grit"
+    "lint/*.grit",
+    "lint/*.mjs",
+    "lint/biome-preset.json"
   ],
   "publishConfig": {
     "access": "public"
@@ -41,6 +46,8 @@
   "exports": {
     "./package.json": "./package.json",
     "./styles/*": "./dist/styles/*",
+    "./eslint-plugin": "./lint/eslint-plugin.mjs",
+    "./biome": "./lint/biome-preset.json",
     "./*": {
       "types": "./dist/*.d.ts",
       "default": "./dist/*.js"
@@ -53,7 +60,7 @@
     "lint": "biome lint ."
   },
   "peerDependencies": {
-    "@base-ui/react": "^1.8.0",
+    "@base-ui/react": "^1.9.0",
     "@tanstack/charts": "^1.1.0",
     "@tanstack/react-virtual": "^3.14.13",
     "@tiptap/core": "3.31.4",
@@ -182,6 +189,8 @@
   "devDependencies": {
     "@types/bun": "^1.4.2",
     "@types/react": "^19.3.0",
+    "eslint": "10.10.0",
+    "oxlint": "1.81.0",
     "tsdown": "0.23.0"
   }
 }

package/dist/styles/type-scale.css

@@ -1,72 +0,0 @@
-/*
- * Type scale, canonical excerpt. Tokens live in the installed theme; this is the docs-facing font-size-only slice.
- * ONE rung per size by ROLE — only source of font-size; never text-[Npx] or Tailwind's text-xs/sm defaults. Paired --line-height/--font-weight ride along per rung.
- */
-@theme {
-  /* Body/UI family: 10-16px band, ~95% of interface text; line-height stays a utility (leading-*) for per-surface density. */
-  --text-micro: 0.625rem; /* 10px — kbd, badge counters, dense numeric meta */
-  --text-caption: 0.6875rem; /* 11px — overlines, timestamps, section / group labels */
-  --text-label: 0.75rem; /* 12px — form labels + small chrome (nav item, tooltip, shortcut) */
-  --text-body: 0.875rem; /* 14px — DEFAULT body & control text (the workhorse) */
-  --text-body-lg: 1rem; /* 16px — emphasized / larger body */
-
-  /* Heading family: HIERARCHY, numbered (heading-1=largest); each pairs line-height+weight so `text-heading-N`
-     carries all three, letting a skin retune headings by re-valuing these alone. */
-  --text-heading-4: 0.9375rem; /* 15px */
-  --text-heading-4--line-height: 1.4;
-  --text-heading-4--font-weight: 600;
-  --text-heading-3: 1.125rem; /* 18px */
-  --text-heading-3--line-height: 1.35;
-  --text-heading-3--font-weight: 600;
-  --text-heading-2: 1.375rem; /* 22px */
-  --text-heading-2--line-height: 1.25;
-  --text-heading-2--font-weight: 600;
-  --text-heading-1: 1.875rem; /* 30px — content h1 */
-  --text-heading-1--line-height: 1.15;
-  --text-heading-1--font-weight: 700;
-  --text-heading-1--letter-spacing: -0.01em;
-
-  /* display — the biggest rung, above the content h1: page titles (PageHeader) and heroes. */
-  --text-display: 2.25rem; /* 36px */
-  --text-display--line-height: 1.1;
-  --text-display--font-weight: 600;
-  --text-display--letter-spacing: -0.02em;
-
-  /* Font ROLES: body+display default to --font-sans; brand re-values ONE token for headings(font-display)/body(font-body)
-     own face. */
-  --font-body: var(--font-sans);
-  --font-display: var(--font-sans);
-}
-
-/*
- * Heading rungs also carry the display face and balanced wrapping (Tailwind merges this into the same `text-heading-N` class),
- * so a heading is ONE class: `text-heading-2`, never `text-heading-2 font-display text-balance font-semibold`.
- */
-@utility text-display {
-  font-family: var(--font-display);
-  text-wrap: balance;
-}
-@utility text-heading-1 {
-  font-family: var(--font-display);
-  text-wrap: balance;
-}
-@utility text-heading-2 {
-  font-family: var(--font-display);
-  text-wrap: balance;
-}
-@utility text-heading-3 {
-  font-family: var(--font-display);
-  text-wrap: balance;
-}
-@utility text-heading-4 {
-  font-family: var(--font-display);
-  text-wrap: balance;
-}
-
-/*
- * History: fixed 3 competing type systems (Tailwind defaults + named rungs + raw text-[Npx]) into one rung/role; 14px = body.
- * Usage: React text goes through <Text>/<Heading> (ui/typography): size, tone and weight are props, className stays layout-only.
- * A bare rung is for markup React doesn't render as components (MDX, markdown, email HTML), e.g. text-heading-1 on <h1>.
- * Heading LEVEL is the document outline; the RUNG is the look. They are decoupled on purpose: an <h3> may wear text-heading-2.
- * Control chrome text is sized by its recipe (`--cui-button-font-size`, `--cui-field-font-size`), not by these utilities.
- */