@xaui/native 0.0.21 → 0.0.24

package/dist/toolbar/index.js

@@ -0,0 +1,325 @@
+import {
+  useXUITheme
+} from "../chunk-4KSZLONZ.js";
+
+// src/components/toolbar/toolbar.tsx
+import React, { useEffect } from "react";
+import { View } from "react-native";
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+  withTiming
+} from "react-native-reanimated";
+
+// src/components/toolbar/toolbar.hook.ts
+import { useMemo } from "react";
+import { getSafeThemeColor, withOpacity } from "@xaui/core";
+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 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[getSafeThemeColor(themeColor)];
+  return useMemo(() => {
+    return {
+      background: theme.mode === "dark" ? theme.colors.default.background : theme.colors.background,
+      divider: withOpacity(theme.colors.foreground, 0.1),
+      title: theme.colors.foreground,
+      subtitle: withOpacity(theme.colors.foreground, 0.72),
+      action: colorScheme.main,
+      pressed: withOpacity(colorScheme.main, 0.16),
+      shadow: withOpacity(theme.colors.foreground, 0.35)
+    };
+  }, [colorScheme.main, theme.colors, theme.mode]);
+};
+
+// src/components/toolbar/toolbar.style.ts
+import { StyleSheet } from "react-native";
+var styles = 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
+import { createContext, useContext } from "react";
+var ToolbarContext = createContext(null);
+var useToolbarContext = () => {
+  return 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 colors = useToolbarColors(themeColor);
+  const translateValue = useSharedValue(
+    isVisible ? 0 : getInitialTranslate(position)
+  );
+  const opacityValue = useSharedValue(isVisible ? 1 : 0);
+  useEffect(() => {
+    if (isVisible) {
+      translateValue.value = withSpring(0, {
+        damping: 20,
+        stiffness: 300
+      });
+      opacityValue.value = withTiming(1, { duration: 200 });
+    } else {
+      translateValue.value = withSpring(getInitialTranslate(position), {
+        damping: 20,
+        stiffness: 300
+      });
+      opacityValue.value = withTiming(0, { duration: 200 });
+    }
+  }, [isVisible, position, translateValue, opacityValue]);
+  const animatedStyle = 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__ */ React.createElement(
+    ToolbarContext.Provider,
+    {
+      value: {
+        actionColor: colors.action,
+        actionPressedColor: colors.pressed,
+        iconSize: variantStyles.iconSize,
+        actionButtonSize: variantStyles.actionSize
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      Animated.View,
+      {
+        style: [
+          styles.container,
+          positionStyle,
+          floatingStyle,
+          animatedStyle,
+          {
+            height: variantStyles.containerHeight,
+            width: variantStyles.containerWidth
+          },
+          style,
+          customAppearance?.container
+        ]
+      },
+      /* @__PURE__ */ React.createElement(
+        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 }],
+            customAppearance?.topRow
+          ]
+        },
+        /* @__PURE__ */ React.createElement(
+          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
+import React2 from "react";
+import { Pressable } from "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__ */ React2.createElement(
+    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
+  );
+};
+export {
+  Toolbar,
+  ToolbarAction
+};

package/dist/typography/index.js

@@ -1,7 +1,6 @@
-import "../chunk-DXXNBF5P.js";
 import {
   useXUITheme
-} from "../chunk-LTKYHG5V.js";
+} from "../chunk-URBEEDFX.js";
 
 // src/components/typography/typography.tsx
 import React, { useMemo as useMemo2 } from "react";

package/dist/view/index.cjs

@@ -352,7 +352,17 @@ var import_react_native9 = require("react-native");
 // src/components/view/rounded-view/rounded-view.hook.ts
 var import_react9 = require("react");
 var useRoundedViewStyle = (props) => {
-  const { all = 0, top, bottom, left, right, topLeft, topRight, bottomLeft, bottomRight } = props;
+  const {
+    all = 0,
+    top,
+    bottom,
+    left,
+    right,
+    topLeft,
+    topRight,
+    bottomLeft,
+    bottomRight
+  } = props;
   return (0, import_react9.useMemo)(() => {
     return {
       borderTopLeftRadius: topLeft ?? top ?? left ?? all,
@@ -412,7 +422,11 @@ var styles2 = import_react_native9.StyleSheet.create({
 // src/components/view/aspect-ratio/aspect-ratio.tsx
 var import_react11 = __toESM(require("react"), 1);
 var import_react_native10 = require("react-native");
-var AspectRatio = ({ children, ratio, style }) => {
+var AspectRatio = ({
+  children,
+  ratio,
+  style
+}) => {
   return /* @__PURE__ */ import_react11.default.createElement(import_react_native10.View, { style: [{ aspectRatio: ratio }, style] }, children);
 };
 

package/dist/view/index.js

@@ -300,7 +300,17 @@ import { View as View9, StyleSheet as StyleSheet2 } from "react-native";
 // src/components/view/rounded-view/rounded-view.hook.ts
 import { useMemo } from "react";
 var useRoundedViewStyle = (props) => {
-  const { all = 0, top, bottom, left, right, topLeft, topRight, bottomLeft, bottomRight } = props;
+  const {
+    all = 0,
+    top,
+    bottom,
+    left,
+    right,
+    topLeft,
+    topRight,
+    bottomLeft,
+    bottomRight
+  } = props;
   return useMemo(() => {
     return {
       borderTopLeftRadius: topLeft ?? top ?? left ?? all,
@@ -360,7 +370,11 @@ var styles2 = StyleSheet2.create({
 // src/components/view/aspect-ratio/aspect-ratio.tsx
 import React10 from "react";
 import { View as View10 } from "react-native";
-var AspectRatio = ({ children, ratio, style }) => {
+var AspectRatio = ({
+  children,
+  ratio,
+  style
+}) => {
   return /* @__PURE__ */ React10.createElement(View10, { style: [{ aspectRatio: ratio }, style] }, children);
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xaui/native",
-  "version": "0.0.21",
+  "version": "0.0.24",
   "description": "Flutter-inspired React Native UI components with native animations powered by React Native Reanimated",
   "keywords": [
     "react-native",
@@ -37,10 +37,10 @@
       "import": "./dist/checkbox/index.js",
       "require": "./dist/checkbox/index.js"
     },
-    "./accordion": {
-      "types": "./dist/accordion/index.d.ts",
-      "import": "./dist/accordion/index.js",
-      "require": "./dist/accordion/index.js"
+    "./expansion-panel": {
+      "types": "./dist/expansion-panel/index.d.ts",
+      "import": "./dist/expansion-panel/index.js",
+      "require": "./dist/expansion-panel/index.js"
     },
     "./progress": {
       "types": "./dist/progress/index.d.ts",
@@ -57,6 +57,11 @@
       "import": "./dist/switch/index.js",
       "require": "./dist/switch/index.js"
     },
+    "./slider": {
+      "types": "./dist/slider/index.d.ts",
+      "import": "./dist/slider/index.js",
+      "require": "./dist/slider/index.js"
+    },
     "./select": {
       "types": "./dist/select/index.d.ts",
       "import": "./dist/select/index.js",
@@ -67,6 +72,11 @@
       "import": "./dist/divider/index.js",
       "require": "./dist/divider/index.js"
     },
+    "./drawer": {
+      "types": "./dist/drawer/index.d.ts",
+      "import": "./dist/drawer/index.js",
+      "require": "./dist/drawer/index.js"
+    },
     "./skeleton": {
       "types": "./dist/skeleton/index.d.ts",
       "import": "./dist/skeleton/index.js",
@@ -117,6 +127,16 @@
       "import": "./dist/segment-button/index.js",
       "require": "./dist/segment-button/index.js"
     },
+    "./tabs": {
+      "types": "./dist/tabs/index.d.ts",
+      "import": "./dist/tabs/index.js",
+      "require": "./dist/tabs/index.js"
+    },
+    "./pager": {
+      "types": "./dist/pager/index.d.ts",
+      "import": "./dist/pager/index.js",
+      "require": "./dist/pager/index.js"
+    },
     "./chip": {
       "types": "./dist/chip/index.d.ts",
       "import": "./dist/chip/index.js",
@@ -127,6 +147,11 @@
       "import": "./dist/bottom-sheet/index.js",
       "require": "./dist/bottom-sheet/index.js"
     },
+    "./bottom-tab-bar": {
+      "types": "./dist/bottom-tab-bar/index.d.ts",
+      "import": "./dist/bottom-tab-bar/index.js",
+      "require": "./dist/bottom-tab-bar/index.js"
+    },
     "./menu": {
       "types": "./dist/menu/index.d.ts",
       "import": "./dist/menu/index.js",
@@ -142,6 +167,11 @@
       "import": "./dist/fab-menu/index.js",
       "require": "./dist/fab-menu/index.js"
     },
+    "./feature-discovery": {
+      "types": "./dist/feature-discovery/index.d.ts",
+      "import": "./dist/feature-discovery/index.js",
+      "require": "./dist/feature-discovery/index.js"
+    },
     "./card": {
       "types": "./dist/card/index.d.ts",
       "import": "./dist/card/index.js",
@@ -156,6 +186,41 @@
       "types": "./dist/list/index.d.ts",
       "import": "./dist/list/index.js",
       "require": "./dist/list/index.js"
+    },
+    "./radio": {
+      "types": "./dist/radio/index.d.ts",
+      "import": "./dist/radio/index.js",
+      "require": "./dist/radio/index.js"
+    },
+    "./toolbar": {
+      "types": "./dist/toolbar/index.d.ts",
+      "import": "./dist/toolbar/index.js",
+      "require": "./dist/toolbar/index.js"
+    },
+    "./app-bar": {
+      "types": "./dist/app-bar/index.d.ts",
+      "import": "./dist/app-bar/index.js",
+      "require": "./dist/app-bar/index.js"
+    },
+    "./timepicker": {
+      "types": "./dist/timepicker/index.d.ts",
+      "import": "./dist/timepicker/index.js",
+      "require": "./dist/timepicker/index.js"
+    },
+    "./stepper": {
+      "types": "./dist/stepper/index.d.ts",
+      "import": "./dist/stepper/index.js",
+      "require": "./dist/stepper/index.js"
+    },
+    "./menubox": {
+      "types": "./dist/menubox/index.d.ts",
+      "import": "./dist/menubox/index.js",
+      "require": "./dist/menubox/index.js"
+    },
+    "./chart": {
+      "types": "./dist/chart/index.d.ts",
+      "import": "./dist/chart/index.js",
+      "require": "./dist/chart/index.js"
     }
   },
   "files": [
@@ -169,7 +234,7 @@
   },
   "dependencies": {
     "@xaui/core": "0.1.7",
-    "@xaui/icons": "0.0.3"
+    "@xaui/icons": "0.0.4"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
@@ -193,8 +258,8 @@
     "access": "public"
   },
   "scripts": {
-    "build": "tsup --config tsup.config.ts",
-    "dev": "tsup --config tsup.config.ts --watch",
+    "build": "rm -rf dist && NODE_OPTIONS=--max-old-space-size=4096 tsup --config tsup.config.ts",
+    "dev": "NODE_OPTIONS=--max-old-space-size=4096 tsup --config tsup.config.ts --watch",
     "test": "vitest",
     "lint": "eslint src/",
     "type-check": "tsc --noEmit"

package/dist/button.type-D8tzEBo7.d.ts

@@ -1,104 +0,0 @@
-import { ReactNode } from 'react';
-import { ViewStyle, TextStyle, GestureResponderEvent } from 'react-native';
-import { T as ThemeColor, S as Size } from './index-BOw6tbkc.js';
-
-type ButtonVariant = 'solid' | 'outlined' | '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 `outlined` 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;
-};
-
-export type { ButtonRadius as B, ElevationLevel as E, SpinnerPlacement as S, ButtonProps as a, ButtonVariant as b };