related-ui-components 1.8.7 → 1.8.9

package/lib/typescript/commonjs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AACA,OAAO,yBAAyB,CAAC;AAOjC,cAAc,SAAS,CAAA;AACvB,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAQA,cAAc,SAAS,CAAA;AACvB,cAAc,cAAc,CAAC"}

package/lib/typescript/commonjs/theme/Colors.d.ts

@@ -37,6 +37,8 @@ export interface ThemeType {
         secondary?: string[];
         [key: string]: string[] | undefined;
     };
+    skeletonBackgroundColor?: string;
+    skeletonItemColor?: string;
 }
 export declare const lightTheme: ThemeType;
 export declare const darkTheme: ThemeType;

package/lib/typescript/commonjs/theme/Colors.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Colors.d.ts","sourceRoot":"","sources":["../../../../src/theme/Colors.ts"],"names":[],"mappings":"AACA,MAAM,WAAW,SAAS;IAExB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,cAAc,EAAE,MAAM,CAAC;IACvB,OAAO,EAAE,MAAM,CAAC;IAChB,cAAc,EAAE,MAAM,CAAA;IACtB,SAAS,EAAE,MAAM,CAAC;IAClB,gBAAgB,EAAE,MAAM,CAAA;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IAGb,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAGlB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAGhB,QAAQ,EAAE,MAAM,CAAC;IAGjB,eAAe,EAAE,MAAM,CAAC;IACxB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,eAAe,EAAE,MAAM,CAAC;IACxB,MAAM,EAAE,MAAM,CAAC;IAEf,OAAO,EAAE;QACP,EAAE,EAAE,MAAM,CAAC;QACX,CAAC,EAAE,MAAM,CAAC;QACV,CAAC,EAAE,MAAM,CAAC;QACV,CAAC,EAAE,MAAM,CAAC;QACV,EAAE,EAAE,MAAM,CAAC;QACX,GAAG,EAAE,MAAM,CAAC;KACb,CAAA;IAED,SAAS,CAAC,EAAE;QACV,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;QACnB,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;QACrB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,SAAS,CAAC;KACrC,CAAC;CACH;AAGD,eAAO,MAAM,UAAU,EAAE,SA4CxB,CAAC;AAGF,eAAO,MAAM,SAAS,EAAE,SA4CvB,CAAC"}
+{"version":3,"file":"Colors.d.ts","sourceRoot":"","sources":["../../../../src/theme/Colors.ts"],"names":[],"mappings":"AACA,MAAM,WAAW,SAAS;IAExB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,cAAc,EAAE,MAAM,CAAC;IACvB,OAAO,EAAE,MAAM,CAAC;IAChB,cAAc,EAAE,MAAM,CAAA;IACtB,SAAS,EAAE,MAAM,CAAC;IAClB,gBAAgB,EAAE,MAAM,CAAA;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IAGb,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAGlB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAGhB,QAAQ,EAAE,MAAM,CAAC;IAGjB,eAAe,EAAE,MAAM,CAAC;IACxB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,eAAe,EAAE,MAAM,CAAC;IACxB,MAAM,EAAE,MAAM,CAAC;IAEf,OAAO,EAAE;QACP,EAAE,EAAE,MAAM,CAAC;QACX,CAAC,EAAE,MAAM,CAAC;QACV,CAAC,EAAE,MAAM,CAAC;QACV,CAAC,EAAE,MAAM,CAAC;QACV,EAAE,EAAE,MAAM,CAAC;QACX,GAAG,EAAE,MAAM,CAAC;KACb,CAAA;IAED,SAAS,CAAC,EAAE;QACV,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;QACnB,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;QACrB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,SAAS,CAAC;KACrC,CAAC;IACF,uBAAuB,CAAC,EAAG,MAAM,CAAC;IAClC,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAGD,eAAO,MAAM,UAAU,EAAE,SA+CxB,CAAC;AAGF,eAAO,MAAM,SAAS,EAAE,SA+CvB,CAAC"}

package/lib/typescript/module/app.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-declare const MockWheelScreen: () => React.JSX.Element;
-export default MockWheelScreen;
+declare const MyScreen: () => React.JSX.Element;
+export default MyScreen;
 //# sourceMappingURL=app.d.ts.map

package/lib/typescript/module/app.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"app.d.ts","sourceRoot":"","sources":["../../../src/app.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAaxC,QAAA,MAAM,eAAe,yBA6BpB,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"app.d.ts","sourceRoot":"","sources":["../../../src/app.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAgBxC,QAAA,MAAM,QAAQ,yBA4Gb,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/lib/typescript/module/components/ScratchCard/ScratchCard.d.ts

@@ -14,6 +14,17 @@ type ScratchCardProps = {
     textFontSize?: number;
     textFontColor?: string;
     onScratched?: () => void;
+    gradient?: {
+        colors: string[];
+        start?: {
+            x: number;
+            y: number;
+        };
+        end?: {
+            x: number;
+            y: number;
+        };
+    };
 };
 declare const ScratchCard: React.FC<ScratchCardProps>;
 export default ScratchCard;

package/lib/typescript/module/components/ScratchCard/ScratchCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScratchCard.d.ts","sourceRoot":"","sources":["../../../../../src/components/ScratchCard/ScratchCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAKN,MAAM,OAAO,CAAC;AAiBf,OAAO,EACL,SAAS,EAET,SAAS,EAET,kBAAkB,EAEnB,MAAM,cAAc,CAAC;AAYtB,KAAK,gBAAgB,GAAG;IACtB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;CAC1B,CAAC;AAEF,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAwL3C,CAAC;AAyBF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ScratchCard.d.ts","sourceRoot":"","sources":["../../../../../src/components/ScratchCard/ScratchCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAKN,MAAM,OAAO,CAAC;AAkBf,OAAO,EACL,SAAS,EAET,SAAS,EAET,kBAAkB,EAEnB,MAAM,cAAc,CAAC;AAQtB,KAAK,gBAAgB,GAAG;IACtB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,QAAQ,CAAC,EAAE;QACT,MAAM,EAAE,MAAM,EAAE,CAAC;QACjB,KAAK,CAAC,EAAE;YAAE,CAAC,EAAE,MAAM,CAAC;YAAC,CAAC,EAAE,MAAM,CAAA;SAAE,CAAC;QACjC,GAAG,CAAC,EAAE;YAAE,CAAC,EAAE,MAAM,CAAC;YAAC,CAAC,EAAE,MAAM,CAAA;SAAE,CAAC;KAChC,CAAC;CACH,CAAC;AAEF,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA6M3C,CAAC;AAyBF,eAAe,WAAW,CAAC"}

package/lib/typescript/module/components/Skeleton/Shimmer.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { ViewStyle, DimensionValue, StyleProp } from "react-native";
+interface ShimmerProps {
+    children: React.ReactNode;
+    width: DimensionValue;
+    height: DimensionValue;
+    style?: StyleProp<ViewStyle>;
+    duration?: number;
+    shimmerWidth?: number;
+}
+declare const Shimmer: React.FC<ShimmerProps>;
+export default Shimmer;
+//# sourceMappingURL=Shimmer.d.ts.map

package/lib/typescript/module/components/Skeleton/Shimmer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Shimmer.d.ts","sourceRoot":"","sources":["../../../../../src/components/Skeleton/Shimmer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,EAKL,SAAS,EACT,cAAc,EACd,SAAS,EACV,MAAM,cAAc,CAAC;AAItB,UAAU,YAAY;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,EAAE,cAAc,CAAC;IACtB,MAAM,EAAE,cAAc,CAAC;IACvB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,QAAA,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAgEnC,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/lib/typescript/module/components/Skeleton/SkeletonElement.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { ViewStyle, DimensionValue } from "react-native";
+interface SkeletonElementProps {
+    width?: DimensionValue;
+    height?: DimensionValue;
+    borderRadius?: number;
+    style?: ViewStyle;
+    children?: React.ReactNode;
+}
+declare const SkeletonElement: React.FC<SkeletonElementProps>;
+export default SkeletonElement;
+//# sourceMappingURL=SkeletonElement.d.ts.map

package/lib/typescript/module/components/Skeleton/SkeletonElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkeletonElement.d.ts","sourceRoot":"","sources":["../../../../../src/components/Skeleton/SkeletonElement.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAoB,SAAS,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAE3E,UAAU,oBAAoB;IAC5B,KAAK,CAAC,EAAE,cAAc,CAAA;IACtB,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAmBnD,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/lib/typescript/module/components/Skeleton/index.d.ts

@@ -0,0 +1,5 @@
+export { default as Shimmer } from "./Shimmer";
+export { default as SkeletonElement } from "./SkeletonElement";
+export * from "./Shimmer";
+export * from "./SkeletonElement";
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/module/components/Skeleton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Skeleton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAC,MAAM,WAAW,CAAC;AAC9C,OAAO,EAAE,OAAO,IAAI,eAAe,EAAC,MAAM,mBAAmB,CAAA;AAE7D,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAA"}

package/lib/typescript/module/components/Wheel/Wheel.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 import { ViewStyle, TextStyle } from "react-native";
+import { AppButtonProps } from "../Button";
 export interface SpinWheelItem {
     id: string | number;
     label: string;
@@ -23,6 +24,7 @@ interface SpinWheelProps {
     knobStyle?: ViewStyle;
     actionButtonStyle?: ViewStyle;
     actionButtonTextStyle?: TextStyle;
+    actionButtonProps?: Partial<Omit<AppButtonProps, "title" | "onPress">>;
     wheelBorderColor?: string;
     wheelTextColor?: string;
     knobColor?: string;

package/lib/typescript/module/components/Wheel/Wheel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Wheel.d.ts","sourceRoot":"","sources":["../../../../../src/components/Wheel/Wheel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAC3D,OAAO,EAOL,SAAS,EACT,SAAS,EACV,MAAM,cAAc,CAAC;AAGtB,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA+BD,UAAU,cAAc;IAEtB,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,mBAAmB,CAAC,EAAE,aAAa,GAAG,MAAM,GAAG,MAAM,CAAC;IAGtD,IAAI,CAAC,EAAE,MAAM,CAAC;IAGd,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAGlB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;IAG1C,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAC9B,qBAAqB,CAAC,EAAE,SAAS,CAAC;IAGlC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IAGnB,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACnC;AAED,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAwRvC,CAAC;AAqDF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"Wheel.d.ts","sourceRoot":"","sources":["../../../../../src/components/Wheel/Wheel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAC3D,OAAO,EAOL,SAAS,EACT,SAAS,EACV,MAAM,cAAc,CAAC;AAEtB,OAAO,EAAE,cAAc,EAAU,MAAM,WAAW,CAAC;AAEnD,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA+BD,UAAU,cAAc;IAEtB,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,mBAAmB,CAAC,EAAE,aAAa,GAAG,MAAM,GAAG,MAAM,CAAC;IAGtD,IAAI,CAAC,EAAE,MAAM,CAAC;IAGd,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAGlB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;IAG1C,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAC9B,qBAAqB,CAAC,EAAE,SAAS,CAAA;IACjC,iBAAiB,CAAC,EAAE,OAAO,CACvB,IAAI,CAAC,cAAc,EAAE,OAAO,GAAG,SAAS,CAAC,CAC5C,CAAC;IAGF,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IAGnB,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACnC;AAED,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAgSvC,CAAC;AAqDF,eAAe,SAAS,CAAC"}

package/lib/typescript/module/components/index.d.ts

@@ -15,4 +15,5 @@ export * from "./CloseIcon";
 export * from "./Marquee";
 export * from "./RedeemedVoucher";
 export * from "./Button";
+export * from "./Skeleton";
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/module/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAA;AACtB,cAAc,eAAe,CAAC;AAC9B,cAAe,UAAU,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAA;AACtB,cAAc,eAAe,CAAC;AAC9B,cAAe,UAAU,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC"}

package/lib/typescript/module/index.d.ts

@@ -1,4 +1,3 @@
-import "react-native-reanimated";
 export * from "./theme";
 export * from "./components";
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/module/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AACA,OAAO,yBAAyB,CAAC;AAOjC,cAAc,SAAS,CAAA;AACvB,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAQA,cAAc,SAAS,CAAA;AACvB,cAAc,cAAc,CAAC"}

package/lib/typescript/module/theme/Colors.d.ts

@@ -37,6 +37,8 @@ export interface ThemeType {
         secondary?: string[];
         [key: string]: string[] | undefined;
     };
+    skeletonBackgroundColor?: string;
+    skeletonItemColor?: string;
 }
 export declare const lightTheme: ThemeType;
 export declare const darkTheme: ThemeType;

package/lib/typescript/module/theme/Colors.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Colors.d.ts","sourceRoot":"","sources":["../../../../src/theme/Colors.ts"],"names":[],"mappings":"AACA,MAAM,WAAW,SAAS;IAExB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,cAAc,EAAE,MAAM,CAAC;IACvB,OAAO,EAAE,MAAM,CAAC;IAChB,cAAc,EAAE,MAAM,CAAA;IACtB,SAAS,EAAE,MAAM,CAAC;IAClB,gBAAgB,EAAE,MAAM,CAAA;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IAGb,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAGlB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAGhB,QAAQ,EAAE,MAAM,CAAC;IAGjB,eAAe,EAAE,MAAM,CAAC;IACxB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,eAAe,EAAE,MAAM,CAAC;IACxB,MAAM,EAAE,MAAM,CAAC;IAEf,OAAO,EAAE;QACP,EAAE,EAAE,MAAM,CAAC;QACX,CAAC,EAAE,MAAM,CAAC;QACV,CAAC,EAAE,MAAM,CAAC;QACV,CAAC,EAAE,MAAM,CAAC;QACV,EAAE,EAAE,MAAM,CAAC;QACX,GAAG,EAAE,MAAM,CAAC;KACb,CAAA;IAED,SAAS,CAAC,EAAE;QACV,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;QACnB,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;QACrB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,SAAS,CAAC;KACrC,CAAC;CACH;AAGD,eAAO,MAAM,UAAU,EAAE,SA4CxB,CAAC;AAGF,eAAO,MAAM,SAAS,EAAE,SA4CvB,CAAC"}
+{"version":3,"file":"Colors.d.ts","sourceRoot":"","sources":["../../../../src/theme/Colors.ts"],"names":[],"mappings":"AACA,MAAM,WAAW,SAAS;IAExB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,cAAc,EAAE,MAAM,CAAC;IACvB,OAAO,EAAE,MAAM,CAAC;IAChB,cAAc,EAAE,MAAM,CAAA;IACtB,SAAS,EAAE,MAAM,CAAC;IAClB,gBAAgB,EAAE,MAAM,CAAA;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IAGb,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAGlB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAGhB,QAAQ,EAAE,MAAM,CAAC;IAGjB,eAAe,EAAE,MAAM,CAAC;IACxB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,eAAe,EAAE,MAAM,CAAC;IACxB,MAAM,EAAE,MAAM,CAAC;IAEf,OAAO,EAAE;QACP,EAAE,EAAE,MAAM,CAAC;QACX,CAAC,EAAE,MAAM,CAAC;QACV,CAAC,EAAE,MAAM,CAAC;QACV,CAAC,EAAE,MAAM,CAAC;QACV,EAAE,EAAE,MAAM,CAAC;QACX,GAAG,EAAE,MAAM,CAAC;KACb,CAAA;IAED,SAAS,CAAC,EAAE;QACV,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;QACnB,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;QACrB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,SAAS,CAAC;KACrC,CAAC;IACF,uBAAuB,CAAC,EAAG,MAAM,CAAC;IAClC,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAGD,eAAO,MAAM,UAAU,EAAE,SA+CxB,CAAC;AAGF,eAAO,MAAM,SAAS,EAAE,SA+CvB,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "related-ui-components",
   "main": "./src/index.ts",
-  "version": "1.8.7",
+  "version": "1.8.9",
   "scripts": {
     "start": "expo start",
     "reset-project": "node ./scripts/reset-project.js",

package/src/app.tsx

@@ -1,45 +1,127 @@
 import React, { useState } from "react";
-import { View, Button } from "react-native";
-import SpinWheel, { SpinWheelItem } from "./components/Wheel/Wheel";
+import { View, Button, Text } from "react-native";
+import {
+  FilterResult,
+  Filters,
+  Popup,
+  ScratchCard,
+  ScratchCardContent,
+  UnlockRewards,
+} from "./components";
+import BRANDS from "./constants/BRANDS";
+import { Ionicons } from "@expo/vector-icons";
+import { useTheme } from "./theme";
+import RedeemedVoucherSheet from "./components/RedeemedVoucher/RedeemedVoucherSheet";
+import { GestureHandlerRootView } from "react-native-gesture-handler";
 
-const wheelItems: SpinWheelItem[] = [
-  { id: 1, label: "Prize 1", color: "#FF6384" },
-  { id: 2, label: "Prize 2", color: "#36A2EB" },
-  { id: 3, label: "Prize 3", color: "#FFCE56" },
-  { id: 4, label: "Prize 4", color: "#4BC0C0" },
-  { id: 5, label: "Prize 5", color: "#9966FF" },
-  { id: 6, label: "Prize 6", color: "#FF9F40" },
-];
+const MyScreen = () => {
+  const [isFilterVisible, setIsFilterVisible] = useState(false);
 
-const MockWheelScreen = () => {
-  const [winner, setWinner] = useState<SpinWheelItem | null>(null);
+  const { theme } = useTheme();
 
-  return (
-    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
-      <SpinWheel
-        items={wheelItems}
-        predeterminedWinner={wheelItems[2]}
-        onSpinEnd={(item) => {
-          alert(`Winner: ${item.label}`);
-          setWinner(null);
-        }}
-        size={300}
-        spinButtonText="Spin Randomly"
-      />
+  const handleApplyFilters = (result: FilterResult) => {
+    console.log("Filters applied:", result);
+    // Process filter results...
+  };
+
+  const rewardsData = [
+    {
+      icon: (
+        <Ionicons name="briefcase-outline" size={30} color={theme.primary} />
+      ),
+      activeIcon: (
+        <Ionicons name="briefcase-outline" size={30} color={theme.onPrimary} />
+      ),
+      title: "Aqua Guardian",
+      description:
+        "Maintain water usage below the community average for a month.",
+      isActive: false,
+      status: "0/1",
+      statusBackgroundColor: "#FFCDD2",
+      statusTextColor: "#D32F2F",
+    },
+    {
+      icon: <Ionicons name="heart-outline" size={30} color={theme.primary} />,
+      activeIcon: (
+        <Ionicons name="heart-outline" size={30} color={theme.onPrimary} />
+      ),
+      title: "Wellness Warrior",
+      description: "Complete 30 days of healthy hydration tracking.",
+      isActive: true,
+      status: "15/30",
+      statusBackgroundColor: "#C8E6C9",
+      statusTextColor: "#388E3C",
+    },
+    {
+      icon: <Ionicons name="airplane-outline" size={24} color={theme.helper} />,
+      activeIcon: (
+        <Ionicons name="airplane-outline" size={24} color={theme.primary} />
+      ),
+      title: "Eco Traveler",
+      description: "Log 5 trips where you chose sustainable travel options.",
+      isActive: false,
+      status: "2/5",
+      statusBackgroundColor: theme.disabled,
+      statusTextColor: theme.text,
+    },
+    {
+      icon: <Ionicons name="school-outline" size={24} color={theme.helper} />,
+      activeIcon: (
+        <Ionicons name="school-outline" size={24} color={theme.primary} />
+      ),
+      title: "Knowledge Seeker",
+      description: "Complete all water conservation learning modules.",
+      isActive: false,
+      status: "3/5",
+      statusBackgroundColor: theme.disabled,
+      statusTextColor: theme.text,
+    },
+    {
+      icon: <Ionicons name="settings-outline" size={24} color={theme.helper} />,
+      activeIcon: (
+        <Ionicons name="settings-outline" size={24} color={theme.primary} />
+      ),
+      title: "Smart Saver",
+      description: "Set up and use all water-saving features in the app.",
+      isActive: true,
+      status: "4/4",
+      statusBackgroundColor: theme.primary,
+      statusTextColor: theme.background,
+    },
+  ];
 
-      <View style={{ flexDirection: "row", marginTop: 20 }}>
-        <Button
-          title="Spin to Prize 3"
-          onPress={() => setWinner(wheelItems[2])}
-        />
-        <View style={{ width: 20 }} />
-        <Button
-          title="Spin Random"
-          onPress={() => setWinner(null)}
-        />
-      </View>
-    </View>
+  return (
+    <>
+      <GestureHandlerRootView>
+        <Popup visible={true} onClose={()=>{}}>
+        <ScratchCard
+          backgroundColor="#8A2BE2"
+          text="Scratch to reveal your prize!"
+          textFontColor="#FFFFFF"
+          textFontSize={18}
+          textFont={require("@/assets/fonts/SpaceMono-Regular.ttf")}
+          width={300}
+          height={150}
+          gradient={{
+            colors: ["#ff0000", "#00ff00", "#0000ff"],
+            start: { x: 0, y: 0 },
+            end: { x: 300, y: 300 },
+          }}
+          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>
+        </Popup>
+      </GestureHandlerRootView>
+    </>
   );
 };
 
-export default MockWheelScreen;
+export default MyScreen;

package/src/components/Popup/Popup.tsx

@@ -210,7 +210,7 @@ const Popup: FC<PopupProps> = ({
           ]}
           pointerEvents="box-none"
         >
-          <TouchableWithoutFeedback>
+          {/* <TouchableWithoutFeedback> */}
             <View style={[!children && styles.popupContainer, containerStyle]}>
               <CloseIcon
                 show={showCloseIcon}
@@ -243,7 +243,7 @@ const Popup: FC<PopupProps> = ({
                 renderDefaultContent()
               )}
             </View>
-          </TouchableWithoutFeedback>
+          {/* </TouchableWithoutFeedback> */}
         </Animated.View>
       </View>
     </Modal>

package/src/components/ScratchCard/ScratchCard.tsx

@@ -19,6 +19,7 @@ import {
   SkPath, // Import SkPath type
   SkFont, // Import SkFont type
   SkImage, // Import SkImage type
+  LinearGradient,
 } from "@shopify/react-native-skia";
 import {
   StyleProp,
@@ -26,9 +27,8 @@ import {
   ViewStyle,
   StyleSheet,
   ImageRequireSource,
-  LogBox, // Optional: for ignoring specific logs if needed
+  LogBox,
 } from "react-native";
-// Import runOnJS and useSharedValue
 import { runOnJS, useSharedValue } from "react-native-reanimated";
 import {
   Gesture,
@@ -36,9 +36,6 @@ import {
   GestureHandlerRootView,
 } from "react-native-gesture-handler";
 
-// Ignore specific warning if it appears, related to path mutation - use cautiously
-// LogBox.ignoreLogs(['Skia: SkPath.Make()']);
-
 type ScratchCardProps = {
   style?: StyleProp<ViewStyle>;
   image?: ImageRequireSource;
@@ -53,6 +50,11 @@ type ScratchCardProps = {
   textFontSize?: number;
   textFontColor?: string;
   onScratched?: () => void;
+  gradient?: {
+    colors: string[];
+    start?: { x: number; y: number };
+    end?: { x: number; y: number };
+  };
 };
 
 const ScratchCard: React.FC<ScratchCardProps> = ({
@@ -69,6 +71,7 @@ const ScratchCard: React.FC<ScratchCardProps> = ({
   textFontColor = "#CCCCCC",
   textFontSize = 16,
   onScratched,
+  gradient,
 }) => {
   const loadedImg = useImage(image);
   const loadedFont = useFont(textFont, textFontSize);
@@ -171,12 +174,14 @@ const ScratchCard: React.FC<ScratchCardProps> = ({
   const canRenderCanvas = isLayoutReady && areaWidth > 0 && areaHeight > 0;
 
   return (
-    <GestureHandlerRootView style={{justifyContent:"center", alignContent: "center"}}>
+    <GestureHandlerRootView
+      style={{ justifyContent: "center", alignContent: "center" }}
+    >
       <View
         onLayout={handleLayout}
         style={[styles.container, style, { width, height }]}
       >
-        <View style={styles.content}>{children}</View>
+        {canRenderCanvas && <View style={styles.content}>{children}</View>}
 
         {!isScratched && canRenderCanvas && (
           <GestureDetector gesture={pan}>
@@ -212,6 +217,24 @@ const ScratchCard: React.FC<ScratchCardProps> = ({
                     width={areaWidth}
                     height={areaHeight}
                   />
+                ) : gradient ? (
+                  <Group>
+                    <LinearGradient
+                      start={gradient.start ?? { x: 0, y: 0 }}
+                      end={gradient.end ?? { x: areaWidth, y: areaHeight }}
+                      colors={gradient.colors}
+                    ></LinearGradient>
+                    <Rect x={0} y={0} width={areaWidth} height={areaHeight} />
+                    {loadedFont && textMetrics && text ? (
+                      <Text
+                        x={textMetrics.x}
+                        y={textMetrics.y}
+                        text={text}
+                        color={textFontColor}
+                        font={loadedFont}
+                      />
+                    ) : null}
+                  </Group>
                 ) : (
                   <Group>
                     <Rect

package/src/components/Skeleton/Shimmer.tsx

@@ -0,0 +1,89 @@
+import React, { useEffect, useRef } from "react";
+import {
+  View,
+  StyleSheet,
+  Animated,
+  Easing,
+  ViewStyle,
+  DimensionValue,
+  StyleProp,
+} from "react-native";
+import { LinearGradient } from "expo-linear-gradient";
+import { useTheme } from "../../theme";
+
+interface ShimmerProps {
+  children: React.ReactNode;
+  width: DimensionValue;
+  height: DimensionValue;
+  style?: StyleProp<ViewStyle>;
+  duration?: number;
+  shimmerWidth?: number;
+}
+
+const Shimmer: React.FC<ShimmerProps> = ({
+  children,
+  width,
+  height,
+  style,
+  duration = 1500,
+  shimmerWidth = 150,
+}) => {
+  const { theme } = useTheme();
+
+  const animatedValue = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    const animation = Animated.loop(
+      Animated.timing(animatedValue, {
+        toValue: 1,
+        duration: duration,
+        easing: Easing.linear,
+        useNativeDriver: true,
+      })
+    );
+    animation.start();
+    return () => animation.stop();
+  }, [animatedValue, duration]);
+
+  const translateX = animatedValue.interpolate({
+    inputRange: [0, 1],
+
+    outputRange: [
+      -shimmerWidth,
+      typeof width === "number" ? width + shimmerWidth : 400 + shimmerWidth,
+    ],
+  });
+
+  const shimmerColors = [
+    "transparent",
+    "rgba(255, 255, 255, 0.4)",
+    "transparent",
+  ];
+
+  return (
+    <View
+      style={[
+        { width, height, overflow: "hidden", backgroundColor: theme.skeletonBackgroundColor },
+        style,
+      ]}
+    >
+      {children}
+      <Animated.View
+        style={{
+          ...StyleSheet.absoluteFillObject,
+          transform: [{ translateX }],
+          zIndex: 1,
+        }}
+      >
+        <LinearGradient
+          colors={shimmerColors as any}
+          style={{ flex: 1, width: shimmerWidth }}
+          start={{ x: 0, y: 0.5 }}
+          end={{ x: 1, y: 0.5 }}
+        />
+      </Animated.View>
+    </View>
+  );
+};
+
+export default Shimmer;

package/src/components/Skeleton/SkeletonElement.tsx

@@ -0,0 +1,34 @@
+import { useTheme } from "../../theme";
+import React from "react";
+import { View, StyleSheet, ViewStyle, DimensionValue } from "react-native";
+
+interface SkeletonElementProps {
+  width?: DimensionValue
+  height?: DimensionValue;
+  borderRadius?: number;
+  style?: ViewStyle;
+  children?: React.ReactNode; 
+}
+
+const SkeletonElement: React.FC<SkeletonElementProps> = ({
+  width,
+  height,
+  borderRadius,
+  style,
+  children,
+}) => {
+  const { theme } = useTheme();
+
+  const styles = StyleSheet.create({
+    skeleton: {
+      backgroundColor: theme.skeletonItemColor,
+      width: width,
+      height: height,
+      borderRadius: borderRadius,
+    },
+  });
+
+  return <View style={[styles.skeleton, style]}>{children}</View>;
+};
+
+export default SkeletonElement;

package/src/components/Skeleton/index.ts

@@ -0,0 +1,5 @@
+export { default as Shimmer} from "./Shimmer";
+export { default as SkeletonElement} from "./SkeletonElement"
+
+export * from "./Shimmer";
+export * from "./SkeletonElement"

package/src/components/Wheel/Wheel.tsx

@@ -10,6 +10,7 @@ import {
   TextStyle,
 } from "react-native";
 import { Svg, Path, G, Text as SvgText } from "react-native-svg";
+import { AppButtonProps, Button } from "../Button";
 
 export interface SpinWheelItem {
   id: string | number;
@@ -72,7 +73,10 @@ interface SpinWheelProps {
   wheelTextStyle?: TextStyle;
   knobStyle?: ViewStyle;
   actionButtonStyle?: ViewStyle;
-  actionButtonTextStyle?: TextStyle;
+  actionButtonTextStyle?: TextStyle
+  actionButtonProps?: Partial<
+      Omit<AppButtonProps, "title" | "onPress">
+  >;
 
   // Custom colors
   wheelBorderColor?: string; 
@@ -101,6 +105,7 @@ const SpinWheel: React.FC<SpinWheelProps> = ({
   actionButtonTextStyle,
   wheelBorderColor,
   wheelTextColor = "#FFFFFF",
+  actionButtonProps
 }) => {
   const wheelItems = items.length > 0 ? items : [];
 
@@ -350,7 +355,14 @@ const SpinWheel: React.FC<SpinWheelProps> = ({
             zIndex: 2,
           }}
         >
-          <TouchableOpacity
+          <Button
+            style={[styles.actionButton, actionButtonStyle]}
+            onPress={handleSpin}
+            title={spinButtonText}
+            textStyle={[styles.actionButtonText, actionButtonTextStyle]}
+            {...actionButtonProps}
+          />
+          {/* <TouchableOpacity
             onPress={handleSpin}
             disabled={spinning || !enabled || wheelItems.length === 0}
             style={[styles.actionButton, actionButtonStyle]}
@@ -358,7 +370,7 @@ const SpinWheel: React.FC<SpinWheelProps> = ({
             <Text style={[styles.actionButtonText, actionButtonTextStyle]}>
               {spinButtonText}
             </Text>
-          </TouchableOpacity>
+          </TouchableOpacity> */}
         </View>
       </View>
     </View>

package/src/components/index.ts

@@ -14,4 +14,5 @@ export * from "./Wheel";
 export * from "./CloseIcon";
 export * from "./Marquee";
 export * from "./RedeemedVoucher";
-export * from "./Button";
+export * from "./Button";
+export * from "./Skeleton";