@fanvue/ui 3.14.1 → 3.16.0

package/dist/cjs/components/DropdownMenu/DropdownMenu.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenu.cjs","sources":["../../../../src/components/DropdownMenu/DropdownMenu.tsx"],"sourcesContent":["import * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\";\nimport { useControllableState } from \"@radix-ui/react-use-controllable-state\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { FLOATING_CONTENT_COLLISION_PADDING } from \"../../utils/floatingContentCollisionPadding\";\nimport { IconButton } from \"../IconButton/IconButton\";\nimport { CloseIcon } from \"../Icons/CloseIcon\";\nimport { SearchIcon } from \"../Icons/SearchIcon\";\n\n// Movement, in CSS px, above which a touch press-and-release counts as a drag.\nconst TAP_MOVEMENT_THRESHOLD_PX = 10;\n\n// Keys that the menu must keep handling even when focus is inside a child\n// input — arrows move the highlight into the list, Tab leaves the menu, and\n// Enter / Escape close it.\nconst NAVIGATION_KEYS = new Set([\n  \"ArrowDown\",\n  \"ArrowUp\",\n  \"ArrowLeft\",\n  \"ArrowRight\",\n  \"Escape\",\n  \"Tab\",\n  \"Enter\",\n]);\n\ntype ActiveTap = {\n  pointerId: number;\n  x: number;\n  y: number;\n  movedPastThreshold: boolean;\n};\n\n// Lets DropdownMenuTrigger toggle the menu directly so it can gate on touch\n// movement — see radix-ui/primitives#1912.\nconst ToggleOpenContext = React.createContext<\n  ((updater: (prev: boolean) => boolean) => void) | null\n>(null);\n\n/** Props for the {@link DropdownMenu} root component. */\nexport interface DropdownMenuProps\n  extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Root> {}\n\n/** Root component that manages open/close state for a dropdown menu. */\nexport function DropdownMenu({\n  open: openProp,\n  defaultOpen,\n  onOpenChange,\n  children,\n  ...props\n}: DropdownMenuProps) {\n  const [open = false, setOpen] = useControllableState({\n    prop: openProp,\n    defaultProp: defaultOpen ?? false,\n    onChange: onOpenChange,\n  });\n\n  return (\n    <ToggleOpenContext.Provider value={setOpen}>\n      <DropdownMenuPrimitive.Root open={open} onOpenChange={setOpen} {...props}>\n        {children}\n      </DropdownMenuPrimitive.Root>\n    </ToggleOpenContext.Provider>\n  );\n}\n\n/** Props for the {@link DropdownMenuTrigger} component. */\nexport type DropdownMenuTriggerProps = React.ComponentPropsWithoutRef<\n  typeof DropdownMenuPrimitive.Trigger\n>;\n\n/**\n * The element that toggles the dropdown menu when clicked.\n *\n * On touch devices, the menu only opens if the press-and-release stays within\n * a small movement threshold. A drag that incidentally ends over the trigger\n * (common when scrolling a feed on Android Chrome) is ignored. Mouse and\n * keyboard interactions are unchanged.\n */\nexport const DropdownMenuTrigger = React.forwardRef<\n  React.ComponentRef<typeof DropdownMenuPrimitive.Trigger>,\n  DropdownMenuTriggerProps\n>((props, ref) => {\n  const toggleOpen = React.useContext(ToggleOpenContext);\n  const tapRef = React.useRef<ActiveTap | null>(null);\n\n  // Used outside our DropdownMenu wrapper — fall through to Radix defaults.\n  if (toggleOpen === null) {\n    return <DropdownMenuPrimitive.Trigger {...props} ref={ref} />;\n  }\n\n  return (\n    <DropdownMenuPrimitive.Trigger\n      {...props}\n      ref={ref}\n      onPointerDown={(event) => {\n        props.onPointerDown?.(event);\n        if (event.pointerType === \"mouse\" || props.disabled) return;\n        // Keep pointerup / pointercancel on this element if the finger drifts off.\n        // Optional because jsdom (used in tests) doesn't implement it.\n        event.currentTarget.setPointerCapture?.(event.pointerId);\n        tapRef.current = {\n          pointerId: event.pointerId,\n          x: event.clientX,\n          y: event.clientY,\n          movedPastThreshold: false,\n        };\n        // preventDefault stops Radix's pointerdown open path via composeEventHandlers.\n        event.preventDefault();\n      }}\n      onPointerMove={(event) => {\n        props.onPointerMove?.(event);\n        const tap = tapRef.current;\n        if (tap === null || event.pointerId !== tap.pointerId || tap.movedPastThreshold) {\n          return;\n        }\n        const dx = event.clientX - tap.x;\n        const dy = event.clientY - tap.y;\n        if (Math.hypot(dx, dy) > TAP_MOVEMENT_THRESHOLD_PX) {\n          tap.movedPastThreshold = true;\n        }\n      }}\n      onPointerUp={(event) => {\n        props.onPointerUp?.(event);\n        const tap = tapRef.current;\n        if (tap === null || event.pointerId !== tap.pointerId) return;\n        const wasDrag = tap.movedPastThreshold;\n        tapRef.current = null;\n        if (!wasDrag && !props.disabled) {\n          toggleOpen((prev) => !prev);\n        }\n      }}\n      onPointerCancel={(event) => {\n        props.onPointerCancel?.(event);\n        const tap = tapRef.current;\n        if (tap !== null && event.pointerId === tap.pointerId) {\n          tapRef.current = null;\n        }\n      }}\n    />\n  );\n});\nDropdownMenuTrigger.displayName = \"DropdownMenuTrigger\";\n\n/** Props for the {@link DropdownMenuContent} component. */\nexport interface DropdownMenuContentProps\n  extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> {}\n\n/**\n * The positioned content panel rendered inside a portal.\n *\n * Override the portal z-index per-instance via `style={{ zIndex: 1500 }}` or\n * globally with the `--fanvue-ui-portal-z-index` CSS custom property.\n *\n * @example\n * ```tsx\n * <DropdownMenu>\n *   <DropdownMenuTrigger asChild>\n *     <Button>Open</Button>\n *   </DropdownMenuTrigger>\n *   <DropdownMenuContent>\n *     <DropdownMenuItem>Option 1</DropdownMenuItem>\n *     <DropdownMenuItem>Option 2</DropdownMenuItem>\n *   </DropdownMenuContent>\n * </DropdownMenu>\n * ```\n */\nexport const DropdownMenuContent = React.forwardRef<\n  React.ComponentRef<typeof DropdownMenuPrimitive.Content>,\n  DropdownMenuContentProps\n>(\n  (\n    {\n      className,\n      style,\n      sideOffset = 4,\n      collisionPadding = FLOATING_CONTENT_COLLISION_PADDING,\n      ...props\n    },\n    ref,\n  ) => (\n    <DropdownMenuPrimitive.Portal>\n      <DropdownMenuPrimitive.Content\n        ref={ref}\n        sideOffset={sideOffset}\n        collisionPadding={collisionPadding}\n        className={cn(\n          \"w-max min-w-(--radix-dropdown-menu-trigger-width) max-w-(--radix-dropdown-menu-content-available-width) overflow-y-auto rounded-sm border border-neutral-alphas-200 bg-surface-primary p-1 text-content-primary shadow-lg\",\n          \"data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95\",\n          \"data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95\",\n          \"data-[side=top]:slide-in-from-bottom-2 data-[side=bottom]:slide-in-from-top-2\",\n          \"data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2\",\n          className,\n        )}\n        style={{\n          zIndex: \"var(--fanvue-ui-portal-z-index, 50)\",\n          maxHeight: \"var(--radix-dropdown-menu-content-available-height)\",\n          ...style,\n        }}\n        {...props}\n      />\n    </DropdownMenuPrimitive.Portal>\n  ),\n);\nDropdownMenuContent.displayName = \"DropdownMenuContent\";\n\n/** Props for the {@link DropdownMenuGroup} component. */\nexport type DropdownMenuGroupProps = React.ComponentPropsWithoutRef<\n  typeof DropdownMenuPrimitive.Group\n>;\n\n/** Groups related menu items. Accepts an optional `DropdownMenuLabel`. */\nexport const DropdownMenuGroup = DropdownMenuPrimitive.Group;\nDropdownMenuGroup.displayName = \"DropdownMenuGroup\";\n\n/** Vertical placement of a {@link DropdownMenuLabel} within its group. */\nexport type DropdownMenuLabelPosition = \"default\" | \"top\";\n\n/** Props for the {@link DropdownMenuLabel} component. */\nexport interface DropdownMenuLabelProps\n  extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> {\n  /**\n   * Vertical placement within the surrounding group. `\"top\"` is used for the\n   * first label directly under a header; `\"default\"` adds extra top padding to\n   * separate it from preceding items. @default \"default\"\n   */\n  position?: DropdownMenuLabelPosition;\n}\n\n/** A non-interactive label that groups related items within a menu. */\nexport const DropdownMenuLabel = React.forwardRef<\n  React.ComponentRef<typeof DropdownMenuPrimitive.Label>,\n  DropdownMenuLabelProps\n>(({ className, position = \"default\", ...props }, ref) => (\n  <DropdownMenuPrimitive.Label\n    ref={ref}\n    className={cn(\n      \"typography-description-12px-regular flex items-center px-3 text-content-secondary\",\n      position === \"top\" ? \"py-2\" : \"pb-2 pt-4\",\n      className,\n    )}\n    {...props}\n  />\n));\nDropdownMenuLabel.displayName = \"DropdownMenuLabel\";\n\n/**\n * Height preset for a dropdown menu item.\n *\n * `\"40\"` (default) and `\"32\"` are the v2 numeric tokens that mirror the Figma\n * design system. `\"sm\"` and `\"md\"` are deprecated aliases retained for\n * backwards compatibility — `\"sm\"` maps to `\"32\"`, `\"md\"` maps to `\"40\"`.\n */\nexport type DropdownMenuItemSize =\n  | \"40\"\n  | \"32\"\n  /** @deprecated Use `\"32\"` instead. */\n  | \"sm\"\n  /** @deprecated Use `\"40\"` instead. */\n  | \"md\";\n\nconst SIZE_NORMALIZED: Record<DropdownMenuItemSize, \"40\" | \"32\"> = {\n  \"40\": \"40\",\n  md: \"40\",\n  \"32\": \"32\",\n  sm: \"32\",\n};\n\nconst ITEM_SIZE_CLASSES: Record<\"40\" | \"32\", string> = {\n  \"40\": \"min-h-10 py-2 typography-body-default-16px-regular\",\n  \"32\": \"min-h-8 py-[7px] typography-body-small-14px-regular\",\n};\n\nconst ITEM_SELECTED_TYPOGRAPHY: Record<\"40\" | \"32\", string> = {\n  \"40\": \"typography-body-default-16px-semibold\",\n  \"32\": \"typography-body-small-14px-semibold\",\n};\n\nconst ITEM_COUNT_TYPOGRAPHY: Record<\"40\" | \"32\", string> = {\n  \"40\": \"typography-body-default-16px-regular\",\n  \"32\": \"typography-body-small-14px-regular\",\n};\n\nexport interface DropdownMenuItemProps\n  extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> {\n  /** Height of the menu item row. @default \"40\" */\n  size?: DropdownMenuItemSize;\n  /** Applies the destructive (error) treatment. Use for irreversible actions. @default false */\n  destructive?: boolean;\n  /** Icon (or other node) rendered before the label. Ignored when {@link DropdownMenuItemProps.avatar} is set. */\n  leadingIcon?: React.ReactNode;\n  /**\n   * Leading avatar rendered in place of {@link DropdownMenuItemProps.leadingIcon},\n   * for rows that represent a person or account. Pass an `Avatar` sized to `24`.\n   * Takes precedence over `leadingIcon`.\n   */\n  avatar?: React.ReactNode;\n  /** Icon (or other node) rendered after the label. */\n  trailingIcon?: React.ReactNode;\n  /** Trailing count or number (e.g. an unread total) rendered before {@link DropdownMenuItemProps.trailingIcon}. */\n  count?: React.ReactNode;\n  /**\n   * Optional secondary text rendered on a second line below the label. When\n   * provided, the row switches to a two-line layout and the leading/trailing\n   * icons align to the title line (top) rather than the row's vertical centre.\n   */\n  description?: React.ReactNode;\n  /** Marks the item as the current selection in a single-select menu. @default false */\n  selected?: boolean;\n}\n\n/**\n * An individual item within a {@link DropdownMenuContent}.\n *\n * @example\n * ```tsx\n * <DropdownMenuItem>Edit profile</DropdownMenuItem>\n * <DropdownMenuItem destructive>Delete</DropdownMenuItem>\n * <DropdownMenuItem leadingIcon={<EditIcon />}>Edit</DropdownMenuItem>\n *\n * // Feature-rich row with an avatar and a trailing count\n * <DropdownMenuItem avatar={<Avatar size={24} src={src} />} count=\"12\">\n *   Jane Doe\n * </DropdownMenuItem>\n *\n * // As a link\n * <DropdownMenuItem asChild>\n *   <a href=\"/settings\">Settings</a>\n * </DropdownMenuItem>\n * ```\n */\nexport const DropdownMenuItem = React.forwardRef<\n  React.ComponentRef<typeof DropdownMenuPrimitive.Item>,\n  DropdownMenuItemProps\n>(\n  (\n    {\n      size = \"40\",\n      destructive,\n      leadingIcon,\n      avatar,\n      trailingIcon,\n      count,\n      description,\n      selected,\n      className,\n      children,\n      asChild,\n      ...props\n    },\n    ref,\n  ) => {\n    const normalizedSize = SIZE_NORMALIZED[size];\n    const hasDescription = description != null;\n    const hasAvatar = avatar != null;\n    const itemClassName = cn(\n      \"group flex w-full cursor-pointer gap-2 rounded-xs px-3 outline-none\",\n      hasDescription ? \"items-start\" : \"items-center\",\n      ITEM_SIZE_CLASSES[normalizedSize],\n      // A 24px avatar would push the compact 32px row past its height with the\n      // default padding; tighten it so the avatar variant keeps the 32px contract.\n      hasAvatar && !hasDescription && normalizedSize === \"32\" && \"py-1\",\n      \"data-[highlighted]:bg-neutral-alphas-50\",\n      \"data-[disabled]:cursor-not-allowed data-[disabled]:text-content-disabled\",\n      destructive && \"text-error-content\",\n      selected && [\n        \"bg-buttons-primary-default text-content-primary-inverted\",\n        \"data-[highlighted]:bg-buttons-primary-default\",\n        ITEM_SELECTED_TYPOGRAPHY[normalizedSize],\n      ],\n      className,\n    );\n\n    if (asChild) {\n      return (\n        <DropdownMenuPrimitive.Item ref={ref} asChild className={itemClassName} {...props}>\n          {children}\n        </DropdownMenuPrimitive.Item>\n      );\n    }\n\n    // In the two-line (description) layout, icons sit on the title's line.\n    // 24px title line-height vs 16px icon → 4px (pt-1) centres the icon on it.\n    const iconAlignClassName = hasDescription ? \"flex shrink-0 items-center pt-1\" : null;\n\n    const countNode = count != null && (\n      <span\n        className={cn(\n          \"shrink-0 tabular-nums\",\n          ITEM_COUNT_TYPOGRAPHY[normalizedSize],\n          destructive\n            ? \"text-error-content\"\n            : selected\n              ? \"text-content-primary-inverted\"\n              : \"text-content-tertiary\",\n          \"group-data-[disabled]:text-content-disabled\",\n        )}\n      >\n        {count}\n      </span>\n    );\n\n    return (\n      <DropdownMenuPrimitive.Item ref={ref} className={itemClassName} {...props}>\n        {avatar != null ? (\n          <span className=\"shrink-0\">{avatar}</span>\n        ) : (\n          leadingIcon != null &&\n          (hasDescription ? (\n            <span className={iconAlignClassName!}>{leadingIcon}</span>\n          ) : (\n            leadingIcon\n          ))\n        )}\n        {hasDescription ? (\n          <span className=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n            <span className=\"truncate\">{children}</span>\n            <span\n              className={cn(\n                \"typography-body-small-14px-regular truncate\",\n                selected ? \"text-content-primary-inverted\" : \"text-content-secondary\",\n              )}\n            >\n              {description}\n            </span>\n          </span>\n        ) : (\n          <span className=\"min-w-0 flex-1 truncate\">{children}</span>\n        )}\n        {countNode}\n        {trailingIcon != null &&\n          (hasDescription ? (\n            <span className={iconAlignClassName!}>{trailingIcon}</span>\n          ) : (\n            trailingIcon\n          ))}\n      </DropdownMenuPrimitive.Item>\n    );\n  },\n);\nDropdownMenuItem.displayName = \"DropdownMenuItem\";\n\n/** Props for the {@link DropdownMenuSeparator} component. */\nexport interface DropdownMenuSeparatorProps\n  extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator> {}\n\n/** Visual separator between groups of items. */\nexport const DropdownMenuSeparator = React.forwardRef<\n  React.ComponentRef<typeof DropdownMenuPrimitive.Separator>,\n  DropdownMenuSeparatorProps\n>(({ className, ...props }, ref) => (\n  <DropdownMenuPrimitive.Separator\n    ref={ref}\n    className={cn(\"my-1 h-px bg-neutral-alphas-200\", className)}\n    {...props}\n  />\n));\nDropdownMenuSeparator.displayName = \"DropdownMenuSeparator\";\n\n/** Header type. `\"default\"` shows a title; `\"search\"` shows a search input. */\nexport type DropdownMenuHeaderType = \"default\" | \"search\";\n\n/** Header height preset. Matches the menu item sizing scale. */\nexport type DropdownMenuHeaderSize = \"40\" | \"32\";\n\n/** Search-input configuration for {@link DropdownMenuHeader} when `type=\"search\"`. */\nexport interface DropdownMenuHeaderSearchProps {\n  /** Controlled value of the search input. */\n  value?: string;\n  /** Uncontrolled default value. */\n  defaultValue?: string;\n  /** Fires when the input value changes. */\n  onChange?: (value: string) => void;\n  /** Placeholder text shown when the input is empty. @default \"Search…\" */\n  placeholder?: string;\n  /** Accessible label for the search input. @default \"Search\" */\n  \"aria-label\"?: string;\n}\n\nexport interface DropdownMenuHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Visual type. `\"default\"` shows a title; `\"search\"` shows a search input. @default \"default\" */\n  type?: DropdownMenuHeaderType;\n  /** Height preset for the header row. @default \"40\" */\n  size?: DropdownMenuHeaderSize;\n  /** Title text shown when `type=\"default\"`. Ignored if `children` is provided. */\n  title?: string;\n  /** Configuration for the embedded search input when `type=\"search\"`. */\n  searchProps?: DropdownMenuHeaderSearchProps;\n  /** Whether to render the close icon button on the right. @default true */\n  showClose?: boolean;\n  /** Fires when the close icon button is activated. */\n  onClose?: () => void;\n  /** Accessible label for the close button. @default \"Close menu\" */\n  closeLabel?: string;\n}\n\n/**\n * Optional header rendered at the top of a {@link DropdownMenuContent}. Use\n * `type=\"default\"` to title the menu, or `type=\"search\"` to embed a search\n * input for filtering long lists.\n *\n * Renders an inset separator beneath the row so it slots cleanly above the\n * first group of items.\n *\n * @example\n * ```tsx\n * <DropdownMenuContent>\n *   <DropdownMenuHeader title=\"Sort by\" onClose={() => setOpen(false)} />\n *   <DropdownMenuItem>Newest</DropdownMenuItem>\n *   <DropdownMenuItem>Oldest</DropdownMenuItem>\n * </DropdownMenuContent>\n * ```\n */\nexport const DropdownMenuHeader = React.forwardRef<HTMLDivElement, DropdownMenuHeaderProps>(\n  (\n    {\n      type = \"default\",\n      size = \"40\",\n      title,\n      searchProps,\n      showClose = true,\n      onClose,\n      closeLabel = \"Close menu\",\n      className,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const titleTypography =\n      size === \"32\"\n        ? \"typography-body-small-14px-semibold\"\n        : \"typography-body-default-16px-semibold\";\n    const toggleOpen = React.useContext(ToggleOpenContext);\n\n    const handleClose = () => {\n      onClose?.();\n      // Also dismiss the Radix menu when used in uncontrolled mode — otherwise\n      // the close button would look broken to consumers that don't wire up\n      // `open` / `onOpenChange` themselves.\n      toggleOpen?.(() => false);\n    };\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"flex flex-col px-1 pt-1 mb-1\",\n          // Search needs an 8px gap between the input and the divider; the\n          // default (title) variant uses 4px because the title baseline sits\n          // closer to the divider naturally.\n          type === \"search\" ? \"gap-2\" : \"gap-1\",\n          className,\n        )}\n        {...props}\n      >\n        <div className=\"flex items-center gap-4 pl-2\">\n          {type === \"default\" ? (\n            <div className={cn(\"min-w-0 flex-1 truncate text-content-primary\", titleTypography)}>\n              {children ?? title}\n            </div>\n          ) : (\n            <SearchInput {...searchProps} />\n          )}\n          {showClose && (\n            <IconButton\n              variant=\"tertiary\"\n              size=\"32\"\n              icon={<CloseIcon />}\n              onClick={handleClose}\n              aria-label={closeLabel}\n            />\n          )}\n        </div>\n        <DropdownMenuSeparator className=\"my-0\" />\n      </div>\n    );\n  },\n);\nDropdownMenuHeader.displayName = \"DropdownMenuHeader\";\n\nfunction SearchInput({\n  value,\n  defaultValue,\n  onChange,\n  placeholder = \"Search\\u2026\",\n  \"aria-label\": ariaLabel = \"Search\",\n}: DropdownMenuHeaderSearchProps = {}) {\n  return (\n    <label\n      className={cn(\n        \"flex min-w-0 flex-1 items-center gap-2 rounded-xs border border-border-primary\",\n        \"bg-neutral-alphas-50 px-3 py-1 text-content-primary\",\n        \"focus-within:shadow-focus-ring focus-within:outline-none\",\n      )}\n    >\n      <SearchIcon className=\"size-4 shrink-0 text-content-tertiary\" aria-hidden=\"true\" />\n      <input\n        type=\"search\"\n        className={cn(\n          \"typography-body-default-16px-regular min-w-0 flex-1 bg-transparent outline-none\",\n          \"placeholder:text-content-tertiary\",\n        )}\n        value={value}\n        defaultValue={defaultValue}\n        placeholder={placeholder}\n        aria-label={ariaLabel}\n        onChange={(event) => onChange?.(event.target.value)}\n        // Radix DropdownMenu listens for keystrokes on Content for its\n        // typeahead (typing letters jumps focus to a matching item). That\n        // listener steals focus from the input after the first letter, so we\n        // stop character keys from bubbling. Navigation keys (arrows / Tab /\n        // Escape / Enter) are still allowed through so the user can leave the\n        // input for the list or close the menu. Pointer events are stopped so\n        // clicking back into the input doesn't fight the menu's focus\n        // management either.\n        onKeyDown={(event) => {\n          if (!NAVIGATION_KEYS.has(event.key)) event.stopPropagation();\n        }}\n        onPointerDown={(event) => event.stopPropagation()}\n        onMouseDown={(event) => event.stopPropagation()}\n      />\n    </label>\n  );\n}\n\n/** Props for the {@link DropdownMenuRadioGroup} component. */\nexport interface DropdownMenuRadioGroupProps\n  extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioGroup> {}\n\n/**\n * Groups {@link DropdownMenuRadioItem} children so they behave as a\n * single-select set. Controlled via `value`/`onValueChange`.\n *\n * @example\n * ```tsx\n * <DropdownMenuRadioGroup value={sort} onValueChange={setSort}>\n *   <DropdownMenuRadioItem value=\"newest\">Newest first</DropdownMenuRadioItem>\n *   <DropdownMenuRadioItem value=\"oldest\">Oldest first</DropdownMenuRadioItem>\n * </DropdownMenuRadioGroup>\n * ```\n */\nexport const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;\n\n/** Height preset for a {@link DropdownMenuRadioItem}. */\nexport type DropdownMenuRadioItemSize = \"40\";\n\nexport interface DropdownMenuRadioItemProps\n  extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem> {\n  /** Optional secondary text shown below the title. */\n  helper?: string;\n  /** Height of the item row. @default \"40\" */\n  size?: DropdownMenuRadioItemSize;\n}\n\n/**\n * A single radio-style choice within a {@link DropdownMenuRadioGroup}. Shows\n * a circular indicator that fills when selected, plus an optional helper line\n * underneath the title.\n */\nexport const DropdownMenuRadioItem = React.forwardRef<\n  React.ComponentRef<typeof DropdownMenuPrimitive.RadioItem>,\n  DropdownMenuRadioItemProps\n>(({ className, children, helper, size: _size = \"40\", ...props }, ref) => {\n  return (\n    <DropdownMenuPrimitive.RadioItem\n      ref={ref}\n      className={cn(\n        \"group flex w-full cursor-pointer items-start gap-3 rounded-xs px-4 py-2 outline-none\",\n        \"data-[highlighted]:bg-neutral-alphas-50\",\n        \"data-[disabled]:cursor-not-allowed data-[disabled]:text-content-disabled\",\n        \"data-[state=checked]:bg-buttons-primary-default data-[state=checked]:text-content-primary-inverted\",\n        \"data-[state=checked]:data-[highlighted]:bg-buttons-primary-default\",\n        className,\n      )}\n      {...props}\n    >\n      <span\n        className={cn(\n          \"mt-1 flex size-4 shrink-0 items-center justify-center rounded-full border border-icons-primary\",\n          \"group-data-[disabled]:border-content-disabled\",\n          \"group-data-[state=checked]:border-icons-primary-inverted\",\n        )}\n        aria-hidden=\"true\"\n      >\n        <DropdownMenuPrimitive.ItemIndicator asChild>\n          <span className=\"size-2 rounded-full bg-content-primary-inverted\" />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      <span className=\"flex min-w-0 flex-1 flex-col gap-1\">\n        <span className=\"typography-body-default-16px-semibold truncate\">{children}</span>\n        {helper && (\n          <span\n            className={cn(\n              \"typography-description-12px-regular text-content-secondary\",\n              \"group-data-[state=checked]:text-content-primary-inverted\",\n              \"group-data-[disabled]:text-content-disabled\",\n            )}\n          >\n            {helper}\n          </span>\n        )}\n      </span>\n    </DropdownMenuPrimitive.RadioItem>\n  );\n});\nDropdownMenuRadioItem.displayName = \"DropdownMenuRadioItem\";\n"],"names":["React","useControllableState","jsx","DropdownMenuPrimitive","FLOATING_CONTENT_COLLISION_PADDING","cn","jsxs","IconButton","CloseIcon","SearchIcon"],"mappings":"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"}
+{"version":3,"file":"DropdownMenu.cjs","sources":["../../../../src/components/DropdownMenu/DropdownMenu.tsx"],"sourcesContent":["import * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { useControllableState } from \"@radix-ui/react-use-controllable-state\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { FLOATING_CONTENT_COLLISION_PADDING } from \"../../utils/floatingContentCollisionPadding\";\nimport { Drawer, DrawerContent, DrawerTrigger } from \"../Drawer/Drawer\";\nimport { IconButton } from \"../IconButton/IconButton\";\nimport { CheckIcon } from \"../Icons/CheckIcon\";\nimport { CloseIcon } from \"../Icons/CloseIcon\";\nimport { SearchIcon } from \"../Icons/SearchIcon\";\n\n// Movement, in CSS px, above which a touch press-and-release counts as a drag.\nconst TAP_MOVEMENT_THRESHOLD_PX = 10;\n\n// Keys that the menu must keep handling even when focus is inside a child\n// input — arrows move the highlight into the list, Tab leaves the menu, and\n// Enter / Escape close it.\nconst NAVIGATION_KEYS = new Set([\n  \"ArrowDown\",\n  \"ArrowUp\",\n  \"ArrowLeft\",\n  \"ArrowRight\",\n  \"Escape\",\n  \"Tab\",\n  \"Enter\",\n]);\n\ntype ActiveTap = {\n  pointerId: number;\n  x: number;\n  y: number;\n  movedPastThreshold: boolean;\n};\n\n// Lets DropdownMenuTrigger toggle the menu directly so it can gate on touch\n// movement — see radix-ui/primitives#1912.\nconst ToggleOpenContext = React.createContext<\n  ((updater: (prev: boolean) => boolean) => void) | null\n>(null);\n\n/**\n * How a {@link DropdownMenu} presents its content.\n * - `\"menu\"` (default) — a Radix-positioned panel anchored to the trigger.\n * - `\"sheet\"` — a bottom drawer (via {@link Drawer}), for mobile/touch viewports.\n *\n * The viewport decision belongs to the consumer (it owns the breakpoint\n * source of truth), so pass e.g. `variant={isDesktop ? \"menu\" : \"sheet\"}`.\n */\nexport type DropdownMenuVariant = \"menu\" | \"sheet\";\n\nconst DropdownMenuVariantContext = React.createContext<DropdownMenuVariant>(\"menu\");\n\n/** Props for the {@link DropdownMenu} root component. */\nexport interface DropdownMenuProps\n  extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Root> {\n  /** How the menu presents its content. @default \"menu\" */\n  variant?: DropdownMenuVariant;\n}\n\n/** Root component that manages open/close state for a dropdown menu. */\nexport function DropdownMenu({\n  open: openProp,\n  defaultOpen,\n  onOpenChange,\n  variant = \"menu\",\n  children,\n  ...props\n}: DropdownMenuProps) {\n  const [open = false, setOpen] = useControllableState({\n    prop: openProp,\n    defaultProp: defaultOpen ?? false,\n    onChange: onOpenChange,\n  });\n\n  if (variant === \"sheet\") {\n    return (\n      <DropdownMenuVariantContext.Provider value=\"sheet\">\n        <ToggleOpenContext.Provider value={setOpen}>\n          <Drawer open={open} onOpenChange={setOpen}>\n            {children}\n          </Drawer>\n        </ToggleOpenContext.Provider>\n      </DropdownMenuVariantContext.Provider>\n    );\n  }\n\n  return (\n    <DropdownMenuVariantContext.Provider value=\"menu\">\n      <ToggleOpenContext.Provider value={setOpen}>\n        <DropdownMenuPrimitive.Root open={open} onOpenChange={setOpen} {...props}>\n          {children}\n        </DropdownMenuPrimitive.Root>\n      </ToggleOpenContext.Provider>\n    </DropdownMenuVariantContext.Provider>\n  );\n}\n\n/** Props for the {@link DropdownMenuTrigger} component. */\nexport type DropdownMenuTriggerProps = React.ComponentPropsWithoutRef<\n  typeof DropdownMenuPrimitive.Trigger\n>;\n\n/**\n * The element that toggles the dropdown menu when clicked.\n *\n * On touch devices, the menu only opens if the press-and-release stays within\n * a small movement threshold. A drag that incidentally ends over the trigger\n * (common when scrolling a feed on Android Chrome) is ignored. Mouse and\n * keyboard interactions are unchanged.\n */\nexport const DropdownMenuTrigger = React.forwardRef<\n  React.ComponentRef<typeof DropdownMenuPrimitive.Trigger>,\n  DropdownMenuTriggerProps\n>((props, ref) => {\n  const variant = React.useContext(DropdownMenuVariantContext);\n  const toggleOpen = React.useContext(ToggleOpenContext);\n  const tapRef = React.useRef<ActiveTap | null>(null);\n\n  // The sheet variant opens a Drawer (Dialog), which already suppresses\n  // scroll-drag-end synthetic clicks itself — no need for the touch-tap gating below.\n  if (variant === \"sheet\") {\n    return <DrawerTrigger {...props} ref={ref} />;\n  }\n\n  // Used outside our DropdownMenu wrapper — fall through to Radix defaults.\n  if (toggleOpen === null) {\n    return <DropdownMenuPrimitive.Trigger {...props} ref={ref} />;\n  }\n\n  return (\n    <DropdownMenuPrimitive.Trigger\n      {...props}\n      ref={ref}\n      onPointerDown={(event) => {\n        props.onPointerDown?.(event);\n        if (event.pointerType === \"mouse\" || props.disabled) return;\n        // Keep pointerup / pointercancel on this element if the finger drifts off.\n        // Optional because jsdom (used in tests) doesn't implement it.\n        event.currentTarget.setPointerCapture?.(event.pointerId);\n        tapRef.current = {\n          pointerId: event.pointerId,\n          x: event.clientX,\n          y: event.clientY,\n          movedPastThreshold: false,\n        };\n        // preventDefault stops Radix's pointerdown open path via composeEventHandlers.\n        event.preventDefault();\n      }}\n      onPointerMove={(event) => {\n        props.onPointerMove?.(event);\n        const tap = tapRef.current;\n        if (tap === null || event.pointerId !== tap.pointerId || tap.movedPastThreshold) {\n          return;\n        }\n        const dx = event.clientX - tap.x;\n        const dy = event.clientY - tap.y;\n        if (Math.hypot(dx, dy) > TAP_MOVEMENT_THRESHOLD_PX) {\n          tap.movedPastThreshold = true;\n        }\n      }}\n      onPointerUp={(event) => {\n        props.onPointerUp?.(event);\n        const tap = tapRef.current;\n        if (tap === null || event.pointerId !== tap.pointerId) return;\n        const wasDrag = tap.movedPastThreshold;\n        tapRef.current = null;\n        if (!wasDrag && !props.disabled) {\n          toggleOpen((prev) => !prev);\n        }\n      }}\n      onPointerCancel={(event) => {\n        props.onPointerCancel?.(event);\n        const tap = tapRef.current;\n        if (tap !== null && event.pointerId === tap.pointerId) {\n          tapRef.current = null;\n        }\n      }}\n    />\n  );\n});\nDropdownMenuTrigger.displayName = \"DropdownMenuTrigger\";\n\n/** Props for the {@link DropdownMenuContent} component. */\nexport interface DropdownMenuContentProps\n  extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> {}\n\n/**\n * The positioned content panel rendered inside a portal.\n *\n * Override the portal z-index per-instance via `style={{ zIndex: 1500 }}` or\n * globally with the `--fanvue-ui-portal-z-index` CSS custom property.\n *\n * @example\n * ```tsx\n * <DropdownMenu>\n *   <DropdownMenuTrigger asChild>\n *     <Button>Open</Button>\n *   </DropdownMenuTrigger>\n *   <DropdownMenuContent>\n *     <DropdownMenuItem>Option 1</DropdownMenuItem>\n *     <DropdownMenuItem>Option 2</DropdownMenuItem>\n *   </DropdownMenuContent>\n * </DropdownMenu>\n * ```\n */\nexport const DropdownMenuContent = React.forwardRef<\n  React.ComponentRef<typeof DropdownMenuPrimitive.Content>,\n  DropdownMenuContentProps\n>(\n  (\n    {\n      className,\n      style,\n      sideOffset = 4,\n      // Radix defaults `avoidCollisions` to true, so passing `collisionPadding`\n      // is enough to keep the menu flipping/shifting to stay on screen — no\n      // hand-rolled reposition logic needed.\n      collisionPadding = FLOATING_CONTENT_COLLISION_PADDING,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const variant = React.useContext(DropdownMenuVariantContext);\n\n    if (variant === \"sheet\") {\n      return (\n        <DrawerContent\n          ref={ref}\n          position=\"bottom\"\n          variant=\"sheet\"\n          className={cn(\"flex flex-col gap-1 p-1\", className)}\n          style={style}\n          {...props}\n        >\n          {children}\n        </DrawerContent>\n      );\n    }\n\n    return (\n      <DropdownMenuPrimitive.Portal>\n        <DropdownMenuPrimitive.Content\n          ref={ref}\n          sideOffset={sideOffset}\n          collisionPadding={collisionPadding}\n          className={cn(\n            \"w-max min-w-(--radix-dropdown-menu-trigger-width) max-w-(--radix-dropdown-menu-content-available-width) overflow-y-auto rounded-sm border border-neutral-alphas-200 bg-surface-primary p-1 text-content-primary shadow-lg\",\n            \"data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95\",\n            \"data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95\",\n            \"data-[side=top]:slide-in-from-bottom-2 data-[side=bottom]:slide-in-from-top-2\",\n            \"data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2\",\n            className,\n          )}\n          style={{\n            zIndex: \"var(--fanvue-ui-portal-z-index, 50)\",\n            maxHeight: \"var(--radix-dropdown-menu-content-available-height)\",\n            ...style,\n          }}\n          {...props}\n        >\n          {children}\n        </DropdownMenuPrimitive.Content>\n      </DropdownMenuPrimitive.Portal>\n    );\n  },\n);\nDropdownMenuContent.displayName = \"DropdownMenuContent\";\n\n/** Props for the {@link DropdownMenuGroup} component. */\nexport type DropdownMenuGroupProps = React.ComponentPropsWithoutRef<\n  typeof DropdownMenuPrimitive.Group\n>;\n\n/**\n * Groups related menu items. Accepts an optional `DropdownMenuLabel`.\n *\n * Requires Radix menu context — not supported inside a `variant=\"sheet\"` menu.\n */\nexport const DropdownMenuGroup = DropdownMenuPrimitive.Group;\nDropdownMenuGroup.displayName = \"DropdownMenuGroup\";\n\n/** Vertical placement of a {@link DropdownMenuLabel} within its group. */\nexport type DropdownMenuLabelPosition = \"default\" | \"top\";\n\n/** Props for the {@link DropdownMenuLabel} component. */\nexport interface DropdownMenuLabelProps\n  extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> {\n  /**\n   * Vertical placement within the surrounding group. `\"top\"` is used for the\n   * first label directly under a header; `\"default\"` adds extra top padding to\n   * separate it from preceding items. @default \"default\"\n   */\n  position?: DropdownMenuLabelPosition;\n}\n\n/** A non-interactive label that groups related items within a menu. */\nexport const DropdownMenuLabel = React.forwardRef<\n  React.ComponentRef<typeof DropdownMenuPrimitive.Label>,\n  DropdownMenuLabelProps\n>(({ className, position = \"default\", ...props }, ref) => {\n  const variant = React.useContext(DropdownMenuVariantContext);\n  const labelClassName = cn(\n    \"typography-description-12px-regular flex items-center px-3 text-content-secondary\",\n    position === \"top\" ? \"py-2\" : \"pb-2 pt-4\",\n    className,\n  );\n\n  // DropdownMenuPrimitive.Label requires Radix menu context, unavailable when\n  // the sheet variant renders inside a Drawer (Dialog) instead.\n  if (variant === \"sheet\") {\n    return <div ref={ref} className={labelClassName} {...props} />;\n  }\n\n  return <DropdownMenuPrimitive.Label ref={ref} className={labelClassName} {...props} />;\n});\nDropdownMenuLabel.displayName = \"DropdownMenuLabel\";\n\n/**\n * Height preset for a dropdown menu item.\n *\n * `\"40\"` (default) and `\"32\"` are the v2 numeric tokens that mirror the Figma\n * design system. `\"sm\"` and `\"md\"` are deprecated aliases retained for\n * backwards compatibility — `\"sm\"` maps to `\"32\"`, `\"md\"` maps to `\"40\"`.\n */\nexport type DropdownMenuItemSize =\n  | \"40\"\n  | \"32\"\n  /** @deprecated Use `\"32\"` instead. */\n  | \"sm\"\n  /** @deprecated Use `\"40\"` instead. */\n  | \"md\";\n\nconst SIZE_NORMALIZED: Record<DropdownMenuItemSize, \"40\" | \"32\"> = {\n  \"40\": \"40\",\n  md: \"40\",\n  \"32\": \"32\",\n  sm: \"32\",\n};\n\nconst ITEM_SIZE_CLASSES: Record<\"40\" | \"32\", string> = {\n  \"40\": \"min-h-10 py-2 typography-body-default-16px-regular\",\n  \"32\": \"min-h-8 py-[7px] typography-body-small-14px-regular\",\n};\n\nconst ITEM_COUNT_TYPOGRAPHY: Record<\"40\" | \"32\", string> = {\n  \"40\": \"typography-body-default-16px-regular\",\n  \"32\": \"typography-body-small-14px-regular\",\n};\n\n// Background alone can't reliably tell \"selected\" apart from a\n// hovered-but-unselected row across every theme/contrast combination (see the\n// neutral-alphas fix on itemClassName below) — pair it with an explicit\n// indicator, matching SelectItem's check indicator for the same V2 Menu Item\n// spec.\nfunction SelectedCheckIndicator({ hasDescription }: { hasDescription: boolean }) {\n  return (\n    <CheckIcon\n      className={cn(\"size-4 shrink-0 text-content-primary\", hasDescription && \"self-start\")}\n    />\n  );\n}\n\nexport interface DropdownMenuItemProps\n  extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> {\n  /** Height of the menu item row. @default \"40\" */\n  size?: DropdownMenuItemSize;\n  /** Applies the destructive (error) treatment. Use for irreversible actions. @default false */\n  destructive?: boolean;\n  /** Icon (or other node) rendered before the label. Ignored when {@link DropdownMenuItemProps.avatar} is set. */\n  leadingIcon?: React.ReactNode;\n  /**\n   * Leading avatar rendered in place of {@link DropdownMenuItemProps.leadingIcon},\n   * for rows that represent a person or account. Pass an `Avatar` sized to `24`.\n   * Takes precedence over `leadingIcon`.\n   */\n  avatar?: React.ReactNode;\n  /**\n   * Icon (or other node) rendered after the label. When\n   * {@link DropdownMenuItemProps.selected} is true and no `trailingIcon` is\n   * given, the built-in selected check indicator renders in this slot\n   * instead — pass a `trailingIcon` to use a custom selected indicator (e.g.\n   * a themed tick) rather than the default one.\n   */\n  trailingIcon?: React.ReactNode;\n  /** Trailing count or number (e.g. an unread total) rendered before {@link DropdownMenuItemProps.trailingIcon}. */\n  count?: React.ReactNode;\n  /**\n   * Optional secondary text rendered on a second line below the label. When\n   * provided, the row switches to a two-line layout and the leading/trailing\n   * icons align to the title line (top) rather than the row's vertical centre.\n   */\n  description?: React.ReactNode;\n  /** Marks the item as the current selection in a single-select menu. @default false */\n  selected?: boolean;\n}\n\n/**\n * An individual item within a {@link DropdownMenuContent}.\n *\n * @example\n * ```tsx\n * <DropdownMenuItem>Edit profile</DropdownMenuItem>\n * <DropdownMenuItem destructive>Delete</DropdownMenuItem>\n * <DropdownMenuItem leadingIcon={<EditIcon />}>Edit</DropdownMenuItem>\n *\n * // Feature-rich row with an avatar and a trailing count\n * <DropdownMenuItem avatar={<Avatar size={24} src={src} />} count=\"12\">\n *   Jane Doe\n * </DropdownMenuItem>\n *\n * // As a link\n * <DropdownMenuItem asChild>\n *   <a href=\"/settings\">Settings</a>\n * </DropdownMenuItem>\n * ```\n */\nexport const DropdownMenuItem = React.forwardRef<\n  React.ComponentRef<typeof DropdownMenuPrimitive.Item>,\n  DropdownMenuItemProps\n>(\n  (\n    {\n      size = \"40\",\n      destructive,\n      leadingIcon,\n      avatar,\n      trailingIcon,\n      count,\n      description,\n      selected,\n      className,\n      children,\n      asChild,\n      onSelect,\n      disabled,\n      ...props\n    },\n    ref,\n  ) => {\n    const variant = React.useContext(DropdownMenuVariantContext);\n    const toggleOpen = React.useContext(ToggleOpenContext);\n    const normalizedSize = SIZE_NORMALIZED[size];\n    const hasDescription = description != null;\n    const hasAvatar = avatar != null;\n    const itemClassName = cn(\n      \"group flex w-full cursor-pointer gap-2 rounded-xs px-3 outline-none\",\n      hasDescription ? \"items-start\" : \"items-center\",\n      ITEM_SIZE_CLASSES[normalizedSize],\n      // A 24px avatar would push the compact 32px row past its height with the\n      // default padding; tighten it so the avatar variant keeps the 32px contract.\n      hasAvatar && !hasDescription && normalizedSize === \"32\" && \"py-1\",\n      \"data-[highlighted]:bg-neutral-alphas-50\",\n      \"data-[disabled]:cursor-not-allowed data-[disabled]:text-content-disabled\",\n      \"disabled:cursor-not-allowed disabled:text-content-disabled\",\n      // Sheet-variant asChild items are marked disabled via aria-disabled\n      // (see below), not the native disabled attribute or Radix's\n      // data-disabled — neither selector above matches them.\n      \"aria-disabled:cursor-not-allowed aria-disabled:text-content-disabled\",\n      destructive && \"text-error-content\",\n      // bg-interaction-hover aliases to the same token as the plain hover\n      // background above, so a selected row would be indistinguishable from a\n      // hovered-but-unselected one. Use the next step up the neutral-alphas\n      // ramp instead (still a subtle overlay, not the heavy filled style).\n      selected && [\"bg-neutral-alphas-100\", \"data-[highlighted]:bg-neutral-alphas-200\"],\n      className,\n    );\n\n    // In the two-line (description) layout, icons sit on the title's line.\n    // 24px title line-height vs 16px icon → 4px (pt-1) centres the icon on it.\n    const iconAlignClassName = hasDescription ? \"flex shrink-0 items-center pt-1\" : null;\n\n    const countNode = count != null && (\n      <span\n        className={cn(\n          \"shrink-0 tabular-nums\",\n          ITEM_COUNT_TYPOGRAPHY[normalizedSize],\n          destructive ? \"text-error-content\" : \"text-content-tertiary\",\n          \"group-data-[disabled]:text-content-disabled\",\n        )}\n      >\n        {count}\n      </span>\n    );\n\n    // A caller-supplied trailingIcon always wins the trailing slot — some\n    // consumers pass their own selected indicator (e.g. a themed tick) and\n    // rely on it being shown as-is rather than replaced. Only fall back to\n    // the built-in check indicator when selected and no trailingIcon is given.\n    const trailingNode =\n      trailingIcon != null ? (\n        hasDescription ? (\n          <span className={iconAlignClassName!}>{trailingIcon}</span>\n        ) : (\n          trailingIcon\n        )\n      ) : (\n        selected && <SelectedCheckIndicator hasDescription={hasDescription} />\n      );\n\n    const itemChildren = (\n      <>\n        {avatar != null ? (\n          <span className=\"shrink-0\">{avatar}</span>\n        ) : (\n          leadingIcon != null &&\n          (hasDescription ? (\n            <span className={iconAlignClassName!}>{leadingIcon}</span>\n          ) : (\n            leadingIcon\n          ))\n        )}\n        {hasDescription ? (\n          <span className=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n            <span className=\"truncate\">{children}</span>\n            <span className=\"typography-body-small-14px-regular truncate text-content-secondary\">\n              {description}\n            </span>\n          </span>\n        ) : (\n          <span className=\"min-w-0 flex-1 truncate\">{children}</span>\n        )}\n        {countNode}\n        {trailingNode}\n      </>\n    );\n\n    // The sheet variant renders inside a Drawer (Dialog), not a Radix menu, so\n    // DropdownMenuPrimitive.Item (which requires menu context) can't be used —\n    // render a plain option element with equivalent selection semantics instead.\n    // asChild goes through the same Slot primitive Radix's own Item uses\n    // internally, so a custom element (e.g. a link) gets the option\n    // role/handlers merged onto it without needing menu context.\n    if (variant === \"sheet\") {\n      const Comp = asChild ? Slot : \"button\";\n      // Pull the consumer's onClick out of the passthrough spread so the\n      // handler below can compose with it instead of the spread order\n      // silently overwriting it (an explicit onClick after {...props} always\n      // wins over the spread's).\n      const { onClick: consumerOnClick, ...restProps } =\n        props as React.ComponentPropsWithoutRef<\"button\">;\n      const sheetSpecificProps = !asChild\n        ? { type: \"button\" as const, disabled }\n        : disabled\n          ? { \"aria-disabled\": true }\n          : {};\n      return (\n        <Comp\n          ref={ref as React.Ref<HTMLButtonElement>}\n          {...restProps}\n          {...sheetSpecificProps}\n          role=\"option\"\n          aria-selected={selected}\n          className={itemClassName}\n          onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n            // A native <button disabled> already blocks its click event, but\n            // asChild's element (e.g. a link) has no such enforcement — guard\n            // explicitly, and prevent the click's default action (e.g. anchor\n            // navigation) since aria-disabled alone doesn't stop it.\n            if (disabled) {\n              event.preventDefault();\n              return;\n            }\n            consumerOnClick?.(event);\n            if (event.defaultPrevented) return;\n            // Pass the real native event through, not a fake partial shape —\n            // handlers that call any Event API beyond preventDefault (e.g.\n            // stopPropagation, composedPath) need it to actually exist. It's\n            // still live (currentTarget/target are valid) since we're inside\n            // the same synchronous click handler that produced it.\n            onSelect?.(event.nativeEvent);\n            if (!event.nativeEvent.defaultPrevented) toggleOpen?.(() => false);\n          }}\n        >\n          {asChild ? children : itemChildren}\n        </Comp>\n      );\n    }\n\n    if (asChild) {\n      return (\n        <DropdownMenuPrimitive.Item\n          ref={ref}\n          asChild\n          className={itemClassName}\n          disabled={disabled}\n          onSelect={onSelect}\n          {...props}\n        >\n          {children}\n        </DropdownMenuPrimitive.Item>\n      );\n    }\n\n    return (\n      <DropdownMenuPrimitive.Item\n        ref={ref}\n        className={itemClassName}\n        disabled={disabled}\n        onSelect={onSelect}\n        {...props}\n      >\n        {itemChildren}\n      </DropdownMenuPrimitive.Item>\n    );\n  },\n);\nDropdownMenuItem.displayName = \"DropdownMenuItem\";\n\n/** Props for the {@link DropdownMenuSeparator} component. */\nexport interface DropdownMenuSeparatorProps\n  extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator> {}\n\n/** Visual separator between groups of items. */\nexport const DropdownMenuSeparator = React.forwardRef<\n  React.ComponentRef<typeof DropdownMenuPrimitive.Separator>,\n  DropdownMenuSeparatorProps\n>(({ className, ...props }, ref) => {\n  const variant = React.useContext(DropdownMenuVariantContext);\n  const separatorClassName = cn(\"my-1 h-px bg-neutral-alphas-200\", className);\n\n  // DropdownMenuPrimitive.Separator requires Radix menu context, unavailable\n  // when the sheet variant renders inside a Drawer (Dialog) instead. <hr> is a\n  // native separator, so it needs no ARIA role.\n  if (variant === \"sheet\") {\n    return <hr ref={ref as React.Ref<HTMLHRElement>} className={separatorClassName} {...props} />;\n  }\n\n  return <DropdownMenuPrimitive.Separator ref={ref} className={separatorClassName} {...props} />;\n});\nDropdownMenuSeparator.displayName = \"DropdownMenuSeparator\";\n\n/** Header type. `\"default\"` shows a title; `\"search\"` shows a search input. */\nexport type DropdownMenuHeaderType = \"default\" | \"search\";\n\n/** Header height preset. Matches the menu item sizing scale. */\nexport type DropdownMenuHeaderSize = \"40\" | \"32\";\n\n/** Search-input configuration for {@link DropdownMenuHeader} when `type=\"search\"`. */\nexport interface DropdownMenuHeaderSearchProps {\n  /** Controlled value of the search input. */\n  value?: string;\n  /** Uncontrolled default value. */\n  defaultValue?: string;\n  /** Fires when the input value changes. */\n  onChange?: (value: string) => void;\n  /** Placeholder text shown when the input is empty. @default \"Search…\" */\n  placeholder?: string;\n  /** Accessible label for the search input. @default \"Search\" */\n  \"aria-label\"?: string;\n}\n\nexport interface DropdownMenuHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Visual type. `\"default\"` shows a title; `\"search\"` shows a search input. @default \"default\" */\n  type?: DropdownMenuHeaderType;\n  /** Height preset for the header row. @default \"40\" */\n  size?: DropdownMenuHeaderSize;\n  /** Title text shown when `type=\"default\"`. Ignored if `children` is provided. */\n  title?: string;\n  /** Configuration for the embedded search input when `type=\"search\"`. */\n  searchProps?: DropdownMenuHeaderSearchProps;\n  /** Whether to render the close icon button on the right. @default true */\n  showClose?: boolean;\n  /** Fires when the close icon button is activated. */\n  onClose?: () => void;\n  /** Accessible label for the close button. @default \"Close menu\" */\n  closeLabel?: string;\n}\n\n/**\n * Optional header rendered at the top of a {@link DropdownMenuContent}. Use\n * `type=\"default\"` to title the menu, or `type=\"search\"` to embed a search\n * input for filtering long lists.\n *\n * Renders an inset separator beneath the row so it slots cleanly above the\n * first group of items.\n *\n * @example\n * ```tsx\n * <DropdownMenuContent>\n *   <DropdownMenuHeader title=\"Sort by\" onClose={() => setOpen(false)} />\n *   <DropdownMenuItem>Newest</DropdownMenuItem>\n *   <DropdownMenuItem>Oldest</DropdownMenuItem>\n * </DropdownMenuContent>\n * ```\n */\nexport const DropdownMenuHeader = React.forwardRef<HTMLDivElement, DropdownMenuHeaderProps>(\n  (\n    {\n      type = \"default\",\n      size = \"40\",\n      title,\n      searchProps,\n      showClose = true,\n      onClose,\n      closeLabel = \"Close menu\",\n      className,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const titleTypography =\n      size === \"32\"\n        ? \"typography-body-small-14px-semibold\"\n        : \"typography-body-default-16px-semibold\";\n    const toggleOpen = React.useContext(ToggleOpenContext);\n\n    const handleClose = () => {\n      onClose?.();\n      // Also dismiss the Radix menu when used in uncontrolled mode — otherwise\n      // the close button would look broken to consumers that don't wire up\n      // `open` / `onOpenChange` themselves.\n      toggleOpen?.(() => false);\n    };\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"flex flex-col px-1 pt-1 mb-1\",\n          // Search needs an 8px gap between the input and the divider; the\n          // default (title) variant uses 4px because the title baseline sits\n          // closer to the divider naturally.\n          type === \"search\" ? \"gap-2\" : \"gap-1\",\n          className,\n        )}\n        {...props}\n      >\n        <div className=\"flex items-center gap-4 pl-2\">\n          {type === \"default\" ? (\n            <div className={cn(\"min-w-0 flex-1 truncate text-content-primary\", titleTypography)}>\n              {children ?? title}\n            </div>\n          ) : (\n            <SearchInput {...searchProps} />\n          )}\n          {showClose && (\n            <IconButton\n              variant=\"tertiary\"\n              size=\"32\"\n              icon={<CloseIcon />}\n              onClick={handleClose}\n              aria-label={closeLabel}\n            />\n          )}\n        </div>\n        <DropdownMenuSeparator className=\"my-0\" />\n      </div>\n    );\n  },\n);\nDropdownMenuHeader.displayName = \"DropdownMenuHeader\";\n\nfunction SearchInput({\n  value,\n  defaultValue,\n  onChange,\n  placeholder = \"Search\\u2026\",\n  \"aria-label\": ariaLabel = \"Search\",\n}: DropdownMenuHeaderSearchProps = {}) {\n  return (\n    <label\n      className={cn(\n        \"flex min-w-0 flex-1 items-center gap-2 rounded-xs border border-border-primary\",\n        \"bg-neutral-alphas-50 px-3 py-1 text-content-primary\",\n        \"focus-within:shadow-focus-ring focus-within:outline-none\",\n      )}\n    >\n      <SearchIcon className=\"size-4 shrink-0 text-content-tertiary\" aria-hidden=\"true\" />\n      <input\n        type=\"search\"\n        className={cn(\n          \"typography-body-default-16px-regular min-w-0 flex-1 bg-transparent outline-none\",\n          \"placeholder:text-content-tertiary\",\n        )}\n        value={value}\n        defaultValue={defaultValue}\n        placeholder={placeholder}\n        aria-label={ariaLabel}\n        onChange={(event) => onChange?.(event.target.value)}\n        // Radix DropdownMenu listens for keystrokes on Content for its\n        // typeahead (typing letters jumps focus to a matching item). That\n        // listener steals focus from the input after the first letter, so we\n        // stop character keys from bubbling. Navigation keys (arrows / Tab /\n        // Escape / Enter) are still allowed through so the user can leave the\n        // input for the list or close the menu. Pointer events are stopped so\n        // clicking back into the input doesn't fight the menu's focus\n        // management either.\n        onKeyDown={(event) => {\n          if (!NAVIGATION_KEYS.has(event.key)) event.stopPropagation();\n        }}\n        onPointerDown={(event) => event.stopPropagation()}\n        onMouseDown={(event) => event.stopPropagation()}\n      />\n    </label>\n  );\n}\n\n/** Props for the {@link DropdownMenuRadioGroup} component. */\nexport interface DropdownMenuRadioGroupProps\n  extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioGroup> {}\n\n/**\n * Groups {@link DropdownMenuRadioItem} children so they behave as a\n * single-select set. Controlled via `value`/`onValueChange`.\n *\n * @example\n * ```tsx\n * <DropdownMenuRadioGroup value={sort} onValueChange={setSort}>\n *   <DropdownMenuRadioItem value=\"newest\">Newest first</DropdownMenuRadioItem>\n *   <DropdownMenuRadioItem value=\"oldest\">Oldest first</DropdownMenuRadioItem>\n * </DropdownMenuRadioGroup>\n * ```\n *\n * Requires Radix menu context — not supported inside a `variant=\"sheet\"` menu.\n */\nexport const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;\n\n/** Height preset for a {@link DropdownMenuRadioItem}. */\nexport type DropdownMenuRadioItemSize = \"40\";\n\nexport interface DropdownMenuRadioItemProps\n  extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem> {\n  /** Optional secondary text shown below the title. */\n  helper?: string;\n  /** Height of the item row. @default \"40\" */\n  size?: DropdownMenuRadioItemSize;\n}\n\n/**\n * A single radio-style choice within a {@link DropdownMenuRadioGroup}. Shows\n * a circular indicator that fills when selected, plus an optional helper line\n * underneath the title.\n */\nexport const DropdownMenuRadioItem = React.forwardRef<\n  React.ComponentRef<typeof DropdownMenuPrimitive.RadioItem>,\n  DropdownMenuRadioItemProps\n>(({ className, children, helper, size: _size = \"40\", ...props }, ref) => {\n  return (\n    <DropdownMenuPrimitive.RadioItem\n      ref={ref}\n      className={cn(\n        \"group flex w-full cursor-pointer items-start gap-3 rounded-xs px-4 py-2 outline-none\",\n        \"data-[highlighted]:bg-neutral-alphas-50\",\n        \"data-[disabled]:cursor-not-allowed data-[disabled]:text-content-disabled\",\n        // See DropdownMenuItem above: bg-interaction-hover aliases to the same\n        // token as the plain hover background, so it can't distinguish the\n        // checked state from an unchecked-but-hovered row.\n        \"data-[state=checked]:bg-neutral-alphas-100\",\n        \"data-[state=checked]:data-[highlighted]:bg-neutral-alphas-200\",\n        className,\n      )}\n      {...props}\n    >\n      <span\n        className={cn(\n          \"mt-1 flex size-4 shrink-0 items-center justify-center rounded-full border border-icons-primary\",\n          \"group-data-[disabled]:border-content-disabled\",\n        )}\n        aria-hidden=\"true\"\n      >\n        <DropdownMenuPrimitive.ItemIndicator asChild>\n          <span className=\"size-2 rounded-full bg-content-primary\" />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      <span className=\"flex min-w-0 flex-1 flex-col gap-1\">\n        <span className=\"typography-body-default-16px-semibold truncate\">{children}</span>\n        {helper && (\n          <span\n            className={cn(\n              \"typography-description-12px-regular text-content-secondary\",\n              \"group-data-[disabled]:text-content-disabled\",\n            )}\n          >\n            {helper}\n          </span>\n        )}\n      </span>\n    </DropdownMenuPrimitive.RadioItem>\n  );\n});\nDropdownMenuRadioItem.displayName = \"DropdownMenuRadioItem\";\n"],"names":["React","useControllableState","Drawer","jsx","DropdownMenuPrimitive","DrawerTrigger","FLOATING_CONTENT_COLLISION_PADDING","DrawerContent","cn","CheckIcon","jsxs","Fragment","Slot","IconButton","CloseIcon","SearchIcon"],"mappings":"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"}

package/dist/cjs/components/IconButton/IconButton.cjs

@@ -22,22 +22,11 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
-const iconButtonVariants = {
-  primary: "bg-buttons-primary-default text-content-primary-inverted hover:bg-buttons-primary-hover not-disabled:active:bg-buttons-primary-hover disabled:opacity-50 focus-visible:shadow-focus-ring",
-  secondary: "bg-neutral-alphas-50 text-icons-primary hover:bg-brand-primary-muted not-disabled:active:bg-brand-primary-muted disabled:opacity-50 focus-visible:shadow-focus-ring",
-  tertiary: "bg-transparent text-content-primary hover:bg-brand-primary-muted not-disabled:active:bg-brand-primary-muted disabled:opacity-50 focus-visible:shadow-focus-ring",
-  brand: "bg-content-always-black text-brand-primary-default hover:bg-brand-primary-default hover:text-content-always-black not-disabled:active:bg-brand-primary-default not-disabled:active:text-content-always-black disabled:opacity-50 focus-visible:shadow-focus-ring",
-  contrast: "bg-transparent text-content-always-white hover:bg-brand-primary-muted not-disabled:active:bg-brand-primary-muted disabled:opacity-50 focus-visible:shadow-focus-ring",
-  messaging: "bg-content-always-black text-brand-primary-default hover:bg-brand-primary-default hover:text-content-always-black not-disabled:active:bg-brand-primary-default not-disabled:active:text-content-always-black disabled:opacity-50 focus-visible:shadow-focus-ring",
-  navTray: "bg-transparent text-content-primary hover:bg-brand-primary-muted not-disabled:active:bg-brand-primary-muted disabled:opacity-50 focus-visible:shadow-focus-ring",
-  tertiaryDestructive: "bg-transparent text-error-content hover:bg-brand-primary-muted not-disabled:active:bg-brand-primary-muted disabled:opacity-50 focus-visible:shadow-focus-ring",
-  stop: "bg-buttons-primary-default text-content-primary-inverted hover:bg-buttons-brand-default hover:text-content-always-black not-disabled:active:bg-buttons-brand-default not-disabled:active:text-content-always-black disabled:opacity-50 focus-visible:shadow-focus-ring",
-  microphone: "bg-buttons-primary-default text-content-primary-inverted hover:bg-buttons-brand-default hover:text-content-always-black not-disabled:active:bg-buttons-brand-default not-disabled:active:text-content-always-black disabled:opacity-50 focus-visible:shadow-focus-ring"
-};
 const iconSizeVariants = {
   24: "[&>svg]:size-4",
   32: "[&>svg]:size-4",
-  40: "[&>svg]:size-6",
+  40: "[&>svg]:size-4",
+  48: "[&>svg]:size-6",
   52: "[&>svg]:size-7",
   72: "[&>svg]:size-8"
 };
@@ -45,6 +34,7 @@ const sizeVariants = {
   24: "size-6 p-1",
   32: "size-8 p-1.5",
   40: "size-10 p-[10px]",
+  48: "size-12 p-3",
   52: "size-[52px] p-2",
   72: "size-[72px] p-4"
 };
@@ -52,11 +42,113 @@ const countSizeMap = {
   24: "16",
   32: "24",
   40: "32",
+  48: "32",
   52: "32",
   72: "32"
 };
+const SIZE_DRIVEN_SHAPE_VARIANTS = /* @__PURE__ */ new Set([
+  "primary",
+  "secondary",
+  "tertiary",
+  "outline",
+  "error",
+  "white",
+  "black"
+]);
+const NEGATIVE_AWARE_VARIANTS = /* @__PURE__ */ new Set([
+  "primary",
+  "secondary",
+  "tertiary",
+  "outline"
+]);
+const DISABLED_FILL = "disabled:bg-buttons-disabled-default disabled:text-content-disabled";
+const DISABLED_FILL_NEGATIVE = "disabled:bg-buttons-disabled-negative disabled:text-content-disabled";
+const DISABLED_TRANSPARENT = "disabled:text-content-disabled";
+const DISABLED_OPACITY = "disabled:opacity-50";
+const VARIANT_CLASSES = {
+  primary: {
+    default: "bg-buttons-primary-default text-content-primary-inverted not-disabled:hover:bg-buttons-primary-hover not-disabled:active:bg-buttons-primary-hover",
+    disabled: DISABLED_FILL,
+    negative: "bg-buttons-primary-negative-default text-content-primary not-disabled:hover:bg-buttons-primary-negative-hover not-disabled:active:bg-buttons-primary-negative-hover",
+    negativeDisabled: DISABLED_FILL_NEGATIVE
+  },
+  secondary: {
+    default: "bg-buttons-secondary-default text-content-primary not-disabled:hover:bg-buttons-secondary-hover not-disabled:active:bg-buttons-secondary-hover",
+    disabled: DISABLED_FILL,
+    negative: "bg-buttons-secondary-negative-default text-content-primary-inverted not-disabled:hover:bg-buttons-secondary-negative-hover not-disabled:active:bg-buttons-secondary-negative-hover",
+    negativeDisabled: DISABLED_FILL_NEGATIVE
+  },
+  tertiary: {
+    default: "bg-transparent text-content-primary not-disabled:hover:bg-buttons-tertiary-hover not-disabled:active:bg-buttons-tertiary-hover",
+    disabled: DISABLED_TRANSPARENT,
+    negative: "bg-transparent text-content-primary-inverted not-disabled:hover:bg-buttons-tertiary-negative-hover not-disabled:active:bg-buttons-tertiary-negative-hover",
+    negativeDisabled: DISABLED_TRANSPARENT
+  },
+  outline: {
+    default: "border border-buttons-outline-default bg-transparent text-content-primary not-disabled:hover:bg-buttons-outline-hover not-disabled:active:bg-buttons-outline-hover",
+    disabled: "disabled:border-buttons-disabled-default disabled:text-content-disabled",
+    negative: "border border-buttons-outline-negative-default bg-transparent text-content-primary-inverted not-disabled:hover:bg-buttons-outline-negative-hover not-disabled:active:bg-buttons-outline-negative-hover",
+    negativeDisabled: "disabled:border-buttons-disabled-negative disabled:text-content-disabled"
+  },
+  error: {
+    default: "bg-buttons-error-default text-content-always-white not-disabled:hover:bg-buttons-error-hover not-disabled:active:bg-buttons-error-hover",
+    disabled: DISABLED_FILL
+  },
+  white: {
+    default: "bg-buttons-always-white-default text-content-always-black not-disabled:hover:bg-buttons-always-white-hover not-disabled:active:bg-buttons-always-white-hover",
+    disabled: DISABLED_FILL
+  },
+  black: {
+    default: "bg-buttons-always-black-default text-content-always-white not-disabled:hover:bg-buttons-always-black-hover not-disabled:active:bg-buttons-always-black-hover",
+    disabled: DISABLED_FILL
+  },
+  brand: {
+    default: "bg-content-always-black text-brand-primary-default hover:bg-brand-primary-default hover:text-content-always-black not-disabled:active:bg-brand-primary-default not-disabled:active:text-content-always-black",
+    disabled: DISABLED_OPACITY
+  },
+  contrast: {
+    default: "bg-transparent text-content-always-white hover:bg-brand-primary-muted not-disabled:active:bg-brand-primary-muted",
+    disabled: DISABLED_OPACITY
+  },
+  messaging: {
+    default: "bg-content-always-black text-brand-primary-default hover:bg-brand-primary-default hover:text-content-always-black not-disabled:active:bg-brand-primary-default not-disabled:active:text-content-always-black",
+    disabled: DISABLED_OPACITY
+  },
+  navTray: {
+    default: "bg-transparent text-content-primary hover:bg-brand-primary-muted not-disabled:active:bg-brand-primary-muted",
+    disabled: DISABLED_OPACITY
+  },
+  tertiaryDestructive: {
+    default: "bg-transparent text-error-content hover:bg-brand-primary-muted not-disabled:active:bg-brand-primary-muted",
+    disabled: DISABLED_OPACITY
+  },
+  stop: {
+    default: "bg-buttons-primary-default text-content-primary-inverted hover:bg-buttons-brand-default hover:text-content-always-black not-disabled:active:bg-buttons-brand-default not-disabled:active:text-content-always-black",
+    disabled: DISABLED_OPACITY
+  },
+  microphone: {
+    default: "bg-buttons-primary-default text-content-primary-inverted hover:bg-buttons-brand-default hover:text-content-always-black not-disabled:active:bg-buttons-brand-default not-disabled:active:text-content-always-black",
+    disabled: DISABLED_OPACITY
+  }
+};
+function getVariantClasses(variant, negative) {
+  const classes = VARIANT_CLASSES[variant];
+  const isNegative = NEGATIVE_AWARE_VARIANTS.has(variant) && negative;
+  const base = isNegative && classes.negative || classes.default;
+  const disabledClasses = isNegative && classes.negativeDisabled || classes.disabled;
+  return cn.cn(base, disabledClasses);
+}
 const IconButton = React__namespace.forwardRef(
-  ({ className, variant = "primary", size = "40", icon, counterValue, disabled = false, ...props }, ref) => {
+  ({
+    className,
+    variant = "primary",
+    size = "40",
+    icon,
+    counterValue,
+    negative = false,
+    disabled = false,
+    ...props
+  }, ref) => {
     if (process.env.NODE_ENV !== "production") {
       if (!props["aria-label"] && !props["aria-labelledby"] && !props.title) {
         console.warn(
@@ -72,14 +164,12 @@ const IconButton = React__namespace.forwardRef(
         "data-testid": "icon-button",
         disabled,
         className: cn.cn(
-          // Base styles
           "relative inline-flex shrink-0 items-center justify-center focus-visible:outline-none",
-          "cursor-pointer rounded-full transition-all duration-150 ease-in-out disabled:cursor-default",
-          // Size variants
+          "cursor-pointer transition-all duration-150 ease-in-out disabled:cursor-default",
+          "focus-visible:shadow-focus-ring",
+          SIZE_DRIVEN_SHAPE_VARIANTS.has(variant) && size === "24" ? "rounded-xs" : "rounded-full",
           sizeVariants[size],
-          // Variant styles
-          iconButtonVariants[variant],
-          // Manual CSS overrides
+          getVariantClasses(variant, negative),
           className
         ),
         ...props,

package/dist/cjs/components/IconButton/IconButton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.cjs","sources":["../../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Count, type CountSize } from \"../Count/Count\";\n\nconst iconButtonVariants = {\n  primary:\n    \"bg-buttons-primary-default text-content-primary-inverted hover:bg-buttons-primary-hover not-disabled:active:bg-buttons-primary-hover disabled:opacity-50 focus-visible:shadow-focus-ring\",\n  secondary:\n    \"bg-neutral-alphas-50 text-icons-primary hover:bg-brand-primary-muted not-disabled:active:bg-brand-primary-muted disabled:opacity-50 focus-visible:shadow-focus-ring\",\n  tertiary:\n    \"bg-transparent text-content-primary hover:bg-brand-primary-muted not-disabled:active:bg-brand-primary-muted disabled:opacity-50 focus-visible:shadow-focus-ring\",\n  brand:\n    \"bg-content-always-black text-brand-primary-default hover:bg-brand-primary-default hover:text-content-always-black not-disabled:active:bg-brand-primary-default not-disabled:active:text-content-always-black disabled:opacity-50 focus-visible:shadow-focus-ring\",\n  contrast:\n    \"bg-transparent text-content-always-white hover:bg-brand-primary-muted not-disabled:active:bg-brand-primary-muted disabled:opacity-50 focus-visible:shadow-focus-ring\",\n  messaging:\n    \"bg-content-always-black text-brand-primary-default hover:bg-brand-primary-default hover:text-content-always-black not-disabled:active:bg-brand-primary-default not-disabled:active:text-content-always-black disabled:opacity-50 focus-visible:shadow-focus-ring\",\n  navTray:\n    \"bg-transparent text-content-primary hover:bg-brand-primary-muted not-disabled:active:bg-brand-primary-muted disabled:opacity-50 focus-visible:shadow-focus-ring\",\n  tertiaryDestructive:\n    \"bg-transparent text-error-content hover:bg-brand-primary-muted not-disabled:active:bg-brand-primary-muted disabled:opacity-50 focus-visible:shadow-focus-ring\",\n  stop: \"bg-buttons-primary-default text-content-primary-inverted hover:bg-buttons-brand-default hover:text-content-always-black not-disabled:active:bg-buttons-brand-default not-disabled:active:text-content-always-black disabled:opacity-50 focus-visible:shadow-focus-ring\",\n  microphone:\n    \"bg-buttons-primary-default text-content-primary-inverted hover:bg-buttons-brand-default hover:text-content-always-black not-disabled:active:bg-buttons-brand-default not-disabled:active:text-content-always-black disabled:opacity-50 focus-visible:shadow-focus-ring\",\n};\n\nconst iconSizeVariants = {\n  24: \"[&>svg]:size-4\",\n  32: \"[&>svg]:size-4\",\n  40: \"[&>svg]:size-6\",\n  52: \"[&>svg]:size-7\",\n  72: \"[&>svg]:size-8\",\n} as const;\n\nconst sizeVariants = {\n  24: \"size-6 p-1\",\n  32: \"size-8 p-1.5\",\n  40: \"size-10 p-[10px]\",\n  52: \"size-[52px] p-2\",\n  72: \"size-[72px] p-4\",\n} as const;\n\nconst countSizeMap: Record<string, CountSize> = {\n  24: \"16\",\n  32: \"24\",\n  40: \"32\",\n  52: \"32\",\n  72: \"32\",\n};\n\n/** Visual style variant of the icon button. */\nexport type IconButtonVariant =\n  | \"primary\"\n  | \"secondary\"\n  | \"tertiary\"\n  | \"brand\"\n  | \"contrast\"\n  | \"messaging\"\n  | \"navTray\"\n  | \"tertiaryDestructive\"\n  | \"stop\"\n  | \"microphone\";\n\n/** Icon button size in pixels. */\nexport type IconButtonSize = \"24\" | \"32\" | \"40\" | \"52\" | \"72\";\n\nexport interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Visual style variant of the icon button. @default \"primary\" */\n  variant?: IconButtonVariant;\n  /** Size of the button in pixels. @default \"40\" */\n  size?: IconButtonSize;\n  /** Icon element to render inside the button. */\n  icon: React.ReactNode;\n  /** When provided, displays a {@link Count} badge at the top-right corner (tertiary & navTray variants only). */\n  counterValue?: number;\n}\n\n/**\n * A circular button containing only an icon. Use when an action can be\n * represented by an icon alone (e.g. close, send, mic). Pair with an\n * `aria-label` for accessibility.\n *\n * @example\n * ```tsx\n * <IconButton icon={<CloseIcon />} aria-label=\"Close\" variant=\"tertiary\" />\n * ```\n */\nexport const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\n  (\n    { className, variant = \"primary\", size = \"40\", icon, counterValue, disabled = false, ...props },\n    ref,\n  ) => {\n    if (process.env.NODE_ENV !== \"production\") {\n      if (!props[\"aria-label\"] && !props[\"aria-labelledby\"] && !props.title) {\n        console.warn(\n          \"IconButton: No accessible name provided. Add an `aria-label`, `aria-labelledby`, or `title` prop so screen readers can announce this button.\",\n        );\n      }\n    }\n\n    return (\n      <button\n        ref={ref}\n        type=\"button\"\n        data-testid=\"icon-button\"\n        disabled={disabled}\n        className={cn(\n          // Base styles\n          \"relative inline-flex shrink-0 items-center justify-center focus-visible:outline-none\",\n          \"cursor-pointer rounded-full transition-all duration-150 ease-in-out disabled:cursor-default\",\n          // Size variants\n          sizeVariants[size],\n          // Variant styles\n          iconButtonVariants[variant],\n          // Manual CSS overrides\n          className,\n        )}\n        {...props}\n      >\n        <span\n          className={cn(\"flex shrink-0 items-center justify-center\", iconSizeVariants[size])}\n          aria-hidden=\"true\"\n        >\n          {icon}\n        </span>\n\n        {counterValue !== undefined && (\n          <Count\n            value={counterValue}\n            variant=\"alert\"\n            size={countSizeMap[size]}\n            className=\"absolute -top-0.5 -right-0.5\"\n          />\n        )}\n      </button>\n    );\n  },\n);\n\nIconButton.displayName = \"IconButton\";\n"],"names":["React","jsxs","cn","jsx","Count"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAIA,MAAM,qBAAqB;AAAA,EACzB,SACE;AAAA,EACF,WACE;AAAA,EACF,UACE;AAAA,EACF,OACE;AAAA,EACF,UACE;AAAA,EACF,WACE;AAAA,EACF,SACE;AAAA,EACF,qBACE;AAAA,EACF,MAAM;AAAA,EACN,YACE;AACJ;AAEA,MAAM,mBAAmB;AAAA,EACvB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,eAAe;AAAA,EACnB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,eAA0C;AAAA,EAC9C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAuCO,MAAM,aAAaA,iBAAM;AAAA,EAC9B,CACE,EAAE,WAAW,UAAU,WAAW,OAAO,MAAM,MAAM,cAAc,WAAW,OAAO,GAAG,MAAA,GACxF,QACG;AACH,QAAI,QAAQ,IAAI,aAAa,cAAc;AACzC,UAAI,CAAC,MAAM,YAAY,KAAK,CAAC,MAAM,iBAAiB,KAAK,CAAC,MAAM,OAAO;AACrE,gBAAQ;AAAA,UACN;AAAA,QAAA;AAAA,MAEJ;AAAA,IACF;AAEA,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,eAAY;AAAA,QACZ;AAAA,QACA,WAAWC,GAAAA;AAAAA;AAAAA,UAET;AAAA,UACA;AAAA;AAAA,UAEA,aAAa,IAAI;AAAA;AAAA,UAEjB,mBAAmB,OAAO;AAAA;AAAA,UAE1B;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAAC,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWD,GAAAA,GAAG,6CAA6C,iBAAiB,IAAI,CAAC;AAAA,cACjF,eAAY;AAAA,cAEX,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,UAGF,iBAAiB,UAChBC,2BAAAA;AAAAA,YAACC,MAAAA;AAAAA,YAAA;AAAA,cACC,OAAO;AAAA,cACP,SAAQ;AAAA,cACR,MAAM,aAAa,IAAI;AAAA,cACvB,WAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QACZ;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,WAAW,cAAc;;"}
+{"version":3,"file":"IconButton.cjs","sources":["../../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Count, type CountSize } from \"../Count/Count\";\n\n/**\n * Visual style variant of the icon button.\n *\n * `primary`, `secondary`, `tertiary`, `outline`, `error`, `white` and `black`\n * use the shared button colour tokens and a size-driven shape (squared at the\n * `24` size, circular otherwise). Of these, `primary`, `secondary`, `tertiary`\n * and `outline` also honour the {@link IconButtonProps.negative} prop.\n *\n * `brand`, `contrast`, `messaging`, `navTray`, `tertiaryDestructive`, `stop` and\n * `microphone` are bespoke variants that stay circular at every size.\n */\nexport type IconButtonVariant =\n  | \"primary\"\n  | \"secondary\"\n  | \"tertiary\"\n  | \"outline\"\n  | \"error\"\n  | \"white\"\n  | \"black\"\n  | \"brand\"\n  | \"contrast\"\n  | \"messaging\"\n  | \"navTray\"\n  | \"tertiaryDestructive\"\n  | \"stop\"\n  | \"microphone\";\n\n/** Icon button size in pixels. */\nexport type IconButtonSize = \"24\" | \"32\" | \"40\" | \"48\" | \"52\" | \"72\";\n\nconst iconSizeVariants: Record<IconButtonSize, string> = {\n  24: \"[&>svg]:size-4\",\n  32: \"[&>svg]:size-4\",\n  40: \"[&>svg]:size-4\",\n  48: \"[&>svg]:size-6\",\n  52: \"[&>svg]:size-7\",\n  72: \"[&>svg]:size-8\",\n};\n\nconst sizeVariants: Record<IconButtonSize, string> = {\n  24: \"size-6 p-1\",\n  32: \"size-8 p-1.5\",\n  40: \"size-10 p-[10px]\",\n  48: \"size-12 p-3\",\n  52: \"size-[52px] p-2\",\n  72: \"size-[72px] p-4\",\n};\n\nconst countSizeMap: Record<IconButtonSize, CountSize> = {\n  24: \"16\",\n  32: \"24\",\n  40: \"32\",\n  48: \"32\",\n  52: \"32\",\n  72: \"32\",\n};\n\n/**\n * Variants whose corner radius is size-driven (see {@link IconButton}): the `24`\n * size is squared (`rounded-xs`), every larger size stays circular. All other\n * variants are circular at every size.\n */\nconst SIZE_DRIVEN_SHAPE_VARIANTS = new Set<IconButtonVariant>([\n  \"primary\",\n  \"secondary\",\n  \"tertiary\",\n  \"outline\",\n  \"error\",\n  \"white\",\n  \"black\",\n]);\n\n/** Variants that honour the `negative` (dark-surface) treatment. */\nconst NEGATIVE_AWARE_VARIANTS = new Set<IconButtonVariant>([\n  \"primary\",\n  \"secondary\",\n  \"tertiary\",\n  \"outline\",\n]);\n\nconst DISABLED_FILL = \"disabled:bg-buttons-disabled-default disabled:text-content-disabled\";\nconst DISABLED_FILL_NEGATIVE =\n  \"disabled:bg-buttons-disabled-negative disabled:text-content-disabled\";\nconst DISABLED_TRANSPARENT = \"disabled:text-content-disabled\";\nconst DISABLED_OPACITY = \"disabled:opacity-50\";\n\ntype VariantClasses = {\n  default: string;\n  disabled: string;\n  negative?: string;\n  negativeDisabled?: string;\n};\n\n/**\n * Icon button styling for every variant. The disabled treatment is expressed\n * with the CSS `disabled:` variant (not the `disabled` prop) so an ancestor\n * `<fieldset disabled>` is styled too; hover is guarded with `not-disabled:` so\n * it never fights the disabled state.\n */\nconst VARIANT_CLASSES: Record<IconButtonVariant, VariantClasses> = {\n  primary: {\n    default:\n      \"bg-buttons-primary-default text-content-primary-inverted not-disabled:hover:bg-buttons-primary-hover not-disabled:active:bg-buttons-primary-hover\",\n    disabled: DISABLED_FILL,\n    negative:\n      \"bg-buttons-primary-negative-default text-content-primary not-disabled:hover:bg-buttons-primary-negative-hover not-disabled:active:bg-buttons-primary-negative-hover\",\n    negativeDisabled: DISABLED_FILL_NEGATIVE,\n  },\n  secondary: {\n    default:\n      \"bg-buttons-secondary-default text-content-primary not-disabled:hover:bg-buttons-secondary-hover not-disabled:active:bg-buttons-secondary-hover\",\n    disabled: DISABLED_FILL,\n    negative:\n      \"bg-buttons-secondary-negative-default text-content-primary-inverted not-disabled:hover:bg-buttons-secondary-negative-hover not-disabled:active:bg-buttons-secondary-negative-hover\",\n    negativeDisabled: DISABLED_FILL_NEGATIVE,\n  },\n  tertiary: {\n    default:\n      \"bg-transparent text-content-primary not-disabled:hover:bg-buttons-tertiary-hover not-disabled:active:bg-buttons-tertiary-hover\",\n    disabled: DISABLED_TRANSPARENT,\n    negative:\n      \"bg-transparent text-content-primary-inverted not-disabled:hover:bg-buttons-tertiary-negative-hover not-disabled:active:bg-buttons-tertiary-negative-hover\",\n    negativeDisabled: DISABLED_TRANSPARENT,\n  },\n  outline: {\n    default:\n      \"border border-buttons-outline-default bg-transparent text-content-primary not-disabled:hover:bg-buttons-outline-hover not-disabled:active:bg-buttons-outline-hover\",\n    disabled: \"disabled:border-buttons-disabled-default disabled:text-content-disabled\",\n    negative:\n      \"border border-buttons-outline-negative-default bg-transparent text-content-primary-inverted not-disabled:hover:bg-buttons-outline-negative-hover not-disabled:active:bg-buttons-outline-negative-hover\",\n    negativeDisabled: \"disabled:border-buttons-disabled-negative disabled:text-content-disabled\",\n  },\n  error: {\n    default:\n      \"bg-buttons-error-default text-content-always-white not-disabled:hover:bg-buttons-error-hover not-disabled:active:bg-buttons-error-hover\",\n    disabled: DISABLED_FILL,\n  },\n  white: {\n    default:\n      \"bg-buttons-always-white-default text-content-always-black not-disabled:hover:bg-buttons-always-white-hover not-disabled:active:bg-buttons-always-white-hover\",\n    disabled: DISABLED_FILL,\n  },\n  black: {\n    default:\n      \"bg-buttons-always-black-default text-content-always-white not-disabled:hover:bg-buttons-always-black-hover not-disabled:active:bg-buttons-always-black-hover\",\n    disabled: DISABLED_FILL,\n  },\n  brand: {\n    default:\n      \"bg-content-always-black text-brand-primary-default hover:bg-brand-primary-default hover:text-content-always-black not-disabled:active:bg-brand-primary-default not-disabled:active:text-content-always-black\",\n    disabled: DISABLED_OPACITY,\n  },\n  contrast: {\n    default:\n      \"bg-transparent text-content-always-white hover:bg-brand-primary-muted not-disabled:active:bg-brand-primary-muted\",\n    disabled: DISABLED_OPACITY,\n  },\n  messaging: {\n    default:\n      \"bg-content-always-black text-brand-primary-default hover:bg-brand-primary-default hover:text-content-always-black not-disabled:active:bg-brand-primary-default not-disabled:active:text-content-always-black\",\n    disabled: DISABLED_OPACITY,\n  },\n  navTray: {\n    default:\n      \"bg-transparent text-content-primary hover:bg-brand-primary-muted not-disabled:active:bg-brand-primary-muted\",\n    disabled: DISABLED_OPACITY,\n  },\n  tertiaryDestructive: {\n    default:\n      \"bg-transparent text-error-content hover:bg-brand-primary-muted not-disabled:active:bg-brand-primary-muted\",\n    disabled: DISABLED_OPACITY,\n  },\n  stop: {\n    default:\n      \"bg-buttons-primary-default text-content-primary-inverted hover:bg-buttons-brand-default hover:text-content-always-black not-disabled:active:bg-buttons-brand-default not-disabled:active:text-content-always-black\",\n    disabled: DISABLED_OPACITY,\n  },\n  microphone: {\n    default:\n      \"bg-buttons-primary-default text-content-primary-inverted hover:bg-buttons-brand-default hover:text-content-always-black not-disabled:active:bg-buttons-brand-default not-disabled:active:text-content-always-black\",\n    disabled: DISABLED_OPACITY,\n  },\n};\n\nfunction getVariantClasses(variant: IconButtonVariant, negative: boolean): string {\n  const classes = VARIANT_CLASSES[variant];\n  const isNegative = NEGATIVE_AWARE_VARIANTS.has(variant) && negative;\n  const base = (isNegative && classes.negative) || classes.default;\n  const disabledClasses = (isNegative && classes.negativeDisabled) || classes.disabled;\n  return cn(base, disabledClasses);\n}\n\nexport interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Visual style variant of the icon button. @default \"primary\" */\n  variant?: IconButtonVariant;\n  /** Size of the button in pixels. @default \"40\" */\n  size?: IconButtonSize;\n  /** Icon element to render inside the button. */\n  icon: React.ReactNode;\n  /**\n   * Forces the dark-surface treatment regardless of theme. Only honoured on the\n   * `primary`, `secondary`, `tertiary`, and `outline` variants. @default false\n   */\n  negative?: boolean;\n  /** When provided, displays a {@link Count} badge at the top-right corner. */\n  counterValue?: number;\n}\n\n/**\n * A button containing only an icon. Use when an action can be represented by an\n * icon alone (e.g. close, send). Always pair with an `aria-label` for\n * accessibility.\n *\n * Shape is size-driven for the standard variants: the `24` size is squared\n * (`rounded-xs`), every larger size is circular. Bespoke variants (`brand`,\n * `contrast`, `messaging`, `navTray`, `tertiaryDestructive`, `stop`,\n * `microphone`) stay circular at all sizes.\n *\n * @example\n * ```tsx\n * <IconButton icon={<CloseIcon />} aria-label=\"Close\" variant=\"tertiary\" />\n * ```\n */\nexport const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\n  (\n    {\n      className,\n      variant = \"primary\",\n      size = \"40\",\n      icon,\n      counterValue,\n      negative = false,\n      disabled = false,\n      ...props\n    },\n    ref,\n  ) => {\n    if (process.env.NODE_ENV !== \"production\") {\n      if (!props[\"aria-label\"] && !props[\"aria-labelledby\"] && !props.title) {\n        console.warn(\n          \"IconButton: No accessible name provided. Add an `aria-label`, `aria-labelledby`, or `title` prop so screen readers can announce this button.\",\n        );\n      }\n    }\n\n    return (\n      <button\n        ref={ref}\n        type=\"button\"\n        data-testid=\"icon-button\"\n        disabled={disabled}\n        className={cn(\n          \"relative inline-flex shrink-0 items-center justify-center focus-visible:outline-none\",\n          \"cursor-pointer transition-all duration-150 ease-in-out disabled:cursor-default\",\n          \"focus-visible:shadow-focus-ring\",\n          SIZE_DRIVEN_SHAPE_VARIANTS.has(variant) && size === \"24\" ? \"rounded-xs\" : \"rounded-full\",\n          sizeVariants[size],\n          getVariantClasses(variant, negative),\n          className,\n        )}\n        {...props}\n      >\n        <span\n          className={cn(\"flex shrink-0 items-center justify-center\", iconSizeVariants[size])}\n          aria-hidden=\"true\"\n        >\n          {icon}\n        </span>\n\n        {counterValue !== undefined && (\n          <Count\n            value={counterValue}\n            variant=\"alert\"\n            size={countSizeMap[size]}\n            className=\"absolute -top-0.5 -right-0.5\"\n          />\n        )}\n      </button>\n    );\n  },\n);\n\nIconButton.displayName = \"IconButton\";\n"],"names":["cn","React","jsxs","jsx","Count"],"mappings":"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"}

package/dist/cjs/components/Icons/DenseGridViewIcon.cjs

@@ -0,0 +1,52 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const BaseIcon = require("./BaseIcon.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const VARIANTS = {
+  16: {
+    outlined: [
+      {
+        d: "M5.18 2.333a.667.667 0 0 0-.667-.666H2.5a.667.667 0 0 0-.667.666v2c0 .369.299.667.667.667h2.013a.667.667 0 0 0 .667-.667zm0 4.334A.667.667 0 0 0 4.513 6H2.5a.667.667 0 0 0-.667.667V9c0 .368.299.667.667.667h2.013A.667.667 0 0 0 5.18 9zm0 4.666a.667.667 0 0 0-.667-.666H2.5a.667.667 0 0 0-.667.666v2c0 .368.299.667.667.667h2.013a.667.667 0 0 0 .667-.667zm4.667-9a.667.667 0 0 0-.667-.666H6.847a.667.667 0 0 0-.667.666v2c0 .369.299.667.667.667H9.18a.667.667 0 0 0 .667-.667zm4.32 0a.667.667 0 0 0-.667-.666h-1.987a.667.667 0 0 0-.666.666v2c0 .369.298.667.666.667H13.5a.667.667 0 0 0 .667-.667zm-4.32 4.334A.667.667 0 0 0 9.18 6H6.847a.667.667 0 0 0-.667.667V9c0 .368.299.667.667.667H9.18A.667.667 0 0 0 9.847 9zm0 4.666a.667.667 0 0 0-.667-.666H6.847a.667.667 0 0 0-.667.666v2c0 .368.299.667.667.667H9.18a.667.667 0 0 0 .667-.667zm4.32 0a.667.667 0 0 0-.667-.666h-1.987a.667.667 0 0 0-.666.666v2c0 .368.298.667.666.667H13.5a.667.667 0 0 0 .667-.667zm0-4.666A.667.667 0 0 0 13.5 6h-1.987a.667.667 0 0 0-.666.667V9c0 .368.298.667.666.667H13.5A.667.667 0 0 0 14.167 9z"
+      }
+    ]
+  },
+  24: {
+    outlined: [
+      {
+        d: "M7.77 3.5a1 1 0 0 0-1-1H3.75a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h3.02a1 1 0 0 0 1-1zm0 6.5a1 1 0 0 0-1-1H3.75a1 1 0 0 0-1 1v3.5a1 1 0 0 0 1 1h3.02a1 1 0 0 0 1-1zm0 7a1 1 0 0 0-1-1H3.75a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h3.02a1 1 0 0 0 1-1zm7-13.5a1 1 0 0 0-1-1h-3.5a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h3.5a1 1 0 0 0 1-1zm6.48 0a1 1 0 0 0-1-1h-2.98a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h2.98a1 1 0 0 0 1-1zM14.77 10a1 1 0 0 0-1-1h-3.5a1 1 0 0 0-1 1v3.5a1 1 0 0 0 1 1h3.5a1 1 0 0 0 1-1zm0 7a1 1 0 0 0-1-1h-3.5a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h3.5a1 1 0 0 0 1-1zm6.48 0a1 1 0 0 0-1-1h-2.98a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h2.98a1 1 0 0 0 1-1zm0-7a1 1 0 0 0-1-1h-2.98a1 1 0 0 0-1 1v3.5a1 1 0 0 0 1 1h2.98a1 1 0 0 0 1-1z"
+      }
+    ]
+  },
+  32: {
+    outlined: [
+      {
+        d: "M10.36 4.667c0-.737-.597-1.334-1.333-1.334H5c-.736 0-1.333.597-1.333 1.334v4C3.667 9.403 4.264 10 5 10h4.027c.736 0 1.333-.597 1.333-1.333zm0 8.666c0-.736-.597-1.333-1.333-1.333H5c-.736 0-1.333.597-1.333 1.333V18c0 .736.597 1.333 1.333 1.333h4.027c.736 0 1.333-.597 1.333-1.333zm0 9.334c0-.737-.597-1.334-1.333-1.334H5c-.736 0-1.333.597-1.333 1.334v4C3.667 27.403 4.264 28 5 28h4.027c.736 0 1.333-.597 1.333-1.333zm9.333-18c0-.737-.597-1.334-1.333-1.334h-4.667c-.736 0-1.333.597-1.333 1.334v4c0 .736.597 1.333 1.333 1.333h4.667c.736 0 1.333-.597 1.333-1.333zm8.64 0c0-.737-.597-1.334-1.333-1.334h-3.973c-.737 0-1.334.597-1.334 1.334v4c0 .736.597 1.333 1.334 1.333H27c.736 0 1.333-.597 1.333-1.333zm-8.64 8.666c0-.736-.597-1.333-1.333-1.333h-4.667c-.736 0-1.333.597-1.333 1.333V18c0 .736.597 1.333 1.333 1.333h4.667c.736 0 1.333-.597 1.333-1.333zm0 9.334c0-.737-.597-1.334-1.333-1.334h-4.667c-.736 0-1.333.597-1.333 1.334v4c0 .736.597 1.333 1.333 1.333h4.667c.736 0 1.333-.597 1.333-1.333zm8.64 0c0-.737-.597-1.334-1.333-1.334h-3.973c-.737 0-1.334.597-1.334 1.334v4c0 .736.597 1.333 1.334 1.333H27c.736 0 1.333-.597 1.333-1.333zm0-9.334c0-.736-.597-1.333-1.333-1.333h-3.973c-.737 0-1.334.597-1.334 1.333V18c0 .736.597 1.333 1.334 1.333H27c.736 0 1.333-.597 1.333-1.333z"
+      }
+    ]
+  }
+};
+const DenseGridViewIcon = React__namespace.forwardRef(
+  (props, ref) => /* @__PURE__ */ jsxRuntime.jsx(BaseIcon.BaseIcon, { ref, variants: VARIANTS, ...props })
+);
+DenseGridViewIcon.displayName = "DenseGridViewIcon";
+exports.DenseGridViewIcon = DenseGridViewIcon;
+//# sourceMappingURL=DenseGridViewIcon.cjs.map

package/dist/cjs/components/Icons/DenseGridViewIcon.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DenseGridViewIcon.cjs","sources":["../../../../src/components/Icons/DenseGridViewIcon.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { BaseIcon } from \"./BaseIcon\";\nimport type { BaseIconProps, IconVariants } from \"./types\";\n\nconst VARIANTS: IconVariants = {\n  16: {\n    outlined: [\n      {\n        d: \"M5.18 2.333a.667.667 0 0 0-.667-.666H2.5a.667.667 0 0 0-.667.666v2c0 .369.299.667.667.667h2.013a.667.667 0 0 0 .667-.667zm0 4.334A.667.667 0 0 0 4.513 6H2.5a.667.667 0 0 0-.667.667V9c0 .368.299.667.667.667h2.013A.667.667 0 0 0 5.18 9zm0 4.666a.667.667 0 0 0-.667-.666H2.5a.667.667 0 0 0-.667.666v2c0 .368.299.667.667.667h2.013a.667.667 0 0 0 .667-.667zm4.667-9a.667.667 0 0 0-.667-.666H6.847a.667.667 0 0 0-.667.666v2c0 .369.299.667.667.667H9.18a.667.667 0 0 0 .667-.667zm4.32 0a.667.667 0 0 0-.667-.666h-1.987a.667.667 0 0 0-.666.666v2c0 .369.298.667.666.667H13.5a.667.667 0 0 0 .667-.667zm-4.32 4.334A.667.667 0 0 0 9.18 6H6.847a.667.667 0 0 0-.667.667V9c0 .368.299.667.667.667H9.18A.667.667 0 0 0 9.847 9zm0 4.666a.667.667 0 0 0-.667-.666H6.847a.667.667 0 0 0-.667.666v2c0 .368.299.667.667.667H9.18a.667.667 0 0 0 .667-.667zm4.32 0a.667.667 0 0 0-.667-.666h-1.987a.667.667 0 0 0-.666.666v2c0 .368.298.667.666.667H13.5a.667.667 0 0 0 .667-.667zm0-4.666A.667.667 0 0 0 13.5 6h-1.987a.667.667 0 0 0-.666.667V9c0 .368.298.667.666.667H13.5A.667.667 0 0 0 14.167 9z\",\n      },\n    ],\n  },\n  24: {\n    outlined: [\n      {\n        d: \"M7.77 3.5a1 1 0 0 0-1-1H3.75a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h3.02a1 1 0 0 0 1-1zm0 6.5a1 1 0 0 0-1-1H3.75a1 1 0 0 0-1 1v3.5a1 1 0 0 0 1 1h3.02a1 1 0 0 0 1-1zm0 7a1 1 0 0 0-1-1H3.75a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h3.02a1 1 0 0 0 1-1zm7-13.5a1 1 0 0 0-1-1h-3.5a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h3.5a1 1 0 0 0 1-1zm6.48 0a1 1 0 0 0-1-1h-2.98a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h2.98a1 1 0 0 0 1-1zM14.77 10a1 1 0 0 0-1-1h-3.5a1 1 0 0 0-1 1v3.5a1 1 0 0 0 1 1h3.5a1 1 0 0 0 1-1zm0 7a1 1 0 0 0-1-1h-3.5a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h3.5a1 1 0 0 0 1-1zm6.48 0a1 1 0 0 0-1-1h-2.98a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h2.98a1 1 0 0 0 1-1zm0-7a1 1 0 0 0-1-1h-2.98a1 1 0 0 0-1 1v3.5a1 1 0 0 0 1 1h2.98a1 1 0 0 0 1-1z\",\n      },\n    ],\n  },\n  32: {\n    outlined: [\n      {\n        d: \"M10.36 4.667c0-.737-.597-1.334-1.333-1.334H5c-.736 0-1.333.597-1.333 1.334v4C3.667 9.403 4.264 10 5 10h4.027c.736 0 1.333-.597 1.333-1.333zm0 8.666c0-.736-.597-1.333-1.333-1.333H5c-.736 0-1.333.597-1.333 1.333V18c0 .736.597 1.333 1.333 1.333h4.027c.736 0 1.333-.597 1.333-1.333zm0 9.334c0-.737-.597-1.334-1.333-1.334H5c-.736 0-1.333.597-1.333 1.334v4C3.667 27.403 4.264 28 5 28h4.027c.736 0 1.333-.597 1.333-1.333zm9.333-18c0-.737-.597-1.334-1.333-1.334h-4.667c-.736 0-1.333.597-1.333 1.334v4c0 .736.597 1.333 1.333 1.333h4.667c.736 0 1.333-.597 1.333-1.333zm8.64 0c0-.737-.597-1.334-1.333-1.334h-3.973c-.737 0-1.334.597-1.334 1.334v4c0 .736.597 1.333 1.334 1.333H27c.736 0 1.333-.597 1.333-1.333zm-8.64 8.666c0-.736-.597-1.333-1.333-1.333h-4.667c-.736 0-1.333.597-1.333 1.333V18c0 .736.597 1.333 1.333 1.333h4.667c.736 0 1.333-.597 1.333-1.333zm0 9.334c0-.737-.597-1.334-1.333-1.334h-4.667c-.736 0-1.333.597-1.333 1.334v4c0 .736.597 1.333 1.333 1.333h4.667c.736 0 1.333-.597 1.333-1.333zm8.64 0c0-.737-.597-1.334-1.333-1.334h-3.973c-.737 0-1.334.597-1.334 1.334v4c0 .736.597 1.333 1.334 1.333H27c.736 0 1.333-.597 1.333-1.333zm0-9.334c0-.736-.597-1.333-1.333-1.333h-3.973c-.737 0-1.334.597-1.334 1.333V18c0 .736.597 1.333 1.334 1.333H27c.736 0 1.333-.597 1.333-1.333z\",\n      },\n    ],\n  },\n};\n\n/** Props for {@link DenseGridViewIcon}. See {@link BaseIconProps} for the shared shape. */\nexport type DenseGridViewIconProps = BaseIconProps;\n\n/**\n * Dense grid view icon (3×3 tiles) — the compact-grid counterpart of\n * {@link GridViewIcon}. Renders at sizes 16, 24, or 32 px.\n *\n * @example\n * ```tsx\n * <DenseGridViewIcon size={24} />\n * ```\n */\nexport const DenseGridViewIcon = React.forwardRef<SVGSVGElement, DenseGridViewIconProps>(\n  (props, ref) => <BaseIcon ref={ref} variants={VARIANTS} {...props} />,\n);\n\nDenseGridViewIcon.displayName = \"DenseGridViewIcon\";\n"],"names":["React","jsx","BaseIcon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAIA,MAAM,WAAyB;AAAA,EAC7B,IAAI;AAAA,IACF,UAAU;AAAA,MACR;AAAA,QACE,GAAG;AAAA,MAAA;AAAA,IACL;AAAA,EACF;AAAA,EAEF,IAAI;AAAA,IACF,UAAU;AAAA,MACR;AAAA,QACE,GAAG;AAAA,MAAA;AAAA,IACL;AAAA,EACF;AAAA,EAEF,IAAI;AAAA,IACF,UAAU;AAAA,MACR;AAAA,QACE,GAAG;AAAA,MAAA;AAAA,IACL;AAAA,EACF;AAEJ;AAcO,MAAM,oBAAoBA,iBAAM;AAAA,EACrC,CAAC,OAAO,QAAQC,2BAAAA,IAACC,SAAAA,YAAS,KAAU,UAAU,UAAW,GAAG,MAAA,CAAO;AACrE;AAEA,kBAAkB,cAAc;;"}

package/dist/cjs/components/MediaStatusIndicator/MediaStatusIndicator.cjs

@@ -0,0 +1,66 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const cn = require("../../utils/cn.cjs");
+const CloseIcon = require("../Icons/CloseIcon.cjs");
+const EyeOffIcon = require("../Icons/EyeOffIcon.cjs");
+const FlagIcon = require("../Icons/FlagIcon.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const STATUS_CONFIG = {
+  default: {
+    container: "bg-warning-surface text-warning-content",
+    icon: /* @__PURE__ */ jsxRuntime.jsx(FlagIcon.FlagIcon, { size: 16, filled: true }),
+    label: "Flagged"
+  },
+  removed: {
+    container: "border border-error-secondary bg-error-negative-content text-content-always-white",
+    icon: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon.CloseIcon, { size: 16 }),
+    label: "Removed"
+  },
+  sensitive: {
+    container: "bg-buttons-overlay-default text-content-always-white",
+    icon: /* @__PURE__ */ jsxRuntime.jsx(EyeOffIcon.EyeOffIcon, { size: 16, filled: true }),
+    label: "Sensitive content"
+  }
+};
+const MediaStatusIndicator = React__namespace.forwardRef(
+  ({ status = "default", label, className, ...props }, ref) => {
+    const config = STATUS_CONFIG[status];
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        ref,
+        role: "img",
+        "aria-label": props["aria-label"] ?? label ?? config.label,
+        className: cn.cn(
+          "inline-flex items-center justify-center rounded-full p-2 [&>svg]:size-4",
+          config.container,
+          className
+        ),
+        ...props,
+        children: config.icon
+      }
+    );
+  }
+);
+MediaStatusIndicator.displayName = "MediaStatusIndicator";
+exports.MediaStatusIndicator = MediaStatusIndicator;
+//# sourceMappingURL=MediaStatusIndicator.cjs.map

package/dist/cjs/components/MediaStatusIndicator/MediaStatusIndicator.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaStatusIndicator.cjs","sources":["../../../../src/components/MediaStatusIndicator/MediaStatusIndicator.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { CloseIcon } from \"../Icons/CloseIcon\";\nimport { EyeOffIcon } from \"../Icons/EyeOffIcon\";\nimport { FlagIcon } from \"../Icons/FlagIcon\";\n\n/**\n * State represented by the indicator.\n * - `\"default\"`: media flagged / pending review (amber).\n * - `\"removed\"`: media removed for a policy violation (red).\n * - `\"sensitive\"`: sensitive content hidden behind an overlay (dark).\n */\nexport type MediaStatusIndicatorStatus = \"default\" | \"removed\" | \"sensitive\";\n\nexport interface MediaStatusIndicatorProps\n  extends Omit<React.HTMLAttributes<HTMLSpanElement>, \"children\"> {\n  /** Which media state to represent. @default \"default\" */\n  status?: MediaStatusIndicatorStatus;\n  /**\n   * Accessible label announced by assistive tech. Defaults to a per-status\n   * description; pass your own for localisation or extra context.\n   */\n  label?: string;\n}\n\ntype StatusConfig = { container: string; icon: React.ReactNode; label: string };\n\nconst STATUS_CONFIG: Record<MediaStatusIndicatorStatus, StatusConfig> = {\n  default: {\n    container: \"bg-warning-surface text-warning-content\",\n    icon: <FlagIcon size={16} filled />,\n    label: \"Flagged\",\n  },\n  removed: {\n    container: \"border border-error-secondary bg-error-negative-content text-content-always-white\",\n    icon: <CloseIcon size={16} />,\n    label: \"Removed\",\n  },\n  sensitive: {\n    container: \"bg-buttons-overlay-default text-content-always-white\",\n    icon: <EyeOffIcon size={16} filled />,\n    label: \"Sensitive content\",\n  },\n};\n\n/**\n * A compact circular indicator that surfaces the moderation state of a piece of\n * media — flagged, removed, or sensitive. Typically overlaid on a thumbnail or\n * attachment.\n *\n * Renders as `role=\"img\"` with a descriptive `aria-label`; the inner glyph is\n * decorative.\n *\n * @example\n * ```tsx\n * <MediaStatusIndicator status=\"sensitive\" />\n * <MediaStatusIndicator status=\"removed\" label=\"Removed for violating guidelines\" />\n * ```\n */\nexport const MediaStatusIndicator = React.forwardRef<HTMLSpanElement, MediaStatusIndicatorProps>(\n  ({ status = \"default\", label, className, ...props }, ref) => {\n    const config = STATUS_CONFIG[status];\n    return (\n      <span\n        ref={ref}\n        role=\"img\"\n        aria-label={props[\"aria-label\"] ?? label ?? config.label}\n        className={cn(\n          \"inline-flex items-center justify-center rounded-full p-2 [&>svg]:size-4\",\n          config.container,\n          className,\n        )}\n        {...props}\n      >\n        {config.icon}\n      </span>\n    );\n  },\n);\n\nMediaStatusIndicator.displayName = \"MediaStatusIndicator\";\n"],"names":["jsx","FlagIcon","CloseIcon","EyeOffIcon","React","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA,MAAM,gBAAkE;AAAA,EACtE,SAAS;AAAA,IACP,WAAW;AAAA,IACX,MAAMA,2BAAAA,IAACC,mBAAA,EAAS,MAAM,IAAI,QAAM,MAAC;AAAA,IACjC,OAAO;AAAA,EAAA;AAAA,EAET,SAAS;AAAA,IACP,WAAW;AAAA,IACX,MAAMD,2BAAAA,IAACE,UAAAA,WAAA,EAAU,MAAM,GAAA,CAAI;AAAA,IAC3B,OAAO;AAAA,EAAA;AAAA,EAET,WAAW;AAAA,IACT,WAAW;AAAA,IACX,MAAMF,2BAAAA,IAACG,uBAAA,EAAW,MAAM,IAAI,QAAM,MAAC;AAAA,IACnC,OAAO;AAAA,EAAA;AAEX;AAgBO,MAAM,uBAAuBC,iBAAM;AAAA,EACxC,CAAC,EAAE,SAAS,WAAW,OAAO,WAAW,GAAG,MAAA,GAAS,QAAQ;AAC3D,UAAM,SAAS,cAAc,MAAM;AACnC,WACEJ,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,cAAY,MAAM,YAAY,KAAK,SAAS,OAAO;AAAA,QACnD,WAAWK,GAAAA;AAAAA,UACT;AAAA,UACA,OAAO;AAAA,UACP;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEH,UAAA,OAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EAGd;AACF;AAEA,qBAAqB,cAAc;;"}