@saas-ui/react 3.0.0-alpha.4 → 3.0.0-alpha.6

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

@@ -1,231 +1,10 @@
 'use client'
 import {
-  InputGroup
-} from "../../chunk-PKI6YH2V.js";
+  PasswordInput
+} from "../../chunk-QMG6HP7Z.js";
+import "../../chunk-F3CVOMG5.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.js

@@ -1,184 +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
-} 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, jsxs } 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 == 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 });
-});
-
-// 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"
-  }
-};
+  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

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

@@ -1,120 +1,10 @@
 'use client'
-import "../../chunk-KTLWEUNW.js";
 import {
-  CloseIcon,
-  SearchIcon
-} from "../../chunk-VDXTEASE.js";
+  SearchInput
+} from "../../chunk-LIYUBUOP.js";
+import "../../chunk-KTLWEUNW.js";
+import "../../chunk-VDXTEASE.js";
 import "../../chunk-RTMS5TJN.js";
-
-// src/components/search-input/search-input.tsx
-import React, { forwardRef } from "react";
-import {
-  Group,
-  IconButton,
-  Input,
-  InputElement,
-  mergeRefs,
-  useControllableState
-} from "@chakra-ui/react";
-import { callAll } from "@saas-ui/core/utils";
-import { jsx, jsxs } from "react/jsx-runtime";
-var SearchInput = forwardRef(
-  (props, ref) => {
-    const {
-      placeholder = "Search",
-      value: valueProp,
-      defaultValue: defaultValueProp,
-      size,
-      variant,
-      width = "full",
-      icon = /* @__PURE__ */ jsx(SearchIcon, {}),
-      resetIcon,
-      endElement: endElementProp,
-      onChange: onChangeProp,
-      onReset: onResetProp,
-      onKeyDown: onKeyDownProp,
-      disabled,
-      ...inputProps
-    } = props;
-    const inputRef = React.useRef(null);
-    const [value, setValue] = useControllableState({
-      value: valueProp,
-      defaultValue: defaultValueProp
-    });
-    const onChange = React.useCallback(
-      (e) => {
-        setValue(e.target.value);
-      },
-      [setValue]
-    );
-    const onKeyDown = React.useCallback(
-      (event) => {
-        if (event.key === "Escape") {
-          setValue("");
-          onReset();
-        }
-      },
-      [onResetProp, setValue]
-    );
-    const onReset = () => {
-      var _a;
-      setValue("");
-      onResetProp == null ? void 0 : onResetProp();
-      (_a = inputRef.current) == null ? void 0 : _a.focus();
-    };
-    const showReset = value && !props.disabled;
-    const endElement = showReset ? /* @__PURE__ */ jsx(SearchInputResetButton, { size, children: resetIcon }) : endElementProp;
-    return /* @__PURE__ */ jsxs(Group, { width, children: [
-      /* @__PURE__ */ jsx(
-        InputElement,
-        {
-          placement: "start",
-          px: "0",
-          aspectRatio: "9/10",
-          fontSize: size,
-          children: icon
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        Input,
-        {
-          type: "text",
-          placeholder,
-          variant,
-          size,
-          value,
-          disabled,
-          ref: mergeRefs(ref, inputRef),
-          onChange: callAll(onChange, onChangeProp),
-          onKeyDown: callAll(onKeyDown, onKeyDownProp),
-          ps: "calc(var(--input-height) - var(--input-height) / 10)",
-          pe: "calc(var(--input-height) - var(--input-height) / 10)",
-          ...inputProps
-        }
-      ),
-      /* @__PURE__ */ jsx(InputElement, { placement: "end", children: endElement })
-    ] });
-  }
-);
-var SearchInputResetButton = forwardRef(
-  (props, ref) => {
-    const { children = /* @__PURE__ */ jsx(CloseIcon, {}), ...rest } = props;
-    return /* @__PURE__ */ jsx(
-      IconButton,
-      {
-        ref,
-        variant: "ghost",
-        "aria-label": "Reset search",
-        me: "-2",
-        aspectRatio: "square",
-        height: "calc(100% - {spacing.2})",
-        ...rest,
-        children
-      }
-    );
-  }
-);
-SearchInput.displayName = "SearchInput";
 export {
   SearchInput
 };

package/dist/components/segmented-control/index.cjs

@@ -0,0 +1,2 @@
+'use client'
+"use strict";

package/dist/components/segmented-control/index.d.cts

@@ -0,0 +1,2 @@
+
+export {  }

package/dist/components/segmented-control/index.d.ts

@@ -0,0 +1,2 @@
+
+export {  }

package/dist/components/segmented-control/index.js

@@ -0,0 +1,2 @@
+'use client'
+import "../../chunk-CTOVNZVS.js";