@fanvue/ui 3.4.0 → 3.6.0

package/dist/components/ChatInput/ChatInput.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ChatInput.mjs","sources":["../../../src/components/ChatInput/ChatInput.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { IconButton } from \"../IconButton/IconButton\";\nimport { AddIcon } from \"../Icons/AddIcon\";\nimport { ArrowUpIcon } from \"../Icons/ArrowUpIcon\";\nimport { CheckIcon } from \"../Icons/CheckIcon\";\nimport { ChevronDownIcon } from \"../Icons/ChevronDownIcon\";\nimport { CloseIcon } from \"../Icons/CloseIcon\";\n\n/** A single image thumbnail in the built-in attachment strip. */\nexport interface ChatInputAttachmentItem {\n  /** Stable id passed to {@link ChatInputProps.onAttachmentRemove} and used as React `key`. */\n  id: string;\n  /** Image URL for the thumbnail. */\n  src: string;\n  /** Optional value passed to the remove control `aria-label`. */\n  ariaLabel?: string;\n}\n\n/** A single option for the inline model/dropdown selector. */\nexport interface ChatInputSelectOption {\n  /** Unique value for this option. */\n  value: string;\n  /** Display label. */\n  label: string;\n  /** Optional icon rendered to the left of the label. */\n  icon?: React.ReactNode;\n}\n\n/**\n * Props for {@link ChatInput}. Standard textarea HTML attributes are forwarded to the inner\n * `<textarea>` except `className` (applied to the outer container), `rows` (use `minRows`), and\n * `onSubmit` (replaced by the chat message submit callback).\n */\nexport interface ChatInputProps\n  extends Omit<\n    React.TextareaHTMLAttributes<HTMLTextAreaElement>,\n    \"className\" | \"rows\" | \"onSubmit\"\n  > {\n  /** Minimum number of visible rows. @default 1 */\n  minRows?: number;\n  /** Maximum number of visible rows before scrolling. @default 6 */\n  maxRows?: number;\n  /** Whether a submission is in progress (disables submit, shows visual feedback). @default false */\n  loading?: boolean;\n  /**\n   * Callback fired when the user submits (clicks the send button or presses Enter without Shift).\n   * Receives the current trimmed text value.\n   */\n  onSubmit?: (value: string) => void;\n  /**\n   * When `true`, renders an \"attach file\" button in the bottom-left toolbar.\n   * @default false\n   */\n  showFileButton?: boolean;\n  /** Callback fired when the attach-file button is clicked. Only relevant when `showFileButton` is `true`. */\n  onFileClick?: () => void;\n  /** Accessible label for the attach-file button. @default \"Attach file\" */\n  fileButtonAriaLabel?: string;\n  /** Accessible label for the submit button. @default \"Send message\" */\n  submitAriaLabel?: string;\n  /** Icon element for the submit button. @default `<ArrowUpIcon />` */\n  submitIcon?: React.ReactNode;\n  /**\n   * Optional content rendered in the bottom-right toolbar, to the left of the submit button.\n   * When provided, takes precedence over the built-in `selectOptions` dropdown.\n   */\n  toolbarRight?: React.ReactNode;\n  /**\n   * Options for the built-in inline dropdown selector (e.g. model picker).\n   * Ignored when `toolbarRight` is provided.\n   */\n  selectOptions?: ChatInputSelectOption[];\n  /** Currently selected value for the built-in dropdown. Should match one of `selectOptions[].value`. */\n  selectValue?: string;\n  /** When `true`, disables only the built-in dropdown selector. @default false */\n  selectDisabled?: boolean;\n  /** Callback fired when the user picks a different dropdown option. */\n  onSelectChange?: (value: string) => void;\n  /**\n   * Image attachments shown in the built-in thumbnail strip. Ignored when {@link ChatInputProps.attachmentPreviews}\n   * is provided (including `null`).\n   */\n  attachments?: ChatInputAttachmentItem[];\n  /**\n   * Called when the user removes a built-in thumbnail. The remove button is disabled when this is\n   * omitted or the input is {@link ChatInputProps.disabled}.\n   */\n  onAttachmentRemove?: (id: string) => void;\n  /**\n   * Replaces the built-in attachment strip entirely. When set to any value other than `undefined`\n   * (including `null` or `[]`), {@link ChatInputProps.attachments} is ignored.\n   */\n  attachmentPreviews?: React.ReactNode;\n  /** Additional className applied to the outermost container. */\n  className?: string;\n}\n\nconst LINE_HEIGHT = 18;\nconst TEXTAREA_PY = 12;\n\nfunction calculateHeight(rows: number): number {\n  return LINE_HEIGHT * rows + TEXTAREA_PY * 2;\n}\n\ninterface ChatInputDefaultAttachmentThumbnailsProps {\n  attachments: ChatInputAttachmentItem[];\n  onAttachmentRemove?: (id: string) => void;\n  disabled?: boolean;\n}\n\nfunction ChatInputDefaultAttachmentThumbnails({\n  attachments,\n  onAttachmentRemove,\n  disabled = false,\n}: ChatInputDefaultAttachmentThumbnailsProps) {\n  return attachments.map((item) => (\n    <div\n      key={item.id}\n      className=\"relative size-16 shrink-0 overflow-hidden rounded-sm border border-neutral-200 bg-background-secondary\"\n    >\n      <img src={item.src} alt=\"\" className=\"size-full object-cover\" />\n      <IconButton\n        variant=\"tertiary\"\n        size=\"24\"\n        aria-label={item.ariaLabel ? `Remove ${item.ariaLabel}` : \"Remove attachment\"}\n        icon={<CloseIcon className=\"!size-3\" />}\n        disabled={disabled || !onAttachmentRemove}\n        onClick={() => onAttachmentRemove?.(item.id)}\n        className=\"absolute top-0.5 right-0.5 size-5 bg-neutral-900/40 p-1 text-white hover:bg-neutral-900/55\"\n      />\n    </div>\n  ));\n}\n\n/**\n * A chat-style multi-line input with an integrated toolbar containing an\n * optional file-attach button, optional right-side controls (e.g. a model\n * selector), and a submit button — all inside a single bordered container.\n *\n * Designed to behave like modern AI chat inputs: auto-grows with content,\n * submits on Enter (Shift+Enter for newlines), and keeps controls inline.\n *\n * @example\n * ```tsx\n * <ChatInput\n *   placeholder=\"Type a message...\"\n *   onSubmit={(text) => send(text)}\n * />\n * ```\n *\n * @example\n * ```tsx\n * <ChatInput\n *   placeholder=\"Ask the agent...\"\n *   showFileButton\n *   onFileClick={() => openFilePicker()}\n *   selectOptions={[\n *     { value: \"fanvue-ai\", label: \"Fanvue AI\", icon: <AIIcon className=\"size-4\" /> },\n *     { value: \"example\", label: \"Example\", icon: <BulbIcon className=\"size-4\" /> },\n *   ]}\n *   selectValue=\"fanvue-ai\"\n *   onSelectChange={(v) => setModel(v)}\n *   onSubmit={(text) => send(text)}\n * />\n * ```\n *\n * @example\n * ```tsx\n * <ChatInput\n *   showFileButton\n *   onFileClick={() => openPicker()}\n *   attachments={files}\n *   onAttachmentRemove={(id) => setFiles((prev) => prev.filter((f) => f.id !== id))}\n * />\n * ```\n *\n * @example\n * ```tsx\n * <ChatInput\n *   showFileButton\n *   onFileClick={() => openPicker()}\n *   attachmentPreviews={<CustomVideoStrip items={items} />}\n * />\n * ```\n */\nexport const ChatInput = React.forwardRef<HTMLTextAreaElement, ChatInputProps>(\n  (\n    {\n      className,\n      minRows = 1,\n      maxRows = 6,\n      disabled = false,\n      loading = false,\n      value,\n      defaultValue,\n      placeholder,\n      maxLength,\n      \"aria-label\": ariaLabel,\n      onChange,\n      onKeyDown,\n      onSubmit,\n      showFileButton = false,\n      onFileClick,\n      fileButtonAriaLabel = \"Attach file\",\n      submitAriaLabel = \"Send message\",\n      submitIcon,\n      toolbarRight,\n      selectOptions,\n      selectValue,\n      selectDisabled = false,\n      onSelectChange,\n      attachments,\n      onAttachmentRemove,\n      attachmentPreviews,\n      style,\n      ...textareaProps\n    },\n    ref,\n  ) => {\n    const internalRef = React.useRef<HTMLTextAreaElement>(null);\n    const [internalValue, setInternalValue] = React.useState(defaultValue ?? \"\");\n    const resolvedValue = value !== undefined ? value : internalValue;\n    const isControlled = value !== undefined;\n\n    const mergedRef = React.useCallback(\n      (node: HTMLTextAreaElement | null) => {\n        (internalRef as React.MutableRefObject<HTMLTextAreaElement | null>).current = node;\n        if (typeof ref === \"function\") {\n          ref(node);\n        } else if (ref) {\n          (ref as React.MutableRefObject<HTMLTextAreaElement | null>).current = node;\n        }\n      },\n      [ref],\n    );\n\n    const adjustHeight = React.useCallback(() => {\n      const textarea = internalRef.current;\n      if (!textarea) return;\n\n      const minHeight = calculateHeight(minRows);\n      const maxHeight = calculateHeight(maxRows);\n\n      textarea.style.height = `${minHeight}px`;\n      const desired = Math.min(Math.max(textarea.scrollHeight, minHeight), maxHeight);\n      textarea.style.height = `${desired}px`;\n    }, [minRows, maxRows]);\n\n    React.useEffect(() => {\n      adjustHeight();\n    }, [resolvedValue, adjustHeight]);\n\n    const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n      if (!isControlled) {\n        setInternalValue(e.target.value);\n      }\n      onChange?.(e);\n    };\n\n    const canSubmit = !!String(resolvedValue).trim() && !disabled && !loading;\n\n    const handleSubmit = () => {\n      const text = String(resolvedValue).trim();\n      if (!text || !canSubmit) return;\n      onSubmit?.(text);\n      if (!isControlled) {\n        setInternalValue(\"\");\n      }\n    };\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {\n      if (e.key === \"Enter\" && !e.shiftKey) {\n        e.preventDefault();\n        handleSubmit();\n      }\n      onKeyDown?.(e);\n    };\n\n    const minHeight = calculateHeight(minRows);\n    const maxHeight = calculateHeight(maxRows);\n\n    const useCustomAttachmentPreviews = attachmentPreviews !== undefined;\n    const customAttachmentStrip = useCustomAttachmentPreviews ? attachmentPreviews : null;\n    const defaultAttachmentStrip =\n      !useCustomAttachmentPreviews && !!attachments?.length ? (\n        <ChatInputDefaultAttachmentThumbnails\n          attachments={attachments ?? []}\n          disabled={disabled}\n          onAttachmentRemove={onAttachmentRemove}\n        />\n      ) : null;\n    const resolvedAttachmentStrip = customAttachmentStrip ?? defaultAttachmentStrip;\n    const hasAttachmentStrip = resolvedAttachmentStrip != null;\n\n    const selectedOption =\n      selectOptions?.find((o) => o.value === selectValue) ?? selectOptions?.[0];\n    const resolvedToolbarRight =\n      toolbarRight ??\n      (selectOptions && selectOptions.length > 0 ? (\n        <InlineSelect\n          options={selectOptions}\n          value={selectValue}\n          onChange={onSelectChange}\n          disabled={disabled || selectDisabled}\n          selectedOption={selectedOption}\n        />\n      ) : null);\n\n    return (\n      <div\n        className={cn(\n          \"relative flex flex-col gap-6 rounded-lg border border-border-primary bg-surface-primary\",\n          \"has-focus-visible:outline-none\",\n          \"motion-safe:transition-colors\",\n          disabled && \"opacity-50\",\n          className,\n        )}\n      >\n        <div className=\"flex flex-col\">\n          {hasAttachmentStrip ? (\n            <div className=\"flex gap-2 overflow-x-auto px-4 pt-4 pb-2 [scrollbar-width:thin]\">\n              {resolvedAttachmentStrip}\n            </div>\n          ) : null}\n          <textarea\n            {...textareaProps}\n            ref={mergedRef}\n            value={isControlled ? value : internalValue}\n            placeholder={placeholder}\n            maxLength={maxLength}\n            disabled={disabled}\n            aria-label={ariaLabel ?? placeholder}\n            onChange={handleChange}\n            onKeyDown={handleKeyDown}\n            rows={minRows}\n            className={cn(\n              \"w-full resize-none bg-transparent px-4\",\n              hasAttachmentStrip ? \"pt-0\" : \"pt-4\",\n              \"typography-body-small-14px-regular text-content-primary\",\n              \"placeholder:text-content-tertiary\",\n              \"focus:outline-none disabled:cursor-not-allowed\",\n              \"overflow-y-auto\",\n            )}\n            style={{\n              minHeight: `${minHeight}px`,\n              maxHeight: `${maxHeight}px`,\n              ...style,\n            }}\n          />\n        </div>\n\n        <div className=\"flex items-center justify-between gap-2 px-4 pb-4\">\n          <div className=\"flex items-center gap-1\">\n            {showFileButton && (\n              <IconButton\n                variant=\"tertiary\"\n                size=\"32\"\n                icon={<AddIcon />}\n                aria-label={fileButtonAriaLabel}\n                onClick={onFileClick}\n                disabled={disabled}\n                className=\"sm:border sm:border-border-primary max-sm:-ml-2\"\n              />\n            )}\n          </div>\n\n          <div className=\"flex items-center gap-1\">\n            {resolvedToolbarRight}\n            <IconButton\n              variant=\"primary\"\n              size=\"32\"\n              icon={submitIcon ?? <ArrowUpIcon />}\n              aria-label={submitAriaLabel}\n              onClick={handleSubmit}\n              disabled={!canSubmit}\n              className=\"disabled:bg-surface-secondary disabled:opacity-100 disabled:text-icons-primary\"\n            />\n          </div>\n        </div>\n      </div>\n    );\n  },\n);\n\nChatInput.displayName = \"ChatInput\";\n\ninterface InlineSelectProps {\n  options: ChatInputSelectOption[];\n  value?: string;\n  onChange?: (value: string) => void;\n  disabled?: boolean;\n  selectedOption?: ChatInputSelectOption;\n}\n\nfunction InlineSelect({ options, value, onChange, disabled, selectedOption }: InlineSelectProps) {\n  const [open, setOpen] = React.useState(false);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n\n  React.useEffect(() => {\n    if (!open) return;\n    const handleClick = (e: MouseEvent) => {\n      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {\n        setOpen(false);\n      }\n    };\n    document.addEventListener(\"mousedown\", handleClick);\n    return () => document.removeEventListener(\"mousedown\", handleClick);\n  }, [open]);\n\n  React.useEffect(() => {\n    if (!open) return;\n    const handleKey = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") setOpen(false);\n    };\n    document.addEventListener(\"keydown\", handleKey);\n    return () => document.removeEventListener(\"keydown\", handleKey);\n  }, [open]);\n\n  return (\n    <div ref={containerRef} className=\"relative\">\n      <button\n        type=\"button\"\n        role=\"combobox\"\n        aria-expanded={open}\n        aria-haspopup=\"listbox\"\n        aria-label=\"Select model\"\n        disabled={disabled}\n        onClick={() => setOpen((prev) => !prev)}\n        className={cn(\n          \"typography-description-12px-semibold text-content-primary\",\n          \"flex items-center gap-1 rounded-md px-2 py-2\",\n          \"hover:bg-neutral-alphas-50 focus-visible:shadow-focus-ring focus-visible:outline-none\",\n          \"disabled:cursor-not-allowed disabled:opacity-50\",\n          \"motion-safe:transition-colors\",\n          open && \"bg-neutral-alphas-50\",\n        )}\n      >\n        {selectedOption?.icon && (\n          <span className=\"flex shrink-0 items-center [&>svg]:size-4\">{selectedOption.icon}</span>\n        )}\n        {selectedOption?.label ?? options[0]?.label ?? \"Select\"}\n        <ChevronDownIcon\n          className={cn(\"size-4 motion-safe:transition-transform\", open && \"rotate-180\")}\n        />\n      </button>\n\n      {open && (\n        <div\n          role=\"listbox\"\n          className={cn(\n            \"absolute right-0 bottom-full z-10 mb-1 min-w-[180px]\",\n            \"overflow-hidden rounded-xs border border-border-primary bg-surface-primary p-1.5 shadow-lg\",\n          )}\n        >\n          {options.map((option) => (\n            <div\n              key={option.value}\n              role=\"option\"\n              tabIndex={0}\n              aria-selected={option.value === value}\n              className={cn(\n                \"typography-body-small-14px-regular flex cursor-pointer items-center gap-2 rounded-xs py-2.5 pr-2 pl-3\",\n                \"text-content-primary hover:bg-neutral-alphas-50\",\n                \"focus-visible:shadow-focus-ring focus-visible:outline-none\",\n              )}\n              onClick={() => {\n                onChange?.(option.value);\n                setOpen(false);\n              }}\n              onKeyDown={(e) => {\n                if (e.key === \"Enter\" || e.key === \" \") {\n                  e.preventDefault();\n                  onChange?.(option.value);\n                  setOpen(false);\n                }\n              }}\n            >\n              {option.icon && (\n                <span className=\"flex shrink-0 items-center [&>svg]:size-4\">{option.icon}</span>\n              )}\n              <span className=\"min-w-0 flex-1 truncate\">{option.label}</span>\n              {option.value === value && (\n                <span className=\"ml-auto flex size-4 shrink-0 items-center justify-center\">\n                  <CheckIcon className=\"size-4 text-content-primary\" aria-hidden=\"true\" />\n                </span>\n              )}\n            </div>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":["minHeight","maxHeight"],"mappings":"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"}
+{"version":3,"file":"ChatInput.mjs","sources":["../../../src/components/ChatInput/ChatInput.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Drawer, DrawerContent, DrawerHeader, DrawerTitle, DrawerTrigger } from \"../Drawer/Drawer\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"../DropdownMenu/DropdownMenu\";\nimport { IconButton } from \"../IconButton/IconButton\";\nimport { AddIcon } from \"../Icons/AddIcon\";\nimport { ArrowUpIcon } from \"../Icons/ArrowUpIcon\";\nimport { ChevronDownIcon } from \"../Icons/ChevronDownIcon\";\nimport { CloseIcon } from \"../Icons/CloseIcon\";\nimport { TickIcon } from \"../Icons/TickIcon\";\n\n/** A single image thumbnail in the built-in attachment strip. */\nexport interface ChatInputAttachmentItem {\n  /** Stable id passed to {@link ChatInputProps.onAttachmentRemove} and used as React `key`. */\n  id: string;\n  /** Image URL for the thumbnail. */\n  src: string;\n  /** Optional value passed to the remove control `aria-label`. */\n  ariaLabel?: string;\n}\n\n/** A single option for the inline model/dropdown selector. */\nexport interface ChatInputSelectOption {\n  /** Unique value for this option. */\n  value: string;\n  /** Short label shown on the collapsed trigger button (e.g. \"Sonnet 4.6\"). */\n  label: string;\n  /**\n   * Optional longer title shown on the option's row inside the open menu/sheet\n   * (e.g. \"Claude Sonnet 4.6\"). Falls back to {@link label} when omitted.\n   */\n  menuLabel?: string;\n  /** Optional secondary text shown below the label in the dropdown menu. */\n  description?: string;\n  /** Optional icon rendered to the left of the label. */\n  icon?: React.ReactNode;\n}\n\n/**\n * Props for {@link ChatInput}. Standard textarea HTML attributes are forwarded to the inner\n * `<textarea>` except `className` (applied to the outer container), `rows` (use `minRows`), and\n * `onSubmit` (replaced by the chat message submit callback).\n */\nexport interface ChatInputProps\n  extends Omit<\n    React.TextareaHTMLAttributes<HTMLTextAreaElement>,\n    \"className\" | \"rows\" | \"onSubmit\"\n  > {\n  /** Minimum number of visible rows. @default 1 */\n  minRows?: number;\n  /** Maximum number of visible rows before scrolling. @default 6 */\n  maxRows?: number;\n  /** Whether a submission is in progress (disables submit, shows visual feedback). @default false */\n  loading?: boolean;\n  /**\n   * Callback fired when the user submits (clicks the send button or presses Enter without Shift).\n   * Receives the current trimmed text value.\n   */\n  onSubmit?: (value: string) => void;\n  /**\n   * When `true`, renders an \"attach file\" button in the bottom-left toolbar.\n   * @default false\n   */\n  showFileButton?: boolean;\n  /** Callback fired when the attach-file button is clicked. Only relevant when `showFileButton` is `true`. */\n  onFileClick?: () => void;\n  /** Accessible label for the attach-file button. @default \"Attach file\" */\n  fileButtonAriaLabel?: string;\n  /** Accessible label for the submit button. @default \"Send message\" */\n  submitAriaLabel?: string;\n  /** Icon element for the submit button. @default `<ArrowUpIcon />` */\n  submitIcon?: React.ReactNode;\n  /**\n   * Optional content rendered in the bottom-right toolbar, to the left of the submit button.\n   * When provided, takes precedence over the built-in `selectOptions` dropdown.\n   */\n  toolbarRight?: React.ReactNode;\n  /**\n   * Options for the built-in inline dropdown selector (e.g. model picker).\n   * Ignored when `toolbarRight` is provided.\n   */\n  selectOptions?: ChatInputSelectOption[];\n  /**\n   * How the built-in selector presents its options:\n   * - `\"menu\"` (default) — a dropdown anchored to the trigger, for pointer/desktop.\n   * - `\"sheet\"` — a bottom sheet, 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. `selectVariant={isDesktop ? \"menu\" : \"sheet\"}`.\n   * @default \"menu\"\n   */\n  selectVariant?: \"menu\" | \"sheet\";\n  /**\n   * Title shown at the top of the `\"sheet\"` variant of the built-in selector\n   * (e.g. \"Switch AI Model\"). @default \"Select an option\"\n   */\n  selectMenuTitle?: string;\n  /** Currently selected value for the built-in dropdown. Should match one of `selectOptions[].value`. */\n  selectValue?: string;\n  /** When `true`, disables only the built-in dropdown selector. @default false */\n  selectDisabled?: boolean;\n  /** Callback fired when the user picks a different dropdown option. */\n  onSelectChange?: (value: string) => void;\n  /**\n   * Image attachments shown in the built-in thumbnail strip. Ignored when {@link ChatInputProps.attachmentPreviews}\n   * is provided (including `null`).\n   */\n  attachments?: ChatInputAttachmentItem[];\n  /**\n   * Called when the user removes a built-in thumbnail. The remove button is disabled when this is\n   * omitted or the input is {@link ChatInputProps.disabled}.\n   */\n  onAttachmentRemove?: (id: string) => void;\n  /**\n   * Replaces the built-in attachment strip entirely. When set to any value other than `undefined`\n   * (including `null` or `[]`), {@link ChatInputProps.attachments} is ignored.\n   */\n  attachmentPreviews?: React.ReactNode;\n  /** Additional className applied to the outermost container. */\n  className?: string;\n}\n\nconst LINE_HEIGHT = 18;\nconst TEXTAREA_PY = 12;\n\nfunction calculateHeight(rows: number): number {\n  return LINE_HEIGHT * rows + TEXTAREA_PY * 2;\n}\n\ninterface ChatInputDefaultAttachmentThumbnailsProps {\n  attachments: ChatInputAttachmentItem[];\n  onAttachmentRemove?: (id: string) => void;\n  disabled?: boolean;\n}\n\nfunction ChatInputDefaultAttachmentThumbnails({\n  attachments,\n  onAttachmentRemove,\n  disabled = false,\n}: ChatInputDefaultAttachmentThumbnailsProps) {\n  return attachments.map((item) => (\n    <div\n      key={item.id}\n      className=\"relative size-16 shrink-0 overflow-hidden rounded-sm border border-neutral-200 bg-background-secondary\"\n    >\n      <img src={item.src} alt=\"\" className=\"size-full object-cover\" />\n      <IconButton\n        variant=\"tertiary\"\n        size=\"24\"\n        aria-label={item.ariaLabel ? `Remove ${item.ariaLabel}` : \"Remove attachment\"}\n        icon={<CloseIcon className=\"!size-3\" />}\n        disabled={disabled || !onAttachmentRemove}\n        onClick={() => onAttachmentRemove?.(item.id)}\n        className=\"absolute top-0.5 right-0.5 size-5 bg-neutral-900/40 p-1 text-white hover:bg-neutral-900/55\"\n      />\n    </div>\n  ));\n}\n\n/**\n * A chat-style multi-line input with an integrated toolbar containing an\n * optional file-attach button, optional right-side controls (e.g. a model\n * selector), and a submit button — all inside a single bordered container.\n *\n * Designed to behave like modern AI chat inputs: auto-grows with content,\n * submits on Enter (Shift+Enter for newlines), and keeps controls inline.\n *\n * @example\n * ```tsx\n * <ChatInput\n *   placeholder=\"Type a message...\"\n *   onSubmit={(text) => send(text)}\n * />\n * ```\n *\n * @example\n * ```tsx\n * <ChatInput\n *   placeholder=\"Ask the agent...\"\n *   showFileButton\n *   onFileClick={() => openFilePicker()}\n *   selectOptions={[\n *     { value: \"fanvue-ai\", label: \"Fanvue AI\", icon: <AIIcon className=\"size-4\" /> },\n *     { value: \"example\", label: \"Example\", icon: <BulbIcon className=\"size-4\" /> },\n *   ]}\n *   selectValue=\"fanvue-ai\"\n *   onSelectChange={(v) => setModel(v)}\n *   onSubmit={(text) => send(text)}\n * />\n * ```\n *\n * @example\n * ```tsx\n * <ChatInput\n *   showFileButton\n *   onFileClick={() => openPicker()}\n *   attachments={files}\n *   onAttachmentRemove={(id) => setFiles((prev) => prev.filter((f) => f.id !== id))}\n * />\n * ```\n *\n * @example\n * ```tsx\n * <ChatInput\n *   showFileButton\n *   onFileClick={() => openPicker()}\n *   attachmentPreviews={<CustomVideoStrip items={items} />}\n * />\n * ```\n */\nexport const ChatInput = React.forwardRef<HTMLTextAreaElement, ChatInputProps>(\n  (\n    {\n      className,\n      minRows = 1,\n      maxRows = 6,\n      disabled = false,\n      loading = false,\n      value,\n      defaultValue,\n      placeholder,\n      maxLength,\n      \"aria-label\": ariaLabel,\n      onChange,\n      onKeyDown,\n      onSubmit,\n      showFileButton = false,\n      onFileClick,\n      fileButtonAriaLabel = \"Attach file\",\n      submitAriaLabel = \"Send message\",\n      submitIcon,\n      toolbarRight,\n      selectOptions,\n      selectVariant = \"menu\",\n      selectMenuTitle,\n      selectValue,\n      selectDisabled = false,\n      onSelectChange,\n      attachments,\n      onAttachmentRemove,\n      attachmentPreviews,\n      style,\n      ...textareaProps\n    },\n    ref,\n  ) => {\n    const internalRef = React.useRef<HTMLTextAreaElement>(null);\n    const [internalValue, setInternalValue] = React.useState(defaultValue ?? \"\");\n    const resolvedValue = value !== undefined ? value : internalValue;\n    const isControlled = value !== undefined;\n\n    const mergedRef = React.useCallback(\n      (node: HTMLTextAreaElement | null) => {\n        (internalRef as React.MutableRefObject<HTMLTextAreaElement | null>).current = node;\n        if (typeof ref === \"function\") {\n          ref(node);\n        } else if (ref) {\n          (ref as React.MutableRefObject<HTMLTextAreaElement | null>).current = node;\n        }\n      },\n      [ref],\n    );\n\n    const adjustHeight = React.useCallback(() => {\n      const textarea = internalRef.current;\n      if (!textarea) return;\n\n      const minHeight = calculateHeight(minRows);\n      const maxHeight = calculateHeight(maxRows);\n\n      textarea.style.height = `${minHeight}px`;\n      const desired = Math.min(Math.max(textarea.scrollHeight, minHeight), maxHeight);\n      textarea.style.height = `${desired}px`;\n    }, [minRows, maxRows]);\n\n    React.useEffect(() => {\n      adjustHeight();\n    }, [adjustHeight]);\n\n    const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n      if (!isControlled) {\n        setInternalValue(e.target.value);\n      }\n      onChange?.(e);\n    };\n\n    const canSubmit = !!String(resolvedValue).trim() && !disabled && !loading;\n\n    const handleSubmit = () => {\n      const text = String(resolvedValue).trim();\n      if (!text || !canSubmit) return;\n      onSubmit?.(text);\n      if (!isControlled) {\n        setInternalValue(\"\");\n      }\n    };\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {\n      if (e.key === \"Enter\" && !e.shiftKey) {\n        e.preventDefault();\n        handleSubmit();\n      }\n      onKeyDown?.(e);\n    };\n\n    const minHeight = calculateHeight(minRows);\n    const maxHeight = calculateHeight(maxRows);\n\n    const useCustomAttachmentPreviews = attachmentPreviews !== undefined;\n    const customAttachmentStrip = useCustomAttachmentPreviews ? attachmentPreviews : null;\n    const defaultAttachmentStrip =\n      !useCustomAttachmentPreviews && !!attachments?.length ? (\n        <ChatInputDefaultAttachmentThumbnails\n          attachments={attachments ?? []}\n          disabled={disabled}\n          onAttachmentRemove={onAttachmentRemove}\n        />\n      ) : null;\n    const resolvedAttachmentStrip = customAttachmentStrip ?? defaultAttachmentStrip;\n    const hasAttachmentStrip = resolvedAttachmentStrip != null;\n\n    const selectedOption =\n      selectOptions?.find((o) => o.value === selectValue) ?? selectOptions?.[0];\n    const resolvedToolbarRight =\n      toolbarRight ??\n      (selectOptions && selectOptions.length > 0 ? (\n        <InlineSelect\n          options={selectOptions}\n          value={selectValue}\n          onChange={onSelectChange}\n          disabled={disabled || selectDisabled}\n          selectedOption={selectedOption}\n          variant={selectVariant}\n          menuTitle={selectMenuTitle}\n        />\n      ) : null);\n\n    return (\n      <div\n        className={cn(\n          \"relative flex flex-col gap-6 rounded-lg border border-border-primary bg-surface-primary\",\n          \"has-focus-visible:outline-none\",\n          \"motion-safe:transition-colors\",\n          disabled && \"opacity-50\",\n          className,\n        )}\n      >\n        <div className=\"flex flex-col\">\n          {hasAttachmentStrip ? (\n            <div className=\"flex gap-2 overflow-x-auto px-4 pt-4 pb-2 [scrollbar-width:thin]\">\n              {resolvedAttachmentStrip}\n            </div>\n          ) : null}\n          <textarea\n            {...textareaProps}\n            ref={mergedRef}\n            value={isControlled ? value : internalValue}\n            placeholder={placeholder}\n            maxLength={maxLength}\n            disabled={disabled}\n            aria-label={ariaLabel ?? placeholder}\n            onChange={handleChange}\n            onKeyDown={handleKeyDown}\n            rows={minRows}\n            className={cn(\n              \"w-full resize-none bg-transparent px-4\",\n              hasAttachmentStrip ? \"pt-0\" : \"pt-4\",\n              \"typography-body-small-14px-regular text-content-primary\",\n              \"placeholder:text-content-tertiary\",\n              \"focus:outline-none disabled:cursor-not-allowed\",\n              \"overflow-y-auto\",\n            )}\n            style={{\n              minHeight: `${minHeight}px`,\n              maxHeight: `${maxHeight}px`,\n              ...style,\n            }}\n          />\n        </div>\n\n        <div className=\"flex items-center justify-between gap-2 px-4 pb-4\">\n          <div className=\"flex items-center gap-1\">\n            {showFileButton && (\n              <IconButton\n                variant=\"tertiary\"\n                size=\"32\"\n                icon={<AddIcon />}\n                aria-label={fileButtonAriaLabel}\n                onClick={onFileClick}\n                disabled={disabled}\n                className=\"max-sm:-ml-2 sm:border sm:border-border-primary\"\n              />\n            )}\n          </div>\n\n          <div className=\"flex items-center gap-1\">\n            {resolvedToolbarRight}\n            <IconButton\n              variant=\"primary\"\n              size=\"32\"\n              icon={submitIcon ?? <ArrowUpIcon />}\n              aria-label={submitAriaLabel}\n              onClick={handleSubmit}\n              disabled={!canSubmit}\n              className=\"disabled:bg-surface-secondary disabled:text-icons-primary disabled:opacity-100\"\n            />\n          </div>\n        </div>\n      </div>\n    );\n  },\n);\n\nChatInput.displayName = \"ChatInput\";\n\ninterface InlineSelectProps {\n  options: ChatInputSelectOption[];\n  value?: string;\n  onChange?: (value: string) => void;\n  disabled?: boolean;\n  selectedOption?: ChatInputSelectOption;\n  /** Presentation: anchored dropdown (`\"menu\"`) or bottom sheet (`\"sheet\"`). */\n  variant: \"menu\" | \"sheet\";\n  /** Title for the bottom-sheet header. */\n  menuTitle?: string;\n}\n\ninterface SelectTriggerButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Whether the menu/sheet is open (drives chevron rotation + active background). */\n  open: boolean;\n  selectedOption?: ChatInputSelectOption;\n  /** Label shown when no option is selected. */\n  fallbackLabel?: string;\n}\n\n/**\n * The collapsed pill trigger (icon + short label + chevron). Shared by the\n * desktop menu and mobile sheet; spreads Radix-injected trigger props via\n * `asChild`.\n */\nconst SelectTriggerButton = React.forwardRef<HTMLButtonElement, SelectTriggerButtonProps>(\n  ({ open, selectedOption, fallbackLabel, className, ...props }, ref) => (\n    <button\n      ref={ref}\n      type=\"button\"\n      aria-label=\"Select model\"\n      className={cn(\n        \"typography-description-12px-semibold text-content-primary\",\n        \"flex items-center gap-1 rounded-md px-2 py-2\",\n        \"hover:bg-neutral-alphas-50 focus-visible:shadow-focus-ring focus-visible:outline-none\",\n        \"disabled:cursor-not-allowed disabled:opacity-50\",\n        \"motion-safe:transition-colors\",\n        open && \"bg-neutral-alphas-50\",\n        className,\n      )}\n      {...props}\n    >\n      {selectedOption?.icon && (\n        <span className=\"flex shrink-0 items-center [&>svg]:size-4\">{selectedOption.icon}</span>\n      )}\n      {selectedOption?.label ?? fallbackLabel ?? \"Select\"}\n      <ChevronDownIcon\n        className={cn(\"size-4 motion-safe:transition-transform\", open && \"rotate-180\")}\n      />\n    </button>\n  ),\n);\nSelectTriggerButton.displayName = \"SelectTriggerButton\";\n\n/** The green tick shown on the selected option (matches DropDown V2). */\nfunction SelectedTick() {\n  return <TickIcon size={16} className=\"text-success-negative-content\" aria-hidden=\"true\" />;\n}\n\n/**\n * Inline model/option selector for the ChatInput toolbar. Renders the\n * design-system dropdown (DropDown V2) on desktop and a bottom sheet on mobile.\n */\nfunction InlineSelect({\n  options,\n  value,\n  onChange,\n  disabled,\n  selectedOption,\n  variant,\n  menuTitle,\n}: InlineSelectProps) {\n  const [open, setOpen] = React.useState(false);\n  const fallbackLabel = options[0]?.label;\n\n  // Never allow the menu/sheet to open while disabled, regardless of how the\n  // open request originates (click, keyboard, programmatic).\n  const handleOpenChange = (next: boolean) => {\n    if (disabled && next) return;\n    setOpen(next);\n  };\n\n  const trigger = (\n    <SelectTriggerButton\n      open={open}\n      selectedOption={selectedOption}\n      fallbackLabel={fallbackLabel}\n      disabled={disabled}\n    />\n  );\n\n  if (variant === \"sheet\") {\n    return (\n      <Drawer open={open} onOpenChange={handleOpenChange}>\n        <DrawerTrigger asChild>{trigger}</DrawerTrigger>\n        <DrawerContent position=\"bottom\" variant=\"sheet\">\n          <DrawerHeader>\n            <DrawerTitle className=\"typography-header-heading-xs\">\n              {menuTitle ?? \"Select an option\"}\n            </DrawerTitle>\n          </DrawerHeader>\n          {/* Mirrors DropdownMenuItem's two-line layout, which can't be reused\n              here because it requires a DropdownMenu (Radix Menu) context. */}\n          <div className=\"flex flex-col gap-1 overflow-y-auto px-4 pb-4\" role=\"listbox\">\n            {options.map((option) => {\n              const isSelected = option.value === value;\n              return (\n                <button\n                  key={option.value}\n                  type=\"button\"\n                  role=\"option\"\n                  aria-selected={isSelected}\n                  onClick={() => {\n                    onChange?.(option.value);\n                    setOpen(false);\n                  }}\n                  className={cn(\n                    \"flex w-full items-start gap-2 rounded-sm px-3 py-2 text-left outline-none\",\n                    \"focus-visible:shadow-focus-ring\",\n                    isSelected\n                      ? \"typography-body-default-16px-semibold bg-buttons-primary-default text-content-primary-inverted\"\n                      : \"typography-body-default-16px-regular text-content-primary hover:bg-neutral-alphas-50\",\n                  )}\n                >\n                  {option.icon && (\n                    <span className=\"flex shrink-0 items-center pt-1 [&>svg]:size-4\">\n                      {option.icon}\n                    </span>\n                  )}\n                  <span className=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n                    <span className=\"truncate\">{option.menuLabel ?? option.label}</span>\n                    {option.description && (\n                      <span\n                        className={cn(\n                          \"typography-body-small-14px-regular truncate\",\n                          isSelected ? \"text-content-primary-inverted\" : \"text-content-secondary\",\n                        )}\n                      >\n                        {option.description}\n                      </span>\n                    )}\n                  </span>\n                  {isSelected && (\n                    <span className=\"flex shrink-0 items-center pt-1\">\n                      <SelectedTick />\n                    </span>\n                  )}\n                </button>\n              );\n            })}\n          </div>\n        </DrawerContent>\n      </Drawer>\n    );\n  }\n\n  return (\n    <DropdownMenu open={open} onOpenChange={handleOpenChange}>\n      <DropdownMenuTrigger asChild>{trigger}</DropdownMenuTrigger>\n      <DropdownMenuContent side=\"top\" align=\"end\" className=\"min-w-[244px]\">\n        {options.map((option) => {\n          const isSelected = option.value === value;\n          return (\n            <DropdownMenuItem\n              key={option.value}\n              size=\"40\"\n              selected={isSelected}\n              description={option.description}\n              leadingIcon={\n                option.icon ? (\n                  <span className=\"flex size-4 items-center [&>svg]:size-4\">{option.icon}</span>\n                ) : undefined\n              }\n              trailingIcon={isSelected ? <SelectedTick /> : undefined}\n              onSelect={() => onChange?.(option.value)}\n            >\n              {option.menuLabel ?? option.label}\n            </DropdownMenuItem>\n          );\n        })}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n"],"names":["minHeight","maxHeight"],"mappings":"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"}

package/dist/components/Drawer/Drawer.mjs

@@ -6,6 +6,7 @@ import { cn } from "../../utils/cn.mjs";
 import { useSuppressClickAfterDrag } from "../../utils/useSuppressClickAfterDrag.mjs";
 import { IconButton } from "../IconButton/IconButton.mjs";
 import { CloseIcon } from "../Icons/CloseIcon.mjs";
+const SHEET_CLASSES = "rounded-t-xl border border-modal-stroke bg-modal-background shadow-blur-menu backdrop-blur-[4px]";
 const DrawerContext = React.createContext({
   overlay: true
 });
@@ -45,6 +46,7 @@ const DrawerContent = React.forwardRef(
     className,
     position = "right",
     size = "sm",
+    variant = "panel",
     overlay: overlayProp,
     overlayProps,
     style,
@@ -82,6 +84,7 @@ const DrawerContent = React.forwardRef(
             "data-[state=open]:duration-200 data-[state=open]:ease-out",
             SLIDE_CLASSES[position],
             sizeClass,
+            variant === "sheet" && SHEET_CLASSES,
             className
           ),
           ...props,
@@ -93,15 +96,15 @@ const DrawerContent = React.forwardRef(
 );
 DrawerContent.displayName = "DrawerContent";
 const DrawerHeader = React.forwardRef(
-  ({ className, showClose = true, closeLabel = "Close drawer", children, ...props }, ref) => /* @__PURE__ */ jsxs("div", { ref, className: cn("flex items-start gap-2 p-4", className), ...props, children: [
+  ({ className, showClose = true, closeLabel = "Close drawer", children, ...props }, ref) => /* @__PURE__ */ jsxs("div", { ref, className: cn("flex items-center gap-2 p-4", className), ...props, children: [
     /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 flex-col gap-1.5", children }),
     showClose && /* @__PURE__ */ jsx(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx(
       IconButton,
       {
         icon: /* @__PURE__ */ jsx(CloseIcon, {}),
         "aria-label": closeLabel,
-        variant: "tertiary",
-        size: "24",
+        variant: "secondary",
+        size: "32",
         className: "shrink-0"
       }
     ) })

package/dist/components/Drawer/Drawer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.mjs","sources":["../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { useSuppressClickAfterDrag } from \"../../utils/useSuppressClickAfterDrag\";\nimport { IconButton } from \"../IconButton/IconButton\";\nimport { CloseIcon } from \"../Icons/CloseIcon\";\n\n/** The side from which the drawer slides in. */\nexport type DrawerPosition = \"left\" | \"right\" | \"top\" | \"bottom\";\n\n/** Size presets for the drawer panel. Maps to max-width (left/right) or max-height (top/bottom). */\nexport type DrawerSize = \"sm\" | \"md\" | \"lg\" | \"full\";\n\n/**\n * Props for the {@link Drawer} root component.\n *\n * Inherits `open`, `onOpenChange`, and `defaultOpen` from Radix Dialog.Root.\n *\n * The Radix `modal` prop (default `true`) can also be passed to create a\n * non-modal drawer — useful for persistent side navigation that does not\n * block interaction with the rest of the page.\n *\n * **`overlay` behaviour:** When `overlay` is `false`, the component\n * automatically sets `modal={false}` on the underlying Radix Dialog.Root.\n * A modal dialog without a visible overlay is confusing because focus is\n * still trapped and scroll is blocked even though the page appears\n * interactive. Passing `modal={true}` explicitly will override this.\n */\nexport interface DrawerProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Root> {\n  /**\n   * Whether the default {@link DrawerOverlay} is rendered.\n   * When `false`, `modal` is automatically set to `false` as well\n   * (unless explicitly overridden) so focus-trap and scroll-lock are disabled.\n   * @default true\n   */\n  overlay?: boolean;\n}\n\nconst DrawerContext = React.createContext<{ overlay: boolean }>({\n  overlay: true,\n});\n\n/**\n * Root component that manages open/close state for a drawer.\n * Wraps Radix Dialog.Root.\n *\n * @example\n * ```tsx\n * <Drawer>\n *   <DrawerTrigger>Open</DrawerTrigger>\n *   <DrawerContent position=\"right\">\n *     <DrawerHeader>\n *       <DrawerTitle>Settings</DrawerTitle>\n *       <DrawerDescription>Adjust your preferences.</DrawerDescription>\n *     </DrawerHeader>\n *     <p>Content goes here.</p>\n *     <DrawerFooter>\n *       <DrawerClose>Done</DrawerClose>\n *     </DrawerFooter>\n *   </DrawerContent>\n * </Drawer>\n * ```\n */\nexport function Drawer({ overlay = true, modal, children, ...props }: DrawerProps) {\n  const resolvedModal = modal ?? (overlay ? undefined : false);\n  return (\n    <DrawerContext.Provider value={{ overlay }}>\n      <DialogPrimitive.Root modal={resolvedModal} {...props}>\n        {children}\n      </DialogPrimitive.Root>\n    </DrawerContext.Provider>\n  );\n}\nDrawer.displayName = \"Drawer\";\n\n/** Props for the {@link DrawerTrigger} component. */\nexport type DrawerTriggerProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Trigger>;\n\n/**\n * The element that opens the drawer when clicked.\n *\n * On touch / pen, a press-and-release that crosses a small movement threshold\n * is treated as a drag and the resulting synthetic click is suppressed —\n * defends against Android Chrome opening the drawer on a scroll-drag-end.\n */\nexport const DrawerTrigger = React.forwardRef<\n  React.ComponentRef<typeof DialogPrimitive.Trigger>,\n  DrawerTriggerProps\n>((props, ref) => <DialogPrimitive.Trigger ref={ref} {...useSuppressClickAfterDrag(props)} />);\nDrawerTrigger.displayName = \"DrawerTrigger\";\n\n/** Props for the {@link DrawerClose} component. */\nexport type DrawerCloseProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Close>;\n\n/** Closes the drawer when clicked. Can be placed anywhere inside the drawer. */\nexport const DrawerClose = DialogPrimitive.Close;\nDrawerClose.displayName = \"DrawerClose\";\n\n/** Props for the {@link DrawerOverlay} component. */\nexport interface DrawerOverlayProps\n  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay> {}\n\n/**\n * A translucent backdrop rendered behind the drawer content.\n * Clicking the overlay closes the drawer by default.\n */\nexport const DrawerOverlay = React.forwardRef<\n  React.ComponentRef<typeof DialogPrimitive.Overlay>,\n  DrawerOverlayProps\n>(({ className, style, ...props }, ref) => (\n  <DialogPrimitive.Overlay\n    ref={ref}\n    style={{ zIndex: \"var(--fanvue-ui-portal-z-index, 50)\", ...style }}\n    className={cn(\n      \"fixed inset-0 bg-background-overlay-default\",\n      \"data-[state=closed]:animate-out data-[state=open]:animate-in\",\n      \"data-[state=closed]:fade-out-0 data-[state=closed]:duration-150 data-[state=closed]:ease-in\",\n      \"data-[state=open]:fade-in-0 data-[state=open]:duration-200 data-[state=open]:ease-out\",\n      className,\n    )}\n    {...props}\n  />\n));\nDrawerOverlay.displayName = \"DrawerOverlay\";\n\n/**\n * Slide-in animation classes keyed by position.\n * Uses Tailwind animate utilities (animate-in / animate-out).\n */\nconst SLIDE_CLASSES: Record<DrawerPosition, string> = {\n  right:\n    \"inset-y-0 right-0 h-full w-2/3 data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right\",\n  left: \"inset-y-0 left-0 h-full w-2/3 data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left\",\n  top: \"inset-x-0 top-0 w-full data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top\",\n  bottom:\n    \"inset-x-0 bottom-0 w-full rounded-t-xs data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom\",\n};\n\n/** Props for the {@link DrawerContent} component. */\nexport interface DrawerContentProps\n  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {\n  /**\n   * The edge from which the drawer slides in.\n   *\n   * Named `position` (rather than `side`) to avoid confusion with the CSS\n   * `side` concept used by Radix Popover/Tooltip and to better convey the\n   * spatial relationship of the drawer to the viewport.\n   *\n   * @default \"right\"\n   */\n  position?: DrawerPosition;\n  /**\n   * Controls the maximum extent of the drawer panel.\n   * For left/right drawers this sets `max-width`; for top/bottom it sets `max-height`.\n   * @default \"sm\"\n   */\n  size?: DrawerSize;\n  /**\n   * Whether to render the default {@link DrawerOverlay} behind the content.\n   * Set to `false` to provide your own overlay or omit it entirely.\n   *\n   * Prefer setting `overlay` on the {@link Drawer} root instead so that\n   * `modal` is also adjusted automatically.\n   *\n   * @default true\n   */\n  overlay?: boolean;\n  /** Props forwarded to the default {@link DrawerOverlay} when `overlay` is `true`. */\n  overlayProps?: DrawerOverlayProps;\n}\n\n/**\n * The panel that slides in from the chosen edge. Renders inside a portal with\n * an overlay backdrop by default.\n *\n * Includes focus-trap, `aria-describedby`, and Escape-to-close from Radix Dialog.\n */\nexport const DrawerContent = React.forwardRef<\n  React.ComponentRef<typeof DialogPrimitive.Content>,\n  DrawerContentProps\n>(\n  (\n    {\n      className,\n      position = \"right\",\n      size = \"sm\",\n      overlay: overlayProp,\n      overlayProps,\n      style,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const ctx = React.useContext(DrawerContext);\n    const overlay = overlayProp ?? ctx.overlay;\n    const isHorizontal = position === \"left\" || position === \"right\";\n    const sizeClass = isHorizontal\n      ? (\n          {\n            sm: \"max-w-sm\",\n            md: \"max-w-md\",\n            lg: \"max-w-lg\",\n            full: \"max-w-full\",\n          } as const\n        )[size]\n      : (\n          {\n            sm: \"max-h-[24rem]\",\n            md: \"max-h-[28rem]\",\n            lg: \"max-h-[32rem]\",\n            full: \"max-h-full\",\n          } as const\n        )[size];\n\n    return (\n      <DialogPrimitive.Portal>\n        {overlay && <DrawerOverlay {...overlayProps} />}\n        <DialogPrimitive.Content\n          ref={ref}\n          style={{\n            zIndex: \"calc(var(--fanvue-ui-portal-z-index, 50) + 1)\",\n            ...style,\n          }}\n          className={cn(\n            \"fixed flex flex-col bg-surface-secondary shadow-lg outline-none backdrop-blur-lg\",\n            \"data-[state=closed]:animate-out data-[state=open]:animate-in\",\n            \"data-[state=closed]:duration-150 data-[state=closed]:ease-in\",\n            \"data-[state=open]:duration-200 data-[state=open]:ease-out\",\n            SLIDE_CLASSES[position],\n            sizeClass,\n            className,\n          )}\n          {...props}\n        >\n          {children}\n        </DialogPrimitive.Content>\n      </DialogPrimitive.Portal>\n    );\n  },\n);\nDrawerContent.displayName = \"DrawerContent\";\n\n/** Props for the {@link DrawerHeader} component. */\nexport interface DrawerHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Whether to show a built-in close (X) button. @default true */\n  showClose?: boolean;\n  /** Accessible label for the close button. @default \"Close drawer\" */\n  closeLabel?: string;\n}\n\n/**\n * A semantic header area for the drawer, typically containing a title and description.\n * Renders a built-in close button by default.\n */\nexport const DrawerHeader = React.forwardRef<HTMLDivElement, DrawerHeaderProps>(\n  ({ className, showClose = true, closeLabel = \"Close drawer\", children, ...props }, ref) => (\n    <div ref={ref} className={cn(\"flex items-start gap-2 p-4\", className)} {...props}>\n      <div className=\"flex min-w-0 flex-1 flex-col gap-1.5\">{children}</div>\n      {showClose && (\n        <DialogPrimitive.Close asChild>\n          <IconButton\n            icon={<CloseIcon />}\n            aria-label={closeLabel}\n            variant=\"tertiary\"\n            size=\"24\"\n            className=\"shrink-0\"\n          />\n        </DialogPrimitive.Close>\n      )}\n    </div>\n  ),\n);\nDrawerHeader.displayName = \"DrawerHeader\";\n\n/** Props for the {@link DrawerFooter} component. */\nexport interface DrawerFooterProps extends React.HTMLAttributes<HTMLDivElement> {}\n\n/** A semantic footer area for the drawer, typically containing action buttons. */\nexport const DrawerFooter = React.forwardRef<HTMLDivElement, DrawerFooterProps>(\n  ({ className, ...props }, ref) => (\n    <div ref={ref} className={cn(\"flex flex-col gap-2 p-4\", className)} {...props} />\n  ),\n);\nDrawerFooter.displayName = \"DrawerFooter\";\n\n/** Props for the {@link DrawerTitle} component. */\nexport interface DrawerTitleProps\n  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title> {}\n\n/** An accessible title for the drawer. Required for screen readers. */\nexport const DrawerTitle = React.forwardRef<\n  React.ComponentRef<typeof DialogPrimitive.Title>,\n  DrawerTitleProps\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Title\n    ref={ref}\n    className={cn(\"typography-body-default-16px-semibold truncate text-content-primary\", className)}\n    {...props}\n  />\n));\nDrawerTitle.displayName = \"DrawerTitle\";\n\n/** Props for the {@link DrawerDescription} component. */\nexport interface DrawerDescriptionProps\n  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description> {}\n\n/** An accessible description for the drawer, providing supplementary context. */\nexport const DrawerDescription = React.forwardRef<\n  React.ComponentRef<typeof DialogPrimitive.Description>,\n  DrawerDescriptionProps\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Description\n    ref={ref}\n    className={cn(\"typography-body-small-14px-regular text-content-secondary\", className)}\n    {...props}\n  />\n));\nDrawerDescription.displayName = \"DrawerDescription\";\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Drawer.mjs","sources":["../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { useSuppressClickAfterDrag } from \"../../utils/useSuppressClickAfterDrag\";\nimport { IconButton } from \"../IconButton/IconButton\";\nimport { CloseIcon } from \"../Icons/CloseIcon\";\n\n/** The side from which the drawer slides in. */\nexport type DrawerPosition = \"left\" | \"right\" | \"top\" | \"bottom\";\n\n/** Size presets for the drawer panel. Maps to max-width (left/right) or max-height (top/bottom). */\nexport type DrawerSize = \"sm\" | \"md\" | \"lg\" | \"full\";\n\n/**\n * Visual treatment of the drawer panel.\n *\n * - `\"panel\"` (default) — the standard edge-anchored surface.\n * - `\"sheet\"` — a bottom-sheet treatment matching the modal surface: large\n *   top-only radius (32px), modal background/stroke, and menu blur+shadow.\n *   Intended for `position=\"bottom\"`.\n */\nexport type DrawerVariant = \"panel\" | \"sheet\";\n\n/**\n * Shared surface classes for the `\"sheet\"` variant. Mirrors the mobile sheet\n * treatment used by {@link Dialog} so bottom sheets are visually consistent.\n */\nconst SHEET_CLASSES =\n  \"rounded-t-xl border border-modal-stroke bg-modal-background shadow-blur-menu backdrop-blur-[4px]\";\n\n/**\n * Props for the {@link Drawer} root component.\n *\n * Inherits `open`, `onOpenChange`, and `defaultOpen` from Radix Dialog.Root.\n *\n * The Radix `modal` prop (default `true`) can also be passed to create a\n * non-modal drawer — useful for persistent side navigation that does not\n * block interaction with the rest of the page.\n *\n * **`overlay` behaviour:** When `overlay` is `false`, the component\n * automatically sets `modal={false}` on the underlying Radix Dialog.Root.\n * A modal dialog without a visible overlay is confusing because focus is\n * still trapped and scroll is blocked even though the page appears\n * interactive. Passing `modal={true}` explicitly will override this.\n */\nexport interface DrawerProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Root> {\n  /**\n   * Whether the default {@link DrawerOverlay} is rendered.\n   * When `false`, `modal` is automatically set to `false` as well\n   * (unless explicitly overridden) so focus-trap and scroll-lock are disabled.\n   * @default true\n   */\n  overlay?: boolean;\n}\n\nconst DrawerContext = React.createContext<{ overlay: boolean }>({\n  overlay: true,\n});\n\n/**\n * Root component that manages open/close state for a drawer.\n * Wraps Radix Dialog.Root.\n *\n * @example\n * ```tsx\n * <Drawer>\n *   <DrawerTrigger>Open</DrawerTrigger>\n *   <DrawerContent position=\"right\">\n *     <DrawerHeader>\n *       <DrawerTitle>Settings</DrawerTitle>\n *       <DrawerDescription>Adjust your preferences.</DrawerDescription>\n *     </DrawerHeader>\n *     <p>Content goes here.</p>\n *     <DrawerFooter>\n *       <DrawerClose>Done</DrawerClose>\n *     </DrawerFooter>\n *   </DrawerContent>\n * </Drawer>\n * ```\n */\nexport function Drawer({ overlay = true, modal, children, ...props }: DrawerProps) {\n  const resolvedModal = modal ?? (overlay ? undefined : false);\n  return (\n    <DrawerContext.Provider value={{ overlay }}>\n      <DialogPrimitive.Root modal={resolvedModal} {...props}>\n        {children}\n      </DialogPrimitive.Root>\n    </DrawerContext.Provider>\n  );\n}\nDrawer.displayName = \"Drawer\";\n\n/** Props for the {@link DrawerTrigger} component. */\nexport type DrawerTriggerProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Trigger>;\n\n/**\n * The element that opens the drawer when clicked.\n *\n * On touch / pen, a press-and-release that crosses a small movement threshold\n * is treated as a drag and the resulting synthetic click is suppressed —\n * defends against Android Chrome opening the drawer on a scroll-drag-end.\n */\nexport const DrawerTrigger = React.forwardRef<\n  React.ComponentRef<typeof DialogPrimitive.Trigger>,\n  DrawerTriggerProps\n>((props, ref) => <DialogPrimitive.Trigger ref={ref} {...useSuppressClickAfterDrag(props)} />);\nDrawerTrigger.displayName = \"DrawerTrigger\";\n\n/** Props for the {@link DrawerClose} component. */\nexport type DrawerCloseProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Close>;\n\n/** Closes the drawer when clicked. Can be placed anywhere inside the drawer. */\nexport const DrawerClose = DialogPrimitive.Close;\nDrawerClose.displayName = \"DrawerClose\";\n\n/** Props for the {@link DrawerOverlay} component. */\nexport interface DrawerOverlayProps\n  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay> {}\n\n/**\n * A translucent backdrop rendered behind the drawer content.\n * Clicking the overlay closes the drawer by default.\n */\nexport const DrawerOverlay = React.forwardRef<\n  React.ComponentRef<typeof DialogPrimitive.Overlay>,\n  DrawerOverlayProps\n>(({ className, style, ...props }, ref) => (\n  <DialogPrimitive.Overlay\n    ref={ref}\n    style={{ zIndex: \"var(--fanvue-ui-portal-z-index, 50)\", ...style }}\n    className={cn(\n      \"fixed inset-0 bg-background-overlay-default\",\n      \"data-[state=closed]:animate-out data-[state=open]:animate-in\",\n      \"data-[state=closed]:fade-out-0 data-[state=closed]:duration-150 data-[state=closed]:ease-in\",\n      \"data-[state=open]:fade-in-0 data-[state=open]:duration-200 data-[state=open]:ease-out\",\n      className,\n    )}\n    {...props}\n  />\n));\nDrawerOverlay.displayName = \"DrawerOverlay\";\n\n/**\n * Slide-in animation classes keyed by position.\n * Uses Tailwind animate utilities (animate-in / animate-out).\n */\nconst SLIDE_CLASSES: Record<DrawerPosition, string> = {\n  right:\n    \"inset-y-0 right-0 h-full w-2/3 data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right\",\n  left: \"inset-y-0 left-0 h-full w-2/3 data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left\",\n  top: \"inset-x-0 top-0 w-full data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top\",\n  bottom:\n    \"inset-x-0 bottom-0 w-full rounded-t-xs data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom\",\n};\n\n/** Props for the {@link DrawerContent} component. */\nexport interface DrawerContentProps\n  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {\n  /**\n   * The edge from which the drawer slides in.\n   *\n   * Named `position` (rather than `side`) to avoid confusion with the CSS\n   * `side` concept used by Radix Popover/Tooltip and to better convey the\n   * spatial relationship of the drawer to the viewport.\n   *\n   * @default \"right\"\n   */\n  position?: DrawerPosition;\n  /**\n   * Controls the maximum extent of the drawer panel.\n   * For left/right drawers this sets `max-width`; for top/bottom it sets `max-height`.\n   * @default \"sm\"\n   */\n  size?: DrawerSize;\n  /**\n   * Visual treatment of the panel. Use `\"sheet\"` (with `position=\"bottom\"`) for\n   * a bottom sheet with the modal surface treatment. @default \"panel\"\n   */\n  variant?: DrawerVariant;\n  /**\n   * Whether to render the default {@link DrawerOverlay} behind the content.\n   * Set to `false` to provide your own overlay or omit it entirely.\n   *\n   * Prefer setting `overlay` on the {@link Drawer} root instead so that\n   * `modal` is also adjusted automatically.\n   *\n   * @default true\n   */\n  overlay?: boolean;\n  /** Props forwarded to the default {@link DrawerOverlay} when `overlay` is `true`. */\n  overlayProps?: DrawerOverlayProps;\n}\n\n/**\n * The panel that slides in from the chosen edge. Renders inside a portal with\n * an overlay backdrop by default.\n *\n * Includes focus-trap, `aria-describedby`, and Escape-to-close from Radix Dialog.\n */\nexport const DrawerContent = React.forwardRef<\n  React.ComponentRef<typeof DialogPrimitive.Content>,\n  DrawerContentProps\n>(\n  (\n    {\n      className,\n      position = \"right\",\n      size = \"sm\",\n      variant = \"panel\",\n      overlay: overlayProp,\n      overlayProps,\n      style,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const ctx = React.useContext(DrawerContext);\n    const overlay = overlayProp ?? ctx.overlay;\n    const isHorizontal = position === \"left\" || position === \"right\";\n    const sizeClass = isHorizontal\n      ? (\n          {\n            sm: \"max-w-sm\",\n            md: \"max-w-md\",\n            lg: \"max-w-lg\",\n            full: \"max-w-full\",\n          } as const\n        )[size]\n      : (\n          {\n            sm: \"max-h-[24rem]\",\n            md: \"max-h-[28rem]\",\n            lg: \"max-h-[32rem]\",\n            full: \"max-h-full\",\n          } as const\n        )[size];\n\n    return (\n      <DialogPrimitive.Portal>\n        {overlay && <DrawerOverlay {...overlayProps} />}\n        <DialogPrimitive.Content\n          ref={ref}\n          style={{\n            zIndex: \"calc(var(--fanvue-ui-portal-z-index, 50) + 1)\",\n            ...style,\n          }}\n          className={cn(\n            \"fixed flex flex-col bg-surface-secondary shadow-lg outline-none backdrop-blur-lg\",\n            \"data-[state=closed]:animate-out data-[state=open]:animate-in\",\n            \"data-[state=closed]:duration-150 data-[state=closed]:ease-in\",\n            \"data-[state=open]:duration-200 data-[state=open]:ease-out\",\n            SLIDE_CLASSES[position],\n            sizeClass,\n            variant === \"sheet\" && SHEET_CLASSES,\n            className,\n          )}\n          {...props}\n        >\n          {children}\n        </DialogPrimitive.Content>\n      </DialogPrimitive.Portal>\n    );\n  },\n);\nDrawerContent.displayName = \"DrawerContent\";\n\n/** Props for the {@link DrawerHeader} component. */\nexport interface DrawerHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Whether to show a built-in close (X) button. @default true */\n  showClose?: boolean;\n  /** Accessible label for the close button. @default \"Close drawer\" */\n  closeLabel?: string;\n}\n\n/**\n * A semantic header area for the drawer, typically containing a title and description.\n * Renders a built-in close button by default.\n */\nexport const DrawerHeader = React.forwardRef<HTMLDivElement, DrawerHeaderProps>(\n  ({ className, showClose = true, closeLabel = \"Close drawer\", children, ...props }, ref) => (\n    <div ref={ref} className={cn(\"flex items-center gap-2 p-4\", className)} {...props}>\n      <div className=\"flex min-w-0 flex-1 flex-col gap-1.5\">{children}</div>\n      {showClose && (\n        <DialogPrimitive.Close asChild>\n          <IconButton\n            icon={<CloseIcon />}\n            aria-label={closeLabel}\n            variant=\"secondary\"\n            size=\"32\"\n            className=\"shrink-0\"\n          />\n        </DialogPrimitive.Close>\n      )}\n    </div>\n  ),\n);\nDrawerHeader.displayName = \"DrawerHeader\";\n\n/** Props for the {@link DrawerFooter} component. */\nexport interface DrawerFooterProps extends React.HTMLAttributes<HTMLDivElement> {}\n\n/** A semantic footer area for the drawer, typically containing action buttons. */\nexport const DrawerFooter = React.forwardRef<HTMLDivElement, DrawerFooterProps>(\n  ({ className, ...props }, ref) => (\n    <div ref={ref} className={cn(\"flex flex-col gap-2 p-4\", className)} {...props} />\n  ),\n);\nDrawerFooter.displayName = \"DrawerFooter\";\n\n/** Props for the {@link DrawerTitle} component. */\nexport interface DrawerTitleProps\n  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title> {}\n\n/** An accessible title for the drawer. Required for screen readers. */\nexport const DrawerTitle = React.forwardRef<\n  React.ComponentRef<typeof DialogPrimitive.Title>,\n  DrawerTitleProps\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Title\n    ref={ref}\n    className={cn(\"typography-body-default-16px-semibold truncate text-content-primary\", className)}\n    {...props}\n  />\n));\nDrawerTitle.displayName = \"DrawerTitle\";\n\n/** Props for the {@link DrawerDescription} component. */\nexport interface DrawerDescriptionProps\n  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description> {}\n\n/** An accessible description for the drawer, providing supplementary context. */\nexport const DrawerDescription = React.forwardRef<\n  React.ComponentRef<typeof DialogPrimitive.Description>,\n  DrawerDescriptionProps\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Description\n    ref={ref}\n    className={cn(\"typography-body-small-14px-regular text-content-secondary\", className)}\n    {...props}\n  />\n));\nDrawerDescription.displayName = \"DrawerDescription\";\n"],"names":[],"mappings":"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"}

package/dist/components/DropdownMenu/DropdownMenu.mjs

@@ -155,6 +155,7 @@ const DropdownMenuItem = React.forwardRef(
     destructive,
     leadingIcon,
     trailingIcon,
+    description,
     selected,
     className,
     children,
@@ -162,8 +163,10 @@ const DropdownMenuItem = React.forwardRef(
     ...props
   }, ref) => {
     const normalizedSize = SIZE_NORMALIZED[size];
+    const hasDescription = description != null;
     const itemClassName = cn(
-      "flex w-full cursor-pointer items-center gap-2 rounded-xs px-3 outline-none",
+      "flex w-full cursor-pointer gap-2 rounded-xs px-3 outline-none",
+      hasDescription ? "items-start" : "items-center",
       ITEM_SIZE_CLASSES[normalizedSize],
       "data-[highlighted]:bg-neutral-alphas-50",
       "data-[disabled]:cursor-not-allowed data-[disabled]:text-content-disabled",
@@ -178,10 +181,23 @@ const DropdownMenuItem = React.forwardRef(
     if (asChild) {
       return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Item, { ref, asChild: true, className: itemClassName, ...props, children });
     }
+    const iconAlignClassName = hasDescription ? "flex shrink-0 items-center pt-1" : null;
     return /* @__PURE__ */ jsxs(DropdownMenuPrimitive.Item, { ref, className: itemClassName, ...props, children: [
-      leadingIcon,
-      /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children }),
-      trailingIcon
+      leadingIcon != null && (hasDescription ? /* @__PURE__ */ jsx("span", { className: iconAlignClassName, children: leadingIcon }) : leadingIcon),
+      hasDescription ? /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
+        /* @__PURE__ */ jsx("span", { className: "truncate", children }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "typography-body-small-14px-regular truncate",
+              selected ? "text-content-primary-inverted" : "text-content-secondary"
+            ),
+            children: description
+          }
+        )
+      ] }) : /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children }),
+      trailingIcon != null && (hasDescription ? /* @__PURE__ */ jsx("span", { className: iconAlignClassName, children: trailingIcon }) : trailingIcon)
     ] });
   }
 );

package/dist/components/DropdownMenu/DropdownMenu.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenu.mjs","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\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. */\n  leadingIcon?: React.ReactNode;\n  /** Icon (or other node) rendered after the label. */\n  trailingIcon?: 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 * // 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      trailingIcon,\n      selected,\n      className,\n      children,\n      asChild,\n      ...props\n    },\n    ref,\n  ) => {\n    const normalizedSize = SIZE_NORMALIZED[size];\n    const itemClassName = cn(\n      \"flex w-full cursor-pointer items-center gap-2 rounded-xs px-3 outline-none\",\n      ITEM_SIZE_CLASSES[normalizedSize],\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    return (\n      <DropdownMenuPrimitive.Item ref={ref} className={itemClassName} {...props}>\n        {leadingIcon}\n        <span className=\"min-w-0 flex-1 truncate\">{children}</span>\n        {trailingIcon}\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":[],"mappings":"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"}
+{"version":3,"file":"DropdownMenu.mjs","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\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. */\n  leadingIcon?: React.ReactNode;\n  /** Icon (or other node) rendered after the label. */\n  trailingIcon?: 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 * // 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      trailingIcon,\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 itemClassName = cn(\n      \"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      \"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    return (\n      <DropdownMenuPrimitive.Item ref={ref} className={itemClassName} {...props}>\n        {leadingIcon != null &&\n          (hasDescription ? (\n            <span className={iconAlignClassName!}>{leadingIcon}</span>\n          ) : (\n            leadingIcon\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        {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":[],"mappings":"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"}

package/dist/components/Icons/TickIcon.mjs

@@ -4,7 +4,9 @@ import * as React from "react";
 import { BaseIcon } from "./BaseIcon.mjs";
 const VARIANTS = {
   16: {
-    outlined: [{ d: "m3.333 8 3.334 3.333L13 5" }]
+    // `sw` must be set so BaseIcon strokes the checkmark; without it the path
+    // is filled into a solid wedge instead of a tick.
+    outlined: [{ d: "m3.333 8 3.334 3.333L13 5", sw: 1.333 }]
   },
   24: {
     outlined: [{ d: "m5 12 5 5 9.5-9.5", sw: 1.5 }]

package/dist/components/Icons/TickIcon.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TickIcon.mjs","sources":["../../../src/components/Icons/TickIcon.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: [{ d: \"m3.333 8 3.334 3.333L13 5\" }],\n  },\n  24: {\n    outlined: [{ d: \"m5 12 5 5 9.5-9.5\", sw: 1.5 }],\n  },\n  32: {\n    outlined: [{ d: \"m6.667 16 6.666 6.667L26 10\", sw: 2 }],\n  },\n};\n\n/** Props for {@link TickIcon}. See {@link BaseIconProps} for the shared shape. */\nexport type TickIconProps = BaseIconProps;\n\n/**\n * Tick icon. Renders at sizes 16, 24, or 32 px.\n *\n * @example\n * ```tsx\n * <TickIcon size={24} />\n * ```\n */\nexport const TickIcon = React.forwardRef<SVGSVGElement, TickIconProps>((props, ref) => (\n  <BaseIcon ref={ref} variants={VARIANTS} {...props} />\n));\n\nTickIcon.displayName = \"TickIcon\";\n"],"names":[],"mappings":";;;;AAIA,MAAM,WAAyB;AAAA,EAC7B,IAAI;AAAA,IACF,UAAU,CAAC,EAAE,GAAG,6BAA6B;AAAA,EAAA;AAAA,EAE/C,IAAI;AAAA,IACF,UAAU,CAAC,EAAE,GAAG,qBAAqB,IAAI,KAAK;AAAA,EAAA;AAAA,EAEhD,IAAI;AAAA,IACF,UAAU,CAAC,EAAE,GAAG,+BAA+B,IAAI,GAAG;AAAA,EAAA;AAE1D;AAaO,MAAM,WAAW,MAAM,WAAyC,CAAC,OAAO,QAC7E,oBAAC,UAAA,EAAS,KAAU,UAAU,UAAW,GAAG,OAAO,CACpD;AAED,SAAS,cAAc;"}
+{"version":3,"file":"TickIcon.mjs","sources":["../../../src/components/Icons/TickIcon.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { BaseIcon } from \"./BaseIcon\";\nimport type { BaseIconProps, IconVariants } from \"./types\";\n\nconst VARIANTS: IconVariants = {\n  16: {\n    // `sw` must be set so BaseIcon strokes the checkmark; without it the path\n    // is filled into a solid wedge instead of a tick.\n    outlined: [{ d: \"m3.333 8 3.334 3.333L13 5\", sw: 1.333 }],\n  },\n  24: {\n    outlined: [{ d: \"m5 12 5 5 9.5-9.5\", sw: 1.5 }],\n  },\n  32: {\n    outlined: [{ d: \"m6.667 16 6.666 6.667L26 10\", sw: 2 }],\n  },\n};\n\n/** Props for {@link TickIcon}. See {@link BaseIconProps} for the shared shape. */\nexport type TickIconProps = BaseIconProps;\n\n/**\n * Tick icon. Renders at sizes 16, 24, or 32 px.\n *\n * @example\n * ```tsx\n * <TickIcon size={24} />\n * ```\n */\nexport const TickIcon = React.forwardRef<SVGSVGElement, TickIconProps>((props, ref) => (\n  <BaseIcon ref={ref} variants={VARIANTS} {...props} />\n));\n\nTickIcon.displayName = \"TickIcon\";\n"],"names":[],"mappings":";;;;AAIA,MAAM,WAAyB;AAAA,EAC7B,IAAI;AAAA;AAAA;AAAA,IAGF,UAAU,CAAC,EAAE,GAAG,6BAA6B,IAAI,OAAO;AAAA,EAAA;AAAA,EAE1D,IAAI;AAAA,IACF,UAAU,CAAC,EAAE,GAAG,qBAAqB,IAAI,KAAK;AAAA,EAAA;AAAA,EAEhD,IAAI;AAAA,IACF,UAAU,CAAC,EAAE,GAAG,+BAA+B,IAAI,GAAG;AAAA,EAAA;AAE1D;AAaO,MAAM,WAAW,MAAM,WAAyC,CAAC,OAAO,QAC7E,oBAAC,UAAA,EAAS,KAAU,UAAU,UAAW,GAAG,OAAO,CACpD;AAED,SAAS,cAAc;"}