All files / src/lib cva.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
/**
 * Class Variance Authority (CVA) Utilities
 *
 * Enhanced component variant system using class-variance-authority.
 * Provides type-safe, composable component variants.
 *
 * @example
 * ```tsx
 * const buttonVariants = cva('base-class', {
 *   variants: {
 *     variant: {
 *       primary: 'bg-primary text-white',
 *       secondary: 'bg-secondary text-white',
 *     },
 *     size: {
 *       sm: 'px-3 py-1.5',
 *       md: 'px-4 py-2',
 *     },
 *   },
 *   defaultVariants: {
 *     variant: 'primary',
 *     size: 'md',
 *   },
 * });
 *
 * <button className={buttonVariants({ variant: 'primary', size: 'sm' })}>
 *   Click me
 * </button>
 * ```
 */

import { cva, type VariantProps } from 'class-variance-authority';
import { cn } from '@/lib/core';

// Re-export cva and VariantProps for convenience
export { cva, type VariantProps };

/**
 * Create a component variant with automatic className merging
 *
 * Wraps CVA with our cn() utility for proper Tailwind class merging
 */
export function createVariants<T extends Parameters<typeof cva>>(
  base: T[0],
  config?: T[1]
) {
  const variants = cva(base, config);

  return (props?: Parameters<typeof variants>[0]) => {
    return cn(variants(props));
  };
}

/**
 * Common button variants used across the application
 */
export const buttonVariants = cva(
  'inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
  {
    variants: {
      variant: {
        primary: 'bg-primary text-white hover:bg-primary-700 focus-visible:ring-primary',
        secondary: 'bg-secondary text-white hover:bg-secondary-700 focus-visible:ring-secondary',
        outline: 'border border-gray-300 bg-transparent hover:bg-gray-100 focus-visible:ring-gray-400',
        ghost: 'hover:bg-gray-100 focus-visible:ring-gray-400',
        danger: 'bg-error text-white hover:bg-error-700 focus-visible:ring-error',
        link: 'text-primary underline-offset-4 hover:underline'},
      size: {
        sm: 'h-8 px-3 text-sm',
        md: 'h-10 px-4 text-base',
        lg: 'h-12 px-6 text-lg',
        icon: 'h-10 w-10'},
      fullWidth: {
        true: 'w-full',
        false: 'w-auto'}},
    defaultVariants: {
      variant: 'primary',
      size: 'md',
      fullWidth: false}}
);

/**
 * Common input variants used across the application
 */
export const inputVariants = cva(
  'flex w-full rounded-md border bg-transparent px-3 py-2 text-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-gray-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
  {
    variants: {
      state: {
        default: 'border-gray-300 focus-visible:ring-primary',
        error: 'border-error focus-visible:ring-error',
        success: 'border-success focus-visible:ring-success',
        warning: 'border-warning focus-visible:ring-warning'},
      size: {
        sm: 'h-8 text-xs',
        md: 'h-10 text-sm',
        lg: 'h-12 text-base'}},
    defaultVariants: {
      state: 'default',
      size: 'md'}}
);

/**
 * Common badge variants used across the application
 */
export const badgeVariants = cva(
  'inline-flex items-center rounded-full font-medium transition-colors',
  {
    variants: {
      variant: {
        default: 'bg-gray-100 text-gray-900',
        primary: 'bg-primary-100 text-primary-900',
        secondary: 'bg-secondary-100 text-secondary-900',
        success: 'bg-success-100 text-success-900',
        warning: 'bg-warning-100 text-warning-900',
        error: 'bg-error-100 text-error-900',
        outline: 'border border-current'},
      size: {
        sm: 'px-2 py-0.5 text-xs',
        md: 'px-2.5 py-1 text-sm',
        lg: 'px-3 py-1.5 text-base'}},
    defaultVariants: {
      variant: 'default',
      size: 'md'}}
);

/**
 * Common card variants used across the application
 */
export const cardVariants = cva('rounded-lg transition-shadow', {
  variants: {
    variant: {
      default: 'bg-white border border-gray-200',
      elevated: 'bg-white shadow-md',
      outlined: 'bg-transparent border-2 border-gray-300',
      ghost: 'bg-transparent'},
    padding: {
      none: 'p-0',
      sm: 'p-3',
      md: 'p-4',
      lg: 'p-6',
      xl: 'p-8'},
    hover: {
      none: '',
      lift: 'hover:shadow-lg hover:-translate-y-1',
      glow: 'hover:shadow-xl'}},
  defaultVariants: {
    variant: 'default',
    padding: 'md',
    hover: 'none'}});

/**
 * Type exports for component props
 */
export type ButtonVariants = VariantProps<typeof buttonVariants>;
export type InputVariants = VariantProps<typeof inputVariants>;
export type BadgeVariants = VariantProps<typeof badgeVariants>;
export type CardVariants = VariantProps<typeof cardVariants>;