laif-ds
Version:
Design System di Laif con componenti React basati su principi di Atomic Design
67 lines (66 loc) • 2.63 kB
JavaScript
"use client";
import { jsxs as a, jsx as e } from "react/jsx-runtime";
import * as x from "react";
import { cva as g } from "../../node_modules/class-variance-authority/dist/index.js";
import { cn as d } from "../../lib/utils.js";
import { Label as v } from "./label.js";
import { Icon as l } from "./icon.js";
const b = g(
"file:text-d-foreground placeholder:text-d-muted-foreground selection:bg-d-primary selection:text-d-primary-foreground border-d-input flex w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-sm transition-colors outline-none file:inline-flex file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
{
variants: {
size: {
default: "h-9 py-1 text-base md:text-sm file:h-7",
sm: "h-8 py-1 text-xs md:text-xs file:h-6",
lg: "h-10 py-2 text-lg md:text-lg file:h-8"
}
},
defaultVariants: {
size: "default"
}
}
), h = x.forwardRef(
({
className: o,
type: m,
label: r,
labelClassName: u,
id: p,
iconLeft: i,
iconRight: s,
size: t,
...f
}, c) => {
const n = p || (r ? `input-${Math.random().toString(36).substring(2, 9)}` : void 0);
return /* @__PURE__ */ a("div", { className: d("space-y-1.5", o), children: [
r && /* @__PURE__ */ e(v, { htmlFor: n, className: u, children: r }),
/* @__PURE__ */ a("div", { className: "relative w-full", children: [
i && /* @__PURE__ */ e("div", { className: "text-d-muted-foreground pointer-events-none absolute top-1/2 left-3 -translate-y-1/2", children: /* @__PURE__ */ e(l, { name: i, size: t === "lg" ? "sm" : "xs" }) }),
/* @__PURE__ */ e(
"input",
{
id: n,
type: m,
"data-slot": "input",
className: d(
b({ size: t }),
"focus-visible:ring-ring focus-visible:ring-1 focus-visible:outline-none",
"aria-invalid:ring-d-destructive/20 dark:aria-invalid:ring-d-destructive/40 aria-invalid:border-d-destructive",
"shadow-sm",
i ? t !== "lg" ? "pl-9" : "pl-10" : "",
s ? t !== "lg" ? "pr-9" : "pr-10" : ""
),
ref: c,
...f
}
),
s && /* @__PURE__ */ e("div", { className: "text-d-muted-foreground pointer-events-none absolute top-1/2 right-3 -translate-y-1/2", children: /* @__PURE__ */ e(l, { name: s, size: t === "lg" ? "sm" : "xs" }) })
] })
] });
}
);
h.displayName = "Input";
export {
h as Input,
b as inputVariants
};