adds PasswordInput component

Author: cody-dot-js

app/components/layout.tsx

@@ -104,6 +104,7 @@ const components = [
 	"Inline Code",
 	"Input",
 	"Media Object",
+	"Password Input",
 	"Popover",
 	"Select",
 	"Sheet",
@@ -123,6 +124,7 @@ const componentRouteLookup = {
 	"Inline Code": "/components/inline-code",
 	Input: "/components/input",
 	"Media Object": "/components/media-object",
+	"Password Input": "/components/password-input",
 	Popover: "/components/popover",
 	Select: "/components/select",
 	Sheet: "/components/sheet",

app/routes/components.password-input.tsx

@@ -0,0 +1,66 @@
+import { code, CodeBlock, CodeBlockBody, CodeBlockCode, CodeBlockCopyButton } from "@/code-block";
+import { PasswordInput } from "@/password-input";
+import { Table, TableBody, TableHead, TableHeader, TableRow } from "@/table";
+import type { HeadersFunction, MetaFunction } from "@remix-run/node";
+import { Example } from "~/components/example";
+
+export const meta: MetaFunction = () => {
+	return [
+		{ title: "@ngrok/mantle — PasswordInput" },
+		{ name: "description", content: "mantle is ngrok's UI library and design system" },
+	];
+};
+
+export const headers: HeadersFunction = () => {
+	return {
+		"Cache-Control": "max-age=300, stale-while-revalidate=604800",
+	};
+};
+
+export default function Page() {
+	return (
+		<div>
+			<h1 className="text-5xl font-medium">Password Input</h1>
+			<p className="mt-4 text-xl text-gray-600">Fundamental component for password inputs.</p>
+
+			<Example className="mt-4 flex-col gap-4">
+				<PasswordInput className="max-w-64" placeholder="Enter a username" />
+				<PasswordInput className="max-w-64" placeholder="Enter a username" aria-invalid />
+			</Example>
+			<CodeBlock className="rounded-b-lg rounded-t-none">
+				<CodeBlockBody>
+					<CodeBlockCopyButton />
+					<CodeBlockCode language="tsx">{code`
+						<>
+							<PasswordInput placeholder="Enter a username" />
+							<PasswordInput placeholder="Enter a username" aria-invalid />
+						</>
+					`}</CodeBlockCode>
+				</CodeBlockBody>
+			</CodeBlock>
+
+			<h2 className="mt-16 text-3xl font-medium">API Reference</h2>
+			<div className="z-10 mt-4 overflow-hidden rounded-lg border border-gray-300">
+				<Table>
+					<TableHeader>
+						<TableRow>
+							<TableHead>Prop</TableHead>
+							<TableHead>Type</TableHead>
+							<TableHead>Default</TableHead>
+						</TableRow>
+					</TableHeader>
+					<TableBody className="font-mono text-xs text-gray-600">
+						{/* <TableRow>
+							<TableCell className="align-top font-medium">state</TableCell>
+							<TableCell className="space-y-2 align-top text-xs">
+								<p>default</p>
+								<p>danger</p>
+							</TableCell>
+							<TableCell className="align-top">default</TableCell>
+						</TableRow> */}
+					</TableBody>
+				</Table>
+			</div>
+		</div>
+	);
+}

app/types/routes.ts

@@ -12,6 +12,7 @@ export const routePatterns = [
 	"/components/inline-code",
 	"/components/input",
 	"/components/media-object",
+	"/components/password-input",
 	"/components/popover",
 	"/components/select",
 	"/components/sheet",
@@ -41,6 +42,7 @@ export const routes = [
 	"/components/inline-code",
 	"/components/input",
 	"/components/media-object",
+	"/components/password-input",
 	"/components/popover",
 	"/components/select",
 	"/components/sheet",

components/index.tsx

@@ -7,6 +7,7 @@ export * from "./core";
 export * from "./inline-code";
 export * from "./input";
 export * from "./media-object";
+export * from "./password-input";
 export * from "./popover";
 export * from "./select";
 export * from "./sheet";

components/password-input/index.tsx

@@ -0,0 +1,3 @@
+export { PasswordInput } from "./src/password-input";
+
+export type { PasswordInputProps } from "./src/password-input";

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

@@ -0,0 +1,59 @@
+import { Eye } from "@phosphor-icons/react/Eye";
+import { EyeClosed } from "@phosphor-icons/react/EyeClosed";
+import { cva } from "class-variance-authority";
+import { forwardRef, useState } from "react";
+import type { InputHTMLAttributes } from "react";
+import { cx } from "../../core";
+import type { AutoComplete, InputType } from "../../input";
+import { VariantProps } from "../../types/src/variant-props";
+
+export type PasswordInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "autoComplete" | "type"> & {
+	autoComplete?: AutoComplete;
+};
+
+const passwordInputVariants = cva(
+	"flex h-11 sm:h-9 w-full rounded-md border bg-white dark:bg-gray-50 px-3 py-2 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-4 disabled:pointer-events-none disabled:opacity-50 sm:text-sm",
+	{
+		variants: {
+			state: {
+				default: "text-gray-900 border-gray-300 placeholder:text-gray-400 focus:border-blue-600 focus:ring-blue-500/25",
+				danger: "border-red-600 focus:border-red-600 focus:ring-red-500/25",
+			},
+		},
+		defaultVariants: {
+			state: "default",
+		},
+	},
+);
+
+type PasswordInputVariants = VariantProps<typeof passwordInputVariants>;
+
+const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(({ className, style, ...inputProps }, ref) => {
+	const [showPassword, setShowPassword] = useState<boolean>(false);
+	const type: Extract<InputType, "text" | "password"> = showPassword ? "text" : "password";
+	const state: PasswordInputVariants["state"] = inputProps["aria-invalid"] ? "danger" : "default";
+
+	return (
+		<div className={cx(passwordInputVariants({ state }), className)} style={style}>
+			<input
+				ref={ref}
+				className="m-0 flex-1 rounded bg-transparent p-0 focus:outline-none"
+				type={type}
+				{...inputProps}
+			/>
+			<button
+				type="button"
+				tabIndex={-1}
+				className="ml-1 cursor-pointer bg-inherit p-0 text-size-inherit text-gray-600 hover:text-gray-900"
+				onClick={() => {
+					setShowPassword((s) => !s);
+				}}
+			>
+				{showPassword ? <Eye /> : <EyeClosed />}
+			</button>
+		</div>
+	);
+});
+PasswordInput.displayName = "PasswordInput";
+
+export { PasswordInput };