0.14.4 - Added PasswordInput component with key icon and visibility toggle

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schemavaults/ui",
-  "version": "0.14.3",
+  "version": "0.14.4",
   "private": false,
   "license": "UNLICENSED",
   "description": "React.js UI components for SchemaVaults frontend applications",

src/components/ui/index.ts

@@ -16,6 +16,9 @@ export type * from "./button";
 export * from "./input";
 export type * from "./input";
 
+export * from "./password-input";
+export type * from "./password-input";
+
 export * from "./file-input";
 export type * from "./file-input";
 

src/components/ui/password-input/PasswordInput.stories.tsx

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+
+import PasswordInput from "./password-input";
+
+const meta = {
+  title: "Components/PasswordInput",
+  component: PasswordInput,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    placeholder: {
+      type: "string",
+      control: {
+        type: "text",
+      },
+      description: "Placeholder text for the password input",
+    },
+  },
+  args: {
+    onChange: (): void => {
+      fn();
+    },
+  },
+} satisfies Meta<typeof PasswordInput>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const WithPlaceholder: Story = {
+  args: {
+    placeholder: "Enter your password",
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    placeholder: "Disabled password input",
+    disabled: true,
+  },
+};

src/components/ui/password-input/index.ts

@@ -0,0 +1,3 @@
+export * from "./password-input";
+export type * from "./password-input";
+export { PasswordInput as default } from "./password-input";

src/components/ui/password-input/password-input.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import { useState, type ReactElement } from "react";
+import { Eye, EyeOff, KeyRound } from "lucide-react";
+
+import { Input, type InputProps } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+
+export interface PasswordInputProps
+  extends Omit<InputProps, "icon" | "rightButton" | "type"> {}
+
+const PasswordInput = ({
+  ...props
+}: PasswordInputProps): ReactElement => {
+  const [visible, setVisible] = useState<boolean>(false);
+
+  const ToggleIcon = visible ? EyeOff : Eye;
+
+  return (
+    <Input
+      type={visible ? "text" : "password"}
+      icon={KeyRound}
+      rightButton={
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          className="h-8 w-8 mr-1"
+          onClick={(): void => setVisible((prev) => !prev)}
+          aria-label={visible ? "Hide password" : "Show password"}
+        >
+          <ToggleIcon className="h-4 w-4" />
+        </Button>
+      }
+      {...props}
+    />
+  );
+};
+PasswordInput.displayName = "PasswordInput";
+
+export { PasswordInput };
+
+export default PasswordInput;