@ctrl-ui/react 0.9.6 → 0.9.9

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/alert-dialog.js

@@ -53,7 +53,7 @@ function AlertDialogContent({ className, children, ...props }) {
 		"data-control-family": "popup",
 		"data-popup-part": "surface",
 		"data-surface": "modal",
-		className: cn("fixed left-1/2 top-[12vh] z-(--z-modal) grid w-[calc(100%-2rem)] max-w-md -translate-x-1/2", className),
+		className: cn("fixed left-1/2 top-[12vh] z-(--z-modal) grid w-[calc(100%-2rem)] -translate-x-1/2", className),
 		...props,
 		children
 	})] });

package/dist/ui/badge.js

@@ -27,7 +27,7 @@ function Badge({ variant = "default", size = "md", color, render, className, chi
 			"data-variant": variant,
 			"data-size": size,
 			"data-color": resolvedColor,
-			className: cn("inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap border font-medium [&>svg]:pointer-events-none [&>svg]:size-3", className),
+			className: cn("inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap [&>svg]:pointer-events-none [&>svg]:size-3", className),
 			children
 		}
 	});

package/dist/ui/calendar.js

@@ -1,5 +1,6 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { useSkin } from "../skin-provider.js";
 import { useEffect, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 import { CaptionLabel, Day, DayPicker, Month, MonthCaption, MonthGrid, Months, Nav, Weekday } from "react-day-picker";
@@ -12,7 +13,8 @@ const chevronPathByOrientation = {
 	up: "M3 10 8 5.5 13 10",
 	down: "M3 6 8 10.5 13 6"
 };
-function Calendar({ className, showOutsideDays = true, style, ...props }) {
+function Calendar({ className, showOutsideDays, style, ...props }) {
+	const skin = useSkin();
 	return /* @__PURE__ */ jsx("div", {
 		"data-control-ui": "calendar",
 		"data-control-family": "calendar",
@@ -20,7 +22,7 @@ function Calendar({ className, showOutsideDays = true, style, ...props }) {
 		className: cn("w-fit", className),
 		style,
 		children: /* @__PURE__ */ jsx(DayPicker, {
-			showOutsideDays,
+			showOutsideDays: showOutsideDays ?? skin.calendarShowOutsideDays ?? true,
 			components: {
 				Chevron: CalendarChevron,
 				Months: CalendarMonths,
@@ -111,12 +113,15 @@ function CalendarWeekday({ className, ...props }) {
 		...props
 	});
 }
-function CalendarDay({ className, ...props }) {
+function CalendarDay({ className, day, ...props }) {
+	const dayOfWeek = day.date.getDay();
 	return /* @__PURE__ */ jsx(Day, {
 		"data-control-ui": "calendar",
 		"data-control-family": "calendar",
 		"data-slot": "day-cell",
-		className: cn("p-0 align-middle", className),
+		"data-weekend": dayOfWeek === 0 || dayOfWeek === 6 ? true : void 0,
+		className: cn("align-middle", className),
+		day,
 		...props
 	});
 }

package/dist/ui/card.d.ts

@@ -3,10 +3,12 @@ import { CardKnobStyle } from "../knob-contracts/card-knobs.js";
 import { CSSProperties, ComponentProps } from "react";
 //#region src/ui/card.d.ts
 export type CardVariant = "default" | "sectioned";
+export type CardSize = "default" | "sm";
 export type CardProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & CardKnobStyle;
 } & {
   variant?: CardVariant;
+  size?: CardSize;
 };
 export type CardHeaderProps = ComponentProps<"div"> & {
   style?: CSSProperties & CardKnobStyle;
@@ -27,7 +29,7 @@ export type CardContentProps = ComponentProps<"div"> & {
 export type CardFooterProps = ComponentProps<"div"> & {
   style?: CSSProperties & CardKnobStyle;
 };
-export declare function Card({ variant, className, ...props }: CardProps): import("react").JSX.Element;
+export declare function Card({ variant, size, className, ...props }: CardProps): import("react").JSX.Element;
 export declare function CardHeader({ className, ...props }: CardHeaderProps): import("react").JSX.Element;
 export declare function CardTitle({ render, ...props }: CardTitleProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export declare function CardDescription({ className, ...props }: CardDescriptionProps): import("react").JSX.Element;

package/dist/ui/card.js

@@ -3,13 +3,14 @@ import { cn } from "../lib/cn.js";
 import { useRender } from "@base-ui/react/use-render";
 import { jsx } from "react/jsx-runtime";
 //#region src/ui/card.tsx
-function Card({ variant = "default", className, ...props }) {
+function Card({ variant = "default", size = "default", className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-control-ui": "card",
 		"data-control-family": "card",
 		"data-slot": "root",
 		"data-surface": "panel",
 		"data-variant": variant,
+		"data-size": size,
 		className: cn("flex flex-col", className),
 		...props
 	});

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/dialog.js

@@ -54,7 +54,7 @@ function DialogContent({ className, children, showCloseButton = true, closeLabel
 		"data-control-family": "popup",
 		"data-popup-part": "surface",
 		"data-surface": "modal",
-		className: cn("fixed left-1/2 top-[12vh] z-(--z-modal) grid w-[calc(100%-2rem)] max-w-lg -translate-x-1/2", className),
+		className: cn("fixed left-1/2 top-[12vh] z-(--z-modal) grid w-[calc(100%-2rem)] -translate-x-1/2", className),
 		...props,
 		children: [
 			skinAdornment(skin, "dialog", "titlebar", {}),

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>;
@@ -35,9 +38,9 @@ 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, children, disabled, ...props }: DropdownMenuTriggerProps): 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

@@ -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 }) {
@@ -57,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/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/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/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/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/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/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/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