@dryanovski/react-native-components 1.0.2 → 1.0.3

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

@@ -1,6 +1,7 @@
 "use strict";
 
-import { View } from 'react-native';
+import { forwardRef } from 'react';
+import Surface from "../Surface/Surface.js";
 import Styles from "./styles.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
@@ -13,17 +14,21 @@ import { jsx as _jsx } from "react/jsx-runtime";
  *   <Text>This is a card</Text>
  * </Card>
  */
-export const Card = ({
-  children,
-  style,
-  ...props
-}) => {
-  return /*#__PURE__*/_jsx(View, {
+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],
-    ...props,
+    ...rest,
     children: children
   });
-};
+});
 Card.displayName = 'Card';
 export default Card;
 //# sourceMappingURL=Card.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["View","Styles","jsx","_jsx","Card","children","style","props","container","displayName"],"sourceRoot":"../../../../src","sources":["components/Card/Card.tsx"],"mappings":";;AAAA,SAASA,IAAI,QAAQ,cAAc;AACnC,OAAOC,MAAM,MAAM,aAAU;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAG9B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,IAAyB,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,KAAK;EAAE,GAAGC;AAAM,CAAC,KAAK;EAC1E,oBACEJ,IAAA,CAACH,IAAI;IAACM,KAAK,EAAE,CAACL,MAAM,CAACO,SAAS,EAAEF,KAAK,CAAE;IAAA,GAAKC,KAAK;IAAAF,QAAA,EAC9CA;EAAQ,CACL,CAAC;AAEX,CAAC;AAEDD,IAAI,CAACK,WAAW,GAAG,MAAM;AAEzB,eAAeL,IAAI","ignoreList":[]}
+{"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

@@ -1,29 +1,27 @@
 "use strict";
 
 import Style from "../../utils/Style.js";
-const DEFAULT_CARD = {
-  card_background_color: '#fff',
-  card_border_radius: 8,
-  card_padding: 16,
-  card_shadow_color: '#000',
-  card_shadow_offset: {
+export const DEFAULT_CARD = {
+  border_radius: 8,
+  padding: 16,
+  shadow_color: '#000',
+  shadow_offset: {
     width: 0,
     height: 2
   },
-  card_shadow_opacity: 0.1,
-  card_shadow_radius: 4,
-  card_elevation: 3
+  shadow_opacity: 0.1,
+  shadow_radius: 4,
+  elevation: 3
 };
 export const Styles = Style.create({
   container: {
-    backgroundColor: DEFAULT_CARD.card_background_color,
-    borderRadius: DEFAULT_CARD.card_border_radius,
-    padding: DEFAULT_CARD.card_padding,
-    shadowColor: DEFAULT_CARD.card_shadow_color,
-    shadowOffset: DEFAULT_CARD.card_shadow_offset,
-    shadowOpacity: DEFAULT_CARD.card_shadow_opacity,
-    shadowRadius: DEFAULT_CARD.card_shadow_radius,
-    elevation: DEFAULT_CARD.card_elevation
+    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/lib/module/components/Card/styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["Style","DEFAULT_CARD","card_background_color","card_border_radius","card_padding","card_shadow_color","card_shadow_offset","width","height","card_shadow_opacity","card_shadow_radius","card_elevation","Styles","create","container","backgroundColor","borderRadius","padding","shadowColor","shadowOffset","shadowOpacity","shadowRadius","elevation"],"sourceRoot":"../../../../src","sources":["components/Card/styles.ts"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,sBAAmB;AAErC,MAAMC,YAAY,GAAG;EACnBC,qBAAqB,EAAE,MAAM;EAC7BC,kBAAkB,EAAE,CAAC;EACrBC,YAAY,EAAE,EAAE;EAChBC,iBAAiB,EAAE,MAAM;EACzBC,kBAAkB,EAAE;IAAEC,KAAK,EAAE,CAAC;IAAEC,MAAM,EAAE;EAAE,CAAC;EAC3CC,mBAAmB,EAAE,GAAG;EACxBC,kBAAkB,EAAE,CAAC;EACrBC,cAAc,EAAE;AAClB,CAAC;AAED,OAAO,MAAMC,MAAM,GAAGZ,KAAK,CAACa,MAAM,CAAC;EACjCC,SAAS,EAAE;IACTC,eAAe,EAAEd,YAAY,CAACC,qBAAqB;IACnDc,YAAY,EAAEf,YAAY,CAACE,kBAAkB;IAC7Cc,OAAO,EAAEhB,YAAY,CAACG,YAAY;IAClCc,WAAW,EAAEjB,YAAY,CAACI,iBAAiB;IAC3Cc,YAAY,EAAElB,YAAY,CAACK,kBAAkB;IAC7Cc,aAAa,EAAEnB,YAAY,CAACQ,mBAAmB;IAC/CY,YAAY,EAAEpB,YAAY,CAACS,kBAAkB;IAC7CY,SAAS,EAAErB,YAAY,CAACU;EAC1B;AACF,CAAC,CAAC;AAEF,eAAeC,MAAM","ignoreList":[]}
+{"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/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/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/typescript/src/components/Card/Card.d.ts

@@ -9,6 +9,6 @@ import type { CardProps } from './types';
  *   <Text>This is a card</Text>
  * </Card>
  */
-export declare const Card: React.FC<CardProps>;
+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

@@ -1 +1 @@
-{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC;;;;;;;;;GASG;AACH,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAMpC,CAAC;AAIF,eAAe,IAAI,CAAC"}
+{"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

@@ -1,6 +1,18 @@
+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: {
-        backgroundColor: string;
         borderRadius: number;
         padding: number;
         shadowColor: string;

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Card/styles.ts"],"names":[],"mappings":"AAaA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;CAWjB,CAAC;AAEH,eAAe,MAAM,CAAC"}
+{"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

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

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/Card/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpD;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG;IACtB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,GAAG,IAAI,CAAC"}
+{"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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dryanovski/react-native-components",
-  "version": "1.0.2",
+  "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",

package/src/components/Card/Card.tsx

@@ -1,4 +1,6 @@
-import { View } from 'react-native';
+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';
 
@@ -12,13 +14,19 @@ import type { CardProps } from './types';
  *   <Text>This is a card</Text>
  * </Card>
  */
-export const Card: React.FC<CardProps> = ({ children, style, ...props }) => {
+export const Card = forwardRef<ViewRef, CardProps>((props, ref) => {
+  const { children, variant = 'default', style = {}, ...rest } = props;
   return (
-    <View style={[Styles.container, style]} {...props}>
+    <Surface
+      ref={ref}
+      variant={variant}
+      style={[Styles.container, style]}
+      {...rest}
+    >
       {children}
-    </View>
+    </Surface>
   );
-};
+});
 
 Card.displayName = 'Card';
 

package/src/components/Card/styles.ts

@@ -1,26 +1,26 @@
 import Style from '../../utils/Style';
 
-const DEFAULT_CARD = {
-  card_background_color: '#fff',
-  card_border_radius: 8,
-  card_padding: 16,
-  card_shadow_color: '#000',
-  card_shadow_offset: { width: 0, height: 2 },
-  card_shadow_opacity: 0.1,
-  card_shadow_radius: 4,
-  card_elevation: 3,
+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: {
-    backgroundColor: DEFAULT_CARD.card_background_color,
-    borderRadius: DEFAULT_CARD.card_border_radius,
-    padding: DEFAULT_CARD.card_padding,
-    shadowColor: DEFAULT_CARD.card_shadow_color,
-    shadowOffset: DEFAULT_CARD.card_shadow_offset,
-    shadowOpacity: DEFAULT_CARD.card_shadow_opacity,
-    shadowRadius: DEFAULT_CARD.card_shadow_radius,
-    elevation: DEFAULT_CARD.card_elevation,
+    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,
   },
 });
 

package/src/components/Card/types.ts

@@ -1,9 +1,18 @@
-import type { View, ViewStyle } from 'react-native';
+import type { ViewProps, ViewStyle } from 'react-native';
+import type { SurfaceVariants } from '../Surface/types';
 
 /**
  * Props for the Card component
  */
-export type CardProps = {
+export interface CardProps extends ViewProps {
+  /**
+   * Children elements to be rendered inside the Card
+   */
   children?: React.ReactNode;
+  /**
+   * Custom styles for the Card container
+   */
   style?: ViewStyle;
-} & View;
+
+  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/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>;