@xaui/native 0.0.21 → 0.0.24

package/dist/toolbar/index.cjs

@@ -0,0 +1,395 @@
+"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/toolbar/index.ts
+var toolbar_exports = {};
+__export(toolbar_exports, {
+  Toolbar: () => Toolbar,
+  ToolbarAction: () => ToolbarAction
+});
+module.exports = __toCommonJS(toolbar_exports);
+
+// src/components/toolbar/toolbar.tsx
+var import_react8 = __toESM(require("react"), 1);
+var import_react_native5 = require("react-native");
+var import_react_native_reanimated = __toESM(require("react-native-reanimated"), 1);
+
+// src/components/toolbar/toolbar.hook.ts
+var import_react6 = require("react");
+var import_core = require("@xaui/core");
+
+// src/core/theme-context.tsx
+var import_react4 = __toESM(require("react"), 1);
+var import_react_native2 = require("react-native");
+var import_theme = require("@xaui/core/theme");
+var import_palette = require("@xaui/core/palette");
+
+// src/core/portal/portal.tsx
+var import_react2 = require("react");
+
+// src/core/portal/portal-context.ts
+var import_react = require("react");
+var PortalContext = (0, import_react.createContext)(null);
+
+// src/core/portal/portal-host.tsx
+var import_react3 = __toESM(require("react"), 1);
+var import_react_native = require("react-native");
+var hostStyles = import_react_native.StyleSheet.create({
+  container: {
+    flex: 1
+  }
+});
+
+// src/core/theme-context.tsx
+var XUIThemeContext = (0, import_react4.createContext)(null);
+
+// src/core/theme-hooks.ts
+var import_react5 = require("react");
+var import_react_native3 = require("react-native");
+function useXUITheme() {
+  const theme = (0, import_react5.useContext)(XUIThemeContext);
+  if (!theme) {
+    throw new Error("useXUITheme must be used within XUIProvider");
+  }
+  return theme;
+}
+
+// src/core/index.ts
+var import_theme2 = require("@xaui/core/theme");
+
+// src/components/toolbar/toolbar.hook.ts
+var variantMap = {
+  floating: {
+    containerHeight: 72,
+    containerWidth: "auto",
+    iconSize: 26,
+    actionSize: 40,
+    borderRadius: 56,
+    paddingHorizontal: 16,
+    paddingVertical: 16,
+    gap: 0,
+    isElevated: true
+  },
+  docked: {
+    containerHeight: 72,
+    containerWidth: "auto",
+    iconSize: 26,
+    actionSize: 40,
+    borderRadius: 0,
+    paddingHorizontal: 16,
+    paddingVertical: 16,
+    gap: 0,
+    isElevated: false
+  },
+  vertical: {
+    containerHeight: "auto",
+    containerWidth: 80,
+    iconSize: 26,
+    actionSize: 40,
+    borderRadius: 0,
+    paddingHorizontal: 16,
+    paddingVertical: 16,
+    gap: 0,
+    isElevated: false
+  }
+};
+var useToolbarVariantStyles = (variant, position) => {
+  return (0, import_react6.useMemo)(() => {
+    const baseStyles = variantMap[variant];
+    const isVertical = variant === "vertical";
+    return {
+      ...baseStyles,
+      isVertical,
+      position
+    };
+  }, [variant, position]);
+};
+var useToolbarColors = (themeColor) => {
+  const theme = useXUITheme();
+  const colorScheme = theme.colors[(0, import_core.getSafeThemeColor)(themeColor)];
+  return (0, import_react6.useMemo)(() => {
+    return {
+      background: theme.mode === "dark" ? theme.colors.default.background : theme.colors.background,
+      divider: (0, import_core.withOpacity)(theme.colors.foreground, 0.1),
+      title: theme.colors.foreground,
+      subtitle: (0, import_core.withOpacity)(theme.colors.foreground, 0.72),
+      action: colorScheme.main,
+      pressed: (0, import_core.withOpacity)(colorScheme.main, 0.16),
+      shadow: (0, import_core.withOpacity)(theme.colors.foreground, 0.35)
+    };
+  }, [colorScheme.main, theme.colors, theme.mode]);
+};
+
+// src/components/toolbar/toolbar.style.ts
+var import_react_native4 = require("react-native");
+var styles = import_react_native4.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 import_react7 = require("react");
+var ToolbarContext = (0, import_react7.createContext)(null);
+var useToolbarContext = () => {
+  return (0, import_react7.useContext)(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 colors2 = useToolbarColors(themeColor);
+  const translateValue = (0, import_react_native_reanimated.useSharedValue)(
+    isVisible ? 0 : getInitialTranslate(position)
+  );
+  const opacityValue = (0, import_react_native_reanimated.useSharedValue)(isVisible ? 1 : 0);
+  (0, import_react8.useEffect)(() => {
+    if (isVisible) {
+      translateValue.value = (0, import_react_native_reanimated.withSpring)(0, {
+        damping: 20,
+        stiffness: 300
+      });
+      opacityValue.value = (0, import_react_native_reanimated.withTiming)(1, { duration: 200 });
+    } else {
+      translateValue.value = (0, import_react_native_reanimated.withSpring)(getInitialTranslate(position), {
+        damping: 20,
+        stiffness: 300
+      });
+      opacityValue.value = (0, import_react_native_reanimated.withTiming)(0, { duration: 200 });
+    }
+  }, [isVisible, position, translateValue, opacityValue]);
+  const animatedStyle = (0, import_react_native_reanimated.useAnimatedStyle)(() => {
+    const transform = position === "left" || position === "right" ? [{ translateX: translateValue.value }] : [{ translateY: translateValue.value }];
+    return {
+      opacity: opacityValue.value,
+      transform
+    };
+  });
+  const isVertical = variantStyles.isVertical;
+  const shouldElevate = 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__ */ import_react8.default.createElement(
+    ToolbarContext.Provider,
+    {
+      value: {
+        actionColor: colors2.action,
+        actionPressedColor: colors2.pressed,
+        iconSize: variantStyles.iconSize,
+        actionButtonSize: variantStyles.actionSize
+      }
+    },
+    /* @__PURE__ */ import_react8.default.createElement(
+      import_react_native_reanimated.default.View,
+      {
+        style: [
+          styles.container,
+          positionStyle,
+          floatingStyle,
+          animatedStyle,
+          {
+            height: variantStyles.containerHeight,
+            width: variantStyles.containerWidth
+          },
+          style,
+          customAppearance?.container
+        ]
+      },
+      /* @__PURE__ */ import_react8.default.createElement(
+        import_react_native5.View,
+        {
+          style: [
+            isVertical ? styles.contentVertical : styles.content,
+            {
+              backgroundColor: colors2.background,
+              borderRadius: variantStyles.borderRadius,
+              paddingHorizontal: variantStyles.paddingHorizontal,
+              paddingVertical: variantStyles.paddingVertical,
+              borderBottomWidth: showDivider ? 1 : 0,
+              borderBottomColor: showDivider ? colors2.divider : "transparent",
+              height: "100%",
+              width: "100%"
+            },
+            shouldElevate && [styles.elevated, { shadowColor: colors2.shadow }],
+            customAppearance?.topRow
+          ]
+        },
+        /* @__PURE__ */ import_react8.default.createElement(
+          import_react_native5.View,
+          {
+            style: [
+              isVertical ? styles.actionsVertical : styles.actions,
+              { gap: variantStyles.gap },
+              customAppearance?.actionsContainer
+            ]
+          },
+          children
+        )
+      )
+    )
+  );
+};
+function getInitialTranslate(position) {
+  switch (position) {
+    case "top":
+      return -100;
+    case "bottom":
+      return 100;
+    case "left":
+      return -100;
+    case "right":
+      return 100;
+    default:
+      return 0;
+  }
+}
+
+// src/components/toolbar/toolbar-action.tsx
+var import_react9 = __toESM(require("react"), 1);
+var import_react_native6 = require("react-native");
+var ToolbarAction = ({
+  icon,
+  isDisabled = false,
+  style,
+  onPress,
+  onLongPress,
+  accessibilityLabel,
+  testID
+}) => {
+  const context = useToolbarContext();
+  const iconNode = typeof icon === "function" ? icon({
+    color: context?.actionColor ?? "#000000",
+    size: context?.iconSize ?? 26
+  }) : icon;
+  return /* @__PURE__ */ import_react9.default.createElement(
+    import_react_native6.Pressable,
+    {
+      onPress: isDisabled ? void 0 : onPress,
+      onLongPress: isDisabled ? void 0 : onLongPress,
+      accessibilityRole: "button",
+      accessibilityLabel,
+      testID,
+      style: ({ pressed }) => [
+        styles.actionButton,
+        {
+          width: context?.actionButtonSize ?? 40,
+          height: context?.actionButtonSize ?? 40,
+          backgroundColor: pressed ? context?.actionPressedColor ?? "transparent" : "transparent"
+        },
+        isDisabled && styles.disabledAction,
+        style
+      ]
+    },
+    iconNode
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Toolbar,
+  ToolbarAction
+});

package/dist/toolbar/index.d.cts

@@ -0,0 +1,100 @@
+import React, { ReactNode } from 'react';
+import { StyleProp, ViewStyle, GestureResponderEvent } from 'react-native';
+import { T as ThemeColor } from '../index-BOw6tbkc.cjs';
+
+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

@@ -0,0 +1,100 @@
+import React, { ReactNode } from 'react';
+import { StyleProp, ViewStyle, GestureResponderEvent } from 'react-native';
+import { T as ThemeColor } from '../index-BOw6tbkc.js';
+
+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 };