@ctrl-ui/react 0.9.6 → 0.9.9

package/dist/ui/sidebar-provider.js

@@ -9,7 +9,7 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/ui/sidebar-provider.tsx
 const SIDEBAR_COOKIE_MAX_AGE = 604800;
 const SIDEBAR_KEYBOARD_SHORTCUT = "b";
-const SIDEBAR_MOBILE_BREAKPOINT = "--breakpoint-lg";
+const SIDEBAR_MOBILE_BREAKPOINT = "--breakpoint-sidebar";
 const SidebarElementsContext = createContext(null);
 const SidebarSurfaceContext = createContext(null);
 function useSidebarElements() {
@@ -35,7 +35,7 @@ function useSidebar() {
 	if (!context) throw new Error("useSidebar must be used within a SidebarProvider.");
 	return context;
 }
-function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange, defaultWidth, minWidth = 224, maxWidth = 420, width: widthProp, onWidthChange, persistOpen = true, keyboardShortcut = SIDEBAR_KEYBOARD_SHORTCUT, layout = "viewport", skipLinkLabel = "Skip to content", contentId: contentIdProp, ref, className, style, children, ...props }) {
+function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange, defaultWidth, minWidth = 224, maxWidth = 420, width: widthProp, onWidthChange, persistOpen = true, keyboardShortcut = SIDEBAR_KEYBOARD_SHORTCUT, layout = "viewport", surface = "transparent", skipLinkLabel = "Skip to content", contentId: contentIdProp, ref, className, style, children, ...props }) {
 	const isMobile = useIsMobile(SIDEBAR_MOBILE_BREAKPOINT);
 	const [openMobile, setOpenMobile] = useState(false);
 	if (!isMobile && openMobile) setOpenMobile(false);
@@ -135,6 +135,7 @@ function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange, def
 			"data-control-family": "sidebar",
 			"data-slot": "wrapper",
 			"data-layout": layout,
+			"data-surface": surface,
 			style: wrapperStyle,
 			className: cn("group/sidebar-wrapper relative flex w-full", layout === "contained" ? "h-full min-h-0 overflow-hidden" : "min-h-svh", className),
 			children: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("a", {

package/dist/ui/sidebar-resize-rail.js

@@ -183,7 +183,7 @@ function SidebarResizeRail({ className, ref, onPointerDown, onClick, onKeyDown,
 			onPointerDown: handlePointerDown,
 			onClick: handleClick,
 			onKeyDown: handleKeyDown,
-			className: cn("absolute inset-y-0 z-20 hidden cursor-col-resize touch-pan-y group-data-[side=left]:-end-1 group-data-[side=right]:-start-1 group-data-[side=left]:group-data-[collapsible=offcanvas]:-end-2 group-data-[side=right]:group-data-[collapsible=offcanvas]:-start-2 lg:block", className),
+			className: cn("absolute inset-y-0 z-20 hidden cursor-col-resize touch-pan-y group-data-[side=left]:-end-1 group-data-[side=right]:-start-1 group-data-[side=left]:group-data-[collapsible=offcanvas]:-end-2 group-data-[side=right]:group-data-[collapsible=offcanvas]:-start-2 sidebar:block", className),
 			children: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
 				ref: widthMeasureRef,
 				"aria-hidden": true,

package/dist/ui/sidebar.d.ts

@@ -8,11 +8,11 @@ import { SidebarMobileNav, SidebarMobileNavItem, SidebarMobileNavProps, SidebarM
 import { SidebarLayoutMode, SidebarProvider, SidebarProviderProps, SidebarStyle, useSidebar } from "./sidebar-provider.js";
 import { CSSProperties, ComponentProps } from "react";
 //#region src/ui/sidebar.d.ts
-export type SidebarRailProps = (Omit<ComponentProps<"button">, "style"> & {
-  resizable?: false;
+export type SidebarRailProps = (SidebarResizeRailProps & {
+  resizable?: true;
+}) | (Omit<ComponentProps<"button">, "style"> & {
+  resizable: false;
   style?: CSSProperties & SidebarKnobStyle;
-}) | (SidebarResizeRailProps & {
-  resizable: true;
 });
 export type SidebarInsetProps = Omit<ComponentProps<"main">, "style" | "id"> & {
   render?: RenderProp<ComponentProps<"main">>;
@@ -33,7 +33,8 @@ export declare function SidebarTrigger({ className, onClick, size, label, ref, .
 }): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export declare function SidebarRail(props: SidebarRailProps): any;
 export declare function SidebarInset({ className, render, ref, ...props }: SidebarInsetProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
-export declare function SidebarHeader({ className, ...props }: ComponentProps<"div"> & {
+export declare function SidebarHeader({ className, divider, ...props }: ComponentProps<"div"> & {
+  divider?: boolean;
   style?: CSSProperties & SidebarKnobStyle;
 }): import("react").JSX.Element;
 export declare function SidebarFooter({ className, ...props }: ComponentProps<"div"> & {

package/dist/ui/sidebar.js

@@ -53,7 +53,7 @@ function SidebarSurface({ variant, mobileVariant = "sheet", label = "Navigation"
 			"data-control-family": "sidebar",
 			"data-slot": "container",
 			tabIndex: -1,
-			className: cn(layout === "contained" ? "absolute h-full" : "fixed h-svh", "inset-y-0 z-10 hidden w-(--sidebar-width) lg:flex", side === "left" ? "start-0" : "end-0", padded ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)", className),
+			className: cn(layout === "contained" ? "absolute h-full" : "fixed h-svh", "inset-y-0 z-10 hidden w-(--sidebar-width) sidebar:flex", side === "left" ? "start-0" : "end-0", padded ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)", className),
 			children: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
 				"data-control-ui": "sidebar",
 				"data-control-family": "sidebar",
@@ -94,7 +94,7 @@ function SidebarSurface({ variant, mobileVariant = "sheet", label = "Navigation"
 		})]
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn("group peer hidden lg:block", side === "right" && "order-last"),
+		className: cn("group peer hidden sidebar:block", side === "right" && "order-last"),
 		"data-control-ui": "sidebar",
 		"data-control-family": "sidebar",
 		"data-slot": "root",
@@ -232,12 +232,12 @@ function SidebarRail(props) {
 	const { isMobile } = useSidebar();
 	const { railContainer } = useSidebarSurface();
 	if (isMobile || !railContainer) return null;
-	if (props.resizable) {
-		const { resizable, ...resizeProps } = props;
-		return createPortal(/* @__PURE__ */ jsx(SidebarResizeRail, { ...resizeProps }), railContainer);
+	if (props.resizable === false) {
+		const { resizable, ...toggleProps } = props;
+		return createPortal(/* @__PURE__ */ jsx(SidebarToggleRail, { ...toggleProps }), railContainer);
 	}
-	const { resizable, ...toggleProps } = props;
-	return createPortal(/* @__PURE__ */ jsx(SidebarToggleRail, { ...toggleProps }), railContainer);
+	const { resizable, ...resizeProps } = props;
+	return createPortal(/* @__PURE__ */ jsx(SidebarResizeRail, { ...resizeProps }), railContainer);
 }
 function SidebarToggleRail({ className, ref, onClick, ...props }) {
 	const { toggleSidebar, open } = useSidebar();
@@ -259,7 +259,7 @@ function SidebarToggleRail({ className, ref, onClick, ...props }) {
 				if (!event.defaultPrevented) toggleSidebar();
 			},
 			title: props.title ?? "Toggle sidebar",
-			className: cn("absolute inset-y-0 z-20 hidden -translate-x-1/2 rtl:translate-x-1/2 group-data-[side=left]:-end-4 group-data-[side=right]:start-0 lg:flex", "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize", "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize", "group-data-[collapsible=offcanvas]:translate-x-0", className)
+			className: cn("absolute inset-y-0 z-20 hidden -translate-x-1/2 rtl:translate-x-1/2 group-data-[side=left]:-end-4 group-data-[side=right]:start-0 sidebar:flex", "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize", "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize", "group-data-[collapsible=offcanvas]:translate-x-0", className)
 		}
 	});
 }
@@ -281,11 +281,12 @@ function SidebarInset({ className, render, ref, ...props }) {
 		}
 	});
 }
-function SidebarHeader({ className, ...props }) {
+function SidebarHeader({ className, divider = false, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-control-ui": "sidebar",
 		"data-control-family": "sidebar",
 		"data-slot": "header",
+		"data-divider": divider ? "" : void 0,
 		className: cn("flex flex-col", className),
 		...props
 	});

package/dist/ui/skeleton.d.ts

@@ -3,9 +3,12 @@ import { CSSProperties, ComponentProps } from "react";
 //#region src/ui/skeleton.d.ts
 export declare const skeletonVariants: readonly ["shimmer", "pulse", "none"];
 export type SkeletonVariant = (typeof skeletonVariants)[number];
+export declare const skeletonShapes: readonly ["default", "circle", "panel"];
+export type SkeletonShape = (typeof skeletonShapes)[number];
 export type SkeletonProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & SkeletonKnobStyle;
   variant?: SkeletonVariant;
+  shape?: SkeletonShape;
 };
-export declare function Skeleton({ variant, className, ...props }: SkeletonProps): import("react").JSX.Element;
+export declare function Skeleton({ variant, shape, className, ...props }: SkeletonProps): import("react").JSX.Element;
 //#endregion

package/dist/ui/skeleton.js

@@ -5,16 +5,22 @@ const skeletonVariants = [
 	"pulse",
 	"none"
 ];
-function Skeleton({ variant = "shimmer", className, ...props }) {
+const skeletonShapes = [
+	"default",
+	"circle",
+	"panel"
+];
+function Skeleton({ variant = "shimmer", shape = "default", className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"aria-hidden": "true",
 		"data-control-ui": "skeleton",
 		"data-control-family": "skeleton",
 		"data-slot": "root",
 		"data-variant": variant,
+		"data-shape": shape,
 		className,
 		...props
 	});
 }
 //#endregion
-export { Skeleton, skeletonVariants };
+export { Skeleton, skeletonShapes, skeletonVariants };

package/dist/ui/tabs.d.ts

@@ -37,7 +37,7 @@ export type TabsSurfaceProps = Omit<ComponentProps<"div">, "style"> & {
 };
 export declare function TabsSurface({ className, ...props }: TabsSurfaceProps): import("react").JSX.Element;
 export declare function Tabs<TValue extends string = string>({ className, onValueChange, children, ...props }: TabsProps<TValue>): import("react").JSX.Element;
-export declare function TabsList({ size, variant, className, children, style, ...props }: TabsListProps): import("react").JSX.Element;
+export declare function TabsList({ size, variant, className, children, ...props }: TabsListProps): import("react").JSX.Element;
 export declare function TabsTab({ className, ...props }: TabsTabProps): import("react").JSX.Element;
 export declare function TabsPanel({ className, value, ref, ...props }: TabsPanelProps): import("react").JSX.Element;
 //#endregion

package/dist/ui/tabs.js

@@ -109,12 +109,6 @@ function Tabs({ className, onValueChange, children, ...props }) {
 		})
 	});
 }
-const controlHeights = {
-	xs: "var(--control-h-xs)",
-	sm: "var(--control-h-sm)",
-	md: "var(--control-h-md)",
-	lg: "var(--control-h-lg)"
-};
 function countTabs(children) {
 	return Children.toArray(children).reduce((count, child) => {
 		if (!isValidElement(child)) return count;
@@ -123,12 +117,8 @@ function countTabs(children) {
 		return count;
 	}, 0);
 }
-function TabsList({ size = "sm", variant = "default", className, children, style, ...props }) {
+function TabsList({ size = "sm", variant = "default", className, children, ...props }) {
 	const isSingle = countTabs(children) === 1;
-	const controlStyle = {
-		"--_tabs-trigger-h": controlHeights[size],
-		...style
-	};
 	return /* @__PURE__ */ jsxs(Tabs$1.List, {
 		"data-control-ui": "tabs",
 		"data-control-family": "tabs",
@@ -137,13 +127,12 @@ function TabsList({ size = "sm", variant = "default", className, children, style
 		"data-variant": variant,
 		"data-single": isSingle ? "true" : void 0,
 		className: cn(variant === "browser" && "gap-0 p-0 px-(--_tabs-browser-inset) pt-(--cui-tabs-list-padding)", className),
-		style: controlStyle,
 		...props,
 		children: [children, isSingle ? null : /* @__PURE__ */ jsx(Tabs$1.Indicator, {
 			"data-control-ui": "tabs",
 			"data-control-family": "tabs",
 			"data-slot": "indicator",
-			className: variant === "browser" ? "top-auto bottom-0 left-(--_tabs-browser-indicator-x) z-0 h-(--_tabs-trigger-h) w-(--_tabs-browser-indicator-width) transform-none" : void 0
+			className: variant === "browser" ? "top-auto bottom-0 left-(--_tabs-browser-indicator-x) z-0 h-(--cui-tabs-trigger-height) w-(--_tabs-browser-indicator-width) transform-none" : void 0
 		})]
 	});
 }

package/dist/ui/timeline.js

@@ -41,7 +41,7 @@ function TimelineSeparator({ className, ...props }) {
 		"data-control-family": "timeline",
 		"data-slot": "separator",
 		...props,
-		className: cn("absolute top-5 bottom-0 start-[calc(0.5rem-0.5px)] col-start-1 w-px group-last/timeline-item:hidden", className)
+		className: cn("absolute top-5 bottom-0 col-start-1 group-last/timeline-item:hidden", className)
 	});
 }
 function TimelineContent({ className, ...props }) {

package/dist/ui/typography.d.ts

@@ -30,21 +30,27 @@ export type TypeSize = keyof typeof sizeClassNames;
 export type TypeTone = keyof typeof toneClassNames;
 export type TextWeight = keyof typeof weightClassNames;
 export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
-export type HeadingProps = ComponentProps<"h1"> & {
+type TypeFace = {
+  /** Sets the text in the monospace face, for code, paths, and identifiers. */
+  mono?: boolean;
+  /** Uses tabular figures so changing numbers keep their width. */
+  numeric?: boolean;
+};
+export type HeadingProps = ComponentProps<"h1"> & TypeFace & {
   level: HeadingLevel;
   size?: TypeSize;
   weight?: TextWeight;
   tone?: TypeTone;
 };
-export declare function headingClassName({ level, size, weight, tone, className }: HeadingProps): string;
-export declare function Heading({ level, size, weight, tone, className, ...props }: HeadingProps): import("react").JSX.Element;
+export declare function headingClassName({ level, size, weight, tone, mono, numeric, className }: HeadingProps): string;
+export declare function Heading({ level, size, weight, tone, mono, numeric, className, ...props }: HeadingProps): import("react").JSX.Element;
 export type TextTag = "p" | "span" | "div" | "small" | "strong" | "em" | "code" | "li" | "dt" | "dd" | "figcaption" | "legend" | "blockquote";
-export type TextProps = HTMLAttributes<HTMLElement> & {
+export type TextProps = HTMLAttributes<HTMLElement> & TypeFace & {
   ref?: Ref<HTMLElement>;
   as?: TextTag;
   size?: TypeSize;
   weight?: TextWeight;
   tone?: TypeTone;
 };
-export declare function Text({ as: Tag, size, weight, tone, className, ref, ...props }: TextProps): import("react").JSX.Element;
+export declare function Text({ as: Tag, size, weight, tone, mono, numeric, className, ref, ...props }: TextProps): import("react").JSX.Element;
 //#endregion

package/dist/ui/typography.js

@@ -35,10 +35,17 @@ const headingSizeByLevel = {
 	5: "heading-4",
 	6: "heading-4"
 };
-function headingClassName({ level, size = headingSizeByLevel[level], weight, tone = "default", className }) {
-	return cn(sizeClassNames[size], weight ? weightClassNames[weight] : void 0, toneClassNames[tone], className);
+function faceClassNames({ mono, numeric }) {
+	return cn(mono && "font-mono", numeric && "tabular-nums");
 }
-function Heading({ level, size, weight, tone, className, ...props }) {
+function headingClassName({ level, size = headingSizeByLevel[level], weight, tone = "default", mono, numeric, className }) {
+	return cn(sizeClassNames[size], weight ? weightClassNames[weight] : void 0, toneClassNames[tone], faceClassNames({
+		mono,
+		numeric
+	}), className);
+}
+const programmaticFocusTarget = "[&[tabindex='-1']]:outline-none";
+function Heading({ level, size, weight, tone, mono, numeric, className, ...props }) {
 	const Tag = `h${level}`;
 	return /* @__PURE__ */ jsx(Tag, {
 		"data-control-ui": "typography",
@@ -49,7 +56,9 @@ function Heading({ level, size, weight, tone, className, ...props }) {
 			size,
 			weight,
 			tone,
-			className
+			mono,
+			numeric,
+			className: cn(programmaticFocusTarget, className)
 		}),
 		...props
 	});
@@ -58,13 +67,16 @@ function attachRef(ref, node) {
 	if (typeof ref === "function") return ref(node);
 	if (ref) ref.current = node;
 }
-function Text({ as: Tag = "span", size = "body", weight, tone = "default", className, ref, ...props }) {
+function Text({ as: Tag = "span", size = "body", weight, tone = "default", mono, numeric, className, ref, ...props }) {
 	return /* @__PURE__ */ jsx(Tag, {
 		ref: ref ? (node) => attachRef(ref, node) : void 0,
 		"data-control-ui": "typography",
 		"data-control-family": "typography",
 		"data-slot": "text",
-		className: cn(sizeClassNames[size], weight ? weightClassNames[weight] : void 0, toneClassNames[tone], className),
+		className: cn(sizeClassNames[size], weight ? weightClassNames[weight] : void 0, toneClassNames[tone], faceClassNames({
+			mono,
+			numeric
+		}), className),
 		...props
 	});
 }

package/lint/biome-preset.json

@@ -0,0 +1,3 @@
+{
+  "plugins": ["./node_modules/@ctrl-ui/react/lint/no-component-style-classes.grit"]
+}

package/lint/class-policy.mjs

@@ -0,0 +1,17 @@
+const controlUiImportPath = `(?:@ctrl-ui/react|[^'"]*components/control-ui)/`;
+
+const escapeRegExp = (text) => text.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+
+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]*?\]):)`;
+
+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[^\]]*\]`;
+
+export const componentStyleMessage =
+  "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).";
+
+export const rawTypeMessage =
+  "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.";

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".*(?:^|[^\w-])text-(?:micro|caption|label|body|body-lg|heading-[1-4]|display|xs|sm|base|lg|xl|[2-9]xl)\b.*|.*(?:^|[^\w-])text-\[\d[^\]]*\].*",
+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.6",
+  "version": "0.9.9",
   "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"
@@ -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 HTML React doesn't render as components (email HTML, injected markdown); MDX maps its tags to <Heading>/<Text>.
- * 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.
- */