@xaui/native 0.0.3 → 0.0.4

package/dist/button/index.cjs

@@ -480,7 +480,7 @@ var useTextStyles = (themeColor, variant) => {
     if (variant === "solid" || variant === "elevated") {
       return colorScheme.foreground;
     }
-    return colorScheme.accent;
+    return colorScheme.main;
   }, [variant, colorScheme]);
   return {
     textColor
@@ -557,9 +557,9 @@ function useVariantSizesStyles(themeColor, variant) {
         ...theme.shadows.md
       },
       faded: {
-        backgroundColor: `${colorScheme.background}90`,
+        backgroundColor: `${colorScheme.background}95`,
         borderWidth: theme.borderWidth.md,
-        borderColor: colorScheme.main
+        borderColor: `${colorScheme.main}90`
       }
     };
     return styles3[variant];

package/dist/button/index.d.cts

@@ -1,6 +1,6 @@
 import React, { ReactNode } from 'react';
 import { TextStyle, ViewStyle, GestureResponderEvent } from 'react-native';
-import { T as ThemeColor, S as Size } from '../index-BDSvmsTU.cjs';
+import { T as ThemeColor, S as Size } from '../index-BOw6tbkc.cjs';
 
 type ButtonVariant = 'solid' | 'outlined' | 'flat' | 'light' | 'elevated' | 'faded';
 type ButtonRadius = 'none' | 'sm' | 'md' | 'lg' | 'full';

package/dist/button/index.d.ts

@@ -1,6 +1,6 @@
 import React, { ReactNode } from 'react';
 import { TextStyle, ViewStyle, GestureResponderEvent } from 'react-native';
-import { T as ThemeColor, S as Size } from '../index-BDSvmsTU.js';
+import { T as ThemeColor, S as Size } from '../index-BOw6tbkc.js';
 
 type ButtonVariant = 'solid' | 'outlined' | 'flat' | 'light' | 'elevated' | 'faded';
 type ButtonRadius = 'none' | 'sm' | 'md' | 'lg' | 'full';

package/dist/button/index.js

@@ -60,7 +60,7 @@ var useTextStyles = (themeColor, variant) => {
     if (variant === "solid" || variant === "elevated") {
       return colorScheme.foreground;
     }
-    return colorScheme.accent;
+    return colorScheme.main;
   }, [variant, colorScheme]);
   return {
     textColor
@@ -137,9 +137,9 @@ function useVariantSizesStyles(themeColor, variant) {
         ...theme.shadows.md
       },
       faded: {
-        backgroundColor: `${colorScheme.background}90`,
+        backgroundColor: `${colorScheme.background}95`,
         borderWidth: theme.borderWidth.md,
-        borderColor: colorScheme.main
+        borderColor: `${colorScheme.main}90`
       }
     };
     return styles2[variant];

package/dist/checkbox/index.cjs

@@ -36,67 +36,148 @@ module.exports = __toCommonJS(checkbox_exports);
 
 // src/components/checkbox/checkbox.tsx
 var import_react5 = __toESM(require("react"), 1);
-var import_react_native5 = require("react-native");
+var import_react_native6 = require("react-native");
 
 // src/components/checkbox/checkbox-icon.tsx
 var import_react = __toESM(require("react"), 1);
-var import_react_native = require("react-native");
+var import_react_native2 = require("react-native");
 var import_react_native_svg = __toESM(require("react-native-svg"), 1);
-var AnimatedSvg = import_react_native.Animated.createAnimatedComponent(import_react_native_svg.default);
-var AnimatedPolyline = import_react_native.Animated.createAnimatedComponent(import_react_native_svg.Polyline);
-function CheckIcon({ isChecked, color, size }) {
-  const opacity = (0, import_react.useRef)(new import_react_native.Animated.Value(0)).current;
-  const strokeDashoffset = (0, import_react.useRef)(new import_react_native.Animated.Value(66)).current;
+
+// src/components/checkbox/checkbox.animation.ts
+var import_react_native = require("react-native");
+var runCheckAnimation = (opacity, strokeDashoffset) => {
+  import_react_native.Animated.parallel([
+    import_react_native.Animated.timing(opacity, {
+      toValue: 1,
+      duration: 200,
+      useNativeDriver: false
+    }),
+    import_react_native.Animated.timing(strokeDashoffset, {
+      toValue: 44,
+      duration: 250,
+      useNativeDriver: false
+    })
+  ]).start();
+};
+var runUncheckAnimation = (opacity, strokeDashoffset) => {
+  import_react_native.Animated.parallel([
+    import_react_native.Animated.timing(opacity, {
+      toValue: 0,
+      duration: 200,
+      useNativeDriver: false
+    }),
+    import_react_native.Animated.timing(strokeDashoffset, {
+      toValue: 66,
+      duration: 250,
+      useNativeDriver: false
+    })
+  ]).start();
+};
+var runBackgroundInAnimation = (backgroundScale, backgroundOpacity) => {
+  import_react_native.Animated.parallel([
+    import_react_native.Animated.timing(backgroundScale, {
+      toValue: 1,
+      duration: 200,
+      useNativeDriver: true
+    }),
+    import_react_native.Animated.timing(backgroundOpacity, {
+      toValue: 1,
+      duration: 200,
+      useNativeDriver: true
+    })
+  ]).start();
+};
+var runBackgroundOutAnimation = (backgroundScale, backgroundOpacity) => {
+  import_react_native.Animated.parallel([
+    import_react_native.Animated.timing(backgroundScale, {
+      toValue: 0.5,
+      duration: 200,
+      useNativeDriver: true
+    }),
+    import_react_native.Animated.timing(backgroundOpacity, {
+      toValue: 0,
+      duration: 200,
+      useNativeDriver: true
+    })
+  ]).start();
+};
+var runPressInAnimation = (scale) => {
+  import_react_native.Animated.spring(scale, {
+    toValue: 0.95,
+    useNativeDriver: true
+  }).start();
+};
+var runPressOutAnimation = (scale) => {
+  import_react_native.Animated.spring(scale, {
+    toValue: 1,
+    useNativeDriver: true
+  }).start();
+};
+
+// src/components/checkbox/checkbox-icon.tsx
+var AnimatedSvg = import_react_native2.Animated.createAnimatedComponent(import_react_native_svg.default);
+var AnimatedPolyline = import_react_native2.Animated.createAnimatedComponent(import_react_native_svg.Polyline);
+function CheckIcon({
+  isChecked,
+  color,
+  size
+}) {
+  const opacity = (0, import_react.useRef)(new import_react_native2.Animated.Value(0)).current;
+  const strokeDashoffset = (0, import_react.useRef)(new import_react_native2.Animated.Value(66)).current;
   (0, import_react.useEffect)(() => {
     if (isChecked) {
-      import_react_native.Animated.parallel([
-        import_react_native.Animated.timing(opacity, {
-          toValue: 1,
-          duration: 200,
-          useNativeDriver: false
-        }),
-        import_react_native.Animated.timing(strokeDashoffset, {
-          toValue: 44,
-          duration: 250,
-          useNativeDriver: false
-        })
-      ]).start();
+      runCheckAnimation(opacity, strokeDashoffset);
     } else {
-      import_react_native.Animated.parallel([
-        import_react_native.Animated.timing(opacity, {
-          toValue: 0,
-          duration: 200,
-          useNativeDriver: false
-        }),
-        import_react_native.Animated.timing(strokeDashoffset, {
-          toValue: 66,
-          duration: 250,
-          useNativeDriver: false
-        })
-      ]).start();
+      runUncheckAnimation(opacity, strokeDashoffset);
     }
   }, [isChecked, opacity, strokeDashoffset]);
-  return /* @__PURE__ */ import_react.default.createElement(AnimatedSvg, { width: size, height: size, viewBox: "0 0 17 18", fill: "none", opacity }, /* @__PURE__ */ import_react.default.createElement(
-    AnimatedPolyline,
+  return /* @__PURE__ */ import_react.default.createElement(
+    AnimatedSvg,
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 17 18",
+      fill: "none",
+      opacity
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      AnimatedPolyline,
+      {
+        points: "1 9 7 14 15 4",
+        stroke: color,
+        strokeWidth: 2,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeDasharray: "22",
+        strokeDashoffset
+      }
+    )
+  );
+}
+function PlaceholderCheckIcon({ color, size }) {
+  return /* @__PURE__ */ import_react.default.createElement(import_react_native_svg.default, { width: size, height: size, viewBox: "0 0 17 18" }, /* @__PURE__ */ import_react.default.createElement(
+    import_react_native_svg.Path,
     {
-      points: "1 9 7 14 15 4",
+      d: "M 1 9 L 7 14 L 15 4",
       stroke: color,
       strokeWidth: 2,
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      strokeDasharray: "22",
-      strokeDashoffset
+      fill: "none"
     }
   ));
 }
-function IndeterminateIcon({
+function IndeterminateCheckIcon({
   color,
   size
 }) {
   return /* @__PURE__ */ import_react.default.createElement(import_react_native_svg.default, { width: size, height: size, viewBox: "0 0 24 24" }, /* @__PURE__ */ import_react.default.createElement(import_react_native_svg.Line, { x1: "21", y1: "12", x2: "3", y2: "12", stroke: color, strokeWidth: 3 }));
 }
-function CheckboxIcon({ isIndeterminate, ...props }) {
-  const BaseIcon = isIndeterminate ? IndeterminateIcon : CheckIcon;
+function CheckboxIcon({ isIndeterminate, variant, ...props }) {
+  const BaseIcon = isIndeterminate ? IndeterminateCheckIcon : CheckIcon;
+  if (variant === "light" && !props.isChecked && !isIndeterminate) {
+    return /* @__PURE__ */ import_react.default.createElement(PlaceholderCheckIcon, { size: props.size, color: props.placeholderColor ?? "" });
+  }
   return /* @__PURE__ */ import_react.default.createElement(BaseIcon, { ...props });
 }
 
@@ -106,13 +187,13 @@ var import_core = require("@xaui/core");
 
 // src/core/theme-context.tsx
 var import_react2 = __toESM(require("react"), 1);
-var import_react_native2 = require("react-native");
+var import_react_native3 = require("react-native");
 var import_theme = require("@xaui/core/theme");
 var XUIThemeContext = (0, import_react2.createContext)(null);
 
 // src/core/theme-hooks.ts
 var import_react3 = require("react");
-var import_react_native3 = require("react-native");
+var import_react_native4 = require("react-native");
 function useXUITheme() {
   const theme = (0, import_react3.useContext)(XUIThemeContext);
   if (!theme) {
@@ -122,12 +203,15 @@ function useXUITheme() {
 }
 
 // src/components/checkbox/checkbox.hook.ts
-var useCheckboxStyles = (themeColor, variant, size, radius, labelAlignment, isActive) => {
+function useSizeStyles(size, variant) {
   const theme = useXUITheme();
-  const safeThemeColor = (0, import_core.getSafeThemeColor)(themeColor);
-  const colorScheme = theme.colors[safeThemeColor];
   const sizeStyles = (0, import_react4.useMemo)(() => {
     const sizes = {
+      xs: {
+        checkboxSize: 14,
+        fontSize: theme.fontSizes.xs,
+        iconSize: variant === "light" ? 10 : 8
+      },
       sm: {
         checkboxSize: 18,
         fontSize: theme.fontSizes.sm,
@@ -145,7 +229,11 @@ var useCheckboxStyles = (themeColor, variant, size, radius, labelAlignment, isAc
       }
     };
     return sizes[size];
-  }, [size, theme, variant]);
+  }, [size, variant, theme]);
+  return sizeStyles;
+}
+function useRadiusStyles(radius) {
+  const theme = useXUITheme();
   const radiusStyles = (0, import_react4.useMemo)(() => {
     const radii = {
       none: theme.borderRadius.none,
@@ -156,39 +244,59 @@ var useCheckboxStyles = (themeColor, variant, size, radius, labelAlignment, isAc
     };
     return { borderRadius: radii[radius] };
   }, [radius, theme]);
-  const checkboxStyles = (0, import_react4.useMemo)(() => {
-    const baseStyle = {
-      width: sizeStyles.checkboxSize,
-      height: sizeStyles.checkboxSize,
-      ...radiusStyles
+  return radiusStyles;
+}
+function useCheckmarkColors(themeColor, variant, isActive) {
+  const theme = useXUITheme();
+  const safeThemeColor = (0, import_core.getSafeThemeColor)(themeColor);
+  const colorScheme = theme.colors[safeThemeColor];
+  const checkmarkColors = (0, import_react4.useMemo)(() => {
+    if (variant === "filled") {
+      return {
+        checked: colorScheme.foreground,
+        unchecked: void 0
+      };
+    }
+    if (isActive) {
+      return {
+        checked: colorScheme.main,
+        unchecked: void 0
+      };
+    }
+    if (themeColor !== "default") {
+      return {
+        checked: colorScheme.foreground,
+        unchecked: colorScheme.background
+      };
+    }
+    return {
+      checked: theme.colors.foreground,
+      unchecked: theme.colors.background
     };
+  }, [variant, colorScheme, isActive, themeColor, theme.colors]);
+  return checkmarkColors;
+}
+function useVariantStyles(themeColor, variant, isActive) {
+  const theme = useXUITheme();
+  const safeThemeColor = (0, import_core.getSafeThemeColor)(themeColor);
+  const colorScheme = theme.colors[safeThemeColor];
+  const variantStyles = (0, import_react4.useMemo)(() => {
     if (variant === "filled") {
       return {
-        ...baseStyle,
         backgroundColor: "transparent",
         borderWidth: isActive ? 0 : theme.borderWidth.md,
         borderColor: isActive ? "transparent" : colorScheme.main
       };
     }
     return {
-      ...baseStyle,
       backgroundColor: "transparent",
       borderWidth: 0,
       borderColor: "transparent"
     };
-  }, [variant, isActive, colorScheme, sizeStyles, radiusStyles, theme]);
-  const checkmarkColor = (0, import_react4.useMemo)(() => {
-    if (variant === "filled") {
-      return colorScheme.foreground;
-    }
-    if (isActive) {
-      return colorScheme.main;
-    }
-    if (themeColor !== "default") {
-      return colorScheme.background;
-    }
-    return theme.colors.foreground;
-  }, [variant, colorScheme, isActive, themeColor, theme.colors.foreground]);
+  }, [variant, isActive, colorScheme, theme]);
+  return variantStyles;
+}
+function useContainerStyles(labelAlignment) {
   const containerStyles = (0, import_react4.useMemo)(() => {
     const isJustified = labelAlignment === "justify-left" || labelAlignment === "justify-right";
     return {
@@ -196,19 +304,12 @@ var useCheckboxStyles = (themeColor, variant, size, radius, labelAlignment, isAc
       justifyContent: isJustified ? "space-between" : "flex-start"
     };
   }, [labelAlignment]);
-  return {
-    colorScheme,
-    sizeStyles,
-    radiusStyles,
-    checkboxStyles,
-    checkmarkColor,
-    containerStyles
-  };
-};
+  return containerStyles;
+}
 
 // src/components/checkbox/checkbox.style.ts
-var import_react_native4 = require("react-native");
-var styles = import_react_native4.StyleSheet.create({
+var import_react_native5 = require("react-native");
+var styles = import_react_native5.StyleSheet.create({
   container: {
     flexDirection: "row",
     alignItems: "center",
@@ -245,6 +346,7 @@ var styles = import_react_native4.StyleSheet.create({
 });
 
 // src/components/checkbox/checkbox.tsx
+var import_core4 = require("@xaui/core");
 var Checkbox = ({
   label,
   labelAlignment = "right",
@@ -261,56 +363,25 @@ var Checkbox = ({
   onValueChange
 }) => {
   const theme = useXUITheme();
+  const colorScheme = theme.colors[(0, import_core4.getSafeThemeColor)(themeColor)];
   const isControlled = typeof isCheckedProp === "boolean";
   const [internalChecked, setInternalChecked] = (0, import_react5.useState)(isCheckedProp ?? false);
   const isChecked = isControlled ? isCheckedProp : internalChecked;
-  const scale = (0, import_react5.useRef)(new import_react_native5.Animated.Value(1)).current;
-  const backgroundScale = (0, import_react5.useRef)(new import_react_native5.Animated.Value(0.5)).current;
-  const backgroundOpacity = (0, import_react5.useRef)(new import_react_native5.Animated.Value(0)).current;
+  const scale = (0, import_react5.useRef)(new import_react_native6.Animated.Value(1)).current;
+  const backgroundScale = (0, import_react5.useRef)(new import_react_native6.Animated.Value(0.5)).current;
+  const backgroundOpacity = (0, import_react5.useRef)(new import_react_native6.Animated.Value(0)).current;
   const isActive = isChecked || isIndeterminate;
-  const {
-    colorScheme,
-    sizeStyles,
-    radiusStyles,
-    checkboxStyles,
-    checkmarkColor,
-    containerStyles
-  } = useCheckboxStyles(
-    themeColor,
-    variant,
-    size,
-    radius,
-    labelAlignment,
-    isActive
-  );
+  const sizeStyles = useSizeStyles(size, variant);
+  const radiusStyles = useRadiusStyles(radius);
+  const checkmarkColors = useCheckmarkColors(themeColor, variant, isActive);
+  const variantStyles = useVariantStyles(themeColor, variant, isActive);
+  const containerStyles = useContainerStyles(labelAlignment);
   (0, import_react5.useEffect)(() => {
     if (variant !== "filled") return;
     if (isActive) {
-      import_react_native5.Animated.parallel([
-        import_react_native5.Animated.timing(backgroundScale, {
-          toValue: 1,
-          duration: 200,
-          useNativeDriver: true
-        }),
-        import_react_native5.Animated.timing(backgroundOpacity, {
-          toValue: 1,
-          duration: 200,
-          useNativeDriver: true
-        })
-      ]).start();
+      runBackgroundInAnimation(backgroundScale, backgroundOpacity);
     } else {
-      import_react_native5.Animated.parallel([
-        import_react_native5.Animated.timing(backgroundScale, {
-          toValue: 0.5,
-          duration: 200,
-          useNativeDriver: true
-        }),
-        import_react_native5.Animated.timing(backgroundOpacity, {
-          toValue: 0,
-          duration: 200,
-          useNativeDriver: true
-        })
-      ]).start();
+      runBackgroundOutAnimation(backgroundScale, backgroundOpacity);
     }
   }, [isActive, variant, backgroundScale, backgroundOpacity]);
   const handlePress = () => {
@@ -324,23 +395,17 @@ var Checkbox = ({
   };
   const handlePressIn = () => {
     if (!isDisabled) {
-      import_react_native5.Animated.spring(scale, {
-        toValue: 0.95,
-        useNativeDriver: true
-      }).start();
+      runPressInAnimation(scale);
     }
   };
   const handlePressOut = () => {
     if (!isDisabled) {
-      import_react_native5.Animated.spring(scale, {
-        toValue: 1,
-        useNativeDriver: true
-      }).start();
+      runPressOutAnimation(scale);
     }
   };
   const accessibilityChecked = isIndeterminate ? "mixed" : isChecked;
   return /* @__PURE__ */ import_react5.default.createElement(
-    import_react_native5.Pressable,
+    import_react_native6.Pressable,
     {
       onPress: handlePress,
       onPressIn: handlePressIn,
@@ -362,18 +427,23 @@ var Checkbox = ({
       ]
     },
     /* @__PURE__ */ import_react5.default.createElement(
-      import_react_native5.Animated.View,
+      import_react_native6.Animated.View,
       {
         style: [
           styles.checkbox,
-          checkboxStyles,
+          {
+            width: sizeStyles.checkboxSize,
+            height: sizeStyles.checkboxSize,
+            ...radiusStyles,
+            ...variantStyles
+          },
           {
             transform: [{ scale }]
           }
         ]
       },
       variant === "filled" && /* @__PURE__ */ import_react5.default.createElement(
-        import_react_native5.Animated.View,
+        import_react_native6.Animated.View,
         {
           style: [
             styles.background,
@@ -386,18 +456,20 @@ var Checkbox = ({
           ]
         }
       ),
-      /* @__PURE__ */ import_react5.default.createElement(import_react_native5.View, { style: styles.checkmarkContainer }, /* @__PURE__ */ import_react5.default.createElement(
+      /* @__PURE__ */ import_react5.default.createElement(import_react_native6.View, { style: styles.checkmarkContainer }, /* @__PURE__ */ import_react5.default.createElement(
         CheckboxIcon,
         {
           isChecked: isActive,
           isIndeterminate,
-          color: checkmarkColor,
-          size: sizeStyles.iconSize
+          color: checkmarkColors.checked,
+          size: sizeStyles.iconSize,
+          placeholderColor: checkmarkColors.unchecked,
+          variant
         }
       ))
     ),
     label && /* @__PURE__ */ import_react5.default.createElement(
-      import_react_native5.Text,
+      import_react_native6.Text,
       {
         style: [
           styles.label,

package/dist/checkbox/index.d.cts

@@ -1,10 +1,8 @@
 import React from 'react';
 import { TextStyle, ViewStyle } from 'react-native';
-import { T as ThemeColor } from '../index-BDSvmsTU.cjs';
+import { T as ThemeColor, S as Size, R as Radius } from '../index-BOw6tbkc.cjs';
 
 type CheckboxVariant = 'filled' | 'light';
-type CheckboxSize = 'sm' | 'md' | 'lg';
-type CheckboxRadius = 'none' | 'sm' | 'md' | 'lg' | 'full';
 type CheckboxLabelAlignment = 'left' | 'right' | 'justify-left' | 'justify-right';
 type CheckboxProps = {
     /**
@@ -30,12 +28,12 @@ type CheckboxProps = {
      * The size of the checkbox.
      * @default 'md'
      */
-    size?: CheckboxSize;
+    size?: Size;
     /**
      * The border radius of the checkbox.
      * @default 'sm'
      */
-    radius?: CheckboxRadius;
+    radius?: Radius;
     /**
      * Whether the checkbox should take the full width of its container.
      * @default false
@@ -72,4 +70,4 @@ type CheckboxProps = {
 
 declare const Checkbox: React.FC<CheckboxProps>;
 
-export { Checkbox, type CheckboxLabelAlignment, type CheckboxProps, type CheckboxRadius, type CheckboxSize, type CheckboxVariant };
+export { Checkbox, type CheckboxLabelAlignment, type CheckboxProps, type CheckboxVariant };

package/dist/checkbox/index.d.ts

@@ -1,10 +1,8 @@
 import React from 'react';
 import { TextStyle, ViewStyle } from 'react-native';
-import { T as ThemeColor } from '../index-BDSvmsTU.js';
+import { T as ThemeColor, S as Size, R as Radius } from '../index-BOw6tbkc.js';
 
 type CheckboxVariant = 'filled' | 'light';
-type CheckboxSize = 'sm' | 'md' | 'lg';
-type CheckboxRadius = 'none' | 'sm' | 'md' | 'lg' | 'full';
 type CheckboxLabelAlignment = 'left' | 'right' | 'justify-left' | 'justify-right';
 type CheckboxProps = {
     /**
@@ -30,12 +28,12 @@ type CheckboxProps = {
      * The size of the checkbox.
      * @default 'md'
      */
-    size?: CheckboxSize;
+    size?: Size;
     /**
      * The border radius of the checkbox.
      * @default 'sm'
      */
-    radius?: CheckboxRadius;
+    radius?: Radius;
     /**
      * Whether the checkbox should take the full width of its container.
      * @default false
@@ -72,4 +70,4 @@ type CheckboxProps = {
 
 declare const Checkbox: React.FC<CheckboxProps>;
 
-export { Checkbox, type CheckboxLabelAlignment, type CheckboxProps, type CheckboxRadius, type CheckboxSize, type CheckboxVariant };
+export { Checkbox, type CheckboxLabelAlignment, type CheckboxProps, type CheckboxVariant };

package/dist/checkbox/index.js

@@ -4,79 +4,163 @@ import {
 
 // src/components/checkbox/checkbox.tsx
 import React2, { useEffect as useEffect2, useRef as useRef2, useState } from "react";
-import { Animated as Animated2, Pressable, Text, View } from "react-native";
+import { Animated as Animated3, Pressable, Text, View } from "react-native";
 
 // src/components/checkbox/checkbox-icon.tsx
 import React, { useEffect, useRef } from "react";
+import { Animated as Animated2 } from "react-native";
+import Svg, { Polyline, Line, Path } from "react-native-svg";
+
+// src/components/checkbox/checkbox.animation.ts
 import { Animated } from "react-native";
-import Svg, { Polyline, Line } from "react-native-svg";
-var AnimatedSvg = Animated.createAnimatedComponent(Svg);
-var AnimatedPolyline = Animated.createAnimatedComponent(Polyline);
-function CheckIcon({ isChecked, color, size }) {
-  const opacity = useRef(new Animated.Value(0)).current;
-  const strokeDashoffset = useRef(new Animated.Value(66)).current;
+var runCheckAnimation = (opacity, strokeDashoffset) => {
+  Animated.parallel([
+    Animated.timing(opacity, {
+      toValue: 1,
+      duration: 200,
+      useNativeDriver: false
+    }),
+    Animated.timing(strokeDashoffset, {
+      toValue: 44,
+      duration: 250,
+      useNativeDriver: false
+    })
+  ]).start();
+};
+var runUncheckAnimation = (opacity, strokeDashoffset) => {
+  Animated.parallel([
+    Animated.timing(opacity, {
+      toValue: 0,
+      duration: 200,
+      useNativeDriver: false
+    }),
+    Animated.timing(strokeDashoffset, {
+      toValue: 66,
+      duration: 250,
+      useNativeDriver: false
+    })
+  ]).start();
+};
+var runBackgroundInAnimation = (backgroundScale, backgroundOpacity) => {
+  Animated.parallel([
+    Animated.timing(backgroundScale, {
+      toValue: 1,
+      duration: 200,
+      useNativeDriver: true
+    }),
+    Animated.timing(backgroundOpacity, {
+      toValue: 1,
+      duration: 200,
+      useNativeDriver: true
+    })
+  ]).start();
+};
+var runBackgroundOutAnimation = (backgroundScale, backgroundOpacity) => {
+  Animated.parallel([
+    Animated.timing(backgroundScale, {
+      toValue: 0.5,
+      duration: 200,
+      useNativeDriver: true
+    }),
+    Animated.timing(backgroundOpacity, {
+      toValue: 0,
+      duration: 200,
+      useNativeDriver: true
+    })
+  ]).start();
+};
+var runPressInAnimation = (scale) => {
+  Animated.spring(scale, {
+    toValue: 0.95,
+    useNativeDriver: true
+  }).start();
+};
+var runPressOutAnimation = (scale) => {
+  Animated.spring(scale, {
+    toValue: 1,
+    useNativeDriver: true
+  }).start();
+};
+
+// src/components/checkbox/checkbox-icon.tsx
+var AnimatedSvg = Animated2.createAnimatedComponent(Svg);
+var AnimatedPolyline = Animated2.createAnimatedComponent(Polyline);
+function CheckIcon({
+  isChecked,
+  color,
+  size
+}) {
+  const opacity = useRef(new Animated2.Value(0)).current;
+  const strokeDashoffset = useRef(new Animated2.Value(66)).current;
   useEffect(() => {
     if (isChecked) {
-      Animated.parallel([
-        Animated.timing(opacity, {
-          toValue: 1,
-          duration: 200,
-          useNativeDriver: false
-        }),
-        Animated.timing(strokeDashoffset, {
-          toValue: 44,
-          duration: 250,
-          useNativeDriver: false
-        })
-      ]).start();
+      runCheckAnimation(opacity, strokeDashoffset);
     } else {
-      Animated.parallel([
-        Animated.timing(opacity, {
-          toValue: 0,
-          duration: 200,
-          useNativeDriver: false
-        }),
-        Animated.timing(strokeDashoffset, {
-          toValue: 66,
-          duration: 250,
-          useNativeDriver: false
-        })
-      ]).start();
+      runUncheckAnimation(opacity, strokeDashoffset);
     }
   }, [isChecked, opacity, strokeDashoffset]);
-  return /* @__PURE__ */ React.createElement(AnimatedSvg, { width: size, height: size, viewBox: "0 0 17 18", fill: "none", opacity }, /* @__PURE__ */ React.createElement(
-    AnimatedPolyline,
+  return /* @__PURE__ */ React.createElement(
+    AnimatedSvg,
     {
-      points: "1 9 7 14 15 4",
+      width: size,
+      height: size,
+      viewBox: "0 0 17 18",
+      fill: "none",
+      opacity
+    },
+    /* @__PURE__ */ React.createElement(
+      AnimatedPolyline,
+      {
+        points: "1 9 7 14 15 4",
+        stroke: color,
+        strokeWidth: 2,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeDasharray: "22",
+        strokeDashoffset
+      }
+    )
+  );
+}
+function PlaceholderCheckIcon({ color, size }) {
+  return /* @__PURE__ */ React.createElement(Svg, { width: size, height: size, viewBox: "0 0 17 18" }, /* @__PURE__ */ React.createElement(
+    Path,
+    {
+      d: "M 1 9 L 7 14 L 15 4",
       stroke: color,
       strokeWidth: 2,
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      strokeDasharray: "22",
-      strokeDashoffset
+      fill: "none"
     }
   ));
 }
-function IndeterminateIcon({
+function IndeterminateCheckIcon({
   color,
   size
 }) {
   return /* @__PURE__ */ React.createElement(Svg, { width: size, height: size, viewBox: "0 0 24 24" }, /* @__PURE__ */ React.createElement(Line, { x1: "21", y1: "12", x2: "3", y2: "12", stroke: color, strokeWidth: 3 }));
 }
-function CheckboxIcon({ isIndeterminate, ...props }) {
-  const BaseIcon = isIndeterminate ? IndeterminateIcon : CheckIcon;
+function CheckboxIcon({ isIndeterminate, variant, ...props }) {
+  const BaseIcon = isIndeterminate ? IndeterminateCheckIcon : CheckIcon;
+  if (variant === "light" && !props.isChecked && !isIndeterminate) {
+    return /* @__PURE__ */ React.createElement(PlaceholderCheckIcon, { size: props.size, color: props.placeholderColor ?? "" });
+  }
   return /* @__PURE__ */ React.createElement(BaseIcon, { ...props });
 }
 
 // src/components/checkbox/checkbox.hook.ts
 import { useMemo } from "react";
 import { getSafeThemeColor } from "@xaui/core";
-var useCheckboxStyles = (themeColor, variant, size, radius, labelAlignment, isActive) => {
+function useSizeStyles(size, variant) {
   const theme = useXUITheme();
-  const safeThemeColor = getSafeThemeColor(themeColor);
-  const colorScheme = theme.colors[safeThemeColor];
   const sizeStyles = useMemo(() => {
     const sizes = {
+      xs: {
+        checkboxSize: 14,
+        fontSize: theme.fontSizes.xs,
+        iconSize: variant === "light" ? 10 : 8
+      },
       sm: {
         checkboxSize: 18,
         fontSize: theme.fontSizes.sm,
@@ -94,7 +178,11 @@ var useCheckboxStyles = (themeColor, variant, size, radius, labelAlignment, isAc
       }
     };
     return sizes[size];
-  }, [size, theme, variant]);
+  }, [size, variant, theme]);
+  return sizeStyles;
+}
+function useRadiusStyles(radius) {
+  const theme = useXUITheme();
   const radiusStyles = useMemo(() => {
     const radii = {
       none: theme.borderRadius.none,
@@ -105,39 +193,59 @@ var useCheckboxStyles = (themeColor, variant, size, radius, labelAlignment, isAc
     };
     return { borderRadius: radii[radius] };
   }, [radius, theme]);
-  const checkboxStyles = useMemo(() => {
-    const baseStyle = {
-      width: sizeStyles.checkboxSize,
-      height: sizeStyles.checkboxSize,
-      ...radiusStyles
+  return radiusStyles;
+}
+function useCheckmarkColors(themeColor, variant, isActive) {
+  const theme = useXUITheme();
+  const safeThemeColor = getSafeThemeColor(themeColor);
+  const colorScheme = theme.colors[safeThemeColor];
+  const checkmarkColors = useMemo(() => {
+    if (variant === "filled") {
+      return {
+        checked: colorScheme.foreground,
+        unchecked: void 0
+      };
+    }
+    if (isActive) {
+      return {
+        checked: colorScheme.main,
+        unchecked: void 0
+      };
+    }
+    if (themeColor !== "default") {
+      return {
+        checked: colorScheme.foreground,
+        unchecked: colorScheme.background
+      };
+    }
+    return {
+      checked: theme.colors.foreground,
+      unchecked: theme.colors.background
     };
+  }, [variant, colorScheme, isActive, themeColor, theme.colors]);
+  return checkmarkColors;
+}
+function useVariantStyles(themeColor, variant, isActive) {
+  const theme = useXUITheme();
+  const safeThemeColor = getSafeThemeColor(themeColor);
+  const colorScheme = theme.colors[safeThemeColor];
+  const variantStyles = useMemo(() => {
     if (variant === "filled") {
       return {
-        ...baseStyle,
         backgroundColor: "transparent",
         borderWidth: isActive ? 0 : theme.borderWidth.md,
         borderColor: isActive ? "transparent" : colorScheme.main
       };
     }
     return {
-      ...baseStyle,
       backgroundColor: "transparent",
       borderWidth: 0,
       borderColor: "transparent"
     };
-  }, [variant, isActive, colorScheme, sizeStyles, radiusStyles, theme]);
-  const checkmarkColor = useMemo(() => {
-    if (variant === "filled") {
-      return colorScheme.foreground;
-    }
-    if (isActive) {
-      return colorScheme.main;
-    }
-    if (themeColor !== "default") {
-      return colorScheme.background;
-    }
-    return theme.colors.foreground;
-  }, [variant, colorScheme, isActive, themeColor, theme.colors.foreground]);
+  }, [variant, isActive, colorScheme, theme]);
+  return variantStyles;
+}
+function useContainerStyles(labelAlignment) {
   const containerStyles = useMemo(() => {
     const isJustified = labelAlignment === "justify-left" || labelAlignment === "justify-right";
     return {
@@ -145,15 +253,8 @@ var useCheckboxStyles = (themeColor, variant, size, radius, labelAlignment, isAc
       justifyContent: isJustified ? "space-between" : "flex-start"
     };
   }, [labelAlignment]);
-  return {
-    colorScheme,
-    sizeStyles,
-    radiusStyles,
-    checkboxStyles,
-    checkmarkColor,
-    containerStyles
-  };
-};
+  return containerStyles;
+}
 
 // src/components/checkbox/checkbox.style.ts
 import { StyleSheet } from "react-native";
@@ -194,6 +295,7 @@ var styles = StyleSheet.create({
 });
 
 // src/components/checkbox/checkbox.tsx
+import { getSafeThemeColor as getSafeThemeColor2 } from "@xaui/core";
 var Checkbox = ({
   label,
   labelAlignment = "right",
@@ -210,56 +312,25 @@ var Checkbox = ({
   onValueChange
 }) => {
   const theme = useXUITheme();
+  const colorScheme = theme.colors[getSafeThemeColor2(themeColor)];
   const isControlled = typeof isCheckedProp === "boolean";
   const [internalChecked, setInternalChecked] = useState(isCheckedProp ?? false);
   const isChecked = isControlled ? isCheckedProp : internalChecked;
-  const scale = useRef2(new Animated2.Value(1)).current;
-  const backgroundScale = useRef2(new Animated2.Value(0.5)).current;
-  const backgroundOpacity = useRef2(new Animated2.Value(0)).current;
+  const scale = useRef2(new Animated3.Value(1)).current;
+  const backgroundScale = useRef2(new Animated3.Value(0.5)).current;
+  const backgroundOpacity = useRef2(new Animated3.Value(0)).current;
   const isActive = isChecked || isIndeterminate;
-  const {
-    colorScheme,
-    sizeStyles,
-    radiusStyles,
-    checkboxStyles,
-    checkmarkColor,
-    containerStyles
-  } = useCheckboxStyles(
-    themeColor,
-    variant,
-    size,
-    radius,
-    labelAlignment,
-    isActive
-  );
+  const sizeStyles = useSizeStyles(size, variant);
+  const radiusStyles = useRadiusStyles(radius);
+  const checkmarkColors = useCheckmarkColors(themeColor, variant, isActive);
+  const variantStyles = useVariantStyles(themeColor, variant, isActive);
+  const containerStyles = useContainerStyles(labelAlignment);
   useEffect2(() => {
     if (variant !== "filled") return;
     if (isActive) {
-      Animated2.parallel([
-        Animated2.timing(backgroundScale, {
-          toValue: 1,
-          duration: 200,
-          useNativeDriver: true
-        }),
-        Animated2.timing(backgroundOpacity, {
-          toValue: 1,
-          duration: 200,
-          useNativeDriver: true
-        })
-      ]).start();
+      runBackgroundInAnimation(backgroundScale, backgroundOpacity);
     } else {
-      Animated2.parallel([
-        Animated2.timing(backgroundScale, {
-          toValue: 0.5,
-          duration: 200,
-          useNativeDriver: true
-        }),
-        Animated2.timing(backgroundOpacity, {
-          toValue: 0,
-          duration: 200,
-          useNativeDriver: true
-        })
-      ]).start();
+      runBackgroundOutAnimation(backgroundScale, backgroundOpacity);
     }
   }, [isActive, variant, backgroundScale, backgroundOpacity]);
   const handlePress = () => {
@@ -273,18 +344,12 @@ var Checkbox = ({
   };
   const handlePressIn = () => {
     if (!isDisabled) {
-      Animated2.spring(scale, {
-        toValue: 0.95,
-        useNativeDriver: true
-      }).start();
+      runPressInAnimation(scale);
     }
   };
   const handlePressOut = () => {
     if (!isDisabled) {
-      Animated2.spring(scale, {
-        toValue: 1,
-        useNativeDriver: true
-      }).start();
+      runPressOutAnimation(scale);
     }
   };
   const accessibilityChecked = isIndeterminate ? "mixed" : isChecked;
@@ -311,18 +376,23 @@ var Checkbox = ({
       ]
     },
     /* @__PURE__ */ React2.createElement(
-      Animated2.View,
+      Animated3.View,
       {
         style: [
           styles.checkbox,
-          checkboxStyles,
+          {
+            width: sizeStyles.checkboxSize,
+            height: sizeStyles.checkboxSize,
+            ...radiusStyles,
+            ...variantStyles
+          },
           {
             transform: [{ scale }]
           }
         ]
       },
       variant === "filled" && /* @__PURE__ */ React2.createElement(
-        Animated2.View,
+        Animated3.View,
         {
           style: [
             styles.background,
@@ -340,8 +410,10 @@ var Checkbox = ({
         {
           isChecked: isActive,
           isIndeterminate,
-          color: checkmarkColor,
-          size: sizeStyles.iconSize
+          color: checkmarkColors.checked,
+          size: sizeStyles.iconSize,
+          placeholderColor: checkmarkColors.unchecked,
+          variant
         }
       ))
     ),

package/dist/{index-BDSvmsTU.d.cts → index-BOw6tbkc.d.cts}

@@ -1,4 +1,5 @@
 type ThemeColor = 'primary' | 'secondary' | 'tertiary' | 'danger' | 'warning' | 'success' | 'default';
 type Size = 'xs' | 'sm' | 'md' | 'lg';
+type Radius = 'none' | 'sm' | 'md' | 'lg' | 'full';
 
-export type { Size as S, ThemeColor as T };
+export type { Radius as R, Size as S, ThemeColor as T };

package/dist/{index-BDSvmsTU.d.ts → index-BOw6tbkc.d.ts}

@@ -1,4 +1,5 @@
 type ThemeColor = 'primary' | 'secondary' | 'tertiary' | 'danger' | 'warning' | 'success' | 'default';
 type Size = 'xs' | 'sm' | 'md' | 'lg';
+type Radius = 'none' | 'sm' | 'md' | 'lg' | 'full';
 
-export type { Size as S, ThemeColor as T };
+export type { Radius as R, Size as S, ThemeColor as T };

package/dist/index.d.cts

@@ -1,3 +1,3 @@
 export { ActivityIndicator } from './indicator/index.cjs';
 import 'react';
-import './index-BDSvmsTU.cjs';
+import './index-BOw6tbkc.cjs';

package/dist/index.d.ts

@@ -1,3 +1,3 @@
 export { ActivityIndicator } from './indicator/index.js';
 import 'react';
-import './index-BDSvmsTU.js';
+import './index-BOw6tbkc.js';

package/dist/indicator/index.d.cts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { T as ThemeColor } from '../index-BDSvmsTU.cjs';
+import { T as ThemeColor } from '../index-BOw6tbkc.cjs';
 
 type ActivityIndicatorVariant = 'linear' | 'circular';
 type ActivityIndicatorProps = {

package/dist/indicator/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { T as ThemeColor } from '../index-BDSvmsTU.js';
+import { T as ThemeColor } from '../index-BOw6tbkc.js';
 
 type ActivityIndicatorVariant = 'linear' | 'circular';
 type ActivityIndicatorProps = {

package/dist/progress/index.d.cts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { T as ThemeColor } from '../index-BDSvmsTU.cjs';
+import { T as ThemeColor } from '../index-BOw6tbkc.cjs';
 
 type ProgressVariant = 'linear' | 'circular';
 type ProgressIndicatorProps = {

package/dist/progress/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { T as ThemeColor } from '../index-BDSvmsTU.js';
+import { T as ThemeColor } from '../index-BOw6tbkc.js';
 
 type ProgressVariant = 'linear' | 'circular';
 type ProgressIndicatorProps = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xaui/native",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "Flutter-inspired React Native UI components with native animations powered by React Native Reanimated",
   "keywords": [
     "react-native",