From d9c77f544c1435c29d037601703c09582af3dfd3 Mon Sep 17 00:00:00 2001
From: Jamie Hoover <uipoet@users.noreply.github.com>
Date: Mon, 24 Jan 2022 17:14:17 -0800
Subject: [PATCH] feat: password input

- PasswordInput component
- fix: text input right padding with trailing icon
- redesign examples contents
- remove sentry from website
---
 package-lock.json                             | 227 ------------------
 package.json                                  |   2 -
 src/docs/app.tsx                              |  71 +-----
 .../pages/examples/anchor-button/index.tsx    |   4 +-
 src/docs/pages/examples/button-menu/index.tsx |   4 +-
 src/docs/pages/examples/button-menu/state.tsx |   2 +-
 src/docs/pages/examples/button/index.tsx      |   5 +-
 src/docs/pages/examples/checkbox/index.tsx    |   4 +-
 src/docs/pages/examples/index.tsx             |  30 +--
 src/docs/pages/examples/input-menu/index.tsx  |   4 +-
 src/docs/pages/examples/input-menu/state.tsx  |   2 +-
 .../pages/examples/password-input/index.tsx   |  34 +++
 .../pages/examples/password-input/state.tsx   |  78 ++++++
 src/docs/pages/examples/radioset/index.tsx    |   4 +-
 src/docs/pages/examples/text-input/index.tsx  |  34 +--
 src/docs/pages/examples/typography.tsx        |   2 +-
 src/lib/components/button/button.spec.ts      |  18 +-
 src/lib/components/input/index.ts             |  12 +-
 src/lib/components/input/input.module.css     |   8 +
 src/lib/components/input/password.tsx         |  27 +++
 src/lib/components/input/text.tsx             |  12 +-
 src/lib/index.ts                              |   2 +-
 22 files changed, 234 insertions(+), 352 deletions(-)
 create mode 100644 src/docs/pages/examples/password-input/index.tsx
 create mode 100644 src/docs/pages/examples/password-input/state.tsx
 create mode 100644 src/lib/components/input/password.tsx

diff --git a/package-lock.json b/package-lock.json
index c0738ba5..384c27e3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,8 +17,6 @@
 				"@commitlint/config-conventional": "16.0.0",
 				"@fontsource/roboto": "4.5.1",
 				"@playwright/test": "1.18.0",
-				"@sentry/react": "6.16.1",
-				"@sentry/tracing": "6.16.1",
 				"@types/node": "17.0.10",
 				"@types/react": "17.0.38",
 				"@types/react-dom": "17.0.11",
@@ -2789,123 +2787,6 @@
 				"semantic-release": ">=18.0.0-beta.1"
 			}
 		},
-		"node_modules/@sentry/browser": {
-			"version": "6.16.1",
-			"resolved": "https://registry.npmjs.org/@sentry/browser/-/browser-6.16.1.tgz",
-			"integrity": "sha512-F2I5RL7RTLQF9CccMrqt73GRdK3FdqaChED3RulGQX5lH6U3exHGFxwyZxSrY4x6FedfBFYlfXWWCJXpLnFkow==",
-			"dev": true,
-			"dependencies": {
-				"@sentry/core": "6.16.1",
-				"@sentry/types": "6.16.1",
-				"@sentry/utils": "6.16.1",
-				"tslib": "^1.9.3"
-			},
-			"engines": {
-				"node": ">=6"
-			}
-		},
-		"node_modules/@sentry/core": {
-			"version": "6.16.1",
-			"resolved": "https://registry.npmjs.org/@sentry/core/-/core-6.16.1.tgz",
-			"integrity": "sha512-UFI0264CPUc5cR1zJH+S2UPOANpm6dLJOnsvnIGTjsrwzR0h8Hdl6rC2R/GPq+WNbnipo9hkiIwDlqbqvIU5vw==",
-			"dev": true,
-			"dependencies": {
-				"@sentry/hub": "6.16.1",
-				"@sentry/minimal": "6.16.1",
-				"@sentry/types": "6.16.1",
-				"@sentry/utils": "6.16.1",
-				"tslib": "^1.9.3"
-			},
-			"engines": {
-				"node": ">=6"
-			}
-		},
-		"node_modules/@sentry/hub": {
-			"version": "6.16.1",
-			"resolved": "https://registry.npmjs.org/@sentry/hub/-/hub-6.16.1.tgz",
-			"integrity": "sha512-4PGtg6AfpqMkreTpL7ymDeQ/U1uXv03bKUuFdtsSTn/FRf9TLS4JB0KuTZCxfp1IRgAA+iFg6B784dDkT8R9eg==",
-			"dev": true,
-			"dependencies": {
-				"@sentry/types": "6.16.1",
-				"@sentry/utils": "6.16.1",
-				"tslib": "^1.9.3"
-			},
-			"engines": {
-				"node": ">=6"
-			}
-		},
-		"node_modules/@sentry/minimal": {
-			"version": "6.16.1",
-			"resolved": "https://registry.npmjs.org/@sentry/minimal/-/minimal-6.16.1.tgz",
-			"integrity": "sha512-dq+mI1EQIvUM+zJtGCVgH3/B3Sbx4hKlGf2Usovm9KoqWYA+QpfVBholYDe/H2RXgO7LFEefDLvOdHDkqeJoyA==",
-			"dev": true,
-			"dependencies": {
-				"@sentry/hub": "6.16.1",
-				"@sentry/types": "6.16.1",
-				"tslib": "^1.9.3"
-			},
-			"engines": {
-				"node": ">=6"
-			}
-		},
-		"node_modules/@sentry/react": {
-			"version": "6.16.1",
-			"resolved": "https://registry.npmjs.org/@sentry/react/-/react-6.16.1.tgz",
-			"integrity": "sha512-n8fOEKbym4kBi946q3AWXBNy1UKTmABj/hE2nAJbTWhi5IwdM7WBG6QCT2yq7oTHLuTxQrAwgKQc+A6zFTyVHg==",
-			"dev": true,
-			"dependencies": {
-				"@sentry/browser": "6.16.1",
-				"@sentry/minimal": "6.16.1",
-				"@sentry/types": "6.16.1",
-				"@sentry/utils": "6.16.1",
-				"hoist-non-react-statics": "^3.3.2",
-				"tslib": "^1.9.3"
-			},
-			"engines": {
-				"node": ">=6"
-			},
-			"peerDependencies": {
-				"react": "15.x || 16.x || 17.x"
-			}
-		},
-		"node_modules/@sentry/tracing": {
-			"version": "6.16.1",
-			"resolved": "https://registry.npmjs.org/@sentry/tracing/-/tracing-6.16.1.tgz",
-			"integrity": "sha512-MPSbqXX59P+OEeST+U2V/8Hu/8QjpTUxTNeNyTHWIbbchdcMMjDbXTS3etCgajZR6Ro+DHElOz5cdSxH6IBGlA==",
-			"dev": true,
-			"dependencies": {
-				"@sentry/hub": "6.16.1",
-				"@sentry/minimal": "6.16.1",
-				"@sentry/types": "6.16.1",
-				"@sentry/utils": "6.16.1",
-				"tslib": "^1.9.3"
-			},
-			"engines": {
-				"node": ">=6"
-			}
-		},
-		"node_modules/@sentry/types": {
-			"version": "6.16.1",
-			"resolved": "https://registry.npmjs.org/@sentry/types/-/types-6.16.1.tgz",
-			"integrity": "sha512-Wh354g30UsJ5kYJbercektGX4ZMc9MHU++1NjeN2bTMnbofEcpUDWIiKeulZEY65IC1iU+1zRQQgtYO+/hgCUQ==",
-			"dev": true,
-			"engines": {
-				"node": ">=6"
-			}
-		},
-		"node_modules/@sentry/utils": {
-			"version": "6.16.1",
-			"resolved": "https://registry.npmjs.org/@sentry/utils/-/utils-6.16.1.tgz",
-			"integrity": "sha512-7ngq/i4R8JZitJo9Sl8PDnjSbDehOxgr1vsoMmerIsyRZ651C/8B+jVkMhaAPgSdyJ0AlE3O7DKKTP1FXFw9qw==",
-			"dev": true,
-			"dependencies": {
-				"@sentry/types": "6.16.1",
-				"tslib": "^1.9.3"
-			},
-			"engines": {
-				"node": ">=6"
-			}
-		},
 		"node_modules/@surma/rollup-plugin-off-main-thread": {
 			"version": "2.2.3",
 			"resolved": "https://registry.npmjs.org/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-2.2.3.tgz",
@@ -6028,15 +5909,6 @@
 				"@babel/runtime": "^7.7.6"
 			}
 		},
-		"node_modules/hoist-non-react-statics": {
-			"version": "3.3.2",
-			"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
-			"integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
-			"dev": true,
-			"dependencies": {
-				"react-is": "^16.7.0"
-			}
-		},
 		"node_modules/hook-std": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/hook-std/-/hook-std-2.0.0.tgz",
@@ -15691,96 +15563,6 @@
 				"read-pkg-up": "^7.0.0"
 			}
 		},
-		"@sentry/browser": {
-			"version": "6.16.1",
-			"resolved": "https://registry.npmjs.org/@sentry/browser/-/browser-6.16.1.tgz",
-			"integrity": "sha512-F2I5RL7RTLQF9CccMrqt73GRdK3FdqaChED3RulGQX5lH6U3exHGFxwyZxSrY4x6FedfBFYlfXWWCJXpLnFkow==",
-			"dev": true,
-			"requires": {
-				"@sentry/core": "6.16.1",
-				"@sentry/types": "6.16.1",
-				"@sentry/utils": "6.16.1",
-				"tslib": "^1.9.3"
-			}
-		},
-		"@sentry/core": {
-			"version": "6.16.1",
-			"resolved": "https://registry.npmjs.org/@sentry/core/-/core-6.16.1.tgz",
-			"integrity": "sha512-UFI0264CPUc5cR1zJH+S2UPOANpm6dLJOnsvnIGTjsrwzR0h8Hdl6rC2R/GPq+WNbnipo9hkiIwDlqbqvIU5vw==",
-			"dev": true,
-			"requires": {
-				"@sentry/hub": "6.16.1",
-				"@sentry/minimal": "6.16.1",
-				"@sentry/types": "6.16.1",
-				"@sentry/utils": "6.16.1",
-				"tslib": "^1.9.3"
-			}
-		},
-		"@sentry/hub": {
-			"version": "6.16.1",
-			"resolved": "https://registry.npmjs.org/@sentry/hub/-/hub-6.16.1.tgz",
-			"integrity": "sha512-4PGtg6AfpqMkreTpL7ymDeQ/U1uXv03bKUuFdtsSTn/FRf9TLS4JB0KuTZCxfp1IRgAA+iFg6B784dDkT8R9eg==",
-			"dev": true,
-			"requires": {
-				"@sentry/types": "6.16.1",
-				"@sentry/utils": "6.16.1",
-				"tslib": "^1.9.3"
-			}
-		},
-		"@sentry/minimal": {
-			"version": "6.16.1",
-			"resolved": "https://registry.npmjs.org/@sentry/minimal/-/minimal-6.16.1.tgz",
-			"integrity": "sha512-dq+mI1EQIvUM+zJtGCVgH3/B3Sbx4hKlGf2Usovm9KoqWYA+QpfVBholYDe/H2RXgO7LFEefDLvOdHDkqeJoyA==",
-			"dev": true,
-			"requires": {
-				"@sentry/hub": "6.16.1",
-				"@sentry/types": "6.16.1",
-				"tslib": "^1.9.3"
-			}
-		},
-		"@sentry/react": {
-			"version": "6.16.1",
-			"resolved": "https://registry.npmjs.org/@sentry/react/-/react-6.16.1.tgz",
-			"integrity": "sha512-n8fOEKbym4kBi946q3AWXBNy1UKTmABj/hE2nAJbTWhi5IwdM7WBG6QCT2yq7oTHLuTxQrAwgKQc+A6zFTyVHg==",
-			"dev": true,
-			"requires": {
-				"@sentry/browser": "6.16.1",
-				"@sentry/minimal": "6.16.1",
-				"@sentry/types": "6.16.1",
-				"@sentry/utils": "6.16.1",
-				"hoist-non-react-statics": "^3.3.2",
-				"tslib": "^1.9.3"
-			}
-		},
-		"@sentry/tracing": {
-			"version": "6.16.1",
-			"resolved": "https://registry.npmjs.org/@sentry/tracing/-/tracing-6.16.1.tgz",
-			"integrity": "sha512-MPSbqXX59P+OEeST+U2V/8Hu/8QjpTUxTNeNyTHWIbbchdcMMjDbXTS3etCgajZR6Ro+DHElOz5cdSxH6IBGlA==",
-			"dev": true,
-			"requires": {
-				"@sentry/hub": "6.16.1",
-				"@sentry/minimal": "6.16.1",
-				"@sentry/types": "6.16.1",
-				"@sentry/utils": "6.16.1",
-				"tslib": "^1.9.3"
-			}
-		},
-		"@sentry/types": {
-			"version": "6.16.1",
-			"resolved": "https://registry.npmjs.org/@sentry/types/-/types-6.16.1.tgz",
-			"integrity": "sha512-Wh354g30UsJ5kYJbercektGX4ZMc9MHU++1NjeN2bTMnbofEcpUDWIiKeulZEY65IC1iU+1zRQQgtYO+/hgCUQ==",
-			"dev": true
-		},
-		"@sentry/utils": {
-			"version": "6.16.1",
-			"resolved": "https://registry.npmjs.org/@sentry/utils/-/utils-6.16.1.tgz",
-			"integrity": "sha512-7ngq/i4R8JZitJo9Sl8PDnjSbDehOxgr1vsoMmerIsyRZ651C/8B+jVkMhaAPgSdyJ0AlE3O7DKKTP1FXFw9qw==",
-			"dev": true,
-			"requires": {
-				"@sentry/types": "6.16.1",
-				"tslib": "^1.9.3"
-			}
-		},
 		"@surma/rollup-plugin-off-main-thread": {
 			"version": "2.2.3",
 			"resolved": "https://registry.npmjs.org/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-2.2.3.tgz",
@@ -18103,15 +17885,6 @@
 				"@babel/runtime": "^7.7.6"
 			}
 		},
-		"hoist-non-react-statics": {
-			"version": "3.3.2",
-			"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
-			"integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
-			"dev": true,
-			"requires": {
-				"react-is": "^16.7.0"
-			}
-		},
 		"hook-std": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/hook-std/-/hook-std-2.0.0.tgz",
diff --git a/package.json b/package.json
index 992668ac..cc46a2c4 100644
--- a/package.json
+++ b/package.json
@@ -8,8 +8,6 @@
 		"@commitlint/config-conventional": "16.0.0",
 		"@fontsource/roboto": "4.5.1",
 		"@playwright/test": "1.18.0",
-		"@sentry/react": "6.16.1",
-		"@sentry/tracing": "6.16.1",
 		"@types/node": "17.0.10",
 		"@types/react": "17.0.38",
 		"@types/react-dom": "17.0.11",
diff --git a/src/docs/app.tsx b/src/docs/app.tsx
index bb8c8e5b..0d6ce383 100644
--- a/src/docs/app.tsx
+++ b/src/docs/app.tsx
@@ -1,5 +1,3 @@
-import { init } from "@sentry/react";
-import { BrowserTracing } from "@sentry/tracing";
 import {
 	AnchorButton,
 	Article,
@@ -15,7 +13,7 @@ import { StrictMode } from "react";
 import { render } from "react-dom";
 import { FaToriiGate } from "react-icons/fa";
 import { GiKatana, GiStarShuriken } from "react-icons/gi";
-import { MdEdit, MdLink } from "react-icons/md";
+import { MdEdit } from "react-icons/md";
 import { SiGithub, SiNetlify, SiNpm } from "react-icons/si";
 import {
 	BrowserRouter,
@@ -95,6 +93,17 @@ function App() {
 					examples && (
 						<Aside>
 							<ColorSchemeExample />
+							<Card appearance="filled" title="Contents">
+								<AnchorButton href="#anchor-button" label="AnchorButton" />
+								<AnchorButton href="#button" label="Button" />
+								<AnchorButton href="#button-menu" label="ButtonMenu" />
+								<AnchorButton href="#checkbox" label="Checkbox" />
+								<AnchorButton href="#input-menu" label="InputMenu" />
+								<AnchorButton href="#password-input" label="PasswordInput" />
+								<AnchorButton href="#radioset" label="RadioSet" />
+								<AnchorButton href="#text-input" label="TextInput" />
+								<AnchorButton href="#typography" label="Typography" />
+							</Card>
 						</Aside>
 					)
 				}
@@ -128,54 +137,6 @@ function App() {
 						)}
 					</Footer>
 				}
-				header={
-					examples && (
-						<Card appearance="outlined">
-							<section>
-								<AnchorButton
-									href="#button-example"
-									label="Button"
-									leadingIcon={<MdLink />}
-								/>
-								<AnchorButton
-									href="#anchor-button-example"
-									label="AnchorButton"
-									leadingIcon={<MdLink />}
-								/>
-								<AnchorButton
-									href="#text-input-example"
-									label="TextInput"
-									leadingIcon={<MdLink />}
-								/>
-								<AnchorButton
-									href="#button-menu-example"
-									label="ButtonMenu"
-									leadingIcon={<MdLink />}
-								/>
-								<AnchorButton
-									href="#input-menu-example"
-									label="InputMenu"
-									leadingIcon={<MdLink />}
-								/>
-								<AnchorButton
-									href="#checkbox-example"
-									label="Checkbox"
-									leadingIcon={<MdLink />}
-								/>
-								<AnchorButton
-									href="#radioset-example"
-									label="RadioSet"
-									leadingIcon={<MdLink />}
-								/>
-								<AnchorButton
-									href="#typography-example"
-									label="Typography"
-									leadingIcon={<MdLink />}
-								/>
-							</section>
-						</Card>
-					)
-				}
 			>
 				<Routes>
 					<Route element={<Overview />} path="/" />
@@ -187,14 +148,6 @@ function App() {
 	);
 }
 
-if (typeof import.meta.env.SENTRY_DSN === "string") {
-	init({
-		dsn: import.meta.env.SENTRY_DSN,
-		integrations: [new BrowserTracing()],
-		tracesSampleRate: 1.0,
-	});
-}
-
 render(
 	<StrictMode>
 		<BrowserRouter>
diff --git a/src/docs/pages/examples/anchor-button/index.tsx b/src/docs/pages/examples/anchor-button/index.tsx
index f4a86cee..66fe8d15 100644
--- a/src/docs/pages/examples/anchor-button/index.tsx
+++ b/src/docs/pages/examples/anchor-button/index.tsx
@@ -5,12 +5,12 @@ import { Link } from "react-router-dom";
 import styles from "../examples.module.css";
 import { ButtonState, useButtonState } from "./state";
 
-export function AnchorButtonExamples() {
+export function AnchorButtonExample() {
 	const state = useButtonState();
 	const [{ appearance, external, leadingIcon, reactRouterLink }] = state;
 
 	return (
-		<Card appearance="elevated" id="anchor-button-example" title="AnchorButton">
+		<Card appearance="elevated" id="anchor-button" title="AnchorButton">
 			<section>
 				<section className={styles.center}>
 					<AnchorButton
diff --git a/src/docs/pages/examples/button-menu/index.tsx b/src/docs/pages/examples/button-menu/index.tsx
index eb61de44..82d99613 100644
--- a/src/docs/pages/examples/button-menu/index.tsx
+++ b/src/docs/pages/examples/button-menu/index.tsx
@@ -4,12 +4,12 @@ import { MdMenu } from "react-icons/md";
 import styles from "../examples.module.css";
 import { InputMenuState, options, useButtonMenuState } from "./state";
 
-export function ButtonMenuExamples() {
+export function ButtonMenuExample() {
 	const state = useButtonMenuState();
 	const [{ appearance, disabled, leadingIcon }] = state;
 
 	return (
-		<Card appearance="elevated" id="button-menu-example" title="ButtonMenu">
+		<Card appearance="elevated" id="button-menu" title="ButtonMenu">
 			<section>
 				<section className={styles.center}>
 					<ButtonMenu
diff --git a/src/docs/pages/examples/button-menu/state.tsx b/src/docs/pages/examples/button-menu/state.tsx
index 3f041617..74cd568a 100644
--- a/src/docs/pages/examples/button-menu/state.tsx
+++ b/src/docs/pages/examples/button-menu/state.tsx
@@ -28,7 +28,7 @@ export function InputMenuState({
 				<InputMenu<Appearance>
 					defaultValue="Filled"
 					flex
-					id="input-menu-appearance"
+					id="button-menu-appearance"
 					label="Appearance"
 					name="appearance"
 					onChange={(appearance) =>
diff --git a/src/docs/pages/examples/button/index.tsx b/src/docs/pages/examples/button/index.tsx
index 24f0ebf0..4d8e16bb 100644
--- a/src/docs/pages/examples/button/index.tsx
+++ b/src/docs/pages/examples/button/index.tsx
@@ -4,18 +4,17 @@ import { MdArrowDropDown, MdThumbUp } from "react-icons/md";
 import styles from "../examples.module.css";
 import { ButtonState, useButtonState } from "./state";
 
-export function ButtonExamples() {
+export function ButtonExample() {
 	const state = useButtonState();
 	const [{ appearance, disabled, leadingIcon, trailingIcon }] = state;
 
 	return (
-		<Card appearance="elevated" id="button-example" title="Button">
+		<Card appearance="elevated" id="button" title="Button">
 			<section>
 				<section className={styles.center}>
 					<Button
 						appearance={appearance}
 						disabled={disabled}
-						id="button"
 						label="Label"
 						leadingIcon={leadingIcon && <MdThumbUp />}
 						trailingIcon={trailingIcon && <MdArrowDropDown />}
diff --git a/src/docs/pages/examples/checkbox/index.tsx b/src/docs/pages/examples/checkbox/index.tsx
index cd3c80fe..369280fc 100644
--- a/src/docs/pages/examples/checkbox/index.tsx
+++ b/src/docs/pages/examples/checkbox/index.tsx
@@ -3,12 +3,12 @@ import { Card, Checkbox } from "ninjakit";
 import styles from "../examples.module.css";
 import { CheckboxState, useButtonState } from "./state";
 
-export function CheckboxExamples() {
+export function CheckboxExample() {
 	const state = useButtonState();
 	const [{ disabled, indeterminate, labelWithJSX }] = state;
 
 	return (
-		<Card appearance="elevated" id="checkbox-example" title="Checkbox">
+		<Card appearance="elevated" id="checkbox" title="Checkbox">
 			<section>
 				<section className={styles.center}>
 					<Checkbox
diff --git a/src/docs/pages/examples/index.tsx b/src/docs/pages/examples/index.tsx
index 9808df39..81bffed8 100644
--- a/src/docs/pages/examples/index.tsx
+++ b/src/docs/pages/examples/index.tsx
@@ -1,22 +1,24 @@
-import { AnchorButtonExamples } from "./anchor-button";
-import { ButtonExamples } from "./button";
-import { ButtonMenuExamples } from "./button-menu";
-import { CheckboxExamples } from "./checkbox";
-import { InputMenuExamples } from "./input-menu";
-import { RadiosetExamples } from "./radioset";
-import { TextInputExamples } from "./text-input";
+import { AnchorButtonExample } from "./anchor-button";
+import { ButtonExample } from "./button";
+import { ButtonMenuExample } from "./button-menu";
+import { CheckboxExample } from "./checkbox";
+import { InputMenuExample } from "./input-menu";
+import { PasswordInputExample } from "./password-input";
+import { RadiosetExample } from "./radioset";
+import { TextInputExample } from "./text-input";
 import { TypographyExamples } from "./typography";
 
 export function Examples() {
 	return (
 		<>
-			<ButtonExamples />
-			<AnchorButtonExamples />
-			<TextInputExamples />
-			<ButtonMenuExamples />
-			<InputMenuExamples />
-			<CheckboxExamples />
-			<RadiosetExamples />
+			<AnchorButtonExample />
+			<ButtonExample />
+			<ButtonMenuExample />
+			<CheckboxExample />
+			<InputMenuExample />
+			<PasswordInputExample />
+			<RadiosetExample />
+			<TextInputExample />
 			<TypographyExamples />
 		</>
 	);
diff --git a/src/docs/pages/examples/input-menu/index.tsx b/src/docs/pages/examples/input-menu/index.tsx
index ce111a57..92851907 100644
--- a/src/docs/pages/examples/input-menu/index.tsx
+++ b/src/docs/pages/examples/input-menu/index.tsx
@@ -4,12 +4,12 @@ import { MdFavorite } from "react-icons/md";
 import styles from "../examples.module.css";
 import { InputMenuState, options, useInputMenuState } from "./state";
 
-export function InputMenuExamples() {
+export function InputMenuExample() {
 	const state = useInputMenuState();
 	const [{ appearance, error, flex, helper, leadingIcon }] = state;
 
 	return (
-		<Card appearance="elevated" id="input-menu-example" title="InputMenu">
+		<Card appearance="elevated" id="input-menu" title="InputMenu">
 			<section>
 				<section className={styles.center}>
 					<InputMenu
diff --git a/src/docs/pages/examples/input-menu/state.tsx b/src/docs/pages/examples/input-menu/state.tsx
index 313bd166..97812554 100644
--- a/src/docs/pages/examples/input-menu/state.tsx
+++ b/src/docs/pages/examples/input-menu/state.tsx
@@ -32,7 +32,7 @@ export function InputMenuState({
 				<InputMenu<"filled" | "outlined">
 					defaultValue="Filled"
 					flex
-					id="text-input-appearance"
+					id="input-menu-appearance"
 					label="Appearance"
 					name="appearance"
 					onChange={(appearance) =>
diff --git a/src/docs/pages/examples/password-input/index.tsx b/src/docs/pages/examples/password-input/index.tsx
new file mode 100644
index 00000000..d21596f2
--- /dev/null
+++ b/src/docs/pages/examples/password-input/index.tsx
@@ -0,0 +1,34 @@
+import { Card, PasswordInput } from "ninjakit";
+import { useRef } from "react";
+import { MdFavorite } from "react-icons/md";
+
+import styles from "../examples.module.css";
+import { PasswordInputState, usePasswordInputState } from "./state";
+
+export function PasswordInputExample() {
+	const ref = useRef<HTMLInputElement>(null);
+	const state = usePasswordInputState();
+	const [{ appearance, error, flex, helper, leadingIcon }] = state;
+
+	return (
+		<Card appearance="elevated" id="password-input" title="PasswordInput">
+			<section>
+				<section className={styles.center}>
+					<form autoComplete="off">
+						<PasswordInput
+							appearance={appearance}
+							error={error && "Invalid password"}
+							flex={flex}
+							helper={helper ? "8 characters minimum" : undefined}
+							id="password-input-example"
+							label="Password"
+							leadingIcon={leadingIcon && <MdFavorite />}
+							ref={ref}
+						/>
+					</form>
+				</section>
+				<PasswordInputState state={state} />
+			</section>
+		</Card>
+	);
+}
diff --git a/src/docs/pages/examples/password-input/state.tsx b/src/docs/pages/examples/password-input/state.tsx
new file mode 100644
index 00000000..8bab09db
--- /dev/null
+++ b/src/docs/pages/examples/password-input/state.tsx
@@ -0,0 +1,78 @@
+import { Checkbox, InputMenu } from "ninjakit";
+import { Dispatch, SetStateAction, useState } from "react";
+
+type PasswordInputProps = {
+	appearance: "filled" | "outlined";
+	error: boolean;
+	flex: boolean;
+	helper: boolean;
+	leadingIcon: boolean;
+};
+
+export function usePasswordInputState() {
+	return useState<PasswordInputProps>({
+		appearance: "filled",
+		error: false,
+		flex: true,
+		helper: false,
+		leadingIcon: false,
+	});
+}
+
+export function PasswordInputState({
+	state: [{ flex }, setState],
+}: {
+	state: [PasswordInputProps, Dispatch<SetStateAction<PasswordInputProps>>];
+}) {
+	return (
+		<aside>
+			<form>
+				<InputMenu<"filled" | "outlined">
+					defaultValue="Filled"
+					flex
+					id="password-input-appearance"
+					label="Appearance"
+					name="appearance"
+					onChange={(appearance) =>
+						setState((state) => ({ ...state, appearance }))
+					}
+					options={[
+						{ label: "Filled", value: "filled" },
+						{ label: "Outlined", value: "outlined" },
+					]}
+				/>
+				<Checkbox
+					defaultChecked={flex}
+					label="Flexible width"
+					onClick={() =>
+						setState((state) => ({
+							...state,
+							flex: !state.flex,
+						}))
+					}
+				/>
+				<Checkbox
+					label="Leading icon"
+					onClick={() =>
+						setState((state) => ({
+							...state,
+							leadingIcon: !state.leadingIcon,
+						}))
+					}
+				/>
+				<Checkbox
+					label="Helper message"
+					onClick={() =>
+						setState((state) => ({ ...state, helper: !state.helper }))
+					}
+				/>
+				<Checkbox
+					label="Error message"
+					onClick={() =>
+						setState((state) => ({ ...state, error: !state.error }))
+					}
+				/>
+			</form>
+		</aside>
+	);
+}
diff --git a/src/docs/pages/examples/radioset/index.tsx b/src/docs/pages/examples/radioset/index.tsx
index 7feea7f3..01b853bc 100644
--- a/src/docs/pages/examples/radioset/index.tsx
+++ b/src/docs/pages/examples/radioset/index.tsx
@@ -3,12 +3,12 @@ import { Card, Radioset } from "ninjakit";
 import styles from "../examples.module.css";
 import { RadiosetState, useRadiosetState } from "./state";
 
-export function RadiosetExamples() {
+export function RadiosetExample() {
 	const state = useRadiosetState();
 	const [{ disabled }] = state;
 
 	return (
-		<Card appearance="elevated" id="radioset-example" title="RadioSet">
+		<Card appearance="elevated" id="radioset" title="RadioSet">
 			<section>
 				<section className={styles.center}>
 					<Radioset<"item-one" | "item-two" | "item-three">
diff --git a/src/docs/pages/examples/text-input/index.tsx b/src/docs/pages/examples/text-input/index.tsx
index a35f0064..106e3ecc 100644
--- a/src/docs/pages/examples/text-input/index.tsx
+++ b/src/docs/pages/examples/text-input/index.tsx
@@ -5,30 +5,32 @@ import { MdCancel, MdFavorite } from "react-icons/md";
 import styles from "../examples.module.css";
 import { TextInputState, useTextInputState } from "./state";
 
-export function TextInputExamples() {
+export function TextInputExample() {
 	const ref = useRef<HTMLInputElement>(null);
 	const state = useTextInputState();
 	const [{ appearance, error, flex, helper, leadingIcon, trailingIcon }] =
 		state;
 
 	return (
-		<Card appearance="elevated" id="text-input-example" title="TextInput">
+		<Card appearance="elevated" id="text-input" title="TextInput">
 			<section>
 				<section className={styles.center}>
-					<TextInput
-						appearance={appearance}
-						error={error && "Error message"}
-						flex={flex}
-						helper={helper ? "Helper message" : undefined}
-						id="text-input-example"
-						label="Label"
-						leadingIcon={leadingIcon && <MdFavorite />}
-						onClickTrailingIcon={() => {
-							if (ref.current) ref.current.value = "";
-						}}
-						ref={ref}
-						trailingIcon={trailingIcon && <MdCancel />}
-					/>
+					<form autoComplete="off">
+						<TextInput
+							appearance={appearance}
+							error={error && "Error message"}
+							flex={flex}
+							helper={helper ? "Helper message" : undefined}
+							id="text-input-example"
+							label="Label"
+							leadingIcon={leadingIcon && <MdFavorite />}
+							onClickTrailingIcon={() => {
+								if (ref.current) ref.current.value = "";
+							}}
+							ref={ref}
+							trailingIcon={trailingIcon && <MdCancel />}
+						/>
+					</form>
 				</section>
 				<TextInputState state={state} />
 			</section>
diff --git a/src/docs/pages/examples/typography.tsx b/src/docs/pages/examples/typography.tsx
index ce9ef923..d78c7f1d 100644
--- a/src/docs/pages/examples/typography.tsx
+++ b/src/docs/pages/examples/typography.tsx
@@ -2,7 +2,7 @@ import { Card, Typography } from "ninjakit";
 
 export function TypographyExamples() {
 	return (
-		<Card appearance="elevated" id="typography-example" title="Typography">
+		<Card appearance="elevated" id="typography" title="Typography">
 			<Card appearance="outlined" title="Display">
 				<Typography appearance="displayLarge">Large</Typography>
 				<Typography appearance="displayMedium">Medium</Typography>
diff --git a/src/lib/components/button/button.spec.ts b/src/lib/components/button/button.spec.ts
index 5792e1a4..a024e4e0 100644
--- a/src/lib/components/button/button.spec.ts
+++ b/src/lib/components/button/button.spec.ts
@@ -5,7 +5,7 @@ import { test } from "../../test";
 test.describe("Button", () => {
 	test.describe("filled appearance", () => {
 		test("default", async ({ colors, page }) => {
-			const button = page.locator("id=button");
+			const button = page.locator("id=button >> button:has-text('Label')");
 
 			await expect(button).toHaveAttribute("type", "button");
 			await expect(button).toHaveText("Label");
@@ -21,7 +21,7 @@ test.describe("Button", () => {
 		});
 
 		test("hover", async ({ page }) => {
-			const button = page.locator("id=button");
+			const button = page.locator("id=button >> button:has-text('Label')");
 
 			await button.hover();
 
@@ -29,7 +29,7 @@ test.describe("Button", () => {
 		});
 
 		test("focus", async ({ page }) => {
-			const button = page.locator("id=button");
+			const button = page.locator("id=button >> button:has-text('Label')");
 
 			await button.focus();
 
@@ -37,7 +37,7 @@ test.describe("Button", () => {
 		});
 
 		test("disabled", async ({ colors, page }) => {
-			const button = page.locator("id=button");
+			const button = page.locator("id=button >> button:has-text('Label')");
 
 			await page.check("id=button-disabled-checkbox");
 
@@ -54,7 +54,7 @@ test.describe("Button", () => {
 
 	test.describe("elevated appearance", () => {
 		test("default", async ({ colors, page }) => {
-			const button = page.locator("id=button");
+			const button = page.locator("id=button >> button:has-text('Label')");
 
 			await page.click("id=button-appearance");
 			await page.click("id=button-appearance-menu >> button[value=elevated]");
@@ -74,7 +74,7 @@ test.describe("Button", () => {
 
 	test.describe("tonal appearance", () => {
 		test("default", async ({ colors, page }) => {
-			const button = page.locator("id=button");
+			const button = page.locator("id=button >> button:has-text('Label')");
 
 			await page.click("id=button-appearance");
 			await page.click("id=button-appearance-menu >> button[value=tonal]");
@@ -99,7 +99,7 @@ test.describe("Button", () => {
 		});
 
 		test("default", async ({ colors, page }) => {
-			const button = page.locator("id=button");
+			const button = page.locator("id=button >> button:has-text('Label')");
 
 			await expect(button).toHaveCSS("color", colors.primary);
 
@@ -115,7 +115,7 @@ test.describe("Button", () => {
 		});
 
 		test("disabled", async ({ colors, page }) => {
-			const button = page.locator("id=button");
+			const button = page.locator("id=button >> button:has-text('Label')");
 
 			await page.click("id=button-disabled-checkbox");
 
@@ -126,7 +126,7 @@ test.describe("Button", () => {
 
 	test.describe("text appearance", () => {
 		test("default", async ({ colors, page }) => {
-			const button = page.locator("id=button");
+			const button = page.locator("id=button >> button:has-text('Label')");
 
 			await page.click("id=button-appearance");
 			await page.click("id=button-appearance-menu >> button[value=text]");
diff --git a/src/lib/components/input/index.ts b/src/lib/components/input/index.ts
index c5a8dab7..bad5e58d 100644
--- a/src/lib/components/input/index.ts
+++ b/src/lib/components/input/index.ts
@@ -24,24 +24,28 @@ export function useClassName({
 	error,
 	leadingIcon,
 	override,
+	trailingIcon,
 }: {
 	appearance?: Appearance;
 	error?: ReactNode;
 	flex?: boolean;
 	leadingIcon?: ReactNode;
 	override?: string;
+	trailingIcon?: ReactNode;
 }): string | undefined {
 	return [
-		typography.labelLarge,
-		styles.field,
-		styles[appearance],
+		error ? styles.error : undefined,
 		flex ? styles.flex : undefined,
 		leadingIcon ? styles.leadingIcon : undefined,
-		error ? styles.error : undefined,
 		override,
+		styles.field,
+		styles[appearance],
+		trailingIcon ? styles.trailingIcon : undefined,
+		typography.labelLarge,
 	]
 		.join(" ")
 		.trim();
 }
 
+export { PasswordInput } from "./password";
 export { TextInput } from "./text";
diff --git a/src/lib/components/input/input.module.css b/src/lib/components/input/input.module.css
index 7ae16bc2..a561670a 100644
--- a/src/lib/components/input/input.module.css
+++ b/src/lib/components/input/input.module.css
@@ -118,6 +118,14 @@
 	left: 4.2rem;
 }
 
+.field.trailingIcon > .row > .input {
+	padding-right: 4.2rem;
+}
+
+.field.trailingIcon > .row > .label {
+	right: 4.2rem;
+}
+
 .field.filled > .row::before,
 .field.filled > .row > .input {
 	border-radius: 0.4rem 0.4rem 0 0;
diff --git a/src/lib/components/input/password.tsx b/src/lib/components/input/password.tsx
new file mode 100644
index 00000000..f1b10235
--- /dev/null
+++ b/src/lib/components/input/password.tsx
@@ -0,0 +1,27 @@
+import { TextInput } from "ninjakit";
+import { forwardRef, useState } from "react";
+import { MdVisibility, MdVisibilityOff } from "react-icons/md";
+
+import { InputProps } from ".";
+
+export const PasswordInput = forwardRef<
+	HTMLInputElement,
+	Omit<InputProps, "onClickTrailingIcon" | "trailingIcon"> &
+		Omit<JSX.IntrinsicElements["input"], "id" | "type">
+>(function PasswordInput({ id, ...props }, ref) {
+	const [visibility, setVisibility] = useState(false);
+
+	return (
+		<TextInput
+			{...props}
+			autoCapitalize="off"
+			autoCorrect="off"
+			id={id}
+			onClickTrailingIcon={() => setVisibility(!visibility)}
+			ref={ref}
+			spellCheck="false"
+			trailingIcon={visibility ? <MdVisibility /> : <MdVisibilityOff />}
+			type={visibility ? "text" : "password"}
+		/>
+	);
+});
diff --git a/src/lib/components/input/text.tsx b/src/lib/components/input/text.tsx
index b300c7d6..811b1fa4 100644
--- a/src/lib/components/input/text.tsx
+++ b/src/lib/components/input/text.tsx
@@ -5,7 +5,7 @@ import styles from "./input.module.css";
 
 export const TextInput = forwardRef<
 	HTMLInputElement,
-	Omit<JSX.IntrinsicElements["input"], "id"> & InputProps
+	InputProps & Omit<JSX.IntrinsicElements["input"], "id">
 >(function TextInput(
 	{
 		appearance,
@@ -18,8 +18,8 @@ export const TextInput = forwardRef<
 		id,
 		label,
 		leadingIcon,
-		name,
 		onClickTrailingIcon: handleClickTrailingIcon,
+		placeholder,
 		trailingIcon,
 		type = "text",
 		...props
@@ -32,6 +32,7 @@ export const TextInput = forwardRef<
 		flex,
 		leadingIcon,
 		override,
+		trailingIcon,
 	});
 
 	return (
@@ -43,8 +44,11 @@ export const TextInput = forwardRef<
 					aria-invalid={ariaInvalid || !!error}
 					className={styles.input}
 					id={id}
-					name={name}
-					placeholder={typeof label === "string" ? label : name || id}
+					placeholder={
+						placeholder || typeof label === "string"
+							? (label as string)
+							: undefined
+					}
 					ref={ref}
 					type={type}
 				/>
diff --git a/src/lib/index.ts b/src/lib/index.ts
index 492a2f32..b0e3528a 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -8,7 +8,7 @@ export { Checkbox } from "./components/checkbox";
 export { FloatingActionButton } from "./components/floating-action-button";
 export { Footer } from "./components/footer";
 export { Header } from "./components/header";
-export { TextInput } from "./components/input";
+export { PasswordInput, TextInput } from "./components/input";
 export { Main } from "./components/main";
 export { ButtonMenu, InputMenu } from "./components/menu";
 export { Nav } from "./components/nav";