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

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,231 @@
+'use client'
+import {
+  InputGroup
+} from "../../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
+};