@robin-ux/native 0.1.3 → 0.1.4

package/build/components/Card.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import { ViewProps } from "react-native";
+import { spacing } from "../utils/styles";
+type CardVariant = "default" | "elevated" | "outlined";
+export interface CardProps extends Omit<ViewProps, "style"> {
+    variant?: CardVariant;
+    padding?: keyof typeof spacing;
+    style?: ViewProps["style"];
+    children: React.ReactNode;
+    bg?: "primary" | "secondary";
+}
+export declare function Card({ variant, padding, style, children, bg, ...props }: CardProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=Card.d.ts.map

package/build/components/Card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/components/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAoB,SAAS,EAAE,MAAM,cAAc,CAAC;AAE3D,OAAO,EAAyB,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAEjE,KAAK,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAEvD,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC;IACvD,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,OAAO,OAAO,CAAC;IAC/B,KAAK,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IAC3B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,EAAE,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;CAChC;AAED,wBAAgB,IAAI,CAAC,EAAE,OAAmB,EAAE,OAAc,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,qBA+BrG"}

package/build/components/Card.js

@@ -0,0 +1,38 @@
+import React from "react";
+import { StyleSheet, View } from "react-native";
+import { useTheme } from "../theme";
+import { borderRadius, shadows, spacing } from "../utils/styles";
+export function Card({ variant = "default", padding = "md", style, children, bg, ...props }) {
+    const { colors } = useTheme();
+    let backgroundColor = colors.card;
+    if (bg === "primary") {
+        backgroundColor = colors.background;
+    }
+    else if (bg === "secondary") {
+        backgroundColor = colors.background;
+    }
+    const variantStyles = {
+        default: {
+            backgroundColor: backgroundColor,
+        },
+        elevated: {
+            backgroundColor: backgroundColor,
+            ...shadows.md,
+        },
+        outlined: {
+            backgroundColor: backgroundColor,
+            borderWidth: 1,
+            borderColor: colors.border,
+        },
+    }[variant];
+    const cardStyle = [styles.card, variantStyles, { padding: spacing[padding] }, style];
+    return (<View style={cardStyle} {...props}>
+            {children}
+        </View>);
+}
+const styles = StyleSheet.create({
+    card: {
+        borderRadius: borderRadius.lg,
+    },
+});
+//# sourceMappingURL=Card.js.map

package/build/components/Card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../src/components/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,IAAI,EAAa,MAAM,cAAc,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AACpC,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAYjE,MAAM,UAAU,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,EAAE,OAAO,GAAG,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE,GAAG,KAAK,EAAa;IAClG,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAC;IAC9B,IAAI,eAAe,GAAG,MAAM,CAAC,IAAI,CAAC;IAClC,IAAI,EAAE,KAAK,SAAS,EAAE,CAAC;QACnB,eAAe,GAAG,MAAM,CAAC,UAAU,CAAC;IACxC,CAAC;SAAM,IAAI,EAAE,KAAK,WAAW,EAAE,CAAC;QAC5B,eAAe,GAAG,MAAM,CAAC,UAAU,CAAC;IACxC,CAAC;IAED,MAAM,aAAa,GAAG;QAClB,OAAO,EAAE;YACL,eAAe,EAAE,eAAe;SACnC;QACD,QAAQ,EAAE;YACN,eAAe,EAAE,eAAe;YAChC,GAAG,OAAO,CAAC,EAAE;SAChB;QACD,QAAQ,EAAE;YACN,eAAe,EAAE,eAAe;YAChC,WAAW,EAAE,CAAC;YACd,WAAW,EAAE,MAAM,CAAC,MAAM;SAC7B;KACJ,CAAC,OAAO,CAAC,CAAC;IAEX,MAAM,SAAS,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE,aAAa,EAAE,EAAE,OAAO,EAAE,OAAO,CAAC,OAAO,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC;IAErF,OAAO,CACH,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,CAAC,IAAI,KAAK,CAAC,CAC9B;YAAA,CAAC,QAAQ,CACb;QAAA,EAAE,IAAI,CAAC,CACV,CAAC;AACN,CAAC;AAED,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC7B,IAAI,EAAE;QACF,YAAY,EAAE,YAAY,CAAC,EAAE;KAChC;CACJ,CAAC,CAAC","sourcesContent":["import React from \"react\";\nimport { StyleSheet, View, ViewProps } from \"react-native\";\nimport { useTheme } from \"../theme\";\nimport { borderRadius, shadows, spacing } from \"../utils/styles\";\n\ntype CardVariant = \"default\" | \"elevated\" | \"outlined\";\n\nexport interface CardProps extends Omit<ViewProps, \"style\"> {\n    variant?: CardVariant;\n    padding?: keyof typeof spacing;\n    style?: ViewProps[\"style\"];\n    children: React.ReactNode;\n    bg?: \"primary\" | \"secondary\";\n}\n\nexport function Card({ variant = \"default\", padding = \"md\", style, children, bg, ...props }: CardProps) {\n    const { colors } = useTheme();\n    let backgroundColor = colors.card;\n    if (bg === \"primary\") {\n        backgroundColor = colors.background;\n    } else if (bg === \"secondary\") {\n        backgroundColor = colors.background;\n    }\n\n    const variantStyles = {\n        default: {\n            backgroundColor: backgroundColor,\n        },\n        elevated: {\n            backgroundColor: backgroundColor,\n            ...shadows.md,\n        },\n        outlined: {\n            backgroundColor: backgroundColor,\n            borderWidth: 1,\n            borderColor: colors.border,\n        },\n    }[variant];\n\n    const cardStyle = [styles.card, variantStyles, { padding: spacing[padding] }, style];\n\n    return (\n        <View style={cardStyle} {...props}>\n            {children}\n        </View>\n    );\n}\n\nconst styles = StyleSheet.create({\n    card: {\n        borderRadius: borderRadius.lg,\n    },\n});\n"]}

package/build/components/index.d.ts

@@ -16,4 +16,6 @@ export { FormView } from "./FormView";
 export type { FormViewProps } from "./FormView";
 export { TextArea } from "./TextArea";
 export type { TextAreaProps } from "./TextArea";
+export { Card } from "./Card";
+export type { CardProps } from "./Card";
 //# sourceMappingURL=index.d.ts.map

package/build/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAGvE,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AAGvF,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAC1D,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAG1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EAAE,OAAO,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAGzE,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAGvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAEhE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAEpD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAEhD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAGvE,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AAGvF,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAC1D,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAG1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EAAE,OAAO,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAGzE,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAGvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAEhE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAEpD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAEhD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAEhD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC"}

package/build/components/index.js

@@ -13,4 +13,5 @@ export { DynamicStatusBar } from "./DynamicStatusBar";
 export { HeaderView } from "./HeaderView";
 export { FormView } from "./FormView";
 export { TextArea } from "./TextArea";
+export { Card } from "./Card";
 //# sourceMappingURL=index.js.map

package/build/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,SAAS;AACT,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAGlC,OAAO;AACP,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAG9B,QAAQ;AACR,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAG1D,mBAAmB;AACnB,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAGtD,QAAQ;AACR,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAGhC,mBAAmB;AACnB,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAGtD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAG1C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAGtC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC","sourcesContent":["// Button\nexport { Button } from \"./Button\";\nexport type { ButtonProps, ButtonSize, ButtonVariant } from \"./Button\";\n\n// Text\nexport { Text } from \"./Text\";\nexport type { TextAlign, TextColor, TextProps, TextVariant, TextWeight } from \"./Text\";\n\n// Input\nexport { BaseInput, Input, PasswordInput } from \"./Input\";\nexport type { InputProps } from \"./Input\";\n\n// SegmentedControl\nexport { SegmentedControl } from \"./SegmentedControl\";\nexport type { Segment, SegmentedControlProps } from \"./SegmentedControl\";\n\n// Badge\nexport { Badge } from \"./Badge\";\nexport type { BadgeProps, BadgeStatus } from \"./Badge\";\n\n// DynamicStatusBar\nexport { DynamicStatusBar } from \"./DynamicStatusBar\";\nexport type { DynamicStatusBarProps } from \"./DynamicStatusBar\";\n\nexport { HeaderView } from \"./HeaderView\";\nexport type { HeaderViewProps } from \"./HeaderView\";\n\nexport { FormView } from \"./FormView\";\nexport type { FormViewProps } from \"./FormView\";\n\nexport { TextArea } from \"./TextArea\";\nexport type { TextAreaProps } from \"./TextArea\";\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,SAAS;AACT,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAGlC,OAAO;AACP,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAG9B,QAAQ;AACR,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAG1D,mBAAmB;AACnB,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAGtD,QAAQ;AACR,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAGhC,mBAAmB;AACnB,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAGtD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAG1C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAGtC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAGtC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC","sourcesContent":["// Button\nexport { Button } from \"./Button\";\nexport type { ButtonProps, ButtonSize, ButtonVariant } from \"./Button\";\n\n// Text\nexport { Text } from \"./Text\";\nexport type { TextAlign, TextColor, TextProps, TextVariant, TextWeight } from \"./Text\";\n\n// Input\nexport { BaseInput, Input, PasswordInput } from \"./Input\";\nexport type { InputProps } from \"./Input\";\n\n// SegmentedControl\nexport { SegmentedControl } from \"./SegmentedControl\";\nexport type { Segment, SegmentedControlProps } from \"./SegmentedControl\";\n\n// Badge\nexport { Badge } from \"./Badge\";\nexport type { BadgeProps, BadgeStatus } from \"./Badge\";\n\n// DynamicStatusBar\nexport { DynamicStatusBar } from \"./DynamicStatusBar\";\nexport type { DynamicStatusBarProps } from \"./DynamicStatusBar\";\n\nexport { HeaderView } from \"./HeaderView\";\nexport type { HeaderViewProps } from \"./HeaderView\";\n\nexport { FormView } from \"./FormView\";\nexport type { FormViewProps } from \"./FormView\";\n\nexport { TextArea } from \"./TextArea\";\nexport type { TextAreaProps } from \"./TextArea\";\n\nexport { Card } from \"./Card\";\nexport type { CardProps } from \"./Card\";\n"]}

package/build/index.d.ts

@@ -1,7 +1,7 @@
 export { defaultDarkColors, defaultDarkTheme, defaultLightColors, defaultTheme, ThemeContext, ThemeProvider, useTheme, useThemeSafe } from "./theme";
 export type { Theme, ThemeColors, ThemeContextValue, ThemeProviderProps } from "./theme";
-export { Badge, BaseInput, Button, DynamicStatusBar, FormView, HeaderView, Input, PasswordInput, SegmentedControl, Text, TextArea } from "./components";
-export type { BadgeProps, BadgeStatus, ButtonProps, ButtonSize, ButtonVariant, DynamicStatusBarProps, FormViewProps, InputProps, Segment, SegmentedControlProps, TextAlign, TextAreaProps, TextColor, TextProps, TextVariant, TextWeight, } from "./components";
+export { Badge, BaseInput, Button, Card, DynamicStatusBar, FormView, HeaderView, Input, PasswordInput, SegmentedControl, Text, TextArea } from "./components";
+export type { BadgeProps, BadgeStatus, ButtonProps, ButtonSize, ButtonVariant, CardProps, DynamicStatusBarProps, FormViewProps, InputProps, Segment, SegmentedControlProps, TextAlign, TextAreaProps, TextColor, TextProps, TextVariant, TextWeight, } from "./components";
 export { borderRadius, createThemedStyle, layouts, shadows, spacing, typography, useThemedStyles } from "./utils";
 export type { BorderRadiusKey, LayoutKey, ShadowKey, SpacingKey, TypographyVariant } from "./utils";
 //# sourceMappingURL=index.d.ts.map

package/build/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAErJ,YAAY,EAAE,KAAK,EAAE,WAAW,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAGzF,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,gBAAgB,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,aAAa,EAAE,gBAAgB,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExJ,YAAY,EACR,UAAU,EACV,WAAW,EACX,WAAW,EACX,UAAU,EACV,aAAa,EACb,qBAAqB,EACrB,aAAa,EACb,UAAU,EACV,OAAO,EACP,qBAAqB,EACrB,SAAS,EACT,aAAa,EACb,SAAS,EACT,SAAS,EACT,WAAW,EACX,UAAU,GACb,MAAM,cAAc,CAAC;AAGtB,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAElH,YAAY,EAAE,eAAe,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAErJ,YAAY,EAAE,KAAK,EAAE,WAAW,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAGzF,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,gBAAgB,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,aAAa,EAAE,gBAAgB,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAE9J,YAAY,EACR,UAAU,EACV,WAAW,EACX,WAAW,EACX,UAAU,EACV,aAAa,EACb,SAAS,EACT,qBAAqB,EACrB,aAAa,EACb,UAAU,EACV,OAAO,EACP,qBAAqB,EACrB,SAAS,EACT,aAAa,EACb,SAAS,EACT,SAAS,EACT,WAAW,EACX,UAAU,GACb,MAAM,cAAc,CAAC;AAGtB,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAElH,YAAY,EAAE,eAAe,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC"}

package/build/index.js

@@ -4,7 +4,7 @@
 // Theme system
 export { defaultDarkColors, defaultDarkTheme, defaultLightColors, defaultTheme, ThemeContext, ThemeProvider, useTheme, useThemeSafe } from "./theme";
 // Components
-export { Badge, BaseInput, Button, DynamicStatusBar, FormView, HeaderView, Input, PasswordInput, SegmentedControl, Text, TextArea } from "./components";
+export { Badge, BaseInput, Button, Card, DynamicStatusBar, FormView, HeaderView, Input, PasswordInput, SegmentedControl, Text, TextArea } from "./components";
 // Utilities
 export { borderRadius, createThemedStyle, layouts, shadows, spacing, typography, useThemedStyles } from "./utils";
 //# sourceMappingURL=index.js.map

package/build/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,+EAA+E;AAC/E,0DAA0D;AAC1D,+EAA+E;AAE/E,eAAe;AACf,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAIrJ,aAAa;AACb,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,gBAAgB,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,aAAa,EAAE,gBAAgB,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAqBxJ,YAAY;AACZ,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC","sourcesContent":["// ============================================================================\n// @robin-ux/native - Themeable React Native UI Components\n// ============================================================================\n\n// Theme system\nexport { defaultDarkColors, defaultDarkTheme, defaultLightColors, defaultTheme, ThemeContext, ThemeProvider, useTheme, useThemeSafe } from \"./theme\";\n\nexport type { Theme, ThemeColors, ThemeContextValue, ThemeProviderProps } from \"./theme\";\n\n// Components\nexport { Badge, BaseInput, Button, DynamicStatusBar, FormView, HeaderView, Input, PasswordInput, SegmentedControl, Text, TextArea } from \"./components\";\n\nexport type {\n    BadgeProps,\n    BadgeStatus,\n    ButtonProps,\n    ButtonSize,\n    ButtonVariant,\n    DynamicStatusBarProps,\n    FormViewProps,\n    InputProps,\n    Segment,\n    SegmentedControlProps,\n    TextAlign,\n    TextAreaProps,\n    TextColor,\n    TextProps,\n    TextVariant,\n    TextWeight,\n} from \"./components\";\n\n// Utilities\nexport { borderRadius, createThemedStyle, layouts, shadows, spacing, typography, useThemedStyles } from \"./utils\";\n\nexport type { BorderRadiusKey, LayoutKey, ShadowKey, SpacingKey, TypographyVariant } from \"./utils\";\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,+EAA+E;AAC/E,0DAA0D;AAC1D,+EAA+E;AAE/E,eAAe;AACf,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAIrJ,aAAa;AACb,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,gBAAgB,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,aAAa,EAAE,gBAAgB,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAsB9J,YAAY;AACZ,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC","sourcesContent":["// ============================================================================\n// @robin-ux/native - Themeable React Native UI Components\n// ============================================================================\n\n// Theme system\nexport { defaultDarkColors, defaultDarkTheme, defaultLightColors, defaultTheme, ThemeContext, ThemeProvider, useTheme, useThemeSafe } from \"./theme\";\n\nexport type { Theme, ThemeColors, ThemeContextValue, ThemeProviderProps } from \"./theme\";\n\n// Components\nexport { Badge, BaseInput, Button, Card, DynamicStatusBar, FormView, HeaderView, Input, PasswordInput, SegmentedControl, Text, TextArea } from \"./components\";\n\nexport type {\n    BadgeProps,\n    BadgeStatus,\n    ButtonProps,\n    ButtonSize,\n    ButtonVariant,\n    CardProps,\n    DynamicStatusBarProps,\n    FormViewProps,\n    InputProps,\n    Segment,\n    SegmentedControlProps,\n    TextAlign,\n    TextAreaProps,\n    TextColor,\n    TextProps,\n    TextVariant,\n    TextWeight,\n} from \"./components\";\n\n// Utilities\nexport { borderRadius, createThemedStyle, layouts, shadows, spacing, typography, useThemedStyles } from \"./utils\";\n\nexport type { BorderRadiusKey, LayoutKey, ShadowKey, SpacingKey, TypographyVariant } from \"./utils\";\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@robin-ux/native",
-    "version": "0.1.3",
+    "version": "0.1.4",
     "description": "Themeable React Native UI components for Expo projects",
     "main": "build/index.js",
     "types": "build/index.d.ts",

package/src/components/Card.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+import { StyleSheet, View, ViewProps } from "react-native";
+import { useTheme } from "../theme";
+import { borderRadius, shadows, spacing } from "../utils/styles";
+
+type CardVariant = "default" | "elevated" | "outlined";
+
+export interface CardProps extends Omit<ViewProps, "style"> {
+    variant?: CardVariant;
+    padding?: keyof typeof spacing;
+    style?: ViewProps["style"];
+    children: React.ReactNode;
+    bg?: "primary" | "secondary";
+}
+
+export function Card({ variant = "default", padding = "md", style, children, bg, ...props }: CardProps) {
+    const { colors } = useTheme();
+    let backgroundColor = colors.card;
+    if (bg === "primary") {
+        backgroundColor = colors.background;
+    } else if (bg === "secondary") {
+        backgroundColor = colors.background;
+    }
+
+    const variantStyles = {
+        default: {
+            backgroundColor: backgroundColor,
+        },
+        elevated: {
+            backgroundColor: backgroundColor,
+            ...shadows.md,
+        },
+        outlined: {
+            backgroundColor: backgroundColor,
+            borderWidth: 1,
+            borderColor: colors.border,
+        },
+    }[variant];
+
+    const cardStyle = [styles.card, variantStyles, { padding: spacing[padding] }, style];
+
+    return (
+        <View style={cardStyle} {...props}>
+            {children}
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    card: {
+        borderRadius: borderRadius.lg,
+    },
+});

package/src/components/index.ts

@@ -30,3 +30,6 @@ export type { FormViewProps } from "./FormView";
 
 export { TextArea } from "./TextArea";
 export type { TextAreaProps } from "./TextArea";
+
+export { Card } from "./Card";
+export type { CardProps } from "./Card";

package/src/index.ts

@@ -8,7 +8,7 @@ export { defaultDarkColors, defaultDarkTheme, defaultLightColors, defaultTheme,
 export type { Theme, ThemeColors, ThemeContextValue, ThemeProviderProps } from "./theme";
 
 // Components
-export { Badge, BaseInput, Button, DynamicStatusBar, FormView, HeaderView, Input, PasswordInput, SegmentedControl, Text, TextArea } from "./components";
+export { Badge, BaseInput, Button, Card, DynamicStatusBar, FormView, HeaderView, Input, PasswordInput, SegmentedControl, Text, TextArea } from "./components";
 
 export type {
     BadgeProps,
@@ -16,6 +16,7 @@ export type {
     ButtonProps,
     ButtonSize,
     ButtonVariant,
+    CardProps,
     DynamicStatusBarProps,
     FormViewProps,
     InputProps,