@xaui/native 0.2.8 → 0.9.1-alpha.0

package/dist/toolbar/index.cjs

@@ -1,333 +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/toolbar/toolbar.tsx
-var _react = require('react'); var _react2 = _interopRequireDefault(_react);
-var _reactnative = require('react-native');
-
-
-
-
-
-var _reactnativereanimated = require('react-native-reanimated'); var _reactnativereanimated2 = _interopRequireDefault(_reactnativereanimated);
-
-// src/components/toolbar/toolbar.hook.ts
-
-var _core = require('@xaui/core');
-var variantMap = {
-  floating: {
-    containerHeight: 68,
-    containerWidth: "auto",
-    iconSize: 26,
-    actionSize: 40,
-    borderRadius: 56,
-    paddingHorizontal: 16,
-    paddingVertical: 14,
-    gap: 0,
-    isElevated: true
-  },
-  docked: {
-    containerHeight: 68,
-    containerWidth: "auto",
-    iconSize: 26,
-    actionSize: 40,
-    borderRadius: 0,
-    paddingHorizontal: 16,
-    paddingVertical: 14,
-    gap: 0,
-    isElevated: false
-  },
-  vertical: {
-    containerHeight: "auto",
-    containerWidth: 80,
-    iconSize: 26,
-    actionSize: 40,
-    borderRadius: 0,
-    paddingHorizontal: 16,
-    paddingVertical: 14,
-    gap: 0,
-    isElevated: false
-  }
-};
-var useToolbarVariantStyles = (variant, position) => {
-  return _react.useMemo.call(void 0, () => {
-    const baseStyles = variantMap[variant];
-    const isVertical = variant === "vertical";
-    return {
-      ...baseStyles,
-      isVertical,
-      position
-    };
-  }, [variant, position]);
-};
-var useToolbarColors = (themeColor) => {
-  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
-  const colorScheme = theme.colors[_core.getSafeThemeColor.call(void 0, themeColor)];
-  return _react.useMemo.call(void 0, () => {
-    return {
-      background: theme.mode === "dark" ? theme.colors.default.container : theme.colors.background,
-      divider: _core.withOpacity.call(void 0, theme.colors.foreground, 0.1),
-      title: theme.colors.foreground,
-      subtitle: _core.withOpacity.call(void 0, theme.colors.foreground, 0.72),
-      action: colorScheme.main,
-      pressed: _core.withOpacity.call(void 0, colorScheme.main, 0.16),
-      shadow: _core.withOpacity.call(void 0, theme.colors.foreground, 0.35)
-    };
-  }, [colorScheme.main, theme.colors, theme.mode]);
-};
-
-// src/components/toolbar/toolbar.style.ts
-
-var styles = _reactnative.StyleSheet.create({
-  container: {
-    position: "absolute",
-    zIndex: 40
-  },
-  top: {
-    top: 0,
-    left: 0,
-    right: 0
-  },
-  bottom: {
-    bottom: 0,
-    left: 0,
-    right: 0
-  },
-  left: {
-    left: 0,
-    top: 0,
-    bottom: 0
-  },
-  right: {
-    right: 0,
-    top: 0,
-    bottom: 0
-  },
-  floating: {
-    margin: 16
-  },
-  floatingBottom: {
-    marginBottom: 16
-  },
-  floatingTop: {
-    marginTop: 16
-  },
-  elevated: {
-    shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.15,
-    shadowRadius: 8,
-    elevation: 3
-  },
-  content: {
-    flexDirection: "row",
-    alignItems: "center"
-  },
-  contentVertical: {
-    flexDirection: "column",
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  actions: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    width: "100%"
-  },
-  actionsVertical: {
-    flexDirection: "column",
-    alignItems: "center",
-    justifyContent: "space-between",
-    height: "100%"
-  },
-  actionButton: {
-    alignItems: "center",
-    justifyContent: "center",
-    borderRadius: 999
-  },
-  disabledAction: {
-    opacity: 0.38
-  }
-});
-
-// src/components/toolbar/toolbar-context.ts
-
-var ToolbarContext = _react.createContext.call(void 0, null);
-var useToolbarContext = () => {
-  return _react.useContext.call(void 0, ToolbarContext);
-};
-
-// src/components/toolbar/toolbar.tsx
-var Toolbar = ({
-  variant = "docked",
-  position = "top",
-  isVisible = true,
-  themeColor = "primary",
-  showDivider = false,
-  isElevated,
-  children,
-  style,
-  customAppearance
-}) => {
-  const variantStyles = useToolbarVariantStyles(variant, position);
-  const colors = useToolbarColors(themeColor);
-  const translateValue = _reactnativereanimated.useSharedValue.call(void 0, 
-    isVisible ? 0 : getInitialTranslate(position)
-  );
-  const opacityValue = _reactnativereanimated.useSharedValue.call(void 0, isVisible ? 1 : 0);
-  _react.useEffect.call(void 0, () => {
-    const nextTranslate = isVisible ? 0 : getInitialTranslate(position);
-    if (isVisible) {
-      translateValue.value = _reactnativereanimated.withTiming.call(void 0, nextTranslate, {
-        duration: 220,
-        easing: _reactnativereanimated.Easing.out(_reactnativereanimated.Easing.cubic)
-      });
-      opacityValue.value = _reactnativereanimated.withTiming.call(void 0, 1, {
-        duration: 200,
-        easing: _reactnativereanimated.Easing.out(_reactnativereanimated.Easing.quad)
-      });
-    } else {
-      translateValue.value = _reactnativereanimated.withTiming.call(void 0, nextTranslate, {
-        duration: 180,
-        easing: _reactnativereanimated.Easing.in(_reactnativereanimated.Easing.cubic)
-      });
-      opacityValue.value = _reactnativereanimated.withTiming.call(void 0, 0, {
-        duration: 150,
-        easing: _reactnativereanimated.Easing.in(_reactnativereanimated.Easing.quad)
-      });
-    }
-  }, [isVisible, position, translateValue, opacityValue]);
-  const animatedStyle = _reactnativereanimated.useAnimatedStyle.call(void 0, () => {
-    const transform = position === "left" || position === "right" ? [{ translateX: translateValue.value }] : [{ translateY: translateValue.value }];
-    return {
-      opacity: opacityValue.value,
-      transform
-    };
-  });
-  const isVertical = variantStyles.isVertical;
-  const shouldElevate = _nullishCoalesce(isElevated, () => ( variantStyles.isElevated));
-  const positionStyle = position === "top" ? styles.top : position === "bottom" ? styles.bottom : position === "left" ? styles.left : styles.right;
-  const floatingStyle = variant === "floating" ? [
-    styles.floating,
-    position === "bottom" && styles.floatingBottom,
-    position === "top" && styles.floatingTop
-  ] : null;
-  return /* @__PURE__ */ _react2.default.createElement(
-    ToolbarContext.Provider,
-    {
-      value: {
-        actionColor: colors.action,
-        actionPressedColor: colors.pressed,
-        iconSize: variantStyles.iconSize,
-        actionButtonSize: variantStyles.actionSize
-      }
-    },
-    /* @__PURE__ */ _react2.default.createElement(
-      _reactnativereanimated2.default.View,
-      {
-        style: [
-          styles.container,
-          positionStyle,
-          floatingStyle,
-          animatedStyle,
-          {
-            height: variantStyles.containerHeight,
-            width: variantStyles.containerWidth
-          },
-          style,
-          _optionalChain([customAppearance, 'optionalAccess', _ => _.container])
-        ]
-      },
-      /* @__PURE__ */ _react2.default.createElement(
-        _reactnative.View,
-        {
-          style: [
-            isVertical ? styles.contentVertical : styles.content,
-            {
-              backgroundColor: colors.background,
-              borderRadius: variantStyles.borderRadius,
-              paddingHorizontal: variantStyles.paddingHorizontal,
-              paddingVertical: variantStyles.paddingVertical,
-              borderBottomWidth: showDivider ? 1 : 0,
-              borderBottomColor: showDivider ? colors.divider : "transparent",
-              height: "100%",
-              width: "100%"
-            },
-            shouldElevate && [styles.elevated, { shadowColor: colors.shadow }],
-            _optionalChain([customAppearance, 'optionalAccess', _2 => _2.topRow])
-          ]
-        },
-        /* @__PURE__ */ _react2.default.createElement(
-          _reactnative.View,
-          {
-            style: [
-              isVertical ? styles.actionsVertical : styles.actions,
-              { gap: variantStyles.gap },
-              _optionalChain([customAppearance, 'optionalAccess', _3 => _3.actionsContainer])
-            ]
-          },
-          children
-        )
-      )
-    )
-  );
-};
-function getInitialTranslate(position) {
-  switch (position) {
-    case "top":
-      return -24;
-    case "bottom":
-      return 24;
-    case "left":
-      return -24;
-    case "right":
-      return 24;
-    default:
-      return 0;
-  }
-}
-
-// src/components/toolbar/toolbar-action.tsx
-
-
-var ToolbarAction = ({
-  icon,
-  isDisabled = false,
-  style,
-  onPress,
-  onLongPress,
-  accessibilityLabel,
-  testID
-}) => {
-  const context = useToolbarContext();
-  const iconNode = typeof icon === "function" ? icon({
-    color: _nullishCoalesce(_optionalChain([context, 'optionalAccess', _4 => _4.actionColor]), () => ( "#000000")),
-    size: _nullishCoalesce(_optionalChain([context, 'optionalAccess', _5 => _5.iconSize]), () => ( 26))
-  }) : icon;
-  return /* @__PURE__ */ _react2.default.createElement(
-    _reactnative.Pressable,
-    {
-      onPress: isDisabled ? void 0 : onPress,
-      onLongPress: isDisabled ? void 0 : onLongPress,
-      accessibilityRole: "button",
-      accessibilityLabel,
-      testID,
-      style: ({ pressed }) => [
-        styles.actionButton,
-        {
-          width: _nullishCoalesce(_optionalChain([context, 'optionalAccess', _6 => _6.actionButtonSize]), () => ( 40)),
-          height: _nullishCoalesce(_optionalChain([context, 'optionalAccess', _7 => _7.actionButtonSize]), () => ( 40)),
-          backgroundColor: pressed ? _nullishCoalesce(_optionalChain([context, 'optionalAccess', _8 => _8.actionPressedColor]), () => ( "transparent")) : "transparent"
-        },
-        isDisabled && styles.disabledAction,
-        style
-      ]
-    },
-    iconNode
-  );
-};
-
-
-
-exports.Toolbar = Toolbar; exports.ToolbarAction = ToolbarAction;

package/dist/toolbar/index.d.cts

@@ -1,100 +0,0 @@
-import React, { ReactNode } from 'react';
-import { StyleProp, ViewStyle, GestureResponderEvent } from 'react-native';
-import { ThemeColor } from '@xaui/core/types';
-
-type ToolbarVariant = 'floating' | 'docked' | 'vertical';
-type ToolbarPosition = 'top' | 'bottom' | 'left' | 'right';
-type ToolbarActionRenderParams = {
-    color: string;
-    size: number;
-};
-type ToolbarActionProps = {
-    /**
-     * Icon element or icon render function.
-     */
-    icon: ReactNode | ((params: ToolbarActionRenderParams) => ReactNode);
-    /**
-     * Whether action is disabled.
-     * @default false
-     */
-    isDisabled?: boolean;
-    /**
-     * Custom action style.
-     */
-    style?: StyleProp<ViewStyle>;
-    /**
-     * Callback fired when action is pressed.
-     */
-    onPress?: (event: GestureResponderEvent) => void;
-    /**
-     * Callback fired when action is long-pressed.
-     */
-    onLongPress?: (event: GestureResponderEvent) => void;
-    /**
-     * Accessibility label for action.
-     */
-    accessibilityLabel?: string;
-    /**
-     * testID for e2e tests.
-     */
-    testID?: string;
-};
-type ToolbarCustomAppearance = {
-    container?: StyleProp<ViewStyle>;
-    topRow?: StyleProp<ViewStyle>;
-    actionsContainer?: StyleProp<ViewStyle>;
-};
-type ToolbarProps = {
-    /**
-     * Toolbar variant.
-     * - floating: rounded floating bar
-     * - docked: fixed bar without rounding
-     * - vertical: vertical bar (always centered)
-     * @default 'docked'
-     */
-    variant?: ToolbarVariant;
-    /**
-     * Toolbar position.
-     * - For floating/docked: 'top' | 'bottom'
-     * - For vertical: 'left' | 'right'
-     * @default 'top'
-     */
-    position?: ToolbarPosition;
-    /**
-     * Whether toolbar is visible (with animation).
-     * @default true
-     */
-    isVisible?: boolean;
-    /**
-     * Theme color used for accent and icon tint.
-     * @default 'primary'
-     */
-    themeColor?: ThemeColor;
-    /**
-     * Whether to render a divider.
-     * @default false
-     */
-    showDivider?: boolean;
-    /**
-     * Whether to show elevation shadow. If not provided, uses variant default.
-     */
-    isElevated?: boolean;
-    /**
-     * Toolbar action items.
-     */
-    children?: ReactNode;
-    /**
-     * Custom container style.
-     */
-    style?: StyleProp<ViewStyle>;
-    /**
-     * Optional custom appearance styles.
-     */
-    customAppearance?: ToolbarCustomAppearance;
-};
-
-declare const Toolbar: React.FC<ToolbarProps>;
-
-declare const ToolbarAction: React.FC<ToolbarActionProps>;
-
-export { Toolbar, ToolbarAction, type ToolbarActionProps, type ToolbarActionRenderParams, type ToolbarCustomAppearance, type ToolbarPosition, type ToolbarProps, type ToolbarVariant };

package/dist/toolbar/index.d.ts

@@ -1,100 +0,0 @@
-import React, { ReactNode } from 'react';
-import { StyleProp, ViewStyle, GestureResponderEvent } from 'react-native';
-import { ThemeColor } from '@xaui/core/types';
-
-type ToolbarVariant = 'floating' | 'docked' | 'vertical';
-type ToolbarPosition = 'top' | 'bottom' | 'left' | 'right';
-type ToolbarActionRenderParams = {
-    color: string;
-    size: number;
-};
-type ToolbarActionProps = {
-    /**
-     * Icon element or icon render function.
-     */
-    icon: ReactNode | ((params: ToolbarActionRenderParams) => ReactNode);
-    /**
-     * Whether action is disabled.
-     * @default false
-     */
-    isDisabled?: boolean;
-    /**
-     * Custom action style.
-     */
-    style?: StyleProp<ViewStyle>;
-    /**
-     * Callback fired when action is pressed.
-     */
-    onPress?: (event: GestureResponderEvent) => void;
-    /**
-     * Callback fired when action is long-pressed.
-     */
-    onLongPress?: (event: GestureResponderEvent) => void;
-    /**
-     * Accessibility label for action.
-     */
-    accessibilityLabel?: string;
-    /**
-     * testID for e2e tests.
-     */
-    testID?: string;
-};
-type ToolbarCustomAppearance = {
-    container?: StyleProp<ViewStyle>;
-    topRow?: StyleProp<ViewStyle>;
-    actionsContainer?: StyleProp<ViewStyle>;
-};
-type ToolbarProps = {
-    /**
-     * Toolbar variant.
-     * - floating: rounded floating bar
-     * - docked: fixed bar without rounding
-     * - vertical: vertical bar (always centered)
-     * @default 'docked'
-     */
-    variant?: ToolbarVariant;
-    /**
-     * Toolbar position.
-     * - For floating/docked: 'top' | 'bottom'
-     * - For vertical: 'left' | 'right'
-     * @default 'top'
-     */
-    position?: ToolbarPosition;
-    /**
-     * Whether toolbar is visible (with animation).
-     * @default true
-     */
-    isVisible?: boolean;
-    /**
-     * Theme color used for accent and icon tint.
-     * @default 'primary'
-     */
-    themeColor?: ThemeColor;
-    /**
-     * Whether to render a divider.
-     * @default false
-     */
-    showDivider?: boolean;
-    /**
-     * Whether to show elevation shadow. If not provided, uses variant default.
-     */
-    isElevated?: boolean;
-    /**
-     * Toolbar action items.
-     */
-    children?: ReactNode;
-    /**
-     * Custom container style.
-     */
-    style?: StyleProp<ViewStyle>;
-    /**
-     * Optional custom appearance styles.
-     */
-    customAppearance?: ToolbarCustomAppearance;
-};
-
-declare const Toolbar: React.FC<ToolbarProps>;
-
-declare const ToolbarAction: React.FC<ToolbarActionProps>;
-
-export { Toolbar, ToolbarAction, type ToolbarActionProps, type ToolbarActionRenderParams, type ToolbarCustomAppearance, type ToolbarPosition, type ToolbarProps, type ToolbarVariant };