sparkdesign 0.4.7 → 0.4.8

package/cli/registry/basic/input.tsx

@@ -1,27 +1,43 @@
 import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '@/lib/utils'
 
-export type InputProps = React.InputHTMLAttributes<HTMLInputElement>
+const inputVariants = cva(
+  [
+    'flex w-full min-w-0 rounded-lg border border-border-tertiary bg-bg-container text-text transition-colors',
+    'placeholder:text-text-tertiary',
+    'file:border-0 file:bg-transparent file:font-medium file:text-text',
+    'outline-none focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0',
+    'focus:border-border-secondary focus-visible:border-border-secondary',
+    'disabled:cursor-not-allowed disabled:opacity-50',
+    'aria-invalid:border-error aria-invalid:ring-0',
+  ].join(' '),
+  {
+    variants: {
+      size: {
+        sm: 'h-7 px-2 py-0.5 text-xs file:text-xs',
+        md: 'h-9 px-3 py-1 text-sm file:text-sm',
+        lg: 'h-11 px-4 py-1.5 text-base file:text-base',
+      },
+    },
+    defaultVariants: { size: 'md' },
+  }
+)
+
+export interface InputProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>,
+    VariantProps<typeof inputVariants> {}
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, type, ...props }, ref) => (
+  ({ className, type, size = 'md', ...props }, ref) => (
     <input
       type={type}
       ref={ref}
-      className={cn(
-        'flex h-9 w-full min-w-0 rounded-lg border border-border-tertiary bg-bg-container px-3 py-1 text-sm text-text transition-colors',
-        'placeholder:text-text-tertiary',
-        'file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-text',
-        'outline-none focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0',
-        'focus:border-border-secondary focus-visible:border-border-secondary',
-        'disabled:cursor-not-allowed disabled:opacity-50',
-        'aria-invalid:border-error aria-invalid:ring-0',
-        className,
-      )}
+      className={cn(inputVariants({ size }), className)}
       {...props}
     />
   ),
 )
 Input.displayName = 'Input'
 
-export { Input }
+export { Input, inputVariants }

package/cli/registry/basic/popover.tsx

@@ -2,6 +2,7 @@ import * as React from 'react'
 import { motion } from 'framer-motion'
 import * as PopoverPrimitive from '@radix-ui/react-popover'
 import { cn } from '@/lib/utils'
+import { MOTION_SCALE_IN } from '@/lib/motion'
 import { getThemeFromDocument } from './theme-from-document'
 
 const Popover = PopoverPrimitive.Root
@@ -42,9 +43,7 @@ const PopoverContent = React.forwardRef<
             {...props}
           >
             <motion.div
-              initial={{ opacity: 0, y: 4 }}
-              animate={{ opacity: 1, y: 0 }}
-              transition={{ duration: 0.15, ease: [0.4, 0, 0.2, 1] }}
+              {...MOTION_SCALE_IN}
             >
               {children}
             </motion.div>

package/cli/registry/basic/select.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react'
 import * as SelectPrimitive from '@radix-ui/react-select'
+import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '@/lib/utils'
 import { ArrowDownSLine, ArrowUpLine, CheckLine } from './icons-inline'
 import { getThemeFromDocument } from './theme-from-document'
@@ -12,21 +13,39 @@ const Select = SelectPrimitive.Root
 const SelectGroup = SelectPrimitive.Group
 const SelectValue = SelectPrimitive.Value
 
+const selectTriggerVariants = cva(
+  [
+    'flex w-full items-center justify-between gap-2 whitespace-nowrap rounded-lg border border-border-tertiary bg-bg-container text-text placeholder:text-muted-foreground transition-colors disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+    'focus:border-border-secondary focus-visible:border-border-secondary data-[state=open]:border-border-secondary',
+  ].join(' '),
+  {
+    variants: {
+      size: {
+        sm: 'h-7 px-2 py-0.5 text-xs',
+        md: 'h-9 px-3 py-2 text-sm',
+        lg: 'h-11 px-4 py-2.5 text-base',
+      },
+    },
+    defaultVariants: { size: 'md' },
+  }
+)
+
 export interface SelectTriggerProps
-  extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> {
+  extends Omit<React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>, 'size'>,
+    VariantProps<typeof selectTriggerVariants> {
   triggerIcon?: React.ReactNode
+  size?: 'sm' | 'md' | 'lg'
 }
 
 const SelectTrigger = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Trigger>,
   SelectTriggerProps
->(({ className, children, disabled, triggerIcon, ...props }, ref) => (
+>(({ className, children, disabled, triggerIcon, size = 'md', ...props }, ref) => (
   <SelectPrimitive.Trigger
     ref={ref}
     disabled={disabled}
     className={cn(
-      'flex h-9 w-full items-center justify-between gap-2 whitespace-nowrap rounded-lg border border-border-tertiary bg-bg-container px-3 py-2 text-sm text-text placeholder:text-muted-foreground transition-colors disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
-      'focus:border-border-secondary focus-visible:border-border-secondary data-[state=open]:border-border-secondary',
+      selectTriggerVariants({ size }),
       FOCUS_RESET,
       className
     )}
@@ -175,4 +194,5 @@ export {
   SelectSeparator,
   SelectScrollUpButton,
   SelectScrollDownButton,
+  selectTriggerVariants,
 }

package/cli/registry/basic/spinner.tsx

@@ -1,17 +1,32 @@
 import { forwardRef } from 'react'
 import type { HTMLAttributes } from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '@/lib/utils'
 import { LoaderLine } from './icons-inline'
 
-export interface SpinnerProps extends HTMLAttributes<HTMLSpanElement> {
-  className?: string
-}
+const spinnerVariants = cva('animate-spin', {
+  variants: {
+    size: {
+      xs: 'size-3',
+      sm: 'size-3.5',
+      md: 'size-4',
+      lg: 'size-5',
+    },
+  },
+  defaultVariants: { size: 'md' },
+})
+
+export interface SpinnerProps
+  extends HTMLAttributes<HTMLSpanElement>,
+    VariantProps<typeof spinnerVariants> {}
 
 export const Spinner = forwardRef<HTMLSpanElement, SpinnerProps>(
-  ({ className, ...props }, ref) => (
+  ({ className, size = 'md', ...props }, ref) => (
     <span ref={ref} role="status" aria-label="Loading" {...props}>
-      <LoaderLine className={cn('size-4 animate-spin', className)} />
+      <LoaderLine className={cn(spinnerVariants({ size }), className)} />
     </span>
   )
 )
 Spinner.displayName = 'Spinner'
+
+export { spinnerVariants }

package/cli/registry/basic/textarea.tsx

@@ -1,25 +1,43 @@
 import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '@/lib/utils'
 
-export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>
+const textareaVariants = cva(
+  [
+    'flex w-full rounded-lg border border-border-tertiary bg-bg-container text-text transition-colors',
+    'placeholder:text-text-tertiary',
+    'outline-none focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0',
+    'focus:border-border-secondary focus-visible:border-border-secondary',
+    'disabled:cursor-not-allowed disabled:opacity-50',
+    'aria-invalid:border-error aria-invalid:ring-0',
+  ].join(' '),
+  {
+    variants: {
+      size: {
+        sm: 'min-h-12 px-2 py-1 text-xs',
+        md: 'min-h-16 px-3 py-2 text-sm',
+        lg: 'min-h-20 px-4 py-2.5 text-base',
+      },
+    },
+    defaultVariants: { size: 'md' },
+  }
+)
+
+export interface TextareaProps
+  extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'>,
+    VariantProps<typeof textareaVariants> {
+  size?: 'sm' | 'md' | 'lg'
+}
 
 const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
-  ({ className, ...props }, ref) => (
+  ({ className, size = 'md', ...props }, ref) => (
     <textarea
       ref={ref}
-      className={cn(
-        'flex min-h-16 w-full rounded-lg border border-border-tertiary bg-bg-container px-3 py-2 text-sm text-text transition-colors',
-        'placeholder:text-text-tertiary',
-        'outline-none focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0',
-        'focus:border-border-secondary focus-visible:border-border-secondary',
-        'disabled:cursor-not-allowed disabled:opacity-50',
-        'aria-invalid:border-error aria-invalid:ring-0',
-        className,
-      )}
+      className={cn(textareaVariants({ size }), className)}
       {...props}
     />
   ),
 )
 Textarea.displayName = 'Textarea'
 
-export { Textarea }
+export { Textarea, textareaVariants }

package/cli/registry/basic/tooltip.tsx

@@ -2,6 +2,7 @@ import * as React from 'react'
 import { motion } from 'framer-motion'
 import * as TooltipPrimitive from '@radix-ui/react-tooltip'
 import { cn } from '@/lib/utils'
+import { MOTION_SCALE_IN } from '@/lib/motion'
 import { getThemeFromDocument } from './theme-from-document'
 
 const TooltipProvider = TooltipPrimitive.Provider
@@ -36,7 +37,7 @@ const TooltipContent = React.forwardRef<
           )}
           {...props}
         >
-          <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 0.15 }}>
+          <motion.div {...MOTION_SCALE_IN}>
             {children}
           </motion.div>
         </TooltipPrimitive.Content>

package/cli/registry/meta.json

@@ -31,11 +31,13 @@
       "chat/ask-user-part.tsx",
       "basic/collapsible-card.tsx",
       "basic/icons-inline.tsx",
-      "basic/button.tsx"
+      "basic/button.tsx",
+      "basic/spinner.tsx"
     ],
     "dependencies": [
       "class-variance-authority",
-      "framer-motion"
+      "framer-motion",
+      "radix-ui"
     ],
     "peerDependencies": [
       "react",
@@ -84,13 +86,15 @@
       "basic/collapsible-card.tsx",
       "basic/icons-inline.tsx",
       "basic/button.tsx",
+      "basic/spinner.tsx",
       "basic/select.tsx",
       "basic/theme-from-document.ts"
     ],
     "dependencies": [
       "@radix-ui/react-select",
       "class-variance-authority",
-      "framer-motion"
+      "framer-motion",
+      "radix-ui"
     ],
     "peerDependencies": [
       "react",
@@ -99,10 +103,13 @@
   },
   "button": {
     "files": [
-      "basic/button.tsx"
+      "basic/button.tsx",
+      "basic/spinner.tsx",
+      "basic/icons-inline.tsx"
     ],
     "dependencies": [
-      "class-variance-authority"
+      "class-variance-authority",
+      "radix-ui"
     ],
     "peerDependencies": [
       "react",
@@ -124,11 +131,14 @@
   "calendar": {
     "files": [
       "basic/calendar.tsx",
-      "basic/button.tsx"
+      "basic/button.tsx",
+      "basic/spinner.tsx",
+      "basic/icons-inline.tsx"
     ],
     "dependencies": [
       "class-variance-authority",
       "lucide-react",
+      "radix-ui",
       "react-day-picker"
     ],
     "peerDependencies": [
@@ -140,7 +150,9 @@
     "files": [
       "basic/card.tsx"
     ],
-    "dependencies": [],
+    "dependencies": [
+      "class-variance-authority"
+    ],
     "peerDependencies": [
       "react",
       "react-dom"
@@ -149,12 +161,15 @@
   "carousel": {
     "files": [
       "basic/carousel.tsx",
-      "basic/button.tsx"
+      "basic/button.tsx",
+      "basic/spinner.tsx",
+      "basic/icons-inline.tsx"
     ],
     "dependencies": [
       "class-variance-authority",
       "embla-carousel-react",
-      "lucide-react"
+      "lucide-react",
+      "radix-ui"
     ],
     "peerDependencies": [
       "react",
@@ -197,7 +212,8 @@
       "@radix-ui/react-alert-dialog",
       "@radix-ui/react-dropdown-menu",
       "class-variance-authority",
-      "framer-motion"
+      "framer-motion",
+      "radix-ui"
     ],
     "peerDependencies": [
       "react",
@@ -275,9 +291,23 @@
   "combobox": {
     "files": [
       "basic/combobox.tsx",
-      "basic/input.tsx"
+      "basic/button.tsx",
+      "basic/spinner.tsx",
+      "basic/icons-inline.tsx",
+      "basic/command.tsx",
+      "basic/dialog.tsx",
+      "basic/theme-from-document.ts",
+      "basic/popover.tsx"
+    ],
+    "dependencies": [
+      "@radix-ui/react-dialog",
+      "@radix-ui/react-popover",
+      "class-variance-authority",
+      "cmdk",
+      "framer-motion",
+      "lucide-react",
+      "radix-ui"
     ],
-    "dependencies": [],
     "peerDependencies": [
       "react",
       "react-dom"
@@ -347,9 +377,22 @@
   "date-picker": {
     "files": [
       "basic/date-picker.tsx",
-      "basic/input.tsx"
+      "basic/button.tsx",
+      "basic/spinner.tsx",
+      "basic/icons-inline.tsx",
+      "basic/calendar.tsx",
+      "basic/popover.tsx",
+      "basic/theme-from-document.ts"
+    ],
+    "dependencies": [
+      "@radix-ui/react-popover",
+      "class-variance-authority",
+      "date-fns",
+      "framer-motion",
+      "lucide-react",
+      "radix-ui",
+      "react-day-picker"
     ],
-    "dependencies": [],
     "peerDependencies": [
       "react",
       "react-dom"
@@ -472,11 +515,13 @@
       "chat/file-review-part.tsx",
       "basic/collapsible-card.tsx",
       "basic/icons-inline.tsx",
-      "basic/button.tsx"
+      "basic/button.tsx",
+      "basic/spinner.tsx"
     ],
     "dependencies": [
       "class-variance-authority",
-      "framer-motion"
+      "framer-motion",
+      "radix-ui"
     ],
     "peerDependencies": [
       "react",
@@ -521,15 +566,17 @@
     "files": [
       "chat/hint-banner.tsx",
       "basic/button.tsx",
-      "basic/dropdown-menu.tsx",
+      "basic/spinner.tsx",
       "basic/icons-inline.tsx",
+      "basic/dropdown-menu.tsx",
       "basic/theme-from-document.ts",
       "basic/scrollbar.tsx"
     ],
     "dependencies": [
       "@radix-ui/react-dropdown-menu",
       "class-variance-authority",
-      "framer-motion"
+      "framer-motion",
+      "radix-ui"
     ],
     "peerDependencies": [
       "react",
@@ -555,7 +602,8 @@
       "basic/icon-button.tsx"
     ],
     "dependencies": [
-      "class-variance-authority"
+      "class-variance-authority",
+      "radix-ui"
     ],
     "peerDependencies": [
       "react",
@@ -569,7 +617,8 @@
       "basic/icon-button.tsx"
     ],
     "dependencies": [
-      "class-variance-authority"
+      "class-variance-authority",
+      "radix-ui"
     ],
     "peerDependencies": [
       "react",
@@ -593,7 +642,9 @@
     "files": [
       "basic/input.tsx"
     ],
-    "dependencies": [],
+    "dependencies": [
+      "class-variance-authority"
+    ],
     "peerDependencies": [
       "react",
       "react-dom"
@@ -603,11 +654,14 @@
     "files": [
       "basic/input-group.tsx",
       "basic/button.tsx",
+      "basic/spinner.tsx",
+      "basic/icons-inline.tsx",
       "basic/input.tsx",
       "basic/textarea.tsx"
     ],
     "dependencies": [
-      "class-variance-authority"
+      "class-variance-authority",
+      "radix-ui"
     ],
     "peerDependencies": [
       "react",
@@ -699,12 +753,14 @@
       "basic/collapsible-card.tsx",
       "basic/icons-inline.tsx",
       "basic/button.tsx",
+      "basic/spinner.tsx",
       "basic/scrollbar.tsx",
       "lib/use-mermaid-render.ts"
     ],
     "dependencies": [
       "class-variance-authority",
-      "framer-motion"
+      "framer-motion",
+      "radix-ui"
     ],
     "peerDependencies": [
       "react",
@@ -764,11 +820,13 @@
     "files": [
       "chat/permission-card.tsx",
       "basic/button.tsx",
+      "basic/spinner.tsx",
       "basic/icons-inline.tsx",
       "basic/scrollbar.tsx"
     ],
     "dependencies": [
-      "class-variance-authority"
+      "class-variance-authority",
+      "radix-ui"
     ],
     "peerDependencies": [
       "react",
@@ -781,11 +839,13 @@
       "basic/collapsible-card.tsx",
       "basic/icons-inline.tsx",
       "basic/button.tsx",
+      "basic/spinner.tsx",
       "basic/icon-button.tsx"
     ],
     "dependencies": [
       "class-variance-authority",
-      "framer-motion"
+      "framer-motion",
+      "radix-ui"
     ],
     "peerDependencies": [
       "react",
@@ -830,7 +890,8 @@
     "dependencies": [
       "@radix-ui/react-tooltip",
       "class-variance-authority",
-      "framer-motion"
+      "framer-motion",
+      "radix-ui"
     ],
     "peerDependencies": [
       "react",
@@ -958,7 +1019,8 @@
       "basic/theme-from-document.ts"
     ],
     "dependencies": [
-      "@radix-ui/react-select"
+      "@radix-ui/react-select",
+      "class-variance-authority"
     ],
     "peerDependencies": [
       "react",
@@ -1068,7 +1130,9 @@
       "basic/spinner.tsx",
       "basic/icons-inline.tsx"
     ],
-    "dependencies": [],
+    "dependencies": [
+      "class-variance-authority"
+    ],
     "peerDependencies": [
       "react",
       "react-dom"
@@ -1164,7 +1228,8 @@
     ],
     "dependencies": [
       "class-variance-authority",
-      "framer-motion"
+      "framer-motion",
+      "radix-ui"
     ],
     "peerDependencies": [
       "react",
@@ -1175,7 +1240,9 @@
     "files": [
       "basic/textarea.tsx"
     ],
-    "dependencies": [],
+    "dependencies": [
+      "class-variance-authority"
+    ],
     "peerDependencies": [
       "react",
       "react-dom"

package/dist/registry/basic/alert-dialog.d.ts

@@ -17,7 +17,7 @@ declare const AlertDialogTrigger: React.ForwardRefExoticComponent<AlertDialogPri
 declare const AlertDialogPortal: React.FC<AlertDialogPrimitive.AlertDialogPortalProps>;
 declare const AlertDialogOverlay: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const contentVariants: (props?: ({
-    size?: "sm" | "default" | null | undefined;
+    size?: "default" | "sm" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface AlertDialogContentProps extends React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>, VariantProps<typeof contentVariants> {
     size?: 'default' | 'sm';

package/dist/registry/basic/avatar.d.ts

@@ -13,7 +13,7 @@ import * as React from 'react';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import { type VariantProps } from 'class-variance-authority';
 declare const avatarVariants: (props?: ({
-    size?: "sm" | "lg" | "default" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface AvatarProps extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>, VariantProps<typeof avatarVariants> {
 }

package/dist/registry/basic/button.d.ts

@@ -1,7 +1,7 @@
 import type { ButtonHTMLAttributes, ReactNode } from 'react';
 import { type VariantProps } from 'class-variance-authority';
 declare const buttonVariants: (props?: ({
-    variant?: "primary" | "secondary" | "tertiary" | "outline" | "ghost" | "text" | null | undefined;
+    variant?: "text" | "primary" | "secondary" | "tertiary" | "outline" | "ghost" | "destructive" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
     rounded?: "square" | "pill" | null | undefined;
     textOnly?: boolean | null | undefined;
@@ -11,6 +11,8 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, Va
     textButton?: boolean;
     prefixIcon?: ReactNode;
     suffixIcon?: ReactNode;
+    loading?: boolean;
+    asChild?: boolean;
 }
 declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
 export { Button, buttonVariants };

package/dist/registry/basic/card.d.ts

@@ -1,6 +1,6 @@
 /**
  * [WHO]: Card — surface container with Header / Title / Description / Content / Footer parts.
- * [FROM]: React + `@/lib/utils` cn.
+ * [FROM]: React + `@/lib/utils` cn + CVA.
  * [TO]: sparkdesign package consumers; output of CLI `add card` when registered.
  * [HERE]: registry/basic/card.tsx — Spark Design source; keep aligned with the main library.
  *
@@ -10,18 +10,23 @@
  * 3. Follow design tokens and explicit type exports.
  */
 import * as React from 'react';
-declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+import { type VariantProps } from 'class-variance-authority';
+declare const cardVariants: (props?: ({
+    variant?: "outline" | "ghost" | "filled" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardVariants> {
+}
+declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
 declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 declare const CardDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 declare const CardAction: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 declare const CardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-export type CardProps = React.HTMLAttributes<HTMLDivElement>;
 export type CardHeaderProps = React.HTMLAttributes<HTMLDivElement>;
 export type CardTitleProps = React.HTMLAttributes<HTMLDivElement>;
 export type CardDescriptionProps = React.HTMLAttributes<HTMLDivElement>;
 export type CardActionProps = React.HTMLAttributes<HTMLDivElement>;
 export type CardContentProps = React.HTMLAttributes<HTMLDivElement>;
 export type CardFooterProps = React.HTMLAttributes<HTMLDivElement>;
-export { Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter, };
+export { Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter, cardVariants, };