@povio/ui 3.0.0-rc.3 → 3.1.0

package/dist/components/segment/Segment.js

@@ -2,244 +2,83 @@ import { UIOverrides } from "../../config/uiOverrides.context.js";
 import { FormField } from "../inputs/FormField/FormField.js";
 import { segmentDefinition } from "./segment.cva.js";
 import { SegmentItem } from "./SegmentItem.js";
-import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { Fragment as Fragment$1, useRef } from "react";
+import { Fragment as Fragment$1, useMemo, useRef } from "react";
 import { ToggleButtonGroup } from "react-aria-components";
 import { useToggleButtonGroup } from "react-aria";
 import { mergeRefs } from "@react-aria/utils";
 import { Controller } from "react-hook-form";
 import { useToggleGroupState } from "react-stately";
 //#region src/components/segment/Segment.tsx
-var 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;
+var SegmentBase = ({ className, items, error, onChange, value, defaultValue, segmentItemClassName, ...rest }) => {
+	const props = {
+		...rest,
+		defaultSelectedKeys: defaultValue ? Array.isArray(defaultValue) ? defaultValue : [defaultValue] : void 0,
+		selectedKeys: value ? Array.isArray(value) ? value : [value] : void 0
+	};
 	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$1, { 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, {
+	const formFieldProps = {
+		error,
+		label: "",
+		hideLabel: true,
+		isDisabled: props.isDisabled
+	};
+	const onSelectionChange = (keys) => {
+		if (props.selectionMode === "multiple") onChange?.(Array.from(keys.values()));
+		else onChange?.(Array.from(keys.values())[0]);
+	};
+	const gridTemplateColumns = useMemo(() => {
+		return items.length > 2 ? Array.from({ length: items.length * 2 - 1 }, (_, i) => i % 2 === 0 ? "1fr" : "auto").join(" ") : `repeat(${items.length}, 1fr)`;
+	}, [items.length]);
+	return /* @__PURE__ */ jsx(FormField, {
+		...formFieldProps,
+		className: clsx("relative w-full", className),
+		children: /* @__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;
+			className: segmentCva({
+				...props,
+				className
+			}),
+			style: { gridTemplateColumns },
+			children: items.map((item, index) => /* @__PURE__ */ jsxs(Fragment$1, { 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))
+		})
+	});
 };
 var Segment = (props) => {
-	const $ = c(15);
 	if ("formControl" in props && props.formControl) {
-		let formControl;
-		let innerProps;
-		let ref;
-		if ($[0] !== props) {
-			({formControl, ref, ...innerProps} = props);
-			$[0] = props;
-			$[1] = formControl;
-			$[2] = innerProps;
-			$[3] = ref;
-		} else {
-			formControl = $[1];
-			innerProps = $[2];
-			ref = $[3];
-		}
-		let t0;
-		if ($[4] !== innerProps || $[5] !== props.error || $[6] !== props.isDisabled || $[7] !== ref) {
-			t0 = (t1) => {
-				const { field, fieldState: t2 } = t1;
-				const { error } = t2;
-				return /* @__PURE__ */ jsx(SegmentBase, {
-					...innerProps,
-					ref: mergeRefs(ref, field.ref),
-					value: field.value,
-					onChange: field.onChange,
-					isDisabled: field.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] !== formControl.control || $[10] !== formControl.name || $[11] !== t0) {
-			t1 = /* @__PURE__ */ jsx(Controller, {
-				control: formControl.control,
-				name: formControl.name,
-				render: t0
-			});
-			$[9] = formControl.control;
-			$[10] = formControl.name;
-			$[11] = t0;
-			$[12] = t1;
-		} else t1 = $[12];
-		return t1;
+		const { formControl, ref, ...innerProps } = props;
+		return /* @__PURE__ */ jsx(Controller, {
+			control: formControl.control,
+			name: formControl.name,
+			render: ({ field, fieldState: { error } }) => /* @__PURE__ */ jsx(SegmentBase, {
+				...innerProps,
+				ref: mergeRefs(ref, field.ref),
+				value: field.value,
+				onChange: field.onChange,
+				isDisabled: field.disabled || props.isDisabled,
+				error: props.error ?? error?.message
+			})
+		});
 	}
-	let t0;
-	if ($[13] !== props) {
-		t0 = /* @__PURE__ */ jsx(SegmentBase, { ...props });
-		$[13] = props;
-		$[14] = t0;
-	} else t0 = $[14];
-	return t0;
+	return /* @__PURE__ */ jsx(SegmentBase, { ...props });
 };
-function _temp(_, i) {
-	return i % 2 === 0 ? "1fr" : "auto";
-}
 //#endregion
 export { Segment };

package/dist/components/segment/SegmentItem.js

@@ -1,85 +1,28 @@
 import { UIOverrides } from "../../config/uiOverrides.context.js";
 import { Typography } from "../text/Typography/Typography.js";
 import { segmentItemDefinition } from "./segment.cva.js";
-import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ToggleButton } from "react-aria-components";
 //#region src/components/segment/SegmentItem.tsx
-var SegmentItem = (t0) => {
-	const $ = c(23);
-	let className;
-	let icon;
-	let id;
-	let isDisabled;
-	let label;
-	let props;
-	if ($[0] !== t0) {
-		({label, icon, id, isDisabled, className, ...props} = t0);
-		$[0] = t0;
-		$[1] = className;
-		$[2] = icon;
-		$[3] = id;
-		$[4] = isDisabled;
-		$[5] = label;
-		$[6] = props;
-	} else {
-		className = $[1];
-		icon = $[2];
-		id = $[3];
-		isDisabled = $[4];
-		label = $[5];
-		props = $[6];
-	}
+var SegmentItem = ({ label, icon, id, isDisabled, className, ...props }) => {
 	const IconComponent = icon;
 	const iconOnly = !!(icon && !label);
 	const segmentItemCva = UIOverrides.useCva("segment.itemCva", segmentItemDefinition);
-	let t1;
-	if ($[7] !== className || $[8] !== iconOnly || $[9] !== segmentItemCva) {
-		t1 = segmentItemCva({
+	return /* @__PURE__ */ jsxs(ToggleButton, {
+		...props,
+		id,
+		className: segmentItemCva({
 			iconOnly,
 			className
-		});
-		$[7] = className;
-		$[8] = iconOnly;
-		$[9] = segmentItemCva;
-		$[10] = t1;
-	} else t1 = $[10];
-	let t2;
-	if ($[11] !== IconComponent || $[12] !== icon) {
-		t2 = icon && /* @__PURE__ */ jsx(IconComponent, { className: "size-6" });
-		$[11] = IconComponent;
-		$[12] = icon;
-		$[13] = t2;
-	} else t2 = $[13];
-	let t3;
-	if ($[14] !== label) {
-		t3 = label && /* @__PURE__ */ jsx(Typography, {
+		}),
+		isDisabled,
+		children: [icon && /* @__PURE__ */ jsx(IconComponent, { className: "size-6" }), label && /* @__PURE__ */ jsx(Typography, {
 			size: "label-2",
 			as: "span",
 			className: "overflow-hidden text-ellipsis text-center",
 			children: label
-		});
-		$[14] = label;
-		$[15] = t3;
-	} else t3 = $[15];
-	let t4;
-	if ($[16] !== id || $[17] !== isDisabled || $[18] !== props || $[19] !== t1 || $[20] !== t2 || $[21] !== t3) {
-		t4 = /* @__PURE__ */ jsxs(ToggleButton, {
-			...props,
-			id,
-			className: t1,
-			isDisabled,
-			children: [t2, t3]
-		});
-		$[16] = id;
-		$[17] = isDisabled;
-		$[18] = props;
-		$[19] = t1;
-		$[20] = t2;
-		$[21] = t3;
-		$[22] = t4;
-	} else t4 = $[22];
-	return t4;
+		})]
+	});
 };
 //#endregion
 export { SegmentItem };

package/dist/components/shared/pagination/Pagination.js

@@ -2,31 +2,16 @@ import { Typography } from "../../text/Typography/Typography.js";
 import "../../../config/i18n.js";
 import { NumberInput } from "../../inputs/Input/NumberInput/NumberInput.js";
 import { PaginationList } from "./PaginationList.js";
-import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { useTranslation } from "react-i18next";
 //#region src/components/shared/pagination/Pagination.tsx
-var Pagination = (t0) => {
-	const $ = c(34);
-	const { size: t1, variant: t2, color: t3, page, totalItems, totalPages, pageSize, hideText: t4, hideFirstLast: t5, hidePrevNext: t6, hideNumbers: t7, className, onPageChange, onPageSizeChange } = t0;
-	const size = t1 === void 0 ? "s" : t1;
-	const variant = t2 === void 0 ? "subtle" : t2;
-	const color = t3 === void 0 ? "secondary" : t3;
-	const hideText = t4 === void 0 ? true : t4;
-	const hideFirstLast = t5 === void 0 ? true : t5;
-	const hidePrevNext = t6 === void 0 ? false : t6;
-	const hideNumbers = t7 === void 0 ? false : t7;
+var Pagination = ({ size = "s", variant = "subtle", color = "secondary", page, totalItems, totalPages, pageSize, hideText = true, hideFirstLast = true, hidePrevNext = false, hideNumbers = false, className, onPageChange, onPageSizeChange }) => {
 	const { t } = useTranslation("ui");
-	let t8;
-	if ($[0] !== className) {
-		t8 = clsx("flex items-center gap-2", className);
-		$[0] = className;
-		$[1] = t8;
-	} else t8 = $[1];
-	let t9;
-	if ($[2] !== color || $[3] !== hideFirstLast || $[4] !== hideNumbers || $[5] !== hidePrevNext || $[6] !== hideText || $[7] !== onPageChange || $[8] !== page || $[9] !== pageSize || $[10] !== size || $[11] !== totalItems || $[12] !== totalPages || $[13] !== variant) {
-		t9 = totalItems > pageSize && /* @__PURE__ */ jsx(PaginationList, {
+	return /* @__PURE__ */ jsxs("nav", {
+		id: "pagination",
+		className: clsx("flex items-center gap-2", className),
+		children: [totalItems > pageSize && /* @__PURE__ */ jsx(PaginationList, {
 			page,
 			size,
 			color,
@@ -37,95 +22,24 @@ var Pagination = (t0) => {
 			hideNumbers,
 			totalPages: totalPages ?? Math.ceil(totalItems / pageSize),
 			onPageChange
-		});
-		$[2] = color;
-		$[3] = hideFirstLast;
-		$[4] = hideNumbers;
-		$[5] = hidePrevNext;
-		$[6] = hideText;
-		$[7] = onPageChange;
-		$[8] = page;
-		$[9] = pageSize;
-		$[10] = size;
-		$[11] = totalItems;
-		$[12] = totalPages;
-		$[13] = variant;
-		$[14] = t9;
-	} else t9 = $[14];
-	let t10;
-	if ($[15] !== t) {
-		t10 = t(_temp);
-		$[15] = t;
-		$[16] = t10;
-	} else t10 = $[16];
-	let t11;
-	if ($[17] !== t10) {
-		t11 = /* @__PURE__ */ jsx(Typography, {
-			variant: "default",
-			size: "label-2",
-			as: "span",
-			className: "whitespace-nowrap text-text-default-1",
-			children: t10
-		});
-		$[17] = t10;
-		$[18] = t11;
-	} else t11 = $[18];
-	let t12;
-	if ($[19] !== onPageSizeChange) {
-		t12 = (value) => onPageSizeChange?.(Number(value));
-		$[19] = onPageSizeChange;
-		$[20] = t12;
-	} else t12 = $[20];
-	let t13;
-	if ($[21] !== t) {
-		t13 = t(_temp2);
-		$[21] = t;
-		$[22] = t13;
-	} else t13 = $[22];
-	let t14;
-	if ($[23] !== pageSize || $[24] !== t12 || $[25] !== t13) {
-		t14 = /* @__PURE__ */ jsx(NumberInput, {
-			value: pageSize,
-			onChange: t12,
-			label: t13,
-			hideLabel: true,
-			className: "w-min",
-			inputClassName: "min-w-12 !px-3 !py-0-5"
-		});
-		$[23] = pageSize;
-		$[24] = t12;
-		$[25] = t13;
-		$[26] = t14;
-	} else t14 = $[26];
-	let t15;
-	if ($[27] !== t11 || $[28] !== t14) {
-		t15 = /* @__PURE__ */ jsxs("div", {
+		}), /* @__PURE__ */ jsxs("div", {
 			className: "flex items-center gap-2",
-			children: [t11, t14]
-		});
-		$[27] = t11;
-		$[28] = t14;
-		$[29] = t15;
-	} else t15 = $[29];
-	let t16;
-	if ($[30] !== t15 || $[31] !== t8 || $[32] !== t9) {
-		t16 = /* @__PURE__ */ jsxs("nav", {
-			id: "pagination",
-			className: t8,
-			children: [t9, t15]
-		});
-		$[30] = t15;
-		$[31] = t8;
-		$[32] = t9;
-		$[33] = t16;
-	} else t16 = $[33];
-	return t16;
+			children: [/* @__PURE__ */ jsx(Typography, {
+				variant: "default",
+				size: "label-2",
+				as: "span",
+				className: "whitespace-nowrap text-text-default-1",
+				children: t(($) => $.ui.pagination.resultsPerPage)
+			}), /* @__PURE__ */ jsx(NumberInput, {
+				value: pageSize,
+				onChange: (value) => onPageSizeChange?.(Number(value)),
+				label: t(($) => $.ui.pagination.resultsPerPage),
+				hideLabel: true,
+				className: "w-min",
+				inputClassName: "min-w-12 !px-3 !py-0-5"
+			})]
+		})]
+	});
 };
-function _temp($) {
-	return $.ui.pagination.resultsPerPage;
-}
-function _temp2($_0) {
-	return $_0.ui.pagination.resultsPerPage;
-}
 //#endregion
 export { Pagination };