@ctrl-ui/react 0.9.11 → 0.9.12

package/dist/styles/recipes/popup-lists.css

@@ -112,11 +112,13 @@
     color: var(--muted-foreground);
   }
 
-  :where([data-control-family="popup"][data-popup-kind="command"][data-slot="dialog-root"]) {
-    transition-property: grid-template-rows;
-    transition-duration: var(--duration-slow);
-    transition-timing-function: var(--ease-emphasized);
-    transition-delay: var(--duration-fast);
+  :where([data-control-family="popup"][data-popup-part="surface"]:has(> [data-popup-kind="command"][data-slot="dialog-root"])),
+  :where(
+    [data-control-family="popup"][data-popup-part="backdrop"]:has(
+      ~ [data-popup-part="surface"] > [data-popup-kind="command"][data-slot="dialog-root"]
+    )
+  ) {
+    transition: none;
   }
 
   :where([data-control-family="popup"][data-popup-kind="autocomplete"][data-slot="group-label"]) {
@@ -366,3 +368,9 @@
   inherits: true;
   initial-value: 0px;
 }
+
+@property --cui-popup-shortcut-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}

package/dist/styles/recipes/popup.css

@@ -15,6 +15,7 @@
     --cui-popup-title-line-height: var(--text-heading-3--line-height);
     --cui-popup-title-letter-spacing: -0.025em;
     --cui-popup-description-foreground: var(--muted-foreground);
+    --cui-popup-description-font-size: var(--text-body);
     --cui-popup-close-inset: calc(var(--spacing) * 3);
     --cui-popup-item-radius: var(--radius-popup-item-fit);
     --cui-popup-item-foreground: var(--foreground);
@@ -146,6 +147,7 @@
     --cui-popup-title-font-size: var(--text-body);
     --cui-popup-title-line-height: 1.35;
     --cui-popup-title-letter-spacing: -0.01em;
+    --cui-popup-description-font-size: var(--text-label);
     max-block-size: var(--available-height);
     max-inline-size: var(--available-width);
     overflow: auto;
@@ -392,9 +394,3 @@
   inherits: true;
   initial-value: transparent;
 }
-
-@property --cui-popup-shortcut-foreground {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: transparent;
-}

package/dist/styles/recipes/sidebar-parts.css

@@ -235,3 +235,9 @@
   inherits: true;
   initial-value: transparent;
 }
+
+@property --cui-sidebar-rail-divider-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}

package/dist/styles/recipes/sidebar.css

@@ -38,6 +38,7 @@
     --cui-sidebar-inner-border-width: 0px;
     --cui-sidebar-inner-radius: 0px;
     --cui-sidebar-inner-shadow: none;
+    --cui-sidebar-container-border-width: 1px;
     --cui-sidebar-header-background: transparent;
     --cui-sidebar-header-shadow: 0 0 transparent;
     --cui-sidebar-header-border-width: 1px;
@@ -88,11 +89,11 @@
   }
 
   :where([data-control-family="sidebar"][data-slot="root"][data-variant="sidebar"][data-side="left"] [data-slot="container"]) {
-    border-inline-end: 1px solid var(--sidebar-border);
+    border-inline-end: var(--cui-sidebar-container-border-width) solid var(--sidebar-border);
   }
 
   :where([data-control-family="sidebar"][data-slot="root"][data-variant="sidebar"][data-side="right"] [data-slot="container"]) {
-    border-inline-start: 1px solid var(--sidebar-border);
+    border-inline-start: var(--cui-sidebar-container-border-width) solid var(--sidebar-border);
   }
 
   :where([data-control-family="sidebar"][data-slot="inner"]) {
@@ -132,12 +133,6 @@
   }
 }
 
-@property --cui-sidebar-rail-divider-background {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: transparent;
-}
-
 @property --cui-sidebar-wrapper-background {
   syntax: "<color>";
   inherits: true;
@@ -171,6 +166,12 @@
   inherits: true;
 }
 
+@property --cui-sidebar-container-border-width {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
 @property --cui-sidebar-inner-border-width {
   syntax: "<length>";
   inherits: true;

package/dist/styles/recipes/table.css

@@ -44,6 +44,35 @@
     }
   }
 
+  :where([data-control-family="table"][data-slot="row"]:has([data-control-family="table"][data-slot="row-link"])) {
+    position: relative;
+  }
+
+  :where([data-control-family="table"][data-slot="row-link"]) {
+    text-align: start;
+    cursor: pointer;
+    outline: none;
+  }
+
+  :where([data-control-family="table"][data-slot="row-link"])::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+  }
+
+  :where([data-control-family="table"][data-slot="row-link"]:focus-visible)::after {
+    outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring);
+    outline-offset: calc(var(--focus-ring-width) * -1);
+  }
+
+  :where(
+    [data-control-family="table"][data-slot="row"]:has([data-control-family="table"][data-slot="row-link"])
+      :is(a[href], button, input, select, textarea, [role="checkbox"]):not([data-slot="row-link"])
+  ) {
+    position: relative;
+    z-index: 1;
+  }
+
   :where([data-control-family="table"][data-slot="row"][data-state="selected"]) {
     background: var(--cui-table-row-selected-background);
   }

package/dist/ui/command.js

@@ -46,7 +46,7 @@ function CommandDialog({ title = "Command palette", description = "Search for a
 					"data-popup-kind": "command",
 					"data-control-family": "popup",
 					"data-slot": "dialog-root",
-					className: cn("grid grid-rows-[auto_1fr] in-data-[starting-style]:grid-rows-[auto_0fr]", commandProps?.className),
+					className: cn("grid grid-rows-[auto_1fr]", commandProps?.className),
 					children
 				})
 			]

package/dist/ui/dropzone.d.ts

@@ -5,6 +5,7 @@ import { DropzoneKnobStyle } from "../knob-contracts/dropzone-knobs.js";
 import { CSSProperties, ComponentProps, ReactNode } from "react";
 //#region src/ui/dropzone.d.ts
 export type DropzoneOverlayScope = "local" | "global";
+export type DropzoneSize = "default" | "sm";
 export type DropzoneProps = Omit<ComponentProps<"div">, "defaultValue" | "onChange" | "onDrop" | "onError"> & {
   value?: readonly File[];
   defaultValue?: readonly File[];
@@ -16,6 +17,7 @@ export type DropzoneProps = Omit<ComponentProps<"div">, "defaultValue" | "onChan
   getFilesFromEvent?: DropzoneGetFilesFromEvent;
   onDrop?: (details: DropzoneDropDetails) => void;
   onError?: (error: Error) => void;
+  size?: DropzoneSize;
 } & {
   style?: CSSProperties & DropzoneKnobStyle;
 };
@@ -44,6 +46,7 @@ export type DropzoneRejectionListProps = Omit<ComponentProps<"ul">, "children">
 };
 export type DropzoneContextValue = UseDropzoneReturn & {
   registerGlobalOverlay: () => () => void;
+  size: DropzoneSize;
 };
 export type DropzoneStatusProps = Omit<ComponentProps<"div">, "children" | "style"> & {
   children?: (state: DropzoneContextValue) => ReactNode;
@@ -54,7 +57,7 @@ export type DropzoneRemoveProps = ComponentProps<typeof Button> & {
 };
 export type DropzoneClearProps = ComponentProps<typeof Button>;
 export declare function useDropzoneContext(): DropzoneContextValue;
-export declare function Dropzone({ value, defaultValue, onValueChange, policy, disabled, drag, paste, getFilesFromEvent, onDrop, onError, className, children, ...props }: DropzoneProps): import("react").JSX.Element;
+export declare function Dropzone({ value, defaultValue, onValueChange, policy, disabled, drag, paste, getFilesFromEvent, onDrop, onError, size, className, children, ...props }: DropzoneProps): import("react").JSX.Element;
 export declare function DropzoneArea({ className, ...props }: DropzoneAreaProps): import("react").JSX.Element;
 export declare function DropzoneInput({ className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }: DropzoneInputProps): import("react").JSX.Element;
 export declare function DropzoneTrigger({ className, children, onClick, disabled, ref, ...props }: DropzoneTriggerProps): import("react").JSX.Element;

package/dist/ui/dropzone.js

@@ -64,7 +64,7 @@ function useFocusTargetRef(kind, ref) {
 		};
 	};
 }
-function Dropzone({ value, defaultValue, onValueChange, policy, disabled, drag, paste, getFilesFromEvent, onDrop, onError, className, children, ...props }) {
+function Dropzone({ value, defaultValue, onValueChange, policy, disabled, drag, paste, getFilesFromEvent, onDrop, onError, size = "default", className, children, ...props }) {
 	const [globalOverlayCount, setGlobalOverlayCount] = useState(0);
 	const [focusTargets] = useState(createFocusTargets);
 	const [registerGlobalOverlay] = useState(() => () => {
@@ -91,7 +91,8 @@ function Dropzone({ value, defaultValue, onValueChange, policy, disabled, drag,
 	});
 	const context = {
 		...dropzone,
-		registerGlobalOverlay
+		registerGlobalOverlay,
+		size
 	};
 	const empty = dropzone.value.length === 0 && dropzone.fileRejections.length === 0;
 	return /* @__PURE__ */ jsx(DropzoneContext.Provider, {
@@ -103,6 +104,7 @@ function Dropzone({ value, defaultValue, onValueChange, policy, disabled, drag,
 				"data-control-ui": "dropzone",
 				"data-control-family": "dropzone",
 				"data-slot": "root",
+				"data-size": size,
 				"data-disabled": dropzone.disabled ? "true" : void 0,
 				"data-empty": empty ? "true" : void 0,
 				className: cn("min-w-0", className),
@@ -156,13 +158,16 @@ function DropzoneTrigger({ className, children, onClick, disabled, ref, ...props
 		"data-slot": "trigger",
 		"data-state": context.visualState,
 		"data-disabled": triggerDisabled || busy ? "true" : void 0,
-		className: cn("flex w-full cursor-pointer flex-col items-center justify-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed", className),
+		className: cn("flex w-full cursor-pointer items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed", context.size === "sm" ? "flex-row justify-start [&>svg]:size-4 [&>svg]:shrink-0" : "flex-col justify-center", className),
 		onClick: (event) => {
 			if (busy) return;
 			onClick?.(event);
 			if (!event.defaultPrevented) context.open();
 		},
-		children: children ?? /* @__PURE__ */ jsx(DropzoneFeedback, { state: context.visualState })
+		children: children ?? /* @__PURE__ */ jsx(DropzoneFeedback, {
+			state: context.visualState,
+			size: context.size
+		})
 	});
 }
 function DropzoneOverlay({ scope = "local", className, children, ...props }) {
@@ -182,7 +187,10 @@ function DropzoneOverlay({ scope = "local", className, children, ...props }) {
 		"data-active": active ? "true" : void 0,
 		"data-scope": scope,
 		className: cn("pointer-events-none absolute inset-0 z-10 hidden items-center justify-center data-[active=true]:flex", className),
-		children: children ?? /* @__PURE__ */ jsx(DropzoneFeedback, { state: context.visualState })
+		children: children ?? /* @__PURE__ */ jsx(DropzoneFeedback, {
+			state: context.visualState,
+			size: context.size
+		})
 	});
 }
 function DropzoneFileList({ className, children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }) {
@@ -284,7 +292,7 @@ function DropzoneClear({ children, onClick, disabled, ...props }) {
 		children: children ?? "Clear all"
 	});
 }
-function DropzoneFeedback({ state }) {
+function DropzoneFeedback({ state, size }) {
 	let icon = /* @__PURE__ */ jsx(CloudUpload, { "aria-hidden": "true" });
 	let message = "Drop files here or choose files.";
 	if (state === "processing") {
@@ -310,12 +318,12 @@ function DropzoneFeedback({ state }) {
 		"data-control-ui": "dropzone",
 		"data-control-family": "dropzone",
 		"data-slot": "feedback",
-		className: "flex flex-col items-center",
+		className: cn("flex items-center", size === "sm" ? "flex-row" : "flex-col"),
 		children: [/* @__PURE__ */ jsx("span", {
 			"data-control-ui": "dropzone",
 			"data-control-family": "dropzone",
 			"data-slot": "feedback-icon",
-			className: "[&>svg]:size-6",
+			className: size === "sm" ? "flex [&>svg]:size-4" : "[&>svg]:size-6",
 			children: icon
 		}), /* @__PURE__ */ jsx("span", {
 			"data-control-ui": "dropzone",

package/dist/ui/field.d.ts

@@ -11,7 +11,9 @@ export type FieldProps = ComponentProps<"div"> & {
 } & {
   style?: CSSProperties & FieldKnobStyle;
 };
+export type FieldLabelVariant = "default" | "card";
 export type FieldLabelProps = Omit<ComponentProps<"label">, "style"> & {
+  variant?: FieldLabelVariant;
   style?: CSSProperties & FieldKnobStyle;
 };
 export type FieldContentProps = ComponentProps<"div"> & {
@@ -41,6 +43,7 @@ export type FieldSeparatorProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & FieldKnobStyle;
 };
 export type FieldItemProps = ComponentProps<"div"> & {
+  disabled?: boolean;
   style?: CSSProperties & FieldKnobStyle;
 };
 export type FieldSetProps = Omit<ComponentProps<"fieldset">, "style"> & {
@@ -54,7 +57,7 @@ export type FieldLegendProps = Omit<ComponentProps<"div">, "style"> & {
 export declare function Field({ className, orientation, ...props }: FieldProps): import("react").JSX.Element;
 export declare function FieldContent({ className, ...props }: FieldContentProps): import("react").JSX.Element;
 export declare function FieldTitle({ className, ...props }: FieldTitleProps): import("react").JSX.Element;
-export declare function FieldLabel({ className, ...props }: FieldLabelProps): import("react").JSX.Element;
+export declare function FieldLabel({ className, variant, ...props }: FieldLabelProps): import("react").JSX.Element;
 type RefinedFieldControlProps = FieldControlProps & Pick<ComponentProps<typeof Field$1.Control>, "render">;
 export declare function FieldControl({ className, render, ...props }: RefinedFieldControlProps): import("react").JSX.Element;
 export declare function FieldDescription({ className, ...props }: FieldDescriptionProps): import("react").JSX.Element;

package/dist/ui/field.js

@@ -45,13 +45,15 @@ function FieldTitle({ className, ...props }) {
 		...props
 	});
 }
-function FieldLabel({ className, ...props }) {
+function FieldLabel({ className, variant = "default", ...props }) {
 	return /* @__PURE__ */ jsx(Field$1.Label, {
 		"data-control-ui": "field",
 		"data-control-family": "field",
 		"data-field-kind": "field",
 		"data-slot": "label",
-		className,
+		"data-variant": variant,
+		"data-focus-ring": variant === "card" ? "within" : void 0,
+		className: cn(variant === "card" && "flex w-full cursor-pointer items-start gap-3 has-[[data-disabled]]:cursor-not-allowed [&>[data-control-family=choice]]:mt-[calc((1lh_-_var(--spacing)*4)/2)]", className),
 		...props
 	});
 }

package/dist/ui/phone-input.js

@@ -3,12 +3,12 @@ import { cn } from "../lib/cn.js";
 import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
 import { InputGroup, InputGroupAddon } from "./input-group.js";
 import { Input } from "./input.js";
-import { normalizePhoneInputText, normalizePhoneInputValue } from "../lib/phone-input-format.js";
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "./command.js";
+import { normalizePhoneInputText, normalizePhoneInputValue } from "../lib/phone-input-format.js";
 import { useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import PhoneNumberInput, { getCountryCallingCode, parsePhoneNumber } from "react-phone-number-input/max";
 import flags from "react-phone-number-input/flags";
+import PhoneNumberInput, { getCountryCallingCode, parsePhoneNumber } from "react-phone-number-input/max";
 //#region src/ui/phone-input.tsx
 const FLAG_COMPONENTS = flags;
 const PhoneNumberInputWithRef = PhoneNumberInput;

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")
 }
 `,