@seed-design/react 2.2.2 → 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

@@ -102,6 +102,56 @@ describe("DatePicker", () => {
     expect(onValueChange).not.toHaveBeenCalled();
   });
 
+  it("읽기 전용 Range 시작일의 상태와 접근성 이름을 노출하고 값 변경을 막는다", () => {
+    const onValueChange = mock(() => {});
+    const { getByRole } = render(
+      <DatePicker
+        {...commonProps}
+        selectionMode="range"
+        rangeStartReadOnly
+        defaultValue={{
+          start: { year: 2026, month: 7, day: 7 },
+          end: { year: 2026, month: 7, day: 9 },
+        }}
+        onValueChange={onValueChange}
+      />,
+    );
+    const start = getByRole("button", { name: /2026년 7월 7일.*읽기 전용 시작일/ });
+
+    expect(start).toHaveAttribute("data-range-start-readonly");
+    expect(start.closest('[role="gridcell"]')).toHaveAttribute("data-range-start-readonly");
+    expect(start).toHaveAttribute("aria-disabled", "true");
+    expect(start).not.toBeDisabled();
+
+    fireEvent.click(start);
+    expect(onValueChange).not.toHaveBeenCalled();
+
+    fireEvent.click(getByRole("button", { name: /2026년 7월 12일/ }));
+    expect(onValueChange).toHaveBeenCalledWith({
+      start: { year: 2026, month: 7, day: 7 },
+      end: { year: 2026, month: 7, day: 12 },
+    });
+  });
+
+  it("날짜 셀 render prop에 읽기 전용 Range 시작일 상태를 전달한다", () => {
+    const { getByRole } = render(
+      <DatePicker
+        {...commonProps}
+        selectionMode="range"
+        rangeStartReadOnly
+        defaultValue={{ start: { year: 2026, month: 7, day: 7 } }}
+        renderDateCellSupplement={({ isRangeStartReadOnly }) => (
+          <span>{isRangeStartReadOnly ? "고정" : "변경 가능"}</span>
+        )}
+      />,
+    );
+
+    expect(getByRole("button", { name: /2026년 7월 7일.*읽기 전용 시작일/ })).toHaveTextContent(
+      "고정",
+    );
+    expect(getByRole("button", { name: /2026년 7월 8일/ })).toHaveTextContent("변경 가능");
+  });
+
   it("월·연도 제목을 누르면 Wheel Picker로 전환한다", () => {
     const { getByRole, getAllByRole, queryByRole } = render(<DatePicker {...commonProps} />);
 
@@ -166,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> & {
@@ -100,13 +109,7 @@ const NavigationChevronIcon = React.forwardRef<SVGSVGElement, NavigationChevronI
         : "M17.2069 13.0704C16.9212 13.3703 16.9328 13.8451 17.2327 14.1307L23.4125 20.0166L17.2328 25.9017C16.9328 26.1873 16.9212 26.6621 17.2069 26.962C17.4925 27.262 17.9673 27.2736 18.2672 26.9879L25.0172 20.5598C25.1659 20.4182 25.25 20.2219 25.25 20.0167C25.25 19.8114 25.1659 19.6151 25.0173 19.4736L18.2673 13.0446C17.9673 12.7589 17.4926 12.7704 17.2069 13.0704Z";
 
     return (
-      <svg
-        ref={ref}
-        {...props}
-        viewBox="8 8 24 24"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
+      <svg ref={ref} {...props} viewBox="8 8 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path fillRule="evenodd" clipRule="evenodd" d={path} fill="currentColor" />
       </svg>
     );
@@ -120,13 +123,7 @@ type HeaderChevronIconProps = React.SVGProps<SVGSVGElement> & {
 
 const HeaderChevronIcon = React.forwardRef<SVGSVGElement, HeaderChevronIconProps>(
   ({ expanded, ...props }, ref) => (
-    <svg
-      ref={ref}
-      {...props}
-      viewBox="0 0 20 20"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
+    <svg ref={ref} {...props} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
         fillRule="evenodd"
         clipRule="evenodd"
@@ -421,9 +418,11 @@ const DatePickerImplementation = React.forwardRef<HTMLDivElement, DatePickerImpl
       locale: _locale,
       weekStartsOn: _weekStartsOn,
       yearRange: _yearRange,
+      monthRange: _monthRange,
       constraints: _constraints,
       disabled: _disabled,
       readOnly: _readOnly,
+      rangeStartReadOnly: _rangeStartReadOnly,
       ariaLabels: _ariaLabels,
       className,
       "aria-label": ariaLabel,
@@ -565,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,
     },
   },