@ctrl-ui/react 0.9.8 → 0.9.9

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

@@ -2,6 +2,7 @@
 const itemKnobs = [
 	"--cui-item-radius",
 	"--cui-item-hover-background",
+	"--cui-item-current-background",
 	"--cui-item-hover-border-color",
 	"--cui-item-border-width",
 	"--cui-item-active-scale",

package/dist/styles/recipes/empty.css

@@ -33,6 +33,11 @@
     overflow-wrap: anywhere;
   }
 
+  :where([data-control-family="empty"][data-slot="root"][data-variant="outline"]) {
+    --cui-empty-border-color: var(--border);
+    --cui-empty-border-style: dashed;
+  }
+
   :where([data-control-family="empty"][data-slot="media"]) {
     inline-size: var(--cui-empty-media-size);
     block-size: var(--cui-empty-media-size);

package/dist/styles/recipes/item.css

@@ -2,6 +2,7 @@
   :where([data-control-family="item"][data-slot="root"]) {
     --cui-item-radius: var(--radius-lg);
     --cui-item-hover-background: var(--hover-fill);
+    --cui-item-current-background: var(--active-fill);
     --cui-item-hover-border-color: var(--_item-border-color);
     --cui-item-border-width: 0px;
     --cui-item-active-scale: 0.99;
@@ -65,6 +66,10 @@
     --_item-background: oklch(from var(--muted) l c h / 0.5);
   }
 
+  :where([data-control-family="item"][data-slot="root"][aria-current]:not([aria-current="false"])) {
+    --_item-background: var(--cui-item-current-background);
+  }
+
   @media (hover: hover) {
     :where(
         [data-control-family="item"][data-slot="root"]:is(a, button, [href], [role="button"]):not(
@@ -127,6 +132,12 @@
   initial-value: transparent;
 }
 
+@property --cui-item-current-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
 @property --cui-item-hover-border-color {
   syntax: "<color>";
   inherits: true;

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

@@ -1,4 +1,10 @@
 @layer components {
+  :where([data-control-family="popup"][data-popup-part="item"][data-tone="danger"]) {
+    --cui-popup-item-foreground: var(--destructive-text);
+    --cui-popup-item-highlight-background: oklch(from var(--destructive-text) l c h / 0.12);
+    --cui-popup-item-highlight-foreground: var(--destructive-text);
+  }
+
   :where([data-control-family="popup"][data-popup-kind="dialog"][data-slot="title"]),
   :where([data-control-family="popup"][data-popup-kind="alert-dialog"][data-slot="title"]),
   :where([data-control-family="popup"][data-popup-kind="sheet"][data-slot="title"]),
@@ -112,6 +118,32 @@
     padding: calc(var(--spacing) * 4);
   }
 
+  :where([data-control-family="popup"][data-popup-kind="sheet"][data-slot="content"]:has(> [data-slot="body"])) {
+    gap: 0;
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="sheet"][data-slot="body"]) {
+    gap: calc(var(--spacing) * 4);
+    overscroll-behavior: contain;
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="sheet"][data-slot="body"][data-padding="default"]) {
+    padding: calc(var(--spacing) * 4);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="sheet"][data-slot="footer"]) {
+    gap: calc(var(--spacing) * 2);
+    padding: calc(var(--spacing) * 4);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="sheet"][data-slot="header"]:has(+ [data-slot="body"])) {
+    border-block-end: 1px solid var(--cui-popup-separator-color);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="sheet"][data-slot="body"] + [data-slot="footer"]) {
+    border-block-start: 1px solid var(--cui-popup-separator-color);
+  }
+
   :where([data-control-family="popup"][data-popup-kind="popover"][data-slot="header"]) {
     gap: calc(var(--spacing) * 1.5);
     padding-block-end: calc(var(--spacing) * 3);

package/dist/styles/recipes/skeleton.css

@@ -15,6 +15,14 @@
     background-image: var(--cui-skeleton-background-image);
   }
 
+  :where([data-control-family="skeleton"][data-slot="root"][data-shape="circle"]) {
+    --cui-skeleton-radius: 9999px;
+  }
+
+  :where([data-control-family="skeleton"][data-slot="root"][data-shape="panel"]) {
+    --cui-skeleton-radius: var(--radius-panel);
+  }
+
   :where([data-control-family="skeleton"][data-slot="root"][data-variant="shimmer"]) {
     --cui-skeleton-easing: linear;
   }

package/dist/surface-variants.d.ts

@@ -1,5 +1,7 @@
 //#region src/surface-variants.d.ts
 export declare const popupItemStructureClasses = "flex select-none items-center";
+export declare const popupItemTones: readonly ["neutral", "danger"];
+export type PopupItemTone = (typeof popupItemTones)[number];
 export declare const popupParts: readonly ["backdrop", "surface", "list-surface", "list-content", "bar", "item", "navigation-link", "label", "separator", "shortcut"];
 export type PopupPart = (typeof popupParts)[number];
 //#endregion

package/dist/surface-variants.js

@@ -1,5 +1,6 @@
 //#region src/surface-variants.ts
 const popupItemStructureClasses = "flex select-none items-center";
+const popupItemTones = ["neutral", "danger"];
 const popupParts = [
 	"backdrop",
 	"surface",
@@ -13,4 +14,4 @@ const popupParts = [
 	"shortcut"
 ];
 //#endregion
-export { popupItemStructureClasses, popupParts };
+export { popupItemStructureClasses, popupItemTones, popupParts };

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

@@ -1,5 +1,6 @@
 import { ControlledChoice, OpenChangeEventDetails } from "../control-props.js";
 import { PopupKnobStyle } from "../knob-contracts/popup-knobs.js";
+import { PopupItemTone } from "../surface-variants.js";
 import { CSSProperties, ComponentProps, MouseEvent, ReactNode } from "react";
 import { ContextMenu as ContextMenu$1 } from "@base-ui/react/context-menu";
 //#region src/ui/context-menu.d.ts
@@ -23,6 +24,7 @@ export type ContextMenuItemProps = Omit<Omit<ComponentProps<"div">, "onClick">,
 } & {
   disabled?: boolean;
   inset?: boolean;
+  tone?: PopupItemTone;
   onClick?: (event: MouseEvent) => void;
 };
 export type ContextMenuCheckboxItemProps = Omit<Omit<ComponentProps<"div">, "onClick">, "style"> & {
@@ -72,7 +74,7 @@ export declare function ContextMenuTrigger({ className, ...props }: ContextMenuT
 export declare function ContextMenuPortal(props: ComponentProps<typeof ContextMenu$1.Portal>): import("react").JSX.Element;
 export declare function ContextMenuGroup({ className, ...props }: ContextMenuGroupProps): import("react").JSX.Element;
 export declare function ContextMenuContent({ className, children, ...props }: ContextMenuContentProps): import("react").JSX.Element;
-export declare function ContextMenuItem({ className, inset, ...props }: ContextMenuItemProps): import("react").JSX.Element;
+export declare function ContextMenuItem({ className, inset, tone, ...props }: ContextMenuItemProps): import("react").JSX.Element;
 export declare function ContextMenuCheckboxItem({ className, children, ...props }: ContextMenuCheckboxItemProps): import("react").JSX.Element;
 export declare function ContextMenuRadioGroup<TValue extends string = string>({ className, ...props }: ContextMenuRadioGroupProps<TValue>): import("react").JSX.Element;
 export declare function ContextMenuRadioItem({ className, children, value, ...props }: ContextMenuRadioItemProps): import("react").JSX.Element;

package/dist/ui/context-menu.js

@@ -56,13 +56,14 @@ function ContextMenuContent({ className, children, ...props }) {
 		})
 	}) });
 }
-function ContextMenuItem({ className, inset = false, ...props }) {
+function ContextMenuItem({ className, inset = false, tone = "neutral", ...props }) {
 	return /* @__PURE__ */ jsx(ContextMenu$1.Item, {
 		"data-control-ui": "context-menu",
 		"data-popup-kind": "context-menu",
 		"data-slot": "item",
 		"data-control-family": "popup",
 		"data-popup-part": "item",
+		"data-tone": tone,
 		"data-inset": inset || void 0,
 		className: cn(itemClasses, className),
 		...mergeProps(popupItemFocusProps, props)

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

@@ -1,6 +1,7 @@
 import { ControlSize } from "../control-variants.js";
 import { ButtonKnobStyle } from "../knob-contracts/button-knobs.js";
 import { PopupKnobStyle } from "../knob-contracts/popup-knobs.js";
+import { PopupItemTone } from "../surface-variants.js";
 import { CSSProperties, ComponentProps } from "react";
 import { Menu } from "@base-ui/react/menu";
 //#region src/ui/dropdown-menu.d.ts
@@ -19,7 +20,9 @@ export type DropdownMenuTriggerProps = Omit<ComponentProps<"button">, "style"> &
   variant?: DropdownMenuTriggerVariant;
 };
 export type DropdownMenuContentProps = DropdownMenuStyledProps<Menu.Popup.Props> & Pick<Menu.Positioner.Props, "side" | "sideOffset" | "align" | "alignOffset" | "collisionBoundary" | "collisionPadding" | "collisionAvoidance">;
-export type DropdownMenuItemProps = DropdownMenuStyledProps<Menu.Item.Props>;
+export type DropdownMenuItemProps = DropdownMenuStyledProps<Menu.Item.Props> & {
+  tone?: PopupItemTone;
+};
 export type DropdownMenuGroupProps = DropdownMenuStyledProps<Menu.Group.Props>;
 export type DropdownMenuCheckboxItemProps = DropdownMenuStyledProps<Menu.CheckboxItem.Props>;
 export type DropdownMenuRadioGroupProps = DropdownMenuStyledProps<Menu.RadioGroup.Props>;
@@ -37,7 +40,7 @@ export type DropdownMenuLabelProps = Omit<ComponentProps<"div">, "style"> & {
 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 DropdownMenuContent({ className, children, side, sideOffset, align, alignOffset, collisionBoundary, collisionPadding, collisionAvoidance, ...props }: DropdownMenuContentProps): import("react").JSX.Element;
-export declare function DropdownMenuItem({ className, ...props }: DropdownMenuItemProps): 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;
 export declare function DropdownMenuLabel({ className, ...props }: DropdownMenuLabelProps): import("react").JSX.Element;
 export declare function DropdownMenuPortal(props: Menu.Portal.Props): import("react").JSX.Element;

package/dist/ui/dropdown-menu.js

@@ -74,12 +74,13 @@ function DropdownMenuContent({ className, children, side, sideOffset = 6, align
 		})
 	}) });
 }
-function DropdownMenuItem({ className, ...props }) {
+function DropdownMenuItem({ tone = "neutral", className, ...props }) {
 	return /* @__PURE__ */ jsx(Menu.Item, {
 		"data-control-ui": "dropdown-menu",
 		"data-slot": "item",
 		"data-control-family": "popup",
 		"data-popup-part": "item",
+		"data-tone": tone,
 		className: cn(popupItemStructureClasses, className),
 		...mergeProps(popupItemFocusProps, props)
 	});

package/dist/ui/empty.d.ts

@@ -2,8 +2,11 @@ import { RenderProp } from "../control-props.js";
 import { EmptyKnobStyle } from "../knob-contracts/empty-knobs.js";
 import { CSSProperties, ComponentProps } from "react";
 //#region src/ui/empty.d.ts
+export declare const emptyVariants: readonly ["default", "outline"];
+export type EmptyVariant = (typeof emptyVariants)[number];
 export type EmptyProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & EmptyKnobStyle;
+  variant?: EmptyVariant;
 };
 export type EmptyHeaderProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & EmptyKnobStyle;
@@ -21,7 +24,7 @@ export type EmptyTitleProps = Omit<ComponentProps<"div">, "style"> & {
   render?: RenderProp<ComponentProps<"div">>;
   style?: CSSProperties & EmptyKnobStyle;
 };
-export declare function Empty({ className, ...props }: EmptyProps): import("react").JSX.Element;
+export declare function Empty({ variant, className, ...props }: EmptyProps): import("react").JSX.Element;
 export declare function EmptyHeader({ className, ...props }: EmptyHeaderProps): import("react").JSX.Element;
 export declare function EmptyMedia({ className, ...props }: EmptyMediaProps): import("react").JSX.Element;
 export declare function EmptyTitle({ render, ...props }: EmptyTitleProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

package/dist/ui/empty.js

@@ -3,11 +3,13 @@ import { cn } from "../lib/cn.js";
 import { useRender } from "@base-ui/react/use-render";
 import { jsx } from "react/jsx-runtime";
 //#region src/ui/empty.tsx
-function Empty({ className, ...props }) {
+const emptyVariants = ["default", "outline"];
+function Empty({ variant = "default", className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-control-ui": "empty",
 		"data-control-family": "empty",
 		"data-slot": "root",
+		"data-variant": variant,
 		className: cn("flex min-w-0 flex-1 flex-col items-center justify-center", className),
 		...props
 	});
@@ -61,4 +63,4 @@ function EmptyContent({ className, ...props }) {
 	});
 }
 //#endregion
-export { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle };
+export { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, emptyVariants };

package/dist/ui/menubar.d.ts

@@ -1,6 +1,7 @@
 import { OpenChangeEventDetails } from "../control-props.js";
 import { ButtonKnobStyle } from "../knob-contracts/button-knobs.js";
 import { PopupKnobStyle } from "../knob-contracts/popup-knobs.js";
+import { PopupItemTone } from "../surface-variants.js";
 import { CSSProperties, ComponentProps, MouseEvent, ReactNode } from "react";
 //#region src/ui/menubar.d.ts
 export type MenubarProps = Omit<ComponentProps<"div">, "style"> & {
@@ -30,6 +31,7 @@ export type MenubarItemProps = Omit<Omit<ComponentProps<"div">, "onClick">, "sty
   style?: CSSProperties & PopupKnobStyle;
 } & {
   disabled?: boolean;
+  tone?: PopupItemTone;
   onClick?: (event: MouseEvent) => void;
 };
 export type MenubarSeparatorProps = Omit<ComponentProps<"div">, "style"> & {
@@ -63,7 +65,7 @@ export declare function MenubarMenu(props: MenubarMenuProps): import("react").JS
 export declare function MenubarTrigger({ className, ...props }: MenubarTriggerProps): import("react").JSX.Element;
 export declare function MenubarContent({ className, children, ...props }: MenubarContentProps): import("react").JSX.Element;
 export declare function MenubarGroup({ className, ...props }: MenubarGroupProps): import("react").JSX.Element;
-export declare function MenubarItem({ className, ...props }: MenubarItemProps): import("react").JSX.Element;
+export declare function MenubarItem({ tone, className, ...props }: MenubarItemProps): import("react").JSX.Element;
 export declare function MenubarLabel({ className, inset, ...props }: MenubarLabelProps): import("react").JSX.Element;
 export declare function MenubarSeparator({ className, ...props }: MenubarSeparatorProps): import("react").JSX.Element;
 export declare function MenubarShortcut({ className, ...props }: MenubarShortcutProps): import("react").JSX.Element;

package/dist/ui/menubar.js

@@ -69,13 +69,14 @@ function MenubarGroup({ className, ...props }) {
 		...props
 	});
 }
-function MenubarItem({ className, ...props }) {
+function MenubarItem({ tone = "neutral", className, ...props }) {
 	return /* @__PURE__ */ jsx(Menu.Item, {
 		"data-control-ui": "menubar",
 		"data-popup-kind": "menubar",
 		"data-slot": "item",
 		"data-control-family": "popup",
 		"data-popup-part": "item",
+		"data-tone": tone,
 		className: cn(itemClasses, className),
 		...props
 	});

package/dist/ui/sheet.d.ts

@@ -2,6 +2,8 @@ import { PopupKnobStyle } from "../knob-contracts/popup-knobs.js";
 import { CSSProperties, ComponentProps } from "react";
 import { Dialog } from "@base-ui/react/dialog";
 //#region src/ui/sheet.d.ts
+export declare const sheetBodyPaddings: readonly ["default", "none"];
+export type SheetBodyPadding = (typeof sheetBodyPaddings)[number];
 export declare function Sheet(props: ComponentProps<typeof Dialog.Root>): import("react").JSX.Element;
 export declare function SheetClose({ className, ...props }: ComponentProps<typeof Dialog.Close> & {
   style?: CSSProperties & PopupKnobStyle;
@@ -15,6 +17,13 @@ export declare function SheetContent({ className, children, side, ...props }: Sh
 export declare function SheetHeader({ className, ...props }: ComponentProps<"div"> & {
   style?: CSSProperties & PopupKnobStyle;
 }): import("react").JSX.Element;
+export declare function SheetBody({ padding, className, ...props }: ComponentProps<"div"> & {
+  padding?: SheetBodyPadding;
+  style?: CSSProperties & PopupKnobStyle;
+}): import("react").JSX.Element;
+export declare function SheetFooter({ className, ...props }: ComponentProps<"div"> & {
+  style?: CSSProperties & PopupKnobStyle;
+}): import("react").JSX.Element;
 export declare function SheetTitle({ className, ...props }: ComponentProps<typeof Dialog.Title> & {
   style?: CSSProperties & PopupKnobStyle;
 }): import("react").JSX.Element;

package/dist/ui/sheet.js

@@ -5,6 +5,7 @@ import { useSkin } from "../skin-provider.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Dialog } from "@base-ui/react/dialog";
 //#region src/ui/sheet.tsx
+const sheetBodyPaddings = ["default", "none"];
 function Sheet(props) {
 	return /* @__PURE__ */ jsx(Dialog.Root, { ...props });
 }
@@ -54,6 +55,27 @@ function SheetHeader({ className, ...props }) {
 		...props
 	});
 }
+function SheetBody({ padding = "default", className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "sheet",
+		"data-control-family": "popup",
+		"data-popup-kind": "sheet",
+		"data-slot": "body",
+		"data-padding": padding,
+		className: cn("flex min-h-0 flex-1 flex-col overflow-y-auto", className),
+		...props
+	});
+}
+function SheetFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "sheet",
+		"data-control-family": "popup",
+		"data-popup-kind": "sheet",
+		"data-slot": "footer",
+		className: cn("mt-auto flex shrink-0 flex-col sm:flex-row sm:justify-end", className),
+		...props
+	});
+}
 function SheetTitle({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Dialog.Title, {
 		"data-control-ui": "sheet",
@@ -75,4 +97,4 @@ function SheetDescription({ className, ...props }) {
 	});
 }
 //#endregion
-export { Sheet, SheetClose, SheetContent, SheetDescription, SheetHeader, SheetTitle };
+export { Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, sheetBodyPaddings };

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/package.json

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