@robin-ux/native 0.1.0 → 0.1.2

package/build/components/HeaderView.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { ScrollViewProps, StyleProp, ViewStyle } from "react-native";
+export interface HeaderViewProps {
+    title: string;
+    actionButton?: React.ReactNode;
+    children: React.ReactNode;
+    scrollViewProps?: ScrollViewProps;
+    style?: StyleProp<ViewStyle>;
+    fixed?: boolean;
+    defaultStyle?: "light" | "dark";
+}
+export declare function HeaderView({ title, actionButton, children, scrollViewProps, style, defaultStyle, fixed }: HeaderViewProps): React.JSX.Element;
+//# sourceMappingURL=HeaderView.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderView.d.ts","sourceRoot":"","sources":["../../src/components/HeaderView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AACtC,OAAO,EAAY,eAAe,EAAE,SAAS,EAAQ,SAAS,EAAE,MAAM,cAAc,CAAC;AAMrF,MAAM,WAAW,eAAe;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,YAAY,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CACnC;AAED,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,QAAQ,EAAE,eAAe,EAAE,KAAK,EAAE,YAAY,EAAE,KAAa,EAAE,EAAE,eAAe,qBA0CjI"}

package/build/components/HeaderView.js

@@ -0,0 +1,36 @@
+import React, { useRef } from "react";
+import { Animated, View } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { layouts, spacing, useThemedStyles } from "../utils";
+import { DynamicStatusBar } from "./DynamicStatusBar";
+import { Text } from "./Text";
+export function HeaderView({ title, actionButton, children, scrollViewProps, style, defaultStyle, fixed = false }) {
+    const scrollY = useRef(new Animated.Value(0)).current;
+    const styles = useThemedStyles((colors) => ({
+        container: {
+            flex: 1,
+            backgroundColor: colors.background,
+        },
+        header: {
+            paddingHorizontal: spacing.md,
+            paddingTop: spacing.md,
+            ...layouts.rowBetween,
+        },
+        content: {
+            flexGrow: 1,
+        },
+    }));
+    return (<SafeAreaView style={[styles.container, style]} edges={["top", "left", "right"]}>
+            <DynamicStatusBar scrollY={scrollY} threshold={100} defaultStyle={defaultStyle}/>
+            <View style={styles.header}>
+                <Text variant="heading" weight="extrabold">
+                    {title}
+                </Text>
+                {actionButton}
+            </View>
+            {fixed ? (<View style={styles.content}>{children}</View>) : (<Animated.ScrollView style={styles.container} contentContainerStyle={styles.content} onScroll={Animated.event([{ nativeEvent: { contentOffset: { y: scrollY } } }], { useNativeDriver: true })} scrollEventThrottle={16} {...scrollViewProps}>
+                    {children}
+                </Animated.ScrollView>)}
+        </SafeAreaView>);
+}
+//# sourceMappingURL=HeaderView.js.map

package/build/components/HeaderView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderView.js","sourceRoot":"","sources":["../../src/components/HeaderView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,QAAQ,EAA8B,IAAI,EAAa,MAAM,cAAc,CAAC;AACrF,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAC9D,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAC7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAY9B,MAAM,UAAU,UAAU,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,QAAQ,EAAE,eAAe,EAAE,KAAK,EAAE,YAAY,EAAE,KAAK,GAAG,KAAK,EAAmB;IAC9H,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAEtD,MAAM,MAAM,GAAG,eAAe,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;QACxC,SAAS,EAAE;YACP,IAAI,EAAE,CAAC;YACP,eAAe,EAAE,MAAM,CAAC,UAAU;SACrC;QACD,MAAM,EAAE;YACJ,iBAAiB,EAAE,OAAO,CAAC,EAAE;YAC7B,UAAU,EAAE,OAAO,CAAC,EAAE;YACtB,GAAG,OAAO,CAAC,UAAU;SACxB;QACD,OAAO,EAAE;YACL,QAAQ,EAAE,CAAC;SACd;KACJ,CAAC,CAAC,CAAC;IAEJ,OAAO,CACH,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC,CAC5E;YAAA,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC,SAAS,CAAC,CAAC,GAAG,CAAC,CAAC,YAAY,CAAC,CAAC,YAAY,CAAC,EAC/E;YAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CACvB;gBAAA,CAAC,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,CACtC;oBAAA,CAAC,KAAK,CACV;gBAAA,EAAE,IAAI,CACN;gBAAA,CAAC,YAAY,CACjB;YAAA,EAAE,IAAI,CACN;YAAA,CAAC,KAAK,CAAC,CAAC,CAAC,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,IAAI,CAAC,CACjD,CAAC,CAAC,CAAC,CACA,CAAC,QAAQ,CAAC,UAAU,CAChB,KAAK,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CACxB,qBAAqB,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CACtC,QAAQ,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,WAAW,EAAE,EAAE,aAAa,EAAE,EAAE,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,eAAe,EAAE,IAAI,EAAE,CAAC,CAAC,CAC1G,mBAAmB,CAAC,CAAC,EAAE,CAAC,CACxB,IAAI,eAAe,CAAC,CAEpB;oBAAA,CAAC,QAAQ,CACb;gBAAA,EAAE,QAAQ,CAAC,UAAU,CAAC,CACzB,CACL;QAAA,EAAE,YAAY,CAAC,CAClB,CAAC;AACN,CAAC","sourcesContent":["import React, { useRef } from \"react\";\nimport { Animated, ScrollViewProps, StyleProp, View, ViewStyle } from \"react-native\";\nimport { SafeAreaView } from \"react-native-safe-area-context\";\nimport { layouts, spacing, useThemedStyles } from \"../utils\";\nimport { DynamicStatusBar } from \"./DynamicStatusBar\";\nimport { Text } from \"./Text\";\n\nexport interface HeaderViewProps {\n    title: string;\n    actionButton?: React.ReactNode;\n    children: React.ReactNode;\n    scrollViewProps?: ScrollViewProps;\n    style?: StyleProp<ViewStyle>;\n    fixed?: boolean;\n    defaultStyle?: \"light\" | \"dark\";\n}\n\nexport function HeaderView({ title, actionButton, children, scrollViewProps, style, defaultStyle, fixed = false }: HeaderViewProps) {\n    const scrollY = useRef(new Animated.Value(0)).current;\n\n    const styles = useThemedStyles((colors) => ({\n        container: {\n            flex: 1,\n            backgroundColor: colors.background,\n        },\n        header: {\n            paddingHorizontal: spacing.md,\n            paddingTop: spacing.md,\n            ...layouts.rowBetween,\n        },\n        content: {\n            flexGrow: 1,\n        },\n    }));\n\n    return (\n        <SafeAreaView style={[styles.container, style]} edges={[\"top\", \"left\", \"right\"]}>\n            <DynamicStatusBar scrollY={scrollY} threshold={100} defaultStyle={defaultStyle} />\n            <View style={styles.header}>\n                <Text variant=\"heading\" weight=\"extrabold\">\n                    {title}\n                </Text>\n                {actionButton}\n            </View>\n            {fixed ? (\n                <View style={styles.content}>{children}</View>\n            ) : (\n                <Animated.ScrollView\n                    style={styles.container}\n                    contentContainerStyle={styles.content}\n                    onScroll={Animated.event([{ nativeEvent: { contentOffset: { y: scrollY } } }], { useNativeDriver: true })}\n                    scrollEventThrottle={16}\n                    {...scrollViewProps}\n                >\n                    {children}\n                </Animated.ScrollView>\n            )}\n        </SafeAreaView>\n    );\n}\n"]}

package/build/components/index.d.ts

@@ -1,13 +1,15 @@
-export { Button } from './Button';
-export type { ButtonProps, ButtonVariant, ButtonSize } from './Button';
-export { Text } from './Text';
-export type { TextProps, TextVariant, TextWeight, TextColor, TextAlign } from './Text';
-export { Input, PasswordInput, BaseInput } from './Input';
-export type { InputProps } from './Input';
-export { SegmentedControl } from './SegmentedControl';
-export type { SegmentedControlProps, Segment } from './SegmentedControl';
-export { Badge } from './Badge';
-export type { BadgeProps, BadgeStatus } from './Badge';
-export { DynamicStatusBar } from './DynamicStatusBar';
-export type { DynamicStatusBarProps } from './DynamicStatusBar';
+export { Button } from "./Button";
+export type { ButtonProps, ButtonSize, ButtonVariant } from "./Button";
+export { Text } from "./Text";
+export type { TextAlign, TextColor, TextProps, TextVariant, TextWeight } from "./Text";
+export { BaseInput, Input, PasswordInput } from "./Input";
+export type { InputProps } from "./Input";
+export { SegmentedControl } from "./SegmentedControl";
+export type { Segment, SegmentedControlProps } from "./SegmentedControl";
+export { Badge } from "./Badge";
+export type { BadgeProps, BadgeStatus } from "./Badge";
+export { DynamicStatusBar } from "./DynamicStatusBar";
+export type { DynamicStatusBarProps } from "./DynamicStatusBar";
+export { HeaderView } from "./HeaderView";
+export type { HeaderViewProps } from "./HeaderView";
 //# 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,aAAa,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAGvE,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EAAE,SAAS,EAAE,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAGvF,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAC1D,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAG1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EAAE,qBAAqB,EAAE,OAAO,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"}
+{"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"}

package/build/components/index.js

@@ -1,13 +1,14 @@
 // Button
-export { Button } from './Button';
+export { Button } from "./Button";
 // Text
-export { Text } from './Text';
+export { Text } from "./Text";
 // Input
-export { Input, PasswordInput, BaseInput } from './Input';
+export { BaseInput, Input, PasswordInput } from "./Input";
 // SegmentedControl
-export { SegmentedControl } from './SegmentedControl';
+export { SegmentedControl } from "./SegmentedControl";
 // Badge
-export { Badge } from './Badge';
+export { Badge } from "./Badge";
 // DynamicStatusBar
-export { DynamicStatusBar } from './DynamicStatusBar';
+export { DynamicStatusBar } from "./DynamicStatusBar";
+export { HeaderView } from "./HeaderView";
 //# 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,KAAK,EAAE,aAAa,EAAE,SAAS,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","sourcesContent":["// Button\nexport { Button } from './Button';\nexport type { ButtonProps, ButtonVariant, ButtonSize } from './Button';\n\n// Text\nexport { Text } from './Text';\nexport type { TextProps, TextVariant, TextWeight, TextColor, TextAlign } from './Text';\n\n// Input\nexport { Input, PasswordInput, BaseInput } from './Input';\nexport type { InputProps } from './Input';\n\n// SegmentedControl\nexport { SegmentedControl } from './SegmentedControl';\nexport type { SegmentedControlProps, Segment } 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"]}
+{"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","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"]}

package/build/index.d.ts

@@ -1,7 +1,7 @@
-export { ThemeProvider, ThemeContext, useTheme, useThemeSafe, defaultTheme, defaultDarkTheme, defaultLightColors, defaultDarkColors, } from './theme';
-export type { Theme, ThemeColors, ThemeContextValue, ThemeProviderProps, } from './theme';
-export { Button, Text, Input, PasswordInput, BaseInput, SegmentedControl, Badge, DynamicStatusBar, } from './components';
-export type { ButtonProps, ButtonVariant, ButtonSize, TextProps, TextVariant, TextWeight, TextColor, TextAlign, InputProps, SegmentedControlProps, Segment, BadgeProps, BadgeStatus, DynamicStatusBarProps, } from './components';
-export { spacing, borderRadius, typography, shadows, layouts, useThemedStyles, createThemedStyle, } from './utils';
-export type { SpacingKey, BorderRadiusKey, TypographyVariant, ShadowKey, LayoutKey, } from './utils';
+export { defaultDarkColors, defaultDarkTheme, defaultLightColors, defaultTheme, ThemeContext, ThemeProvider, useTheme, useThemeSafe } from "./theme";
+export type { Theme, ThemeColors, ThemeContextValue, ThemeProviderProps } from "./theme";
+export { Badge, BaseInput, Button, DynamicStatusBar, HeaderView, Input, PasswordInput, SegmentedControl, Text } from "./components";
+export type { BadgeProps, BadgeStatus, ButtonProps, ButtonSize, ButtonVariant, DynamicStatusBarProps, InputProps, Segment, SegmentedControlProps, TextAlign, 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,EACL,aAAa,EACb,YAAY,EACZ,QAAQ,EACR,YAAY,EACZ,YAAY,EACZ,gBAAgB,EAChB,kBAAkB,EAClB,iBAAiB,GAClB,MAAM,SAAS,CAAC;AAEjB,YAAY,EACV,KAAK,EACL,WAAW,EACX,iBAAiB,EACjB,kBAAkB,GACnB,MAAM,SAAS,CAAC;AAGjB,OAAO,EACL,MAAM,EACN,IAAI,EACJ,KAAK,EACL,aAAa,EACb,SAAS,EACT,gBAAgB,EAChB,KAAK,EACL,gBAAgB,GACjB,MAAM,cAAc,CAAC;AAEtB,YAAY,EACV,WAAW,EACX,aAAa,EACb,UAAU,EACV,SAAS,EACT,WAAW,EACX,UAAU,EACV,SAAS,EACT,SAAS,EACT,UAAU,EACV,qBAAqB,EACrB,OAAO,EACP,UAAU,EACV,WAAW,EACX,qBAAqB,GACtB,MAAM,cAAc,CAAC;AAGtB,OAAO,EACL,OAAO,EACP,YAAY,EACZ,UAAU,EACV,OAAO,EACP,OAAO,EACP,eAAe,EACf,iBAAiB,GAClB,MAAM,SAAS,CAAC;AAEjB,YAAY,EACV,UAAU,EACV,eAAe,EACf,iBAAiB,EACjB,SAAS,EACT,SAAS,GACV,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,gBAAgB,EAAE,UAAU,EAAE,KAAK,EAAE,aAAa,EAAE,gBAAgB,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpI,YAAY,EACR,UAAU,EACV,WAAW,EACX,WAAW,EACX,UAAU,EACV,aAAa,EACb,qBAAqB,EACrB,UAAU,EACV,OAAO,EACP,qBAAqB,EACrB,SAAS,EACT,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

@@ -2,9 +2,9 @@
 // @robin-ux/native - Themeable React Native UI Components
 // ============================================================================
 // Theme system
-export { ThemeProvider, ThemeContext, useTheme, useThemeSafe, defaultTheme, defaultDarkTheme, defaultLightColors, defaultDarkColors, } from './theme';
+export { defaultDarkColors, defaultDarkTheme, defaultLightColors, defaultTheme, ThemeContext, ThemeProvider, useTheme, useThemeSafe } from "./theme";
 // Components
-export { Button, Text, Input, PasswordInput, BaseInput, SegmentedControl, Badge, DynamicStatusBar, } from './components';
+export { Badge, BaseInput, Button, DynamicStatusBar, HeaderView, Input, PasswordInput, SegmentedControl, Text } from "./components";
 // Utilities
-export { spacing, borderRadius, typography, shadows, layouts, useThemedStyles, createThemedStyle, } from './utils';
+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,EACL,aAAa,EACb,YAAY,EACZ,QAAQ,EACR,YAAY,EACZ,YAAY,EACZ,gBAAgB,EAChB,kBAAkB,EAClB,iBAAiB,GAClB,MAAM,SAAS,CAAC;AASjB,aAAa;AACb,OAAO,EACL,MAAM,EACN,IAAI,EACJ,KAAK,EACL,aAAa,EACb,SAAS,EACT,gBAAgB,EAChB,KAAK,EACL,gBAAgB,GACjB,MAAM,cAAc,CAAC;AAmBtB,YAAY;AACZ,OAAO,EACL,OAAO,EACP,YAAY,EACZ,UAAU,EACV,OAAO,EACP,OAAO,EACP,eAAe,EACf,iBAAiB,GAClB,MAAM,SAAS,CAAC","sourcesContent":["// ============================================================================\n// @robin-ux/native - Themeable React Native UI Components\n// ============================================================================\n\n// Theme system\nexport {\n  ThemeProvider,\n  ThemeContext,\n  useTheme,\n  useThemeSafe,\n  defaultTheme,\n  defaultDarkTheme,\n  defaultLightColors,\n  defaultDarkColors,\n} from './theme';\n\nexport type {\n  Theme,\n  ThemeColors,\n  ThemeContextValue,\n  ThemeProviderProps,\n} from './theme';\n\n// Components\nexport {\n  Button,\n  Text,\n  Input,\n  PasswordInput,\n  BaseInput,\n  SegmentedControl,\n  Badge,\n  DynamicStatusBar,\n} from './components';\n\nexport type {\n  ButtonProps,\n  ButtonVariant,\n  ButtonSize,\n  TextProps,\n  TextVariant,\n  TextWeight,\n  TextColor,\n  TextAlign,\n  InputProps,\n  SegmentedControlProps,\n  Segment,\n  BadgeProps,\n  BadgeStatus,\n  DynamicStatusBarProps,\n} from './components';\n\n// Utilities\nexport {\n  spacing,\n  borderRadius,\n  typography,\n  shadows,\n  layouts,\n  useThemedStyles,\n  createThemedStyle,\n} from './utils';\n\nexport type {\n  SpacingKey,\n  BorderRadiusKey,\n  TypographyVariant,\n  ShadowKey,\n  LayoutKey,\n} 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,gBAAgB,EAAE,UAAU,EAAE,KAAK,EAAE,aAAa,EAAE,gBAAgB,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAmBpI,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, HeaderView, Input, PasswordInput, SegmentedControl, Text } from \"./components\";\n\nexport type {\n    BadgeProps,\n    BadgeStatus,\n    ButtonProps,\n    ButtonSize,\n    ButtonVariant,\n    DynamicStatusBarProps,\n    InputProps,\n    Segment,\n    SegmentedControlProps,\n    TextAlign,\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.0",
+    "version": "0.1.2",
     "description": "Themeable React Native UI components for Expo projects",
     "main": "build/index.js",
     "types": "build/index.d.ts",

package/src/components/HeaderView.tsx

@@ -0,0 +1,60 @@
+import React, { useRef } from "react";
+import { Animated, ScrollViewProps, StyleProp, View, ViewStyle } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { layouts, spacing, useThemedStyles } from "../utils";
+import { DynamicStatusBar } from "./DynamicStatusBar";
+import { Text } from "./Text";
+
+export interface HeaderViewProps {
+    title: string;
+    actionButton?: React.ReactNode;
+    children: React.ReactNode;
+    scrollViewProps?: ScrollViewProps;
+    style?: StyleProp<ViewStyle>;
+    fixed?: boolean;
+    defaultStyle?: "light" | "dark";
+}
+
+export function HeaderView({ title, actionButton, children, scrollViewProps, style, defaultStyle, fixed = false }: HeaderViewProps) {
+    const scrollY = useRef(new Animated.Value(0)).current;
+
+    const styles = useThemedStyles((colors) => ({
+        container: {
+            flex: 1,
+            backgroundColor: colors.background,
+        },
+        header: {
+            paddingHorizontal: spacing.md,
+            paddingTop: spacing.md,
+            ...layouts.rowBetween,
+        },
+        content: {
+            flexGrow: 1,
+        },
+    }));
+
+    return (
+        <SafeAreaView style={[styles.container, style]} edges={["top", "left", "right"]}>
+            <DynamicStatusBar scrollY={scrollY} threshold={100} defaultStyle={defaultStyle} />
+            <View style={styles.header}>
+                <Text variant="heading" weight="extrabold">
+                    {title}
+                </Text>
+                {actionButton}
+            </View>
+            {fixed ? (
+                <View style={styles.content}>{children}</View>
+            ) : (
+                <Animated.ScrollView
+                    style={styles.container}
+                    contentContainerStyle={styles.content}
+                    onScroll={Animated.event([{ nativeEvent: { contentOffset: { y: scrollY } } }], { useNativeDriver: true })}
+                    scrollEventThrottle={16}
+                    {...scrollViewProps}
+                >
+                    {children}
+                </Animated.ScrollView>
+            )}
+        </SafeAreaView>
+    );
+}

package/src/components/index.ts

@@ -1,23 +1,26 @@
 // Button
-export { Button } from './Button';
-export type { ButtonProps, ButtonVariant, ButtonSize } from './Button';
+export { Button } from "./Button";
+export type { ButtonProps, ButtonSize, ButtonVariant } from "./Button";
 
 // Text
-export { Text } from './Text';
-export type { TextProps, TextVariant, TextWeight, TextColor, TextAlign } from './Text';
+export { Text } from "./Text";
+export type { TextAlign, TextColor, TextProps, TextVariant, TextWeight } from "./Text";
 
 // Input
-export { Input, PasswordInput, BaseInput } from './Input';
-export type { InputProps } from './Input';
+export { BaseInput, Input, PasswordInput } from "./Input";
+export type { InputProps } from "./Input";
 
 // SegmentedControl
-export { SegmentedControl } from './SegmentedControl';
-export type { SegmentedControlProps, Segment } from './SegmentedControl';
+export { SegmentedControl } from "./SegmentedControl";
+export type { Segment, SegmentedControlProps } from "./SegmentedControl";
 
 // Badge
-export { Badge } from './Badge';
-export type { BadgeProps, BadgeStatus } from './Badge';
+export { Badge } from "./Badge";
+export type { BadgeProps, BadgeStatus } from "./Badge";
 
 // DynamicStatusBar
-export { DynamicStatusBar } from './DynamicStatusBar';
-export type { DynamicStatusBarProps } from './DynamicStatusBar';
+export { DynamicStatusBar } from "./DynamicStatusBar";
+export type { DynamicStatusBarProps } from "./DynamicStatusBar";
+
+export { HeaderView } from "./HeaderView";
+export type { HeaderViewProps } from "./HeaderView";

package/src/index.ts

@@ -3,68 +3,31 @@
 // ============================================================================
 
 // Theme system
-export {
-  ThemeProvider,
-  ThemeContext,
-  useTheme,
-  useThemeSafe,
-  defaultTheme,
-  defaultDarkTheme,
-  defaultLightColors,
-  defaultDarkColors,
-} from './theme';
+export { defaultDarkColors, defaultDarkTheme, defaultLightColors, defaultTheme, ThemeContext, ThemeProvider, useTheme, useThemeSafe } from "./theme";
 
-export type {
-  Theme,
-  ThemeColors,
-  ThemeContextValue,
-  ThemeProviderProps,
-} from './theme';
+export type { Theme, ThemeColors, ThemeContextValue, ThemeProviderProps } from "./theme";
 
 // Components
-export {
-  Button,
-  Text,
-  Input,
-  PasswordInput,
-  BaseInput,
-  SegmentedControl,
-  Badge,
-  DynamicStatusBar,
-} from './components';
+export { Badge, BaseInput, Button, DynamicStatusBar, HeaderView, Input, PasswordInput, SegmentedControl, Text } from "./components";
 
 export type {
-  ButtonProps,
-  ButtonVariant,
-  ButtonSize,
-  TextProps,
-  TextVariant,
-  TextWeight,
-  TextColor,
-  TextAlign,
-  InputProps,
-  SegmentedControlProps,
-  Segment,
-  BadgeProps,
-  BadgeStatus,
-  DynamicStatusBarProps,
-} from './components';
+    BadgeProps,
+    BadgeStatus,
+    ButtonProps,
+    ButtonSize,
+    ButtonVariant,
+    DynamicStatusBarProps,
+    InputProps,
+    Segment,
+    SegmentedControlProps,
+    TextAlign,
+    TextColor,
+    TextProps,
+    TextVariant,
+    TextWeight,
+} from "./components";
 
 // Utilities
-export {
-  spacing,
-  borderRadius,
-  typography,
-  shadows,
-  layouts,
-  useThemedStyles,
-  createThemedStyle,
-} from './utils';
+export { borderRadius, createThemedStyle, layouts, shadows, spacing, typography, useThemedStyles } from "./utils";
 
-export type {
-  SpacingKey,
-  BorderRadiusKey,
-  TypographyVariant,
-  ShadowKey,
-  LayoutKey,
-} from './utils';
+export type { BorderRadiusKey, LayoutKey, ShadowKey, SpacingKey, TypographyVariant } from "./utils";