@povio/ui 2.3.3 → 3.0.0

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

@@ -1,9 +1,9 @@
 import { CloseIcon } from "../../../assets/icons/Close.js";
-import { UIStyle } from "../../../config/uiStyle.context.js";
+import { UIOverrides } from "../../../config/uiOverrides.context.js";
 import { Typography } from "../Typography/Typography.js";
 import { UIConfig } from "../../../config/uiConfig.context.js";
 import "../../../config/i18n.js";
-import { tag } from "./tag.cva.js";
+import { tagDefinition } from "./tag.cva.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { Button } from "react-aria-components";
@@ -12,7 +12,7 @@ import { useTranslation } from "react-i18next";
 var Tag = ({ className, children, dismissable, isDisabled, onDismiss, contentRef, ...props }) => {
 	const uiConfig = UIConfig.useConfig();
 	const { textVariant = uiConfig.tag.textVariant, textSize = uiConfig.tag.textSize } = props;
-	const tagCva = UIStyle.useCva("tag.cva", tag);
+	const tagCva = UIOverrides.useCva("tag.cva", tagDefinition);
 	const { t } = useTranslation("ui");
 	const buttonProps = {
 		isDisabled,

package/dist/components/text/Tag/tag.cva.d.ts

@@ -1,6 +1,16 @@
-import { VariantProps } from 'class-variance-authority';
-export declare const tag: (props?: ({
-    color?: "primary" | "secondary" | "success" | "warning" | "error" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface TagVariantProps extends VariantProps<typeof tag> {
+import { UIOverrides } from '../../../config/uiOverrides.context';
+export declare const tagDefinition: {
+    base: string[];
+    config: import("../../../utils/style-merge.util").StyleMergeUtils.Config<{
+        readonly color: {
+            readonly 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"];
+            readonly 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"];
+            readonly 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"];
+            readonly 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"];
+            readonly 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"];
+        };
+    }>;
+};
+export type TagConfig = NonNullable<typeof tagDefinition.config>;
+export interface TagVariantProps extends UIOverrides.VariantProps<TagConfig> {
 }

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,10 +1,10 @@
-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 { 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)({
+		className: UIOverrides.useCva("typography.cva", typographyDefinition)({
 			...props,
 			sizeMobile: props.sizeMobile ?? props.size,
 			className

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

@@ -1,8 +1,49 @@
-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 type TypographyConfig = NonNullable<typeof typographyDefinition.config>;
+export interface TypographyVariantProps extends UIOverrides.VariantProps<TypographyConfig> {
 }

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

@@ -1,126 +1,129 @@
-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"
+			}
+		]
+	}
 });
 //#endregion
-export { typography };
+export { typographyDefinition };