@limonify/zest-ui 0.1.0

package/README.md

@@ -0,0 +1,269 @@
+# @limonify/zest-ui
+
+[![npm](https://img.shields.io/npm/v/@limonify/zest-ui.svg)](https://www.npmjs.com/package/@limonify/zest-ui)
+[![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/limonify/zest)
+[![docs](https://img.shields.io/badge/docs-zestui.limonify.com-0a0a0a)](https://zestui.limonify.com)
+
+**Base UI for React Native** — headless, unstyled, accessible primitive components.
+
+`@limonify/zest-ui` is a React Native port of [MUI Base UI](https://base-ui.com). Same compound parts (`Dialog.Popup`, `Dialog.Backdrop`), same controlled/uncontrolled patterns — adapted for touch and React Native accessibility APIs.
+
+**Zero style. Zero theme. Zero animation library.** You own the look; zest owns behaviour, state, and accessibility. Style with StyleSheet, Uniwind, NativeWind, Tamagui, or anything else.
+
+**Docs:** [zestui.limonify.com](https://zestui.limonify.com)
+
+## Why zest
+
+- **Base UI API** — familiar compound components and part names, not a Radix rename
+- **Headless** — every part renders a plain RN primitive (`View`, `Pressable`, `Text`, `TextInput`)
+- **State as style** — `style` and `className` accept a function of state (the RN counterpart of `data-*`)
+- **Accessible** — roles and states map to `accessibilityRole` / `accessibilityState` (and keep `aria-*` for RN-web)
+
+## Install
+
+```bash
+bun add @limonify/zest-ui
+# or: npm install @limonify/zest-ui
+```
+
+**Peers:** React 19+, React Native 0.79+.
+
+`Slider` and `Drawer` need `react-native-gesture-handler` (optional peer). Install it only if you use them, and wrap your app once:
+
+```bash
+bun add react-native-gesture-handler
+```
+
+```tsx
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+
+export default function App() {
+  return <GestureHandlerRootView style={{ flex: 1 }}>{/* ... */}</GestureHandlerRootView>;
+}
+```
+
+Anchored popups (`Popover`, `Tooltip`, `Menu`, `Select`, `Combobox`, …) use `@floating-ui/react-native`, which ships as a regular dependency — nothing extra to install.
+
+Full install guide: [zestui.limonify.com/docs/installation](https://zestui.limonify.com/docs/installation)
+
+## Quick start
+
+Style from state — no themes, no CSS variables:
+
+```tsx
+import { StyleSheet } from 'react-native';
+import { Switch } from '@limonify/zest-ui';
+
+export function DarkModeToggle() {
+  return (
+    <Switch.Root style={(state) => [styles.track, state.checked && styles.trackOn]}>
+      <Switch.Thumb style={(state) => [styles.thumb, state.checked && styles.thumbOn]} />
+    </Switch.Root>
+  );
+}
+
+const styles = StyleSheet.create({
+  track: { width: 44, height: 26, borderRadius: 13, backgroundColor: '#d4d4d4', padding: 3 },
+  trackOn: { backgroundColor: '#4c7a0b' },
+  thumb: { width: 20, height: 20, borderRadius: 10, backgroundColor: '#fff' },
+  thumbOn: { transform: [{ translateX: 18 }] },
+});
+```
+
+Compound overlays use the same part tree as Base UI. Portals are React Native `Modal`s:
+
+```tsx
+import { Text, StyleSheet } from 'react-native';
+import { Dialog } from '@limonify/zest-ui';
+
+export function DeleteDialog() {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger style={styles.button}>
+        <Text style={styles.buttonText}>Delete</Text>
+      </Dialog.Trigger>
+
+      <Dialog.Portal>
+        <Dialog.Backdrop style={styles.backdrop} />
+        <Dialog.Viewport style={styles.viewport}>
+          <Dialog.Popup style={styles.card}>
+            <Dialog.Title style={styles.title}>Delete file?</Dialog.Title>
+            <Dialog.Description style={styles.body}>This can't be undone.</Dialog.Description>
+            <Dialog.Close style={styles.button}>
+              <Text style={styles.buttonText}>Cancel</Text>
+            </Dialog.Close>
+          </Dialog.Popup>
+        </Dialog.Viewport>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
+
+const styles = StyleSheet.create({
+  button: {
+    alignSelf: 'flex-start',
+    backgroundColor: '#171717',
+    borderRadius: 10,
+    paddingVertical: 10,
+    paddingHorizontal: 16,
+  },
+  buttonText: { color: '#fff', fontWeight: '600' },
+  backdrop: { ...StyleSheet.absoluteFillObject, backgroundColor: 'rgba(0,0,0,0.5)' },
+  viewport: { flex: 1, alignItems: 'center', justifyContent: 'center', padding: 24 },
+  card: { width: '100%', maxWidth: 340, gap: 8, borderRadius: 16, backgroundColor: '#fff', padding: 20 },
+  title: { fontSize: 17, fontWeight: '700' },
+  body: { color: '#737373' },
+});
+```
+
+## Common props
+
+Every part accepts the same small set on top of its own API:
+
+| Prop | Role |
+| --- | --- |
+| `style` | RN style, **or** `(state) => style` |
+| `className` | String or `(state) => string` for Uniwind / NativeWind |
+| `render` | `(props, state) => ReactNode` — swap the host element, keep behaviour |
+| `ref` | Ref to the underlying element (React 19 — `ref` is a regular prop) |
+
+```tsx
+<Dialog.Trigger render={(props) => <MyButton {...props}>Open</MyButton>} />
+
+<Checkbox.Root
+  className={(state) =>
+    ['size-6 rounded border', state.checked && 'bg-lime-600'].filter(Boolean).join(' ')
+  }
+/>
+```
+
+## Toast
+
+Most components need no provider. **Toast** is the exception — it must not block the app, so it is not a `Modal`. Mount `Toast.Provider` and `Toast.Viewport` once at the root:
+
+```tsx
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import { Toast } from '@limonify/zest-ui';
+
+export default function App() {
+  return (
+    <GestureHandlerRootView style={{ flex: 1 }}>
+      <Toast.Provider timeout={4000} limit={3}>
+        <RootNavigator />
+        <Toast.Viewport style={{ paddingHorizontal: 16, paddingBottom: 48 }}>
+          {/* map toasts → Toast.Root — see https://zestui.limonify.com/docs/components/toast */}
+        </Toast.Viewport>
+      </Toast.Provider>
+    </GestureHandlerRootView>
+  );
+}
+```
+
+Skip `GestureHandlerRootView` if you use neither Slider nor Drawer; skip Toast setup if you don't use toasts.
+
+## Components
+
+32 components. Import from `@limonify/zest-ui`:
+
+```tsx
+import { Dialog, Switch, Toast } from '@limonify/zest-ui';
+```
+
+### Forms & input
+
+| Component | Parts |
+| --- | --- |
+| `Button` | — |
+| `Input` | — |
+| `Checkbox` | Root, Indicator |
+| `CheckboxGroup` | — |
+| `Radio` | Root, Indicator |
+| `RadioGroup` | — |
+| `Switch` | Root, Thumb |
+| `Toggle` | — |
+| `ToggleGroup` | — |
+| `Slider` | Root, Label, Value, Control, Track, Indicator, Thumb |
+| `NumberField` | Root, Group, Input, Increment, Decrement, ScrubArea |
+| `OTPField` | Root, Input, Separator |
+| `Field` | Root, Label, Control, Description, Error, Validity |
+| `Fieldset` | Root, Legend |
+| `Select` | Root, Label, Trigger, Value, Icon, Portal, Backdrop, Positioner, Arrow, Popup, List, Group, GroupLabel, Item, ItemText, ItemIndicator, Separator |
+| `Combobox` | Root, Input, Portal, Backdrop, Positioner, Popup, List, Item, Empty, Value |
+| `Autocomplete` | Root, Input, Portal, Backdrop, Positioner, Popup, List, Item, Empty |
+
+### Disclosure
+
+| Component | Parts |
+| --- | --- |
+| `Collapsible` | Root, Trigger, Panel |
+| `Accordion` | Root, Item, Header, Trigger, Panel |
+| `Tabs` | Root, List, Tab, Indicator, Panel |
+
+### Overlays
+
+| Component | Parts |
+| --- | --- |
+| `Dialog` | Root, Trigger, Portal, Backdrop, Viewport, Popup, Title, Description, Close |
+| `AlertDialog` | same shape as Dialog |
+| `Drawer` | Root, Trigger, Portal, Backdrop, Viewport, Popup, SwipeArea, Title, Description, Close |
+| `Popover` | Root, Trigger, Portal, Backdrop, Positioner, Popup, Arrow, Title, Description, Close |
+| `Tooltip` | Root, Trigger, Portal, Positioner, Popup, Arrow |
+| `Menu` | Root, Trigger, Portal, Backdrop, Positioner, Popup, Arrow, Item, LinkItem, CheckboxItem, RadioGroup, RadioItem, Group, GroupLabel, SubmenuRoot, SubmenuTrigger, Separator |
+| `ContextMenu` | Root, Trigger, Positioner (+ Menu item family) |
+
+### Feedback & misc
+
+| Component | Parts |
+| --- | --- |
+| `Progress` | Root, Track, Indicator, Value, Label |
+| `Meter` | Root, Track, Indicator, Label, Value |
+| `Avatar` | Root, Image, Fallback |
+| `Separator` | — |
+| `Toast` | Provider, Viewport, Root, Positioner, Arrow, Title, Description, Action, Close |
+
+Popup families also support handles (`createHandle`, detached triggers, imperative open) — see [the docs](https://zestui.limonify.com/docs) for each component.
+
+## Design notes
+
+**Portals are Modals.** Every `Portal` (Dialog, Drawer, Popover, Tooltip, Menu, Select, Combobox, …) is a React Native `Modal`. That keeps context across the portal boundary and wires Android back / Escape to dismiss. **Toast** is the exception: an absolutely positioned `View` with `pointerEvents="box-none"` so the app underneath stays usable.
+
+**State, not data attributes.** On the web, Base UI publishes `data-*` and CSS variables. In zest, state reaches you through the state object on `style` / `className` / `render` — `state.open`, `state.checked`, `state.height`, and so on.
+
+**zest never animates.** Animated parts publish `transitionStatus` and measured geometry on state; you drive `Animated` (or Reanimated) yourself. Exit animations need `keepMounted` (or the part’s equivalent, e.g. Toast’s `removeOnClose`), otherwise the tree unmounts as soon as it closes.
+
+## Not ported
+
+These Base UI pieces stay web/desktop-only:
+
+| Component | Why |
+| --- | --- |
+| `Form` | Aggregates HTML form submit validation — RN has no `<form>` submission; use `Field`’s `validate` |
+| `PreviewCard` | Hover card — no hover on touch |
+| `Menubar` | Desktop navigation pattern |
+| `NavigationMenu` | Desktop multi-level hover menu |
+| `ScrollArea` | RN already has `ScrollView` / `FlatList` |
+| `Toolbar` | Desktop toolbar / roving tabindex |
+| `CSPProvider` | Content Security Policy is web-only |
+
+## Monorepo
+
+This repository is a bun + turborepo workspace:
+
+| Path | Role |
+| --- | --- |
+| [`packages/zest-ui`](packages/zest-ui) | The publishable library |
+| [`apps/example`](apps/example) | Expo demo exercising every component |
+| [`apps/docs`](apps/docs) | Documentation site ([zestui.limonify.com](https://zestui.limonify.com)) |
+
+```bash
+bun install
+bun run test        # typecheck + tests via turbo
+bun run build
+bun run dev         # Expo example
+```
+
+The full implementation plan, milestones, and architecture notes live in [`ARCHITECTURE.md`](ARCHITECTURE.md). Contributor notes for porting components live in [`packages/zest-ui/CLAUDE.md`](packages/zest-ui/CLAUDE.md).
+
+## License
+
+MIT © [Limonify](https://github.com/limonify)

package/lib/accordion/header/AccordionHeader.d.ts

@@ -0,0 +1,17 @@
+import { View } from 'react-native';
+import type { AccordionItemState } from '../item/AccordionItem';
+import type { ZestUIComponentProps } from '../../types';
+/**
+ * A heading that labels the corresponding panel.
+ * Renders a `<View>`.
+ */
+export declare function AccordionHeader(componentProps: AccordionHeader.Props): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export interface AccordionHeaderState extends AccordionItemState {
+}
+export interface AccordionHeaderProps extends ZestUIComponentProps<typeof View, AccordionHeaderState> {
+}
+export declare namespace AccordionHeader {
+    type State = AccordionHeaderState;
+    type Props = AccordionHeaderProps;
+}
+//# sourceMappingURL=AccordionHeader.d.ts.map

package/lib/accordion/header/AccordionHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionHeader.d.ts","sourceRoot":"","sources":["../../../src/accordion/header/AccordionHeader.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAEhE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAExD;;;GAGG;AACH,wBAAgB,eAAe,CAAC,cAAc,EAAE,eAAe,CAAC,KAAK,8FAUpE;AAED,MAAM,WAAW,oBAAqB,SAAQ,kBAAkB;CAAG;AAEnE,MAAM,WAAW,oBACf,SAAQ,oBAAoB,CAAC,OAAO,IAAI,EAAE,oBAAoB,CAAC;CAAG;AAEpE,yBAAiB,eAAe,CAAC;IAC/B,KAAY,KAAK,GAAG,oBAAoB,CAAC;IACzC,KAAY,KAAK,GAAG,oBAAoB,CAAC;CAC1C"}

package/lib/accordion/header/AccordionHeader.js

@@ -0,0 +1,21 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AccordionHeader = AccordionHeader;
+const react_native_1 = require("react-native");
+const useRenderElement_1 = require("../../use-render/useRenderElement");
+const AccordionItemContext_1 = require("../item/AccordionItemContext");
+/**
+ * A heading that labels the corresponding panel.
+ * Renders a `<View>`.
+ */
+function AccordionHeader(componentProps) {
+    const { render, className, style, ref, ...elementProps } = componentProps;
+    const { state } = (0, AccordionItemContext_1.useAccordionItemContext)();
+    return (0, useRenderElement_1.useRenderElement)(react_native_1.View, componentProps, {
+        state,
+        ref,
+        props: [{ accessibilityRole: 'header', role: 'heading' }, elementProps],
+    });
+}
+//# sourceMappingURL=AccordionHeader.js.map

package/lib/accordion/header/AccordionHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionHeader.js","sourceRoot":"","sources":["../../../src/accordion/header/AccordionHeader.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;AAWb,0CAUC;AApBD,+CAAoC;AACpC,wEAAqE;AAErE,uEAAuE;AAGvE;;;GAGG;AACH,SAAgB,eAAe,CAAC,cAAqC;IACnE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,GAAG,cAAc,CAAC;IAE1E,MAAM,EAAE,KAAK,EAAE,GAAG,IAAA,8CAAuB,GAAE,CAAC;IAE5C,OAAO,IAAA,mCAAgB,EAAC,mBAAI,EAAE,cAAc,EAAE;QAC5C,KAAK;QACL,GAAG;QACH,KAAK,EAAE,CAAC,EAAE,iBAAiB,EAAE,QAAiB,EAAE,IAAI,EAAE,SAAkB,EAAE,EAAE,YAAY,CAAC;KAC1F,CAAC,CAAC;AACL,CAAC"}

package/lib/accordion/index.d.ts

@@ -0,0 +1,9 @@
+export * as Accordion from './index.parts';
+export type * from './root/AccordionRoot';
+export type * from './item/AccordionItem';
+export type * from './header/AccordionHeader';
+export type * from './trigger/AccordionTrigger';
+export type * from './panel/AccordionPanel';
+export { useAccordionRootContext } from './root/AccordionRootContext';
+export { useAccordionItemContext } from './item/AccordionItemContext';
+//# sourceMappingURL=index.d.ts.map

package/lib/accordion/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/accordion/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,SAAS,MAAM,eAAe,CAAC;AAE3C,mBAAmB,sBAAsB,CAAC;AAC1C,mBAAmB,sBAAsB,CAAC;AAC1C,mBAAmB,0BAA0B,CAAC;AAC9C,mBAAmB,4BAA4B,CAAC;AAChD,mBAAmB,wBAAwB,CAAC;AAC5C,OAAO,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AACtE,OAAO,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC"}

package/lib/accordion/index.js

@@ -0,0 +1,42 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAccordionItemContext = exports.useAccordionRootContext = exports.Accordion = void 0;
+exports.Accordion = __importStar(require("./index.parts"));
+var AccordionRootContext_1 = require("./root/AccordionRootContext");
+Object.defineProperty(exports, "useAccordionRootContext", { enumerable: true, get: function () { return AccordionRootContext_1.useAccordionRootContext; } });
+var AccordionItemContext_1 = require("./item/AccordionItemContext");
+Object.defineProperty(exports, "useAccordionItemContext", { enumerable: true, get: function () { return AccordionItemContext_1.useAccordionItemContext; } });
+//# sourceMappingURL=index.js.map

package/lib/accordion/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/accordion/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,2DAA2C;AAO3C,oEAAsE;AAA7D,+HAAA,uBAAuB,OAAA;AAChC,oEAAsE;AAA7D,+HAAA,uBAAuB,OAAA"}

package/lib/accordion/index.parts.d.ts

@@ -0,0 +1,6 @@
+export { AccordionRoot as Root } from './root/AccordionRoot';
+export { AccordionItem as Item } from './item/AccordionItem';
+export { AccordionHeader as Header } from './header/AccordionHeader';
+export { AccordionTrigger as Trigger } from './trigger/AccordionTrigger';
+export { AccordionPanel as Panel } from './panel/AccordionPanel';
+//# sourceMappingURL=index.parts.d.ts.map

package/lib/accordion/index.parts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.parts.d.ts","sourceRoot":"","sources":["../../src/accordion/index.parts.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,IAAI,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,EAAE,aAAa,IAAI,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,EAAE,eAAe,IAAI,MAAM,EAAE,MAAM,0BAA0B,CAAC;AACrE,OAAO,EAAE,gBAAgB,IAAI,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACzE,OAAO,EAAE,cAAc,IAAI,KAAK,EAAE,MAAM,wBAAwB,CAAC"}

package/lib/accordion/index.parts.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Panel = exports.Trigger = exports.Header = exports.Item = exports.Root = void 0;
+var AccordionRoot_1 = require("./root/AccordionRoot");
+Object.defineProperty(exports, "Root", { enumerable: true, get: function () { return AccordionRoot_1.AccordionRoot; } });
+var AccordionItem_1 = require("./item/AccordionItem");
+Object.defineProperty(exports, "Item", { enumerable: true, get: function () { return AccordionItem_1.AccordionItem; } });
+var AccordionHeader_1 = require("./header/AccordionHeader");
+Object.defineProperty(exports, "Header", { enumerable: true, get: function () { return AccordionHeader_1.AccordionHeader; } });
+var AccordionTrigger_1 = require("./trigger/AccordionTrigger");
+Object.defineProperty(exports, "Trigger", { enumerable: true, get: function () { return AccordionTrigger_1.AccordionTrigger; } });
+var AccordionPanel_1 = require("./panel/AccordionPanel");
+Object.defineProperty(exports, "Panel", { enumerable: true, get: function () { return AccordionPanel_1.AccordionPanel; } });
+//# sourceMappingURL=index.parts.js.map

package/lib/accordion/index.parts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.parts.js","sourceRoot":"","sources":["../../src/accordion/index.parts.ts"],"names":[],"mappings":";;;AAAA,sDAA6D;AAApD,qGAAA,aAAa,OAAQ;AAC9B,sDAA6D;AAApD,qGAAA,aAAa,OAAQ;AAC9B,4DAAqE;AAA5D,yGAAA,eAAe,OAAU;AAClC,+DAAyE;AAAhE,2GAAA,gBAAgB,OAAW;AACpC,yDAAiE;AAAxD,uGAAA,cAAc,OAAS"}

package/lib/accordion/item/AccordionItem.d.ts

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import type { AccordionRootState } from '../root/AccordionRoot';
+import type { ZestUIComponentProps } from '../../types';
+import type { ZestChangeEventDetails } from '../../utils/createChangeEventDetails';
+import type { REASONS } from '../../utils/reasons';
+/**
+ * Groups an accordion header with the corresponding panel.
+ * Renders a `<View>`.
+ *
+ * Each item owns a Collapsible root context, so `Accordion.Trigger` and
+ * `Accordion.Panel` are the Collapsible parts wearing accordion semantics.
+ */
+export declare function AccordionItem<Value = any>(componentProps: AccordionItem.Props<Value>): React.JSX.Element;
+export interface AccordionItemState<Value = any> extends AccordionRootState<Value> {
+    /**
+     * Whether the accordion item's panel is currently hidden.
+     */
+    hidden: boolean;
+    /**
+     * Whether the component is open.
+     */
+    open: boolean;
+}
+export interface AccordionItemProps<Value = any> extends Omit<ZestUIComponentProps<typeof View, AccordionItemState<Value>>, 'value'> {
+    /**
+     * A unique value that identifies this accordion item.
+     * If no value is provided, a unique ID will be generated automatically.
+     */
+    value?: Value | undefined;
+    /**
+     * Whether the component should ignore user interaction.
+     * @default false
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Event handler called when the panel is opened or closed.
+     */
+    onOpenChange?: ((open: boolean, eventDetails: AccordionItem.ChangeEventDetails) => void) | undefined;
+}
+export type AccordionItemChangeEventReason = typeof REASONS.triggerPress | typeof REASONS.none;
+export type AccordionItemChangeEventDetails = ZestChangeEventDetails<AccordionItemChangeEventReason>;
+export declare namespace AccordionItem {
+    type State<TValue = any> = AccordionItemState<TValue>;
+    type Props<TValue = any> = AccordionItemProps<TValue>;
+    type ChangeEventReason = AccordionItemChangeEventReason;
+    type ChangeEventDetails = AccordionItemChangeEventDetails;
+}
+//# sourceMappingURL=AccordionItem.d.ts.map

package/lib/accordion/item/AccordionItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionItem.d.ts","sourceRoot":"","sources":["../../../src/accordion/item/AccordionItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAOpC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAEhE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,sCAAsC,CAAC;AACnF,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAGnD;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,KAAK,GAAG,GAAG,EAAE,cAAc,EAAE,aAAa,CAAC,KAAK,CAAC,KAAK,CAAC,qBAgGpF;AAED,MAAM,WAAW,kBAAkB,CAAC,KAAK,GAAG,GAAG,CAAE,SAAQ,kBAAkB,CAAC,KAAK,CAAC;IAChF;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,IAAI,EAAE,OAAO,CAAC;CACf;AAED,MAAM,WAAW,kBAAkB,CAAC,KAAK,GAAG,GAAG,CAC7C,SAAQ,IAAI,CAAC,oBAAoB,CAAC,OAAO,IAAI,EAAE,kBAAkB,CAAC,KAAK,CAAC,CAAC,EAAE,OAAO,CAAC;IACnF;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,GAAG,SAAS,CAAC;IAC1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B;;OAEG;IACH,YAAY,CAAC,EACT,CAAC,CAAC,IAAI,EAAE,OAAO,EAAE,YAAY,EAAE,aAAa,CAAC,kBAAkB,KAAK,IAAI,CAAC,GACzE,SAAS,CAAC;CACf;AAED,MAAM,MAAM,8BAA8B,GAAG,OAAO,OAAO,CAAC,YAAY,GAAG,OAAO,OAAO,CAAC,IAAI,CAAC;AAE/F,MAAM,MAAM,+BAA+B,GACzC,sBAAsB,CAAC,8BAA8B,CAAC,CAAC;AAEzD,yBAAiB,aAAa,CAAC;IAC7B,KAAY,KAAK,CAAC,MAAM,GAAG,GAAG,IAAI,kBAAkB,CAAC,MAAM,CAAC,CAAC;IAC7D,KAAY,KAAK,CAAC,MAAM,GAAG,GAAG,IAAI,kBAAkB,CAAC,MAAM,CAAC,CAAC;IAC7D,KAAY,iBAAiB,GAAG,8BAA8B,CAAC;IAC/D,KAAY,kBAAkB,GAAG,+BAA+B,CAAC;CAClE"}

package/lib/accordion/item/AccordionItem.js

@@ -0,0 +1,101 @@
+"use strict";
+'use client';
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AccordionItem = AccordionItem;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const useId_1 = require("../../hooks/useId");
+const useStableCallback_1 = require("../../hooks/useStableCallback");
+const useRenderElement_1 = require("../../use-render/useRenderElement");
+const useCollapsibleRoot_1 = require("../../collapsible/root/useCollapsibleRoot");
+const CollapsibleRootContext_1 = require("../../collapsible/root/CollapsibleRootContext");
+const AccordionRootContext_1 = require("../root/AccordionRootContext");
+const AccordionItemContext_1 = require("./AccordionItemContext");
+/**
+ * Groups an accordion header with the corresponding panel.
+ * Renders a `<View>`.
+ *
+ * Each item owns a Collapsible root context, so `Accordion.Trigger` and
+ * `Accordion.Panel` are the Collapsible parts wearing accordion semantics.
+ */
+function AccordionItem(componentProps) {
+    const { className, disabled: disabledProp = false, onOpenChange: onOpenChangeProp, render, style, value: valueProp, ref, ...elementProps } = componentProps;
+    const { disabled: contextDisabled, handleValueChange, state: rootState, value: openValues, } = (0, AccordionRootContext_1.useAccordionRootContext)();
+    const fallbackValue = (0, useId_1.useId)();
+    const value = (valueProp !== null && valueProp !== void 0 ? valueProp : fallbackValue);
+    const disabled = disabledProp || contextDisabled;
+    const isOpen = React.useMemo(() => {
+        if (!openValues) {
+            return false;
+        }
+        for (let i = 0; i < openValues.length; i += 1) {
+            if (openValues[i] === value) {
+                return true;
+            }
+        }
+        return false;
+    }, [openValues, value]);
+    const onOpenChange = (0, useStableCallback_1.useStableCallback)((nextOpen, eventDetails) => {
+        onOpenChangeProp === null || onOpenChangeProp === void 0 ? void 0 : onOpenChangeProp(nextOpen, eventDetails);
+        if (eventDetails.isCanceled) {
+            return;
+        }
+        handleValueChange(value, nextOpen, eventDetails);
+    });
+    const collapsible = (0, useCollapsibleRoot_1.useCollapsibleRoot)({ open: isOpen, onOpenChange, disabled });
+    const collapsibleState = React.useMemo(() => ({
+        open: collapsible.open,
+        disabled: collapsible.disabled,
+        transitionStatus: collapsible.transitionStatus,
+    }), [collapsible.open, collapsible.disabled, collapsible.transitionStatus]);
+    const collapsibleContext = React.useMemo(() => ({ ...collapsible, onOpenChange, state: collapsibleState }), [collapsible, collapsibleState, onOpenChange]);
+    const state = React.useMemo(() => ({
+        ...rootState,
+        hidden: !isOpen && !collapsible.mounted,
+        disabled,
+        open: isOpen,
+    }), [collapsible.mounted, disabled, isOpen, rootState]);
+    const triggerId = (0, useId_1.useId)();
+    const accordionItemContext = React.useMemo(() => ({ open: isOpen, state, triggerId }), [isOpen, state, triggerId]);
+    const element = (0, useRenderElement_1.useRenderElement)(react_native_1.View, componentProps, {
+        state,
+        ref,
+        props: elementProps,
+    });
+    return ((0, jsx_runtime_1.jsx)(CollapsibleRootContext_1.CollapsibleRootContext.Provider, { value: collapsibleContext, children: (0, jsx_runtime_1.jsx)(AccordionItemContext_1.AccordionItemContext.Provider, { value: accordionItemContext, children: element }) }));
+}
+//# sourceMappingURL=AccordionItem.js.map

package/lib/accordion/item/AccordionItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionItem.js","sourceRoot":"","sources":["../../../src/accordion/item/AccordionItem.tsx"],"names":[],"mappings":"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"}

package/lib/accordion/item/AccordionItemContext.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import type { AccordionItemState } from './AccordionItem';
+export interface AccordionItemContext {
+    open: boolean;
+    state: AccordionItemState;
+    triggerId: string | undefined;
+}
+export declare const AccordionItemContext: React.Context<AccordionItemContext | undefined>;
+export declare function useAccordionItemContext(): AccordionItemContext;
+//# sourceMappingURL=AccordionItemContext.d.ts.map

package/lib/accordion/item/AccordionItemContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionItemContext.d.ts","sourceRoot":"","sources":["../../../src/accordion/item/AccordionItemContext.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAE1D,MAAM,WAAW,oBAAoB;IACnC,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,kBAAkB,CAAC;IAC1B,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;CAC/B;AAED,eAAO,MAAM,oBAAoB,iDAEhC,CAAC;AAEF,wBAAgB,uBAAuB,yBAStC"}

package/lib/accordion/item/AccordionItemContext.js

@@ -0,0 +1,48 @@
+"use strict";
+'use client';
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AccordionItemContext = void 0;
+exports.useAccordionItemContext = useAccordionItemContext;
+const React = __importStar(require("react"));
+exports.AccordionItemContext = React.createContext(undefined);
+function useAccordionItemContext() {
+    const context = React.useContext(exports.AccordionItemContext);
+    if (context === undefined) {
+        throw new Error('Zest: AccordionItemContext is missing. Accordion parts must be placed within <Accordion.Item>.');
+    }
+    return context;
+}
+//# sourceMappingURL=AccordionItemContext.js.map

package/lib/accordion/item/AccordionItemContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionItemContext.js","sourceRoot":"","sources":["../../../src/accordion/item/AccordionItemContext.ts"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcb,0DASC;AAtBD,6CAA+B;AASlB,QAAA,oBAAoB,GAAG,KAAK,CAAC,aAAa,CACrD,SAAS,CACV,CAAC;AAEF,SAAgB,uBAAuB;IACrC,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,4BAAoB,CAAC,CAAC;IACvD,IAAI,OAAO,KAAK,SAAS,EAAE,CAAC;QAC1B,MAAM,IAAI,KAAK,CACb,gGAAgG,CACjG,CAAC;IACJ,CAAC;IAED,OAAO,OAAO,CAAC;AACjB,CAAC"}