@saas-ui/react 3.0.0-alpha.14 → 3.0.0-alpha.15

package/dist/index.cjs

@@ -2585,6 +2585,7 @@ var personaSlotRecipe = (0, import_react32.defineSlotRecipe)({
   ],
   base: {
     root: {
+      "--presence-border-color": "var(--bg-currentcolor)",
       display: "flex",
       flexDirection: "row",
       alignItems: "center"
@@ -2596,11 +2597,11 @@ var personaSlotRecipe = (0, import_react32.defineSlotRecipe)({
       position: "absolute",
       bottom: 0,
       right: 0,
-      boxSize: "1em",
-      transform: "translate(15%, 15%)",
-      borderWidth: "0.15em",
+      boxSize: "calc(var(--avatar-size) / 3)",
+      transform: "translate(12%, 12%)",
+      borderWidth: "0.10em",
       borderRadius: "50%",
-      borderColor: "bg.panel",
+      borderColor: "var(--presence-border-color)",
       bg: "var(--persona-presence)"
     },
     details: {
@@ -2621,8 +2622,14 @@ var personaSlotRecipe = (0, import_react32.defineSlotRecipe)({
   },
   variants: {
     size: {
+      "2xs": {
+        details: { ms: 1 },
+        label: { fontSize: "2xs" },
+        secondaryLabel: { display: "none" },
+        tertiaryLabel: { display: "none" }
+      },
       xs: {
-        details: { ms: 2 },
+        details: { ms: 1.5 },
         label: { fontSize: "xs" },
         secondaryLabel: { display: "none" },
         tertiaryLabel: { display: "none" }
@@ -2650,6 +2657,12 @@ var personaSlotRecipe = (0, import_react32.defineSlotRecipe)({
         label: { fontSize: "lg" },
         secondaryLabel: { fontSize: "md" },
         tertiaryLabel: { fontSize: "md" }
+      },
+      "2xl": {
+        details: { ms: 4 },
+        label: { fontSize: "xl" },
+        secondaryLabel: { fontSize: "lg" },
+        tertiaryLabel: { fontSize: "lg" }
       }
     }
   },
@@ -3332,6 +3345,7 @@ var avatarSlotRecipe = (0, import_react38.defineSlotRecipe)({
   className: "chakra-avatar",
   base: {
     root: {
+      "--avatar-font-size": "calc(var(--avatar-size) / 2)",
       display: "inline-flex",
       alignItems: "center",
       justifyContent: "center",
@@ -3373,44 +3387,38 @@ var avatarSlotRecipe = (0, import_react38.defineSlotRecipe)({
       },
       "2xs": {
         root: {
-          "--avatar-font-size": "fontSizes.2xs",
-          "--avatar-size": "sizes.6"
+          "--avatar-size": "sizes.5"
         }
       },
       xs: {
         root: {
-          "--avatar-font-size": "fontSizes.xs",
-          "--avatar-size": "sizes.8"
+          "--avatar-size": "sizes.6"
         }
       },
       sm: {
         root: {
-          "--avatar-font-size": "fontSizes.sm",
           "--avatar-size": "sizes.9"
         }
       },
       md: {
         root: {
-          "--avatar-font-size": "fontSizes.md",
-          "--avatar-size": "sizes.10"
+          "--avatar-size": "sizes.12"
         }
       },
       lg: {
         root: {
-          "--avatar-font-size": "fontSizes.md",
-          "--avatar-size": "sizes.11"
+          "--avatar-size": "sizes.14"
         }
       },
       xl: {
         root: {
-          "--avatar-font-size": "fontSizes.lg",
-          "--avatar-size": "sizes.12"
+          "--avatar-size": "sizes.16"
         }
       },
       "2xl": {
         root: {
-          "--avatar-font-size": "fontSizes.xl",
-          "--avatar-size": "sizes.16"
+          "--avatar-font-size": "calc(var(--avatar-size) / 2)",
+          "--avatar-size": "sizes.20"
         }
       }
     },
@@ -10004,6 +10012,7 @@ var Persona = React7.forwardRef(
         ref,
         outOfOffice: isOutOfOffice,
         presence,
+        size,
         ...rest,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
@@ -10017,7 +10026,7 @@ var Persona = React7.forwardRef(
               onError,
               src,
               srcSet,
-              children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(PersonaPresenceBadge, { children: presenceIcon })
+              children: presence ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(PersonaPresenceBadge, { children: presenceIcon }) : null
             }
           ),
           !hideDetails && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(PersonaDetails, { children: [

package/dist/index.js

@@ -19,6 +19,9 @@ import {
   useSidebarItemStyles,
   useSidebarStyles
 } from "./chunk-GGAKUS66.js";
+import {
+  steps_exports
+} from "./chunk-44ZA3TYW.js";
 import {
   Switch
 } from "./chunk-SA3OGTOO.js";
@@ -27,11 +30,8 @@ import {
   toast
 } from "./chunk-HELHPHIQ.js";
 import {
-  steps_exports
-} from "./chunk-44ZA3TYW.js";
-import {
-  menu_exports
-} from "./chunk-KK77TYNL.js";
+  Link
+} from "./chunk-TZBAM4AD.js";
 import {
   loading_overlay_exports,
   useLoadingOverlayStyles
@@ -42,6 +42,12 @@ import {
 import {
   navbar_exports
 } from "./chunk-Q6SNJJO2.js";
+import {
+  SuiContext,
+  SuiProvider,
+  useLink,
+  useSui
+} from "./chunk-O2WVT2BP.js";
 import {
   NumberInput
 } from "./chunk-ULAJ3JEO.js";
@@ -51,15 +57,15 @@ import {
 import {
   PinInput
 } from "./chunk-2EUACKRH.js";
-import {
-  Persona,
-  PersonaAvatar,
-  defaultPresenceOptions
-} from "./chunk-M7FOBCOV.js";
 import {
   Radio,
   RadioGroup
 } from "./chunk-WYLMBMAH.js";
+import {
+  Persona,
+  PersonaAvatar,
+  defaultPresenceOptions
+} from "./chunk-4VH4IGVF.js";
 import {
   namespace_exports
 } from "./chunk-CB52LBJK.js";
@@ -75,19 +81,13 @@ import {
 import {
   IconBadge
 } from "./chunk-I2RXEKTB.js";
-import "./chunk-KTLWEUNW.js";
 import {
   InputGroup
 } from "./chunk-PKI6YH2V.js";
 import {
-  Link
-} from "./chunk-TZBAM4AD.js";
-import {
-  SuiContext,
-  SuiProvider,
-  useLink,
-  useSui
-} from "./chunk-O2WVT2BP.js";
+  menu_exports
+} from "./chunk-KK77TYNL.js";
+import "./chunk-KTLWEUNW.js";
 import {
   AppShell
 } from "./chunk-6ZNR6N2K.js";
@@ -98,12 +98,12 @@ import {
 import {
   breadcrumb_exports
 } from "./chunk-TT4C5VXB.js";
-import {
-  Button
-} from "./chunk-BCNPBZZK.js";
 import {
   Checkbox
 } from "./chunk-L356FPLY.js";
+import {
+  Button
+} from "./chunk-BCNPBZZK.js";
 import {
   CloseButton
 } from "./chunk-FZW2DYK3.js";
@@ -2621,6 +2621,7 @@ var personaSlotRecipe = defineSlotRecipe5({
   ],
   base: {
     root: {
+      "--presence-border-color": "var(--bg-currentcolor)",
       display: "flex",
       flexDirection: "row",
       alignItems: "center"
@@ -2632,11 +2633,11 @@ var personaSlotRecipe = defineSlotRecipe5({
       position: "absolute",
       bottom: 0,
       right: 0,
-      boxSize: "1em",
-      transform: "translate(15%, 15%)",
-      borderWidth: "0.15em",
+      boxSize: "calc(var(--avatar-size) / 3)",
+      transform: "translate(12%, 12%)",
+      borderWidth: "0.10em",
       borderRadius: "50%",
-      borderColor: "bg.panel",
+      borderColor: "var(--presence-border-color)",
       bg: "var(--persona-presence)"
     },
     details: {
@@ -2657,8 +2658,14 @@ var personaSlotRecipe = defineSlotRecipe5({
   },
   variants: {
     size: {
+      "2xs": {
+        details: { ms: 1 },
+        label: { fontSize: "2xs" },
+        secondaryLabel: { display: "none" },
+        tertiaryLabel: { display: "none" }
+      },
       xs: {
-        details: { ms: 2 },
+        details: { ms: 1.5 },
         label: { fontSize: "xs" },
         secondaryLabel: { display: "none" },
         tertiaryLabel: { display: "none" }
@@ -2686,6 +2693,12 @@ var personaSlotRecipe = defineSlotRecipe5({
         label: { fontSize: "lg" },
         secondaryLabel: { fontSize: "md" },
         tertiaryLabel: { fontSize: "md" }
+      },
+      "2xl": {
+        details: { ms: 4 },
+        label: { fontSize: "xl" },
+        secondaryLabel: { fontSize: "lg" },
+        tertiaryLabel: { fontSize: "lg" }
       }
     }
   },
@@ -3368,6 +3381,7 @@ var avatarSlotRecipe = defineSlotRecipe11({
   className: "chakra-avatar",
   base: {
     root: {
+      "--avatar-font-size": "calc(var(--avatar-size) / 2)",
       display: "inline-flex",
       alignItems: "center",
       justifyContent: "center",
@@ -3409,44 +3423,38 @@ var avatarSlotRecipe = defineSlotRecipe11({
       },
       "2xs": {
         root: {
-          "--avatar-font-size": "fontSizes.2xs",
-          "--avatar-size": "sizes.6"
+          "--avatar-size": "sizes.5"
         }
       },
       xs: {
         root: {
-          "--avatar-font-size": "fontSizes.xs",
-          "--avatar-size": "sizes.8"
+          "--avatar-size": "sizes.6"
         }
       },
       sm: {
         root: {
-          "--avatar-font-size": "fontSizes.sm",
           "--avatar-size": "sizes.9"
         }
       },
       md: {
         root: {
-          "--avatar-font-size": "fontSizes.md",
-          "--avatar-size": "sizes.10"
+          "--avatar-size": "sizes.12"
         }
       },
       lg: {
         root: {
-          "--avatar-font-size": "fontSizes.md",
-          "--avatar-size": "sizes.11"
+          "--avatar-size": "sizes.14"
         }
       },
       xl: {
         root: {
-          "--avatar-font-size": "fontSizes.lg",
-          "--avatar-size": "sizes.12"
+          "--avatar-size": "sizes.16"
         }
       },
       "2xl": {
         root: {
-          "--avatar-font-size": "fontSizes.xl",
-          "--avatar-size": "sizes.16"
+          "--avatar-font-size": "calc(var(--avatar-size) / 2)",
+          "--avatar-size": "sizes.20"
         }
       }
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saas-ui/react",
-  "version": "3.0.0-alpha.14",
+  "version": "3.0.0-alpha.15",
   "description": "Saas UI - The React component library for startups.",
   "type": "module",
   "exports": {