h2o-library 1.8.0 → 2.0.0

package/dist/components/src/radio-group.d.ts

@@ -1,17 +0,0 @@
-import React from "react";
-import { IconType } from "../../types";
-interface RadioOption {
-    label: string;
-    value: string;
-    icon?: IconType;
-    dot?: "active" | "inactive";
-}
-interface RadioGroupProps {
-    options: RadioOption[];
-    selected: string;
-    onSelect: (value: string) => void;
-    className?: string;
-    optionClassName?: string;
-}
-export declare const RadioGroup: ({ options, selected, onSelect, className, optionClassName, }: RadioGroupProps) => React.JSX.Element;
-export {};

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

@@ -1,6 +0,0 @@
-import React from "react";
-export interface RadioProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
-    label?: string;
-    className?: string;
-}
-export declare const Radio: ({ label, className, ...props }: RadioProps) => JSX.Element;

package/dist/components/src/segmented-toggle.d.ts

@@ -1,20 +0,0 @@
-import React from "react";
-import { IconType } from "../../types";
-import type { IconProps as IconPropsType } from "./icon";
-export type SegmentedToggleOption = {
-    label: string;
-    value: string;
-    icon?: IconType;
-    iconProps?: Omit<IconPropsType, "icon">;
-    labelProps?: React.HTMLAttributes<HTMLSpanElement>;
-};
-export interface SegmentedToggleProps {
-    options: SegmentedToggleOption[];
-    size?: "sm" | "md" | "lg";
-    className?: string;
-    optionClassName?: string;
-    selected: string;
-    onChange: (value: string) => void;
-    disabled?: boolean;
-}
-export declare function SegmentedToggle({ options, size, className, optionClassName, selected, onChange, disabled, }: SegmentedToggleProps): React.JSX.Element;

package/dist/components/src/side-panel.d.ts

@@ -1,16 +0,0 @@
-import React from "react";
-export interface SidePanelProps {
-    isOpen: boolean;
-    onClose: () => void;
-    position?: "left" | "right";
-    title?: string;
-    description?: string;
-    children: React.ReactNode;
-    className?: string;
-    titleClassName?: string;
-    descriptionClassName?: string;
-    closeButtonClassName?: string;
-    headerClassName?: string;
-    contentClassName?: string;
-}
-export declare const SidePanel: ({ isOpen, onClose, position, title, description, children, className, titleClassName, descriptionClassName, closeButtonClassName, headerClassName, contentClassName, }: SidePanelProps) => JSX.Element | null;

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

@@ -1,8 +0,0 @@
-import React from "react";
-interface StatusProps {
-    variant: "active" | "muted" | "destructive";
-    className?: string;
-    label?: string;
-}
-export declare const Status: ({ variant, className, label, }: StatusProps) => React.JSX.Element;
-export {};

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

@@ -1,43 +0,0 @@
-import React from "react";
-export type SortDirection = "asc" | "desc" | null;
-export interface TableColumn<T> {
-    key: string;
-    label: string;
-    sortable?: boolean;
-    minWidth?: string;
-    maxWidth?: string;
-    width?: string;
-    render?: (value: any, row: T) => React.ReactNode;
-}
-export interface TableProps<T extends Record<string, any>> {
-    columns: TableColumn<T>[];
-    data: T[];
-    isLoading?: boolean;
-    className?: string;
-    containerClassName?: string;
-    rowHeight?: string;
-    sortKey?: string;
-    sortDirection?: SortDirection;
-    columnsEditable?: boolean;
-    currentPage?: number;
-    totalPages?: number;
-    perPage?: number;
-    perPageOptions?: {
-        label: string;
-        value: string;
-    }[];
-    onSort?: (key: string, direction: SortDirection) => void;
-    onPageChange?: (page: number) => void;
-    onPerPageChange?: (perPage: string) => void;
-    onVisibleColumnsChange?: (keys: string[]) => void;
-    maxHeight?: string;
-    visibleColumns?: string[];
-    maxVisibleColumns?: number;
-    defaultVisibleColumns?: string[];
-    pinnedColumns?: string[];
-    selectedRows?: T[];
-    setSelectedRows?: (rows: T[]) => void;
-    rowKey?: keyof T;
-    onRowClick?: (row: T, rowIndex: number) => void;
-}
-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;

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

@@ -1,10 +0,0 @@
-import React from "react";
-interface TabsProps {
-    tabs: string[];
-    selectedTab: string;
-    onSelectTab: (tab: string) => void;
-    tabClassName?: string;
-    className?: string;
-}
-export declare const Tabs: ({ tabs, selectedTab, onSelectTab, tabClassName, className, }: TabsProps) => React.JSX.Element;
-export {};

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

@@ -1,9 +0,0 @@
-import React from "react";
-type TagProps = {
-    label: string;
-    variant?: "primary" | "secondary";
-    onRemove: () => void;
-    className?: string;
-};
-export declare const Tag: ({ label, variant, onRemove, className, }: TagProps) => React.JSX.Element;
-export {};

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

@@ -1,15 +0,0 @@
-import React from "react";
-import { TooltipPosition } from "../../types";
-export interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "size"> {
-    size?: "sm" | "md" | "lg";
-    label?: string;
-    showClear?: boolean;
-    note?: string;
-    error?: string;
-    containerClassName?: string;
-    tooltip?: string;
-    tooltipPosition?: TooltipPosition;
-    maxLength?: number;
-    enableResize?: boolean;
-}
-export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;

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

@@ -1,20 +0,0 @@
-import React from "react";
-export type ToastVariant = "info" | "error" | "warning" | "success";
-interface ToastAction {
-    label: string;
-    action: () => void;
-}
-export interface ToastProps {
-    id: string;
-    variant: ToastVariant;
-    title: string;
-    description: string;
-    primaryAction?: ToastAction;
-    secondaryAction?: ToastAction;
-    onClose: () => void;
-}
-export declare const ToastProvider: React.FC<{
-    children: React.ReactNode;
-}>;
-export declare const useToast: () => (props: Omit<ToastProps, "id" | "onClose">) => void;
-export {};

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

@@ -1,9 +0,0 @@
-import React from "react";
-export interface ToggleProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
-    label?: string;
-    description?: string;
-    className?: string;
-    isCard?: boolean;
-    isDraggable?: boolean;
-}
-export declare const Toggle: ({ label, description, className, isCard, isDraggable, ...props }: ToggleProps) => JSX.Element;

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

@@ -1,20 +0,0 @@
-import React from "react";
-import { TooltipPosition } from "../../types";
-type BaseProps = {
-    position?: TooltipPosition;
-    className?: string;
-    contentClassName?: string;
-    children: React.ReactNode;
-    variant?: "dark" | "light";
-};
-type TextTooltip = BaseProps & {
-    text: string;
-    content?: never;
-};
-type ContentTooltip = BaseProps & {
-    content: React.ReactNode;
-    text?: never;
-};
-export type TooltipProps = TextTooltip | ContentTooltip;
-export declare const Tooltip: React.FC<TooltipProps>;
-export {};

package/dist/css/index.css

@@ -1 +0,0 @@
-: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";

package/dist/css/src/chart.css

@@ -1,76 +0,0 @@
-.chart-container {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-}
-
-.chart-header {
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-}
-
-.chart-title-container {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.chart-title {
-  margin: 0;
-  font-size: 1.5rem;
-  font-weight: 600;
-  /* color: hsl(var(--muted-200)); */
-}
-
-.chart-info-icon {
-  color: hsl(var(--muted));
-  cursor: help;
-}
-
-.chart-metadata {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.chart-kpis {
-  display: flex;
-  gap: 2rem;
-  flex-wrap: wrap;
-  padding-bottom: 0.5rem;
-  border-bottom: 1px solid hsl(var(--muted-50));
-}
-
-.chart-kpi {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-}
-
-.chart-kpi-label {
-  font-size: 0.875rem;
-  color: hsl(var(--muted-200));
-}
-
-.chart-kpi-value {
-  font-size: 1.5rem;
-  font-weight: 600;
-  /* color: hsl(var(--muted-200)); */
-}
-
-.chart-legend {
-  padding-top: 0.5rem;
-}
-
-.chart-header-content {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-}
-
-.chart-description {
-  font-size: 1rem;
-  color: hsl(var(--muted-200));
-}

package/dist/css/src/charts.css

@@ -1,149 +0,0 @@
-.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 {
-  font-family: sans-serif;
-  text-align: center;
-}
-
-/* Pointer cursor on slices when clickable */
-.pie-chart-clickable path,
-.pie-chart-clickable .recharts-pie-sector {
-  cursor: pointer;
-}
-
-/* Remove focus outline on pie slices after click */
-.pie-chart-container path:focus,
-.pie-chart-container .recharts-pie-sector:focus,
-.pie-chart-container .recharts-layer path:focus {
-  outline: none;
-}
-
-.stat-chart-container {
-  font-family: sans-serif;
-  text-align: center;
-}
-
-.custom-chart-tooltip {
-  background-color: #262626;
-  color: white;
-  padding: 0.5rem 1rem;
-  border-radius: 0.375rem;
-  font-size: 0.75rem;
-  white-space: nowrap;
-  position: relative;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-  transform: translate(-50%, calc(-100% - 16px));
-}
-
-.custom-chart-tooltip > span {
-  font-size: 0.875rem;
-}
-
-.custom-chart-tooltip::after {
-  content: "";
-  position: absolute;
-  top: 100%;
-  left: 50%;
-  transform: translateX(-50%);
-  border-width: 8px;
-  border-style: solid;
-  border-color: #262626 transparent transparent transparent;
-}
-
-.recharts-tooltip-wrapper {
-  z-index: 1000;
-}
-
-.heatmap-container {
-  width: 100%;
-  padding: 1rem;
-  display: flex;
-  flex-direction: column;
-  overflow: visible;
-}
-
-.heatmap-grid {
-  display: grid;
-  gap: 0.5rem;
-  flex-grow: 1;
-  overflow: visible;
-}
-
-.heatmap-col-tooltip {
-  width: 100%;
-  min-width: 0;
-  display: block;
-}
-
-.heatmap-col-header {
-  padding: 0.5rem;
-  font-weight: 500;
-  text-align: center;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  max-width: 100%;
-  display: block;
-}
-
-.heatmap-row-tooltip {
-  width: 100%;
-  min-width: 0;
-  display: block;
-}
-
-.heatmap-row-header {
-  padding: 0.5rem;
-  font-weight: 500;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  max-width: 100%;
-  display: block;
-}
-
-.heatmap-cell {
-  padding: 0.75rem;
-  overflow: hidden;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-
-.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;
-}
-
-.heatmap-cell-tooltip-content {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-  font-size: 0.75rem;
-}

package/dist/css/src/chip.css

@@ -1,54 +0,0 @@
-.chip-base {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.25rem;
-  padding: 0.25rem 0.5rem;
-  border-radius: 0.75rem;
-  font-size: 0.8rem;
-  font-weight: 500;
-  line-height: 1;
-  text-wrap: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.chip-has-icon {
-  padding-left: 0.25rem;
-}
-
-.chip-label {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.chip-neutral {
-  background-color: hsl(var(--secondary-bg));
-  color: hsl(var(--foreground) / 0.8);
-  border: 1.5px solid hsl(var(--muted) / 0.6);
-}
-
-.chip-primary {
-  background-color: hsl(var(--primary-muted));
-  color: hsl(var(--primary));
-  border: 1.5px solid hsl(var(--primary) / 0.2);
-}
-
-.chip-success {
-  background-color: hsl(var(--success-bg) / 0.4);
-  color: hsl(var(--success));
-  border: 1.5px solid hsl(var(--success) / 0.5);
-}
-
-.chip-warning {
-  background-color: hsl(var(--warning-bg) / 0.4);
-  color: hsl(var(--warning-200));
-  border: 1.5px solid hsl(var(--warning-200) / 0.5);
-}
-
-.chip-error {
-  background-color: hsl(var(--destructive-bg) / 0.4);
-  color: hsl(var(--destructive));
-  border: 1.5px solid hsl(var(--destructive) / 0.5);
-}

package/dist/css/src/index.css

@@ -1,70 +0,0 @@
-: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";

package/dist/css/src/loader.css

@@ -1,18 +0,0 @@
-.h2o-loader {
-  width: 50px;
-  padding: 8px;
-  aspect-ratio: 1;
-  border-radius: 50%;
-  background: hsl(var(--primary));
-  --_m: conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box;
-  -webkit-mask: var(--_m);
-  mask: var(--_m);
-  -webkit-mask-composite: source-out;
-  mask-composite: subtract;
-  animation: l3 1s infinite linear;
-}
-@keyframes l3 {
-  to {
-    transform: rotate(1turn);
-  }
-}

package/dist/css/src/radio-group.css

@@ -1,44 +0,0 @@
-.radio-group {
-  display: flex;
-  gap: 0.5rem;
-  flex-wrap: wrap;
-}
-
-.radio-group-option {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.5rem 1rem;
-  border-radius: var(--radius-md);
-  border: 1px solid hsl(var(--muted));
-  background: transparent;
-  color: hsl(var(--text));
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.radio-group-option:hover {
-  border-color: hsl(var(--primary));
-  color: hsl(var(--primary));
-}
-
-.radio-group-option-selected {
-  background-color: hsl(var(--primary));
-  color: white;
-  border-color: hsl(var(--primary));
-}
-
-.radio-group-option-selected:hover {
-  background-color: hsl(var(--primary-200));
-  border-color: hsl(var(--primary-200));
-}
-
-.radio-group-option-label {
-  font-size: 0.875rem;
-}
-
-.radio-group-option-icon {
-  width: 1.25rem;
-  height: 1.25rem;
-  flex-shrink: 0;
-}