@xaui/native 0.0.3 → 0.0.5

package/dist/checkbox/index.js

@@ -1,82 +1,166 @@
 import {
   useXUITheme
-} from "../chunk-DNJWBME5.js";
+} from "../chunk-3ECCBLTG.js";
 
 // 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: colorScheme.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/{chunk-DNJWBME5.js → chunk-3ECCBLTG.js}

@@ -2,6 +2,7 @@
 import React, { createContext } from "react";
 import { useColorScheme } from "react-native";
 import { defaultTheme } from "@xaui/core/theme";
+import { colors } from "@xaui/core/palette";
 var XUIThemeContext = createContext(null);
 function XUIProvider({
   children,
@@ -12,10 +13,12 @@ function XUIProvider({
   const theme = React.useMemo(() => {
     if (!darkTheme && !lightTheme) return defaultTheme;
     const activeTheme = colorScheme === "dark" && darkTheme ? darkTheme : lightTheme;
+    const mode = colorScheme === "dark" ? "dark" : "light";
     if (!activeTheme) return defaultTheme;
     return {
       ...defaultTheme,
       ...activeTheme,
+      mode,
       colors: {
         ...defaultTheme.colors,
         ...activeTheme.colors
@@ -27,7 +30,8 @@ function XUIProvider({
       fontSizes: {
         ...defaultTheme.fontSizes,
         ...activeTheme.fontSizes
-      }
+      },
+      palette: colors
     };
   }, [lightTheme, darkTheme, colorScheme]);
   return /* @__PURE__ */ React.createElement(XUIThemeContext.Provider, { value: theme }, children);
@@ -51,6 +55,10 @@ function useXUIColors() {
   const theme = useXUITheme();
   return theme.colors;
 }
+function useXUIPalette() {
+  const theme = useXUITheme();
+  return useMemo(() => theme.palette, [theme]);
+}
 function useBorderRadiusStyles(radius) {
   const theme = useXUITheme();
   const borderRadius = useMemo(() => {
@@ -71,5 +79,6 @@ export {
   useColorMode,
   useXUITheme,
   useXUIColors,
+  useXUIPalette,
   useBorderRadiusStyles
 };

package/dist/chunk-AX7QS5WJ.js

@@ -0,0 +1,73 @@
+import {
+  useXUITheme
+} from "./chunk-3ECCBLTG.js";
+
+// src/components/divider/divider.tsx
+import React from "react";
+import { View } from "react-native";
+
+// src/components/divider/divider.style.ts
+import { StyleSheet } from "react-native";
+var styles = StyleSheet.create({
+  horizontal: {
+    height: 1,
+    width: "100%"
+  },
+  vertical: {
+    width: 1,
+    alignSelf: "stretch"
+  }
+});
+
+// src/components/divider/divider.hook.ts
+import { useMemo } from "react";
+import { getSafeThemeColor } from "@xaui/core";
+var useDividerColor = (themeColor, customColor) => {
+  const theme = useXUITheme();
+  const dividerColor = useMemo(() => {
+    if (customColor) {
+      return customColor;
+    }
+    const safeThemeColor = getSafeThemeColor(themeColor);
+    return theme.colors[safeThemeColor].main;
+  }, [customColor, themeColor, theme]);
+  return dividerColor;
+};
+var useDividerSize = (size, orientation) => {
+  const sizeStyles = useMemo(() => {
+    if (orientation === "horizontal") {
+      return {
+        height: size
+      };
+    }
+    return {
+      width: size
+    };
+  }, [size, orientation]);
+  return sizeStyles;
+};
+
+// src/components/divider/divider.tsx
+var Divider = ({
+  size = 1,
+  themeColor = "default",
+  color,
+  orientation = "horizontal"
+}) => {
+  const dividerColor = useDividerColor(themeColor, color);
+  const sizeStyles = useDividerSize(size, orientation);
+  return /* @__PURE__ */ React.createElement(
+    View,
+    {
+      style: [
+        orientation === "horizontal" ? styles.horizontal : styles.vertical,
+        sizeStyles,
+        { backgroundColor: dividerColor }
+      ]
+    }
+  );
+};
+
+export {
+  Divider
+};

package/dist/{chunk-52PIZF2Z.js → chunk-KI7CPXTP.js}

@@ -1,6 +1,6 @@
 import {
   useXUITheme
-} from "./chunk-DNJWBME5.js";
+} from "./chunk-3ECCBLTG.js";
 
 // src/components/indicator/indicator.tsx
 import React3 from "react";

package/dist/core/index.cjs

@@ -41,6 +41,7 @@ module.exports = __toCommonJS(core_exports);
 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);
 function XUIProvider({
   children,
@@ -51,10 +52,12 @@ function XUIProvider({
   const theme = import_react.default.useMemo(() => {
     if (!darkTheme && !lightTheme) return import_theme.defaultTheme;
     const activeTheme = colorScheme === "dark" && darkTheme ? darkTheme : lightTheme;
+    const mode = colorScheme === "dark" ? "dark" : "light";
     if (!activeTheme) return import_theme.defaultTheme;
     return {
       ...import_theme.defaultTheme,
       ...activeTheme,
+      mode,
       colors: {
         ...import_theme.defaultTheme.colors,
         ...activeTheme.colors
@@ -66,7 +69,8 @@ function XUIProvider({
       fontSizes: {
         ...import_theme.defaultTheme.fontSizes,
         ...activeTheme.fontSizes
-      }
+      },
+      palette: import_palette.colors
     };
   }, [lightTheme, darkTheme, colorScheme]);
   return /* @__PURE__ */ import_react.default.createElement(XUIThemeContext.Provider, { value: theme }, children);

package/dist/core/index.js

@@ -3,7 +3,7 @@ import {
   useColorMode,
   useXUIColors,
   useXUITheme
-} from "../chunk-DNJWBME5.js";
+} from "../chunk-3ECCBLTG.js";
 export {
   XUIProvider,
   useColorMode,