import { createTailwindMerge, getDefaultConfig, mergeConfigs, } from 'tailwind-merge' import { twMergeConfig } from './merge-config' /** * Unity-configured tailwind-merge function for intelligent CSS class merging. * * This is a pre-configured version of tailwind-merge that includes Unity's custom * class definitions and merge rules. It automatically handles Unity's design tokens * including semantic colors, primitive colors, spacing values, typography classes, * border radius, shadows, and more. * @param classes - CSS class names to merge * @returns Merged and deduplicated class string with conflicts resolved * @example * ```tsx * import { uyMerge } from '@payfit/unity-themes' * * // Basic conflict resolution - last class wins * const className = uyMerge('uy:bg-surface-primary-default', 'uy:bg-surface-danger-default') * // → 'uy:bg-surface-danger-default' * * // Spacing conflicts * const className = uyMerge('uy:p-100', 'uy:px-200', 'uy:py-300') * // → 'uy:p-100 uy:px-200 uy:py-300' (px/py don't conflict with p) * * const className = uyMerge('uy:p-100', 'uy:p-200') * // → 'uy:p-200' (direct conflict resolved) * * // Typography conflicts * const className = uyMerge('uy:typography-h1', 'uy:typography-body') * // → 'uy:typography-body' * * // Complex semantic colors * const className = uyMerge( * 'uy:bg-surface-primary-default-default', * 'uy:bg-surface-primary-default-hover' * ) * // → 'uy:bg-surface-primary-default-hover' * * // Mixed with standard Tailwind (no conflicts) * const className = uyMerge('flex items-center', 'uy:bg-surface-primary-default', 'justify-center') * // → 'flex items-center uy:bg-surface-primary-default justify-center' * * // Responsive and state variants * const className = uyMerge( * 'uy:bg-surface-neutral-default', * 'uy:hover:bg-surface-primary-hover', * 'uy:md:bg-surface-secondary-default' * ) * // → 'uy:bg-surface-neutral-default uy:hover:bg-surface-primary-hover uy:md:bg-surface-secondary-default' * ``` * @description * **Supported Unity Features:** * - **Primitive Colors**: `grayscale-l0`, `red-l5`, `blue-l12`, etc. (pattern: `{color}-l{number}`) * - **Semantic Colors**: `surface-primary-default`, `content-neutral-low`, `border-danger-default`, etc. * - **Spacing**: All Unity spacing values (`0`, `25`, `50`, `75`, `100`, `125`, `150`, `200`, `250`, `300`, `400`, `500`, `600`, `800`, `1000`) * - **Typography**: `h1`, `h2`, `body`, `action`, etc. (generated class names without `-sm` variants) * - **Border Radius**: Numeric (`0`, `25`, `50`, etc.) and semantic (`xs`, `sm`, `md`, `lg`, `xl`, `circle`, `pill`) * - **Shadows**: Unity shadow values (`canvas`, `raising`, `floating`, `flying`, `soaring`) * - **All Utilities**: `bg-*`, `text-*`, `border-*`, `outline-*`, `ring-*`, `divide-*`, `decoration-*`, gradients, etc. * * **Merge Rules:** * - Conflicting classes within the same group are resolved (last one wins) * - Non-conflicting classes are preserved * - Unity classes don't conflict with standard Tailwind classes * - Responsive and state variants are handled correctly * - Pattern matching automatically supports new Unity design tokens * @see {@link twMergeConfig} for the complete Unity merge configuration * @see {@link https://github.com/dcastil/tailwind-merge Tailwind Merge Documentation} */ export const uyMerge = createTailwindMerge(() => mergeConfigs(getDefaultConfig(), twMergeConfig), )