mtxuilib 0.1.423 → 0.1.425

package/dist/lib/utils.d.ts

@@ -1,5 +1,7 @@
 import { type ClassValue } from "clsx";
 export declare function cn(...inputs: ClassValue[]): string;
+type ClassNamesArg = undefined | string | Record<string, boolean> | ClassNamesArg[];
+export declare function classNames(...args: ClassNamesArg[]): string;
 export declare function newUniqueId(): string;
 export declare function formatDate(input: string | number): string;
 export declare const randomString: (length: number) => string;
@@ -39,3 +41,4 @@ 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 {};

package/dist/lib/utils.js

@@ -4,6 +4,40 @@ import { twMerge } from "tailwind-merge";
 export function cn(...inputs) {
     return twMerge(clsx(inputs));
 }
+export function classNames(...args) {
+    let classes = "";
+    for (const arg of args) {
+        classes = appendClass(classes, parseValue(arg));
+    }
+    return classes;
+}
+function parseValue(arg) {
+    if (typeof arg === "string" || typeof arg === "number") {
+        return arg;
+    }
+    if (typeof arg !== "object") {
+        return "";
+    }
+    if (Array.isArray(arg)) {
+        return classNames(...arg);
+    }
+    let classes = "";
+    for (const key in arg) {
+        if (arg[key]) {
+            classes = appendClass(classes, key);
+        }
+    }
+    return classes;
+}
+function appendClass(value, newClass) {
+    if (!newClass) {
+        return value;
+    }
+    if (value) {
+        return `${value} ${newClass}`;
+    }
+    return value + newClass;
+}
 export function newUniqueId() {
     return randomString(10);
 }

package/dist/ui/mt/Dialog.d.ts

@@ -0,0 +1,57 @@
+import * as RadixDialog from "@radix-ui/react-dialog";
+import type React from "react";
+import { type ReactNode } from "react";
+export { Close as DialogClose, Root as DialogRoot, } from "@radix-ui/react-dialog";
+export declare const dialogBackdropVariants: {
+    closed: {
+        opacity: number;
+        transition: {
+            duration: number;
+            ease: (t: number) => number;
+        };
+    };
+    open: {
+        opacity: number;
+        transition: {
+            duration: number;
+            ease: (t: number) => number;
+        };
+    };
+};
+export declare const dialogVariants: {
+    closed: {
+        x: string;
+        y: string;
+        scale: number;
+        opacity: number;
+        transition: {
+            duration: number;
+            ease: (t: number) => number;
+        };
+    };
+    open: {
+        x: string;
+        y: string;
+        scale: number;
+        opacity: number;
+        transition: {
+            duration: number;
+            ease: (t: number) => number;
+        };
+    };
+};
+interface DialogButtonProps {
+    type: "primary" | "secondary" | "danger";
+    children: ReactNode;
+    onClick?: (event: React.UIEvent) => void;
+}
+export declare const DialogButton: React.MemoExoticComponent<({ type, children, onClick }: DialogButtonProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const DialogTitle: React.MemoExoticComponent<({ className, children, ...props }: RadixDialog.DialogTitleProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const DialogDescription: React.MemoExoticComponent<({ className, children, ...props }: RadixDialog.DialogDescriptionProps) => import("react/jsx-runtime").JSX.Element>;
+interface DialogProps {
+    children: ReactNode | ReactNode[];
+    className?: string;
+    onBackdrop?: (event: React.UIEvent) => void;
+    onClose?: (event: React.UIEvent) => void;
+}
+export declare const Dialog: React.MemoExoticComponent<({ className, children, onBackdrop, onClose }: DialogProps) => import("react/jsx-runtime").JSX.Element>;

package/dist/ui/mt/Dialog.js

@@ -0,0 +1,55 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as RadixDialog from "@radix-ui/react-dialog";
+import { motion } from "framer-motion";
+import { classNames } from "mtxuilib/lib/utils";
+import { memo } from "react";
+import { IconButton } from "./IconButton";
+import { cubicEasingFn } from "./utils/easings";
+export { Close as DialogClose, Root as DialogRoot, } from "@radix-ui/react-dialog";
+const transition = {
+    duration: 0.15,
+    ease: cubicEasingFn,
+};
+export const dialogBackdropVariants = {
+    closed: {
+        opacity: 0,
+        transition,
+    },
+    open: {
+        opacity: 1,
+        transition,
+    },
+};
+export const dialogVariants = {
+    closed: {
+        x: "-50%",
+        y: "-40%",
+        scale: 0.96,
+        opacity: 0,
+        transition,
+    },
+    open: {
+        x: "-50%",
+        y: "-50%",
+        scale: 1,
+        opacity: 1,
+        transition,
+    },
+};
+export const DialogButton = memo(({ type, children, onClick }) => {
+    return (_jsx("button", { type: "button", className: classNames("inline-flex h-[35px] items-center justify-center rounded-lg px-4 text-sm leading-none focus:outline-none", {
+            "bg-bolt-elements-button-primary-background text-bolt-elements-button-primary-text hover:bg-bolt-elements-button-primary-backgroundHover": type === "primary",
+            "bg-bolt-elements-button-secondary-background text-bolt-elements-button-secondary-text hover:bg-bolt-elements-button-secondary-backgroundHover": type === "secondary",
+            "bg-bolt-elements-button-danger-background text-bolt-elements-button-danger-text hover:bg-bolt-elements-button-danger-backgroundHover": type === "danger",
+        }), onClick: onClick, children: children }));
+});
+export const DialogTitle = memo(({ className, children, ...props }) => {
+    return (_jsx(RadixDialog.Title, { className: classNames("px-5 py-4 flex items-center justify-between border-b border-bolt-elements-borderColor text-lg font-semibold leading-6 text-bolt-elements-textPrimary", className), ...props, children: children }));
+});
+export const DialogDescription = memo(({ className, children, ...props }) => {
+    return (_jsx(RadixDialog.Description, { className: classNames("px-5 py-4 text-bolt-elements-textPrimary text-md", className), ...props, children: children }));
+});
+export const Dialog = memo(({ className, children, onBackdrop, onClose }) => {
+    return (_jsxs(RadixDialog.Portal, { children: [_jsx(RadixDialog.Overlay, { onClick: onBackdrop, asChild: true, children: _jsx(motion.div, { className: "bg-black/50 fixed inset-0 z-max", initial: "closed", animate: "open", exit: "closed", variants: dialogBackdropVariants }) }), _jsx(RadixDialog.Content, { asChild: true, children: _jsxs(motion.div, { className: classNames("fixed top-[50%] left-[50%] z-max max-h-[85vh] w-[90vw] max-w-[450px] translate-x-[-50%] translate-y-[-50%] border border-bolt-elements-borderColor rounded-lg bg-bolt-elements-background-depth-2 shadow-lg focus:outline-none overflow-hidden", className), initial: "closed", animate: "open", exit: "closed", variants: dialogVariants, children: [children, _jsx(RadixDialog.Close, { asChild: true, onClick: onClose, children: _jsx(IconButton, { icon: "i-ph:x", className: "absolute top-[10px] right-[10px]" }) })] }) })] }));
+});

package/dist/ui/mt/IconButton.d.ts

@@ -1,11 +1,22 @@
-import { type VariantProps } from "class-variance-authority";
-import React from "react";
-declare const iconButtonVariants: (props?: ({
-    variant?: "primary" | "secondary" | "default" | null | undefined;
-    size?: "lg" | "sm" | "default" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
-export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof iconButtonVariants> {
-    asChild?: boolean;
+import type React from "react";
+type IconSize = "sm" | "md" | "lg" | "xl" | "xxl";
+interface BaseIconButtonProps {
+    size?: IconSize;
+    className?: string;
+    iconClassName?: string;
+    disabledClassName?: string;
+    title?: string;
+    disabled?: boolean;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 }
-export declare const IconButton: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+type IconButtonWithoutChildrenProps = {
+    icon: string;
+    children?: undefined;
+} & BaseIconButtonProps;
+type IconButtonWithChildrenProps = {
+    icon?: undefined;
+    children: string | JSX.Element | JSX.Element[];
+} & BaseIconButtonProps;
+type IconButtonProps = IconButtonWithoutChildrenProps | IconButtonWithChildrenProps;
+export declare const IconButton: React.MemoExoticComponent<({ icon, size, className, iconClassName, disabledClassName, disabled, title, onClick, children, }: IconButtonProps) => import("react/jsx-runtime").JSX.Element>;
 export {};

package/dist/ui/mt/IconButton.js

@@ -1,29 +1,29 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Slot } from "@radix-ui/react-slot";
-import { cva } from "class-variance-authority";
-import React from "react";
-import { cn } from "../../lib/utils";
-const iconButtonVariants = cva("inline-flex items-center justify-center rounded-full transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50", {
-    variants: {
-        variant: {
-            default: "bg-transparent text-foreground hover:bg-accent hover:text-accent-foreground",
-            primary: "bg-primary text-primary-foreground hover:bg-primary/90",
-            secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        },
-        size: {
-            default: "h-10 w-10",
-            sm: "h-8 w-8",
-            lg: "h-12 w-12",
-        },
-    },
-    defaultVariants: {
-        variant: "default",
-        size: "default",
-    },
+import { classNames } from "mtxuilib/lib/utils";
+import { memo } from "react";
+export const IconButton = memo(({ icon, size = "xl", className, iconClassName, disabledClassName, disabled = false, title, onClick, children, }) => {
+    return (_jsx("button", { type: "button", className: classNames("flex items-center text-bolt-elements-item-contentDefault bg-transparent enabled:hover:text-bolt-elements-item-contentActive rounded-md p-1 enabled:hover:bg-bolt-elements-item-backgroundActive disabled:cursor-not-allowed", {
+            [classNames("opacity-30", disabledClassName)]: disabled,
+        }, className), title: title, disabled: disabled, onClick: (event) => {
+            if (disabled) {
+                return;
+            }
+            onClick?.(event);
+        }, children: children ? (children) : (_jsx("div", { className: classNames(icon, getIconSize(size), iconClassName) })) }));
 });
-export const IconButton = React.forwardRef(({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button";
-    return (_jsx(Comp, { className: cn(iconButtonVariants({ variant, size, className })), ref: ref, ...props }));
-});
-IconButton.displayName = "IconButton";
+function getIconSize(size) {
+    if (size === "sm") {
+        return "text-sm";
+    }
+    if (size === "md") {
+        return "text-md";
+    }
+    if (size === "lg") {
+        return "text-lg";
+    }
+    if (size === "xl") {
+        return "text-xl";
+    }
+    return "text-2xl";
+}

package/dist/ui/mt/LoadingDots.d.ts

@@ -0,0 +1,5 @@
+interface LoadingDotsProps {
+    text: string;
+}
+export declare const LoadingDots: import("react").MemoExoticComponent<({ text }: LoadingDotsProps) => import("react/jsx-runtime").JSX.Element>;
+export {};

package/dist/ui/mt/LoadingDots.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useEffect, useState } from 'react';
+export const LoadingDots = memo(({ text }) => {
+    const [dotCount, setDotCount] = useState(0);
+    useEffect(() => {
+        const interval = setInterval(() => {
+            setDotCount((prevDotCount) => (prevDotCount + 1) % 4);
+        }, 500);
+        return () => clearInterval(interval);
+    }, []);
+    return (_jsx("div", { className: "flex justify-center items-center h-full", children: _jsxs("div", { className: "relative", children: [_jsx("span", { children: text }), _jsx("span", { className: "absolute left-[calc(100%-12px)]", children: '.'.repeat(dotCount) }), _jsx("span", { className: "invisible", children: "..." })] }) }));
+});

package/dist/ui/mt/utils/easings.d.ts

@@ -0,0 +1 @@
+export declare const cubicEasingFn: (t: number) => number;

package/dist/ui/mt/utils/easings.js

@@ -0,0 +1,2 @@
+import { cubicBezier } from 'framer-motion';
+export const cubicEasingFn = cubicBezier(0.4, 0, 0.2, 1);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mtxuilib",
   "private": false,
-  "version": "0.1.423",
+  "version": "0.1.425",
   "publishConfig": {
     "access": "public"
   },
@@ -83,8 +83,7 @@
     "build": "rimraf ./dist/ && bunx tsc -p tsconfig.json --outDir dist --jsx \"react-jsx\" --incremental false --noEmit false --removeComments true --declaration true && cp -r src/styles dist/styles"
   },
   "dependencies": {
-    "@ai-sdk/openai": "^0.0.45",
-    "@bufbuild/protobuf": "^1.10.0",
+    "@ai-sdk/openai": "^0.0.66",
     "@headlessui/react": "^2.1.2",
     "@hookform/resolvers": "^3.9.0",
     "@radix-ui/react-accessible-icon": "^1.1.0",
@@ -124,8 +123,7 @@
     "@vercel/analytics": "^1.3.1",
     "@vercel/kv": "^2.0.0",
     "@vercel/og": "^0.6.2",
-    "ai": "^3.3.6",
-    "bun": "^1.1.26",
+    "ai": "^3.4.9",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "cmdk": "0.2.1",
@@ -197,13 +195,11 @@
     "@changesets/get-github-info": "^0.6.0",
     "@cloudflare/kv-asset-handler": "^0.3.4",
     "@cloudflare/workers-types": "^4.20240806.0",
-    "@connectrpc/protoc-gen-connect-es": "^1.4.0",
     "@edge-runtime/ponyfill": "^2.4.2",
     "@jest/globals": "^29.7.0",
     "@jest/types": "^29.6.3",
     "@netlify/plugin-nextjs": "^4.41.3",
     "@playwright/test": "^1.46.0",
-    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.15",
     "@shikijs/compat": "^1.12.1",
     "@tailwindcss/forms": "^0.5.7",
     "@tailwindcss/typography": "^0.5.14",
@@ -240,9 +236,6 @@
     "eslint-plugin-testing-library": "latest",
     "eslint-plugin-unused-imports": "latest",
     "extract-files": "^13.0.0",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
-    "jest-environment-node": "^29.7.0",
     "playwright": "^1.46.0",
     "postcss": "^8.4.41",
     "postcss-loader": "^6.2.1",
@@ -251,16 +244,23 @@
     "react-refresh": "^0.14.2",
     "react-test-renderer": "^18.3.1",
     "rimraf": "^5.0.10",
-    "sass": "^1.77.8",
-    "sass-loader": "^13.3.3",
     "shiki": "^1.12.1",
     "sirv": "^2.0.4",
     "style-loader": "^3.3.4",
     "tailwind-merge": "^2.5.2",
     "tailwindcss": "^3.4.9",
     "tailwindcss-animate": "^1.0.7",
-    "ts-node": "^10.9.2",
-    "tsc-alias": "^1.8.10",
     "typescript": "^5.5.4"
+  },
+  "other": {
+    "sass": "^1.77.8",
+    "sass-loader": "^13.3.3",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "jest-environment-node": "^29.7.0",
+    "bun": "^1.1.26",
+    "@bufbuild/protobuf": "^1.10.0",
+    "tsc-alias": "^1.8.10",
+    "ts-node": "^10.9.2"
   }
 }

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

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

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

@@ -1,2 +0,0 @@
-"use client";
-export {};