@idealyst/components 1.1.6 → 1.1.8

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,59 +1,47 @@
+/**
+ * Skeleton styles using defineStyle.
+ */
 import { StyleSheet } from 'react-native-unistyles';
-import { Theme, StylesheetStyles} from '@idealyst/theme';
+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;
-}
-
-// 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) => {
-  return {
-    skeleton: {
+export const skeletonStyles = defineStyle('Skeleton', (theme: Theme) => ({
+    skeleton: (_props: SkeletonDynamicProps) => ({
         backgroundColor: theme.colors.surface.tertiary,
-        overflow: 'hidden',
+        overflow: 'hidden' as const,
         variants: {
-            shape: createShapeVariants(theme),
+            shape: {
+                rectangle: { borderRadius: 0 },
+                rounded: { borderRadius: 8 },
+                circle: { borderRadius: 9999 },
+            },
             animation: {
                 pulse: {},
                 wave: {},
                 none: {},
             },
         },
-    },
-    group: {
-        display: 'flex',
-        flexDirection: 'column',
-    },
-  };
-});
+    }),
+
+    group: (_props: {}) => ({
+        display: 'flex' as const,
+        flexDirection: 'column' as const,
+    }),
+}));

package/src/Slider/Slider.native.tsx

@@ -193,7 +193,7 @@ const Slider = forwardRef<View, SliderProps>(({
     if (!icon) return null;
 
     if (typeof icon === 'string' && isIconName(icon)) {
-      const iconStyle = sliderStyles.thumbIcon({ intent });
+      const iconStyle = (sliderStyles.thumbIcon as any)({ intent });
       return (
         <MaterialCommunityIcons
           name={icon}
@@ -206,8 +206,12 @@ const Slider = forwardRef<View, SliderProps>(({
     return icon;
   };
 
+  // Get dynamic styles
+  const containerStyle = (sliderStyles.container as any)({});
+  const trackStyle = (sliderStyles.track as any)({});
+
   return (
-    <View ref={ref} nativeID={id} style={[sliderStyles.container, style]} testID={testID} {...nativeA11yProps}>
+    <View ref={ref} nativeID={id} style={[containerStyle, style]} testID={testID} {...nativeA11yProps}>
       {showValue && (
         <View style={sliderStyles.valueLabel as any}>
           <Text>{value}</Text>
@@ -217,7 +221,7 @@ const Slider = forwardRef<View, SliderProps>(({
       <View style={sliderStyles.sliderWrapper}>
         <GestureDetector gesture={composedGesture}>
           <View
-            style={sliderStyles.track}
+            style={trackStyle}
             onLayout={(e) => {
               const width = e.nativeEvent.layout.width;
               trackWidth.value = width;
@@ -226,7 +230,7 @@ const Slider = forwardRef<View, SliderProps>(({
           >
             {/* Filled track */}
             <Animated.View
-              style={[sliderStyles.filledTrack({ intent }), filledTrackAnimatedStyle]}
+              style={[(sliderStyles.filledTrack as any)({ intent }), filledTrackAnimatedStyle]}
             />
 
             {/* Marks */}
@@ -262,7 +266,7 @@ const Slider = forwardRef<View, SliderProps>(({
             {/* Thumb */}
             <Animated.View
               style={[
-                sliderStyles.thumb({ intent, disabled }),
+                (sliderStyles.thumb as any)({ intent, disabled }),
                 {
                   // Manual positioning/sizing for native layout
                   position: 'absolute',

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',
+            },
+        }});
+});