@idealyst/components 1.1.7 → 1.1.9

package/src/Select/Select.web.tsx

@@ -2,7 +2,6 @@ import React, { forwardRef, useEffect, useRef, useState } from 'react';
 // @ts-ignore - web-specific import
 import { getWebProps } from 'react-native-unistyles/web';
 import { IconSvg } from '../Icon/IconSvg/IconSvg.web';
-import { resolveIconPath } from '../Icon/icon-resolver';
 import useMergeRefs from '../hooks/useMergeRefs';
 import { PositionedPortal } from '../internal/PositionedPortal';
 import { selectStyles } from './Select.styles';
@@ -175,14 +174,31 @@ const Select = forwardRef<HTMLDivElement, SelectProps>(({
     setFocusedIndex(0);
   };
 
-  const containerWebProps = getWebProps([
-    (selectStyles.container as any)({}),
-    style as any
-  ]);
+  // Get dynamic styles - call as functions for theme reactivity
+  const containerStyle = (selectStyles.container as any)({});
+  const labelStyle = (selectStyles.label as any)({});
+  const triggerStyle = (selectStyles.trigger as any)({ type, intent, disabled, error, focused: isOpen });
+  const triggerContentStyle = (selectStyles.triggerContent as any)({});
+  const triggerTextStyle = (selectStyles.triggerText as any)({});
+  const placeholderStyle = (selectStyles.placeholder as any)({});
+  const iconStyle = (selectStyles.icon as any)({});
+  const chevronStyle = (selectStyles.chevron as any)({});
+  const chevronOpenStyle = (selectStyles.chevronOpen as any)({});
+  const dropdownStyle = (selectStyles.dropdown as any)({});
+  const searchContainerStyle = (selectStyles.searchContainer as any)({});
+  const searchInputStyle = (selectStyles.searchInput as any)({});
+  const optionsListStyle = (selectStyles.optionsList as any)({});
+  const optionStyle = (selectStyles.option as any)({});
+  const optionFocusedStyle = (selectStyles.optionFocused as any)({});
+  const optionDisabledStyle = (selectStyles.optionDisabled as any)({});
+  const optionContentStyle = (selectStyles.optionContent as any)({});
+  const optionIconStyle = (selectStyles.optionIcon as any)({});
+  const optionTextStyle = (selectStyles.optionText as any)({});
+  const optionTextDisabledStyle = (selectStyles.optionTextDisabled as any)({});
+  const helperTextStyle = (selectStyles.helperText as any)({ error });
 
-  const triggerWebProps = getWebProps([
-    (selectStyles.trigger as any)({ type, intent }),
-  ]);
+  const containerWebProps = getWebProps([containerStyle, style as any]);
+  const triggerWebProps = getWebProps([triggerStyle]);
 
   const handleClose = () => {
     setIsOpen(false);
@@ -194,7 +210,7 @@ const Select = forwardRef<HTMLDivElement, SelectProps>(({
   return (
     <div {...containerWebProps} ref={mergedRef} id={id} data-testid={testID}>
       {label && (
-        <label {...getWebProps([selectStyles.label])}>
+        <label {...getWebProps([labelStyle])}>
           {label}
         </label>
       )}
@@ -211,15 +227,15 @@ const Select = forwardRef<HTMLDivElement, SelectProps>(({
           aria-haspopup="listbox"
           type="button"
         >
-          <div {...getWebProps([selectStyles.triggerContent])}>
+          <div {...getWebProps([triggerContentStyle])}>
             {selectedOption?.icon && (
-              <span {...getWebProps([selectStyles.icon])}>
+              <span {...getWebProps([iconStyle])}>
                 {selectedOption.icon}
               </span>
             )}
             <span
               {...getWebProps([
-                selectedOption ? selectStyles.triggerText : selectStyles.placeholder
+                selectedOption ? triggerTextStyle : placeholderStyle
               ])}
             >
               {selectedOption ? selectedOption.label : placeholder}
@@ -227,10 +243,10 @@ const Select = forwardRef<HTMLDivElement, SelectProps>(({
           </div>
 
           <IconSvg
-            path={resolveIconPath('chevron-down')}
+            name="chevron-down"
             {...getWebProps([
-              selectStyles.chevron,
-              isOpen && selectStyles.chevronOpen
+              chevronStyle,
+              isOpen && chevronOpenStyle
             ])}
             aria-label="chevron-down"
           />
@@ -247,7 +263,7 @@ const Select = forwardRef<HTMLDivElement, SelectProps>(({
         zIndex={1000}
       >
         <div
-          {...getWebProps([(selectStyles.dropdown as any)({})])}
+          {...getWebProps([dropdownStyle])}
           style={{
             maxHeight: maxHeight,
             position: 'relative',
@@ -258,19 +274,19 @@ const Select = forwardRef<HTMLDivElement, SelectProps>(({
           role="listbox"
         >
             {searchable && (
-              <div {...getWebProps([selectStyles.searchContainer])}>
+              <div {...getWebProps([searchContainerStyle])}>
                 <input
                   ref={searchInputRef}
                   type="text"
                   placeholder="Search options..."
                   value={searchTerm}
                   onChange={handleSearchChange}
-                  {...getWebProps([selectStyles.searchInput])}
+                  {...getWebProps([searchInputStyle])}
                 />
               </div>
             )}
 
-            <div {...getWebProps([selectStyles.optionsList])}>
+            <div {...getWebProps([optionsListStyle])}>
               {filteredOptions.map((option, index) => {
                 const isFocused = index === focusedIndex;
 
@@ -282,20 +298,20 @@ const Select = forwardRef<HTMLDivElement, SelectProps>(({
                     aria-selected={option.value === value}
                     onMouseEnter={() => setFocusedIndex(index)}
                     {...getWebProps([
-                      (selectStyles.option as any)({}),
-                      isFocused && selectStyles.optionFocused,
-                      option.disabled && selectStyles.optionDisabled,
+                      optionStyle,
+                      isFocused && optionFocusedStyle,
+                      option.disabled && optionDisabledStyle,
                     ])}
                   >
-                    <div {...getWebProps([selectStyles.optionContent])}>
+                    <div {...getWebProps([optionContentStyle])}>
                       {option.icon && (
-                        <span {...getWebProps([selectStyles.optionIcon])}>
+                        <span {...getWebProps([optionIconStyle])}>
                           {option.icon}
                         </span>
                       )}
                       <span {...getWebProps([
-                        selectStyles.optionText,
-                        option.disabled && selectStyles.optionTextDisabled
+                        optionTextStyle,
+                        option.disabled && optionTextDisabledStyle
                       ])}>
                         {option.label}
                       </span>
@@ -305,8 +321,8 @@ const Select = forwardRef<HTMLDivElement, SelectProps>(({
               })}
 
               {filteredOptions.length === 0 && (
-                <div {...getWebProps([(selectStyles.option as any)({})])} style={{ cursor: 'default' }}>
-                  <span {...getWebProps([selectStyles.optionText])}>
+                <div {...getWebProps([optionStyle])} style={{ cursor: 'default' }}>
+                  <span {...getWebProps([optionTextStyle])}>
                     No options found
                   </span>
                 </div>
@@ -316,11 +332,7 @@ const Select = forwardRef<HTMLDivElement, SelectProps>(({
       </PositionedPortal>
 
       {helperText && (
-        <div
-          {...getWebProps([
-            selectStyles.helperText,
-          ])}
-        >
+        <div {...getWebProps([helperTextStyle])}>
           {helperText}
         </div>
       )}

package/src/Skeleton/Skeleton.styles.old.tsx

@@ -0,0 +1,67 @@
+import { StyleSheet } from 'react-native-unistyles';
+import { Theme, StylesheetStyles } from '@idealyst/theme';
+import { applyExtensions } from '../extensions/applyExtension';
+
+type SkeletonShape = 'rectangle' | 'rounded' | 'circle';
+type SkeletonAnimation = 'pulse' | 'wave' | 'none';
+
+type SkeletonVariants = {
+    shape: SkeletonShape;
+    animation: SkeletonAnimation;
+}
+
+export type ExpandedSkeletonStyles = StylesheetStyles<keyof SkeletonVariants>;
+export type ExpandedSkeletonGroupStyles = StylesheetStyles<never>;
+
+export type SkeletonStylesheet = {
+    skeleton: ExpandedSkeletonStyles;
+    group: ExpandedSkeletonGroupStyles;
+}
+
+/**
+ * Create shape variants for skeleton
+ */
+function createShapeVariants(theme: Theme) {
+    return {
+        rectangle: {
+            borderRadius: 0,
+        },
+        rounded: {
+            borderRadius: 8,
+        },
+        circle: {
+            borderRadius: 9999,
+        },
+    } as const;
+}
+
+// Style creators for extension support
+function createSkeletonStyles(theme: Theme) {
+    return () => ({
+        backgroundColor: theme.colors.surface.tertiary,
+        overflow: 'hidden' as const,
+        variants: {
+            shape: createShapeVariants(theme),
+            animation: {
+                pulse: {},
+                wave: {},
+                none: {},
+            },
+        },
+    });
+}
+
+// Styles are inlined here instead of in @idealyst/theme because Unistyles' Babel
+// transform on native cannot resolve function calls to extract variant structures.
+// @ts-ignore - TS language server needs restart to pick up theme structure changes
+export const skeletonStyles = StyleSheet.create((theme: Theme) => {
+    // Apply extensions to main visual elements
+
+    return applyExtensions('Skeleton', theme, {skeleton: createSkeletonStyles(theme),
+        // Additional styles (merged from return)
+        // Minor utility styles (not extended)
+        group: {
+            display: 'flex',
+            flexDirection: 'column',
+        }});
+});

package/src/Skeleton/Skeleton.styles.tsx

@@ -1,71 +1,47 @@
+/**
+ * Skeleton styles using defineStyle.
+ */
 import { StyleSheet } from 'react-native-unistyles';
-import { Theme, StylesheetStyles } from '@idealyst/theme';
-import { applyExtensions } from '../extensions/applyExtension';
+import { defineStyle, ThemeStyleWrapper } from '@idealyst/theme';
+import type { Theme as BaseTheme } from '@idealyst/theme';
 
-type SkeletonShape = 'rectangle' | 'rounded' | 'circle';
-type SkeletonAnimation = 'pulse' | 'wave' | 'none';
+// Required: Unistyles must see StyleSheet usage in original source to process this file
+void StyleSheet;
 
-type SkeletonVariants = {
-    shape: SkeletonShape;
-    animation: SkeletonAnimation;
-}
+// Wrap theme for $iterator support
+type Theme = ThemeStyleWrapper<BaseTheme>;
 
-export type ExpandedSkeletonStyles = StylesheetStyles<keyof SkeletonVariants>;
-export type ExpandedSkeletonGroupStyles = StylesheetStyles<never>;
+type SkeletonShape = 'rectangle' | 'rounded' | 'circle';
+type SkeletonAnimation = 'pulse' | 'wave' | 'none';
 
-export type SkeletonStylesheet = {
-    skeleton: ExpandedSkeletonStyles;
-    group: ExpandedSkeletonGroupStyles;
-}
+export type SkeletonDynamicProps = {
+    shape?: SkeletonShape;
+    animation?: SkeletonAnimation;
+};
 
 /**
- * Create shape variants for skeleton
+ * Skeleton styles with shape and animation variants.
  */
-function createShapeVariants(theme: Theme) {
-    return {
-        rectangle: {
-            borderRadius: 0,
-        },
-        rounded: {
-            borderRadius: 8,
-        },
-        circle: {
-            borderRadius: 9999,
-        },
-    } as const;
-}
-
-// Style creators for extension support
-function createSkeletonStyles(theme: Theme) {
-    return () => ({
+export const skeletonStyles = defineStyle('Skeleton', (theme: Theme) => ({
+    skeleton: (_props: SkeletonDynamicProps) => ({
         backgroundColor: theme.colors.surface.tertiary,
         overflow: 'hidden' as const,
         variants: {
-            shape: createShapeVariants(theme),
+            shape: {
+                rectangle: { borderRadius: 0 },
+                rounded: { borderRadius: 8 },
+                circle: { borderRadius: 9999 },
+            },
             animation: {
                 pulse: {},
                 wave: {},
                 none: {},
             },
         },
-    });
-}
-
-// Styles are inlined here instead of in @idealyst/theme because Unistyles' Babel
-// transform on native cannot resolve function calls to extract variant structures.
-// @ts-ignore - TS language server needs restart to pick up theme structure changes
-export const skeletonStyles = StyleSheet.create((theme: Theme) => {
-    // Apply extensions to main visual elements
-    const extended = applyExtensions('Skeleton', theme, {
-        skeleton: createSkeletonStyles(theme),
-    });
+    }),
 
-    return {
-        ...extended,
-        // Minor utility styles (not extended)
-        group: {
-            display: 'flex',
-            flexDirection: 'column',
-        },
-    };
-});
+    group: (_props: {}) => ({
+        display: 'flex' as const,
+        flexDirection: 'column' as const,
+    }),
+}));

package/src/Slider/Slider.styles.old.tsx

@@ -0,0 +1,259 @@
+import { StyleSheet } from 'react-native-unistyles';
+import { Theme, Size, Styles} from '@idealyst/theme';
+import { buildSizeVariants } from '../utils/buildSizeVariants';
+import {
+  buildMarginVariants,
+  buildMarginVerticalVariants,
+  buildMarginHorizontalVariants,
+} from '../utils/buildViewStyleVariants';
+import { SliderIntentVariant } from './types';
+import { applyExtensions } from '../extensions/applyExtension';
+
+/**
+ * Create size variants for track
+ */
+function createTrackSizeVariants(theme: Theme) {
+    const variants = {} as Record<Size, Styles>;
+    for (const sizeKey in theme.sizes.slider) {
+        const size = sizeKey as Size;
+        variants[size] = {
+            height: theme.sizes.slider[size].trackHeight,
+        };
+    }
+    return variants;
+}
+
+/**
+ * Get filled track color based on intent
+ */
+function getFilledTrackColor(theme: Theme, intent: SliderIntentVariant) {
+    return theme.intents[intent].primary;
+}
+
+/**
+ * Create size variants for thumb
+ */
+function createThumbSizeVariants(theme: Theme) {
+    return buildSizeVariants(theme, 'slider', (size) => ({
+        width: size.thumbSize,
+        height: size.thumbSize,
+    }));
+}
+
+/**
+ * Get thumb border color based on intent
+ */
+function getThumbBorderColor(theme: Theme, intent: SliderIntentVariant) {
+    return theme.intents[intent].primary;
+}
+
+/**
+ * Create size variants for thumb icon
+ */
+function createThumbIconSizeVariants(theme: Theme) {
+    return buildSizeVariants(theme, 'slider', (size) => ({
+        width: size.thumbIconSize,
+        height: size.thumbIconSize,
+        minWidth: size.thumbIconSize,
+        maxWidth: size.thumbIconSize,
+        minHeight: size.thumbIconSize,
+        maxHeight: size.thumbIconSize,
+    }));
+}
+
+/**
+ * Get thumb icon color based on intent
+ */
+function getThumbIconColor(theme: Theme, intent: SliderIntentVariant){
+    return theme.intents[intent].primary;
+}
+
+/**
+ * Create size variants for mark
+ */
+function createMarkSizeVariants(theme: Theme) {
+    return buildSizeVariants(theme, 'slider', (size) => ({
+        height: size.markHeight,
+    }));
+}
+
+const createFilledTrackStyles = (theme: Theme) => {
+    return ({ intent }: { intent: SliderIntentVariant }) => {
+        return {
+            position: 'absolute',
+            height: '100%',
+            borderRadius: 9999,
+            top: 0,
+            left: 0,
+            backgroundColor: getFilledTrackColor(theme, intent),
+        } as const;
+    }
+}
+
+const createThumbStyles = (theme: Theme) => {
+    return ({ intent, disabled }: { intent: SliderIntentVariant, disabled: boolean }) => {
+        return {
+            position: 'absolute',
+            backgroundColor: theme.colors.surface.primary,
+            borderRadius: 9999,
+            borderWidth: 2,
+            borderStyle: 'solid',
+            borderColor: getThumbBorderColor(theme, intent),
+            top: '50%',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            shadowColor: '#000',
+            shadowOffset: { width: 0, height: 2 },
+            shadowOpacity: 0.2,
+            shadowRadius: 4,
+            elevation: 2,
+            variants: {
+                size: createThumbSizeVariants(theme),
+                disabled: {
+                    true: {
+                        opacity: 0.6,
+                        _web: {
+                            cursor: 'not-allowed',
+                        },
+                    },
+                    false: {
+                        opacity: 1,
+                        _web: {
+                            cursor: 'grab',
+                            _hover: {
+                                transform: 'translate(-50%, -50%) scale(1.05)',
+                            },
+                            _active: {
+                                cursor: 'grabbing',
+                                transform: 'translate(-50%, -50%) scale(1.1)',
+                            },
+                        },
+                    },
+                },
+            },
+            _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',
+            },
+        } as const;
+    }
+}
+
+const createThumbIconStyles = (theme: Theme) => {
+    return ({ intent }: { intent: SliderIntentVariant }) => {
+        return {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            flexShrink: 0,
+            color: getThumbIconColor(theme, intent),
+            variants: {
+                size: createThumbIconSizeVariants(theme),
+            },
+        } as const;
+    }
+}
+
+// Container style creator for extension support
+function createContainerStyles(theme: Theme) {
+    return () => ({
+        gap: 4,
+        paddingVertical: 8,
+        variants: {
+            margin: buildMarginVariants(theme),
+            marginVertical: buildMarginVerticalVariants(theme),
+            marginHorizontal: buildMarginHorizontalVariants(theme),
+        },
+    });
+}
+
+// Track style creator for extension support
+function createTrackStyles(theme: Theme) {
+    return () => ({
+        backgroundColor: theme.colors.surface.tertiary,
+        borderRadius: 9999,
+        position: 'relative' as const,
+        variants: {
+            size: createTrackSizeVariants(theme),
+            disabled: {
+                true: {
+                    opacity: 0.5,
+                    _web: { cursor: 'not-allowed' },
+                },
+                false: {
+                    opacity: 1,
+                    _web: { cursor: 'pointer' },
+                },
+            },
+        } as const,
+    });
+}
+
+// Styles are inlined here instead of in @idealyst/theme because Unistyles' Babel transform on native cannot resolve function calls to extract variant structures.
+export const sliderStyles = StyleSheet.create((theme: Theme) => {
+    // Apply extensions to main visual elements
+
+    return applyExtensions('Slider', theme, {container: createContainerStyles(theme),
+        track: createTrackStyles(theme),
+        filledTrack: createFilledTrackStyles(theme),
+        thumb: createThumbStyles(theme),
+        thumbIcon: createThumbIconStyles(theme),
+        // Additional styles (merged from return)
+        // Minor utility styles
+        sliderWrapper: {
+            position: 'relative',
+            paddingVertical: 4,
+        },
+        thumbActive: {
+            _web: {
+                transform: 'translate(-50%, -50%) scale(1.1)',
+            },
+        },
+        valueLabel: {
+            fontSize: 12,
+            fontWeight: '600',
+            color: theme.colors.text.primary,
+            textAlign: 'center',
+        },
+        minMaxLabels: {
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            marginTop: 4,
+        },
+        minMaxLabel: {
+            fontSize: 12,
+            color: theme.colors.text.secondary,
+        },
+        mark: {
+            position: 'absolute',
+            width: 2,
+            backgroundColor: theme.colors.border.secondary,
+            top: '50%',
+            variants: {
+                size: createMarkSizeVariants(theme),
+            },
+            _web: {
+                transform: 'translate(-50%, -50%)',
+            },
+        },
+        marks: {
+            position: 'absolute',
+            width: '100%',
+            height: '100%',
+            top: 0,
+            left: 0,
+        },
+        markLabel: {
+            position: 'absolute',
+            fontSize: 10,
+            color: theme.colors.text.secondary,
+            top: '100%',
+            marginTop: 4,
+            _web: {
+                transform: 'translateX(-50%)',
+                whiteSpace: 'nowrap',
+            },
+        }});
+});