@bonprix-ds/react-password-field 1.0.0

package/dist/index.d.ts

@@ -0,0 +1,30 @@
+import { default as default_2 } from 'react';
+import { RefObject } from 'react';
+import { TextFieldBaseProps } from '@bonprix-ds/react-text-field';
+
+declare interface BaseProps extends TextFieldBaseProps {
+    /** Reference to the input element. */
+    inputRef?: RefObject<HTMLInputElement>;
+}
+
+declare type ControlledInputProps = BaseProps & {
+    /** The current value of the input field. Should be used in conjunction with `onChange`, when controlling the input. Should be `undefined` otherwise. */
+    value: string;
+    /** The default value of the input field. Should be used when the input is uncontrolled. */
+    defaultValue?: never;
+    /** Callback that is triggered when the input value changes. Should be used in conjunction with `value`, when controlling the input. Optional otherwise. */
+    onChange: (value: string) => void;
+};
+
+declare const PasswordField: (props: PasswordFieldProps) => default_2.JSX.Element;
+export default PasswordField;
+
+export declare type PasswordFieldProps = ControlledInputProps | UncontrolledInputProps;
+
+declare type UncontrolledInputProps = BaseProps & {
+    value?: never;
+    defaultValue: string;
+    onChange?: (value: string) => void;
+};
+
+export { }

package/dist/index.js

@@ -0,0 +1,2 @@
+import e from "./src/PasswordField.js";
+export { e as default };

package/dist/src/PasswordField.js

@@ -0,0 +1,21 @@
+"use client";
+import e from "@bonprix-ds/react-base-input-field";
+import { useState as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/PasswordField.tsx
+var r = (r) => {
+	let [i, a] = t("password");
+	return /* @__PURE__ */ n(e, {
+		type: i,
+		buttonIcon: i === "password" ? "visibility" : "visibility-off",
+		onIconButtonClick: () => a((e) => e === "password" ? "text" : "password"),
+		iconButtonLabel: i === "password" ? "Passwort anzeigen" : "Passwort verstecken",
+		hideClear: !0,
+		...r,
+		componentName: "password-field"
+	});
+};
+//#endregion
+export { r as default };
+
+//# sourceMappingURL=PasswordField.js.map

package/dist/src/PasswordField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PasswordField.js","names":[],"sources":["../../src/PasswordField.tsx"],"sourcesContent":["\"use client\";\n\nimport BaseInputField from \"@bonprix-ds/react-base-input-field\";\nimport type { TextFieldBaseProps } from \"@bonprix-ds/react-text-field\";\nimport React, { RefObject, useState } from \"react\";\n\ninterface BaseProps extends TextFieldBaseProps {\n  /** Reference to the input element. */\n  inputRef?: RefObject<HTMLInputElement>;\n}\n\ntype ControlledInputProps = BaseProps & {\n  /** The current value of the input field. Should be used in conjunction with `onChange`, when controlling the input. Should be `undefined` otherwise. */\n  value: string;\n  /** The default value of the input field. Should be used when the input is uncontrolled. */\n  defaultValue?: never;\n  /** Callback that is triggered when the input value changes. Should be used in conjunction with `value`, when controlling the input. Optional otherwise. */\n  onChange: (value: string) => void;\n};\n\ntype UncontrolledInputProps = BaseProps & {\n  value?: never;\n  defaultValue: string;\n  onChange?: (value: string) => void;\n};\n\nexport type Props = ControlledInputProps | UncontrolledInputProps;\n\nconst PasswordField = (props: Props) => {\n  const [type, setType] = useState<\"password\" | \"text\">(\"password\");\n\n  const onVisibilityChange = () => setType((prev) => (prev === \"password\" ? \"text\" : \"password\"));\n  const inputIcon = type === \"password\" ? \"visibility\" : \"visibility-off\";\n  const iconButtonLabel = type === \"password\" ? \"Passwort anzeigen\" : \"Passwort verstecken\";\n\n  return (\n    <BaseInputField\n      type={type}\n      buttonIcon={inputIcon}\n      onIconButtonClick={onVisibilityChange}\n      iconButtonLabel={iconButtonLabel}\n      hideClear\n      {...props}\n      componentName=\"password-field\"\n    />\n  );\n};\nexport default PasswordField;\n"],"mappings":";;;;;AA4BA,IAAM,KAAiB,MAAiB;CACtC,IAAM,CAAC,GAAM,KAAW,EAA8B,UAAU;CAMhE,OACE,kBAAC,GAAD;EACQ;EACN,YANc,MAAS,aAAa,eAAe;EAOnD,yBAR6B,GAAS,MAAU,MAAS,aAAa,SAAS,UAAW;EASzE,iBAPG,MAAS,aAAa,sBAAsB;EAQhE,WAAA;EACA,GAAI;EACJ,eAAc;CACf,CAAA;AAEL"}

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@bonprix-ds/react-password-field",
+  "version": "1.0.0",
+  "description": "PasswordField component, implemented in React, for the Bonprix Design System.",
+  "type": "module",
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "module": "./dist/index.js",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "keywords": [],
+  "author": "",
+  "license": "UNLICENSED",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/bonprix/design-system.git",
+    "directory": "packages/react/password-field"
+  },
+  "dependencies": {
+    "@bonprix-ds/react-base-input-field": "1.0.0",
+    "@bonprix-ds/react-text-field": "1.0.0",
+    "@bonprix-ds/utils": "0.2.1"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tailwind-variants": "0.3.1"
+  },
+  "devDependencies": {
+    "vite": "8.2.2",
+    "@types/react": "19.2.18",
+    "@vitejs/plugin-react": "6.1.1",
+    "rollup-preserve-directives": "1.1.3",
+    "unplugin-dts": "1.0.3",
+    "@microsoft/api-extractor": "7.59.0"
+  },
+  "scripts": {
+    "build": "vite build"
+  }
+}