@wick-charts/react 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,419 @@
+import { andromeda } from '@wick-charts/core';
+import { AxisBound } from '@wick-charts/core';
+import { AxisConfig } from '@wick-charts/core';
+import { ayuMirage } from '@wick-charts/core';
+import { BarSeriesOptions } from '@wick-charts/core';
+import { BarStacking } from '@wick-charts/core';
+import { buildTheme } from '@wick-charts/core';
+import { CandlestickSeriesOptions } from '@wick-charts/core';
+import { catppuccin } from '@wick-charts/core';
+import { ChartInstance } from '@wick-charts/core';
+import { ChartLayout } from '@wick-charts/core';
+import { ChartOptions } from '@wick-charts/core';
+import { ChartTheme } from '@wick-charts/core';
+import { createTheme } from '@wick-charts/core';
+import { CrosshairPosition } from '@wick-charts/core';
+import { CSSProperties } from 'react';
+import { darkTheme } from '@wick-charts/core';
+import { detectInterval } from '@wick-charts/core';
+import { dracula } from '@wick-charts/core';
+import { formatDate } from '@wick-charts/core';
+import { formatTime } from '@wick-charts/core';
+import { githubLight } from '@wick-charts/core';
+import { gruvbox } from '@wick-charts/core';
+import { handwritten } from '@wick-charts/core';
+import { highContrast } from '@wick-charts/core';
+import { JSX as JSX_2 } from 'react/jsx-runtime';
+import { lavenderMist } from '@wick-charts/core';
+import { lightPink } from '@wick-charts/core';
+import { lightTheme } from '@wick-charts/core';
+import { LineData } from '@wick-charts/core';
+import { LineSeriesOptions } from '@wick-charts/core';
+import { materialPalenight } from '@wick-charts/core';
+import { minimalLight } from '@wick-charts/core';
+import { mintBreeze } from '@wick-charts/core';
+import { monokaiPro } from '@wick-charts/core';
+import { nightOwl } from '@wick-charts/core';
+import { normalizeTime } from '@wick-charts/core';
+import { OHLCData } from '@wick-charts/core';
+import { OHLCInput } from '@wick-charts/core';
+import { oneDarkPro } from '@wick-charts/core';
+import { panda } from '@wick-charts/core';
+import { peachCream } from '@wick-charts/core';
+import { PieSeriesOptions } from '@wick-charts/core';
+import { PieSliceData } from '@wick-charts/core';
+import { Provider } from 'react';
+import { quietLight } from '@wick-charts/core';
+import { ReactNode } from 'react';
+import { rosePineDawn } from '@wick-charts/core';
+import { sandDune } from '@wick-charts/core';
+import { SeriesType } from '@wick-charts/core';
+import { solarizedLight } from '@wick-charts/core';
+import { StackingMode } from '@wick-charts/core';
+import { ThemeConfig } from '@wick-charts/core';
+import { ThemePreset } from '@wick-charts/core';
+import { themes } from '@wick-charts/core';
+import { TimePoint } from '@wick-charts/core';
+import { TimePointInput } from '@wick-charts/core';
+import { TimeValue } from '@wick-charts/core';
+import { Typography } from '@wick-charts/core';
+import { VisibleRange } from '@wick-charts/core';
+import { XAxisConfig } from '@wick-charts/core';
+import { YAxisConfig } from '@wick-charts/core';
+import { YRange } from '@wick-charts/core';
+
+export { andromeda }
+
+export { AxisBound }
+
+export { AxisConfig }
+
+export { ayuMirage }
+
+export declare function BarSeries({ data, options, label, id: idProp, onSeriesId }: BarSeriesProps): null;
+
+export { BarSeriesOptions }
+
+declare interface BarSeriesProps {
+    /** Array of datasets — one per layer. A single-layer bar chart uses `[data]`. */
+    data: TimePoint[][];
+    options?: Partial<BarSeriesOptions>;
+    /** Display label shown in the tooltip. */
+    label?: string;
+    /** Stable series ID. Prefer this over `onSeriesId` — same value across remounts. */
+    id?: string;
+    /** @deprecated Use the `id` prop instead. */
+    onSeriesId?: (id: string) => void;
+}
+
+export { BarStacking }
+
+export { buildTheme }
+
+export declare function CandlestickSeries({ data, options, id: idProp, onSeriesId }: CandlestickSeriesProps): null;
+
+export { CandlestickSeriesOptions }
+
+declare interface CandlestickSeriesProps {
+    data: OHLCData[];
+    options?: Partial<CandlestickSeriesOptions>;
+    /** Stable series ID. Prefer this over `onSeriesId` — same value across remounts. */
+    id?: string;
+    /** @deprecated Use the `id` prop instead. */
+    onSeriesId?: (id: string) => void;
+}
+
+export { catppuccin }
+
+/**
+ * Top-level React wrapper that creates a {@link ChartInstance} and provides it to children via context.
+ * Owns the DOM container and canvas lifecycle; renders children as an overlay layer.
+ * Detects `<Legend>` children and renders them outside the chart area.
+ */
+export declare function ChartContainer({ children, theme, axis, padding, gradient, interactive, grid, style, className }: ChartContainerProps): JSX_2.Element;
+
+/** Props for the {@link ChartContainer} component. */
+declare interface ChartContainerProps {
+    /** Series components and UI overlays (Tooltip, TimeAxis, etc.) rendered inside the chart. */
+    children?: ReactNode;
+    /** Visual theme. Changing this at runtime will update all themed elements. */
+    theme?: ChartTheme;
+    /** Grouped axis configuration (Y/X visibility, bounds, sizing). */
+    axis?: AxisConfig;
+    /**
+     * Viewport padding. `top`/`bottom` are in pixels. `left`/`right` accept either pixels (`50`)
+     * or data intervals (`{ intervals: 3 }`). Set to 0 for edge-to-edge sparklines. Applied on mount only.
+     * Defaults: `{ top: 20, bottom: 20, right: { intervals: 3 }, left: { intervals: 0 } }`.
+     */
+    padding?: {
+        top?: number;
+        bottom?: number;
+        right?: number | {
+            intervals: number;
+        };
+        left?: number | {
+            intervals: number;
+        };
+    };
+    /** Show the chart background gradient. Defaults to true. */
+    gradient?: boolean;
+    /** Enable zoom, pan, and crosshair interactions. Defaults to true. */
+    interactive?: boolean;
+    /** Show the background grid. Defaults to true. */
+    grid?: boolean;
+    style?: CSSProperties;
+    className?: string;
+}
+
+export { ChartInstance }
+
+export { ChartLayout }
+
+export { ChartOptions }
+
+export { ChartTheme }
+
+export { createTheme }
+
+export declare function Crosshair(): JSX_2.Element | null;
+
+export { CrosshairPosition }
+
+export { darkTheme }
+
+export { detectInterval }
+
+export { dracula }
+
+export { formatDate }
+
+export { formatTime }
+
+export { githubLight }
+
+export { gruvbox }
+
+export { handwritten }
+
+export { highContrast }
+
+export { lavenderMist }
+
+export declare function Legend({ items, position, mode }: LegendProps): JSX_2.Element | null;
+
+export declare interface LegendItem {
+    label: string;
+    color: string;
+}
+
+export declare interface LegendProps {
+    /** Override auto-detected items. When omitted, derived from series layers. */
+    items?: LegendItem[];
+    /** Layout position. Default: 'bottom'. */
+    position?: 'bottom' | 'right';
+    /**
+     * Click behavior:
+     * - `'toggle'` — click toggles individual items on/off (default)
+     * - `'solo'` — click shows only that item; click again shows all
+     */
+    mode?: 'toggle' | 'solo';
+}
+
+export { lightPink }
+
+export { lightTheme }
+
+export { LineData }
+
+export declare function LineSeries({ data, options, label, id: idProp, onSeriesId }: LineSeriesProps): null;
+
+export { LineSeriesOptions }
+
+declare interface LineSeriesProps {
+    /** Array of datasets — one per layer. A single line uses `[data]`. */
+    data: TimePoint[][];
+    options?: Partial<LineSeriesOptions>;
+    label?: string;
+    /** Stable series ID. Prefer this over `onSeriesId` — same value across remounts. */
+    id?: string;
+    /** @deprecated Use the `id` prop instead. */
+    onSeriesId?: (id: string) => void;
+}
+
+export { materialPalenight }
+
+export { minimalLight }
+
+export { mintBreeze }
+
+export { monokaiPro }
+
+export { nightOwl }
+
+export { normalizeTime }
+
+export declare function NumberFlow({ value, format, locale, spinDuration, className, style }: NumberFlowProps): JSX_2.Element;
+
+declare interface NumberFlowProps {
+    value: number;
+    format?: Intl.NumberFormatOptions;
+    locale?: string;
+    spinDuration?: number;
+    className?: string;
+    style?: CSSProperties;
+}
+
+export { OHLCData }
+
+export { OHLCInput }
+
+export { oneDarkPro }
+
+export { panda }
+
+export { peachCream }
+
+export declare function PieLegend({ seriesId, format }: PieLegendProps): JSX_2.Element | null;
+
+export declare type PieLegendFormat = 'value' | 'percent';
+
+export declare interface PieLegendProps {
+    seriesId: string;
+    /** Display format: 'value' shows absolute + percent, 'percent' shows only percent. Default: 'value'. */
+    format?: PieLegendFormat;
+}
+
+/** Pie chart series. Set `options.innerRadiusRatio` > 0 for donut. */
+export declare function PieSeries({ data, options, id: idProp, onSeriesId }: PieSeriesProps): null;
+
+export { PieSeriesOptions }
+
+declare interface PieSeriesProps {
+    data: PieSliceData[];
+    options?: Partial<PieSeriesOptions>;
+    /** Stable series ID. Prefer this over `onSeriesId` — same value across remounts. */
+    id?: string;
+    /** @deprecated Use the `id` prop instead. */
+    onSeriesId?: (id: string) => void;
+}
+
+export { PieSliceData }
+
+/** Tooltip for pie/donut charts. Shows hovered slice label, value, and percentage. */
+export declare function PieTooltip({ seriesId }: PieTooltipProps): JSX_2.Element | null;
+
+declare interface PieTooltipProps {
+    seriesId: string;
+}
+
+export { quietLight }
+
+export { rosePineDawn }
+
+export { sandDune }
+
+export { SeriesType }
+
+export { solarizedLight }
+
+export declare function Sparkline({ data, theme, variant, valuePosition, formatValue, label, sublabel, color, negativeColor, areaFill, width, height, lineWidth, gradient, style, }: SparklineProps): JSX_2.Element;
+
+export declare interface SparklineProps {
+    data: TimePoint[];
+    theme: ChartTheme;
+    /** 'line' (default) or 'bar' */
+    variant?: SparklineVariant;
+    /** Where to show the value label */
+    valuePosition?: SparklineValuePosition;
+    /** Custom format for the value */
+    formatValue?: (value: number) => string;
+    /** Label text above the value */
+    label?: string;
+    /** Sublabel text below the value (defaults to the change %) */
+    sublabel?: string;
+    /** Line/bar color override (defaults to theme) */
+    color?: string;
+    /** Secondary color for negative bars */
+    negativeColor?: string;
+    /** Show area fill under line */
+    areaFill?: boolean;
+    /** Chart width (default: 140) */
+    width?: number;
+    /** Overall height (default: 48) */
+    height?: number;
+    /** Line width (default: 1.5) */
+    lineWidth?: number;
+    /** Show chart background gradient (default: true) */
+    gradient?: boolean;
+    /** Container style override */
+    style?: CSSProperties;
+}
+
+export declare type SparklineValuePosition = 'left' | 'right' | 'none';
+
+export declare type SparklineVariant = 'line' | 'bar';
+
+export { StackingMode }
+
+export { ThemeConfig }
+
+export { ThemePreset }
+
+export declare const ThemeProvider: Provider<ChartTheme | null>;
+
+export { themes }
+
+declare function TimeAxis(): JSX_2.Element;
+export { TimeAxis }
+export { TimeAxis as XAxis }
+
+export { TimePoint }
+
+export { TimePointInput }
+
+export { TimeValue }
+
+/**
+ * Two-part tooltip:
+ * 1. Compact legend always visible in top-left
+ * 2. Floating glass tooltip near cursor on hover
+ */
+export declare function Tooltip({ seriesId, sort, showLegend, legend }: TooltipProps): JSX_2.Element | null;
+
+/**
+ * Props for the {@link Tooltip} component.
+ * By default shows all series. Use `seriesId` to show one, or `sort` to order values.
+ */
+declare interface TooltipProps {
+    /** Show only this series. When omitted, show all series. */
+    seriesId?: string;
+    /** Sort order for line values when showing all series (default: 'none'). */
+    sort?: TooltipSort;
+    /** Show the compact legend strip in the top-left corner (default: true). */
+    showLegend?: boolean;
+    /** @deprecated Use `showLegend` instead. */
+    legend?: boolean;
+}
+
+/** Sort order for multi-series tooltip values. */
+export declare type TooltipSort = 'none' | 'asc' | 'desc';
+
+export { Typography }
+
+export declare function useChartInstance(): ChartInstance;
+
+export declare function useCrosshairPosition(chart: ChartInstance): CrosshairPosition | null;
+
+export declare function useLastYValue(chart: ChartInstance, seriesId: string): {
+    value: number;
+    isLive: boolean;
+} | null;
+
+export declare function usePreviousClose(chart: ChartInstance, seriesId: string): number | null;
+
+/** Read the current chart theme from context. Must be inside a ThemeProvider. */
+export declare function useTheme(): ChartTheme;
+
+export declare function useVisibleRange(chart: ChartInstance): VisibleRange;
+
+export declare function useYRange(chart: ChartInstance): YRange;
+
+export { VisibleRange }
+
+export { XAxisConfig }
+
+export declare function YAxis(): JSX_2.Element;
+
+export { YAxisConfig }
+
+export declare function YLabel({ seriesId, color }: YLabelProps): JSX_2.Element | null;
+
+declare interface YLabelProps {
+    seriesId: string;
+    /** Override badge color (e.g. line color). If not set, uses up/down/neutral from theme. */
+    color?: string;
+}
+
+export { YRange }
+
+export { }