@rafal.lemieszewski/tide-ui 0.83.0 → 0.84.3

package/dist/es/components/fundamental/dropdown-menu.js

@@ -0,0 +1,600 @@
+import { jsx as r, jsxs as p } from "react/jsx-runtime";
+import * as n from "react";
+import * as c from "@radix-ui/react-dropdown-menu";
+import { ChevronLeft as z, ChevronRight as h, Check as g, Circle as w } from "lucide-react";
+import { cn as u } from "../../lib/utils.js";
+import { useIsDesktop as j } from "../../lib/hooks.js";
+import { Drawer as _, DrawerTrigger as P, DrawerContent as B, DrawerClose as y } from "./drawer.js";
+import { Icon as x } from "./icon.js";
+const W = c.Root, $ = c.Trigger, ce = c.Group, E = /* @__PURE__ */ n.forwardRef(({ className: t, inset: o, children: e, ...a }, s) => /* @__PURE__ */ p(
+  c.SubTrigger,
+  {
+    ref: s,
+    className: u(
+      "text-body-md flex [&]:cursor-pointer select-none items-center rounded-m px-[var(--space-m)] h-[var(--size-m)] outline-none focus:bg-[var(--color-background-neutral-subtlest-hovered)] hover:bg-[var(--color-background-neutral-subtlest-hovered)] data-[state=open]:bg-[var(--color-background-neutral-subtlest-hovered)]",
+      o && "pl-8",
+      t
+    ),
+    ...a,
+    children: [
+      e,
+      /* @__PURE__ */ r(h, { className: "ml-auto h-4 w-4" })
+    ]
+  }
+));
+E.displayName = c.SubTrigger.displayName;
+const G = /* @__PURE__ */ n.forwardRef(({ className: t, ...o }, e) => /* @__PURE__ */ r(
+  c.SubContent,
+  {
+    ref: e,
+    className: u(
+      "z-50 min-w-[12rem] overflow-hidden rounded-l border border-[var(--color-border-primary-subtle)] bg-[var(--color-surface-primary)] p-[var(--space-xs)] text-[var(--color-text-primary)] shadow-lg 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",
+      t
+    ),
+    ...o
+  }
+));
+G.displayName = c.SubContent.displayName;
+const k = /* @__PURE__ */ n.forwardRef(({ className: t, sideOffset: o = 4, ...e }, a) => /* @__PURE__ */ r(c.Portal, { children: /* @__PURE__ */ r(
+  c.Content,
+  {
+    ref: a,
+    sideOffset: o,
+    className: u(
+      "z-50 min-w-[16rem] overflow-hidden rounded-l border border-[var(--color-border-primary-subtle)] bg-[var(--color-surface-primary)] p-[var(--space-s)] text-[var(--color-text-primary)] shadow-xl 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",
+      t
+    ),
+    ...e
+  }
+) }));
+k.displayName = c.Content.displayName;
+const N = /* @__PURE__ */ n.forwardRef(({ className: t, inset: o, destructive: e, icon: a, children: s, ...l }, i) => /* @__PURE__ */ p(
+  c.Item,
+  {
+    ref: i,
+    className: u(
+      "[&]:text-body-md relative flex [&]:cursor-pointer select-none items-center rounded-m px-[var(--space-m)] h-[var(--size-m)] outline-none transition-colors focus:bg-[var(--color-background-neutral-subtlest-hovered)] focus:text-[var(--color-text-primary)] hover:bg-[var(--color-background-neutral-subtlest-hovered)] hover:text-[var(--color-text-primary)] [&]:data-[disabled]:!cursor-not-allowed data-[disabled]:opacity-50 data-[disabled]:hover:bg-transparent data-[disabled]:focus:bg-transparent [&[data-disabled]_*]:!cursor-not-allowed",
+      e && "text-[var(--color-text-error-bold)] hover:text-[var(--color-text-error-bold)] focus:text-[var(--color-text-error-bold)] hover:bg-[var(--color-background-error-subtle)] focus:bg-[var(--color-background-error-subtle)] [&>svg]:text-[var(--color-icon-error-bold)]",
+      o && "pl-8",
+      t
+    ),
+    ...l,
+    children: [
+      a && /* @__PURE__ */ r(x, { name: a, size: "m", className: "mr-2" }),
+      s
+    ]
+  }
+));
+N.displayName = c.Item.displayName;
+const V = /* @__PURE__ */ n.forwardRef(({ className: t, children: o, checked: e, ...a }, s) => /* @__PURE__ */ p(
+  c.CheckboxItem,
+  {
+    ref: s,
+    className: u(
+      "text-body-md relative flex [&]:cursor-pointer select-none items-center rounded-m h-[var(--size-m)] pl-10 pr-[var(--space-m)] outline-none transition-colors focus:bg-[var(--color-background-neutral-subtlest-hovered)] focus:text-[var(--color-text-primary)] hover:bg-[var(--color-background-neutral-subtlest-hovered)] hover:text-[var(--color-text-primary)] [&]:data-[disabled]:!cursor-not-allowed data-[disabled]:opacity-50 data-[disabled]:hover:bg-transparent data-[disabled]:focus:bg-transparent [&[data-disabled]_*]:!cursor-not-allowed",
+      t
+    ),
+    checked: e,
+    onSelect: (l) => l.preventDefault(),
+    ...a,
+    children: [
+      /* @__PURE__ */ r("span", { className: "absolute left-[var(--space-m)] flex h-4 w-4 items-center justify-center rounded-s border border-[var(--color-interaction-border-input)] bg-[var(--color-surface-primary)]", children: /* @__PURE__ */ r(c.ItemIndicator, { children: /* @__PURE__ */ r("div", { className: "h-4 w-4 rounded-s border border-[var(--color-background-blue-bold)] bg-[var(--color-background-blue-bold)] flex items-center justify-center", children: /* @__PURE__ */ r(g, { className: "h-3 w-3 text-[var(--color-text-on-action)]" }) }) }) }),
+      o
+    ]
+  }
+));
+V.displayName = c.CheckboxItem.displayName;
+const A = /* @__PURE__ */ n.forwardRef(({ className: t, children: o, ...e }, a) => /* @__PURE__ */ p(
+  c.RadioItem,
+  {
+    ref: a,
+    className: u(
+      "text-body-md relative flex [&]:cursor-pointer select-none items-center rounded-m h-[var(--size-m)] pl-10 pr-[var(--space-m)] outline-none transition-colors focus:bg-[var(--color-background-neutral-subtlest-hovered)] focus:text-[var(--color-text-primary)] hover:bg-[var(--color-background-neutral-subtlest-hovered)] hover:text-[var(--color-text-primary)] [&]:data-[disabled]:!cursor-not-allowed data-[disabled]:opacity-50 data-[disabled]:hover:bg-transparent data-[disabled]:focus:bg-transparent [&[data-disabled]_*]:!cursor-not-allowed [&[data-state=checked]_span]:border-[var(--color-border-brand-bold)] [&[data-state=checked]_span]:bg-[var(--color-background-blue-bold)] [&[data-state=checked]_span]:text-[var(--color-text-on-action)]",
+      t
+    ),
+    onSelect: (s) => s.preventDefault(),
+    ...e,
+    children: [
+      /* @__PURE__ */ r("span", { className: "absolute left-[var(--space-m)] flex h-4 w-4 items-center justify-center rounded-full border-2 border-[var(--color-interaction-border-input)] bg-[var(--color-surface-primary)]", children: /* @__PURE__ */ r(c.ItemIndicator, { className: "flex h-full w-full items-center justify-center rounded-full text-current", children: /* @__PURE__ */ r(w, { className: "h-[6px] w-[6px] fill-current" }) }) }),
+      o
+    ]
+  }
+));
+A.displayName = c.RadioItem.displayName;
+const H = /* @__PURE__ */ n.forwardRef(({ className: t, inset: o, ...e }, a) => /* @__PURE__ */ r(
+  c.Label,
+  {
+    ref: a,
+    className: u(
+      "[&]:text-body-medium-sm px-[var(--space-m)] py-[var(--space-s)] text-[var(--color-text-tertiary)]",
+      o && "pl-8",
+      t
+    ),
+    ...e
+  }
+));
+H.displayName = c.Label.displayName;
+const X = /* @__PURE__ */ n.forwardRef(({ className: t, ...o }, e) => /* @__PURE__ */ r(
+  c.Separator,
+  {
+    ref: e,
+    className: u("-mx-2 my-[var(--space-s)] h-px bg-[var(--color-border-primary-subtle)]", t),
+    ...o
+  }
+));
+X.displayName = c.Separator.displayName;
+const D = /* @__PURE__ */ n.forwardRef(({ className: t, inset: o, destructive: e, icon: a, autoClose: s = !0, onSelect: l, children: i, ...b }, d) => {
+  const m = /* @__PURE__ */ p(
+    "div",
+    {
+      ref: d,
+      className: u(
+        "[&]:text-body-md relative flex [&]:cursor-pointer select-none items-center rounded-m px-[var(--space-m)] h-[var(--size-l)] outline-none transition-colors focus:bg-[var(--color-background-neutral-subtlest-hovered)] focus:text-[var(--color-text-primary)] hover:bg-[var(--color-background-neutral-subtlest-hovered)] hover:text-[var(--color-text-primary)] active:bg-[var(--color-background-neutral-subtlest-hovered)]",
+        e && "text-[var(--color-text-error-bold)] hover:text-[var(--color-text-error-bold)] focus:text-[var(--color-text-error-bold)] hover:bg-[var(--color-background-error-subtle)] focus:bg-[var(--color-background-error-subtle)] [&>svg]:text-[var(--color-icon-error-bold)]",
+        o && "pl-8",
+        t
+      ),
+      onClick: (f) => l?.(f.nativeEvent),
+      role: "menuitem",
+      tabIndex: 0,
+      ...b,
+      children: [
+        a && /* @__PURE__ */ r(x, { name: a, size: "m", className: "mr-2" }),
+        i
+      ]
+    }
+  );
+  return s ? /* @__PURE__ */ r(y, { asChild: !0, children: m }) : m;
+});
+D.displayName = "MobileDropdownItem";
+const C = /* @__PURE__ */ n.forwardRef(({ className: t, children: o, checked: e, autoClose: a = !1, onCheckedChange: s, ...l }, i) => {
+  const b = /* @__PURE__ */ p(
+    "div",
+    {
+      ref: i,
+      className: u(
+        "text-body-md relative flex [&]:cursor-pointer select-none items-center rounded-m h-[var(--size-l)] pl-10 pr-[var(--space-m)] outline-none transition-colors focus:bg-[var(--color-background-neutral-subtlest-hovered)] focus:text-[var(--color-text-primary)] hover:bg-[var(--color-background-neutral-subtlest-hovered)] hover:text-[var(--color-text-primary)] active:bg-[var(--color-background-neutral-subtlest-hovered)]",
+        t
+      ),
+      onClick: () => s?.(!e),
+      role: "menuitemcheckbox",
+      "aria-checked": e,
+      tabIndex: 0,
+      ...l,
+      children: [
+        /* @__PURE__ */ r("span", { className: "absolute left-[var(--space-m)] flex h-4 w-4 items-center justify-center rounded-s border border-[var(--color-interaction-border-input)] bg-[var(--color-surface-primary)]", children: e && /* @__PURE__ */ r("div", { className: "h-4 w-4 rounded-s border border-[var(--color-background-blue-bold)] bg-[var(--color-background-blue-bold)] flex items-center justify-center", children: /* @__PURE__ */ r(g, { className: "h-3 w-3 text-[var(--color-text-on-action)]" }) }) }),
+        o
+      ]
+    }
+  );
+  return a ? /* @__PURE__ */ r(y, { asChild: !0, children: b }) : b;
+});
+C.displayName = "MobileDropdownCheckboxItem";
+const M = /* @__PURE__ */ n.forwardRef(({ className: t, children: o, value: e, checked: a, icon: s, autoClose: l = !0, onRadioSelect: i, ...b }, d) => {
+  const m = /* @__PURE__ */ p(
+    "div",
+    {
+      ref: d,
+      className: u(
+        "text-body-md relative flex [&]:cursor-pointer select-none items-center rounded-m h-[var(--size-l)] pl-10 pr-[var(--space-m)] outline-none transition-colors focus:bg-[var(--color-background-neutral-subtlest-hovered)] focus:text-[var(--color-text-primary)] hover:bg-[var(--color-background-neutral-subtlest-hovered)] hover:text-[var(--color-text-primary)] active:bg-[var(--color-background-neutral-subtlest-hovered)]",
+        t
+      ),
+      onClick: () => i?.(e),
+      role: "menuitemradio",
+      "aria-checked": a,
+      tabIndex: 0,
+      ...b,
+      children: [
+        /* @__PURE__ */ r("span", { className: u(
+          "absolute left-[var(--space-m)] flex h-4 w-4 items-center justify-center rounded-full border-2 border-[var(--color-interaction-border-input)] bg-[var(--color-surface-primary)]",
+          a && "border-[var(--color-border-brand-bold)] bg-[var(--color-background-blue-bold)] text-[var(--color-text-on-action)]"
+        ), children: a && /* @__PURE__ */ r(w, { className: "h-[6px] w-[6px] fill-current" }) }),
+        s && /* @__PURE__ */ r(x, { name: s, size: "m", className: "mr-2 ml-6" }),
+        o
+      ]
+    }
+  );
+  return l ? /* @__PURE__ */ r(y, { asChild: !0, children: m }) : m;
+});
+M.displayName = "MobileDropdownRadioItem";
+const R = /* @__PURE__ */ n.forwardRef(({ className: t, inset: o, ...e }, a) => /* @__PURE__ */ r(
+  "div",
+  {
+    ref: a,
+    className: u(
+      "[&]:text-body-medium-sm px-[var(--space-m)] pt-[var(--space-m)] pb-[var(--space-s)] text-[var(--color-text-tertiary)]",
+      o && "pl-8",
+      t
+    ),
+    ...e
+  }
+));
+R.displayName = "MobileDropdownLabel";
+const I = /* @__PURE__ */ n.forwardRef(({ className: t, ...o }, e) => /* @__PURE__ */ r(
+  "div",
+  {
+    ref: e,
+    className: u("-mx-2 my-[var(--space-s)] h-px bg-[var(--color-border-primary-subtle)]", t),
+    role: "separator",
+    ...o
+  }
+));
+I.displayName = "MobileDropdownSeparator";
+const v = n.createContext({ isDesktop: !0 }), ie = ({ children: t }) => {
+  const o = j(), e = n.useMemo(() => ({ isDesktop: o }), [o]);
+  return o ? /* @__PURE__ */ r(v.Provider, { value: e, children: /* @__PURE__ */ r(W, { children: t }) }) : /* @__PURE__ */ r(v.Provider, { value: e, children: /* @__PURE__ */ r(K, { children: /* @__PURE__ */ r(_, { children: t }) }) });
+}, q = /* @__PURE__ */ n.forwardRef(({ className: t, sideOffset: o = 4, children: e, ...a }, s) => {
+  const { isDesktop: l } = n.useContext(v);
+  return l ? /* @__PURE__ */ r(
+    k,
+    {
+      ref: s,
+      sideOffset: o,
+      className: t,
+      ...a,
+      children: e
+    }
+  ) : /* @__PURE__ */ p(
+    B,
+    {
+      ref: s,
+      className: u(
+        "p-0",
+        // Remove default padding since we handle spacing in MenuLevelContainer
+        t
+      ),
+      ...a,
+      children: [
+        /* @__PURE__ */ r(O, { children: /* @__PURE__ */ r("div", { className: "space-y-[var(--space-xs)] px-[var(--space-m)] pt-[var(--space-s)] pb-[var(--space-m)]", children: e }) }),
+        /* @__PURE__ */ r("div", { className: "h-[env(safe-area-inset-bottom)] pb-1" })
+      ]
+    }
+  );
+});
+q.displayName = "ResponsiveDropdownMenuContent";
+const F = /* @__PURE__ */ n.forwardRef(({ asChild: t, children: o, ...e }, a) => {
+  const { isDesktop: s } = n.useContext(v);
+  if (s)
+    return /* @__PURE__ */ r($, { ref: a, asChild: t, ...e, children: o });
+  const l = t ? {} : {
+    style: {
+      touchAction: "manipulation",
+      WebkitTapHighlightColor: "transparent",
+      ...e.style
+    }
+  };
+  return /* @__PURE__ */ r(
+    P,
+    {
+      ref: a,
+      asChild: t,
+      ...e,
+      ...l,
+      children: o
+    }
+  );
+});
+F.displayName = "ResponsiveDropdownMenuTrigger";
+const J = n.createContext({}), S = n.createContext({
+  navigationState: { levels: [], currentLevelIndex: 0, isTransitioning: !1 },
+  navigateToSubmenu: () => {
+  },
+  navigateBack: () => {
+  },
+  registerMenuLevel: () => {
+  },
+  isCurrentLevel: () => !1
+}), L = n.createContext({
+  submenuContent: null,
+  submenuTitle: "",
+  setSubmenuContent: () => {
+  },
+  setSubmenuTitle: () => {
+  },
+  triggerNavigation: () => {
+  }
+}), K = ({ children: t }) => {
+  const [o, e] = n.useState({
+    levels: [],
+    currentLevelIndex: 0,
+    isTransitioning: !1
+  }), a = n.useCallback((d, m) => {
+    e((f) => {
+      const T = {
+        id: `${m}-${Date.now()}`,
+        ...d
+      };
+      return {
+        levels: [...f.levels, T],
+        currentLevelIndex: f.levels.length,
+        isTransitioning: !0
+      };
+    }), setTimeout(() => {
+      e((f) => ({ ...f, isTransitioning: !1 }));
+    }, 300);
+  }, []), s = n.useCallback(() => {
+    e((d) => d.currentLevelIndex === 0 ? d : {
+      levels: d.levels.slice(0, -1),
+      currentLevelIndex: d.currentLevelIndex - 1,
+      isTransitioning: !0
+    }), setTimeout(() => {
+      e((d) => ({ ...d, isTransitioning: !1 }));
+    }, 300);
+  }, []), l = n.useCallback((d) => {
+    e((m) => ({
+      ...m,
+      levels: m.levels.some((f) => f.id === d.id) ? m.levels : [...m.levels, d]
+    }));
+  }, []), i = n.useCallback((d) => o.levels[o.currentLevelIndex]?.id === d, [o]), b = n.useMemo(() => ({
+    navigationState: o,
+    navigateToSubmenu: a,
+    navigateBack: s,
+    registerMenuLevel: l,
+    isCurrentLevel: i
+  }), [o, a, s, l, i]);
+  return /* @__PURE__ */ r(S.Provider, { value: b, children: t });
+}, O = ({ children: t }) => {
+  const { navigationState: o, navigateBack: e } = n.useContext(S), { levels: a, currentLevelIndex: s, isTransitioning: l } = o, i = a[s];
+  return /* @__PURE__ */ p("div", { className: "relative overflow-hidden h-full", children: [
+    !(s === 0) && i && /* @__PURE__ */ p("div", { className: "flex items-center px-[var(--space-m)] pt-[var(--space-s)] pb-[var(--space-m)] border-b border-[var(--color-border-primary-subtle)]", children: [
+      /* @__PURE__ */ p(
+        "button",
+        {
+          onClick: e,
+          className: "flex items-center text-body-md text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] transition-colors",
+          children: [
+            /* @__PURE__ */ r(z, { className: "h-4 w-4 mr-[var(--space-s)]" }),
+            "Back"
+          ]
+        }
+      ),
+      i.title && /* @__PURE__ */ r("h3", { className: "text-heading-sm text-[var(--color-text-primary)] ml-[var(--space-m)]", children: i.title })
+    ] }),
+    /* @__PURE__ */ r(
+      "div",
+      {
+        className: u(
+          "transition-transform duration-300 ease-in-out",
+          l && "transform"
+        ),
+        style: {
+          transform: `translateX(-${s * 100}%)`
+        },
+        children: /* @__PURE__ */ p("div", { className: "flex", children: [
+          /* @__PURE__ */ r(
+            "div",
+            {
+              className: "w-full flex-shrink-0",
+              style: { minWidth: "100%" },
+              children: t
+            }
+          ),
+          a.map((d, m) => m > 0 && /* @__PURE__ */ r(
+            "div",
+            {
+              className: "w-full flex-shrink-0",
+              style: { minWidth: "100%" },
+              children: d.content
+            },
+            d.id
+          ))
+        ] })
+      }
+    )
+  ] });
+}, Q = /* @__PURE__ */ n.forwardRef(({ className: t, inset: o, destructive: e, icon: a, autoClose: s, onSelect: l, ...i }, b) => {
+  const { isDesktop: d } = n.useContext(v);
+  return d ? /* @__PURE__ */ r(
+    N,
+    {
+      ref: b,
+      className: t,
+      inset: o,
+      destructive: e,
+      icon: a,
+      onSelect: l,
+      ...i
+    }
+  ) : /* @__PURE__ */ r(
+    D,
+    {
+      className: t,
+      inset: o,
+      destructive: e,
+      icon: a,
+      autoClose: s,
+      onSelect: l,
+      ...i
+    }
+  );
+});
+Q.displayName = "ResponsiveDropdownMenuItem";
+const U = /* @__PURE__ */ n.forwardRef(({ className: t, children: o, checked: e, autoClose: a, onCheckedChange: s, ...l }, i) => {
+  const { isDesktop: b } = n.useContext(v);
+  return b ? /* @__PURE__ */ p(
+    c.CheckboxItem,
+    {
+      ref: i,
+      className: u(
+        "text-body-md relative flex [&]:cursor-pointer select-none items-center rounded-m h-[var(--size-m)] pl-10 pr-[var(--space-m)] outline-none transition-colors focus:bg-[var(--color-background-neutral-subtlest-hovered)] focus:text-[var(--color-text-primary)] hover:bg-[var(--color-background-neutral-subtlest-hovered)] hover:text-[var(--color-text-primary)] [&]:data-[disabled]:!cursor-not-allowed data-[disabled]:opacity-50 data-[disabled]:hover:bg-transparent data-[disabled]:focus:bg-transparent [&[data-disabled]_*]:!cursor-not-allowed",
+        t
+      ),
+      checked: e,
+      onCheckedChange: s,
+      onSelect: (d) => d.preventDefault(),
+      ...l,
+      children: [
+        /* @__PURE__ */ r("span", { className: "absolute left-[var(--space-m)] flex h-4 w-4 items-center justify-center rounded-s border border-[var(--color-interaction-border-input)] bg-[var(--color-surface-primary)]", children: /* @__PURE__ */ r(c.ItemIndicator, { children: /* @__PURE__ */ r("div", { className: "h-4 w-4 rounded-s border border-[var(--color-background-blue-bold)] bg-[var(--color-background-blue-bold)] flex items-center justify-center", children: /* @__PURE__ */ r(g, { className: "h-3 w-3 text-[var(--color-text-on-action)]" }) }) }) }),
+        o
+      ]
+    }
+  ) : /* @__PURE__ */ r(
+    C,
+    {
+      className: t,
+      checked: e,
+      autoClose: a,
+      onCheckedChange: s,
+      ...l,
+      children: o
+    }
+  );
+});
+U.displayName = "ResponsiveDropdownMenuCheckboxItem";
+const Y = /* @__PURE__ */ n.forwardRef(({ className: t, children: o, value: e, icon: a, autoClose: s, ...l }, i) => {
+  const { isDesktop: b } = n.useContext(v);
+  return b ? /* @__PURE__ */ p(
+    c.RadioItem,
+    {
+      ref: i,
+      className: u(
+        "text-body-md relative flex [&]:cursor-pointer select-none items-center rounded-m h-[var(--size-m)] pl-10 pr-[var(--space-m)] outline-none transition-colors focus:bg-[var(--color-background-neutral-subtlest-hovered)] focus:text-[var(--color-text-primary)] hover:bg-[var(--color-background-neutral-subtlest-hovered)] hover:text-[var(--color-text-primary)] [&]:data-[disabled]:!cursor-not-allowed data-[disabled]:opacity-50 data-[disabled]:hover:bg-transparent data-[disabled]:focus:bg-transparent [&[data-disabled]_*]:!cursor-not-allowed [&[data-state=checked]_span]:border-[var(--color-border-brand-bold)] [&[data-state=checked]_span]:bg-[var(--color-background-blue-bold)] [&[data-state=checked]_span]:text-[var(--color-text-on-action)]",
+        t
+      ),
+      value: e,
+      onSelect: (d) => d.preventDefault(),
+      ...l,
+      children: [
+        /* @__PURE__ */ r("span", { className: "absolute left-[var(--space-m)] flex h-4 w-4 items-center justify-center rounded-full border-2 border-[var(--color-interaction-border-input)] bg-[var(--color-surface-primary)]", children: /* @__PURE__ */ r(c.ItemIndicator, { className: "flex h-full w-full items-center justify-center rounded-full text-current", children: /* @__PURE__ */ r(w, { className: "h-[6px] w-[6px] fill-current" }) }) }),
+        a && /* @__PURE__ */ r(x, { name: a, size: "m", className: "mr-2 ml-6" }),
+        o
+      ]
+    }
+  ) : /* @__PURE__ */ r(J.Consumer, { children: ({ radioValue: d, onRadioChange: m }) => /* @__PURE__ */ r(
+    M,
+    {
+      className: t,
+      value: e,
+      checked: d === e,
+      icon: a,
+      autoClose: s,
+      onRadioSelect: m,
+      ...l,
+      children: o
+    }
+  ) });
+});
+Y.displayName = "ResponsiveDropdownMenuRadioItem";
+const Z = /* @__PURE__ */ n.forwardRef(({ className: t, inset: o, ...e }, a) => {
+  const { isDesktop: s } = n.useContext(v);
+  return s ? /* @__PURE__ */ r(
+    c.Label,
+    {
+      ref: a,
+      className: u(
+        "[&]:text-body-medium-sm px-[var(--space-m)] py-[var(--space-s)] text-[var(--color-text-tertiary)]",
+        o && "pl-8",
+        t
+      ),
+      ...e
+    }
+  ) : /* @__PURE__ */ r(
+    R,
+    {
+      className: t,
+      inset: o,
+      ...e
+    }
+  );
+});
+Z.displayName = "ResponsiveDropdownMenuLabel";
+const ee = /* @__PURE__ */ n.forwardRef(({ className: t, ...o }, e) => {
+  const { isDesktop: a } = n.useContext(v);
+  return a ? /* @__PURE__ */ r(
+    c.Separator,
+    {
+      ref: e,
+      className: u("-mx-2 my-[var(--space-s)] h-px bg-[var(--color-border-primary-subtle)]", t),
+      ...o
+    }
+  ) : /* @__PURE__ */ r(
+    I,
+    {
+      className: t,
+      ...o
+    }
+  );
+});
+ee.displayName = "ResponsiveDropdownMenuSeparator";
+const re = /* @__PURE__ */ n.forwardRef(({ className: t, inset: o, icon: e, children: a, ...s }, l) => {
+  const { isDesktop: i } = n.useContext(v), { triggerNavigation: b } = n.useContext(L);
+  if (i)
+    return /* @__PURE__ */ p(
+      c.SubTrigger,
+      {
+        ref: l,
+        className: u(
+          "text-body-md flex [&]:cursor-pointer select-none items-center rounded-m px-[var(--space-m)] h-[var(--size-m)] outline-none focus:bg-[var(--color-background-neutral-subtlest-hovered)] hover:bg-[var(--color-background-neutral-subtlest-hovered)] data-[state=open]:bg-[var(--color-background-neutral-subtlest-hovered)]",
+          o && "pl-8",
+          t
+        ),
+        ...s,
+        children: [
+          e && /* @__PURE__ */ r(x, { name: e, size: "m", className: "mr-2" }),
+          a,
+          /* @__PURE__ */ r(h, { className: "ml-auto h-4 w-4" })
+        ]
+      }
+    );
+  const { onClick: d, ...m } = s;
+  return /* @__PURE__ */ p(
+    "button",
+    {
+      ref: l,
+      className: u(
+        "text-body-md relative flex w-full cursor-pointer select-none items-center rounded-m px-[var(--space-m)] h-[var(--size-l)] outline-none transition-colors focus:bg-[var(--color-background-neutral-subtlest-hovered)] focus:text-[var(--color-text-primary)] hover:bg-[var(--color-background-neutral-subtlest-hovered)] hover:text-[var(--color-text-primary)] active:bg-[var(--color-background-neutral-subtlest-hovered)]",
+        o && "pl-8",
+        t
+      ),
+      onClick: (f) => {
+        b(), d && d(f);
+      },
+      role: "button",
+      type: "button",
+      ...m,
+      children: [
+        e && /* @__PURE__ */ r(x, { name: e, size: "m", className: "mr-2" }),
+        a,
+        /* @__PURE__ */ r(h, { className: "ml-auto h-4 w-4" })
+      ]
+    }
+  );
+});
+re.displayName = "ResponsiveDropdownMenuSubTrigger";
+const oe = /* @__PURE__ */ n.forwardRef(({ className: t, children: o, ...e }, a) => {
+  const { isDesktop: s } = n.useContext(v), { setSubmenuContent: l } = n.useContext(L);
+  return s ? /* @__PURE__ */ r(
+    c.SubContent,
+    {
+      ref: a,
+      className: u(
+        "z-50 min-w-[12rem] overflow-hidden rounded-l border border-[var(--color-border-primary-subtle)] bg-[var(--color-surface-primary)] p-[var(--space-xs)] text-[var(--color-text-primary)] shadow-lg 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",
+        t
+      ),
+      ...e,
+      children: o
+    }
+  ) : (n.useEffect(() => (l(/* @__PURE__ */ r("div", { className: "space-y-[var(--space-xs)] px-[var(--space-m)] pb-[var(--space-m)]", children: o })), () => l(null)), [o, l]), null);
+});
+oe.displayName = "ResponsiveDropdownMenuSubContent";
+export {
+  ie as DropdownMenu,
+  U as DropdownMenuCheckboxItem,
+  q as DropdownMenuContent,
+  W as DropdownMenuDesktop,
+  V as DropdownMenuDesktopCheckboxItem,
+  k as DropdownMenuDesktopContent,
+  N as DropdownMenuDesktopItem,
+  H as DropdownMenuDesktopLabel,
+  A as DropdownMenuDesktopRadioItem,
+  X as DropdownMenuDesktopSeparator,
+  $ as DropdownMenuDesktopTrigger,
+  ce as DropdownMenuGroup,
+  Q as DropdownMenuItem,
+  Z as DropdownMenuLabel,
+  Y as DropdownMenuRadioItem,
+  ee as DropdownMenuSeparator,
+  oe as DropdownMenuSubContent,
+  re as DropdownMenuSubTrigger,
+  F as DropdownMenuTrigger
+};