@idealyst/components 1.2.29 → 1.2.31

package/src/Alert/Alert.web.tsx

@@ -1,31 +1,33 @@
-import { isValidElement, forwardRef } from 'react';
+import { isValidElement, forwardRef, ElementType, useMemo } from 'react';
 import { getWebProps } from 'react-native-unistyles/web';
 import { alertStyles } from './Alert.styles';
 import type { AlertProps } from './types';
 import { IconSvg } from '../Icon/IconSvg/IconSvg.web';
 import { isIconName } from '../Icon/icon-resolver';
 import useMergeRefs from '../hooks/useMergeRefs';
+import type { IdealystElement } from '../utils/refTypes';
 
 // Default icons for each intent
-const defaultIcons: Record<string, string> = {
-  primary: 'information',
-  success: 'check-circle',
-  error: 'alert-circle',
-  warning: 'alert',
-  info: 'information',
-  neutral: 'record-circle',
+const defaultIcons: Record<string, React.ComponentType<any>> = {
+  primary: (props: any) => <IconSvg {...props} name="information" aria-label="information" />,
+  success: (props: any) => <IconSvg {...props} name="check-circle" aria-label="check-circle" />,
+  error: (props: any) => <IconSvg {...props} name="alert-circle" aria-label="alert-circle" />,
+  warning: (props: any) => <IconSvg {...props} name="alert" aria-label="alert" />,
+  info: (props: any) => <IconSvg {...props} name="information" aria-label="information" />,
+  neutral: (props: any) => <IconSvg {...props} name="record-circle" aria-label="record-circle" />,
 };
 
 /**
  * Notification banner for displaying important messages, warnings, or status updates.
  * Supports multiple intents, dismissibility, and custom actions.
  */
-const Alert = forwardRef<HTMLDivElement, AlertProps>(({
+const Alert = forwardRef<IdealystElement, AlertProps>(({
   title,
   message,
   children,
   intent = 'neutral',
   type = 'soft',
+  size = 'md',
   icon,
   showIcon = true,
   dismissible = false,
@@ -35,37 +37,39 @@ const Alert = forwardRef<HTMLDivElement, AlertProps>(({
   testID,
   id,
 }, ref) => {
-  // Compute dynamic styles with intent and type
-  const dynamicProps = { intent, type };
+  // Apply variants for size, intent, and type
+  alertStyles.useVariants({ size, intent, type });
+
+  // Compute dynamic styles with intent, type, and size
+  const dynamicProps = { intent, type, size };
   const containerProps = getWebProps([(alertStyles.container as any)(dynamicProps), style as any]);
   const iconContainerProps = getWebProps([(alertStyles.iconContainer as any)(dynamicProps)]);
-  const contentProps = getWebProps([(alertStyles.content as any)({})]);
+  const contentProps = getWebProps([(alertStyles.content as any)(dynamicProps)]);
   const titleProps = getWebProps([(alertStyles.title as any)(dynamicProps)]);
   const messageProps = getWebProps([(alertStyles.message as any)(dynamicProps)]);
-  const actionsProps = getWebProps([(alertStyles.actions as any)({})]);
+  const actionsProps = getWebProps([(alertStyles.actions as any)(dynamicProps)]);
   const closeButtonProps = getWebProps([(alertStyles.closeButton as any)(dynamicProps)]);
   const closeIconProps = getWebProps([(alertStyles.closeIcon as any)(dynamicProps)]);
 
-  const displayIcon = icon !== undefined ? icon : (showIcon ? defaultIcons[intent] : null);
-
-  // Helper to render icon
-  const renderIcon = (iconProp: typeof displayIcon) => {
-    if (!iconProp) return null;
-
-    if (isIconName(iconProp)) {
-      return (
-        <IconSvg
-          name={iconProp}
+  const Icon = useMemo(() => {
+    if (!showIcon) return null;
+    if (!icon) {
+      const Element = defaultIcons[intent];
+      if (Element) {
+        return <Element {...iconContainerProps} />;
+      }
+      return null
+    }  else if (typeof icon === 'string') {
+      return <IconSvg
+          name={icon}
           {...iconContainerProps}
-          aria-label={iconProp}
+          aria-label={icon}
         />
-      );
-    } else if (isValidElement(iconProp)) {
-      return iconProp;
+    } else if (isValidElement(icon)) {
+      return icon;
     }
-
     return null;
-  };
+  }, [icon, showIcon, intent]);
 
   const mergedRef = useMergeRefs(ref, containerProps.ref);
 
@@ -77,7 +81,7 @@ const Alert = forwardRef<HTMLDivElement, AlertProps>(({
       data-testid={testID}
       role="alert"
     >
-      {displayIcon && renderIcon(displayIcon)}
+      {Icon}
 
       <div {...contentProps}>
         {title && (

package/src/Alert/types.ts

@@ -1,29 +1,79 @@
 import type { StyleProp, ViewStyle } from 'react-native';
-import type { Intent } from '@idealyst/theme';
+import type { Intent, Size } from '@idealyst/theme';
 import { BaseProps } from '../utils/viewStyleProps';
 
 // Component-specific type aliases for future extensibility
 export type AlertIntentVariant = Intent;
-export type AlertType= 'filled' | 'outlined' | 'soft';
+export type AlertSizeVariant = Size;
+export type AlertType = 'filled' | 'outlined' | 'soft';
 
 /**
  * Feedback message component for displaying important information to users.
- * Supports multiple intent colors, dismissible behavior, and custom actions.
+ * Supports multiple intent colors, sizes, dismissible behavior, and custom actions.
  */
 export interface AlertProps extends BaseProps {
   /**
    * The title of the alert
    */
   title?: string;
+
+  /**
+   * The message content of the alert
+   */
   message?: string;
+
+  /**
+   * Custom content to display in the alert
+   */
   children?: React.ReactNode;
+
+  /**
+   * The intent/color scheme of the alert
+   */
   intent?: AlertIntentVariant;
+
+  /**
+   * The visual style type of the alert
+   */
   type?: AlertType;
+
+  /**
+   * The size of the alert
+   */
+  size?: AlertSizeVariant;
+
+  /**
+   * Custom icon to display. Pass `null` to hide icon.
+   */
   icon?: React.ReactNode;
+
+  /**
+   * Whether to show the default intent icon
+   */
   showIcon?: boolean;
+
+  /**
+   * Whether the alert can be dismissed
+   */
   dismissible?: boolean;
+
+  /**
+   * Called when the alert is dismissed
+   */
   onDismiss?: () => void;
+
+  /**
+   * Action buttons to display at the bottom of the alert
+   */
   actions?: React.ReactNode;
+
+  /**
+   * Additional styles
+   */
   style?: StyleProp<ViewStyle>;
+
+  /**
+   * Test ID for testing
+   */
   testID?: string;
 }

package/src/Avatar/Avatar.native.tsx

@@ -3,8 +3,9 @@ import { View, Text, Image } from 'react-native';
 import { AvatarProps } from './types';
 import { avatarStyles } from './Avatar.styles';
 import { getNativeAccessibilityProps } from '../utils/accessibility';
+import type { IdealystElement } from '../utils/refTypes';
 
-const Avatar = forwardRef<View, AvatarProps>(({
+const Avatar = forwardRef<IdealystElement, AvatarProps>(({
   src,
   alt,
   fallback,
@@ -45,7 +46,7 @@ const Avatar = forwardRef<View, AvatarProps>(({
   const fallbackStyle = (avatarStyles.fallback as any)({});
 
   return (
-    <View ref={ref} nativeID={id} style={[avatarStyle, style]} testID={testID} {...nativeA11yProps}>
+    <View ref={ref as any} nativeID={id} style={[avatarStyle, style]} testID={testID} {...nativeA11yProps}>
       {src && !hasError ? (
         <Image
           source={typeof src === 'string' ? { uri: src } : src}

package/src/Avatar/Avatar.web.tsx

@@ -4,12 +4,13 @@ import { AvatarProps } from './types';
 import { avatarStyles } from './Avatar.styles';
 import useMergeRefs from '../hooks/useMergeRefs';
 import { getWebAriaProps } from '../utils/accessibility';
+import type { IdealystElement } from '../utils/refTypes';
 
 /**
  * User or entity representation with image support and fallback initials.
  * Available in circle or square shapes with multiple sizes.
  */
-const Avatar = forwardRef<HTMLDivElement, AvatarProps>(({
+const Avatar = forwardRef<IdealystElement, AvatarProps>(({
   src,
   alt,
   fallback,

package/src/Avatar/types.ts

@@ -5,7 +5,7 @@ import { AccessibilityProps } from '../utils/accessibility';
 
 // Component-specific type aliases for future extensibility
 export type AvatarColorVariant = Color;
-export type AvatarSizeVariant = 'sm' | 'md' | 'lg' | 'xl';
+export type AvatarSizeVariant = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export type AvatarShapeVariant = 'circle' | 'square';
 
 /**

package/src/Badge/Badge.native.tsx

@@ -4,25 +4,37 @@ import MaterialDesignIcons from '@react-native-vector-icons/material-design-icon
 import { BadgeProps } from './types';
 import { badgeStyles } from './Badge.styles';
 import { isIconName } from '../Icon/icon-resolver';
+import type { IdealystElement } from '../utils/refTypes';
 
-const Badge = forwardRef<View, BadgeProps>(({
+/**
+ * Small status indicator for counts, labels, or notifications.
+ * Available in filled, outlined, and dot variants with customizable colors.
+ *
+ * Supports both `intent` (semantic colors) and `color` (raw palette colors).
+ * If both are provided, `intent` takes precedence.
+ */
+const Badge = forwardRef<IdealystElement, BadgeProps>(({
   children,
   icon,
   size = 'md',
   type = 'filled',
-  color = 'blue',
+  intent,
+  color,
   style,
   testID,
   id,
 }, ref) => {
+  // Default to 'primary' intent if neither intent nor color is provided
+  const effectiveColor = intent ? undefined : (color ?? 'primary');
+
   badgeStyles.useVariants({
     size,
     type,
   });
 
-  // Call dynamic styles with color variant
-  const badgeStyle = (badgeStyles.badge as any)({ color });
-  const textStyle = (badgeStyles.text as any)({ color });
+  // Call dynamic styles with intent/color - intent takes precedence
+  const badgeStyle = (badgeStyles.badge as any)({ intent, color: effectiveColor });
+  const textStyle = (badgeStyles.text as any)({ intent, color: effectiveColor });
 
   // Map badge size to icon size
   const iconSize = size === 'sm' ? 12 : size === 'md' ? 14 : 16;
@@ -62,7 +74,7 @@ const Badge = forwardRef<View, BadgeProps>(({
 
   return (
     <View
-      ref={ref}
+      ref={ref as any}
       nativeID={id}
       style={[badgeStyle, style]}
       testID={testID}

package/src/Badge/Badge.styles.tsx

@@ -1,9 +1,12 @@
 /**
  * Badge styles using defineStyle with $iterator expansion.
+ *
+ * Supports both `intent` (semantic colors) and `color` (raw palette colors).
+ * If both are provided, `intent` takes precedence.
  */
 import { StyleSheet } from 'react-native-unistyles';
 import { defineStyle, ThemeStyleWrapper, getColorFromString } from '@idealyst/theme';
-import type { Theme as BaseTheme, Size, Color } from '@idealyst/theme';
+import type { Theme as BaseTheme, Size, Color, Intent } from '@idealyst/theme';
 
 // Required: Unistyles must see StyleSheet usage in original source to process this file
 void StyleSheet;
@@ -16,15 +19,29 @@ type BadgeType = 'filled' | 'outlined' | 'dot';
 export type BadgeDynamicProps = {
     size?: Size;
     type?: BadgeType;
+    intent?: Intent;
     color?: Color;
 };
 
+/**
+ * Helper to resolve badge color from intent or color prop.
+ * Intent takes precedence over color.
+ */
+const resolveBadgeColor = (theme: Theme, intent?: Intent, color?: Color): string => {
+    if (intent) {
+        // Use intent's primary color
+        return (theme as unknown as BaseTheme).intents[intent].primary;
+    }
+    // Fall back to color prop or default to primary intent
+    return getColorFromString(theme as unknown as BaseTheme, color ?? 'primary');
+};
+
 /**
  * Badge styles with color-based type variants.
  */
 export const badgeStyles = defineStyle('Badge', (theme: Theme) => ({
-    badge: ({ color = 'primary', type = 'filled' }: BadgeDynamicProps) => {
-        const colorValue = getColorFromString(theme as unknown as BaseTheme, color);
+    badge: ({ intent, color, type = 'filled' }: BadgeDynamicProps) => {
+        const colorValue = resolveBadgeColor(theme, intent, color);
 
         const typeStyles = type === 'filled'
             ? { borderWidth: 0, backgroundColor: colorValue }
@@ -56,8 +73,8 @@ export const badgeStyles = defineStyle('Badge', (theme: Theme) => ({
         } as const;
     },
 
-    text: ({ color = 'primary', type = 'filled' }: BadgeDynamicProps) => {
-        const colorValue = getColorFromString(theme as unknown as BaseTheme, color);
+    text: ({ intent, color, type = 'filled' }: BadgeDynamicProps) => {
+        const colorValue = resolveBadgeColor(theme, intent, color);
 
         const textColor = type === 'filled'
             ? theme.colors.text.inverse

package/src/Badge/Badge.web.tsx

@@ -4,18 +4,23 @@ import { BadgeProps } from './types';
 import { badgeStyles } from './Badge.styles';
 import { IconSvg } from '../Icon/IconSvg/IconSvg.web';
 import useMergeRefs from '../hooks/useMergeRefs';
+import type { IdealystElement } from '../utils/refTypes';
 
 /**
  * Small status indicator for counts, labels, or notifications.
  * Available in filled, outlined, and dot variants with customizable colors.
+ *
+ * Supports both `intent` (semantic colors) and `color` (raw palette colors).
+ * If both are provided, `intent` takes precedence.
  */
-const Badge = forwardRef<HTMLSpanElement, BadgeProps>((props, ref) => {
+const Badge = forwardRef<IdealystElement, BadgeProps>((props, ref) => {
   const {
     children,
     size = 'md',
     type: typeProp,
     variant,
-    color = 'blue',
+    intent,
+    color,
     icon,
     style,
     testID,
@@ -25,14 +30,17 @@ const Badge = forwardRef<HTMLSpanElement, BadgeProps>((props, ref) => {
   // variant is an alias for type - variant takes precedence if both are set
   const type = variant ?? typeProp ?? 'filled';
 
+  // Default to 'primary' intent if neither intent nor color is provided
+  const effectiveColor = intent ? undefined : (color ?? 'primary');
+
   badgeStyles.useVariants({
     size,
     type,
   });
 
-  const badgeStyle = (badgeStyles.badge as any)({ color });
+  const badgeStyle = (badgeStyles.badge as any)({ intent, color: effectiveColor });
   const contentStyle = badgeStyles.content as any;
-  const textStyle = (badgeStyles.text as any)({ color });
+  const textStyle = (badgeStyles.text as any)({ intent, color: effectiveColor });
 
   const badgeProps = getWebProps([badgeStyle]);
   const contentProps = getWebProps([contentStyle]);

package/src/Badge/types.ts

@@ -1,11 +1,12 @@
 import type { CSSProperties, ReactNode } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import type { IconName } from '../Icon/icon-types';
-import { Color, Size } from '@idealyst/theme';
+import { Color, Intent, Size } from '@idealyst/theme';
 import { BaseProps } from '../utils/viewStyleProps';
 
 // Component-specific type aliases for future extensibility
 export type BadgeColorVariant = Color;
+export type BadgeIntentVariant = Intent;
 export type BadgeSizeVariant = Size;
 export type BadgeType = 'filled' | 'outlined' | 'dot';
 
@@ -35,7 +36,18 @@ export interface BadgeProps extends BaseProps {
   variant?: BadgeType;
 
   /**
-   * The color scheme of the badge
+   * The semantic color scheme of the badge.
+   * Use for status-based coloring (success, danger, warning, etc.).
+   *
+   * **Note:** Only one of `intent` or `color` should be set. If both are provided, `intent` takes precedence.
+   */
+  intent?: BadgeIntentVariant;
+
+  /**
+   * The raw palette color of the badge.
+   * Use for custom coloring that doesn't map to a semantic intent.
+   *
+   * **Note:** Only one of `intent` or `color` should be set. If both are provided, `intent` takes precedence.
    */
   color?: BadgeColorVariant;
 

package/src/Breadcrumb/Breadcrumb.native.tsx

@@ -6,6 +6,7 @@ import Icon from '../Icon';
 import type { IconName } from '../Icon/icon-types';
 import Menu from '../Menu/Menu.native';
 import type { MenuItem } from '../Menu/types';
+import type { IdealystElement } from '../utils/refTypes';
 
 interface BreadcrumbItemProps {
   item: BreadcrumbItemType;
@@ -113,7 +114,7 @@ const BreadcrumbEllipsis: React.FC<BreadcrumbEllipsisProps> = ({ size, intent })
   );
 };
 
-const Breadcrumb = forwardRef<View, BreadcrumbProps>(({
+const Breadcrumb = forwardRef<IdealystElement, BreadcrumbProps>(({
   items,
   separator = '/',
   maxItems,
@@ -169,7 +170,7 @@ const Breadcrumb = forwardRef<View, BreadcrumbProps>(({
 
   return (
     <View
-      ref={ref}
+      ref={ref as any}
       nativeID={id}
       style={[containerStyle, style]}
       testID={testID}

package/src/Button/Button.native.tsx

@@ -1,16 +1,17 @@
-import { ComponentRef, forwardRef, useMemo } from 'react';
+import { forwardRef, useMemo } from 'react';
 import { ActivityIndicator, StyleSheet as RNStyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import MaterialDesignIcons from '@react-native-vector-icons/material-design-icons';
 import Svg, { Defs, LinearGradient, Stop, Rect } from 'react-native-svg';
 import { buttonStyles } from './Button.styles';
 import { ButtonProps } from './types';
 import { getNativeInteractiveAccessibilityProps } from '../utils/accessibility';
+import type { IdealystElement } from '../utils/refTypes';
 
-const Button = forwardRef<ComponentRef<typeof TouchableOpacity>, ButtonProps>((props, ref) => {
+const Button = forwardRef<IdealystElement, ButtonProps>((props, ref) => {
   const {
     children,
-    title,
     onPress,
+    onClick,
     disabled = false,
     loading = false,
     type = 'contained',
@@ -38,6 +39,16 @@ const Button = forwardRef<ComponentRef<typeof TouchableOpacity>, ButtonProps>((p
   // Button is effectively disabled when loading
   const isDisabled = disabled || loading;
 
+  // Determine the handler to use - onPress takes precedence
+  const pressHandler = onPress ?? onClick;
+
+  // Warn about deprecated onClick usage in development
+  if (__DEV__ && onClick && !onPress) {
+    console.warn(
+      'Button: onClick prop is deprecated. Use onPress instead for cross-platform compatibility.'
+    );
+  }
+
   // Apply variants for size, disabled, gradient
   buttonStyles.useVariants({
     size,
@@ -67,8 +78,7 @@ const Button = forwardRef<ComponentRef<typeof TouchableOpacity>, ButtonProps>((p
   const iconSize = iconSizeMap[size] ?? 16;
 
 
-  // Use children if available, otherwise use title
-  const buttonContent = children || title;
+  const buttonContent = children;
 
   // Determine if we need to wrap content in icon container
   const hasIcons = leftIcon || rightIcon;
@@ -159,7 +169,7 @@ const Button = forwardRef<ComponentRef<typeof TouchableOpacity>, ButtonProps>((p
   // TouchableOpacity types don't include nativeID but it's a valid RN prop
   const touchableProps = {
     ref,
-    onPress,
+    onPress: pressHandler,
     disabled: isDisabled,
     testID,
     nativeID: id,

package/src/Button/Button.styles.tsx

@@ -70,12 +70,12 @@ export const buttonStyles = defineStyle('Button', (theme: Theme) => ({
             // $iterator expands for each button size
             type: {
                 contained: {
-                    backgroundColor: theme.intents[intent].primary,
+                    backgroundColor: theme.$intents.primary,
                     borderColor: 'transparent',
                 },
                 outlined: {
                     backgroundColor: 'transparent',
-                    borderColor: theme.intents[intent].primary,
+                    borderColor: theme.$intents.primary,
                 },
                 text: {
                     backgroundColor: 'transparent',

package/src/Button/Button.web.tsx

@@ -5,20 +5,20 @@ import { buttonStyles } from './Button.styles';
 import { IconSvg } from '../Icon/IconSvg/IconSvg.web';
 import useMergeRefs from '../hooks/useMergeRefs';
 import { getWebInteractiveAriaProps, generateAccessibilityId } from '../utils/accessibility';
+import type { IdealystElement } from '../utils/refTypes';
 
 /**
  * Interactive button component with multiple visual variants, sizes, and icon support.
  * Supports contained, outlined, and text styles with customizable intent colors.
  */
-const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
+const Button = forwardRef<IdealystElement, ButtonProps>((props, ref) => {
   const {
-    title,
     children,
     onPress,
+    onClick,
     disabled = false,
     loading = false,
-    type: typeProp,
-    variant,
+    type = 'contained',
     intent = 'primary',
     size = 'md',
     gradient,
@@ -42,9 +42,6 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
     accessibilityHasPopup,
   } = props;
 
-  // variant is an alias for type - variant takes precedence if both are set
-  const type = variant ?? typeProp ?? 'contained';
-
   // Button is effectively disabled when loading
   const isDisabled = disabled || loading;
 
@@ -55,13 +52,23 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
     gradient,
   });
 
+  // Determine the handler to use - onPress takes precedence
+  const pressHandler = onPress ?? onClick;
+
+  // Warn about deprecated onClick usage in development
+  if (process.env.NODE_ENV !== 'production' && onClick && !onPress) {
+    console.warn(
+      'Button: onClick prop is deprecated. Use onPress instead for cross-platform compatibility.'
+    );
+  }
+
   const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
-    // Only stop propagation if we have an onPress handler
+    // Only stop propagation if we have a handler
     // Otherwise, let clicks bubble up to parent handlers (e.g., Menu triggers)
-    if (!isDisabled && onPress) {
+    if (!isDisabled && pressHandler) {
       e.stopPropagation();
-      onPress();
+      pressHandler();
     }
   };
 
@@ -71,8 +78,7 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
   // Generate ARIA props - especially important for icon-only buttons
   const ariaProps = useMemo(() => {
     // For icon-only buttons, accessibilityLabel is critical
-    const buttonContent = children || title;
-    const isIconOnly = !buttonContent && (leftIcon || rightIcon);
+    const isIconOnly = !children && (leftIcon || rightIcon);
     const computedLabel = accessibilityLabel ?? (isIconOnly && typeof leftIcon === 'string' ? leftIcon : undefined);
 
     return getWebInteractiveAriaProps({
@@ -92,7 +98,6 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
   }, [
     accessibilityLabel,
     children,
-    title,
     leftIcon,
     rightIcon,
     accessibilityHint,
@@ -149,8 +154,7 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
     return null;
   };
 
-  // Use children if available, otherwise use title
-  const buttonContent = children || title;
+  const buttonContent = children;
 
   // Determine if we need to wrap content in icon container
   const hasIcons = leftIcon || rightIcon;

package/src/Button/types.ts

@@ -24,19 +24,20 @@ export type ButtonGradient = 'darken' | 'lighten';
  */
 export interface ButtonProps extends BaseProps, InteractiveAccessibilityProps {
   /**
-   * The text or content to display inside the button
+   * The content to display inside the button
    */
   children?: ReactNode;
 
   /**
-   * The text title to display inside the button (for web)
+   * Called when the button is pressed
    */
-  title?: string;
+  onPress?: () => void;
 
   /**
-   * Called when the button is pressed
+   * @deprecated Use `onPress` instead. This prop exists for web compatibility only.
+   * Using onClick will log a deprecation warning in development.
    */
-  onPress?: () => void;
+  onClick?: () => void;
 
   /**
    * Whether the button is disabled
@@ -48,11 +49,6 @@ export interface ButtonProps extends BaseProps, InteractiveAccessibilityProps {
    */
   type?: ButtonType;
 
-  /**
-   * Alias for type - the visual style variant of the button
-   */
-  variant?: ButtonType;
-
   /**
    * The intent/color scheme of the button
    */