@limonify/zest-ui 0.1.0

package/src/combobox/root/useComboboxRoot.ts

@@ -0,0 +1,190 @@
+'use client';
+import * as React from 'react';
+import { useControlled } from '../../hooks/useControlled';
+import { useIsoLayoutEffect } from '../../hooks/useIsoLayoutEffect';
+import { useStableCallback } from '../../hooks/useStableCallback';
+import type { ZestNativeEvent } from '../../utils/createChangeEventDetails';
+import { ComboboxRootContext, type ComboboxItem } from './ComboboxRootContext';
+
+export type ComboboxItems = ReadonlyArray<string | { value: unknown; label: string }>;
+
+/** Normalizes the `items` prop into `{ value, label }` records. */
+function normalizeItems(items: ComboboxItems | undefined): ComboboxItem[] {
+  if (!items) {
+    return [];
+  }
+  return items.map((item) =>
+    typeof item === 'string' ? { value: item, label: item } : { value: item.value, label: item.label },
+  );
+}
+
+export interface UseComboboxRootParameters {
+  mode: 'combobox' | 'autocomplete';
+  items: ComboboxItems | undefined;
+  value?: unknown;
+  defaultValue?: unknown;
+  onValueChange?: ((value: unknown) => void) | undefined;
+  inputValue?: string | undefined;
+  defaultInputValue?: string | undefined;
+  onInputValueChange?: ((value: string) => void) | undefined;
+  open?: boolean | undefined;
+  defaultOpen?: boolean | undefined;
+  onOpenChange?: ((open: boolean, event?: ZestNativeEvent) => void) | undefined;
+  openOnFocus?: boolean | undefined;
+  filter?: ((item: ComboboxItem, query: string) => boolean) | undefined;
+  disabled: boolean;
+}
+
+const defaultFilter = (item: ComboboxItem, query: string) =>
+  item.label.toLowerCase().includes(query.toLowerCase());
+
+/**
+ * The state behind `Combobox.Root` and `Autocomplete.Root`: the resolved item
+ * list, the filtered view of it, the input text, the selection, and the open
+ * state — plus the anchor plumbing the popup needs.
+ */
+export function useComboboxRoot(parameters: UseComboboxRootParameters): ComboboxRootContext {
+  const {
+    mode,
+    items,
+    value: valueProp,
+    defaultValue,
+    onValueChange,
+    inputValue: inputValueProp,
+    defaultInputValue,
+    onInputValueChange,
+    open: openProp,
+    defaultOpen = false,
+    onOpenChange,
+    openOnFocus = true,
+    filter = defaultFilter,
+    disabled,
+  } = parameters;
+
+  const normalized = React.useMemo(() => normalizeItems(items), [items]);
+
+  const [open, setOpenState] = useControlled<boolean>({
+    controlled: openProp,
+    default: defaultOpen,
+    name: 'Combobox',
+    state: 'open',
+  });
+
+  const [selectedValue, setSelectedValue] = useControlled<unknown>({
+    controlled: valueProp,
+    default: defaultValue ?? null,
+    name: 'Combobox',
+    state: 'value',
+  });
+
+  // The initial input text is only read on the first render; compute it once so
+  // it stays stable, or `useControlled` warns when a later selection changes the
+  // controlled `value` (and with it the derived label).
+  const initialInputRef = React.useRef<string | undefined>(undefined);
+  if (initialInputRef.current === undefined) {
+    initialInputRef.current =
+      defaultInputValue ??
+      (mode === 'combobox'
+        ? (normalized.find((item) => item.value === (valueProp ?? defaultValue))?.label ?? '')
+        : '');
+  }
+
+  const [inputValue, setInputValueState] = useControlled<string>({
+    controlled: inputValueProp,
+    default: initialInputRef.current,
+    name: 'Combobox',
+    state: 'inputValue',
+  });
+
+  const [triggerNode, setTriggerNode] = React.useState<unknown>(null);
+  const [update, setUpdate] = React.useState<(() => void) | undefined>(undefined);
+
+  const setOpen = useStableCallback((nextOpen: boolean, event?: ZestNativeEvent) => {
+    if (nextOpen === open) {
+      return;
+    }
+    onOpenChange?.(nextOpen, event);
+    setOpenState(nextOpen);
+  });
+
+  const setInputValue = useStableCallback((next: string) => {
+    onInputValueChange?.(next);
+    setInputValueState(next);
+    // Typing reopens the list so suggestions follow the query.
+    if (!open && next.length > 0) {
+      setOpen(true);
+    }
+  });
+
+  const selectItem = useStableCallback((item: ComboboxItem, event?: ZestNativeEvent) => {
+    if (mode === 'combobox') {
+      onValueChange?.(item.value);
+      setSelectedValue(item.value);
+    }
+    onInputValueChange?.(item.label);
+    setInputValueState(item.label);
+    setOpen(false, event);
+  });
+
+  // The label of the currently selected value (combobox mode only).
+  const selectedLabel =
+    mode === 'combobox'
+      ? (normalized.find((item) => item.value === selectedValue)?.label ?? '')
+      : '';
+
+  // Reflect a controlled `value` that changed from outside into the input text.
+  // `selectItem` already sets both, so the ref guard makes that a no-op and stops
+  // this from fighting the user's typing (typing never changes `selectedValue`).
+  const lastReflectedValueRef = React.useRef(selectedValue);
+  useIsoLayoutEffect(() => {
+    if (mode !== 'combobox' || selectedValue === lastReflectedValueRef.current) {
+      return;
+    }
+    lastReflectedValueRef.current = selectedValue;
+    setInputValueState(selectedLabel);
+  }, [mode, selectedValue, selectedLabel, setInputValueState]);
+
+  const filteredItems = React.useMemo(() => {
+    // When the input still shows the current selection, the user has not started
+    // filtering — show every item so a fresh focus reveals the whole list rather
+    // than the single selected row.
+    const query = mode === 'combobox' && inputValue === selectedLabel ? '' : inputValue.trim();
+    if (query.length === 0) {
+      return normalized;
+    }
+    return normalized.filter((item) => filter(item, query));
+  }, [normalized, inputValue, selectedLabel, mode, filter]);
+
+  return React.useMemo(
+    () => ({
+      mode,
+      open,
+      setOpen,
+      inputValue,
+      setInputValue,
+      selectedValue,
+      selectItem,
+      filteredItems,
+      disabled,
+      openOnFocus,
+      triggerNode,
+      setTriggerNode,
+      update,
+      setUpdate,
+    }),
+    [
+      mode,
+      open,
+      setOpen,
+      inputValue,
+      setInputValue,
+      selectedValue,
+      selectItem,
+      filteredItems,
+      disabled,
+      openOnFocus,
+      triggerNode,
+      update,
+    ],
+  );
+}

package/src/combobox/value/ComboboxValue.tsx

@@ -0,0 +1,39 @@
+'use client';
+import type * as React from 'react';
+import { Text } from 'react-native';
+import { useComboboxRootContext } from '../root/ComboboxRootContext';
+import { useRenderElement } from '../../use-render/useRenderElement';
+import type { ZestUIComponentProps } from '../../types';
+
+/**
+ * Displays the current input text (the selected label in combobox mode).
+ * Renders a `<Text>`. Reads `state.value` in a style/render function for custom
+ * formatting.
+ */
+export function ComboboxValue(componentProps: ComboboxValue.Props) {
+  const { render, className, style, children, ref, ...elementProps } = componentProps;
+
+  const { inputValue } = useComboboxRootContext();
+
+  const state: ComboboxValueState = { value: inputValue };
+
+  return useRenderElement(Text, componentProps, {
+    state,
+    ref,
+    props: [{ children: children ?? inputValue }, elementProps],
+  });
+}
+
+export interface ComboboxValueState {
+  value: string;
+}
+
+export interface ComboboxValueProps
+  extends Omit<ZestUIComponentProps<typeof Text, ComboboxValueState>, 'children'> {
+  children?: React.ReactNode;
+}
+
+export namespace ComboboxValue {
+  export type State = ComboboxValueState;
+  export type Props = ComboboxValueProps;
+}

package/src/context-menu/index.parts.ts

@@ -0,0 +1,21 @@
+export { ContextMenuRoot as Root } from './root/ContextMenuRoot';
+export { ContextMenuTrigger as Trigger } from './trigger/ContextMenuTrigger';
+export { ContextMenuPositioner as Positioner } from './positioner/ContextMenuPositioner';
+
+// A context menu is a menu anchored to a point, so every part but the Root,
+// Trigger and Positioner is the menu's own, reused unchanged.
+export { MenuPortal as Portal } from '../menu/portal/MenuPortal';
+export { MenuBackdrop as Backdrop } from '../menu/backdrop/MenuBackdrop';
+export { MenuPopup as Popup } from '../menu/popup/MenuPopup';
+export { MenuItem as Item } from '../menu/item/MenuItem';
+export { MenuLinkItem as LinkItem } from '../menu/link-item/MenuLinkItem';
+export { MenuCheckboxItem as CheckboxItem } from '../menu/checkbox-item/MenuCheckboxItem';
+export { MenuCheckboxItemIndicator as CheckboxItemIndicator } from '../menu/checkbox-item-indicator/MenuCheckboxItemIndicator';
+export { MenuRadioGroup as RadioGroup } from '../menu/radio-group/MenuRadioGroup';
+export { MenuRadioItem as RadioItem } from '../menu/radio-item/MenuRadioItem';
+export { MenuRadioItemIndicator as RadioItemIndicator } from '../menu/radio-item-indicator/MenuRadioItemIndicator';
+export { MenuGroup as Group } from '../menu/group/MenuGroup';
+export { MenuGroupLabel as GroupLabel } from '../menu/group-label/MenuGroupLabel';
+export { MenuSubmenuRoot as SubmenuRoot } from '../menu/submenu-root/MenuSubmenuRoot';
+export { MenuSubmenuTrigger as SubmenuTrigger } from '../menu/submenu-trigger/MenuSubmenuTrigger';
+export { Separator } from '../separator/Separator';

package/src/context-menu/index.ts

@@ -0,0 +1,6 @@
+export * as ContextMenu from './index.parts';
+
+export type * from './root/ContextMenuRoot';
+export type * from './trigger/ContextMenuTrigger';
+export type * from './positioner/ContextMenuPositioner';
+export { useContextMenuRootContext } from './root/ContextMenuRootContext';

package/src/context-menu/positioner/ContextMenuPositioner.tsx

@@ -0,0 +1,66 @@
+'use client';
+import * as React from 'react';
+import { View } from 'react-native';
+import { useMenuRootContext } from '../../menu/root/MenuRootContext';
+import { useMenuPortalContext } from '../../menu/portal/MenuPortalContext';
+import { MenuPositionerContext } from '../../menu/positioner/MenuPositionerContext';
+import { useContextMenuRootContext } from '../root/ContextMenuRootContext';
+import { useRenderElement } from '../../use-render/useRenderElement';
+import type { Align, Side } from '../../utils/useAnchorPositioning';
+import type { ZestUIComponentProps } from '../../types';
+
+const NO_ARROW = { current: null };
+
+/**
+ * Positions the context menu popup at the point the long press landed.
+ * Renders a `<View>`.
+ *
+ * Unlike `Menu.Positioner`, it anchors to a screen point rather than a trigger
+ * element, so there is no collision-aware floating-ui pass — the popup is placed
+ * directly at the press coordinates.
+ */
+export function ContextMenuPositioner(componentProps: ContextMenuPositioner.Props) {
+  const { render, className, style, ref, ...elementProps } = componentProps;
+
+  useMenuPortalContext();
+  const store = useMenuRootContext();
+  const { anchor } = useContextMenuRootContext();
+
+  const open = store.useState('open');
+
+  const state: ContextMenuPositionerState = { open, side: 'bottom', align: 'start' };
+
+  const contextValue: MenuPositionerContext = React.useMemo(
+    () => ({ side: 'bottom', align: 'start', arrowRef: NO_ARROW, arrowStyles: {} }),
+    [],
+  );
+
+  const element = useRenderElement(View, componentProps, {
+    state,
+    ref,
+    props: [
+      { style: { position: 'absolute' as const, left: anchor.x, top: anchor.y } },
+      elementProps,
+    ],
+  });
+
+  return (
+    <MenuPositionerContext.Provider value={contextValue}>
+      {element}
+    </MenuPositionerContext.Provider>
+  );
+}
+
+export interface ContextMenuPositionerState {
+  open: boolean;
+  side: Side;
+  align: Align;
+}
+
+export interface ContextMenuPositionerProps
+  extends ZestUIComponentProps<typeof View, ContextMenuPositionerState> {}
+
+export namespace ContextMenuPositioner {
+  export type State = ContextMenuPositionerState;
+  export type Props = ContextMenuPositionerProps;
+}

package/src/context-menu/root/ContextMenuRoot.tsx

@@ -0,0 +1,46 @@
+'use client';
+import * as React from 'react';
+import { MenuRoot } from '../../menu/root/MenuRoot';
+import { ContextMenuRootContext, type ContextMenuAnchorPoint } from './ContextMenuRootContext';
+
+/**
+ * Groups the parts of a context menu — a menu opened by long-pressing an area
+ * rather than tapping a button.
+ * Doesn't render its own element.
+ *
+ * A context menu is a `Menu.Root` anchored to the point where the long press
+ * landed instead of to a trigger element. It reuses every menu part except the
+ * trigger and positioner, which are its own.
+ *
+ * **Adapted from upstream.** The web version opens on right-click *or* long
+ * press and tracks a virtual cursor; a touch screen only has the long press.
+ */
+export function ContextMenuRoot(props: ContextMenuRoot.Props) {
+  const [anchor, setAnchor] = React.useState<ContextMenuAnchorPoint>({ x: 0, y: 0 });
+
+  const contextValue: ContextMenuRootContext = React.useMemo(
+    () => ({ anchor, setAnchor }),
+    [anchor],
+  );
+
+  return (
+    <ContextMenuRootContext.Provider value={contextValue}>
+      <MenuRoot {...props} />
+    </ContextMenuRootContext.Provider>
+  );
+}
+
+export interface ContextMenuRootState {}
+
+export interface ContextMenuRootProps
+  extends Omit<
+    MenuRoot.Props,
+    'handle' | 'triggerId' | 'defaultTriggerId' | 'children'
+  > {
+  children?: React.ReactNode;
+}
+
+export namespace ContextMenuRoot {
+  export type State = ContextMenuRootState;
+  export type Props = ContextMenuRootProps;
+}

package/src/context-menu/root/ContextMenuRootContext.ts

@@ -0,0 +1,30 @@
+'use client';
+import * as React from 'react';
+
+export interface ContextMenuAnchorPoint {
+  x: number;
+  y: number;
+}
+
+export interface ContextMenuRootContext {
+  /**
+   * The screen point the menu is anchored to — where the long press landed.
+   */
+  anchor: ContextMenuAnchorPoint;
+  setAnchor: (point: ContextMenuAnchorPoint) => void;
+}
+
+export const ContextMenuRootContext = React.createContext<ContextMenuRootContext | undefined>(
+  undefined,
+);
+
+export function useContextMenuRootContext() {
+  const context = React.useContext(ContextMenuRootContext);
+  if (context === undefined) {
+    throw new Error(
+      'Zest: ContextMenuRootContext is missing. ContextMenu parts must be placed within <ContextMenu.Root>.',
+    );
+  }
+
+  return context;
+}

package/src/context-menu/trigger/ContextMenuTrigger.tsx

@@ -0,0 +1,57 @@
+'use client';
+import { Pressable, type GestureResponderEvent } from 'react-native';
+import { useMenuRootContext } from '../../menu/root/MenuRootContext';
+import { useContextMenuRootContext } from '../root/ContextMenuRootContext';
+import { useRenderElement } from '../../use-render/useRenderElement';
+import type { ZestUIComponentProps } from '../../types';
+import { createChangeEventDetails } from '../../utils/createChangeEventDetails';
+import { REASONS } from '../../utils/reasons';
+
+/**
+ * The area that opens the context menu when long-pressed.
+ * Renders a `<Pressable>`.
+ *
+ * The long press records where it landed, and the menu's `Positioner` anchors
+ * the popup to that point.
+ */
+export function ContextMenuTrigger(componentProps: ContextMenuTrigger.Props) {
+  const { render, className, style, ref, ...elementProps } = componentProps;
+
+  const store = useMenuRootContext();
+  const { setAnchor } = useContextMenuRootContext();
+
+  const open = store.useState('open');
+
+  const state: ContextMenuTriggerState = { open };
+
+  return useRenderElement(Pressable, componentProps, {
+    state,
+    ref,
+    props: [
+      {
+        onLongPress(event: GestureResponderEvent) {
+          const { pageX, pageY } = event.nativeEvent;
+          setAnchor({ x: pageX, y: pageY });
+          store.setOpen(true, createChangeEventDetails(REASONS.triggerPress, event));
+        },
+        accessibilityHint: 'Long press for more actions',
+      },
+      elementProps,
+    ],
+  });
+}
+
+export interface ContextMenuTriggerState {
+  /**
+   * Whether the context menu is open.
+   */
+  open: boolean;
+}
+
+export interface ContextMenuTriggerProps
+  extends ZestUIComponentProps<typeof Pressable, ContextMenuTriggerState> {}
+
+export namespace ContextMenuTrigger {
+  export type State = ContextMenuTriggerState;
+  export type Props = ContextMenuTriggerProps;
+}

package/src/dialog/backdrop/DialogBackdrop.tsx

@@ -0,0 +1,50 @@
+'use client';
+import { StyleSheet, View } from 'react-native';
+import { useDialogRootContext } from '../root/DialogRootContext';
+import { useRenderElement } from '../../use-render/useRenderElement';
+import type { ZestUIComponentProps } from '../../types';
+
+/**
+ * A visual overlay behind the popup.
+ * Renders a `<View>` filling the screen.
+ *
+ * Purely presentational: it never intercepts touches. Outside-press dismissal
+ * is handled by `<Dialog.Viewport>`.
+ */
+export function DialogBackdrop(componentProps: DialogBackdrop.Props) {
+  const { render, className, style, ref, ...elementProps } = componentProps;
+
+  const store = useDialogRootContext();
+  const open = store.useState('open');
+
+  const state: DialogBackdropState = { open };
+
+  return useRenderElement(View, componentProps, {
+    state,
+    ref,
+    props: [
+      {
+        style: StyleSheet.absoluteFill,
+        pointerEvents: 'none' as const,
+        accessible: false,
+        importantForAccessibility: 'no-hide-descendants' as const,
+      },
+      elementProps,
+    ],
+  });
+}
+
+export interface DialogBackdropState {
+  /**
+   * Whether the dialog is currently open.
+   */
+  open: boolean;
+}
+
+export interface DialogBackdropProps
+  extends ZestUIComponentProps<typeof View, DialogBackdropState> {}
+
+export namespace DialogBackdrop {
+  export type State = DialogBackdropState;
+  export type Props = DialogBackdropProps;
+}

package/src/dialog/close/DialogClose.tsx

@@ -0,0 +1,77 @@
+'use client';
+import * as React from 'react';
+import { Pressable, type GestureResponderEvent } from 'react-native';
+import { useDialogRootContext } from '../root/DialogRootContext';
+import { useRenderElement } from '../../use-render/useRenderElement';
+import { useButton } from '../../internals/use-button/useButton';
+import type { ZestUIComponentProps } from '../../types';
+import { createChangeEventDetails } from '../../utils/createChangeEventDetails';
+import { REASONS } from '../../utils/reasons';
+
+/**
+ * A button that closes the dialog.
+ * Renders a `<Pressable>`.
+ */
+export function DialogClose(componentProps: DialogClose.Props) {
+  const {
+    render,
+    className,
+    style,
+    disabled = false,
+    ref,
+    ...elementProps
+  } = componentProps;
+
+  const store = useDialogRootContext();
+
+  const [pressed, setPressed] = React.useState(false);
+
+  const { getButtonProps } = useButton({ disabled });
+
+  const state: DialogCloseState = { disabled, pressed };
+
+  return useRenderElement(Pressable, componentProps, {
+    state,
+    ref,
+    props: [
+      {
+        onPress(event: GestureResponderEvent) {
+          store.setOpen(false, createChangeEventDetails(REASONS.closePress, event));
+        },
+        onPressIn() {
+          setPressed(true);
+        },
+        onPressOut() {
+          setPressed(false);
+        },
+      },
+      elementProps,
+      getButtonProps,
+    ],
+  });
+}
+
+export interface DialogCloseState {
+  /**
+   * Whether the component should ignore user interaction.
+   */
+  disabled: boolean;
+  /**
+   * Whether the close button is currently pressed.
+   */
+  pressed: boolean;
+}
+
+export interface DialogCloseProps
+  extends ZestUIComponentProps<typeof Pressable, DialogCloseState> {
+  /**
+   * Whether the component should ignore user interaction.
+   * @default false
+   */
+  disabled?: boolean | undefined;
+}
+
+export namespace DialogClose {
+  export type State = DialogCloseState;
+  export type Props = DialogCloseProps;
+}

package/src/dialog/description/DialogDescription.tsx

@@ -0,0 +1,35 @@
+'use client';
+import { Text } from 'react-native';
+import { useDialogRootContext } from '../root/DialogRootContext';
+import { useRenderElement } from '../../use-render/useRenderElement';
+import { useId } from '../../hooks/useId';
+import type { ZestUIComponentProps } from '../../types';
+
+/**
+ * A paragraph with additional information about the dialog.
+ * Renders a `<Text>`.
+ */
+export function DialogDescription(componentProps: DialogDescription.Props) {
+  const { render, className, style, nativeID: idProp, ref, ...elementProps } = componentProps;
+
+  const store = useDialogRootContext();
+
+  const id = useId(idProp ?? undefined);
+
+  store.useSyncedValueWithCleanup('descriptionElementId', id);
+
+  return useRenderElement(Text, componentProps, {
+    ref,
+    props: [{ nativeID: id }, elementProps],
+  });
+}
+
+export interface DialogDescriptionProps
+  extends ZestUIComponentProps<typeof Text, DialogDescriptionState> {}
+
+export interface DialogDescriptionState {}
+
+export namespace DialogDescription {
+  export type Props = DialogDescriptionProps;
+  export type State = DialogDescriptionState;
+}

package/src/dialog/index.parts.ts

@@ -0,0 +1,10 @@
+export { DialogBackdrop as Backdrop } from './backdrop/DialogBackdrop';
+export { DialogClose as Close } from './close/DialogClose';
+export { DialogDescription as Description } from './description/DialogDescription';
+export { DialogPopup as Popup } from './popup/DialogPopup';
+export { DialogPortal as Portal } from './portal/DialogPortal';
+export { DialogRoot as Root } from './root/DialogRoot';
+export { createDialogHandle as createHandle, DialogHandle as Handle } from './store/DialogHandle';
+export { DialogViewport as Viewport } from './viewport/DialogViewport';
+export { DialogTitle as Title } from './title/DialogTitle';
+export { DialogTrigger as Trigger } from './trigger/DialogTrigger';

package/src/dialog/index.ts

@@ -0,0 +1,12 @@
+export * as Dialog from './index.parts';
+
+export type * from './root/DialogRoot';
+export { createDialogHandle, DialogHandle } from './store/DialogHandle';
+export type * from './trigger/DialogTrigger';
+export type * from './portal/DialogPortal';
+export type * from './backdrop/DialogBackdrop';
+export type * from './viewport/DialogViewport';
+export type * from './popup/DialogPopup';
+export type * from './title/DialogTitle';
+export type * from './description/DialogDescription';
+export type * from './close/DialogClose';