@xsolla/xui-image-thumbnail 0.84.0-pr128.1770078557

package/native/index.d.mts

@@ -0,0 +1,44 @@
+import React from 'react';
+
+type ImageThumbnailRatio = "1:1" | "16:9" | "4:3" | "3:2" | "2:3" | "9:16" | "custom";
+type ImageThumbnailOverlay = "none" | "fade" | "dark";
+interface ImageThumbnailProps {
+    /** Image source URL */
+    src: string;
+    /** Alt text for the image */
+    alt?: string;
+    /** Aspect ratio of the thumbnail */
+    ratio?: ImageThumbnailRatio;
+    /** Custom aspect ratio (only used when ratio is 'custom') */
+    customRatio?: number;
+    /** Width of the thumbnail */
+    width?: number | string;
+    /** Height of the thumbnail (overrides ratio if provided) */
+    height?: number | string;
+    /** Border radius */
+    borderRadius?: number;
+    /** Overlay type */
+    overlay?: ImageThumbnailOverlay;
+    /** Content displayed in the center (e.g., play button) */
+    centerContent?: React.ReactNode;
+    /** Content displayed in top-left corner */
+    tagsTopLeft?: React.ReactNode;
+    /** Content displayed in top-right corner */
+    tagsTopRight?: React.ReactNode;
+    /** Content displayed in bottom-left corner */
+    tagsBottomLeft?: React.ReactNode;
+    /** Content displayed in bottom-right corner */
+    tagsBottomRight?: React.ReactNode;
+    /** Click handler */
+    onPress?: () => void;
+    /** Custom className */
+    className?: string;
+    /** Padding for tag positions */
+    tagPadding?: number;
+    /** Gap between tags */
+    tagGap?: number;
+}
+
+declare const ImageThumbnail: React.FC<ImageThumbnailProps>;
+
+export { ImageThumbnail, type ImageThumbnailOverlay, type ImageThumbnailProps, type ImageThumbnailRatio };

package/native/index.d.ts

@@ -0,0 +1,44 @@
+import React from 'react';
+
+type ImageThumbnailRatio = "1:1" | "16:9" | "4:3" | "3:2" | "2:3" | "9:16" | "custom";
+type ImageThumbnailOverlay = "none" | "fade" | "dark";
+interface ImageThumbnailProps {
+    /** Image source URL */
+    src: string;
+    /** Alt text for the image */
+    alt?: string;
+    /** Aspect ratio of the thumbnail */
+    ratio?: ImageThumbnailRatio;
+    /** Custom aspect ratio (only used when ratio is 'custom') */
+    customRatio?: number;
+    /** Width of the thumbnail */
+    width?: number | string;
+    /** Height of the thumbnail (overrides ratio if provided) */
+    height?: number | string;
+    /** Border radius */
+    borderRadius?: number;
+    /** Overlay type */
+    overlay?: ImageThumbnailOverlay;
+    /** Content displayed in the center (e.g., play button) */
+    centerContent?: React.ReactNode;
+    /** Content displayed in top-left corner */
+    tagsTopLeft?: React.ReactNode;
+    /** Content displayed in top-right corner */
+    tagsTopRight?: React.ReactNode;
+    /** Content displayed in bottom-left corner */
+    tagsBottomLeft?: React.ReactNode;
+    /** Content displayed in bottom-right corner */
+    tagsBottomRight?: React.ReactNode;
+    /** Click handler */
+    onPress?: () => void;
+    /** Custom className */
+    className?: string;
+    /** Padding for tag positions */
+    tagPadding?: number;
+    /** Gap between tags */
+    tagGap?: number;
+}
+
+declare const ImageThumbnail: React.FC<ImageThumbnailProps>;
+
+export { ImageThumbnail, type ImageThumbnailOverlay, type ImageThumbnailProps, type ImageThumbnailRatio };

package/native/index.js

@@ -0,0 +1,621 @@
+"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/index.tsx
+var index_exports = {};
+__export(index_exports, {
+  ImageThumbnail: () => ImageThumbnail
+});
+module.exports = __toCommonJS(index_exports);
+
+// ../primitives-native/src/Box.tsx
+var import_react_native = require("react-native");
+var import_jsx_runtime = require("react/jsx-runtime");
+var Box = ({
+  children,
+  onPress,
+  onLayout,
+  onMoveShouldSetResponder,
+  onResponderGrant,
+  onResponderMove,
+  onResponderRelease,
+  onResponderTerminate,
+  backgroundColor,
+  borderColor,
+  borderWidth,
+  borderBottomWidth,
+  borderBottomColor,
+  borderTopWidth,
+  borderTopColor,
+  borderLeftWidth,
+  borderLeftColor,
+  borderRightWidth,
+  borderRightColor,
+  borderRadius,
+  borderStyle,
+  height,
+  padding,
+  paddingHorizontal,
+  paddingVertical,
+  margin,
+  marginTop,
+  marginBottom,
+  marginLeft,
+  marginRight,
+  flexDirection,
+  alignItems,
+  justifyContent,
+  position,
+  top,
+  bottom,
+  left,
+  right,
+  width,
+  flex,
+  overflow,
+  zIndex,
+  hoverStyle,
+  pressStyle,
+  style,
+  "data-testid": dataTestId,
+  testID,
+  as,
+  src,
+  alt,
+  ...rest
+}) => {
+  const getContainerStyle = (pressed) => ({
+    backgroundColor: pressed && pressStyle?.backgroundColor ? pressStyle.backgroundColor : backgroundColor,
+    borderColor,
+    borderWidth,
+    borderBottomWidth,
+    borderBottomColor,
+    borderTopWidth,
+    borderTopColor,
+    borderLeftWidth,
+    borderLeftColor,
+    borderRightWidth,
+    borderRightColor,
+    borderRadius,
+    borderStyle,
+    overflow,
+    zIndex,
+    height,
+    width,
+    padding,
+    paddingHorizontal,
+    paddingVertical,
+    margin,
+    marginTop,
+    marginBottom,
+    marginLeft,
+    marginRight,
+    flexDirection,
+    alignItems,
+    justifyContent,
+    position,
+    top,
+    bottom,
+    left,
+    right,
+    flex,
+    ...style
+  });
+  const finalTestID = dataTestId || testID;
+  const {
+    role,
+    tabIndex,
+    onKeyDown,
+    onKeyUp,
+    "aria-label": _ariaLabel,
+    "aria-labelledby": _ariaLabelledBy,
+    "aria-current": _ariaCurrent,
+    "aria-disabled": _ariaDisabled,
+    "aria-live": _ariaLive,
+    className,
+    "data-testid": _dataTestId,
+    ...nativeRest
+  } = rest;
+  if (as === "img" && src) {
+    const imageStyle = {
+      width,
+      height,
+      borderRadius,
+      position,
+      top,
+      bottom,
+      left,
+      right,
+      ...style
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_react_native.Image,
+      {
+        source: { uri: src },
+        style: imageStyle,
+        testID: finalTestID,
+        resizeMode: "cover",
+        ...nativeRest
+      }
+    );
+  }
+  if (onPress) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_react_native.Pressable,
+      {
+        onPress,
+        onLayout,
+        onMoveShouldSetResponder,
+        onResponderGrant,
+        onResponderMove,
+        onResponderRelease,
+        onResponderTerminate,
+        style: ({ pressed }) => getContainerStyle(pressed),
+        testID: finalTestID,
+        ...nativeRest,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_react_native.View,
+    {
+      style: getContainerStyle(),
+      testID: finalTestID,
+      onLayout,
+      onMoveShouldSetResponder,
+      onResponderGrant,
+      onResponderMove,
+      onResponderRelease,
+      onResponderTerminate,
+      ...nativeRest,
+      children
+    }
+  );
+};
+
+// ../primitives-native/src/Text.tsx
+var import_react_native2 = require("react-native");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+
+// ../primitives-native/src/Spinner.tsx
+var import_react_native3 = require("react-native");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Spinner = ({
+  color,
+  size,
+  role,
+  "aria-label": ariaLabel,
+  "aria-live": ariaLive,
+  testID
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    import_react_native3.View,
+    {
+      accessible: true,
+      accessibilityRole: role === "status" ? "none" : void 0,
+      accessibilityLabel: ariaLabel,
+      accessibilityLiveRegion: ariaLive === "polite" ? "polite" : ariaLive === "assertive" ? "assertive" : "none",
+      testID,
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        import_react_native3.ActivityIndicator,
+        {
+          color,
+          size: typeof size === "number" ? size : "small"
+        }
+      )
+    }
+  );
+};
+Spinner.displayName = "Spinner";
+
+// ../primitives-native/src/Icon.tsx
+var import_react = __toESM(require("react"));
+var import_react_native4 = require("react-native");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+
+// ../primitives-native/src/Divider.tsx
+var import_react_native5 = require("react-native");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+
+// ../primitives-native/src/Input.tsx
+var import_react2 = require("react");
+var import_react_native6 = require("react-native");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var keyboardTypeMap = {
+  text: "default",
+  number: "numeric",
+  email: "email-address",
+  tel: "phone-pad",
+  url: "url",
+  decimal: "decimal-pad"
+};
+var inputModeToKeyboardType = {
+  none: "default",
+  text: "default",
+  decimal: "decimal-pad",
+  numeric: "number-pad",
+  tel: "phone-pad",
+  search: "default",
+  email: "email-address",
+  url: "url"
+};
+var autoCompleteToTextContentType = {
+  "one-time-code": "oneTimeCode",
+  email: "emailAddress",
+  username: "username",
+  password: "password",
+  "new-password": "newPassword",
+  tel: "telephoneNumber",
+  "postal-code": "postalCode",
+  name: "name"
+};
+var InputPrimitive = (0, import_react2.forwardRef)(
+  ({
+    value,
+    placeholder,
+    onChange,
+    onChangeText,
+    onFocus,
+    onBlur,
+    onKeyDown,
+    disabled,
+    secureTextEntry,
+    style,
+    color,
+    fontSize,
+    placeholderTextColor,
+    maxLength,
+    type,
+    inputMode,
+    autoComplete,
+    id,
+    "aria-describedby": ariaDescribedBy,
+    "aria-label": ariaLabel,
+    "aria-disabled": ariaDisabled,
+    "data-testid": dataTestId
+  }, ref) => {
+    const handleChangeText = (text) => {
+      onChangeText?.(text);
+      if (onChange) {
+        const syntheticEvent = {
+          target: { value: text },
+          currentTarget: { value: text },
+          type: "change",
+          nativeEvent: { text },
+          preventDefault: () => {
+          },
+          stopPropagation: () => {
+          },
+          isTrusted: false
+        };
+        onChange(syntheticEvent);
+      }
+    };
+    const keyboardType = inputMode ? inputModeToKeyboardType[inputMode] || "default" : type ? keyboardTypeMap[type] || "default" : "default";
+    const textContentType = autoComplete ? autoCompleteToTextContentType[autoComplete] : void 0;
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      import_react_native6.TextInput,
+      {
+        ref,
+        value,
+        placeholder,
+        onChangeText: handleChangeText,
+        onFocus,
+        onBlur,
+        onKeyPress: (e) => {
+          if (onKeyDown) {
+            onKeyDown({
+              key: e.nativeEvent.key,
+              preventDefault: () => {
+              }
+            });
+          }
+        },
+        editable: !disabled,
+        secureTextEntry: secureTextEntry || type === "password",
+        keyboardType,
+        textContentType,
+        style: [
+          {
+            color,
+            fontSize: typeof fontSize === "number" ? fontSize : void 0,
+            flex: 1,
+            padding: 0,
+            textAlign: style?.textAlign || "left"
+          },
+          style
+        ],
+        placeholderTextColor,
+        maxLength,
+        testID: dataTestId || id,
+        accessibilityLabel: ariaLabel,
+        accessibilityHint: ariaDescribedBy,
+        accessibilityState: {
+          disabled: disabled || ariaDisabled
+        },
+        accessible: true
+      }
+    );
+  }
+);
+InputPrimitive.displayName = "InputPrimitive";
+
+// ../primitives-native/src/TextArea.tsx
+var import_react3 = require("react");
+var import_react_native7 = require("react-native");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var TextAreaPrimitive = (0, import_react3.forwardRef)(
+  ({
+    value,
+    placeholder,
+    onChange,
+    onChangeText,
+    onFocus,
+    onBlur,
+    onKeyDown,
+    disabled,
+    style,
+    color,
+    fontSize,
+    placeholderTextColor,
+    maxLength,
+    rows,
+    id,
+    "aria-describedby": ariaDescribedBy,
+    "aria-label": ariaLabel,
+    "aria-disabled": ariaDisabled,
+    "data-testid": dataTestId
+  }, ref) => {
+    const handleChangeText = (text) => {
+      onChangeText?.(text);
+      if (onChange) {
+        const syntheticEvent = {
+          target: { value: text },
+          currentTarget: { value: text },
+          type: "change",
+          nativeEvent: { text },
+          preventDefault: () => {
+          },
+          stopPropagation: () => {
+          },
+          isTrusted: false
+        };
+        onChange(syntheticEvent);
+      }
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      import_react_native7.TextInput,
+      {
+        ref,
+        value,
+        placeholder,
+        onChangeText: handleChangeText,
+        onFocus,
+        onBlur,
+        onKeyPress: (e) => {
+          if (onKeyDown) {
+            onKeyDown({
+              key: e.nativeEvent.key,
+              preventDefault: () => {
+              }
+            });
+          }
+        },
+        editable: !disabled,
+        multiline: true,
+        numberOfLines: rows || 4,
+        style: [
+          {
+            color,
+            fontSize: typeof fontSize === "number" ? fontSize : void 0,
+            flex: 1,
+            padding: 0,
+            textAlignVertical: "top",
+            textAlign: style?.textAlign || "left"
+          },
+          style
+        ],
+        placeholderTextColor,
+        maxLength,
+        testID: dataTestId || id,
+        accessibilityLabel: ariaLabel,
+        accessibilityHint: ariaDescribedBy,
+        accessibilityState: {
+          disabled: disabled || ariaDisabled
+        },
+        accessible: true
+      }
+    );
+  }
+);
+TextAreaPrimitive.displayName = "TextAreaPrimitive";
+
+// src/ImageThumbnail.tsx
+var import_xui_core = require("@xsolla/xui-core");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var ratioMap = {
+  "1:1": 1,
+  "16:9": 16 / 9,
+  "4:3": 4 / 3,
+  "3:2": 3 / 2,
+  "2:3": 2 / 3,
+  "9:16": 9 / 16
+};
+var ImageThumbnail = ({
+  src,
+  alt = "",
+  ratio = "16:9",
+  customRatio,
+  width = "100%",
+  height,
+  borderRadius = 4,
+  overlay = "fade",
+  centerContent,
+  tagsTopLeft,
+  tagsTopRight,
+  tagsBottomLeft,
+  tagsBottomRight,
+  onPress,
+  className,
+  tagPadding = 8,
+  tagGap = 4
+}) => {
+  const { theme } = (0, import_xui_core.useDesignSystem)();
+  const aspectRatio = ratio === "custom" ? customRatio : ratioMap[ratio];
+  const hasOverlay = overlay !== "none";
+  const wrapperProps = onPress ? { onPress } : {};
+  const containerStyle = import_xui_core.isWeb ? {
+    aspectRatio: height ? void 0 : aspectRatio,
+    borderRadius,
+    overflow: "hidden"
+  } : {
+    aspectRatio: height ? void 0 : aspectRatio,
+    borderRadius,
+    overflow: "hidden"
+  };
+  const overlayStyle = import_xui_core.isWeb ? overlay === "fade" ? {
+    background: "linear-gradient(to top, rgba(0, 0, 0, 0.48) 0%, transparent 100%)"
+  } : overlay === "dark" ? {
+    backgroundColor: "rgba(0, 0, 0, 0.48)"
+  } : void 0 : overlay === "fade" || overlay === "dark" ? {
+    backgroundColor: "rgba(0, 0, 0, 0.24)"
+  } : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    Box,
+    {
+      className,
+      width,
+      height,
+      position: "relative",
+      overflow: "hidden",
+      borderRadius,
+      style: containerStyle,
+      ...wrapperProps,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          Box,
+          {
+            as: "img",
+            src,
+            alt,
+            position: "absolute",
+            top: 0,
+            left: 0,
+            width: "100%",
+            height: "100%",
+            style: import_xui_core.isWeb ? { objectFit: "cover" } : void 0
+          }
+        ),
+        hasOverlay && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          Box,
+          {
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            style: overlayStyle
+          }
+        ),
+        centerContent && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          Box,
+          {
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            alignItems: "center",
+            justifyContent: "center",
+            zIndex: 10,
+            children: centerContent
+          }
+        ),
+        tagsTopLeft && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          Box,
+          {
+            position: "absolute",
+            top: tagPadding,
+            left: tagPadding,
+            flexDirection: "column",
+            gap: tagGap,
+            alignItems: "flex-start",
+            zIndex: 10,
+            children: tagsTopLeft
+          }
+        ),
+        tagsTopRight && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          Box,
+          {
+            position: "absolute",
+            top: tagPadding,
+            right: tagPadding,
+            flexDirection: "column",
+            gap: tagGap,
+            alignItems: "flex-end",
+            zIndex: 10,
+            children: tagsTopRight
+          }
+        ),
+        tagsBottomLeft && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          Box,
+          {
+            position: "absolute",
+            bottom: tagPadding,
+            left: tagPadding,
+            flexDirection: "column",
+            gap: tagGap,
+            alignItems: "flex-start",
+            zIndex: 10,
+            children: tagsBottomLeft
+          }
+        ),
+        tagsBottomRight && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          Box,
+          {
+            position: "absolute",
+            bottom: tagPadding,
+            right: tagPadding,
+            flexDirection: "column",
+            gap: tagGap,
+            alignItems: "flex-end",
+            zIndex: 10,
+            children: tagsBottomRight
+          }
+        )
+      ]
+    }
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ImageThumbnail
+});
+//# sourceMappingURL=index.js.map