@saas-ui/react 3.0.0-next.2 → 3.0.0-next.3

package/dist/chunk-TXIFPX2A.js

@@ -0,0 +1,230 @@
+'use client'
+import {
+  Input,
+  InputGroup
+} from "./chunk-BLSGOJQ7.js";
+import {
+  IconButton
+} from "./chunk-OJZPPAT6.js";
+
+// src/components/password-input/password-input.tsx
+import { forwardRef, useRef } from "react";
+import { 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": "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.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/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/chunk-TYGGMKHU.js

@@ -0,0 +1,177 @@
+'use client'
+import {
+  Avatar
+} from "./chunk-FN7TU5F5.js";
+
+// src/components/persona/persona.tsx
+import * as React2 from "react";
+
+// src/components/persona/persona-primitive.tsx
+import { forwardRef } from "react";
+import {
+  chakra
+} from "@chakra-ui/react";
+import { dataAttr } from "@saas-ui/core/utils";
+
+// src/components/persona/persona.context.ts
+import { createSlotRecipeContext } from "@chakra-ui/react";
+var {
+  useStyles: usePersonaStyles,
+  withProvider,
+  withContext
+} = createSlotRecipeContext({
+  key: "suiPersona"
+});
+
+// src/components/persona/persona-primitive.tsx
+import { jsx } from "react/jsx-runtime";
+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?.[0],
+      icon,
+      loading,
+      onError,
+      src,
+      srcSet,
+      children,
+      ...rest
+    } = props;
+    return /* @__PURE__ */ jsx(Avatar, { ref, ...rest, 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 } 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,
+      fallback,
+      ...rest
+    } = props;
+    return /* @__PURE__ */ jsxs(
+      PersonaRoot,
+      {
+        ref,
+        outOfOffice: isOutOfOffice,
+        presence,
+        size,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx2(
+            PersonaAvatar,
+            {
+              name,
+              size,
+              getInitials,
+              icon,
+              loading,
+              onError,
+              src,
+              srcSet,
+              fallback,
+              children: presence ? /* @__PURE__ */ jsx2(PersonaPresenceBadge, { children: presenceIcon }) : null
+            }
+          ),
+          !hideDetails && /* @__PURE__ */ jsxs(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 });
+});
+
+// src/components/persona/presence.ts
+var defaultPersonaPresenceOptions = {
+  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"
+  }
+};
+
+export {
+  Persona,
+  PersonaAvatar2 as PersonaAvatar,
+  defaultPersonaPresenceOptions
+};

package/dist/chunk-TYMVLD3B.js

@@ -0,0 +1,14 @@
+'use client'
+
+// src/components/color-swatch/index.ts
+import {
+  ColorSwatch,
+  ColorSwatchMix,
+  ColorSwatchPropsProvider
+} from "@chakra-ui/react/color-swatch";
+
+export {
+  ColorSwatch,
+  ColorSwatchMix,
+  ColorSwatchPropsProvider
+};

package/dist/chunk-U23VDAWJ.js

@@ -0,0 +1,143 @@
+'use client'
+import {
+  __export
+} from "./chunk-RTMS5TJN.js";
+
+// src/components/sidebar/sidebar.tsx
+var sidebar_exports = {};
+__export(sidebar_exports, {
+  Backdrop: () => SidebarBackdrop,
+  Body: () => SidebarBody,
+  Context: () => SidebarContext,
+  FlyoutTrigger: () => SidebarFlyoutTrigger,
+  Footer: () => SidebarFooter,
+  Group: () => SidebarGroup,
+  GroupContent: () => SidebarGroupContent,
+  GroupEndElement: () => SidebarGroupEndElement,
+  GroupHeader: () => SidebarGroupHeader,
+  GroupTitle: () => SidebarGroupTitle,
+  Header: () => SidebarHeader,
+  NavButton: () => SidebarNavButton,
+  NavButtonEndElement: () => SidebarNavButtonEndElement,
+  NavItem: () => SidebarNavItem,
+  Provider: () => SidebarProvider,
+  Root: () => SidebarRoot,
+  Track: () => SidebarTrack,
+  Trigger: () => SidebarTrigger
+});
+import { Sidebar, useSidebar } from "@saas-ui/core/sidebar";
+
+// src/components/sidebar/sidebar.context.ts
+import { createSlotRecipeContext } from "@chakra-ui/react";
+var {
+  withContext,
+  useRecipeResult,
+  StylesProvider,
+  ClassNamesProvider,
+  useStyles: useSidebarStyles
+} = createSlotRecipeContext({
+  key: "suiSidebar"
+});
+var {
+  withProvider: withItemProvider,
+  withContext: withItemContext,
+  useStyles: useSidebarItemStyles
+} = createSlotRecipeContext({
+  key: "suiSidebarNavItem"
+});
+
+// src/components/sidebar/sidebar.tsx
+import { jsx } from "react/jsx-runtime";
+var SidebarProvider = function SidebarProvider2(props) {
+  return /* @__PURE__ */ jsx(Sidebar.Provider, { ...props, children: /* @__PURE__ */ jsx(RecipeProvider, { ...props, children: props.children }) });
+};
+function RecipeProvider(props) {
+  const { mode } = useSidebar();
+  const { styles, classNames } = useRecipeResult({
+    ...props,
+    mode
+  });
+  return /* @__PURE__ */ jsx(StylesProvider, { value: styles, children: /* @__PURE__ */ jsx(ClassNamesProvider, { value: classNames, children: props.children }) });
+}
+var SidebarRoot = withContext(
+  Sidebar.Root,
+  "root"
+);
+var SidebarTrigger = withContext(
+  Sidebar.Trigger,
+  "trigger",
+  {
+    forwardAsChild: true
+  }
+);
+var SidebarFlyoutTrigger = withContext(Sidebar.FlyoutTrigger, "flyoutTrigger", {
+  forwardAsChild: true
+});
+var SidebarBackdrop = withContext(
+  Sidebar.Backdrop,
+  "backdrop",
+  {
+    forwardAsChild: true
+  }
+);
+var SidebarHeader = withContext(
+  Sidebar.Header,
+  "header"
+);
+var SidebarBody = withContext(
+  Sidebar.Body,
+  "body"
+);
+var SidebarFooter = withContext(
+  Sidebar.Footer,
+  "footer"
+);
+var SidebarTrack = withContext(
+  Sidebar.Track,
+  "track",
+  {
+    forwardAsChild: true
+  }
+);
+var SidebarGroup = withContext(
+  Sidebar.Group,
+  "group",
+  {
+    defaultProps: {
+      role: "group"
+    }
+  }
+);
+var SidebarGroupHeader = withContext(
+  Sidebar.GroupHeader,
+  "groupHeader"
+);
+var SidebarGroupTitle = withContext(Sidebar.GroupTitle, "groupTitle");
+var SidebarGroupEndElement = withContext(Sidebar.GroupEndElement, "groupEndElement");
+var SidebarGroupContent = withContext(
+  Sidebar.GroupContent,
+  "groupContent"
+);
+var SidebarNavItem = withItemProvider(
+  Sidebar.NavItem,
+  "item"
+);
+var SidebarNavButton = withItemContext(Sidebar.NavButton, "button", {
+  forwardAsChild: true
+});
+var SidebarNavButtonEndElement = withItemContext(Sidebar.NavItemEndElement, "endElement", {
+  defaultProps: {
+    "data-slot": "endElement"
+  }
+});
+var SidebarContext = Sidebar.Context;
+
+// src/components/sidebar/index.ts
+import { useSidebar as useSidebar2 } from "@saas-ui/core/sidebar";
+
+export {
+  useSidebarStyles,
+  useSidebarItemStyles,
+  sidebar_exports,
+  useSidebar2 as useSidebar
+};

package/dist/chunk-U3EPRSD3.js

@@ -0,0 +1,20 @@
+'use client'
+
+// src/components/status/status.tsx
+import { forwardRef } from "react";
+import { Status as ChakraStatus } from "@chakra-ui/react/status";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Status = forwardRef(
+  function Status2(props, ref) {
+    const { children, value, ...rest } = props;
+    const color = value ? `status.${value}` : void 0;
+    return /* @__PURE__ */ jsxs(ChakraStatus.Root, { ref, ...rest, children: [
+      /* @__PURE__ */ jsx(ChakraStatus.Indicator, { bg: color }),
+      children
+    ] });
+  }
+);
+
+export {
+  Status
+};

package/dist/chunk-UAX5344Y.js

@@ -0,0 +1,10 @@
+'use client'
+
+// src/components/spacer/index.ts
+import {
+  Spacer
+} from "@chakra-ui/react/spacer";
+
+export {
+  Spacer
+};

package/dist/chunk-UEXUCHDD.js

@@ -0,0 +1,34 @@
+'use client'
+
+// src/components/skeleton/skeleton.tsx
+import { forwardRef } from "react";
+import { Circle } from "@chakra-ui/react/box";
+import { Skeleton as ChakraSkeleton } from "@chakra-ui/react/skeleton";
+import { Stack } from "@chakra-ui/react/stack";
+import { jsx } from "react/jsx-runtime";
+var SkeletonCircle = (props) => {
+  const { size, ...rest } = props;
+  return /* @__PURE__ */ jsx(Circle, { size, asChild: true, children: /* @__PURE__ */ jsx(ChakraSkeleton, { ...rest }) });
+};
+var SkeletonText = forwardRef(
+  function SkeletonText2(props, ref) {
+    const { noOfLines = 3, gap, ...rest } = props;
+    return /* @__PURE__ */ jsx(Stack, { gap, width: "full", ref, children: Array.from({ length: noOfLines }).map((_, index) => /* @__PURE__ */ jsx(
+      ChakraSkeleton,
+      {
+        height: "4",
+        ...props,
+        _last: { maxW: "80%" },
+        ...rest
+      },
+      index
+    )) });
+  }
+);
+var Skeleton = ChakraSkeleton;
+
+export {
+  SkeletonCircle,
+  SkeletonText,
+  Skeleton
+};

package/dist/chunk-UIP2CHMU.js

@@ -0,0 +1,8 @@
+'use client'
+
+// src/components/checkmark/index.ts
+import { Checkmark } from "@chakra-ui/react/checkmark";
+
+export {
+  Checkmark
+};

package/dist/chunk-UZUMIWPJ.js

@@ -0,0 +1,10 @@
+'use client'
+
+// src/components/portal/index.ts
+import {
+  Portal
+} from "@chakra-ui/react/portal";
+
+export {
+  Portal
+};

package/dist/chunk-WJZED26X.js

@@ -0,0 +1,28 @@
+'use client'
+
+// src/components/tag/tag.tsx
+import { forwardRef } from "react";
+import { Tag as ChakraTag } from "@chakra-ui/react/tag";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Tag = forwardRef(
+  function Tag2(props, ref) {
+    const {
+      startElement,
+      endElement,
+      onClose,
+      closable = !!onClose,
+      children,
+      ...rest
+    } = props;
+    return /* @__PURE__ */ jsxs(ChakraTag.Root, { ref, ...rest, children: [
+      startElement && /* @__PURE__ */ jsx(ChakraTag.StartElement, { children: startElement }),
+      /* @__PURE__ */ jsx(ChakraTag.Label, { children }),
+      endElement && /* @__PURE__ */ jsx(ChakraTag.EndElement, { children: endElement }),
+      closable && /* @__PURE__ */ jsx(ChakraTag.EndElement, { children: /* @__PURE__ */ jsx(ChakraTag.CloseTrigger, { onClick: onClose }) })
+    ] });
+  }
+);
+
+export {
+  Tag
+};

package/dist/chunk-WZUKOJGI.js

@@ -0,0 +1,20 @@
+'use client'
+import {
+  IconButton
+} from "./chunk-OJZPPAT6.js";
+import {
+  CloseIcon
+} from "./chunk-OME35FUG.js";
+
+// src/components/close-button/close-button.tsx
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var CloseButton = forwardRef(
+  function CloseButton2(props, ref) {
+    return /* @__PURE__ */ jsx(IconButton, { variant: "ghost", "aria-label": "Close", ref, ...props, children: props.children ?? /* @__PURE__ */ jsx(CloseIcon, {}) });
+  }
+);
+
+export {
+  CloseButton
+};