h2o-library 1.3.8 → 1.4.0

package/dist/components/index.d.ts

@@ -27,8 +27,10 @@ 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/compact-multi-select";
+export * from "./src/date-range-picker";

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

@@ -8,6 +8,12 @@ interface CalendarProps {
     maxDate?: Date;
     forceWeek?: boolean;
     disabledDates?: Date[];
+    month?: Date;
+    hideHeader?: boolean;
+    hideOutsideDays?: boolean;
+    hoverDate?: Date | null;
+    onDayMouseEnter?: (date: Date) => void;
+    onDayMouseLeave?: () => void;
 }
-declare const Calendar: ({ mode, value, onChange, minDate, maxDate, forceWeek, disabledDates, }: CalendarProps) => JSX.Element | null;
+declare const Calendar: ({ mode, value, onChange, minDate, maxDate, forceWeek, disabledDates, month, hideHeader, hideOutsideDays, hoverDate: externalHoverDate, onDayMouseEnter, onDayMouseLeave, }: CalendarProps) => JSX.Element | null;
 export { Calendar };

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

@@ -6,11 +6,14 @@ export interface BarChartDataPoint {
 export interface BarProps {
     dataKey: string;
     fill: string;
+    label: string;
 }
 export interface BarChartProps {
     data: BarChartDataPoint[];
     bars: BarProps[];
+    layout?: 'single' | 'grouped' | 'stacked';
     showGrid?: boolean;
     showLegend?: boolean;
+    height?: number;
 }
-export declare const BarChart: ({ data, bars, showGrid, showLegend, }: BarChartProps) => React.JSX.Element;
+export declare const BarChart: ({ data, bars, layout, showGrid, showLegend, height, }: BarChartProps) => React.JSX.Element;

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

@@ -0,0 +1,14 @@
+import React from 'react';
+export interface HeatmapDataPoint {
+    value: number;
+    percentage: number;
+}
+export interface HeatmapData {
+    rows: string[];
+    columns: string[];
+    data: HeatmapDataPoint[][];
+}
+export interface HeatmapChartProps {
+    data: HeatmapData;
+}
+export declare const HeatmapChart: ({ data }: HeatmapChartProps) => React.JSX.Element;

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

@@ -1,12 +1,12 @@
 import React from 'react';
 export interface LineChartDataPoint {
     name: string;
-    [key: string]: number | string;
+    [key: string]: number | string | undefined;
 }
 export interface LineProps {
     dataKey: string;
     stroke: string;
-    isDashed?: boolean;
+    dashed?: boolean;
     unit?: string;
 }
 export interface LineChartProps {
@@ -15,5 +15,6 @@ export interface LineChartProps {
     showGrid?: boolean;
     showLegend?: boolean;
     showGradient?: boolean;
+    height?: number;
 }
-export declare const LineChart: ({ data, lines, showGrid, showLegend, showGradient, }: LineChartProps) => React.JSX.Element;
+export declare const LineChart: ({ data, lines, showGrid, showLegend, showGradient, height, }: LineChartProps) => React.JSX.Element;

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

@@ -6,6 +6,9 @@ export interface PieChartDataPoint {
 }
 export interface PieChartProps {
     data: PieChartDataPoint[];
+    variant?: 'pie' | 'donut';
     showLegend?: boolean;
+    height?: number;
+    showLabels?: boolean;
 }
-export declare const PieChart: ({ data, showLegend }: PieChartProps) => React.JSX.Element;
+export declare const PieChart: ({ data, variant, showLegend, height, showLabels, }: PieChartProps) => React.JSX.Element;

package/dist/components/src/date-range-picker.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+interface DateRangePickerProps {
+    value?: [Date | null, Date | null];
+    onChange?: (value: [Date | null, Date | null]) => void;
+    minDate?: Date;
+    maxDate?: Date;
+    disabledDates?: Date[];
+}
+export declare const DateRangePicker: ({ value, onChange, ...calendarProps }: DateRangePickerProps) => React.JSX.Element;
+export {};

package/dist/components/src/dropdown.d.ts

@@ -16,5 +16,6 @@ export interface DropdownProps extends Omit<React.ButtonHTMLAttributes<HTMLButto
     value?: string;
     onChange?: (value: string) => void;
     enableSearch?: boolean;
+    direction?: "top" | "bottom" | "auto";
 }
 export declare const Dropdown: React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/css/index.css

@@ -1 +1 @@
-:root{--primary-disabled:225 100% 88%;--primary-muted:221 100% 95%;--primary:225 91% 59%;--primary-200:225 100% 43%;--primary-300:225 91% 40%;--primary-400:225 91% 18%;--success-bg:143 26% 86%;--success:130 35% 46%;--success-200:130 76% 26%;--success-300:130 100% 18%;--warning-bg:45 100% 84%;--warning:45 100% 61%;--warning-200:45 100% 45%;--warning-300:45 100% 32%;--destructive-bg:357 100% 92%;--destructive:0 83% 60%;--destructive-200:0 100% 42%;--destructive-300:0 100% 29%;--muted-25:0 0 98%;--muted-50:0 0 96%;--muted:0 0 80%;--muted-200:0 0 67%;--radius-sm:0.25rem;--radius-md:0.375rem;--radius-lg:0.5rem;--radius-full:9999px}@import "./src/accordion.css";@import "./src/button.css";@import "./src/calendar.css";@import "./src/checkbox.css";@import "./src/content-switch.css";@import "./src/dropdown.css";@import "./src/input.css";@import "./src/modal.css";@import "./src/multi-select.css";@import "./src/compact-multi-select.css";@import "./src/popover.css";@import "./src/radio.css";@import "./src/search.css";@import "./src/side-panel.css";@import "./src/status.css";@import "./src/tabs.css";@import "./src/tag.css";@import "./src/textarea.css";@import "./src/toggle.css";@import "./src/tooltip.css";@import "./src/pagination.css";@import "./src/table.css";@import "./src/toast.css";@import "./src/month-calendar.css";@import "./src/loader.css";@import "./src/message.css";@import "./src/multi-menu.css";@import "./src/charts.css";
+:root{--primary-disabled:225 100% 88%;--primary-muted:221 100% 95%;--primary:225 91% 59%;--primary-200:225 100% 43%;--primary-300:225 91% 40%;--primary-400:225 91% 18%;--success-bg:143 26% 86%;--success:130 35% 46%;--success-200:130 76% 26%;--success-300:130 100% 18%;--warning-bg:45 100% 84%;--warning:45 100% 61%;--warning-200:45 100% 45%;--warning-300:45 100% 32%;--destructive-bg:357 100% 92%;--destructive:0 83% 60%;--destructive-200:0 100% 42%;--destructive-300:0 100% 29%;--muted-25:0 0 98%;--muted-50:0 0 96%;--muted:0 0 80%;--muted-200:0 0 67%;--radius-sm:0.25rem;--radius-md:0.375rem;--radius-lg:0.5rem;--radius-full:9999px}@import "./src/accordion.css";@import "./src/button.css";@import "./src/calendar.css";@import "./src/checkbox.css";@import "./src/content-switch.css";@import "./src/date-range-picker.css";@import "./src/dropdown.css";@import "./src/input.css";@import "./src/modal.css";@import "./src/multi-select.css";@import "./src/compact-multi-select.css";@import "./src/popover.css";@import "./src/radio.css";@import "./src/search.css";@import "./src/side-panel.css";@import "./src/status.css";@import "./src/tabs.css";@import "./src/tag.css";@import "./src/textarea.css";@import "./src/toggle.css";@import "./src/tooltip.css";@import "./src/pagination.css";@import "./src/table.css";@import "./src/toast.css";@import "./src/month-calendar.css";@import "./src/loader.css";@import "./src/message.css";@import "./src/multi-menu.css";@import "./src/charts.css";

package/dist/css/src/accordion.css

@@ -44,8 +44,6 @@
 }
 
 .accordion-content {
-  height: 0;
-  overflow: hidden;
   transition: height 0.3s cubic-bezier(0.16, 1, 0.3, 1);
   margin-top: 0.5rem;
 }

package/dist/css/src/calendar.css

@@ -8,6 +8,13 @@
   padding: 0 1rem;
 }
 
+.calendar-container--no-header {
+  border: none;
+  box-shadow: none;
+  padding: 0;
+  max-width: none;
+}
+
 .calendar-header {
   display: flex;
   align-items: center;

package/dist/css/src/charts.css

@@ -1,11 +1,13 @@
 .bar-chart-container {
   font-family: sans-serif;
   text-align: center;
+  padding: 2rem 2rem 2rem 0px;
 }
 
 .line-chart-container {
   font-family: sans-serif;
   text-align: center;
+  padding: 2rem 2rem 2rem 0px;
 }
 
 .pie-chart-container {
@@ -44,3 +46,49 @@
 .recharts-tooltip-wrapper {
   z-index: 1000;
 }
+
+.heatmap-container {
+  width: 100%;
+  padding: 1rem;
+}
+
+.heatmap-grid {
+  display: grid;
+  gap: 0.5rem;
+}
+
+.heatmap-col-header {
+  padding: 0.5rem;
+  font-weight: 500;
+  text-align: center;
+}
+
+.heatmap-row-header {
+  padding: 0.5rem;
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+}
+
+.heatmap-cell {
+  padding: 0.75rem;
+}
+
+.heatmap-cell-content {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.heatmap-cell-value-container {
+  font-size: 0.875rem;
+}
+
+.heatmap-cell-percentage-container {
+  font-size: 0.75rem;
+}
+
+.heatmap-icon {
+  width: 0.75rem;
+  height: 0.75rem;
+}

package/dist/css/src/date-range-picker.css

@@ -0,0 +1,73 @@
+.date-range-picker {
+  display: flex;
+  background-color: hsl(var(--background));
+  border-radius: 0.5rem;
+  box-shadow: var(--primary-shadow);
+  border: 1px solid hsl(var(--primary-muted));
+  font-family: sans-serif;
+}
+
+.date-range-picker__presets {
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  border-right: 1px solid hsl(var(--muted) / 50%);
+  width: 14rem;
+  font-size: 0.875rem;
+}
+
+.date-range-picker__presets .radio-label {
+  width: 100%;
+}
+
+.date-range-picker__main {
+  padding: 1rem;
+  flex-grow: 1;
+}
+
+.date-range-picker__display {
+  font-size: 1rem;
+  font-weight: 500;
+  margin-bottom: 1rem;
+  padding: 0 0.5rem;
+}
+
+.date-range-picker__calendars {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1.5rem;
+  grid-template-areas:
+    "header1 header2"
+    "cal1 cal2";
+}
+
+.date-range-picker__calendars .calendar-container {
+  border: none;
+  box-shadow: none;
+  padding: 0;
+  max-width: none;
+}
+
+.date-range-picker__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 0.5rem;
+}
+
+.date-range-picker__header:nth-of-type(1) {
+  grid-area: header1;
+}
+
+.date-range-picker__header:nth-of-type(2) {
+  grid-area: header2;
+}
+
+.date-range-picker__calendars .calendar-container:nth-of-type(1) {
+  grid-area: cal1;
+}
+
+.date-range-picker__calendars .calendar-container:nth-of-type(2) {
+  grid-area: cal2;
+} 

package/dist/css/src/index.css

@@ -37,6 +37,7 @@
 @import "./src/calendar.css";
 @import "./src/checkbox.css";
 @import "./src/content-switch.css";
+@import "./src/date-range-picker.css";
 @import "./src/dropdown.css";
 @import "./src/input.css";
 @import "./src/modal.css";

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

@@ -27,8 +27,10 @@ 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/compact-multi-select";
+export * from "./src/date-range-picker";

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

@@ -8,6 +8,12 @@ interface CalendarProps {
     maxDate?: Date;
     forceWeek?: boolean;
     disabledDates?: Date[];
+    month?: Date;
+    hideHeader?: boolean;
+    hideOutsideDays?: boolean;
+    hoverDate?: Date | null;
+    onDayMouseEnter?: (date: Date) => void;
+    onDayMouseLeave?: () => void;
 }
-declare const Calendar: ({ mode, value, onChange, minDate, maxDate, forceWeek, disabledDates, }: CalendarProps) => JSX.Element | null;
+declare const Calendar: ({ mode, value, onChange, minDate, maxDate, forceWeek, disabledDates, month, hideHeader, hideOutsideDays, hoverDate: externalHoverDate, onDayMouseEnter, onDayMouseLeave, }: CalendarProps) => JSX.Element | null;
 export { Calendar };

package/dist/esm/components/src/chart-bar.d.ts

@@ -6,11 +6,14 @@ export interface BarChartDataPoint {
 export interface BarProps {
     dataKey: string;
     fill: string;
+    label: string;
 }
 export interface BarChartProps {
     data: BarChartDataPoint[];
     bars: BarProps[];
+    layout?: 'single' | 'grouped' | 'stacked';
     showGrid?: boolean;
     showLegend?: boolean;
+    height?: number;
 }
-export declare const BarChart: ({ data, bars, showGrid, showLegend, }: BarChartProps) => React.JSX.Element;
+export declare const BarChart: ({ data, bars, layout, showGrid, showLegend, height, }: BarChartProps) => React.JSX.Element;

package/dist/esm/components/src/chart-heatmap.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export interface HeatmapDataPoint {
+    value: number;
+    percentage: number;
+}
+export interface HeatmapData {
+    rows: string[];
+    columns: string[];
+    data: HeatmapDataPoint[][];
+}
+export interface HeatmapChartProps {
+    data: HeatmapData;
+}
+export declare const HeatmapChart: ({ data }: HeatmapChartProps) => React.JSX.Element;

package/dist/esm/components/src/chart-line.d.ts

@@ -1,12 +1,12 @@
 import React from 'react';
 export interface LineChartDataPoint {
     name: string;
-    [key: string]: number | string;
+    [key: string]: number | string | undefined;
 }
 export interface LineProps {
     dataKey: string;
     stroke: string;
-    isDashed?: boolean;
+    dashed?: boolean;
     unit?: string;
 }
 export interface LineChartProps {
@@ -15,5 +15,6 @@ export interface LineChartProps {
     showGrid?: boolean;
     showLegend?: boolean;
     showGradient?: boolean;
+    height?: number;
 }
-export declare const LineChart: ({ data, lines, showGrid, showLegend, showGradient, }: LineChartProps) => React.JSX.Element;
+export declare const LineChart: ({ data, lines, showGrid, showLegend, showGradient, height, }: LineChartProps) => React.JSX.Element;

package/dist/esm/components/src/chart-pie.d.ts

@@ -6,6 +6,9 @@ export interface PieChartDataPoint {
 }
 export interface PieChartProps {
     data: PieChartDataPoint[];
+    variant?: 'pie' | 'donut';
     showLegend?: boolean;
+    height?: number;
+    showLabels?: boolean;
 }
-export declare const PieChart: ({ data, showLegend }: PieChartProps) => React.JSX.Element;
+export declare const PieChart: ({ data, variant, showLegend, height, showLabels, }: PieChartProps) => React.JSX.Element;

package/dist/esm/components/src/date-range-picker.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+interface DateRangePickerProps {
+    value?: [Date | null, Date | null];
+    onChange?: (value: [Date | null, Date | null]) => void;
+    minDate?: Date;
+    maxDate?: Date;
+    disabledDates?: Date[];
+}
+export declare const DateRangePicker: ({ value, onChange, ...calendarProps }: DateRangePickerProps) => React.JSX.Element;
+export {};

package/dist/esm/components/src/dropdown.d.ts

@@ -16,5 +16,6 @@ export interface DropdownProps extends Omit<React.ButtonHTMLAttributes<HTMLButto
     value?: string;
     onChange?: (value: string) => void;
     enableSearch?: boolean;
+    direction?: "top" | "bottom" | "auto";
 }
 export declare const Dropdown: React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/esm/css/index.css

@@ -1 +1 @@
-:root{--primary-disabled:225 100% 88%;--primary-muted:221 100% 95%;--primary:225 91% 59%;--primary-200:225 100% 43%;--primary-300:225 91% 40%;--primary-400:225 91% 18%;--success-bg:143 26% 86%;--success:130 35% 46%;--success-200:130 76% 26%;--success-300:130 100% 18%;--warning-bg:45 100% 84%;--warning:45 100% 61%;--warning-200:45 100% 45%;--warning-300:45 100% 32%;--destructive-bg:357 100% 92%;--destructive:0 83% 60%;--destructive-200:0 100% 42%;--destructive-300:0 100% 29%;--muted-25:0 0 98%;--muted-50:0 0 96%;--muted:0 0 80%;--muted-200:0 0 67%;--radius-sm:0.25rem;--radius-md:0.375rem;--radius-lg:0.5rem;--radius-full:9999px}@import "./src/accordion.css";@import "./src/button.css";@import "./src/calendar.css";@import "./src/checkbox.css";@import "./src/content-switch.css";@import "./src/dropdown.css";@import "./src/input.css";@import "./src/modal.css";@import "./src/multi-select.css";@import "./src/compact-multi-select.css";@import "./src/popover.css";@import "./src/radio.css";@import "./src/search.css";@import "./src/side-panel.css";@import "./src/status.css";@import "./src/tabs.css";@import "./src/tag.css";@import "./src/textarea.css";@import "./src/toggle.css";@import "./src/tooltip.css";@import "./src/pagination.css";@import "./src/table.css";@import "./src/toast.css";@import "./src/month-calendar.css";@import "./src/loader.css";@import "./src/message.css";@import "./src/multi-menu.css";@import "./src/charts.css";
+:root{--primary-disabled:225 100% 88%;--primary-muted:221 100% 95%;--primary:225 91% 59%;--primary-200:225 100% 43%;--primary-300:225 91% 40%;--primary-400:225 91% 18%;--success-bg:143 26% 86%;--success:130 35% 46%;--success-200:130 76% 26%;--success-300:130 100% 18%;--warning-bg:45 100% 84%;--warning:45 100% 61%;--warning-200:45 100% 45%;--warning-300:45 100% 32%;--destructive-bg:357 100% 92%;--destructive:0 83% 60%;--destructive-200:0 100% 42%;--destructive-300:0 100% 29%;--muted-25:0 0 98%;--muted-50:0 0 96%;--muted:0 0 80%;--muted-200:0 0 67%;--radius-sm:0.25rem;--radius-md:0.375rem;--radius-lg:0.5rem;--radius-full:9999px}@import "./src/accordion.css";@import "./src/button.css";@import "./src/calendar.css";@import "./src/checkbox.css";@import "./src/content-switch.css";@import "./src/date-range-picker.css";@import "./src/dropdown.css";@import "./src/input.css";@import "./src/modal.css";@import "./src/multi-select.css";@import "./src/compact-multi-select.css";@import "./src/popover.css";@import "./src/radio.css";@import "./src/search.css";@import "./src/side-panel.css";@import "./src/status.css";@import "./src/tabs.css";@import "./src/tag.css";@import "./src/textarea.css";@import "./src/toggle.css";@import "./src/tooltip.css";@import "./src/pagination.css";@import "./src/table.css";@import "./src/toast.css";@import "./src/month-calendar.css";@import "./src/loader.css";@import "./src/message.css";@import "./src/multi-menu.css";@import "./src/charts.css";