@idealyst/components 1.2.14 → 1.2.16

package/src/Select/Select.web.tsx

@@ -258,7 +258,7 @@ const Select = forwardRef<HTMLDivElement, SelectProps>(({
       </div>
       <PositionedPortal
         open={isOpen}
-        anchor={triggerRef}
+        anchor={triggerRef as React.RefObject<HTMLElement>}
         placement="bottom-start"
         offset={4}
         onClickOutside={handleClose}
@@ -280,12 +280,12 @@ const Select = forwardRef<HTMLDivElement, SelectProps>(({
             {searchable && (
               <div {...getWebProps([searchContainerStyle])}>
                 <input
+                  {...getWebProps([searchInputStyle])}
                   ref={searchInputRef}
                   type="text"
                   placeholder="Search options..."
                   value={searchTerm}
                   onChange={handleSearchChange}
-                  {...getWebProps([searchInputStyle])}
                 />
               </div>
             )}

package/src/Slider/Slider.styles.tsx

@@ -1,8 +1,8 @@
 /**
- * Slider styles using defineStyle with dynamic props.
+ * Slider 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,20 +12,47 @@ void StyleSheet;
 // Wrap theme for $iterator support
 type Theme = ThemeStyleWrapper<BaseTheme>;
 
-export type SliderDynamicProps = {
-    size?: Size;
-    intent?: Intent;
-    disabled?: boolean;
+export type SliderVariants = {
+    size: Size;
+    intent: Intent;
+    disabled: 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;
+}
+
+// Create compound variants for intent-specific styles
+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];
+
+        // filledTrack intent colors are handled inline since they need per-element targeting
+        // thumb border color by intent
+        compoundVariants.push({
+            intent,
+            styles: {},
+        });
+    }
+
+    return compoundVariants;
+}
+
 /**
- * Slider styles with intent/disabled handling.
+ * Slider styles with static styles and variants.
  */
 export const sliderStyles = defineStyle('Slider', (theme: Theme) => ({
-    container: (_props: SliderDynamicProps) => ({
+    container: {
         gap: 4,
         paddingVertical: 8,
         variants: {
@@ -39,44 +66,67 @@ export const sliderStyles = defineStyle('Slider', (theme: Theme) => ({
                 marginHorizontal: theme.sizes.$view.padding,
             },
         },
-    }),
+    },
 
-    sliderWrapper: (_props: SliderDynamicProps) => ({
+    sliderWrapper: {
         position: 'relative' as const,
         paddingVertical: 4,
-    }),
+    },
 
-    track: ({ disabled = false }: SliderDynamicProps) => ({
+    track: {
         backgroundColor: theme.colors.surface.tertiary,
         borderRadius: 9999,
         position: 'relative' as const,
-        opacity: disabled ? 0.5 : 1,
         variants: {
             size: {
                 height: theme.sizes.$slider.trackHeight,
             },
+            disabled: {
+                true: {
+                    opacity: 0.5,
+                    _web: {
+                        cursor: 'not-allowed',
+                    },
+                },
+                false: {
+                    opacity: 1,
+                    _web: {
+                        cursor: 'pointer',
+                    },
+                },
+            },
         },
-        _web: {
-            cursor: disabled ? 'not-allowed' : 'pointer',
-        },
-    }),
+    },
 
-    filledTrack: ({ intent = 'primary' }: SliderDynamicProps) => ({
+    filledTrack: {
         position: 'absolute' as const,
         height: '100%',
         borderRadius: 9999,
         top: 0,
         left: 0,
-        backgroundColor: theme.intents[intent].primary,
-    }),
+        variants: {
+            intent: createIntentVariants(theme),
+        },
+        compoundVariants: (() => {
+            const cv: CompoundVariants<keyof SliderVariants> = [];
+            for (const intent in theme.intents) {
+                cv.push({
+                    intent,
+                    styles: {
+                        backgroundColor: theme.intents[intent as Intent].primary,
+                    },
+                });
+            }
+            return cv;
+        })(),
+    },
 
-    thumb: ({ intent = 'primary', disabled = false }: SliderDynamicProps) => ({
+    thumb: {
         position: 'absolute' as const,
         backgroundColor: theme.colors.surface.primary,
         borderRadius: 9999,
         borderWidth: 2,
         borderStyle: 'solid' as const,
-        borderColor: theme.intents[intent].primary,
         top: '50%',
         display: 'flex' as const,
         alignItems: 'center' as const,
@@ -86,35 +136,59 @@ export const sliderStyles = defineStyle('Slider', (theme: Theme) => ({
         shadowOpacity: 0.2,
         shadowRadius: 4,
         elevation: 2,
-        opacity: disabled ? 0.6 : 1,
         variants: {
             size: {
                 width: theme.sizes.$slider.thumbSize,
                 height: theme.sizes.$slider.thumbSize,
             },
+            intent: createIntentVariants(theme),
+            disabled: {
+                true: {
+                    opacity: 0.6,
+                    _web: {
+                        cursor: 'not-allowed',
+                    },
+                },
+                false: {
+                    opacity: 1,
+                    _web: {
+                        cursor: 'grab',
+                    },
+                },
+            },
         },
+        compoundVariants: (() => {
+            const cv: CompoundVariants<keyof SliderVariants> = [];
+            for (const intent in theme.intents) {
+                cv.push({
+                    intent,
+                    styles: {
+                        borderColor: theme.intents[intent as Intent].primary,
+                    },
+                });
+            }
+            return cv;
+        })(),
         _web: {
             boxShadow: '0 2px 4px rgba(0, 0, 0, 0.2)',
             transform: 'translate(-50%, -50%)',
             transition: 'transform 0.15s ease, box-shadow 0.2s ease',
-            cursor: disabled ? 'not-allowed' : 'grab',
-            _hover: disabled ? {} : { transform: 'translate(-50%, -50%) scale(1.05)' },
-            _active: disabled ? {} : { cursor: 'grabbing', transform: 'translate(-50%, -50%) scale(1.1)' },
+            _hover: { transform: 'translate(-50%, -50%) scale(1.05)' },
+            _active: { cursor: 'grabbing', transform: 'translate(-50%, -50%) scale(1.1)' },
         },
-    }),
+    },
 
-    thumbActive: (_props: SliderDynamicProps) => ({
+    thumbActive: {
         _web: {
             transform: 'translate(-50%, -50%) scale(1.1)',
         },
-    }),
+    },
 
-    thumbIcon: ({ intent = 'primary' }: SliderDynamicProps) => ({
+    thumbIcon: {
         display: 'flex' as const,
         alignItems: 'center' as const,
         justifyContent: 'center' as const,
         flexShrink: 0,
-        color: theme.intents[intent].primary,
         variants: {
             size: {
                 width: theme.sizes.$slider.thumbIconSize,
@@ -124,36 +198,49 @@ export const sliderStyles = defineStyle('Slider', (theme: Theme) => ({
                 minHeight: theme.sizes.$slider.thumbIconSize,
                 maxHeight: theme.sizes.$slider.thumbIconSize,
             },
+            intent: createIntentVariants(theme),
         },
-    }),
+        compoundVariants: (() => {
+            const cv: CompoundVariants<keyof SliderVariants> = [];
+            for (const intent in theme.intents) {
+                cv.push({
+                    intent,
+                    styles: {
+                        color: theme.intents[intent as Intent].primary,
+                    },
+                });
+            }
+            return cv;
+        })(),
+    },
 
-    valueLabel: (_props: SliderDynamicProps) => ({
+    valueLabel: {
         fontSize: 12,
         fontWeight: '600' as const,
         color: theme.colors.text.primary,
         textAlign: 'center' as const,
-    }),
+    },
 
-    minMaxLabels: (_props: SliderDynamicProps) => ({
+    minMaxLabels: {
         flexDirection: 'row' as const,
         justifyContent: 'space-between' as const,
         marginTop: 4,
-    }),
+    },
 
-    minMaxLabel: (_props: SliderDynamicProps) => ({
+    minMaxLabel: {
         fontSize: 12,
         color: theme.colors.text.secondary,
-    }),
+    },
 
-    marks: (_props: SliderDynamicProps) => ({
+    marks: {
         position: 'absolute' as const,
         width: '100%',
         height: '100%',
         top: 0,
         left: 0,
-    }),
+    },
 
-    mark: (_props: SliderDynamicProps) => ({
+    mark: {
         position: 'absolute' as const,
         width: 2,
         backgroundColor: theme.colors.border.secondary,
@@ -166,9 +253,9 @@ export const sliderStyles = defineStyle('Slider', (theme: Theme) => ({
         _web: {
             transform: 'translate(-50%, -50%)',
         },
-    }),
+    },
 
-    markLabel: (_props: SliderDynamicProps) => ({
+    markLabel: {
         position: 'absolute' as const,
         fontSize: 10,
         color: theme.colors.text.secondary,
@@ -178,5 +265,5 @@ export const sliderStyles = defineStyle('Slider', (theme: Theme) => ({
             transform: 'translateX(-50%)',
             whiteSpace: 'nowrap',
         },
-    }),
+    },
 }));

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/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.