@ctrl-ui/react 0.8.6 → 0.8.8

package/dist/ui/native-select.js

@@ -1,19 +1,32 @@
+"use client";
 import { cn } from "../lib/cn.js";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { Input } from "@base-ui/react/input";
 //#region src/ui/native-select.tsx
-function NativeSelect({ size = "md", className, children, ...props }) {
+function NativeSelect({ ref, id, name, value, defaultValue, disabled, autoFocus, size = "md", className, children, ...props }) {
 	return /* @__PURE__ */ jsxs("div", {
+		"data-control-family": "field",
+		"data-field-kind": "native-select",
 		className: "relative inline-flex w-full items-center",
-		children: [/* @__PURE__ */ jsx("select", {
-			"data-control-ui": "native-select",
-			"data-field-kind": "native-select",
-			"data-slot": "root",
-			"data-size": size,
-			"data-control-family": "field",
-			"data-control": "true",
-			className: cn("w-full min-w-0 cursor-pointer", className),
-			...props,
-			children
+		children: [/* @__PURE__ */ jsx(Input, {
+			ref,
+			id,
+			name,
+			value,
+			defaultValue,
+			disabled,
+			autoFocus,
+			render: /* @__PURE__ */ jsx("select", {
+				...props,
+				"data-control-ui": "native-select",
+				"data-field-kind": "native-select",
+				"data-slot": "root",
+				"data-size": size,
+				"data-control-family": "field",
+				"data-control": "true",
+				className: cn("w-full min-w-0 cursor-pointer", className),
+				children
+			})
 		}), /* @__PURE__ */ jsx("span", {
 			"aria-hidden": "true",
 			"data-control-ui": "native-select",

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/page-layout.d.ts

@@ -26,11 +26,11 @@ export declare function PageHeader({ variant, className, ...props }: PageHeaderP
 export type PageTitleProps = Omit<ComponentProps<"h1">, "style"> & {
   style?: PageStyle;
 };
-export declare function PageTitle({ className, ...props }: PageTitleProps): import("react").JSX.Element;
+export declare function PageTitle(props: PageTitleProps): import("react").JSX.Element;
 export type PageDescriptionProps = Omit<ComponentProps<"p">, "style"> & {
   style?: PageStyle;
 };
-export declare function PageDescription({ className, ...props }: PageDescriptionProps): import("react").JSX.Element;
+export declare function PageDescription(props: PageDescriptionProps): import("react").JSX.Element;
 export type PageActionsProps = Omit<ComponentProps<"div">, "style"> & {
   style?: PageStyle;
 };

package/dist/ui/page-layout.js

@@ -55,21 +55,19 @@ function PageHeader({ variant = "flow", className, ...props }) {
 		...props
 	});
 }
-function PageTitle({ className, ...props }) {
+function PageTitle(props) {
 	return /* @__PURE__ */ jsx("h1", {
 		"data-control-ui": "page-layout",
 		"data-control-family": "page-layout",
 		"data-slot": "title",
-		className: cn("text-balance", className),
 		...props
 	});
 }
-function PageDescription({ className, ...props }) {
+function PageDescription(props) {
 	return /* @__PURE__ */ jsx("p", {
 		"data-control-ui": "page-layout",
 		"data-control-family": "page-layout",
 		"data-slot": "description",
-		className: cn("text-pretty", className),
 		...props
 	});
 }

package/dist/ui/pagination.d.ts

@@ -1,11 +1,13 @@
 import { PaginationKnobStyle } from "../knob-contracts/pagination-knobs.js";
 import { CSSProperties, ComponentProps } from "react";
 //#region src/ui/pagination.d.ts
-export type PaginationEllipsisProps = Omit<ComponentProps<"span">, "style"> & {
+export type PaginationEllipsisProps = Omit<ComponentProps<"span">, "style" | "children"> & {
+  label?: string;
   style?: CSSProperties & PaginationKnobStyle;
 };
 export type PaginationLinkProps = Omit<ComponentProps<"a"> & {
   isActive?: boolean;
+  disabled?: boolean;
 }, "style"> & {
   style?: CSSProperties & PaginationKnobStyle;
 };
@@ -18,8 +20,8 @@ export declare function PaginationContent({ className, ...props }: ComponentProp
 export declare function PaginationItem({ className, ...props }: ComponentProps<"li"> & {
   style?: CSSProperties & PaginationKnobStyle;
 }): import("react").JSX.Element;
-export declare function PaginationLink({ isActive, className, ...props }: PaginationLinkProps): import("react").JSX.Element;
-export declare function PaginationPrevious({ className, ...props }: ComponentProps<typeof PaginationLink>): import("react").JSX.Element;
-export declare function PaginationNext({ className, ...props }: ComponentProps<typeof PaginationLink>): import("react").JSX.Element;
-export declare function PaginationEllipsis({ className, ...props }: PaginationEllipsisProps): import("react").JSX.Element;
+export declare function PaginationLink({ isActive, disabled, href, className, ...props }: PaginationLinkProps): import("react").JSX.Element;
+export declare function PaginationPrevious({ className, children, ...props }: PaginationLinkProps): import("react").JSX.Element;
+export declare function PaginationNext({ className, children, ...props }: PaginationLinkProps): import("react").JSX.Element;
+export declare function PaginationEllipsis({ label, className, ...props }: PaginationEllipsisProps): import("react").JSX.Element;
 //#endregion

package/dist/ui/pagination.js

@@ -4,7 +4,7 @@ import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";
 //#region src/ui/pagination.tsx
 function Pagination({ className, ...props }) {
 	return /* @__PURE__ */ jsx("nav", {
-		"aria-label": "pagination",
+		"aria-label": "Pagination",
 		"data-control-ui": "pagination",
 		"data-control-family": "pagination",
 		"data-slot": "root",
@@ -31,7 +31,7 @@ function PaginationItem({ className, ...props }) {
 	});
 }
 const paginationLinkChrome = "inline-flex h-[var(--control-h-sm)] min-w-[var(--control-h-sm)] cursor-pointer select-none items-center justify-center whitespace-nowrap aria-disabled:pointer-events-none [&>svg]:size-4 [&>svg]:shrink-0";
-function PaginationLink({ isActive = false, className, ...props }) {
+function PaginationLink({ isActive = false, disabled = false, href, className, ...props }) {
 	return /* @__PURE__ */ jsx("a", {
 		"aria-current": isActive ? "page" : void 0,
 		"data-control-ui": "pagination",
@@ -39,37 +39,43 @@ function PaginationLink({ isActive = false, className, ...props }) {
 		"data-slot": "link",
 		"data-control": "true",
 		"data-active": isActive ? "true" : void 0,
+		role: disabled ? "link" : void 0,
+		"aria-disabled": disabled || void 0,
 		className: cn(paginationLinkChrome, className),
-		...props
+		...props,
+		href: disabled ? void 0 : href
 	});
 }
-function PaginationPrevious({ className, ...props }) {
+function PaginationPrevious({ className, children = "Previous", ...props }) {
 	return /* @__PURE__ */ jsxs(PaginationLink, {
-		"aria-label": "Go to previous page",
 		className,
 		...props,
-		children: [/* @__PURE__ */ jsx(ChevronLeft, {}), /* @__PURE__ */ jsx("span", { children: "Previous" })]
+		children: [/* @__PURE__ */ jsx(ChevronLeft, {
+			"aria-hidden": "true",
+			"data-icon-dir": "inline"
+		}), /* @__PURE__ */ jsx("span", { children })]
 	});
 }
-function PaginationNext({ className, ...props }) {
+function PaginationNext({ className, children = "Next", ...props }) {
 	return /* @__PURE__ */ jsxs(PaginationLink, {
-		"aria-label": "Go to next page",
 		className,
 		...props,
-		children: [/* @__PURE__ */ jsx("span", { children: "Next" }), /* @__PURE__ */ jsx(ChevronRight, {})]
+		children: [/* @__PURE__ */ jsx("span", { children }), /* @__PURE__ */ jsx(ChevronRight, {
+			"aria-hidden": "true",
+			"data-icon-dir": "inline"
+		})]
 	});
 }
-function PaginationEllipsis({ className, ...props }) {
+function PaginationEllipsis({ label = "More pages", className, ...props }) {
 	return /* @__PURE__ */ jsxs("span", {
-		"aria-hidden": "true",
 		"data-control-ui": "pagination",
 		"data-control-family": "pagination",
 		"data-slot": "ellipsis",
 		className: cn("flex h-[var(--control-h-sm)] min-w-[var(--control-h-sm)] items-center justify-center [&>svg]:size-4", className),
 		...props,
-		children: [/* @__PURE__ */ jsx(MoreHorizontal, {}), /* @__PURE__ */ jsx("span", {
+		children: [/* @__PURE__ */ jsx(MoreHorizontal, { "aria-hidden": "true" }), /* @__PURE__ */ jsx("span", {
 			className: "sr-only",
-			children: "More pages"
+			children: label
 		})]
 	});
 }

package/dist/ui/phone-input.d.ts

@@ -21,6 +21,7 @@ export type PhoneInputProps = Omit<ComponentProps<"input">, "defaultValue" | "si
   countryCallingCodeEditable?: boolean;
   addInternationalOption?: boolean;
   countrySearchPlaceholder?: string;
+  countrySearchLabel?: string;
   countryEmptyMessage?: string;
   "data-invalid"?: boolean | string;
   style?: CSSProperties & PhoneInputKnobStyle;

package/dist/ui/phone-input.js

@@ -1,7 +1,8 @@
 "use client";
 import { cn } from "../lib/cn.js";
 import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
-import { InputGroup, InputGroupAddon, InputGroupInput } from "./input-group.js";
+import { InputGroup, InputGroupAddon } from "./input-group.js";
+import { Input } from "./input.js";
 import { normalizePhoneInputText, normalizePhoneInputValue } from "../lib/phone-input-format.js";
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "./command.js";
 import { useState } from "react";
@@ -11,6 +12,10 @@ import flags from "react-phone-number-input/flags";
 //#region src/ui/phone-input.tsx
 const FLAG_COMPONENTS = flags;
 const PhoneNumberInputWithRef = PhoneNumberInput;
+function phoneInputKnobs(style) {
+	if (!style) return void 0;
+	return Object.fromEntries(Object.entries(style).filter(([property]) => property.startsWith("--cui-phone-input-")));
+}
 function PhoneInputContainer({ className, ...props }) {
 	return /* @__PURE__ */ jsx(InputGroup, {
 		"data-field-kind": "phone-input",
@@ -19,12 +24,8 @@ function PhoneInputContainer({ className, ...props }) {
 	});
 }
 function PhoneInputControl({ className, normalizationCountry, onChange, onNativeChange, ...props }) {
-	return /* @__PURE__ */ jsx(InputGroupInput, {
+	return /* @__PURE__ */ jsx(Input, {
 		...props,
-		"data-control-ui": "field",
-		"data-control-family": "field",
-		"data-field-kind": "phone-input",
-		"data-slot": "input",
 		dir: "ltr",
 		className,
 		onChange: (event) => {
@@ -35,11 +36,7 @@ function PhoneInputControl({ className, normalizationCountry, onChange, onNative
 		}
 	});
 }
-function PhoneCountrySelect({ value, options, onChange, onFocus, onBlur, disabled, readOnly, "aria-label": ariaLabel = "Country", searchPlaceholder = "Search country…", emptyMessage, knobStyle }) {
-	const countryStyle = knobStyle;
-	const triggerStyle = knobStyle;
-	const metadataStyle = knobStyle;
-	const chevronStyle = knobStyle;
+function PhoneCountrySelect({ value, options, onChange, onFocus, onBlur, disabled, readOnly, "aria-label": ariaLabel = "Country", searchPlaceholder = "Search country…", searchLabel = "Search countries", emptyMessage, knobStyle }) {
 	const [open, setOpen] = useState(false);
 	const selectedOption = options.find((option) => option.value === value);
 	const selectedCallingCode = value ? `+${getCountryCallingCode(value)}` : void 0;
@@ -47,7 +44,6 @@ function PhoneCountrySelect({ value, options, onChange, onFocus, onBlur, disable
 	return /* @__PURE__ */ jsx(InputGroupAddon, {
 		"data-phone-input-country": "",
 		className: "h-full self-stretch p-0",
-		style: countryStyle,
 		children: /* @__PURE__ */ jsxs(Popover, {
 			open,
 			onOpenChange: setOpen,
@@ -61,52 +57,54 @@ function PhoneCountrySelect({ value, options, onChange, onFocus, onBlur, disable
 				onFocus,
 				onBlur,
 				className: "inline-flex h-full items-center justify-center disabled:cursor-not-allowed",
-				style: triggerStyle,
-				children: [/* @__PURE__ */ jsx(CountryFlag, { country: value }), /* @__PURE__ */ jsx(ChevronIcon, {
-					open,
-					style: chevronStyle
-				})]
+				children: [/* @__PURE__ */ jsx(CountryFlag, { country: value }), /* @__PURE__ */ jsx(ChevronIcon, { open })]
 			}), /* @__PURE__ */ jsx(PopoverContent, {
 				align: "start",
 				padding: "none",
 				className: "w-[min(20rem,calc(100vw-2rem))]",
-				children: /* @__PURE__ */ jsxs(Command, {
-					chrome: "embedded",
-					children: [/* @__PURE__ */ jsx(CommandInput, {
-						"aria-label": searchPlaceholder,
-						placeholder: searchPlaceholder
-					}), /* @__PURE__ */ jsxs(CommandList, { children: [/* @__PURE__ */ jsx(CommandEmpty, { title: emptyMessage }), /* @__PURE__ */ jsx(CommandGroup, { children: options.map((option) => {
-						const callingCode = option.value ? `+${getCountryCallingCode(option.value)}` : "";
-						const selected = option.value === value;
-						return /* @__PURE__ */ jsxs(CommandItem, {
-							value: `${option.label} ${option.value ?? "international"} ${callingCode}`,
-							"data-current": selected ? "" : void 0,
-							onSelect: () => {
-								onChange(option.value);
-								setOpen(false);
-							},
-							children: [
-								/* @__PURE__ */ jsx(CountryFlag, { country: option.value }),
-								/* @__PURE__ */ jsx("span", {
-									className: "min-w-0 flex-1 truncate",
-									children: option.label
-								}),
-								callingCode ? /* @__PURE__ */ jsx("span", {
-									"data-control-ui": "phone-input",
-									"data-control-family": "phone-input",
-									"data-slot": "metadata",
-									className: "min-w-0",
-									style: metadataStyle,
-									children: callingCode
-								}) : null,
-								selected ? /* @__PURE__ */ jsx("span", {
-									className: "sr-only",
-									children: "Selected"
-								}) : null,
-								/* @__PURE__ */ jsx(CheckIcon, { visible: selected })
-							]
-						}, option.value ?? "international");
-					}) })] })]
+				children: /* @__PURE__ */ jsx("div", {
+					"data-control-ui": "phone-input",
+					"data-control-family": "phone-input",
+					"data-slot": "root",
+					className: "contents",
+					style: knobStyle,
+					children: /* @__PURE__ */ jsxs(Command, {
+						chrome: "embedded",
+						children: [/* @__PURE__ */ jsx(CommandInput, {
+							"aria-label": searchLabel,
+							placeholder: searchPlaceholder
+						}), /* @__PURE__ */ jsxs(CommandList, { children: [/* @__PURE__ */ jsx(CommandEmpty, { title: emptyMessage }), /* @__PURE__ */ jsx(CommandGroup, { children: options.map((option) => {
+							const callingCode = option.value ? `+${getCountryCallingCode(option.value)}` : "";
+							const selected = option.value === value;
+							return /* @__PURE__ */ jsxs(CommandItem, {
+								value: `${option.label} ${option.value ?? "international"} ${callingCode}`,
+								"data-current": selected ? "" : void 0,
+								onSelect: () => {
+									onChange(option.value);
+									setOpen(false);
+								},
+								children: [
+									/* @__PURE__ */ jsx(CountryFlag, { country: option.value }),
+									/* @__PURE__ */ jsx("span", {
+										className: "min-w-0 flex-1 truncate",
+										children: option.label
+									}),
+									callingCode ? /* @__PURE__ */ jsx("span", {
+										"data-control-ui": "phone-input",
+										"data-control-family": "phone-input",
+										"data-slot": "metadata",
+										className: "min-w-0",
+										children: callingCode
+									}) : null,
+									selected ? /* @__PURE__ */ jsx("span", {
+										className: "sr-only",
+										children: "Selected"
+									}) : null,
+									/* @__PURE__ */ jsx(CheckIcon, { visible: selected })
+								]
+							}, option.value ?? "international");
+						}) })] })]
+					})
 				})
 			})]
 		})
@@ -134,8 +132,8 @@ function PhoneFlag({ country }) {
 }
 function PhoneInput(props) {
 	const controlled = Object.hasOwn(props, "value");
-	const { ref, size = "md", value, defaultValue, onValueChange, onChange: onNativeChange, name, disabled, readOnly, className, style, defaultCountry, countries, labels, locales, countryOptionsOrder, onCountryChange, countryCallingCodeEditable = true, addInternationalOption = true, countrySearchPlaceholder, countryEmptyMessage, "aria-invalid": ariaInvalid, "data-invalid": dataInvalid, ...inputProps } = props;
-	const knobStyle = style;
+	const { ref, size = "md", value, defaultValue, onValueChange, onChange: onNativeChange, name, disabled, readOnly, className, style, defaultCountry, countries, labels, locales, countryOptionsOrder, onCountryChange, countryCallingCodeEditable = true, addInternationalOption = true, countrySearchPlaceholder, countrySearchLabel, countryEmptyMessage, "aria-invalid": ariaInvalid, "data-invalid": dataInvalid, ...inputProps } = props;
+	const knobStyle = phoneInputKnobs(style);
 	const [internalValue, setInternalValue] = useState(defaultValue);
 	const [selectedCountry, setSelectedCountry] = useState(defaultCountry);
 	const currentValue = controlled ? value : internalValue;
@@ -186,6 +184,7 @@ function PhoneInput(props) {
 		countrySelectComponent: PhoneCountrySelect,
 		countrySelectProps: {
 			searchPlaceholder: countrySearchPlaceholder,
+			searchLabel: countrySearchLabel,
 			emptyMessage: countryEmptyMessage,
 			knobStyle
 		},
@@ -197,7 +196,7 @@ function PhoneInput(props) {
 		disabled
 	}) : null] });
 }
-function ChevronIcon({ open, style }) {
+function ChevronIcon({ open }) {
 	return /* @__PURE__ */ jsx("svg", {
 		"data-control-ui": "phone-input",
 		"data-control-family": "phone-input",
@@ -205,7 +204,6 @@ function ChevronIcon({ open, style }) {
 		viewBox: "0 0 12 12",
 		"data-open": open ? "true" : void 0,
 		className: "size-3",
-		style,
 		"aria-hidden": "true",
 		fill: "none",
 		children: /* @__PURE__ */ jsx("path", {

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

@@ -20,9 +20,12 @@ export type RadioProps = Omit<{
   className?: string;
   "aria-label"?: string;
   "aria-labelledby"?: string;
+  "aria-describedby"?: string;
+  "aria-invalid"?: boolean | "true" | "false";
 }, "style"> & {
   style?: CSSProperties & ChoiceKnobStyle;
 };
 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,25 @@ 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;
+  getAriaValueText?: (size: number) => 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 ResizableHandle({ className, variant, withHandle, children, "aria-label": ariaLabel, ...props }: ResizableHandleProps): import("react").JSX.Element;
+export declare function ResizableFloatingPanel({ side, size: controlledSize, defaultSize, onSizeChange, minSize, maxSize, handleVariant, handleLabel, getAriaValueText, className, style, children, ...props }: ResizableFloatingPanelProps): import("react").JSX.Element;
 //#endregion