Text field

import { TextField } from "@/components/vip-ui/text-field";export function TextFieldBasicDemo() {  return (    <TextField      label="Project name"      placeholder="Studio North"      className="w-full max-w-sm"    />  );}

import { TextField } from "@/components/vip-ui/text-field";export function TextFieldDescriptionDemo() {  return (    <TextField      label="Username"      description="Use 3 to 20 letters or numbers."      placeholder="maya"      className="w-full max-w-sm"    />  );}

import { TextField } from "@/components/vip-ui/text-field";export function TextFieldDisabledDemo() {  return (    <TextField      label="Workspace URL"      defaultValue="vip-ui.app/studio"      isDisabled      className="w-full max-w-sm"    />  );}

import { TextField } from "@/components/vip-ui/text-field";export function TextFieldReadOnlyDemo() {  return (    <TextField      label="Reference ID"      defaultValue="VIP-204"      isReadOnly      className="w-full max-w-sm"    />  );}

"use client";import { useState } from "react";import {  TextField,  TextFieldError,  TextFieldInput,  TextFieldLabel,} from "@/components/vip-ui/text-field";export function TextFieldInvalidDemo() {  const [email, setEmail] = useState("maya@");  const isInvalid = !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);  return (    <TextField      value={email}      onChange={setEmail}      isInvalid={isInvalid}      type="email"      className="w-full max-w-sm"    >      <TextFieldLabel>Email address</TextFieldLabel>      <TextFieldInput />      <TextFieldError>Enter a valid email address.</TextFieldError>    </TextField>  );}

"use client";import { Button } from "@/components/vip-ui/button";import { TextField } from "@/components/vip-ui/text-field";export function TextFieldSizesDemo() {  return (    <div className="grid w-full max-w-md gap-3">      <div className="flex items-end gap-2">        <TextField          size="sm"          type="email"          aria-label="Email"          placeholder="name@example.com"          className="flex-1"        />        <Button size="sm">Invite</Button>      </div>      <div className="flex items-end gap-2">        <TextField          size="md"          type="email"          aria-label="Email"          placeholder="name@example.com"          className="flex-1"        />        <Button size="md">Invite</Button>      </div>      <div className="flex items-end gap-2">        <TextField          type="email"          aria-label="Email"          placeholder="name@example.com"          className="flex-1"        />        <Button size="lg">Invite</Button>      </div>      <div className="flex items-end gap-2">        <TextField          size="xl"          type="email"          aria-label="Email"          placeholder="name@example.com"          className="flex-1"        />        <Button size="xl">Invite</Button>      </div>    </div>  );}