@skalfa/skalfa-component 1.0.2 → 1.0.3

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

@@ -1,214 +0,0 @@
-"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

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

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

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

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

@@ -1,34 +0,0 @@
-"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

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

@@ -1,54 +0,0 @@
-"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

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

package/dist/src/wrap/ShortcutProvider.js

@@ -1,42 +0,0 @@
-"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

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

@@ -1,61 +0,0 @@
-"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 })] }));
-}