h2o-library 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 veltiston.ai
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,9 @@
+# H2O Library
+
+A set of components for H2O App development.
+
+## Installation
+
+```bash
+npm install h2o-library
+```

package/dist/components/index.d.ts

@@ -0,0 +1,21 @@
+export * from "./src/button";
+export * from "./src/checkbox";
+export * from "./src/icon";
+export * from "./src/radio";
+export * from "./src/tooltip";
+export * from "./src/toggle";
+export * from "./src/expandable";
+export * from "./src/content-switch";
+export * from "./src/input";
+export * from "./src/textarea";
+export * from "./src/dropdown";
+export * from "./src/side-panel";
+export * from "./src/modal";
+export * from "./src/tag";
+export * from "./src/accordion";
+export * from "./src/date-picker";
+export * from "./src/multi-select";
+export * from "./src/radio-group";
+export * from "./src/tabs";
+export * from "./src/status";
+export * from "./src/popover";

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

@@ -0,0 +1,9 @@
+import React from "react";
+export interface AccordionProps {
+    title: string;
+    isOpen: boolean;
+    setIsOpen: (isOpen: boolean) => void;
+    children: React.ReactNode;
+    className?: string;
+}
+export declare const Accordion: ({ title, isOpen, setIsOpen, children, className, }: AccordionProps) => React.JSX.Element;

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

@@ -0,0 +1,14 @@
+import { IconType, TooltipPosition } from "../../types";
+import React from "react";
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: "primary" | "secondary" | "ghost" | "danger";
+    size?: "sm" | "md" | "lg";
+    label?: string;
+    icon?: IconType;
+    iconOnly?: boolean;
+    isLoading?: boolean;
+    tooltip?: string;
+    tooltipPosition?: TooltipPosition;
+    className?: string;
+}
+export declare function Button({ variant, size, label, icon, iconOnly, isLoading, tooltip, tooltipPosition, className, disabled, children, ...props }: ButtonProps): React.JSX.Element;

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

@@ -0,0 +1,17 @@
+import React from "react";
+export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
+    label?: string;
+    className?: string;
+    isCard?: boolean;
+    isIndeterminate?: boolean;
+}
+export declare const Checkbox: React.FC<CheckboxProps>;
+export interface CheckboxGroupProps {
+    label: string;
+    children: React.ReactNode;
+    className?: string;
+    checked?: boolean;
+    indeterminate?: boolean;
+    onChange?: (checked: boolean) => void;
+}
+export declare const CheckboxGroup: React.FC<CheckboxGroupProps>;

package/dist/components/src/content-switch.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+type ContentSwitchProps = {
+    options: {
+        label: string;
+        value: string;
+    }[];
+    variant?: "primary" | "secondary";
+    className?: string;
+    optionClassName?: string;
+    selected: string;
+    onChange: (value: string) => void;
+};
+export declare const ContentSwitch: ({ options, selected, onChange, variant, className, optionClassName, }: ContentSwitchProps) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,13 @@
+import React from "react";
+interface DatePickerProps {
+    initialDate: Date;
+    onDateChange: (date: Date, view: string) => void;
+    view?: string;
+    onViewChange?: (view: string) => void;
+    icons?: Record<string, string>;
+    externalView?: string;
+    startDay?: number;
+    weekDuration?: number;
+}
+declare const DatePicker: React.FC<DatePickerProps>;
+export { DatePicker };

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

@@ -0,0 +1,19 @@
+import React from "react";
+export interface DropdownOption {
+    label: string;
+    value: string;
+    disabled?: boolean;
+}
+export interface DropdownProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "size" | "value" | "onChange"> {
+    size?: "sm" | "md" | "lg";
+    label?: string;
+    showClear?: boolean;
+    note?: string;
+    error?: string;
+    containerClassName?: string;
+    options: DropdownOption[];
+    placeholder?: string;
+    value?: string;
+    onChange?: (value: string) => void;
+}
+export declare const Dropdown: React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,8 @@
+import React from "react";
+export interface ExpandableSearchProps {
+    onSearch?: (value: string) => void;
+    placeholder?: string;
+    className?: string;
+    value?: string;
+}
+export declare const ExpandableSearch: React.FC<ExpandableSearchProps>;

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

@@ -0,0 +1,9 @@
+import React from "react";
+import { IconType, TooltipPosition } from "../../types";
+export interface IconProps extends React.SVGProps<SVGSVGElement> {
+    icon: IconType;
+    size?: number;
+    tooltip?: string;
+    tooltipPosition?: TooltipPosition;
+}
+export declare const Icon: React.FC<IconProps>;

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

@@ -0,0 +1,16 @@
+import React from "react";
+import { IconType, TooltipPosition } from "../../types";
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
+    size?: "sm" | "md" | "lg";
+    label?: string;
+    leftIcon?: IconType;
+    rightIcon?: IconType;
+    onRightIconClick?: () => void;
+    showClear?: boolean;
+    note?: string;
+    error?: string;
+    containerClassName?: string;
+    tooltip?: string;
+    tooltipPosition?: TooltipPosition;
+}
+export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,10 @@
+import React from "react";
+export interface ModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    title?: string;
+    description?: string;
+    children: React.ReactNode;
+    className?: string;
+}
+export declare const Modal: ({ isOpen, onClose, title, description, children, className, }: ModalProps) => React.ReactPortal | null;

package/dist/components/src/multi-select.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+interface Option {
+    label: string;
+    value: string;
+}
+interface MultiSelectProps {
+    options: Option[];
+    selectedOptions: Option[];
+    setSelectedOptions: (options: Option[]) => void;
+    optionsType: string;
+    maxSelectedOptions?: number;
+    toggleLabel?: string;
+    onToggle?: (checked: boolean) => void;
+}
+declare const MultiSelect: ({ options, selectedOptions, setSelectedOptions, optionsType, maxSelectedOptions, toggleLabel, onToggle, }: MultiSelectProps) => React.JSX.Element;
+export { MultiSelect };

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

@@ -0,0 +1,14 @@
+import React from "react";
+interface PopOverProps {
+    isOpen: boolean;
+    setIsOpen: (isOpen: boolean) => void;
+    children: React.ReactNode;
+}
+export declare const PopOver: ({ children, isOpen, setIsOpen }: PopOverProps) => React.JSX.Element;
+export declare const PopOverTrigger: ({ children }: {
+    children: React.ReactNode;
+}) => React.JSX.Element;
+export declare const PopOverContent: ({ children }: {
+    children: React.ReactNode;
+}) => React.ReactPortal | null;
+export {};

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

@@ -0,0 +1,17 @@
+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

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

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

@@ -0,0 +1,10 @@
+import React from "react";
+export interface SidePanelProps {
+    isOpen: boolean;
+    onClose: () => void;
+    title?: string;
+    description?: string;
+    children: React.ReactNode;
+    className?: string;
+}
+export declare const SidePanel: ({ isOpen, onClose, title, description, children, className, }: SidePanelProps) => React.ReactPortal | null;

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

@@ -0,0 +1,8 @@
+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/tabs.d.ts

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,13 @@
+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;
+}
+export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;

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

@@ -0,0 +1,8 @@
+import React from "react";
+export interface ToggleProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
+    label?: string;
+    className?: string;
+    isCard?: boolean;
+    isDraggable?: boolean;
+}
+export declare const Toggle: React.FC<ToggleProps>;

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

@@ -0,0 +1,9 @@
+import React from "react";
+import { TooltipPosition } from "../../types";
+export interface TooltipProps {
+    text: string;
+    position?: TooltipPosition;
+    className?: string;
+    children: React.ReactNode;
+}
+export declare const Tooltip: React.FC<TooltipProps>;

package/dist/css/index.css

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

package/dist/css/src/accordion.css

@@ -0,0 +1,45 @@
+.accordion {
+  width: 100%;
+  overflow: hidden;
+}
+
+.accordion-trigger {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: hsl(var(--foreground));
+  transition: all 0.2s;
+  font-weight: 500;
+}
+
+.accordion-icon {
+  color: hsl(var(--muted-200));
+  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.accordion-trigger:hover {
+  color: hsl(var(--primary));
+}
+
+.accordion-trigger:hover .accordion-icon {
+  color: hsl(var(--primary));
+}
+
+.accordion-icon-open {
+  transform: rotate(180deg);
+}
+
+.accordion-content {
+  height: 0;
+  overflow: hidden;
+  transition: height 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+  margin-top: 0.5rem;
+}
+
+.accordion-content-inner {
+  background-color: hsl(var(--background));
+}

package/dist/css/src/button.css

@@ -0,0 +1,195 @@
+.button {
+  border-radius: var(--radius-md);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s;
+  cursor: pointer;
+  min-width: fit-content;
+}
+
+.button:focus {
+  outline: none;
+}
+
+.button:disabled {
+  cursor: not-allowed;
+}
+
+/* Variants */
+.button--primary {
+  background-color: hsl(var(--primary));
+  color: white;
+}
+
+.button--primary:hover:not(:disabled) {
+  background-color: hsl(var(--primary-200));
+}
+
+.button--primary:active:not(:disabled) {
+  background-color: hsl(var(--primary-300));
+}
+
+.button--primary:disabled {
+  background-color: hsl(var(--primary-disabled));
+}
+
+.button--secondary {
+  background-color: transparent;
+  border: 1px solid hsl(var(--muted));
+  color: hsl(var(--primary));
+}
+
+.button--secondary:hover:not(:disabled) {
+  border-color: hsl(var(--primary-200));
+  color: hsl(var(--primary-200));
+}
+
+.button--secondary:active:not(:disabled) {
+  border-color: hsl(var(--primary-300));
+  color: hsl(var(--primary-300));
+}
+
+.button--secondary:disabled {
+  color: hsl(var(--primary-disabled));
+  border: none;
+}
+
+.button--ghost {
+  background-color: transparent;
+  color: hsl(var(--primary));
+}
+
+.button--ghost:hover:not(:disabled) {
+  color: hsl(var(--primary-200));
+}
+
+.button--ghost:active:not(:disabled) {
+  color: hsl(var(--primary-300));
+}
+
+.button--ghost:disabled {
+  opacity: 0.5;
+  color: hsl(var(--primary-disabled));
+}
+
+.button--danger {
+  background-color: hsl(var(--destructive));
+  color: white;
+}
+
+.button--danger:hover:not(:disabled) {
+  background-color: hsl(var(--destructive-200));
+}
+
+.button--danger:active:not(:disabled) {
+  background-color: hsl(var(--destructive-300));
+}
+
+.button--danger:disabled {
+  opacity: 0.5;
+}
+
+/* Sizes */
+.button--sm {
+  font-size: 0.875rem;
+  height: 2rem;
+}
+
+.button--sm.button--icon-only {
+  width: 2rem;
+  padding: 0;
+}
+
+.button--sm:not(.button--icon-only) {
+  padding: 0 0.75rem;
+}
+
+.button--md {
+  font-size: 1rem;
+  height: 2.5rem;
+}
+
+.button--md.button--icon-only {
+  width: 2.5rem;
+  padding: 0;
+}
+
+.button--md:not(.button--icon-only) {
+  padding: 0 1rem;
+}
+
+.button--lg {
+  font-size: 1.125rem;
+  height: 3rem;
+}
+
+.button--lg.button--icon-only {
+  width: 3rem;
+  padding: 0;
+}
+
+.button--lg:not(.button--icon-only) {
+  padding: 0 1.5rem;
+}
+
+/* Loading state */
+.button--loading {
+  opacity: 0.7;
+  cursor: not-allowed;
+}
+
+.button--loading .button__content {
+  min-width: fit-content;
+  white-space: nowrap;
+}
+
+/* Content layout */
+.button__content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  min-width: fit-content;
+}
+
+/* Loading spinner */
+.button__spinner {
+  animation: spin 1s linear infinite;
+  width: 1.25rem;
+  height: 1.25rem;
+  flex-shrink: 0;
+}
+
+.button__spinner-circle {
+  opacity: 0.25;
+}
+
+.button__spinner-path {
+  opacity: 0.75;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Icon sizes */
+.button--sm .button__icon {
+  width: 20px;
+  height: 20px;
+}
+
+.button--md .button__icon {
+  width: 24px;
+  height: 24px;
+}
+
+.button--lg .button__icon {
+  width: 28px;
+  height: 28px;
+}

package/dist/css/src/calendar.css

@@ -0,0 +1,16 @@
+.calendar-day-today {
+  color: hsl(var(--primary));
+  font-weight: 500;
+}
+
+.calendar-day-today::before {
+  content: "";
+  position: absolute;
+  width: 4px;
+  height: 4px;
+  bottom: 4px;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: hsl(var(--primary));
+  border-radius: 50%;
+}