@arch-cadre/panel 0.0.1

package/dist/ui/components/app-content.mjs

@@ -0,0 +1,34 @@
+"use client";
+import { ScrollArea } from "@arch-cadre/ui/components/scroll-area";
+import * as React from "react";
+import { useEffect, useState } from "react";
+import { AppHeader } from "./app-header.mjs";
+export function AppContent({
+  children,
+  breadcrumbs
+}) {
+  const [isScrolled, setIsScrolled] = useState(false);
+  useEffect(() => {
+    const onScroll = () => setIsScrolled(window.scrollY > 64);
+    onScroll();
+    window.addEventListener("scroll", onScroll, { passive: true });
+    return () => window.removeEventListener("scroll", onScroll);
+  }, []);
+  const setScrolled = (e) => {
+    const scrollTop = e.currentTarget.scrollTop;
+    if (scrollTop > 20) {
+      setIsScrolled(true);
+    } else {
+      setIsScrolled(false);
+    }
+  };
+  return /* @__PURE__ */ React.createElement("main", { className: "bg-sidebar h-svh overflow-hidden lg:p-2 w-full" }, /* @__PURE__ */ React.createElement("div", { className: "lg:border squircle overflow-hidden flex flex-col items-center justify-start h-full w-full bg-background" }, /* @__PURE__ */ React.createElement(AppHeader, { isScrolled, breadcrumbs }), /* @__PURE__ */ React.createElement(
+    ScrollArea,
+    {
+      onScroll: (e) => setScrolled(e),
+      className: "h-[calc(100svh-56px-var(--header-height))] w-full flex-1",
+      orientation: "vertical"
+    },
+    /* @__PURE__ */ React.createElement("div", { className: "min-h-[calc(100svh-56px-var(--header-height))] p-4" }, children)
+  )));
+}

package/dist/ui/components/app-header.cjs

@@ -0,0 +1,55 @@
+"use strict";
+"use client";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AppHeader = AppHeader;
+var _ui = require("@arch-cadre/ui");
+var _logo = require("@arch-cadre/ui/brand/logo");
+var _button = require("@arch-cadre/ui/components/button");
+var _separator = require("@arch-cadre/ui/components/separator");
+var _sidebar = require("@arch-cadre/ui/components/sidebar");
+var _utils = require("@arch-cadre/ui/lib/utils");
+var _react = require("@iconify/react");
+var _link = _interopRequireDefault(require("next/link"));
+var React = _interopRequireWildcard(require("react"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function AppHeader({
+  breadcrumbs,
+  isScrolled
+}) {
+  const {
+    toggleSidebar
+  } = (0, _sidebar.useSidebar)();
+  return /* @__PURE__ */React.createElement("header", {
+    className: (0, _utils.cn)("sticky top-0 z-50", "flex w-full items-center h-(--header-height)", "transition-all", isScrolled ? "bg-background shadow-xs " : "")
+  }, /* @__PURE__ */React.createElement("div", {
+    className: "flex h-[var(--header-height)] w-full items-center"
+  }, /* @__PURE__ */React.createElement("div", {
+    className: "-mr-px flex shrink-0 items-center gap-2 px-4"
+  }, /* @__PURE__ */React.createElement(_button.Button, {
+    className: "h-8 w-8 cursor-pointer",
+    variant: "ghost",
+    size: "icon",
+    onClick: toggleSidebar,
+    type: "button"
+  }, /* @__PURE__ */React.createElement(_react.Icon, {
+    icon: "solar:sidebar-minimalistic-broken"
+  }))), /* @__PURE__ */React.createElement(_separator.Separator, {
+    orientation: "vertical",
+    className: "mr-2 h-4"
+  }), /* @__PURE__ */React.createElement("div", {
+    className: "flex flex-1 items-center gap-2 px-4"
+  }, /* @__PURE__ */React.createElement(_link.default, {
+    href: "/app",
+    className: "md:hidden items-center gap-x-2 mr-4 md:mr-0 flex"
+  }, /* @__PURE__ */React.createElement(_logo.Logo, {
+    className: "h-auto w-[134px]",
+    "aria-hidden": true
+  })), breadcrumbs, /* @__PURE__ */React.createElement("div", {
+    className: "ml-auto w-auto flex gap-x-3"
+  }, /* @__PURE__ */React.createElement(_ui.LanguageSwitcher, null)))));
+}

package/dist/ui/components/app-header.d.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from "react";
+import * as React from "react";
+export declare function AppHeader({ breadcrumbs, isScrolled, }: {
+    breadcrumbs?: ReactNode;
+    isScrolled: boolean;
+}): React.JSX.Element;

package/dist/ui/components/app-header.mjs

@@ -0,0 +1,45 @@
+"use client";
+import { LanguageSwitcher } from "@arch-cadre/ui";
+import { Logo } from "@arch-cadre/ui/brand/logo";
+import { Button } from "@arch-cadre/ui/components/button";
+import { Separator } from "@arch-cadre/ui/components/separator";
+import { useSidebar } from "@arch-cadre/ui/components/sidebar";
+import { cn } from "@arch-cadre/ui/lib/utils";
+import { Icon } from "@iconify/react";
+import Link from "next/link";
+import * as React from "react";
+export function AppHeader({
+  breadcrumbs,
+  isScrolled
+}) {
+  const { toggleSidebar } = useSidebar();
+  return /* @__PURE__ */ React.createElement(
+    "header",
+    {
+      className: cn(
+        "sticky top-0 z-50",
+        "flex w-full items-center h-(--header-height)",
+        "transition-all",
+        isScrolled ? "bg-background shadow-xs " : ""
+      )
+    },
+    /* @__PURE__ */ React.createElement("div", { className: "flex h-[var(--header-height)] w-full items-center" }, /* @__PURE__ */ React.createElement("div", { className: "-mr-px flex shrink-0 items-center gap-2 px-4" }, /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        className: "h-8 w-8 cursor-pointer",
+        variant: "ghost",
+        size: "icon",
+        onClick: toggleSidebar,
+        type: "button"
+      },
+      /* @__PURE__ */ React.createElement(Icon, { icon: "solar:sidebar-minimalistic-broken" })
+    )), /* @__PURE__ */ React.createElement(Separator, { orientation: "vertical", className: "mr-2 h-4" }), /* @__PURE__ */ React.createElement("div", { className: "flex flex-1 items-center gap-2 px-4" }, /* @__PURE__ */ React.createElement(
+      Link,
+      {
+        href: "/app",
+        className: "md:hidden items-center gap-x-2 mr-4 md:mr-0 flex"
+      },
+      /* @__PURE__ */ React.createElement(Logo, { className: "h-auto w-[134px]", "aria-hidden": true })
+    ), breadcrumbs, /* @__PURE__ */ React.createElement("div", { className: "ml-auto w-auto flex gap-x-3" }, /* @__PURE__ */ React.createElement(LanguageSwitcher, null))))
+  );
+}

package/dist/ui/components/app-sidebar.cjs

@@ -0,0 +1,133 @@
+"use strict";
+"use client";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AppSidebar = AppSidebar;
+var _intl = require("@arch-cadre/intl");
+var _logo = require("@arch-cadre/ui/brand/logo");
+var _collapsible = require("@arch-cadre/ui/components/collapsible");
+var _scrollArea = require("@arch-cadre/ui/components/scroll-area");
+var _sidebar = require("@arch-cadre/ui/components/sidebar");
+var _utils = require("@arch-cadre/ui/lib/utils");
+var _react = require("@iconify/react");
+var _lucideReact = require("lucide-react");
+var _link = _interopRequireDefault(require("next/link"));
+var _navigation = require("next/navigation");
+var _react2 = _interopRequireWildcard(require("react"));
+var React = _react2;
+var _appUser = require("./app-user.cjs");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function AppSidebar({
+  isMain,
+  data,
+  ...props
+}) {
+  const {
+    open,
+    setOpenMobile,
+    isMobile
+  } = (0, _sidebar.useSidebar)();
+  const {
+    t
+  } = (0, _intl.useTranslation)();
+  const pathname = (0, _navigation.usePathname)();
+  const [scrolled, setScrolledState] = (0, _react2.useState)(false);
+  const matchPath = path => {
+    return path === pathname;
+  };
+  const matchPaths = path => {
+    return path === pathname || path.length > 1 && pathname.startsWith(path);
+  };
+  (0, _react2.useEffect)(() => {
+    if (isMobile && open) {
+      setOpenMobile(false);
+    }
+  }, [pathname]);
+  const setScrolled = e => {
+    const scrollTop = e.currentTarget.scrollTop;
+    if (scrollTop > 20) {
+      setScrolledState(true);
+    } else {
+      setScrolledState(false);
+    }
+  };
+  return /* @__PURE__ */React.createElement(_sidebar.Sidebar, {
+    className: "lg:border-r-0!",
+    collapsible: "offcanvas",
+    ...props
+  }, /* @__PURE__ */React.createElement(_sidebar.SidebarHeader, {
+    className: "hidden md:flex h-[var(--header-height)] py-0"
+  }, /* @__PURE__ */React.createElement("div", {
+    className: "flex shrink-0 items-center px-4 h-[var(--header-height)] w-[var(--sidebar-width)] "
+  }, /* @__PURE__ */React.createElement(_link.default, {
+    href: "/kryo",
+    className: "items-center flex"
+  }, /* @__PURE__ */React.createElement(_logo.Logo, {
+    className: "h-auto w-[134px]",
+    "aria-hidden": true
+  })))), /* @__PURE__ */React.createElement(_sidebar.SidebarHeader, {
+    className: (0, _utils.cn)("px-2", scrolled ? "border-b border-border/50 shadow-[0_20px_20px_0px_rgb(246_246_246/90%)]" : "")
+  }, isMain ? null : /* @__PURE__ */React.createElement(_sidebar.SidebarMenuItem, null, /* @__PURE__ */React.createElement(_sidebar.SidebarMenuButton, {
+    asChild: true
+  }, /* @__PURE__ */React.createElement(_link.default, {
+    href: "/kryo"
+  }, /* @__PURE__ */React.createElement("span", {
+    className: "size-8 p-1 flex items-center justify-center rounded-lg bg-sidebar-accent backdrop-blur text-sidebar-accent-foreground"
+  }, /* @__PURE__ */React.createElement(_react.Icon, {
+    className: "size-4",
+    icon: "solar:arrow-left-broken"
+  })), /* @__PURE__ */React.createElement("span", null, t("Back to Dashboard")))))), /* @__PURE__ */React.createElement(_sidebar.SidebarContent, null, /* @__PURE__ */React.createElement(_scrollArea.ScrollArea, {
+    orientation: "vertical",
+    className: "h-full",
+    onScroll: e => setScrolled(e)
+  }, data.map(group => /* @__PURE__ */React.createElement(_sidebar.SidebarGroup, {
+    key: group.title,
+    className: "group-data-[collapsible=icon]:hidden py-0"
+  }, /* @__PURE__ */React.createElement(_sidebar.SidebarGroupLabel, null, t(group.title)), group.items.map(item => /* @__PURE__ */React.createElement(_sidebar.SidebarMenu, {
+    key: item.url
+  }, item.items && item.items.length > 0 ? /* @__PURE__ */React.createElement(_collapsible.Collapsible, {
+    key: item.url,
+    asChild: true,
+    defaultOpen: matchPaths(item.url),
+    className: "group/collapsible"
+  }, /* @__PURE__ */React.createElement(_sidebar.SidebarMenuItem, null, /* @__PURE__ */React.createElement(_collapsible.CollapsibleTrigger, {
+    asChild: true
+  }, /* @__PURE__ */React.createElement(_sidebar.SidebarMenuButton, {
+    className: "squircle",
+    isActive: matchPaths(item.url),
+    tooltip: t(item.title)
+  }, /* @__PURE__ */React.createElement("span", {
+    className: "size-8 p-1 flex items-center justify-center rounded-lg bg-sidebar-accent backdrop-blur text-sidebar-accent-foreground"
+  }, item.icon && /* @__PURE__ */React.createElement(_react.Icon, {
+    className: "size-4",
+    icon: item.icon
+  })), /* @__PURE__ */React.createElement("span", null, t(item.title)), /* @__PURE__ */React.createElement(_lucideReact.ChevronRight, {
+    className: "ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90"
+  }))), /* @__PURE__ */React.createElement(_collapsible.CollapsibleContent, null, /* @__PURE__ */React.createElement(_sidebar.SidebarMenuSub, null, item.items?.map(subItem => /* @__PURE__ */React.createElement(_sidebar.SidebarMenuSubItem, {
+    key: subItem.url
+  }, /* @__PURE__ */React.createElement(_sidebar.SidebarMenuSubButton, {
+    isActive: matchPath(subItem.url),
+    asChild: true
+  }, /* @__PURE__ */React.createElement(_link.default, {
+    href: subItem.url
+  }, /* @__PURE__ */React.createElement("span", null, t(subItem.title)))))))))) : /* @__PURE__ */React.createElement(_sidebar.SidebarMenuItem, {
+    key: item.url
+  }, /* @__PURE__ */React.createElement(_sidebar.SidebarMenuButton, {
+    className: "squircle",
+    asChild: true,
+    isActive: matchPath(item.url)
+  }, /* @__PURE__ */React.createElement(_link.default, {
+    href: item.url
+  }, /* @__PURE__ */React.createElement("span", {
+    className: "size-8 p-1 flex items-center justify-center rounded-lg bg-sidebar-accent backdrop-blur text-sidebar-accent-foreground"
+  }, item.icon && /* @__PURE__ */React.createElement(_react.Icon, {
+    className: "size-4",
+    icon: item.icon
+  })), /* @__PURE__ */React.createElement("span", null, t(item.title))))))))))), /* @__PURE__ */React.createElement(_sidebar.SidebarFooter, {
+    className: (0, _utils.cn)("px-2", scrolled ? "border-t border-border/50 shadow-[0_-20px_20px_0px_rgb(246_246_246/90%)]" : "")
+  }, /* @__PURE__ */React.createElement(_appUser.AppUser, null)));
+}

package/dist/ui/components/app-sidebar.d.ts

@@ -0,0 +1,17 @@
+import { Sidebar } from "@arch-cadre/ui/components/sidebar";
+import * as React from "react";
+export type SidebarItem = {
+    id?: string;
+    title: string;
+    url: string;
+    icon?: string;
+    items?: SidebarItem[];
+};
+export type SidebarGroupType = {
+    title: string;
+    items: SidebarItem[];
+};
+export declare function AppSidebar({ isMain, data, ...props }: React.ComponentProps<typeof Sidebar> & {
+    isMain: boolean;
+    data: SidebarGroupType[];
+}): React.JSX.Element;

package/dist/ui/components/app-sidebar.mjs

@@ -0,0 +1,142 @@
+"use client";
+import { useTranslation } from "@arch-cadre/intl";
+import { Logo } from "@arch-cadre/ui/brand/logo";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger
+} from "@arch-cadre/ui/components/collapsible";
+import { ScrollArea } from "@arch-cadre/ui/components/scroll-area";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  useSidebar
+} from "@arch-cadre/ui/components/sidebar";
+import { cn } from "@arch-cadre/ui/lib/utils";
+import { Icon } from "@iconify/react";
+import { ChevronRight } from "lucide-react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import * as React from "react";
+import { useEffect, useState } from "react";
+import { AppUser } from "./app-user.mjs";
+export function AppSidebar({
+  isMain,
+  data,
+  ...props
+}) {
+  const { open, setOpenMobile, isMobile } = useSidebar();
+  const { t } = useTranslation();
+  const pathname = usePathname();
+  const [scrolled, setScrolledState] = useState(false);
+  const matchPath = (path) => {
+    return path === pathname;
+  };
+  const matchPaths = (path) => {
+    return path === pathname || path.length > 1 && pathname.startsWith(path);
+  };
+  useEffect(() => {
+    if (isMobile && open) {
+      setOpenMobile(false);
+    }
+  }, [pathname]);
+  const setScrolled = (e) => {
+    const scrollTop = e.currentTarget.scrollTop;
+    if (scrollTop > 20) {
+      setScrolledState(true);
+    } else {
+      setScrolledState(false);
+    }
+  };
+  return /* @__PURE__ */ React.createElement(Sidebar, { className: "lg:border-r-0!", collapsible: "offcanvas", ...props }, /* @__PURE__ */ React.createElement(SidebarHeader, { className: "hidden md:flex h-[var(--header-height)] py-0" }, /* @__PURE__ */ React.createElement("div", { className: "flex shrink-0 items-center px-4 h-[var(--header-height)] w-[var(--sidebar-width)] " }, /* @__PURE__ */ React.createElement(Link, { href: "/kryo", className: "items-center flex" }, /* @__PURE__ */ React.createElement(Logo, { className: "h-auto w-[134px]", "aria-hidden": true })))), /* @__PURE__ */ React.createElement(
+    SidebarHeader,
+    {
+      className: cn(
+        "px-2",
+        scrolled ? "border-b border-border/50 shadow-[0_20px_20px_0px_rgb(246_246_246/90%)]" : ""
+      )
+    },
+    isMain ? null : /* @__PURE__ */ React.createElement(SidebarMenuItem, null, /* @__PURE__ */ React.createElement(SidebarMenuButton, { asChild: true }, /* @__PURE__ */ React.createElement(Link, { href: "/kryo" }, /* @__PURE__ */ React.createElement("span", { className: "size-8 p-1 flex items-center justify-center rounded-lg bg-sidebar-accent backdrop-blur text-sidebar-accent-foreground" }, /* @__PURE__ */ React.createElement(Icon, { className: "size-4", icon: "solar:arrow-left-broken" })), /* @__PURE__ */ React.createElement("span", null, t("Back to Dashboard")))))
+  ), /* @__PURE__ */ React.createElement(SidebarContent, null, /* @__PURE__ */ React.createElement(
+    ScrollArea,
+    {
+      orientation: "vertical",
+      className: "h-full",
+      onScroll: (e) => setScrolled(e)
+    },
+    data.map((group) => /* @__PURE__ */ React.createElement(
+      SidebarGroup,
+      {
+        key: group.title,
+        className: "group-data-[collapsible=icon]:hidden py-0"
+      },
+      /* @__PURE__ */ React.createElement(SidebarGroupLabel, null, t(group.title)),
+      group.items.map((item) => /* @__PURE__ */ React.createElement(SidebarMenu, { key: item.url }, item.items && item.items.length > 0 ? /* @__PURE__ */ React.createElement(
+        Collapsible,
+        {
+          key: item.url,
+          asChild: true,
+          defaultOpen: matchPaths(item.url),
+          className: "group/collapsible"
+        },
+        /* @__PURE__ */ React.createElement(SidebarMenuItem, null, /* @__PURE__ */ React.createElement(CollapsibleTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(
+          SidebarMenuButton,
+          {
+            className: "squircle",
+            isActive: matchPaths(item.url),
+            tooltip: t(item.title)
+          },
+          /* @__PURE__ */ React.createElement("span", { className: "size-8 p-1 flex items-center justify-center rounded-lg bg-sidebar-accent backdrop-blur text-sidebar-accent-foreground" }, item.icon && /* @__PURE__ */ React.createElement(
+            Icon,
+            {
+              className: "size-4",
+              icon: item.icon
+            }
+          )),
+          /* @__PURE__ */ React.createElement("span", null, t(item.title)),
+          /* @__PURE__ */ React.createElement(ChevronRight, { className: "ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" })
+        )), /* @__PURE__ */ React.createElement(CollapsibleContent, null, /* @__PURE__ */ React.createElement(SidebarMenuSub, null, item.items?.map((subItem) => /* @__PURE__ */ React.createElement(SidebarMenuSubItem, { key: subItem.url }, /* @__PURE__ */ React.createElement(
+          SidebarMenuSubButton,
+          {
+            isActive: matchPath(subItem.url),
+            asChild: true
+          },
+          /* @__PURE__ */ React.createElement(Link, { href: subItem.url }, /* @__PURE__ */ React.createElement("span", null, t(subItem.title)))
+        ))))))
+      ) : /* @__PURE__ */ React.createElement(SidebarMenuItem, { key: item.url }, /* @__PURE__ */ React.createElement(
+        SidebarMenuButton,
+        {
+          className: "squircle",
+          asChild: true,
+          isActive: matchPath(item.url)
+        },
+        /* @__PURE__ */ React.createElement(Link, { href: item.url }, /* @__PURE__ */ React.createElement("span", { className: "size-8 p-1 flex items-center justify-center rounded-lg bg-sidebar-accent backdrop-blur text-sidebar-accent-foreground" }, item.icon && /* @__PURE__ */ React.createElement(
+          Icon,
+          {
+            className: "size-4",
+            icon: item.icon
+          }
+        )), /* @__PURE__ */ React.createElement("span", null, t(item.title)))
+      ))))
+    ))
+  )), /* @__PURE__ */ React.createElement(
+    SidebarFooter,
+    {
+      className: cn(
+        "px-2",
+        scrolled ? "border-t border-border/50 shadow-[0_-20px_20px_0px_rgb(246_246_246/90%)]" : ""
+      )
+    },
+    /* @__PURE__ */ React.createElement(AppUser, null)
+  ));
+}

package/dist/ui/components/app-user.cjs

@@ -0,0 +1,102 @@
+"use strict";
+"use client";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AppUser = AppUser;
+var _intl = require("@arch-cadre/intl");
+var _modules = require("@arch-cadre/modules");
+var _avatar = require("@arch-cadre/ui/components/avatar");
+var _dropdownMenu = require("@arch-cadre/ui/components/dropdown-menu");
+var _sidebar = require("@arch-cadre/ui/components/sidebar");
+var _useMobile = require("@arch-cadre/ui/hooks/use-mobile");
+var _useUser = require("@arch-cadre/ui/hooks/use-user");
+var _utils = require("@arch-cadre/ui/lib/utils");
+var _react = require("@iconify/react");
+var React = _interopRequireWildcard(require("react"));
+var _sonner = require("sonner");
+var _index = require("../../actions/index.cjs");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function AppUser() {
+  const {
+    user,
+    isLoading,
+    signOut
+  } = (0, _useUser.useUser)();
+  const isMobile = (0, _useMobile.useIsMobile)();
+  const {
+    t
+  } = (0, _intl.useTranslation)();
+  if (!user) {
+    return;
+  }
+  const handleSignOut = async () => {
+    _sonner.toast.promise(async () => {
+      await (0, _index.logoutAction)();
+    }, {
+      loading: t("Please wait..."),
+      success: t("Logout successful!"),
+      error: t("error_occurred")
+    });
+  };
+  return /* @__PURE__ */React.createElement(_sidebar.SidebarMenu, null, /* @__PURE__ */React.createElement(_sidebar.SidebarMenuItem, null, /* @__PURE__ */React.createElement(_dropdownMenu.DropdownMenu, null, /* @__PURE__ */React.createElement(_dropdownMenu.DropdownMenuTrigger, {
+    asChild: true
+  }, /* @__PURE__ */React.createElement(_sidebar.SidebarMenuButton, {
+    size: "lg",
+    className: (0, _utils.cn)(isLoading && "opacity-50", "cursor-pointer data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground")
+  }, /* @__PURE__ */React.createElement(_avatar.Avatar, {
+    className: "h-8 w-8 rounded-full"
+  }, /* @__PURE__ */React.createElement(_avatar.AvatarImage, {
+    src: user.image ?? void 0,
+    alt: user.name
+  }), /* @__PURE__ */React.createElement(_avatar.AvatarFallback, {
+    className: "rounded-full"
+  }, user.name.charAt(0).toUpperCase())), /* @__PURE__ */React.createElement("div", {
+    className: "grid flex-1 text-left text-sm leading-tight"
+  }, /* @__PURE__ */React.createElement("span", {
+    className: "truncate font-medium"
+  }, user.name), /* @__PURE__ */React.createElement("span", {
+    className: "truncate text-xs"
+  }, user.email)), /* @__PURE__ */React.createElement(_react.Icon, {
+    icon: "solar:menu-dots-broken",
+    "aria-hidden": "true",
+    className: "mr-1 size-4 rotate-90"
+  }))), /* @__PURE__ */React.createElement(_dropdownMenu.DropdownMenuContent, {
+    className: "w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg",
+    side: isMobile ? "bottom" : "top",
+    align: "end",
+    sideOffset: 4
+  }, /* @__PURE__ */React.createElement(_dropdownMenu.DropdownMenuLabel, {
+    className: "p-0 font-normal"
+  }, /* @__PURE__ */React.createElement("div", {
+    className: "flex items-center gap-2 px-1 py-1.5 text-left text-sm"
+  }, /* @__PURE__ */React.createElement(_avatar.Avatar, {
+    className: "h-8 w-8 rounded-full"
+  }, /* @__PURE__ */React.createElement(_avatar.AvatarImage, {
+    src: user.image ?? void 0,
+    alt: user.name
+  }), /* @__PURE__ */React.createElement(_avatar.AvatarFallback, {
+    className: "rounded-full"
+  }, user.name.charAt(0).toUpperCase())), /* @__PURE__ */React.createElement("div", {
+    className: "grid flex-1 text-left text-sm leading-tight"
+  }, /* @__PURE__ */React.createElement("span", {
+    className: "truncate font-medium"
+  }, user.name), /* @__PURE__ */React.createElement("span", {
+    className: "truncate text-xs"
+  }, user.email)))), /* @__PURE__ */React.createElement(_modules.ExtensionPointClient, {
+    module: "panel",
+    point: "app-user:extra-link"
+  }), /* @__PURE__ */React.createElement(_dropdownMenu.DropdownMenuSeparator, null), /* @__PURE__ */React.createElement("button", {
+    type: "button",
+    onClick: () => {
+      handleSignOut();
+    },
+    className: "w-full"
+  }, /* @__PURE__ */React.createElement(_dropdownMenu.DropdownMenuItem, {
+    className: "cursor-pointer "
+  }, /* @__PURE__ */React.createElement(_react.Icon, {
+    icon: "solar:logout-broken"
+  }), t("Logout")))))));
+}

package/dist/ui/components/app-user.d.ts

@@ -0,0 +1,2 @@
+import * as React from "react";
+export declare function AppUser(): React.JSX.Element | undefined;

package/dist/ui/components/app-user.mjs

@@ -0,0 +1,92 @@
+"use client";
+import { useTranslation } from "@arch-cadre/intl";
+import {
+  ExtensionPointClient
+} from "@arch-cadre/modules";
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage
+} from "@arch-cadre/ui/components/avatar";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from "@arch-cadre/ui/components/dropdown-menu";
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem
+} from "@arch-cadre/ui/components/sidebar";
+import { useIsMobile } from "@arch-cadre/ui/hooks/use-mobile";
+import { useUser } from "@arch-cadre/ui/hooks/use-user";
+import { cn } from "@arch-cadre/ui/lib/utils";
+import { Icon } from "@iconify/react";
+import * as React from "react";
+import { toast } from "sonner";
+import { logoutAction } from "../../actions/index.mjs";
+export function AppUser() {
+  const { user, isLoading, signOut } = useUser();
+  const isMobile = useIsMobile();
+  const { t } = useTranslation();
+  if (!user) {
+    return;
+  }
+  const handleSignOut = async () => {
+    toast.promise(
+      async () => {
+        await logoutAction();
+      },
+      {
+        loading: t("Please wait..."),
+        success: t("Logout successful!"),
+        error: t("error_occurred")
+      }
+    );
+  };
+  return /* @__PURE__ */ React.createElement(SidebarMenu, null, /* @__PURE__ */ React.createElement(SidebarMenuItem, null, /* @__PURE__ */ React.createElement(DropdownMenu, null, /* @__PURE__ */ React.createElement(DropdownMenuTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(
+    SidebarMenuButton,
+    {
+      size: "lg",
+      className: cn(
+        isLoading && "opacity-50",
+        "cursor-pointer data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+      )
+    },
+    /* @__PURE__ */ React.createElement(Avatar, { className: "h-8 w-8 rounded-full" }, /* @__PURE__ */ React.createElement(AvatarImage, { src: user.image ?? void 0, alt: user.name }), /* @__PURE__ */ React.createElement(AvatarFallback, { className: "rounded-full" }, user.name.charAt(0).toUpperCase())),
+    /* @__PURE__ */ React.createElement("div", { className: "grid flex-1 text-left text-sm leading-tight" }, /* @__PURE__ */ React.createElement("span", { className: "truncate font-medium" }, user.name), /* @__PURE__ */ React.createElement("span", { className: "truncate text-xs" }, user.email)),
+    /* @__PURE__ */ React.createElement(
+      Icon,
+      {
+        icon: "solar:menu-dots-broken",
+        "aria-hidden": "true",
+        className: "mr-1 size-4 rotate-90"
+      }
+    )
+  )), /* @__PURE__ */ React.createElement(
+    DropdownMenuContent,
+    {
+      className: "w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg",
+      side: isMobile ? "bottom" : "top",
+      align: "end",
+      sideOffset: 4
+    },
+    /* @__PURE__ */ React.createElement(DropdownMenuLabel, { className: "p-0 font-normal" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 px-1 py-1.5 text-left text-sm" }, /* @__PURE__ */ React.createElement(Avatar, { className: "h-8 w-8 rounded-full" }, /* @__PURE__ */ React.createElement(AvatarImage, { src: user.image ?? void 0, alt: user.name }), /* @__PURE__ */ React.createElement(AvatarFallback, { className: "rounded-full" }, user.name.charAt(0).toUpperCase())), /* @__PURE__ */ React.createElement("div", { className: "grid flex-1 text-left text-sm leading-tight" }, /* @__PURE__ */ React.createElement("span", { className: "truncate font-medium" }, user.name), /* @__PURE__ */ React.createElement("span", { className: "truncate text-xs" }, user.email)))),
+    /* @__PURE__ */ React.createElement(ExtensionPointClient, { module: "panel", point: "app-user:extra-link" }),
+    /* @__PURE__ */ React.createElement(DropdownMenuSeparator, null),
+    /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        type: "button",
+        onClick: () => {
+          handleSignOut();
+        },
+        className: "w-full"
+      },
+      /* @__PURE__ */ React.createElement(DropdownMenuItem, { className: "cursor-pointer " }, /* @__PURE__ */ React.createElement(Icon, { icon: "solar:logout-broken" }), t("Logout"))
+    )
+  ))));
+}