@ctrl-ui/react 0.9.6 → 0.9.8

package/dist/ui/dropdown-menu.js

@@ -4,6 +4,7 @@ import { controlEffectsAttribute } from "../skin.js";
 import { useSkin } from "../skin-provider.js";
 import { popupItemFocusProps } from "../lib/popup-item-focus.js";
 import { popupItemStructureClasses } from "../surface-variants.js";
+import { isValidElement } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { Menu } from "@base-ui/react/menu";
@@ -15,21 +16,37 @@ function DropdownMenu({ children, ...props }) {
 		children
 	});
 }
-function DropdownMenuTrigger({ size = "sm", iconOnly = false, variant = "surface", className, children, disabled, ...props }) {
+function explicitAppearance({ size, variant, iconOnly }) {
+	const attributes = {};
+	if (size) attributes["data-size"] = size;
+	if (variant) attributes["data-variant"] = variant;
+	if (iconOnly) attributes["data-icon-only"] = "true";
+	return attributes;
+}
+function DropdownMenuTrigger({ size, iconOnly, variant, className, ...props }) {
+	if (props.render !== void 0 && !(isValidElement(props.render) && typeof props.render.type === "string")) return /* @__PURE__ */ jsx(Menu.Trigger, {
+		"data-control-ui": "dropdown-menu",
+		"data-slot": "trigger",
+		...explicitAppearance({
+			size,
+			variant,
+			iconOnly
+		}),
+		className,
+		...props
+	});
 	return /* @__PURE__ */ jsx(Menu.Trigger, {
 		"data-control-ui": "dropdown-menu",
 		"data-control-family": "button",
 		"data-slot": "trigger",
 		"data-control": "true",
-		"data-size": size,
+		"data-size": size ?? "sm",
 		"data-icon-only": iconOnly ? "true" : void 0,
-		"data-variant": variant,
+		"data-variant": variant ?? "surface",
 		"data-tone": "neutral",
 		"data-shape": "default",
 		className: cn("relative isolate inline-flex shrink-0 items-center justify-center overflow-visible", className),
-		disabled,
-		...props,
-		children
+		...props
 	});
 }
 function DropdownMenuContent({ className, children, side, sideOffset = 6, align = "start", alignOffset, collisionBoundary, collisionPadding, collisionAvoidance, ...props }) {

package/dist/ui/dropzone.js

@@ -1,12 +1,12 @@
 "use client";
 import { cn } from "../lib/cn.js";
 import { Button } from "./button.js";
+import { Item, ItemActions, ItemContent, ItemDescription, ItemMedia, ItemTitle } from "./item.js";
 import { DropzoneErrorCode, formatDropzoneFileSize } from "../lib/dropzone-validation.js";
 import { useDropzone } from "../hooks/use-dropzone.js";
-import { Item, ItemActions, ItemContent, ItemDescription, ItemMedia, ItemTitle } from "./item.js";
 import { createContext, useContext, useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { CircleAlert, CloudUpload, FileIcon, LoaderCircle, Search, XIcon } from "lucide-react";
+import { CircleAlertIcon, CloudUpload, FileIcon, LoaderCircle, Search, XIcon } from "lucide-react";
 //#region src/ui/dropzone.tsx
 const DropzoneContext = createContext(null);
 const DropzoneFocusContext = createContext(null);
@@ -300,7 +300,7 @@ function DropzoneFeedback({ state }) {
 		icon = /* @__PURE__ */ jsx(CloudUpload, { "aria-hidden": "true" });
 		message = "Release to add files.";
 	} else if (state === "reject") {
-		icon = /* @__PURE__ */ jsx(CircleAlert, { "aria-hidden": "true" });
+		icon = /* @__PURE__ */ jsx(CircleAlertIcon, { "aria-hidden": "true" });
 		message = "Some files are not accepted.";
 	} else if (state === "unknown") {
 		icon = /* @__PURE__ */ jsx(Search, { "aria-hidden": "true" });
@@ -341,19 +341,18 @@ function DefaultFile({ file }) {
 		]
 	});
 }
+const rejectedItemStyle = {
+	"--cui-item-media-foreground": "var(--destructive-text)",
+	"--cui-item-description-foreground": "var(--destructive-text)"
+};
 function DefaultRejection({ rejection }) {
 	return /* @__PURE__ */ jsxs(Item, {
 		variant: "muted",
-		children: [/* @__PURE__ */ jsx(ItemMedia, {
-			"data-dropzone-invalid": "",
-			children: /* @__PURE__ */ jsx(CircleAlert, { "aria-hidden": "true" })
-		}), /* @__PURE__ */ jsxs(ItemContent, { children: [/* @__PURE__ */ jsx(ItemTitle, {
+		style: rejectedItemStyle,
+		children: [/* @__PURE__ */ jsx(ItemMedia, { children: /* @__PURE__ */ jsx(CircleAlertIcon, { "aria-hidden": "true" }) }), /* @__PURE__ */ jsxs(ItemContent, { children: [/* @__PURE__ */ jsx(ItemTitle, {
 			className: "wrap-anywhere",
 			children: rejection.file.name
-		}), rejection.errors.map((error) => /* @__PURE__ */ jsx(ItemDescription, {
-			"data-dropzone-invalid": "",
-			children: error.message
-		}, `${error.code}-${error.message}`))] })]
+		}), rejection.errors.map((error) => /* @__PURE__ */ jsx(ItemDescription, { children: error.message }, `${error.code}-${error.message}`))] })]
 	});
 }
 function getDropzoneStatusMessage(context) {

package/dist/ui/field.d.ts

@@ -31,7 +31,9 @@ export type FieldErrorProps = Omit<ComponentProps<"div">, "style"> & {
   match?: FieldErrorMatch;
   style?: CSSProperties & FieldKnobStyle;
 };
+export type FieldGroupVariant = "default" | "card";
 export type FieldGroupProps = ComponentProps<"div"> & {
+  variant?: FieldGroupVariant;
   style?: CSSProperties & FieldKnobStyle;
 };
 export type FieldSeparatorProps = Omit<ComponentProps<"div">, "style"> & {
@@ -44,7 +46,9 @@ export type FieldItemProps = ComponentProps<"div"> & {
 export type FieldSetProps = Omit<ComponentProps<"fieldset">, "style"> & {
   style?: CSSProperties & FieldKnobStyle;
 };
+export type FieldLegendVariant = "default" | "section";
 export type FieldLegendProps = Omit<ComponentProps<"div">, "style"> & {
+  variant?: FieldLegendVariant;
   style?: CSSProperties & FieldKnobStyle;
 };
 export declare function Field({ className, orientation, ...props }: FieldProps): import("react").JSX.Element;
@@ -55,9 +59,9 @@ type RefinedFieldControlProps = FieldControlProps & Pick<ComponentProps<typeof F
 export declare function FieldControl({ className, render, ...props }: RefinedFieldControlProps): import("react").JSX.Element;
 export declare function FieldDescription({ className, ...props }: FieldDescriptionProps): import("react").JSX.Element;
 export declare function FieldError({ className, ...props }: FieldErrorProps): import("react").JSX.Element;
-export declare function FieldGroup({ className, ...props }: FieldGroupProps): import("react").JSX.Element;
+export declare function FieldGroup({ className, variant, ...props }: FieldGroupProps): import("react").JSX.Element;
 export declare function FieldSeparator({ children, className, ...props }: FieldSeparatorProps): import("react").JSX.Element;
 export declare function FieldItem({ className, ...props }: FieldItemProps): import("react").JSX.Element;
 export declare function FieldSet({ className, ...props }: FieldSetProps): import("react").JSX.Element;
-export declare function FieldLegend({ className, ...props }: FieldLegendProps): import("react").JSX.Element;
+export declare function FieldLegend({ className, variant, ...props }: FieldLegendProps): import("react").JSX.Element;
 //#endregion

package/dist/ui/field.js

@@ -103,12 +103,13 @@ function FieldError({ className, ...props }) {
 		})
 	});
 }
-function FieldGroup({ className, ...props }) {
+function FieldGroup({ className, variant = "default", ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-control-ui": "field",
 		"data-control-family": "field",
 		"data-field-kind": "field",
 		"data-slot": "group",
+		"data-variant": variant,
 		className: cn("group/field-group @container/field-group flex flex-col", className),
 		...props
 	});
@@ -152,12 +153,13 @@ function FieldSet({ className, ...props }) {
 		...props
 	});
 }
-function FieldLegend({ className, ...props }) {
+function FieldLegend({ className, variant = "default", ...props }) {
 	return /* @__PURE__ */ jsx(Fieldset.Legend, {
 		"data-control-ui": "field",
 		"data-control-family": "field",
 		"data-field-kind": "field",
 		"data-slot": "legend",
+		"data-variant": variant,
 		className,
 		...props
 	});

package/dist/ui/morphing-panel.d.ts

@@ -35,6 +35,10 @@ export declare function MorphingPanelTrigger({ render, className, children, ...p
 export declare function MorphingPanelContent({ autoFocus, ...props }: MorphingPanelContentProps): import("react").JSX.Element;
 export declare function MorphingPanelClose({ onClick, ...props }: MorphingPanelCloseProps): import("react").JSX.Element;
 export declare function MorphingPanelHeader({ className, ...props }: MorphingPanelPartProps): import("react").JSX.Element;
-export declare function MorphingPanelBody({ className, ...props }: MorphingPanelPartProps): import("react").JSX.Element;
+export declare const morphingPanelBodyPaddings: readonly ["default", "none"];
+export type MorphingPanelBodyPadding = (typeof morphingPanelBodyPaddings)[number];
+export declare function MorphingPanelBody({ className, padding, ...props }: MorphingPanelPartProps & {
+  padding?: MorphingPanelBodyPadding;
+}): import("react").JSX.Element;
 export declare function MorphingPanelFooter({ className, ...props }: MorphingPanelPartProps): import("react").JSX.Element;
 //#endregion

package/dist/ui/morphing-panel.js

@@ -182,12 +182,14 @@ function MorphingPanelHeader({ className, ...props }) {
 		className: cn("flex shrink-0 items-center", className)
 	});
 }
-function MorphingPanelBody({ className, ...props }) {
+const morphingPanelBodyPaddings = ["default", "none"];
+function MorphingPanelBody({ className, padding = "default", ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		...props,
 		"data-control-ui": "morphing-panel",
 		"data-control-family": "morphing-panel",
 		"data-slot": "body",
+		"data-padding": padding,
 		className: cn("min-h-0 min-w-0 flex-1 overflow-y-auto overscroll-contain", className)
 	});
 }
@@ -201,4 +203,4 @@ function MorphingPanelFooter({ className, ...props }) {
 	});
 }
 //#endregion
-export { MorphingPanel, MorphingPanelBody, MorphingPanelClose, MorphingPanelContent, MorphingPanelFooter, MorphingPanelHeader, MorphingPanelPositioner, MorphingPanelTrigger };
+export { MorphingPanel, MorphingPanelBody, MorphingPanelClose, MorphingPanelContent, MorphingPanelFooter, MorphingPanelHeader, MorphingPanelPositioner, MorphingPanelTrigger, morphingPanelBodyPaddings };

package/dist/ui/select.js

@@ -81,7 +81,7 @@ function SelectValue({ children, ...props }) {
 		children
 	});
 }
-function SelectContent({ className, children, alignItemWithTrigger = false, ...props }) {
+function SelectContent({ className, children, alignItemWithTrigger, ...props }) {
 	const skin = useSkin();
 	return /* @__PURE__ */ jsx(Select$1.Portal, { children: /* @__PURE__ */ jsx(Select$1.Positioner, {
 		"data-skin": skin.id,
@@ -89,7 +89,7 @@ function SelectContent({ className, children, alignItemWithTrigger = false, ...p
 		side: "bottom",
 		align: "start",
 		sideOffset: 6,
-		alignItemWithTrigger,
+		alignItemWithTrigger: alignItemWithTrigger ?? skin.selectAlignItemWithTrigger ?? false,
 		className: "z-(--z-popup)",
 		children: /* @__PURE__ */ jsx(Select$1.Popup, {
 			"data-control-ui": "select",

package/dist/ui/sidebar-mobile.js

@@ -14,7 +14,7 @@ function SidebarMobileNav({ variant = "bar", "aria-label": label = "Mobile navig
 		"data-slot": "mobile-nav-container",
 		"data-layout": layout,
 		"data-variant": variant,
-		className: "shrink-0 lg:hidden",
+		className: "shrink-0 sidebar:hidden",
 		style,
 		children: /* @__PURE__ */ jsx("nav", {
 			...props,

package/dist/ui/sidebar-provider.d.ts

@@ -6,6 +6,7 @@ export type SidebarStyle = CSSProperties & SidebarKnobStyle & {
   "--sidebar-width-icon"?: string;
 };
 export type SidebarLayoutMode = "viewport" | "contained";
+export type SidebarWrapperSurface = "transparent" | "background";
 type SidebarContextProps = {
   state: "expanded" | "collapsed";
   open: boolean;
@@ -55,9 +56,10 @@ export type SidebarProviderProps = Omit<ComponentProps<"div">, "style"> & {
   persistOpen?: boolean;
   keyboardShortcut?: string | null;
   layout?: SidebarLayoutMode;
+  surface?: SidebarWrapperSurface;
   skipLinkLabel?: string;
   contentId?: string;
   style?: SidebarStyle;
 };
-export declare function SidebarProvider({ defaultOpen, open: openProp, onOpenChange, defaultWidth, minWidth, maxWidth, width: widthProp, onWidthChange, persistOpen, keyboardShortcut, layout, skipLinkLabel, contentId: contentIdProp, ref, className, style, children, ...props }: SidebarProviderProps): import("react").JSX.Element;
+export declare function SidebarProvider({ defaultOpen, open: openProp, onOpenChange, defaultWidth, minWidth, maxWidth, width: widthProp, onWidthChange, persistOpen, keyboardShortcut, layout, surface, skipLinkLabel, contentId: contentIdProp, ref, className, style, children, ...props }: SidebarProviderProps): import("react").JSX.Element;
 //#endregion

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/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;