mtxuilib 0.1.304 → 0.1.307

package/dist/components/button-scroll-to-bottom.d.ts

@@ -1,4 +1,4 @@
-import { ButtonProps } from "../ui/button";
+import type { ButtonProps } from "../ui/button";
 interface ButtonScrollToBottomProps extends ButtonProps {
     isAtBottom: boolean;
     scrollToBottom: () => void;

package/dist/components/button-scroll-to-bottom.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "react-day-picker";
 import { IconArrowDown } from "../icons/icons-ai";
 import { cn } from "../lib/utils";
-import { Button } from "../ui/button";
 export function ButtonScrollToBottom({ className, isAtBottom, scrollToBottom, ...props }) {
     return (_jsxs(Button, { variant: "outline", size: "icon", className: cn("absolute right-4 top-1 z-10 bg-background transition-opacity duration-300 sm:right-8 md:top-2", isAtBottom ? "opacity-0" : "opacity-100", className), onClick: () => scrollToBottom(), ...props, children: [_jsx(IconArrowDown, {}), _jsx("span", { className: "sr-only", children: "Scroll to bottom" })] }));
 }

package/dist/icons/icons.d.ts

@@ -127,6 +127,6 @@ export declare const Icons: {
     paypal: (props: IconProps) => import("react/jsx-runtime").JSX.Element;
 };
 export declare const IconX: (props: {
-    name?: string;
+    name?: string | null;
 } & IconProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,2 +1,2 @@
-import { NavProps } from "../types";
+import type { NavProps } from "../types";
 export declare function SiderNavItem({ items, isCollapsed }: NavProps): import("react/jsx-runtime").JSX.Element;

package/dist/layouts/dash5/SiderNavItem.js

@@ -10,10 +10,18 @@ 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" &&
+                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-300"), 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);
+                                        "text-background dark:text-white"), children: link.label }))] }, index) })) }, index));
             }) }) }));
 }

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

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

package/dist/layouts/dash5/SiderToggleButton.js

@@ -1,7 +1,8 @@
-'use client';
+"use client";
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { useDash5Store } from './dash5.store';
-export const SiderToggleButton = ({ isCollapsed, setIsCollapsed }) => {
-    const toggleAsideCollapsed = useDash5Store(x => x.toggleAsideCollapsed);
+import { useDash5Store } from "./dash5.store";
+export const SiderToggleButton = () => {
+    const toggleAsideCollapsed = useDash5Store((x) => x.toggleAsideCollapsed);
+    const isCollapsed = useDash5Store((x) => x.layoutConfig.asideIsCollapsed);
     return (_jsx(_Fragment, { children: _jsx("button", { onClick: () => toggleAsideCollapsed(), 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,7 +1,6 @@
-import { type ReactNode } from "react";
 import { type StateCreator } from "zustand";
 import type { Renderable } from "../../lib/render";
-import { DashSiderProps } from "../types";
+import type { DashASiderProps } from "../types";
 export declare const dash5LayoutDefaultConfig: {
     asideIsCollapsed: boolean;
     asideCollapsedSize: number;
@@ -16,15 +15,14 @@ export declare const dash5LayoutDefaultConfig: {
     layoutStoreKey: string;
 };
 export type Dash5LayoutProps = {
-    siderComponent?: Renderable<DashSiderProps>;
-    headerComponent?: Renderable<DashSiderProps>;
+    headerComponent?: Renderable<DashASiderProps>;
+    aSiderRender?: (props: DashASiderProps) => React.ReactNode;
 };
 export interface Dash5LayoutState extends Dash5LayoutProps {
     _hasHydrated?: boolean;
     layoutConfig: typeof dash5LayoutDefaultConfig;
     setHasHydrated: (_hasHydrated: boolean) => void;
     setIsSideCollapsed: (isSideCollapsed: boolean) => void;
-    setSiderComponent: (siderComponent: ReactNode) => void;
     toggleAsideCollapsed: () => void;
 }
 export declare const createAppSlice: StateCreator<Dash5LayoutState, [

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

@@ -30,11 +30,12 @@ export const createAppSlice = (set, get, init) => {
             const pre = get().layoutConfig;
             set({ layoutConfig: { ...pre, asideIsCollapsed: isSideCollapsed } });
         },
-        setSiderComponent: (siderComponent) => set({ siderComponent }),
         toggleAsideCollapsed: () => {
             const pre = get().layoutConfig;
-            set({ layoutConfig: { ...pre, asideIsCollapsed: !pre.asideIsCollapsed } });
-        }
+            set({
+                layoutConfig: { ...pre, asideIsCollapsed: !pre.asideIsCollapsed },
+            });
+        },
     };
 };
 const createMtAppStore = (initProps) => {
@@ -53,11 +54,7 @@ const createMtAppStore = (initProps) => {
         },
         partialize: (state) => {
             return Object.fromEntries(Object.entries(state).filter(([key]) => {
-                return ![
-                    "children",
-                    "_hasHydrated",
-                    "siderComponent",
-                ].includes(key);
+                return !["children", "_hasHydrated", "siderComponent"].includes(key);
             }));
         },
     }));

package/dist/layouts/dash5/index.js

@@ -5,22 +5,22 @@ import { useEffect, useRef } from "react";
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup, } from "../../ui/resizable";
 import { TooltipProvider } from "../../ui/tooltip";
 import { Dash5LayoutProvider, useDash5Store, } from "./dash5.store";
-import { DashSider } from "./DashSider";
 export function Dash5Layout(props) {
     return (_jsx(Dash5LayoutProvider, { ...props, children: _jsx(DashLayoutInner, { children: props.children }) }));
 }
 const DashLayoutInner = (props) => {
     const asideIsCollapsed = useDash5Store((x) => x.layoutConfig?.asideIsCollapsed);
-    const asideDefaultSize = useDash5Store(x => x.layoutConfig.asideDefaultSize);
-    const asideCollapsedSize = useDash5Store(x => x.layoutConfig.asideCollapsedSize);
-    const asideMinSize = useDash5Store(x => x.layoutConfig.asiderMinSize);
-    const asideMaxSize = useDash5Store(x => x.layoutConfig.asiderMaxSize);
-    const asideCollapsible = useDash5Store(x => x.layoutConfig.asiderCollapsible);
+    const asideDefaultSize = useDash5Store((x) => x.layoutConfig.asideDefaultSize);
+    const asideCollapsedSize = useDash5Store((x) => x.layoutConfig.asideCollapsedSize);
+    const asideMinSize = useDash5Store((x) => x.layoutConfig.asiderMinSize);
+    const asideMaxSize = useDash5Store((x) => x.layoutConfig.asiderMaxSize);
+    const asideCollapsible = useDash5Store((x) => x.layoutConfig.asiderCollapsible);
     const setIsSideCollapsed = useDash5Store((x) => x.setIsSideCollapsed);
-    const layoutStoreKey = useDash5Store(x => x.layoutConfig.layoutStoreKey);
-    const mainPanelDefaultSize = useDash5Store(x => x.layoutConfig.mainPanelDefaultSize);
-    const mainPanelMinSize = useDash5Store(x => x.layoutConfig.mainPanelMinSize);
-    const mainPanelMaxSize = useDash5Store(x => x.layoutConfig.mainPanelMaxSize);
+    const layoutStoreKey = useDash5Store((x) => x.layoutConfig.layoutStoreKey);
+    const mainPanelDefaultSize = useDash5Store((x) => x.layoutConfig.mainPanelDefaultSize);
+    const mainPanelMinSize = useDash5Store((x) => x.layoutConfig.mainPanelMinSize);
+    const mainPanelMaxSize = useDash5Store((x) => x.layoutConfig.mainPanelMaxSize);
+    const aSiderRender = useDash5Store((x) => x.aSiderRender);
     const navPanelRef = useRef(null);
     useEffect(() => {
         if (asideIsCollapsed) {
@@ -37,5 +37,5 @@ const DashLayoutInner = (props) => {
                     }, onExpand: () => {
                         setIsSideCollapsed(false);
                     }, className: cn(asideIsCollapsed &&
-                        "min-w-[60px] transition-all duration-300 ease-in-out", "hidden sm:flex sm:flex-col"), children: _jsx(_Fragment, { children: _jsx(DashSider, { isCollapsed: !!asideIsCollapsed }) }) }), _jsx(ResizableHandle, { withHandle: true, className: "hidden md:flex hover:cursor-col-resize hover:bg-gray-400" }), _jsx(ResizablePanel, { defaultSize: mainPanelDefaultSize, minSize: mainPanelMinSize, maxSize: mainPanelMaxSize, 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" })] }) }) })] }) }));
+                        "min-w-[60px] transition-all duration-300 ease-in-out", "hidden sm:flex sm:flex-col"), children: _jsx(_Fragment, { children: aSiderRender?.({ isCollapsed: !!asideIsCollapsed }) }) }), _jsx(ResizableHandle, { withHandle: true, className: "hidden md:flex hover:cursor-col-resize hover:bg-gray-400" }), _jsx(ResizablePanel, { defaultSize: mainPanelDefaultSize, minSize: mainPanelMinSize, maxSize: mainPanelMaxSize, 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

@@ -1,15 +1,15 @@
-export interface DashSiderProps {
+export interface DashASiderProps {
     isCollapsed?: boolean;
 }
 export interface DashHeaderProps {
     hidden?: boolean;
 }
 export interface SiderNavItemProps {
-    title: string;
-    label?: string;
-    icon?: string;
+    title?: string | null;
+    label?: string | null;
+    icon?: string | null;
     variant?: "default" | "ghost";
-    url?: string;
+    url?: string | null;
 }
 export interface NavProps {
     isCollapsed?: boolean;

package/package.json

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

package/dist/layouts/DashLayoutProvider.d.ts

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

@@ -1,55 +0,0 @@
-"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/dash5/DashSider.d.ts

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

package/dist/layouts/dash5/DashSider.js

@@ -1,13 +0,0 @@
-'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.layoutConfig.asideIsCollapsed);
-    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 }) })] }));
-};