h2o-library 1.7.1 → 2.0.0

package/dist/esm/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/esm/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/esm/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/{css/src → esm/charts/src/legend}/legend.css

@@ -1,8 +1,13 @@
 .legend {
   display: flex;
+  flex-wrap: wrap;
   gap: 1rem;
 }
 
+.legend--vertical {
+  flex-direction: column;
+}
+
 .legend-item {
   display: flex;
   align-items: center;
@@ -31,4 +36,4 @@
 .legend-swatch--circle {
   width: 1rem;
   border-radius: 9999px;
-} 
+}

package/dist/esm/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/esm/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/esm/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/esm/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/esm/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/esm/components/index.d.ts

@@ -1,41 +1,36 @@
-export * from "./src/button";
-export * from "./src/checkbox";
-export * from "./src/icon";
-export * from "./src/radio";
-export * from "./src/tooltip";
-export * from "./src/toggle";
-export * from "./src/expandable";
-export * from "./src/content-switch";
-export * from "./src/input";
-export * from "./src/textarea";
-export * from "./src/dropdown";
-export * from "./src/side-panel";
-export * from "./src/modal";
-export * from "./src/tag";
-export * from "./src/accordion";
-export * from "./src/multi-select";
-export * from "./src/radio-group";
-export * from "./src/tabs";
-export * from "./src/status";
-export * from "./src/popover";
-export * from "./src/pagination";
-export * from "./src/table";
-export * from "./src/toast";
-export * from "./src/logo";
-export * from "./src/calendar";
-export * from "./src/month-calendar";
-export * from "./src/loader";
-export * from "./src/message";
-export * from "./src/multi-menu";
-export * from "./src/chart-heatmap";
-export * from "./src/compact-multi-select";
-export * from "./src/chart-line";
-export * from "./src/chart-bar";
-export * from "./src/chart-pie";
-export * from "./src/chart-stat";
-export * from "./src/date-range-picker";
-export * from "./src/legend";
-export * from "./src/chart";
-export * from "./src/expandable-table";
-export * from "./src/chip";
-export * from "./src/segmented-toggle";
+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/{css/src → esm/components/src/accordion}/accordion.css

@@ -1,6 +1,5 @@
 .accordion {
   width: 100%;
-  /* overflow: hidden; */
 }
 
 .accordion-trigger {
@@ -12,7 +11,12 @@
   background: none;
   border: none;
   cursor: pointer;
-  transition: all 0.2s;
+  transition: color 0.2s;
+}
+
+.accordion-trigger:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
 }
 
 .accordion-title-container {
@@ -44,6 +48,8 @@
 }
 
 .accordion-content {
+  height: 0;
+  overflow: hidden;
   transition: height 0.3s cubic-bezier(0.16, 1, 0.3, 1);
   margin-top: 0.5rem;
 }

package/dist/esm/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/esm/components/src/accordion/accordion.js

@@ -0,0 +1,2 @@
+import{jsxs as e,jsx as i}from"react/jsx-runtime";import"./accordion.css";import{useRef as o,useId as n,useEffect as t}from"react";import{Icon as c}from"../icon/icon.js";const r=({title:r,isOpen:a,onToggle:s,children:l,description:d,disabled:h=!1,containerClassName:m="",className:p="",titleClassName:g="",descriptionClassName:N=""})=>{const u=o(null),y=`accordion-${n()}-content`;t((()=>{const e=u.current;e&&(a?e.style.height=`${e.scrollHeight}px`:(e.style.overflow="hidden","auto"===e.style.height||""===e.style.height?(e.style.height=`${e.scrollHeight}px`,requestAnimationFrame((()=>{e.style.height="0px"}))):e.style.height="0px"))}),[a]);return e("div",{className:`accordion ${m}`,children:[e("button",{type:"button",onClick:()=>s(!a),className:`accordion-trigger ${p}`,"aria-expanded":a,"aria-controls":y,disabled:h,children:[e("div",{className:"accordion-title-container",children:[i("span",{className:`accordion-title ${g}`,children:r}),i(c,{icon:"chevron-down",className:"accordion-icon "+(a?"accordion-icon-open":"")})]}),d&&i("span",{className:`accordion-description ${N}`,children:d})]}),i("div",{ref:u,id:y,className:"accordion-content",onTransitionEnd:e=>{if("height"!==e.propertyName)return;const i=u.current;i&&a&&(i.style.height="auto",i.style.overflow="visible")},role:"region","aria-hidden":!a,children:i("div",{className:"accordion-content-inner",children:l})})]})};export{r as Accordion};
+//# sourceMappingURL=accordion.js.map

package/dist/{css/src → esm/components/src/button}/button.css

@@ -8,6 +8,10 @@
   min-width: fit-content;
 }
 
+.button--full-width {
+  width: 100%;
+}
+
 .button:focus {
   outline: none;
 }
@@ -22,7 +26,8 @@
   color: white;
 }
 
-.button--primary:hover:not(:disabled) {
+.button--primary:hover:not(:disabled),
+.button--primary:focus-visible:not(:disabled) {
   background-color: hsl(var(--primary-200));
 }
 
@@ -35,12 +40,13 @@
 }
 
 .button--secondary {
-  background-color: hsl(var(--background));
-  border: 1px solid hsl(var(--muted));
+  background-color: hsl(var(--input));
+  border: 1px solid hsl(var(--border));
   color: hsl(var(--primary));
 }
 
-.button--secondary:hover:not(:disabled) {
+.button--secondary:hover:not(:disabled),
+.button--secondary:focus-visible:not(:disabled) {
   border-color: hsl(var(--primary-200));
   color: hsl(var(--primary-200));
 }
@@ -52,6 +58,7 @@
 
 .button--secondary:disabled {
   color: hsl(var(--primary-disabled));
+  background-color: hsl(var(--input) / 0.5);
   border: none;
 }
 
@@ -60,7 +67,8 @@
   color: hsl(var(--primary));
 }
 
-.button--ghost:hover:not(:disabled) {
+.button--ghost:hover:not(:disabled),
+.button--ghost:focus-visible:not(:disabled) {
   color: hsl(var(--primary-200));
 }
 
@@ -78,7 +86,8 @@
   color: white;
 }
 
-.button--danger:hover:not(:disabled) {
+.button--danger:hover:not(:disabled),
+.button--danger:focus-visible:not(:disabled) {
   background-color: hsl(var(--destructive-200));
 }
 
@@ -95,7 +104,8 @@
   color: white;
 }
 
-.button--warning:hover:not(:disabled) {
+.button--warning:hover:not(:disabled),
+.button--warning:focus-visible:not(:disabled) {
   background-color: hsl(var(--warning-200));
 }
 
@@ -112,7 +122,8 @@
   color: white;
 }
 
-.button--success:hover:not(:disabled) {
+.button--success:hover:not(:disabled),
+.button--success:focus-visible:not(:disabled) {
   background-color: hsl(var(--success-200));
 }
 

package/dist/esm/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/esm/components/src/button/button.js

@@ -0,0 +1,2 @@
+import{__rest as t}from"../../../node_modules/tslib/tslib.es6.mjs.js";import{jsx as o,jsxs as i}from"react/jsx-runtime";import"./button.css";import{Tooltip as n}from"../tooltip/tooltip.js";import{Icon as l}from"../icon/icon.js";import r from"react";const e=()=>i("svg",{className:"button__spinner",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24","aria-hidden":"true",children:[o("circle",{className:"button__spinner-circle",cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"4"}),o("path",{className:"button__spinner-path",fill:"currentColor",d:"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"})]}),s=r.forwardRef(((r,s)=>{var{variant:a="primary",size:c="md",label:d,icon:m,iconStrokeWidth:u=1.5,iconOnly:b=!1,iconPosition:p="right",isLoading:h=!1,fullWidth:f=!1,tooltip:_,tooltipPosition:g="top",className:v="",disabled:N,children:j,"aria-label":w}=r,y=t(r,["variant","size","label","icon","iconStrokeWidth","iconOnly","iconPosition","isLoading","fullWidth","tooltip","tooltipPosition","className","disabled","children","aria-label"]);const x=["button",`button--${a}`,`button--${c}`,h&&"button--loading",b&&"button--icon-only",f&&"button--full-width",v].filter(Boolean).join(" "),W=null!=w?w:b?_:void 0,k=m?o(l,{icon:m,className:"button__icon",strokeWidth:u}):null,z=o("button",Object.assign({ref:s,className:x,disabled:h||N,"aria-busy":h||void 0,"aria-label":W},y,{children:b?h?o(e,{}):k:i("div",{className:"button__content",children:["left"===p&&!h&&k,d||j,"right"===p&&!h&&k,h&&o(e,{})]})}));return _?o(n,{text:_,position:g,children:z}):z}));s.displayName="Button";export{s as Button};
+//# sourceMappingURL=button.js.map