@siyahi/ui 0.0.0-stage → 0.1.0-next.4

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Jatin Bansal
+
+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

@@ -1,3 +1,175 @@
-# Temporary Holding Version
+<p><img src="assets/icon.svg" width="48" height="48" alt="Siyahi"></p>
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+# Siyahi
+
+Siyahi (Hindi for ink) is a small design system for data-heavy React apps:
+stock [shadcn/ui](https://ui.shadcn.com) on [Base UI](https://base-ui.com) and
+Tailwind CSS v4, shipped as one npm package, `@siyahi/ui`. It adds a theme with
+four meaning colours and a five-hue chart palette that pass WCAG contrast in
+light and dark, a few finance components, locale-aware formatters, a lint that
+keeps pages on the theme, and a catalogue site that is the documentation.
+
+**Catalogue:** https://siyahi.jatinbansal.com
+
+## Install
+
+Siyahi is pre-1.0; releases go out under the `next` tag. It needs React 19 and
+Tailwind CSS v4, compiled by the Tailwind Vite plugin: the package's stylesheet
+is Tailwind source, so a plain CSS import leaves every component unstyled.
+
+```sh
+npm install @siyahi/ui@next tailwindcss @tailwindcss/vite
+```
+
+```ts
+// vite.config.ts
+import tailwindcss from "@tailwindcss/vite";
+export default defineConfig({ plugins: [react(), tailwindcss()] });
+```
+
+```css
+/* src/index.css */
+@import "@siyahi/ui/styles.css";
+```
+
+```tsx
+// src/main.tsx
+import "./index.css";
+import { SiyahiProvider } from "@siyahi/ui";
+createRoot(root).render(
+  <SiyahiProvider>
+    <App />
+  </SiyahiProvider>,
+);
+```
+
+Everything comes from `@siyahi/ui`: the shadcn components, the registry
+add-ons (data table, heatmaps, stat tiles, sidebar), Siyahi's own components
+and the Recharts pieces charts are built from. Add `lucide-react` only if your
+own code imports icons. A Next.js app compiles the same stylesheet through
+`@tailwindcss/postcss` instead of the Vite plugin.
+
+### Install from a GitHub release
+
+Until the npm publish is live, every merge to `main` also attaches both
+tarballs to a [GitHub release](https://github.com/jatinbansal1998/siyahi/releases).
+Install a version by URL, alongside `tailwindcss` and `@tailwindcss/vite` as
+above:
+
+```sh
+npm install --allow-remote=root https://github.com/jatinbansal1998/siyahi/releases/download/v<version>/siyahi-ui-<version>.tgz
+npm install --allow-remote=root --save-dev https://github.com/jatinbansal1998/siyahi/releases/download/v<version>/siyahi-tools-<version>.tgz
+```
+
+npm 12 refuses tarball URLs unless `allow-remote` permits them; put
+`allow-remote=root` in the project's `.npmrc` so a later plain `npm install`
+works too. The rolling `next` release always holds the newest build under fixed
+names (`.../releases/download/next/siyahi-ui-next.tgz` and
+`siyahi-tools-next.tgz`); its assets are replaced on every merge, so pin a
+versioned URL in `package.json`.
+
+## What is in it
+
+- **shadcn/ui components** in the `base-vega` style, installed with the shadcn
+  CLI and never edited.
+- **Registry add-ons**, copied once with their origin and licence recorded: a
+  data table on TanStack Table, calendar, weekday and status heatmaps, a ranked
+  bar list, the `SectionCards` stat tile and the `sidebar-07` app shell.
+- **Siyahi components**: `Delta` (a signed figure with ▲ ▼), `PriceChart`
+  (TradingView Lightweight Charts in theme colours), `Treemap` (holdings heat
+  map), `LocalTime` (a time in the configured zone with the viewer's own clock
+  in a tooltip) and `SiyahiProvider`.
+- **Formatters**: `money`, `moneyCompact`, `pct` and `time`, or `useFormat()`
+  for the same bound to the provider's locale.
+- **`report.css`** for static HTML reports that do not use React: the theme as
+  plain CSS variables plus base body styles, with no network requests.
+
+## Locale
+
+Numbers, money and times default to Indian English, rupees and IST:
+`₹1,53,110`, `₹2.4L`, `₹40Cr`, `14:30 IST`. In an Indian-region locale,
+`moneyCompact` prints amounts under one lakh in full (`₹99,999`), never as `K`.
+Pass another locale to the provider and every formatter and component under it
+follows:
+
+```tsx
+<SiyahiProvider locale={{ numberLocale: "en-US", currency: "USD", timeZone: "America/New_York" }}>
+```
+
+The formatters print a minus sign and nothing else. A signed figure (a gain, a
+loss, a change) goes through `<Delta>`, which adds ▲ or ▼ and the meaning
+colour. Time zone names come from the runtime's ICU data; a slim Node or
+browser build may print `GMT+5:30` where a full one prints `IST`.
+
+## Dark mode
+
+The colour scheme follows the device (`prefers-color-scheme`). There is no
+toggle and no class to set. The theme's dark values sit under the same `dark`
+variant as the `dark:` utilities, so an app that wants its own toggle swaps one
+line after the import and sets the `dark` class on `<html>`:
+
+```css
+@import "@siyahi/ui/styles.css";
+@custom-variant dark (&:where(.dark, .dark *));
+```
+
+Both the tokens and the utilities then follow the class. Set `color-scheme` on
+`<html>` yourself as well, so scrollbars and form controls match.
+
+## Lint
+
+`@siyahi/tools` ships an [oxlint](https://oxc.rs) plugin. Its rules run only in
+files that import `@siyahi/ui`, so older pages are left alone. They reject
+colour literals (hex, `rgb()`, `oklch()`), Tailwind palette colours, Tailwind
+arbitrary values such as `text-[13px]`, `dark:` and `light:` variants,
+numeric font sizes, and chart configs with a per-scheme `theme` map (shadcn's
+chart applies its dark half under a `.dark` class Siyahi never sets; name a
+chart token with `color: "var(--chart-1)"` instead). Two of the rules are
+[`@shadcn/lint`](https://github.com/shadcn-ui/lint)'s, scoped the same way.
+
+```sh
+npm install --save-dev @siyahi/tools@next oxlint
+```
+
+```json
+{
+  "jsPlugins": ["@siyahi/tools/lint"],
+  "settings": { "shadcn": { "ui": "@siyahi/ui", "themeImports": ["^@siyahi/ui/"] } },
+  "rules": {
+    "siyahi/no-color-literal": "error",
+    "siyahi/no-scheme-variant": "error",
+    "siyahi/no-numeric-font-size": "error",
+    "siyahi/no-chart-theme-map": "error",
+    "siyahi/no-raw-colors": "error",
+    "siyahi/no-arbitrary-values": "error"
+  }
+}
+```
+
+`@siyahi/tools` also has `siyahi-shots` (screenshots of a page at 1920 and 390
+pixels wide in both schemes, with layout checks) and `siyahi-contrast` (the
+theme contrast check). See [packages/tools](packages/tools/README.md).
+
+## This repository
+
+| Path              | What                                                                              |
+| ----------------- | --------------------------------------------------------------------------------- |
+| `packages/ui`     | `@siyahi/ui`. The theme is `styles/siyahi.css`, the only file with colour values. |
+| `packages/tools`  | `@siyahi/tools`: lint plugin, contrast check, screenshot script.                  |
+| `apps/catalogue`  | The catalogue site, a Vite app deployed as a Cloudflare Worker.                   |
+| `assets/icon.svg` | The mark.                                                                         |
+
+Development uses pnpm and [Vite+](https://viteplus.dev):
+
+```sh
+pnpm install
+pnpm check      # format, lint, unused code, generated files, build, typecheck, tests
+pnpm dev        # the catalogue on localhost
+```
+
+See [CONTRIBUTING.md](CONTRIBUTING.md) before adding anything.
+
+## Licence
+
+MIT, see [LICENSE](LICENSE). Code copied from other projects keeps its own
+notice; see [THIRD_PARTY_NOTICES.md](THIRD_PARTY_NOTICES.md).

package/THIRD_PARTY_NOTICES.md

@@ -0,0 +1,51 @@
+# Third-party notices
+
+Siyahi is MIT licensed (see `LICENSE`). It contains code copied from the
+projects below, each under the MIT licence. Every copied file starts with a
+header naming its registry item, origin URL, licence and the SHA-256 of the
+file as copied; `packages/ui/registry.lock.json` lists them all and
+`pnpm generate:check` fails if a copied file is not named here.
+
+## Copied into `@siyahi/ui`
+
+| What                                                                  | Where in the package                                     | Origin                                                                                                                                                                                                                                                                                                      | Licence                                                                             |
+| --------------------------------------------------------------------- | -------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- |
+| shadcn/ui core components (installed with `shadcn add`, never edited) | `src/components/ui/*`, `src/hooks/use-mobile.ts`         | https://github.com/shadcn-ui/ui                                                                                                                                                                                                                                                                             | MIT, Copyright (c) 2023 shadcn                                                      |
+| shadcn `tailwind.css` (variants and utilities the components use)     | `styles/shadcn.css`                                      | https://github.com/shadcn-ui/ui/tree/main/packages/shadcn                                                                                                                                                                                                                                                   | MIT, Copyright (c) 2023 shadcn                                                      |
+| shadcn block `sidebar-07`                                             | `src/components/registry/sidebar-07/*`                   | https://ui.shadcn.com/r/styles/base-vega/sidebar-07.json                                                                                                                                                                                                                                                    | MIT, Copyright (c) 2023 shadcn                                                      |
+| shadcn block `dashboard-01`, `SectionCards` only                      | `src/components/registry/dashboard-01/section-cards.tsx` | https://ui.shadcn.com/r/styles/base-vega/dashboard-01.json                                                                                                                                                                                                                                                  | MIT, Copyright (c) 2023 shadcn                                                      |
+| Heatmaps: calendar, weekday by hour, status timeline                  | `src/components/registry/heatmap/*`                      | https://shadcn-heatmap.pages.dev/r/calendar-heatmap.json, https://shadcn-heatmap.pages.dev/r/weekday-heatmap.json, https://shadcn-heatmap.pages.dev/r/status-heatmap.json (source: https://github.com/rutopio/shadcn-heatmap)                                                                               | MIT, Copyright (c) 2026 ChingRu                                                     |
+| niko-table data table on TanStack Table                               | `src/components/registry/niko-table/*`                   | https://niko-table.com/r/data-table.json, https://niko-table.com/r/data-table-core.json, https://niko-table.com/r/data-table-ui.json, https://niko-table.com/r/data-table-faceted-filter.json, https://niko-table.com/r/data-table-column-sort.json (source: https://github.com/Semkoo/niko-table-registry) | MIT, Copyright (c) 2025 Semir N.; original work Copyright (c) 2025 WebDevSimplified |
+| dashboardcn ranked list (`BarList`)                                   | `src/components/registry/dashboardcn/bar-list.tsx`       | https://dashboardcn.com/r/bar-list.json (source: https://github.com/NoahGdev/dashboardcn)                                                                                                                                                                                                                   | MIT, Copyright (c) 2026 dashboardcn contributors                                    |
+
+## Runtime dependencies with attribution terms
+
+| Package                                                         | Licence                                            | Note                                                                                                                                      |
+| --------------------------------------------------------------- | -------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
+| `lightweight-charts` (TradingView)                              | Apache-2.0                                         | `PriceChart` keeps the library's attribution logo on by default; see https://github.com/tradingview/lightweight-charts/blob/master/NOTICE |
+| `@fontsource-variable/geist`, `@fontsource-variable/geist-mono` | SIL Open Font License 1.1 (fonts), MIT (packaging) | Geist by Vercel                                                                                                                           |
+
+Every other dependency is installed from npm under its own licence and is not
+copied into this repository.
+
+## The MIT licence text
+
+Each MIT notice above carries this permission text:
+
+> 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/dist/components/registry/dashboard-01/section-cards.d.ts

@@ -0,0 +1,17 @@
+import * as React$1 from "react";
+//#region src/components/registry/dashboard-01/section-cards.d.ts
+export interface SectionCard {
+  /** Muted label above the value. */
+  label: string;
+  value: React$1.ReactNode;
+  /** Outline badge, top right; usually a <Delta />. */
+  badge?: React$1.ReactNode;
+  /** Bold first footer line. */
+  headline?: React$1.ReactNode;
+  /** Muted second footer line. */
+  detail?: React$1.ReactNode;
+}
+export declare function SectionCards({ items }: {
+  items: SectionCard[];
+}): React$1.JSX.Element;
+//#endregion

package/dist/components/registry/dashboard-01/section-cards.js

@@ -0,0 +1,39 @@
+"use client";
+import { Badge } from "../../ui/badge.js";
+import { Card, CardAction, CardDescription, CardFooter, CardHeader, CardTitle } from "../../ui/card.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/registry/dashboard-01/section-cards.tsx
+function SectionCards({ items }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "@container/main",
+		children: /* @__PURE__ */ jsx("div", {
+			className: "grid grid-cols-1 gap-4 *:data-[slot=card]:bg-linear-to-t *:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card *:data-[slot=card]:shadow-xs @xl/main:grid-cols-2 @5xl/main:grid-cols-4 dark:*:data-[slot=card]:bg-card",
+			children: items.map((item) => /* @__PURE__ */ jsxs(Card, {
+				className: "@container/card",
+				children: [/* @__PURE__ */ jsxs(CardHeader, { children: [
+					/* @__PURE__ */ jsx(CardDescription, { children: item.label }),
+					/* @__PURE__ */ jsx(CardTitle, {
+						className: "text-2xl font-semibold tabular-nums @[250px]/card:text-3xl",
+						children: item.value
+					}),
+					item.badge && /* @__PURE__ */ jsx(CardAction, { children: /* @__PURE__ */ jsx(Badge, {
+						variant: "outline",
+						children: item.badge
+					}) })
+				] }), (item.headline || item.detail) && /* @__PURE__ */ jsxs(CardFooter, {
+					className: "flex-col items-start gap-1.5 text-sm",
+					children: [item.headline && /* @__PURE__ */ jsx("div", {
+						className: "line-clamp-1 flex gap-2 font-medium",
+						children: item.headline
+					}), item.detail && /* @__PURE__ */ jsx("div", {
+						className: "text-muted-foreground",
+						children: item.detail
+					})]
+				})]
+			}, item.label))
+		})
+	});
+}
+//#endregion
+export { SectionCards };

package/dist/components/registry/dashboardcn/bar-list.d.ts

@@ -0,0 +1,24 @@
+import * as React$1 from "react";
+//#region src/components/registry/dashboardcn/bar-list.d.ts
+export interface BarListItem {
+  name: string;
+  value: number;
+  /** Renders the label as a link. */
+  href?: string;
+  icon?: React$1.ReactNode;
+  /** Stable key when names can repeat. */
+  key?: string;
+}
+export interface BarListProps extends React$1.ComponentProps<"div"> {
+  data: BarListItem[];
+  valueFormatter?: (value: number) => string;
+  sortOrder?: "descending" | "ascending" | "none";
+  /** Any CSS color. Defaults to chart-1. */
+  color?: string;
+  /** Show each row's share of the total next to its value. */
+  showPercentage?: boolean;
+  onItemClick?: (item: BarListItem) => void;
+}
+declare function BarList({ data, valueFormatter, sortOrder, color, showPercentage, onItemClick, className, ...props }: BarListProps): React$1.JSX.Element;
+//#endregion
+export { BarList };

package/dist/components/registry/dashboardcn/bar-list.js

@@ -0,0 +1,71 @@
+import { cn } from "../../../lib/utils.js";
+import { useLocale } from "../../siyahi/siyahi-provider.js";
+import { pct } from "../../../lib/format.js";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/registry/dashboardcn/bar-list.tsx
+function BarList({ data, valueFormatter, sortOrder = "descending", color = "var(--chart-1)", showPercentage = false, onItemClick, className, ...props }) {
+	const locale = useLocale();
+	const format = valueFormatter ?? ((value) => new Intl.NumberFormat(locale.numberLocale, {
+		notation: "compact",
+		maximumFractionDigits: 1
+	}).format(value));
+	const items = React$1.useMemo(() => {
+		if (sortOrder === "none") return data;
+		const sorted = [...data].sort((a, b) => a.value - b.value);
+		return sortOrder === "descending" ? sorted.reverse() : sorted;
+	}, [data, sortOrder]);
+	const max = Math.max(...items.map((item) => item.value), 0);
+	const total = items.reduce((sum, item) => sum + item.value, 0);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "bar-list",
+		className: cn("flex flex-col gap-1.5", className),
+		...props,
+		children: items.map((item) => {
+			const width = max > 0 ? item.value / max * 100 : 0;
+			const share = total > 0 ? item.value / total : 0;
+			const interactive = Boolean(item.href || onItemClick);
+			const Label = item.href ? "a" : onItemClick ? "button" : "div";
+			return /* @__PURE__ */ jsxs("div", {
+				"data-slot": "bar-list-row",
+				className: "flex items-center gap-3 text-sm",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "relative flex h-8 min-w-0 flex-1 items-center",
+					children: [/* @__PURE__ */ jsx("div", {
+						"aria-hidden": "true",
+						className: "absolute inset-y-0 left-0 rounded-md transition-[width] duration-300",
+						style: {
+							width: `${width}%`,
+							backgroundColor: `color-mix(in oklab, ${color} 20%, transparent)`
+						}
+					}), /* @__PURE__ */ jsxs(Label, {
+						...item.href ? { href: item.href } : {},
+						...onItemClick && !item.href ? {
+							type: "button",
+							onClick: () => onItemClick(item)
+						} : {},
+						className: cn("relative flex min-w-0 items-center gap-2 px-2 text-left", interactive && "hover:underline"),
+						children: [item.icon ? /* @__PURE__ */ jsx("span", {
+							className: "text-muted-foreground shrink-0 [&>svg]:size-4",
+							children: item.icon
+						}) : null, /* @__PURE__ */ jsx("span", {
+							className: "truncate",
+							children: item.name
+						})]
+					})]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex shrink-0 items-center gap-2 tabular-nums",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "font-medium",
+						children: format(item.value)
+					}), showPercentage ? /* @__PURE__ */ jsx("span", {
+						className: "text-muted-foreground w-12 text-right text-xs",
+						children: pct(share, locale, 0)
+					}) : null]
+				})]
+			}, item.key ?? item.name);
+		})
+	});
+}
+//#endregion
+export { BarList };

package/dist/components/registry/heatmap/calendar-heatmap.d.ts

@@ -0,0 +1,134 @@
+import { CSSProperties, HTMLAttributes, ReactNode } from "react";
+import { Day, Locale } from "date-fns";
+//#region src/components/registry/heatmap/calendar-heatmap.d.ts
+export type Activity = {
+  date: string;
+  value: number;
+};
+type ActivityWithLevel = Activity & {
+  level: number;
+};
+export type Labels = {
+  months?: string[];
+  weekdays?: string[];
+  stat?: string;
+  cellLabel?: string;
+  heatmapLabel?: string;
+  legendLabel?: string;
+  legendLevelLabel?: string;
+};
+export type ColorConfig = {
+  empty?: string;
+  scale?: string;
+};
+export type CalendarHeatmapProps = HTMLAttributes<HTMLDivElement> & {
+  data: Activity[];
+  weekStart?: Day;
+  continuousMonths?: boolean;
+  hasEmptyColumn?: boolean;
+  blockSize?: number;
+  blockMargin?: number;
+  blockRadius?: number;
+  blockAspectRatio?: number;
+  levels?: number;
+  isNormalized?: boolean;
+  colors?: ColorConfig;
+  locale?: Locale;
+  labels?: Labels;
+  fontSize?: number;
+  emptyState?: ReactNode;
+  totalCount?: number;
+  style?: CSSProperties;
+  className?: string;
+  children: ReactNode;
+};
+/**
+ * Calendar Heatmap
+ *
+ * A GitHub-style contribution calendar showing daily activity over months and years.
+ * Each cell represents one day, arranged in weeks (rows) and months (columns).
+ *
+ * @example
+ * ```tsx
+ * <CalendarHeatmap data={data} weekStart={1} continuousMonths>
+ *   <CalendarHeatmapBody>
+ *     {({ activity, dayIndex, weekIndex }) => (
+ *       <CalendarHeatmapBlock
+ *         activity={activity}
+ *         dayIndex={dayIndex}
+ *         weekIndex={weekIndex}
+ *       />
+ *     )}
+ *   </CalendarHeatmapBody>
+ *   <CalendarHeatmapFooter>
+ *     <CalendarHeatmapStat />
+ *     <CalendarHeatmapLegend />
+ *   </CalendarHeatmapFooter>
+ * </CalendarHeatmap>
+ * ```
+ *
+ * @param data - Array of activities with date (YYYY-MM-DD) and value
+ * @param weekStart - First day of week (0=Sunday, 1=Monday). Default: 0
+ * @param continuousMonths - Display months continuously vs. grouped by year. Default: true
+ * @param hasEmptyColumn - Add empty column between months. Default: false
+ * @param blockAspectRatio - Width/height ratio of blocks. Default: 1
+ * @param levels - Total number of legend cells (including empty when not normalized). Default: 5
+ * @param isNormalized - When true, uses min-max normalization across the dataset (suitable for signed values). When false (default), treats 0 as empty and scales from 0 to max.
+ */
+export declare const CalendarHeatmap: ({ data, weekStart, continuousMonths, hasEmptyColumn, blockSize, blockMargin, blockRadius, blockAspectRatio, levels: levelsProp, isNormalized, colors, locale, labels: labelsProp, fontSize, emptyState, totalCount: totalCountProp, style, className, children, ...props }: CalendarHeatmapProps) => string | number | bigint | true | import("react").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | Iterable<ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | null;
+export type CalendarHeatmapBlockProps = HTMLAttributes<SVGRectElement> & {
+  activity: ActivityWithLevel;
+  dayIndex: number;
+  weekIndex: number;
+  highlighted?: boolean;
+  onCellClick?: (activity: ActivityWithLevel) => void;
+  onCellHover?: (activity: ActivityWithLevel | null) => void;
+};
+export declare function CalendarHeatmapBlock({ ref, activity, dayIndex, weekIndex, highlighted, onCellClick, onCellHover, onClick, onKeyDown, onMouseEnter, onMouseLeave, className, style: styleProp, ...props }: CalendarHeatmapBlockProps & {
+  ref?: React.RefObject<SVGRectElement | null>;
+}): import("react").JSX.Element;
+export declare namespace CalendarHeatmapBlock {
+  var displayName: string;
+}
+export type CalendarHeatmapBodyProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+  hideMonthLabels?: boolean;
+  hideWeekdayLabels?: boolean;
+  hideYearLabels?: boolean;
+  className?: string;
+  labelClassName?: string;
+  yearClassName?: string;
+  children: (props: {
+    activity: ActivityWithLevel;
+    dayIndex: number;
+    weekIndex: number;
+  }) => ReactNode;
+  renderYearFooter?: (props: {
+    year: number;
+    totalCount: number;
+  }) => ReactNode;
+};
+export declare const CalendarHeatmapBody: ({ hideMonthLabels, hideWeekdayLabels, hideYearLabels, className, labelClassName, yearClassName, children, renderYearFooter, ...props }: CalendarHeatmapBodyProps) => import("react").JSX.Element;
+export type CalendarHeatmapFooterProps = HTMLAttributes<HTMLDivElement>;
+export declare const CalendarHeatmapFooter: ({ className, ...props }: CalendarHeatmapFooterProps) => import("react").JSX.Element;
+export type CalendarHeatmapStatProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+  compute?: (data: ActivityWithLevel[]) => number | string;
+  label?: string;
+  children?: (result: {
+    value: number | string;
+    data: ActivityWithLevel[];
+    year: number;
+  }) => ReactNode;
+};
+export declare const CalendarHeatmapStat: ({ compute, label, className, children, ...props }: CalendarHeatmapStatProps) => import("react").JSX.Element;
+export type CalendarHeatmapLegendProps = Omit<HTMLAttributes<HTMLFieldSetElement>, "children"> & {
+  labels?: {
+    less?: string;
+    more?: string;
+  };
+  children?: (props: {
+    level: number;
+  }) => ReactNode;
+};
+export declare const CalendarHeatmapLegend: ({ labels: labelsProp, className, children, ...props }: CalendarHeatmapLegendProps) => import("react").JSX.Element;
+//#endregion
+export {};