@ctrl-ui/react 0.9.11 → 0.9.13

package/dist/ui/table.d.ts

@@ -1,3 +1,4 @@
+import { RenderProp } from "../control-props.js";
 import { TableKnobStyle } from "../knob-contracts/table-knobs.js";
 import { CSSProperties, ComponentProps } from "react";
 //#region src/ui/table.d.ts
@@ -22,6 +23,10 @@ export type TableHeadProps = Omit<ComponentProps<"th">, "style"> & {
 export type TableCellProps = ComponentProps<"td"> & {
   style?: CSSProperties & TableKnobStyle;
 };
+export type TableRowLinkProps = Omit<ComponentProps<"button">, "style"> & {
+  render?: RenderProp<ComponentProps<"button">>;
+  style?: CSSProperties & TableKnobStyle;
+};
 export type TableCaptionProps = Omit<ComponentProps<"caption">, "style"> & {
   style?: CSSProperties & TableKnobStyle;
 };
@@ -33,4 +38,5 @@ export declare function TableRow({ className, ...props }: TableRowProps): import
 export declare function TableHead({ className, ...props }: TableHeadProps): import("react").JSX.Element;
 export declare function TableCell({ className, ...props }: TableCellProps): import("react").JSX.Element;
 export declare function TableCaption({ className, ...props }: TableCaptionProps): import("react").JSX.Element;
+export declare function TableRowLink({ render, ...props }: TableRowLinkProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 //#endregion

package/dist/ui/table.js

@@ -1,5 +1,7 @@
+"use client";
 import { cn } from "../lib/cn.js";
 import { ScrollArea } from "./scroll-area.js";
+import { useRender } from "@base-ui/react/use-render";
 import { jsx } from "react/jsx-runtime";
 //#region src/ui/table.tsx
 function Table({ className, ...props }) {
@@ -85,5 +87,19 @@ function TableCaption({ className, ...props }) {
 		...props
 	});
 }
+function TableRowLink({ render, ...props }) {
+	return useRender({
+		defaultTagName: "button",
+		render,
+		props: {
+			type: render ? void 0 : "button",
+			...props,
+			"data-control-ui": "table",
+			"data-control-family": "table",
+			"data-slot": "row-link",
+			"data-focus-ring": "none"
+		}
+	});
+}
 //#endregion
-export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, TableRowLink };

package/lint/class-policy.mjs

@@ -6,7 +6,37 @@ export function controlUiImportPattern(importSources = []) {
   return `(?:${[controlUiImportPath, ...importSources.map(escapeRegExp)].join("|")})`;
 }
 
-export const componentStyleClass = String.raw`[^\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]*?\]):)`;
+const classDelimiter = String.raw`\s"'\x60`;
+const classEnd = `(?:[${classDelimiter}]|$)`;
+
+function classSuffixOtherThan(suffixes) {
+  const firsts = [...new Set(suffixes.filter(Boolean).map((suffix) => suffix[0]))];
+  const alternatives = [
+    ...(suffixes.includes("") ? [] : [classEnd]),
+    `[^${firsts.join("")}${classDelimiter}]`,
+    ...firsts.map(
+      (first) => first + classSuffixOtherThan(suffixes.filter((suffix) => suffix[0] === first).map((suffix) => suffix.slice(1))),
+    ),
+  ];
+  return `(?:${alternatives.join("|")})`;
+}
+
+const textLayoutSuffixes = [
+  "left",
+  "center",
+  "right",
+  "justify",
+  "start",
+  "end",
+  "wrap",
+  "nowrap",
+  "balance",
+  "pretty",
+  "ellipsis",
+  "clip",
+];
+
+export const componentStyleClass = String.raw`[^${classDelimiter}]!${classEnd}|(?:^|[${classDelimiter}])![\w\[-]|(?:^|[^\w-])(?:p[xytrblse]?-|bg-[\w\[]|text-${classSuffixOtherThan(textLayoutSuffixes)}|font-|leading-|tracking-|border|divide-|rounded|shadow|inset-shadow|drop-shadow|ring\b|ring-|inset-ring|outline|opacity-|backdrop-|fill-|stroke-|caret-|accent-|scheme-|mask-|decoration-|underline|no-underline|overline|line-through|italic|not-italic|uppercase|lowercase|capitalize|normal-case|antialiased|subpixel-antialiased|ordinal|slashed-zero|(?:normal|lining|oldstyle|proportional|tabular)-nums|(?:diagonal|stacked)-fractions|(?:hover|focus|focus-visible|focus-within|active|disabled|enabled|open|checked|indeterminate|visited|target|invalid|valid|user-invalid|user-valid|required|optional|read-only|autofill|placeholder-shown|in-range|out-of-range|inert|starting|dark|placeholder|selection|marker|file|first-letter|first-line|backdrop|details-content|aria-[^:\s]*|data-[^:\s]*|group-[^:\s]*|peer-[^:\s]*|has-[^:\s]*|\*|\[&[^\s]*?\]):)`;
 
 export const rawTypeClass = String.raw`(?:^|[^\w-])text-(?:micro|caption|label|body|body-lg|heading-[1-4]|display|xs|sm|base|lg|xl|[2-9]xl)\b|(?:^|[^\w-])text-\[\d[^\]]*\]`;
 

package/lint/eslint-plugin.mjs

@@ -11,9 +11,28 @@ function stringsIn(node) {
   return Object.entries(node).flatMap(([key, child]) => (key === "parent" ? [] : stringsIn(child)));
 }
 
+function referencedNames(node) {
+  if (Array.isArray(node)) return node.flatMap(referencedNames);
+  if (!node || typeof node !== "object") return [];
+  if (node.type === "Identifier") return [node.name];
+  if (node.type === "MemberExpression" && !node.computed) return referencedNames(node.object);
+  if (node.type === "Property" && !node.computed) return referencedNames(node.value);
+  return Object.entries(node).flatMap(([key, child]) => (key === "parent" ? [] : referencedNames(child)));
+}
+
+const classLiteralTypes = new Set(["Literal", "TemplateLiteral", "ObjectExpression"]);
+
+function classLiteral(init) {
+  const value = init?.type === "TSAsExpression" || init?.type === "TSSatisfiesExpression" ? init.expression : init;
+  return classLiteralTypes.has(value?.type) ? value : undefined;
+}
+
+function isClassName(attribute) {
+  return attribute.name.name === "className" && Boolean(attribute.value);
+}
+
 function classNameMatches(attribute, pattern) {
-  if (attribute.name.name !== "className" || !attribute.value) return false;
-  return stringsIn(attribute.value).some((text) => pattern.test(text));
+  return isClassName(attribute) && stringsIn(attribute.value).some((text) => pattern.test(text));
 }
 
 function elementRootName(name) {
@@ -22,6 +41,14 @@ function elementRootName(name) {
   return undefined;
 }
 
+function renderPropOwner(element) {
+  const body =
+    element.parent.type === "ReturnStatement" && element.parent.parent.type === "BlockStatement" ? element.parent.parent : element;
+  const value = body.parent.type === "ArrowFunctionExpression" ? body.parent : element;
+  const attribute = value.parent.type === "JSXExpressionContainer" ? value.parent.parent : undefined;
+  return attribute?.type === "JSXAttribute" && attribute.name.name === "render" ? attribute.parent : undefined;
+}
+
 function controlUiLocalNames(program, controlUiImport) {
   const names = new Set();
   for (const statement of program.body) {
@@ -48,13 +75,30 @@ const noComponentStyleClasses = {
   create(context) {
     const controlUiImport = new RegExp(`^${controlUiImportPattern(context.options[0]?.importSources)}`);
     let controlUiNames = new Set();
+    const isControlUi = (element) => element !== undefined && controlUiNames.has(elementRootName(element.name));
+    const constantClasses = new Map();
+    const componentClassNames = [];
     return {
       Program(program) {
         controlUiNames = controlUiLocalNames(program, controlUiImport);
       },
+      VariableDeclarator(declarator) {
+        const literal = classLiteral(declarator.init);
+        if (declarator.parent.kind !== "const" || declarator.id.type !== "Identifier" || !literal) return;
+        constantClasses.set(declarator.id.name, [...(constantClasses.get(declarator.id.name) ?? []), ...stringsIn(literal)]);
+      },
       JSXAttribute(attribute) {
-        if (!controlUiNames.has(elementRootName(attribute.parent.name))) return;
-        if (classNameMatches(attribute, componentStyle)) context.report({ node: attribute, messageId: "componentStyle" });
+        if (!isClassName(attribute)) return;
+        const element = attribute.parent;
+        if (isControlUi(element) || isControlUi(renderPropOwner(element.parent))) componentClassNames.push(attribute);
+      },
+      "Program:exit"() {
+        for (const attribute of componentClassNames) {
+          const constants = referencedNames(attribute.value).flatMap((name) => constantClasses.get(name) ?? []);
+          if ([...stringsIn(attribute.value), ...constants].some((text) => componentStyle.test(text))) {
+            context.report({ node: attribute, messageId: "componentStyle" });
+          }
+        }
       },
     };
   },

package/lint/grit-rules.mjs

@@ -8,24 +8,65 @@ function gritString(text) {
   return JSON.stringify(text);
 }
 
-const stringTexts = "or { JsxString(), JsStringLiteralExpression(), JsTemplateChunkElement() }";
+const stringTexts = `or { JsxString(), JsStringLiteralExpression(), JsTemplateChunkElement(), JsLiteralMemberName() as $memberName where { $memberName <: r"(?s)[\\"'].*" } }`;
+const classLiterals = "or { JsStringLiteralExpression(), JsTemplateExpression(), JsObjectExpression() }";
+const renderedTag = "or { JsxTagExpression(tag=$tag), JsParenthesizedExpression(expression=JsxTagExpression(tag=$tag)) }";
+
+const styled = gritRegex(componentStyleClass);
+const styledClassName = `$attr <: or {
+    contains ${stringTexts} as $text where { $text <: ${styled} },
+    contains JsReferenceIdentifier() as $reference where {
+      $reference <: r"(.+)"($referenced),
+      $module <: contains JsVariableDeclaration(declarators=$declarators) as $declaration where {
+        $declaration <: r"(?s)const\\s.*",
+        $declarators <: some JsVariableDeclarator(id=$referenced, initializer=JsInitializerClause(expression=$value)),
+        $value <: or { ${classLiterals}, TsAsExpression(expression=${classLiterals}), TsSatisfiesExpression(expression=${classLiterals}) },
+        $value <: contains ${stringTexts} as $constText where { $constText <: ${styled} }
+      }
+    }
+  }`;
+
+function importedFromControlUi(component, importSources, suffix = "") {
+  return `$module <: contains JsImport() as $import${suffix} where {
+    $import${suffix} <: ${gritRegex(String.raw`from\s+['"]${controlUiImportPattern(importSources)}`)},
+    $import${suffix} <: contains JsIdentifierBinding() as $binding${suffix} where { $binding${suffix} <: ${component} }
+  }`;
+}
 
 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 }
+  or {
+    JsxSelfClosingElement(name=$name, attributes=$attributes),
+    JsxOpeningElement(name=$name, attributes=$attributes)
+  } where {
+    $attributes <: some JsxAttribute(name=\`className\`) as $attr
   },
+  JsxAttribute(name=\`render\`, initializer=JsxAttributeInitializerClause(value=JsxExpressionAttributeValue(expression=$rendered))) as $render where {
+    $rendered <: or {
+      JsxTagExpression(tag=$tag),
+      JsArrowFunctionExpression(body=or {
+        ${renderedTag},
+        JsFunctionBody(statements=some JsReturnStatement(argument=${renderedTag}))
+      })
+    },
+    $tag <: or {
+      JsxSelfClosingElement(name=$renderedName, attributes=$renderedAttributes),
+      JsxElement(opening_element=JsxOpeningElement(name=$renderedName, attributes=$renderedAttributes))
+    },
+    $renderedAttributes <: some JsxAttribute(name=\`className\`) as $attr,
+    $render <: within or { JsxSelfClosingElement(name=$name), JsxOpeningElement(name=$name) },
+    $render <: within JsModule() as $module,
+    $renderedName <: r"([^.]+).*"($renderedComponent),
+    not ${importedFromControlUi("$renderedComponent", importSources, "Rendered")}
+  }
+} where {
+  $name <: r"([A-Z]\\w*)(?:\\.[\\w.]+)?"($component),
+  $attr <: within JsModule() as $module,
+  ${styledClassName},
+  ${importedFromControlUi("$component", importSources)},
   register_diagnostic(span=$attr, message=${gritString(componentStyleMessage)}, severity="error")
 }
 `,

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

@@ -1,13 +1,48 @@
 language js(typescript, jsx)
 
 or {
-  JsxSelfClosingElement(name=$name, attributes=$attributes),
-  JsxOpeningElement(name=$name, attributes=$attributes)
-} as $element where {
+  or {
+    JsxSelfClosingElement(name=$name, attributes=$attributes),
+    JsxOpeningElement(name=$name, attributes=$attributes)
+  } where {
+    $attributes <: some JsxAttribute(name=`className`) as $attr
+  },
+  JsxAttribute(name=`render`, initializer=JsxAttributeInitializerClause(value=JsxExpressionAttributeValue(expression=$rendered))) as $render where {
+    $rendered <: or {
+      JsxTagExpression(tag=$tag),
+      JsArrowFunctionExpression(body=or {
+        or { JsxTagExpression(tag=$tag), JsParenthesizedExpression(expression=JsxTagExpression(tag=$tag)) },
+        JsFunctionBody(statements=some JsReturnStatement(argument=or { JsxTagExpression(tag=$tag), JsParenthesizedExpression(expression=JsxTagExpression(tag=$tag)) }))
+      })
+    },
+    $tag <: or {
+      JsxSelfClosingElement(name=$renderedName, attributes=$renderedAttributes),
+      JsxElement(opening_element=JsxOpeningElement(name=$renderedName, attributes=$renderedAttributes))
+    },
+    $renderedAttributes <: some JsxAttribute(name=`className`) as $attr,
+    $render <: within or { JsxSelfClosingElement(name=$name), JsxOpeningElement(name=$name) },
+    $render <: within JsModule() as $module,
+    $renderedName <: r"([^.]+).*"($renderedComponent),
+    not $module <: contains JsImport() as $importRendered where {
+    $importRendered <: r"(?s).*(?:from\s+['\"](?:(?:@ctrl-ui/react|[^'\"]*components/control-ui)/)).*",
+    $importRendered <: contains JsIdentifierBinding() as $bindingRendered where { $bindingRendered <: $renderedComponent }
+  }
+  }
+} 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,
+  $attr <: within JsModule() as $module,
+  $attr <: or {
+    contains or { JsxString(), JsStringLiteralExpression(), JsTemplateChunkElement(), JsLiteralMemberName() as $memberName where { $memberName <: r"(?s)[\"'].*" } } as $text where { $text <: r"(?s).*(?:[^\s\"'\x60]!(?:[\s\"'\x60]|$)|(?:^|[\s\"'\x60])![\w\[-]|(?:^|[^\w-])(?:p[xytrblse]?-|bg-[\w\[]|text-(?:(?:[\s\"'\x60]|$)|[^lcrjsewnbp\s\"'\x60]|l(?:(?:[\s\"'\x60]|$)|[^e\s\"'\x60]|e(?:(?:[\s\"'\x60]|$)|[^f\s\"'\x60]|f(?:(?:[\s\"'\x60]|$)|[^t\s\"'\x60]|t(?:[^\s\"'\x60]))))|c(?:(?:[\s\"'\x60]|$)|[^el\s\"'\x60]|e(?:(?:[\s\"'\x60]|$)|[^n\s\"'\x60]|n(?:(?:[\s\"'\x60]|$)|[^t\s\"'\x60]|t(?:(?:[\s\"'\x60]|$)|[^e\s\"'\x60]|e(?:(?:[\s\"'\x60]|$)|[^r\s\"'\x60]|r(?:[^\s\"'\x60])))))|l(?:(?:[\s\"'\x60]|$)|[^i\s\"'\x60]|i(?:(?:[\s\"'\x60]|$)|[^p\s\"'\x60]|p(?:[^\s\"'\x60]))))|r(?:(?:[\s\"'\x60]|$)|[^i\s\"'\x60]|i(?:(?:[\s\"'\x60]|$)|[^g\s\"'\x60]|g(?:(?:[\s\"'\x60]|$)|[^h\s\"'\x60]|h(?:(?:[\s\"'\x60]|$)|[^t\s\"'\x60]|t(?:[^\s\"'\x60])))))|j(?:(?:[\s\"'\x60]|$)|[^u\s\"'\x60]|u(?:(?:[\s\"'\x60]|$)|[^s\s\"'\x60]|s(?:(?:[\s\"'\x60]|$)|[^t\s\"'\x60]|t(?:(?:[\s\"'\x60]|$)|[^i\s\"'\x60]|i(?:(?:[\s\"'\x60]|$)|[^f\s\"'\x60]|f(?:(?:[\s\"'\x60]|$)|[^y\s\"'\x60]|y(?:[^\s\"'\x60])))))))|s(?:(?:[\s\"'\x60]|$)|[^t\s\"'\x60]|t(?:(?:[\s\"'\x60]|$)|[^a\s\"'\x60]|a(?:(?:[\s\"'\x60]|$)|[^r\s\"'\x60]|r(?:(?:[\s\"'\x60]|$)|[^t\s\"'\x60]|t(?:[^\s\"'\x60])))))|e(?:(?:[\s\"'\x60]|$)|[^nl\s\"'\x60]|n(?:(?:[\s\"'\x60]|$)|[^d\s\"'\x60]|d(?:[^\s\"'\x60]))|l(?:(?:[\s\"'\x60]|$)|[^l\s\"'\x60]|l(?:(?:[\s\"'\x60]|$)|[^i\s\"'\x60]|i(?:(?:[\s\"'\x60]|$)|[^p\s\"'\x60]|p(?:(?:[\s\"'\x60]|$)|[^s\s\"'\x60]|s(?:(?:[\s\"'\x60]|$)|[^i\s\"'\x60]|i(?:(?:[\s\"'\x60]|$)|[^s\s\"'\x60]|s(?:[^\s\"'\x60]))))))))|w(?:(?:[\s\"'\x60]|$)|[^r\s\"'\x60]|r(?:(?:[\s\"'\x60]|$)|[^a\s\"'\x60]|a(?:(?:[\s\"'\x60]|$)|[^p\s\"'\x60]|p(?:[^\s\"'\x60]))))|n(?:(?:[\s\"'\x60]|$)|[^o\s\"'\x60]|o(?:(?:[\s\"'\x60]|$)|[^w\s\"'\x60]|w(?:(?:[\s\"'\x60]|$)|[^r\s\"'\x60]|r(?:(?:[\s\"'\x60]|$)|[^a\s\"'\x60]|a(?:(?:[\s\"'\x60]|$)|[^p\s\"'\x60]|p(?:[^\s\"'\x60]))))))|b(?:(?:[\s\"'\x60]|$)|[^a\s\"'\x60]|a(?:(?:[\s\"'\x60]|$)|[^l\s\"'\x60]|l(?:(?:[\s\"'\x60]|$)|[^a\s\"'\x60]|a(?:(?:[\s\"'\x60]|$)|[^n\s\"'\x60]|n(?:(?:[\s\"'\x60]|$)|[^c\s\"'\x60]|c(?:(?:[\s\"'\x60]|$)|[^e\s\"'\x60]|e(?:[^\s\"'\x60])))))))|p(?:(?:[\s\"'\x60]|$)|[^r\s\"'\x60]|r(?:(?:[\s\"'\x60]|$)|[^e\s\"'\x60]|e(?:(?:[\s\"'\x60]|$)|[^t\s\"'\x60]|t(?:(?:[\s\"'\x60]|$)|[^t\s\"'\x60]|t(?:(?:[\s\"'\x60]|$)|[^y\s\"'\x60]|y(?:[^\s\"'\x60])))))))|font-|leading-|tracking-|border|divide-|rounded|shadow|inset-shadow|drop-shadow|ring\b|ring-|inset-ring|outline|opacity-|backdrop-|fill-|stroke-|caret-|accent-|scheme-|mask-|decoration-|underline|no-underline|overline|line-through|italic|not-italic|uppercase|lowercase|capitalize|normal-case|antialiased|subpixel-antialiased|ordinal|slashed-zero|(?:normal|lining|oldstyle|proportional|tabular)-nums|(?:diagonal|stacked)-fractions|(?:hover|focus|focus-visible|focus-within|active|disabled|enabled|open|checked|indeterminate|visited|target|invalid|valid|user-invalid|user-valid|required|optional|read-only|autofill|placeholder-shown|in-range|out-of-range|inert|starting|dark|placeholder|selection|marker|file|first-letter|first-line|backdrop|details-content|aria-[^:\s]*|data-[^:\s]*|group-[^:\s]*|peer-[^:\s]*|has-[^:\s]*|\*|\[&[^\s]*?\]):)).*" },
+    contains JsReferenceIdentifier() as $reference where {
+      $reference <: r"(.+)"($referenced),
+      $module <: contains JsVariableDeclaration(declarators=$declarators) as $declaration where {
+        $declaration <: r"(?s)const\s.*",
+        $declarators <: some JsVariableDeclarator(id=$referenced, initializer=JsInitializerClause(expression=$value)),
+        $value <: or { or { JsStringLiteralExpression(), JsTemplateExpression(), JsObjectExpression() }, TsAsExpression(expression=or { JsStringLiteralExpression(), JsTemplateExpression(), JsObjectExpression() }), TsSatisfiesExpression(expression=or { JsStringLiteralExpression(), JsTemplateExpression(), JsObjectExpression() }) },
+        $value <: contains or { JsxString(), JsStringLiteralExpression(), JsTemplateChunkElement(), JsLiteralMemberName() as $memberName where { $memberName <: r"(?s)[\"'].*" } } as $constText where { $constText <: r"(?s).*(?:[^\s\"'\x60]!(?:[\s\"'\x60]|$)|(?:^|[\s\"'\x60])![\w\[-]|(?:^|[^\w-])(?:p[xytrblse]?-|bg-[\w\[]|text-(?:(?:[\s\"'\x60]|$)|[^lcrjsewnbp\s\"'\x60]|l(?:(?:[\s\"'\x60]|$)|[^e\s\"'\x60]|e(?:(?:[\s\"'\x60]|$)|[^f\s\"'\x60]|f(?:(?:[\s\"'\x60]|$)|[^t\s\"'\x60]|t(?:[^\s\"'\x60]))))|c(?:(?:[\s\"'\x60]|$)|[^el\s\"'\x60]|e(?:(?:[\s\"'\x60]|$)|[^n\s\"'\x60]|n(?:(?:[\s\"'\x60]|$)|[^t\s\"'\x60]|t(?:(?:[\s\"'\x60]|$)|[^e\s\"'\x60]|e(?:(?:[\s\"'\x60]|$)|[^r\s\"'\x60]|r(?:[^\s\"'\x60])))))|l(?:(?:[\s\"'\x60]|$)|[^i\s\"'\x60]|i(?:(?:[\s\"'\x60]|$)|[^p\s\"'\x60]|p(?:[^\s\"'\x60]))))|r(?:(?:[\s\"'\x60]|$)|[^i\s\"'\x60]|i(?:(?:[\s\"'\x60]|$)|[^g\s\"'\x60]|g(?:(?:[\s\"'\x60]|$)|[^h\s\"'\x60]|h(?:(?:[\s\"'\x60]|$)|[^t\s\"'\x60]|t(?:[^\s\"'\x60])))))|j(?:(?:[\s\"'\x60]|$)|[^u\s\"'\x60]|u(?:(?:[\s\"'\x60]|$)|[^s\s\"'\x60]|s(?:(?:[\s\"'\x60]|$)|[^t\s\"'\x60]|t(?:(?:[\s\"'\x60]|$)|[^i\s\"'\x60]|i(?:(?:[\s\"'\x60]|$)|[^f\s\"'\x60]|f(?:(?:[\s\"'\x60]|$)|[^y\s\"'\x60]|y(?:[^\s\"'\x60])))))))|s(?:(?:[\s\"'\x60]|$)|[^t\s\"'\x60]|t(?:(?:[\s\"'\x60]|$)|[^a\s\"'\x60]|a(?:(?:[\s\"'\x60]|$)|[^r\s\"'\x60]|r(?:(?:[\s\"'\x60]|$)|[^t\s\"'\x60]|t(?:[^\s\"'\x60])))))|e(?:(?:[\s\"'\x60]|$)|[^nl\s\"'\x60]|n(?:(?:[\s\"'\x60]|$)|[^d\s\"'\x60]|d(?:[^\s\"'\x60]))|l(?:(?:[\s\"'\x60]|$)|[^l\s\"'\x60]|l(?:(?:[\s\"'\x60]|$)|[^i\s\"'\x60]|i(?:(?:[\s\"'\x60]|$)|[^p\s\"'\x60]|p(?:(?:[\s\"'\x60]|$)|[^s\s\"'\x60]|s(?:(?:[\s\"'\x60]|$)|[^i\s\"'\x60]|i(?:(?:[\s\"'\x60]|$)|[^s\s\"'\x60]|s(?:[^\s\"'\x60]))))))))|w(?:(?:[\s\"'\x60]|$)|[^r\s\"'\x60]|r(?:(?:[\s\"'\x60]|$)|[^a\s\"'\x60]|a(?:(?:[\s\"'\x60]|$)|[^p\s\"'\x60]|p(?:[^\s\"'\x60]))))|n(?:(?:[\s\"'\x60]|$)|[^o\s\"'\x60]|o(?:(?:[\s\"'\x60]|$)|[^w\s\"'\x60]|w(?:(?:[\s\"'\x60]|$)|[^r\s\"'\x60]|r(?:(?:[\s\"'\x60]|$)|[^a\s\"'\x60]|a(?:(?:[\s\"'\x60]|$)|[^p\s\"'\x60]|p(?:[^\s\"'\x60]))))))|b(?:(?:[\s\"'\x60]|$)|[^a\s\"'\x60]|a(?:(?:[\s\"'\x60]|$)|[^l\s\"'\x60]|l(?:(?:[\s\"'\x60]|$)|[^a\s\"'\x60]|a(?:(?:[\s\"'\x60]|$)|[^n\s\"'\x60]|n(?:(?:[\s\"'\x60]|$)|[^c\s\"'\x60]|c(?:(?:[\s\"'\x60]|$)|[^e\s\"'\x60]|e(?:[^\s\"'\x60])))))))|p(?:(?:[\s\"'\x60]|$)|[^r\s\"'\x60]|r(?:(?:[\s\"'\x60]|$)|[^e\s\"'\x60]|e(?:(?:[\s\"'\x60]|$)|[^t\s\"'\x60]|t(?:(?:[\s\"'\x60]|$)|[^t\s\"'\x60]|t(?:(?:[\s\"'\x60]|$)|[^y\s\"'\x60]|y(?:[^\s\"'\x60])))))))|font-|leading-|tracking-|border|divide-|rounded|shadow|inset-shadow|drop-shadow|ring\b|ring-|inset-ring|outline|opacity-|backdrop-|fill-|stroke-|caret-|accent-|scheme-|mask-|decoration-|underline|no-underline|overline|line-through|italic|not-italic|uppercase|lowercase|capitalize|normal-case|antialiased|subpixel-antialiased|ordinal|slashed-zero|(?:normal|lining|oldstyle|proportional|tabular)-nums|(?:diagonal|stacked)-fractions|(?:hover|focus|focus-visible|focus-within|active|disabled|enabled|open|checked|indeterminate|visited|target|invalid|valid|user-invalid|user-valid|required|optional|read-only|autofill|placeholder-shown|in-range|out-of-range|inert|starting|dark|placeholder|selection|marker|file|first-letter|first-line|backdrop|details-content|aria-[^:\s]*|data-[^:\s]*|group-[^:\s]*|peer-[^:\s]*|has-[^:\s]*|\*|\[&[^\s]*?\]):)).*" }
+      }
+    }
+  },
   $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 }

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

@@ -1,6 +1,6 @@
 language js(typescript, jsx)
 
 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[^\]]*\]).*" },
+  $attr <: contains or { JsxString(), JsStringLiteralExpression(), JsTemplateChunkElement(), JsLiteralMemberName() as $memberName where { $memberName <: r"(?s)[\"'].*" } } 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ctrl-ui/react",
-  "version": "0.9.11",
+  "version": "0.9.13",
   "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",
@@ -61,6 +61,7 @@
   },
   "peerDependencies": {
     "@base-ui/react": "^1.9.0",
+    "@biomejs/biome": ">=2.4.11",
     "@tanstack/charts": "^1.1.0",
     "@tanstack/react-virtual": "^3.14.13",
     "@tiptap/core": "3.31.4",
@@ -98,6 +99,9 @@
     "zod": "^4.6.5"
   },
   "peerDependenciesMeta": {
+    "@biomejs/biome": {
+      "optional": true
+    },
     "@tanstack/charts": {
       "optional": true
     },