@ctrl-ui/react 0.9.4 → 0.9.5

package/README.md

@@ -26,6 +26,33 @@ import { Button } from "@ctrl-ui/react/ui/button";
 
 Import paths mirror the registry tree. To ship less CSS, import `styles/theme.css` and only the recipes and effects your components use.
 
+## Text and class names
+
+Render text with `Text` and `Heading`. Size, tone, and weight are props; `className` carries layout only:
+
+```tsx
+import { Text } from "@ctrl-ui/react/ui/typography";
+
+<Text size="caption" tone="muted">Saved</Text>
+```
+
+Merge class names with the package's `cn`. A bare `twMerge` reads `text-micro` as a text color and silently drops it next to `text-muted-foreground`. Add your own type rungs on top of `withControlUiMerge` instead of starting a second merger:
+
+```ts
+import { withControlUiMerge } from "@ctrl-ui/react/lib/cn";
+import { extendTailwindMerge } from "tailwind-merge";
+
+const twMerge = extendTailwindMerge({ extend: { classGroups: { "font-size": [{ text: ["hero"] }] } } }, withControlUiMerge);
+```
+
+Controls size their own text: pick the control's `size`, or set its `--cui-*-font-size` knob in your theme, rather than wrapping the label in a `text-*` span.
+
+With Biome, the shipped GritQL plugin warns on type rungs in `className`:
+
+```json
+{ "plugins": ["./node_modules/@ctrl-ui/react/lint/no-raw-type-classes.grit"] }
+```
+
 ## Customize
 
 Your application owns its theme. Override the library's neutral defaults in your CSS:

package/dist/blocks/coding-agent.js

@@ -182,10 +182,7 @@ function CodingAgentSidebar({ appName, brand, sidebarTop, navigation, projects,
 					}, project.id))
 				})]
 			})] }),
-			sidebarFooter ? /* @__PURE__ */ jsx(SidebarFooter, {
-				className: "border-t border-sidebar-border",
-				children: sidebarFooter
-			}) : null,
+			sidebarFooter ? /* @__PURE__ */ jsx(SidebarFooter, { children: sidebarFooter }) : null,
 			/* @__PURE__ */ jsx(SidebarRail, {})
 		]
 	});

package/dist/blocks/file-explorer.js

@@ -147,7 +147,7 @@ function FileExplorerSidebar({ locations, activeLocationId, sidebarTop, sidebarF
 		collapsible: "offcanvas",
 		children: [
 			sidebarTop ? /* @__PURE__ */ jsx(SidebarHeader, {
-				className: "min-h-11 justify-center border-b border-sidebar-border px-3",
+				className: "min-h-11 justify-center px-3",
 				children: sidebarTop
 			}) : null,
 			/* @__PURE__ */ jsx(SidebarContent, { children: groups.map((group) => /* @__PURE__ */ jsxs(SidebarGroup, { children: [group.label ? /* @__PURE__ */ jsx(SidebarGroupLabel, { children: group.label }) : null, /* @__PURE__ */ jsx(SidebarMenu, { children: group.items.map((location) => /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(SidebarMenuButton, {
@@ -159,24 +159,22 @@ function FileExplorerSidebar({ locations, activeLocationId, sidebarTop, sidebarF
 				},
 				children: [location.icon ?? /* @__PURE__ */ jsx(FolderIcon, {}), /* @__PURE__ */ jsx("span", { children: location.label })]
 			}) }, location.id)) })] }, group.label || "locations")) }),
-			sidebarFooter ? /* @__PURE__ */ jsx(SidebarFooter, {
-				className: "border-t border-sidebar-border",
-				children: sidebarFooter
-			}) : null,
+			sidebarFooter ? /* @__PURE__ */ jsx(SidebarFooter, { children: sidebarFooter }) : null,
 			/* @__PURE__ */ jsx(SidebarRail, {})
 		]
 	});
 }
 function FileExplorerHeader({ location, headingLevel, breadcrumbs, query, searchPlaceholder, searchLabel, clearSearchLabel, backLabel, moreActionsLabel, canGoBack, headerActions, headerMenuItems, onBack, onBreadcrumbSelect, onQueryChange }) {
 	return /* @__PURE__ */ jsxs("header", {
-		className: "shrink-0 border-b border-border/70 bg-card/35",
+		className: "shrink-0 border-b border-border/70",
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex h-12 items-center gap-2 px-3",
 			children: [
-				/* @__PURE__ */ jsx(SidebarTrigger, { size: "xs" }),
+				/* @__PURE__ */ jsx(SidebarTrigger, { size: "sm" }),
 				/* @__PURE__ */ jsx(Button, {
 					variant: "ghost",
-					size: "xs",
+					size: "sm",
+					iconOnly: true,
 					className: "hidden @xl/explorer:inline-flex",
 					disabled: !canGoBack,
 					"aria-label": backLabel,
@@ -200,7 +198,7 @@ function FileExplorerHeader({ location, headingLevel, breadcrumbs, query, search
 				}) : null,
 				headerMenuItems ? /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
 					variant: "ghost",
-					size: "xs",
+					size: "sm",
 					iconOnly: true,
 					"aria-label": moreActionsLabel,
 					className: headerActions ? "@2xl/explorer:hidden" : void 0,
@@ -214,7 +212,7 @@ function FileExplorerHeader({ location, headingLevel, breadcrumbs, query, search
 				})] }) : null,
 				searchPlaceholder ? /* @__PURE__ */ jsxs(InputGroup, {
 					size: "sm",
-					className: "flex-[0_1_9rem] bg-background/60 @xl/explorer:flex-[0_0_12rem]",
+					className: "flex-[0_1_9rem] @xl/explorer:flex-[0_0_12rem]",
 					children: [
 						/* @__PURE__ */ jsx(InputGroupAddon, {
 							className: "ps-2",
@@ -408,7 +406,7 @@ function FileExplorerColumns({ columns, selectedEntry, selectedPath, headingLeve
 					})
 				}) }) : null })] })]
 			}), /* @__PURE__ */ jsx("div", {
-				className: "min-h-0 flex-1 bg-card",
+				className: "min-h-0 flex-1",
 				children: activeColumn ? renderColumn(activeColumn, activeIndex, "narrow") : null
 			})] }) : null
 		}), /* @__PURE__ */ jsx("div", {
@@ -416,7 +414,7 @@ function FileExplorerColumns({ columns, selectedEntry, selectedPath, headingLeve
 			className: "hidden h-full min-h-0 @xl/explorer:block",
 			children: wideDisplayed ? /* @__PURE__ */ jsxs(ResizablePanelGroup, {
 				orientation: "horizontal",
-				className: "rounded-none border-0 bg-card shadow-none",
+				variant: "nested",
 				children: [columns.map((column, columnIndex) => /* @__PURE__ */ jsx(FileExplorerPanel, {
 					defaultSize: columnSize,
 					minSize: "16%",
@@ -531,7 +529,7 @@ function FileExplorerColumnView({ column, optionRef, onSelect, onOpen, onOptionK
 }
 function FileExplorerPreview({ entry, headingLevel }) {
 	if (!entry) return /* @__PURE__ */ jsx(Empty, {
-		className: "h-full rounded-none bg-background/45",
+		className: "h-full rounded-none",
 		children: /* @__PURE__ */ jsxs(EmptyHeader, { children: [
 			/* @__PURE__ */ jsx(EmptyMedia, { children: /* @__PURE__ */ jsx(FileIcon, {}) }),
 			/* @__PURE__ */ jsx(EmptyTitle, { children: "Select an item" }),
@@ -539,7 +537,7 @@ function FileExplorerPreview({ entry, headingLevel }) {
 		] })
 	});
 	return /* @__PURE__ */ jsx(ScrollArea, {
-		className: "h-full bg-background/45",
+		className: "h-full",
 		lockAxis: "x",
 		children: /* @__PURE__ */ jsx(FileExplorerPreviewContent, {
 			entry,
@@ -681,7 +679,7 @@ function FileExplorerStatusBar({ breadcrumbs, selectedEntry }) {
 	const itemCount = selectedEntry?.children?.length ?? 0;
 	const itemLabel = itemCount === 1 ? "1 item" : `${itemCount} items`;
 	return /* @__PURE__ */ jsxs("footer", {
-		className: "flex h-8 shrink-0 items-center gap-3 border-t border-border/70 bg-card/45 px-3 text-micro text-muted-foreground",
+		className: "flex h-8 shrink-0 items-center gap-3 border-t border-border/70 px-3 text-micro text-muted-foreground",
 		children: [/* @__PURE__ */ jsx("span", {
 			className: "min-w-0 flex-1 truncate",
 			title: path,
@@ -695,7 +693,7 @@ function FileExplorerStatusBar({ breadcrumbs, selectedEntry }) {
 function FileExplorerAddressBar({ breadcrumbs, onSelect }) {
 	return /* @__PURE__ */ jsx(Breadcrumb, {
 		"aria-label": "Current folder",
-		className: "min-w-0 overflow-hidden rounded-[var(--radius-control)] border bg-background/55 px-2 py-1 shadow-inner",
+		className: "min-w-0 overflow-hidden px-1",
 		children: /* @__PURE__ */ jsx(BreadcrumbList, {
 			className: "min-w-0 flex-nowrap overflow-hidden",
 			children: breadcrumbs.map((breadcrumb, index) => {

package/dist/lib/cn.d.ts

@@ -1,4 +1,6 @@
 import { ClassValue } from "clsx";
+import { Config } from "tailwind-merge";
 //#region src/lib/cn.d.ts
+export declare function withControlUiMerge(config: Config<string, string>): Config<string, string>;
 export declare function cn(...inputs: ClassValue[]): string;
 //#endregion

package/dist/lib/cn.js

@@ -1,30 +1,35 @@
 import { clsx } from "clsx";
-import { extendTailwindMerge } from "tailwind-merge";
+import { extendTailwindMerge, mergeConfigs } from "tailwind-merge";
 //#region src/lib/cn.ts
-const twMerge = extendTailwindMerge({
-	extend: { classGroups: {
-		"font-size": [{ text: [
-			"micro",
-			"caption",
-			"label",
-			"body",
-			"body-lg",
-			"heading-1",
-			"heading-2",
-			"heading-3",
-			"heading-4",
-			"display"
-		] }],
-		shadow: [{ shadow: [
-			"pop",
-			"soft",
-			"modal"
-		] }]
-	} },
-	override: { conflictingClassGroups: { "font-size": [] } }
-});
+const textScale = [
+	"micro",
+	"caption",
+	"label",
+	"body",
+	"body-lg",
+	"heading-1",
+	"heading-2",
+	"heading-3",
+	"heading-4",
+	"display"
+];
+const shadowScale = [
+	"pop",
+	"soft",
+	"modal"
+];
+function withControlUiMerge(config) {
+	return mergeConfigs(config, {
+		extend: { classGroups: {
+			"font-size": [{ text: textScale }],
+			shadow: [{ shadow: shadowScale }]
+		} },
+		override: { conflictingClassGroups: { "font-size": [] } }
+	});
+}
+const twMerge = extendTailwindMerge(withControlUiMerge);
 function cn(...inputs) {
 	return twMerge(clsx(inputs));
 }
 //#endregion
-export { cn };
+export { cn, withControlUiMerge };

package/dist/styles/recipes/button-states.css

@@ -63,4 +63,16 @@
     cursor: not-allowed;
     opacity: var(--disabled-opacity);
   }
+
+  @media (forced-colors: active) {
+    :where([data-control-family="button"][data-control="true"]:not(:focus-visible, :has(:focus-visible))) {
+      outline: 1px solid currentColor;
+      outline-offset: -1px;
+    }
+
+    :where([data-control-family="button"][data-control="true"][data-active="true"]:not(:focus-visible, :has(:focus-visible))) {
+      outline: var(--focus-ring-width) solid Highlight;
+      outline-offset: calc(var(--focus-ring-width) * -1);
+    }
+  }
 }

package/dist/styles/recipes/button.css

@@ -164,7 +164,7 @@
     --cui-button-shadow: inset 0 0 0 var(--control-rim-width) var(--control-rim), var(--shadow-sm);
     --cui-button-active-background: oklch(from var(--primary) l c h / 0.08);
     --cui-button-active-foreground: var(--primary-text);
-    --cui-button-active-shadow: inset 0 0 0 1px oklch(from var(--primary) l c h / 0.6), var(--shadow-sm);
+    --cui-button-active-shadow: inset 0 0 0 var(--control-rim-width) oklch(from var(--primary) l c h / 0.6), var(--shadow-sm);
     --cui-button-active-hover-background: oklch(from var(--primary) l c h / 0.1);
   }
 

package/dist/styles/recipes/chat-composer-attachment.css

@@ -25,6 +25,13 @@
     transition-timing-function: var(--ease-standard);
   }
 
+  @media (forced-colors: active) {
+    :where([data-control-family="chat-composer-attachment"][data-slot="root"][data-variant]:not(:focus-visible, :has(:focus-visible))) {
+      outline: 1px solid CanvasText;
+      outline-offset: -1px;
+    }
+  }
+
   :where([data-control-family="chat-composer-attachment"][data-slot="list"]) {
     gap: calc(var(--spacing) * 2);
     padding: var(--cui-chat-composer-attachment-list-padding);

package/dist/styles/recipes/color-picker-details.css

@@ -5,6 +5,13 @@
     box-shadow: var(--cui-color-picker-trigger-shadow);
   }
 
+  @media (forced-colors: active) {
+    :where([data-control-family="color-picker"][data-slot="trigger-color"]) {
+      outline: 1px solid CanvasText;
+      outline-offset: -1px;
+    }
+  }
+
   :where([data-control-family="color-picker"][data-slot="trigger"]) {
     border-radius: var(--cui-color-picker-trigger-radius);
     transition-property: transform, translate, scale, rotate;

package/dist/styles/recipes/field.css

@@ -25,6 +25,13 @@
     backdrop-filter: var(--cui-field-backdrop-filter);
   }
 
+  @media (forced-colors: active) {
+    :where([data-control-family="field"][data-control="true"]:not(:focus-visible, :has(:focus-visible))) {
+      outline: 1px solid CanvasText;
+      outline-offset: -1px;
+    }
+  }
+
   :where(
     [data-control-family="field"][data-control="true"]:not([data-control-family="field"][data-field-kind="autocomplete"]):not(
       [data-control-family="field"][data-field-kind="combobox"]

package/dist/styles/recipes/inline-attachment.css

@@ -52,6 +52,13 @@
     }
   }
 
+  @media (forced-colors: active) {
+    :where([data-control-family="inline-attachment"][data-slot="root"]:not(:focus-visible)) {
+      outline: 1px solid CanvasText;
+      outline-offset: -1px;
+    }
+  }
+
   :where([data-control-family="inline-attachment"][data-slot="image"]) {
     border-radius: inherit;
   }

package/dist/styles/recipes/kbd.css

@@ -28,6 +28,13 @@
     --cui-kbd-shadow: 0 0 transparent;
   }
 
+  @media (forced-colors: active) {
+    :where([data-control-family="kbd"][data-slot="root"]:not([data-variant="ghost"])) {
+      outline: 1px solid CanvasText;
+      outline-offset: -1px;
+    }
+  }
+
   :where([data-control-family="kbd"][data-slot="group"]) {
     gap: calc(var(--spacing) * 1);
   }

package/dist/styles/recipes/pagination.css

@@ -17,7 +17,7 @@
     border-radius: var(--cui-pagination-link-radius);
     background: var(--cui-pagination-link-background);
     box-shadow:
-      inset 0 0 0 1px var(--_pagination-link-border-color),
+      inset 0 0 0 var(--control-rim-width) var(--_pagination-link-border-color),
       var(--cui-pagination-link-shadow);
     color: var(--cui-pagination-link-foreground);
     font-variant-numeric: tabular-nums;
@@ -39,6 +39,13 @@
     opacity: var(--disabled-opacity);
   }
 
+  @media (forced-colors: active) {
+    :where([data-control-family="pagination"][data-slot="link"][data-active="true"]:not(:focus-visible)) {
+      outline: var(--focus-ring-width) solid Highlight;
+      outline-offset: calc(var(--focus-ring-width) * -1);
+    }
+  }
+
   :where([data-control-family="pagination"][data-slot="link"]:has(> svg:first-child)) {
     padding-inline-start: calc(var(--spacing) * 2);
   }

package/dist/styles/recipes/scroll-area.css

@@ -39,14 +39,12 @@
   :where(
     [data-control-family="scroll-area"][data-slot="root"][data-scrollbar-gutter="stable"]
       > [data-slot="scrollbar"][data-orientation="vertical"]:not([data-has-overflow-y])
-      > [data-slot="thumb"]
   ),
   :where(
     [data-control-family="scroll-area"][data-slot="root"][data-scrollbar-gutter="stable"]
       > [data-slot="scrollbar"][data-orientation="horizontal"]:not([data-has-overflow-x])
-      > [data-slot="thumb"]
   ) {
-    display: none;
+    visibility: hidden;
   }
 
   @supports (corner-shape: squircle) {

package/dist/styles/recipes/tabs.css

@@ -114,6 +114,18 @@
     opacity: var(--disabled-opacity);
   }
 
+  @media (forced-colors: active) {
+    :where([data-control-family="tabs"][data-slot="list"]:not([data-variant="browser"], [data-single="true"])) {
+      outline: 1px solid CanvasText;
+      outline-offset: -1px;
+    }
+
+    :where([data-control-family="tabs"][data-slot="list"]:not([data-variant="browser"]) [data-slot="indicator"]) {
+      outline: var(--focus-ring-width) solid Highlight;
+      outline-offset: calc(var(--focus-ring-width) * -1);
+    }
+  }
+
   :where([data-control-family="tabs"][data-slot="list"][data-variant="browser"]) {
     --_tabs-browser-corner-double: calc(var(--_tabs-trigger-radius-fit) + var(--_tabs-trigger-radius-fit));
     --_tabs-browser-inset: calc(var(--_tabs-trigger-radius-fit) + var(--cui-tabs-surface-radius));

package/dist/styles/type-scale.css

@@ -65,7 +65,8 @@
 
 /*
  * History: fixed 3 competing type systems (Tailwind defaults + named rungs + raw text-[Npx]) into one rung/role; 14px = body.
- * Usage: apply the rung directly to the semantic element (no <Text> component), e.g. text-heading-1 on <h1>, text-body on <p>.
+ * 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.
  */

package/dist/ui/sidebar.js

@@ -309,7 +309,7 @@ function SidebarContent({ className, children, ...props }) {
 		className: cn("min-h-0 flex-1 group-data-[collapsible=icon]:overflow-hidden", className),
 		lockAxis: "x",
 		scrollbarGutter: iconOnly ? "auto" : void 0,
-		viewportClassName: "overscroll-y-contain",
+		viewportClassName: "data-has-overflow-y:overscroll-y-contain",
 		...props,
 		children: /* @__PURE__ */ jsx("div", {
 			"data-control-ui": "sidebar",

package/dist/ui/typography.d.ts

@@ -17,6 +17,8 @@ declare const toneClassNames: {
   readonly foreground: "text-foreground";
   readonly muted: "text-muted-foreground";
   readonly primary: "text-primary-text";
+  readonly success: "text-success-text";
+  readonly warning: "text-warning-text";
   readonly destructive: "text-destructive-text";
 };
 declare const weightClassNames: {

package/dist/ui/typography.js

@@ -18,6 +18,8 @@ const toneClassNames = {
 	foreground: "text-foreground",
 	muted: "text-muted-foreground",
 	primary: "text-primary-text",
+	success: "text-success-text",
+	warning: "text-warning-text",
 	destructive: "text-destructive-text"
 };
 const weightClassNames = {

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

@@ -0,0 +1,7 @@
+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")
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ctrl-ui/react",
-  "version": "0.9.4",
+  "version": "0.9.5",
   "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",
@@ -32,7 +32,8 @@
     "**/*.css"
   ],
   "files": [
-    "dist"
+    "dist",
+    "lint/*.grit"
   ],
   "publishConfig": {
     "access": "public"