@dryanovski/react-native-components 1.0.1 → 1.0.3

package/lib/module/components/Card/Card.js

@@ -0,0 +1,34 @@
+"use strict";
+
+import { forwardRef } from 'react';
+import Surface from "../Surface/Surface.js";
+import Styles from "./styles.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Card component to display content within a styled container
+ * @param {React.ReactNode} children - The content to be displayed inside the card
+ * @param {ViewStyle} style - Additional styles for the card container
+ * @returns {JSX.Element} The Card component
+ * @example
+ * <Card style={{ margin: 10 }}>
+ *   <Text>This is a card</Text>
+ * </Card>
+ */
+export const Card = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    children,
+    variant = 'default',
+    style = {},
+    ...rest
+  } = props;
+  return /*#__PURE__*/_jsx(Surface, {
+    ref: ref,
+    variant: variant,
+    style: [Styles.container, style],
+    ...rest,
+    children: children
+  });
+});
+Card.displayName = 'Card';
+export default Card;
+//# sourceMappingURL=Card.js.map

package/lib/module/components/Card/Card.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["forwardRef","Surface","Styles","jsx","_jsx","Card","props","ref","children","variant","style","rest","container","displayName"],"sourceRoot":"../../../../src","sources":["components/Card/Card.tsx"],"mappings":";;AAAA,SAASA,UAAU,QAAQ,OAAO;AAElC,OAAOC,OAAO,MAAM,uBAAoB;AACxC,OAAOC,MAAM,MAAM,aAAU;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAG9B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,IAAI,gBAAGL,UAAU,CAAqB,CAACM,KAAK,EAAEC,GAAG,KAAK;EACjE,MAAM;IAAEC,QAAQ;IAAEC,OAAO,GAAG,SAAS;IAAEC,KAAK,GAAG,CAAC,CAAC;IAAE,GAAGC;EAAK,CAAC,GAAGL,KAAK;EACpE,oBACEF,IAAA,CAACH,OAAO;IACNM,GAAG,EAAEA,GAAI;IACTE,OAAO,EAAEA,OAAQ;IACjBC,KAAK,EAAE,CAACR,MAAM,CAACU,SAAS,EAAEF,KAAK,CAAE;IAAA,GAC7BC,IAAI;IAAAH,QAAA,EAEPA;EAAQ,CACF,CAAC;AAEd,CAAC,CAAC;AAEFH,IAAI,CAACQ,WAAW,GAAG,MAAM;AAEzB,eAAeR,IAAI","ignoreList":[]}

package/lib/module/components/Card/styles.js

@@ -0,0 +1,28 @@
+"use strict";
+
+import Style from "../../utils/Style.js";
+export const DEFAULT_CARD = {
+  border_radius: 8,
+  padding: 16,
+  shadow_color: '#000',
+  shadow_offset: {
+    width: 0,
+    height: 2
+  },
+  shadow_opacity: 0.1,
+  shadow_radius: 4,
+  elevation: 3
+};
+export const Styles = Style.create({
+  container: {
+    borderRadius: DEFAULT_CARD.border_radius,
+    padding: DEFAULT_CARD.padding,
+    shadowColor: DEFAULT_CARD.shadow_color,
+    shadowOffset: DEFAULT_CARD.shadow_offset,
+    shadowOpacity: DEFAULT_CARD.shadow_opacity,
+    shadowRadius: DEFAULT_CARD.shadow_radius,
+    elevation: DEFAULT_CARD.elevation
+  }
+});
+export default Styles;
+//# sourceMappingURL=styles.js.map

package/lib/module/components/Card/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Style","DEFAULT_CARD","border_radius","padding","shadow_color","shadow_offset","width","height","shadow_opacity","shadow_radius","elevation","Styles","create","container","borderRadius","shadowColor","shadowOffset","shadowOpacity","shadowRadius"],"sourceRoot":"../../../../src","sources":["components/Card/styles.ts"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,sBAAmB;AAErC,OAAO,MAAMC,YAAY,GAAG;EAC1BC,aAAa,EAAE,CAAC;EAChBC,OAAO,EAAE,EAAE;EACXC,YAAY,EAAE,MAAM;EACpBC,aAAa,EAAE;IAAEC,KAAK,EAAE,CAAC;IAAEC,MAAM,EAAE;EAAE,CAAC;EACtCC,cAAc,EAAE,GAAG;EACnBC,aAAa,EAAE,CAAC;EAChBC,SAAS,EAAE;AACb,CAAC;AAID,OAAO,MAAMC,MAAM,GAAGX,KAAK,CAACY,MAAM,CAAC;EACjCC,SAAS,EAAE;IACTC,YAAY,EAAEb,YAAY,CAACC,aAAa;IACxCC,OAAO,EAAEF,YAAY,CAACE,OAAO;IAC7BY,WAAW,EAAEd,YAAY,CAACG,YAAY;IACtCY,YAAY,EAAEf,YAAY,CAACI,aAAa;IACxCY,aAAa,EAAEhB,YAAY,CAACO,cAAc;IAC1CU,YAAY,EAAEjB,YAAY,CAACQ,aAAa;IACxCC,SAAS,EAAET,YAAY,CAACS;EAC1B;AACF,CAAC,CAAC;AAEF,eAAeC,MAAM","ignoreList":[]}

package/lib/module/components/Card/types.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=types.js.map

package/lib/module/components/Card/types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["components/Card/types.ts"],"mappings":"","ignoreList":[]}

package/lib/module/components/Surface/Surface.js

@@ -0,0 +1,34 @@
+"use strict";
+
+import { forwardRef } from 'react';
+import { View } from 'react-native';
+import { Styles } from "./styles.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Surface component to provide a styled container
+ * @param {React.ReactNode} children - The content to be displayed inside the surface
+ * @param {ViewStyle} style - Additional styles for the surface container
+ * @param {SurfaceVariants} variant - The variant of the surface styling
+ * @returns {JSX.Element} The Surface component
+ * @example
+ * <Surface variant="secondary" style={{ margin: 10 }}>
+ *   <Text>This is a surface</Text>
+ * </Surface>
+ */
+export const Surface = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    children,
+    variant = 'default',
+    style,
+    ...rest
+  } = props;
+  return /*#__PURE__*/_jsx(View, {
+    ref: ref,
+    style: [Styles.base, Styles[variant], style],
+    ...rest,
+    children: children
+  });
+});
+Surface.displayName = 'Surface';
+export default Surface;
+//# sourceMappingURL=Surface.js.map

package/lib/module/components/Surface/Surface.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["forwardRef","View","Styles","jsx","_jsx","Surface","props","ref","children","variant","style","rest","base","displayName"],"sourceRoot":"../../../../src","sources":["components/Surface/Surface.tsx"],"mappings":";;AAAA,SAASA,UAAU,QAAQ,OAAO;AAClC,SAASC,IAAI,QAAQ,cAAc;AAEnC,SAASC,MAAM,QAAQ,aAAU;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAGlC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,OAAO,gBAAGL,UAAU,CAAwB,CAACM,KAAK,EAAEC,GAAG,KAAK;EACvE,MAAM;IAAEC,QAAQ;IAAEC,OAAO,GAAG,SAAS;IAAEC,KAAK;IAAE,GAAGC;EAAK,CAAC,GAAGL,KAAK;EAC/D,oBACEF,IAAA,CAACH,IAAI;IAACM,GAAG,EAAEA,GAAI;IAACG,KAAK,EAAE,CAACR,MAAM,CAACU,IAAI,EAAEV,MAAM,CAACO,OAAO,CAAC,EAAEC,KAAK,CAAE;IAAA,GAAKC,IAAI;IAAAH,QAAA,EACnEA;EAAQ,CACL,CAAC;AAEX,CAAC,CAAC;AAEFH,OAAO,CAACQ,WAAW,GAAG,SAAS;AAE/B,eAAeR,OAAO","ignoreList":[]}

package/lib/module/components/Surface/styles.js

@@ -0,0 +1,25 @@
+"use strict";
+
+import Style from "../../utils/Style.js";
+export const DEFAULT_SURFACE = {
+  default_background_color: '#fff',
+  secondary_background_color: '#f0f0f0',
+  transparent_background_color: 'transparent'
+};
+export const Styles = Style.create({
+  base: {},
+  /**
+   * Variants
+   */
+
+  default: {
+    backgroundColor: DEFAULT_SURFACE.default_background_color
+  },
+  secondary: {
+    backgroundColor: DEFAULT_SURFACE.secondary_background_color
+  },
+  transparent: {
+    backgroundColor: DEFAULT_SURFACE.transparent_background_color
+  }
+});
+//# sourceMappingURL=styles.js.map

package/lib/module/components/Surface/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Style","DEFAULT_SURFACE","default_background_color","secondary_background_color","transparent_background_color","Styles","create","base","default","backgroundColor","secondary","transparent"],"sourceRoot":"../../../../src","sources":["components/Surface/styles.ts"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,sBAAmB;AAErC,OAAO,MAAMC,eAAe,GAAG;EAC7BC,wBAAwB,EAAE,MAAM;EAChCC,0BAA0B,EAAE,SAAS;EACrCC,4BAA4B,EAAE;AAChC,CAAC;AAID,OAAO,MAAMC,MAAM,GAAGL,KAAK,CAACM,MAAM,CAAC;EACjCC,IAAI,EAAE,CAAC,CAAC;EAER;AACF;AACA;;EAEEC,OAAO,EAAE;IACPC,eAAe,EAAER,eAAe,CAACC;EACnC,CAAC;EACDQ,SAAS,EAAE;IACTD,eAAe,EAAER,eAAe,CAACE;EACnC,CAAC;EAEDQ,WAAW,EAAE;IACXF,eAAe,EAAER,eAAe,CAACG;EACnC;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/module/components/Surface/types.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=types.js.map

package/lib/module/components/Surface/types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["components/Surface/types.ts"],"mappings":"","ignoreList":[]}

package/lib/module/index.js

@@ -1,5 +1,8 @@
 "use strict";
 
+// Export Components
+export * from "./components/Card/Card.js";
+
 // Provider
 export * from "./providers/ThemeProvider.js";
 //# sourceMappingURL=index.js.map

package/lib/module/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;AAAA;AACA,cAAc,8BAA2B","ignoreList":[]}
+{"version":3,"names":[],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;AAAA;AACA,cAAc,2BAAwB;;AAEtC;AACA,cAAc,8BAA2B","ignoreList":[]}

package/lib/module/themes/light.js

@@ -0,0 +1,24 @@
+"use strict";
+
+export const LightTheme = {
+  components: {
+    card: {
+      border_radius: 8,
+      padding: 16,
+      shadow_color: '#000',
+      shadow_offset: {
+        width: 0,
+        height: 2
+      },
+      shadow_opacity: 0.1,
+      shadow_radius: 4,
+      elevation: 3
+    },
+    surface: {
+      default_background_color: '#fff',
+      secondary_background_color: '#f0f0f0',
+      transparent_background_color: 'transparent'
+    }
+  }
+};
+//# sourceMappingURL=light.js.map

package/lib/module/themes/light.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["LightTheme","components","card","border_radius","padding","shadow_color","shadow_offset","width","height","shadow_opacity","shadow_radius","elevation","surface","default_background_color","secondary_background_color","transparent_background_color"],"sourceRoot":"../../../src","sources":["themes/light.ts"],"mappings":";;AAEA,OAAO,MAAMA,UAA2B,GAAG;EACzCC,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,aAAa,EAAE,CAAC;MAChBC,OAAO,EAAE,EAAE;MACXC,YAAY,EAAE,MAAM;MACpBC,aAAa,EAAE;QAAEC,KAAK,EAAE,CAAC;QAAEC,MAAM,EAAE;MAAE,CAAC;MACtCC,cAAc,EAAE,GAAG;MACnBC,aAAa,EAAE,CAAC;MAChBC,SAAS,EAAE;IACb,CAAC;IACDC,OAAO,EAAE;MACPC,wBAAwB,EAAE,MAAM;MAChCC,0BAA0B,EAAE,SAAS;MACrCC,4BAA4B,EAAE;IAChC;EACF;AACF,CAAC","ignoreList":[]}

package/lib/module/themes/types.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=types.js.map

package/lib/module/themes/types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../src","sources":["themes/types.ts"],"mappings":"","ignoreList":[]}

package/lib/module/types/general.types.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=general.types.js.map

package/lib/module/types/general.types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../src","sources":["types/general.types.ts"],"mappings":"","ignoreList":[]}

package/lib/module/utils/Style.js

@@ -0,0 +1,6 @@
+"use strict";
+
+import { StyleSheet } from 'react-native';
+export const Style = StyleSheet;
+export default Style;
+//# sourceMappingURL=Style.js.map

package/lib/module/utils/Style.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["StyleSheet","Style"],"sourceRoot":"../../../src","sources":["utils/Style.ts"],"mappings":";;AAAA,SAASA,UAAU,QAAQ,cAAc;AAEzC,OAAO,MAAMC,KAAK,GAAGD,UAAU;AAE/B,eAAeC,KAAK","ignoreList":[]}

package/lib/typescript/src/components/Card/Card.d.ts

@@ -0,0 +1,14 @@
+import type { CardProps } from './types';
+/**
+ * Card component to display content within a styled container
+ * @param {React.ReactNode} children - The content to be displayed inside the card
+ * @param {ViewStyle} style - Additional styles for the card container
+ * @returns {JSX.Element} The Card component
+ * @example
+ * <Card style={{ margin: 10 }}>
+ *   <Text>This is a card</Text>
+ * </Card>
+ */
+export declare const Card: import("react").ForwardRefExoticComponent<CardProps & import("react").RefAttributes<import("react-native").View>>;
+export default Card;
+//# sourceMappingURL=Card.d.ts.map

package/lib/typescript/src/components/Card/Card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC;;;;;;;;;GASG;AACH,eAAO,MAAM,IAAI,mHAYf,CAAC;AAIH,eAAe,IAAI,CAAC"}

package/lib/typescript/src/components/Card/styles.d.ts

@@ -0,0 +1,29 @@
+export declare const DEFAULT_CARD: {
+    border_radius: number;
+    padding: number;
+    shadow_color: string;
+    shadow_offset: {
+        width: number;
+        height: number;
+    };
+    shadow_opacity: number;
+    shadow_radius: number;
+    elevation: number;
+};
+export type CardStyleVariables = typeof DEFAULT_CARD;
+export declare const Styles: {
+    container: {
+        borderRadius: number;
+        padding: number;
+        shadowColor: string;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowOpacity: number;
+        shadowRadius: number;
+        elevation: number;
+    };
+};
+export default Styles;
+//# sourceMappingURL=styles.d.ts.map

package/lib/typescript/src/components/Card/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Card/styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY;;;;;;;;;;;CAQxB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,OAAO,YAAY,CAAC;AAErD,eAAO,MAAM,MAAM;;;;;;;;;;;;;CAUjB,CAAC;AAEH,eAAe,MAAM,CAAC"}

package/lib/typescript/src/components/Card/types.d.ts

@@ -0,0 +1,17 @@
+import type { ViewProps, ViewStyle } from 'react-native';
+import type { SurfaceVariants } from '../Surface/types';
+/**
+ * Props for the Card component
+ */
+export interface CardProps extends ViewProps {
+    /**
+     * Children elements to be rendered inside the Card
+     */
+    children?: React.ReactNode;
+    /**
+     * Custom styles for the Card container
+     */
+    style?: ViewStyle;
+    variant?: SurfaceVariants;
+}
+//# sourceMappingURL=types.d.ts.map

package/lib/typescript/src/components/Card/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/Card/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAExD;;GAEG;AACH,MAAM,WAAW,SAAU,SAAQ,SAAS;IAC1C;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,OAAO,CAAC,EAAE,eAAe,CAAC;CAC3B"}

package/lib/typescript/src/components/Surface/Surface.d.ts

@@ -0,0 +1,16 @@
+import { View } from 'react-native';
+import type { SurfaceProps } from './types';
+/**
+ * Surface component to provide a styled container
+ * @param {React.ReactNode} children - The content to be displayed inside the surface
+ * @param {ViewStyle} style - Additional styles for the surface container
+ * @param {SurfaceVariants} variant - The variant of the surface styling
+ * @returns {JSX.Element} The Surface component
+ * @example
+ * <Surface variant="secondary" style={{ margin: 10 }}>
+ *   <Text>This is a surface</Text>
+ * </Surface>
+ */
+export declare const Surface: import("react").ForwardRefExoticComponent<SurfaceProps & import("react").RefAttributes<View>>;
+export default Surface;
+//# sourceMappingURL=Surface.d.ts.map

package/lib/typescript/src/components/Surface/Surface.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Surface.d.ts","sourceRoot":"","sources":["../../../../../src/components/Surface/Surface.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAGpC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,OAAO,+FAOlB,CAAC;AAIH,eAAe,OAAO,CAAC"}

package/lib/typescript/src/components/Surface/styles.d.ts

@@ -0,0 +1,22 @@
+export declare const DEFAULT_SURFACE: {
+    default_background_color: string;
+    secondary_background_color: string;
+    transparent_background_color: string;
+};
+export type SurfaceStyleVariables = typeof DEFAULT_SURFACE;
+export declare const Styles: {
+    base: {};
+    /**
+     * Variants
+     */
+    default: {
+        backgroundColor: string;
+    };
+    secondary: {
+        backgroundColor: string;
+    };
+    transparent: {
+        backgroundColor: string;
+    };
+};
+//# sourceMappingURL=styles.d.ts.map

package/lib/typescript/src/components/Surface/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Surface/styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe;;;;CAI3B,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,OAAO,eAAe,CAAC;AAE3D,eAAO,MAAM,MAAM;;IAGjB;;OAEG;;;;;;;;;;CAYH,CAAC"}

package/lib/typescript/src/components/Surface/types.d.ts

@@ -0,0 +1,12 @@
+import type { ViewProps, ViewStyle } from 'react-native';
+export type SurfaceVariants = 'default' | 'secondary' | 'transparent';
+export interface SurfaceProps extends ViewProps {
+    children: React.ReactNode;
+    style?: ViewStyle | ViewStyle[];
+    /**
+     * The variant of the Surface component.
+     * @default 'default'
+     */
+    variant?: SurfaceVariants;
+}
+//# sourceMappingURL=types.d.ts.map

package/lib/typescript/src/components/Surface/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/Surface/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,WAAW,GAAG,aAAa,CAAC;AAEtE,MAAM,WAAW,YAAa,SAAQ,SAAS;IAC7C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;IAEhC;;;OAGG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;CAC3B"}

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

@@ -1,2 +1,3 @@
+export * from './components/Card/Card';
 export * from './providers/ThemeProvider';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AACA,cAAc,2BAA2B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AACA,cAAc,wBAAwB,CAAC;AAGvC,cAAc,2BAA2B,CAAC"}

package/lib/typescript/src/themes/light.d.ts

@@ -0,0 +1,3 @@
+import type { ThemeDefinition } from './types';
+export declare const LightTheme: ThemeDefinition;
+//# sourceMappingURL=light.d.ts.map

package/lib/typescript/src/themes/light.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"light.d.ts","sourceRoot":"","sources":["../../../../src/themes/light.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE/C,eAAO,MAAM,UAAU,EAAE,eAiBxB,CAAC"}

package/lib/typescript/src/themes/types.d.ts

@@ -0,0 +1,9 @@
+import type { CardStyleVariables } from '../components/Card/styles';
+import type { SurfaceStyleVariables } from '../components/Surface/styles';
+export type ThemeDefinition = {
+    components: {
+        card: CardStyleVariables;
+        surface: SurfaceStyleVariables;
+    };
+};
+//# sourceMappingURL=types.d.ts.map

package/lib/typescript/src/themes/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/themes/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AAE1E,MAAM,MAAM,eAAe,GAAG;IAC5B,UAAU,EAAE;QACV,IAAI,EAAE,kBAAkB,CAAC;QACzB,OAAO,EAAE,qBAAqB,CAAC;KAChC,CAAC;CACH,CAAC"}

package/lib/typescript/src/types/general.types.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentRef } from 'react';
+import type { View } from 'react-native';
+export type ViewRef = ComponentRef<typeof View>;
+//# sourceMappingURL=general.types.d.ts.map

package/lib/typescript/src/types/general.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"general.types.d.ts","sourceRoot":"","sources":["../../../../src/types/general.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEzC,MAAM,MAAM,OAAO,GAAG,YAAY,CAAC,OAAO,IAAI,CAAC,CAAC"}

package/lib/typescript/src/utils/Style.d.ts

@@ -0,0 +1,4 @@
+import { StyleSheet } from 'react-native';
+export declare const Style: typeof StyleSheet;
+export default Style;
+//# sourceMappingURL=Style.d.ts.map

package/lib/typescript/src/utils/Style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Style.d.ts","sourceRoot":"","sources":["../../../../src/utils/Style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,eAAO,MAAM,KAAK,mBAAa,CAAC;AAEhC,eAAe,KAAK,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dryanovski/react-native-components",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "Collection of reusable React Native components for building mobile applications.",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
@@ -17,6 +17,12 @@
     "src",
     "lib"
   ],
+  "scripts": {
+    "test": "jest",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "clean": "del-cli lib",
+    "prepare": "bob build"
+  },
   "keywords": [
     "react-native",
     "ios",
@@ -106,10 +112,5 @@
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-native": "^5.0.0"
-  },
-  "scripts": {
-    "test": "jest",
-    "lint": "eslint \"**/*.{js,ts,tsx}\"",
-    "clean": "del-cli lib"
   }
-}
+}

package/src/components/Card/Card.tsx

@@ -0,0 +1,33 @@
+import { forwardRef } from 'react';
+import type { ViewRef } from '../../types/general.types';
+import Surface from '../Surface/Surface';
+import Styles from './styles';
+import type { CardProps } from './types';
+
+/**
+ * Card component to display content within a styled container
+ * @param {React.ReactNode} children - The content to be displayed inside the card
+ * @param {ViewStyle} style - Additional styles for the card container
+ * @returns {JSX.Element} The Card component
+ * @example
+ * <Card style={{ margin: 10 }}>
+ *   <Text>This is a card</Text>
+ * </Card>
+ */
+export const Card = forwardRef<ViewRef, CardProps>((props, ref) => {
+  const { children, variant = 'default', style = {}, ...rest } = props;
+  return (
+    <Surface
+      ref={ref}
+      variant={variant}
+      style={[Styles.container, style]}
+      {...rest}
+    >
+      {children}
+    </Surface>
+  );
+});
+
+Card.displayName = 'Card';
+
+export default Card;

package/src/components/Card/styles.ts

@@ -0,0 +1,27 @@
+import Style from '../../utils/Style';
+
+export const DEFAULT_CARD = {
+  border_radius: 8,
+  padding: 16,
+  shadow_color: '#000',
+  shadow_offset: { width: 0, height: 2 },
+  shadow_opacity: 0.1,
+  shadow_radius: 4,
+  elevation: 3,
+};
+
+export type CardStyleVariables = typeof DEFAULT_CARD;
+
+export const Styles = Style.create({
+  container: {
+    borderRadius: DEFAULT_CARD.border_radius,
+    padding: DEFAULT_CARD.padding,
+    shadowColor: DEFAULT_CARD.shadow_color,
+    shadowOffset: DEFAULT_CARD.shadow_offset,
+    shadowOpacity: DEFAULT_CARD.shadow_opacity,
+    shadowRadius: DEFAULT_CARD.shadow_radius,
+    elevation: DEFAULT_CARD.elevation,
+  },
+});
+
+export default Styles;

package/src/components/Card/types.ts

@@ -0,0 +1,18 @@
+import type { ViewProps, ViewStyle } from 'react-native';
+import type { SurfaceVariants } from '../Surface/types';
+
+/**
+ * Props for the Card component
+ */
+export interface CardProps extends ViewProps {
+  /**
+   * Children elements to be rendered inside the Card
+   */
+  children?: React.ReactNode;
+  /**
+   * Custom styles for the Card container
+   */
+  style?: ViewStyle;
+
+  variant?: SurfaceVariants;
+}

package/src/components/Surface/Surface.tsx

@@ -0,0 +1,29 @@
+import { forwardRef } from 'react';
+import { View } from 'react-native';
+import type { ViewRef } from '../../types/general.types';
+import { Styles } from './styles';
+import type { SurfaceProps } from './types';
+
+/**
+ * Surface component to provide a styled container
+ * @param {React.ReactNode} children - The content to be displayed inside the surface
+ * @param {ViewStyle} style - Additional styles for the surface container
+ * @param {SurfaceVariants} variant - The variant of the surface styling
+ * @returns {JSX.Element} The Surface component
+ * @example
+ * <Surface variant="secondary" style={{ margin: 10 }}>
+ *   <Text>This is a surface</Text>
+ * </Surface>
+ */
+export const Surface = forwardRef<ViewRef, SurfaceProps>((props, ref) => {
+  const { children, variant = 'default', style, ...rest } = props;
+  return (
+    <View ref={ref} style={[Styles.base, Styles[variant], style]} {...rest}>
+      {children}
+    </View>
+  );
+});
+
+Surface.displayName = 'Surface';
+
+export default Surface;

package/src/components/Surface/styles.ts

@@ -0,0 +1,28 @@
+import Style from '../../utils/Style';
+
+export const DEFAULT_SURFACE = {
+  default_background_color: '#fff',
+  secondary_background_color: '#f0f0f0',
+  transparent_background_color: 'transparent',
+};
+
+export type SurfaceStyleVariables = typeof DEFAULT_SURFACE;
+
+export const Styles = Style.create({
+  base: {},
+
+  /**
+   * Variants
+   */
+
+  default: {
+    backgroundColor: DEFAULT_SURFACE.default_background_color,
+  },
+  secondary: {
+    backgroundColor: DEFAULT_SURFACE.secondary_background_color,
+  },
+
+  transparent: {
+    backgroundColor: DEFAULT_SURFACE.transparent_background_color,
+  },
+});

package/src/components/Surface/types.ts

@@ -0,0 +1,14 @@
+import type { ViewProps, ViewStyle } from 'react-native';
+
+export type SurfaceVariants = 'default' | 'secondary' | 'transparent';
+
+export interface SurfaceProps extends ViewProps {
+  children: React.ReactNode;
+  style?: ViewStyle | ViewStyle[];
+
+  /**
+   * The variant of the Surface component.
+   * @default 'default'
+   */
+  variant?: SurfaceVariants;
+}

package/src/index.tsx

@@ -1,2 +1,5 @@
+// Export Components
+export * from './components/Card/Card';
+
 // Provider
 export * from './providers/ThemeProvider';

package/src/themes/light.ts

@@ -0,0 +1,20 @@
+import type { ThemeDefinition } from './types';
+
+export const LightTheme: ThemeDefinition = {
+  components: {
+    card: {
+      border_radius: 8,
+      padding: 16,
+      shadow_color: '#000',
+      shadow_offset: { width: 0, height: 2 },
+      shadow_opacity: 0.1,
+      shadow_radius: 4,
+      elevation: 3,
+    },
+    surface: {
+      default_background_color: '#fff',
+      secondary_background_color: '#f0f0f0',
+      transparent_background_color: 'transparent',
+    },
+  },
+};

package/src/themes/types.ts

@@ -0,0 +1,9 @@
+import type { CardStyleVariables } from '../components/Card/styles';
+import type { SurfaceStyleVariables } from '../components/Surface/styles';
+
+export type ThemeDefinition = {
+  components: {
+    card: CardStyleVariables;
+    surface: SurfaceStyleVariables;
+  };
+};

package/src/types/general.types.ts

@@ -0,0 +1,4 @@
+import type { ComponentRef } from 'react';
+import type { View } from 'react-native';
+
+export type ViewRef = ComponentRef<typeof View>;

package/src/utils/Style.ts

@@ -0,0 +1,5 @@
+import { StyleSheet } from 'react-native';
+
+export const Style = StyleSheet;
+
+export default Style;