@skalfa/skalfa-component 1.0.0

package/dist/src/typography/TypographyArticle.component.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+export interface TypographyArticleProps {
+    title: string | ReactNode;
+    content: string | ReactNode;
+    header?: string | ReactNode;
+    footer?: string | ReactNode;
+}
+export declare function TypographyArticleComponent({ title, content, header, footer, }: TypographyArticleProps): import("react").JSX.Element;

package/dist/src/typography/TypographyArticle.component.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TypographyArticleComponent = TypographyArticleComponent;
+const jsx_runtime_1 = require("react/jsx-runtime");
+function TypographyArticleComponent({ title, content, header, footer, }) {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h4", { className: "typography-article-header", children: header }), (0, jsx_runtime_1.jsx)("h1", { className: "typography-article-title", children: title }), (0, jsx_runtime_1.jsx)("div", { className: "typography-article-content", children: content }), (0, jsx_runtime_1.jsx)("div", { className: "typography-article-footer", children: footer })] }));
+}

package/dist/src/typography/TypographyColumn.component.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+export interface TypographyColumnProps {
+    title: string | ReactNode;
+    content: string | ReactNode;
+}
+export declare function TypographyColumnComponent({ title, content, }: TypographyColumnProps): import("react").JSX.Element;

package/dist/src/typography/TypographyColumn.component.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TypographyColumnComponent = TypographyColumnComponent;
+const jsx_runtime_1 = require("react/jsx-runtime");
+function TypographyColumnComponent({ title, content, }) {
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "typography-column-title", children: title }), (0, jsx_runtime_1.jsx)("div", { children: content })] }) }));
+}

package/dist/src/typography/TypographyContent.component.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+export interface TypographyContentProps {
+    title: string | ReactNode;
+    content: string | ReactNode;
+}
+export declare function TypographyContentComponent({ title, content, }: TypographyContentProps): import("react").JSX.Element;

package/dist/src/typography/TypographyContent.component.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TypographyContentComponent = TypographyContentComponent;
+const jsx_runtime_1 = require("react/jsx-runtime");
+function TypographyContentComponent({ title, content, }) {
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("p", { className: "typography-content-title", children: title }), (0, jsx_runtime_1.jsx)("p", { className: "typography-content-body", children: content })] }) }));
+}

package/dist/src/typography/TypographyTips.component.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+export interface TypographyTipsProps {
+    title: string | ReactNode;
+    content: string | ReactNode;
+}
+export declare function TypographyTipsComponent({ title, content, }: TypographyTipsProps): import("react").JSX.Element;

package/dist/src/typography/TypographyTips.component.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TypographyTipsComponent = TypographyTipsComponent;
+const jsx_runtime_1 = require("react/jsx-runtime");
+function TypographyTipsComponent({ title, content, }) {
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { className: "typography-tips", children: [(0, jsx_runtime_1.jsx)("p", { className: "typography-tips-title", children: title }), (0, jsx_runtime_1.jsx)("p", { className: "typography-tips-body", children: content })] }) }));
+}

package/dist/src/wrap/Draggable.component.d.ts

@@ -0,0 +1,34 @@
+import { ReactNode, CSSProperties } from 'react';
+type SpringConfig = {
+    stiffness?: number;
+    damping?: number;
+    mass?: number;
+    stopThreshold?: number;
+};
+type Bounds = {
+    left?: number;
+    top?: number;
+    right?: number;
+    bottom?: number;
+};
+type DraggableProps = {
+    children?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+    initial?: {
+        x?: number;
+        y?: number;
+    };
+    bounds?: Bounds;
+    spring?: SpringConfig;
+    onDrag?: (state: {
+        x: number;
+        y: number;
+        vx: number;
+        vy: number;
+        dragging: boolean;
+    }) => void;
+    useTranslate3d?: boolean;
+};
+export declare const DraggableComponent: import("react").ForwardRefExoticComponent<DraggableProps & import("react").RefAttributes<unknown>>;
+export {};

package/dist/src/wrap/Draggable.component.js

@@ -0,0 +1,214 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DraggableComponent = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+// -----------------------------------------------------
+// DraggableComponent
+// -----------------------------------------------------
+exports.DraggableComponent = (0, react_1.forwardRef)(function DraggableComponent({ children, className, style, initial = { x: 0, y: 0 }, bounds, spring, onDrag, useTranslate3d = true, }, ref) {
+    const elRef = (0, react_1.useRef)(null);
+    const frameRef = (0, react_1.useRef)(null);
+    const draggingRef = (0, react_1.useRef)(false);
+    const pointerIdRef = (0, react_1.useRef)(null);
+    const stateRef = (0, react_1.useRef)({ x: initial.x || 0, y: initial.y || 0, vx: 0, vy: 0 });
+    const targetRef = (0, react_1.useRef)({ x: initial.x || 0, y: initial.y || 0 });
+    const historyRef = (0, react_1.useRef)([]);
+    const cfg = {
+        stiffness: spring?.stiffness ?? 180,
+        damping: spring?.damping ?? 24,
+        mass: spring?.mass ?? 1,
+        stopThreshold: spring?.stopThreshold ?? 0.02,
+    };
+    const [, setTick] = (0, react_1.useState)(0);
+    const now = () => performance.now();
+    function applyStyle(x, y) {
+        const el = elRef.current;
+        if (!el)
+            return;
+        const transform = useTranslate3d ? `translate3d(${x}px, ${y}px, 0)` : `translate(${x}px, ${y}px)`;
+        el.style.transform = transform;
+    }
+    function clampToBounds(x, y) {
+        if (!bounds)
+            return { x, y };
+        return {
+            x: Math.max(bounds.left ?? -Infinity, Math.min(x, bounds.right ?? Infinity)),
+            y: Math.max(bounds.top ?? -Infinity, Math.min(y, bounds.bottom ?? Infinity)),
+        };
+    }
+    function estimateVelocity() {
+        const h = historyRef.current;
+        if (h.length < 2)
+            return { vx: 0, vy: 0 };
+        const last = h[h.length - 1];
+        const threshold = 50;
+        let idx = h.length - 2;
+        while (idx > 0 && last.t - h[idx].t < threshold)
+            idx--;
+        const prev = h[idx];
+        const dt = Math.max(1, last.t - prev.t);
+        return {
+            vx: (last.x - prev.x) / (dt / 1000),
+            vy: (last.y - prev.y) / (dt / 1000),
+        };
+    }
+    function cancelFrame() {
+        if (frameRef.current != null) {
+            cancelAnimationFrame(frameRef.current);
+            frameRef.current = null;
+        }
+    }
+    function startSpringAnimation(initVX = 0, initVY = 0) {
+        cancelFrame();
+        const mass = cfg.mass;
+        const k = cfg.stiffness;
+        const c = cfg.damping;
+        stateRef.current.vx = initVX;
+        stateRef.current.vy = initVY;
+        let lastTime = now();
+        function step() {
+            const t = now();
+            const dt = Math.min(32, t - lastTime) / 1000;
+            lastTime = t;
+            const sx = stateRef.current.x;
+            const sy = stateRef.current.y;
+            const vx = stateRef.current.vx;
+            const vy = stateRef.current.vy;
+            const tx = targetRef.current.x;
+            const ty = targetRef.current.y;
+            const ax = (-c * vx - k * (sx - tx)) / mass;
+            const ay = (-c * vy - k * (sy - ty)) / mass;
+            const nvx = vx + ax * dt;
+            const nvy = vy + ay * dt;
+            const nx = sx + nvx * dt;
+            const ny = sy + nvy * dt;
+            stateRef.current.x = nx;
+            stateRef.current.y = ny;
+            stateRef.current.vx = nvx;
+            stateRef.current.vy = nvy;
+            applyStyle(nx, ny);
+            onDrag?.({ x: nx, y: ny, vx: nvx, vy: nvy, dragging: false });
+            const disp = Math.hypot(nx - tx, ny - ty);
+            const vel = Math.hypot(nvx, nvy);
+            if (disp < cfg.stopThreshold && vel < cfg.stopThreshold) {
+                stateRef.current.x = tx;
+                stateRef.current.y = ty;
+                stateRef.current.vx = 0;
+                stateRef.current.vy = 0;
+                applyStyle(tx, ty);
+                onDrag?.({ x: tx, y: ty, vx: 0, vy: 0, dragging: false });
+                frameRef.current = null;
+                return;
+            }
+            frameRef.current = requestAnimationFrame(step);
+        }
+        frameRef.current = requestAnimationFrame(step);
+    }
+    // -------------------------------------------------------------------
+    // Expose API ke parent: setTarget & setPositionImmediate
+    // -------------------------------------------------------------------
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        setTarget(pos) {
+            targetRef.current.x = pos.x;
+            targetRef.current.y = pos.y;
+            startSpringAnimation(0, 0);
+        },
+        setPosition(pos) {
+            stateRef.current.x = pos.x;
+            stateRef.current.y = pos.y;
+            targetRef.current.x = pos.x;
+            targetRef.current.y = pos.y;
+            applyStyle(pos.x, pos.y);
+        },
+    }));
+    (0, react_1.useEffect)(() => {
+        const el = elRef.current;
+        if (!el)
+            return;
+        function onDown(e) {
+            if (e.pointerType === 'mouse' && e.button !== 0)
+                return;
+            e.target.setPointerCapture?.(e.pointerId);
+            pointerIdRef.current = e.pointerId;
+            draggingRef.current = true;
+            cancelFrame();
+            historyRef.current = [{ t: now(), x: stateRef.current.x, y: stateRef.current.y }];
+            el.__dragBase = {
+                px: e.clientX,
+                py: e.clientY,
+                startX: stateRef.current.x,
+                startY: stateRef.current.y,
+            };
+            onDrag?.({
+                x: stateRef.current.x,
+                y: stateRef.current.y,
+                vx: 0,
+                vy: 0,
+                dragging: true,
+            });
+        }
+        function onMove(e) {
+            if (!draggingRef.current)
+                return;
+            if (pointerIdRef.current !== null && e.pointerId !== pointerIdRef.current)
+                return;
+            const base = el.__dragBase;
+            if (!base)
+                return;
+            let nx = base.startX + (e.clientX - base.px);
+            let ny = base.startY + (e.clientY - base.py);
+            ({ x: nx, y: ny } = clampToBounds(nx, ny));
+            historyRef.current.push({ t: now(), x: nx, y: ny });
+            if (historyRef.current.length > 8)
+                historyRef.current.shift();
+            stateRef.current.x = nx;
+            stateRef.current.y = ny;
+            stateRef.current.vx = 0;
+            stateRef.current.vy = 0;
+            applyStyle(nx, ny);
+            onDrag?.({ x: nx, y: ny, vx: 0, vy: 0, dragging: true });
+            setTick(t => t + 1);
+        }
+        function onUp(e) {
+            if (!draggingRef.current)
+                return;
+            if (pointerIdRef.current !== null && e.pointerId !== pointerIdRef.current)
+                return;
+            e.target.releasePointerCapture?.(e.pointerId);
+            draggingRef.current = false;
+            pointerIdRef.current = null;
+            const { vx, vy } = estimateVelocity();
+            let tx = stateRef.current.x;
+            let ty = stateRef.current.y;
+            ({ x: tx, y: ty } = clampToBounds(tx, ty));
+            targetRef.current.x = tx;
+            targetRef.current.y = ty;
+            startSpringAnimation(vx, vy);
+        }
+        el.addEventListener('pointerdown', onDown);
+        window.addEventListener('pointermove', onMove);
+        window.addEventListener('pointerup', onUp);
+        window.addEventListener('pointercancel', onUp);
+        return () => {
+            el.removeEventListener('pointerdown', onDown);
+            window.removeEventListener('pointermove', onMove);
+            window.removeEventListener('pointerup', onUp);
+            window.removeEventListener('pointercancel', onUp);
+            cancelFrame();
+        };
+    }, [bounds]);
+    // initial pos
+    (0, react_1.useEffect)(() => {
+        stateRef.current.x = initial.x || 0;
+        stateRef.current.y = initial.y || 0;
+        applyStyle(initial.x || 0, initial.y || 0);
+    }, []);
+    return ((0, jsx_runtime_1.jsx)("div", { ref: elRef, className: className, style: {
+            touchAction: 'none',
+            cursor: 'grab',
+            display: 'inline-block',
+            ...style,
+        }, onMouseDown: (e) => e.preventDefault(), children: children }));
+});

package/dist/src/wrap/Image.component.d.ts

@@ -0,0 +1,2 @@
+import { ImageProps } from "next/image";
+export declare function ImageComponent(props: ImageProps): import("react").JSX.Element;

package/dist/src/wrap/Image.component.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImageComponent = ImageComponent;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable jsx-a11y/alt-text */
+const image_1 = __importDefault(require("next/image"));
+function ImageComponent(props) {
+    const isProd = process.env.NODE_ENV === "production";
+    return (0, jsx_runtime_1.jsx)(image_1.default, { ...props, unoptimized: !isProd });
+}

package/dist/src/wrap/OutsideClick.component.d.ts

@@ -0,0 +1,6 @@
+import { FC, ReactNode } from "react";
+export interface OutsideClickHandlerProps {
+    children: ReactNode;
+    onOutsideClick?: () => void;
+}
+export declare const OutsideClickComponent: FC<OutsideClickHandlerProps>;

package/dist/src/wrap/OutsideClick.component.js

@@ -0,0 +1,34 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OutsideClickComponent = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const OutsideClickComponent = ({ children, onOutsideClick, }) => {
+    const ref = (0, react_1.useRef)(null);
+    const handlerRef = (0, react_1.useRef)(onOutsideClick);
+    (0, react_1.useEffect)(() => {
+        handlerRef.current = onOutsideClick;
+    }, [onOutsideClick]);
+    (0, react_1.useEffect)(() => {
+        const handlePointerDown = (event) => {
+            const el = ref.current;
+            if (!el || !(event.target instanceof Node))
+                return;
+            const isOutside = !el.contains(event.target);
+            if (isOutside) {
+                queueMicrotask(() => {
+                    if (ref.current && !ref.current.contains(event.target)) {
+                        handlerRef.current?.();
+                    }
+                });
+            }
+        };
+        document.addEventListener("pointerdown", handlePointerDown, true);
+        return () => {
+            document.removeEventListener("pointerdown", handlePointerDown, true);
+        };
+    }, []);
+    return (0, jsx_runtime_1.jsx)("div", { ref: ref, children: children });
+};
+exports.OutsideClickComponent = OutsideClickComponent;

package/dist/src/wrap/ScrollContainer.component.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+export interface ScrollContainerProps {
+    children: ReactNode;
+    footer?: ReactNode;
+    scrollFloating?: boolean;
+    onScroll?: (e: any) => void;
+    /** Use custom class with: "container::", "floating-scroll::"". */
+    className?: string;
+}
+export declare function ScrollContainerComponent({ children, footer, className, scrollFloating, onScroll, }: ScrollContainerProps): import("react").JSX.Element;

package/dist/src/wrap/ScrollContainer.component.js

@@ -0,0 +1,54 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScrollContainerComponent = ScrollContainerComponent;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const _utils_1 = require("@utils");
+const react_1 = require("react");
+function ScrollContainerComponent({ children, footer, className = "", scrollFloating = false, onScroll, }) {
+    const containerRef = (0, react_1.useRef)(null);
+    const floatingScrollbarRef = (0, react_1.useRef)(null);
+    const floatingScrollbarContainerRef = (0, react_1.useRef)(null);
+    const [containerWidth, setContainerWidth] = (0, react_1.useState)(0);
+    (0, react_1.useEffect)(() => {
+        const handleScroll = () => {
+            if (!containerRef.current)
+                return;
+            onScroll?.(containerRef.current);
+        };
+        const container = containerRef.current;
+        if (container) {
+            handleScroll();
+            container.addEventListener("scroll", handleScroll);
+        }
+        return () => container?.removeEventListener("scroll", handleScroll);
+    }, []);
+    (0, react_1.useEffect)(() => {
+        const scrollContainer = containerRef.current;
+        const floatingScrollbar = floatingScrollbarRef.current;
+        if (!scrollContainer || !floatingScrollbar)
+            return;
+        const syncScroll = () => floatingScrollbar.scrollLeft = scrollContainer.scrollLeft;
+        const syncScrollReverse = () => scrollContainer.scrollLeft = floatingScrollbar.scrollLeft;
+        scrollContainer.addEventListener("scroll", syncScroll);
+        floatingScrollbar.addEventListener("scroll", syncScrollReverse);
+        return () => {
+            scrollContainer.removeEventListener("scroll", syncScroll);
+            floatingScrollbar.removeEventListener("scroll", syncScrollReverse);
+        };
+    }, []);
+    const handleResize = () => {
+        if (containerRef.current)
+            setContainerWidth(containerRef.current.offsetWidth);
+    };
+    (0, react_1.useEffect)(() => {
+        handleResize();
+        window.addEventListener("resize", handleResize);
+        return () => window.removeEventListener("resize", handleResize);
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (floatingScrollbarContainerRef.current)
+            floatingScrollbarContainerRef.current.style.width = `${containerWidth}px`;
+    }, [containerWidth]);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("relative", (0, _utils_1.pcn)(className, "base")), children: [(0, jsx_runtime_1.jsx)("div", { ref: containerRef, className: (0, _utils_1.cn)("scroll-container-main scroll", scrollFloating && "scroll-none", (0, _utils_1.pcn)(className, "container")), children: children }), (0, jsx_runtime_1.jsxs)("div", { className: "scroll-container-floating-bar", ref: floatingScrollbarContainerRef, children: [(0, jsx_runtime_1.jsx)("div", { ref: floatingScrollbarRef, className: (0, _utils_1.cn)(scrollFloating && "scroll-container-floating-wrapper scroll"), children: (0, jsx_runtime_1.jsx)("div", { className: "scroll-container-phantom-element", children: children }) }), footer] })] }));
+}

package/dist/src/wrap/ShortcutProvider.d.ts

@@ -0,0 +1 @@
+export declare function ShortcutProvider(): import("react").JSX.Element;

package/dist/src/wrap/ShortcutProvider.js

@@ -0,0 +1,42 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ShortcutProvider = ShortcutProvider;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const _utils_1 = require("@utils");
+const _contexts_1 = require("@contexts");
+const _components_1 = require("@components");
+function ShortcutProvider() {
+    const { setToggle, toggle } = (0, _contexts_1.useToggleContext)();
+    const shortcuts = _utils_1.shortcut.list();
+    (0, react_1.useEffect)(() => {
+        _utils_1.shortcut.init();
+    }, []);
+    (0, react_1.useEffect)(() => {
+        _utils_1.shortcut.register("ctrl+/", () => {
+            setToggle("MODAL_SHORTCUT_HELP");
+        }, "List Shortcut");
+    }, []);
+    function formatShortcutKey(key) {
+        return key
+            .split("+")
+            .map(k => {
+            if (k === "ctrl")
+                return "Ctrl";
+            if (k === "shift")
+                return "Shift";
+            if (k === "alt")
+                return "Alt";
+            if (k === "arrowup")
+                return "↑";
+            if (k === "arrowdown")
+                return "↓";
+            if (k === " ")
+                return "SPACE";
+            return k.toUpperCase();
+        })
+            .join(" + ");
+    }
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(_components_1.ModalComponent, { show: !!toggle["MODAL_SHORTCUT_HELP"], onClose: () => setToggle("MODAL_SHORTCUT_HELP"), title: "Shortcut", children: (0, jsx_runtime_1.jsx)("div", { className: "shortcut-help-grid", children: shortcuts.map(({ key, description }) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("kbd", { className: "shortcut-key-badge", children: formatShortcutKey(key) }), (0, jsx_runtime_1.jsxs)("span", { children: [": ", description] })] }, key))) }) }) }));
+}

package/dist/src/wrap/Swipe.component.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+export type SwipeActionType = {
+    label?: string;
+    icon?: any;
+    onAction?: () => void;
+    className?: string;
+};
+export type SwipeProps = {
+    leftActionControl?: SwipeActionType;
+    rightActionControl?: SwipeActionType;
+    children?: ReactNode;
+    className?: string;
+};
+export declare function SwipeComponent({ leftActionControl, rightActionControl, children, className, }: SwipeProps): import("react").JSX.Element;

package/dist/src/wrap/Swipe.component.js

@@ -0,0 +1,61 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SwipeComponent = SwipeComponent;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const utils_1 = require("@/utils");
+const react_fontawesome_1 = require("@fortawesome/react-fontawesome");
+function SwipeComponent({ leftActionControl, rightActionControl, children, className, }) {
+    const startX = (0, react_1.useRef)(0);
+    const [offset, setOffset] = (0, react_1.useState)(0);
+    const [dragging, setDragging] = (0, react_1.useState)(false);
+    function onTouchStart(e) {
+        setDragging(true);
+        startX.current = e.touches[0].clientX - offset;
+    }
+    function onTouchMove(e) {
+        if (!dragging)
+            return;
+        const currentX = e.touches[0].clientX;
+        const delta = currentX - startX.current;
+        let allowed = delta;
+        // Jika tidak ada aksi kiri → larang geser ke kanan
+        if (!leftActionControl && delta > 0)
+            allowed = 0;
+        // Jika tidak ada aksi kanan → larang geser ke kiri
+        if (!rightActionControl && delta < 0)
+            allowed = 0;
+        // Batasi maksimal ±100px
+        allowed = Math.max(Math.min(allowed, 100), -100);
+        setOffset(allowed);
+    }
+    function onTouchEnd() {
+        if (!dragging)
+            return;
+        setDragging(false);
+        if (offset > 40 && leftActionControl) {
+            setOffset(80);
+        }
+        else if (offset < -40 && rightActionControl) {
+            setOffset(-80);
+        }
+        else {
+            setOffset(0);
+        }
+    }
+    function handleAction(side) {
+        const control = side === 'left' ? leftActionControl : rightActionControl;
+        control?.onAction?.();
+        setOffset(0);
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("swipe-container", className), children: [(0, jsx_runtime_1.jsxs)("div", { onClick: () => handleAction('left'), className: (0, utils_1.cn)("swipe-left-action", leftActionControl?.className, offset > 0 ? "opacity-100" : "opacity-0"), children: [leftActionControl?.icon && (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: leftActionControl?.icon }), " ", leftActionControl?.label] }), (0, jsx_runtime_1.jsxs)("div", { onClick: () => handleAction('right'), className: (0, utils_1.cn)("swipe-right-action", rightActionControl?.className, offset < 0 ? "opacity-100" : "opacity-0"), children: [rightActionControl?.icon && (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: rightActionControl?.icon }), " ", rightActionControl?.label] }), (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("swipe-content", className), style: {
+                    transform: `translateX(${offset}px)`,
+                    transition: dragging ? "none" : "transform 0.2s ease",
+                }, onTouchStart: onTouchStart, onTouchMove: onTouchMove, onTouchEnd: onTouchEnd, onClickCapture: (e) => {
+                    if (offset !== 0) {
+                        setOffset(0);
+                        e.stopPropagation();
+                    }
+                }, children: children })] }));
+}

package/dist/supervision/FormSupervision.component.d.ts

@@ -0,0 +1,93 @@
+import { ReactNode } from "react";
+import { ApiType, FormErrorType, FormRegisterType, FormValueType, ValidationRules, DBSchema } from "@utils";
+import { InputProps, InputCheckboxProps, InputCurrencyProps, InputDateProps, InputNumberProps, InputRadioProps, SelectProps, InputPasswordProps, InputOtpProps, InputTimeProps, InputImageProps, InputDateTimeProps, InputMapProps } from "@components";
+type formCustomConstructionProps = ({ formControl, values, setValues, setRegister, errors, setErrors, }: {
+    formControl: (name: string) => {
+        register: (regName: string, regValidations?: ValidationRules | undefined) => void;
+        unregister: (regName: string) => void;
+        onChange: (e: any) => void;
+        value: any;
+        invalid: any;
+    };
+    values: {
+        name: string;
+        value?: any;
+    }[];
+    setValues: (values: FormValueType[]) => void;
+    errors: FormErrorType[];
+    setErrors: (errors: FormErrorType[]) => void;
+    setRegister: (registers: FormRegisterType) => void;
+    prefixName?: string;
+}) => ReactNode;
+type ClusterConstruction = {
+    name: string;
+    label: string;
+    tip: string;
+    fields: FormType[];
+    wrap: boolean;
+    min?: number;
+    /** Use custom class with: "label::", "tip::", "error::", "icon::", "suggest::", "suggest-item::". */
+    className: string;
+};
+type ConstructionMap = {
+    default: InputProps;
+    check: InputCheckboxProps;
+    currency: InputCurrencyProps;
+    date: InputDateProps;
+    datetime: InputDateTimeProps;
+    time: InputTimeProps;
+    image: InputImageProps;
+    cluster: ClusterConstruction;
+    number: InputNumberProps;
+    radio: InputRadioProps;
+    select: SelectProps;
+    "enter-password": InputPasswordProps;
+    otp: InputOtpProps;
+    map: InputMapProps;
+    custom: formCustomConstructionProps;
+};
+type TypeKeys = keyof ConstructionMap;
+export type WatchContext = {
+    values: Record<string, any>;
+    self: string;
+    prev: WatchAction;
+};
+export type WatchAction = {
+    disabled?: boolean;
+    hidden?: boolean;
+    value?: any;
+    required?: boolean;
+    readonly?: boolean;
+    reset?: boolean;
+};
+export interface FormType<T extends TypeKeys = keyof ConstructionMap> {
+    col?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | string;
+    className?: string;
+    construction?: ConstructionMap[T];
+    type?: T;
+    onHide?: (values: any) => boolean;
+    watch?: (ctx: WatchContext) => WatchAction | undefined;
+}
+export interface formSupervisionProps {
+    title?: string;
+    fields: FormType[];
+    confirmation?: boolean;
+    defaultValue?: object | null;
+    payload?: (values: any) => Promise<object> | object;
+    submitControl: (ApiType & {
+        idb?: never;
+    }) | {
+        idb: {
+            store: string;
+            schema?: DBSchema;
+        };
+    };
+    footerControl?: ({ loading }: {
+        loading: boolean;
+    }) => ReactNode;
+    onSuccess?: (data: any) => void;
+    onError?: (code: number) => void;
+    className?: string;
+}
+export declare function FormSupervisionComponent({ title, fields, submitControl, confirmation, defaultValue, onSuccess, onError, footerControl, payload, className, }: formSupervisionProps): import("react").JSX.Element;
+export {};