@seed-design/react 2.0.5 → 2.1.1

package/src/components/ContentDialog/ContentDialog.tsx

@@ -0,0 +1,222 @@
+import { composeRefs } from "@radix-ui/react-compose-refs";
+import {
+  contentDialog,
+  type ContentDialogVariantProps,
+} from "@seed-design/css/recipes/content-dialog";
+import { dataAttr } from "@seed-design/dom-utils";
+import { Dialog as DialogPrimitive } from "@seed-design/react-dialog";
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import clsx from "clsx";
+import * as React from "react";
+import { createRenderTrackingContext } from "../../utils/createRenderTrackingContext";
+import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
+import { useStyleProps, withStyleProps, type StyleProps } from "../../utils/styled";
+
+const { withContext, useClassNames, ClassNamesProvider } = createSlotRecipeContext(contentDialog);
+
+const closeButtonTracker = createRenderTrackingContext("ContentDialogCloseButton");
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface ContentDialogRootProps
+  extends ContentDialogVariantProps,
+    Omit<DialogPrimitive.RootProps, "role"> {
+  /**
+   * @default true
+   */
+  lazyMount?: DialogPrimitive.RootProps["lazyMount"];
+  /**
+   * @default true
+   */
+  unmountOnExit?: DialogPrimitive.RootProps["unmountOnExit"];
+}
+
+export function ContentDialogRoot(props: ContentDialogRootProps) {
+  const [variantProps, otherProps] = contentDialog.splitVariantProps({
+    lazyMount: true,
+    unmountOnExit: true,
+    ...props,
+  });
+  const classNames = contentDialog(variantProps);
+
+  return (
+    <ClassNamesProvider value={classNames}>
+      <closeButtonTracker.Provider>
+        <DialogPrimitive.Root {...otherProps} />
+      </closeButtonTracker.Provider>
+    </ClassNamesProvider>
+  );
+}
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface ContentDialogTriggerProps extends DialogPrimitive.TriggerProps {}
+
+export const ContentDialogTrigger = DialogPrimitive.Trigger;
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface ContentDialogPositionerProps extends DialogPrimitive.PositionerProps {}
+
+export const ContentDialogPositioner = withContext<HTMLDivElement, ContentDialogPositionerProps>(
+  DialogPrimitive.Positioner,
+  "positioner",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface ContentDialogBackdropProps extends DialogPrimitive.BackdropProps {}
+
+export const ContentDialogBackdrop = withContext<HTMLDivElement, ContentDialogBackdropProps>(
+  DialogPrimitive.Backdrop,
+  "backdrop",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface ContentDialogContentProps
+  extends DialogPrimitive.ContentProps,
+    Pick<StyleProps, "width" | "maxWidth"> {}
+
+export const ContentDialogContent = withContext<HTMLDivElement, ContentDialogContentProps>(
+  withStyleProps(DialogPrimitive.Content),
+  "content",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface ContentDialogHeaderProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const ContentDialogHeader = React.forwardRef<HTMLDivElement, ContentDialogHeaderProps>(
+  ({ className, ...props }, ref) => {
+    const classNames = useClassNames();
+    const { isRendered } = closeButtonTracker.useRenderTracking();
+
+    return (
+      <Primitive.div
+        ref={ref}
+        data-show-close-button={dataAttr(isRendered)}
+        className={clsx(classNames.header, className)}
+        {...props}
+      />
+    );
+  },
+);
+
+ContentDialogHeader.displayName = "ContentDialogHeader";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface ContentDialogTitleProps extends DialogPrimitive.TitleProps {}
+
+export const ContentDialogTitle = withContext<HTMLHeadingElement, ContentDialogTitleProps>(
+  DialogPrimitive.Title,
+  "title",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface ContentDialogDescriptionProps extends DialogPrimitive.DescriptionProps {}
+
+export const ContentDialogDescription = withContext<
+  HTMLParagraphElement,
+  ContentDialogDescriptionProps
+>(DialogPrimitive.Description, "description");
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface ContentDialogBodyProps
+  extends PrimitiveProps,
+    Pick<StyleProps, "paddingX" | "minHeight" | "maxHeight" | "justifyContent" | "alignItems">,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const ContentDialogBody = React.forwardRef<HTMLDivElement, ContentDialogBodyProps>(
+  (props, forwardedRef) => {
+    const classNames = useClassNames();
+    const { style, restProps } = useStyleProps(props);
+    const { className, ...otherProps } = restProps;
+
+    const ref = React.useRef<HTMLDivElement>(null);
+    const [scrolled, setScrolled] = React.useState(false);
+    const [overflowing, setOverflowing] = React.useState(false);
+
+    React.useEffect(() => {
+      const element = ref.current;
+      if (!element) return;
+
+      const check = () => {
+        setScrolled(element.scrollTop > 0);
+        // Subtract the current bottom padding so overflow detection stays independent
+        // of the padding we conditionally apply — otherwise that padding would count as
+        // overflow and the state would never settle (padding -> overflow -> padding...).
+        const paddingBottom = Number.parseFloat(getComputedStyle(element).paddingBottom) || 0;
+        setOverflowing(element.scrollHeight - paddingBottom > element.clientHeight);
+      };
+      check();
+
+      element.addEventListener("scroll", check);
+
+      const observer = new ResizeObserver(check);
+      observer.observe(element);
+
+      return () => {
+        element.removeEventListener("scroll", check);
+        observer.disconnect();
+      };
+    }, []);
+
+    return (
+      <Primitive.div
+        ref={composeRefs(ref, forwardedRef)}
+        data-scrolled={dataAttr(scrolled)}
+        data-overflow={dataAttr(overflowing)}
+        className={clsx(classNames.body, className)}
+        style={style}
+        {...otherProps}
+      />
+    );
+  },
+);
+
+ContentDialogBody.displayName = "ContentDialogBody";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface ContentDialogFooterProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const ContentDialogFooter = withContext<HTMLDivElement, ContentDialogFooterProps>(
+  Primitive.div,
+  "footer",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface ContentDialogActionProps extends DialogPrimitive.CloseButtonProps {}
+
+export const ContentDialogAction = DialogPrimitive.CloseButton;
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface ContentDialogCloseButtonProps extends DialogPrimitive.CloseButtonProps {}
+
+export const ContentDialogCloseButton = React.forwardRef<
+  HTMLButtonElement,
+  ContentDialogCloseButtonProps
+>(({ className, ...props }, ref) => {
+  const classNames = useClassNames();
+  const { trackRef } = closeButtonTracker.useRenderTracking();
+
+  return (
+    <DialogPrimitive.CloseButton
+      ref={composeRefs(ref, trackRef)}
+      className={clsx(classNames.closeButton, className)}
+      {...props}
+    />
+  );
+});
+
+ContentDialogCloseButton.displayName = "ContentDialogCloseButton";

package/src/components/ContentDialog/index.ts

@@ -0,0 +1,33 @@
+// NOTE: dialog naming is mid-rename; rootage/vars already use the new names, recipes and react components still use the old ones.
+// Semantically (= snippet naming), this component is the Dialog:
+//   snippet AlertDialog → react Dialog        → recipe "dialog"         → vars alertDialog
+//   snippet Dialog      → react ContentDialog → recipe "content-dialog" → vars dialog
+
+export {
+  ContentDialogBackdrop,
+  ContentDialogPositioner,
+  ContentDialogContent,
+  ContentDialogBody,
+  ContentDialogDescription,
+  ContentDialogFooter,
+  ContentDialogHeader,
+  ContentDialogRoot,
+  ContentDialogTitle,
+  ContentDialogTrigger,
+  ContentDialogAction,
+  ContentDialogCloseButton,
+  type ContentDialogBackdropProps,
+  type ContentDialogPositionerProps,
+  type ContentDialogContentProps,
+  type ContentDialogBodyProps,
+  type ContentDialogDescriptionProps,
+  type ContentDialogFooterProps,
+  type ContentDialogHeaderProps,
+  type ContentDialogRootProps,
+  type ContentDialogTitleProps,
+  type ContentDialogTriggerProps,
+  type ContentDialogActionProps,
+  type ContentDialogCloseButtonProps,
+} from "./ContentDialog";
+
+export * as ContentDialog from "./ContentDialog.namespace";

package/src/components/Dialog/index.ts

@@ -1,3 +1,8 @@
+// NOTE: dialog naming is mid-rename; rootage/vars already use the new names, recipes and react components still use the old ones.
+// Semantically (= snippet naming), this component is the AlertDialog:
+//   snippet AlertDialog → react Dialog        → recipe "dialog"         → vars alertDialog
+//   snippet Dialog      → react ContentDialog → recipe "content-dialog" → vars dialog
+
 export {
   DialogBackdrop,
   DialogPositioner,

package/src/components/QuantityPicker/QuantityPicker.namespace.ts

@@ -0,0 +1,12 @@
+export {
+  QuantityPickerRoot as Root,
+  QuantityPickerDecrementButton as DecrementButton,
+  QuantityPickerValueDisplay as ValueDisplay,
+  QuantityPickerIncrementButton as IncrementButton,
+  QuantityPickerHiddenInput as HiddenInput,
+  type QuantityPickerRootProps as RootProps,
+  type QuantityPickerDecrementButtonProps as DecrementButtonProps,
+  type QuantityPickerValueDisplayProps as ValueDisplayProps,
+  type QuantityPickerIncrementButtonProps as IncrementButtonProps,
+  type QuantityPickerHiddenInputProps as HiddenInputProps,
+} from "./QuantityPicker";

package/src/components/QuantityPicker/QuantityPicker.test.tsx

@@ -0,0 +1,108 @@
+import { render } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "bun:test";
+import { QuantityPicker } from "./index";
+
+afterEach(() => {
+  document.body.replaceChildren();
+});
+
+describe("QuantityPicker", () => {
+  it("값 표시 슬롯 양옆에 divider DOM을 배치하고 action icon slot을 연결한다", () => {
+    const { getByLabelText, getByText, container } = render(
+      <QuantityPicker.Root defaultValue={1} min={0} max={5} aria-label="수량">
+        <QuantityPicker.DecrementButton aria-label="줄이기" icon={<svg />} />
+        <QuantityPicker.ValueDisplay />
+        <QuantityPicker.IncrementButton aria-label="늘리기" icon={<svg />} />
+        <QuantityPicker.HiddenInput name="quantity" />
+      </QuantityPicker.Root>,
+    );
+
+    const valueDisplay = getByText("1").closest(".seed-quantity-picker__valueDisplay");
+    if (!valueDisplay) throw new Error("값 표시를 찾을 수 없습니다.");
+    const decrementButton = getByLabelText("줄이기");
+    const incrementButton = getByLabelText("늘리기");
+
+    expect(valueDisplay).toHaveClass("seed-quantity-picker__valueDisplay");
+    expect(valueDisplay.previousElementSibling).toHaveClass("seed-quantity-picker__divider");
+    expect(valueDisplay.nextElementSibling).toHaveClass("seed-quantity-picker__divider");
+    expect(valueDisplay.previousElementSibling?.previousElementSibling).toBe(decrementButton);
+    expect(valueDisplay.nextElementSibling?.nextElementSibling).toBe(incrementButton);
+    expect(getByLabelText("줄이기").firstElementChild).toHaveClass(
+      "seed-quantity-picker__decrementIcon",
+    );
+    expect(getByLabelText("줄이기").firstElementChild).toHaveAttribute("aria-hidden", "true");
+    expect(getByLabelText("늘리기").firstElementChild).toHaveClass(
+      "seed-quantity-picker__incrementIcon",
+    );
+    expect(container.querySelectorAll(".seed-quantity-picker__divider")).toHaveLength(2);
+  });
+
+  it("fallback children은 버튼의 접근 가능한 이름으로 유지한다", () => {
+    const { getByRole } = render(
+      <QuantityPicker.Root min={0} max={5} aria-label="수량">
+        <QuantityPicker.DecrementButton>수량 줄이기</QuantityPicker.DecrementButton>
+        <QuantityPicker.ValueDisplay />
+        <QuantityPicker.IncrementButton>수량 늘리기</QuantityPicker.IncrementButton>
+      </QuantityPicker.Root>,
+    );
+
+    expect(getByRole("button", { name: "수량 줄이기" })).toBeInTheDocument();
+    expect(getByRole("button", { name: "수량 늘리기" })).toBeInTheDocument();
+  });
+
+  it("직접 인접한 action과 값 표시 사이에만 divider를 삽입한다", () => {
+    const { container } = render(
+      <QuantityPicker.Root min={0} max={5} aria-label="수량">
+        <QuantityPicker.DecrementButton aria-label="줄이기" icon={<svg />} />
+        <QuantityPicker.ValueDisplay />
+        <QuantityPicker.HiddenInput name="quantity" />
+      </QuantityPicker.Root>,
+    );
+
+    expect(container.querySelectorAll(".seed-quantity-picker__divider")).toHaveLength(1);
+  });
+
+  it("최대값의 자릿수만큼 0으로 채운 숨김 요소로 값 표시 너비를 확보한다", () => {
+    const { container } = render(
+      <QuantityPicker.Root min={0} max={123} aria-label="수량">
+        <QuantityPicker.DecrementButton aria-label="줄이기" icon={<svg />} />
+        <QuantityPicker.ValueDisplay />
+        <QuantityPicker.IncrementButton aria-label="늘리기" icon={<svg />} />
+      </QuantityPicker.Root>,
+    );
+
+    const placeholder = container.querySelector(".seed-quantity-picker__valueDisplayPlaceholder");
+
+    expect(placeholder).toHaveAttribute("aria-hidden", "true");
+    expect(placeholder).toHaveTextContent("000");
+  });
+
+  it("숨김 요소에도 getValueText를 적용해 포매팅된 값의 너비를 확보한다", () => {
+    const { container } = render(
+      <QuantityPicker.Root
+        min={0}
+        max={123}
+        getValueText={(valueText, value) => `${valueText}개(${value.toString()})`}
+        aria-label="수량"
+      >
+        <QuantityPicker.ValueDisplay />
+      </QuantityPicker.Root>,
+    );
+
+    const placeholder = container.querySelector(".seed-quantity-picker__valueDisplayPlaceholder");
+
+    expect(placeholder).toHaveTextContent("000개(000)");
+  });
+
+  it("범위 끝에서는 해당 action icon에도 disabled state를 전달한다", () => {
+    const { getByLabelText } = render(
+      <QuantityPicker.Root min={0} max={1} value={1} aria-label="수량">
+        <QuantityPicker.DecrementButton aria-label="줄이기" icon={<svg />} />
+        <QuantityPicker.ValueDisplay />
+        <QuantityPicker.IncrementButton aria-label="늘리기" icon={<svg />} />
+      </QuantityPicker.Root>,
+    );
+
+    expect(getByLabelText("늘리기").firstElementChild).toHaveAttribute("data-disabled");
+  });
+});

package/src/components/QuantityPicker/QuantityPicker.tsx

@@ -0,0 +1,214 @@
+"use client";
+
+import { mergeProps } from "@seed-design/dom-utils";
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import {
+  QuantityPicker as QuantityPickerPrimitive,
+  useQuantityPickerContext,
+} from "@seed-design/react-quantity-picker";
+import {
+  quantityPicker,
+  type QuantityPickerVariantProps,
+} from "@seed-design/css/recipes/quantity-picker";
+import clsx from "clsx";
+import * as React from "react";
+import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
+import { createWithStateProps } from "../../utils/createWithStateProps";
+
+const { ClassNamesProvider, useClassNames } = createSlotRecipeContext(quantityPicker);
+const withStateProps = createWithStateProps([useQuantityPickerContext]);
+
+function isQuantityPickerButton(child: React.ReactNode) {
+  return (
+    React.isValidElement(child) &&
+    (child.type === QuantityPickerDecrementButton || child.type === QuantityPickerIncrementButton)
+  );
+}
+
+function isQuantityPickerValueDisplay(child: React.ReactNode) {
+  return React.isValidElement(child) && child.type === QuantityPickerValueDisplay;
+}
+
+function withDividers(children: React.ReactNode, dividerClassName: string) {
+  const childArray = React.Children.toArray(children);
+
+  return childArray.flatMap((child, index) => {
+    const nextChild = childArray[index + 1];
+    const shouldInsertDivider =
+      (isQuantityPickerButton(child) && isQuantityPickerValueDisplay(nextChild)) ||
+      (isQuantityPickerValueDisplay(child) && isQuantityPickerButton(nextChild));
+
+    if (!shouldInsertDivider) return child;
+
+    return [
+      child,
+      <Primitive.div
+        key={`divider-${index.toString()}`}
+        aria-hidden="true"
+        className={dividerClassName}
+      />,
+    ];
+  });
+}
+
+function getValueDisplayPlaceholder(max: number) {
+  return String(max).replace(/\d/g, "0");
+}
+
+function renderIcon(
+  icon: React.ReactNode,
+  className: string,
+  stateProps: { "data-disabled"?: string },
+  ariaHidden: boolean,
+) {
+  if (!React.isValidElement<{ className?: string }>(icon)) return icon;
+
+  return React.cloneElement(
+    icon as React.ReactElement<{
+      className?: string;
+      "aria-hidden"?: boolean;
+      "data-disabled"?: string;
+    }>,
+    {
+      ...(ariaHidden ? { "aria-hidden": true } : {}),
+      className: clsx(icon.props.className, className),
+      "data-disabled": stateProps["data-disabled"],
+    },
+  );
+}
+
+export type QuantityPickerRootProps = QuantityPickerVariantProps &
+  QuantityPickerPrimitive.RootProps;
+
+export const QuantityPickerRoot = React.forwardRef<HTMLDivElement, QuantityPickerRootProps>(
+  (props, ref) => {
+    const [variantProps, otherProps] = quantityPicker.splitVariantProps(props);
+    const {
+      children,
+      className,
+      removable: _removable,
+      removeAriaLabel: _removeAriaLabel,
+      ...rootProps
+    } = otherProps;
+    const classNames = quantityPicker(variantProps);
+    const quantityPickerRootProps: QuantityPickerPrimitive.RootProps = props.removable
+      ? {
+          ...rootProps,
+          removable: true,
+          removeAriaLabel: props.removeAriaLabel,
+        }
+      : {
+          ...rootProps,
+          removable: false,
+        };
+
+    return (
+      <ClassNamesProvider value={classNames}>
+        <QuantityPickerPrimitive.Root
+          ref={ref}
+          className={clsx(classNames.root, className)}
+          {...quantityPickerRootProps}
+        >
+          {withDividers(children, classNames.divider)}
+        </QuantityPickerPrimitive.Root>
+      </ClassNamesProvider>
+    );
+  },
+);
+QuantityPickerRoot.displayName = "QuantityPickerRoot";
+
+interface QuantityPickerButtonProps
+  extends PrimitiveProps,
+    Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "disabled" | "type"> {
+  icon?: React.ReactNode;
+  loadingIndicator?: React.ReactNode;
+}
+
+export interface QuantityPickerDecrementButtonProps
+  extends Omit<QuantityPickerPrimitive.DecrementButtonProps, "children">,
+    QuantityPickerButtonProps {
+  removeIcon?: React.ReactNode;
+}
+
+export const QuantityPickerDecrementButton = React.forwardRef<
+  HTMLButtonElement,
+  QuantityPickerDecrementButtonProps
+>(({ children, className, icon, loadingIndicator, removeIcon, ...props }, ref) => {
+  const classNames = useClassNames();
+  const { decrementIconProps, decrementLoading, isRemoveButton } = useQuantityPickerContext();
+  const content = decrementLoading
+    ? loadingIndicator
+    : isRemoveButton
+      ? (removeIcon ?? icon)
+      : icon;
+  const contentIsIcon = content !== null && content !== undefined;
+
+  return (
+    <QuantityPickerPrimitive.DecrementButton
+      ref={ref}
+      className={clsx(classNames.decrementButton, className)}
+      {...props}
+    >
+      {renderIcon(content ?? children, classNames.decrementIcon, decrementIconProps, contentIsIcon)}
+    </QuantityPickerPrimitive.DecrementButton>
+  );
+});
+QuantityPickerDecrementButton.displayName = "QuantityPickerDecrementButton";
+
+export interface QuantityPickerValueDisplayProps
+  extends QuantityPickerPrimitive.ValueDisplayProps {}
+
+export const QuantityPickerValueDisplay = withStateProps(
+  React.forwardRef<HTMLSpanElement, QuantityPickerValueDisplayProps>(
+    ({ className, ...props }, ref) => {
+      const classNames = useClassNames();
+      const { getValueText, max, valueDisplayProps } = useQuantityPickerContext();
+      const placeholder = getValueDisplayPlaceholder(max);
+
+      return (
+        <Primitive.span
+          ref={ref}
+          {...mergeProps(valueDisplayProps, props)}
+          className={clsx(classNames.valueDisplay, className)}
+        >
+          <Primitive.span aria-hidden="true" className={classNames.valueDisplayPlaceholder}>
+            {getValueText(placeholder, placeholder)}
+          </Primitive.span>
+          <Primitive.span className={classNames.valueDisplayText}>
+            {valueDisplayProps.children}
+          </Primitive.span>
+        </Primitive.span>
+      );
+    },
+  ),
+);
+QuantityPickerValueDisplay.displayName = "QuantityPickerValueDisplay";
+
+export interface QuantityPickerIncrementButtonProps
+  extends Omit<QuantityPickerPrimitive.IncrementButtonProps, "children">,
+    QuantityPickerButtonProps {}
+
+export const QuantityPickerIncrementButton = React.forwardRef<
+  HTMLButtonElement,
+  QuantityPickerIncrementButtonProps
+>(({ children, className, icon, loadingIndicator, ...props }, ref) => {
+  const classNames = useClassNames();
+  const { incrementIconProps, incrementLoading } = useQuantityPickerContext();
+  const content = incrementLoading ? loadingIndicator : icon;
+  const contentIsIcon = content !== null && content !== undefined;
+
+  return (
+    <QuantityPickerPrimitive.IncrementButton
+      ref={ref}
+      className={clsx(classNames.incrementButton, className)}
+      {...props}
+    >
+      {renderIcon(content ?? children, classNames.incrementIcon, incrementIconProps, contentIsIcon)}
+    </QuantityPickerPrimitive.IncrementButton>
+  );
+});
+QuantityPickerIncrementButton.displayName = "QuantityPickerIncrementButton";
+
+export interface QuantityPickerHiddenInputProps extends QuantityPickerPrimitive.HiddenInputProps {}
+
+export const QuantityPickerHiddenInput = QuantityPickerPrimitive.HiddenInput;

package/src/components/QuantityPicker/index.ts

@@ -0,0 +1,14 @@
+export {
+  QuantityPickerRoot,
+  QuantityPickerDecrementButton,
+  QuantityPickerValueDisplay,
+  QuantityPickerIncrementButton,
+  QuantityPickerHiddenInput,
+  type QuantityPickerRootProps,
+  type QuantityPickerDecrementButtonProps,
+  type QuantityPickerValueDisplayProps,
+  type QuantityPickerIncrementButtonProps,
+  type QuantityPickerHiddenInputProps,
+} from "./QuantityPicker";
+
+export * as QuantityPicker from "./QuantityPicker.namespace";

package/src/components/ResponsiveDialog/ResponsiveDialog.namespace.ts

@@ -0,0 +1,28 @@
+export {
+  ResponsiveDialogAction as Action,
+  ResponsiveDialogBackdrop as Backdrop,
+  ResponsiveDialogBody as Body,
+  ResponsiveDialogContent as Content,
+  ResponsiveDialogDescription as Description,
+  ResponsiveDialogFooter as Footer,
+  ResponsiveDialogHandle as Handle,
+  ResponsiveDialogHeader as Header,
+  ResponsiveDialogPositioner as Positioner,
+  ResponsiveDialogRoot as Root,
+  ResponsiveDialogTitle as Title,
+  ResponsiveDialogTrigger as Trigger,
+  ResponsiveDialogCloseButton as CloseButton,
+  type ResponsiveDialogActionProps as ActionProps,
+  type ResponsiveDialogBackdropProps as BackdropProps,
+  type ResponsiveDialogBodyProps as BodyProps,
+  type ResponsiveDialogContentProps as ContentProps,
+  type ResponsiveDialogDescriptionProps as DescriptionProps,
+  type ResponsiveDialogFooterProps as FooterProps,
+  type ResponsiveDialogHandleProps as HandleProps,
+  type ResponsiveDialogHeaderProps as HeaderProps,
+  type ResponsiveDialogPositionerProps as PositionerProps,
+  type ResponsiveDialogRootProps as RootProps,
+  type ResponsiveDialogTitleProps as TitleProps,
+  type ResponsiveDialogTriggerProps as TriggerProps,
+  type ResponsiveDialogCloseButtonProps as CloseButtonProps,
+} from "./ResponsiveDialog";