@seed-design/react 0.0.0-alpha-20260324091316

package/src/components/PageBanner/PageBanner.tsx

@@ -0,0 +1,108 @@
+import type * as React from "react";
+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 {
+  DismissibleCloseButton,
+  DismissibleRoot,
+  type DismissibleRootProps,
+} from "../private/useDismissible";
+import clsx from "clsx";
+
+const { withContext, ClassNamesProvider } = createSlotRecipeContext(pageBanner);
+
+export interface PageBannerRootProps extends PageBannerVariantProps, DismissibleRootProps {}
+
+export const PageBannerRoot = forwardRef<HTMLDivElement, PageBannerRootProps>(
+  ({ className, ...props }, ref) => {
+    if (props.variant === "solid" && props.tone === "magic") {
+      console.error(
+        `\`${props.tone}\` tone is not available for \`${props.variant}\` variant in PageBanner components. Please use variant="weak" or a different tone instead.`,
+      );
+    }
+
+    const [variantProps, otherProps] = pageBanner.splitVariantProps(props);
+    const classNames = pageBanner(variantProps);
+
+    return (
+      <ClassNamesProvider value={classNames}>
+        <DismissibleRoot className={clsx(classNames.root, className)} ref={ref} {...otherProps} />
+      </ClassNamesProvider>
+    );
+  },
+);
+
+// Use these instead when ts implements this:
+// Control flow analysis for destructured rest element of discriminated union
+// https://github.com/microsoft/TypeScript/issues/15300
+
+// export type PageBannerRootProps = DismissibleRootProps &
+//   (
+//     | {
+//         variant?: Exclude<PageBannerVariantProps["variant"], "solid">;
+//         tone?: PageBannerVariantProps["tone"];
+//       }
+//     | {
+//         variant: Extract<PageBannerVariantProps["variant"], "solid">;
+//         tone?: Exclude<PageBannerVariantProps["tone"], "magic">;
+//       }
+//   );
+
+// export const PageBannerRoot = withProvider<HTMLDivElement, PageBannerRootProps>(
+//   DismissibleRoot,
+//   "root",
+// );
+
+export interface PageBannerContentProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const PageBannerContent = withContext<HTMLDivElement, PageBannerContentProps>(
+  Primitive.div,
+  "content",
+);
+
+export interface PageBannerBodyProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {}
+
+export const PageBannerBody = withContext<HTMLDivElement, PageBannerBodyProps>(
+  Primitive.div,
+  "body",
+);
+
+export interface PageBannerTitleProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLSpanElement> {}
+
+export const PageBannerTitle = withContext<HTMLSpanElement, PageBannerTitleProps>(
+  Primitive.span,
+  "title",
+);
+
+export interface PageBannerDescriptionProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLSpanElement> {}
+
+export const PageBannerDescription = withContext<HTMLSpanElement, PageBannerDescriptionProps>(
+  Primitive.span,
+  "description",
+);
+
+export interface PageBannerButtonProps
+  extends PrimitiveProps,
+    React.ButtonHTMLAttributes<HTMLButtonElement> {}
+
+export const PageBannerButton = withContext<HTMLButtonElement, PageBannerButtonProps>(
+  Primitive.button,
+  "button",
+);
+
+export interface PageBannerCloseButtonProps
+  extends PrimitiveProps,
+    React.ButtonHTMLAttributes<HTMLButtonElement> {}
+
+export const PageBannerCloseButton = withContext<HTMLButtonElement, PageBannerCloseButtonProps>(
+  DismissibleCloseButton,
+  "closeButton",
+);

package/src/components/PageBanner/index.ts

@@ -0,0 +1,18 @@
+export {
+  PageBannerBody,
+  PageBannerCloseButton,
+  PageBannerContent,
+  PageBannerDescription,
+  PageBannerButton,
+  PageBannerRoot,
+  PageBannerTitle,
+  type PageBannerBodyProps,
+  type PageBannerCloseButtonProps,
+  type PageBannerContentProps,
+  type PageBannerDescriptionProps,
+  type PageBannerButtonProps,
+  type PageBannerRootProps,
+  type PageBannerTitleProps,
+} from "./PageBanner";
+
+export * as PageBanner from "./PageBanner.namespace";

package/src/components/Portal/index.ts

@@ -0,0 +1,4 @@
+export {
+  type PortalProps,
+  Portal,
+} from "@seed-design/react-portal";

package/src/components/ProgressCircle/ProgressCircle.namespace.ts

@@ -0,0 +1,8 @@
+export {
+  ProgressCircleRoot as Root,
+  ProgressCircleTrack as Track,
+  ProgressCircleRange as Range,
+  type ProgressCircleRootProps as RootProps,
+  type ProgressCircleTrackProps as TrackProps,
+  type ProgressCircleRangeProps as RangeProps,
+} from "./ProgressCircle";

package/src/components/ProgressCircle/ProgressCircle.tsx

@@ -0,0 +1,31 @@
+import { ProgressCircle as ProgressCirclePrimitive } from "@seed-design/react-progress";
+import {
+  progressCircle,
+  type ProgressCircleVariantProps,
+} from "@seed-design/css/recipes/progress-circle";
+import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
+
+const { withContext, withProvider } = createSlotRecipeContext(progressCircle);
+
+export interface ProgressCircleRootProps
+  extends ProgressCirclePrimitive.RootProps,
+    Omit<ProgressCircleVariantProps, "indeterminate"> {}
+
+export const ProgressCircleRoot = withProvider<SVGSVGElement, ProgressCircleRootProps>(
+  ProgressCirclePrimitive.Root,
+  "root",
+);
+
+export interface ProgressCircleTrackProps extends ProgressCirclePrimitive.TrackProps {}
+
+export const ProgressCircleTrack = withContext<SVGCircleElement, ProgressCircleTrackProps>(
+  ProgressCirclePrimitive.Track,
+  "track",
+);
+
+export interface ProgressCircleRangeProps extends ProgressCirclePrimitive.RangeProps {}
+
+export const ProgressCircleRange = withContext<SVGCircleElement, ProgressCircleRangeProps>(
+  ProgressCirclePrimitive.Range,
+  "range",
+);

package/src/components/ProgressCircle/index.ts

@@ -0,0 +1,10 @@
+export {
+  ProgressCircleRoot,
+  ProgressCircleTrack,
+  ProgressCircleRange,
+  type ProgressCircleRootProps,
+  type ProgressCircleTrackProps,
+  type ProgressCircleRangeProps,
+} from "./ProgressCircle";
+
+export * as ProgressCircle from "./ProgressCircle.namespace";

package/src/components/PullToRefresh/PullToRefresh.namespace.ts

@@ -0,0 +1,10 @@
+export {
+  PullToRefreshContent as Content,
+  PullToRefreshIndicator as Indicator,
+  PullToRefreshRoot as Root,
+  type PullToRefreshContentProps as ContentProps,
+  type PullToRefreshIndicatorProps as IndicatorProps,
+  type PullToRefreshRootProps as RootProps,
+} from "./PullToRefresh";
+
+export { pullToRefreshPreventPull as preventPull } from "@seed-design/react-pull-to-refresh";

package/src/components/PullToRefresh/PullToRefresh.tsx

@@ -0,0 +1,28 @@
+import { PullToRefresh as PullToRefreshPrimitive } from "@seed-design/react-pull-to-refresh";
+import {
+  pullToRefresh,
+  type PullToRefreshVariantProps,
+} from "@seed-design/css/recipes/pull-to-refresh";
+import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
+
+const { withContext, withProvider } = createSlotRecipeContext(pullToRefresh);
+
+export interface PullToRefreshRootProps
+  extends PullToRefreshVariantProps,
+    PullToRefreshPrimitive.RootProps {}
+
+export const PullToRefreshRoot = withProvider<HTMLDivElement, PullToRefreshRootProps>(
+  PullToRefreshPrimitive.Root,
+  "root",
+);
+
+export interface PullToRefreshIndicatorProps extends PullToRefreshPrimitive.IndicatorProps {}
+
+export const PullToRefreshIndicator = withContext<HTMLDivElement, PullToRefreshIndicatorProps>(
+  PullToRefreshPrimitive.Indicator,
+  "indicator",
+);
+
+export interface PullToRefreshContentProps extends PullToRefreshPrimitive.ContentProps {}
+
+export const PullToRefreshContent = PullToRefreshPrimitive.Content;

package/src/components/PullToRefresh/index.ts

@@ -0,0 +1,12 @@
+export {
+  PullToRefreshContent,
+  PullToRefreshIndicator,
+  PullToRefreshRoot,
+  type PullToRefreshContentProps,
+  type PullToRefreshIndicatorProps,
+  type PullToRefreshRootProps,
+} from "./PullToRefresh";
+
+export { pullToRefreshPreventPull } from "@seed-design/react-pull-to-refresh";
+
+export * as PullToRefresh from "./PullToRefresh.namespace";

package/src/components/RadioGroup/RadioGroup.namespace.ts

@@ -0,0 +1,14 @@
+export {
+  RadioGroupRoot as Root,
+  RadioGroupItem as Item,
+  RadioGroupItemLabel as ItemLabel,
+  RadioGroupItemControl as ItemControl,
+  RadioGroupItemIndicator as ItemIndicator,
+  RadioGroupItemHiddenInput as ItemHiddenInput,
+  type RadioGroupRootProps as RootProps,
+  type RadioGroupItemProps as ItemProps,
+  type RadioGroupItemLabelProps as ItemLabelProps,
+  type RadioGroupItemControlProps as ItemControlProps,
+  type RadioGroupItemIndicatorProps as ItemIndicatorProps,
+  type RadioGroupItemHiddenInputProps as ItemHiddenInputProps,
+} from "./RadioGroup";

package/src/components/RadioGroup/RadioGroup.tsx

@@ -0,0 +1,138 @@
+import { radio, type RadioVariantProps } from "@seed-design/css/recipes/radio";
+import { radioGroup, type RadioGroupVariantProps } from "@seed-design/css/recipes/radio-group";
+import { radiomark, type RadiomarkVariantProps } from "@seed-design/css/recipes/radiomark";
+import { mergeProps } from "@seed-design/dom-utils";
+import {
+  RadioGroup as RadioGroupPrimitive,
+  useRadioGroupItemContext,
+} from "@seed-design/react-radio-group";
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import clsx from "clsx";
+import { forwardRef } from "react";
+import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
+import { createWithStateProps } from "../../utils/createWithStateProps";
+import { InternalIcon } from "../private/Icon";
+import { splitMultipleVariantsProps } from "../../utils/splitMultipleVariantsProps";
+import { createRecipeContext } from "../../utils/createRecipeContext";
+
+const { withContext: withGroupContext } = createRecipeContext(radioGroup);
+const { ClassNamesProvider, withContext } = createSlotRecipeContext(radio);
+const {
+  withProvider: withRadiomarkProvider,
+  useClassNames: useRadiomarkClassNames,
+  PropsProvider: RadiomarkPropsProvider,
+} = createSlotRecipeContext(radiomark);
+const withStateProps = createWithStateProps([useRadioGroupItemContext]);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface RadioGroupRootProps
+  extends RadioGroupVariantProps,
+    PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const RadioGroupRoot = withGroupContext<HTMLDivElement, RadioGroupRootProps>(Primitive.div);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface RadioGroupItemProps
+  extends RadioVariantProps,
+    RadiomarkVariantProps,
+    RadioGroupPrimitive.ItemProps {}
+
+export const RadioGroupItem = Object.assign(
+  forwardRef<HTMLLabelElement, RadioGroupItemProps>(({ className, ...props }, ref) => {
+    const [{ radio: radioVariantProps, radiomark: radiomarkVariantProps }, otherProps] =
+      splitMultipleVariantsProps(props, { radio, radiomark });
+
+    const classNames = radio(radioVariantProps);
+
+    return (
+      <RadiomarkPropsProvider value={radiomarkVariantProps}>
+        <ClassNamesProvider value={classNames}>
+          <RadioGroupPrimitive.Item
+            ref={ref}
+            className={clsx(classNames.root, className)}
+            {...otherProps}
+          />
+        </ClassNamesProvider>
+      </RadiomarkPropsProvider>
+    );
+  }),
+  {
+    Primitive: RadioGroupPrimitive.Item,
+  },
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface RadioGroupItemLabelProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLSpanElement> {}
+
+export const RadioGroupItemLabel = withContext<HTMLSpanElement, RadioGroupItemLabelProps>(
+  withStateProps(Primitive.span),
+  "label",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface RadioGroupItemControlProps
+  extends RadiomarkVariantProps,
+    RadioGroupPrimitive.ItemControlProps {}
+
+export const RadioGroupItemControl = withRadiomarkProvider<
+  HTMLDivElement,
+  RadioGroupItemControlProps
+>(RadioGroupPrimitive.ItemControl, "root");
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface RadioGroupItemIndicatorProps extends React.SVGAttributes<SVGSVGElement> {
+  /**
+   * The icon to display when the radio is unchecked.
+   */
+  unchecked?: React.ReactNode;
+
+  /**
+   * The icon to display when the radio is checked.
+   */
+  checked?: React.ReactNode;
+}
+
+export const RadioGroupItemIndicator = forwardRef<SVGSVGElement, RadioGroupItemIndicatorProps>(
+  ({ unchecked: uncheckedSvg, checked: checkedSvg, ...otherProps }, ref) => {
+    const { stateProps, checked } = useRadioGroupItemContext();
+    const classNames = useRadiomarkClassNames();
+
+    const mergedProps = mergeProps(
+      stateProps,
+      { className: classNames.icon },
+      otherProps as React.HTMLAttributes<HTMLElement>,
+    );
+
+    if (checked)
+      return (
+        <InternalIcon
+          ref={ref}
+          svg={
+            checkedSvg ?? (
+              <svg aria-hidden="true" viewBox="0 0 24 24">
+                <circle cx="12" cy="12" r="12" fill="currentColor" />
+              </svg>
+            )
+          }
+          {...mergedProps}
+        />
+      );
+    if (uncheckedSvg) return <InternalIcon ref={ref} svg={uncheckedSvg} {...mergedProps} />;
+    return null;
+  },
+);
+RadioGroupItemIndicator.displayName = "RadioGroupItemIndicator";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface RadioGroupItemHiddenInputProps extends RadioGroupPrimitive.ItemHiddenInputProps {}
+
+export const RadioGroupItemHiddenInput = RadioGroupPrimitive.ItemHiddenInput;

package/src/components/RadioGroup/index.ts

@@ -0,0 +1,16 @@
+export {
+  RadioGroupRoot,
+  RadioGroupItem,
+  RadioGroupItemLabel,
+  RadioGroupItemControl,
+  RadioGroupItemIndicator,
+  RadioGroupItemHiddenInput,
+  type RadioGroupRootProps,
+  type RadioGroupItemProps,
+  type RadioGroupItemLabelProps,
+  type RadioGroupItemControlProps,
+  type RadioGroupItemIndicatorProps,
+  type RadioGroupItemHiddenInputProps,
+} from "./RadioGroup";
+
+export * as RadioGroup from "./RadioGroup.namespace";

package/src/components/RadioGroupField/RadioGroupField.namespace.ts

@@ -0,0 +1,18 @@
+export {
+  RadioGroupFieldRoot as Root,
+  RadioGroupFieldHeader as Header,
+  RadioGroupFieldLabel as Label,
+  RadioGroupFieldIndicatorText as IndicatorText,
+  RadioGroupFieldRequiredIndicator as RequiredIndicator,
+  RadioGroupFieldFooter as Footer,
+  RadioGroupFieldDescription as Description,
+  RadioGroupFieldErrorMessage as ErrorMessage,
+  type RadioGroupFieldRootProps as RootProps,
+  type RadioGroupFieldHeaderProps as HeaderProps,
+  type RadioGroupFieldLabelProps as LabelProps,
+  type RadioGroupFieldIndicatorTextProps as IndicatorTextProps,
+  type RadioGroupFieldRequiredIndicatorProps as RequiredIndicatorProps,
+  type RadioGroupFieldFooterProps as FooterProps,
+  type RadioGroupFieldDescriptionProps as DescriptionProps,
+  type RadioGroupFieldErrorMessageProps as ErrorMessageProps,
+} from "./RadioGroupField";

package/src/components/RadioGroupField/RadioGroupField.tsx

@@ -0,0 +1,114 @@
+"use client";
+
+import { field, type FieldVariantProps } from "@seed-design/css/recipes/field";
+import { fieldLabel, type FieldLabelVariantProps } from "@seed-design/css/recipes/field-label";
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import { RadioGroup as RadioGroupPrimitive } from "@seed-design/react-radio-group";
+import type * as React from "react";
+import { forwardRef } from "react";
+import clsx from "clsx";
+import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
+import { InternalIcon } from "../private/Icon";
+
+const { withProvider, withContext } = createSlotRecipeContext(field);
+const {
+  withContext: withLabelContext,
+  withProvider: withLabelProvider,
+  useClassNames: useLabelClassNames,
+} = createSlotRecipeContext(fieldLabel);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface RadioGroupFieldRootProps
+  extends FieldVariantProps,
+    RadioGroupPrimitive.RootProps {}
+
+export const RadioGroupFieldRoot = withProvider<HTMLDivElement, RadioGroupFieldRootProps>(
+  RadioGroupPrimitive.Root,
+  "root",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface RadioGroupFieldHeaderProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const RadioGroupFieldHeader = withContext<HTMLDivElement, RadioGroupFieldHeaderProps>(
+  Primitive.div,
+  "header",
+);
+
+export interface RadioGroupFieldLabelProps
+  extends FieldLabelVariantProps,
+    RadioGroupPrimitive.LabelProps {}
+
+export const RadioGroupFieldLabel = withLabelProvider<HTMLDivElement, RadioGroupFieldLabelProps>(
+  RadioGroupPrimitive.Label,
+  "root",
+);
+
+export interface RadioGroupFieldIndicatorTextProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLSpanElement> {}
+
+export const RadioGroupFieldIndicatorText = withLabelContext<
+  HTMLSpanElement,
+  RadioGroupFieldIndicatorTextProps
+>(Primitive.span, "indicatorText");
+
+export interface RadioGroupFieldRequiredIndicatorProps extends React.SVGProps<SVGElement> {}
+
+export const RadioGroupFieldRequiredIndicator = forwardRef<
+  SVGSVGElement,
+  RadioGroupFieldRequiredIndicatorProps
+>(({ className, ...props }, ref) => {
+  const { indicatorIcon } = useLabelClassNames();
+
+  return (
+    <InternalIcon
+      svg={
+        // biome-ignore lint/a11y/noSvgWithoutTitle: InternalIcon is aria-hidden
+        <svg
+          viewBox="0 0 6 6"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          className={clsx(indicatorIcon, className)}
+        >
+          <path
+            d="M3.75002 1.55859L4.41318 1.09468C4.75243 0.857361 5.21982 0.939865 5.45732 1.27899C5.69499 1.61836 5.61243 2.08615 5.27295 2.32366L4.30763 2.99902L5.27372 3.67612C5.61285 3.91381 5.69517 4.38137 5.45761 4.72059C5.21999 5.0599 4.7523 5.14233 4.41299 4.90471L3.75002 4.44043V5.25C3.75002 5.66421 3.41423 6 3.00002 6C2.5858 6 2.25002 5.66421 2.25002 5.25V4.44043L1.58704 4.90471C1.24773 5.14233 0.780041 5.0599 0.542418 4.72059C0.304856 4.38137 0.387176 3.91381 0.726309 3.67612L1.6924 2.99902L0.727079 2.32366C0.387603 2.08615 0.305043 1.61836 0.542707 1.27899C0.780206 0.939865 1.2476 0.857361 1.58685 1.09468L2.25002 1.55859V0.75C2.25002 0.335786 2.5858 0 3.00002 0C3.41423 0 3.75002 0.335786 3.75002 0.75V1.55859Z"
+            fill="currentColor"
+          />
+        </svg>
+      }
+      ref={ref}
+      {...props}
+    />
+  );
+});
+RadioGroupFieldRequiredIndicator.displayName = "RadioGroupFieldRequiredIndicator";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface RadioGroupFieldFooterProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const RadioGroupFieldFooter = withContext<HTMLDivElement, RadioGroupFieldFooterProps>(
+  Primitive.div,
+  "footer",
+);
+
+export interface RadioGroupFieldDescriptionProps extends RadioGroupPrimitive.DescriptionProps {}
+
+export const RadioGroupFieldDescription = withContext<
+  HTMLSpanElement,
+  RadioGroupFieldDescriptionProps
+>(RadioGroupPrimitive.Description, "description");
+
+export interface RadioGroupFieldErrorMessageProps extends RadioGroupPrimitive.ErrorMessageProps {}
+
+export const RadioGroupFieldErrorMessage = withContext<
+  HTMLDivElement,
+  RadioGroupFieldErrorMessageProps
+>(RadioGroupPrimitive.ErrorMessage, "errorMessage");

package/src/components/RadioGroupField/index.ts

@@ -0,0 +1,2 @@
+export * from "./RadioGroupField";
+export * as RadioGroupField from "./RadioGroupField.namespace";

package/src/components/ReactionButton/ReactionButton.tsx

@@ -0,0 +1,36 @@
+import {
+  reactionButton,
+  type ReactionButtonVariantProps,
+} from "@seed-design/css/recipes/reaction-button";
+import { Toggle as TogglePrimitive } from "@seed-design/react-toggle";
+import clsx from "clsx";
+import * as React from "react";
+import {
+  PendingButtonProvider,
+  usePendingButton,
+  type UsePendingButtonProps,
+} from "../LoadingIndicator/usePendingButton";
+
+export interface ReactionButtonProps
+  extends ReactionButtonVariantProps,
+    UsePendingButtonProps,
+    TogglePrimitive.RootProps {}
+
+export const ReactionButton = React.forwardRef<HTMLButtonElement, ReactionButtonProps>(
+  ({ size = "small", loading = false, className, ...otherProps }, ref) => {
+    const recipeClassName = reactionButton({ size });
+    const api = usePendingButton({ loading, disabled: otherProps.disabled });
+
+    return (
+      <PendingButtonProvider value={api}>
+        <TogglePrimitive.Root
+          ref={ref}
+          className={clsx(recipeClassName, className)}
+          {...api.stateProps}
+          {...otherProps}
+        />
+      </PendingButtonProvider>
+    );
+  },
+);
+ReactionButton.displayName = "ReactionButton";

package/src/components/ReactionButton/index.ts

@@ -0,0 +1,4 @@
+export {
+  ReactionButton,
+  type ReactionButtonProps,
+} from "./ReactionButton";

package/src/components/ResponsivePair/ResponsivePair.tsx

@@ -0,0 +1,44 @@
+import { Slot } from "@radix-ui/react-slot";
+import * as React from "react";
+import { Flex, type FlexProps } from "../Flex";
+
+export interface ResponsivePairProps extends Omit<FlexProps, "flexDirection" | "flexWrap"> {
+  /**
+   * @default "wrap-reverse"
+   */
+  wrap?: "wrap" | "wrap-reverse";
+
+  children: [React.ReactNode, React.ReactNode];
+}
+
+export const ResponsivePair = React.forwardRef<HTMLDivElement, ResponsivePairProps>(
+  (props, ref) => {
+    const { wrap = "wrap-reverse", gap, children, ...rest } = props;
+    const childrenArray = React.Children.toArray(children);
+    const style = {
+      "--seed-box-min-width": `calc(${100 / childrenArray.length}% - var(--responsive-pair-gap) / ${childrenArray.length})`,
+      "--seed-box-flex-grow": 1,
+    } as React.CSSProperties;
+
+    return (
+      <Flex
+        ref={ref}
+        display="flex"
+        flexDirection="row"
+        alignContent="stretch"
+        flexWrap={wrap}
+        gap={gap}
+        {...rest}
+        style={
+          {
+            "--responsive-pair-gap": "var(--seed-box-gap, 0px)",
+            ...rest.style,
+          } as React.CSSProperties
+        }
+      >
+        <Slot style={style}>{childrenArray[0]}</Slot>
+        <Slot style={style}>{childrenArray[1]}</Slot>
+      </Flex>
+    );
+  },
+);

package/src/components/ResponsivePair/index.ts

@@ -0,0 +1 @@
+export { ResponsivePair, type ResponsivePairProps } from "./ResponsivePair";