@shipfox/react-ui 0.14.0 → 0.16.0

package/dist/components/dashboard/components/organization-selector.js

@@ -0,0 +1,115 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Avatar } from '../../../components/avatar/index.js';
+import { Button } from '../../../components/button/index.js';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from '../../../components/dropdown-menu/index.js';
+import { Icon } from '../../../components/icon/index.js';
+import { useState } from 'react';
+import { cn } from '../../../utils/cn.js';
+const organizations = [
+    {
+        id: 'stripe',
+        name: 'Stripe',
+        logo: 'stripe'
+    },
+    {
+        id: 'shipfox',
+        name: 'Shipfox',
+        logo: 'shipfox'
+    },
+    {
+        id: 'github',
+        name: 'GitHub',
+        logo: 'github'
+    }
+];
+export function OrganizationSelector({ defaultValue = 'stripe', onOrganizationChange, onSettingsClick, onNewOrganizationClick, className }) {
+    const [selectedOrg, setSelectedOrg] = useState(defaultValue);
+    const currentOrg = organizations.find((org)=>org.id === selectedOrg) || organizations[0];
+    const handleOrganizationSelect = (orgId)=>{
+        setSelectedOrg(orgId);
+        onOrganizationChange?.(orgId);
+    };
+    return /*#__PURE__*/ _jsxs(DropdownMenu, {
+        children: [
+            /*#__PURE__*/ _jsx(DropdownMenuTrigger, {
+                asChild: true,
+                children: /*#__PURE__*/ _jsxs(Button, {
+                    variant: "transparent",
+                    className: cn('w-200 h-40 shadow-none bg-background-neutral-base hover:bg-background-neutral-hover', 'rounded-none gap-8 pl-12 border-l min-[321px]:border-r border-border-neutral-strong', 'justify-start', className),
+                    children: [
+                        /*#__PURE__*/ _jsx(Avatar, {
+                            size: "3xs",
+                            content: "logo",
+                            logoName: currentOrg.logo,
+                            radius: "rounded"
+                        }),
+                        /*#__PURE__*/ _jsx("span", {
+                            className: "flex-1 text-left truncate text-sm text-foreground-neutral-subtle",
+                            children: currentOrg.name
+                        }),
+                        /*#__PURE__*/ _jsx(Icon, {
+                            name: "expandUpDownLine",
+                            className: "size-14 text-foreground-neutral-muted shrink-0"
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ _jsxs(DropdownMenuContent, {
+                side: "bottom",
+                align: "start",
+                size: "md",
+                className: "min-w-200",
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "flex items-center gap-8 px-8 py-6 rounded-6",
+                        children: [
+                            /*#__PURE__*/ _jsx(Avatar, {
+                                size: "3xs",
+                                content: "logo",
+                                logoName: currentOrg.logo,
+                                radius: "rounded"
+                            }),
+                            /*#__PURE__*/ _jsxs("span", {
+                                className: "flex-1 text-sm text-foreground-neutral-subtle truncate",
+                                children: [
+                                    currentOrg.name,
+                                    "'s organization"
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx(DropdownMenuSeparator, {}),
+                    /*#__PURE__*/ _jsx(DropdownMenuItem, {
+                        icon: "settings3Line",
+                        onSelect: onSettingsClick,
+                        children: "Settings"
+                    }),
+                    /*#__PURE__*/ _jsxs(DropdownMenuSub, {
+                        children: [
+                            /*#__PURE__*/ _jsx(DropdownMenuSubTrigger, {
+                                icon: "arrowLeftRightLine",
+                                children: "Switch organization"
+                            }),
+                            /*#__PURE__*/ _jsx(DropdownMenuSubContent, {
+                                children: organizations.map((org)=>/*#__PURE__*/ _jsx(DropdownMenuItem, {
+                                        icon: org.logo,
+                                        iconStyle: org.id === selectedOrg ? 'text-foreground-highlight-interactive' : 'text-foreground-neutral-base',
+                                        className: cn(org.id === selectedOrg && 'text-foreground-neutral-base font-medium'),
+                                        onSelect: ()=>handleOrganizationSelect(org.id),
+                                        children: org.name
+                                    }, org.id))
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx(DropdownMenuItem, {
+                        icon: "addLine",
+                        onSelect: onNewOrganizationClick,
+                        children: "New organization"
+                    })
+                ]
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=organization-selector.js.map

package/dist/components/dashboard/components/sidebar.d.ts

@@ -0,0 +1,24 @@
+import { type IconName } from '../../../components/icon';
+export type SidebarNavItem = {
+    id: string;
+    label: string;
+    icon: IconName;
+    href?: string;
+    isActive?: boolean;
+};
+export interface SidebarProps {
+    items: SidebarNavItem[];
+    activeItemId?: string;
+    onItemClick?: (item: SidebarNavItem) => void;
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    className?: string;
+}
+export declare function Sidebar({ items, activeItemId, onItemClick, defaultOpen, open: openProp, onOpenChange: setOpenProp, className, }: SidebarProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Default sidebar items for Analytics page
+ * These represent sub-sections within Analytics
+ */
+export declare const defaultSidebarItems: SidebarNavItem[];
+//# sourceMappingURL=sidebar.d.ts.map

package/dist/components/dashboard/components/sidebar.js

@@ -0,0 +1,218 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../../../components/button/index.js';
+import { Icon } from '../../../components/icon/index.js';
+import { Kbd } from '../../../components/kbd/index.js';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../../components/tooltip/index.js';
+import { Text } from '../../../components/typography/index.js';
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { cn } from '../../../utils/cn.js';
+const SIDEBAR_WIDTH = '16rem'; // 256px
+const SIDEBAR_WIDTH_ICON = '4rem'; // 64px
+const SIDEBAR_KEYBOARD_SHORTCUT = 'b';
+const SidebarContext = /*#__PURE__*/ createContext(undefined);
+function useSidebarContext() {
+    const context = useContext(SidebarContext);
+    if (!context) {
+        throw new Error('useSidebarContext must be used within Sidebar');
+    }
+    return context;
+}
+export function Sidebar({ items, activeItemId, onItemClick, defaultOpen = true, open: openProp, onOpenChange: setOpenProp, className }) {
+    // Internal state for uncontrolled mode
+    const [_open, _setOpen] = useState(defaultOpen);
+    const open = openProp ?? _open;
+    const setOpen = useCallback((value)=>{
+        const openState = typeof value === 'function' ? value(open) : value;
+        if (setOpenProp) {
+            setOpenProp(openState);
+        } else {
+            _setOpen(openState);
+        }
+    }, [
+        setOpenProp,
+        open
+    ]);
+    const toggleSidebar = useCallback(()=>{
+        setOpen((prev)=>!prev);
+    }, [
+        setOpen
+    ]);
+    // Keyboard shortcut: Cmd/Ctrl + B
+    useEffect(()=>{
+        const handleKeyDown = (event)=>{
+            if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
+                event.preventDefault();
+                toggleSidebar();
+            }
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return ()=>window.removeEventListener('keydown', handleKeyDown);
+    }, [
+        toggleSidebar
+    ]);
+    const state = open ? 'expanded' : 'collapsed';
+    const contextValue = useMemo(()=>({
+            state,
+            open,
+            setOpen,
+            toggleSidebar
+        }), [
+        state,
+        open,
+        setOpen,
+        toggleSidebar
+    ]);
+    return /*#__PURE__*/ _jsx(SidebarContext.Provider, {
+        value: contextValue,
+        children: /*#__PURE__*/ _jsx(TooltipProvider, {
+            delayDuration: 0,
+            children: /*#__PURE__*/ _jsx("aside", {
+                style: {
+                    width: state === 'collapsed' ? SIDEBAR_WIDTH_ICON : SIDEBAR_WIDTH
+                },
+                className: cn('group/sidebar flex flex-col shrink-0 h-full', 'transition-[width] duration-150 ease-linear', className),
+                "data-state": state,
+                "data-collapsible": state === 'collapsed' ? 'icon' : '',
+                children: /*#__PURE__*/ _jsxs("nav", {
+                    className: "flex flex-col flex-1 overflow-hidden gap-4",
+                    children: [
+                        /*#__PURE__*/ _jsx(SidebarHeader, {}),
+                        /*#__PURE__*/ _jsx(SidebarContent, {
+                            children: /*#__PURE__*/ _jsx(SidebarMenu, {
+                                items: items,
+                                activeItemId: activeItemId,
+                                onItemClick: onItemClick
+                            })
+                        })
+                    ]
+                })
+            })
+        })
+    });
+}
+function SidebarHeader() {
+    const { state, toggleSidebar } = useSidebarContext();
+    return /*#__PURE__*/ _jsxs("div", {
+        "data-slot": "sidebar-header",
+        className: cn('flex items-center h-32 shrink-0', 'transition-all duration-200', state === 'collapsed' ? 'justify-center px-0' : 'justify-between pl-24 pr-16'),
+        children: [
+            state === 'expanded' && /*#__PURE__*/ _jsx(Text, {
+                size: "xs",
+                className: "flex-1 font-medium text-foreground-neutral-muted whitespace-nowrap",
+                children: "Analytics"
+            }),
+            /*#__PURE__*/ _jsxs(Tooltip, {
+                children: [
+                    /*#__PURE__*/ _jsx(TooltipTrigger, {
+                        asChild: true,
+                        children: /*#__PURE__*/ _jsx(Button, {
+                            variant: "transparent",
+                            size: "2xs",
+                            className: cn('shrink-0 text-foreground-neutral-muted hover:text-foreground-neutral-subtle', 'transition-all duration-200', 'p-6 rounded-6', 'size-32'),
+                            onClick: toggleSidebar,
+                            "aria-label": state === 'expanded' ? 'Collapse sidebar' : 'Expand sidebar',
+                            "aria-expanded": state === 'expanded',
+                            children: /*#__PURE__*/ _jsx(Icon, {
+                                name: state === 'expanded' ? 'sidebarFoldLine' : 'sidebarUnfoldLine',
+                                className: "size-16"
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ _jsxs(TooltipContent, {
+                        side: "right",
+                        className: "flex items-center gap-8",
+                        children: [
+                            /*#__PURE__*/ _jsxs("span", {
+                                children: [
+                                    state === 'expanded' ? 'Collapse' : 'Expand',
+                                    " sidebar"
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsx(Kbd, {
+                                className: "h-16 !text-foreground-neutral-subtle",
+                                children: "⌘B"
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+}
+function SidebarContent({ className, children }) {
+    return /*#__PURE__*/ _jsx("div", {
+        "data-slot": "sidebar-content",
+        className: cn('flex min-h-0 flex-1 flex-col gap-4 overflow-auto scrollbar', 'px-16 pb-16', 'group-data-[collapsible=icon]/sidebar:overflow-hidden', className),
+        children: children
+    });
+}
+function SidebarMenu({ items, activeItemId, onItemClick }) {
+    return /*#__PURE__*/ _jsx("ul", {
+        "data-slot": "sidebar-menu",
+        className: "flex w-full min-w-0 flex-col gap-4",
+        children: items.map((item)=>{
+            const isActive = item.isActive ?? item.id === activeItemId;
+            return /*#__PURE__*/ _jsx(SidebarMenuItem, {
+                item: item,
+                isActive: isActive,
+                onClick: ()=>onItemClick?.(item)
+            }, item.id);
+        })
+    });
+}
+function SidebarMenuItem({ item, isActive, onClick }) {
+    const { state } = useSidebarContext();
+    const button = /*#__PURE__*/ _jsxs("button", {
+        type: "button",
+        onClick: onClick,
+        "data-slot": "sidebar-menu-button",
+        "data-active": isActive,
+        className: cn('peer/menu-button flex w-full items-center gap-10 overflow-hidden rounded-6', 'text-left text-sm outline-hidden', 'transition-[width,height,padding] duration-200 ease-linear', 'hover:bg-background-neutral-hover', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-highlight-interactive', 'active:bg-background-neutral-hover', 'disabled:pointer-events-none disabled:opacity-50', 'h-32 p-8', 'group-data-[collapsible=icon]/sidebar:size-32! group-data-[collapsible=icon]/sidebar:p-8!', isActive ? 'bg-background-neutral-hover font-medium text-foreground-neutral-base' : 'text-foreground-neutral-subtle', '[&>span:last-child]:truncate', 'relative'),
+        "aria-current": isActive ? 'page' : undefined,
+        children: [
+            /*#__PURE__*/ _jsx(Icon, {
+                name: item.icon,
+                className: cn('size-16 shrink-0 transition-colors duration-200', isActive ? 'text-[#FF4B00]' : 'text-foreground-neutral-muted')
+            }),
+            /*#__PURE__*/ _jsx("span", {
+                className: "flex-1 truncate text-sm font-normal",
+                children: item.label
+            })
+        ]
+    });
+    return /*#__PURE__*/ _jsx("li", {
+        "data-slot": "sidebar-menu-item",
+        className: "group/menu-item relative",
+        children: /*#__PURE__*/ _jsxs(Tooltip, {
+            children: [
+                /*#__PURE__*/ _jsx(TooltipTrigger, {
+                    asChild: true,
+                    children: button
+                }),
+                /*#__PURE__*/ _jsx(TooltipContent, {
+                    side: "right",
+                    align: "center",
+                    hidden: state !== 'collapsed',
+                    children: item.label
+                })
+            ]
+        })
+    });
+}
+/**
+ * Default sidebar items for Analytics page
+ * These represent sub-sections within Analytics
+ */ export const defaultSidebarItems = [
+    {
+        id: 'reliability',
+        label: 'Reliability',
+        icon: 'shieldCheckLine'
+    },
+    {
+        id: 'performance',
+        label: 'Performance',
+        icon: 'speedLine'
+    }
+];
+
+//# sourceMappingURL=sidebar.js.map

package/dist/components/dashboard/components/top-menu.d.ts

@@ -0,0 +1,5 @@
+export declare function TopMenu({ activeTab, onTabChange, }: {
+    activeTab: string;
+    onTabChange: (tab: string) => void;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=top-menu.d.ts.map

package/dist/components/dashboard/components/top-menu.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Tabs, TabsList, TabsTrigger } from '../../../components/tabs/index.js';
+export function TopMenu({ activeTab, onTabChange }) {
+    return /*#__PURE__*/ _jsx("div", {
+        className: "flex items-center justify-between w-full",
+        children: /*#__PURE__*/ _jsx("div", {
+            className: "flex items-center flex-1 min-w-0 pl-12 md:pl-20 pr-8",
+            children: /*#__PURE__*/ _jsx(Tabs, {
+                value: activeTab,
+                onValueChange: onTabChange,
+                children: /*#__PURE__*/ _jsxs(TabsList, {
+                    className: "h-48 gap-8 md:gap-12",
+                    children: [
+                        /*#__PURE__*/ _jsx(TabsTrigger, {
+                            value: "analytics",
+                            className: "text-sm font-medium",
+                            children: "Analytics"
+                        }),
+                        /*#__PURE__*/ _jsx(TabsTrigger, {
+                            value: "jobs",
+                            className: "text-sm font-medium",
+                            children: "Jobs"
+                        })
+                    ]
+                })
+            })
+        })
+    });
+}
+
+//# sourceMappingURL=top-menu.js.map

package/dist/components/dashboard/components/topbar-button.d.ts

@@ -0,0 +1,7 @@
+import { type IconName } from '../../../components/icon';
+export declare function TopbarButton({ className, icon, label, }: {
+    className?: string;
+    icon: IconName;
+    label?: string;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=topbar-button.d.ts.map

package/dist/components/dashboard/components/topbar-button.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from '../../../components/button/index.js';
+import { Icon } from '../../../components/icon/index.js';
+import { cn } from '../../../utils/cn.js';
+export function TopbarButton({ className, icon, label }) {
+    return /*#__PURE__*/ _jsx(Button, {
+        type: "button",
+        variant: "transparent",
+        className: cn('flex items-center justify-center overflow-hidden shrink-0 w-40 h-40 bg-background-subtle-base hover:bg-background-neutral-hover transition-colors rounded-none border-l border-border-neutral-strong', className),
+        "aria-label": label ?? undefined,
+        children: /*#__PURE__*/ _jsx(Icon, {
+            name: icon,
+            className: "size-18 text-foreground-neutral-subtle"
+        })
+    });
+}
+
+//# sourceMappingURL=topbar-button.js.map

package/dist/components/dashboard/components/topbar.d.ts

@@ -0,0 +1,4 @@
+export declare function Topbar({ hideLogo }: {
+    hideLogo?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=topbar.d.ts.map

package/dist/components/dashboard/components/topbar.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../../utils/cn.js';
+import { CompleteSetupButton } from './complete-setup-button.js';
+import { MobileMenu } from './mobile-menu.js';
+import { OrganizationSelector } from './organization-selector.js';
+import { TopbarButton } from './topbar-button.js';
+import { UserProfile } from './user-profile.js';
+export function Topbar({ hideLogo = false }) {
+    return /*#__PURE__*/ _jsx("div", {
+        className: "flex flex-col items-start w-full bg-background-subtle-base",
+        children: /*#__PURE__*/ _jsxs("div", {
+            className: "flex items-center justify-between w-full shrink-0 border-b border-border-neutral-strong",
+            children: [
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex items-center flex-1 min-w-0",
+                    children: [
+                        /*#__PURE__*/ _jsx("div", {
+                            className: cn('shrink-0', hideLogo ? 'opacity-0' : 'opacity-100'),
+                            children: /*#__PURE__*/ _jsx(TopbarButton, {
+                                icon: "shipfox",
+                                label: "Shipfox",
+                                className: "border-none"
+                            })
+                        }),
+                        /*#__PURE__*/ _jsx(OrganizationSelector, {}),
+                        /*#__PURE__*/ _jsx("div", {
+                            className: "hidden md:block flex-1 h-40 bg-background-subtle-base"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsx(CompleteSetupButton, {
+                    className: "hidden md:flex"
+                }),
+                /*#__PURE__*/ _jsx("div", {
+                    className: "hidden md:block",
+                    children: /*#__PURE__*/ _jsx(TopbarButton, {
+                        icon: "searchLine",
+                        label: "Search"
+                    })
+                }),
+                /*#__PURE__*/ _jsx("div", {
+                    className: "hidden md:block",
+                    children: /*#__PURE__*/ _jsx(TopbarButton, {
+                        icon: "questionLine",
+                        label: "Help"
+                    })
+                }),
+                /*#__PURE__*/ _jsx("div", {
+                    className: "hidden md:block",
+                    children: /*#__PURE__*/ _jsx(TopbarButton, {
+                        icon: "notification3Line",
+                        label: "Notifications"
+                    })
+                }),
+                /*#__PURE__*/ _jsx(MobileMenu, {}),
+                /*#__PURE__*/ _jsx(UserProfile, {})
+            ]
+        })
+    });
+}
+
+//# sourceMappingURL=topbar.js.map

package/dist/components/dashboard/components/user-profile.d.ts

@@ -0,0 +1,2 @@
+export declare function UserProfile(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=user-profile.d.ts.map

package/dist/components/dashboard/components/user-profile.js

@@ -0,0 +1,146 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Avatar } from '../../../components/avatar/index.js';
+import { UserBadge } from '../../../components/badge/index.js';
+import { Button } from '../../../components/button/index.js';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '../../../components/dropdown-menu/index.js';
+import { ShinyText } from '../../../components/shiny-text/index.js';
+function UsageGauge({ used, total }) {
+    const percentage = total <= 0 ? 0 : Math.min(used / total * 100, 100);
+    return /*#__PURE__*/ _jsx("div", {
+        className: "flex h-8 w-full rounded-full bg-tag-neutral-bg overflow-hidden",
+        children: /*#__PURE__*/ _jsx("div", {
+            className: "h-full bg-tag-success-icon rounded-l-2",
+            style: {
+                width: `${percentage}%`
+            }
+        })
+    });
+}
+export function UserProfile() {
+    const userName = 'Thierry Abalea';
+    const userEmail = 'thierryabalea@acme.com';
+    const creditsUsed = 3213;
+    const creditsTotal = 6000;
+    return /*#__PURE__*/ _jsxs(DropdownMenu, {
+        children: [
+            /*#__PURE__*/ _jsx(DropdownMenuTrigger, {
+                asChild: true,
+                children: /*#__PURE__*/ _jsxs("div", {
+                    className: "flex items-center justify-center h-40 px-8 cursor-pointer border-l border-border-neutral-strong",
+                    children: [
+                        /*#__PURE__*/ _jsx(Avatar, {
+                            className: "size-24 md:hidden",
+                            content: "image",
+                            fallback: "TA"
+                        }),
+                        /*#__PURE__*/ _jsx(UserBadge, {
+                            name: userName,
+                            className: "hidden md:inline-flex"
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ _jsxs(DropdownMenuContent, {
+                align: "end",
+                className: "w-220",
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "flex items-center gap-12 px-8 py-4",
+                        children: [
+                            /*#__PURE__*/ _jsx(Avatar, {
+                                className: "size-28 shrink-0",
+                                content: "image",
+                                fallback: "TA"
+                            }),
+                            /*#__PURE__*/ _jsxs("div", {
+                                className: "flex flex-col min-w-0",
+                                children: [
+                                    /*#__PURE__*/ _jsx("span", {
+                                        className: "text-sm font-medium leading-20 text-foreground-neutral-base truncate",
+                                        children: userName
+                                    }),
+                                    /*#__PURE__*/ _jsx("span", {
+                                        className: "text-xs leading-20 text-foreground-neutral-subtle truncate",
+                                        children: userEmail
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx(DropdownMenuSeparator, {}),
+                    /*#__PURE__*/ _jsx(DropdownMenuItem, {
+                        icon: "sparkling2Fill",
+                        children: "Getting started"
+                    }),
+                    /*#__PURE__*/ _jsx(DropdownMenuItem, {
+                        icon: "userLine",
+                        children: "Profile settings"
+                    }),
+                    /*#__PURE__*/ _jsx(DropdownMenuSeparator, {}),
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "flex flex-col gap-8 px-8 py-4",
+                        children: [
+                            /*#__PURE__*/ _jsxs("div", {
+                                className: "flex items-center justify-between gap-8",
+                                children: [
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        className: "flex items-center gap-8",
+                                        children: [
+                                            /*#__PURE__*/ _jsx(Avatar, {
+                                                className: "size-12",
+                                                content: "logo",
+                                                logoName: "stripe",
+                                                radius: "rounded"
+                                            }),
+                                            /*#__PURE__*/ _jsx("span", {
+                                                className: "text-sm font-medium leading-20 text-foreground-neutral-subtle",
+                                                children: "Usage"
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ _jsxs("span", {
+                                        className: "text-sm font-medium leading-20 text-foreground-neutral-subtle",
+                                        children: [
+                                            creditsUsed,
+                                            " / ",
+                                            creditsTotal
+                                        ]
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsx(UsageGauge, {
+                                used: creditsUsed,
+                                total: creditsTotal
+                            }),
+                            /*#__PURE__*/ _jsxs("span", {
+                                className: "text-xs leading-20 text-foreground-neutral-subtle",
+                                children: [
+                                    creditsTotal,
+                                    " free credits every month."
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        className: "px-8 pb-12",
+                        children: /*#__PURE__*/ _jsx(Button, {
+                            type: "button",
+                            className: "w-full",
+                            children: /*#__PURE__*/ _jsx(ShinyText, {
+                                text: "Upgrade Plan",
+                                className: "flex-1 text-sm font-medium leading-20 text-foreground-neutral-base truncate text-center"
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(DropdownMenuSeparator, {}),
+                    /*#__PURE__*/ _jsx(DropdownMenuItem, {
+                        icon: "logoutCircleLine",
+                        children: "Log out"
+                    })
+                ]
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=user-profile.js.map