mtxuilib 0.1.259 → 0.1.260

package/dist/icons/icons.d.ts

@@ -1,7 +1,7 @@
 type IconProps = React.HTMLAttributes<SVGElement>;
+export type Icon = LucideIcon;
 import { type LucideProps } from "lucide-react";
 import type { LucideIcon } from "lucide-react";
-export type Icon = LucideIcon;
 export declare const iconVariants: (props?: ({
     variant?: "toolbar" | "menuItem" | null | undefined;
     size?: "md" | "sm" | null | undefined;

package/dist/icons/squarePen.d.ts

@@ -0,0 +1 @@
+export declare const SquarePenIcon: (props: any) => import("react/jsx-runtime").JSX.Element;

package/dist/icons/squarePen.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export const SquarePenIcon = (props) => {
+    return (_jsx(_Fragment, { children: _jsxs("svg", { ...props, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" }), _jsx("path", { d: "M18.375 2.625a2.121 2.121 0 1 1 3 3L12 15l-4 1 1-4Z" })] }) }));
+};

package/dist/layouts/dash5/DashBreadcrumb.d.ts

@@ -0,0 +1,7 @@
+import { type ReactNode } from "react";
+export declare const DashBreadcrumb: (props: {
+    listClasses?: string;
+    classActivate?: string;
+    capitalizeLinks?: boolean;
+    homeElement?: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/layouts/dash5/DashBreadcrumb.js

@@ -0,0 +1,23 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { DASH_PATH } from "mtxlib/lib/consts";
+import { cn } from "mtxuilib/lib/utils";
+import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, } from "mtxuilib/ui/breadcrumb";
+import Link from "next/link";
+import { usePathname, useSelectedLayoutSegments } from "next/navigation";
+import { Fragment } from "react";
+export const DashBreadcrumb = (props) => {
+    const { listClasses, classActivate, capitalizeLinks } = props;
+    const paths = usePathname();
+    const selectedLayoutSegments = useSelectedLayoutSegments();
+    const middleItems = selectedLayoutSegments.slice(0, selectedLayoutSegments.length - 1);
+    const pageItem = selectedLayoutSegments.slice(-1);
+    return (_jsx(_Fragment, { children: _jsx(Breadcrumb, { className: cn("hidden md:flex"), children: _jsxs(BreadcrumbList, { className: "font-bold", children: [_jsx(BreadcrumbItem, { children: _jsx(BreadcrumbLink, { asChild: true, children: _jsx(Link, { href: `${DASH_PATH}`, children: "dash" }) }) }), _jsx(BreadcrumbSeparator, {}), middleItems.map((link, index) => {
+                        const href = `${DASH_PATH}/${selectedLayoutSegments.slice(0, index + 1).join("/")}`;
+                        const itemClasses = paths === href ? `${listClasses} ${classActivate}` : listClasses;
+                        const itemLink = capitalizeLinks
+                            ? link[0].toUpperCase() + link.slice(1, link.length)
+                            : link;
+                        return (_jsxs(Fragment, { children: [_jsx(BreadcrumbItem, { className: itemClasses, children: _jsx(BreadcrumbLink, { asChild: true, children: _jsx(Link, { href: href, children: itemLink }) }) }), _jsx(BreadcrumbSeparator, {})] }, link));
+                    }), _jsx(BreadcrumbItem, { children: _jsx(BreadcrumbPage, { children: pageItem }) })] }) }) }));
+};

package/dist/layouts/dash5/SiderNavItem.d.ts

@@ -0,0 +1,13 @@
+import type { LucideIcon } from "lucide-react";
+interface SiderNavItemProps {
+    isCollapsed: boolean;
+    links?: {
+        title: string;
+        label?: string;
+        icon: LucideIcon;
+        variant: "default" | "ghost";
+        href: string;
+    }[];
+}
+export declare function SiderNavItem({ links, isCollapsed }: SiderNavItemProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/layouts/dash5/SiderNavItem.js

@@ -0,0 +1,10 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "mtxuilib/lib/utils";
+import { buttonVariants } from "mtxuilib/ui/button";
+import { Tooltip, TooltipContent, TooltipTrigger } from "mtxuilib/ui/tooltip";
+import Link from "next/link";
+export function SiderNavItem({ links, isCollapsed }) {
+    return (_jsx("div", { "data-collapsed": isCollapsed, className: "group flex flex-col gap-4 py-2 data-[collapsed=true]:py-2", children: _jsx("nav", { className: "grid gap-1 px-2 group-[[data-collapsed=true]]:justify-center group-[[data-collapsed=true]]:px-2", children: links?.map((link, index) => isCollapsed ? (_jsxs(Tooltip, { delayDuration: 0, children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs(Link, { href: link.href, className: cn(buttonVariants({ variant: link.variant, size: "icon" }), "h-9 w-9", link.variant === "default" &&
+                                "dark:bg-muted dark:text-muted-foreground dark:hover:bg-muted dark:hover:text-white"), children: [_jsx(link.icon, { className: "h-4 w-4" }), _jsx("span", { className: "sr-only", children: link.title })] }) }), _jsxs(TooltipContent, { side: "right", className: "flex items-center gap-4", children: [link.title, link.label && _jsx("span", { className: "text-muted-foreground ml-auto", children: link.label })] })] }, link.href)) : (_jsxs(Link, { href: link.href, className: cn(buttonVariants({ variant: link.variant, size: "sm" }), link.variant === "default" && "dark:bg-muted dark:hover:bg-muted dark:text-white dark:hover:text-white", "justify-start"), children: [_jsx(link.icon, { className: "mr-2 h-4 w-4" }), link.title, link.label && (_jsx("span", { className: cn("ml-auto", link.variant === "default" && "text-background dark:text-white"), children: link.label }))] }, link.href))) }) }));
+}

package/dist/layouts/dash5/dash5.store.d.ts

@@ -0,0 +1,47 @@
+import { type StateCreator } from "zustand";
+import type { Renderable } from "../../lib/render";
+export type Dash5LayoutProps = {
+    defaultAsideCollapsed?: boolean;
+    navCollapsedSize?: number;
+    isSideCollapsed?: boolean;
+    siderComponent?: Renderable;
+    postion?: "fullScreen" | "inline";
+    setSiderComponent: (siderComponent: Renderable) => void;
+};
+export interface Dash5LayoutState extends Dash5LayoutProps {
+    _hasHydrated?: boolean;
+    setHasHydrated: (_hasHydrated: boolean) => void;
+    defaultLayout: number[];
+    setIsSideCollapsed: (isSideCollapsed: boolean) => void;
+}
+export declare const createAppSlice: StateCreator<Dash5LayoutState, [
+], [
+], Dash5LayoutState>;
+export declare const gomtmContext: import("react").Context<(Omit<Omit<Omit<import("zustand").StoreApi<Dash5LayoutState>, "persist"> & {
+    persist: {
+        setOptions: (options: Partial<import("zustand/middleware").PersistOptions<Dash5LayoutState, {
+            [k: string]: unknown;
+        }>>) => void;
+        clearStorage: () => void;
+        rehydrate: () => Promise<void> | void;
+        hasHydrated: () => boolean;
+        onHydrate: (fn: (state: Dash5LayoutState) => void) => () => void;
+        onFinishHydration: (fn: (state: Dash5LayoutState) => void) => () => void;
+        getOptions: () => Partial<import("zustand/middleware").PersistOptions<Dash5LayoutState, {
+            [k: string]: unknown;
+        }>>;
+    };
+}, "setState"> & {
+    setState<A extends string | {
+        type: string;
+    }>(partial: Dash5LayoutState | Partial<Dash5LayoutState> | ((state: Dash5LayoutState) => Dash5LayoutState | Partial<Dash5LayoutState>), replace?: boolean | undefined, action?: A | undefined): void;
+}, "setState"> & {
+    setState(nextStateOrUpdater: Dash5LayoutState | Partial<Dash5LayoutState> | ((state: import("immer").WritableDraft<Dash5LayoutState>) => void), shouldReplace?: boolean | undefined, action?: string | {
+        type: string;
+    } | undefined): void;
+}) | null>;
+type AppProviderProps = React.PropsWithChildren<Dash5LayoutProps>;
+export declare const Dash5LayoutProvider: (props: AppProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare function useDash5Store(): Dash5LayoutState;
+export declare function useDash5Store<T>(selector: (state: Dash5LayoutState) => T): T;
+export {};

package/dist/layouts/dash5/dash5.store.js

@@ -0,0 +1,64 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo } from "react";
+import { createStore, useStore } from "zustand";
+import { devtools, persist } from "zustand/middleware";
+import { immer } from "zustand/middleware/immer";
+import { useShallow } from "zustand/react/shallow";
+export const createAppSlice = (set, get, init) => {
+    return {
+        isDev: false,
+        isCollapsed: false,
+        defaultLayout: [30, 70],
+        postion: "fullScreen",
+        ...init,
+        setHasHydrated: (_hasHydrated) => set({ _hasHydrated }),
+        setIsSideCollapsed: (isSideCollapsed) => set({ isSideCollapsed }),
+        setSiderComponent: (siderComponent) => set({ siderComponent }),
+    };
+};
+const createMtAppStore = (initProps) => {
+    const initialState = { ...initProps };
+    return createStore()(persist(devtools(immer((...a) => ({
+        ...createAppSlice(...a),
+        ...initialState,
+    })), {
+        name: "Dash5Layout",
+    }), {
+        name: "Dash5Layout",
+        skipHydration: true,
+        version: 1,
+        onRehydrateStorage: () => (state, error) => {
+            state?.setHasHydrated(true);
+        },
+        partialize: (state) => {
+            return Object.fromEntries(Object.entries(state).filter(([key]) => {
+                return ![
+                    "cookieStr",
+                    "children",
+                    "openFab",
+                    "userInfo",
+                    "_hasHydrated",
+                    "socket",
+                    "session",
+                ].includes(key);
+            }));
+        },
+    }));
+};
+export const gomtmContext = createContext(null);
+export const Dash5LayoutProvider = (props) => {
+    const { children, ...etc } = props;
+    const mystore = useMemo(() => createMtAppStore(etc), [etc]);
+    return (_jsx(gomtmContext.Provider, { value: mystore, children: children }));
+};
+const DEFAULT_USE_SHALLOW = true;
+export function useDash5Store(selector) {
+    const store = useContext(gomtmContext);
+    if (!store)
+        throw new Error("useDash5Store must in Dash5LayoutProvider");
+    if (selector) {
+        return useStore(store, DEFAULT_USE_SHALLOW ? useShallow(selector) : selector);
+    }
+    return useStore(store);
+}

package/dist/layouts/dash5/header.d.ts

@@ -0,0 +1 @@
+export declare const Header: () => import("react/jsx-runtime").JSX.Element;

package/dist/layouts/dash5/header.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Home, LineChart, Package, Package2, PanelLeft, ShoppingCart, Users2 } from "lucide-react";
+import { cn } from "mtxuilib/lib/utils";
+import { Button } from "mtxuilib/ui/button";
+import { Sheet, SheetContent, SheetTrigger } from "mtxuilib/ui/sheet";
+import Link from "next/link";
+import { Suspense } from "react";
+export const Header = () => {
+    return (_jsxs("header", { className: cn("bg-background sticky top-0 z-30 flex h-14 items-center gap-4 border-b px-4 pt-1 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6"), children: [_jsxs(Sheet, { children: [_jsx(SheetTrigger, { asChild: true, children: _jsxs(Button, { size: "icon", variant: "outline", className: "sm:hidden", children: [_jsx(PanelLeft, { className: "h-5 w-5" }), _jsx("span", { className: "sr-only", children: "Toggle Menu" })] }) }), _jsx(SheetContent, { side: "left", className: "sm:max-w-xs", children: _jsxs("nav", { className: "grid gap-6 text-lg font-medium", children: [_jsxs(Link, { href: "#", className: "bg-primary text-primary-foreground group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full text-lg font-semibold md:text-base", children: [_jsx(Package2, { className: "h-5 w-5 transition-all group-hover:scale-110" }), _jsx("span", { className: "sr-only", children: "Acme Inc" })] }), _jsxs(Link, { href: "#", className: "text-muted-foreground hover:text-foreground flex items-center gap-4 px-2.5", children: [_jsx(Home, { className: "h-5 w-5" }), "Dashboard"] }), _jsxs(Link, { href: "#", className: "text-foreground flex items-center gap-4 px-2.5", children: [_jsx(ShoppingCart, { className: "h-5 w-5" }), "Orders"] }), _jsxs(Link, { href: "#", className: "text-muted-foreground hover:text-foreground flex items-center gap-4 px-2.5", children: [_jsx(Package, { className: "h-5 w-5" }), "Products"] }), _jsxs(Link, { href: "#", className: "text-muted-foreground hover:text-foreground flex items-center gap-4 px-2.5", children: [_jsx(Users2, { className: "h-5 w-5" }), "Customers"] }), _jsxs(Link, { href: "#", className: "text-muted-foreground hover:text-foreground flex items-center gap-4 px-2.5", children: [_jsx(LineChart, { className: "h-5 w-5" }), "Settings"] })] }) })] }), _jsx("div", { className: "flex-1" }), _jsx(Suspense, {})] }));
+};

package/dist/layouts/dash5/index.d.ts

@@ -0,0 +1,3 @@
+import { type PropsWithChildren } from "react";
+import { type Dash5LayoutProps } from "./dash5.store";
+export declare function Dash5Layout(props: PropsWithChildren<Dash5LayoutProps>): import("react/jsx-runtime").JSX.Element;

package/dist/layouts/dash5/index.js

@@ -0,0 +1,42 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "mtxuilib/lib/utils";
+import { useRef } from "react";
+import { Users2 } from "lucide-react";
+import { ScreenPanel } from "../../ui/mt/ScreenPanel";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup, } from "../../ui/resizable";
+import { Dash5LayoutProvider, useDash5Store, } from "./dash5.store";
+import { Header } from "./header";
+import { Nav } from "./nav";
+const childrenDashRouters = [
+    {
+        label: "dashboard",
+    },
+    { label: "home" },
+];
+export function Dash5Layout(props) {
+    const position = props.postion || "fullScreen";
+    return (_jsx(Dash5LayoutProvider, { ...props, children: position === "fullScreen" ? (_jsx(ScreenPanel, { children: _jsx(DashLayoutInner, { children: props.children }) })) : (_jsx(DashLayoutInner, { children: props.children })) }));
+}
+const DashLayoutInner = (props) => {
+    const isSideCollapsed = useDash5Store((x) => x.isSideCollapsed);
+    const defaultLayout = useDash5Store((x) => x.defaultLayout);
+    const navCollapsedSize = useDash5Store((x) => x.navCollapsedSize);
+    const setIsSideCollapsed = useDash5Store((x) => x.setIsSideCollapsed);
+    const navPanelRef = useRef(null);
+    return (_jsxs(ResizablePanelGroup, { direction: "horizontal", onLayout: (sizes) => {
+            document.cookie = `react-resizable-panels:layout=${JSON.stringify(sizes)}`;
+        }, className: "h-full max-h-[940px] items-stretch", children: [_jsx(ResizablePanel, { ref: navPanelRef, defaultSize: defaultLayout[0], collapsedSize: navCollapsedSize, collapsible: true, minSize: 12, maxSize: 20, onCollapse: () => {
+                    setIsSideCollapsed(true);
+                }, onExpand: () => {
+                    setIsSideCollapsed(false);
+                }, className: cn(isSideCollapsed &&
+                    "min-w-[50px] transition-all duration-300 ease-in-out", "hidden sm:flex sm:flex-col"), children: _jsx(Nav, { isCollapsed: isSideCollapsed || false, links: childrenDashRouters?.map((x) => {
+                        return {
+                            title: x.label || "no-title",
+                            label: x.label || "no-label",
+                            icon: Users2,
+                            variant: "ghost",
+                        };
+                    }) }) }), _jsx(ResizableHandle, { withHandle: true, className: "hidden md:flex" }), _jsx(ResizablePanel, { defaultSize: defaultLayout[1], minSize: 30, children: _jsx("div", { className: "bg-muted/40 flex min-h-screen w-full flex-col", children: _jsxs("div", { className: cn("flex min-h-dvh flex-col"), children: [_jsx(Header, {}), _jsx("div", { className: "flex p-1", children: _jsx("main", { className: cn("flex h-full min-h-full flex-1", "flex-col px-1"), children: props.children }) }), _jsx("div", { className: "bg-slate-50" })] }) }) })] }));
+};

package/dist/layouts/dash5/nav.d.ts

@@ -0,0 +1,12 @@
+import type { LucideIcon } from "lucide-react";
+interface NavProps {
+    isCollapsed: boolean;
+    links: {
+        title: string;
+        label?: string;
+        icon: LucideIcon;
+        variant: "default" | "ghost";
+    }[];
+}
+export declare function Nav({ links, isCollapsed }: NavProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/layouts/dash5/nav.js

@@ -0,0 +1,27 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import Link from "next/link";
+import { cn } from "../../lib/utils";
+import { buttonVariants } from "../../ui/button";
+import { MtButton } from "../../ui/mt/Button";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../../ui/tooltip";
+import { useDash5Store } from "./dash5.store";
+export function Nav({ links, isCollapsed }) {
+    const isSideCollapsed = useDash5Store((x) => x.isSideCollapsed);
+    const setIsSideCollapsed = useDash5Store((x) => x.setIsSideCollapsed);
+    return (_jsxs("div", { "data-collapsed": isCollapsed, className: "group flex flex-col gap-4 py-2 data-[collapsed=true]:py-2", children: [_jsx("nav", { className: "grid gap-1 px-2 group-[[data-collapsed=true]]:justify-center group-[[data-collapsed=true]]:px-2", children: links.map((link, index) => isCollapsed ? (_jsxs(Tooltip, { delayDuration: 0, children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs(Link, { href: "#", className: cn(buttonVariants({ variant: link.variant, size: "icon" }), "h-9 w-9", link.variant === "default" &&
+                                    "dark:bg-muted dark:text-muted-foreground dark:hover:bg-muted dark:hover:text-white"), children: [_jsx(link.icon, { className: "h-4 w-4" }), _jsx("span", { className: "sr-only", children: link.title })] }) }), _jsxs(TooltipContent, { side: "right", className: "flex items-center gap-4", children: [link.title, link.label && (_jsx("span", { className: "ml-auto text-muted-foreground", children: link.label }))] })] }, index)) : (_jsxs(Link, { href: "#", className: cn(buttonVariants({ variant: link.variant, size: "sm" }), link.variant === "default" &&
+                        "dark:bg-muted dark:text-white dark:hover:bg-muted dark:hover:text-white", "justify-start"), children: [_jsx(link.icon, { className: "mr-2 h-4 w-4" }), link.title, link.label && (_jsx("span", { className: cn("ml-auto", link.variant === "default" &&
+                                "text-background dark:text-white"), children: link.label }))] }, index))) }), _jsxs("div", { className: "mt-auto pb-4", children: [_jsx(CollapseButton, {}), _jsx(Test1Button, {})] })] }));
+}
+const CollapseButton = () => {
+    const isSideCollapsed = useDash5Store((x) => x.isSideCollapsed);
+    const setIsSideCollapsed = useDash5Store((x) => x.setIsSideCollapsed);
+    return (_jsx(_Fragment, { children: _jsx("button", { onClick: () => setIsSideCollapsed(!isSideCollapsed), className: "flex w-full items-center justify-center p-2 text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800 transition-colors", "aria-label": isSideCollapsed ? "Expand sidebar" : "Collapse sidebar", children: isSideCollapsed ? (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-6 w-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 5l7 7-7 7M5 5l7 7-7 7" }) })) : (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-6 w-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M11 19l-7-7 7-7m8 14l-7-7 7-7" }) })) }) }));
+};
+const Test1Button = () => {
+    const state = useDash5Store();
+    return (_jsx(MtButton, { onClick: () => {
+            console.log(state);
+        }, children: "\u6D4B\u8BD51" }));
+};

package/dist/lib/render.d.ts

@@ -1,3 +1,3 @@
-export type Renderable<TProps> = React.ReactNode | React.ComponentType<TProps>;
+export type Renderable<TProps = any> = React.ReactNode | React.ComponentType<TProps>;
 export declare function flexRender<TProps extends object>(Comp: Renderable<TProps>, props: TProps): React.ReactNode | JSX.Element;
 export declare function isReactComponent<TProps>(component: unknown): component is React.ComponentType<TProps>;

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

@@ -0,0 +1,11 @@
+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;
+}
+export declare const IconButton: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/ui/mt/IconButton.js

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

package/dist/ui/mt/ScreenPanel.js

@@ -19,5 +19,5 @@ export const ScreenPanel = (props) => {
     }
     return (_jsx("div", { className: "relative", children: _jsxs("div", { ref: scrollRef, className: cn("fixed left-0 top-0 z-30 mx-auto max-h-full min-h-full w-full overflow-auto ", "bg-background/95 supports-[backdrop-filter]:bg-background/60 backdrop-blur", className), children: [onOpenChange && (_jsx("div", { className: "flex justify-end gap-2", children: _jsx(MtButton, { variant: "ghost", onClick: () => {
                             onOpenChange(false);
-                        }, children: "X" }) })), _jsx("div", { className: cn("relative mx-auto p-2 md:p-4 lg:p-6"), children: children })] }) }));
+                        }, children: "X" }) })), children] }) }));
 };

package/package.json

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