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

package/dist/react/dropdown-button-link.js

@@ -0,0 +1,501 @@
+import { createContext, useState, useCallback, useRef, useLayoutEffect } from 'react';
+import { CaretDownIcon } from '@phosphor-icons/react/dist/csr/CaretDown';
+import { TrashIcon } from '@phosphor-icons/react/dist/csr/Trash';
+import { MenuTrigger, Button, MenuSection, 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 '@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 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,
+  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 permissions = [
+  { id: "owner", label: "Owner" },
+  { id: "can-edit", label: "Can edit" },
+  { id: "can-view", label: "Can view" }
+];
+var DropdownButtonLink = () => {
+  const [selectedPermission, setSelectedPermission] = useState(permissions[1].id);
+  return /* @__PURE__ */ jsxs(Dropdown.Root, { children: [
+    /* @__PURE__ */ jsxs(
+      Button,
+      {
+        className: ({ isPressed }) => cx(
+          "flex cursor-pointer items-center gap-1 rounded text-sm font-semibold text-tertiary",
+          isPressed && "text-tertiary_hover",
+          focusShadowPlain2
+        ),
+        children: [
+          permissions.find((permission) => permission.id === selectedPermission.toString())?.label,
+          /* @__PURE__ */ jsx(CaretDownIcon, { className: "size-3 shrink-0 stroke-3 text-fg-quaternary" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(Dropdown.Popover, { className: "w-40", children: /* @__PURE__ */ jsxs(Dropdown.Menu, { children: [
+      /* @__PURE__ */ jsx(
+        Dropdown.Section,
+        {
+          selectionMode: "single",
+          selectedKeys: [selectedPermission],
+          onSelectionChange: (keys) => setSelectedPermission(typeof keys === "string" ? keys : keys.keys().toArray()[0]),
+          children: permissions.map((permission) => /* @__PURE__ */ jsx(Dropdown.Item, { id: permission.id, children: permission.label }, permission.id))
+        }
+      ),
+      /* @__PURE__ */ jsx(Dropdown.Separator, {}),
+      /* @__PURE__ */ jsx(Dropdown.Section, { children: /* @__PURE__ */ jsx(Dropdown.Item, { icon: TrashIcon, children: "Delete" }) })
+    ] }) })
+  ] });
+};
+
+export { DropdownButtonLink };
+//# sourceMappingURL=dropdown-button-link.js.map
+//# sourceMappingURL=dropdown-button-link.js.map

package/dist/react/dropdown-button-link.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../utils/cx.ts","../../../../components/base/avatar/base-components/avatar-online-indicator.tsx","../../../../components/base/avatar/base-components/verified-tick.tsx","../../../../components/base/avatar/base-components/avatar-count.tsx","../../../../components/base/avatar/avatar.tsx","../../../../components/base/checkbox/checkbox.tsx","../../../../components/base/radio-buttons/radio-buttons.tsx","../../../../components/base/toggle/toggle.tsx","../../../../components/base/dropdown/dropdown.tsx","../../../../components/base/dropdown/dropdown-button-link.tsx"],"names":["jsx","jsxs","sizes","User01","useRef","useLayoutEffect","focusRingShadow","styles","Check","AriaMenuItem","ChevronRight","AriaMenu","AriaPopover","AriaSeparator","AriaMenuTrigger","AriaMenuSection","focusShadowPlain","useState","AriaButton","ChevronDown","Trash01"],"mappings":"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","file":"dropdown-button-link.js","sourcesContent":["import { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({\n    extend: {\n        theme: {\n            text: [\"display-xs\", \"display-sm\", \"display-md\", \"display-lg\", \"display-xl\", \"display-2xl\"],\n        },\n    },\n});\n\n/**\n * This function is a wrapper around the twMerge function.\n * It is used to merge the classes inside style objects.\n */\nexport const cx = twMerge;\n\n/**\n * This function does nothing besides helping us to be able to\n * sort the classes inside style objects which is not supported\n * by the Tailwind IntelliSense by default.\n */\nexport function sortCx<T extends Record<string, string | number | Record<string, string | number | Record<string, string | number>>>>(classes: T): T {\n    return classes;\n}\n","\"use client\";\n\nimport { cx } from \"@/utils/cx\";\n\nconst sizes = {\n    xs: \"size-1.5\",\n    sm: \"size-2\",\n    md: \"size-2.5\",\n    lg: \"size-3\",\n    xl: \"size-3.5\",\n    \"2xl\": \"size-4\",\n    \"3xl\": \"size-4.5\",\n    \"4xl\": \"size-5\",\n};\n\ninterface AvatarOnlineIndicatorProps {\n    size: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\" | \"4xl\";\n    status: \"online\" | \"offline\";\n    className?: string;\n}\n\nexport const AvatarOnlineIndicator = ({ size, status, className }: AvatarOnlineIndicatorProps) => (\n    <span\n        className={cx(\n            \"absolute right-0 bottom-0 flex justify-center rounded-full ring-[1.5px] ring-bg-primary\",\n            status === \"online\" ? \"bg-fg-success-secondary\" : \"bg-utility-neutral-300\",\n            sizes[size],\n            className,\n        )}\n        style={{\n            backgroundImage:\n                \"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%)\",\n        }}\n    >\n        {/* Reflection */}\n        <svg viewBox=\"0 0 7.2 2.85\" fill=\"none\" className=\"mt-[10%] h-[20%] w-[60%]\">\n            <path\n                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\"\n                fill=\"url(#reflection-gradient)\"\n                fillOpacity=\"0.4\"\n            />\n            <defs>\n                <linearGradient id=\"reflection-gradient\" x1=\"3.6\" y1=\"0\" x2=\"3.6\" y2=\"2.4\" gradientUnits=\"userSpaceOnUse\">\n                    <stop stopColor=\"white\" />\n                    <stop offset=\"1\" stopColor=\"white\" stopOpacity=\"0.1\" />\n                </linearGradient>\n            </defs>\n        </svg>\n    </span>\n);\n","\"use client\";\n\nimport { cx } from \"@/utils/cx\";\n\nconst sizes = {\n    xs: \"size-2.5\",\n    sm: \"size-3\",\n    md: \"size-3.5\",\n    lg: \"size-4\",\n    xl: \"size-4.5\",\n    \"2xl\": \"size-5\",\n    \"3xl\": \"size-6\",\n    \"4xl\": \"size-8\",\n};\n\ninterface VerifiedTickProps {\n    size: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\" | \"4xl\";\n    className?: string;\n}\n\nexport const VerifiedTick = ({ size, className }: VerifiedTickProps) => (\n    <svg className={cx(\"z-10 text-utility-blue-500\", sizes[size], className)} viewBox=\"0 0 10 10\" fill=\"none\">\n        <path\n            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\"\n            className=\"fill-current\"\n        />\n        <path\n            fillRule=\"evenodd\"\n            clipRule=\"evenodd\"\n            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\"\n            fill=\"white\"\n        />\n    </svg>\n);\n","\"use client\";\n\nimport { cx } from \"@/utils/cx\";\n\ninterface AvatarCountProps {\n    count: number;\n    className?: string;\n}\n\nexport const AvatarCount = ({ count, className }: AvatarCountProps) => (\n    <div className={cx(\"absolute right-0 bottom-0 p-px\", className)}>\n        <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\">\n            {count}\n        </div>\n    </div>\n);\n","\"use client\";\n\n/** Figma: Avatar (18:1350) */\n\nimport { type FC, type ReactNode, useState } from \"react\";\nimport { UserIcon as User01 } from \"@phosphor-icons/react/dist/csr/User\";\nimport { cx } from \"@/utils/cx\";\nimport { AvatarOnlineIndicator, VerifiedTick } from \"./base-components\";\nimport { AvatarCount } from \"./base-components/avatar-count\";\n\nexport interface AvatarProps {\n    size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\n    className?: string;\n    /**\n     * The class name for the main child of the avatar.\n     */\n    contentClassName?: string;\n    src?: string | null;\n    alt?: string;\n    /**\n     * Display an inner contrast border around the avatar image.\n     */\n    contrastBorder?: boolean;\n    /**\n     * Whether the avatar should be rounded.\n     * @default true\n     */\n    rounded?: boolean;\n    /**\n     * Display an outer border around the avatar.\n     */\n    border?: boolean;\n    /**\n     * Display a badge (i.e. company logo).\n     */\n    badge?: ReactNode;\n    /**\n     * Display a status indicator.\n     */\n    status?: \"online\" | \"offline\";\n    /**\n     * Display a verified tick icon.\n     *\n     * @default false\n     */\n    verified?: boolean;\n    /**\n     * Display a count badge.\n     */\n    count?: number;\n    /**\n     * The initials of the user to display if no image is available.\n     */\n    initials?: string;\n    /**\n     * An icon to display if no image is available.\n     */\n    placeholderIcon?: FC<{ className?: string }>;\n    /**\n     * A placeholder to display if no image is available.\n     */\n    placeholder?: ReactNode;\n\n    /**\n     * Whether the avatar should show a focus ring when the parent group is in focus.\n     * For example, when the avatar is wrapped inside a link.\n     *\n     * @default false\n     */\n    focusable?: boolean;\n}\n\nconst styles = {\n    xs: { root: \"size-6\", rootWithBorder: \"p-px\", initials: \"text-xs font-semibold\", icon: \"size-4\" },\n    sm: { root: \"size-8\", rootWithBorder: \"p-px\", initials: \"text-sm font-semibold\", icon: \"size-5\" },\n    md: { root: \"size-10\", rootWithBorder: \"p-px\", initials: \"text-md font-semibold\", icon: \"size-6\" },\n    lg: { root: \"size-12\", rootWithBorder: \"p-[1.5px]\", initials: \"text-lg font-semibold\", icon: \"size-7\" },\n    xl: { root: \"size-14\", rootWithBorder: \"p-0.5\", initials: \"text-xl font-semibold\", icon: \"size-8\" },\n    \"2xl\": { root: \"size-16\", rootWithBorder: \"p-0.5\", initials: \"text-display-xs font-semibold\", icon: \"size-8\" },\n};\n\nexport const Avatar = ({\n    size = \"md\",\n    src,\n    alt,\n    initials,\n    placeholder,\n    placeholderIcon: PlaceholderIcon,\n    border,\n    badge,\n    status,\n    verified,\n    count,\n    focusable = false,\n    rounded = true,\n    className,\n    contentClassName,\n}: AvatarProps) => {\n    const [isFailed, setIsFailed] = useState(false);\n\n    const canShowImage = src && !isFailed;\n\n    const renderMainContent = () => {\n        if (canShowImage) {\n            return <img data-avatar-img className=\"size-full object-cover\" src={src} alt={alt} onError={() => setIsFailed(true)} />;\n        }\n\n        if (initials) {\n            return <span className={cx(\"text-quaternary\", styles[size].initials)}>{initials}</span>;\n        }\n\n        if (PlaceholderIcon) {\n            return <PlaceholderIcon className={cx(\"text-fg-quaternary\", styles[size].icon)} />;\n        }\n\n        return placeholder || <User01 className={cx(\"text-fg-quaternary\", styles[size].icon)} />;\n    };\n\n    const renderBadgeContent = () => {\n        if (status) {\n            return <AvatarOnlineIndicator status={status} size={size} />;\n        }\n\n        if (verified) {\n            return <VerifiedTick size={size} className={cx(\"absolute right-0 bottom-0\", size === \"xs\" && \"-right-px -bottom-px\")} />;\n        }\n\n        if (count) {\n            return <AvatarCount count={count} />;\n        }\n\n        return badge;\n    };\n\n    return (\n        <div\n            data-avatar\n            className={cx(\n                \"relative inline-flex shrink-0 rounded-[7px]\",\n                rounded && \"rounded-full\",\n                // Focus styles\n                focusable &&\n                    \"outline-none group-focus-visible:[box-shadow:0px_0px_0px_2px_var(--color-bg-primary),0px_0px_0px_4px_var(--color-focus-ring)]\",\n                border && \"ring-1 ring-secondary_alt\",\n                border && styles[size].rootWithBorder,\n                styles[size].root,\n                className,\n            )}\n        >\n            <div\n                className={cx(\n                    \"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]\",\n                    rounded && \"rounded-full\",\n                    canShowImage &&\n                        size !== \"xs\" &&\n                        \"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%)]\",\n                    contentClassName,\n                )}\n            >\n                {renderMainContent()}\n            </div>\n            {renderBadgeContent()}\n        </div>\n    );\n};\n","\"use client\";\n\nimport { useLayoutEffect, useRef, type ReactNode, type Ref } from \"react\";\nimport { Checkbox as AriaCheckbox, type CheckboxProps as AriaCheckboxProps } from \"react-aria-components\";\nimport { cx } from \"@/utils/cx\";\n\nconst CHECKBOX_TICK_DELAY_MS = 60;\nconst CHECKBOX_TICK_DRAW_MS = 100;\n\n/** Draw-on-check tick animation — remounts when checked so it replays each time. */\nfunction CheckboxAnimatedCheckMark({ className }: { className?: string }) {\n    const pathRef = useRef<SVGPathElement>(null);\n\n    useLayoutEffect(() => {\n        const path = pathRef.current;\n        if (!path || typeof path.getTotalLength !== \"function\") return;\n        const len = path.getTotalLength();\n        if (len <= 0) return;\n\n        path.style.strokeDasharray = `${len}`;\n        path.style.strokeDashoffset = `${len}`;\n\n        if (typeof path.animate !== \"function\") {\n            path.style.strokeDashoffset = \"0\";\n            return;\n        }\n\n        const anim = path.animate([{ strokeDashoffset: len }, { strokeDashoffset: 0 }], {\n            duration: CHECKBOX_TICK_DRAW_MS,\n            delay: CHECKBOX_TICK_DELAY_MS,\n            easing: \"cubic-bezier(0.45, 0, 0.2, 1)\",\n            fill: \"forwards\",\n        });\n        return () => anim.cancel();\n    }, []);\n\n    return (\n        <svg aria-hidden=\"true\" viewBox=\"0 0 14 14\" fill=\"none\" className={cx(\"block shrink-0\", className)}>\n            <path\n                ref={pathRef}\n                d=\"M2.33325 7L5.24992 9.91667L11.6666 3.5\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n            />\n        </svg>\n    );\n}\n\n/** Figma Focus rings/focus-ring — 2px surface gap + 4px brand ring (matches Button). */\nconst focusRingShadow =\n    \"outline-none [box-shadow:0px_0px_0px_2px_var(--color-bg-primary),0px_0px_0px_4px_var(--color-focus-ring)]\";\n\nexport interface CheckboxBaseProps {\n    size?: \"sm\" | \"md\";\n    className?: string;\n    isFocusVisible?: boolean;\n    isSelected?: boolean;\n    isDisabled?: boolean;\n    isIndeterminate?: boolean;\n}\n\nexport const CheckboxBase = ({ className, isSelected, isDisabled, isIndeterminate, size = \"sm\", isFocusVisible = false }: CheckboxBaseProps) => {\n    const isChecked = isSelected || isIndeterminate;\n    const iconClassName = size === \"sm\" ? \"size-2.5\" : \"size-3.5\";\n\n    return (\n        <div\n            className={cx(\n                \"relative flex shrink-0 cursor-pointer appearance-none items-center justify-center border border-solid border-primary\",\n                size === \"sm\" ? \"size-4 rounded-xs\" : \"size-5 rounded-sm\",\n                isChecked ? \"border-transparent bg-brand-solid\" : \"bg-primary\",\n                isDisabled && \"cursor-not-allowed opacity-50\",\n                isDisabled && !isChecked && \"bg-tertiary\",\n                isFocusVisible && !isDisabled && focusRingShadow,\n                className,\n            )}\n        >\n            {isIndeterminate && (\n                <svg\n                    aria-hidden=\"true\"\n                    viewBox=\"0 0 14 14\"\n                    fill=\"none\"\n                    className={cx(\"pointer-events-none block shrink-0 text-fg-white\", iconClassName)}\n                >\n                    <path d=\"M2.91675 7H11.0834\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n                </svg>\n            )}\n\n            {isSelected && !isIndeterminate && (\n                <CheckboxAnimatedCheckMark className={cx(\"pointer-events-none text-fg-white\", iconClassName)} />\n            )}\n        </div>\n    );\n};\nCheckboxBase.displayName = \"CheckboxBase\";\n\ninterface CheckboxProps extends AriaCheckboxProps {\n    ref?: Ref<HTMLLabelElement>;\n    size?: \"sm\" | \"md\";\n    label?: ReactNode;\n    hint?: ReactNode;\n}\n\nexport const Checkbox = ({ label, hint, size = \"sm\", className, ...ariaCheckboxProps }: CheckboxProps) => {\n    const sizes = {\n        sm: {\n            root: \"gap-2\",\n            textWrapper: \"\",\n            label: \"text-sm font-medium\",\n            hint: \"text-sm\",\n        },\n        md: {\n            root: \"gap-3\",\n            textWrapper: \"gap-0.5 break-words\",\n            label: \"text-md font-medium\",\n            hint: \"text-md\",\n        },\n    };\n\n    return (\n        <AriaCheckbox\n            {...ariaCheckboxProps}\n            className={(state) =>\n                cx(\n                    \"relative flex items-start\",\n                    state.isDisabled && \"cursor-not-allowed\",\n                    sizes[size].root,\n                    typeof className === \"function\" ? className(state) : className,\n                )\n            }\n        >\n            {({ isSelected, isIndeterminate, isDisabled, isFocusVisible }) => (\n                <>\n                    <CheckboxBase\n                        size={size}\n                        isSelected={isSelected}\n                        isIndeterminate={isIndeterminate}\n                        isDisabled={isDisabled}\n                        isFocusVisible={isFocusVisible}\n                        className={label || hint ? \"mt-0.5\" : \"\"}\n                    />\n                    {(label || hint) && (\n                        <div className={cx(\"inline-flex flex-col\", sizes[size].textWrapper)}>\n                            {label && <p className={cx(\"text-secondary select-none\", sizes[size].label)}>{label}</p>}\n                            {hint && (\n                                <span className={cx(\"text-tertiary\", sizes[size].hint)} onClick={(event) => event.stopPropagation()}>\n                                    {hint}\n                                </span>\n                            )}\n                        </div>\n                    )}\n                </>\n            )}\n        </AriaCheckbox>\n    );\n};\nCheckbox.displayName = \"Checkbox\";\n","\"use client\";\n\nimport { useLayoutEffect, useRef, type ReactNode, type Ref, createContext, useContext } from \"react\";\nimport {\n    Radio as AriaRadio,\n    RadioGroup as AriaRadioGroup,\n    type RadioGroupProps as AriaRadioGroupProps,\n    type RadioProps as AriaRadioProps,\n} from \"react-aria-components\";\nimport { cx } from \"@/utils/cx\";\n\nconst RADIO_DOT_DELAY_MS = 60;\nconst RADIO_DOT_POP_MS = 100;\n\n/** Pop-in dot animation — remounts when selected so it replays each time (matches Checkbox tick timing). */\nfunction RadioAnimatedDot({ className }: { className?: string }) {\n    const dotRef = useRef<HTMLDivElement>(null);\n\n    useLayoutEffect(() => {\n        const dot = dotRef.current;\n        if (!dot) return;\n\n        if (typeof dot.animate !== \"function\") {\n            dot.style.opacity = \"1\";\n            dot.style.transform = \"scale(1)\";\n            return;\n        }\n\n        const anim = dot.animate(\n            [\n                { opacity: 0, transform: \"scale(0)\" },\n                { opacity: 1, transform: \"scale(1)\" },\n            ],\n            {\n                duration: RADIO_DOT_POP_MS,\n                delay: RADIO_DOT_DELAY_MS,\n                easing: \"cubic-bezier(0.45, 0, 0.2, 1)\",\n                fill: \"forwards\",\n            },\n        );\n        return () => anim.cancel();\n    }, []);\n\n    return <div ref={dotRef} aria-hidden=\"true\" className={cx(\"rounded-full bg-fg-white\", className)} style={{ opacity: 0, transform: \"scale(0)\" }} />;\n}\n\n/** Figma: _Radio button base (1097:63638) — spread focus ring (2px surface gap + 4px focus-ring). */\nconst focusRingShadow =\n    \"outline-none [box-shadow:0px_0px_0px_2px_var(--color-bg-primary),0px_0px_0px_4px_var(--color-focus-ring)]\";\n\nexport interface RadioGroupContextType {\n    size?: \"sm\" | \"md\";\n}\n\nconst RadioGroupContext = createContext<RadioGroupContextType | null>(null);\n\nexport interface RadioButtonBaseProps {\n    size?: \"sm\" | \"md\";\n    className?: string;\n    isFocusVisible?: boolean;\n    isSelected?: boolean;\n    isDisabled?: boolean;\n}\n\nexport const RadioButtonBase = ({ className, isFocusVisible, isSelected, isDisabled, size = \"sm\" }: RadioButtonBaseProps) => {\n    const dotClassName = size === \"sm\" ? \"size-1.5\" : \"size-2\";\n\n    return (\n        <div\n            className={cx(\n                \"relative flex shrink-0 cursor-pointer appearance-none items-center justify-center overflow-clip rounded-full border border-solid border-primary bg-primary\",\n                size === \"sm\" ? \"size-4\" : \"size-5\",\n                isSelected && \"border-transparent bg-brand-solid\",\n                isDisabled && \"cursor-not-allowed opacity-50\",\n                isDisabled && !isSelected && \"bg-tertiary\",\n                isFocusVisible && !isDisabled && focusRingShadow,\n                className,\n            )}\n        >\n            {isSelected && <RadioAnimatedDot className={cx(\"pointer-events-none\", dotClassName)} />}\n        </div>\n    );\n};\nRadioButtonBase.displayName = \"RadioButtonBase\";\n\ninterface RadioButtonProps extends AriaRadioProps {\n    size?: \"sm\" | \"md\";\n    label?: ReactNode;\n    hint?: ReactNode;\n    ref?: Ref<HTMLLabelElement>;\n}\n\nexport const RadioButton = ({ label, hint, className, size = \"sm\", ...ariaRadioProps }: RadioButtonProps) => {\n    const context = useContext(RadioGroupContext);\n\n    size = context?.size ?? size;\n\n    const sizes = {\n        sm: {\n            root: \"gap-2\",\n            textWrapper: \"\",\n            label: \"text-sm font-medium\",\n            hint: \"text-sm\",\n        },\n        md: {\n            root: \"gap-3\",\n            textWrapper: \"gap-0.5\",\n            label: \"text-md font-medium\",\n            hint: \"text-md\",\n        },\n    };\n\n    return (\n        <AriaRadio\n            {...ariaRadioProps}\n            className={(state) =>\n                cx(\n                    \"relative flex items-start\",\n                    state.isDisabled && \"cursor-not-allowed\",\n                    sizes[size].root,\n                    typeof className === \"function\" ? className(state) : className,\n                )\n            }\n        >\n            {({ isSelected, isDisabled, isFocusVisible }) => (\n                <>\n                    <RadioButtonBase\n                        size={size}\n                        isSelected={isSelected}\n                        isDisabled={isDisabled}\n                        isFocusVisible={isFocusVisible}\n                        className={label || hint ? \"mt-0.5\" : \"\"}\n                    />\n                    {(label || hint) && (\n                        <div className={cx(\"inline-flex flex-col\", sizes[size].textWrapper)}>\n                            {label && <p className={cx(\"text-secondary select-none\", sizes[size].label)}>{label}</p>}\n                            {hint && (\n                                <span className={cx(\"text-tertiary\", sizes[size].hint)} onClick={(event) => event.stopPropagation()}>\n                                    {hint}\n                                </span>\n                            )}\n                        </div>\n                    )}\n                </>\n            )}\n        </AriaRadio>\n    );\n};\nRadioButton.displayName = \"RadioButton\";\n\ninterface RadioGroupProps extends RadioGroupContextType, AriaRadioGroupProps {\n    children: ReactNode;\n    className?: string;\n}\n\nexport const RadioGroup = ({ children, className, size = \"sm\", ...props }: RadioGroupProps) => {\n    return (\n        <RadioGroupContext.Provider value={{ size }}>\n            <AriaRadioGroup {...props} className={cx(\"flex flex-col gap-4\", className)}>\n                {children}\n            </AriaRadioGroup>\n        </RadioGroupContext.Provider>\n    );\n};\n","\"use client\";\n\nimport type { ReactNode } from \"react\";\nimport type { SwitchProps as AriaSwitchProps } from \"react-aria-components\";\nimport { Switch as AriaSwitch } from \"react-aria-components\";\nimport { cx } from \"@/utils/cx\";\n\n/** Figma: Toggle (1102:4631) — spread focus ring (2px surface gap + 4px focus-ring). */\nconst focusRingShadow =\n    \"outline-none [box-shadow:0px_0px_0px_2px_var(--color-bg-primary),0px_0px_0px_4px_var(--color-focus-ring)]\";\n\ninterface ToggleBaseProps {\n    size?: \"sm\" | \"md\";\n    slim?: boolean;\n    className?: string;\n    isHovered?: boolean;\n    isFocusVisible?: boolean;\n    isSelected?: boolean;\n    isDisabled?: boolean;\n}\n\nexport const ToggleBase = ({ className, isHovered, isDisabled, isFocusVisible, isSelected, slim, size = \"sm\" }: ToggleBaseProps) => {\n    const styles = {\n        default: {\n            sm: {\n                track: \"h-5 w-9 p-0.5\",\n                thumb: \"size-4\",\n                thumbPosition: isSelected ? \"left-[calc(100%-1rem-0.125rem)]\" : \"left-0.5\",\n            },\n            md: {\n                track: \"h-6 w-11 p-0.5\",\n                thumb: \"size-5\",\n                thumbPosition: isSelected ? \"left-[calc(100%-1.25rem-0.125rem)]\" : \"left-0.5\",\n            },\n        },\n        slim: {\n            sm: {\n                track: \"h-4 w-8\",\n                thumb: \"size-4\",\n                thumbPosition: isSelected ? \"left-4\" : \"left-0\",\n            },\n            md: {\n                track: \"h-5 w-10\",\n                thumb: \"size-5\",\n                thumbPosition: isSelected ? \"left-5\" : \"left-0\",\n            },\n        },\n    };\n\n    const classes = slim ? styles.slim[size] : styles.default[size];\n\n    const offTrackBackground = (() => {\n        if (isDisabled) return \"bg-tertiary\";\n        if (isHovered) return slim ? \"bg-tertiary\" : \"bg-brand-primary\";\n        return \"bg-quaternary\";\n    })();\n\n    return (\n        <div\n            className={cx(\n                \"relative inline-flex shrink-0 cursor-pointer overflow-clip rounded-full outline-none transition duration-150 ease-linear\",\n                !isSelected && offTrackBackground,\n                !slim && \"ring-[0.5px] ring-secondary ring-inset\",\n                slim && \"ring-1 ring-secondary ring-inset\",\n                isSelected && \"bg-brand-solid\",\n                isSelected && isHovered && \"bg-brand-solid_hover\",\n                isSelected && \"ring-transparent\",\n                isDisabled && \"cursor-not-allowed opacity-50\",\n                isFocusVisible && !isDisabled && focusRingShadow,\n                classes.track,\n                className,\n            )}\n        >\n            <div\n                className={cx(\n                    \"absolute rounded-full bg-fg-white shadow-sm transition-[left] duration-150 ease-in-out\",\n                    slim ? \"top-0 shadow-xs\" : \"top-0.5\",\n                    slim && \"border border-toggle-border\",\n                    slim && isSelected && \"border-toggle-slim-border_pressed\",\n                    slim && isSelected && isHovered && \"border-toggle-slim-border_pressed-hover\",\n                    classes.thumb,\n                    classes.thumbPosition,\n                )}\n            />\n        </div>\n    );\n};\n\nconst styles = {\n    sm: {\n        root: \"gap-2\",\n        textWrapper: \"\",\n        label: \"text-sm font-medium\",\n        hint: \"text-sm\",\n    },\n    md: {\n        root: \"gap-3\",\n        textWrapper: \"gap-0.5\",\n        label: \"text-md font-medium\",\n        hint: \"text-md\",\n    },\n};\n\ninterface ToggleProps extends AriaSwitchProps {\n    size?: \"sm\" | \"md\";\n    label?: string;\n    hint?: ReactNode;\n    slim?: boolean;\n}\n\nexport const Toggle = ({ label, hint, className, size = \"sm\", slim, ...ariaSwitchProps }: ToggleProps) => {\n    return (\n        <AriaSwitch\n            {...ariaSwitchProps}\n            className={(state) =>\n                cx(\n                    \"relative flex w-max items-start\",\n                    state.isDisabled && \"cursor-not-allowed\",\n                    styles[size].root,\n                    typeof className === \"function\" ? className(state) : className,\n                )\n            }\n        >\n            {({ isSelected, isDisabled, isFocusVisible, isHovered }) => (\n                <>\n                    <ToggleBase\n                        slim={slim}\n                        size={size}\n                        isHovered={isHovered}\n                        isDisabled={isDisabled}\n                        isFocusVisible={isFocusVisible}\n                        isSelected={isSelected}\n                        className={label || hint ? \"mt-0.5\" : \"\"}\n                    />\n\n                    {(label || hint) && (\n                        <div className={cx(\"flex flex-col\", styles[size].textWrapper)}>\n                            {label && <p className={cx(\"text-secondary select-none\", styles[size].label)}>{label}</p>}\n                            {hint && (\n                                <span className={cx(\"text-tertiary\", styles[size].hint)} onClick={(event) => event.stopPropagation()}>\n                                    {hint}\n                                </span>\n                            )}\n                        </div>\n                    )}\n                </>\n            )}\n        </AriaSwitch>\n    );\n};\n","\"use client\";\n\n/** Figma: Dropdown (18:0) */\n\nimport { type FC, type RefAttributes, useCallback } from \"react\";\nimport { CheckIcon as Check } from \"@phosphor-icons/react/dist/csr/Check\";\nimport { CaretRightIcon as ChevronRight } from \"@phosphor-icons/react/dist/csr/CaretRight\";\nimport { DotsThreeVerticalIcon as DotsVertical } from \"@phosphor-icons/react/dist/csr/DotsThreeVertical\";\nimport type {\n    ButtonProps as AriaButtonProps,\n    MenuItemProps as AriaMenuItemProps,\n    MenuProps as AriaMenuProps,\n    PopoverProps as AriaPopoverProps,\n    SeparatorProps as AriaSeparatorProps,\n    MenuItemRenderProps,\n} from \"react-aria-components\";\nimport {\n    Button as AriaButton,\n    Header as AriaHeader,\n    Menu as AriaMenu,\n    MenuItem as AriaMenuItem,\n    MenuSection as AriaMenuSection,\n    MenuTrigger as AriaMenuTrigger,\n    Popover as AriaPopover,\n    Separator as AriaSeparator,\n} from \"react-aria-components\";\nimport { cx } from \"@/utils/cx\";\nimport { Avatar } from \"../avatar/avatar\";\nimport { CheckboxBase } from \"../checkbox/checkbox\";\nimport { RadioButtonBase } from \"../radio-buttons/radio-buttons\";\nimport { ToggleBase } from \"../toggle/toggle\";\n\nconst focusShadowPlain =\n    \"focus-visible:outline-none focus-visible:[box-shadow:0px_0px_0px_2px_var(--color-bg-primary),0px_0px_0px_4px_var(--color-focus-ring)]\";\n\nconst focusShadowInset =\n    \"[box-shadow:0px_0px_0px_2px_var(--color-bg-primary),0px_0px_0px_4px_var(--color-focus-ring)]\";\n\ninterface DropdownItemProps extends AriaMenuItemProps {\n    /** The label of the item to be displayed. */\n    label?: string;\n    /** An addon to be displayed on the right side of the item. */\n    addon?: string;\n    /** If true, the item will not have any styles. */\n    unstyled?: boolean;\n    /** An icon to be displayed on the left side of the item. */\n    icon?: FC<{ className?: string }>;\n    /** Avatar URL to be displayed on the left side of the item. */\n    avatarUrl?: string;\n    /** The selection indicator to be displayed on the item. */\n    selectionIndicator?: \"checkmark\" | \"checkbox\" | \"radio\" | \"toggle\" | \"none\";\n}\n\nconst DropdownItem = ({ label, children, addon, icon: Icon, avatarUrl, unstyled, selectionIndicator = \"checkmark\", ...props }: DropdownItemProps) => {\n    const SelectionIndicator = useCallback(\n        (state: MenuItemRenderProps & { className?: string }) => {\n            if (selectionIndicator === \"checkmark\") {\n                return (\n                    <Check\n                        aria-hidden=\"true\"\n                        className={cx(\"size-4 shrink-0 stroke-[2.25px] text-fg-brand-primary\", !state.isSelected && \"invisible\", state.className)}\n                    />\n                );\n            }\n            if (selectionIndicator === \"checkbox\") {\n                return (\n                    <CheckboxBase\n                        isSelected={state.isSelected && !state.hasSubmenu}\n                        isIndeterminate={state.isSelected && state.hasSubmenu}\n                        size=\"sm\"\n                        className={cx(\"shrink-0\", state.className)}\n                    />\n                );\n            }\n            if (selectionIndicator === \"radio\") {\n                return <RadioButtonBase isSelected={state.isSelected} className={cx(\"shrink-0\", state.className)} />;\n            }\n            if (selectionIndicator === \"toggle\") {\n                return <ToggleBase slim size=\"sm\" isSelected={state.isSelected} className={cx(\"shrink-0\", state.className)} />;\n            }\n            return null;\n        },\n        [selectionIndicator],\n    );\n\n    if (unstyled) {\n        return <AriaMenuItem id={label} textValue={label} {...props} />;\n    }\n\n    return (\n        <AriaMenuItem\n            {...props}\n            className={(state) =>\n                cx(\n                    \"group block cursor-pointer px-1.5 py-px outline-hidden\",\n                    state.isDisabled && \"cursor-not-allowed opacity-50\",\n                    typeof props.className === \"function\" ? props.className(state) : props.className,\n                )\n            }\n        >\n            {(state) => (\n                <div\n                    className={cx(\n                        \"relative flex items-center rounded-md px-2.5 py-2 transition duration-100 ease-linear\",\n                        !state.isDisabled && \"group-hover:bg-primary_hover\",\n                        state.isFocused && \"bg-primary_hover\",\n                        state.isFocusVisible && focusShadowInset,\n                        state.hasSubmenu && \"pr-1.5\",\n                    )}\n                >\n                    {state.selectionMode !== \"none\" && !avatarUrl && !Icon && <SelectionIndicator {...state} className=\"mr-2\" />}\n\n                    {avatarUrl && (\n                        <div className=\"mr-2 flex size-4 items-center justify-center\">\n                            <Avatar aria-hidden=\"true\" size=\"xs\" src={avatarUrl} alt={label} className=\"size-5\" />\n                        </div>\n                    )}\n\n                    {Icon && <Icon aria-hidden=\"true\" className=\"mr-2 size-4 shrink-0 stroke-[2.25px] text-fg-quaternary\" />}\n\n                    <span className={cx(\"grow truncate text-sm font-semibold text-secondary\", state.isFocused && \"text-secondary_hover\")}>\n                        {label || (typeof children === \"function\" ? children(state) : children)}\n                    </span>\n\n                    {addon && <span className=\"ml-1 shrink-0 pr-1 text-xs font-medium text-quaternary\">{addon}</span>}\n\n                    {state.selectionMode !== \"none\" && (avatarUrl || Icon) && <SelectionIndicator {...state} className=\"ml-1\" />}\n\n                    {state.hasSubmenu && <ChevronRight aria-hidden=\"true\" className=\"ml-auto size-4 shrink-0 stroke-[2.25px] text-fg-quaternary\" />}\n                </div>\n            )}\n        </AriaMenuItem>\n    );\n};\n\ninterface DropdownMenuProps<T extends object> extends AriaMenuProps<T> {}\n\nconst DropdownMenu = <T extends object>(props: DropdownMenuProps<T>) => {\n    return (\n        <AriaMenu\n            {...props}\n            className={(state) =>\n                cx(\"h-min overflow-y-auto py-1 outline-hidden select-none\", typeof props.className === \"function\" ? props.className(state) : props.className)\n            }\n        />\n    );\n};\n\ninterface DropdownPopoverProps extends AriaPopoverProps {}\n\nconst DropdownPopover = (props: DropdownPopoverProps) => {\n    return (\n        <AriaPopover\n            placement=\"bottom right\"\n            {...props}\n            className={(state) =>\n                cx(\n                    \"w-62 origin-(--trigger-anchor-point) overflow-auto rounded-lg bg-primary shadow-lg ring-1 ring-secondary_alt will-change-transform\",\n                    state.isEntering &&\n                        \"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\",\n                    state.isExiting &&\n                        \"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\",\n                    typeof props.className === \"function\" ? props.className(state) : props.className,\n                )\n            }\n        >\n            {props.children}\n        </AriaPopover>\n    );\n};\n\nconst DropdownSeparator = (props: AriaSeparatorProps) => {\n    return <AriaSeparator {...props} className={cx(\"my-1 h-px w-full bg-border-secondary\", props.className)} />;\n};\n\nconst DropdownDotsButton = (props: AriaButtonProps & RefAttributes<HTMLButtonElement>) => {\n    return (\n        <AriaButton\n            {...props}\n            aria-label=\"Open menu\"\n            className={(state) =>\n                cx(\n                    \"cursor-pointer rounded-md text-fg-quaternary transition duration-100 ease-linear\",\n                    (state.isPressed || state.isHovered) && \"text-fg-quaternary_hover\",\n                    focusShadowPlain,\n                    typeof props.className === \"function\" ? props.className(state) : props.className,\n                )\n            }\n        >\n            <DotsVertical className=\"size-5 transition-inherit-all\" />\n        </AriaButton>\n    );\n};\n\nexport const Dropdown = {\n    Root: AriaMenuTrigger,\n    Popover: DropdownPopover,\n    Menu: DropdownMenu,\n    Section: AriaMenuSection,\n    SectionHeader: AriaHeader,\n    Item: DropdownItem,\n    Separator: DropdownSeparator,\n    DotsButton: DropdownDotsButton,\n};\n","\"use client\";\n\nimport { useState } from \"react\";\nimport { CaretDownIcon as ChevronDown } from \"@phosphor-icons/react/dist/csr/CaretDown\";\nimport { TrashIcon as Trash01 } from \"@phosphor-icons/react/dist/csr/Trash\";\nimport { Button as AriaButton } from \"react-aria-components\";\nimport { Dropdown } from \"@/components/base/dropdown/dropdown\";\nimport { cx } from \"@/utils/cx\";\n\nconst focusShadowPlain =\n    \"focus-visible:outline-none focus-visible:[box-shadow:0px_0px_0px_2px_var(--color-bg-primary),0px_0px_0px_4px_var(--color-focus-ring)]\";\n\nconst permissions = [\n    { id: \"owner\", label: \"Owner\" },\n    { id: \"can-edit\", label: \"Can edit\" },\n    { id: \"can-view\", label: \"Can view\" },\n];\n\nexport const DropdownButtonLink = () => {\n    const [selectedPermission, setSelectedPermission] = useState<string>(permissions[1].id);\n\n    return (\n        <Dropdown.Root>\n            <AriaButton\n                className={({ isPressed }) =>\n                    cx(\n                        \"flex cursor-pointer items-center gap-1 rounded text-sm font-semibold text-tertiary\",\n                        isPressed && \"text-tertiary_hover\",\n                        focusShadowPlain,\n                    )\n                }\n            >\n                {permissions.find((permission) => permission.id === selectedPermission.toString())?.label}\n                <ChevronDown className=\"size-3 shrink-0 stroke-3 text-fg-quaternary\" />\n            </AriaButton>\n\n            <Dropdown.Popover className=\"w-40\">\n                <Dropdown.Menu>\n                    <Dropdown.Section\n                        selectionMode=\"single\"\n                        selectedKeys={[selectedPermission]}\n                        onSelectionChange={(keys) => setSelectedPermission(typeof keys === \"string\" ? keys : (keys.keys().toArray()[0] as string))}\n                    >\n                        {permissions.map((permission) => (\n                            <Dropdown.Item key={permission.id} id={permission.id}>\n                                {permission.label}\n                            </Dropdown.Item>\n                        ))}\n                    </Dropdown.Section>\n                    <Dropdown.Separator />\n                    <Dropdown.Section>\n                        <Dropdown.Item icon={Trash01}>Delete</Dropdown.Item>\n                    </Dropdown.Section>\n                </Dropdown.Menu>\n            </Dropdown.Popover>\n        </Dropdown.Root>\n    );\n};\n"]}