@virastack/password 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026-present Ömer Gülçiçek (ViraStack)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,66 @@
+<div align="center">
+  <img src="./public/password.jpg" alt="Vira Stack Password" />
+</div>
+
+<br />
+
+<div align="center">
+  <a href="https://www.npmjs.com/package/@virastack/password">
+    <img src="https://img.shields.io/npm/v/@virastack/password" alt="npm version" />
+  </a>
+  <a href="https://www.npmjs.com/package/@virastack/password">
+    <img src="https://img.shields.io/npm/dt/@virastack/password" alt="npm downloads" />
+  </a>
+  <a href="https://bundlephobia.com/package/@virastack/password">
+    <img src="https://img.shields.io/bundlephobia/minzip/@virastack/password" alt="bundle size" />
+  </a>
+</div>
+
+<br />
+
+# ViraStack Password Toggle
+
+Fully accessible and customizable password visibility hook for React.
+
+- ♿ **Accessibility First:** Fully ARIA compliant out of the box for better screen reader support.
+- 🧩 **Framework Agnostic:** Logic is separated from React state, making it adaptable and clean.
+- 🎨 **Smart Defaults:** Includes minimal SVG icons by default, so you can start using it immediately.
+- 🔄 **Prop Merging:** Safely merges user props with hook-generated props to prevent overrides.
+- 🔒 **State Sync:** Automatically handles `disabled` and `readOnly` states for a consistent UX.
+
+### [Read the docs →](https://virastack.com/password/)
+
+## Quick Start
+
+```bash
+npm install @virastack/password
+```
+
+```tsx
+import { useViraPassword } from '@virastack/password';
+
+function App() {
+  const { inputProps, btnProps } = useViraPassword();
+
+  return (
+    <div>
+      <input {...inputProps} placeholder="Enter password" />
+      <button {...btnProps} />
+    </div>
+  );
+}
+```
+
+## Explore the ViraStack Ecosystem
+
+Discover all ViraStack tools, libraries, and boilerplates at [**virastack.com**](https://virastack.com).
+
+## License
+
+Licensed under the <a href="https://github.com/virastack/password/blob/main/LICENSE">MIT License</a>.
+
+## Maintainer
+
+A project by [**Ömer Gülçiçek**](https://omergulcicek.com)
+
+[![Follow Ömer Gülçiçek](https://img.shields.io/github/followers/omergulcicek?label=Follow&style=social)](https://github.com/omergulcicek)

package/dist/index.d.mts

@@ -0,0 +1,73 @@
+import React, { ReactNode } from 'react';
+
+/**
+ * Generates the input type based on visibility.
+ */
+declare const getInputType: (isVisible: boolean) => "text" | "password";
+/**
+ * Generates ARIA attributes for the toggle button.
+ */
+declare const getButtonAriaAttributes: (isVisible: boolean, inputId: string, label?: string) => {
+    'aria-label': string;
+    'aria-pressed': boolean;
+    'aria-controls': string;
+    type: "button";
+};
+/**
+ * Generates ARIA attributes for the input field.
+ */
+declare const getInputAriaAttributes: (isInvalid?: boolean, describedBy?: string) => Record<string, any>;
+
+interface UseViraPasswordOptions {
+    /**
+     * Initial visibility state of the password.
+     * @default false
+     */
+    defaultVisible?: boolean;
+    /**
+     * Custom icons for show/hide states.
+     */
+    icons?: {
+        show: ReactNode;
+        hide: ReactNode;
+    };
+    /**
+     * Whether the input is disabled.
+     * If true, the toggle button will also be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Whether the input is read-only.
+     * If true, the toggle button will be disabled.
+     */
+    readOnly?: boolean;
+    /**
+     * ID for the input element. If not provided, a random ID will be generated.
+     */
+    id?: string;
+    /**
+     * Props to be merged with the generated input props.
+     */
+    inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+    /**
+     * Props to be merged with the generated button props.
+     */
+    btnProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;
+}
+interface UseViraPasswordResult {
+    inputProps: React.InputHTMLAttributes<HTMLInputElement>;
+    btnProps: React.ButtonHTMLAttributes<HTMLButtonElement>;
+    isVisible: boolean;
+    toggle: () => void;
+    setVisible: (visible: boolean) => void;
+}
+/**
+ * A utility to merge event handlers and other props.
+ */
+declare const mergeProps: <T extends Record<string, any>>(...args: (T | undefined)[]) => T;
+declare const useViraPassword: (options?: UseViraPasswordOptions) => UseViraPasswordResult;
+
+declare const EyeIcon: (props: React.SVGProps<SVGSVGElement>) => React.ReactSVGElement;
+declare const EyeOffIcon: (props: React.SVGProps<SVGSVGElement>) => React.ReactSVGElement;
+
+export { EyeIcon, EyeOffIcon, type UseViraPasswordOptions, type UseViraPasswordResult, getButtonAriaAttributes, getInputAriaAttributes, getInputType, mergeProps, useViraPassword };

package/dist/index.d.ts

@@ -0,0 +1,73 @@
+import React, { ReactNode } from 'react';
+
+/**
+ * Generates the input type based on visibility.
+ */
+declare const getInputType: (isVisible: boolean) => "text" | "password";
+/**
+ * Generates ARIA attributes for the toggle button.
+ */
+declare const getButtonAriaAttributes: (isVisible: boolean, inputId: string, label?: string) => {
+    'aria-label': string;
+    'aria-pressed': boolean;
+    'aria-controls': string;
+    type: "button";
+};
+/**
+ * Generates ARIA attributes for the input field.
+ */
+declare const getInputAriaAttributes: (isInvalid?: boolean, describedBy?: string) => Record<string, any>;
+
+interface UseViraPasswordOptions {
+    /**
+     * Initial visibility state of the password.
+     * @default false
+     */
+    defaultVisible?: boolean;
+    /**
+     * Custom icons for show/hide states.
+     */
+    icons?: {
+        show: ReactNode;
+        hide: ReactNode;
+    };
+    /**
+     * Whether the input is disabled.
+     * If true, the toggle button will also be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Whether the input is read-only.
+     * If true, the toggle button will be disabled.
+     */
+    readOnly?: boolean;
+    /**
+     * ID for the input element. If not provided, a random ID will be generated.
+     */
+    id?: string;
+    /**
+     * Props to be merged with the generated input props.
+     */
+    inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+    /**
+     * Props to be merged with the generated button props.
+     */
+    btnProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;
+}
+interface UseViraPasswordResult {
+    inputProps: React.InputHTMLAttributes<HTMLInputElement>;
+    btnProps: React.ButtonHTMLAttributes<HTMLButtonElement>;
+    isVisible: boolean;
+    toggle: () => void;
+    setVisible: (visible: boolean) => void;
+}
+/**
+ * A utility to merge event handlers and other props.
+ */
+declare const mergeProps: <T extends Record<string, any>>(...args: (T | undefined)[]) => T;
+declare const useViraPassword: (options?: UseViraPasswordOptions) => UseViraPasswordResult;
+
+declare const EyeIcon: (props: React.SVGProps<SVGSVGElement>) => React.ReactSVGElement;
+declare const EyeOffIcon: (props: React.SVGProps<SVGSVGElement>) => React.ReactSVGElement;
+
+export { EyeIcon, EyeOffIcon, type UseViraPasswordOptions, type UseViraPasswordResult, getButtonAriaAttributes, getInputAriaAttributes, getInputType, mergeProps, useViraPassword };

package/dist/index.js

@@ -0,0 +1,146 @@
+"use client";
+'use strict';
+
+var React = require('react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+// src/core/logic.ts
+var getInputType = (isVisible) => {
+  return isVisible ? "text" : "password";
+};
+var getButtonAriaAttributes = (isVisible, inputId, label = "Toggle password visibility") => {
+  return {
+    "aria-label": label,
+    "aria-pressed": isVisible,
+    "aria-controls": inputId,
+    type: "button"
+  };
+};
+var getInputAriaAttributes = (isInvalid, describedBy) => {
+  const attrs = {};
+  if (isInvalid !== void 0) {
+    attrs["aria-invalid"] = isInvalid;
+  }
+  if (describedBy) {
+    attrs["aria-describedby"] = describedBy;
+  }
+  return attrs;
+};
+var EyeIcon = (props) => React__default.default.createElement(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "16",
+    height: "16",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    ...props
+  },
+  React__default.default.createElement("path", { 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" }),
+  React__default.default.createElement("circle", { cx: "12", cy: "12", r: "3" })
+);
+var EyeOffIcon = (props) => React__default.default.createElement(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "16",
+    height: "16",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    ...props
+  },
+  React__default.default.createElement("path", { 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" }),
+  React__default.default.createElement("path", { d: "M14.084 14.158a3 3 0 0 1-4.242-4.242" }),
+  React__default.default.createElement("path", { 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" }),
+  React__default.default.createElement("path", { d: "m2 2 20 20" })
+);
+
+// src/react/useViraPassword.ts
+var mergeProps = (...args) => {
+  const result = {};
+  for (const props of args) {
+    if (!props) continue;
+    for (const key in props) {
+      const val = props[key];
+      const existing = result[key];
+      if (key.startsWith("on") && typeof val === "function" && typeof existing === "function") {
+        result[key] = (...args2) => {
+          existing(...args2);
+          val(...args2);
+        };
+      } else if (key === "className" && typeof val === "string" && typeof existing === "string") {
+        result[key] = [existing, val].filter(Boolean).join(" ");
+      } else {
+        result[key] = val;
+      }
+    }
+  }
+  return result;
+};
+var useViraPassword = (options = {}) => {
+  const {
+    defaultVisible = false,
+    icons,
+    disabled = false,
+    readOnly = false,
+    id: providedId,
+    inputProps: userInputProps,
+    btnProps: userBtnProps
+  } = options;
+  const [isVisible, setIsVisible] = React.useState(defaultVisible);
+  const generatedId = React.useId();
+  const inputId = providedId || `virapassword-input-${generatedId}`;
+  const toggle = React.useCallback(() => {
+    if (disabled || readOnly) return;
+    setIsVisible((prev) => !prev);
+  }, [disabled, readOnly]);
+  const setVisible = React.useCallback((visible) => {
+    if (disabled || readOnly) return;
+    setIsVisible(visible);
+  }, [disabled, readOnly]);
+  const showIcon = icons?.show ?? React__default.default.createElement(EyeIcon);
+  const hideIcon = icons?.hide ?? React__default.default.createElement(EyeOffIcon);
+  const baseInputProps = {
+    id: inputId,
+    type: getInputType(isVisible),
+    disabled,
+    readOnly,
+    ...getInputAriaAttributes()
+  };
+  const baseBtnProps = {
+    onClick: toggle,
+    disabled: disabled || readOnly,
+    children: isVisible ? hideIcon : showIcon,
+    ...getButtonAriaAttributes(isVisible, inputId)
+  };
+  const mergedInputProps = mergeProps(baseInputProps, userInputProps);
+  const mergedBtnProps = mergeProps(baseBtnProps, userBtnProps);
+  return {
+    inputProps: mergedInputProps,
+    btnProps: mergedBtnProps,
+    isVisible,
+    toggle,
+    setVisible
+  };
+};
+
+exports.EyeIcon = EyeIcon;
+exports.EyeOffIcon = EyeOffIcon;
+exports.getButtonAriaAttributes = getButtonAriaAttributes;
+exports.getInputAriaAttributes = getInputAriaAttributes;
+exports.getInputType = getInputType;
+exports.mergeProps = mergeProps;
+exports.useViraPassword = useViraPassword;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/core/logic.ts","../src/icons/index.ts","../src/react/useViraPassword.ts"],"names":["React","args","useState","useId","useCallback"],"mappings":";;;;;;;;;AAGO,IAAM,YAAA,GAAe,CAAC,SAAA,KAA4C;AACvE,EAAA,OAAO,YAAY,MAAA,GAAS,UAAA;AAC9B;AAKO,IAAM,uBAAA,GAA0B,CACrC,SAAA,EACA,OAAA,EACA,QAAgB,4BAAA,KACb;AACH,EAAA,OAAO;AAAA,IACL,YAAA,EAAc,KAAA;AAAA,IACd,cAAA,EAAgB,SAAA;AAAA,IAChB,eAAA,EAAiB,OAAA;AAAA,IACjB,IAAA,EAAM;AAAA,GACR;AACF;AAKO,IAAM,sBAAA,GAAyB,CACpC,SAAA,EACA,WAAA,KACG;AACH,EAAA,MAAM,QAA6B,EAAC;AAEpC,EAAA,IAAI,cAAc,MAAA,EAAW;AAC3B,IAAA,KAAA,CAAM,cAAc,CAAA,GAAI,SAAA;AAAA,EAC1B;AAEA,EAAA,IAAI,WAAA,EAAa;AACf,IAAA,KAAA,CAAM,kBAAkB,CAAA,GAAI,WAAA;AAAA,EAC9B;AAEA,EAAA,OAAO,KAAA;AACT;ACvCO,IAAM,OAAA,GAAU,CAAC,KAAA,KACtBA,sBAAA,CAAM,aAAA;AAAA,EAAc,KAAA;AAAA,EAAO;AAAA,IACzB,KAAA,EAAO,4BAAA;AAAA,IACP,KAAA,EAAO,IAAA;AAAA,IACP,MAAA,EAAQ,IAAA;AAAA,IACR,OAAA,EAAS,WAAA;AAAA,IACT,IAAA,EAAM,MAAA;AAAA,IACN,MAAA,EAAQ,cAAA;AAAA,IACR,WAAA,EAAa,GAAA;AAAA,IACb,aAAA,EAAe,OAAA;AAAA,IACf,cAAA,EAAgB,OAAA;AAAA,IAChB,GAAG;AAAA,GACL;AAAA,EACEA,uBAAM,aAAA,CAAc,MAAA,EAAQ,EAAE,CAAA,EAAG,yGAAyG,CAAA;AAAA,EAC1IA,sBAAA,CAAM,aAAA,CAAc,QAAA,EAAU,EAAE,EAAA,EAAI,MAAM,EAAA,EAAI,IAAA,EAAM,CAAA,EAAG,GAAA,EAAK;AAC9D;AAGK,IAAM,UAAA,GAAa,CAAC,KAAA,KACzBA,sBAAA,CAAM,aAAA;AAAA,EAAc,KAAA;AAAA,EAAO;AAAA,IACzB,KAAA,EAAO,4BAAA;AAAA,IACP,KAAA,EAAO,IAAA;AAAA,IACP,MAAA,EAAQ,IAAA;AAAA,IACR,OAAA,EAAS,WAAA;AAAA,IACT,IAAA,EAAM,MAAA;AAAA,IACN,MAAA,EAAQ,cAAA;AAAA,IACR,WAAA,EAAa,GAAA;AAAA,IACb,aAAA,EAAe,OAAA;AAAA,IACf,cAAA,EAAgB,OAAA;AAAA,IAChB,GAAG;AAAA,GACL;AAAA,EACEA,uBAAM,aAAA,CAAc,MAAA,EAAQ,EAAE,CAAA,EAAG,kGAAkG,CAAA;AAAA,EACnIA,uBAAM,aAAA,CAAc,MAAA,EAAQ,EAAE,CAAA,EAAG,wCAAwC,CAAA;AAAA,EACzEA,uBAAM,aAAA,CAAc,MAAA,EAAQ,EAAE,CAAA,EAAG,gGAAgG,CAAA;AAAA,EACjIA,uBAAM,aAAA,CAAc,MAAA,EAAQ,EAAE,CAAA,EAAG,cAAc;AACjD;;;ACuBF,IAAM,UAAA,GAAa,IACd,IAAA,KACG;AACN,EAAA,MAAM,SAA8B,EAAC;AAErC,EAAA,KAAA,MAAW,SAAS,IAAA,EAAM;AACxB,IAAA,IAAI,CAAC,KAAA,EAAO;AAEZ,IAAA,KAAA,MAAW,OAAO,KAAA,EAAO;AACvB,MAAA,MAAM,GAAA,GAAM,MAAM,GAAG,CAAA;AACrB,MAAA,MAAM,QAAA,GAAW,OAAO,GAAG,CAAA;AAE3B,MAAA,IACE,GAAA,CAAI,WAAW,IAAI,CAAA,IACnB,OAAO,GAAA,KAAQ,UAAA,IACf,OAAO,QAAA,KAAa,UAAA,EACpB;AACA,QAAA,MAAA,CAAO,GAAG,CAAA,GAAI,CAAA,GAAIC,KAAAA,KAAgB;AAChC,UAAA,QAAA,CAAS,GAAGA,KAAI,CAAA;AAChB,UAAA,GAAA,CAAI,GAAGA,KAAI,CAAA;AAAA,QACb,CAAA;AAAA,MACF,CAAA,MAAA,IAAW,QAAQ,WAAA,IAAe,OAAO,QAAQ,QAAA,IAAY,OAAO,aAAa,QAAA,EAAU;AACzF,QAAA,MAAA,CAAO,GAAG,CAAA,GAAI,CAAC,QAAA,EAAU,GAAG,EAAE,MAAA,CAAO,OAAO,CAAA,CAAE,IAAA,CAAK,GAAG,CAAA;AAAA,MACxD,CAAA,MAAO;AACL,QAAA,MAAA,CAAO,GAAG,CAAA,GAAI,GAAA;AAAA,MAChB;AAAA,IACF;AAAA,EACF;AAEA,EAAA,OAAO,MAAA;AACT;AAEO,IAAM,eAAA,GAAkB,CAAC,OAAA,GAAkC,EAAC,KAA6B;AAC9F,EAAA,MAAM;AAAA,IACJ,cAAA,GAAiB,KAAA;AAAA,IACjB,KAAA;AAAA,IACA,QAAA,GAAW,KAAA;AAAA,IACX,QAAA,GAAW,KAAA;AAAA,IACX,EAAA,EAAI,UAAA;AAAA,IACJ,UAAA,EAAY,cAAA;AAAA,IACZ,QAAA,EAAU;AAAA,GACZ,GAAI,OAAA;AAEJ,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAIC,eAAS,cAAc,CAAA;AACzD,EAAA,MAAM,cAAcC,WAAA,EAAM;AAC1B,EAAA,MAAM,OAAA,GAAU,UAAA,IAAc,CAAA,mBAAA,EAAsB,WAAW,CAAA,CAAA;AAE/D,EAAA,MAAM,MAAA,GAASC,kBAAY,MAAM;AAC/B,IAAA,IAAI,YAAY,QAAA,EAAU;AAC1B,IAAA,YAAA,CAAa,CAAC,IAAA,KAAS,CAAC,IAAI,CAAA;AAAA,EAC9B,CAAA,EAAG,CAAC,QAAA,EAAU,QAAQ,CAAC,CAAA;AAEvB,EAAA,MAAM,UAAA,GAAaA,iBAAA,CAAY,CAAC,OAAA,KAAqB;AACnD,IAAA,IAAI,YAAY,QAAA,EAAU;AAC1B,IAAA,YAAA,CAAa,OAAO,CAAA;AAAA,EACtB,CAAA,EAAG,CAAC,QAAA,EAAU,QAAQ,CAAC,CAAA;AAEvB,EAAA,MAAM,QAAA,GAAW,KAAA,EAAO,IAAA,IAAQJ,sBAAAA,CAAM,cAAc,OAAO,CAAA;AAC3D,EAAA,MAAM,QAAA,GAAW,KAAA,EAAO,IAAA,IAAQA,sBAAAA,CAAM,cAAc,UAAU,CAAA;AAG9D,EAAA,MAAM,cAAA,GAA8D;AAAA,IAClE,EAAA,EAAI,OAAA;AAAA,IACJ,IAAA,EAAM,aAAa,SAAS,CAAA;AAAA,IAC5B,QAAA;AAAA,IACA,QAAA;AAAA,IACA,GAAG,sBAAA;AAAuB,GAC5B;AAGA,EAAA,MAAM,YAAA,GAA8D;AAAA,IAClE,OAAA,EAAS,MAAA;AAAA,IACT,UAAU,QAAA,IAAY,QAAA;AAAA,IACtB,QAAA,EAAU,YAAY,QAAA,GAAW,QAAA;AAAA,IACjC,GAAG,uBAAA,CAAwB,SAAA,EAAW,OAAO;AAAA,GAC/C;AAGA,EAAA,MAAM,gBAAA,GAAmB,UAAA,CAAW,cAAA,EAAgB,cAAc,CAAA;AAClE,EAAA,MAAM,cAAA,GAAiB,UAAA,CAAW,YAAA,EAAc,YAAY,CAAA;AAE5D,EAAA,OAAO;AAAA,IACL,UAAA,EAAY,gBAAA;AAAA,IACZ,QAAA,EAAU,cAAA;AAAA,IACV,SAAA;AAAA,IACA,MAAA;AAAA,IACA;AAAA,GACF;AACF","file":"index.js","sourcesContent":["/**\n * Generates the input type based on visibility.\n */\nexport const getInputType = (isVisible: boolean): 'text' | 'password' => {\n  return isVisible ? 'text' : 'password';\n};\n\n/**\n * Generates ARIA attributes for the toggle button.\n */\nexport const getButtonAriaAttributes = (\n  isVisible: boolean,\n  inputId: string,\n  label: string = 'Toggle password visibility'\n) => {\n  return {\n    'aria-label': label,\n    'aria-pressed': isVisible,\n    'aria-controls': inputId,\n    type: 'button' as const,\n  };\n};\n\n/**\n * Generates ARIA attributes for the input field.\n */\nexport const getInputAriaAttributes = (\n  isInvalid?: boolean,\n  describedBy?: string\n) => {\n  const attrs: Record<string, any> = {};\n  \n  if (isInvalid !== undefined) {\n    attrs['aria-invalid'] = isInvalid;\n  }\n  \n  if (describedBy) {\n    attrs['aria-describedby'] = describedBy;\n  }\n  \n  return attrs;\n};\n","import React from 'react';\n\nexport const EyeIcon = (props: React.SVGProps<SVGSVGElement>) => (\n  React.createElement('svg', {\n    xmlns: \"http://www.w3.org/2000/svg\",\n    width: \"16\",\n    height: \"16\",\n    viewBox: \"0 0 24 24\",\n    fill: \"none\",\n    stroke: \"currentColor\",\n    strokeWidth: \"2\",\n    strokeLinecap: \"round\",\n    strokeLinejoin: \"round\",\n    ...props\n  },\n    React.createElement('path', { 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\" }),\n    React.createElement('circle', { cx: \"12\", cy: \"12\", r: \"3\" })\n  )\n);\n\nexport const EyeOffIcon = (props: React.SVGProps<SVGSVGElement>) => (\n  React.createElement('svg', {\n    xmlns: \"http://www.w3.org/2000/svg\",\n    width: \"16\",\n    height: \"16\",\n    viewBox: \"0 0 24 24\",\n    fill: \"none\",\n    stroke: \"currentColor\",\n    strokeWidth: \"2\",\n    strokeLinecap: \"round\",\n    strokeLinejoin: \"round\",\n    ...props\n  },\n    React.createElement('path', { 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\" }),\n    React.createElement('path', { d: \"M14.084 14.158a3 3 0 0 1-4.242-4.242\" }),\n    React.createElement('path', { 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\" }),\n    React.createElement('path', { d: \"m2 2 20 20\" })\n  )\n);\n","'use client';\n\nimport React, { useState, useId, useCallback, ReactNode } from 'react';\nimport { EyeIcon, EyeOffIcon } from '../icons';\nimport { getInputType, getButtonAriaAttributes, getInputAriaAttributes } from '../core/logic';\n\nexport interface UseViraPasswordOptions {\n  /**\n   * Initial visibility state of the password.\n   * @default false\n   */\n  defaultVisible?: boolean;\n  \n  /**\n   * Custom icons for show/hide states.\n   */\n  icons?: {\n    show: ReactNode;\n    hide: ReactNode;\n  };\n  \n  /**\n   * Whether the input is disabled.\n   * If true, the toggle button will also be disabled.\n   */\n  disabled?: boolean;\n  \n  /**\n   * Whether the input is read-only.\n   * If true, the toggle button will be disabled.\n   */\n  readOnly?: boolean;\n\n  /**\n   * ID for the input element. If not provided, a random ID will be generated.\n   */\n  id?: string;\n\n  /**\n   * Props to be merged with the generated input props.\n   */\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n\n  /**\n   * Props to be merged with the generated button props.\n   */\n  btnProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;\n}\n\nexport interface UseViraPasswordResult {\n  inputProps: React.InputHTMLAttributes<HTMLInputElement>;\n  btnProps: React.ButtonHTMLAttributes<HTMLButtonElement>;\n  isVisible: boolean;\n  toggle: () => void;\n  setVisible: (visible: boolean) => void;\n}\n\n/**\n * A utility to merge event handlers and other props.\n */\nconst mergeProps = <T extends Record<string, any>>(\n  ...args: (T | undefined)[]\n): T => {\n  const result: Record<string, any> = {};\n\n  for (const props of args) {\n    if (!props) continue;\n\n    for (const key in props) {\n      const val = props[key];\n      const existing = result[key];\n\n      if (\n        key.startsWith('on') &&\n        typeof val === 'function' &&\n        typeof existing === 'function'\n      ) {\n        result[key] = (...args: any[]) => {\n          existing(...args);\n          val(...args);\n        };\n      } else if (key === 'className' && typeof val === 'string' && typeof existing === 'string') {\n        result[key] = [existing, val].filter(Boolean).join(' ');\n      } else {\n        result[key] = val;\n      }\n    }\n  }\n\n  return result as T;\n};\n\nexport const useViraPassword = (options: UseViraPasswordOptions = {}): UseViraPasswordResult => {\n  const {\n    defaultVisible = false,\n    icons,\n    disabled = false,\n    readOnly = false,\n    id: providedId,\n    inputProps: userInputProps,\n    btnProps: userBtnProps,\n  } = options;\n\n  const [isVisible, setIsVisible] = useState(defaultVisible);\n  const generatedId = useId();\n  const inputId = providedId || `virapassword-input-${generatedId}`;\n\n  const toggle = useCallback(() => {\n    if (disabled || readOnly) return;\n    setIsVisible((prev) => !prev);\n  }, [disabled, readOnly]);\n\n  const setVisible = useCallback((visible: boolean) => {\n    if (disabled || readOnly) return;\n    setIsVisible(visible);\n  }, [disabled, readOnly]);\n\n  const showIcon = icons?.show ?? React.createElement(EyeIcon);\n  const hideIcon = icons?.hide ?? React.createElement(EyeOffIcon);\n\n  // Base props for the input\n  const baseInputProps: React.InputHTMLAttributes<HTMLInputElement> = {\n    id: inputId,\n    type: getInputType(isVisible),\n    disabled,\n    readOnly,\n    ...getInputAriaAttributes(),\n  };\n\n  // Base props for the button\n  const baseBtnProps: React.ButtonHTMLAttributes<HTMLButtonElement> = {\n    onClick: toggle,\n    disabled: disabled || readOnly,\n    children: isVisible ? hideIcon : showIcon,\n    ...getButtonAriaAttributes(isVisible, inputId),\n  };\n\n  // Merge user props with base props\n  const mergedInputProps = mergeProps(baseInputProps, userInputProps);\n  const mergedBtnProps = mergeProps(baseBtnProps, userBtnProps);\n\n  return {\n    inputProps: mergedInputProps,\n    btnProps: mergedBtnProps,\n    isVisible,\n    toggle,\n    setVisible,\n  };\n};\n\n// Re-export the mergeProps utility if the user needs it manually\nexport { mergeProps };\n"]}

package/dist/index.mjs

@@ -0,0 +1,134 @@
+"use client";
+import React, { useState, useId, useCallback } from 'react';
+
+// src/core/logic.ts
+var getInputType = (isVisible) => {
+  return isVisible ? "text" : "password";
+};
+var getButtonAriaAttributes = (isVisible, inputId, label = "Toggle password visibility") => {
+  return {
+    "aria-label": label,
+    "aria-pressed": isVisible,
+    "aria-controls": inputId,
+    type: "button"
+  };
+};
+var getInputAriaAttributes = (isInvalid, describedBy) => {
+  const attrs = {};
+  if (isInvalid !== void 0) {
+    attrs["aria-invalid"] = isInvalid;
+  }
+  if (describedBy) {
+    attrs["aria-describedby"] = describedBy;
+  }
+  return attrs;
+};
+var EyeIcon = (props) => React.createElement(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "16",
+    height: "16",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    ...props
+  },
+  React.createElement("path", { 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" }),
+  React.createElement("circle", { cx: "12", cy: "12", r: "3" })
+);
+var EyeOffIcon = (props) => React.createElement(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "16",
+    height: "16",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    ...props
+  },
+  React.createElement("path", { 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" }),
+  React.createElement("path", { d: "M14.084 14.158a3 3 0 0 1-4.242-4.242" }),
+  React.createElement("path", { 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" }),
+  React.createElement("path", { d: "m2 2 20 20" })
+);
+
+// src/react/useViraPassword.ts
+var mergeProps = (...args) => {
+  const result = {};
+  for (const props of args) {
+    if (!props) continue;
+    for (const key in props) {
+      const val = props[key];
+      const existing = result[key];
+      if (key.startsWith("on") && typeof val === "function" && typeof existing === "function") {
+        result[key] = (...args2) => {
+          existing(...args2);
+          val(...args2);
+        };
+      } else if (key === "className" && typeof val === "string" && typeof existing === "string") {
+        result[key] = [existing, val].filter(Boolean).join(" ");
+      } else {
+        result[key] = val;
+      }
+    }
+  }
+  return result;
+};
+var useViraPassword = (options = {}) => {
+  const {
+    defaultVisible = false,
+    icons,
+    disabled = false,
+    readOnly = false,
+    id: providedId,
+    inputProps: userInputProps,
+    btnProps: userBtnProps
+  } = options;
+  const [isVisible, setIsVisible] = useState(defaultVisible);
+  const generatedId = useId();
+  const inputId = providedId || `virapassword-input-${generatedId}`;
+  const toggle = useCallback(() => {
+    if (disabled || readOnly) return;
+    setIsVisible((prev) => !prev);
+  }, [disabled, readOnly]);
+  const setVisible = useCallback((visible) => {
+    if (disabled || readOnly) return;
+    setIsVisible(visible);
+  }, [disabled, readOnly]);
+  const showIcon = icons?.show ?? React.createElement(EyeIcon);
+  const hideIcon = icons?.hide ?? React.createElement(EyeOffIcon);
+  const baseInputProps = {
+    id: inputId,
+    type: getInputType(isVisible),
+    disabled,
+    readOnly,
+    ...getInputAriaAttributes()
+  };
+  const baseBtnProps = {
+    onClick: toggle,
+    disabled: disabled || readOnly,
+    children: isVisible ? hideIcon : showIcon,
+    ...getButtonAriaAttributes(isVisible, inputId)
+  };
+  const mergedInputProps = mergeProps(baseInputProps, userInputProps);
+  const mergedBtnProps = mergeProps(baseBtnProps, userBtnProps);
+  return {
+    inputProps: mergedInputProps,
+    btnProps: mergedBtnProps,
+    isVisible,
+    toggle,
+    setVisible
+  };
+};
+
+export { EyeIcon, EyeOffIcon, getButtonAriaAttributes, getInputAriaAttributes, getInputType, mergeProps, useViraPassword };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/core/logic.ts","../src/icons/index.ts","../src/react/useViraPassword.ts"],"names":["args","React"],"mappings":"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","file":"index.mjs","sourcesContent":["/**\n * Generates the input type based on visibility.\n */\nexport const getInputType = (isVisible: boolean): 'text' | 'password' => {\n  return isVisible ? 'text' : 'password';\n};\n\n/**\n * Generates ARIA attributes for the toggle button.\n */\nexport const getButtonAriaAttributes = (\n  isVisible: boolean,\n  inputId: string,\n  label: string = 'Toggle password visibility'\n) => {\n  return {\n    'aria-label': label,\n    'aria-pressed': isVisible,\n    'aria-controls': inputId,\n    type: 'button' as const,\n  };\n};\n\n/**\n * Generates ARIA attributes for the input field.\n */\nexport const getInputAriaAttributes = (\n  isInvalid?: boolean,\n  describedBy?: string\n) => {\n  const attrs: Record<string, any> = {};\n  \n  if (isInvalid !== undefined) {\n    attrs['aria-invalid'] = isInvalid;\n  }\n  \n  if (describedBy) {\n    attrs['aria-describedby'] = describedBy;\n  }\n  \n  return attrs;\n};\n","import React from 'react';\n\nexport const EyeIcon = (props: React.SVGProps<SVGSVGElement>) => (\n  React.createElement('svg', {\n    xmlns: \"http://www.w3.org/2000/svg\",\n    width: \"16\",\n    height: \"16\",\n    viewBox: \"0 0 24 24\",\n    fill: \"none\",\n    stroke: \"currentColor\",\n    strokeWidth: \"2\",\n    strokeLinecap: \"round\",\n    strokeLinejoin: \"round\",\n    ...props\n  },\n    React.createElement('path', { 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\" }),\n    React.createElement('circle', { cx: \"12\", cy: \"12\", r: \"3\" })\n  )\n);\n\nexport const EyeOffIcon = (props: React.SVGProps<SVGSVGElement>) => (\n  React.createElement('svg', {\n    xmlns: \"http://www.w3.org/2000/svg\",\n    width: \"16\",\n    height: \"16\",\n    viewBox: \"0 0 24 24\",\n    fill: \"none\",\n    stroke: \"currentColor\",\n    strokeWidth: \"2\",\n    strokeLinecap: \"round\",\n    strokeLinejoin: \"round\",\n    ...props\n  },\n    React.createElement('path', { 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\" }),\n    React.createElement('path', { d: \"M14.084 14.158a3 3 0 0 1-4.242-4.242\" }),\n    React.createElement('path', { 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\" }),\n    React.createElement('path', { d: \"m2 2 20 20\" })\n  )\n);\n","'use client';\n\nimport React, { useState, useId, useCallback, ReactNode } from 'react';\nimport { EyeIcon, EyeOffIcon } from '../icons';\nimport { getInputType, getButtonAriaAttributes, getInputAriaAttributes } from '../core/logic';\n\nexport interface UseViraPasswordOptions {\n  /**\n   * Initial visibility state of the password.\n   * @default false\n   */\n  defaultVisible?: boolean;\n  \n  /**\n   * Custom icons for show/hide states.\n   */\n  icons?: {\n    show: ReactNode;\n    hide: ReactNode;\n  };\n  \n  /**\n   * Whether the input is disabled.\n   * If true, the toggle button will also be disabled.\n   */\n  disabled?: boolean;\n  \n  /**\n   * Whether the input is read-only.\n   * If true, the toggle button will be disabled.\n   */\n  readOnly?: boolean;\n\n  /**\n   * ID for the input element. If not provided, a random ID will be generated.\n   */\n  id?: string;\n\n  /**\n   * Props to be merged with the generated input props.\n   */\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n\n  /**\n   * Props to be merged with the generated button props.\n   */\n  btnProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;\n}\n\nexport interface UseViraPasswordResult {\n  inputProps: React.InputHTMLAttributes<HTMLInputElement>;\n  btnProps: React.ButtonHTMLAttributes<HTMLButtonElement>;\n  isVisible: boolean;\n  toggle: () => void;\n  setVisible: (visible: boolean) => void;\n}\n\n/**\n * A utility to merge event handlers and other props.\n */\nconst mergeProps = <T extends Record<string, any>>(\n  ...args: (T | undefined)[]\n): T => {\n  const result: Record<string, any> = {};\n\n  for (const props of args) {\n    if (!props) continue;\n\n    for (const key in props) {\n      const val = props[key];\n      const existing = result[key];\n\n      if (\n        key.startsWith('on') &&\n        typeof val === 'function' &&\n        typeof existing === 'function'\n      ) {\n        result[key] = (...args: any[]) => {\n          existing(...args);\n          val(...args);\n        };\n      } else if (key === 'className' && typeof val === 'string' && typeof existing === 'string') {\n        result[key] = [existing, val].filter(Boolean).join(' ');\n      } else {\n        result[key] = val;\n      }\n    }\n  }\n\n  return result as T;\n};\n\nexport const useViraPassword = (options: UseViraPasswordOptions = {}): UseViraPasswordResult => {\n  const {\n    defaultVisible = false,\n    icons,\n    disabled = false,\n    readOnly = false,\n    id: providedId,\n    inputProps: userInputProps,\n    btnProps: userBtnProps,\n  } = options;\n\n  const [isVisible, setIsVisible] = useState(defaultVisible);\n  const generatedId = useId();\n  const inputId = providedId || `virapassword-input-${generatedId}`;\n\n  const toggle = useCallback(() => {\n    if (disabled || readOnly) return;\n    setIsVisible((prev) => !prev);\n  }, [disabled, readOnly]);\n\n  const setVisible = useCallback((visible: boolean) => {\n    if (disabled || readOnly) return;\n    setIsVisible(visible);\n  }, [disabled, readOnly]);\n\n  const showIcon = icons?.show ?? React.createElement(EyeIcon);\n  const hideIcon = icons?.hide ?? React.createElement(EyeOffIcon);\n\n  // Base props for the input\n  const baseInputProps: React.InputHTMLAttributes<HTMLInputElement> = {\n    id: inputId,\n    type: getInputType(isVisible),\n    disabled,\n    readOnly,\n    ...getInputAriaAttributes(),\n  };\n\n  // Base props for the button\n  const baseBtnProps: React.ButtonHTMLAttributes<HTMLButtonElement> = {\n    onClick: toggle,\n    disabled: disabled || readOnly,\n    children: isVisible ? hideIcon : showIcon,\n    ...getButtonAriaAttributes(isVisible, inputId),\n  };\n\n  // Merge user props with base props\n  const mergedInputProps = mergeProps(baseInputProps, userInputProps);\n  const mergedBtnProps = mergeProps(baseBtnProps, userBtnProps);\n\n  return {\n    inputProps: mergedInputProps,\n    btnProps: mergedBtnProps,\n    isVisible,\n    toggle,\n    setVisible,\n  };\n};\n\n// Re-export the mergeProps utility if the user needs it manually\nexport { mergeProps };\n"]}

package/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "@virastack/password",
+  "version": "1.0.0",
+  "description": "Fully accessible and customizable password visibility hook for React.",
+  "author": {
+    "name": "Ömer Gülçiçek (ViraStack)",
+    "email": "iletisim@omergulcicek.com",
+    "url": "https://omergulcicek.com"
+  },
+  "license": "MIT",
+  "homepage": "https://virastack.com",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/virastack/password.git"
+  },
+  "bugs": {
+    "url": "https://github.com/virastack/password/issues"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": false,
+  "engines": {
+    "node": ">=18"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "test": "vitest",
+    "lint": "tsc"
+  },
+  "keywords": [
+    "virastack",
+    "react",
+    "hook",
+    "password",
+    "password-visibility",
+    "accessibility",
+    "a11y",
+    "form-validation",
+    "dx"
+  ],
+  "peerDependencies": {
+    "react": ">=18.2.0",
+    "react-dom": ">=18.2.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^14.2.1",
+    "@types/react": "^18.2.64",
+    "@types/react-dom": "^18.2.21",
+    "jsdom": "^24.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tsup": "^8.0.2",
+    "typescript": "^5.3.3",
+    "vitest": "^1.3.1"
+  }
+}