@ctrl-ui/react 0.8.0 → 0.8.2

package/dist/ui/checkbox-group.js

@@ -1,16 +1,33 @@
 "use client";
 import { cn } from "../lib/cn.js";
-import { jsx } from "react/jsx-runtime";
+import { skinIndicator } from "../skin.js";
+import { TrackHighlight } from "../extensions/track-highlight.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { CheckboxGroup as CheckboxGroup$1 } from "@base-ui/react/checkbox-group";
 //#region src/ui/checkbox-group.tsx
-function CheckboxGroup({ className, orientation = "vertical", ...props }) {
-	return /* @__PURE__ */ jsx(CheckboxGroup$1, {
+function CheckboxGroup({ className, orientation = "vertical", indicator, children, ...props }) {
+	const resolvedIndicator = indicator ?? skinIndicator("checkbox-group") ?? "none";
+	return /* @__PURE__ */ jsxs(CheckboxGroup$1, {
 		"data-control-ui": "checkbox-group",
+		"data-control-family": "checkbox-group",
 		"data-slot": "root",
 		"data-orientation": orientation,
-		className: cn("flex flex-col gap-2.5 data-[orientation=horizontal]:flex-row data-[orientation=horizontal]:gap-4", className),
-		...props
+		"data-track": resolvedIndicator,
+		className: cn("flex flex-col gap-2.5 data-[orientation=horizontal]:flex-row data-[orientation=horizontal]:gap-4 data-[track=hover]:relative data-[track=hover]:isolate data-[track=hover]:gap-0", className),
+		...props,
+		children: [children, resolvedIndicator === "hover" ? /* @__PURE__ */ jsx(TrackHighlight, {}) : null]
+	});
+}
+function CheckboxGroupItem({ className, htmlFor, children, ...props }) {
+	return /* @__PURE__ */ jsx("label", {
+		htmlFor,
+		"data-control-ui": "checkbox-group",
+		"data-slot": "item",
+		"data-track-item": "",
+		className: cn("flex cursor-pointer items-start gap-2.5 rounded-(--radius-control) p-2 text-body has-[[data-disabled]]:cursor-not-allowed", className),
+		...props,
+		children
 	});
 }
 //#endregion
-export { CheckboxGroup };
+export { CheckboxGroup, CheckboxGroupItem };

package/dist/ui/combobox.d.ts

@@ -3,6 +3,7 @@ import { ControlSize } from "../control-variants.js";
 import { PopupKnobStyle } from "../knob-contracts/popup-knobs.js";
 import { FieldKnobStyle } from "../knob-contracts/field-knobs.js";
 import { CSSProperties, ComponentProps, ReactNode } from "react";
+import { Combobox as Combobox$1 } from "@base-ui/react/combobox";
 //#region src/ui/combobox.d.ts
 type ComboboxProps<Value = string> = {
   children?: ReactNode;
@@ -23,6 +24,7 @@ type ComboboxProps<Value = string> = {
   autoHighlight?: boolean;
   itemToStringLabel?: (itemValue: Value) => string;
   isItemEqualToValue?: (itemValue: Value, value: Value) => boolean;
+  filter?: Combobox$1.Root.Props<Value>["filter"];
 };
 type ComboboxInputProps = Omit<Omit<ComponentProps<"input">, "size">, "style"> & {
   style?: CSSProperties & FieldKnobStyle;

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

@@ -1,46 +1,53 @@
-import { OpenChangeEventDetails } from "../control-props.js";
 import { ControlSize } from "../control-variants.js";
 import { ButtonKnobStyle } from "../knob-contracts/button-knobs.js";
 import { PopupKnobStyle } from "../knob-contracts/popup-knobs.js";
-import { CSSProperties, ComponentProps, MouseEvent, ReactNode } from "react";
+import { CSSProperties, ComponentProps } from "react";
 import { Menu } from "@base-ui/react/menu";
 //#region src/ui/dropdown-menu.d.ts
-type DropdownMenuProps = {
-  children?: ReactNode;
-  open?: boolean;
-  defaultOpen?: boolean;
-  onOpenChange?: (open: boolean, eventDetails: OpenChangeEventDetails) => void;
+type DropdownMenuStyledProps<PrimitiveProps> = Omit<PrimitiveProps, "className" | "style"> & {
+  className?: string;
+  style?: CSSProperties & PopupKnobStyle;
 };
+type DropdownMenuProps = Menu.Root.Props;
 declare const dropdownMenuTriggerVariants: readonly ["surface", "ghost"];
 type DropdownMenuTriggerVariant = (typeof dropdownMenuTriggerVariants)[number];
-type DropdownMenuTriggerProps = Omit<ComponentProps<"button">, "style"> & {
+type DropdownMenuTriggerProps = Omit<ComponentProps<"button">, "style"> & Pick<ComponentProps<typeof Menu.Trigger>, "nativeButton" | "render"> & {
   style?: CSSProperties & ButtonKnobStyle;
 } & {
   size?: ControlSize;
   iconOnly?: boolean;
   variant?: DropdownMenuTriggerVariant;
 };
-type DropdownMenuContentProps = Omit<ComponentProps<"div">, "style"> & {
-  style?: CSSProperties & PopupKnobStyle;
-};
-type DropdownMenuItemProps = Omit<Omit<ComponentProps<"div">, "onClick">, "style"> & {
-  style?: CSSProperties & PopupKnobStyle;
-} & {
-  disabled?: boolean;
-  onClick?: (event: MouseEvent) => void;
-};
+type DropdownMenuContentProps = DropdownMenuStyledProps<Menu.Popup.Props> & Pick<Menu.Positioner.Props, "side" | "sideOffset" | "align" | "alignOffset" | "collisionBoundary" | "collisionPadding" | "collisionAvoidance">;
+type DropdownMenuItemProps = DropdownMenuStyledProps<Menu.Item.Props>;
+type DropdownMenuGroupProps = DropdownMenuStyledProps<Menu.Group.Props>;
+type DropdownMenuCheckboxItemProps = DropdownMenuStyledProps<Menu.CheckboxItem.Props>;
+type DropdownMenuRadioGroupProps = DropdownMenuStyledProps<Menu.RadioGroup.Props>;
+type DropdownMenuRadioItemProps = DropdownMenuStyledProps<Menu.RadioItem.Props>;
+type DropdownMenuSubProps = Menu.SubmenuRoot.Props;
+type DropdownMenuSubTriggerProps = DropdownMenuStyledProps<Menu.SubmenuTrigger.Props>;
+type DropdownMenuSubContentProps = DropdownMenuContentProps;
+type DropdownMenuShortcutProps = DropdownMenuStyledProps<ComponentProps<"span">>;
 type DropdownMenuSeparatorProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & PopupKnobStyle;
 };
 type DropdownMenuLabelProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & PopupKnobStyle;
 };
-type RefinedDropdownMenuTriggerProps = DropdownMenuTriggerProps & Pick<ComponentProps<typeof Menu.Trigger>, "nativeButton" | "render">;
 declare function DropdownMenu({ children, ...props }: DropdownMenuProps): import("react").JSX.Element;
-declare function DropdownMenuTrigger({ size, iconOnly, variant, className, children, disabled, ...props }: RefinedDropdownMenuTriggerProps): import("react").JSX.Element;
-declare function DropdownMenuContent({ className, children, ...props }: DropdownMenuContentProps): import("react").JSX.Element;
+declare function DropdownMenuTrigger({ size, iconOnly, variant, className, children, disabled, ...props }: DropdownMenuTriggerProps): import("react").JSX.Element;
+declare function DropdownMenuContent({ className, children, side, sideOffset, align, alignOffset, collisionBoundary, collisionPadding, collisionAvoidance, ...props }: DropdownMenuContentProps): import("react").JSX.Element;
 declare function DropdownMenuItem({ className, ...props }: DropdownMenuItemProps): import("react").JSX.Element;
 declare function DropdownMenuSeparator({ className, ...props }: DropdownMenuSeparatorProps): import("react").JSX.Element;
 declare function DropdownMenuLabel({ className, ...props }: DropdownMenuLabelProps): import("react").JSX.Element;
+declare function DropdownMenuPortal(props: Menu.Portal.Props): import("react").JSX.Element;
+declare function DropdownMenuGroup(props: DropdownMenuGroupProps): import("react").JSX.Element;
+declare function DropdownMenuCheckboxItem({ className, children, ...props }: DropdownMenuCheckboxItemProps): import("react").JSX.Element;
+declare function DropdownMenuRadioGroup(props: DropdownMenuRadioGroupProps): import("react").JSX.Element;
+declare function DropdownMenuRadioItem({ className, children, ...props }: DropdownMenuRadioItemProps): import("react").JSX.Element;
+declare function DropdownMenuSub(props: DropdownMenuSubProps): import("react").JSX.Element;
+declare function DropdownMenuSubTrigger({ className, children, ...props }: DropdownMenuSubTriggerProps): import("react").JSX.Element;
+declare function DropdownMenuSubContent(props: DropdownMenuSubContentProps): import("react").JSX.Element;
+declare function DropdownMenuShortcut(props: DropdownMenuShortcutProps): import("react").JSX.Element;
 //#endregion
-export { DropdownMenu, DropdownMenuContent, DropdownMenuContentProps, DropdownMenuItem, DropdownMenuItemProps, DropdownMenuLabel, DropdownMenuLabelProps, DropdownMenuProps, DropdownMenuSeparator, DropdownMenuSeparatorProps, DropdownMenuTrigger, DropdownMenuTriggerProps, DropdownMenuTriggerVariant, dropdownMenuTriggerVariants };
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuCheckboxItemProps, DropdownMenuContent, DropdownMenuContentProps, DropdownMenuGroup, DropdownMenuGroupProps, DropdownMenuItem, DropdownMenuItemProps, DropdownMenuLabel, DropdownMenuLabelProps, DropdownMenuPortal, DropdownMenuProps, DropdownMenuRadioGroup, DropdownMenuRadioGroupProps, DropdownMenuRadioItem, DropdownMenuRadioItemProps, DropdownMenuSeparator, DropdownMenuSeparatorProps, DropdownMenuShortcut, DropdownMenuShortcutProps, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubContentProps, DropdownMenuSubProps, DropdownMenuSubTrigger, DropdownMenuSubTriggerProps, DropdownMenuTrigger, DropdownMenuTriggerProps, DropdownMenuTriggerVariant, dropdownMenuTriggerVariants };

package/dist/ui/dropdown-menu.js

@@ -2,7 +2,7 @@
 import { cn } from "../lib/cn.js";
 import { skinEffects, skinId } from "../skin.js";
 import { popupItemStructureClasses } from "../surface-variants.js";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Menu } from "@base-ui/react/menu";
 //#region src/ui/dropdown-menu.tsx
 const dropdownMenuTriggerVariants = ["surface", "ghost"];
@@ -26,22 +26,20 @@ function DropdownMenuTrigger({ size = "sm", iconOnly = false, variant = "surface
 		className: cn("relative isolate inline-flex shrink-0 items-center justify-center overflow-visible", className),
 		disabled,
 		...props,
-		children: /* @__PURE__ */ jsx("span", {
-			"data-control-ui": "button",
-			"data-control-family": "button",
-			"data-slot": "content",
-			className: "relative z-[1] inline-flex items-center justify-center gap-[inherit]",
-			children
-		})
+		children
 	});
 }
-function DropdownMenuContent({ className, children, ...props }) {
+function DropdownMenuContent({ className, children, side = "bottom", sideOffset = 6, align = "start", alignOffset, collisionBoundary, collisionPadding, collisionAvoidance, ...props }) {
 	return /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, {
 		"data-skin": skinId(),
 		"data-effects": skinEffects(),
-		side: "bottom",
-		align: "start",
-		sideOffset: 6,
+		side,
+		align,
+		sideOffset,
+		alignOffset,
+		collisionBoundary,
+		collisionPadding,
+		collisionAvoidance,
 		className: "z-[80]",
 		children: /* @__PURE__ */ jsx(Menu.Popup, {
 			"data-control-ui": "dropdown-menu",
@@ -85,5 +83,106 @@ function DropdownMenuLabel({ className, ...props }) {
 		...props
 	});
 }
+function DropdownMenuPortal(props) {
+	return /* @__PURE__ */ jsx(Menu.Portal, { ...props });
+}
+function DropdownMenuGroup(props) {
+	return /* @__PURE__ */ jsx(Menu.Group, {
+		"data-control-ui": "dropdown-menu",
+		"data-control-family": "popup",
+		"data-slot": "group",
+		...props
+	});
+}
+function DropdownMenuCheckboxItem({ className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Menu.CheckboxItem, {
+		"data-control-ui": "dropdown-menu",
+		"data-control-family": "popup",
+		"data-popup-part": "item",
+		"data-slot": "checkbox-item",
+		className: cn("relative", popupItemStructureClasses, className),
+		...props,
+		children: [/* @__PURE__ */ jsx(Menu.CheckboxItemIndicator, {
+			className: "pointer-events-none absolute start-2 flex size-4 items-center justify-center",
+			children: /* @__PURE__ */ jsx(DropdownMenuCheck, {})
+		}), children]
+	});
+}
+function DropdownMenuRadioGroup(props) {
+	return /* @__PURE__ */ jsx(Menu.RadioGroup, {
+		"data-control-ui": "dropdown-menu",
+		"data-control-family": "popup",
+		"data-slot": "radio-group",
+		...props
+	});
+}
+function DropdownMenuRadioItem({ className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Menu.RadioItem, {
+		"data-control-ui": "dropdown-menu",
+		"data-control-family": "popup",
+		"data-popup-part": "item",
+		"data-slot": "radio-item",
+		className: cn("relative", popupItemStructureClasses, className),
+		...props,
+		children: [/* @__PURE__ */ jsx(Menu.RadioItemIndicator, {
+			className: "pointer-events-none absolute start-2 flex size-4 items-center justify-center",
+			children: /* @__PURE__ */ jsx(DropdownMenuCheck, {})
+		}), children]
+	});
+}
+function DropdownMenuCheck() {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 12 12",
+		className: "size-3",
+		"aria-hidden": "true",
+		fill: "none",
+		children: /* @__PURE__ */ jsx("path", {
+			d: "M2.5 6.5 5 9l4.5-5",
+			stroke: "currentColor",
+			strokeWidth: "1.6",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		})
+	});
+}
+function DropdownMenuSub(props) {
+	return /* @__PURE__ */ jsx(Menu.SubmenuRoot, { ...props });
+}
+function DropdownMenuSubTrigger({ className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Menu.SubmenuTrigger, {
+		"data-control-ui": "dropdown-menu",
+		"data-control-family": "popup",
+		"data-popup-part": "item",
+		"data-slot": "sub-trigger",
+		className: cn(popupItemStructureClasses, className),
+		...props,
+		children: [children, /* @__PURE__ */ jsx("span", {
+			"data-control-ui": "dropdown-menu",
+			"data-control-family": "popup",
+			"data-slot": "sub-trigger-indicator",
+			"aria-hidden": "true",
+			children: "›"
+		})]
+	});
+}
+function DropdownMenuSubContent(props) {
+	return /* @__PURE__ */ jsx(DropdownMenuContent, {
+		"data-control-ui": "dropdown-menu",
+		"data-slot": "sub-content",
+		side: "right",
+		sideOffset: 0,
+		alignOffset: -3,
+		...props
+	});
+}
+function DropdownMenuShortcut(props) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-control-ui": "dropdown-menu",
+		"data-control-family": "popup",
+		"data-popup-part": "shortcut",
+		"data-slot": "shortcut",
+		...props
+	});
+}
 //#endregion
-export { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, dropdownMenuTriggerVariants };
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, dropdownMenuTriggerVariants };

package/dist/ui/progressive-blur.d.ts

@@ -0,0 +1,12 @@
+import { ProgressiveBlurKnobStyle } from "../knob-contracts/progressive-blur-knobs.js";
+import { CSSProperties, ComponentProps } from "react";
+//#region src/ui/progressive-blur.d.ts
+type ProgressiveBlurSide = "top" | "bottom" | "inline-start" | "inline-end";
+type ProgressiveBlurProps = Omit<ComponentProps<"div">, "children" | "dangerouslySetInnerHTML" | "style" | "tabIndex"> & {
+  side?: ProgressiveBlurSide;
+  visible?: boolean;
+  style?: CSSProperties & ProgressiveBlurKnobStyle;
+};
+declare function ProgressiveBlur({ side, visible, ...props }: ProgressiveBlurProps): import("react").JSX.Element;
+//#endregion
+export { ProgressiveBlur, ProgressiveBlurProps, ProgressiveBlurSide };

package/dist/ui/progressive-blur.js

@@ -0,0 +1,47 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/ui/progressive-blur.tsx
+function ProgressiveBlur({ side = "bottom", visible = true, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		...props,
+		"data-control-ui": "progressive-blur",
+		"data-control-family": "progressive-blur",
+		"data-slot": "root",
+		"data-side": side,
+		"data-visible": visible || void 0,
+		"aria-hidden": "true",
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				"data-control-ui": "progressive-blur",
+				"data-control-family": "progressive-blur",
+				"data-slot": "layer"
+			}),
+			/* @__PURE__ */ jsx("span", {
+				"data-control-ui": "progressive-blur",
+				"data-control-family": "progressive-blur",
+				"data-slot": "layer"
+			}),
+			/* @__PURE__ */ jsx("span", {
+				"data-control-ui": "progressive-blur",
+				"data-control-family": "progressive-blur",
+				"data-slot": "layer"
+			}),
+			/* @__PURE__ */ jsx("span", {
+				"data-control-ui": "progressive-blur",
+				"data-control-family": "progressive-blur",
+				"data-slot": "layer"
+			}),
+			/* @__PURE__ */ jsx("span", {
+				"data-control-ui": "progressive-blur",
+				"data-control-family": "progressive-blur",
+				"data-slot": "layer"
+			}),
+			/* @__PURE__ */ jsx("span", {
+				"data-control-ui": "progressive-blur",
+				"data-control-family": "progressive-blur",
+				"data-slot": "layer"
+			})
+		]
+	});
+}
+//#endregion
+export { ProgressiveBlur };

package/dist/ui/scroll-area.d.ts

@@ -1,4 +1,5 @@
 import { ScrollAreaKnobStyle } from "../knob-contracts/scroll-area-knobs.js";
+import { ProgressiveBlurProps } from "./progressive-blur.js";
 import { CSSProperties, ComponentProps, Ref } from "react";
 //#region src/ui/scroll-area.d.ts
 declare const scrollAreaScrollbarVisibilities: readonly ["scroll", "hover", "always"];
@@ -17,9 +18,11 @@ type ScrollAreaProps = Omit<ComponentProps<"div">, "style"> & {
   viewportRef?: Ref<HTMLDivElement>;
   maxHeight?: string;
   mask?: boolean;
+  blur?: boolean;
+  blurProps?: Pick<ProgressiveBlurProps, "style">;
   lockAxis?: ScrollAreaLockAxis;
   scrollbarVisibility?: ScrollAreaScrollbarVisibility;
 };
-declare function ScrollArea({ className, viewportClassName, viewportProps, viewportRef, maxHeight, mask, lockAxis, scrollbarVisibility, children, style, ...props }: ScrollAreaProps): import("react").JSX.Element;
+declare function ScrollArea({ className, viewportClassName, viewportProps, viewportRef, maxHeight, mask, blur, blurProps, lockAxis, scrollbarVisibility, children, style, ...props }: ScrollAreaProps): import("react").JSX.Element;
 //#endregion
 export { ScrollArea, ScrollAreaLockAxis, ScrollAreaProps, ScrollAreaScrollbarVisibility, ScrollAreaViewportProps, scrollAreaScrollbarVisibilities };

package/dist/ui/scroll-area.js

@@ -1,5 +1,6 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { ProgressiveBlur } from "./progressive-blur.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ScrollArea as ScrollArea$1 } from "@base-ui/react/scroll-area";
 //#region src/ui/scroll-area.tsx
@@ -8,8 +9,6 @@ const scrollAreaScrollbarVisibilities = [
 	"hover",
 	"always"
 ];
-const maskXOverflowClasses = cn("data-[overflow-x-start]:mask-l-from-[calc(100%_-_var(--scroll-fade-size))]", "data-[overflow-x-end]:mask-r-from-[calc(100%_-_var(--scroll-fade-size))]");
-const maskYOverflowClasses = cn("data-[overflow-y-start]:mask-t-from-[calc(100%_-_var(--scroll-fade-size))]", "data-[overflow-y-end]:mask-b-from-[calc(100%_-_var(--scroll-fade-size))]");
 function Scrollbar({ orientation, visibility, thumbStyle }) {
 	return /* @__PURE__ */ jsx(ScrollArea$1.Scrollbar, {
 		orientation,
@@ -35,7 +34,7 @@ function viewportStyle(maxHeight, lockX, lockY) {
 		...lockY ? { overflowY: "hidden" } : {}
 	};
 }
-function ScrollArea({ className, viewportClassName, viewportProps, viewportRef, maxHeight, mask = true, lockAxis, scrollbarVisibility = "scroll", children, style, ...props }) {
+function ScrollArea({ className, viewportClassName, viewportProps, viewportRef, maxHeight, mask = true, blur = false, blurProps, lockAxis, scrollbarVisibility = "scroll", children, style, ...props }) {
 	const lockX = lockAxis === "x" || lockAxis === "both";
 	const lockY = lockAxis === "y" || lockAxis === "both";
 	const resolvedViewportStyle = viewportStyle(maxHeight, lockX, lockY);
@@ -51,6 +50,9 @@ function ScrollArea({ className, viewportClassName, viewportProps, viewportRef,
 		"data-control-ui": "scroll-area",
 		"data-control-family": "scroll-area",
 		"data-slot": "root",
+		"data-mask": mask || void 0,
+		"data-blur": blur || void 0,
+		"data-lock-axis": lockAxis,
 		className: cn("relative overflow-hidden", className),
 		style,
 		children: [
@@ -59,8 +61,9 @@ function ScrollArea({ className, viewportClassName, viewportProps, viewportRef,
 				"data-control-family": "scroll-area",
 				"data-slot": "viewport",
 				...resolvedViewportProps,
+				"data-scroll-area-viewport": "",
 				ref: viewportRef,
-				className: cn("h-full w-full", mask && !lockX && maskXOverflowClasses, mask && !lockY && maskYOverflowClasses, viewportClassName),
+				className: cn("h-full w-full", viewportClassName),
 				style: mergedViewportStyle,
 				children: /* @__PURE__ */ jsx(ScrollArea$1.Content, {
 					"data-control-ui": "scroll-area",
@@ -70,6 +73,26 @@ function ScrollArea({ className, viewportClassName, viewportProps, viewportRef,
 					children
 				})
 			}),
+			blur && !lockY && /* @__PURE__ */ jsx(ProgressiveBlur, {
+				...blurProps,
+				side: "top",
+				visible: false
+			}),
+			blur && !lockY && /* @__PURE__ */ jsx(ProgressiveBlur, {
+				...blurProps,
+				side: "bottom",
+				visible: false
+			}),
+			blur && !lockX && /* @__PURE__ */ jsx(ProgressiveBlur, {
+				...blurProps,
+				side: "inline-start",
+				visible: false
+			}),
+			blur && !lockX && /* @__PURE__ */ jsx(ProgressiveBlur, {
+				...blurProps,
+				side: "inline-end",
+				visible: false
+			}),
 			!lockY && /* @__PURE__ */ jsx(Scrollbar, {
 				orientation: "vertical",
 				visibility: scrollbarVisibility,

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

@@ -0,0 +1,49 @@
+import { HoverIndicator, RenderProp, SelectionIndicator } from "../control-props.js";
+import { SidebarKnobStyle } from "../knob-contracts/sidebar-knobs.js";
+import { CSSProperties, ComponentProps, ReactNode } from "react";
+//#region src/ui/sidebar-menu.d.ts
+declare const sidebarMenuButtonVariants: readonly ["default", "outline"];
+type SidebarMenuButtonVariant = (typeof sidebarMenuButtonVariants)[number];
+declare const sidebarMenuButtonSizes: readonly ["default", "sm", "lg"];
+type SidebarMenuButtonSize = (typeof sidebarMenuButtonSizes)[number];
+type SidebarGroupLabelProps = Omit<ComponentProps<"div">, "style"> & {
+  style?: CSSProperties & SidebarKnobStyle;
+} & {
+  render?: RenderProp<ComponentProps<"div">>;
+};
+type SidebarGroupContentProps = Omit<ComponentProps<"div">, "style"> & {
+  style?: CSSProperties & SidebarKnobStyle;
+};
+type SidebarMenuActionProps = Omit<ComponentProps<"button">, "style"> & {
+  render?: RenderProp<ComponentProps<"button">>;
+  showOnHover?: boolean;
+  style?: CSSProperties & SidebarKnobStyle;
+};
+declare function SidebarGroupContent({ className, ...props }: SidebarGroupContentProps): import("react").JSX.Element;
+declare function SidebarMenuAction({ className, render, showOnHover, children, ...props }: SidebarMenuActionProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+type SidebarMenuButtonProps = Omit<ComponentProps<"button">, "style"> & {
+  style?: CSSProperties & SidebarKnobStyle;
+} & {
+  render?: RenderProp<ComponentProps<"button">>;
+  isActive?: boolean;
+  tooltip?: ReactNode;
+  variant?: SidebarMenuButtonVariant;
+  size?: SidebarMenuButtonSize;
+};
+declare function SidebarGroup({ className, ...props }: ComponentProps<"div"> & {
+  style?: CSSProperties & SidebarKnobStyle;
+}): import("react").JSX.Element;
+declare function SidebarGroupLabel({ className, render, children, ...props }: SidebarGroupLabelProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+type SidebarSelectionIndicator = SelectionIndicator | HoverIndicator;
+declare function SidebarMenu({ className, indicator, style, children, ...props }: ComponentProps<"ul"> & {
+  indicator?: SidebarSelectionIndicator;
+} & {
+  style?: CSSProperties & SidebarKnobStyle;
+}): import("react").JSX.Element;
+declare function SidebarMenuItem({ className, ...props }: ComponentProps<"li"> & {
+  style?: CSSProperties & SidebarKnobStyle;
+}): import("react").JSX.Element;
+declare function SidebarMenuButton({ render, isActive, variant, size, tooltip, className, children, ...props }: SidebarMenuButtonProps): import("react").JSX.Element;
+declare function SidebarMenuSub({ className, ...props }: ComponentProps<typeof SidebarMenu>): import("react").JSX.Element;
+//#endregion
+export { SidebarGroup, SidebarGroupContent, SidebarGroupContentProps, SidebarGroupLabel, SidebarGroupLabelProps, SidebarMenu, SidebarMenuAction, SidebarMenuActionProps, SidebarMenuButton, SidebarMenuButtonProps, SidebarMenuButtonSize, SidebarMenuButtonVariant, SidebarMenuItem, SidebarMenuSub, SidebarSelectionIndicator, sidebarMenuButtonSizes, sidebarMenuButtonVariants };

package/dist/ui/sidebar-menu.js

@@ -0,0 +1,160 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { skinIndicator } from "../skin.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.js";
+import { useSidebar } from "./sidebar-provider.js";
+import { TrackHighlight } from "../extensions/track-highlight.js";
+import { createContext, useContext } from "react";
+import { useRender } from "@base-ui/react/use-render";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/ui/sidebar-menu.tsx
+const sidebarMenuButtonVariants = ["default", "outline"];
+const sidebarMenuButtonSizes = [
+	"default",
+	"sm",
+	"lg"
+];
+function SidebarGroupContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "sidebar",
+		"data-control-family": "sidebar",
+		"data-slot": "group-content",
+		className: cn("w-full", className),
+		...props
+	});
+}
+function SidebarMenuAction({ className, render, showOnHover = false, children, ...props }) {
+	return useRender({
+		defaultTagName: "button",
+		render,
+		props: {
+			type: "button",
+			...props,
+			"data-control-ui": "sidebar",
+			"data-control-family": "sidebar",
+			"data-slot": "menu-action",
+			"data-show-on-hover": showOnHover || void 0,
+			className: cn("end-1 flex size-5 items-center justify-center -translate-y-1/2 disabled:pointer-events-none group-data-[collapsible=icon]:hidden [&>svg]:size-4 [&>svg]:shrink-0", className, "absolute"),
+			children
+		}
+	});
+}
+function SidebarGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "sidebar",
+		"data-control-family": "sidebar",
+		"data-slot": "group",
+		className: cn("relative flex w-full min-w-0 flex-col", className),
+		...props
+	});
+}
+function SidebarGroupLabel({ className, render, children, ...props }) {
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: {
+			...props,
+			"data-control-ui": "sidebar",
+			"data-control-family": "sidebar",
+			"data-slot": "group-label",
+			className: cn("flex h-[var(--control-h-sm)] shrink-0 items-center [&>svg]:size-4 [&>svg]:shrink-0", "group-data-[collapsible=icon]:invisible group-data-[collapsible=icon]:-mt-[var(--control-h-sm)] group-data-[collapsible=icon]:opacity-0", className),
+			children
+		}
+	});
+}
+const SidebarMenuContext = createContext("none");
+function SidebarMenu({ className, indicator, style, children, ...props }) {
+	const resolvedIndicator = indicator ?? skinIndicator("sidebar") ?? "none";
+	const hasHighlight = resolvedIndicator !== "none";
+	const list = /* @__PURE__ */ jsx("ul", {
+		"data-control-ui": "sidebar",
+		"data-control-family": "sidebar",
+		"data-slot": "menu",
+		"data-indicator": resolvedIndicator,
+		className: cn("flex min-w-0 flex-col", hasHighlight ? void 0 : className),
+		style: hasHighlight ? void 0 : style,
+		...props,
+		children: /* @__PURE__ */ jsx(SidebarMenuContext.Provider, {
+			value: resolvedIndicator,
+			children
+		})
+	});
+	if (!hasHighlight) return list;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-control-ui": "sidebar",
+		"data-control-family": "sidebar",
+		"data-slot": "menu-track",
+		"data-indicator": resolvedIndicator,
+		"data-track": resolvedIndicator,
+		className: cn("relative isolate", className),
+		style,
+		children: [list, /* @__PURE__ */ jsx(TrackHighlight, {})]
+	});
+}
+function SidebarMenuItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx("li", {
+		"data-control-ui": "sidebar",
+		"data-control-family": "sidebar",
+		"data-slot": "menu-item",
+		className: cn("group/menu-item relative", className),
+		...props
+	});
+}
+const sidebarMenuButtonClasses = cva("peer/menu-button flex w-full items-center overflow-hidden text-start group-data-[collapsible=icon]:px-0! disabled:pointer-events-none aria-disabled:pointer-events-none [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0", {
+	variants: {
+		variant: {
+			default: null,
+			outline: null
+		},
+		size: {
+			default: "group-data-[collapsible=icon]:size-[var(--control-h-md)]!",
+			sm: "group-data-[collapsible=icon]:size-[var(--control-h-sm)]!",
+			lg: "group-data-[collapsible=icon]:size-[var(--control-h-lg)]!"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
+});
+function SidebarMenuButton({ render, isActive = false, variant = "default", size = "default", tooltip, className, children, ...props }) {
+	const { isMobile, state } = useSidebar();
+	const indicator = useContext(SidebarMenuContext);
+	const button = useRender({
+		defaultTagName: "button",
+		render,
+		props: {
+			type: "button",
+			...props,
+			"data-control-ui": "sidebar",
+			"data-control-family": "sidebar",
+			"data-slot": "menu-button",
+			"data-size": size,
+			"data-variant": variant,
+			"data-active": isActive || void 0,
+			"data-track-item": indicator !== "none" ? "" : void 0,
+			className: cn(sidebarMenuButtonClasses({
+				variant,
+				size
+			}), className),
+			children
+		}
+	});
+	if (!tooltip) return button;
+	return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: button }), /* @__PURE__ */ jsx(TooltipContent, {
+		side: "right",
+		align: "center",
+		hidden: state !== "collapsed" || isMobile,
+		children: tooltip
+	})] });
+}
+function SidebarMenuSub({ className, ...props }) {
+	return /* @__PURE__ */ jsx(SidebarMenu, {
+		"data-submenu": "",
+		className: cn("group-data-[collapsible=icon]:hidden", className),
+		...props
+	});
+}
+//#endregion
+export { SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarMenu, SidebarMenuAction, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, sidebarMenuButtonSizes, sidebarMenuButtonVariants };