@idealyst/components 1.1.4 → 1.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/components",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "description": "Shared component library for React and React Native",
   "documentation": "https://github.com/IdealystIO/idealyst-framework/tree/main/packages/components#readme",
   "readme": "README.md",
@@ -39,6 +39,11 @@
       "import": "./src/examples/index.ts",
       "require": "./src/examples/index.ts",
       "types": "./src/examples/index.ts"
+    },
+    "./internal": {
+      "import": "./src/internal/index.ts",
+      "require": "./src/internal/index.ts",
+      "types": "./src/internal/index.ts"
     }
   },
   "scripts": {
@@ -46,7 +51,7 @@
     "publish:npm": "npm publish"
   },
   "peerDependencies": {
-    "@idealyst/theme": "^1.1.4",
+    "@idealyst/theme": "^1.1.5",
     "@mdi/js": ">=7.0.0",
     "@mdi/react": ">=1.0.0",
     "@react-native-vector-icons/common": ">=12.0.0",
@@ -96,7 +101,7 @@
     }
   },
   "devDependencies": {
-    "@idealyst/theme": "^1.1.4",
+    "@idealyst/theme": "^1.1.5",
     "@mdi/react": "^1.6.1",
     "@types/react": "^19.1.0",
     "react": "^19.1.0",

package/src/Accordion/Accordion.native.tsx

@@ -1,10 +1,11 @@
-import React, { useState, forwardRef, useEffect } from 'react';
+import React, { useState, forwardRef, useEffect, useMemo } from 'react';
 import { View, TouchableOpacity, LayoutChangeEvent } from 'react-native';
 import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing } from 'react-native-reanimated';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import { accordionStyles } from './Accordion.styles';
 import Text from '../Text';
 import type { AccordionProps, AccordionItem as AccordionItemType } from './types';
+import { getNativeAccessibilityProps } from '../utils/accessibility';
 
 interface AccordionItemProps {
   item: AccordionItemType;
@@ -79,6 +80,9 @@ const AccordionItem: React.FC<AccordionItemProps> = ({
         onPress={onToggle}
         disabled={item.disabled}
         activeOpacity={0.7}
+        accessibilityRole="button"
+        accessibilityLabel={item.title}
+        accessibilityState={{ expanded: isExpanded, disabled: item.disabled }}
       >
         <View style={accordionStyles.title}>
           <Text style={accordionStyles.header}>
@@ -143,9 +147,26 @@ const Accordion = forwardRef<View, AccordionProps>(({
   style,
   testID,
   id,
+  // Accessibility props
+  accessibilityLabel,
+  accessibilityHint,
+  accessibilityDisabled,
+  accessibilityHidden,
+  accessibilityRole,
 }, ref) => {
   const [expandedItems, setExpandedItems] = useState<string[]>(defaultExpanded);
 
+  // Generate native accessibility props
+  const nativeA11yProps = useMemo(() => {
+    return getNativeAccessibilityProps({
+      accessibilityLabel,
+      accessibilityHint,
+      accessibilityDisabled,
+      accessibilityHidden,
+      accessibilityRole: accessibilityRole ?? 'none',
+    });
+  }, [accessibilityLabel, accessibilityHint, accessibilityDisabled, accessibilityHidden, accessibilityRole]);
+
   // Apply variants
   accordionStyles.useVariants({
     type,
@@ -176,7 +197,7 @@ const Accordion = forwardRef<View, AccordionProps>(({
   };
 
   return (
-    <View ref={ref} nativeID={id} style={[accordionStyles.container, style]} testID={testID}>
+    <View ref={ref} nativeID={id} style={[accordionStyles.container, style]} testID={testID} {...nativeA11yProps}>
       {items.map((item, index) => (
         <AccordionItem
           key={item.id}

package/src/Accordion/Accordion.web.tsx

@@ -1,9 +1,10 @@
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef, useEffect, useMemo, useCallback } from 'react';
 import { getWebProps } from 'react-native-unistyles/web';
 import { accordionStyles } from './Accordion.styles';
 import type { AccordionProps, AccordionItem as AccordionItemType } from './types';
 import { IconSvg } from '../Icon/IconSvg/IconSvg.web';
 import { resolveIconPath } from '../Icon/icon-resolver';
+import { getWebAriaProps, generateAccessibilityId, ACCORDION_KEYS } from '../utils/accessibility';
 
 interface AccordionItemProps {
   item: AccordionItemType;
@@ -12,6 +13,9 @@ interface AccordionItemProps {
   onToggle: () => void;
   size: AccordionProps['size'];
   testID?: string;
+  headerId: string;
+  panelId: string;
+  onKeyDown: (e: React.KeyboardEvent, itemId: string) => void;
 }
 
 const AccordionItem: React.FC<AccordionItemProps> = ({
@@ -21,6 +25,9 @@ const AccordionItem: React.FC<AccordionItemProps> = ({
   type,
   size,
   testID,
+  headerId,
+  panelId,
+  onKeyDown,
 }) => {
   const contentInnerRef = useRef<HTMLDivElement>(null);
   const [contentHeight, setContentHeight] = useState(0);
@@ -61,9 +68,12 @@ const AccordionItem: React.FC<AccordionItemProps> = ({
     >
       <button
         {...headerProps}
+        id={headerId}
         onClick={onToggle}
+        onKeyDown={(e) => onKeyDown(e, item.id)}
         disabled={item.disabled}
         aria-expanded={isExpanded}
+        aria-controls={panelId}
         aria-disabled={item.disabled}
       >
         <span {...titleProps}>
@@ -80,6 +90,9 @@ const AccordionItem: React.FC<AccordionItemProps> = ({
 
       <div
         {...contentProps}
+        id={panelId}
+        role="region"
+        aria-labelledby={headerId}
         aria-hidden={!isExpanded}
       >
         <div ref={contentInnerRef}>
@@ -109,8 +122,63 @@ const Accordion: React.FC<AccordionProps> = ({
   style,
   testID,
   id,
+  // Accessibility props
+  accessibilityLabel,
+  accessibilityHint,
+  accessibilityDisabled,
+  accessibilityHidden,
+  accessibilityRole,
 }) => {
   const [expandedItems, setExpandedItems] = useState<string[]>(defaultExpanded);
+  const headerRefs = useRef<Map<string, HTMLButtonElement>>(new Map());
+
+  // Generate unique ID for the accordion
+  const accordionId = useMemo(() => id || generateAccessibilityId('accordion'), [id]);
+
+  // Generate header and panel IDs for each item
+  const getHeaderId = useCallback((itemId: string) => `${accordionId}-header-${itemId}`, [accordionId]);
+  const getPanelId = useCallback((itemId: string) => `${accordionId}-panel-${itemId}`, [accordionId]);
+
+  // Get enabled items for keyboard navigation
+  const enabledItems = useMemo(() => items.filter(item => !item.disabled), [items]);
+
+  // Keyboard navigation handler
+  const handleKeyDown = useCallback((e: React.KeyboardEvent, itemId: string) => {
+    const key = e.key;
+    const currentIndex = enabledItems.findIndex(item => item.id === itemId);
+    let nextIndex = -1;
+
+    if (ACCORDION_KEYS.next.includes(key)) {
+      e.preventDefault();
+      nextIndex = currentIndex < enabledItems.length - 1 ? currentIndex + 1 : 0;
+    } else if (ACCORDION_KEYS.prev.includes(key)) {
+      e.preventDefault();
+      nextIndex = currentIndex > 0 ? currentIndex - 1 : enabledItems.length - 1;
+    } else if (ACCORDION_KEYS.first.includes(key)) {
+      e.preventDefault();
+      nextIndex = 0;
+    } else if (ACCORDION_KEYS.last.includes(key)) {
+      e.preventDefault();
+      nextIndex = enabledItems.length - 1;
+    }
+
+    if (nextIndex >= 0) {
+      const nextItem = enabledItems[nextIndex];
+      const headerButton = headerRefs.current.get(nextItem.id);
+      headerButton?.focus();
+    }
+  }, [enabledItems]);
+
+  // Generate ARIA props
+  const ariaProps = useMemo(() => {
+    return getWebAriaProps({
+      accessibilityLabel,
+      accessibilityHint,
+      accessibilityDisabled,
+      accessibilityHidden,
+      accessibilityRole: accessibilityRole ?? 'group',
+    });
+  }, [accessibilityLabel, accessibilityHint, accessibilityDisabled, accessibilityHidden, accessibilityRole]);
 
   // Apply variants
   accordionStyles.useVariants({
@@ -144,7 +212,7 @@ const Accordion: React.FC<AccordionProps> = ({
   };
 
   return (
-    <div {...containerProps} id={id} data-testid={testID}>
+    <div {...containerProps} {...ariaProps} id={accordionId} data-testid={testID}>
       {items.map((item) => (
         <AccordionItem
           key={item.id}
@@ -154,6 +222,9 @@ const Accordion: React.FC<AccordionProps> = ({
           onToggle={() => toggleItem(item.id, item.disabled)}
           size={size}
           testID={`${testID}-item-${item.id}`}
+          headerId={getHeaderId(item.id)}
+          panelId={getPanelId(item.id)}
+          onKeyDown={handleKeyDown}
         />
       ))}
     </div>

package/src/Accordion/types.ts

@@ -1,6 +1,7 @@
 import { Size } from '@idealyst/theme';
 import type { StyleProp, ViewStyle } from 'react-native';
 import { ContainerStyleProps } from '../utils/viewStyleProps';
+import { AccessibilityProps } from '../utils/accessibility';
 
 // Component-specific type aliases for future extensibility
 export type AccordionType = 'standard' | 'separated' | 'bordered';
@@ -13,7 +14,7 @@ export interface AccordionItem {
   disabled?: boolean;
 }
 
-export interface AccordionProps extends ContainerStyleProps {
+export interface AccordionProps extends ContainerStyleProps, AccessibilityProps {
   items: AccordionItem[];
   allowMultiple?: boolean;
   defaultExpanded?: string[];

package/src/ActivityIndicator/ActivityIndicator.native.tsx

@@ -1,7 +1,8 @@
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useMemo } from 'react';
 import { ActivityIndicator as RNActivityIndicator, View } from 'react-native';
 import { ActivityIndicatorProps } from './types';
 import { activityIndicatorStyles } from './ActivityIndicator.styles';
+import { getNativeLiveRegionAccessibilityProps } from '../utils/accessibility';
 
 const ActivityIndicator = forwardRef<View, ActivityIndicatorProps>(({
   animating = true,
@@ -12,7 +13,19 @@ const ActivityIndicator = forwardRef<View, ActivityIndicatorProps>(({
   testID,
   hidesWhenStopped = true,
   id,
+  // Accessibility props
+  accessibilityLabel,
+  accessibilityLiveRegion,
+  accessibilityBusy,
 }, ref) => {
+  // Generate native accessibility props
+  const nativeA11yProps = useMemo(() => {
+    return getNativeLiveRegionAccessibilityProps({
+      accessibilityLabel: accessibilityLabel ?? 'Loading',
+      accessibilityLiveRegion: accessibilityLiveRegion ?? 'polite',
+      accessibilityBusy: accessibilityBusy ?? animating,
+    });
+  }, [accessibilityLabel, accessibilityLiveRegion, accessibilityBusy, animating]);
   // Handle numeric size
   const sizeVariant = typeof size === 'number' ? 'md' : size;
   const customSize = typeof size === 'number' ? size : undefined;
@@ -44,6 +57,7 @@ const ActivityIndicator = forwardRef<View, ActivityIndicatorProps>(({
       ref={ref}
       nativeID={id}
       testID={testID}
+      {...nativeA11yProps}
     >
       <RNActivityIndicator
         animating={animating}

package/src/ActivityIndicator/ActivityIndicator.web.tsx

@@ -1,8 +1,9 @@
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useMemo } from 'react';
 import { getWebProps } from 'react-native-unistyles/web';
 import { ActivityIndicatorProps } from './types';
 import { activityIndicatorStyles } from './ActivityIndicator.styles';
 import useMergeRefs from '../hooks/useMergeRefs';
+import { getWebLiveRegionAriaProps } from '../utils/accessibility';
 
 const ActivityIndicator = forwardRef<HTMLDivElement, ActivityIndicatorProps>(({
   animating = true,
@@ -13,7 +14,23 @@ const ActivityIndicator = forwardRef<HTMLDivElement, ActivityIndicatorProps>(({
   testID,
   hidesWhenStopped = true,
   id,
+  // Accessibility props
+  accessibilityLabel,
+  accessibilityLiveRegion,
+  accessibilityBusy,
+  accessibilityAtomic,
+  accessibilityRelevant,
 }, ref) => {
+  // Generate ARIA props for loading state
+  const ariaProps = useMemo(() => {
+    return getWebLiveRegionAriaProps({
+      accessibilityLabel: accessibilityLabel ?? 'Loading',
+      accessibilityLiveRegion: accessibilityLiveRegion ?? 'polite',
+      accessibilityBusy: accessibilityBusy ?? animating,
+      accessibilityAtomic,
+      accessibilityRelevant,
+    });
+  }, [accessibilityLabel, accessibilityLiveRegion, accessibilityBusy, animating, accessibilityAtomic, accessibilityRelevant]);
   // Handle numeric size
   const sizeVariant = typeof size === 'number' ? 'md' : size;
   const customSize = typeof size === 'number' ? size : undefined;
@@ -72,7 +89,7 @@ const ActivityIndicator = forwardRef<HTMLDivElement, ActivityIndicatorProps>(({
           }
         `}
       </style>
-      <div {...containerProps} ref={mergedRef} id={id} data-testid={testID}>
+      <div {...containerProps} {...ariaProps} ref={mergedRef} role="status" id={id} data-testid={testID}>
         <div {...spinnerProps} />
       </div>
     </>

package/src/ActivityIndicator/types.ts

@@ -1,12 +1,13 @@
 import { Intent, Size } from '@idealyst/theme';
 import type { StyleProp, ViewStyle } from 'react-native';
 import { BaseProps } from '../utils/viewStyleProps';
+import { LiveRegionAccessibilityProps } from '../utils/accessibility';
 
 // Component-specific type aliases for future extensibility
 export type ActivityIndicatorIntentVariant = Intent;
 export type ActivityIndicatorSizeVariant = Size;
 
-export interface ActivityIndicatorProps extends BaseProps {
+export interface ActivityIndicatorProps extends BaseProps, LiveRegionAccessibilityProps {
   /**
    * Whether the indicator is animating (visible)
    * @default true

package/src/Avatar/Avatar.native.tsx

@@ -1,7 +1,8 @@
-import React, { useState, forwardRef } from 'react';
+import React, { useState, forwardRef, useMemo } from 'react';
 import { View, Text, Image } from 'react-native';
 import { AvatarProps } from './types';
 import { avatarStyles } from './Avatar.styles';
+import { getNativeAccessibilityProps } from '../utils/accessibility';
 
 const Avatar = forwardRef<View, AvatarProps>(({
   src,
@@ -12,7 +13,23 @@ const Avatar = forwardRef<View, AvatarProps>(({
   style,
   testID,
   id,
+  // Accessibility props
+  accessibilityLabel,
+  accessibilityHint,
+  accessibilityDisabled,
+  accessibilityHidden,
+  accessibilityRole,
 }, ref) => {
+  // Generate native accessibility props
+  const nativeA11yProps = useMemo(() => {
+    return getNativeAccessibilityProps({
+      accessibilityLabel: accessibilityLabel ?? alt,
+      accessibilityHint,
+      accessibilityDisabled,
+      accessibilityHidden,
+      accessibilityRole: accessibilityRole ?? 'image',
+    });
+  }, [accessibilityLabel, alt, accessibilityHint, accessibilityDisabled, accessibilityHidden, accessibilityRole]);
   const [hasError, setHasError] = useState(false);
 
   avatarStyles.useVariants({
@@ -25,7 +42,7 @@ const Avatar = forwardRef<View, AvatarProps>(({
   };
 
   return (
-    <View ref={ref} nativeID={id} style={[avatarStyles.avatar, style]} testID={testID}>
+    <View ref={ref} nativeID={id} style={[avatarStyles.avatar, style]} testID={testID} {...nativeA11yProps}>
       {src && !hasError ? (
         <Image
           source={typeof src === 'string' ? { uri: src } : src}

package/src/Avatar/Avatar.web.tsx

@@ -1,8 +1,9 @@
-import React, { useState, forwardRef } from 'react';
+import React, { useState, forwardRef, useMemo } from 'react';
 import { getWebProps } from 'react-native-unistyles/web';
 import { AvatarProps } from './types';
 import { avatarStyles } from './Avatar.styles';
 import useMergeRefs from '../hooks/useMergeRefs';
+import { getWebAriaProps } from '../utils/accessibility';
 
 const Avatar = forwardRef<HTMLDivElement, AvatarProps>(({
   src,
@@ -13,7 +14,23 @@ const Avatar = forwardRef<HTMLDivElement, AvatarProps>(({
   style,
   testID,
   id,
+  // Accessibility props
+  accessibilityLabel,
+  accessibilityHint,
+  accessibilityDisabled,
+  accessibilityHidden,
+  accessibilityRole,
 }, ref) => {
+  // Generate ARIA props
+  const ariaProps = useMemo(() => {
+    return getWebAriaProps({
+      accessibilityLabel: accessibilityLabel ?? alt,
+      accessibilityHint,
+      accessibilityDisabled,
+      accessibilityHidden,
+      accessibilityRole: accessibilityRole ?? 'img',
+    });
+  }, [accessibilityLabel, alt, accessibilityHint, accessibilityDisabled, accessibilityHidden, accessibilityRole]);
   const [hasError, setHasError] = useState(false);
 
   avatarStyles.useVariants({
@@ -35,7 +52,7 @@ const Avatar = forwardRef<HTMLDivElement, AvatarProps>(({
   const mergedRef = useMergeRefs(ref, avatarProps.ref);
 
   return (
-    <div {...avatarProps} ref={mergedRef} id={id} data-testid={testID}>
+    <div {...avatarProps} {...ariaProps} ref={mergedRef} id={id} data-testid={testID}>
       {src && !hasError ? (
         <img
           src={src as any}

package/src/Avatar/types.ts

@@ -1,13 +1,14 @@
 import { Color } from '@idealyst/theme';
 import type { StyleProp, ViewStyle, ImageSourcePropType } from 'react-native';
 import { BaseProps } from '../utils/viewStyleProps';
+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 AvatarShapeVariant = 'circle' | 'square';
 
-export interface AvatarProps extends BaseProps {
+export interface AvatarProps extends BaseProps, AccessibilityProps {
   /**
    * Image source (URL or require())
    */

package/src/Breadcrumb/types.ts

@@ -2,12 +2,13 @@ import type { StyleProp, ViewStyle, TextStyle } from 'react-native';
 import type { IconName } from '../Icon/icon-types';
 import { Size } from '@idealyst/theme';
 import { BaseProps } from '../utils/viewStyleProps';
+import { AccessibilityProps, CurrentAccessibilityProps } from '../utils/accessibility';
 
 // Component-specific type aliases for future extensibility
 export type BreadcrumbIntentVariant = 'primary' | 'neutral';
 export type BreadcrumbSizeVariant = Size;
 
-export interface BreadcrumbItem {
+export interface BreadcrumbItem extends CurrentAccessibilityProps {
   /** Label text for the breadcrumb item */
   label: string;
 
@@ -21,7 +22,7 @@ export interface BreadcrumbItem {
   disabled?: boolean;
 }
 
-export interface BreadcrumbProps extends BaseProps {
+export interface BreadcrumbProps extends BaseProps, AccessibilityProps {
   /** Array of breadcrumb items */
   items: BreadcrumbItem[];
 

package/src/Button/Button.native.tsx

@@ -1,9 +1,10 @@
-import React, { ComponentRef, forwardRef, isValidElement } from 'react';
+import React, { ComponentRef, forwardRef, isValidElement, useMemo } from 'react';
 import { StyleSheet as RNStyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import Svg, { Defs, LinearGradient, Stop, Rect } from 'react-native-svg';
 import { buttonStyles } from './Button.styles';
 import { ButtonProps } from './types';
+import { getNativeInteractiveAccessibilityProps } from '../utils/accessibility';
 
 const Button = forwardRef<ComponentRef<typeof TouchableOpacity>, ButtonProps>((props, ref) => {
   const {
@@ -20,6 +21,17 @@ const Button = forwardRef<ComponentRef<typeof TouchableOpacity>, ButtonProps>((p
     style,
     testID,
     id,
+    // Accessibility props
+    accessibilityLabel,
+    accessibilityHint,
+    accessibilityDisabled,
+    accessibilityHidden,
+    accessibilityRole,
+    accessibilityLabelledBy,
+    accessibilityDescribedBy,
+    accessibilityControls,
+    accessibilityExpanded,
+    accessibilityPressed,
   } = props;
 
   // Apply variants
@@ -83,6 +95,40 @@ const Button = forwardRef<ComponentRef<typeof TouchableOpacity>, ButtonProps>((p
   // Determine if we need to wrap content in icon container
   const hasIcons = leftIcon || rightIcon;
 
+  // Generate native accessibility props - especially important for icon-only buttons
+  const nativeA11yProps = useMemo(() => {
+    const isIconOnly = !buttonContent && (leftIcon || rightIcon);
+    const computedLabel = accessibilityLabel ?? (isIconOnly && typeof leftIcon === 'string' ? leftIcon : undefined);
+
+    return getNativeInteractiveAccessibilityProps({
+      accessibilityLabel: computedLabel,
+      accessibilityHint,
+      accessibilityDisabled: accessibilityDisabled ?? disabled,
+      accessibilityHidden,
+      accessibilityRole: accessibilityRole ?? 'button',
+      accessibilityLabelledBy,
+      accessibilityDescribedBy,
+      accessibilityControls,
+      accessibilityExpanded,
+      accessibilityPressed,
+    });
+  }, [
+    accessibilityLabel,
+    buttonContent,
+    leftIcon,
+    rightIcon,
+    accessibilityHint,
+    accessibilityDisabled,
+    disabled,
+    accessibilityHidden,
+    accessibilityRole,
+    accessibilityLabelledBy,
+    accessibilityDescribedBy,
+    accessibilityControls,
+    accessibilityExpanded,
+    accessibilityPressed,
+  ]);
+
   // Render gradient background layer
   const renderGradientLayer = () => {
     if (!showGradient) return null;
@@ -121,6 +167,7 @@ const Button = forwardRef<ComponentRef<typeof TouchableOpacity>, ButtonProps>((p
       showGradient && { overflow: 'hidden' },
       style,
     ],
+    ...nativeA11yProps,
   };
 
   return (

package/src/Button/Button.styles.tsx

@@ -29,13 +29,12 @@ function createIntentVariants(theme: Theme) {
 /**
  * Create type variants (structure only, colors handled by compound variants)
  */
-function createTypeVariants(theme: Theme) {
+function createButtonTypeVariants(theme: Theme) {
     return {
         contained: {
             borderWidth: 0,
         },
         outlined: {
-            boxSizing: 'border-box',
             borderWidth: 1,
             borderStyle: 'solid' ,
             backgroundColor: theme.colors.surface.primary,
@@ -208,6 +207,7 @@ const createButtonTextStyles = (theme: Theme) => {
 export const buttonStyles = StyleSheet.create((theme: Theme) => {
     return {
         button: {
+            boxSizing: 'border-box',
             alignItems: 'center',
             justifyContent: 'center',
             borderRadius: 8,
@@ -223,7 +223,7 @@ export const buttonStyles = StyleSheet.create((theme: Theme) => {
                     paddingHorizontal: size.paddingHorizontal,
                     minHeight: size.minHeight,
                 })),
-                type: createTypeVariants(theme),
+                type: createButtonTypeVariants(theme),
                 disabled: {
                     true: { opacity: 0.6 },
                     false: { opacity: 1, _web: {
@@ -250,7 +250,6 @@ export const buttonStyles = StyleSheet.create((theme: Theme) => {
                     height: size.iconSize,
                 })),
                 intent: createIntentVariants(theme),
-                type: createTypeVariants(theme),
             } as const,
             compoundVariants: createIconCompoundVariants(theme),
         } as const,
@@ -269,7 +268,6 @@ export const buttonStyles = StyleSheet.create((theme: Theme) => {
                     fontSize: size.fontSize,
                 })),
                 intent: createIntentVariants(theme),
-                type: createTypeVariants(theme),
                 disabled: {
                     true: { opacity: 0.6 },
                     false: { opacity: 1 },