@ctrl-ui/react 0.8.10 → 0.8.12

package/dist/ui/icon-picker.js

@@ -0,0 +1,140 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { Input } from "./input.js";
+import { Toolbar } from "@base-ui/react/toolbar";
+import { createContext, useContext, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Radio } from "@base-ui/react/radio";
+import { RadioGroup } from "@base-ui/react/radio-group";
+//#region src/ui/icon-picker.tsx
+const IconPickerContext = createContext(null);
+function useIconPicker() {
+	const picker = useContext(IconPickerContext);
+	if (!picker) throw new Error("IconPicker parts must be rendered inside <IconPicker>.");
+	return picker;
+}
+function IconPicker({ items, columns = 8, value, defaultValue, onValueChange, className, style, children, ...props }) {
+	const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+	const [search, setSearch] = useState("");
+	const selectIcon = (selectedValue) => {
+		if (value === void 0) setUncontrolledValue(selectedValue);
+		onValueChange?.(selectedValue);
+	};
+	const pickerStyle = {
+		"--_icon-picker-columns": columns,
+		...style
+	};
+	return /* @__PURE__ */ jsx(IconPickerContext.Provider, {
+		value: {
+			items,
+			columns,
+			selectedValue: value ?? uncontrolledValue,
+			selectIcon,
+			search,
+			setSearch
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			"data-control-ui": "icon-picker",
+			"data-control-family": "icon-picker",
+			"data-slot": "root",
+			className,
+			style: pickerStyle,
+			...props,
+			children
+		})
+	});
+}
+function IconPickerSearch({ placeholder = "Search icons…", "aria-label": ariaLabel = "Search icons", className, onChange, ...props }) {
+	const picker = useIconPicker();
+	return /* @__PURE__ */ jsx(Input, {
+		type: "search",
+		size: "sm",
+		placeholder,
+		"aria-label": ariaLabel,
+		autoComplete: "off",
+		spellCheck: false,
+		className: cn("mx-2 mt-2 w-[calc(100%-var(--spacing)*4)]", className),
+		...props,
+		value: picker.search,
+		onChange: (event) => {
+			onChange?.(event);
+			if (!event.defaultPrevented) picker.setSearch(event.target.value);
+		}
+	});
+}
+function IconPickerContent({ className, empty = "No icons found.", "aria-label": ariaLabel = "Icons", ...props }) {
+	const picker = useIconPicker();
+	const buttonsRef = useRef(/* @__PURE__ */ new Map());
+	const normalizedSearch = picker.search.trim().toLocaleLowerCase();
+	const filteredItems = picker.items.filter((item) => [item.label, ...item.keywords ?? []].some((text) => text.toLocaleLowerCase().includes(normalizedSearch)));
+	const moveGridFocus = (event) => {
+		if (event.key !== "ArrowUp" && event.key !== "ArrowDown") return;
+		const currentIndex = filteredItems.findIndex((item) => buttonsRef.current.get(item.value) === event.target);
+		if (currentIndex < 0) return;
+		event.preventDefault();
+		const direction = event.key === "ArrowDown" ? 1 : -1;
+		const nextIndex = Math.max(0, Math.min(filteredItems.length - 1, currentIndex + direction * picker.columns));
+		buttonsRef.current.get(filteredItems[nextIndex].value)?.focus();
+	};
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "icon-picker",
+		"data-control-family": "icon-picker",
+		"data-slot": "content",
+		className,
+		...props,
+		children: filteredItems.length === 0 ? /* @__PURE__ */ jsx("div", {
+			"data-control-ui": "icon-picker",
+			"data-control-family": "icon-picker",
+			"data-slot": "empty",
+			role: "status",
+			children: empty
+		}) : /* @__PURE__ */ jsx(Toolbar.Root, {
+			"data-control-ui": "icon-picker",
+			"data-control-family": "icon-picker",
+			"data-slot": "grid",
+			"aria-label": ariaLabel,
+			loopFocus: false,
+			onKeyDownCapture: moveGridFocus,
+			children: filteredItems.map((item) => /* @__PURE__ */ jsx(Toolbar.Button, {
+				type: "button",
+				"aria-label": item.label,
+				"aria-pressed": picker.selectedValue === item.value,
+				"data-control-ui": "icon-picker",
+				"data-control-family": "icon-picker",
+				"data-slot": "icon",
+				ref: (button) => {
+					if (!button) return;
+					buttonsRef.current.set(item.value, button);
+					return () => {
+						buttonsRef.current.delete(item.value);
+					};
+				},
+				onClick: () => picker.selectIcon(item.value),
+				children: /* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					children: item.icon
+				})
+			}, item.value))
+		})
+	});
+}
+function IconPickerColors({ colors, "aria-label": ariaLabel = "Icon color", ...props }) {
+	return /* @__PURE__ */ jsx(RadioGroup, {
+		"data-control-ui": "icon-picker",
+		"data-control-family": "icon-picker",
+		"data-slot": "colors",
+		"aria-label": ariaLabel,
+		...props,
+		children: colors.map((color) => /* @__PURE__ */ jsx(Radio.Root, {
+			value: color.value,
+			"aria-label": color.label,
+			"data-control-ui": "icon-picker",
+			"data-control-family": "icon-picker",
+			"data-slot": "color",
+			style: { color: color.color },
+			children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true" })
+		}, color.value))
+	});
+}
+//#endregion
+export { IconPicker, IconPickerColors, IconPickerContent, IconPickerSearch };

package/dist/ui/input-group.js

@@ -1,8 +1,8 @@
 "use client";
 import { cn } from "../lib/cn.js";
 import { createContext, use } from "react";
-import { jsx } from "react/jsx-runtime";
 import { useRender } from "@base-ui/react/use-render";
+import { jsx } from "react/jsx-runtime";
 //#region src/ui/input-group.tsx
 const InputGroupSurfaceContext = createContext(false);
 function useIsInsideInputGroup() {

package/dist/ui/item.js

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

package/dist/ui/markdown-elements.js

@@ -35,17 +35,13 @@ function MarkdownCode({ className, children, node: _node, ...props }) {
 	if (lang === "diff" && value.includes("@@")) return /* @__PURE__ */ jsx(CodeDiff, {
 		patch: value,
 		lang: "diff",
-		diffStyle: "unified",
-		className: "my-4"
-	});
-	return /* @__PURE__ */ jsxs(Code, {
-		className: "my-4",
-		children: [/* @__PURE__ */ jsxs(CodeHeader, { children: [lang ? /* @__PURE__ */ jsx(CodeTitle, { children: lang }) : null, /* @__PURE__ */ jsx(CodeActions, { children: /* @__PURE__ */ jsx(CodeCopy, { value }) })] }), /* @__PURE__ */ jsx(CodeContent, {
-			code: value,
-			lang,
-			highlight: lang ? "auto" : "none"
-		})]
+		diffStyle: "unified"
 	});
+	return /* @__PURE__ */ jsxs(Code, { children: [/* @__PURE__ */ jsxs(CodeHeader, { children: [lang ? /* @__PURE__ */ jsx(CodeTitle, { children: lang }) : null, /* @__PURE__ */ jsx(CodeActions, { children: /* @__PURE__ */ jsx(CodeCopy, { value }) })] }), /* @__PURE__ */ jsx(CodeContent, {
+		code: value,
+		lang,
+		highlight: lang ? "auto" : "none"
+	})] });
 }
 function MarkdownH1({ className, node: _node, ...props }) {
 	return /* @__PURE__ */ jsx("h1", {

package/dist/ui/markdown.d.ts

@@ -1,13 +1,14 @@
 import { MarkdownKnobStyle } from "../knob-contracts/markdown-knobs.js";
 import { CSSProperties, ComponentProps } from "react";
 //#region src/ui/markdown.d.ts
-export type MarkdownProps = Omit<ComponentProps<"div">, "children" | "style"> & {
-  content: string;
+export type MarkdownRootProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & MarkdownKnobStyle;
 };
-export declare function MarkdownRoot({ className, ...props }: Omit<ComponentProps<"div">, "style"> & {
-  style?: CSSProperties & MarkdownKnobStyle;
-}): import("react").JSX.Element;
+export type MarkdownProps = Omit<MarkdownRootProps, "children"> & {
+  content: string;
+};
+export declare function MarkdownRoot({ className, ...props }: MarkdownRootProps): import("react").JSX.Element;
+export declare function MarkdownFlow(props: MarkdownRootProps): import("react").JSX.Element;
 export declare function Markdown({ content, className, ...props }: MarkdownProps): import("react").JSX.Element;
 export type MarkdownComponentProps = ComponentProps<typeof Markdown>;
 //#endregion

package/dist/ui/markdown.js

@@ -13,19 +13,27 @@ function MarkdownRoot({ className, ...props }) {
 		...props
 	});
 }
+function MarkdownFlow(props) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "markdown",
+		"data-control-family": "markdown",
+		"data-slot": "flow",
+		...props
+	});
+}
 function Markdown({ content, className, ...props }) {
 	return /* @__PURE__ */ jsx(MarkdownRoot, {
 		className,
 		...props,
-		children: /* @__PURE__ */ jsx(Streamdown, {
+		children: /* @__PURE__ */ jsx(MarkdownFlow, { children: /* @__PURE__ */ jsx(Streamdown, {
 			mode: "streaming",
 			parseIncompleteMarkdown: true,
 			controls: false,
 			components: markdownComponents,
-			className: "space-y-4 whitespace-normal [&>*:first-child]:mt-0 [&>*:last-child]:mb-0",
+			className: "cui-markdown-streamdown [&>[data-control-family]]:[margin-block:revert-layer]",
 			children: content
-		})
+		}) })
 	});
 }
 //#endregion
-export { Markdown, MarkdownRoot };
+export { Markdown, MarkdownFlow, MarkdownRoot };

package/dist/ui/menubar.js

@@ -1,6 +1,6 @@
 "use client";
-import { controlEffectsAttribute } from "../skin.js";
 import { cn } from "../lib/cn.js";
+import { controlEffectsAttribute } from "../skin.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 { jsx } from "react/jsx-runtime";
 import { useRender } from "@base-ui/react/use-render";
+import { jsx } from "react/jsx-runtime";
 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 { controlEffectsAttribute } from "../skin.js";
 import { cn } from "../lib/cn.js";
+import { controlEffectsAttribute } from "../skin.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/phone-input.js

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

package/dist/ui/popover.d.ts

@@ -18,6 +18,9 @@ export declare function PopoverTrigger({ className, ...props }: ComponentProps<t
 }): import("react").JSX.Element;
 export declare function PopoverAnchor(props: ComponentProps<typeof Popover$1.Trigger>): import("react").JSX.Element;
 export declare function PopoverContent({ className, children, side, align, sideOffset, collisionPadding, padding, ...props }: PopoverPopupProps): import("react").JSX.Element;
+export declare function PopoverViewport({ children, ref, ...props }: ComponentProps<"div"> & {
+  style?: CSSProperties & PopupKnobStyle;
+}): import("react").JSX.Element;
 export declare function PopoverHeader({ className, ...props }: ComponentProps<"div"> & {
   style?: CSSProperties & PopupKnobStyle;
 }): import("react").JSX.Element;

package/dist/ui/popover.js

@@ -1,7 +1,8 @@
 "use client";
-import { controlEffectsAttribute } from "../skin.js";
 import { cn } from "../lib/cn.js";
+import { controlEffectsAttribute } from "../skin.js";
 import { useSkin } from "../skin-provider.js";
+import { useImperativeHandle, useLayoutEffect, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 import { Popover as Popover$1 } from "@base-ui/react/popover";
 //#region src/ui/popover.tsx
@@ -45,6 +46,40 @@ function PopoverContent({ className, children, side = "bottom", align = "center"
 		})
 	}) });
 }
+function PopoverViewport({ children, ref, ...props }) {
+	const viewportRef = useRef(null);
+	const contentRef = useRef(null);
+	useImperativeHandle(ref, () => {
+		if (!viewportRef.current) throw new Error("PopoverViewport is not mounted.");
+		return viewportRef.current;
+	}, []);
+	useLayoutEffect(() => {
+		const viewport = viewportRef.current;
+		const content = contentRef.current;
+		if (!viewport || !content) return;
+		const updateHeight = () => viewport.style.setProperty("--_popover-viewport-height", `${content.offsetHeight}px`);
+		updateHeight();
+		const observer = new ResizeObserver(updateHeight);
+		observer.observe(content);
+		return () => observer.disconnect();
+	}, []);
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "popover",
+		"data-control-family": "popup",
+		"data-popup-kind": "popover",
+		"data-slot": "viewport",
+		...props,
+		ref: viewportRef,
+		children: /* @__PURE__ */ jsx("div", {
+			"data-control-ui": "popover",
+			"data-control-family": "popup",
+			"data-popup-kind": "popover",
+			"data-slot": "viewport-content",
+			ref: contentRef,
+			children
+		})
+	});
+}
 function PopoverHeader({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-control-ui": "popover",
@@ -86,4 +121,4 @@ function PopoverClose({ className, ...props }) {
 	});
 }
 //#endregion
-export { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, popoverContentPaddings };
+export { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, PopoverViewport, popoverContentPaddings };

package/dist/ui/rich-tooltip.js

@@ -1,6 +1,6 @@
 "use client";
-import { controlEffectsAttribute } from "../skin.js";
 import { cn } from "../lib/cn.js";
+import { controlEffectsAttribute } from "../skin.js";
 import { useSkin } from "../skin-provider.js";
 import { prefersReducedMotion } from "../lib/motion.js";
 import { PopupArrowShape } from "../popup-parts.js";

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

@@ -5,6 +5,8 @@ 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];
+export declare const scrollAreaScrollbarGutters: readonly ["auto", "stable"];
+export type ScrollAreaScrollbarGutter = (typeof scrollAreaScrollbarGutters)[number];
 export type ScrollAreaLockAxis = "x" | "y" | "both";
 export type ScrollAreaViewportProps = Omit<ComponentProps<"div">, "children" | "className" | "ref"> & {
   "data-control-ui"?: string;
@@ -25,6 +27,7 @@ export type ScrollAreaProps = Omit<ComponentProps<"div">, "style"> & {
   blurProps?: Pick<ProgressiveBlurProps, "style">;
   lockAxis?: ScrollAreaLockAxis;
   scrollbarVisibility?: ScrollAreaScrollbarVisibility;
+  scrollbarGutter?: ScrollAreaScrollbarGutter;
 };
-export declare function ScrollArea({ className, viewportClassName, contentClassName, viewportProps, viewportRef, maxHeight, mask, blur, blurProps, lockAxis, scrollbarVisibility, children, style, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...props }: ScrollAreaProps): import("react").JSX.Element;
+export declare function ScrollArea({ className, viewportClassName, contentClassName, viewportProps, viewportRef, maxHeight, mask, blur, blurProps, lockAxis, scrollbarVisibility, scrollbarGutter, children, style, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...props }: ScrollAreaProps): import("react").JSX.Element;
 //#endregion

package/dist/ui/scroll-area.js

@@ -10,14 +10,20 @@ const scrollAreaScrollbarVisibilities = [
 	"hover",
 	"always"
 ];
-function Scrollbar({ orientation, visibility, thumbStyle }) {
+const scrollAreaScrollbarGutters = ["auto", "stable"];
+function Scrollbar({ orientation, visibility, gutter, thumbStyle }) {
 	return /* @__PURE__ */ jsx(ScrollArea$1.Scrollbar, {
 		orientation,
+		keepMounted: gutter === "stable",
 		"data-control-ui": "scroll-area",
 		"data-control-family": "scroll-area",
 		"data-slot": "scrollbar",
 		"data-visibility": visibility,
 		className: cn("m-px flex touch-none select-none", orientation === "vertical" ? "justify-center" : "flex-col"),
+		style: gutter === "stable" ? {
+			position: "relative",
+			inset: "auto"
+		} : void 0,
 		children: /* @__PURE__ */ jsx(ScrollArea$1.Thumb, {
 			"data-control-ui": "scroll-area",
 			"data-control-family": "scroll-area",
@@ -68,9 +74,11 @@ function EdgeBlurs({ blurProps, lockX, lockY }) {
 		})
 	] });
 }
-function ScrollArea({ className, viewportClassName, contentClassName, viewportProps, viewportRef, maxHeight, mask = true, blur, blurProps, lockAxis, scrollbarVisibility = "hover", children, style, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...props }) {
+function ScrollArea({ className, viewportClassName, contentClassName, viewportProps, viewportRef, maxHeight, mask = true, blur, blurProps, lockAxis, scrollbarVisibility, scrollbarGutter, children, style, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...props }) {
 	const skin = useSkin();
 	const resolvedBlur = blur ?? skin.scrollAreaBlur ?? false;
+	const resolvedVisibility = scrollbarVisibility ?? skin.scrollAreaScrollbarVisibility ?? "hover";
+	const resolvedGutter = scrollbarGutter ?? skin.scrollAreaScrollbarGutter ?? "auto";
 	const lockX = lockAxis === "x" || lockAxis === "both";
 	const lockY = lockAxis === "y" || lockAxis === "both";
 	const { style: viewportPropsStyle, ...resolvedViewportProps } = viewportProps ?? {};
@@ -85,6 +93,7 @@ function ScrollArea({ className, viewportClassName, contentClassName, viewportPr
 		"data-mask": mask || void 0,
 		"data-blur": resolvedBlur || void 0,
 		"data-lock-axis": lockAxis,
+		"data-scrollbar-gutter": resolvedGutter,
 		className: cn("relative overflow-hidden", className),
 		style,
 		children: [
@@ -114,22 +123,28 @@ function ScrollArea({ className, viewportClassName, contentClassName, viewportPr
 			}),
 			!lockY && /* @__PURE__ */ jsx(Scrollbar, {
 				orientation: "vertical",
-				visibility: scrollbarVisibility,
+				visibility: resolvedVisibility,
+				gutter: resolvedGutter,
 				thumbStyle
 			}),
 			!lockX && /* @__PURE__ */ jsx(Scrollbar, {
 				orientation: "horizontal",
-				visibility: scrollbarVisibility,
+				visibility: resolvedVisibility,
+				gutter: resolvedGutter,
 				thumbStyle
 			}),
 			!lockX && !lockY && /* @__PURE__ */ jsx(ScrollArea$1.Corner, {
 				"data-control-ui": "scroll-area",
 				"data-control-family": "scroll-area",
 				"data-slot": "corner",
-				style: cornerStyle
+				style: resolvedGutter === "stable" ? {
+					...cornerStyle,
+					position: "relative",
+					inset: "auto"
+				} : cornerStyle
 			})
 		]
 	});
 }
 //#endregion
-export { ScrollArea, scrollAreaScrollbarVisibilities };
+export { ScrollArea, scrollAreaScrollbarGutters, scrollAreaScrollbarVisibilities };

package/dist/ui/select.js

@@ -1,6 +1,6 @@
 "use client";
-import { controlEffectsAttribute } from "../skin.js";
 import { cn } from "../lib/cn.js";
+import { controlEffectsAttribute } from "../skin.js";
 import { useSkin } from "../skin-provider.js";
 import { Button } from "./button.js";
 import { ScrollArea } from "./scroll-area.js";

package/dist/ui/sheet.js

@@ -1,6 +1,6 @@
 "use client";
-import { controlEffectsAttribute } from "../skin.js";
 import { cn } from "../lib/cn.js";
+import { controlEffectsAttribute } from "../skin.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 { SidebarSurfaceContext, useSidebar } from "./sidebar-provider.js";
 import { TrackHighlight } from "../extensions/track-highlight.js";
 import { createContext, useContext, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { useRender } from "@base-ui/react/use-render";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/ui/sidebar-menu.tsx
 const sidebarMenuButtonVariants = ["default", "outline"];
 const sidebarMenuButtonSizes = [

package/dist/ui/sidebar-provider.js

@@ -1,12 +1,12 @@
 "use client";
 import { cn } from "../lib/cn.js";
 import { useSkin } from "../skin-provider.js";
-import { TooltipProvider } from "./tooltip.js";
 import { SIDEBAR_COOKIE_NAME } from "../control-props.js";
+import { TooltipProvider } from "./tooltip.js";
 import { useIsMobile } from "../hooks/use-mobile.js";
 import { createContext, useContext, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useRender } from "@base-ui/react/use-render";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/ui/sidebar-provider.tsx
 const SIDEBAR_COOKIE_MAX_AGE = 604800;
 const SIDEBAR_WIDTH = "16rem";

package/dist/ui/sidebar-resize-rail.js

@@ -2,8 +2,8 @@
 import { cn } from "../lib/cn.js";
 import { useSidebar, useSidebarElements, useSidebarSurface } from "./sidebar-provider.js";
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useRender } from "@base-ui/react/use-render";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/ui/sidebar-resize-rail.tsx
 const DRAG_THRESHOLD_PX = 5;
 const KEYBOARD_STEP_PX = 10;

package/dist/ui/sidebar.js

@@ -8,9 +8,9 @@ import { SidebarProvider, SidebarSurfaceContext, useSidebar, useSidebarElements,
 import { SidebarResizeRail } from "./sidebar-resize-rail.js";
 import { SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, sidebarMenuButtonSizes, sidebarMenuButtonVariants } from "./sidebar-menu.js";
 import { useState } from "react";
+import { useRender } from "@base-ui/react/use-render";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { PanelLeftIcon } from "lucide-react";
-import { useRender } from "@base-ui/react/use-render";
 import { createPortal } from "react-dom";
 //#region src/ui/sidebar.tsx
 const SIDEBAR_WIDTH_MOBILE = "18rem";

package/dist/ui/tabs.d.ts

@@ -32,6 +32,10 @@ export type TabsPanelProps = Omit<ComponentProps<"div">, "style"> & {
   value: string;
   keepMounted?: boolean;
 };
+export type TabsSurfaceProps = Omit<ComponentProps<"div">, "style"> & {
+  style?: CSSProperties & TabsKnobStyle;
+};
+export declare function TabsSurface({ className, ...props }: TabsSurfaceProps): import("react").JSX.Element;
 export declare function Tabs<TValue extends string = string>({ className, onValueChange, children, ...props }: TabsProps<TValue>): import("react").JSX.Element;
 export declare function TabsList({ size, variant, className, children, style, ...props }: TabsListProps): import("react").JSX.Element;
 export declare function TabsTab({ className, ...props }: TabsTabProps): import("react").JSX.Element;