@alfadocs/ui-kit-debug 1.50.0 → 1.51.0

package/dist/_chunks/dropdown-menu-DIzxr_lp.js

@@ -0,0 +1,594 @@
+import { jsxs as b, jsx as s } from "react/jsx-runtime";
+import { forwardRef as m, useContext as O, useRef as M, useEffect as P, useMemo as _, useLayoutEffect as ne, createContext as G } from "react";
+import * as o from "@radix-ui/react-dropdown-menu";
+import { c as D } from "./index-D2ZczOXr.js";
+import { S as re } from "./separator-CYU_bGFn.js";
+import { K } from "./kbd-D855ZXIW.js";
+import { b as A } from "./menu-row-BAr8bx1I.js";
+import { u as oe } from "./use-controllable-state-BiY4xTzM.js";
+import { u as ae } from "./registry-DvAUVLHh.js";
+import { C as de } from "./chevron-right-I9AeSxH2.js";
+import { C as ie } from "./check-DrFSN__t.js";
+import { a as ce } from "./use-direction-Dp8h70PP.js";
+const le = {
+  id: "dropdown-menu",
+  capabilities: ["open", "close", "set_value"],
+  state: {
+    isOpen: {
+      type: "boolean",
+      descriptionKey: "ui.agent.dropdownMenu.state.isOpen",
+      description: "True when the menu is currently open.",
+      read: (e) => e.getIsOpen()
+    },
+    settings: {
+      type: 'Array<{ setting: string; kind: "choice" | "switch"; value?: string; options?: string[]; checked?: boolean; disabled: boolean }>',
+      descriptionKey: "ui.agent.dropdownMenu.state.settings",
+      description: "The menu's named settings rows and their current values: choice rows with the selected value and every option's value, switch rows with whether they are on. Rows are listed only while the menu is open; open it first to read them.",
+      read: (e) => e.getSettings()
+    }
+  },
+  actions: {
+    open: {
+      safety: "read",
+      idempotent: !0,
+      descriptionKey: "ui.agent.dropdownMenu.actions.open",
+      description: "Open the menu.",
+      invoke: (e) => {
+        e.open();
+      }
+    },
+    close: {
+      safety: "read",
+      idempotent: !0,
+      descriptionKey: "ui.agent.dropdownMenu.actions.close",
+      description: "Close the menu.",
+      invoke: (e) => {
+        e.close();
+      }
+    },
+    set_value: {
+      safety: "write",
+      argsType: "{ setting: string; value: string }",
+      argsSchema: {
+        type: "object",
+        properties: {
+          setting: {
+            type: "string",
+            description: "The row's name (its data-setting attribute)."
+          },
+          value: {
+            type: "string",
+            description: "One of the row's option values."
+          }
+        },
+        required: ["setting", "value"]
+      },
+      idempotent: !0,
+      errors: [
+        "No choice row with that name in this menu",
+        "The value is not one of the options, or it or the row is disabled"
+      ],
+      examples: [
+        {
+          args: { setting: "slotDensity", value: "comfortable" },
+          note: "Calendar display settings: switch to comfortable rows."
+        }
+      ],
+      descriptionKey: "ui.agent.dropdownMenu.actions.setValue",
+      description: "Pick an option on a named choice row (ChoiceSub), as clicking it would. A closed menu opens for the moment and closes again.",
+      invoke: (e, t) => e.setValue(t.setting, t.value)
+    },
+    set_checked: {
+      safety: "write",
+      argsType: "{ setting: string; checked: boolean }",
+      argsSchema: {
+        type: "object",
+        properties: {
+          setting: {
+            type: "string",
+            description: "The row's name (its data-setting attribute)."
+          },
+          checked: { type: "boolean" }
+        },
+        required: ["setting", "checked"]
+      },
+      idempotent: !0,
+      errors: [
+        "No switch row with that name in this menu",
+        "The row is disabled"
+      ],
+      examples: [
+        {
+          args: { setting: "zebraRows", checked: !0 },
+          note: "Calendar display settings: turn zebra rows on."
+        }
+      ],
+      descriptionKey: "ui.agent.dropdownMenu.actions.setChecked",
+      description: "Turn a named switch row (SwitchItem) on or off, as clicking it would. A closed menu opens for the moment and closes again.",
+      invoke: (e, t) => e.setChecked(t.setting, t.checked)
+    }
+  },
+  domHooks: {
+    root: { attr: "data-component", value: "dropdown-menu" },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "id",
+      description: "Sourced from the id prop on DropdownMenu.Root."
+    },
+    item: {
+      attr: "data-setting",
+      sourceProp: "name",
+      description: "On a ChoiceSub or SwitchItem row given a name: the setting that set_value / set_checked address."
+    }
+  }
+}, E = D(
+  [
+    "ds:z-[var(--z-dropdown)]",
+    // Roomier panel: wider floor, larger radius, deeper float and a
+    // breath more padding so menus read as elevated surfaces rather
+    // than flat lists hugging their trigger.
+    "ds:min-w-[14rem]",
+    "ds:rounded-[var(--radius-lg)]",
+    // Border kept (transparent) so the forced-colors override below can
+    // repaint a visible edge in HCM. In normal modes the soft drop-shadow
+    // carries the edge cue; the heavy `--border` (grey-800 since WCAG
+    // 1.4.11 bump in 67fef8c) made the menu read as a charcoal box.
+    "ds:border ds:border-transparent",
+    "ds:bg-[var(--popover)] ds:text-[color:var(--popover-foreground)]",
+    "ds:shadow-[var(--shadow-xl)]",
+    "ds:p-[var(--spacing-sm)]",
+    // Never taller than the room Radix measures beside the trigger: a long
+    // menu scrolls instead of running off the screen. Submenus portal out,
+    // so the scroll never clips them. Radix sets the same variable on
+    // Content and SubContent.
+    "ds:max-h-[var(--radix-dropdown-menu-content-available-height)] ds:overflow-y-auto",
+    // Motion — gated on --animation-duration via Tailwind's animate-in
+    // preset. motion-reduce disables via the no-preference query.
+    "ds:data-[state=open]:animate-in ds:data-[state=closed]:animate-out",
+    "ds:data-[state=open]:fade-in ds:data-[state=closed]:fade-out",
+    "ds:data-[state=open]:zoom-in-95 ds:data-[state=closed]:zoom-out-95",
+    "ds:data-[state=open]:slide-in-from-top-1",
+    "ds:motion-reduce:animate-none",
+    "ds:forced-colors:border-[CanvasText]"
+  ].join(" ")
+), R = D(
+  [
+    "ds:relative ds:flex ds:items-center ds:gap-[var(--spacing-sm)]",
+    "ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)]",
+    "ds:pt-[var(--spacing-xs)] ds:pb-[var(--spacing-xs)]",
+    "ds:rounded-[var(--radius-md)]",
+    "ds:min-h-[var(--min-target-size)]",
+    "ds:text-[length:var(--font-size-sm)] ds:text-[color:var(--foreground)]",
+    "ds:cursor-pointer ds:select-none ds:outline-none",
+    // Radix highlights on hover and on keyboard focus alike.
+    A.highlighted,
+    "ds:focus-visible:outline-[length:var(--focus-ring-width)]",
+    "ds:focus-visible:outline-solid ds:focus-visible:outline-[color:var(--ring)]",
+    "ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]",
+    "ds:forced-colors:focus-visible:outline-[CanvasText]",
+    // Disabled
+    "ds:data-[disabled]:opacity-50 ds:data-[disabled]:cursor-not-allowed",
+    "ds:data-[disabled]:pointer-events-none"
+  ].join(" ")
+), ue = D(
+  [
+    "ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)]",
+    "ds:pt-[var(--spacing-xs)] ds:pb-[var(--spacing-2xs)]",
+    // Quiet sentence-case caption — the shouty uppercase eyebrow made
+    // every menu read as a form. Groups should lean on separators first
+    // and reach for a Label only when the grouping is genuinely unclear.
+    "ds:text-[length:var(--font-size-xs)]",
+    "ds:font-[var(--font-weight-medium)]",
+    "ds:text-[color:var(--muted-foreground)]",
+    "ds:select-none"
+  ].join(" ")
+), q = "ds:inline-flex ds:items-center ds:justify-center ds:size-4 ds:shrink-0", L = G(
+  void 0
+), pe = () => new Promise((e) => {
+  typeof requestAnimationFrame == "function" ? requestAnimationFrame(() => e()) : setTimeout(e, 16);
+}), V = G(void 0), $ = ({
+  dir: e,
+  id: t,
+  open: n,
+  defaultOpen: r,
+  onOpenChange: a,
+  ...l
+}) => {
+  const h = ce(), [p, k] = oe({
+    value: n,
+    defaultValue: r ?? !1,
+    onChange: a
+  }), c = p ?? !1, d = M(c);
+  P(() => {
+    d.current = c;
+  }, [c]);
+  const v = M(/* @__PURE__ */ new Map()), S = M(0), se = _(
+    () => (f, N) => (v.current.set(f, N), () => {
+      v.current.get(f) === N && v.current.delete(f);
+    }),
+    []
+  ), te = _(() => {
+    const f = (i) => {
+      d.current = i, k(i);
+    }, N = async (i, u, g) => {
+      const x = !d.current;
+      x && f(!0);
+      const C = S.current;
+      try {
+        let w = v.current.get(i);
+        for (let y = 0; !w && y < 30; y += 1)
+          await pe(), w = v.current.get(i);
+        if (!w || w.kind !== u)
+          throw new Error(`No ${u} setting named "${i}" in this menu`);
+        g(w);
+      } finally {
+        x && S.current === C && f(!1);
+      }
+    };
+    return {
+      getIsOpen: () => d.current,
+      open: () => {
+        S.current += 1, f(!0);
+      },
+      close: () => {
+        S.current += 1, f(!1);
+      },
+      getSettings: () => [...v.current].map(([i, u]) => {
+        if (u.kind === "choice") {
+          const { value: C, options: w, disabled: y } = u.read();
+          return {
+            setting: i,
+            kind: "choice",
+            value: C,
+            options: w.map((T) => T.value),
+            disabled: y
+          };
+        }
+        const { checked: g, disabled: x } = u.read();
+        return { setting: i, kind: "switch", checked: g, disabled: x };
+      }),
+      setValue: (i, u) => N(i, "choice", (g) => {
+        const { options: x, disabled: C, closeOnSelect: w } = g.read(), y = x.find((T) => T.value === u);
+        if (C || !y || y.disabled)
+          throw new Error(
+            `"${u}" is not an option that "${i}" can take now`
+          );
+        g.pick(u), w && f(!1);
+      }),
+      setChecked: (i, u) => N(i, "switch", (g) => {
+        if (g.read().disabled)
+          throw new Error(`"${i}" is disabled`);
+        g.pick(u);
+      })
+    };
+  }, [k]);
+  return ae(le, te, t), /* @__PURE__ */ s(V.Provider, { value: t, children: /* @__PURE__ */ s(L.Provider, { value: se, children: /* @__PURE__ */ s(
+    o.Root,
+    {
+      dir: e ?? h,
+      open: c,
+      onOpenChange: k,
+      ...l
+    }
+  ) }) });
+};
+$.displayName = "DropdownMenu.Root";
+const me = o.Trigger, he = o.Portal, fe = o.Group, ge = o.RadioGroup, H = m(({ className: e, sideOffset: t = 8, ...n }, r) => {
+  const a = O(V);
+  return /* @__PURE__ */ s(o.Portal, { children: /* @__PURE__ */ s(
+    o.Content,
+    {
+      ref: r,
+      sideOffset: t,
+      className: E({ className: e }),
+      "data-component": "dropdown-menu",
+      "data-component-id": a,
+      ...n
+    }
+  ) });
+});
+H.displayName = "DropdownMenu.Content";
+const F = m(
+  ({
+    className: e,
+    startIcon: t,
+    endIcon: n,
+    description: r,
+    shortcut: a,
+    children: l,
+    ...h
+  }, p) => /* @__PURE__ */ b(
+    o.Item,
+    {
+      ref: p,
+      className: R({ className: e }),
+      ...h,
+      children: [
+        t ? /* @__PURE__ */ s(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "ds:inline-flex ds:size-4 ds:shrink-0 ds:items-center ds:justify-center",
+            children: t
+          }
+        ) : null,
+        /* @__PURE__ */ b("span", { className: "ds:flex-1 ds:flex ds:flex-col ds:min-w-0", children: [
+          /* @__PURE__ */ s("span", { className: "ds:truncate", children: l }),
+          r ? /* @__PURE__ */ s("span", { className: "type-meta ds:text-[color:var(--muted-foreground)] ds:truncate", children: r }) : null
+        ] }),
+        a ? /* @__PURE__ */ s("span", { className: "ds:ms-auto", children: /* @__PURE__ */ s(K, { keys: a, size: "sm" }) }) : n ? /* @__PURE__ */ s(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "ds:ms-auto ds:inline-flex ds:size-4 ds:shrink-0 ds:items-center ds:justify-center",
+            children: n
+          }
+        ) : null
+      ]
+    }
+  )
+);
+F.displayName = "DropdownMenu.Item";
+const B = m(({ className: e, children: t, ...n }, r) => /* @__PURE__ */ b(
+  o.CheckboxItem,
+  {
+    ref: r,
+    className: R({ className: e }),
+    ...n,
+    children: [
+      /* @__PURE__ */ s("span", { className: q, children: /* @__PURE__ */ s(o.ItemIndicator, { children: /* @__PURE__ */ s(ie, { "aria-hidden": !0, className: "ds:size-4" }) }) }),
+      /* @__PURE__ */ s("span", { className: "ds:flex-1 ds:truncate", children: t })
+    ]
+  }
+));
+B.displayName = "DropdownMenu.CheckboxItem";
+function U(e, t) {
+  const n = O(L), r = M(t);
+  ne(() => {
+    r.current = t;
+  }), P(() => {
+    if (!e || !n) return;
+    const a = r.current.kind === "choice" ? {
+      kind: "choice",
+      read: () => r.current.read(),
+      pick: (l) => r.current.pick(
+        l
+      )
+    } : {
+      kind: "switch",
+      read: () => r.current.read(),
+      pick: (l) => r.current.pick(
+        l
+      )
+    };
+    return n(e, a);
+  }, [e, n]);
+}
+const we = [
+  "ds:ms-auto ds:inline-flex ds:items-center ds:shrink-0",
+  "ds:h-4 ds:w-7 ds:p-[2px]",
+  "ds:rounded-[var(--radius-full)]",
+  "ds:border ds:border-[length:var(--border-width-sm)] ds:border-[color:var(--muted-foreground)]",
+  "ds:bg-[color:var(--muted)]",
+  "ds:[[data-state=checked]_&]:bg-[color:var(--primary)]",
+  "ds:[[data-state=checked]_&]:border-[color:var(--primary)]",
+  // Thumb slides via justify swap — logical-direction safe, no
+  // transform to fight under prefers-reduced-motion.
+  "ds:justify-start ds:[[data-state=checked]_&]:justify-end",
+  "ds:forced-colors:border-[CanvasText]",
+  // HCM strips fills — paint the checked track with the system
+  // selection colour so state isn't conveyed by thumb position alone.
+  "ds:forced-colors:[[data-state=checked]_&]:bg-[SelectedItem]"
+].join(" "), ve = [
+  "ds:block ds:size-3",
+  "ds:rounded-[var(--radius-full)]",
+  "ds:bg-[color:var(--background)]",
+  "ds:border ds:border-[length:var(--border-width-sm)] ds:border-[color:var(--muted-foreground)]",
+  "ds:[[data-state=checked]_&]:border-transparent",
+  "ds:shadow-[var(--shadow-sm)]",
+  "ds:forced-colors:bg-[CanvasText]"
+].join(" "), W = m(({ className: e, children: t, onSelect: n, name: r, ...a }, l) => {
+  const { checked: h, onCheckedChange: p, disabled: k } = a;
+  return U(r, {
+    kind: "switch",
+    read: () => ({ checked: h === !0, disabled: k === !0 }),
+    // What a click does, and only when it would change something: the
+    // consumer's onSelect, then the new state.
+    pick: (c) => {
+      c !== (h === !0) && (n == null || n(new Event("menu.itemSelect", { cancelable: !0 })), p == null || p(c));
+    }
+  }), /* @__PURE__ */ b(
+    o.CheckboxItem,
+    {
+      ref: l,
+      className: R({ className: e }),
+      "data-setting": r,
+      onSelect: (c) => {
+        c.preventDefault(), n == null || n(c);
+      },
+      ...a,
+      children: [
+        /* @__PURE__ */ s("span", { className: "ds:flex-1 ds:truncate", children: t }),
+        /* @__PURE__ */ s("span", { "aria-hidden": "true", className: we, children: /* @__PURE__ */ s("span", { className: ve }) })
+      ]
+    }
+  );
+});
+W.displayName = "DropdownMenu.SwitchItem";
+const J = ge, I = m(({ className: e, children: t, ...n }, r) => /* @__PURE__ */ b(
+  o.RadioItem,
+  {
+    ref: r,
+    className: R({ className: e }),
+    ...n,
+    children: [
+      /* @__PURE__ */ s("span", { className: q, "aria-hidden": "true", children: /* @__PURE__ */ s(
+        "span",
+        {
+          className: [
+            "ds:inline-flex ds:size-4 ds:items-center ds:justify-center ds:shrink-0",
+            "ds:rounded-[var(--radius-full)]",
+            "ds:border ds:border-[length:var(--border-width-sm)] ds:border-[color:var(--muted-foreground)]",
+            "ds:[[data-state=checked]_&]:border-[color:var(--accent)]",
+            // Accent on the lit row would vanish, so ring and dot take its ink.
+            "ds:not-forced-colors:[[data-highlighted][data-state=checked]_&]:border-[color:var(--accent-foreground)]",
+            "ds:forced-colors:border-[CanvasText]"
+          ].join(" "),
+          children: /* @__PURE__ */ s(o.ItemIndicator, { children: /* @__PURE__ */ s(
+            "span",
+            {
+              className: [
+                "ds:block ds:size-2 ds:rounded-[var(--radius-full)] ds:bg-[color:var(--accent)]",
+                "ds:not-forced-colors:group-data-[highlighted]/menu-row:bg-[color:var(--accent-foreground)]",
+                "ds:forced-colors:bg-[CanvasText]"
+              ].join(" ")
+            }
+          ) })
+        }
+      ) }),
+      /* @__PURE__ */ s("span", { className: "ds:flex-1 ds:truncate", children: t })
+    ]
+  }
+));
+I.displayName = "DropdownMenu.RadioItem";
+const Q = m(({ className: e, ...t }, n) => /* @__PURE__ */ s(
+  o.Label,
+  {
+    ref: n,
+    className: ue({ className: e }),
+    ...t
+  }
+));
+Q.displayName = "DropdownMenu.Label";
+const X = m(({ className: e, ...t }, n) => /* @__PURE__ */ s(o.Separator, { ref: n, asChild: !0, ...t, children: /* @__PURE__ */ s(
+  re,
+  {
+    className: ["ds:my-[calc(var(--spacing-xs)/2)]", e ?? ""].filter(Boolean).join(" ")
+  }
+) }));
+X.displayName = "DropdownMenu.Separator";
+const Y = m(
+  ({ keys: e, separator: t = "none" }, n) => /* @__PURE__ */ s("span", { ref: n, className: "ds:ms-auto ds:ps-[var(--spacing-sm)]", children: /* @__PURE__ */ s(K, { keys: e, separator: t, size: "sm" }) })
+);
+Y.displayName = "DropdownMenu.Shortcut";
+const Z = o.Sub, j = m(({ className: e, startIcon: t, children: n, ...r }, a) => /* @__PURE__ */ b(
+  o.SubTrigger,
+  {
+    ref: a,
+    className: R({
+      className: [A.open, e].filter(Boolean).join(" ")
+    }),
+    ...r,
+    children: [
+      t ? /* @__PURE__ */ s(
+        "span",
+        {
+          "aria-hidden": "true",
+          className: "ds:inline-flex ds:size-4 ds:shrink-0 ds:items-center ds:justify-center",
+          children: t
+        }
+      ) : null,
+      /* @__PURE__ */ s("span", { className: "ds:flex-1 ds:truncate", children: n }),
+      /* @__PURE__ */ s(
+        de,
+        {
+          "aria-hidden": !0,
+          className: "ds:ms-auto ds:size-4 ds:shrink-0 ds:rtl:-scale-x-100"
+        }
+      )
+    ]
+  }
+));
+j.displayName = "DropdownMenu.SubTrigger";
+const z = m(({ className: e, ...t }, n) => /* @__PURE__ */ s(o.Portal, { children: /* @__PURE__ */ s(
+  o.SubContent,
+  {
+    ref: n,
+    sideOffset: 8,
+    "data-component": "dropdown-menu-sub-content",
+    className: E({ className: e }),
+    ...t
+  }
+) }));
+z.displayName = "DropdownMenu.SubContent";
+function ee({
+  label: e,
+  value: t,
+  onValueChange: n,
+  options: r,
+  startIcon: a,
+  disabled: l,
+  closeOnSelect: h = !1,
+  name: p,
+  className: k
+}) {
+  const c = r.find((d) => d.value === t);
+  return U(p, {
+    kind: "choice",
+    read: () => ({
+      value: t,
+      options: r,
+      disabled: l === !0,
+      closeOnSelect: h
+    }),
+    pick: (d) => n(d)
+  }), /* @__PURE__ */ b(Z, { children: [
+    /* @__PURE__ */ s(
+      j,
+      {
+        startIcon: a,
+        disabled: l,
+        className: k,
+        "data-component": "dropdown-menu-choice",
+        "data-value": t,
+        "data-setting": p,
+        children: /* @__PURE__ */ b("span", { className: "ds:flex ds:min-w-0 ds:items-center ds:justify-between ds:gap-[var(--spacing-sm)]", children: [
+          /* @__PURE__ */ s("span", { className: "ds:truncate", children: e }),
+          c ? /* @__PURE__ */ s("span", { className: "ds:shrink-0 ds:text-[color:var(--muted-foreground)] ds:[[data-highlighted]_&]:text-current", children: c.label }) : null
+        ] })
+      }
+    ),
+    /* @__PURE__ */ s(z, { children: /* @__PURE__ */ s(
+      J,
+      {
+        value: t,
+        onValueChange: (d) => n(d),
+        children: r.map((d) => /* @__PURE__ */ s(
+          I,
+          {
+            value: d.value,
+            disabled: d.disabled,
+            onSelect: h ? void 0 : (v) => v.preventDefault(),
+            children: d.label
+          },
+          d.value
+        ))
+      }
+    ) })
+  ] });
+}
+ee.displayName = "DropdownMenu.ChoiceSub";
+const Ie = {
+  Root: $,
+  Trigger: me,
+  Portal: he,
+  Content: H,
+  Group: fe,
+  Item: F,
+  CheckboxItem: B,
+  SwitchItem: W,
+  RadioGroup: J,
+  RadioItem: I,
+  Label: Q,
+  Separator: X,
+  Shortcut: Y,
+  Sub: Z,
+  SubTrigger: j,
+  SubContent: z,
+  ChoiceSub: ee
+};
+export {
+  Ie as D,
+  le as d
+};
+//# sourceMappingURL=dropdown-menu-DIzxr_lp.js.map