@idealyst/components 1.0.83 → 1.0.85

package/src/Switch/Switch.styles.tsx

@@ -0,0 +1,169 @@
+import { StyleSheet } from 'react-native-unistyles';
+import { Theme, StylesheetStyles, Intent, Size} from '@idealyst/theme';
+import { buildSizeVariants } from '../utils/buildSizeVariants';
+import { SwitchIntentVariant, SwitchSizeVariant } from './types';
+
+function createTrackSizeVariants(theme: Theme) {
+    return buildSizeVariants(theme, 'switch', (size) => ({
+        width: size.trackWidth,
+        height: size.trackHeight,
+    }));
+}
+
+function getTrackBackgroundColor(theme: Theme, checked: boolean, intent: SwitchIntentVariant) {
+    if (checked) {
+        return theme.intents[intent].primary;
+    }
+    return theme.colors.border.secondary;
+}
+
+function createThumbSizeVariants(theme: Theme) {
+    return buildSizeVariants(theme, 'switch', (size) => ({
+        width: size.thumbSize,
+        height: size.thumbSize,
+        left: 2,
+    }));
+}
+
+function getThumbTransform(theme: Theme, size: SwitchSizeVariant, checked: boolean) {
+    const sizeValue = theme.sizes.switch[size];
+    const translateX = checked ? sizeValue.translateX : 0;
+    return `translateY(-50%) translateX(${translateX}px)`;
+}
+
+function createThumbIconSizeVariants(theme: Theme) {
+    return buildSizeVariants(theme, 'switch', (size) => ({
+        width: size.thumbIconSize,
+        height: size.thumbIconSize,
+    }));
+}
+
+function getThumbIconColor(theme: Theme, checked: boolean, intent: SwitchIntentVariant) {
+    if (checked) {
+        return theme.intents[intent].primary;
+    }
+    return theme.colors.border.secondary;
+}
+
+function createSwitchTrackStyles(theme: Theme) {
+    return ({ checked, intent }: { checked: boolean, intent: SwitchIntentVariant }) => {
+        return {
+            borderRadius: 9999,
+            position: 'relative',
+            backgroundColor: getTrackBackgroundColor(theme, checked, intent),
+            variants: {
+                size: createTrackSizeVariants(theme),
+                disabled: {
+                    true: {
+                        opacity: 0.5,
+                        _web: {
+                            cursor: 'not-allowed',
+                        },
+                    },
+                    false: {
+                        opacity: 1,
+                        _web: {
+                            cursor: 'pointer',
+                            _hover: {
+                                opacity: 0.9,
+                            },
+                            _active: {
+                                opacity: 0.8,
+                            },
+                        },
+                    },
+                },
+            } as const,
+            _web: {
+                transition: 'background-color 0.2s ease',
+            },
+        } as const;
+    }
+}
+
+function createSwitchThumbStyles(theme: Theme) {
+    return ({ size, checked }: { size: SwitchSizeVariant, checked: boolean }) => {
+        return {
+            position: 'absolute',
+            backgroundColor: theme.colors.surface.primary,
+            borderRadius: 9999,
+            top: '50%',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            shadowColor: '#000',
+            shadowOffset: { width: 0, height: 1 },
+            shadowOpacity: 0.2,
+            shadowRadius: 3,
+            elevation: 2,
+            variants: {
+                size: createThumbSizeVariants(theme),
+            },
+            _web: {
+                boxShadow: '0 1px 3px rgba(0, 0, 0, 0.2)',
+                transition: 'transform 0.2s ease',
+                transform: getThumbTransform(theme, size, checked),
+            },
+        } as const;
+    }
+}
+
+function createThumbIconStyles(theme: Theme) {
+    return ({ checked, intent }: { checked: boolean, intent: SwitchIntentVariant }) => {
+        return {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            color: getThumbIconColor(theme, checked, intent),
+            variants: {
+                size: createThumbIconSizeVariants(theme),
+            },
+        } 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 switchStyles = StyleSheet.create((theme: Theme) => {
+  return {
+    container: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 8,
+    },
+    switchContainer: {
+        justifyContent: 'center',
+        _web: {
+            border: 'none',
+            padding: 0,
+            backgroundColor: 'transparent',
+            width: 'fit-content',
+        }
+    },
+    switchTrack: createSwitchTrackStyles(theme),
+    switchThumb: createSwitchThumbStyles(theme),
+    thumbIcon: createThumbIconStyles(theme),
+    label: {
+        fontSize: 14,
+        color: theme.colors.text.primary,
+        variants: {
+            disabled: {
+                true: {
+                    opacity: 0.5,
+                },
+                false: {
+                    opacity: 1,
+                },
+            },
+            position: {
+                left: {
+                    marginRight: 8,
+                },
+                right: {
+                    marginLeft: 8,
+                },
+            },
+        } as const,
+    } as const,
+  };
+});

package/src/Switch/Switch.web.tsx

@@ -0,0 +1,121 @@
+import React, { isValidElement, forwardRef } from 'react';
+import { getWebProps } from 'react-native-unistyles/web';
+import { switchStyles } from './Switch.styles';
+import type { SwitchProps } from './types';
+import { IconSvg } from '../Icon/IconSvg/IconSvg.web';
+import { resolveIconPath, isIconName } from '../Icon/icon-resolver';
+import useMergeRefs from '../hooks/useMergeRefs';
+
+const Switch = forwardRef<HTMLDivElement | HTMLButtonElement, SwitchProps>(({
+  checked = false,
+  onCheckedChange,
+  disabled = false,
+  label,
+  labelPosition = 'right',
+  intent = 'primary',
+  size = 'md',
+  enabledIcon,
+  disabledIcon,
+  style,
+  testID,
+}, ref) => {
+  const handleClick = () => {
+    if (!disabled && onCheckedChange) {
+      onCheckedChange(!checked);
+    }
+  };
+
+  // Apply variants using the correct Unistyles v3 pattern
+  switchStyles.useVariants({
+    size: size as 'sm' | 'md' | 'lg',
+    disabled: disabled as boolean,
+    position: labelPosition as 'left' | 'right',
+  });
+
+  const trackProps = getWebProps([switchStyles.switchTrack({ checked, intent })]);
+  const thumbProps = getWebProps([switchStyles.switchThumb({ size, checked })]);
+  const thumbIconProps = getWebProps([switchStyles.thumbIcon({ checked, intent })]);
+  const labelProps = getWebProps([switchStyles.label]);
+
+  // Helper to render icon
+  const renderIcon = () => {
+    const iconToRender = checked ? enabledIcon : disabledIcon;
+    if (!iconToRender) return null;
+
+    if (isIconName(iconToRender)) {
+      const iconPath = resolveIconPath(iconToRender);
+      return (
+        <IconSvg
+          path={iconPath}
+          {...thumbIconProps}
+          aria-label={iconToRender}
+        />
+      );
+    } else if (isValidElement(iconToRender)) {
+      return iconToRender;
+    }
+
+    return null;
+  };
+
+  // Computed button props with dynamic styles
+  const computedButtonProps = getWebProps(
+    switchStyles.switchContainer
+  );
+
+  // Computed container props with dynamic styles (for when label exists)
+  const computedContainerProps = getWebProps([
+    switchStyles.container,
+    style as any,
+    {
+      cursor: disabled ? 'not-allowed' : 'pointer',
+      display: 'inline-flex',
+      alignItems: 'center',
+    }
+  ]);
+
+  const mergedButtonRef = useMergeRefs(ref as React.Ref<HTMLButtonElement>, computedButtonProps.ref);
+  const mergedContainerRef = useMergeRefs(ref as React.Ref<HTMLDivElement>, computedContainerProps.ref);
+
+  const switchElement = (
+    <button
+      {...computedButtonProps}
+      ref={mergedButtonRef}
+      onClick={handleClick}
+      disabled={disabled}
+      data-testid={testID}
+      role="switch"
+      aria-checked={checked}
+      aria-disabled={disabled}
+    >
+      <div {...trackProps}>
+        <div {...thumbProps}>
+          {renderIcon()}
+        </div>
+      </div>
+    </button>
+  );
+
+  if (label) {
+    return (
+      <div
+        {...computedContainerProps}
+        ref={mergedContainerRef}
+      >
+        {labelPosition === 'left' && (
+          <span {...labelProps}>{label}</span>
+        )}
+        {switchElement}
+        {labelPosition === 'right' && (
+          <span {...labelProps}>{label}</span>
+        )}
+      </div>
+    );
+  }
+
+  return switchElement;
+});
+
+Switch.displayName = 'Switch';
+
+export default Switch;

package/src/Switch/index.native.ts

@@ -0,0 +1,3 @@
+// React Native-specific Switch export
+export { default } from './Switch.native';
+export * from './types';

package/src/Switch/index.ts

@@ -0,0 +1,5 @@
+import SwitchComponent from './Switch.web';
+
+export default SwitchComponent;
+export { SwitchComponent as Switch };
+export * from './types';

package/src/Switch/index.web.ts

@@ -0,0 +1,5 @@
+import SwitchComponent from './Switch.web';
+
+export default SwitchComponent;
+export { SwitchComponent as Switch };
+export * from './types';

package/src/Switch/types.ts

@@ -0,0 +1,21 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { IconName } from '../Icon/icon-types';
+import { Intent, Size } from '@idealyst/theme';
+
+// Component-specific type aliases for future extensibility
+export type SwitchIntentVariant = Intent;
+export type SwitchSizeVariant = Size;
+
+export interface SwitchProps {
+  checked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+  disabled?: boolean;
+  label?: string;
+  labelPosition?: 'left' | 'right';
+  intent?: SwitchIntentVariant;
+  size?: SwitchSizeVariant;
+  enabledIcon?: IconName | React.ReactNode;
+  disabledIcon?: IconName | React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}

package/src/TabBar/TabBar.native.tsx

@@ -0,0 +1,142 @@
+import React, { useState, useRef, useEffect, forwardRef } from 'react';
+import { View, TouchableOpacity, Text, ScrollView } from 'react-native';
+import Animated, { useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated';
+import {
+  tabBarContainerStyles,
+  tabBarTabStyles,
+  tabBarLabelStyles,
+  tabBarIndicatorStyles
+} from './TabBar.styles';
+import type { TabBarProps } from './types';
+
+const TabBar = forwardRef<View, TabBarProps>(({
+  items,
+  value: controlledValue,
+  defaultValue,
+  onChange,
+  type = 'default',
+  size = 'md',
+  pillMode = 'light',
+  style,
+  testID,
+}, ref) => {
+  const firstItemValue = items[0]?.value || '';
+  const [internalValue, setInternalValue] = useState(defaultValue || firstItemValue);
+
+  const indicatorPosition = useSharedValue(0);
+  const indicatorWidth = useSharedValue(0);
+  const tabLayouts = useRef<{ [key: string]: { x: number; width: number } }>({});
+
+  const value = controlledValue !== undefined ? controlledValue : internalValue;
+
+  const updateIndicatorPosition = (itemValue: string) => {
+    const layout = tabLayouts.current[itemValue];
+    if (layout) {
+      // For pills type, account for container padding
+      const containerPadding = type === 'pills' ? 4 : 0;
+
+      indicatorPosition.value = withSpring(layout.x + containerPadding, {
+        damping: 30,
+        stiffness: 300,
+      });
+      indicatorWidth.value = withSpring(layout.width, {
+        damping: 30,
+        stiffness: 300,
+      });
+    }
+  };
+
+  useEffect(() => {
+    updateIndicatorPosition(value);
+  }, [value]);
+
+  const handleTabLayout = (itemValue: string, x: number, width: number) => {
+    tabLayouts.current[itemValue] = { x, width };
+
+    // Update indicator for active tab
+    if (itemValue === value) {
+      updateIndicatorPosition(itemValue);
+    }
+  };
+
+  const handleTabClick = (itemValue: string, disabled?: boolean) => {
+    if (disabled) return;
+
+    if (controlledValue === undefined) {
+      setInternalValue(itemValue);
+    }
+
+    onChange?.(itemValue);
+  };
+
+  const indicatorAnimatedStyle = useAnimatedStyle(() => {
+    return {
+      transform: [{ translateX: indicatorPosition.value }],
+      width: indicatorWidth.value,
+    };
+  });
+
+  // Apply container and indicator types right before rendering
+  tabBarContainerStyles.useVariants({ size, pillMode });
+  tabBarIndicatorStyles.useVariants({ pillMode });
+
+  return (
+    <ScrollView
+      horizontal
+      showsHorizontalScrollIndicator={false}
+      contentContainerStyle={{ position: 'relative' }}
+    >
+      <View ref={ref} style={[tabBarContainerStyles.container, style]} testID={testID}>
+        {/* Animated indicator - render first so it's behind */}
+        <Animated.View
+          style={[
+            tabBarIndicatorStyles.indicator,
+            indicatorAnimatedStyle,
+          ]}
+        />
+
+        {/* Tabs - render second so they're on top */}
+        <View style={{ flexDirection: 'row' }}>
+          {items.map((item) => {
+            const isActive = value === item.value;
+
+            // Apply tab and label types for this specific tab
+            tabBarTabStyles.useVariants({
+              size,
+              active: isActive,
+              disabled: Boolean(item.disabled),
+              pillMode,
+            });
+            tabBarLabelStyles.useVariants({
+              size,
+              pillMode,
+              active: isActive,
+              disabled: Boolean(item.disabled),
+            });
+
+            return (
+              <TouchableOpacity
+                key={item.value}
+                onLayout={(event) => {
+                  const { x, width } = event.nativeEvent.layout;
+                  handleTabLayout(item.value, x, width);
+                }}
+                style={tabBarTabStyles.tab}
+                onPress={() => handleTabClick(item.value, item.disabled)}
+                disabled={item.disabled}
+                activeOpacity={0.7}
+                testID={`${testID}-tab-${item.value}`}
+              >
+                <Text style={tabBarLabelStyles.tabLabel}>{item.label}</Text>
+              </TouchableOpacity>
+            );
+          })}
+        </View>
+      </View>
+    </ScrollView>
+  );
+});
+
+TabBar.displayName = 'TabBar';
+
+export default TabBar;