react-native-terra-ui 0.11.17 → 0.12.1

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/input/parts/InputField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InputField.d.ts","sourceRoot":"","sources":["../../../../../../src/components/input/parts/InputField.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,cAAc,EAAa,MAAM,aAAU,CAAC;AAS1D;;;;GAIG;AACH,eAAO,MAAM,UAAU,oMAuDrB,CAAC"}
+{"version":3,"file":"InputField.d.ts","sourceRoot":"","sources":["../../../../../../src/components/input/parts/InputField.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,cAAc,EAAa,MAAM,aAAU,CAAC;AAS1D;;;;GAIG;AACH,eAAO,MAAM,UAAU,oMA0DrB,CAAC"}

package/lib/typescript/src/theme/tokens/primitives.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"primitives.d.ts","sourceRoot":"","sources":["../../../../../src/theme/tokens/primitives.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0ctB,CAAC"}
+{"version":3,"file":"primitives.d.ts","sourceRoot":"","sources":["../../../../../src/theme/tokens/primitives.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8dtB,CAAC"}

package/package.json

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

package/src/components/accordion/parts/AccordionContent.tsx

@@ -0,0 +1,96 @@
+import { Children, type ComponentRef, forwardRef, type ReactNode, useEffect, useState } from "react";
+import { type LayoutChangeEvent, View, type ViewProps } from "react-native";
+
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
+import { StyleSheet } from "react-native-unistyles";
+import { scheduleOnRN } from "react-native-worklets";
+
+import { Text } from "../../text";
+import { useAccordionItem } from "../context";
+import { ACCORDION_TIMING } from "../utils";
+
+export interface AccordionContentProps extends ViewProps {
+  /** The panel body. Strings and numbers are wrapped in body text. */
+  children?: ReactNode;
+}
+
+function renderBody(children: ReactNode): ReactNode {
+  return Children.map(children, (child) => {
+    if (typeof child === "string") {
+      return child.trim().length > 0 ? (
+        <Text variant="body-md" color="text.secondary">
+          {child}
+        </Text>
+      ) : null;
+    }
+    if (typeof child === "number") {
+      return (
+        <Text variant="body-md" color="text.secondary">
+          {child}
+        </Text>
+      );
+    }
+    return child;
+  });
+}
+
+export const AccordionContent = forwardRef<ComponentRef<typeof View>, AccordionContentProps>(
+  function AccordionContent({ children, style, onLayout: onLayoutProp, ...rest }, ref) {
+    const { isExpanded } = useAccordionItem();
+
+    // The body stays mounted while open and while the close animation runs,
+    // then unmounts so a long list of closed items costs nothing.
+    const [isMounted, setIsMounted] = useState(isExpanded);
+    const progress = useSharedValue(isExpanded ? 1 : 0);
+    // The body's natural height, read from its own layout. 0 until the first
+    // measurement lands.
+    const measured = useSharedValue(0);
+
+    useEffect(() => {
+      if (isExpanded) setIsMounted(true);
+      progress.value = withTiming(isExpanded ? 1 : 0, ACCORDION_TIMING, (finished) => {
+        if (finished && !isExpanded) scheduleOnRN(setIsMounted, false);
+      });
+    }, [isExpanded, progress]);
+
+    const onLayout = (event: LayoutChangeEvent) => {
+      measured.value = event.nativeEvent.layout.height;
+      onLayoutProp?.(event);
+    };
+
+    const clip = useAnimatedStyle(() => {
+      // Before the first measurement an item that starts open takes its auto
+      // height, and one that is just opening holds at 0 for the frame it takes
+      // to measure.
+      if (measured.value === 0) {
+        return { height: progress.value === 1 ? undefined : 0, opacity: progress.value };
+      }
+      return { height: measured.value * progress.value, opacity: progress.value };
+    });
+
+    if (!isMounted) return null;
+
+    return (
+      <Animated.View style={[styles.clip, clip]}>
+        {/* Not absolutely positioned: RN children do not shrink by default, so
+            this keeps its natural height inside the clipping parent and its
+            layout reports the height to animate towards. */}
+        <View ref={ref} {...rest} onLayout={onLayout} style={[styles.body, style]}>
+          {renderBody(children)}
+        </View>
+      </Animated.View>
+    );
+  }
+);
+
+// ─── Styles ───────────────────────────────────────────────────────────────────
+
+const styles = StyleSheet.create((theme) => ({
+  clip: {
+    overflow: "hidden",
+  },
+  body: {
+    gap: theme.spacing["2"],
+    paddingBottom: theme.spacing["4"],
+  },
+}));

package/src/components/accordion/parts/AccordionIndicator.tsx

@@ -0,0 +1,67 @@
+import { type ComponentRef, forwardRef, type ReactNode, useEffect } from "react";
+import type { View, ViewProps } from "react-native";
+
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
+import { StyleSheet } from "react-native-unistyles";
+
+import type { ColorToken } from "#theme/types";
+import { Icon } from "../../icon";
+import { useAccordionItem } from "../context";
+import { ACCORDION_TIMING } from "../utils";
+
+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 const AccordionIndicator = forwardRef<ComponentRef<typeof View>, AccordionIndicatorProps>(
+  function AccordionIndicator({ color = "text.secondary", size = 20, children, style, ...rest }, ref) {
+    const { isExpanded } = useAccordionItem();
+    // Seeded from the current state so an item that starts open shows its
+    // chevron already turned, with no animation on mount.
+    const progress = useSharedValue(isExpanded ? 1 : 0);
+
+    useEffect(() => {
+      progress.value = withTiming(isExpanded ? 1 : 0, ACCORDION_TIMING);
+    }, [isExpanded, progress]);
+
+    // `terra.chevron-right` is the chevron the library ships, so it is turned a
+    // quarter to point down when closed and a further half to point up when open.
+    const rotation = useAnimatedStyle(() => ({
+      transform: [{ rotate: `${90 + progress.value * 180}deg` }],
+    }));
+
+    const hasCustomContent = children !== undefined && children !== null;
+
+    return (
+      <Animated.View
+        ref={ref}
+        accessibilityElementsHidden
+        importantForAccessibility="no-hide-descendants"
+        style={[styles.indicator, hasCustomContent ? null : rotation, style]}
+        {...rest}
+      >
+        {hasCustomContent ? children : <Icon name="terra.chevron-right" color={color} size={size} />}
+      </Animated.View>
+    );
+  }
+);
+
+// ─── Styles ───────────────────────────────────────────────────────────────────
+
+const styles = StyleSheet.create(() => ({
+  // Pushes the indicator to the row's end even when the title is a custom node
+  // that does not take the free space itself.
+  indicator: {
+    marginStart: "auto",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+}));

package/src/components/accordion/parts/AccordionItem.tsx

@@ -0,0 +1,55 @@
+import { type ComponentRef, forwardRef, type ReactNode, useCallback, useMemo } from "react";
+import { View, type ViewProps } from "react-native";
+
+import { StyleSheet } from "react-native-unistyles";
+
+import { AccordionItemContext, useAccordionContext } from "../context";
+import type { AccordionItemState } from "../types";
+
+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 const AccordionItem = forwardRef<ComponentRef<typeof View>, AccordionItemProps>(function AccordionItem(
+  { value, isDisabled: isDisabledProp = false, children, style, ...rest },
+  ref
+) {
+  const { expanded, toggle: toggleValue, isDisabled: isAccordionDisabled } = useAccordionContext();
+
+  const isExpanded = expanded.includes(value);
+  const isDisabled = isAccordionDisabled || isDisabledProp;
+
+  const toggle = useCallback(() => {
+    if (!isDisabled) toggleValue(value);
+  }, [isDisabled, toggleValue, value]);
+
+  const context = useMemo(
+    () => ({ value, isExpanded, isDisabled, toggle }),
+    [value, isExpanded, isDisabled, toggle]
+  );
+
+  return (
+    <AccordionItemContext.Provider value={context}>
+      <View ref={ref} style={[styles.item, style]} {...rest}>
+        {typeof children === "function" ? children({ isExpanded, isDisabled }) : children}
+      </View>
+    </AccordionItemContext.Provider>
+  );
+});
+
+// ─── Styles ───────────────────────────────────────────────────────────────────
+
+// Present so the Unistyles Babel plugin rewrites the `View` above; a themed
+// style passed in through `style` would otherwise freeze at the theme it was
+// created under.
+const styles = StyleSheet.create(() => ({
+  item: {},
+}));