@seed-design/react 2.3.0 → 2.4.1

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/withScaleFeedback";
 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/withScaleFeedback";
 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/withScaleFeedback";
 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 "@seed-design/react-scale-feedback";
 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/withScaleFeedback";
 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/withScaleFeedback";
 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"),
 );

package/src/components/QuantityPicker/QuantityPicker.tsx

@@ -12,8 +12,10 @@ import {
 } from "@seed-design/css/recipes/quantity-picker";
 import clsx from "clsx";
 import * as React from "react";
+import { useComposedRefs } from "@radix-ui/react-compose-refs";
 import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
 import { createWithStateProps } from "../../utils/createWithStateProps";
+import { useScaleFeedback } from "@seed-design/react-scale-feedback";
 
 const { ClassNamesProvider, useClassNames } = createSlotRecipeContext(quantityPicker);
 const withStateProps = createWithStateProps([useQuantityPickerContext]);
@@ -154,11 +156,12 @@ export const QuantityPickerDecrementButton = React.forwardRef<
       ? (removeIcon ?? icon)
       : icon;
   const contentIsIcon = content !== null && content !== undefined;
+  const { scaleFeedbackRef, scaleFeedbackClassName } = useScaleFeedback();
 
   return (
     <QuantityPickerPrimitive.DecrementButton
-      ref={ref}
-      className={clsx(classNames.decrementButton, className)}
+      ref={useComposedRefs(scaleFeedbackRef, ref)}
+      className={clsx(classNames.decrementButton, scaleFeedbackClassName, className)}
       {...props}
     >
       {renderIcon(content ?? children, classNames.decrementIcon, decrementIconProps, contentIsIcon)}
@@ -208,11 +211,12 @@ export const QuantityPickerIncrementButton = React.forwardRef<
   const { incrementIconProps, incrementLoading } = useQuantityPickerContext();
   const content = incrementLoading ? loadingIndicator : icon;
   const contentIsIcon = content !== null && content !== undefined;
+  const { scaleFeedbackRef, scaleFeedbackClassName } = useScaleFeedback();
 
   return (
     <QuantityPickerPrimitive.IncrementButton
-      ref={ref}
-      className={clsx(classNames.incrementButton, className)}
+      ref={useComposedRefs(scaleFeedbackRef, ref)}
+      className={clsx(classNames.incrementButton, scaleFeedbackClassName, className)}
       {...props}
     >
       {renderIcon(content ?? children, classNames.incrementIcon, incrementIconProps, contentIsIcon)}

package/src/components/RadioGroup/RadioGroup.tsx

@@ -11,6 +11,7 @@ import clsx from "clsx";
 import { forwardRef } from "react";
 import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
 import { createWithStateProps } from "../../utils/createWithStateProps";
+import { withScaleFeedback } from "../../utils/withScaleFeedback";
 import { InternalIcon } from "../private/Icon";
 import { splitMultipleVariantsProps } from "../../utils/splitMultipleVariantsProps";
 import { createRecipeContext } from "../../utils/createRecipeContext";
@@ -81,10 +82,12 @@ export interface RadioGroupItemControlProps
   extends RadiomarkVariantProps,
     RadioGroupPrimitive.ItemControlProps {}
 
-export const RadioGroupItemControl = withRadiomarkProvider<
-  HTMLDivElement,
-  RadioGroupItemControlProps
->(RadioGroupPrimitive.ItemControl, "root");
+export const RadioGroupItemControl = withScaleFeedback(
+  withRadiomarkProvider<HTMLDivElement, RadioGroupItemControlProps>(
+    RadioGroupPrimitive.ItemControl,
+    "root",
+  ),
+);
 
 ////////////////////////////////////////////////////////////////////////////////////
 

package/src/components/ReactionButton/ReactionButton.tsx

@@ -2,9 +2,11 @@ import {
   reactionButton,
   type ReactionButtonVariantProps,
 } from "@seed-design/css/recipes/reaction-button";
+import { useComposedRefs } from "@radix-ui/react-compose-refs";
 import { Toggle as TogglePrimitive } from "@seed-design/react-toggle";
 import clsx from "clsx";
 import * as React from "react";
+import { useScaleFeedback } from "@seed-design/react-scale-feedback";
 import {
   PendingButtonProvider,
   usePendingButton,
@@ -20,12 +22,13 @@ export const ReactionButton = React.forwardRef<HTMLButtonElement, ReactionButton
   ({ size = "small", loading = false, className, ...otherProps }, ref) => {
     const recipeClassName = reactionButton({ size });
     const api = usePendingButton({ loading, disabled: otherProps.disabled });
+    const { scaleFeedbackRef, scaleFeedbackClassName } = useScaleFeedback();
 
     return (
       <PendingButtonProvider value={api}>
         <TogglePrimitive.Root
-          ref={ref}
-          className={clsx(recipeClassName, className)}
+          ref={useComposedRefs(scaleFeedbackRef, ref)}
+          className={clsx(recipeClassName, scaleFeedbackClassName, className)}
           {...api.stateProps}
           {...otherProps}
         />

package/src/components/ScrollFog/ScrollFog.test.tsx

@@ -0,0 +1,13 @@
+import { render } from "@testing-library/react";
+import { describe, expect, it } from "bun:test";
+import { ScrollFog } from "./ScrollFog";
+
+describe("ScrollFog", () => {
+  it("CSS 길이 계산식을 Fog 크기로 전달한다", () => {
+    const { container } = render(<ScrollFog size="min(40%, 132px)" />);
+    const scrollFog = container.firstElementChild as HTMLElement;
+
+    expect(scrollFog.style.getPropertyValue("--scroll-fog-size-top")).toBe("min(40%, 132px)");
+    expect(scrollFog.style.getPropertyValue("--scroll-fog-size-bottom")).toBe("min(40%, 132px)");
+  });
+});

package/src/components/ScrollFog/ScrollFog.tsx

@@ -15,20 +15,18 @@ export interface ScrollFogProps
   extends ScrollFogVariantProps,
     React.HTMLAttributes<HTMLDivElement> {
   /**
-   * Placement of fog effect
+   * Fog 효과를 표시할 방향입니다.
    * @default ["top", "bottom"]
    */
   placement?: ScrollPlacement[];
 
   /**
-   * Size of the fog effect in pixels
+   * Fog 효과의 크기입니다. 숫자는 px 단위로 처리하며 CSS 길이 또는 계산식도 사용할 수 있습니다.
    * @default 20
    */
-  size?: number;
+  size?: number | string;
 
-  /**
-   * Size of the fog effect for each direction in pixels
-   */
+  /** 방향별 Fog 효과의 크기입니다. */
   sizes?: SizesConfig;
 }
 
@@ -42,7 +40,7 @@ export const ScrollFog = forwardRef<HTMLDivElement, ScrollFogProps>(
       ...props,
     });
     const scrollFogClassName = scrollFog(variantProps);
-    const sizePx = typeof size === "number" ? `${size}px` : size; // TODO: redundant typeof?
+    const sizePx = typeof size === "number" ? `${size}px` : size;
 
     const sizeStyle = useMemo(() => {
       const finalSizes = {

package/src/components/SidePanel/SidePanel.tsx

@@ -1,12 +1,13 @@
 import { sidePanel, type SidePanelVariantProps } from "@seed-design/css/recipes/side-panel";
 import { Drawer } from "@seed-design/react-drawer";
 import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
-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 clsx from "clsx";
 import * as React from "react";
 import { createRenderTrackingContext } from "../../utils/createRenderTrackingContext";
 import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
+import { useScaleFeedback } from "@seed-design/react-scale-feedback";
 import { useStyleProps, withStyleProps, type StyleProps } from "../../utils/styled";
 
 const { withContext, useClassNames, ClassNamesProvider } = createSlotRecipeContext(sidePanel);
@@ -202,11 +203,12 @@ export const SidePanelCloseButton = React.forwardRef<HTMLButtonElement, SidePane
   ({ 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/Snackbar/Snackbar.tsx

@@ -6,6 +6,7 @@ import { Snackbar as SnackbarPrimitive } from "@seed-design/react-snackbar";
 import { forwardRef } from "react";
 import { createRecipeContext } from "../../utils/createRecipeContext";
 import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
+import { withScaleFeedback } from "../../utils/withScaleFeedback";
 import { InternalIcon, type InternalIconProps } from "../private/Icon";
 
 const { withContext: withRegionContext } = createRecipeContext(snackbarRegion);
@@ -69,9 +70,11 @@ export const SnackbarPrefixIcon = withContext<HTMLDivElement, SnackbarPrefixIcon
 
 export interface SnackbarActionButtonProps extends SnackbarPrimitive.ActionButtonProps {}
 
-export const SnackbarActionButton = withContext<HTMLButtonElement, SnackbarActionButtonProps>(
-  SnackbarPrimitive.ActionButton,
-  "actionButton",
+export const SnackbarActionButton = withScaleFeedback(
+  withContext<HTMLButtonElement, SnackbarActionButtonProps>(
+    SnackbarPrimitive.ActionButton,
+    "actionButton",
+  ),
 );
 
 ////////////////////////////////////////////////////////////////////////////////////

package/src/components/SwipeableMenuSheet/SwipeableMenuSheet.tsx

@@ -9,6 +9,7 @@ import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
 import clsx from "clsx";
 import * as React from "react";
 import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
+import { withScaleFeedback } from "../../utils/withScaleFeedback";
 
 const { withContext, useClassNames, ClassNamesProvider } = createSlotRecipeContext(menuSheet);
 const {
@@ -263,7 +264,9 @@ export interface SwipeableMenuSheetCloseButtonProps extends Drawer.CloseButtonPr
 /**
  * Visible button that closes the swipeable menu sheet.
  */
-export const SwipeableMenuSheetCloseButton = withContext<
-  HTMLButtonElement,
-  SwipeableMenuSheetCloseButtonProps
->(Drawer.CloseButton, "closeButton");
+export const SwipeableMenuSheetCloseButton = withScaleFeedback(
+  withContext<HTMLButtonElement, SwipeableMenuSheetCloseButtonProps>(
+    Drawer.CloseButton,
+    "closeButton",
+  ),
+);

package/src/components/Switch/Switch.tsx

@@ -4,6 +4,7 @@ import { switchmark, type SwitchmarkVariantProps } from "@seed-design/css/recipe
 import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
 import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
 import { createWithStateProps } from "../../utils/createWithStateProps";
+import { withScaleFeedback } from "../../utils/withScaleFeedback";
 import React from "react";
 import clsx from "clsx";
 import { splitMultipleVariantsProps } from "../../utils/splitMultipleVariantsProps";
@@ -49,9 +50,8 @@ SwitchRoot.displayName = "SwitchRoot";
 
 export interface SwitchControlProps extends SwitchmarkVariantProps, SwitchPrimitive.ControlProps {}
 
-export const SwitchControl = withControlProvider<HTMLDivElement, SwitchControlProps>(
-  SwitchPrimitive.Control,
-  "root",
+export const SwitchControl = withScaleFeedback(
+  withControlProvider<HTMLDivElement, SwitchControlProps>(SwitchPrimitive.Control, "root"),
 );
 
 ////////////////////////////////////////////////////////////////////////////////////

package/src/components/Tabs/Tabs.tsx

@@ -1,6 +1,7 @@
 import { tabs, type TabsVariantProps } from "@seed-design/css/recipes/tabs";
 import { Tabs as TabsPrimitive } from "@seed-design/react-tabs";
 import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
+import { withScaleFeedback } from "../../utils/withScaleFeedback";
 
 const { withProvider, withContext } = createSlotRecipeContext(tabs);
 
@@ -20,9 +21,8 @@ export const TabsList = withContext<HTMLDivElement, TabsListProps>(TabsPrimitive
 
 export interface TabsTriggerProps extends TabsPrimitive.TriggerProps {}
 
-export const TabsTrigger = withContext<HTMLButtonElement, TabsTriggerProps>(
-  TabsPrimitive.Trigger,
-  "trigger",
+export const TabsTrigger = withScaleFeedback(
+  withContext<HTMLButtonElement, TabsTriggerProps>(TabsPrimitive.Trigger, "trigger"),
 );
 
 ////////////////////////////////////////////////////////////////////////////////////

package/src/components/ToggleButton/ToggleButton.tsx

@@ -2,9 +2,11 @@ import {
   toggleButton,
   type ToggleButtonVariantProps,
 } from "@seed-design/css/recipes/toggle-button";
+import { useComposedRefs } from "@radix-ui/react-compose-refs";
 import { Toggle as TogglePrimitive } from "@seed-design/react-toggle";
 import clsx from "clsx";
 import * as React from "react";
+import { useScaleFeedback } from "@seed-design/react-scale-feedback";
 import {
   PendingButtonProvider,
   usePendingButton,
@@ -20,12 +22,13 @@ export const ToggleButton = React.forwardRef<HTMLButtonElement, ToggleButtonProp
   ({ variant = "brandSolid", size = "small", loading = false, className, ...otherProps }, ref) => {
     const recipeClassName = toggleButton({ variant, size });
     const api = usePendingButton({ loading, disabled: otherProps.disabled });
+    const { scaleFeedbackRef, scaleFeedbackClassName } = useScaleFeedback();
 
     return (
       <PendingButtonProvider value={api}>
         <TogglePrimitive.Root
-          ref={ref}
-          className={clsx(recipeClassName, className)}
+          ref={useComposedRefs(scaleFeedbackRef, ref)}
+          className={clsx(recipeClassName, scaleFeedbackClassName, className)}
           {...api.stateProps}
           {...otherProps}
         />

package/src/components/WheelPicker/WheelPicker.namespace.ts

@@ -0,0 +1,9 @@
+export {
+  WheelPickerRoot as Root,
+  WheelPickerColumn as Column,
+  WheelPickerItemLabel as ItemLabel,
+  type WheelPickerRootProps as RootProps,
+  type WheelPickerColumnProps as ColumnProps,
+  type WheelPickerItemLabelProps as ItemLabelProps,
+  type WheelPickerOption as Option,
+} from "./WheelPicker";