@makroz/mobile 1.1.2 → 1.2.0

package/dist/__mocks__/flash-list.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Mock for @shopify/flash-list — structural stub.
+ */
+declare const FlashList: (props: any) => {
+    type: string;
+    props: {
+        'data-flashlist': boolean;
+        children: any;
+    };
+};
+export { FlashList };
+//# sourceMappingURL=flash-list.d.ts.map

package/dist/__mocks__/react-native.d.ts

@@ -0,0 +1,77 @@
+declare const View: (props: any) => {
+    type: string;
+    props: any;
+};
+declare const Text: (props: any) => {
+    type: string;
+    props: any;
+};
+declare const TouchableOpacity: (props: any) => {
+    type: string;
+    props: any;
+};
+declare const TextInput: (props: any) => {
+    type: string;
+    props: any;
+};
+declare const Pressable: (props: any) => {
+    type: string;
+    props: any;
+};
+declare const Image: (props: any) => {
+    type: string;
+    props: any;
+};
+declare const ScrollView: (props: any) => {
+    type: string;
+    props: any;
+};
+declare const FlatList: (props: any) => {
+    type: string;
+    props: {
+        'data-flatlist': boolean;
+        children: any;
+    };
+};
+declare const Modal: (props: any) => {
+    type: string;
+    props: {
+        'data-modal': boolean;
+        children: any;
+    };
+} | null;
+declare const ActivityIndicator: (_props: any) => {
+    type: string;
+    props: {
+        'data-indicator': boolean;
+    };
+};
+declare const StyleSheet: {
+    create: (styles: any) => any;
+    flatten: (style: any) => any;
+    hairlineWidth: number;
+};
+declare const Platform: {
+    OS: string;
+    select: (obj: any) => any;
+};
+declare const LayoutAnimation: {
+    configureNext: () => void;
+    easeInEaseOut: () => void;
+    linear: () => void;
+    spring: () => void;
+};
+declare const UIManager: {
+    setLayoutAnimationEnabledExperimental: () => void;
+    measure: () => void;
+    measureInWindow: () => void;
+};
+declare const useColorScheme: () => "light" | "dark";
+declare const useWindowDimensions: () => {
+    width: number;
+    height: number;
+    scale: number;
+    fontScale: number;
+};
+export { View, Text, TouchableOpacity, TextInput, Pressable, Image, ScrollView, FlatList, Modal, ActivityIndicator, StyleSheet, Platform, LayoutAnimation, UIManager, useColorScheme, useWindowDimensions, };
+//# sourceMappingURL=react-native.d.ts.map

package/dist/auth/MkAuthContext.d.ts

@@ -0,0 +1,72 @@
+/**
+ * Auth context shape + the React context object.
+ *
+ * This module is intentionally side-effect free (it only defines
+ * the context + the type). The provider lives in
+ * `MkAuthProvider.tsx` and the consumer hook lives in
+ * `useMkAuth.ts`. Splitting them this way keeps circular imports
+ * out of the picture and lets tests import the context type
+ * without pulling in the full provider tree.
+ */
+import type { AdminDto, LoginInput, AuthTokens } from './types';
+/**
+ * Public auth context value exposed by `MkAuthProvider` and
+ * consumed by `useMkAuth`.
+ *
+ * Design notes:
+ * - `isAuthenticated` is derived state from `user`, but it is
+ *   exposed as a first-class field so call sites don't have to
+ *   remember the null-vs-false distinction that the legacy
+ *   `MkAuthContext.tsx` introduced (here we use `null` only,
+ *   matching the SecureStore contract).
+ * - `hasAbility(ability)` accepts a single string and returns
+ *   whether the current user has *any* permission for that
+ *   ability. The underlying `canUser` from `@makroz/core` can also
+ *   take an action verb — consumers that need action-level
+ *   granularity should call `canUser` directly with
+ *   `user.role.abilities`.
+ */
+export interface MkAuthContextValue {
+    /** The currently authenticated admin, or `null` if not signed in. */
+    user: AdminDto | null;
+    /** Convenience: `user !== null`. */
+    isAuthenticated: boolean;
+    /** `true` while the provider is hydrating from SecureStore or waiting on a network call. */
+    isLoading: boolean;
+    /** Last login/refresh/logout error, or `null` if no error. */
+    error: Error | null;
+    /**
+     * Authenticate with email + password. On success persists
+     * the new tokens in SecureStore and updates `user`.
+     *
+     * Throws on network / server errors so callers can decide
+     * whether to surface the error.
+     */
+    login: (input: LoginInput) => Promise<AdminDto>;
+    /**
+     * Best-effort logout. Tells the backend (if reachable) and
+     * then unconditionally clears local SecureStore state.
+     *
+     * Never throws — even if the backend call fails the local
+     * session is cleared.
+     */
+    logout: () => Promise<void>;
+    /**
+     * Force a refresh of the access token using the stored
+     * refresh token. Returns the new tokens or `null` if the
+     * refresh failed (in which case the user is logged out).
+     */
+    refresh: () => Promise<AuthTokens | null>;
+    /**
+     * Check whether the current user has any permission for the
+     * given ability. Returns `false` for unauthenticated users.
+     */
+    hasAbility: (ability: string) => boolean;
+}
+/**
+ * The React context. Default value is `undefined` so the
+ * `useMkAuth` hook can throw a helpful error when used outside
+ * the provider.
+ */
+export declare const MkAuthContext: import("react").Context<MkAuthContextValue | undefined>;
+//# sourceMappingURL=MkAuthContext.d.ts.map

package/dist/auth/MkAuthForm.d.ts

@@ -0,0 +1,31 @@
+/**
+ * `MkAuthForm` — a mobile-friendly login form.
+ *
+ * Self-contained: it owns its own email/password state, calls
+ * `login()` from `useMkAuth`, and renders inline error + loading
+ * states. Consumers only need to wrap it inside an
+ * `<MkAuthProvider>` and (optionally) a `<MkThemeProvider>` so
+ * the input/button pick up the design tokens.
+ *
+ * Styling is plain `StyleSheet` (no NativeWind dependency) so
+ * the form works out of the box in any Expo / RN app.
+ */
+export interface MkAuthFormProps {
+    /**
+     * Override the submit button label. Defaults to `"Sign in"`.
+     */
+    submitLabel?: string;
+    /**
+     * Called after a successful login. Use this to navigate
+     * (e.g. `router.replace('/admin')`) instead of letting the
+     * form own the navigation state.
+     */
+    onSuccess?: () => void;
+    /**
+     * Optional container style override.
+     */
+    style?: object;
+}
+export declare function MkAuthForm({ submitLabel, onSuccess, style, }: MkAuthFormProps): React.JSX.Element;
+export default MkAuthForm;
+//# sourceMappingURL=MkAuthForm.d.ts.map

package/dist/auth/MkAuthProvider.d.ts

@@ -0,0 +1,57 @@
+/**
+ * `MkAuthProvider` — the React provider that powers `useMkAuth`.
+ *
+ * Responsibilities:
+ * - Hydrate tokens + user from `expo-secure-store` on mount.
+ * - Expose `login`, `logout`, `refresh`, `hasAbility` via context.
+ * - Provide a memoised `authedFetch` helper that automatically
+ *   attaches the access token and refreshes once on 401.
+ *
+ * Networking note: this provider does NOT use TanStack Query
+ * (the mk-director monorepo does not currently declare it as a
+ * peer dep). It uses the same plain `fetch`-based pattern that
+ * the legacy `useApi.ts` hook uses, so the surface stays
+ * consistent across the package. Consumers that need query
+ * caching should layer TanStack Query on top of `authedFetch`
+ * at the call site.
+ */
+import type { ReactNode } from 'react';
+/**
+ * Props for `MkAuthProvider`.
+ */
+export interface MkAuthProviderProps {
+    /**
+     * The auth scope — used to build the URL prefix
+     * `/api/${scope}/auth/...`. Example: `"admin"`.
+     */
+    scope: string;
+    /**
+     * Base URL of the backend (no trailing slash). Example:
+     * `"http://localhost:8000"` for a dev API.
+     */
+    apiBaseUrl: string;
+    /**
+     * Optional override of the per-request timeout in ms.
+     * Defaults to 15s — long enough for slow mobile networks
+     * but short enough that the UI doesn't appear to hang.
+     *
+     * Reserved for a future AbortController-based timeout
+     * implementation; the current provider does not enforce
+     * it but accepts the prop for forward compatibility.
+     */
+    requestTimeoutMs?: number;
+    /**
+     * Children.
+     */
+    children: ReactNode;
+}
+/**
+ * The provider component.
+ *
+ * Marked `'use client'` equivalent — RN doesn't use the Next.js
+ * `'use client'` directive, but conceptually this component is
+ * a Client Component (it owns state, effects, and side effects).
+ */
+export declare function MkAuthProvider({ scope, apiBaseUrl, requestTimeoutMs: _requestTimeoutMs, children, }: MkAuthProviderProps): React.JSX.Element;
+export default MkAuthProvider;
+//# sourceMappingURL=MkAuthProvider.d.ts.map

package/dist/auth/secureStorage.d.ts

@@ -0,0 +1,63 @@
+/**
+ * Thin wrapper around `expo-secure-store` for credentials.
+ *
+ * IMPORTANT: This module is the SOLE place in `@makroz/mobile` that
+ * touches persistent credential storage. Do NOT introduce
+ * `AsyncStorage` for tokens — they are credentials and must live in
+ * the device keychain (iOS) / Keystore (Android).
+ *
+ * The module imports `expo-secure-store` at the top level so the
+ * Vitest test suite can `vi.mock('expo-secure-store', ...)` to
+ * substitute an in-memory implementation.
+ */
+import type { AdminDto } from './types';
+/**
+ * SecureStore keys. Keep these stable — they are part of the
+ * on-disk schema. If you ever need to bump them (e.g. for a
+ * breaking schema change) use a migration rather than a rename.
+ */
+export declare const SECURE_KEYS: {
+    readonly accessToken: "access_token";
+    readonly refreshToken: "refresh_token";
+    readonly user: "user";
+};
+export type SecureKey = (typeof SECURE_KEYS)[keyof typeof SECURE_KEYS];
+/**
+ * Get the persisted access token, or `null` if none is stored
+ * or the store is unavailable (e.g. running in a test that
+ * mocked `expo-secure-store` without a backing map).
+ */
+export declare function getAccessToken(): Promise<string | null>;
+/**
+ * Persist the access token. `null` clears it.
+ */
+export declare function setAccessToken(token: string | null): Promise<void>;
+/**
+ * Get the persisted refresh token, or `null` if none is stored.
+ */
+export declare function getRefreshToken(): Promise<string | null>;
+/**
+ * Persist the refresh token. `null` clears it.
+ */
+export declare function setRefreshToken(token: string | null): Promise<void>;
+/**
+ * Get the persisted admin user, or `null` if none is stored.
+ *
+ * The user is JSON-serialised — SecureStore stores strings only.
+ */
+export declare function getUser(): Promise<AdminDto | null>;
+/**
+ * Persist the admin user. `null` clears it.
+ */
+export declare function setUser(user: AdminDto | null): Promise<void>;
+/**
+ * Wipe all three credential keys. Called on logout and on any
+ * unrecoverable refresh failure.
+ *
+ * The implementation is best-effort: a single failed `deleteItemAsync`
+ * is swallowed because the *next* successful login will overwrite
+ * the value anyway, and we don't want a transient SecureStore
+ * hiccup to brick the user out of the app.
+ */
+export declare function clearAll(): Promise<void>;
+//# sourceMappingURL=secureStorage.d.ts.map

package/dist/auth/types.d.ts

@@ -0,0 +1,65 @@
+/**
+ * Auth types for `@makroz/mobile`.
+ *
+ * Wire-format DTOs returned by the MK-Director backend
+ * (e.g. Laravel `mk-laravel` package). Keep these decoupled from
+ * the existing `MkUser` in `@makroz/core` — this is the new
+ * SecureStore-backed auth surface introduced in MK-MOB-1.0.3.
+ */
+/**
+ * Standard admin record as returned by `/api/{scope}/auth/me` and friends.
+ *
+ * `abilities` is a pipe-delimited string in the format
+ * `"users:CRUD|roles:R"` — the same convention the legacy
+ * `MkAuthContext` uses via `canUser` from `@makroz/core`.
+ */
+export interface AdminDto {
+    id: string | number;
+    name: string;
+    email: string;
+    role?: {
+        name: string;
+        abilities: string;
+    };
+    [key: string]: unknown;
+}
+/**
+ * Access + refresh token pair persisted in `expo-secure-store`.
+ *
+ * - `accessToken` is short-lived (15 min) and sent on every API request.
+ * - `refreshToken` is long-lived and only used by the auto-refresh
+ *   interceptor inside `MkAuthProvider`.
+ */
+export interface AuthTokens {
+    accessToken: string;
+    refreshToken: string;
+}
+/**
+ * Payload accepted by `POST /api/{scope}/auth/login`.
+ *
+ * The `scope` itself comes from the provider props, NOT the body,
+ * so this is just the user-supplied credentials.
+ */
+export interface LoginInput {
+    email: string;
+    password: string;
+}
+/**
+ * Internal representation of the refresh-token response.
+ *
+ * Mirrors the wire shape returned by the Laravel `refresh` endpoint.
+ */
+export interface RefreshResponse {
+    accessToken: string;
+    refreshToken: string;
+    user?: AdminDto;
+}
+/**
+ * Internal representation of the login response.
+ */
+export interface LoginResponse {
+    user: AdminDto;
+    accessToken: string;
+    refreshToken: string;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/auth/useMkAuth.d.ts

@@ -0,0 +1,17 @@
+/**
+ * `useMkAuth` — the public hook for consuming the auth context.
+ *
+ * Kept in its own module so the *type* of the context (and the
+ * `createContext` call) can be imported in isolation by tests
+ * and tooling without dragging in the full provider tree.
+ */
+import { type MkAuthContextValue } from './MkAuthContext';
+/**
+ * Access the current auth context value.
+ *
+ * Throws if used outside an `<MkAuthProvider>` — this is a
+ * developer error, not a runtime condition, so failing loudly
+ * is the right call.
+ */
+export declare function useMkAuth(): MkAuthContextValue;
+//# sourceMappingURL=useMkAuth.d.ts.map

package/dist/components/MkAccordion.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import type { ViewStyle } from 'react-native';
+export interface MkAccordionItem {
+    key: string;
+    title: string;
+    content: React.ReactNode;
+    disabled?: boolean;
+}
+export interface MkAccordionProps {
+    items: MkAccordionItem[];
+    multiple?: boolean;
+    defaultExpanded?: string[];
+    expanded?: string[];
+    onChange?: (expandedKeys: string[]) => void;
+    variant?: 'default' | 'bordered' | 'separated';
+    style?: ViewStyle;
+}
+export declare const MkAccordion: React.FC<MkAccordionProps>;
+//# sourceMappingURL=MkAccordion.d.ts.map

package/dist/components/MkAccordion.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=MkAccordion.test.d.ts.map

package/dist/components/MkAlert.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { ViewStyle } from 'react-native';
+/**
+ * @module MkAlert (Mobile)
+ * @description Inline alert banner. Same API as mk-web MkAlert.
+ */
+export interface MkAlertProps {
+    variant?: 'info' | 'success' | 'warning' | 'error' | 'default';
+    title?: string;
+    children?: React.ReactNode;
+    icon?: React.ReactNode;
+    dismissible?: boolean;
+    onDismiss?: () => void;
+    action?: React.ReactNode;
+    style?: ViewStyle;
+}
+export declare const MkAlert: React.FC<MkAlertProps>;
+//# sourceMappingURL=MkAlert.d.ts.map

package/dist/components/MkAlert.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=MkAlert.test.d.ts.map

package/dist/components/MkAvatar.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { ViewStyle } from 'react-native';
+export interface MkAvatarProps {
+    src?: string | null;
+    name?: string;
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    status?: 'online' | 'offline' | 'away' | 'busy' | null;
+    style?: ViewStyle;
+    onPress?: () => void;
+}
+export declare const MkAvatar: React.FC<MkAvatarProps>;
+//# sourceMappingURL=MkAvatar.d.ts.map

package/dist/components/MkAvatar.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=MkAvatar.test.d.ts.map

package/dist/components/MkBadge.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { ViewStyle } from 'react-native';
+export interface MkBadgeProps {
+    children: React.ReactNode;
+    variant?: 'default' | 'primary' | 'success' | 'warning' | 'error' | 'info';
+    size?: 'sm' | 'md';
+    dot?: boolean;
+    style?: ViewStyle;
+}
+export declare const MkBadge: React.FC<MkBadgeProps>;
+//# sourceMappingURL=MkBadge.d.ts.map

package/dist/components/MkBadge.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=MkBadge.test.d.ts.map

package/dist/components/MkButton.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { ViewStyle } from 'react-native';
+interface MkButtonProps {
+    label: string;
+    variant?: 'primary' | 'outline' | 'ghost' | 'error';
+    loading?: boolean;
+    disabled?: boolean;
+    onPress?: () => void;
+    style?: ViewStyle;
+}
+export declare const MkButton: React.FC<MkButtonProps>;
+export {};
+//# sourceMappingURL=MkButton.d.ts.map

package/dist/components/MkButton.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=MkButton.test.d.ts.map

package/dist/components/MkCard.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { ViewStyle } from 'react-native';
+export interface MkCardProps {
+    children: React.ReactNode;
+    title?: string;
+    subtitle?: string;
+    headerRight?: React.ReactNode;
+    footer?: React.ReactNode;
+    variant?: 'default' | 'outlined' | 'elevated';
+    padding?: 'none' | 'sm' | 'md' | 'lg';
+    onPress?: () => void;
+    style?: ViewStyle;
+}
+export declare const MkCard: React.FC<MkCardProps>;
+//# sourceMappingURL=MkCard.d.ts.map

package/dist/components/MkCard.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=MkCard.test.d.ts.map

package/dist/components/MkCheck.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { ViewStyle } from 'react-native';
+/**
+ * @module MkCheck
+ * @description Checkbox component for React Native. Same prop API as mk-web MkCheck.
+ */
+export interface MkCheckProps {
+    label?: string;
+    checked?: boolean;
+    indeterminate?: boolean;
+    onChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    error?: string;
+    size?: 'sm' | 'md' | 'lg';
+    style?: ViewStyle;
+}
+export declare const MkCheck: React.FC<MkCheckProps>;
+//# sourceMappingURL=MkCheck.d.ts.map

package/dist/components/MkCheck.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=MkCheck.test.d.ts.map

package/dist/components/MkDatePicker.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import type { ViewStyle } from 'react-native';
+/**
+ * @module MkDatePicker (Mobile)
+ * @description Dependency-free DatePicker wrapper for React Native.
+ * Uses a dynamic import for `@react-native-community/datetimepicker` to show a modal picker.
+ *
+ * **Requires**: `npm install @react-native-community/datetimepicker`
+ *
+ * @example
+ * ```tsx
+ * <MkDatePicker
+ *   label="Fecha de nacimiento"
+ *   value="2000-01-01"
+ *   onChange={setDate}
+ * />
+ * ```
+ */
+export interface MkDatePickerProps {
+    label?: string;
+    value?: string;
+    onChange?: (value: string) => void;
+    error?: string;
+    disabled?: boolean;
+    min?: string;
+    max?: string;
+    style?: ViewStyle;
+}
+export declare const MkDatePicker: React.FC<MkDatePickerProps>;
+//# sourceMappingURL=MkDatePicker.d.ts.map

package/dist/components/MkDatePicker.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=MkDatePicker.test.d.ts.map

package/dist/components/MkDivider.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { ViewStyle } from 'react-native';
+export interface MkDividerProps {
+    label?: string;
+    orientation?: 'horizontal' | 'vertical';
+    variant?: 'solid' | 'dashed' | 'dotted';
+    spacing?: 'sm' | 'md' | 'lg';
+    style?: ViewStyle;
+}
+export declare const MkDivider: React.FC<MkDividerProps>;
+//# sourceMappingURL=MkDivider.d.ts.map

package/dist/components/MkDivider.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=MkDivider.test.d.ts.map

package/dist/components/MkDropDown.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+import type { ViewStyle } from 'react-native';
+/**
+ * @module MkDropDown (Mobile)
+ * @description Floating action menu as a Modal bottom-sheet-style popup.
+ * Same prop API as mk-web's MkDropDown: options, onSelect, withSearch, value.
+ *
+ * @example
+ * ```tsx
+ * <MkDropDown
+ *   options={[
+ *     { value: 'edit', label: 'Editar', icon: <EditIcon /> },
+ *     { value: 'delete', label: 'Eliminar' },
+ *   ]}
+ *   onSelect={(val) => handleAction(val)}
+ *   withSearch
+ * />
+ * ```
+ */
+export interface MkDropdownOptionType {
+    value: string | number;
+    label: string;
+    icon?: React.ReactNode;
+}
+export interface MkDropDownProps {
+    options: MkDropdownOptionType[];
+    onSelect: (value: string | number) => void;
+    /** Custom trigger element. Default: "⋮" icon. */
+    initiator?: React.ReactNode;
+    withSearch?: boolean;
+    value?: string | number;
+    placeholder?: string;
+    /** Style for the container */
+    style?: ViewStyle;
+}
+export declare const MkDropDown: React.FC<MkDropDownProps>;
+//# sourceMappingURL=MkDropDown.d.ts.map

package/dist/components/MkDropDown.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=MkDropDown.test.d.ts.map

package/dist/components/MkEmptyState.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { ViewStyle } from 'react-native';
+export interface MkEmptyStateProps {
+    icon?: React.ReactNode;
+    title?: string;
+    description?: string;
+    action?: React.ReactNode;
+    style?: ViewStyle;
+}
+export declare const MkEmptyState: React.FC<MkEmptyStateProps>;
+//# sourceMappingURL=MkEmptyState.d.ts.map

package/dist/components/MkEmptyState.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=MkEmptyState.test.d.ts.map