@pelatform/starter.shared 0.2.9 → 0.2.11

package/dist/index.d.ts

@@ -6,7 +6,7 @@ import { NavItem, LanguageSwitcherProps } from 'pelatform-ui/components';
 export { Logo as LogoDefault } from 'pelatform-ui/components';
 import { Config } from '@pelatform/starter.config';
 import { AuthQueryOptions } from '@pelatform/starter.hook';
-import { AnyAuthClient, User, Workspace, ApiKey } from '@pelatform/starter.utils';
+import { AnyAuthClient, ImageOptions, User, Workspace, ApiKey } from '@pelatform/starter.utils';
 import { Toaster, Avatar, buttonVariants, Dialog, Card, Button, Input } from 'pelatform-ui/default';
 import { LucideIcon } from 'lucide-react';
 
@@ -78,19 +78,24 @@ interface LayoutWrapperProps {
     sidebarMenu: ReactNode;
     logoHeader?: ReactNode;
     homeUrl?: string;
+    studioUrl?: string;
 }
-declare function LayoutWrapper({ children, sidebarHeader, sidebarMenu, logoHeader, homeUrl, }: LayoutWrapperProps): react_jsx_runtime.JSX.Element;
+declare function LayoutWrapper({ children, sidebarHeader, sidebarMenu, logoHeader, homeUrl, studioUrl, }: LayoutWrapperProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Props for the ConfigProvider component
  */
 type ConfigProviderProps = {
+    /** Child components that can access the configuration */
+    children: ReactNode;
     /** The configuration object to provide to all child components (can be partial, can have extra properties) */
     config: Partial<Config> | Record<string, any>;
     /** AuthClient instance to provide to all child components */
     authClient: AnyAuthClient;
-    /** Child components that can access the configuration */
-    children: ReactNode;
+    /** Image options for user avatar */
+    userAvatar?: Partial<ImageOptions>;
+    /** Image options for workspace logo */
+    workspaceLogo?: Partial<ImageOptions>;
 } & Partial<AuthQueryOptions>;
 /**
  * Provider component that makes configuration available to all client components
@@ -121,7 +126,7 @@ type ConfigProviderProps = {
  * }
  * ```
  */
-declare function ConfigProvider({ config, authClient, children, ...props }: ConfigProviderProps): react_jsx_runtime.JSX.Element;
+declare function ConfigProvider({ children, config: configProp, authClient: authClientProp, userAvatar: userAvatarProp, workspaceLogo: workspaceLogoProp, ...props }: ConfigProviderProps): react_jsx_runtime.JSX.Element;
 
 interface LayoutProviderProps {
     children: ReactNode;
@@ -219,7 +224,9 @@ declare function CardHeaderComponent({ className, classNames, title, description
 declare function CardFooterComponent({ className, classNames, instructions, actionLabel, action, disabled, isDestructive, isPending, isSubmitting, }: CardComponentProps): react_jsx_runtime.JSX.Element;
 declare function CardActionComponent({ classNames, actionLabel, onClick, disabled, isDestructive, isSubmitting, ...props }: CardComponentProps & ComponentProps<typeof Button>): react_jsx_runtime.JSX.Element;
 
-declare function DialogComponent({ children, classNames, onOpenChange, title, description, disableFooter, cancelButton, cancelButtonDisabled, button, ...props }: DialogComponentProps): react_jsx_runtime.JSX.Element;
+declare function DialogComponent({ children, classNames, onOpenChange, title, description, disableFooter, cancelButton, cancelButtonDisabled, button, showCloseButton, ...props }: DialogComponentProps & {
+    showCloseButton?: boolean;
+}): react_jsx_runtime.JSX.Element;
 declare function DialogFooterComponent({ className, classNames, onOpenChange, cancelButton, cancelButtonDisabled, button, }: DialogComponentProps): react_jsx_runtime.JSX.Element;
 
 declare function SkeletonViewComponent({ classNames }: {

package/dist/index.js

@@ -1007,6 +1007,12 @@ function SiteHeaderSecondary({
   ] });
 }
 
+// src/components/layouts/wrapper.tsx
+import Link8 from "next/link";
+import { RocketIcon } from "lucide-react";
+import { useSession as useSession5 } from "@pelatform/starter.hook";
+import { Button as Button5 } from "pelatform-ui/default";
+
 // src/components/providers/layout.tsx
 import { useEffect as useEffect3, useState as useState4 } from "react";
 import { LayoutContext } from "@pelatform/starter.hook";
@@ -1079,12 +1085,18 @@ function LayoutWrapper({
   sidebarHeader,
   sidebarMenu,
   logoHeader,
-  homeUrl
+  homeUrl,
+  studioUrl
 }) {
+  const { user } = useSession5();
   const sidebarContent = /* @__PURE__ */ jsxs12(Fragment6, { children: [
     sidebarHeader,
     /* @__PURE__ */ jsx15(SidebarContent, { children: sidebarMenu })
   ] });
+  const studioButton = /* @__PURE__ */ jsx15(Button5, { variant: "ghost", asChild: true, children: /* @__PURE__ */ jsxs12(Link8, { href: studioUrl || "#", target: "_blank", children: [
+    /* @__PURE__ */ jsx15(RocketIcon, {}),
+    " Studio"
+  ] }) });
   return /* @__PURE__ */ jsxs12(LayoutProvider, { logoHeader, children: [
     /* @__PURE__ */ jsxs12(Header, { children: [
       /* @__PURE__ */ jsx15(HeaderLeft, {}),
@@ -1092,6 +1104,7 @@ function LayoutWrapper({
         HeaderRight,
         {
           sidebar: /* @__PURE__ */ jsx15(HeaderSidebarMobile, { children: sidebarContent }),
+          button: studioUrl && user?.role === "admin" ? studioButton : null,
           homeUrl
         }
       )
@@ -1112,14 +1125,51 @@ import {
   QueryContext
 } from "@pelatform/starter.hook";
 import { jsx as jsx16 } from "react/jsx-runtime";
-function ConfigProvider({ config, authClient, children, ...props }) {
+function ConfigProvider({
+  children,
+  config: configProp,
+  authClient: authClientProp,
+  userAvatar: userAvatarProp,
+  workspaceLogo: workspaceLogoProp,
+  ...props
+}) {
   const mergedConfig = useMemo2(() => {
-    return mergeConfig(defaultConfig, config);
-  }, [config]);
-  const configWithAuth = {
-    ...mergedConfig,
-    authClient
+    return mergeConfig(defaultConfig, configProp);
+  }, [configProp]);
+  const config = mergedConfig;
+  const authClient = authClientProp;
+  const DEFAULT_IMAGE_OPTIONS = {
+    extension: "png",
+    size: 128
   };
+  const userAvatar = useMemo2(() => {
+    if (!userAvatarProp) {
+      return {
+        extension: DEFAULT_IMAGE_OPTIONS.extension,
+        size: DEFAULT_IMAGE_OPTIONS.size
+      };
+    }
+    return {
+      upload: userAvatarProp.upload,
+      delete: userAvatarProp.delete,
+      extension: userAvatarProp.extension || DEFAULT_IMAGE_OPTIONS.extension,
+      size: userAvatarProp.size || (userAvatarProp.upload ? 256 : DEFAULT_IMAGE_OPTIONS.size)
+    };
+  }, [userAvatarProp]);
+  const workspaceLogo = useMemo2(() => {
+    if (!workspaceLogoProp) {
+      return {
+        extension: DEFAULT_IMAGE_OPTIONS.extension,
+        size: DEFAULT_IMAGE_OPTIONS.size
+      };
+    }
+    return {
+      upload: workspaceLogoProp.upload,
+      delete: workspaceLogoProp.delete,
+      extension: workspaceLogoProp.extension || DEFAULT_IMAGE_OPTIONS.extension,
+      size: workspaceLogoProp.size || (workspaceLogoProp.upload ? 256 : DEFAULT_IMAGE_OPTIONS.size)
+    };
+  }, [workspaceLogoProp]);
   return /* @__PURE__ */ jsx16(
     QueryContext.Provider,
     {
@@ -1127,7 +1177,18 @@ function ConfigProvider({ config, authClient, children, ...props }) {
         ...defaultAuthQueryOptions,
         ...props
       },
-      children: /* @__PURE__ */ jsx16(ConfigContext.Provider, { value: configWithAuth, children })
+      children: /* @__PURE__ */ jsx16(
+        ConfigContext.Provider,
+        {
+          value: {
+            ...config,
+            authClient,
+            userAvatar,
+            workspaceLogo
+          },
+          children
+        }
+      )
     }
   );
 }
@@ -1159,7 +1220,7 @@ function SharedProviders({
 
 // src/components/utils/card.tsx
 import { cn as cn7 } from "pelatform-ui";
-import { Button as Button5, Card, CardContent, CardFooter, Skeleton as Skeleton4, Spinner } from "pelatform-ui/default";
+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({
   children,
@@ -1300,7 +1361,7 @@ function CardActionComponent({
   ...props
 }) {
   return /* @__PURE__ */ jsxs14(
-    Button5,
+    Button6,
     {
       type: onClick ? "button" : "submit",
       variant: isDestructive ? "destructive" : "primary",
@@ -1326,7 +1387,7 @@ function CardActionComponent({
 import { useTranslations as useTranslations11 } from "next-intl";
 import { cn as cn8 } from "pelatform-ui";
 import {
-  Button as Button6,
+  Button as Button7,
   Dialog,
   DialogContent,
   DialogDescription,
@@ -1345,18 +1406,29 @@ function DialogComponent({
   cancelButton,
   cancelButtonDisabled,
   button,
+  showCloseButton = false,
   ...props
 }) {
   return /* @__PURE__ */ jsx19(Dialog, { onOpenChange, ...props, children: /* @__PURE__ */ jsxs15(
     DialogContent,
     {
       onOpenAutoFocus: (e) => e.preventDefault(),
-      className: classNames?.dialog?.content,
+      className: cn8("bg-muted sm:max-w-md", classNames?.dialog?.content),
+      showCloseButton,
       children: [
-        /* @__PURE__ */ jsxs15(DialogHeader, { className: cn8("space-y-2", classNames?.header), children: [
-          /* @__PURE__ */ jsx19(DialogTitle, { className: classNames?.title, children: title }),
-          description && /* @__PURE__ */ jsx19(DialogDescription, { className: classNames?.description, children: description })
-        ] }),
+        /* @__PURE__ */ jsxs15(
+          DialogHeader,
+          {
+            className: cn8(
+              "-ms-6 -me-6 -mt-6 space-y-2 rounded-t-lg bg-background p-6",
+              classNames?.header
+            ),
+            children: [
+              /* @__PURE__ */ jsx19(DialogTitle, { className: classNames?.title, children: title }),
+              description && /* @__PURE__ */ jsx19(DialogDescription, { className: classNames?.description, children: description })
+            ]
+          }
+        ),
         children,
         !disableFooter && /* @__PURE__ */ jsx19(
           DialogFooterComponent,
@@ -1383,11 +1455,11 @@ function DialogFooterComponent({
   const t = useTranslations11();
   return /* @__PURE__ */ jsxs15(DialogFooter, { className: cn8(className, classNames?.dialog?.footer), children: [
     cancelButton && /* @__PURE__ */ jsx19(
-      Button6,
+      Button7,
       {
         type: "button",
-        variant: "secondary",
-        className: cn8(classNames?.button, classNames?.secondaryButton),
+        variant: "ghost",
+        className: cn8(classNames?.button),
         onClick: () => onOpenChange?.(false),
         disabled: cancelButtonDisabled,
         children: t("common.actions.cancel")
@@ -1423,7 +1495,7 @@ import { CheckIcon, CopyIcon } from "lucide-react";
 import { useTranslations as useTranslations12 } from "next-intl";
 import { cn as cn10 } from "pelatform-ui";
 import {
-  Button as Button7,
+  Button as Button8,
   Input,
   Skeleton as Skeleton6,
   Tooltip,
@@ -1469,7 +1541,7 @@ function DisplayIdCard({
           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(Button7, { 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(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(TooltipContent, { className: "px-2 py-1 text-xs", children: t("common.actions.copy") })
             ] }) })
           ]
@@ -1480,7 +1552,7 @@ function DisplayIdCard({
 }
 
 // src/components/empty-state.tsx
-import Link8 from "next/link";
+import Link9 from "next/link";
 import { useTranslations as useTranslations13 } from "next-intl";
 import { cn as cn11 } from "pelatform-ui";
 import { jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
@@ -1501,7 +1573,7 @@ function EmptyState({
       description,
       " ",
       learnMore && /* @__PURE__ */ jsxs18(
-        Link8,
+        Link9,
         {
           href: learnMore,
           className: "text-foreground underline underline-offset-2 transition-colors hover:text-primary",
@@ -1567,7 +1639,7 @@ function OTPInputGroup({ otpSeparators = 0 }) {
 import { useState as useState5 } from "react";
 import { EyeIcon, EyeOffIcon } from "lucide-react";
 import { cn as cn12 } from "pelatform-ui";
-import { Button as Button8, Input as Input2 } from "pelatform-ui/default";
+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({
   className,
@@ -1594,7 +1666,7 @@ function PasswordInput({
     ),
     enableToggle && /* @__PURE__ */ jsxs20(Fragment9, { children: [
       /* @__PURE__ */ jsx24(
-        Button8,
+        Button9,
         {
           type: "button",
           variant: "ghost",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pelatform/starter.shared",
-  "version": "0.2.9",
+  "version": "0.2.11",
   "description": "A part of SaaS starter kit for Pelatform applications.",
   "author": "Pelatform",
   "license": "MIT",
@@ -32,18 +32,18 @@
     "utilities"
   ],
   "dependencies": {
-    "@tanstack/react-query-devtools": "^5.91.1"
+    "@tanstack/react-query-devtools": "^5.91.2"
   },
   "devDependencies": {
-    "@pelatform/starter.config": "0.2.1",
-    "@pelatform/starter.hook": "0.2.2",
-    "@pelatform/starter.utils": "0.2.4",
-    "@pelatform/tsconfig": "^0.1.3",
+    "@pelatform/starter.config": "0.2.2",
+    "@pelatform/starter.hook": "0.2.4",
+    "@pelatform/starter.utils": "0.2.6",
+    "@pelatform/tsconfig": "^0.1.4",
     "@types/react": "^19.2.7",
     "lucide-react": "^0.562.0",
-    "next": "^16.1.0",
+    "next": "^16.1.1",
     "next-intl": "^4.6.1",
-    "pelatform-ui": "^1.1.9",
+    "pelatform-ui": "^1.1.10",
     "react": "^19.2.3",
     "tsup": "^8.5.1"
   },