@xaui/native 0.0.31 → 0.0.32

package/dist/snippet/index.cjs

@@ -0,0 +1,282 @@
+"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-HSPTLUFA.cjs');
+
+
+
+var _chunkOQ2BLOOGcjs = require('../chunk-OQ2BLOOG.cjs');
+
+// src/components/snippet/snippet.tsx
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+var _reactnative = require('react-native');
+var _icons = require('@xaui/icons');
+
+// src/components/snippet/snippet.style.ts
+
+var styles = _reactnative.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
+
+var _core = require('@xaui/core');
+var useSnippetColors = (themeColor, variant, isDisabled) => {
+  const theme = _chunkOQ2BLOOGcjs.useXUITheme.call(void 0, );
+  return _react.useMemo.call(void 0, () => {
+    const safeThemeColor = _core.getSafeThemeColor.call(void 0, themeColor);
+    const colorScheme = theme.colors[safeThemeColor];
+    const isDark = theme.mode === "dark";
+    const textColor = isDisabled ? _core.withOpacity.call(void 0, theme.colors.foreground, 0.56) : theme.colors.foreground;
+    if (variant === "flat") {
+      return {
+        containerBackground: colorScheme.background,
+        containerBorder: "transparent",
+        text: textColor,
+        copyButtonBackground: _core.withOpacity.call(void 0, colorScheme.main, isDark ? 0.2 : 0.14),
+        copyButtonBorder: "transparent",
+        copyButtonText: colorScheme.main
+      };
+    }
+    if (variant === "light") {
+      return {
+        containerBackground: _core.withOpacity.call(void 0, colorScheme.main, isDark ? 0.12 : 0.08),
+        containerBorder: "transparent",
+        text: textColor,
+        copyButtonBackground: "transparent",
+        copyButtonBorder: "transparent",
+        copyButtonText: colorScheme.main
+      };
+    }
+    return {
+      containerBackground: theme.colors.background,
+      containerBorder: _core.withOpacity.call(void 0, colorScheme.main, isDark ? 0.7 : 0.55),
+      text: textColor,
+      copyButtonBackground: _core.withOpacity.call(void 0, colorScheme.main, isDark ? 0.16 : 0.08),
+      copyButtonBorder: _core.withOpacity.call(void 0, colorScheme.main, isDark ? 0.48 : 0.32),
+      copyButtonText: colorScheme.main
+    };
+  }, [isDisabled, theme, themeColor, variant]);
+};
+var useCopyButtonPositionStyles = (position) => {
+  return _react.useMemo.call(void 0, 
+    () => ({
+      isTop: position.startsWith("top"),
+      isLeft: position.endsWith("left")
+    }),
+    [position]
+  );
+};
+
+// src/components/snippet/snippet.tsx
+var copyText = async (text) => {
+  const runtime = globalThis;
+  const writeText = _optionalChain([runtime, 'access', _ => _.navigator, 'optionalAccess', _2 => _2.clipboard, 'optionalAccess', _3 => _3.writeText]);
+  if (typeof writeText === "function") {
+    await writeText(text);
+    return true;
+  }
+  const modules = _reactnative.NativeModules;
+  const setString = _nullishCoalesce(_optionalChain([modules, 'access', _4 => _4.RNCClipboard, 'optionalAccess', _5 => _5.setString]), () => ( _optionalChain([modules, 'access', _6 => _6.Clipboard, 'optionalAccess', _7 => _7.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] = _react2.default.useState(false);
+  const resetTimerRef = _react2.default.useRef(null);
+  const radiusStyles = _chunkOQ2BLOOGcjs.useBorderRadiusStyles.call(void 0, radius);
+  const colors = useSnippetColors(themeColor, variant, isDisabled);
+  const { isTop, isLeft } = useCopyButtonPositionStyles(copyButtonPosition);
+  _react2.default.useEffect(() => {
+    return () => {
+      if (resetTimerRef.current) {
+        clearTimeout(resetTimerRef.current);
+      }
+    };
+  }, []);
+  const handleCopy = _react2.default.useCallback(async () => {
+    if (isDisabled) {
+      return;
+    }
+    let isSuccess = false;
+    try {
+      isSuccess = await copyText(value);
+      setIsCopied(isSuccess);
+    } catch (e) {
+      setIsCopied(false);
+    }
+    _optionalChain([onCopy, 'optionalCall', _8 => _8(value, isSuccess)]);
+    if (!isSuccess) {
+      return;
+    }
+    if (resetTimerRef.current) {
+      clearTimeout(resetTimerRef.current);
+    }
+    resetTimerRef.current = setTimeout(() => {
+      setIsCopied(false);
+    }, copyResetDelay);
+  }, [copyResetDelay, isDisabled, onCopy, value]);
+  return /* @__PURE__ */ _react2.default.createElement(
+    _reactnative.View,
+    {
+      style: [
+        styles.container,
+        !fullWidth && styles.noFullWidth,
+        isDisabled && styles.disabled,
+        _optionalChain([customAppearance, 'optionalAccess', _9 => _9.container])
+      ]
+    },
+    /* @__PURE__ */ _react2.default.createElement(
+      _reactnative.View,
+      {
+        style: [
+          styles.snippet,
+          radiusStyles,
+          {
+            backgroundColor: colors.containerBackground,
+            borderColor: colors.containerBorder
+          }
+        ]
+      },
+      /* @__PURE__ */ _react2.default.createElement(
+        _reactnative.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
+            },
+            _optionalChain([customAppearance, 'optionalAccess', _10 => _10.copyButton])
+          ]
+        },
+        /* @__PURE__ */ _react2.default.createElement(_icons.CopyIcon, { size: 14, color: colors.copyButtonText }),
+        /* @__PURE__ */ _react2.default.createElement(
+          _reactnative.Text,
+          {
+            style: [
+              styles.copyButtonText,
+              { color: colors.copyButtonText },
+              _optionalChain([customAppearance, 'optionalAccess', _11 => _11.copyButtonText])
+            ]
+          },
+          isCopied ? copiedLabel : copyLabel
+        )
+      ),
+      /* @__PURE__ */ _react2.default.createElement(
+        _reactnative.View,
+        {
+          style: [
+            styles.content,
+            isTop ? styles.topInset : styles.bottomInset,
+            _optionalChain([customAppearance, 'optionalAccess', _12 => _12.content])
+          ]
+        },
+        /* @__PURE__ */ _react2.default.createElement(
+          _reactnative.Text,
+          {
+            selectable: true,
+            numberOfLines,
+            style: [
+              styles.text,
+              {
+                color: colors.text,
+                fontSize,
+                lineHeight: Math.round(fontSize * 1.45),
+                fontWeight
+              },
+              _optionalChain([customAppearance, 'optionalAccess', _13 => _13.text])
+            ]
+          },
+          value
+        )
+      )
+    )
+  );
+};
+
+
+exports.Snippet = Snippet;

package/dist/snippet/index.d.cts

@@ -0,0 +1,90 @@
+import React from 'react';
+import { TextStyle, StyleProp, ViewStyle } from 'react-native';
+import { T as ThemeColor, R as Radius } from '../index-DyU3sW3_.cjs';
+
+type SnippetVariant = 'outlined' | 'flat' | 'light';
+type CopyButtonPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+type SnippetCustomAppearance = {
+    container?: StyleProp<ViewStyle>;
+    content?: StyleProp<ViewStyle>;
+    text?: StyleProp<TextStyle>;
+    copyButton?: StyleProp<ViewStyle>;
+    copyButtonText?: StyleProp<TextStyle>;
+};
+type SnippetProps = {
+    /**
+     * Text content displayed in the snippet.
+     */
+    value: string;
+    /**
+     * Theme color used for variant styling.
+     * @default 'primary'
+     */
+    themeColor?: ThemeColor;
+    /**
+     * Visual style variant.
+     * @default 'outlined'
+     */
+    variant?: SnippetVariant;
+    /**
+     * Snippet border radius.
+     * @default 'md'
+     */
+    radius?: Radius;
+    /**
+     * Position of the copy button in the snippet container.
+     * @default 'top-right'
+     */
+    copyButtonPosition?: CopyButtonPosition;
+    /**
+     * Copy button label.
+     * @default 'Copy'
+     */
+    copyLabel?: string;
+    /**
+     * Label shown after a successful copy action.
+     * @default 'Copied'
+     */
+    copiedLabel?: string;
+    /**
+     * Delay in milliseconds before reverting copied state.
+     * @default 1500
+     */
+    copyResetDelay?: number;
+    /**
+     * Whether the snippet should occupy all available width.
+     * @default true
+     */
+    fullWidth?: boolean;
+    /**
+     * Whether the snippet is disabled.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Number of lines to clamp the snippet text.
+     */
+    numberOfLines?: number;
+    /**
+     * Font size for snippet text.
+     * @default 14
+     */
+    fontSize?: number;
+    /**
+     * Font weight for snippet text.
+     * @default '400'
+     */
+    fontWeight?: TextStyle['fontWeight'];
+    /**
+     * Callback fired after copy action.
+     */
+    onCopy?: (value: string, isSuccess: boolean) => void;
+    /**
+     * Optional custom styles for snippet parts.
+     */
+    customAppearance?: SnippetCustomAppearance;
+};
+
+declare const Snippet: React.FC<SnippetProps>;
+
+export { type CopyButtonPosition, Snippet, type SnippetCustomAppearance, type SnippetProps, type SnippetVariant };

package/dist/snippet/index.d.ts

@@ -0,0 +1,90 @@
+import React from 'react';
+import { TextStyle, StyleProp, ViewStyle } from 'react-native';
+import { T as ThemeColor, R as Radius } from '../index-DyU3sW3_.js';
+
+type SnippetVariant = 'outlined' | 'flat' | 'light';
+type CopyButtonPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+type SnippetCustomAppearance = {
+    container?: StyleProp<ViewStyle>;
+    content?: StyleProp<ViewStyle>;
+    text?: StyleProp<TextStyle>;
+    copyButton?: StyleProp<ViewStyle>;
+    copyButtonText?: StyleProp<TextStyle>;
+};
+type SnippetProps = {
+    /**
+     * Text content displayed in the snippet.
+     */
+    value: string;
+    /**
+     * Theme color used for variant styling.
+     * @default 'primary'
+     */
+    themeColor?: ThemeColor;
+    /**
+     * Visual style variant.
+     * @default 'outlined'
+     */
+    variant?: SnippetVariant;
+    /**
+     * Snippet border radius.
+     * @default 'md'
+     */
+    radius?: Radius;
+    /**
+     * Position of the copy button in the snippet container.
+     * @default 'top-right'
+     */
+    copyButtonPosition?: CopyButtonPosition;
+    /**
+     * Copy button label.
+     * @default 'Copy'
+     */
+    copyLabel?: string;
+    /**
+     * Label shown after a successful copy action.
+     * @default 'Copied'
+     */
+    copiedLabel?: string;
+    /**
+     * Delay in milliseconds before reverting copied state.
+     * @default 1500
+     */
+    copyResetDelay?: number;
+    /**
+     * Whether the snippet should occupy all available width.
+     * @default true
+     */
+    fullWidth?: boolean;
+    /**
+     * Whether the snippet is disabled.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Number of lines to clamp the snippet text.
+     */
+    numberOfLines?: number;
+    /**
+     * Font size for snippet text.
+     * @default 14
+     */
+    fontSize?: number;
+    /**
+     * Font weight for snippet text.
+     * @default '400'
+     */
+    fontWeight?: TextStyle['fontWeight'];
+    /**
+     * Callback fired after copy action.
+     */
+    onCopy?: (value: string, isSuccess: boolean) => void;
+    /**
+     * Optional custom styles for snippet parts.
+     */
+    customAppearance?: SnippetCustomAppearance;
+};
+
+declare const Snippet: React.FC<SnippetProps>;
+
+export { type CopyButtonPosition, Snippet, type SnippetCustomAppearance, type SnippetProps, type SnippetVariant };