@povio/ui 5.0.0-rc.9 → 6.0.0-rc.2

package/dist/{checkbox.cva-t1Ox50hy.d.ts → checkbox.cva-CZnnBl8g.d.ts}

@@ -1,12 +1,12 @@
-import { t as StyleMergeUtils } from "./style-merge.util-zLimKwt6.js";
-import { t as UIOverrides } from "./uiOverrides.context-DEp139He.js";
-import "./typography.cva-D1JOEYl-.js";
+import { n as StyleMergeUtils, t as UIOverrides } from "./uiOverrides.context-Dmev7iRS.js";
+import "./style-definitions-DzsmGccZ.js";
+import "./typography.cva-CKCCpIMj.js";
 //#region src/components/inputs/Checkbox/checkbox.cva.d.ts
 declare const checkboxDefinition: {
   base: string[];
   config: StyleMergeUtils.Config<{
     readonly variant: {
-      default: ["m-1 border-interactive-primary-background bg-support-transparent-outline", "text-interactive-primary-foreground", "group-focus-visible:outline-interactive-ring", "group-not-disabled:group-invalid:border-border-destructive-base", "group-disabled:border-state-interactive-primary-background/disabled", "group-not-disabled:group-not-invalid:group-hover:border-state-interactive-primary-background/hover", "group-not-disabled:group-not-invalid:group-pressed:border-state-interactive-primary-background/pressed", "group-selected:bg-interactive-primary-background", "group-selected:group-not-disabled:group-hover:bg-state-interactive-primary-background/hover", "group-selected:group-not-disabled:group-pressed:bg-state-interactive-primary-background/pressed", "group-selected:group-disabled:bg-state-interactive-primary-background/disabled", "group-indeterminate:bg-interactive-primary-background", "group-indeterminate:group-not-disabled:group-hover:bg-state-interactive-primary-background/hover", "group-indeterminate:group-not-disabled:group-pressed:bg-state-interactive-primary-background/pressed", "group-indeterminate:group-disabled:bg-state-interactive-primary-background/disabled"];
+      default: ["border-input text-primary-foreground dark:bg-input/30", "group-selected:border-primary group-selected:bg-primary dark:group-selected:bg-primary", "group-indeterminate:border-primary group-indeterminate:bg-primary dark:group-indeterminate:bg-primary", "group-not-selected:group-not-indeterminate:group-not-invalid:group-focus-visible:border-ring", "group-not-selected:group-not-indeterminate:group-invalid:border-destructive"];
     };
   }>;
 };
@@ -39,7 +39,7 @@ declare const checkboxGroupLabelDefinition: {
   config: StyleMergeUtils.Config<{
     readonly as: {
       readonly default: "";
-      readonly floating: ["pointer-events-none absolute", "top-[calc(var(--spacing-floating-label-input-height-filled)+var(--spacing-floating-label-input-offset-top))]", "text-surface-default-card-foreground", "font-semibold!", "text-small!"];
+      readonly floating: ["pointer-events-none absolute", "top-[0.5625rem]", "text-foreground", "font-medium!", "text-xs!"];
       readonly filter: "";
       readonly inline: "";
     };
@@ -67,7 +67,7 @@ declare const checkboxIconDefinition: {
   base: string[];
   config: StyleMergeUtils.Config<{
     readonly iconVariant: {
-      selected: ["group-selected:block"];
+      selected: ["group-selected:group-not-indeterminate:block"];
       indeterminate: ["group-indeterminate:block"];
     };
   }>;

package/dist/checkbox.cva-DCVi4-4z.js

@@ -0,0 +1,128 @@
+import { t as UIOverrides } from "./uiOverrides.context-BTCH9y5a.js";
+import { t as uiGroupOutlineClass } from "./outline.clsx-DGGQQRkM.js";
+import { t as compoundMapper } from "./compoundMapper-Di3SKZnS.js";
+//#region src/components/inputs/Checkbox/checkbox.cva.ts
+const checkboxDefinition = UIOverrides.defineConfig({
+	base: ["relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border shadow-xs transition-shadow", uiGroupOutlineClass],
+	config: {
+		variants: { variant: { default: [
+			"border-input text-primary-foreground dark:bg-input/30",
+			"group-selected:border-primary group-selected:bg-primary dark:group-selected:bg-primary",
+			"group-indeterminate:border-primary group-indeterminate:bg-primary dark:group-indeterminate:bg-primary",
+			"group-not-selected:group-not-indeterminate:group-not-invalid:group-focus-visible:border-ring",
+			"group-not-selected:group-not-indeterminate:group-invalid:border-destructive"
+		] } },
+		defaultVariants: { variant: "default" }
+	}
+});
+const checkboxIndicatorClass = "group flex items-center gap-3 disabled:cursor-not-allowed disabled:opacity-50";
+const checkboxTypography = compoundMapper({ default: {
+	size: "large",
+	sizeMobile: "large"
+} });
+const checkboxContentClassName = compoundMapper({ default: "leading-none font-medium text-foreground select-none" });
+const checkboxContentWrapperDefinition = UIOverrides.defineConfig({
+	base: ["relative flex"],
+	config: {
+		variants: {
+			variant: { default: "" },
+			size: {
+				small: "",
+				default: ""
+			},
+			as: {
+				default: "flex-col",
+				floating: "flex-col",
+				filter: "flex-row flex-wrap items-center gap-2",
+				inline: "flex-row flex-wrap items-center gap-2"
+			},
+			hasInputFrame: {
+				true: "gap-2",
+				false: ""
+			}
+		},
+		compoundVariants: [
+			{
+				as: "floating",
+				hasInputFrame: true,
+				className: ["pt-[2.0625rem] pb-[0.4375rem]"]
+			},
+			{
+				as: "floating",
+				size: "small",
+				hasInputFrame: true,
+				className: "px-3"
+			},
+			{
+				as: "floating",
+				size: "default",
+				hasInputFrame: true,
+				className: "px-3"
+			}
+		],
+		defaultVariants: {
+			variant: "default",
+			as: "default",
+			size: "default",
+			hasInputFrame: false
+		}
+	}
+});
+const checkboxGroupLabelDefinition = UIOverrides.defineConfig({
+	base: [""],
+	config: {
+		variants: { as: {
+			default: "",
+			floating: [
+				"pointer-events-none absolute",
+				"top-[0.5625rem]",
+				"text-foreground",
+				"font-medium!",
+				"text-xs!"
+			],
+			filter: "",
+			inline: ""
+		} },
+		defaultVariants: { as: "default" }
+	}
+});
+const checkboxContentRowDefinition = UIOverrides.defineConfig({
+	base: ["flex"],
+	config: {
+		variants: {
+			variant: { default: "" },
+			as: {
+				default: "flex-col",
+				floating: "flex-col",
+				filter: "flex-row flex-wrap items-center gap-2",
+				inline: "flex-row flex-wrap items-center gap-2"
+			},
+			hasInputFrame: {
+				true: "gap-2",
+				false: ""
+			}
+		},
+		compoundVariants: [{
+			as: ["default", "floating"],
+			hasInputFrame: false,
+			className: "gap-3"
+		}],
+		defaultVariants: {
+			variant: "default",
+			as: "default",
+			hasInputFrame: false
+		}
+	}
+});
+const checkboxIconDefinition = UIOverrides.defineConfig({
+	base: ["absolute hidden size-3.5"],
+	config: {
+		variants: { iconVariant: {
+			selected: ["group-selected:group-not-indeterminate:block"],
+			indeterminate: ["group-indeterminate:block"]
+		} },
+		defaultVariants: { iconVariant: "selected" }
+	}
+});
+//#endregion
+export { checkboxGroupLabelDefinition as a, checkboxTypography as c, checkboxDefinition as i, checkboxContentRowDefinition as n, checkboxIconDefinition as o, checkboxContentWrapperDefinition as r, checkboxIndicatorClass as s, checkboxContentClassName as t };

package/dist/components/accordion.js

@@ -1,2 +1,2 @@
-import { t as Accordion } from "../Accordion-BzwO4_ml.js";
+import { t as Accordion } from "../Accordion-DycXjzGK.js";
 export { Accordion };

package/dist/components/alert-dialog.d.ts

@@ -1,2 +1,2 @@
-import { n as AlertDialogProps, t as AlertDialog } from "../AlertDialog-OWTbR4km.js";
+import { n as AlertDialogProps, t as AlertDialog } from "../AlertDialog-CDCbfARJ.js";
 export { AlertDialog, AlertDialogProps };

package/dist/components/alert-dialog.js

@@ -1,8 +1,9 @@
-import { t as UIConfig } from "../uiConfig.context-BS3r_kTS.js";
+import { t as UIConfig } from "../uiConfig.context-dxsO9puE.js";
 import { t as clsx } from "../clsx-CnD0nOiA.js";
-import { t as Typography } from "../Typography-LU4z2pR1.js";
-import { t as Button } from "../Button-C5rv4Cr2.js";
-import { t as Dialog } from "../Dialog-9manOgMA.js";
+import { t as Typography } from "../Typography-Ba5l4rmj.js";
+import { t as Button } from "../Button-DU1Q8GDB.js";
+import { t as Dialog } from "../Dialog-COvYzwNU.js";
+import { useId } from "react";
 import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/overlays/AlertDialog/AlertDialog.tsx
@@ -12,7 +13,7 @@ const textAlignClassMap = {
 	right: "text-right"
 };
 const AlertDialog = (t0) => {
-	const $ = c(52);
+	const $ = c(54);
 	let description;
 	let descriptionClassName;
 	let descriptionTypography;
@@ -57,132 +58,133 @@ const AlertDialog = (t0) => {
 	const buttonSize = t1 === void 0 ? "default" : t1;
 	const textAlign = t2 === void 0 ? "left" : t2;
 	const ui = UIConfig.useConfig();
+	const headingId = useId();
 	const textAlignClass = textAlignClassMap[textAlign];
+	const resolvedTitleTypography = titleTypography ?? ui.alertDialog.titleTypography;
+	const resolvedDescriptionTypography = descriptionTypography ?? ui.alertDialog.descriptionTypography;
 	let t3;
 	if ($[13] !== dialogClassName) {
 		t3 = clsx("w-modal", dialogClassName);
 		$[13] = dialogClassName;
 		$[14] = t3;
 	} else t3 = $[14];
-	const t4 = titleTypography ?? ui.alertDialog.titleTypography;
+	const t4 = modalProps["aria-labelledby"] ?? (modalProps["aria-label"] ? void 0 : headingId);
 	let t5;
-	if ($[15] !== textAlignClass || $[16] !== titleClassName) {
-		t5 = clsx("text-surface-default-card-foreground", textAlignClass, titleClassName);
-		$[15] = textAlignClass;
-		$[16] = titleClassName;
-		$[17] = t5;
-	} else t5 = $[17];
+	if ($[15] !== resolvedTitleTypography.className || $[16] !== textAlignClass || $[17] !== titleClassName) {
+		t5 = clsx("text-foreground", resolvedTitleTypography.className, textAlignClass, titleClassName);
+		$[15] = resolvedTitleTypography.className;
+		$[16] = textAlignClass;
+		$[17] = titleClassName;
+		$[18] = t5;
+	} else t5 = $[18];
 	let t6;
-	if ($[18] !== heading || $[19] !== t4 || $[20] !== t5) {
+	if ($[19] !== heading || $[20] !== headingId || $[21] !== resolvedTitleTypography || $[22] !== t5) {
 		t6 = /* @__PURE__ */ jsx(Typography, {
-			...t4,
+			...resolvedTitleTypography,
 			as: "h2",
+			id: headingId,
 			className: t5,
 			children: heading
 		});
-		$[18] = heading;
-		$[19] = t4;
-		$[20] = t5;
-		$[21] = t6;
-	} else t6 = $[21];
-	const t7 = descriptionTypography ?? ui.alertDialog.descriptionTypography;
+		$[19] = heading;
+		$[20] = headingId;
+		$[21] = resolvedTitleTypography;
+		$[22] = t5;
+		$[23] = t6;
+	} else t6 = $[23];
+	let t7;
+	if ($[24] !== descriptionClassName || $[25] !== resolvedDescriptionTypography.className || $[26] !== textAlignClass) {
+		t7 = clsx("text-muted-foreground", resolvedDescriptionTypography.className, textAlignClass, descriptionClassName);
+		$[24] = descriptionClassName;
+		$[25] = resolvedDescriptionTypography.className;
+		$[26] = textAlignClass;
+		$[27] = t7;
+	} else t7 = $[27];
 	let t8;
-	if ($[22] !== descriptionClassName || $[23] !== textAlignClass) {
-		t8 = clsx("text-surface-default-card-foreground", textAlignClass, descriptionClassName);
-		$[22] = descriptionClassName;
-		$[23] = textAlignClass;
-		$[24] = t8;
-	} else t8 = $[24];
-	let t9;
-	if ($[25] !== description || $[26] !== t7 || $[27] !== t8) {
-		t9 = /* @__PURE__ */ jsx(Typography, {
-			...t7,
-			className: t8,
+	if ($[28] !== description || $[29] !== resolvedDescriptionTypography || $[30] !== t7) {
+		t8 = /* @__PURE__ */ jsx(Typography, {
+			...resolvedDescriptionTypography,
+			className: t7,
 			children: description
 		});
-		$[25] = description;
-		$[26] = t7;
-		$[27] = t8;
-		$[28] = t9;
-	} else t9 = $[28];
-	let t10;
-	if ($[29] !== t6 || $[30] !== t9) {
-		t10 = /* @__PURE__ */ jsxs("div", {
-			className: "flex flex-col gap-modal-gap-text",
-			children: [t6, t9]
+		$[28] = description;
+		$[29] = resolvedDescriptionTypography;
+		$[30] = t7;
+		$[31] = t8;
+	} else t8 = $[31];
+	let t9;
+	if ($[32] !== t6 || $[33] !== t8) {
+		t9 = /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-2",
+			children: [t6, t8]
 		});
-		$[29] = t6;
-		$[30] = t9;
-		$[31] = t10;
-	} else t10 = $[31];
-	let t11;
-	if ($[32] !== buttonSize || $[33] !== secondaryAction) {
-		t11 = secondaryAction && /* @__PURE__ */ jsx(Button, {
-			variant: secondaryAction?.variant ?? "contained",
+		$[32] = t6;
+		$[33] = t8;
+		$[34] = t9;
+	} else t9 = $[34];
+	let t10;
+	if ($[35] !== buttonSize || $[36] !== secondaryAction) {
+		t10 = secondaryAction && /* @__PURE__ */ jsx(Button, {
+			variant: secondaryAction?.variant ?? "outline",
 			size: buttonSize,
 			color: secondaryAction?.color ?? "secondary",
-			width: "fill",
+			width: "hug",
 			onPress: secondaryAction?.onPress,
-			className: clsx("min-w-40 flex-1 shrink-0", secondaryAction?.className),
+			className: secondaryAction?.className,
 			children: secondaryAction?.label
 		});
-		$[32] = buttonSize;
-		$[33] = secondaryAction;
-		$[34] = t11;
-	} else t11 = $[34];
-	const t12 = primaryAction?.variant ?? "contained";
-	const t13 = primaryAction?.color ?? "primary";
-	const t14 = primaryAction.onPress;
-	const t15 = primaryAction?.className;
-	let t16;
-	if ($[35] !== t15) {
-		t16 = clsx("min-w-40 flex-1 shrink-0", t15);
-		$[35] = t15;
-		$[36] = t16;
-	} else t16 = $[36];
-	let t17;
-	if ($[37] !== buttonSize || $[38] !== primaryAction.label || $[39] !== primaryAction.onPress || $[40] !== t12 || $[41] !== t13 || $[42] !== t16) {
-		t17 = /* @__PURE__ */ jsx(Button, {
-			variant: t12,
+		$[35] = buttonSize;
+		$[36] = secondaryAction;
+		$[37] = t10;
+	} else t10 = $[37];
+	const t11 = primaryAction?.variant ?? "contained";
+	const t12 = primaryAction?.color ?? "primary";
+	const t13 = primaryAction?.className;
+	let t14;
+	if ($[38] !== buttonSize || $[39] !== primaryAction.label || $[40] !== primaryAction.onPress || $[41] !== t11 || $[42] !== t12 || $[43] !== t13) {
+		t14 = /* @__PURE__ */ jsx(Button, {
+			variant: t11,
 			size: buttonSize,
-			color: t13,
-			width: "fill",
-			onPress: t14,
-			className: t16,
+			color: t12,
+			width: "hug",
+			onPress: primaryAction.onPress,
+			className: t13,
 			children: primaryAction.label
 		});
-		$[37] = buttonSize;
-		$[38] = primaryAction.label;
-		$[39] = primaryAction.onPress;
-		$[40] = t12;
-		$[41] = t13;
-		$[42] = t16;
-		$[43] = t17;
-	} else t17 = $[43];
-	let t18;
-	if ($[44] !== t11 || $[45] !== t17) {
-		t18 = /* @__PURE__ */ jsxs("div", {
-			className: "flex w-full flex-wrap gap-modal-gap-buttons pt-1",
-			children: [t11, t17]
+		$[38] = buttonSize;
+		$[39] = primaryAction.label;
+		$[40] = primaryAction.onPress;
+		$[41] = t11;
+		$[42] = t12;
+		$[43] = t13;
+		$[44] = t14;
+	} else t14 = $[44];
+	let t15;
+	if ($[45] !== t10 || $[46] !== t14) {
+		t15 = /* @__PURE__ */ jsxs("div", {
+			className: "flex w-full flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+			children: [t10, t14]
 		});
-		$[44] = t11;
-		$[45] = t17;
-		$[46] = t18;
-	} else t18 = $[46];
-	let t19;
-	if ($[47] !== modalProps || $[48] !== t10 || $[49] !== t18 || $[50] !== t3) {
-		t19 = /* @__PURE__ */ jsxs(Dialog, {
+		$[45] = t10;
+		$[46] = t14;
+		$[47] = t15;
+	} else t15 = $[47];
+	let t16;
+	if ($[48] !== modalProps || $[49] !== t15 || $[50] !== t3 || $[51] !== t4 || $[52] !== t9) {
+		t16 = /* @__PURE__ */ jsxs(Dialog, {
 			dialogClassName: t3,
 			...modalProps,
-			children: [t10, t18]
+			"aria-labelledby": t4,
+			children: [t9, t15]
 		});
-		$[47] = modalProps;
-		$[48] = t10;
-		$[49] = t18;
+		$[48] = modalProps;
+		$[49] = t15;
 		$[50] = t3;
-		$[51] = t19;
-	} else t19 = $[51];
-	return t19;
+		$[51] = t4;
+		$[52] = t9;
+		$[53] = t16;
+	} else t16 = $[53];
+	return t16;
 };
 //#endregion
 export { AlertDialog };

package/dist/components/alert.d.ts

@@ -1,2 +1,2 @@
-import { n as AlertProps, t as Alert } from "../Alert-DfiJbKH0.js";
+import { n as AlertProps, t as Alert } from "../Alert-BpPHCE5-.js";
 export { Alert, AlertProps };

package/dist/components/alert.js

@@ -1,2 +1,117 @@
-import { t as Alert } from "../Alert-CnvEb1D_.js";
+import { t as UIOverrides } from "../uiOverrides.context-BTCH9y5a.js";
+import { t as IconSlot } from "../IconSlot-Cuvpj1gd.js";
+import { t as Typography } from "../Typography-Ba5l4rmj.js";
+import { t as Spinner } from "../Spinner-CFj5Iu77.js";
+import { n as statusSeparatorDefinition, r as alertDefinition, t as statusIconDefinition } from "../status.cva-CUpcOT4W.js";
+import { c } from "react/compiler-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/status/Alert/Alert.tsx
+const Alert = (t0) => {
+	const $ = c(31);
+	const { variant, color, text, isLoading: t1, rightContent, hasSeparator, icon: Icon, className } = t0;
+	const isLoading = t1 === void 0 ? false : t1;
+	const alertCva = UIOverrides.useCva("alert.cva", alertDefinition);
+	const iconCva = UIOverrides.useCva("status.iconCva", statusIconDefinition);
+	const separatorCva = UIOverrides.useCva("status.separatorCva", statusSeparatorDefinition);
+	let t2;
+	if ($[0] !== alertCva || $[1] !== className || $[2] !== color || $[3] !== variant) {
+		t2 = alertCva({
+			variant,
+			color,
+			className
+		});
+		$[0] = alertCva;
+		$[1] = className;
+		$[2] = color;
+		$[3] = variant;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== isLoading) {
+		t3 = isLoading && /* @__PURE__ */ jsx("span", {
+			className: "flex h-5 shrink-0 items-center",
+			children: /* @__PURE__ */ jsx(Spinner, { size: "default" })
+		});
+		$[5] = isLoading;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== Icon || $[8] !== color || $[9] !== iconCva || $[10] !== isLoading || $[11] !== variant) {
+		t4 = !isLoading && Icon && /* @__PURE__ */ jsx(IconSlot, {
+			icon: Icon,
+			className: iconCva({
+				variant,
+				color
+			})
+		});
+		$[7] = Icon;
+		$[8] = color;
+		$[9] = iconCva;
+		$[10] = isLoading;
+		$[11] = variant;
+		$[12] = t4;
+	} else t4 = $[12];
+	let t5;
+	if ($[13] !== text) {
+		t5 = /* @__PURE__ */ jsx(Typography, {
+			size: "large",
+			children: text
+		});
+		$[13] = text;
+		$[14] = t5;
+	} else t5 = $[14];
+	let t6;
+	if ($[15] !== t3 || $[16] !== t4 || $[17] !== t5) {
+		t6 = /* @__PURE__ */ jsxs("div", {
+			className: "flex w-full items-start gap-3",
+			children: [
+				t3,
+				t4,
+				t5
+			]
+		});
+		$[15] = t3;
+		$[16] = t4;
+		$[17] = t5;
+		$[18] = t6;
+	} else t6 = $[18];
+	let t7;
+	if ($[19] !== color || $[20] !== hasSeparator || $[21] !== rightContent || $[22] !== separatorCva || $[23] !== variant) {
+		t7 = !!rightContent && /* @__PURE__ */ jsxs(Fragment, { children: [hasSeparator && /* @__PURE__ */ jsx("div", { className: separatorCva({
+			variant,
+			color
+		}) }), /* @__PURE__ */ jsx("div", {
+			className: "flex w-full shrink-0 flex-wrap items-center justify-end gap-2 md:w-auto",
+			children: rightContent
+		})] });
+		$[19] = color;
+		$[20] = hasSeparator;
+		$[21] = rightContent;
+		$[22] = separatorCva;
+		$[23] = variant;
+		$[24] = t7;
+	} else t7 = $[24];
+	let t8;
+	if ($[25] !== t6 || $[26] !== t7) {
+		t8 = /* @__PURE__ */ jsxs("div", {
+			className: "flex w-auto flex-col gap-3 md:flex-row md:items-center",
+			children: [t6, t7]
+		});
+		$[25] = t6;
+		$[26] = t7;
+		$[27] = t8;
+	} else t8 = $[27];
+	let t9;
+	if ($[28] !== t2 || $[29] !== t8) {
+		t9 = /* @__PURE__ */ jsx("div", {
+			className: t2,
+			children: t8
+		});
+		$[28] = t2;
+		$[29] = t8;
+		$[30] = t9;
+	} else t9 = $[30];
+	return t9;
+};
+//#endregion
 export { Alert };

package/dist/components/autocomplete.d.ts

@@ -1,2 +1,2 @@
-import { n as AutocompleteProps, r as ControlledAutocompleteProps, t as Autocomplete } from "../Autocomplete-BwNHp8fy.js";
-export { Autocomplete, AutocompleteProps, ControlledAutocompleteProps };
+import { a as AutocompleteProps, i as AutocompleteItem, n as AutocompleteComponent, r as AutocompleteInner, t as Autocomplete } from "../Autocomplete-BUslodfn.js";
+export { Autocomplete, type AutocompleteComponent, type AutocompleteInner, type AutocompleteItem, type AutocompleteProps };