@seed-design/react 2.3.0 → 2.4.0

package/src/components/AttachmentDisplay/AttachmentDisplayItem.tsx

@@ -4,7 +4,7 @@ import {
   attachmentInputItem,
   type AttachmentInputItemVariantProps,
 } from "@seed-design/css/recipes/attachment-input-item";
-import { composeRefs } from "@radix-ui/react-compose-refs";
+import { composeRefs, useComposedRefs } from "@radix-ui/react-compose-refs";
 import { dataAttr } from "@seed-design/dom-utils";
 import {
   AttachmentDisplay as AttachmentDisplayPrimitive,
@@ -18,6 +18,7 @@ import clsx from "clsx";
 import * as React from "react";
 import { createRenderTrackingContext } from "../../utils/createRenderTrackingContext";
 import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
+import { useScaleFeedback, withScaleFeedback } from "../../utils/scaleFeedback";
 
 const { useClassNames, ClassNamesProvider, withContext } =
   createSlotRecipeContext(attachmentInputItem);
@@ -44,14 +45,15 @@ export const AttachmentDisplayItem = React.forwardRef<HTMLLIElement, AttachmentD
     });
 
     const classNames = attachmentInputItem(variantProps);
+    const { scaleFeedbackRef, scaleFeedbackClassName } = useScaleFeedback();
 
     return (
       <ClassNamesProvider value={classNames}>
         <AttachmentDisplayItemProvider value={api}>
           <overlayTracker.Provider>
             <Primitive.li
-              ref={ref}
-              className={clsx(classNames.root, className)}
+              ref={useComposedRefs(scaleFeedbackRef, ref)}
+              className={clsx(classNames.root, scaleFeedbackClassName, className)}
               {...stateProps}
               {...otherProps}
             />
@@ -181,12 +183,13 @@ export const AttachmentDisplayItemActionButton = React.forwardRef<
   AttachmentDisplayItemActionButtonProps
 >(({ className, ...props }, ref) => {
   const classNames = useClassNames();
+  const { scaleFeedbackRef, scaleFeedbackClassName } = useScaleFeedback();
 
   return (
     <Primitive.button
       type="button"
-      ref={ref}
-      className={clsx(classNames.actionButton, className)}
+      ref={useComposedRefs(scaleFeedbackRef, ref)}
+      className={clsx(classNames.actionButton, scaleFeedbackClassName, className)}
       {...props}
     />
   );
@@ -198,7 +201,9 @@ AttachmentDisplayItemActionButton.displayName = "AttachmentDisplayItemActionButt
 export interface AttachmentDisplayItemRemoveButtonProps
   extends AttachmentDisplayPrimitive.ItemRemoveButtonProps {}
 
-export const AttachmentDisplayItemRemoveButton = withContext<
-  HTMLButtonElement,
-  AttachmentDisplayItemRemoveButtonProps
->(AttachmentDisplayPrimitive.ItemRemoveButton, "removeButton");
+export const AttachmentDisplayItemRemoveButton = withScaleFeedback(
+  withContext<HTMLButtonElement, AttachmentDisplayItemRemoveButtonProps>(
+    AttachmentDisplayPrimitive.ItemRemoveButton,
+    "removeButton",
+  ),
+);

package/src/components/AttachmentDisplay/AttachmentDisplayTrigger.tsx

@@ -14,6 +14,7 @@ import clsx from "clsx";
 import * as React from "react";
 import { InternalIcon } from "../private/Icon";
 import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
+import { withScaleFeedback } from "../../utils/scaleFeedback";
 
 const { withProvider, useClassNames } = createSlotRecipeContext(attachmentInputTrigger);
 
@@ -22,10 +23,12 @@ export interface AttachmentDisplayTriggerProps
     PrimitiveProps,
     React.ButtonHTMLAttributes<HTMLButtonElement> {}
 
-export const AttachmentDisplayTrigger = withProvider<
-  HTMLButtonElement,
-  AttachmentDisplayTriggerProps
->(AttachmentDisplayPrimitive.Trigger, "root");
+export const AttachmentDisplayTrigger = withScaleFeedback(
+  withProvider<HTMLButtonElement, AttachmentDisplayTriggerProps>(
+    AttachmentDisplayPrimitive.Trigger,
+    "root",
+  ),
+);
 
 // Display currently only supports image content. The parametric form mirrors
 // AttachmentInput.TriggerIcon so future expansion (e.g., "general") can be added

package/src/components/AttachmentInput/AttachmentInputItem.tsx

@@ -5,7 +5,7 @@ import {
   attachmentInputItem,
   type AttachmentInputItemVariantProps,
 } from "@seed-design/css/recipes/attachment-input-item";
-import { composeRefs } from "@radix-ui/react-compose-refs";
+import { composeRefs, useComposedRefs } from "@radix-ui/react-compose-refs";
 import { dataAttr } from "@seed-design/dom-utils";
 import {
   FileUpload as FileUploadPrimitive,
@@ -21,6 +21,7 @@ import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
 import clsx from "clsx";
 import { createRenderTrackingContext } from "../../utils/createRenderTrackingContext";
 import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
+import { useScaleFeedback, withScaleFeedback } from "../../utils/scaleFeedback";
 
 const { useClassNames, ClassNamesProvider, withContext } =
   createSlotRecipeContext(attachmentInputItem);
@@ -45,14 +46,15 @@ export const AttachmentInputItem = React.forwardRef<HTMLLIElement, AttachmentInp
     });
 
     const classNames = attachmentInputItem(variantProps);
+    const { scaleFeedbackRef, scaleFeedbackClassName } = useScaleFeedback();
 
     return (
       <ClassNamesProvider value={classNames}>
         <FileUploadItemProvider value={api}>
           <overlayTracker.Provider>
             <Primitive.li
-              ref={ref}
-              className={clsx(classNames.root, className)}
+              ref={useComposedRefs(scaleFeedbackRef, ref)}
+              className={clsx(classNames.root, scaleFeedbackClassName, className)}
               {...stateProps}
               {...otherProps}
             />
@@ -115,10 +117,12 @@ AttachmentInputItemSize.displayName = "AttachmentInputItemSize";
 export interface AttachmentInputItemRemoveButtonProps
   extends FileUploadPrimitive.ItemRemoveButtonProps {}
 
-export const AttachmentInputItemRemoveButton = withContext<
-  HTMLButtonElement,
-  AttachmentInputItemRemoveButtonProps
->(FileUploadPrimitive.ItemRemoveButton, "removeButton");
+export const AttachmentInputItemRemoveButton = withScaleFeedback(
+  withContext<HTMLButtonElement, AttachmentInputItemRemoveButtonProps>(
+    FileUploadPrimitive.ItemRemoveButton,
+    "removeButton",
+  ),
+);
 
 export interface AttachmentInputItemImageProps extends FileUploadPrimitive.ItemImageProps {}
 
@@ -184,12 +188,13 @@ export const AttachmentInputItemActionButton = React.forwardRef<
   AttachmentInputItemActionButtonProps
 >(({ className, ...props }, ref) => {
   const classNames = useClassNames();
+  const { scaleFeedbackRef, scaleFeedbackClassName } = useScaleFeedback();
 
   return (
     <Primitive.button
       type="button"
-      ref={ref}
-      className={clsx(classNames.actionButton, className)}
+      ref={useComposedRefs(scaleFeedbackRef, ref)}
+      className={clsx(classNames.actionButton, scaleFeedbackClassName, className)}
       {...props}
     />
   );

package/src/components/AttachmentInput/AttachmentInputTrigger.tsx

@@ -16,6 +16,7 @@ import { mergeProps } from "@seed-design/dom-utils";
 import clsx from "clsx";
 import { InternalIcon } from "../private/Icon";
 import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
+import { withScaleFeedback } from "../../utils/scaleFeedback";
 
 const { withProvider, useClassNames } = createSlotRecipeContext(attachmentInputTrigger);
 
@@ -24,9 +25,8 @@ export interface AttachmentInputTriggerProps
     PrimitiveProps,
     React.ButtonHTMLAttributes<HTMLButtonElement> {}
 
-export const AttachmentInputTrigger = withProvider<HTMLButtonElement, AttachmentInputTriggerProps>(
-  FileUploadPrimitive.Trigger,
-  "root",
+export const AttachmentInputTrigger = withScaleFeedback(
+  withProvider<HTMLButtonElement, AttachmentInputTriggerProps>(FileUploadPrimitive.Trigger, "root"),
 );
 
 export type AttachmentInputTriggerIconProps = React.SVGAttributes<SVGElement> & {

package/src/components/BottomSheet/BottomSheet.tsx

@@ -1,10 +1,11 @@
 import { bottomSheet, type BottomSheetVariantProps } from "@seed-design/css/recipes/bottom-sheet";
-import { composeRefs } from "@radix-ui/react-compose-refs";
+import { useComposedRefs } from "@radix-ui/react-compose-refs";
 import { dataAttr } from "@seed-design/dom-utils";
 import { Drawer } from "@seed-design/react-drawer";
 import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
 import clsx from "clsx";
 import { forwardRef } from "react";
+import { useScaleFeedback } from "../../utils/scaleFeedback";
 import { createRenderTrackingContext } from "../../utils/createRenderTrackingContext";
 import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
 import { withStyleProps, type StyleProps } from "../../utils/styled";
@@ -144,11 +145,12 @@ export const BottomSheetCloseButton = forwardRef<HTMLButtonElement, BottomSheetC
   ({ className, ...props }, ref) => {
     const classNames = useClassNames();
     const { trackRef } = closeButtonTracker.useRenderTracking();
+    const { scaleFeedbackRef, scaleFeedbackClassName } = useScaleFeedback();
 
     return (
       <Drawer.CloseButton
-        ref={composeRefs(ref, trackRef)}
-        className={clsx(classNames.closeButton, className)}
+        ref={useComposedRefs(scaleFeedbackRef, ref, trackRef)}
+        className={clsx(classNames.closeButton, scaleFeedbackClassName, className)}
         {...props}
       />
     );

package/src/components/Callout/Callout.tsx

@@ -3,6 +3,7 @@ import type * as React from "react";
 import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
 import { callout, type CalloutVariantProps } from "@seed-design/css/recipes/callout";
 import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
+import { withScaleFeedback } from "../../utils/scaleFeedback";
 import {
   DismissibleCloseButton,
   DismissibleRoot,
@@ -13,7 +14,12 @@ const { withContext, withProvider } = createSlotRecipeContext(callout);
 
 export interface CalloutRootProps extends CalloutVariantProps, DismissibleRootProps {}
 
-export const CalloutRoot = withProvider<HTMLDivElement, CalloutRootProps>(DismissibleRoot, "root");
+// The root only scales when the consumer makes it actionable (`asChild` with a
+// button or anchor) — the recipe gates the scale on `:is(button, a)`. Publishing
+// the size vars unconditionally costs a plain callout nothing.
+export const CalloutRoot = withScaleFeedback(
+  withProvider<HTMLDivElement, CalloutRootProps>(DismissibleRoot, "root"),
+);
 
 export interface CalloutContentProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {}
 
@@ -51,7 +57,6 @@ export interface CalloutCloseButtonProps
   extends PrimitiveProps,
     React.ButtonHTMLAttributes<HTMLButtonElement> {}
 
-export const CalloutCloseButton = withContext<HTMLButtonElement, CalloutCloseButtonProps>(
-  DismissibleCloseButton,
-  "closeButton",
+export const CalloutCloseButton = withScaleFeedback(
+  withContext<HTMLButtonElement, CalloutCloseButtonProps>(DismissibleCloseButton, "closeButton"),
 );

package/src/components/Checkbox/Checkbox.tsx

@@ -8,6 +8,7 @@ import clsx from "clsx";
 import { forwardRef } from "react";
 import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
 import { createWithStateProps } from "../../utils/createWithStateProps";
+import { withScaleFeedback } from "../../utils/scaleFeedback";
 import { InternalIcon } from "../private/Icon";
 import { createRecipeContext } from "../../utils/createRecipeContext";
 import {
@@ -75,9 +76,8 @@ export interface CheckboxControlProps
   extends CheckmarkVariantProps,
     CheckboxPrimitive.ControlProps {}
 
-export const CheckboxControl = withCheckmarkProvider<HTMLDivElement, CheckboxControlProps>(
-  CheckboxPrimitive.Control,
-  "root",
+export const CheckboxControl = withScaleFeedback(
+  withCheckmarkProvider<HTMLDivElement, CheckboxControlProps>(CheckboxPrimitive.Control, "root"),
 );
 
 ////////////////////////////////////////////////////////////////////////////////////

package/src/components/Chip/Chip.tsx

@@ -2,6 +2,7 @@ import { chip, type ChipVariantProps } from "@seed-design/css/recipes/chip";
 import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
 import type * as React from "react";
 import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
+import { withScaleFeedback } from "../../utils/scaleFeedback";
 import { withIconRequired } from "../Icon/Icon";
 import { createWithStateProps } from "../../utils/createWithStateProps";
 import { useCheckboxContext } from "@seed-design/react-checkbox";
@@ -21,7 +22,7 @@ export interface ChipRootProps
     React.ButtonHTMLAttributes<HTMLButtonElement> {}
 
 export const ChipRoot = withIconRequired(
-  withProvider<HTMLButtonElement, ChipRootProps>(Primitive.button, "root"),
+  withScaleFeedback(withProvider<HTMLButtonElement, ChipRootProps>(Primitive.button, "root")),
   (props: ChipRootProps) => props.layout === "iconOnly",
 );
 ChipRoot.displayName = "Chip.Root";

package/src/components/ChipTabs/ChipTabs.tsx

@@ -1,6 +1,7 @@
 import { chipTabs, type ChipTabsVariantProps } from "@seed-design/css/recipes/chip-tabs";
 import { Tabs as TabsPrimitive } from "@seed-design/react-tabs";
 import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
+import { withScaleFeedback } from "../../utils/scaleFeedback";
 import { forwardRef } from "react";
 import clsx from "clsx";
 
@@ -41,9 +42,8 @@ export const ChipTabsList = withContext<HTMLDivElement, ChipTabsListProps>(
 
 export interface ChipTabsTriggerProps extends TabsPrimitive.TriggerProps {}
 
-export const ChipTabsTrigger = withContext<HTMLButtonElement, ChipTabsTriggerProps>(
-  TabsPrimitive.Trigger,
-  "trigger",
+export const ChipTabsTrigger = withScaleFeedback(
+  withContext<HTMLButtonElement, ChipTabsTriggerProps>(TabsPrimitive.Trigger, "trigger"),
 );
 
 ////////////////////////////////////////////////////////////////////////////////////

package/src/components/ContentDialog/ContentDialog.tsx

@@ -1,4 +1,4 @@
-import { composeRefs } from "@radix-ui/react-compose-refs";
+import { composeRefs, useComposedRefs } from "@radix-ui/react-compose-refs";
 import {
   contentDialog,
   type ContentDialogVariantProps,
@@ -10,6 +10,7 @@ import clsx from "clsx";
 import * as React from "react";
 import { createRenderTrackingContext } from "../../utils/createRenderTrackingContext";
 import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
+import { useScaleFeedback } from "../../utils/scaleFeedback";
 import { useStyleProps, withStyleProps, type StyleProps } from "../../utils/styled";
 
 const { withContext, useClassNames, ClassNamesProvider } = createSlotRecipeContext(contentDialog);
@@ -209,11 +210,12 @@ export const ContentDialogCloseButton = React.forwardRef<
 >(({ className, ...props }, ref) => {
   const classNames = useClassNames();
   const { trackRef } = closeButtonTracker.useRenderTracking();
+  const { scaleFeedbackRef, scaleFeedbackClassName } = useScaleFeedback();
 
   return (
     <DialogPrimitive.CloseButton
-      ref={composeRefs(ref, trackRef)}
-      className={clsx(classNames.closeButton, className)}
+      ref={useComposedRefs(scaleFeedbackRef, ref, trackRef)}
+      className={clsx(classNames.closeButton, scaleFeedbackClassName, className)}
       {...props}
     />
   );

package/src/components/ContextualFloatingButton/ContextualFloatingButton.tsx

@@ -2,9 +2,11 @@ import {
   contextualFloatingButton,
   type ContextualFloatingButtonVariantProps,
 } from "@seed-design/css/recipes/contextual-floating-button";
+import { useComposedRefs } from "@radix-ui/react-compose-refs";
 import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
 import clsx from "clsx";
 import * as React from "react";
+import { useScaleFeedback } from "../../utils/scaleFeedback";
 import { IconRequired } from "../Icon/Icon";
 import {
   PendingButtonProvider,
@@ -24,6 +26,7 @@ export const ContextualFloatingButton = React.forwardRef<
 >(({ variant, loading = false, layout = "withText", className, children, ...otherProps }, ref) => {
   const recipeClassName = contextualFloatingButton({ variant, layout });
   const api = usePendingButton({ loading, disabled: otherProps.disabled });
+  const { scaleFeedbackRef, scaleFeedbackClassName } = useScaleFeedback();
 
   if (layout === "iconOnly" && !(otherProps["aria-label"] || otherProps["aria-labelledby"])) {
     console.warn(
@@ -35,8 +38,8 @@ export const ContextualFloatingButton = React.forwardRef<
     <PendingButtonProvider value={api}>
       <IconRequired enabled={layout === "iconOnly"}>
         <Primitive.button
-          ref={ref}
-          className={clsx(recipeClassName, className)}
+          ref={useComposedRefs(scaleFeedbackRef, ref)}
+          className={clsx(recipeClassName, scaleFeedbackClassName, className)}
           {...api.stateProps}
           {...otherProps}
         >

package/src/components/DatePicker/DatePicker.test.tsx

@@ -216,6 +216,26 @@ describe("DatePicker", () => {
     }
   });
 
+  it("ContinuousDatePicker는 monthRange에 포함된 월만 노출한다", () => {
+    const { getAllByRole, queryByRole } = render(
+      <ContinuousDatePicker
+        {...commonProps}
+        defaultViewDate={{ year: 2026, month: 12, day: 1 }}
+        monthRange={{
+          start: { year: 2026, month: 12 },
+          end: { year: 2027, month: 1 },
+        }}
+        height="400px"
+      />,
+    );
+
+    expect(getAllByRole("grid")).toHaveLength(2);
+    expect(queryByRole("grid", { name: "2026년 11월" })).not.toBeInTheDocument();
+    expect(queryByRole("grid", { name: "2026년 12월" })).toBeInTheDocument();
+    expect(queryByRole("grid", { name: "2027년 1월" })).toBeInTheDocument();
+    expect(queryByRole("grid", { name: "2027년 2월" })).not.toBeInTheDocument();
+  });
+
   it("navigateToDate는 외부 포커스를 유지하고 오늘을 다음 tab 진입점으로 지정한다", () => {
     const actionsRef = React.createRef<DatePickerActions>();
     const { getByRole } = render(

package/src/components/DatePicker/DatePicker.tsx

@@ -9,6 +9,7 @@ import {
   type DatePickerCell,
   type DatePickerCellState,
   type DatePickerMonth,
+  type DatePickerMonthRange,
   type DatePickerVisibleRange,
   type UseDatePickerProps,
 } from "@seed-design/react-date-picker";
@@ -43,7 +44,7 @@ export interface DatePickerCellContentRenderProps extends DatePickerCellState {}
 
 type DatePickerBehaviorProps = UseDatePickerProps extends infer Props
   ? Props extends UseDatePickerProps
-    ? Omit<Props, "visibleRange">
+    ? Omit<Props, "visibleRange" | "monthRange">
     : never
   : never;
 
@@ -82,10 +83,18 @@ export type WeekDatePickerProps = DatePickerSharedProps;
 type DatePickerPropsWithoutSize<Props = DatePickerSharedProps> = Props extends DatePickerSharedProps
   ? Omit<Props, "height" | "minHeight" | "maxHeight">
   : never;
-export type ContinuousDatePickerProps = DatePickerPropsWithoutSize & ContinuousSizeConstraint;
+export type ContinuousDatePickerProps = DatePickerPropsWithoutSize &
+  ContinuousSizeConstraint & {
+    /**
+     * 노출하고 이동할 수 있는 월 범위입니다. 양끝 월을 포함합니다.
+     * 생략하면 `yearRange.start`의 1월부터 `yearRange.end`의 12월까지 노출합니다.
+     */
+    monthRange?: DatePickerMonthRange;
+  };
 
 type DatePickerImplementationProps = DatePickerSharedProps & {
   visibleRange: DatePickerVisibleRange;
+  monthRange?: DatePickerMonthRange;
 };
 
 type NavigationChevronIconProps = React.SVGProps<SVGSVGElement> & {
@@ -409,6 +418,7 @@ const DatePickerImplementation = React.forwardRef<HTMLDivElement, DatePickerImpl
       locale: _locale,
       weekStartsOn: _weekStartsOn,
       yearRange: _yearRange,
+      monthRange: _monthRange,
       constraints: _constraints,
       disabled: _disabled,
       readOnly: _readOnly,
@@ -554,10 +564,12 @@ export type {
   DatePickerConstraint,
   DatePickerConstraintContext,
   DatePickerDate,
+  DatePickerMonthRange,
   DatePickerMultipleProps,
   DatePickerRangeProps,
   DatePickerRangeValue,
   DatePickerSelectionMode,
   DatePickerSingleProps,
   DatePickerValue,
+  DatePickerYearMonth,
 } from "@seed-design/react-date-picker";

package/src/components/DatePicker/index.ts

@@ -10,6 +10,7 @@ export {
   type DatePickerConstraint,
   type DatePickerConstraintContext,
   type DatePickerDate,
+  type DatePickerMonthRange,
   type DatePickerMultipleProps,
   type DatePickerProps,
   type DatePickerRangeProps,
@@ -17,6 +18,7 @@ export {
   type DatePickerSelectionMode,
   type DatePickerSingleProps,
   type DatePickerValue,
+  type DatePickerYearMonth,
   type TwoMonthDatePickerProps,
   type WeekDatePickerProps,
 } from "./DatePicker";

package/src/components/FieldButton/FieldButton.tsx

@@ -4,6 +4,7 @@ import * as React from "react";
 import { forwardRef } from "react";
 import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
 import { createWithStateProps } from "../../utils/createWithStateProps";
+import { withScaleFeedback } from "../../utils/scaleFeedback";
 import { splitMultipleVariantsProps } from "../../utils/splitMultipleVariantsProps";
 import { field, type FieldVariantProps } from "@seed-design/css/recipes/field";
 import { fieldLabel, type FieldLabelVariantProps } from "@seed-design/css/recipes/field-label";
@@ -227,9 +228,11 @@ export const FieldButtonControl = withProvider<HTMLDivElement, FieldButtonContro
 
 export interface FieldButtonClearButtonProps extends FieldButton.ClearButtonProps {}
 
-export const FieldButtonClearButton = withContext<HTMLButtonElement, FieldButtonClearButtonProps>(
-  FieldButton.ClearButton,
-  "clearButton",
+export const FieldButtonClearButton = withScaleFeedback(
+  withContext<HTMLButtonElement, FieldButtonClearButtonProps>(
+    FieldButton.ClearButton,
+    "clearButton",
+  ),
 );
 
 export interface FieldButtonValueProps

package/src/components/FloatingActionButton/FloatingActionButton.tsx

@@ -5,6 +5,7 @@ import {
 import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
 import type * as React from "react";
 import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
+import { withScaleFeedback } from "../../utils/scaleFeedback";
 import { InternalIcon, type InternalIconProps } from "../private/Icon";
 
 const { withProvider, withContext } = createSlotRecipeContext(floatingActionButton);
@@ -16,10 +17,9 @@ export interface FloatingActionButtonRootProps
     PrimitiveProps,
     React.ButtonHTMLAttributes<HTMLButtonElement> {}
 
-export const FloatingActionButtonRoot = withProvider<
-  HTMLButtonElement,
-  FloatingActionButtonRootProps
->(Primitive.button, "root");
+export const FloatingActionButtonRoot = withScaleFeedback(
+  withProvider<HTMLButtonElement, FloatingActionButtonRootProps>(Primitive.button, "root"),
+);
 
 export interface FloatingActionButtonIconProps extends InternalIconProps {}
 

package/src/components/HelpBubble/HelpBubble.tsx

@@ -3,6 +3,7 @@ import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
 import { helpBubble, type HelpBubbleVariantProps } from "@seed-design/css/recipes/help-bubble";
 import { forwardRef } from "react";
 import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
+import { withScaleFeedback } from "../../utils/scaleFeedback";
 import { createWithStateProps } from "../../utils/createWithStateProps";
 import { withStyleProps, type StyleProps } from "../../utils/styled";
 import { getHelpBubbleArrowTipPath } from "../../utils/getHelpBubbleArrowTipPath";
@@ -37,7 +38,7 @@ export const HelpBubbleRoot = withRootProvider<HelpBubbleRootProps>(PopoverPrimi
   defaultProps: {
     placement: "top",
     gutter: 4, // TODO: get value from rootage spec
-    overflowPadding: 16,
+    overflowPadding: 16, // TODO: get value from rootage spec
     arrowPadding: 14,
   },
 });
@@ -137,9 +138,11 @@ HelpBubbleArrowTip.displayName = "HelpBubbleArrowTip";
 
 export interface HelpBubbleCloseButtonProps extends PopoverPrimitive.CloseButtonProps {}
 
-export const HelpBubbleCloseButton = withContext<HTMLButtonElement, HelpBubbleCloseButtonProps>(
-  PopoverPrimitive.CloseButton,
-  "closeButton",
+export const HelpBubbleCloseButton = withScaleFeedback(
+  withContext<HTMLButtonElement, HelpBubbleCloseButtonProps>(
+    PopoverPrimitive.CloseButton,
+    "closeButton",
+  ),
 );
 
 ////////////////////////////////////////////////////////////////////////////////////

package/src/components/HelpBubbleTooltip/HelpBubbleTooltip.tsx

@@ -41,7 +41,7 @@ export const HelpBubbleTooltipRoot = withRootProvider<HelpBubbleTooltipRootProps
     defaultProps: {
       placement: "top",
       gutter: 4, // TODO: get value from rootage spec
-      overflowPadding: 16,
+      overflowPadding: 16, // TODO: get value from rootage spec
       arrowPadding: 14,
     },
   },

package/src/components/ImageFrame/ImageFrame.tsx

@@ -14,8 +14,10 @@ import { imageFrameReactionButton } from "@seed-design/css/recipes/image-frame-r
 import { mergeProps } from "@seed-design/dom-utils";
 import { Image } from "@seed-design/react-image";
 import { Toggle as TogglePrimitive, useToggleContext } from "@seed-design/react-toggle";
+import { useComposedRefs } from "@radix-ui/react-compose-refs";
 import clsx from "clsx";
 import * as React from "react";
+import { useScaleFeedback } from "../../utils/scaleFeedback";
 import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
 import type { DistributiveOmit } from "../../utils/styled";
 import { AspectRatio, type AspectRatioProps } from "../AspectRatio/AspectRatio";
@@ -249,10 +251,15 @@ export const ImageFrameReactionButton = React.forwardRef<
   ImageFrameReactionButtonProps
 >(({ className, ...rest }, ref) => {
   const classNames = imageFrameReactionButton();
+  const { scaleFeedbackRef, scaleFeedbackClassName } = useScaleFeedback();
 
   return (
     <ImageFrameReactionButtonClassNamesProvider value={classNames}>
-      <TogglePrimitive.Root ref={ref} className={clsx(classNames.root, className)} {...rest}>
+      <TogglePrimitive.Root
+        ref={useComposedRefs(scaleFeedbackRef, ref)}
+        className={clsx(classNames.root, scaleFeedbackClassName, className)}
+        {...rest}
+      >
         <ReactionButtonIcon />
       </TogglePrimitive.Root>
     </ImageFrameReactionButtonClassNamesProvider>

package/src/components/MenuSheet/MenuSheet.tsx

@@ -7,6 +7,7 @@ import {
 } from "@seed-design/css/recipes/menu-sheet-item";
 import * as React from "react";
 import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
+import { withScaleFeedback } from "../../utils/scaleFeedback";
 import { createWithStateProps } from "../../utils/createWithStateProps";
 import clsx from "clsx";
 
@@ -319,7 +320,9 @@ export interface MenuSheetCloseButtonProps extends DialogPrimitive.CloseButtonPr
 /**
  * @deprecated Use `SwipeableMenuSheet` instead.
  */
-export const MenuSheetCloseButton = withContext<HTMLDivElement, MenuSheetCloseButtonProps>(
-  DialogPrimitive.CloseButton,
-  "closeButton",
+export const MenuSheetCloseButton = withScaleFeedback(
+  withContext<HTMLDivElement, MenuSheetCloseButtonProps>(
+    DialogPrimitive.CloseButton,
+    "closeButton",
+  ),
 );

package/src/components/PageBanner/PageBanner.tsx

@@ -4,6 +4,7 @@ import { forwardRef } from "react";
 import { pageBanner, type PageBannerVariantProps } from "@seed-design/css/recipes/page-banner";
 import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
 import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
+import { withScaleFeedback } from "../../utils/scaleFeedback";
 import {
   DismissibleCloseButton,
   DismissibleRoot,
@@ -93,16 +94,14 @@ export interface PageBannerButtonProps
   extends PrimitiveProps,
     React.ButtonHTMLAttributes<HTMLButtonElement> {}
 
-export const PageBannerButton = withContext<HTMLButtonElement, PageBannerButtonProps>(
-  Primitive.button,
-  "button",
+export const PageBannerButton = withScaleFeedback(
+  withContext<HTMLButtonElement, PageBannerButtonProps>(Primitive.button, "button"),
 );
 
 export interface PageBannerCloseButtonProps
   extends PrimitiveProps,
     React.ButtonHTMLAttributes<HTMLButtonElement> {}
 
-export const PageBannerCloseButton = withContext<HTMLButtonElement, PageBannerCloseButtonProps>(
-  DismissibleCloseButton,
-  "closeButton",
+export const PageBannerCloseButton = withScaleFeedback(
+  withContext<HTMLButtonElement, PageBannerCloseButtonProps>(DismissibleCloseButton, "closeButton"),
 );