h2o-library 1.3.0 → 1.3.2

package/dist/components/index.d.ts

@@ -25,3 +25,4 @@ export * from "./src/logo";
 export * from "./src/calendar";
 export * from "./src/month-calendar";
 export * from "./src/loader";
+export * from "./src/message";

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

@@ -0,0 +1,9 @@
+import React from "react";
+export type MessageVariant = "info" | "muted" | "error" | "warning";
+interface MessageProps {
+    variant: MessageVariant;
+    className?: string;
+    message?: string | null;
+}
+export declare const Message: ({ variant, className, message }: MessageProps) => React.JSX.Element | null;
+export {};

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

@@ -1,7 +1,7 @@
 import React from "react";
 export interface ModalProps {
     isOpen: boolean;
-    onClose: () => void;
+    onClose?: () => void;
     title?: string;
     description?: string;
     children: React.ReactNode;

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

@@ -4,6 +4,9 @@ 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>> {
@@ -11,6 +14,7 @@ export interface TableProps<T extends Record<string, any>> {
     data: T[];
     isLoading?: boolean;
     className?: string;
+    rowHeight?: string;
     sortKey?: string;
     sortDirection?: SortDirection;
     onSort?: (key: string, direction: SortDirection) => void;
@@ -24,4 +28,4 @@ export interface TableProps<T extends Record<string, any>> {
     onPageChange?: (page: number) => void;
     onPerPageChange?: (perPage: string) => void;
 }
-export declare function Table<T extends Record<string, any>>({ columns, data, isLoading, className, sortKey, sortDirection, onSort, currentPage, totalPages, perPage, perPageOptions, onPageChange, onPerPageChange, }: TableProps<T>): React.JSX.Element;
+export declare function Table<T extends Record<string, any>>({ columns, data, isLoading, className, rowHeight, sortKey, sortDirection, onSort, currentPage, totalPages, perPage, perPageOptions, onPageChange, onPerPageChange, }: TableProps<T>): React.JSX.Element;

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/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";
+: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/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";

package/dist/css/src/index.css

@@ -56,3 +56,4 @@
 @import "./src/toast.css";
 @import "./src/month-calendar.css";
 @import "./src/loader.css";
+@import "./src/message.css";

package/dist/css/src/message.css

@@ -0,0 +1,34 @@
+.message {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem;
+  border-radius: var(--radius-md);
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+/* Variant styles */
+.message-info {
+  background-color: hsl(var(--primary-muted) / 0.7);
+  color: hsl(var(--primary-300));
+  border: 1px solid hsl(var(--primary) / 0.2);
+}
+
+.message-muted {
+  background-color: hsl(var(--muted-25) / 0.5);
+  color: hsl(var(--muted-200));
+  border: 1px solid hsl(var(--muted) / 0.2);
+}
+
+.message-error {
+  background-color: hsl(var(--destructive-bg) / 0.5);
+  color: hsl(var(--destructive));
+  border: 1px solid hsl(var(--destructive) / 0.2);
+}
+
+.message-warning {
+  background-color: hsl(var(--warning-bg) / 0.4);
+  color: hsl(var(--warning));
+  border: 1px solid hsl(var(--warning) / 0.3);
+}

package/dist/css/src/modal.css

@@ -5,7 +5,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  z-index: 50;
+  z-index: 500;
   animation: overlayShow 0.15s ease-out;
 }
 

package/dist/css/src/table.css

@@ -2,14 +2,14 @@
   width: 100%;
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  border: 1px solid hsl(var(--muted) / 60%);
+  border-radius: var(--radius-md);
+  background-color: hsl(var(--background));
 }
 
 .table-wrapper {
   width: 100%;
   overflow-x: auto;
-  border: 1px solid hsl(var(--muted) / 60%);
-  border-radius: var(--radius-md);
 }
 
 .table {
@@ -32,7 +32,8 @@
 }
 
 .table th.sortable:hover {
-  background-color: hsl(var(--muted-200));
+  transition: color 0.2s ease-in-out;
+  color: hsl(var(--primary));
 }
 
 .table-header-content {
@@ -76,28 +77,23 @@
   padding: 2rem !important;
 }
 
-.table-loading {
+.table-loader {
+  height: 8rem;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+
+.table-empty-content {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 0.5rem;
-}
-
-.table-loader {
-  width: 1rem;
-  height: 1rem;
-  border: 2px solid hsl(var(--muted-50));
-  border-top-color: hsl(var(--primary));
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
+  font-size: 1.25rem;
+  color: hsl(var(--muted));
 }
 
 .table-pagination {
-  padding: 0 0.5rem;
-}
+  padding: 0.8rem;
+  border-top: 1px solid hsl(var(--muted) / 60%);
+}

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

@@ -25,3 +25,4 @@ export * from "./src/logo";
 export * from "./src/calendar";
 export * from "./src/month-calendar";
 export * from "./src/loader";
+export * from "./src/message";

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

@@ -0,0 +1,9 @@
+import React from "react";
+export type MessageVariant = "info" | "muted" | "error" | "warning";
+interface MessageProps {
+    variant: MessageVariant;
+    className?: string;
+    message?: string | null;
+}
+export declare const Message: ({ variant, className, message }: MessageProps) => React.JSX.Element | null;
+export {};

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

@@ -1,7 +1,7 @@
 import React from "react";
 export interface ModalProps {
     isOpen: boolean;
-    onClose: () => void;
+    onClose?: () => void;
     title?: string;
     description?: string;
     children: React.ReactNode;

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

@@ -4,6 +4,9 @@ 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>> {
@@ -11,6 +14,7 @@ export interface TableProps<T extends Record<string, any>> {
     data: T[];
     isLoading?: boolean;
     className?: string;
+    rowHeight?: string;
     sortKey?: string;
     sortDirection?: SortDirection;
     onSort?: (key: string, direction: SortDirection) => void;
@@ -24,4 +28,4 @@ export interface TableProps<T extends Record<string, any>> {
     onPageChange?: (page: number) => void;
     onPerPageChange?: (perPage: string) => void;
 }
-export declare function Table<T extends Record<string, any>>({ columns, data, isLoading, className, sortKey, sortDirection, onSort, currentPage, totalPages, perPage, perPageOptions, onPageChange, onPerPageChange, }: TableProps<T>): React.JSX.Element;
+export declare function Table<T extends Record<string, any>>({ columns, data, isLoading, className, rowHeight, sortKey, sortDirection, onSort, currentPage, totalPages, perPage, perPageOptions, onPageChange, onPerPageChange, }: TableProps<T>): React.JSX.Element;

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/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";
+: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/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";