@sparrowengg/twigs-mobile 0.0.3 → 0.1.0

package/lib/typescript/theme/default-theme.d.ts

@@ -0,0 +1,209 @@
+export interface ThemeColors {
+    primary: string;
+    secondary: string;
+    accent50: string;
+    accent100: string;
+    accent200: string;
+    accent300: string;
+    accent400: string;
+    accent500: string;
+    accent600: string;
+    accent700: string;
+    accent800: string;
+    accent900: string;
+    primary50: string;
+    primary100: string;
+    primary200: string;
+    primary300: string;
+    primary400: string;
+    primary500: string;
+    primary600: string;
+    primary700: string;
+    primary800: string;
+    primary900: string;
+    warning50: string;
+    warning100: string;
+    warning200: string;
+    warning300: string;
+    warning400: string;
+    warning500: string;
+    warning600: string;
+    warning700: string;
+    warning800: string;
+    warning900: string;
+    highlight50: string;
+    highlight100: string;
+    highlight200: string;
+    highlight300: string;
+    highlight400: string;
+    highlight500: string;
+    highlight600: string;
+    highlight700: string;
+    highlight800: string;
+    highlight900: string;
+    positive50: string;
+    positive100: string;
+    positive200: string;
+    positive300: string;
+    positive400: string;
+    positive500: string;
+    positive600: string;
+    positive700: string;
+    positive800: string;
+    positive900: string;
+    secondary50: string;
+    secondary100: string;
+    secondary200: string;
+    secondary300: string;
+    secondary400: string;
+    secondary500: string;
+    secondary600: string;
+    secondary700: string;
+    secondary800: string;
+    secondary900: string;
+    negative50: string;
+    negative100: string;
+    negative200: string;
+    negative300: string;
+    negative400: string;
+    negative500: string;
+    negative600: string;
+    negative700: string;
+    negative800: string;
+    negative900: string;
+    neutral50: string;
+    neutral100: string;
+    neutral200: string;
+    neutral300: string;
+    neutral400: string;
+    neutral500: string;
+    neutral600: string;
+    neutral700: string;
+    neutral800: string;
+    neutral900: string;
+    black50: string;
+    black100: string;
+    black200: string;
+    black300: string;
+    black400: string;
+    black500: string;
+    black600: string;
+    black700: string;
+    black800: string;
+    black900: string;
+    white50: string;
+    white100: string;
+    white200: string;
+    white300: string;
+    white400: string;
+    white500: string;
+    white600: string;
+    white700: string;
+    white800: string;
+    white900: string;
+}
+/** Space tokens in dp (density-independent pixels). Key is a scale number. */
+export interface ThemeSpace {
+    [key: string]: number;
+}
+/** Font size tokens in dp. */
+export interface ThemeFontSizes {
+    xxs: number;
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    '2xl': number;
+    '3xl': number;
+    '4xl': number;
+    '5xl': number;
+}
+/** Font family tokens. */
+export interface ThemeFonts {
+    regular: string;
+    medium: string;
+    bold: string;
+}
+/** Font weight tokens (React Native expects string values). */
+export interface ThemeFontWeights {
+    [key: string]: string;
+}
+/** Line height tokens in dp. */
+export interface ThemeLineHeights {
+    xxs: number;
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    '2xl': number;
+    '3xl': number;
+    '4xl': number;
+}
+/** Letter spacing tokens in dp. */
+export interface ThemeLetterSpacings {
+    [key: string]: number;
+}
+/** Component size tokens in dp. */
+export interface ThemeSizes {
+    [key: string]: number;
+}
+/** Border width tokens in dp. */
+export interface ThemeBorderWidths {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+}
+/** Border style tokens. */
+export interface ThemeBorderStyles {
+    [key: string]: string;
+}
+/** Border radius tokens in dp. `round` and `pill` use 9999. */
+export interface ThemeRadii {
+    none: number;
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    '2xl': number;
+    '3xl': number;
+    '4xl': number;
+    round: number;
+    pill: number;
+}
+/** Shadow tokens (React Native shadow objects serialised as strings). */
+export interface ThemeShadows {
+    [key: string]: string;
+}
+/** Z-index tokens. */
+export interface ThemeZIndices {
+    [key: string]: number;
+}
+/** Transition duration tokens in milliseconds. */
+export interface ThemeTransitions {
+    [key: string]: number;
+}
+/** Complete theme object consumed by all Twigs components via `useTheme()`. */
+export interface TwigsTheme {
+    colors: ThemeColors;
+    space: ThemeSpace;
+    fontSizes: ThemeFontSizes;
+    fonts: ThemeFonts;
+    fontWeights: ThemeFontWeights;
+    lineHeights: ThemeLineHeights;
+    letterSpacings: ThemeLetterSpacings;
+    sizes: ThemeSizes;
+    borderWidths: ThemeBorderWidths;
+    borderStyles: ThemeBorderStyles;
+    radii: ThemeRadii;
+    shadows: ThemeShadows;
+    zIndices: ThemeZIndices;
+    transitions: ThemeTransitions;
+}
+/** Default theme values. All dimension tokens are React Native dp numbers. */
+export declare const defaultTheme: TwigsTheme;
+//# sourceMappingURL=default-theme.d.ts.map

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

@@ -0,0 +1,4 @@
+export { defaultTheme } from './default-theme';
+export { defaultTheme as theme } from './default-theme';
+export type { TwigsTheme, ThemeColors, ThemeSpace, ThemeFontSizes, ThemeFonts, ThemeFontWeights, ThemeLineHeights, ThemeLetterSpacings, ThemeSizes, ThemeBorderWidths, ThemeBorderStyles, ThemeRadii, ThemeShadows, ThemeZIndices, ThemeTransitions, } from './default-theme';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/toast/constants.d.ts

@@ -0,0 +1,42 @@
+import type { ToastVariant, ToastPosition } from './types';
+interface VariantColorConfig {
+    background: string;
+    text: string;
+    icon: string;
+    actionText: string;
+}
+export declare const VARIANT_COLORS: Record<ToastVariant, VariantColorConfig>;
+export declare const TOAST_ICON_SIZE = 24;
+export declare const TOAST_BORDER_RADIUS = 8;
+export declare const TOAST_PADDING_HORIZONTAL = 16;
+export declare const TOAST_PADDING_VERTICAL = 12;
+export declare const TOAST_CONTAINER_GAP = 16;
+export declare const TOAST_CONTENT_GAP = 8;
+export declare const TOAST_MAX_WIDTH = 400;
+export declare const TOAST_MIN_HEIGHT = 48;
+export declare const TOAST_TITLE_FONT_SIZE = 14;
+export declare const TOAST_TITLE_LINE_HEIGHT = 20;
+export declare const TOAST_DESCRIPTION_FONT_SIZE = 12;
+export declare const TOAST_DESCRIPTION_LINE_HEIGHT = 16;
+export declare const DEFAULT_VARIANT: ToastVariant;
+export declare const DEFAULT_DURATION = 4000;
+export declare const DEFAULT_POSITION: ToastPosition;
+export declare const DEFAULT_MAX_TOASTS = 3;
+export declare const DEFAULT_GAP = 8;
+export declare const DEFAULT_OFFSET = 40;
+export declare const ANIMATION_DURATION = 300;
+export declare const SWIPE_THRESHOLD = 24;
+export declare const SWIPE_ELASTIC_RESISTANCE = 0.4;
+export declare const SWIPE_DISMISS_OFFSET = -300;
+export declare const ENTRY_SPRING_CONFIG: {
+    damping: number;
+    stiffness: number;
+    mass: number;
+};
+export declare const PAN_ACTIVE_OFFSET_Y: [number, number];
+export declare const PAN_FAIL_OFFSET_X: [number, number];
+export declare const POSITION_STYLES: Record<ToastPosition, {
+    vertical: 'top' | 'bottom';
+}>;
+export {};
+//# sourceMappingURL=constants.d.ts.map

package/lib/typescript/toast/helpers.d.ts

@@ -0,0 +1,16 @@
+import type { ViewStyle, TextStyle } from 'react-native';
+import type { TwigsTheme } from '../theme';
+import type { ToastVariant, ToastPosition } from './types';
+export declare function generateToastId(): string;
+export declare function getVariantContainerStyles(theme: TwigsTheme, variant: ToastVariant): ViewStyle;
+export declare function getIconColor(theme: TwigsTheme, variant: ToastVariant): string;
+export declare function getBackgroundColor(theme: TwigsTheme, variant: ToastVariant): string;
+export declare function getTitleStyles(theme: TwigsTheme, variant: ToastVariant): TextStyle;
+export declare function getDescriptionStyles(theme: TwigsTheme, variant: ToastVariant): TextStyle;
+/**
+ * Applies elastic resistance to a swipe distance (Reanimated worklet).
+ * Returns a dampened value that decreases progressively as distance grows.
+ */
+export declare function elasticResistance(distance: number): number;
+export declare function getPositionContainerStyle(position: ToastPosition, offset: number): ViewStyle;
+//# sourceMappingURL=helpers.d.ts.map

package/lib/typescript/toast/icons.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { ToastIconProps, ToastInfoIconProps } from './types';
+/** Filled check-circle icon for success/default variants. */
+export declare const CheckCircleFilledIcon: ({ size, color }: ToastIconProps) => React.JSX.Element;
+/** Filled alert-triangle icon for error variant. */
+export declare const AlertFilledIcon: ({ size, color }: ToastIconProps) => React.JSX.Element;
+/** Filled info-circle icon with inner cutout color for the "i" glyph. */
+export declare const InfoCircleFilledIcon: ({ size, color, innerColor }: ToastInfoIconProps) => React.JSX.Element;
+export declare const VARIANT_ICONS: Record<string, React.FC<ToastIconProps>>;
+//# sourceMappingURL=icons.d.ts.map

package/lib/typescript/toast/index.d.ts

@@ -0,0 +1,5 @@
+export { ToastProvider } from './toast-provider';
+export { toast } from './toast';
+export { useToast } from './use-toast';
+export type { ToastOptions, ToastProviderProps, ToastVariant, ToastPosition, ToastState, ToastContextType, ToastItemProps, ToastContainerProps, ToastContentProps, ToastIconProps, ToastInfoIconProps, UseToastReturn, } from './types';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/toast/styles.d.ts

@@ -0,0 +1,47 @@
+export declare const styles: {
+    overlay: {
+        position: "absolute";
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+    };
+    gestureRoot: {
+        flex: number;
+    };
+    stackContainer: {
+        width: "100%";
+    };
+    toastWrapper: {
+        width: "100%";
+        alignItems: "center";
+    };
+    container: {
+        flexDirection: "row";
+        alignItems: "center";
+    };
+    contentSection: {
+        flexDirection: "row";
+        flex: number;
+        alignItems: "center";
+        gap: number;
+    };
+    iconContainer: {
+        alignItems: "center";
+        justifyContent: "center";
+    };
+    textContainer: {
+        flex: number;
+    };
+    title: {
+        flexShrink: number;
+    };
+    description: {
+        flexShrink: number;
+    };
+    actionContainer: {
+        alignItems: "center";
+        justifyContent: "center";
+    };
+};
+//# sourceMappingURL=styles.d.ts.map

package/lib/typescript/toast/toast-container.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { ToastContainerProps } from './types';
+export declare const ToastContainer: (props: ToastContainerProps) => React.JSX.Element;
+//# sourceMappingURL=toast-container.d.ts.map

package/lib/typescript/toast/toast-content.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { ToastContentProps } from './types';
+/**
+ * Visual content renderer for a single toast. Consumed by ToastItem.
+ * Not exported from the public API — consumers interact via toast() and ToastProvider.
+ */
+export declare const ToastContent: ({ title, description, variant: variantProp, icon, action }: ToastContentProps) => React.JSX.Element;
+//# sourceMappingURL=toast-content.d.ts.map

package/lib/typescript/toast/toast-item.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { ToastItemProps } from './types';
+export declare const ToastItem: React.NamedExoticComponent<ToastItemProps>;
+//# sourceMappingURL=toast-item.d.ts.map

package/lib/typescript/toast/toast-provider.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { ToastProviderProps } from './types';
+/**
+ * Provides toast infrastructure for the app. Must be placed inside TwigsProvider
+ * so toast renderers can access the theme.
+ *
+ * Manages the toast queue and renders stacked toast containers per position.
+ */
+export declare const ToastProvider: {
+    ({ children, defaultPosition, defaultDuration, maxToasts, gap, offset, }: ToastProviderProps): React.JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=toast-provider.d.ts.map

package/lib/typescript/toast/toast.d.ts

@@ -0,0 +1,2 @@
+export { toast } from './use-toast';
+//# sourceMappingURL=toast.d.ts.map

package/lib/typescript/toast/types.d.ts

@@ -0,0 +1,123 @@
+import type { ReactElement, ReactNode } from 'react';
+/** Toast variant determines the visual appearance and default icon */
+export type ToastVariant = 'default' | 'secondary' | 'success' | 'error' | 'warning' | 'loading';
+/** Toast display position */
+export type ToastPosition = 'top-center' | 'bottom-center';
+/** Options for the imperative toast() function */
+export interface ToastOptions {
+    /** Unique identifier — auto-generated if omitted, pass to update an existing toast */
+    id?: string;
+    /** Primary text shown in the toast */
+    title: string;
+    /** Secondary text below the title */
+    description?: string;
+    /** Visual variant that controls colors and default icon */
+    variant?: ToastVariant;
+    /** Custom icon element — overrides the default variant icon */
+    icon?: ReactElement;
+    /** Action element rendered on the right side (e.g. LinkButton, IconButton) */
+    action?: ReactElement;
+    /** Auto-dismiss duration in milliseconds (Infinity for no auto-dismiss) */
+    duration?: number;
+    /** Display position */
+    position?: ToastPosition;
+    /** Callback when the toast body is pressed */
+    onPress?: () => void;
+    /** Callback when the toast becomes visible */
+    onShow?: () => void;
+    /** Callback when the toast is dismissed */
+    onDismiss?: () => void;
+}
+/** Internal toast state tracked by the provider */
+export interface ToastState extends Required<Omit<ToastOptions, 'icon' | 'action' | 'onPress' | 'onShow' | 'onDismiss'>> {
+    id: string;
+    icon: ReactElement | null;
+    action: ReactElement | null;
+    createdAt: number;
+    onPress?: () => void;
+    onShow?: () => void;
+    onDismiss?: () => void;
+}
+/** Props for the ToastProvider component */
+export interface ToastProviderProps {
+    children: ReactNode;
+    /** Default position for all toasts */
+    defaultPosition?: ToastPosition;
+    /** Default auto-dismiss duration in milliseconds */
+    defaultDuration?: number;
+    /** Maximum number of visible toasts per position */
+    maxToasts?: number;
+    /** Gap between stacked toasts in dp */
+    gap?: number;
+    /** Offset from the screen edge in dp */
+    offset?: number;
+}
+/** Context type for toast operations */
+export interface ToastContextType {
+    add: (options: ToastOptions) => {
+        id: string;
+        dismiss: () => void;
+    };
+    dismiss: (id?: string) => void;
+    update: (id: string, options: Partial<ToastOptions>) => void;
+    toasts: ToastState[];
+}
+/** Props for individual ToastItem component */
+export interface ToastItemProps extends ToastState {
+    onRemove: (id: string) => void;
+}
+/** Props for the ToastContainer and PositionedStack */
+export interface ToastContainerProps {
+    toasts: ToastState[];
+    position: ToastPosition;
+    offset: number;
+    gap: number;
+    onRemove: (id: string) => void;
+}
+/** Props for the ToastContent visual renderer */
+export interface ToastContentProps {
+    title: string;
+    description?: string;
+    variant?: ToastVariant;
+    icon?: ReactElement | null;
+    action?: ReactElement | null;
+}
+/** Props for toast SVG icons */
+export interface ToastIconProps {
+    size: number;
+    color: string;
+}
+/** Props for the info-circle icon with inner cutout color */
+export interface ToastInfoIconProps extends ToastIconProps {
+    innerColor: string;
+}
+/** Return type of the useToast hook */
+export interface UseToastReturn {
+    show: (options: ToastOptions) => {
+        id: string;
+        dismiss: () => void;
+    };
+    secondary: (arg: string | Omit<ToastOptions, 'variant'>) => {
+        id: string;
+        dismiss: () => void;
+    };
+    success: (arg: string | Omit<ToastOptions, 'variant'>) => {
+        id: string;
+        dismiss: () => void;
+    };
+    error: (arg: string | Omit<ToastOptions, 'variant'>) => {
+        id: string;
+        dismiss: () => void;
+    };
+    warning: (arg: string | Omit<ToastOptions, 'variant'>) => {
+        id: string;
+        dismiss: () => void;
+    };
+    loading: (arg: string | Omit<ToastOptions, 'variant'>) => {
+        id: string;
+        dismiss: () => void;
+    };
+    dismiss: (id?: string) => void;
+    update: (id: string, options: Partial<ToastOptions>) => void;
+}
+//# sourceMappingURL=types.d.ts.map

package/lib/typescript/toast/use-toast.d.ts

@@ -0,0 +1,56 @@
+import type { ToastOptions, ToastContextType, UseToastReturn } from './types';
+export declare const ToastContext: import("react").Context<ToastContextType | null>;
+/** Returns the toast context — throws if called outside ToastProvider. */
+export declare function useToastContext(): ToastContextType;
+type ShorthandArg = string | Omit<ToastOptions, 'variant'>;
+/** React hook providing the full toast API — must be used inside ToastProvider */
+export declare function useToast(): UseToastReturn;
+declare let globalAdd: ToastContextType['add'] | null;
+declare let globalDismiss: ToastContextType['dismiss'] | null;
+declare let globalUpdate: ToastContextType['update'] | null;
+/** Registers global toast handlers — called internally by ToastProvider on mount. */
+export declare function setGlobalToastHandlers(add: typeof globalAdd, dismiss: typeof globalDismiss, update: typeof globalUpdate): void;
+declare function showToast(options: ToastOptions): {
+    id: string;
+    dismiss: () => void;
+};
+/**
+ * Imperative toast API — works inside and outside React components.
+ *
+ * @example
+ * toast({ title: 'Hello', variant: 'success' });
+ * toast.secondary('Info');
+ * toast.success('Saved!');
+ * toast.error('Failed!');
+ * toast.warning('Careful');
+ * toast.loading('Processing...');
+ * toast.dismiss();
+ * toast.dismiss(id);
+ * toast.update(id, { title: 'Updated!' });
+ */
+export declare const toast: typeof showToast & {
+    secondary: (arg: ShorthandArg) => {
+        id: string;
+        dismiss: () => void;
+    };
+    success: (arg: ShorthandArg) => {
+        id: string;
+        dismiss: () => void;
+    };
+    error: (arg: ShorthandArg) => {
+        id: string;
+        dismiss: () => void;
+    };
+    warning: (arg: ShorthandArg) => {
+        id: string;
+        dismiss: () => void;
+    };
+    loading: (arg: ShorthandArg) => {
+        id: string;
+        dismiss: () => void;
+    };
+    dismiss: (id?: string) => void | undefined;
+    update: (id: string, options: Partial<ToastOptions>) => void | undefined;
+};
+export {};
+//# sourceMappingURL=use-toast.d.ts.map

package/lib/typescript/tooltip/constants.d.ts

@@ -0,0 +1,20 @@
+import type { TooltipSide } from './types';
+export declare const TOOLTIP_CONFIG: {
+    paddingHorizontal: number;
+    paddingVertical: number;
+    fontSize: number;
+    fontFamily: "medium";
+    lineHeight: number;
+    borderRadius: number;
+    maxWidth: number;
+};
+export declare const ARROW_SIZE: {
+    width: number;
+    height: number;
+};
+/** Arrow inset from tooltip edge for start/end alignments (Figma: 8dp). */
+export declare const ARROW_EDGE_OFFSET = 8;
+export declare const DEFAULT_SIDE: TooltipSide;
+export declare const DEFAULT_SIDE_OFFSET = 6;
+export declare const ANIMATION_DURATION = 150;
+//# sourceMappingURL=constants.d.ts.map

package/lib/typescript/tooltip/helpers.d.ts

@@ -0,0 +1,31 @@
+import type { Placement } from '@floating-ui/react-native';
+import type { TextStyle, ViewStyle } from 'react-native';
+import type { TwigsTheme } from '../theme';
+import type { TooltipSide, TooltipAlign } from './types';
+export declare function toPlacement(side: TooltipSide, align: TooltipAlign): Placement;
+/**
+ * Calculates the cross-axis shift needed for the tooltip's arrow to point at the trigger's center,
+ * used for left/right sides with start/end alignment.
+ */
+export declare function getCrossAxisOffset(side: TooltipSide, align: TooltipAlign, refSize: number): number;
+export declare function getContentStyles(theme: TwigsTheme): ViewStyle;
+export declare function getTextStyles(theme: TwigsTheme): TextStyle;
+export declare function getArrowPath(side: TooltipSide): string;
+/** Swaps width/height for left/right sides since the arrow rotates 90°. */
+export declare function getArrowDimensions(side: TooltipSide): {
+    width: number;
+    height: number;
+};
+/**
+ * For `center` alignment, uses floating-ui's computed coordinate.
+ * For `start`/`end`, pins the arrow at `ARROW_EDGE_OFFSET` from the
+ * corresponding tooltip edge (Figma spec: 8dp).
+ */
+export declare function getArrowPositionStyle(side: TooltipSide, align: TooltipAlign, arrowDims: {
+    width: number;
+    height: number;
+}, arrowMiddleware: {
+    x?: number;
+    y?: number;
+} | undefined): ViewStyle;
+//# sourceMappingURL=helpers.d.ts.map

package/lib/typescript/tooltip/index.d.ts

@@ -0,0 +1,3 @@
+export { Tooltip } from './tooltip';
+export type { TooltipProps, TooltipSide, TooltipAlign } from './types';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/tooltip/styles.d.ts

@@ -0,0 +1,24 @@
+export declare const styles: {
+    overlay: {
+        zIndex: number;
+        position: "absolute";
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+    };
+    backdropPressable: {
+        position: "absolute";
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+    };
+    contentWrapper: {
+        position: "absolute";
+    };
+    arrowContainer: {
+        position: "absolute";
+    };
+};
+//# sourceMappingURL=styles.d.ts.map

package/lib/typescript/tooltip/tooltip.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { View } from 'react-native';
+import type { TooltipProps } from './types';
+/** Floating content bubble anchored to a trigger element with arrow pointer. */
+export declare const Tooltip: React.ForwardRefExoticComponent<TooltipProps & React.RefAttributes<View>>;
+//# sourceMappingURL=tooltip.d.ts.map