@limonify/zest-ui 0.1.0

package/src/store/createSelector.ts

@@ -0,0 +1,137 @@
+type Selector<State> = (state: State, ...args: any[]) => unknown;
+
+type Fn = (...args: any[]) => any;
+/**
+ * The NoOptionalParams type is a utility type that checks if a function has optional or default parameters.
+ * If the function has optional or default parameters, it returns a string literal type with an error message.
+ * Otherwise, it returns the original function type.
+ *
+ * This is used to enforce that the combiner function passed to createSelector does not have optional or default parameters,
+ * as memoization relies on the Function.length property, which does not account for optional or default parameters.
+ */
+type NoOptionalParams<F extends Fn> =
+  Parameters<F> extends Required<Parameters<F>>
+    ? F
+    : 'Combiner cannot have optional or default parameters because memoization relies on Function.length';
+
+export type CreateSelectorFunction = <
+  const Args extends any[],
+  const Selectors extends ReadonlyArray<Selector<any>>,
+  const Combiner extends (...args: readonly [...ReturnTypes<Selectors>, ...Args]) => any,
+>(
+  ...items: [...Selectors, NoOptionalParams<Combiner>]
+) => (
+  ...args: Selectors['length'] extends 0
+    ? MergeParams<ReturnTypes<Selectors>, Parameters<Combiner>>
+    : [
+        StateFromSelectorList<Selectors>,
+        ...MergeParams<ReturnTypes<Selectors>, Parameters<Combiner>>,
+      ]
+) => ReturnType<Combiner>;
+
+type StateFromSelectorList<Selectors extends readonly any[]> = Selectors extends [
+  f: infer F,
+  ...other: infer R,
+]
+  ? StateFromSelector<F> extends StateFromSelectorList<R>
+    ? StateFromSelector<F>
+    : StateFromSelectorList<R>
+  : {};
+
+type StateFromSelector<T> = T extends (first: infer F, ...args: any[]) => any ? F : never;
+
+type DropFirst<T> = T extends [any, ...infer Xs] ? Xs : [];
+
+type ReturnTypes<FunctionsArray extends readonly Fn[]> = {
+  [Index in keyof FunctionsArray]: FunctionsArray[Index] extends FunctionsArray[number]
+    ? ReturnType<FunctionsArray[Index]>
+    : never;
+};
+
+type MergeParams<
+  STypes extends readonly unknown[],
+  CTypes extends readonly unknown[],
+> = STypes['length'] extends 0 ? CTypes : MergeParams<DropFirst<STypes>, DropFirst<CTypes>>;
+
+/**
+ * Creates a selector function that can be used to derive values from the store's state.
+ *
+ * The combiner function can have up to three additional parameters, but it **cannot have optional or default parameters**.
+ *
+ * This function accepts up to six functions and combines them into a single selector function.
+ * The resulting selector will take the state from the combined selectors and any additional parameters required by the combiner.
+ *
+ * The return type of the resulting selector is determined by the return type of the combiner function.
+ *
+ * @example
+ * const selector = createSelector(
+ *  (state) => state.disabled
+ * );
+ *
+ * @example
+ * const selector = createSelector(
+ *   (state) => state.disabled,
+ *   (state) => state.open,
+ *   (disabled, open) => ({ disabled, open })
+ * );
+ */
+/* eslint-disable id-denylist */
+export const createSelector = ((
+  a: Function,
+  b?: Function,
+  c?: Function,
+  d?: Function,
+  e?: Function,
+  f?: Function,
+  ...other: any[]
+) => {
+  if (other.length > 0) {
+    throw new Error('Unsupported number of selectors');
+  }
+
+  let selector: any;
+
+  if (a && b && c && d && e && f) {
+    selector = (state: any, a1: any, a2: any, a3: any) => {
+      const va = a(state, a1, a2, a3);
+      const vb = b(state, a1, a2, a3);
+      const vc = c(state, a1, a2, a3);
+      const vd = d(state, a1, a2, a3);
+      const ve = e(state, a1, a2, a3);
+      return f(va, vb, vc, vd, ve, a1, a2, a3);
+    };
+  } else if (a && b && c && d && e) {
+    selector = (state: any, a1: any, a2: any, a3: any) => {
+      const va = a(state, a1, a2, a3);
+      const vb = b(state, a1, a2, a3);
+      const vc = c(state, a1, a2, a3);
+      const vd = d(state, a1, a2, a3);
+      return e(va, vb, vc, vd, a1, a2, a3);
+    };
+  } else if (a && b && c && d) {
+    selector = (state: any, a1: any, a2: any, a3: any) => {
+      const va = a(state, a1, a2, a3);
+      const vb = b(state, a1, a2, a3);
+      const vc = c(state, a1, a2, a3);
+      return d(va, vb, vc, a1, a2, a3);
+    };
+  } else if (a && b && c) {
+    selector = (state: any, a1: any, a2: any, a3: any) => {
+      const va = a(state, a1, a2, a3);
+      const vb = b(state, a1, a2, a3);
+      return c(va, vb, a1, a2, a3);
+    };
+  } else if (a && b) {
+    selector = (state: any, a1: any, a2: any, a3: any) => {
+      const va = a(state, a1, a2, a3);
+      return b(va, a1, a2, a3);
+    };
+  } else if (a) {
+    selector = a;
+  } else {
+    throw new Error('Missing arguments');
+  }
+
+  return selector;
+}) as unknown as CreateSelectorFunction;
+/* eslint-enable id-denylist */

package/src/store/index.ts

@@ -0,0 +1,4 @@
+export * from './createSelector';
+export * from './useStore';
+export * from './Store';
+export * from './ReactStore';

package/src/store/useStore.ts

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import type { ReadonlyStore } from './Store';
+
+/*
+ * Simplified from Base UI's useStore: zest requires React >= 19, so the
+ * `use-sync-external-store` shim and the `fastHooks` batching layer are omitted.
+ */
+
+export function useStore<State, Value>(
+  store: ReadonlyStore<State>,
+  selector: (state: State) => Value,
+): Value;
+export function useStore<State, Value, A1>(
+  store: ReadonlyStore<State>,
+  selector: (state: State, a1: A1) => Value,
+  a1: A1,
+): Value;
+export function useStore<State, Value, A1, A2>(
+  store: ReadonlyStore<State>,
+  selector: (state: State, a1: A1, a2: A2) => Value,
+  a1: A1,
+  a2: A2,
+): Value;
+export function useStore<State, Value, A1, A2, A3>(
+  store: ReadonlyStore<State>,
+  selector: (state: State, a1: A1, a2: A2, a3: A3) => Value,
+  a1: A1,
+  a2: A2,
+  a3: A3,
+): Value;
+export function useStore(
+  store: ReadonlyStore<unknown>,
+  selector: Function,
+  a1?: unknown,
+  a2?: unknown,
+  a3?: unknown,
+): unknown {
+  const getSelection = React.useCallback(
+    () => selector(store.getSnapshot(), a1, a2, a3),
+    [store, selector, a1, a2, a3],
+  );
+
+  return React.useSyncExternalStore(store.subscribe, getSelection, getSelection);
+}

package/src/switch/index.parts.ts

@@ -0,0 +1,2 @@
+export { SwitchRoot as Root } from './root/SwitchRoot';
+export { SwitchThumb as Thumb } from './thumb/SwitchThumb';

package/src/switch/index.ts

@@ -0,0 +1,4 @@
+export * as Switch from './index.parts';
+
+export type * from './root/SwitchRoot';
+export type * from './thumb/SwitchThumb';

package/src/switch/root/SwitchRoot.tsx

@@ -0,0 +1,164 @@
+'use client';
+import * as React from 'react';
+import { Pressable, type GestureResponderEvent } from 'react-native';
+import { useControlled } from '../../hooks/useControlled';
+import { useRenderElement } from '../../use-render/useRenderElement';
+import { useButton } from '../../internals/use-button/useButton';
+import { useFieldControlRegistration } from '../../internals/field/useFieldControlRegistration';
+import type { ZestUIComponentProps } from '../../types';
+import {
+  createChangeEventDetails,
+  type ZestChangeEventDetails,
+} from '../../utils/createChangeEventDetails';
+import { REASONS } from '../../utils/reasons';
+import { SwitchRootContext } from './SwitchRootContext';
+
+/**
+ * Represents the switch itself.
+ * Renders a `<Pressable>`.
+ *
+ * Unlike the web version there is no hidden `<input>`: React Native has no
+ * native form submission, so `name`/`value`/`form` props are omitted.
+ */
+export function SwitchRoot(componentProps: SwitchRoot.Props) {
+  const {
+    checked: checkedProp,
+    className,
+    defaultChecked = false,
+    disabled: disabledProp = false,
+    onCheckedChange,
+    readOnly = false,
+    render,
+    required = false,
+    style,
+    ref,
+    ...elementProps
+  } = componentProps;
+
+  const { fieldDisabled, fieldProps, validateField } = useFieldControlRegistration();
+
+  const disabled = disabledProp || fieldDisabled;
+
+  const { getButtonProps } = useButton({ disabled });
+
+  const [checked, setCheckedState] = useControlled({
+    controlled: checkedProp,
+    default: defaultChecked,
+    name: 'Switch',
+    state: 'checked',
+  });
+
+  const state: SwitchRootState = React.useMemo(
+    () => ({
+      checked,
+      disabled,
+      readOnly,
+      required,
+    }),
+    [checked, disabled, readOnly, required],
+  );
+
+  const element = useRenderElement(Pressable, componentProps, {
+    state,
+    ref,
+    props: [
+      {
+        onPress(event: GestureResponderEvent) {
+          if (readOnly || disabled) {
+            return;
+          }
+
+          const nextChecked = !checked;
+          const eventDetails = createChangeEventDetails(REASONS.none, event);
+
+          onCheckedChange?.(nextChecked, eventDetails);
+
+          if (eventDetails.isCanceled) {
+            return;
+          }
+
+          setCheckedState(nextChecked);
+          validateField(nextChecked);
+        },
+        accessibilityRole: 'switch' as const,
+        accessibilityState: {
+          checked,
+          disabled: disabled || undefined,
+        },
+        'aria-readonly': readOnly || undefined,
+        'aria-required': required || undefined,
+        ...fieldProps,
+      },
+      elementProps,
+      getButtonProps,
+    ],
+  });
+
+  return <SwitchRootContext.Provider value={state}>{element}</SwitchRootContext.Provider>;
+}
+
+export interface SwitchRootState {
+  /**
+   * Whether the switch is currently active.
+   */
+  checked: boolean;
+  /**
+   * Whether the component should ignore user interaction.
+   */
+  disabled: boolean;
+  /**
+   * Whether the user should be unable to activate or deactivate the switch.
+   */
+  readOnly: boolean;
+  /**
+   * Whether the user must activate the switch before submitting a form.
+   */
+  required: boolean;
+}
+
+export interface SwitchRootProps
+  extends Omit<ZestUIComponentProps<typeof Pressable, SwitchRootState>, 'onPress'> {
+  /**
+   * Whether the switch is currently active.
+   *
+   * To render an uncontrolled switch, use the `defaultChecked` prop instead.
+   */
+  checked?: boolean | undefined;
+  /**
+   * Whether the switch is initially active.
+   *
+   * To render a controlled switch, use the `checked` prop instead.
+   * @default false
+   */
+  defaultChecked?: boolean | undefined;
+  /**
+   * Whether the component should ignore user interaction.
+   * @default false
+   */
+  disabled?: boolean | undefined;
+  /**
+   * Event handler called when the switch is activated or deactivated.
+   */
+  onCheckedChange?:
+    | ((checked: boolean, eventDetails: SwitchRoot.ChangeEventDetails) => void)
+    | undefined;
+  /**
+   * Whether the user should be unable to activate or deactivate the switch.
+   * @default false
+   */
+  readOnly?: boolean | undefined;
+  /**
+   * Whether the user must activate the switch before submitting a form.
+   * @default false
+   */
+  required?: boolean | undefined;
+}
+
+export type SwitchRootChangeEventReason = typeof REASONS.none;
+
+export namespace SwitchRoot {
+  export type State = SwitchRootState;
+  export type Props = SwitchRootProps;
+  export type ChangeEventReason = SwitchRootChangeEventReason;
+  export type ChangeEventDetails = ZestChangeEventDetails<SwitchRootChangeEventReason>;
+}

package/src/switch/root/SwitchRootContext.ts

@@ -0,0 +1,18 @@
+'use client';
+import * as React from 'react';
+import type { SwitchRootState } from './SwitchRoot';
+
+export type SwitchRootContext = SwitchRootState;
+
+export const SwitchRootContext = React.createContext<SwitchRootContext | undefined>(undefined);
+
+export function useSwitchRootContext() {
+  const context = React.useContext(SwitchRootContext);
+  if (context === undefined) {
+    throw new Error(
+      'Zest: SwitchRootContext is missing. Switch parts must be placed within <Switch.Root>.',
+    );
+  }
+
+  return context;
+}

package/src/switch/thumb/SwitchThumb.tsx

@@ -0,0 +1,32 @@
+'use client';
+import { View } from 'react-native';
+import { useSwitchRootContext } from '../root/SwitchRootContext';
+import { useRenderElement } from '../../use-render/useRenderElement';
+import type { SwitchRootState } from '../root/SwitchRoot';
+import type { ZestUIComponentProps } from '../../types';
+
+/**
+ * The movable part of the switch that indicates whether the switch is on or off.
+ * Renders a `<View>`.
+ */
+export function SwitchThumb(componentProps: SwitchThumb.Props) {
+  const { render, className, style, ref, ...elementProps } = componentProps;
+
+  const state = useSwitchRootContext();
+
+  return useRenderElement(View, componentProps, {
+    state,
+    ref,
+    props: elementProps,
+  });
+}
+
+export interface SwitchThumbState extends SwitchRootState {}
+
+export interface SwitchThumbProps
+  extends ZestUIComponentProps<typeof View, SwitchThumbState> {}
+
+export namespace SwitchThumb {
+  export type State = SwitchThumbState;
+  export type Props = SwitchThumbProps;
+}

package/src/tabs/index.parts.ts

@@ -0,0 +1,5 @@
+export { TabsRoot as Root } from './root/TabsRoot';
+export { TabsList as List } from './list/TabsList';
+export { TabsTab as Tab } from './tab/TabsTab';
+export { TabsIndicator as Indicator } from './indicator/TabsIndicator';
+export { TabsPanel as Panel } from './panel/TabsPanel';

package/src/tabs/index.ts

@@ -0,0 +1,8 @@
+export * as Tabs from './index.parts';
+
+export type * from './root/TabsRoot';
+export type * from './list/TabsList';
+export type * from './tab/TabsTab';
+export type * from './indicator/TabsIndicator';
+export type * from './panel/TabsPanel';
+export { useTabsRootContext } from './root/TabsRootContext';

package/src/tabs/indicator/TabsIndicator.tsx

@@ -0,0 +1,81 @@
+'use client';
+import { View } from 'react-native';
+import { useRenderElement } from '../../use-render/useRenderElement';
+import type { TabsRoot } from '../root/TabsRoot';
+import { useTabsRootContext } from '../root/TabsRootContext';
+import { useTabsListContext } from '../list/TabsListContext';
+import type { TabsTab } from '../tab/TabsTab';
+import type { ZestUIComponentProps } from '../../types';
+
+/**
+ * A visual indicator that can be styled to match the position of the currently
+ * active tab.
+ * Renders a `<View>`.
+ *
+ * Where the web version writes `--active-tab-left` and friends as CSS variables,
+ * this publishes the same numbers on its state object; position it yourself from
+ * `style={(state) => ...}`.
+ *
+ * The measurements come from each tab's `onLayout`, which reports a position
+ * relative to the tab's **parent**. They are therefore accurate when the tabs are
+ * direct children of `<Tabs.List>` — the standard structure. Wrapping tabs in
+ * intermediate views offsets them.
+ */
+export function TabsIndicator(componentProps: TabsIndicator.Props) {
+  const { className, render, style, ref, ...elementProps } = componentProps;
+
+  const { getTabMetadataByValue, orientation, tabActivationDirection, value } = useTabsRootContext();
+  const { listSize } = useTabsListContext();
+
+  const activeTabLayout = value == null ? undefined : getTabMetadataByValue(value)?.layout;
+  const isTabSelected = activeTabLayout != null;
+
+  const left = activeTabLayout?.x ?? 0;
+  const top = activeTabLayout?.y ?? 0;
+  const width = activeTabLayout?.width ?? 0;
+  const height = activeTabLayout?.height ?? 0;
+  const right = listSize ? listSize.width - left - width : 0;
+  const bottom = listSize ? listSize.height - top - height : 0;
+
+  const state: TabsIndicatorState = {
+    orientation,
+    selectedTabPosition: isTabSelected ? { left, right, top, bottom } : null,
+    selectedTabSize: isTabSelected ? { width, height } : null,
+    tabActivationDirection,
+  };
+
+  return useRenderElement(View, componentProps, {
+    state,
+    ref,
+    // Nothing to point at until a tab has been selected and measured.
+    enabled: isTabSelected,
+    props: [{ accessibilityElementsHidden: true, importantForAccessibility: 'no-hide-descendants' as const }, elementProps],
+  });
+}
+
+export interface TabsIndicatorState {
+  /**
+   * The component orientation.
+   */
+  orientation: TabsRoot.Orientation;
+  /**
+   * The position of the active tab within its list.
+   */
+  selectedTabPosition: TabsTab.Position | null;
+  /**
+   * The size of the active tab.
+   */
+  selectedTabSize: TabsTab.Size | null;
+  /**
+   * The direction used for tab activation.
+   */
+  tabActivationDirection: TabsTab.ActivationDirection;
+}
+
+export interface TabsIndicatorProps
+  extends ZestUIComponentProps<typeof View, TabsIndicatorState> {}
+
+export namespace TabsIndicator {
+  export type State = TabsIndicatorState;
+  export type Props = TabsIndicatorProps;
+}

package/src/tabs/list/TabsList.tsx

@@ -0,0 +1,62 @@
+'use client';
+import * as React from 'react';
+import { View, type LayoutChangeEvent } from 'react-native';
+import { useRenderElement } from '../../use-render/useRenderElement';
+import { CompositeList } from '../../internals/composite/list/CompositeList';
+import type { TabsRootState } from '../root/TabsRoot';
+import { useTabsRootContext } from '../root/TabsRootContext';
+import type { ZestUIComponentProps } from '../../types';
+import type { TabsTab } from '../tab/TabsTab';
+import { TabsListContext } from './TabsListContext';
+
+/**
+ * Groups the individual tab buttons.
+ * Renders a `<View>`.
+ *
+ * The web version needs a `ResizeObserver` to keep the indicator in sync; here
+ * every tab's `onLayout` already reports size changes to the `CompositeList`.
+ */
+export function TabsList(componentProps: TabsList.Props) {
+  const { className, render, style, ref, ...elementProps } = componentProps;
+
+  const { orientation, setTabMap, tabActivationDirection } = useTabsRootContext();
+
+  const [listSize, setListSize] = React.useState<{ width: number; height: number } | undefined>(
+    undefined,
+  );
+
+  const handleLayout = React.useCallback((event: LayoutChangeEvent) => {
+    const { width, height } = event.nativeEvent.layout;
+    setListSize((previous) =>
+      previous?.width === width && previous?.height === height ? previous : { width, height },
+    );
+  }, []);
+
+  const contextValue: TabsListContext = React.useMemo(() => ({ listSize }), [listSize]);
+
+  const state: TabsListState = { orientation, tabActivationDirection };
+
+  const element = useRenderElement(View, componentProps, {
+    state,
+    ref,
+    props: [
+      { accessibilityRole: 'tablist' as const, 'aria-orientation': orientation, onLayout: handleLayout },
+      elementProps,
+    ],
+  });
+
+  return (
+    <TabsListContext.Provider value={contextValue}>
+      <CompositeList<TabsTab.Metadata> onMapChange={setTabMap}>{element}</CompositeList>
+    </TabsListContext.Provider>
+  );
+}
+
+export interface TabsListState extends TabsRootState {}
+
+export interface TabsListProps extends ZestUIComponentProps<typeof View, TabsListState> {}
+
+export namespace TabsList {
+  export type State = TabsListState;
+  export type Props = TabsListProps;
+}

package/src/tabs/list/TabsListContext.ts

@@ -0,0 +1,21 @@
+'use client';
+import * as React from 'react';
+
+export interface TabsListContext {
+  /**
+   * The measured size of the list, used by the indicator to derive the active
+   * tab's distance from the right and bottom edges.
+   */
+  listSize: { width: number; height: number } | undefined;
+}
+
+export const TabsListContext = React.createContext<TabsListContext | undefined>(undefined);
+
+export function useTabsListContext() {
+  const context = React.useContext(TabsListContext);
+  if (context === undefined) {
+    throw new Error('Zest: TabsListContext is missing. Tabs parts must be placed within <Tabs.List>.');
+  }
+
+  return context;
+}