@ctrl-ui/react 0.9.15 → 0.9.17

package/README.md

@@ -54,6 +54,7 @@ These rules keep call sites honest. They come from one policy (`lint/class-polic
 - `no-component-style-classes` errors when `className` on a component imported from `@ctrl-ui/react` (or a `components/control-ui` directory) sets what the component owns: colors, type, padding, borders, radius, shadows, filters, state styles such as `hover:` and `data-[…]:`, arbitrary properties that paint (`[background:…]`), or `!important`. Every `text-*` class counts except alignment and wrapping (`text-center`, `text-pretty`, `text-ellipsis`…). The rule also reads string constants the `className` references in the same file, and the `className` of the element passed to the component's `render` prop. On any other element, it errors on classes that reach into a component's parts, such as `[&_[data-slot=trigger]]:` or `*:data-[slot=icon]:`. Layout classes (`flex`, `gap-*`, widths, heights, margins, placement) stay allowed. Restyle through the component's props or its `--cui-*` knobs instead.
 - `no-component-style-props` applies the same boundary to `style`: `--cui-*` knobs and layout keys pass, while paint keys error (`color`, `background`, `font*`, `padding*`, `border*`, `boxShadow`, `opacity`, `filter`…). It also checks same-file constant objects and the element passed to `render`. When the paint is data, such as a user-picked fill, put it on a plain element of your own and let the component inherit it.
 - `no-component-part-css` errors when a stylesheet paints a component part: a rule whose subject is `[data-slot]`, `[data-control-family]`, or another `[data-control…]` attribute, including nested `&` rules and `@apply`. Setting the part's `--cui-*` knobs and layout there stays allowed. The preset skips installed Control UI source under `components/control-ui`.
+- Paint-free components own no look, so both component rules treat them like plain elements: `RevealScope` can be the painted row or card itself, through `className`, `style`, or its `render` element. Part selectors on it still error, and `Reveal` keeps the full rule because its recipe owns opacity.
 - `no-raw-type-classes` errors on text sizes in any `className`: the type rungs, Tailwind's `text-xs`…`text-9xl`, and arbitrary `text-[13px]`. It reaches beyond Control UI, so adopt it folder by folder while you migrate.
 
 The Biome rules need Biome 2.5.0 or later: the preset scopes the stylesheet rule with plugin `includes`.

package/dist/knob-contracts/item-knobs.d.ts

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/item-knobs.d.ts
-export declare const itemKnobs: readonly ["--cui-item-radius", "--cui-item-hover-background", "--cui-item-current-background", "--cui-item-hover-border-color", "--cui-item-border-width", "--cui-item-active-scale", "--cui-item-gap", "--cui-item-padding-block", "--cui-item-padding-inline", "--cui-item-description-font-size", "--cui-item-description-line-height", "--cui-item-description-foreground", "--cui-item-media-foreground"];
+export declare const itemKnobs: readonly ["--cui-item-radius", "--cui-item-hover-background", "--cui-item-current-background", "--cui-item-foreground", "--cui-item-selected-background", "--cui-item-selected-foreground", "--cui-item-dragging-opacity", "--cui-item-drop-target-shadow", "--cui-item-hover-border-color", "--cui-item-border-width", "--cui-item-active-scale", "--cui-item-gap", "--cui-item-padding-block", "--cui-item-padding-inline", "--cui-item-description-font-size", "--cui-item-description-line-height", "--cui-item-description-foreground", "--cui-item-media-foreground"];
 export type ItemKnobStyle = Partial<Record<(typeof itemKnobs)[number], string>>;
 //#endregion

package/dist/knob-contracts/item-knobs.js

@@ -3,6 +3,11 @@ const itemKnobs = [
 	"--cui-item-radius",
 	"--cui-item-hover-background",
 	"--cui-item-current-background",
+	"--cui-item-foreground",
+	"--cui-item-selected-background",
+	"--cui-item-selected-foreground",
+	"--cui-item-dragging-opacity",
+	"--cui-item-drop-target-shadow",
 	"--cui-item-hover-border-color",
 	"--cui-item-border-width",
 	"--cui-item-active-scale",

package/dist/knob-contracts/resize-handle-knobs.d.ts

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/resize-handle-knobs.d.ts
-export declare const resizeHandleKnobs: readonly ["--cui-resize-handle-size", "--cui-resize-handle-hit-size", "--cui-resize-handle-background", "--cui-resize-handle-hover-background", "--cui-resize-handle-border-color", "--cui-resize-handle-border-width", "--cui-resize-handle-radius"];
+export declare const resizeHandleKnobs: readonly ["--cui-resize-handle-size", "--cui-resize-handle-hit-size", "--cui-resize-handle-background", "--cui-resize-handle-hover-background", "--cui-resize-handle-border-color", "--cui-resize-handle-border-width", "--cui-resize-handle-radius", "--cui-resize-handle-shadow"];
 export type ResizeHandleKnobStyle = Partial<Record<(typeof resizeHandleKnobs)[number], string>>;
 //#endregion

package/dist/knob-contracts/resize-handle-knobs.js

@@ -6,7 +6,8 @@ const resizeHandleKnobs = [
 	"--cui-resize-handle-hover-background",
 	"--cui-resize-handle-border-color",
 	"--cui-resize-handle-border-width",
-	"--cui-resize-handle-radius"
+	"--cui-resize-handle-radius",
+	"--cui-resize-handle-shadow"
 ];
 //#endregion
 export { resizeHandleKnobs };

package/dist/knob-contracts/tabs-knobs.d.ts

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/tabs-knobs.d.ts
-export declare const tabsKnobs: readonly ["--cui-tabs-surface-background", "--cui-tabs-surface-radius", "--cui-tabs-trigger-padding-inline", "--cui-tabs-trigger-radius", "--cui-tabs-trigger-height", "--cui-tabs-list-padding", "--cui-tabs-list-radius", "--cui-tabs-list-background", "--cui-tabs-list-backdrop-filter", "--cui-tabs-indicator-background", "--cui-tabs-foreground", "--cui-tabs-font-size", "--cui-tabs-font-weight", "--cui-tabs-active-foreground", "--cui-tabs-hover-foreground", "--cui-tabs-indicator-shadow", "--cui-tabs-list-shadow", "--cui-tabs-border-color", "--cui-tabs-border-width", "--cui-tabs-indicator-background-image"];
+export declare const tabsKnobs: readonly ["--cui-tabs-surface-background", "--cui-tabs-surface-radius", "--cui-tabs-trigger-padding-inline", "--cui-tabs-trigger-padding-inline-start", "--cui-tabs-trigger-padding-inline-end", "--cui-tabs-trigger-radius", "--cui-tabs-trigger-height", "--cui-tabs-list-padding", "--cui-tabs-list-radius", "--cui-tabs-list-background", "--cui-tabs-list-backdrop-filter", "--cui-tabs-indicator-background", "--cui-tabs-foreground", "--cui-tabs-font-size", "--cui-tabs-font-weight", "--cui-tabs-active-foreground", "--cui-tabs-hover-foreground", "--cui-tabs-indicator-shadow", "--cui-tabs-list-shadow", "--cui-tabs-border-color", "--cui-tabs-border-width", "--cui-tabs-indicator-background-image"];
 export type TabsKnobStyle = Partial<Record<(typeof tabsKnobs)[number], string>>;
 //#endregion

package/dist/knob-contracts/tabs-knobs.js

@@ -3,6 +3,8 @@ const tabsKnobs = [
 	"--cui-tabs-surface-background",
 	"--cui-tabs-surface-radius",
 	"--cui-tabs-trigger-padding-inline",
+	"--cui-tabs-trigger-padding-inline-start",
+	"--cui-tabs-trigger-padding-inline-end",
 	"--cui-tabs-trigger-radius",
 	"--cui-tabs-trigger-height",
 	"--cui-tabs-list-padding",

package/dist/styles/recipes/badge.css

@@ -46,6 +46,18 @@
     }
   }
 
+  :where([data-control-family="badge"][data-slot="root"][data-color="primary"]) {
+    --_badge-color-background: var(--primary);
+    --_badge-color-foreground: var(--primary-foreground);
+    --_badge-color-border: var(--primary);
+    --_badge-color-background-hover: oklch(from var(--primary) calc(l - 0.05) c h);
+  }
+
+  :where([data-control-family="badge"][data-slot="root"][data-color="primary"][data-variant="outline"]) {
+    --_badge-color-background: oklch(from var(--primary) l c h / var(--badge-fill-alpha));
+    --_badge-color-foreground: var(--primary-text);
+  }
+
   :where([data-control-family="badge"][data-slot="root"][data-color="red"]) {
     --_badge-color-background: var(--badge-red);
     --_badge-color-foreground: var(--badge-red-foreground);

package/dist/styles/recipes/card.css

@@ -84,11 +84,11 @@
   }
 
   :where([data-control-family="card"][data-slot="root"][data-variant="sectioned"] > [data-slot="content"]) {
-    padding-block: calc(var(--spacing) * 6);
+    padding-block: var(--cui-card-padding-block);
   }
 
   :where([data-control-family="card"][data-slot="root"][data-variant="sectioned"] > [data-slot="header"]) {
-    padding-block: calc(var(--spacing) * 5);
+    padding-block: calc(var(--cui-card-padding-block) - var(--spacing));
     border-block-end: 1px solid oklch(from var(--border) l c h / 0.7);
   }
 

package/dist/styles/recipes/item.css

@@ -1,8 +1,13 @@
 @layer components {
   :where([data-control-family="item"][data-slot="root"]) {
     --cui-item-radius: var(--radius-lg);
+    --cui-item-foreground: var(--foreground);
     --cui-item-hover-background: var(--hover-fill);
     --cui-item-current-background: var(--active-fill);
+    --cui-item-selected-background: var(--cui-item-current-background);
+    --cui-item-selected-foreground: var(--cui-item-foreground);
+    --cui-item-dragging-opacity: 0.5;
+    --cui-item-drop-target-shadow: inset 0 0 0 var(--focus-ring-width) var(--primary);
     --cui-item-hover-border-color: var(--_item-border-color);
     --cui-item-border-width: 0px;
     --cui-item-active-scale: 0.99;
@@ -20,7 +25,7 @@
     border-radius: var(--cui-item-radius);
     background: var(--_item-background);
     box-shadow: none;
-    color: var(--foreground);
+    color: var(--cui-item-foreground);
     transition-property: scale;
     transition-duration: var(--duration-fast);
     transition-timing-function: var(--ease-standard);
@@ -72,11 +77,16 @@
 
   @media (hover: hover) {
     :where(
-        [data-control-family="item"][data-slot="root"]:is(a, button, [href], [role="button"]):not(
-          :disabled,
-          [data-disabled],
-          [aria-disabled="true"]
-        ):hover
+        [data-control-family="item"][data-slot="root"]:is(
+          a,
+          button,
+          [href],
+          [role="button"],
+          [role="treeitem"],
+          [role="option"],
+          [role="row"],
+          [role="menuitem"]
+        ):not(:disabled, [data-disabled], [aria-disabled="true"]):hover
       ) {
       outline-color: var(--cui-item-hover-border-color);
       background: var(--cui-item-hover-background);
@@ -84,6 +94,34 @@
     }
   }
 
+  :where([data-control-family="item"][data-slot="root"][aria-selected="true"]) {
+    background: var(--cui-item-selected-background);
+    color: var(--cui-item-selected-foreground);
+  }
+
+  :where([data-control-family="item"][data-slot="root"][data-dragging]) {
+    opacity: var(--cui-item-dragging-opacity);
+  }
+
+  :where([data-control-family="item"][data-slot="root"][data-drop-target]) {
+    box-shadow: var(--cui-item-drop-target-shadow);
+  }
+
+  @media (forced-colors: active) {
+    :where([data-control-family="item"][data-slot="root"][aria-selected="true"]) {
+      --cui-item-description-foreground: HighlightText;
+      --cui-item-media-foreground: HighlightText;
+      forced-color-adjust: none;
+      background: Highlight;
+      color: HighlightText;
+    }
+
+    :where([data-control-family="item"][data-slot="root"][data-drop-target]) {
+      outline: var(--focus-ring-width) solid Highlight;
+      outline-offset: calc(var(--focus-ring-width) * -1);
+    }
+  }
+
   :where(
     [data-control-family="item"][data-slot="root"]:is(a, button, [href], [role="button"]):not(
       :disabled,
@@ -138,6 +176,35 @@
   initial-value: transparent;
 }
 
+@property --cui-item-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-item-selected-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-item-selected-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-item-dragging-opacity {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 1;
+}
+
+@property --cui-item-drop-target-shadow {
+  syntax: "*";
+  inherits: true;
+}
+
 @property --cui-item-hover-border-color {
   syntax: "<color>";
   inherits: true;

package/dist/styles/recipes/resizable.css

@@ -25,6 +25,21 @@
     --cui-resizable-group-radius: 0px;
   }
 
+  /* biome-ignore-start lint/complexity/noImportantStyles: react-resizable-panels sets inline display on the group and panels. */
+  :where([data-control-family="resizable"][data-slot="panel-group"][data-layout="contents"]) {
+    display: contents !important;
+  }
+
+  :where([data-control-family="resizable"][data-slot="panel-group"]:not([data-layout="resizable"]) > [data-slot="panel"]),
+  :where([data-control-family="resizable"][data-slot="panel-group"]:not([data-layout="resizable"]) > [data-slot="panel"] > div) {
+    display: contents !important;
+  }
+
+  :where([data-control-family="resizable"][data-slot="panel-group"]:not([data-layout="resizable"]) > [data-slot="handle"]) {
+    display: none !important;
+  }
+  /* biome-ignore-end lint/complexity/noImportantStyles: react-resizable-panels sets inline display on the group and panels. */
+
   :where([data-control-family="resizable"][data-slot="handle"]) {
     --_resizable-gradient-color: var(--cui-resizable-handle-hover-background);
     background-color: var(--cui-resizable-handle-background);

package/dist/styles/recipes/resize-handle.css

@@ -7,11 +7,13 @@
     --cui-resize-handle-border-color: var(--primary);
     --cui-resize-handle-border-width: var(--control-rim-width);
     --cui-resize-handle-radius: 0px;
+    --cui-resize-handle-shadow: none;
     inline-size: var(--cui-resize-handle-hit-size);
     block-size: var(--cui-resize-handle-hit-size);
     translate: -50% -50%;
     padding: 0;
     border: 0;
+    border-radius: var(--cui-resize-handle-radius);
     background: transparent;
   }
 
@@ -25,6 +27,7 @@
     border: var(--cui-resize-handle-border-width) solid var(--cui-resize-handle-border-color);
     border-radius: var(--cui-resize-handle-radius);
     background: var(--cui-resize-handle-background);
+    box-shadow: var(--cui-resize-handle-shadow);
     transition: background-color var(--duration-fast) var(--ease-standard);
   }
 
@@ -124,3 +127,8 @@
   inherits: true;
   initial-value: 0px;
 }
+
+@property --cui-resize-handle-shadow {
+  syntax: "*";
+  inherits: true;
+}

package/dist/styles/recipes/tabs.css

@@ -34,6 +34,8 @@
 
   :where([data-control-family="tabs"][data-slot="list"]) {
     --cui-tabs-trigger-height: var(--control-h-sm);
+    --cui-tabs-trigger-padding-inline-start: var(--cui-tabs-trigger-padding-inline);
+    --cui-tabs-trigger-padding-inline-end: var(--cui-tabs-trigger-padding-inline);
     --_tabs-trigger-radius-fit: min(var(--cui-tabs-trigger-radius), calc(var(--cui-tabs-trigger-height) / 2));
     position: relative;
     display: flex;
@@ -105,7 +107,7 @@
     gap: calc(var(--spacing) * 1.5);
     white-space: nowrap;
     border-radius: var(--_tabs-trigger-radius-fit);
-    padding-inline: var(--cui-tabs-trigger-padding-inline);
+    padding-inline: var(--cui-tabs-trigger-padding-inline-start) var(--cui-tabs-trigger-padding-inline-end);
     color: var(--cui-tabs-foreground);
     font-size: var(--cui-tabs-font-size);
     font-weight: var(--cui-tabs-font-weight);
@@ -285,6 +287,18 @@
   initial-value: 0px;
 }
 
+@property --cui-tabs-trigger-padding-inline-start {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-tabs-trigger-padding-inline-end {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
 @property --cui-tabs-trigger-radius {
   syntax: "<length-percentage>";
   inherits: true;

package/dist/ui/badge.d.ts

@@ -7,7 +7,7 @@ export type BadgeVariant = (typeof badgeVariants)[number];
 export declare const badgeSizes: readonly ["sm", "md"];
 export type BadgeSize = (typeof badgeSizes)[number];
 export declare const BADGE_COLORS: readonly ["neutral", "red", "orange", "yellow", "green", "blue", "purple", "pink"];
-export type BadgeColor = (typeof BADGE_COLORS)[number];
+export type BadgeColor = (typeof BADGE_COLORS)[number] | "primary";
 export type BadgeProps = Omit<ComponentProps<"span">, "style"> & {
   variant?: BadgeVariant;
   size?: BadgeSize;

package/dist/ui/dropdown-menu.d.ts

@@ -9,10 +9,12 @@ type DropdownMenuStyledProps<PrimitiveProps> = Omit<PrimitiveProps, "className"
   className?: string;
   style?: CSSProperties & PopupKnobStyle;
 };
-export type DropdownMenuProps = Menu.Root.Props;
+export type DropdownMenuProps<Payload = unknown> = Menu.Root.Props<Payload>;
+export type DropdownMenuHandle<Payload = unknown> = Menu.Handle<Payload>;
+export declare const createDropdownMenuHandle: typeof Menu.createHandle;
 export declare const dropdownMenuTriggerVariants: readonly ["surface", "ghost"];
 export type DropdownMenuTriggerVariant = (typeof dropdownMenuTriggerVariants)[number];
-export type DropdownMenuTriggerProps = Omit<ComponentProps<"button">, "style"> & Pick<ComponentProps<typeof Menu.Trigger>, "nativeButton" | "render"> & {
+export type DropdownMenuTriggerProps<Payload = unknown> = Omit<ComponentProps<"button">, "style"> & Pick<Menu.Trigger.Props<Payload>, "nativeButton" | "render" | "handle" | "payload"> & {
   style?: CSSProperties & ButtonKnobStyle;
 } & {
   size?: ControlSize;
@@ -37,8 +39,8 @@ export type DropdownMenuSeparatorProps = Omit<ComponentProps<"div">, "style"> &
 export type DropdownMenuLabelProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & PopupKnobStyle;
 };
-export declare function DropdownMenu({ children, ...props }: DropdownMenuProps): import("react").JSX.Element;
-export declare function DropdownMenuTrigger({ size, iconOnly, variant, className, ...props }: DropdownMenuTriggerProps): import("react").JSX.Element;
+export declare function DropdownMenu<Payload>({ children, ...props }: DropdownMenuProps<Payload>): import("react").JSX.Element;
+export declare function DropdownMenuTrigger<Payload>({ size, iconOnly, variant, className, ...props }: DropdownMenuTriggerProps<Payload>): import("react").JSX.Element;
 export declare function DropdownMenuContent({ className, children, side, sideOffset, align, alignOffset, collisionBoundary, collisionPadding, collisionAvoidance, ...props }: DropdownMenuContentProps): import("react").JSX.Element;
 export declare function DropdownMenuItem({ tone, className, ...props }: DropdownMenuItemProps): import("react").JSX.Element;
 export declare function DropdownMenuSeparator({ className, ...props }: DropdownMenuSeparatorProps): import("react").JSX.Element;

package/dist/ui/dropdown-menu.js

@@ -9,6 +9,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { Menu } from "@base-ui/react/menu";
 //#region src/ui/dropdown-menu.tsx
+const createDropdownMenuHandle = Menu.createHandle;
 const dropdownMenuTriggerVariants = ["surface", "ghost"];
 function DropdownMenu({ children, ...props }) {
 	return /* @__PURE__ */ jsx(Menu.Root, {
@@ -209,4 +210,4 @@ function DropdownMenuShortcut(props) {
 	});
 }
 //#endregion
-export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, dropdownMenuTriggerVariants };
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, createDropdownMenuHandle, dropdownMenuTriggerVariants };

package/dist/ui/resizable.d.ts

@@ -5,10 +5,12 @@ export type ResizableLayout = {
   [panelId: string]: number;
 };
 export type ResizablePanelGroupVariant = "framed" | "nested";
+export type ResizablePanelGroupLayout = "resizable" | "static" | "contents";
 export type ResizableHandleVariant = "solid" | "hover";
 export type ResizablePanelGroupProps = Omit<ComponentProps<"div">, "style"> & {
   orientation?: "horizontal" | "vertical";
   variant?: ResizablePanelGroupVariant;
+  layout?: ResizablePanelGroupLayout;
   defaultLayout?: ResizableLayout;
   disableCursor?: boolean;
   disabled?: boolean;
@@ -66,7 +68,7 @@ export type ResizableFloatingPanelProps = Omit<ComponentProps<"div">, "style"> &
   getAriaValueText?: (size: number) => string;
   style?: ResizableFloatingPanelStyle;
 };
-export declare function ResizablePanelGroup({ className, orientation, variant, disableCursor, children, ...props }: ResizablePanelGroupProps): import("react").JSX.Element;
+export declare function ResizablePanelGroup({ className, orientation, variant, layout, disabled, disableCursor, children, ...props }: ResizablePanelGroupProps): import("react").JSX.Element;
 export declare function ResizablePanel({ className, ...props }: ResizablePanelProps): import("react").JSX.Element;
 export declare function ResizableHandle({ className, variant, withHandle, children, "aria-label": ariaLabel, ...props }: ResizableHandleProps): import("react").JSX.Element;
 export declare function ResizableFloatingPanel({ side, size: controlledSize, defaultSize, onSizeChange, minSize, maxSize, handleVariant, handleLabel, getAriaValueText, className, style, children, ...props }: ResizableFloatingPanelProps): import("react").JSX.Element;

package/dist/ui/resizable.js

@@ -39,7 +39,7 @@ function useResizeCursor(handleRef, disableCursor) {
 		};
 	}, [handleRef, disableCursor]);
 }
-function ResizablePanelGroup({ className, orientation = "horizontal", variant = "framed", disableCursor = false, children, ...props }) {
+function ResizablePanelGroup({ className, orientation = "horizontal", variant = "framed", layout = "resizable", disabled = false, disableCursor = false, children, ...props }) {
 	return /* @__PURE__ */ jsx(ResizableGroupContext.Provider, {
 		value: {
 			orientation,
@@ -51,7 +51,9 @@ function ResizablePanelGroup({ className, orientation = "horizontal", variant =
 			"data-slot": "panel-group",
 			"data-surface": "panel",
 			"data-variant": variant,
+			"data-layout": layout,
 			orientation,
+			disabled: disabled || layout !== "resizable",
 			disableCursor: true,
 			className: cn("flex h-full w-full", className),
 			...props,

package/dist/ui/typography.d.ts

@@ -25,6 +25,7 @@ declare const weightClassNames: {
   readonly normal: "font-normal";
   readonly medium: "font-medium";
   readonly semibold: "font-semibold";
+  readonly bold: "font-bold";
 };
 export type TypeSize = keyof typeof sizeClassNames;
 export type TypeTone = keyof typeof toneClassNames;

package/dist/ui/typography.js

@@ -25,7 +25,8 @@ const toneClassNames = {
 const weightClassNames = {
 	normal: "font-normal",
 	medium: "font-medium",
-	semibold: "font-semibold"
+	semibold: "font-semibold",
+	bold: "font-bold"
 };
 const headingSizeByLevel = {
 	1: "heading-1",

package/lint/class-policy.mjs

@@ -1,5 +1,7 @@
 const controlUiImportPath = `(?:@ctrl-ui/react|[^'"]*components/control-ui)/`;
 
+export const paintFreeComponents = ["RevealScope"];
+
 const escapeRegExp = (text) => text.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 
 export function controlUiImportPattern(importSources = []) {

package/lint/eslint-plugin.mjs

@@ -6,6 +6,7 @@ import {
   componentStyleMessage,
   componentStylePropMessage,
   controlUiImportPattern,
+  paintFreeComponents,
   rawTypeClass,
   rawTypeMessage,
 } from "./class-policy.mjs";
@@ -77,7 +78,9 @@ function controlUiLocalNames(program, controlUiImport) {
   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);
+    for (const specifier of statement.specifiers) {
+      if (!paintFreeComponents.includes(specifier.imported?.name)) names.add(specifier.local.name);
+    }
   }
   return names;
 }

package/lint/grit-rules.mjs

@@ -8,6 +8,7 @@ import {
   componentStyleMessage,
   componentStylePropMessage,
   controlUiImportPattern,
+  paintFreeComponents,
   paintProperty,
   rawTypeClass,
   rawTypeMessage,
@@ -30,6 +31,7 @@ const stringTexts = (name) =>
 const classLiterals = "or { JsStringLiteralExpression(), JsTemplateExpression(), JsObjectExpression() }";
 const renderedTag = "or { JsxTagExpression(tag=$tag), JsParenthesizedExpression(expression=JsxTagExpression(tag=$tag)) }";
 const componentName = `r"([A-Z]\\w*)(?:\\.[\\w.]+)?"`;
+const paintFreeComponent = gritExactRegex(`(?:${paintFreeComponents.join("|")})`);
 
 function constantMatches(reference, literals, offends) {
   return `contains JsReferenceIdentifier() as $${reference} where {
@@ -97,6 +99,7 @@ function componentAttributePattern({ attribute, offends, message, importSources
     }
   } where {
     $name <: ${componentName}($component),
+    not $component <: ${paintFreeComponent},
     $attr <: within JsModule() as $module,
     ${offends("$attr")},
     ${importedFromControlUi("$component", importSources)},
@@ -115,6 +118,7 @@ function partClassPattern(importSources) {
     ${classNameMatches("$plainAttr", componentPartClass)},
     not and {
       $plainName <: ${componentName}($plainComponent),
+      not $plainComponent <: ${paintFreeComponent},
       ${importedFromControlUi("$plainComponent", importSources, "Plain")}
     },
     register_diagnostic(span=$plainAttr, message=${gritString(componentPartMessage)}, severity="error")

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

@@ -31,6 +31,7 @@ or {
     }
   } where {
     $name <: r"([A-Z]\w*)(?:\.[\w.]+)?"($component),
+    not $component <: r"(?:RevealScope)",
     $attr <: within JsModule() as $module,
     $attr <: or {
     contains or { JsxString(), JsStringLiteralExpression(), JsTemplateChunkElement(), JsLiteralMemberName() as $attrMember where { $attrMember <: r"(?s)[\"'].*" } } as $attrText where { $attrText <: 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|blur(?:-|(?:[\s\"'\x60]|$))|brightness-|contrast-[\d\[]|grayscale|hue-rotate-|invert|saturate-|sepia|(?: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]*?\]):)|(?:^|[^\w-])\[(?:padding|background|color|font|line-height|letter-spacing|border|outline|box-shadow|text-shadow|text-decoration|text-underline|text-transform|opacity|filter|backdrop-filter|fill|stroke|caret-color|accent-color|mask|-webkit-mask|-webkit-font-smoothing|-moz-osx-font-smoothing)(?:-[\w-]*)?:).*" },
@@ -71,6 +72,7 @@ or {
   },
     not and {
       $plainName <: r"([A-Z]\w*)(?:\.[\w.]+)?"($plainComponent),
+      not $plainComponent <: r"(?:RevealScope)",
       $module <: contains JsImport() as $importPlain where {
     $importPlain <: r"(?s).*(?:from\s+['\"](?:(?:@ctrl-ui/react|[^'\"]*components/control-ui)/)).*",
     $importPlain <: contains JsIdentifierBinding() as $bindingPlain where { $bindingPlain <: $plainComponent }

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

@@ -30,6 +30,7 @@ or {
     }
   } where {
     $name <: r"([A-Z]\w*)(?:\.[\w.]+)?"($component),
+    not $component <: r"(?:RevealScope)",
     $attr <: within JsModule() as $module,
     $attr <: or {
     contains or { JsPropertyObjectMember(name=$attrKey), JsShorthandPropertyObjectMember(name=$attrKey) } where { $attrKey <: r"[\"']?(?:(?:padding|background|color|font|lineHeight|letterSpacing|border|outline|boxShadow|textShadow|textDecoration|textUnderline|textTransform|opacity|filter|backdropFilter|fill|stroke|caretColor|accentColor|mask|WebkitMask|WebkitFontSmoothing|MozOsxFontSmoothing)(?:[A-Z]\w*)?|(?:padding|background|color|font|line-height|letter-spacing|border|outline|box-shadow|text-shadow|text-decoration|text-underline|text-transform|opacity|filter|backdrop-filter|fill|stroke|caret-color|accent-color|mask|-webkit-mask|-webkit-font-smoothing|-moz-osx-font-smoothing)(?:-[\w-]*)?)[\"']?" },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ctrl-ui/react",
-  "version": "0.9.15",
+  "version": "0.9.17",
   "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",