@povio/ui 3.4.0-rc.15 → 3.4.0-rc.17

package/dist/components/query-autocomplete.js

@@ -0,0 +1,105 @@
+import { UIConfig } from "../config/uiConfig.context.js";
+import { FieldController } from "./inputs/shared/form.binding.js";
+import { Autocomplete } from "./autocomplete.js";
+import { getQueryItems, getSelectionIdsToResolve } from "./inputs/Selection/shared/querySelect.utils.js";
+import { useQueryAutocomplete } from "../hooks/useQueryAutocomplete.js";
+import { memo, useCallback, useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { mergeRefs } from "@react-aria/utils";
+//#region src/components/inputs/Selection/Autocomplete/QueryAutocomplete.tsx
+const LoadedQueryAutocompleteContent = ({ query, queryParams, queryOptions, queryMap, resolveSelectedItemsWithIds, isQueryEnabledInitially = false, leadingContent, ...props }) => {
+	"use no memo";
+	const ui = UIConfig.useConfig();
+	const [search, setSearch] = useState("");
+	const { onBlur, onChange } = props;
+	const value = "value" in props ? props.value : void 0;
+	const selectedIdsToResolve = getSelectionIdsToResolve({
+		initialSelection: props.initialSelection,
+		value,
+		mapInitialToSelectItem: props.mapInitialToSelectItem
+	});
+	const shouldEnableInitialQuery = selectedIdsToResolve.count > 0;
+	const isInitialQueryDisabled = props.isInitialQueryDisabled ?? ui.queryAutocomplete?.isInitialQueryDisabled;
+	const shouldDisableInitialQuery = !isQueryEnabledInitially && !shouldEnableInitialQuery && (selectedIdsToResolve.isResolvedByInitialSelection || isInitialQueryDisabled);
+	const { items, totalItems, isLoading, handleEnableQuery, hasNextPage, fetchNextPage } = useQueryAutocomplete({
+		query,
+		queryParams,
+		queryOptions,
+		mapItems: useCallback((data) => getQueryItems(data, queryMap), [queryMap]),
+		resolveSelectedItemsWithIds: resolveSelectedItemsWithIds ?? ui.queryAutocomplete?.resolveSelectedItemsWithIds,
+		search,
+		initialQueryState: shouldDisableInitialQuery,
+		selectedIdsToResolve: selectedIdsToResolve.items
+	});
+	const handleChange = useCallback((value) => {
+		onChange?.(value);
+		onBlur?.({ target: { value: null } });
+	}, [onBlur, onChange]);
+	const autocompleteProps = useMemo(() => {
+		const { isInitialQueryDisabled: _, onChange: __, ...rest } = props;
+		return rest;
+	}, [props]);
+	const onSearchChange = useCallback((value) => {
+		setSearch(value);
+		handleEnableQuery();
+	}, [handleEnableQuery]);
+	return /* @__PURE__ */ jsx(Autocomplete, {
+		...autocompleteProps,
+		items,
+		totalItems,
+		onSearchChange,
+		isClientSearchDisabled: true,
+		isLoading,
+		onChange: handleChange,
+		searchDebounceDelay: props.searchDebounceDelay ?? ui.queryAutocomplete?.searchDebounceDelay,
+		onMouseEnter: handleEnableQuery,
+		onFocusCapture: handleEnableQuery,
+		leadingContent,
+		hasLoadMore: hasNextPage,
+		onLoadMore: fetchNextPage
+	});
+};
+const QueryAutocompleteContent = (props) => {
+	const [isQueryMounted, setIsQueryMounted] = useState(false);
+	const value = "value" in props ? props.value : void 0;
+	if (!getSelectionIdsToResolve({
+		initialSelection: props.initialSelection,
+		value,
+		mapInitialToSelectItem: props.mapInitialToSelectItem
+	}).isResolvedByInitialSelection || isQueryMounted) return /* @__PURE__ */ jsx(LoadedQueryAutocompleteContent, {
+		...props,
+		isQueryEnabledInitially: isQueryMounted
+	});
+	const { query: _, queryParams: _queryParams, queryOptions: _queryOptions, queryMap: _queryMap, resolveSelectedItemsWithIds: _resolveSelectedItemsWithIds, isInitialQueryDisabled: _isInitialQueryDisabled, ...autocompleteProps } = props;
+	const mountQuery = () => setIsQueryMounted(true);
+	return /* @__PURE__ */ jsx(Autocomplete, {
+		...autocompleteProps,
+		items: [],
+		onMouseEnter: mountQuery,
+		onFocusCapture: mountQuery
+	});
+};
+const QueryAutocompleteComponent = (props) => {
+	if ("field" in props && props.field) {
+		const { field, ref, ...innerProps } = props;
+		const controlWithOptions = field.form;
+		return /* @__PURE__ */ jsx(FieldController, {
+			control: field.form,
+			name: field.name,
+			render: ({ field, fieldState: { error, isDirty } }) => /* @__PURE__ */ jsx(QueryAutocompleteContent, {
+				...innerProps,
+				ref: mergeRefs(ref, field.ref),
+				value: field.value,
+				onChange: field.onChange,
+				onBlur: field.onBlur,
+				isDirty,
+				isDisabled: field.disabled || props.isDisabled || !!controlWithOptions._options?.disabled,
+				error: props.error ?? error?.message
+			})
+		});
+	}
+	return /* @__PURE__ */ jsx(QueryAutocompleteContent, { ...props });
+};
+const QueryAutocomplete = memo(QueryAutocompleteComponent);
+//#endregion
+export { QueryAutocomplete };

package/dist/components/query-select.d.ts

@@ -0,0 +1,19 @@
+import { FieldValues } from "./inputs/shared/form.binding.js";
+import { DefaultInitialSelectItem, GroupedSelectControlProps, GroupedSelectProps, SelectItem } from "./inputs/Selection/shared/select.types.js";
+import { OmitDiscriminatedUnion } from "../types/common.js";
+import { SelectProps } from "./inputs/Selection/Select/Select.js";
+import { QueryDataType, QueryFn } from "./inputs/Selection/shared/querySelect.utils.js";
+import { Key } from "react-aria-components";
+//#region src/components/inputs/Selection/Select/QuerySelect.d.ts
+type QuerySelectProps<TFieldValues extends FieldValues, TQueryFn extends QueryFn, TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>> = OmitDiscriminatedUnion<SelectProps<TKey, TInitialSelectItem>, "items" | "totalItems" | keyof GroupedSelectProps> & GroupedSelectControlProps<TFieldValues, TKey, TInitialSelectItem> & {
+  query: TQueryFn;
+  queryParams?: Parameters<TQueryFn>[0];
+  queryOptions?: Parameters<TQueryFn>[1];
+  queryMap?: (data: QueryDataType<TQueryFn>) => SelectItem<TKey>[];
+  resolveSelectedItemsWithIds?: boolean;
+  isInitialQueryDisabled?: boolean;
+};
+declare const QuerySelectComponent: <TFieldValues extends FieldValues, TQueryFn extends QueryFn, TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>>(props: QuerySelectProps<TFieldValues, TQueryFn, TKey, TInitialSelectItem>) => import("react/jsx-runtime").JSX.Element;
+declare const QuerySelect: typeof QuerySelectComponent;
+//#endregion
+export { QuerySelect, QuerySelectProps };

package/dist/components/query-select.js

@@ -0,0 +1,115 @@
+import { UIConfig } from "../config/uiConfig.context.js";
+import { FieldController } from "./inputs/shared/form.binding.js";
+import { Select } from "./inputs/Selection/Select/Select.js";
+import { getQueryItems, getSelectionIdsToResolve } from "./inputs/Selection/shared/querySelect.utils.js";
+import { useQueryAutocomplete } from "../hooks/useQueryAutocomplete.js";
+import { memo, useCallback, useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { mergeRefs } from "@react-aria/utils";
+//#region src/components/inputs/Selection/Select/QuerySelect.tsx
+const LoadedQuerySelectContent = ({ query, queryParams, queryOptions, queryMap, resolveSelectedItemsWithIds, isQueryEnabledInitially = false, ...props }) => {
+	const ui = UIConfig.useConfig();
+	const [search, setSearch] = useState("");
+	const isSearchable = props.isSearchable ?? ui.select.isSearchable;
+	const value = "value" in props ? props.value : void 0;
+	const selectedIdsToResolve = getSelectionIdsToResolve({
+		initialSelection: props.initialSelection,
+		value,
+		mapInitialToSelectItem: props.mapInitialToSelectItem
+	});
+	const shouldEnableInitialQuery = selectedIdsToResolve.count > 0;
+	const isInitialQueryDisabled = props.isInitialQueryDisabled ?? ui.querySelect?.isInitialQueryDisabled;
+	const shouldDisableInitialQuery = !isQueryEnabledInitially && !shouldEnableInitialQuery && (selectedIdsToResolve.isResolvedByInitialSelection || isInitialQueryDisabled);
+	const { items, totalItems, isLoading, handleEnableQuery, hasNextPage, fetchNextPage } = useQueryAutocomplete({
+		query,
+		queryParams,
+		queryOptions,
+		mapItems: useCallback((data) => getQueryItems(data, queryMap), [queryMap]),
+		resolveSelectedItemsWithIds: resolveSelectedItemsWithIds ?? ui.querySelect?.resolveSelectedItemsWithIds,
+		search: isSearchable ? search : void 0,
+		initialQueryState: shouldDisableInitialQuery,
+		selectedIdsToResolve: selectedIdsToResolve.items
+	});
+	const { onSearchChange } = props;
+	const selectProps = useMemo(() => {
+		const { isInitialQueryDisabled: _, onSearchChange: __, ...rest } = props;
+		return rest;
+	}, [props]);
+	const handleSearchChange = useCallback((value) => {
+		setSearch(value);
+		handleEnableQuery();
+		onSearchChange?.(value);
+	}, [handleEnableQuery, onSearchChange]);
+	const asyncSelectProps = useMemo(() => ({
+		...selectProps,
+		items,
+		isLoading,
+		totalItems,
+		hasLoadMore: hasNextPage,
+		onLoadMore: fetchNextPage,
+		searchDebounceDelay: props.searchDebounceDelay ?? ui.querySelect?.searchDebounceDelay,
+		onMouseEnter: handleEnableQuery,
+		onFocusCapture: handleEnableQuery,
+		...isSearchable && {
+			isClientSearchDisabled: true,
+			onSearchChange: handleSearchChange
+		}
+	}), [
+		selectProps,
+		items,
+		isLoading,
+		totalItems,
+		hasNextPage,
+		fetchNextPage,
+		props.searchDebounceDelay,
+		ui.querySelect?.searchDebounceDelay,
+		handleEnableQuery,
+		isSearchable,
+		handleSearchChange
+	]);
+	return /* @__PURE__ */ jsx(Select, { ...asyncSelectProps });
+};
+const QuerySelectContent = (props) => {
+	const [isQueryMounted, setIsQueryMounted] = useState(false);
+	const value = "value" in props ? props.value : void 0;
+	if (!getSelectionIdsToResolve({
+		initialSelection: props.initialSelection,
+		value,
+		mapInitialToSelectItem: props.mapInitialToSelectItem
+	}).isResolvedByInitialSelection || isQueryMounted) return /* @__PURE__ */ jsx(LoadedQuerySelectContent, {
+		...props,
+		isQueryEnabledInitially: isQueryMounted
+	});
+	const { query: _, queryParams: _queryParams, queryOptions: _queryOptions, queryMap: _queryMap, resolveSelectedItemsWithIds: _resolveSelectedItemsWithIds, isInitialQueryDisabled: _isInitialQueryDisabled, ...selectProps } = props;
+	const mountQuery = () => setIsQueryMounted(true);
+	return /* @__PURE__ */ jsx(Select, {
+		...selectProps,
+		items: [],
+		onMouseEnter: mountQuery,
+		onFocusCapture: mountQuery
+	});
+};
+const QuerySelectComponent = (props) => {
+	if ("field" in props && props.field) {
+		const { field, ref, ...innerProps } = props;
+		const controlWithOptions = field.form;
+		return /* @__PURE__ */ jsx(FieldController, {
+			control: field.form,
+			name: field.name,
+			render: ({ field, fieldState: { error, isDirty } }) => /* @__PURE__ */ jsx(QuerySelectContent, {
+				...innerProps,
+				ref: mergeRefs(ref, field.ref),
+				value: field.value,
+				onChange: field.onChange,
+				onBlur: field.onBlur,
+				isDirty,
+				isDisabled: field.disabled || props.isDisabled || !!controlWithOptions._options?.disabled,
+				error: props.error ?? error?.message
+			})
+		});
+	}
+	return /* @__PURE__ */ jsx(QuerySelectContent, { ...props });
+};
+const QuerySelect = memo(QuerySelectComponent);
+//#endregion
+export { QuerySelect };

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

@@ -0,0 +1,24 @@
+import { FieldValues } from "./inputs/shared/form.binding.js";
+import { ControlProps } from "./inputs/shared/form.types.js";
+import { InputVariantProps } from "./inputs/shared/input.cva.js";
+import { FormFieldProps } from "./form-field.js";
+import { RadioVariantProps } from "./inputs/RadioGroup/radio.cva.js";
+import { ReactElement, Ref } from "react";
+import { RadioGroupProps as RadioGroupProps$1 } from "react-aria-components";
+//#region src/components/inputs/RadioGroup/RadioGroup.d.ts
+interface RadioGroupBaseProps extends Omit<FormFieldProps, "variant">, RadioVariantProps, Omit<InputVariantProps, "variant">, Omit<RadioGroupProps$1, "className"> {
+  ref?: Ref<HTMLDivElement>;
+  options: {
+    label: string | ReactElement;
+    value: string;
+  }[];
+  isDirty?: boolean;
+  inputClassName?: string;
+  labelClassName?: string;
+}
+interface RadioGroupProps extends RadioGroupBaseProps {}
+type ControlledRadioGroupProps<TFieldValues extends FieldValues> = ControlProps<RadioGroupProps, TFieldValues>;
+declare const RadioGroupComponent: <TFieldValues extends FieldValues>(props: ControlledRadioGroupProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
+declare const RadioGroup: typeof RadioGroupComponent;
+//#endregion
+export { ControlledRadioGroupProps, RadioGroup, RadioGroupProps };

package/dist/components/radio-group.js

@@ -0,0 +1,165 @@
+import { UIOverrides } from "../config/uiOverrides.context.js";
+import { UIConfig } from "../config/uiConfig.context.js";
+import { FieldController } from "./inputs/shared/form.binding.js";
+import { CheckContent } from "./inputs/shared/CheckContent.js";
+import { FormFieldLabel } from "./inputs/FormField/FormFieldLabel.js";
+import { FormField } from "./form-field.js";
+import { inputBaseDefinition, inputSizeDefinition } from "./inputs/shared/input.cva.js";
+import { radioContentClassName, radioContentRowDefinition, radioContentWrapperDefinition, radioDefinition, radioIndicatorClass, radioTypography } from "./inputs/RadioGroup/radio.cva.js";
+import { clsx } from "clsx";
+import { memo } from "react";
+import { Radio, RadioGroup as RadioGroup$1 } from "react-aria-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useLabel } from "react-aria";
+import { mergeRefs } from "@react-aria/utils";
+//#region src/components/inputs/RadioGroup/RadioGroup.tsx
+const RadioGroupBase = (props) => {
+	const ui = UIConfig.useConfig();
+	const radioCva = UIOverrides.useCva("radio.cva", radioDefinition);
+	const radioTypographyMap = UIOverrides.useMapper("radio.typography", radioTypography);
+	const radioContentWrapperCva = UIOverrides.useCva("radio.contentWrapperCva", radioContentWrapperDefinition);
+	const radioContentRowCva = UIOverrides.useCva("radio.contentRowCva", radioContentRowDefinition);
+	const inputBaseCva = UIOverrides.useCva("input.baseCva", inputBaseDefinition);
+	const inputSizeCva = UIOverrides.useCva("input.sizeCva", inputSizeDefinition);
+	const radioContentClassNameMap = UIOverrides.useMapper("radio.contentClassName", radioContentClassName);
+	const { ref, label, tooltipText, helperText, isDirty, isRequired, rightContent, isDisabled, headerClassName, errorClassName, labelClassName, inputClassName, isHeaderHidden, error, className, options, value, defaultValue, onChange, onBlur, as: asProp, size: sizeProp, variant: variantProp, hideLabel: hideLabelProp, ...rest } = props;
+	const as = asProp ?? ui.input.as;
+	const size = sizeProp ?? ui.input.size;
+	const variant = variantProp ?? ui.radioGroup.variant;
+	const hideLabel = hideLabelProp ?? ui.radioGroup.hideLabel;
+	const radioClassName = radioCva({
+		variant,
+		...rest
+	});
+	const radioTypographyProps = radioTypographyMap({
+		variant,
+		...rest
+	});
+	const radioContentClassNameValue = radioContentClassNameMap({
+		variant,
+		...rest
+	});
+	const formFieldProps = {
+		className,
+		error,
+		label,
+		tooltipText,
+		helperText,
+		isRequired,
+		rightContent,
+		isHeaderHidden: isHeaderHidden || as === "inline" || as === "filter" || as === "floating",
+		hideLabel,
+		isDisabled,
+		headerClassName,
+		errorClassName
+	};
+	const { labelProps, fieldProps } = useLabel({ label });
+	const headerProps = {
+		label,
+		tooltipText,
+		helperText,
+		isRequired,
+		rightContent,
+		isHeaderHidden: hideLabel || isHeaderHidden,
+		isDisabled,
+		className: headerClassName,
+		labelProps
+	};
+	const selectedValue = value ?? defaultValue;
+	const shouldRenderInputFrame = as !== "default";
+	const handleChange = (nextValue) => {
+		onChange?.(nextValue);
+	};
+	return /* @__PURE__ */ jsx(RadioGroup$1, {
+		...rest,
+		...fieldProps,
+		ref,
+		value,
+		defaultValue,
+		onChange: handleChange,
+		onBlur,
+		isDisabled,
+		isInvalid: !!error,
+		"data-is-dirty": isDirty || void 0,
+		"data-is-required": isRequired || void 0,
+		className: "group",
+		children: /* @__PURE__ */ jsx(FormField, {
+			...formFieldProps,
+			as,
+			labelProps,
+			className: clsx("w-full", as === "inline" && "h-full", className),
+			tabIndex: as === "inline" ? -1 : void 0,
+			children: /* @__PURE__ */ jsx("div", {
+				className: clsx("group/radio-group-content relative", shouldRenderInputFrame && inputBaseCva({
+					variant: ui.input.variant,
+					as
+				}), inputClassName),
+				"data-rac": "",
+				"data-disabled": isDisabled || void 0,
+				"data-is-disabled": isDisabled || void 0,
+				"data-invalid": !!error || void 0,
+				"data-has-selection": selectedValue != null && selectedValue !== "" ? true : void 0,
+				"data-radio-group-content": "",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: clsx(radioContentWrapperCva({
+						variant,
+						as,
+						hasInputFrame: shouldRenderInputFrame,
+						...rest
+					}), shouldRenderInputFrame && inputSizeCva({
+						as,
+						size
+					})),
+					"data-is-dirty": isDirty || void 0,
+					"data-is-required": isRequired || void 0,
+					children: [as && ["filter", "floating"].includes(as) && /* @__PURE__ */ jsx(FormFieldLabel, {
+						as,
+						size,
+						...headerProps
+					}), /* @__PURE__ */ jsx("div", {
+						className: radioContentRowCva({
+							variant,
+							as,
+							hasInputFrame: shouldRenderInputFrame,
+							...rest
+						}),
+						children: options.map((option) => /* @__PURE__ */ jsxs(Radio, {
+							value: option.value,
+							className: clsx("relative", radioIndicatorClass),
+							children: [/* @__PURE__ */ jsx("div", { className: radioClassName }), /* @__PURE__ */ jsx(CheckContent, {
+								typography: radioTypographyProps,
+								contentClassName: radioContentClassNameValue,
+								className: labelClassName,
+								children: option.label
+							})]
+						}, option.value))
+					})]
+				})
+			})
+		})
+	});
+};
+const RadioGroupComponent = (props) => {
+	if ("field" in props && props.field) {
+		const { field, ref, ...innerProps } = props;
+		return /* @__PURE__ */ jsx(FieldController, {
+			control: field.form,
+			name: field.name,
+			render: ({ field, fieldState: { error, isDirty } }) => /* @__PURE__ */ jsx(RadioGroupBase, {
+				...innerProps,
+				ref: mergeRefs(ref, field.ref),
+				value: field.value,
+				onChange: field.onChange,
+				onBlur: field.onBlur,
+				name: field.name,
+				isDirty,
+				isDisabled: field.disabled || props.isDisabled,
+				error: props.error ?? error?.message
+			})
+		});
+	}
+	return /* @__PURE__ */ jsx(RadioGroupBase, { ...props });
+};
+const RadioGroup = memo(RadioGroupComponent);
+//#endregion
+export { RadioGroup };

package/dist/components/responsive-popover.d.ts

@@ -0,0 +1,19 @@
+import { BottomSheetProps } from "./bottom-sheet.js";
+import { ReactElement, ReactNode } from "react";
+import { PopoverProps } from "react-aria-components";
+//#region src/components/overlays/ResponsivePopover/ResponsivePopover.d.ts
+type ResponsivePopoverBottomSheetProps = Partial<Omit<BottomSheetProps, "children" | "isOpen" | "onOpenChange" | "trigger">>;
+type ResponsivePopoverPopoverProps = Partial<Omit<PopoverProps, "children" | "className">>;
+interface ResponsivePopoverProps {
+  trigger: ReactElement;
+  children: ReactNode;
+  isOpen: boolean;
+  onOpenChange: (isOpen: boolean) => void;
+  popoverClassName?: string;
+  sheetLabel: string;
+  bottomSheetProps?: ResponsivePopoverBottomSheetProps;
+  popoverProps?: ResponsivePopoverPopoverProps;
+}
+declare const ResponsivePopover: ({ trigger, isOpen, onOpenChange, children, popoverClassName, sheetLabel, bottomSheetProps, popoverProps }: ResponsivePopoverProps) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { ResponsivePopover, ResponsivePopoverProps };

package/dist/components/responsive-popover.js

@@ -0,0 +1,126 @@
+import { UIOverrides } from "../config/uiOverrides.context.js";
+import { BottomSheet } from "./bottom-sheet.js";
+import { useBreakpoint } from "../hooks/useBreakpoint.js";
+import { popoverDefinition } from "./shared/popover.cva.js";
+import { c } from "react/compiler-runtime";
+import { clsx } from "clsx";
+import { Dialog, DialogTrigger, Popover } from "react-aria-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/overlays/ResponsivePopover/ResponsivePopover.tsx
+const ResponsivePopover = (t0) => {
+	const $ = c(33);
+	const { trigger, isOpen, onOpenChange, children, popoverClassName, sheetLabel, bottomSheetProps, popoverProps } = t0;
+	const popoverCva = UIOverrides.useCva("popover.cva", popoverDefinition);
+	const isDesktop = useBreakpoint("md");
+	let t1;
+	if ($[0] !== popoverProps) {
+		t1 = popoverProps ?? {};
+		$[0] = popoverProps;
+		$[1] = t1;
+	} else t1 = $[1];
+	let restPopoverProps;
+	let t2;
+	let t3;
+	if ($[2] !== t1) {
+		({offset: t2, placement: t3, ...restPopoverProps} = t1);
+		$[2] = t1;
+		$[3] = restPopoverProps;
+		$[4] = t2;
+		$[5] = t3;
+	} else {
+		restPopoverProps = $[3];
+		t2 = $[4];
+		t3 = $[5];
+	}
+	const offset = t2 === void 0 ? 0 : t2;
+	const placement = t3 === void 0 ? "bottom start" : t3;
+	if (!isDesktop) {
+		let t4;
+		if ($[6] !== children) {
+			t4 = /* @__PURE__ */ jsx("div", {
+				className: "p-4",
+				children
+			});
+			$[6] = children;
+			$[7] = t4;
+		} else t4 = $[7];
+		let t5;
+		if ($[8] !== bottomSheetProps || $[9] !== isOpen || $[10] !== onOpenChange || $[11] !== sheetLabel || $[12] !== t4 || $[13] !== trigger) {
+			t5 = /* @__PURE__ */ jsx(BottomSheet, {
+				height: "auto",
+				isDismissable: true,
+				label: sheetLabel,
+				...bottomSheetProps,
+				isOpen,
+				onOpenChange,
+				trigger,
+				children: t4
+			});
+			$[8] = bottomSheetProps;
+			$[9] = isOpen;
+			$[10] = onOpenChange;
+			$[11] = sheetLabel;
+			$[12] = t4;
+			$[13] = trigger;
+			$[14] = t5;
+		} else t5 = $[14];
+		return t5;
+	}
+	let t4;
+	if ($[15] !== popoverClassName) {
+		t4 = clsx("my-4 outline-none", popoverClassName);
+		$[15] = popoverClassName;
+		$[16] = t4;
+	} else t4 = $[16];
+	let t5;
+	if ($[17] !== popoverCva) {
+		t5 = clsx(popoverCva({}), "overflow-hidden p-2");
+		$[17] = popoverCva;
+		$[18] = t5;
+	} else t5 = $[18];
+	let t6;
+	if ($[19] !== children || $[20] !== t5) {
+		t6 = /* @__PURE__ */ jsx(Dialog, {
+			className: "outline-none",
+			children: /* @__PURE__ */ jsx("div", {
+				className: t5,
+				children
+			})
+		});
+		$[19] = children;
+		$[20] = t5;
+		$[21] = t6;
+	} else t6 = $[21];
+	let t7;
+	if ($[22] !== offset || $[23] !== placement || $[24] !== restPopoverProps || $[25] !== t4 || $[26] !== t6) {
+		t7 = /* @__PURE__ */ jsx(Popover, {
+			...restPopoverProps,
+			className: t4,
+			offset,
+			placement,
+			children: t6
+		});
+		$[22] = offset;
+		$[23] = placement;
+		$[24] = restPopoverProps;
+		$[25] = t4;
+		$[26] = t6;
+		$[27] = t7;
+	} else t7 = $[27];
+	let t8;
+	if ($[28] !== isOpen || $[29] !== onOpenChange || $[30] !== t7 || $[31] !== trigger) {
+		t8 = /* @__PURE__ */ jsxs(DialogTrigger, {
+			isOpen,
+			onOpenChange,
+			children: [trigger, t7]
+		});
+		$[28] = isOpen;
+		$[29] = onOpenChange;
+		$[30] = t7;
+		$[31] = trigger;
+		$[32] = t8;
+	} else t8 = $[32];
+	return t8;
+};
+//#endregion
+export { ResponsivePopover };

package/dist/components/segment/SegmentItem.js

@@ -1,11 +1,11 @@
 import { UIOverrides } from "../../config/uiOverrides.context.js";
-import { Typography } from "../text/Typography/Typography.js";
+import { Typography } from "../typography.js";
 import { segmentItemDefinition } from "./segment.cva.js";
-import { ToggleButton } from "react-aria-components";
 import { c } from "react/compiler-runtime";
+import { ToggleButton } from "react-aria-components";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/segment/SegmentItem.tsx
-var SegmentItem = (t0) => {
+const SegmentItem = (t0) => {
 	const $ = c(23);
 	let className;
 	let icon;

package/dist/components/segment/segment.cva.d.ts

@@ -1,20 +1,22 @@
-import { UIOverrides } from '../../config/uiOverrides.context';
-export declare const segmentDefinition: {
-    base: string[];
-    config?: import("../../utils/style-merge.util").StyleMergeUtils.Config<Record<never, never>>;
+import { StyleMergeUtils } from "../../utils/style-merge.util.js";
+import { UIOverrides } from "../../config/uiOverrides.context.js";
+//#region src/components/segment/segment.cva.d.ts
+declare const segmentDefinition: {
+  base: string[];
+  config?: StyleMergeUtils.Config<Record<never, never>>;
 };
-export type SegmentConfig = NonNullable<typeof segmentDefinition.config>;
-export interface SegmentVariantProps extends UIOverrides.VariantProps<SegmentConfig> {
-}
-export declare const segmentItemDefinition: {
-    base: string[];
-    config: import("../../utils/style-merge.util").StyleMergeUtils.Config<{
-        readonly iconOnly: {
-            readonly true: "px-segmented-control-height-segment";
-            readonly false: "px-segmented-control-side-segment";
-        };
-    }>;
+type SegmentConfig = NonNullable<typeof segmentDefinition.config>;
+interface SegmentVariantProps extends UIOverrides.VariantProps<SegmentConfig> {}
+declare const segmentItemDefinition: {
+  base: string[];
+  config: StyleMergeUtils.Config<{
+    readonly iconOnly: {
+      readonly true: "px-segmented-control-height-segment";
+      readonly false: "px-segmented-control-side-segment";
+    };
+  }>;
 };
-export type SegmentItemConfig = NonNullable<typeof segmentItemDefinition.config>;
-export interface SegmentItemVariantProps extends UIOverrides.VariantProps<SegmentItemConfig> {
-}
+type SegmentItemConfig = NonNullable<typeof segmentItemDefinition.config>;
+interface SegmentItemVariantProps extends UIOverrides.VariantProps<SegmentItemConfig> {}
+//#endregion
+export { SegmentConfig, SegmentItemConfig, SegmentItemVariantProps, SegmentVariantProps, segmentDefinition, segmentItemDefinition };

package/dist/components/segment/segment.cva.js

@@ -1,11 +1,11 @@
 import { UIOverrides } from "../../config/uiOverrides.context.js";
 //#region src/components/segment/segment.cva.ts
-var segmentDefinition = UIOverrides.defineConfig({ base: [
+const segmentDefinition = UIOverrides.defineConfig({ base: [
 	"group/segment grid w-fit items-center gap-segmented-control-side-segmented-control p-segmented-control-side-segmented-control",
 	"bg-elevation-fill-default-3",
 	"rounded-segmented-control-rounding-segmented-control"
 ] });
-var segmentItemDefinition = UIOverrides.defineConfig({
+const segmentItemDefinition = UIOverrides.defineConfig({
 	base: [
 		"flex items-center justify-center gap-segmented-control-gap-content-icon-to-text transition-all duration-200",
 		"border border-support-transparent-outline",