@skalfa/skalfa-component 1.0.0

package/LICENSE

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

package/README.md

@@ -0,0 +1,79 @@
+<p align="center">
+  <img src="https://skalfa.sejedigital.com/images/logo-skalfa.png" alt="Skalfa Logo" width="300" />
+</p>
+
+# @skalfa/skalfa-component
+
+> Core reusable UI component library for Skalfa Next.js applications.
+
+---
+
+## About this Package
+
+This package is part of the **Skalfa Framework**, a premium development ecosystem designed to build high-performance, modular web applications and APIs.
+
+It ships a complete set of production-ready React components — inputs, tables, modals, navigation, typography, and more — all designed to integrate seamlessly with the Skalfa App template.
+
+### Usage Scope & Standalone Status
+> 🔒 **Skalfa Ecosystem Integration:** This package is designed to run **integrated within the Skalfa ecosystem** (such as Skalfa App). It relies on the global service registry and core framework abstractions (`@skalfa/skalfa-app-core`) to operate.
+
+---
+
+## Documentation
+
+See the usage documentation at [Documentation](https://skalfa.sejedigital.com).
+
+---
+
+## Installation
+
+You can install this package using your preferred package manager:
+
+```bash
+# Using npm
+npm install @skalfa/skalfa-component
+
+# Using bun
+bun add @skalfa/skalfa-component
+```
+
+---
+
+## Picking & Customizing Components
+
+The Skalfa CLI allows you to eject any component into your local project for full customization:
+
+```bash
+# Copy a component (overrides the core version)
+skalfa pick Button
+
+# Copy and rename a component (creates a new custom variant)
+skalfa pick Button MyCustomButton
+```
+
+This will copy the component source into your `components/` directory and register the local override automatically in `components/index.ts`.
+
+---
+
+## Pre-installed Dependencies
+
+The following key dependencies are packaged and managed within this project:
+
+| Dependency | Scope | Version |
+| :--- | :--- | :--- |
+| `@skalfa/skalfa-app-core` | peer / runtime | `^1.0.0` |
+| `next` | peer / runtime | `^15.0.0` |
+| `react` | peer / runtime | `^19.0.0` |
+| `react-dom` | peer / runtime | `^19.0.0` |
+| `@fortawesome/react-fontawesome` | peer / runtime | `^0.2.2` |
+| `@react-google-maps/api` | development | `^2.20.7` |
+| `@types/node` | development | `^20.0.0` |
+| `@types/react` | development | `^19.0.0` |
+| `@types/react-dom` | development | `^19.0.0` |
+| `typescript` | development | `^6.0.3` |
+
+---
+
+## License
+
+This package is licensed under the **MIT License**. For full license text, see the [LICENSE](LICENSE) file.

package/dist/accordion/Accordion.component.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from "react";
+export interface AccordionProps {
+    setActive?: number | null;
+    items: {
+        head: ReactNode;
+        content: ReactNode;
+    }[];
+    horizontal?: boolean;
+    className?: string;
+}
+export declare function AccordionComponent({ items, setActive, horizontal, 
+/** Use custom class with: "container::", "head::", "active::". */
+className, }: AccordionProps): import("react").JSX.Element;

package/dist/accordion/Accordion.component.js

@@ -0,0 +1,25 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AccordionComponent = AccordionComponent;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+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 AccordionComponent({ items, setActive = null, horizontal = false, 
+/** Use custom class with: "container::", "head::", "active::". */
+className = "", }) {
+    const [isActive, setIsActive] = (0, react_1.useState)(setActive);
+    (0, react_1.useEffect)(() => {
+        setIsActive(setActive);
+    }, [setActive]);
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("accordion", horizontal ? "accordion-horizontal" : "accordion-vertical", (0, _utils_1.pcn)(className, "container")), children: items.map(({ head, content }, key) => ((0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("accordion-item", horizontal ? "accordion-item-horizontal" : "accordion-item-vertical"), children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("accordion-head", horizontal ? "accordion-head-horizontal" : "accordion-head-vertical", (0, _utils_1.pcn)(className, "head")), onClick: () => setIsActive(isActive === key ? null : key), children: [(0, jsx_runtime_1.jsx)("div", { children: head }), (0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("w-min transition-transform", isActive !== key && "rotate-180"), children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: horizontal ? free_solid_svg_icons_1.faChevronLeft : free_solid_svg_icons_1.faChevronDown }) })] }), (0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("accordion-content", horizontal
+                        ? isActive === key
+                            ? "accordion-content-horizontal-active"
+                            : "accordion-content-horizontal-inactive"
+                        : isActive === key
+                            ? "accordion-content-vertical-active"
+                            : "accordion-content-vertical-inactive", (0, _utils_1.pcn)(className, "base"), isActive === key && (0, _utils_1.pcn)(className, "active")), children: content })] }, key))) }));
+}

package/dist/breadcrumb/Breadcrumb.component.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from "react";
+export interface BreadcrumbItemProps {
+    path: string;
+    label: string;
+    className?: string;
+}
+export interface BreadcrumbProps {
+    items: BreadcrumbItemProps[];
+    square?: boolean;
+    separatorContent?: string | ReactNode;
+    /** Use custom class with: "container::", "active::". */
+    className?: string;
+}
+export declare function BreadcrumbComponent({ items, className, square, separatorContent, }: BreadcrumbProps): import("react").JSX.Element;

package/dist/breadcrumb/Breadcrumb.component.js

@@ -0,0 +1,21 @@
+"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.BreadcrumbComponent = BreadcrumbComponent;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const link_1 = __importDefault(require("next/link"));
+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 BreadcrumbComponent({ items, className = "", square = false, separatorContent, }) {
+    return ((0, jsx_runtime_1.jsx)("nav", { className: (0, _utils_1.cn)("breadcrumb", (0, _utils_1.pcn)(className, "container")), children: (0, jsx_runtime_1.jsx)("ol", { className: "breadcrumb-list", children: items.map((item, index) => {
+                const isActive = index === items.length - 1;
+                return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)(link_1.default, { href: item.path, className: (0, _utils_1.cn)("breadcrumb-link", square && "breadcrumb-link-square", isActive && !square && "breadcrumb-link-active", isActive && square && "breadcrumb-link-square-active", (0, _utils_1.pcn)(className, "base"), isActive && (0, _utils_1.pcn)(className, "active")), children: item.label }) }), !isActive && ((0, jsx_runtime_1.jsx)("li", { className: "breadcrumb-separator", children: separatorContent || ((0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faChevronRight })) }))] }, item.path));
+            }) }) }));
+}

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

@@ -0,0 +1,21 @@
+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/button/Button.component.js

@@ -0,0 +1,19 @@
+"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/card/AlertCard.component.d.ts

@@ -0,0 +1,11 @@
+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/card/AlertCard.component.js

@@ -0,0 +1,9 @@
+"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/card/Card.component.d.ts

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

package/dist/card/Card.component.js

@@ -0,0 +1,9 @@
+"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/card/DashboardCard.component.d.ts

@@ -0,0 +1,9 @@
+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/card/DashboardCard.component.js

@@ -0,0 +1,13 @@
+"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/card/GalleryCard.component.d.ts

@@ -0,0 +1,7 @@
+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/card/GalleryCard.component.js

@@ -0,0 +1,13 @@
+"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/card/ProductCard.component.d.ts

@@ -0,0 +1,9 @@
+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/card/ProductCard.component.js

@@ -0,0 +1,13 @@
+"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/card/ProfileCard.component.d.ts

@@ -0,0 +1,10 @@
+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/card/ProfileCard.component.js

@@ -0,0 +1,13 @@
+"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/carousel/Carousel.component.d.ts

@@ -0,0 +1,13 @@
+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/carousel/Carousel.component.js

@@ -0,0 +1,37 @@
+"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/chip/Chip.component.d.ts

@@ -0,0 +1,6 @@
+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/chip/Chip.component.js

@@ -0,0 +1,12 @@
+"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/index.d.ts

@@ -0,0 +1,56 @@
+export * from "./accordion/Accordion.component";
+export * from "./breadcrumb/Breadcrumb.component";
+export * from "./button/Button.component";
+export * from "./card/AlertCard.component";
+export * from "./card/Card.component";
+export * from "./card/DashboardCard.component";
+export * from "./card/GalleryCard.component";
+export * from "./card/ProductCard.component";
+export * from "./card/ProfileCard.component";
+export * from "./carousel/Carousel.component";
+export * from "./chip/Chip.component";
+export * from "./input/Checkbox.component";
+export * from "./input/Input.component";
+export * from "./input/InputCheckbox.component";
+export * from "./input/InputCurrency.component";
+export * from "./input/InputDate.component";
+export * from "./input/InputDatetime.component";
+export * from "./input/InputDocument.component";
+export * from "./input/InputImage.component";
+export * from "./input/InputMap.component";
+export * from "./input/InputNumber.component";
+export * from "./input/InputOtp.component";
+export * from "./input/InputPassword.component";
+export * from "./input/InputRadio.component";
+export * from "./input/InputTime.component";
+export * from "./input/InputValues.component";
+export * from "./input/Radio.component";
+export * from "./input/Select.component";
+export * from "./modal/BottomSheet.component";
+export * from "./modal/FloatingPage.component";
+export * from "./modal/Modal.component";
+export * from "./modal/ModalConfirm.component";
+export * from "./modal/Toast.component";
+export * from "./nav/Bottombar.component";
+export * from "./nav/Footer.component";
+export * from "./nav/Headbar.component";
+export * from "./nav/Navbar.component";
+export * from "./nav/Sidebar.component";
+export * from "./nav/Tabbar.component";
+export * from "./nav/Wizard.component";
+export * from "./supervision/FormSupervision.component";
+export * from "./supervision/TableSupervision.component";
+export * from "./table/ControlBar.component";
+export * from "./table/FilterComponent";
+export * from "./table/Pagination.component";
+export * from "./table/Table.component";
+export * from "./typography/TypographyArticle.component";
+export * from "./typography/TypographyColumn.component";
+export * from "./typography/TypographyContent.component";
+export * from "./typography/TypographyTips.component";
+export * from "./wrap/Draggable.component";
+export * from "./wrap/Image.component";
+export * from "./wrap/OutsideClick.component";
+export * from "./wrap/ScrollContainer.component";
+export * from "./wrap/ShortcutProvider";
+export * from "./wrap/Swipe.component";

package/dist/index.js

@@ -0,0 +1,85 @@
+"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/Accordion.component"), exports);
+__exportStar(require("./breadcrumb/Breadcrumb.component"), exports);
+__exportStar(require("./button/Button.component"), exports);
+__exportStar(require("./card/AlertCard.component"), exports);
+__exportStar(require("./card/Card.component"), exports);
+__exportStar(require("./card/DashboardCard.component"), exports);
+__exportStar(require("./card/GalleryCard.component"), exports);
+__exportStar(require("./card/ProductCard.component"), exports);
+__exportStar(require("./card/ProfileCard.component"), exports);
+__exportStar(require("./carousel/Carousel.component"), exports);
+__exportStar(require("./chip/Chip.component"), exports);
+__exportStar(require("./input/Checkbox.component"), exports);
+__exportStar(require("./input/Input.component"), exports);
+__exportStar(require("./input/InputCheckbox.component"), exports);
+__exportStar(require("./input/InputCurrency.component"), exports);
+__exportStar(require("./input/InputDate.component"), exports);
+__exportStar(require("./input/InputDatetime.component"), exports);
+__exportStar(require("./input/InputDocument.component"), exports);
+__exportStar(require("./input/InputImage.component"), exports);
+__exportStar(require("./input/InputMap.component"), exports);
+__exportStar(require("./input/InputNumber.component"), exports);
+__exportStar(require("./input/InputOtp.component"), exports);
+__exportStar(require("./input/InputPassword.component"), exports);
+__exportStar(require("./input/InputRadio.component"), exports);
+__exportStar(require("./input/InputTime.component"), exports);
+__exportStar(require("./input/InputValues.component"), exports);
+__exportStar(require("./input/Radio.component"), exports);
+__exportStar(require("./input/Select.component"), exports);
+__exportStar(require("./modal/BottomSheet.component"), exports);
+__exportStar(require("./modal/FloatingPage.component"), exports);
+__exportStar(require("./modal/Modal.component"), exports);
+__exportStar(require("./modal/ModalConfirm.component"), exports);
+__exportStar(require("./modal/Toast.component"), exports);
+__exportStar(require("./nav/Bottombar.component"), exports);
+__exportStar(require("./nav/Footer.component"), exports);
+__exportStar(require("./nav/Headbar.component"), exports);
+__exportStar(require("./nav/Navbar.component"), exports);
+__exportStar(require("./nav/Sidebar.component"), exports);
+__exportStar(require("./nav/Tabbar.component"), exports);
+__exportStar(require("./nav/Wizard.component"), exports);
+__exportStar(require("./supervision/FormSupervision.component"), exports);
+__exportStar(require("./supervision/TableSupervision.component"), exports);
+__exportStar(require("./table/ControlBar.component"), exports);
+__exportStar(require("./table/FilterComponent"), exports);
+__exportStar(require("./table/Pagination.component"), exports);
+__exportStar(require("./table/Table.component"), exports);
+__exportStar(require("./typography/TypographyArticle.component"), exports);
+__exportStar(require("./typography/TypographyColumn.component"), exports);
+__exportStar(require("./typography/TypographyContent.component"), exports);
+__exportStar(require("./typography/TypographyTips.component"), exports);
+__exportStar(require("./wrap/Draggable.component"), exports);
+__exportStar(require("./wrap/Image.component"), exports);
+__exportStar(require("./wrap/OutsideClick.component"), exports);
+__exportStar(require("./wrap/ScrollContainer.component"), exports);
+__exportStar(require("./wrap/ShortcutProvider"), exports);
+__exportStar(require("./wrap/Swipe.component"), exports);
+const _utils_1 = require("@utils");
+const Table_component_js_1 = require("./table/Table.component.js");
+const Button_component_js_1 = require("./button/Button.component.js");
+const Select_component_js_1 = require("./input/Select.component.js");
+const Modal_component_js_1 = require("./modal/Modal.component.js");
+const FilterComponent_js_1 = require("./table/FilterComponent.js");
+const _contexts_1 = require("@contexts");
+_utils_1.registry.register("TableComponent", Table_component_js_1.TableComponent);
+_utils_1.registry.register("ButtonComponent", Button_component_js_1.ButtonComponent);
+_utils_1.registry.register("SelectComponent", Select_component_js_1.SelectComponent);
+_utils_1.registry.register("ModalComponent", Modal_component_js_1.ModalComponent);
+_utils_1.registry.register("FilterComponent", FilterComponent_js_1.FilterComponent);
+_utils_1.registry.register("useToggleContext", _contexts_1.useToggleContext);

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

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