laif-ds
Version:
Design System di Laif con componenti React basati su principi di Atomic Design
195 lines (194 loc) • 6.28 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 w, ItemIndicator as z, ItemText as N, Separator as C, ScrollUpButton as I, ScrollDownButton as _ } from "../../node_modules/@radix-ui/react-select/dist/index.js";
import { cn as o } 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: s,
labelClassName: r,
...d
}) {
const n = c.useId();
return /* @__PURE__ */ i("div", { className: o("space-y-1.5", s), children: [
a && /* @__PURE__ */ e(j, { htmlFor: n, className: r, 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: s,
...r
}) {
const { size: d, id: n } = L(), l = a || d;
return /* @__PURE__ */ i(
x,
{
id: n,
"data-slot": "select-trigger",
"data-size": l,
className: o(
"border-d-input ring-offset-background data-[placeholder]:text-d-muted-foreground focus:ring-ring flex items-center justify-between rounded-md border bg-transparent px-3 py-2 whitespace-nowrap shadow-sm focus:ring-1 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
"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",
l === "default" && "h-9 text-sm",
l === "sm" && "h-8 text-xs",
l === "lg" && "h-10 text-lg",
t
),
...r,
children: [
s,
/* @__PURE__ */ e(h, { asChild: !0, children: /* @__PURE__ */ e(u, { className: "size-4 opacity-50" }) })
]
}
);
}
function J({
className: t,
children: a,
position: s = "popper",
...r
}) {
return /* @__PURE__ */ e(v, { children: /* @__PURE__ */ i(
b,
{
"data-slot": "select-content",
className: o(
"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 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",
s === "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: s,
...r,
children: [
/* @__PURE__ */ e(D, {}),
/* @__PURE__ */ e(
y,
{
className: o(
"p-1",
s === "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: o(
"text-d-secondary-foreground px-2 py-1.5 text-xs",
t
),
...a
}
);
}
function M({
className: t,
children: a,
...s
}) {
return /* @__PURE__ */ i(
w,
{
"data-slot": "select-item",
className: o(
"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
),
...s,
children: [
/* @__PURE__ */ e("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ e(z, { 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: o("bg-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: o(
"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: o(
"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
};