@cronus-ui/ui 0.6.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Cronus
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,262 @@
+# @cronus-ui/ui
+
+The Cronus UI component library — a themeable, accessible, shadcn-class set of
+React components built on Radix UI, [CVA](https://cva.style/), and Tailwind v4.
+
+Components are unstyled at the structural level and rendered against semantic
+[`@cronus-ui/tokens`](../tokens) (`bg-primary`, `text-fg-secondary`, `rounded-lg`,
+`shadow-glow`, …), so the entire library re-themes from one token change — and can
+be re-themed live by [`@cronus-ui/theme`](../theme). New components take `ref` as a
+prop (React 19). Existing ones may still use `forwardRef`. Every component
+carries `data-slot` and visible `focus-visible` rings.
+
+Reach for this package when you want production-ready Cronus components as a managed
+dependency. Prefer to own the source instead? Copy components into your project
+with `npx cronus-ui add` (see [Copy-in option](#copy-in-option-cli)).
+
+## Install
+
+> Published on npm under the `@cronus-ui` scope.
+> Install all three packages:
+
+```sh
+# npm
+npm i @cronus-ui/ui @cronus-ui/tokens @cronus-ui/theme
+# pnpm
+pnpm add @cronus-ui/ui @cronus-ui/tokens @cronus-ui/theme
+# bun
+bun add @cronus-ui/ui @cronus-ui/tokens @cronus-ui/theme
+```
+
+`@cronus-ui/ui` renders against the token bridge and runtime provider, so install
+[`@cronus-ui/tokens`](../tokens) and [`@cronus-ui/theme`](../theme) alongside it.
+
+### Prerequisites
+
+- **React 19** (also works with React 18.3+) — `react` and `react-dom` are peers.
+- **Tailwind v4** (or v3) configured with the `@cronus-ui/tokens` bridge or preset.
+- A few heavy, component-specific packages are **optional** peers — install them
+  only for the components you use. See
+  [Optional peer dependencies](#optional-peer-dependencies).
+
+### Optional peer dependencies
+
+Most components work out of the box. A handful sit on top of a heavy
+third-party library that is only needed by that component, so those libraries
+are declared as **optional peer dependencies** and are *not* installed with
+`@cronus-ui/ui`. Install the matching package(s) only when you import the
+component:
+
+| Component(s)                     | Package(s)                                              | Install                                                 |
+| -------------------------------- | ------------------------------------------------------- | ------------------------------------------------------- |
+| `Chart`                          | `recharts`                                              | `npm i recharts`                                        |
+| `RichTextEditor`                 | `@tiptap/react`, `@tiptap/pm`, `@tiptap/starter-kit`    | `npm i @tiptap/react @tiptap/pm @tiptap/starter-kit`    |
+| `Kanban`                         | `@dnd-kit/core`, `@dnd-kit/sortable`, `@dnd-kit/utilities` | `npm i @dnd-kit/core @dnd-kit/sortable @dnd-kit/utilities` |
+| `DataTable`                      | `@tanstack/react-table`                                 | `npm i @tanstack/react-table`                           |
+| `Calendar`                       | `react-day-picker`                                      | `npm i react-day-picker`                                |
+| `DatePicker`, `DateRangePicker`  | `react-day-picker`, `date-fns`                          | `npm i react-day-picker date-fns`                       |
+| `Scheduler`                      | `date-fns`                                              | `npm i date-fns`                                        |
+| `Form`                           | `react-hook-form`, `zod`, `@hookform/resolvers`         | `npm i react-hook-form zod @hookform/resolvers`         |
+
+Importing one of these components without its peer installed fails at
+build/bundle time with a module-not-found error for the missing package —
+installing the package(s) from the table fixes it.
+
+> Using the CLI instead (`npx cronus-ui add <slug>`)? Nothing changes for you:
+> the registry tracks each component's real imports and `add` installs them.
+
+### Wire up styling
+
+Tailwind does not scan `node_modules` by default, so the utility classes baked
+into the shipped components must be opted back into content detection — otherwise
+the markup is correct but **no CSS is generated**.
+
+**Tailwind v4** — in your global stylesheet:
+
+```css
+@import "tailwindcss";
+@import "@cronus-ui/tokens/styles.css";
+
+/* REQUIRED: emit the utilities used inside the shipped components. */
+@source "../node_modules/@cronus-ui/ui/dist/**/*.js";
+```
+
+**Tailwind v3** — in `tailwind.config.js`:
+
+```js
+import cronusPreset from "@cronus-ui/tokens/preset";
+
+export default {
+  presets: [cronusPreset],
+  content: [
+    "./src/**/*.{ts,tsx}",
+    // REQUIRED: keep the utilities used inside the shipped components.
+    "./node_modules/@cronus-ui/ui/dist/**/*.js",
+  ],
+};
+```
+
+See [`@cronus-ui/tokens`](../tokens) for the full Tailwind v3/v4 setup details.
+
+## Usage
+
+Wrap the app in the provider once, then import components anywhere.
+
+```tsx
+// app/layout.tsx — or your root
+import "@cronus-ui/tokens/styles.css";
+import { CronusUIProvider } from "@cronus-ui/theme";
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <body>
+        <CronusUIProvider asRoot defaultThemeName="aurora" defaultModeName="dark">
+          {children}
+        </CronusUIProvider>
+      </body>
+    </html>
+  );
+}
+```
+
+```tsx
+// any component
+import { Button, Card, CardHeader, CardTitle, CardContent, Badge } from "@cronus-ui/ui";
+
+export function Example() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Ship it</CardTitle>
+        <Badge>New</Badge>
+      </CardHeader>
+      <CardContent>
+        <Button variant="primary">Get started</Button>
+      </CardContent>
+    </Card>
+  );
+}
+```
+
+### Subpath imports
+
+Every component is also exposed as its own entry point for finer-grained imports,
+e.g. `import { Button } from "@cronus-ui/ui/button"`. The `cn` class-merge helper used
+by every component is available at `import { cn } from "@cronus-ui/ui/cn"`.
+
+## Components
+
+Foundations and forms — Button, Input, Label, Badge, Card, Separator, Skeleton,
+Spinner, Textarea, Checkbox, Switch, RadioGroup, Select, Slider, Toggle, Field,
+Form (react-hook-form + zod), InputOTP, FileDropzone, NumberInput, Combobox,
+MultiSelect, SegmentedControl, Autocomplete.
+
+Overlays and navigation — Dialog, Sheet, AlertDialog, DropdownMenu, Popover,
+MorphingPopover, HoverCard, Tooltip, Tabs, Accordion, Collapsible, Drawer, Toast
+(Sonner), Command palette, NavigationMenu, Breadcrumb, Pagination, Sidebar,
+AppShell.
+
+Data and display — Table, DataTable (TanStack), Avatar, Progress, ScrollArea,
+Calendar, DatePicker, DateRangePicker, Chart (Recharts), Empty, Metric, Kbd,
+CodeBlock, CopyButton, Carousel.
+
+Premium and brand — GlassCard, GradientBorder, GradientText, SpotlightCard,
+AuroraBackground, Shimmer, AnimatedButton, AnimatedNumber, Reveal, TextEffect,
+LogoCarousel, and motion presets — the Aurora layer of glass, gradients, springs,
+and scroll reveals.
+
+Browse them all, with live previews and props, on the [docs site](../../apps/www).
+
+## Theming
+
+Components consume semantic tokens only — never raw colors — so they re-theme
+with the active theme/mode and with any runtime override. Switch theme or override
+tokens through [`@cronus-ui/theme`](../theme):
+
+```tsx
+const { setTheme, setMode, setOverrides } = useTheme();
+setOverrides({ radius: "20px", primary: "#7c3aed" }); // re-themes the subtree, no re-render
+```
+
+The OKLCH token scale and the two built-in themes (Aurora, Neutral) live in
+[`@cronus-ui/tokens`](../tokens).
+
+## Testing
+
+`@cronus-ui/ui/testing` ships first-class helpers for testing apps built on
+Cronus UI with [Testing Library](https://testing-library.com/) under jsdom
+(Vitest or Jest). The subpath is not part of the main barrel, so test helpers
+can never leak into an app bundle.
+
+```sh
+npm i -D @testing-library/react vitest-axe
+```
+
+Both are **optional peer dependencies** — only `@cronus-ui/ui/testing` uses
+them, never the runtime components, and `vitest-axe` is only required if you
+call `expectNoA11yViolations`.
+
+```tsx
+import { expectNoA11yViolations, findDialog, renderWithCronus } from "@cronus-ui/ui/testing";
+import { screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { expect, it } from "vitest";
+
+it("invite dialog works and stays accessible in every theme", async () => {
+  const user = userEvent.setup();
+  const { baseElement, rerenderWithTheme } = renderWithCronus(<InvitePanel />, {
+    theme: "aurora",
+    mode: "dark",
+  });
+
+  await user.click(screen.getByRole("button", { name: "Invite teammate" }));
+  await findDialog("Invite teammate"); // portaled to document.body — still found
+  await expectNoA11yViolations(baseElement);
+
+  rerenderWithTheme("neutral", "light"); // remounts the scope in the new theme
+  expect(screen.getByRole("button", { name: "Invite teammate" })).toBeVisible();
+});
+```
+
+- `renderWithCronus(ui, { theme?, mode?, ...rtlOptions })` — Testing Library's
+  `render` with the UI wrapped in a scoped `CronusUIProvider`. The theme lands
+  on a wrapper `<div data-cronus-theme data-cronus-mode>` (never on `<html>`), so
+  tests can't bleed theme state into each other. Returns the usual render
+  result plus `rerenderWithTheme(theme, mode?)`, which remounts the scope under
+  another theme/mode.
+- `findDialog(name?)` / `findTooltip(text?)` — async queries scoped to
+  `document.body`, so they find Radix surfaces that render through portals
+  (outside the container `render` returns).
+- `expectNoA11yViolations(baseElement, axeOptions?)` — runs axe-core and fails
+  with the formatted violations, the same gate this library's own component
+  suite runs. Pass `baseElement` (not `container`) so portaled overlays are
+  included in the scan.
+
+> Radix overlays portal to `document.body`, outside the themed wrapper div —
+> assert on their behavior and accessibility here, and cover theme-dependent
+> visuals with your app-level (`asRoot`) provider in the browser.
+
+## Copy-in option (CLI)
+
+Prefer to own the component source, shadcn-style? The `cronus-ui` CLI copies the
+real component sources into your project and rewrites imports to your aliases:
+
+```sh
+npx cronus-ui init                     # write cronus-ui.json + the cn() helper
+npx cronus-ui add button card dialog   # copy components in (resolves dependencies)
+npx cronus-ui add dashboard            # also pulls full-page blocks
+```
+
+Both distribution modes share one source of truth. See the
+[CLI README](../cli/README.md) for commands and configuration.
+
+## Related packages
+
+- [`@cronus-ui/tokens`](../tokens) — the OKLCH design tokens these components render against.
+- [`@cronus-ui/theme`](../theme) — the runtime provider + `useTheme` hook.
+- [`cronus-ui`](../cli) — the CLI for copying components into your project.
+
+## License
+
+MIT

package/dist/charts/animation.d.ts

@@ -0,0 +1,11 @@
+import type { Transition } from "motion/react";
+/** Default clip-reveal easing for cartesian charts. */
+export declare const DEFAULT_ANIMATION_EASING = "cubic-bezier(0.85, 0, 0.15, 1)";
+export declare const DEFAULT_ANIMATION_DURATION_MS = 1100;
+/** Default enter transition — matches the original line chart reveal. */
+export declare const DEFAULT_CHART_ENTER_TRANSITION: Transition;
+/**
+ * Clip-path width reveal must use tween — spring does not reliably animate SVG width.
+ */
+export declare function clipRevealTransition(enterTransition?: Transition): Transition;
+//# sourceMappingURL=animation.d.ts.map

package/dist/charts/animation.js

@@ -0,0 +1,29 @@
+/** Default clip-reveal easing for cartesian charts. */
+export const DEFAULT_ANIMATION_EASING = "cubic-bezier(0.85, 0, 0.15, 1)";
+export const DEFAULT_ANIMATION_DURATION_MS = 1100;
+/** Default enter transition — matches the original line chart reveal. */
+export const DEFAULT_CHART_ENTER_TRANSITION = {
+    type: "tween",
+    duration: DEFAULT_ANIMATION_DURATION_MS / 1000,
+    ease: [0.85, 0, 0.15, 1],
+};
+/**
+ * Clip-path width reveal must use tween — spring does not reliably animate SVG width.
+ */
+export function clipRevealTransition(enterTransition) {
+    if (enterTransition?.type === "tween") {
+        return {
+            ...enterTransition,
+            ease: enterTransition.ease ?? DEFAULT_CHART_ENTER_TRANSITION.ease,
+        };
+    }
+    const duration = typeof enterTransition?.duration === "number"
+        ? enterTransition.duration
+        : DEFAULT_ANIMATION_DURATION_MS / 1000;
+    return {
+        type: "tween",
+        duration,
+        ease: DEFAULT_CHART_ENTER_TRANSITION.ease,
+    };
+}
+//# sourceMappingURL=animation.js.map

package/dist/charts/area-chart-loading.d.ts

@@ -0,0 +1,34 @@
+import type { Margin } from "./chart-context.js";
+import type { LoadingStyle } from "./chart-phase.js";
+export interface AreaChartLoadingProps {
+    /** Chart margins */
+    margin?: Partial<Margin>;
+    /** Stroke color for the animated loading segment. */
+    stroke?: string;
+    /** Stroke opacity for the animated loading segment. Default: 0.5 */
+    strokeOpacity?: number;
+    /** Grid line stroke (color and opacity via color-mix or oklch alpha). */
+    gridStroke?: string;
+    /** Shimmer band stroke (color and opacity via color-mix or oklch alpha). */
+    gridShimmerStroke?: string;
+    /** Animate a shimmer band across grid lines. Default: true */
+    gridShimmer?: boolean;
+    /** Shimmer band width in pixels. Default: 140 */
+    gridShimmerLength?: number;
+    /** Shimmer speed multiplier (higher = faster). Default: 1 */
+    gridShimmerSpeed?: number;
+    /** Match shimmer loop to the loading line pulse (cycle + inter-loop pause). */
+    gridShimmerSync?: boolean;
+    /** Loading animation: `"pulse"` (default traveling pulse) or `"sweep"` (a
+     * diagonal shimmer across the skeleton area). Default: `"pulse"`. */
+    loadingStyle?: LoadingStyle;
+    /** Centered shimmer label text. Default: "Loading" */
+    label?: string;
+    /** Aspect ratio as "width / height". Default: "2 / 1" */
+    aspectRatio?: string;
+    /** Additional class name for the container */
+    className?: string;
+}
+export declare function AreaChartLoading({ margin, stroke, strokeOpacity, gridStroke, gridShimmerStroke, gridShimmer, gridShimmerLength, gridShimmerSpeed, gridShimmerSync, loadingStyle, label, aspectRatio, className, }: AreaChartLoadingProps): import("react").JSX.Element;
+export default AreaChartLoading;
+//# sourceMappingURL=area-chart-loading.d.ts.map

package/dist/charts/area-chart-loading.js

@@ -0,0 +1,22 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { curveNatural } from "@visx/curve";
+import { useMemo } from "react";
+import { Area } from "./area.js";
+import { AreaChart } from "./area-chart.js";
+import { DEFAULT_SKELETON_DATA_KEY, DEFAULT_SKELETON_POINT_COUNT, generateChartSkeletonData, } from "./generate-chart-skeleton-data.js";
+import { Grid } from "./grid.js";
+const LOADING_DATA_KEY = DEFAULT_SKELETON_DATA_KEY;
+const DEFAULT_LOADING_STROKE = "var(--foreground)";
+const DEFAULT_LOADING_GRID_STROKE = "color-mix(in oklch, var(--chart-grid) 50%, transparent)";
+const DEFAULT_LOADING_GRID_SHIMMER_STROKE = "color-mix(in oklch, var(--foreground) 68%, transparent)";
+const DEFAULT_LOADING_STROKE_OPACITY = 0.5;
+export function AreaChartLoading({ margin, stroke = DEFAULT_LOADING_STROKE, strokeOpacity = DEFAULT_LOADING_STROKE_OPACITY, gridStroke = DEFAULT_LOADING_GRID_STROKE, gridShimmerStroke = DEFAULT_LOADING_GRID_SHIMMER_STROKE, gridShimmer = true, gridShimmerLength, gridShimmerSpeed, gridShimmerSync = false, loadingStyle = "pulse", label = "Loading", aspectRatio = "2 / 1", className = "", }) {
+    const data = useMemo(() => generateChartSkeletonData({
+        dataKey: DEFAULT_SKELETON_DATA_KEY,
+        pointCount: DEFAULT_SKELETON_POINT_COUNT,
+    }), []);
+    return (_jsxs(AreaChart, { animationDuration: 0, aspectRatio: aspectRatio, className: className, data: data, loadingLabel: label, margin: margin, status: "loading", children: [_jsx(Grid, { horizontal: true, shimmer: loadingStyle === "sweep" ? false : gridShimmer, shimmerLength: gridShimmerLength, shimmerSpeed: gridShimmerSpeed, shimmerStroke: gridShimmerStroke, shimmerSync: gridShimmerSync, stroke: gridStroke }), _jsx(Area, { curve: curveNatural, dataKey: LOADING_DATA_KEY, fadeEdges: false, fill: "transparent", fillOpacity: 0, loading: true, loadingStroke: stroke, loadingStrokeOpacity: strokeOpacity, loadingStyle: loadingStyle, showHighlight: false, showLine: true, stroke: "transparent", strokeWidth: 2 })] }));
+}
+export default AreaChartLoading;
+//# sourceMappingURL=area-chart-loading.js.map

package/dist/charts/area-chart.d.ts

@@ -0,0 +1,48 @@
+import type { Transition } from "motion/react";
+import { type CSSProperties, type ReactNode } from "react";
+import type { Margin } from "./chart-context.js";
+import { type ChartPhase, type ChartStatus } from "./chart-phase.js";
+export interface AreaChartProps {
+    /** Data array - each item should have a date field and numeric values */
+    data: Record<string, unknown>[];
+    /** Key in data for the x-axis (date). Default: "date" */
+    xDataKey?: string;
+    /** Chart margins */
+    margin?: Partial<Margin>;
+    /** Animation duration in milliseconds. Default: 1100 */
+    animationDuration?: number;
+    /** CSS easing for clip-reveal. Default: cubic-bezier(0.85, 0, 0.15, 1) */
+    animationEasing?: string;
+    /** Motion enter transition (spring or cubic-bezier tween). */
+    enterTransition?: Transition;
+    /** Signature of motion URL state — triggers reveal replay when it changes. */
+    revealSignature?: string;
+    /** Aspect ratio as "width / height". Default: "2 / 1" */
+    aspectRatio?: string;
+    /** Additional class name for the container */
+    className?: string;
+    /** Loading vs ready — drives chart phase and loading chrome. Default: `"ready"`. */
+    status?: ChartStatus;
+    /** Centered shimmer label while loading. */
+    loadingLabel?: string;
+    /** Animate y-domain over this duration (ms) on status transitions. Default: 500. */
+    yDomainTweenDuration?: number;
+    /** Animate y-domain when status or target domain changes. Default: true */
+    yDomainTween?: boolean;
+    /** Visible x-domain for brush zoom. */
+    xDomain?: [Date, Date];
+    /** Full dataset length for x-scale padding when `xDomain` is set. */
+    xDomainSlotCount?: number;
+    /** Tween y-domain when brush changes the visible x-range. Default: false */
+    tweenYDomainOnXDomainChange?: boolean;
+    /** Inline container styles (e.g. fixed height for brush strip). */
+    style?: CSSProperties;
+    /** Fires when the internal chart phase changes (e.g. OG capture readiness). */
+    onPhaseChange?: (phase: ChartPhase) => void;
+    /** Child components (Area, Grid, ChartTooltip, etc.) */
+    children: ReactNode;
+}
+export declare function AreaChart({ data, xDataKey, margin: marginProp, animationDuration, animationEasing, enterTransition, revealSignature, aspectRatio, className, status, loadingLabel, yDomainTweenDuration, yDomainTween, xDomain, xDomainSlotCount, tweenYDomainOnXDomainChange, style, onPhaseChange, children, }: AreaChartProps): import("react").JSX.Element;
+export { Area, type AreaProps } from "./area.js";
+export default AreaChart;
+//# sourceMappingURL=area-chart.d.ts.map

package/dist/charts/area-chart.js

@@ -0,0 +1,57 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ParentSize } from "@visx/responsive";
+import { Children, isValidElement, useCallback, useMemo, useRef, useState, } from "react";
+import { cn } from "../lib/cn.js";
+import { Area } from "./area.js";
+import { ChartLoadingLabel } from "./chart-loading-label.js";
+import { DEFAULT_CHART_STATUS, DEFAULT_Y_DOMAIN_TWEEN_MS, resolveRestingChartPhase, } from "./chart-phase.js";
+import { PatternArea } from "./pattern-area.js";
+import { TimeSeriesChartInner } from "./time-series-chart-shell.js";
+const DEFAULT_MARGIN = { top: 40, right: 40, bottom: 40, left: 40 };
+function extractAreaConfigs(children) {
+    const configs = [];
+    Children.forEach(children, (child) => {
+        if (!isValidElement(child)) {
+            return;
+        }
+        const childType = child.type;
+        const componentName = typeof child.type === "function" ? childType.displayName || childType.name || "" : "";
+        const props = child.props;
+        const isPatternArea = componentName === "PatternArea" || child.type === PatternArea;
+        const isAreaComponent = componentName === "Area" ||
+            child.type === Area ||
+            (props && typeof props.dataKey === "string" && props.dataKey.length > 0 && !isPatternArea);
+        if (isAreaComponent && props?.dataKey) {
+            configs.push({
+                dataKey: props.dataKey,
+                stroke: props.stroke || props.fill || "var(--chart-line-primary)",
+                strokeWidth: props.strokeWidth || 2,
+                yAxisId: props.yAxisId,
+            });
+        }
+    });
+    return configs;
+}
+function ChartInner({ width, height, data, xDataKey, margin, animationDuration, animationEasing, enterTransition, revealSignature, chartStatus, loadingLabel, yDomainTweenDuration, yDomainTween, xDomain, xDomainSlotCount, tweenYDomainOnXDomainChange, children, containerRef, onPhaseChange, }) {
+    const lines = useMemo(() => extractAreaConfigs(children), [children]);
+    return (_jsx(TimeSeriesChartInner, { animationDuration: animationDuration, animationEasing: animationEasing, chartStatus: chartStatus, clipPathId: "chart-area-grow-clip", containerRef: containerRef, data: data, enterTransition: enterTransition, height: height, lines: lines, loadingLabel: loadingLabel, margin: margin, onPhaseChange: onPhaseChange, revealSignature: revealSignature, tweenYDomainOnXDomainChange: tweenYDomainOnXDomainChange, width: width, xDataKey: xDataKey, xDomain: xDomain, xDomainSlotCount: xDomainSlotCount, yDomainTween: yDomainTween, yDomainTweenDuration: yDomainTweenDuration, children: children }));
+}
+export function AreaChart({ data, xDataKey = "date", margin: marginProp, animationDuration = 1100, animationEasing, enterTransition, revealSignature, aspectRatio = "2 / 1", className = "", status = DEFAULT_CHART_STATUS, loadingLabel, yDomainTweenDuration = DEFAULT_Y_DOMAIN_TWEEN_MS, yDomainTween = true, xDomain, xDomainSlotCount, tweenYDomainOnXDomainChange = false, style, onPhaseChange, children, }) {
+    const containerRef = useRef(null);
+    const margin = { ...DEFAULT_MARGIN, ...marginProp };
+    const [chartPhase, setChartPhase] = useState(() => resolveRestingChartPhase(status));
+    const handlePhaseChange = useCallback((phase) => {
+        setChartPhase(phase);
+        onPhaseChange?.(phase);
+    }, [onPhaseChange]);
+    const showLoadingLabel = Boolean(loadingLabel?.trim() &&
+        (chartPhase === "loading" ||
+            chartPhase === "exiting" ||
+            chartPhase === "gridTweenReady" ||
+            chartPhase === "revealingLoading"));
+    return (_jsxs("div", { "data-slot": "area-chart", className: cn("relative w-full", className), ref: containerRef, style: { aspectRatio, touchAction: "none", ...style }, children: [_jsx(ParentSize, { debounceTime: 10, children: ({ width, height }) => (_jsx(ChartInner, { animationDuration: animationDuration, animationEasing: animationEasing, chartStatus: status, containerRef: containerRef, data: data, enterTransition: enterTransition, height: height, loadingLabel: loadingLabel, margin: margin, onPhaseChange: handlePhaseChange, revealSignature: revealSignature, tweenYDomainOnXDomainChange: tweenYDomainOnXDomainChange, width: width, xDataKey: xDataKey, xDomain: xDomain, xDomainSlotCount: xDomainSlotCount, yDomainTween: yDomainTween, yDomainTweenDuration: yDomainTweenDuration, children: children })) }), showLoadingLabel ? (_jsx(ChartLoadingLabel, { exiting: chartPhase !== "loading", text: loadingLabel })) : null] }));
+}
+export { Area } from "./area.js";
+export default AreaChart;
+//# sourceMappingURL=area-chart.js.map

package/dist/charts/area-gradient-defs.d.ts

@@ -0,0 +1,20 @@
+import { type FadeEdges } from "./fade-edges.js";
+interface AreaGradientDefsProps {
+    gradientId: string;
+    strokeGradientId: string;
+    edgeMaskId: string;
+    edgeGradientId: string;
+    fill: string;
+    fillOpacity: number;
+    gradientToOpacity: number;
+    /** 0–1: where the bottom stop sits (1 = full-height gradient). */
+    gradientSpan?: number;
+    resolvedStroke: string;
+    isPatternFill: boolean;
+    fadeEdges: FadeEdges;
+    innerWidth: number;
+    innerHeight: number;
+}
+export declare function AreaGradientDefs({ gradientId, strokeGradientId, edgeMaskId, edgeGradientId, fill, fillOpacity, gradientToOpacity, gradientSpan, resolvedStroke, isPatternFill, fadeEdges, innerWidth, innerHeight, }: AreaGradientDefsProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=area-gradient-defs.d.ts.map

package/dist/charts/area-gradient-defs.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { fadeGradientStops, resolveFadeSides, viewportFadeGradientAttrs, } from "./fade-edges.js";
+export function AreaGradientDefs({ gradientId, strokeGradientId, edgeMaskId, edgeGradientId, fill, fillOpacity, gradientToOpacity, gradientSpan = 1, resolvedStroke, isPatternFill, fadeEdges, innerWidth, innerHeight, }) {
+    const sides = resolveFadeSides(fadeEdges);
+    // Stroke gradient mirrors the area's edge fade so the line doesn't pop in
+    // past the faded fill. Skip emitting it when neither edge fades — the line
+    // can then paint a solid stroke instead of an unnecessary url(#...) ref.
+    const strokeStops = sides.any ? fadeGradientStops(sides) : null;
+    const showEdgeMask = sides.any && !isPatternFill;
+    const edgeStops = showEdgeMask ? fadeGradientStops(sides) : null;
+    const span = Math.min(1, Math.max(0.01, gradientSpan));
+    const midOffset = `${span * 100}%`;
+    return (_jsxs("defs", { children: [isPatternFill ? null : (_jsxs("linearGradient", { id: gradientId, x1: "0%", x2: "0%", y1: "0%", y2: "100%", children: [_jsx("stop", { offset: "0%", style: { stopColor: fill, stopOpacity: fillOpacity } }), _jsx("stop", { offset: midOffset, style: { stopColor: fill, stopOpacity: gradientToOpacity } }), span < 1 ? (_jsx("stop", { offset: "100%", style: { stopColor: fill, stopOpacity: gradientToOpacity } })) : null] })), strokeStops ? (_jsx("linearGradient", { id: strokeGradientId, ...viewportFadeGradientAttrs(innerWidth), children: strokeStops.map((stop) => (_jsx("stop", { offset: stop.offset, style: { stopColor: resolvedStroke, stopOpacity: stop.opacity } }, stop.offset))) })) : null, edgeStops ? (_jsxs(_Fragment, { children: [_jsx("linearGradient", { id: edgeGradientId, ...viewportFadeGradientAttrs(innerWidth), children: edgeStops.map((stop) => (_jsx("stop", { offset: stop.offset, style: { stopColor: "white", stopOpacity: stop.opacity } }, stop.offset))) }), _jsx("mask", { id: edgeMaskId, children: _jsx("rect", { fill: `url(#${edgeGradientId})`, height: innerHeight, width: innerWidth, x: "0", y: "0" }) })] })) : null] }));
+}
+//# sourceMappingURL=area-gradient-defs.js.map

package/dist/charts/area.d.ts

@@ -0,0 +1,76 @@
+type CurveFactory = any;
+import type { LoadingStyle } from "./chart-phase.js";
+import { type FadeEdges } from "./fade-edges.js";
+import { type LineLoadingPulseMode } from "./line-loading-pulse.js";
+import type { SeriesPointMarkerStyle } from "./series-point-marker.js";
+export interface AreaProps {
+    /** Key in data to use for y values */
+    dataKey: string;
+    /** Y-scale group id (Recharts `yAxisId`). Default: `"left"`. */
+    yAxisId?: string | number;
+    /** Fill color for the area gradient start. Default: var(--chart-line-primary) */
+    fill?: string;
+    /** Fill opacity at the top of the area. Default: 0.4 */
+    fillOpacity?: number;
+    /** Stroke color for the line. Default: same as fill */
+    stroke?: string;
+    /** Stroke width. Default: 2 */
+    strokeWidth?: number;
+    /** Curve function. Default: curveMonotoneX */
+    curve?: CurveFactory;
+    /** Whether to animate the area. Default: true */
+    animate?: boolean;
+    /** Whether to show the stroke line. Default: true */
+    showLine?: boolean;
+    /** Whether to show highlight segment on hover. Default: true */
+    showHighlight?: boolean;
+    /** Gradient opacity at bottom (0 = fully transparent). Default: 0 */
+    gradientToOpacity?: number;
+    /**
+     * Vertical extent of the fill gradient (0–1). `1` fades across the full
+     * height; lower values compress the gradient toward the top.
+     */
+    gradientSpan?: number;
+    /**
+     * Fade the area fill (and stroke) toward transparent at the chart edges.
+     * - `true` fades both edges, `false` disables the fade entirely.
+     * - `"left"` / `"right"` fades only that side — useful when the opposite
+     *   edge butts up against another element you don't want to fade into.
+     * Default: false
+     */
+    fadeEdges?: FadeEdges;
+    /** Render scatter-style circle markers at each data point. Default: false */
+    showMarkers?: boolean;
+    /** Marker styling (same options as Scatter). */
+    markers?: SeriesPointMarkerStyle;
+    /**
+     * Data index from which the line stroke becomes dashed (inclusive).
+     * Useful for projecting incomplete periods, e.g. dashed from yesterday through today.
+     */
+    dashFromIndex?: number;
+    /** Dash pattern for the tail segment when `dashFromIndex` is set. Default: "6,4" */
+    dashArray?: string;
+    /** Pulse stroke color while chart is loading. Default: var(--foreground) */
+    loadingStroke?: string;
+    /** Pulse stroke opacity while chart is loading. Default: 0.5 */
+    loadingStrokeOpacity?: number;
+    /**
+     * Show the loading pulse overlay. Default: follows chart loading phase.
+     * Set `false` to disable even during loading.
+     */
+    loading?: boolean;
+    /** Override pulse animation mode (loop / exit / enter). */
+    loadingPulseMode?: LineLoadingPulseMode;
+    /**
+     * Loading animation while the chart is in loading status: the default
+     * traveling `"pulse"`, or a diagonal `"sweep"` shimmer across the skeleton
+     * area. Default: `"pulse"`.
+     */
+    loadingStyle?: LoadingStyle;
+}
+export declare function Area({ dataKey, yAxisId, fill, fillOpacity, stroke, strokeWidth, curve, animate, showLine, showHighlight, gradientToOpacity, gradientSpan, fadeEdges, showMarkers, markers, dashFromIndex, dashArray, loading, loadingStroke, loadingStrokeOpacity, loadingPulseMode, loadingStyle, }: AreaProps): import("react").JSX.Element;
+export declare namespace Area {
+    var displayName: string;
+}
+export default Area;
+//# sourceMappingURL=area.d.ts.map