@saas-ui/react 3.0.0-alpha.3 → 3.0.0-alpha.31

package/dist/components/persona/index.cjs

@@ -32,7 +32,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var persona_exports = {};
 __export(persona_exports, {
   Persona: () => Persona,
-  PersonaAvatar: () => PersonaAvatar2
+  PersonaAvatar: () => PersonaAvatar2,
+  defaultPresenceOptions: () => defaultPresenceOptions
 });
 module.exports = __toCommonJS(persona_exports);
 
@@ -40,22 +41,64 @@ module.exports = __toCommonJS(persona_exports);
 var React2 = __toESM(require("react"), 1);
 
 // src/components/persona/persona-primitive.tsx
+var import_react4 = require("react");
+var import_react5 = require("@chakra-ui/react");
+var import_utils = require("@saas-ui/core/utils");
+
+// src/components/avatar/avatar.tsx
 var import_react = require("react");
 var import_react2 = require("@chakra-ui/react");
-var import_utils = require("@saas-ui/core/utils");
 var import_jsx_runtime = require("react/jsx-runtime");
+var Avatar = (0, import_react.forwardRef)(
+  function Avatar2(props, ref) {
+    const { name, src, srcSet, loading, icon, fallback, children, ...rest } = props;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react2.Avatar.Root, { ref, ...rest, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AvatarFallback, { name, icon, children: fallback }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.Avatar.Image, { src, srcSet, loading }),
+      children
+    ] });
+  }
+);
+var AvatarFallback = (0, import_react.forwardRef)(
+  function AvatarFallback2(props, ref) {
+    const { name, icon, children, ...rest } = props;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react2.Avatar.Fallback, { ref, ...rest, children: [
+      children,
+      name != null && children == null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: getInitials(name) }),
+      name == null && children == null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.Avatar.Icon, { asChild: !!icon, children: icon })
+    ] });
+  }
+);
+function getInitials(name) {
+  const names = name.trim().split(" ");
+  const firstName = names[0] != null ? names[0] : "";
+  const lastName = names.length > 1 ? names[names.length - 1] : "";
+  return firstName && lastName ? `${firstName.charAt(0)}${lastName.charAt(0)}` : firstName.charAt(0);
+}
+var AvatarGroup = (0, import_react.forwardRef)(
+  function AvatarGroup2(props, ref) {
+    const { size, variant, borderless, ...rest } = props;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.Avatar.PropsProvider, { value: { size, variant, borderless }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.Group, { gap: "0", spaceX: "-3", ref, ...rest }) });
+  }
+);
+
+// src/components/persona/persona.context.ts
+var import_react3 = require("@chakra-ui/react");
 var {
   useStyles: usePersonaStyles,
   withProvider,
   withContext
-} = (0, import_react2.createSlotRecipeContext)({
-  key: "persona"
+} = (0, import_react3.createSlotRecipeContext)({
+  key: "suiPersona"
 });
+
+// src/components/persona/persona-primitive.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
 var PersonaRoot = withProvider(
-  (0, import_react.forwardRef)((props, ref) => {
+  (0, import_react4.forwardRef)((props, ref) => {
     const { outOfOffice, presence, ...rest } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_react2.chakra.div,
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_react5.chakra.div,
       {
         ref,
         ...rest,
@@ -72,11 +115,11 @@ var PersonaRoot = withProvider(
   }),
   "root"
 );
-var PersonaAvatar = (0, import_react.forwardRef)(
+var PersonaAvatar = (0, import_react4.forwardRef)(
   (props, ref) => {
     const {
       name,
-      getInitials = (name2) => name2 == null ? void 0 : name2[0],
+      getInitials: getInitials2 = (name2) => name2 == null ? void 0 : name2[0],
       icon,
       loading,
       onError,
@@ -85,19 +128,7 @@ var PersonaAvatar = (0, import_react.forwardRef)(
       children,
       ...rest
     } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react2.Avatar.Root, { ref, ...rest, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.Avatar.Fallback, { children: getInitials(name) }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_react2.Avatar.Image,
-        {
-          src,
-          srcSet,
-          loading,
-          onError
-        }
-      ),
-      children
-    ] });
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Avatar, { ref, ...rest, children });
   }
 );
 var PersonaPresenceBadge = withContext("span", "presence");
@@ -110,11 +141,17 @@ var PersonaLabel = withContext(
   "label"
 );
 PersonaLabel.displayName = "PersonaLabel";
-var PersonaSecondaryLabel = withContext("span", "secondaryLabel");
-var PersonaTertiaryLabel = withContext("span", "tertiaryLabel");
+var PersonaSecondaryLabel = withContext(
+  "span",
+  "secondaryLabel"
+);
+var PersonaTertiaryLabel = withContext(
+  "span",
+  "tertiaryLabel"
+);
 
 // src/components/persona/persona.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var Persona = React2.forwardRef(
   (props, ref) => {
     const {
@@ -129,40 +166,43 @@ var Persona = React2.forwardRef(
       hideDetails,
       children,
       /** Avatar props */
-      getInitials,
+      getInitials: getInitials2,
       icon,
       loading,
       onError,
       src,
       srcSet,
+      fallback,
       ...rest
     } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
       PersonaRoot,
       {
         ref,
         outOfOffice: isOutOfOffice,
         presence,
+        size,
         ...rest,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
             PersonaAvatar,
             {
               name,
               size,
-              getInitials,
+              getInitials: getInitials2,
               icon,
               loading,
               onError,
               src,
               srcSet,
-              children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PersonaPresenceBadge, { children: presenceIcon })
+              fallback,
+              children: presence ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PersonaPresenceBadge, { children: presenceIcon }) : null
             }
           ),
-          !hideDetails && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(PersonaDetails, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PersonaLabel, { children: label || name }),
-            secondaryLabel && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PersonaSecondaryLabel, { children: secondaryLabel }),
-            tertiaryLabel && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PersonaTertiaryLabel, { children: tertiaryLabel }),
+          !hideDetails && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(PersonaDetails, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PersonaLabel, { children: label || name }),
+            secondaryLabel && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PersonaSecondaryLabel, { children: secondaryLabel }),
+            tertiaryLabel && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PersonaTertiaryLabel, { children: tertiaryLabel }),
             children
           ] })
         ]
@@ -172,10 +212,35 @@ var Persona = React2.forwardRef(
 );
 Persona.displayName = "Persona";
 var PersonaAvatar2 = React2.forwardRef(function PersonaAvatar3(props, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Persona, { ref, ...props, hideDetails: true });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Persona, { ref, ...props, hideDetails: true });
 });
+
+// src/components/persona/presence.ts
+var defaultPresenceOptions = {
+  online: {
+    label: "Online",
+    color: "presence.online"
+  },
+  offline: {
+    label: "Offline",
+    color: "presence.offline"
+  },
+  busy: {
+    label: "Busy",
+    color: "presence.busy"
+  },
+  dnd: {
+    label: "Do-not-disturb",
+    color: "presence.dnd"
+  },
+  away: {
+    label: "Away",
+    color: "presence.away"
+  }
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Persona,
-  PersonaAvatar
+  PersonaAvatar,
+  defaultPresenceOptions
 });

package/dist/components/persona/index.d.cts

@@ -1,9 +1,135 @@
 import * as react from 'react';
 import react__default from 'react';
-import { HTMLChakraProps, SlotRecipeProps, AvatarRootProps, ImageProps } from '@chakra-ui/react';
+import * as _chakra_ui_react from '@chakra-ui/react';
+import { RecipeVariantProps, HTMLChakraProps, SlotRecipeProps, ImageProps } from '@chakra-ui/react';
+import { AvatarProps } from '../avatar/index.cjs';
+
+declare const personaSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"presence" | "root" | "label" | "avatar" | "details" | "secondaryLabel" | "tertiaryLabel", {
+    size: {
+        '2xs': {
+            details: {
+                ms: number;
+            };
+            label: {
+                fontSize: "xs";
+            };
+            secondaryLabel: {
+                display: "none";
+            };
+            tertiaryLabel: {
+                display: "none";
+            };
+        };
+        xs: {
+            details: {
+                ms: number;
+            };
+            label: {
+                fontSize: "xs";
+            };
+            secondaryLabel: {
+                display: "none";
+            };
+            tertiaryLabel: {
+                display: "none";
+            };
+        };
+        sm: {
+            details: {
+                ms: number;
+            };
+            label: {
+                fontSize: "sm";
+            };
+            secondaryLabel: {
+                fontSize: "xs";
+            };
+            tertiaryLabel: {
+                display: "none";
+            };
+        };
+        md: {
+            details: {
+                ms: number;
+            };
+            label: {
+                fontSize: "sm";
+            };
+            secondaryLabel: {
+                fontSize: "xs";
+            };
+            tertiaryLabel: {
+                display: "none";
+            };
+        };
+        lg: {
+            details: {
+                ms: number;
+            };
+            label: {
+                fontSize: "md";
+            };
+            secondaryLabel: {
+                fontSize: "sm";
+            };
+            tertiaryLabel: {
+                fontSize: "sm";
+            };
+        };
+        xl: {
+            details: {
+                ms: number;
+            };
+            label: {
+                fontSize: "lg";
+            };
+            secondaryLabel: {
+                fontSize: "md";
+            };
+            tertiaryLabel: {
+                fontSize: "md";
+            };
+        };
+        '2xl': {
+            details: {
+                ms: number;
+            };
+            label: {
+                fontSize: "xl";
+            };
+            secondaryLabel: {
+                fontSize: "lg";
+            };
+            tertiaryLabel: {
+                fontSize: "lg";
+            };
+        };
+    };
+}>;
+type PersonaVariantProps = RecipeVariantProps<typeof personaSlotRecipe>;
 
 type Presence = 'online' | 'offline' | 'busy' | 'dnd' | 'away';
-interface PersonaRootProps extends HTMLChakraProps<'div'>, SlotRecipeProps<'persona'> {
+interface PresenceConfig {
+    label: string;
+    color: string;
+}
+type PresenceOptions<P extends string = Presence> = Record<P, PresenceConfig>;
+/**
+ * The presence configuration object.
+ *
+ * Default presence values: online, offline, busy, dnd, away
+ *
+ * You can overwrite colors in the theme semantic tokens.
+ * theme.semanticTokens.colors['presence.online'] = 'cyan.500'
+ *
+ * Or add a custom presence value
+ * theme.semanticTokens.colors['presence.vacay'] = 'blue.500'
+ *
+ * @see Docs https://saas-ui.dev/docs/components/data-display/persona
+ */
+declare const defaultPresenceOptions: PresenceOptions;
+
+interface PersonaRootProps extends HTMLChakraProps<'div'>, SlotRecipeProps<'suiPersona'>, PersonaVariantProps {
     /**
      * Indicates that a person is out of office. Changes the presence badge style.
      */
@@ -22,7 +148,7 @@ interface PersonaAvatarOptions {
      */
     name?: string;
 }
-interface PersonaAvatarProps$1 extends PersonaAvatarOptions, AvatarRootProps {
+interface PersonaAvatarProps$1 extends PersonaAvatarOptions, AvatarProps {
     src?: string;
     srcSet?: string;
     loading?: ImageProps['loading'];
@@ -78,7 +204,7 @@ interface PersonaOptions {
      */
     hideDetails?: boolean;
 }
-interface PersonaProps extends PersonaOptions, Omit<PersonaAvatarProps$1, 'size'>, PersonaRootProps {
+interface PersonaProps extends PersonaOptions, Omit<PersonaAvatarProps$1, 'size'>, PersonaRootProps, PersonaVariantProps {
 }
 /**
  * The wrapper component that handles default composition.
@@ -90,4 +216,4 @@ interface PersonaAvatarProps extends Omit<PersonaProps, 'hideDetails' | 'label'
 }
 declare const PersonaAvatar: react.ForwardRefExoticComponent<PersonaAvatarProps & react.RefAttributes<HTMLDivElement>>;
 
-export { Persona, PersonaAvatar, type PersonaAvatarProps, type PersonaProps };
+export { Persona, PersonaAvatar, type PersonaAvatarProps, type PersonaProps, type Presence, type PresenceConfig, defaultPresenceOptions };

package/dist/components/persona/index.d.ts

@@ -1,9 +1,135 @@
 import * as react from 'react';
 import react__default from 'react';
-import { HTMLChakraProps, SlotRecipeProps, AvatarRootProps, ImageProps } from '@chakra-ui/react';
+import * as _chakra_ui_react from '@chakra-ui/react';
+import { RecipeVariantProps, HTMLChakraProps, SlotRecipeProps, ImageProps } from '@chakra-ui/react';
+import { AvatarProps } from '../avatar/index.js';
+
+declare const personaSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"presence" | "root" | "label" | "avatar" | "details" | "secondaryLabel" | "tertiaryLabel", {
+    size: {
+        '2xs': {
+            details: {
+                ms: number;
+            };
+            label: {
+                fontSize: "xs";
+            };
+            secondaryLabel: {
+                display: "none";
+            };
+            tertiaryLabel: {
+                display: "none";
+            };
+        };
+        xs: {
+            details: {
+                ms: number;
+            };
+            label: {
+                fontSize: "xs";
+            };
+            secondaryLabel: {
+                display: "none";
+            };
+            tertiaryLabel: {
+                display: "none";
+            };
+        };
+        sm: {
+            details: {
+                ms: number;
+            };
+            label: {
+                fontSize: "sm";
+            };
+            secondaryLabel: {
+                fontSize: "xs";
+            };
+            tertiaryLabel: {
+                display: "none";
+            };
+        };
+        md: {
+            details: {
+                ms: number;
+            };
+            label: {
+                fontSize: "sm";
+            };
+            secondaryLabel: {
+                fontSize: "xs";
+            };
+            tertiaryLabel: {
+                display: "none";
+            };
+        };
+        lg: {
+            details: {
+                ms: number;
+            };
+            label: {
+                fontSize: "md";
+            };
+            secondaryLabel: {
+                fontSize: "sm";
+            };
+            tertiaryLabel: {
+                fontSize: "sm";
+            };
+        };
+        xl: {
+            details: {
+                ms: number;
+            };
+            label: {
+                fontSize: "lg";
+            };
+            secondaryLabel: {
+                fontSize: "md";
+            };
+            tertiaryLabel: {
+                fontSize: "md";
+            };
+        };
+        '2xl': {
+            details: {
+                ms: number;
+            };
+            label: {
+                fontSize: "xl";
+            };
+            secondaryLabel: {
+                fontSize: "lg";
+            };
+            tertiaryLabel: {
+                fontSize: "lg";
+            };
+        };
+    };
+}>;
+type PersonaVariantProps = RecipeVariantProps<typeof personaSlotRecipe>;
 
 type Presence = 'online' | 'offline' | 'busy' | 'dnd' | 'away';
-interface PersonaRootProps extends HTMLChakraProps<'div'>, SlotRecipeProps<'persona'> {
+interface PresenceConfig {
+    label: string;
+    color: string;
+}
+type PresenceOptions<P extends string = Presence> = Record<P, PresenceConfig>;
+/**
+ * The presence configuration object.
+ *
+ * Default presence values: online, offline, busy, dnd, away
+ *
+ * You can overwrite colors in the theme semantic tokens.
+ * theme.semanticTokens.colors['presence.online'] = 'cyan.500'
+ *
+ * Or add a custom presence value
+ * theme.semanticTokens.colors['presence.vacay'] = 'blue.500'
+ *
+ * @see Docs https://saas-ui.dev/docs/components/data-display/persona
+ */
+declare const defaultPresenceOptions: PresenceOptions;
+
+interface PersonaRootProps extends HTMLChakraProps<'div'>, SlotRecipeProps<'suiPersona'>, PersonaVariantProps {
     /**
      * Indicates that a person is out of office. Changes the presence badge style.
      */
@@ -22,7 +148,7 @@ interface PersonaAvatarOptions {
      */
     name?: string;
 }
-interface PersonaAvatarProps$1 extends PersonaAvatarOptions, AvatarRootProps {
+interface PersonaAvatarProps$1 extends PersonaAvatarOptions, AvatarProps {
     src?: string;
     srcSet?: string;
     loading?: ImageProps['loading'];
@@ -78,7 +204,7 @@ interface PersonaOptions {
      */
     hideDetails?: boolean;
 }
-interface PersonaProps extends PersonaOptions, Omit<PersonaAvatarProps$1, 'size'>, PersonaRootProps {
+interface PersonaProps extends PersonaOptions, Omit<PersonaAvatarProps$1, 'size'>, PersonaRootProps, PersonaVariantProps {
 }
 /**
  * The wrapper component that handles default composition.
@@ -90,4 +216,4 @@ interface PersonaAvatarProps extends Omit<PersonaProps, 'hideDetails' | 'label'
 }
 declare const PersonaAvatar: react.ForwardRefExoticComponent<PersonaAvatarProps & react.RefAttributes<HTMLDivElement>>;
 
-export { Persona, PersonaAvatar, type PersonaAvatarProps, type PersonaProps };
+export { Persona, PersonaAvatar, type PersonaAvatarProps, type PersonaProps, type Presence, type PresenceConfig, defaultPresenceOptions };

package/dist/components/persona/index.js

@@ -1,149 +1,13 @@
 'use client'
-import "../../chunk-RTMS5TJN.js";
-
-// src/components/persona/persona.tsx
-import * as React2 from "react";
-
-// src/components/persona/persona-primitive.tsx
-import { forwardRef } from "react";
 import {
-  Avatar,
-  chakra,
-  createSlotRecipeContext
-} from "@chakra-ui/react";
-import { dataAttr } from "@saas-ui/core/utils";
-import { jsx, jsxs } from "react/jsx-runtime";
-var {
-  useStyles: usePersonaStyles,
-  withProvider,
-  withContext
-} = createSlotRecipeContext({
-  key: "persona"
-});
-var PersonaRoot = withProvider(
-  forwardRef((props, ref) => {
-    const { outOfOffice, presence, ...rest } = props;
-    return /* @__PURE__ */ jsx(
-      chakra.div,
-      {
-        ref,
-        ...rest,
-        "data-out-of-office": dataAttr(outOfOffice),
-        "data-presence": presence,
-        css: [
-          presence ? {
-            "--persona-presence": `colors.presence.${presence}`
-          } : void 0,
-          rest.css
-        ]
-      }
-    );
-  }),
-  "root"
-);
-var PersonaAvatar = forwardRef(
-  (props, ref) => {
-    const {
-      name,
-      getInitials = (name2) => name2 == null ? void 0 : name2[0],
-      icon,
-      loading,
-      onError,
-      src,
-      srcSet,
-      children,
-      ...rest
-    } = props;
-    return /* @__PURE__ */ jsxs(Avatar.Root, { ref, ...rest, children: [
-      /* @__PURE__ */ jsx(Avatar.Fallback, { children: getInitials(name) }),
-      /* @__PURE__ */ jsx(
-        Avatar.Image,
-        {
-          src,
-          srcSet,
-          loading,
-          onError
-        }
-      ),
-      children
-    ] });
-  }
-);
-var PersonaPresenceBadge = withContext("span", "presence");
-var PersonaDetails = withContext(
-  "div",
-  "details"
-);
-var PersonaLabel = withContext(
-  "span",
-  "label"
-);
-PersonaLabel.displayName = "PersonaLabel";
-var PersonaSecondaryLabel = withContext("span", "secondaryLabel");
-var PersonaTertiaryLabel = withContext("span", "tertiaryLabel");
-
-// src/components/persona/persona.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var Persona = React2.forwardRef(
-  (props, ref) => {
-    const {
-      name,
-      presence,
-      presenceIcon,
-      isOutOfOffice,
-      label,
-      secondaryLabel,
-      tertiaryLabel,
-      size,
-      hideDetails,
-      children,
-      /** Avatar props */
-      getInitials,
-      icon,
-      loading,
-      onError,
-      src,
-      srcSet,
-      ...rest
-    } = props;
-    return /* @__PURE__ */ jsxs2(
-      PersonaRoot,
-      {
-        ref,
-        outOfOffice: isOutOfOffice,
-        presence,
-        ...rest,
-        children: [
-          /* @__PURE__ */ jsx2(
-            PersonaAvatar,
-            {
-              name,
-              size,
-              getInitials,
-              icon,
-              loading,
-              onError,
-              src,
-              srcSet,
-              children: /* @__PURE__ */ jsx2(PersonaPresenceBadge, { children: presenceIcon })
-            }
-          ),
-          !hideDetails && /* @__PURE__ */ jsxs2(PersonaDetails, { children: [
-            /* @__PURE__ */ jsx2(PersonaLabel, { children: label || name }),
-            secondaryLabel && /* @__PURE__ */ jsx2(PersonaSecondaryLabel, { children: secondaryLabel }),
-            tertiaryLabel && /* @__PURE__ */ jsx2(PersonaTertiaryLabel, { children: tertiaryLabel }),
-            children
-          ] })
-        ]
-      }
-    );
-  }
-);
-Persona.displayName = "Persona";
-var PersonaAvatar2 = React2.forwardRef(function PersonaAvatar3(props, ref) {
-  return /* @__PURE__ */ jsx2(Persona, { ref, ...props, hideDetails: true });
-});
+  Persona,
+  PersonaAvatar,
+  defaultPresenceOptions
+} from "../../chunk-GWC5GCMW.js";
+import "../../chunk-JO4WJVYO.js";
+import "../../chunk-RTMS5TJN.js";
 export {
   Persona,
-  PersonaAvatar2 as PersonaAvatar
+  PersonaAvatar,
+  defaultPresenceOptions
 };