react-native-terra-ui 0.11.17 → 0.12.0

package/lib/typescript/src/components/accordion/context.d.ts

@@ -0,0 +1,25 @@
+import type { AccordionItemContextValue } from "./types.js";
+export interface AccordionContextValue {
+    /** Open item values. Always an array, whatever the selection mode. */
+    expanded: readonly string[];
+    toggle: (value: string) => void;
+    isDisabled: boolean;
+}
+export declare const AccordionContext: import("react").Context<AccordionContextValue | null>;
+export declare const AccordionItemContext: import("react").Context<AccordionItemContextValue | null>;
+export declare function useAccordionContext(): AccordionContextValue;
+/**
+ * Reads the enclosing `Accordion.Item`: whether it is open or disabled, and a
+ * `toggle` that follows the accordion's selection rules. Use it to build a
+ * custom trigger or indicator.
+ *
+ * @throws When called outside an `Accordion.Item`.
+ *
+ * @example
+ * function PlusMinus() {
+ *   const { isExpanded } = useAccordionItem();
+ *   return <Icon name={isExpanded ? 'minus' : 'add'} />;
+ * }
+ */
+export declare function useAccordionItem(): AccordionItemContextValue;
+//# sourceMappingURL=context.d.ts.map

package/lib/typescript/src/components/accordion/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../../src/components/accordion/context.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,YAAS,CAAC;AAEzD,MAAM,WAAW,qBAAqB;IACpC,sEAAsE;IACtE,QAAQ,EAAE,SAAS,MAAM,EAAE,CAAC;IAC5B,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,UAAU,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,gBAAgB,uDAAoD,CAAC;AAElF,eAAO,MAAM,oBAAoB,2DAAwD,CAAC;AAE1F,wBAAgB,mBAAmB,IAAI,qBAAqB,CAM3D;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,gBAAgB,IAAI,yBAAyB,CAQ5D"}

package/lib/typescript/src/components/accordion/hooks/use-accordion-core.d.ts

@@ -0,0 +1,11 @@
+import type { AccordionProps } from "../types.js";
+/**
+ * Owns which items are open. Both modes are stored as an array so the rest of
+ * the accordion never branches on `selectionMode`; the mode only decides what a
+ * toggle does and what shape `onValueChange` receives.
+ */
+export declare function useAccordionCore(props: AccordionProps): {
+    expanded: string[];
+    toggle: (itemValue: string) => void;
+};
+//# sourceMappingURL=use-accordion-core.d.ts.map

package/lib/typescript/src/components/accordion/hooks/use-accordion-core.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-accordion-core.d.ts","sourceRoot":"","sources":["../../../../../../src/components/accordion/hooks/use-accordion-core.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAU,CAAC;AAO/C;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc;;wBAWtC,MAAM;EAyBrB"}

package/lib/typescript/src/components/accordion/index.d.ts

@@ -0,0 +1,8 @@
+export { Accordion } from "./Accordion.js";
+export { useAccordionItem } from "./context.js";
+export type { AccordionContentProps } from "./parts/AccordionContent.js";
+export type { AccordionIndicatorProps } from "./parts/AccordionIndicator.js";
+export type { AccordionItemProps } from "./parts/AccordionItem.js";
+export type { AccordionTriggerProps } from "./parts/AccordionTrigger.js";
+export type { AccordionItemState, AccordionMultipleProps, AccordionProps, AccordionSelectionMode, AccordionSingleProps, AccordionVariant, } from "./types.js";
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/components/accordion/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/accordion/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAa,CAAC;AACxC,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAW,CAAC;AAC7C,YAAY,EAAE,qBAAqB,EAAE,MAAM,6BAA0B,CAAC;AACtE,YAAY,EAAE,uBAAuB,EAAE,MAAM,+BAA4B,CAAC;AAC1E,YAAY,EAAE,kBAAkB,EAAE,MAAM,0BAAuB,CAAC;AAChE,YAAY,EAAE,qBAAqB,EAAE,MAAM,6BAA0B,CAAC;AACtE,YAAY,EACV,kBAAkB,EAClB,sBAAsB,EACtB,cAAc,EACd,sBAAsB,EACtB,oBAAoB,EACpB,gBAAgB,GACjB,MAAM,YAAS,CAAC"}

package/lib/typescript/src/components/accordion/parts/AccordionContent.d.ts

@@ -0,0 +1,8 @@
+import { type ReactNode } from "react";
+import { type ViewProps } from "react-native";
+export interface AccordionContentProps extends ViewProps {
+    /** The panel body. Strings and numbers are wrapped in body text. */
+    children?: ReactNode;
+}
+export declare const AccordionContent: import("react").ForwardRefExoticComponent<AccordionContentProps & import("react").RefAttributes<import("react-native/types_generated/src/private/webapis/dom/nodes/ReactNativeElement").default>>;
+//# sourceMappingURL=AccordionContent.d.ts.map

package/lib/typescript/src/components/accordion/parts/AccordionContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionContent.d.ts","sourceRoot":"","sources":["../../../../../../src/components/accordion/parts/AccordionContent.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA2C,KAAK,SAAS,EAAuB,MAAM,OAAO,CAAC;AACrG,OAAO,EAAgC,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAU5E,MAAM,WAAW,qBAAsB,SAAQ,SAAS;IACtD,oEAAoE;IACpE,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAsBD,eAAO,MAAM,gBAAgB,mMA+C5B,CAAC"}

package/lib/typescript/src/components/accordion/parts/AccordionIndicator.d.ts

@@ -0,0 +1,16 @@
+import { type ReactNode } from "react";
+import type { ViewProps } from "react-native";
+import type { ColorToken } from "../../../theme/types";
+export interface AccordionIndicatorProps extends Omit<ViewProps, "children"> {
+    /** Chevron color. Ignored with custom `children`. Defaults to `'text.secondary'`. */
+    color?: ColorToken;
+    /** Chevron size in dp. Ignored with custom `children`. Defaults to `20`. */
+    size?: number;
+    /**
+     * Replaces the chevron. Custom content does not rotate — read `isExpanded`
+     * from the item's render function or `useAccordionItem()` to swap it instead.
+     */
+    children?: ReactNode;
+}
+export declare const AccordionIndicator: import("react").ForwardRefExoticComponent<AccordionIndicatorProps & import("react").RefAttributes<import("react-native/types_generated/src/private/webapis/dom/nodes/ReactNativeElement").default>>;
+//# sourceMappingURL=AccordionIndicator.d.ts.map

package/lib/typescript/src/components/accordion/parts/AccordionIndicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionIndicator.d.ts","sourceRoot":"","sources":["../../../../../../src/components/accordion/parts/AccordionIndicator.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiC,KAAK,SAAS,EAAa,MAAM,OAAO,CAAC;AACjF,OAAO,KAAK,EAAQ,SAAS,EAAE,MAAM,cAAc,CAAC;AAKpD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAK/C,MAAM,WAAW,uBAAwB,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IAC1E,qFAAqF;IACrF,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,4EAA4E;IAC5E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,eAAO,MAAM,kBAAkB,qMA+B9B,CAAC"}

package/lib/typescript/src/components/accordion/parts/AccordionItem.d.ts

@@ -0,0 +1,16 @@
+import { type ReactNode } from "react";
+import { type ViewProps } from "react-native";
+import type { AccordionItemState } from "../types.js";
+export interface AccordionItemProps extends Omit<ViewProps, "children"> {
+    /** Identifies the item in the accordion's `value`. Unique within one accordion. */
+    value: string;
+    /** Disables this item only. Defaults to `false`. */
+    isDisabled?: boolean;
+    /**
+     * The item's trigger and content, or a function that receives the item's
+     * `{ isExpanded, isDisabled }` and returns them.
+     */
+    children?: ReactNode | ((state: AccordionItemState) => ReactNode);
+}
+export declare const AccordionItem: import("react").ForwardRefExoticComponent<AccordionItemProps & import("react").RefAttributes<import("react-native/types_generated/src/private/webapis/dom/nodes/ReactNativeElement").default>>;
+//# sourceMappingURL=AccordionItem.d.ts.map

package/lib/typescript/src/components/accordion/parts/AccordionItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionItem.d.ts","sourceRoot":"","sources":["../../../../../../src/components/accordion/parts/AccordionItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiC,KAAK,SAAS,EAAwB,MAAM,OAAO,CAAC;AAC5F,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAKpD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAU,CAAC;AAEnD,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IACrE,mFAAmF;IACnF,KAAK,EAAE,MAAM,CAAC;IACd,oDAAoD;IACpD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE,kBAAkB,KAAK,SAAS,CAAC,CAAC;CACnE;AAED,eAAO,MAAM,aAAa,gMAyBxB,CAAC"}

package/lib/typescript/src/components/accordion/parts/AccordionTrigger.d.ts

@@ -0,0 +1,11 @@
+import { type ReactNode } from "react";
+import { type PressableProps } from "react-native";
+export interface AccordionTriggerProps extends Omit<PressableProps, "children" | "disabled"> {
+    /**
+     * The header row. Strings and numbers become the item's title; put an
+     * `Accordion.Indicator` last to show the open state.
+     */
+    children?: ReactNode;
+}
+export declare const AccordionTrigger: import("react").ForwardRefExoticComponent<AccordionTriggerProps & import("react").RefAttributes<import("react-native/types_generated/src/private/webapis/dom/nodes/ReactNativeElement").default>>;
+//# sourceMappingURL=AccordionTrigger.d.ts.map

package/lib/typescript/src/components/accordion/parts/AccordionTrigger.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionTrigger.d.ts","sourceRoot":"","sources":["../../../../../../src/components/accordion/parts/AccordionTrigger.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA2C,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAChF,OAAO,EAAyC,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAO1F,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,cAAc,EAAE,UAAU,GAAG,UAAU,CAAC;IAC1F;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAsBD,eAAO,MAAM,gBAAgB,mMA4B5B,CAAC"}

package/lib/typescript/src/components/accordion/types.d.ts

@@ -0,0 +1,65 @@
+import type { ReactNode } from "react";
+import type { ViewProps } from "react-native";
+export type AccordionSelectionMode = "single" | "multiple";
+export type AccordionVariant = "plain" | "surface";
+interface AccordionBaseProps extends Omit<ViewProps, "children"> {
+    /**
+     * Visual treatment. `'plain'` draws the items straight onto whatever sits
+     * behind the accordion; `'surface'` puts them in a filled, rounded container.
+     * Defaults to `'plain'`.
+     */
+    variant?: AccordionVariant;
+    /** Draws a hairline rule between items. Defaults to `true`. */
+    divided?: boolean;
+    /** Disables every item. Defaults to `false`. */
+    isDisabled?: boolean;
+    /** `Accordion.Item` elements. */
+    children?: ReactNode;
+}
+export interface AccordionSingleProps extends AccordionBaseProps {
+    /**
+     * `'single'` keeps at most one item open; opening another closes the current
+     * one. Defaults to `'single'`.
+     */
+    selectionMode?: "single";
+    /**
+     * The open item, controlled. `null` means none is open — `undefined` leaves
+     * the accordion uncontrolled.
+     */
+    value?: string | null;
+    /** The item open on first render, uncontrolled. Defaults to `undefined`. */
+    defaultValue?: string;
+    /** Called with the newly open item, or `null` when the open item closes. */
+    onValueChange?: (value: string | null) => void;
+    /**
+     * Lets the open item close by pressing its trigger again. `false` keeps one
+     * item open at all times once any has been opened. Defaults to `true`.
+     */
+    isCollapsible?: boolean;
+}
+export interface AccordionMultipleProps extends AccordionBaseProps {
+    /** `'multiple'` lets any number of items be open at once. */
+    selectionMode: "multiple";
+    /** The open items, controlled. */
+    value?: string[];
+    /** The items open on first render, uncontrolled. Defaults to `[]`. */
+    defaultValue?: string[];
+    /** Called with every open item after one is toggled. */
+    onValueChange?: (value: string[]) => void;
+    /** Multiple mode can always close an item. */
+    isCollapsible?: never;
+}
+export type AccordionProps = AccordionSingleProps | AccordionMultipleProps;
+export interface AccordionItemState {
+    /** Whether the item's content is open. */
+    isExpanded: boolean;
+    /** Whether the item, or the whole accordion, is disabled. */
+    isDisabled: boolean;
+}
+export interface AccordionItemContextValue extends AccordionItemState {
+    value: string;
+    /** Opens or closes this item, following the accordion's selection rules. */
+    toggle: () => void;
+}
+export {};
+//# sourceMappingURL=types.d.ts.map

package/lib/typescript/src/components/accordion/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/accordion/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,MAAM,MAAM,sBAAsB,GAAG,QAAQ,GAAG,UAAU,CAAC;AAE3D,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,SAAS,CAAC;AAEnD,UAAU,kBAAmB,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IAC9D;;;;OAIG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,+DAA+D;IAC/D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gDAAgD;IAChD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,MAAM,WAAW,oBAAqB,SAAQ,kBAAkB;IAC9D;;;OAGG;IACH,aAAa,CAAC,EAAE,QAAQ,CAAC;IACzB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,4EAA4E;IAC5E,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,4EAA4E;IAC5E,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC/C;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,MAAM,WAAW,sBAAuB,SAAQ,kBAAkB;IAChE,6DAA6D;IAC7D,aAAa,EAAE,UAAU,CAAC;IAC1B,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,sEAAsE;IACtE,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,wDAAwD;IACxD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC1C,8CAA8C;IAC9C,aAAa,CAAC,EAAE,KAAK,CAAC;CACvB;AAED,MAAM,MAAM,cAAc,GAAG,oBAAoB,GAAG,sBAAsB,CAAC;AAE3E,MAAM,WAAW,kBAAkB;IACjC,0CAA0C;IAC1C,UAAU,EAAE,OAAO,CAAC;IACpB,6DAA6D;IAC7D,UAAU,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,yBAA0B,SAAQ,kBAAkB;IACnE,KAAK,EAAE,MAAM,CAAC;IACd,4EAA4E;IAC5E,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB"}

package/lib/typescript/src/components/accordion/utils.d.ts

@@ -0,0 +1,8 @@
+import { type WithTimingConfig } from "react-native-reanimated";
+/**
+ * Shared by the content's height and the indicator's rotation so the chevron
+ * finishes turning as the panel finishes opening. Honours the system
+ * reduce-motion setting, which makes both jump straight to their end state.
+ */
+export declare const ACCORDION_TIMING: WithTimingConfig;
+//# sourceMappingURL=utils.d.ts.map

package/lib/typescript/src/components/accordion/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../../src/components/accordion/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAwB,KAAK,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAEtF;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,EAAE,gBAI9B,CAAC"}

package/lib/typescript/src/components/badge/Badge.d.ts

@@ -1,17 +1,21 @@
 import type { BadgeProps } from "./types.js";
 /**
- * Overlays a count or status indicator on one corner of the element it wraps.
+ * A dot, or a pill carrying a count or short label.
  *
  * ```tsx
- * <Badge placement="top-right" color="danger" label={3}>
- *   <Toolbar.Button icon="bell" accessibilityLabel="Notifications" />
- * </Badge>
+ * <Text>Appearing</Text>
+ * <Badge color="secondary" size="sm" label={56} />
  * ```
  *
- * The child renders untouched — `Badge` contributes the positioning context and
- * the overlay, nothing else. A round child usually wants a negative `offset`,
- * since the corner being anchored to is the bounding box's, not the circle's.
+ * Stands on its own, inline in a row beside the text it counts. To pin one to
+ * the corner of an icon or button, wrap that element in `WithBadge`, which
+ * renders this and owns only the position.
+ *
+ * `useUnistyles` is called unconditionally, which is what subscribes this
+ * component to theme changes. The background below comes from a variant, which
+ * unistyles applies straight to the native node on a theme switch; without a
+ * re-render React would go on believing the node holds the previous theme's
+ * value. `Chip` documents the same hazard on its root.
  */
-declare const Badge: import("react").ForwardRefExoticComponent<BadgeProps & import("react").RefAttributes<import("react-native/types_generated/src/private/webapis/dom/nodes/ReactNativeElement").default>>;
-export { Badge };
+export declare const Badge: ({ label, color, size, ring, accessibilityLabel, style, ...rest }: BadgeProps) => import("react").JSX.Element;
 //# sourceMappingURL=Badge.d.ts.map

package/lib/typescript/src/components/badge/Badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../../../src/components/badge/Badge.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAS,CAAC;AAG1C;;;;;;;;;;;;GAYG;AACH,QAAA,MAAM,KAAK,wLA6BT,CAAC;AAEH,OAAO,EAAE,KAAK,EAAE,CAAC"}
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../../../src/components/badge/Badge.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,UAAU,EAAa,MAAM,YAAS,CAAC;AAsBrD;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,KAAK,GAAI,kEAQnB,UAAU,gCA4CZ,CAAC"}

package/lib/typescript/src/components/badge/WithBadge.d.ts

@@ -0,0 +1,18 @@
+import type { WithBadgeProps } from "./types.js";
+/**
+ * Pins a `Badge` to one corner of the element it wraps.
+ *
+ * ```tsx
+ * <WithBadge placement="top-right" color="danger" label={3}>
+ *   <Toolbar.Button icon="bell" accessibilityLabel="Notifications" />
+ * </WithBadge>
+ * ```
+ *
+ * The child renders untouched — `WithBadge` contributes the positioning context
+ * and the overlay, nothing else. A round child usually wants a negative
+ * `offset`, since the corner being anchored to is the bounding box's, not the
+ * circle's. For a badge that sits inline beside text, use `Badge` on its own.
+ */
+declare const WithBadge: import("react").ForwardRefExoticComponent<WithBadgeProps & import("react").RefAttributes<import("react-native/types_generated/src/private/webapis/dom/nodes/ReactNativeElement").default>>;
+export { WithBadge };
+//# sourceMappingURL=WithBadge.d.ts.map

package/lib/typescript/src/components/badge/WithBadge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WithBadge.d.ts","sourceRoot":"","sources":["../../../../../src/components/badge/WithBadge.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAS,CAAC;AAG9C;;;;;;;;;;;;;GAaG;AACH,QAAA,MAAM,SAAS,4LA6Bb,CAAC;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/lib/typescript/src/components/badge/index.d.ts

@@ -1,3 +1,4 @@
 export { Badge } from "./Badge.js";
-export type { BadgeColor, BadgePlacement, BadgeProps, BadgeSize } from "./types.js";
+export type { BadgeColor, BadgePlacement, BadgeProps, BadgeSize, WithBadgeProps } from "./types.js";
+export { WithBadge } from "./WithBadge.js";
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/components/badge/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/badge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,YAAS,CAAC;AAChC,YAAY,EAAE,UAAU,EAAE,cAAc,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,YAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/badge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,YAAS,CAAC;AAChC,YAAY,EAAE,UAAU,EAAE,cAAc,EAAE,UAAU,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,YAAS,CAAC;AACjG,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAa,CAAC"}

package/lib/typescript/src/components/badge/types.d.ts

@@ -1,49 +1,72 @@
 import type { ReactNode } from "react";
 import type { ViewProps } from "react-native";
-/** Corner of the wrapped child the indicator is anchored to. */
+/** Corner of the wrapped child a `WithBadge` anchors its badge to. */
 export type BadgePlacement = "top-right" | "top-left" | "bottom-right" | "bottom-left";
 /** Scale of the dot, pill, and label. */
 export type BadgeSize = "sm" | "md" | "lg";
 /**
  * Semantic color scheme, or a raw CSS color literal (`#fff`, `rgb(...)`, `hsl(...)`).
- * A literal paints the indicator with that exact value and derives a readable
+ * A literal paints the badge with that exact value and derives a readable
  * foreground for the label.
  */
 export type BadgeColor = "primary" | "secondary" | "success" | "warning" | "danger" | (string & {});
-export interface BadgeProps extends ViewProps {
-    /** The element being badged. Rendered untouched; `Badge` only adds the overlay. */
+export interface BadgeProps extends Omit<ViewProps, "children"> {
+    /**
+     * Text in the badge. Omit it (or pass an empty string) for a dot.
+     * `0` renders as a label; a caller hiding a zero count leaves the badge out.
+     */
+    label?: string | number;
+    /** Semantic scheme or raw color literal. Defaults to `'danger'`. */
+    color?: BadgeColor;
+    /** Scale of the badge. Defaults to `'md'`. */
+    size?: BadgeSize;
+    /**
+     * Draws a `surface.canvas` ring around the badge, so it stays legible over
+     * whatever it overlaps. `WithBadge` turns it on. A badge inline beside text
+     * overlaps nothing, so it defaults to `false`: on a card the ring would only
+     * read as an outline.
+     */
+    ring?: boolean;
+    /**
+     * Announced in place of the label. Defaults to the label's own text; an
+     * unlabelled dot is hidden from assistive technology.
+     */
+    accessibilityLabel?: string;
+}
+export interface WithBadgeProps extends ViewProps {
+    /** The element being badged. Rendered untouched; `WithBadge` only adds the overlay. */
     children: ReactNode;
     /**
-     * Corner the indicator sits on. Defaults to `'top-right'`.
+     * Corner the badge sits on. Defaults to `'top-right'`.
      *
-     * The indicator overhangs the child, so an ancestor that clips — a `Surface`
+     * The badge overhangs the child, so an ancestor that clips — a `Surface`
      * with a radius, or a `Screen` list row — will cut it off. Pad that container
-     * by the overhang, or lift the `Badge` outside it.
+     * by the overhang, or lift the `WithBadge` outside it.
      */
     placement?: BadgePlacement;
     /**
-     * Text in the indicator. Omit it (or pass an empty string) for a dot.
+     * Text in the badge. Omit it (or pass an empty string) for a dot.
      * `0` renders as a label — use `isVisible` to suppress a zero count.
      */
     label?: string | number;
     /** Semantic scheme or raw color literal. Defaults to `'danger'`. */
     color?: BadgeColor;
-    /** Scale of the indicator. Defaults to `'md'`. */
+    /** Scale of the badge. Defaults to `'md'`. */
     size?: BadgeSize;
     /**
-     * Nudges the indicator along both axes from the corner `placement` picked.
+     * Nudges the badge along both axes from the corner `placement` picked.
      * Positive moves it away from the child's centre, negative pulls it in.
      * A number applies to both axes; `{ x, y }` sets them separately.
      *
      * The corner it anchors to is the child's **bounding box**, so a round child
-     * needs a negative offset to bring the indicator onto the visible edge — a
+     * needs a negative offset to bring the badge onto the visible edge — a
      * circle only meets its box at 45°, about `0.21 × width` away. Defaults to `0`.
      */
     offset?: number | {
         x?: number;
         y?: number;
     };
-    /** Renders the indicator. The child renders either way. Defaults to `true`. */
+    /** Renders the badge. The child renders either way. Defaults to `true`. */
     isVisible?: boolean;
     /**
      * Stretches the wrapper along its parent's cross axis, so a child that

package/lib/typescript/src/components/badge/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/badge/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,gEAAgE;AAChE,MAAM,MAAM,cAAc,GAAG,WAAW,GAAG,UAAU,GAAG,cAAc,GAAG,aAAa,CAAC;AAEvF,yCAAyC;AACzC,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE3C;;;;GAIG;AACH,MAAM,MAAM,UAAU,GAClB,SAAS,GACT,WAAW,GACX,SAAS,GACT,SAAS,GACT,QAAQ,GAER,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;AAElB,MAAM,WAAW,UAAW,SAAQ,SAAS;IAC3C,mFAAmF;IACnF,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,oEAAoE;IACpE,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,kDAAkD;IAClD,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;;;;;OAQG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG;QAAE,CAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC7C,+EAA+E;IAC/E,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/badge/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,sEAAsE;AACtE,MAAM,MAAM,cAAc,GAAG,WAAW,GAAG,UAAU,GAAG,cAAc,GAAG,aAAa,CAAC;AAEvF,yCAAyC;AACzC,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE3C;;;;GAIG;AACH,MAAM,MAAM,UAAU,GAClB,SAAS,GACT,WAAW,GACX,SAAS,GACT,SAAS,GACT,QAAQ,GAER,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;AAElB,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IAC7D;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,oEAAoE;IACpE,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,8CAA8C;IAC9C,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,MAAM,WAAW,cAAe,SAAQ,SAAS;IAC/C,uFAAuF;IACvF,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,oEAAoE;IACpE,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,8CAA8C;IAC9C,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;;;;;OAQG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG;QAAE,CAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC7C,2EAA2E;IAC3E,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B"}

package/lib/typescript/src/components/badge/utils.d.ts

@@ -3,7 +3,7 @@ export interface CustomBadgeColors {
     bg: string;
     fg: string;
 }
-/** The indicator's paint for a raw literal: the literal itself, plus a readable label. */
+/** The badge's paint for a raw literal: the literal itself, plus a readable label. */
 export declare function getCustomBadgeColors(literal: string): CustomBadgeColors;
 /**
  * `true` when `label` should render as a pill. An empty string and `undefined`
@@ -12,7 +12,7 @@ export declare function getCustomBadgeColors(literal: string): CustomBadgeColors
  */
 export declare function hasLabel(label: string | number | undefined): label is string | number;
 /**
- * Outer diameter of the dot per size. The indicator's own stylesheet repeats
+ * Outer diameter of the dot per size. The badge's own stylesheet repeats
  * these as literals — the unistyles Babel plugin reads that object statically,
  * so it cannot reference this table — and `anchorOffsetsMatchDotRadius` in the
  * test suite is what keeps the two in step.
@@ -25,7 +25,7 @@ export interface AnchorPosition {
     left?: number;
 }
 /**
- * Absolute insets for the indicator, in pure arithmetic rather than one
+ * Absolute insets for a `WithBadge`'s badge, in pure arithmetic rather than one
  * compound variant per (placement, size) cell: `offset` is an open-ended number
  * and could never be a variant condition, and nothing here touches the theme.
  *

package/lib/typescript/src/components/badge/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../../src/components/badge/utils.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,YAAS,CAAC;AAMzD,MAAM,WAAW,iBAAiB;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,0FAA0F;AAC1F,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,MAAM,GAAG,iBAAiB,CAEvE;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,KAAK,IAAI,MAAM,GAAG,MAAM,CAErF;AAED;;;;;GAKG;AACH,eAAO,MAAM,QAAQ,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAI9C,CAAC;AAEF,MAAM,WAAW,cAAc;IAC7B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;;;;;;GAQG;AACH,wBAAgB,iBAAiB,CAC/B,SAAS,EAAE,cAAc,EACzB,IAAI,EAAE,SAAS,EACf,MAAM,GAAE,MAAM,GAAG;IAAE,CAAC,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,CAAC,EAAE,MAAM,CAAA;CAAM,GAC9C,cAAc,CAkBhB"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../../src/components/badge/utils.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,YAAS,CAAC;AAMzD,MAAM,WAAW,iBAAiB;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,sFAAsF;AACtF,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,MAAM,GAAG,iBAAiB,CAEvE;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,KAAK,IAAI,MAAM,GAAG,MAAM,CAErF;AAED;;;;;GAKG;AACH,eAAO,MAAM,QAAQ,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAI9C,CAAC;AAEF,MAAM,WAAW,cAAc;IAC7B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;;;;;;GAQG;AACH,wBAAgB,iBAAiB,CAC/B,SAAS,EAAE,cAAc,EACzB,IAAI,EAAE,SAAS,EACf,MAAM,GAAE,MAAM,GAAG;IAAE,CAAC,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,CAAC,EAAE,MAAM,CAAA;CAAM,GAC9C,cAAc,CAkBhB"}

package/lib/typescript/src/components/header/parts/HeaderBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderBar.d.ts","sourceRoot":"","sources":["../../../../../../src/components/header/parts/HeaderBar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAC;AAGtE,OAAO,QAAQ,MAAM,yBAAyB,CAAC;AAO/C,OAAO,EAAuB,KAAK,kBAAkB,EAAE,MAAM,sBAAmB,CAAC;AAEjF,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,oBAAiB,CAAC;AAGzE,UAAU,cAAe,SAAQ,kBAAkB;IACjD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,cAAc,EAAE,QAAQ,GAAG,MAAM,CAAC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,kBAAkB,CAAC,eAAe,CAAC,CAAC;IACnD,UAAU,CAAC,EAAE,cAAc,CAAC,OAAO,QAAQ,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC;CAC5D;AAED,2FAA2F;AAC3F,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,OAAO,EACP,QAAQ,EACR,cAAc,EACd,KAAK,EACL,YAAY,EACZ,UAAU,EACV,aAAsB,EACtB,UAAU,EACV,SAAS,GACV,EAAE,cAAc,+BA6DhB"}
+{"version":3,"file":"HeaderBar.d.ts","sourceRoot":"","sources":["../../../../../../src/components/header/parts/HeaderBar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAC;AAGtE,OAAO,QAAQ,MAAM,yBAAyB,CAAC;AAO/C,OAAO,EAAuB,KAAK,kBAAkB,EAAE,MAAM,sBAAmB,CAAC;AAEjF,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,oBAAiB,CAAC;AAGzE,UAAU,cAAe,SAAQ,kBAAkB;IACjD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,cAAc,EAAE,QAAQ,GAAG,MAAM,CAAC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,kBAAkB,CAAC,eAAe,CAAC,CAAC;IACnD,UAAU,CAAC,EAAE,cAAc,CAAC,OAAO,QAAQ,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC;CAC5D;AAED,2FAA2F;AAC3F,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,OAAO,EACP,QAAQ,EACR,cAAc,EACd,KAAK,EACL,YAAY,EACZ,UAAU,EACV,aAAsB,EACtB,UAAU,EACV,SAAS,GACV,EAAE,cAAc,+BA2EhB"}

package/lib/typescript/src/components/index.d.ts

@@ -1,3 +1,4 @@
+export * from "./accordion/index.js";
 export * from "./avatar/index.js";
 export * from "./badge/index.js";
 export * from "./box/index.js";

package/lib/typescript/src/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAU,CAAC;AACzB,cAAc,kBAAS,CAAC;AACxB,cAAc,gBAAO,CAAC;AACtB,cAAc,mBAAU,CAAC;AACzB,cAAc,iBAAQ,CAAC;AACvB,cAAc,oBAAW,CAAC;AAC1B,cAAc,wBAAe,CAAC;AAC9B,cAAc,mBAAU,CAAC;AACzB,cAAc,iBAAQ,CAAC;AACvB,cAAc,kBAAS,CAAC;AACxB,cAAc,kBAAS,CAAC;AACxB,cAAc,2BAAkB,CAAC;AACjC,cAAc,mBAAU,CAAC;AACzB,cAAc,sBAAa,CAAC;AAC5B,cAAc,mBAAU,CAAC;AACzB,cAAc,iBAAQ,CAAC;AACvB,cAAc,oBAAW,CAAC;AAC1B,cAAc,oBAAW,CAAC;AAC1B,cAAc,iBAAQ,CAAC;AACvB,cAAc,kBAAS,CAAC;AACxB,cAAc,oBAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAa,CAAC;AAC5B,cAAc,mBAAU,CAAC;AACzB,cAAc,kBAAS,CAAC;AACxB,cAAc,gBAAO,CAAC;AACtB,cAAc,mBAAU,CAAC;AACzB,cAAc,iBAAQ,CAAC;AACvB,cAAc,oBAAW,CAAC;AAC1B,cAAc,wBAAe,CAAC;AAC9B,cAAc,mBAAU,CAAC;AACzB,cAAc,iBAAQ,CAAC;AACvB,cAAc,kBAAS,CAAC;AACxB,cAAc,kBAAS,CAAC;AACxB,cAAc,2BAAkB,CAAC;AACjC,cAAc,mBAAU,CAAC;AACzB,cAAc,sBAAa,CAAC;AAC5B,cAAc,mBAAU,CAAC;AACzB,cAAc,iBAAQ,CAAC;AACvB,cAAc,oBAAW,CAAC;AAC1B,cAAc,oBAAW,CAAC;AAC1B,cAAc,iBAAQ,CAAC;AACvB,cAAc,kBAAS,CAAC;AACxB,cAAc,oBAAW,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-terra-ui",
-  "version": "0.11.17",
+  "version": "0.12.0",
   "description": "Themeable React Native UI components built on react-native-unistyles",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",

package/src/components/accordion/Accordion.tsx

@@ -0,0 +1,116 @@
+import {
+  Children,
+  type ComponentRef,
+  Fragment,
+  forwardRef,
+  isValidElement,
+  type ReactNode,
+  useMemo,
+} from "react";
+import { View } from "react-native";
+
+import { StyleSheet } from "react-native-unistyles";
+
+import { Divider } from "../divider";
+import { AccordionContext } from "./context";
+import { useAccordionCore } from "./hooks/use-accordion-core";
+import { AccordionContent } from "./parts/AccordionContent";
+import { AccordionIndicator } from "./parts/AccordionIndicator";
+import { AccordionItem } from "./parts/AccordionItem";
+import { AccordionTrigger } from "./parts/AccordionTrigger";
+import type { AccordionProps } from "./types";
+
+/**
+ * Puts a rule between each pair of items. The rule is a sibling rather than a
+ * border on the item, because an item cannot tell whether it is the last one.
+ * A fragment counts as one child, so items spread from a fragment share no rules.
+ */
+function interleaveDividers(children: ReactNode): ReactNode {
+  const items = Children.toArray(children).filter(isValidElement);
+  return items.map((child, index) => (
+    <Fragment key={child.key ?? index}>
+      {index > 0 && <Divider />}
+      {child}
+    </Fragment>
+  ));
+}
+
+/**
+ * A vertical stack of headers that each open a panel of content.
+ *
+ * `'single'` mode (the default) keeps one item open at a time; `'multiple'`
+ * lets any number be open. Uncontrolled through `defaultValue`, or controlled
+ * through `value` + `onValueChange`.
+ *
+ * @example
+ * <Accordion defaultValue="shipping">
+ *   <Accordion.Item value="shipping">
+ *     <Accordion.Trigger>
+ *       How long does shipping take?
+ *       <Accordion.Indicator />
+ *     </Accordion.Trigger>
+ *     <Accordion.Content>3–5 business days.</Accordion.Content>
+ *   </Accordion.Item>
+ * </Accordion>
+ */
+const AccordionRoot = forwardRef<ComponentRef<typeof View>, AccordionProps>(function Accordion(props, ref) {
+  const {
+    selectionMode: _selectionMode,
+    value: _value,
+    defaultValue: _defaultValue,
+    onValueChange: _onValueChange,
+    isCollapsible: _isCollapsible,
+    variant = "plain",
+    divided = true,
+    isDisabled = false,
+    children,
+    style,
+    ...rest
+  } = props;
+
+  const { expanded, toggle } = useAccordionCore(props);
+  const context = useMemo(() => ({ expanded, toggle, isDisabled }), [expanded, toggle, isDisabled]);
+
+  styles.useVariants({ variant });
+
+  return (
+    <AccordionContext.Provider value={context}>
+      <View ref={ref} style={[styles.root, style]} {...rest}>
+        {divided ? interleaveDividers(children) : children}
+      </View>
+    </AccordionContext.Provider>
+  );
+});
+
+type AccordionComponent = typeof AccordionRoot & {
+  Item: typeof AccordionItem;
+  Trigger: typeof AccordionTrigger;
+  Indicator: typeof AccordionIndicator;
+  Content: typeof AccordionContent;
+};
+
+export const Accordion = AccordionRoot as AccordionComponent;
+Accordion.Item = AccordionItem;
+Accordion.Trigger = AccordionTrigger;
+Accordion.Indicator = AccordionIndicator;
+Accordion.Content = AccordionContent;
+
+// ─── Styles ───────────────────────────────────────────────────────────────────
+
+const styles = StyleSheet.create((theme) => ({
+  root: {
+    variants: {
+      variant: {
+        plain: {},
+        // A fixed radius rather than the registry's `surface` default: the
+        // accordion is not a `Surface`, and a configured shadow would sit oddly
+        // under a container whose height animates.
+        surface: {
+          backgroundColor: theme.color["surface.default"],
+          borderRadius: theme.radius.xl,
+          paddingHorizontal: theme.spacing["4"],
+        },
+      },
+    },
+  },
+}));

package/src/components/accordion/context.ts

@@ -0,0 +1,45 @@
+import { createContext, useContext } from "react";
+
+import type { AccordionItemContextValue } from "./types";
+
+export interface AccordionContextValue {
+  /** Open item values. Always an array, whatever the selection mode. */
+  expanded: readonly string[];
+  toggle: (value: string) => void;
+  isDisabled: boolean;
+}
+
+export const AccordionContext = createContext<AccordionContextValue | null>(null);
+
+export const AccordionItemContext = createContext<AccordionItemContextValue | null>(null);
+
+export function useAccordionContext(): AccordionContextValue {
+  const context = useContext(AccordionContext);
+  if (!context) {
+    throw new Error("Accordion.Item must be rendered inside <Accordion>.");
+  }
+  return context;
+}
+
+/**
+ * Reads the enclosing `Accordion.Item`: whether it is open or disabled, and a
+ * `toggle` that follows the accordion's selection rules. Use it to build a
+ * custom trigger or indicator.
+ *
+ * @throws When called outside an `Accordion.Item`.
+ *
+ * @example
+ * function PlusMinus() {
+ *   const { isExpanded } = useAccordionItem();
+ *   return <Icon name={isExpanded ? 'minus' : 'add'} />;
+ * }
+ */
+export function useAccordionItem(): AccordionItemContextValue {
+  const context = useContext(AccordionItemContext);
+  if (!context) {
+    throw new Error(
+      "Accordion.Trigger, Accordion.Indicator and Accordion.Content must be rendered inside <Accordion.Item>."
+    );
+  }
+  return context;
+}