laif-ds
Version:
Design System di Laif con componenti React basati su principi di Atomic Design
210 lines (209 loc) • 6.5 kB
JavaScript
"use client";
import { jsxs as c, jsx as e } from "react/jsx-runtime";
import { Root as f, Portal as g, Content as x, Viewport as h, Group as v, Item as b, ItemIndicator as y, ItemText as S, Label as z, Separator as w, Trigger as N, Icon as C, Value as I, ScrollUpButton as _, ScrollDownButton as j } from "../../node_modules/@radix-ui/react-select/dist/index.js";
import * as u from "react";
import { designTokens as r } from "../design-tokens.js";
import { Label as k } from "./label.js";
import { cn as o } from "../../lib/utils.js";
import B from "../../node_modules/lucide-react/dist/esm/icons/check.js";
import p from "../../node_modules/lucide-react/dist/esm/icons/chevron-down.js";
import L from "../../node_modules/lucide-react/dist/esm/icons/chevron-up.js";
function E({
size: t = "default",
label: a,
className: s,
labelClassName: n,
...d
}) {
const l = u.useId();
return /* @__PURE__ */ c("div", { className: o("space-y-1.5", s), children: [
a && /* @__PURE__ */ e(k, { htmlFor: l, className: n, children: a }),
/* @__PURE__ */ e(m.Provider, { value: { size: t, id: l }, children: /* @__PURE__ */ e(f, { "data-slot": "select", ...d }) })
] });
}
const m = u.createContext({ size: "default" }), T = () => u.useContext(m);
function H({
...t
}) {
return /* @__PURE__ */ e(v, { "data-slot": "select-group", ...t });
}
function J({
...t
}) {
return /* @__PURE__ */ e(I, { "data-slot": "select-value", ...t });
}
function K({
className: t,
size: a,
children: s,
...n
}) {
const { size: d, id: l } = T(), i = a || d;
return /* @__PURE__ */ c(
N,
{
id: l,
"data-slot": "select-trigger",
"data-size": i,
className: o(
r.input.base,
r.radius.default,
r.text.base,
r.text.placeholder,
r.interaction.disabled,
"flex items-center justify-between px-3 py-2 whitespace-nowrap [&>span]:line-clamp-1",
// Focus states
"focus-visible:ring-d-ring/50 focus-visible:border-d-ring focus:outline-none focus-visible:ring-[3px]",
"data-[state=open]:ring-d-ring/50 data-[state=open]:border-d-ring data-[state=open]:ring-[3px]",
r.input.invalid,
"[&_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-200",
i === "default" && "h-9",
i === "sm" && "h-8 text-xs",
i === "lg" && "h-10 text-lg",
t
),
...n,
children: [
s,
/* @__PURE__ */ e(C, { asChild: !0, children: /* @__PURE__ */ e(p, { className: "size-4 opacity-50" }) })
]
}
);
}
function M({
className: t,
children: a,
position: s = "popper",
...n
}) {
return /* @__PURE__ */ e(g, { children: /* @__PURE__ */ c(
x,
{
"data-slot": "select-content",
className: o(
r.radius.default,
"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 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,
...n,
children: [
/* @__PURE__ */ e(D, {}),
/* @__PURE__ */ e(
h,
{
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 O({
className: t,
...a
}) {
return /* @__PURE__ */ e(
z,
{
"data-slot": "select-label",
className: o(
"text-d-secondary-foreground px-2 py-1.5 text-xs font-medium",
t
),
...a
}
);
}
function Q({
className: t,
children: a,
...s
}) {
return /* @__PURE__ */ c(
b,
{
"data-slot": "select-item",
className: o(
r.radius.sm,
"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 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(y, { children: /* @__PURE__ */ e(B, { className: "size-4" }) }) }),
/* @__PURE__ */ e(S, { children: a })
]
}
);
}
function W({
className: t,
...a
}) {
return /* @__PURE__ */ e(
w,
{
"data-slot": "select-separator",
className: o(
"bg-d-border pointer-events-none -mx-1 my-1 h-px",
t
),
...a
}
);
}
function D({
className: t,
...a
}) {
return /* @__PURE__ */ e(
_,
{
"data-slot": "select-scroll-up-button",
className: o(
"flex cursor-default items-center justify-center py-1",
t
),
...a,
children: /* @__PURE__ */ e(L, { className: "size-4" })
}
);
}
function R({
className: t,
...a
}) {
return /* @__PURE__ */ e(
j,
{
"data-slot": "select-scroll-down-button",
className: o(
"flex cursor-default items-center justify-center py-1",
t
),
...a,
children: /* @__PURE__ */ e(p, { className: "size-4" })
}
);
}
export {
E as Select,
M as SelectContent,
H as SelectGroup,
Q as SelectItem,
O as SelectLabel,
R as SelectScrollDownButton,
D as SelectScrollUpButton,
W as SelectSeparator,
K as SelectTrigger,
J as SelectValue
};