@idealyst/components 1.2.20 → 1.2.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/components",
-  "version": "1.2.20",
+  "version": "1.2.22",
   "description": "Shared component library for React and React Native",
   "documentation": "https://github.com/IdealystIO/idealyst-framework/tree/main/packages/components#readme",
   "readme": "README.md",
@@ -56,7 +56,7 @@
     "publish:npm": "npm publish"
   },
   "peerDependencies": {
-    "@idealyst/theme": "^1.2.20",
+    "@idealyst/theme": "^1.2.22",
     "@mdi/js": ">=7.0.0",
     "@mdi/react": ">=1.0.0",
     "@react-native-vector-icons/common": ">=12.0.0",
@@ -106,7 +106,7 @@
     }
   },
   "devDependencies": {
-    "@idealyst/theme": "^1.2.20",
+    "@idealyst/theme": "^1.2.22",
     "@idealyst/tooling": "^1.2.4",
     "@mdi/react": "^1.6.1",
     "@types/react": "^19.1.0",

package/src/Accordion/Accordion.native.tsx

@@ -41,7 +41,6 @@ const AccordionItem: React.FC<AccordionItemProps> = ({
   const itemStyle = (accordionStyles.item as any)({ type, isLast });
   const headerStyle = (accordionStyles.header as any)({});
   const iconStyle = (accordionStyles.icon as any)({});
-  const contentStyle = (accordionStyles.content as any)({});
   const titleStyle = (accordionStyles.title as any)({});
   const contentInnerStyle = (accordionStyles.contentInner as any)({});
 

package/src/ActivityIndicator/ActivityIndicator.native.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useMemo } from 'react';
+import { forwardRef, useMemo } from 'react';
 import { ActivityIndicator as RNActivityIndicator, View } from 'react-native';
 import { ActivityIndicatorProps } from './types';
 import { activityIndicatorStyles } from './ActivityIndicator.styles';

package/src/ActivityIndicator/ActivityIndicator.web.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useMemo } from 'react';
+import { forwardRef, useMemo } from 'react';
 import { getWebProps } from 'react-native-unistyles/web';
 import { ActivityIndicatorProps } from './types';
 import { activityIndicatorStyles } from './ActivityIndicator.styles';

package/src/Alert/Alert.native.tsx

@@ -1,4 +1,4 @@
-import React, { isValidElement, forwardRef, ComponentRef } from 'react';
+import { isValidElement, forwardRef, ComponentRef } from 'react';
 import { View, Text, TouchableOpacity } from 'react-native';
 import MaterialDesignIcons from '@react-native-vector-icons/material-design-icons';
 import { alertStyles } from './Alert.styles';

package/src/Alert/Alert.web.tsx

@@ -1,4 +1,4 @@
-import React, { isValidElement, forwardRef } from 'react';
+import { isValidElement, forwardRef } from 'react';
 import { getWebProps } from 'react-native-unistyles/web';
 import { alertStyles } from './Alert.styles';
 import type { AlertProps } from './types';

package/src/Avatar/Avatar.native.tsx

@@ -1,4 +1,4 @@
-import React, { useState, forwardRef, useMemo } from 'react';
+import { useState, forwardRef, useMemo } from 'react';
 import { View, Text, Image } from 'react-native';
 import { AvatarProps } from './types';
 import { avatarStyles } from './Avatar.styles';

package/src/Avatar/Avatar.web.tsx

@@ -1,4 +1,4 @@
-import React, { useState, forwardRef, useMemo } from 'react';
+import { useState, forwardRef, useMemo } from 'react';
 import { getWebProps } from 'react-native-unistyles/web';
 import { AvatarProps } from './types';
 import { avatarStyles } from './Avatar.styles';

package/src/Badge/Badge.native.tsx

@@ -1,4 +1,4 @@
-import React, { isValidElement, forwardRef } from 'react';
+import { isValidElement, forwardRef } from 'react';
 import { View, Text } from 'react-native';
 import MaterialDesignIcons from '@react-native-vector-icons/material-design-icons';
 import { BadgeProps } from './types';

package/src/Button/Button.native.tsx

@@ -1,11 +1,10 @@
-import React, { ComponentRef, forwardRef, isValidElement, useMemo } from 'react';
+import { ComponentRef, 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 { useUnistyles } from 'react-native-unistyles';
 
 const Button = forwardRef<ComponentRef<typeof TouchableOpacity>, ButtonProps>((props, ref) => {
   const {
@@ -57,16 +56,6 @@ const Button = forwardRef<ComponentRef<typeof TouchableOpacity>, ButtonProps>((p
   // Gradient is only applicable to contained buttons
   const showGradient = gradient && type === 'contained';
 
-  // Get gradient overlay colors (transparent to semi-transparent black/white)
-  // Note: Use explicit rgba(0,0,0,0) instead of 'transparent' for RN SVG compatibility
-  const getGradientColors = (): [string, string] => {
-    switch (gradient) {
-      case 'darken': return ['rgba(0, 0, 0, 0)', 'rgba(0, 0, 0, 0.15)'];
-      case 'lighten': return ['rgba(255, 255, 255, 0)', 'rgba(255, 255, 255, 0.2)'];
-      default: return ['rgba(0, 0, 0, 0)', 'rgba(0, 0, 0, 0)'];
-    }
-  };
-
   // Map button size to icon size
   const iconSizeMap: Record<string, number> = {
     xs: 12,

package/src/Card/Card.native.tsx

@@ -1,6 +1,5 @@
-import React, { forwardRef, ComponentRef, useMemo } from 'react';
+import { forwardRef, ComponentRef, useMemo } from 'react';
 import { View, Pressable } from 'react-native';
-import { useUnistyles } from 'react-native-unistyles';
 import { CardProps } from './types';
 import { cardStyles } from './Card.styles';
 import { getNativeInteractiveAccessibilityProps } from '../utils/accessibility';
@@ -9,7 +8,7 @@ const Card = forwardRef<ComponentRef<typeof View> | ComponentRef<typeof Pressabl
   children,
   type = 'elevated',
   radius = 'md',
-  intent = 'neutral',
+  intent: _intent = 'neutral',
   clickable = false,
   onPress,
   disabled = false,

package/src/Card/Card.web.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useMemo } from 'react';
+import { forwardRef, useMemo } from 'react';
 import { getWebProps } from 'react-native-unistyles/web';
 import { CardProps } from './types';
 import { cardStyles } from './Card.styles';
@@ -14,7 +14,7 @@ const Card = forwardRef<HTMLDivElement | HTMLButtonElement, CardProps>(({
   type: typeProp,
   variant,
   radius = 'md',
-  intent,
+  intent: _intent,
   clickable = false,
   onPress,
   disabled = false,

package/src/Checkbox/Checkbox.native.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, forwardRef, useMemo } from 'react';
+import { useState, useEffect, forwardRef, useMemo } from 'react';
 import { View, Text, Pressable } from 'react-native';
 import MaterialDesignIcons from '@react-native-vector-icons/material-design-icons';
 import { CheckboxProps } from './types';
@@ -21,7 +21,7 @@ const Checkbox = forwardRef<View, CheckboxProps>(({
   marginHorizontal,
   style,
   testID,
-  required = false,
+  required: _required = false,
   error,
   helperText,
   id,

package/src/Chip/Chip.native.tsx

@@ -1,4 +1,4 @@
-import React, { isValidElement, forwardRef, ComponentRef } from 'react';
+import { isValidElement, forwardRef, ComponentRef } from 'react';
 import { Pressable, Text, View } from 'react-native';
 import MaterialDesignIcons from '@react-native-vector-icons/material-design-icons';
 import { chipStyles } from './Chip.styles';

package/src/Dialog/Dialog.native.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, forwardRef, useMemo } from 'react';
+import { useEffect, forwardRef, useMemo } from 'react';
 import { Modal, View, Text, TouchableOpacity, TouchableWithoutFeedback, BackHandler, GestureResponderEvent } from 'react-native';
 import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing } from 'react-native-reanimated';
 import { DialogProps } from './types';
@@ -14,7 +14,7 @@ const Dialog = forwardRef<View, DialogProps>(({
   type = 'default',
   showCloseButton = true,
   closeOnBackdropClick = true,
-  animationType = 'fade',
+  animationType: _animationType = 'fade',
   style,
   testID,
   id,

package/src/Divider/Divider.native.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import { forwardRef } from 'react';
 import { View, Text } from 'react-native';
 import { DividerProps } from './types';
 import { dividerStyles } from './Divider.styles';

package/src/Divider/Divider.styles.tsx

@@ -16,7 +16,6 @@ type DividerThickness = 'thin' | 'md' | 'thick';
 type DividerType = 'solid' | 'dashed' | 'dotted';
 type DividerIntent = Intent | 'secondary' | 'neutral' | 'info';
 type DividerSpacing = 'none' | 'sm' | 'md' | 'lg';
-type DividerLength = 'full' | 'auto';
 
 export type DividerDynamicProps = {
     orientation?: DividerOrientation;

package/src/Divider/Divider.web.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import { forwardRef } from 'react';
 import { getWebProps } from 'react-native-unistyles/web';
 import { DividerProps } from './types';
 import { dividerStyles } from './Divider.styles';

package/src/Icon/Icon.native.tsx

@@ -2,7 +2,6 @@ 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 { useUnistyles } from 'react-native-unistyles';
 
 const Icon = forwardRef<any, IconProps>(({
   name,
@@ -15,8 +14,6 @@ const Icon = forwardRef<any, IconProps>(({
   accessibilityLabel,
   id,
 }: IconProps, ref) => {
-  const { theme } = useUnistyles();
-
   // Call dynamic style with variants - includes theme-reactive color
   const iconStyle = (iconStyles.icon as any)({ color, textColor, intent, size });
 

package/src/Icon/Icon.web.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import { forwardRef } from 'react';
 import MdiIcon from '@mdi/react';
 import { IconProps } from './types';
 import { iconStyles } from './Icon.styles';
@@ -23,7 +23,6 @@ const Icon = forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
     testID,
     accessibilityLabel,
     id,
-    ...restProps
   } = props;
 
   const { theme } = useUnistyles();

package/src/Image/Image.native.tsx

@@ -1,4 +1,4 @@
-import React, { useState, forwardRef } from 'react';
+import { useState, forwardRef } from 'react';
 import { Image as RNImage, View } from 'react-native';
 import { imageStyles } from './Image.styles';
 import type { ImageProps } from './types';

package/src/Input/Input.web.tsx

@@ -6,7 +6,7 @@ import { isIconName } from '../Icon/icon-resolver';
 import useMergeRefs from '../hooks/useMergeRefs';
 import { inputStyles } from './Input.styles';
 import { InputProps } from './types';
-import { getWebFormAriaProps, generateAccessibilityId, combineIds } from '../utils/accessibility';
+import { getWebFormAriaProps } from '../utils/accessibility';
 
 /**
  * Text input field with support for icons, password visibility toggle, and validation states.

package/src/List/List.native.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useMemo, Children, isValidElement, cloneElement } from 'react';
+import { forwardRef, useMemo, Children, isValidElement, cloneElement } from 'react';
 import { View, ScrollView } from 'react-native';
 import { listStyles } from './List.styles';
 import type { ListProps } from './types';

package/src/List/ListItem.native.tsx

@@ -1,4 +1,4 @@
-import React, { isValidElement, forwardRef, ComponentRef, useMemo } from 'react';
+import { isValidElement, forwardRef, ComponentRef, 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';

package/src/List/ListItem.web.tsx

@@ -1,4 +1,4 @@
-import React, { isValidElement } from 'react';
+import { isValidElement } from 'react';
 import { getWebProps } from 'react-native-unistyles/web';
 import { useUnistyles } from 'react-native-unistyles';
 import { getColorFromString, Intent, Theme, Color } from '@idealyst/theme';
@@ -9,7 +9,7 @@ import { isIconName } from '../Icon/icon-resolver';
 import { useListContext } from './ListContext';
 
 const ListItem: React.FC<ListItemProps & { isLast?: boolean }> = ({
-  id,
+  id: _id,
   label,
   children,
   leading,
@@ -46,14 +46,12 @@ const ListItem: React.FC<ListItemProps & { isLast?: boolean }> = ({
   const labelStyle = (listStyles.label as any)({ disabled, selected });
   const leadingStyle = (listStyles.leading as any)({});
   const trailingStyle = (listStyles.trailing as any)({});
-  const trailingIconStyle = (listStyles.trailingIcon as any)({});
   const labelContainerStyle = (listStyles.labelContainer as any)({});
 
   const itemProps = getWebProps([itemStyle, style]);
   const labelProps = getWebProps([labelStyle]);
   const leadingProps = getWebProps([leadingStyle]);
   const trailingProps = getWebProps([trailingStyle]);
-  const trailingIconProps = getWebProps([trailingStyle, trailingIconStyle]);
 
   const handleClick = () => {
     if (!disabled && onPress) {
@@ -74,7 +72,7 @@ const ListItem: React.FC<ListItemProps & { isLast?: boolean }> = ({
 
   // Helper to render leading/trailing icons
   // IconSvg uses size="1em" by default, sized by container's fontSize from styles
-  const renderElement = (element: typeof leading | typeof trailing, isTrailing = false) => {
+  const renderElement = (element: typeof leading | typeof trailing) => {
     if (!element) return null;
 
     if (isIconName(element)) {
@@ -112,7 +110,7 @@ const ListItem: React.FC<ListItemProps & { isLast?: boolean }> = ({
 
       {trailing && (
         <div {...trailingProps}>
-          {renderElement(trailing, true)}
+          {renderElement(trailing)}
         </div>
       )}
     </>

package/src/List/ListSection.native.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import { forwardRef } from 'react';
 import { View, Text } from 'react-native';
 import { listStyles } from './List.styles';
 import type { ListSectionProps } from './types';

package/src/List/types.ts

@@ -1,4 +1,4 @@
-import type { StyleProp, ViewStyle, TextStyle } from 'react-native';
+import type { StyleProp, ViewStyle } from 'react-native';
 import type { ReactNode } from 'react';
 import type { IconName } from '../Icon/icon-types';
 import { Size, Color, Intent } from '@idealyst/theme';

package/src/Menu/Menu.native.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState, isValidElement, cloneElement, forwardRef, useEffect, useMemo } from 'react';
+import { isValidElement, cloneElement, forwardRef, useEffect, useMemo } from 'react';
 import {
   View,
   Modal,

package/src/Menu/MenuItem.native.tsx

@@ -1,6 +1,5 @@
-import React, { isValidElement, forwardRef, ComponentRef } from 'react';
+import { isValidElement, forwardRef, ComponentRef } from 'react';
 import { Pressable, Text, View } from 'react-native';
-import { Icon } from '../Icon';
 import { menuItemStyles } from './MenuItem.styles';
 import type { MenuItem as MenuItemType, MenuSizeVariant } from './types';
 import MaterialDesignIcons from '@react-native-vector-icons/material-design-icons';

package/src/Popover/Popover.native.tsx

@@ -3,7 +3,7 @@ import { Modal, View, TouchableWithoutFeedback, BackHandler, Dimensions } from '
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { PopoverProps } from './types';
 import { popoverStyles } from './Popover.styles';
-import { calculateSmartPosition, calculateAvailableHeight } from '../utils/positionUtils.native';
+import { calculateSmartPosition } from '../utils/positionUtils.native';
 import { BoundedModalContent } from '../internal/BoundedModalContent.native';
 import { getNativeInteractiveAccessibilityProps } from '../utils/accessibility';
 
@@ -24,7 +24,7 @@ const Popover = forwardRef<View, PopoverProps>(({
   accessibilityHint,
   accessibilityRole,
   accessibilityHidden,
-}, ref) => {
+}, _ref) => {
   // Generate native accessibility props
   const nativeA11yProps = useMemo(() => {
     return getNativeInteractiveAccessibilityProps({
@@ -34,7 +34,6 @@ const Popover = forwardRef<View, PopoverProps>(({
       accessibilityHidden,
     });
   }, [accessibilityLabel, accessibilityHint, accessibilityRole, accessibilityHidden]);
-  const popoverRef = useRef<View>(null);
   const [popoverPosition, setPopoverPosition] = useState({ top: 0, left: 0, width: 0 });
   const [popoverSize, setPopoverSize] = useState({ width: 0, height: 0 });
   const anchorMeasurements = useRef({ x: 0, y: 0, width: 0, height: 0 });

package/src/Popover/Popover.web.tsx

@@ -19,7 +19,7 @@ const Popover = forwardRef<HTMLDivElement, PopoverProps>(({
   offset = 8,
   closeOnClickOutside = true,
   closeOnEscapeKey = true,
-  showArrow = false,
+  showArrow: _showArrow = false,
   testID,
   id,
   // Accessibility props

package/src/Pressable/Pressable.native.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import { forwardRef } from 'react';
 import { TouchableWithoutFeedback, View } from 'react-native';
 import { PressableProps } from './types';
 import { pressableStyles } from './Pressable.styles';
@@ -16,7 +16,7 @@ const Pressable = forwardRef<View, PressableProps>(({
   style,
   testID,
   accessibilityLabel,
-  accessibilityRole,
+  accessibilityRole: _accessibilityRole,
   id,
 }, ref) => {
   // Apply spacing variants

package/src/Pressable/Pressable.web.tsx

@@ -20,7 +20,7 @@ const Pressable = forwardRef<HTMLDivElement, PressableProps>(({
   accessibilityRole = 'button',
   id,
 }, ref) => {
-  const [isPressed, setIsPressed] = useState(false);
+  const [_isPressed, setIsPressed] = useState(false);
 
   const handleMouseDown = useCallback(() => {
     if (disabled) return;

package/src/Progress/Progress.native.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, forwardRef } from 'react';
+import { useEffect, forwardRef } from 'react';
 import { View } from 'react-native';
 import Animated, {
   useSharedValue,
@@ -44,7 +44,6 @@ const Progress = forwardRef<View, ProgressProps>(({
   const dynamicProps = { intent };
   const linearBarStyle = (progressStyles.linearBar as any)(dynamicProps);
   const indeterminateBarStyle = (progressStyles.indeterminateBar as any)(dynamicProps);
-  const circularBarStyle = (progressStyles.circularBar as any)(dynamicProps);
 
   // Animation values
   const animatedValue = useSharedValue(0);

package/src/RadioButton/RadioGroup.native.tsx

@@ -16,7 +16,7 @@ const RadioGroup = forwardRef<View, RadioGroupProps>(({
   value,
   onValueChange,
   disabled = false,
-  orientation = 'vertical',
+  orientation: _orientation = 'vertical',
   children,
   style,
   testID,

package/src/SVGImage/SVGImage.native.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import { forwardRef } from 'react';
 import { View } from 'react-native';
 import { SvgUri } from 'react-native-svg';
 import { SVGImageProps } from './types';

package/src/Screen/Screen.native.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import { forwardRef } from 'react';
 import { View as RNView, ScrollView as RNScrollView } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { ScreenProps } from './types';

package/src/Screen/Screen.web.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import { forwardRef } from 'react';
 import { getWebProps } from 'react-native-unistyles/web';
 import { ScreenProps } from './types';
 import { screenStyles } from './Screen.styles';

package/src/Select/Select.native.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef, forwardRef } from 'react';
+import { useState, useRef, forwardRef } from 'react';
 import {
   View,
   Text,

package/src/Select/Select.styles.tsx

@@ -56,7 +56,7 @@ export const selectStyles = defineStyle('Select', (theme: Theme) => ({
         marginBottom: 4,
     }),
 
-    trigger: ({ type = 'outlined', intent = 'neutral', disabled = false, error = false, focused = false }: SelectDynamicProps) => ({
+    trigger: ({ type: _type = 'outlined', intent: _intent = 'neutral', disabled = false, error: _error = false, focused: _focused = false }: SelectDynamicProps) => ({
         position: 'relative' as const,
         flexDirection: 'row' as const,
         alignItems: 'center' as const,

package/src/Skeleton/Skeleton.native.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, forwardRef, useMemo } from 'react';
+import { useEffect, forwardRef, useMemo } from 'react';
 import { View } from 'react-native';
 import Animated, {
   useSharedValue,
@@ -13,8 +13,8 @@ import type { SkeletonProps, SkeletonGroupProps } from './types';
 import { getNativeLiveRegionAccessibilityProps } from '../utils/accessibility';
 
 const Skeleton = forwardRef<View, SkeletonProps>(({
-  width = '100%',
-  height = 20,
+  width: _width = '100%',
+  height: _height = 20,
   shape = 'rectangle',
   borderRadius,
   animation = 'pulse',

package/src/Skeleton/Skeleton.web.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useMemo } from 'react';
+import { useMemo } from 'react';
 import { getWebProps } from 'react-native-unistyles/web';
 import { skeletonStyles } from './Skeleton.styles';
 import type { SkeletonProps, SkeletonGroupProps } from './types';

package/src/Slider/Slider.native.tsx

@@ -187,7 +187,7 @@ const Slider = forwardRef<View, SliderProps>(({
     };
   });
 
-  const percentage = ((value - min) / (max - min)) * 100;
+  const _percentage = ((value - min) / (max - min)) * 100;
 
   const renderIcon = () => {
     if (!icon) return null;

package/src/Slider/Slider.styles.tsx

@@ -31,11 +31,11 @@ function createIntentVariants(theme: Theme) {
 }
 
 // Create compound variants for intent-specific styles
-function createSliderCompoundVariants(theme: Theme): CompoundVariants<keyof SliderVariants> {
+function _createSliderCompoundVariants(theme: Theme): CompoundVariants<keyof SliderVariants> {
     const compoundVariants: CompoundVariants<keyof SliderVariants> = [];
 
     for (const intent in theme.intents) {
-        const intentValue = theme.intents[intent as Intent];
+        const _intentValue = theme.intents[intent as Intent];
 
         // filledTrack intent colors are handled inline since they need per-element targeting
         // thumb border color by intent

package/src/TabBar/TabBar.native.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect, forwardRef, ReactNode, useMemo } from 'react';
+import { useState, useRef, useEffect, forwardRef, ReactNode, useMemo } from 'react';
 import { View, TouchableOpacity, Text, ScrollView, LayoutChangeEvent } from 'react-native';
 import Animated, { useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated';
 import {

package/src/TabBar/TabBar.styles.tsx

@@ -91,7 +91,7 @@ export const tabBarStyles = defineStyle('TabBar', (theme: Theme) => ({
         } as const;
     },
 
-    tab: ({ type = 'standard', size = 'md', active = false, pillMode = 'light', disabled = false, iconPosition = 'left', justify = 'start' }: TabBarDynamicProps) => {
+    tab: ({ type = 'standard', size = 'md', active = false, pillMode: _pillMode = 'light', disabled = false, iconPosition = 'left', justify = 'start' }: TabBarDynamicProps) => {
         // Tab padding for pills
         const paddingMap: Record<Size, { paddingVertical: number; paddingHorizontal: number }> = {
             xs: { paddingVertical: 2, paddingHorizontal: 10 },
@@ -141,7 +141,7 @@ export const tabBarStyles = defineStyle('TabBar', (theme: Theme) => ({
         } as const;
     },
 
-    tabLabel: ({ type = 'standard', active = false, pillMode = 'light', disabled = false }: TabBarDynamicProps) => {
+    tabLabel: ({ type = 'standard', active = false, pillMode: _pillMode = 'light', disabled = false }: TabBarDynamicProps) => {
         let color = active ? theme.colors.text.primary : theme.colors.text.secondary;
         if (active) {
             if (type === 'pills') color = theme.colors.text.primary;
@@ -163,7 +163,7 @@ export const tabBarStyles = defineStyle('TabBar', (theme: Theme) => ({
         } as const;
     },
 
-    tabIcon: ({ active = false, disabled = false, iconPosition = 'left' }: TabBarDynamicProps) => ({
+    tabIcon: ({ active: _active = false, disabled = false, iconPosition = 'left' }: TabBarDynamicProps) => ({
         display: 'flex' as const,
         alignItems: 'center' as const,
         justifyContent: 'center' as const,

package/src/Table/Table.native.tsx

@@ -140,7 +140,7 @@ function TableInner<T = any>({
   data,
   type = 'standard',
   size = 'md',
-  stickyHeader = false,
+  stickyHeader: _stickyHeader = false,
   onRowPress,
   // Spacing variants from ContainerStyleProps
   gap,

package/src/Table/Table.styles.tsx

@@ -34,7 +34,7 @@ export type TableDynamicProps = {
  * Table styles with type/size handling.
  */
 export const tableStyles = defineStyle('Table', (theme: Theme) => ({
-    container: ({ type = 'standard' }: TableDynamicProps) => ({
+    container: ({ type: _type = 'standard' }: TableDynamicProps) => ({
         width: '100%',
         borderWidth: 1,
         borderStyle: 'solid' as const,
@@ -113,7 +113,7 @@ export const tableStyles = defineStyle('Table', (theme: Theme) => ({
         } as const;
     },
 
-    headerCell: ({ type = 'standard', align = 'left' }: TableDynamicProps) => ({
+    headerCell: ({ type = 'standard', align: _align = 'left' }: TableDynamicProps) => ({
         flexDirection: 'row' as const,
         alignItems: 'center' as const,
         fontWeight: '600' as const,

package/src/Table/Table.web.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, ReactNode } from 'react';
+import { useMemo, ReactNode } from 'react';
 import { getWebProps } from 'react-native-unistyles/web';
 import { tableStyles } from './Table.styles';
 import type { TableProps, TableColumn, TableType, TableSizeVariant, TableAlignVariant } from './types';
@@ -139,7 +139,7 @@ function Table<T = any>({
   data,
   type = 'standard',
   size = 'md',
-  stickyHeader = false,
+  stickyHeader: _stickyHeader = false,
   onRowPress,
   // Spacing variants from ContainerStyleProps
   gap,

package/src/Table/types.ts

@@ -1,4 +1,4 @@
-import type { StyleProp, ViewStyle, TextStyle } from 'react-native';
+import type { StyleProp, ViewStyle } from 'react-native';
 import type { ReactNode } from 'react';
 import { Size } from '@idealyst/theme';
 import { ContainerStyleProps } from '../utils/viewStyleProps';

package/src/Text/Text.native.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import { forwardRef } from 'react';
 import { Text as RNText } from 'react-native';
 import { TextProps } from './types';
 import { textStyles } from './Text.styles';

package/src/Text/Text.styles.tsx

@@ -67,7 +67,7 @@ declare module '@idealyst/theme' {
  */
 // @ts-ignore - $iterator patterns are expanded by Babel
 export const textStyles = defineStyle('Text', (theme: Theme) => ({
-    text: ({ color, typography, weight, align }: TextStyleParams) => ({
+    text: ({ color, typography: _typography, weight: _weight, align: _align }: TextStyleParams) => ({
         margin: 0,
         padding: 0,
         // Base color - can be overridden by extensions using any of the params

package/src/Text/Text.web.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import { forwardRef } from 'react';
 import { getWebProps } from 'react-native-unistyles/web';
 import { TextProps } from './types';
 import { textStyles } from './Text.styles';

package/src/TextArea/TextArea.native.tsx

@@ -1,4 +1,4 @@
-import React, { useState, forwardRef, useMemo } from 'react';
+import { useState, forwardRef, useMemo } from 'react';
 import { View, TextInput, NativeSyntheticEvent, TextInputContentSizeChangeEventData } from 'react-native';
 import { textAreaStyles } from './TextArea.styles';
 import Text from '../Text';

package/src/TextArea/TextArea.styles.tsx

@@ -25,7 +25,7 @@ export type TextAreaVariants = {
 };
 
 // Create intent variants dynamically from theme
-function createIntentVariants(theme: Theme) {
+function _createIntentVariants(theme: Theme) {
     const variants: Record<string, object> = {};
     for (const intent in theme.intents) {
         variants[intent] = {};

package/src/Tooltip/Tooltip.native.tsx

@@ -8,7 +8,7 @@ const Tooltip = forwardRef<View, TooltipProps>(({
   content,
   children,
   placement = 'top',
-  delay = 200,
+  delay: _delay = 200,
   intent = 'neutral',
   size = 'md',
   style,

package/src/Video/Video.native.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
-import { View, StyleSheet } from 'react-native';
+import { View } from 'react-native';
 import { videoStyles } from './Video.styles';
-import type { VideoProps, VideoSource } from './types';
+import type { VideoProps } from './types';
 import { getNativeAccessibilityProps } from '../utils/accessibility';
 
 // Import react-native-video - it's a peer dependency
@@ -17,8 +17,8 @@ try {
 const Video = React.forwardRef<View, VideoProps>(({
   source,
   poster,
-  width,
-  height,
+  width: _width,
+  height: _height,
   aspectRatio,
   controls = true,
   autoPlay = false,
@@ -26,8 +26,8 @@ const Video = React.forwardRef<View, VideoProps>(({
   muted = false,
   onLoad,
   onError,
-  onPlay,
-  onPause,
+  onPlay: _onPlay,
+  onPause: _onPause,
   onEnd,
   onProgress,
   borderRadius,
@@ -73,7 +73,7 @@ const Video = React.forwardRef<View, VideoProps>(({
     style,
   ];
 
-  const handleLoad = (data: any) => {
+  const handleLoad = (_data: any) => {
     onLoad?.();
   };
 

package/src/View/View.native.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import { forwardRef } from 'react';
 import { View as RNView, ScrollView as RNScrollView, ViewStyle, StyleSheet } from 'react-native';
 import { useResponsiveStyle, ResponsiveStyle } from '@idealyst/theme';
 import { ViewProps } from './types';

package/src/examples/AlertExamples.tsx

@@ -1,5 +1,5 @@
-import React, { useState } from 'react';
-import { Alert, Screen, View, Text, Divider, Button } from '../index';
+import { useState } from 'react';
+import { Alert, Screen, View, Text, Button } from '../index';
 export const AlertExamples = () => {
   const [successVisible, setSuccessVisible] = useState(true);
   const [errorVisible, setErrorVisible] = useState(true);

package/src/examples/AvatarExamples.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Screen, View, Text, Avatar } from '../index';
 
 export const AvatarExamples = () => {

package/src/examples/BadgeExamples.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Screen, View, Text, Badge, Button } from '../index';
 
 export const BadgeExamples = () => {

package/src/examples/BreadcrumbExamples.tsx

@@ -1,5 +1,4 @@
-import React from 'react';
-import { Screen, View , Text, Breadcrumb, Divider, Icon, BreadcrumbItem } from '../index';
+import { Screen, View , Text, Breadcrumb, Icon, BreadcrumbItem } from '../index';
 
 export const BreadcrumbExamples = () => {
   const basicItems: BreadcrumbItem[] = [

package/src/examples/CardExamples.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Screen, View, Text, Card, Button } from '../index';
 
 export const CardExamples = () => {

package/src/examples/CheckboxExamples.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { Screen, View, Text, Checkbox } from '../index';
 
 export const CheckboxExamples = () => {

package/src/examples/ChipExamples.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { Screen, View, Text, Chip, Divider } from '@idealyst/components';
 
 export const ChipExamples = () => {

package/src/examples/DividerExamples.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Screen, View, Text, Divider, Card } from '../index';
 
 export const DividerExamples = () => {

package/src/examples/IconExamples.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { Screen, View, Icon, Text, Button } from '../index';
 import type { IconName } from '../Icon/icon-types';
 

package/src/examples/InputExamples.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { Screen, View, Text, Input } from '../index';
 
 export const InputExamples = () => {

package/src/examples/LinkExamples.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Screen, View, Link, Text, Button, Card, Icon } from '@idealyst/components';
 
 export const LinkExamples = () => {

package/src/examples/ScreenExamples.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Screen, View, Text } from '../index';
 
 export const ScreenExamples = () => {

package/src/examples/SelectExamples.tsx

@@ -1,5 +1,5 @@
-import React, { useState } from 'react';
-import { Screen, View, Text, Select, Card, Button, Icon, Divider } from '../index';
+import { useState } from 'react';
+import { Screen, View, Text, Select, Card, Button, Divider } from '../index';
 
 // Mock data for examples
 const fruitOptions = [
@@ -58,7 +58,6 @@ const statusOptions = [
 export const SelectExamples = () => {
   // State for all select examples
   const [basicSelect, setBasicSelect] = useState('');
-  const [fruitSelect, setFruitSelect] = useState('apple');
   const [countrySelect, setCountrySelect] = useState('');
   const [prioritySelect, setPrioritySelect] = useState('medium');
   const [statusSelect, setStatusSelect] = useState('draft');

package/src/examples/SkeletonExamples.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Screen, View, Text, Skeleton, SkeletonGroup, Divider, Card } from '../index';
 
 export const SkeletonExamples = () => {

package/src/internal/BoundedModalContent.native.tsx

@@ -21,7 +21,7 @@ export const BoundedModalContent: React.FC<BoundedModalContentProps> = ({
   top,
   left,
   width,
-  maxHeight = 500,
+  maxHeight: _maxHeight = 500,
   style,
   onLayout,
 }) => {

package/src/utils/styleHelpers.ts

@@ -35,7 +35,7 @@ export function deepMerge<T extends Record<string, any>, S extends Record<string
   return result as T & S
 }
 
-export function buildSizeVariants<T>(
+export function buildSizeVariants(
   theme: Theme,
   component: string,
   builder: (value: any) => any