@sincpro/mobile-ui 0.1.2 → 0.1.3

package/lib/primitives/BaseButton.d.ts

@@ -0,0 +1,146 @@
+import { type VariantProps } from "../theme/tw";
+import type React from "react";
+import { FC } from "react";
+declare const button: import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: string;
+        accent: string;
+        secondary: string;
+        outline: string;
+        outlineDanger: string;
+        outlineBlack: string;
+        flat: string;
+        link: string;
+        transparent: string;
+    };
+    size: {
+        small: string;
+        medium: string;
+        large: string;
+    };
+    disabled: {
+        true: string;
+    };
+}, undefined, "rounded-lg items-center justify-center flex-row min-h-[44px]", {
+    variant: {
+        primary: string;
+        accent: string;
+        secondary: string;
+        outline: string;
+        outlineDanger: string;
+        outlineBlack: string;
+        flat: string;
+        link: string;
+        transparent: string;
+    };
+    size: {
+        small: string;
+        medium: string;
+        large: string;
+    };
+    disabled: {
+        true: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: string;
+        accent: string;
+        secondary: string;
+        outline: string;
+        outlineDanger: string;
+        outlineBlack: string;
+        flat: string;
+        link: string;
+        transparent: string;
+    };
+    size: {
+        small: string;
+        medium: string;
+        large: string;
+    };
+    disabled: {
+        true: string;
+    };
+}, undefined, "rounded-lg items-center justify-center flex-row min-h-[44px]", unknown, unknown, undefined>>;
+declare const buttonIcon: import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: string;
+        accent: string;
+        secondary: string;
+        outline: string;
+        outlineDanger: string;
+        outlineBlack: string;
+        flat: string;
+        link: string;
+        transparent: string;
+    };
+    size: {
+        small: string;
+        medium: string;
+        large: string;
+    };
+    disabled: {
+        true: string;
+    };
+}, undefined, "rounded-lg items-center justify-center aspect-square", {
+    variant: {
+        primary: string;
+        accent: string;
+        secondary: string;
+        outline: string;
+        outlineDanger: string;
+        outlineBlack: string;
+        flat: string;
+        link: string;
+        transparent: string;
+    };
+    size: {
+        small: string;
+        medium: string;
+        large: string;
+    };
+    disabled: {
+        true: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: string;
+        accent: string;
+        secondary: string;
+        outline: string;
+        outlineDanger: string;
+        outlineBlack: string;
+        flat: string;
+        link: string;
+        transparent: string;
+    };
+    size: {
+        small: string;
+        medium: string;
+        large: string;
+    };
+    disabled: {
+        true: string;
+    };
+}, undefined, "rounded-lg items-center justify-center aspect-square", unknown, unknown, undefined>>;
+export interface BaseButtonProps extends VariantProps<typeof button> {
+    title: string;
+    onPress?: () => void;
+    loading?: boolean;
+    disabled?: boolean;
+    className?: string;
+    icon?: React.ReactNode;
+}
+export declare const BaseButton: FC<BaseButtonProps>;
+export interface BaseButtonIconProps extends VariantProps<typeof buttonIcon> {
+    icon: string;
+    onPress?: () => void;
+    loading?: boolean;
+    disabled?: boolean;
+    className?: string;
+}
+export declare const BaseButtonIcon: FC<BaseButtonIconProps>;
+declare const BaseButtonWithIcon: React.FC<BaseButtonProps> & {
+    Icon: React.FC<BaseButtonIconProps>;
+};
+export default BaseButtonWithIcon;

package/lib/primitives/BaseButton.js

@@ -0,0 +1,233 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Display } from "../Display";
+import { theme } from "../theme";
+import { tv } from "../theme/tw";
+import { Typography } from "../Typography";
+import { LinearGradient } from "expo-linear-gradient";
+import { ActivityIndicator, TouchableOpacity, View } from "react-native";
+// ============================================================================
+// STYLE VARIANTS
+// ============================================================================
+const button = tv({
+    base: "rounded-lg items-center justify-center flex-row min-h-[44px]",
+    variants: {
+        variant: {
+            primary: "shadow-sm",
+            accent: "shadow-sm",
+            secondary: "bg-bg-card border border-primary shadow-sm",
+            outline: "bg-transparent border border-primary",
+            outlineDanger: "bg-transparent border border-danger",
+            outlineBlack: "bg-transparent border border-border-strong",
+            flat: "bg-text-primary/10",
+            link: "bg-transparent min-h-0",
+            transparent: "bg-transparent border border-border-light",
+        },
+        size: {
+            small: "py-1.5 px-3 min-h-[36px]",
+            medium: "py-2.5 px-4 min-h-[44px]",
+            large: "py-3 px-5 min-h-[48px]",
+        },
+        disabled: {
+            true: "opacity-70",
+        },
+    },
+    defaultVariants: {
+        variant: "primary",
+        size: "medium",
+    },
+});
+const buttonIcon = tv({
+    base: "rounded-lg items-center justify-center aspect-square",
+    variants: {
+        variant: {
+            primary: "shadow-sm",
+            accent: "shadow-sm",
+            secondary: "bg-bg-card border border-primary shadow-sm",
+            outline: "bg-transparent border border-primary",
+            outlineDanger: "bg-transparent border border-danger",
+            outlineBlack: "bg-transparent border border-border-strong",
+            flat: "bg-text-primary/10",
+            link: "bg-transparent",
+            transparent: "bg-transparent border border-border-light",
+        },
+        size: {
+            small: "w-9 h-9",
+            medium: "w-11 h-11",
+            large: "w-[52px] h-[52px]",
+        },
+        disabled: {
+            true: "opacity-70",
+        },
+    },
+    defaultVariants: {
+        variant: "primary",
+        size: "medium",
+    },
+});
+const textColor = tv({
+    variants: {
+        variant: {
+            primary: "text-white",
+            accent: "text-white",
+            secondary: "text-primary",
+            outline: "text-primary",
+            outlineDanger: "text-danger",
+            outlineBlack: "text-text-primary",
+            flat: "text-text-primary",
+            link: "text-primary",
+            transparent: "text-white",
+        },
+        disabled: {
+            true: "opacity-50",
+        },
+    },
+    compoundVariants: [
+        {
+            variant: "primary",
+            disabled: true,
+            className: "text-white/70",
+        },
+        {
+            variant: "accent",
+            disabled: true,
+            className: "text-white/70",
+        },
+        {
+            variant: "transparent",
+            disabled: true,
+            className: "text-white/70",
+        },
+        {
+            variant: ["secondary", "outline", "link"],
+            disabled: true,
+            className: "text-text-secondary",
+        },
+        {
+            variant: "outlineDanger",
+            disabled: true,
+            className: "text-danger/50",
+        },
+        {
+            variant: "outlineBlack",
+            disabled: true,
+            className: "text-text-primary/50",
+        },
+        {
+            variant: "flat",
+            disabled: true,
+            className: "text-text-primary/50",
+        },
+    ],
+    defaultVariants: {
+        variant: "primary",
+        disabled: false,
+    },
+});
+// ============================================================================
+// COLOR & SIZE MAPS (Dynamic with theme)
+// ============================================================================
+function getLoadingColorDynamic(variant) {
+    const map = {
+        primary: theme.text.inverse,
+        accent: theme.text.inverse,
+        secondary: theme.primary,
+        outline: theme.primary,
+        outlineDanger: theme.danger,
+        outlineBlack: theme.text.primary,
+        flat: theme.text.primary,
+        link: theme.primary,
+        transparent: theme.text.inverse,
+    };
+    return map[variant] ?? theme.text.inverse;
+}
+function getIconColorDynamic(variant, disabled) {
+    if (disabled) {
+        const disabledMap = {
+            primary: theme.icon.inverse + "70",
+            accent: theme.icon.inverse + "70",
+            secondary: theme.icon.disabled,
+            outline: theme.icon.disabled,
+            outlineDanger: theme.danger + "7f",
+            outlineBlack: theme.text.primary + "7f",
+            flat: theme.text.primary + "7f",
+            link: theme.icon.disabled,
+            transparent: theme.icon.inverse + "70",
+        };
+        return disabledMap[variant] ?? theme.icon.disabled;
+    }
+    const enabledMap = {
+        primary: theme.icon.inverse,
+        accent: theme.icon.inverse,
+        secondary: theme.primary,
+        outline: theme.primary,
+        outlineDanger: theme.danger,
+        outlineBlack: theme.text.primary,
+        flat: theme.text.primary,
+        link: theme.primary,
+        transparent: theme.icon.inverse,
+    };
+    return enabledMap[variant] ?? theme.icon.inverse;
+}
+const iconSizeMap = {
+    small: 16,
+    medium: 20,
+    large: 28,
+};
+const textVariantMap = {
+    small: "buttonSmall",
+    medium: "button",
+    large: "buttonLarge",
+};
+// ============================================================================
+// HELPER FUNCTIONS
+// ============================================================================
+function getLoadingColor(variant) {
+    return getLoadingColorDynamic(variant);
+}
+function getIconColor(variant, disabled) {
+    return getIconColorDynamic(variant, disabled);
+}
+function getIconSize(size) {
+    return iconSizeMap[size] ?? 20;
+}
+function getTextVariant(size) {
+    return textVariantMap[size] ?? "button";
+}
+export const BaseButton = ({ title, onPress, variant = "primary", size = "medium", loading = false, disabled = false, className, icon, }) => {
+    const textColorClass = textColor({
+        variant: variant ?? "primary",
+        disabled,
+    });
+    const loadingColorValue = getLoadingColor(variant ?? "primary");
+    const textVariantValue = getTextVariant(size ?? "medium");
+    if (variant === "link") {
+        return (_jsx(TouchableOpacity, { activeOpacity: 0.7, className: className, disabled: disabled || loading, onPress: onPress, children: loading ? (_jsx(ActivityIndicator, { color: loadingColorValue, size: "small" })) : (_jsx(Typography.Text, { className: textColorClass, variant: textVariantValue, children: title })) }));
+    }
+    if (variant === "primary" || variant === "accent") {
+        const gradientColors = variant === "primary" ? theme.gradient.primary : theme.gradient.accent;
+        const hasFlex = className?.includes("flex-1");
+        return (_jsx(View, { className: className, style: hasFlex ? { flex: 1 } : undefined, children: _jsx(LinearGradient, { colors: gradientColors, end: { x: 1, y: 1 }, start: { x: 0, y: 0 }, style: {
+                    borderRadius: 8,
+                    opacity: disabled ? 0.7 : 1,
+                }, children: _jsx(TouchableOpacity, { activeOpacity: 0.8, disabled: disabled || loading, onPress: onPress, children: _jsxs(View, { className: button({ size, disabled }), style: { backgroundColor: "transparent" }, children: [icon && !loading && _jsx(View, { className: "mr-2", children: icon }), loading ? (_jsx(ActivityIndicator, { color: loadingColorValue, size: "small" })) : (_jsx(Typography.Text, { className: textColorClass, variant: textVariantValue, children: title }))] }) }) }) }));
+    }
+    return (_jsxs(TouchableOpacity, { activeOpacity: 0.8, className: button({ variant, size, disabled, className }), disabled: disabled || loading, onPress: onPress, children: [icon && !loading && _jsx(View, { className: "mr-2", children: icon }), loading ? (_jsx(ActivityIndicator, { color: loadingColorValue, size: "small" })) : (_jsx(Typography.Text, { className: textColorClass, variant: textVariantValue, children: title }))] }));
+};
+export const BaseButtonIcon = ({ icon, onPress, variant = "primary", size = "medium", loading = false, disabled = false, className, }) => {
+    const iconColorValue = getIconColor(variant ?? "primary", disabled);
+    const loadingColorValue = getLoadingColor(variant ?? "primary");
+    const iconSizeValue = getIconSize(size ?? "medium");
+    if (variant === "primary" || variant === "accent") {
+        const gradientColors = variant === "primary" ? theme.gradient.primary : theme.gradient.accent;
+        return (_jsx(LinearGradient, { colors: gradientColors, end: { x: 1, y: 1 }, start: { x: 0, y: 0 }, style: {
+                borderRadius: 8,
+                opacity: disabled ? 0.7 : 1,
+            }, children: _jsx(TouchableOpacity, { activeOpacity: 0.8, disabled: disabled || loading, onPress: onPress, children: _jsx(View, { className: buttonIcon({ size, disabled }), style: { backgroundColor: "transparent" }, children: loading ? (_jsx(ActivityIndicator, { color: loadingColorValue, size: "small" })) : (_jsx(Display.Icon, { color: iconColorValue, name: icon, size: iconSizeValue })) }) }) }));
+    }
+    return (_jsx(TouchableOpacity, { activeOpacity: 0.8, className: buttonIcon({ variant, size, disabled, className }), disabled: disabled || loading, onPress: onPress, children: loading ? (_jsx(ActivityIndicator, { color: loadingColorValue, size: "small" })) : (_jsx(Display.Icon, { color: iconColorValue, name: icon, size: iconSizeValue })) }));
+};
+// ============================================================================
+// COMPOUND COMPONENT
+// ============================================================================
+const BaseButtonWithIcon = Object.assign(BaseButton, { Icon: BaseButtonIcon });
+export default BaseButtonWithIcon;

package/lib/primitives/Box.d.ts

@@ -0,0 +1,7 @@
+import { ViewProps } from "react-native";
+interface BoxProps extends ViewProps {
+    className?: string;
+}
+declare function Box({ className, style, ...props }: BoxProps): import("react/jsx-runtime").JSX.Element;
+export default Box;
+export { Box };

package/lib/primitives/Box.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../theme/tw";
+import { View } from "react-native";
+function Box({ className, style, ...props }) {
+    return _jsx(View, { className: cn(className), style: style, ...props });
+}
+export default Box;
+export { Box };

package/lib/primitives/Row.d.ts

@@ -0,0 +1,11 @@
+import { ViewProps } from "react-native";
+interface RowProps extends ViewProps {
+    spacing?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12;
+    align?: "start" | "center" | "end" | "stretch";
+    justify?: "start" | "center" | "end" | "between" | "around" | "evenly";
+    wrap?: boolean;
+    className?: string;
+}
+declare function Row({ spacing, align, justify, wrap, className, style, ...props }: RowProps): import("react/jsx-runtime").JSX.Element;
+export default Row;
+export { Row };

package/lib/primitives/Row.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../theme/tw";
+import { View } from "react-native";
+function Row({ spacing = 2, align = "center", justify = "start", wrap = false, className, style, ...props }) {
+    const alignMap = {
+        start: "items-start",
+        center: "items-center",
+        end: "items-end",
+        stretch: "items-stretch",
+    };
+    const justifyMap = {
+        start: "justify-start",
+        center: "justify-center",
+        end: "justify-end",
+        between: "justify-between",
+        around: "justify-around",
+        evenly: "justify-evenly",
+    };
+    return (_jsx(View, { className: cn("flex flex-row", `gap-${spacing}`, alignMap[align], justifyMap[justify], wrap && "flex-wrap", className), style: style, ...props }));
+}
+export default Row;
+export { Row };

package/lib/primitives/Stack.d.ts

@@ -0,0 +1,9 @@
+import { ViewProps } from "react-native";
+interface StackProps extends ViewProps {
+    spacing?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12;
+    align?: "start" | "center" | "end" | "stretch";
+    className?: string;
+}
+declare function Stack({ spacing, align, className, style, ...props }: StackProps): import("react/jsx-runtime").JSX.Element;
+export default Stack;
+export { Stack };

package/lib/primitives/Stack.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../theme/tw";
+import { View } from "react-native";
+function Stack({ spacing = 4, align = "stretch", className, style, ...props }) {
+    const alignMap = {
+        start: "items-start",
+        center: "items-center",
+        end: "items-end",
+        stretch: "items-stretch",
+    };
+    return (_jsx(View, { className: cn("flex flex-col", `gap-${spacing}`, alignMap[align], className), style: style, ...props }));
+}
+export default Stack;
+export { Stack };

package/lib/primitives/index.d.ts

@@ -0,0 +1,3 @@
+export { Box } from "../primitives/Box";
+export { Row } from "../primitives/Row";
+export { Stack } from "../primitives/Stack";

package/lib/primitives/index.js

@@ -0,0 +1,3 @@
+export { Box } from "../primitives/Box";
+export { Row } from "../primitives/Row";
+export { Stack } from "../primitives/Stack";

package/lib/providers/index.js

@@ -0,0 +1,2 @@
+"use strict";
+// Empty - all providers removed

package/lib/theme/active.d.ts

@@ -0,0 +1,3 @@
+import type { ThemeTokens } from "../theme/types";
+export declare function setActiveTheme(tokens: ThemeTokens): void;
+export declare function getActiveTheme(): ThemeTokens;

package/lib/theme/active.js

@@ -0,0 +1,8 @@
+import { DEFAULT_THEME } from "../theme/default";
+const activeTheme = { ...DEFAULT_THEME };
+export function setActiveTheme(tokens) {
+    Object.assign(activeTheme, tokens);
+}
+export function getActiveTheme() {
+    return activeTheme;
+}

package/lib/theme/components/ThemedActivityIndicator.d.ts

@@ -0,0 +1,21 @@
+import type { ActivityIndicatorProps } from "react-native";
+/**
+ * ============================================================================
+ * THEMED ACTIVITY INDICATOR
+ * ============================================================================
+ *
+ * Wrapper de ActivityIndicator que usa color primary.
+ * NOTA: Como no podemos usar hooks, usa el color hardcoded de Distribution.
+ * Para cambiar color, pasar prop color directamente.
+ *
+ * USO:
+ * ```tsx
+ * <ThemedActivityIndicator />
+ * <ThemedActivityIndicator size="large" color="#8B5CF6" />
+ * ```
+ */
+interface ThemedActivityIndicatorProps extends Omit<ActivityIndicatorProps, "color"> {
+    color?: string;
+}
+export declare function ThemedActivityIndicator({ color, ...props }: ThemedActivityIndicatorProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/theme/components/ThemedActivityIndicator.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ActivityIndicator as RNActivityIndicator } from "react-native";
+export function ThemedActivityIndicator({ color = "#0075FF", ...props }) {
+    return _jsx(RNActivityIndicator, { color: color, ...props });
+}

package/lib/theme/components/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * ============================================================================
+ * THEMED COMPONENTS - Barrel Export
+ * ============================================================================
+ *
+ * Componentes que necesitan acceso a tokens del theme vía hook.
+ * Estos son el 1% de casos donde className no es suficiente.
+ */
+export { ThemedActivityIndicator } from "../../theme/components/ThemedActivityIndicator";

package/lib/theme/components/index.js

@@ -0,0 +1,9 @@
+/**
+ * ============================================================================
+ * THEMED COMPONENTS - Barrel Export
+ * ============================================================================
+ *
+ * Componentes que necesitan acceso a tokens del theme vía hook.
+ * Estos son el 1% de casos donde className no es suficiente.
+ */
+export { ThemedActivityIndicator } from "../../theme/components/ThemedActivityIndicator";

package/lib/theme/default.d.ts

@@ -0,0 +1,2 @@
+import type { ThemeTokens } from "../theme/types";
+export declare const DEFAULT_THEME: ThemeTokens;

package/lib/theme/default.js

@@ -0,0 +1,79 @@
+export const DEFAULT_THEME = {
+    name: "default",
+    primary: "#2563EB",
+    secondary: "#64748B",
+    accent: "#F59E0B",
+    bg: {
+        page: "#F9FAFB",
+        card: "#FFFFFF",
+        popover: "#FFFFFF",
+        muted: "#F3F4F6",
+        accent: "#EFF6FF",
+        hover: "#F3F4F6",
+        disabled: "#F3F4F6",
+    },
+    text: {
+        primary: "#0F172A",
+        secondary: "#475569",
+        tertiary: "#94A3B8",
+        muted: "#64748B",
+        accent: "#1E40AF",
+        inverse: "#FFFFFF",
+        disabled: "#94A3B8",
+        onPrimary: "#FFFFFF",
+        onSecondary: "#FFFFFF",
+        onAccent: "#FFFFFF",
+        onDanger: "#FFFFFF",
+        onSuccess: "#FFFFFF",
+    },
+    icon: {
+        primary: "#0F172A",
+        secondary: "#64748B",
+        tertiary: "#94A3B8",
+        inverse: "#FFFFFF",
+        disabled: "#CBD5E1",
+    },
+    border: {
+        default: "#E5E7EB",
+        light: "#F3F4F6",
+        strong: "#D1D5DB",
+        focus: "#2563EB",
+    },
+    success: "#16A34A",
+    warning: "#F59E0B",
+    danger: "#DC2626",
+    info: "#2563EB",
+    successLight: "#DCFCE7",
+    warningLight: "#FEF3C7",
+    dangerLight: "#FEE2E2",
+    infoLight: "#DBEAFE",
+    ring: "#2563EB",
+    input: "#E5E7EB",
+    gradient: {
+        primary: ["#2563EB", "#1E40AF"],
+        accent: ["#F59E0B", "#D97706"],
+    },
+    shadow: {
+        sm: {
+            shadowColor: "#000000",
+            shadowOffset: { width: 0, height: 1 },
+            shadowOpacity: 0.05,
+            shadowRadius: 2,
+            elevation: 1,
+        },
+        md: {
+            shadowColor: "#000000",
+            shadowOffset: { width: 0, height: 4 },
+            shadowOpacity: 0.1,
+            shadowRadius: 6,
+            elevation: 3,
+        },
+        lg: {
+            shadowColor: "#000000",
+            shadowOffset: { width: 0, height: 10 },
+            shadowOpacity: 0.1,
+            shadowRadius: 15,
+            elevation: 5,
+        },
+    },
+};

package/lib/theme/index.d.ts

@@ -0,0 +1,4 @@
+export { getActiveTheme, setActiveTheme } from "../theme/active";
+export { ThemedActivityIndicator } from "../theme/components";
+export { theme } from "../theme/theme";
+export type { ThemeTokens } from "../theme/types";

package/lib/theme/index.js

@@ -0,0 +1,3 @@
+export { getActiveTheme, setActiveTheme } from "../theme/active";
+export { ThemedActivityIndicator } from "../theme/components";
+export { theme } from "../theme/theme";

package/lib/theme/theme.d.ts

@@ -0,0 +1,13 @@
+/**
+ * ============================================================================
+ * THEME CONSTANT - Acceso directo al theme activo
+ * ============================================================================
+ *
+ * Constante que resuelve automáticamente el theme según el dominio activo.
+ * SOLO usar cuando className no es suficiente (RefreshControl, placeholderColor, etc.)
+ *
+ * @example
+ * import { theme } from "../theme";
+ * const color = theme.primary;
+ */
+export declare const theme: import("./types").ThemeTokens;

package/lib/theme/theme.js

@@ -0,0 +1,14 @@
+/**
+ * ============================================================================
+ * THEME CONSTANT - Acceso directo al theme activo
+ * ============================================================================
+ *
+ * Constante que resuelve automáticamente el theme según el dominio activo.
+ * SOLO usar cuando className no es suficiente (RefreshControl, placeholderColor, etc.)
+ *
+ * @example
+ * import { theme } from "../theme";
+ * const color = theme.primary;
+ */
+import { getActiveTheme } from "../theme/active";
+export const theme = getActiveTheme();