@astryxdesign/lab 0.0.0-bootstrap.0 → 0.1.2-canary.04e71b2

package/dist/CodeEditor/CodeEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeEditor.d.ts","sourceRoot":"","sources":["../../src/CodeEditor/CodeEditor.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAiBlD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,8BAA8B,CAAC;AAuF5D,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,CACX;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,uBAAuB;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,qBAAqB;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,sDAAsD;IACtD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,wCAAwC;IACxC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,qCAAqC;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,6BAA6B;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kCAAkC;IAClC,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,+BAA+B;IAC/B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,uBAAuB;IACvB,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,SAAS,EAAE,CAAC;CAC7D;AA6BD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,QAAsB,EACtB,cAAsB,EACtB,UAAkB,EAClB,WAAW,EACX,SAAS,EACT,IAAW,EACX,SAAS,EAAE,eAAe,EAC1B,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,eAAe,+BAiQjB;yBAhRe,UAAU"}

package/dist/CodeEditor/CodeEditor.js

@@ -0,0 +1,396 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file CodeEditor.tsx
+ * @input Uses React, StyleX, theme tokens, CSS Custom Highlight API
+ * @output Exports CodeEditor component and CodeEditorProps
+ * @position Core implementation; editable code input (lab/experimental)
+ *
+ * SYNC: When modified, update:
+ * - /packages/lab/src/CodeEditor/index.ts (exports if types change)
+ * - /packages/lab/src/CodeBlock/tokenizer.ts (shared tokenizer)
+ * - /packages/lab/src/CodeBlock/highlightStyles.ts (::highlight rules)
+ */
+
+'use client';
+
+import { useEffect, useLayoutEffect, useRef, useCallback, useState } from 'react';
+import * as stylex from '@stylexjs/stylex';
+import '@astryxdesign/core/theme/tokens.stylex';
+import { colorVars, spacingVars, radiusVars, textSizeVars, typographyVars, typeScaleVars, borderVars } from '@astryxdesign/core/theme/tokens.stylex';
+import { mergeProps } from '@astryxdesign/core/utils';
+import { tokenize, tokenizeAsync, SYNC_TOKENIZE_THRESHOLD } from '@astryxdesign/core/CodeBlock';
+import { themeProps } from '@astryxdesign/core/utils';
+import { ensureHighlightStyles, applyHighlightRangesFlat } from '@astryxdesign/core/CodeBlock';
+
+// ---------------------------------------------------------------------------
+// Styles
+// ---------------------------------------------------------------------------
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const styles = {
+  root: {
+    kVAEAm: "x1n2onr6",
+    k1xSpc: "x78zum5",
+    kaIpWk: "xh6dtrn",
+    kWkggS: "xwmxj5m",
+    kVQacm: "xb3r6kr",
+    $$css: true
+  },
+  rootFocused: {
+    kVAM5u: "xad5do",
+    kGVxlE: "x18oyj42",
+    $$css: true
+  },
+  gutter: {
+    kmuXW: "x2lah0s",
+    k8WAf4: "x8o8v82",
+    kZCmMZ: "x1rey3nv",
+    kwRFfy: "x1t818jl",
+    k9WMMc: "xp4054r",
+    kfSwDN: "x87ps6o",
+    kMwMTN: "xnbbluu",
+    $$css: true
+  },
+  editor: {
+    k1xSpc: "x1lliihq",
+    kAzted: "x1cy360x",
+    k8WAf4: "x8o8v82",
+    kg3NbH: "x1pzlopt",
+    kogj98: "x1ghz6dp",
+    kMv6JI: "x9m5x89",
+    kMwMTN: "x1tgivj0",
+    kKi2Bq: "xeq4nuv",
+    khDVqt: "x1sdyfia",
+    kTgw9: "x1lldw8n",
+    kHjlTd: "x1h4wwuj",
+    kI3sdo: "x1a2a7pz",
+    knGrYV: "x1ftfhsn",
+    kLWn49: "x17iicif",
+    $$css: true
+  },
+  placeholder: {
+    kVAEAm: "x10l6tqk",
+    k87sOh: "xyx6v2t",
+    kbCHJM: "x1unci72",
+    kMwMTN: "xnbbluu",
+    kMv6JI: "x9m5x89",
+    kLWn49: "x17iicif",
+    kfzvcC: "x47corl",
+    kfSwDN: "x87ps6o",
+    $$css: true
+  },
+  sizeSm: {
+    kGuDYH: "x1eqnyfr",
+    $$css: true
+  },
+  sizeMd: {
+    kGuDYH: "x1j29vfg",
+    $$css: true
+  },
+  gutterSm: {
+    kGuDYH: "x1eqnyfr",
+    $$css: true
+  },
+  gutterMd: {
+    kGuDYH: "x1j29vfg",
+    $$css: true
+  }
+};
+
+// ---------------------------------------------------------------------------
+// Props
+// ---------------------------------------------------------------------------
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function hasHighlightAPI() {
+  return typeof CSS !== 'undefined' && 'highlights' in CSS && typeof Highlight !== 'undefined';
+}
+const AUTO_CLOSE_PAIRS = {
+  '(': ')',
+  '[': ']',
+  '{': '}',
+  '"': '"',
+  "'": "'",
+  '`': '`'
+};
+let editorInstanceCounter = 0;
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+/**
+ * An editable code input using contentEditable="plaintext-only".
+ *
+ * Uses CSS Custom Highlight API for syntax coloring. Supports
+ * auto-indent, tab insertion, and bracket auto-closing.
+ *
+ * @example
+ * ```tsx
+ * const [code, setCode] = useState('');
+ * <CodeEditor
+ *   value={code}
+ *   onChange={setCode}
+ *   language="typescript"
+ *   hasLineNumbers
+ * />
+ * ```
+ */
+export function CodeEditor({
+  value,
+  onChange,
+  language = 'plaintext',
+  hasLineNumbers = false,
+  isReadOnly = false,
+  placeholder,
+  maxHeight,
+  size = 'md',
+  tokenizer: customTokenizer,
+  xstyle,
+  className,
+  style,
+  ref,
+  ...props
+}) {
+  const editorRef = useRef(null);
+  const [instanceId] = useState(() => ++editorInstanceCounter);
+  const [focused, setFocused] = useState(false);
+  const isComposingRef = useRef(false);
+  const lines = value.split('\n');
+
+  // Sync textContent with controlled value
+  useLayoutEffect(() => {
+    const el = editorRef.current;
+    if (!el) {
+      return;
+    }
+    if (el.textContent !== value) {
+      el.textContent = value;
+    }
+  }, [value]);
+
+  // Ensure styles are always injected
+  useLayoutEffect(() => {
+    ensureHighlightStyles();
+  }, []);
+
+  // Apply CSS Custom Highlight API ranges — small code
+  useLayoutEffect(() => {
+    if (value.length >= SYNC_TOKENIZE_THRESHOLD) {
+      return;
+    }
+    if (!hasHighlightAPI()) {
+      return;
+    }
+    const el = editorRef.current;
+    if (!el) {
+      return;
+    }
+    const tok = customTokenizer ?? tokenize;
+    const tokens = tok(value, language);
+    if (tokens.length === 0) {
+      return;
+    }
+    return applyHighlightRangesFlat(el, tokens);
+  }, [value, language, customTokenizer, instanceId]);
+
+  // Apply CSS Custom Highlight API ranges — large code (async)
+  useEffect(() => {
+    if (value.length < SYNC_TOKENIZE_THRESHOLD) {
+      return;
+    }
+    if (!hasHighlightAPI()) {
+      return;
+    }
+    const el = editorRef.current;
+    if (!el) {
+      return;
+    }
+    const abortController = new AbortController();
+    let cleanup;
+    tokenizeAsync(value, language, abortController.signal).then(tokens => {
+      if (abortController.signal.aborted) {
+        return;
+      }
+      if (tokens.length === 0) {
+        return;
+      }
+      cleanup = applyHighlightRangesFlat(el, tokens);
+    });
+    return () => {
+      abortController.abort();
+      cleanup?.();
+    };
+  }, [value, language, customTokenizer, instanceId]);
+  const handleInput = useCallback(() => {
+    if (isComposingRef.current) {
+      return;
+    }
+    const el = editorRef.current;
+    if (!el) {
+      return;
+    }
+    const newValue = el.textContent ?? '';
+    onChange(newValue);
+  }, [onChange]);
+  const handleKeyDown = useCallback(e => {
+    if (isReadOnly) {
+      return;
+    }
+
+    // Tab key: insert 2 spaces
+    if (e.key === 'Tab') {
+      e.preventDefault();
+      const sel = window.getSelection();
+      if (!sel || sel.rangeCount === 0) {
+        return;
+      }
+      const range = sel.getRangeAt(0);
+      range.deleteContents();
+      const textNode = document.createTextNode('  ');
+      range.insertNode(textNode);
+      range.setStartAfter(textNode);
+      range.setEndAfter(textNode);
+      sel.removeAllRanges();
+      sel.addRange(range);
+      const el = editorRef.current;
+      if (el) {
+        onChange(el.textContent ?? '');
+      }
+      return;
+    }
+
+    // Enter key: preserve indentation
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      const sel = window.getSelection();
+      if (!sel || sel.rangeCount === 0) {
+        return;
+      }
+      const el = editorRef.current;
+      if (!el) {
+        return;
+      }
+      const fullText = el.textContent ?? '';
+
+      // Find cursor offset
+      const range = sel.getRangeAt(0);
+      const preCaretRange = range.cloneRange();
+      preCaretRange.selectNodeContents(el);
+      preCaretRange.setEnd(range.startContainer, range.startOffset);
+      const cursorOffset = preCaretRange.toString().length;
+
+      // Find current line and its indentation
+      const beforeCursor = fullText.slice(0, cursorOffset);
+      const lastNewline = beforeCursor.lastIndexOf('\n');
+      const currentLine = beforeCursor.slice(lastNewline + 1);
+      const indent = currentLine.match(/^(\s*)/)?.[1] ?? '';
+
+      // Insert newline + indent
+      const insertText = '\n' + indent;
+      range.deleteContents();
+      const textNode = document.createTextNode(insertText);
+      range.insertNode(textNode);
+      range.setStartAfter(textNode);
+      range.setEndAfter(textNode);
+      sel.removeAllRanges();
+      sel.addRange(range);
+      onChange(el.textContent ?? '');
+      return;
+    }
+
+    // Auto-close brackets and quotes
+    const closeChar = AUTO_CLOSE_PAIRS[e.key];
+    if (closeChar) {
+      const sel = window.getSelection();
+      if (!sel || sel.rangeCount === 0) {
+        return;
+      }
+      const range = sel.getRangeAt(0);
+
+      // Only auto-close if no text is selected
+      if (!range.collapsed) {
+        return;
+      }
+      e.preventDefault();
+      const textNode = document.createTextNode(e.key + closeChar);
+      range.deleteContents();
+      range.insertNode(textNode);
+      // Place cursor between the pair
+      range.setStart(textNode, 1);
+      range.setEnd(textNode, 1);
+      sel.removeAllRanges();
+      sel.addRange(range);
+      const el = editorRef.current;
+      if (el) {
+        onChange(el.textContent ?? '');
+      }
+    }
+  }, [isReadOnly, onChange]);
+  const handleCompositionStart = useCallback(() => {
+    isComposingRef.current = true;
+  }, []);
+  const handleCompositionEnd = useCallback(() => {
+    isComposingRef.current = false;
+    handleInput();
+  }, [handleInput]);
+  const sizeStyle = size === 'sm' ? styles.sizeSm : styles.sizeMd;
+  const gutterSizeStyle = size === 'sm' ? styles.gutterSm : styles.gutterMd;
+  const showPlaceholder = placeholder && value === '';
+  const containerStyle = maxHeight ? {
+    maxHeight: typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight
+  } : undefined;
+  return /*#__PURE__*/_jsx("div", {
+    ref: ref,
+    ...mergeProps(themeProps('codeeditor', {
+      size,
+      language
+    }), stylex.props(styles.root, focused && styles.rootFocused, xstyle), className, style),
+    ...props,
+    children: /*#__PURE__*/_jsxs("div", {
+      ...{
+        className: "x78zum5 x98rzlu xysyzu8"
+      },
+      style: containerStyle,
+      children: [hasLineNumbers && /*#__PURE__*/_jsx("div", {
+        ...stylex.props(styles.gutter, gutterSizeStyle),
+        "aria-hidden": "true",
+        children: lines.map((_, i) => /*#__PURE__*/_jsx("div", {
+          ...{
+            className: "x9m5x89 x17iicif"
+          },
+          children: i + 1
+        }, i))
+      }), /*#__PURE__*/_jsxs("div", {
+        style: {
+          position: 'relative',
+          flex: 1
+        },
+        children: [showPlaceholder && /*#__PURE__*/_jsx("div", {
+          ...stylex.props(styles.placeholder, sizeStyle),
+          children: placeholder
+        }), /*#__PURE__*/_jsx("code", {
+          ref: editorRef
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          ,
+          contentEditable: isReadOnly ? false : 'plaintext-only',
+          role: "textbox",
+          "aria-multiline": "true",
+          "aria-readonly": isReadOnly,
+          spellCheck: false,
+          onInput: handleInput,
+          onKeyDown: handleKeyDown,
+          onFocus: () => setFocused(true),
+          onBlur: () => setFocused(false),
+          onCompositionStart: handleCompositionStart,
+          onCompositionEnd: handleCompositionEnd,
+          ...stylex.props(styles.editor, sizeStyle)
+        })]
+      })]
+    })
+  });
+}
+CodeEditor.displayName = 'CodeEditor';

package/dist/CodeEditor/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @file CodeEditor component barrel export
+ */
+export { CodeEditor } from './CodeEditor';
+export type { CodeEditorProps } from './CodeEditor';
+//# sourceMappingURL=index.d.ts.map

package/dist/CodeEditor/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/CodeEditor/index.ts"],"names":[],"mappings":"AAEA;;GAEG;AAEH,OAAO,EAAC,UAAU,EAAC,MAAM,cAAc,CAAC;AACxC,YAAY,EAAC,eAAe,EAAC,MAAM,cAAc,CAAC"}

package/dist/CodeEditor/index.js

@@ -0,0 +1,7 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file CodeEditor component barrel export
+ */
+
+export { CodeEditor } from "./CodeEditor.js";

package/dist/Radial/RadialArea.d.ts

@@ -0,0 +1,25 @@
+export interface RadialAreaProps {
+    /** Key identifying which dataset row to plot (matches a value in data) */
+    dataKey: string;
+    /** Fill color */
+    color: string;
+    /** Fill opacity (default: 0.2) */
+    opacity?: number;
+    /** Stroke width (default: 2) */
+    strokeWidth?: number;
+    /** Show dots at vertices */
+    dots?: boolean;
+    /** Dot radius */
+    dotRadius?: number;
+}
+/**
+ * Spider/radar polygon. Reads axis definitions and scales from radial context.
+ * Each axis value is normalized to [0,1] within its domain, then mapped to radius.
+ *
+ * @example
+ * ```
+ * <RadialArea dataKey="modelA" color={colors[0]} dots />
+ * ```
+ */
+export declare function RadialArea({ dataKey, color, opacity, strokeWidth, dots, dotRadius, }: RadialAreaProps): import("react").JSX.Element | null;
+//# sourceMappingURL=RadialArea.d.ts.map

package/dist/Radial/RadialArea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadialArea.d.ts","sourceRoot":"","sources":["../../src/Radial/RadialArea.tsx"],"names":[],"mappings":"AAUA,MAAM,WAAW,eAAe;IAC9B,0EAA0E;IAC1E,OAAO,EAAE,MAAM,CAAC;IAChB,iBAAiB;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,kCAAkC;IAClC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gCAAgC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4BAA4B;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,iBAAiB;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;GAQG;AACH,wBAAgB,UAAU,CAAC,EACzB,OAAO,EACP,KAAK,EACL,OAAa,EACb,WAAe,EACf,IAAY,EACZ,SAAa,GACd,EAAE,eAAe,sCA6DjB"}

package/dist/Radial/RadialArea.js

@@ -0,0 +1,91 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file RadialArea.tsx
+ * @output Renders a spider/radar polygon for a dataset
+ */
+
+import { useMemo } from 'react';
+import { useRadial } from "./RadialContext.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Spider/radar polygon. Reads axis definitions and scales from radial context.
+ * Each axis value is normalized to [0,1] within its domain, then mapped to radius.
+ *
+ * @example
+ * ```
+ * <RadialArea dataKey="modelA" color={colors[0]} dots />
+ * ```
+ */
+export function RadialArea({
+  dataKey,
+  color,
+  opacity = 0.2,
+  strokeWidth = 2,
+  dots = false,
+  dotRadius = 4
+}) {
+  const {
+    cx,
+    cy,
+    data,
+    axes,
+    angleByAxis,
+    radiusScale,
+    axisDomains
+  } = useRadial();
+  const points = useMemo(() => {
+    if (!axes || !angleByAxis || !radiusScale || !axisDomains) {
+      return [];
+    }
+
+    // Find the data row matching this key
+    // dataKey matches a value in the first non-axis field, or we use the index
+    const datum = data.find(d => {
+      // Check if any string field matches dataKey
+      return Object.values(d).some(v => v === dataKey);
+    }) ?? data[0];
+    if (!datum) {
+      return [];
+    }
+    return axes.map(key => {
+      const angle = angleByAxis.get(key);
+      const domain = axisDomains.get(key);
+      if (angle == null || !domain) {
+        return {
+          x: cx,
+          y: cy,
+          key
+        };
+      }
+      const raw = typeof datum[key] === 'number' ? datum[key] : 0;
+      const [min, max] = domain;
+      const t = max > min ? (raw - min) / (max - min) : 0;
+      const r = radiusScale(Math.max(0, Math.min(1, t)));
+      return {
+        x: cx + Math.cos(angle) * r,
+        y: cy + Math.sin(angle) * r,
+        key
+      };
+    });
+  }, [cx, cy, data, dataKey, axes, angleByAxis, radiusScale, axisDomains]);
+  if (points.length === 0) {
+    return null;
+  }
+  const pathPoints = points.map(p => `${p.x},${p.y}`).join(' ');
+  return /*#__PURE__*/_jsxs("g", {
+    children: [/*#__PURE__*/_jsx("polygon", {
+      points: pathPoints,
+      fill: color,
+      fillOpacity: opacity,
+      stroke: color,
+      strokeWidth: strokeWidth,
+      strokeLinejoin: "round"
+    }), dots && points.map(p => /*#__PURE__*/_jsx("circle", {
+      cx: p.x,
+      cy: p.y,
+      r: dotRadius,
+      fill: color
+    }, p.key))]
+  });
+}

package/dist/Radial/RadialAxis.d.ts

@@ -0,0 +1,14 @@
+export interface RadialAxisProps {
+    /** Label offset from the outer ring in pixels (default: 16) */
+    labelOffset?: number;
+}
+/**
+ * Axis labels positioned at each spider chart vertex.
+ *
+ * @example
+ * ```
+ * <RadialAxis />
+ * ```
+ */
+export declare function RadialAxis({ labelOffset }: RadialAxisProps): import("react").JSX.Element | null;
+//# sourceMappingURL=RadialAxis.d.ts.map

package/dist/Radial/RadialAxis.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadialAxis.d.ts","sourceRoot":"","sources":["../../src/Radial/RadialAxis.tsx"],"names":[],"mappings":"AASA,MAAM,WAAW,eAAe;IAC9B,+DAA+D;IAC/D,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;;;;;GAOG;AACH,wBAAgB,UAAU,CAAC,EAAC,WAAgB,EAAC,EAAE,eAAe,sCAqC7D"}

package/dist/Radial/RadialAxis.js

@@ -0,0 +1,55 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file RadialAxis.tsx
+ * @output Renders axis labels at each spider vertex
+ */
+
+import { useRadial } from "./RadialContext.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Axis labels positioned at each spider chart vertex.
+ *
+ * @example
+ * ```
+ * <RadialAxis />
+ * ```
+ */
+export function RadialAxis({
+  labelOffset = 16
+}) {
+  const {
+    cx,
+    cy,
+    radius,
+    axes,
+    angleByAxis
+  } = useRadial();
+  if (!axes || !angleByAxis) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx("g", {
+    children: axes.map(key => {
+      const angle = angleByAxis.get(key);
+      if (angle == null) {
+        return null;
+      }
+      const x = cx + Math.cos(angle) * (radius + labelOffset);
+      const y = cy + Math.sin(angle) * (radius + labelOffset);
+
+      // Determine text anchor based on position
+      const isRight = Math.cos(angle) > 0.1;
+      const isLeft = Math.cos(angle) < -0.1;
+      const anchor = isRight ? 'start' : isLeft ? 'end' : 'middle';
+      return /*#__PURE__*/_jsx("text", {
+        x: x,
+        y: y,
+        textAnchor: anchor,
+        dominantBaseline: "central",
+        fill: "var(--color-text-secondary)",
+        fontSize: 12,
+        children: key
+      }, key);
+    })
+  });
+}

package/dist/Radial/RadialChart.d.ts

@@ -0,0 +1,70 @@
+/**
+ * @file RadialChart.tsx
+ * @output Root radial chart container — spider, pie, donut
+ * @position Parent component; all radial marks read from its context
+ *
+ * Owns the radial coordinate space: center, radius, angle/radius scales.
+ * Same Tier 1 guarantee as Chart — all children map through the same context.
+ */
+import { type ReactNode } from 'react';
+export interface RadialChartProps {
+    /** The dataset */
+    data: Record<string, unknown>[];
+    /** Chart height in pixels. Width is responsive. */
+    height?: number;
+    /**
+     * Spider mode: array of axis keys (each key is a dimension).
+     * When provided, the chart operates in spider mode.
+     */
+    axes?: string[];
+    /**
+     * Pie/donut mode: data key containing the numeric value for each slice.
+     * When provided (without axes), the chart operates in pie mode.
+     */
+    valueKey?: string;
+    /**
+     * Pie/donut mode: data key for the slice label.
+     */
+    labelKey?: string;
+    /**
+     * Inner radius as a fraction of outer radius (0-1).
+     * 0 = full pie/spider, 0.6 = donut. Default: 0.
+     */
+    innerRadius?: number;
+    /**
+     * Padding between pie slices in radians. Default: 0.02.
+     */
+    padAngle?: number;
+    /** Chart contents */
+    /**
+     * Enable touch interaction mode — blocks scroll on mobile.
+     */
+    interactive?: boolean;
+    children: ReactNode;
+}
+/**
+ * Root radial chart container. Computes angular/radial scales and provides
+ * them to children via context.
+ *
+ * @example
+ * ```
+ * // Spider
+ * <RadialChart data={data} axes={['speed', 'handling', 'comfort']} height={400}>
+ *   <RadialGrid rings={5} />
+ *   <RadialArea dataKey="modelA" color={colors[0]} />
+ *   <RadialAxis />
+ * </RadialChart>
+ *
+ * // Pie
+ * <RadialChart data={data} valueKey="revenue" labelKey="region" height={400}>
+ *   <RadialSlice />
+ * </RadialChart>
+ *
+ * // Donut
+ * <RadialChart data={data} valueKey="revenue" labelKey="region" innerRadius={0.6} height={400}>
+ *   <RadialSlice />
+ * </RadialChart>
+ * ```
+ */
+export declare function RadialChart({ data, height, axes, valueKey, labelKey, innerRadius: innerRadiusFraction, padAngle, children, }: RadialChartProps): import("react").JSX.Element;
+//# sourceMappingURL=RadialChart.d.ts.map

package/dist/Radial/RadialChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadialChart.d.ts","sourceRoot":"","sources":["../../src/Radial/RadialChart.tsx"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,EACL,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AAIf,MAAM,WAAW,gBAAgB;IAC/B,kBAAkB;IAClB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC;IAChC,mDAAmD;IACnD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAChB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qBAAqB;IACrB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,MAAY,EACZ,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,WAAW,EAAE,mBAAuB,EACpC,QAAe,EACf,QAAQ,GACT,EAAE,gBAAgB,+BAgIlB"}