sdaia-ui 1.0.1 → 1.0.2

package/src/components/RichTextEditor/RichTextEditor.types.ts

@@ -1,127 +0,0 @@
-import type { HTMLAttributes } from 'react';
-
-/** Which visual mode the component renders in */
-export type RichTextEditorType = 'default' | 'text-selected' | 'input';
-
-/** Text alignment option */
-export type TextAlignment = 'left' | 'center' | 'right';
-
-export interface RichTextEditorProps
-  extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
-  /**
-   * Visual type.
-   * - `default` (default) — full formatting toolbar (standalone, attach above a content-editable area)
-   * - `text-selected` — compact floating toolbar shown when text is selected
-   * - `input` — self-contained input field with bottom quick-action bar and optional expanded toolbar
-   */
-  type?: RichTextEditorType;
-
-  /**
-   * Render in mobile layout.
-   * - `default` type: collapses to a 2-row toolbar (undo/redo + selectors on row 1,
-   *   collapsed format groups on row 2).
-   * @default false
-   */
-  mobile?: boolean;
-
-  /**
-   * Show expanded formatting toolbar above the content area.
-   * Only applies when `type="input"`.
-   * @default false
-   */
-  expand?: boolean;
-
-  // ── Formatting active states ────────────────────────────────────
-
-  /** Whether the Bold action is currently active (toggled). */
-  isBold?: boolean;
-
-  /** Whether the Italic action is currently active (toggled). */
-  isItalic?: boolean;
-
-  /** Whether the Underline action is currently active (toggled). */
-  isUnderline?: boolean;
-
-  /** Currently active text alignment. */
-  alignment?: TextAlignment;
-
-  // ── Text / font-size selectors ──────────────────────────────────
-
-  /** Selected text style label (e.g. `"Normal"`, `"Heading 1"`). */
-  textStyle?: string;
-
-  /** Available text style options. */
-  textStyleOptions?: string[];
-
-  /** Selected font size label (e.g. `"16"`). */
-  fontSize?: string;
-
-  /** Available font size options. */
-  fontSizeOptions?: string[];
-
-  /** Called when the user selects a text style option. */
-  onTextStyleChange?: (value: string) => void;
-
-  /** Called when the user selects a font size option. */
-  onFontSizeChange?: (value: string) => void;
-
-  // ── Toolbar action callbacks ────────────────────────────────────
-
-  /** Called when the Undo button is pressed. */
-  onUndo?: () => void;
-
-  /** Called when the Redo button is pressed. */
-  onRedo?: () => void;
-
-  /** Called when the Bold button is pressed. */
-  onBold?: () => void;
-
-  /** Called when the Italic button is pressed. */
-  onItalic?: () => void;
-
-  /** Called when the Underline button is pressed. */
-  onUnderline?: () => void;
-
-  /** Called when an alignment button is pressed. */
-  onAlign?: (alignment: TextAlignment) => void;
-
-  /** Called when the Color button (or its chevron) is pressed. */
-  onColor?: () => void;
-
-  /** Called when the Link button is pressed. */
-  onLink?: () => void;
-
-  /** Called when the Image button is pressed. */
-  onImage?: () => void;
-
-  /** Called when the AI button is pressed. */
-  onAI?: () => void;
-
-  // ── Input type specific ─────────────────────────────────────────
-
-  /**
-   * Controlled value for the textarea (only used when `type="input"`).
-   */
-  value?: string;
-
-  /**
-   * Placeholder text for the textarea.
-   * @default 'You can write here…'
-   */
-  placeholder?: string;
-
-  /** Called on every keystroke with the new text value. */
-  onChange?: (value: string) => void;
-
-  /** Called when the `+` (add content) button is pressed. */
-  onAddContent?: () => void;
-
-  /** Called when the Aa (format text) button is pressed. */
-  onFormatText?: () => void;
-
-  /** Called when the emoji button is pressed. */
-  onEmoji?: () => void;
-
-  /** Called when the `@` mention button is pressed. */
-  onMention?: () => void;
-}

package/src/components/RichTextEditor/RichTextEditor.variants.ts

@@ -1,231 +0,0 @@
-/* ─────────────────────────────────────────────────────────────────
-   RichTextEditor — variant / token constants
-   ───────────────────────────────────────────────────────────────── */
-
-/* ── Default toolbar — desktop ───────────────────────────────── */
-/**
- * Figma: flex items-center, gap=spacing-xl (16px desktop),
- * px=spacing-xl (16px desktop), py=spacing-md (8px)
- */
-export const TOOLBAR_DESKTOP =
-  'flex flex-wrap items-center gap-spacing-xl px-spacing-xl py-spacing-md';
-
-/* ── Default toolbar — mobile (2-row) ────────────────────────── */
-/**
- * Figma: flex flex-col, gap=spacing-xl (16px), px=spacing-xl, py=spacing-md
- */
-export const TOOLBAR_MOBILE =
-  'flex flex-col gap-spacing-xl px-spacing-xl py-spacing-md';
-
-export const TOOLBAR_MOBILE_ROW =
-  'flex items-center justify-between w-full';
-
-/* ── Toolbar group wrappers ──────────────────────────────────── */
-/** Undo / Redo — gap=spacing-md (8px) */
-export const TOOLBAR_GROUP_SM = 'flex items-center gap-spacing-md';
-/** Bold / Italic / Underline, Align, Media — gap=spacing-lg (12px desktop) */
-export const TOOLBAR_GROUP_MD = 'flex items-center gap-spacing-lg';
-/** Color button + chevron — gap=spacing-xxs (2px) */
-export const TOOLBAR_GROUP_XS = 'flex items-center gap-spacing-xxs';
-
-/* ── Toolbar divider ─────────────────────────────────────────── */
-/** Figma: 1px vertical line — py=spacing-xs (4px) */
-export const TOOLBAR_DIVIDER =
-  'w-px self-stretch bg-[rgba(210,214,219,1)] dark:bg-[rgba(44,57,79,1)] my-spacing-xs shrink-0';
-
-/* ── Toolbar button ──────────────────────────────────────────── */
-/**
- * Base: transparent, rounded-[4px], p=spacing-xxs (2px).
- * Hover: Background/background-neutral-50 #f9fafb.
- * Icon color: Icon/icon-default-500 #6c737f.
- */
-export const TOOLBAR_BTN_BASE = [
-  'inline-flex items-center justify-center rounded-[4px] p-spacing-xxs',
-  'text-[rgba(108,115,127,1)] dark:text-[rgba(156,163,175,1)]',
-  'hover:bg-[rgba(243,244,246,1)] dark:hover:bg-[rgba(31,42,55,1)]',
-  'motion-feedback cursor-pointer',
-  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[rgba(27,131,84,0.7)] focus-visible:ring-offset-1',
-  'disabled:opacity-40 disabled:cursor-not-allowed',
-].join(' ');
-
-/**
- * Active / pressed state.
- * Figma: Background/background-neutral-100 #f3f4f6, rounded-[4px]
- */
-export const TOOLBAR_BTN_ACTIVE =
-  'bg-[rgba(243,244,246,1)] dark:bg-[rgba(44,57,79,1)] ' +
-  'text-[rgba(31,42,55,1)] dark:text-[rgba(229,231,235,1)]';
-
-/* ── Style selector dropdown trigger ────────────────────────── */
-/**
- * Figma: border #d2d6db, rounded-[6px], px=spacing-md (8px), py=spacing-sm (6→8px),
- * gap=spacing-md (8px).
- */
-export const STYLE_SELECT =
-  'inline-flex items-center gap-spacing-md ' +
-  'border border-[rgba(210,214,219,1)] dark:border-[rgba(44,57,79,1)] ' +
-  'rounded-[6px] px-spacing-md py-spacing-sm ' +
-  'cursor-pointer motion-feedback ' +
-  'hover:bg-[rgba(249,250,251,1)] dark:hover:bg-[rgba(31,42,55,1)] ' +
-  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[rgba(27,131,84,0.7)]';
-
-/** Text inside the style selector — Figma: text-text-xs #1f2a37 */
-export const STYLE_SELECT_TEXT =
-  'text-text-xs font-[400] ' +
-  'text-[rgba(31,42,55,1)] dark:text-[rgba(229,231,235,1)] ' +
-  'whitespace-nowrap';
-
-/** Chevron inside style selector — 12×12 */
-export const STYLE_SELECT_CHEVRON =
-  'shrink-0 size-icon-xs text-[rgba(108,115,127,1)] dark:text-[rgba(156,163,175,1)]';
-
-/* ── Text Selected (floating) toolbar ───────────────────────── */
-/**
- * Figma: bg-white, rounded-[8px],
- * shadow (0px 4px 8px rgba(16,24,40,0.1) + 0px 2px 4px rgba(16,24,40,0.06)),
- * flex items-center, gap=spacing-lg, px=spacing-xl, py=spacing-md.
- */
-export const FLOATING_TOOLBAR =
-  'inline-flex items-center gap-spacing-lg px-spacing-xl py-spacing-md ' +
-  'rounded-[8px] ' +
-  'bg-white dark:bg-[rgba(17,25,39,1)] ' +
-  'shadow-[0px_4px_8px_0px_rgba(16,24,40,0.1),0px_2px_4px_0px_rgba(16,24,40,0.06)] ' +
-  'border border-[rgba(210,214,219,1)] dark:border-[rgba(44,57,79,1)]';
-
-/* ── Default type — self-contained editor container ─────────── */
-/**
- * Wraps the full toolbar + contentEditable area for type="default".
- * Mirrors INPUT_CONTAINER but without the inner px/py padding
- * (each section — toolbar, panels, content — carries its own spacing).
- */
-export const EDITOR_CONTAINER =
-  'flex flex-col w-full ' +
-  'border border-[rgba(210,214,219,1)] dark:border-[rgba(44,57,79,1)] ' +
-  'rounded-[8px] overflow-hidden ' +
-  'bg-white dark:bg-[rgba(17,25,39,1)]';
-
-/**
- * Panel strip that appears between the toolbar and content area.
- * Border-bottom separates it from the content below it.
- */
-export const EDITOR_PANEL_WRAP =
-  'border-b border-[rgba(210,214,219,1)] dark:border-[rgba(44,57,79,1)] ' +
-  'px-spacing-xl py-spacing-md';
-
-/* ── Input type — outer container ───────────────────────────── */
-/**
- * Figma: border #d2d6db, rounded-[8px], flex flex-col,
- * px=spacing-lg (12px), py=spacing-md (8px), overflow-clip.
- */
-export const INPUT_CONTAINER =
-  'flex flex-col w-full border border-[rgba(210,214,219,1)] dark:border-[rgba(44,57,79,1)] ' +
-  'rounded-[8px] overflow-hidden ' +
-  'bg-white dark:bg-[rgba(17,25,39,1)] ' +
-  'px-spacing-lg py-spacing-md';
-
-/* ── Input type — expand toolbar ────────────────────────────── */
-/**
- * Shown above the textarea when expand=true.
- * Same layout as floating toolbar but no shadow / absolute position.
- */
-export const EXPAND_TOOLBAR =
-  'flex items-center gap-spacing-lg ' +
-  'border-b border-[rgba(210,214,219,1)] dark:border-[rgba(44,57,79,1)] ' +
-  '-mx-spacing-lg px-spacing-lg pb-spacing-sm';
-
-/* ── Input type — textarea ───────────────────────────────────── */
-/** Figma: text-text-md, placeholder #6c737f */
-export const INPUT_TEXTAREA =
-  'w-full flex-1 resize-none outline-none bg-transparent min-h-[80px] ' +
-  'text-text-md font-[400] ' +
-  'text-[rgba(22,22,22,1)] dark:text-[rgba(229,231,235,1)] ' +
-  'placeholder:text-[rgba(108,115,127,1)] dark:placeholder:text-[rgba(107,114,128,1)]';
-
-/* ── Input type — bottom actions bar ────────────────────────── */
-/**
- * Figma: flex items-center, gap=spacing-lg
- */
-export const INPUT_BOTTOM_BAR =
-  'flex items-center gap-spacing-lg ' +
-  'border-t border-[rgba(210,214,219,1)] dark:border-[rgba(44,57,79,1)] ' +
-  '-mx-spacing-lg px-spacing-lg pt-spacing-md mt-spacing-3xl';
-
-/** Figma: + button — bg-neutral-50, p=spacing-xs, rounded-full, icon fill #161616 */
-export const INPUT_ADD_BTN =
-  'inline-flex items-center justify-center rounded-full p-spacing-xs ' +
-  'bg-[rgba(249,250,251,1)] dark:bg-[rgba(31,42,55,1)] ' +
-  'text-[rgba(22,22,22,1)] dark:text-[rgba(229,231,235,1)] ' +
-  'hover:bg-[rgba(243,244,246,1)] dark:hover:bg-[rgba(44,57,79,1)] ' +
-  'motion-feedback cursor-pointer ' +
-  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[rgba(27,131,84,0.7)] focus-visible:ring-offset-1';
-
-/** Figma: Aa/Emoji/@ bottom bar icon buttons */
-export const INPUT_ACTION_BTN =
-  'inline-flex items-center justify-center rounded-[4px] p-spacing-xxs ' +
-  'text-[rgba(108,115,127,1)] dark:text-[rgba(156,163,175,1)] ' +
-  'hover:bg-[rgba(243,244,246,1)] dark:hover:bg-[rgba(31,42,55,1)] ' +
-  'motion-feedback cursor-pointer ' +
-  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[rgba(27,131,84,0.7)] focus-visible:ring-offset-1';
-
-/** Vertical 1px divider inside bottom bar */
-export const INPUT_DIVIDER =
-  'w-px self-stretch bg-[rgba(210,214,219,1)] dark:bg-[rgba(44,57,79,1)] mx-spacing-xs';
-
-/* ── Inline panels (emoji / font / link) ────────────────────── */
-/**
- * Container shared by all inline panels (emoji, font, link).
- * Appears between the content area and the bottom bar.
- * Negative horizontal margins let it stretch edge-to-edge.
- */
-export const PANEL_WRAP =
-  '-mx-spacing-lg px-spacing-lg py-spacing-sm ' +
-  'border-t border-[rgba(210,214,219,1)] dark:border-[rgba(44,57,79,1)]';
-
-/** Emoji grid — 8 columns */
-export const EMOJI_GRID = 'grid grid-cols-8 gap-0.5';
-
-/** Single emoji button */
-export const EMOJI_BTN =
-  'text-xl leading-none p-1 flex items-center justify-center rounded-[4px] ' +
-  'hover:bg-[rgba(243,244,246,1)] dark:hover:bg-[rgba(31,42,55,1)] ' +
-  'motion-feedback cursor-pointer';
-
-/** Font-style option button */
-export const FONT_OPTION_BTN =
-  'w-full text-start px-spacing-md py-spacing-xs rounded-[6px] motion-feedback ' +
-  'text-[rgba(22,22,22,1)] dark:text-[rgba(229,231,235,1)] ' +
-  'hover:bg-[rgba(243,244,246,1)] dark:hover:bg-[rgba(31,42,55,1)]';
-
-/** Link URL input inside the link panel */
-export const LINK_INPUT =
-  'flex-1 text-text-sm font-[400] ' +
-  'border border-[rgba(210,214,219,1)] dark:border-[rgba(44,57,79,1)] ' +
-  'rounded-[6px] px-spacing-md py-spacing-sm outline-none ' +
-  'bg-white dark:bg-transparent ' +
-  'text-[rgba(22,22,22,1)] dark:text-[rgba(229,231,235,1)] ' +
-  'placeholder:text-[rgba(108,115,127,1)] dark:placeholder:text-[rgba(107,114,128,1)] ' +
-  'focus:border-[rgba(27,131,84,0.7)] motion-feedback';
-
-/** Insert button inside the link panel */
-export const LINK_INSERT_BTN =
-  'shrink-0 px-spacing-md py-spacing-sm ' +
-  'text-text-sm font-[500] text-white ' +
-  'bg-[rgba(27,131,84,1)] hover:bg-[rgba(22,106,68,1)] ' +
-  'rounded-[6px] motion-feedback cursor-pointer';
-
-/** Close (×) button inside panels */
-export const PANEL_CLOSE_BTN =
-  'shrink-0 p-spacing-xs rounded-[4px] ' +
-  'text-[rgba(108,115,127,1)] dark:text-[rgba(156,163,175,1)] ' +
-  'hover:bg-[rgba(243,244,246,1)] dark:hover:bg-[rgba(31,42,55,1)] ' +
-  'hover:text-[rgba(22,22,22,1)] dark:hover:text-[rgba(229,231,235,1)] ' +
-  'motion-feedback cursor-pointer';
-
-/* ── Mobile row 2 — collapsed format buttons ─────────────────── */
-/** Format group button in mobile row 2: e.g. "B ▾", "Color ▾", "Align ▾" */
-export const MOBILE_GROUP_BTN =
-  'inline-flex items-center gap-spacing-xxs rounded-[4px] p-spacing-xxs ' +
-  'text-[rgba(108,115,127,1)] dark:text-[rgba(156,163,175,1)] ' +
-  'hover:bg-[rgba(243,244,246,1)] dark:hover:bg-[rgba(31,42,55,1)] ' +
-  'motion-feedback cursor-pointer ' +
-  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[rgba(27,131,84,0.7)] focus-visible:ring-offset-1';

package/src/components/RichTextEditor/index.ts

@@ -1,6 +0,0 @@
-export { RichTextEditor } from './RichTextEditor';
-export type {
-  RichTextEditorProps,
-  RichTextEditorType,
-  TextAlignment,
-} from './RichTextEditor.types';

package/src/components/ScatterChart/ScatterChart.tsx

@@ -1,164 +0,0 @@
-'use client';
-import { forwardRef } from 'react';
-import { cn } from '../../lib/cn';
-import type { ScatterChartProps } from './ScatterChart.types';
-import {
-  ROOT_BASE,
-  TITLE_CLASSES,
-  CHART_BODY,
-  Y_AND_CHART_ROW,
-  Y_AXIS_CONTAINER,
-  Y_AXIS_ROW,
-  Y_AXIS_LABEL,
-  Y_AXIS_SPACER,
-  CHART_AREA,
-  GRID_OVERLAY,
-  GRID_LINE,
-  GRID_V_OVERLAY,
-  GRID_V_LINE,
-  DOTS_WRAPPER,
-  DOT_BASE,
-  X_AXIS_ROW,
-  X_AXIS_LABEL,
-  getDefaultPoints,
-  getDefaultYTicks,
-  getDefaultXTicks,
-  getDefaultDomain,
-} from './ScatterChart.variants';
-
-export const ScatterChart = forwardRef<HTMLDivElement, ScatterChartProps>(
-  function ScatterChart(
-    {
-      type = 'Linear',
-      title,
-      points,
-      yTicks,
-      xTicks,
-      xMin,
-      xMax,
-      yMin,
-      yMax,
-      rtl = false,
-      className,
-      ...rest
-    },
-    ref,
-  ) {
-    const resolvedPoints = points ?? getDefaultPoints(type);
-    const resolvedYTicks = yTicks ?? getDefaultYTicks(type);
-    const resolvedXTicks = xTicks ?? getDefaultXTicks(type);
-    const domain = getDefaultDomain(type);
-    const resolvedXMin = xMin ?? domain.xMin;
-    const resolvedXMax = xMax ?? domain.xMax;
-    const resolvedYMin = yMin ?? domain.yMin;
-    const resolvedYMax = yMax ?? domain.yMax;
-
-    const xRange = resolvedXMax - resolvedXMin || 1;
-    const yRange = resolvedYMax - resolvedYMin || 1;
-
-    // The longest visible Y-axis label is used for the invisible spacer that
-    // gives the X-axis row the same left offset as the chart area.
-    const longestYLabel = resolvedYTicks.reduce(
-      (longest, tick) => (tick.length > longest.length ? tick : longest),
-      '',
-    );
-
-    return (
-      <div
-        ref={ref}
-        data-slot="scatter-chart"
-        dir={rtl ? 'rtl' : undefined}
-        className={cn(ROOT_BASE, className)}
-        {...rest}
-      >
-        {/* Title */}
-        {title && (
-          <p data-slot="scatter-chart-title" className={TITLE_CLASSES}>
-            {title}
-          </p>
-        )}
-
-        {/* Chart body */}
-        <div data-slot="scatter-chart-body" className={CHART_BODY}>
-          {/* Y-axis + chart area row */}
-          <div data-slot="scatter-chart-row" className={Y_AND_CHART_ROW}>
-            {/* Y-axis labels */}
-            <div data-slot="scatter-chart-y-axis" className={Y_AXIS_CONTAINER}>
-              {resolvedYTicks.map((tick, i) => (
-                <div key={i} className={Y_AXIS_ROW}>
-                  {tick ? (
-                    <span className={Y_AXIS_LABEL}>{tick}</span>
-                  ) : (
-                    /* invisible spacer keeps grid-line count correct */
-                    <span className={Y_AXIS_LABEL} aria-hidden="true" style={{ visibility: 'hidden' }}>
-                      &nbsp;
-                    </span>
-                  )}
-                </div>
-              ))}
-            </div>
-
-            {/* Chart area */}
-            <div data-slot="scatter-chart-area" className={CHART_AREA}>
-              {/* Horizontal grid lines */}
-              <div className={GRID_OVERLAY} aria-hidden="true">
-                {resolvedYTicks.map((_, i) => (
-                  <div key={i} className={GRID_LINE} />
-                ))}
-              </div>
-
-              {/* Vertical grid lines — one per X-tick, aligned with X-axis labels */}
-              <div className={GRID_V_OVERLAY} aria-hidden="true">
-                {resolvedXTicks.map((_, i) => (
-                  <div key={i} className={GRID_V_LINE} />
-                ))}
-              </div>
-
-              {/* Scatter dots */}
-              <div className={DOTS_WRAPPER} aria-hidden="true">
-                {resolvedPoints.map((point, i) => {
-                  const xNorm = (point.x - resolvedXMin) / xRange;
-                  const yNorm = (point.y - resolvedYMin) / yRange;
-                  const leftPct = rtl ? (1 - xNorm) * 100 : xNorm * 100;
-                  // Y: 0% top = max value, 100% bottom = min value
-                  const topPct = (1 - yNorm) * 100;
-                  return (
-                    <div
-                      key={i}
-                      className={DOT_BASE}
-                      style={{
-                        left: `clamp(4px, ${leftPct}%, calc(100% - 4px))`,
-                        top: `clamp(4px, ${topPct}%, calc(100% - 4px))`,
-                      }}
-                    />
-                  );
-                })}
-              </div>
-            </div>
-          </div>
-
-          {/* X-axis row */}
-          <div data-slot="scatter-chart-x-axis" className="flex gap-spacing-md">
-            {/* Invisible spacer matching Y-axis width */}
-            <div className={Y_AXIS_SPACER} aria-hidden="true">
-              <span className={Y_AXIS_LABEL}>{longestYLabel}</span>
-            </div>
-
-            {/* X tick labels */}
-            <div className={cn(X_AXIS_ROW, 'flex-1 min-w-0')}>
-              {resolvedXTicks.map((tick, i) => (
-                tick ? (
-                  <span key={i} className={X_AXIS_LABEL}>{tick}</span>
-                ) : (
-                  <span key={i} className={X_AXIS_LABEL} aria-hidden="true" style={{ visibility: 'hidden' }}>
-                    &nbsp;
-                  </span>
-                )
-              ))}
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  },
-);

package/src/components/ScatterChart/ScatterChart.types.ts

@@ -1,42 +0,0 @@
-import type { HTMLAttributes } from 'react';
-
-export type ScatterChartType = 'Linear' | 'Sin' | 'No Trend' | 'Square';
-
-export interface ScatterPoint {
-  x: number;
-  y: number;
-}
-
-export interface ScatterChartProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * Preset trend type. Controls default data, axis ticks, and domain when not
-   * explicitly supplied. @default 'Linear'
-   */
-  type?: ScatterChartType;
-  /** Optional chart title rendered above the chart. */
-  title?: string;
-  /** Scatter data points in data-space coordinates. */
-  points?: ScatterPoint[];
-  /**
-   * Y-axis tick labels from top to bottom.
-   * An empty string '' renders an invisible spacer row (keeps grid-line count
-   * consistent with the chart area via `justify-between`).
-   */
-  yTicks?: string[];
-  /**
-   * X-axis tick labels from left to right (LTR). For RTL the visual order
-   * mirrors automatically.
-   * An empty string '' renders an invisible spacer cell.
-   */
-  xTicks?: string[];
-  /** Minimum data-space X value. @default derived from type preset */
-  xMin?: number;
-  /** Maximum data-space X value. @default derived from type preset */
-  xMax?: number;
-  /** Minimum data-space Y value. @default derived from type preset */
-  yMin?: number;
-  /** Maximum data-space Y value. @default derived from type preset */
-  yMax?: number;
-  /** Render in RTL layout (mirrors dot X positions). @default false */
-  rtl?: boolean;
-}