@sincpro/mobile-ui 0.7.2 → 1.1.0

package/dist/Display/Display.Badge.d.ts

@@ -1,4 +1,4 @@
-import { type VariantProps } from "../theme/tw";
+import { type VariantProps } from "../theme/tw.js";
 declare const badge: import("tailwind-variants").TVReturnType<{
     variant: {
         info: {
@@ -59,7 +59,7 @@ declare const badge: import("tailwind-variants").TVReturnType<{
 }, {
     root: string;
     text: string;
-}, import("tailwind-variants").TVReturnType<{
+}, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
         info: {
             root: string;
@@ -89,7 +89,7 @@ declare const badge: import("tailwind-variants").TVReturnType<{
 }, {
     root: string;
     text: string;
-}, undefined, unknown, unknown, undefined>>;
+}>>;
 export type BadgeVariant = VariantProps<typeof badge>["variant"];
 export declare enum BadgeVariants {
     INFO = "info",

package/dist/Display/Display.Badge.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "nativewind/jsx-runtime";
-import { tv } from "../theme/tw";
+import { tv } from "../theme/tw.js";
 import { Text, View } from "react-native";
 const badge = tv({
     slots: {

package/dist/Display/Display.Card.d.ts

@@ -1,27 +1,27 @@
-import { type VariantProps } from "../theme/tw";
+import { type VariantProps } from "../theme/tw.js";
 import type { ReactNode } from "react";
 declare const card: import("tailwind-variants").TVReturnType<{
     padding: {
-        none: string;
-        sm: string;
-        md: string;
-        lg: string;
+        none: "p-0";
+        sm: "p-3";
+        md: "p-4";
+        lg: "p-6";
     };
 }, undefined, "bg-bg-card rounded-lg border border-border-light", {
     padding: {
-        none: string;
-        sm: string;
-        md: string;
-        lg: string;
+        none: "p-0";
+        sm: "p-3";
+        md: "p-4";
+        lg: "p-6";
     };
-}, undefined, import("tailwind-variants").TVReturnType<{
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     padding: {
-        none: string;
-        sm: string;
-        md: string;
-        lg: string;
+        none: "p-0";
+        sm: "p-3";
+        md: "p-4";
+        lg: "p-6";
     };
-}, undefined, "bg-bg-card rounded-lg border border-border-light", unknown, unknown, undefined>>;
+}, undefined>>;
 export interface CardProps extends VariantProps<typeof card> {
     elevation?: "none" | "sm" | "md" | "lg";
     onPress?: () => void;

package/dist/Display/Display.Card.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "nativewind/jsx-runtime";
-import Pressable from "../primitives/Pressable";
-import { theme } from "../theme";
-import { cn, tv } from "../theme/tw";
-import { Typography } from "../Typography";
+import Pressable from "../primitives/Pressable.js";
+import { theme } from "../theme/index.js";
+import { cn, tv } from "../theme/tw.js";
+import { Typography } from "../Typography/index.js";
 import { View } from "react-native";
 const card = tv({
     base: "bg-bg-card rounded-lg border border-border-light",

package/dist/Display/Display.Carousel.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import { theme } from "../theme";
-import { cn } from "../theme/tw";
+import { theme } from "../theme/index.js";
+import { cn } from "../theme/tw.js";
 import { useState } from "react";
 import { ScrollView, View, } from "react-native";
 function Carousel({ data, renderItem, keyExtractor, itemWidth, gap = 12, showDots = true, className, testID, }) {

package/dist/Display/Display.Chip.d.ts

@@ -1,4 +1,4 @@
-import { type VariantProps } from "../theme/tw";
+import { type VariantProps } from "../theme/tw.js";
 declare const chip: import("tailwind-variants").TVReturnType<{
     tone: {
         neutral: {
@@ -61,7 +61,7 @@ declare const chip: import("tailwind-variants").TVReturnType<{
 }, {
     root: string;
     label: string;
-}, import("tailwind-variants").TVReturnType<{
+}, import("tailwind-variants").TVReturnTypeLike<{
     tone: {
         neutral: {
             root: string;
@@ -92,7 +92,7 @@ declare const chip: import("tailwind-variants").TVReturnType<{
 }, {
     root: string;
     label: string;
-}, undefined, unknown, unknown, undefined>>;
+}>>;
 export interface ChipProps extends VariantProps<typeof chip> {
     label: string;
     onPress?: () => void;

package/dist/Display/Display.Chip.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import Icon from "../Display/Display.Icon";
-import Pressable from "../primitives/Pressable";
-import { theme } from "../theme";
-import { tv } from "../theme/tw";
+import Icon from "./Display.Icon.js";
+import Pressable from "../primitives/Pressable.js";
+import { theme } from "../theme/index.js";
+import { tv } from "../theme/tw.js";
 import { Text, View } from "react-native";
 const chip = tv({
     slots: {
@@ -12,10 +12,10 @@ const chip = tv({
     variants: {
         tone: {
             neutral: { root: "bg-bg-muted", label: "text-text-secondary" },
-            primary: { root: "bg-bg-accent", label: "text-text-accent" },
-            success: { root: "bg-success-light", label: "text-success" },
-            warning: { root: "bg-warning-light", label: "text-warning" },
-            danger: { root: "bg-danger-light", label: "text-danger" },
+            primary: { root: "bg-container-primary", label: "text-container-on-primary" },
+            success: { root: "bg-container-success", label: "text-container-on-success" },
+            warning: { root: "bg-container-warning", label: "text-container-on-warning" },
+            danger: { root: "bg-container-danger", label: "text-container-on-danger" },
         },
         selected: {
             true: { root: "border border-primary" },
@@ -28,10 +28,10 @@ const chip = tv({
 });
 const removeIconColor = {
     neutral: theme.text.secondary,
-    primary: theme.text.accent,
-    success: theme.success,
-    warning: theme.warning,
-    danger: theme.danger,
+    primary: theme.container.onPrimary,
+    success: theme.container.onSuccess,
+    warning: theme.container.onWarning,
+    danger: theme.container.onDanger,
 };
 function Chip({ label, tone = "neutral", selected = false, onPress, onRemove, className, testID, }) {
     const styles = chip({ tone, selected });

package/dist/Display/Display.CircleButton.d.ts

@@ -1,4 +1,4 @@
-import { IconType } from "../utils/icon";
+import { IconType } from "../utils/icon.js";
 import { ComponentType } from "react";
 export interface CircleButtonProps {
     iconType?: IconType;

package/dist/Display/Display.CircleButton.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "nativewind/jsx-runtime";
-import Icon from "../Display/Display.Icon";
-import { useTheme } from "../theme";
-import { cn } from "../theme/tw";
+import Icon from "./Display.Icon.js";
+import { useTheme } from "../theme/index.js";
+import { cn } from "../theme/tw.js";
 import { View } from "react-native";
 import { tv } from "tailwind-variants";
 const circleButtonVariants = tv({

package/dist/Display/Display.CopyableText.d.ts

@@ -1,4 +1,4 @@
-type CopyableTextProps = {
+export type CopyableTextProps = ({
     value: string;
     getValue?: never;
     label?: string;
@@ -8,6 +8,13 @@ type CopyableTextProps = {
     getValue: () => string;
     label?: string;
     className?: string;
+}) & {
+    accessibilityLabel?: string;
+    testID?: string;
+    disabled?: boolean;
+    onCopied?: (value: string) => void;
+    onCopyError?: (error: Error) => void;
+    selectable?: boolean;
 };
-declare function CopyableText({ value, getValue, label, className }: CopyableTextProps): import("react").JSX.Element;
+declare function CopyableText({ value, getValue, label, className, accessibilityLabel, testID, disabled, onCopied, onCopyError, selectable, }: CopyableTextProps): import("react").JSX.Element;
 export default CopyableText;

package/dist/Display/Display.CopyableText.js

@@ -1,14 +1,82 @@
-import { jsx as _jsx } from "nativewind/jsx-runtime";
-import { Typography } from "../Typography";
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import Icon from "./Display.Icon.js";
+import Pressable from "../primitives/Pressable.js";
+import { useTheme } from "../theme/index.js";
+import { Typography } from "../Typography/index.js";
 import * as Clipboard from "expo-clipboard";
-import { TouchableOpacity } from "react-native";
-function CopyableText({ value, getValue, label, className }) {
+import { useEffect, useRef, useState } from "react";
+import { AccessibilityInfo, ActivityIndicator, View } from "react-native";
+function CopyableText({ value, getValue, label, className, accessibilityLabel, testID, disabled = false, onCopied, onCopyError, selectable = false, }) {
+    const theme = useTheme();
+    const pending = useRef(false);
+    const [status, setStatus] = useState("idle");
+    const [copiedValue, setCopiedValue] = useState();
     const hasStaticValue = value !== undefined;
-    const displayText = label || value;
+    const isCopied = status === "copied" && (!hasStaticValue || copiedValue === value);
+    const displayText = label || value || "Copiar";
+    const copyLabel = accessibilityLabel ?? `Copiar ${displayText}`;
+    useEffect(() => {
+        if (status !== "copied")
+            return;
+        const timer = setTimeout(() => setStatus("idle"), 3000);
+        return () => clearTimeout(timer);
+    }, [status]);
     const handleCopy = async () => {
-        const textToCopy = hasStaticValue ? value : getValue();
-        await Clipboard.setStringAsync(textToCopy);
+        if (pending.current || disabled)
+            return;
+        pending.current = true;
+        setStatus("copying");
+        let textToCopy;
+        try {
+            textToCopy = hasStaticValue ? value : getValue();
+            const copied = await Clipboard.setStringAsync(textToCopy);
+            if (!copied)
+                throw new Error("El portapapeles no pudo copiar el texto");
+        }
+        catch (cause) {
+            const error = cause instanceof Error ? cause : new Error(String(cause));
+            setStatus("error");
+            AccessibilityInfo.announceForAccessibility("No se pudo copiar. Toca para reintentar.");
+            pending.current = false;
+            console.error("CopyableText: no se pudo copiar", error);
+            onCopyError?.(error);
+            return;
+        }
+        pending.current = false;
+        setCopiedValue(textToCopy);
+        setStatus("copied");
+        AccessibilityInfo.announceForAccessibility("Copiado");
+        onCopied?.(textToCopy);
     };
-    return (_jsx(TouchableOpacity, { onPress: handleCopy, children: _jsx(Typography.Text, { className: className || "text-primary", semibold: true, variant: "bodySmall", children: displayText }) }));
+    return (_jsxs(View, { children: [_jsxs(View, { style: {
+                    flexDirection: "row",
+                    alignItems: selectable ? "flex-start" : "center",
+                    gap: 8,
+                }, children: [selectable ? (_jsx(Typography.SelectableText, { className: className, style: { flex: 1 }, value: displayText, variant: "body" })) : null, _jsxs(Pressable, { accessibilityHint: selectable ? "Copia el texto completo" : "Toca para copiar", accessibilityLabel: isCopied ? `${copyLabel}. Copiado` : copyLabel, accessibilityState: {
+                            disabled: disabled || status === "copying",
+                            busy: status === "copying",
+                        }, accessibilityValue: {
+                            text: isCopied
+                                ? "Copiado"
+                                : status === "copying"
+                                    ? "Copiando"
+                                    : status === "error"
+                                        ? "Error al copiar"
+                                        : "",
+                        }, disabled: disabled || status === "copying", onPress: () => {
+                            void handleCopy();
+                        }, style: {
+                            minHeight: 48,
+                            minWidth: 48,
+                            flexDirection: "row",
+                            alignItems: "center",
+                            justifyContent: selectable ? "center" : "flex-start",
+                            gap: 8,
+                            flexShrink: selectable ? 0 : 1,
+                        }, testID: testID, children: [!selectable ? (_jsx(Typography.Text, { className: className, style: { flexShrink: 1 }, variant: "body", children: displayText })) : null, _jsx(View, { accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", style: { width: 24, alignItems: "center" }, children: status === "copying" ? (_jsx(ActivityIndicator, { color: theme.text.accent, size: "small" })) : (_jsx(Icon, { color: isCopied ? theme.success : theme.text.accent, name: isCopied
+                                        ? "checkmark"
+                                        : status === "error"
+                                            ? "alert-circle-outline"
+                                            : "copy-outline", size: 20 })) })] })] }), status === "error" ? (_jsx(Typography.Text, { accessibilityLiveRegion: "polite", className: "text-danger", variant: "bodySmall", children: "No se pudo copiar. Toca para reintentar." })) : null] }));
 }
 export default CopyableText;

package/dist/Display/Display.CountRecords.js

@@ -1,6 +1,6 @@
 import { jsxs as _jsxs } from "nativewind/jsx-runtime";
-import { cn } from "../theme/tw";
-import { Typography } from "../Typography";
+import { cn } from "../theme/tw.js";
+import { Typography } from "../Typography/index.js";
 import { View } from "react-native";
 function CountRecords({ name, count, withPadding = true, className }) {
     return (_jsxs(View, { className: cn("flex-row py-2", withPadding && "px-4", className), children: [_jsxs(Typography.Text, { semibold: true, variant: "bodySmall", children: ["Total ", " ", `${name || "Registros"} `] }), _jsxs(Typography.Text, { className: "text-text-secondary", variant: "bodySmall", children: ["( ", count, " )"] })] }));

package/dist/Display/Display.DataTable.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import { cn } from "../theme/tw";
-import { Typography } from "../Typography";
+import { cn } from "../theme/tw.js";
+import { Typography } from "../Typography/index.js";
 import { ScrollView, View } from "react-native";
 const alignClass = {
     left: "text-left",

package/dist/Display/Display.Date.d.ts

@@ -1,4 +1,4 @@
-import { typographyVariants } from "../theme/typography";
+import { typographyVariants } from "../theme/typography.js";
 import { type StyleProp, type TextStyle } from "react-native";
 type DateFormat = "short" | "long" | "numeric";
 /**

package/dist/Display/Display.Date.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import Icon from "../Display/Display.Icon";
-import { theme } from "../theme";
-import { cn } from "../theme/tw";
-import { Typography } from "../Typography";
-import { formatDate, formatDateWithDefaultTimezone } from "../utils/date";
+import Icon from "./Display.Icon.js";
+import { theme } from "../theme/index.js";
+import { cn } from "../theme/tw.js";
+import { Typography } from "../Typography/index.js";
+import { formatDate, formatDateWithDefaultTimezone } from "../utils/date.js";
 import { View } from "react-native";
 function relativeTime(value) {
     const then = new Date(value).getTime();

package/dist/Display/Display.Divider.d.ts

@@ -1,41 +1,41 @@
-import { type VariantProps } from "../theme/tw";
+import { type VariantProps } from "../theme/tw.js";
 declare const divider: import("tailwind-variants").TVReturnType<{
     spacing: {
-        none: string;
-        sm: string;
-        md: string;
-        lg: string;
+        none: "my-0";
+        sm: "my-1";
+        md: "my-2";
+        lg: "my-3";
     };
     colorScheme: {
-        light: string;
-        default: string;
-        dark: string;
+        light: "bg-border-divider opacity-50";
+        default: "bg-border-divider";
+        dark: "bg-border-divider opacity-100";
     };
 }, undefined, "w-full bg-border-divider", {
     spacing: {
-        none: string;
-        sm: string;
-        md: string;
-        lg: string;
+        none: "my-0";
+        sm: "my-1";
+        md: "my-2";
+        lg: "my-3";
     };
     colorScheme: {
-        light: string;
-        default: string;
-        dark: string;
+        light: "bg-border-divider opacity-50";
+        default: "bg-border-divider";
+        dark: "bg-border-divider opacity-100";
     };
-}, undefined, import("tailwind-variants").TVReturnType<{
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     spacing: {
-        none: string;
-        sm: string;
-        md: string;
-        lg: string;
+        none: "my-0";
+        sm: "my-1";
+        md: "my-2";
+        lg: "my-3";
     };
     colorScheme: {
-        light: string;
-        default: string;
-        dark: string;
+        light: "bg-border-divider opacity-50";
+        default: "bg-border-divider";
+        dark: "bg-border-divider opacity-100";
     };
-}, undefined, "w-full bg-border-divider", unknown, unknown, undefined>>;
+}, undefined>>;
 interface DividerProps extends VariantProps<typeof divider> {
     thickness?: number;
     className?: string;

package/dist/Display/Display.Divider.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "nativewind/jsx-runtime";
-import { cn, tv } from "../theme/tw";
+import { cn, tv } from "../theme/tw.js";
 import { View } from "react-native";
 const divider = tv({
     base: "w-full bg-border-divider",

package/dist/Display/Display.GradientSurface.d.ts

@@ -1,15 +1,26 @@
-import { type VariantProps } from "../theme/tw";
+import { type VariantProps } from "../theme/tw.js";
 import { type LinearGradientPoint } from "expo-linear-gradient";
 import type { ReactNode } from "react";
 import { type ViewStyle } from "react-native";
 /**
- * Decorative gradient presets (2026 art direction). `brand` is themeable (reads
- * `theme.gradient.primary`); the rest are intentional design constants for heroes/splash.
- * Each is [from, …, to].
+ * Decorative gradient presets. `brand` is themeable (reads `theme.gradient.primary`) —
+ * use it when you want the surface to follow whatever the app's active theme defines.
+ * Other presets are static constants for one-off uses. Each is [from, …, to].
  */
 declare const GRADIENT_PRESETS: {
+    readonly warm: {
+        readonly colors: readonly ["#1A1714", "#C89B3C", "#B88A2E"];
+        readonly start: {
+            readonly x: 0;
+            readonly y: 0;
+        };
+        readonly end: {
+            readonly x: 1;
+            readonly y: 1;
+        };
+    };
     readonly "neon-teal": {
-        readonly colors: readonly ["#22E584", "#0FB8A0"];
+        readonly colors: readonly ["#0F5C6E", "#5CC4D8"];
         readonly start: {
             readonly x: 0;
             readonly y: 0;
@@ -20,7 +31,7 @@ declare const GRADIENT_PRESETS: {
         };
     };
     readonly "night-green": {
-        readonly colors: readonly ["#0B1410", "#0E2A1E", "#08120D"];
+        readonly colors: readonly ["#0B101E", "#18223A"];
         readonly start: {
             readonly x: 0;
             readonly y: 0;
@@ -31,7 +42,7 @@ declare const GRADIENT_PRESETS: {
         };
     };
     readonly mesh: {
-        readonly colors: readonly ["#0B1410", "#10B981", "#0B1410", "#1E1B8A"];
+        readonly colors: readonly ["#1C3765", "#2A4A85", "#8FA9E8"];
         readonly start: {
             readonly x: 0;
             readonly y: 0;
@@ -42,7 +53,7 @@ declare const GRADIENT_PRESETS: {
         };
     };
     readonly emerald: {
-        readonly colors: readonly ["#00C357", "#00A862"];
+        readonly colors: readonly ["#2F6B3C", "#6FCF8B"];
         readonly start: {
             readonly x: 0;
             readonly y: 0;
@@ -53,49 +64,57 @@ declare const GRADIENT_PRESETS: {
         };
     };
 };
-export type GradientPreset = keyof typeof GRADIENT_PRESETS | "brand";
+/**
+ * Aliases kept for backwards compatibility. These were the original names; the
+ * canonical ones are above. Use the canonical names in new code.
+ * @deprecated use `warm` instead of `gold-mesh`.
+ */
+declare const DEPRECATED_PRESETS: {
+    readonly "gold-mesh": "warm";
+};
+export type GradientPreset = keyof typeof GRADIENT_PRESETS | keyof typeof DEPRECATED_PRESETS | "brand";
 declare const surface: import("tailwind-variants").TVReturnType<{
     radius: {
-        none: string;
-        md: string;
-        lg: string;
-        full: string;
+        none: "rounded-none";
+        md: "rounded-xl";
+        lg: "rounded-2xl";
+        full: "rounded-full";
     };
     padding: {
-        none: string;
-        sm: string;
-        md: string;
-        lg: string;
+        none: "p-0";
+        sm: "p-3";
+        md: "p-4";
+        lg: "p-6";
     };
 }, undefined, undefined, {
     radius: {
-        none: string;
-        md: string;
-        lg: string;
-        full: string;
+        none: "rounded-none";
+        md: "rounded-xl";
+        lg: "rounded-2xl";
+        full: "rounded-full";
     };
     padding: {
-        none: string;
-        sm: string;
-        md: string;
-        lg: string;
+        none: "p-0";
+        sm: "p-3";
+        md: "p-4";
+        lg: "p-6";
     };
-}, undefined, import("tailwind-variants").TVReturnType<{
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     radius: {
-        none: string;
-        md: string;
-        lg: string;
-        full: string;
+        none: "rounded-none";
+        md: "rounded-xl";
+        lg: "rounded-2xl";
+        full: "rounded-full";
     };
     padding: {
-        none: string;
-        sm: string;
-        md: string;
-        lg: string;
+        none: "p-0";
+        sm: "p-3";
+        md: "p-4";
+        lg: "p-6";
     };
-}, undefined, undefined, unknown, unknown, undefined>>;
+}, undefined>>;
 export interface GradientSurfaceProps extends VariantProps<typeof surface> {
-    /** Named brand preset. Ignored if `colors` is provided. */
+    /** Named gradient preset. Ignored if `colors` is provided. */
     preset?: GradientPreset;
     /** Custom gradient stops (overrides `preset`). */
     colors?: readonly [string, string, ...string[]];
@@ -107,9 +126,9 @@ export interface GradientSurfaceProps extends VariantProps<typeof surface> {
     testID?: string;
 }
 /**
- * Modern gradient surface (delivery/fintech 2026 look). Wraps `expo-linear-gradient` with
- * named brand presets + tokenized radius/padding. iOS + Android (no native dep beyond the
- * already-peer `expo-linear-gradient`). Replaces the legacy `GradientContainer`.
+ * Modern gradient surface. Wraps `expo-linear-gradient` with named presets +
+ * tokenized radius/padding. iOS + Android (no native dep beyond the already-peer
+ * `expo-linear-gradient`). Replaces the legacy `GradientContainer`.
  */
 declare function GradientSurface({ preset, colors, start, end, radius, padding, children, className, style, testID, }: GradientSurfaceProps): import("react").JSX.Element;
 export default GradientSurface;