panelui-native 0.43.0 → 0.46.0

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

@@ -0,0 +1,245 @@
+/**
+ * PieChart — one whole, divided between its parts.
+ *
+ * ```tsx
+ * <PieChart data={spend} innerRadius={0.58}>
+ *   <PieChart.Header title="This month" value="$18,420" legend />
+ *   <PieChart.Slices />
+ *   <PieChart.Center />
+ * </PieChart>
+ * ```
+ *
+ * ## What it is, against the ring beside it
+ *
+ * A ring chart draws a value against *its own* target, so three rings can all
+ * sit at ninety percent of three unrelated numbers and nothing has to add up.
+ * A pie is the opposite claim: every slice is a share of one total, the angles
+ * must come to a full turn, and a slice only means anything next to the others.
+ * That is why nothing here takes a `maxValue` and why every value is normalised
+ * against the sum — the sum *is* the subject.
+ *
+ * It follows that a pie is the wrong shape for a great many things. Two numbers
+ * that do not belong to one whole, a series over time, anything a reader has to
+ * compare precisely: all of those are a bar chart, because an angle is the
+ * hardest quantity to read off a page and the fifth-largest slice of eleven is
+ * not a fact anybody is going to extract. Use it for a handful of parts of one
+ * obvious total, and put the number in the middle.
+ *
+ * ## Drawing
+ *
+ * Each slice is a filled path rather than a stroked arc, because a slice is a
+ * *region* — two arcs and two radial edges — and a stroke is a band of even
+ * thickness with no ends of its own. `wedgePath` builds it, and rebuilds it on
+ * the UI thread on every frame of the reveal.
+ *
+ * That is what makes the reveal an unroll rather than a fade: one angle sweeps
+ * clockwise from the start and each slice is drawn only as far as it has got
+ * to. The pie fills the way it would be drawn by hand, and the slices arrive in
+ * the order they are listed rather than all at once.
+ *
+ * Touch, not hover: a slice is selected by pressing it, and pressing the same
+ * one again clears the selection. There is no equivalent of a pointer resting
+ * somewhere without committing, so a chart that only revealed its numbers on
+ * hover would never reveal them at all.
+ */
+import { type ReactNode } from 'react';
+import { type ViewProps } from 'react-native';
+/** Whether the chart is showing data or waiting for it. */
+export type PieChartStatus = 'loading' | 'ready';
+/** One slice. Its share is worked out from the others, so there is no maximum. */
+export interface PieDatum {
+    /** Name for the legend, the centre readout and the accessibility label. */
+    label: string;
+    /** How much of the whole this slice is. Negatives are treated as zero. */
+    value: number;
+    /** Explicit colour, overriding the `--color-chart-*` token. */
+    color?: string;
+}
+/** The selected slice and its share, for something rendered inside the chart. */
+export declare function usePieChart(): {
+    activeIndex: number;
+    activeSlice: PieDatum | null;
+    /** The selected slice's share of the whole, 0 to 1. */
+    activeFraction: number;
+};
+export interface PieChartProps extends ViewProps {
+    className?: string;
+    /** One entry per slice, in the order they are drawn clockwise. */
+    data: PieDatum[];
+    /** Fixed diameter in points. Measured from the container when omitted. */
+    size?: number;
+    /**
+     * The hole, as a share of the radius. `0` is a pie; anything above it is a
+     * donut, and `0.55`–`0.65` is the range that leaves room for a readout in the
+     * middle without the band getting thin enough to be hard to hit.
+     *
+     * Given as a share rather than in points so a chart keeps its proportions at
+     * whatever size it is measured at.
+     */
+    innerRadius?: number;
+    /** Where the first slice begins, in degrees clockwise from twelve o'clock. */
+    startAngle?: number;
+    /**
+     * Where the last one ends, on the same clock. Leaving a turn's worth between
+     * the two gives a closed pie; anything less leaves a gap and reads as a dial.
+     */
+    endAngle?: number;
+    /** Gap between one slice and the next, in degrees. */
+    padAngle?: number;
+    /**
+     * The smallest angle any non-zero slice is drawn at, in degrees.
+     *
+     * A slice worth a fifth of a percent is a hairline nobody can see and nobody
+     * can press, so it reads as missing rather than as small — and "missing" is a
+     * different claim from "nearly none". The angle it borrows comes off the
+     * others in proportion, so the turn still closes.
+     */
+    minAngle?: number;
+    /** Milliseconds for the pie to unroll. */
+    animationDuration?: number;
+    /** `loading` draws a plain muted ring until the data arrives. */
+    status?: PieChartStatus;
+    /** Selected slice. Leave unset to let the chart track it. */
+    activeIndex?: number;
+    /** Fires with the selected slice, or `-1` when the selection is cleared. */
+    onActiveIndexChange?: (index: number) => void;
+    children?: ReactNode;
+}
+/** Imperative handle: re-run the unroll, for a "replay" control. */
+export interface PieChartHandle {
+    replay: () => void;
+}
+export interface PieChartSlicesProps {
+    /** Rounds the four turns of each slice, in points. */
+    cornerRadius?: number;
+    /** How far a selected slice lifts out of the pie, in points. */
+    popOut?: number;
+    /** Opacity of the slices that are not selected, once one is. */
+    dimOpacity?: number;
+}
+/**
+ * Every slice, drawn in the order the data lists them.
+ *
+ * One part rather than one per datum, unlike the rings next door. A ring is
+ * configured on its own — its own thickness, its own cap, its own segment count
+ * — because it is its own measurement. Slices of a pie are not: they share a
+ * radius, a hole and a dial by definition, and a chart where one of them could
+ * be given a different radius would be a chart drawing a lie.
+ */
+declare function PieChartSlices({ cornerRadius, popOut, dimOpacity, }: PieChartSlicesProps): import("react").JSX.Element | null;
+declare namespace PieChartSlices {
+    var displayName: string;
+    var slot: "svg";
+}
+export interface PieChartSkeletonProps {
+    color?: string;
+}
+/**
+ * The loading state: the dial as one plain band, with nothing divided up yet.
+ *
+ * Deliberately undivided. Placeholder slices would be a made-up split, and a
+ * reader has no way to tell an invented one from a real one until it changes
+ * under them — which is worse than showing nothing, because it is showing
+ * something wrong.
+ */
+declare function PieChartSkeleton({ color }: PieChartSkeletonProps): import("react").JSX.Element | null;
+declare namespace PieChartSkeleton {
+    var displayName: string;
+    var slot: "svg";
+}
+export interface PieChartCenterProps {
+    /** Heading shown when no slice is selected. */
+    defaultLabel?: string;
+    /** Format the number under the label. Defaults to a compact number. */
+    formatValue?: (value: number, slice: PieDatum | null) => string;
+    /**
+     * Draw the middle yourself. Given the selected slice, or `null` when nothing
+     * is selected.
+     */
+    children?: (slice: PieDatum | null) => ReactNode;
+    className?: string;
+}
+/**
+ * The hole's readout: the total, and the selected slice's own figures once one
+ * is picked.
+ *
+ * Unlike the ring chart's centre, the default here *is* an aggregate, and it is
+ * the honest one — the whole point of a pie is that its parts belong to a total,
+ * so the total is the number the chart is about. Selecting a slice swaps it for
+ * that slice's value and its share.
+ */
+declare function PieChartCenter({ defaultLabel, formatValue, children, className, }: PieChartCenterProps): import("react").JSX.Element | null;
+declare namespace PieChartCenter {
+    var displayName: string;
+    var slot: "overlay";
+}
+export interface PieChartLegendProps extends ViewProps {
+    className?: string;
+    /** Show each slice's share of the whole beside its name. */
+    showValue?: boolean;
+}
+/**
+ * A swatch, a name and a share per slice, under the chart and across the width
+ * of it. Pressable in the same way the slices are — the legend is usually the
+ * easier target of the two, and a slice worth a couple of percent is not a
+ * target at all.
+ *
+ * It wraps rather than stacking, so five or six entries take two lines instead
+ * of six. A key is a lookup table, and a lookup table read down a column of one
+ * word each is a column the eye has to walk.
+ */
+declare function PieChartLegend({ className, showValue, ...props }: PieChartLegendProps): import("react").JSX.Element | null;
+declare namespace PieChartLegend {
+    var displayName: string;
+    var slot: "footer";
+}
+export interface PieChartHeaderProps 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 caveat. */
+    caption?: string;
+    /** Prettier names for the slices, keyed by their `label`. */
+    labels?: Record<string, string>;
+    /**
+     * Draw a swatch and a name per slice along the trailing edge.
+     *
+     * For two or three short names. Past that use `PieChart.Legend`, which runs
+     * under the chart across the full width: a key of five long names crammed
+     * into the trailing corner of a header wraps to a column and leaves the title
+     * beside it a few points wide.
+     */
+    legend?: boolean;
+    /** Trailing slot — a control, a badge, a range picker. Wins over `legend`. */
+    children?: ReactNode;
+}
+/**
+ * The strip above the pie: what the chart is of, what it reads, and what the
+ * colours mean.
+ *
+ * It belongs to the chart rather than to the card around it because it is about
+ * the *slices* — 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 even though there is a total to derive it from,
+ * because the formatting is not the chart's to guess: a total of 18420 is a
+ * count, a currency or a percentage depending on what was counted, and only the
+ * caller knows which.
+ */
+declare function PieChartHeader({ className, title, value, caption, labels, legend, children, ...props }: PieChartHeaderProps): import("react").JSX.Element;
+declare namespace PieChartHeader {
+    var displayName: string;
+    var slot: "header";
+}
+export declare const PieChart: import("react").ForwardRefExoticComponent<PieChartProps & import("react").RefAttributes<PieChartHandle>> & {
+    Header: typeof PieChartHeader;
+    Slices: typeof PieChartSlices;
+    Center: typeof PieChartCenter;
+    Legend: typeof PieChartLegend;
+    Skeleton: typeof PieChartSkeleton;
+};
+export {};
+//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -0,0 +1,309 @@
+/**
+ * ScatterChart — two quantities against each other, drawn on the UI thread.
+ *
+ * Every other chart in this library spaces its points evenly along the x-axis,
+ * because their x is a position: twelve months are twelve equal steps whatever
+ * the gaps between the dates behind them. A scatter plot is the one shape where
+ * that is wrong. Both coordinates are *measured*, and the reader is being asked
+ * to look for a relationship between them — spread the points evenly and the
+ * relationship is the one thing you have thrown away.
+ *
+ * So this chart carries an x-domain as well as a y-domain, and both are tweened
+ * when the data changes.
+ *
+ * ```tsx
+ * <ScatterChart data={sessions} xDataKey="spend">
+ *   <ScatterChart.Grid />
+ *   <ScatterChart.Points dataKey="revenue" />
+ *   <ScatterChart.XAxis />
+ *   <ScatterChart.YAxis />
+ *   <ScatterChart.Tooltip />
+ * </ScatterChart>
+ * ```
+ *
+ * As elsewhere, there are two layers and the parts sort themselves into the
+ * right one: the geometry is SVG, and anything with text or a gesture on it is
+ * a React Native view over the top. SVG text ignores the platform's text
+ * scaling and the theme's font, and a gesture handler cannot be attached to an
+ * SVG node at all.
+ *
+ * **Finding a point.** A crosshair that snaps to an x index — the way a line
+ * chart's does — has nothing to snap to here, because there is no shared x and
+ * two points can sit at the same one. Instead the nearest point to the finger
+ * is resolved by distance, on the UI thread, and only within a radius: a touch
+ * in an empty corner of the plot selects nothing rather than lighting up
+ * whichever point happens to be least far away. The radius is generous, because
+ * the points are a few pixels across and a fingertip is not.
+ *
+ * Colours come from the `--color-chart-*` tokens, so a chart follows the active
+ * theme. Nothing here hardcodes a hex.
+ */
+import { type ReactNode } from 'react';
+import { type ViewProps } from 'react-native';
+type Layer = 'svg' | 'overlay' | 'header';
+export type ScatterChartStatus = 'loading' | 'ready';
+export type ScatterChartDatum = Record<string, string | number | null | undefined>;
+/** One plotted point, resolved back to the row it came from. */
+export interface ScatterChartPoint {
+    /** Index into `data`. */
+    index: number;
+    /** The series key this point belongs to. */
+    dataKey: string;
+    x: number;
+    y: number;
+    datum: ScatterChartDatum;
+}
+/**
+ * The selected point, for something rendered *inside* the chart.
+ *
+ * A readout usually belongs in the card's header, which is outside this
+ * provider — use `onActivePointChange` for that. A hook cannot reach up out of
+ * the subtree it is called in.
+ */
+export declare function useScatterChart(): {
+    activePoint: ScatterChartPoint | null;
+    xDataKey: string;
+};
+export interface ScatterChartProps extends ViewProps {
+    className?: string;
+    /** The rows. Each one is a point, placed by two of its values. */
+    data: ScatterChartDatum[];
+    /** Key holding the x value. Unlike the other charts, this must be a number. */
+    xDataKey?: string;
+    /**
+     * `loading` draws a still field of muted dots and settles into the real ones
+     * when it turns `ready`. One component throughout, rather than a spinner
+     * swapped for a chart — swapping loses the transition.
+     */
+    status?: ScatterChartStatus;
+    /** Width ÷ height. `1` suits a scatter plot: neither axis is the important one. */
+    aspectRatio?: number;
+    /** Milliseconds for the reveal on mount. */
+    animationDuration?: number;
+    /** Milliseconds for the axes to settle after the data changes. */
+    domainDuration?: number;
+    /** Fix the x-axis instead of deriving it from the data. */
+    xDomain?: [number, number];
+    /** Fix the y-axis instead of deriving it from the data. */
+    yDomain?: [number, number];
+    /**
+     * The point under the finger, and `null` when it lifts. This is how a readout
+     * in the card's header gets its value — that header is outside the chart, so
+     * it cannot use `useScatterChart`.
+     *
+     * Fires when the selection changes, not per frame.
+     */
+    onActivePointChange?: (point: ScatterChartPoint | null) => void;
+    /** Drop the axis padding so the field reaches the edges, for a thumbnail. */
+    compact?: boolean;
+    children?: ReactNode;
+}
+/** Imperative handle: re-run the reveal on demand, for a "replay" control. */
+export interface ScatterChartHandle {
+    replay: () => void;
+}
+export interface ScatterChartGridProps {
+    /** Horizontal rules across the plot. */
+    rows?: number;
+    /**
+     * Vertical rules down it. A scatter plot's x is a quantity, so it earns a
+     * grid in both directions — a line chart's does not, because its x is a
+     * label and a rule under a label divides nothing.
+     */
+    columns?: number;
+    color?: string;
+    /** Dash pattern, e.g. `"4,6"`. Omit for a solid rule. */
+    dashArray?: string;
+    opacity?: number;
+}
+/** Reference lines both ways. Drawn under everything, and not part of the reveal. */
+declare function ScatterChartGrid({ rows, columns, color, dashArray, opacity, }: ScatterChartGridProps): import("react").JSX.Element;
+declare namespace ScatterChartGrid {
+    var displayName: string;
+    var layer: Layer;
+}
+export interface ScatterChartPointsProps {
+    /** Key holding this series' y values. */
+    dataKey: string;
+    /**
+     * Fill colour. Defaults to the `--color-chart-*` token at `colorIndex`, so a
+     * series follows the theme without the call site naming a colour.
+     */
+    color?: string;
+    /** Which `--color-chart-*` token to take when `color` is not given. */
+    colorIndex?: 1 | 2 | 3 | 4 | 5;
+    /** Radius of a point, in points. Ignored when `sizeKey` is given. */
+    size?: number;
+    /**
+     * Key holding a third quantity, mapped to each point's *area* — a bubble
+     * chart. Area rather than radius, because doubling a radius quadruples the
+     * ink and the reader sees four times the value that is there.
+     */
+    sizeKey?: string;
+    /** Smallest and largest radius `sizeKey` maps onto. */
+    sizeRange?: [number, number];
+    /**
+     * Fill opacity. Below 1 by default so that overlapping points read as denser
+     * rather than hiding each other — in a crowded region that overlap *is* the
+     * finding, and opaque dots erase it.
+     */
+    opacity?: number;
+}
+/** One series, as a field of dots. */
+declare function ScatterChartPoints({ dataKey, color, colorIndex, size, sizeKey, sizeRange, opacity, }: ScatterChartPointsProps): import("react").JSX.Element | null;
+declare namespace ScatterChartPoints {
+    var displayName: string;
+    var layer: Layer;
+}
+export interface ScatterChartSkeletonProps {
+    /** How many placeholder dots to scatter. */
+    count?: number;
+    color?: string;
+}
+/**
+ * The loading state: a still field of muted dots where the data will be.
+ *
+ * Deliberately still. A shimmer over a field of dots reads as the points
+ * *moving*, which is the one thing a scatter plot must never appear to do —
+ * position is the entire message, and a loading state that implies it is
+ * changing is a loading state that lies.
+ *
+ * The layout is deterministic rather than random, so it does not reshuffle on
+ * every render of a component that may re-render several times while waiting.
+ *
+ * Still is not the same as abrupt, though. It dissolves as the real points grow
+ * in, and outlives the status change by exactly that long — cut at the frame the
+ * data lands, the placeholder disappears before anything has replaced it and the
+ * plot is briefly empty.
+ */
+declare function ScatterChartSkeleton({ count, color }: ScatterChartSkeletonProps): import("react").JSX.Element | null;
+declare namespace ScatterChartSkeleton {
+    var displayName: string;
+    var layer: Layer;
+}
+export interface ScatterChartXAxisProps {
+    /** How many intervals to divide the axis into. Yields `ticks + 1` labels. */
+    ticks?: number;
+    /** Turn a value into its label. Defaults to a compact number. */
+    format?: (value: number) => string;
+    className?: string;
+}
+/**
+ * The x labels, evenly along the axis.
+ *
+ * Evenly spaced here — unlike a line chart's, where each label sits on the point
+ * it names — because this axis is a continuous scale rather than a list of
+ * rows. There is no point to sit on.
+ */
+declare function ScatterChartXAxis({ ticks, format, className }: ScatterChartXAxisProps): import("react").JSX.Element;
+declare namespace ScatterChartXAxis {
+    var displayName: string;
+    var layer: Layer;
+}
+export interface ScatterChartYAxisProps {
+    /** How many intervals to divide the axis into. Yields `ticks + 1` labels. */
+    ticks?: number;
+    /** Turn a value into its label. Defaults to a compact number. */
+    format?: (value: number) => string;
+    className?: string;
+}
+/** Value labels down the side, one per grid line. */
+declare function ScatterChartYAxis({ ticks, format, className }: ScatterChartYAxisProps): import("react").JSX.Element;
+declare namespace ScatterChartYAxis {
+    var displayName: string;
+    var layer: Layer;
+    var axis: "y";
+}
+export interface ScatterChartTooltipProps {
+    /** Float a small readout beside the selected point. On by default. */
+    showLabel?: boolean;
+    /** Format the x value for the readout. Defaults to a compact number. */
+    formatX?: (value: number) => string;
+    /** Format the y value for the readout. Defaults to a compact number. */
+    formatY?: (value: number, key: string) => string;
+    /** A heading for the readout, from the row — a name, a label, a category. */
+    formatTitle?: (datum: ScatterChartDatum) => string;
+    /** How far from a point a touch still counts as being on it, in points. */
+    hitRadius?: number;
+}
+/**
+ * The touch target, the selection it drives, and the readout that follows it.
+ *
+ * A line chart's crosshair snaps to an x index. That is not available here:
+ * there is no shared x, and two points can sit on the same one. So the nearest
+ * point is found by distance instead — and only within `hitRadius`, so a touch
+ * in an empty corner selects nothing rather than lighting up whichever point is
+ * least far away.
+ *
+ * The search runs on the UI thread over a flat array of already-projected
+ * coordinates, and only the *identity* of the winner crosses back into JS, and
+ * only when it changes. A drag across the plot therefore costs a handful of
+ * re-renders rather than one per frame.
+ *
+ * Distances are compared squared. The nearest point by distance is the nearest
+ * by distance-squared, and a square root per point per frame buys nothing.
+ */
+declare function ScatterChartTooltip({ showLabel, formatX, formatY, formatTitle, hitRadius, }: ScatterChartTooltipProps): import("react").JSX.Element | null;
+declare namespace ScatterChartTooltip {
+    var displayName: string;
+    var layer: Layer;
+}
+export interface ScatterChartLegendProps extends ViewProps {
+    className?: string;
+    /** Label per series key. A key with no label falls back to the key itself. */
+    labels?: Record<string, string>;
+}
+/**
+ * A swatch and a name per registered series. Sits in the top-left of the plot
+ * by default — move it with `className`.
+ */
+declare function ScatterChartLegend({ className, labels, ...props }: ScatterChartLegendProps): import("react").JSX.Element | null;
+declare namespace ScatterChartLegend {
+    var displayName: string;
+    var layer: Layer;
+}
+export interface ScatterChartHeaderProps 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 total. */
+    caption?: string;
+    /** Prettier names for the series keys, as the legend takes. */
+    labels?: Record<string, string>;
+    /**
+     * Draw a swatch and a name per series along the trailing edge. Prefer this to
+     * `ScatterChart.Legend` on a chart that has a header: the legend floats over
+     * the plot, where it competes with the points for the same corner.
+     */
+    legend?: boolean;
+    /** Trailing slot — a control, a badge, a range picker. Wins over `legend`. */
+    children?: ReactNode;
+}
+/**
+ * The strip above the plot: what the chart is of, what it currently reads, and
+ * what the colours mean.
+ *
+ * The value is not derived here. A readout that follows the finger belongs to
+ * whoever owns the data — take it from `onActivePointChange` and pass the
+ * formatted string down, so one header can show a summary when nothing is
+ * pressed and a point's values when something is.
+ */
+declare function ScatterChartHeader({ className, title, value, caption, labels, legend, children, ...props }: ScatterChartHeaderProps): import("react").JSX.Element;
+declare namespace ScatterChartHeader {
+    var displayName: string;
+    var layer: Layer;
+}
+export declare const ScatterChart: import("react").ForwardRefExoticComponent<ScatterChartProps & import("react").RefAttributes<ScatterChartHandle>> & {
+    Header: typeof ScatterChartHeader;
+    Grid: typeof ScatterChartGrid;
+    Points: typeof ScatterChartPoints;
+    Skeleton: typeof ScatterChartSkeleton;
+    XAxis: typeof ScatterChartXAxis;
+    YAxis: typeof ScatterChartYAxis;
+    Tooltip: typeof ScatterChartTooltip;
+    Legend: typeof ScatterChartLegend;
+};
+export {};
+//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -15,10 +15,19 @@
  *   <Tabs.Content value="account">…</Tabs.Content>
  * </Tabs>
  * ```
+ *
+ * **Swiping.** Only the visible panel is mounted, so a drag has nothing behind
+ * it to reveal. The panel still tracks the finger one to one and dims as it
+ * goes, and the panel arriving comes back up through the same fade — the
+ * movement carries the change and the dissolve covers the gap. On release the
+ * arriving panel picks up a whole panel's width from wherever the outgoing one
+ * was let go, so the two views draw one continuous movement between them. The
+ * displacement lives on the root for exactly that reason: a value belonging to
+ * either panel would be destroyed at the handover.
  */
 import { type ReactNode } from 'react';
 import { type ViewProps } from 'react-native';
-export type TabsVariant = 'segmented' | 'underline' | 'pill';
+export type TabsVariant = 'segmented' | 'underline' | 'pill' | 'expanding';
 export interface TabsProps extends ViewProps {
     className?: string;
     value?: string;
@@ -27,6 +36,12 @@ export interface TabsProps extends ViewProps {
     /**
      * `segmented` is a chip travelling inside a recessed track, `underline` is a
      * rule under the active tab, `pill` is a filled chip on the page.
+     *
+     * `expanding` is a row of icon pills where only the selected one is open:
+     * it widens to let its label out and closes again behind it. For a short row
+     * of destinations that are recognisable by their icons, where the labels
+     * would otherwise take the whole width to say things nobody rereads. Give
+     * every trigger an `icon` — a closed tab has nothing else.
      */
     variant?: TabsVariant;
     /**
@@ -62,7 +77,10 @@ declare function TabsList({ className, scrollable, children, ...props }: TabsLis
 export interface TabsTriggerProps {
     className?: string;
     value: string;
-    /** Rendered before the label. */
+    /**
+     * Rendered before the label. Required by `variant="expanding"`, where it is
+     * the only thing a closed tab has left to identify it by.
+     */
     icon?: ReactNode;
     /** Rendered after the label — a count, a dot, a status. */
     badge?: ReactNode;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/tabs/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AACH,OAAO,EAQL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAKL,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAyDtB,MAAM,MAAM,WAAW,GAAG,WAAW,GAAG,WAAW,GAAG,MAAM,CAAC;AAuG7D,MAAM,WAAW,SAAU,SAAQ,SAAS;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,YAAY,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,KAAK,EACL,aAAa,EACb,YAAY,EACZ,OAAqB,EACrB,WAAmB,EACnB,SAAiB,EACjB,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,SAAS,+BA+GX;AAqCD,MAAM,WAAW,aAAc,SAAQ,SAAS;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,UAAkB,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,+BA2CrF;AAED,MAAM,WAAW,gBAAgB;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,iCAAiC;IACjC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,2DAA2D;IAC3D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,KAAK,EACL,IAAI,EACJ,KAAK,EACL,QAAgB,EAChB,QAAQ,GACT,EAAE,gBAAgB,+BA6ClB;AAED,MAAM,WAAW,gBAAiB,SAAQ,SAAS;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,sCAqIrF;AAED,eAAO,MAAM,IAAI;;;;CAIf,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/tabs/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,OAAO,EAQL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAKL,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAsFtB,MAAM,MAAM,WAAW,GAAG,WAAW,GAAG,WAAW,GAAG,MAAM,GAAG,WAAW,CAAC;AAsI3E,MAAM,WAAW,SAAU,SAAQ,SAAS;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,YAAY,EAAE,MAAM,CAAC;IACrB;;;;;;;;;OASG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,KAAK,EACL,aAAa,EACb,YAAY,EACZ,OAAqB,EACrB,WAAmB,EACnB,SAAiB,EACjB,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,SAAS,+BAkIX;AAqCD,MAAM,WAAW,aAAc,SAAQ,SAAS;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,UAAkB,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,+BA6CrF;AAED,MAAM,WAAW,gBAAgB;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,2DAA2D;IAC3D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,KAAK,EACL,IAAI,EACJ,KAAK,EACL,QAAgB,EAChB,QAAQ,GACT,EAAE,gBAAgB,+BA8DlB;AA0ID,MAAM,WAAW,gBAAiB,SAAQ,SAAS;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,sCAuJrF;AAED,eAAO,MAAM,IAAI;;;;CAIf,CAAC"}