@xaui/native 0.0.31 → 0.0.32

package/dist/snippet/index.js

@@ -0,0 +1,282 @@
+import "../chunk-DXXNBF5P.js";
+import {
+  useBorderRadiusStyles,
+  useXUITheme
+} from "../chunk-LTKYHG5V.js";
+
+// src/components/snippet/snippet.tsx
+import React from "react";
+import { Pressable, Text, View, NativeModules } from "react-native";
+import { CopyIcon } from "@xaui/icons";
+
+// src/components/snippet/snippet.style.ts
+import { StyleSheet } from "react-native";
+var styles = StyleSheet.create({
+  container: {
+    flexShrink: 1,
+    flexBasis: "auto",
+    width: "100%"
+  },
+  noFullWidth: {
+    width: void 0,
+    alignSelf: "flex-start"
+  },
+  snippet: {
+    position: "relative",
+    borderWidth: 1,
+    overflow: "hidden"
+  },
+  content: {
+    minHeight: 64,
+    justifyContent: "center",
+    paddingHorizontal: 14,
+    paddingVertical: 12
+  },
+  text: {
+    fontSize: 14,
+    lineHeight: 20,
+    fontFamily: "monospace",
+    includeFontPadding: false
+  },
+  topInset: {
+    paddingTop: 44
+  },
+  bottomInset: {
+    paddingBottom: 44
+  },
+  copyButton: {
+    position: "absolute",
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    borderWidth: 1,
+    paddingHorizontal: 10,
+    paddingVertical: 6
+  },
+  top: {
+    top: 8
+  },
+  bottom: {
+    bottom: 8
+  },
+  left: {
+    left: 8
+  },
+  right: {
+    right: 8
+  },
+  copyButtonText: {
+    fontSize: 12,
+    fontWeight: "600",
+    includeFontPadding: false
+  },
+  disabled: {
+    opacity: 0.55
+  }
+});
+
+// src/components/snippet/snippet.hook.ts
+import { useMemo } from "react";
+import { getSafeThemeColor, withOpacity } from "@xaui/core";
+var useSnippetColors = (themeColor, variant, isDisabled) => {
+  const theme = useXUITheme();
+  return useMemo(() => {
+    const safeThemeColor = getSafeThemeColor(themeColor);
+    const colorScheme = theme.colors[safeThemeColor];
+    const isDark = theme.mode === "dark";
+    const textColor = isDisabled ? withOpacity(theme.colors.foreground, 0.56) : theme.colors.foreground;
+    if (variant === "flat") {
+      return {
+        containerBackground: colorScheme.background,
+        containerBorder: "transparent",
+        text: textColor,
+        copyButtonBackground: withOpacity(colorScheme.main, isDark ? 0.2 : 0.14),
+        copyButtonBorder: "transparent",
+        copyButtonText: colorScheme.main
+      };
+    }
+    if (variant === "light") {
+      return {
+        containerBackground: withOpacity(colorScheme.main, isDark ? 0.12 : 0.08),
+        containerBorder: "transparent",
+        text: textColor,
+        copyButtonBackground: "transparent",
+        copyButtonBorder: "transparent",
+        copyButtonText: colorScheme.main
+      };
+    }
+    return {
+      containerBackground: theme.colors.background,
+      containerBorder: withOpacity(colorScheme.main, isDark ? 0.7 : 0.55),
+      text: textColor,
+      copyButtonBackground: withOpacity(colorScheme.main, isDark ? 0.16 : 0.08),
+      copyButtonBorder: withOpacity(colorScheme.main, isDark ? 0.48 : 0.32),
+      copyButtonText: colorScheme.main
+    };
+  }, [isDisabled, theme, themeColor, variant]);
+};
+var useCopyButtonPositionStyles = (position) => {
+  return useMemo(
+    () => ({
+      isTop: position.startsWith("top"),
+      isLeft: position.endsWith("left")
+    }),
+    [position]
+  );
+};
+
+// src/components/snippet/snippet.tsx
+var copyText = async (text) => {
+  const runtime = globalThis;
+  const writeText = runtime.navigator?.clipboard?.writeText;
+  if (typeof writeText === "function") {
+    await writeText(text);
+    return true;
+  }
+  const modules = NativeModules;
+  const setString = modules.RNCClipboard?.setString ?? modules.Clipboard?.setString;
+  if (typeof setString === "function") {
+    setString(text);
+    return true;
+  }
+  return false;
+};
+var Snippet = ({
+  value,
+  themeColor = "primary",
+  variant = "outlined",
+  radius = "md",
+  copyButtonPosition = "top-right",
+  copyLabel = "Copy",
+  copiedLabel = "Copied",
+  copyResetDelay = 1500,
+  fullWidth = true,
+  isDisabled = false,
+  numberOfLines,
+  fontSize = 14,
+  fontWeight = "400",
+  onCopy,
+  customAppearance
+}) => {
+  const [isCopied, setIsCopied] = React.useState(false);
+  const resetTimerRef = React.useRef(null);
+  const radiusStyles = useBorderRadiusStyles(radius);
+  const colors = useSnippetColors(themeColor, variant, isDisabled);
+  const { isTop, isLeft } = useCopyButtonPositionStyles(copyButtonPosition);
+  React.useEffect(() => {
+    return () => {
+      if (resetTimerRef.current) {
+        clearTimeout(resetTimerRef.current);
+      }
+    };
+  }, []);
+  const handleCopy = React.useCallback(async () => {
+    if (isDisabled) {
+      return;
+    }
+    let isSuccess = false;
+    try {
+      isSuccess = await copyText(value);
+      setIsCopied(isSuccess);
+    } catch {
+      setIsCopied(false);
+    }
+    onCopy?.(value, isSuccess);
+    if (!isSuccess) {
+      return;
+    }
+    if (resetTimerRef.current) {
+      clearTimeout(resetTimerRef.current);
+    }
+    resetTimerRef.current = setTimeout(() => {
+      setIsCopied(false);
+    }, copyResetDelay);
+  }, [copyResetDelay, isDisabled, onCopy, value]);
+  return /* @__PURE__ */ React.createElement(
+    View,
+    {
+      style: [
+        styles.container,
+        !fullWidth && styles.noFullWidth,
+        isDisabled && styles.disabled,
+        customAppearance?.container
+      ]
+    },
+    /* @__PURE__ */ React.createElement(
+      View,
+      {
+        style: [
+          styles.snippet,
+          radiusStyles,
+          {
+            backgroundColor: colors.containerBackground,
+            borderColor: colors.containerBorder
+          }
+        ]
+      },
+      /* @__PURE__ */ React.createElement(
+        Pressable,
+        {
+          onPress: handleCopy,
+          accessibilityRole: "button",
+          accessibilityLabel: isCopied ? copiedLabel : copyLabel,
+          disabled: isDisabled,
+          style: [
+            styles.copyButton,
+            radiusStyles,
+            isTop ? styles.top : styles.bottom,
+            isLeft ? styles.left : styles.right,
+            {
+              backgroundColor: colors.copyButtonBackground,
+              borderColor: colors.copyButtonBorder
+            },
+            customAppearance?.copyButton
+          ]
+        },
+        /* @__PURE__ */ React.createElement(CopyIcon, { size: 14, color: colors.copyButtonText }),
+        /* @__PURE__ */ React.createElement(
+          Text,
+          {
+            style: [
+              styles.copyButtonText,
+              { color: colors.copyButtonText },
+              customAppearance?.copyButtonText
+            ]
+          },
+          isCopied ? copiedLabel : copyLabel
+        )
+      ),
+      /* @__PURE__ */ React.createElement(
+        View,
+        {
+          style: [
+            styles.content,
+            isTop ? styles.topInset : styles.bottomInset,
+            customAppearance?.content
+          ]
+        },
+        /* @__PURE__ */ React.createElement(
+          Text,
+          {
+            selectable: true,
+            numberOfLines,
+            style: [
+              styles.text,
+              {
+                color: colors.text,
+                fontSize,
+                lineHeight: Math.round(fontSize * 1.45),
+                fontWeight
+              },
+              customAppearance?.text
+            ]
+          },
+          value
+        )
+      )
+    )
+  );
+};
+export {
+  Snippet
+};

package/dist/toolbar/index.cjs

@@ -18,24 +18,24 @@ var _reactnativereanimated = require('react-native-reanimated'); var _reactnativ
 var _core = require('@xaui/core');
 var variantMap = {
   floating: {
-    containerHeight: 72,
+    containerHeight: 68,
     containerWidth: "auto",
     iconSize: 26,
     actionSize: 40,
     borderRadius: 56,
     paddingHorizontal: 16,
-    paddingVertical: 16,
+    paddingVertical: 14,
     gap: 0,
     isElevated: true
   },
   docked: {
-    containerHeight: 72,
+    containerHeight: 68,
     containerWidth: "auto",
     iconSize: 26,
     actionSize: 40,
     borderRadius: 0,
     paddingHorizontal: 16,
-    paddingVertical: 16,
+    paddingVertical: 14,
     gap: 0,
     isElevated: false
   },
@@ -46,7 +46,7 @@ var variantMap = {
     actionSize: 40,
     borderRadius: 0,
     paddingHorizontal: 16,
-    paddingVertical: 16,
+    paddingVertical: 14,
     gap: 0,
     isElevated: false
   }
@@ -177,18 +177,25 @@ var Toolbar = ({
   );
   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.withSpring.call(void 0, 0, {
-        damping: 20,
-        stiffness: 300
+      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)
       });
-      opacityValue.value = _reactnativereanimated.withTiming.call(void 0, 1, { duration: 200 });
     } else {
-      translateValue.value = _reactnativereanimated.withSpring.call(void 0, getInitialTranslate(position), {
-        damping: 20,
-        stiffness: 300
+      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)
       });
-      opacityValue.value = _reactnativereanimated.withTiming.call(void 0, 0, { duration: 200 });
     }
   }, [isVisible, position, translateValue, opacityValue]);
   const animatedStyle = _reactnativereanimated.useAnimatedStyle.call(void 0, () => {
@@ -269,13 +276,13 @@ var Toolbar = ({
 function getInitialTranslate(position) {
   switch (position) {
     case "top":
-      return -100;
+      return -24;
     case "bottom":
-      return 100;
+      return 24;
     case "left":
-      return -100;
+      return -24;
     case "right":
-      return 100;
+      return 24;
     default:
       return 0;
   }

package/dist/toolbar/index.js

@@ -7,9 +7,9 @@ import {
 import React, { useEffect } from "react";
 import { View } from "react-native";
 import Animated, {
+  Easing,
   useAnimatedStyle,
   useSharedValue,
-  withSpring,
   withTiming
 } from "react-native-reanimated";
 
@@ -18,24 +18,24 @@ import { useMemo } from "react";
 import { getSafeThemeColor, withOpacity } from "@xaui/core";
 var variantMap = {
   floating: {
-    containerHeight: 72,
+    containerHeight: 68,
     containerWidth: "auto",
     iconSize: 26,
     actionSize: 40,
     borderRadius: 56,
     paddingHorizontal: 16,
-    paddingVertical: 16,
+    paddingVertical: 14,
     gap: 0,
     isElevated: true
   },
   docked: {
-    containerHeight: 72,
+    containerHeight: 68,
     containerWidth: "auto",
     iconSize: 26,
     actionSize: 40,
     borderRadius: 0,
     paddingHorizontal: 16,
-    paddingVertical: 16,
+    paddingVertical: 14,
     gap: 0,
     isElevated: false
   },
@@ -46,7 +46,7 @@ var variantMap = {
     actionSize: 40,
     borderRadius: 0,
     paddingHorizontal: 16,
-    paddingVertical: 16,
+    paddingVertical: 14,
     gap: 0,
     isElevated: false
   }
@@ -177,18 +177,25 @@ var Toolbar = ({
   );
   const opacityValue = useSharedValue(isVisible ? 1 : 0);
   useEffect(() => {
+    const nextTranslate = isVisible ? 0 : getInitialTranslate(position);
     if (isVisible) {
-      translateValue.value = withSpring(0, {
-        damping: 20,
-        stiffness: 300
+      translateValue.value = withTiming(nextTranslate, {
+        duration: 220,
+        easing: Easing.out(Easing.cubic)
+      });
+      opacityValue.value = withTiming(1, {
+        duration: 200,
+        easing: Easing.out(Easing.quad)
       });
-      opacityValue.value = withTiming(1, { duration: 200 });
     } else {
-      translateValue.value = withSpring(getInitialTranslate(position), {
-        damping: 20,
-        stiffness: 300
+      translateValue.value = withTiming(nextTranslate, {
+        duration: 180,
+        easing: Easing.in(Easing.cubic)
+      });
+      opacityValue.value = withTiming(0, {
+        duration: 150,
+        easing: Easing.in(Easing.quad)
       });
-      opacityValue.value = withTiming(0, { duration: 200 });
     }
   }, [isVisible, position, translateValue, opacityValue]);
   const animatedStyle = useAnimatedStyle(() => {
@@ -269,13 +276,13 @@ var Toolbar = ({
 function getInitialTranslate(position) {
   switch (position) {
     case "top":
-      return -100;
+      return -24;
     case "bottom":
-      return 100;
+      return 24;
     case "left":
-      return -100;
+      return -24;
     case "right":
-      return 100;
+      return 24;
     default:
       return 0;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xaui/native",
-  "version": "0.0.31",
+  "version": "0.0.32",
   "description": "Flutter-inspired React Native UI components with native animations powered by React Native Reanimated",
   "keywords": [
     "react-native",
@@ -67,6 +67,11 @@
       "import": "./dist/select/index.js",
       "require": "./dist/select/index.js"
     },
+    "./dialog": {
+      "types": "./dist/dialog/index.d.ts",
+      "import": "./dist/dialog/index.js",
+      "require": "./dist/dialog/index.js"
+    },
     "./divider": {
       "types": "./dist/divider/index.d.ts",
       "import": "./dist/divider/index.js",
@@ -226,6 +231,11 @@
       "types": "./dist/snackbar/index.d.ts",
       "import": "./dist/snackbar/index.js",
       "require": "./dist/snackbar/index.js"
+    },
+    "./snippet": {
+      "types": "./dist/snippet/index.d.ts",
+      "import": "./dist/snippet/index.js",
+      "require": "./dist/snippet/index.js"
     }
   },
   "files": [