@ctrl-ui/react 0.8.0

package/dist/ui/phone-input.js

@@ -0,0 +1,263 @@
+"use client";
+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 { 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";
+//#region src/ui/phone-input.tsx
+const FLAG_COMPONENTS = flags;
+const PhoneNumberInputWithRef = PhoneNumberInput;
+function PhoneInputContainer({ className, ...props }) {
+	return /* @__PURE__ */ jsx(InputGroup, {
+		"data-field-kind": "phone-input",
+		className: cn("gap-0 p-0", className),
+		...props
+	});
+}
+function PhoneInputControl({ className, normalizationCountry, onChange, onNativeChange, ...props }) {
+	return /* @__PURE__ */ jsx(InputGroupInput, {
+		...props,
+		"data-control-ui": "field",
+		"data-control-family": "field",
+		"data-field-kind": "phone-input",
+		"data-slot": "input",
+		dir: "ltr",
+		className,
+		onChange: (event) => {
+			const normalizedText = normalizePhoneInputText(event.currentTarget.value, normalizationCountry);
+			if (normalizedText !== event.currentTarget.value) event.currentTarget.value = normalizedText;
+			onChange?.(event);
+			onNativeChange?.(event);
+		}
+	});
+}
+function PhoneCountrySelect({ value, options, onChange, onFocus, onBlur, disabled, readOnly, "aria-label": ariaLabel = "Country", searchPlaceholder = "Search country...", emptyMessage = "No country found.", knobStyle }) {
+	const countryStyle = knobStyle;
+	const triggerStyle = knobStyle;
+	const metadataStyle = knobStyle;
+	const chevronStyle = knobStyle;
+	const [open, setOpen] = useState(false);
+	const selectedOption = options.find((option) => option.value === value);
+	const selectedCallingCode = value ? `+${getCountryCallingCode(value)}` : void 0;
+	const accessibleLabel = selectedOption ? `${ariaLabel}: ${selectedOption.label}${selectedCallingCode ? ` (${selectedCallingCode})` : ""}` : ariaLabel;
+	return /* @__PURE__ */ jsx(InputGroupAddon, {
+		"data-phone-input-country": "",
+		className: "h-full self-stretch p-0",
+		style: countryStyle,
+		children: /* @__PURE__ */ jsxs(Popover, {
+			open,
+			onOpenChange: setOpen,
+			children: [/* @__PURE__ */ jsxs(PopoverTrigger, {
+				"data-control-ui": "phone-input",
+				"data-control-family": "phone-input",
+				"data-slot": "country-trigger",
+				render: /* @__PURE__ */ jsx("button", { type: "button" }),
+				disabled: disabled || readOnly,
+				"aria-label": accessibleLabel,
+				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
+				})]
+			}), /* @__PURE__ */ jsx(PopoverContent, {
+				align: "start",
+				padding: "none",
+				className: "w-[min(20rem,calc(100vw-2rem))]",
+				children: /* @__PURE__ */ jsxs(Command, { children: [/* @__PURE__ */ jsx(CommandInput, {
+					"aria-label": searchPlaceholder,
+					placeholder: searchPlaceholder
+				}), /* @__PURE__ */ jsxs(CommandList, { children: [/* @__PURE__ */ jsx(CommandEmpty, { children: 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");
+				}) })] })] })
+			})]
+		})
+	});
+}
+function CountryFlag({ country }) {
+	if (!country) return /* @__PURE__ */ jsx(GlobeIcon, {});
+	const Flag = FLAG_COMPONENTS[country];
+	return Flag ? /* @__PURE__ */ jsx(Flag, {
+		title: "",
+		"aria-hidden": "true",
+		"data-control-ui": "phone-input",
+		"data-control-family": "phone-input",
+		"data-slot": "flag",
+		className: "shrink-0"
+	}) : /* @__PURE__ */ jsx("span", {
+		"data-control-ui": "phone-input",
+		"data-control-family": "phone-input",
+		"data-slot": "country-code",
+		children: country
+	});
+}
+function PhoneFlag({ country }) {
+	return /* @__PURE__ */ jsx(CountryFlag, { 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 [internalValue, setInternalValue] = useState(defaultValue);
+	const [selectedCountry, setSelectedCountry] = useState(defaultCountry);
+	const currentValue = controlled ? value : internalValue;
+	function handleValueChange(nextValue) {
+		const normalizationCountry = selectedCountry ?? (nextValue ? parsePhoneNumber(nextValue)?.country : void 0);
+		const normalizedValue = normalizePhoneInputValue(nextValue, normalizationCountry);
+		if (!controlled) setInternalValue(normalizedValue);
+		onValueChange?.(normalizedValue);
+	}
+	function handleCountryChange(country) {
+		setSelectedCountry(country);
+		onCountryChange?.(country);
+	}
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(PhoneNumberInputWithRef, {
+		...inputProps,
+		inputRef: ref,
+		value: currentValue,
+		onChange: handleValueChange,
+		name: void 0,
+		className,
+		style,
+		disabled,
+		readOnly,
+		defaultCountry,
+		countries,
+		labels,
+		locales,
+		countryOptionsOrder,
+		onCountryChange: handleCountryChange,
+		international: true,
+		countryCallingCodeEditable,
+		addInternationalOption,
+		autoComplete: inputProps.autoComplete ?? "tel",
+		containerComponent: PhoneInputContainer,
+		containerComponentProps: {
+			size,
+			"aria-invalid": ariaInvalid,
+			"data-invalid": dataInvalid,
+			"data-disabled": disabled ? "true" : void 0
+		},
+		inputComponent: PhoneInputControl,
+		numberInputProps: {
+			normalizationCountry: selectedCountry,
+			onNativeChange,
+			"aria-invalid": ariaInvalid,
+			"data-invalid": dataInvalid
+		},
+		countrySelectComponent: PhoneCountrySelect,
+		countrySelectProps: {
+			searchPlaceholder: countrySearchPlaceholder,
+			emptyMessage: countryEmptyMessage,
+			knobStyle
+		},
+		flagComponent: PhoneFlag
+	}), name && currentValue ? /* @__PURE__ */ jsx("input", {
+		type: "hidden",
+		name,
+		value: currentValue,
+		disabled
+	}) : null] });
+}
+function ChevronIcon({ open, style }) {
+	return /* @__PURE__ */ jsx("svg", {
+		"data-control-ui": "phone-input",
+		"data-control-family": "phone-input",
+		"data-slot": "chevron",
+		viewBox: "0 0 12 12",
+		"data-open": open ? "true" : void 0,
+		className: "size-3",
+		style,
+		"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 CheckIcon({ visible }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-control-ui": "phone-input",
+		"data-control-family": "phone-input",
+		"data-slot": "check",
+		"data-visible": visible || void 0,
+		className: "flex size-3.5 shrink-0 items-center justify-center",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("svg", {
+			viewBox: "0 0 12 12",
+			className: "size-3",
+			fill: "none",
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsx("path", {
+				d: "M2.5 6.5 5 9l4.5-5",
+				stroke: "currentColor",
+				strokeWidth: "1.4",
+				strokeLinecap: "round",
+				strokeLinejoin: "round"
+			})
+		})
+	});
+}
+function GlobeIcon() {
+	return /* @__PURE__ */ jsxs("svg", {
+		"data-control-ui": "phone-input",
+		"data-control-family": "phone-input",
+		"data-slot": "flag",
+		viewBox: "0 0 16 16",
+		className: "size-4 shrink-0",
+		fill: "none",
+		"aria-hidden": "true",
+		children: [/* @__PURE__ */ jsx("circle", {
+			cx: "8",
+			cy: "8",
+			r: "5.5",
+			stroke: "currentColor",
+			strokeWidth: "1.2"
+		}), /* @__PURE__ */ jsx("path", {
+			d: "M2.75 8h10.5M8 2.5c1.45 1.5 2.15 3.34 2.15 5.5S9.45 12 8 13.5C6.55 12 5.85 10.16 5.85 8S6.55 4 8 2.5Z",
+			stroke: "currentColor",
+			strokeWidth: "1.2"
+		})]
+	});
+}
+//#endregion
+export { PhoneInput };

package/dist/ui/popover.d.ts

@@ -0,0 +1,34 @@
+import { PopupKnobStyle } from "../knob-contracts/popup-knobs.js";
+import { CSSProperties, ComponentProps } from "react";
+import { Popover as Popover$1 } from "@base-ui/react/popover";
+//#region src/ui/popover.d.ts
+declare const popoverContentPaddings: readonly ["default", "none"];
+type PopoverContentPadding = (typeof popoverContentPaddings)[number];
+type PopoverPopupProps = Omit<ComponentProps<typeof Popover$1.Popup>, "style"> & {
+  side?: ComponentProps<typeof Popover$1.Positioner>["side"];
+  align?: ComponentProps<typeof Popover$1.Positioner>["align"];
+  sideOffset?: number;
+  collisionPadding?: ComponentProps<typeof Popover$1.Positioner>["collisionPadding"];
+  padding?: PopoverContentPadding;
+  style?: CSSProperties & PopupKnobStyle;
+};
+declare function Popover(props: ComponentProps<typeof Popover$1.Root>): import("react").JSX.Element;
+declare function PopoverTrigger({ className, ...props }: ComponentProps<typeof Popover$1.Trigger> & {
+  style?: CSSProperties & PopupKnobStyle;
+}): import("react").JSX.Element;
+declare function PopoverAnchor(props: ComponentProps<typeof Popover$1.Trigger>): import("react").JSX.Element;
+declare function PopoverContent({ className, children, side, align, sideOffset, collisionPadding, padding, ...props }: PopoverPopupProps): import("react").JSX.Element;
+declare function PopoverHeader({ className, ...props }: ComponentProps<"div"> & {
+  style?: CSSProperties & PopupKnobStyle;
+}): import("react").JSX.Element;
+declare function PopoverTitle({ className, ...props }: ComponentProps<typeof Popover$1.Title> & {
+  style?: CSSProperties & PopupKnobStyle;
+}): import("react").JSX.Element;
+declare function PopoverDescription({ className, ...props }: ComponentProps<typeof Popover$1.Description> & {
+  style?: CSSProperties & PopupKnobStyle;
+}): import("react").JSX.Element;
+declare function PopoverClose({ className, ...props }: ComponentProps<typeof Popover$1.Close> & {
+  style?: CSSProperties & PopupKnobStyle;
+}): import("react").JSX.Element;
+//#endregion
+export { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverContentPadding, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, popoverContentPaddings };

package/dist/ui/popover.js

@@ -0,0 +1,87 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { skinEffects, skinId } from "../skin.js";
+import { jsx } from "react/jsx-runtime";
+import { Popover as Popover$1 } from "@base-ui/react/popover";
+//#region src/ui/popover.tsx
+const popoverContentPaddings = ["default", "none"];
+function Popover(props) {
+	return /* @__PURE__ */ jsx(Popover$1.Root, { ...props });
+}
+function PopoverTrigger({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Popover$1.Trigger, {
+		"data-control-ui": "popover",
+		"data-popup-kind": "popover",
+		"data-slot": "trigger",
+		className,
+		...props
+	});
+}
+function PopoverAnchor(props) {
+	return /* @__PURE__ */ jsx(Popover$1.Trigger, { ...props });
+}
+function PopoverContent({ className, children, side = "bottom", align = "center", sideOffset = 6, collisionPadding, padding = "default", ...props }) {
+	return /* @__PURE__ */ jsx(Popover$1.Portal, { children: /* @__PURE__ */ jsx(Popover$1.Positioner, {
+		"data-skin": skinId(),
+		"data-effects": skinEffects(),
+		side,
+		align,
+		sideOffset,
+		collisionPadding,
+		className: "z-[80]",
+		children: /* @__PURE__ */ jsx(Popover$1.Popup, {
+			"data-control-ui": "popover",
+			"data-popup-kind": "popover",
+			"data-slot": "content",
+			"data-surface": "floating",
+			"data-control-family": "popup",
+			"data-popup-part": "surface",
+			"data-padding": padding,
+			className: cn("w-72", className),
+			...props,
+			children
+		})
+	}) });
+}
+function PopoverHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "popover",
+		"data-control-family": "popup",
+		"data-popup-kind": "popover",
+		"data-slot": "header",
+		className: cn("grid", className),
+		...props
+	});
+}
+function PopoverTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Popover$1.Title, {
+		"data-control-ui": "popover",
+		"data-control-family": "popup",
+		"data-popup-kind": "popover",
+		"data-slot": "title",
+		className,
+		...props
+	});
+}
+function PopoverDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Popover$1.Description, {
+		"data-control-ui": "popover",
+		"data-control-family": "popup",
+		"data-popup-kind": "popover",
+		"data-slot": "description",
+		className,
+		...props
+	});
+}
+function PopoverClose({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Popover$1.Close, {
+		"data-control-ui": "popover",
+		"data-control-family": "popup",
+		"data-popup-kind": "popover",
+		"data-slot": "close",
+		className,
+		...props
+	});
+}
+//#endregion
+export { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, popoverContentPaddings };

package/dist/ui/progress.d.ts

@@ -0,0 +1,34 @@
+import { RangeKnobStyle } from "../knob-contracts/range-knobs.js";
+import { CSSProperties, ComponentProps, ReactNode } from "react";
+//#region src/ui/progress.d.ts
+type ProgressProps = Omit<ComponentProps<"div"> & {
+  value: number | null;
+  min?: number;
+  max?: number;
+  format?: Intl.NumberFormatOptions;
+  getAriaValueText?: (formattedValue: string | null, value: number | null) => string;
+  locale?: Intl.LocalesArgument;
+}, "style"> & {
+  style?: CSSProperties & RangeKnobStyle;
+};
+type ProgressTrackProps = Omit<ComponentProps<"div">, "style"> & {
+  style?: CSSProperties & RangeKnobStyle;
+};
+type ProgressIndicatorProps = Omit<ComponentProps<"div">, "style"> & {
+  style?: CSSProperties & RangeKnobStyle;
+};
+type ProgressLabelProps = Omit<ComponentProps<"span">, "style"> & {
+  style?: CSSProperties & RangeKnobStyle;
+};
+type ProgressValueProps = Omit<Omit<ComponentProps<"span">, "children"> & {
+  children?: ((formattedValue: string | null, value: number | null) => ReactNode) | null;
+}, "style"> & {
+  style?: CSSProperties & RangeKnobStyle;
+};
+declare function Progress({ className, ...props }: ProgressProps): import("react").JSX.Element;
+declare function ProgressLabel({ className, ...props }: ProgressLabelProps): import("react").JSX.Element;
+declare function ProgressValue({ className, ...props }: ProgressValueProps): import("react").JSX.Element;
+declare function ProgressTrack({ className, ...props }: ProgressTrackProps): import("react").JSX.Element;
+declare function ProgressIndicator({ className, ...props }: ProgressIndicatorProps): import("react").JSX.Element;
+//#endregion
+export { Progress, ProgressIndicator, ProgressIndicatorProps, ProgressLabel, ProgressLabelProps, ProgressProps, ProgressTrack, ProgressTrackProps, ProgressValue, ProgressValueProps };

package/dist/ui/progress.js

@@ -0,0 +1,57 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+import { Progress as Progress$1 } from "@base-ui/react/progress";
+//#region src/ui/progress.tsx
+function Progress({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Progress$1.Root, {
+		"data-control-ui": "progress",
+		"data-range-kind": "progress",
+		"data-slot": "root",
+		"data-control-family": "range",
+		className: cn("flex w-full flex-col", className),
+		...props
+	});
+}
+function ProgressLabel({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Progress$1.Label, {
+		"data-control-ui": "progress",
+		"data-control-family": "range",
+		"data-range-kind": "progress",
+		"data-slot": "label",
+		className,
+		...props
+	});
+}
+function ProgressValue({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Progress$1.Value, {
+		"data-control-ui": "progress",
+		"data-control-family": "range",
+		"data-range-kind": "progress",
+		"data-slot": "value",
+		className,
+		...props
+	});
+}
+function ProgressTrack({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Progress$1.Track, {
+		"data-control-ui": "progress",
+		"data-control-family": "range",
+		"data-range-kind": "progress",
+		"data-slot": "track",
+		className: cn("relative w-full overflow-hidden", className),
+		...props
+	});
+}
+function ProgressIndicator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Progress$1.Indicator, {
+		"data-control-ui": "progress",
+		"data-control-family": "range",
+		"data-range-kind": "progress",
+		"data-slot": "indicator",
+		className,
+		...props
+	});
+}
+//#endregion
+export { Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue };

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

@@ -0,0 +1,29 @@
+import { ControlledChoice } from "../control-props.js";
+import { ChoiceKnobStyle } from "../knob-contracts/choice-knobs.js";
+import { CSSProperties, ComponentProps } from "react";
+//#region src/ui/radio-group.d.ts
+type RadioGroupProps<TValue extends string = string> = Omit<ComponentProps<"div">, "defaultValue" | "onChange"> & ControlledChoice<TValue> & {
+  disabled?: boolean;
+  readOnly?: boolean;
+  required?: boolean;
+  name?: string;
+  orientation?: "horizontal" | "vertical";
+} & {
+  style?: CSSProperties & ChoiceKnobStyle;
+};
+type RadioProps = Omit<{
+  value: string;
+  disabled?: boolean;
+  readOnly?: boolean;
+  required?: boolean;
+  id?: string;
+  className?: string;
+  "aria-label"?: string;
+  "aria-labelledby"?: string;
+}, "style"> & {
+  style?: CSSProperties & ChoiceKnobStyle;
+};
+declare function RadioGroup<TValue extends string = string>({ className, orientation, ...props }: RadioGroupProps<TValue>): import("react").JSX.Element;
+declare function Radio({ className, disabled, ...props }: RadioProps): import("react").JSX.Element;
+//#endregion
+export { Radio, RadioGroup, RadioGroupProps, RadioProps };

package/dist/ui/radio-group.js

@@ -0,0 +1,37 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+import { Radio as Radio$1 } from "@base-ui/react/radio";
+import { RadioGroup as RadioGroup$1 } from "@base-ui/react/radio-group";
+//#region src/ui/radio-group.tsx
+function RadioGroup({ className, orientation = "vertical", ...props }) {
+	return /* @__PURE__ */ jsx(RadioGroup$1, {
+		"data-control-ui": "radio-group",
+		"data-control-family": "choice",
+		"data-choice-kind": "radio-group",
+		"data-slot": "root",
+		"data-orientation": orientation,
+		className: cn("flex data-[orientation=horizontal]:flex-row data-[orientation=vertical]:flex-col", className),
+		...props
+	});
+}
+function Radio({ className, disabled, ...props }) {
+	return /* @__PURE__ */ jsx(Radio$1.Root, {
+		"data-control-ui": "radio-group",
+		"data-choice-kind": "radio-group",
+		"data-slot": "item",
+		"data-control-family": "choice",
+		disabled,
+		className: cn("group/radio relative inline-flex shrink-0 cursor-pointer items-center justify-center", "data-[disabled]:cursor-not-allowed", className),
+		...props,
+		children: /* @__PURE__ */ jsx(Radio$1.Indicator, {
+			"data-control-ui": "radio-group",
+			"data-control-family": "choice",
+			"data-choice-kind": "radio-group",
+			"data-slot": "indicator",
+			className: "data-[unchecked]:hidden"
+		})
+	});
+}
+//#endregion
+export { Radio, RadioGroup };

package/dist/ui/resizable.d.ts

@@ -0,0 +1,56 @@
+import { ResizableKnobStyle } from "../knob-contracts/resizable-knobs.js";
+import { CSSProperties, ComponentProps, Ref } from "react";
+//#region src/ui/resizable.d.ts
+type ResizableLayout = {
+  [panelId: string]: number;
+};
+type ResizablePanelGroupVariant = "framed" | "nested";
+type ResizableHandleVariant = "solid" | "hover";
+type ResizablePanelGroupProps = Omit<ComponentProps<"div">, "style"> & {
+  orientation?: "horizontal" | "vertical";
+  variant?: ResizablePanelGroupVariant;
+  defaultLayout?: ResizableLayout;
+  disableCursor?: boolean;
+  disabled?: boolean;
+  onLayoutChange?: (layout: ResizableLayout) => void;
+  onLayoutChanged?: (layout: ResizableLayout, meta: {
+    isUserInteraction: boolean;
+  }) => void;
+  style?: CSSProperties & ResizableKnobStyle;
+};
+type ResizablePanelSize = {
+  asPercentage: number;
+  inPixels: number;
+};
+interface ResizablePanelHandle {
+  collapse: () => void;
+  expand: () => void;
+  getSize: () => ResizablePanelSize;
+  isCollapsed: () => boolean;
+  resize: (size: number | string) => void;
+}
+type ResizablePanelProps = Omit<ComponentProps<"div">, "onResize"> & {
+  defaultSize?: number | string;
+  minSize?: number | string;
+  maxSize?: number | string;
+  collapsible?: boolean;
+  collapsedSize?: number | string;
+  groupResizeBehavior?: "preserve-relative-size" | "preserve-pixel-size";
+  disabled?: boolean;
+  panelRef?: Ref<ResizablePanelHandle>;
+  onResize?: (size: ResizablePanelSize, id: string | number | undefined, prevSize: ResizablePanelSize | undefined) => void;
+} & {
+  style?: CSSProperties & ResizableKnobStyle;
+};
+type ResizableHandleProps = Omit<ComponentProps<"div">, "role" | "tabIndex" | "style"> & {
+  variant?: ResizableHandleVariant;
+  withHandle?: boolean;
+  disabled?: boolean;
+  disableDoubleClick?: boolean;
+  style?: CSSProperties & ResizableKnobStyle;
+};
+declare function ResizablePanelGroup({ className, orientation, variant, children, ...props }: ResizablePanelGroupProps): import("react").JSX.Element;
+declare function ResizablePanel({ className, ...props }: ResizablePanelProps): import("react").JSX.Element;
+declare function ResizableHandle({ className, variant, withHandle, children, ...props }: ResizableHandleProps): import("react").JSX.Element;
+//#endregion
+export { ResizableHandle, ResizableHandleProps, ResizableHandleVariant, ResizableLayout, ResizablePanel, ResizablePanelGroup, ResizablePanelGroupProps, ResizablePanelGroupVariant, ResizablePanelHandle, ResizablePanelProps, ResizablePanelSize };