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

package/dist/components/inputs/Selection/shared/SelectListBoxItemSelectAll.js

@@ -1,7 +1,7 @@
 import { UIOverrides } from "../../../../config/uiOverrides.context.js";
 import "../../../../config/i18n.js";
-import { CheckboxCheckmark } from "../../Checkbox/CheckboxCheckmark.js";
 import { SelectContext } from "./select.context.js";
+import { CheckboxCheckmark } from "../../Checkbox/CheckboxCheckmark.js";
 import { selectListBoxItemDefinition } from "./selectItem.cva.js";
 import { useRef } from "react";
 import { ListBoxItem } from "react-aria-components";

package/dist/components/inputs/Skeleton/InputFrame.js

@@ -5,8 +5,8 @@ import { UIConfig } from "../../../config/uiConfig.context.js";
 import { InlineIconButton } from "../../inline-icon-button.js";
 import { FormFieldLabel } from "../FormField/FormFieldLabel.js";
 import { FormField } from "../../form-field.js";
-import { inputBaseDefinition, inputContentWrapperDefinition, inputSizeDefinition } from "../shared/input.cva.js";
 import { InputClear } from "../shared/InputClear.js";
+import { inputBaseDefinition, inputContentWrapperDefinition, inputSizeDefinition } from "../shared/input.cva.js";
 import { TooltipWrapper } from "../shared/TooltipWrapper.js";
 import { clsx } from "clsx";
 import { isValidElement, useId, useRef } from "react";

package/dist/components/inputs/TextEditor/Toolbar/ColorPickerDropdown.js

@@ -1,5 +1,5 @@
 import { UIOverrides } from "../../../../config/uiOverrides.context.js";
-import { Typography } from "../../../typography.js";
+import { Typography } from "../../../text/Typography/Typography.js";
 import { useInputCva } from "../../shared/input.cva.js";
 import { popoverDefinition } from "../../../shared/popover.cva.js";
 import { ColorPicker } from "./ColorPicker.js";

package/dist/components/inputs/TextEditor/Toolbar/TextStyleSelect.js

@@ -1,4 +1,4 @@
-import { Typography } from "../../../typography.js";
+import { Typography } from "../../../text/Typography/Typography.js";
 import "../../../../config/i18n.js";
 import { Select } from "../../Selection/Select/Select.js";
 import { jsx } from "react/jsx-runtime";

package/dist/components/menu.d.ts

@@ -1,23 +1,3 @@
-import { BottomSheetProps } from "./bottom-sheet.js";
-import { MenuCvaVariantProps, MenuItemVariantProps, MenuPopoverVariantProps, MenuPopoverWrapperVariantProps } from "./Menu/menu.cva.js";
-import { ReactElement } from "react";
-import { Key, MenuItemProps } from "react-aria-components";
-import { Placement } from "react-aria";
-//#region src/components/Menu/Menu.d.ts
-interface MenuItem extends Omit<MenuItemProps, "aria-label" | "textValue" | "children">, MenuItemVariantProps, MenuCvaVariantProps, MenuPopoverVariantProps, MenuPopoverWrapperVariantProps {
-  label: string;
-  content?: string | ReactElement;
-  children?: MenuItem[];
-}
-type MenuBottomSheetProps = Partial<Omit<BottomSheetProps, "children" | "isOpen" | "onOpenChange" | "trigger">>;
-interface MenuProps {
-  trigger: ReactElement;
-  items: MenuItem[];
-  closeDelay?: number;
-  placement?: Placement;
-  onAction?: (key: Key, e: any) => void;
-  bottomSheetProps?: MenuBottomSheetProps;
-}
-declare const Menu: (props: MenuProps) => import("react/jsx-runtime").JSX.Element;
-//#endregion
-export { Menu, MenuItem, MenuProps };
+import { Menu, MenuItem as MenuItem$1, MenuProps } from "./Menu/Menu.js";
+import { MenuItem, MenuListItemProps } from "./Menu/MenuItem.js";
+export { Menu, MenuItem, type MenuItem$1 as MenuItemDefinition, type MenuListItemProps, type MenuProps };

package/dist/components/menu.js

@@ -1,27 +1,3 @@
-import { MenuDesktop } from "./Menu/MenuDesktop.js";
-import { MenuMobile } from "./Menu/MenuMobile.js";
-import { useBreakpoint } from "../hooks/useBreakpoint.js";
-import { c } from "react/compiler-runtime";
-import { jsx } from "react/jsx-runtime";
-//#region src/components/Menu/Menu.tsx
-const Menu = (props) => {
-	const $ = c(4);
-	if (useBreakpoint("md")) {
-		let t0;
-		if ($[0] !== props) {
-			t0 = /* @__PURE__ */ jsx(MenuDesktop, { ...props });
-			$[0] = props;
-			$[1] = t0;
-		} else t0 = $[1];
-		return t0;
-	}
-	let t0;
-	if ($[2] !== props) {
-		t0 = /* @__PURE__ */ jsx(MenuMobile, { ...props });
-		$[2] = props;
-		$[3] = t0;
-	} else t0 = $[3];
-	return t0;
-};
-//#endregion
-export { Menu };
+import { MenuItem } from "./Menu/MenuItem.js";
+import { Menu } from "./Menu/Menu.js";
+export { Menu, MenuItem };

package/dist/components/navigation/Accordion/Accordion.d.ts

@@ -0,0 +1,5 @@
+import { AccordionItemProps, AccordionProps } from "./accordion.types.js";
+//#region src/components/navigation/Accordion/Accordion.d.ts
+declare const Accordion: ({ items, variant, actionPosition, allowsMultipleExpanded, expandedKeys, defaultExpandedKeys, onExpandedChange, className, disabled }: AccordionProps) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { Accordion, type AccordionItemProps, type AccordionProps };

package/dist/components/navigation/Accordion/Accordion.js

@@ -0,0 +1,81 @@
+import { UIOverrides } from "../../../config/uiOverrides.context.js";
+import { accordionDefinition } from "./accordion.cva.js";
+import { AccordionItem } from "./AccordionItem.js";
+import { c } from "react/compiler-runtime";
+import { clsx } from "clsx";
+import { DisclosureGroup } from "react-aria-components";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/navigation/Accordion/Accordion.tsx
+const Accordion = (t0) => {
+	const $ = c(23);
+	const { items, variant: t1, actionPosition: t2, allowsMultipleExpanded: t3, expandedKeys, defaultExpandedKeys, onExpandedChange, className, disabled } = t0;
+	const variant = t1 === void 0 ? "filled" : t1;
+	const actionPosition = t2 === void 0 ? "right" : t2;
+	const allowsMultipleExpanded = t3 === void 0 ? false : t3;
+	const accordionCva = UIOverrides.useCva("accordion.cva", accordionDefinition);
+	const t4 = items.length === 1;
+	let t5;
+	if ($[0] !== accordionCva || $[1] !== className || $[2] !== t4 || $[3] !== variant) {
+		t5 = clsx(accordionCva({
+			className,
+			variant,
+			singleItem: t4
+		}));
+		$[0] = accordionCva;
+		$[1] = className;
+		$[2] = t4;
+		$[3] = variant;
+		$[4] = t5;
+	} else t5 = $[4];
+	let t6;
+	if ($[5] !== actionPosition || $[6] !== disabled || $[7] !== items || $[8] !== variant) {
+		let t7;
+		if ($[10] !== actionPosition || $[11] !== disabled || $[12] !== items.length || $[13] !== variant) {
+			t7 = (item) => /* @__PURE__ */ jsx(AccordionItem, {
+				id: item.id,
+				heading: item.heading,
+				subheading: item.subheading,
+				icon: item.icon,
+				variant,
+				actionPosition,
+				disabled: item.disabled || disabled,
+				isSingle: items.length === 1,
+				children: item.children
+			}, item.id);
+			$[10] = actionPosition;
+			$[11] = disabled;
+			$[12] = items.length;
+			$[13] = variant;
+			$[14] = t7;
+		} else t7 = $[14];
+		t6 = items.map(t7);
+		$[5] = actionPosition;
+		$[6] = disabled;
+		$[7] = items;
+		$[8] = variant;
+		$[9] = t6;
+	} else t6 = $[9];
+	let t7;
+	if ($[15] !== allowsMultipleExpanded || $[16] !== defaultExpandedKeys || $[17] !== disabled || $[18] !== expandedKeys || $[19] !== onExpandedChange || $[20] !== t5 || $[21] !== t6) {
+		t7 = /* @__PURE__ */ jsx(DisclosureGroup, {
+			allowsMultipleExpanded,
+			expandedKeys,
+			defaultExpandedKeys,
+			onExpandedChange,
+			className: t5,
+			isDisabled: disabled,
+			children: t6
+		});
+		$[15] = allowsMultipleExpanded;
+		$[16] = defaultExpandedKeys;
+		$[17] = disabled;
+		$[18] = expandedKeys;
+		$[19] = onExpandedChange;
+		$[20] = t5;
+		$[21] = t6;
+		$[22] = t7;
+	} else t7 = $[22];
+	return t7;
+};
+//#endregion
+export { Accordion };

package/dist/components/navigation/Accordion/AccordionItem.js

@@ -1,5 +1,5 @@
 import { UIOverrides } from "../../../config/uiOverrides.context.js";
-import { Typography } from "../../typography.js";
+import { Typography } from "../../text/Typography/Typography.js";
 import { accordionChevronDefinition, accordionHeadingDefinition, accordionHeadingSubtitleDefinition, accordionHeadingTitleDefinition, accordionIconDefinition, accordionItemDefinition, accordionPanelContentDefinition, accordionPanelDefinition, accordionTriggerDefinition } from "./accordion.cva.js";
 import { ChevronDown } from "lucide-react";
 import { c } from "react/compiler-runtime";

package/dist/components/navigation/Stepper/Stepper.d.ts

@@ -0,0 +1,5 @@
+import { StepperProps } from "./stepper.types.js";
+//#region src/components/navigation/Stepper/Stepper.d.ts
+declare const Stepper: ({ steps, currentStep, orientation, contentOrientation, iconsOnly, titlesOnly, onStepClick, className }: StepperProps) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { Stepper };

package/dist/components/navigation/Stepper/Stepper.js

@@ -0,0 +1,79 @@
+import { UIOverrides } from "../../../config/uiOverrides.context.js";
+import { stepperDefinition } from "./stepper.cva.js";
+import { StepperItem } from "./StepperItem.js";
+import { StepperSeparator } from "./StepperSeparator.js";
+import { c } from "react/compiler-runtime";
+import { Fragment } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/navigation/Stepper/Stepper.tsx
+const Stepper = (t0) => {
+	const $ = c(23);
+	const { steps, currentStep, orientation: t1, contentOrientation: t2, iconsOnly, titlesOnly, onStepClick, className } = t0;
+	const orientation = t1 === void 0 ? "horizontal" : t1;
+	const contentOrientation = t2 === void 0 ? "horizontal" : t2;
+	const stepperCva = UIOverrides.useCva("stepper.cva", stepperDefinition);
+	let t3;
+	if ($[0] !== className || $[1] !== orientation || $[2] !== stepperCva) {
+		t3 = stepperCva({
+			orientation,
+			className
+		});
+		$[0] = className;
+		$[1] = orientation;
+		$[2] = stepperCva;
+		$[3] = t3;
+	} else t3 = $[3];
+	let t4;
+	if ($[4] !== contentOrientation || $[5] !== currentStep || $[6] !== iconsOnly || $[7] !== onStepClick || $[8] !== orientation || $[9] !== steps || $[10] !== titlesOnly) {
+		let t5;
+		if ($[12] !== contentOrientation || $[13] !== currentStep || $[14] !== iconsOnly || $[15] !== onStepClick || $[16] !== orientation || $[17] !== steps.length || $[18] !== titlesOnly) {
+			t5 = (step, index) => {
+				const status = index < currentStep ? "completed" : index === currentStep ? "active" : "todo";
+				return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(StepperItem, {
+					step,
+					stepNumber: index + 1,
+					status,
+					contentOrientation,
+					iconsOnly,
+					titlesOnly,
+					onPress: onStepClick && status === "completed" ? () => onStepClick(index) : void 0
+				}), index < steps.length - 1 && /* @__PURE__ */ jsx(StepperSeparator, {
+					orientation,
+					contentOrientation
+				})] }, step.id);
+			};
+			$[12] = contentOrientation;
+			$[13] = currentStep;
+			$[14] = iconsOnly;
+			$[15] = onStepClick;
+			$[16] = orientation;
+			$[17] = steps.length;
+			$[18] = titlesOnly;
+			$[19] = t5;
+		} else t5 = $[19];
+		t4 = steps.map(t5);
+		$[4] = contentOrientation;
+		$[5] = currentStep;
+		$[6] = iconsOnly;
+		$[7] = onStepClick;
+		$[8] = orientation;
+		$[9] = steps;
+		$[10] = titlesOnly;
+		$[11] = t4;
+	} else t4 = $[11];
+	let t5;
+	if ($[20] !== t3 || $[21] !== t4) {
+		t5 = /* @__PURE__ */ jsx("div", {
+			className: t3,
+			role: "group",
+			"aria-label": "Progress",
+			children: t4
+		});
+		$[20] = t3;
+		$[21] = t4;
+		$[22] = t5;
+	} else t5 = $[22];
+	return t5;
+};
+//#endregion
+export { Stepper };

package/dist/components/navigation/Stepper/StepperItem.js

@@ -1,5 +1,5 @@
 import { UIOverrides } from "../../../config/uiOverrides.context.js";
-import { Typography } from "../../typography.js";
+import { Typography } from "../../text/Typography/Typography.js";
 import { stepperIconDefinition, stepperItemDefinition, stepperNumberDefinition, stepperSubtextDefinition, stepperTitleDefinition } from "./stepper.cva.js";
 import { Check } from "lucide-react";
 import { c } from "react/compiler-runtime";

package/dist/components/number-input.js

@@ -3,12 +3,12 @@ import { UIConfig } from "../config/uiConfig.context.js";
 import { FieldController } from "./inputs/shared/form.binding.js";
 import { FormField } from "./form-field.js";
 import { inputBaseDefinition } from "./inputs/shared/input.cva.js";
-import { IntlUtils } from "../utils/intl.utils.js";
 import { TooltipWrapper } from "./inputs/shared/TooltipWrapper.js";
-import { InputFrame } from "./inputs/Skeleton/InputFrame.js";
-import { useStaticInputHandoff } from "./inputs/shared/useStaticInputHandoff.js";
 import { InputContent } from "./inputs/Input/shared/InputContent.js";
+import { InputFrame } from "./inputs/Skeleton/InputFrame.js";
 import { useFieldAccessibility } from "./inputs/shared/useFieldAccessibility.js";
+import { useStaticInputHandoff } from "./inputs/shared/useStaticInputHandoff.js";
+import { IntlUtils } from "../utils/intl.utils.js";
 import { getStaticNumberDisplayValue } from "./inputs/Input/shared/numberStatic.utils.js";
 import { clsx } from "clsx";
 import { memo, useCallback, useEffect, useRef, useState } from "react";

package/dist/components/number-range-input.js

@@ -2,11 +2,11 @@ import { UIOverrides } from "../config/uiOverrides.context.js";
 import { UIConfig } from "../config/uiConfig.context.js";
 import { FieldController } from "./inputs/shared/form.binding.js";
 import { FormFieldLabel } from "./inputs/FormField/FormFieldLabel.js";
-import { inputBaseDefinition, inputSizeDefinition } from "./inputs/shared/input.cva.js";
-import { IntlUtils } from "../utils/intl.utils.js";
 import { InputClear } from "./inputs/shared/InputClear.js";
+import { inputBaseDefinition, inputSizeDefinition } from "./inputs/shared/input.cva.js";
 import { InputFrame } from "./inputs/Skeleton/InputFrame.js";
 import { useStaticInputHandoff } from "./inputs/shared/useStaticInputHandoff.js";
+import { IntlUtils } from "../utils/intl.utils.js";
 import { getStaticNumberDisplayValue } from "./inputs/Input/shared/numberStatic.utils.js";
 import { NumberRangeField } from "./inputs/Input/NumberRangeInput/NumberRangeField.js";
 import { clsx } from "clsx";

package/dist/components/overlays/BottomSheet/BottomSheetHeader.js

@@ -1,4 +1,4 @@
-import { Typography } from "../../typography.js";
+import { Typography } from "../../text/Typography/Typography.js";
 import "../../../config/i18n.js";
 import { X } from "lucide-react";
 import { c } from "react/compiler-runtime";

package/dist/components/{shared/pagination/PaginationList.d.ts → pagination-list.d.ts}

@@ -1,4 +1,4 @@
-import { ButtonProps } from "../../buttons/Button/Button.js";
+import { ButtonProps } from "./buttons/Button/Button.js";
 //#region src/components/shared/pagination/PaginationList.d.ts
 interface PaginationListProps {
   page: number;

package/dist/components/{shared/pagination/PaginationList.js → pagination-list.js}

@@ -1,6 +1,6 @@
-import { Button } from "../../buttons/Button/Button.js";
-import "../../../config/i18n.js";
-import { minWidth } from "./minWidth.cva.js";
+import { Button } from "./buttons/Button/Button.js";
+import "../config/i18n.js";
+import { minWidth } from "./shared/pagination/minWidth.cva.js";
 import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from "lucide-react";
 import { c } from "react/compiler-runtime";
 import { clsx } from "clsx";

package/dist/components/pagination.d.ts

@@ -1,4 +1,4 @@
-import { PaginationListProps } from "./shared/pagination/PaginationList.js";
+import { PaginationListProps } from "./pagination-list.js";
 //#region src/components/shared/pagination/Pagination.d.ts
 interface PaginationProps extends Omit<PaginationListProps, "totalPages"> {
   totalItems: number;

package/dist/components/pagination.js

@@ -1,7 +1,7 @@
-import { Typography } from "./typography.js";
+import { Typography } from "./text/Typography/Typography.js";
 import "../config/i18n.js";
 import { NumberInput } from "./number-input.js";
-import { PaginationList } from "./shared/pagination/PaginationList.js";
+import { PaginationList } from "./pagination-list.js";
 import { c } from "react/compiler-runtime";
 import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/components/pill.d.ts

@@ -1,5 +1,5 @@
 import { PillButtonVariants } from "./buttons/PillButton/pillButton.cva.js";
-import { TypographyProps } from "./typography.js";
+import { TypographyProps } from "./text/Typography/Typography.js";
 import { Ref } from "react";
 import { ButtonProps } from "react-aria-components";
 //#region src/components/text/Pill/Pill.d.ts

package/dist/components/pill.js

@@ -1,5 +1,5 @@
 import { UIOverrides } from "../config/uiOverrides.context.js";
-import { Typography } from "./typography.js";
+import { Typography } from "./text/Typography/Typography.js";
 import { UIConfig } from "../config/uiConfig.context.js";
 import { pillButtonDefinition } from "./buttons/PillButton/pillButton.cva.js";
 import "../config/i18n.js";

package/dist/components/progress-bar.d.ts

@@ -0,0 +1,2 @@
+import { ProgressBar } from "./inputs/File/shared/ProgressBar.js";
+export { ProgressBar };

package/dist/components/progress-bar.js

@@ -0,0 +1,2 @@
+import { ProgressBar } from "./inputs/File/shared/ProgressBar.js";
+export { ProgressBar };

package/dist/components/radio-group.js

@@ -1,10 +1,10 @@
 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 { CheckContent } from "./inputs/shared/CheckContent.js";
 import { radioContentClassName, radioContentRowDefinition, radioContentWrapperDefinition, radioDefinition, radioIndicatorClass, radioTypography } from "./inputs/RadioGroup/radio.cva.js";
 import { clsx } from "clsx";
 import { memo } from "react";

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

@@ -0,0 +1,7 @@
+import { FieldValues } from "../inputs/shared/form.binding.js";
+import { ControlledSegmentProps } from "./segment.types.js";
+import { Key } from "react-aria-components";
+//#region src/components/segment/Segment.d.ts
+declare const Segment: <TFieldValues extends FieldValues, TKey extends Key = Key>(props: ControlledSegmentProps<TFieldValues, TKey>) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { Segment };

package/dist/components/segment/Segment.js

@@ -0,0 +1,245 @@
+import { UIOverrides } from "../../config/uiOverrides.context.js";
+import { FieldController } from "../inputs/shared/form.binding.js";
+import { FormField } from "../form-field.js";
+import { segmentDefinition } from "./segment.cva.js";
+import { SegmentItem } from "./SegmentItem.js";
+import { c } from "react/compiler-runtime";
+import { clsx } from "clsx";
+import { Fragment, useRef } from "react";
+import { ToggleButtonGroup } from "react-aria-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useToggleButtonGroup } from "react-aria";
+import { mergeRefs } from "@react-aria/utils";
+import { useToggleGroupState } from "react-stately";
+//#region src/components/segment/Segment.tsx
+const SegmentBase = (t0) => {
+	const $ = c(49);
+	let className;
+	let defaultValue;
+	let error;
+	let items;
+	let onChange;
+	let rest;
+	let segmentItemClassName;
+	let value;
+	if ($[0] !== t0) {
+		({className, items, error, onChange, value, defaultValue, segmentItemClassName, ...rest} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = defaultValue;
+		$[3] = error;
+		$[4] = items;
+		$[5] = onChange;
+		$[6] = rest;
+		$[7] = segmentItemClassName;
+		$[8] = value;
+	} else {
+		className = $[1];
+		defaultValue = $[2];
+		error = $[3];
+		items = $[4];
+		onChange = $[5];
+		rest = $[6];
+		segmentItemClassName = $[7];
+		value = $[8];
+	}
+	let t1;
+	if ($[9] !== defaultValue) {
+		t1 = defaultValue ? Array.isArray(defaultValue) ? defaultValue : [defaultValue] : void 0;
+		$[9] = defaultValue;
+		$[10] = t1;
+	} else t1 = $[10];
+	let t2;
+	if ($[11] !== value) {
+		t2 = value ? Array.isArray(value) ? value : [value] : void 0;
+		$[11] = value;
+		$[12] = t2;
+	} else t2 = $[12];
+	let t3;
+	if ($[13] !== rest || $[14] !== t1 || $[15] !== t2) {
+		t3 = {
+			...rest,
+			defaultSelectedKeys: t1,
+			selectedKeys: t2
+		};
+		$[13] = rest;
+		$[14] = t1;
+		$[15] = t2;
+		$[16] = t3;
+	} else t3 = $[16];
+	const props = t3;
+	const buttonGroupRef = useRef(null);
+	const state = useToggleGroupState(props);
+	const { groupProps } = useToggleButtonGroup(props, state, buttonGroupRef);
+	const segmentCva = UIOverrides.useCva("segment.cva", segmentDefinition);
+	let t4;
+	if ($[17] !== error || $[18] !== props.isDisabled) {
+		t4 = {
+			error,
+			label: "",
+			hideLabel: true,
+			isDisabled: props.isDisabled
+		};
+		$[17] = error;
+		$[18] = props.isDisabled;
+		$[19] = t4;
+	} else t4 = $[19];
+	const formFieldProps = t4;
+	let t5;
+	if ($[20] !== onChange || $[21] !== props.selectionMode) {
+		t5 = (keys) => {
+			if (props.selectionMode === "multiple") onChange?.(Array.from(keys.values()));
+			else onChange?.(Array.from(keys.values())[0]);
+		};
+		$[20] = onChange;
+		$[21] = props.selectionMode;
+		$[22] = t5;
+	} else t5 = $[22];
+	const onSelectionChange = t5;
+	let t6;
+	if ($[23] !== items.length) {
+		t6 = items.length > 2 ? Array.from({ length: items.length * 2 - 1 }, _temp).join(" ") : `repeat(${items.length}, 1fr)`;
+		$[23] = items.length;
+		$[24] = t6;
+	} else t6 = $[24];
+	const gridTemplateColumns = t6;
+	let t7;
+	if ($[25] !== className) {
+		t7 = clsx("relative w-full", className);
+		$[25] = className;
+		$[26] = t7;
+	} else t7 = $[26];
+	let t8;
+	if ($[27] !== className || $[28] !== props || $[29] !== segmentCva) {
+		t8 = segmentCva({
+			...props,
+			className
+		});
+		$[27] = className;
+		$[28] = props;
+		$[29] = segmentCva;
+		$[30] = t8;
+	} else t8 = $[30];
+	let t9;
+	if ($[31] !== gridTemplateColumns) {
+		t9 = { gridTemplateColumns };
+		$[31] = gridTemplateColumns;
+		$[32] = t9;
+	} else t9 = $[32];
+	let t10;
+	if ($[33] !== items || $[34] !== props.isDisabled || $[35] !== segmentItemClassName || $[36] !== state) {
+		t10 = items.map((item, index) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SegmentItem, {
+			...item,
+			className: clsx(item.className, segmentItemClassName),
+			isDisabled: item.isDisabled || props.isDisabled,
+			isSelected: state.selectedKeys.has(item.id),
+			onPress: () => {
+				state.toggleKey(item.id);
+			}
+		}), index !== items.length - 1 && items.length > 2 && /* @__PURE__ */ jsx("div", {
+			className: clsx("h-5 w-px rounded-2xl", !state.selectedKeys.has(item.id) && !state.selectedKeys.has(items[index + 1].id) && "bg-elevation-outline-default-1"),
+			children: /* @__PURE__ */ jsx("span", { className: "flex h-full w-px" })
+		})] }, item.id));
+		$[33] = items;
+		$[34] = props.isDisabled;
+		$[35] = segmentItemClassName;
+		$[36] = state;
+		$[37] = t10;
+	} else t10 = $[37];
+	let t11;
+	if ($[38] !== groupProps || $[39] !== onSelectionChange || $[40] !== props || $[41] !== t10 || $[42] !== t8 || $[43] !== t9) {
+		t11 = /* @__PURE__ */ jsx(ToggleButtonGroup, {
+			...props,
+			...groupProps,
+			ref: buttonGroupRef,
+			onSelectionChange,
+			className: t8,
+			style: t9,
+			children: t10
+		});
+		$[38] = groupProps;
+		$[39] = onSelectionChange;
+		$[40] = props;
+		$[41] = t10;
+		$[42] = t8;
+		$[43] = t9;
+		$[44] = t11;
+	} else t11 = $[44];
+	let t12;
+	if ($[45] !== formFieldProps || $[46] !== t11 || $[47] !== t7) {
+		t12 = /* @__PURE__ */ jsx(FormField, {
+			...formFieldProps,
+			className: t7,
+			children: t11
+		});
+		$[45] = formFieldProps;
+		$[46] = t11;
+		$[47] = t7;
+		$[48] = t12;
+	} else t12 = $[48];
+	return t12;
+};
+const Segment = (props) => {
+	const $ = c(15);
+	if ("field" in props && props.field) {
+		let field;
+		let innerProps;
+		let ref;
+		if ($[0] !== props) {
+			({field, ref, ...innerProps} = props);
+			$[0] = props;
+			$[1] = field;
+			$[2] = innerProps;
+			$[3] = ref;
+		} else {
+			field = $[1];
+			innerProps = $[2];
+			ref = $[3];
+		}
+		let t0;
+		if ($[4] !== innerProps || $[5] !== props.error || $[6] !== props.isDisabled || $[7] !== ref) {
+			t0 = (t1) => {
+				const { field: field_0, fieldState: t2 } = t1;
+				const { error } = t2;
+				return /* @__PURE__ */ jsx(SegmentBase, {
+					...innerProps,
+					ref: mergeRefs(ref, field_0.ref),
+					value: field_0.value,
+					onChange: field_0.onChange,
+					isDisabled: field_0.disabled || props.isDisabled,
+					error: props.error ?? error?.message
+				});
+			};
+			$[4] = innerProps;
+			$[5] = props.error;
+			$[6] = props.isDisabled;
+			$[7] = ref;
+			$[8] = t0;
+		} else t0 = $[8];
+		let t1;
+		if ($[9] !== field.form || $[10] !== field.name || $[11] !== t0) {
+			t1 = /* @__PURE__ */ jsx(FieldController, {
+				control: field.form,
+				name: field.name,
+				render: t0
+			});
+			$[9] = field.form;
+			$[10] = field.name;
+			$[11] = t0;
+			$[12] = t1;
+		} else t1 = $[12];
+		return t1;
+	}
+	let t0;
+	if ($[13] !== props) {
+		t0 = /* @__PURE__ */ jsx(SegmentBase, { ...props });
+		$[13] = props;
+		$[14] = t0;
+	} else t0 = $[14];
+	return t0;
+};
+function _temp(_, i) {
+	return i % 2 === 0 ? "1fr" : "auto";
+}
+//#endregion
+export { Segment };

package/dist/components/segment/SegmentItem.js

@@ -1,5 +1,5 @@
 import { UIOverrides } from "../../config/uiOverrides.context.js";
-import { Typography } from "../typography.js";
+import { Typography } from "../text/Typography/Typography.js";
 import { segmentItemDefinition } from "./segment.cva.js";
 import { c } from "react/compiler-runtime";
 import { ToggleButton } from "react-aria-components";