h2o-library 1.0.0 → 1.1.0

package/README.md

@@ -6,4 +6,32 @@ A set of components for H2O App development.
 
 ```bash
 npm install h2o-library
+
+# or
+
+yarn add h2o-library
+```
+
+## Usage
+
+import css files into your project
+
+trough css file
+
+```css
+@import "h2o-library/dist/styles/index.css";
 ```
+
+trough js/ts file
+
+```tsx
+import "h2o-library/dist/styles/index.css";
+```
+
+and use components like so
+
+```tsx
+import { Button } from "h2o-library";
+```
+
+refer to the [docs](https://h2o-library.vercel.app) for more information

package/dist/components/index.d.ts

@@ -19,3 +19,6 @@ 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";

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

@@ -1,7 +1,7 @@
 import { IconType, TooltipPosition } from "../../types";
 import React from "react";
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    variant?: "primary" | "secondary" | "ghost" | "danger";
+    variant?: "primary" | "secondary" | "ghost" | "danger" | "warning" | "success";
     size?: "sm" | "md" | "lg";
     label?: string;
     icon?: IconType;

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

@@ -0,0 +1,14 @@
+import React from "react";
+export interface PaginationProps {
+    currentPage: number;
+    totalPages: number;
+    perPage: number;
+    perPageOptions?: {
+        label: string;
+        value: string;
+    }[];
+    onPageChange: (page: number) => void;
+    onPerPageChange: (perPage: string) => void;
+    className?: string;
+}
+export declare const Pagination: React.FC<PaginationProps>;

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

@@ -0,0 +1,27 @@
+import React from "react";
+export type SortDirection = "asc" | "desc" | null;
+export interface TableColumn<T> {
+    key: string;
+    label: string;
+    sortable?: boolean;
+    render?: (value: any, row: T) => React.ReactNode;
+}
+export interface TableProps<T extends Record<string, any>> {
+    columns: TableColumn<T>[];
+    data: T[];
+    isLoading?: boolean;
+    className?: string;
+    sortKey?: string;
+    sortDirection?: SortDirection;
+    onSort?: (key: string, direction: SortDirection) => void;
+    currentPage?: number;
+    totalPages?: number;
+    perPage?: number;
+    perPageOptions?: {
+        label: string;
+        value: string;
+    }[];
+    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;

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

@@ -0,0 +1,20 @@
+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/css/index.css

@@ -1 +1 @@
-:root{--background:0 0% 100%;--foreground:160 10% 10%;--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%;--warn-bg:45 100% 84%;--warn:45 100% 61%;--warn-200:45 100% 45%;--warn-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";
+:root{--background:0 0% 100%;--foreground:160 10% 10%;--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";

package/dist/css/src/button.css

@@ -90,6 +90,40 @@
   opacity: 0.5;
 }
 
+.button--warning {
+  background-color: hsl(var(--warning));
+  color: white;
+}
+
+.button--warning:hover:not(:disabled) {
+  background-color: hsl(var(--warning-200));
+}
+
+.button--warning:active:not(:disabled) {
+  background-color: hsl(var(--warning-300));
+}
+
+.button--warning:disabled {
+  opacity: 0.5;
+}
+
+.button--success {
+  background-color: hsl(var(--success));
+  color: white;
+}
+
+.button--success:hover:not(:disabled) {
+  background-color: hsl(var(--success-200));
+}
+
+.button--success:active:not(:disabled) {
+  background-color: hsl(var(--success-300));
+}
+
+.button--success:disabled {
+  opacity: 0.5;
+}
+
 /* Sizes */
 .button--sm {
   font-size: 0.875rem;

package/dist/css/src/index.css

@@ -14,10 +14,10 @@
   --success-200: 130 76% 26%;
   --success-300: 130 100% 18%;
 
-  --warn-bg: 45 100% 84%;
-  --warn: 45 100% 61%;
-  --warn-200: 45 100% 45%;
-  --warn-300: 45 100% 32%;
+  --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%;
@@ -54,3 +54,6 @@
 @import "./src/textarea.css";
 @import "./src/toggle.css";
 @import "./src/tooltip.css";
+@import "./src/pagination.css";
+@import "./src/table.css";
+@import "./src/toast.css";

package/dist/css/src/pagination.css

@@ -0,0 +1,80 @@
+.pagination {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.pagination-per-page {
+  min-width: 140px;
+}
+
+.pagination-controls {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.pagination-arrow {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem;
+  border: none;
+  background: none;
+  color: hsl(var(--foreground));
+  cursor: pointer;
+  border-radius: var(--radius-md);
+  position: relative;
+}
+
+.pagination-arrow:hover:not(:disabled) {
+  background-color: hsl(var(--muted-25));
+}
+
+.pagination-arrow:disabled {
+  color: hsl(var(--muted));
+  cursor: not-allowed;
+}
+
+.pagination-arrow .second-chevron {
+  position: absolute;
+  left: 8px;
+}
+
+.pagination-pages {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.pagination-page {
+  min-width: 2rem;
+  height: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: none;
+  border-radius: var(--radius-md);
+  color: hsl(var(--foreground));
+  cursor: pointer;
+  font-size: 0.875rem;
+}
+
+.pagination-page:hover:not(:disabled) {
+  background-color: hsl(var(--muted-25));
+}
+
+.pagination-page:disabled {
+  cursor: default;
+}
+
+.pagination-page-active {
+  background-color: hsl(var(--primary));
+  color: white;
+}
+
+.pagination-page-active:hover {
+  background-color: hsl(var(--primary-200)) !important;
+}

package/dist/css/src/table.css

@@ -0,0 +1,104 @@
+.table-container {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.table-wrapper {
+  width: 100%;
+  overflow-x: auto;
+  border: 1px solid hsl(var(--muted-50));
+  border-radius: var(--radius-md);
+}
+
+.table {
+  width: 100%;
+  border-collapse: collapse;
+  text-align: left;
+  font-size: 0.875rem;
+}
+
+.table th {
+  background-color: hsl(var(--muted-25));
+  font-weight: 600;
+  padding: 0.75rem 1rem;
+  color: hsl(var(--foreground));
+  border-bottom: 1px solid hsl(var(--muted-50));
+  white-space: nowrap;
+}
+
+.table th.sortable {
+  cursor: pointer;
+}
+
+.table th.sortable:hover {
+  background-color: hsl(var(--muted-50));
+}
+
+.table-header-content {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.table-sort-icon {
+  display: flex;
+  align-items: center;
+  color: hsl(var(--muted));
+}
+
+.table-sort-icon.active {
+  color: hsl(var(--foreground));
+}
+
+.table-sort-icon .default {
+  opacity: 0.5;
+}
+
+.table td {
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid hsl(var(--muted-50));
+  color: hsl(var(--foreground));
+}
+
+.table tr:last-child td {
+  border-bottom: none;
+}
+
+.table tbody tr:hover {
+  background-color: hsl(var(--muted-25));
+}
+
+.table-loading,
+.table-empty {
+  text-align: center;
+  color: hsl(var(--muted));
+  padding: 2rem !important;
+}
+
+.table-loading {
+  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);
+  }
+}
+
+.table-pagination {
+  padding: 0 0.5rem;
+}

package/dist/css/src/toast.css

@@ -0,0 +1,97 @@
+.toast-container {
+  position: fixed;
+  bottom: 1rem;
+  right: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  z-index: 50;
+  max-width: 420px;
+  width: calc(100% - 2rem);
+}
+
+.toast {
+  display: flex;
+  gap: 0.75rem;
+  padding: 1rem;
+  border-radius: var(--radius-md);
+  background: white;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  animation: slideIn 0.2s ease-out;
+}
+
+@keyframes slideIn {
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+.toast-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.toast-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 0.5rem;
+}
+
+.toast-title {
+  margin: 0;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: hsl(var(--foreground));
+}
+
+.toast-description {
+  margin: 0.25rem 0 0;
+  font-size: 0.875rem;
+  color: hsl(var(--muted-200));
+}
+
+.toast-close {
+  padding: 0;
+  background: none;
+  border: none;
+  color: hsl(var(--muted));
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.toast-close:hover {
+  color: hsl(var(--foreground));
+}
+
+.toast-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  margin-top: 0.75rem;
+}
+
+/* Variant styles */
+
+.toast-info .toast-icon {
+  color: hsl(var(--primary));
+}
+
+.toast-error .toast-icon {
+  color: hsl(var(--destructive));
+}
+
+.toast-warning .toast-icon {
+  color: hsl(var(--warning));
+}
+
+.toast-success .toast-icon {
+  color: hsl(var(--success));
+}

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

@@ -19,3 +19,6 @@ 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";

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

@@ -1,7 +1,7 @@
 import { IconType, TooltipPosition } from "../../types";
 import React from "react";
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    variant?: "primary" | "secondary" | "ghost" | "danger";
+    variant?: "primary" | "secondary" | "ghost" | "danger" | "warning" | "success";
     size?: "sm" | "md" | "lg";
     label?: string;
     icon?: IconType;

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

@@ -0,0 +1,14 @@
+import React from "react";
+export interface PaginationProps {
+    currentPage: number;
+    totalPages: number;
+    perPage: number;
+    perPageOptions?: {
+        label: string;
+        value: string;
+    }[];
+    onPageChange: (page: number) => void;
+    onPerPageChange: (perPage: string) => void;
+    className?: string;
+}
+export declare const Pagination: React.FC<PaginationProps>;

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

@@ -0,0 +1,27 @@
+import React from "react";
+export type SortDirection = "asc" | "desc" | null;
+export interface TableColumn<T> {
+    key: string;
+    label: string;
+    sortable?: boolean;
+    render?: (value: any, row: T) => React.ReactNode;
+}
+export interface TableProps<T extends Record<string, any>> {
+    columns: TableColumn<T>[];
+    data: T[];
+    isLoading?: boolean;
+    className?: string;
+    sortKey?: string;
+    sortDirection?: SortDirection;
+    onSort?: (key: string, direction: SortDirection) => void;
+    currentPage?: number;
+    totalPages?: number;
+    perPage?: number;
+    perPageOptions?: {
+        label: string;
+        value: string;
+    }[];
+    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;

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

@@ -0,0 +1,20 @@
+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/esm/css/index.css

@@ -1 +1 @@
-:root{--background:0 0% 100%;--foreground:160 10% 10%;--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%;--warn-bg:45 100% 84%;--warn:45 100% 61%;--warn-200:45 100% 45%;--warn-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";
+:root{--background:0 0% 100%;--foreground:160 10% 10%;--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";