@seed-design/react 1.2.14 → 2.0.0

package/src/components/BottomSheet/BottomSheet.tsx

@@ -1,22 +1,41 @@
 import { bottomSheet, type BottomSheetVariantProps } from "@seed-design/css/recipes/bottom-sheet";
+import { composeRefs } from "@radix-ui/react-compose-refs";
 import { dataAttr } from "@seed-design/dom-utils";
-import { Drawer, useDrawerContext } from "@seed-design/react-drawer";
+import { Drawer } from "@seed-design/react-drawer";
 import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import clsx from "clsx";
 import { forwardRef } from "react";
+import { createRenderTrackingContext } from "../../utils/createRenderTrackingContext";
 import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
 import { withStyleProps, type StyleProps } from "../../utils/styled";
 
-const { withRootProvider, withContext } = createSlotRecipeContext(bottomSheet);
+const { withContext, useClassNames, ClassNamesProvider } = createSlotRecipeContext(bottomSheet);
 
-////////////////////////////////////////////////////////////////////////////////////
+const closeButtonTracker = createRenderTrackingContext("BottomSheetCloseButton");
 
-export interface BottomSheetRootProps extends BottomSheetVariantProps, Drawer.RootProps {}
+////////////////////////////////////////////////////////////////////////////////////
 
-export const BottomSheetRoot = withRootProvider<BottomSheetRootProps>(Drawer.Root, {
-  defaultProps: {
-    direction: "bottom",
-  },
-});
+export interface BottomSheetRootProps
+  extends BottomSheetVariantProps,
+    Omit<Drawer.RootProps, "direction"> {}
+
+export function BottomSheetRoot(props: BottomSheetRootProps) {
+  const [variantProps, otherProps] = bottomSheet.splitVariantProps({
+    direction: "bottom" as const,
+    lazyMount: true,
+    unmountOnExit: true,
+    ...props,
+  });
+  const classNames = bottomSheet(variantProps);
+
+  return (
+    <ClassNamesProvider value={classNames}>
+      <closeButtonTracker.Provider>
+        <Drawer.Root {...otherProps} />
+      </closeButtonTracker.Provider>
+    </ClassNamesProvider>
+  );
+}
 
 ////////////////////////////////////////////////////////////////////////////////////
 
@@ -64,15 +83,20 @@ export const BottomSheetHeader = withContext<HTMLDivElement, BottomSheetHeaderPr
 
 export interface BottomSheetTitleProps extends Drawer.TitleProps {}
 
-export const BottomSheetTitle = withContext<HTMLHeadingElement, BottomSheetTitleProps>(
-  forwardRef<HTMLHeadingElement, BottomSheetTitleProps>((props, ref) => {
-    const { isCloseButtonRendered } = useDrawerContext();
+export const BottomSheetTitle = forwardRef<HTMLHeadingElement, BottomSheetTitleProps>(
+  ({ className, ...props }, ref) => {
+    const classNames = useClassNames();
+    const { isRendered } = closeButtonTracker.useRenderTracking();
 
     return (
-      <Drawer.Title ref={ref} data-show-close-button={dataAttr(isCloseButtonRendered)} {...props} />
+      <Drawer.Title
+        ref={ref}
+        data-show-close-button={dataAttr(isRendered)}
+        className={clsx(classNames.title, className)}
+        {...props}
+      />
     );
-  }),
-  "title",
+  },
 );
 
 BottomSheetTitle.displayName = "BottomSheetTitle";
@@ -116,7 +140,19 @@ export const BottomSheetFooter = withContext<HTMLDivElement, BottomSheetFooterPr
 
 export interface BottomSheetCloseButtonProps extends Drawer.CloseButtonProps {}
 
-export const BottomSheetCloseButton = withContext<HTMLButtonElement, BottomSheetCloseButtonProps>(
-  Drawer.CloseButton,
-  "closeButton",
+export const BottomSheetCloseButton = forwardRef<HTMLButtonElement, BottomSheetCloseButtonProps>(
+  ({ className, ...props }, ref) => {
+    const classNames = useClassNames();
+    const { trackRef } = closeButtonTracker.useRenderTracking();
+
+    return (
+      <Drawer.CloseButton
+        ref={composeRefs(ref, trackRef)}
+        className={clsx(classNames.closeButton, className)}
+        {...props}
+      />
+    );
+  },
 );
+
+BottomSheetCloseButton.displayName = "BottomSheetCloseButton";

package/src/components/Box/Box.tsx

@@ -1,23 +1,46 @@
 import clsx from "clsx";
 import * as React from "react";
+import type { BreakpointThreshold } from "../../types/responsive";
 import { useStyleProps, type StyleProps } from "../../utils/styled";
 import { Slot } from "@radix-ui/react-slot";
 
-export interface BoxProps extends StyleProps, Omit<React.HTMLAttributes<HTMLDivElement>, "color"> {
-  as?: React.ElementType;
+export type BoxProps = StyleProps &
+  Omit<React.HTMLAttributes<HTMLDivElement>, "color"> & {
+    as?: React.ElementType;
 
-  asChild?: boolean;
-}
+    asChild?: boolean;
+
+    hideFrom?: BreakpointThreshold;
+  };
 
 export const Box = React.forwardRef<HTMLDivElement, BoxProps>((props, ref) => {
-  const { style, restProps } = useStyleProps(props);
+  const { hideFrom, ...rest } = props;
+  const { style, restProps } = useStyleProps(rest);
   const { as: Comp = "div", asChild = false, className, ...nativeProps } = restProps;
 
   if (asChild) {
     return (
-      <Slot ref={ref} className={clsx("seed-box", className)} style={style} {...nativeProps} />
+      <Slot
+        ref={ref}
+        className={clsx("seed-box", className)}
+        style={{
+          ...style,
+          ...(hideFrom && { [`--seed-box-display-${hideFrom}`]: "none" }),
+        }}
+        {...nativeProps}
+      />
     );
   }
 
-  return <Comp ref={ref} className={clsx("seed-box", className)} style={style} {...nativeProps} />;
+  return (
+    <Comp
+      ref={ref}
+      className={clsx("seed-box", className)}
+      style={{
+        ...style,
+        ...(hideFrom && { [`--seed-box-display-${hideFrom}`]: "none" }),
+      }}
+      {...nativeProps}
+    />
+  );
 });

package/src/components/Checkbox/Checkbox.tsx

@@ -35,43 +35,15 @@ export const CheckboxGroup = withGroupContext<HTMLDivElement, CheckboxGroupProps
 
 ////////////////////////////////////////////////////////////////////////////////////
 
-/**
- * @deprecated Use `regular` or `bold` instead of `default` or `stronger`
- */
-type CheckboxVariantDeprecatedWeightProps = "default" | "stronger";
-
 export interface CheckboxRootProps
-  extends Omit<CheckboxVariantProps, "weight">,
+  extends CheckboxVariantProps,
     CheckmarkVariantProps,
-    CheckboxPrimitive.RootProps {
-  weight?: CheckboxVariantProps["weight"] | CheckboxVariantDeprecatedWeightProps;
-}
+    CheckboxPrimitive.RootProps {}
 
 export const CheckboxRoot = Object.assign(
   forwardRef<HTMLLabelElement, CheckboxRootProps>(({ className, ...props }, ref) => {
-    if (
-      process.env.NODE_ENV !== "production" &&
-      (props.weight === "default" || props.weight === "stronger")
-    ) {
-      console.warn(
-        `[SEED Design System] Checkbox weight='${props.weight}' is deprecated and will be removed in @seed-design/react@2.0.0. Use weight='${props.weight === "default" ? "regular" : "bold"}' instead.`,
-      );
-    }
-
     const [{ checkbox: checkboxVariantProps, checkmark: checkmarkVariantProps }, otherProps] =
-      splitMultipleVariantsProps(
-        {
-          ...props,
-          // TODO: replace this mapping completely
-          weight:
-            props.weight === "stronger"
-              ? "bold"
-              : props.weight === "default"
-                ? "regular"
-                : props.weight,
-        },
-        { checkbox, checkmark },
-      );
+      splitMultipleVariantsProps(props, { checkbox, checkmark });
 
     const classNames = checkbox(checkboxVariantProps);
 

package/src/components/ChipTabs/ChipTabs.tsx

@@ -12,12 +12,6 @@ export interface ChipTabsRootProps extends ChipTabsVariantProps, TabsPrimitive.R
 
 export const ChipTabsRoot = forwardRef<HTMLDivElement, ChipTabsRootProps>(
   ({ className, ...props }, ref) => {
-    if (process.env.NODE_ENV !== "production" && props.variant === "brandSolid") {
-      console.warn(
-        "[SEED Design System] ChipTabs variant='brandSolid' is deprecated and will be removed in @seed-design/react@2.0.0. Use variant='neutralSolid' or variant='neutralOutline' instead.",
-      );
-    }
-
     const [variantProps, otherProps] = chipTabs.splitVariantProps(props);
     const classNames = chipTabs(variantProps);
 

package/src/components/Columns/Columns.tsx

@@ -1,10 +1,11 @@
 import * as React from "react";
+import type { DistributiveOmit } from "../../utils/styled";
 import { Box, type BoxProps } from "../Box/Box";
 
 /**
  * @deprecated Use `HStack` instead.
  */
-export interface ColumnsProps extends Omit<BoxProps, "display" | "direction"> {}
+export type ColumnsProps = DistributiveOmit<BoxProps, "display" | "direction">;
 
 /**
  * @deprecated Use `HStack` instead.
@@ -25,9 +26,9 @@ export const Columns = React.forwardRef<HTMLDivElement, ColumnsProps>((props, re
 /**
  * @deprecated Use `HStack` instead.
  */
-export interface ColumnProps extends Omit<BoxProps, "display" | "flexDirection" | "width"> {
+export type ColumnProps = DistributiveOmit<BoxProps, "display" | "flexDirection" | "width"> & {
   width?: BoxProps["width"] | "content";
-}
+};
 
 /**
  * @deprecated Use `HStack` instead.

package/src/components/ExtendedActionSheet/ExtendedActionSheet.tsx

@@ -20,7 +20,7 @@ const withStateProps = createWithStateProps([useDialogContext]);
 ////////////////////////////////////////////////////////////////////////////////////
 
 /**
- * @deprecated Use `MenuSheet` instead.
+ * @deprecated Use `SwipeableMenuSheet` instead.
  */
 export interface ExtendedActionSheetRootProps
   extends ExtendedActionSheetVariantProps,
@@ -36,7 +36,7 @@ export interface ExtendedActionSheetRootProps
 }
 
 /**
- * @deprecated Use `MenuSheet` instead.
+ * @deprecated Use `SwipeableMenuSheet` instead.
  */
 export const ExtendedActionSheetRoot = withRootProvider<ExtendedActionSheetRootProps>(
   DialogPrimitive.Root,
@@ -51,24 +51,24 @@ export const ExtendedActionSheetRoot = withRootProvider<ExtendedActionSheetRootP
 ////////////////////////////////////////////////////////////////////////////////////
 
 /**
- * @deprecated Use `MenuSheet` instead.
+ * @deprecated Use `SwipeableMenuSheet` instead.
  */
 export interface ExtendedActionSheetTriggerProps extends DialogPrimitive.TriggerProps {}
 
 /**
- * @deprecated Use `MenuSheet` instead.
+ * @deprecated Use `SwipeableMenuSheet` instead.
  */
 export const ExtendedActionSheetTrigger = DialogPrimitive.Trigger;
 
 ////////////////////////////////////////////////////////////////////////////////////
 
 /**
- * @deprecated Use `MenuSheet` instead.
+ * @deprecated Use `SwipeableMenuSheet` instead.
  */
 export interface ExtendedActionSheetPositionerProps extends DialogPrimitive.PositionerProps {}
 
 /**
- * @deprecated Use `MenuSheet` instead.
+ * @deprecated Use `SwipeableMenuSheet` instead.
  */
 export const ExtendedActionSheetPositioner = withContext<
   HTMLDivElement,
@@ -78,12 +78,12 @@ export const ExtendedActionSheetPositioner = withContext<
 ////////////////////////////////////////////////////////////////////////////////////
 
 /**
- * @deprecated Use `MenuSheet` instead.
+ * @deprecated Use `SwipeableMenuSheet` instead.
  */
 export interface ExtendedActionSheetBackdropProps extends DialogPrimitive.BackdropProps {}
 
 /**
- * @deprecated Use `MenuSheet` instead.
+ * @deprecated Use `SwipeableMenuSheet` instead.
  */
 export const ExtendedActionSheetBackdrop = withContext<
   HTMLDivElement,
@@ -93,12 +93,12 @@ export const ExtendedActionSheetBackdrop = withContext<
 ////////////////////////////////////////////////////////////////////////////////////
 
 /**
- * @deprecated Use `MenuSheet` instead.
+ * @deprecated Use `SwipeableMenuSheet` instead.
  */
 export interface ExtendedActionSheetContentProps extends DialogPrimitive.ContentProps {}
 
 /**
- * @deprecated Use `MenuSheet` instead.
+ * @deprecated Use `SwipeableMenuSheet` instead.
  */
 export const ExtendedActionSheetContent = withContext<
   HTMLDivElement,
@@ -108,14 +108,14 @@ export const ExtendedActionSheetContent = withContext<
 ////////////////////////////////////////////////////////////////////////////////////
 
 /**
- * @deprecated Use `MenuSheet` instead.
+ * @deprecated Use `SwipeableMenuSheet` instead.
  */
 export interface ExtendedActionSheetHeaderProps
   extends PrimitiveProps,
     React.HTMLAttributes<HTMLDivElement> {}
 
 /**
- * @deprecated Use `MenuSheet` instead.
+ * @deprecated Use `SwipeableMenuSheet` instead.
  */
 export const ExtendedActionSheetHeader = withContext<
   HTMLDivElement,
@@ -125,12 +125,12 @@ export const ExtendedActionSheetHeader = withContext<
 ////////////////////////////////////////////////////////////////////////////////////
 
 /**
- * @deprecated Use `MenuSheet` instead.
+ * @deprecated Use `SwipeableMenuSheet` instead.
  */
 export interface ExtendedActionSheetTitleProps extends DialogPrimitive.TitleProps {}
 
 /**
- * @deprecated Use `MenuSheet` instead.
+ * @deprecated Use `SwipeableMenuSheet` instead.
  */
 export const ExtendedActionSheetTitle = withContext<
   HTMLHeadingElement,
@@ -140,14 +140,14 @@ export const ExtendedActionSheetTitle = withContext<
 ////////////////////////////////////////////////////////////////////////////////////
 
 /**
- * @deprecated Use `MenuSheet` instead.
+ * @deprecated Use `SwipeableMenuSheet` instead.
  */
 export interface ExtendedActionSheetListProps
   extends PrimitiveProps,
     React.HTMLAttributes<HTMLDivElement> {}
 
 /**
- * @deprecated Use `MenuSheet` instead.
+ * @deprecated Use `SwipeableMenuSheet` instead.
  */
 export const ExtendedActionSheetList = withContext<HTMLDivElement, ExtendedActionSheetListProps>(
   withStateProps(Primitive.div),
@@ -157,12 +157,12 @@ export const ExtendedActionSheetList = withContext<HTMLDivElement, ExtendedActio
 ////////////////////////////////////////////////////////////////////////////////////
 
 /**
- * @deprecated Use `MenuSheet` instead.
+ * @deprecated Use `SwipeableMenuSheet` instead.
  */
 export interface ExtendedActionSheetGroupProps extends React.HTMLAttributes<HTMLDivElement> {}
 
 /**
- * @deprecated Use `MenuSheet` instead.
+ * @deprecated Use `SwipeableMenuSheet` instead.
  */
 export const ExtendedActionSheetGroup = withContext<HTMLDivElement, ExtendedActionSheetGroupProps>(
   withStateProps(Primitive.div),
@@ -172,7 +172,7 @@ export const ExtendedActionSheetGroup = withContext<HTMLDivElement, ExtendedActi
 ////////////////////////////////////////////////////////////////////////////////////
 
 /**
- * @deprecated Use `MenuSheet` instead.
+ * @deprecated Use `SwipeableMenuSheet` instead.
  */
 export interface ExtendedActionSheetItemProps
   extends PrimitiveProps,
@@ -180,7 +180,7 @@ export interface ExtendedActionSheetItemProps
     React.HTMLAttributes<HTMLButtonElement> {}
 
 /**
- * @deprecated Use `MenuSheet` instead.
+ * @deprecated Use `SwipeableMenuSheet` instead.
  */
 export const ExtendedActionSheetItem = withItemContext<
   HTMLButtonElement,
@@ -190,14 +190,14 @@ export const ExtendedActionSheetItem = withItemContext<
 ////////////////////////////////////////////////////////////////////////////////////
 
 /**
- * @deprecated Use `MenuSheet` instead.
+ * @deprecated Use `SwipeableMenuSheet` instead.
  */
 export interface ExtendedActionSheetFooterProps
   extends PrimitiveProps,
     React.HTMLAttributes<HTMLDivElement> {}
 
 /**
- * @deprecated Use `MenuSheet` instead.
+ * @deprecated Use `SwipeableMenuSheet` instead.
  */
 export const ExtendedActionSheetFooter = withContext<
   HTMLDivElement,
@@ -207,12 +207,12 @@ export const ExtendedActionSheetFooter = withContext<
 ////////////////////////////////////////////////////////////////////////////////////
 
 /**
- * @deprecated Use `MenuSheet` instead.
+ * @deprecated Use `SwipeableMenuSheet` instead.
  */
 export interface ExtendedActionSheetCloseButtonProps extends DialogPrimitive.CloseButtonProps {}
 
 /**
- * @deprecated Use `MenuSheet` instead.
+ * @deprecated Use `SwipeableMenuSheet` instead.
  */
 export const ExtendedActionSheetCloseButton = withContext<
   HTMLDivElement,

package/src/components/FieldButton/FieldButton.tsx

@@ -1,17 +1,24 @@
 import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
 import { FieldButton, useFieldButtonContext } from "@seed-design/react-field-button";
 import * as React from "react";
+import { forwardRef } from "react";
 import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
 import { createWithStateProps } from "../../utils/createWithStateProps";
+import { splitMultipleVariantsProps } from "../../utils/splitMultipleVariantsProps";
 import { field, type FieldVariantProps } from "@seed-design/css/recipes/field";
 import { fieldLabel, type FieldLabelVariantProps } from "@seed-design/css/recipes/field-label";
 import { InternalIcon, type InternalIconProps } from "../private/Icon";
-import { inputButton } from "@seed-design/css/recipes/input-button";
+import { inputButton, type InputButtonVariantProps } from "@seed-design/css/recipes/input-button";
 import clsx from "clsx";
 
-const { withContext: withFieldContext, withProvider: withFieldProvider } =
+const { ClassNamesProvider: FieldClassNamesProvider, withContext: withFieldContext } =
   createSlotRecipeContext(field);
-const { withProvider, withContext, useClassNames } = createSlotRecipeContext(inputButton);
+const {
+  withProvider,
+  withContext,
+  useClassNames,
+  PropsProvider: InputButtonPropsProvider,
+} = createSlotRecipeContext(inputButton);
 const {
   withProvider: withLabelProvider,
   withContext: withLabelContext,
@@ -22,12 +29,32 @@ const withStateProps = createWithStateProps([useFieldButtonContext]);
 
 ////////////////////////////////////////////////////////////////////////////////////
 
-export interface FieldButtonRootProps extends FieldVariantProps, FieldButton.RootProps {}
+export interface FieldButtonRootProps
+  extends FieldVariantProps,
+    InputButtonVariantProps,
+    FieldButton.RootProps {}
 
-export const FieldButtonRoot = withFieldProvider<HTMLDivElement, FieldButtonRootProps>(
-  FieldButton.Root,
-  "root",
+export const FieldButtonRoot = forwardRef<HTMLDivElement, FieldButtonRootProps>(
+  ({ className, ...props }, ref) => {
+    const [{ field: fieldVariantProps, inputButton: inputButtonVariantProps }, otherProps] =
+      splitMultipleVariantsProps(props, { field, inputButton });
+
+    const fieldClassNames = field(fieldVariantProps);
+
+    return (
+      <InputButtonPropsProvider value={inputButtonVariantProps}>
+        <FieldClassNamesProvider value={fieldClassNames}>
+          <FieldButton.Root
+            ref={ref}
+            className={clsx(fieldClassNames.root, className)}
+            {...otherProps}
+          />
+        </FieldClassNamesProvider>
+      </InputButtonPropsProvider>
+    );
+  },
 );
+FieldButtonRoot.displayName = "FieldButtonRoot";
 
 ////////////////////////////////////////////////////////////////////////////////////
 
@@ -189,7 +216,8 @@ export const FieldButtonButton = withContext<HTMLButtonElement, FieldButtonButto
 );
 
 export interface FieldButtonControlProps
-  extends PrimitiveProps,
+  extends InputButtonVariantProps,
+    PrimitiveProps,
     React.HTMLAttributes<HTMLDivElement> {}
 
 export const FieldButtonControl = withProvider<HTMLDivElement, FieldButtonControlProps>(

package/src/components/Flex/Flex.tsx

@@ -1,11 +1,13 @@
 import * as React from "react";
+import type { ResponsiveValue } from "../../types/responsive";
+import type { DistributiveOmit } from "../../utils/styled";
 import { Box, type BoxProps } from "../Box/Box";
 
-export interface FlexProps extends Omit<BoxProps, "display"> {
+export type FlexProps = DistributiveOmit<BoxProps, "display"> & {
   /**
    * @default "flex"
    */
-  display?: "flex" | "none";
+  display?: ResponsiveValue<"flex" | "none">;
 
   /**
    * Shorthand for `flexDirection`.
@@ -36,7 +38,7 @@ export interface FlexProps extends Omit<BoxProps, "display"> {
    * Shorthand for `flexShrink`.
    */
   shrink?: BoxProps["flexShrink"];
-}
+};
 
 export const Flex = React.forwardRef<HTMLDivElement, FlexProps>((props, ref) => {
   const { direction, wrap, align, justify, grow, shrink, ...rest } = props;

package/src/components/Footer/Footer.namespace.ts

@@ -0,0 +1,4 @@
+export {
+  FooterLinkText as LinkText,
+  type FooterLinkTextProps as LinkTextProps,
+} from "./FooterLinkText";

package/src/components/Footer/FooterLinkText.tsx

@@ -0,0 +1,23 @@
+import { footer, type FooterVariantProps } from "@seed-design/css/recipes/footer";
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import clsx from "clsx";
+import * as React from "react";
+
+export interface FooterLinkTextProps
+  extends FooterVariantProps,
+    PrimitiveProps,
+    React.AnchorHTMLAttributes<HTMLAnchorElement> {}
+
+export const FooterLinkText = React.forwardRef<HTMLAnchorElement, FooterLinkTextProps>(
+  ({ className, children, ...props }, ref) => {
+    const [variantProps, restProps] = footer.splitVariantProps(props);
+    const classNames = footer(variantProps);
+
+    return (
+      <Primitive.a ref={ref} className={clsx(classNames.linkText, className)} {...restProps}>
+        {children}
+      </Primitive.a>
+    );
+  },
+);
+FooterLinkText.displayName = "FooterLinkText";

package/src/components/Footer/index.ts

@@ -0,0 +1,3 @@
+export { FooterLinkText, type FooterLinkTextProps } from "./FooterLinkText";
+
+export * as Footer from "./Footer.namespace";

package/src/components/Grid/Grid.tsx

@@ -1,12 +1,14 @@
 import { mergeProps } from "@seed-design/dom-utils";
 import * as React from "react";
+import type { ResponsiveValue } from "../../types/responsive";
+import { resolveResponsive, type DistributiveOmit } from "../../utils/styled";
 import { Box, type BoxProps } from "../Box/Box";
 
-export interface GridProps extends Omit<BoxProps, "display"> {
+export type GridProps = DistributiveOmit<BoxProps, "display"> & {
   /**
    * @default "grid"
    */
-  display?: "grid" | "none";
+  display?: ResponsiveValue<"grid" | "none">;
 
   /**
    * Shorthand for `alignItems`.
@@ -24,13 +26,13 @@ export interface GridProps extends Omit<BoxProps, "display"> {
    * Shorthand for `gridTemplateColumns`.
    * If number, `repeat({columns}, minmax(0, 1fr))` is applied.
    */
-  columns?: number | string;
+  columns?: ResponsiveValue<number | string>;
 
   /**
    * Shorthand for `gridTemplateRows`.
    * If number, `repeat({rows}, minmax(0, 1fr))` is applied.
    */
-  rows?: number | string;
+  rows?: ResponsiveValue<number | string>;
 
   // NOTE: grid-template-areas not currently supported here.
   // since grid-area is a shorthand of grid-column/row (in a grid item),
@@ -50,6 +52,10 @@ export interface GridProps extends Omit<BoxProps, "display"> {
    * Shorthand for `gridAutoRows`.
    */
   autoRows?: string;
+};
+
+function handleGridTemplate(v: number | string): string {
+  return typeof v === "number" ? `repeat(${v}, minmax(0, 1fr))` : v;
 }
 
 export const Grid = React.forwardRef<HTMLDivElement, GridProps>((props, ref) => {
@@ -57,17 +63,18 @@ export const Grid = React.forwardRef<HTMLDivElement, GridProps>((props, ref) =>
     props;
 
   return (
-    // @ts-expect-error: display: "grid" is not allowed in the Box component
     <Box
       ref={ref}
+      display="grid"
       alignItems={align}
       justifyContent={justify}
       {...mergeProps(rest, {
         className: "seed-grid",
         style: {
-          "--seed-grid-columns":
-            typeof columns === "number" ? `repeat(${columns}, minmax(0, 1fr))` : columns,
-          "--seed-grid-rows": typeof rows === "number" ? `repeat(${rows}, minmax(0, 1fr))` : rows,
+          ...(columns !== undefined &&
+            resolveResponsive("--seed-grid-columns", columns, handleGridTemplate)),
+          ...(rows !== undefined &&
+            resolveResponsive("--seed-grid-rows", rows, handleGridTemplate)),
           "--seed-grid-auto-flow": autoFlow,
           "--seed-grid-auto-columns": autoColumns,
           "--seed-grid-auto-rows": autoRows,

package/src/components/GridItem/GridItem.tsx

@@ -1,7 +1,8 @@
 import * as React from "react";
+import type { DistributiveOmit } from "../../utils/styled";
 import { Box, type BoxProps } from "../Box/Box";
 
-export interface GridItemProps extends Omit<BoxProps, "gridColumn" | "gridRow" | "gridArea"> {
+export type GridItemProps = DistributiveOmit<BoxProps, "gridColumn" | "gridRow" | "gridArea"> & {
   /**
    * If true, the component will render its children directly without a wrapper element.
    * @default false
@@ -39,7 +40,7 @@ export interface GridItemProps extends Omit<BoxProps, "gridColumn" | "gridRow" |
   rowEnd?: number;
 
   // NOTE: grid-area is not currently supported here: see Grid.tsx
-}
+};
 
 export const GridItem = React.forwardRef<HTMLDivElement, GridItemProps>((props, ref) => {
   const { asChild = false, colSpan, colStart, colEnd, rowSpan, rowStart, rowEnd, ...rest } = props;