refactor: use VariantProps instead of manually defining props

packages/raystack/components/separator/separator.tsx

@@ -1,5 +1,5 @@
 import { Separator as SeparatorPrimitive } from '@base-ui/react/separator';
-import { cva } from 'class-variance-authority';
+import { cva, type VariantProps } from 'class-variance-authority';
 
 import styles from './separator.module.css';
 
@@ -22,10 +22,7 @@ const separator = cva(styles.separator, {
   }
 });
 
-interface SeparatorProps extends SeparatorPrimitive.Props {
-  size?: 'small' | 'half' | 'full';
-  color?: 'primary' | 'secondary' | 'tertiary';
-}
+type SeparatorProps = SeparatorPrimitive.Props & VariantProps<typeof separator>;
 
 export function Separator({
   className,

packages/raystack/components/tabs/tabs.tsx

@@ -1,18 +1,8 @@
 import { Tabs as TabsPrimitive } from '@base-ui/react';
-import { cva, cx } from 'class-variance-authority';
+import { cva, cx, type VariantProps } from 'class-variance-authority';
 import { ReactNode } from 'react';
 import styles from './tabs.module.css';
 
-type TabsVariant = 'segmented' | 'standalone' | 'plain';
-type TabsSize = 'small' | 'medium' | 'large';
-
-type TabsRootProps = TabsPrimitive.Root.Props & {
-  /** Visual variant for how tabs are rendered. */
-  variant?: TabsVariant;
-  /** Size variant for all tab triggers. */
-  size?: TabsSize;
-};
-
 const tabsRoot = cva(styles.root, {
   variants: {
     variant: {
@@ -32,6 +22,8 @@ const tabsRoot = cva(styles.root, {
   }
 });
 
+type TabsRootProps = TabsPrimitive.Root.Props & VariantProps<typeof tabsRoot>;
+
 function TabsRoot({ className, variant, size, ...props }: TabsRootProps) {
   return (
     <TabsPrimitive.Root

packages/raystack/components/text-area/text-area.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { InfoCircledIcon } from '@radix-ui/react-icons';
-import { cva, cx } from 'class-variance-authority';
+import { cva, cx, type VariantProps } from 'class-variance-authority';
 import { ChangeEvent, ComponentProps } from 'react';
 import { Tooltip } from '../tooltip';
 
@@ -15,7 +15,9 @@ const textArea = cva(styles.textarea, {
   }
 });
 
-export interface TextAreaProps extends ComponentProps<'textarea'> {
+export interface TextAreaProps
+  extends ComponentProps<'textarea'>,
+    VariantProps<typeof textArea> {
   label?: string;
   required?: boolean;
   infoTooltip?: string;