fluent-styles 1.53.0 → 1.55.0

package/src/stack/index.ts

@@ -0,0 +1,58 @@
+
+import { View, ViewProps, ViewStyle } from 'react-native';
+import { styled } from '../utiles/styled';
+
+/**
+ * Stack-specific layout variants for flex direction
+ * Supports dual-level customization:
+ * - Variant level: horizontal={[true, { gap: 10 }]}
+ * - Component level: horizontal={true} gap={15}
+ */
+type StackVariants = {
+    horizontal?: boolean | [boolean, ViewStyle];
+    vertical?: boolean | [boolean, ViewStyle];
+};
+
+type StackProps = StackVariants & ViewProps & ViewStyle;
+
+/**
+ * Base Stack component - flexible layout container
+ * Default: neutral layout (no flex direction preset)
+ * Use horizontal or vertical variants to set flex direction
+ */
+const Stack = styled<StackProps>(View, {
+    base: {
+        position: 'relative',
+    } as ViewStyle,
+    variants: {
+        vertical: {
+            true: {
+                flexDirection: 'column',
+            } as ViewStyle,
+            false: {} as ViewStyle,
+        },
+        horizontal: {
+            true: {
+                flexDirection: 'row',
+            } as ViewStyle,
+            false: {} as ViewStyle,
+        },
+    } as any
+});
+
+const XStack = styled<Omit<StackProps, 'vertical' | 'horizontal'>>(View, {
+    base: {
+        position: 'relative',
+         flexDirection: 'row',
+    } as ViewStyle
+});
+
+const YStack = styled<Omit<StackProps, 'vertical' | 'horizontal'>>(View, {
+    base: {
+        position: 'relative',
+         flexDirection: 'column',
+    } as ViewStyle
+});
+
+export {  Stack, XStack, YStack };
+export type { StackProps };

package/src/switch/Switch.tsx

@@ -0,0 +1,343 @@
+import React, {
+  memo,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+import {
+  Animated,
+  Easing,
+  StyleSheet,
+  Text,
+  TouchableWithoutFeedback,
+  View,
+} from 'react-native'
+
+import {
+  SWITCH_COLORS_DEFAULT,
+  SWITCH_SIZES,
+  type SwitchColors,
+  type SwitchProps,
+  type SwitchSize,
+} from './interface'
+
+// ─── Spinner (pure RN, no external deps) ──────────────────────────────────────
+
+const Spinner: React.FC<{ size: number; color: string }> = ({ size, color }) => {
+  const rotate = useRef(new Animated.Value(0)).current
+
+  useEffect(() => {
+    Animated.loop(
+      Animated.timing(rotate, {
+        toValue:         1,
+        duration:        700,
+        easing:          Easing.linear,
+        useNativeDriver: true,
+      }),
+    ).start()
+    return () => rotate.stopAnimation()
+  }, [rotate])
+
+  const spin = rotate.interpolate({
+    inputRange:  [0, 1],
+    outputRange: ['0deg', '360deg'],
+  })
+
+  const r = size / 2
+
+  return (
+    <Animated.View
+      style={{
+        width:            size,
+        height:           size,
+        borderRadius:     r,
+        borderWidth:      Math.max(1.5, size * 0.1),
+        borderColor:      color,
+        borderTopColor:   'transparent',
+        transform:        [{ rotate: spin }],
+      }}
+    />
+  )
+}
+
+// ─── Switch ───────────────────────────────────────────────────────────────────
+
+function SwitchInner<ActiveValueT = boolean, InactiveValueT = boolean>(
+  props: SwitchProps<ActiveValueT, InactiveValueT>,
+) {
+  const {
+    value,
+    defaultValue,
+    activeValue   = true  as unknown as ActiveValueT,
+    inactiveValue = false as unknown as InactiveValueT,
+
+    onChange,
+    onPress,
+    beforeChange,
+
+    size       = 'md',
+    customSize,
+    activeColor,
+    inactiveColor,
+    activeLabel,
+    inactiveLabel,
+    labelStyle,
+    style,
+
+    loading  = false,
+    disabled = false,
+    colors: colorOverrides,
+
+    testID,
+  } = props
+
+  // ── Resolved colors ────────────────────────────────────────────────────────
+  const colors: SwitchColors = useMemo(
+    () => ({
+      ...SWITCH_COLORS_DEFAULT,
+      ...colorOverrides,
+      ...(activeColor   ? { activeTrack:   activeColor   as string } : {}),
+      ...(inactiveColor ? { inactiveTrack: inactiveColor as string } : {}),
+    }),
+    [colorOverrides, activeColor, inactiveColor],
+  )
+
+  // ── Resolved dimensions ────────────────────────────────────────────────────
+  const dims = useMemo(() => {
+    const preset = SWITCH_SIZES[size as SwitchSize]
+
+    if (customSize) {
+      const ratio = customSize / SWITCH_SIZES.md.trackHeight
+      return {
+        trackWidth:  Math.round(SWITCH_SIZES.md.trackWidth  * ratio),
+        trackHeight: customSize,
+        thumbSize:   Math.round(SWITCH_SIZES.md.thumbSize   * ratio),
+        fontSize:    Math.round(SWITCH_SIZES.md.fontSize    * ratio),
+        thumbInset:  Math.max(2, Math.round(SWITCH_SIZES.md.thumbInset * ratio)),
+      }
+    }
+
+    return preset
+  }, [size, customSize])
+
+  // ── Controlled / uncontrolled state ───────────────────────────────────────
+  const isControlled = value !== undefined
+  const [localValue, setLocalValue] = useState<ActiveValueT | InactiveValueT>(
+    defaultValue ?? inactiveValue,
+  )
+
+  const currentValue = isControlled ? value! : localValue
+  const isOn = currentValue === activeValue
+
+  // Stable ref so callbacks always read latest
+  const isOnRef = useRef(isOn)
+  isOnRef.current = isOn
+
+  // ── Pending state (while beforeChange Promise resolves) ───────────────────
+  const [pending, setPending] = useState(false)
+  const isBlocked = loading || disabled || pending
+
+  // ── Animations ────────────────────────────────────────────────────────────
+  const THUMB_OFF = dims.thumbInset
+  const THUMB_ON  = dims.trackWidth - dims.thumbSize - dims.thumbInset
+
+  const thumbAnim  = useRef(new Animated.Value(isOn ? THUMB_ON  : THUMB_OFF)).current
+  const trackAnim  = useRef(new Animated.Value(isOn ? 1         : 0        )).current
+  const scaleAnim  = useRef(new Animated.Value(1)).current
+
+  const runAnimation = useCallback(
+    (toOn: boolean) => {
+      Animated.parallel([
+        Animated.spring(thumbAnim, {
+          toValue:         toOn ? THUMB_ON : THUMB_OFF,
+          useNativeDriver: true,
+          damping:         18,
+          stiffness:       260,
+          mass:            0.8,
+        }),
+        Animated.timing(trackAnim, {
+          toValue:         toOn ? 1 : 0,
+          duration:        220,
+          easing:          Easing.out(Easing.quad),
+          useNativeDriver: false, // background colour can't use native driver
+        }),
+      ]).start()
+    },
+    [thumbAnim, trackAnim, THUMB_ON, THUMB_OFF],
+  )
+
+  // Sync animation when controlled value changes
+  useEffect(() => {
+    runAnimation(isOn)
+  }, [isOn, runAnimation])
+
+  // ── Press + micro-bounce on thumb ─────────────────────────────────────────
+  const handlePress = useCallback(async () => {
+    onPress?.()
+    if (isBlocked) return
+
+    const nextValue = isOnRef.current ? inactiveValue : activeValue
+
+    // Thumb squeeze on press-in
+    Animated.sequence([
+      Animated.timing(scaleAnim, { toValue: 0.88, duration: 80,  useNativeDriver: true }),
+      Animated.spring(scaleAnim, { toValue: 1,    useNativeDriver: true, damping: 14, stiffness: 300 }),
+    ]).start()
+
+    if (beforeChange) {
+      setPending(true)
+      try {
+        const allowed = await beforeChange(nextValue)
+        if (!allowed) return
+      } finally {
+        setPending(false)
+      }
+    }
+
+    if (!isControlled) setLocalValue(nextValue)
+    onChange?.(nextValue)
+  }, [
+    onPress, isBlocked, inactiveValue, activeValue,
+    scaleAnim, beforeChange, isControlled, onChange,
+  ])
+
+  // ── Track background interpolation ────────────────────────────────────────
+  const trackBg = trackAnim.interpolate({
+    inputRange:  [0, 1],
+    outputRange: [colors.inactiveTrack, colors.activeTrack],
+  })
+
+  // ── Label ─────────────────────────────────────────────────────────────────
+  const labelNode = isOn ? activeLabel : inactiveLabel
+  const labelColor = isOn ? colors.activeLabelText : colors.inactiveLabelText
+
+  // ── Spinner size = 55% of thumb ───────────────────────────────────────────
+  const spinnerSize = Math.round(dims.thumbSize * 0.55)
+
+  // ─────────────────────────────────────────────────────────────────────────
+  return (
+    <TouchableWithoutFeedback
+      onPress={handlePress}
+      disabled={isBlocked}
+      accessibilityRole="switch"
+      accessibilityState={{ checked: isOn, disabled: isBlocked, busy: loading }}
+      testID={testID}
+    >
+      <View
+        style={[
+          styles.root,
+          disabled && styles.disabled,
+          style,
+        ]}
+      >
+        {/* Track */}
+        <Animated.View
+          style={[
+            styles.track,
+            {
+              width:        dims.trackWidth,
+              height:       dims.trackHeight,
+              borderRadius: dims.trackHeight / 2,
+              backgroundColor: trackBg,
+              borderWidth:  isOn ? 0 : StyleSheet.hairlineWidth,
+              borderColor:  colors.inactiveBorder,
+            },
+          ]}
+        >
+          {/* Inner label (rendered behind the thumb) */}
+          {labelNode ? (
+            <View
+              style={[
+                styles.label_wrap,
+                isOn
+                  ? { left: dims.thumbInset + 2, right: dims.thumbSize + dims.thumbInset }
+                  : { left: dims.thumbSize + dims.thumbInset, right: dims.thumbInset + 2 },
+              ]}
+            >
+              {typeof labelNode === 'string' ? (
+                <Text
+                  style={[
+                    styles.label_text,
+                    { fontSize: dims.fontSize, color: labelColor },
+                    labelStyle,
+                  ]}
+                  numberOfLines={1}
+                >
+                  {labelNode}
+                </Text>
+              ) : labelNode}
+            </View>
+          ) : null}
+        </Animated.View>
+
+        {/* Thumb */}
+        <Animated.View
+          style={[
+            styles.thumb,
+            {
+              width:        dims.thumbSize,
+              height:       dims.thumbSize,
+              borderRadius: dims.thumbSize / 2,
+              top:          dims.thumbInset,
+              backgroundColor: colors.thumb,
+              shadowColor:  colors.thumbShadow,
+              transform: [
+                { translateX: thumbAnim },
+                { scale:      scaleAnim  },
+              ],
+            },
+          ]}
+        >
+          {/* Loading spinner or pending spinner */}
+          {(loading || pending) && (
+            <Spinner size={spinnerSize} color={isOn ? colors.activeTrack : colors.loadingColor} />
+          )}
+        </Animated.View>
+      </View>
+    </TouchableWithoutFeedback>
+  )
+}
+
+// memo + cast to preserve generics through memo wrapper
+export const Switch = memo(SwitchInner) as typeof SwitchInner
+
+// ─── Styles ───────────────────────────────────────────────────────────────────
+
+const styles = StyleSheet.create({
+  root: {
+    position:       'relative',
+    alignSelf:      'flex-start',
+  },
+  disabled: {
+    opacity: 0.45,
+  },
+  track: {
+    overflow: 'hidden',
+    justifyContent: 'center',
+  },
+  label_wrap: {
+    position:       'absolute',
+    top:            0,
+    bottom:         0,
+    justifyContent: 'center',
+    alignItems:     'center',
+    overflow:       'hidden',
+  },
+  label_text: {
+    fontWeight: '600',
+    textAlign:  'center',
+  },
+  thumb: {
+    position:    'absolute',
+    alignItems:  'center',
+    justifyContent: 'center',
+    // Shadow (iOS)
+    shadowOffset:  { width: 0, height: 2 },
+    shadowOpacity: 0.18,
+    shadowRadius:  4,
+    // Elevation (Android)
+    elevation:     3,
+  },
+})

package/src/switch/_index.tsx

@@ -0,0 +1,135 @@
+import React, { useState, useRef } from 'react';
+import {
+  View,
+  TouchableWithoutFeedback,
+  Animated,
+  StyleSheet,
+} from 'react-native';
+
+interface ToggleSwitchProps {
+  initialValue?: boolean;
+  onToggle?: (value: boolean) => void;
+  width?: number;
+  height?: number;
+}
+ function StyledSwitch({
+  initialValue = false,
+  onToggle,
+  width = 120,
+  height = 60,
+}: ToggleSwitchProps) {
+  const [isOn, setIsOn] = useState(initialValue);
+  const animValue = useRef(new Animated.Value(initialValue ? 1 : 0)).current;
+
+  const thumbSize = height - 12;
+  const travelDistance = width - thumbSize - 12;
+
+  const handlePress = () => {
+    const newValue = !isOn;
+    setIsOn(newValue);
+    onToggle?.(newValue);
+
+    Animated.spring(animValue, {
+      toValue: newValue ? 1 : 0,
+      useNativeDriver: false,
+      tension: 60,
+      friction: 8,
+    }).start();
+  };
+
+  // Interpolated values
+  const thumbTranslate = animValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: [6, travelDistance + 6],
+  });
+
+  const trackColor = animValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['#E8E8F0', '#E8E8F0'], // track stays the same as in the design
+  });
+
+  const thumbColor = animValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['#CCCCDD', '#4F46E5'],
+  });
+
+  const thumbScale = animValue.interpolate({
+    inputRange: [0, 0.5, 1],
+    outputRange: [1, 0.9, 1],
+  });
+
+  const shadowOpacity = animValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0.1, 0.35],
+  });
+
+  return (
+    <TouchableWithoutFeedback onPress={handlePress} accessibilityRole="switch">
+      <Animated.View
+        style={[
+          styles.track,
+          {
+            width,
+            height,
+            borderRadius: height / 2,
+            backgroundColor: trackColor,
+          },
+        ]}
+      >
+        {/* Subtle dot pattern overlay */}
+        <View style={[StyleSheet.absoluteFillObject, styles.dotPattern, { borderRadius: height / 2 }]} />
+
+        {/* Thumb */}
+        <Animated.View
+          style={[
+            styles.thumb,
+            {
+              width: thumbSize,
+              height: thumbSize,
+              borderRadius: thumbSize / 2,
+              backgroundColor: thumbColor,
+              transform: [
+                { translateX: thumbTranslate },
+                { scale: thumbScale },
+              ],
+              shadowOpacity,
+            },
+          ]}
+        />
+      </Animated.View>
+    </TouchableWithoutFeedback>
+  );
+}
+
+const styles = StyleSheet.create({
+  track: {
+    justifyContent: 'center',
+    borderWidth: 1,
+    borderColor: 'rgba(200, 200, 220, 0.6)',
+    // Subtle inner shadow via elevation
+    elevation: 1,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.06,
+    shadowRadius: 3,
+  },
+  dotPattern: {
+    // Simulated stipple texture via opacity overlay
+    backgroundColor: 'rgba(180, 180, 210, 0.08)',
+  },
+  thumb: {
+    position: 'absolute',
+    top: undefined,
+    // Shadow for the thumb (iOS)
+    shadowColor: '#4F46E5',
+    shadowOffset: { width: 0, height: 3 },
+    shadowRadius: 8,
+    // Android elevation
+    elevation: 4,
+  },
+});
+
+export { StyledSwitch };
+export type { ToggleSwitchProps as StyledSwitchProps } 
+
+

package/src/switch/index.ts

@@ -0,0 +1,62 @@
+/**
+ * @module Switch
+ *
+ * ─── Basic ───────────────────────────────────────────────────────────────────
+ * ```tsx
+ * import { Switch } from './switch'
+ *
+ * // Uncontrolled
+ * <Switch defaultValue onChange={v => console.log(v)} />
+ *
+ * // Controlled
+ * <Switch value={isOn} onChange={setIsOn} />
+ * ```
+ *
+ * ─── Sizes ───────────────────────────────────────────────────────────────────
+ * ```tsx
+ * <Switch size="sm" />
+ * <Switch size="md" />   // default
+ * <Switch size="lg" />
+ * <Switch customSize={40} />  // arbitrary pixel height
+ * ```
+ *
+ * ─── Labels ──────────────────────────────────────────────────────────────────
+ * ```tsx
+ * <Switch activeLabel="ON" inactiveLabel="OFF" />
+ * <Switch activeLabel={<Icon name="check" />} inactiveLabel={<Icon name="x" />} />
+ * ```
+ *
+ * ─── Custom values (non-boolean) ─────────────────────────────────────────────
+ * ```tsx
+ * <Switch
+ *   activeValue="yes"
+ *   inactiveValue="no"
+ *   defaultValue="no"
+ *   onChange={(v: 'yes' | 'no') => console.log(v)}
+ * />
+ * ```
+ *
+ * ─── Guard (beforeChange) ────────────────────────────────────────────────────
+ * ```tsx
+ * <Switch
+ *   beforeChange={async next => {
+ *     const ok = await confirmDialog()
+ *     return ok
+ *   }}
+ * />
+ * ```
+ *
+ * ─── Colors ──────────────────────────────────────────────────────────────────
+ * ```tsx
+ * <Switch
+ *   colors={{ activeTrack: '#22c55e', thumb: '#fff' }}
+ *   // or per-prop shortcuts:
+ *   activeColor="#22c55e"
+ *   inactiveColor="#f4f4f5"
+ * />
+ * ```
+ */
+
+export { Switch }                           from './Switch'
+export type { SwitchProps, SwitchColors, SwitchSize } from './interface'
+export { SWITCH_COLORS_DEFAULT, SWITCH_SIZES }        from './interface'