@povio/ui 2.3.3 → 3.0.0

package/dist/components/Breadcrumbs/Breadcrumbs.js

@@ -1,6 +1,6 @@
 import { ChevronRightIcon } from "../../assets/icons/ChevronRight.js";
-import { breadcrumbChevron, breadcrumbIcon, breadcrumbItem, breadcrumbSegment, breadcrumbsCva } from "./breadcrumbs.cva.js";
-import { UIStyle } from "../../config/uiStyle.context.js";
+import { UIOverrides } from "../../config/uiOverrides.context.js";
+import { breadcrumbChevronDefinition, breadcrumbIconDefinition, breadcrumbItemDefinition, breadcrumbSegmentDefinition, breadcrumbsDefinition } from "./breadcrumbs.cva.js";
 import { MenuDesktop } from "../Menu/MenuDesktop.js";
 import { Typography } from "../text/Typography/Typography.js";
 import { Tooltip as Tooltip$1 } from "../overlays/Tooltip/Tooltip.js";
@@ -11,11 +11,11 @@ import { useLayoutEffect, useRef, useState } from "react";
 import { Breadcrumb, Breadcrumbs, Button, Link } from "react-aria-components";
 //#region src/components/Breadcrumbs/Breadcrumbs.tsx
 var Breadcrumbs$1 = ({ items, className, onAction, iconOnly = false }) => {
-	const breadcrumbsCva$1 = UIStyle.useCva("breadcrumbs.cva", breadcrumbsCva);
-	const breadcrumbItem$1 = UIStyle.useCva("breadcrumbs.itemCva", breadcrumbItem);
-	const breadcrumbSegmentCva = UIStyle.useCva("breadcrumbs.segmentCva", breadcrumbSegment);
-	const breadcrumbChevronCva = UIStyle.useCva("breadcrumbs.chevronCva", breadcrumbChevron);
-	const breadcrumbIconCva = UIStyle.useCva("breadcrumbs.iconCva", breadcrumbIcon);
+	const breadcrumbsCva = UIOverrides.useCva("breadcrumbs.cva", breadcrumbsDefinition);
+	const breadcrumbItem = UIOverrides.useCva("breadcrumbs.itemCva", breadcrumbItemDefinition);
+	const breadcrumbSegmentCva = UIOverrides.useCva("breadcrumbs.segmentCva", breadcrumbSegmentDefinition);
+	const breadcrumbChevronCva = UIOverrides.useCva("breadcrumbs.chevronCva", breadcrumbChevronDefinition);
+	const breadcrumbIconCva = UIOverrides.useCva("breadcrumbs.iconCva", breadcrumbIconDefinition);
 	const containerRef = useRef(null);
 	const [isOverflowing, setIsOverflowing] = useState(items.length <= 2 ? false : null);
 	useLayoutEffect(() => {
@@ -38,7 +38,7 @@ var Breadcrumbs$1 = ({ items, className, onAction, iconOnly = false }) => {
 	const LinkComponent = LinkContext.useLinkContext()?.LinkComponent ?? Link;
 	const renderBreadcrumbLink = (item, isCurrent, iconOnly) => /* @__PURE__ */ jsxs(LinkComponent, {
 		...item.link,
-		className: breadcrumbItem$1({ isCurrent }),
+		className: breadcrumbItem({ isCurrent }),
 		children: [item.icon && /* @__PURE__ */ jsx(item.icon, {
 			className: breadcrumbIconCva({}),
 			"aria-label": item.label
@@ -59,7 +59,7 @@ var Breadcrumbs$1 = ({ items, className, onAction, iconOnly = false }) => {
 				text: hiddenItems.map((i) => i.label).join(", "),
 				children: /* @__PURE__ */ jsx(Button, {
 					"aria-label": "Show hidden breadcrumbs",
-					className: breadcrumbItem$1({
+					className: breadcrumbItem({
 						isCurrent: false,
 						isEllipsis: true
 					}),
@@ -75,7 +75,7 @@ var Breadcrumbs$1 = ({ items, className, onAction, iconOnly = false }) => {
 		});
 		return /* @__PURE__ */ jsxs(Breadcrumbs, {
 			onAction,
-			className: clsx(breadcrumbsCva$1({}), className),
+			className: clsx(breadcrumbsCva({}), className),
 			children: [
 				/* @__PURE__ */ jsxs(Breadcrumb, {
 					id: firstItem.id,
@@ -99,7 +99,7 @@ var Breadcrumbs$1 = ({ items, className, onAction, iconOnly = false }) => {
 		ref: containerRef,
 		items,
 		onAction,
-		className: clsx(breadcrumbsCva$1({}), className),
+		className: clsx(breadcrumbsCva({}), className),
 		style: { visibility: isReady ? "visible" : "hidden" },
 		children: (item) => /* @__PURE__ */ jsx(Breadcrumb, {
 			id: item.id,

package/dist/components/Breadcrumbs/breadcrumbs.cva.d.ts

@@ -1,19 +1,45 @@
-import { VariantProps } from 'class-variance-authority';
-export declare const breadcrumbsCva: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
-export interface BreadcrumbsVariantProps extends VariantProps<typeof breadcrumbsCva> {
+import { UIOverrides } from '../../config/uiOverrides.context';
+export declare const breadcrumbsDefinition: {
+    base: string[];
+    config?: import("../../utils/style-merge.util").StyleMergeUtils.Config<Record<never, never>>;
+};
+export type BreadcrumbsConfig = NonNullable<typeof breadcrumbsDefinition.config>;
+export interface BreadcrumbsVariantProps extends UIOverrides.VariantProps<BreadcrumbsConfig> {
 }
-export declare const breadcrumbSegment: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
-export interface BreadcrumbSegmentVariantProps extends VariantProps<typeof breadcrumbSegment> {
+export declare const breadcrumbSegmentDefinition: {
+    base: string[];
+    config?: import("../../utils/style-merge.util").StyleMergeUtils.Config<Record<never, never>>;
+};
+export type BreadcrumbSegmentConfig = NonNullable<typeof breadcrumbSegmentDefinition.config>;
+export interface BreadcrumbSegmentVariantProps extends UIOverrides.VariantProps<BreadcrumbSegmentConfig> {
 }
-export declare const breadcrumbChevron: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
-export interface BreadcrumbChevronVariantProps extends VariantProps<typeof breadcrumbChevron> {
+export declare const breadcrumbChevronDefinition: {
+    base: string[];
+    config?: import("../../utils/style-merge.util").StyleMergeUtils.Config<Record<never, never>>;
+};
+export type BreadcrumbChevronConfig = NonNullable<typeof breadcrumbChevronDefinition.config>;
+export interface BreadcrumbChevronVariantProps extends UIOverrides.VariantProps<BreadcrumbChevronConfig> {
 }
-export declare const breadcrumbIcon: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
-export interface BreadcrumbIconVariantProps extends VariantProps<typeof breadcrumbIcon> {
+export declare const breadcrumbIconDefinition: {
+    base: string[];
+    config?: import("../../utils/style-merge.util").StyleMergeUtils.Config<Record<never, never>>;
+};
+export type BreadcrumbIconConfig = NonNullable<typeof breadcrumbIconDefinition.config>;
+export interface BreadcrumbIconVariantProps extends UIOverrides.VariantProps<BreadcrumbIconConfig> {
 }
-export declare const breadcrumbItem: (props?: ({
-    isCurrent?: boolean | null | undefined;
-    isEllipsis?: boolean | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface BreadcrumbItemVariantProps extends VariantProps<typeof breadcrumbItem> {
+export declare const breadcrumbItemDefinition: {
+    base: string[];
+    config: import("../../utils/style-merge.util").StyleMergeUtils.Config<{
+        readonly isCurrent: {
+            readonly true: "text-interactive-text-primary-idle";
+            readonly false: "text-interactive-text-secondary-idle hover:text-interactive-text-secondary-hover";
+        };
+        readonly isEllipsis: {
+            readonly true: "hover:text-interactive-text-primary-hover!";
+            readonly false: "";
+        };
+    }>;
+};
+export type BreadcrumbItemConfig = NonNullable<typeof breadcrumbItemDefinition.config>;
+export interface BreadcrumbItemVariantProps extends UIOverrides.VariantProps<BreadcrumbItemConfig> {
 }

package/dist/components/Breadcrumbs/breadcrumbs.cva.js

@@ -1,24 +1,27 @@
-import { cva } from "class-variance-authority";
+import { UIOverrides } from "../../config/uiOverrides.context.js";
 //#region src/components/Breadcrumbs/breadcrumbs.cva.ts
-var breadcrumbsCva = cva(["flex items-center gap-breadcrumbs-gap-segment-to-segment"]);
-var breadcrumbSegment = cva(["flex items-center gap-breadcrumbs-gap-segment-to-segment"]);
-var breadcrumbChevron = cva(["size-6 shrink-0 text-interactive-text-secondary-idle"]);
-var breadcrumbIcon = cva(["size-4 shrink-0"]);
-var breadcrumbItem = cva(["inline-flex cursor-pointer items-center gap-breadcrumbs-gap-icon-to-text whitespace-nowrap font-inter font-medium text-label-3 no-underline"], {
-	variants: {
-		isCurrent: {
-			true: "text-interactive-text-primary-idle",
-			false: "text-interactive-text-secondary-idle hover:text-interactive-text-secondary-hover"
+var breadcrumbsDefinition = UIOverrides.defineConfig({ base: ["flex items-center gap-breadcrumbs-gap-segment-to-segment"] });
+var breadcrumbSegmentDefinition = UIOverrides.defineConfig({ base: ["flex items-center gap-breadcrumbs-gap-segment-to-segment"] });
+var breadcrumbChevronDefinition = UIOverrides.defineConfig({ base: ["size-6 shrink-0 text-interactive-text-secondary-idle"] });
+var breadcrumbIconDefinition = UIOverrides.defineConfig({ base: ["size-4 shrink-0"] });
+var breadcrumbItemDefinition = UIOverrides.defineConfig({
+	base: ["inline-flex cursor-pointer items-center gap-breadcrumbs-gap-icon-to-text whitespace-nowrap font-inter font-medium text-label-3 no-underline"],
+	config: {
+		variants: {
+			isCurrent: {
+				true: "text-interactive-text-primary-idle",
+				false: "text-interactive-text-secondary-idle hover:text-interactive-text-secondary-hover"
+			},
+			isEllipsis: {
+				true: "hover:text-interactive-text-primary-hover!",
+				false: ""
+			}
 		},
-		isEllipsis: {
-			true: "hover:text-interactive-text-primary-hover!",
-			false: ""
+		defaultVariants: {
+			isCurrent: false,
+			isEllipsis: false
 		}
-	},
-	defaultVariants: {
-		isCurrent: false,
-		isEllipsis: false
 	}
 });
 //#endregion
-export { breadcrumbChevron, breadcrumbIcon, breadcrumbItem, breadcrumbSegment, breadcrumbsCva };
+export { breadcrumbChevronDefinition, breadcrumbIconDefinition, breadcrumbItemDefinition, breadcrumbSegmentDefinition, breadcrumbsDefinition };

package/dist/components/Menu/MenuItem.js

@@ -1,18 +1,18 @@
 import { ArrowRightIcon } from "../../assets/icons/ArrowRight.js";
-import { menuItemCva } from "./menu.cva.js";
-import { UIStyle } from "../../config/uiStyle.context.js";
+import { UIOverrides } from "../../config/uiOverrides.context.js";
+import { menuItemDefinition } from "./menu.cva.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { MenuItem } from "react-aria-components";
 //#region src/components/Menu/MenuItem.tsx
 var MenuItem$1 = ({ label, content, children, className, ...item }) => {
 	const hasSubmenu = !!children && children?.length > 0;
-	const menuItemCva$1 = UIStyle.useCva("menu.itemCva", menuItemCva);
+	const menuItemCva = UIOverrides.useCva("menu.itemCva", menuItemDefinition);
 	return /* @__PURE__ */ jsxs(MenuItem, {
 		...item,
 		textValue: label,
 		"aria-label": label,
-		className: clsx(menuItemCva$1({
+		className: clsx(menuItemCva({
 			...item,
 			isMobile: false
 		}), className),

package/dist/components/Menu/MenuMobile.js

@@ -1,6 +1,6 @@
 import { ArrowLeftIcon } from "../../assets/icons/ArrowLeft.js";
-import { menuCva, menuItemCva } from "./menu.cva.js";
-import { UIStyle } from "../../config/uiStyle.context.js";
+import { UIOverrides } from "../../config/uiOverrides.context.js";
+import { menuDefinition, menuItemDefinition } from "./menu.cva.js";
 import { MenuItem as MenuItem$1 } from "./MenuItem.js";
 import { BottomSheet } from "../overlays/BottomSheet/BottomSheet.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -9,8 +9,8 @@ import { useRef, useState } from "react";
 import { Button, Menu } from "react-aria-components";
 //#region src/components/Menu/MenuMobile.tsx
 var MenuMobile = ({ trigger, items, onAction, ...props }) => {
-	const menuItemCva$1 = UIStyle.useCva("menu.itemCva", menuItemCva);
-	const menuCva$1 = UIStyle.useCva("menu.cva", menuCva);
+	const menuItemCva = UIOverrides.useCva("menu.itemCva", menuItemDefinition);
+	const menuCva = UIOverrides.useCva("menu.cva", menuDefinition);
 	const activeItemRef = useRef(null);
 	const activeItemParentsRef = useRef([]);
 	const lastEventRef = useRef(null);
@@ -46,7 +46,7 @@ var MenuMobile = ({ trigger, items, onAction, ...props }) => {
 		isDismissable: true,
 		hideHeader: true,
 		children: () => /* @__PURE__ */ jsxs(Fragment, { children: [activeItem && /* @__PURE__ */ jsxs(Button, {
-			className: clsx(menuItemCva$1({
+			className: clsx(menuItemCva({
 				...props,
 				isMobile: true
 			})),
@@ -62,7 +62,7 @@ var MenuMobile = ({ trigger, items, onAction, ...props }) => {
 			children: /* @__PURE__ */ jsx(Menu, {
 				autoFocus: true,
 				onClose,
-				className: menuCva$1({
+				className: menuCva({
 					...props,
 					isMobile: true
 				}),

package/dist/components/Menu/MenuPopover.js

@@ -1,5 +1,5 @@
-import { menuCva, menuPopoverCva, menuPopoverWrapperCva } from "./menu.cva.js";
-import { UIStyle } from "../../config/uiStyle.context.js";
+import { UIOverrides } from "../../config/uiOverrides.context.js";
+import { menuDefinition, menuPopoverDefinition, menuPopoverWrapperDefinition } from "./menu.cva.js";
 import { MenuItem as MenuItem$1 } from "./MenuItem.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useRef } from "react";
@@ -7,17 +7,17 @@ import { Menu, Popover, SubmenuTrigger } from "react-aria-components";
 //#region src/components/Menu/MenuPopover.tsx
 var MenuPopover = ({ items, className, onAction, ...props }) => {
 	const lastEventRef = useRef(null);
-	const menuPopoverCva$1 = UIStyle.useCva("menu.popoverCva", menuPopoverCva);
-	const menuPopoverWrapperCva$1 = UIStyle.useCva("menu.popoverWrapperCva", menuPopoverWrapperCva);
-	const menuCva$1 = UIStyle.useCva("menu.cva", menuCva);
+	const menuPopoverCva = UIOverrides.useCva("menu.popoverCva", menuPopoverDefinition);
+	const menuPopoverWrapperCva = UIOverrides.useCva("menu.popoverWrapperCva", menuPopoverWrapperDefinition);
+	const menuCva = UIOverrides.useCva("menu.cva", menuDefinition);
 	return /* @__PURE__ */ jsx(Popover, {
 		...props,
-		className: menuPopoverCva$1({
+		className: menuPopoverCva({
 			...props,
 			className
 		}),
 		children: /* @__PURE__ */ jsx("div", {
-			className: menuPopoverWrapperCva$1({}),
+			className: menuPopoverWrapperCva({}),
 			children: /* @__PURE__ */ jsx("div", {
 				onClickCapture: (e) => {
 					lastEventRef.current = e;
@@ -27,7 +27,7 @@ var MenuPopover = ({ items, className, onAction, ...props }) => {
 				},
 				children: /* @__PURE__ */ jsx(Menu, {
 					onAction: (key) => onAction?.(key, lastEventRef.current),
-					className: menuCva$1({
+					className: menuCva({
 						...props,
 						isMobile: false
 					}),

package/dist/components/Menu/menu.cva.d.ts

@@ -1,17 +1,39 @@
-import { VariantProps } from 'class-variance-authority';
-export declare const menuCva: (props?: ({
-    isMobile?: boolean | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface MenuCvaVariantProps extends VariantProps<typeof menuCva> {
+import { UIOverrides } from '../../config/uiOverrides.context';
+export declare const menuDefinition: {
+    base: string[];
+    config: import("../../utils/style-merge.util").StyleMergeUtils.Config<{
+        readonly isMobile: {
+            readonly true: [];
+            readonly false: [];
+        };
+    }>;
+};
+export type MenuConfig = NonNullable<typeof menuDefinition.config>;
+export interface MenuCvaVariantProps extends UIOverrides.VariantProps<MenuConfig> {
 }
-export declare const menuItemCva: (props?: ({
-    isMobile?: boolean | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface MenuItemVariantProps extends VariantProps<typeof menuItemCva> {
+export declare const menuItemDefinition: {
+    base: string[];
+    config: import("../../utils/style-merge.util").StyleMergeUtils.Config<{
+        readonly isMobile: {
+            readonly true: ["justify-start! w-full font-labels-default"];
+            readonly false: [];
+        };
+    }>;
+};
+export type MenuItemConfig = NonNullable<typeof menuItemDefinition.config>;
+export interface MenuItemVariantProps extends UIOverrides.VariantProps<MenuItemConfig> {
 }
-export declare const menuPopoverCva: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
-export interface MenuPopoverVariantProps extends VariantProps<typeof menuPopoverCva> {
+export declare const menuPopoverDefinition: {
+    base: string[];
+    config?: import("../../utils/style-merge.util").StyleMergeUtils.Config<Record<never, never>>;
+};
+export type MenuPopoverConfig = NonNullable<typeof menuPopoverDefinition.config>;
+export interface MenuPopoverVariantProps extends UIOverrides.VariantProps<MenuPopoverConfig> {
 }
-export declare const menuPopoverWrapperCva: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
-export interface MenuPopoverWrapperVariantProps extends VariantProps<typeof menuPopoverWrapperCva> {
+export declare const menuPopoverWrapperDefinition: {
+    base: string[];
+    config?: import("../../utils/style-merge.util").StyleMergeUtils.Config<Record<never, never>>;
+};
+export type MenuPopoverWrapperConfig = NonNullable<typeof menuPopoverWrapperDefinition.config>;
+export interface MenuPopoverWrapperVariantProps extends UIOverrides.VariantProps<MenuPopoverWrapperConfig> {
 }

package/dist/components/Menu/menu.cva.js

@@ -1,28 +1,34 @@
-import { cva } from "class-variance-authority";
+import { UIOverrides } from "../../config/uiOverrides.context.js";
 //#region src/components/Menu/menu.cva.ts
-var menuCva = cva(["outline-none"], {
-	variants: { isMobile: {
-		true: [],
-		false: []
-	} },
-	defaultVariants: { isMobile: false }
+var menuDefinition = UIOverrides.defineConfig({
+	base: ["outline-none"],
+	config: {
+		variants: { isMobile: {
+			true: [],
+			false: []
+		} },
+		defaultVariants: { isMobile: false }
+	}
 });
-var menuItemCva = cva([
-	"flex cursor-pointer items-center justify-between gap-list-gap-checkbox-to-label px-list-side-item-left py-list-height-item has-submenu:pr-list-side-item-right",
-	"border-b border-b-elevation-outline-default-1 outline-none last:border-b-0",
-	"bg-elevation-fill-default-1 text-interactive-text-secondary-idle",
-	"disabled:cursor-default disabled:text-interactive-text-secondary-disabled",
-	"hover:bg-elevation-fill-default-2 hover:text-interactive-text-secondary-hover",
-	"open:cursor-default open:bg-interactive-contained-primary-idle! open:text-interactive-contained-primary-on-idle!",
-	"focus-visible:bg-elevation-fill-default-2 focus-visible:text-interactive-text-secondary-hover"
-], {
-	variants: { isMobile: {
-		true: ["justify-start! w-full font-labels-default"],
-		false: []
-	} },
-	defaultVariants: { isMobile: false }
+var menuItemDefinition = UIOverrides.defineConfig({
+	base: [
+		"flex cursor-pointer items-center justify-between gap-list-gap-checkbox-to-label px-list-side-item-left py-list-height-item has-submenu:pr-list-side-item-right",
+		"border-b border-b-elevation-outline-default-1 outline-none last:border-b-0",
+		"bg-elevation-fill-default-1 text-interactive-text-secondary-idle",
+		"disabled:cursor-default disabled:text-interactive-text-secondary-disabled",
+		"hover:bg-elevation-fill-default-2 hover:text-interactive-text-secondary-hover",
+		"open:cursor-default open:bg-interactive-contained-primary-idle! open:text-interactive-contained-primary-on-idle!",
+		"focus-visible:bg-elevation-fill-default-2 focus-visible:text-interactive-text-secondary-hover"
+	],
+	config: {
+		variants: { isMobile: {
+			true: ["justify-start! w-full font-labels-default"],
+			false: []
+		} },
+		defaultVariants: { isMobile: false }
+	}
 });
-var menuPopoverCva = cva(["pt-2 outline-none"]);
-var menuPopoverWrapperCva = cva(["overflow-hidden rounded-list-rounding-dropdown border border-elevation-outline-default-1 shadow-5 outline-none"]);
+var menuPopoverDefinition = UIOverrides.defineConfig({ base: ["pt-2 outline-none"] });
+var menuPopoverWrapperDefinition = UIOverrides.defineConfig({ base: ["overflow-hidden rounded-list-rounding-dropdown border border-elevation-outline-default-1 shadow-5 outline-none"] });
 //#endregion
-export { menuCva, menuItemCva, menuPopoverCva, menuPopoverWrapperCva };
+export { menuDefinition, menuItemDefinition, menuPopoverDefinition, menuPopoverWrapperDefinition };

package/dist/components/buttons/Button/Button.js

@@ -1,8 +1,8 @@
-import { UIStyle } from "../../../config/uiStyle.context.js";
+import { UIOverrides } from "../../../config/uiOverrides.context.js";
 import { LinkContext } from "../../../config/link.context.js";
 import { ButtonContent } from "../shared/ButtonContent.js";
 import { UIConfig } from "../../../config/uiConfig.context.js";
-import { button, buttonContent, buttonIconSize, buttonSize, buttonTypography } from "./button.cva.js";
+import { buttonContentDefinition, buttonDefinition, buttonIconSizeDefinition, buttonSizeDefinition, buttonTypography } from "./button.cva.js";
 import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { Button, Link, ToggleButton } from "react-aria-components";
@@ -11,11 +11,11 @@ var Button$1 = ({ icon: Icon, iconPosition, children, isLoading, className, link
 	const linkContext = LinkContext.useLinkContext();
 	const uiConfig = UIConfig.useConfig();
 	const { variant = uiConfig.button.variant, size = uiConfig.button.size } = props;
-	const buttonCva = UIStyle.useCva("button.cva", button);
-	const buttonSizeCva = UIStyle.useCva("button.sizeCva", buttonSize);
-	const buttonContentCva = UIStyle.useCva("button.contentCva", buttonContent);
-	const buttonIconSizeCva = UIStyle.useCva("button.iconSize", buttonIconSize);
-	const typographyMap = UIStyle.useMapper("button.typography", buttonTypography);
+	const buttonCva = UIOverrides.useCva("button.cva", buttonDefinition);
+	const buttonSizeCva = UIOverrides.useCva("button.sizeCva", buttonSizeDefinition);
+	const buttonContentCva = UIOverrides.useCva("button.contentCva", buttonContentDefinition);
+	const buttonIconSizeCva = UIOverrides.useCva("button.iconSize", buttonIconSizeDefinition);
+	const typographyMap = UIOverrides.useMapper("button.typography", buttonTypography);
 	const Component = (() => {
 		if (link) return linkContext?.LinkComponent ?? Link;
 		if (props.toggle != null) return ToggleButton;

package/dist/components/buttons/Button/button.cva.d.ts

@@ -1,30 +1,99 @@
-import { VariantProps } from 'class-variance-authority';
+import { UIOverrides } from '../../../config/uiOverrides.context';
 import { TypographyVariantProps } from '../../text/Typography/typography.cva';
-export declare const button: (props?: ({
-    width?: "fill" | "hug" | null | undefined;
-    size?: "none" | "xs" | "s" | "m" | "l" | null | undefined;
-    color?: "primary" | "secondary" | "success" | "warning" | "error" | "dual" | null | undefined;
-    variant?: "contained" | "outlined" | "subtle" | "text" | "ghost" | null | undefined;
-    inverted?: boolean | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface ButtonVariantProps extends VariantProps<typeof button> {
+export declare const buttonDefinition: {
+    base: string[];
+    config: import("../../../utils/style-merge.util").StyleMergeUtils.Config<{
+        readonly width: {
+            readonly fill: "w-full";
+            readonly hug: "w-auto";
+        };
+        readonly size: {
+            readonly none: "";
+            readonly xs: "";
+            readonly s: "";
+            readonly m: "";
+            readonly l: "";
+        };
+        readonly color: {
+            readonly primary: "";
+            readonly secondary: "";
+            readonly success: "";
+            readonly warning: "";
+            readonly error: "";
+            readonly dual: "";
+        };
+        readonly variant: {
+            readonly contained: "";
+            readonly outlined: "";
+            readonly subtle: "";
+            readonly text: "group-data-[split]/split:data-[separator]:after:hidden";
+            readonly ghost: "";
+        };
+        readonly inverted: {
+            readonly true: "";
+            readonly false: "";
+        };
+    }>;
+};
+export type ButtonConfig = NonNullable<typeof buttonDefinition.config>;
+export interface ButtonVariantProps extends UIOverrides.VariantProps<ButtonConfig> {
 }
-export declare const buttonSize: (props?: ({
-    size?: "none" | "xs" | "s" | "m" | "l" | null | undefined;
-    iconOnly?: boolean | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export declare const buttonContent: (props?: ({
-    size?: "none" | "xs" | "s" | "m" | "l" | null | undefined;
-    iconPosition?: "none" | "left" | "right" | null | undefined;
-    iconOnly?: boolean | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export declare const buttonIconSize: (props?: ({
-    size?: "none" | "xs" | "s" | "m" | "l" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const buttonSizeDefinition: {
+    base: string[];
+    config: import("../../../utils/style-merge.util").StyleMergeUtils.Config<{
+        readonly size: {
+            readonly none: "rounded-button-rounding-s p-0";
+            readonly xs: "rounded-button-rounding-s";
+            readonly s: "rounded-button-rounding-s";
+            readonly m: "rounded-button-rounding-m";
+            readonly l: "rounded-button-rounding-l";
+        };
+        readonly iconOnly: {
+            readonly true: "";
+            readonly false: "";
+        };
+    }>;
+};
+export type ButtonSizeConfig = NonNullable<typeof buttonSizeDefinition.config>;
+export declare const buttonContentDefinition: {
+    base: string[];
+    config: import("../../../utils/style-merge.util").StyleMergeUtils.Config<{
+        readonly size: {
+            readonly none: "gap-button-gap-icon-to-label";
+            readonly xs: "gap-button-gap-icon-to-label";
+            readonly s: "gap-button-gap-icon-to-label";
+            readonly m: "gap-button-gap-icon-to-label";
+            readonly l: "gap-button-gap-icon-to-label";
+        };
+        readonly iconPosition: {
+            readonly left: "";
+            readonly right: "";
+            readonly none: "";
+        };
+        readonly iconOnly: {
+            readonly true: "";
+            readonly false: "";
+        };
+    }>;
+};
+export type ButtonContentConfig = NonNullable<typeof buttonContentDefinition.config>;
+export declare const buttonIconSizeDefinition: {
+    base: string[];
+    config: import("../../../utils/style-merge.util").StyleMergeUtils.Config<{
+        readonly size: {
+            readonly none: "h-6 w-6";
+            readonly xs: "h-6 w-6";
+            readonly s: "h-6 w-6";
+            readonly m: "h-6 w-6";
+            readonly l: "h-6 w-6";
+        };
+    }>;
+};
+export type ButtonIconSizeConfig = NonNullable<typeof buttonIconSizeDefinition.config>;
 export declare const buttonTypography: (props: {
-    color?: "primary" | "secondary" | "success" | "warning" | "error" | "dual" | null | undefined;
-    width?: "fill" | "hug" | null | undefined;
-    size?: "none" | "xs" | "s" | "m" | "l" | null | undefined;
-    variant?: "contained" | "outlined" | "subtle" | "text" | "ghost" | null | undefined;
-    inverted?: boolean | null | undefined;
+    readonly width?: "fill" | "hug" | null | undefined;
+    readonly size?: "none" | "xs" | "s" | "m" | "l" | null | undefined;
+    readonly color?: "primary" | "dual" | "secondary" | "success" | "warning" | "error" | null | undefined;
+    readonly variant?: "contained" | "outlined" | "subtle" | "ghost" | "text" | null | undefined;
+    readonly inverted?: boolean | null | undefined;
 }) => TypographyVariantProps | undefined;