h2o-library 1.0.0

package/dist/css/src/textarea.css

@@ -0,0 +1,156 @@
+.textarea-container {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+  width: 100%;
+}
+
+.textarea-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.textarea-label {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: hsl(var(--foreground));
+  display: flex;
+  align-items: center;
+  gap: 0.2rem;
+}
+
+.textarea-clear {
+  font-size: 0.875rem;
+  color: hsl(var(--muted-100));
+  background: none;
+  border: none;
+  cursor: pointer;
+  transition: color 0.2s;
+  padding: 0;
+  outline: none;
+}
+
+.textarea-clear:focus {
+  outline: none;
+}
+
+.textarea-clear:hover {
+  color: hsl(var(--primary));
+}
+
+.textarea-wrapper {
+  position: relative;
+  display: flex;
+  width: 100%;
+  border-radius: 0.375rem;
+  border: 1.5px solid hsl(var(--muted));
+  transition: border-color 0.2s, background-color 0.2s;
+}
+
+.textarea-wrapper::after {
+  content: "";
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: 24px;
+  height: 24px;
+  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.5 15C18.6709 15 18 14.3291 18 13.5C18 12.6709 18.6709 12 19.5 12C20.3291 12 21 12.6709 21 13.5C21 14.3291 20.3291 15 19.5 15ZM19.5 9C18.6709 9 18 8.32908 18 7.5C18 6.67092 18.6709 6 19.5 6C20.3291 6 21 6.67092 21 7.5C21 8.32908 20.3291 9 19.5 9ZM13.5 21C12.6709 21 12 20.3291 12 19.5C12 18.6738 12.6709 18 13.5 18C14.3291 18 15 18.6738 15 19.5C15 20.3291 14.3291 21 13.5 21ZM13.5 15C12.6709 15 12 14.3291 12 13.5C12 12.6709 12.6709 12 13.5 12C14.3291 12 15 12.6709 15 13.5C15 14.3291 14.3291 15 13.5 15ZM7.5 21C6.67383 21 6 20.3291 6 19.5C6 18.6738 6.67383 18 7.5 18C8.32912 18 9 18.6738 9 19.5C9 20.3291 8.32912 21 7.5 21ZM19.5 18C20.3291 18 21 18.6738 21 19.5C21 20.3291 20.3291 21 19.5 21C18.6709 21 18 20.3291 18 19.5C18 18.6738 18.6709 18 19.5 18Z' fill='black'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 16px;
+  cursor: se-resize;
+  opacity: 0.5;
+  pointer-events: none;
+  transition: opacity 0.2s;
+}
+
+.textarea-wrapper:hover::after {
+  opacity: 1;
+}
+
+.textarea-wrapper:not(.textarea-disabled):not(.textarea-error):hover {
+  border-color: hsl(var(--primary));
+}
+
+.textarea-wrapper:not(.textarea-disabled):not(.textarea-error):has(
+    textarea:focus
+  ) {
+  border-color: hsl(var(--primary-300));
+}
+
+.textarea-wrapper.textarea-error {
+  border-color: hsl(var(--destructive));
+  background-color: hsl(var(--destructive) / 0.05);
+}
+
+.textarea-wrapper.textarea-error:hover,
+.textarea-wrapper.textarea-error:has(textarea:focus) {
+  border-color: hsl(var(--destructive));
+}
+
+.textarea-wrapper.textarea-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.textarea {
+  width: 100%;
+  min-height: 100px;
+  background: transparent;
+  border: none;
+  outline: none;
+  color: hsl(var(--foreground));
+  padding: 0.75rem 1rem;
+  resize: vertical;
+  appearance: none;
+  -webkit-appearance: none;
+  font-family: inherit;
+}
+
+.textarea::-webkit-resizer {
+  display: none;
+}
+
+.textarea:disabled {
+  cursor: not-allowed;
+}
+
+/* Textarea sizes */
+.textarea-sm {
+  font-size: 0.875rem;
+  min-height: 80px;
+}
+
+.textarea-md {
+  font-size: 1rem;
+  min-height: 100px;
+}
+
+.textarea-lg {
+  font-size: 1.125rem;
+  min-height: 120px;
+}
+
+.textarea-note {
+  font-size: 0.875rem;
+  color: hsl(var(--muted-100));
+  transition: color 0.2s;
+}
+
+.textarea-wrapper:not(.textarea-disabled):not(.textarea-error):hover
+  + .textarea-note {
+  color: hsl(var(--primary));
+}
+
+.textarea-wrapper:not(.textarea-disabled):not(.textarea-error):has(
+    textarea:focus
+  )
+  + .textarea-note {
+  color: hsl(var(--primary));
+}
+
+.textarea-error-message {
+  font-size: 0.875rem;
+  color: hsl(var(--destructive));
+}

package/dist/css/src/toggle.css

@@ -0,0 +1,122 @@
+.toggle-label {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+}
+
+.toggle-text {
+  color: hsl(var(--foreground));
+  max-width: 80%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.toggle-label input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.toggle-container {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+/* Toggle Switch */
+
+.toggle-switch {
+  position: relative;
+  display: inline-block;
+  width: 44px;
+  height: 24px;
+  background-color: hsl(var(--muted));
+  border-radius: 24px;
+  transition: all 0.2s;
+}
+
+.toggle-label:not(:has(input:disabled)):hover .toggle-switch {
+  background-color: hsl(var(--muted-200));
+}
+
+.toggle-switch::after {
+  content: "";
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background-color: white;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  transition: transform 0.2s;
+}
+
+/* Checked Toggle */
+
+.toggle-label input:checked + .toggle-switch {
+  background-color: hsl(var(--primary));
+}
+
+.toggle-label:not(:has(input:disabled)):hover input:checked + .toggle-switch {
+  background-color: hsl(var(--primary-200));
+}
+
+.toggle-label input:checked + .toggle-switch::after {
+  transform: translateX(20px);
+}
+
+.toggle-label input:disabled + .toggle-switch {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.toggle-card-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+
+/* Toggle Card Style */
+
+.toggle-card {
+  display: flex;
+  padding: 0.5rem 0.8rem;
+  border-radius: 0.5rem;
+  transition: background-color 0.2s;
+  gap: 12px;
+  width: 100%;
+  background-color: hsl(var(--muted-50));
+}
+
+.toggle-card:not(:has(input:disabled)):hover {
+  background-color: hsl(var(--muted));
+}
+
+.toggle-drag-handle {
+  color: hsl(var(--muted-100));
+  cursor: grab;
+}
+
+.toggle-drag-handle:active {
+  cursor: grabbing;
+}
+
+/* Disabled Toggle */
+
+.toggle-label:has(input:disabled) {
+  cursor: not-allowed;
+}
+
+.toggle-label:has(input:disabled) .toggle-switch {
+  opacity: 0.5;
+}
+
+.toggle-label:has(input:disabled) .toggle-text {
+  color: hsl(var(--muted-100));
+}

package/dist/css/src/tooltip.css

@@ -0,0 +1,103 @@
+.tooltip-container {
+  position: relative;
+  display: inline-block;
+}
+
+.tooltip-container::before {
+  content: attr(data-tooltip);
+  position: absolute;
+  background-color: hsl(var(--muted-50));
+  color: black;
+  padding: 0.5rem 1rem;
+  border-radius: 4px;
+  font-size: 0.875rem;
+  white-space: nowrap;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.2s ease;
+  z-index: 1001;
+  pointer-events: none;
+}
+
+/* Arrow */
+.tooltip-container::after {
+  content: "";
+  position: absolute;
+  border: 8px solid transparent;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.2s ease;
+  pointer-events: none;
+  z-index: 1000;
+}
+
+/* Show on hover */
+.tooltip-container:hover::before,
+.tooltip-container:hover::after {
+  opacity: 1;
+  visibility: visible;
+}
+
+/* Position: Top */
+.tooltip-container[data-position="top"]::before {
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-bottom: 8px;
+}
+
+.tooltip-container[data-position="top"]::after {
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border-top-color: hsl(var(--muted-50));
+  margin-bottom: -8px;
+}
+
+/* Position: Bottom */
+.tooltip-container[data-position="bottom"]::before {
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-top: 8px;
+}
+
+.tooltip-container[data-position="bottom"]::after {
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border-bottom-color: hsl(var(--muted-50));
+  margin-top: -8px;
+}
+
+/* Position: Left */
+.tooltip-container[data-position="left"]::before {
+  right: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  margin-right: 8px;
+}
+
+.tooltip-container[data-position="left"]::after {
+  right: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  border-left-color: hsl(var(--muted-50));
+  margin-right: -8px;
+}
+
+/* Position: Right */
+.tooltip-container[data-position="right"]::before {
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  margin-left: 8px;
+}
+
+.tooltip-container[data-position="right"]::after {
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  border-right-color: hsl(var(--muted-50));
+  margin-left: -8px;
+}

package/dist/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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>;