feat: extract cva class

Author: thevuong

.idea/codeStyles/Project.xml

@@ -1,3 +1,5 @@
+'use client';
+
 import {
   Content,
   Header,

.idea/codefixlabs.iml

@@ -1,3 +1,5 @@
+'use client';
+
 import {
   Action,
   Cancel,
@@ -10,11 +12,11 @@ import {
   Trigger,
 } from '@radix-ui/react-alert-dialog';
 import type { VariantProps } from 'class-variance-authority';
-import { cva, cx } from 'class-variance-authority';
+import { cx } from 'class-variance-authority';
 import * as React from 'react';
 import { createContext, forwardRef, useContext } from 'react';
 import { twMerge } from 'tailwind-merge';
-import { buttonVariants } from './button';
+import { alertDialogContentVariants, buttonVariants } from './cva';
 
 /* -----------------------------------------------------------------------------
  * Provider: AlertDialogContext
@@ -44,22 +46,6 @@ export function AlertDialog({
 /* -----------------------------------------------------------------------------
  * Component: AlertDialogContent
  * -------------------------------------------------------------------------- */
-const alertDialogContentVariants = cva(
-  [
-    'bg-background relative rounded-lg border shadow-lg focus:outline-none',
-    'data-state-open:animate-content-show data-state-closed:animate-content-hide',
-  ],
-  {
-    defaultVariants: {
-      scrollable: false,
-    },
-    variants: {
-      scrollable: {
-        true: 'flex max-h-full flex-col',
-      },
-    },
-  },
-);
 
 export const AlertDialogContent = forwardRef<
   React.ElementRef<typeof Content>,

packages/ui/src/accordion.tsx

@@ -1,36 +1,15 @@
+'use client';
+
 import type { VariantProps } from 'class-variance-authority';
-import { cva } from 'class-variance-authority';
 import * as React from 'react';
 import { forwardRef } from 'react';
 import { twMerge } from 'tailwind-merge';
+import { alertVariants } from './cva';
 
 /* -----------------------------------------------------------------------------
  * Component: Alert
  * -------------------------------------------------------------------------- */
 
-const alertVariants = cva(
-  [
-    'relative w-full rounded-lg border p-4',
-    '[&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4',
-    '[&>svg+div]:translate-y-[-3px]',
-    '[&:has(svg)]:pl-11',
-  ],
-  {
-    defaultVariants: {
-      variant: 'default',
-    },
-    variants: {
-      variant: {
-        default: ['bg-background text-foreground', '[&>svg]:text-foreground'],
-        destructive: [
-          'border-destructive/50 text-destructive dark:border-destructive',
-          '[&>svg]:text-destructive',
-        ],
-      },
-    },
-  },
-);
-
 export const Alert = forwardRef<
   React.ElementRef<'div'>,
   React.ComponentProps<'div'> & VariantProps<typeof alertVariants>

packages/ui/src/alert-dialog.tsx

@@ -1 +1,3 @@
+'use client';
+
 export { AspectRatio } from '@radix-ui/react-aspect-ratio';

packages/ui/src/alert.tsx

@@ -1,8 +1,10 @@
+'use client';
+
+import { getFirstInitials } from '@codefixlabs/lib';
 import { Fallback, Image, Root } from '@radix-ui/react-avatar';
 import * as React from 'react';
 import { forwardRef } from 'react';
 import { twMerge } from 'tailwind-merge';
-import { getFirstInitials } from '@codefixlabs/lib';
 
 /* -----------------------------------------------------------------------------
  * Component: Avatar

packages/ui/src/aspect-ratio.tsx

@@ -1,30 +1,14 @@
+'use client';
+
 import type { VariantProps } from 'class-variance-authority';
-import { cva } from 'class-variance-authority';
 import * as React from 'react';
 import { twMerge } from 'tailwind-merge';
+import { badgeVariants } from './cva';
 
 /* -----------------------------------------------------------------------------
  * Component: Badge
  * -------------------------------------------------------------------------- */
 
-const badgeVariants = cva(
-  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold',
-  {
-    defaultVariants: {
-      variant: 'primary',
-    },
-    variants: {
-      variant: {
-        destructive:
-          'bg-destructive text-destructive-foreground border-transparent',
-        outline: 'border-input',
-        primary: 'bg-primary text-primary-foreground border-transparent',
-        secondary: 'bg-secondary text-secondary-foreground border-transparent',
-      },
-    },
-  },
-);
-
 export function Badge({
   className,
   variant,

packages/ui/src/avatar.tsx

@@ -1,212 +1,28 @@
+'use client';
+
 import type { VariantProps } from 'class-variance-authority';
-import { cva } from 'class-variance-authority';
-import type { ClassValue } from 'clsx';
 import { Loader2Icon } from 'lucide-react';
 import * as React from 'react';
 import { Children, forwardRef, useMemo } from 'react';
 import { twMerge } from 'tailwind-merge';
+import { buttonVariants, innerButtonVariants } from './cva';
 import type { IconType } from './icons';
 
 /* -----------------------------------------------------------------------------
  * Component: Button
  * -------------------------------------------------------------------------- */
 
-type ButtonSize = 'lg' | 'md' | 'sm';
-
-type ButtonVariant =
-  | 'destructive'
-  | 'ghost'
-  | 'outline'
-  | 'primary'
-  | 'secondary';
-
-const sizes: {
-  icon: boolean;
-  sizes: {
-    className: ClassValue;
-    size: ButtonSize;
-    variant: ButtonVariant[];
-  }[];
-}[] = [
-  {
-    icon: true,
-    sizes: [
-      {
-        className: 'px-2 h-8',
-        size: 'sm',
-        variant: ['primary', 'secondary', 'destructive', 'ghost'],
-      },
-      {
-        className: 'px-1.75 h-8',
-        size: 'sm',
-        variant: ['outline'],
-      },
-      // ---
-      {
-        className: 'px-3 h-10',
-        size: 'md',
-        variant: ['primary', 'secondary', 'destructive', 'ghost'],
-      },
-      {
-        className: 'px-2.75 h-10',
-        size: 'md',
-        variant: ['outline'],
-      },
-      // ---
-      {
-        className: 'px-4 h-12',
-        size: 'lg',
-        variant: ['primary', 'secondary', 'destructive', 'ghost'],
-      },
-      {
-        className: 'px-3.75 h-12',
-        size: 'lg',
-        variant: ['outline'],
-      },
-    ],
-  },
-  {
-    icon: false,
-    sizes: [
-      {
-        className: 'px-4 h-8',
-        size: 'sm',
-        variant: ['primary', 'secondary', 'destructive', 'ghost'],
-      },
-      {
-        className: 'px-3.75 h-8',
-        size: 'sm',
-        variant: ['outline'],
-      },
-      // ---
-      {
-        className: 'px-5 h-10',
-        size: 'md',
-        variant: ['primary', 'secondary', 'destructive', 'ghost'],
-      },
-      {
-        className: 'px-4.75 h-10',
-        size: 'md',
-        variant: ['outline'],
-      },
-      // ---
-      {
-        className: 'px-6 h-12',
-        size: 'lg',
-        variant: ['primary', 'secondary', 'destructive', 'ghost'],
-      },
-      {
-        className: 'px-5.75 h-12',
-        size: 'lg',
-        variant: ['outline'],
-      },
-    ],
-  },
-];
-
-// Flatten the array and group variants if the size is the same
-const compoundSizes = sizes.flatMap<{
-  className: ClassValue;
-  icon: boolean;
-  size: ButtonSize;
-  variant: ButtonVariant[];
-}>(({ icon, sizes: _sizes }) =>
-  _sizes.map(({ variant, size, className }) => ({
-    className,
-    icon,
-    size,
-    variant,
-  })),
-);
-
-export const buttonVariants = cva(
-  [
-    'relative select-none items-center gap-2 whitespace-nowrap text-sm font-medium transition-colors',
-    'focus:ring-ring/40 focus:outline-none focus:ring-2',
-    'data-disabled:cursor-not-allowed',
-  ],
-  {
-    compoundVariants: [
-      {
-        className: 'data-disabled:bg-opacity-50',
-        variant: ['primary', 'secondary', 'destructive'],
-      },
-      {
-        className: 'data-disabled:opacity-50',
-        variant: ['ghost', 'outline'],
-      },
-      ...compoundSizes,
-    ],
-    defaultVariants: {
-      block: false,
-      icon: false,
-      justify: 'center',
-      shape: 'rounded',
-      size: 'md',
-      variant: 'primary',
-    },
-    variants: {
-      block: {
-        false: 'inline-flex',
-        true: 'flex w-full',
-      },
-      icon: {
-        false: '',
-        true: '',
-      },
-      justify: {
-        between: 'justify-between',
-        center: 'justify-center',
-      },
-      shape: {
-        pill: 'rounded-full',
-        rounded: 'rounded-md',
-        square: 'rounded-sm',
-      },
-      size: {
-        lg: '',
-        md: '',
-        sm: '',
-      },
-      variant: {
-        destructive:
-          'bg-destructive text-destructive-foreground [&:not([data-disabled])]:hover:bg-destructive/90',
-        ghost: '[&:not([data-disabled])]:hover:bg-accent',
-        link: 'text-primary rounded-none hover:underline',
-        outline:
-          'border-input [&:not([data-disabled])]:hover:bg-accent [&:not([data-disabled])]:hover:text-accent-foreground border',
-        primary:
-          'bg-primary text-primary-foreground [&:not([data-disabled])]:hover:bg-primary/90',
-        secondary:
-          'bg-secondary text-secondary-foreground [&:not([data-disabled])]:hover:bg-secondary/90',
-      },
-    },
-  },
-);
-
-const innerButtonVariants = cva('h-4 w-4 shrink-0 text-base text-opacity-100', {
-  defaultVariants: {
-    loading: false,
-  },
-  variants: {
-    loading: {
-      false: undefined,
-      true: 'animate-spin',
-    },
-  },
-});
-
 export const Button = forwardRef<
   React.ElementRef<'button'>,
   VariantProps<typeof buttonVariants> &
-    React.ComponentPropsWithoutRef<'button'> &
-    VariantProps<typeof innerButtonVariants> & {
+    React.ComponentPropsWithoutRef<'button'> & {
       endIcon?: IconType;
       startIcon?: IconType;
       classNames?: {
         startIcon?: string;
         endIcon?: string;
       };
+      loading?: boolean;
     }
 >(
   (

packages/ui/src/badge.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { Slot } from '@radix-ui/react-slot';
 import { cx } from 'class-variance-authority';
 import { format } from 'date-fns';
@@ -30,7 +32,7 @@ import {
   useSelectRange,
 } from 'react-day-picker';
 import { twMerge } from 'tailwind-merge';
-import { buttonVariants } from './button';
+import { buttonVariants } from './cva';
 import type { FormControl } from './form';
 import { Input } from './input';
 import { Label } from './label';