Input

"use client";

import { Mail } from "lucide-react";
import { TextField } from "@/components/miyuki-ui/input";

export default function InputDemo() {
  return (
    <TextField
      className="w-full max-w-sm"
      label="Email"
      type="email"
      autoComplete="email"
      placeholder="you@example.com"
      iconStart={<Mail />}
      description="We only write when the forecast changes."
    />
  );
}

"use client";

import { TextField } from "@/components/miyuki-ui/input";

export default function InputAddonsDemo() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-6">
      <TextField label="Website" prefix="https://" suffix=".jp" defaultValue="ryokan-shizuku" autoComplete="url" />
      <TextField label="Price per night" prefix="¥" defaultValue="18,400" inputMode="numeric" />
    </div>
  );
}

"use client";

import { TextField } from "@/components/miyuki-ui/input";

export default function InputStatesDemo() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-6">
      <TextField
        label="Booking reference"
        defaultValue="OTR-55"
        isInvalid
        errorMessage="References are eight characters, for example OTR-5521."
      />
      <TextField label="Departure station" defaultValue="Otaru" isDisabled description="Set by your rail pass." />
      <TextField label="Member since" defaultValue="March 2019" isReadOnly />
    </div>
  );
}

"use client";

import { useState } from "react";
import { ToggleButton } from "react-aria-components";
import { TextField } from "@/components/miyuki-ui/input";
import { MorphIcon, morphIcons } from "@/components/miyuki-ui/path-morph";

export default function InputPasswordDemo() {
  const [visible, setVisible] = useState(false);

  return (
    <TextField
      className="w-full max-w-sm"
      label="Password"
      type={visible ? "text" : "password"}
      autoComplete="current-password"
      defaultValue="otaru-canal-1284"
      description="At least 12 characters."
      action={
        <ToggleButton isSelected={visible} onChange={setVisible} aria-label="Show password">
          <MorphIcon shapes={morphIcons.eyeOpenClosed} shape={visible ? "open" : "closed"} size={16} />
        </ToggleButton>
      }
    />
  );
}