@idealyst/components 1.2.29 → 1.2.31

package/src/Divider/Divider.native.tsx

@@ -2,11 +2,12 @@ import { forwardRef } from 'react';
 import { View, Text } from 'react-native';
 import { DividerProps } from './types';
 import { dividerStyles } from './Divider.styles';
+import type { IdealystElement } from '../utils/refTypes';
 
-const Divider = forwardRef<View, DividerProps>(({
+const Divider = forwardRef<IdealystElement, DividerProps>(({
   orientation = 'horizontal',
   type = 'solid',
-  thickness = 'thin',
+  size = 'sm',
   intent = 'neutral',
   length = 'full',
   spacing = 'md',
@@ -26,7 +27,7 @@ const Divider = forwardRef<View, DividerProps>(({
   // Get dynamic divider style
   const dividerStyle = (dividerStyles.divider as any)({
     orientation,
-    thickness,
+    size,
     type,
     intent,
     spacing,
@@ -35,15 +36,17 @@ const Divider = forwardRef<View, DividerProps>(({
   // Get dynamic line style
   const lineStyle = (dividerStyles.line as any)({
     orientation,
-    thickness,
+    size,
   });
 
-  // Get thickness value for dashed/dotted border handling on native
-  const getThicknessValue = () => {
-    switch (thickness) {
-      case 'thin': return 1;
+  // Get size value for dashed/dotted border handling on native
+  const getSizeValue = () => {
+    switch (size) {
+      case 'xs': return 1;
+      case 'sm': return 1;
       case 'md': return 2;
-      case 'thick': return 4;
+      case 'lg': return 3;
+      case 'xl': return 4;
       default: return 1;
     }
   };
@@ -51,19 +54,19 @@ const Divider = forwardRef<View, DividerProps>(({
   // For dashed/dotted variants on native, we need to use border instead of background
   const getNativeDashedStyle = () => {
     if (type === 'dashed' || type === 'dotted') {
-      const actualThickness = getThicknessValue();
+      const actualSize = getSizeValue();
 
       return {
         backgroundColor: 'transparent',
         borderStyle: type,
         borderColor: dividerStyle.backgroundColor,
         ...(orientation === 'horizontal' ? {
-          borderTopWidth: actualThickness,
+          borderTopWidth: actualSize,
           borderBottomWidth: 0,
           borderLeftWidth: 0,
           borderRightWidth: 0,
         } : {
-          borderLeftWidth: actualThickness,
+          borderLeftWidth: actualSize,
           borderTopWidth: 0,
           borderBottomWidth: 0,
           borderRightWidth: 0,
@@ -77,7 +80,7 @@ const Divider = forwardRef<View, DividerProps>(({
   if (!children) {
     return (
       <View
-        ref={ref}
+        ref={ref as any}
         nativeID={id}
         style={[dividerStyle, getNativeDashedStyle(), style]}
         testID={testID}
@@ -89,7 +92,7 @@ const Divider = forwardRef<View, DividerProps>(({
   // For lines with content, create line segments
   const renderLineSegment = () => {
     if (type === 'dashed' || type === 'dotted') {
-      const actualThickness = getThicknessValue();
+      const actualSize = getSizeValue();
 
       return (
         <View
@@ -100,12 +103,12 @@ const Divider = forwardRef<View, DividerProps>(({
               borderStyle: type,
               borderColor: lineStyle.backgroundColor,
               ...(orientation === 'horizontal' ? {
-                borderTopWidth: actualThickness,
+                borderTopWidth: actualSize,
                 borderBottomWidth: 0,
                 borderLeftWidth: 0,
                 borderRightWidth: 0,
               } : {
-                borderLeftWidth: actualThickness,
+                borderLeftWidth: actualSize,
                 borderTopWidth: 0,
                 borderBottomWidth: 0,
                 borderRightWidth: 0,
@@ -121,7 +124,7 @@ const Divider = forwardRef<View, DividerProps>(({
 
   return (
     <View
-      ref={ref}
+      ref={ref as any}
       nativeID={id}
       style={dividerStyles.container}
       testID={testID}

package/src/Divider/Divider.styles.tsx

@@ -3,7 +3,7 @@
  */
 import { StyleSheet } from 'react-native-unistyles';
 import { defineStyle, ThemeStyleWrapper } from '@idealyst/theme';
-import type { Theme as BaseTheme, Intent } from '@idealyst/theme';
+import type { Theme as BaseTheme, Intent, Size } from '@idealyst/theme';
 
 // Required: Unistyles must see StyleSheet usage in original source to process this file
 void StyleSheet;
@@ -12,14 +12,14 @@ void StyleSheet;
 type Theme = ThemeStyleWrapper<BaseTheme>;
 
 type DividerOrientation = 'horizontal' | 'vertical';
-type DividerThickness = 'thin' | 'md' | 'thick';
+type DividerSize = Size;
 type DividerType = 'solid' | 'dashed' | 'dotted';
 type DividerIntent = Intent | 'secondary' | 'neutral' | 'info';
 type DividerSpacing = 'none' | 'sm' | 'md' | 'lg';
 
 export type DividerDynamicProps = {
     orientation?: DividerOrientation;
-    thickness?: DividerThickness;
+    size?: DividerSize;
     type?: DividerType;
     intent?: DividerIntent;
     spacing?: DividerSpacing;
@@ -27,14 +27,20 @@ export type DividerDynamicProps = {
 
 export type LineDynamicProps = {
     orientation?: DividerOrientation;
-    thickness?: DividerThickness;
+    size?: DividerSize;
 };
 
-function getThicknessValue(thickness: DividerThickness): number {
-    switch (thickness) {
-        case 'thin': return 1;
+/**
+ * Maps Size to thickness value in pixels.
+ * xs=1, sm=1, md=2, lg=3, xl=4
+ */
+function getSizeValue(size: DividerSize): number {
+    switch (size) {
+        case 'xs': return 1;
+        case 'sm': return 1;
         case 'md': return 2;
-        case 'thick': return 4;
+        case 'lg': return 3;
+        case 'xl': return 4;
         default: return 1;
     }
 }
@@ -50,17 +56,17 @@ function getSpacingValue(spacing: DividerSpacing): number {
 }
 
 /**
- * Divider styles with dynamic functions for orientation/thickness/intent combinations.
+ * Divider styles with dynamic functions for orientation/size/intent combinations.
  */
 export const dividerStyles = defineStyle('Divider', (theme: Theme) => ({
     divider: ({
         orientation = 'horizontal',
-        thickness = 'thin',
+        size = 'sm',
         type = 'solid',
         intent = 'neutral',
         spacing = 'md'
     }: DividerDynamicProps) => {
-        const thicknessValue = getThicknessValue(thickness);
+        const sizeValue = getSizeValue(size);
         const spacingValue = getSpacingValue(spacing);
         const isHorizontal = orientation === 'horizontal';
         const isDashedOrDotted = type === 'dashed' || type === 'dotted';
@@ -72,11 +78,11 @@ export const dividerStyles = defineStyle('Divider', (theme: Theme) => ({
                 ? theme.colors.border.secondary
                 : intent === 'info'
                     ? theme.intents.primary.primary
-                    : theme.intents[intent as Intent].primary;
+                    : (theme.intents[intent as Intent]?.primary ?? theme.colors.border.primary);
 
         const dimensionStyles = isHorizontal
-            ? { width: '100%', height: thicknessValue, flexDirection: 'row' as const }
-            : { width: thicknessValue, height: '100%', flexDirection: 'column' as const };
+            ? { width: '100%', height: sizeValue, flexDirection: 'row' as const }
+            : { width: sizeValue, height: '100%', flexDirection: 'column' as const };
 
         const spacingStyles = isHorizontal
             ? { marginVertical: spacingValue }
@@ -86,8 +92,8 @@ export const dividerStyles = defineStyle('Divider', (theme: Theme) => ({
             border: 'none',
             backgroundColor: 'transparent',
             ...(isHorizontal
-                ? { borderTop: `${thicknessValue}px ${type} ${color}` }
-                : { borderLeft: `${thicknessValue}px ${type} ${color}` }
+                ? { borderTop: `${sizeValue}px ${type} ${color}` }
+                : { borderLeft: `${sizeValue}px ${type} ${color}` }
             ),
         } : {};
 
@@ -137,17 +143,33 @@ export const dividerStyles = defineStyle('Divider', (theme: Theme) => ({
         },
     }),
 
-    line: ({ orientation = 'horizontal', thickness = 'thin' }: LineDynamicProps) => {
-        const thicknessValue = getThicknessValue(thickness);
-        const isHorizontal = orientation === 'horizontal';
-
-        return {
-            backgroundColor: theme.colors.border.secondary,
-            flex: 1,
-            ...(isHorizontal
-                ? { height: thicknessValue }
-                : { width: thicknessValue }
-            ),
-        } as const;
-    },
+    line: (_props: LineDynamicProps) => ({
+        backgroundColor: theme.colors.border.secondary,
+        flex: 1,
+        variants: {
+            orientation: {
+                horizontal: {},
+                vertical: {},
+            },
+            size: {
+                xs: {},
+                sm: {},
+                md: {},
+                lg: {},
+                xl: {},
+            },
+        },
+        compoundVariants: [
+            { orientation: 'horizontal', size: 'xs', styles: { height: 1 } },
+            { orientation: 'horizontal', size: 'sm', styles: { height: 1 } },
+            { orientation: 'horizontal', size: 'md', styles: { height: 2 } },
+            { orientation: 'horizontal', size: 'lg', styles: { height: 3 } },
+            { orientation: 'horizontal', size: 'xl', styles: { height: 4 } },
+            { orientation: 'vertical', size: 'xs', styles: { width: 1 } },
+            { orientation: 'vertical', size: 'sm', styles: { width: 1 } },
+            { orientation: 'vertical', size: 'md', styles: { width: 2 } },
+            { orientation: 'vertical', size: 'lg', styles: { width: 3 } },
+            { orientation: 'vertical', size: 'xl', styles: { width: 4 } },
+        ],
+    }),
 }));

package/src/Divider/Divider.web.tsx

@@ -3,15 +3,16 @@ import { getWebProps } from 'react-native-unistyles/web';
 import { DividerProps } from './types';
 import { dividerStyles } from './Divider.styles';
 import useMergeRefs from '../hooks/useMergeRefs';
+import type { IdealystElement } from '../utils/refTypes';
 
 /**
  * Visual separator for dividing content sections horizontally or vertically.
  * Supports solid, dashed, and dotted styles with optional text content.
  */
-const Divider = forwardRef<HTMLDivElement, DividerProps>(({
+const Divider = forwardRef<IdealystElement, DividerProps>(({
   orientation = 'horizontal',
   type = 'solid',
-  thickness = 'thin',
+  size = 'sm',
   intent = 'neutral',
   length = 'full',
   spacing = 'md',
@@ -31,7 +32,7 @@ const Divider = forwardRef<HTMLDivElement, DividerProps>(({
   // Get dynamic divider style
   const dividerStyle = (dividerStyles.divider as any)({
     orientation,
-    thickness,
+    size,
     type,
     intent,
     spacing,
@@ -40,7 +41,7 @@ const Divider = forwardRef<HTMLDivElement, DividerProps>(({
   // Get dynamic line style
   const lineStyle = (dividerStyles.line as any)({
     orientation,
-    thickness,
+    size,
   });
 
   // Generate web props

package/src/Divider/types.ts

@@ -5,9 +5,9 @@ import { BaseProps } from '../utils/viewStyleProps';
 
 // Component-specific type aliases for future extensibility
 export type DividerIntentVariant = Intent;
+export type DividerSizeVariant = Size;
 export type DividerOrientationVariant = 'horizontal' | 'vertical';
 export type DividerType = 'solid' | 'dashed' | 'dotted';
-export type DividerThicknessVariant = 'thin' | 'md' | 'thick';
 export type DividerLengthVariant = 'full' | 'auto' | number;
 export type DividerSpacingVariant = 'none' | Size;
 
@@ -27,9 +27,9 @@ export interface DividerProps extends BaseProps {
   type?: DividerType;
 
   /**
-   * The thickness of the divider
+   * The size (thickness) of the divider
    */
-  thickness?: DividerThicknessVariant;
+  size?: DividerSizeVariant;
 
   /**
    * The color intent of the divider

package/src/Icon/Icon.native.tsx

@@ -2,8 +2,9 @@ import { forwardRef, useMemo } from 'react';
 import MaterialDesignIcons from '@react-native-vector-icons/material-design-icons';
 import { IconProps } from './types';
 import { iconStyles } from './Icon.styles';
+import type { IdealystElement } from '../utils/refTypes';
 
-const Icon = forwardRef<any, IconProps>(({
+const Icon = forwardRef<IdealystElement, IconProps>(({
   name,
   size = 'md',
   color,
@@ -26,7 +27,7 @@ const Icon = forwardRef<any, IconProps>(({
 
   return (
     <MaterialDesignIcons
-      ref={ref}
+      ref={ref as any}
       nativeID={id}
       size={iconSize}
       name={name}

package/src/Icon/Icon.web.tsx

@@ -7,12 +7,13 @@ import { useUnistyles } from 'react-native-unistyles';
 import useMergeRefs from '../hooks/useMergeRefs';
 import { getColorFromString, Intent, Color, Text } from '@idealyst/theme';
 import { IconRegistry } from './IconRegistry';
+import type { IdealystElement } from '../utils/refTypes';
 
 /**
  * Vector icon display from the Material Design Icons library.
  * Supports intent-based coloring and theme-aware sizing.
  */
-const Icon = forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
+const Icon = forwardRef<IdealystElement, IconProps>((props, ref) => {
   const {
     name,
     size = 'md',

package/src/Icon/IconSvg/IconSvg.native.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { View } from 'react-native';
 import Svg, { Path } from 'react-native-svg';
+import type { IdealystElement } from '../../utils/refTypes';
 
 /**
  * Internal component for rendering SVG icons directly from MDI paths.
@@ -18,7 +19,7 @@ interface IconSvgProps {
   'data-testid'?: string;
 }
 
-export const IconSvg = React.forwardRef<View, IconSvgProps>(({
+export const IconSvg = React.forwardRef<IdealystElement, IconSvgProps>(({
   path,
   size = 24,
   color = 'currentColor',
@@ -29,7 +30,7 @@ export const IconSvg = React.forwardRef<View, IconSvgProps>(({
   const sizeNum = typeof size === 'string' ? parseFloat(size) : size;
 
   return (
-    <View ref={ref} style={[{ width: sizeNum, height: sizeNum }, style]} testID={testID}>
+    <View ref={ref as any} style={[{ width: sizeNum, height: sizeNum }, style]} testID={testID}>
       <Svg viewBox="0 0 24 24" width={sizeNum} height={sizeNum}>
         <Path d={path} fill={color} />
       </Svg>

package/src/IconButton/IconButton.native.tsx

@@ -0,0 +1,219 @@
+import { forwardRef, useMemo } from 'react';
+import { ActivityIndicator, StyleSheet as RNStyleSheet, 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 { iconButtonStyles } from './IconButton.styles';
+import { IconButtonProps } from './types';
+import { getNativeInteractiveAccessibilityProps } from '../utils/accessibility';
+import type { IdealystElement } from '../utils/refTypes';
+
+const IconButton = forwardRef<IdealystElement, IconButtonProps>((props, ref) => {
+  const {
+    icon,
+    onPress,
+    onClick,
+    disabled = false,
+    loading = false,
+    type = 'contained',
+    intent = 'primary',
+    size = 'md',
+    gradient,
+    style,
+    testID,
+    id,
+    // Accessibility props
+    accessibilityLabel,
+    accessibilityHint,
+    accessibilityDisabled,
+    accessibilityHidden,
+    accessibilityRole,
+    accessibilityLabelledBy,
+    accessibilityDescribedBy,
+    accessibilityControls,
+    accessibilityExpanded,
+    accessibilityPressed,
+  } = props;
+
+  // 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(
+      'IconButton: onClick prop is deprecated. Use onPress instead for cross-platform compatibility.'
+    );
+  }
+
+  // Apply variants for size, disabled, gradient
+  iconButtonStyles.useVariants({
+    size,
+    disabled: isDisabled,
+    gradient,
+  });
+
+  // Compute dynamic styles with all props for full flexibility
+  const dynamicProps = { intent, type, size, disabled: isDisabled, gradient };
+  const buttonStyle = (iconButtonStyles.button as any)(dynamicProps);
+  const iconStyle = (iconButtonStyles.icon as any)(dynamicProps);
+  const spinnerStyle = (iconButtonStyles.spinner as any)(dynamicProps);
+
+  // Gradient is only applicable to contained buttons
+  const showGradient = gradient && type === 'contained';
+
+  // Map button size to icon size
+  const iconSizeMap: Record<string, number> = {
+    xs: 12,
+    sm: 14,
+    md: 16,
+    lg: 18,
+    xl: 20,
+  };
+  const iconSize = iconSizeMap[size] ?? 16;
+
+  // Generate native accessibility props
+  const nativeA11yProps = useMemo(() => {
+    const computedLabel = accessibilityLabel ?? (typeof icon === 'string' ? icon : undefined);
+
+    return getNativeInteractiveAccessibilityProps({
+      accessibilityLabel: computedLabel,
+      accessibilityHint,
+      accessibilityDisabled: accessibilityDisabled ?? isDisabled,
+      accessibilityHidden,
+      accessibilityRole: accessibilityRole ?? 'button',
+      accessibilityLabelledBy,
+      accessibilityDescribedBy,
+      accessibilityControls,
+      accessibilityExpanded,
+      accessibilityPressed,
+    });
+  }, [
+    accessibilityLabel,
+    icon,
+    accessibilityHint,
+    accessibilityDisabled,
+    isDisabled,
+    accessibilityHidden,
+    accessibilityRole,
+    accessibilityLabelledBy,
+    accessibilityDescribedBy,
+    accessibilityControls,
+    accessibilityExpanded,
+    accessibilityPressed,
+  ]);
+
+  // Render gradient background layer
+  const renderGradientLayer = () => {
+    if (!showGradient) return null;
+
+    const [startColor, endColor] = useMemo(() => {
+      switch (gradient) {
+        case 'darken': return [{
+          stopColor: 'black',
+          stopOpacity: 0,
+        }, {
+          stopColor: 'black',
+          stopOpacity: 0.15,
+        }];
+        case 'lighten': return [{
+          stopColor: 'white',
+          stopOpacity: 0,
+        }, {
+          stopColor: 'white',
+          stopOpacity: 0.2,
+        }];
+        default: return [{
+          stopColor: 'black',
+          stopOpacity: 0,
+        }, {
+          stopColor: 'black',
+          stopOpacity: 0,
+        }];
+      }
+    }, [gradient]);
+
+    return (
+      <Svg style={RNStyleSheet.absoluteFill}>
+        <Defs>
+          <LinearGradient id="iconButtonGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+            <Stop offset="0%" {...startColor} />
+            <Stop offset="100%" {...endColor} />
+          </LinearGradient>
+        </Defs>
+        <Rect
+          width="100%"
+          height="100%"
+          fill="url(#iconButtonGradient)"
+          rx={9999}
+          ry={9999}
+        />
+      </Svg>
+    );
+  };
+
+  // TouchableOpacity types don't include nativeID but it's a valid RN prop
+  const touchableProps = {
+    ref,
+    onPress: pressHandler,
+    disabled: isDisabled,
+    testID,
+    nativeID: id,
+    activeOpacity: 0.7,
+    style: [
+      buttonStyle,
+      showGradient && { overflow: 'hidden' },
+      style,
+    ],
+    accessibilityState: loading ? { busy: true } : undefined,
+    ...nativeA11yProps,
+  };
+
+  // Get spinner color from the spinner style (matches icon color)
+  const spinnerColor = spinnerStyle?.color || (type === 'contained' ? '#fff' : undefined);
+
+  // Content opacity - hide when loading but keep for sizing
+  const contentOpacity = loading ? 0 : 1;
+
+  // Render icon
+  const renderIcon = () => {
+    if (typeof icon === 'string') {
+      return (
+        <MaterialDesignIcons
+          name={icon}
+          size={iconSize}
+          style={[iconStyle, { opacity: contentOpacity }]}
+        />
+      );
+    }
+    // Custom ReactNode icon
+    return (
+      <View style={{ opacity: contentOpacity }}>
+        {icon}
+      </View>
+    );
+  };
+
+  return (
+    <TouchableOpacity {...touchableProps as any}>
+      {renderGradientLayer()}
+      {/* Centered spinner overlay */}
+      {loading && (
+        <View style={RNStyleSheet.absoluteFill}>
+          <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+            <ActivityIndicator
+              size="small"
+              color={spinnerColor}
+            />
+          </View>
+        </View>
+      )}
+      {renderIcon()}
+    </TouchableOpacity>
+  );
+});
+
+IconButton.displayName = 'IconButton';
+
+export default IconButton;