@payfit/unity-themes
Version:
45 lines (44 loc) • 1.73 kB
TypeScript
import { VariantProps } from 'tailwind-variants';
/**
* 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 declare const uyTv: import('tailwind-variants').TV;
export type { VariantProps };