@fanvue/ui 1.2.1 → 1.3.0

package/dist/cjs/components/Icons/EyeClosedIcon.cjs

@@ -0,0 +1,49 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const cn = require("../../utils/cn.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const EyeClosedIcon = React__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      ref,
+      viewBox: "0 0 20 20",
+      fill: "none",
+      "aria-hidden": "true",
+      className: cn.cn("size-5", className),
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M8.233 8.233A2.5 2.5 0 1 0 11.767 11.767M8.233 8.233 2.5 2.5M8.233 8.233 11.767 11.767M11.767 11.767 17.5 17.5M14.95 14.95c1.55-1.217 2.55-2.95 2.55-4.95 0-1.667-3.333-5.833-7.5-5.833-1.333 0-2.617.5-3.717 1.217M5.05 5.05C3.5 6.267 2.5 8 2.5 10c0 1.667 3.333 5.833 7.5 5.833 1.333 0 2.617-.5 3.717-1.217",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  )
+);
+EyeClosedIcon.displayName = "EyeClosedIcon";
+exports.EyeClosedIcon = EyeClosedIcon;
+//# sourceMappingURL=EyeClosedIcon.cjs.map

package/dist/cjs/components/Icons/EyeClosedIcon.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"EyeClosedIcon.cjs","sources":["../../../../src/components/Icons/EyeClosedIcon.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport type { IconProps } from \"./types\";\n\n/** A closed eye icon for visibility/show actions (20 × 20). */\nexport const EyeClosedIcon = React.forwardRef<SVGSVGElement, IconProps>(\n  ({ className, ...props }, ref) => (\n    <svg\n      ref={ref}\n      viewBox=\"0 0 20 20\"\n      fill=\"none\"\n      aria-hidden=\"true\"\n      className={cn(\"size-5\", className)}\n      {...props}\n    >\n      <path\n        d=\"M8.233 8.233A2.5 2.5 0 1 0 11.767 11.767M8.233 8.233 2.5 2.5M8.233 8.233 11.767 11.767M11.767 11.767 17.5 17.5M14.95 14.95c1.55-1.217 2.55-2.95 2.55-4.95 0-1.667-3.333-5.833-7.5-5.833-1.333 0-2.617.5-3.717 1.217M5.05 5.05C3.5 6.267 2.5 8 2.5 10c0 1.667 3.333 5.833 7.5 5.833 1.333 0 2.617-.5 3.717-1.217\"\n        stroke=\"currentColor\"\n        strokeWidth=\"1.5\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  ),\n);\n\nEyeClosedIcon.displayName = \"EyeClosedIcon\";\n"],"names":["React","jsx","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAKO,MAAM,gBAAgBA,iBAAM;AAAA,EACjC,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QACxBC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,eAAY;AAAA,MACZ,WAAWC,GAAAA,GAAG,UAAU,SAAS;AAAA,MAChC,GAAG;AAAA,MAEJ,UAAAD,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,GAAE;AAAA,UACF,QAAO;AAAA,UACP,aAAY;AAAA,UACZ,eAAc;AAAA,UACd,gBAAe;AAAA,QAAA;AAAA,MAAA;AAAA,IACjB;AAAA,EAAA;AAGN;AAEA,cAAc,cAAc;;"}

package/dist/cjs/components/PasswordField/PasswordField.cjs

@@ -0,0 +1,59 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const EyeClosedIcon = require("../Icons/EyeClosedIcon.cjs");
+const EyeIcon = require("../Icons/EyeIcon.cjs");
+const TextField = require("../TextField/TextField.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const PasswordField = React__namespace.forwardRef(
+  ({ disabled, ...props }, ref) => {
+    const [showPassword, setShowPassword] = React__namespace.useState(false);
+    const togglePasswordVisibility = () => {
+      setShowPassword((prev) => !prev);
+    };
+    const rightIcon = /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        onClick: togglePasswordVisibility,
+        disabled,
+        "aria-label": showPassword ? "Hide password" : "Show password",
+        tabIndex: -1,
+        className: "flex size-5 shrink-0 items-center justify-center text-body-200 transition-colors hover:text-body-100 focus:outline-none disabled:cursor-not-allowed",
+        children: showPassword ? /* @__PURE__ */ jsxRuntime.jsx(EyeClosedIcon.EyeClosedIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(EyeIcon.EyeIcon, {})
+      }
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      TextField.TextField,
+      {
+        ref,
+        type: showPassword ? "text" : "password",
+        disabled,
+        rightIcon,
+        "aria-label": !props.label ? "Password field" : void 0,
+        ...props
+      }
+    );
+  }
+);
+PasswordField.displayName = "PasswordField";
+exports.PasswordField = PasswordField;
+//# sourceMappingURL=PasswordField.cjs.map

package/dist/cjs/components/PasswordField/PasswordField.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PasswordField.cjs","sources":["../../../../src/components/PasswordField/PasswordField.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { EyeClosedIcon } from \"../Icons/EyeClosedIcon\";\nimport { EyeIcon } from \"../Icons/EyeIcon\";\nimport { TextField, type TextFieldProps } from \"../TextField/TextField\";\n\nexport type PasswordFieldSize = \"48\" | \"40\" | \"32\";\n\nexport interface PasswordFieldProps extends Omit<TextFieldProps, \"type\" | \"rightIcon\"> {\n  /** Size variant of the password field */\n  size?: PasswordFieldSize;\n}\n\nexport const PasswordField = React.forwardRef<HTMLInputElement, PasswordFieldProps>(\n  ({ disabled, ...props }, ref) => {\n    const [showPassword, setShowPassword] = React.useState(false);\n\n    const togglePasswordVisibility = () => {\n      setShowPassword((prev) => !prev);\n    };\n\n    const rightIcon = (\n      <button\n        type=\"button\"\n        onClick={togglePasswordVisibility}\n        disabled={disabled}\n        aria-label={showPassword ? \"Hide password\" : \"Show password\"}\n        tabIndex={-1}\n        className=\"flex size-5 shrink-0 items-center justify-center text-body-200 transition-colors hover:text-body-100 focus:outline-none disabled:cursor-not-allowed\"\n      >\n        {showPassword ? <EyeClosedIcon /> : <EyeIcon />}\n      </button>\n    );\n\n    return (\n      <TextField\n        ref={ref}\n        type={showPassword ? \"text\" : \"password\"}\n        disabled={disabled}\n        rightIcon={rightIcon}\n        aria-label={!props.label ? \"Password field\" : undefined}\n        {...props}\n      />\n    );\n  },\n);\n\nPasswordField.displayName = \"PasswordField\";\n"],"names":["React","jsx","EyeClosedIcon","EyeIcon","TextField"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAYO,MAAM,gBAAgBA,iBAAM;AAAA,EACjC,CAAC,EAAE,UAAU,GAAG,MAAA,GAAS,QAAQ;AAC/B,UAAM,CAAC,cAAc,eAAe,IAAIA,iBAAM,SAAS,KAAK;AAE5D,UAAM,2BAA2B,MAAM;AACrC,sBAAgB,CAAC,SAAS,CAAC,IAAI;AAAA,IACjC;AAEA,UAAM,YACJC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS;AAAA,QACT;AAAA,QACA,cAAY,eAAe,kBAAkB;AAAA,QAC7C,UAAU;AAAA,QACV,WAAU;AAAA,QAET,UAAA,eAAeA,+BAACC,cAAAA,eAAA,CAAA,CAAc,mCAAMC,QAAAA,SAAA,CAAA,CAAQ;AAAA,MAAA;AAAA,IAAA;AAIjD,WACEF,2BAAAA;AAAAA,MAACG,UAAAA;AAAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAM,eAAe,SAAS;AAAA,QAC9B;AAAA,QACA;AAAA,QACA,cAAY,CAAC,MAAM,QAAQ,mBAAmB;AAAA,QAC7C,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AAEA,cAAc,cAAc;;"}

package/dist/cjs/index.cjs

@@ -22,6 +22,7 @@ const CrossIcon = require("./components/Icons/CrossIcon.cjs");
 const CrownIcon = require("./components/Icons/CrownIcon.cjs");
 const ErrorCircleIcon = require("./components/Icons/ErrorCircleIcon.cjs");
 const ErrorIcon = require("./components/Icons/ErrorIcon.cjs");
+const EyeClosedIcon = require("./components/Icons/EyeClosedIcon.cjs");
 const EyeIcon = require("./components/Icons/EyeIcon.cjs");
 const FireIcon = require("./components/Icons/FireIcon.cjs");
 const HomeIcon = require("./components/Icons/HomeIcon.cjs");
@@ -38,6 +39,7 @@ const WarningIcon = require("./components/Icons/WarningIcon.cjs");
 const WarningTriangleIcon = require("./components/Icons/WarningTriangleIcon.cjs");
 const Logo = require("./components/Logo/Logo.cjs");
 const Pagination = require("./components/Pagination/Pagination.cjs");
+const PasswordField = require("./components/PasswordField/PasswordField.cjs");
 const Pill = require("./components/Pill/Pill.cjs");
 const ProgressBar = require("./components/ProgressBar/ProgressBar.cjs");
 const Radio = require("./components/Radio/Radio.cjs");
@@ -79,6 +81,7 @@ exports.CrossIcon = CrossIcon.CrossIcon;
 exports.CrownIcon = CrownIcon.CrownIcon;
 exports.ErrorCircleIcon = ErrorCircleIcon.ErrorCircleIcon;
 exports.ErrorIcon = ErrorIcon.ErrorIcon;
+exports.EyeClosedIcon = EyeClosedIcon.EyeClosedIcon;
 exports.EyeIcon = EyeIcon.EyeIcon;
 exports.FireIcon = FireIcon.FireIcon;
 exports.HomeIcon = HomeIcon.HomeIcon;
@@ -95,6 +98,7 @@ exports.WarningIcon = WarningIcon.WarningIcon;
 exports.WarningTriangleIcon = WarningTriangleIcon.WarningTriangleIcon;
 exports.Logo = Logo.Logo;
 exports.Pagination = Pagination.Pagination;
+exports.PasswordField = PasswordField.PasswordField;
 exports.Pill = Pill.Pill;
 exports.ProgressBar = ProgressBar.ProgressBar;
 exports.Radio = Radio.Radio;

package/dist/cjs/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/Icons/EyeClosedIcon.mjs

@@ -0,0 +1,32 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.mjs";
+const EyeClosedIcon = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "svg",
+    {
+      ref,
+      viewBox: "0 0 20 20",
+      fill: "none",
+      "aria-hidden": "true",
+      className: cn("size-5", className),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M8.233 8.233A2.5 2.5 0 1 0 11.767 11.767M8.233 8.233 2.5 2.5M8.233 8.233 11.767 11.767M11.767 11.767 17.5 17.5M14.95 14.95c1.55-1.217 2.55-2.95 2.55-4.95 0-1.667-3.333-5.833-7.5-5.833-1.333 0-2.617.5-3.717 1.217M5.05 5.05C3.5 6.267 2.5 8 2.5 10c0 1.667 3.333 5.833 7.5 5.833 1.333 0 2.617-.5 3.717-1.217",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  )
+);
+EyeClosedIcon.displayName = "EyeClosedIcon";
+export {
+  EyeClosedIcon
+};
+//# sourceMappingURL=EyeClosedIcon.mjs.map

package/dist/components/Icons/EyeClosedIcon.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"EyeClosedIcon.mjs","sources":["../../../src/components/Icons/EyeClosedIcon.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport type { IconProps } from \"./types\";\n\n/** A closed eye icon for visibility/show actions (20 × 20). */\nexport const EyeClosedIcon = React.forwardRef<SVGSVGElement, IconProps>(\n  ({ className, ...props }, ref) => (\n    <svg\n      ref={ref}\n      viewBox=\"0 0 20 20\"\n      fill=\"none\"\n      aria-hidden=\"true\"\n      className={cn(\"size-5\", className)}\n      {...props}\n    >\n      <path\n        d=\"M8.233 8.233A2.5 2.5 0 1 0 11.767 11.767M8.233 8.233 2.5 2.5M8.233 8.233 11.767 11.767M11.767 11.767 17.5 17.5M14.95 14.95c1.55-1.217 2.55-2.95 2.55-4.95 0-1.667-3.333-5.833-7.5-5.833-1.333 0-2.617.5-3.717 1.217M5.05 5.05C3.5 6.267 2.5 8 2.5 10c0 1.667 3.333 5.833 7.5 5.833 1.333 0 2.617-.5 3.717-1.217\"\n        stroke=\"currentColor\"\n        strokeWidth=\"1.5\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  ),\n);\n\nEyeClosedIcon.displayName = \"EyeClosedIcon\";\n"],"names":[],"mappings":";;;;AAKO,MAAM,gBAAgB,MAAM;AAAA,EACjC,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QACxB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,eAAY;AAAA,MACZ,WAAW,GAAG,UAAU,SAAS;AAAA,MAChC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,GAAE;AAAA,UACF,QAAO;AAAA,UACP,aAAY;AAAA,UACZ,eAAc;AAAA,UACd,gBAAe;AAAA,QAAA;AAAA,MAAA;AAAA,IACjB;AAAA,EAAA;AAGN;AAEA,cAAc,cAAc;"}

package/dist/components/PasswordField/PasswordField.mjs

@@ -0,0 +1,42 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { EyeClosedIcon } from "../Icons/EyeClosedIcon.mjs";
+import { EyeIcon } from "../Icons/EyeIcon.mjs";
+import { TextField } from "../TextField/TextField.mjs";
+const PasswordField = React.forwardRef(
+  ({ disabled, ...props }, ref) => {
+    const [showPassword, setShowPassword] = React.useState(false);
+    const togglePasswordVisibility = () => {
+      setShowPassword((prev) => !prev);
+    };
+    const rightIcon = /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: togglePasswordVisibility,
+        disabled,
+        "aria-label": showPassword ? "Hide password" : "Show password",
+        tabIndex: -1,
+        className: "flex size-5 shrink-0 items-center justify-center text-body-200 transition-colors hover:text-body-100 focus:outline-none disabled:cursor-not-allowed",
+        children: showPassword ? /* @__PURE__ */ jsx(EyeClosedIcon, {}) : /* @__PURE__ */ jsx(EyeIcon, {})
+      }
+    );
+    return /* @__PURE__ */ jsx(
+      TextField,
+      {
+        ref,
+        type: showPassword ? "text" : "password",
+        disabled,
+        rightIcon,
+        "aria-label": !props.label ? "Password field" : void 0,
+        ...props
+      }
+    );
+  }
+);
+PasswordField.displayName = "PasswordField";
+export {
+  PasswordField
+};
+//# sourceMappingURL=PasswordField.mjs.map

package/dist/components/PasswordField/PasswordField.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PasswordField.mjs","sources":["../../../src/components/PasswordField/PasswordField.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { EyeClosedIcon } from \"../Icons/EyeClosedIcon\";\nimport { EyeIcon } from \"../Icons/EyeIcon\";\nimport { TextField, type TextFieldProps } from \"../TextField/TextField\";\n\nexport type PasswordFieldSize = \"48\" | \"40\" | \"32\";\n\nexport interface PasswordFieldProps extends Omit<TextFieldProps, \"type\" | \"rightIcon\"> {\n  /** Size variant of the password field */\n  size?: PasswordFieldSize;\n}\n\nexport const PasswordField = React.forwardRef<HTMLInputElement, PasswordFieldProps>(\n  ({ disabled, ...props }, ref) => {\n    const [showPassword, setShowPassword] = React.useState(false);\n\n    const togglePasswordVisibility = () => {\n      setShowPassword((prev) => !prev);\n    };\n\n    const rightIcon = (\n      <button\n        type=\"button\"\n        onClick={togglePasswordVisibility}\n        disabled={disabled}\n        aria-label={showPassword ? \"Hide password\" : \"Show password\"}\n        tabIndex={-1}\n        className=\"flex size-5 shrink-0 items-center justify-center text-body-200 transition-colors hover:text-body-100 focus:outline-none disabled:cursor-not-allowed\"\n      >\n        {showPassword ? <EyeClosedIcon /> : <EyeIcon />}\n      </button>\n    );\n\n    return (\n      <TextField\n        ref={ref}\n        type={showPassword ? \"text\" : \"password\"}\n        disabled={disabled}\n        rightIcon={rightIcon}\n        aria-label={!props.label ? \"Password field\" : undefined}\n        {...props}\n      />\n    );\n  },\n);\n\nPasswordField.displayName = \"PasswordField\";\n"],"names":[],"mappings":";;;;;;AAYO,MAAM,gBAAgB,MAAM;AAAA,EACjC,CAAC,EAAE,UAAU,GAAG,MAAA,GAAS,QAAQ;AAC/B,UAAM,CAAC,cAAc,eAAe,IAAI,MAAM,SAAS,KAAK;AAE5D,UAAM,2BAA2B,MAAM;AACrC,sBAAgB,CAAC,SAAS,CAAC,IAAI;AAAA,IACjC;AAEA,UAAM,YACJ;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS;AAAA,QACT;AAAA,QACA,cAAY,eAAe,kBAAkB;AAAA,QAC7C,UAAU;AAAA,QACV,WAAU;AAAA,QAET,UAAA,eAAe,oBAAC,eAAA,CAAA,CAAc,wBAAM,SAAA,CAAA,CAAQ;AAAA,MAAA;AAAA,IAAA;AAIjD,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAM,eAAe,SAAS;AAAA,QAC9B;AAAA,QACA;AAAA,QACA,cAAY,CAAC,MAAM,QAAQ,mBAAmB;AAAA,QAC7C,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AAEA,cAAc,cAAc;"}

package/dist/index.d.ts

@@ -390,6 +390,11 @@ export declare const ErrorIcon: default_2.ForwardRefExoticComponent<default_2.SV
     className?: string;
 } & default_2.RefAttributes<SVGSVGElement>>;
 
+/** A closed eye icon for visibility/show actions (20 × 20). */
+export declare const EyeClosedIcon: React_2.ForwardRefExoticComponent<React_2.SVGAttributes<SVGSVGElement> & {
+    className?: string;
+} & React_2.RefAttributes<SVGSVGElement>>;
+
 /** An eye icon for visibility/show actions (20 × 20). */
 export declare const EyeIcon: React_2.ForwardRefExoticComponent<React_2.SVGAttributes<SVGSVGElement> & {
     className?: string;
@@ -544,6 +549,15 @@ export declare interface PaginationProps extends Omit<React_2.HTMLAttributes<HTM
 /** Pagination display style — numbered buttons or minimal dots. */
 export declare type PaginationVariant = "default" | "dots";
 
+export declare const PasswordField: React_2.ForwardRefExoticComponent<PasswordFieldProps & React_2.RefAttributes<HTMLInputElement>>;
+
+export declare interface PasswordFieldProps extends Omit<TextFieldProps, "type" | "rightIcon"> {
+    /** Size variant of the password field */
+    size?: PasswordFieldSize;
+}
+
+export declare type PasswordFieldSize = "48" | "40" | "32";
+
 /**
  * A small rounded label for categorisation, status, or tagging.
  *

package/dist/index.mjs

@@ -20,6 +20,7 @@ import { CrossIcon } from "./components/Icons/CrossIcon.mjs";
 import { CrownIcon } from "./components/Icons/CrownIcon.mjs";
 import { ErrorCircleIcon } from "./components/Icons/ErrorCircleIcon.mjs";
 import { ErrorIcon } from "./components/Icons/ErrorIcon.mjs";
+import { EyeClosedIcon } from "./components/Icons/EyeClosedIcon.mjs";
 import { EyeIcon } from "./components/Icons/EyeIcon.mjs";
 import { FireIcon } from "./components/Icons/FireIcon.mjs";
 import { HomeIcon } from "./components/Icons/HomeIcon.mjs";
@@ -36,6 +37,7 @@ import { WarningIcon } from "./components/Icons/WarningIcon.mjs";
 import { WarningTriangleIcon } from "./components/Icons/WarningTriangleIcon.mjs";
 import { Logo } from "./components/Logo/Logo.mjs";
 import { Pagination } from "./components/Pagination/Pagination.mjs";
+import { PasswordField } from "./components/PasswordField/PasswordField.mjs";
 import { Pill } from "./components/Pill/Pill.mjs";
 import { ProgressBar } from "./components/ProgressBar/ProgressBar.mjs";
 import { Radio } from "./components/Radio/Radio.mjs";
@@ -77,6 +79,7 @@ export {
   Divider,
   ErrorCircleIcon,
   ErrorIcon,
+  EyeClosedIcon,
   EyeIcon,
   FireIcon,
   HomeIcon,
@@ -87,6 +90,7 @@ export {
   MicrophoneIcon,
   MinusIcon,
   Pagination,
+  PasswordField,
   Pill,
   PlusIcon,
   ProgressBar,

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/styles/theme.css

@@ -9,6 +9,9 @@
 }
 
 @theme {
+  --breakpoint-sm: 850px;
+  --breakpoint-md: 1280px;
+
   --shadow-background-blur: 0 0 0 2px var(--color-background-inverse-solid), 0 0 0 4px var(--color-brand-purple-500);
   --shadow-focus-ring: 0 0 0 2px var(--color-background-inverse-solid), 0 0 0 4px var(--color-brand-purple-500);
   --color-primary-50: var(--color-primary-50);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fanvue/ui",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "description": "React component library built with Tailwind CSS for Fanvue ecosystem",
   "publishConfig": {
     "registry": "https://registry.npmjs.org",
@@ -111,6 +111,7 @@
     "react": "19.2.3",
     "react-day-picker": "9.13.1",
     "react-dom": "19.2.3",
+    "remark-gfm": "4.0.1",
     "size-limit": "12.0.0",
     "storybook": "10.2.3",
     "style-dictionary": "4.2.0",