@skalfa/skalfa-component 1.0.2 → 1.0.3

package/dist/src/button/Button.component.d.ts

@@ -1,21 +0,0 @@
-import { ReactNode } from "react";
-export interface ButtonProps {
-    type?: "submit" | "button";
-    label?: string | ReactNode;
-    variant?: "solid" | "outline" | "light" | "simple";
-    paint?: "primary" | "secondary" | "success" | "danger" | "warning";
-    rounded?: boolean | string;
-    block?: boolean;
-    disabled?: boolean;
-    size?: "xs" | "sm" | "md" | "lg";
-    onClick?: any;
-    href?: string;
-    icon?: any;
-    loading?: boolean;
-    hover?: boolean;
-    tips?: string;
-    title?: string;
-    /** Use custom class with: "icon::", "loading::". */
-    className?: string;
-}
-export declare function ButtonComponent({ type, label, variant, paint, rounded, block, disabled, size, onClick, href, icon, loading, tips, title, className, }: ButtonProps): import("react").JSX.Element;

package/dist/src/button/Button.component.js

@@ -1,19 +0,0 @@
-"use client";
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ButtonComponent = ButtonComponent;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const link_1 = __importDefault(require("next/link"));
-const react_fontawesome_1 = require("@fortawesome/react-fontawesome");
-const _utils_1 = require("@utils");
-;
-function ButtonComponent({ type = "button", label, variant = "solid", paint = "primary", rounded, block, disabled, size = "md", onClick, href, icon, loading, tips, title, className = "", }) {
-    const isIconButton = icon && !label;
-    return ((0, jsx_runtime_1.jsxs)(ButtonComponentWrapper, { type: type, className: (0, _utils_1.cn)("button", `button-${variant}-${paint}`, isIconButton ? `icon-button-${size}` : `button-${size}`, rounded && "rounded-full", !isIconButton && block && "w-full justify-center", (0, _utils_1.pcn)(className, "base")), disabled: disabled || loading, onClick: onClick, href: href, title: tips || title, children: [loading ? ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("button-loading", (0, _utils_1.pcn)(className, "loading")) })) : (icon && ((0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: icon, className: (0, _utils_1.cn)("button-icon", (0, _utils_1.pcn)(className, "icon")) }))), !isIconButton && label] }));
-}
-const ButtonComponentWrapper = ({ children, href, ...props }) => {
-    return !href ? ((0, jsx_runtime_1.jsx)("button", { ...props, children: children })) : ((0, jsx_runtime_1.jsx)(link_1.default, { href: href, ...props, children: children }));
-};

package/dist/src/card/AlertCard.component.d.ts

@@ -1,11 +0,0 @@
-import { ReactNode } from "react";
-export interface AlertCardProps {
-    title?: string | ReactNode;
-    leftContent?: string | ReactNode;
-    badge?: string | ReactNode;
-    content?: string | ReactNode;
-    footer?: string | ReactNode;
-    /** Use custom class with: "badge::", "title::". */
-    className?: string;
-}
-export declare function AlertCardComponent({ title, leftContent, badge, content, footer, className, }: AlertCardProps): import("react").JSX.Element;

package/dist/src/card/AlertCard.component.js

@@ -1,9 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AlertCardComponent = AlertCardComponent;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const _utils_1 = require("@utils");
-function AlertCardComponent({ title, leftContent, badge, content, footer, className = "", }) {
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("section", { className: (0, _utils_1.cn)("alert-card", (0, _utils_1.pcn)(className, "base")), children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-start sm:gap-8", children: [leftContent, (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { className: (0, _utils_1.cn)("alert-card-badge", (0, _utils_1.pcn)(className, "badge")), children: badge }), (0, jsx_runtime_1.jsx)("h3", { className: (0, _utils_1.cn)("alert-card-title", (0, _utils_1.pcn)(className, "title")), children: title }), content, footer && (0, jsx_runtime_1.jsx)("div", { className: "pt-4", children: footer })] })] }) }) }));
-}

package/dist/src/card/Card.component.d.ts

@@ -1,5 +0,0 @@
-export interface CardProps {
-    children: React.ReactNode;
-    className?: string;
-}
-export declare function CardComponent({ children, className, }: CardProps): import("react").JSX.Element;

package/dist/src/card/Card.component.js

@@ -1,9 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CardComponent = CardComponent;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const _utils_1 = require("@utils");
-function CardComponent({ children, className, }) {
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("card", className), children: children }) }));
-}

package/dist/src/card/DashboardCard.component.d.ts

@@ -1,9 +0,0 @@
-import { ReactNode } from "react";
-export interface DashboardCardProps {
-    content?: string | ReactNode;
-    title?: string | ReactNode;
-    rightContent?: string | ReactNode;
-    path?: string;
-    className?: string;
-}
-export declare function DashboardCardComponent({ content, title, rightContent, path, className, }: DashboardCardProps): import("react").JSX.Element;

package/dist/src/card/DashboardCard.component.js

@@ -1,13 +0,0 @@
-"use client";
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DashboardCardComponent = DashboardCardComponent;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const link_1 = __importDefault(require("next/link"));
-const _utils_1 = require("@utils");
-function DashboardCardComponent({ content, title, rightContent, path, className, }) {
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(link_1.default, { href: path || "", children: (0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("dashboard-card", className), children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "flex gap-4 items-center", children: content }), title] }), (0, jsx_runtime_1.jsx)("div", { children: rightContent })] }) }) }));
-}

package/dist/src/card/GalleryCard.component.d.ts

@@ -1,7 +0,0 @@
-export interface GalleryCardProps {
-    src: string;
-    alt?: string;
-    /** Use custom class with: "label::", "image::". */
-    className?: string;
-}
-export declare function GalleryCardComponent({ src, alt, className, }: GalleryCardProps): import("react").JSX.Element;

package/dist/src/card/GalleryCard.component.js

@@ -1,13 +0,0 @@
-"use client";
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.GalleryCardComponent = GalleryCardComponent;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const image_1 = __importDefault(require("next/image"));
-const _utils_1 = require("@utils");
-function GalleryCardComponent({ src, alt = "", className = "", }) {
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.pcn)(className, "base"), children: [(0, jsx_runtime_1.jsx)(image_1.default, { src: src, alt: src, width: 400, height: 300, className: (0, _utils_1.cn)("gallery-card-image", (0, _utils_1.pcn)(className, "image")) }), (0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("gallery-card-label", (0, _utils_1.pcn)(className, "label")), children: alt })] }) }));
-}

package/dist/src/card/ProductCard.component.d.ts

@@ -1,9 +0,0 @@
-export interface ProductCardProps {
-    name: string;
-    price?: string;
-    image?: string;
-    description?: string | React.ReactNode;
-    /** Use custom class with: "image::", "content::". */
-    className?: string;
-}
-export declare function ProductCardComponent({ image, name, price, description, className, }: ProductCardProps): import("react").JSX.Element;

package/dist/src/card/ProductCard.component.js

@@ -1,13 +0,0 @@
-"use client";
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ProductCardComponent = ProductCardComponent;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const image_1 = __importDefault(require("next/image"));
-const _utils_1 = require("@utils");
-function ProductCardComponent({ image = "", name, price, description, className = "", }) {
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("product-card", (0, _utils_1.pcn)(className, "base")), children: [(0, jsx_runtime_1.jsx)(image_1.default, { src: image, alt: image, width: 400, height: 300, className: (0, _utils_1.cn)("product-card-image", (0, _utils_1.pcn)(className, "image")) }), (0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("p-2", (0, _utils_1.pcn)(className, "content")), children: [(0, jsx_runtime_1.jsxs)("dl", { children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("dt", { className: "sr-only", children: "Name" }), (0, jsx_runtime_1.jsx)("dd", { className: "text-sm", children: name })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("dt", { className: "sr-only", children: "Price" }), (0, jsx_runtime_1.jsx)("dd", { className: "font-semibold", children: price })] })] }), description && (0, jsx_runtime_1.jsx)("div", { children: description })] })] }) }));
-}

package/dist/src/card/ProfileCard.component.d.ts

@@ -1,10 +0,0 @@
-export interface ProfileCardProps {
-    name: string;
-    short?: string;
-    image?: string;
-    description?: string | React.ReactNode;
-    footer?: string | React.ReactNode;
-    /** Use custom class with: "image::", "content::". */
-    className?: string;
-}
-export declare function ProfileCardComponent({ image, name, short, description, footer, className, }: ProfileCardProps): import("react").JSX.Element;

package/dist/src/card/ProfileCard.component.js

@@ -1,13 +0,0 @@
-"use client";
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ProfileCardComponent = ProfileCardComponent;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const image_1 = __importDefault(require("next/image"));
-const _utils_1 = require("@utils");
-function ProfileCardComponent({ image = "", name, short, description, footer, className = "", }) {
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("profile-card", (0, _utils_1.pcn)(className, "base")), children: [(0, jsx_runtime_1.jsx)("span", { className: "absolute inset-x-0 bottom-0 h-1 bg-primary" }), (0, jsx_runtime_1.jsxs)("div", { className: "sm:flex sm:gap-4 sm:items-center", children: [image && ((0, jsx_runtime_1.jsx)("div", { className: "hidden sm:block sm:shrink-0", children: (0, jsx_runtime_1.jsx)(image_1.default, { src: image, alt: image, width: 400, height: 400, className: (0, _utils_1.cn)("profile-card-image", (0, _utils_1.pcn)(className, "image")) }) })), (0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.pcn)(className, "content"), children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-lg font-bold sm:text-xl", children: name }), (0, jsx_runtime_1.jsx)("p", { className: "mt-1 text-xs font-medium text-light-foreground", children: short })] })] }), description, footer && (0, jsx_runtime_1.jsx)("dl", { className: "mt-4", children: footer })] }) }));
-}

package/dist/src/carousel/Carousel.component.d.ts

@@ -1,13 +0,0 @@
-interface CarouselItem {
-    background: string;
-    content?: string;
-}
-interface CarouselProps {
-    items: CarouselItem[];
-    noButton?: boolean;
-    noNavigation?: boolean;
-    /** Use custom class with: "item::", "prev-button::", "next-button::", "navigation::". */
-    className?: string;
-}
-export declare function CarouselComponent({ items, className, noButton, noNavigation, }: CarouselProps): import("react").JSX.Element;
-export {};

package/dist/src/carousel/Carousel.component.js

@@ -1,37 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CarouselComponent = CarouselComponent;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_fontawesome_1 = require("@fortawesome/react-fontawesome");
-const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
-const _utils_1 = require("@utils");
-function CarouselComponent({ items, className = "", noButton, noNavigation, }) {
-    const [currentIndex, setCurrentIndex] = (0, react_1.useState)(0);
-    const touchStartX = (0, react_1.useRef)(null);
-    const touchEndX = (0, react_1.useRef)(null);
-    const intervalRef = (0, react_1.useRef)(null);
-    const handlePrev = () => setCurrentIndex((prevIndex) => (prevIndex - 1 + items.length) % items.length);
-    const handleNext = () => setCurrentIndex((prevIndex) => (prevIndex + 1) % items.length);
-    const handleTouchStart = (e) => {
-        touchStartX.current = e.touches[0].clientX;
-    };
-    const handleTouchEnd = (e) => {
-        touchEndX.current = e.changedTouches[0].clientX;
-        if (touchStartX.current !== null && touchEndX.current !== null) {
-            if (touchStartX.current - touchEndX.current > 50)
-                handleNext();
-            if (touchEndX.current - touchStartX.current > 50)
-                handlePrev();
-        }
-    };
-    (0, react_1.useEffect)(() => {
-        intervalRef.current = setInterval(handleNext, 10000);
-        return () => {
-            if (intervalRef.current)
-                clearInterval(intervalRef.current);
-        };
-    }, []);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("carousel", (0, _utils_1.pcn)(className, "base")), children: [(0, jsx_runtime_1.jsx)("div", { className: "carousel-inner", style: { transform: `translateX(-${currentIndex * 100}%)` }, onTouchStart: handleTouchStart, onTouchEnd: handleTouchEnd, children: items.map((item, index) => ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("carousel-item", (0, _utils_1.pcn)(className, "item")), style: { backgroundImage: `url(${item.background})` }, children: item.content }, index))) }), !noNavigation && ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("carousel-navigation", (0, _utils_1.pcn)(className, "navigation")), children: items.map((_, index) => ((0, jsx_runtime_1.jsx)("button", { className: `carousel-indicator ${currentIndex === index ? "carousel-indicator-active" : ""}`, onClick: () => setCurrentIndex(index) }, index))) })), !noButton && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", { className: (0, _utils_1.cn)("carousel-btn carousel-prev-btn", (0, _utils_1.pcn)(className, "prev-button")), onClick: handlePrev, children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faChevronLeft }) }), (0, jsx_runtime_1.jsx)("button", { className: (0, _utils_1.cn)("carousel-btn carousel-next-btn", (0, _utils_1.pcn)(className, "next-button")), onClick: handleNext, children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faChevronRight }) })] }))] }));
-}

package/dist/src/chip/Chip.component.d.ts

@@ -1,6 +0,0 @@
-export declare function ChipComponent({ items, onClick, onDelete, className, }: {
-    items: Record<string, any>;
-    onClick?: (item: any, index: number) => void;
-    onDelete?: (item: any, index: number) => void;
-    className?: string;
-}): import("react").JSX.Element;

package/dist/src/chip/Chip.component.js

@@ -1,12 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ChipComponent = ChipComponent;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
-const react_fontawesome_1 = require("@fortawesome/react-fontawesome");
-const _utils_1 = require("@utils");
-function ChipComponent({ items, onClick, onDelete, className, }) {
-    return ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("chip-group", className), children: items?.map((item, key) => {
-            return ((0, jsx_runtime_1.jsxs)("div", { className: "chip", onClick: () => onClick?.(item, key), children: [(0, jsx_runtime_1.jsx)("span", { children: item }), onDelete && ((0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faTimes, className: "chip-delete", onClick: () => onDelete?.(item, key) }))] }, key));
-        }) }));
-}

package/dist/src/index.d.ts

@@ -1,13 +0,0 @@
-export * from "./accordion";
-export * from "./breadcrumb";
-export * from "./button";
-export * from "./card";
-export * from "./carousel";
-export * from "./chip";
-export * from "./input";
-export * from "./modal";
-export * from "./nav";
-export * from "./supervision";
-export * from "./table";
-export * from "./typography";
-export * from "./wrap";

package/dist/src/index.js

@@ -1,29 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./accordion"), exports);
-__exportStar(require("./breadcrumb"), exports);
-__exportStar(require("./button"), exports);
-__exportStar(require("./card"), exports);
-__exportStar(require("./carousel"), exports);
-__exportStar(require("./chip"), exports);
-__exportStar(require("./input"), exports);
-__exportStar(require("./modal"), exports);
-__exportStar(require("./nav"), exports);
-__exportStar(require("./supervision"), exports);
-__exportStar(require("./table"), exports);
-__exportStar(require("./typography"), exports);
-__exportStar(require("./wrap"), exports);

package/dist/src/input/Checkbox.component.d.ts

@@ -1,13 +0,0 @@
-import { ReactNode } from "react";
-export type CheckboxProps = {
-    name: string;
-    label?: string | ReactNode;
-    value?: string;
-    disabled?: boolean;
-    checked?: boolean;
-    invalid?: string;
-    onChange?: () => void;
-    /** Use custom class with: "label::", "checked::", "error::". */
-    className?: string;
-};
-export declare function CheckboxComponent({ name, label, value, disabled, checked, invalid, onChange, className, }: CheckboxProps): import("react").JSX.Element;

package/dist/src/input/Checkbox.component.js

@@ -1,23 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CheckboxComponent = CheckboxComponent;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_fontawesome_1 = require("@fortawesome/react-fontawesome");
-const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
-const _utils_1 = require("@utils");
-function CheckboxComponent({ name, label, value, disabled = false, checked = false, invalid, onChange, className = "", }) {
-    // =========================>
-    // ## Initial
-    // =========================>
-    const randomId = (0, _utils_1.useInputRandomId)();
-    const [invalidMessage, setInvalidMessage] = (0, react_1.useState)("");
-    // =========================>
-    // ## Invalid handler
-    // =========================>
-    (0, react_1.useEffect)(() => {
-        setInvalidMessage(invalid || "");
-    }, [invalid]);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "checkbox-container", children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", className: "hidden", id: randomId, name: name, onChange: onChange, defaultChecked: checked, value: value, disabled: disabled }), (0, jsx_runtime_1.jsxs)("label", { htmlFor: randomId, className: (0, _utils_1.cn)("checkbox-wrapper", disabled && "checkbox-wrapper-disabled"), children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("checkbox-input", checked && "checkbox-input-checked", checked && (0, _utils_1.pcn)(className, "checked"), (0, _utils_1.pcn)(className, "base")), children: checked && (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faCheck, className: "text-sm" }) }) }), (0, jsx_runtime_1.jsx)("span", { className: (0, _utils_1.cn)("checkbox-label", checked && "checkbox-label-checked", (0, _utils_1.pcn)(className, "label"), checked && (0, _utils_1.pcn)(className, "label", "checked"), disabled && (0, _utils_1.pcn)(className, "label", "disabled")), children: label })] }), invalidMessage && ((0, jsx_runtime_1.jsx)("small", { className: (0, _utils_1.cn)("input-error-message", (0, _utils_1.pcn)(className, "error")), children: invalidMessage }))] }));
-}

package/dist/src/input/Input.component.d.ts

@@ -1,23 +0,0 @@
-import { InputHTMLAttributes, ReactNode, Ref } from "react";
-import { ValidationRules } from "@utils";
-export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange"> {
-    label?: string;
-    tip?: string | ReactNode;
-    leftIcon?: any;
-    rightIcon?: any;
-    value?: any;
-    invalid?: string;
-    suggestions?: string[];
-    validations?: ValidationRules;
-    onlyAlphabet?: boolean;
-    uppercase?: boolean;
-    lowercase?: boolean;
-    multiple?: boolean;
-    onChange?: (value: any) => any;
-    register?: (name: string, validations?: ValidationRules) => void;
-    unregister?: (name: string) => void;
-    ref?: Ref<HTMLInputElement>;
-    /** Use custom class with: "label::", "tip::", "error::", "icon::", "suggest::", "suggest-item::". */
-    className?: string;
-}
-export declare function InputComponent({ label, tip, leftIcon, rightIcon, className, value, invalid, suggestions, validations, onlyAlphabet, uppercase, lowercase, multiple, register, unregister, onChange, ref, ...props }: InputProps): import("react").JSX.Element;

package/dist/src/input/Input.component.js

@@ -1,134 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.InputComponent = InputComponent;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_fontawesome_1 = require("@fortawesome/react-fontawesome");
-const _utils_1 = require("@utils");
-const InputValues_component_1 = require("./InputValues.component");
-function InputComponent({ label, tip, leftIcon, rightIcon, className = "", value, invalid, suggestions, validations, onlyAlphabet, uppercase, lowercase, multiple, register, unregister, onChange, ref, ...props }) {
-    const [activeSuggestion, setActiveSuggestion] = (0, react_1.useState)(0);
-    const [showSuggestions, setShowSuggestions] = (0, react_1.useState)(false);
-    const [dataSuggestions, setDataSuggestions] = (0, react_1.useState)([]);
-    const [filteredSuggestions, setFilteredSuggestions] = (0, react_1.useState)([]);
-    // =========================>
-    // ## Initial
-    // =========================>
-    const inputHandler = (0, _utils_1.useInputHandler)(props.name, value, validations, register, unregister, props.type == "file");
-    const randomId = (0, _utils_1.useInputRandomId)();
-    // =========================>
-    // ## Invalid handler
-    // =========================>
-    const [invalidMessage] = (0, _utils_1.useValidation)(inputHandler.value, validations, invalid, inputHandler.idle);
-    // =========================>
-    // ## Change value handler
-    // =========================>
-    (0, react_1.useEffect)(() => {
-        if (inputHandler.value && typeof inputHandler.value === "string") {
-            let newVal = onlyAlphabet ? inputHandler.value.replace(/[^A-Za-z ]+/g, "") : inputHandler.value;
-            if (uppercase)
-                newVal = newVal.toUpperCase();
-            if (lowercase)
-                newVal = newVal.toLowerCase();
-            if (validations && _utils_1.validation.hasRules(validations, "max"))
-                newVal = newVal.slice(0, parseInt(_utils_1.validation.getRules(validations, "max") || "0"));
-            inputHandler.setValue(newVal);
-        }
-    }, [inputHandler.value, onlyAlphabet, uppercase, lowercase, validations]);
-    // =========================>
-    // ## suggestions handler
-    // =========================>
-    (0, react_1.useEffect)(() => {
-        setDataSuggestions(suggestions);
-    }, [suggestions]);
-    const filterSuggestion = (e) => {
-        if (dataSuggestions?.length) {
-            let filteredSuggestion = [];
-            if (e.target.value) {
-                filteredSuggestion = dataSuggestions
-                    .filter((suggestion) => suggestion.toLowerCase().indexOf(e.target.value.toLowerCase()) > -1)
-                    .slice(0, 10);
-            }
-            else {
-                filteredSuggestion = dataSuggestions.slice(0, 10);
-            }
-            setActiveSuggestion(-1);
-            setFilteredSuggestions(filteredSuggestion);
-            setShowSuggestions(true);
-        }
-    };
-    const onKeyDownSuggestion = (e) => {
-        if (dataSuggestions?.length) {
-            if (e.keyCode === 13) {
-                const resultValue = filteredSuggestions?.at(activeSuggestion);
-                setActiveSuggestion(-1);
-                setFilteredSuggestions([]);
-                setShowSuggestions(false);
-                inputHandler.setValue(resultValue ? resultValue : inputHandler.value);
-                if (onChange) {
-                    onChange(resultValue ? resultValue : inputHandler.value);
-                }
-                e.preventDefault();
-            }
-            else if (e.keyCode === 38) {
-                if (activeSuggestion === 0) {
-                    return;
-                }
-                setActiveSuggestion(activeSuggestion - 1);
-            }
-            else if (e.keyCode === 40) {
-                if (activeSuggestion + 1 >= (filteredSuggestions?.length || 0)) {
-                    return;
-                }
-                setActiveSuggestion(activeSuggestion + 1);
-            }
-        }
-    };
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { className: "relative flex flex-col gap-y-0.5", children: [(0, jsx_runtime_1.jsxs)("label", { htmlFor: randomId, className: (0, _utils_1.cn)("input-label", props.disabled && "input-label-disabled", inputHandler.focus && "input-label-focus", !!invalidMessage && "input-label-error", (0, _utils_1.pcn)(className, "label"), props.disabled && (0, _utils_1.pcn)(className, "label", "disabled"), inputHandler.focus && (0, _utils_1.pcn)(className, "label", "focus"), !!invalidMessage && (0, _utils_1.pcn)(className, "label", "error")), children: [label, validations && _utils_1.validation.hasRules(validations, "required") && (0, jsx_runtime_1.jsx)("span", { className: "text-danger ml-1", children: "*" })] }), tip && ((0, jsx_runtime_1.jsx)("small", { className: (0, _utils_1.cn)("input-tip", props.disabled && "input-tip-disabled", (0, _utils_1.pcn)(className, "tip"), props.disabled && (0, _utils_1.pcn)(className, "tip", "disabled")), children: tip })), (0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsx)("input", { ...props, ref: ref, id: randomId, placeholder: !multiple || (multiple && !inputHandler.value?.length) ? props.placeholder : "", className: (0, _utils_1.cn)("input", props.type == "file" && "input-file", leftIcon && "input-with-left-icon", rightIcon && "input-with-right-icon", !!invalidMessage && "input-error", (0, _utils_1.pcn)(className, "base"), !!invalidMessage && (0, _utils_1.pcn)(className, "base", "error")), value: !multiple ? inputHandler.value : undefined, onChange: (e) => {
-                                if (!multiple) {
-                                    inputHandler.setValue(e.target.value);
-                                    inputHandler.setIdle(false);
-                                    onChange?.(props.type == "file" ? e.target?.files && e.target?.files[0] : e.target.value);
-                                    dataSuggestions?.length && filterSuggestion(e);
-                                }
-                            }, onFocus: (e) => {
-                                props.onFocus?.(e);
-                                inputHandler.setFocus(true);
-                                dataSuggestions?.length && filterSuggestion(e);
-                            }, onBlur: (e) => {
-                                props.onBlur?.(e);
-                                setTimeout(() => inputHandler.setFocus(false), 100);
-                            }, onKeyDown: (e) => {
-                                dataSuggestions?.length && onKeyDownSuggestion(e);
-                                if (multiple && e.key === "Enter" || e.key === ",") {
-                                    e.preventDefault();
-                                    const currentValue = e.currentTarget.value.trim();
-                                    if (!currentValue)
-                                        return;
-                                    const currentValues = Array.isArray(inputHandler.value) ? [...inputHandler.value] : [];
-                                    if (!currentValues.includes(currentValue)) {
-                                        const newValues = [...currentValues, currentValue];
-                                        onChange?.(newValues);
-                                        inputHandler.setValue(newValues);
-                                        e.currentTarget.value = "";
-                                    }
-                                }
-                            }, autoComplete: props.autoComplete || dataSuggestions?.length ? "off" : "" }), (multiple) && ((0, jsx_runtime_1.jsx)(InputValues_component_1.InputValues, { value: inputHandler.value || [], isFocus: inputHandler.focus, onFocus: () => setTimeout(() => inputHandler.setFocus(true), 110), onDelete: (_, index) => {
-                                const values = Array().concat(inputHandler.value);
-                                const newValues = values.filter((_, val) => val != index);
-                                inputHandler.setValue(newValues);
-                                onChange?.(newValues);
-                            }, className: `${!inputHandler.focus && (leftIcon ? "ml-[2.5rem]" : "ml-[1rem]")}`, style: { maxWidth: `calc(100% - ${leftIcon ? "5.2rem" : "2rem"})` } })), leftIcon && ((0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { className: (0, _utils_1.cn)("input-icon", "input-icon-left", props.disabled && "input-icon-disabled", inputHandler.focus && "input-icon-focus", (0, _utils_1.pcn)(className, "icon"), props.disabled && (0, _utils_1.pcn)(className, "icon", "disabled"), inputHandler.focus && (0, _utils_1.pcn)(className, "icon", "focus")), icon: leftIcon })), rightIcon && ((0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { className: (0, _utils_1.cn)("input-icon", "input-icon-right", props.disabled && "input-icon-disabled", inputHandler.focus && "input-icon-focus", (0, _utils_1.pcn)(className, "icon"), props.disabled && (0, _utils_1.pcn)(className, "icon", "disabled"), inputHandler.focus && (0, _utils_1.pcn)(className, "icon", "focus")), icon: rightIcon }))] }), !!dataSuggestions?.length && showSuggestions && !!filteredSuggestions?.length && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("ul", { className: (0, _utils_1.cn)("input-suggest-container", inputHandler.focus && "input-suggest-container-active", (0, _utils_1.pcn)(className, "suggest")), children: filteredSuggestions.map((suggestion, key) => {
-                            return ((0, jsx_runtime_1.jsx)("li", { className: (0, _utils_1.cn)("input-suggest", inputHandler.value == suggestion && "input-suggest-active", (0, _utils_1.pcn)(className, "suggest-item"), inputHandler.value == suggestion && (0, _utils_1.pcn)(className, "suggest-item", "active")), onMouseDown: () => {
-                                    setTimeout(() => inputHandler.setFocus(true), 110);
-                                }, onMouseUp: () => {
-                                    setActiveSuggestion(key);
-                                    setFilteredSuggestions([]);
-                                    setShowSuggestions(false);
-                                    inputHandler.setValue(filteredSuggestions[key] || inputHandler.value);
-                                    onChange?.(filteredSuggestions[key] || inputHandler.value);
-                                    setTimeout(() => inputHandler.setFocus(false), 120);
-                                }, children: suggestion }, suggestion));
-                        }) }) })), invalidMessage && ((0, jsx_runtime_1.jsx)("small", { className: (0, _utils_1.cn)("input-error-message", (0, _utils_1.pcn)(className, "error")), children: invalidMessage }))] }) }));
-}

package/dist/src/input/InputCheckbox.component.d.ts

@@ -1,27 +0,0 @@
-import { ReactNode } from "react";
-import { ApiType, ValidationRules } from "@utils";
-export interface InputCheckboxOptionProps {
-    value: string | number;
-    label: string;
-}
-export interface InputCheckboxProps {
-    name: string;
-    label?: string;
-    tip?: string | ReactNode;
-    vertical?: boolean;
-    value?: string[] | number[];
-    disabled?: boolean;
-    invalid?: string;
-    options?: InputCheckboxOptionProps[];
-    serverOptionControl?: ApiType;
-    customOptions?: any;
-    validations?: ValidationRules;
-    onChange?: (value: string[] | number[]) => any;
-    register?: (name: string, validations?: ValidationRules) => void;
-    unregister?: (name: string) => void;
-    /** Use custom class with: "label::", "tip::", "error::", "icon::". */
-    className?: string;
-    /** Use custom class with: "label::", "checked::", "error::". */
-    classNameCheckbox?: string;
-}
-export declare function InputCheckboxComponent({ name, label, tip, vertical, className, classNameCheckbox, value, disabled, invalid, options, serverOptionControl, customOptions, validations, register, unregister, onChange, }: InputCheckboxProps): import("react").JSX.Element;

package/dist/src/input/InputCheckbox.component.js

@@ -1,53 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.InputCheckboxComponent = InputCheckboxComponent;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const _utils_1 = require("@utils");
-const _components_1 = require("@components");
-;
-;
-function InputCheckboxComponent({ name, label, tip, vertical, className = "", classNameCheckbox = "", value, disabled, invalid, options, serverOptionControl, customOptions, validations, register, unregister, onChange, }) {
-    const [dataOptions, setDataOptions] = (0, react_1.useState)([]);
-    const [loading, setLoading] = (0, react_1.useState)(false);
-    // =========================>
-    // ## initial
-    // =========================>
-    const inputHandler = (0, _utils_1.useInputHandler)(name, value, validations, register, unregister, false);
-    // =========================>
-    // ## Invalid handler
-    // =========================>
-    const [invalidMessage] = (0, _utils_1.useValidation)(inputHandler.value, validations, invalid, inputHandler.idle);
-    // =========================>
-    // ## fetch option
-    // =========================>
-    (0, react_1.useEffect)(() => {
-        const fetchOptions = async () => {
-            setLoading(true);
-            const mutateOptions = await (0, _utils_1.api)(serverOptionControl || {});
-            if (mutateOptions?.status == 200) {
-                customOptions ? setDataOptions([customOptions, ...mutateOptions.data]) : setDataOptions(mutateOptions.data);
-                setLoading(false);
-            }
-        };
-        if (serverOptionControl?.path || serverOptionControl?.url) {
-            fetchOptions();
-        }
-        else {
-            !options && setDataOptions([]);
-        }
-    }, [serverOptionControl?.path, serverOptionControl?.url]);
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { className: "input-container w-full", children: [(0, jsx_runtime_1.jsxs)("label", { className: (0, _utils_1.cn)("input-label", disabled && "input-label-disabled", invalidMessage && "input-label-error", (0, _utils_1.pcn)(className, "label"), disabled && (0, _utils_1.pcn)(className, "label", "disabled"), invalidMessage && (0, _utils_1.pcn)(className, "label", "focus")), children: [label, validations && _utils_1.validation.hasRules(validations, "required") && (0, jsx_runtime_1.jsx)("span", { className: "text-danger ml-1", children: "*" })] }), tip && ((0, jsx_runtime_1.jsx)("small", { className: (0, _utils_1.cn)("input-tip", disabled && "input-tip-disabled", (0, _utils_1.pcn)(className, "tip"), disabled && (0, _utils_1.pcn)(className, "tip", "disabled")), children: tip })), (0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("input input-checkbox-list", vertical && "input-checkbox-list-vertical", (0, _utils_1.pcn)(className, "input"), invalidMessage && "input-error", invalidMessage && (0, _utils_1.pcn)(className, "input", "error")), children: [loading && (vertical ? [1, 2, 3, 4, 5, 6, 7, 8, 9] : [1, 2, 3]).map((_, key) => {
-                            return (0, jsx_runtime_1.jsx)("div", { className: "w-1/3 h-6 rounded-lg" }, key);
-                        }), (options || dataOptions) && (options || dataOptions)?.map((option, key) => {
-                            const checked = Array().concat(inputHandler.value).find((val) => val == option.value);
-                            return ((0, jsx_runtime_1.jsx)(_components_1.CheckboxComponent, { label: option.label, name: `option[${option.value}]#${name}`, checked: !!checked, disabled: disabled, className: classNameCheckbox, onChange: () => {
-                                    const newVal = (Array.isArray(inputHandler.value) ? inputHandler.value : [])
-                                        .filter((val) => val !== option.value)
-                                        .concat(checked ? [] : [option.value]);
-                                    inputHandler.setValue(newVal);
-                                    onChange?.(newVal);
-                                } }, key));
-                        })] }), invalidMessage && ((0, jsx_runtime_1.jsx)("small", { className: (0, _utils_1.cn)("input-error-message", (0, _utils_1.pcn)(className, "error")), children: invalidMessage }))] }) }));
-}

package/dist/src/input/InputCurrency.component.d.ts

@@ -1,21 +0,0 @@
-import { InputHTMLAttributes, ReactNode } from "react";
-import { ValidationRules } from "@utils";
-export interface InputCurrencyProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange"> {
-    label?: string;
-    tip?: string | ReactNode;
-    leftIcon?: any;
-    rightIcon?: any;
-    value?: number;
-    invalid?: string;
-    validations?: ValidationRules;
-    format?: {
-        locale?: string;
-        currency?: string;
-    };
-    onChange?: (value: number) => any;
-    register?: (name: string, validations?: ValidationRules) => void;
-    unregister?: (name: string) => void;
-    /** Use custom class with: "label::", "tip::", "error::", "icon::". */
-    className?: string;
-}
-export declare function InputCurrencyComponent({ label, tip, leftIcon, rightIcon, value, invalid, validations, format, register, unregister, onChange, className, ...props }: InputCurrencyProps): import("react").JSX.Element;