h2o-library 1.6.6 → 1.7.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (43) hide show
  1. package/dist/components/index.d.ts +2 -0
  2. package/dist/components/src/chart-bar.d.ts +5 -1
  3. package/dist/components/src/chart-heatmap.d.ts +3 -1
  4. package/dist/components/src/chart-line.d.ts +5 -2
  5. package/dist/components/src/chart-pie.d.ts +5 -3
  6. package/dist/components/src/checkbox.d.ts +1 -0
  7. package/dist/components/src/chip.d.ts +13 -0
  8. package/dist/components/src/message.d.ts +5 -2
  9. package/dist/components/src/modal.d.ts +7 -1
  10. package/dist/components/src/segmented-toggle.d.ts +20 -0
  11. package/dist/components/src/side-panel.d.ts +7 -1
  12. package/dist/components/src/table.d.ts +2 -1
  13. package/dist/components/src/textarea.d.ts +2 -0
  14. package/dist/css/index.css +1 -1
  15. package/dist/css/src/charts.css +5 -1
  16. package/dist/css/src/chip.css +54 -0
  17. package/dist/css/src/index.css +4 -0
  18. package/dist/css/src/message.css +6 -0
  19. package/dist/css/src/segmented-toggle.css +89 -0
  20. package/dist/css/src/side-panel.css +28 -3
  21. package/dist/css/src/textarea.css +23 -3
  22. package/dist/css/src/tooltip.css +24 -58
  23. package/dist/esm/components/index.d.ts +2 -0
  24. package/dist/esm/components/src/chart-bar.d.ts +5 -1
  25. package/dist/esm/components/src/chart-heatmap.d.ts +3 -1
  26. package/dist/esm/components/src/chart-line.d.ts +5 -2
  27. package/dist/esm/components/src/chart-pie.d.ts +5 -3
  28. package/dist/esm/components/src/checkbox.d.ts +1 -0
  29. package/dist/esm/components/src/chip.d.ts +13 -0
  30. package/dist/esm/components/src/message.d.ts +5 -2
  31. package/dist/esm/components/src/modal.d.ts +7 -1
  32. package/dist/esm/components/src/segmented-toggle.d.ts +20 -0
  33. package/dist/esm/components/src/side-panel.d.ts +7 -1
  34. package/dist/esm/components/src/table.d.ts +2 -1
  35. package/dist/esm/components/src/textarea.d.ts +2 -0
  36. package/dist/esm/css/index.css +1 -1
  37. package/dist/esm/index.js +4 -4
  38. package/dist/esm/index.js.map +1 -1
  39. package/dist/esm/types/src/icon.d.ts +1 -1
  40. package/dist/index.cjs.js +4 -4
  41. package/dist/index.cjs.js.map +1 -1
  42. package/dist/types/src/icon.d.ts +1 -1
  43. package/package.json +1 -1
@@ -1,10 +1,11 @@
1
- import React from 'react';
1
+ import React from "react";
2
2
  export interface LineChartDataPoint {
3
3
  name: string;
4
4
  [key: string]: number | string | undefined;
5
5
  }
6
6
  export interface LineProps {
7
7
  dataKey: string;
8
+ displayName?: string;
8
9
  stroke: string;
9
10
  dashed?: boolean;
10
11
  unit?: string;
@@ -18,5 +19,7 @@ export interface LineChartProps {
18
19
  showGradient?: boolean;
19
20
  height?: number;
20
21
  showXValue?: boolean;
22
+ onXAxisTickClick?: (value: string | number) => void;
23
+ onYAxisTickClick?: (value: string | number) => void;
21
24
  }
22
- export declare const LineChart: ({ data, lines, showGrid, showLegend, showGradient, height, showXValue, }: LineChartProps) => React.JSX.Element;
25
+ export declare const LineChart: ({ data, lines, showGrid, showLegend, showGradient, height, showXValue, onXAxisTickClick, onYAxisTickClick, }: LineChartProps) => React.JSX.Element;
@@ -1,14 +1,16 @@
1
- import React from 'react';
1
+ import React from "react";
2
2
  export interface PieChartDataPoint {
3
3
  name: string;
4
4
  value: number;
5
5
  color: string;
6
+ unit?: string;
6
7
  }
7
8
  export interface PieChartProps {
8
9
  data: PieChartDataPoint[];
9
- variant?: 'pie' | 'donut';
10
+ variant?: "pie" | "donut";
10
11
  showLegend?: boolean;
11
12
  height?: number;
12
13
  showLabels?: boolean;
14
+ showPercentageInTooltip?: boolean;
13
15
  }
14
- export declare const PieChart: ({ data, variant, showLegend, height, showLabels, }: PieChartProps) => React.JSX.Element;
16
+ export declare const PieChart: ({ data, variant, showLegend, height, showLabels, showPercentageInTooltip, }: PieChartProps) => React.JSX.Element;
@@ -2,6 +2,7 @@ import React from "react";
2
2
  export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
3
3
  label?: string;
4
4
  className?: string;
5
+ labelClassName?: string;
5
6
  isCard?: boolean;
6
7
  isIndeterminate?: boolean;
7
8
  }
@@ -0,0 +1,13 @@
1
+ import React from "react";
2
+ import { IconType } from "../../types";
3
+ type ChipProps = React.HTMLAttributes<HTMLDivElement> & {
4
+ className?: string;
5
+ label: string;
6
+ icon?: IconType;
7
+ variant?: "neutral" | "primary" | "success" | "warning" | "error";
8
+ iconStrokeWidth?: number;
9
+ iconClassName?: string;
10
+ iconSize?: number;
11
+ };
12
+ export declare const Chip: ({ className, label, icon, variant, iconStrokeWidth, iconClassName, iconSize, ...props }: ChipProps) => React.JSX.Element;
13
+ export {};
@@ -1,9 +1,12 @@
1
1
  import React from "react";
2
- export type MessageVariant = "info" | "muted" | "error" | "warning";
2
+ export type MessageVariant = "info" | "muted" | "error" | "warning" | "success";
3
3
  interface MessageProps {
4
4
  variant: MessageVariant;
5
5
  className?: string;
6
+ iconSize?: number;
7
+ iconStrokeWidth?: number;
8
+ iconClassName?: string;
6
9
  message?: string | null;
7
10
  }
8
- export declare const Message: ({ variant, className, message }: MessageProps) => React.JSX.Element | null;
11
+ export declare const Message: ({ variant, className, iconSize, iconStrokeWidth, iconClassName, message, }: MessageProps) => React.JSX.Element | null;
9
12
  export {};
@@ -6,5 +6,11 @@ export interface ModalProps {
6
6
  description?: string;
7
7
  children: React.ReactNode;
8
8
  className?: string;
9
+ titleContainerClassName?: string;
10
+ titleClassName?: string;
11
+ descriptionClassName?: string;
12
+ closeButtonClassName?: string;
13
+ headerClassName?: string;
14
+ contentClassName?: string;
9
15
  }
10
- export declare const Modal: ({ isOpen, onClose, title, description, children, className, }: ModalProps) => React.ReactPortal | null;
16
+ export declare const Modal: ({ isOpen, onClose, title, description, children, className, titleContainerClassName, titleClassName, descriptionClassName, closeButtonClassName, headerClassName, contentClassName, }: ModalProps) => React.ReactPortal | null;
@@ -0,0 +1,20 @@
1
+ import React from "react";
2
+ import { IconType } from "../../types";
3
+ import type { IconProps as IconPropsType } from "./icon";
4
+ export type SegmentedToggleOption = {
5
+ label: string;
6
+ value: string;
7
+ icon?: IconType;
8
+ iconProps?: Omit<IconPropsType, "icon">;
9
+ labelProps?: React.HTMLAttributes<HTMLSpanElement>;
10
+ };
11
+ export interface SegmentedToggleProps {
12
+ options: SegmentedToggleOption[];
13
+ size?: "sm" | "md" | "lg";
14
+ className?: string;
15
+ optionClassName?: string;
16
+ selected: string;
17
+ onChange: (value: string) => void;
18
+ disabled?: boolean;
19
+ }
20
+ export declare function SegmentedToggle({ options, size, className, optionClassName, selected, onChange, disabled, }: SegmentedToggleProps): React.JSX.Element;
@@ -2,9 +2,15 @@ import React from "react";
2
2
  export interface SidePanelProps {
3
3
  isOpen: boolean;
4
4
  onClose: () => void;
5
+ position?: "left" | "right";
5
6
  title?: string;
6
7
  description?: string;
7
8
  children: React.ReactNode;
8
9
  className?: string;
10
+ titleClassName?: string;
11
+ descriptionClassName?: string;
12
+ closeButtonClassName?: string;
13
+ headerClassName?: string;
14
+ contentClassName?: string;
9
15
  }
10
- export declare const SidePanel: ({ isOpen, onClose, title, description, children, className, }: SidePanelProps) => JSX.Element | null;
16
+ export declare const SidePanel: ({ isOpen, onClose, position, title, description, children, className, titleClassName, descriptionClassName, closeButtonClassName, headerClassName, contentClassName, }: SidePanelProps) => JSX.Element | null;
@@ -38,5 +38,6 @@ export interface TableProps<T extends Record<string, any>> {
38
38
  selectedRows?: T[];
39
39
  setSelectedRows?: (rows: T[]) => void;
40
40
  rowKey?: keyof T;
41
+ onRowClick?: (row: T, rowIndex: number) => void;
41
42
  }
42
- export declare function Table<T extends Record<string, any>>({ columns, data, isLoading, className, rowHeight, sortKey, sortDirection, onSort, currentPage, totalPages, perPage, perPageOptions, onPageChange, onPerPageChange, maxHeight, columnsEditable, containerClassName, visibleColumns, onVisibleColumnsChange, maxVisibleColumns, defaultVisibleColumns, pinnedColumns, selectedRows, setSelectedRows, rowKey, }: TableProps<T>): React.JSX.Element;
43
+ export declare function Table<T extends Record<string, any>>({ columns, data, isLoading, className, rowHeight, sortKey, sortDirection, onSort, currentPage, totalPages, perPage, perPageOptions, onPageChange, onPerPageChange, maxHeight, columnsEditable, containerClassName, visibleColumns, onVisibleColumnsChange, maxVisibleColumns, defaultVisibleColumns, pinnedColumns, selectedRows, setSelectedRows, rowKey, onRowClick, }: TableProps<T>): React.JSX.Element;
@@ -9,5 +9,7 @@ export interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTex
9
9
  containerClassName?: string;
10
10
  tooltip?: string;
11
11
  tooltipPosition?: TooltipPosition;
12
+ maxLength?: number;
13
+ enableResize?: boolean;
12
14
  }
13
15
  export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
@@ -1 +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/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";@import "./src/chart.css";@import "./src/legend.css";@import "./src/expandable-table.css";
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%;--secondary-bg:0 0% 98%;--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";@import "./src/chart.css";@import "./src/legend.css";@import "./src/expandable-table.css";@import "./src/chip.css";@import "./src/segmented-toggle.css";