@teamofsilicons/silicon-ui 0.0.0-stage → 0.2.0

package/components/date-range-picker/date-range-picker.module.css

@@ -0,0 +1,214 @@
+/* The root holds the trigger's place in the page. The surface floats above it and grows into the panel, so opening never pushes content. */
+.root {
+  position: relative;
+  display: inline-block;
+  height: var(--control-height-md);
+  vertical-align: top;
+  color: var(--foreground);
+  font-family: var(--font-body);
+  font-size: var(--text-sm);
+  letter-spacing: var(--tracking-body);
+  line-height: var(--leading-body);
+}
+.root { z-index: 0; transition: z-index 0s linear .5s; }
+.root[data-open] { z-index: 30; transition-delay: 0s; }
+.root:not([data-open]) .surface { z-index: 0; }
+.root *, .root *::before, .root *::after { box-sizing: border-box; }
+
+/* One material from trigger to panel. Size, corners, and offset come from springs; the border is an overlay so it never changes a measurement. */
+.surface {
+  position: absolute;
+  z-index: 2;
+  top: 0;
+  left: 0;
+  overflow: clip;
+  background: var(--surface-raised);
+  box-shadow: var(--shadow-resting);
+  transition: box-shadow var(--duration-considered) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard);
+}
+.surface::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--border); border-radius: inherit; corner-shape: inherit; pointer-events: none; transition: border-color var(--duration-fast) var(--ease-standard); }
+.root[data-open] .surface { box-shadow: var(--shadow-floating); }
+
+/* Trigger */
+/* The trigger sits in flow above the surface while closed; when open, the surface and its panel rise over it. */
+.trigger {
+  position: relative;
+  z-index: 1;
+  display: inline-flex;
+  width: max-content;
+  height: var(--control-height-md);
+  align-items: center;
+  gap: 10px;
+  padding: 0 12px 0 14px;
+  border: 0;
+  background: transparent;
+  color: var(--foreground);
+  cursor: pointer;
+  font: inherit;
+  font-weight: 500;
+  white-space: nowrap;
+  -webkit-tap-highlight-color: transparent;
+}
+.trigger:disabled { cursor: default; }
+.trigger[inert] { pointer-events: none; }
+.triggerIcon, .chevron { display: grid; flex: none; place-items: center; color: var(--text-secondary); }
+.chevron { color: var(--text-muted); }
+.value { display: inline-flex; font-variant-numeric: tabular-nums; }
+.value[data-empty] { color: var(--text-secondary); font-weight: 400; }
+
+/* Words roll in their own slots; a leaving word pops out of flow so the next one never waits for space. */
+.rolling { display: inline-flex; gap: .28em; white-space: nowrap; }
+.word { position: relative; display: inline-block; }
+.wordInner { display: inline-block; }
+
+/* Panel */
+.panel { position: absolute; top: 0; left: 0; width: max-content; padding: 10px; --cell: 36px; }
+.body { display: flex; gap: 10px; }
+
+.rail { position: relative; display: flex; width: 9.25rem; flex: none; flex-direction: column; gap: 2px; padding-right: 10px; border-right: 1px solid var(--border-subtle); }
+.railHighlight { position: absolute; top: 0; left: 0; border-radius: var(--radius-control); corner-shape: var(--corner-shape); background: color-mix(in oklab, var(--foreground) 6.5%, transparent); pointer-events: none; }
+.preset {
+  position: relative;
+  display: flex;
+  height: 32px;
+  flex: none;
+  align-items: center;
+  padding: 0 12px;
+  border: 0;
+  border-radius: var(--radius-control); corner-shape: var(--corner-shape);
+  background: transparent;
+  color: var(--text-secondary);
+  cursor: pointer;
+  font: inherit;
+  text-align: left;
+  white-space: nowrap;
+  -webkit-tap-highlight-color: transparent;
+  transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard);
+}
+.preset[aria-pressed="true"] { color: var(--foreground); font-weight: 500; }
+
+.calendars { position: relative; padding: 0 2px; }
+.navButton {
+  position: absolute;
+  z-index: 2;
+  top: 0;
+  display: grid;
+  width: 32px;
+  height: 32px;
+  place-items: center;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-full); corner-shape: round;
+  background: transparent;
+  color: var(--text-secondary);
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), transform var(--duration-instant) var(--ease-standard);
+}
+.navButton[data-side="prev"] { left: 2px; }
+.navButton[data-side="next"] { right: 2px; }
+.navButton:active:not(:disabled) { transform: scale(.92); }
+.navButton:disabled { opacity: .35; cursor: default; }
+
+/* Months slide horizontally inside a clipped window that keeps a little room for the blur. */
+.viewport { position: relative; overflow: clip; overflow-clip-margin: 2px; }
+.months { display: flex; gap: 24px; }
+.month { width: calc(var(--cell) * 7); }
+.monthTitle { height: 32px; margin: 0; color: var(--foreground); font-weight: 500; line-height: 32px; text-align: center; white-space: nowrap; }
+.grid { display: grid; }
+.weekdays { display: grid; height: 28px; align-items: center; color: var(--text-muted); font-size: var(--text-xs); grid-template-columns: repeat(7, var(--cell)); text-align: center; }
+.weeks { position: relative; }
+.week { display: grid; height: var(--cell); grid-template-columns: repeat(7, var(--cell)); }
+.cell, .blank { position: relative; display: block; }
+
+/* The highlight lives under the days: one bar per week plus a solid end at each side of the range. */
+.layer { position: absolute; inset: 0; pointer-events: none; }
+.bar { position: absolute; height: calc(var(--cell) - 6px); border-radius: var(--radius-full); corner-shape: round; background: var(--accent-subtle); }
+.thumb { position: absolute; top: 0; left: 0; width: var(--cell); height: var(--cell); }
+.thumb::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; corner-shape: round; background: var(--accent); }
+
+.day {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  width: 100%;
+  height: 100%;
+  place-items: center;
+  padding: 0;
+  border: 0;
+  border-radius: 50%; corner-shape: round;
+  background: transparent;
+  color: var(--foreground);
+  cursor: pointer;
+  font: inherit;
+  font-variant-numeric: tabular-nums;
+  -webkit-tap-highlight-color: transparent;
+  transition: color var(--duration-fast) var(--ease-standard);
+}
+.day > span { position: relative; display: grid; width: calc(100% - 6px); height: calc(100% - 6px); place-items: center; border-radius: 50%; corner-shape: round; transition: background-color var(--duration-fast) var(--ease-standard), transform var(--duration-instant) var(--ease-standard); }
+.day:active:not(:disabled) > span { transform: scale(.9); }
+.day[data-edge] { color: var(--accent-foreground); font-weight: 500; transition-delay: 40ms; }
+.day[data-today]::after { content: ""; position: absolute; bottom: 5px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; corner-shape: round; background: var(--accent); }
+.day[data-today][data-edge]::after { background: var(--accent-foreground); }
+.day:disabled { color: var(--text-muted); cursor: default; opacity: .5; }
+.day:focus-visible:not([data-edge]) > span { background: color-mix(in oklab, var(--foreground) 7%, transparent); }
+
+/* Footer: the formatted range and the two decisions. */
+.footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; padding: 10px 2px 0 12px; border-top: 1px solid var(--border-subtle); }
+.summary { display: grid; min-width: 0; gap: 1px; }
+.summaryValue { display: inline-flex; width: max-content; font-weight: 500; font-variant-numeric: tabular-nums; }
+.summaryCount { display: inline-flex; min-height: 1.4em; color: var(--text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
+.actions { display: flex; flex: none; align-items: center; gap: 6px; }
+.ghost, .primary {
+  display: inline-flex;
+  height: var(--control-height-sm);
+  align-items: center;
+  justify-content: center;
+  padding: 0 14px;
+  border: 0;
+  border-radius: var(--radius-control); corner-shape: var(--corner-shape);
+  cursor: pointer;
+  font: inherit;
+  font-weight: 500;
+  white-space: nowrap;
+  -webkit-tap-highlight-color: transparent;
+  transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), transform var(--duration-instant) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard);
+}
+.ghost { background: transparent; color: var(--text-secondary); }
+.primary { min-width: 4.75rem; background: var(--accent); color: var(--accent-foreground); }
+.ghost:active, .primary:active:not(:disabled) { transform: scale(.97); }
+.primary:disabled { opacity: .45; cursor: default; }
+.ghost:focus-visible { background: var(--surface-muted); color: var(--foreground); }
+.preset:focus-visible, .navButton:focus-visible { background: color-mix(in oklab, var(--foreground) 5%, transparent); color: var(--foreground); }
+
+.srOnly { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
+
+/* Compact: one month under a scrolling row of presets. */
+.panel[data-compact] { padding: 8px; }
+.panel[data-compact] .body { flex-direction: column; gap: 8px; }
+.panel[data-compact] .rail { width: auto; flex-direction: row; gap: 2px; margin: 0 -8px; padding: 0 8px 8px; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--border-subtle); overscroll-behavior-x: contain; scrollbar-width: none; }
+.panel[data-compact] .rail::-webkit-scrollbar { display: none; }
+.panel[data-compact] .preset { padding: 0 11px; }
+.panel[data-compact] .calendars { align-self: center; }
+.panel[data-compact] .footer { flex-wrap: wrap; margin-top: 6px; padding-left: 11px; }
+.panel[data-compact] .actions { margin-left: auto; }
+.panel[data-compact] .summary { flex: 1 1 8rem; }
+
+@media (hover: hover) and (pointer: fine) {
+  .root:not([data-open]):has(> .trigger:hover:not(:disabled)) .surface { background: color-mix(in oklab, var(--foreground) 3%, var(--surface-raised)); }
+  .root:not([data-open]):has(> .trigger:hover:not(:disabled)) .surface::after { border-color: var(--border-strong); }
+  .preset:hover { color: var(--foreground); }
+  .preset:not([aria-pressed="true"]):hover { background: color-mix(in oklab, var(--foreground) 4%, transparent); }
+  .navButton:hover:not(:disabled) { background: color-mix(in oklab, var(--foreground) 6.5%, transparent); color: var(--foreground); }
+  .day:hover:not(:disabled):not([data-edge]) > span { background: color-mix(in oklab, var(--foreground) 7%, transparent); }
+  .ghost:hover { background: var(--surface-muted); color: var(--foreground); }
+  .primary:hover:not(:disabled) { background: var(--accent-strong); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .surface, .preset, .navButton, .day, .day > span, .ghost, .primary { transition-duration: 0ms; }
+}
+
+@media (prefers-contrast: more) {
+  .surface::after { border-color: var(--border-strong); }
+}

package/components/dialog/dialog.d.ts

@@ -0,0 +1,11 @@
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+export declare function Dialog({ open: openProp, defaultOpen, onOpenChange, ...props }: ComponentPropsWithoutRef<typeof DialogPrimitive.Root>): import("react").JSX.Element;
+export declare const DialogTrigger: import("react").ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const DialogClose: import("react").ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
+export interface DialogContentProps extends ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
+    title: string;
+    description?: string;
+    children: ReactNode;
+}
+export declare function DialogContent({ title, description, children, className, onPointerDownOutside, onEscapeKeyDown, onOpenAutoFocus, onCloseAutoFocus, ...props }: DialogContentProps): import("react").JSX.Element;

package/components/dialog/dialog.js

@@ -0,0 +1,52 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { createContext, useCallback, useContext, useLayoutEffect, useRef, useState } from "react";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { X } from "lucide-react";
+import { ESCAPE_LAYER_ATTRIBUTE, layerEscape } from "../../lib/escape.js";
+import { motionTokens } from "../../lib/motion-tokens.js";
+import { useReturnFocus } from "../../lib/return-focus.js";
+import styles from "./dialog.module.css";
+/** Mirrors the open state so the content can stay mounted while it animates out, and retarget mid-flight if it is reopened or closed early. */
+const OpenContext = createContext(null);
+export function Dialog({ open: openProp, defaultOpen = false, onOpenChange, ...props }) {
+    const [uncontrolled, setUncontrolled] = useState(defaultOpen);
+    const open = openProp ?? uncontrolled;
+    const setOpen = useCallback((next) => { if (openProp === undefined)
+        setUncontrolled(next); onOpenChange?.(next); }, [openProp, onOpenChange]);
+    return _jsx(OpenContext.Provider, { value: open, children: _jsx(DialogPrimitive.Root, { ...props, open: open, onOpenChange: setOpen }) });
+}
+export const DialogTrigger = DialogPrimitive.Trigger;
+export const DialogClose = DialogPrimitive.Close;
+const fade = { duration: motionTokens.duration.instant };
+const leave = { duration: motionTokens.duration.fast, ease: [...motionTokens.ease.standard] };
+/** When the title or description changes while open, the new copy rises in and the old copy leaves upward. */
+function SwapText({ text }) {
+    const reduced = useReducedMotion();
+    return _jsx(AnimatePresence, { mode: "popLayout", initial: false, children: _jsx(motion.span, { className: styles.swap, initial: reduced ? false : { opacity: 0, y: "0.3em", filter: `blur(${motionTokens.blur.soft}px)` }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, exit: reduced ? { opacity: 0, transition: { duration: 0 } } : { opacity: 0, y: "-0.3em", filter: `blur(${motionTokens.blur.subtle}px)`, transition: { duration: motionTokens.duration.fast, ease: [...motionTokens.ease.standard] } }, transition: { duration: motionTokens.duration.standard, ease: [...motionTokens.ease.enter] }, children: text }, text) });
+}
+export function DialogContent({ title, description, children, className, onPointerDownOutside, onEscapeKeyDown, onOpenAutoFocus, onCloseAutoFocus, ...props }) {
+    const open = useContext(OpenContext);
+    // Closing puts focus back on what opened the dialog, Trigger or not (lib/return-focus.ts).
+    const returnFocus = useReturnFocus(open, onOpenAutoFocus, onCloseAutoFocus);
+    // Escape inside belongs to an open list, calendar or question first (lib/escape.ts); the next one closes the dialog.
+    const escape = { [ESCAPE_LAYER_ATTRIBUTE]: "", onEscapeKeyDown: layerEscape(onEscapeKeyDown), ...returnFocus };
+    const reduced = useReducedMotion();
+    // When the open state last changed. Radix waits for the click before treating a press as outside, and a press on the trigger
+    // while the dialog leaves reopens it first, so that press must not close it again.
+    const change = useRef({ open, at: 0 });
+    useLayoutEffect(() => { change.current = { open, at: performance.now() }; }, [open]);
+    const pressOutside = event => {
+        onPointerDownOutside?.(event);
+        if (open !== null && (!change.current.open || event.detail.originalEvent.timeStamp < change.current.at))
+            event.preventDefault();
+    };
+    const classes = [styles.content, className].filter(Boolean).join(" ");
+    const inner = _jsxs(_Fragment, { children: [_jsxs("div", { className: styles.header, children: [_jsxs("div", { children: [_jsx(DialogPrimitive.Title, { className: styles.title, children: _jsx(SwapText, { text: title }) }), description ? _jsx(DialogPrimitive.Description, { className: styles.description, children: _jsx(SwapText, { text: description }) }) : null] }), _jsx(DialogPrimitive.Close, { className: styles.close, "aria-label": "Close dialog", children: _jsx(X, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) })] }), _jsx("div", { className: styles.body, children: children })] });
+    // Under a bare Radix root the open state is unknown here, so CSS keyframes keyed off data-state animate the layers instead.
+    if (open === null)
+        return _jsxs(DialogPrimitive.Portal, { children: [_jsx(DialogPrimitive.Overlay, { className: `${styles.overlay} ${styles.keyframes}` }), _jsx(DialogPrimitive.Content, { ...props, ...escape, onPointerDownOutside: pressOutside, className: `${classes} ${styles.keyframes}`, children: inner })] });
+    // The overlay fades while the dialog rises 8px and scales up on a spring. Closing is shorter and quieter, and starts from wherever the entrance is.
+    return _jsx(AnimatePresence, { children: open && _jsxs(DialogPrimitive.Portal, { forceMount: true, children: [_jsx(DialogPrimitive.Overlay, { asChild: true, forceMount: true, children: _jsx(motion.div, { className: styles.overlay, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0, transition: reduced ? fade : leave }, transition: reduced ? fade : { duration: motionTokens.duration.standard, ease: [...motionTokens.ease.enter] } }) }), _jsx(DialogPrimitive.Content, { ...props, ...escape, onPointerDownOutside: pressOutside, asChild: true, forceMount: true, children: _jsx(motion.div, { className: classes, initial: reduced ? { opacity: 0 } : { opacity: 0, y: 8, scale: .96 }, animate: { opacity: 1, y: 0, scale: 1 }, exit: reduced ? { opacity: 0, transition: fade } : { opacity: 0, y: 4, scale: .98, transition: leave }, transition: reduced ? fade : { default: motionTokens.spring.smooth, opacity: { duration: motionTokens.duration.fast, ease: [...motionTokens.ease.enter] } }, children: inner }) })] }, "dialog") });
+}

package/components/dialog/dialog.module.css

@@ -0,0 +1,36 @@
+.overlay { position: fixed; inset: 0; z-index: 50; background: oklch(10% 0 0 / .46); backdrop-filter: blur(7px); }
+/* Centered with auto margins (like a native modal dialog) so transform stays free for the entrance spring. */
+.content { position: fixed; z-index: 51; inset: 0; width: min(calc(100vw - var(--space-block)), 440px); height: fit-content; max-height: calc(100vh - var(--space-block)); max-height: calc(100dvh - var(--space-block)); margin: auto; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-overlay); background: var(--surface-raised); color: var(--foreground); box-shadow: var(--shadow-floating); }
+/* Motion animates both layers. Keyframes only run when DialogContent sits under a bare Radix root. */
+.keyframes.overlay[data-state="open"] { animation: overlay-in var(--duration-standard) var(--ease-enter) both; }
+.keyframes.overlay[data-state="closed"] { animation: overlay-out var(--duration-fast) var(--ease-standard) both; }
+.keyframes.content[data-state="open"] { animation: content-fade-in var(--duration-fast) var(--ease-enter) both, content-rise-in var(--duration-spring) var(--ease-spring) both; }
+.keyframes.content[data-state="closed"] { animation: content-out var(--duration-fast) var(--ease-standard) both; }
+.content:focus { outline: none; }
+/* While the layers leave, clicks pass through, so the trigger can reopen the dialog mid-exit. Radix sets pointer-events inline on the overlay. */
+.overlay[data-state="closed"], .content[data-state="closed"] { pointer-events: none !important; }
+.header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-comfort); padding: var(--space-section); border-bottom: 1px solid var(--border); }
+.title { margin: 0; font-family: var(--font-body); font-size: var(--text-lg); font-weight: 500; letter-spacing: var(--tracking-body); line-height: var(--leading-body); }
+.description { margin: var(--space-related) 0 0; color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-body); }
+.title, .description { position: relative; overflow-wrap: anywhere; }
+.swap { display: block; }
+/* Line height sits on the text itself, so a page-level heading reset cannot shrink the title and pull the close button off its line. */
+.title .swap { line-height: var(--leading-body); }
+/* A compact icon button: quick press, spring release. The negative margin centres it on the title's first line. */
+.close { flex: 0 0 auto; margin-block: calc((var(--text-lg) * var(--leading-body) - var(--space-block)) / 2); display: grid; place-items: center; width: var(--space-block); height: var(--space-block); border: 1px solid var(--border); border-radius: var(--radius-control); background: color-mix(in oklab, var(--surface-muted) 50%, transparent); color: var(--text-secondary); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), transform var(--duration-spring) var(--ease-spring); }
+@media (hover: hover) and (pointer: fine) { .close:hover { background: var(--surface-muted); color: var(--foreground); } }
+.close:active { transform: scale(.96); transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), transform var(--duration-instant) var(--ease-standard); }
+.body { padding: var(--space-section); font-size: var(--text-sm); line-height: var(--leading-body); }
+@keyframes overlay-in { from { opacity: 0; } }
+@keyframes overlay-out { to { opacity: 0; } }
+@keyframes content-fade-in { from { opacity: 0; } }
+@keyframes content-rise-in { from { transform: translateY(8px) scale(.96); } }
+@keyframes content-out { to { opacity: 0; transform: translateY(4px) scale(.98); } }
+@keyframes content-fade-out { to { opacity: 0; } }
+@media (prefers-reduced-motion: reduce) {
+  .keyframes.overlay[data-state="open"], .keyframes.content[data-state="open"] { animation: overlay-in var(--duration-instant) var(--ease-standard) both; }
+  .keyframes.overlay[data-state="closed"] { animation: overlay-out var(--duration-instant) var(--ease-standard) both; }
+  .keyframes.content[data-state="closed"] { animation: content-fade-out var(--duration-instant) var(--ease-standard) both; }
+  .close, .close:active { transition: none; }
+  .close:active { transform: none; }
+}

package/components/donut-chart/donut-chart.d.ts

@@ -0,0 +1,46 @@
+import { type Ref } from "react";
+export interface DonutChartDatum {
+    /** Stable identity. A segment whose key survives a data change keeps its place and color, so switching datasets morphs the arcs. */
+    key: string;
+    label: string;
+    value: number;
+    /** Any CSS color. Segments default to the shared --series-* palette in data order, then neutral steps. */
+    color?: string;
+}
+/** Use a donut chart for a few parts of one whole, when the share of each part matters more than precise comparison. */
+export interface DonutChartProps {
+    data: DonutChartDatum[];
+    /** What the whole is, such as "Visits by source". Names the chart for assistive technology. */
+    label: string;
+    /** Unit after values, such as "visits". */
+    unit?: string;
+    formatValue?: (value: number) => string;
+    /** Center label at rest, above the total. */
+    totalLabel?: string;
+    /** Diameter in pixels. The chart scales down to fit narrower containers. */
+    size?: number;
+    /** Ring thickness in pixels. */
+    thickness?: number;
+    /** Segments below this share of the total join "Other". */
+    groupBelow?: number;
+    /** The most segments drawn, counting "Other". The smallest parts beyond it are grouped. */
+    maxSegments?: number;
+    otherLabel?: string;
+    /** Controlled selected segment key. Hover and focus preview other segments without changing it. */
+    activeKey?: string | null;
+    defaultActiveKey?: string | null;
+    onActiveChange?: (key: string | null) => void;
+    /** Controlled hidden segment keys. A hidden segment closes and the rest of the ring redistributes. */
+    hiddenKeys?: string[];
+    defaultHiddenKeys?: string[];
+    onHiddenKeysChange?: (keys: string[]) => void;
+    /** What clicking a legend row does: show or hide its segment, or pin it as the selected segment. */
+    legendAction?: "toggle" | "select";
+    /** The synced legend beside or below the ring. */
+    legend?: boolean;
+    emptyLabel?: string;
+    ref?: Ref<HTMLElement>;
+    className?: string;
+}
+export declare function DonutChart({ data, label, unit, formatValue, totalLabel, size, thickness, groupBelow, maxSegments, otherLabel, activeKey, defaultActiveKey, onActiveChange, hiddenKeys, defaultHiddenKeys, onHiddenKeysChange, legendAction, legend, emptyLabel, ref, className }: DonutChartProps): import("react").JSX.Element;
+export default DonutChart;