@xaui/native 0.2.8 → 0.9.1-alpha.1

package/dist/button/index.cjs

@@ -1,392 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 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; }
-
-var _chunkYIEUN3G5cjs = require('../chunk-YIEUN3G5.cjs');
-require('../chunk-56RPWZD2.cjs');
-
-
-
-var _chunk7UFBLUMVcjs = require('../chunk-7UFBLUMV.cjs');
-
-// src/components/button/button.tsx
-var _react = require('react'); var _react2 = _interopRequireDefault(_react);
-var _reactnative = require('react-native');
-
-// src/components/button/button.style.ts
-
-var styles = _reactnative.StyleSheet.create({
-  button: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-    overflow: "hidden"
-  },
-  contentContainer: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-    gap: 8
-  },
-  text: {
-    fontWeight: "500",
-    textAlign: "center"
-  },
-  startContent: {
-    marginRight: 4
-  },
-  endContent: {
-    marginLeft: 4
-  },
-  spinner: {
-    marginHorizontal: 4
-  },
-  fullWidth: {
-    flexShrink: 1,
-    flexBasis: "auto",
-    width: "100%"
-  },
-  disabled: {
-    opacity: 0.5
-  },
-  disabledText: {
-    opacity: 0.7
-  }
-});
-
-// src/components/button/button.hook.ts
-
-var _core = require('@xaui/core');
-var useTextStyles = (themeColor, variant) => {
-  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
-  const safeThemeColor = _core.getSafeThemeColor.call(void 0, themeColor);
-  const colorScheme = theme.colors[safeThemeColor];
-  const textColor = _react.useMemo.call(void 0, () => {
-    if (variant === "solid") return colorScheme.onMain;
-    if (variant === "flat" || variant === "faded") return colorScheme.onContainer;
-    return colorScheme.main;
-  }, [variant, colorScheme]);
-  return {
-    textColor
-  };
-};
-function useSizesStyles(size) {
-  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
-  const sizeStyles = _react.useMemo.call(void 0, () => {
-    const sizes = {
-      xs: {
-        paddingHorizontal: theme.spacing.sm,
-        paddingVertical: theme.spacing.xs,
-        minHeight: theme.componentSizes.xs,
-        fontSize: theme.fontSizes.xs
-      },
-      sm: {
-        paddingHorizontal: theme.spacing.md,
-        paddingVertical: theme.spacing.xs,
-        minHeight: theme.componentSizes.sm,
-        fontSize: theme.fontSizes.sm
-      },
-      md: {
-        paddingHorizontal: theme.spacing.md,
-        paddingVertical: theme.spacing.sm,
-        minHeight: theme.componentSizes.md,
-        fontSize: theme.fontSizes.md
-      },
-      lg: {
-        paddingHorizontal: theme.spacing.lg,
-        paddingVertical: theme.spacing.md,
-        minHeight: theme.componentSizes.lg,
-        fontSize: theme.fontSizes.lg
-      }
-    };
-    return sizes[size];
-  }, [size, theme]);
-  const spinnerSize = _react.useMemo.call(void 0, () => {
-    const sizes = {
-      xs: 14,
-      sm: 16,
-      md: 18,
-      lg: 20
-    };
-    return sizes[size];
-  }, [size]);
-  return { sizeStyles, spinnerSize };
-}
-function useVariantSizesStyles(themeColor, variant, elevation = 0) {
-  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, () => {
-    const styles2 = {
-      solid: {
-        backgroundColor: colorScheme.main,
-        borderWidth: 0
-      },
-      bordered: {
-        backgroundColor: "transparent",
-        borderWidth: theme.borderWidth.md,
-        borderColor: colorScheme.main
-      },
-      flat: {
-        backgroundColor: colorScheme.container,
-        borderWidth: 0
-      },
-      light: {
-        backgroundColor: "transparent",
-        borderWidth: 0
-      },
-      faded: {
-        backgroundColor: colorScheme.container,
-        borderWidth: theme.borderWidth.md,
-        borderColor: colorScheme.main
-      }
-    };
-    const baseStyle = styles2[variant];
-    const shouldApplyElevation = variant !== "bordered" && variant !== "light";
-    const shadowStyles = elevation === 0 ? {} : elevation === 1 ? theme.shadows.sm : elevation === 2 ? theme.shadows.md : elevation === 3 ? theme.shadows.lg : theme.shadows.xl;
-    return {
-      ...baseStyle,
-      ...shouldApplyElevation ? shadowStyles : {},
-      ...shouldApplyElevation && elevation > 0 ? { elevation } : {}
-    };
-  }, [variant, colorScheme, theme, elevation]);
-  return variantStyles;
-}
-
-// src/components/button/button.animation.ts
-
-var runPressInAnimation = (animatedScale, animatedOpacity) => {
-  _reactnative.Animated.parallel([
-    _reactnative.Animated.spring(animatedScale, {
-      toValue: 0.975,
-      useNativeDriver: true,
-      speed: 50,
-      bounciness: 0
-    }),
-    _reactnative.Animated.timing(animatedOpacity, {
-      toValue: 0.9,
-      duration: 100,
-      useNativeDriver: true
-    })
-  ]).start();
-};
-var runPressOutAnimation = (animatedScale, animatedOpacity) => {
-  _reactnative.Animated.parallel([
-    _reactnative.Animated.spring(animatedScale, {
-      toValue: 1,
-      useNativeDriver: true,
-      speed: 50,
-      bounciness: 0
-    }),
-    _reactnative.Animated.timing(animatedOpacity, {
-      toValue: 1,
-      duration: 100,
-      useNativeDriver: true
-    })
-  ]).start();
-};
-
-// src/components/button/button.tsx
-var Button = ({
-  children,
-  themeColor = "primary",
-  variant = "solid",
-  size = "md",
-  radius = "md",
-  startContent,
-  endContent,
-  spinnerPlacement = "start",
-  fullWidth = false,
-  isDisabled = false,
-  isLoading = false,
-  elevation = 0,
-  customAppearance,
-  onPress,
-  onLongPress,
-  onPressIn,
-  onPressOut
-}) => {
-  const animatedScale = _react2.default.useRef(new _reactnative.Animated.Value(1)).current;
-  const animatedOpacity = _react2.default.useRef(new _reactnative.Animated.Value(1)).current;
-  const { sizeStyles, spinnerSize } = useSizesStyles(size);
-  const radiusStyles = _chunk7UFBLUMVcjs.useBorderRadiusStyles.call(void 0, radius);
-  const variantStyles = useVariantSizesStyles(themeColor, variant, elevation);
-  const { textColor } = useTextStyles(themeColor, variant);
-  const handlePressIn = (event) => {
-    if (!isDisabled && !isLoading) {
-      runPressInAnimation(animatedScale, animatedOpacity);
-    }
-    _optionalChain([onPressIn, 'optionalCall', _ => _(event)]);
-  };
-  const handlePressOut = (event) => {
-    if (!isDisabled && !isLoading) {
-      runPressOutAnimation(animatedScale, animatedOpacity);
-    }
-    _optionalChain([onPressOut, 'optionalCall', _2 => _2(event)]);
-  };
-  const spinner = /* @__PURE__ */ _react2.default.createElement(
-    _chunkYIEUN3G5cjs.ActivityIndicator,
-    {
-      variant: "circular",
-      themeColor: variant === "solid" ? void 0 : themeColor,
-      color: variant === "solid" ? textColor : void 0,
-      size: spinnerSize
-    }
-  );
-  return /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: [fullWidth && styles.fullWidth, _optionalChain([customAppearance, 'optionalAccess', _3 => _3.container])] }, /* @__PURE__ */ _react2.default.createElement(
-    _reactnative.Pressable,
-    {
-      onPress: isDisabled || isLoading ? void 0 : onPress,
-      onLongPress: isDisabled || isLoading ? void 0 : onLongPress,
-      onPressIn: handlePressIn,
-      onPressOut: handlePressOut,
-      disabled: isDisabled || isLoading
-    },
-    /* @__PURE__ */ _react2.default.createElement(
-      _reactnative.Animated.View,
-      {
-        style: [
-          styles.button,
-          sizeStyles,
-          radiusStyles,
-          variantStyles,
-          fullWidth && styles.fullWidth,
-          isDisabled && styles.disabled,
-          {
-            transform: [{ scale: animatedScale }],
-            opacity: animatedOpacity
-          },
-          _optionalChain([customAppearance, 'optionalAccess', _4 => _4.button])
-        ]
-      },
-      /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: styles.contentContainer }, startContent && (!isLoading || spinnerPlacement !== "start") && /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: styles.startContent }, startContent), isLoading && spinnerPlacement === "start" && /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: styles.spinner }, spinner), /* @__PURE__ */ _react2.default.createElement(
-        _reactnative.Text,
-        {
-          style: [
-            styles.text,
-            { fontSize: sizeStyles.fontSize, color: textColor },
-            isDisabled && styles.disabledText,
-            _optionalChain([customAppearance, 'optionalAccess', _5 => _5.text])
-          ]
-        },
-        children
-      ), isLoading && spinnerPlacement === "end" && /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: styles.spinner }, spinner), endContent && (!isLoading || spinnerPlacement !== "end") && /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: styles.endContent }, endContent))
-    )
-  ));
-};
-
-// src/components/button/icon-button.tsx
-
-
-
-// src/components/button/icon-button.style.ts
-
-var iconButtonStyles = _reactnative.StyleSheet.create({
-  container: {
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  button: {
-    alignItems: "center",
-    justifyContent: "center",
-    aspectRatio: 1
-  },
-  disabled: {
-    opacity: 0.5
-  }
-});
-
-// src/components/button/icon-button.hook.ts
-
-var useIconButtonSizeStyles = (size) => {
-  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
-  return _react.useMemo.call(void 0, () => {
-    const sizeMap = {
-      xs: { width: theme.componentSizes.xs, height: theme.componentSizes.xs },
-      sm: { width: theme.componentSizes.sm, height: theme.componentSizes.sm },
-      md: { width: theme.componentSizes.md, height: theme.componentSizes.md },
-      lg: { width: theme.componentSizes.lg, height: theme.componentSizes.md }
-    };
-    return sizeMap[size];
-  }, [size, theme]);
-};
-
-// src/components/button/icon-button.tsx
-var IconButton = ({
-  icon,
-  themeColor = "primary",
-  variant = "solid",
-  size = "md",
-  radius = "md",
-  isDisabled = false,
-  isLoading = false,
-  elevation = 0,
-  customAppearance,
-  onPress,
-  onLongPress,
-  onPressIn,
-  onPressOut
-}) => {
-  const animatedScale = _react2.default.useRef(new _reactnative.Animated.Value(1)).current;
-  const animatedOpacity = _react2.default.useRef(new _reactnative.Animated.Value(1)).current;
-  const sizeStyles = useIconButtonSizeStyles(size);
-  const radiusStyles = _chunk7UFBLUMVcjs.useBorderRadiusStyles.call(void 0, radius);
-  const variantStyles = useVariantSizesStyles(themeColor, variant, elevation);
-  const { textColor } = useTextStyles(themeColor, variant);
-  const handlePressIn = (event) => {
-    if (!isDisabled && !isLoading) {
-      runPressInAnimation(animatedScale, animatedOpacity);
-    }
-    _optionalChain([onPressIn, 'optionalCall', _6 => _6(event)]);
-  };
-  const handlePressOut = (event) => {
-    if (!isDisabled && !isLoading) {
-      runPressOutAnimation(animatedScale, animatedOpacity);
-    }
-    _optionalChain([onPressOut, 'optionalCall', _7 => _7(event)]);
-  };
-  const spinnerSize = {
-    xs: 14,
-    sm: 16,
-    md: 18,
-    lg: 20
-  }[size];
-  return /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: [iconButtonStyles.container, _optionalChain([customAppearance, 'optionalAccess', _8 => _8.container])] }, /* @__PURE__ */ _react2.default.createElement(
-    _reactnative.Pressable,
-    {
-      onPress: isDisabled || isLoading ? void 0 : onPress,
-      onLongPress: isDisabled || isLoading ? void 0 : onLongPress,
-      onPressIn: handlePressIn,
-      onPressOut: handlePressOut,
-      disabled: isDisabled || isLoading
-    },
-    /* @__PURE__ */ _react2.default.createElement(
-      _reactnative.Animated.View,
-      {
-        style: [
-          iconButtonStyles.button,
-          sizeStyles,
-          radiusStyles,
-          variantStyles,
-          isDisabled && iconButtonStyles.disabled,
-          {
-            transform: [{ scale: animatedScale }],
-            opacity: animatedOpacity
-          },
-          _optionalChain([customAppearance, 'optionalAccess', _9 => _9.button])
-        ]
-      },
-      isLoading ? /* @__PURE__ */ _react2.default.createElement(
-        _chunkYIEUN3G5cjs.ActivityIndicator,
-        {
-          variant: "circular",
-          themeColor: variant === "solid" ? void 0 : themeColor,
-          color: variant === "solid" ? textColor : void 0,
-          size: spinnerSize
-        }
-      ) : icon
-    )
-  ));
-};
-
-
-
-exports.Button = Button; exports.IconButton = IconButton;

package/dist/button/index.d.cts

@@ -1,174 +0,0 @@
-import React, { ReactNode } from 'react';
-import { ViewStyle, TextStyle, GestureResponderEvent } from 'react-native';
-import { ThemeColor, Size } from '@xaui/core/types';
-
-type ButtonVariant = 'solid' | 'bordered' | 'flat' | 'light' | 'faded';
-type ButtonRadius = 'none' | 'sm' | 'md' | 'lg' | 'full';
-type SpinnerPlacement = 'start' | 'end';
-type ElevationLevel = 0 | 1 | 2 | 3 | 4;
-type ButtonCustomAppearance = {
-    /**
-     * Custom styles for the outer container
-     */
-    container?: ViewStyle;
-    /**
-     * Custom styles for the button
-     */
-    button?: ViewStyle;
-    /**
-     * Custom styles for the button text
-     */
-    text?: TextStyle;
-};
-type ButtonProps = {
-    /**
-     * The content to display in the button.
-     */
-    children: ReactNode;
-    /**
-     * The theme color of the button.
-     * @default 'default'
-     */
-    themeColor?: ThemeColor;
-    /**
-     * The variant of the button.
-     * @default 'solid'
-     */
-    variant?: ButtonVariant;
-    /**
-     * The size of the button.
-     * @default 'md'
-     */
-    size?: Size;
-    /**
-     * The border radius of the button.
-     * @default 'md'
-     */
-    radius?: ButtonRadius;
-    /**
-     * Content to display at the start of the button.
-     */
-    startContent?: ReactNode;
-    /**
-     * Content to display at the end of the button.
-     */
-    endContent?: ReactNode;
-    /**
-     * The placement of the spinner when isLoading is true.
-     * @default 'start'
-     */
-    spinnerPlacement?: SpinnerPlacement;
-    /**
-     * Whether the button should take the full width of its container.
-     * @default false
-     */
-    fullWidth?: boolean;
-    /**
-     * Whether the button is disabled.
-     * @default false
-     */
-    isDisabled?: boolean;
-    /**
-     * Whether the button is in a loading state.
-     * @default false
-     */
-    isLoading?: boolean;
-    /**
-     * Android elevation level from 0 to 4.
-     * Does not apply to `bordered` and `light` variants.
-     * @default 0
-     */
-    elevation?: ElevationLevel;
-    /**
-     * Custom appearance styles for button parts
-     */
-    customAppearance?: ButtonCustomAppearance;
-    /**
-     * Callback fired when the button is pressed.
-     */
-    onPress?: (event: GestureResponderEvent) => void;
-    /**
-     * Callback fired when the button is long pressed.
-     */
-    onLongPress?: (event: GestureResponderEvent) => void;
-    /**
-     * Callback fired when the button press starts.
-     */
-    onPressIn?: (event: GestureResponderEvent) => void;
-    /**
-     * Callback fired when the button press ends.
-     */
-    onPressOut?: (event: GestureResponderEvent) => void;
-};
-
-declare const Button: React.FC<ButtonProps>;
-
-type IconButtonProps = {
-    /**
-     * Icon to display in the button
-     */
-    icon: ReactNode;
-    /**
-     * Button size
-     * @default 'md'
-     */
-    size?: Size;
-    /**
-     * Button variant
-     * @default 'solid'
-     */
-    variant?: ButtonVariant;
-    /**
-     * Theme color
-     * @default 'primary'
-     */
-    themeColor?: ThemeColor;
-    /**
-     * Border radius
-     * @default 'md'
-     */
-    radius?: ButtonRadius;
-    /**
-     * Whether the button is disabled
-     * @default false
-     */
-    isDisabled?: boolean;
-    /**
-     * Whether the button is loading
-     * @default false
-     */
-    isLoading?: boolean;
-    /**
-     * Android elevation level from 0 to 4.
-     * Does not apply to `bordered` and `light` variants.
-     * @default 0
-     */
-    elevation?: ElevationLevel;
-    /**
-     * Custom appearance overrides
-     */
-    customAppearance?: {
-        container?: ViewStyle;
-        button?: ViewStyle;
-    };
-    /**
-     * Press handler
-     */
-    onPress?: (event: GestureResponderEvent) => void;
-    /**
-     * Long press handler
-     */
-    onLongPress?: (event: GestureResponderEvent) => void;
-    /**
-     * Press in handler
-     */
-    onPressIn?: (event: GestureResponderEvent) => void;
-    /**
-     * Press out handler
-     */
-    onPressOut?: (event: GestureResponderEvent) => void;
-};
-
-declare const IconButton: React.FC<IconButtonProps>;
-
-export { Button, type ButtonProps, type ButtonRadius, type ButtonVariant, IconButton, type IconButtonProps, type SpinnerPlacement };