related-ui-components 1.8.7 → 1.8.8

package/lib/typescript/commonjs/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/commonjs/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/commonjs/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/commonjs/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/commonjs/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/commonjs/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/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,yBAsGb,CAAC;AAEF,eAAe,QAAQ,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/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.8",
   "scripts": {
     "start": "expo start",
     "reset-project": "node ./scripts/reset-project.js",

package/src/app.tsx

@@ -1,45 +1,121 @@
 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}
+          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>
+        </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/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/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";

package/src/index.ts

@@ -1,10 +1,10 @@
-import { registerRootComponent } from 'expo';
-import "react-native-reanimated";
+// import { registerRootComponent } from 'expo';
+// import "react-native-reanimated";
 
 
-import App from "./app";
+// import App from "./app";
 
-registerRootComponent(App);
+// registerRootComponent(App);
 
 export * from "./theme"
 export * from "./components";

package/src/theme/Colors.ts

@@ -49,6 +49,8 @@ export interface ThemeType {
     secondary?: string[];
     [key: string]: string[] | undefined;
   };
+  skeletonBackgroundColor? : string;
+  skeletonItemColor?: string;
 }
 
 // Updated Light Theme - True black and white oriented, less muted
@@ -96,6 +98,9 @@ export const lightTheme: ThemeType = {
     xl: 32,
     xxl: 64,
   },
+
+  skeletonBackgroundColor: "#e0e0e0",
+  skeletonItemColor: "#2c2c2c"
 };
 
 // Updated Dark Theme - True black and white oriented, less muted
@@ -143,4 +148,7 @@ export const darkTheme: ThemeType = {
     xl: 32,
     xxl: 64,
   },
+
+  skeletonBackgroundColor: "#f5f5f5",
+  skeletonItemColor: "#444444"
 };