@xaui/native 0.0.6 → 0.0.8

package/dist/button/index.cjs

@@ -611,7 +611,7 @@ var runPressOutAnimation = (animatedScale, animatedOpacity) => {
 // src/components/button/button.tsx
 var Button = ({
   children,
-  themeColor = "default",
+  themeColor = "primary",
   variant = "solid",
   size = "md",
   radius = "md",

package/dist/button/index.js

@@ -185,7 +185,7 @@ var runPressOutAnimation = (animatedScale, animatedOpacity) => {
 // src/components/button/button.tsx
 var Button = ({
   children,
-  themeColor = "default",
+  themeColor = "primary",
   variant = "solid",
   size = "md",
   radius = "md",

package/dist/checkbox/index.cjs

@@ -356,7 +356,7 @@ var import_core4 = require("@xaui/core");
 var Checkbox = ({
   label,
   labelAlignment = "right",
-  themeColor = "default",
+  themeColor = "primary",
   variant = "filled",
   size = "md",
   radius = "sm",

package/dist/checkbox/index.js

@@ -301,7 +301,7 @@ import { getSafeThemeColor as getSafeThemeColor2 } from "@xaui/core";
 var Checkbox = ({
   label,
   labelAlignment = "right",
-  themeColor = "default",
+  themeColor = "primary",
   variant = "filled",
   size = "md",
   radius = "sm",

package/dist/switch/index.cjs

@@ -0,0 +1,413 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/switch/index.ts
+var switch_exports = {};
+__export(switch_exports, {
+  Switch: () => Switch
+});
+module.exports = __toCommonJS(switch_exports);
+
+// src/components/switch/switch.tsx
+var import_react4 = __toESM(require("react"), 1);
+var import_react_native5 = require("react-native");
+
+// src/components/switch/switch.hook.ts
+var import_react3 = require("react");
+var import_core = require("@xaui/core");
+
+// src/core/theme-context.tsx
+var import_react = __toESM(require("react"), 1);
+var import_react_native = require("react-native");
+var import_theme = require("@xaui/core/theme");
+var import_palette = require("@xaui/core/palette");
+var XUIThemeContext = (0, import_react.createContext)(null);
+
+// src/core/theme-hooks.ts
+var import_react2 = require("react");
+var import_react_native2 = require("react-native");
+function useXUITheme() {
+  const theme = (0, import_react2.useContext)(XUIThemeContext);
+  if (!theme) {
+    throw new Error("useXUITheme must be used within XUIProvider");
+  }
+  return theme;
+}
+
+// src/core/index.ts
+var import_theme2 = require("@xaui/core/theme");
+
+// src/components/switch/switch.hook.ts
+var useSwitchColorScheme = (themeColor) => {
+  const theme = useXUITheme();
+  const safeThemeColor = (0, import_core.getSafeThemeColor)(themeColor);
+  return theme.colors[safeThemeColor];
+};
+var useSwitchSizeStyles = (variant, size) => {
+  const theme = useXUITheme();
+  const sizeStyles = (0, import_react3.useMemo)(() => {
+    if (variant === "overlap") {
+      const sizes2 = {
+        sm: {
+          trackWidth: 40,
+          trackHeight: 16,
+          thumbSize: 22,
+          fontSize: theme.fontSizes.sm,
+          padding: 0
+        },
+        md: {
+          trackWidth: 48,
+          trackHeight: 18,
+          thumbSize: 26,
+          fontSize: theme.fontSizes.md,
+          padding: 0
+        },
+        lg: {
+          trackWidth: 56,
+          trackHeight: 20,
+          thumbSize: 30,
+          fontSize: theme.fontSizes.lg,
+          padding: 0
+        }
+      };
+      return sizes2[size];
+    }
+    const sizes = {
+      sm: {
+        trackWidth: 40,
+        trackHeight: 24,
+        thumbSize: 18,
+        fontSize: theme.fontSizes.sm,
+        padding: 3
+      },
+      md: {
+        trackWidth: 48,
+        trackHeight: 28,
+        thumbSize: 22,
+        fontSize: theme.fontSizes.md,
+        padding: 3
+      },
+      lg: {
+        trackWidth: 56,
+        trackHeight: 32,
+        thumbSize: 26,
+        fontSize: theme.fontSizes.lg,
+        padding: 3
+      }
+    };
+    return sizes[size];
+  }, [size, theme, variant]);
+  return sizeStyles;
+};
+var useSwitchRadiusStyles = (radius) => {
+  const theme = useXUITheme();
+  const radiusStyles = (0, import_react3.useMemo)(() => {
+    const radii = {
+      none: theme.borderRadius.none,
+      sm: theme.borderRadius.sm,
+      md: theme.borderRadius.md,
+      lg: theme.borderRadius.lg,
+      full: theme.borderRadius.full
+    };
+    return { borderRadius: radii[radius] };
+  }, [radius, theme]);
+  const thumbRadius = (0, import_react3.useMemo)(() => {
+    const radii = {
+      none: theme.borderRadius.none,
+      sm: theme.borderRadius.sm,
+      md: theme.borderRadius.md,
+      lg: theme.borderRadius.lg,
+      full: theme.borderRadius.full
+    };
+    return radii[radius];
+  }, [radius, theme]);
+  return { radiusStyles, thumbRadius };
+};
+var useSwitchTrackStyles = ({
+  colorScheme,
+  isSelected,
+  variant,
+  sizeStyles,
+  radiusStyles
+}) => {
+  const theme = useXUITheme();
+  const trackStyles = (0, import_react3.useMemo)(() => {
+    const backgroundColor = isSelected ? variant === "overlap" ? colorScheme.background : colorScheme.main : theme.colors.default.background;
+    return {
+      width: sizeStyles.trackWidth,
+      height: sizeStyles.trackHeight,
+      backgroundColor,
+      paddingHorizontal: sizeStyles.padding,
+      ...radiusStyles
+    };
+  }, [colorScheme, isSelected, radiusStyles, sizeStyles, theme, variant]);
+  return trackStyles;
+};
+var useSwitchThumbStyles = ({
+  colorScheme,
+  isSelected,
+  variant,
+  sizeStyles,
+  thumbRadius
+}) => {
+  const theme = useXUITheme();
+  const thumbStyles = (0, import_react3.useMemo)(() => {
+    const baseStyle = {
+      width: sizeStyles.thumbSize,
+      height: sizeStyles.thumbSize,
+      borderRadius: thumbRadius,
+      backgroundColor: variant === "overlap" && isSelected ? colorScheme.main : theme.colors.background
+    };
+    if (variant !== "overlap") return baseStyle;
+    return {
+      ...baseStyle,
+      ...theme.shadows.sm
+    };
+  }, [colorScheme, isSelected, sizeStyles, theme, thumbRadius, variant]);
+  return thumbStyles;
+};
+var useSwitchContainerStyles = (labelAlignment) => {
+  const containerStyles = (0, import_react3.useMemo)(() => {
+    const isJustified = labelAlignment === "justify-left" || labelAlignment === "justify-right";
+    return {
+      flexDirection: labelAlignment === "left" || labelAlignment === "justify-left" ? "row-reverse" : "row",
+      justifyContent: isJustified ? "space-between" : "flex-start"
+    };
+  }, [labelAlignment]);
+  return containerStyles;
+};
+
+// src/components/switch/switch.animation.ts
+var import_react_native3 = require("react-native");
+var runThumbPositionAnimation = (thumbPosition, isSelected) => {
+  import_react_native3.Animated.spring(thumbPosition, {
+    toValue: isSelected ? 1 : 0,
+    useNativeDriver: true,
+    damping: 15,
+    stiffness: 150
+  }).start();
+};
+var runSwitchPressInAnimation = (animatedScale, animatedThumbScale, isOverlap) => {
+  import_react_native3.Animated.parallel([
+    import_react_native3.Animated.spring(animatedScale, {
+      toValue: 0.95,
+      useNativeDriver: true
+    }),
+    import_react_native3.Animated.spring(animatedThumbScale, {
+      toValue: isOverlap ? 1.1 : 1.2,
+      useNativeDriver: true
+    })
+  ]).start();
+};
+var runSwitchPressOutAnimation = (animatedScale, animatedThumbScale) => {
+  import_react_native3.Animated.parallel([
+    import_react_native3.Animated.spring(animatedScale, {
+      toValue: 1,
+      useNativeDriver: true
+    }),
+    import_react_native3.Animated.spring(animatedThumbScale, {
+      toValue: 1,
+      useNativeDriver: true
+    })
+  ]).start();
+};
+
+// src/components/switch/switch.style.ts
+var import_react_native4 = require("react-native");
+var styles = import_react_native4.StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8
+  },
+  fullWidth: {
+    width: "100%"
+  },
+  track: {
+    justifyContent: "center",
+    position: "relative"
+  },
+  thumbContainer: {
+    position: "relative",
+    width: "100%",
+    height: "100%",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  thumb: {
+    position: "absolute",
+    left: 0
+  },
+  label: {
+    fontWeight: "400"
+  },
+  disabled: {
+    opacity: 0.5
+  },
+  disabledText: {
+    opacity: 0.7
+  }
+});
+
+// src/components/switch/switch.tsx
+var Switch = ({
+  label,
+  labelAlignment = "right",
+  themeColor = "primary",
+  variant = "inside",
+  size = "md",
+  radius = "full",
+  fullWidth = false,
+  isSelected: isSelectedProp,
+  isDisabled = false,
+  labelStyle,
+  style,
+  onValueChange
+}) => {
+  const theme = useXUITheme();
+  const isControlled = typeof isSelectedProp === "boolean";
+  const [internalSelected, setInternalSelected] = (0, import_react4.useState)(isSelectedProp ?? false);
+  const isSelected = isControlled ? isSelectedProp : internalSelected;
+  const scale = (0, import_react4.useRef)(new import_react_native5.Animated.Value(1)).current;
+  const thumbPosition = (0, import_react4.useRef)(new import_react_native5.Animated.Value(isSelected ? 1 : 0)).current;
+  const thumbScale = (0, import_react4.useRef)(new import_react_native5.Animated.Value(1)).current;
+  const colorScheme = useSwitchColorScheme(themeColor);
+  const sizeStyles = useSwitchSizeStyles(variant, size);
+  const { radiusStyles, thumbRadius } = useSwitchRadiusStyles(radius);
+  const trackStyles = useSwitchTrackStyles({
+    colorScheme,
+    isSelected,
+    variant,
+    sizeStyles,
+    radiusStyles
+  });
+  const thumbStyles = useSwitchThumbStyles({
+    colorScheme,
+    isSelected,
+    variant,
+    sizeStyles,
+    thumbRadius
+  });
+  const containerStyles = useSwitchContainerStyles(labelAlignment);
+  const maxTranslateX = (0, import_react4.useMemo)(() => {
+    if (variant === "overlap") {
+      return sizeStyles.trackWidth - sizeStyles.thumbSize;
+    }
+    return sizeStyles.trackWidth - sizeStyles.thumbSize - sizeStyles.padding * 2;
+  }, [sizeStyles, variant]);
+  const translateX = (0, import_react4.useMemo)(
+    () => thumbPosition.interpolate({
+      inputRange: [0, 1],
+      outputRange: [0, maxTranslateX]
+    }),
+    [maxTranslateX, thumbPosition]
+  );
+  (0, import_react4.useEffect)(() => {
+    runThumbPositionAnimation(thumbPosition, isSelected);
+  }, [isSelected, thumbPosition]);
+  const handlePress = () => {
+    if (isDisabled) return;
+    const nextValue = !isSelected;
+    onValueChange?.(nextValue);
+    if (!isControlled) {
+      setInternalSelected(nextValue);
+    }
+  };
+  const handlePressIn = () => {
+    if (isDisabled) return;
+    runSwitchPressInAnimation(scale, thumbScale, variant === "overlap");
+  };
+  const handlePressOut = () => {
+    if (isDisabled) return;
+    runSwitchPressOutAnimation(scale, thumbScale);
+  };
+  return /* @__PURE__ */ import_react4.default.createElement(
+    import_react_native5.Pressable,
+    {
+      onPress: handlePress,
+      onPressIn: handlePressIn,
+      onPressOut: handlePressOut,
+      disabled: isDisabled,
+      accessible: true,
+      accessibilityRole: "switch",
+      accessibilityLabel: label,
+      accessibilityState: {
+        disabled: isDisabled,
+        checked: isSelected
+      },
+      style: [
+        styles.container,
+        containerStyles,
+        fullWidth && styles.fullWidth,
+        isDisabled && styles.disabled,
+        style
+      ]
+    },
+    /* @__PURE__ */ import_react4.default.createElement(
+      import_react_native5.Animated.View,
+      {
+        style: [
+          styles.track,
+          trackStyles,
+          {
+            transform: [{ scale }]
+          }
+        ]
+      },
+      /* @__PURE__ */ import_react4.default.createElement(import_react_native5.View, { style: styles.thumbContainer }, /* @__PURE__ */ import_react4.default.createElement(
+        import_react_native5.Animated.View,
+        {
+          style: [
+            styles.thumb,
+            thumbStyles,
+            {
+              transform: [{ translateX }, { scale: thumbScale }]
+            }
+          ]
+        }
+      ))
+    ),
+    label && /* @__PURE__ */ import_react4.default.createElement(
+      import_react_native5.Text,
+      {
+        style: [
+          styles.label,
+          { fontSize: sizeStyles.fontSize, color: theme.colors.foreground },
+          isDisabled && styles.disabledText,
+          labelStyle
+        ]
+      },
+      label
+    )
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Switch
+});

package/dist/switch/index.d.cts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { TextStyle, ViewStyle } from 'react-native';
+import { T as ThemeColor } from '../index-BOw6tbkc.cjs';
+
+type SwitchVariant = 'inside' | 'overlap';
+type SwitchSize = 'sm' | 'md' | 'lg';
+type SwitchRadius = 'none' | 'sm' | 'md' | 'lg' | 'full';
+type SwitchLabelAlignment = 'left' | 'right' | 'justify-left' | 'justify-right';
+type SwitchEvents = {
+    onValueChange?: (isSelected: boolean) => void;
+};
+type SwitchProps = {
+    label?: string;
+    labelAlignment?: SwitchLabelAlignment;
+    themeColor?: ThemeColor;
+    variant?: SwitchVariant;
+    size?: SwitchSize;
+    radius?: SwitchRadius;
+    fullWidth?: boolean;
+    isSelected?: boolean;
+    isDisabled?: boolean;
+    labelStyle?: TextStyle;
+    style?: ViewStyle;
+} & SwitchEvents;
+
+declare const Switch: React.FC<SwitchProps>;
+
+export { Switch, type SwitchLabelAlignment, type SwitchProps, type SwitchRadius, type SwitchSize, type SwitchVariant };

package/dist/switch/index.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { TextStyle, ViewStyle } from 'react-native';
+import { T as ThemeColor } from '../index-BOw6tbkc.js';
+
+type SwitchVariant = 'inside' | 'overlap';
+type SwitchSize = 'sm' | 'md' | 'lg';
+type SwitchRadius = 'none' | 'sm' | 'md' | 'lg' | 'full';
+type SwitchLabelAlignment = 'left' | 'right' | 'justify-left' | 'justify-right';
+type SwitchEvents = {
+    onValueChange?: (isSelected: boolean) => void;
+};
+type SwitchProps = {
+    label?: string;
+    labelAlignment?: SwitchLabelAlignment;
+    themeColor?: ThemeColor;
+    variant?: SwitchVariant;
+    size?: SwitchSize;
+    radius?: SwitchRadius;
+    fullWidth?: boolean;
+    isSelected?: boolean;
+    isDisabled?: boolean;
+    labelStyle?: TextStyle;
+    style?: ViewStyle;
+} & SwitchEvents;
+
+declare const Switch: React.FC<SwitchProps>;
+
+export { Switch, type SwitchLabelAlignment, type SwitchProps, type SwitchRadius, type SwitchSize, type SwitchVariant };