@umituz/react-native-ai-generation-content 1.17.122 → 1.17.123

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-ai-generation-content",
-  "version": "1.17.122",
+  "version": "1.17.123",
   "description": "Provider-agnostic AI generation orchestration for React Native",
   "main": "src/index.ts",
   "types": "src/index.ts",

package/src/index.ts

@@ -321,6 +321,7 @@ export {
   // Headers
   FeatureHeader,
   AIGenScreenHeader,
+  CreditBadge,
 
   // Photo Upload
   PhotoUploadCard,
@@ -380,6 +381,7 @@ export type {
   FeatureHeaderProps,
   AIGenScreenHeaderProps,
   NavigationButtonType,
+  CreditBadgeProps,
 
   // Photo Upload
   PhotoUploadCardProps,

package/src/presentation/components/headers/CreditBadge.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import {
+  AtomicText,
+  AtomicIcon,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+
+export interface CreditBadgeProps {
+  readonly credits: number;
+  readonly iconName?: string;
+  readonly compact?: boolean;
+}
+
+export const CreditBadge: React.FC<CreditBadgeProps> = ({
+  credits,
+  iconName = "flash",
+  compact = false,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View
+      style={[
+        styles.container,
+        compact && styles.compact,
+        { backgroundColor: tokens.colors.surface },
+      ]}
+    >
+      <AtomicIcon name={iconName} size="sm" color="warning" />
+      <AtomicText
+        type={compact ? "labelSmall" : "labelMedium"}
+        style={[styles.text, { color: tokens.colors.textPrimary }]}
+      >
+        {credits}
+      </AtomicText>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: 10,
+    paddingVertical: 6,
+    borderRadius: 16,
+    gap: 4,
+  },
+  compact: {
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 12,
+  },
+  text: {
+    fontWeight: "600",
+  },
+});

package/src/presentation/components/headers/index.ts

@@ -1,2 +1,3 @@
 export * from "./FeatureHeader";
 export * from "./AIGenScreenHeader";
+export * from "./CreditBadge";