@avenue-ticketing/ui 0.10.0 → 0.12.0-beta.1

package/dist/react/dropdown-icon-advanced.js

@@ -0,0 +1,543 @@
+import { createContext, useState, useCallback, useRef, useLayoutEffect } from 'react';
+import { ArrowLeftIcon } from '@phosphor-icons/react/dist/csr/ArrowLeft';
+import { ArrowRightIcon } from '@phosphor-icons/react/dist/csr/ArrowRight';
+import { CodeIcon } from '@phosphor-icons/react/dist/csr/Code';
+import { CopyIcon } from '@phosphor-icons/react/dist/csr/Copy';
+import { CubeIcon } from '@phosphor-icons/react/dist/csr/Cube';
+import { DownloadSimpleIcon } from '@phosphor-icons/react/dist/csr/DownloadSimple';
+import { PencilLineIcon } from '@phosphor-icons/react/dist/csr/PencilLine';
+import { ArrowCounterClockwiseIcon } from '@phosphor-icons/react/dist/csr/ArrowCounterClockwise';
+import { ScissorsIcon } from '@phosphor-icons/react/dist/csr/Scissors';
+import { StarIcon } from '@phosphor-icons/react/dist/csr/Star';
+import { MenuTrigger, MenuSection, SubmenuTrigger, Button, Popover, Menu, MenuItem, Separator } from 'react-aria-components';
+import { CheckIcon } from '@phosphor-icons/react/dist/csr/Check';
+import { CaretRightIcon } from '@phosphor-icons/react/dist/csr/CaretRight';
+import { DotsThreeVerticalIcon } from '@phosphor-icons/react/dist/csr/DotsThreeVertical';
+import { extendTailwindMerge } from 'tailwind-merge';
+import { UserIcon } from '@phosphor-icons/react/dist/csr/User';
+import '@phosphor-icons/react/dist/csr/Plus';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var twMerge = extendTailwindMerge({
+  extend: {
+    theme: {
+      text: ["display-xs", "display-sm", "display-md", "display-lg", "display-xl", "display-2xl"]
+    }
+  }
+});
+var cx = twMerge;
+var sizes = {
+  xs: "size-1.5",
+  sm: "size-2",
+  md: "size-2.5",
+  lg: "size-3",
+  xl: "size-3.5",
+  "2xl": "size-4",
+  "3xl": "size-4.5",
+  "4xl": "size-5"
+};
+var AvatarOnlineIndicator = ({ size, status, className }) => /* @__PURE__ */ jsx(
+  "span",
+  {
+    className: cx(
+      "absolute right-0 bottom-0 flex justify-center rounded-full ring-[1.5px] ring-bg-primary",
+      status === "online" ? "bg-fg-success-secondary" : "bg-utility-neutral-300",
+      sizes[size],
+      className
+    ),
+    style: {
+      backgroundImage: "radial-gradient(43.75% 43.75% at 50% 28.75%, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.00) 100%), radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.00) 74.66%, rgba(255, 255, 255, 0.18) 100%), radial-gradient(75% 75% at 50% 0%, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.00) 50%, rgba(255, 255, 255, 0.08) 99%, rgba(255, 255, 255, 0.00) 100%)"
+    },
+    children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 7.2 2.85", fill: "none", className: "mt-[10%] h-[20%] w-[60%]", children: [
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M7.2 1.83107C7.2 2.84235 5.58823 2.19729 3.6 2.19729C1.61177 2.19729 0 2.84235 0 1.83107C0 0.8198 1.61177 0 3.6 0C5.58823 0 7.2 0.8198 7.2 1.83107Z",
+          fill: "url(#reflection-gradient)",
+          fillOpacity: "0.4"
+        }
+      ),
+      /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: "reflection-gradient", x1: "3.6", y1: "0", x2: "3.6", y2: "2.4", gradientUnits: "userSpaceOnUse", children: [
+        /* @__PURE__ */ jsx("stop", { stopColor: "white" }),
+        /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "white", stopOpacity: "0.1" })
+      ] }) })
+    ] })
+  }
+);
+var sizes2 = {
+  xs: "size-2.5",
+  sm: "size-3",
+  md: "size-3.5",
+  lg: "size-4",
+  xl: "size-4.5",
+  "2xl": "size-5",
+  "3xl": "size-6",
+  "4xl": "size-8"
+};
+var VerifiedTick = ({ size, className }) => /* @__PURE__ */ jsxs("svg", { className: cx("z-10 text-utility-blue-500", sizes2[size], className), viewBox: "0 0 10 10", fill: "none", children: [
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M7.72237 1.77098C7.81734 2.00068 7.99965 2.18326 8.2292 2.27858L9.03413 2.61199C9.26384 2.70714 9.44635 2.88965 9.5415 3.11936C9.63665 3.34908 9.63665 3.60718 9.5415 3.83689L9.20833 4.64125C9.11313 4.87106 9.113 5.12943 9.20863 5.35913L9.54122 6.16325C9.58839 6.27702 9.61268 6.39897 9.6127 6.52214C9.61272 6.6453 9.58847 6.76726 9.54134 6.88105C9.4942 6.99484 9.42511 7.09823 9.33801 7.18531C9.2509 7.27238 9.14749 7.34144 9.03369 7.38854L8.22934 7.72171C7.99964 7.81669 7.81706 7.99899 7.72174 8.22855L7.38833 9.03348C7.29318 9.26319 7.11067 9.4457 6.88096 9.54085C6.65124 9.636 6.39314 9.636 6.16343 9.54085L5.35907 9.20767C5.12935 9.11276 4.87134 9.11295 4.64177 9.20821L3.83684 9.54115C3.60725 9.63608 3.34937 9.636 3.11984 9.54092C2.89032 9.44585 2.70791 9.26356 2.6127 9.03409L2.27918 8.22892C2.18421 7.99923 2.0019 7.81665 1.77235 7.72133L0.967421 7.38792C0.737807 7.29281 0.555355 7.11041 0.460169 6.88083C0.364983 6.65125 0.364854 6.39327 0.45981 6.16359L0.792984 5.35924C0.8879 5.12952 0.887707 4.87151 0.792445 4.64193L0.459749 3.83642C0.41258 3.72265 0.388291 3.60069 0.388272 3.47753C0.388252 3.35436 0.412501 3.2324 0.459634 3.11861C0.506767 3.00482 0.57586 2.90144 0.662965 2.81436C0.75007 2.72728 0.853479 2.65822 0.967283 2.61113L1.77164 2.27795C2.00113 2.18306 2.1836 2.00099 2.27899 1.7717L2.6124 0.966768C2.70755 0.737054 2.89006 0.554547 3.11978 0.459397C3.34949 0.364246 3.60759 0.364246 3.83731 0.459397L4.64166 0.792571C4.87138 0.887487 5.12939 0.887293 5.35897 0.792031L6.16424 0.459913C6.39392 0.364816 6.65197 0.364836 6.88164 0.459968C7.11131 0.555099 7.29379 0.737554 7.38895 0.967208L7.72247 1.77238L7.72237 1.77098Z",
+      className: "fill-current"
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M6.95829 3.68932C7.02509 3.58439 7.04747 3.45723 7.02051 3.3358C6.99356 3.21437 6.91946 3.10862 6.81454 3.04182C6.70961 2.97502 6.58245 2.95264 6.46102 2.97959C6.33959 3.00655 6.23384 3.08064 6.16704 3.18557L4.33141 6.06995L3.49141 5.01995C3.41375 4.92281 3.30069 4.8605 3.17709 4.84673C3.05349 4.83296 2.92949 4.86885 2.83235 4.94651C2.73522 5.02417 2.67291 5.13723 2.65914 5.26083C2.64536 5.38443 2.68125 5.50843 2.75891 5.60557L4.00891 7.16807C4.0555 7.22638 4.11533 7.27271 4.18344 7.30323C4.25154 7.33375 4.32595 7.34757 4.40047 7.34353C4.47499 7.3395 4.54747 7.31773 4.61188 7.28004C4.67629 7.24234 4.73077 7.18981 4.77079 7.12682L6.95829 3.68932Z",
+      fill: "white"
+    }
+  )
+] });
+var AvatarCount = ({ count, className }) => /* @__PURE__ */ jsx("div", { className: cx("absolute right-0 bottom-0 p-px", className), children: /* @__PURE__ */ jsx("div", { className: "flex size-3.5 items-center justify-center rounded-full bg-fg-error-primary text-center text-[10px] leading-[13px] font-bold text-white", children: count }) });
+var styles = {
+  xs: { root: "size-6", rootWithBorder: "p-px", initials: "text-xs font-semibold", icon: "size-4" },
+  sm: { root: "size-8", rootWithBorder: "p-px", initials: "text-sm font-semibold", icon: "size-5" },
+  md: { root: "size-10", rootWithBorder: "p-px", initials: "text-md font-semibold", icon: "size-6" },
+  lg: { root: "size-12", rootWithBorder: "p-[1.5px]", initials: "text-lg font-semibold", icon: "size-7" },
+  xl: { root: "size-14", rootWithBorder: "p-0.5", initials: "text-xl font-semibold", icon: "size-8" },
+  "2xl": { root: "size-16", rootWithBorder: "p-0.5", initials: "text-display-xs font-semibold", icon: "size-8" }
+};
+var Avatar = ({
+  size = "md",
+  src,
+  alt,
+  initials,
+  placeholder,
+  placeholderIcon: PlaceholderIcon,
+  border,
+  badge,
+  status,
+  verified,
+  count,
+  focusable = false,
+  rounded = true,
+  className,
+  contentClassName
+}) => {
+  const [isFailed, setIsFailed] = useState(false);
+  const canShowImage = src && !isFailed;
+  const renderMainContent = () => {
+    if (canShowImage) {
+      return /* @__PURE__ */ jsx("img", { "data-avatar-img": true, className: "size-full object-cover", src, alt, onError: () => setIsFailed(true) });
+    }
+    if (initials) {
+      return /* @__PURE__ */ jsx("span", { className: cx("text-quaternary", styles[size].initials), children: initials });
+    }
+    if (PlaceholderIcon) {
+      return /* @__PURE__ */ jsx(PlaceholderIcon, { className: cx("text-fg-quaternary", styles[size].icon) });
+    }
+    return placeholder || /* @__PURE__ */ jsx(UserIcon, { className: cx("text-fg-quaternary", styles[size].icon) });
+  };
+  const renderBadgeContent = () => {
+    if (status) {
+      return /* @__PURE__ */ jsx(AvatarOnlineIndicator, { status, size });
+    }
+    if (verified) {
+      return /* @__PURE__ */ jsx(VerifiedTick, { size, className: cx("absolute right-0 bottom-0", size === "xs" && "-right-px -bottom-px") });
+    }
+    if (count) {
+      return /* @__PURE__ */ jsx(AvatarCount, { count });
+    }
+    return badge;
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-avatar": true,
+      className: cx(
+        "relative inline-flex shrink-0 rounded-[7px]",
+        rounded && "rounded-full",
+        // Focus styles
+        focusable && "outline-none group-focus-visible:[box-shadow:0px_0px_0px_2px_var(--color-bg-primary),0px_0px_0px_4px_var(--color-focus-ring)]",
+        border && "ring-1 ring-secondary_alt",
+        border && styles[size].rootWithBorder,
+        styles[size].root,
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cx(
+              "relative inline-flex size-full shrink-0 items-center justify-center overflow-hidden rounded-md bg-tertiary outline-[0.5px] -outline-offset-[0.5px] outline-black/16 before:inset-[0.5px]",
+              rounded && "rounded-full",
+              canShowImage && size !== "xs" && "before:absolute before:inset-0 before:rounded-[inherit] before:border before:border-white/32 before:mask-[linear-gradient(to_bottom,black_0%,transparent_25%,transparent_75%,black_100%)]",
+              contentClassName
+            ),
+            children: renderMainContent()
+          }
+        ),
+        renderBadgeContent()
+      ]
+    }
+  );
+};
+var CHECKBOX_TICK_DELAY_MS = 60;
+var CHECKBOX_TICK_DRAW_MS = 100;
+function CheckboxAnimatedCheckMark({ className }) {
+  const pathRef = useRef(null);
+  useLayoutEffect(() => {
+    const path = pathRef.current;
+    if (!path || typeof path.getTotalLength !== "function") return;
+    const len = path.getTotalLength();
+    if (len <= 0) return;
+    path.style.strokeDasharray = `${len}`;
+    path.style.strokeDashoffset = `${len}`;
+    if (typeof path.animate !== "function") {
+      path.style.strokeDashoffset = "0";
+      return;
+    }
+    const anim = path.animate([{ strokeDashoffset: len }, { strokeDashoffset: 0 }], {
+      duration: CHECKBOX_TICK_DRAW_MS,
+      delay: CHECKBOX_TICK_DELAY_MS,
+      easing: "cubic-bezier(0.45, 0, 0.2, 1)",
+      fill: "forwards"
+    });
+    return () => anim.cancel();
+  }, []);
+  return /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", viewBox: "0 0 14 14", fill: "none", className: cx("block shrink-0", className), children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      ref: pathRef,
+      d: "M2.33325 7L5.24992 9.91667L11.6666 3.5",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+var focusRingShadow = "outline-none [box-shadow:0px_0px_0px_2px_var(--color-bg-primary),0px_0px_0px_4px_var(--color-focus-ring)]";
+var CheckboxBase = ({ className, isSelected, isDisabled, isIndeterminate, size = "sm", isFocusVisible = false }) => {
+  const isChecked = isSelected || isIndeterminate;
+  const iconClassName = size === "sm" ? "size-2.5" : "size-3.5";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx(
+        "relative flex shrink-0 cursor-pointer appearance-none items-center justify-center border border-solid border-primary",
+        size === "sm" ? "size-4 rounded-xs" : "size-5 rounded-sm",
+        isChecked ? "border-transparent bg-brand-solid" : "bg-primary",
+        isDisabled && "cursor-not-allowed opacity-50",
+        isDisabled && !isChecked && "bg-tertiary",
+        isFocusVisible && !isDisabled && focusRingShadow,
+        className
+      ),
+      children: [
+        isIndeterminate && /* @__PURE__ */ jsx(
+          "svg",
+          {
+            "aria-hidden": "true",
+            viewBox: "0 0 14 14",
+            fill: "none",
+            className: cx("pointer-events-none block shrink-0 text-fg-white", iconClassName),
+            children: /* @__PURE__ */ jsx("path", { d: "M2.91675 7H11.0834", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
+          }
+        ),
+        isSelected && !isIndeterminate && /* @__PURE__ */ jsx(CheckboxAnimatedCheckMark, { className: cx("pointer-events-none text-fg-white", iconClassName) })
+      ]
+    }
+  );
+};
+CheckboxBase.displayName = "CheckboxBase";
+var RADIO_DOT_DELAY_MS = 60;
+var RADIO_DOT_POP_MS = 100;
+function RadioAnimatedDot({ className }) {
+  const dotRef = useRef(null);
+  useLayoutEffect(() => {
+    const dot = dotRef.current;
+    if (!dot) return;
+    if (typeof dot.animate !== "function") {
+      dot.style.opacity = "1";
+      dot.style.transform = "scale(1)";
+      return;
+    }
+    const anim = dot.animate(
+      [
+        { opacity: 0, transform: "scale(0)" },
+        { opacity: 1, transform: "scale(1)" }
+      ],
+      {
+        duration: RADIO_DOT_POP_MS,
+        delay: RADIO_DOT_DELAY_MS,
+        easing: "cubic-bezier(0.45, 0, 0.2, 1)",
+        fill: "forwards"
+      }
+    );
+    return () => anim.cancel();
+  }, []);
+  return /* @__PURE__ */ jsx("div", { ref: dotRef, "aria-hidden": "true", className: cx("rounded-full bg-fg-white", className), style: { opacity: 0, transform: "scale(0)" } });
+}
+var focusRingShadow2 = "outline-none [box-shadow:0px_0px_0px_2px_var(--color-bg-primary),0px_0px_0px_4px_var(--color-focus-ring)]";
+createContext(null);
+var RadioButtonBase = ({ className, isFocusVisible, isSelected, isDisabled, size = "sm" }) => {
+  const dotClassName = size === "sm" ? "size-1.5" : "size-2";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cx(
+        "relative flex shrink-0 cursor-pointer appearance-none items-center justify-center overflow-clip rounded-full border border-solid border-primary bg-primary",
+        size === "sm" ? "size-4" : "size-5",
+        isSelected && "border-transparent bg-brand-solid",
+        isDisabled && "cursor-not-allowed opacity-50",
+        isDisabled && !isSelected && "bg-tertiary",
+        isFocusVisible && !isDisabled && focusRingShadow2,
+        className
+      ),
+      children: isSelected && /* @__PURE__ */ jsx(RadioAnimatedDot, { className: cx("pointer-events-none", dotClassName) })
+    }
+  );
+};
+RadioButtonBase.displayName = "RadioButtonBase";
+var focusRingShadow3 = "outline-none [box-shadow:0px_0px_0px_2px_var(--color-bg-primary),0px_0px_0px_4px_var(--color-focus-ring)]";
+var ToggleBase = ({ className, isHovered, isDisabled, isFocusVisible, isSelected, slim, size = "sm" }) => {
+  const styles2 = {
+    default: {
+      sm: {
+        track: "h-5 w-9 p-0.5",
+        thumb: "size-4",
+        thumbPosition: isSelected ? "left-[calc(100%-1rem-0.125rem)]" : "left-0.5"
+      },
+      md: {
+        track: "h-6 w-11 p-0.5",
+        thumb: "size-5",
+        thumbPosition: isSelected ? "left-[calc(100%-1.25rem-0.125rem)]" : "left-0.5"
+      }
+    },
+    slim: {
+      sm: {
+        track: "h-4 w-8",
+        thumb: "size-4",
+        thumbPosition: isSelected ? "left-4" : "left-0"
+      },
+      md: {
+        track: "h-5 w-10",
+        thumb: "size-5",
+        thumbPosition: isSelected ? "left-5" : "left-0"
+      }
+    }
+  };
+  const classes = slim ? styles2.slim[size] : styles2.default[size];
+  const offTrackBackground = (() => {
+    if (isDisabled) return "bg-tertiary";
+    if (isHovered) return slim ? "bg-tertiary" : "bg-brand-primary";
+    return "bg-quaternary";
+  })();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cx(
+        "relative inline-flex shrink-0 cursor-pointer overflow-clip rounded-full outline-none transition duration-150 ease-linear",
+        !isSelected && offTrackBackground,
+        !slim && "ring-[0.5px] ring-secondary ring-inset",
+        slim && "ring-1 ring-secondary ring-inset",
+        isSelected && "bg-brand-solid",
+        isSelected && isHovered && "bg-brand-solid_hover",
+        isSelected && "ring-transparent",
+        isDisabled && "cursor-not-allowed opacity-50",
+        isFocusVisible && !isDisabled && focusRingShadow3,
+        classes.track,
+        className
+      ),
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cx(
+            "absolute rounded-full bg-fg-white shadow-sm transition-[left] duration-150 ease-in-out",
+            slim ? "top-0 shadow-xs" : "top-0.5",
+            slim && "border border-toggle-border",
+            slim && isSelected && "border-toggle-slim-border_pressed",
+            slim && isSelected && isHovered && "border-toggle-slim-border_pressed-hover",
+            classes.thumb,
+            classes.thumbPosition
+          )
+        }
+      )
+    }
+  );
+};
+var focusShadowPlain = "focus-visible:outline-none focus-visible:[box-shadow:0px_0px_0px_2px_var(--color-bg-primary),0px_0px_0px_4px_var(--color-focus-ring)]";
+var focusShadowInset = "[box-shadow:0px_0px_0px_2px_var(--color-bg-primary),0px_0px_0px_4px_var(--color-focus-ring)]";
+var DropdownItem = ({ label, children, addon, icon: Icon, avatarUrl, unstyled, selectionIndicator = "checkmark", ...props }) => {
+  const SelectionIndicator = useCallback(
+    (state) => {
+      if (selectionIndicator === "checkmark") {
+        return /* @__PURE__ */ jsx(
+          CheckIcon,
+          {
+            "aria-hidden": "true",
+            className: cx("size-4 shrink-0 stroke-[2.25px] text-fg-brand-primary", !state.isSelected && "invisible", state.className)
+          }
+        );
+      }
+      if (selectionIndicator === "checkbox") {
+        return /* @__PURE__ */ jsx(
+          CheckboxBase,
+          {
+            isSelected: state.isSelected && !state.hasSubmenu,
+            isIndeterminate: state.isSelected && state.hasSubmenu,
+            size: "sm",
+            className: cx("shrink-0", state.className)
+          }
+        );
+      }
+      if (selectionIndicator === "radio") {
+        return /* @__PURE__ */ jsx(RadioButtonBase, { isSelected: state.isSelected, className: cx("shrink-0", state.className) });
+      }
+      if (selectionIndicator === "toggle") {
+        return /* @__PURE__ */ jsx(ToggleBase, { slim: true, size: "sm", isSelected: state.isSelected, className: cx("shrink-0", state.className) });
+      }
+      return null;
+    },
+    [selectionIndicator]
+  );
+  if (unstyled) {
+    return /* @__PURE__ */ jsx(MenuItem, { id: label, textValue: label, ...props });
+  }
+  return /* @__PURE__ */ jsx(
+    MenuItem,
+    {
+      ...props,
+      className: (state) => cx(
+        "group block cursor-pointer px-1.5 py-px outline-hidden",
+        state.isDisabled && "cursor-not-allowed opacity-50",
+        typeof props.className === "function" ? props.className(state) : props.className
+      ),
+      children: (state) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cx(
+            "relative flex items-center rounded-md px-2.5 py-2 transition duration-100 ease-linear",
+            !state.isDisabled && "group-hover:bg-primary_hover",
+            state.isFocused && "bg-primary_hover",
+            state.isFocusVisible && focusShadowInset,
+            state.hasSubmenu && "pr-1.5"
+          ),
+          children: [
+            state.selectionMode !== "none" && !avatarUrl && !Icon && /* @__PURE__ */ jsx(SelectionIndicator, { ...state, className: "mr-2" }),
+            avatarUrl && /* @__PURE__ */ jsx("div", { className: "mr-2 flex size-4 items-center justify-center", children: /* @__PURE__ */ jsx(Avatar, { "aria-hidden": "true", size: "xs", src: avatarUrl, alt: label, className: "size-5" }) }),
+            Icon && /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true", className: "mr-2 size-4 shrink-0 stroke-[2.25px] text-fg-quaternary" }),
+            /* @__PURE__ */ jsx("span", { className: cx("grow truncate text-sm font-semibold text-secondary", state.isFocused && "text-secondary_hover"), children: label || (typeof children === "function" ? children(state) : children) }),
+            addon && /* @__PURE__ */ jsx("span", { className: "ml-1 shrink-0 pr-1 text-xs font-medium text-quaternary", children: addon }),
+            state.selectionMode !== "none" && (avatarUrl || Icon) && /* @__PURE__ */ jsx(SelectionIndicator, { ...state, className: "ml-1" }),
+            state.hasSubmenu && /* @__PURE__ */ jsx(CaretRightIcon, { "aria-hidden": "true", className: "ml-auto size-4 shrink-0 stroke-[2.25px] text-fg-quaternary" })
+          ]
+        }
+      )
+    }
+  );
+};
+var DropdownMenu = (props) => {
+  return /* @__PURE__ */ jsx(
+    Menu,
+    {
+      ...props,
+      className: (state) => cx("h-min overflow-y-auto py-1 outline-hidden select-none", typeof props.className === "function" ? props.className(state) : props.className)
+    }
+  );
+};
+var DropdownPopover = (props) => {
+  return /* @__PURE__ */ jsx(
+    Popover,
+    {
+      placement: "bottom right",
+      ...props,
+      className: (state) => cx(
+        "w-62 origin-(--trigger-anchor-point) overflow-auto rounded-lg bg-primary shadow-lg ring-1 ring-secondary_alt will-change-transform",
+        state.isEntering && "duration-150 ease-out animate-in fade-in placement-right:slide-in-from-left-0.5 placement-top:slide-in-from-bottom-0.5 placement-bottom:slide-in-from-top-0.5",
+        state.isExiting && "duration-100 ease-in animate-out fade-out placement-right:slide-out-to-left-0.5 placement-top:slide-out-to-bottom-0.5 placement-bottom:slide-out-to-top-0.5",
+        typeof props.className === "function" ? props.className(state) : props.className
+      ),
+      children: props.children
+    }
+  );
+};
+var DropdownSeparator = (props) => {
+  return /* @__PURE__ */ jsx(Separator, { ...props, className: cx("my-1 h-px w-full bg-border-secondary", props.className) });
+};
+var DropdownDotsButton = (props) => {
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      ...props,
+      "aria-label": "Open menu",
+      className: (state) => cx(
+        "cursor-pointer rounded-md text-fg-quaternary transition duration-100 ease-linear",
+        (state.isPressed || state.isHovered) && "text-fg-quaternary_hover",
+        focusShadowPlain,
+        typeof props.className === "function" ? props.className(state) : props.className
+      ),
+      children: /* @__PURE__ */ jsx(DotsThreeVerticalIcon, { className: "size-5 transition-inherit-all" })
+    }
+  );
+};
+var Dropdown = {
+  Root: MenuTrigger,
+  Popover: DropdownPopover,
+  Menu: DropdownMenu,
+  Section: MenuSection,
+  Item: DropdownItem,
+  Separator: DropdownSeparator,
+  DotsButton: DropdownDotsButton
+};
+var StatusDot = ({ status }) => /* @__PURE__ */ jsx("span", { className: "mr-2 inline-flex shrink-0 items-center justify-center p-[5px]", children: /* @__PURE__ */ jsx("span", { className: cx("inline-block size-1.5 rounded-full", status === "online" ? "bg-fg-success-secondary" : "bg-utility-neutral-300") }) });
+var DropdownIconAdvanced = () => {
+  const [viewOptions, setViewOptions] = useState(/* @__PURE__ */ new Set(["show-bookmarks"]));
+  return /* @__PURE__ */ jsxs(Dropdown.Root, { children: [
+    /* @__PURE__ */ jsx(Dropdown.DotsButton, {}),
+    /* @__PURE__ */ jsx(Dropdown.Popover, { className: "w-60", children: /* @__PURE__ */ jsxs(Dropdown.Menu, { selectionMode: "none", children: [
+      /* @__PURE__ */ jsxs(Dropdown.Section, { children: [
+        /* @__PURE__ */ jsx(Dropdown.Item, { icon: ArrowLeftIcon, children: "Back" }),
+        /* @__PURE__ */ jsx(Dropdown.Item, { icon: ArrowRightIcon, children: "Forward" }),
+        /* @__PURE__ */ jsx(Dropdown.Item, { addon: "\u2318R", icon: ArrowCounterClockwiseIcon, children: "Reload" })
+      ] }),
+      /* @__PURE__ */ jsxs(Dropdown.Section, { children: [
+        /* @__PURE__ */ jsx(Dropdown.Item, { icon: PencilLineIcon, children: "Edit page" }),
+        /* @__PURE__ */ jsx(Dropdown.Item, { icon: StarIcon, children: "Add to favorites" })
+      ] }),
+      /* @__PURE__ */ jsx(Dropdown.Separator, {}),
+      /* @__PURE__ */ jsxs(Dropdown.Section, { selectionMode: "multiple", selectedKeys: viewOptions, onSelectionChange: setViewOptions, children: [
+        /* @__PURE__ */ jsx(Dropdown.Item, { id: "show-bookmarks", children: "Show bookmarks" }),
+        /* @__PURE__ */ jsx(Dropdown.Item, { id: "show-urls", children: "Show full URLs" })
+      ] }),
+      /* @__PURE__ */ jsx(Dropdown.Separator, {}),
+      /* @__PURE__ */ jsxs(Dropdown.Section, { children: [
+        /* @__PURE__ */ jsx(Dropdown.Item, { id: "olivia", icon: () => /* @__PURE__ */ jsx(StatusDot, { status: "online" }), children: "Olivia Rhye" }),
+        /* @__PURE__ */ jsx(Dropdown.Item, { id: "sienna", icon: () => /* @__PURE__ */ jsx(StatusDot, { status: "offline" }), children: "Sienna Hewitt" })
+      ] }),
+      /* @__PURE__ */ jsx(Dropdown.Separator, {}),
+      /* @__PURE__ */ jsx(Dropdown.Section, { children: /* @__PURE__ */ jsxs(SubmenuTrigger, { children: [
+        /* @__PURE__ */ jsx(Dropdown.Item, { icon: CubeIcon, children: "More tools" }),
+        /* @__PURE__ */ jsx(Dropdown.Popover, { placement: "right top", offset: -6, className: "w-50", children: /* @__PURE__ */ jsxs(Dropdown.Menu, { selectionMode: "none", children: [
+          /* @__PURE__ */ jsxs(SubmenuTrigger, { children: [
+            /* @__PURE__ */ jsx(Dropdown.Item, { icon: DownloadSimpleIcon, children: "Save as" }),
+            /* @__PURE__ */ jsx(Dropdown.Popover, { placement: "right top", offset: -6, className: "w-50", children: /* @__PURE__ */ jsxs(Dropdown.Menu, { selectionMode: "none", children: [
+              /* @__PURE__ */ jsx(Dropdown.Item, { children: "PDF" }),
+              /* @__PURE__ */ jsx(Dropdown.Item, { children: "HTML" }),
+              /* @__PURE__ */ jsx(Dropdown.Item, { children: "Markdown" })
+            ] }) })
+          ] }),
+          /* @__PURE__ */ jsx(Dropdown.Item, { addon: "\u2318X", icon: ScissorsIcon, children: "Cut" }),
+          /* @__PURE__ */ jsx(Dropdown.Item, { addon: "\u2318C", icon: CopyIcon, children: "Copy" }),
+          /* @__PURE__ */ jsx(Dropdown.Separator, {}),
+          /* @__PURE__ */ jsxs(SubmenuTrigger, { children: [
+            /* @__PURE__ */ jsx(Dropdown.Item, { icon: CodeIcon, children: "Developer" }),
+            /* @__PURE__ */ jsx(Dropdown.Popover, { placement: "right top", offset: -6, className: "w-50", children: /* @__PURE__ */ jsxs(Dropdown.Menu, { selectionMode: "none", children: [
+              /* @__PURE__ */ jsx(Dropdown.Item, { children: "View source" }),
+              /* @__PURE__ */ jsx(Dropdown.Item, { children: "Developer tools" }),
+              /* @__PURE__ */ jsx(Dropdown.Item, { children: "Inspect elements" })
+            ] }) })
+          ] })
+        ] }) })
+      ] }) })
+    ] }) })
+  ] });
+};
+
+export { DropdownIconAdvanced };
+//# sourceMappingURL=dropdown-icon-advanced.js.map
+//# sourceMappingURL=dropdown-icon-advanced.js.map