@xaui/native 0.0.2 → 0.0.3

package/dist/checkbox/index.cjs

@@ -0,0 +1,416 @@
+"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/checkbox/index.ts
+var checkbox_exports = {};
+__export(checkbox_exports, {
+  Checkbox: () => Checkbox
+});
+module.exports = __toCommonJS(checkbox_exports);
+
+// src/components/checkbox/checkbox.tsx
+var import_react5 = __toESM(require("react"), 1);
+var import_react_native5 = 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_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;
+  (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();
+    } 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();
+    }
+  }, [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,
+    {
+      points: "1 9 7 14 15 4",
+      stroke: color,
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeDasharray: "22",
+      strokeDashoffset
+    }
+  ));
+}
+function IndeterminateIcon({
+  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;
+  return /* @__PURE__ */ import_react.default.createElement(BaseIcon, { ...props });
+}
+
+// src/components/checkbox/checkbox.hook.ts
+var import_react4 = require("react");
+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_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");
+function useXUITheme() {
+  const theme = (0, import_react3.useContext)(XUIThemeContext);
+  if (!theme) {
+    throw new Error("useXUITheme must be used within XUIProvider");
+  }
+  return theme;
+}
+
+// src/components/checkbox/checkbox.hook.ts
+var useCheckboxStyles = (themeColor, variant, size, radius, labelAlignment, isActive) => {
+  const theme = useXUITheme();
+  const safeThemeColor = (0, import_core.getSafeThemeColor)(themeColor);
+  const colorScheme = theme.colors[safeThemeColor];
+  const sizeStyles = (0, import_react4.useMemo)(() => {
+    const sizes = {
+      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, theme, variant]);
+  const radiusStyles = (0, import_react4.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 checkboxStyles = (0, import_react4.useMemo)(() => {
+    const baseStyle = {
+      width: sizeStyles.checkboxSize,
+      height: sizeStyles.checkboxSize,
+      ...radiusStyles
+    };
+    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]);
+  const containerStyles = (0, import_react4.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 {
+    colorScheme,
+    sizeStyles,
+    radiusStyles,
+    checkboxStyles,
+    checkmarkColor,
+    containerStyles
+  };
+};
+
+// src/components/checkbox/checkbox.style.ts
+var import_react_native4 = require("react-native");
+var styles = import_react_native4.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
+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 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 isActive = isChecked || isIndeterminate;
+  const {
+    colorScheme,
+    sizeStyles,
+    radiusStyles,
+    checkboxStyles,
+    checkmarkColor,
+    containerStyles
+  } = useCheckboxStyles(
+    themeColor,
+    variant,
+    size,
+    radius,
+    labelAlignment,
+    isActive
+  );
+  (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();
+    } 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();
+    }
+  }, [isActive, variant, backgroundScale, backgroundOpacity]);
+  const handlePress = () => {
+    if (!isDisabled) {
+      const nextValue = isIndeterminate ? true : !isChecked;
+      onValueChange?.(nextValue);
+      if (!isControlled) {
+        setInternalChecked(nextValue);
+      }
+    }
+  };
+  const handlePressIn = () => {
+    if (!isDisabled) {
+      import_react_native5.Animated.spring(scale, {
+        toValue: 0.95,
+        useNativeDriver: true
+      }).start();
+    }
+  };
+  const handlePressOut = () => {
+    if (!isDisabled) {
+      import_react_native5.Animated.spring(scale, {
+        toValue: 1,
+        useNativeDriver: true
+      }).start();
+    }
+  };
+  const accessibilityChecked = isIndeterminate ? "mixed" : isChecked;
+  return /* @__PURE__ */ import_react5.default.createElement(
+    import_react_native5.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__ */ import_react5.default.createElement(
+      import_react_native5.Animated.View,
+      {
+        style: [
+          styles.checkbox,
+          checkboxStyles,
+          {
+            transform: [{ scale }]
+          }
+        ]
+      },
+      variant === "filled" && /* @__PURE__ */ import_react5.default.createElement(
+        import_react_native5.Animated.View,
+        {
+          style: [
+            styles.background,
+            radiusStyles,
+            {
+              backgroundColor: colorScheme.main,
+              transform: [{ scale: backgroundScale }],
+              opacity: backgroundOpacity
+            }
+          ]
+        }
+      ),
+      /* @__PURE__ */ import_react5.default.createElement(import_react_native5.View, { style: styles.checkmarkContainer }, /* @__PURE__ */ import_react5.default.createElement(
+        CheckboxIcon,
+        {
+          isChecked: isActive,
+          isIndeterminate,
+          color: checkmarkColor,
+          size: sizeStyles.iconSize
+        }
+      ))
+    ),
+    label && /* @__PURE__ */ import_react5.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 = {
+  Checkbox
+});

package/dist/checkbox/index.d.cts

@@ -0,0 +1,75 @@
+import React from 'react';
+import { TextStyle, ViewStyle } from 'react-native';
+import { T as ThemeColor } from '../index-BDSvmsTU.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 = {
+    /**
+     * The label to display alongside the checkbox.
+     */
+    label?: string;
+    /**
+     * Alignment of the label relative to the checkbox.
+     * @default 'right'
+     */
+    labelAlignment?: CheckboxLabelAlignment;
+    /**
+     * The theme color of the checkbox.
+     * @default 'default'
+     */
+    themeColor?: ThemeColor;
+    /**
+     * The variant of the checkbox.
+     * @default 'filled'
+     */
+    variant?: CheckboxVariant;
+    /**
+     * The size of the checkbox.
+     * @default 'md'
+     */
+    size?: CheckboxSize;
+    /**
+     * The border radius of the checkbox.
+     * @default 'sm'
+     */
+    radius?: CheckboxRadius;
+    /**
+     * Whether the checkbox should take the full width of its container.
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Whether the checkbox is checked.
+     * @default false
+     */
+    isChecked?: boolean;
+    /**
+     * Whether the checkbox is in an indeterminate state.
+     * @default false
+     */
+    isIndeterminate?: boolean;
+    /**
+     * Whether the checkbox is disabled.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Custom style for the label text.
+     */
+    labelStyle?: TextStyle;
+    /**
+     * Custom style for the checkbox container.
+     */
+    style?: ViewStyle;
+    /**
+     * Callback fired when the checkbox value changes.
+     */
+    onValueChange?: (isChecked: boolean) => void;
+};
+
+declare const Checkbox: React.FC<CheckboxProps>;
+
+export { Checkbox, type CheckboxLabelAlignment, type CheckboxProps, type CheckboxRadius, type CheckboxSize, type CheckboxVariant };

package/dist/checkbox/index.d.ts

@@ -0,0 +1,75 @@
+import React from 'react';
+import { TextStyle, ViewStyle } from 'react-native';
+import { T as ThemeColor } from '../index-BDSvmsTU.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 = {
+    /**
+     * The label to display alongside the checkbox.
+     */
+    label?: string;
+    /**
+     * Alignment of the label relative to the checkbox.
+     * @default 'right'
+     */
+    labelAlignment?: CheckboxLabelAlignment;
+    /**
+     * The theme color of the checkbox.
+     * @default 'default'
+     */
+    themeColor?: ThemeColor;
+    /**
+     * The variant of the checkbox.
+     * @default 'filled'
+     */
+    variant?: CheckboxVariant;
+    /**
+     * The size of the checkbox.
+     * @default 'md'
+     */
+    size?: CheckboxSize;
+    /**
+     * The border radius of the checkbox.
+     * @default 'sm'
+     */
+    radius?: CheckboxRadius;
+    /**
+     * Whether the checkbox should take the full width of its container.
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Whether the checkbox is checked.
+     * @default false
+     */
+    isChecked?: boolean;
+    /**
+     * Whether the checkbox is in an indeterminate state.
+     * @default false
+     */
+    isIndeterminate?: boolean;
+    /**
+     * Whether the checkbox is disabled.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Custom style for the label text.
+     */
+    labelStyle?: TextStyle;
+    /**
+     * Custom style for the checkbox container.
+     */
+    style?: ViewStyle;
+    /**
+     * Callback fired when the checkbox value changes.
+     */
+    onValueChange?: (isChecked: boolean) => void;
+};
+
+declare const Checkbox: React.FC<CheckboxProps>;
+
+export { Checkbox, type CheckboxLabelAlignment, type CheckboxProps, type CheckboxRadius, type CheckboxSize, type CheckboxVariant };