Input

import { Input } from "@camome/core/Input";

export default function Default() {
  return <Input label="Name" placeholder="John Doe" />;
}

import { Input } from "@camome/core/Input";

import styles from "./styles.module.scss";

export default function Size() {
  return (
    <div className={styles.size__container}>
      <Input label="Small" placeholder="John Doe" size="sm" />
      <Input label="Medium" placeholder="John Doe" size="md" />
      <Input label="Large" placeholder="John Doe" size="lg" />
    </div>
  );
}

import { Input } from "@camome/core/Input";

export default function Required() {
  return <Input label="Name" placeholder="John Doe" required />;
}

import { Input } from "@camome/core/Input";

export default function Fill() {
  return <Input label="Name" placeholder="John Doe" fill />;
}

Fill.parameters = {
  layout: "padded",
};

import { Input } from "@camome/core/Input";

export default function Description() {
  return (
    <Input label="Name" description="Description text" placeholder="John Doe" />
  );
}

import { Input } from "@camome/core/Input";

export default function Error() {
  return (
    <Input label="Name" error="Something is wrong" placeholder="John Doe" />
  );
}

import { Input } from "@camome/core/Input";

export default function Disabled() {
  return <Input label="Name" placeholder="John Doe" disabled />;
}

import MagnifyingGlassIcon from "@heroicons/react/24/outline/MagnifyingGlassIcon";

import { Input } from "@camome/core/Input";
import { InputGroup } from "@camome/core/InputGroup";
import { Kbd } from "@camome/core/Kbd";

import styles from "./styles.module.scss";

export default function Group() {
  return (
    <InputGroup
      input={<Input type="search" size="md" placeholder="Search" />}
      startDecorator={
        <MagnifyingGlassIcon
          strokeWidth="2.5"
          style={{ color: "var(--cmm-color-font-subtle)" }}
        />
      }
      endDecorator={
        <div
          style={{
            display: "flex",
            fontSize: "0.9rem",
          }}
        >
          <Kbd>⌘ K</Kbd>
        </div>
      }
      className={styles.group}
    />
  );
}