输入框

import { Input } from "@/components/ui/input"

export function InputBasicStyles() {
  return (
    <div className="grid grid-cols-3 gap-4">
      <Input variant="outlined" defaultValue="olivia@untitledui.com" />
      <Input variant="filled" defaultValue="olivia@untitledui.com" />
      <Input variant="underlined" defaultValue="olivia@untitledui.com" />
    </div>
  )
}

import { Input } from "@/components/ui/input"

const sizes = [
  { code: "sm", height: 28, className: "h-[var(--size-control-sm)]" },
  { code: "md", height: 32, className: "h-[var(--size-control-md)]" },
  { code: "lg", height: 36, className: "h-[var(--size-control-lg)]" },
] as const

export function InputSizeVariants() {
  return (
    <div className="grid gap-4">
      {sizes.map((row) => (
        <div key={row.code} className="grid grid-cols-3 gap-4">
          <Input variant="outlined" defaultValue="olivia@untitledui.com" className={row.className} />
          <Input variant="filled" defaultValue="olivia@untitledui.com" className={row.className} />
          <Input variant="underlined" defaultValue="olivia@untitledui.com" className={row.className} />
        </div>
      ))}
    </div>
  )
}

import { Input } from "@/components/ui/input"

export function InputStateVariants() {
  return (
    <div className="grid grid-cols-3 gap-4">
      <Input defaultValue="olivia@untitledui.com" />
      <Input disabled defaultValue="olivia@untitledui.com" />
      <Input aria-invalid defaultValue="olivia@" />
      <p>olivia@untitledui.com</p>
      <Input defaultValue="olivia@untitledui.com" />
    </div>
  )
}

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { PhoneInput } from "@/components/ui/phone-input"
import { Icon } from "@/daren-design/icons/Icon"

export function InputSceneExample() {
  const [clearValue, setClearValue] = useState("olivia@untitledui.com")
  const [showPassword, setShowPassword] = useState(false)
  return (
    <div className="grid grid-cols-2 gap-6">
      <Input prefix={<Icon name="search" />} placeholder="Search" />
      <Input prefix={<span>https://</span>} defaultValue="untitledui.com" />
      <Input defaultValue="olivia" suffix={<span>@untitledui.com</span>} />
      <Input
        type={showPassword ? "text" : "password"}
        defaultValue="secret123"
        suffix={
          <Button type="button" variant="ghost" size="icon-xs" aria-label="显示密码" onClick={() => setShowPassword(!showPassword)}>
            <Icon name={showPassword ? "hide" : "view"} />
          </Button>
        }
      />
      <PhoneInput defaultCountryCode="+86" defaultValue="138 0000 0000" />
      <Input clearable value={clearValue} onChange={(event) => setClearValue(event.target.value)} onClear={() => setClearValue("")} />
    </div>
  )
}