@payfit/unity-themes 2.55.21 → 2.55.23

package/src/utils/tailwind-merge.test.ts

@@ -1,462 +0,0 @@
-import { describe, expect, it } from 'vitest'
-
-import { uyMerge } from './tailwind-merge'
-
-describe('uyMerge', () => {
-  describe('Basic functionality', () => {
-    it('should merge basic class strings', () => {
-      const result = uyMerge('uy:p-4', 'uy:m-2')
-      expect(result).toBe('uy:p-4 uy:m-2')
-    })
-
-    it('should handle conflicting classes with last one winning', () => {
-      const result = uyMerge('uy:p-4', 'uy:p-8')
-      expect(result).toBe('uy:p-8')
-    })
-
-    it('should merge Unity classes with Tailwind classes', () => {
-      const result = uyMerge('uy:p-4', 'p-500', 'uy:text-100', 'p-600')
-      expect(result).toBe('uy:p-4 p-500 uy:text-100 p-600')
-    })
-
-    it('should handle multiple class types without conflicts', () => {
-      const result = uyMerge(
-        'uy:p-100     uy:bg-red',
-        'uy:m-200 uy:m-100 uy:p-100',
-        'uy:rounded-100 uy:m-50',
-        'uy:bg-primary-500',
-      )
-      expect(result).toBe('uy:p-100 uy:rounded-100 uy:m-50 uy:bg-primary-500')
-    })
-
-    it('should resolve conflicts in complex scenarios', () => {
-      const result = uyMerge(
-        'uy:p-100 uy:m-50 uy:text-primary-500',
-        'uy:p-200 uy:bg-secondary-100',
-        'uy:m-100 uy:bg-primary-500',
-        'uy:md:p-100',
-        'uy:md:p-300',
-      )
-      expect(result).toBe(
-        'uy:text-primary-500 uy:p-200 uy:m-100 uy:bg-primary-500 uy:md:p-300',
-      )
-    })
-
-    it('should handle conflicting responsive classes', () => {
-      const result = uyMerge('uy:sm:p-100', 'uy:sm:p-200')
-      expect(result).toBe('uy:sm:p-200')
-    })
-
-    it('should handle hover and focus variants', () => {
-      const result = uyMerge(
-        'uy:bg-primary-500',
-        'uy:hover:bg-primary-600',
-        'uy:focus:bg-primary-700',
-      )
-      expect(result).toBe(
-        'uy:bg-primary-500 uy:hover:bg-primary-600 uy:focus:bg-primary-700',
-      )
-    })
-  })
-
-  describe('Unity Colors', () => {
-    describe('Primitive colors', () => {
-      it('should merge conflicting primitive background colors', () => {
-        const result = uyMerge('uy:bg-grayscale-l0', 'uy:bg-red-l5')
-        expect(result).toBe('uy:bg-red-l5')
-      })
-
-      it('should merge conflicting primitive text colors', () => {
-        const result = uyMerge('uy:text-blue-l10', 'uy:text-green-l3')
-        expect(result).toBe('uy:text-green-l3')
-      })
-
-      it('should merge conflicting primitive border colors', () => {
-        const result = uyMerge('uy:border-yellow-l6', 'uy:border-purple-l8')
-        expect(result).toBe('uy:border-purple-l8')
-      })
-
-      it('should handle all primitive color utilities', () => {
-        const result = uyMerge(
-          'uy:bg-red-l1 uy:text-blue-l2 uy:border-green-l3',
-          'uy:outline-yellow-l4 uy:ring-purple-l5 uy:divide-cyan-l6',
-          'uy:decoration-plum-l7 uy:from-orange-l8 uy:via-teal-l9 uy:to-grayscale-l10',
-        )
-        expect(result).toBe(
-          'uy:bg-red-l1 uy:text-blue-l2 uy:border-green-l3 uy:outline-yellow-l4 uy:ring-purple-l5 uy:divide-cyan-l6 uy:decoration-plum-l7 uy:from-orange-l8 uy:via-teal-l9 uy:to-grayscale-l10',
-        )
-      })
-    })
-
-    describe('Semantic colors', () => {
-      it('should merge conflicting surface colors', () => {
-        const result = uyMerge(
-          'uy:bg-surface-primary-default',
-          'uy:bg-surface-danger-low',
-        )
-        expect(result).toBe('uy:bg-surface-danger-low')
-      })
-
-      it('should merge conflicting content colors', () => {
-        const result = uyMerge(
-          'uy:text-content-neutral-default-default',
-          'uy:text-content-primary-high',
-        )
-        expect(result).toBe('uy:text-content-primary-high')
-      })
-
-      it('should merge conflicting border colors', () => {
-        const result = uyMerge(
-          'uy:border-border-form-enabled',
-          'uy:border-border-danger-default',
-        )
-        expect(result).toBe('uy:border-border-danger-default')
-      })
-
-      it('should handle complex semantic color names', () => {
-        const result = uyMerge(
-          'uy:bg-surface-primary-default-default',
-          'uy:bg-surface-primary-default-hover',
-          'uy:bg-surface-primary-default-pressed',
-        )
-        expect(result).toBe('uy:bg-surface-primary-default-pressed')
-      })
-
-      it('should handle utility colors', () => {
-        const result = uyMerge(
-          'uy:ring-utility-focus-ring',
-          'uy:ring-utility-inverted-focus-ring',
-        )
-        expect(result).toBe('uy:ring-utility-inverted-focus-ring')
-      })
-
-      it('should handle canvas colors', () => {
-        const result = uyMerge(
-          'uy:bg-canvas-default',
-          'uy:bg-surface-primary-default',
-        )
-        expect(result).toBe('uy:bg-surface-primary-default')
-      })
-    })
-
-    describe('Mixed color types', () => {
-      it('should merge primitive and semantic colors', () => {
-        const result = uyMerge(
-          'uy:bg-grayscale-l0',
-          'uy:bg-surface-primary-default',
-        )
-        expect(result).toBe('uy:bg-surface-primary-default')
-      })
-
-      it('should handle different color utilities without conflicts', () => {
-        const result = uyMerge(
-          'uy:bg-surface-primary-default',
-          'uy:text-content-neutral-low',
-          'uy:border-border-form-enabled',
-        )
-        expect(result).toBe(
-          'uy:bg-surface-primary-default uy:text-content-neutral-low uy:border-border-form-enabled',
-        )
-      })
-    })
-  })
-
-  describe('Unity Spacing', () => {
-    it('should merge conflicting padding values', () => {
-      const result = uyMerge('uy:p-100', 'uy:p-200')
-      expect(result).toBe('uy:p-200')
-    })
-
-    it('should merge conflicting margin values', () => {
-      const result = uyMerge('uy:m-50', 'uy:m-300')
-      expect(result).toBe('uy:m-300')
-    })
-
-    it('should handle directional spacing conflicts', () => {
-      const result = uyMerge('uy:px-100 uy:py-200', 'uy:p-300')
-      expect(result).toBe('uy:p-300')
-    })
-
-    it('should handle specific directional spacing', () => {
-      const result = uyMerge('uy:p-100', 'uy:px-200', 'uy:pt-300')
-      expect(result).toBe('uy:p-100 uy:px-200 uy:pt-300')
-    })
-
-    it('should merge gap values', () => {
-      const result = uyMerge('uy:gap-100', 'uy:gap-200')
-      expect(result).toBe('uy:gap-200')
-    })
-
-    it('should handle gap directional values', () => {
-      const result = uyMerge('uy:gap-100', 'uy:gap-x-200', 'uy:gap-y-300')
-      expect(result).toBe('uy:gap-100 uy:gap-x-200 uy:gap-y-300')
-    })
-
-    it('should handle space-between values', () => {
-      const result = uyMerge('uy:space-x-100', 'uy:space-x-200')
-      expect(result).toBe('uy:space-x-200')
-    })
-
-    it('should handle scroll spacing', () => {
-      const result = uyMerge('uy:scroll-p-100', 'uy:scroll-p-200')
-      expect(result).toBe('uy:scroll-p-200')
-    })
-
-    it('should handle all Unity spacing values', () => {
-      const spacingValues = [
-        '0',
-        '25',
-        '50',
-        '75',
-        '100',
-        '125',
-        '150',
-        '200',
-        '250',
-        '300',
-        '400',
-        '500',
-        '600',
-        '800',
-        '1000',
-      ]
-
-      spacingValues.forEach(value => {
-        const result = uyMerge('uy:p-100', `uy:p-${value}`)
-        expect(result).toBe(`uy:p-${value}`)
-      })
-    })
-  })
-
-  describe('Unity Typography', () => {
-    it('should merge conflicting typography classes', () => {
-      const result = uyMerge('uy:typography-h1', 'uy:typography-body')
-      expect(result).toBe('uy:typography-body')
-    })
-
-    it('should handle all typography variants', () => {
-      const typographyClasses = [
-        'display-heading',
-        'h1',
-        'h2',
-        'h3',
-        'h4',
-        'overline',
-        'subtitle',
-        'display-title',
-        'display-body',
-        'body',
-        'body-strong',
-        'body-small',
-        'body-small-strong',
-        'body-large',
-        'body-large-strong',
-        'action',
-        'action-small',
-        'action-large',
-      ]
-
-      typographyClasses.forEach(variant => {
-        const result = uyMerge('uy:typography-body', `uy:typography-${variant}`)
-        expect(result).toBe(`uy:typography-${variant}`)
-      })
-    })
-
-    it('should merge font size classes', () => {
-      const result = uyMerge('uy:text-100', 'uy:text-400')
-      expect(result).toBe('uy:text-400')
-    })
-
-    it('should handle all Unity font sizes', () => {
-      const fontSizes = [
-        '50',
-        '75',
-        '100',
-        '200',
-        '300',
-        '400',
-        '500',
-        '600',
-        '800',
-        '1000',
-        '1200',
-        '1400',
-        '1600',
-      ]
-
-      fontSizes.forEach(size => {
-        const result = uyMerge('uy:text-100', `uy:text-${size}`)
-        expect(result).toBe(`uy:text-${size}`)
-      })
-    })
-  })
-
-  describe('Unity Border Radius', () => {
-    it('should merge conflicting border radius values', () => {
-      const result = uyMerge('uy:rounded-100', 'uy:rounded-200')
-      expect(result).toBe('uy:rounded-200')
-    })
-
-    it('should handle semantic border radius values', () => {
-      const result = uyMerge('uy:rounded-sm', 'uy:rounded-lg')
-      expect(result).toBe('uy:rounded-lg')
-    })
-
-    it('should handle special border radius values', () => {
-      const result = uyMerge('uy:rounded-100', 'uy:rounded-circle')
-      expect(result).toBe('uy:rounded-circle')
-    })
-
-    it('should handle directional border radius', () => {
-      const result = uyMerge(
-        'uy:rounded-100',
-        'uy:rounded-t-200',
-        'uy:rounded-br-300',
-      )
-      expect(result).toBe('uy:rounded-100 uy:rounded-t-200 uy:rounded-br-300')
-    })
-
-    it('should merge conflicting directional border radius', () => {
-      const result = uyMerge('uy:rounded-t-100', 'uy:rounded-t-200')
-      expect(result).toBe('uy:rounded-t-200')
-    })
-
-    it('should handle all Unity border radius values', () => {
-      const radiusValues = [
-        '0',
-        '25',
-        '50',
-        '75',
-        '100',
-        '125',
-        '150',
-        '200',
-        '300',
-        '400',
-        'xs',
-        'sm',
-        'md',
-        'lg',
-        'xl',
-        'circle',
-        'pill',
-      ]
-
-      radiusValues.forEach(value => {
-        const result = uyMerge('uy:rounded-100', `uy:rounded-${value}`)
-        expect(result).toBe(`uy:rounded-${value}`)
-      })
-    })
-  })
-
-  describe('Unity Shadows', () => {
-    it('should merge conflicting shadow values', () => {
-      const result = uyMerge('uy:shadow-raising', 'uy:shadow-floating')
-      expect(result).toBe('uy:shadow-floating')
-    })
-
-    it('should handle all Unity shadow values', () => {
-      const shadowValues = [
-        'canvas',
-        'raising',
-        'floating',
-        'flying',
-        'soaring',
-      ]
-
-      shadowValues.forEach(value => {
-        const result = uyMerge('uy:shadow-raising', `uy:shadow-${value}`)
-        expect(result).toBe(`uy:shadow-${value}`)
-      })
-    })
-  })
-
-  describe('Responsive and State Variants', () => {
-    it('should handle responsive variants with Unity classes', () => {
-      const result = uyMerge(
-        'uy:bg-surface-primary-default',
-        'uy:md:bg-surface-secondary-default',
-        'uy:lg:bg-surface-danger-default',
-      )
-      expect(result).toBe(
-        'uy:bg-surface-primary-default uy:md:bg-surface-secondary-default uy:lg:bg-surface-danger-default',
-      )
-    })
-
-    it('should merge conflicting responsive variants', () => {
-      const result = uyMerge('uy:md:p-100', 'uy:md:p-200')
-      expect(result).toBe('uy:md:p-200')
-    })
-
-    it('should handle state variants with Unity colors', () => {
-      const result = uyMerge(
-        'uy:bg-surface-primary-default',
-        'uy:hover:bg-surface-primary-hover',
-        'uy:focus:bg-surface-primary-focus',
-      )
-      expect(result).toBe(
-        'uy:bg-surface-primary-default uy:hover:bg-surface-primary-hover uy:focus:bg-surface-primary-focus',
-      )
-    })
-
-    it('should merge conflicting state variants', () => {
-      const result = uyMerge(
-        'uy:hover:bg-surface-primary-default',
-        'uy:hover:bg-surface-danger-default',
-      )
-      expect(result).toBe('uy:hover:bg-surface-danger-default')
-    })
-  })
-
-  describe('Edge Cases and Complex Scenarios', () => {
-    it('should handle empty strings', () => {
-      const result = uyMerge('', 'uy:p-100', '')
-      expect(result).toBe('uy:p-100')
-    })
-
-    it('should handle undefined values', () => {
-      const result = uyMerge('uy:p-100', undefined, 'uy:m-200')
-      expect(result).toBe('uy:p-100 uy:m-200')
-    })
-
-    it('should handle complex real-world scenario', () => {
-      const result = uyMerge(
-        // Base styles
-        'uy:bg-surface-neutral-default-default uy:text-content-neutral-default-default uy:p-200 uy:rounded-100',
-        // Conditional styles
-        'uy:bg-surface-primary-default uy:text-content-inverted-default',
-        // Responsive styles
-        'uy:md:p-300 uy:lg:p-400',
-        // State styles
-        'uy:hover:bg-surface-primary-hover uy:focus:bg-surface-primary-focus',
-        // Override styles
-        'uy:shadow-floating uy:border-border-primary-default',
-      )
-      expect(result).toBe(
-        'uy:p-200 uy:rounded-100 uy:bg-surface-primary-default uy:text-content-inverted-default uy:md:p-300 uy:lg:p-400 uy:hover:bg-surface-primary-hover uy:focus:bg-surface-primary-focus uy:shadow-floating uy:border-border-primary-default',
-      )
-    })
-
-    it('should preserve non-Unity classes', () => {
-      const result = uyMerge(
-        'flex items-center justify-center',
-        'uy:bg-surface-primary-default uy:p-200',
-        'absolute top-0 left-0',
-      )
-      expect(result).toBe(
-        'flex items-center justify-center uy:bg-surface-primary-default uy:p-200 absolute top-0 left-0',
-      )
-    })
-
-    it('should handle mixed Unity and Tailwind conflicts correctly', () => {
-      const result = uyMerge(
-        'p-4 uy:p-100', // Different systems, should not conflict
-        'bg-red-500 uy:bg-surface-primary-default', // Different systems, should not conflict
-        'uy:p-200', // Unity conflict, should override Unity
-      )
-      expect(result).toBe(
-        'p-4 bg-red-500 uy:bg-surface-primary-default uy:p-200',
-      )
-    })
-  })
-})

package/src/utils/tailwind-merge.ts

@@ -1,77 +0,0 @@
-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),
-)

package/src/utils/tailwind-variants.ts

@@ -1,53 +0,0 @@
-import type { VariantProps } from 'tailwind-variants'
-
-import { createTV } from 'tailwind-variants'
-
-import { twMergeConfig } from './merge-config'
-
-/**
- * Unity-configured tailwind-variants TV function for creating component variants.
- *
- * This is a pre-configured version of tailwind-variants' `createTV` function that includes
- * Unity's custom tailwind-merge configuration. It automatically handles Unity's custom
- * class names including semantic colors, spacing values, typography classes, and more.
- * @example
- * ```tsx
- * import { uyTv } from '@payfit/unity-themes'
- *
- * const button = uyTv({
- *   base: 'uy:px-200 uy:py-100 uy:rounded-100',
- *   variants: {
- *     variant: {
- *       primary: 'uy:bg-surface-primary-default uy:text-content-inverted-default',
- *       secondary: 'uy:bg-surface-neutral-default uy:text-content-neutral-default',
- *     },
- *     size: {
- *       small: 'uy:text-75 uy:px-150 uy:py-75',
- *       large: 'uy:text-200 uy:px-300 uy:py-150',
- *     }
- *   },
- *   defaultVariants: {
- *     variant: 'primary',
- *     size: 'small'
- *   }
- * })
- *
- * // Usage in component
- * <button className={button({ variant: 'secondary', size: 'large' })}>
- *   Click me
- * </button>
- * ```
- * @description
- * - Automatically merges conflicting Unity classes (e.g., `uy:bg-surface-primary` + `uy:bg-surface-danger` → `uy:bg-surface-danger`)
- * - Supports all Unity design tokens: colors, spacing, typography, shadows, border radius
- * - Handles responsive and state variants correctly
- * - Compatible with standard Tailwind classes alongside Unity classes
- * @see {@link https://www.tailwind-variants.org/ Tailwind Variants Documentation}
- * @see {@link twMergeConfig} for the Unity merge configuration details
- */
-export const uyTv = createTV({
-  twMerge: true,
-  twMergeConfig,
-})
-
-export type { VariantProps }