@waveso/ui 0.15.1 → 0.17.0

package/dist/item.js

@@ -2,21 +2,22 @@
 import { cn } from "./lib/utils.js";
 import { Separator } from "./separator.js";
 import { jsx } from "react/jsx-runtime";
+import * as React from "react";
 import { cva } from "class-variance-authority";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
 //#region src/item.tsx
-const itemVariants = cva("[a]:hover:bg-secondary rounded-md border text-sm w-full group/item focus-visible:border-focus focus-visible:ring-focus/50 flex items-center flex-wrap outline-hidden motion-color focus-visible:ring-3", {
+const itemVariants = cva("[a,button]:hover:bg-highlight [a,button]:cursor-clickable rounded-md border text-sm w-full group/item focus-visible:border-focus focus-visible:ring-focus/50 flex items-center flex-wrap outline-hidden motion-color focus-visible:ring-3 disabled:pointer-events-none disabled:opacity-30 aria-disabled:pointer-events-none aria-disabled:opacity-30", {
 	variants: {
 		variant: {
 			default: "border-transparent",
-			outline: "border-line",
-			muted: "bg-secondary/50 border-transparent"
+			outline: "border-contour",
+			muted: "bg-secondary/50 border-transparent [a,button]:hover:bg-secondary"
 		},
 		size: {
-			default: "gap-2.5 px-3 py-2.5",
-			sm: "gap-2 px-3 py-2",
-			xs: "gap-2 px-2.5 py-2 in-data-[slot=menu-content]:p-0"
+			default: "gap-3.5 px-4 py-3.5",
+			sm: "gap-3.5 px-3.5 py-3",
+			xs: "gap-2.5 px-3 py-2.5 in-data-[slot=menu-content]:p-0"
 		}
 	},
 	defaultVariants: {
@@ -77,21 +78,26 @@ function ItemMedia({ className, variant = "default", ...props }) {
 function ItemContent({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "item-content",
-		className: cn("flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0 [&+[data-slot=item-content]]:flex-none", className),
+		className: cn("flex min-w-0 flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0.5 [&+[data-slot=item-content]]:flex-none", className),
 		...props
 	});
 }
-function ItemTitle({ className, ...props }) {
+function ItemTitle({ className, children, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "item-title",
-		className: cn("line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4", className),
-		...props
+		className: cn("line-clamp-1 flex w-fit max-w-full min-w-0 items-center gap-2 text-sm leading-snug font-medium underline-offset-4 [&>:not([data-slot=item-title-text])]:shrink-0", className),
+		...props,
+		children: React.Children.map(children, (child) => typeof child === "string" || typeof child === "number" ? /* @__PURE__ */ jsx("span", {
+			"data-slot": "item-title-text",
+			className: "truncate",
+			children: child
+		}) : child)
 	});
 }
 function ItemDescription({ className, ...props }) {
 	return /* @__PURE__ */ jsx("p", {
 		"data-slot": "item-description",
-		className: cn("text-muted [&>a:hover]:text-primary line-clamp-2 text-left text-sm leading-normal font-normal group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4", className),
+		className: cn("text-muted [&>a:hover]:text-primary line-clamp-2 text-start text-sm leading-normal font-normal group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4", className),
 		...props
 	});
 }

package/dist/kbd.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 //#region src/kbd.d.ts
 type KbdProps = React.ComponentProps<"kbd">;
-type KbdGroupProps = React.ComponentProps<"div">;
+type KbdGroupProps = React.ComponentProps<"kbd">;
 declare function Kbd({ className, ...props }: KbdProps): React.JSX.Element;
 declare function KbdGroup({ className, ...props }: KbdGroupProps): React.JSX.Element;
 //#endregion

package/dist/kbd.js

@@ -4,12 +4,12 @@ import { jsx } from "react/jsx-runtime";
 function Kbd({ className, ...props }) {
 	return /* @__PURE__ */ jsx("kbd", {
 		"data-slot": "kbd",
-		className: cn("bg-secondary text-muted in-data-[slot=tooltip-content]:bg-foundation/20 in-data-[slot=tooltip-content]:text-foundation dark:in-data-[slot=tooltip-content]:bg-foundation/10 pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none [&_svg:not([class*='size-'])]:size-3", className),
+		className: cn("bg-secondary text-contrast in-data-[slot=tooltip-content]:bg-contrast-inverse/10 in-data-[slot=tooltip-content]:text-contrast-inverse pointer-events-none inline-flex h-5.5 w-fit min-w-5.5 items-center justify-center gap-1 rounded-sm px-1.5 font-sans text-xs font-medium select-none [&_svg:not([class*='size-'])]:size-3 in-data-[slot=input-group]:bg-contrast-inverse/50", className),
 		...props
 	});
 }
 function KbdGroup({ className, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
+	return /* @__PURE__ */ jsx("kbd", {
 		"data-slot": "kbd-group",
 		className: cn("inline-flex items-center gap-1", className),
 		...props

package/dist/label.js

@@ -4,7 +4,7 @@ import { jsx } from "react/jsx-runtime";
 function Label({ className, ...props }) {
 	return /* @__PURE__ */ jsx("label", {
 		"data-slot": "label",
-		className: cn("flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled]:pointer-events-none group-data-[disabled]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50", className),
+		className: cn("flex items-center gap-2 text-sm leading-snug font-medium select-none [&[for]]:cursor-clickable", "in-data-disabled:pointer-events-none in-data-disabled:opacity-30", "peer-data-disabled:pointer-events-none peer-data-disabled:opacity-30", "has-[+:is(:disabled,[data-disabled])]:pointer-events-none has-[+:is(:disabled,[data-disabled])]:opacity-30", className),
 		...props
 	});
 }

package/dist/lib/merge-refs.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+//#region src/lib/merge-refs.d.ts
+/**
+ * Combines refs so one element can feed several of them: a component's own
+ * ref and the one a consumer passes. Takes object refs, callback refs and
+ * `undefined`.
+ */
+export declare function mergeRefs<T>(...refs: (React.Ref<T> | undefined)[]): (el: T | null) => void;
+//#endregion

package/dist/lib/merge-refs.js

@@ -0,0 +1,16 @@
+//#region src/lib/merge-refs.ts
+/**
+* Combines refs so one element can feed several of them: a component's own
+* ref and the one a consumer passes. Takes object refs, callback refs and
+* `undefined`.
+*/
+function mergeRefs(...refs) {
+	return (el) => {
+		refs.forEach((ref) => {
+			if (typeof ref === "function") ref(el);
+			else if (ref && typeof ref === "object") ref.current = el;
+		});
+	};
+}
+//#endregion
+export { mergeRefs };

package/dist/lib/utils.js

@@ -8,6 +8,8 @@ import { extendTailwindMerge } from "tailwind-merge";
 *   exclusive — the last one applied wins (e.g. a consumer overriding a
 *   component's default animation). `motion-color` / `motion-scrim` are left out
 *   on purpose: they compose with an enter recipe on the same element.
+* - the spin speeds (`motion-spin-*`) are mutually exclusive too, so a
+*   consumer's `motion-spin-lg` replaces a component's `motion-spin-sm`.
 * - `cursor-clickable` joins the built-in `cursor` group.
 */
 const twMerge = extendTailwindMerge({ extend: { classGroups: {
@@ -23,6 +25,11 @@ const twMerge = extendTailwindMerge({ extend: { classGroups: {
 		"motion-fade-lg",
 		"motion-pop-md"
 	],
+	"motion-spin": [
+		"motion-spin-sm",
+		"motion-spin-md",
+		"motion-spin-lg"
+	],
 	cursor: ["cursor-clickable"]
 } } });
 function cn(...inputs) {

package/dist/masonry.d.ts

@@ -10,7 +10,7 @@ type MasonryItemProps = Omit<HTMLMotionProps<"div">, "children"> & {
   span?: number;
   children?: React.ReactNode;
 };
-declare function Masonry({ columns, columnWidth, gap, className, children, ...props }: MasonryProps): React.JSX.Element;
+declare function Masonry({ columns, columnWidth, gap, className, children, ref, ...props }: MasonryProps): React.JSX.Element;
 declare function MasonryItem({ className, span, children, ...props }: MasonryItemProps): React.JSX.Element;
 //#endregion
 export { Masonry, MasonryItem, type MasonryItemProps, type MasonryProps };

package/dist/masonry.js

@@ -1,14 +1,16 @@
 "use client";
 import { cn } from "./lib/utils.js";
 import { StarIcon } from "./lib/internal-icons.js";
+import { mergeRefs } from "./lib/merge-refs.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { AnimatePresence, motion, useReducedMotion } from "motion/react";
 //#region src/masonry.tsx
 const STAGGER_STEP = .05;
 const MasonryStaggerContext = React.createContext(null);
-function Masonry({ columns, columnWidth, gap = 4, className, children, ...props }) {
+function Masonry({ columns, columnWidth, gap = 4, className, children, ref, ...props }) {
 	const containerRef = React.useRef(null);
+	const mergedRef = React.useMemo(() => mergeRefs(containerRef, ref), [ref]);
 	const rafRef = React.useRef(0);
 	const staggerCounterRef = React.useRef(0);
 	staggerCounterRef.current = 0;
@@ -134,7 +136,7 @@ function Masonry({ columns, columnWidth, gap = 4, className, children, ...props
 	return /* @__PURE__ */ jsx(MasonryStaggerContext.Provider, {
 		value: getStaggerIndex,
 		children: /* @__PURE__ */ jsx("div", {
-			ref: containerRef,
+			ref: mergedRef,
 			"data-slot": "masonry",
 			className: cn("relative", className),
 			...props,

package/dist/menu.d.ts

@@ -20,7 +20,8 @@ type MenuLabelProps = React.ComponentProps<typeof Menu$1.GroupLabel> & {
 };
 type MenuItemProps = React.ComponentProps<typeof Menu$1.Item> & {
   inset?: boolean;
-  variant?: "default" | "destructive";
+  /** `danger` turns the item's text and leading icon red. */
+  variant?: "default" | "danger";
 };
 type MenuSubProps = React.ComponentProps<typeof Menu$1.SubmenuRoot>;
 type MenuSubTriggerProps = React.ComponentProps<typeof Menu$1.SubmenuTrigger> & {

package/dist/menu.js

@@ -33,7 +33,7 @@ function MenuContent({ align = "start", alignOffset = 0, side = "bottom", sideOf
 		sideOffset,
 		children: /* @__PURE__ */ jsx(Menu$1.Popup, {
 			"data-slot": "menu-content",
-			className: cn("motion-pop-md ring-contrast/10 bg-elevated text-contrast z-50 max-h-(--available-height) max-w-(--available-width) w-auto min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md p-1 shadow-md ring-1 outline-hidden data-closed:overflow-hidden", className),
+			className: cn("motion-pop-md ring-contrast/10 bg-elevated text-contrast z-50 max-h-(--available-height) max-w-(--available-width) w-auto min-w-32 overflow-x-hidden overflow-y-auto rounded-md p-1 shadow-md ring-1 outline-hidden data-closed:overflow-hidden", className),
 			finalFocus: resolveFinalFocus(restoreFocusOnClose, finalFocus),
 			...props
 		})
@@ -58,7 +58,7 @@ function MenuItem({ className, inset, variant = "default", ...props }) {
 		"data-slot": "menu-item",
 		"data-inset": inset,
 		"data-variant": variant,
-		className: cn("focus:bg-primary focus:text-white data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-white group/menu-item relative flex cursor-clickable items-center gap-1.5 rounded-sm px-1.5 py-1 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		className: cn("focus:bg-highlight data-[variant=danger]:text-danger data-[variant=danger]:*:[svg]:text-danger data-[variant=danger]:focus:bg-danger data-[variant=danger]:focus:text-white data-[variant=danger]:focus:**:text-white group/menu-item relative flex cursor-clickable items-center gap-1.5 rounded-sm px-1.5 py-1 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-30 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
 		...props
 	});
 }
@@ -72,7 +72,7 @@ function MenuSubTrigger({ className, inset, children, ...props }) {
 	return /* @__PURE__ */ jsxs(Menu$1.SubmenuTrigger, {
 		"data-slot": "menu-sub-trigger",
 		"data-inset": inset,
-		className: cn("focus:bg-primary focus:text-white focus:**:text-white data-popup-open:bg-primary data-popup-open:text-white flex cursor-clickable items-center gap-1.5 rounded-sm px-1.5 py-1 text-sm outline-hidden select-none data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		className: cn("focus:bg-highlight data-popup-open:bg-highlight flex cursor-clickable items-center gap-1.5 rounded-sm px-1.5 py-1 text-sm outline-hidden select-none data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
 		...props,
 		children: [children, /* @__PURE__ */ jsx(ChevronRightIcon, { className: "ml-auto" })]
 	});
@@ -92,7 +92,7 @@ function MenuCheckboxItem({ className, children, checked, inset, ...props }) {
 	return /* @__PURE__ */ jsxs(Menu$1.CheckboxItem, {
 		"data-slot": "menu-checkbox-item",
 		"data-inset": inset,
-		className: cn("focus:bg-primary focus:text-white focus:**:text-white relative flex cursor-clickable items-center gap-1.5 rounded-sm py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		className: cn("focus:bg-highlight relative flex cursor-clickable items-center gap-1.5 rounded-sm py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-30 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
 		checked,
 		...props,
 		children: [/* @__PURE__ */ jsx("span", {
@@ -112,7 +112,7 @@ function MenuRadioItem({ className, children, inset, ...props }) {
 	return /* @__PURE__ */ jsxs(Menu$1.RadioItem, {
 		"data-slot": "menu-radio-item",
 		"data-inset": inset,
-		className: cn("focus:bg-primary focus:text-white focus:**:text-white relative flex cursor-clickable items-center gap-1.5 rounded-sm py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		className: cn("focus:bg-highlight relative flex cursor-clickable items-center gap-1.5 rounded-sm py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-30 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
 		...props,
 		children: [/* @__PURE__ */ jsx("span", {
 			"data-slot": "menu-radio-item-indicator",
@@ -124,14 +124,14 @@ function MenuRadioItem({ className, children, inset, ...props }) {
 function MenuSeparator({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Menu$1.Separator, {
 		"data-slot": "menu-separator",
-		className: cn("bg-line -mx-1 my-1 h-px", className),
+		className: cn("bg-contour -mx-1 my-1 h-px", className),
 		...props
 	});
 }
 function MenuShortcut({ className, ...props }) {
 	return /* @__PURE__ */ jsx("span", {
 		"data-slot": "menu-shortcut",
-		className: cn("text-muted group-focus/menu-item:text-white ml-auto text-xs tracking-widest", className),
+		className: cn("text-muted ml-auto text-xs tracking-widest", className),
 		...props
 	});
 }

package/dist/menubar.js

@@ -7,7 +7,7 @@ import { Menubar as Menubar$1 } from "@base-ui/react/menubar";
 function Menubar({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Menubar$1, {
 		"data-slot": "menubar",
-		className: cn("bg-foundation flex h-9 items-center gap-0.5 rounded-md border border-edge p-1", className),
+		className: cn("bg-foundation flex h-9 items-center gap-0.5 rounded-md border border-shade p-1", className),
 		...props
 	});
 }

package/dist/pagination.js

@@ -26,7 +26,7 @@ function PaginationItem(props) {
 }
 function PaginationLink({ className, isActive, disabled, size = "icon", ...props }) {
 	return /* @__PURE__ */ jsx(Button, {
-		variant: isActive ? "outline" : "ghost",
+		variant: isActive ? "default" : "ghost",
 		size,
 		className: cn(disabled && "pointer-events-none opacity-50", className),
 		render: /* @__PURE__ */ jsx("a", {

package/dist/popover.js

@@ -46,7 +46,7 @@ function PopoverContent({ className, positionerClassName, align = "center", alig
 		className: cn("isolate z-50", positionerClassName),
 		children: /* @__PURE__ */ jsx(Popover$1.Popup, {
 			"data-slot": "popover-content",
-			className: cn("motion-pop-md bg-elevated text-contrast ring-contrast/10 z-50 flex w-72 origin-(--transform-origin) flex-col gap-2.5 rounded-md p-2.5 text-sm shadow-md ring-1 outline-hidden", className),
+			className: cn("motion-pop-md bg-elevated text-contrast ring-contrast/10 z-50 flex w-72 flex-col gap-2.5 rounded-md p-2.5 text-sm shadow-md ring-1 outline-hidden", className),
 			finalFocus: resolveFinalFocus(restoreFocusOnClose, finalFocus),
 			...props
 		})

package/dist/preview-card.js

@@ -38,7 +38,7 @@ function PreviewCardContent({ className, positionerClassName, side = "bottom", s
 		className: cn("isolate z-50", positionerClassName),
 		children: /* @__PURE__ */ jsx(PreviewCard$1.Popup, {
 			"data-slot": "preview-card-content",
-			className: cn("motion-pop-md bg-elevated text-contrast ring-contrast/10 z-50 w-64 origin-(--transform-origin) rounded-md p-2.5 text-sm shadow-md ring-1 outline-hidden", className),
+			className: cn("motion-pop-md bg-elevated text-contrast ring-contrast/10 z-50 w-64 rounded-md p-2.5 text-sm shadow-md ring-1 outline-hidden", className),
 			...props
 		})
 	}) });

package/dist/progress.js

@@ -14,7 +14,7 @@ function Progress({ className, children, value = null, ...props }) {
 }
 function ProgressTrack({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Progress$1.Track, {
-		className: cn("bg-secondary relative flex h-1 w-full items-center overflow-x-hidden rounded-full", className),
+		className: cn("bg-secondary relative flex h-3 w-full items-center overflow-x-hidden rounded-full", className),
 		"data-slot": "progress-track",
 		...props
 	});
@@ -35,7 +35,7 @@ function ProgressLabel({ className, ...props }) {
 }
 function ProgressValue({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Progress$1.Value, {
-		className: cn("text-muted ml-auto text-sm tabular-nums", className),
+		className: cn("text-muted ms-auto text-sm tabular-nums", className),
 		"data-slot": "progress-value",
 		...props
 	});

package/dist/radio-group.js

@@ -7,7 +7,7 @@ import { RadioGroup as RadioGroup$1 } from "@base-ui/react/radio-group";
 function RadioGroup({ className, ...props }) {
 	return /* @__PURE__ */ jsx(RadioGroup$1, {
 		"data-slot": "radio-group",
-		className: cn("grid w-full gap-2", className),
+		className: cn("grid w-full gap-3", className),
 		...props
 	});
 }

package/dist/radio.js

@@ -6,7 +6,7 @@ import { Radio as Radio$1 } from "@base-ui/react/radio";
 function Radio({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Radio$1.Root, {
 		"data-slot": "radio",
-		className: cn("cursor-clickable border-edge dark:bg-edge/30 data-checked:bg-primary data-checked:text-white data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive focus-visible:border-focus focus-visible:ring-focus/50 aria-invalid:ring-destructive/30 group/radio peer relative flex aspect-square size-4 shrink-0 rounded-full border outline-hidden after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3", className),
+		className: cn("cursor-clickable bg-shade border-transparent not-data-disabled:data-unchecked:hover:border-focus not-data-disabled:data-unchecked:group-hover/field:border-focus data-checked:bg-primary data-checked:text-white data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-danger focus-visible:border-focus focus-visible:ring-focus/50 aria-invalid:ring-danger/30 group/radio peer relative flex aspect-square size-6 shrink-0 rounded-full border motion-color outline-hidden group-has-disabled/field:opacity-30 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 data-disabled:pointer-events-none data-disabled:opacity-30 aria-invalid:ring-3", className),
 		...props,
 		children: /* @__PURE__ */ jsx(RadioIndicator, {})
 	});
@@ -14,7 +14,7 @@ function Radio({ className, ...props }) {
 function RadioIndicator({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Radio$1.Indicator, {
 		"data-slot": "radio-indicator",
-		className: cn("group-aria-invalid/radio:text-destructive text-white absolute inset-0 flex items-center justify-center data-unchecked:opacity-0", "after:block after:size-2 after:rounded-full after:bg-current", className),
+		className: cn("text-white absolute inset-0 flex items-center justify-center data-unchecked:opacity-0", "after:block after:size-3 after:rounded-full after:bg-current", className),
 		...props
 	});
 }

package/dist/resizable.d.ts

@@ -0,0 +1,43 @@
+import * as React from "react";
+import { Group, Panel, Separator } from "react-resizable-panels";
+//#region src/resizable.d.ts
+type ResizablePanelGroupProps = Omit<React.ComponentProps<typeof Group>, "elementRef"> & {
+  ref?: React.Ref<HTMLDivElement>;
+};
+type ResizablePanelProps = Omit<React.ComponentProps<typeof Panel>, "elementRef"> & {
+  ref?: React.Ref<HTMLDivElement>;
+};
+type ResizableHandleProps = Omit<React.ComponentProps<typeof Separator>, "elementRef"> & {
+  ref?: React.Ref<HTMLDivElement>;
+  /**
+   * Show a grip on the line, a visible hint that it can be dragged.
+   *
+   * @default false
+   */
+  grip?: boolean;
+};
+/**
+ * A row of panels the user resizes by dragging the handles between them, or
+ * from the keyboard once a handle has focus. Pass `orientation="vertical"` to
+ * stack them instead.
+ *
+ * The group fills its parent: it sets its own `width` and `height` to 100%
+ * inline, so a height class on the group has no effect. Size the parent, or
+ * pass `style`.
+ */
+declare function ResizablePanelGroup({ ref, ...props }: ResizablePanelGroupProps): React.JSX.Element;
+/**
+ * One resizable region. Numeric sizes are pixels; use strings for
+ * percentages (`defaultSize="25%"`). `className` lands on the panel's inner
+ * element, which scrolls when the content overflows.
+ */
+declare function ResizablePanel({ ref, ...props }: ResizablePanelProps): React.JSX.Element;
+/**
+ * The line between two panels. It lights up while the pointer is close
+ * enough to drag it: the library hit-tests a zone wider than the line itself
+ * and reports it in `data-separator` (`hover`, `active`, `focus`, `disabled`),
+ * which CSS `:hover` on a 1px line would miss.
+ */
+declare function ResizableHandle({ className, grip, ref, ...props }: ResizableHandleProps): React.JSX.Element;
+//#endregion
+export { ResizableHandle, type ResizableHandleProps, ResizablePanel, ResizablePanelGroup, type ResizablePanelGroupProps, type ResizablePanelProps };

package/dist/resizable.js

@@ -0,0 +1,53 @@
+"use client";
+import { cn } from "./lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+import { Group, Panel, Separator } from "react-resizable-panels";
+//#region src/resizable.tsx
+/**
+* A row of panels the user resizes by dragging the handles between them, or
+* from the keyboard once a handle has focus. Pass `orientation="vertical"` to
+* stack them instead.
+*
+* The group fills its parent: it sets its own `width` and `height` to 100%
+* inline, so a height class on the group has no effect. Size the parent, or
+* pass `style`.
+*/
+function ResizablePanelGroup({ ref, ...props }) {
+	return /* @__PURE__ */ jsx(Group, {
+		"data-slot": "resizable-panel-group",
+		elementRef: ref,
+		...props
+	});
+}
+/**
+* One resizable region. Numeric sizes are pixels; use strings for
+* percentages (`defaultSize="25%"`). `className` lands on the panel's inner
+* element, which scrolls when the content overflows.
+*/
+function ResizablePanel({ ref, ...props }) {
+	return /* @__PURE__ */ jsx(Panel, {
+		"data-slot": "resizable-panel",
+		elementRef: ref,
+		...props
+	});
+}
+/**
+* The line between two panels. It lights up while the pointer is close
+* enough to drag it: the library hit-tests a zone wider than the line itself
+* and reports it in `data-separator` (`hover`, `active`, `focus`, `disabled`),
+* which CSS `:hover` on a 1px line would miss.
+*/
+function ResizableHandle({ className, grip = false, ref, ...props }) {
+	return /* @__PURE__ */ jsx(Separator, {
+		"data-slot": "resizable-handle",
+		elementRef: ref,
+		className: cn("group/resizable-handle bg-contour z-10 flex items-center justify-center motion-color outline-hidden focus-visible:ring-3 focus-visible:ring-focus/50 data-[separator=active]:bg-focus data-[separator=hover]:bg-focus data-[separator=disabled]:pointer-events-none aria-[orientation=horizontal]:h-px aria-[orientation=vertical]:w-px", className),
+		...props,
+		children: grip && /* @__PURE__ */ jsx("div", {
+			"data-slot": "resizable-handle-grip",
+			className: "bg-shade h-6 w-1 shrink-0 rounded-full motion-color group-data-[separator=active]/resizable-handle:bg-focus group-data-[separator=hover]/resizable-handle:bg-focus group-data-[separator=disabled]/resizable-handle:opacity-30 group-aria-[orientation=horizontal]/resizable-handle:h-1 group-aria-[orientation=horizontal]/resizable-handle:w-6"
+		})
+	});
+}
+//#endregion
+export { ResizableHandle, ResizablePanel, ResizablePanelGroup };

package/dist/scroll-area.d.ts

@@ -1,9 +1,20 @@
 import * as React from "react";
 import { ScrollArea as ScrollArea$1 } from "@base-ui/react/scroll-area";
 //#region src/scroll-area.d.ts
-type ScrollAreaProps = React.ComponentProps<typeof ScrollArea$1.Root>;
-declare function ScrollArea({ className, children, ...props }: ScrollAreaProps): React.JSX.Element;
+type ScrollAreaProps = React.ComponentProps<typeof ScrollArea$1.Root> & {
+  /**
+   * Fade the content out toward any edge that has more to scroll to. On by
+   * default; the fade size follows `--scroll-area-fade` (default `2.5rem`).
+   */
+  fade?: boolean;
+};
 type ScrollBarProps = React.ComponentProps<typeof ScrollArea$1.Scrollbar>;
+/**
+ * A scrollable region with styled scrollbars. Both scrollbars are built in:
+ * Base UI only mounts one when its axis overflows, so pass content and the
+ * right bars appear. They fade in while the area is hovered or scrolling.
+ */
+declare function ScrollArea({ className, children, fade, ...props }: ScrollAreaProps): React.JSX.Element;
 declare function ScrollBar({ className, orientation, ...props }: ScrollBarProps): React.JSX.Element;
 //#endregion
 export { ScrollArea, type ScrollAreaProps, ScrollBar, type ScrollBarProps };

package/dist/scroll-area.js

@@ -3,18 +3,37 @@ import { cn } from "./lib/utils.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ScrollArea as ScrollArea$1 } from "@base-ui/react/scroll-area";
 //#region src/scroll-area.tsx
-function ScrollArea({ className, children, ...props }) {
+/**
+* The edge fade is a mask, so the content itself turns transparent and
+* whatever is behind it shows through: no shadow color to match, in any
+* theme. Each edge has a fixed fade (`--scroll-area-fade`) that switches on
+* when Base UI marks that edge as having more content (`data-overflow-*`):
+* its edge opacity goes from 1 (none) to 0 (fully faded).
+* The two axes are intersected; the horizontal one flips in right-to-left
+* layouts, where Base UI's "start" is the right edge.
+*/
+const FADE_MASK = "[--scroll-area-fade-x:to_right] rtl:[--scroll-area-fade-x:to_left] data-overflow-y-start:[--scroll-area-fade-top:0] data-overflow-y-end:[--scroll-area-fade-bottom:0] data-overflow-x-start:[--scroll-area-fade-start:0] data-overflow-x-end:[--scroll-area-fade-end:0] [mask-composite:intersect] [mask-image:linear-gradient(to_bottom,rgb(0_0_0/var(--scroll-area-fade-top,1)),#000_var(--scroll-area-fade,2.5rem),#000_calc(100%_-_var(--scroll-area-fade,2.5rem)),rgb(0_0_0/var(--scroll-area-fade-bottom,1))),linear-gradient(var(--scroll-area-fade-x),rgb(0_0_0/var(--scroll-area-fade-start,1)),#000_var(--scroll-area-fade,2.5rem),#000_calc(100%_-_var(--scroll-area-fade,2.5rem)),rgb(0_0_0/var(--scroll-area-fade-end,1)))]";
+/**
+* A scrollable region with styled scrollbars. Both scrollbars are built in:
+* Base UI only mounts one when its axis overflows, so pass content and the
+* right bars appear. They fade in while the area is hovered or scrolling.
+*/
+function ScrollArea({ className, children, fade = true, ...props }) {
 	return /* @__PURE__ */ jsxs(ScrollArea$1.Root, {
 		"data-slot": "scroll-area",
-		className: cn("relative", className),
+		className: cn("relative motion-color has-[>[data-slot=scroll-area-viewport]:focus-visible]:ring-3 has-[>[data-slot=scroll-area-viewport]:focus-visible]:ring-focus/50 has-[>[data-slot=scroll-area-viewport]:focus-visible]:outline-hidden", className),
 		...props,
 		children: [
 			/* @__PURE__ */ jsx(ScrollArea$1.Viewport, {
 				"data-slot": "scroll-area-viewport",
-				className: "focus-visible:ring-focus/50 size-full rounded-[inherit] motion-color outline-hidden focus-visible:ring-3 focus-visible:outline-1",
-				children
+				className: cn("size-full rounded-[inherit] outline-hidden", fade && FADE_MASK),
+				children: /* @__PURE__ */ jsx(ScrollArea$1.Content, {
+					"data-slot": "scroll-area-content",
+					children
+				})
 			}),
-			/* @__PURE__ */ jsx(ScrollBar, {}),
+			/* @__PURE__ */ jsx(ScrollBar, { orientation: "vertical" }),
+			/* @__PURE__ */ jsx(ScrollBar, { orientation: "horizontal" }),
 			/* @__PURE__ */ jsx(ScrollArea$1.Corner, { "data-slot": "scroll-area-corner" })
 		]
 	});
@@ -23,11 +42,11 @@ function ScrollBar({ className, orientation = "vertical", ...props }) {
 	return /* @__PURE__ */ jsx(ScrollArea$1.Scrollbar, {
 		"data-slot": "scroll-area-scrollbar",
 		orientation,
-		className: cn("flex touch-none p-px transition-colors select-none data-[orientation=horizontal]:h-2.5 data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:border-t data-[orientation=horizontal]:border-t-transparent data-[orientation=vertical]:h-full data-[orientation=vertical]:w-2.5 data-[orientation=vertical]:border-l data-[orientation=vertical]:border-l-transparent", className),
+		className: cn("pointer-events-none flex touch-none p-px opacity-0 transition-opacity duration-(--duration-md) ease-(--ease) select-none data-hovering:pointer-events-auto data-hovering:opacity-100 data-scrolling:pointer-events-auto data-scrolling:opacity-100 data-scrolling:duration-0 data-[orientation=horizontal]:h-2.5 data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:border-t data-[orientation=horizontal]:border-t-transparent data-[orientation=vertical]:h-full data-[orientation=vertical]:w-2.5 data-[orientation=vertical]:border-s data-[orientation=vertical]:border-s-transparent", className),
 		...props,
 		children: /* @__PURE__ */ jsx(ScrollArea$1.Thumb, {
 			"data-slot": "scroll-area-thumb",
-			className: "bg-line relative flex-1 rounded-full"
+			className: "bg-shade relative flex-1 rounded-full"
 		})
 	});
 }

package/dist/select.js

@@ -5,7 +5,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { Select as Select$1 } from "@base-ui/react/select";
 //#region src/select.tsx
-const selectTriggerVariants = cva("data-placeholder:text-soft bg-edge hover:border-focus focus-visible:border-focus focus-visible:ring-focus/50 aria-invalid:ring-destructive/30 aria-invalid:border-destructive flex w-fit items-center justify-between gap-1.5 rounded-md border border-transparent whitespace-nowrap motion-color outline-hidden select-none focus-visible:ring-3 disabled:pointer-events-none disabled:opacity-30 aria-invalid:ring-3 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+const selectTriggerVariants = cva("data-placeholder:text-soft bg-shade hover:border-focus focus-visible:border-focus focus-visible:ring-focus/50 aria-invalid:ring-danger/30 aria-invalid:border-danger flex w-fit items-center justify-between gap-1.5 rounded-md border border-transparent whitespace-nowrap motion-color outline-hidden select-none focus-visible:ring-3 data-disabled:pointer-events-none data-disabled:opacity-30 aria-invalid:ring-3 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
 	variants: { size: {
 		xs: "h-6 rounded-sm px-2 text-xs",
 		sm: "h-8 px-3 text-sm",
@@ -76,7 +76,7 @@ function SelectContent({ className, children, side = "bottom", sideOffset = 4, a
 		className: "isolate z-50",
 		children: /* @__PURE__ */ jsxs(Select$1.Popup, {
 			"data-slot": "select-content",
-			className: cn("motion-pop-md bg-elevated text-contrast ring-contrast/10 relative isolate z-50 max-h-(--available-height) min-w-(--anchor-width) max-w-(--available-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md shadow-md ring-1", className),
+			className: cn("motion-pop-md bg-elevated text-contrast ring-contrast/10 relative isolate z-50 max-h-(--available-height) min-w-(--anchor-width) max-w-(--available-width) overflow-x-hidden overflow-y-auto rounded-md shadow-md ring-1", className),
 			...props,
 			children: [
 				/* @__PURE__ */ jsx(SelectScrollUpButton, {}),
@@ -96,7 +96,7 @@ function SelectLabel({ className, ...props }) {
 function SelectItem({ className, children, ...props }) {
 	return /* @__PURE__ */ jsxs(Select$1.Item, {
 		"data-slot": "select-item",
-		className: cn("data-highlighted:bg-primary data-highlighted:text-white not-data-[variant=destructive]:data-highlighted:**:text-white relative flex w-full cursor-clickable items-center gap-1.5 rounded-sm py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className),
+		className: cn("data-highlighted:bg-highlight relative flex w-full cursor-clickable items-center gap-1.5 rounded-sm py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-30 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className),
 		...props,
 		children: [/* @__PURE__ */ jsx(Select$1.ItemText, {
 			"data-slot": "select-item-text",
@@ -114,7 +114,7 @@ function SelectItem({ className, children, ...props }) {
 function SelectSeparator({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Select$1.Separator, {
 		"data-slot": "select-separator",
-		className: cn("bg-line pointer-events-none -mx-1 my-1 h-px", className),
+		className: cn("bg-contour pointer-events-none -mx-1 my-1 h-px", className),
 		...props
 	});
 }

package/dist/separator.js

@@ -7,7 +7,7 @@ function Separator({ className, orientation = "horizontal", ...props }) {
 	return /* @__PURE__ */ jsx(Separator$1, {
 		"data-slot": "separator",
 		orientation,
-		className: cn("bg-line shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:self-stretch", className),
+		className: cn("bg-contour shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:self-stretch", className),
 		...props
 	});
 }