laif-ds
Version:
Design System di Laif con componenti React basati su principi di Atomic Design
203 lines (202 loc) • 6.52 kB
JavaScript
"use client";
import { jsxs as i, jsx as e } from "react/jsx-runtime";
import * as c from "react";
import { Root as p, Group as f, Value as g, Trigger as x, Icon as h, Portal as v, Content as b, Viewport as y, Label as S, Item as z, ItemIndicator as w, ItemText as N, Separator as C, ScrollUpButton as I, ScrollDownButton as _ } from "../../node_modules/@radix-ui/react-select/dist/index.js";
import { cn as s } from "../../lib/utils.js";
import { Label as j } from "./label.js";
import u from "../../node_modules/lucide-react/dist/esm/icons/chevron-down.js";
import k from "../../node_modules/lucide-react/dist/esm/icons/check.js";
import B from "../../node_modules/lucide-react/dist/esm/icons/chevron-up.js";
function q({
size: t = "default",
label: a,
className: r,
labelClassName: o,
...d
}) {
const n = c.useId();
return /* @__PURE__ */ i("div", { className: s("space-y-1.5", r), children: [
a && /* @__PURE__ */ e(j, { htmlFor: n, className: o, children: a }),
/* @__PURE__ */ e(m.Provider, { value: { size: t, id: n }, children: /* @__PURE__ */ e(p, { "data-slot": "select", ...d }) })
] });
}
const m = c.createContext({ size: "default" }), L = () => c.useContext(m);
function A({
...t
}) {
return /* @__PURE__ */ e(f, { "data-slot": "select-group", ...t });
}
function E({
...t
}) {
return /* @__PURE__ */ e(g, { "data-slot": "select-value", ...t });
}
function H({
className: t,
size: a,
children: r,
...o
}) {
const { size: d, id: n } = L(), l = a || d;
return /* @__PURE__ */ i(
x,
{
id: n,
"data-slot": "select-trigger",
"data-size": l,
className: s(
"border-d-border/50 ring-offset-background data-[placeholder]:text-d-muted-foreground bg-d-input flex items-center justify-between rounded-md border px-3 py-2 whitespace-nowrap focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
"focus-visible:ring-d-ring focus-visible:ring-1",
// Ring solo con tastiera
"data-[state=open]:ring-d-ring data-[state=open]:ring-1",
// Ring quando dropdown è aperto
"aria-invalid:ring-d-destructive/20 dark:aria-invalid:ring-d-destructive/40 aria-invalid:border-d-destructive",
"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
"*:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2",
"transition-all duration-300",
l === "default" && "h-9 text-sm",
l === "sm" && "h-8 text-xs",
l === "lg" && "h-10 text-lg",
t
),
...o,
children: [
r,
/* @__PURE__ */ e(h, { asChild: !0, children: /* @__PURE__ */ e(u, { className: "size-4 opacity-50" }) })
]
}
);
}
function J({
className: t,
children: a,
position: r = "popper",
...o
}) {
return /* @__PURE__ */ e(v, { children: /* @__PURE__ */ i(
b,
{
"data-slot": "select-content",
className: s(
"bg-d-popover text-d-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 border-d-border relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
r === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
t
),
position: r,
...o,
children: [
/* @__PURE__ */ e(D, {}),
/* @__PURE__ */ e(
y,
{
className: s(
"p-1",
r === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
),
children: a
}
),
/* @__PURE__ */ e(R, {})
]
}
) });
}
function K({
className: t,
...a
}) {
return /* @__PURE__ */ e(
S,
{
"data-slot": "select-label",
className: s(
"text-d-secondary-foreground px-2 py-1.5 text-xs",
t
),
...a
}
);
}
function M({
className: t,
children: a,
...r
}) {
return /* @__PURE__ */ i(
z,
{
"data-slot": "select-item",
className: s(
"focus:bg-d-accent focus:text-d-accent-foreground [&_svg:not([class*='text-'])]:text-d-secondary-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
t
),
...r,
children: [
/* @__PURE__ */ e("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ e(w, { children: /* @__PURE__ */ e(k, { className: "size-4" }) }) }),
/* @__PURE__ */ e(N, { children: a })
]
}
);
}
function O({
className: t,
...a
}) {
return /* @__PURE__ */ e(
C,
{
"data-slot": "select-separator",
className: s(
"bg-d-border pointer-events-none -mx-1 my-1 h-px",
t
),
...a
}
);
}
function D({
className: t,
...a
}) {
return /* @__PURE__ */ e(
I,
{
"data-slot": "select-scroll-up-button",
className: s(
"flex cursor-default items-center justify-center py-1",
t
),
...a,
children: /* @__PURE__ */ e(B, { className: "size-4" })
}
);
}
function R({
className: t,
...a
}) {
return /* @__PURE__ */ e(
_,
{
"data-slot": "select-scroll-down-button",
className: s(
"flex cursor-default items-center justify-center py-1",
t
),
...a,
children: /* @__PURE__ */ e(u, { className: "size-4" })
}
);
}
export {
q as Select,
J as SelectContent,
A as SelectGroup,
M as SelectItem,
K as SelectLabel,
R as SelectScrollDownButton,
D as SelectScrollUpButton,
O as SelectSeparator,
H as SelectTrigger,
E as SelectValue
};