@saas-ui/react 3.0.0-alpha.9 → 3.0.0-next.0

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

@@ -0,0 +1,43 @@
+import * as _ark_ui_react from '@ark-ui/react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import { Pagination } from '@chakra-ui/react/pagination';
+import { TextProps } from '@chakra-ui/react/typography';
+import { ButtonProps } from '@chakra-ui/react/button';
+
+type PaginationVariant = 'outline' | 'solid' | 'subtle';
+interface RootProps extends Omit<Pagination.RootProps, 'type'> {
+    size?: ButtonProps['size'];
+    variant?: PaginationVariant;
+}
+declare const Root: react.ForwardRefExoticComponent<RootProps & react.RefAttributes<HTMLDivElement>>;
+declare const Ellipsis: react.ForwardRefExoticComponent<Pagination.EllipsisProps & react.RefAttributes<HTMLDivElement>>;
+declare const Item: react.ForwardRefExoticComponent<Pagination.ItemProps & react.RefAttributes<HTMLButtonElement>>;
+declare const PrevButton: react.ForwardRefExoticComponent<Pagination.PrevTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+declare const NextButton: react.ForwardRefExoticComponent<Pagination.NextTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+declare const Items: (props: React.HTMLAttributes<HTMLElement>) => react_jsx_runtime.JSX.Element;
+interface PageTextProps extends TextProps {
+    format?: 'short' | 'compact' | 'long';
+}
+declare const PageText: react.ForwardRefExoticComponent<PageTextProps & react.RefAttributes<HTMLParagraphElement>>;
+declare const PrevTrigger: react.ForwardRefExoticComponent<Pagination.PrevTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+declare const NextTrigger: react.ForwardRefExoticComponent<Pagination.NextTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+declare const Context: (props: _ark_ui_react.PaginationContextProps) => react.ReactNode;
+
+declare const pagination_Context: typeof Context;
+declare const pagination_Ellipsis: typeof Ellipsis;
+declare const pagination_Item: typeof Item;
+declare const pagination_Items: typeof Items;
+declare const pagination_NextButton: typeof NextButton;
+declare const pagination_NextTrigger: typeof NextTrigger;
+declare const pagination_PageText: typeof PageText;
+type pagination_PageTextProps = PageTextProps;
+declare const pagination_PrevButton: typeof PrevButton;
+declare const pagination_PrevTrigger: typeof PrevTrigger;
+declare const pagination_Root: typeof Root;
+type pagination_RootProps = RootProps;
+declare namespace pagination {
+  export { pagination_Context as Context, pagination_Ellipsis as Ellipsis, pagination_Item as Item, pagination_Items as Items, pagination_NextButton as NextButton, pagination_NextTrigger as NextTrigger, pagination_PageText as PageText, type pagination_PageTextProps as PageTextProps, pagination_PrevButton as PrevButton, pagination_PrevTrigger as PrevTrigger, pagination_Root as Root, type pagination_RootProps as RootProps };
+}
+
+export { pagination as Pagination };

package/dist/components/pagination/index.js

@@ -0,0 +1,11 @@
+'use client'
+import {
+  pagination_exports
+} from "../../chunk-TWTXZ7PR.js";
+import "../../chunk-OJZPPAT6.js";
+import "../../chunk-5HVAMQYO.js";
+import "../../chunk-4XB7B73X.js";
+import "../../chunk-RTMS5TJN.js";
+export {
+  pagination_exports as Pagination
+};

package/dist/components/password-input/index.cjs

@@ -179,17 +179,45 @@ function IconBase(props) {
 
 // ../../node_modules/react-icons/lu/index.mjs
 function LuEyeOff(props) {
-  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "path", "attr": { "d": "M9.88 9.88a3 3 0 1 0 4.24 4.24" }, "child": [] }, { "tag": "path", "attr": { "d": "M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68" }, "child": [] }, { "tag": "path", "attr": { "d": "M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61" }, "child": [] }, { "tag": "line", "attr": { "x1": "2", "x2": "22", "y1": "2", "y2": "22" }, "child": [] }] })(props);
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "path", "attr": { "d": "M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49" }, "child": [] }, { "tag": "path", "attr": { "d": "M14.084 14.158a3 3 0 0 1-4.242-4.242" }, "child": [] }, { "tag": "path", "attr": { "d": "M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143" }, "child": [] }, { "tag": "path", "attr": { "d": "m2 2 20 20" }, "child": [] }] })(props);
 }
 function LuEye(props) {
-  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "path", "attr": { "d": "M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" }, "child": [] }, { "tag": "circle", "attr": { "cx": "12", "cy": "12", "r": "3" }, "child": [] }] })(props);
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "path", "attr": { "d": "M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0" }, "child": [] }, { "tag": "circle", "attr": { "cx": "12", "cy": "12", "r": "3" }, "child": [] }] })(props);
 }
 
-// src/components/input-group/input-group.tsx
+// src/components/icon-button/icon-button.tsx
 var import_react3 = require("react");
-var import_react4 = require("@chakra-ui/react");
+
+// src/components/button/index.ts
+var import_button = require("@chakra-ui/react/button");
+
+// src/components/icon-button/icon-button.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-var InputGroup = (0, import_react3.forwardRef)(
+var IconButton = (0, import_react3.forwardRef)(
+  function IconButton2(props, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_button.Button,
+      {
+        px: "0",
+        py: "0",
+        _icon: { fontSize: "1.2em" },
+        ref,
+        ...props
+      }
+    );
+  }
+);
+
+// src/components/input-group/input-group.tsx
+var import_react4 = require("react");
+var import_group = require("@chakra-ui/react/group");
+
+// src/components/input/index.ts
+var import_input = require("@chakra-ui/react/input");
+
+// src/components/input-group/input-group.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var InputGroup = (0, import_react4.forwardRef)(
   function InputGroup2(props, ref) {
     const {
       startElement,
@@ -199,20 +227,20 @@ var InputGroup = (0, import_react3.forwardRef)(
       children,
       ...rest
     } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react4.Group, { ref, display: "flex", ...rest, children: [
-      startElement && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react4.InputElement, { pointerEvents: "none", ...startElementProps, children: startElement }),
-      (0, import_react3.isValidElement)(children) && (0, import_react3.cloneElement)(children, {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_group.Group, { ref, display: "flex", ...rest, children: [
+      startElement && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_input.InputElement, { pointerEvents: "none", ...startElementProps, children: startElement }),
+      (0, import_react4.isValidElement)(children) && (0, import_react4.cloneElement)(children, {
         ...startElement && { ps: "calc(var(--input-height) - 6px)" },
         ...endElement && { pe: "calc(var(--input-height) - 6px)" },
         ...children.props
       }),
-      endElement && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react4.InputElement, { placement: "end", ...endElementProps, children: endElement })
+      endElement && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_input.InputElement, { placement: "end", ...endElementProps, children: endElement })
     ] });
   }
 );
 
 // src/components/password-input/password-input.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var PasswordInput = (0, import_react5.forwardRef)(
   function PasswordInput2(props, ref) {
     const {
@@ -220,7 +248,7 @@ var PasswordInput = (0, import_react5.forwardRef)(
       defaultVisible,
       visible: visibleProp,
       onVisibleChange,
-      visibilityIcon = { on: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(LuEye, {}), off: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(LuEyeOff, {}) },
+      visibilityIcon = { on: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(LuEye, {}), off: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(LuEyeOff, {}) },
       ...rest
     } = props;
     const [visible, setVisible] = (0, import_react6.useControllableState)({
@@ -229,11 +257,11 @@ var PasswordInput = (0, import_react5.forwardRef)(
       onChange: onVisibleChange
     });
     const inputRef = (0, import_react5.useRef)(null);
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       InputGroup,
       {
         width: "full",
-        endElement: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        endElement: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           VisibilityTrigger,
           {
             disabled: rest.disabled,
@@ -247,8 +275,8 @@ var PasswordInput = (0, import_react5.forwardRef)(
           }
         ),
         ...rootProps,
-        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-          import_react6.Input,
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          import_input.Input,
           {
             ...rest,
             ref: (0, import_react6.mergeRefs)(ref, inputRef),
@@ -261,8 +289,8 @@ var PasswordInput = (0, import_react5.forwardRef)(
 );
 var VisibilityTrigger = (0, import_react5.forwardRef)(
   function VisibilityTrigger2(props, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      import_react6.IconButton,
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      IconButton,
       {
         tabIndex: -1,
         ref,

package/dist/components/password-input/index.d.cts

@@ -1,8 +1,10 @@
 import * as react from 'react';
-import { InputProps, GroupProps } from '@chakra-ui/react';
+import { InputGroupProps } from '../input-group/index.cjs';
+import { InputProps } from '@chakra-ui/react/input';
+import '@chakra-ui/react/group';
 
 interface PasswordInputProps extends InputProps, PasswordVisibilityProps {
-    rootProps?: GroupProps;
+    rootProps?: InputGroupProps;
 }
 declare const PasswordInput: react.ForwardRefExoticComponent<PasswordInputProps & react.RefAttributes<HTMLInputElement>>;
 interface PasswordVisibilityProps {

package/dist/components/password-input/index.d.ts

@@ -1,8 +1,10 @@
 import * as react from 'react';
-import { InputProps, GroupProps } from '@chakra-ui/react';
+import { InputGroupProps } from '../input-group/index.js';
+import { InputProps } from '@chakra-ui/react/input';
+import '@chakra-ui/react/group';
 
 interface PasswordInputProps extends InputProps, PasswordVisibilityProps {
-    rootProps?: GroupProps;
+    rootProps?: InputGroupProps;
 }
 declare const PasswordInput: react.ForwardRefExoticComponent<PasswordInputProps & react.RefAttributes<HTMLInputElement>>;
 interface PasswordVisibilityProps {

package/dist/components/password-input/index.js

@@ -1,8 +1,11 @@
 'use client'
 import {
   PasswordInput
-} from "../../chunk-CD2JUFI2.js";
-import "../../chunk-PKI6YH2V.js";
+} from "../../chunk-T7XRS654.js";
+import "../../chunk-HKMYYESV.js";
+import "../../chunk-5MTFSSOH.js";
+import "../../chunk-OJZPPAT6.js";
+import "../../chunk-5HVAMQYO.js";
 import "../../chunk-RTMS5TJN.js";
 export {
   PasswordInput

package/dist/components/persona/index.cjs

@@ -41,27 +41,65 @@ module.exports = __toCommonJS(persona_exports);
 var React2 = __toESM(require("react"), 1);
 
 // src/components/persona/persona-primitive.tsx
-var import_react2 = require("react");
-var import_react3 = require("@chakra-ui/react");
+var import_react3 = require("react");
+var import_react4 = require("@chakra-ui/react");
 var import_utils = require("@saas-ui/core/utils");
 
+// src/components/avatar/avatar.tsx
+var import_react = require("react");
+var import_avatar = require("@chakra-ui/react/avatar");
+var import_group = require("@chakra-ui/react/group");
+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_avatar.Avatar.Root, { ref, ...rest, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AvatarFallback, { name, icon, children: fallback }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_avatar.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_avatar.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_avatar.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_avatar.Avatar.PropsProvider, { value: { size, variant, borderless }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_group.Group, { gap: "0", spaceX: "-3", ref, ...rest }) });
+  }
+);
+
 // src/components/persona/persona.context.ts
-var import_react = require("@chakra-ui/react");
+var import_react2 = require("@chakra-ui/react");
 var {
   useStyles: usePersonaStyles,
   withProvider,
   withContext
-} = (0, import_react.createSlotRecipeContext)({
+} = (0, import_react2.createSlotRecipeContext)({
   key: "suiPersona"
 });
 
 // src/components/persona/persona-primitive.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
+var import_jsx_runtime2 = require("react/jsx-runtime");
 var PersonaRoot = withProvider(
-  (0, import_react2.forwardRef)((props, ref) => {
+  (0, import_react3.forwardRef)((props, ref) => {
     const { outOfOffice, presence, ...rest } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_react3.chakra.div,
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_react4.chakra.div,
       {
         ref,
         ...rest,
@@ -78,11 +116,11 @@ var PersonaRoot = withProvider(
   }),
   "root"
 );
-var PersonaAvatar = (0, import_react2.forwardRef)(
+var PersonaAvatar = (0, import_react3.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,
@@ -91,19 +129,7 @@ var PersonaAvatar = (0, import_react2.forwardRef)(
       children,
       ...rest
     } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react3.Avatar.Root, { ref, ...rest, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react3.Avatar.Fallback, { children: getInitials(name) }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_react3.Avatar.Image,
-        {
-          src,
-          srcSet,
-          loading,
-          onError
-        }
-      ),
-      children
-    ] });
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Avatar, { ref, ...rest, children });
   }
 );
 var PersonaPresenceBadge = withContext("span", "presence");
@@ -126,7 +152,7 @@ var PersonaTertiaryLabel = withContext(
 );
 
 // 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 {
@@ -141,40 +167,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
           ] })
         ]
@@ -184,7 +213,7 @@ 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

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

@@ -1,6 +1,115 @@
 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 { HTMLChakraProps, SlotRecipeProps, ImageProps } from '@chakra-ui/react';
+import { AvatarProps } from '../avatar/index.cjs';
+import { RecipeVariantProps } from '@chakra-ui/react/styled-system';
+import '@chakra-ui/react/avatar';
+import '@chakra-ui/react/group';
+
+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 PresenceConfig {
@@ -23,7 +132,7 @@ type PresenceOptions<P extends string = Presence> = Record<P, PresenceConfig>;
  */
 declare const defaultPresenceOptions: PresenceOptions;
 
-interface PersonaRootProps extends HTMLChakraProps<'div'>, SlotRecipeProps<'suiPersona'> {
+interface PersonaRootProps extends HTMLChakraProps<'div'>, SlotRecipeProps<'suiPersona'>, PersonaVariantProps {
     /**
      * Indicates that a person is out of office. Changes the presence badge style.
      */
@@ -42,7 +151,7 @@ interface PersonaAvatarOptions {
      */
     name?: string;
 }
-interface PersonaAvatarProps$1 extends PersonaAvatarOptions, AvatarRootProps {
+interface PersonaAvatarProps$1 extends PersonaAvatarOptions, AvatarProps {
     src?: string;
     srcSet?: string;
     loading?: ImageProps['loading'];
@@ -98,7 +207,7 @@ interface PersonaOptions {
      */
     hideDetails?: boolean;
 }
-interface PersonaProps extends PersonaOptions, PersonaAvatarProps$1, PersonaRootProps {
+interface PersonaProps extends PersonaOptions, Omit<PersonaAvatarProps$1, 'size'>, PersonaRootProps, PersonaVariantProps {
 }
 /**
  * The wrapper component that handles default composition.