@xaui/native 0.2.8 → 0.9.1-alpha.0

package/dist/checkbox/index.cjs

@@ -1,443 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }require('../chunk-56RPWZD2.cjs');
-
-
-var _chunk7UFBLUMVcjs = require('../chunk-7UFBLUMV.cjs');
-
-// src/components/checkbox/checkbox.tsx
-var _react = require('react'); var _react2 = _interopRequireDefault(_react);
-var _reactnative = require('react-native');
-
-// src/components/checkbox/checkbox-icon.tsx
-
-
-var _reactnativesvg = require('react-native-svg'); var _reactnativesvg2 = _interopRequireDefault(_reactnativesvg);
-
-// src/components/checkbox/checkbox.animation.ts
-
-var runCheckAnimation = (opacity, strokeDashoffset) => {
-  _reactnative.Animated.parallel([
-    _reactnative.Animated.timing(opacity, {
-      toValue: 1,
-      duration: 200,
-      useNativeDriver: false
-    }),
-    _reactnative.Animated.timing(strokeDashoffset, {
-      toValue: 44,
-      duration: 250,
-      useNativeDriver: false
-    })
-  ]).start();
-};
-var runUncheckAnimation = (opacity, strokeDashoffset) => {
-  _reactnative.Animated.parallel([
-    _reactnative.Animated.timing(opacity, {
-      toValue: 0,
-      duration: 200,
-      useNativeDriver: false
-    }),
-    _reactnative.Animated.timing(strokeDashoffset, {
-      toValue: 66,
-      duration: 250,
-      useNativeDriver: false
-    })
-  ]).start();
-};
-var runBackgroundInAnimation = (backgroundScale, backgroundOpacity) => {
-  _reactnative.Animated.parallel([
-    _reactnative.Animated.timing(backgroundScale, {
-      toValue: 1,
-      duration: 200,
-      useNativeDriver: true
-    }),
-    _reactnative.Animated.timing(backgroundOpacity, {
-      toValue: 1,
-      duration: 200,
-      useNativeDriver: true
-    })
-  ]).start();
-};
-var runBackgroundOutAnimation = (backgroundScale, backgroundOpacity) => {
-  _reactnative.Animated.parallel([
-    _reactnative.Animated.timing(backgroundScale, {
-      toValue: 0.5,
-      duration: 200,
-      useNativeDriver: true
-    }),
-    _reactnative.Animated.timing(backgroundOpacity, {
-      toValue: 0,
-      duration: 200,
-      useNativeDriver: true
-    })
-  ]).start();
-};
-var runPressInAnimation = (scale) => {
-  _reactnative.Animated.spring(scale, {
-    toValue: 0.95,
-    useNativeDriver: true
-  }).start();
-};
-var runPressOutAnimation = (scale) => {
-  _reactnative.Animated.spring(scale, {
-    toValue: 1,
-    useNativeDriver: true
-  }).start();
-};
-
-// src/components/checkbox/checkbox-icon.tsx
-var AnimatedSvg = _reactnative.Animated.createAnimatedComponent(_reactnativesvg2.default);
-var AnimatedPolyline = _reactnative.Animated.createAnimatedComponent(_reactnativesvg.Polyline);
-function CheckIcon({
-  isChecked,
-  color,
-  size
-}) {
-  const opacity = _react.useRef.call(void 0, new _reactnative.Animated.Value(0)).current;
-  const strokeDashoffset = _react.useRef.call(void 0, new _reactnative.Animated.Value(66)).current;
-  _react.useEffect.call(void 0, () => {
-    if (isChecked) {
-      runCheckAnimation(opacity, strokeDashoffset);
-    } else {
-      runUncheckAnimation(opacity, strokeDashoffset);
-    }
-  }, [isChecked, opacity, strokeDashoffset]);
-  return /* @__PURE__ */ _react2.default.createElement(
-    AnimatedSvg,
-    {
-      width: size,
-      height: size,
-      viewBox: "0 0 17 18",
-      fill: "none",
-      opacity
-    },
-    /* @__PURE__ */ _react2.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__ */ _react2.default.createElement(_reactnativesvg2.default, { width: size, height: size, viewBox: "0 0 17 18" }, /* @__PURE__ */ _react2.default.createElement(
-    _reactnativesvg.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__ */ _react2.default.createElement(_reactnativesvg2.default, { width: size, height: size, viewBox: "0 0 24 24" }, /* @__PURE__ */ _react2.default.createElement(_reactnativesvg.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__ */ _react2.default.createElement(PlaceholderCheckIcon, { size: props.size, color: _nullishCoalesce(props.placeholderColor, () => ( "")) });
-  }
-  return /* @__PURE__ */ _react2.default.createElement(BaseIcon, { ...props });
-}
-
-// src/components/checkbox/checkbox.hook.ts
-
-var _core = require('@xaui/core');
-function useSizeStyles(size, variant) {
-  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
-  const sizeStyles = _react.useMemo.call(void 0, () => {
-    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 = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
-  const radiusStyles = _react.useMemo.call(void 0, () => {
-    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 = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
-  const safeThemeColor = _core.getSafeThemeColor.call(void 0, themeColor);
-  const colorScheme = theme.colors[safeThemeColor];
-  const checkmarkColors = _react.useMemo.call(void 0, () => {
-    if (variant === "filled") {
-      return {
-        checked: colorScheme.onMain,
-        unchecked: void 0
-      };
-    }
-    if (isActive) {
-      return {
-        checked: colorScheme.main,
-        unchecked: void 0
-      };
-    }
-    if (themeColor !== "default") {
-      return {
-        checked: colorScheme.onMain,
-        unchecked: colorScheme.container
-      };
-    }
-    return {
-      checked: theme.colors.foreground,
-      unchecked: colorScheme.container
-    };
-  }, [variant, colorScheme, isActive, themeColor, theme.colors]);
-  return checkmarkColors;
-}
-function useVariantStyles(themeColor, variant, isActive) {
-  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
-  const safeThemeColor = _core.getSafeThemeColor.call(void 0, themeColor);
-  const colorScheme = theme.colors[safeThemeColor];
-  const variantStyles = _react.useMemo.call(void 0, () => {
-    if (variant === "filled") {
-      return {
-        backgroundColor: isActive ? colorScheme.main : "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 = _react.useMemo.call(void 0, () => {
-    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
-
-var styles = _reactnative.StyleSheet.create({
-  container: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 10
-  },
-  fullWidth: {
-    flexShrink: 1,
-    flexBasis: "auto",
-    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 = "primary",
-  variant = "filled",
-  size = "md",
-  radius = "sm",
-  fullWidth = false,
-  isChecked: isCheckedProp,
-  isIndeterminate = false,
-  isDisabled = false,
-  labelStyle,
-  style,
-  onValueChange
-}) => {
-  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
-  const colorScheme = theme.colors[_core.getSafeThemeColor.call(void 0, themeColor)];
-  const isControlled = typeof isCheckedProp === "boolean";
-  const [internalChecked, setInternalChecked] = _react.useState.call(void 0, _nullishCoalesce(isCheckedProp, () => ( false)));
-  const isChecked = isControlled ? isCheckedProp : internalChecked;
-  const scale = _react.useRef.call(void 0, new _reactnative.Animated.Value(1)).current;
-  const backgroundScale = _react.useRef.call(void 0, new _reactnative.Animated.Value(0.5)).current;
-  const backgroundOpacity = _react.useRef.call(void 0, new _reactnative.Animated.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);
-  _react.useEffect.call(void 0, () => {
-    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;
-      _optionalChain([onValueChange, 'optionalCall', _ => _(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.default.createElement(
-    _reactnative.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.default.createElement(
-      _reactnative.Animated.View,
-      {
-        style: [
-          styles.checkbox,
-          {
-            width: sizeStyles.checkboxSize,
-            height: sizeStyles.checkboxSize,
-            ...radiusStyles,
-            ...variantStyles
-          },
-          {
-            transform: [{ scale }]
-          }
-        ]
-      },
-      variant === "filled" && /* @__PURE__ */ _react2.default.createElement(
-        _reactnative.Animated.View,
-        {
-          style: [
-            styles.background,
-            radiusStyles,
-            {
-              backgroundColor: colorScheme.main,
-              transform: [{ scale: backgroundScale }],
-              opacity: backgroundOpacity
-            }
-          ]
-        }
-      ),
-      /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: styles.checkmarkContainer }, /* @__PURE__ */ _react2.default.createElement(
-        CheckboxIcon,
-        {
-          isChecked: isActive,
-          isIndeterminate,
-          color: checkmarkColors.checked,
-          size: sizeStyles.iconSize,
-          placeholderColor: checkmarkColors.unchecked,
-          variant
-        }
-      ))
-    ),
-    label && /* @__PURE__ */ _react2.default.createElement(
-      _reactnative.Text,
-      {
-        style: [
-          styles.label,
-          { fontSize: sizeStyles.fontSize, color: theme.colors.foreground },
-          isDisabled && styles.disabledText,
-          labelStyle
-        ]
-      },
-      label
-    )
-  );
-};
-
-
-exports.Checkbox = Checkbox;

package/dist/checkbox/index.d.cts

@@ -1,73 +0,0 @@
-import React from 'react';
-import { TextStyle, ViewStyle } from 'react-native';
-import { ThemeColor, Size, Radius } from '@xaui/core/types';
-
-type CheckboxVariant = 'filled' | 'light';
-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?: Size;
-    /**
-     * The border radius of the checkbox.
-     * @default 'sm'
-     */
-    radius?: Radius;
-    /**
-     * 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 CheckboxVariant };

package/dist/checkbox/index.d.ts

@@ -1,73 +0,0 @@
-import React from 'react';
-import { TextStyle, ViewStyle } from 'react-native';
-import { ThemeColor, Size, Radius } from '@xaui/core/types';
-
-type CheckboxVariant = 'filled' | 'light';
-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?: Size;
-    /**
-     * The border radius of the checkbox.
-     * @default 'sm'
-     */
-    radius?: Radius;
-    /**
-     * 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 CheckboxVariant };