h2o-library 1.8.0 → 2.0.0

package/CHANGELOG.md

@@ -0,0 +1,74 @@
+# Changelog
+
+All notable changes to **h2o-library** are documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [Unreleased]
+
+### Added
+
+### Changed
+
+### Fixed
+
+### Removed
+
+### Deprecated
+
+### Security
+
+---
+
+## [2.0.0] — 2026-04-29
+
+First tracked release. Establishes the package's public API surface and module layout.
+
+### Added
+
+- **Components:**
+  - **BarChart:** — Add support for stacked grouped bars.
+  - **Skeleton:** — Add a skeleton loading component.
+  - **SidePanel:** - Add a side panel direction.
+  - **Form Input/Controllers:** - All now support a `size`, builtin `tooltip`, `note`, `error` props.
+
+- **Hooks**: `useFocusTrap`, `useInterval`, `useLongPress`, `useMouse`, `useTimeout`, `useWindowScroll`
+
+- **Utilities**:
+  - **Arrays:** `unique`, `uniqueBy`, `groupBy`, `partition`, `sortBy`, `range`
+  - **Objects:** `pick`, `omit`, `isShallowEqual`
+  - **Formatting:** `formatRelative`
+  - **Math:** `clamp`, `lerp`, `toFixedSafe`
+
+### Changed
+
+- **Subpath entries** — the package is now split into five exports so consumers tree-shake cleanly:
+  - `h2o-library` — React components and re-exports.
+  - `h2o-library/charts` — `Chart`, `BarChart`, `LineChart`, `PieChart`, `HeatmapChart`, `StatChart`, `GanttChart`, `Legend`.
+  - `h2o-library/hooks` — all 17 hooks (`useToast`, `useDebounce`, `useMediaQuery`, …).
+  - `h2o-library/utils` — framework-agnostic helpers (`cn`, formatters, math, async).
+  - `h2o-library/types` — type-only exports (`TableColumn`, `IconType`, `TabItem`, …).
+- **Stylesheet split** — `h2o-library/dist/styles/index.css` ships design tokens only; `h2o-library/dist/index.css` is the bundled fallback for non-bundler setups. Component CSS is preserved per-component and tree-shaken via `"sideEffects": ["**/*.css"]`.
+- **Theming via CSS custom properties** — HSL-triplet tokens (`--primary`, `--muted`, `--background`, …) overridable under `:root` / `.dark`. No rebuild required; components read variables at runtime.
+
+### Fixed
+
+- **Accordion** — Fix Accordion cropping expanded content when nested inside it.
+- **BarChart** — Fix BarChart duplicated key warning when using `stacked` and `grouped` together.
+
+### Removed
+
+- **Status Component** - Removed the `Status` component, as the same result can be achieved with the `Chip` component and appropriate styling.
+- Removed `classnames` dependency in favor of `clsx` + `tailwind-merge` for better performance and smaller bundle size.
+
+### Deprecated
+
+- **TypeScript** — types bundled with every subpath entry; no `@types/h2o-library` needed.
+- **Chart** - `WrapLabels` and `wrapLabelThreshold` props are deprecated in favor of CSS-based solutions for label overflow (e.g. `text-ellipsis` or `break-words`).
+
+### Security
+
+None for this release.
+
+[Unreleased]: #unreleased
+[2.0.0]: #200--2026-04-29

package/README.md

@@ -1,37 +1,173 @@
-# H2O Library
+<p align="center">
+  <img src="https://cdn.jsdelivr.net/npm/h2o-library@2/assets/logo.svg" alt="h2o-library" height="80" />
+</p>
 
-A set of components for H2O App development.
+<h1 align="center">h2o-library</h1>
+
+<p align="center">The Holistic Hospital Optimization design system. React components, charts, hooks, and utilities, published as a single npm package with multiple subpath entries.</p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/h2o-library"><img src="https://img.shields.io/npm/v/h2o-library?color=3870F4&label=npm" alt="npm version" /></a>
+  <a href="https://www.npmjs.com/package/h2o-library"><img src="https://img.shields.io/npm/dw/h2o-library?color=3870F4&label=downloads" alt="weekly downloads" /></a>
+  <a href="https://www.npmjs.com/package/h2o-library"><img src="https://img.shields.io/npm/l/h2o-library?color=3870F4" alt="license" /></a>
+  <a href="https://h2o-library-documentation.vercel.app/"><img src="https://img.shields.io/badge/docs-online-3870F4" alt="docs" /></a>
+</p>
+
+---
+
+- **40+ components** — form controls, selection menus, date/time pickers, tables, modals, popovers, toasts, tooltips, and more.
+- **7 chart types** — bar, line, pie, heatmap, stat, gantt, plus a high-level `Chart` wrapper.
+- **17 hooks** — events, viewport, timing, focus management, clipboard, toasts.
+- **~25 utilities** — `cn`, string/array/object helpers, Intl-based formatters, math, async (debounce, throttle, retry, withTimeout).
+- **Pure CSS theming** via custom properties — no Tailwind required, but it integrates cleanly when you do use it.
+- **Fully typed** — types ship with each subpath entry; no `@types/h2o-library` needed.
+
+[**Documentation →**](https://h2o-library-documentation.vercel.app/) · [**Changelog →**](./CHANGELOG.md)
 
 ## Installation
 
 ```bash
 npm install h2o-library
-
 # or
-
+pnpm add h2o-library
+# or
 yarn add h2o-library
 ```
 
-## Usage
+Peer requirements: **React 18+** and **react-dom 18+**. Everything else (including the chart engine) ships transitively.
+
+## Stylesheet — one import
+
+The library ships pure CSS. You only ever need to import the design-tokens stylesheet, component CSS is included automatically by your bundler.
+
+```tsx
+// app/layout.tsx (Next.js) or src/main.tsx (Vite)
+import "h2o-library/dist/styles/index.css";
+```
+
+This file defines all design tokens (`--primary`, `--muted`, `--background`, …) as CSS custom properties. Modern bundlers (Vite, Next.js 15+, Webpack 5, esbuild, Rollup) honor `"sideEffects": ["**/*.css"]` and only ship styles for components actually rendered.
+
+If you're not using a bundler (plain `<script>` setup, server templates), import the everything-included stylesheet instead, `h2o-library/dist/index.css`.
+
+> Pick one path; don't import both.
+
+## Quick start
+
+```tsx
+import { Button, Input } from "h2o-library";
+
+export default function App() {
+  return (
+    <form>
+      <Input label="Name" placeholder="Jane Doe" />
+      <Button label="Save" type="submit" />
+    </form>
+  );
+}
+```
+
+## Subpath imports
+
+The package is split into five entries. Always import from the most specific entry that has what you need.
+
+| Entry                | What's there                                                                                      |
+| -------------------- | ------------------------------------------------------------------------------------------------- |
+| `h2o-library`        | All React components (`Button`, `Modal`, `Tabs`, `ToastProvider`, …)                              |
+| `h2o-library/charts` | `Chart`, `BarChart`, `LineChart`, `PieChart`, `HeatmapChart`, `StatChart`, `GanttChart`, `Legend` |
+| `h2o-library/hooks`  | All hooks (`useToast`, `useDebounce`, `useMediaQuery`, …)                                         |
+| `h2o-library/utils`  | Framework-agnostic helpers (`cn`, `formatBytes`, `clamp`, `groupBy`, `debounce`, …)               |
+| `h2o-library/types`  | Type-only exports (`TabItem`, `IconType`, `TableColumn<T>`, …)                                    |
+
+```tsx
+import { Button, Tabs, ToastProvider } from "h2o-library";
+import { BarChart } from "h2o-library/charts";
+import { useToast, useDebounce } from "h2o-library/hooks";
+import { cn, formatBytes } from "h2o-library/utils";
+import type { TabItem, IconType } from "h2o-library/types";
+```
+
+## Theming
+
+The library is themed entirely through CSS custom properties. Tokens are HSL triplets without the `hsl()` wrapper, so you can compose alpha:
 
-import css files into your project
+```css
+:root {
+  --primary: 225 91% 59%;
+  --background: 0 0% 98%;
+}
 
-trough css file
+.dark {
+  --primary: 225 85% 62%;
+  --background: 0 0% 7%;
+}
+```
 
 ```css
-@import "h2o-library/dist/styles/index.css";
+.my-element {
+  background: hsl(var(--primary));
+  border: 1px solid hsl(var(--primary) / 0.4);
+}
 ```
 
-trough js/ts file
+No rebuild required, components read the variables at runtime.
+Toggle dark mode the Tailwind way: add or remove the `dark` class on `<html>`. Tailwind's `bg-primary/50` syntax works as long as variables are mapped in your config.
+
+Full palette, opacity examples, and Tailwind-mapping reference: [Colors & Theming docs](https://h2o-library-documentation.vercel.app/docs/colors-and-theming).
+
+## TypeScript
+
+Types are bundled with each subpath entry, no `@types/h2o-library` package needed.
 
 ```tsx
-import "h2o-library/dist/styles/index.css";
+import { Tabs } from "h2o-library";
+import type { TabItem } from "h2o-library/types";
+
+const tabs: TabItem[] = [
+  { label: "Overview", value: "overview" },
+  { label: "Settings", value: "settings" },
+];
+```
+
+Component prop interfaces are intentionally internal. If you ever need them, use `React.ComponentProps`:
+
+```tsx
+type ButtonProps = React.ComponentProps<typeof Button>;
 ```
 
-and use components like so
+## Charts at a glance
 
 ```tsx
-import { Button } from "h2o-library";
+import { Chart } from "h2o-library/charts";
+
+<Chart
+  type="bar"
+  title="Monthly revenue"
+  data={[
+    { x: "Jan", us: 120, eu: 80 },
+    { x: "Feb", us: 150, eu: 95 },
+    { x: "Mar", us: 140, eu: 110 },
+  ]}
+  layout="grouped"
+  height={320}
+/>;
 ```
 
-refer to the [docs](https://h2o-library-documentation.vercel.app/) for more information
+`Chart` is the high-level wrapper (auto-palette, title, legend, KPI strip). For full control over series colors, click handlers, stacking, and dashed lines, drop down to the matching primitive (`BarChart`, `LineChart`, `PieChart`, `HeatmapChart`). `StatChart` and `GanttChart` are primitive-only, see the [chart docs](https://h2o-library-documentation.vercel.app/docs/components/charts).
+
+## Browser support
+
+Modern evergreen browsers. The library uses CSS custom properties, modern flex/grid, and the ES2020 baseline.
+
+## Documentation
+
+- **[Getting started](https://h2o-library-documentation.vercel.app/docs/getting-started)** — install, setup, import conventions
+- **[Colors & theming](https://h2o-library-documentation.vercel.app/docs/colors-and-theming)** — full token catalog, dark mode, Tailwind mapping
+- **[Components](https://h2o-library-documentation.vercel.app/docs/components/button)** — live examples and copy-ready playgrounds for every component
+- **[Hooks](https://h2o-library-documentation.vercel.app/docs/hooks/use-toast)** — every hook with usage snippets
+- **[Utilities](https://h2o-library-documentation.vercel.app/docs/utils/class-names)** — string, array, object, formatting, math, and async helpers
+- **[Types reference](https://h2o-library-documentation.vercel.app/docs/types)** — shared type aliases
+- **[Icons](https://h2o-library-documentation.vercel.app/icons)** — interactive picker for the full icon set
+
+## License
+
+MIT © veltiston.ai

package/assets/logo.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="198" height="198" viewBox="0 0 198 198" fill="none" role="img" aria-label="h2o-library">
+  <path fill-rule="evenodd" clip-rule="evenodd" fill="#3870F4" d="M197.73 0H0V198H197.73V0ZM11.9868 12.0499H29.7722V90.1399H60.1245V12.1H77.91V186H60.1245V107.95H29.7722V185.95H11.9868V12.0499ZM134.906 12.1C110.112 12.1 90.0171 32.2299 90.0171 57.05C90.0171 70.4886 95.9044 82.5476 105.24 90.7876C95.4425 92.2964 90.0171 95.9998 90.0171 95.9998V111.55C90.0171 111.55 106.063 97.3699 126.218 105.86C156.65 118.69 168.127 185.95 168.127 185.95H185.783L185.781 185.94H185.782V107.99H168.127V133.467C162.074 121.019 154.337 109.021 144.723 100.922L144.733 100.92C164.798 96.43 179.794 78.49 179.794 57.05C179.794 32.2299 159.699 12.1 134.906 12.1ZM134.906 88.43C117.59 88.43 103.564 74.3799 103.564 57.05C103.564 39.72 117.59 25.67 134.906 25.67C152.221 25.67 166.248 39.72 166.248 57.05C166.248 74.3799 152.211 88.43 134.906 88.43Z" />
+</svg>

package/dist/charts/charts/index.d.ts

@@ -0,0 +1,8 @@
+export * from "./src/chart/chart";
+export * from "./src/bar/chart-bar";
+export * from "./src/pie/chart-pie";
+export * from "./src/line/chart-line";
+export * from "./src/heatmap/chart-heatmap";
+export * from "./src/stat/chart-stat";
+export * from "./src/gantt/chart-gantt";
+export * from "./src/legend/legend";

package/dist/charts/charts/src/bar/chart-bar.d.ts

@@ -0,0 +1,27 @@
+import type React from "react";
+import "../../charts.css";
+export interface BarChartDataPoint {
+    x: string;
+    [key: string]: number | string;
+}
+export interface BarSeriesConfig {
+    key: string;
+    label?: string;
+    color: string;
+    unit?: string;
+    stackId?: string;
+}
+export interface BarChartProps {
+    data: BarChartDataPoint[];
+    bars: BarSeriesConfig[];
+    layout?: "single" | "grouped" | "stacked" | "grouped-stacked";
+    orientation?: "vertical" | "horizontal";
+    showGrid?: boolean;
+    showLegend?: boolean;
+    height?: number;
+    className?: string;
+    onXAxisTickClick?: (value: string | number, event: React.MouseEvent) => void;
+    onYAxisTickClick?: (value: string | number, event: React.MouseEvent) => void;
+    onBarClick?: (dataPoint: BarChartDataPoint, index: number, dataKey: string, event: React.MouseEvent<SVGElement>) => void;
+}
+export declare const BarChart: ({ data, bars, layout, orientation, showGrid, showLegend, height, className, onXAxisTickClick, onYAxisTickClick, onBarClick, }: BarChartProps) => import("react/jsx-runtime").JSX.Element;

package/dist/charts/charts/src/chart/chart.d.ts

@@ -0,0 +1,35 @@
+import "../../charts.css";
+import type { BarChartDataPoint } from "../bar/chart-bar";
+import type { LineChartDataPoint } from "../line/chart-line";
+import type { PieChartDataPoint } from "../pie/chart-pie";
+import type { HeatmapData } from "../heatmap/chart-heatmap";
+export type ChartKPI = {
+    label: string;
+    value: string | number;
+};
+type BaseChartData = {
+    bar: BarChartDataPoint[];
+    line: LineChartDataPoint[];
+    pie: PieChartDataPoint[];
+    heatmap: HeatmapData;
+};
+export type ChartType = keyof BaseChartData;
+interface BaseChartProps {
+    type: ChartType;
+    title?: string;
+    info?: string;
+    description?: string;
+    kpis?: ChartKPI[];
+    height?: number;
+    className?: string;
+}
+type BarChartSpecificProps = {
+    layout?: "single" | "grouped" | "stacked" | "grouped-stacked";
+    orientation?: "vertical" | "horizontal";
+};
+type ChartTypeSpecificProps<T extends ChartType> = T extends "bar" ? BarChartSpecificProps : Record<string, never>;
+export type ChartProps<T extends ChartType> = BaseChartProps & {
+    data: BaseChartData[T];
+} & ChartTypeSpecificProps<T>;
+export declare const Chart: <T extends ChartType>({ type, title, info, description, kpis, data, height, className, ...chartSpecificProps }: ChartProps<T>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/charts/charts/src/chart-tooltip-styles.d.ts

@@ -0,0 +1,4 @@
+import type React from "react";
+export declare const CHART_TOOLTIP_STYLE: React.CSSProperties;
+export declare const CHART_TOOLTIP_WRAPPER_STYLE: React.CSSProperties;
+export declare const CHART_TOOLTIP_PORTAL_STYLE: React.CSSProperties;

package/dist/charts/charts/src/gantt/chart-gantt.d.ts

@@ -0,0 +1,25 @@
+import type React from "react";
+import "../../charts.css";
+export interface GanttDataPoint {
+    label: string;
+    rangeStart: number;
+    rangeEnd: number;
+    barStart: number;
+    barEnd: number;
+}
+export interface GanttChartProps {
+    data: GanttDataPoint[];
+    minTime?: number;
+    maxTime?: number;
+    tickInterval?: number;
+    rangeColor?: string;
+    barColor?: string;
+    overflowColor?: string;
+    rangeLabel?: string;
+    barLabel?: string;
+    showLegend?: boolean;
+    labelWidth?: number;
+    className?: string;
+    onRowClick?: (dataPoint: GanttDataPoint, event: React.MouseEvent<HTMLDivElement>) => void;
+}
+export declare const GanttChart: ({ data, minTime, maxTime, tickInterval, rangeColor, barColor, overflowColor, rangeLabel, barLabel, showLegend, labelWidth: labelWidthProp, className, onRowClick, }: GanttChartProps) => import("react/jsx-runtime").JSX.Element;

package/dist/charts/charts/src/heatmap/chart-heatmap.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+import "../../charts.css";
+export interface HeatmapData {
+    rows: string[];
+    columns: string[];
+    matrix: number[][];
+}
+export interface HeatmapChartProps {
+    data: HeatmapData;
+    showValue?: boolean;
+    showPercentage?: boolean;
+    height?: string | number;
+    className?: string;
+    onRowClick?: (row: string, event: React.MouseEvent<HTMLDivElement>) => void;
+    onColumnClick?: (column: string, event: React.MouseEvent<HTMLDivElement>) => void;
+    onCellClick?: (row: string, column: string, value: number, event: React.MouseEvent<HTMLDivElement>) => void;
+}
+export declare const HeatmapChart: ({ data, showValue, showPercentage, height, className, onRowClick, onColumnClick, onCellClick, }: HeatmapChartProps) => import("react/jsx-runtime").JSX.Element;

package/dist/charts/charts/src/legend/legend.d.ts

@@ -0,0 +1,19 @@
+import "./legend.css";
+export type LegendStyle = "line" | "dashed-line" | "rectangle" | "circle";
+export type LegendItem = {
+    label: string;
+    color: string;
+    onClick?: () => void;
+    style?: LegendStyle;
+};
+export type LegendProps = {
+    items: LegendItem[];
+    itemStyle?: LegendStyle;
+    direction?: "horizontal" | "vertical";
+    ariaLabel?: string;
+    className?: string;
+    itemClassName?: string;
+    labelClassName?: string;
+    colorClassName?: string;
+};
+export declare const Legend: ({ items, itemStyle, direction, ariaLabel, className, itemClassName, labelClassName, colorClassName, }: LegendProps) => import("react/jsx-runtime").JSX.Element;

package/dist/charts/charts/src/line/chart-line.d.ts

@@ -0,0 +1,28 @@
+import type React from "react";
+import "../../charts.css";
+export interface LineChartDataPoint {
+    x: string;
+    [key: string]: number | string | undefined;
+}
+export interface LineSeriesConfig {
+    key: string;
+    label?: string;
+    color: string;
+    dashed?: boolean;
+    unit?: string;
+    lineWidth?: number;
+}
+export interface LineChartProps {
+    data: LineChartDataPoint[];
+    lines: LineSeriesConfig[];
+    showGrid?: boolean;
+    showLegend?: boolean;
+    showGradient?: boolean;
+    height?: number;
+    showTooltipLabel?: boolean;
+    className?: string;
+    onXAxisTickClick?: (value: string | number, event: React.MouseEvent) => void;
+    onYAxisTickClick?: (value: string | number, event: React.MouseEvent) => void;
+    onDataPointClick?: (point: LineChartDataPoint, index: number, dataKey: string, event: React.MouseEvent<SVGCircleElement>) => void;
+}
+export declare const LineChart: ({ data, lines, showGrid, showLegend, showGradient, height, showTooltipLabel, className, onXAxisTickClick, onYAxisTickClick, onDataPointClick, }: LineChartProps) => import("react/jsx-runtime").JSX.Element;

package/dist/charts/charts/src/pie/chart-pie.d.ts

@@ -0,0 +1,19 @@
+import type React from "react";
+import "../../charts.css";
+export interface PieChartDataPoint {
+    label: string;
+    value: number;
+    color?: string;
+    unit?: string;
+}
+export interface PieChartProps {
+    data: PieChartDataPoint[];
+    variant?: "pie" | "donut";
+    showLegend?: boolean;
+    height?: number;
+    showLabels?: boolean;
+    showPercentageInTooltip?: boolean;
+    className?: string;
+    onSliceClick?: (dataPoint: PieChartDataPoint, index: number, event: React.MouseEvent<SVGElement>) => void;
+}
+export declare const PieChart: ({ data, variant, showLegend, height, showLabels, showPercentageInTooltip, className, onSliceClick, }: PieChartProps) => import("react/jsx-runtime").JSX.Element;

package/dist/charts/charts/src/recharts-tick-props.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Minimal tick props passed by Recharts to XAxis/YAxis `tick` render functions.
+ * Recharts may send more fields; we only use these when forwarding to custom ticks.
+ */
+export type RechartsAxisTickProps = {
+    x: number;
+    y: number;
+    payload: {
+        value: string | number;
+    };
+} & object;

package/dist/charts/charts/src/stat/chart-stat.d.ts

@@ -0,0 +1,21 @@
+import "../../charts.css";
+export interface StatChartDataPoint {
+    label: string;
+    value: number;
+    total?: number;
+}
+export interface StatChartProps {
+    data: StatChartDataPoint[];
+    compareData?: StatChartDataPoint[];
+    primaryColor?: string;
+    primaryLabel?: string;
+    compareColor?: string;
+    compareLabel?: string;
+    trackColor?: string;
+    compareTrackColor?: string;
+    unit?: string;
+    showDifference?: boolean;
+    height?: number;
+    className?: string;
+}
+export declare const StatChart: ({ data, compareData, primaryColor, primaryLabel, compareColor, compareLabel, trackColor, compareTrackColor, unit, showDifference, height, className, }: StatChartProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/charts/components/index.d.ts

@@ -0,0 +1,36 @@
+export * from "./src/button/button";
+export * from "./src/checkbox/checkbox";
+export * from "./src/icon/icon";
+export * from "./src/radio/radio";
+export * from "./src/tooltip/tooltip";
+export * from "./src/toggle/toggle";
+export * from "./src/content-switch/content-switch";
+export * from "./src/input/input";
+export * from "./src/textarea/textarea";
+export * from "./src/dropdown/dropdown";
+export * from "./src/slider/slider";
+export * from "./src/side-panel/side-panel";
+export * from "./src/modal/modal";
+export * from "./src/tag/tag";
+export * from "./src/accordion/accordion";
+export * from "./src/multi-select/multi-select";
+export * from "./src/radio-group/radio-group";
+export * from "./src/tabs/tabs";
+export * from "./src/popover/popover";
+export * from "./src/pagination/pagination";
+export * from "./src/table/table";
+export { ToastProvider, type ToastVariant, type ToastPosition, type ToastOptions, } from "./src/toast/toast";
+export * from "./src/logo/logo";
+export * from "./src/calendar/calendar";
+export * from "./src/month-calendar/month-calendar";
+export * from "./src/loader/loader";
+export * from "./src/message/message";
+export * from "./src/multi-menu/multi-menu";
+export * from "./src/compact-multi-select/compact-multi-select";
+export * from "./src/date-range-picker/date-range-picker";
+export * from "./src/expandable-table/expandable-table";
+export * from "./src/chip/chip";
+export * from "./src/segmented-toggle/segmented-toggle";
+export * from "./src/skeleton/skeleton";
+export * from "./src/date-picker/date-picker";
+export * from "./src/time-picker/time-picker";

package/dist/charts/components/src/accordion/accordion.d.ts

@@ -0,0 +1,32 @@
+import "./accordion.css";
+import type React from "react";
+/**
+ * Props for the `Accordion` component — **fully controlled** open state.
+ *
+ * @property {string} title - Text on the always-visible trigger row.
+ * @property {boolean} isOpen - When true, the content area is expanded.
+ * @property {(isOpen: boolean) => void} onToggle - Called with the new open state when the user toggles.
+ * @property {React.ReactNode} children - Collapsible body content.
+ * @property {string} [description] - Subtitle under the title on the trigger.
+ * @property {boolean} [disabled] - When true, the trigger does not open. Default `false`.
+ */
+interface AccordionProps {
+    title: string;
+    isOpen: boolean;
+    onToggle: (isOpen: boolean) => void;
+    children: React.ReactNode;
+    description?: string;
+    disabled?: boolean;
+    className?: string;
+    containerClassName?: string;
+    titleClassName?: string;
+    descriptionClassName?: string;
+}
+/**
+ * Collapsible section with a button trigger, optional description, and height-animated content.
+ *
+ * @param {AccordionProps} props - Controlled `isOpen` + `onToggle` model.
+ * @returns {JSX.Element} The accordion shell, trigger, and panel region.
+ */
+export declare const Accordion: ({ title, isOpen, onToggle, children, description, disabled, containerClassName, className, titleClassName, descriptionClassName, }: AccordionProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/charts/components/src/button/button.d.ts

@@ -0,0 +1,41 @@
+import "./button.css";
+import type { IconType, TooltipPosition } from "../../../types";
+import React from "react";
+/**
+ * Extends native `HTMLButtonElement` attributes
+ *
+ * @property {"primary"|"secondary"|"ghost"|"danger"|"warning"|"success"} [variant] - Color/semantic style. Default `"primary"`.
+ * @property {"sm"|"md"|"lg"} [size] - Height and padding. Default `"md"`.
+ * @property {string} [label] - Button text; used when `iconOnly` is false.
+ * @property {import("../../../types").IconType} [icon] - Optional icon name from the icon set.
+ * @property {"left"|"right"} [iconPosition] - Icon position relative to the label. Default `"right"`.
+ * @property {boolean} [iconOnly] - Icon without visible text.
+ * @property {number} [iconStrokeWidth] - SVG stroke width for the icon. Default `1.5`.
+ * @property {boolean} [isLoading] - Shows a spinner and disables the button. Default `false`.
+ * @property {boolean} [fullWidth] - Stretches to 100% width of the container. Default `false`.
+ * @property {string} [tooltip] - If set, wraps the button in a `Tooltip` with this text.
+ * @property {import("../../../types").TooltipPosition} [tooltipPosition] - Tooltip position. Default `"top"`.
+ */
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: "primary" | "secondary" | "ghost" | "danger" | "warning" | "success";
+    size?: "sm" | "md" | "lg";
+    label?: string;
+    iconStrokeWidth?: number;
+    icon?: IconType;
+    iconPosition?: "left" | "right";
+    iconOnly?: boolean;
+    isLoading?: boolean;
+    fullWidth?: boolean;
+    tooltip?: string;
+    tooltipPosition?: TooltipPosition;
+    className?: string;
+}
+/**
+ * Renders button or wrapped in tooltip if `tooltip` prop is provided. accepts forwarded ref to the underlying button element.
+ *
+ * @param {ButtonProps} props
+ * @param {React.Ref<HTMLButtonElement>} ref
+ * @returns {React.ReactElement}
+ */
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/charts/components/src/calendar/calendar.d.ts

@@ -0,0 +1,43 @@
+import "./calendar.css";
+/**
+ * @type {("single"|"range")} - Single date, or a start/end range (inclusive range mode behavior).
+ */
+export type CalendarMode = "single" | "range";
+/**
+ * Day grid calendar: single day or range, optional week selection, and disabled/min/max bounds.
+ *
+ * @property {CalendarMode} [mode] - `single` vs start/end `range`. Default `"single"`.
+ * @property {Date|[Date|null,Date|null]} [value] - Selected day or a tuple for range (nulls for partial range).
+ * @property {(v:Date|[Date|null,Date|null]) => void} [onChange] - Emits `Date` in single mode, tuple in range.
+ * @property {Date} [minDate] - No selection before this calendar day. Optional.
+ * @property {Date} [maxDate] - No selection after this calendar day. Optional.
+ * @property {boolean} [weekSelection] - In `range` mode, select whole weeks. Default `false`.
+ * @property {Date[]} [disabledDates] - Unselectable specific days.
+ * @property {0|1} [weekStartsOn] - 0 = Sunday, 1 = Monday. Default `0`.
+ */
+interface CalendarProps {
+    mode?: CalendarMode;
+    value?: Date | [Date | null, Date | null];
+    onChange?: (value: Date | [Date | null, Date | null]) => void;
+    minDate?: Date;
+    maxDate?: Date;
+    weekSelection?: boolean;
+    disabledDates?: Date[];
+    month?: Date;
+    onMonthChange?: (month: Date) => void;
+    hideHeader?: boolean;
+    hideOutsideDays?: boolean;
+    hoverDate?: Date | null;
+    onDayMouseEnter?: (date: Date) => void;
+    onDayMouseLeave?: () => void;
+    weekStartsOn?: 0 | 1;
+    className?: string;
+}
+/**
+ * Renders a navigable month grid; supports controlled `month`, hover state for range preview, and outside-month days.
+ *
+ * @param {CalendarProps} props - Mode, value, optional `weekSelection`, and `weekStartsOn`.
+ * @returns {JSX.Element} The calendar root with header and day cells.
+ */
+declare const Calendar: ({ mode, value, onChange, minDate, maxDate, weekSelection, disabledDates, month, onMonthChange, hideHeader, hideOutsideDays, hoverDate: externalHoverDate, onDayMouseEnter, onDayMouseLeave, weekStartsOn, className, }: CalendarProps) => JSX.Element | null;
+export { Calendar };