@seed-design/react 2.5.1 → 3.0.0

package/src/components/SelectBox/SelectBox.test.tsx

@@ -0,0 +1,138 @@
+import { selectBox } from "@seed-design/css/recipes/select-box";
+import { SCALE_FEEDBACK_CLASS_NAME } from "@seed-design/css/scale-feedback";
+import { RadioGroup as RadioGroupPrimitive } from "@seed-design/react-radio-group";
+import { render } from "@testing-library/react";
+import { describe, expect, it } from "bun:test";
+import * as React from "react";
+import { CheckSelectBoxLabel, CheckSelectBoxRoot } from "./CheckSelectBox";
+import { RadioSelectBoxItem, RadioSelectBoxLabel } from "./RadioSelectBox";
+
+const classNames = selectBox({ layout: "horizontal" });
+
+// The footer provider only wraps the children when the footer collapses, so every case below
+// runs against both `footerVisibility` branches — the default one is where the provider used to
+// hide the `Slottable` from `Slot`.
+const footerVisibilities = ["when-selected", "always"] as const;
+
+describe("CheckSelectBoxRoot", () => {
+  for (const footerVisibility of footerVisibilities) {
+    describe(`footerVisibility="${footerVisibility}"`, () => {
+      it("renders a label carrying the recipe and scale feedback classes", () => {
+        const ref = React.createRef<HTMLLabelElement>();
+        const { container } = render(
+          <CheckSelectBoxRoot footerVisibility={footerVisibility} ref={ref}>
+            <CheckSelectBoxLabel>label</CheckSelectBoxLabel>
+          </CheckSelectBoxRoot>,
+        );
+
+        const root = container.firstElementChild;
+
+        expect(root?.tagName).toBe("LABEL");
+        expect(root).toHaveClass(classNames.root);
+        expect(root).toHaveClass(SCALE_FEEDBACK_CLASS_NAME);
+        expect(ref.current).toBe(root as HTMLLabelElement);
+      });
+
+      it("makes the content scale box the element's only child", () => {
+        const { container } = render(
+          <CheckSelectBoxRoot footerVisibility={footerVisibility}>
+            <CheckSelectBoxLabel>label</CheckSelectBoxLabel>
+          </CheckSelectBoxRoot>,
+        );
+
+        const root = container.firstElementChild;
+
+        expect(root?.childNodes.length).toBe(1);
+        expect(root?.firstElementChild).toHaveClass("seed-content-scale");
+        expect(root?.firstElementChild?.textContent).toBe("label");
+      });
+
+      it("renders the asChild element as the root and wraps its children in the box", () => {
+        const ref = React.createRef<HTMLLabelElement>();
+        const childRef = React.createRef<HTMLElement>();
+        const { container } = render(
+          <CheckSelectBoxRoot asChild footerVisibility={footerVisibility} ref={ref}>
+            <article className="consumer" ref={childRef}>
+              <CheckSelectBoxLabel>label</CheckSelectBoxLabel>
+            </article>
+          </CheckSelectBoxRoot>,
+        );
+
+        const root = container.firstElementChild;
+
+        expect(container.childNodes.length).toBe(1);
+        expect(root?.tagName).toBe("ARTICLE");
+        expect(root).toHaveClass("consumer");
+        expect(root).toHaveClass(classNames.root);
+        expect(root).toHaveClass(SCALE_FEEDBACK_CLASS_NAME);
+        expect(ref.current).toBe(root as HTMLLabelElement);
+        expect(childRef.current).toBe(root as HTMLElement);
+        expect(root?.childNodes.length).toBe(1);
+        expect(root?.firstElementChild).toHaveClass("seed-content-scale");
+        expect(root?.firstElementChild?.textContent).toBe("label");
+      });
+    });
+  }
+});
+
+describe("RadioSelectBoxItem", () => {
+  const renderItem = (ui: React.ReactNode) =>
+    render(<RadioGroupPrimitive.Root defaultValue="a">{ui}</RadioGroupPrimitive.Root>);
+
+  for (const footerVisibility of footerVisibilities) {
+    describe(`footerVisibility="${footerVisibility}"`, () => {
+      it("renders a label carrying the recipe and scale feedback classes", () => {
+        const ref = React.createRef<HTMLLabelElement>();
+        const { container } = renderItem(
+          <RadioSelectBoxItem footerVisibility={footerVisibility} ref={ref} value="a">
+            <RadioSelectBoxLabel>label</RadioSelectBoxLabel>
+          </RadioSelectBoxItem>,
+        );
+
+        const root = container.querySelector("label");
+
+        expect(root).toHaveClass(classNames.root);
+        expect(root).toHaveClass(SCALE_FEEDBACK_CLASS_NAME);
+        expect(ref.current).toBe(root as HTMLLabelElement);
+      });
+
+      it("makes the content scale box the element's only child", () => {
+        const { container } = renderItem(
+          <RadioSelectBoxItem footerVisibility={footerVisibility} value="a">
+            <RadioSelectBoxLabel>label</RadioSelectBoxLabel>
+          </RadioSelectBoxItem>,
+        );
+
+        const root = container.querySelector("label");
+
+        expect(root?.childNodes.length).toBe(1);
+        expect(root?.firstElementChild).toHaveClass("seed-content-scale");
+        expect(root?.firstElementChild?.textContent).toBe("label");
+      });
+
+      it("renders the asChild element as the root and wraps its children in the box", () => {
+        const ref = React.createRef<HTMLLabelElement>();
+        const childRef = React.createRef<HTMLElement>();
+        const { container } = renderItem(
+          <RadioSelectBoxItem asChild footerVisibility={footerVisibility} ref={ref} value="a">
+            <article className="consumer" ref={childRef}>
+              <RadioSelectBoxLabel>label</RadioSelectBoxLabel>
+            </article>
+          </RadioSelectBoxItem>,
+        );
+
+        const root = container.querySelector("article");
+
+        expect(container.querySelector("label")).toBeNull();
+        expect(root).toHaveClass("consumer");
+        expect(root).toHaveClass(classNames.root);
+        expect(root).toHaveClass(SCALE_FEEDBACK_CLASS_NAME);
+        expect(ref.current).toBe(root as HTMLLabelElement);
+        expect(childRef.current).toBe(root as HTMLElement);
+        expect(root?.childNodes.length).toBe(1);
+        expect(root?.firstElementChild).toHaveClass("seed-content-scale");
+        expect(root?.firstElementChild?.textContent).toBe("label");
+      });
+    });
+  }
+});

package/src/components/SideNavigation/index.ts

@@ -37,3 +37,8 @@ export {
 } from "./SideNavigation";
 
 export * as SideNavigation from "./SideNavigation.namespace";
+
+export {
+  useSideNavigationContext,
+  type UseSideNavigationContext as SideNavigationContextValue,
+} from "@seed-design/react-side-navigation";

package/src/components/SidePanel/SidePanel.tsx

@@ -138,22 +138,7 @@ SidePanelDescription.displayName = "SidePanelDescription";
 export interface SidePanelBodyProps
   extends PrimitiveProps,
     Pick<StyleProps, "paddingX" | "justifyContent" | "alignItems">,
-    React.HTMLAttributes<HTMLDivElement> {
-  /**
-   * @deprecated SEED React 3.0.0에서 제거됩니다. Side Panel 본문은 항상 헤더와 푸터를 제외한 남은 높이를 채우므로 이 prop은 효과가 없습니다. 콘텐츠의 높이를 지정하려면 본문 안에 `Box`를 두고 `height`를 지정하세요.
-   */
-  height?: StyleProps["height"];
-
-  /**
-   * @deprecated SEED React 3.0.0에서 제거됩니다. Side Panel 본문은 항상 헤더와 푸터를 제외한 남은 높이를 채우므로, 남은 높이보다 큰 값을 주면 푸터가 패널 밖으로 밀려납니다. 콘텐츠의 최소 높이를 지정하려면 본문 안에 `Box`를 두고 `minHeight`를 지정하세요.
-   */
-  minHeight?: StyleProps["minHeight"];
-
-  /**
-   * @deprecated SEED React 3.0.0에서 제거됩니다. Side Panel 본문은 항상 헤더와 푸터를 제외한 남은 높이를 채우므로, 남은 높이보다 작은 값을 주면 푸터가 패널 중간에 뜹니다. 콘텐츠의 최대 높이를 지정하려면 본문 안에 `Box`를 두고 `maxHeight`를 지정하세요.
-   */
-  maxHeight?: StyleProps["maxHeight"];
-}
+    React.HTMLAttributes<HTMLDivElement> {}
 
 export const SidePanelBody = React.forwardRef<HTMLDivElement, SidePanelBodyProps>(
   (props, forwardedRef) => {

package/src/components/Stack/Stack.tsx

@@ -2,18 +2,6 @@ import * as React from "react";
 import type { DistributiveOmit } from "../../utils/styled";
 import { Flex, type FlexProps } from "../Flex";
 
-/**
- * @deprecated Use `VStack` instead.
- */
-export type StackProps = DistributiveOmit<FlexProps, "flexDirection">;
-
-/**
- * @deprecated Use `VStack` instead.
- */
-export const Stack = React.forwardRef<HTMLDivElement, StackProps>((props, ref) => {
-  return <Flex ref={ref} display="flex" flexDirection="column" {...props} />;
-});
-
 export type VStackProps = DistributiveOmit<FlexProps, "flexDirection">;
 
 export const VStack = React.forwardRef<HTMLDivElement, VStackProps>((props, ref) => {

package/src/components/Stack/index.ts

@@ -1,8 +1 @@
-export {
-  Stack,
-  VStack,
-  HStack,
-  type StackProps,
-  type VStackProps,
-  type HStackProps,
-} from "./Stack";
+export { VStack, HStack, type VStackProps, type HStackProps } from "./Stack";

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 { withContentScale } from "../../utils/withContentScale";
 import { withScaleFeedback } from "../../utils/withScaleFeedback";
 
 const { withContext, useClassNames, ClassNamesProvider } = createSlotRecipeContext(menuSheet);
@@ -198,24 +199,25 @@ export interface SwipeableMenuSheetItemProps
     MenuSheetItemVariantProps,
     React.HTMLAttributes<HTMLButtonElement> {}
 
-export const SwipeableMenuSheetItem = React.forwardRef<
-  HTMLButtonElement,
-  SwipeableMenuSheetItemProps
->(({ className: propClassName, ...props }, ref) => {
-  const [variantProps, otherProps] = menuSheetItem.splitVariantProps(props);
-  const parentProps = useItemProps();
-  const classNames = menuSheetItem({ ...parentProps, ...variantProps });
-
-  return (
-    <ItemClassNamesProvider value={classNames}>
-      <Primitive.button
-        ref={ref}
-        className={clsx(classNames.root, propClassName)}
-        {...otherProps}
-      />
-    </ItemClassNamesProvider>
-  );
-});
+export const SwipeableMenuSheetItem = withContentScale(
+  React.forwardRef<HTMLButtonElement, SwipeableMenuSheetItemProps>(
+    ({ className: propClassName, ...props }, ref) => {
+      const [variantProps, otherProps] = menuSheetItem.splitVariantProps(props);
+      const parentProps = useItemProps();
+      const classNames = menuSheetItem({ ...parentProps, ...variantProps });
+
+      return (
+        <ItemClassNamesProvider value={classNames}>
+          <Primitive.button
+            ref={ref}
+            className={clsx(classNames.root, propClassName)}
+            {...otherProps}
+          />
+        </ItemClassNamesProvider>
+      );
+    },
+  ),
+);
 
 SwipeableMenuSheetItem.displayName = "SwipeableMenuSheetItem";
 

package/src/components/Switch/Switch.namespace.ts

@@ -8,5 +8,6 @@ export {
   type SwitchHiddenInputProps as HiddenInputProps,
   type SwitchLabelProps as LabelProps,
   type SwitchRootProps as RootProps,
+  type SwitchRootPrimitiveProps as RootPrimitiveProps,
   type SwitchThumbProps as ThumbProps,
 } from "./Switch";

package/src/components/Switch/Switch.tsx

@@ -24,8 +24,10 @@ export interface SwitchRootProps
     Omit<SwitchmarkVariantProps, "size">,
     SwitchPrimitive.RootProps {}
 
-export const SwitchRoot = React.forwardRef<HTMLLabelElement, SwitchRootProps>(
-  ({ className, ...props }, ref) => {
+export interface SwitchRootPrimitiveProps extends SwitchPrimitive.RootProps {}
+
+export const SwitchRoot = Object.assign(
+  React.forwardRef<HTMLLabelElement, SwitchRootProps>(({ className, ...props }, ref) => {
     const [{ switch: switchVariantProps, switchmark: switchmarkVariantProps }, otherProps] =
       splitMultipleVariantsProps(props, { switchmark, switch: switchStyle });
 
@@ -42,7 +44,8 @@ export const SwitchRoot = React.forwardRef<HTMLLabelElement, SwitchRootProps>(
         </ClassNamesProvider>
       </ControlPropsProvider>
     );
-  },
+  }),
+  { Primitive: SwitchPrimitive.Root },
 );
 SwitchRoot.displayName = "SwitchRoot";
 

package/src/components/Switch/index.ts

@@ -8,6 +8,7 @@ export {
   type SwitchHiddenInputProps,
   type SwitchLabelProps,
   type SwitchRootProps,
+  type SwitchRootPrimitiveProps,
   type SwitchThumbProps,
 } from "./Switch";
 

package/src/components/TagGroup/TagGroup.tsx

@@ -29,6 +29,8 @@ export const TagGroupRoot = forwardRef<HTMLSpanElement, TagGroupRootProps>(
 
     return (
       <PropsProvider value={tagGroupItemVariantProps}>
+        {/* TODO: `asChild` cannot work here — inserting separators turns `children` into several
+            elements, which `Slot` refuses. Route them through `Slottable`, or drop `asChild`. */}
         <Primitive.span ref={ref} className={clsx(classNames.root, className)} {...otherProps}>
           {Children.toArray(children)
             // putting something other than TagGroupItem in TagGroupRoot is not a good idea,

package/src/components/WheelPicker/WheelPicker.test.tsx

@@ -1,6 +1,5 @@
 import { fireEvent, render } from "@testing-library/react";
 import { describe, expect, it, mock, spyOn } from "bun:test";
-import type * as React from "react";
 import { BottomSheet } from "../BottomSheet";
 import { WheelPicker } from "./index";
 
@@ -32,39 +31,38 @@ describe("WheelPicker", () => {
     );
 
     expect(getByRole("group")).toHaveStyle({
-      "--seed-wheel-picker-public-item-size": "44px",
-      "--seed-wheel-picker-public-visible-item-count": "5",
-      "--seed-wheel-picker-public-viewport-size": "220px",
-      "--seed-wheel-picker-public-center-offset": "88px",
-      "--seed-wheel-picker-public-scroll-fog-max-height": "132px",
+      "--seed-wheel-picker-item-size": "44px",
+      "--seed-wheel-picker-visible-item-count": "5",
+      "--seed-wheel-picker-viewport-size": "220px",
+      "--seed-wheel-picker-center-offset": "88px",
+      "--seed-wheel-picker-scroll-fog-max-height": "132px",
     });
     expect(getByRole("group")).toHaveClass(
-      "seed-wheel-picker-public__root",
-      "seed-wheel-picker-public__root--size_medium",
+      "seed-wheel-picker__root",
+      "seed-wheel-picker__root--size_medium",
     );
-    expect(getByRole("group")).not.toHaveClass("seed-wheel-picker__root");
     expect(container.querySelector("[data-wheel-picker-scroll-fog]")).toHaveClass(
-      "seed-wheel-picker-public__scrollFog",
+      "seed-wheel-picker__scrollFog",
     );
     expect(container.querySelector("[data-wheel-picker-columns]")).toHaveClass(
-      "seed-wheel-picker-public__columns",
+      "seed-wheel-picker__columns",
     );
-    expect(getByRole("spinbutton")).toHaveClass("seed-wheel-picker-public__column");
+    expect(getByRole("spinbutton")).toHaveClass("seed-wheel-picker__column");
     expect(container.querySelector('[data-wheel-picker-value="a"]')).toHaveClass(
-      "seed-wheel-picker-public__item",
+      "seed-wheel-picker__item",
     );
     expect(container.querySelector("[data-wheel-picker-item-label]")).toHaveClass(
-      "seed-wheel-picker-public__itemLabel",
+      "seed-wheel-picker__itemLabel",
     );
     expect(container.querySelector("[data-wheel-picker-indicator]")).toHaveClass(
-      "seed-wheel-picker-public__selectionIndicator",
+      "seed-wheel-picker__selectionIndicator",
     );
     const scrollFog = container.querySelector<HTMLElement>("[data-wheel-picker-scroll-fog]");
     expect(scrollFog?.style.getPropertyValue("--scroll-fog-size-top")).toBe(
-      "var(--seed-wheel-picker-public-scroll-fog-size)",
+      "var(--seed-wheel-picker-scroll-fog-size)",
     );
     expect(scrollFog?.style.getPropertyValue("--scroll-fog-size-bottom")).toBe(
-      "var(--seed-wheel-picker-public-scroll-fog-size)",
+      "var(--seed-wheel-picker-scroll-fog-size)",
     );
   });
 
@@ -76,15 +74,15 @@ describe("WheelPicker", () => {
     );
 
     expect(getByRole("group")).toHaveStyle({
-      "--seed-wheel-picker-public-item-size": "36px",
-      "--seed-wheel-picker-public-visible-item-count": "5",
-      "--seed-wheel-picker-public-viewport-size": "180px",
-      "--seed-wheel-picker-public-center-offset": "72px",
-      "--seed-wheel-picker-public-scroll-fog-max-height": "108px",
+      "--seed-wheel-picker-item-size": "36px",
+      "--seed-wheel-picker-visible-item-count": "5",
+      "--seed-wheel-picker-viewport-size": "180px",
+      "--seed-wheel-picker-center-offset": "72px",
+      "--seed-wheel-picker-scroll-fog-max-height": "108px",
     });
-    expect(getByRole("group")).toHaveClass("seed-wheel-picker-public__root--size_small");
+    expect(getByRole("group")).toHaveClass("seed-wheel-picker__root--size_small");
     expect(container.querySelector("[data-wheel-picker-item-label]")).toHaveClass(
-      "seed-wheel-picker-public__itemLabel--size_small",
+      "seed-wheel-picker__itemLabel--size_small",
     );
   });
 
@@ -101,14 +99,14 @@ describe("WheelPicker", () => {
     );
 
     expect(getByRole("group")).toHaveStyle({
-      "--seed-wheel-picker-public-item-size": "56px",
-      "--seed-wheel-picker-public-visible-item-count": "7",
-      "--seed-wheel-picker-public-viewport-size": "392px",
-      "--seed-wheel-picker-public-center-offset": "168px",
-      "--seed-wheel-picker-public-scroll-fog-max-height": "168px",
+      "--seed-wheel-picker-item-size": "56px",
+      "--seed-wheel-picker-visible-item-count": "7",
+      "--seed-wheel-picker-viewport-size": "392px",
+      "--seed-wheel-picker-center-offset": "168px",
+      "--seed-wheel-picker-scroll-fog-max-height": "168px",
     });
     expect(container.querySelector("[data-wheel-picker-item-label]")).toHaveClass(
-      "seed-wheel-picker-public__itemLabel--size_small",
+      "seed-wheel-picker__itemLabel--size_small",
     );
   });
 
@@ -120,8 +118,8 @@ describe("WheelPicker", () => {
     );
 
     expect(getByRole("group")).toHaveStyle({
-      "--seed-wheel-picker-public-viewport-size": "396px",
-      "--seed-wheel-picker-public-scroll-fog-max-height": "132px",
+      "--seed-wheel-picker-viewport-size": "396px",
+      "--seed-wheel-picker-scroll-fog-max-height": "132px",
     });
   });
 
@@ -148,7 +146,7 @@ describe("WheelPicker", () => {
     );
 
     expect(getByText("A")).toHaveAttribute("data-custom-label");
-    expect(getByText("A").parentElement).toHaveClass("seed-wheel-picker-public__item");
+    expect(getByText("A").parentElement).toHaveClass("seed-wheel-picker__item");
     expect(container.querySelector("[data-wheel-picker-item-label]")).not.toBeInTheDocument();
   });
 
@@ -165,7 +163,7 @@ describe("WheelPicker", () => {
       </WheelPicker.Root>,
     );
 
-    expect(getByText("A")).toHaveClass("seed-wheel-picker-public__itemLabel");
+    expect(getByText("A")).toHaveClass("seed-wheel-picker__itemLabel");
     expect(getByText("A")).toHaveAttribute("data-wheel-picker-item-label");
     expect(getByText("A")).toHaveAttribute("data-reused-label");
   });
@@ -208,18 +206,29 @@ describe("WheelPicker", () => {
     );
   });
 
-  it("지원하지 않는 readOnly 값이 런타임에 전달되어도 읽기 전용으로 동작하지 않는다", () => {
-    const RootWithLegacyReadOnly = WheelPicker.Root as React.ComponentType<
-      WheelPicker.RootProps & { readOnly?: boolean }
-    >;
-    const { getByRole } = render(
-      <RootWithLegacyReadOnly aria-label="휠 피커" readOnly>
-        <WheelPicker.Column aria-label="문자" options={options} defaultValue="a" />
-      </RootWithLegacyReadOnly>,
+  it("readOnly는 포커스를 유지하면서 스크롤·클릭·키보드 값 변경을 막는다", () => {
+    const onValueChange = mock(() => {});
+    const { container, getByRole } = render(
+      <WheelPicker.Root aria-label="휠 피커" readOnly>
+        <WheelPicker.Column
+          aria-label="문자"
+          options={options}
+          defaultValue="a"
+          onValueChange={onValueChange}
+        />
+      </WheelPicker.Root>,
     );
+    const column = getByRole("spinbutton");
+
+    expect(getByRole("group")).toHaveAttribute("data-readonly");
+    expect(column).toHaveAttribute("aria-readonly", "true");
+    expect(column).toHaveAttribute("tabindex", "0");
+
+    fireEvent.keyDown(column, { key: "ArrowDown" });
+    fireEvent.click(container.querySelector('[data-wheel-picker-value="b"]')!);
 
-    expect(getByRole("group")).not.toHaveAttribute("data-readonly");
-    expect(getByRole("spinbutton")).not.toHaveAttribute("aria-readonly");
+    expect(column).toHaveAttribute("aria-valuetext", "A");
+    expect(onValueChange).not.toHaveBeenCalled();
   });
 
   it("BottomSheet 안에서 컬럼을 스크롤할 때 시트 드래그를 시작하지 않는다", () => {

package/src/components/WheelPicker/WheelPicker.tsx

@@ -1,9 +1,6 @@
 "use client";
 
-import {
-  wheelPickerPublic,
-  type WheelPickerPublicVariantProps,
-} from "@seed-design/css/recipes/wheel-picker-public";
+import { wheelPicker, type WheelPickerVariantProps } from "@seed-design/css/recipes/wheel-picker";
 import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
 import {
   WheelPicker as WheelPickerPrimitive,
@@ -12,25 +9,25 @@ import {
 import clsx from "clsx";
 import * as React from "react";
 import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
-import { ScrollFog } from "../ScrollFog/ScrollFog";
+import { ScrollFog, type ScrollFogProps } from "../ScrollFog/ScrollFog";
 
 const DEFAULT_ITEM_SIZE = {
   small: 36,
   medium: 44,
 } as const;
 const DEFAULT_VISIBLE_ITEM_COUNT = 5;
-const { ClassNamesProvider, useClassNames } = createSlotRecipeContext(wheelPickerPublic);
+const { ClassNamesProvider, useClassNames } = createSlotRecipeContext(wheelPicker);
 
 type WheelPickerCssProperties = React.CSSProperties & {
-  "--seed-wheel-picker-public-item-size"?: string;
-  "--seed-wheel-picker-public-visible-item-count"?: number;
-  "--seed-wheel-picker-public-viewport-size"?: string;
-  "--seed-wheel-picker-public-center-offset"?: string;
-  "--seed-wheel-picker-public-scroll-fog-max-height"?: string;
+  "--seed-wheel-picker-item-size"?: string;
+  "--seed-wheel-picker-visible-item-count"?: number;
+  "--seed-wheel-picker-viewport-size"?: string;
+  "--seed-wheel-picker-center-offset"?: string;
+  "--seed-wheel-picker-scroll-fog-max-height"?: string;
 };
 
 export interface WheelPickerRootProps
-  extends WheelPickerPublicVariantProps,
+  extends WheelPickerVariantProps,
     Omit<
       WheelPickerPrimitive.RootProps,
       "asChild" | "children" | "disabled" | "itemSize" | "readOnly" | "visibleItemCount"
@@ -41,6 +38,12 @@ export interface WheelPickerRootProps
   /** 모든 컬럼의 포커스와 값 변경을 막습니다. */
   disabled?: boolean;
 
+  /** 모든 컬럼의 포커스는 유지하면서 스크롤·클릭·키보드 값 변경을 막습니다. */
+  readOnly?: boolean;
+
+  /** Scroll Fog가 위아래에서 차지하는 크기입니다. */
+  scrollFogSize?: ScrollFogProps["size"];
+
   /**
    * 한 항목의 높이입니다. 지정하지 않으면 `size`의 기본 높이를 사용합니다.
    */
@@ -55,11 +58,12 @@ export interface WheelPickerRootProps
 
 export const WheelPickerRoot = React.forwardRef<HTMLDivElement, WheelPickerRootProps>(
   (props, ref) => {
-    const [variantProps, otherProps] = wheelPickerPublic.splitVariantProps(props);
+    const [variantProps, otherProps] = wheelPicker.splitVariantProps(props);
     const {
       children,
       className,
       itemSize: itemSizeProp,
+      scrollFogSize = "var(--seed-wheel-picker-scroll-fog-size)",
       style,
       visibleItemCount = DEFAULT_VISIBLE_ITEM_COUNT,
       ...rootProps
@@ -67,14 +71,14 @@ export const WheelPickerRoot = React.forwardRef<HTMLDivElement, WheelPickerRootP
     const size = variantProps.size ?? "medium";
     const itemSize = itemSizeProp ?? DEFAULT_ITEM_SIZE[size];
     const centerOffset = ((visibleItemCount - 1) / 2) * itemSize;
-    const classNames = wheelPickerPublic({ size });
+    const classNames = wheelPicker({ size });
     const wheelPickerStyle: WheelPickerCssProperties = {
       ...style,
-      "--seed-wheel-picker-public-item-size": `${itemSize}px`,
-      "--seed-wheel-picker-public-visible-item-count": visibleItemCount,
-      "--seed-wheel-picker-public-viewport-size": `${itemSize * visibleItemCount}px`,
-      "--seed-wheel-picker-public-center-offset": `${centerOffset}px`,
-      "--seed-wheel-picker-public-scroll-fog-max-height": `${itemSize * 3}px`,
+      "--seed-wheel-picker-item-size": `${itemSize}px`,
+      "--seed-wheel-picker-visible-item-count": visibleItemCount,
+      "--seed-wheel-picker-viewport-size": `${itemSize * visibleItemCount}px`,
+      "--seed-wheel-picker-center-offset": `${centerOffset}px`,
+      "--seed-wheel-picker-scroll-fog-max-height": `${itemSize * 3}px`,
     };
 
     return (
@@ -86,7 +90,6 @@ export const WheelPickerRoot = React.forwardRef<HTMLDivElement, WheelPickerRootP
           style={wheelPickerStyle}
           visibleItemCount={visibleItemCount}
           {...rootProps}
-          readOnly={false}
         >
           <Primitive.div
             aria-hidden
@@ -96,7 +99,7 @@ export const WheelPickerRoot = React.forwardRef<HTMLDivElement, WheelPickerRootP
           <ScrollFog
             className={classNames.scrollFog}
             placement={["top", "bottom"]}
-            size="var(--seed-wheel-picker-public-scroll-fog-size)"
+            size={scrollFogSize}
             hideScrollBar
             data-wheel-picker-scroll-fog=""
           >

package/src/components/index.ts

@@ -1,7 +1,6 @@
 export * from "./Accordion";
 export * from "./ActionButton";
-export * from "./ActionChip";
-export * from "./ActionSheet";
+export * from "./AlertDialog";
 export * from "./Article";
 export * from "./AspectRatio";
 export * from "./Avatar";
@@ -13,19 +12,13 @@ export * from "./Celsius";
 export * from "./Checkbox";
 export * from "./Chip";
 export * from "./ChipTabs";
-export * from "./Columns";
 export * from "./ConsistentWidth";
-export * from "./ContentDialog";
 export * from "./ContentPlaceholder";
 export * from "./ContextualFloatingButton";
-export * from "./ControlChip";
 export * from "./Count";
 export * from "./DatePicker";
 export * from "./Dialog";
 export * from "./Divider";
-export * from "./ExtendedActionSheet";
-export * from "./ExtendedFab";
-export * from "./Fab";
 export * from "./Field";
 export * from "./FieldButton";
 export * from "./Fieldset";
@@ -42,10 +35,7 @@ export * from "./HelpBubbleTooltip";
 export * from "./Icon";
 export * from "./IdentityPlaceholder";
 export * from "./ImageFrame";
-export * from "./Inline";
-export * from "./InlineBanner";
 export * from "./Layout";
-export * from "./LinkContent";
 export * from "./List";
 export * from "./LoadingIndicator";
 export * from "./MannerTemp";
@@ -55,6 +45,7 @@ export * from "./MenuSheet";
 export * from "./NavigationMenu";
 export * from "./NotificationBadge";
 export * from "./PageBanner";
+export * from "./Popover";
 export * from "./Portal";
 export * from "./ProgressCircle";
 export * from "./PullToRefresh";
@@ -81,7 +72,6 @@ export * from "./Tabs";
 export * from "./TagGroup";
 export * from "./Text";
 export * from "./TextField";
-export * from "./TimePicker";
 export * from "./ToggleButton";
 export * from "./VisuallyHidden";
 export * from "./WheelPicker";