@povio/ui 2.3.2 → 3.0.0

package/dist/utils/style-merge.util.js

@@ -0,0 +1,233 @@
+import { clsx } from "clsx";
+//#region src/utils/style-merge.util.ts
+var StyleMergeUtils;
+(function(_StyleMergeUtils) {
+	const CLASS_NAME_KEY = "className";
+	const CLASS_KEY = "class";
+	const CLASS_KEYS = new Set([CLASS_KEY, CLASS_NAME_KEY]);
+	const isClassKey = (key) => {
+		return CLASS_KEYS.has(key);
+	};
+	const getSelectorEntries = (entry) => {
+		const selectors = [];
+		for (const [key, value] of Object.entries(entry)) {
+			if (isClassKey(key)) continue;
+			selectors.push([key, value]);
+		}
+		return selectors;
+	};
+	const normalizeToArray = (value) => {
+		if (Array.isArray(value)) return value;
+		return [value];
+	};
+	const isSubsetValues = (subset, superset) => {
+		const subsetValues = normalizeToArray(subset).map((item) => String(item));
+		const supersetSet = new Set(normalizeToArray(superset).map((item) => String(item)));
+		for (const value of subsetValues) if (!supersetSet.has(value)) return false;
+		return true;
+	};
+	const canOverrideCompoundEntry = (baseEntry, overrideEntry) => {
+		const baseSelectors = getSelectorEntries(baseEntry);
+		const overrideSelectors = getSelectorEntries(overrideEntry);
+		if (baseSelectors.length !== overrideSelectors.length) return false;
+		const baseSelectorMap = new Map(baseSelectors);
+		for (const [overrideKey, overrideValue] of overrideSelectors) {
+			if (!baseSelectorMap.has(overrideKey)) return false;
+			if (!isSubsetValues(overrideValue, baseSelectorMap.get(overrideKey))) return false;
+		}
+		return true;
+	};
+	const splitCompoundEntryByOverride = (baseEntry, overrideEntry) => {
+		const baseWithoutClass = {};
+		for (const [key, value] of Object.entries(baseEntry)) {
+			if (isClassKey(key)) continue;
+			baseWithoutClass[key] = value;
+		}
+		let hasSplit = false;
+		for (const [key, overrideValue] of getSelectorEntries(overrideEntry)) {
+			const baseValue = baseWithoutClass[key];
+			if (!Array.isArray(baseValue)) continue;
+			const baseValues = [...baseValue];
+			const overrideValues = new Set(normalizeToArray(overrideValue).map((item) => String(item)));
+			const remainingValues = baseValues.filter((item) => !overrideValues.has(String(item)));
+			if (remainingValues.length === baseValues.length) continue;
+			hasSplit = true;
+			if (remainingValues.length === 1) baseWithoutClass[key] = remainingValues[0];
+			else baseWithoutClass[key] = remainingValues;
+		}
+		if (!hasSplit) return;
+		const className = getCompoundClass(baseEntry);
+		if (className) baseWithoutClass.className = className;
+		return normalizeCompoundEntry(baseWithoutClass);
+	};
+	const getCompoundClass = (entry) => {
+		const fromClassName = entry[CLASS_NAME_KEY];
+		if (fromClassName) return clsx(fromClassName);
+		const fromClass = entry[CLASS_KEY];
+		if (fromClass) return clsx(fromClass);
+		return "";
+	};
+	const normalizeCompoundEntry = (entry) => {
+		const normalized = {};
+		for (const [key, value] of Object.entries(entry)) {
+			if (key === CLASS_KEY || key === CLASS_NAME_KEY) continue;
+			normalized[key] = value;
+		}
+		const className = getCompoundClass(entry);
+		if (className) normalized.className = className;
+		return normalized;
+	};
+	const getCompoundIdentity = (entry) => {
+		const keys = Object.keys(entry).sort();
+		const identityParts = [];
+		for (const key of keys) {
+			if (isClassKey(key)) continue;
+			const value = entry[key];
+			if (Array.isArray(value)) {
+				const normalizedValues = value.map((item) => String(item)).sort();
+				identityParts.push(`${key}:[${normalizedValues.join(",")}]`);
+				continue;
+			}
+			identityParts.push(`${key}:${String(value)}`);
+		}
+		return identityParts.join("|");
+	};
+	const mergeClassNames = (baseClassName, overrideClassName, mode) => {
+		if (mode !== "merge") return clsx(overrideClassName);
+		return clsx(baseClassName, overrideClassName);
+	};
+	const mergeClassLists = (baseClassNames, overrideClassNames, mode) => {
+		if (mode !== "merge") return [...overrideClassNames];
+		return [...baseClassNames, ...overrideClassNames];
+	};
+	const mergeVariants = (baseVariants, overrideVariants, mode = "merge") => {
+		const merged = {};
+		if (baseVariants) for (const [variantKey, variantValues] of Object.entries(baseVariants)) merged[variantKey] = { ...variantValues };
+		if (!overrideVariants) {
+			if (!baseVariants) return;
+			return merged;
+		}
+		for (const [variantKey, overrideValues] of Object.entries(overrideVariants)) {
+			if (!overrideValues) continue;
+			if (!merged[variantKey]) merged[variantKey] = {};
+			for (const [valueKey, overrideValue] of Object.entries(overrideValues)) {
+				const baseClass = merged[variantKey][valueKey] ?? "";
+				merged[variantKey][valueKey] = mergeClassNames(baseClass, overrideValue, mode);
+			}
+		}
+		return merged;
+	};
+	const mergeCompoundVariants = (baseCompound, overrideCompound, mode = "merge") => {
+		if (!baseCompound) {
+			if (!overrideCompound) return;
+			return overrideCompound.map((entry) => normalizeCompoundEntry(entry));
+		}
+		const merged = baseCompound.map((entry) => normalizeCompoundEntry(entry));
+		if (!overrideCompound) return merged;
+		if (mode === "merge") {
+			for (const overrideEntry of overrideCompound) {
+				const normalizedOverride = normalizeCompoundEntry(overrideEntry);
+				const overrideIdentity = getCompoundIdentity(normalizedOverride);
+				let index = -1;
+				for (let i = 0; i < merged.length; i++) if (getCompoundIdentity(merged[i]) === overrideIdentity) {
+					index = i;
+					break;
+				}
+				if (index < 0) {
+					merged.push(normalizedOverride);
+					continue;
+				}
+				const mergedClassName = mergeClassNames(getCompoundClass(merged[index]), getCompoundClass(normalizedOverride), "merge");
+				const nextEntry = { ...normalizedOverride };
+				nextEntry.className = mergedClassName;
+				merged[index] = nextEntry;
+			}
+			return merged;
+		}
+		for (const overrideEntry of overrideCompound) {
+			const normalizedOverride = normalizeCompoundEntry(overrideEntry);
+			const overrideIdentity = getCompoundIdentity(normalizedOverride);
+			let exactMatchIndex = -1;
+			for (let i = 0; i < merged.length; i++) {
+				const currentEntry = merged[i];
+				if (getCompoundIdentity(currentEntry) === overrideIdentity) {
+					exactMatchIndex = i;
+					break;
+				}
+			}
+			if (exactMatchIndex >= 0) {
+				merged[exactMatchIndex] = normalizedOverride;
+				continue;
+			}
+			let candidateIndex = -1;
+			for (let i = 0; i < merged.length; i++) if (canOverrideCompoundEntry(merged[i], normalizedOverride)) {
+				candidateIndex = i;
+				break;
+			}
+			if (candidateIndex < 0) {
+				merged.push(normalizedOverride);
+				continue;
+			}
+			const candidate = merged[candidateIndex];
+			const splitBaseEntry = splitCompoundEntryByOverride(candidate, normalizedOverride);
+			if (splitBaseEntry) {
+				merged[candidateIndex] = splitBaseEntry;
+				merged.push(normalizedOverride);
+				continue;
+			}
+			merged[candidateIndex] = normalizedOverride;
+		}
+		return merged;
+	};
+	const mergeDefaultVariants = (baseDefaults, overrideDefaults) => {
+		if (!baseDefaults) {
+			if (!overrideDefaults) return;
+			return { ...overrideDefaults };
+		}
+		if (!overrideDefaults) return { ...baseDefaults };
+		return {
+			...baseDefaults,
+			...overrideDefaults
+		};
+	};
+	const hasConfigContent = (config) => {
+		if (!config) return false;
+		if (config.variants) return true;
+		if (config.compoundVariants) return true;
+		if (config.defaultVariants) return true;
+		return false;
+	};
+	_StyleMergeUtils.mergeCvaDefinition = (baseDefinition, override) => {
+		if (!override) return baseDefinition;
+		const mode = override.mode ?? "merge";
+		const overrideConfig = override.config;
+		if (mode === "overrideCva") {
+			const overrideBase = [];
+			if (override.base && Array.isArray(override.base)) {
+				for (const item of override.base) if (typeof item === "string") overrideBase.push(item);
+			}
+			let finalOverrideConfig = void 0;
+			if (hasConfigContent(overrideConfig)) finalOverrideConfig = overrideConfig;
+			return {
+				base: overrideBase,
+				config: finalOverrideConfig
+			};
+		}
+		let mergedBase = [...baseDefinition.base];
+		if (override.base && Array.isArray(override.base)) mergedBase = mergeClassLists(baseDefinition.base, override.base, mode);
+		const baseConfig = baseDefinition.config;
+		const mergedConfig = {
+			variants: mergeVariants(baseConfig?.variants, overrideConfig?.variants, mode),
+			compoundVariants: mergeCompoundVariants(baseConfig?.compoundVariants, overrideConfig?.compoundVariants, mode),
+			defaultVariants: mergeDefaultVariants(baseConfig?.defaultVariants, overrideConfig?.defaultVariants)
+		};
+		let finalConfig = void 0;
+		if (hasConfigContent(mergedConfig)) finalConfig = mergedConfig;
+		return {
+			base: mergedBase,
+			config: finalConfig
+		};
+	};
+})(StyleMergeUtils || (StyleMergeUtils = {}));
+//#endregion
+export { StyleMergeUtils };

package/dist/utils/style-merge.util.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@povio/ui",
-  "version": "2.3.2",
+  "version": "3.0.0",
   "type": "module",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",

package/dist/config/uiStyle.context.d.ts

@@ -1,162 +0,0 @@
-import { ClassProp } from 'class-variance-authority/types';
-import { PropsWithChildren } from 'react';
-import { BreadcrumbChevronVariantProps, BreadcrumbIconVariantProps, BreadcrumbItemVariantProps, BreadcrumbSegmentVariantProps, BreadcrumbsVariantProps } from '../components/Breadcrumbs/breadcrumbs.cva';
-import { ButtonVariantProps } from '../components/buttons/Button/button.cva';
-import { PillButtonVariants } from '../components/buttons/PillButton/pillButton.cva';
-import { CheckboxIconVariantProps, CheckboxVariantProps } from '../components/inputs/Checkbox/checkbox.cva';
-import { FormFieldErrorVariantProps } from '../components/inputs/FormField/formFieldError.cva';
-import { FormFieldHelperVariantProps } from '../components/inputs/FormField/formFieldHelper.cva';
-import { RadioVariantProps } from '../components/inputs/RadioGroup/radio.cva';
-import { InputBaseProps, InputSideProps, InputSizeProps } from '../components/inputs/shared/input.cva';
-import { LabelBaseProps } from '../components/inputs/shared/label.cva';
-import { ToggleVariantProps } from '../components/inputs/Toggle/toggle.cva';
-import { MenuCvaVariantProps, MenuItemVariantProps, MenuPopoverVariantProps, MenuPopoverWrapperVariantProps } from '../components/Menu/menu.cva';
-import { AccordionChevronVariantProps, AccordionHeadingSubtitleVariantProps, AccordionHeadingTitleVariantProps, AccordionHeadingVariantProps, AccordionIconVariantProps, AccordionItemVariantProps, AccordionPanelContentVariantProps, AccordionPanelVariantProps, AccordionTriggerVariantProps, AccordionVariantProps } from '../components/navigation/Accordion/accordion.cva';
-import { StepperIconVariantProps, StepperItemVariantProps, StepperNumberVariantProps, StepperSeparatorVariantProps, StepperSubtextVariantProps, StepperTitleVariantProps, StepperVariantProps } from '../components/navigation/Stepper/stepper.cva';
-import { ModalVariantProps } from '../components/overlays/Modal/modal.cva';
-import { TooltipPointerHorizontalVariantProps, TooltipPointerVerticalVariantProps, TooltipTextVariantProps, TooltipVariantProps } from '../components/overlays/Tooltip/tooltip.cva';
-import { SegmentItemVariantProps, SegmentVariantProps } from '../components/segment/segment.cva';
-import { PopoverVariantProps } from '../components/shared/popover.cva';
-import { AlertVariantProps } from '../components/status/Alert/alert.cva';
-import { ToastVariantProps } from '../components/status/Toast/toast.cva';
-import { TableCellTextVariantProps, TableDataVariantProps, TableHeadDataVariantProps, TableHeadRowVariantProps, TableHeaderTextVariantProps, TableRowVariantProps } from '../components/table/table.cva';
-import { LinkVariantProps } from '../components/text/Link/link.cva';
-import { TagVariantProps } from '../components/text/Tag/tag.cva';
-import { TypographyVariantProps } from '../components/text/Typography/typography.cva';
-import { CompoundMapper, ConfigSchema } from '../utils/compoundMapper';
-import { SelectListBoxItemCva } from '../components/inputs/Selection/shared/selectItem.cva';
-export declare namespace UIStyle {
-    export type Cva<T> = (props: (T & ClassProp) | ClassProp) => string;
-    type OptionKey = {
-        [K in keyof Options]: Options[K] extends object ? `${K & string}.${keyof Options[K] & string}` : never;
-    }[keyof Options];
-    interface Options {
-        button: {
-            cva?: Cva<ButtonVariantProps>;
-            sizeCva?: Cva<ButtonVariantProps>;
-            contentCva?: Cva<ButtonVariantProps>;
-            iconSize?: Cva<Pick<ButtonVariantProps, "size">>;
-            typography?: CompoundMapper<TypographyVariantProps, ButtonVariantProps>;
-        };
-        pillButton: {
-            cva?: Cva<PillButtonVariants>;
-            typography?: CompoundMapper<TypographyVariantProps, PillButtonVariants>;
-        };
-        checkbox: {
-            cva?: Cva<CheckboxVariantProps>;
-            iconCva?: Cva<CheckboxIconVariantProps>;
-            typography?: CompoundMapper<TypographyVariantProps, CheckboxVariantProps>;
-        };
-        radio: {
-            cva?: Cva<RadioVariantProps>;
-            typography?: CompoundMapper<TypographyVariantProps, RadioVariantProps>;
-        };
-        status: {
-            iconCva?: Cva<ToastVariantProps>;
-            separatorCva?: Cva<ToastVariantProps>;
-        };
-        toast: {
-            cva?: Cva<ToastVariantProps>;
-            buttonColor?: CompoundMapper<Pick<ButtonVariantProps, "color" | "inverted">, ToastVariantProps>;
-        };
-        alert: {
-            cva?: Cva<AlertVariantProps>;
-        };
-        input: {
-            baseCva?: Cva<InputBaseProps>;
-            sizeCva?: Cva<InputSizeProps>;
-            sideCva?: Cva<InputSideProps>;
-        };
-        label: {
-            cva?: Cva<LabelBaseProps>;
-            typography?: CompoundMapper<TypographyVariantProps, LabelBaseProps>;
-        };
-        toggle: {
-            cva?: Cva<ToggleVariantProps>;
-            typography?: CompoundMapper<TypographyVariantProps, ToggleVariantProps>;
-        };
-        typography: {
-            cva?: Cva<TypographyVariantProps>;
-        };
-        link: {
-            cva?: Cva<LinkVariantProps>;
-        };
-        tag: {
-            cva?: Cva<TagVariantProps>;
-        };
-        table: {
-            headRowCva?: Cva<TableHeadRowVariantProps>;
-            headDataCva?: Cva<TableHeadDataVariantProps>;
-            rowCva?: Cva<TableRowVariantProps>;
-            dataCva?: Cva<TableDataVariantProps>;
-            headerTextCva?: Cva<TableHeaderTextVariantProps>;
-            cellTextCva?: Cva<TableCellTextVariantProps>;
-        };
-        tooltip: {
-            cva?: Cva<TooltipVariantProps>;
-            pointerHorizontalCva?: Cva<TooltipPointerHorizontalVariantProps>;
-            pointerVerticalCva?: Cva<TooltipPointerVerticalVariantProps>;
-            textCva?: Cva<TooltipTextVariantProps>;
-        };
-        modal: {
-            contentCva?: Cva<ModalVariantProps>;
-            overlayCva?: Cva<ModalVariantProps>;
-            mainCva?: Cva<ModalVariantProps>;
-        };
-        menu: {
-            cva?: Cva<MenuCvaVariantProps>;
-            itemCva?: Cva<MenuItemVariantProps>;
-            popoverCva?: Cva<MenuPopoverVariantProps>;
-            popoverWrapperCva?: Cva<MenuPopoverWrapperVariantProps>;
-        };
-        segment: {
-            cva?: Cva<SegmentVariantProps>;
-            itemCva?: Cva<SegmentItemVariantProps>;
-        };
-        stepper: {
-            cva?: Cva<StepperVariantProps>;
-            itemCva?: Cva<StepperItemVariantProps>;
-            iconCva?: Cva<StepperIconVariantProps>;
-            numberCva?: Cva<StepperNumberVariantProps>;
-            titleCva?: Cva<StepperTitleVariantProps>;
-            subtextCva?: Cva<StepperSubtextVariantProps>;
-            separatorCva?: Cva<StepperSeparatorVariantProps>;
-        };
-        accordion: {
-            cva?: Cva<AccordionVariantProps>;
-            itemCva?: Cva<AccordionItemVariantProps>;
-            triggerCva?: Cva<AccordionTriggerVariantProps>;
-            headingCva?: Cva<AccordionHeadingVariantProps>;
-            headingTitleCva?: Cva<AccordionHeadingTitleVariantProps>;
-            headingSubtitleCva?: Cva<AccordionHeadingSubtitleVariantProps>;
-            chevronCva?: Cva<AccordionChevronVariantProps>;
-            iconCva?: Cva<AccordionIconVariantProps>;
-            panelCva?: Cva<AccordionPanelVariantProps>;
-            panelContentCva?: Cva<AccordionPanelContentVariantProps>;
-        };
-        breadcrumbs: {
-            cva?: Cva<BreadcrumbsVariantProps>;
-            itemCva?: Cva<BreadcrumbItemVariantProps>;
-            segmentCva?: Cva<BreadcrumbSegmentVariantProps>;
-            chevronCva?: Cva<BreadcrumbChevronVariantProps>;
-            iconCva?: Cva<BreadcrumbIconVariantProps>;
-        };
-        popover: {
-            cva?: Cva<PopoverVariantProps>;
-        };
-        formField: {
-            errorLabelCva?: Cva<FormFieldErrorVariantProps>;
-            helperLabelCva?: Cva<FormFieldHelperVariantProps>;
-        };
-        select: {
-            listBoxItemCva?: Cva<SelectListBoxItemCva>;
-        };
-    }
-    interface ProviderProps {
-        config?: Partial<Options>;
-    }
-    export const Provider: ({ children, config }: PropsWithChildren<ProviderProps>) => import("react/jsx-runtime").JSX.Element;
-    export const useCva: <T>(key: OptionKey, fallback: Cva<T>) => Cva<T>;
-    export const useMapper: <T, K extends ConfigSchema>(key: OptionKey, fallback: CompoundMapper<T, K>) => CompoundMapper<T, K>;
-    export {};
-}

package/dist/config/uiStyle.context.js

@@ -1,30 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { createContext, use } from "react";
-//#region src/config/uiStyle.context.tsx
-var UIStyle;
-(function(_UIStyle) {
-	const Context = createContext(null);
-	_UIStyle.Provider = ({ children, config }) => {
-		return /* @__PURE__ */ jsx(Context.Provider, {
-			value: config,
-			children
-		});
-	};
-	const useConfig = () => {
-		return use(Context);
-	};
-	_UIStyle.useCva = (key, fallback) => {
-		const uiStyle = useConfig();
-		if (!uiStyle) return fallback;
-		const [k1, k2] = key.split(".");
-		return uiStyle[k1]?.[k2] ?? fallback;
-	};
-	_UIStyle.useMapper = (key, fallback) => {
-		const uiStyle = useConfig();
-		if (!uiStyle) return fallback;
-		const [k1, k2] = key.split(".");
-		return uiStyle[k1]?.[k2] ?? fallback;
-	};
-})(UIStyle || (UIStyle = {}));
-//#endregion
-export { UIStyle };