@limonify/zest-ui 0.1.0

package/src/toast/viewport/ToastViewport.tsx

@@ -0,0 +1,90 @@
+'use client';
+import * as React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { useToastProviderContext } from '../provider/ToastProviderContext';
+import { useRenderElement } from '../../use-render/useRenderElement';
+import { useMergedRefs } from '../../hooks/useMergedRefs';
+import { useStableCallback } from '../../hooks/useStableCallback';
+import type { ZestUIComponentProps } from '../../types';
+
+/**
+ * A container viewport for toasts.
+ * Renders a `<View>` that fills its parent without intercepting touches.
+ *
+ * **This is the one popup family that is not an RN `Modal`, and deliberately so.**
+ * A `Modal` covers the screen and swallows every touch, which is right for a
+ * dialog and fatal for a toast: the app underneath has to stay usable while a
+ * toast is on screen. So there is no `Toast.Portal` either — place the Viewport
+ * inside `Toast.Provider`, at the root of the app, and position it with your own
+ * styles. `pointerEvents="box-none"` is what lets touches through everywhere
+ * except on the toasts themselves.
+ *
+ * It measures its own screen position for `Toast.Positioner`: anchors are
+ * measured in screen coordinates, and unlike a `Modal` this viewport can sit
+ * anywhere.
+ *
+ * Upstream's viewport also runs focus management, hover tracking and a
+ * `ScrollArea`-like keyboard flow (F6). None of that is ported: see the store.
+ */
+export function ToastViewport(componentProps: ToastViewport.Props) {
+  const { render, className, style, ref, ...elementProps } = componentProps;
+
+  const store = useToastProviderContext();
+  const toasts = store.useState('toasts');
+  const expanded = store.useState('expanded');
+
+  const viewportRef = React.useRef<View | null>(null);
+  const mergedRef = useMergedRefs(ref, viewportRef);
+
+  const handleLayout = useStableCallback(() => {
+    // `onLayout` reports a position relative to the parent, but an anchor is
+    // measured against the screen, so the two only line up through
+    // `measureInWindow`.
+    viewportRef.current?.measureInWindow((x, y) => {
+      const origin = store.state.viewportOrigin;
+      if (origin.x !== x || origin.y !== y) {
+        store.set('viewportOrigin', { x, y });
+      }
+    });
+  });
+
+  const state: ToastViewportState = {
+    empty: toasts.length === 0,
+    expanded,
+  };
+
+  return useRenderElement(View, componentProps, {
+    state,
+    ref: mergedRef,
+    props: [
+      {
+        style: StyleSheet.absoluteFill,
+        onLayout: handleLayout,
+        // Touches pass through the viewport to the app, but not through the
+        // toasts inside it.
+        pointerEvents: 'box-none' as const,
+        accessibilityLiveRegion: 'polite' as const,
+      },
+      elementProps,
+    ],
+  });
+}
+
+export interface ToastViewportState {
+  /**
+   * Whether there are no toasts.
+   */
+  empty: boolean;
+  /**
+   * Whether a toast is being pressed or focused, which pauses the timers.
+   */
+  expanded: boolean;
+}
+
+export interface ToastViewportProps
+  extends ZestUIComponentProps<typeof View, ToastViewportState> {}
+
+export namespace ToastViewport {
+  export type State = ToastViewportState;
+  export type Props = ToastViewportProps;
+}

package/src/toggle/Toggle.tsx

@@ -0,0 +1,162 @@
+'use client';
+import { Pressable, type GestureResponderEvent } from 'react-native';
+import { useControlled } from '../hooks/useControlled';
+import { useId } from '../hooks/useId';
+import { useIsoLayoutEffect } from '../hooks/useIsoLayoutEffect';
+import { useRenderElement } from '../use-render/useRenderElement';
+import { useButton } from '../internals/use-button/useButton';
+import { useToggleGroupContext } from '../toggle-group/ToggleGroupContext';
+import type { ZestUIComponentProps } from '../types';
+import { error } from '../utils/error';
+import {
+  createChangeEventDetails,
+  type ZestChangeEventDetails,
+} from '../utils/createChangeEventDetails';
+import { REASONS } from '../utils/reasons';
+
+/**
+ * A two-state button that can be on or off.
+ * Renders a `<Pressable>`.
+ */
+export function Toggle<Value extends string = string>(componentProps: Toggle.Props<Value>) {
+  const {
+    className,
+    defaultPressed: defaultPressedProp = false,
+    disabled: disabledProp = false,
+    onPressedChange,
+    pressed: pressedProp,
+    render,
+    style,
+    value: valueProp,
+    ref,
+    ...elementProps
+  } = componentProps;
+
+  // `|| undefined` handles cases where value is falsy (i.e. "")
+  // The group is consumed as `string`-valued: a Toggle's `value` is always a string at
+  // runtime (falling back to a generated id), and `Value extends string`.
+  const value = useId(valueProp || undefined);
+  const groupContext = useToggleGroupContext();
+  const groupValue = groupContext?.value ?? [];
+
+  const defaultPressed = groupContext ? undefined : defaultPressedProp;
+
+  const disabled = (disabledProp || groupContext?.disabled) ?? false;
+
+  if (process.env.NODE_ENV !== 'production') {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useIsoLayoutEffect(() => {
+      if (groupContext && valueProp === undefined && groupContext.isValueInitialized) {
+        error(
+          'A `<Toggle>` component rendered in a `<ToggleGroup>` has no explicit `value` prop.',
+          'This will cause issues between the Toggle Group and Toggle values.',
+          'Provide the `<Toggle>` with a `value` prop matching the `<ToggleGroup>` values prop type.',
+        );
+      }
+    }, [groupContext, valueProp, groupContext?.isValueInitialized]);
+  }
+
+  const [pressed, setPressedState] = useControlled({
+    controlled: groupContext ? value !== undefined && groupValue.indexOf(value) > -1 : pressedProp,
+    default: defaultPressed,
+    name: 'Toggle',
+    state: 'pressed',
+  });
+
+  const { getButtonProps } = useButton({ disabled });
+
+  const state: ToggleState = { disabled, pressed };
+
+  return useRenderElement(Pressable, componentProps, {
+    state,
+    ref,
+    props: [
+      {
+        accessibilityRole: 'button' as const,
+        accessibilityState: { selected: pressed, disabled: disabled || undefined },
+        'aria-pressed': pressed,
+        onPress(event: GestureResponderEvent) {
+          if (disabled) {
+            return;
+          }
+
+          const nextPressed = !pressed;
+          const eventDetails = createChangeEventDetails(REASONS.none, event);
+
+          // `onPressedChange` runs before the group commits so that canceling here
+          // can also veto the group value change, which shares this `eventDetails` object.
+          onPressedChange?.(nextPressed, eventDetails);
+
+          if (eventDetails.isCanceled) {
+            return;
+          }
+
+          if (value) {
+            groupContext?.setGroupValue?.(value, nextPressed, eventDetails);
+          }
+
+          if (eventDetails.isCanceled) {
+            return;
+          }
+
+          setPressedState(nextPressed);
+        },
+      },
+      elementProps,
+      getButtonProps,
+    ],
+  });
+}
+
+export interface ToggleState {
+  /**
+   * Whether the toggle is currently pressed.
+   */
+  pressed: boolean;
+  /**
+   * Whether the toggle should ignore user interaction.
+   */
+  disabled: boolean;
+}
+
+export interface ToggleProps<Value extends string = string>
+  extends Omit<ZestUIComponentProps<typeof Pressable, ToggleState>, 'onPress'> {
+  /**
+   * Whether the toggle button is currently pressed.
+   * This is the controlled counterpart of `defaultPressed`.
+   */
+  pressed?: boolean | undefined;
+  /**
+   * Whether the toggle button is currently pressed.
+   * This is the uncontrolled counterpart of `pressed`.
+   * @default false
+   */
+  defaultPressed?: boolean | undefined;
+  /**
+   * Whether the component should ignore user interaction.
+   * @default false
+   */
+  disabled?: boolean | undefined;
+  /**
+   * Callback fired when the pressed state is changed.
+   */
+  onPressedChange?:
+    | ((pressed: boolean, eventDetails: Toggle.ChangeEventDetails) => void)
+    | undefined;
+  /**
+   * A unique string that identifies the toggle when used
+   * inside a toggle group.
+   */
+  value?: Value | undefined;
+}
+
+export type ToggleChangeEventReason = typeof REASONS.none;
+
+export type ToggleChangeEventDetails = ZestChangeEventDetails<ToggleChangeEventReason>;
+
+export namespace Toggle {
+  export type State = ToggleState;
+  export type Props<Value extends string = string> = ToggleProps<Value>;
+  export type ChangeEventReason = ToggleChangeEventReason;
+  export type ChangeEventDetails = ToggleChangeEventDetails;
+}

package/src/toggle/index.ts

@@ -0,0 +1,2 @@
+export { Toggle } from './Toggle';
+export type * from './Toggle';

package/src/toggle-group/ToggleGroup.tsx

@@ -0,0 +1,163 @@
+'use client';
+import * as React from 'react';
+import { View } from 'react-native';
+import { useControlled } from '../hooks/useControlled';
+import { useStableCallback } from '../hooks/useStableCallback';
+import { useRenderElement } from '../use-render/useRenderElement';
+import type { ZestUIComponentProps, Orientation } from '../types';
+import type { ZestChangeEventDetails } from '../utils/createChangeEventDetails';
+import type { REASONS } from '../utils/reasons';
+import { ToggleGroupContext } from './ToggleGroupContext';
+
+const EMPTY_ARRAY: never[] = [];
+
+/**
+ * Provides a shared state to a series of toggle buttons.
+ * Renders a `<View>`.
+ */
+export function ToggleGroup<Value extends string = string>(
+  componentProps: ToggleGroup.Props<Value>,
+) {
+  const {
+    className,
+    defaultValue: defaultValueProp,
+    disabled = false,
+    multiple = false,
+    onValueChange,
+    orientation = 'horizontal',
+    render,
+    style,
+    value: valueProp,
+    ref,
+    ...elementProps
+  } = componentProps;
+
+  const isValueInitialized = valueProp !== undefined || defaultValueProp !== undefined;
+
+  const [groupValue, setValueState] = useControlled<readonly Value[]>({
+    controlled: valueProp,
+    default: valueProp === undefined ? (defaultValueProp ?? EMPTY_ARRAY) : undefined,
+    name: 'ToggleGroup',
+    state: 'value',
+  });
+
+  const setGroupValue = useStableCallback(
+    (
+      newValue: Value,
+      nextPressed: boolean,
+      eventDetails: ZestChangeEventDetails<typeof REASONS.none>,
+    ) => {
+      let newGroupValue: Value[];
+      if (multiple) {
+        newGroupValue = groupValue.slice();
+        if (nextPressed) {
+          newGroupValue.push(newValue);
+        } else {
+          newGroupValue.splice(groupValue.indexOf(newValue), 1);
+        }
+      } else {
+        newGroupValue = nextPressed ? [newValue] : [];
+      }
+
+      onValueChange?.(newGroupValue, eventDetails);
+
+      if (eventDetails.isCanceled) {
+        return;
+      }
+
+      setValueState(newGroupValue);
+    },
+  );
+
+  const state: ToggleGroupState = { disabled, multiple, orientation };
+
+  const contextValue: ToggleGroupContext<Value> = React.useMemo(
+    () => ({
+      disabled,
+      setGroupValue,
+      value: groupValue,
+      isValueInitialized,
+    }),
+    [disabled, setGroupValue, groupValue, isValueInitialized],
+  );
+
+  const element = useRenderElement(View, componentProps, {
+    state,
+    ref,
+    props: [
+      {
+        role: 'group' as const,
+        'aria-orientation': orientation,
+      },
+      elementProps,
+    ],
+  });
+
+  return <ToggleGroupContext.Provider value={contextValue}>{element}</ToggleGroupContext.Provider>;
+}
+
+export interface ToggleGroupState {
+  /**
+   * Whether the component should ignore user interaction.
+   */
+  disabled: boolean;
+  /**
+   * When `false` only one item in the group can be pressed. If any item in
+   * the group becomes pressed, the others will become unpressed.
+   * When `true` multiple items can be pressed.
+   */
+  multiple: boolean;
+  /**
+   * The orientation of the toggle group.
+   */
+  orientation: Orientation;
+}
+
+export interface ToggleGroupProps<Value extends string = string>
+  extends ZestUIComponentProps<typeof View, ToggleGroupState> {
+  /**
+   * The pressed state of the toggle group represented by an array of
+   * the values of all pressed toggle buttons.
+   * This is the controlled counterpart of `defaultValue`.
+   */
+  value?: readonly Value[] | undefined;
+  /**
+   * The pressed state of the toggle group represented by an array of
+   * the values of all pressed toggle buttons.
+   * This is the uncontrolled counterpart of `value`.
+   */
+  defaultValue?: readonly Value[] | undefined;
+  /**
+   * Callback fired when the pressed states of the toggle group changes.
+   */
+  onValueChange?:
+    | ((groupValue: Value[], eventDetails: ToggleGroup.ChangeEventDetails) => void)
+    | undefined;
+  /**
+   * Whether the toggle group should ignore user interaction.
+   * @default false
+   */
+  disabled?: boolean | undefined;
+  /**
+   * @default 'horizontal'
+   */
+  orientation?: Orientation | undefined;
+  /**
+   * When `false` only one item in the group can be pressed. If any item in
+   * the group becomes pressed, the others will become unpressed.
+   * When `true` multiple items can be pressed.
+   * @default false
+   */
+  multiple?: boolean | undefined;
+}
+
+export type ToggleGroupChangeEventReason = typeof REASONS.none;
+
+export type ToggleGroupChangeEventDetails = ZestChangeEventDetails<ToggleGroupChangeEventReason>;
+
+export namespace ToggleGroup {
+  export type State = ToggleGroupState;
+  export type Props<Value extends string = string> = ToggleGroupProps<Value>;
+  export type ChangeEventReason = ToggleGroupChangeEventReason;
+  export type ChangeEventDetails = ToggleGroupChangeEventDetails;
+}

package/src/toggle-group/ToggleGroupContext.ts

@@ -0,0 +1,30 @@
+'use client';
+import * as React from 'react';
+import type { ZestChangeEventDetails } from '../utils/createChangeEventDetails';
+import type { ZestEventReasons } from '../utils/reasons';
+
+export interface ToggleGroupContext<Value> {
+  value: readonly Value[];
+  setGroupValue: (
+    newValue: Value,
+    nextPressed: boolean,
+    eventDetails: ZestChangeEventDetails<ZestEventReasons['none']>,
+  ) => void;
+  disabled: boolean;
+  /**
+   * Indicates whether the value has been initialized via `value` or `defaultValue` props.
+   * Used to determine if Toggle should warn users about data inconsistency problems.
+   */
+  isValueInitialized: boolean;
+}
+
+export const ToggleGroupContext = React.createContext<ToggleGroupContext<any> | undefined>(
+  undefined,
+);
+
+/**
+ * Toggle may be used standalone, so the group context is optional by design.
+ */
+export function useToggleGroupContext<Value = string>() {
+  return React.useContext<ToggleGroupContext<Value> | undefined>(ToggleGroupContext);
+}

package/src/toggle-group/index.ts

@@ -0,0 +1,3 @@
+export { ToggleGroup } from './ToggleGroup';
+export type * from './ToggleGroup';
+export { useToggleGroupContext } from './ToggleGroupContext';

package/src/tooltip/arrow/TooltipArrow.tsx

@@ -0,0 +1,45 @@
+'use client';
+import type * as React from 'react';
+import { View } from 'react-native';
+import { useTooltipRootContext } from '../root/TooltipRootContext';
+import { useTooltipPositionerContext } from '../positioner/TooltipPositionerContext';
+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 positioned against the tooltip anchor.
+ * Renders a `<View>`.
+ */
+export function TooltipArrow(componentProps: TooltipArrow.Props) {
+  const { render, className, style, ref, ...elementProps } = componentProps;
+
+  const store = useTooltipRootContext();
+  const { side, align, arrowRef, arrowStyles } = useTooltipPositionerContext();
+
+  const open = store.useState('open');
+
+  const mergedRef = useMergedRefs(ref, arrowRef as React.Ref<unknown>);
+
+  const state: TooltipArrowState = { open, side, align };
+
+  return useRenderElement(View, componentProps, {
+    state,
+    ref: mergedRef,
+    props: [{ style: { position: 'absolute' as const, ...arrowStyles } }, elementProps],
+  });
+}
+
+export interface TooltipArrowState {
+  open: boolean;
+  side: Side;
+  align: Align;
+}
+
+export interface TooltipArrowProps extends ZestUIComponentProps<typeof View, TooltipArrowState> {}
+
+export namespace TooltipArrow {
+  export type State = TooltipArrowState;
+  export type Props = TooltipArrowProps;
+}

package/src/tooltip/index.parts.ts

@@ -0,0 +1,6 @@
+export { TooltipRoot as Root } from './root/TooltipRoot';
+export { TooltipTrigger as Trigger } from './trigger/TooltipTrigger';
+export { TooltipPortal as Portal } from './portal/TooltipPortal';
+export { TooltipPositioner as Positioner } from './positioner/TooltipPositioner';
+export { TooltipPopup as Popup } from './popup/TooltipPopup';
+export { TooltipArrow as Arrow } from './arrow/TooltipArrow';

package/src/tooltip/index.ts

@@ -0,0 +1,9 @@
+export * as Tooltip from './index.parts';
+
+export type * from './root/TooltipRoot';
+export type * from './trigger/TooltipTrigger';
+export type * from './portal/TooltipPortal';
+export type * from './positioner/TooltipPositioner';
+export type * from './popup/TooltipPopup';
+export type * from './arrow/TooltipArrow';
+export { useTooltipRootContext } from './root/TooltipRootContext';

package/src/tooltip/popup/TooltipPopup.tsx

@@ -0,0 +1,49 @@
+'use client';
+import { View } from 'react-native';
+import { useTooltipRootContext } from '../root/TooltipRootContext';
+import { useTooltipPositionerContext } from '../positioner/TooltipPositionerContext';
+import { useRenderElement } from '../../use-render/useRenderElement';
+import type { Align, Side } from '../../utils/useAnchorPositioning';
+import type { ZestUIComponentProps } from '../../types';
+
+/**
+ * A container for the tooltip contents.
+ * Renders a `<View>`.
+ */
+export function TooltipPopup(componentProps: TooltipPopup.Props) {
+  const { render, className, style, ref, ...elementProps } = componentProps;
+
+  const store = useTooltipRootContext();
+  const { side, align } = useTooltipPositionerContext();
+
+  const open = store.useState('open');
+
+  const state: TooltipPopupState = { open, side, align };
+
+  return useRenderElement(View, componentProps, {
+    state,
+    ref,
+    props: [
+      {
+        role: 'tooltip' as const,
+        // Claim the touch responder so presses inside the popup don't reach the
+        // portal's dismissal surface.
+        onStartShouldSetResponder: () => true,
+      },
+      elementProps,
+    ],
+  });
+}
+
+export interface TooltipPopupState {
+  open: boolean;
+  side: Side;
+  align: Align;
+}
+
+export interface TooltipPopupProps extends ZestUIComponentProps<typeof View, TooltipPopupState> {}
+
+export namespace TooltipPopup {
+  export type State = TooltipPopupState;
+  export type Props = TooltipPopupProps;
+}

package/src/tooltip/portal/TooltipPortal.tsx

@@ -0,0 +1,75 @@
+'use client';
+import * as React from 'react';
+import {
+  Modal,
+  StyleSheet,
+  View,
+  type GestureResponderEvent,
+  type NativeSyntheticEvent,
+} from 'react-native';
+import { useTooltipRootContext } from '../root/TooltipRootContext';
+import { TooltipPortalContext } from './TooltipPortalContext';
+import { createChangeEventDetails } from '../../utils/createChangeEventDetails';
+import { REASONS } from '../../utils/reasons';
+
+/**
+ * A portal element that moves the tooltip to the top of the app.
+ *
+ * Like the rest of the popup family this is React Native's `Modal`, which keeps
+ * children in the same React tree (so contexts survive) and gives the popup a
+ * screen-origin coordinate space for positioning.
+ *
+ * The portal also renders the dismissal surface: a tooltip has no backdrop part,
+ * so a press anywhere outside the popup closes it.
+ */
+export function TooltipPortal(props: TooltipPortal.Props) {
+  const { children, keepMounted = false } = props;
+
+  const store = useTooltipRootContext();
+  const open = store.useState('open');
+
+  const shouldRender = open || keepMounted;
+  if (!shouldRender) {
+    return null;
+  }
+
+  return (
+    <TooltipPortalContext.Provider value={keepMounted}>
+      <Modal
+        transparent
+        visible={open}
+        animationType="none"
+        statusBarTranslucent
+        navigationBarTranslucent
+        onRequestClose={(event: NativeSyntheticEvent<unknown>) => {
+          store.setOpen(false, createChangeEventDetails(REASONS.escapeKey, event));
+        }}
+      >
+        {/* A bare touch catcher rather than a Pressable: it is not a control,
+            it just closes the tooltip. The popup claims the responder itself, so
+            presses inside it never reach here. */}
+        <View
+          style={StyleSheet.absoluteFill}
+          onStartShouldSetResponder={() => true}
+          onResponderRelease={(event: GestureResponderEvent) => {
+            store.setOpen(false, createChangeEventDetails(REASONS.outsidePress, event));
+          }}
+        />
+        {children}
+      </Modal>
+    </TooltipPortalContext.Provider>
+  );
+}
+
+export interface TooltipPortalProps {
+  children?: React.ReactNode;
+  /**
+   * Whether to keep the portal mounted while the tooltip is closed.
+   * @default false
+   */
+  keepMounted?: boolean | undefined;
+}
+
+export namespace TooltipPortal {
+  export type Props = TooltipPortalProps;
+}

package/src/tooltip/portal/TooltipPortalContext.ts

@@ -0,0 +1,15 @@
+'use client';
+import * as React from 'react';
+
+export const TooltipPortalContext = React.createContext<boolean | undefined>(undefined);
+
+export function useTooltipPortalContext() {
+  const context = React.useContext(TooltipPortalContext);
+  if (context === undefined) {
+    throw new Error(
+      'Zest: TooltipPortalContext is missing. <Tooltip.Positioner> must be placed within <Tooltip.Portal>.',
+    );
+  }
+
+  return context;
+}