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

package/dist/react/dropdown-account-card-xs.js

@@ -0,0 +1,507 @@
+import { createContext, useState, useCallback, useRef, useLayoutEffect } from 'react';
+import { CaretDownIcon } from '@phosphor-icons/react/dist/csr/CaretDown';
+import { SignOutIcon } from '@phosphor-icons/react/dist/csr/SignOut';
+import { MoonIcon } from '@phosphor-icons/react/dist/csr/Moon';
+import { PlusIcon } from '@phosphor-icons/react/dist/csr/Plus';
+import { GearIcon } from '@phosphor-icons/react/dist/csr/Gear';
+import { MenuTrigger, Button, MenuSection, Header, SubmenuTrigger, Popover, Menu, MenuItem, Separator } from 'react-aria-components';
+import { UserIcon } from '@phosphor-icons/react/dist/csr/User';
+import { extendTailwindMerge } from 'tailwind-merge';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { CheckIcon } from '@phosphor-icons/react/dist/csr/Check';
+import { CaretRightIcon } from '@phosphor-icons/react/dist/csr/CaretRight';
+import '@phosphor-icons/react/dist/csr/DotsThreeVertical';
+
+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 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 Dropdown = {
+  Root: MenuTrigger,
+  Popover: DropdownPopover,
+  Menu: DropdownMenu,
+  Section: MenuSection,
+  SectionHeader: Header,
+  Item: DropdownItem,
+  Separator: DropdownSeparator};
+var focusShadowPlain2 = "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 DropdownAccountCardXS = () => {
+  const [selectedAccount, setSelectedAccount] = useState(/* @__PURE__ */ new Set(["olivia"]));
+  const [selectedTheme, setSelectedTheme] = useState(/* @__PURE__ */ new Set(["light-mode"]));
+  return /* @__PURE__ */ jsxs(Dropdown.Root, { children: [
+    /* @__PURE__ */ jsxs(
+      Button,
+      {
+        className: ({ isPressed }) => cx(
+          "relative flex w-38 cursor-pointer items-center gap-1.5 rounded-lg bg-primary_alt p-2 text-left inset-ring-1 inset-ring-border-secondary",
+          isPressed && "opacity-90",
+          focusShadowPlain2
+        ),
+        children: [
+          /* @__PURE__ */ jsx(Avatar, { size: "xs", src: "https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80", className: "size-5" }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-primary", children: "Olivia Rhye" }),
+          /* @__PURE__ */ jsx("div", { className: "absolute top-1 right-1 flex size-7 items-center justify-center rounded-md", children: /* @__PURE__ */ jsx(CaretDownIcon, { className: "size-4 shrink-0 stroke-[2.25px] text-fg-quaternary" }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(Dropdown.Popover, { className: "w-50", children: /* @__PURE__ */ jsxs(Dropdown.Menu, { children: [
+      /* @__PURE__ */ jsx(Dropdown.Item, { icon: GearIcon, addon: "\u2318S", children: "Settings" }),
+      /* @__PURE__ */ jsx(Dropdown.Section, { selectionMode: "single", selectedKeys: selectedTheme, onSelectionChange: setSelectedTheme, children: /* @__PURE__ */ jsx(Dropdown.Item, { id: "dark-mode", icon: MoonIcon, selectionIndicator: "toggle", children: "Dark mode" }) }),
+      /* @__PURE__ */ jsx(Dropdown.Separator, {}),
+      /* @__PURE__ */ jsxs(Dropdown.Section, { selectionMode: "single", selectedKeys: selectedAccount, onSelectionChange: setSelectedAccount, children: [
+        /* @__PURE__ */ jsx(Dropdown.SectionHeader, { className: "px-4 pt-1.5 pb-0.5 text-xs font-semibold text-brand-secondary", children: "Switch Account" }),
+        /* @__PURE__ */ jsx(Dropdown.Item, { id: "olivia", avatarUrl: "https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80", selectionIndicator: "radio", children: "Olivia Rhye" }),
+        /* @__PURE__ */ jsx(Dropdown.Item, { id: "sienna", avatarUrl: "https://www.untitledui.com/images/avatars/sienna-hewitt?fm=webp&q=80", selectionIndicator: "radio", children: "Sienna Hewitt" })
+      ] }),
+      /* @__PURE__ */ jsx(Dropdown.Item, { icon: PlusIcon, children: "Add account" }),
+      /* @__PURE__ */ jsx(Dropdown.Separator, {}),
+      /* @__PURE__ */ jsxs(SubmenuTrigger, { children: [
+        /* @__PURE__ */ jsx(Dropdown.Item, { icon: SignOutIcon, children: "Sign out" }),
+        /* @__PURE__ */ jsx(Dropdown.Popover, { placement: "right top", offset: -6, children: /* @__PURE__ */ jsxs(Dropdown.Menu, { children: [
+          /* @__PURE__ */ jsx(Dropdown.Item, { children: "Current device" }),
+          /* @__PURE__ */ jsx(Dropdown.Item, { children: "All devices" })
+        ] }) })
+      ] })
+    ] }) })
+  ] });
+};
+
+export { DropdownAccountCardXS };
+//# sourceMappingURL=dropdown-account-card-xs.js.map
+//# sourceMappingURL=dropdown-account-card-xs.js.map