@limonify/zest-ui 0.1.0

package/src/tabs/tab/TabsTab.tsx

@@ -0,0 +1,153 @@
+'use client';
+import * as React from 'react';
+import { Pressable, type GestureResponderEvent } from 'react-native';
+import { useId } from '../../hooks/useId';
+import { useRenderElement } from '../../use-render/useRenderElement';
+import { useButton } from '../../internals/use-button/useButton';
+import { useCompositeListItem } from '../../internals/composite/list/useCompositeListItem';
+import type { CompositeItemLayout } from '../../internals/composite/list/CompositeListContext';
+import { useTabsRootContext } from '../root/TabsRootContext';
+import type { TabsRoot } from '../root/TabsRoot';
+import type { ZestUIComponentProps } from '../../types';
+import { createChangeEventDetails } from '../../utils/createChangeEventDetails';
+import { REASONS } from '../../utils/reasons';
+
+/**
+ * An individual interactive tab button that toggles the corresponding panel.
+ * Renders a `<Pressable>`.
+ */
+export function TabsTab(componentProps: TabsTab.Props) {
+  const { className, disabled = false, render, style, value, ref, ...elementProps } = componentProps;
+
+  const {
+    value: activeTabValue,
+    getTabPanelIdByValue,
+    onValueChange,
+    orientation,
+    tabActivationDirection,
+  } = useTabsRootContext();
+
+  const id = useId();
+
+  const metadata = React.useMemo(() => ({ disabled, id, value }), [disabled, id, value]);
+
+  const { onLayout } = useCompositeListItem<TabsTab.Metadata>({ metadata });
+
+  const active = value === activeTabValue;
+
+  const [pressed, setPressed] = React.useState(false);
+
+  const { getButtonProps } = useButton({ disabled });
+
+  const tabPanelId = getTabPanelIdByValue(value);
+
+  const state: TabsTabState = { disabled, active, orientation, tabActivationDirection, pressed };
+
+  return useRenderElement(Pressable, componentProps, {
+    state,
+    ref,
+    props: [
+      {
+        nativeID: id,
+        onLayout,
+        accessibilityRole: 'tab' as const,
+        accessibilityState: { selected: active, disabled: disabled || undefined },
+        'aria-controls': tabPanelId,
+        'aria-selected': active,
+        onPress(event: GestureResponderEvent) {
+          if (active || disabled) {
+            return;
+          }
+
+          onValueChange(
+            value,
+            createChangeEventDetails(REASONS.none, event, {
+              activationDirection: 'none' as const,
+            }) as TabsRoot.ChangeEventDetails,
+          );
+        },
+        onPressIn() {
+          setPressed(true);
+        },
+        onPressOut() {
+          setPressed(false);
+        },
+      },
+      elementProps,
+      getButtonProps,
+    ],
+  });
+}
+
+export type TabsTabValue = any | null;
+
+export type TabsTabActivationDirection = 'left' | 'right' | 'up' | 'down' | 'none';
+
+export interface TabsTabPosition {
+  left: number;
+  right: number;
+  top: number;
+  bottom: number;
+}
+
+export interface TabsTabSize {
+  width: number;
+  height: number;
+}
+
+export interface TabsTabMetadata {
+  disabled: boolean;
+  id: string | undefined;
+  value: TabsTab.Value | undefined;
+  /** Filled in by `CompositeList` from the tab's `onLayout`. */
+  layout?: CompositeItemLayout | undefined;
+}
+
+export interface TabsTabState {
+  /**
+   * Whether the component should ignore user interaction.
+   */
+  disabled: boolean;
+  /**
+   * Whether the component is active.
+   */
+  active: boolean;
+  /**
+   * The component orientation.
+   */
+  orientation: TabsRoot.Orientation;
+  /**
+   * The direction used for tab activation.
+   */
+  tabActivationDirection: TabsTab.ActivationDirection;
+  /**
+   * Whether the tab is currently pressed.
+   */
+  pressed: boolean;
+}
+
+export interface TabsTabProps
+  extends Omit<ZestUIComponentProps<typeof Pressable, TabsTabState>, 'value' | 'onPress'> {
+  /**
+   * The value of the Tab.
+   */
+  value: TabsTab.Value;
+  /**
+   * Whether the Tab is disabled.
+   *
+   * If the first Tab in a `<Tabs.List>` is disabled, it won't initially be
+   * selected; the next enabled Tab will be.
+   * @default false
+   */
+  disabled?: boolean | undefined;
+}
+
+export namespace TabsTab {
+  export type Value = TabsTabValue;
+  export type ActivationDirection = TabsTabActivationDirection;
+  export type Position = TabsTabPosition;
+  export type Size = TabsTabSize;
+  export type Metadata = TabsTabMetadata;
+  export type State = TabsTabState;
+  export type Props = TabsTabProps;
+}

package/src/toast/action/ToastAction.tsx

@@ -0,0 +1,71 @@
+'use client';
+import * as React from 'react';
+import { Pressable } from 'react-native';
+import { useToastRootContext } from '../root/ToastRootContext';
+import { useRenderElement } from '../../use-render/useRenderElement';
+import { useButton } from '../../internals/use-button/useButton';
+import type { ToastRootState } from '../root/ToastRoot';
+import type { ZestUIComponentProps } from '../../types';
+
+/**
+ * Performs an action when pressed.
+ * Renders a `<Pressable>`.
+ *
+ * **Diverges from the web deliberately.** Upstream reads the button's props off
+ * the toast object (`actionProps`), so a toast pushed from outside React can
+ * carry its own handler. That type is `React.ComponentPropsWithoutRef<'button'>`
+ * — DOM props — so zest drops it: wire this part up with `onPress` where you
+ * render it, or put what you need on the toast's `data` and read it from there.
+ */
+export function ToastAction(componentProps: ToastAction.Props) {
+  const { render, className, style, disabled = false, ref, ...elementProps } = componentProps;
+
+  const { state } = useToastRootContext();
+
+  const [pressed, setPressed] = React.useState(false);
+
+  const { getButtonProps } = useButton({ disabled });
+
+  const actionState: ToastActionState = { ...state, disabled, pressed };
+
+  return useRenderElement(Pressable, componentProps, {
+    state: actionState,
+    ref,
+    props: [
+      {
+        onPressIn() {
+          setPressed(true);
+        },
+        onPressOut() {
+          setPressed(false);
+        },
+      },
+      elementProps,
+      getButtonProps,
+    ],
+  });
+}
+
+export interface ToastActionState extends ToastRootState {
+  /**
+   * Whether the component should ignore user interaction.
+   */
+  disabled: boolean;
+  /**
+   * Whether the button is currently pressed.
+   */
+  pressed: boolean;
+}
+
+export interface ToastActionProps extends ZestUIComponentProps<typeof Pressable, ToastActionState> {
+  /**
+   * Whether the component should ignore user interaction.
+   * @default false
+   */
+  disabled?: boolean | undefined;
+}
+
+export namespace ToastAction {
+  export type State = ToastActionState;
+  export type Props = ToastActionProps;
+}

package/src/toast/arrow/ToastArrow.tsx

@@ -0,0 +1,40 @@
+'use client';
+import type * as React from 'react';
+import { View } from 'react-native';
+import { useToastPositionerContext } from '../positioner/ToastPositionerContext';
+import { useRenderElement } from '../../use-render/useRenderElement';
+import { useMergedRefs } from '../../hooks/useMergedRefs';
+import type { Align, Side } from '../../utils/useAnchorPositioning';
+import type { ZestUIComponentProps } from '../../types';
+
+/**
+ * Displays an element pointing at the anchor an anchored toast belongs to.
+ * Renders a `<View>`.
+ */
+export function ToastArrow(componentProps: ToastArrow.Props) {
+  const { render, className, style, ref, ...elementProps } = componentProps;
+
+  const { side, align, arrowRef, arrowStyles } = useToastPositionerContext();
+
+  const mergedRef = useMergedRefs(ref, arrowRef as React.Ref<unknown>);
+
+  const state: ToastArrowState = { side, align };
+
+  return useRenderElement(View, componentProps, {
+    state,
+    ref: mergedRef,
+    props: [{ style: { position: 'absolute' as const, ...arrowStyles } }, elementProps],
+  });
+}
+
+export interface ToastArrowState {
+  side: Side;
+  align: Align;
+}
+
+export interface ToastArrowProps extends ZestUIComponentProps<typeof View, ToastArrowState> {}
+
+export namespace ToastArrow {
+  export type State = ToastArrowState;
+  export type Props = ToastArrowProps;
+}

package/src/toast/close/ToastClose.tsx

@@ -0,0 +1,70 @@
+'use client';
+import * as React from 'react';
+import { Pressable, type GestureResponderEvent } from 'react-native';
+import { useToastProviderContext } from '../provider/ToastProviderContext';
+import { useToastRootContext } from '../root/ToastRootContext';
+import { useRenderElement } from '../../use-render/useRenderElement';
+import { useButton } from '../../internals/use-button/useButton';
+import type { ToastRootState } from '../root/ToastRoot';
+import type { ZestUIComponentProps } from '../../types';
+
+/**
+ * Closes the toast.
+ * Renders a `<Pressable>`.
+ */
+export function ToastClose(componentProps: ToastClose.Props) {
+  const { render, className, style, disabled = false, ref, ...elementProps } = componentProps;
+
+  const store = useToastProviderContext();
+  const { toast, state } = useToastRootContext();
+
+  const [pressed, setPressed] = React.useState(false);
+
+  const { getButtonProps } = useButton({ disabled });
+
+  const closeState: ToastCloseState = { ...state, disabled, pressed };
+
+  return useRenderElement(Pressable, componentProps, {
+    state: closeState,
+    ref,
+    props: [
+      {
+        onPress(_event: GestureResponderEvent) {
+          store.closeToast(toast.id);
+        },
+        onPressIn() {
+          setPressed(true);
+        },
+        onPressOut() {
+          setPressed(false);
+        },
+      },
+      elementProps,
+      getButtonProps,
+    ],
+  });
+}
+
+export interface ToastCloseState extends ToastRootState {
+  /**
+   * Whether the component should ignore user interaction.
+   */
+  disabled: boolean;
+  /**
+   * Whether the button is currently pressed.
+   */
+  pressed: boolean;
+}
+
+export interface ToastCloseProps extends ZestUIComponentProps<typeof Pressable, ToastCloseState> {
+  /**
+   * Whether the component should ignore user interaction.
+   * @default false
+   */
+  disabled?: boolean | undefined;
+}
+
+export namespace ToastClose {
+  export type State = ToastCloseState;
+  export type Props = ToastCloseProps;
+}

package/src/toast/createToastManager.ts

@@ -0,0 +1,98 @@
+import { generateId } from '../utils/generateId';
+import type {
+  ToastObject,
+  ToastManagerAddOptions,
+  ToastManagerPromiseOptions,
+  ToastManagerUpdateOptions,
+} from './useToastManager';
+
+/**
+ * Creates a new toast manager.
+ */
+export function createToastManager<Data extends object = any>(): ToastManager<Data> {
+  const listeners = new Set<(data: ToastManagerEvent) => void>();
+
+  function emit(data: ToastManagerEvent) {
+    listeners.forEach((listener) => listener(data));
+  }
+
+  return {
+    // This should be private aside from ToastProvider needing to access it.
+    // https://x.com/drosenwasser/status/1816947740032872664
+    ' subscribe': function subscribe(listener: (data: ToastManagerEvent) => void) {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+
+    add<T extends Data = Data>(options: ToastManagerAddOptions<T>): string {
+      const id = options.id || generateId('toast');
+      const toastToAdd: ToastObject<T> = {
+        ...options,
+        id,
+        transitionStatus: 'starting',
+      };
+
+      emit({
+        action: 'add',
+        options: toastToAdd,
+      });
+
+      return id;
+    },
+
+    close(id?: string): void {
+      emit({
+        action: 'close',
+        options: { id },
+      });
+    },
+
+    update<T extends Data = Data>(id: string, updates: ToastManagerUpdateOptions<T>): void {
+      emit({
+        action: 'update',
+        options: {
+          ...updates,
+          id,
+        },
+      });
+    },
+
+    promise<Value, T extends Data = Data>(
+      promiseValue: Promise<Value>,
+      options: ToastManagerPromiseOptions<Value, T>,
+    ): Promise<Value> {
+      let handledPromise = promiseValue;
+
+      emit({
+        action: 'promise',
+        options: {
+          ...options,
+          promise: promiseValue,
+          setPromise(promise: Promise<Value>) {
+            handledPromise = promise;
+          },
+        },
+      });
+
+      return handledPromise;
+    },
+  };
+}
+
+export interface ToastManager<Data extends object = any> {
+  ' subscribe': (listener: (data: ToastManagerEvent) => void) => () => void;
+  add: <T extends Data = Data>(options: ToastManagerAddOptions<T>) => string;
+  close: (id?: string) => void;
+  update: <T extends Data = Data>(id: string, updates: ToastManagerUpdateOptions<T>) => void;
+  promise: <Value, T extends Data = Data>(
+    promiseValue: Promise<Value>,
+    options: ToastManagerPromiseOptions<Value, T>,
+  ) => Promise<Value>;
+}
+
+export interface ToastManagerEvent {
+  action: 'add' | 'close' | 'update' | 'promise';
+  options: any;
+}

package/src/toast/description/ToastDescription.tsx

@@ -0,0 +1,46 @@
+'use client';
+import { Text } from 'react-native';
+import { useToastRootContext } from '../root/ToastRootContext';
+import { useRenderElement } from '../../use-render/useRenderElement';
+import { useId } from '../../hooks/useId';
+import { useIsoLayoutEffect } from '../../hooks/useIsoLayoutEffect';
+import type { ToastRootState } from '../root/ToastRoot';
+import type { ZestUIComponentProps } from '../../types';
+
+/**
+ * A description that gives the toast more detail.
+ * Renders a `<Text>`.
+ *
+ * Falls back to the toast's `description` when given no children.
+ */
+export function ToastDescription(componentProps: ToastDescription.Props) {
+  const { render, className, style, children, nativeID: idProp, ref, ...elementProps } = componentProps;
+
+  const { toast, state, setDescriptionId } = useToastRootContext();
+
+  const id = useId(idProp ?? undefined);
+
+  useIsoLayoutEffect(() => {
+    setDescriptionId(id);
+    return () => setDescriptionId(undefined);
+  }, [id, setDescriptionId]);
+
+  return useRenderElement(Text, componentProps, {
+    state,
+    ref,
+    props: [
+      { nativeID: id, children: children ?? toast.description },
+      elementProps,
+    ],
+    enabled: (children ?? toast.description) != null,
+  });
+}
+
+export interface ToastDescriptionState extends ToastRootState {}
+
+export interface ToastDescriptionProps extends ZestUIComponentProps<typeof Text, ToastDescriptionState> {}
+
+export namespace ToastDescription {
+  export type State = ToastDescriptionState;
+  export type Props = ToastDescriptionProps;
+}

package/src/toast/index.parts.ts

@@ -0,0 +1,12 @@
+export { ToastProvider as Provider } from './provider/ToastProvider';
+export { ToastViewport as Viewport } from './viewport/ToastViewport';
+export { ToastRoot as Root } from './root/ToastRoot';
+export { ToastPositioner as Positioner } from './positioner/ToastPositioner';
+export { ToastArrow as Arrow } from './arrow/ToastArrow';
+export { ToastTitle as Title } from './title/ToastTitle';
+export { ToastDescription as Description } from './description/ToastDescription';
+export { ToastAction as Action } from './action/ToastAction';
+export { ToastClose as Close } from './close/ToastClose';
+
+export { useToastManager } from './useToastManager';
+export { createToastManager } from './createToastManager';

package/src/toast/index.ts

@@ -0,0 +1,23 @@
+export * as Toast from './index.parts';
+
+export type * from './provider/ToastProvider';
+export type * from './viewport/ToastViewport';
+export type * from './root/ToastRoot';
+export type * from './positioner/ToastPositioner';
+export type * from './arrow/ToastArrow';
+export { useToastPositionerContext } from './positioner/ToastPositionerContext';
+export type * from './title/ToastTitle';
+export type * from './description/ToastDescription';
+export type * from './action/ToastAction';
+export type * from './close/ToastClose';
+export { useToastManager } from './useToastManager';
+export type {
+  ToastObject,
+  ToastManagerAddOptions,
+  ToastManagerUpdateOptions,
+  ToastManagerPromiseOptions,
+  UseToastManagerReturnValue,
+} from './useToastManager';
+export { createToastManager, type ToastManager } from './createToastManager';
+export { useToastProviderContext } from './provider/ToastProviderContext';
+export { useToastRootContext } from './root/ToastRootContext';

package/src/toast/positioner/ToastPositioner.tsx

@@ -0,0 +1,121 @@
+'use client';
+import * as React from 'react';
+import { View } from 'react-native';
+import { useToastProviderContext } from '../provider/ToastProviderContext';
+import { useRenderElement } from '../../use-render/useRenderElement';
+import { useIsoLayoutEffect } from '../../hooks/useIsoLayoutEffect';
+import { useMergedRefs } from '../../hooks/useMergedRefs';
+import {
+  useAnchorPositioning,
+  type Align,
+  type Side,
+  type UseAnchorPositioningSharedParameters,
+} from '../../utils/useAnchorPositioning';
+import type { ZestUIComponentProps } from '../../types';
+import { ToastPositionerContext } from './ToastPositionerContext';
+
+/**
+ * Positions a toast against an anchor, for a toast that belongs to something on
+ * screen rather than to the app as a whole.
+ * Renders a `<View>`.
+ *
+ * **Why this cannot just reuse the other Positioners.** `useAnchorPositioning`
+ * measures anchors in screen coordinates, which every other popup family can use
+ * as-is because they render inside a `statusBarTranslucent` `Modal` whose origin
+ * *is* the screen origin. `Toast.Viewport` is not a Modal — it is an ordinary
+ * View that can sit anywhere — so its own screen origin is subtracted here to
+ * bring the anchor back into the viewport's coordinate space.
+ */
+export function ToastPositioner(componentProps: ToastPositioner.Props) {
+  const {
+    align = 'center',
+    alignOffset = 0,
+    anchor,
+    arrowPadding = 5,
+    className,
+    collisionPadding = 5,
+    render,
+    side = 'top',
+    sideOffset = 0,
+    sticky = false,
+    style,
+    ref,
+    ...elementProps
+  } = componentProps;
+
+  const store = useToastProviderContext();
+  const viewportOrigin = store.useState('viewportOrigin');
+
+  const positioning = useAnchorPositioning({
+    align,
+    alignOffset,
+    arrowPadding,
+    collisionPadding,
+    side,
+    sideOffset,
+    sticky,
+  });
+
+  const { arrowRef, arrowStyles, positionerStyles, refs, update } = positioning;
+
+  useIsoLayoutEffect(() => {
+    refs.setReference(anchor ?? null);
+  }, [refs, anchor]);
+
+  const mergedRef = useMergedRefs(ref, refs.setFloating);
+
+  const viewportRelativeStyles = React.useMemo(
+    () => ({
+      ...positionerStyles,
+      left: positionerStyles.left - viewportOrigin.x,
+      top: positionerStyles.top - viewportOrigin.y,
+    }),
+    [positionerStyles, viewportOrigin],
+  );
+
+  const state: ToastPositionerState = { side: positioning.side, align: positioning.align };
+
+  const contextValue: ToastPositionerContext = React.useMemo(
+    () => ({ side: positioning.side, align: positioning.align, arrowRef, arrowStyles }),
+    [positioning.side, positioning.align, arrowRef, arrowStyles],
+  );
+
+  const element = useRenderElement(View, componentProps, {
+    state,
+    ref: mergedRef,
+    props: [
+      {
+        style: viewportRelativeStyles,
+        onLayout() {
+          update();
+        },
+      },
+      elementProps,
+    ],
+  });
+
+  return (
+    <ToastPositionerContext.Provider value={contextValue}>{element}</ToastPositionerContext.Provider>
+  );
+}
+
+export interface ToastPositionerState {
+  side: Side;
+  align: Align;
+}
+
+export interface ToastPositionerProps
+  extends UseAnchorPositioningSharedParameters,
+    ZestUIComponentProps<typeof View, ToastPositionerState> {
+  /**
+   * The element to position the toast against. Unlike the other popup families
+   * there is no trigger to infer it from, so it is passed in — usually a ref's
+   * `current`.
+   */
+  anchor?: unknown;
+}
+
+export namespace ToastPositioner {
+  export type State = ToastPositionerState;
+  export type Props = ToastPositionerProps;
+}

package/src/toast/positioner/ToastPositionerContext.ts

@@ -0,0 +1,25 @@
+'use client';
+import * as React from 'react';
+import type { Align, Side } from '../../utils/useAnchorPositioning';
+
+export interface ToastPositionerContext {
+  side: Side;
+  align: Align;
+  arrowRef: React.RefObject<unknown>;
+  arrowStyles: { left?: number; top?: number };
+}
+
+export const ToastPositionerContext = React.createContext<ToastPositionerContext | undefined>(
+  undefined,
+);
+
+export function useToastPositionerContext() {
+  const context = React.useContext(ToastPositionerContext);
+  if (context === undefined) {
+    throw new Error(
+      'Zest: ToastPositionerContext is missing. Toast.Arrow must be placed within <Toast.Positioner>.',
+    );
+  }
+
+  return context;
+}