laif-ds
Version:
Design System di Laif con componenti React basati su principi di Atomic Design
155 lines (154 loc) • 4.24 kB
JavaScript
"use client";
import { jsxs as s, jsx as e, Fragment as $ } from "react/jsx-runtime";
import * as A from "react";
import { designTokens as v } from "../design-tokens.js";
import { cn as r } from "../../lib/utils.js";
import { Checkbox as H } from "./checkbox.js";
import { Icon as L } from "./icon.js";
import { Label as R } from "./label.js";
const i = ({ content: t }) => typeof t == "string" ? /* @__PURE__ */ e("span", { children: t }) : t, q = ({ option: t }) => /* @__PURE__ */ s($, { children: [
/* @__PURE__ */ s(
"div",
{
className: r(
"text-d-foreground flex flex-row items-center gap-1.5",
v.text.base
),
children: [
t.icon && /* @__PURE__ */ e(L, { size: "xs", className: "min-h-4 min-w-4", name: t.icon }),
/* @__PURE__ */ e(i, { content: t.label })
]
}
),
t.description && /* @__PURE__ */ e("div", { className: "text-d-foreground text-xs font-light", children: /* @__PURE__ */ e(i, { content: t.description }) })
] }), B = ({
option: t,
optionId: n,
isDisabled: l,
isCard: m,
optionClassName: a,
isChecked: o,
onCheckedChange: x
}) => /* @__PURE__ */ s(
R,
{
htmlFor: n,
className: r(
"flex items-center gap-2",
l ? "cursor-not-allowed opacity-50" : "cursor-pointer",
m && r(
"bg-d-card border-d-border border p-2 shadow",
v.radius.lg
),
a
),
children: [
/* @__PURE__ */ e(
H,
{
id: n,
checked: o,
onCheckedChange: x,
disabled: l
}
),
/* @__PURE__ */ e(
"div",
{
className: r(
"flex flex-1 flex-col items-start gap-1",
l ? "cursor-not-allowed" : "cursor-pointer"
),
children: /* @__PURE__ */ e(q, { option: t })
}
)
]
}
);
function W({
options: t,
value: n,
defaultValue: l,
onValueChange: m,
label: a,
description: o,
disabled: x = !1,
required: N = !1,
name: b,
orientation: C = "vertical",
className: k = "",
wrpClassName: w = "",
optionClassName: y = "",
layout: z = "default",
error: f,
id: O,
"data-testid": V
}) {
const j = C === "horizontal", F = z === "card", [I, P] = A.useState(
l || []
), g = n !== void 0, h = g ? n : I, S = (c, u) => {
const d = u ? [...h, c] : h.filter((p) => p !== c);
g || P(d), m?.(d);
};
return /* @__PURE__ */ s(
"div",
{
className: r("flex w-full flex-col gap-2", w),
id: O,
"data-testid": V,
children: [
(a || o) && /* @__PURE__ */ s("div", { className: "flex flex-col gap-1", children: [
a && /* @__PURE__ */ s(
"div",
{
className: r(
"flex items-center gap-1 text-sm font-medium",
f ? "text-d-destructive" : "text-d-foreground"
),
children: [
/* @__PURE__ */ e(i, { content: a }),
N && /* @__PURE__ */ e("span", { children: "*" })
]
}
),
o && /* @__PURE__ */ e("div", { className: "text-bodySecondary text-xs", children: /* @__PURE__ */ e(i, { content: o }) })
] }),
/* @__PURE__ */ e(
"div",
{
className: r(
"flex gap-2",
j ? "flex-row" : "flex-col",
k
),
children: t.map((c) => {
const u = `${b || "checkbox"}-${c.value}`, d = x || !!c.disabled, p = h.includes(c.value);
return /* @__PURE__ */ e(
B,
{
isCard: F,
...{
option: c,
optionId: u,
isDisabled: d,
optionClassName: y,
isChecked: p,
onCheckedChange: (T) => S(c.value, T)
}
},
c.value
);
})
}
),
f && /* @__PURE__ */ s("div", { className: "text-d-destructive text-xs font-medium", children: [
"*",
f
] })
]
}
);
}
export {
W as AppCheckbox
};