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

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

@@ -1,231 +1,9 @@
 'use client'
 import {
-  InputGroup
-} from "../../chunk-PKI6YH2V.js";
+  PasswordInput
+} from "../../chunk-CD2JUFI2.js";
+import "../../chunk-PKI6YH2V.js";
 import "../../chunk-RTMS5TJN.js";
-
-// src/components/password-input/password-input.tsx
-import { forwardRef, useRef } from "react";
-import {
-  IconButton,
-  Input,
-  mergeRefs,
-  useControllableState
-} from "@chakra-ui/react";
-
-// ../../node_modules/react-icons/lib/iconBase.mjs
-import React2 from "react";
-
-// ../../node_modules/react-icons/lib/iconContext.mjs
-import React from "react";
-var DefaultContext = {
-  color: void 0,
-  size: void 0,
-  className: void 0,
-  style: void 0,
-  attr: void 0
-};
-var IconContext = React.createContext && /* @__PURE__ */ React.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__ */ React2.createElement(node.tag, _objectSpread({
-    key: i
-  }, node.attr), Tree2Element(node.child)));
-}
-function GenIcon(data) {
-  return (props) => /* @__PURE__ */ React2.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__ */ React2.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__ */ React2.createElement("title", null, title), props.children);
-  };
-  return IconContext !== void 0 ? /* @__PURE__ */ React2.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/password-input/password-input.tsx
-import { jsx } from "react/jsx-runtime";
-var PasswordInput = forwardRef(
-  function PasswordInput2(props, ref) {
-    const {
-      rootProps,
-      defaultVisible,
-      visible: visibleProp,
-      onVisibleChange,
-      visibilityIcon = { on: /* @__PURE__ */ jsx(LuEye, {}), off: /* @__PURE__ */ jsx(LuEyeOff, {}) },
-      ...rest
-    } = props;
-    const [visible, setVisible] = useControllableState({
-      value: visibleProp,
-      defaultValue: defaultVisible || false,
-      onChange: onVisibleChange
-    });
-    const inputRef = useRef(null);
-    return /* @__PURE__ */ jsx(
-      InputGroup,
-      {
-        width: "full",
-        endElement: /* @__PURE__ */ 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__ */ jsx(
-          Input,
-          {
-            ...rest,
-            ref: mergeRefs(ref, inputRef),
-            type: visible ? "text" : "password"
-          }
-        )
-      }
-    );
-  }
-);
-var VisibilityTrigger = forwardRef(
-  function VisibilityTrigger2(props, ref) {
-    return /* @__PURE__ */ jsx(
-      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
-      }
-    );
-  }
-);
 export {
   PasswordInput
 };

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,27 @@ module.exports = __toCommonJS(persona_exports);
 var React2 = __toESM(require("react"), 1);
 
 // src/components/persona/persona-primitive.tsx
-var import_react = require("react");
-var import_react2 = require("@chakra-ui/react");
+var import_react2 = require("react");
+var import_react3 = require("@chakra-ui/react");
 var import_utils = require("@saas-ui/core/utils");
-var import_jsx_runtime = require("react/jsx-runtime");
+
+// src/components/persona/persona.context.ts
+var import_react = require("@chakra-ui/react");
 var {
   useStyles: usePersonaStyles,
   withProvider,
   withContext
-} = (0, import_react2.createSlotRecipeContext)({
-  key: "persona"
+} = (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_react.forwardRef)((props, ref) => {
+  (0, import_react2.forwardRef)((props, ref) => {
     const { outOfOffice, presence, ...rest } = props;
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_react2.chakra.div,
+      import_react3.chakra.div,
       {
         ref,
         ...rest,
@@ -72,7 +78,7 @@ var PersonaRoot = withProvider(
   }),
   "root"
 );
-var PersonaAvatar = (0, import_react.forwardRef)(
+var PersonaAvatar = (0, import_react2.forwardRef)(
   (props, ref) => {
     const {
       name,
@@ -85,10 +91,10 @@ 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) }),
+    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_react2.Avatar.Image,
+        import_react3.Avatar.Image,
         {
           src,
           srcSet,
@@ -110,8 +116,14 @@ 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");
@@ -174,8 +186,33 @@ 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
+  PersonaAvatar,
+  defaultPresenceOptions
 });

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

@@ -3,7 +3,27 @@ import react__default from 'react';
 import { HTMLChakraProps, SlotRecipeProps, AvatarRootProps, ImageProps } from '@chakra-ui/react';
 
 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'> {
     /**
      * Indicates that a person is out of office. Changes the presence badge style.
      */
@@ -90,4 +110,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

@@ -3,7 +3,27 @@ import react__default from 'react';
 import { HTMLChakraProps, SlotRecipeProps, AvatarRootProps, ImageProps } from '@chakra-ui/react';
 
 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'> {
     /**
      * Indicates that a person is out of office. Changes the presence badge style.
      */
@@ -90,4 +110,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,12 @@
 '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-M7FOBCOV.js";
+import "../../chunk-RTMS5TJN.js";
 export {
   Persona,
-  PersonaAvatar2 as PersonaAvatar
+  PersonaAvatar,
+  defaultPresenceOptions
 };

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

@@ -1,26 +1,8 @@
 'use client'
+import {
+  PinInput
+} from "../../chunk-2EUACKRH.js";
 import "../../chunk-RTMS5TJN.js";
-
-// src/components/pin-input/pin-input.tsx
-import { forwardRef } from "react";
-import { PinInput as ChakraPinInput, Group } from "@chakra-ui/react";
-import { jsx, jsxs } from "react/jsx-runtime";
-var PinInput = forwardRef(
-  function PinInput2(props, ref) {
-    const {
-      pinLength = 4,
-      inputProps,
-      rootRef,
-      attached,
-      gap = attached ? 0 : 2,
-      ...rest
-    } = props;
-    return /* @__PURE__ */ jsxs(ChakraPinInput.Root, { ref: rootRef, ...rest, children: [
-      /* @__PURE__ */ jsx(ChakraPinInput.HiddenInput, { ref, ...inputProps }),
-      /* @__PURE__ */ jsx(ChakraPinInput.Control, { children: /* @__PURE__ */ jsx(Group, { attached, gap, children: Array.from({ length: pinLength }).map((_, index) => /* @__PURE__ */ jsx(ChakraPinInput.Input, { index }, index)) }) })
-    ] });
-  }
-);
 export {
   PinInput
 };

package/dist/components/radio/index.js

@@ -1,21 +1,9 @@
 'use client'
+import {
+  Radio,
+  RadioGroup
+} from "../../chunk-WYLMBMAH.js";
 import "../../chunk-RTMS5TJN.js";
-
-// src/components/radio/radio.tsx
-import { forwardRef } from "react";
-import { RadioGroup as ChakraRadioGroup } from "@chakra-ui/react";
-import { jsx, jsxs } from "react/jsx-runtime";
-var Radio = forwardRef(
-  function Radio2(props, ref) {
-    const { children, inputProps, rootRef, ...rest } = props;
-    return /* @__PURE__ */ jsxs(ChakraRadioGroup.Item, { ref: rootRef, ...rest, children: [
-      /* @__PURE__ */ jsx(ChakraRadioGroup.ItemHiddenInput, { ref, ...inputProps }),
-      /* @__PURE__ */ jsx(ChakraRadioGroup.ItemIndicator, {}),
-      children && /* @__PURE__ */ jsx(ChakraRadioGroup.ItemText, { children })
-    ] });
-  }
-);
-var RadioGroup = ChakraRadioGroup.Root;
 export {
   Radio,
   RadioGroup