laif-ds
Version:
Design System di Laif con componenti React basati su principi di Atomic Design
86 lines (85 loc) • 3.47 kB
JavaScript
"use client";
import { jsxs as i, jsx as e } from "react/jsx-runtime";
import * as c from "react";
import { cva as N } from "../../node_modules/class-variance-authority/dist/index.js";
import { cn as f } from "../../lib/utils.js";
import { Label as I } from "./label.js";
import { Icon as l } from "./icon.js";
const M = N(
"file:text-d-foreground placeholder:text-d-muted-foreground shadow-none selection:bg-d-primary selection:text-d-primary-foreground flex w-full min-w-0 rounded-md bg-d-input border border-d-border/50 px-3 py-1 text-base transition-all duration-200 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"
}
}
), P = c.forwardRef(
({
className: x,
type: m,
label: r,
labelClassName: g,
id: b,
iconLeft: a,
iconRight: o,
size: t,
...u
}, h) => {
const p = b || (r ? `input-${Math.random().toString(36).substring(2, 9)}` : void 0), n = m === "password", [s, v] = c.useState(!1), w = n ? s ? "text" : "password" : m, y = !!o || n;
return /* @__PURE__ */ i("div", { className: f("space-y-1.5", x), children: [
r && /* @__PURE__ */ e(I, { htmlFor: p, className: g, children: r }),
/* @__PURE__ */ i("div", { className: "relative w-full", children: [
a && /* @__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: a, size: t === "lg" ? "sm" : "xs" }) }),
/* @__PURE__ */ e(
"input",
{
id: p,
type: w,
"data-slot": "input",
className: f(
M({ size: t }),
"focus-visible:ring-d-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",
a ? t !== "lg" ? "pl-9" : "pl-10" : "",
y ? t !== "lg" ? "pr-9" : "pr-10" : ""
),
ref: h,
...u
}
),
n ? /* @__PURE__ */ i(
"button",
{
type: "button",
onClick: () => v((d) => !d),
onMouseDown: (d) => d.preventDefault(),
className: "text-d-muted-foreground absolute top-1/2 right-3 -translate-y-1/2",
"aria-label": s ? "Nascondi password" : "Mostra password",
disabled: u.disabled,
children: [
/* @__PURE__ */ e(
l,
{
name: s ? "EyeOff" : "Eye",
size: t === "lg" ? "sm" : "xs"
}
),
/* @__PURE__ */ e("span", { className: "sr-only", children: s ? "Nascondi password" : "Mostra password" })
]
}
) : o && /* @__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: o, size: t === "lg" ? "sm" : "xs" }) })
] })
] });
}
);
P.displayName = "Input";
export {
P as Input,
M as inputVariants
};