react-native-terra-ui 0.11.16 → 0.12.0

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/lib/typescript/src/components/page-indicator/hooks/use-page-indicator-window.d.ts

@@ -0,0 +1,34 @@
+import { type SharedValue } from "react-native-reanimated";
+export interface PageIndicatorWindow {
+    /** First dot index to mount, inclusive. */
+    start: number;
+    /** Last dot index to mount, inclusive. */
+    end: number;
+}
+/**
+ * The slice of dots a variant should mount, kept in step with the active page.
+ *
+ * Both variants clip to a window of `maxVisible` slots and scroll a track
+ * behind it, so all but a handful of dots are drawn outside the viewport. This
+ * is what lets them skip building those: the range covers the visible window
+ * plus a generous overscan, and moves only when the active page leaves it.
+ *
+ * **Driven by `progress`, not by `current`.** `current` may be a shared value
+ * for scroll-linked motion, in which case React never re-renders on a page
+ * change and a range derived from props would sit still while the track slid
+ * out from under it. `progress` is the one place both spellings of `current`
+ * have already been resolved into a single number.
+ *
+ * The reaction only reaches JS when the page moves *outside* the mounted range
+ * — not on every frame, and not on every page. A one-page step normally costs
+ * no render at all, because the neighbour was already mounted; a long jump
+ * costs one render per window it crosses rather than one per page.
+ *
+ * Known limit: during a jump of many pages the track slides faster than the
+ * range is re-rendered, so dots in the middle of that flight may not be mounted
+ * as they pass. They are identical inactive dots moving too fast to read, and
+ * the alternative — mounting every page between the two — is the cost this
+ * exists to avoid.
+ */
+export declare function usePageIndicatorWindow(count: number, current: number | SharedValue<number> | undefined, progress: SharedValue<number>, slot: number, dotSize: number, maxVisible: number, activeMainSize?: number): PageIndicatorWindow;
+//# sourceMappingURL=use-page-indicator-window.d.ts.map

package/lib/typescript/src/components/page-indicator/hooks/use-page-indicator-window.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-page-indicator-window.d.ts","sourceRoot":"","sources":["../../../../../../src/components/page-indicator/hooks/use-page-indicator-window.ts"],"names":[],"mappings":"AAEA,OAAO,EAAW,KAAK,WAAW,EAAuC,MAAM,yBAAyB,CAAC;AAIzG,MAAM,WAAW,mBAAmB;IAClC,2CAA2C;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,0CAA0C;IAC1C,GAAG,EAAE,MAAM,CAAC;CACb;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,sBAAsB,CACpC,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,MAAM,GAAG,WAAW,CAAC,MAAM,CAAC,GAAG,SAAS,EACjD,QAAQ,EAAE,WAAW,CAAC,MAAM,CAAC,EAC7B,IAAI,EAAE,MAAM,EACZ,OAAO,EAAE,MAAM,EACf,UAAU,EAAE,MAAM,EAClB,cAAc,SAAU,GACvB,mBAAmB,CAqCrB"}

package/lib/typescript/src/components/page-indicator/utils.d.ts

@@ -27,10 +27,51 @@ export declare function pageIndicatorAxisTranslateStyle(vertical: boolean, trans
 };
 /** Clips an overflowing track to the visible viewport along the main axis. */
 export declare function pageIndicatorViewportClipStyle(vertical: boolean, viewportMainSize: number, crossSize?: number): ViewStyle;
+/**
+ * Holds the room of dots a variant chose not to mount.
+ *
+ * The track keeps its full width and keeps scrolling by the same amount, so
+ * skipped dots still have to occupy their slots — otherwise the mounted ones
+ * slide up the track and the window shows the wrong pages.
+ */
+export declare function pageIndicatorSpacerStyle(vertical: boolean, mainSize: number): ViewStyle;
 /** Scale for a slot inside the window given the active slot. */
 export declare function pageIndicatorWindowSlotScale(positionInWindow: number, activeSlot: number, maxVisible: number): number;
 export declare function pageIndicatorTrackMainSize(count: number, slot: number, dotSize: number, activeMainSize?: number): number;
 export declare function pageIndicatorViewportMainSize(count: number, slot: number, dotSize: number, maxVisible: number, activeMainSize?: number): number;
 export declare function computePageIndicatorWindowTranslate(count: number, progress: number, slot: number, dotSize: number, maxVisible: number, activeMainSize?: number): number;
 export declare function pageIndicatorWindowScale(index: number, displayProgress: number, count: number, slot: number, dotSize: number, maxVisible: number, activeMainSize?: number): number;
+/**
+ * Dots kept mounted beyond each edge of the visible window.
+ *
+ * One full window's worth. The window itself is `maxVisible` slots wide, so
+ * this leaves a whole screenful of slack on either side — enough that ordinary
+ * navigation (a swipe, a few pages at a time) never outruns the mounted range
+ * between the page change and React re-rendering with a new one.
+ */
+export declare const PAGE_INDICATOR_WINDOW_OVERSCAN = 5;
+/**
+ * Which dot indices are worth mounting, inclusive, for an active page of
+ * `anchor`.
+ *
+ * An indicator draws `maxVisible` slots and clips the rest, and every dot more
+ * than one page from the active one is drawn identically — same size, same
+ * scale, same opacity, same colour. Mounting one view per page therefore costs
+ * an animated style per page to render something nobody can see: at 500 pages
+ * that is 500 worklets for five visible dots, and it lands on every page
+ * change. Bounding what is mounted is what stops the indicator's cost scaling
+ * with the length of the thing it indicates.
+ *
+ * Derived from `computePageIndicatorWindowTranslate`, the same function that
+ * positions the track, so the mounted range and the visible window cannot
+ * disagree about where the window is — including at the ends, where the
+ * translate clamps and the window stops following the active page.
+ *
+ * Below the overflow threshold every dot is visible, so the range is the whole
+ * track and nothing changes.
+ */
+export declare function pageIndicatorMountedRange(count: number, anchor: number, slot: number, dotSize: number, maxVisible: number, activeMainSize?: number, overscan?: number): {
+    start: number;
+    end: number;
+};
 //# sourceMappingURL=utils.d.ts.map

package/lib/typescript/src/components/page-indicator/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../../src/components/page-indicator/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAE3D,uDAAuD;AACvD,eAAO,MAAM,mCAAmC,MAAM,CAAC;AAEvD,0EAA0E;AAC1E,eAAO,MAAM,uCAAuC,MAAM,CAAC;AAE3D,wDAAwD;AACxD,eAAO,MAAM,sCAAsC,MAAM,CAAC;AAE1D,0EAA0E;AAC1E,eAAO,MAAM,kCAAkC,IAAI,CAAC;AAMpD,+CAA+C;AAC/C,wBAAgB,6BAA6B,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAE9E;AAED;;;;GAIG;AACH,wBAAgB,6BAA6B,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAQ9E;AAED,wBAAgB,0BAA0B,CACxC,KAAK,EAAE,MAAM,GAAG,WAAW,CAAC,MAAM,CAAC,GAClC,KAAK,IAAI,WAAW,CAAC,MAAM,CAAC,CAE9B;AAED,wEAAwE;AACxE,wBAAgB,+BAA+B,CAAC,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM;;;;;;EAKnF;AAED,8EAA8E;AAC9E,wBAAgB,8BAA8B,CAC5C,QAAQ,EAAE,OAAO,EACjB,gBAAgB,EAAE,MAAM,EACxB,SAAS,CAAC,EAAE,MAAM,GACjB,SAAS,CAcX;AAQD,gEAAgE;AAChE,wBAAgB,4BAA4B,CAC1C,gBAAgB,EAAE,MAAM,EACxB,UAAU,EAAE,MAAM,EAClB,UAAU,EAAE,MAAM,GACjB,MAAM,CA2BR;AAED,wBAAgB,0BAA0B,CACxC,KAAK,EAAE,MAAM,EACb,IAAI,EAAE,MAAM,EACZ,OAAO,EAAE,MAAM,EACf,cAAc,SAAU,GACvB,MAAM,CAER;AAED,wBAAgB,6BAA6B,CAC3C,KAAK,EAAE,MAAM,EACb,IAAI,EAAE,MAAM,EACZ,OAAO,EAAE,MAAM,EACf,UAAU,EAAE,MAAM,EAClB,cAAc,SAAU,GACvB,MAAM,CAGR;AAED,wBAAgB,mCAAmC,CACjD,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,MAAM,EAChB,IAAI,EAAE,MAAM,EACZ,OAAO,EAAE,MAAM,EACf,UAAU,EAAE,MAAM,EAClB,cAAc,SAAU,GACvB,MAAM,CAUR;AAED,wBAAgB,wBAAwB,CACtC,KAAK,EAAE,MAAM,EACb,eAAe,EAAE,MAAM,EACvB,KAAK,EAAE,MAAM,EACb,IAAI,EAAE,MAAM,EACZ,OAAO,EAAE,MAAM,EACf,UAAU,EAAE,MAAM,EAClB,cAAc,SAAU,GACvB,MAAM,CAiBR"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../../src/components/page-indicator/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAE3D,uDAAuD;AACvD,eAAO,MAAM,mCAAmC,MAAM,CAAC;AAEvD,0EAA0E;AAC1E,eAAO,MAAM,uCAAuC,MAAM,CAAC;AAE3D,wDAAwD;AACxD,eAAO,MAAM,sCAAsC,MAAM,CAAC;AAE1D,0EAA0E;AAC1E,eAAO,MAAM,kCAAkC,IAAI,CAAC;AAMpD,+CAA+C;AAC/C,wBAAgB,6BAA6B,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAE9E;AAED;;;;GAIG;AACH,wBAAgB,6BAA6B,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAQ9E;AAED,wBAAgB,0BAA0B,CACxC,KAAK,EAAE,MAAM,GAAG,WAAW,CAAC,MAAM,CAAC,GAClC,KAAK,IAAI,WAAW,CAAC,MAAM,CAAC,CAE9B;AAED,wEAAwE;AACxE,wBAAgB,+BAA+B,CAAC,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM;;;;;;EAKnF;AAED,8EAA8E;AAC9E,wBAAgB,8BAA8B,CAC5C,QAAQ,EAAE,OAAO,EACjB,gBAAgB,EAAE,MAAM,EACxB,SAAS,CAAC,EAAE,MAAM,GACjB,SAAS,CAcX;AAED;;;;;;GAMG;AACH,wBAAgB,wBAAwB,CAAC,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,GAAG,SAAS,CAEvF;AAQD,gEAAgE;AAChE,wBAAgB,4BAA4B,CAC1C,gBAAgB,EAAE,MAAM,EACxB,UAAU,EAAE,MAAM,EAClB,UAAU,EAAE,MAAM,GACjB,MAAM,CA2BR;AAED,wBAAgB,0BAA0B,CACxC,KAAK,EAAE,MAAM,EACb,IAAI,EAAE,MAAM,EACZ,OAAO,EAAE,MAAM,EACf,cAAc,SAAU,GACvB,MAAM,CAER;AAED,wBAAgB,6BAA6B,CAC3C,KAAK,EAAE,MAAM,EACb,IAAI,EAAE,MAAM,EACZ,OAAO,EAAE,MAAM,EACf,UAAU,EAAE,MAAM,EAClB,cAAc,SAAU,GACvB,MAAM,CAGR;AAED,wBAAgB,mCAAmC,CACjD,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,MAAM,EAChB,IAAI,EAAE,MAAM,EACZ,OAAO,EAAE,MAAM,EACf,UAAU,EAAE,MAAM,EAClB,cAAc,SAAU,GACvB,MAAM,CAUR;AAED,wBAAgB,wBAAwB,CACtC,KAAK,EAAE,MAAM,EACb,eAAe,EAAE,MAAM,EACvB,KAAK,EAAE,MAAM,EACb,IAAI,EAAE,MAAM,EACZ,OAAO,EAAE,MAAM,EACf,UAAU,EAAE,MAAM,EAClB,cAAc,SAAU,GACvB,MAAM,CAiBR;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,8BAA8B,IAAI,CAAC;AAEhD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,yBAAyB,CACvC,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,MAAM,EACZ,OAAO,EAAE,MAAM,EACf,UAAU,EAAE,MAAM,EAClB,cAAc,SAAU,EACxB,QAAQ,SAAiC,GACxC;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,CAmBhC"}

package/lib/typescript/src/components/page-indicator/variants/DotIndicator/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/page-indicator/variants/DotIndicator/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAG3D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAgB/C,MAAM,WAAW,iBAAiB;IAChC,oDAAoD;IACpD,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC,MAAM,CAAC,CAAC;IACvC,kEAAkE;IAClE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,+BAA+B;IAC/B,WAAW,CAAC,EAAE,UAAU,CAAC;IACzB,iCAAiC;IACjC,aAAa,CAAC,EAAE,UAAU,CAAC;IAC3B,gCAAgC;IAChC,YAAY,CAAC,EAAE,UAAU,CAAC;IAC1B,0DAA0D;IAC1D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,OAAW,EACX,QAA8C,EAC9C,WAAW,EACX,aAAa,EACb,YAAY,EACZ,OAAe,EACf,QAAgB,EAChB,UAA+C,EAC/C,KAAK,GACN,EAAE,iBAAiB,+BAiEnB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/page-indicator/variants/DotIndicator/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAG3D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAiB/C,MAAM,WAAW,iBAAiB;IAChC,oDAAoD;IACpD,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC,MAAM,CAAC,CAAC;IACvC,kEAAkE;IAClE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,+BAA+B;IAC/B,WAAW,CAAC,EAAE,UAAU,CAAC;IACzB,iCAAiC;IACjC,aAAa,CAAC,EAAE,UAAU,CAAC;IAC3B,gCAAgC;IAChC,YAAY,CAAC,EAAE,UAAU,CAAC;IAC1B,0DAA0D;IAC1D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,OAAW,EACX,QAA8C,EAC9C,WAAW,EACX,aAAa,EACb,YAAY,EACZ,OAAe,EACf,QAAgB,EAChB,UAA+C,EAC/C,KAAK,GACN,EAAE,iBAAiB,+BA2EnB"}

package/lib/typescript/src/components/page-indicator/variants/PillIndicator/index.d.ts

@@ -1,4 +1,4 @@
-import type { StyleProp, ViewStyle } from "react-native";
+import { type StyleProp, type ViewStyle } from "react-native";
 import type { SharedValue } from "react-native-reanimated";
 import type { ColorToken } from "../../../../theme/types";
 export interface PillIndicatorProps {

package/lib/typescript/src/components/page-indicator/variants/PillIndicator/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/page-indicator/variants/PillIndicator/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAG3D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAc/C,MAAM,WAAW,kBAAkB;IACjC,oDAAoD;IACpD,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC,MAAM,CAAC,CAAC;IACvC,kEAAkE;IAClE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,+BAA+B;IAC/B,WAAW,CAAC,EAAE,UAAU,CAAC;IACzB,iCAAiC;IACjC,aAAa,CAAC,EAAE,UAAU,CAAC;IAC3B,sDAAsD;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,OAAW,EACX,QAA8C,EAC9C,WAAW,EACX,aAAa,EACb,QAAgB,EAChB,UAA+C,EAC/C,KAAK,GACN,EAAE,kBAAkB,+BAyEpB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/page-indicator/variants/PillIndicator/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAQ,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAG3D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAgB/C,MAAM,WAAW,kBAAkB;IACjC,oDAAoD;IACpD,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC,MAAM,CAAC,CAAC;IACvC,kEAAkE;IAClE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,+BAA+B;IAC/B,WAAW,CAAC,EAAE,UAAU,CAAC;IACzB,iCAAiC;IACjC,aAAa,CAAC,EAAE,UAAU,CAAC;IAC3B,sDAAsD;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,OAAW,EACX,QAA8C,EAC9C,WAAW,EACX,aAAa,EACb,QAAgB,EAChB,UAA+C,EAC/C,KAAK,GACN,EAAE,kBAAkB,+BAqGpB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-terra-ui",
-  "version": "0.11.16",
+  "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;
+}

package/src/components/accordion/hooks/use-accordion-core.ts

@@ -0,0 +1,51 @@
+import { useCallback, useState } from "react";
+
+import type { AccordionProps } from "../types";
+
+function toArray(value: string | string[] | null | undefined): string[] {
+  if (value == null) return [];
+  return Array.isArray(value) ? value : [value];
+}
+
+/**
+ * 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 function useAccordionCore(props: AccordionProps) {
+  const isMultiple = props.selectionMode === "multiple";
+  const isControlled = props.value !== undefined;
+  const isCollapsible = isMultiple || props.isCollapsible !== false;
+
+  const [internal, setInternal] = useState<string[]>(() => toArray(props.defaultValue));
+  const expanded = isControlled ? toArray(props.value) : internal;
+
+  const { onValueChange } = props;
+
+  const toggle = useCallback(
+    (itemValue: string) => {
+      const isOpen = expanded.includes(itemValue);
+      let next: string[];
+
+      if (isMultiple) {
+        next = isOpen ? expanded.filter((v) => v !== itemValue) : [...expanded, itemValue];
+      } else if (isOpen) {
+        if (!isCollapsible) return;
+        next = [];
+      } else {
+        next = [itemValue];
+      }
+
+      if (!isControlled) setInternal(next);
+
+      if (isMultiple) {
+        (onValueChange as ((value: string[]) => void) | undefined)?.(next);
+      } else {
+        (onValueChange as ((value: string | null) => void) | undefined)?.(next[0] ?? null);
+      }
+    },
+    [expanded, isMultiple, isCollapsible, isControlled, onValueChange]
+  );
+
+  return { expanded, toggle };
+}

package/src/components/accordion/index.ts

@@ -0,0 +1,14 @@
+export { Accordion } from "./Accordion";
+export { useAccordionItem } from "./context";
+export type { AccordionContentProps } from "./parts/AccordionContent";
+export type { AccordionIndicatorProps } from "./parts/AccordionIndicator";
+export type { AccordionItemProps } from "./parts/AccordionItem";
+export type { AccordionTriggerProps } from "./parts/AccordionTrigger";
+export type {
+  AccordionItemState,
+  AccordionMultipleProps,
+  AccordionProps,
+  AccordionSelectionMode,
+  AccordionSingleProps,
+  AccordionVariant,
+} from "./types";