laif-ds/dist/components/ui/dropdown-menu.js

Design System di Laif con componenti React basati su principi di Atomic Design

"use client";
import { jsx as a, jsxs as i } from "react/jsx-runtime";
import * as r from "react";
import { Root as w, Trigger as x, Portal as N, Content as l, Item as m, Label as c, Separator as p, SubTrigger as f, SubContent as u, CheckboxItem as g, ItemIndicator as b, RadioItem as h } from "../../node_modules/@radix-ui/react-dropdown-menu/dist/index.js";
import { cn as s } from "../../lib/utils.js";
import y from "../../node_modules/lucide-react/dist/esm/icons/chevron-right.js";
import v from "../../node_modules/lucide-react/dist/esm/icons/check.js";
import R from "../../node_modules/lucide-react/dist/esm/icons/circle.js";
const B = w, E = x, I = r.forwardRef(({ className: e, inset: t, children: o, ...n }, d) => /* @__PURE__ */ i(
  f,
  {
    ref: d,
    className: s(
      "focus:bg-accent data-[state=open]:bg-accent flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
      t && "pl-8",
      e
    ),
    ...n,
    children: [
      o,
      /* @__PURE__ */ a(y, { className: "ml-auto" })
    ]
  }
));
I.displayName = f.displayName;
const C = r.forwardRef(({ className: e, ...t }, o) => /* @__PURE__ */ a(
  u,
  {
    ref: o,
    className: s(
      "bg-popover text-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 z-50 min-w-[8rem] origin-[--radix-dropdown-menu-content-transform-origin] overflow-hidden rounded-md border p-1 shadow-lg",
      e
    ),
    ...t
  }
));
C.displayName = u.displayName;
const D = r.forwardRef(({ className: e, sideOffset: t = 4, ...o }, n) => /* @__PURE__ */ a(N, { children: /* @__PURE__ */ a(
  l,
  {
    ref: n,
    sideOffset: t,
    className: s(
      "bg-popover text-popover-foreground border-d-border z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
      "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 origin-[--radix-dropdown-menu-content-transform-origin]",
      e
    ),
    ...o
  }
) }));
D.displayName = l.displayName;
const M = r.forwardRef(({ className: e, inset: t, ...o }, n) => /* @__PURE__ */ a(
  m,
  {
    ref: n,
    className: s(
      "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm transition-colors outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
      t && "pl-8",
      e
    ),
    ...o
  }
));
M.displayName = m.displayName;
const S = r.forwardRef(({ className: e, children: t, checked: o, ...n }, d) => /* @__PURE__ */ i(
  g,
  {
    ref: d,
    className: s(
      "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm transition-colors outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
      e
    ),
    checked: o,
    ...n,
    children: [
      /* @__PURE__ */ a("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ a(b, { children: /* @__PURE__ */ a(v, { className: "h-4 w-4" }) }) }),
      t
    ]
  }
));
S.displayName = g.displayName;
const z = r.forwardRef(({ className: e, children: t, ...o }, n) => /* @__PURE__ */ i(
  h,
  {
    ref: n,
    className: s(
      "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm transition-colors outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
      e
    ),
    ...o,
    children: [
      /* @__PURE__ */ a("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ a(b, { children: /* @__PURE__ */ a(R, { className: "h-2 w-2 fill-current" }) }) }),
      t
    ]
  }
));
z.displayName = h.displayName;
const k = r.forwardRef(({ className: e, inset: t, ...o }, n) => /* @__PURE__ */ a(
  c,
  {
    ref: n,
    className: s(
      "px-2 py-1.5 text-sm font-semibold",
      t && "pl-8",
      e
    ),
    ...o
  }
));
k.displayName = c.displayName;
const T = r.forwardRef(({ className: e, ...t }, o) => /* @__PURE__ */ a(
  p,
  {
    ref: o,
    className: s("bg-muted -mx-1 my-1 h-px", e),
    ...t
  }
));
T.displayName = p.displayName;
export {
  B as DropdownMenu,
  S as DropdownMenuCheckboxItem,
  D as DropdownMenuContent,
  M as DropdownMenuItem,
  k as DropdownMenuLabel,
  z as DropdownMenuRadioItem,
  T as DropdownMenuSeparator,
  C as DropdownMenuSubContent,
  I as DropdownMenuSubTrigger,
  E as DropdownMenuTrigger
};