@xaui/native 0.0.2 → 0.0.4

package/dist/checkbox/index.js

@@ -0,0 +1,436 @@
+import {
+  useXUITheme
+} from "../chunk-DNJWBME5.js";
+
+// src/components/checkbox/checkbox.tsx
+import React2, { useEffect as useEffect2, useRef as useRef2, useState } from "react";
+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";
+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) {
+      runCheckAnimation(opacity, strokeDashoffset);
+    } else {
+      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,
+      {
+        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",
+      fill: "none"
+    }
+  ));
+}
+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, 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";
+function useSizeStyles(size, variant) {
+  const theme = useXUITheme();
+  const sizeStyles = useMemo(() => {
+    const sizes = {
+      xs: {
+        checkboxSize: 14,
+        fontSize: theme.fontSizes.xs,
+        iconSize: variant === "light" ? 10 : 8
+      },
+      sm: {
+        checkboxSize: 18,
+        fontSize: theme.fontSizes.sm,
+        iconSize: variant === "light" ? 14 : 12
+      },
+      md: {
+        checkboxSize: 22,
+        fontSize: theme.fontSizes.md,
+        iconSize: variant === "light" ? 18 : 14
+      },
+      lg: {
+        checkboxSize: 26,
+        fontSize: theme.fontSizes.lg,
+        iconSize: variant === "light" ? 22 : 16
+      }
+    };
+    return sizes[size];
+  }, [size, variant, theme]);
+  return sizeStyles;
+}
+function useRadiusStyles(radius) {
+  const theme = useXUITheme();
+  const radiusStyles = 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]);
+  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 {
+        backgroundColor: "transparent",
+        borderWidth: isActive ? 0 : theme.borderWidth.md,
+        borderColor: isActive ? "transparent" : colorScheme.main
+      };
+    }
+    return {
+      backgroundColor: "transparent",
+      borderWidth: 0,
+      borderColor: "transparent"
+    };
+  }, [variant, isActive, colorScheme, theme]);
+  return variantStyles;
+}
+function useContainerStyles(labelAlignment) {
+  const containerStyles = 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/checkbox/checkbox.style.ts
+import { StyleSheet } from "react-native";
+var styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10
+  },
+  fullWidth: {
+    width: "100%"
+  },
+  checkbox: {
+    alignItems: "center",
+    justifyContent: "center",
+    overflow: "hidden",
+    position: "relative"
+  },
+  background: {
+    position: "absolute",
+    width: "100%",
+    height: "100%"
+  },
+  checkmarkContainer: {
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex: 10
+  },
+  label: {
+    fontWeight: "400"
+  },
+  disabled: {
+    opacity: 0.5
+  },
+  disabledText: {
+    opacity: 0.7
+  }
+});
+
+// src/components/checkbox/checkbox.tsx
+import { getSafeThemeColor as getSafeThemeColor2 } from "@xaui/core";
+var Checkbox = ({
+  label,
+  labelAlignment = "right",
+  themeColor = "default",
+  variant = "filled",
+  size = "md",
+  radius = "sm",
+  fullWidth = false,
+  isChecked: isCheckedProp,
+  isIndeterminate = false,
+  isDisabled = false,
+  labelStyle,
+  style,
+  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 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 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) {
+      runBackgroundInAnimation(backgroundScale, backgroundOpacity);
+    } else {
+      runBackgroundOutAnimation(backgroundScale, backgroundOpacity);
+    }
+  }, [isActive, variant, backgroundScale, backgroundOpacity]);
+  const handlePress = () => {
+    if (!isDisabled) {
+      const nextValue = isIndeterminate ? true : !isChecked;
+      onValueChange?.(nextValue);
+      if (!isControlled) {
+        setInternalChecked(nextValue);
+      }
+    }
+  };
+  const handlePressIn = () => {
+    if (!isDisabled) {
+      runPressInAnimation(scale);
+    }
+  };
+  const handlePressOut = () => {
+    if (!isDisabled) {
+      runPressOutAnimation(scale);
+    }
+  };
+  const accessibilityChecked = isIndeterminate ? "mixed" : isChecked;
+  return /* @__PURE__ */ React2.createElement(
+    Pressable,
+    {
+      onPress: handlePress,
+      onPressIn: handlePressIn,
+      onPressOut: handlePressOut,
+      disabled: isDisabled,
+      accessible: true,
+      accessibilityRole: "checkbox",
+      accessibilityLabel: label,
+      accessibilityState: {
+        disabled: isDisabled,
+        checked: accessibilityChecked
+      },
+      style: [
+        styles.container,
+        containerStyles,
+        fullWidth && styles.fullWidth,
+        isDisabled && styles.disabled,
+        style
+      ]
+    },
+    /* @__PURE__ */ React2.createElement(
+      Animated3.View,
+      {
+        style: [
+          styles.checkbox,
+          {
+            width: sizeStyles.checkboxSize,
+            height: sizeStyles.checkboxSize,
+            ...radiusStyles,
+            ...variantStyles
+          },
+          {
+            transform: [{ scale }]
+          }
+        ]
+      },
+      variant === "filled" && /* @__PURE__ */ React2.createElement(
+        Animated3.View,
+        {
+          style: [
+            styles.background,
+            radiusStyles,
+            {
+              backgroundColor: colorScheme.main,
+              transform: [{ scale: backgroundScale }],
+              opacity: backgroundOpacity
+            }
+          ]
+        }
+      ),
+      /* @__PURE__ */ React2.createElement(View, { style: styles.checkmarkContainer }, /* @__PURE__ */ React2.createElement(
+        CheckboxIcon,
+        {
+          isChecked: isActive,
+          isIndeterminate,
+          color: checkmarkColors.checked,
+          size: sizeStyles.iconSize,
+          placeholderColor: checkmarkColors.unchecked,
+          variant
+        }
+      ))
+    ),
+    label && /* @__PURE__ */ React2.createElement(
+      Text,
+      {
+        style: [
+          styles.label,
+          { fontSize: sizeStyles.fontSize, color: theme.colors.foreground },
+          isDisabled && styles.disabledText,
+          labelStyle
+        ]
+      },
+      label
+    )
+  );
+};
+export {
+  Checkbox
+};

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

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

package/dist/{chunk-SHT66VET.js → chunk-DNJWBME5.js}

@@ -34,7 +34,7 @@ function XUIProvider({
 }
 
 // src/core/theme-hooks.ts
-import { useContext } from "react";
+import { useContext, useMemo } from "react";
 import { useColorScheme as useColorScheme2 } from "react-native";
 function useColorMode() {
   const nativeScheme = useColorScheme2();
@@ -51,10 +51,25 @@ function useXUIColors() {
   const theme = useXUITheme();
   return theme.colors;
 }
+function useBorderRadiusStyles(radius) {
+  const theme = useXUITheme();
+  const borderRadius = useMemo(() => {
+    const radiusMap = {
+      none: theme.borderRadius.none,
+      sm: theme.borderRadius.sm,
+      md: theme.borderRadius.md,
+      lg: theme.borderRadius.lg,
+      full: theme.borderRadius.full
+    };
+    return { borderRadius: radiusMap[radius] };
+  }, [radius, theme]);
+  return borderRadius;
+}
 
 export {
   XUIProvider,
   useColorMode,
   useXUITheme,
-  useXUIColors
+  useXUIColors,
+  useBorderRadiusStyles
 };

package/dist/core/index.js

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

package/dist/index-BOw6tbkc.d.cts

@@ -0,0 +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 { Radius as R, Size as S, ThemeColor as T };

package/dist/index-BOw6tbkc.d.ts

@@ -0,0 +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 { 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 './theme-qvIXI4kF.cjs';
+import './index-BOw6tbkc.cjs';

package/dist/index.d.ts

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

package/dist/index.js

@@ -1,7 +1,7 @@
 import {
   ActivityIndicator
-} from "./chunk-6ITFLLAM.js";
-import "./chunk-SHT66VET.js";
+} from "./chunk-52PIZF2Z.js";
+import "./chunk-DNJWBME5.js";
 export {
   ActivityIndicator
 };

package/dist/indicator/index.d.cts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { T as ThemeColor } from '../theme-qvIXI4kF.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 '../theme-qvIXI4kF.js';
+import { T as ThemeColor } from '../index-BOw6tbkc.js';
 
 type ActivityIndicatorVariant = 'linear' | 'circular';
 type ActivityIndicatorProps = {

package/dist/indicator/index.js

@@ -1,7 +1,7 @@
 import {
   ActivityIndicator
-} from "../chunk-6ITFLLAM.js";
-import "../chunk-SHT66VET.js";
+} from "../chunk-52PIZF2Z.js";
+import "../chunk-DNJWBME5.js";
 export {
   ActivityIndicator
 };

package/dist/progress/index.d.cts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { T as ThemeColor } from '../theme-qvIXI4kF.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 '../theme-qvIXI4kF.js';
+import { T as ThemeColor } from '../index-BOw6tbkc.js';
 
 type ProgressVariant = 'linear' | 'circular';
 type ProgressIndicatorProps = {

package/dist/progress/index.js

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

package/package.json

@@ -1,12 +1,16 @@
 {
   "name": "@xaui/native",
-  "version": "0.0.2",
-  "description": "Mobile UI components for XUI",
+  "version": "0.0.4",
+  "description": "Flutter-inspired React Native UI components with native animations powered by React Native Reanimated",
   "keywords": [
     "react-native",
     "mobile",
+    "native",
     "ui",
     "components",
+    "flutter",
+    "reanimated",
+    "animations",
     "xaui"
   ],
   "type": "module",
@@ -28,6 +32,11 @@
       "import": "./dist/button/index.js",
       "require": "./dist/button/index.js"
     },
+    "./checkbox": {
+      "types": "./dist/checkbox/index.d.ts",
+      "import": "./dist/checkbox/index.js",
+      "require": "./dist/checkbox/index.js"
+    },
     "./progress": {
       "types": "./dist/progress/index.d.ts",
       "import": "./dist/progress/index.js",
@@ -46,17 +55,10 @@
   "repository": {
     "type": "git",
     "url": "git+https://github.com/rygrams/xaui.git",
-    "directory": "packages/mobile"
-  },
-  "scripts": {
-    "build": "tsup --config tsup.config.ts",
-    "dev": "tsup --config tsup.config.ts --watch",
-    "test": "vitest",
-    "lint": "eslint src/",
-    "type-check": "tsc --noEmit"
+    "directory": "packages/native"
   },
   "dependencies": {
-    "@xaui/core": "workspace:*"
+    "@xaui/core": "0.1.6"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
@@ -76,5 +78,12 @@
   },
   "publishConfig": {
     "access": "public"
+  },
+  "scripts": {
+    "build": "tsup --config tsup.config.ts",
+    "dev": "tsup --config tsup.config.ts --watch",
+    "test": "vitest",
+    "lint": "eslint src/",
+    "type-check": "tsc --noEmit"
   }
-}
+}

package/dist/theme-qvIXI4kF.d.cts

@@ -1,3 +0,0 @@
-type ThemeColor = 'primary' | 'secondary' | 'tertiary' | 'danger' | 'warning' | 'success' | 'default';
-
-export type { ThemeColor as T };

package/dist/theme-qvIXI4kF.d.ts

@@ -1,3 +0,0 @@
-type ThemeColor = 'primary' | 'secondary' | 'tertiary' | 'danger' | 'warning' | 'success' | 'default';
-
-export type { ThemeColor as T };