@pelatform/starter.shared 0.2.15 → 0.2.16

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { ReactNode, CSSProperties, ComponentProps, PropsWithChildren, ComponentType } from 'react';
+import { ReactNode, ComponentProps, CSSProperties, PropsWithChildren, ComponentType } from 'react';
 import { MenuItem } from 'pelatform-ui';
 import { NavItem, LanguageSwitcherProps } from 'pelatform-ui/components';
 export { Logo as LogoDefault } from 'pelatform-ui/components';
@@ -35,6 +35,14 @@ declare function LayoutLoader({ children }: {
     children: ReactNode;
 }): string | number | bigint | boolean | react_jsx_runtime.JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null | undefined;
 
+declare function UserMenu({ homeUrl, hiddenSwitcher, side, align, sideOffset, }: {
+    homeUrl?: string;
+    hiddenSwitcher?: boolean;
+    side?: "bottom" | "top" | "right" | "left";
+    align?: "center" | "end" | "start";
+    sideOffset?: number;
+}): react_jsx_runtime.JSX.Element;
+
 declare function Sidebar({ children }: {
     children: ReactNode;
 }): react_jsx_runtime.JSX.Element | null;
@@ -50,6 +58,10 @@ declare function SidebarContentMenu({ menu, type, }: {
     menu: MenuItem[];
     type?: "default" | "toggle";
 }): react_jsx_runtime.JSX.Element;
+declare function SidebarFooter({ children, className, side, align, sideOffset, ...props }: ComponentProps<typeof UserMenu> & {
+    children?: ReactNode;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
 
 declare function SiteFooter({ disableProjectBy }: {
     disableProjectBy?: boolean;
@@ -77,11 +89,13 @@ interface LayoutWrapperProps {
     children: ReactNode;
     sidebarHeader: ReactNode;
     sidebarMenu: ReactNode;
+    sidebarFooter?: ReactNode;
     logoHeader?: ReactNode;
+    version?: "v1" | "v2";
     homeUrl?: string;
     studioUrl?: string;
 }
-declare function LayoutWrapper({ children, sidebarHeader, sidebarMenu, logoHeader, homeUrl, studioUrl, }: LayoutWrapperProps): react_jsx_runtime.JSX.Element;
+declare function LayoutWrapper({ children, logoHeader, version, ...props }: LayoutWrapperProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Props for the ConfigProvider component
@@ -135,8 +149,9 @@ interface LayoutProviderProps {
     bodyClassName?: string;
     className?: string;
     logoHeader?: ReactNode;
+    version?: "v1" | "v2";
 }
-declare function LayoutProvider({ children, style: customStyle, bodyClassName, className, logoHeader, }: LayoutProviderProps): react_jsx_runtime.JSX.Element;
+declare function LayoutProvider({ children, style: customStyle, bodyClassName, className, logoHeader, version, }: LayoutProviderProps): react_jsx_runtime.JSX.Element;
 
 interface SharedProvidersProps {
     children: ReactNode;
@@ -278,11 +293,6 @@ declare function SignedInHint({ linkHref }: {
     linkHref?: string;
 }): react_jsx_runtime.JSX.Element;
 
-declare function UserMenu({ homeUrl, hiddenSwitcher, }: {
-    homeUrl?: string;
-    hiddenSwitcher?: boolean;
-}): react_jsx_runtime.JSX.Element;
-
 type ViewClassNames = {
     base?: string;
     content?: string;
@@ -406,4 +416,4 @@ type Provider = {
     icon?: ProviderIcon;
 };
 
-export { ApiKeyView, AuthLayout, type AvatarClassNames, type AvatarProps, CardActionComponent, type CardClassNames, CardComponent, type CardComponentProps, CardFooterComponent, CardHeaderComponent, ConfigProvider, type ConfigProviderProps, type DialogClassNames, DialogComponent, type DialogComponentProps, DialogFooterComponent, DisplayIdCard, EmptyState, type EmptyStateProps, Header, HeaderLeft, HeaderRight, HeaderSidebarMobile, LanguageSwitcher, LayoutLoader, LayoutProvider, type LayoutProviderProps, LayoutWrapper, LogoWithHref, LogoWithName, OTPInputGroup, PasswordInput, type Provider, type ProviderIcon, SharedProviders, type SharedProvidersProps, Sidebar, SidebarContent, SidebarContentMenu, SidebarHeaderBack, SignedInHint, SiteFooter, SiteHeader, SiteHeaderSecondary, SkeletonInputComponent, SkeletonViewComponent, Toolbar, UserAvatar, UserMenu, UserView, type ViewClassNames, type ViewProps, WorkspaceLogo, WorkspaceView, socialProviders };
+export { ApiKeyView, AuthLayout, type AvatarClassNames, type AvatarProps, CardActionComponent, type CardClassNames, CardComponent, type CardComponentProps, CardFooterComponent, CardHeaderComponent, ConfigProvider, type ConfigProviderProps, type DialogClassNames, DialogComponent, type DialogComponentProps, DialogFooterComponent, DisplayIdCard, EmptyState, type EmptyStateProps, Header, HeaderLeft, HeaderRight, HeaderSidebarMobile, LanguageSwitcher, LayoutLoader, LayoutProvider, type LayoutProviderProps, LayoutWrapper, LogoWithHref, LogoWithName, OTPInputGroup, PasswordInput, type Provider, type ProviderIcon, SharedProviders, type SharedProvidersProps, Sidebar, SidebarContent, SidebarContentMenu, SidebarFooter, SidebarHeaderBack, SignedInHint, SiteFooter, SiteHeader, SiteHeaderSecondary, SkeletonInputComponent, SkeletonViewComponent, Toolbar, UserAvatar, UserMenu, UserView, type ViewClassNames, type ViewProps, WorkspaceLogo, WorkspaceView, socialProviders };

package/dist/index.js

@@ -512,7 +512,10 @@ function WorkspaceView({ className, classNames, isPending, size, workspace }) {
 import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 function UserMenu({
   homeUrl,
-  hiddenSwitcher = false
+  hiddenSwitcher = false,
+  side = "bottom",
+  align = "end",
+  sideOffset = 11
 }) {
   const { auth, features, path } = useConfig4();
   const router = useRouter2();
@@ -553,7 +556,7 @@ function UserMenu({
   const userRole = user?.role || "user";
   return /* @__PURE__ */ jsxs7(DropdownMenu, { children: [
     /* @__PURE__ */ jsx9(DropdownMenuTrigger, { className: "focus:outline-none focus:ring-0", children: isPending ? /* @__PURE__ */ jsx9(Skeleton3, { className: "size-8 shrink-0 rounded-full" }) : /* @__PURE__ */ jsx9(UserAvatar2, { className: "size-8", indicator: true, src: userAvatar, alt: userName }) }),
-    /* @__PURE__ */ jsxs7(DropdownMenuContent, { className: "w-56", side: "bottom", align: "end", sideOffset: 11, children: [
+    /* @__PURE__ */ jsxs7(DropdownMenuContent, { className: "w-56", side, align, sideOffset, children: [
       /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-3 px-3 py-2", children: [
         /* @__PURE__ */ jsx9(UserAvatar2, { src: userAvatar, alt: userName }),
         /* @__PURE__ */ jsxs7("div", { className: "flex min-w-0 flex-1 flex-col items-start", children: [
@@ -628,6 +631,10 @@ function UserMenu({
 // src/components/layouts/header.tsx
 import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
 function Header({ children }) {
+  const { version } = useLayout();
+  if (version === "v2") {
+    return /* @__PURE__ */ jsx10("header", { className: "fixed start-0 end-0 top-0 z-50 flex h-(--header-height-mobile) shrink-0 items-center bg-background/95 pe-[var(--removed-body-scroll-bar-size,0px)] backdrop-blur-sm transition-[start,end] duration-300 supports-backdrop-filter:bg-muted", children: /* @__PURE__ */ jsx10("div", { className: "@container flex grow items-stretch justify-between gap-2.5 pe-5", children }) });
+  }
   return /* @__PURE__ */ jsx10("header", { className: "fixed start-0 end-0 top-0 z-10 flex h-(--header-height-mobile) shrink-0 items-stretch border-border border-b bg-background/95 pe-(--removed-body-scroll-bar-size,0px) backdrop-blur-sm supports-backdrop-filter:bg-background/60 lg:h-(--header-height)", children: /* @__PURE__ */ jsx10("div", { className: "@container flex grow items-stretch justify-between gap-2.5 pe-5", children }) });
 }
 function HeaderLeft() {
@@ -682,6 +689,7 @@ import Link5 from "next/link";
 import { usePathname as usePathname3 } from "next/navigation";
 import { useLocale as useLocale3, useTranslations as useTranslations8 } from "next-intl";
 import { useLayout as useLayout2 } from "@pelatform/starter.hook";
+import { cn as cn5 } from "pelatform-ui";
 import { BackLink } from "pelatform-ui/components";
 import {
   AccordionMenu,
@@ -697,10 +705,16 @@ import {
 } from "pelatform-ui/default";
 import { Fragment as Fragment4, jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
 function Sidebar({ children }) {
-  const { isMobile } = useLayout2();
+  const { isMobile, logoHeader, version } = useLayout2();
   if (isMobile) {
     return null;
   }
+  if (version === "v2") {
+    return /* @__PURE__ */ jsx11("aside", { className: "fixed start-2.5 top-2.5 bottom-2.5 z-20 flex in-data-[sidebar-open=false]:w-(--sidebar-width-collapsed) w-(--sidebar-width) shrink-0 items-stretch overflow-hidden rounded-xl border border-input bg-background transition-all duration-300", children: /* @__PURE__ */ jsxs9("div", { className: "w-(--sidebar-width) shrink-0 grow transition-all duration-300", children: [
+      /* @__PURE__ */ jsx11("div", { className: "flex h-14 shrink-0 items-center justify-center px-2.5 lg:h-15", children: logoHeader }),
+      children
+    ] }) });
+  }
   return /* @__PURE__ */ jsxs9("aside", { className: "fixed in-data-[sidebar-open=false]:-start-full start-0 top-(--header-height) bottom-0 flex w-(--sidebar-width) shrink-0 flex-col items-stretch border-border border-e transition-all duration-300", children: [
     children,
     /* @__PURE__ */ jsx11("div", {})
@@ -715,7 +729,19 @@ function SidebarHeaderBack({
   return /* @__PURE__ */ jsx11("div", { className: "flex h-14 shrink-0 items-center gap-2 border-border border-b px-2.5 lg:h-15", children: /* @__PURE__ */ jsx11(BackLink, { Link: Link5, href: linkHref, children: text ?? (admin ? t("common.actions.back") : t("ui.navigation.settings")) }) });
 }
 function SidebarContent({ children }) {
-  return /* @__PURE__ */ jsx11(ScrollArea, { className: "mt-2 mb-2.5 h-[calc(100vh-5.5rem)] grow lg:mt-4 lg:mb-7.5 lg:h-[calc(100vh-4rem)]", children });
+  const { isMobile, version } = useLayout2();
+  if (version === "v2") {
+    return /* @__PURE__ */ jsx11(
+      ScrollArea,
+      {
+        className: cn5(
+          isMobile ? "my-2 h-[calc(100vh-5.5rem)] grow" : "my-2 h-[calc(100vh-1rem)] w-full shrink-0 lg:my-4 lg:h-[calc(100vh-14.7rem)]"
+        ),
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx11(ScrollArea, { className: "my-2 h-[calc(100vh-5.5rem)] grow lg:my-4 lg:h-[calc(100vh-4rem)]", children });
 }
 function SidebarContentMenu({
   menu,
@@ -860,19 +886,41 @@ function SidebarContentMenu({
     }
   );
 }
+function SidebarFooter({
+  children,
+  className,
+  side = "top",
+  align = "start",
+  sideOffset = 10,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs9(
+    "div",
+    {
+      className: cn5(
+        "flex h-14 shrink-0 items-center gap-2 border-border border-t px-2.5 lg:h-15",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx11(UserMenu, { side, align, sideOffset, ...props }),
+        children
+      ]
+    }
+  );
+}
 
 // src/components/layouts/site-footer.tsx
 import Link6 from "next/link";
 import { useTranslations as useTranslations9 } from "next-intl";
 import { useConfig as useConfig5 } from "@pelatform/starter.hook";
-import { cn as cn5 } from "pelatform-ui";
+import { cn as cn6 } from "pelatform-ui";
 import { SiteFooter as UISiteFooter } from "pelatform-ui/components";
 import { Button as Button3 } from "pelatform-ui/default";
 import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
 function SiteFooter({ disableProjectBy = false }) {
   const { app } = useConfig5();
   const t = useTranslations9();
-  return /* @__PURE__ */ jsxs10(UISiteFooter, { className: cn5("*:gap-2! *:py-0!", disableProjectBy ? "*:justify-center!" : ""), children: [
+  return /* @__PURE__ */ jsxs10(UISiteFooter, { className: cn6("*:gap-2! *:py-0!", disableProjectBy ? "*:justify-center!" : ""), children: [
     /* @__PURE__ */ jsxs10("div", { className: "text-balance text-center text-muted-foreground text-sm leading-loose md:text-left", children: [
       "\xA9 ",
       (/* @__PURE__ */ new Date()).getFullYear(),
@@ -1003,51 +1051,73 @@ function SiteHeaderSecondary({
 }
 
 // src/components/layouts/wrapper.tsx
+import { useEffect as useEffect4, useState as useState5 } from "react";
 import Link8 from "next/link";
 import { RocketIcon } from "lucide-react";
-import { useSession as useSession5 } from "@pelatform/starter.hook";
+import { useLayout as useLayout3, useSession as useSession5 } from "@pelatform/starter.hook";
+import { cn as cn8 } from "pelatform-ui";
 import { Button as Button5 } from "pelatform-ui/default";
 
 // src/components/providers/layout.tsx
-import { useEffect as useEffect3, useState as useState4 } from "react";
+import { useEffect as useEffect3, useMemo as useMemo2, useState as useState4 } from "react";
 import { LayoutContext } from "@pelatform/starter.hook";
-import { cn as cn6 } from "pelatform-ui";
+import { cn as cn7 } from "pelatform-ui";
+import { TooltipProvider } from "pelatform-ui/default";
 import { useIsMobile } from "pelatform-ui/hooks";
 import { jsx as jsx14 } from "react/jsx-runtime";
 var SIDEBAR_WIDTH = "240px";
 var HEADER_HEIGHT = "54px";
 var SIDEBAR_WIDTH_MOBILE = "240px";
 var HEADER_HEIGHT_MOBILE = "54px";
+var SIDEBAR_WIDTH_V2 = "255px";
+var HEADER_HEIGHT_V2 = "60px";
+var SIDEBAR_WIDTH_MOBILE_V2 = "60px";
+var HEADER_HEIGHT_MOBILE_V2 = "60px";
 function LayoutProvider({
   children,
   style: customStyle,
   bodyClassName = "",
   className = "",
-  logoHeader = /* @__PURE__ */ jsx14(LogoWithHref, {})
+  logoHeader = /* @__PURE__ */ jsx14(LogoWithHref, {}),
+  version = "v1"
 }) {
   const isMobile = useIsMobile();
   const [isSidebarOpen, setIsSidebarOpen] = useState4(true);
-  const defaultStyle = {
-    "--sidebar-width": SIDEBAR_WIDTH,
-    "--header-height": HEADER_HEIGHT,
-    "--sidebar-width-mobile": SIDEBAR_WIDTH_MOBILE,
-    "--header-height-mobile": HEADER_HEIGHT_MOBILE
-  };
-  const style = {
-    ...defaultStyle,
-    ...customStyle
-  };
+  const cssVariables = useMemo2(
+    () => ({
+      "--sidebar-width": version === "v1" ? SIDEBAR_WIDTH : SIDEBAR_WIDTH_V2,
+      "--header-height": version === "v1" ? HEADER_HEIGHT : HEADER_HEIGHT_V2,
+      "--sidebar-width-mobile": version === "v1" ? SIDEBAR_WIDTH_MOBILE : SIDEBAR_WIDTH_MOBILE_V2,
+      "--header-height-mobile": version === "v1" ? HEADER_HEIGHT_MOBILE : HEADER_HEIGHT_MOBILE_V2,
+      ...customStyle || {}
+    }),
+    [version, customStyle]
+  );
+  const style = useMemo2(
+    () => ({
+      ...cssVariables
+    }),
+    [cssVariables]
+  );
   const sidebarToggle = () => setIsSidebarOpen((open) => !open);
   useEffect3(() => {
+    const html = document.documentElement;
+    const body = document.body;
+    const originalHtmlStyle = html.style.cssText;
+    const originalBodyClasses = body.className;
+    Object.entries(cssVariables).forEach(([prop, val]) => {
+      html.style.setProperty(prop, val);
+    });
     if (bodyClassName) {
-      const body = document.body;
-      const existingClasses = body.className;
-      body.className = `${existingClasses} ${bodyClassName}`.trim();
-      return () => {
-        body.className = existingClasses;
-      };
+      body.className = `${originalBodyClasses} ${bodyClassName}`.trim();
     }
-  }, [bodyClassName]);
+    body.setAttribute("data-sidebar-open", isSidebarOpen.toString());
+    return () => {
+      html.style.cssText = originalHtmlStyle;
+      body.className = originalBodyClasses;
+      body.removeAttribute("data-sidebar-open");
+    };
+  }, [cssVariables, bodyClassName, isSidebarOpen]);
   return /* @__PURE__ */ jsx14(
     LayoutContext.Provider,
     {
@@ -1057,16 +1127,17 @@ function LayoutProvider({
         isMobile,
         isSidebarOpen,
         sidebarToggle,
-        logoHeader
+        logoHeader,
+        version
       },
       children: /* @__PURE__ */ jsx14(
         "div",
         {
           "data-slot": "layout-wrapper",
-          className: cn6("flex grow", className),
+          className: cn7("flex grow", className),
           "data-sidebar-open": isSidebarOpen,
           style,
-          children
+          children: /* @__PURE__ */ jsx14(TooltipProvider, { delayDuration: 0, children })
         }
       )
     }
@@ -1076,10 +1147,26 @@ function LayoutProvider({
 // src/components/layouts/wrapper.tsx
 import { Fragment as Fragment6, jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
 function LayoutWrapper({
+  children,
+  logoHeader,
+  version = "v1",
+  ...props
+}) {
+  const isVersionV1 = version === "v1";
+  return /* @__PURE__ */ jsx15(
+    LayoutProvider,
+    {
+      logoHeader,
+      version,
+      bodyClassName: isVersionV1 ? "" : "bg-muted!",
+      children: isVersionV1 ? /* @__PURE__ */ jsx15(ContentWrapper, { ...props, children }) : /* @__PURE__ */ jsx15(ContentWrapperV2, { ...props, children })
+    }
+  );
+}
+function ContentWrapper({
   children,
   sidebarHeader,
   sidebarMenu,
-  logoHeader,
   homeUrl,
   studioUrl
 }) {
@@ -1092,7 +1179,7 @@ function LayoutWrapper({
     /* @__PURE__ */ jsx15(RocketIcon, {}),
     " Studio"
   ] }) });
-  return /* @__PURE__ */ jsxs12(LayoutProvider, { logoHeader, children: [
+  return /* @__PURE__ */ jsxs12(Fragment6, { children: [
     /* @__PURE__ */ jsxs12(Header, { children: [
       /* @__PURE__ */ jsx15(HeaderLeft, {}),
       /* @__PURE__ */ jsx15(
@@ -1110,9 +1197,60 @@ function LayoutWrapper({
     ] })
   ] });
 }
+function ContentWrapperV2({
+  children,
+  sidebarHeader,
+  sidebarMenu,
+  sidebarFooter,
+  homeUrl,
+  studioUrl
+}) {
+  const { isMobile } = useLayout3();
+  const { user } = useSession5();
+  const [enableTransitions, setEnableTransitions] = useState5(false);
+  useEffect4(() => {
+    const id = requestAnimationFrame(() => setEnableTransitions(true));
+    return () => cancelAnimationFrame(id);
+  }, []);
+  const sidebarContent = /* @__PURE__ */ jsxs12(Fragment6, { children: [
+    sidebarHeader,
+    /* @__PURE__ */ jsx15(SidebarContent, { children: sidebarMenu }),
+    !isMobile && sidebarFooter
+  ] });
+  const studioButton = /* @__PURE__ */ jsx15(Button5, { variant: "mono", size: "sm", className: "rounded-full", asChild: true, children: /* @__PURE__ */ jsxs12(Link8, { href: studioUrl || "#", target: "_blank", children: [
+    /* @__PURE__ */ jsx15(RocketIcon, {}),
+    " Studio"
+  ] }) });
+  return /* @__PURE__ */ jsxs12("div", { className: "flex h-screen w-full [&_.container-fluid]:px-5", children: [
+    /* @__PURE__ */ jsx15(Sidebar, { children: sidebarContent }),
+    /* @__PURE__ */ jsxs12("div", { className: "flex w-full min-w-0 flex-1 flex-col pt-(--header-height-mobile) lg:pt-0", children: [
+      isMobile && /* @__PURE__ */ jsxs12(Header, { children: [
+        /* @__PURE__ */ jsx15(HeaderLeft, {}),
+        /* @__PURE__ */ jsx15(
+          HeaderRight,
+          {
+            sidebar: /* @__PURE__ */ jsx15(HeaderSidebarMobile, { children: sidebarContent }),
+            button: studioUrl && user?.role === "admin" ? studioButton : null,
+            homeUrl
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx15("div", { className: "mx-5 flex grow py-2.5 lg:mx-2.5", children: /* @__PURE__ */ jsx15(
+        "div",
+        {
+          className: cn8(
+            "grow overflow-y-auto rounded-xl border border-input bg-background shadow-xs duration-300 lg:in-data-[sidebar-open=true]:ms-[calc(var(--sidebar-width)+0.6rem)] lg:ms-[calc(var(--sidebar-width-collapsed)+0.6rem)]",
+            enableTransitions ? "transition-all duration-300" : "transition-none"
+          ),
+          children: /* @__PURE__ */ jsx15("main", { className: "grow", children })
+        }
+      ) })
+    ] })
+  ] });
+}
 
 // src/components/providers/config.tsx
-import { useMemo as useMemo2 } from "react";
+import { useMemo as useMemo3 } from "react";
 import { defaultConfig, mergeConfig } from "@pelatform/starter.config";
 import {
   ConfigContext,
@@ -1128,7 +1266,7 @@ function ConfigProvider({
   workspaceLogo: workspaceLogoProp,
   ...props
 }) {
-  const mergedConfig = useMemo2(() => {
+  const mergedConfig = useMemo3(() => {
     return mergeConfig(defaultConfig, configProp);
   }, [configProp]);
   const config = mergedConfig;
@@ -1137,7 +1275,7 @@ function ConfigProvider({
     extension: "png",
     size: 128
   };
-  const userAvatar = useMemo2(() => {
+  const userAvatar = useMemo3(() => {
     if (!userAvatarProp) {
       return {
         extension: DEFAULT_IMAGE_OPTIONS.extension,
@@ -1151,7 +1289,7 @@ function ConfigProvider({
       size: userAvatarProp.size || (userAvatarProp.upload ? 256 : DEFAULT_IMAGE_OPTIONS.size)
     };
   }, [userAvatarProp]);
-  const workspaceLogo = useMemo2(() => {
+  const workspaceLogo = useMemo3(() => {
     if (!workspaceLogoProp) {
       return {
         extension: DEFAULT_IMAGE_OPTIONS.extension,
@@ -1214,7 +1352,7 @@ function SharedProviders({
 }
 
 // src/components/utils/card.tsx
-import { cn as cn7 } from "pelatform-ui";
+import { cn as cn9 } from "pelatform-ui";
 import { Button as Button6, Card, CardContent, CardFooter, Skeleton as Skeleton4, Spinner } from "pelatform-ui/default";
 import { Fragment as Fragment7, jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
 function CardComponent({
@@ -1235,7 +1373,7 @@ function CardComponent({
   return /* @__PURE__ */ jsxs14(
     Card,
     {
-      className: cn7(
+      className: cn9(
         "w-full overflow-hidden",
         isDestructive && "border-destructive/70",
         className,
@@ -1243,7 +1381,7 @@ function CardComponent({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsxs14(CardContent, { className: cn7("space-y-6 p-5 sm:p-10", classNames?.content), children: [
+        /* @__PURE__ */ jsxs14(CardContent, { className: cn9("space-y-6 p-5 sm:p-10", classNames?.content), children: [
           /* @__PURE__ */ jsx18(
             CardHeaderComponent,
             {
@@ -1279,12 +1417,12 @@ function CardHeaderComponent({
   description,
   isPending
 }) {
-  return /* @__PURE__ */ jsx18("div", { className: cn7("flex flex-col space-y-2", className, classNames?.header), children: isPending ? /* @__PURE__ */ jsxs14(Fragment7, { children: [
-    /* @__PURE__ */ jsx18(Skeleton4, { className: cn7("h-7 w-1/3", classNames?.skeleton) }),
-    description && /* @__PURE__ */ jsx18(Skeleton4, { className: cn7("h-5 w-2/3", classNames?.skeleton) })
+  return /* @__PURE__ */ jsx18("div", { className: cn9("flex flex-col space-y-2", className, classNames?.header), children: isPending ? /* @__PURE__ */ jsxs14(Fragment7, { children: [
+    /* @__PURE__ */ jsx18(Skeleton4, { className: cn9("h-7 w-1/3", classNames?.skeleton) }),
+    description && /* @__PURE__ */ jsx18(Skeleton4, { className: cn9("h-5 w-2/3", classNames?.skeleton) })
   ] }) : /* @__PURE__ */ jsxs14(Fragment7, { children: [
-    /* @__PURE__ */ jsx18("h2", { className: cn7("font-medium text-xl", classNames?.title), children: title }),
-    description && /* @__PURE__ */ jsx18("p", { className: cn7("text-muted-foreground text-sm", classNames?.description), children: description })
+    /* @__PURE__ */ jsx18("h2", { className: cn9("font-medium text-xl", classNames?.title), children: title }),
+    description && /* @__PURE__ */ jsx18("p", { className: cn9("text-muted-foreground text-sm", classNames?.description), children: description })
   ] }) });
 }
 function CardFooterComponent({
@@ -1301,7 +1439,7 @@ function CardFooterComponent({
   return /* @__PURE__ */ jsx18(
     CardFooter,
     {
-      className: cn7(
+      className: cn9(
         "flex items-center justify-between space-x-4 bg-muted p-3 sm:px-10",
         isDestructive && "border-destructive/70",
         className,
@@ -1311,7 +1449,7 @@ function CardFooterComponent({
         instructions && /* @__PURE__ */ jsx18(
           Skeleton4,
           {
-            className: cn7(
+            className: cn9(
               "h-4 w-48 max-w-full bg-muted-foreground/10 md:h-5 md:w-60",
               classNames?.skeleton
             )
@@ -1320,14 +1458,14 @@ function CardFooterComponent({
         actionLabel && /* @__PURE__ */ jsx18(
           Skeleton4,
           {
-            className: cn7("h-8 w-20 bg-muted-foreground/10 md:ms-auto", classNames?.skeleton)
+            className: cn9("h-8 w-20 bg-muted-foreground/10 md:ms-auto", classNames?.skeleton)
           }
         )
       ] }) : /* @__PURE__ */ jsxs14(Fragment7, { children: [
         instructions && /* @__PURE__ */ jsx18(
           "div",
           {
-            className: cn7("text-muted-foreground text-xs md:text-sm", classNames?.instructions),
+            className: cn9("text-muted-foreground text-xs md:text-sm", classNames?.instructions),
             children: instructions
           }
         ),
@@ -1361,7 +1499,7 @@ function CardActionComponent({
       type: onClick ? "button" : "submit",
       variant: isDestructive ? "destructive" : "primary",
       size: "sm",
-      className: cn7(
+      className: cn9(
         "ms-auto",
         isSubmitting || disabled ? "pointer-events-auto! cursor-not-allowed" : "",
         classNames?.button,
@@ -1380,7 +1518,7 @@ function CardActionComponent({
 
 // src/components/utils/dialog.tsx
 import { useTranslations as useTranslations11 } from "next-intl";
-import { cn as cn8 } from "pelatform-ui";
+import { cn as cn10 } from "pelatform-ui";
 import {
   Button as Button7,
   Dialog,
@@ -1408,13 +1546,13 @@ function DialogComponent({
     DialogContent,
     {
       onOpenAutoFocus: (e) => e.preventDefault(),
-      className: cn8("bg-muted sm:max-w-md", classNames?.dialog?.content),
+      className: cn10("bg-muted sm:max-w-md", classNames?.dialog?.content),
       showCloseButton,
       children: [
         /* @__PURE__ */ jsxs15(
           DialogHeader,
           {
-            className: cn8(
+            className: cn10(
               "-ms-6 -me-6 -mt-6 space-y-2 rounded-t-lg bg-background p-6",
               classNames?.header
             ),
@@ -1448,13 +1586,13 @@ function DialogFooterComponent({
   button
 }) {
   const t = useTranslations11();
-  return /* @__PURE__ */ jsxs15(DialogFooter, { className: cn8(className, classNames?.dialog?.footer), children: [
+  return /* @__PURE__ */ jsxs15(DialogFooter, { className: cn10(className, classNames?.dialog?.footer), children: [
     cancelButton && /* @__PURE__ */ jsx19(
       Button7,
       {
         type: "button",
         variant: "ghost",
-        className: cn8(classNames?.button),
+        className: cn10(classNames?.button),
         onClick: () => onOpenChange?.(false),
         disabled: cancelButtonDisabled,
         children: t("common.actions.cancel")
@@ -1465,22 +1603,22 @@ function DialogFooterComponent({
 }
 
 // src/components/utils/skeleton.tsx
-import { cn as cn9 } from "pelatform-ui";
+import { cn as cn11 } from "pelatform-ui";
 import { Card as Card2, Skeleton as Skeleton5 } from "pelatform-ui/default";
 import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
 function SkeletonViewComponent({ classNames }) {
-  return /* @__PURE__ */ jsxs16(Card2, { className: cn9("flex-row items-center gap-3 px-4 py-3", classNames?.cell), children: [
+  return /* @__PURE__ */ jsxs16(Card2, { className: cn11("flex-row items-center gap-3 px-4 py-3", classNames?.cell), children: [
     /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx20(Skeleton5, { className: cn9("size-5 rounded-full", classNames?.skeleton) }),
-      /* @__PURE__ */ jsx20("div", { children: /* @__PURE__ */ jsx20(Skeleton5, { className: cn9("h-4 w-32", classNames?.skeleton) }) })
+      /* @__PURE__ */ jsx20(Skeleton5, { className: cn11("size-5 rounded-full", classNames?.skeleton) }),
+      /* @__PURE__ */ jsx20("div", { children: /* @__PURE__ */ jsx20(Skeleton5, { className: cn11("h-4 w-32", classNames?.skeleton) }) })
     ] }),
-    /* @__PURE__ */ jsx20(Skeleton5, { className: cn9("ms-auto size-8 w-16", classNames?.skeleton) })
+    /* @__PURE__ */ jsx20(Skeleton5, { className: cn11("ms-auto size-8 w-16", classNames?.skeleton) })
   ] });
 }
 function SkeletonInputComponent({ classNames }) {
   return /* @__PURE__ */ jsxs16("div", { className: "flex flex-col gap-1.5", children: [
-    /* @__PURE__ */ jsx20(Skeleton5, { className: cn9("h-4 w-32", classNames?.skeleton) }),
-    /* @__PURE__ */ jsx20(Skeleton5, { className: cn9("h-9 w-full", classNames?.skeleton) })
+    /* @__PURE__ */ jsx20(Skeleton5, { className: cn11("h-4 w-32", classNames?.skeleton) }),
+    /* @__PURE__ */ jsx20(Skeleton5, { className: cn11("h-9 w-full", classNames?.skeleton) })
   ] });
 }
 
@@ -1488,14 +1626,14 @@ function SkeletonInputComponent({ classNames }) {
 import { useRef } from "react";
 import { CheckIcon, CopyIcon } from "lucide-react";
 import { useTranslations as useTranslations12 } from "next-intl";
-import { cn as cn10 } from "pelatform-ui";
+import { cn as cn12 } from "pelatform-ui";
 import {
   Button as Button8,
   Input,
   Skeleton as Skeleton6,
   Tooltip,
   TooltipContent,
-  TooltipProvider,
+  TooltipProvider as TooltipProvider2,
   TooltipTrigger
 } from "pelatform-ui/default";
 import { useCopyToClipboard } from "pelatform-ui/hooks";
@@ -1526,17 +1664,17 @@ function DisplayIdCard({
       description,
       isPending,
       ...props,
-      children: isPending ? /* @__PURE__ */ jsx21(Skeleton6, { className: cn10("h-11.5 w-full max-w-md", classNames?.skeleton) }) : /* @__PURE__ */ jsxs17(
+      children: isPending ? /* @__PURE__ */ jsx21(Skeleton6, { className: cn12("h-11.5 w-full max-w-md", classNames?.skeleton) }) : /* @__PURE__ */ jsxs17(
         "div",
         {
-          className: cn10(
+          className: cn12(
             "flex w-full max-w-md items-center justify-between rounded-md border p-2",
             classNames?.grid
           ),
           children: [
             /* @__PURE__ */ jsx21(Input, { value: id, ref: inputRef, disabled: true, className: "border-none! bg-transparent!" }),
-            /* @__PURE__ */ jsx21(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ jsxs17(Tooltip, { children: [
-              /* @__PURE__ */ jsx21(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx21(Button8, { variant: "dim", onClick: handleCopy, disabled: copied, children: copied ? /* @__PURE__ */ jsx21(CheckIcon, { className: cn10("stroke-green-600", classNames?.icon) }) : /* @__PURE__ */ jsx21(CopyIcon, { className: classNames?.icon }) }) }),
+            /* @__PURE__ */ jsx21(TooltipProvider2, { delayDuration: 0, children: /* @__PURE__ */ jsxs17(Tooltip, { children: [
+              /* @__PURE__ */ jsx21(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx21(Button8, { variant: "dim", onClick: handleCopy, disabled: copied, children: copied ? /* @__PURE__ */ jsx21(CheckIcon, { className: cn12("stroke-green-600", classNames?.icon) }) : /* @__PURE__ */ jsx21(CopyIcon, { className: classNames?.icon }) }) }),
               /* @__PURE__ */ jsx21(TooltipContent, { className: "px-2 py-1 text-xs", children: t("common.actions.copy") })
             ] }) })
           ]
@@ -1549,7 +1687,7 @@ function DisplayIdCard({
 // src/components/empty-state.tsx
 import Link9 from "next/link";
 import { useTranslations as useTranslations13 } from "next-intl";
-import { cn as cn11 } from "pelatform-ui";
+import { cn as cn13 } from "pelatform-ui";
 import { jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
 function EmptyState({
   className,
@@ -1561,7 +1699,7 @@ function EmptyState({
   children
 }) {
   const t = useTranslations13();
-  return /* @__PURE__ */ jsxs18("div", { className: cn11("flex flex-col items-center justify-center gap-y-4", className), children: [
+  return /* @__PURE__ */ jsxs18("div", { className: cn13("flex flex-col items-center justify-center gap-y-4", className), children: [
     Icon && /* @__PURE__ */ jsx22("div", { className: "flex size-14 items-center justify-center rounded-2xl border bg-muted", children: /* @__PURE__ */ jsx22(Icon, { className: "size-6 text-foreground" }) }),
     /* @__PURE__ */ jsx22("p", { className: "text-center font-medium text-base text-foreground", children: title }),
     description && /* @__PURE__ */ jsxs18("p", { className: "max-w-sm text-balance text-center text-muted-foreground text-sm", children: [
@@ -1631,9 +1769,9 @@ function OTPInputGroup({ otpSeparators = 0 }) {
 }
 
 // src/components/password-input.tsx
-import { useState as useState5 } from "react";
+import { useState as useState6 } from "react";
 import { EyeIcon, EyeOffIcon } from "lucide-react";
-import { cn as cn12 } from "pelatform-ui";
+import { cn as cn14 } from "pelatform-ui";
 import { Button as Button9, Input as Input2 } from "pelatform-ui/default";
 import { Fragment as Fragment9, jsx as jsx24, jsxs as jsxs20 } from "react/jsx-runtime";
 function PasswordInput({
@@ -1643,15 +1781,15 @@ function PasswordInput({
   onChange,
   ...props
 }) {
-  const [disabled, setDisabled] = useState5(true);
-  const [isVisible, setIsVisible] = useState5(false);
+  const [disabled, setDisabled] = useState6(true);
+  const [isVisible, setIsVisible] = useState6(false);
   return /* @__PURE__ */ jsxs20("div", { className: "relative", children: [
     /* @__PURE__ */ jsx24(
       Input2,
       {
         type: isVisible && enableToggle ? "text" : "password",
         variant,
-        className: cn12(enableToggle && "pe-10", className),
+        className: cn14(enableToggle && "pe-10", className),
         ...props,
         onChange: (event) => {
           setDisabled(!event.target.value);
@@ -1827,6 +1965,7 @@ export {
   Sidebar,
   SidebarContent,
   SidebarContentMenu,
+  SidebarFooter,
   SidebarHeaderBack,
   SignedInHint,
   SiteFooter,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pelatform/starter.shared",
-  "version": "0.2.15",
+  "version": "0.2.16",
   "description": "A part of SaaS starter kit for Pelatform applications.",
   "author": "Pelatform",
   "license": "MIT",
@@ -36,15 +36,15 @@
   },
   "devDependencies": {
     "@pelatform/starter.config": "0.2.2",
-    "@pelatform/starter.hook": "0.2.4",
+    "@pelatform/starter.hook": "0.2.5",
     "@pelatform/starter.utils": "0.2.10",
     "@pelatform/tsconfig": "^0.1.4",
     "@types/react": "^19.2.9",
     "lucide-react": "^0.563.0",
-    "next": "^16.1.4",
+    "next": "^16.1.5",
     "next-intl": "^4.7.0",
     "pelatform-ui": "^1.1.19",
-    "react": "^19.2.3",
+    "react": "^19.2.4",
     "tsup": "^8.5.1"
   },
   "peerDependencies": {