@idealyst/components 1.2.13 → 1.2.15

package/src/Slider/Slider.web.tsx

@@ -5,7 +5,7 @@ import type { SliderProps } from './types';
 import { IconSvg } from '../Icon/IconSvg/IconSvg.web';
 import { isIconName } from '../Icon/icon-resolver';
 import useMergeRefs from '../hooks/useMergeRefs';
-import { getWebRangeAriaProps, generateAccessibilityId, SLIDER_KEYS } from '../utils/accessibility';
+import { getWebRangeAriaProps, generateAccessibilityId, SLIDER_KEYS, matchesKey } from '../utils/accessibility';
 
 /**
  * Range slider for selecting numeric values within a min/max range.
@@ -55,20 +55,21 @@ const Slider = forwardRef<HTMLDivElement, SliderProps>(({
   // Apply variants
   sliderStyles.useVariants({
     size,
+    intent,
     disabled,
     margin,
     marginVertical,
     marginHorizontal,
   });
 
-  const containerProps = getWebProps([(sliderStyles.container as any)({}), style as any]);
-  const wrapperProps = getWebProps([sliderStyles.sliderWrapper]);
-  const trackProps = getWebProps([(sliderStyles.track as any)({})]);
-  const thumbIconProps = getWebProps([(sliderStyles.thumbIcon as any)({ intent })]);
-  const valueLabelProps = getWebProps([sliderStyles.valueLabel]);
-  const minMaxLabelsProps = getWebProps([sliderStyles.minMaxLabels]);
-  const minMaxLabelProps = getWebProps([sliderStyles.minMaxLabel]);
-  const marksProps = getWebProps([sliderStyles.marks]);
+  const containerProps = getWebProps([sliderStyles.container as any, style as any]);
+  const wrapperProps = getWebProps([sliderStyles.sliderWrapper as any]);
+  const trackProps = getWebProps([sliderStyles.track as any]);
+  const thumbIconProps = getWebProps([sliderStyles.thumbIcon as any]);
+  const valueLabelProps = getWebProps([sliderStyles.valueLabel as any]);
+  const minMaxLabelsProps = getWebProps([sliderStyles.minMaxLabels as any]);
+  const minMaxLabelProps = getWebProps([sliderStyles.minMaxLabel as any]);
+  const marksProps = getWebProps([sliderStyles.marks as any]);
 
   const clampValue = useCallback((val: number) => {
     const clampedValue = Math.min(Math.max(val, min), max);
@@ -138,26 +139,25 @@ const Slider = forwardRef<HTMLDivElement, SliderProps>(({
   const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
     if (disabled) return;
 
-    const key = e.key;
     let newValue = value;
     const largeStep = (max - min) / 10; // 10% of range for PageUp/PageDown
 
-    if (SLIDER_KEYS.increase.includes(key)) {
+    if (matchesKey(e, SLIDER_KEYS.increase)) {
       e.preventDefault();
       newValue = clampValue(value + step);
-    } else if (SLIDER_KEYS.decrease.includes(key)) {
+    } else if (matchesKey(e, SLIDER_KEYS.decrease)) {
       e.preventDefault();
       newValue = clampValue(value - step);
-    } else if (SLIDER_KEYS.min.includes(key)) {
+    } else if (matchesKey(e, SLIDER_KEYS.min)) {
       e.preventDefault();
       newValue = min;
-    } else if (SLIDER_KEYS.max.includes(key)) {
+    } else if (matchesKey(e, SLIDER_KEYS.max)) {
       e.preventDefault();
       newValue = max;
-    } else if (key === 'PageUp') {
+    } else if (matchesKey(e, SLIDER_KEYS.increaseLarge)) {
       e.preventDefault();
       newValue = clampValue(value + largeStep);
-    } else if (key === 'PageDown') {
+    } else if (matchesKey(e, SLIDER_KEYS.decreaseLarge)) {
       e.preventDefault();
       newValue = clampValue(value - largeStep);
     }
@@ -215,10 +215,10 @@ const Slider = forwardRef<HTMLDivElement, SliderProps>(({
   const percentage = ((value - min) / (max - min)) * 100;
 
   // Dynamic styles with percentage
-  const filledTrackProps = getWebProps([(sliderStyles.filledTrack as any)({ intent }), { width: `${percentage}%` }]);
+  const filledTrackProps = getWebProps([sliderStyles.filledTrack as any, { width: `${percentage}%` }]);
   const thumbProps = getWebProps([
-    (sliderStyles.thumb as any)({ intent, disabled }),
-    isDragging && sliderStyles.thumbActive,
+    sliderStyles.thumb as any,
+    isDragging && (sliderStyles.thumbActive as any),
     { left: `${percentage}%` }
   ]);
 
@@ -269,8 +269,8 @@ const Slider = forwardRef<HTMLDivElement, SliderProps>(({
             <div {...marksProps}>
               {marks.map((mark) => {
                 const markPercentage = ((mark.value - min) / (max - min)) * 100;
-                const markProps = getWebProps([sliderStyles.mark, { left: `${markPercentage}%` }]);
-                const markLabelProps = getWebProps([sliderStyles.markLabel, { left: `${markPercentage}%` }]);
+                const markProps = getWebProps([sliderStyles.mark as any, { left: `${markPercentage}%` }]);
+                const markLabelProps = getWebProps([sliderStyles.markLabel as any, { left: `${markPercentage}%` }]);
                 return (
                   <div key={mark.value}>
                     <div {...markProps} />
@@ -287,8 +287,8 @@ const Slider = forwardRef<HTMLDivElement, SliderProps>(({
 
           {/* Thumb */}
           <div
-            ref={thumbRef}
             {...thumbProps}
+            ref={thumbRef}
           >
             {renderIcon()}
           </div>

package/src/TabBar/TabBar.native.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useRef, useEffect, forwardRef, ReactNode, useMemo } from 'react';
-import { View, TouchableOpacity, Text, ScrollView } from 'react-native';
+import { View, TouchableOpacity, Text, ScrollView, LayoutChangeEvent } from 'react-native';
 import Animated, { useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated';
 import {
   tabBarContainerStyles,
@@ -187,7 +187,7 @@ const TabBar = forwardRef<View, TabBarProps>(({
             return (
               <TouchableOpacity
                 key={item.value}
-                onLayout={(event) => {
+                onLayout={(event: LayoutChangeEvent) => {
                   const { x, width } = event.nativeEvent.layout;
                   handleTabLayout(item.value, x, width);
                 }}

package/src/Text/Text.web.tsx

@@ -1,20 +1,43 @@
 import React, { forwardRef } from 'react';
 import { getWebProps } from 'react-native-unistyles/web';
-import { TextProps } from './types';
+import type { Typography, Size } from '@idealyst/theme';
+import { TextProps, TextSizeVariant } from './types';
 import { textStyles } from './Text.styles';
 import useMergeRefs from '../hooks/useMergeRefs';
 
+// Map Size values to Typography values
+const SIZE_TO_TYPOGRAPHY: Record<Size, Typography> = {
+  'xs': 'caption',
+  'sm': 'body2',
+  'md': 'body1',
+  'lg': 'subtitle1',
+  'xl': 'h5',
+  '2xl': 'h4',
+  '3xl': 'h3',
+};
+
+// Convert TextSizeVariant to Typography (handles both Size and Typography values)
+function resolveTypography(value: TextSizeVariant | undefined): Typography {
+  if (!value) return 'body1';
+  // If it's a Size value, map it to Typography
+  if (value in SIZE_TO_TYPOGRAPHY) {
+    return SIZE_TO_TYPOGRAPHY[value as Size];
+  }
+  // Otherwise it's already a Typography value
+  return value as Typography;
+}
+
 /**
  * Typography component for displaying text with predefined styles and semantic variants.
  * Supports multiple typography scales, colors, weights, and alignments.
  */
 const Text = forwardRef<HTMLSpanElement, TextProps>(({
   children,
-  typography = 'body1',
+  typography: typographyProp,
+  size,
   weight,
   color = 'primary',
   align = 'left',
-  pre = false,
   // Spacing variants from TextSpacingStyleProps
   gap,
   padding,
@@ -24,6 +47,9 @@ const Text = forwardRef<HTMLSpanElement, TextProps>(({
   testID,
   id,
 }, ref) => {
+  // size is an alias for typography - size takes precedence if both are set
+  const typography = resolveTypography(size ?? typographyProp);
+
   textStyles.useVariants({
     typography,
     weight,

package/src/Text/types.ts

@@ -1,4 +1,4 @@
-import { Text, Typography } from '@idealyst/theme';
+import { Text, Typography, Size } from '@idealyst/theme';
 import type { ReactNode } from 'react';
 import type { StyleProp, TextStyle } from 'react-native';
 import { TextSpacingStyleProps } from '../utils/viewStyleProps';
@@ -8,6 +8,12 @@ export type TextColorVariant = Text;
 export type TextWeightVariant = 'light' | 'normal' | 'medium' | 'semibold' | 'bold';
 export type TextAlignVariant = 'left' | 'center' | 'right';
 export type TextTypographyVariant = Typography;
+/**
+ * Text size variant - accepts both Typography values and Size shorthand
+ * Typography: 'h1', 'h2', 'body1', 'caption', etc.
+ * Size: 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl'
+ */
+export type TextSizeVariant = Typography | Size;
 
 /**
  * Typography component for rendering text with consistent styling.
@@ -25,6 +31,13 @@ export interface TextProps extends TextSpacingStyleProps {
    */
   typography?: TextTypographyVariant;
 
+  /**
+   * Text size - accepts Typography names or Size shorthand.
+   * Typography: 'h1', 'h2', 'body1', 'caption', etc.
+   * Size: 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl'
+   */
+  size?: TextSizeVariant;
+
   /**
    * The weight of the text.
    * Overrides the weight from typography if both are set.

package/src/TextArea/TextArea.styles.tsx

@@ -1,8 +1,8 @@
 /**
- * TextArea styles using defineStyle with dynamic props.
+ * TextArea styles using static styles with variants.
  */
 import { StyleSheet } from 'react-native-unistyles';
-import { defineStyle, ThemeStyleWrapper } from '@idealyst/theme';
+import { defineStyle, ThemeStyleWrapper, CompoundVariants } from '@idealyst/theme';
 import type { Theme as BaseTheme, Intent, Size } from '@idealyst/theme';
 import { ViewStyleSize } from '../utils/viewStyleProps';
 
@@ -12,26 +12,32 @@ void StyleSheet;
 // Wrap theme for $iterator support
 type Theme = ThemeStyleWrapper<BaseTheme>;
 
-type ResizeMode = 'none' | 'vertical' | 'horizontal' | 'both';
-
-export type TextAreaDynamicProps = {
-    size?: Size;
-    intent?: Intent;
-    disabled?: boolean;
-    hasError?: boolean;
-    resize?: ResizeMode;
-    isNearLimit?: boolean;
-    isAtLimit?: boolean;
+export type TextAreaVariants = {
+    size: Size;
+    intent: Intent;
+    disabled: boolean;
+    hasError: boolean;
+    isNearLimit: boolean;
+    isAtLimit: boolean;
     margin?: ViewStyleSize;
     marginVertical?: ViewStyleSize;
     marginHorizontal?: ViewStyleSize;
 };
 
+// Create intent variants dynamically from theme
+function createIntentVariants(theme: Theme) {
+    const variants: Record<string, object> = {};
+    for (const intent in theme.intents) {
+        variants[intent] = {};
+    }
+    return variants;
+}
+
 /**
- * TextArea styles with intent/disabled/error handling.
+ * TextArea styles with static styles and variants.
  */
 export const textAreaStyles = defineStyle('TextArea', (theme: Theme) => ({
-    container: (_props: TextAreaDynamicProps) => ({
+    container: {
         display: 'flex' as const,
         flexDirection: 'column' as const,
         gap: 4,
@@ -49,70 +55,103 @@ export const textAreaStyles = defineStyle('TextArea', (theme: Theme) => ({
                 marginHorizontal: theme.sizes.$view.padding,
             },
         },
-    }),
+    },
 
-    label: ({ disabled = false }: TextAreaDynamicProps) => ({
+    label: {
         fontSize: 14,
         fontWeight: '500' as const,
         color: theme.colors.text.primary,
-    }),
+        variants: {
+            disabled: {
+                true: { opacity: 0.5 },
+                false: { opacity: 1 },
+            },
+        },
+    },
 
-    textareaContainer: (_props: TextAreaDynamicProps) => ({
+    textareaContainer: {
         position: 'relative' as const,
         variants: {
+            disabled: {
+                true: { opacity: 0.8 },
+                false: { opacity: 1 },
+            },
+        },
+    },
+
+    textarea: {
+        width: '100%',
+        color: theme.colors.text.primary,
+        variants: {
+            size: {
+                fontSize: theme.sizes.$textarea.fontSize,
+                padding: theme.sizes.$textarea.padding,
+                lineHeight: theme.sizes.$textarea.lineHeight,
+                minHeight: theme.sizes.$textarea.minHeight,
+            },
             disabled: {
                 true: {
-                    opacity: 1,
+                    opacity: 0.5,
+                    _web: {
+                        cursor: 'not-allowed',
+                    },
                 },
                 false: {
-                    opacity: 0.8,
-                },
-            },
-        }
-    }),
-
-    textarea: ({ disabled = false, resize = 'none' }: TextAreaDynamicProps) => ({
-            width: '100%',
-            color: theme.colors.text.primary,
-            opacity: disabled ? 0.5 : 1,
-            variants: {
-                size: {
-                    fontSize: theme.sizes.$textarea.fontSize,
-                    padding: theme.sizes.$textarea.padding,
-                    lineHeight: theme.sizes.$textarea.lineHeight,
-                    minHeight: theme.sizes.$textarea.minHeight,
+                    opacity: 1,
+                    _web: {
+                        cursor: 'text',
+                    },
                 },
             },
-            _web: {
-                fontFamily: 'inherit',
-                outline: 'none',
-                transition: 'border-color 0.2s ease, box-shadow 0.2s ease',
-                boxSizing: 'border-box',
-                overflowY: 'hidden',
-                cursor: disabled ? 'not-allowed' : 'text',
-                resize: resize,
-            },
-    }),
+        },
+        _web: {
+            fontFamily: 'inherit',
+            outline: 'none',
+            transition: 'border-color 0.2s ease, box-shadow 0.2s ease',
+            boxSizing: 'border-box',
+            overflowY: 'hidden',
+        },
+    },
 
-    helperText: ({ hasError = false }: TextAreaDynamicProps) => ({
+    helperText: {
         fontSize: 12,
-        color: hasError ? theme.intents.error.primary : theme.colors.text.secondary,
-    }),
+        variants: {
+            hasError: {
+                true: { color: theme.intents.error.primary },
+                false: { color: theme.colors.text.secondary },
+            },
+        },
+    },
 
-    footer: (_props: TextAreaDynamicProps) => ({
+    footer: {
         display: 'flex' as const,
         flexDirection: 'row' as const,
         justifyContent: 'space-between' as const,
         alignItems: 'center' as const,
         gap: 4,
-    }),
+    },
 
-    characterCount: ({ isNearLimit = false, isAtLimit = false }: TextAreaDynamicProps) => ({
+    characterCount: {
         fontSize: 12,
-        color: isAtLimit
-            ? theme.intents.error.primary
-            : isNearLimit
-                ? theme.intents.warning.primary
-                : theme.colors.text.secondary,
-    }),
+        color: theme.colors.text.secondary,
+        variants: {
+            isAtLimit: {
+                true: { color: theme.intents.error.primary },
+                false: {},
+            },
+            isNearLimit: {
+                true: {},
+                false: {},
+            },
+        },
+        compoundVariants: [
+            {
+                isNearLimit: true,
+                isAtLimit: false,
+                styles: {
+                    color: theme.intents.warning.primary,
+                },
+            },
+        ] as CompoundVariants<keyof TextAreaVariants>,
+    },
 }));

package/src/TextArea/TextArea.web.tsx

@@ -117,37 +117,29 @@ const TextArea = forwardRef<HTMLDivElement, TextAreaProps>(({
     accessibilityAutoComplete,
   ]);
 
+  const isNearLimit = maxLength ? value.length >= maxLength * 0.9 : false;
+  const isAtLimit = maxLength ? value.length >= maxLength : false;
+
   // Apply variants
   textAreaStyles.useVariants({
     size,
     intent,
     disabled,
     hasError,
-    resize,
-    isNearLimit: maxLength ? value.length >= maxLength * 0.9 : false,
-    isAtLimit: maxLength ? value.length >= maxLength : false,
+    isNearLimit,
+    isAtLimit,
     margin,
     marginVertical,
     marginHorizontal,
   });
 
-  // Get dynamic styles - call as functions for theme reactivity
-  const containerStyle = (textAreaStyles.container as any)({});
-  const labelStyle = (textAreaStyles.label as any)({ disabled });
-  const textareaContainerStyle = (textAreaStyles.textareaContainer as any)({});
-  const footerStyle = (textAreaStyles.footer as any)({});
-  const helperTextStyle = (textAreaStyles.helperText as any)({ hasError });
-  const characterCountStyle = (textAreaStyles.characterCount as any)({
-    isNearLimit: maxLength ? value.length >= maxLength * 0.9 : false,
-    isAtLimit: maxLength ? value.length >= maxLength : false,
-  });
-
-  const containerProps = getWebProps([containerStyle, style as any]);
-  const labelProps = getWebProps([labelStyle]);
-  const textareaContainerProps = getWebProps([textareaContainerStyle]);
-  const footerProps = getWebProps([footerStyle]);
-  const helperTextProps = getWebProps([helperTextStyle]);
-  const characterCountProps = getWebProps([characterCountStyle]);
+  // Get static styles (cast to any for Unistyles variant compatibility)
+  const containerProps = getWebProps([textAreaStyles.container as any, style as any]);
+  const labelProps = getWebProps([textAreaStyles.label as any]);
+  const textareaContainerProps = getWebProps([textAreaStyles.textareaContainer as any]);
+  const footerProps = getWebProps([textAreaStyles.footer as any]);
+  const helperTextProps = getWebProps([textAreaStyles.helperText as any]);
+  const characterCountProps = getWebProps([textAreaStyles.characterCount as any]);
 
   const adjustHeight = () => {
     if (!autoGrow || !textareaRef.current) return;
@@ -189,16 +181,15 @@ const TextArea = forwardRef<HTMLDivElement, TextAreaProps>(({
   };
 
   const showFooter = (error || helperText) || (showCharacterCount && maxLength);
-  const isNearLimit = maxLength ? value.length >= maxLength * 0.9 : false;
-  const isAtLimit = maxLength ? value.length >= maxLength : false;
 
   const computedTextareaProps = getWebProps([
-    textAreaStyles.textarea({ intent, disabled, hasError }),
-    textareaStyle,
-    minHeight && { minHeight: `${minHeight}px` },
-    maxHeight && { maxHeight: `${maxHeight}px` },
-    autoGrow && maxHeight && textareaRef.current && textareaRef.current.scrollHeight > maxHeight && { overflowY: 'auto' as const },
-  ]);
+    textAreaStyles.textarea as any,
+    textareaStyle as any,
+    { resize } as any, // Apply resize as inline style since it's CSS-only
+    minHeight ? { minHeight: `${minHeight}px` } : null,
+    maxHeight ? { maxHeight: `${maxHeight}px` } : null,
+    autoGrow && maxHeight && textareaRef.current && textareaRef.current.scrollHeight > maxHeight ? { overflowY: 'auto' as const } : null,
+  ].filter(Boolean));
 
   const mergedRef = useMergeRefs(ref, containerProps.ref);
   const mergedTextareaRef = useMergeRefs(textareaRef, computedTextareaProps.ref);

package/src/Tooltip/Tooltip.web.tsx

@@ -27,7 +27,7 @@ const Tooltip: React.FC<TooltipProps> = ({
   accessibilityRole,
 }) => {
   const [visible, setVisible] = useState(false);
-  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const anchorRef = useRef<HTMLDivElement>(null);
 
   // Generate unique ID for tooltip
@@ -105,9 +105,9 @@ const Tooltip: React.FC<TooltipProps> = ({
   return (
     <>
       <div
-        ref={anchorRef}
         {...containerProps}
         {...ariaProps}
+        ref={anchorRef}
         id={triggerId}
         onMouseEnter={handleMouseEnter}
         onMouseLeave={handleMouseLeave}
@@ -123,7 +123,7 @@ const Tooltip: React.FC<TooltipProps> = ({
 
       <PositionedPortal
         open={visible}
-        anchor={anchorRef}
+        anchor={anchorRef as React.RefObject<HTMLElement>}
         placement={placement}
         offset={8}
         zIndex={1000}

package/src/Video/Video.styles.tsx

@@ -20,7 +20,7 @@ export const videoStyles = defineStyle('Video', (theme: Theme) => ({
     container: (_props: VideoDynamicProps) => ({
         position: 'relative' as const,
         overflow: 'hidden' as const,
-        backgroundColor: theme.colors['black'],
+        backgroundColor: theme.colors.pallet.gray[900],
     }),
 
     video: (_props: VideoDynamicProps) => ({
@@ -37,7 +37,7 @@ export const videoStyles = defineStyle('Video', (theme: Theme) => ({
         display: 'flex' as const,
         alignItems: 'center' as const,
         justifyContent: 'center' as const,
-        backgroundColor: theme.colors['gray.300'],
-        color: theme.colors['gray.600'],
+        backgroundColor: theme.colors.pallet.gray[300],
+        color: theme.colors.pallet.gray[600],
     }),
 }));

package/src/Video/Video.web.tsx

@@ -45,7 +45,7 @@ const Video: React.FC<VideoProps> = ({
   const videoRef = useRef<HTMLVideoElement>(null);
 
   const containerProps = getWebProps([videoStyles.container, style as any]);
-  const videoProps = getWebProps([videoStyles.video]);
+  const videoProps = getWebProps([videoStyles.video as any]);
 
   const videoSource = typeof source === 'string'
     ? source

package/src/View/View.styles.tsx

@@ -60,8 +60,8 @@ export const viewStyles = defineStyle('View', (theme: Theme) => ({
             },
             border: {
                 none: { borderWidth: 0 },
-                thin: { borderWidth: 1, borderStyle: 'solid' as const, borderColor: theme.colors['gray.300'] },
-                thick: { borderWidth: 2, borderStyle: 'solid' as const, borderColor: theme.colors['gray.300'] },
+                thin: { borderWidth: 1, borderStyle: 'solid' as const, borderColor: theme.colors.pallet.gray[300] },
+                thick: { borderWidth: 2, borderStyle: 'solid' as const, borderColor: theme.colors.pallet.gray[300] },
             },
             // $iterator expands for each view size
             gap: {