@saas-ui/react 3.0.0-alpha.0 → 3.0.0-alpha.10

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

@@ -0,0 +1,284 @@
+'use client'
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/password-input/index.ts
+var password_input_exports = {};
+__export(password_input_exports, {
+  PasswordInput: () => PasswordInput
+});
+module.exports = __toCommonJS(password_input_exports);
+
+// src/components/password-input/password-input.tsx
+var import_react5 = require("react");
+var import_react6 = require("@chakra-ui/react");
+
+// ../../node_modules/react-icons/lib/iconBase.mjs
+var import_react2 = __toESM(require("react"), 1);
+
+// ../../node_modules/react-icons/lib/iconContext.mjs
+var import_react = __toESM(require("react"), 1);
+var DefaultContext = {
+  color: void 0,
+  size: void 0,
+  className: void 0,
+  style: void 0,
+  attr: void 0
+};
+var IconContext = import_react.default.createContext && /* @__PURE__ */ import_react.default.createContext(DefaultContext);
+
+// ../../node_modules/react-icons/lib/iconBase.mjs
+var _excluded = ["attr", "size", "title"];
+function _objectWithoutProperties(source, excluded) {
+  if (source == null) return {};
+  var target = _objectWithoutPropertiesLoose(source, excluded);
+  var key, i;
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+      target[key] = source[key];
+    }
+  }
+  return target;
+}
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  for (var key in source) {
+    if (Object.prototype.hasOwnProperty.call(source, key)) {
+      if (excluded.indexOf(key) >= 0) continue;
+      target[key] = source[key];
+    }
+  }
+  return target;
+}
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+function ownKeys(e, r) {
+  var t = Object.keys(e);
+  if (Object.getOwnPropertySymbols) {
+    var o = Object.getOwnPropertySymbols(e);
+    r && (o = o.filter(function(r2) {
+      return Object.getOwnPropertyDescriptor(e, r2).enumerable;
+    })), t.push.apply(t, o);
+  }
+  return t;
+}
+function _objectSpread(e) {
+  for (var r = 1; r < arguments.length; r++) {
+    var t = null != arguments[r] ? arguments[r] : {};
+    r % 2 ? ownKeys(Object(t), true).forEach(function(r2) {
+      _defineProperty(e, r2, t[r2]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function(r2) {
+      Object.defineProperty(e, r2, Object.getOwnPropertyDescriptor(t, r2));
+    });
+  }
+  return e;
+}
+function _defineProperty(obj, key, value) {
+  key = _toPropertyKey(key);
+  if (key in obj) {
+    Object.defineProperty(obj, key, { value, enumerable: true, configurable: true, writable: true });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
+function _toPropertyKey(t) {
+  var i = _toPrimitive(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _toPrimitive(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r || "default");
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
+function Tree2Element(tree) {
+  return tree && tree.map((node, i) => /* @__PURE__ */ import_react2.default.createElement(node.tag, _objectSpread({
+    key: i
+  }, node.attr), Tree2Element(node.child)));
+}
+function GenIcon(data) {
+  return (props) => /* @__PURE__ */ import_react2.default.createElement(IconBase, _extends({
+    attr: _objectSpread({}, data.attr)
+  }, props), Tree2Element(data.child));
+}
+function IconBase(props) {
+  var elem = (conf) => {
+    var {
+      attr,
+      size,
+      title
+    } = props, svgProps = _objectWithoutProperties(props, _excluded);
+    var computedSize = size || conf.size || "1em";
+    var className;
+    if (conf.className) className = conf.className;
+    if (props.className) className = (className ? className + " " : "") + props.className;
+    return /* @__PURE__ */ import_react2.default.createElement("svg", _extends({
+      stroke: "currentColor",
+      fill: "currentColor",
+      strokeWidth: "0"
+    }, conf.attr, attr, svgProps, {
+      className,
+      style: _objectSpread(_objectSpread({
+        color: props.color || conf.color
+      }, conf.style), props.style),
+      height: computedSize,
+      width: computedSize,
+      xmlns: "http://www.w3.org/2000/svg"
+    }), title && /* @__PURE__ */ import_react2.default.createElement("title", null, title), props.children);
+  };
+  return IconContext !== void 0 ? /* @__PURE__ */ import_react2.default.createElement(IconContext.Consumer, null, (conf) => elem(conf)) : elem(DefaultContext);
+}
+
+// ../../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);
+}
+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);
+}
+
+// src/components/input-group/input-group.tsx
+var import_react3 = require("react");
+var import_react4 = require("@chakra-ui/react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var InputGroup = (0, import_react3.forwardRef)(
+  function InputGroup2(props, ref) {
+    const {
+      startElement,
+      startElementProps,
+      endElement,
+      endElementProps,
+      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, {
+        ...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 })
+    ] });
+  }
+);
+
+// src/components/password-input/password-input.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var PasswordInput = (0, import_react5.forwardRef)(
+  function PasswordInput2(props, ref) {
+    const {
+      rootProps,
+      defaultVisible,
+      visible: visibleProp,
+      onVisibleChange,
+      visibilityIcon = { on: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(LuEye, {}), off: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(LuEyeOff, {}) },
+      ...rest
+    } = props;
+    const [visible, setVisible] = (0, import_react6.useControllableState)({
+      value: visibleProp,
+      defaultValue: defaultVisible || false,
+      onChange: onVisibleChange
+    });
+    const inputRef = (0, import_react5.useRef)(null);
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      InputGroup,
+      {
+        width: "full",
+        endElement: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          VisibilityTrigger,
+          {
+            disabled: rest.disabled,
+            onPointerDown: (e) => {
+              if (rest.disabled) return;
+              if (e.button !== 0) return;
+              e.preventDefault();
+              setVisible(!visible);
+            },
+            children: visible ? visibilityIcon.off : visibilityIcon.on
+          }
+        ),
+        ...rootProps,
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          import_react6.Input,
+          {
+            ...rest,
+            ref: (0, import_react6.mergeRefs)(ref, inputRef),
+            type: visible ? "text" : "password"
+          }
+        )
+      }
+    );
+  }
+);
+var VisibilityTrigger = (0, import_react5.forwardRef)(
+  function VisibilityTrigger2(props, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_react6.IconButton,
+      {
+        tabIndex: -1,
+        ref,
+        me: "-2",
+        aspectRatio: "square",
+        size: "sm",
+        variant: "ghost",
+        colorPalette: "gray",
+        height: "calc(100% - {spacing.2})",
+        "aria-label": "Toggle password visibility",
+        ...props
+      }
+    );
+  }
+);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PasswordInput
+});

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

@@ -0,0 +1,18 @@
+import * as react from 'react';
+import { InputProps, GroupProps } from '@chakra-ui/react';
+
+interface PasswordInputProps extends InputProps, PasswordVisibilityProps {
+    rootProps?: GroupProps;
+}
+declare const PasswordInput: react.ForwardRefExoticComponent<PasswordInputProps & react.RefAttributes<HTMLInputElement>>;
+interface PasswordVisibilityProps {
+    defaultVisible?: boolean;
+    visible?: boolean;
+    onVisibleChange?: (visible: boolean) => void;
+    visibilityIcon?: {
+        on: React.ReactNode;
+        off: React.ReactNode;
+    };
+}
+
+export { PasswordInput, type PasswordInputProps };

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

@@ -0,0 +1,18 @@
+import * as react from 'react';
+import { InputProps, GroupProps } from '@chakra-ui/react';
+
+interface PasswordInputProps extends InputProps, PasswordVisibilityProps {
+    rootProps?: GroupProps;
+}
+declare const PasswordInput: react.ForwardRefExoticComponent<PasswordInputProps & react.RefAttributes<HTMLInputElement>>;
+interface PasswordVisibilityProps {
+    defaultVisible?: boolean;
+    visible?: boolean;
+    onVisibleChange?: (visible: boolean) => void;
+    visibilityIcon?: {
+        on: React.ReactNode;
+        off: React.ReactNode;
+    };
+}
+
+export { PasswordInput, type PasswordInputProps };

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

@@ -0,0 +1,9 @@
+'use client'
+import {
+  PasswordInput
+} from "../../chunk-CD2JUFI2.js";
+import "../../chunk-PKI6YH2V.js";
+import "../../chunk-RTMS5TJN.js";
+export {
+  PasswordInput
+};

package/dist/components/persona/index.cjs

@@ -0,0 +1,218 @@
+'use client'
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/persona/index.ts
+var persona_exports = {};
+__export(persona_exports, {
+  Persona: () => Persona,
+  PersonaAvatar: () => PersonaAvatar2,
+  defaultPresenceOptions: () => defaultPresenceOptions
+});
+module.exports = __toCommonJS(persona_exports);
+
+// src/components/persona/persona.tsx
+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_utils = require("@saas-ui/core/utils");
+
+// src/components/persona/persona.context.ts
+var import_react = require("@chakra-ui/react");
+var {
+  useStyles: usePersonaStyles,
+  withProvider,
+  withContext
+} = (0, import_react.createSlotRecipeContext)({
+  key: "suiPersona"
+});
+
+// src/components/persona/persona-primitive.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var PersonaRoot = withProvider(
+  (0, import_react2.forwardRef)((props, ref) => {
+    const { outOfOffice, presence, ...rest } = props;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_react3.chakra.div,
+      {
+        ref,
+        ...rest,
+        "data-out-of-office": (0, import_utils.dataAttr)(outOfOffice),
+        "data-presence": presence,
+        css: [
+          presence ? {
+            "--persona-presence": `colors.presence.${presence}`
+          } : void 0,
+          rest.css
+        ]
+      }
+    );
+  }),
+  "root"
+);
+var PersonaAvatar = (0, import_react2.forwardRef)(
+  (props, ref) => {
+    const {
+      name,
+      getInitials = (name2) => name2 == null ? void 0 : name2[0],
+      icon,
+      loading,
+      onError,
+      src,
+      srcSet,
+      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
+    ] });
+  }
+);
+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
+var import_jsx_runtime2 = require("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__ */ (0, import_jsx_runtime2.jsxs)(
+      PersonaRoot,
+      {
+        ref,
+        outOfOffice: isOutOfOffice,
+        presence,
+        ...rest,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            PersonaAvatar,
+            {
+              name,
+              size,
+              getInitials,
+              icon,
+              loading,
+              onError,
+              src,
+              srcSet,
+              children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PersonaPresenceBadge, { children: presenceIcon })
+            }
+          ),
+          !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 }),
+            children
+          ] })
+        ]
+      }
+    );
+  }
+);
+Persona.displayName = "Persona";
+var PersonaAvatar2 = React2.forwardRef(function PersonaAvatar3(props, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.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,
+  defaultPresenceOptions
+});

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

@@ -0,0 +1,113 @@
+import * as react from 'react';
+import react__default from 'react';
+import { HTMLChakraProps, SlotRecipeProps, AvatarRootProps, ImageProps } from '@chakra-ui/react';
+
+type Presence = 'online' | 'offline' | 'busy' | 'dnd' | 'away';
+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'> {
+    /**
+     * Indicates that a person is out of office. Changes the presence badge style.
+     */
+    outOfOffice?: boolean;
+    /**
+     * The presence status of the person
+     */
+    presence?: Presence;
+}
+interface PersonaAvatarOptions {
+    /**
+     * The name of the person in the avatar.
+     *
+     * - if `src` has loaded, the name will be used as the `alt` attribute of the `img`
+     * - If `src` is not loaded, the name will be used to create the initials
+     */
+    name?: string;
+}
+interface PersonaAvatarProps$1 extends PersonaAvatarOptions, AvatarRootProps {
+    src?: string;
+    srcSet?: string;
+    loading?: ImageProps['loading'];
+    icon?: react__default.ReactElement;
+    fallback?: react__default.ReactNode;
+    getInitials?: (name?: string | null) => string | null;
+}
+
+interface PersonaOptions {
+    /**
+     * The name of the person in the avatar.
+     *
+     * - if `src` has loaded, the name will be used as the `alt` attribute of the `img`
+     * - If `src` is not loaded, the name will be used to create the initials
+     */
+    name?: string;
+    /**
+     * The presence status of the person
+     *
+     * If set will add an AvatarBadge with color configured in `Presence`
+     * Default presence options:
+     * - online
+     * - offline
+     * - busy
+     * - dnd
+     * - away
+     */
+    presence?: Presence;
+    /**
+     * The icon shown in the AvatarBadge
+     */
+    presenceIcon?: react.ReactNode;
+    /**
+     * Indicates that a person is out of office. Changes the presence badge style.
+     */
+    isOutOfOffice?: boolean;
+    /**
+     * Primary label of the persona, defaults to the name
+     */
+    label?: react.ReactNode;
+    /**
+     * Secondary label, usually the role of the person
+     * Only visible from md size and up.
+     */
+    secondaryLabel?: react.ReactNode;
+    /**
+     * Tertiary label, usually the status of the person.
+     * Only visible from lg size and up.
+     */
+    tertiaryLabel?: react.ReactNode;
+    /**
+     * Hide the persona details next to the avatar.
+     */
+    hideDetails?: boolean;
+}
+interface PersonaProps extends PersonaOptions, PersonaAvatarProps$1, PersonaRootProps {
+}
+/**
+ * The wrapper component that handles default composition.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/data-display/persona
+ */
+declare const Persona: react.ForwardRefExoticComponent<PersonaProps & react.RefAttributes<HTMLDivElement>>;
+interface PersonaAvatarProps extends Omit<PersonaProps, 'hideDetails' | 'label' | 'secondaryLabel' | 'tertiaryLabel' | 'children'> {
+}
+declare const PersonaAvatar: react.ForwardRefExoticComponent<PersonaAvatarProps & react.RefAttributes<HTMLDivElement>>;
+
+export { Persona, PersonaAvatar, type PersonaAvatarProps, type PersonaProps, type Presence, type PresenceConfig, defaultPresenceOptions };