mtxuilib 0.1.514 → 0.1.516

package/dist/components/AutoResizingTextarea.d.ts

@@ -0,0 +1,10 @@
+import { type ChangeEventHandler } from "react";
+type Props = {
+    value: string;
+    onChange?: ChangeEventHandler<HTMLTextAreaElement>;
+    className?: string;
+    readOnly?: boolean;
+    placeholder?: string;
+};
+export declare function AutoResizingTextarea({ value, onChange, className, readOnly, placeholder, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/AutoResizingTextarea.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "mtxuilib/lib/utils";
+import { Textarea } from "mtxuilib/ui/textarea";
+import { useLayoutEffect, useRef } from "react";
+export function AutoResizingTextarea({ value, onChange, className, readOnly, placeholder, }) {
+    const ref = useRef(null);
+    useLayoutEffect(() => {
+        if (!ref.current) {
+            return;
+        }
+        ref.current.style.height = `${ref.current.scrollHeight + 2}px`;
+    }, []);
+    function setSize() {
+        if (!ref.current) {
+            return;
+        }
+        ref.current.style.height = "auto";
+        ref.current.style.height = `${ref.current.scrollHeight + 2}px`;
+    }
+    return (_jsx(Textarea, { value: value, onChange: onChange, readOnly: readOnly, placeholder: placeholder, ref: ref, onKeyDown: setSize, onInput: setSize, rows: 1, className: cn("min-h-0 resize-none overflow-y-hidden", className) }));
+}

package/dist/components/devtools/DebugValue.js

@@ -1,15 +1,19 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Dialog, DialogContent, DialogTrigger } from "mtxuilib/ui/dialog";
-import { MtButton } from "mtxuilib/ui/mt/Button";
+import { TooltipContent } from "@radix-ui/react-tooltip";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, } from "mtxuilib/ui/dialog";
 import { useState } from "react";
+import { Icons } from "../../icons/icons";
+import { Button } from "../../ui/button";
+import { Tooltip, TooltipTrigger } from "../../ui/tooltip";
 export const DebugValue = (props) => {
     const { title, data, className } = props;
     const [open, setOpen] = useState(false);
     if (process.env.NODE_ENV === "production") {
         return null;
     }
-    return (_jsxs(Dialog, { open: open, onOpenChange: setOpen, children: [_jsx(DialogTrigger, { asChild: true, children: _jsx(MtButton, { variant: "outline", className: className, onClick: () => {
-                        console.log(data);
-                    }, children: title || "调试" }) }), _jsx(DialogContent, { className: "max-h-lvh w-full overflow-scroll ", children: _jsx("pre", { className: " text-xs", children: JSON.stringify(data, null, 2) }) })] }));
+    return (_jsxs(Dialog, { open: open, onOpenChange: setOpen, children: [_jsx(DialogTrigger, { asChild: true, children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { size: "icon", variant: "outline", className: className, onClick: () => {
+                                    setOpen(!open);
+                                    console.log(data);
+                                }, children: _jsx(Icons.bug, { className: "size-4" }) }) }), _jsx(TooltipContent, { children: title })] }) }), _jsxs(DialogContent, { className: "max-h-lvh w-full overflow-scroll min-w-xl ", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: title }), _jsx(DialogDescription, { className: "text-sm", children: " " })] }), _jsx("pre", { className: " text-xs", children: JSON.stringify(data, null, 2) })] })] }));
 };

package/dist/components/hidden-copyable-input.d.ts

@@ -0,0 +1,5 @@
+type Props = {
+    value: string;
+};
+export declare function HiddenCopyableInput({ value }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/hidden-copyable-input.js

@@ -0,0 +1,23 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckIcon, CopyIcon } from "@radix-ui/react-icons";
+import { useState } from "react";
+import { copyText } from "../lib/utils";
+import { Button } from "../ui/button";
+import { Input } from "../ui/input";
+export function HiddenCopyableInput({ value }) {
+    const [hidden, setHidden] = useState(true);
+    const [copied, setCopied] = useState(false);
+    const buttonText = hidden ? "Reveal" : copied ? "Copied" : "Copy";
+    const inputValue = hidden ? "**** **** **** ****" : value;
+    return (_jsxs("div", { className: "relative w-full", children: [_jsx(Input, { value: inputValue, className: "h-10", readOnly: true }), _jsx("div", { className: "absolute inset-y-0 right-1 flex items-center", children: _jsxs(Button, { size: "sm", variant: "secondary", className: "cursor-pointer", onClick: () => {
+                        if (hidden) {
+                            setHidden(false);
+                            return;
+                        }
+                        copyText(value).then(() => {
+                            setCopied(true);
+                            setTimeout(() => setCopied(false), 3000);
+                        });
+                    }, children: [!hidden && !copied && _jsx(CopyIcon, { className: "mr-2 h-4 w-4" }), !hidden && copied && _jsx(CheckIcon, { className: "mr-2 h-4 w-4" }), buttonText] }) })] }));
+}

package/dist/icons/GarbageIcon.d.ts

@@ -0,0 +1,5 @@
+type Props = {
+    className?: string;
+};
+declare function GarbageIcon({ className }: Props): import("react/jsx-runtime").JSX.Element;
+export { GarbageIcon };

package/dist/icons/GarbageIcon.js

@@ -0,0 +1,6 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+function GarbageIcon({ className }) {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor", className: className, children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" }) }));
+}
+export { GarbageIcon };

package/dist/icons/SaveIcon.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/icons/SaveIcon.js

@@ -0,0 +1,5 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+function SaveIcon() {
+    return (_jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M7 3V6.4C7 6.96005 7 7.24008 7.10899 7.45399C7.20487 7.64215 7.35785 7.79513 7.54601 7.89101C7.75992 8 8.03995 8 8.6 8H15.4C15.9601 8 16.2401 8 16.454 7.89101C16.6422 7.79513 16.7951 7.64215 16.891 7.45399C17 7.24008 17 6.96005 17 6.4V4M17 21V14.6C17 14.0399 17 13.7599 16.891 13.546C16.7951 13.3578 16.6422 13.2049 16.454 13.109C16.2401 13 15.9601 13 15.4 13H8.6C8.03995 13 7.75992 13 7.54601 13.109C7.35785 13.2049 7.20487 13.3578 7.10899 13.546C7 13.7599 7 14.0399 7 14.6V21M21 9.32548V16.2C21 17.8802 21 18.7202 20.673 19.362C20.3854 19.9265 19.9265 20.3854 19.362 20.673C18.7202 21 17.8802 21 16.2 21H7.8C6.11984 21 5.27976 21 4.63803 20.673C4.07354 20.3854 3.6146 19.9265 3.32698 19.362C3 18.7202 3 17.8802 3 16.2V7.8C3 6.11984 3 5.27976 3.32698 4.63803C3.6146 4.07354 4.07354 3.6146 4.63803 3.32698C5.27976 3 6.11984 3 7.8 3H14.6745C15.1637 3 15.4083 3 15.6385 3.05526C15.8425 3.10425 16.0376 3.18506 16.2166 3.29472C16.4184 3.4184 16.5914 3.59135 16.9373 3.93726L20.0627 7.06274C20.4086 7.40865 20.5816 7.5816 20.7053 7.78343C20.8149 7.96237 20.8957 8.15746 20.9447 8.36154C21 8.59171 21 8.8363 21 9.32548Z", stroke: "#F8FAFC", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}

package/dist/lib/utils.d.ts

@@ -41,4 +41,5 @@ export declare const getMessageFromCode: (resultCode: string) => "Invalid creden
 export declare const copyClipboard: (obj: any) => void;
 export declare function isObject(object: any): boolean;
 export declare function deepEqual(object1: Record<string, any>, object2: Record<string, any>): boolean;
+export declare function copyText(text: string): Promise<void>;
 export {};

package/dist/lib/utils.js

@@ -264,3 +264,24 @@ export function deepEqual(object1, object2) {
     }
     return true;
 }
+export async function copyText(text) {
+    if ("clipboard" in navigator) {
+        return navigator.clipboard.writeText(text);
+    }
+    else {
+        const textArea = document.createElement("textarea");
+        textArea.value = text;
+        textArea.style.opacity = "0";
+        document.body.appendChild(textArea);
+        textArea.focus();
+        textArea.select();
+        const success = document.execCommand("copy");
+        document.body.removeChild(textArea);
+        if (success) {
+            return Promise.resolve();
+        }
+        else {
+            return Promise.reject();
+        }
+    }
+}

package/dist/ui/button.d.ts

@@ -1,7 +1,7 @@
 import { type VariantProps } from "class-variance-authority";
 import * as React from "react";
 declare const buttonVariants: (props?: ({
-    variant?: "link" | "secondary" | "destructive" | "default" | "outline" | "ghost" | null | undefined;
+    variant?: "link" | "secondary" | "destructive" | "default" | "outline" | "ghost" | "tertiary" | null | undefined;
     size?: "lg" | "sm" | "default" | "icon" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {

package/dist/ui/button.js

@@ -12,6 +12,7 @@ const buttonVariants = cva("inline-flex items-center justify-center whitespace-n
             secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
             ghost: "hover:bg-accent hover:text-accent-foreground",
             link: "text-primary underline-offset-4 hover:underline",
+            tertiary: "bg-tertiary/20 text-tertiary-foreground border border-slate-500 hover:bg-tertiary/10 rounded-lg",
         },
         size: {
             default: "h-9 px-4 py-2",

package/dist/ui/mt/multi-select.d.ts

@@ -0,0 +1,22 @@
+import { type VariantProps } from "class-variance-authority";
+import * as React from "react";
+declare const multiSelectVariants: (props?: ({
+    variant?: "secondary" | "destructive" | "default" | "inverted" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface MultiSelectProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof multiSelectVariants> {
+    options: {
+        label: string;
+        value: string;
+        icon?: React.ComponentType<{
+            className?: string;
+        }>;
+    }[];
+    onValueChange: (value: string[]) => void;
+    value: string[];
+    placeholder?: string;
+    maxCount?: number;
+    modalPopover?: boolean;
+    className?: string;
+}
+export declare const MultiSelect: React.ForwardRefExoticComponent<MultiSelectProps & React.RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/ui/mt/multi-select.js

@@ -0,0 +1,85 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import * as React from "react";
+import { CheckIcon, ChevronDownIcon, Cross2Icon, CrossCircledIcon, } from "@radix-ui/react-icons";
+import { CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, } from "cmdk";
+import { cn } from "../../lib/utils";
+import { Badge } from "../badge";
+import { Button } from "../button";
+import { Command } from "../command";
+import { Popover, PopoverContent, PopoverTrigger } from "../popover";
+import { Separator } from "../separator";
+const multiSelectVariants = cva("m-1", {
+    variants: {
+        variant: {
+            default: "border-foreground/10 text-foreground bg-card hover:bg-card/80",
+            secondary: "border-foreground/10 bg-secondary text-secondary-foreground hover:bg-secondary/80",
+            destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+            inverted: "inverted",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+    },
+});
+export const MultiSelect = React.forwardRef(({ options, onValueChange, variant, value, placeholder = "Select options", maxCount = 3, modalPopover = false, className, ...props }, ref) => {
+    const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);
+    const handleInputKeyDown = (event) => {
+        if (event.key === "Enter") {
+            setIsPopoverOpen(true);
+        }
+        else if (event.key === "Backspace" && !event.currentTarget.value) {
+            const newSelectedValues = [...value];
+            newSelectedValues.pop();
+            onValueChange(newSelectedValues);
+        }
+    };
+    const toggleOption = (option) => {
+        const newSelectedValues = value.includes(option)
+            ? value.filter((v) => v !== option)
+            : [...value, option];
+        onValueChange(newSelectedValues);
+    };
+    const handleClear = () => {
+        onValueChange([]);
+    };
+    const handleTogglePopover = () => {
+        setIsPopoverOpen((prev) => !prev);
+    };
+    const clearExtraOptions = () => {
+        const newSelectedValues = value.slice(0, maxCount);
+        onValueChange(newSelectedValues);
+    };
+    const toggleAll = () => {
+        if (value.length === options.length) {
+            handleClear();
+        }
+        else {
+            const allValues = options.map((option) => option.value);
+            onValueChange(allValues);
+        }
+    };
+    return (_jsxs(Popover, { open: isPopoverOpen, onOpenChange: setIsPopoverOpen, modal: modalPopover, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { ref: ref, ...props, onClick: handleTogglePopover, className: cn("flex h-auto min-h-8 w-full items-center justify-between rounded-md border bg-inherit p-1 hover:bg-inherit", className), children: value.length > 0 ? (_jsxs("div", { className: "flex w-full items-center justify-between", children: [_jsxs("div", { className: "flex flex-wrap items-center", children: [value.slice(0, maxCount).map((value) => {
+                                        const option = options.find((o) => o.value === value);
+                                        const IconComponent = option?.icon;
+                                        return (_jsxs(Badge, { className: cn(multiSelectVariants({ variant })), children: [IconComponent && (_jsx(IconComponent, { className: "mr-2 h-4 w-4" })), option?.label, _jsx(CrossCircledIcon, { className: "ml-2 h-4 w-4 cursor-pointer", onClick: (event) => {
+                                                        event.stopPropagation();
+                                                        toggleOption(value);
+                                                    } })] }, value));
+                                    }), value.length > maxCount && (_jsxs(Badge, { className: cn("border-foreground/1 bg-transparent text-foreground hover:bg-transparent", multiSelectVariants({ variant })), children: [`+ ${value.length - maxCount} more`, _jsx(CrossCircledIcon, { className: "ml-2 h-4 w-4 cursor-pointer", onClick: (event) => {
+                                                    event.stopPropagation();
+                                                    clearExtraOptions();
+                                                } })] }))] }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx(Cross2Icon, { className: "mx-2 h-4 cursor-pointer text-muted-foreground", onClick: (event) => {
+                                            event.stopPropagation();
+                                            handleClear();
+                                        } }), _jsx(Separator, { orientation: "vertical", className: "flex h-full min-h-6" }), _jsx(ChevronDownIcon, { className: "mx-2 h-4 cursor-pointer text-muted-foreground" })] })] })) : (_jsxs("div", { className: "mx-auto flex w-full items-center justify-between", children: [_jsx("span", { className: "mx-2 text-xs font-normal text-muted-foreground", children: placeholder }), _jsx(ChevronDownIcon, { className: "mx-2 h-4 cursor-pointer text-muted-foreground" })] })) }) }), _jsx(PopoverContent, { className: "w-auto p-0", align: "start", onEscapeKeyDown: () => setIsPopoverOpen(false), children: _jsxs(Command, { children: [_jsx(CommandInput, { placeholder: "Search...", onKeyDown: handleInputKeyDown }), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: "No results found." }), _jsxs(CommandGroup, { children: [_jsxs(CommandItem, { onSelect: toggleAll, className: "cursor-pointer", children: [_jsx("div", { className: cn("mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary", value.length === options.length
+                                                        ? "bg-primary text-primary-foreground"
+                                                        : "opacity-50 [&_svg]:invisible"), children: _jsx(CheckIcon, { className: "h-4 w-4" }) }), _jsx("span", { children: "(Select All)" })] }, "all"), options.map((option) => {
+                                            const isSelected = value.includes(option.value);
+                                            return (_jsxs(CommandItem, { onSelect: () => toggleOption(option.value), className: "cursor-pointer", children: [_jsx("div", { className: cn("mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary", isSelected
+                                                            ? "bg-primary text-primary-foreground"
+                                                            : "opacity-50 [&_svg]:invisible"), children: _jsx(CheckIcon, { className: "h-4 w-4" }) }), option.icon && (_jsx(option.icon, { className: "mr-2 h-4 w-4 text-muted-foreground" })), _jsx("span", { children: option.label })] }, option.value));
+                                        })] }), _jsx(CommandSeparator, {}), _jsx(CommandGroup, { children: _jsxs("div", { className: "flex items-center justify-between", children: [value.length > 0 && (_jsxs(_Fragment, { children: [_jsx(CommandItem, { onSelect: handleClear, className: "flex-1 cursor-pointer justify-center", children: "Clear" }), _jsx(Separator, { orientation: "vertical", className: "flex h-full min-h-6" })] })), _jsx(CommandItem, { onSelect: () => setIsPopoverOpen(false), className: "max-w-full flex-1 cursor-pointer justify-center", children: "Close" })] }) })] })] }) })] }));
+});
+MultiSelect.displayName = "MultiSelect";

package/dist/ui/scroll-area.d.ts

@@ -3,3 +3,4 @@ import * as React from "react";
 declare const ScrollArea: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const ScrollBar: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaScrollbarProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { ScrollArea, ScrollBar };
+export declare const ScrollAreaViewport: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaViewportProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/ui/scroll-area.js

@@ -10,3 +10,8 @@ const ScrollBar = React.forwardRef(({ className, orientation = "vertical", ...pr
         "h-2.5 flex-col border-t border-t-transparent p-px", className), ...props, children: _jsx(ScrollAreaPrimitive.ScrollAreaThumb, { className: cn("bg-border relative rounded-full", orientation === "vertical" && "flex-1") }) })));
 ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
 export { ScrollArea, ScrollBar };
+export const ScrollAreaViewport = React.forwardRef(({ children, ...props }, ref) => {
+    return (_jsx(ScrollAreaPrimitive.Viewport, { ref: ref, ...props, children: children }));
+});
+ScrollAreaViewport.displayName =
+    ScrollAreaPrimitive.ScrollAreaViewport.displayName;

package/package.json

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