related-ui-components 1.9.4 → 1.9.6

package/lib/commonjs/components/RedemptionOption/README.md

@@ -1,148 +0,0 @@
-# RedemptionOption Component
-
-A flexible, customizable touchable option component for React Native applications with support for icons, vertical/horizontal layouts, active states, and extensive styling options.
-
-## Basic Usage
-
-```jsx
-import React from 'react';
-import { View } from 'react-native';
-import { RedemptionOption } from '@your-org/component-library';
-import { GiftIcon } from '@your-org/icons';
-
-const RewardsScreen = () => {
-  return (
-    <View style={{ padding: 16 }}>
-      <RedemptionOption
-        icon={<GiftIcon size={24} color="#FFFFFF" />}
-        text="Redeem Points"
-        onPress={() => console.log('Option pressed')}
-      />
-    </View>
-  );
-};
-
-export default RewardsScreen;
-```
-
-## Props
-
-The `RedemptionOption` component provides extensive customization options through its props.
-
-### Core Properties
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `icon` | `React.ReactNode` | ✅ | - | Icon component to display in the option |
-| `text` | `string` | ✅ | - | Text label to display with the icon |
-
-### Layout & Appearance Properties
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `orientation` | `"vertical" \| "horizontal"` | ❌ | `"vertical"` | Determines the layout direction of icon and text |
-| `backgroundColor` | `string` | ❌ | theme.primary | Background color of the option |
-| `textColor` | `string` | ❌ | theme.secondary | Color of the text label |
-| `width` | `number \| string` | ❌ | - | Width of the option component |
-| `height` | `number \| string` | ❌ | - | Height of the option component |
-| `borderRadius` | `number` | ❌ | `8` | Corner radius of the option component |
-| `padding` | `number` | ❌ | `12` | Padding inside the option component |
-| `fontSize` | `number` | ❌ | `14` | Base font size for the text (actual size will be 90% of this value) |
-
-### State Properties
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `disabled` | `boolean` | ❌ | `false` | Whether the option is disabled (reduces opacity and prevents interaction) |
-| `isActive` | `boolean` | ❌ | `false` | Whether the option is in active state (adds a border) |
-| `activeOpacityValue` | `number` | ❌ | `0.7` | The opacity value when the button is pressed |
-
-### Style Customization
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `containerStyle` | `StyleProp<ViewStyle>` | ❌ | - | Style for the outer container |
-| `textStyle` | `StyleProp<TextStyle>` | ❌ | - | Style for the text label |
-| `iconContainerStyle` | `StyleProp<ViewStyle>` | ❌ | - | Style for the container around the icon |
-
-### Behavior Props
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `onPress` | `() => void` | ❌ | - | Function to call when the option is pressed |
-
-## Examples
-
-### Vertical Layout (Default)
-
-```jsx
-<RedemptionOption
-  icon={<CoinIcon size={24} color="#FFD700" />}
-  text="Redeem Coins"
-  onPress={() => handleRedemption('coins')}
-  backgroundColor="#2C3E50"
-  textColor="#FFFFFF"
-/>
-```
-
-### Horizontal Layout
-
-```jsx
-<RedemptionOption
-  icon={<TicketIcon size={20} color="#FF5722" />}
-  text="Movie Tickets"
-  orientation="horizontal"
-  onPress={() => handleRedemption('tickets')}
-  width="100%"
-  padding={16}
-/>
-```
-
-### Active State
-
-```jsx
-<RedemptionOption
-  icon={<StarIcon size={22} color="#FFD700" />}
-  text="Premium Rewards"
-  isActive={selectedReward === 'premium'}
-  onPress={() => setSelectedReward('premium')}
-  backgroundColor="#1E88E5"
-  textColor="#FFFFFF"
-/>
-```
-
-### Disabled State
-
-```jsx
-<RedemptionOption
-  icon={<LockIcon size={20} color="#9E9E9E" />}
-  text="Locked Reward"
-  disabled={!hasEnoughPoints}
-  onPress={() => handleRedemption('locked')}
-  backgroundColor="#ECEFF1"
-  textColor="#757575"
-/>
-```
-
-### Custom Styling
-
-```jsx
-<RedemptionOption
-  icon={<GiftIcon size={28} color="#E91E63" />}
-  text="Special Offer"
-  containerStyle={{
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.3,
-    shadowRadius: 4,
-    elevation: 5,
-  }}
-  iconContainerStyle={{
-    backgroundColor: 'rgba(233, 30, 99, 0.1)', 
-    borderRadius: 20,
-    padding: 8
-  }}
-  textStyle={{ fontWeight: 'bold', letterSpacing: 0.5 }}
-  onPress={() => handleSpecialOffer()}
-/>
-```

package/lib/commonjs/components/RedemptionOption/RedemptionOption.js

@@ -1,132 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _index = require("../../theme/index.js");
-var _react = _interopRequireDefault(require("react"));
-var _reactNative = require("react-native");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const RedemptionOption = ({
-  icon,
-  text,
-  orientation = "vertical",
-  backgroundColor,
-  textColor,
-  width,
-  height,
-  borderRadius = 8,
-  padding = 12,
-  fontSize = 14,
-  disabled = false,
-  isActive = false,
-  onPress,
-  containerStyle,
-  textStyle,
-  iconContainerStyle,
-  activeOpacityValue = 0.7,
-  isRTL
-}) => {
-  const {
-    theme,
-    isRTL: rtl
-  } = (0, _index.useTheme)();
-  isRTL = isRTL || rtl;
-  textColor = textColor || theme.onSurface;
-
-  // Dynamic styles based on props
-  let dynamicContainerStyle = {
-    backgroundColor: backgroundColor || theme.surface,
-    borderRadius,
-    padding,
-    borderWidth: isActive ? 2 : 0,
-    borderColor: isActive ? textColor : undefined
-  };
-  if (width) dynamicContainerStyle.width = width;
-  if (height) dynamicContainerStyle.height = height;
-  const dynamicTextStyle = {
-    color: textColor,
-    fontSize: fontSize * 0.9,
-    lineHeight: fontSize * 1.1
-  };
-
-  // Determine horizontal flex direction based on RTL
-  const horizontalDirection = {
-    flexDirection: isRTL ? 'row-reverse' : 'row',
-    justifyContent: "flex-start",
-    alignItems: "center"
-  };
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
-    style: [styles.container, orientation === "vertical" ? styles.vertical : horizontalDirection, dynamicContainerStyle, disabled && styles.disabled, containerStyle],
-    onPress: onPress,
-    disabled: disabled,
-    activeOpacity: activeOpacityValue,
-    accessibilityRole: "button",
-    accessibilityState: {
-      disabled,
-      selected: isActive
-    },
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: [styles.iconContainer, orientation === "horizontal" && (isRTL ? {
-        marginLeft: 12,
-        marginRight: 0
-      } : {
-        marginRight: 12,
-        marginLeft: 0
-      }), iconContainerStyle],
-      children: icon
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: {
-        minHeight: 40,
-        justifyContent: "center"
-      },
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: [styles.text, orientation === "horizontal" ? {} : styles.textVertical, dynamicTextStyle, textStyle],
-        numberOfLines: 2,
-        ellipsizeMode: "tail",
-        adjustsFontSizeToFit: orientation === "vertical",
-        minimumFontScale: 0.8,
-        children: text
-      })
-    })]
-  });
-};
-const styles = _reactNative.StyleSheet.create({
-  container: {
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  vertical: {
-    flexDirection: "column",
-    justifyContent: "center"
-  },
-  horizontal: {
-    // Base horizontal style is now handled dynamically with RTL support
-    flexDirection: "row",
-    justifyContent: "flex-start",
-    alignItems: "center"
-  },
-  iconContainer: {
-    // marginBottom: 8,
-    justifyContent: "center",
-    alignItems: "center"
-  },
-  iconHorizontal: {
-    // This is now handled dynamically with RTL support
-    marginBottom: 0,
-    marginRight: 12
-  },
-  text: {
-    fontWeight: "500"
-  },
-  textVertical: {
-    textAlign: "center"
-  },
-  disabled: {
-    opacity: 0.6
-  }
-});
-var _default = exports.default = RedemptionOption;
-//# sourceMappingURL=RedemptionOption.js.map

package/lib/commonjs/components/RedemptionOption/RedemptionOption.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_index","require","_react","_interopRequireDefault","_reactNative","_jsxRuntime","e","__esModule","default","RedemptionOption","icon","text","orientation","backgroundColor","textColor","width","height","borderRadius","padding","fontSize","disabled","isActive","onPress","containerStyle","textStyle","iconContainerStyle","activeOpacityValue","isRTL","theme","rtl","useTheme","onSurface","dynamicContainerStyle","surface","borderWidth","borderColor","undefined","dynamicTextStyle","color","lineHeight","horizontalDirection","flexDirection","justifyContent","alignItems","jsxs","TouchableOpacity","style","styles","container","vertical","activeOpacity","accessibilityRole","accessibilityState","selected","children","jsx","View","iconContainer","marginLeft","marginRight","minHeight","Text","textVertical","numberOfLines","ellipsizeMode","adjustsFontSizeToFit","minimumFontScale","StyleSheet","create","horizontal","iconHorizontal","marginBottom","fontWeight","textAlign","opacity","_default","exports"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/RedemptionOption/RedemptionOption.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/components/RedemptionOption/index.js

@@ -1,29 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _exportNames = {
-  RedemptionOption: true
-};
-Object.defineProperty(exports, "RedemptionOption", {
-  enumerable: true,
-  get: function () {
-    return _RedemptionOption.default;
-  }
-});
-var _RedemptionOption = _interopRequireWildcard(require("./RedemptionOption.js"));
-Object.keys(_RedemptionOption).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _RedemptionOption[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _RedemptionOption[key];
-    }
-  });
-});
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-//# sourceMappingURL=index.js.map

package/lib/commonjs/components/RedemptionOption/index.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_RedemptionOption","_interopRequireWildcard","require","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","n","__proto__","a","getOwnPropertyDescriptor","u","i","set"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/RedemptionOption/index.ts"],"mappings":";;;;;;;;;;;;;;AAAA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AACAC,MAAA,CAAAC,IAAA,CAAAJ,iBAAA,EAAAK,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAN,iBAAA,CAAAM,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAd,iBAAA,CAAAM,GAAA;IAAA;EAAA;AAAA;AAAmC,SAAAS,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAf,wBAAAe,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAL,GAAA,CAAAE,CAAA,OAAAO,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAtB,MAAA,CAAAS,cAAA,IAAAT,MAAA,CAAAuB,wBAAA,WAAAC,CAAA,IAAAX,CAAA,oBAAAW,CAAA,OAAAnB,cAAA,CAAAC,IAAA,CAAAO,CAAA,EAAAW,CAAA,SAAAC,CAAA,GAAAH,CAAA,GAAAtB,MAAA,CAAAuB,wBAAA,CAAAV,CAAA,EAAAW,CAAA,UAAAC,CAAA,KAAAA,CAAA,CAAAd,GAAA,IAAAc,CAAA,CAAAC,GAAA,IAAA1B,MAAA,CAAAS,cAAA,CAAAW,CAAA,EAAAI,CAAA,EAAAC,CAAA,IAAAL,CAAA,CAAAI,CAAA,IAAAX,CAAA,CAAAW,CAAA,YAAAJ,CAAA,CAAAF,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAU,GAAA,CAAAb,CAAA,EAAAO,CAAA,GAAAA,CAAA","ignoreList":[]}

package/lib/commonjs/components/ScratchCard/README.md

@@ -1,119 +0,0 @@
-## ScratchCard Documentation
-
-The `ScratchCard` is an interactive component that creates a scratch-to-reveal experience commonly used for promotions, rewards, and gamification features. It leverages the Shopify React Native Skia library to provide a smooth scratching animation with customizable appearance. The component tracks scratching progress and can trigger an action when a sufficient area has been revealed.
-
-### Usage
-
-```tsx
-import ScratchCard from "@/components/ScratchCard/ScratchCard";
-import ScratchCardContent from "@/components/ScratchCard/ScratchCardContent";
-import { Image, Text, View } from "react-native";
-
-const MyComponent = () => {
-  const handleRevealed = () => {
-    // Handle card fully revealed action
-    console.log("Scratch card revealed!");
-  };
-
-  return (
-    <View style={{ width: 300, height: 200 }}>
-      <ScratchCard 
-        image={require("@/assets/images/scratch_foreground.png")}
-        onScratched={handleRevealed}
-        brushStrokeWidth={40}
-        revealThreshold={0.7}
-      >
-        <ScratchCardContent>
-          <Image 
-            source={require("@/assets/images/reward-banner.png")} 
-            style={{ width: 250, height: 150 }}
-          />
-        </ScratchCardContent>
-      </ScratchCard>
-    </View>
-  );
-};
-
-export default MyComponent;
-```
-
-### Text-Based Example
-
-```tsx
-<ScratchCard 
-  backgroundColor="#8A2BE2"
-  text="Scratch to reveal your prize!"
-  textFontColor="#FFFFFF"
-  textFontSize={18}
-  width={300}
-  height={150}
-  onScratched={() => alert("Congratulations! You won a prize!")}
->
-  <ScratchCardContent style={{ backgroundColor: "#FFD700" }}>
-    <Text style={{ fontSize: 24, fontWeight: "bold", color: "#000" }}>
-      50% OFF COUPON
-    </Text>
-    <Text style={{ marginTop: 8, color: "#333" }}>
-      Use code: SCRATCH50
-    </Text>
-  </ScratchCardContent>
-</ScratchCard>
-```
-
-### Props
-
-#### Core Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `style` | `StyleProp<ViewStyle>` | `undefined` | Additional styles for the container |
-| `children` | `React.ReactNode` | Required | Content to reveal underneath the scratch layer |
-| `image` | `ImageSourcePropType` | `null` | Image to use as the scratch layer |
-| `width` | `number` | `300` | Width of the scratch card |
-| `height` | `number` | `300` | Height of the scratch card |
-| `onScratched` | `() => void` | `undefined` | Function to call when scratch threshold is reached |
-
-#### Scratch Behavior Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `brushStrokeWidth` | `number` | `50` | Width of the scratching stroke |
-| `revealThreshold` | `number` | `0.8` | Percentage (0.0-1.0) that needs to be scratched to trigger the reveal |
-
-#### Appearance Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `backgroundColor` | `string` | `"#CCCCCC"` | Background color of the scratch layer (used if no image is provided) |
-| `text` | `string` | `""` | Optional text to display on the scratch layer |
-| `textFont` | `ImageSourcePropType` | `undefined` (required if text is present) | Font for the scratch layer text |
-| `textFontColor` | `string` | `"#CCCCCC"` | Color for the scratch layer text |
-| `textFontSize` | `number` | `16` | Font size for the scratch layer text |
-
-### ScratchCardContent
-
-The `ScratchCardContent` is a companion component that provides styling for the content underneath the scratch layer.
-
-#### Usage
-
-```tsx
-import ScratchCardContent from "@/components/ScratchCard/ScratchCardContent";
-
-<ScratchCardContent style={{ backgroundColor: "#f5f5f5" }}>
-  <Text>Your revealed content here</Text>
-</ScratchCardContent>
-```
-
-#### Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `children` | `React.ReactNode` | Required | Content to display underneath the scratch layer |
-| `style` | `StyleProp<ViewStyle>` | `undefined` | Additional styles for the content container |
-
-### Related Components
-
-- `ScratchCardContent`: Used for styling the revealed content
-- `Image`: Used to display images in the scratch content or as the scratch layer
-- `Text`: Used to display text in both the scratch layer and revealed content
-- `View`: The foundation component for layout structure

package/lib/commonjs/components/ScratchCard/ScratchCard.js

@@ -1,222 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _reactNativeSkia = require("@shopify/react-native-skia");
-var _reactNative = require("react-native");
-var _reactNativeReanimated = require("react-native-reanimated");
-var _reactNativeGestureHandler = require("react-native-gesture-handler");
-var _jsxRuntime = require("react/jsx-runtime");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const ScratchCard = ({
-  style,
-  children,
-  image,
-  brushStrokeWidth = 50,
-  revealThreshold = 0.8,
-  width = 300,
-  height = 300,
-  backgroundColor = "#CCCCCC",
-  text = "",
-  textFont,
-  textFontColor = "#CCCCCC",
-  textFontSize = 16,
-  onScratched,
-  gradient
-}) => {
-  const loadedImg = (0, _reactNativeSkia.useImage)(image);
-  const loadedFont = (0, _reactNativeSkia.useFont)(textFont, textFontSize);
-  const [[areaWidth, areaHeight], setSize] = (0, _react.useState)([0, 0]);
-  const [isScratched, setScratched] = (0, _react.useState)(false);
-  const [isLayoutReady, setLayoutReady] = (0, _react.useState)(false);
-  const isThresholdReached = (0, _reactNativeReanimated.useSharedValue)(false);
-  const path = (0, _reactNativeReanimated.useSharedValue)(_reactNativeSkia.Skia.Path.Make());
-  (0, _react.useEffect)(() => {
-    path.value = _reactNativeSkia.Skia.Path.Make();
-    isThresholdReached.value = false;
-    setScratched(false);
-  }, [areaWidth, areaHeight]);
-  const handleLayout = (0, _react.useCallback)(event => {
-    const {
-      width: newWidth,
-      height: newHeight
-    } = event.nativeEvent.layout;
-    if (newWidth > 0 && newHeight > 0) {
-      if (newWidth !== areaWidth || newHeight !== areaHeight) {
-        setSize([newWidth, newHeight]);
-      }
-      if (!isLayoutReady) {
-        setLayoutReady(true);
-      }
-    } else {
-      setLayoutReady(false);
-    }
-  }, [areaWidth, areaHeight, isLayoutReady]);
-  const revealCardOnJS = (0, _react.useCallback)(() => {
-    setScratched(true);
-    onScratched?.();
-  }, [onScratched]);
-  const pan = _reactNativeGestureHandler.Gesture.Pan().averageTouches(true).maxPointers(1).onBegin(e => {
-    if (!isLayoutReady) return;
-    try {
-      const newPath = path.value.copy();
-      newPath.moveTo(e.x, e.y);
-      newPath.lineTo(e.x + 0.001, e.y + 0.001);
-      path.value = newPath;
-      (0, _reactNativeSkia.notifyChange)(path);
-    } catch (error) {
-      console.error("ScratchCard: Error in onBegin:", error);
-    }
-  }).onChange(e => {
-    if (!isLayoutReady || isThresholdReached.value) return;
-    try {
-      const newPath = path.value.copy();
-      newPath.lineTo(e.x, e.y);
-      path.value = newPath;
-      (0, _reactNativeSkia.notifyChange)(path);
-      const bounds = path.value.getBounds();
-      if (!bounds || areaWidth <= 0 || areaHeight <= 0) {
-        return;
-      }
-      const scratchedArea = bounds.width * bounds.height;
-      const totalArea = areaWidth * areaHeight;
-      if (totalArea > 0 && scratchedArea / totalArea > revealThreshold) {
-        if (!isThresholdReached.value) {
-          isThresholdReached.value = true;
-          (0, _reactNativeReanimated.runOnJS)(revealCardOnJS)();
-        }
-      }
-    } catch (error) {
-      console.error("ScratchCard: Error in onChange (UI Thread):", error);
-    }
-  });
-  const textMetrics = _react.default.useMemo(() => {
-    if (loadedFont && text && areaWidth > 0 && areaHeight > 0) {
-      const metrics = loadedFont.measureText(text);
-      const textX = areaWidth / 2 - metrics.width / 2;
-      const textY = areaHeight / 2 + metrics.height / 3;
-      return {
-        x: textX,
-        y: textY,
-        width: metrics.width,
-        height: metrics.height
-      };
-    }
-    return null;
-  }, [loadedFont, text, areaWidth, areaHeight]);
-  const canRenderCanvas = isLayoutReady && areaWidth > 0 && areaHeight > 0;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeGestureHandler.GestureHandlerRootView, {
-    style: {
-      justifyContent: "center",
-      alignContent: "center"
-    },
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      onLayout: handleLayout,
-      style: [styles.container, style, {
-        width,
-        height
-      }],
-      children: [canRenderCanvas && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.content,
-        children: children
-      }), !isScratched && canRenderCanvas && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeGestureHandler.GestureDetector, {
-        gesture: pan,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSkia.Canvas, {
-          style: styles.canvas,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSkia.Mask, {
-            mode: "luminance",
-            mask: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSkia.Group, {
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSkia.Rect, {
-                x: 0,
-                y: 0,
-                width: areaWidth,
-                height: areaHeight,
-                color: "white"
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSkia.Path, {
-                path: path,
-                color: "black",
-                style: "stroke",
-                strokeJoin: "round",
-                strokeCap: "round",
-                strokeWidth: brushStrokeWidth
-              })]
-            }),
-            children: loadedImg ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSkia.Image, {
-              image: loadedImg,
-              fit: "cover",
-              x: 0,
-              y: 0,
-              width: areaWidth,
-              height: areaHeight
-            }) : gradient ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSkia.Group, {
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSkia.LinearGradient, {
-                start: gradient.start ?? {
-                  x: 0,
-                  y: 0
-                },
-                end: gradient.end ?? {
-                  x: areaWidth,
-                  y: areaHeight
-                },
-                colors: gradient.colors
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSkia.Rect, {
-                x: 0,
-                y: 0,
-                width: areaWidth,
-                height: areaHeight
-              }), loadedFont && textMetrics && text ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSkia.Text, {
-                x: textMetrics.x,
-                y: textMetrics.y,
-                text: text,
-                color: textFontColor,
-                font: loadedFont
-              }) : null]
-            }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSkia.Group, {
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSkia.Rect, {
-                x: 0,
-                y: 0,
-                width: areaWidth,
-                height: areaHeight,
-                color: backgroundColor
-              }), loadedFont && textMetrics && text ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSkia.Text, {
-                x: textMetrics.x,
-                y: textMetrics.y,
-                text: text,
-                color: textFontColor,
-                font: loadedFont
-              }) : null]
-            })
-          })
-        })
-      })]
-    })
-  });
-};
-const styles = _reactNative.StyleSheet.create({
-  container: {
-    position: "relative",
-    overflow: "hidden"
-  },
-  content: {
-    position: "absolute",
-    top: 0,
-    left: 0,
-    width: "100%",
-    height: "100%",
-    zIndex: 1
-  },
-  canvas: {
-    position: "absolute",
-    top: 0,
-    left: 0,
-    width: "100%",
-    height: "100%",
-    zIndex: 2
-  }
-});
-var _default = exports.default = ScratchCard;
-//# sourceMappingURL=ScratchCard.js.map