panelui-native 0.38.0 → 0.41.0

package/lib/typescript/src/components/ring-chart/index.d.ts

@@ -3,10 +3,10 @@
  *
  * ```tsx
  * <RingChart data={goals}>
+ *   <RingChart.Header title="Today" value="486 kcal" legend />
  *   <RingChart.Ring index={0} />
  *   <RingChart.Ring index={1} />
  *   <RingChart.Center />
- *   <RingChart.Legend />
  * </RingChart>
  * ```
  *
@@ -25,11 +25,15 @@
  *
  * ## Drawing
  *
- * Each ring is two arcs — a full-circle track and the progress over it — with
- * only the progress animated, through `strokeDasharray`. Sweeping the arc by
- * rebuilding its path would work, but a dash offset is two numbers moving on
- * an unchanged path, and it keeps the rounded cap pinned to the moving end for
- * free.
+ * Each ring is two arcs — a track and the progress over it — with only the
+ * progress animated, through `strokeDasharray`. Sweeping the arc by rebuilding
+ * its path would work, but a dash offset is two numbers moving on an unchanged
+ * path, and it keeps the rounded cap pinned to the moving end for free.
+ *
+ * The same dash pattern is what makes the other two shapes possible without any
+ * more geometry. An open gauge is the pattern cut short of the circumference
+ * and the whole circle turned to put the gap where it is wanted; a segmented
+ * ring is the pattern repeated, one pair per tick. Both stay one `Circle`.
  *
  * Touch, not hover: a ring is selected by pressing it, and pressing the same
  * one again clears the selection. There is no equivalent of a pointer resting
@@ -65,6 +69,17 @@ export interface RingChartProps extends ViewProps {
     strokeWidth?: number;
     /** Gap between one ring and the next. */
     ringGap?: number;
+    /**
+     * Where the arcs begin, in degrees clockwise from twelve o'clock. `0` is the
+     * top, `90` the right-hand side.
+     */
+    startAngle?: number;
+    /**
+     * Where they end, on the same clock. Leaving a turn's worth between the two
+     * gives a closed ring; anything less leaves a gap and reads as a gauge —
+     * `startAngle={-90} endAngle={90}` is the half circle over the top.
+     */
+    endAngle?: number;
     /** Milliseconds for the arcs to sweep in. */
     animationDuration?: number;
     /** Selected ring. Leave unset to let the chart track it. */
@@ -84,10 +99,23 @@ export interface RingChartRingProps {
     color?: string;
     /** Which of the five chart tokens to take, when the datum names no colour. */
     colorIndex?: SeriesColorIndex;
-    /** Rounded ends, or square ones. */
+    /**
+     * Rounded ends, or square ones. Defaults to round, and to square when the
+     * ring is segmented — a rounded cap on a tick as long as it is wide draws a
+     * lozenge rather than a tick.
+     */
     lineCap?: 'round' | 'butt';
     /** Opacity of the track behind the arc. */
     trackOpacity?: number;
+    /**
+     * Break the ring into this many ticks, lit one at a time as the value
+     * climbs. For a target made of countable things — eight of twelve sessions
+     * reads off ticks you can count, and off a smooth arc only as "about two
+     * thirds".
+     */
+    segments?: number;
+    /** Gap between one tick and the next, in points. */
+    segmentGap?: number;
 }
 /**
  * One ring: a full-circle track, and the arc showing how far along it the
@@ -98,7 +126,7 @@ export interface RingChartRingProps {
  * — and it keeps the rounded cap pinned to the moving end without any extra
  * geometry.
  */
-declare function RingChartRing({ index, color, colorIndex, lineCap, trackOpacity, }: RingChartRingProps): import("react").JSX.Element | null;
+declare function RingChartRing({ index, color, colorIndex, lineCap, trackOpacity, segments, segmentGap, }: RingChartRingProps): import("react").JSX.Element | null;
 declare namespace RingChartRing {
     var displayName: string;
     var slot: "ring";
@@ -147,7 +175,46 @@ declare namespace RingChartLegend {
     var displayName: string;
     var slot: "overlay";
 }
+export interface RingChartHeaderProps extends ViewProps {
+    className?: string;
+    /** Small line above the value — what the chart is of. */
+    title?: string;
+    /** The readout. The largest thing on the card, and the first thing read. */
+    value?: string;
+    /** One muted line under the value — a period, a comparison, a target. */
+    caption?: string;
+    /** Prettier names for the rings, keyed by their `label`. */
+    labels?: Record<string, string>;
+    /**
+     * Draw a swatch and a name per ring along the trailing edge. Prefer this to
+     * `RingChart.Legend` on a chart that has a header: that legend hangs off the
+     * bottom of the square, where it overlaps whatever is under the chart.
+     */
+    legend?: boolean;
+    /** Trailing slot — a control, a badge, a range picker. Wins over `legend`. */
+    children?: ReactNode;
+}
+/**
+ * The strip above the rings: what the chart is of, what it currently reads, and
+ * what the colours mean.
+ *
+ * It belongs to the chart rather than to the card around it because it is about
+ * the *rings* — the number changes as one is selected, and the legend is the
+ * list the chart itself is holding. The card's header is a caption on the tray
+ * the chart sits in; this is the chart introducing itself.
+ *
+ * The value is not derived here. There is no total to derive: the rings measure
+ * different things against different targets. Take it from `onActiveIndexChange`
+ * and pass the formatted string down, so one header can show the headline figure
+ * when nothing is selected and a ring's own when something is.
+ */
+declare function RingChartHeader({ className, title, value, caption, labels, legend, children, ...props }: RingChartHeaderProps): import("react").JSX.Element;
+declare namespace RingChartHeader {
+    var displayName: string;
+    var slot: "header";
+}
 export declare const RingChart: import("react").ForwardRefExoticComponent<RingChartProps & import("react").RefAttributes<RingChartHandle>> & {
+    Header: typeof RingChartHeader;
     Ring: typeof RingChartRing;
     Center: typeof RingChartCenter;
     Legend: typeof RingChartLegend;

package/lib/typescript/src/components/ring-chart/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/ring-chart/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,OAAO,EAWL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAA2C,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAWvF,OAAO,EAAiC,KAAK,gBAAgB,EAAE,MAAM,sBAAmB,CAAC;AAKzF,sEAAsE;AACtE,MAAM,WAAW,SAAS;IACxB,kDAAkD;IAClD,KAAK,EAAE,MAAM,CAAC;IACd,kCAAkC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,sEAAsE;IACtE,QAAQ,EAAE,MAAM,CAAC;IACjB,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAyBD,kEAAkE;AAClE,wBAAgB,YAAY;;;EAM3B;AAED,MAAM,WAAW,cAAe,SAAQ,SAAS;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2CAA2C;IAC3C,IAAI,EAAE,SAAS,EAAE,CAAC;IAClB,0EAA0E;IAC1E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,8BAA8B;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yCAAyC;IACzC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,6CAA6C;IAC7C,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,4DAA4D;IAC5D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2EAA2E;IAC3E,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,mEAAmE;AACnE,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAuJD,MAAM,WAAW,kBAAkB;IACjC,6CAA6C;IAC7C,KAAK,EAAE,MAAM,CAAC;IACd,6DAA6D;IAC7D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8EAA8E;IAC9E,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,oCAAoC;IACpC,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC3B,2CAA2C;IAC3C,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;;;;;;GAQG;AACH,iBAAS,aAAa,CAAC,EACrB,KAAK,EACL,KAAK,EACL,UAAU,EACV,OAAiB,EACjB,YAAmB,GACpB,EAAE,kBAAkB,sCA6EpB;kBAnFQ,aAAa;;;;AAuFtB,MAAM,WAAW,oBAAoB;IACnC;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,uEAAuE;IACvE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,SAAS,GAAG,IAAI,KAAK,MAAM,CAAC;IAChE;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,GAAG,IAAI,KAAK,SAAS,CAAC;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;GAQG;AACH,iBAAS,eAAe,CAAC,EACvB,YAAY,EACZ,WAAW,EACX,QAAQ,EACR,SAAS,GACV,EAAE,oBAAoB,+BAmDtB;kBAxDQ,eAAe;;;;AA4DxB,MAAM,WAAW,oBAAqB,SAAQ,SAAS;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qEAAqE;IACrE,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;;GAIG;AACH,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,SAAgB,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,sCA6CvF;kBA7CQ,eAAe;;;;AAiDxB,eAAO,MAAM,SAAS;;;;CAIpB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/ring-chart/index.tsx"],"names":[],"mappings":"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"}

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

@@ -1,13 +1,15 @@
 /**
  * Steps — a stepper for multi-step flows.
  *
- * Adapted from: origin-space/originui apps/origin/registry/default/ui/stepper.tsx
- * (the Stepper / Item / Trigger / Indicator / Title / Description / Separator
- * anatomy, and the completed | active | inactive | loading state resolution).
+ * A row or column of numbered stops, each one completed, active, inactive or
+ * loading. An item works that state out from its own position against the
+ * root's `value` rather than being told it, so the four states stay mutually
+ * exclusive and in order — there is no way to write two active steps, or to
+ * mark step four done while step three is still pending.
  *
- * Upstream drives all styling through `data-*` attributes, which React Native
- * has no equivalent for. Here the state is resolved in JS and passed down
- * through context into `tv()` variants — the same approach Alert uses.
+ * The state is resolved in JS and passed down through context into `tv()`
+ * variants, because React Native has no attribute selectors a stylesheet could
+ * key off. Alert and Timeline resolve their states the same way.
  *
  * Steps does not own your flow: it reflects whatever step your app says is
  * active. Pass `value` to control it, or `defaultValue` to let it manage

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/steps/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAAa,IAAI,EAAE,KAAK,IAAI,IAAI,MAAM,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAIpF,OAAO,EAAQ,KAAK,SAAS,EAAgB,MAAM,0BAAuB,CAAC;AAG3E,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,CAAC;AACxE,MAAM,MAAM,gBAAgB,GAAG,YAAY,GAAG,UAAU,CAAC;AAuFzD,MAAM,WAAW,UAAW,SAAQ,SAAS;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qCAAqC;IACrC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA6CD,MAAM,WAAW,cAAe,SAAQ,SAAS;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kEAAkE;IAClE,IAAI,EAAE,MAAM,CAAC;IACb,gEAAgE;IAChE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wEAAwE;IACxE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAqCD,MAAM,WAAW,iBAAkB,SAAQ,SAAS;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA0BD,MAAM,WAAW,mBAAoB,SAAQ,SAAS;IACpD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAoDD,MAAM,WAAW,mBAAoB,SAAQ,SAAS;IACpD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA4BD,eAAO,MAAM,KAAK;;;;;;;CAOhB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/steps/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AACH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAAa,IAAI,EAAE,KAAK,IAAI,IAAI,MAAM,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAIpF,OAAO,EAAQ,KAAK,SAAS,EAAgB,MAAM,0BAAuB,CAAC;AAG3E,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,CAAC;AACxE,MAAM,MAAM,gBAAgB,GAAG,YAAY,GAAG,UAAU,CAAC;AAuFzD,MAAM,WAAW,UAAW,SAAQ,SAAS;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qCAAqC;IACrC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA6CD,MAAM,WAAW,cAAe,SAAQ,SAAS;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kEAAkE;IAClE,IAAI,EAAE,MAAM,CAAC;IACb,gEAAgE;IAChE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wEAAwE;IACxE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAqCD,MAAM,WAAW,iBAAkB,SAAQ,SAAS;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA0BD,MAAM,WAAW,mBAAoB,SAAQ,SAAS;IACpD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAoDD,MAAM,WAAW,mBAAoB,SAAQ,SAAS;IACpD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA4BD,eAAO,MAAM,KAAK;;;;;;;CAOhB,CAAC"}

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

@@ -4,28 +4,37 @@
  * React Native has no table layout: no `<table>`, no column model, nothing that
  * makes the third cell of one row the same width as the third cell of the next.
  * A table here is therefore a stack of flex rows, and the columns exist only
- * because every row divides its width the same way. That is the one rule the
- * component cannot enforce for you — `flex` and `width` on a `Table.Head` and
- * on the `Table.Cell` beneath it have to agree, or the column drifts.
+ * because every row divides its width the same way.
+ *
+ * `columns` is the column model that closes that gap. Give the root one entry
+ * per column and every `Table.Head` and `Table.Cell` takes its `flex`, `width`
+ * and `align` from the entry at its own position in the row — so a column is
+ * described once, at the top, and a row is just its contents. Without it the
+ * sizing has to be repeated on every head and every cell, and the column drifts
+ * the moment two of them disagree.
+ *
+ * ```tsx
+ * <Table columns={[{ flex: 2 }, { align: 'end' }]}>
+ * ```
+ *
+ * Props set on a head or a cell still win, for the one row that has to differ.
  *
  * Everything else it does own: the hairlines between rows and the missing one
  * under the last, the muted header and footer, the striping, the alignment of a
  * numeric column, and the sort arrow that turns over rather than swapping.
  *
  * ```tsx
- * <Table variant="outline">
+ * <Table variant="outline" columns={[{ flex: 2 }, { align: 'end' }]}>
  *   <Table.Header>
  *     <Table.Row>
- *       <Table.Head flex={2}>Invoice</Table.Head>
- *       <Table.Head align="end" sortDirection="desc" onPress={toggleSort}>
- *         Amount
- *       </Table.Head>
+ *       <Table.Head>Invoice</Table.Head>
+ *       <Table.Head sortDirection="desc" onPress={toggleSort}>Amount</Table.Head>
  *     </Table.Row>
  *   </Table.Header>
  *   <Table.Body>
  *     <Table.Row>
- *       <Table.Cell flex={2}>INV-001</Table.Cell>
- *       <Table.Cell align="end">$250.00</Table.Cell>
+ *       <Table.Cell>INV-001</Table.Cell>
+ *       <Table.Cell>$250.00</Table.Cell>
  *     </Table.Row>
  *   </Table.Body>
  * </Table>
@@ -145,6 +154,23 @@ declare const tableVariants: import("tailwind-variants").TVReturnType<{
     cellLabel: string;
     caption: string;
 }, undefined, unknown, unknown, undefined>>;
+export interface TableColumn {
+    /**
+     * Share of the leftover width, relative to the other columns. Defaults to 1,
+     * so columns divide the row evenly.
+     */
+    flex?: number;
+    /**
+     * Fixed width in pixels, for a column that must not move — an icon, a state
+     * dot. Wins over `flex`.
+     */
+    width?: number;
+    /**
+     * Which edge the column's content sits against. Use `end` for numbers: a
+     * money column reads as a column only when the digits line up.
+     */
+    align?: CellAlign;
+}
 export interface TableProps extends ViewProps, VariantProps<typeof tableVariants> {
     className?: string;
     /**
@@ -157,6 +183,15 @@ export interface TableProps extends ViewProps, VariantProps<typeof tableVariants
      * for a short table, where the stripes are louder than the data.
      */
     striped?: boolean;
+    /**
+     * The column model: one entry per column, in order. Every `Table.Head` and
+     * `Table.Cell` takes its `flex`, `width` and `align` from the entry at its
+     * own position in the row, so a column is described once instead of on every
+     * row. Anything set on a head or a cell still wins.
+     *
+     * Declare it outside render — a new array each frame renumbers every cell.
+     */
+    columns?: TableColumn[];
     children?: ReactNode;
 }
 export interface TableHeaderProps extends ViewProps {
@@ -193,13 +228,14 @@ export interface TableHeadProps extends Omit<ViewProps, 'children'> {
     className?: string;
     /**
      * Share of the leftover width, relative to the other cells in the row.
-     * Defaults to 1, so columns divide the row evenly. Must match the `flex` on
-     * the cells beneath it.
+     * Defaults to 1, so columns divide the row evenly. Without a `columns` model
+     * on the root it must match the `flex` on the cells beneath it.
      */
     flex?: number;
     /**
      * Fixed width in pixels, for a column that must not move — an icon, a state
-     * dot. Must match the `width` on the cells beneath it.
+     * dot. Without a `columns` model on the root it must match the `width` on the
+     * cells beneath it.
      */
     width?: number;
     /**
@@ -224,15 +260,19 @@ export interface TableCellProps extends ViewProps {
     className?: string;
     /**
      * Share of the leftover width, relative to the other cells in the row.
-     * Defaults to 1. Must match the `flex` on the head above it.
+     * Defaults to 1. Without a `columns` model on the root it must match the
+     * `flex` on the head above it.
      */
     flex?: number;
     /**
-     * Fixed width in pixels, for a column that must not move. Must match the
-     * `width` on the head above it.
+     * Fixed width in pixels, for a column that must not move. Without a `columns`
+     * model on the root it must match the `width` on the head above it.
      */
     width?: number;
-    /** Which edge the cell's content sits against. Match the head above it. */
+    /**
+     * Which edge the cell's content sits against. Without a `columns` model on
+     * the root, match the head above it.
+     */
     align?: CellAlign;
     /** Styles the cell's text. */
     labelClassName?: string;
@@ -257,6 +297,8 @@ export interface TableFrameProps extends Omit<ViewProps, 'children'> {
     size?: TableSize;
     /** Tint every other body row, as on `Table`. */
     striped?: boolean;
+    /** The column model, as on `Table`. */
+    columns?: TableColumn[];
     children?: ReactNode;
 }
 export declare const Table: import("react").ForwardRefExoticComponent<TableProps & import("react").RefAttributes<View>> & {

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,OAAO,EAUL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAMpD,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAG1D,OAAO,EAEL,KAAK,sBAAsB,EAC5B,MAAM,wCAAqC,CAAC;AAC7C,OAAO,EAAQ,KAAK,SAAS,EAAgB,MAAM,0BAAuB,CAAC;AAQ3E,KAAK,SAAS,GAAG,SAAS,GAAG,IAAI,CAAC;AAElC,KAAK,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;AAC5C,MAAM,MAAM,kBAAkB,GAAG,KAAK,GAAG,MAAM,CAAC;AAEhD,QAAA,MAAM,aAAa;;QAYb,4DAA4D;;QAE5D,kEAAkE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAFlE,4DAA4D;;QAE5D,kEAAkE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAFlE,4DAA4D;;QAE5D,kEAAkE;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAsBtE,CAAC;AAiCH,MAAM,WAAW,UAAW,SAAQ,SAAS,EAAE,YAAY,CAAC,OAAO,aAAa,CAAC;IAC/E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAwCD,MAAM,WAAW,gBAAiB,SAAQ,SAAS;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAqBD,MAAM,WAAW,cAAe,SAAQ,SAAS;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAgBD,MAAM,WAAW,gBAAiB,SAAQ,SAAS;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAqBD,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,sBAAsB,EAAE,UAAU,GAAG,UAAU,CAAC;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mEAAmE;IACnE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA4ED,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IACjE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8EAA8E;IAC9E,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC,+DAA+D;IAC/D,OAAO,CAAC,EAAE,sBAAsB,CAAC,SAAS,CAAC,CAAC;IAC5C,gCAAgC;IAChC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAkID,MAAM,WAAW,cAAe,SAAQ,SAAS;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2EAA2E;IAC3E,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,8BAA8B;IAC9B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAgCD,MAAM,WAAW,iBAAkB,SAAQ,SAAS;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAiBD,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA4BD,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IAClE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sDAAsD;IACtD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,kEAAkE;IAClE,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,8DAA8D;IAC9D,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,kCAAkC;IAClC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,gDAAgD;IAChD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAkGD,eAAO,MAAM,KAAK;;;;;;;;;;CAUhB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/index.tsx"],"names":[],"mappings":"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"}

package/lib/typescript/src/components/text-animation/index.d.ts

@@ -0,0 +1,268 @@
+/**
+ * TextAnimation — the five ways a piece of text arrives.
+ *
+ * ```tsx
+ * <TextAnimation.Typing text="Everything ships with its accessibility done" />
+ * <TextAnimation.Rotating text={['fast', 'native', 'yours']} />
+ * <TextAnimation.Counting value={2048} />
+ * <TextAnimation.Sliding value={price} decimals={2} />
+ * <TextAnimation.Scrolling value={120} step={10} />
+ * ```
+ *
+ * ## Why one component with five parts
+ *
+ * They are one idea — a value that changes and wants to be seen changing —
+ * and they share every prop that says *how*: `duration`, `delay`, `loop`,
+ * `enabled`. Put on the `TextAnimation` root, those become the defaults for
+ * everything inside it, so a hero with three of these in it is configured once
+ * rather than three times.
+ *
+ * ## What React Native forces
+ *
+ * Nested `Text` is the only thing that gets real line-breaking, and it cannot
+ * be transformed — a `translateY` on it is ignored. So the two parts that
+ * animate a whole string, `Typing` and `Counting`, stay real text and keep
+ * wrapping; the three that slide glyphs past each other lay out as rows of
+ * views, which buys the transform and costs line-breaking. None of the three
+ * is ever a paragraph, so the trade only ever falls the right way.
+ *
+ * ## Why the digits are drawn rather than measured
+ *
+ * A number animated as React state is a re-render per frame. `Counting` runs
+ * the value on the UI thread and only crosses back when the *rounded* number
+ * changes, which for a whole number is a couple of dozen times rather than
+ * sixty a second. The sliding and scrolling parts do not cross back at all:
+ * every digit is already rendered, and the animation is a transform on a
+ * column of them.
+ */
+import { type ReactNode } from 'react';
+import { type ViewProps } from 'react-native';
+import { type TextProps } from '../../primitives/text.js';
+export interface TextAnimationProps extends ViewProps {
+    className?: string;
+    /**
+     * How long one pass takes, in milliseconds. What that measures depends on
+     * the part: a keystroke for `Typing`, a phrase's turn on screen for
+     * `Rotating`, the whole journey for the three that count.
+     */
+    duration?: number;
+    /** How long to wait before starting, in milliseconds. */
+    delay?: number;
+    /** Start again from the beginning when the run finishes. */
+    loop?: boolean;
+    /**
+     * Animate at all. `false` draws the finished text or the final number
+     * immediately, which is also what a reduced-motion setting does.
+     */
+    enabled?: boolean;
+    children?: ReactNode;
+}
+/**
+ * Shared configuration, and a row to lay the parts out in.
+ *
+ * Optional in every case — each part works standalone with its own props, and
+ * this is only here so a line with three of them in it says `duration` once.
+ */
+declare function TextAnimationRoot({ className, duration, delay, loop, enabled, children, ...props }: TextAnimationProps): import("react").JSX.Element;
+declare namespace TextAnimationRoot {
+    var displayName: string;
+}
+export interface TextAnimationTypingProps extends Omit<TextProps, 'children'> {
+    className?: string;
+    /**
+     * What to type. An array is typed, held, erased and replaced by the next,
+     * which is the shape a rotating headline wants.
+     */
+    text: string | string[];
+    /** Milliseconds per keystroke. */
+    duration?: number;
+    /** Milliseconds before the first keystroke. */
+    delay?: number;
+    /** How long a finished string sits before it is erased, in milliseconds. */
+    hold?: number;
+    /** Start again after the last string. Only means anything for an array. */
+    loop?: boolean;
+    /** Draw a blinking caret after the text. */
+    caret?: boolean;
+    /** Styles the caret. */
+    caretClassName?: string;
+    /** Called once the last string has finished being typed. */
+    onDone?: () => void;
+    enabled?: boolean;
+}
+/**
+ * A string arriving one character at a time.
+ *
+ * The text is React state rather than anything on the UI thread, and it has
+ * to be: a character is a different string, and a string is a re-render
+ * whichever thread decided on it. That is fine at a keystroke every 50-odd
+ * milliseconds, which is three orders of magnitude slower than a frame.
+ *
+ * It reserves no space. A line that grows as it types pushes whatever is under
+ * it down the screen on every keystroke, so give the container a height, or
+ * type into a block that has one already.
+ */
+declare function TextAnimationTyping({ className, text, duration, delay, hold, loop, caret, caretClassName, onDone, enabled, ...props }: TextAnimationTypingProps): import("react").JSX.Element;
+declare namespace TextAnimationTyping {
+    var displayName: string;
+}
+export interface TextAnimationRotatingProps extends Omit<TextProps, 'children'> {
+    className?: string;
+    /** The phrases to cycle. One string never rotates, which is a valid state. */
+    text: string | string[];
+    /** How long each phrase holds, in milliseconds. */
+    duration?: number;
+    /** Milliseconds before the first change. */
+    delay?: number;
+    enabled?: boolean;
+}
+/**
+ * One phrase replaced by the next, the outgoing one leaving upward and the
+ * incoming one arriving from below.
+ *
+ * The box is sized by the longest phrase and not by the current one. A box
+ * that resizes as the words change makes the line around it jump, which is
+ * more distracting than the effect is interesting — and a box sized by the
+ * *first* phrase clips every longer one that follows, which is worse than
+ * either.
+ *
+ * So the width comes from a sizer: every phrase, laid out invisibly in a view
+ * with no height. Yoga still takes a column's width from its children when
+ * their height is fixed at zero, so the box ends up as wide as the longest
+ * phrase and as tall as one line of them.
+ */
+declare function TextAnimationRotating({ className, text, duration, delay, enabled, ...props }: TextAnimationRotatingProps): import("react").JSX.Element;
+declare namespace TextAnimationRotating {
+    var displayName: string;
+}
+export interface TextAnimationCountingProps extends Omit<TextProps, 'children'> {
+    className?: string;
+    /** Where the number ends up. */
+    value: number;
+    /** Where it starts from. Defaults to zero. */
+    from?: number;
+    /** How long the whole journey takes, in milliseconds. */
+    duration?: number;
+    /** Milliseconds before it starts. */
+    delay?: number;
+    /** Digits after the point. */
+    decimals?: number;
+    /**
+     * Formatting for the number, as `Intl.NumberFormat` options — a currency, a
+     * percentage, grouped thousands. Falls back to a plain fixed-point string on
+     * an engine whose `Intl` cannot do it.
+     */
+    formatOptions?: Intl.NumberFormatOptions;
+    enabled?: boolean;
+}
+/**
+ * A number counting up to itself.
+ *
+ * The text is rewritten from a Reanimated reaction rather than from state:
+ * sixty re-renders a second for a number that is only ever a string is the
+ * kind of thing that makes an otherwise still screen drop frames. Only the
+ * rounded value crosses back to JavaScript, so the work per frame is one
+ * comparison and, at most, one `setState` on a value that actually changed.
+ */
+declare function TextAnimationCounting({ className, value, from, duration, delay, decimals, formatOptions, enabled, ...props }: TextAnimationCountingProps): import("react").JSX.Element;
+declare namespace TextAnimationCounting {
+    var displayName: string;
+}
+export interface TextAnimationSlidingProps extends ViewProps {
+    className?: string;
+    /** The number to show. Each digit rolls to its new value independently. */
+    value: number;
+    /** Digits after the point. */
+    decimals?: number;
+    /** Pad the whole part to this many digits with leading zeroes. */
+    padStart?: number;
+    /** A separator every three digits — `','` for `1,024`. */
+    thousandSeparator?: string;
+    /** The decimal mark. */
+    decimalSeparator?: string;
+    /** Styles the digits. */
+    textClassName?: string;
+    /** Size of the digits, as on `Text`. */
+    size?: TextProps['size'];
+    /** Weight of the digits, as on `Text`. */
+    weight?: TextProps['weight'];
+    /** Milliseconds before the roll starts. */
+    delay?: number;
+    enabled?: boolean;
+}
+/**
+ * An odometer: every digit is a column of ten, and each column rolls to the
+ * one it should be showing.
+ *
+ * Nothing here is measured at runtime. A column is ten stacked digits and the
+ * whole thing is moved by a fraction of its own height, so the roll needs no
+ * `onLayout`, no first frame at the wrong offset, and no re-render per digit
+ * per frame. The height comes from one hidden `0` in flow, which is what makes
+ * the column as tall as the font is rather than as tall as a number happens to
+ * be.
+ */
+declare function TextAnimationSliding({ className, value, decimals, padStart, thousandSeparator, decimalSeparator, textClassName, size, weight, delay, enabled, ...props }: TextAnimationSlidingProps): import("react").JSX.Element;
+declare namespace TextAnimationSliding {
+    var displayName: string;
+}
+export interface TextAnimationScrollingProps extends ViewProps {
+    className?: string;
+    /** The value to land on. */
+    value: number;
+    /** The gap between the values either side of it. */
+    step?: number;
+    /** How many values to show above and below the one in the window. */
+    around?: number;
+    /** How long the run takes, in milliseconds. */
+    duration?: number;
+    /** Milliseconds before it starts. */
+    delay?: number;
+    /** Formatting for each value, as `Intl.NumberFormat` options. */
+    formatOptions?: Intl.NumberFormatOptions;
+    /** Styles the values. */
+    textClassName?: string;
+    /** Size of the values, as on `Text`. */
+    size?: TextProps['size'];
+    /** Weight of the values, as on `Text`. */
+    weight?: TextProps['weight'];
+    /**
+     * Draw a band behind the value in the window, so the one being chosen is
+     * told apart from the scale around it.
+     */
+    highlight?: boolean;
+    /** Styles that band. */
+    highlightClassName?: string;
+    /**
+     * What the top and bottom of the window fade into — a theme token name, or
+     * any colour. It has to be told: the fade is painted, so it can only be the
+     * right colour if it is the colour of whatever is behind the window.
+     * Defaults to `--color-background`; pass `--color-card` inside a card.
+     *
+     * `false` turns the fade off, for a window on a surface that is not one flat
+     * colour.
+     */
+    fadeColor?: string | false;
+    enabled?: boolean;
+}
+/**
+ * A column of values scrolling past a window, coming to rest on one.
+ *
+ * The difference from `Sliding` is what the reader is being told. An odometer
+ * says *this number changed*; a column that scrolls past its neighbours says
+ * *this number was chosen from a scale*, and the values either side of it are
+ * the scale. Reach for it for a target, a threshold, a picked quantity — and
+ * for a plain change of value, reach for the other one.
+ */
+declare function TextAnimationScrolling({ className, value, step, around, duration, delay, formatOptions, textClassName, size, weight, highlight, highlightClassName, fadeColor, enabled, ...props }: TextAnimationScrollingProps): import("react").JSX.Element;
+declare namespace TextAnimationScrolling {
+    var displayName: string;
+}
+export declare const TextAnimation: typeof TextAnimationRoot & {
+    Typing: typeof TextAnimationTyping;
+    Rotating: typeof TextAnimationRotating;
+    Counting: typeof TextAnimationCounting;
+    Sliding: typeof TextAnimationSliding;
+    Scrolling: typeof TextAnimationScrolling;
+};
+export {};
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/components/text-animation/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/text-animation/index.tsx"],"names":[],"mappings":"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"}

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

@@ -1,14 +1,15 @@
 /**
  * Timeline — a vertical sequence of events.
  *
- * Adapted from: origin-space/originui apps/origin/registry/default/ui/timeline.tsx
- * (the Item / Indicator / Separator / Header / Date / Title / Content anatomy
- * and the completed-up-to-active state rule), shaped to match this repo's
- * `Steps` component so the two read as siblings.
+ * One `value` on the root says how far the sequence has got, and every item
+ * resolves its own state from its `step` against it — completed below, active
+ * at, inactive above. Stating it once is the point: a timeline whose items each
+ * carried their own state would let you write two active items, or none.
  *
- * Upstream drives styling through `data-*` attributes, which React Native has
- * no equivalent for; state is resolved in JS and passed through context into
- * `tv()` variants instead.
+ * State is resolved in JS and handed down through context into `tv()` variants
+ * rather than being read off the element, because React Native has no
+ * attribute selectors for a stylesheet to key off. `Steps` resolves its states
+ * the same way, so the two read as siblings.
  *
  * Vertical only — a horizontal timeline gives each item roughly a fifth of a
  * phone's width, which is not enough for a date and a title.

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/timeline/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,OAAO,EAKL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,IAAI,EAAE,KAAK,IAAI,IAAI,MAAM,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAIzE,OAAO,EAAQ,KAAK,SAAS,EAAgB,MAAM,0BAAuB,CAAC;AAE3E,MAAM,MAAM,eAAe,GAAG,KAAK,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,SAAS,CAAC;AAC/E,mEAAmE;AACnE,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAkJjF,MAAM,WAAW,aAAc,SAAQ,SAAS;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wDAAwD;IACxD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAkBD,MAAM,WAAW,iBAAkB,SAAQ,SAAS;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4CAA4C;IAC5C,IAAI,EAAE,MAAM,CAAC;IACb,oEAAoE;IACpE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,wEAAwE;IACxE,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,gEAAgE;IAChE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAwCD,MAAM,WAAW,sBAAuB,SAAQ,SAAS;IACvD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA4KD,MAAM,WAAW,iBAAkB,SAAQ,SAAS;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAgBD,eAAO,MAAM,QAAQ;;;oBA7M4C,MAAM;;;;oBA0FJ,MAAM;;;oBAgBP,MAAM;;;oBAUL,MAAM;;;;;;;;;oBA4DR,MAAM;;;CA4CrE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/timeline/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,OAAO,EAKL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,IAAI,EAAE,KAAK,IAAI,IAAI,MAAM,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAIzE,OAAO,EAAQ,KAAK,SAAS,EAAgB,MAAM,0BAAuB,CAAC;AAE3E,MAAM,MAAM,eAAe,GAAG,KAAK,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,SAAS,CAAC;AAC/E,mEAAmE;AACnE,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAkJjF,MAAM,WAAW,aAAc,SAAQ,SAAS;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wDAAwD;IACxD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAkBD,MAAM,WAAW,iBAAkB,SAAQ,SAAS;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4CAA4C;IAC5C,IAAI,EAAE,MAAM,CAAC;IACb,oEAAoE;IACpE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,wEAAwE;IACxE,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,gEAAgE;IAChE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAwCD,MAAM,WAAW,sBAAuB,SAAQ,SAAS;IACvD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA4KD,MAAM,WAAW,iBAAkB,SAAQ,SAAS;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAgBD,eAAO,MAAM,QAAQ;;;oBA7M4C,MAAM;;;;oBA0FJ,MAAM;;;oBAgBP,MAAM;;;oBAUL,MAAM;;;;;;;;;oBA4DR,MAAM;;;CA4CrE,CAAC"}