@snapbox/pkg-ui 1.0.1

package/dist/components/AppIcon.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { StyleProp, TextStyle } from "react-native";
+export interface AppIconProps {
+    glyph: string;
+    size?: number;
+    color?: string;
+    style?: StyleProp<TextStyle>;
+}
+export declare function AppIcon({ glyph, size, color, style }: AppIconProps): React.JSX.Element | null;

package/dist/components/AppIcon.js

@@ -0,0 +1,34 @@
+import AntDesign from "@react-native-vector-icons/ant-design";
+import Feather from "@react-native-vector-icons/feather";
+import FontAwesome from "@react-native-vector-icons/fontawesome";
+import Foundation from "@react-native-vector-icons/foundation";
+import Ionicons from "@react-native-vector-icons/ionicons";
+import Lucide from "@react-native-vector-icons/lucide";
+import MaterialDesignIcons from "@react-native-vector-icons/material-design-icons";
+import Octicons from "@react-native-vector-icons/octicons";
+import React from "react";
+const iconFamilies = {
+    AntDesign,
+    Feather,
+    FontAwesome,
+    Foundation,
+    Ionicons,
+    Lucide,
+    MaterialDesignIcons,
+    Octicons,
+};
+export function AppIcon({ glyph, size = 24, color, style }) {
+    const parts = glyph.split(":");
+    if (parts.length !== 2) {
+        console.warn(`Invalid glyph format: ${glyph}. Expected format "Family:name".`);
+        return null;
+    }
+    const family = parts[0];
+    const name = parts[1];
+    const IconComponent = iconFamilies[family];
+    if (!IconComponent) {
+        console.warn(`Icon family ${family} not found.`);
+        return null;
+    }
+    return <IconComponent name={name} size={size} color={color} style={style}/>;
+}

package/dist/components/CustomNavigationBar.d.ts

@@ -0,0 +1,3 @@
+import { NativeStackHeaderProps } from "@react-navigation/native-stack";
+import React from "react";
+export declare function CustomNavigationBar({ navigation, route, options, back, }: NativeStackHeaderProps): React.JSX.Element;

package/dist/components/CustomNavigationBar.js

@@ -0,0 +1,10 @@
+import { Appbar } from "react-native-paper";
+import { getHeaderTitle } from "@react-navigation/elements";
+import React from "react";
+export function CustomNavigationBar({ navigation, route, options, back, }) {
+    const title = getHeaderTitle(options, route.name);
+    return (<Appbar.Header>
+      {back ? <Appbar.BackAction onPress={navigation.goBack}/> : null}
+      <Appbar.Content title={title}/>
+    </Appbar.Header>);
+}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./components/AppIcon";
+export * from "./components/CustomNavigationBar";
+export * from "./theme/colors";

package/dist/index.js

@@ -0,0 +1,3 @@
+export * from "./components/AppIcon";
+export * from "./components/CustomNavigationBar";
+export * from "./theme/colors";

package/dist/theme/colors.d.ts

@@ -0,0 +1,6 @@
+import type { MD3Colors } from "react-native-paper/lib/typescript/types";
+export interface ThemeColors {
+    light: MD3Colors;
+    dark: MD3Colors;
+}
+export declare function generateThemeColors(primary: string, secondary?: string, tertiary?: string): ThemeColors;

package/dist/theme/colors.js

@@ -0,0 +1,72 @@
+import { argbFromHex, hexFromArgb, themeFromSourceColor, } from "@material/material-color-utilities";
+import Color from "color";
+const opacity = {
+    level1: 0.08,
+    level2: 0.12,
+    level3: 0.16,
+    level4: 0.38,
+};
+const elevationLevels = [0.05, 0.08, 0.11, 0.12, 0.14];
+export function generateThemeColors(primary, secondary, tertiary) {
+    const generateVariant = (type) => {
+        const baseTheme = themeFromSourceColor(argbFromHex(primary));
+        const scheme = baseTheme.schemes[type].toJSON();
+        if (secondary) {
+            const secondaryTheme = themeFromSourceColor(argbFromHex(secondary));
+            const secondaryScheme = secondaryTheme.schemes[type].toJSON();
+            scheme.secondary = secondaryScheme.primary;
+            scheme.onSecondary = secondaryScheme.onPrimary;
+            scheme.secondaryContainer = secondaryScheme.primaryContainer;
+            scheme.onSecondaryContainer = secondaryScheme.onPrimaryContainer;
+        }
+        if (tertiary) {
+            const tertiaryTheme = themeFromSourceColor(argbFromHex(tertiary));
+            const tertiaryScheme = tertiaryTheme.schemes[type].toJSON();
+            scheme.tertiary = tertiaryScheme.primary;
+            scheme.onTertiary = tertiaryScheme.onPrimary;
+            scheme.tertiaryContainer = tertiaryScheme.primaryContainer;
+            scheme.onTertiaryContainer = tertiaryScheme.onPrimaryContainer;
+        }
+        // Convert scheme ARGB values to rgb string
+        const rgbTheme = {};
+        for (const [key, value] of Object.entries(scheme)) {
+            rgbTheme[key] = Color(hexFromArgb(value))
+                .rgb()
+                .string();
+        }
+        // Prepare elevations
+        const elevations = {
+            level0: "transparent",
+        };
+        for (let i = 0; i < elevationLevels.length; i++) {
+            elevations[`level${i + 1}`] = Color(hexFromArgb(scheme.surface))
+                .mix(Color(hexFromArgb(scheme.primary)), elevationLevels[i])
+                .rgb()
+                .string();
+        }
+        // Prepare surface colors
+        const surfaceDisabled = Color(hexFromArgb(scheme.onSurface))
+            .alpha(opacity.level2)
+            .rgb()
+            .string();
+        const onSurfaceDisabled = Color(hexFromArgb(scheme.onSurface))
+            .alpha(opacity.level4)
+            .rgb()
+            .string();
+        const backdrop = Color(hexFromArgb(baseTheme.palettes.neutralVariant.tone(20)))
+            .alpha(0.4)
+            .rgb()
+            .string();
+        return {
+            ...rgbTheme,
+            elevation: elevations,
+            surfaceDisabled,
+            onSurfaceDisabled,
+            backdrop,
+        };
+    };
+    return {
+        light: generateVariant("light"),
+        dark: generateVariant("dark"),
+    };
+}

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@snapbox/pkg-ui",
+  "version": "1.0.1",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsc",
+    "prepublishOnly": "yarn build"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@material/material-color-utilities": "^0.4.0",
+    "@react-native-vector-icons/ant-design": "^12.4.1",
+    "@react-native-vector-icons/feather": "^12.4.1",
+    "@react-native-vector-icons/fontawesome": "^12.4.1",
+    "@react-native-vector-icons/foundation": "^12.4.1",
+    "@react-native-vector-icons/ionicons": "^12.4.1",
+    "@react-native-vector-icons/lucide": "^12.4.1",
+    "@react-native-vector-icons/material-design-icons": "^12.4.1",
+    "@react-native-vector-icons/octicons": "^20.4.1",
+    "@react-navigation/elements": "^2.8.1",
+    "@react-navigation/native-stack": "^7.14.5",
+    "color": "^5.0.3",
+    "react-native-paper": "^5.15.0"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*"
+  },
+  "devDependencies": {
+    "@types/color": "^4.2.1",
+    "typescript": "~5.9.2"
+  }
+}