@limonify/zest-ui 0.1.0

package/src/popover/trigger/PopoverTrigger.tsx

@@ -0,0 +1,154 @@
+'use client';
+import * as React from 'react';
+import { Pressable, type GestureResponderEvent } from 'react-native';
+import { PopoverRootContext } from '../root/PopoverRootContext';
+import { useRenderElement } from '../../use-render/useRenderElement';
+import { useButton } from '../../internals/use-button/useButton';
+import { useId } from '../../hooks/useId';
+import { useIsoLayoutEffect } from '../../hooks/useIsoLayoutEffect';
+import { useMergedRefs } from '../../hooks/useMergedRefs';
+import { usePopupHandleStore } from '../../utils/popups/usePopupHandleStore';
+import type { PopoverHandle } from '../store/PopoverHandle';
+import type { PopoverStore } from '../store/PopoverStore';
+import type { ZestUIComponentProps } from '../../types';
+import { createChangeEventDetails } from '../../utils/createChangeEventDetails';
+import { REASONS } from '../../utils/reasons';
+
+/**
+ * A button that opens the popover, and the element it is positioned against.
+ * Renders a `<Pressable>`.
+ */
+export function PopoverTrigger<Payload = unknown>(componentProps: PopoverTrigger.Props<Payload>) {
+  const {
+    render,
+    className,
+    style,
+    disabled = false,
+    handle,
+    nativeID: idProp,
+    payload,
+    ref,
+    ...elementProps
+  } = componentProps;
+
+  const rootStore = React.useContext(PopoverRootContext);
+  const handleStore = usePopupHandleStore(handle);
+
+  // A trigger inside a root uses that root; a detached one follows its handle,
+  // which resolves to the attached root's store or to an inert fallback.
+  const store = (handleStore ?? rootStore) as PopoverStore | undefined;
+
+  if (store === undefined) {
+    throw new Error(
+      'Zest: Popover.Trigger must be placed within <Popover.Root>, or given a `handle` it shares with one.',
+    );
+  }
+
+  const id = useId(idProp ?? undefined);
+  const open = store.useState('open');
+
+  const [pressed, setPressed] = React.useState(false);
+
+  const { getButtonProps } = useButton({ disabled });
+
+  // The popup lives in a portal, so the store is what carries the anchor across.
+  const anchorRef = React.useCallback(
+    (node: unknown) => {
+      store.set('triggerNode', node);
+    },
+    [store],
+  );
+  const mergedRef = useMergedRefs(ref, anchorRef);
+
+  // Registering into whichever store is current is what lets a handle resolve
+  // `open(id)`. The effect re-runs when the handle swaps stores, migrating the
+  // registration to the root that just attached.
+  useIsoLayoutEffect(() => {
+    if (id === undefined) {
+      return undefined;
+    }
+
+    store.context.triggerNodes.add(id, store.state.triggerNode);
+
+    return () => {
+      store.context.triggerNodes.delete(id);
+    };
+  }, [store, id]);
+
+  const state: PopoverTriggerState = { disabled, open, pressed };
+
+  return useRenderElement(Pressable, componentProps, {
+    state,
+    ref: mergedRef,
+    props: [
+      {
+        nativeID: id,
+        onPress(event: GestureResponderEvent) {
+          if (payload !== undefined) {
+            store.set('payload', payload);
+          }
+          if (id !== undefined) {
+            store.set('triggerId', id);
+          }
+
+          store.setOpen(!open, createChangeEventDetails(REASONS.triggerPress, event));
+        },
+        onPressIn() {
+          setPressed(true);
+        },
+        onPressOut() {
+          setPressed(false);
+        },
+        onLayout() {
+          // Nothing tracks the anchor globally in React Native, so a moved or
+          // resized trigger has to ask the positioner to recompute.
+          store.state.update?.();
+        },
+        accessibilityState: { expanded: open, disabled: disabled || undefined },
+        'aria-haspopup': 'dialog' as const,
+      },
+      elementProps,
+      getButtonProps,
+    ],
+  });
+}
+
+export interface PopoverTriggerState {
+  /**
+   * Whether the component should ignore user interaction.
+   */
+  disabled: boolean;
+  /**
+   * Whether the popover is currently open.
+   */
+  open: boolean;
+  /**
+   * Whether the trigger is currently pressed.
+   */
+  pressed: boolean;
+}
+
+export interface PopoverTriggerProps<Payload = unknown>
+  extends ZestUIComponentProps<typeof Pressable, PopoverTriggerState> {
+  /**
+   * Whether the component should ignore user interaction.
+   * @default false
+   */
+  disabled?: boolean | undefined;
+  /**
+   * A handle shared with a `Popover.Root`, which is what lets this trigger live
+   * outside of it. Create one with `Popover.createHandle()`.
+   *
+   * The trigger's `nativeID` is the id a handle's `open(triggerId)` resolves.
+   */
+  handle?: PopoverHandle<Payload> | undefined;
+  /**
+   * A payload handed to the root's children when they are a function.
+   */
+  payload?: Payload | undefined;
+}
+
+export namespace PopoverTrigger {
+  export type State = PopoverTriggerState;
+  export type Props<Payload = unknown> = PopoverTriggerProps<Payload>;
+}

package/src/progress/index.parts.ts

@@ -0,0 +1,5 @@
+export { ProgressRoot as Root } from './root/ProgressRoot';
+export { ProgressTrack as Track } from './track/ProgressTrack';
+export { ProgressIndicator as Indicator } from './indicator/ProgressIndicator';
+export { ProgressValue as Value } from './value/ProgressValue';
+export { ProgressLabel as Label } from './label/ProgressLabel';

package/src/progress/index.ts

@@ -0,0 +1,8 @@
+export * as Progress from './index.parts';
+
+export type * from './root/ProgressRoot';
+export type * from './track/ProgressTrack';
+export type * from './indicator/ProgressIndicator';
+export type * from './value/ProgressValue';
+export type * from './label/ProgressLabel';
+export { useProgressRootContext } from './root/ProgressRootContext';

package/src/progress/indicator/ProgressIndicator.tsx

@@ -0,0 +1,39 @@
+'use client';
+import { View } from 'react-native';
+import { useProgressRootContext } from '../root/ProgressRootContext';
+import { useRenderElement } from '../../use-render/useRenderElement';
+import type { ProgressRootState } from '../root/ProgressRoot';
+import type { ZestUIComponentProps } from '../../types';
+
+/**
+ * Visualizes the completion status of the task.
+ * Renders a `<View>` sized to the current value.
+ *
+ * While indeterminate, no width is applied at all — there is no value to show,
+ * so the consumer owns that appearance entirely (an indeterminate bar is
+ * usually an animation, which zest never runs itself; read `state.status`).
+ */
+export function ProgressIndicator(componentProps: ProgressIndicator.Props) {
+  const { render, className, style, ref, ...elementProps } = componentProps;
+
+  const { percentageValue, state } = useProgressRootContext();
+
+  const indicatorStyle =
+    percentageValue == null ? undefined : { width: `${percentageValue}%` as const };
+
+  return useRenderElement(View, componentProps, {
+    state,
+    ref,
+    props: [{ style: indicatorStyle }, elementProps],
+  });
+}
+
+export interface ProgressIndicatorState extends ProgressRootState {}
+
+export interface ProgressIndicatorProps
+  extends ZestUIComponentProps<typeof View, ProgressIndicatorState> {}
+
+export namespace ProgressIndicator {
+  export type State = ProgressIndicatorState;
+  export type Props = ProgressIndicatorProps;
+}

package/src/progress/label/ProgressLabel.tsx

@@ -0,0 +1,40 @@
+'use client';
+import { Text } from 'react-native';
+import { useProgressRootContext } from '../root/ProgressRootContext';
+import { useRenderElement } from '../../use-render/useRenderElement';
+import { useId } from '../../hooks/useId';
+import { useIsoLayoutEffect } from '../../hooks/useIsoLayoutEffect';
+import type { ProgressRootState } from '../root/ProgressRoot';
+import type { ZestUIComponentProps } from '../../types';
+
+/**
+ * An accessible label for the progress bar.
+ * Renders a `<Text>`.
+ */
+export function ProgressLabel(componentProps: ProgressLabel.Props) {
+  const { render, className, style, nativeID: idProp, ref, ...elementProps } = componentProps;
+
+  const { setLabelId, state } = useProgressRootContext();
+
+  const id = useId(idProp ?? undefined);
+
+  useIsoLayoutEffect(() => {
+    setLabelId(id);
+    return () => setLabelId(undefined);
+  }, [id, setLabelId]);
+
+  return useRenderElement(Text, componentProps, {
+    state,
+    ref,
+    props: [{ nativeID: id }, elementProps],
+  });
+}
+
+export interface ProgressLabelState extends ProgressRootState {}
+
+export interface ProgressLabelProps extends ZestUIComponentProps<typeof Text, ProgressLabelState> {}
+
+export namespace ProgressLabel {
+  export type State = ProgressLabelState;
+  export type Props = ProgressLabelProps;
+}

package/src/progress/root/ProgressRoot.tsx

@@ -0,0 +1,147 @@
+'use client';
+import * as React from 'react';
+import { View } from 'react-native';
+import { useRenderElement } from '../../use-render/useRenderElement';
+import { clamp } from '../../utils/clamp';
+import { formatNumber } from '../../utils/formatNumber';
+import type { ZestUIComponentProps } from '../../types';
+import { ProgressRootContext } from './ProgressRootContext';
+
+function getDefaultAccessibilityValueText(formattedValue: string | null, value: number | null) {
+  if (value == null) {
+    return 'indeterminate progress';
+  }
+
+  return formattedValue ?? '';
+}
+
+/**
+ * Groups all parts of the progress bar and provides the task completion status
+ * to screen readers.
+ * Renders a `<View>`.
+ *
+ * **Not ported from upstream.** The visually-hidden `<span>` holding an `x`:
+ * it is a workaround for NVDA not reading the label, and NVDA is a Windows
+ * screen reader.
+ */
+export function ProgressRoot(componentProps: ProgressRoot.Props) {
+  const {
+    className,
+    format,
+    getAccessibilityValueText = getDefaultAccessibilityValueText,
+    locale,
+    max = 100,
+    min = 0,
+    render,
+    style,
+    value,
+    ref,
+    ...elementProps
+  } = componentProps;
+
+  const [labelId, setLabelId] = React.useState<string | undefined>(undefined);
+
+  // `value === null` (or any non-finite value) keeps Progress indeterminate.
+  // Otherwise one clamped value and one normalized percentage keep the status,
+  // the accessibility value, the formatted text and the indicator's width in
+  // sync for any min/max — not just the default 0–100.
+  let status: ProgressStatus = 'indeterminate';
+  let percentageValue: number | null = null;
+  let clampedValue: number | null = null;
+  let formattedValue = '';
+
+  if (value != null && Number.isFinite(value)) {
+    const rawPercentage = valueToPercent(value, min, max);
+    percentageValue = clamp(Number.isNaN(rawPercentage) ? 0 : rawPercentage, 0, 100);
+    clampedValue = clamp(value, min, max);
+    status = clampedValue === max ? 'complete' : 'progressing';
+    // Without an explicit `format` the value reads as its position in the range,
+    // so the text stays in sync with the indicator fill.
+    formattedValue = format
+      ? formatNumber(value, locale, format)
+      : formatNumber(percentageValue / 100, locale, { style: 'percent' });
+  }
+
+  const state: ProgressRootState = React.useMemo(() => ({ status }), [status]);
+
+  const contextValue: ProgressRootContext = React.useMemo(
+    () => ({ formattedValue, percentageValue, setLabelId, state, value }),
+    [formattedValue, percentageValue, state, value],
+  );
+
+  const element = useRenderElement(View, componentProps, {
+    state,
+    ref,
+    props: [
+      {
+        accessibilityRole: 'progressbar' as const,
+        accessibilityLabelledBy: labelId,
+        accessibilityValue: {
+          min,
+          max,
+          now: clampedValue ?? undefined,
+          text: getAccessibilityValueText(formattedValue, value),
+        },
+        'aria-labelledby': labelId,
+      },
+      elementProps,
+    ],
+  });
+
+  return <ProgressRootContext.Provider value={contextValue}>{element}</ProgressRootContext.Provider>;
+}
+
+function valueToPercent(value: number, min: number, max: number) {
+  return ((value - min) * 100) / (max - min);
+}
+
+export type ProgressStatus = 'indeterminate' | 'progressing' | 'complete';
+
+export interface ProgressRootState {
+  /**
+   * The current status.
+   */
+  status: ProgressStatus;
+}
+
+export interface ProgressRootProps extends ZestUIComponentProps<typeof View, ProgressRootState> {
+  /**
+   * The current value. The component is indeterminate when value is `null`.
+   */
+  value: number | null;
+  /**
+   * The minimum value.
+   * @default 0
+   */
+  min?: number | undefined;
+  /**
+   * The maximum value.
+   * @default 100
+   */
+  max?: number | undefined;
+  /**
+   * Options to format the value.
+   */
+  format?: Intl.NumberFormatOptions | undefined;
+  /**
+   * The locale used by `Intl.NumberFormat` when formatting the value.
+   * Defaults to the user's runtime locale.
+   */
+  locale?: Intl.LocalesArgument | undefined;
+  /**
+   * Returns a human-readable text alternative for the current value, announced
+   * by assistive technology.
+   *
+   * Renamed from upstream's `getAriaValueText`: on React Native this feeds
+   * `accessibilityValue.text`, not `aria-valuetext`.
+   */
+  getAccessibilityValueText?:
+    | ((formattedValue: string | null, value: number | null) => string)
+    | undefined;
+}
+
+export namespace ProgressRoot {
+  export type State = ProgressRootState;
+  export type Props = ProgressRootProps;
+  export type Status = ProgressStatus;
+}

package/src/progress/root/ProgressRootContext.ts

@@ -0,0 +1,34 @@
+'use client';
+import * as React from 'react';
+import type { ProgressRootState } from './ProgressRoot';
+
+export interface ProgressRootContext {
+  /**
+   * The current value, or `null` while indeterminate.
+   */
+  value: number | null;
+  /**
+   * The value formatted for display, empty while indeterminate.
+   */
+  formattedValue: string;
+  /**
+   * The value's position in the range as a percentage, or `null` while
+   * indeterminate. This is what the indicator is sized from.
+   */
+  percentageValue: number | null;
+  state: ProgressRootState;
+  setLabelId: (id: string | undefined) => void;
+}
+
+export const ProgressRootContext = React.createContext<ProgressRootContext | undefined>(undefined);
+
+export function useProgressRootContext() {
+  const context = React.useContext(ProgressRootContext);
+  if (context === undefined) {
+    throw new Error(
+      'Zest: ProgressRootContext is missing. Progress parts must be placed within <Progress.Root>.',
+    );
+  }
+
+  return context;
+}

package/src/progress/track/ProgressTrack.tsx

@@ -0,0 +1,31 @@
+'use client';
+import { View } from 'react-native';
+import { useProgressRootContext } from '../root/ProgressRootContext';
+import { useRenderElement } from '../../use-render/useRenderElement';
+import type { ProgressRootState } from '../root/ProgressRoot';
+import type { ZestUIComponentProps } from '../../types';
+
+/**
+ * Contains the progress bar indicator.
+ * Renders a `<View>`.
+ */
+export function ProgressTrack(componentProps: ProgressTrack.Props) {
+  const { render, className, style, ref, ...elementProps } = componentProps;
+
+  const { state } = useProgressRootContext();
+
+  return useRenderElement(View, componentProps, {
+    state,
+    ref,
+    props: elementProps,
+  });
+}
+
+export interface ProgressTrackState extends ProgressRootState {}
+
+export interface ProgressTrackProps extends ZestUIComponentProps<typeof View, ProgressTrackState> {}
+
+export namespace ProgressTrack {
+  export type State = ProgressTrackState;
+  export type Props = ProgressTrackProps;
+}

package/src/progress/value/ProgressValue.tsx

@@ -0,0 +1,53 @@
+'use client';
+import { Text } from 'react-native';
+import { useProgressRootContext } from '../root/ProgressRootContext';
+import { useRenderElement } from '../../use-render/useRenderElement';
+import type { ProgressRootState } from '../root/ProgressRoot';
+import type { ZestUIComponentProps } from '../../types';
+
+/**
+ * A text element displaying the current value.
+ * Renders a `<Text>`.
+ *
+ * Hidden from assistive technology: `Progress.Root` already announces the value
+ * through its `accessibilityValue`, so reading this too would duplicate it.
+ */
+export function ProgressValue(componentProps: ProgressValue.Props) {
+  const { render, className, style, children, ref, ...elementProps } = componentProps;
+
+  const { value, formattedValue, state } = useProgressRootContext();
+
+  const formattedValueArg = value == null ? 'indeterminate' : formattedValue;
+  const formattedValueDisplay = value == null ? null : formattedValue;
+
+  return useRenderElement(Text, componentProps, {
+    state,
+    ref,
+    props: [
+      {
+        accessibilityElementsHidden: true,
+        importantForAccessibility: 'no-hide-descendants' as const,
+        'aria-hidden': true,
+        children:
+          typeof children === 'function'
+            ? children(formattedValueArg, value)
+            : (children ?? formattedValueDisplay),
+      },
+      elementProps,
+    ],
+  });
+}
+
+export interface ProgressValueState extends ProgressRootState {}
+
+export interface ProgressValueProps
+  extends Omit<ZestUIComponentProps<typeof Text, ProgressValueState>, 'children'> {
+  children?:
+    | React.ReactNode
+    | ((formattedValue: string, value: number | null) => React.ReactNode);
+}
+
+export namespace ProgressValue {
+  export type State = ProgressValueState;
+  export type Props = ProgressValueProps;
+}

package/src/radio/index.parts.ts

@@ -0,0 +1,2 @@
+export { RadioRoot as Root } from './root/RadioRoot';
+export { RadioIndicator as Indicator } from './indicator/RadioIndicator';

package/src/radio/index.ts

@@ -0,0 +1,4 @@
+export * as Radio from './index.parts';
+
+export type * from './root/RadioRoot';
+export type * from './indicator/RadioIndicator';

package/src/radio/indicator/RadioIndicator.tsx

@@ -0,0 +1,67 @@
+'use client';
+import { View } from 'react-native';
+import { useRadioRootContext } from '../root/RadioRootContext';
+import { useRenderElement } from '../../use-render/useRenderElement';
+import { useIsoLayoutEffect } from '../../hooks/useIsoLayoutEffect';
+import { useTransitionStatus, type TransitionStatus } from '../../internals/useTransitionStatus';
+import type { RadioRootState } from '../root/RadioRoot';
+import type { ZestUIComponentProps } from '../../types';
+
+/**
+ * Indicates whether the radio button is selected.
+ * Renders a `<View>`, or nothing when the radio is inactive.
+ *
+ * Follows the animation contract: with `keepMounted`, the indicator stays
+ * mounted while inactive and publishes `transitionStatus` so the consumer can
+ * animate it out. Without it, the indicator unmounts the moment it deselects —
+ * React Native cannot report when an exit animation finished.
+ */
+export function RadioIndicator(componentProps: RadioIndicator.Props) {
+  const { render, className, style, keepMounted = false, ref, ...elementProps } = componentProps;
+
+  const rootState = useRadioRootContext();
+
+  const { mounted, transitionStatus, setMounted } = useTransitionStatus(rootState.checked);
+
+  // Nothing reports when an exit animation finished, so an indicator that isn't
+  // kept mounted is unmounted the moment it deselects.
+  useIsoLayoutEffect(() => {
+    if (!rootState.checked && mounted && !keepMounted) {
+      setMounted(false);
+    }
+  }, [rootState.checked, mounted, keepMounted, setMounted]);
+
+  const state: RadioIndicatorState = { ...rootState, transitionStatus };
+
+  const shouldRender = keepMounted || mounted;
+
+  return useRenderElement(View, componentProps, {
+    state,
+    ref,
+    enabled: shouldRender,
+    props: elementProps,
+  });
+}
+
+export interface RadioIndicatorState extends RadioRootState {
+  /**
+   * The transition status of the indicator, for driving enter/exit animations.
+   */
+  transitionStatus: TransitionStatus;
+}
+
+export interface RadioIndicatorProps
+  extends ZestUIComponentProps<typeof View, RadioIndicatorState> {
+  /**
+   * Whether to keep the element mounted when the radio button is inactive.
+   *
+   * Required to animate the indicator out; without it, it unmounts on deselect.
+   * @default false
+   */
+  keepMounted?: boolean | undefined;
+}
+
+export namespace RadioIndicator {
+  export type State = RadioIndicatorState;
+  export type Props = RadioIndicatorProps;
+}