mtxuilib 0.1.451 → 0.1.453

package/dist/lib/debounce.d.ts

@@ -0,0 +1 @@
+export declare function debounce<Args extends any[]>(fn: (...args: Args) => void, delay?: number): (...args: Args) => void;

package/dist/lib/debounce.js

@@ -0,0 +1,13 @@
+"use client";
+export function debounce(fn, delay = 100) {
+    if (delay === 0) {
+        return fn;
+    }
+    let timer;
+    return function (...args) {
+        clearTimeout(timer);
+        timer = window.setTimeout(() => {
+            fn.apply(this, args);
+        }, delay);
+    };
+}

package/dist/ui/mt/input-field/TextArea.js

@@ -1,10 +1,10 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Textarea } from "@headlessui/react";
 import { Label } from "@radix-ui/react-context-menu";
 import React from "react";
 import { useFormContext } from "react-hook-form";
 import { cn } from "../../../lib/utils";
+import { Textarea } from "../../textarea";
 const TextAreaField = React.forwardRef(({ name, label, className, type, placeholder, ...rest }) => {
     const methods = useFormContext();
     return (_jsxs("div", { className: "group relative", children: [_jsx(Textarea, { className: cn("mt-2", "peer p-4 outline-none"), placeholder: " ", ...methods.register(name) }), _jsx(Label, { className: cn("pointer-events-none absolute left-[9px] top-px -translate-y-1/2 px-1 text-sm text-gray-500 transition-all duration-300", "group-focus-within:!top-2 group-focus-within:!text-sm group-focus-within:!text-blue-500 peer-placeholder-shown:top-1/2 peer-placeholder-shown:text-xl"), children: label })] }));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mtxuilib",
   "private": false,
-  "version": "0.1.451",
+  "version": "0.1.453",
   "publishConfig": {
     "access": "public"
   },

package/dist/ui/mt/mt-tree-view/mt-tree-view-api.d.ts

@@ -1,39 +0,0 @@
-import * as AccordionPrimitive from "@radix-ui/react-accordion";
-import type React from "react";
-import { type ReactNode } from "react";
-type TreeViewElement = {
-    id: string;
-    name: string;
-    isSelectable?: boolean;
-    children?: TreeViewElement[];
-};
-interface TreeViewComponentProps extends React.HTMLAttributes<HTMLDivElement> {
-}
-declare const Tree: React.ForwardRefExoticComponent<{
-    initialSelectedId?: string;
-    indicator?: boolean;
-    elements?: TreeViewElement[];
-    initialExpendedItems?: string[];
-    openIcon?: React.ReactNode;
-    closeIcon?: React.ReactNode;
-} & TreeViewComponentProps & React.RefAttributes<HTMLDivElement>>;
-interface FolderComponentProps extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item> {
-}
-declare const Folder: React.ForwardRefExoticComponent<{
-    expendedItems?: string[];
-    element: ReactNode;
-    isSelectable?: boolean;
-    isSelect?: boolean;
-} & FolderComponentProps & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-declare const File: React.ForwardRefExoticComponent<{
-    value: string;
-    handleSelect?: (id: string) => void;
-    isSelectable?: boolean;
-    isSelect?: boolean;
-    fileIcon?: React.ReactNode;
-} & Omit<AccordionPrimitive.AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-declare const CollapseButton: React.ForwardRefExoticComponent<{
-    elements: TreeViewElement[];
-    expandAll?: boolean;
-} & React.HTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
-export { Tree, Folder, File, CollapseButton, type TreeViewElement };

package/dist/ui/mt/mt-tree-view/mt-tree-view-api.js

@@ -1,132 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as AccordionPrimitive from "@radix-ui/react-accordion";
-import { FileIcon, FolderIcon, FolderOpenIcon } from "lucide-react";
-import { createContext, forwardRef, useCallback, useContext, useEffect, useState, } from "react";
-import { cn } from "../../../lib/utils";
-import { Button } from "../../button";
-import { ScrollArea } from "../../scroll-area";
-const TreeContext = createContext(null);
-const useTree = () => {
-    const context = useContext(TreeContext);
-    if (!context) {
-        throw new Error("useTree must be used within a TreeProvider");
-    }
-    return context;
-};
-const Tree = forwardRef(({ className, elements, initialSelectedId, initialExpendedItems, children, indicator = true, openIcon, closeIcon, dir, ...props }, ref) => {
-    const [selectedId, setSelectedId] = useState(initialSelectedId);
-    const [expendedItems, setExpendedItems] = useState(initialExpendedItems);
-    const selectItem = useCallback((id) => {
-        setSelectedId(id);
-    }, []);
-    const handleExpand = useCallback((id) => {
-        setExpendedItems((prev) => {
-            if (prev?.includes(id)) {
-                return prev.filter((item) => item !== id);
-            }
-            return [...(prev ?? []), id];
-        });
-    }, []);
-    const expandSpecificTargetedElements = useCallback((elements, selectId) => {
-        if (!elements || !selectId)
-            return;
-        const findParent = (currentElement, currentPath = []) => {
-            const isSelectable = currentElement.isSelectable ?? true;
-            const newPath = [...currentPath, currentElement.id];
-            if (currentElement.id === selectId) {
-                if (isSelectable) {
-                    setExpendedItems((prev) => [...(prev ?? []), ...newPath]);
-                }
-                else {
-                    if (newPath.includes(currentElement.id)) {
-                        newPath.pop();
-                        setExpendedItems((prev) => [...(prev ?? []), ...newPath]);
-                    }
-                }
-                return;
-            }
-            if (isSelectable &&
-                currentElement.children &&
-                currentElement.children.length > 0) {
-                currentElement.children.forEach((child) => {
-                    findParent(child, newPath);
-                });
-            }
-        };
-        elements.forEach((element) => {
-            findParent(element);
-        });
-    }, []);
-    useEffect(() => {
-        if (initialSelectedId) {
-            expandSpecificTargetedElements(elements, initialSelectedId);
-        }
-    }, [initialSelectedId, elements]);
-    const direction = dir === "rtl" ? "rtl" : "ltr";
-    return (_jsx(TreeContext.Provider, { value: {
-            selectedId,
-            expendedItems,
-            handleExpand,
-            selectItem,
-            setExpendedItems,
-            indicator,
-            openIcon,
-            closeIcon,
-            direction,
-        }, children: _jsx("div", { className: cn("size-full", className), children: _jsx(ScrollArea, { ref: ref, className: "relative h-full px-2", dir: dir, children: _jsx(AccordionPrimitive.Root, { ...props, type: "multiple", defaultValue: expendedItems, value: expendedItems, className: "flex flex-col gap-1", onValueChange: (value) => setExpendedItems((prev) => [...(prev ?? []), value[0]]), dir: dir, children: children }) }) }) }));
-});
-Tree.displayName = "Tree";
-const TreeIndicator = forwardRef(({ className, ...props }, ref) => {
-    const { direction } = useTree();
-    return (_jsx("div", { dir: direction, ref: ref, className: cn("bg-muted absolute left-1.5 h-full w-px rounded-md py-3 duration-300 ease-in-out hover:bg-slate-300 rtl:right-1.5", className), ...props }));
-});
-TreeIndicator.displayName = "TreeIndicator";
-const Folder = forwardRef(({ className, element, value, isSelectable = true, isSelect, children, ...props }, ref) => {
-    const { direction, handleExpand, expendedItems, indicator, setExpendedItems, openIcon, closeIcon, } = useTree();
-    return (_jsxs(AccordionPrimitive.Item, { ...props, value: value, className: "relative h-full overflow-hidden ", children: [_jsxs(AccordionPrimitive.Trigger, { className: cn(`flex items-center gap-1 rounded-md text-sm`, className, {
-                    "bg-muted rounded-md": isSelect && isSelectable,
-                    "cursor-pointer": isSelectable,
-                    "cursor-not-allowed opacity-50": !isSelectable,
-                }), disabled: !isSelectable, onClick: () => handleExpand(value), children: [expendedItems?.includes(value)
-                        ? openIcon ?? _jsx(FolderOpenIcon, { className: "h-4 w-4" })
-                        : closeIcon ?? _jsx(FolderIcon, { className: "h-4 w-4" }), _jsx("span", { children: element })] }), _jsxs(AccordionPrimitive.Content, { className: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down relative h-full overflow-hidden text-sm", children: [element && indicator && _jsx(TreeIndicator, { "aria-hidden": "true" }), _jsx(AccordionPrimitive.Root, { dir: direction, type: "multiple", className: "ml-5 flex flex-col gap-1 py-1 rtl:mr-5 ", defaultValue: expendedItems, value: expendedItems, onValueChange: (value) => {
-                            setExpendedItems?.((prev) => [...(prev ?? []), value[0]]);
-                        }, children: children })] })] }));
-});
-Folder.displayName = "Folder";
-const File = forwardRef(({ value, className, handleSelect, isSelectable = true, isSelect, fileIcon, children, ...props }, ref) => {
-    const { direction, selectedId, selectItem } = useTree();
-    const isSelected = isSelect ?? selectedId === value;
-    return (_jsx(AccordionPrimitive.Item, { value: value, className: "relative", children: _jsxs(AccordionPrimitive.Trigger, { ref: ref, ...props, dir: direction, disabled: !isSelectable, "aria-label": "File", className: cn("flex items-center gap-1 cursor-pointer text-sm pr-1 rtl:pl-1 rtl:pr-0 rounded-md  duration-200 ease-in-out", {
-                "bg-muted": isSelected && isSelectable,
-            }, isSelectable ? "cursor-pointer" : "cursor-not-allowed opacity-50", className), onClick: () => selectItem(value), children: [fileIcon ?? _jsx(FileIcon, { className: "h-4 w-4" }), children] }) }));
-});
-File.displayName = "File";
-const CollapseButton = forwardRef(({ className, elements, expandAll = false, children, ...props }, ref) => {
-    const { expendedItems, setExpendedItems } = useTree();
-    const expendAllTree = useCallback((elements) => {
-        const expandTree = (element) => {
-            const isSelectable = element.isSelectable ?? true;
-            if (isSelectable && element.children && element.children.length > 0) {
-                setExpendedItems?.((prev) => [...(prev ?? []), element.id]);
-                element.children.forEach(expandTree);
-            }
-        };
-        elements.forEach(expandTree);
-    }, []);
-    const closeAll = useCallback(() => {
-        setExpendedItems?.([]);
-    }, []);
-    useEffect(() => {
-        console.log(expandAll);
-        if (expandAll) {
-            expendAllTree(elements);
-        }
-    }, [expandAll]);
-    return (_jsxs(Button, { variant: "ghost", className: "absolute bottom-1 right-2 h-8 w-fit p-1", onClick: expendedItems && expendedItems.length > 0
-            ? closeAll
-            : () => expendAllTree(elements), ref: ref, ...props, children: [children, _jsx("span", { className: "sr-only", children: "Toggle" })] }));
-});
-CollapseButton.displayName = "CollapseButton";
-export { Tree, Folder, File, CollapseButton };

package/dist/ui/mt/mt-tree-view/mt-treeview.d.ts

@@ -1,24 +0,0 @@
-import type React from "react";
-import { type TreeViewElement } from "./mt-tree-view-api";
-interface TreeViewComponentProps extends React.HTMLAttributes<HTMLDivElement> {
-}
-type TreeViewProps = {
-    initialSelectedId?: string;
-    elements: TreeViewElement[];
-    indicator?: boolean;
-} & ({
-    initialExpendedItems?: string[];
-    expandAll?: false;
-} | {
-    initialExpendedItems?: undefined;
-    expandAll: true;
-}) & TreeViewComponentProps;
-export declare const TreeView: {
-    ({ elements, className, initialSelectedId, initialExpendedItems, expandAll, indicator, }: TreeViewProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-export declare const TreeItem: React.ForwardRefExoticComponent<{
-    elements?: TreeViewElement[];
-    indicator?: boolean;
-} & React.HTMLAttributes<HTMLUListElement> & React.RefAttributes<HTMLUListElement>>;
-export {};

package/dist/ui/mt/mt-tree-view/mt-treeview.js

@@ -1,25 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useVirtualizer } from "@tanstack/react-virtual";
-import { forwardRef, useCallback, useRef } from "react";
-import useResizeObserver from "use-resize-observer";
-import { cn } from "../../../lib/utils";
-import { CollapseButton, File, Folder, Tree, } from "./mt-tree-view-api";
-export const TreeView = ({ elements, className, initialSelectedId, initialExpendedItems, expandAll, indicator = false, }) => {
-    const containerRef = useRef(null);
-    const { getVirtualItems, getTotalSize } = useVirtualizer({
-        count: elements.length,
-        getScrollElement: () => containerRef.current,
-        estimateSize: useCallback(() => 40, []),
-        overscan: 5,
-    });
-    const { height = getTotalSize(), width } = useResizeObserver({
-        ref: containerRef,
-    });
-    return (_jsx("div", { ref: containerRef, className: cn("w-full rounded-md overflow-hidden py-1 relative", className), children: _jsxs(Tree, { initialSelectedId: initialSelectedId, initialExpendedItems: initialExpendedItems, elements: elements, style: { height, width }, className: "w-full h-full overflow-y-auto", children: [getVirtualItems().map((element) => (_jsx(TreeItem, { "aria-label": "Root", elements: [elements[element.index]], indicator: indicator }, element.key))), _jsx(CollapseButton, { elements: elements, expandAll: expandAll, children: _jsx("span", { children: "Expand All" }) })] }) }));
-};
-TreeView.displayName = "TreeView";
-export const TreeItem = forwardRef(({ className, elements, indicator, ...props }, ref) => {
-    return (_jsx("ul", { ref: ref, className: "w-full space-y-1 ", ...props, children: elements?.map((element) => (_jsx("li", { className: "w-full", children: element.children && element.children?.length > 0 ? (_jsx(Folder, { element: element.name, value: element.id, isSelectable: element.isSelectable, children: _jsx(TreeItem, { "aria-label": `folder ${element.name}`, elements: element.children, indicator: indicator }, element.id) })) : (_jsx(File, { value: element.id, "aria-label": `File ${element.name}`, isSelectable: element.isSelectable, children: _jsx("span", { children: element?.name }) }, element.id)) }, element.id))) }));
-});
-TreeItem.displayName = "TreeItem";

package/dist/video-player/video-player2/modal-video-player.d.ts

@@ -1,12 +0,0 @@
-import type { StaticImageData } from "next/image";
-interface ModalVideoProps {
-    thumb: StaticImageData;
-    thumbWidth: number;
-    thumbHeight: number;
-    thumbAlt: string;
-    video: string;
-    videoWidth: number;
-    videoHeight: number;
-}
-export default function ModalVideo({ thumb, thumbWidth, thumbHeight, thumbAlt, video, videoWidth, videoHeight, }: ModalVideoProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/video-player/video-player2/modal-video-player.js

@@ -1,12 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Dialog, DialogPanel, Transition, TransitionChild, } from "@headlessui/react";
-import Image from "next/image";
-import { Fragment, useRef, useState } from "react";
-export default function ModalVideo({ thumb, thumbWidth, thumbHeight, thumbAlt, video, videoWidth, videoHeight, }) {
-    const [modalOpen, setModalOpen] = useState(false);
-    const videoRef = useRef(null);
-    return (_jsxs("div", { className: "flex justify-center", children: [_jsxs("button", { className: "group relative flex items-center justify-center rounded-3xl focus:outline-none focus-visible:ring focus-visible:ring-indigo-300", onClick: () => {
-                    setModalOpen(true);
-                }, "aria-label": "Watch the video", children: [_jsx(Image, { className: "rounded-3xl shadow-2xl transition-shadow duration-300 ease-in-out", src: thumb, width: thumbWidth, height: thumbHeight, priority: true, alt: thumbAlt }), _jsxs("svg", { className: "pointer-events-none absolute transition-transform duration-300 ease-in-out group-hover:scale-110", xmlns: "http://www.w3.org/2000/svg", width: "72", height: "72", children: [_jsx("circle", { className: "fill-white", cx: "36", cy: "36", r: "36", fillOpacity: ".8" }), _jsx("path", { className: "fill-indigo-500 drop-shadow-2xl", d: "M44 36a.999.999 0 0 0-.427-.82l-10-7A1 1 0 0 0 32 29V43a.999.999 0 0 0 1.573.82l10-7A.995.995 0 0 0 44 36V36c0 .001 0 .001 0 0Z" })] })] }), _jsx(Transition, { show: modalOpen, as: Fragment, afterEnter: () => videoRef.current?.play(), children: _jsxs(Dialog, { initialFocus: videoRef, onClose: () => setModalOpen(false), children: [_jsx(TransitionChild, { enter: "transition ease-out duration-200", enterFrom: "opacity-0", enterTo: "opacity-100", leave: "transition ease-out duration-100", leaveFrom: "opacity-100", leaveTo: "opacity-0", "aria-hidden": "true" }), _jsx(TransitionChild, { enter: "transition ease-out duration-300", enterFrom: "opacity-0 scale-75", enterTo: "opacity-100 scale-100", leave: "transition ease-out duration-200", leaveFrom: "opacity-100 scale-100", leaveTo: "opacity-0 scale-75", children: _jsx("div", { className: "mx-auto flex h-full max-w-5xl items-center", children: _jsx(DialogPanel, { className: "aspect-video max-h-full w-full overflow-hidden rounded-3xl bg-black shadow-2xl", children: _jsxs("video", { ref: videoRef, width: videoWidth, height: videoHeight, loop: true, controls: true, children: [_jsx("source", { src: video, type: "video/mp4" }), "Your browser does not support the video tag."] }) }) }) })] }) })] }));
-}