mtxuilib 0.1.296 → 0.1.297

package/dist/hooks/use-media-query.js

@@ -1,8 +1,8 @@
 'use client';
-import * as React from "react";
+import { useEffect, useState } from "react";
 export function useMediaQuery(query) {
-    const [value, setValue] = React.useState(false);
-    React.useEffect(() => {
+    const [value, setValue] = useState(false);
+    useEffect(() => {
         function onChange(event) {
             setValue(event.matches);
         }

package/dist/i18n/I18nProvider.d.ts

@@ -0,0 +1,2 @@
+import { PropsWithChildren } from "react";
+export declare function I18nProvider({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element;

package/dist/i18n/I18nProvider.js

@@ -0,0 +1,7 @@
+'use client';
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { i18nSetupLocalization } from "./i18n";
+i18nSetupLocalization();
+export function I18nProvider({ children }) {
+    return _jsx(_Fragment, { children: children });
+}

package/dist/i18n/i18n.d.ts

@@ -11,4 +11,4 @@ export declare const useTranslation: () => {
     ready: boolean;
     i18n: import("i18next").i18n;
 };
-export default Translator;
+export {};

package/dist/i18n/i18n.js

@@ -6,7 +6,12 @@ const i18nConfig = {
     fallbackLng: "en-US",
     defaultNS: "translation",
 };
+let isSetuped = false;
 export function i18nSetupLocalization() {
+    if (isSetuped) {
+        return;
+    }
+    isSetuped = true;
     i18n
         .use(initReactI18next)
         .init(i18nConfig)
@@ -32,4 +37,3 @@ export const useTranslation = () => {
         i18n,
     };
 };
-export default Translator;

package/dist/icons/icons.d.ts

@@ -110,6 +110,8 @@ export declare const Icons: {
     embed: import("react").ForwardRefExoticComponent<Omit<LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
     highlight: import("react").ForwardRefExoticComponent<Omit<LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
     suggesting: import("react").ForwardRefExoticComponent<Omit<LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+    terminal: import("react").ForwardRefExoticComponent<Omit<LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+    dashboard: import("react").ForwardRefExoticComponent<Omit<LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
     google: (props: IconProps) => import("react/jsx-runtime").JSX.Element;
     logo: (props: IconProps) => import("react/jsx-runtime").JSX.Element;
     twitter: (props: IconProps) => import("react/jsx-runtime").JSX.Element;

package/dist/icons/icons.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
-import { AlertTriangle, AlignCenter, AlignJustify, AlignLeft, AlignRight, ArrowLeft, ArrowRight, Baseline, Bell, Bold, Bug, Check, ChevronDown, ChevronLeft, ChevronRight, ChevronsUpDown, ClipboardCheck, Code2, Combine, Copy, CreditCard, DownloadCloud, Edit2, ExternalLink, Eye, File, FileCode, FileText, Film, GripVertical, Heading1, Heading2, Heading3, Heading4, Heading5, Heading6, HelpCircle, Highlighter, Image, Indent, Italic, Keyboard, Laptop, Link2, Link2Off, List, ListOrdered, Loader2, MailX, Menu, MessageSquare, MessageSquarePlus, Minus, Moon, MoreHorizontal, MoreVertical, Outdent, PaintBucket, Paperclip, PenLine, PenTool, Pilcrow, Pizza, Plus, Quote, RectangleHorizontal, RectangleVertical, RotateCcw, Search, SeparatorHorizontal, Settings, Smile, SquareIcon, Star, Strikethrough, Subscript, SunMedium, Superscript, Table, Text, Trash, Underline, Ungroup, User, Verified, WrapText, X, } from "lucide-react";
+import { AlertTriangle, AlignCenter, AlignJustify, AlignLeft, AlignRight, ArrowLeft, ArrowRight, Baseline, Bell, Bold, Bug, Check, ChevronDown, ChevronLeft, ChevronRight, ChevronsUpDown, ClipboardCheck, Code2, Combine, Copy, CreditCard, DownloadCloud, Edit2, ExternalLink, Eye, File, FileCode, FileText, Film, GripVertical, Heading1, Heading2, Heading3, Heading4, Heading5, Heading6, HelpCircle, Highlighter, Image, Indent, Italic, Keyboard, Laptop, LayoutDashboard, Link2, Link2Off, List, ListOrdered, Loader2, MailX, Menu, MessageSquare, MessageSquarePlus, Minus, Moon, MoreHorizontal, MoreVertical, Outdent, PaintBucket, Paperclip, PenLine, PenTool, Pilcrow, Pizza, Plus, Quote, RectangleHorizontal, RectangleVertical, RotateCcw, Search, SeparatorHorizontal, Settings, Smile, SquareIcon, Star, Strikethrough, Subscript, SunMedium, Superscript, Table, Terminal, Text, Trash, Underline, Ungroup, User, Verified, WrapText, X, } from "lucide-react";
 export const iconVariants = cva("", {
     variants: {
         variant: {
@@ -124,6 +124,8 @@ export const Icons = {
     embed: Film,
     highlight: Highlighter,
     suggesting: PenLine,
+    terminal: Terminal,
+    dashboard: LayoutDashboard,
     google: (props) => (_jsx("svg", { role: "img", viewBox: "0 0 24 24", ...props, children: _jsx("path", { fill: "currentColor", d: "M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z" }) })),
     logo: (props) => (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 256 256", ...props, children: [_jsx("rect", { width: "256", height: "256", fill: "none" }), _jsx("line", { x1: "208", y1: "128", x2: "128", y2: "208", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "16" }), _jsx("line", { x1: "192", y1: "40", x2: "40", y2: "192", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "16" })] })),
     twitter: (props) => (_jsx("svg", { ...props, height: "23", viewBox: "0 0 1200 1227", width: "23", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z" }) })),

package/dist/layouts/DashLayoutProvider.d.ts

@@ -0,0 +1,45 @@
+import { type StateCreator } from "zustand";
+import type { SiderNavItemProps } from "./types";
+export interface DashConfig {
+    pathPrefix: string;
+    logo?: string;
+    siderNavMenus: SiderNavItemProps[];
+}
+export interface MtmaiBotProps {
+    isDev?: boolean;
+    config?: DashConfig;
+}
+export interface DashState extends MtmaiBotProps {
+    hasHydrated?: boolean;
+    setHasHydrated: (hasHydrated: boolean) => void;
+    setConfig: (config: DashConfig) => void;
+}
+export declare const createAppSlice: StateCreator<DashState, [], [], DashState>;
+export declare const dashContext: import("react").Context<(Omit<Omit<Omit<import("zustand").StoreApi<DashState>, "persist"> & {
+    persist: {
+        setOptions: (options: Partial<import("zustand/middleware").PersistOptions<DashState, {
+            [k: string]: unknown;
+        }>>) => void;
+        clearStorage: () => void;
+        rehydrate: () => Promise<void> | void;
+        hasHydrated: () => boolean;
+        onHydrate: (fn: (state: DashState) => void) => () => void;
+        onFinishHydration: (fn: (state: DashState) => void) => () => void;
+        getOptions: () => Partial<import("zustand/middleware").PersistOptions<DashState, {
+            [k: string]: unknown;
+        }>>;
+    };
+}, "setState"> & {
+    setState<A extends string | {
+        type: string;
+    }>(partial: DashState | Partial<DashState> | ((state: DashState) => DashState | Partial<DashState>), replace?: boolean | undefined, action?: A | undefined): void;
+}, "setState"> & {
+    setState(nextStateOrUpdater: DashState | Partial<DashState> | ((state: import("immer").WritableDraft<DashState>) => void), shouldReplace?: boolean | undefined, action?: string | {
+        type: string;
+    } | undefined): void;
+}) | null>;
+type AppProviderProps = React.PropsWithChildren<MtmaiBotProps>;
+export declare const DashLayoutProvider: (props: AppProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare function useDash(): DashState;
+export declare function useDash<T>(selector: (state: DashState) => T): T;
+export {};

package/dist/layouts/DashLayoutProvider.js

@@ -0,0 +1,55 @@
+"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,
+        ...init,
+        setHasHydrated: (hasHydrated) => set({ hasHydrated }),
+        setConfig: (config) => set({ config }),
+    };
+};
+const createMtAppStore = (initProps) => {
+    const initialState = { ...initProps };
+    return createStore()(persist(devtools(immer((...a) => ({
+        ...createAppSlice(...a),
+        ...initialState,
+    })), {
+        name: "DashProvider",
+    }), {
+        name: "DashProvider",
+        skipHydration: false,
+        version: 2,
+        onRehydrateStorage: () => (state, error) => {
+            state?.setHasHydrated(true);
+            if (error) {
+                console.error("onRehydrateStorage error", error);
+            }
+        },
+        partialize: (state) => {
+            return Object.fromEntries(Object.entries(state).filter(([key]) => {
+                return !["cookieStr", "socket", "session"].includes(key);
+            }));
+        },
+    }));
+};
+export const dashContext = createContext(null);
+export const DashLayoutProvider = (props) => {
+    const { children, ...etc } = props;
+    const mystore = useMemo(() => createMtAppStore(etc), [etc]);
+    return (_jsx(dashContext.Provider, { value: mystore, children: children }));
+};
+const DEFAULT_USE_SHALLOW = false;
+export function useDash(selector) {
+    const store = useContext(dashContext);
+    if (!store)
+        throw new Error("useDash must in DashLayoutProvider");
+    if (selector) {
+        return useStore(store, DEFAULT_USE_SHALLOW ? useShallow(selector) : selector);
+    }
+    return useStore(store);
+}

package/dist/layouts/DashLayoutRender.d.ts

@@ -0,0 +1,2 @@
+import { PropsWithChildren } from "react";
+export declare const DashLayoutRender: (props: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;

package/dist/layouts/DashLayoutRender.js

@@ -0,0 +1,7 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Dash5Layout } from "./dash5";
+export const DashLayoutRender = (props) => {
+    const { children, ...etc } = props;
+    return _jsx(Dash5Layout, { ...etc, children: children });
+};

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

@@ -0,0 +1,2 @@
+import { DashSiderProps } from "../types";
+export declare const DashSider: (props: DashSiderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/layouts/dash5/DashSider.js

@@ -0,0 +1,13 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useDash5Store } from "mtxuilib/layouts/dash5/dash5.store";
+import { SiderToggleButton } from "mtxuilib/layouts/dash5/SiderToggleButton";
+import { cn } from "mtxuilib/lib/utils";
+import { useDash } from "../DashLayoutProvider";
+import { SiderNavItem } from "./SiderNavItem";
+export const DashSider = (props) => {
+    const isSideCollapsed = useDash5Store((x) => x.isSideCollapsed);
+    const setIsSideCollapsed = useDash5Store((x) => x.setIsSideCollapsed);
+    const siderNavMenus = useDash(x => x.config?.siderNavMenus);
+    return (_jsxs("div", { className: "flex flex-col gap-2 p-1 h-full", children: [_jsx("div", { className: "mb-2 flex items-center justify-between", children: _jsx("img", { src: "/media/logo.svg", alt: "mtmai-logo", width: 200, height: 26, loading: "lazy", className: cn("m-1 max-w-none duration-75  group-hover:[clip-path:none] 2xl:[clip-path:none] block dark:hidden", isSideCollapsed && "[clip-path:inset(0%_75%_0%_0%)]") }) }), _jsx("div", { className: "flex-1", children: _jsx(SiderNavItem, { isCollapsed: props.isCollapsed, items: siderNavMenus || [] }) }), _jsx("div", { children: _jsx(SiderToggleButton, { isCollapsed: !!isSideCollapsed, setIsCollapsed: setIsSideCollapsed }) })] }));
+};

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

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

package/dist/layouts/dash5/{header.js → MainHeader.js}

@@ -6,6 +6,6 @@ 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 = () => {
+export const MainHeader = () => {
     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/SiderDebug.d.ts

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

package/dist/layouts/dash5/SiderDebug.js

@@ -0,0 +1,5 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const SiderDebug = () => {
+    return _jsx("div", { children: _jsx("div", { children: "sider_debug" }) });
+};

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

@@ -1,13 +1,2 @@
-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 {};
+import { NavProps } from "../types";
+export declare function SiderNavItem({ items, isCollapsed }: NavProps): import("react/jsx-runtime").JSX.Element;

package/dist/layouts/dash5/SiderNavItem.js

@@ -1,10 +1,19 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { IconX } from "mtxuilib/icons/icons";
 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))) }) }));
+import { useSelectedLayoutSegment } from "next/navigation";
+import { Fragment } from "react/jsx-runtime";
+export function SiderNavItem({ items, isCollapsed }) {
+    const activatePath = useSelectedLayoutSegment();
+    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: items.map((link, index) => {
+                const isActive = link.url === activatePath || link.url === "/" + activatePath || link.url === "/" + activatePath + "/";
+                return _jsx(Fragment, { children: isCollapsed ? _jsx(_Fragment, { children: _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", isActive && "bg-blue-500"), children: [_jsx(IconX, { name: link.icon, className: "h-5 w-5" }), _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) }) : _jsx(_Fragment, { children: _jsxs(Link, { href: link.url || "#", className: cn(buttonVariants({ variant: link.variant, size: "default" }), link.variant === "default" &&
+                                "dark:bg-muted dark:text-white dark:hover:bg-muted dark:hover:text-white", "justify-start", isActive && "bg-muted dark:bg-primary hover:shadow-sm"), children: [_jsx(IconX, { name: link.icon, className: "mr-2 h-5 w-5" }), link.title, link.label && (_jsx("span", { className: cn("ml-auto", link.variant === "default" &&
+                                        "text-background dark:text-white"), children: link.label }))] }, index) }) }, index);
+            }) }) }));
 }

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

@@ -0,0 +1,5 @@
+export interface SiderToggleButtonProps {
+    isCollapsed: boolean;
+    setIsCollapsed: (isCollapsed: boolean) => void;
+}
+export declare const SiderToggleButton: ({ isCollapsed, setIsCollapsed }: SiderToggleButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/layouts/dash5/SiderToggleButton.js

@@ -0,0 +1,5 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+export const SiderToggleButton = ({ isCollapsed, setIsCollapsed }) => {
+    return (_jsx(_Fragment, { children: _jsx("button", { onClick: () => setIsCollapsed(!isCollapsed), 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": isCollapsed ? "Expand sidebar" : "Collapse sidebar", children: isCollapsed ? (_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" }) })) }) }));
+};

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

@@ -1,12 +1,13 @@
 import { type ReactNode } from "react";
 import { type StateCreator } from "zustand";
 import type { Renderable } from "../../lib/render";
+import { DashSiderProps } from "../types";
 export type Dash5LayoutProps = {
     defaultAsideCollapsed?: boolean;
     navCollapsedSize?: number;
     isSideCollapsed?: boolean;
-    siderComponent?: Renderable;
-    postion?: "fullScreen" | "inline";
+    siderComponent?: Renderable<DashSiderProps>;
+    headerComponent?: Renderable<DashSiderProps>;
 };
 export interface Dash5LayoutState extends Dash5LayoutProps {
     _hasHydrated?: boolean;

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

@@ -10,7 +10,6 @@ export const createAppSlice = (set, get, init) => {
         isDev: false,
         isCollapsed: false,
         defaultLayout: [30, 70],
-        postion: "fullScreen",
         ...init,
         setHasHydrated: (_hasHydrated) => set({ _hasHydrated }),
         setIsSideCollapsed: (isSideCollapsed) => {

package/dist/layouts/dash5/index.js

@@ -2,22 +2,12 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "mtxuilib/lib/utils";
 import { useRef } from "react";
-import { Users2 } from "lucide-react";
-import { flexRender } from "../../lib/render";
-import { ScreenPanel } from "../../ui/mt/ScreenPanel";
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup, } from "../../ui/resizable";
+import { useDash } from "../DashLayoutProvider";
 import { Dash5LayoutProvider, useDash5Store, } from "./dash5.store";
-import { Header } from "./header";
-import { Nav } from "./nav";
-const childrenDashRouters = [
-    {
-        label: "dashboard",
-    },
-    { label: "home" },
-];
+import { DashSider } from "./DashSider";
 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 })) }));
+    return (_jsx(Dash5LayoutProvider, { ...props, children: _jsx(DashLayoutInner, { children: props.children }) }));
 }
 const DashLayoutInner = (props) => {
     const isSideCollapsed = useDash5Store((x) => x.isSideCollapsed);
@@ -26,6 +16,8 @@ const DashLayoutInner = (props) => {
     const setIsSideCollapsed = useDash5Store((x) => x.setIsSideCollapsed);
     const siderComponent = useDash5Store((x) => x.siderComponent);
     const navPanelRef = useRef(null);
+    const logo = useDash(x => x.config?.logo);
+    const siderNavMenus = useDash(x => x.config?.siderNavMenus);
     return (_jsxs(ResizablePanelGroup, { direction: "horizontal", onLayout: (sizes) => {
             document.cookie = `react-resizable-panels:layout=${JSON.stringify(sizes)}`;
         }, className: "h-full items-stretch", children: [_jsx(ResizablePanel, { ref: navPanelRef, defaultSize: defaultLayout[0], collapsedSize: navCollapsedSize, collapsible: true, minSize: 12, maxSize: 30, onCollapse: () => {
@@ -33,12 +25,5 @@ const DashLayoutInner = (props) => {
                 }, onExpand: () => {
                     setIsSideCollapsed(false);
                 }, className: cn(isSideCollapsed &&
-                    "min-w-[50px] transition-all duration-300 ease-in-out", "hidden sm:flex sm:flex-col"), children: _jsxs(_Fragment, { 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",
-                                };
-                            }) }), siderComponent && flexRender(siderComponent, {})] }) }), _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("main", { className: cn("flex h-full min-h-full flex-1 p-1 flex-col px-1"), children: _jsx("div", { className: "min-h-full w-full flex-1 flex flex-col", children: props.children }) }), _jsx("div", { className: "bg-slate-50" })] }) }) })] }));
+                    "min-w-[60px] transition-all duration-300 ease-in-out", "hidden sm:flex sm:flex-col"), children: _jsx(_Fragment, { children: _jsx(DashSider, { isCollapsed: !!isSideCollapsed }) }) }), _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("main", { className: cn("flex h-full min-h-full flex-1 p-1 flex-col px-1"), children: _jsx("div", { className: "min-h-full w-full flex-1 flex flex-col", children: props.children }) }), _jsx("div", { className: "bg-slate-50" })] }) }) })] }));
 };

package/dist/layouts/types.d.ts

@@ -0,0 +1,18 @@
+export interface DashSiderProps {
+    isCollapsed?: boolean;
+}
+export interface DashHeaderProps {
+    hidden?: boolean;
+}
+export interface SiderNavItemProps {
+    title: string;
+    label?: string;
+    icon?: string;
+    variant?: "default" | "ghost";
+    url?: string;
+}
+export interface NavProps {
+    isCollapsed?: boolean;
+    isActive?: boolean;
+    items: SiderNavItemProps[];
+}

package/dist/layouts/types.js

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

package/dist/lib/clientlib.d.ts

@@ -1,5 +1,5 @@
 export declare function mergeRefs<T>(refs: Array<React.MutableRefObject<T> | React.LegacyRef<T>>): React.RefCallback<T>;
 export declare function getCookie(name: string): string | undefined;
 export declare function deleteAllCookies(): void;
-export declare function setCookie(name: string, value: any): void;
+export declare function setCookie(name: string, value: any, path?: string, domain?: string): void;
 export declare function deleteCookie(name: string, path?: string, domain?: string): void;

package/dist/lib/clientlib.js

@@ -29,8 +29,12 @@ export function deleteAllCookies() {
         document.cookie = `${name}=;expires=Thu, 01 Jan 1970 00:00:00 GMT;path=/`;
     }
 }
-export function setCookie(name, value) {
-    document.cookie = `${name}=${value}`;
+export function setCookie(name, value, path = "/", domain) {
+    let cookieString = `${name}=${value};path=${path}`;
+    if (domain) {
+        cookieString += `;domain=${domain}`;
+    }
+    document.cookie = cookieString;
 }
 export function deleteCookie(name, path = "/", domain) {
     let cookieString = `${name}=;expires=Thu, 01 Jan 1970 00:00:00 GMT;path=${path}`;

package/dist/ui/mt/dialog/MtDialog.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
-import { useMediaQuery } from "../../../hooks/use-media-query";
+import { useIsDesktop } from "../../../hooks/use-media-query";
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "../../dialog";
 import { Drawer, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, } from "../../drawer";
 export function MtDialog(props) {
     const [open, setOpen] = useState(props.open || false);
-    const isDesktop = useMediaQuery("(min-width: 768px)");
+    const isDesktop = useIsDesktop();
     const handleOpenChange = (open) => {
         setOpen(open);
         props.onOpenChange?.(open);

package/dist/ui/select.d.ts

@@ -4,8 +4,10 @@ declare const Select: React.FC<SelectPrimitive.SelectProps>;
 declare const SelectGroup: React.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
 declare const SelectValue: React.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
 declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const SelectScrollUpButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectScrollDownButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const SelectContent: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const SelectLabel: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const SelectItem: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const SelectSeparator: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue };
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue };

package/dist/ui/select.js

@@ -1,22 +1,27 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CaretSortIcon, CheckIcon } from "@radix-ui/react-icons";
 import * as SelectPrimitive from "@radix-ui/react-select";
+import { Check, ChevronDown, ChevronUp } from "lucide-react";
 import * as React from "react";
 import { cn } from "../lib/utils";
 const Select = SelectPrimitive.Root;
 const SelectGroup = SelectPrimitive.Group;
 const SelectValue = SelectPrimitive.Value;
-const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(SelectPrimitive.Trigger, { ref: ref, className: cn("border-input ring-offset-background placeholder:text-muted-foreground focus:ring-ring flex h-9 w-full items-center justify-between rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-1 disabled:cursor-not-allowed disabled:opacity-50", className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(CaretSortIcon, { className: "h-4 w-4 opacity-50" }) })] })));
+const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(SelectPrimitive.Trigger, { ref: ref, className: cn("flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1", className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(ChevronDown, { className: "h-4 w-4 opacity-50" }) })] })));
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-const SelectContent = React.forwardRef(({ className, children, position = "popper", ...props }, ref) => (_jsx(SelectPrimitive.Portal, { children: _jsx(SelectPrimitive.Content, { ref: ref, className: cn("bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 min-w-32 overflow-hidden rounded-md border shadow-md", position === "popper" &&
-            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className), position: position, ...props, children: _jsx(SelectPrimitive.Viewport, { className: cn("p-1", position === "popper" &&
-                "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"), children: children }) }) })));
+const SelectScrollUpButton = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.ScrollUpButton, { ref: ref, className: cn("flex cursor-default items-center justify-center py-1", className), ...props, children: _jsx(ChevronUp, { className: "h-4 w-4" }) })));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+const SelectScrollDownButton = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.ScrollDownButton, { ref: ref, className: cn("flex cursor-default items-center justify-center py-1", className), ...props, children: _jsx(ChevronDown, { className: "h-4 w-4" }) })));
+SelectScrollDownButton.displayName =
+    SelectPrimitive.ScrollDownButton.displayName;
+const SelectContent = React.forwardRef(({ className, children, position = "popper", ...props }, ref) => (_jsx(SelectPrimitive.Portal, { children: _jsxs(SelectPrimitive.Content, { ref: ref, className: cn("relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", position === "popper" &&
+            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className), position: position, ...props, children: [_jsx(SelectScrollUpButton, {}), _jsx(SelectPrimitive.Viewport, { className: cn("p-1", position === "popper" &&
+                    "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"), children: children }), _jsx(SelectScrollDownButton, {})] }) })));
 SelectContent.displayName = SelectPrimitive.Content.displayName;
-const SelectLabel = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.Label, { ref: ref, className: cn("px-2 py-1.5 text-sm font-semibold", className), ...props })));
+const SelectLabel = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.Label, { ref: ref, className: cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className), ...props })));
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
-const SelectItem = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(SelectPrimitive.Item, { ref: ref, className: cn("focus:bg-accent focus:text-accent-foreground relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className), ...props, children: [_jsx("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(CheckIcon, { className: "h-4 w-4" }) }) }), _jsx(SelectPrimitive.ItemText, { children: children })] })));
+const SelectItem = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(SelectPrimitive.Item, { ref: ref, className: cn("relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className), ...props, children: [_jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(Check, { className: "h-4 w-4" }) }) }), _jsx(SelectPrimitive.ItemText, { children: children })] })));
 SelectItem.displayName = SelectPrimitive.Item.displayName;
-const SelectSeparator = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.Separator, { ref: ref, className: cn("bg-muted -mx-1 my-1 h-px", className), ...props })));
+const SelectSeparator = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.Separator, { ref: ref, className: cn("-mx-1 my-1 h-px bg-muted", className), ...props })));
 SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
-export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue };
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mtxuilib",
   "private": false,
-  "version": "0.1.296",
+  "version": "0.1.297",
   "publishConfig": {
     "access": "public"
   },
@@ -106,7 +106,7 @@
     "@radix-ui/react-progress": "^1.1.0",
     "@radix-ui/react-radio-group": "^1.2.0",
     "@radix-ui/react-scroll-area": "^1.1.0",
-    "@radix-ui/react-select": "^1.2.2",
+    "@radix-ui/react-select": "^2.1.1",
     "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slider": "^1.2.0",
     "@radix-ui/react-slot": "^1.1.0",
@@ -157,8 +157,8 @@
     "openai": "^4.55.5",
     "path-to-regexp": "^6.2.2",
     "react": "^19.0.0-beta-26f2496093-20240514",
-    "react-dom": "^19.0.0-beta-26f2496093-20240514",
     "react-day-picker": "^8.10.1",
+    "react-dom": "^19.0.0-beta-26f2496093-20240514",
     "react-easy-infinite-scroll-hook": "^2.1.4",
     "react-error-boundary": "^4.0.13",
     "react-hook-form": "^7.53.0",

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

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

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

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

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