@povio/ui 2.3.3 → 3.0.0-rc.2

package/dist/components/text/Tag/tag.cva.js

@@ -1,52 +1,55 @@
+import { UIOverrides } from "../../../config/uiOverrides.context.js";
 import { uiOutlineClass } from "../../outline.clsx.js";
-import { cva } from "class-variance-authority";
 //#region src/components/text/Tag/tag.cva.ts
-var tag = cva([
-	uiOutlineClass,
-	"inline-flex items-center gap-list-gap-icon-to-label",
-	"p-pill-height-s px-1-5",
-	"rounded-pill-rounding-default",
-	"overflow-hidden",
-	"disabled:cursor-default"
-], {
-	variants: { color: {
-		primary: [
-			"bg-interactive-subtle-primary-idle text-interactive-subtle-primary-on-idle",
-			"hover:bg-interactive-subtle-primary-hover hover:text-interactive-subtle-primary-on-hover",
-			"pressed:bg-interactive-subtle-primary-pressed pressed:text-interactive-subtle-primary-on-pressed",
-			"disabled:bg-interactive-subtle-primary-disabled disabled:text-interactive-subtle-primary-on-disabled",
-			"focus-visible:outline-interactive-contained-primary-focus"
-		],
-		secondary: [
-			"bg-interactive-subtle-secondary-idle text-interactive-subtle-secondary-on-idle",
-			"hover:bg-interactive-subtle-secondary-hover hover:text-interactive-subtle-secondary-on-hover",
-			"pressed:bg-interactive-subtle-secondary-pressed pressed:text-interactive-subtle-secondary-on-pressed",
-			"disabled:bg-interactive-subtle-secondary-disabled disabled:text-interactive-subtle-secondary-on-disabled",
-			"focus-visible:outline-interactive-contained-primary-focus"
-		],
-		success: [
-			"bg-interactive-subtle-success-idle text-interactive-subtle-success-on-idle",
-			"hover:bg-interactive-subtle-success-hover hover:text-interactive-subtle-success-on-hover",
-			"pressed:bg-interactive-subtle-success-pressed pressed:text-interactive-subtle-success-on-pressed",
-			"disabled:bg-interactive-subtle-success-disabled disabled:text-interactive-subtle-success-on-disabled",
-			"focus-visible:outline-interactive-contained-primary-focus"
-		],
-		warning: [
-			"bg-interactive-subtle-warning-idle text-interactive-subtle-warning-on-idle",
-			"hover:bg-interactive-subtle-warning-hover hover:text-interactive-subtle-warning-on-hover",
-			"pressed:bg-interactive-subtle-warning-pressed pressed:text-interactive-subtle-warning-on-pressed",
-			"disabled:bg-interactive-subtle-warning-disabled disabled:text-interactive-subtle-warning-on-disabled",
-			"focus-visible:outline-interactive-contained-primary-focus"
-		],
-		error: [
-			"bg-interactive-subtle-error-idle text-interactive-subtle-error-on-idle",
-			"hover:bg-interactive-subtle-error-hover hover:text-interactive-subtle-error-on-hover",
-			"pressed:bg-interactive-subtle-error-pressed pressed:text-interactive-subtle-error-on-pressed",
-			"disabled:bg-interactive-subtle-error-disabled disabled:text-interactive-subtle-error-on-disabled",
-			"focus-visible:outline-interactive-contained-primary-focus"
-		]
-	} },
-	defaultVariants: { color: "primary" }
+var tagDefinition = UIOverrides.defineConfig({
+	base: [
+		uiOutlineClass,
+		"inline-flex items-center gap-list-gap-icon-to-label",
+		"p-pill-height-s px-1-5",
+		"rounded-pill-rounding-default",
+		"overflow-hidden",
+		"disabled:cursor-default"
+	],
+	config: {
+		variants: { color: {
+			primary: [
+				"bg-interactive-subtle-primary-idle text-interactive-subtle-primary-on-idle",
+				"hover:bg-interactive-subtle-primary-hover hover:text-interactive-subtle-primary-on-hover",
+				"pressed:bg-interactive-subtle-primary-pressed pressed:text-interactive-subtle-primary-on-pressed",
+				"disabled:bg-interactive-subtle-primary-disabled disabled:text-interactive-subtle-primary-on-disabled",
+				"focus-visible:outline-interactive-contained-primary-focus"
+			],
+			secondary: [
+				"bg-interactive-subtle-secondary-idle text-interactive-subtle-secondary-on-idle",
+				"hover:bg-interactive-subtle-secondary-hover hover:text-interactive-subtle-secondary-on-hover",
+				"pressed:bg-interactive-subtle-secondary-pressed pressed:text-interactive-subtle-secondary-on-pressed",
+				"disabled:bg-interactive-subtle-secondary-disabled disabled:text-interactive-subtle-secondary-on-disabled",
+				"focus-visible:outline-interactive-contained-primary-focus"
+			],
+			success: [
+				"bg-interactive-subtle-success-idle text-interactive-subtle-success-on-idle",
+				"hover:bg-interactive-subtle-success-hover hover:text-interactive-subtle-success-on-hover",
+				"pressed:bg-interactive-subtle-success-pressed pressed:text-interactive-subtle-success-on-pressed",
+				"disabled:bg-interactive-subtle-success-disabled disabled:text-interactive-subtle-success-on-disabled",
+				"focus-visible:outline-interactive-contained-primary-focus"
+			],
+			warning: [
+				"bg-interactive-subtle-warning-idle text-interactive-subtle-warning-on-idle",
+				"hover:bg-interactive-subtle-warning-hover hover:text-interactive-subtle-warning-on-hover",
+				"pressed:bg-interactive-subtle-warning-pressed pressed:text-interactive-subtle-warning-on-pressed",
+				"disabled:bg-interactive-subtle-warning-disabled disabled:text-interactive-subtle-warning-on-disabled",
+				"focus-visible:outline-interactive-contained-primary-focus"
+			],
+			error: [
+				"bg-interactive-subtle-error-idle text-interactive-subtle-error-on-idle",
+				"hover:bg-interactive-subtle-error-hover hover:text-interactive-subtle-error-on-hover",
+				"pressed:bg-interactive-subtle-error-pressed pressed:text-interactive-subtle-error-on-pressed",
+				"disabled:bg-interactive-subtle-error-disabled disabled:text-interactive-subtle-error-on-disabled",
+				"focus-visible:outline-interactive-contained-primary-focus"
+			]
+		} },
+		defaultVariants: { color: "primary" }
+	}
 });
 //#endregion
-export { tag };
+export { tagDefinition };

package/dist/components/text/Typography/Typography.js

@@ -1,16 +1,31 @@
-import { UIStyle } from "../../../config/uiStyle.context.js";
-import { typography } from "./typography.cva.js";
+import { UIOverrides } from "../../../config/uiOverrides.context.js";
+import { typographyDefinition } from "./typography.cva.js";
+import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/text/Typography/Typography.tsx
-var Typography = ({ as = "p", className, ...props }) => {
-	return /* @__PURE__ */ jsx(as, {
-		className: UIStyle.useCva("typography.cva", typography)({
-			...props,
-			sizeMobile: props.sizeMobile ?? props.size,
-			className
-		}),
-		...props
+var Typography = (t0) => {
+	const $ = c(4);
+	const { as: t1, className, ...props } = t0;
+	const as = t1 === void 0 ? "p" : t1;
+	const typographyCva = UIOverrides.useCva("typography.cva", typographyDefinition);
+	const Tag = as;
+	const t2 = typographyCva({
+		...props,
+		sizeMobile: props.sizeMobile ?? props.size,
+		className
 	});
+	let t3;
+	if ($[0] !== Tag || $[1] !== props || $[2] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Tag, {
+			className: t2,
+			...props
+		});
+		$[0] = Tag;
+		$[1] = props;
+		$[2] = t2;
+		$[3] = t3;
+	} else t3 = $[3];
+	return t3;
 };
 //#endregion
 export { Typography };

package/dist/components/text/Typography/typography.cva.d.ts

@@ -1,8 +1,94 @@
-import { VariantProps } from 'class-variance-authority';
-export declare const typography: (props?: ({
-    size?: "headline-1" | "title-1" | "title-2" | "title-3" | "title-4" | "title-5" | "title-6" | "body-1" | "body-2" | "body-3" | "body-4" | "label-1" | "label-2" | "label-3" | null | undefined;
-    sizeMobile?: "headline-1" | "title-1" | "title-2" | "title-3" | "title-4" | "title-5" | "title-6" | "body-1" | "body-2" | "body-3" | "body-4" | "label-1" | "label-2" | "label-3" | null | undefined;
-    variant?: "default" | "prominent-1" | "default-italic" | "prominent-1-italic" | "prominent-2" | "prominent-2-italic" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface TypographyVariantProps extends VariantProps<typeof typography> {
+import { UIOverrides } from '../../../config/uiOverrides.context';
+export declare const typographyDefinition: {
+    base: string[];
+    config: import("../../../utils/style-merge.util").StyleMergeUtils.Config<{
+        readonly size: {
+            readonly "headline-1": "md:text-desktop-headline-1";
+            readonly "title-1": "md:text-desktop-title-1";
+            readonly "title-2": "md:text-desktop-title-2";
+            readonly "title-3": "md:text-desktop-title-3";
+            readonly "title-4": "md:text-desktop-title-4";
+            readonly "title-5": "md:text-desktop-title-5";
+            readonly "title-6": "md:text-desktop-title-6";
+            readonly "body-1": "md:text-desktop-body-1";
+            readonly "body-2": "md:text-desktop-body-2";
+            readonly "body-3": "md:text-desktop-body-3";
+            readonly "body-4": "md:text-desktop-body-4";
+            readonly "label-1": "md:text-label-1";
+            readonly "label-2": "md:text-label-2";
+            readonly "label-3": "md:text-label-3";
+        };
+        readonly sizeMobile: {
+            readonly "headline-1": "text-mobile-headline-1";
+            readonly "title-1": "text-mobile-title-1";
+            readonly "title-2": "text-mobile-title-2";
+            readonly "title-3": "text-mobile-title-3";
+            readonly "title-4": "text-mobile-title-4";
+            readonly "title-5": "text-mobile-title-5";
+            readonly "title-6": "text-mobile-title-6";
+            readonly "body-1": "text-mobile-body-1";
+            readonly "body-2": "text-mobile-body-2";
+            readonly "body-3": "text-mobile-body-3";
+            readonly "body-4": "text-mobile-body-4";
+            readonly "label-1": "text-label-1";
+            readonly "label-2": "text-label-2";
+            readonly "label-3": "text-label-3";
+        };
+        readonly variant: {
+            readonly default: "";
+            readonly "prominent-1": "";
+            readonly "default-italic": "italic";
+            readonly "prominent-1-italic": "italic";
+            readonly "prominent-2": "";
+            readonly "prominent-2-italic": "italic";
+        };
+    }>;
+};
+export declare const typography: {
+    base: string[];
+    config: import("../../../utils/style-merge.util").StyleMergeUtils.Config<{
+        readonly size: {
+            readonly "headline-1": "md:text-desktop-headline-1";
+            readonly "title-1": "md:text-desktop-title-1";
+            readonly "title-2": "md:text-desktop-title-2";
+            readonly "title-3": "md:text-desktop-title-3";
+            readonly "title-4": "md:text-desktop-title-4";
+            readonly "title-5": "md:text-desktop-title-5";
+            readonly "title-6": "md:text-desktop-title-6";
+            readonly "body-1": "md:text-desktop-body-1";
+            readonly "body-2": "md:text-desktop-body-2";
+            readonly "body-3": "md:text-desktop-body-3";
+            readonly "body-4": "md:text-desktop-body-4";
+            readonly "label-1": "md:text-label-1";
+            readonly "label-2": "md:text-label-2";
+            readonly "label-3": "md:text-label-3";
+        };
+        readonly sizeMobile: {
+            readonly "headline-1": "text-mobile-headline-1";
+            readonly "title-1": "text-mobile-title-1";
+            readonly "title-2": "text-mobile-title-2";
+            readonly "title-3": "text-mobile-title-3";
+            readonly "title-4": "text-mobile-title-4";
+            readonly "title-5": "text-mobile-title-5";
+            readonly "title-6": "text-mobile-title-6";
+            readonly "body-1": "text-mobile-body-1";
+            readonly "body-2": "text-mobile-body-2";
+            readonly "body-3": "text-mobile-body-3";
+            readonly "body-4": "text-mobile-body-4";
+            readonly "label-1": "text-label-1";
+            readonly "label-2": "text-label-2";
+            readonly "label-3": "text-label-3";
+        };
+        readonly variant: {
+            readonly default: "";
+            readonly "prominent-1": "";
+            readonly "default-italic": "italic";
+            readonly "prominent-1-italic": "italic";
+            readonly "prominent-2": "";
+            readonly "prominent-2-italic": "italic";
+        };
+    }>;
+};
+export type TypographyConfig = NonNullable<typeof typographyDefinition.config>;
+export interface TypographyVariantProps extends UIOverrides.VariantProps<TypographyConfig> {
 }

package/dist/components/text/Typography/typography.cva.js

@@ -1,126 +1,130 @@
-import { cva } from "class-variance-authority";
+import { UIOverrides } from "../../../config/uiOverrides.context.js";
 //#region src/components/text/Typography/typography.cva.ts
-var typography = cva("", {
-	variants: {
-		size: {
-			"headline-1": "md:text-desktop-headline-1",
-			"title-1": "md:text-desktop-title-1",
-			"title-2": "md:text-desktop-title-2",
-			"title-3": "md:text-desktop-title-3",
-			"title-4": "md:text-desktop-title-4",
-			"title-5": "md:text-desktop-title-5",
-			"title-6": "md:text-desktop-title-6",
-			"body-1": "md:text-desktop-body-1",
-			"body-2": "md:text-desktop-body-2",
-			"body-3": "md:text-desktop-body-3",
-			"body-4": "md:text-desktop-body-4",
-			"label-1": "md:text-label-1",
-			"label-2": "md:text-label-2",
-			"label-3": "md:text-label-3"
+var typographyDefinition = UIOverrides.defineConfig({
+	base: [""],
+	config: {
+		variants: {
+			size: {
+				"headline-1": "md:text-desktop-headline-1",
+				"title-1": "md:text-desktop-title-1",
+				"title-2": "md:text-desktop-title-2",
+				"title-3": "md:text-desktop-title-3",
+				"title-4": "md:text-desktop-title-4",
+				"title-5": "md:text-desktop-title-5",
+				"title-6": "md:text-desktop-title-6",
+				"body-1": "md:text-desktop-body-1",
+				"body-2": "md:text-desktop-body-2",
+				"body-3": "md:text-desktop-body-3",
+				"body-4": "md:text-desktop-body-4",
+				"label-1": "md:text-label-1",
+				"label-2": "md:text-label-2",
+				"label-3": "md:text-label-3"
+			},
+			sizeMobile: {
+				"headline-1": "text-mobile-headline-1",
+				"title-1": "text-mobile-title-1",
+				"title-2": "text-mobile-title-2",
+				"title-3": "text-mobile-title-3",
+				"title-4": "text-mobile-title-4",
+				"title-5": "text-mobile-title-5",
+				"title-6": "text-mobile-title-6",
+				"body-1": "text-mobile-body-1",
+				"body-2": "text-mobile-body-2",
+				"body-3": "text-mobile-body-3",
+				"body-4": "text-mobile-body-4",
+				"label-1": "text-label-1",
+				"label-2": "text-label-2",
+				"label-3": "text-label-3"
+			},
+			variant: {
+				default: "",
+				"prominent-1": "",
+				"default-italic": "italic",
+				"prominent-1-italic": "italic",
+				"prominent-2": "",
+				"prominent-2-italic": "italic"
+			}
 		},
-		sizeMobile: {
-			"headline-1": "text-mobile-headline-1",
-			"title-1": "text-mobile-title-1",
-			"title-2": "text-mobile-title-2",
-			"title-3": "text-mobile-title-3",
-			"title-4": "text-mobile-title-4",
-			"title-5": "text-mobile-title-5",
-			"title-6": "text-mobile-title-6",
-			"body-1": "text-mobile-body-1",
-			"body-2": "text-mobile-body-2",
-			"body-3": "text-mobile-body-3",
-			"body-4": "text-mobile-body-4",
-			"label-1": "text-label-1",
-			"label-2": "text-label-2",
-			"label-3": "text-label-3"
-		},
-		variant: {
-			default: "",
-			"prominent-1": "",
-			"default-italic": "italic",
-			"prominent-1-italic": "italic",
-			"prominent-2": "",
-			"prominent-2-italic": "italic"
-		}
-	},
-	compoundVariants: [
-		{
-			size: [
-				"headline-1",
-				"title-1",
-				"title-2",
-				"title-3",
-				"title-4",
-				"title-5",
-				"title-6"
-			],
-			className: "font-geist"
-		},
-		{
-			size: [
-				"body-1",
-				"body-2",
-				"body-3",
-				"body-4",
-				"label-1",
-				"label-2",
-				"label-3"
-			],
-			className: "font-inter"
-		},
-		{
-			size: [
-				"headline-1",
-				"title-1",
-				"title-2",
-				"title-3",
-				"title-4",
-				"title-5",
-				"title-6",
-				"label-1",
-				"label-2",
-				"label-3"
-			],
-			variant: ["default", "default-italic"],
-			className: "font-medium"
-		},
-		{
-			size: [
-				"headline-1",
-				"title-1",
-				"title-2",
-				"title-3",
-				"title-4",
-				"title-5",
-				"title-6",
-				"label-1",
-				"label-2",
-				"label-3"
-			],
-			variant: ["prominent-1", "prominent-1-italic"],
-			className: "font-semibold"
-		},
-		{
-			size: [
-				"body-1",
-				"body-2",
-				"body-3",
-				"body-4"
-			],
-			variant: ["prominent-1", "prominent-1-italic"],
-			className: "font-medium"
-		},
-		{
-			size: [
-				"body-1",
-				"body-2",
-				"body-3",
-				"body-4"
-			],
-			variant: ["prominent-2", "prominent-2-italic"],
-			className: "font-semibold"
-		}
-	]
+		compoundVariants: [
+			{
+				size: [
+					"headline-1",
+					"title-1",
+					"title-2",
+					"title-3",
+					"title-4",
+					"title-5",
+					"title-6"
+				],
+				className: "font-geist"
+			},
+			{
+				size: [
+					"body-1",
+					"body-2",
+					"body-3",
+					"body-4",
+					"label-1",
+					"label-2",
+					"label-3"
+				],
+				className: "font-inter"
+			},
+			{
+				size: [
+					"headline-1",
+					"title-1",
+					"title-2",
+					"title-3",
+					"title-4",
+					"title-5",
+					"title-6",
+					"label-1",
+					"label-2",
+					"label-3"
+				],
+				variant: ["default", "default-italic"],
+				className: "font-medium"
+			},
+			{
+				size: [
+					"headline-1",
+					"title-1",
+					"title-2",
+					"title-3",
+					"title-4",
+					"title-5",
+					"title-6",
+					"label-1",
+					"label-2",
+					"label-3"
+				],
+				variant: ["prominent-1", "prominent-1-italic"],
+				className: "font-semibold"
+			},
+			{
+				size: [
+					"body-1",
+					"body-2",
+					"body-3",
+					"body-4"
+				],
+				variant: ["prominent-1", "prominent-1-italic"],
+				className: "font-medium"
+			},
+			{
+				size: [
+					"body-1",
+					"body-2",
+					"body-3",
+					"body-4"
+				],
+				variant: ["prominent-2", "prominent-2-italic"],
+				className: "font-semibold"
+			}
+		]
+	}
 });
+var typography = typographyDefinition;
 //#endregion
-export { typography };
+export { typography, typographyDefinition };

package/dist/config/confirmation.context.js

@@ -24,7 +24,7 @@ var Confirmation;
 		const [state, setState] = useState(DEFAULT_STATE);
 		const { t } = useTranslation("ui");
 		const onCancel = () => setState(DEFAULT_STATE);
-		const confirm = useCallback(async ({ heading, description, buttonSize, textAlign, modalClassName, cancelLabel = t(($) => $.ui.confirmation.cancel), confirmLabel = t(($) => $.ui.confirmation.confirm), confirmVariant, confirmColor, cancelVariant, cancelColor }) => {
+		const confirm = useCallback(async ({ heading, description, buttonSize, textAlign, modalClassName, cancelLabel = t(($) => $.ui.confirmation.cancel), confirmLabel = t(($_0) => $_0.ui.confirmation.confirm), confirmVariant, confirmColor, cancelVariant, cancelColor }) => {
 			return new Promise((resolve) => {
 				setState({
 					heading,

package/dist/config/link.context.js

@@ -1,17 +1,31 @@
+import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
-import { createContext, use, useMemo } from "react";
+import { createContext, use } from "react";
 //#region src/config/link.context.tsx
 var LinkContext;
 (function(_LinkContext) {
 	const LinkContextInternal = createContext(null);
-	_LinkContext.LinkContextProvider = ({ children, LinkComponent }) => {
-		const value = useMemo(() => {
-			return { LinkComponent };
-		}, [LinkComponent]);
-		return /* @__PURE__ */ jsx(LinkContextInternal.Provider, {
-			value,
-			children
-		});
+	_LinkContext.LinkContextProvider = (t0) => {
+		const $ = c(5);
+		const { children, LinkComponent } = t0;
+		let t1;
+		if ($[0] !== LinkComponent) {
+			t1 = { LinkComponent };
+			$[0] = LinkComponent;
+			$[1] = t1;
+		} else t1 = $[1];
+		const value = t1;
+		let t2;
+		if ($[2] !== children || $[3] !== value) {
+			t2 = /* @__PURE__ */ jsx(LinkContextInternal.Provider, {
+				value,
+				children
+			});
+			$[2] = children;
+			$[3] = value;
+			$[4] = t2;
+		} else t2 = $[4];
+		return t2;
 	};
 	_LinkContext.useLinkContext = () => {
 		return use(LinkContextInternal);

package/dist/config/router.context.js

@@ -1,31 +1,57 @@
+import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
-import { createContext, use, useMemo } from "react";
+import { createContext, use } from "react";
 import { RouterProvider } from "react-aria";
 //#region src/config/router.context.tsx
 var UIRouter;
 (function(_UIRouter) {
 	const UIRouterContext = createContext(null);
-	_UIRouter.UIRouterProvider = ({ children, push, replace, searchString }) => {
-		const searchParams = useMemo(() => {
-			return new URLSearchParams(searchString);
-		}, [searchString]);
-		return /* @__PURE__ */ jsx(UIRouterContext, {
-			value: useMemo(() => ({
+	_UIRouter.UIRouterProvider = (t0) => {
+		const $ = c(13);
+		const { children, push, replace, searchString } = t0;
+		let t1;
+		if ($[0] !== searchString) {
+			t1 = new URLSearchParams(searchString);
+			$[0] = searchString;
+			$[1] = t1;
+		} else t1 = $[1];
+		const searchParams = t1;
+		let t2;
+		if ($[2] !== push || $[3] !== replace || $[4] !== searchParams || $[5] !== searchString) {
+			t2 = {
 				searchParams,
 				push,
 				searchString,
 				replace
-			}), [
-				searchParams,
-				push,
-				searchString,
-				replace
-			]),
-			children: /* @__PURE__ */ jsx(RouterProvider, {
+			};
+			$[2] = push;
+			$[3] = replace;
+			$[4] = searchParams;
+			$[5] = searchString;
+			$[6] = t2;
+		} else t2 = $[6];
+		const value = t2;
+		let t3;
+		if ($[7] !== children || $[8] !== push) {
+			t3 = /* @__PURE__ */ jsx(RouterProvider, {
 				navigate: push,
 				children
-			})
-		});
+			});
+			$[7] = children;
+			$[8] = push;
+			$[9] = t3;
+		} else t3 = $[9];
+		let t4;
+		if ($[10] !== t3 || $[11] !== value) {
+			t4 = /* @__PURE__ */ jsx(UIRouterContext, {
+				value,
+				children: t3
+			});
+			$[10] = t3;
+			$[11] = value;
+			$[12] = t4;
+		} else t4 = $[12];
+		return t4;
 	};
 	_UIRouter.useUIRouter = () => {
 		const context = use(UIRouterContext);