@umituz/react-native-design-system 2.5.6 → 2.5.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "2.5.6",
+  "version": "2.5.7",
   "description": "Universal design system for React Native apps - Consolidated package with atoms, molecules, organisms, theme, typography, responsive and safe area utilities",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/molecules/alerts/AlertBanner.tsx

@@ -18,7 +18,7 @@ interface AlertBannerProps {
 }
 
 export function AlertBanner({ alert }: AlertBannerProps) {
-    const dismissAlert = useAlertStore((state) => state.dismissAlert);
+    const dismissAlert = useAlertStore((state: { dismissAlert: (id: string) => void }) => state.dismissAlert);
     const insets = useSafeAreaInsets();
     const tokens = useAppDesignTokens();
 

package/src/molecules/alerts/AlertContainer.tsx

@@ -10,22 +10,22 @@ import { useAlertStore } from './AlertStore';
 import { AlertToast } from './AlertToast';
 import { AlertBanner } from './AlertBanner';
 import { AlertModal } from './AlertModal';
-import { AlertMode } from './AlertTypes';
+import { Alert, AlertMode } from './AlertTypes';
 
 export const AlertContainer: React.FC = () => {
-    const alerts = useAlertStore((state) => state.alerts);
+    const alerts = useAlertStore((state: { alerts: Alert[] }) => state.alerts);
     const insets = useSafeAreaInsets();
     const tokens = useAppDesignTokens();
 
-    const toasts = alerts.filter((a) => a.mode === AlertMode.TOAST);
-    const banners = alerts.filter((a) => a.mode === AlertMode.BANNER);
-    const modals = alerts.filter((a) => a.mode === AlertMode.MODAL);
+    const toasts = alerts.filter((a: Alert) => a.mode === AlertMode.TOAST);
+    const banners = alerts.filter((a: Alert) => a.mode === AlertMode.BANNER);
+    const modals = alerts.filter((a: Alert) => a.mode === AlertMode.MODAL);
 
     return (
         <View style={styles.container} pointerEvents="box-none">
             {/* Banners at top */}
             <View style={[styles.bannerContainer, { paddingTop: insets.top }]}>
-                {banners.map((alert) => (
+                {banners.map((alert: Alert) => (
                     <AlertBanner key={alert.id} alert={alert} />
                 ))}
             </View>
@@ -38,7 +38,7 @@ export const AlertContainer: React.FC = () => {
                     paddingHorizontal: tokens.spacing.md,
                 }
             ]}>
-                {toasts.map((alert) => (
+                {toasts.map((alert: Alert) => (
                     <View key={alert.id} style={{ marginBottom: tokens.spacing.sm, width: '100%' }}>
                         <AlertToast alert={alert} />
                     </View>
@@ -46,7 +46,7 @@ export const AlertContainer: React.FC = () => {
             </View>
 
             {/* Modals on top of everything */}
-            {modals.map((alert) => (
+            {modals.map((alert: Alert) => (
                 <AlertModal key={alert.id} alert={alert} />
             ))}
         </View>

package/src/molecules/alerts/AlertModal.tsx

@@ -14,7 +14,7 @@ interface AlertModalProps {
 }
 
 export const AlertModal: React.FC<AlertModalProps> = ({ alert }) => {
-    const dismissAlert = useAlertStore((state) => state.dismissAlert);
+    const dismissAlert = useAlertStore((state: { dismissAlert: (id: string) => void }) => state.dismissAlert);
     const tokens = useAppDesignTokens();
 
     const handleClose = () => {

package/src/molecules/alerts/AlertStore.ts

@@ -2,21 +2,27 @@
  * Alert Store
  */
 
-import { create } from 'zustand';
+import { create, type StoreApi } from 'zustand';
 import { Alert } from './AlertTypes';
 
 interface AlertState {
     alerts: Alert[];
+}
+
+interface AlertActions {
     addAlert: (alert: Alert) => void;
     dismissAlert: (id: string) => void;
     clearAlerts: () => void;
 }
 
-export const useAlertStore = create<AlertState>((set) => ({
+type AlertStore = AlertState & AlertActions;
+type SetState = StoreApi<AlertStore>['setState'];
+
+export const useAlertStore = create<AlertStore>((set: SetState) => ({
     alerts: [],
-    addAlert: (alert) => set((state) => ({ alerts: [...state.alerts, alert] })),
-    dismissAlert: (id) => set((state) => ({
-        alerts: state.alerts.filter((a) => a.id !== id)
+    addAlert: (alert: Alert) => set((state: AlertStore) => ({ alerts: [...state.alerts, alert] })),
+    dismissAlert: (id: string) => set((state: AlertStore) => ({
+        alerts: state.alerts.filter((a: Alert) => a.id !== id)
     })),
     clearAlerts: () => set({ alerts: [] }),
 }));

package/src/molecules/alerts/AlertToast.tsx

@@ -17,7 +17,7 @@ interface AlertToastProps {
 }
 
 export function AlertToast({ alert }: AlertToastProps) {
-    const dismissAlert = useAlertStore((state) => state.dismissAlert);
+    const dismissAlert = useAlertStore((state: { dismissAlert: (id: string) => void }) => state.dismissAlert);
     const tokens = useAppDesignTokens();
 
     const handleDismiss = () => {