panelui-native 0.6.0 → 0.9.0

package/lib/typescript/src/components/input-group/index.d.ts

@@ -1,7 +1,6 @@
 /**
  * InputGroup — an Input with leading and/or trailing decorators.
  *
- * Adapted from: heroui-inc/heroui-native src/components/input-group/
  * Prefix and Suffix are absolutely positioned and their measured widths become
  * padding on the Input, so text never runs underneath a decorator regardless
  * of how wide that decorator turns out to be.

package/lib/typescript/src/components/input-group/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/input-group/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EACL,IAAI,EAEJ,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAEtB,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,mBAAU,CAAC;AA6BlD,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mDAAmD;IACnD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAwBD,MAAM,WAAW,wBAAyB,SAAQ,SAAS;IACzD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAwCD,MAAM,MAAM,oBAAoB,GAAG,UAAU,CAAC;AA4B9C,eAAO,MAAM,UAAU;;;;CAIrB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/input-group/index.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EACL,IAAI,EAEJ,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAEtB,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,mBAAU,CAAC;AA6BlD,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mDAAmD;IACnD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAwBD,MAAM,WAAW,wBAAyB,SAAQ,SAAS;IACzD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAwCD,MAAM,MAAM,oBAAoB,GAAG,UAAU,CAAC;AA4B9C,eAAO,MAAM,UAAU;;;;CAIrB,CAAC"}

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

@@ -0,0 +1,286 @@
+/**
+ * Item — a row of content: media on one side, a title and description in the
+ * middle, actions on the other side.
+ *
+ * It is the shape almost every list in an app already has — a settings row, a
+ * file in a picker, a member in a team list, a tool call in a transcript — so
+ * it exists as one composable primitive rather than being rebuilt per screen
+ * with slightly different padding each time.
+ *
+ * ```tsx
+ * <Item variant="outline">
+ *   <Item.Media variant="icon"><ReceiptIcon /></Item.Media>
+ *   <Item.Content>
+ *     <Item.Title>Invoice.pdf</Item.Title>
+ *     <Item.Description>2.4 MB · Updated yesterday</Item.Description>
+ *   </Item.Content>
+ *   <Item.Actions><Button size="sm">Open</Button></Item.Actions>
+ * </Item>
+ * ```
+ *
+ * Two axes, and they are independent. `orientation` on the item decides
+ * whether its own parts sit side by side or stack into a card; `orientation`
+ * on `Item.Group` decides whether the items themselves run down the screen or
+ * across it. A carousel wants both set to the non-default: a horizontal group
+ * of vertical items.
+ */
+import { type ReactNode } from 'react';
+import { View, type ViewProps } from 'react-native';
+import { type VariantProps } from 'tailwind-variants';
+import { type AnimatedPressableProps } from '../../primitives/animated-pressable.js';
+import { type TextProps } from '../../primitives/text.js';
+type ItemSize = 'default' | 'sm' | 'xs';
+type ItemOrientation = 'horizontal' | 'vertical';
+declare const itemVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: {};
+        outline: {
+            root: string;
+        };
+        muted: {
+            root: string;
+        };
+    };
+    size: {
+        default: {
+            root: string;
+            title: string;
+            description: string;
+        };
+        sm: {
+            root: string;
+            title: string;
+            description: string;
+        };
+        xs: {
+            root: string;
+            title: string;
+            description: string;
+        };
+    };
+    orientation: {
+        /** Media, text and actions side by side — the list-row shape. */
+        horizontal: {
+            root: string;
+        };
+        /** Stacked into a card — the shape a horizontal carousel wants. */
+        vertical: {
+            root: string;
+        };
+    };
+    disabled: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    title: string;
+    description: string;
+}, undefined, {
+    variant: {
+        default: {};
+        outline: {
+            root: string;
+        };
+        muted: {
+            root: string;
+        };
+    };
+    size: {
+        default: {
+            root: string;
+            title: string;
+            description: string;
+        };
+        sm: {
+            root: string;
+            title: string;
+            description: string;
+        };
+        xs: {
+            root: string;
+            title: string;
+            description: string;
+        };
+    };
+    orientation: {
+        /** Media, text and actions side by side — the list-row shape. */
+        horizontal: {
+            root: string;
+        };
+        /** Stacked into a card — the shape a horizontal carousel wants. */
+        vertical: {
+            root: string;
+        };
+    };
+    disabled: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    title: string;
+    description: string;
+}, import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: {};
+        outline: {
+            root: string;
+        };
+        muted: {
+            root: string;
+        };
+    };
+    size: {
+        default: {
+            root: string;
+            title: string;
+            description: string;
+        };
+        sm: {
+            root: string;
+            title: string;
+            description: string;
+        };
+        xs: {
+            root: string;
+            title: string;
+            description: string;
+        };
+    };
+    orientation: {
+        /** Media, text and actions side by side — the list-row shape. */
+        horizontal: {
+            root: string;
+        };
+        /** Stacked into a card — the shape a horizontal carousel wants. */
+        vertical: {
+            root: string;
+        };
+    };
+    disabled: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    title: string;
+    description: string;
+}, undefined, unknown, unknown, undefined>>;
+declare const mediaVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        /** No box — for an Avatar or anything that styles itself. */
+        default: string;
+        /** Rounded square tile sized for an icon. */
+        icon: string;
+        /** Clipped frame for an image or thumbnail. */
+        image: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        xs: string;
+    };
+}, undefined, "shrink-0 items-center justify-center", {
+    variant: {
+        /** No box — for an Avatar or anything that styles itself. */
+        default: string;
+        /** Rounded square tile sized for an icon. */
+        icon: string;
+        /** Clipped frame for an image or thumbnail. */
+        image: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        xs: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        /** No box — for an Avatar or anything that styles itself. */
+        default: string;
+        /** Rounded square tile sized for an icon. */
+        icon: string;
+        /** Clipped frame for an image or thumbnail. */
+        image: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        xs: string;
+    };
+}, undefined, "shrink-0 items-center justify-center", unknown, unknown, undefined>>;
+export interface ItemProps extends Omit<AnimatedPressableProps, 'children' | 'disabled'>, Omit<VariantProps<typeof itemVariants>, 'disabled'> {
+    className?: string;
+    disabled?: boolean;
+    /**
+     * Row density. `Item.Media`, `Item.Title` and `Item.Description` follow it,
+     * so it only needs setting here.
+     */
+    size?: ItemSize;
+    /**
+     * `horizontal` is the list row: media, text and actions side by side.
+     * `vertical` stacks them into a card, which is what a horizontal carousel
+     * wants — and it is also what `Item.Header` and `Item.Footer` need, since
+     * both are full-width strips.
+     */
+    orientation?: ItemOrientation;
+    children?: ReactNode;
+}
+export interface ItemGroupProps extends ViewProps {
+    className?: string;
+    /**
+     * `vertical` stacks the items — the settings-list shape. `horizontal` runs
+     * them across instead, for a carousel; pair it with a scrollable and
+     * `orientation="vertical"` on each item so every entry reads as a card.
+     */
+    orientation?: ItemOrientation;
+    children?: ReactNode;
+}
+export interface ItemSeparatorProps extends ViewProps {
+    className?: string;
+    /** Match the group's axis: a horizontal group needs vertical hairlines. */
+    orientation?: ItemOrientation;
+}
+export interface ItemMediaProps extends ViewProps, VariantProps<typeof mediaVariants> {
+    className?: string;
+    children?: ReactNode;
+}
+export interface ItemContentProps extends ViewProps {
+    className?: string;
+    children?: ReactNode;
+}
+export interface ItemTitleProps extends TextProps {
+    className?: string;
+}
+export interface ItemDescriptionProps extends TextProps {
+    className?: string;
+}
+export interface ItemActionsProps extends ViewProps {
+    className?: string;
+    children?: ReactNode;
+}
+export interface ItemHeaderProps extends ViewProps {
+    className?: string;
+    children?: ReactNode;
+}
+export interface ItemFooterProps extends ViewProps {
+    className?: string;
+    children?: ReactNode;
+}
+export declare const Item: import("react").ForwardRefExoticComponent<ItemProps & import("react").RefAttributes<View>> & {
+    Group: import("react").ForwardRefExoticComponent<ItemGroupProps & import("react").RefAttributes<View>>;
+    Separator: import("react").ForwardRefExoticComponent<ItemSeparatorProps & import("react").RefAttributes<View>>;
+    Media: import("react").ForwardRefExoticComponent<ItemMediaProps & import("react").RefAttributes<View>>;
+    Content: import("react").ForwardRefExoticComponent<ItemContentProps & import("react").RefAttributes<View>>;
+    Title: import("react").ForwardRefExoticComponent<ItemTitleProps & import("react").RefAttributes<import("react-native").Text>>;
+    Description: import("react").ForwardRefExoticComponent<ItemDescriptionProps & import("react").RefAttributes<import("react-native").Text>>;
+    Actions: import("react").ForwardRefExoticComponent<ItemActionsProps & import("react").RefAttributes<View>>;
+    Header: import("react").ForwardRefExoticComponent<ItemHeaderProps & import("react").RefAttributes<View>>;
+    Footer: import("react").ForwardRefExoticComponent<ItemFooterProps & import("react").RefAttributes<View>>;
+};
+export {};
+//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -1,9 +1,11 @@
 /**
  * Label — text that names a form field.
  *
- * Adapted from: heroui-inc/heroui-native src/components/label/ (root +
- * Label.Text anatomy, string children auto-wrapping, the required asterisk,
- * and the isInvalid / isDisabled recolouring).
+ * A string child is wrapped in `Label.Text` automatically, so the common case
+ * stays one line; pass the parts explicitly when the label needs more than
+ * text. `isRequired`, `isInvalid` and `isDisabled` are visual *and* semantic —
+ * they recolour and they set the accessibility state, so the two cannot drift
+ * apart.
  */
 import { type ReactNode } from 'react';
 import { View, type Text as RNText, type ViewProps } from 'react-native';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/label/index.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;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;AAEzE,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,0BAAuB,CAAC;AAiC7D,MAAM,WAAW,UAAW,SAAQ,SAAS;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yDAAyD;IACzD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,wDAAwD;IACxD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAqCD,MAAM,WAAW,cAAe,SAAQ,SAAS;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yCAAyC;IACzC,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AA2BD,eAAO,MAAM,KAAK;;CAEhB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/label/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;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;AAEzE,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,0BAAuB,CAAC;AAiC7D,MAAM,WAAW,UAAW,SAAQ,SAAS;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yDAAyD;IACzD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,wDAAwD;IACxD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAqCD,MAAM,WAAW,cAAe,SAAQ,SAAS;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yCAAyC;IACzC,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AA2BD,eAAO,MAAM,KAAK;;CAEhB,CAAC"}

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

@@ -0,0 +1,247 @@
+/**
+ * LineChart — a time series, drawn and animated on the UI thread.
+ *
+ * The chart is composed rather than configured: the grid, each series, the
+ * axis and the crosshair are separate children, so a chart that wants no grid
+ * simply does not have one. A single component with twenty booleans is how
+ * charts end up unreadable at the call site.
+ *
+ * ```tsx
+ * <LineChart data={visits} xDataKey="date">
+ *   <LineChart.Grid />
+ *   <LineChart.Area dataKey="visits" />
+ *   <LineChart.Line dataKey="visits" />
+ *   <LineChart.XAxis />
+ *   <LineChart.Tooltip />
+ * </LineChart>
+ * ```
+ *
+ * Internally 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 laid over the top. That split is not a detail — 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.
+ *
+ * Three things animate, each for a different reason:
+ *
+ * - **The reveal.** On mount the plot is uncovered left to right by an animated
+ *   clip rectangle. Everything inside shares that clip, so the line, its fill
+ *   and its markers arrive together rather than as three separate effects.
+ * - **The y-domain.** When the data changes the *scale* is tweened rather than
+ *   the path swapped, so a series that grows is redrawn against a moving axis
+ *   instead of jumping to a new shape. The reveal does not replay — it happened
+ *   once, and repeating it on every refresh turns a data update into an
+ *   animation.
+ * - **The crosshair.** A drag resolves the nearest index on the UI thread and
+ *   moves the line and the dots from there. Only the index crosses back into
+ *   JS, and only when it changes, so a drag costs a handful of re-renders
+ *   rather than one per frame.
+ *
+ * Colours come from the `--color-chart-*` tokens, so a chart follows the active
+ * theme and is put on brand by overriding those five in the app's own
+ * global.css. Nothing here hardcodes a hex.
+ */
+import { type ReactNode } from 'react';
+import { type ViewProps } from 'react-native';
+/**
+ * Which layer a part belongs to. Read off the component itself, so composition
+ * stays a flat list of children instead of two nested slots the caller has to
+ * remember the order of.
+ */
+type Layer = 'svg' | 'overlay';
+export type LineChartStatus = 'loading' | 'ready';
+export type LineChartCurve = 'monotone' | 'linear';
+export type LineChartDatum = Record<string, string | number | null | undefined>;
+/**
+ * The point under the crosshair, for something rendered *inside* the chart.
+ *
+ * A readout usually belongs in the card's header, which is outside this
+ * provider — use `onActiveIndexChange` for that. A hook cannot reach up out of
+ * the subtree it is called in, and pretending otherwise is how a component
+ * ends up with a context that has to wrap half the screen.
+ */
+export declare function useLineChart(): {
+    activeIndex: number;
+    activePoint: LineChartDatum | null;
+    xDataKey: string;
+};
+export interface LineChartProps extends ViewProps {
+    className?: string;
+    /** The rows. Each one is a point along the x-axis. */
+    data: LineChartDatum[];
+    /** Key holding the x label. Used by the axis and the crosshair readout. */
+    xDataKey?: string;
+    /**
+     * `loading` draws a flat skeleton with a sweep running along it, and morphs
+     * into the real series when it turns `ready`. One component throughout,
+     * rather than a spinner swapped for a chart — swapping loses the transition.
+     */
+    status?: LineChartStatus;
+    /** Width ÷ height. `2` is the wide card shape; `1.6` suits a narrow column. */
+    aspectRatio?: number;
+    /** Milliseconds for the reveal on mount. */
+    animationDuration?: number;
+    /** Milliseconds for the y-axis to settle after the data changes. */
+    domainDuration?: number;
+    /** Fix the y-axis instead of deriving it from the data. */
+    yDomain?: [number, number];
+    /** `monotone` never overshoots between points; `linear` joins them straight. */
+    curve?: LineChartCurve;
+    /**
+     * The point under the crosshair as it moves, and `-1`/`null` when the finger
+     * lifts. This is how a readout in the card's header gets its value — that
+     * header is outside the chart, so it cannot use `useLineChart`.
+     *
+     * Fires when the index changes, not per frame.
+     */
+    onActiveIndexChange?: (index: number, datum: LineChartDatum | null) => void;
+    /**
+     * Drop the axis padding so the line reaches the edges — for a sparkline with
+     * no grid, axis or crosshair, where the shape is the whole point.
+     */
+    compact?: boolean;
+    children?: ReactNode;
+}
+/** Imperative handle: re-run the reveal on demand, for a "replay" control. */
+export interface LineChartHandle {
+    replay: () => void;
+}
+export interface LineChartGridProps {
+    /** Horizontal rules across the plot. */
+    rows?: number;
+    color?: string;
+    /** Dash pattern, e.g. `"4,6"`. Omit for a solid rule. */
+    dashArray?: string;
+    opacity?: number;
+}
+/** Horizontal reference lines. Drawn under everything, outside the reveal clip. */
+declare function LineChartGrid({ rows, color, dashArray, opacity }: LineChartGridProps): import("react").JSX.Element;
+declare namespace LineChartGrid {
+    var displayName: string;
+    var layer: Layer;
+}
+export interface LineChartLineProps {
+    /** Key holding this series' y values. */
+    dataKey: string;
+    /**
+     * Stroke 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;
+    strokeWidth?: number;
+    /** Dash pattern, e.g. `"6,4"` — for a projection or a secondary series. */
+    dashArray?: string;
+    /** A dot at every point. Best kept for short series. */
+    showMarkers?: boolean;
+}
+/** One series. */
+declare function LineChartLine({ dataKey, color, colorIndex, strokeWidth, dashArray, showMarkers, }: LineChartLineProps): import("react").JSX.Element;
+declare namespace LineChartLine {
+    var displayName: string;
+    var layer: Layer;
+}
+export interface LineChartAreaProps {
+    dataKey: string;
+    color?: string;
+    colorIndex?: 1 | 2 | 3 | 4 | 5;
+    /** Opacity at the line. Fades to nothing at the baseline. */
+    opacity?: number;
+}
+/**
+ * The fill under a series. A separate child from the line, because a chart with
+ * two series usually wants the fill on only one of them — two translucent
+ * fills over each other make a third colour that means nothing.
+ */
+declare function LineChartArea({ dataKey, color, colorIndex, opacity }: LineChartAreaProps): import("react").JSX.Element;
+declare namespace LineChartArea {
+    var displayName: string;
+    var layer: Layer;
+}
+export interface LineChartSkeletonProps {
+    /** Milliseconds for one pass of the sweep. */
+    duration?: number;
+    color?: string;
+}
+/**
+ * The loading state: a flat rule where the series will be, with a highlight
+ * travelling along it. Drawn inside the same SVG rather than as an overlay, so
+ * arriving data is one tree changing rather than one view replacing another —
+ * which is what lets the flat line become the series instead of cutting to it.
+ */
+declare function LineChartSkeleton({ duration, color }: LineChartSkeletonProps): import("react").JSX.Element | null;
+declare namespace LineChartSkeleton {
+    var displayName: string;
+    var layer: Layer;
+}
+export interface LineChartXAxisProps {
+    /** How many labels to show. The rest are dropped, evenly. */
+    ticks?: number;
+    /** Turn a row into its label. Defaults to the value at `xDataKey`. */
+    format?: (datum: LineChartDatum, index: number) => string;
+    className?: string;
+}
+/**
+ * The x labels. Real text rather than SVG text, so they follow the theme's font
+ * and the platform's text scaling — SVG text does neither.
+ */
+declare function LineChartXAxis({ ticks, format, className }: LineChartXAxisProps): import("react").JSX.Element;
+declare namespace LineChartXAxis {
+    var displayName: string;
+    var layer: Layer;
+}
+export interface LineChartTooltipProps {
+    color?: string;
+    /**
+     * Float a small label at the crosshair showing the x-value and each series'
+     * value at that point — the minimal readout a drag wants. On by default.
+     */
+    showLabel?: boolean;
+    /** Format one series' value for the label. Defaults to a compact number. */
+    formatValue?: (value: number, key: string) => string;
+    /** Format the label's heading from the row. Defaults to the value at xDataKey. */
+    formatX?: (datum: LineChartDatum) => string;
+}
+/**
+ * The crosshair, the gesture that drives it, and the label that rides it.
+ *
+ * They live in the view layer: a gesture handler cannot be attached to an SVG
+ * node, and once the gesture is a view the crosshair may as well be one too —
+ * a 1px view moved by `translateX` costs less than re-rendering an SVG line.
+ * The label follows on the UI thread the same way; only its *text* crosses back
+ * into JS, and only when the active index changes.
+ *
+ * The hit area is the whole plot. A crosshair you have to land on the line to
+ * summon is a crosshair nobody finds.
+ */
+declare function LineChartTooltip({ color, showLabel, formatValue, formatX }: LineChartTooltipProps): import("react").JSX.Element | null;
+declare namespace LineChartTooltip {
+    var displayName: string;
+    var layer: Layer;
+}
+export interface LineChartLegendProps 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 LineChartLegend({ className, labels, ...props }: LineChartLegendProps): import("react").JSX.Element;
+declare namespace LineChartLegend {
+    var displayName: string;
+    var layer: Layer;
+}
+export declare const LineChart: import("react").ForwardRefExoticComponent<LineChartProps & import("react").RefAttributes<LineChartHandle>> & {
+    Grid: typeof LineChartGrid;
+    Area: typeof LineChartArea;
+    Line: typeof LineChartLine;
+    Skeleton: typeof LineChartSkeleton;
+    XAxis: typeof LineChartXAxis;
+    Tooltip: typeof LineChartTooltip;
+    Legend: typeof LineChartLegend;
+};
+export {};
+//# sourceMappingURL=index.d.ts.map

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

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