@seed-design/react 2.2.2 → 2.4.0

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"),
 );

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 "../../utils/scaleFeedback";
 
 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/scaleFeedback";
 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 "../../utils/scaleFeedback";
 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 "../../utils/scaleFeedback";
 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/scaleFeedback";
 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/scaleFeedback";
 
 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/scaleFeedback";
 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/scaleFeedback";
 
 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/TextField/useTextFieldWithGraphemes.ts

@@ -1,6 +1,5 @@
 import { useState, useMemo, useCallback } from "react";
-import { splitGraphemes } from "unicode-segmenter/grapheme";
-import { memoize } from "./memoize";
+import { collectGraphemes } from "unicode-segmenter/grapheme";
 
 export interface UseTextFieldWithGraphemesParams {
   maxGraphemeCount?: number;
@@ -14,9 +13,6 @@ export interface UseTextFieldWithGraphemesParams {
   }) => void;
 }
 
-const getGraphemes = (string: string) => Array.from(splitGraphemes(string));
-const memoizedGetGraphemes = memoize(getGraphemes);
-
 export function useTextFieldWithGraphemes({
   maxGraphemeCount,
   value: controlledValue,
@@ -27,11 +23,11 @@ export function useTextFieldWithGraphemes({
   const isControlled = controlledValue !== undefined;
   const value = isControlled ? controlledValue : uncontrolledValue;
 
-  const graphemes = useMemo(() => memoizedGetGraphemes(value), [value]);
+  const graphemes = useMemo(() => collectGraphemes(value), [value]);
 
   const handleValueChange = useCallback(
     (newValue: string) => {
-      const newGraphemes = memoizedGetGraphemes(newValue);
+      const newGraphemes = collectGraphemes(newValue);
       const newSlicedGraphemes =
         maxGraphemeCount === undefined ? newGraphemes : newGraphemes.slice(0, maxGraphemeCount);
       const newSlicedValue = newSlicedGraphemes.join("");

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 "../../utils/scaleFeedback";
 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";