@ctrl-ui/react 0.8.0 → 0.8.1

package/dist/styles/recipes/track-highlight.css

@@ -4,7 +4,7 @@
     --_track-highlight-opacity: 0;
     border-radius: var(--cui-track-highlight-radius);
     opacity: var(--_track-highlight-opacity);
-    transition-property: top, left, right, bottom, opacity, background-color, box-shadow;
+    transition-property: top, left, right, bottom, width, height, opacity, background-color, box-shadow;
     transition-duration: var(--cui-track-highlight-transition-duration);
     transition-timing-function: var(--ease-emphasized);
   }
@@ -22,7 +22,8 @@
       var(--cui-track-highlight-shadow);
   }
 
-  :where([data-control-family="track-highlight"][data-slot="root"][data-hover]) {
+  :where([data-control-family="track-highlight"][data-slot="root"][data-hover]),
+  :where([data-track="hover"] > [data-control-family="track-highlight"][data-slot="root"]) {
     --cui-track-highlight-background: var(--cui-track-highlight-hover-background);
     --cui-track-highlight-ring-color: transparent;
     --cui-track-highlight-shadow: none;
@@ -36,6 +37,129 @@
   :where([data-control-family="track-highlight"][data-slot="hover"][data-visible]) {
     --_track-highlight-opacity: 1;
   }
+
+  :where(
+    [data-track="hover"]:is([data-control-family="button-group"], [data-control-family="button"][data-slot="group"])
+      > [data-control-family="track-highlight"]
+  ) {
+    --cui-track-highlight-hover-background: oklch(from var(--foreground) l c h / 0.06);
+  }
+
+  :where([data-track]:has(> [data-control-family="button"][data-track-item]) > [data-control-family="track-highlight"]),
+  :where(
+    [data-track]:is(
+        [data-control-family="button-group"],
+        [data-control-family="button"][data-slot="group"],
+        [data-control-family="checkbox-group"]
+      )
+      > [data-control-family="track-highlight"]
+  ) {
+    --cui-track-highlight-radius: var(--radius-control);
+  }
+
+  @supports ((anchor-name: --cui-track) and (anchor-scope: --cui-track)) {
+    :where([data-track]:has(> [data-control-family="track-highlight"])) {
+      anchor-scope: --cui-track-active, --cui-track-hover, --cui-track-focus;
+      --_track-anchor: --cui-track-active;
+      --_track-display: none;
+    }
+
+    :where(
+        [data-track="slide"]:has(> [data-control-family="track-highlight"]):has(
+          [data-track-item][data-active="true"]:not(:disabled, [aria-disabled="true"], [data-disabled])
+        )
+      ) {
+      --_track-display: block;
+    }
+
+    :where([data-track="hover"]:has(> [data-control-family="track-highlight"])) {
+      --_track-anchor: --cui-track-idle;
+    }
+
+    :where(
+        [data-track]:has(> [data-control-family="track-highlight"])
+          [data-track-item][data-active="true"]:not(:disabled, [aria-disabled="true"], [data-disabled])
+      ) {
+      anchor-name: --cui-track-active;
+    }
+
+    :where([data-track] > [data-control-family="track-highlight"][data-positioning="anchor"]:not([data-measured])) {
+      display: var(--_track-display);
+      position-anchor: var(--_track-anchor);
+      top: anchor(top, 0px);
+      width: anchor-size(width, 0px);
+      height: anchor-size(height, 0px);
+      left: anchor(left, 0px);
+      --_track-highlight-opacity: 1;
+
+      @starting-style {
+        opacity: 0;
+      }
+    }
+
+    @media (hover: hover) {
+      :where(
+          [data-track]:has(> [data-control-family="track-highlight"])
+            [data-track-item]:hover:not(:disabled, [aria-disabled="true"], [data-disabled], :has([role="checkbox"][data-disabled]))
+        ) {
+        anchor-name: --cui-track-hover;
+      }
+
+      :where(
+          [data-track]:has(> [data-control-family="track-highlight"]):has(
+            [data-track-item]:hover:not(:disabled, [aria-disabled="true"], [data-disabled])
+          ):not(:has([data-track-item]:hover [role="checkbox"][data-disabled])):not(:has([data-track] [data-track-item]:hover))
+        ) {
+        --_track-anchor: --cui-track-hover;
+        --_track-display: block;
+      }
+
+      :where(
+          [data-track="slide"]:has(
+              [data-track-item]:hover:not([data-active="true"], :disabled, [aria-disabled="true"], [data-disabled])
+            ):not(:has(:focus-visible, [data-track] [data-track-item]:hover))
+            > [data-control-family="track-highlight"][data-positioning="anchor"]:not([data-measured])
+        ) {
+        --cui-track-highlight-background: var(--cui-track-highlight-hover-background);
+        --cui-track-highlight-ring-color: transparent;
+        --cui-track-highlight-shadow: none;
+      }
+    }
+
+    :where(
+        [data-track]:has(> [data-control-family="track-highlight"])
+          [data-track-item]:is(:focus-visible, :has(:focus-visible)):not(
+            :disabled,
+            [aria-disabled="true"],
+            [data-disabled],
+            :has([role="checkbox"][data-disabled])
+          )
+      ) {
+      anchor-name: --cui-track-focus;
+    }
+
+    :where(
+        [data-track]:has(> [data-control-family="track-highlight"]):has(
+          [data-track-item]:focus-visible,
+          [data-track-item] :focus-visible
+        ):not(:has([data-track] :focus-visible))
+      ) {
+      --_track-anchor: --cui-track-focus;
+      --_track-display: block;
+    }
+
+    :where(
+        [data-track="slide"]:has(
+            [data-track-item]:not([data-active="true"]):focus-visible,
+            [data-track-item]:not([data-active="true"]) :focus-visible
+          ):not(:has([data-track] :focus-visible))
+          > [data-control-family="track-highlight"][data-positioning="anchor"]:not([data-measured])
+      ) {
+      --cui-track-highlight-background: var(--cui-track-highlight-hover-background);
+      --cui-track-highlight-ring-color: transparent;
+      --cui-track-highlight-shadow: none;
+    }
+  }
 }
 
 @property --cui-track-highlight-radius {

package/dist/styles/recipes/tree.css

@@ -15,6 +15,10 @@
     outline: none;
   }
 
+  :where([data-control-family="tree"][data-slot="root"] > [data-control-family="track-highlight"]) {
+    --cui-track-highlight-radius: var(--cui-tree-item-trigger-radius);
+  }
+
   :where([data-control-family="tree"][data-slot="item-trigger"]) {
     gap: calc(var(--spacing) * 1.5);
     padding-block: calc(var(--spacing) * 1);

package/dist/ui/button-group.d.ts

@@ -1,3 +1,4 @@
+import { HoverIndicator } from "../control-props.js";
 import { ControlSize } from "../control-variants.js";
 import { ButtonGroupKnobStyle } from "../knob-contracts/button-group-knobs.js";
 import { CSSProperties, ComponentProps } from "react";
@@ -9,6 +10,7 @@ type ButtonGroupTextProps = Omit<ComponentProps<"div"> & {
 };
 type ButtonGroupProps = ComponentProps<"div"> & {
   orientation?: "horizontal" | "vertical";
+  indicator?: HoverIndicator;
 } & {
   style?: CSSProperties & ButtonGroupKnobStyle;
 };
@@ -17,7 +19,7 @@ type ButtonGroupSeparatorProps = Omit<ComponentProps<"div"> & {
 }, "style"> & {
   style?: CSSProperties & ButtonGroupKnobStyle;
 };
-declare function ButtonGroup({ orientation, className, ...props }: ButtonGroupProps): import("react").JSX.Element;
+declare function ButtonGroup({ orientation, indicator, className, children, ...props }: ButtonGroupProps): import("react").JSX.Element;
 declare function ButtonGroupText({ size, className, ...props }: ButtonGroupTextProps): import("react").JSX.Element;
 declare function ButtonGroupSeparator({ orientation, className, ...props }: ButtonGroupSeparatorProps): import("react").JSX.Element;
 //#endregion

package/dist/ui/button-group.js

@@ -1,23 +1,26 @@
+"use client";
 import { cn } from "../lib/cn.js";
-import { jsx } from "react/jsx-runtime";
-import { cva } from "class-variance-authority";
+import { skinIndicator } from "../skin.js";
+import { ButtonTrackContext, buttonTrackStructureClasses } from "./button.js";
+import { TrackHighlight } from "../extensions/track-highlight.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/ui/button-group.tsx
-const buttonGroupVariant = cva("inline-flex w-fit items-stretch [&>*]:relative [&>*:focus-within:not([data-active=true])]:z-[1] [&>*[data-active=true]]:z-[2] [&>*[data-active=true]:focus-within]:z-[3]", {
-	variants: { orientation: {
-		horizontal: "flex-row [&>*:not(:first-child)]:-ml-px [&>*:not(:first-child)]:rounded-l-none [&>*:not(:last-child)]:rounded-r-none",
-		vertical: "flex-col [&>*:not(:first-child)]:-mt-px [&>*:not(:first-child)]:rounded-t-none [&>*:not(:last-child)]:rounded-b-none"
-	} },
-	defaultVariants: { orientation: "horizontal" }
-});
-function ButtonGroup({ orientation = "horizontal", className, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		role: "group",
-		"data-control-ui": "button-group",
-		"data-control-family": "button-group",
-		"data-slot": "root",
-		"data-orientation": orientation,
-		className: cn(buttonGroupVariant({ orientation }), className),
-		...props
+function ButtonGroup({ orientation = "horizontal", indicator, className, children, ...props }) {
+	const resolvedIndicator = indicator ?? skinIndicator("button-group") ?? "none";
+	const tracksHover = resolvedIndicator === "hover";
+	return /* @__PURE__ */ jsx(ButtonTrackContext, {
+		value: tracksHover,
+		children: /* @__PURE__ */ jsxs("div", {
+			role: "group",
+			"data-control-ui": "button-group",
+			"data-control-family": "button-group",
+			"data-slot": "root",
+			"data-orientation": orientation,
+			"data-track": resolvedIndicator,
+			className: cn(buttonTrackStructureClasses, "inline-flex w-fit items-stretch data-[orientation=vertical]:flex-col", className),
+			...props,
+			children: [children, tracksHover ? /* @__PURE__ */ jsx(TrackHighlight, { className: "z-0" }) : null]
+		})
 	});
 }
 function ButtonGroupText({ size = "sm", className, ...props }) {

package/dist/ui/button.d.ts

@@ -6,6 +6,7 @@ import { CSSProperties, ComponentProps } from "react";
 type ButtonVariant = ControlVariant;
 type ButtonSize = ControlSize;
 type ButtonTone = ControlTone;
+declare const ButtonTrackContext: import("react").Context<boolean>;
 declare const buttonShapes: readonly ["default", "circle"];
 type ButtonShape = (typeof buttonShapes)[number];
 type ButtonAppearanceProps = {
@@ -28,9 +29,10 @@ type ButtonLinkProps = ComponentProps<"a"> & ButtonAppearanceProps & {
 };
 type ButtonLabelProps = ComponentProps<"label"> & ButtonAppearanceProps;
 declare const buttonStructureClasses = "relative isolate inline-flex shrink-0 items-center justify-center overflow-visible whitespace-nowrap";
+declare const buttonTrackStructureClasses = "data-[track=hover]:relative data-[track=hover]:isolate [&_[data-track-item]]:[isolation:auto]";
 declare const buttonContentClasses = "relative z-[1] inline-flex min-w-0 items-center justify-center gap-[inherit]";
 declare function Button({ variant, size, tone, active, iconOnly, shape, type, disabled, render, nativeButton, className, children, ...props }: ButtonProps): import("react").JSX.Element;
 declare function ButtonLink({ variant, size, tone, active, iconOnly, shape, render, className, children, ...props }: ButtonLinkProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare function ButtonLabel({ variant, size, tone, active, iconOnly, shape, className, children, ...props }: ButtonLabelProps): import("react").JSX.Element;
 //#endregion
-export { Button, ButtonAppearanceProps, ButtonLabel, ButtonLabelProps, ButtonLink, ButtonLinkProps, ButtonProps, ButtonShape, ButtonSize, ButtonTone, ButtonVariant, buttonContentClasses, buttonShapes, buttonStructureClasses };
+export { Button, ButtonAppearanceProps, ButtonLabel, ButtonLabelProps, ButtonLink, ButtonLinkProps, ButtonProps, ButtonShape, ButtonSize, ButtonTone, ButtonTrackContext, ButtonVariant, buttonContentClasses, buttonShapes, buttonStructureClasses, buttonTrackStructureClasses };

package/dist/ui/button.js

@@ -1,12 +1,15 @@
 "use client";
 import { cn } from "../lib/cn.js";
 import { skinAdornment } from "../skin.js";
+import { createContext, useContext } from "react";
 import { Button as Button$1 } from "@base-ui/react/button";
 import { useRender } from "@base-ui/react/use-render";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/ui/button.tsx
+const ButtonTrackContext = createContext(false);
 const buttonShapes = ["default", "circle"];
 const buttonStructureClasses = "relative isolate inline-flex shrink-0 items-center justify-center overflow-visible whitespace-nowrap";
+const buttonTrackStructureClasses = "data-[track=hover]:relative data-[track=hover]:isolate [&_[data-track-item]]:[isolation:auto]";
 const buttonContentClasses = "relative z-[1] inline-flex min-w-0 items-center justify-center gap-[inherit]";
 function ButtonContent({ children }) {
 	return /* @__PURE__ */ jsx("span", {
@@ -17,15 +20,16 @@ function ButtonContent({ children }) {
 		children
 	});
 }
-/** The content wrapper only earns its node when a skin layer sits behind it and needs stacking above it. */
 function ButtonBody({ layer, wrap = true, children }) {
-	return /* @__PURE__ */ jsxs(Fragment, { children: [layer, wrap && layer ? /* @__PURE__ */ jsx(ButtonContent, { children }) : children] });
+	const wrapsContent = useContext(ButtonTrackContext) || wrap && Boolean(layer);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [layer, wrapsContent ? /* @__PURE__ */ jsx(ButtonContent, { children }) : children] });
 }
 function Button({ variant = "quiet", size = "sm", tone = "neutral", active = false, iconOnly = false, shape = "default", type = "button", disabled, render, nativeButton, className, children, ...props }) {
 	const layer = skinAdornment("button", "layer", {
 		variant,
 		tone
 	});
+	const tracksHover = useContext(ButtonTrackContext);
 	return /* @__PURE__ */ jsx(Button$1, {
 		type: nativeButton === false ? void 0 : type,
 		disabled,
@@ -33,6 +37,7 @@ function Button({ variant = "quiet", size = "sm", tone = "neutral", active = fal
 		"data-control-family": "button",
 		"data-slot": "root",
 		"data-control": "true",
+		"data-track-item": tracksHover ? "" : void 0,
 		"data-active": active ? "true" : void 0,
 		"data-icon-only": iconOnly ? "true" : void 0,
 		"data-shape": shape,
@@ -51,10 +56,12 @@ function Button({ variant = "quiet", size = "sm", tone = "neutral", active = fal
 	});
 }
 function ButtonLink({ variant = "quiet", size = "sm", tone = "neutral", active = false, iconOnly = false, shape = "default", render, className, children, ...props }) {
+	const tracksHover = useContext(ButtonTrackContext);
 	return useRender({
 		defaultTagName: "a",
 		render,
 		props: {
+			"data-track-item": tracksHover ? "" : void 0,
 			...props,
 			"data-control-ui": "button",
 			"data-control-family": "button",
@@ -78,7 +85,9 @@ function ButtonLink({ variant = "quiet", size = "sm", tone = "neutral", active =
 	});
 }
 function ButtonLabel({ variant = "quiet", size = "sm", tone = "neutral", active = false, iconOnly = false, shape = "default", className, children, ...props }) {
+	const tracksHover = useContext(ButtonTrackContext);
 	return /* @__PURE__ */ jsx("label", {
+		"data-track-item": tracksHover ? "" : void 0,
 		...props,
 		"data-control-ui": "button",
 		"data-control-family": "button",
@@ -101,4 +110,4 @@ function ButtonLabel({ variant = "quiet", size = "sm", tone = "neutral", active
 	});
 }
 //#endregion
-export { Button, ButtonLabel, ButtonLink, buttonContentClasses, buttonShapes, buttonStructureClasses };
+export { Button, ButtonLabel, ButtonLink, ButtonTrackContext, buttonContentClasses, buttonShapes, buttonStructureClasses, buttonTrackStructureClasses };

package/dist/ui/checkbox-group.d.ts

@@ -1,11 +1,13 @@
-import { ControlledMultiChoice } from "../control-props.js";
+import { ControlledMultiChoice, HoverIndicator } from "../control-props.js";
 import { ComponentProps } from "react";
 //#region src/ui/checkbox-group.d.ts
 type CheckboxGroupProps = Omit<ComponentProps<"div">, "defaultValue" | "onChange"> & ControlledMultiChoice & {
   allValues?: string[];
   disabled?: boolean;
   orientation?: "horizontal" | "vertical";
+  indicator?: HoverIndicator;
 };
-declare function CheckboxGroup({ className, orientation, ...props }: CheckboxGroupProps): import("react").JSX.Element;
+declare function CheckboxGroup({ className, orientation, indicator, children, ...props }: CheckboxGroupProps): import("react").JSX.Element;
+declare function CheckboxGroupItem({ className, htmlFor, children, ...props }: ComponentProps<"label">): import("react").JSX.Element;
 //#endregion
-export { CheckboxGroup, CheckboxGroupProps };
+export { CheckboxGroup, CheckboxGroupItem, CheckboxGroupProps };

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/color-picker.js

@@ -3,9 +3,9 @@ import { cn } from "../lib/cn.js";
 import { skinEffects, skinId } from "../skin.js";
 import { Button } from "./button.js";
 import { Input } from "./input.js";
+import { useColorArea } from "../hooks/use-color-area.js";
 import { formatColor, getChannels, hsvaToRgba, parseColor, pointToHueSat, pointToSaturationValue, setChannel } from "../lib/color.js";
 import { TARGET_RATIO, contrastOf, fixColorForContrast, nextFixLevel, wcagLevels } from "../lib/contrast.js";
-import { useColorArea } from "../hooks/use-color-area.js";
 import { NumberField, NumberFieldGroup, NumberFieldInput } from "./number-field.js";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select.js";
 import { createContext, useContext, useEffect, useRef, useState, useSyncExternalStore } from "react";

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

@@ -13,7 +13,7 @@ type DropdownMenuProps = {
 };
 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;
@@ -35,9 +35,8 @@ type DropdownMenuSeparatorProps = Omit<ComponentProps<"div">, "style"> & {
 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 DropdownMenuTrigger({ size, iconOnly, variant, className, children, disabled, ...props }: DropdownMenuTriggerProps): import("react").JSX.Element;
 declare function DropdownMenuContent({ className, children, ...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;

package/dist/ui/dropdown-menu.js

@@ -26,13 +26,7 @@ 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 }) {

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,39 @@
+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 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, SidebarGroupLabel, SidebarGroupLabelProps, SidebarMenu, SidebarMenuButton, SidebarMenuButtonProps, SidebarMenuButtonSize, SidebarMenuButtonVariant, SidebarMenuItem, SidebarMenuSub, SidebarSelectionIndicator, sidebarMenuButtonSizes, sidebarMenuButtonVariants };