pmg-ui-kit 0.0.8

package/README.md

@@ -0,0 +1,47 @@
+# Introduction 
+
+This project provides a collection of reusable React components and a curated set of icons, bundled together for easy integration across various projects. The goal is to streamline development by offering ready-to-use, customizable UI elements that maintain consistency and save time when building applications.
+
+# Requirements
+
+Make sure you have:
+- Tailwind v3 installed (3.4.17 is latest version)
+- Added "./node_modules/pmg-mellon-components/**/*.{js,ts,jsx,tsx}" entry into content array in tailwind.config.js file
+
+# Installation process
+
+To install dependecies run bellow command
+```bash
+npm i
+```
+
+To add package into your project use bellow command
+
+```bash
+npm install pmg-mellon-components
+```
+
+# Releasing new version
+
+1. Update the version number in package.json file
+2. Run bellow command to build new version in dist folder
+
+```bash
+npm run build
+```
+
+3. Run bellow command to login into correct NPMjs.com account
+
+```bash
+npm login
+```
+
+4. Run bellow command to publish new version of package
+
+```bash
+npm publish
+```
+
+# Latest releases
+
+All detailed information about versions are included into CHANGELOG.md file

package/dist/components/Alert.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from "react";
+type AlertType = "info" | "success" | "warning" | "danger" | "dark";
+type AlertProps = {
+    type?: AlertType;
+    children?: ReactNode;
+    className?: string;
+};
+export declare const Alert: ({ type, children, className }: AlertProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Alert.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+const alertColorsMapping = {
+    info: "indigo",
+    success: "green",
+    warning: "yellow",
+    danger: "red",
+    dark: "gray",
+};
+export const Alert = ({ type = "info", children, className }) => {
+    const colorClasses = (type) => {
+        const matchColor = alertColorsMapping[type];
+        return `text-${matchColor}-800 bg-${matchColor}-100 dark:text-${matchColor}-400 border-${matchColor}-300`;
+    };
+    return (_jsx(_Fragment, { children: _jsx("div", { className: `p-4 mb-4 text-sm rounded-md dark:bg-gray-800 border-t-4  ${colorClasses(type)} ${className}`, role: "alert", children: _jsx("div", { className: "text-sm font-medium", children: children }) }) }));
+};

package/dist/components/Button.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+type ButtonProps = {
+    type?: "b-link-imitation" | "b-default" | "b-primary" | "b-alert" | "b-success" | "b-warning";
+    htmlType?: "submit" | "reset" | "button";
+    text?: string | React.ReactNode;
+    linkTo?: string;
+    startIcon?: string | React.ReactElement;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void | Promise<void>;
+    className?: string;
+    size?: "b-xsm" | "b-sm" | "b-base" | "b-lg" | "b-xlg";
+    disabled?: boolean;
+    dataTooltipTarget?: string;
+    outlined?: boolean;
+    pillsType?: boolean;
+    iconButton?: boolean;
+    noBorder?: boolean;
+    pending?: boolean;
+};
+export declare const Button: ({ text, type, htmlType, linkTo, onClick, className, size, startIcon, disabled, dataTooltipTarget, outlined, pillsType, iconButton, noBorder, pending, }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Button.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
+import { AnimatedLoaderIcon } from "../icons/AnimatedLoaderIcon";
+export const Button = ({ text, type = "b-default", htmlType = "button", linkTo = "", onClick, className, size = "b-base", startIcon, disabled = false, dataTooltipTarget, outlined = false, pillsType = false, iconButton = false, noBorder = false, pending = false, }) => {
+    const getButtonSize = (size, iconButton) => {
+        const iconButtonPaddings = "px-1 py-1";
+        switch (size) {
+            case "b-xsm":
+                return `${iconButton ? iconButtonPaddings : "px-3 py-1.5"} text-xs`;
+            case "b-sm":
+                return `${iconButton ? iconButtonPaddings : "px-3 py-2"} text-sm`;
+            case "b-base":
+                return `${iconButton ? iconButtonPaddings : "px-5 py-2.5"} text-sm`;
+            case "b-lg":
+                return `${iconButton ? iconButtonPaddings : "px-5 py-3"} text-base`;
+            case "b-xlg":
+                return `${iconButton ? iconButtonPaddings : "px-6 py-3.5"} text-base`;
+        }
+    };
+    const disabledStyles = "disabled:bg-gray-400 disabled:cursor-not-allowed";
+    const iconButtonStyles = "w-fit";
+    const borderStyles = (noBorder = false, color) => noBorder ? "" : `border border-${color}-500`;
+    const pendingStyles = "pointer-events-none";
+    const getButtonTypeStyles = (type) => {
+        switch (type) {
+            case "b-alert":
+                return "text-white bg-red-500 hover:bg-red-600";
+            case "b-warning":
+                return "text-white bg-yellow-400 hover:bg-yellow-500";
+            case "b-success":
+                return "text-white bg-green-400 hover:bg-green-500";
+            case "b-primary":
+                return "text-white bg-blue-700 hover:bg-blue-800";
+            case "b-link-imitation":
+                return "text-blue-500 hover:text-blue-700";
+            case "b-default":
+                return "text-gray-900 hover:bg-gray-100";
+        }
+    };
+    const getButtonFillStyles = (type) => {
+        switch (type) {
+            case "b-alert":
+                return "#F56565";
+            case "b-warning":
+                return "#ED8936";
+            case "b-success":
+                return "#48BB78";
+            case "b-primary":
+                return "#2B6CB0";
+            case "b-link-imitation":
+                return "#4299E1";
+            case "b-default":
+                return "#1A202C";
+        }
+    };
+    const getButtonOutlinedStyles = (type, noBorder) => {
+        switch (type) {
+            case "b-alert":
+                return `text-red-500 ${borderStyles(noBorder, "red")} hover:bg-red-500 hover:text-white`;
+            case "b-warning":
+                return `text-yellow-400 ${borderStyles(noBorder, "yellow")} hover:bg-yellow-400 hover:text-white`;
+            case "b-success":
+                return `text-green-400 ${borderStyles(noBorder, "green")} hover:bg-green-400 hover:text-white`;
+            case "b-primary":
+                return `text-blue-700 ${borderStyles(noBorder, "blue")} hover:bg-blue-700 hover:text-white`;
+        }
+    };
+    const commonButtonProps = {
+        "data-tooltip-target": dataTooltipTarget,
+        className: classNames("focus:outline-none font-medium mb-2 flex gap-1 justify-center items-center", getButtonSize(size, iconButton), disabledStyles, outlined
+            ? getButtonOutlinedStyles(type, noBorder)
+            : getButtonTypeStyles(type), pillsType ? "rounded-full" : "rounded-lg", iconButton ? iconButtonStyles : "", pending ? pendingStyles : "", className),
+    };
+    const buttonBody = (_jsxs(_Fragment, { children: [pending ? (_jsx(AnimatedLoaderIcon, { fill: getButtonFillStyles(type), className: text ? "!w-4 !h-4" : "!w-8 !h-8" })) : (startIcon), text] }));
+    const button = (_jsx("button", { ...commonButtonProps, type: htmlType, onClick: onClick, disabled: disabled, children: buttonBody }));
+    return button;
+};

package/dist/components/Checkbox.d.ts

@@ -0,0 +1,9 @@
+type CheckboxProps = {
+    className?: string;
+    label?: string | React.ReactNode;
+    disabled?: boolean;
+    checked?: boolean;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+};
+export declare const Checkbox: ({ className, label, disabled, checked, onChange, }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Checkbox.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
+import { Text } from "./Text";
+export const Checkbox = ({ className, label, disabled = false, checked, onChange, }) => {
+    return (_jsxs("label", { className: classNames("flex items-center", className), children: [_jsx("input", { onChange: onChange, disabled: disabled, id: "default-checkbox", type: "checkbox", value: "", checked: checked, className: "w-4 h-4 disabled:bg-gray-400 disabled:hover:bg-gray-400 disabled:hover:cursor-not-allowed text-blue-600 bg-gray-100 border-gray-300 rounded dark:ring-offset-gray-800 dark:bg-gray-700 dark:border-gray-600 focus:ring-transparent" }), label && (_jsx(Text, { className: "ms-2 text-sm text-gray-900 fond-bold dark:text-gray-300", children: label }))] }));
+};

package/dist/components/ColumnsView.d.ts

@@ -0,0 +1,8 @@
+type ColumnsViewProps = {
+    columnsAmount: number;
+    columnsGap?: number;
+    className?: string;
+    children?: React.ReactNode;
+};
+declare const ColumnsView: ({ children, columnsAmount, className, columnsGap, }: ColumnsViewProps) => import("react/jsx-runtime").JSX.Element;
+export default ColumnsView;

package/dist/components/ColumnsView.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+const ColumnsView = ({ children, columnsAmount, className, columnsGap = 6, }) => {
+    return (_jsx("div", { className: classNames(`grid md:grid-cols-${columnsAmount} md:gap-${columnsGap} mt-4`, className), children: children }));
+};
+export default ColumnsView;

package/dist/components/Header.d.ts

@@ -0,0 +1,10 @@
+type HeaderProps = {
+    children?: React.ReactNode;
+    fontWeight?: "bold" | "normal";
+    centerChildren?: React.ReactNode;
+    rightChildren?: React.ReactNode;
+    color?: string;
+    className?: string;
+};
+export declare const Header: ({ children, fontWeight, centerChildren, rightChildren, color, className, }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Header.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
+export const Header = ({ children, fontWeight, centerChildren, rightChildren, color, className, }) => {
+    const colorStyles = color ? `text-${color}-500` : "";
+    return (_jsxs("div", { className: classNames("flex flex-row justify-between", colorStyles, className), children: [_jsx("h3", { className: `font-${fontWeight}`, children: children }), centerChildren && centerChildren, rightChildren && rightChildren] }));
+};

package/dist/components/Input.d.ts

@@ -0,0 +1,23 @@
+type InputProps = {
+    type?: string;
+    id?: string;
+    className?: string;
+    onClick?: (e: React.MouseEvent<HTMLInputElement>) => void;
+    onValidationChange?: (isValid: boolean) => void;
+    onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void | Promise<void>;
+    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void | Promise<void>;
+    placeholder?: string;
+    required?: boolean;
+    value?: string | number | undefined;
+    handleOnChange?: (value: string) => void;
+    disabled?: boolean;
+    rightSpanIcon?: React.JSX.Element;
+    bottomHint?: string | React.ReactNode;
+    wrapperClassNames?: string;
+    pattern?: RegExp;
+    name?: string;
+    removeWhitespacesOnChange?: boolean;
+    hideNumberArrows?: boolean;
+};
+export declare const Input: ({ type, id, placeholder, required, value, handleOnChange, className, disabled, rightSpanIcon, bottomHint, onClick, onFocus, onBlur, onValidationChange, wrapperClassNames, pattern, name, hideNumberArrows, removeWhitespacesOnChange, }: InputProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Input.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
+import { Text } from "./Text";
+export const Input = ({ type = "text", id = "", placeholder = "", required = false, value, handleOnChange, className, disabled = false, rightSpanIcon, bottomHint, onClick, onFocus, onBlur, onValidationChange, wrapperClassNames, pattern, name, hideNumberArrows = true, removeWhitespacesOnChange = false, }) => {
+    const disabledClasses = "disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none";
+    const hideNumberArrowsClasses = "[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none";
+    return (_jsxs("div", { className: classNames("flex flex-col", wrapperClassNames), children: [_jsxs("div", { className: "flex flex-row", children: [_jsx("input", { pattern: pattern ? pattern?.source : undefined, type: type, step: type === "number" ? "0.01" : undefined, id: id, onClick: onClick, onFocus: onFocus, onBlur: onBlur, value: value || "", onChange: (event) => {
+                            const isValid = pattern ? pattern.test(event.target.value) : true;
+                            const newValue = removeWhitespacesOnChange
+                                ? event.target.value.replace(/\s/g, "")
+                                : event.target.value;
+                            onValidationChange && onValidationChange(isValid);
+                            handleOnChange && handleOnChange(newValue);
+                        }, disabled: disabled, className: classNames("bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-0 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-0 dark:focus:border-blue-500", disabled && disabledClasses, rightSpanIcon && "rounded-r-none", hideNumberArrows && hideNumberArrowsClasses, className), placeholder: placeholder, required: required, name: name }), rightSpanIcon && (_jsx("span", { className: "inline-flex items-center px-3 text-sm text-gray-900 bg-gray-200 border rounded-e-0 border-gray-300 rounded-e-md dark:bg-gray-600 dark:text-gray-400 dark:border-gray-600", children: rightSpanIcon }))] }), bottomHint && (_jsx(Text, { size: "sm", className: "mt-1 text-gray-600", children: bottomHint }))] }));
+};

package/dist/components/InputTypeFile.d.ts

@@ -0,0 +1,11 @@
+type InputTypeFileProps = {
+    accept: string[];
+    placeholder?: string;
+    className?: string;
+    handleFileUpload?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    name?: string;
+    disableValuePreview?: boolean;
+    multiple?: boolean;
+};
+export declare const InputTypeFile: ({ accept, placeholder, className, handleFileUpload, name, disableValuePreview, multiple, }: InputTypeFileProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/InputTypeFile.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+export const InputTypeFile = ({ accept, placeholder, className, handleFileUpload, name, disableValuePreview, multiple, }) => {
+    return (_jsx("input", { className: classNames("block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400", className), onChange: handleFileUpload, id: "file_input", type: "file", accept: accept.join(","), placeholder: placeholder, name: name, value: disableValuePreview ? "" : undefined, multiple: multiple }));
+};

package/dist/components/List.d.ts

@@ -0,0 +1,8 @@
+type ListProps = {
+    className?: string;
+    isOrdered?: boolean;
+    label?: React.ReactNode;
+    options: React.ReactNode[];
+};
+export declare const List: ({ className, isOrdered, label, options, }: ListProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/List.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
+import { Text } from "./Text";
+export const List = ({ className, isOrdered = false, label, options, }) => {
+    return (_jsxs(_Fragment, { children: [label && _jsx(Text, { className: classNames("mt-2", className), children: label }), isOrdered ? (_jsx("ol", { className: "ml-4 mt-2 space-y-1  list-decimal list-inside dark:text-gray-400", children: options.map((option, index) => (_jsx("li", { children: option }, index))) })) : (_jsx("ul", { className: "ps-5 mt-2 space-y-1 list-disc list-inside", children: options.map((option, index) => (_jsx("li", { children: option }, index))) }))] }));
+};

package/dist/components/RadioButton.d.ts

@@ -0,0 +1,13 @@
+import { type ReactNode } from "react";
+type RadioButtonProps = {
+    checked?: boolean;
+    className?: string;
+    labelClassName?: string;
+    handleOnClick?: (value: string) => void;
+    value: string;
+    label: ReactNode;
+    name: string;
+    required?: boolean;
+};
+export declare const RadioButton: ({ checked, handleOnClick, value, label, name, required, }: RadioButtonProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/RadioButton.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import classNames from "classnames";
+import { Text } from "./Text";
+export const RadioButton = ({ checked = false, handleOnClick, value, label, name, required, }) => {
+    const multilineLabel = React.isValidElement(label) &&
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+        React.Children.count(label.props.children) > 1;
+    return (_jsxs("label", { className: classNames("flex", multilineLabel ? "items-start" : "items-center"), children: [_jsx("input", { type: "radio", required: required, value: value, name: name, checked: checked || false, onChange: () => handleOnClick && handleOnClick(value), className: classNames("w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600", multilineLabel ? "mt-2" : "") }), _jsx(Text, { className: classNames("ml-2 mt-0", multilineLabel ? "h-auto" : "h-8"), size: "lg", children: label })] }));
+};

package/dist/components/ScrollToTopButton.d.ts

@@ -0,0 +1 @@
+export declare const ScrollToTopButton: () => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/ScrollToTopButton.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { Button } from "./Button";
+import { ArrowUpCircleIcon } from "../icons/ArrowUpCircleIcon";
+import useScrollToTop from "../hooks/useScrollToTop";
+export const ScrollToTopButton = () => {
+    const elementRef = useRef(null);
+    useEffect(() => {
+        elementRef.current = document.getElementById("layoutContentWrapper");
+    }, []);
+    const { isVisible, scrollToTop } = useScrollToTop(elementRef);
+    return isVisible ? (_jsx(Button, { type: "b-primary", onClick: scrollToTop, className: "fixed bottom-6 right-10 z-50", startIcon: _jsx(ArrowUpCircleIcon, {}) })) : null;
+};

package/dist/components/SearchInput.d.ts

@@ -0,0 +1,8 @@
+type SearchInputProps = {
+    className?: string;
+    placeholder?: string;
+    value?: string;
+    handleOnChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+};
+export declare const SearchInput: ({ className, placeholder, value, handleOnChange, }: SearchInputProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/SearchInput.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
+export const SearchInput = ({ className, placeholder = "Search", value, handleOnChange, }) => {
+    return (_jsxs("form", { children: [_jsx("label", { className: "mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white", children: "Search" }), _jsxs("div", { className: classNames("relative", className), children: [_jsx("div", { className: "absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none", children: _jsx("svg", { className: "w-4 h-4 text-gray-500 dark:text-gray-400", "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 20 20", children: _jsx("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z" }) }) }), _jsx("input", { type: "search", id: "default-search", className: "block w-full p-2 ps-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500", placeholder: placeholder, required: true, value: value, onChange: handleOnChange })] })] }));
+};

package/dist/components/Select.d.ts

@@ -0,0 +1,16 @@
+export type SelectOption = {
+    label: string;
+    value: string;
+};
+type SelectProps = {
+    options: SelectOption[];
+    value?: string;
+    handleOnChange?: (value: SelectOption) => void;
+    name?: string;
+    required?: boolean;
+    useEmptyOption?: boolean;
+    disabled?: boolean;
+};
+export declare const emptyOption: SelectOption;
+export declare const Select: ({ options, value, handleOnChange, name, required, useEmptyOption, disabled, }: SelectProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Select.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const emptyOption = {
+    label: "---",
+    value: "",
+};
+export const Select = ({ options, value, handleOnChange, name, required, useEmptyOption = false, disabled = false, }) => {
+    const selectOptions = [...options];
+    if (useEmptyOption && !disabled) {
+        selectOptions.unshift(emptyOption);
+    }
+    return (_jsx("select", { name: name, required: required, disabled: disabled, value: value, onClick: (e) => e.currentTarget.classList.remove("border-red-500"), onChange: (e) => {
+            const selectedOption = selectOptions.find((option) => option.value === e.target.value);
+            handleOnChange && selectedOption && handleOnChange(selectedOption);
+        }, className: "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500", children: selectOptions.map((option) => (_jsx("option", { value: option.value, children: option.label }, option.value))) }));
+};

package/dist/components/Subheader.d.ts

@@ -0,0 +1,11 @@
+type SubHeaderProps = {
+    children: React.ReactNode;
+    fontWeight?: "bold" | "normal";
+    centerChildren?: React.ReactNode;
+    rightChildren?: React.ReactNode;
+    className?: string;
+    color?: string;
+    colorBrightness?: "800" | "600" | "500" | "400" | "200";
+};
+export declare const SubHeader: ({ children, fontWeight, centerChildren, rightChildren, className, color, colorBrightness, }: SubHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Subheader.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
+export const SubHeader = ({ children, fontWeight, centerChildren, rightChildren, className, color, colorBrightness = "500", }) => {
+    return (_jsxs("div", { className: classNames("flex flex-row justify-between", className), children: [_jsx("span", { className: classNames(`font-${fontWeight}`, `text-${color}-${colorBrightness}`), children: children }), centerChildren && centerChildren, rightChildren && rightChildren] }));
+};

package/dist/components/Text.d.ts

@@ -0,0 +1,9 @@
+type TextProps = {
+    children: React.ReactNode;
+    className?: string;
+    size?: "sm" | "base" | "lg" | "xl" | "2xl" | "3xl" | "4xl";
+    fontWeight?: "bold" | "normal";
+    grayText?: boolean;
+};
+export declare const Text: ({ children, size, className, fontWeight, grayText, }: TextProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Text.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Text = ({ children, size = "base", className, fontWeight = "normal", grayText, }) => {
+    const grayTextClasses = grayText ? "text-gray-600" : "";
+    return (_jsx("span", { className: `inline-block text-${size} font-${fontWeight} ${className} ${grayTextClasses}`, children: children }));
+};

package/dist/hooks/useScrollToTop.d.ts

@@ -0,0 +1,6 @@
+import { type RefObject } from "react";
+declare const useScrollToTopButton: (elementRef: RefObject<HTMLElement | null>) => {
+    isVisible: boolean;
+    scrollToTop: () => void;
+};
+export default useScrollToTopButton;

package/dist/hooks/useScrollToTop.js

@@ -0,0 +1,28 @@
+import { useEffect, useState } from "react";
+const SCROLL_POSITION_THRESHOLD = 100;
+const useScrollToTopButton = (elementRef) => {
+    const [isVisible, setIsVisible] = useState(false);
+    useEffect(() => {
+        const toggleVisibility = () => {
+            if (elementRef.current &&
+                elementRef.current.scrollTop > SCROLL_POSITION_THRESHOLD) {
+                setIsVisible(true);
+            }
+            else {
+                setIsVisible(false);
+            }
+        };
+        elementRef.current?.addEventListener("scroll", toggleVisibility);
+        return () => 
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        elementRef.current?.removeEventListener("scroll", toggleVisibility);
+    }, [elementRef]);
+    const scrollToTop = () => {
+        elementRef.current?.scrollTo({
+            top: 0,
+            behavior: "smooth",
+        });
+    };
+    return { isVisible, scrollToTop };
+};
+export default useScrollToTopButton;

package/dist/icons/AlertIcon.d.ts

@@ -0,0 +1,7 @@
+type AlertIconProps = {
+    className?: string;
+    onClick?: () => void;
+    fill: string;
+};
+export declare const AlertIcon: ({ className, onClick, fill }: AlertIconProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/icons/AlertIcon.js

@@ -0,0 +1,2 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const AlertIcon = ({ className, onClick, fill }) => (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: fill || "currentColor", className: `w-6 h-6 inline ${className}`, onClick: onClick, children: [_jsx("path", { d: "M5.85 3.5a.75.75 0 0 0-1.117-1 9.719 9.719 0 0 0-2.348 4.876.75.75 0 0 0 1.479.248A8.219 8.219 0 0 1 5.85 3.5ZM19.267 2.5a.75.75 0 1 0-1.118 1 8.22 8.22 0 0 1 1.987 4.124.75.75 0 0 0 1.48-.248A9.72 9.72 0 0 0 19.266 2.5Z" }), _jsx("path", { fillRule: "evenodd", d: "M12 2.25A6.75 6.75 0 0 0 5.25 9v.75a8.217 8.217 0 0 1-2.119 5.52.75.75 0 0 0 .298 1.206c1.544.57 3.16.99 4.831 1.243a3.75 3.75 0 1 0 7.48 0 24.583 24.583 0 0 0 4.83-1.244.75.75 0 0 0 .298-1.205 8.217 8.217 0 0 1-2.118-5.52V9A6.75 6.75 0 0 0 12 2.25ZM9.75 18c0-.034 0-.067.002-.1a25.05 25.05 0 0 0 4.496 0l.002.1a2.25 2.25 0 1 1-4.5 0Z", clipRule: "evenodd" })] }));

package/dist/icons/AnimatedLoader.d.ts

@@ -0,0 +1,6 @@
+type AnimatedLoaderProps = {
+    className?: string;
+    fill?: string;
+};
+declare const AnimatedLoader: ({ className, fill }: AnimatedLoaderProps) => import("react/jsx-runtime").JSX.Element;
+export default AnimatedLoader;

package/dist/icons/AnimatedLoader.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const AnimatedLoader = ({ className, fill }) => (_jsxs("svg", { "aria-hidden": "true", role: "status", className: `w-4 h-4 text-gray-200 animate-spin dark:text-gray-600 ${className}`, viewBox: "0 0 100 101", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z", fill: "currentColor" }), _jsx("path", { d: "M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z", fill: fill || "currentColor" })] }));
+export default AnimatedLoader;

package/dist/icons/AnimatedLoaderIcon.d.ts

@@ -0,0 +1,6 @@
+type AnimatedLoaderIconProps = {
+    className?: string;
+    fill?: string;
+};
+export declare const AnimatedLoaderIcon: ({ className, fill }: AnimatedLoaderIconProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/icons/AnimatedLoaderIcon.js

@@ -0,0 +1,2 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const AnimatedLoaderIcon = ({ className, fill }) => (_jsxs("svg", { "aria-hidden": "true", role: "status", className: `w-4 h-4 text-gray-200 animate-spin dark:text-gray-600 ${className}`, viewBox: "0 0 100 101", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z", fill: "currentColor" }), _jsx("path", { d: "M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z", fill: fill || "currentColor" })] }));

package/dist/icons/ArchiveBoxIcon.d.ts

@@ -0,0 +1,6 @@
+type ArchiveBoxProps = {
+    className?: string;
+    onClick?: () => void;
+};
+export declare const ArchiveBoxIcon: ({ className, onClick }: ArchiveBoxProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/icons/ArchiveBoxIcon.js

@@ -0,0 +1,2 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const ArchiveBoxIcon = ({ className, onClick }) => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor", className: `w-6 h-6 inline ${className}`, onClick: onClick, children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "m20.25 7.5-.625 10.632a2.25 2.25 0 0 1-2.247 2.118H6.622a2.25 2.25 0 0 1-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125Z" }) }));

package/dist/icons/ArrowIcon.d.ts

@@ -0,0 +1,7 @@
+type ArrowIconProps = {
+    className?: string;
+    onClick?: () => void;
+    strokeColor?: string;
+};
+export declare const ArrowIcon: ({ className, onClick, strokeColor }: ArrowIconProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/icons/ArrowIcon.js

@@ -0,0 +1,2 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const ArrowIcon = ({ className, onClick, strokeColor }) => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 10 6", strokeWidth: "2", stroke: strokeColor || "currentColor", className: `w-3 h-3 ${className}`, onClick: onClick, children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "m1 1 4 4 4-4" }) }));

package/dist/icons/ArrowTopRightIcon.d.ts

@@ -0,0 +1 @@
+export declare const ArrowTopRightIcon: () => import("react/jsx-runtime").JSX.Element;

package/dist/icons/ArrowTopRightIcon.js

@@ -0,0 +1,2 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const ArrowTopRightIcon = () => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", stroke: "currentColor", strokeWidth: 1.5, className: "w-6 h-6", "data-slot": "icon", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" }) }));

package/dist/icons/ArrowUpCircle.d.ts

@@ -0,0 +1,7 @@
+type ArrowUpCircleProps = {
+    className?: string;
+    onClick?: () => void;
+    strokeColor?: string;
+};
+declare const ArrowUpCircle: ({ className, onClick, strokeColor, }: ArrowUpCircleProps) => import("react/jsx-runtime").JSX.Element;
+export default ArrowUpCircle;

package/dist/icons/ArrowUpCircle.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const ArrowUpCircle = ({ className, onClick, strokeColor, }) => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: strokeColor || "currentColor", className: `w-6 h-6 inline ${className}`, onClick: onClick, children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "m15 11.25-3-3m0 0-3 3m3-3v7.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" }) }));
+export default ArrowUpCircle;

package/dist/icons/ArrowUpCircleIcon.d.ts

@@ -0,0 +1,7 @@
+type ArrowUpCircleIconProps = {
+    className?: string;
+    onClick?: () => void;
+    strokeColor?: string;
+};
+export declare const ArrowUpCircleIcon: ({ className, onClick, strokeColor, }: ArrowUpCircleIconProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/icons/ArrowUpCircleIcon.js

@@ -0,0 +1,2 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const ArrowUpCircleIcon = ({ className, onClick, strokeColor, }) => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: strokeColor || "currentColor", className: `w-6 h-6 inline ${className}`, onClick: onClick, children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "m15 11.25-3-3m0 0-3 3m3-3v7.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" }) }));

package/dist/icons/CheckCircleIcon.d.ts

@@ -0,0 +1,7 @@
+type CheckCircleIconProps = {
+    className?: string;
+    onClick?: () => void;
+    strokeColor?: string;
+};
+export declare const CheckCircleIcon: ({ className, onClick, strokeColor }: CheckCircleIconProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/icons/CheckCircleIcon.js

@@ -0,0 +1,2 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const CheckCircleIcon = ({ className, onClick, strokeColor }) => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: strokeColor || "currentColor", className: `w-6 h-6 inline ${className}`, onClick: onClick, children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" }) }));

package/dist/icons/CheckGreenIcon.d.ts

@@ -0,0 +1,6 @@
+type CheckGreenIconProps = {
+    className?: string;
+    onClick?: () => void;
+};
+export declare const CheckGreenIcon: ({ className, onClick }: CheckGreenIconProps) => import("react/jsx-runtime").JSX.Element;
+export {};