@decoda-ui/mobile 0.1.0

package/dist/Button.d.ts

@@ -0,0 +1,12 @@
+export type ButtonTone = 'primary' | 'secondary' | 'ghost' | 'destructive';
+export type ButtonSize = 'small' | 'medium' | 'large';
+export interface ButtonProps {
+    label: string;
+    onPress: () => void;
+    tone?: ButtonTone;
+    size?: ButtonSize;
+    disabled?: boolean;
+    loading?: boolean;
+}
+/** Complete native action; label, busy state and touch target stay in sync. */
+export declare function Button({ label, onPress, tone, size, disabled, loading }: ButtonProps): import("react").JSX.Element;

package/dist/Button.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ActivityIndicator } from 'react-native';
+import { useTheme } from '@tamagui/core';
+import { cifraLightColors } from '@decoda-ui/tokens';
+import { ButtonFrame, ButtonLabel } from './primitives.js';
+/** Complete native action; label, busy state and touch target stay in sync. */
+export function Button({ label, onPress, tone = 'primary', size = 'medium', disabled = false, loading = false }) {
+    const theme = useTheme();
+    const unavailable = disabled || loading;
+    const activityColor = tone === 'primary'
+        ? theme.primaryForeground?.val ?? cifraLightColors.primaryForeground
+        : theme.foreground?.val ?? cifraLightColors.foreground;
+    return (_jsxs(ButtonFrame, { tone: tone, size: size, onPress: onPress, disabled: unavailable, accessibilityRole: "button", accessibilityLabel: label, accessibilityState: { disabled: unavailable, busy: loading }, flexDirection: "row", gap: "$sm", children: [loading && _jsx(ActivityIndicator, { size: "small", color: activityColor }), _jsx(ButtonLabel, { tone: tone, children: loading ? 'Procesando…' : label })] }));
+}

package/dist/ShareBar.d.ts

@@ -0,0 +1,10 @@
+export interface ShareBarProps {
+    label: string;
+    /** A share of the whole, from 0 to 1. Out-of-range values are clamped. */
+    share: number;
+    /** Optional second share, shown as a narrow marker. */
+    tick?: number | null;
+    covered?: boolean;
+}
+/** Cifra's thin annual progress track, available to screen readers. */
+export declare function ShareBar({ label, share, tick, covered }: ShareBarProps): import("react").JSX.Element;

package/dist/ShareBar.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { useTheme } from '@tamagui/core';
+import { cifraLightColors, sharePercent } from '@decoda-ui/tokens';
+/** Cifra's thin annual progress track, available to screen readers. */
+export function ShareBar({ label, share, tick, covered = false }) {
+    const theme = useTheme();
+    const percent = sharePercent(share);
+    const tickPercent = tick == null ? null : sharePercent(tick);
+    return (_jsxs(View, { accessibilityRole: "progressbar", accessibilityLabel: label, accessibilityValue: { min: 0, max: 100, now: Math.round(percent) }, style: { height: 8, borderRadius: 999, backgroundColor: theme.muted?.val ?? cifraLightColors.muted }, children: [_jsx(View, { style: {
+                    width: `${percent}%`, height: 8, borderRadius: 999,
+                    backgroundColor: covered ? theme.success?.val ?? cifraLightColors.success : theme.warning?.val ?? cifraLightColors.warning
+                } }), tickPercent != null && _jsx(View, { accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", style: {
+                    position: 'absolute', left: `${tickPercent}%`, top: -4, width: 2, height: 16,
+                    backgroundColor: theme.foreground?.val ?? cifraLightColors.foreground,
+                    transform: [{ translateX: -1 }], borderRadius: 1
+                } })] }));
+}

package/dist/config.d.ts

@@ -0,0 +1,298 @@
+import { type ColorRoles, type ThemeOverrides } from '@decoda-ui/tokens';
+export interface DecodaConfigOptions {
+    light?: ThemeOverrides;
+    /** Tamagui themes can swap colors; foundational scales are shared across modes. */
+    dark?: {
+        color?: Partial<ColorRoles>;
+    };
+}
+/** A fresh config per app allows branding without changing the library. */
+export declare function createDecodaConfig(options?: DecodaConfigOptions): import("@tamagui/core").TamaguiInternalConfig<{
+    color: {};
+    space: {
+        true: import("@tamagui/core").Variable<number>;
+        none: import("@tamagui/core").Variable<number>;
+        xxs: import("@tamagui/core").Variable<number>;
+        xs: import("@tamagui/core").Variable<number>;
+        sm: import("@tamagui/core").Variable<number>;
+        md: import("@tamagui/core").Variable<number>;
+        lg: import("@tamagui/core").Variable<number>;
+        xl: import("@tamagui/core").Variable<number>;
+        "2xl": import("@tamagui/core").Variable<number>;
+        "3xl": import("@tamagui/core").Variable<number>;
+        "4xl": import("@tamagui/core").Variable<number>;
+        "5xl": import("@tamagui/core").Variable<number>;
+        "6xl": import("@tamagui/core").Variable<number>;
+    };
+    size: {
+        true: import("@tamagui/core").Variable<number>;
+        sm: import("@tamagui/core").Variable<number>;
+        md: import("@tamagui/core").Variable<number>;
+        touch: import("@tamagui/core").Variable<number>;
+        lg: import("@tamagui/core").Variable<number>;
+        xl: import("@tamagui/core").Variable<number>;
+    };
+    radius: {
+        true: import("@tamagui/core").Variable<number>;
+        none: import("@tamagui/core").Variable<number>;
+        xs: import("@tamagui/core").Variable<number>;
+        sm: import("@tamagui/core").Variable<number>;
+        md: import("@tamagui/core").Variable<number>;
+        lg: import("@tamagui/core").Variable<number>;
+        xl: import("@tamagui/core").Variable<number>;
+        "2xl": import("@tamagui/core").Variable<number>;
+        pill: import("@tamagui/core").Variable<number>;
+    };
+    zIndex: {
+        base: import("@tamagui/core").Variable<number>;
+        floating: import("@tamagui/core").Variable<number>;
+        modal: import("@tamagui/core").Variable<number>;
+    };
+} & Omit<{
+    size: {
+        true: import("@tamagui/core").Variable<number>;
+        sm: import("@tamagui/core").Variable<number>;
+        md: import("@tamagui/core").Variable<number>;
+        touch: import("@tamagui/core").Variable<number>;
+        lg: import("@tamagui/core").Variable<number>;
+        xl: import("@tamagui/core").Variable<number>;
+    };
+    space: {
+        true: import("@tamagui/core").Variable<number>;
+        none: import("@tamagui/core").Variable<number>;
+        xxs: import("@tamagui/core").Variable<number>;
+        xs: import("@tamagui/core").Variable<number>;
+        sm: import("@tamagui/core").Variable<number>;
+        md: import("@tamagui/core").Variable<number>;
+        lg: import("@tamagui/core").Variable<number>;
+        xl: import("@tamagui/core").Variable<number>;
+        "2xl": import("@tamagui/core").Variable<number>;
+        "3xl": import("@tamagui/core").Variable<number>;
+        "4xl": import("@tamagui/core").Variable<number>;
+        "5xl": import("@tamagui/core").Variable<number>;
+        "6xl": import("@tamagui/core").Variable<number>;
+    };
+    radius: {
+        true: import("@tamagui/core").Variable<number>;
+        none: import("@tamagui/core").Variable<number>;
+        xs: import("@tamagui/core").Variable<number>;
+        sm: import("@tamagui/core").Variable<number>;
+        md: import("@tamagui/core").Variable<number>;
+        lg: import("@tamagui/core").Variable<number>;
+        xl: import("@tamagui/core").Variable<number>;
+        "2xl": import("@tamagui/core").Variable<number>;
+        pill: import("@tamagui/core").Variable<number>;
+    };
+    zIndex: {
+        base: import("@tamagui/core").Variable<number>;
+        floating: import("@tamagui/core").Variable<number>;
+        modal: import("@tamagui/core").Variable<number>;
+    };
+}, "zIndex" | "space" | "color" | "size" | "radius">, {
+    light: ColorRoles;
+    dark: ColorRoles;
+}, {}, {
+    sm: {
+        minWidth: number;
+    };
+    md: {
+        minWidth: number;
+    };
+    lg: {
+        minWidth: number;
+    };
+}, {}, {
+    body: {
+        family: string;
+        size: {
+            caption: number;
+            body: number;
+            title: number;
+            display: number;
+        };
+        lineHeight: {
+            caption: number;
+            body: number;
+            title: number;
+            display: number;
+        };
+        weight: {
+            regular: string;
+            medium: string;
+            bold: string;
+        };
+        face: {
+            400: {
+                normal: string;
+            };
+            500: {
+                normal: string;
+            };
+            700: {
+                normal: string;
+            };
+        };
+    };
+    mono: {
+        family: string;
+        size: {
+            body: number;
+            title: number;
+        };
+        lineHeight: {
+            body: number;
+            title: number;
+        };
+        weight: {
+            regular: string;
+            medium: string;
+        };
+    };
+}, {
+    defaultFont: string;
+}, "default">;
+export declare const decodaConfig: import("@tamagui/core").TamaguiInternalConfig<{
+    color: {};
+    space: {
+        true: import("@tamagui/core").Variable<number>;
+        none: import("@tamagui/core").Variable<number>;
+        xxs: import("@tamagui/core").Variable<number>;
+        xs: import("@tamagui/core").Variable<number>;
+        sm: import("@tamagui/core").Variable<number>;
+        md: import("@tamagui/core").Variable<number>;
+        lg: import("@tamagui/core").Variable<number>;
+        xl: import("@tamagui/core").Variable<number>;
+        "2xl": import("@tamagui/core").Variable<number>;
+        "3xl": import("@tamagui/core").Variable<number>;
+        "4xl": import("@tamagui/core").Variable<number>;
+        "5xl": import("@tamagui/core").Variable<number>;
+        "6xl": import("@tamagui/core").Variable<number>;
+    };
+    size: {
+        true: import("@tamagui/core").Variable<number>;
+        sm: import("@tamagui/core").Variable<number>;
+        md: import("@tamagui/core").Variable<number>;
+        touch: import("@tamagui/core").Variable<number>;
+        lg: import("@tamagui/core").Variable<number>;
+        xl: import("@tamagui/core").Variable<number>;
+    };
+    radius: {
+        true: import("@tamagui/core").Variable<number>;
+        none: import("@tamagui/core").Variable<number>;
+        xs: import("@tamagui/core").Variable<number>;
+        sm: import("@tamagui/core").Variable<number>;
+        md: import("@tamagui/core").Variable<number>;
+        lg: import("@tamagui/core").Variable<number>;
+        xl: import("@tamagui/core").Variable<number>;
+        "2xl": import("@tamagui/core").Variable<number>;
+        pill: import("@tamagui/core").Variable<number>;
+    };
+    zIndex: {
+        base: import("@tamagui/core").Variable<number>;
+        floating: import("@tamagui/core").Variable<number>;
+        modal: import("@tamagui/core").Variable<number>;
+    };
+} & Omit<{
+    size: {
+        true: import("@tamagui/core").Variable<number>;
+        sm: import("@tamagui/core").Variable<number>;
+        md: import("@tamagui/core").Variable<number>;
+        touch: import("@tamagui/core").Variable<number>;
+        lg: import("@tamagui/core").Variable<number>;
+        xl: import("@tamagui/core").Variable<number>;
+    };
+    space: {
+        true: import("@tamagui/core").Variable<number>;
+        none: import("@tamagui/core").Variable<number>;
+        xxs: import("@tamagui/core").Variable<number>;
+        xs: import("@tamagui/core").Variable<number>;
+        sm: import("@tamagui/core").Variable<number>;
+        md: import("@tamagui/core").Variable<number>;
+        lg: import("@tamagui/core").Variable<number>;
+        xl: import("@tamagui/core").Variable<number>;
+        "2xl": import("@tamagui/core").Variable<number>;
+        "3xl": import("@tamagui/core").Variable<number>;
+        "4xl": import("@tamagui/core").Variable<number>;
+        "5xl": import("@tamagui/core").Variable<number>;
+        "6xl": import("@tamagui/core").Variable<number>;
+    };
+    radius: {
+        true: import("@tamagui/core").Variable<number>;
+        none: import("@tamagui/core").Variable<number>;
+        xs: import("@tamagui/core").Variable<number>;
+        sm: import("@tamagui/core").Variable<number>;
+        md: import("@tamagui/core").Variable<number>;
+        lg: import("@tamagui/core").Variable<number>;
+        xl: import("@tamagui/core").Variable<number>;
+        "2xl": import("@tamagui/core").Variable<number>;
+        pill: import("@tamagui/core").Variable<number>;
+    };
+    zIndex: {
+        base: import("@tamagui/core").Variable<number>;
+        floating: import("@tamagui/core").Variable<number>;
+        modal: import("@tamagui/core").Variable<number>;
+    };
+}, "zIndex" | "space" | "color" | "size" | "radius">, {
+    light: ColorRoles;
+    dark: ColorRoles;
+}, {}, {
+    sm: {
+        minWidth: number;
+    };
+    md: {
+        minWidth: number;
+    };
+    lg: {
+        minWidth: number;
+    };
+}, {}, {
+    body: {
+        family: string;
+        size: {
+            caption: number;
+            body: number;
+            title: number;
+            display: number;
+        };
+        lineHeight: {
+            caption: number;
+            body: number;
+            title: number;
+            display: number;
+        };
+        weight: {
+            regular: string;
+            medium: string;
+            bold: string;
+        };
+        face: {
+            400: {
+                normal: string;
+            };
+            500: {
+                normal: string;
+            };
+            700: {
+                normal: string;
+            };
+        };
+    };
+    mono: {
+        family: string;
+        size: {
+            body: number;
+            title: number;
+        };
+        lineHeight: {
+            body: number;
+            title: number;
+        };
+        weight: {
+            regular: string;
+            medium: string;
+        };
+    };
+}, {
+    defaultFont: string;
+}, "default">;
+export type DecodaConfig = typeof decodaConfig;

package/dist/config.js

@@ -0,0 +1,47 @@
+import { createFont, createTamagui, createTokens } from '@tamagui/core';
+import { cifraDarkColors, cifraLightColors, createTheme } from '@decoda-ui/tokens';
+/** A fresh config per app allows branding without changing the library. */
+export function createDecodaConfig(options = {}) {
+    const light = createTheme(cifraLightColors, options.light);
+    const dark = createTheme(cifraDarkColors, options.dark);
+    return createTamagui({
+        themes: {
+            light: light.color,
+            dark: dark.color
+        },
+        tokens: createTokens({
+            size: { ...light.controlSize, true: light.controlSize.touch },
+            space: { ...light.space, true: light.space.lg },
+            radius: { ...light.radius, true: light.radius.md },
+            zIndex: { base: 0, floating: 10, modal: 100 }
+        }),
+        fonts: {
+            body: createFont({
+                family: light.fontFamily.body,
+                size: { caption: 12, body: 14, title: 20, display: 32 },
+                lineHeight: { caption: 17, body: 21, title: 28, display: 40 },
+                weight: { regular: '400', medium: '500', bold: '700' },
+                face: {
+                    400: { normal: light.fontFamily.body },
+                    500: { normal: `${light.fontFamily.body}-Medium` },
+                    700: { normal: `${light.fontFamily.body}-Bold` }
+                }
+            }),
+            mono: createFont({
+                family: light.fontFamily.mono,
+                size: { body: 14, title: 20 },
+                lineHeight: { body: 21, title: 28 },
+                weight: { regular: '400', medium: '500' }
+            })
+        },
+        media: {
+            sm: { minWidth: 640 },
+            md: { minWidth: 768 },
+            lg: { minWidth: 1024 }
+        },
+        settings: {
+            defaultFont: '$body'
+        }
+    });
+}
+export const decodaConfig = createDecodaConfig();

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+export { createDecodaConfig, decodaConfig } from './config.js';
+export type { DecodaConfig, DecodaConfigOptions } from './config.js';
+export { Surface, BodyText, ButtonFrame, ButtonLabel } from './primitives.js';
+export { Button } from './Button.js';
+export type { ButtonProps, ButtonSize, ButtonTone } from './Button.js';
+export { ShareBar } from './ShareBar.js';
+export type { ShareBarProps } from './ShareBar.js';

package/dist/index.js

@@ -0,0 +1,4 @@
+export { createDecodaConfig, decodaConfig } from './config.js';
+export { Surface, BodyText, ButtonFrame, ButtonLabel } from './primitives.js';
+export { Button } from './Button.js';
+export { ShareBar } from './ShareBar.js';

package/dist/primitives.d.ts

@@ -0,0 +1,9 @@
+export declare const Surface: import("@tamagui/core").TamaguiComponent<import("@tamagui/core").TamaDefer, import("@tamagui/core").TamaguiElement, import("@tamagui/core").RNTamaguiViewNonStyleProps, import("@tamagui/core").StackStyleBase, {}, import("@tamagui/core").StaticConfigPublic>;
+export declare const BodyText: import("@tamagui/core").TamaguiComponent<import("@tamagui/core").TamaDefer, import("@tamagui/core").TamaguiTextElement, import("@tamagui/core").RNTamaguiTextNonStyleProps, import("@tamagui/core").TextStylePropsBase, {}, import("@tamagui/core").StaticConfigPublic>;
+export declare const ButtonFrame: import("@tamagui/core").TamaguiComponent<import("@tamagui/core").TamaDefer, import("@tamagui/core").TamaguiElement, import("@tamagui/core").RNTamaguiViewNonStyleProps, import("@tamagui/core").StackStyleBase, {
+    size?: "small" | "medium" | "large" | undefined;
+    tone?: "primary" | "secondary" | "ghost" | "destructive" | undefined;
+}, import("@tamagui/core").StaticConfigPublic>;
+export declare const ButtonLabel: import("@tamagui/core").TamaguiComponent<import("@tamagui/core").TamaDefer, import("@tamagui/core").TamaguiTextElement, import("@tamagui/core").RNTamaguiTextNonStyleProps, import("@tamagui/core").TextStylePropsBase, {
+    tone?: "primary" | "secondary" | "ghost" | "destructive" | undefined;
+}, import("@tamagui/core").StaticConfigPublic>;

package/dist/primitives.js

@@ -0,0 +1,59 @@
+import { styled, Text, View } from '@tamagui/core';
+export const Surface = styled(View, {
+    name: 'DuiSurface',
+    backgroundColor: '$card',
+    borderColor: '$border',
+    borderWidth: 1,
+    borderRadius: '$xl',
+    padding: '$xl'
+});
+export const BodyText = styled(Text, {
+    name: 'DuiBodyText',
+    color: '$foreground',
+    fontFamily: '$body',
+    fontSize: '$body'
+});
+export const ButtonFrame = styled(View, {
+    name: 'DuiButton',
+    alignItems: 'center',
+    justifyContent: 'center',
+    minHeight: '$touch',
+    paddingHorizontal: '$lg',
+    borderRadius: '$md',
+    borderWidth: 1,
+    borderColor: 'transparent',
+    backgroundColor: '$primary',
+    pressStyle: { opacity: 0.9, scale: 0.98 },
+    focusVisibleStyle: { borderColor: '$ring', borderWidth: 2 },
+    disabledStyle: { opacity: 0.5 },
+    variants: {
+        tone: {
+            primary: { backgroundColor: '$primary' },
+            secondary: { backgroundColor: '$secondary', borderColor: '$secondaryBorder' },
+            ghost: { backgroundColor: 'transparent' },
+            destructive: { backgroundColor: '$destructiveSurface', borderColor: '$destructiveBorder' }
+        },
+        size: {
+            small: { minHeight: '$touch', paddingHorizontal: 24 },
+            medium: { minHeight: '$lg', paddingHorizontal: 34 },
+            large: { minHeight: '$xl', paddingHorizontal: 40 }
+        }
+    },
+    defaultVariants: { tone: 'primary', size: 'medium' }
+});
+export const ButtonLabel = styled(Text, {
+    name: 'DuiButtonLabel',
+    color: '$primaryForeground',
+    fontFamily: '$body',
+    fontSize: '$body',
+    fontWeight: '700',
+    variants: {
+        tone: {
+            primary: { color: '$primaryForeground' },
+            secondary: { color: '$secondaryForeground' },
+            ghost: { color: '$mutedForeground' },
+            destructive: { color: '$destructive' }
+        }
+    },
+    defaultVariants: { tone: 'primary' }
+});

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@decoda-ui/mobile",
+  "version": "0.1.0",
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./config": {
+      "types": "./dist/config.d.ts",
+      "import": "./dist/config.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@decoda-ui/tokens": "0.1.0"
+  },
+  "peerDependencies": {
+    "@tamagui/core": ">=1",
+    "react": ">=18",
+    "react-native": ">=0.72"
+  },
+  "devDependencies": {
+    "@tamagui/core": "latest",
+    "@types/react": "latest",
+    "react": "latest",
+    "react-native": "latest"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "typecheck": "tsc -p tsconfig.json --noEmit"
+  }
+}