@kromatv/sdk 0.1.40-canary.0

package/types/ui/src/components/molecules/select/select.d.ts

@@ -0,0 +1,112 @@
+import { type ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import { type FocusableProps } from '#ui/components/atoms/focusable';
+import { type ControlSize } from '#ui/lib/field-shell';
+import { type SelectDismissReason, type SelectOpenDetails, type SelectOpenReason, type SelectOption } from './select-context';
+export type { SelectValueDetails } from './select-context';
+import { Indicator, Item, Media, type SelectItemProps } from './select-item';
+import { type SelectMultipleValueProps, type SelectSingleValueProps } from './select-selection';
+import type { SelectPresentation } from './select-surface';
+declare const triggerVariants: import("../../../core/types").SvFn<import("../../../core/types").StyleSlots<{
+    root: {
+        row: true;
+        align: "center";
+        bg: "surface2/72";
+        border: "borderStrong";
+        _hover: {
+            bg: "surface3";
+        };
+    };
+    ink: {
+        shrink: number;
+    };
+}>, {
+    readonly size: Record<ControlSize, {
+        root: {
+            gap: number;
+            px: number;
+            py: number;
+            radius: import("#ui/core").RadiusToken;
+            minH: number;
+        };
+        ink: {
+            fontSize: number;
+            lineHeight: number;
+        };
+    }>;
+    readonly invalid: {
+        readonly true: {
+            readonly root: {
+                readonly border: "danger";
+            };
+        };
+    };
+    readonly filled: {
+        readonly true: {
+            readonly ink: {
+                readonly color: "text";
+            };
+        };
+        readonly false: {
+            readonly ink: {
+                readonly color: "textDim";
+            };
+        };
+    };
+    readonly block: {
+        readonly true: {
+            readonly root: {
+                readonly self: "stretch";
+            };
+        };
+    };
+}>;
+interface SelectRootBase {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean, details: SelectOpenDetails) => void;
+    /** Names the control to assistive tech; the trigger announces it with what is
+     *  picked. Falls back to `placeholder`. */
+    label?: string;
+    /** What the trigger reads before anything is picked. No default: the product
+     *  is not in this file's language. */
+    placeholder?: string;
+    /** Where the options appear: `auto` (the default) asks the shell, and then
+     *  the platform - a dialog under a D-pad, an anchored popover under a pointer.
+     *  Naming one overrides both. */
+    presentation?: SelectPresentation;
+    disabled?: boolean;
+    /** A <Select.Trigger> and the <Select.Item>s, in any order. Only DIRECT
+     *  children are collected as options. */
+    children: ReactNode;
+}
+type SelectSingleRootProps = SelectRootBase & SelectSingleValueProps;
+type SelectMultipleRootProps = SelectRootBase & SelectMultipleValueProps;
+type SelectRootProps = SelectSingleRootProps | SelectMultipleRootProps;
+declare function Root(props: Readonly<SelectRootProps>): import("react").JSX.Element;
+interface SelectTriggerProps extends Omit<FocusableProps, 'children' | 'sv' | 'vars' | 'role' | 'label' | 'expanded' | 'disabled' | 'onPress' | 'style'> {
+    /** The control shell's size; see <TextField>. */
+    size?: ControlSize;
+    invalid?: boolean;
+    /** Stretch to the width of the parent. */
+    block?: boolean;
+    style?: StyleProp<ViewStyle>;
+    /** What the well holds. Defaults to <Select.Value>; the chevron is drawn
+     *  after it either way. */
+    children?: ReactNode;
+}
+declare function Trigger({ size, invalid, block, style, children, ...focusProps }: Readonly<SelectTriggerProps>): import("react").JSX.Element;
+/** What is picked, rendered inside the trigger: the option's mark and label, or
+ *  the placeholder while nothing is. A `multiple` select names the first pick
+ *  and counts the rest; assistive tech hears them all. */
+declare function Value(): import("react").JSX.Element;
+declare const Select: {
+    Root: typeof Root;
+    Trigger: typeof Trigger;
+    Value: typeof Value;
+    Item: typeof Item;
+    Media: typeof Media;
+    Indicator: typeof Indicator;
+};
+export type { SelectDismissReason, SelectItemProps, SelectMultipleRootProps, SelectOpenDetails, SelectOpenReason, SelectOption, SelectPresentation, SelectRootProps, SelectSingleRootProps, SelectTriggerProps, };
+export { Select, triggerVariants as selectTriggerVariants };

package/types/ui/src/components/molecules/stat-card/index.d.ts

@@ -0,0 +1 @@
+export * from './stat-card';

package/types/ui/src/components/molecules/stat-card/stat-card.d.ts

@@ -0,0 +1,46 @@
+import type { ReactNode } from 'react';
+import { type SurfaceProps } from '#ui/components/atoms/surface';
+import type { ColorToken } from '#ui/core';
+type StatInk = ColorToken | (string & {});
+interface StatCardRootProps extends Omit<SurfaceProps, 'children'> {
+    /** The card: a `<StatCard.Label>`, and the `<StatCard.Value>` under it. */
+    children?: ReactNode;
+}
+declare function Root({ children, ...surface }: Readonly<StatCardRootProps>): import("react").JSX.Element;
+/** What the number is called. */
+declare function Label({ children }: Readonly<{
+    children: ReactNode;
+}>): import("react").JSX.Element;
+interface StatCardValueProps {
+    /** A quiet tail on the number's baseline: a percentage, a budget, "To". */
+    unit?: string;
+    /** Ink for the number. Defaults to the text colour; a rate that has a hue
+     *  (CPU red, success green) states it here. */
+    color?: StatInk;
+    children: ReactNode;
+}
+/** The number itself, at display size. */
+declare function Value({ unit, color, children }: Readonly<StatCardValueProps>): import("react").JSX.Element;
+/**
+ * One number that matters, on a card.
+ *
+ * ```tsx
+ * <StatCard.Root>
+ *   <StatCard.Label>Sessions</StatCard.Label>
+ *   <StatCard.Value>4</StatCard.Value>
+ * </StatCard.Root>
+ *
+ * <StatCard.Root>
+ *   <StatCard.Label>Stockage</StatCard.Label>
+ *   <StatCard.Value unit="To" color="accent">1,2</StatCard.Value>
+ *   <Progress value={0.62} />
+ * </StatCard.Root>
+ * ```
+ */
+declare const StatCard: {
+    Root: typeof Root;
+    Label: typeof Label;
+    Value: typeof Value;
+};
+export type { StatCardRootProps, StatCardValueProps };
+export { StatCard };

package/types/ui/src/components/molecules/stepper/index.d.ts

@@ -0,0 +1 @@
+export * from './stepper';

package/types/ui/src/components/molecules/stepper/stepper-context.d.ts

@@ -0,0 +1,44 @@
+import type { ControlMetrics, ControlSize } from '#ui/lib/field-shell';
+import type { StepperFlow } from './use-steps';
+type StepperOrientation = 'horizontal' | 'vertical';
+interface StepperStep {
+    /** One-based. */
+    position: number;
+    count: number;
+    title?: string;
+    complete: boolean;
+}
+interface StepperState {
+    flow: StepperFlow;
+    size: ControlSize;
+    orientation: StepperOrientation;
+    label: string;
+    stepLabel: (step: StepperStep) => string;
+    join: (value: string) => () => void;
+    mark: (value: string, disabled: boolean) => void;
+}
+declare const Context: import("react").Context<StepperState | null>, useStepperPart: (part: string) => StepperState;
+/**
+ * The flow the surrounding `<Stepper.Root>` is running. Its callbacks keep one
+ * identity for the life of the flow.
+ */
+declare function useStepper(): StepperFlow;
+interface StepperItemState {
+    index: number;
+    active: boolean;
+    complete: boolean;
+    reachable: boolean;
+    last: boolean;
+    select: () => void;
+}
+/** One step's own state, for a caller drawing an indicator of its own. It
+ *  reports; what puts a step IN the flow is rendering a `<Stepper.Item>`. */
+declare function useStepperItem(value: string): StepperItemState;
+declare function stepShape(metrics: ControlMetrics): {
+    marker: number;
+    gap: number;
+    step: number;
+    connector: number;
+};
+export type { StepperItemState, StepperOrientation, StepperState, StepperStep };
+export { Context, stepShape, useStepper, useStepperItem, useStepperPart };

package/types/ui/src/components/molecules/stepper/stepper-item.d.ts

@@ -0,0 +1,110 @@
+import { type ReactNode } from 'react';
+import { type IconName, type IconProps } from '#ui/components/atoms/icon';
+import { type StyleDecl } from '#ui/core';
+declare const stepperVariants: import("../../../core/types").SvFn<{
+    root: StyleDecl;
+    marker: StyleDecl;
+    number: StyleDecl;
+    label: StyleDecl;
+    hint: StyleDecl;
+    glyph: Pick<IconProps, 'color' | 'size'>;
+}, {
+    readonly size: Record<import("#ui/lib/field-shell").ControlSize, {
+        root: {
+            gap: number;
+            px: number;
+            py: number;
+            radius: import("#ui/core").RadiusToken;
+        };
+        marker: {
+            w: number;
+            h: number;
+        };
+        number: {
+            fontSize: number;
+            lineHeight: number;
+        };
+        label: {
+            fontSize: number;
+            lineHeight: number;
+        };
+        hint: {
+            fontSize: number;
+            lineHeight: number;
+        };
+        glyph: {
+            size: number;
+        };
+    }>;
+    readonly state: {
+        readonly ahead: {
+            readonly marker: {
+                readonly border: "borderStrong";
+            };
+            readonly number: {
+                readonly color: "text/35";
+            };
+            readonly label: {
+                readonly color: "text/40";
+            };
+            readonly glyph: {
+                readonly color: "text/35";
+            };
+        };
+        readonly current: {
+            readonly marker: {
+                readonly bg: "accent";
+            };
+            readonly number: {
+                readonly color: "accentInk";
+            };
+            readonly label: {
+                readonly color: "text";
+            };
+            readonly glyph: {
+                readonly color: "accentInk";
+            };
+        };
+        readonly complete: {
+            readonly marker: {
+                readonly bg: "accentSoft";
+            };
+            readonly number: {
+                readonly color: "accentText";
+            };
+            readonly label: {
+                readonly color: "text/75";
+            };
+            readonly glyph: {
+                readonly color: "accentText";
+            };
+        };
+    };
+}>;
+interface StepperItemProps {
+    value: string;
+    /** A glyph in the marker instead of the step's number. A complete step draws
+     *  the tick whatever this says. */
+    icon?: IconName;
+    /** Names the step to assistive tech. It draws NOTHING, and the position and
+     *  the state are added to it: reach for it only where the children carry no
+     *  plain text. */
+    label?: string;
+    /** A step nothing may enter: `Previous`, `Next` and the arrow keys pass over
+     *  it rather than stopping on it. */
+    disabled?: boolean;
+    children?: ReactNode;
+}
+/** The WHOLE row is the control: one D-pad stop, and the marker is a face
+ *  rather than a second target. Rendering one is what puts the step in the
+ *  flow, at whatever depth it sits. */
+declare function Item({ value, icon, label, disabled, children }: Readonly<StepperItemProps>): import("react").JSX.Element;
+/** The step's drawn title; its plain text is the step's accessible name. */
+declare function Label({ children }: Readonly<{
+    children: ReactNode;
+}>): import("react").JSX.Element;
+declare function Hint({ children }: Readonly<{
+    children: ReactNode;
+}>): import("react").JSX.Element;
+export type { StepperItemProps };
+export { Hint, Item, Label, stepperVariants };

package/types/ui/src/components/molecules/stepper/stepper-list.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+interface StepperListProps {
+    /** The steps, at any depth: a `<Stepper.Item>` joins the flow by rendering,
+     *  so a component of your own holding them works. */
+    children?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+/** The indicator: the steps in order, with the rule between them. */
+declare function List({ children, style }: Readonly<StepperListProps>): import("react").JSX.Element;
+export type { StepperListProps };
+export { List };

package/types/ui/src/components/molecules/stepper/stepper.d.ts

@@ -0,0 +1,97 @@
+import { type ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import { type ControlSize } from '#ui/lib/field-shell';
+import { type StepperOrientation, type StepperStep } from './stepper-context';
+import { Hint, Item, Label } from './stepper-item';
+import { List } from './stepper-list';
+import { type StepperValueDetails } from './use-steps';
+interface StepperRootProps {
+    /** Present: you own the step being shown (controlled). Absent: the flow runs
+     *  itself from `defaultValue` and reports through `onValueChange`. */
+    value?: string;
+    /** Where the flow opens, defaulting to the first step. It also seeds how far
+     *  the flow counts as having been. */
+    defaultValue?: string;
+    onValueChange?: (next: string, details: StepperValueDetails) => void;
+    /** The steps that are done, for a flow whose owner decides that. Left out, a
+     *  step is done once the flow has been past it, and a step ahead of its
+     *  furthest point cannot be gone to. */
+    complete?: readonly string[];
+    /** Names the indicator to assistive tech: what is being stepped through. */
+    label: string;
+    /** Defaults to `horizontal`. */
+    orientation?: StepperOrientation;
+    /** The control shell's size; see <TextField>. */
+    size?: ControlSize;
+    /** The accessible name of one step, defaulting to `Étape 2 sur 4 : Compte`
+     *  with `, terminée` on a step the flow is past. */
+    stepLabel?: (step: StepperStep) => string;
+    /** A `<Stepper.List>`, the `<Stepper.Panel>`s and whatever drives them. A
+     *  step joins the flow by RENDERING, at any depth and through a component of
+     *  your own, in the order the steps mount. A Root that ends up with none
+     *  throws rather than drawing a dead control. */
+    children?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+declare function Root({ value, defaultValue, onValueChange, complete, label, orientation, size, stepLabel, children, style, }: Readonly<StepperRootProps>): import("react").JSX.Element;
+interface StepperPanelProps {
+    value: string;
+    /** Keep the panel mounted while another step is showing, so what was typed in
+     *  it is still there on the way back. Hidden through `<Activity>`: its effects
+     *  stop and it leaves the tab order and the D-pad ring. Defaults to false. */
+    keepMounted?: boolean;
+    children?: ReactNode;
+}
+/** Only the step being shown draws a panel. */
+declare function Panel({ value, keepMounted, children }: Readonly<StepperPanelProps>): import("react").JSX.Element | null;
+interface StepperMoveProps {
+    /** The word on the button, which is also its accessible name. Defaults to
+     *  `Précédent` and `Suivant`. */
+    label?: string;
+    /** The ends of the flow already disable themselves. */
+    disabled?: boolean;
+}
+declare function Previous({ label, disabled }: Readonly<StepperMoveProps>): import("react").JSX.Element;
+declare function Next({ label, disabled }: Readonly<StepperMoveProps>): import("react").JSX.Element;
+/**
+ * A flow walked one step at a time.
+ *
+ * ```tsx
+ * <Stepper.Root label="Configuration" defaultValue="account">
+ *   <Stepper.List>
+ *     <Stepper.Item value="account">
+ *       <Stepper.Label>Compte</Stepper.Label>
+ *       <Stepper.Hint>Adresse et mot de passe</Stepper.Hint>
+ *     </Stepper.Item>
+ *     <Stepper.Item value="library">
+ *       <Stepper.Label>Bibliothèque</Stepper.Label>
+ *     </Stepper.Item>
+ *   </Stepper.List>
+ *   <Stepper.Panel value="account">…</Stepper.Panel>
+ *   <Stepper.Panel value="library">…</Stepper.Panel>
+ *   <Box row gap={12}>
+ *     <Stepper.Previous />
+ *     <Stepper.Next />
+ *   </Box>
+ * </Stepper.Root>
+ * ```
+ */
+declare const Stepper: {
+    Root: typeof Root;
+    List: typeof List;
+    Item: typeof Item;
+    Label: typeof Label;
+    Hint: typeof Hint;
+    Panel: typeof Panel;
+    Previous: typeof Previous;
+    Next: typeof Next;
+};
+export type { StepperItemState, StepperOrientation, StepperStep } from './stepper-context';
+export { useStepper, useStepperItem } from './stepper-context';
+export type { StepperItemProps } from './stepper-item';
+export { stepperVariants } from './stepper-item';
+export type { StepperListProps } from './stepper-list';
+export type { StepperFlow, StepperFlowOptions, StepperValueDetails } from './use-steps';
+export { useSteps } from './use-steps';
+export type { StepperMoveProps, StepperPanelProps, StepperRootProps };
+export { Stepper };

package/types/ui/src/components/molecules/stepper/use-steps.d.ts

@@ -0,0 +1,40 @@
+type StepReason = 'next' | 'previous' | 'goTo' | 'reset';
+interface StepperValueDetails {
+    reason: StepReason;
+}
+interface StepperFlowOptions {
+    value?: string;
+    /** Where an uncontrolled flow opens. Defaults to the first step, and seeds
+     *  how far the flow counts as having been. */
+    defaultValue?: string;
+    onValueChange?: (next: string, details: StepperValueDetails) => void;
+    /** The steps that are done, when the caller keeps that itself. Left out, a
+     *  step counts as done once the flow has been past it. */
+    complete?: readonly string[];
+    /** Steps nothing may enter: skipped by `next`, `previous` and the arrow keys
+     *  rather than stopped on. */
+    disabled?: readonly string[];
+}
+interface StepperFlow {
+    steps: readonly string[];
+    value: string;
+    index: number;
+    count: number;
+    first: boolean;
+    last: boolean;
+    canGoNext: boolean;
+    canGoPrevious: boolean;
+    next: () => void;
+    previous: () => void;
+    /** Goes to any step the flow holds, ahead of its furthest point included. */
+    goTo: (step: string) => void;
+    /** Back to the first step, forgetting how far the flow had been. */
+    reset: () => void;
+    complete: (step: string) => boolean;
+    reachable: (step: string) => boolean;
+}
+/** The wizard state machine, with no component around it: hand it the step ids
+ *  in order. */
+declare function useSteps(steps: readonly string[], options?: StepperFlowOptions): StepperFlow;
+export type { StepperFlow, StepperFlowOptions, StepperValueDetails };
+export { useSteps };

package/types/ui/src/components/molecules/theme-switch/index.d.ts

@@ -0,0 +1 @@
+export * from './theme-switch';

package/types/ui/src/components/molecules/theme-switch/theme-switch.d.ts

@@ -0,0 +1,19 @@
+import { type StyleProp, type ViewStyle } from 'react-native';
+import { type ThemeMode } from '#ui/core/theme-mode';
+import type { ControlSize } from '#ui/lib/field-shell';
+export interface ThemeSwitchProps {
+    size?: ControlSize;
+    /** Accessible name of the group. Defaults to the product's French. */
+    label?: string;
+    /** Accessible names of the three modes, since the glyphs carry no words.
+     *  Defaults to the product's French. */
+    labels?: Readonly<Record<ThemeMode, string>>;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Dark / light / system, persisted where the platform can act on it: a cookie
+ * on the web, so the server renders the chosen ground, and the device store on
+ * a native target. The stored mode is read in an effect, not during render, or
+ * the server and the client disagree and hydration warns.
+ */
+export declare function ThemeSwitch({ size, label, labels, style, }: Readonly<ThemeSwitchProps>): import("react").JSX.Element;

package/types/ui/src/components/molecules/timeline/index.d.ts

@@ -0,0 +1 @@
+export * from './timeline';

package/types/ui/src/components/molecules/timeline/timeline.d.ts

@@ -0,0 +1,55 @@
+import { type ReactNode } from 'react';
+import { type IconName } from '#ui/components/atoms/icon';
+import { type ControlSize } from '#ui/lib/field-shell';
+/** What an entry is: something that happened (`event`), the state the thing is
+ * in right now (`current`), or where the sequence began (`origin`). */
+type TimelineTone = 'event' | 'current' | 'origin';
+interface TimelineRootProps {
+    /** How loud the entries read, defaulting to the app's entry size
+     *  (`setEntryDefaults`). */
+    size?: ControlSize;
+    /** The entries, newest first by convention. Only a DIRECT element is counted,
+     *  which is what lets the last one stop the rail. */
+    children?: ReactNode;
+}
+declare function Root({ size, children }: Readonly<TimelineRootProps>): import("react").JSX.Element;
+interface TimelineItemProps {
+    /** The node's face. Defaults to `event`. */
+    tone?: TimelineTone;
+    /** A glyph in place of the node's dot. */
+    icon?: IconName;
+    /** What happened, in one line. Anything longer goes in `children`. */
+    title?: ReactNode;
+    /** The particulars under it: a short revision, a duration, a code. */
+    detail?: ReactNode;
+    /** Makes the WHOLE entry the control - one D-pad stop and a pointer-sized hit
+     *  area - rather than putting a second control inside it. */
+    onPress?: () => void;
+    /** Names a pressable entry to assistive tech. Defaults to `title` where that
+     *  is plain text. */
+    label?: string;
+    children?: ReactNode;
+}
+declare function Item({ tone, icon, title, detail, onPress, label, children, }: Readonly<TimelineItemProps>): import("react").JSX.Element;
+/**
+ * A sequence of events down a rail.
+ *
+ * ```tsx
+ * <Timeline.Root>
+ *   <Timeline.Item tone="current" title="Uncommitted changes" />
+ *   <Timeline.Item
+ *     icon="git-commit"
+ *     title="fix: the range request is clamped"
+ *     detail="9db893fe · yesterday"
+ *     onPress={open}
+ *   />
+ *   <Timeline.Item tone="origin" title="Added 27 Jul 2026" />
+ * </Timeline.Root>
+ * ```
+ */
+declare const Timeline: {
+    Root: typeof Root;
+    Item: typeof Item;
+};
+export type { TimelineItemProps, TimelineRootProps, TimelineTone };
+export { Timeline };

package/types/ui/src/components/molecules/tooltip/index.d.ts

@@ -0,0 +1 @@
+export * from './tooltip';

package/types/ui/src/components/molecules/tooltip/tooltip.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+interface TooltipProps {
+    /** Already translated. */
+    label: string;
+    children: ReactNode;
+}
+declare function Tooltip({ children }: Readonly<TooltipProps>): import("react").JSX.Element;
+export type { TooltipProps };
+export { Tooltip };

package/types/ui/src/components/molecules/tooltip/tooltip.web.d.ts

@@ -0,0 +1,4 @@
+import type { TooltipProps } from './tooltip';
+declare function Tooltip({ label, children }: Readonly<TooltipProps>): import("react").JSX.Element;
+export type { TooltipProps } from './tooltip';
+export { Tooltip };

package/types/ui/src/components/organisms/chart/chart-context.d.ts

@@ -0,0 +1,38 @@
+import type { ColorValue } from '#ui/core';
+import type { ChartBox, ChartDomain, ChartPoint } from './chart-scale';
+/** How a series is drawn. */
+export type ChartMark = 'line' | 'area' | 'bar';
+export interface ChartSeries {
+    /** The field this series reads off every point. */
+    series: string;
+    /** What the legend, the tooltip and the summary call it. */
+    label?: string;
+    /** The slot this series' position earned, or the paint the mark asked for. */
+    color: ColorValue;
+    mark: ChartMark;
+    column: readonly (number | null)[];
+    /** Where a stacked bar's foot sits, per sample. */
+    base?: readonly number[];
+    /** Which stack a bar belongs to. Bars sharing one round the stack's outer
+     *  corners between them and leave every join square. */
+    stackAt?: number;
+}
+export interface ChartState {
+    data: readonly ChartPoint[];
+    count: number;
+    /** The drawable box, with whatever the axes reserved already taken off. */
+    plot: ChartBox;
+    domain: ChartDomain;
+    series: readonly ChartSeries[];
+    /** True once a bar is drawn: a sample owns a slice of the width rather than
+     *  a position on it, and the cursor picks the slice. */
+    band: boolean;
+    /** What each sample is called along the bottom edge. */
+    labels: readonly string[];
+    format: (value: number) => string;
+    label?: string;
+    active: number | null;
+    setActive: (index: number | null) => void;
+}
+declare const ChartContext: import("react").Context<ChartState | null>, useChart: (part: string) => ChartState;
+export { ChartContext, useChart };

package/types/ui/src/components/organisms/chart/chart-marks.d.ts

@@ -0,0 +1,32 @@
+import { type ColorValue } from '#ui/core';
+import { type ChartCurve } from './chart-path';
+interface ChartMarkProps {
+    /** The field on a point this series draws. */
+    series: string;
+    /** What the legend and the tooltip call it. Nothing draws it on the plot. */
+    label?: string;
+    /** Opaque paint, defaulting to the data palette slot this mark's position
+     *  earns. A wash is drawn with an opacity, never with an alpha on the paint. */
+    color?: ColorValue;
+}
+interface ChartTraceProps extends ChartMarkProps {
+    /** How the trace gets from one sample to the next. `monotone` is a smooth
+     *  cubic that cannot leave the range of the two samples it joins; `step` holds
+     *  a value until the next sample replaces it; `linear` joins them straight.
+     *  Defaults to `monotone`. */
+    curve?: ChartCurve;
+    /** The trace's width in px. */
+    thickness?: number;
+}
+interface ChartBarProps extends ChartMarkProps {
+    /** Stand on the bars declared before this one rather than beside them. */
+    stack?: boolean;
+}
+/** One series as an open trace. */
+declare function Line({ series, curve, thickness }: Readonly<ChartTraceProps>): import("react").JSX.Element | null;
+/** One series as a trace over a wash down to the baseline. */
+declare function Area({ series, curve, thickness }: Readonly<ChartTraceProps>): import("react").JSX.Element | null;
+/** One series as a bar per sample. */
+declare function Bar({ series }: Readonly<ChartBarProps>): import("react").JSX.Element | null;
+export type { ChartBarProps, ChartMarkProps, ChartTraceProps };
+export { Area, Bar, Line };