@idealyst/components 1.2.29 → 1.2.30

package/src/Input/index.ts

@@ -1,5 +1,12 @@
+/**
+ * @ignore
+ * @deprecated Use TextInput instead. Input is maintained for backwards compatibility only.
+ */
 import InputComponent from './Input.web';
 
+// Re-export deprecated Input component
 export default InputComponent;
 export { InputComponent as Input };
-export * from './types';
+
+// Re-export types from TextInput for backwards compatibility
+export * from '../TextInput/types';

package/src/Input/index.web.ts

@@ -1,5 +1,12 @@
+/**
+ * @ignore
+ * @deprecated Use TextInput instead. Input is maintained for backwards compatibility only.
+ */
 import InputComponent from './Input.web';
 
+// Re-export deprecated Input component
 export default InputComponent;
 export { InputComponent as Input };
-export * from './types';
+
+// Re-export types from TextInput for backwards compatibility
+export * from '../TextInput/types';

package/src/Input/types.ts

@@ -98,7 +98,7 @@ export interface InputProps extends FormInputStyleProps, FormAccessibilityProps
 
   /**
    * Whether the input has an error state
-   * @deprecated Use intent="error" instead
+   * @deprecated Use intent="danger" instead
    */
   hasError?: boolean;
 

package/src/List/List.native.tsx

@@ -4,8 +4,9 @@ import { listStyles } from './List.styles';
 import type { ListProps } from './types';
 import { ListProvider } from './ListContext';
 import { getNativeAccessibilityProps } from '../utils/accessibility';
+import type { IdealystElement } from '../utils/refTypes';
 
-const List = forwardRef<View, ListProps>(({
+const List = forwardRef<IdealystElement, ListProps>(({
   children,
   type = 'default',
   size = 'md',
@@ -92,7 +93,7 @@ const List = forwardRef<View, ListProps>(({
   }
 
   return (
-    <View ref={ref} nativeID={id} style={containerStyle as any} testID={testID} {...nativeA11yProps}>
+    <View ref={ref as any} nativeID={id} style={containerStyle as any} testID={testID} {...nativeA11yProps}>
       {content}
     </View>
   );

package/src/List/ListItem.native.tsx

@@ -1,4 +1,4 @@
-import { isValidElement, forwardRef, ComponentRef, useMemo } from 'react';
+import { isValidElement, forwardRef, useMemo } from 'react';
 import { View, Pressable, Text } from 'react-native';
 import { useUnistyles } from 'react-native-unistyles';
 import MaterialDesignIcons from '@react-native-vector-icons/material-design-icons';
@@ -7,8 +7,9 @@ import { listStyles } from './List.styles';
 import type { ListItemProps } from './types';
 import { useListContext } from './ListContext';
 import { getNativeSelectableAccessibilityProps } from '../utils/accessibility';
+import type { IdealystElement } from '../utils/refTypes';
 
-const ListItem = forwardRef<ComponentRef<typeof View> | ComponentRef<typeof Pressable>, ListItemProps & { isLast?: boolean }>(({
+const ListItem = forwardRef<IdealystElement, ListItemProps & { isLast?: boolean }>(({
   id,
   label,
   children,

package/src/List/ListSection.native.tsx

@@ -2,8 +2,9 @@ import { forwardRef } from 'react';
 import { View, Text } from 'react-native';
 import { listStyles } from './List.styles';
 import type { ListSectionProps } from './types';
+import type { IdealystElement } from '../utils/refTypes';
 
-const ListSection = forwardRef<View, ListSectionProps>(({
+const ListSection = forwardRef<IdealystElement, ListSectionProps>(({
   title,
   children,
   collapsed = false,
@@ -11,7 +12,7 @@ const ListSection = forwardRef<View, ListSectionProps>(({
   testID,
 }, ref) => {
   return (
-    <View ref={ref} style={[listStyles.section, style]} testID={testID}>
+    <View ref={ref as any} style={[listStyles.section, style]} testID={testID}>
       {title && (
         <Text style={listStyles.sectionTitle}>
           {title}

package/src/Menu/Menu.native.tsx

@@ -12,8 +12,9 @@ import useMergeRefs from '../hooks/useMergeRefs';
 import { BoundedModalContent } from '../internal/BoundedModalContent.native';
 import { useSmartPosition } from '../hooks/useSmartPosition.native';
 import { getNativeInteractiveAccessibilityProps } from '../utils/accessibility';
+import type { IdealystElement } from '../utils/refTypes';
 
-const Menu = forwardRef<View, MenuProps>(({
+const Menu = forwardRef<IdealystElement, MenuProps>(({
   children,
   items,
   open,

package/src/Menu/Menu.styles.tsx

@@ -53,38 +53,88 @@ export const menuStyles = defineStyle('Menu', (theme: Theme) => ({
         },
     }),
 
-    item: ({ intent = 'neutral', disabled = false }: MenuDynamicProps) => {
-        const intentValue = theme.intents[intent];
-        const hoverStyles = intent !== 'neutral' ? {
-            backgroundColor: intentValue.light + '20',
-            color: intentValue.primary,
-        } : {
-            backgroundColor: theme.colors.surface.secondary,
-        };
-
-        return {
-            flexDirection: 'row' as const,
-            alignItems: 'center' as const,
-            backgroundColor: 'transparent' as const,
-            borderRadius: 4,
-            minHeight: 44,
-            opacity: disabled ? 0.5 : 1,
-            variants: {
-                size: {
-                    paddingVertical: theme.sizes.$menu.paddingVertical,
-                    paddingHorizontal: theme.sizes.$menu.paddingHorizontal,
+    item: (_props: MenuDynamicProps) => ({
+        flexDirection: 'row' as const,
+        alignItems: 'center' as const,
+        backgroundColor: 'transparent' as const,
+        borderRadius: 4,
+        minHeight: 44,
+        variants: {
+            size: {
+                paddingVertical: theme.sizes.$menu.paddingVertical,
+                paddingHorizontal: theme.sizes.$menu.paddingHorizontal,
+            },
+            intent: {
+                neutral: {
+                    _web: {
+                        _hover: {
+                            backgroundColor: theme.colors.surface.secondary,
+                        },
+                    },
+                },
+                // For non-neutral intents, use light bg with primary text
+                primary: {
+                    _web: {
+                        _hover: {
+                            backgroundColor: theme.intents.primary.light + '20',
+                            color: theme.intents.primary.primary,
+                        },
+                    },
+                },
+                success: {
+                    _web: {
+                        _hover: {
+                            backgroundColor: theme.intents.success.light + '20',
+                            color: theme.intents.success.primary,
+                        },
+                    },
+                },
+                danger: {
+                    _web: {
+                        _hover: {
+                            backgroundColor: theme.intents.danger.light + '20',
+                            color: theme.intents.danger.primary,
+                        },
+                    },
+                },
+                warning: {
+                    _web: {
+                        _hover: {
+                            backgroundColor: theme.intents.warning.light + '20',
+                            color: theme.intents.warning.primary,
+                        },
+                    },
+                },
+                info: {
+                    _web: {
+                        _hover: {
+                            backgroundColor: theme.intents.info.light + '20',
+                            color: theme.intents.info.primary,
+                        },
+                    },
                 },
             },
-            _web: {
-                cursor: disabled ? 'not-allowed' : 'pointer',
-                border: 'none',
-                outline: 'none',
-                transition: 'background-color 0.2s ease',
-                textAlign: 'left',
-                _hover: disabled ? { backgroundColor: 'transparent' } : hoverStyles,
+            disabled: {
+                true: {
+                    opacity: 0.5,
+                    _web: {
+                        cursor: 'not-allowed',
+                        _hover: { backgroundColor: 'transparent' },
+                    },
+                },
+                false: {
+                    opacity: 1,
+                    _web: { cursor: 'pointer' },
+                },
             },
-        } as const;
-    },
+        },
+        _web: {
+            border: 'none',
+            outline: 'none',
+            transition: 'background-color 0.2s ease',
+            textAlign: 'left',
+        },
+    }),
 
     separator: (_props: MenuDynamicProps) => ({
         height: 1,

package/src/Menu/Menu.web.tsx

@@ -6,12 +6,13 @@ import MenuItem from './MenuItem.web';
 import useMergeRefs from '../hooks/useMergeRefs';
 import { PositionedPortal } from '../internal/PositionedPortal';
 import { getWebInteractiveAriaProps, generateAccessibilityId, MENU_KEYS, matchesKey } from '../utils/accessibility';
+import type { IdealystElement } from '../utils/refTypes';
 
 /**
  * Dropdown menu for actions and navigation triggered by a button or element.
  * Includes keyboard navigation, icons, and separator support.
  */
-const Menu = forwardRef<HTMLDivElement, MenuProps>(({
+const Menu = forwardRef<IdealystElement, MenuProps>(({
   children,
   items,
   open = false,

package/src/Menu/MenuItem.native.tsx

@@ -1,8 +1,9 @@
-import { isValidElement, forwardRef, ComponentRef } from 'react';
+import { isValidElement, forwardRef } from 'react';
 import { Pressable, Text, View } from 'react-native';
 import { menuItemStyles } from './MenuItem.styles';
 import type { MenuItem as MenuItemType, MenuSizeVariant } from './types';
 import MaterialDesignIcons from '@react-native-vector-icons/material-design-icons';
+import type { IdealystElement } from '../utils/refTypes';
 
 interface MenuItemProps {
   item: MenuItemType;
@@ -11,7 +12,7 @@ interface MenuItemProps {
   testID?: string;
 }
 
-const MenuItem = forwardRef<ComponentRef<typeof Pressable>, MenuItemProps>(({ item, onPress, size = 'md', testID }, ref) => {
+const MenuItem = forwardRef<IdealystElement, MenuItemProps>(({ item, onPress, size = 'md', testID }, ref) => {
   // Initialize styles with useVariants (for size and disabled)
   menuItemStyles.useVariants({
     size,
@@ -41,7 +42,7 @@ const MenuItem = forwardRef<ComponentRef<typeof Pressable>, MenuItemProps>(({ it
 
   return (
     <Pressable
-      ref={ref}
+      ref={ref as any}
       style={itemStyle}
       onPress={() => onPress(item)}
       disabled={item.disabled}

package/src/Menu/MenuItem.styles.tsx

@@ -21,41 +21,90 @@ export type MenuItemDynamicProps = {
  * MenuItem styles with intent/disabled handling.
  */
 export const menuItemStyles = defineStyle('MenuItem', (theme: Theme) => ({
-    item: ({ intent = 'neutral', disabled = false }: MenuItemDynamicProps) => {
-        const intentValue = theme.intents[intent];
-        const hoverStyles = intent !== 'neutral' ? {
-            backgroundColor: intentValue.light,
-            color: intentValue.primary,
-        } : {
-            backgroundColor: theme.colors.surface.secondary,
-        };
-
-        return {
-            flexDirection: 'row' as const,
-            alignItems: 'center' as const,
-            backgroundColor: 'transparent' as const,
-            borderRadius: 4,
-            minHeight: 44,
-            opacity: disabled ? 0.5 : 1,
-            variants: {
-                size: {
-                    paddingVertical: theme.sizes.$menu.paddingVertical,
-                    paddingHorizontal: theme.sizes.$menu.paddingHorizontal,
+    item: (_props: MenuItemDynamicProps) => ({
+        flexDirection: 'row' as const,
+        alignItems: 'center' as const,
+        backgroundColor: 'transparent' as const,
+        borderRadius: 4,
+        minHeight: 44,
+        variants: {
+            size: {
+                paddingVertical: theme.sizes.$menu.paddingVertical,
+                paddingHorizontal: theme.sizes.$menu.paddingHorizontal,
+            },
+            intent: {
+                neutral: {
+                    _web: {
+                        _hover: {
+                            backgroundColor: theme.colors.surface.secondary,
+                        },
+                    },
+                },
+                primary: {
+                    _web: {
+                        _hover: {
+                            backgroundColor: theme.intents.primary.light,
+                            color: theme.intents.primary.primary,
+                        },
+                    },
+                },
+                success: {
+                    _web: {
+                        _hover: {
+                            backgroundColor: theme.intents.success.light,
+                            color: theme.intents.success.primary,
+                        },
+                    },
+                },
+                danger: {
+                    _web: {
+                        _hover: {
+                            backgroundColor: theme.intents.danger.light,
+                            color: theme.intents.danger.primary,
+                        },
+                    },
+                },
+                warning: {
+                    _web: {
+                        _hover: {
+                            backgroundColor: theme.intents.warning.light,
+                            color: theme.intents.warning.primary,
+                        },
+                    },
+                },
+                info: {
+                    _web: {
+                        _hover: {
+                            backgroundColor: theme.intents.info.light,
+                            color: theme.intents.info.primary,
+                        },
+                    },
                 },
             },
-            _web: {
-                display: 'flex',
-                width: '100%',
-                cursor: disabled ? 'not-allowed' : 'pointer',
-                border: 'none',
-                borderWidth: 0,
-                outline: 'none',
-                transition: 'background-color 0.2s ease',
-                textAlign: 'left',
-                _hover: disabled ? { backgroundColor: 'transparent' } : hoverStyles,
+            disabled: {
+                true: {
+                    opacity: 0.5,
+                    _web: {
+                        cursor: 'not-allowed',
+                        _hover: { backgroundColor: 'transparent' },
+                    },
+                },
+                false: {
+                    opacity: 1,
+                    _web: { cursor: 'pointer' },
+                },
             },
-        } as const;
-    },
+        },
+        _web: {
+            display: 'flex',
+            width: '100%',
+            border: 'none',
+            borderWidth: 0,
+            outline: 'none',
+            transition: 'background-color 0.2s ease',
+            textAlign: 'left',
+        },
+    }),
 
     icon: (_props: MenuItemDynamicProps) => ({
         alignItems: 'center' as const,

package/src/Menu/MenuItem.web.tsx

@@ -5,6 +5,7 @@ import type { MenuItem as MenuItemType, MenuSizeVariant } 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';
 
 interface MenuItemProps {
   item: MenuItemType;
@@ -13,7 +14,7 @@ interface MenuItemProps {
   testID?: string;
 }
 
-const MenuItem = forwardRef<HTMLButtonElement, MenuItemProps>(({ item, onPress, size = 'md', testID }, ref) => {
+const MenuItem = forwardRef<IdealystElement, MenuItemProps>(({ item, onPress, size = 'md', testID }, ref) => {
   // Initialize styles with useVariants (for size and disabled)
   menuItemStyles.useVariants({
     size,

package/src/Menu/docs.ts

@@ -9,7 +9,7 @@ export const sampleProps: SampleProps = {
     items: [
       { id: '1', label: 'Edit' },
       { id: '2', label: 'Duplicate' },
-      { id: '3', label: 'Delete', intent: 'error' },
+      { id: '3', label: 'Delete', intent: 'danger' },
     ],
   },
   children: 'Click for menu',

package/src/Popover/Popover.native.tsx

@@ -6,8 +6,9 @@ import { popoverStyles } from './Popover.styles';
 import { calculateSmartPosition } from '../utils/positionUtils.native';
 import { BoundedModalContent } from '../internal/BoundedModalContent.native';
 import { getNativeInteractiveAccessibilityProps } from '../utils/accessibility';
+import type { IdealystElement } from '../utils/refTypes';
 
-const Popover = forwardRef<View, PopoverProps>(({
+const Popover = forwardRef<IdealystElement, PopoverProps>(({
   open,
   onOpenChange,
   anchor,

package/src/Popover/Popover.web.tsx

@@ -5,12 +5,13 @@ import { popoverStyles } from './Popover.styles';
 import useMergeRefs from '../hooks/useMergeRefs';
 import { PositionedPortal } from '../internal/PositionedPortal';
 import { getWebInteractiveAriaProps, generateAccessibilityId } from '../utils/accessibility';
+import type { IdealystElement } from '../utils/refTypes';
 
 /**
  * Floating content panel anchored to an element for contextual information or actions.
  * Supports multiple placements and automatic dismissal behaviors.
  */
-const Popover = forwardRef<HTMLDivElement, PopoverProps>(({
+const Popover = forwardRef<IdealystElement, PopoverProps>(({
   open,
   onOpenChange,
   anchor,

package/src/Popover/types.ts

@@ -1,7 +1,11 @@
-import type { ReactNode } from 'react';
+import type { ReactNode, RefObject } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import { BaseProps } from '../utils/viewStyleProps';
 import { InteractiveAccessibilityProps } from '../utils/accessibility';
+import type { IdealystElement } from '../utils/refTypes';
+
+// Re-export for convenience
+export type { IdealystElement };
 
 export type PopoverPlacement =
   | 'top' | 'top-start' | 'top-end'
@@ -21,10 +25,17 @@ export interface PopoverProps extends BaseProps, InteractiveAccessibilityProps {
   onOpenChange: (open: boolean) => void;
 
   /**
-   * The anchor element to position the popover relative to
-   * Can be a React element or a ref to a DOM element
+   * The anchor element to position the popover relative to.
+   * Can be a React element or a ref to any DOM/RN element.
+   *
+   * @example
+   * ```tsx
+   * const anchorRef = React.useRef<AnchorElement>(null);
+   * <Button ref={anchorRef}>Open</Button>
+   * <Popover anchor={anchorRef} ... />
+   * ```
    */
-  anchor: ReactNode | React.RefObject<Element>;
+  anchor: ReactNode | RefObject<IdealystElement>;
 
   /**
    * The content to display inside the popover

package/src/Pressable/Pressable.native.tsx

@@ -2,8 +2,9 @@ import { forwardRef } from 'react';
 import { TouchableWithoutFeedback, View } from 'react-native';
 import { PressableProps } from './types';
 import { pressableStyles } from './Pressable.styles';
+import type { IdealystElement } from '../utils/refTypes';
 
-const Pressable = forwardRef<View, PressableProps>(({
+const Pressable = forwardRef<IdealystElement, PressableProps>(({
   children,
   onPress,
   onPressIn,
@@ -37,7 +38,7 @@ const Pressable = forwardRef<View, PressableProps>(({
       testID={testID}
       accessibilityLabel={accessibilityLabel}
     >
-      <View ref={ref} nativeID={id} style={[pressableStyle, style]}>
+      <View ref={ref as any} nativeID={id} style={[pressableStyle, style]}>
         {children}
       </View>
     </TouchableWithoutFeedback>

package/src/Pressable/Pressable.web.tsx

@@ -3,8 +3,9 @@ import { getWebProps } from 'react-native-unistyles/web';
 import { PressableProps } from './types';
 import { pressableStyles } from './Pressable.styles';
 import useMergeRefs from '../hooks/useMergeRefs';
+import type { IdealystElement } from '../utils/refTypes';
 
-const Pressable = forwardRef<HTMLDivElement, PressableProps>(({
+const Pressable = forwardRef<IdealystElement, PressableProps>(({
   children,
   onPress,
   onPressIn,
@@ -66,10 +67,7 @@ const Pressable = forwardRef<HTMLDivElement, PressableProps>(({
   };
 
   // Merge ref from getWebProps with forwarded ref
-  const mergedRef = useMergeRefs<HTMLDivElement>(
-    ref,
-    webProps.ref as React.Ref<HTMLDivElement>
-  );
+  const mergedRef = useMergeRefs(ref as any, webProps.ref as any);
 
   return (
     <div

package/src/Progress/Progress.native.tsx

@@ -14,13 +14,14 @@ import Text from '../Text';
 import { progressStyles } from './Progress.styles';
 import type { ProgressProps } from './types';
 import { Theme } from '@idealyst/theme';
+import type { IdealystElement } from '../utils/refTypes';
 
 const AnimatedCircle = Animated.createAnimatedComponent(Circle);
 
-const Progress = forwardRef<View, ProgressProps>(({
+const Progress = forwardRef<IdealystElement, ProgressProps>(({
   value = 0,
   max = 100,
-  variant = 'linear',
+  type = 'linear',
   intent = 'primary',
   size = 'md',
   indeterminate = false,
@@ -78,7 +79,7 @@ const Progress = forwardRef<View, ProgressProps>(({
     return 48;
   };
 
-  if (variant === 'circular') {
+  if (type === 'circular') {
     const circularSize = getCircularSize();
     const strokeWidth = size === 'sm' ? 3 : size === 'lg' ? 5 : 4;
     const radius = (circularSize - strokeWidth) / 2;
@@ -166,7 +167,7 @@ const Progress = forwardRef<View, ProgressProps>(({
   const linearTrackStyle = (progressStyles.linearTrack as any)({});
 
   return (
-    <View ref={ref} nativeID={id} style={[containerStyle, style]} testID={testID} accessibilityRole="progressbar">
+    <View ref={ref as any} nativeID={id} style={[containerStyle, style]} testID={testID} accessibilityRole="progressbar">
       <View style={linearTrackStyle}>
         {indeterminate ? (
           <Animated.View style={[indeterminateBarStyle, indeterminateAnimatedStyle]} />

package/src/Progress/Progress.web.tsx

@@ -5,12 +5,12 @@ import type { ProgressProps } from './types';
 
 /**
  * Visual indicator for task completion or loading status.
- * Supports linear and circular variants with determinate or indeterminate states.
+ * Supports linear and circular types with determinate or indeterminate states.
  */
 const Progress: React.FC<ProgressProps> = ({
   value = 0,
   max = 100,
-  variant = 'linear',
+  type = 'linear',
   intent = 'primary',
   size = 'md',
   indeterminate = false,
@@ -43,7 +43,7 @@ const Progress: React.FC<ProgressProps> = ({
     return 48;
   };
 
-  if (variant === 'circular') {
+  if (type === 'circular') {
     const circularSize = getCircularSize();
     const strokeWidth = size === 'sm' ? 3 : size === 'lg' ? 5 : 4;
     const radius = (circularSize - strokeWidth) / 2;

package/src/Progress/types.ts

@@ -5,11 +5,11 @@ import { BaseProps } from '../utils/viewStyleProps';
 // Component-specific type aliases for future extensibility
 export type ProgressIntentVariant = Intent;
 export type ProgressSizeVariant = Size;
-export type ProgressVariant = 'linear' | 'circular';
+export type ProgressType = 'linear' | 'circular';
 
 /**
  * Visual indicator for task completion or loading status.
- * Supports linear and circular variants with determinate and indeterminate modes.
+ * Supports linear and circular types with determinate and indeterminate modes.
  */
 export interface ProgressProps extends BaseProps {
   /**
@@ -17,7 +17,7 @@ export interface ProgressProps extends BaseProps {
    */
   value?: number;
   max?: number;
-  variant?: ProgressVariant;
+  type?: ProgressType;
   intent?: ProgressIntentVariant;
   size?: ProgressSizeVariant;
   indeterminate?: boolean;

package/src/RadioButton/RadioButton.native.tsx

@@ -1,12 +1,13 @@
-import React, { ComponentRef, forwardRef, useMemo } from 'react';
+import React, { forwardRef, useMemo } from 'react';
 import { View, Pressable, Animated } from 'react-native';
 import Text from '../Text';
 import { radioButtonStyles } from './RadioButton.styles';
 import type { RadioButtonProps } from './types';
 import { useRadioGroup } from './RadioGroup.native';
 import { getNativeSelectionAccessibilityProps } from '../utils/accessibility';
+import type { IdealystElement } from '../utils/refTypes';
 
-const RadioButton = forwardRef<ComponentRef<typeof Pressable>, RadioButtonProps>(({
+const RadioButton = forwardRef<IdealystElement, RadioButtonProps>(({
   value,
   checked: checkedProp,
   onPress,
@@ -109,7 +110,7 @@ const RadioButton = forwardRef<ComponentRef<typeof Pressable>, RadioButtonProps>
 
   return (
     <Pressable
-      ref={ref}
+      ref={ref as any}
       nativeID={id}
       onPress={handlePress}
       disabled={disabled}