@erquhart/heroui-native 1.0.0-beta.10.1

package/src/providers/toast/types.ts

@@ -0,0 +1,367 @@
+import type { SharedValue } from 'react-native-reanimated';
+import type { ToastRootProps } from '../../components/toast/toast.types';
+
+/**
+ * Global toast configuration
+ * These values are used as defaults for all toasts unless overridden locally
+ */
+export interface ToastGlobalConfig
+  extends Pick<
+    ToastRootProps,
+    'variant' | 'placement' | 'isSwipeable' | 'animation'
+  > {}
+
+/**
+ * Insets for spacing from screen edges
+ */
+export interface ToastInsets {
+  /**
+   * Inset from the top edge in pixels (added to safe area inset)
+   * @default Platform-specific: iOS = 0, Android = 12
+   */
+  top?: number;
+  /**
+   * Inset from the bottom edge in pixels (added to safe area inset)
+   * @default Platform-specific: iOS = 6, Android = 12
+   */
+  bottom?: number;
+  /**
+   * Inset from the left edge in pixels (added to safe area inset)
+   * @default 12
+   */
+  left?: number;
+  /**
+   * Inset from the right edge in pixels (added to safe area inset)
+   * @default 12
+   */
+  right?: number;
+}
+
+/**
+ * Props for the ToastProvider component
+ */
+export interface ToastProviderProps {
+  /**
+   * Global toast configuration
+   * These values are used as defaults for all toasts unless overridden locally
+   * Local configs have precedence over global config
+   */
+  defaultProps?: ToastGlobalConfig;
+  /**
+   * Insets for spacing from screen edges (added to safe area insets)
+   * @default Platform-specific:
+   *   - iOS: { top: 0, bottom: 6, left: 12, right: 12 }
+   *   - Android: { top: 12, bottom: 12, left: 12, right: 12 }
+   */
+  insets?: ToastInsets;
+  /**
+   * Maximum number of visible toasts before opacity starts fading
+   * Controls when toast items begin to fade out as they move beyond the visible stack
+   * @default 3
+   */
+  maxVisibleToasts?: number;
+  /**
+   * Custom wrapper function to wrap the toast content
+   * Receives children and should return a component that wraps them
+   * The wrapper should apply flex: 1 (via className or style) to ensure proper layout
+   * Can be any component wrapper - KeyboardAvoidingView, View, or any custom component
+   *
+   * @example
+   * ```tsx
+   * <ToastProvider
+   *   contentWrapper={(children) => (
+   *     <KeyboardAvoidingView
+   *       behavior="padding"
+   *       keyboardVerticalOffset={24}
+   *       className="flex-1"
+   *     >
+   *       {children}
+   *     </KeyboardAvoidingView>
+   *   )}
+   * >
+   * ```
+   */
+  contentWrapper?: (children: React.ReactNode) => React.ReactElement;
+  /**
+   * Children to render
+   */
+  children?: React.ReactNode;
+}
+
+/**
+ * Props passed to the toast component function
+ */
+export interface ToastComponentProps {
+  /**
+   * The unique ID of the toast
+   */
+  id: string;
+  /**
+   * The index of the toast in the array (0-based)
+   */
+  index: number;
+  /**
+   * The total number of toasts currently displayed
+   */
+  total: SharedValue<number>;
+  /**
+   * Heights of all toast items, keyed by toast ID
+   */
+  heights: SharedValue<Record<string, number>>;
+  /**
+   * Maximum number of visible toasts before opacity starts fading
+   * Controls when toast items begin to fade out as they move beyond the visible stack
+   * @default 3
+   */
+  maxVisibleToasts?: number;
+  /**
+   * Show a new toast
+   */
+  show: (options: string | ToastShowOptions) => string;
+  /**
+   * Hide one or more toasts
+   * - No argument: hides the last toast in the array
+   * - "all": hides all toasts
+   * - Single ID: hides that toast
+   * - Array of IDs: hides those toasts
+   */
+  hide: (ids?: string | string[] | 'all') => void;
+}
+
+/**
+ * Configuration for showing a default styled toast (usage pattern 2)
+ * Used when component is not provided
+ */
+export interface ToastShowConfig
+  extends Pick<
+    ToastRootProps,
+    'variant' | 'placement' | 'isSwipeable' | 'animation'
+  > {
+  /**
+   * Duration in milliseconds before the toast automatically disappears
+   * Set to `'persistent'` to prevent auto-hide (toast will remain until manually dismissed)
+   * @default 4000
+   */
+  duration?: number | 'persistent';
+  /**
+   * Optional ID for the toast
+   * If not provided, one will be generated automatically
+   */
+  id?: string;
+  /**
+   * Label text for the toast
+   */
+  label?: string;
+  /**
+   * Description text for the toast
+   */
+  description?: string;
+  /**
+   * Action button label text
+   */
+  actionLabel?: string;
+  /**
+   * Callback function called when the action button is pressed
+   * Receives show and hide functions for programmatic toast control
+   */
+  onActionPress?: (helpers: {
+    show: (options: string | ToastShowOptions) => string;
+    hide: (ids?: string | string[] | 'all') => void;
+  }) => void;
+  /**
+   * Icon element to display in the toast
+   */
+  icon?: React.ReactNode;
+  /**
+   * Callback function called when the toast is shown
+   */
+  onShow?: () => void;
+  /**
+   * Callback function called when the toast is hidden
+   */
+  onHide?: () => void;
+}
+
+/**
+ * Options for showing a toast with custom component (usage pattern 3)
+ * Used when component is provided
+ */
+export interface ToastShowOptionsWithComponent {
+  /**
+   * Optional ID for the toast
+   * If not provided, one will be generated automatically
+   */
+  id?: string;
+  /**
+   * A function that receives toast props and returns a React element
+   */
+  component: (props: ToastComponentProps) => React.ReactElement;
+  /**
+   * Duration in milliseconds before the toast automatically disappears
+   * Set to `'persistent'` to prevent auto-hide (toast will remain until manually dismissed)
+   * @default 4000
+   */
+  duration?: number | 'persistent';
+  /**
+   * Callback function called when the toast is shown
+   */
+  onShow?: () => void;
+  /**
+   * Callback function called when the toast is hidden
+   */
+  onHide?: () => void;
+}
+
+/**
+ * Conditional type for toast show options
+ * - If component is provided: only id, component, onShow, onHide are allowed
+ * - If component is NOT provided: all config props are available
+ */
+export type ToastShowOptions =
+  | ToastShowOptionsWithComponent
+  | (ToastShowConfig & { component?: never });
+
+/**
+ * Represents a single toast item in the state
+ */
+export interface ToastItem {
+  /**
+   * Unique identifier for the toast
+   */
+  id: string;
+  /**
+   * A function that receives toast props and returns a React element
+   */
+  component: (props: ToastComponentProps) => React.ReactElement;
+  /**
+   * Duration in milliseconds before the toast automatically disappears
+   * Set to `'persistent'` to prevent auto-hide (toast will remain until manually dismissed)
+   * @default 4000
+   */
+  duration?: number | 'persistent';
+  /**
+   * Callback function called when the toast is shown
+   */
+  onShow?: () => void;
+  /**
+   * Callback function called when the toast is hidden
+   */
+  onHide?: () => void;
+}
+
+/**
+ * Actions for the toast reducer
+ */
+export type ToastAction =
+  | { type: 'SHOW'; payload: ToastItem }
+  | { type: 'HIDE'; payload: { ids: string[] } }
+  | { type: 'HIDE_ALL' };
+
+/**
+ * Toast manager API
+ */
+export interface ToastManager {
+  /**
+   * Show a toast
+   * @param options - Toast configuration options or simple string
+   * @returns The ID of the shown toast
+   *
+   * @example
+   * ```tsx
+   * const toast = useToast();
+   *
+   * // Simple string (usage pattern 1)
+   * toast.show('This is toast');
+   *
+   * // Config object with default styling (usage pattern 2)
+   * toast.show({
+   *   label: 'Success!',
+   *   description: 'Your action was completed',
+   *   variant: 'success',
+   *   actionLabel: 'Undo',
+   *   onActionPress: ({ show, hide }) => hide(),
+   * });
+   *
+   * // Custom component (usage pattern 3)
+   * toast.show({
+   *   component: (props) => <Toast>Hello</Toast>,
+   * });
+   *
+   * // With custom ID
+   * toast.show({ id: 'my-toast', component: (props) => <Toast>Hello</Toast> });
+   * ```
+   */
+  show: (options: string | ToastShowOptions) => string;
+
+  /**
+   * Hide one or more toasts
+   *
+   * @param ids - Optional ID(s) of toast(s) to hide
+   * - No argument: hides the last toast in the array
+   * - "all": hides all toasts
+   * - Single ID: hides that toast
+   * - Array of IDs: hides those toasts
+   *
+   * @example
+   * ```tsx
+   * const toast = useToast();
+   *
+   * toast.hide();                    // Hide the last toast
+   * toast.hide('all');               // Hide all toasts
+   * toast.hide('my-toast');          // Hide specific toast
+   * toast.hide(['toast-1', 'toast-2']); // Hide multiple toasts
+   * ```
+   */
+  hide: (ids?: string | string[] | 'all') => void;
+}
+
+/**
+ * Props for the ToastItemRenderer component
+ */
+export interface ToastItemRendererProps {
+  /**
+   * The toast item to render
+   */
+  toastItem: ToastItem;
+  /**
+   * The index of the toast in the array (0-based)
+   */
+  index: number;
+  /**
+   * The total number of toasts currently displayed
+   */
+  total: SharedValue<number>;
+  /**
+   * Heights of all toast items, keyed by toast ID
+   */
+  heights: SharedValue<Record<string, number>>;
+  /**
+   * Maximum number of visible toasts before opacity starts fading
+   * Controls when toast items begin to fade out as they move beyond the visible stack
+   * @default 3
+   */
+  maxVisibleToasts?: number;
+  /**
+   * Show a new toast
+   */
+  show: (options: string | ToastShowOptions) => string;
+  /**
+   * Hide one or more toasts
+   * - No argument: hides the last toast in the array
+   * - "all": hides all toasts
+   * - Single ID: hides that toast
+   * - Array of IDs: hides those toasts
+   */
+  hide: (ids?: string | string[] | 'all') => void;
+}
+
+/**
+ * Context value for the toast provider
+ */
+export interface ToasterContextValue {
+  toast: ToastManager;
+  /**
+   * Whether any toast is currently visible
+   */
+  isToastVisible: boolean;
+}

package/src/styles/index.css

@@ -0,0 +1,3 @@
+@import './variables.css';
+@import './utilities.css';
+@import './theme.css';

package/src/styles/theme.css

@@ -0,0 +1,205 @@
+@theme inline static {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+
+  --color-surface: var(--surface);
+  --color-surface-foreground: var(--surface-foreground);
+
+  --color-overlay: var(--overlay);
+  --color-overlay-foreground: var(--overlay-foreground);
+
+  --color-muted: var(--muted);
+
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+
+  --color-segment: var(--segment);
+  --color-segment-foreground: var(--segment-foreground);
+
+  --color-border: var(--border);
+  --color-divider: var(--divider);
+  --color-focus: var(--focus);
+  --color-link: var(--link);
+
+  --color-default: var(--default);
+  --color-default-foreground: var(--default-foreground);
+
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+
+  --color-danger: var(--danger);
+  --color-danger-foreground: var(--danger-foreground);
+
+  /* Form Field Tokens */
+  --color-field: var(--field-background, var(--color-default));
+  --color-field-hover: color-mix(
+    in oklab,
+    var(--field-background, var(--color-default)) 90%,
+    var(--field-foreground, var(--color-default-foreground)) 10%
+  );
+  --color-field-foreground: var(--field-foreground, var(--color-foreground));
+  --color-field-placeholder: var(--field-placeholder, var(--color-muted));
+  --color-field-border: var(--field-border, var(--color-border));
+  --radius-field: var(--field-radius, var(--radius-xl));
+  --border-width-field: var(--field-border-width, var(--border-width));
+
+  /* Calculated Variables */
+
+  /* Colors */
+
+  /* --- background shades --- */
+  --color-background-secondary: color-mix(
+    in oklab,
+    var(--color-background) 96%,
+    var(--color-foreground) 4%
+  );
+  --color-background-tertiary: color-mix(
+    in oklab,
+    var(--color-background) 92%,
+    var(--color-foreground) 8%
+  );
+  --color-background-quaternary: color-mix(
+    in oklab,
+    var(--color-background) 86%,
+    var(--color-foreground) 14%
+  );
+  --color-background-inverse: var(--color-foreground);
+
+  /* ------------------------- */
+  --color-default-hover: color-mix(
+    in oklab,
+    var(--color-default) 90%,
+    var(--color-default-foreground) 2%
+  );
+  --color-accent-hover: color-mix(
+    in oklab,
+    var(--color-accent) 90%,
+    var(--color-accent-foreground) 10%
+  );
+  --color-success-hover: color-mix(
+    in oklab,
+    var(--color-success) 90%,
+    var(--color-success-foreground) 10%
+  );
+  --color-warning-hover: color-mix(
+    in oklab,
+    var(--color-warning) 90%,
+    var(--color-warning-foreground) 10%
+  );
+  --color-danger-hover: color-mix(
+    in oklab,
+    var(--color-danger) 90%,
+    var(--color-danger-foreground) 10%
+  );
+
+  /* Form Field Colors */
+  --color-field-hover: color-mix(
+    in oklab,
+    var(--color-field) 90%,
+    var(--color-field-foreground) 2%
+  );
+  --color-field-focus: var(--color-field);
+  --color-field-border-hover: color-mix(
+    in oklab,
+    var(--color-field-border) 88%,
+    var(--color-field-foreground) 10%
+  );
+  --color-field-border-focus: color-mix(
+    in oklab,
+    var(--color-field-border) 74%,
+    var(--color-field-foreground) 22%
+  );
+
+  /* Soft Colors */
+  --color-accent-soft: color-mix(
+    in oklab,
+    var(--color-accent) 15%,
+    transparent
+  );
+  --color-accent-soft-foreground: var(--color-accent);
+  --color-accent-soft-hover: color-mix(
+    in oklab,
+    var(--color-accent) 20%,
+    transparent
+  );
+
+  --color-danger-soft: color-mix(
+    in oklab,
+    var(--color-danger) 15%,
+    transparent
+  );
+  --color-danger-soft-foreground: var(--color-danger);
+  --color-danger-soft-hover: color-mix(
+    in oklab,
+    var(--color-danger) 20%,
+    transparent
+  );
+
+  --color-warning-soft: color-mix(
+    in oklab,
+    var(--color-warning) 15%,
+    transparent
+  );
+  --color-warning-soft-foreground: var(--color-warning);
+  --color-warning-soft-hover: color-mix(
+    in oklab,
+    var(--color-warning) 20%,
+    transparent
+  );
+
+  --color-success-soft: color-mix(
+    in oklab,
+    var(--color-success) 15%,
+    transparent
+  );
+  --color-success-soft-foreground: var(--color-success);
+  --color-success-soft-hover: color-mix(
+    in oklab,
+    var(--color-success) 20%,
+    transparent
+  );
+
+  /* Surface Levels - progressively darker/lighter shades for layering */
+  --color-surface-secondary: color-mix(
+    in oklab,
+    var(--surface) 94%,
+    var(--surface-foreground) 6%
+  );
+  --color-surface-tertiary: color-mix(
+    in oklab,
+    var(--surface) 92%,
+    var(--surface-foreground) 8%
+  );
+  --color-surface-quaternary: color-mix(
+    in oklab,
+    var(--surface) 86%,
+    var(--default-foreground) 14%
+  );
+
+  /* On Surface Colors */
+  --color-on-surface: color-mix(
+    in oklab,
+    var(--color-surface) 93%,
+    var(--color-surface-foreground) 7%
+  );
+  --color-on-surface-foreground: var(--color-surface-foreground);
+  --color-on-surface-hover: color-mix(
+    in oklab,
+    var(--color-surface) 91%,
+    var(--color-surface-foreground) 9%
+  );
+  --color-on-surface-focus: var(--color-on-surface);
+
+  /* Radius and default sizes - defaults can change by just changing the --radius */
+  --radius-xs: calc(var(--radius) * 0.25); /* 0.125rem (2px) */
+  --radius-sm: calc(var(--radius) * 0.5); /* 0.25rem (4px) */
+  --radius-md: calc(var(--radius) * 0.75); /* 0.375rem (6px) */
+  --radius-lg: calc(var(--radius) * 1); /* 0.5rem (8px) */
+  --radius-xl: calc(var(--radius) * 1.5); /* 0.75rem (12px) */
+  --radius-2xl: calc(var(--radius) * 2); /* 1rem (16px) */
+  --radius-3xl: calc(var(--radius) * 3); /* 1.5rem (24px) */
+  --radius-4xl: calc(var(--radius) * 4); /* 2rem (32px) */
+}