♻️ refactor: Button を React.forwardRef 対応にしてほしい（PopoverTrigger 等で asChild 合成するため）

[tianshen-gp]

背景

sparkle-design-internal の PopoverTriggerButton は、公開 Button が forwardRef 非対応のため Button asChild + PopoverPrimitive.Trigger の workaround を使っています（PR goodpatch/sparkle-design-internal#182）。

同様に Radix Trigger asChild と Sparkle Button を直接合成したい利用パターンが増える見込みです。

提案

Button を React.forwardRef<HTMLButtonElement, ButtonProps> でラップし、ref を DOM の <button> に渡せるようにしてください。

社内側の暫定対応

• PopoverTriggerButton で Button asChild + 内部 PopoverPrimitive.Trigger を維持
• 本 issue 対応後に workaround を削除できるよう TODO(sparkle-design#XXX) をコードに残します

関連

• goodpatch/sparkle-design-internal#182（Popover）
• sparkle-design#263（useMergeRefs 共通化・別件）

[tianshen-gp]

goodpatch/sparkle-design-internal#182（Popover）の PopoverTriggerButton workaround から参照します。コードに TODO(sparkle-design#270) を付与済みです。

[touyou]

補足: 実装方針は forwardRef ではなく ref-as-prop（React 19 流） を推奨

issue タイトルは「forwardRef 対応」となっていますが、実装方針として React.forwardRef を使うのではなく、ref を通常の prop として受け取る方式（ref-as-prop） を推奨します。

理由

• Button は既に function Button(props) { ... } 形式の React 19 流の書き方になっているため、ここだけ forwardRef を被せると本体実装と方針が逆行する
• shadcn/ui は 2024 年に forwardRef を全面廃止し、function Component({ ref, ...props }) の ref-as-prop パターンへ移行済み。Sparkle Design は shadcn 流派に乗っているので合わせるのが自然
• React 19 で関数コンポーネントが ref を通常 prop として受け取れるようになった機能を、せっかくなので素直に使う

具体的な変更イメージ

// Before
type NativeButtonProps = React.ComponentPropsWithoutRef<"button">;
export interface ButtonProps
  extends Omit<NativeButtonProps, "onClick" | "onKeyDown"> { ... }

function Button({ className, variant, ..., children, ...props }: ButtonProps) {
  const Comp = asChild ? SlotPrimitive.Slot : "button";
  return <Comp {...restProps}>...</Comp>;
}

// After
type NativeButtonProps = React.ComponentProps<"button">; // ref を含む
export interface ButtonProps
  extends Omit<NativeButtonProps, "onClick" | "onKeyDown"> { ... }

function Button({ className, variant, ..., ref, children, ...props }: ButtonProps) {
  const Comp = asChild ? SlotPrimitive.Slot : "button";
  return <Comp ref={ref} {...restProps}>...</Comp>;
}

前提条件

• @types/react を ^18 → ^19 にバンプする必要があります（react peerDep は既に ^18 || ^19 なので、type だけ更新すれば React 18 ランタイムでも使えます）
• 同じ流派になっていない他のコンポーネント（IconButton 等）も併せて見直すと整合が取りやすいです

内側（sparkle-design-internal）の対応

internal 側では現状 #182 で PopoverTriggerButton workaround を入れていますが、これは本 issue 対応リリース後に削除する想定です。internal 側は今あるフォームコントロール系 PR が一通りマージされたあと、sparkle-design アップデートに合わせて

• PopoverTriggerButton workaround の削除
• composeRefs / 自前 useMergeRefs の削除（♻️ refactor: useMergeRefs / コンテナフォーカスロジックを named export してほしい（Input系 で再利用するため） #263 対応の named export を import に置き換え）
• その他 sparkle-design アップデートに付随する調整

をまとめて全体調整 PR で対応する流れを想定しています。なので本 issue は急ぎではないですが、@types/react バンプの判断含めて中期で進めたい温度感です 🙏