Password documentation

Author: aaronshekey

app/routes/components.password-input.tsx

@@ -1,6 +1,6 @@
 import { code, CodeBlock, CodeBlockBody, CodeBlockCode, CodeBlockCopyButton } from "@/code-block";
 import { PasswordInput } from "@/password-input";
-import { Table, TableBody, TableHead, TableHeader, TableRow } from "@/table";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/table";
 import type { HeadersFunction, MetaFunction } from "@remix-run/node";
 import { Example } from "~/components/example";
 
@@ -24,17 +24,15 @@ export default function Page() {
 			<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 />
+				<PasswordInput className="max-w-64" />
+				<PasswordInput className="max-w-64" 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 />
-						</>
+						<PasswordInput  />
+						<PasswordInput aria-invalid />
 					`}</CodeBlockCode>
 				</CodeBlockBody>
 			</CodeBlock>
@@ -50,14 +48,11 @@ export default function Page() {
 						</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> */}
+						<TableRow>
+							<TableCell className="align-top font-medium">aria-invalid</TableCell>
+							<TableCell className="space-y-2 align-top text-xs">boolean</TableCell>
+							<TableCell className="align-top">false</TableCell>
+						</TableRow>
 					</TableBody>
 				</Table>
 			</div>