input

1---
2// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/input/Input.astro directly.
3/**
4 * @component Input
5 * @title Input
6 * @description Base input field used in forms.
7 * @description A field for collecting user input.
8 * @figmaUrl https://www.figma.com/design/koxai7zw5vIuBzuVxe5T2l/bejamas-ui?node-id=2589-23428&t=YFStJ3V8fXEO8QD8-4
9 * @status stable
10 * @since 0.1.0
11 *
12 * @preview
13 *
14 * <Input type="text" placeholder="Enter your name" />
15 *
16 * @usage
17 *
18 * ```astro nocollapse
19 * ---
20 * import { Input } from '@bejamas/ui/components/input';
21 * ---
22 * <Input type="email" placeholder="Enter your email" />
23 * ```
24 *
25 * @examples
26 *
27 * ### Default
28 *
29 * <Input type="email" placeholder="Enter your email" />
30 *
31 * ### Disabled
32 *
33 * <Input type="email" placeholder="Enter your email" disabled />
34 *
35 * ### Sizes
36 *
37 * <div class="grid w-full max-w-sm gap-3">
38 *   <div class="flex items-center gap-2">
39 *     <Input size="sm" placeholder="Small input (h-8)" />
40 *     <Button size="sm" variant="outline">
41 *       Small
42 *     </Button>
43 *   </div>
44 *   <div class="flex items-center gap-2">
45 *     <Input placeholder="Default input (h-9)" />
46 *     <Button variant="outline">Default</Button>
47 *   </div>
48 *   <div class="flex items-center gap-2">
49 *     <Input size="lg" placeholder="Large input (h-10)" />
50 *     <Button size="lg" variant="outline">
51 *       Large
52 *     </Button>
53 *   </div>
54 * </div>
55 *
56 * ### File
57 *
58 * <div class="grid w-full max-w-sm items-center gap-3">
59 *   <Label htmlFor="picture">Picture</Label>
60 *   <Input id="picture" type="file" />
61 * </div>
62 *
63 * ### With Label
64 *
65 * <div class="grid w-full max-w-sm items-center gap-3">
66 *   <Label htmlFor="email">Email</Label>
67 *   <Input id="email" type="email" placeholder="Enter your email" />
68 * </div>
69 *
70 * ### With Button
71 *
72 *  <div class="flex w-full max-w-sm items-center gap-2">
73 *    <Input type="email" placeholder="Email" />
74 *    <Button type="submit" variant="outline">
75 *      Subscribe
76 *    </Button>
77 *  </div>
78 */
79 
80import { cn } from "@/lib/utils";
81import { cva, type VariantProps } from "class-variance-authority";
82import type { HTMLAttributes } from "astro/types";
83 
84const inputVariants = cva(
85  "w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
86  {
87    variants: {
88      size: {
89        sm: "data-[size=sm]",
90        default: "data-[size=default]",
91// … truncated