@ctrl-ui/react 0.8.6 → 0.8.7

package/dist/ui/input.js

@@ -1,9 +1,18 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { useIsInsideInputGroup } from "./input-group.js";
 import { jsx } from "react/jsx-runtime";
 import { Input as Input$1 } from "@base-ui/react/input";
 //#region src/ui/input.tsx
 function Input({ size = "md", className, ...props }) {
+	if (useIsInsideInputGroup()) return /* @__PURE__ */ jsx(Input$1, {
+		"data-control-ui": "input-group",
+		"data-control-family": "field",
+		"data-field-kind": "input-group",
+		"data-slot": "input",
+		className: cn("h-full min-w-0 flex-1", className),
+		...props
+	});
 	return /* @__PURE__ */ jsx(Input$1, {
 		"data-control-ui": "input",
 		"data-slot": "root",

package/dist/ui/item.js

@@ -1,8 +1,8 @@
 "use client";
 import { cn } from "../lib/cn.js";
 import { Separator } from "./separator.js";
-import { useRender } from "@base-ui/react/use-render";
 import { jsx } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
 //#region src/ui/item.tsx
 const itemVariants = [
 	"default",

package/dist/ui/markdown-elements.js

@@ -1,4 +1,5 @@
 import { cn } from "../lib/cn.js";
+import { ScrollArea } from "./scroll-area.js";
 import { Code, CodeActions, CodeContent, CodeCopy, CodeHeader, CodeTitle } from "./code.js";
 import { CodeDiff } from "./code-diff.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -159,14 +160,16 @@ function MarkdownTable({ className, children, node: _node, ...props }) {
 		"data-control-ui": "markdown",
 		"data-control-family": "markdown",
 		"data-slot": "table-scroll",
-		className: "overflow-x-auto",
-		children: /* @__PURE__ */ jsx("table", {
-			"data-control-ui": "markdown",
-			"data-control-family": "markdown",
-			"data-slot": "table",
-			className: cn("w-full", className),
-			...props,
-			children
+		children: /* @__PURE__ */ jsx(ScrollArea, {
+			lockAxis: "y",
+			children: /* @__PURE__ */ jsx("table", {
+				"data-control-ui": "markdown",
+				"data-control-family": "markdown",
+				"data-slot": "table",
+				className: cn("w-full", className),
+				...props,
+				children
+			})
 		})
 	});
 }

package/dist/ui/menubar.js

@@ -1,6 +1,6 @@
 "use client";
-import { cn } from "../lib/cn.js";
 import { controlEffectsAttribute } from "../skin.js";
+import { cn } from "../lib/cn.js";
 import { useSkin } from "../skin-provider.js";
 import { popupItemStructureClasses } from "../surface-variants.js";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/ui/morphing-panel.js

@@ -1,7 +1,7 @@
 "use client";
 import { cn } from "../lib/cn.js";
-import { useRender } from "@base-ui/react/use-render";
 import { jsx } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
 import { Collapsible } from "@base-ui/react/collapsible";
 //#region src/ui/morphing-panel.tsx
 function MorphingPanelTriggerElement({ triggerProps, open, render, className, children }) {

package/dist/ui/navigation-menu.js

@@ -1,6 +1,6 @@
 "use client";
-import { cn } from "../lib/cn.js";
 import { controlEffectsAttribute } from "../skin.js";
+import { cn } from "../lib/cn.js";
 import { useSkin } from "../skin-provider.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { NavigationMenu as NavigationMenu$1 } from "@base-ui/react/navigation-menu";

package/dist/ui/number-field.d.ts

@@ -62,7 +62,7 @@ export type NumberFieldScrubAreaProps = ComponentProps<"span"> & {
 } & {
   style?: CSSProperties & FieldKnobStyle;
 };
-export declare function NumberField({ size, value, defaultValue, children, ...props }: NumberFieldProps): import("react").JSX.Element;
+export declare function NumberField({ size, value, defaultValue, className, children, ...props }: NumberFieldProps): import("react").JSX.Element;
 export declare function NumberFieldGroup({ className, children, ...props }: NumberFieldGroupProps): import("react").JSX.Element;
 export declare function NumberFieldInput({ className, ...props }: NumberFieldInputProps): import("react").JSX.Element;
 export declare function NumberFieldDecrement({ className, children, ...props }: NumberFieldDecrementProps): import("react").JSX.Element;

package/dist/ui/number-field.js

@@ -1,16 +1,18 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { useIsInsideInputGroup } from "./input-group.js";
 import { createContext, useContext } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { NumberField as NumberField$1 } from "@base-ui/react/number-field";
 //#region src/ui/number-field.tsx
 const NumberFieldSizeContext = createContext("md");
-function NumberField({ size = "md", value, defaultValue, children, ...props }) {
+function NumberField({ size = "md", value, defaultValue, className, children, ...props }) {
 	return /* @__PURE__ */ jsx(NumberFieldSizeContext.Provider, {
 		value: size,
 		children: /* @__PURE__ */ jsx(NumberField$1.Root, {
 			value,
 			defaultValue,
+			className: cn("flex flex-col items-start gap-1.5", className),
 			...props,
 			children
 		})
@@ -18,6 +20,15 @@ function NumberField({ size = "md", value, defaultValue, children, ...props }) {
 }
 function NumberFieldGroup({ className, children, ...props }) {
 	const size = useContext(NumberFieldSizeContext);
+	if (useIsInsideInputGroup()) return /* @__PURE__ */ jsx(NumberField$1.Group, {
+		"data-control-ui": "number-field",
+		"data-field-kind": "number-field",
+		"data-slot": "group",
+		"data-control-family": "field",
+		className: cn("inline-flex items-stretch overflow-hidden", className),
+		...props,
+		children
+	});
 	return /* @__PURE__ */ jsx(NumberField$1.Group, {
 		"data-control-ui": "number-field",
 		"data-field-kind": "number-field",
@@ -70,7 +81,7 @@ function NumberFieldScrubArea({ className, children, ...props }) {
 		"data-control-family": "field",
 		"data-field-kind": "number-field",
 		"data-slot": "scrub-area",
-		className: cn("cursor-ew-resize touch-pan-y select-none", className),
+		className: cn("inline-flex shrink-0 cursor-ew-resize touch-pan-y select-none items-center [&>svg]:size-3.5 [&>svg]:shrink-0", className),
 		...props,
 		children: [children, /* @__PURE__ */ jsx(NumberField$1.ScrubAreaCursor, {
 			"data-control-ui": "number-field",

package/dist/ui/phone-input.js

@@ -2,12 +2,12 @@
 import { cn } from "../lib/cn.js";
 import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
 import { InputGroup, InputGroupAddon, InputGroupInput } from "./input-group.js";
-import { normalizePhoneInputText, normalizePhoneInputValue } from "../lib/phone-input-format.js";
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "./command.js";
+import { normalizePhoneInputText, normalizePhoneInputValue } from "../lib/phone-input-format.js";
 import { useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import PhoneNumberInput, { getCountryCallingCode, parsePhoneNumber } from "react-phone-number-input/max";
 import flags from "react-phone-number-input/flags";
+import PhoneNumberInput, { getCountryCallingCode, parsePhoneNumber } from "react-phone-number-input/max";
 //#region src/ui/phone-input.tsx
 const FLAG_COMPONENTS = flags;
 const PhoneNumberInputWithRef = PhoneNumberInput;

package/dist/ui/popover.js

@@ -1,6 +1,6 @@
 "use client";
-import { cn } from "../lib/cn.js";
 import { controlEffectsAttribute } from "../skin.js";
+import { cn } from "../lib/cn.js";
 import { useSkin } from "../skin-provider.js";
 import { jsx } from "react/jsx-runtime";
 import { Popover as Popover$1 } from "@base-ui/react/popover";

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

@@ -25,4 +25,5 @@ export type RadioProps = Omit<{
 };
 export declare function RadioGroup<TValue extends string = string>({ className, orientation, ...props }: RadioGroupProps<TValue>): import("react").JSX.Element;
 export declare function Radio({ className, disabled, ...props }: RadioProps): import("react").JSX.Element;
+export declare function RadioGroupItem({ className, htmlFor, children, ...props }: ComponentProps<"label">): import("react").JSX.Element;
 //#endregion

package/dist/ui/radio-group.js

@@ -33,5 +33,15 @@ function Radio({ className, disabled, ...props }) {
 		})
 	});
 }
+function RadioGroupItem({ className, htmlFor, children, ...props }) {
+	return /* @__PURE__ */ jsx("label", {
+		htmlFor,
+		"data-control-ui": "radio-group",
+		"data-slot": "label",
+		className: cn("flex cursor-pointer items-start gap-2.5 rounded-(--radius-control) p-2 text-body has-[[data-disabled]]:cursor-not-allowed [&>[data-control-family=choice]]:mt-[calc((1lh_-_var(--spacing)*4)/2)]", className),
+		...props,
+		children
+	});
+}
 //#endregion
-export { Radio, RadioGroup };
+export { Radio, RadioGroup, RadioGroupItem };

package/dist/ui/resizable.d.ts

@@ -49,7 +49,24 @@ export type ResizableHandleProps = Omit<ComponentProps<"div">, "role" | "tabInde
   disableDoubleClick?: boolean;
   style?: CSSProperties & ResizableKnobStyle;
 };
-export declare function ResizablePanelGroup({ className, orientation, variant, children, ...props }: ResizablePanelGroupProps): import("react").JSX.Element;
+export type ResizableFloatingPanelSide = "left" | "right";
+export type ResizableSeparatorState = "inactive" | "hover" | "focus" | "active";
+type ResizableFloatingPanelStyle = CSSProperties & ResizableKnobStyle & {
+  "--resizable-floating-width"?: string;
+};
+export type ResizableFloatingPanelProps = Omit<ComponentProps<"div">, "style"> & {
+  side?: ResizableFloatingPanelSide;
+  size?: number;
+  defaultSize?: number;
+  onSizeChange?: (size: number) => void;
+  minSize?: number;
+  maxSize?: number;
+  handleVariant?: ResizableHandleVariant;
+  handleLabel?: string;
+  style?: ResizableFloatingPanelStyle;
+};
+export declare function ResizablePanelGroup({ className, orientation, variant, disableCursor, children, ...props }: ResizablePanelGroupProps): import("react").JSX.Element;
 export declare function ResizablePanel({ className, ...props }: ResizablePanelProps): import("react").JSX.Element;
 export declare function ResizableHandle({ className, variant, withHandle, children, ...props }: ResizableHandleProps): import("react").JSX.Element;
+export declare function ResizableFloatingPanel({ side, size: controlledSize, defaultSize, onSizeChange, minSize, maxSize, handleVariant, handleLabel, className, style, children, ...props }: ResizableFloatingPanelProps): import("react").JSX.Element;
 //#endregion

package/dist/ui/resizable.js

@@ -1,13 +1,24 @@
 "use client";
 import { cn } from "../lib/cn.js";
-import { createContext, useContext } from "react";
+import { createContext, useContext, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Group, Panel, Separator } from "react-resizable-panels";
 //#region src/ui/resizable.tsx
-const OrientationContext = createContext("horizontal");
-function ResizablePanelGroup({ className, orientation = "horizontal", variant = "framed", children, ...props }) {
-	return /* @__PURE__ */ jsx(OrientationContext.Provider, {
-		value: orientation,
+const ResizableGroupContext = createContext({
+	orientation: "horizontal",
+	disableCursor: false
+});
+const FLOATING_KEYBOARD_STEP_PX = 10;
+const FLOATING_ARROW_DIRECTIONS = {
+	ArrowLeft: -1,
+	ArrowRight: 1
+};
+function ResizablePanelGroup({ className, orientation = "horizontal", variant = "framed", disableCursor = false, children, ...props }) {
+	return /* @__PURE__ */ jsx(ResizableGroupContext.Provider, {
+		value: {
+			orientation,
+			disableCursor
+		},
 		children: /* @__PURE__ */ jsx(Group, {
 			"data-control-ui": "resizable",
 			"data-control-family": "resizable",
@@ -15,6 +26,7 @@ function ResizablePanelGroup({ className, orientation = "horizontal", variant =
 			"data-surface": "panel",
 			"data-variant": variant,
 			orientation,
+			disableCursor: true,
 			className: cn("flex h-full w-full", className),
 			...props,
 			children
@@ -31,13 +43,15 @@ function ResizablePanel({ className, ...props }) {
 	});
 }
 function ResizableHandle({ className, variant = "solid", withHandle, children, ...props }) {
-	const axis = useContext(OrientationContext) === "horizontal" ? "vertical" : "horizontal";
+	const { orientation, disableCursor } = useContext(ResizableGroupContext);
+	const axis = orientation === "horizontal" ? "vertical" : "horizontal";
 	return /* @__PURE__ */ jsxs(Separator, {
 		"data-control-ui": "resizable",
 		"data-control-family": "resizable",
 		"data-slot": "handle",
 		"data-variant": variant,
 		"data-axis": axis,
+		"data-cursor": disableCursor ? "none" : void 0,
 		className: cn("relative flex items-center justify-center", axis === "vertical" ? "w-px touch-pan-y" : "h-px touch-pan-x", className),
 		...props,
 		children: [withHandle ? /* @__PURE__ */ jsx("span", {
@@ -51,6 +65,112 @@ function ResizableHandle({ className, variant = "solid", withHandle, children, .
 		}) : null, children]
 	});
 }
+function ResizableFloatingPanel({ side = "right", size: controlledSize, defaultSize = 280, onSizeChange, minSize = 160, maxSize = 640, handleVariant = "hover", handleLabel = "Resize panel", className, style, children, ...props }) {
+	const [uncontrolledSize, setUncontrolledSize] = useState(defaultSize);
+	const [hovered, setHovered] = useState(false);
+	const [focused, setFocused] = useState(false);
+	const [resizing, setResizing] = useState(false);
+	const panelRef = useRef(null);
+	const resizeRef = useRef(null);
+	const size = controlledSize ?? uncontrolledSize;
+	const growthPerPointerPx = side === "right" ? -1 : 1;
+	function changeSize(next) {
+		const clamped = Math.round(Math.min(Math.max(next, minSize), maxSize));
+		if (clamped === size) return;
+		if (controlledSize === void 0) setUncontrolledSize(clamped);
+		onSizeChange?.(clamped);
+	}
+	function beginResize(event) {
+		const panel = panelRef.current;
+		if (!panel || !event.isPrimary || event.button !== 0) return;
+		event.preventDefault();
+		event.currentTarget.focus({ preventScroll: true });
+		event.currentTarget.setPointerCapture(event.pointerId);
+		resizeRef.current = {
+			pointerId: event.pointerId,
+			startX: event.clientX,
+			startSize: panel.getBoundingClientRect().width
+		};
+		setResizing(true);
+	}
+	function updateResize(event) {
+		const session = resizeRef.current;
+		if (session?.pointerId !== event.pointerId) return;
+		changeSize(session.startSize + (event.clientX - session.startX) * growthPerPointerPx);
+	}
+	function endResize(event) {
+		if (resizeRef.current?.pointerId !== event.pointerId) return;
+		resizeRef.current = null;
+		setResizing(false);
+	}
+	function resizeWithKeyboard(event) {
+		const arrowDirection = FLOATING_ARROW_DIRECTIONS[event.key];
+		const step = event.shiftKey ? 50 : FLOATING_KEYBOARD_STEP_PX;
+		if (arrowDirection) changeSize(size + arrowDirection * step * growthPerPointerPx);
+		else if (event.key === "Home") changeSize(minSize);
+		else if (event.key === "End") changeSize(maxSize);
+		else return;
+		event.preventDefault();
+	}
+	let separatorState = "inactive";
+	if (resizing) separatorState = "active";
+	else if (focused) separatorState = "focus";
+	else if (hovered) separatorState = "hover";
+	const panelStyle = {
+		...style,
+		"--resizable-floating-width": `${size}px`
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref: panelRef,
+		...props,
+		"data-control-ui": "resizable",
+		"data-control-family": "resizable",
+		"data-slot": "floating",
+		"data-side": side,
+		className: cn("absolute inset-y-2 isolate flex w-(--resizable-floating-width) max-w-[calc(100%-1rem)] flex-col", side === "right" ? "right-2" : "left-2", className),
+		style: panelStyle,
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				"aria-hidden": "true",
+				"data-control-ui": "resizable",
+				"data-control-family": "popup",
+				"data-popup-kind": "resizable",
+				"data-popup-part": "surface",
+				"data-popup-static": "",
+				"data-surface": "floating",
+				"data-slot": "surface",
+				className: "pointer-events-none absolute inset-0 -z-1"
+			}),
+			children,
+			/* @__PURE__ */ jsx("div", {
+				role: "separator",
+				tabIndex: 0,
+				"aria-label": handleLabel,
+				"aria-orientation": "vertical",
+				"aria-valuenow": size,
+				"aria-valuemin": minSize,
+				"aria-valuemax": maxSize,
+				"data-control-ui": "resizable",
+				"data-control-family": "resizable",
+				"data-slot": "handle",
+				"data-variant": handleVariant,
+				"data-axis": "vertical",
+				"data-separator": separatorState,
+				className: cn("absolute inset-y-0 w-px touch-none after:absolute after:inset-y-0 after:-inset-x-1 after:content-['']", side === "right" ? "left-0" : "right-0"),
+				onPointerDown: beginResize,
+				onPointerMove: updateResize,
+				onPointerUp: endResize,
+				onPointerCancel: endResize,
+				onPointerEnter: () => setHovered(true),
+				onPointerLeave: () => setHovered(false),
+				onFocus: () => setFocused(true),
+				onBlur: () => setFocused(false),
+				onKeyDown: resizeWithKeyboard,
+				onDoubleClick: () => changeSize(defaultSize)
+			})
+		]
+	});
+}
 function GripIcon({ className }) {
 	return /* @__PURE__ */ jsxs("svg", {
 		viewBox: "0 0 4 16",
@@ -79,4 +199,4 @@ function GripIcon({ className }) {
 	});
 }
 //#endregion
-export { ResizableHandle, ResizablePanel, ResizablePanelGroup };
+export { ResizableFloatingPanel, ResizableHandle, ResizablePanel, ResizablePanelGroup };

package/dist/ui/responsive-dialog.js

@@ -1,8 +1,8 @@
 "use client";
 import { cn } from "../lib/cn.js";
 import { Button } from "./button.js";
+import { Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger } from "./drawer.js";
 import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "./dialog.js";
-import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger } from "./drawer.js";
 import { createContext, useContext, useState, useSyncExternalStore } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/ui/responsive-dialog.tsx
@@ -81,9 +81,12 @@ function ResponsiveDialogContent({ className, dialogClassName, drawerClassName,
 		children
 	});
 	return /* @__PURE__ */ jsxs(DrawerContent, {
-		className: cn("relative pb-[max(1rem,env(safe-area-inset-bottom))]", className, drawerClassName),
+		className: cn("relative", className, drawerClassName),
 		...props,
-		children: [children, showCloseButton ? /* @__PURE__ */ jsxs(ResponsiveDialogClose, {
+		children: [/* @__PURE__ */ jsx(DrawerBody, {
+			padding: "none",
+			children
+		}), showCloseButton ? /* @__PURE__ */ jsxs(ResponsiveDialogClose, {
 			variant: "ghost",
 			size: "xs",
 			className: "absolute right-3 top-3 w-[var(--control-h-xs)] px-0",

package/dist/ui/rich-tooltip.js

@@ -1,6 +1,6 @@
 "use client";
-import { cn } from "../lib/cn.js";
 import { controlEffectsAttribute } from "../skin.js";
+import { cn } from "../lib/cn.js";
 import { useSkin } from "../skin-provider.js";
 import { stepAfter, stepBefore, tourPosition } from "./rich-tooltip-tour.js";
 import { createContext, useContext, useEffect, useState } from "react";

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

@@ -1,6 +1,7 @@
 import { ScrollAreaKnobStyle } from "../knob-contracts/scroll-area-knobs.js";
 import { ProgressiveBlurProps } from "./progressive-blur.js";
 import { CSSProperties, ComponentProps, Ref } from "react";
+import { ScrollArea as ScrollArea$1 } from "@base-ui/react/scroll-area";
 //#region src/ui/scroll-area.d.ts
 export declare const scrollAreaScrollbarVisibilities: readonly ["scroll", "hover", "always"];
 export type ScrollAreaScrollbarVisibility = (typeof scrollAreaScrollbarVisibilities)[number];
@@ -9,11 +10,13 @@ export type ScrollAreaViewportProps = Omit<ComponentProps<"div">, "children" | "
   "data-control-ui"?: string;
   "data-control-family"?: string;
   "data-slot"?: string;
+  render?: ComponentProps<typeof ScrollArea$1.Viewport>["render"];
 };
 export type ScrollAreaProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & ScrollAreaKnobStyle;
 } & {
   viewportClassName?: string;
+  contentClassName?: string;
   viewportProps?: ScrollAreaViewportProps;
   viewportRef?: Ref<HTMLDivElement>;
   maxHeight?: string;
@@ -23,5 +26,5 @@ export type ScrollAreaProps = Omit<ComponentProps<"div">, "style"> & {
   lockAxis?: ScrollAreaLockAxis;
   scrollbarVisibility?: ScrollAreaScrollbarVisibility;
 };
-export declare function ScrollArea({ className, viewportClassName, viewportProps, viewportRef, maxHeight, mask, blur, blurProps, lockAxis, scrollbarVisibility, children, style, ...props }: ScrollAreaProps): import("react").JSX.Element;
+export declare function ScrollArea({ className, viewportClassName, contentClassName, viewportProps, viewportRef, maxHeight, mask, blur, blurProps, lockAxis, scrollbarVisibility, children, style, ...props }: ScrollAreaProps): import("react").JSX.Element;
 //#endregion

package/dist/ui/scroll-area.js

@@ -35,7 +35,7 @@ function viewportStyle(maxHeight, lockX, lockY) {
 		...lockY ? { overflowY: "hidden" } : {}
 	};
 }
-function ScrollArea({ className, viewportClassName, viewportProps, viewportRef, maxHeight, mask = true, blur, blurProps, lockAxis, scrollbarVisibility = "scroll", children, style, ...props }) {
+function ScrollArea({ className, viewportClassName, contentClassName, viewportProps, viewportRef, maxHeight, mask = true, blur, blurProps, lockAxis, scrollbarVisibility = "hover", children, style, ...props }) {
 	const skin = useSkin();
 	const resolvedBlur = blur ?? skin.scrollAreaBlur ?? false;
 	const lockX = lockAxis === "x" || lockAxis === "both";
@@ -72,6 +72,7 @@ function ScrollArea({ className, viewportClassName, viewportProps, viewportRef,
 					"data-control-ui": "scroll-area",
 					"data-control-family": "scroll-area",
 					"data-slot": "content",
+					className: contentClassName,
 					style: { minWidth: 0 },
 					children
 				})

package/dist/ui/select.d.ts

@@ -2,6 +2,7 @@ import { ControlledChoice } 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 { FieldKnobStyle } from "../knob-contracts/field-knobs.js";
 import { CSSProperties, ComponentProps, ReactNode } from "react";
 import { Select as Select$1 } from "@base-ui/react/select";
 //#region src/ui/select.d.ts
@@ -21,7 +22,7 @@ export type SelectProps<TValue extends string = string> = Omit<ControlledChoice<
 export declare const selectTriggerVariants: readonly ["surface", "ghost"];
 export type SelectTriggerVariant = (typeof selectTriggerVariants)[number];
 export type SelectTriggerProps = Omit<ComponentProps<"button">, "style"> & {
-  style?: CSSProperties & ButtonKnobStyle;
+  style?: CSSProperties & FieldKnobStyle & ButtonKnobStyle;
 } & {
   size?: ControlSize;
   variant?: SelectTriggerVariant;

package/dist/ui/select.js

@@ -1,7 +1,9 @@
 "use client";
-import { cn } from "../lib/cn.js";
 import { controlEffectsAttribute } from "../skin.js";
+import { cn } from "../lib/cn.js";
 import { useSkin } from "../skin-provider.js";
+import { Button } from "./button.js";
+import { ScrollArea } from "./scroll-area.js";
 import { popupItemStructureClasses } from "../surface-variants.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Select as Select$1 } from "@base-ui/react/select";
@@ -16,46 +18,58 @@ function Select({ children, onValueChange, ...props }) {
 		children
 	});
 }
+const selectTriggerLayoutClasses = "group relative isolate inline-flex shrink-0 items-center justify-between overflow-visible";
+function SelectIcon() {
+	return /* @__PURE__ */ jsx(Select$1.Icon, {
+		"data-control-ui": "select",
+		"data-control-family": "popup",
+		"data-popup-kind": "select",
+		"data-slot": "icon",
+		className: "relative z-[1]",
+		children: /* @__PURE__ */ jsx("svg", {
+			viewBox: "0 0 12 12",
+			className: "size-3",
+			"aria-hidden": "true",
+			fill: "none",
+			children: /* @__PURE__ */ jsx("path", {
+				d: "M3 4.5 6 7.5 9 4.5",
+				stroke: "currentColor",
+				strokeWidth: "1.3",
+				strokeLinecap: "round",
+				strokeLinejoin: "round"
+			})
+		})
+	});
+}
 function SelectTrigger({ size = "sm", variant = "surface", className, children, disabled, ...props }) {
+	if (variant === "ghost") return /* @__PURE__ */ jsxs(Select$1.Trigger, {
+		render: /* @__PURE__ */ jsx(Button, {
+			variant: "ghost",
+			size
+		}),
+		className: cn(selectTriggerLayoutClasses, className),
+		disabled,
+		...props,
+		children: [children, /* @__PURE__ */ jsx(SelectIcon, {})]
+	});
 	return /* @__PURE__ */ jsxs(Select$1.Trigger, {
 		"data-control-ui": "select",
-		"data-control-family": "button",
-		"data-popup-kind": "select",
+		"data-control-family": "field",
+		"data-field-kind": "select",
 		"data-slot": "trigger",
 		"data-control": "true",
 		"data-size": size,
-		"data-variant": variant,
-		"data-tone": "neutral",
-		"data-shape": "default",
-		className: cn("group relative isolate inline-flex shrink-0 items-center justify-between overflow-visible", className),
+		className: cn(selectTriggerLayoutClasses, className),
 		disabled,
 		...props,
 		children: [/* @__PURE__ */ jsx("span", {
-			"data-control-ui": "button",
-			"data-control-family": "button",
-			"data-slot": "content",
-			className: "relative z-[1] inline-flex min-w-0 items-center justify-center gap-[inherit]",
-			children
-		}), /* @__PURE__ */ jsx(Select$1.Icon, {
 			"data-control-ui": "select",
-			"data-control-family": "popup",
-			"data-popup-kind": "select",
-			"data-slot": "icon",
-			className: "relative z-[1]",
-			children: /* @__PURE__ */ jsx("svg", {
-				viewBox: "0 0 12 12",
-				className: "size-3",
-				"aria-hidden": "true",
-				fill: "none",
-				children: /* @__PURE__ */ jsx("path", {
-					d: "M3 4.5 6 7.5 9 4.5",
-					stroke: "currentColor",
-					strokeWidth: "1.3",
-					strokeLinecap: "round",
-					strokeLinejoin: "round"
-				})
-			})
-		})]
+			"data-control-family": "field",
+			"data-field-kind": "select",
+			"data-slot": "value",
+			className: "inline-flex min-w-0 items-center gap-[inherit]",
+			children
+		}), /* @__PURE__ */ jsx(SelectIcon, {})]
 	});
 }
 function SelectValue({ children, ...props }) {
@@ -82,12 +96,19 @@ function SelectContent({ className, children, alignItemWithTrigger = false, ...p
 			"data-surface": "floating",
 			"data-control-family": "popup",
 			"data-popup-part": "list-surface",
-			className: cn("max-h-[min(20rem,var(--available-height))] min-w-[var(--anchor-width)] overflow-y-auto", className),
+			className: cn("grid max-h-[min(20rem,var(--available-height))] min-w-[var(--anchor-width)] grid-rows-[minmax(0,1fr)]", className),
 			...props,
-			children
+			children: /* @__PURE__ */ jsx(ScrollArea, {
+				lockAxis: "x",
+				viewportProps: { render: renderListAsScrollViewport },
+				children
+			})
 		})
 	}) });
 }
+function renderListAsScrollViewport({ role: _role, tabIndex: _tabIndex, ...viewportProps }) {
+	return /* @__PURE__ */ jsx(Select$1.List, { ...viewportProps });
+}
 function SelectItem({ className, children, disabled, ...props }) {
 	return /* @__PURE__ */ jsxs(Select$1.Item, {
 		"data-control-ui": "select",
@@ -99,6 +120,10 @@ function SelectItem({ className, children, disabled, ...props }) {
 		className: cn(popupItemStructureClasses, className),
 		...props,
 		children: [/* @__PURE__ */ jsx(Select$1.ItemText, {
+			"data-control-ui": "select",
+			"data-control-family": "popup",
+			"data-popup-kind": "select",
+			"data-slot": "item-text",
 			className: "flex min-w-0 flex-1 items-center",
 			children
 		}), /* @__PURE__ */ jsx("span", {

package/dist/ui/sheet.js

@@ -1,6 +1,6 @@
 "use client";
-import { cn } from "../lib/cn.js";
 import { controlEffectsAttribute } from "../skin.js";
+import { cn } from "../lib/cn.js";
 import { useSkin } from "../skin-provider.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Dialog } from "@base-ui/react/dialog";

package/dist/ui/sidebar-menu.js

@@ -5,8 +5,8 @@ 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 { useRender } from "@base-ui/react/use-render";
 import { cva } from "class-variance-authority";
 //#region src/ui/sidebar-menu.tsx
 const sidebarMenuButtonVariants = ["default", "outline"];