@seed-design/react 1.2.14 → 2.0.0

package/lib/utils/styled.js

@@ -1,8 +1,24 @@
 "use client";
+import { isResponsiveObject } from "../types/responsive.js";
 import { vars } from "@seed-design/css/vars";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/utils/styled.tsx
+function resolveResponsive(varName, value, transform) {
+	if (!isResponsiveObject(value)) {
+		const transformed = transform(value);
+		if (transformed === void 0) return {};
+		return { [`${varName}-base`]: transformed };
+	}
+	const result = {};
+	for (const [breakpoint, breakpointValue] of Object.entries(value)) {
+		if (breakpointValue === void 0) continue;
+		const transformed = transform(breakpointValue);
+		if (transformed === void 0) continue;
+		result[`${varName}-${breakpoint}`] = transformed;
+	}
+	return result;
+}
 function handleColor(color) {
 	if (!color) return;
 	const [type, value] = color.split(".");
@@ -37,58 +53,8 @@ function handleGradient(gradientToken, direction) {
 	if (!colorStops) return;
 	return `linear-gradient(${direction}, ${colorStops})`;
 }
-function handleDisplay(display) {
-	if (!display) return;
-	if (process.env.NODE_ENV !== "production") {
-		if (display === "inlineFlex" || display === "inlineBlock") console.warn(`[SEED Design System] display='${display}' is deprecated and will be removed in @seed-design/react@2.0.0. Use display='${display === "inlineFlex" ? "inline-flex" : "inline-block"}' instead.`);
-	}
-	return {
-		flex: "flex",
-		inlineFlex: "inline-flex",
-		inlineBlock: "inline-block",
-		none: "none"
-	}[display] ?? display;
-}
-function handleFlexDirection(flexDirection) {
-	if (!flexDirection) return;
-	if (process.env.NODE_ENV !== "production") {
-		if (flexDirection === "rowReverse" || flexDirection === "columnReverse") console.warn(`[SEED Design System] flexDirection='${flexDirection}' is deprecated and will be removed in @seed-design/react@2.0.0. Use flexDirection='${flexDirection === "rowReverse" ? "row-reverse" : "column-reverse"}' instead.`);
-	}
-	return {
-		row: "row",
-		column: "column",
-		rowReverse: "row-reverse",
-		columnReverse: "column-reverse"
-	}[flexDirection] ?? flexDirection;
-}
-function handleJustifyContent(justifyContent) {
-	if (!justifyContent) return;
-	if (process.env.NODE_ENV !== "production") {
-		if (justifyContent === "flexStart" || justifyContent === "flexEnd") console.warn(`[SEED Design System] justifyContent='${justifyContent}' is deprecated and will be removed in @seed-design/react@2.0.0. Use justifyContent='${justifyContent === "flexStart" ? "flex-start" : "flex-end"}' instead.`);
-		if (justifyContent === "spaceBetween" || justifyContent === "spaceAround") console.warn(`[SEED Design System] justifyContent='${justifyContent}' is deprecated and will be removed in @seed-design/react@2.0.0. Use justifyContent='${justifyContent === "spaceBetween" ? "space-between" : "space-around"}' instead.`);
-	}
-	return {
-		flexStart: "flex-start",
-		flexEnd: "flex-end",
-		center: "center",
-		spaceBetween: "space-between",
-		spaceAround: "space-around"
-	}[justifyContent] ?? justifyContent;
-}
-function handleAlignItems(alignItems) {
-	if (!alignItems) return;
-	if (process.env.NODE_ENV !== "production") {
-		if (alignItems === "flexStart" || alignItems === "flexEnd") console.warn(`[SEED Design System] alignItems='${alignItems}' is deprecated and will be removed in @seed-design/react@2.0.0. Use alignItems='${alignItems === "flexStart" ? "flex-start" : "flex-end"}' instead.`);
-	}
-	return {
-		flexStart: "flex-start",
-		flexEnd: "flex-end",
-		center: "center",
-		stretch: "stretch"
-	}[alignItems] ?? alignItems;
-}
 function useStyleProps(props) {
-	const { background, bg, bgGradient, backgroundGradient, bgGradientDirection, backgroundGradientDirection, color, borderColor, borderWidth, borderTopWidth, borderRightWidth, borderBottomWidth, borderLeftWidth, borderRadius, borderTopLeftRadius, borderTopRightRadius, borderBottomRightRadius, borderBottomLeftRadius, boxShadow, width, minWidth, maxWidth, height, minHeight, maxHeight, padding, paddingX, paddingY, paddingTop, paddingRight, paddingBottom, paddingLeft, p, px, py, pt, pr, pb, pl, bleedX, bleedY, bleedTop, bleedRight, bleedBottom, bleedLeft, bottom, left, right, top, display, position, overflowX, overflowY, zIndex, flexGrow, flexShrink, flexDirection, flexWrap, justifyContent, justifySelf, alignItems, alignContent, alignSelf, gap, gridColumn, gridRow, unstable_transform, _active, style, ...restProps } = props;
+	const { background, bg, bgGradient, backgroundGradient, bgGradientDirection, backgroundGradientDirection, color, borderColor, borderWidth, borderTopWidth, borderRightWidth, borderBottomWidth, borderLeftWidth, borderRadius, borderTopLeftRadius, borderTopRightRadius, borderBottomRightRadius, borderBottomLeftRadius, boxShadow, width, minWidth, maxWidth, height, minHeight, maxHeight, padding, paddingX, paddingY, paddingTop, paddingRight, paddingBottom, paddingLeft, p, px, py, pt, pr, pb, pl, bleed, bleedX, bleedY, bleedTop, bleedRight, bleedBottom, bleedLeft, margin, m, marginX, mx, marginY, my, marginTop, mt, marginRight, mr, marginBottom, mb, marginLeft, ml, bottom, left, right, top, display, position, overflowX, overflowY, zIndex, flexGrow, flexShrink, flexDirection, flexWrap, justifyContent, justifySelf, alignItems, alignContent, alignSelf, gap, gridColumn, gridRow, unstable_transform, _active, style, ...restProps } = props;
 	const gradientValue = handleGradient(bgGradient ?? backgroundGradient, bgGradientDirection ?? backgroundGradientDirection);
 	return {
 		style: {
@@ -106,46 +72,53 @@ function useStyleProps(props) {
 			"--seed-box-border-bottom-right-radius": handleRadius(borderBottomRightRadius),
 			"--seed-box-border-bottom-left-radius": handleRadius(borderBottomLeftRadius),
 			"--seed-box-box-shadow": handleShadow(boxShadow),
-			"--seed-box-width": handleDimension(width),
-			"--seed-box-min-width": handleDimension(minWidth),
-			"--seed-box-max-width": handleDimension(maxWidth),
-			"--seed-box-height": handleDimension(height),
-			"--seed-box-min-height": handleDimension(minHeight),
-			"--seed-box-max-height": handleDimension(maxHeight),
-			"--seed-box-padding": handleDimension(padding ?? p),
-			"--seed-box-padding-x": handleDimension(paddingX ?? px),
-			"--seed-box-padding-y": handleDimension(paddingY ?? py),
-			"--seed-box-padding-top": handlePaddingWithSafeArea(paddingTop ?? pt, "top"),
-			"--seed-box-padding-right": handleDimension(paddingRight ?? pr),
-			"--seed-box-padding-bottom": handlePaddingWithSafeArea(paddingBottom ?? pb, "bottom"),
-			"--seed-box-padding-left": handleDimension(paddingLeft ?? pl),
-			"--seed-box-bleed-top": handleBleed(bleedTop ?? bleedY, "top"),
-			"--seed-box-bleed-right": handleBleed(bleedRight ?? bleedX, "right"),
-			"--seed-box-bleed-bottom": handleBleed(bleedBottom ?? bleedY, "bottom"),
-			"--seed-box-bleed-left": handleBleed(bleedLeft ?? bleedX, "left"),
 			"--seed-box-top": top,
 			"--seed-box-left": left,
 			"--seed-box-right": right,
 			"--seed-box-bottom": bottom,
-			"--seed-box-gap": handleDimension(gap),
-			"--seed-box-display": handleDisplay(display),
 			"--seed-box-position": position,
 			"--seed-box-overflow-x": overflowX,
 			"--seed-box-overflow-y": overflowY,
 			"--seed-box-z-index": zIndex,
 			"--seed-box-flex-grow": flexGrow === true ? 1 : flexGrow,
 			"--seed-box-flex-shrink": flexShrink === true ? 1 : flexShrink,
-			"--seed-box-flex-direction": handleFlexDirection(flexDirection),
 			"--seed-box-flex-wrap": flexWrap === true ? "wrap" : flexWrap,
-			"--seed-box-justify-content": handleJustifyContent(justifyContent),
+			"--seed-box-justify-content": justifyContent,
 			"--seed-box-justify-self": justifySelf,
-			"--seed-box-align-items": handleAlignItems(alignItems),
-			"--seed-box-align-content": handleAlignItems(alignContent),
-			"--seed-box-align-self": handleAlignItems(alignSelf),
+			"--seed-box-align-items": alignItems,
+			"--seed-box-align-content": alignContent,
+			"--seed-box-align-self": alignSelf,
 			"--seed-box-grid-column": gridColumn,
 			"--seed-box-grid-row": gridRow,
 			"--seed-box-unstable-transform": unstable_transform,
 			"--seed-box-background--active": handleColor(_active?.bg ?? _active?.background),
+			...width !== void 0 && resolveResponsive("--seed-box-width", width, handleDimension),
+			...minWidth !== void 0 && resolveResponsive("--seed-box-min-width", minWidth, handleDimension),
+			...maxWidth !== void 0 && resolveResponsive("--seed-box-max-width", maxWidth, handleDimension),
+			...height !== void 0 && resolveResponsive("--seed-box-height", height, handleDimension),
+			...minHeight !== void 0 && resolveResponsive("--seed-box-min-height", minHeight, handleDimension),
+			...maxHeight !== void 0 && resolveResponsive("--seed-box-max-height", maxHeight, handleDimension),
+			...(padding ?? p) !== void 0 && resolveResponsive("--seed-box-padding", padding ?? p, handleDimension),
+			...(paddingX ?? px) !== void 0 && resolveResponsive("--seed-box-padding-x", paddingX ?? px, handleDimension),
+			...(paddingY ?? py) !== void 0 && resolveResponsive("--seed-box-padding-y", paddingY ?? py, handleDimension),
+			...(paddingTop ?? pt) !== void 0 && resolveResponsive("--seed-box-padding-top", paddingTop ?? pt, (v) => handlePaddingWithSafeArea(v, "top")),
+			...(paddingRight ?? pr) !== void 0 && resolveResponsive("--seed-box-padding-right", paddingRight ?? pr, handleDimension),
+			...(paddingBottom ?? pb) !== void 0 && resolveResponsive("--seed-box-padding-bottom", paddingBottom ?? pb, (v) => handlePaddingWithSafeArea(v, "bottom")),
+			...(paddingLeft ?? pl) !== void 0 && resolveResponsive("--seed-box-padding-left", paddingLeft ?? pl, handleDimension),
+			...(bleedTop ?? bleedY ?? bleed) !== void 0 && resolveResponsive("--seed-box-bleed-top", bleedTop ?? bleedY ?? bleed, (v) => handleBleed(v, "top")),
+			...(bleedRight ?? bleedX ?? bleed) !== void 0 && resolveResponsive("--seed-box-bleed-right", bleedRight ?? bleedX ?? bleed, (v) => handleBleed(v, "right")),
+			...(bleedBottom ?? bleedY ?? bleed) !== void 0 && resolveResponsive("--seed-box-bleed-bottom", bleedBottom ?? bleedY ?? bleed, (v) => handleBleed(v, "bottom")),
+			...(bleedLeft ?? bleedX ?? bleed) !== void 0 && resolveResponsive("--seed-box-bleed-left", bleedLeft ?? bleedX ?? bleed, (v) => handleBleed(v, "left")),
+			...(margin ?? m) !== void 0 && resolveResponsive("--seed-box-margin", margin ?? m, handleDimension),
+			...(marginX ?? mx) !== void 0 && resolveResponsive("--seed-box-margin-x", marginX ?? mx, handleDimension),
+			...(marginY ?? my) !== void 0 && resolveResponsive("--seed-box-margin-y", marginY ?? my, handleDimension),
+			...(marginTop ?? mt) !== void 0 && resolveResponsive("--seed-box-margin-top", marginTop ?? mt, handleDimension),
+			...(marginRight ?? mr) !== void 0 && resolveResponsive("--seed-box-margin-right", marginRight ?? mr, handleDimension),
+			...(marginBottom ?? mb) !== void 0 && resolveResponsive("--seed-box-margin-bottom", marginBottom ?? mb, handleDimension),
+			...(marginLeft ?? ml) !== void 0 && resolveResponsive("--seed-box-margin-left", marginLeft ?? ml, handleDimension),
+			...gap !== void 0 && resolveResponsive("--seed-box-gap", gap, handleDimension),
+			...display !== void 0 && resolveResponsive("--seed-box-display", display, (v) => v),
+			...flexDirection !== void 0 && resolveResponsive("--seed-box-flex-direction", flexDirection, (v) => v),
 			...style
 		},
 		restProps: {
@@ -167,4 +140,4 @@ function withStyleProps(Component) {
 	return Node;
 }
 //#endregion
-export { handleColor, handleDimension, handleRadius, useStyleProps, withStyleProps };
+export { handleColor, handleDimension, handleRadius, resolveResponsive, useStyleProps, withStyleProps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/react",
-  "version": "1.2.14",
+  "version": "2.0.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -36,38 +36,45 @@
   },
   "dependencies": {
     "@radix-ui/react-compose-refs": "^1.1.2",
-    "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-use-controllable-state": "1.2.2",
     "@radix-ui/react-use-layout-effect": "^1.1.1",
-    "@seed-design/dom-utils": "1.0.0",
-    "@seed-design/react-avatar": "1.0.0",
-    "@seed-design/react-checkbox": "1.0.1",
-    "@seed-design/react-collapsible": "0.1.0",
-    "@seed-design/react-dialog": "1.0.3",
-    "@seed-design/react-drawer": "1.0.10",
-    "@seed-design/react-field": "1.0.1",
-    "@seed-design/react-image": "0.1.1",
-    "@seed-design/react-fieldset": "0.1.0",
-    "@seed-design/react-field-button": "1.0.2",
-    "@seed-design/react-popover": "1.0.4",
-    "@seed-design/react-portal": "1.0.0",
-    "@seed-design/react-primitive": "1.0.0",
-    "@seed-design/react-progress": "1.0.0",
-    "@seed-design/react-pull-to-refresh": "1.0.1",
-    "@seed-design/react-radio-group": "1.1.0",
-    "@seed-design/react-segmented-control": "1.0.1",
-    "@seed-design/react-slider": "1.0.2",
-    "@seed-design/react-snackbar": "1.0.2",
-    "@seed-design/react-switch": "1.0.1",
-    "@seed-design/react-tabs": "1.0.5",
-    "@seed-design/react-text-field": "1.1.1",
-    "@seed-design/react-toggle": "1.0.1",
+    "@seed-design/dom-utils": "^2.0.0",
+    "@seed-design/react-accordion": "^1.0.0",
+    "@seed-design/react-attachment-display": "^1.0.0",
+    "@seed-design/react-avatar": "^2.0.0",
+    "@seed-design/react-checkbox": "^2.0.0",
+    "@seed-design/react-collapsible": "^1.0.0",
+    "@seed-design/react-dialog": "^2.0.0",
+    "@seed-design/react-drawer": "^2.0.0",
+    "@seed-design/react-field": "^2.0.0",
+    "@seed-design/react-field-button": "^2.0.0",
+    "@seed-design/react-fieldset": "^1.0.0",
+    "@seed-design/react-file-upload": "^1.0.0",
+    "@seed-design/react-image": "^1.0.0",
+    "@seed-design/react-menu": "^1.0.0",
+    "@seed-design/react-middle-truncate": "^1.0.0",
+    "@seed-design/react-navigation-menu": "^1.0.0",
+    "@seed-design/react-popover": "^2.0.0",
+    "@seed-design/react-portal": "^2.0.0",
+    "@seed-design/react-primitive": "^2.0.0",
+    "@seed-design/react-progress": "^2.0.0",
+    "@seed-design/react-pull-to-refresh": "^2.0.0",
+    "@seed-design/react-radio-group": "^2.0.0",
+    "@seed-design/react-segmented-control": "^2.0.0",
+    "@seed-design/react-side-navigation": "^1.0.0",
+    "@seed-design/react-slider": "^2.0.0",
+    "@seed-design/react-snackbar": "^2.0.0",
+    "@seed-design/react-switch": "^2.0.0",
+    "@seed-design/react-tabs": "^2.0.0",
+    "@seed-design/react-text-field": "^2.0.0",
+    "@seed-design/react-toggle": "^2.0.0",
+    "@seed-design/react-tooltip": "^1.0.0",
     "clsx": "^2.1.1",
     "unicode-segmenter": "^0.14.4"
   },
   "peerDependencies": {
-    "@seed-design/css": ">=1.1.17",
+    "@seed-design/css": "^2.0.0",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
   },

package/src/components/Accordion/Accordion.namespace.ts

@@ -0,0 +1,22 @@
+export {
+  AccordionRoot as Root,
+  AccordionItem as Item,
+  AccordionHeader as Header,
+  AccordionTrigger as Trigger,
+  AccordionContent as Content,
+  AccordionBody as Body,
+  AccordionTitle as Title,
+  AccordionDescription as Description,
+  AccordionPrefix as Prefix,
+  AccordionSuffixIcon as SuffixIcon,
+  type AccordionRootProps as RootProps,
+  type AccordionItemProps as ItemProps,
+  type AccordionHeaderProps as HeaderProps,
+  type AccordionTriggerProps as TriggerProps,
+  type AccordionContentProps as ContentProps,
+  type AccordionBodyProps as BodyProps,
+  type AccordionTitleProps as TitleProps,
+  type AccordionDescriptionProps as DescriptionProps,
+  type AccordionPrefixProps as PrefixProps,
+  type AccordionSuffixIconProps as SuffixIconProps,
+} from "./Accordion";

package/src/components/Accordion/Accordion.tsx

@@ -0,0 +1,119 @@
+"use client";
+
+import { accordion, type AccordionVariantProps } from "@seed-design/css/recipes/accordion";
+import {
+  Accordion as AccordionPrimitive,
+  useAccordionItemContext,
+} from "@seed-design/react-accordion";
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import type * as React from "react";
+import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
+import { createWithStateProps } from "../../utils/createWithStateProps";
+
+const { withProvider, withContext } = createSlotRecipeContext(accordion);
+const withStateProps = createWithStateProps([useAccordionItemContext]);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface AccordionRootProps extends AccordionVariantProps, AccordionPrimitive.RootProps {}
+
+export const AccordionRoot = withProvider<HTMLDivElement, AccordionRootProps>(
+  AccordionPrimitive.Root,
+  "root",
+);
+AccordionRoot.displayName = "AccordionRoot";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface AccordionItemProps extends AccordionPrimitive.ItemProps {}
+
+export const AccordionItem = withContext<HTMLDivElement, AccordionItemProps>(
+  AccordionPrimitive.Item,
+  "item",
+);
+AccordionItem.displayName = "AccordionItem";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface AccordionHeaderProps extends AccordionPrimitive.HeaderProps {}
+
+export const AccordionHeader = withContext<HTMLHeadingElement, AccordionHeaderProps>(
+  AccordionPrimitive.Header,
+  "header",
+);
+AccordionHeader.displayName = "AccordionHeader";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface AccordionTriggerProps extends AccordionPrimitive.TriggerProps {}
+
+export const AccordionTrigger = withContext<HTMLButtonElement, AccordionTriggerProps>(
+  AccordionPrimitive.Trigger,
+  "trigger",
+);
+AccordionTrigger.displayName = "AccordionTrigger";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface AccordionContentProps extends AccordionPrimitive.ContentProps {}
+
+export const AccordionContent = withContext<HTMLDivElement, AccordionContentProps>(
+  AccordionPrimitive.Content,
+  "content",
+);
+AccordionContent.displayName = "AccordionContent";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface AccordionBodyProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {}
+
+export const AccordionBody = withContext<HTMLDivElement, AccordionBodyProps>(Primitive.div, "body");
+AccordionBody.displayName = "AccordionBody";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface AccordionTitleProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLSpanElement> {}
+
+export const AccordionTitle = withContext<HTMLSpanElement, AccordionTitleProps>(
+  withStateProps(Primitive.span),
+  "title",
+);
+AccordionTitle.displayName = "AccordionTitle";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface AccordionDescriptionProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLSpanElement> {}
+
+export const AccordionDescription = withContext<HTMLSpanElement, AccordionDescriptionProps>(
+  withStateProps(Primitive.span),
+  "description",
+);
+AccordionDescription.displayName = "AccordionDescription";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface AccordionPrefixProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const AccordionPrefix = withContext<HTMLDivElement, AccordionPrefixProps>(
+  withStateProps(Primitive.div),
+  "prefix",
+);
+AccordionPrefix.displayName = "AccordionPrefix";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface AccordionSuffixIconProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const AccordionSuffixIcon = withContext<HTMLDivElement, AccordionSuffixIconProps>(
+  withStateProps(Primitive.div),
+  "suffixIcon",
+);
+AccordionSuffixIcon.displayName = "AccordionSuffixIcon";

package/src/components/Accordion/index.ts

@@ -0,0 +1,24 @@
+export {
+  AccordionRoot,
+  AccordionItem,
+  AccordionHeader,
+  AccordionTrigger,
+  AccordionContent,
+  AccordionBody,
+  AccordionTitle,
+  AccordionDescription,
+  AccordionPrefix,
+  AccordionSuffixIcon,
+  type AccordionRootProps,
+  type AccordionItemProps,
+  type AccordionHeaderProps,
+  type AccordionTriggerProps,
+  type AccordionContentProps,
+  type AccordionBodyProps,
+  type AccordionTitleProps,
+  type AccordionDescriptionProps,
+  type AccordionPrefixProps,
+  type AccordionSuffixIconProps,
+} from "./Accordion";
+
+export * as Accordion from "./Accordion.namespace";

package/src/components/ActionButton/ActionButton.tsx

@@ -23,7 +23,7 @@ export interface ActionButtonProps
   extends ActionButtonVariantProps,
     UsePendingButtonProps,
     PrimitiveProps,
-    Pick<StyleProps, "flexGrow" | "bleedX" | "bleedY">,
+    Pick<StyleProps, "flexGrow" | "bleed" | "bleedX" | "bleedY">,
     React.ButtonHTMLAttributes<HTMLButtonElement> {
   /**
    * Color of the label and icons inside the button.

package/src/components/ActionSheet/ActionSheet.tsx

@@ -17,7 +17,7 @@ const withStateProps = createWithStateProps([useDialogContext]);
 ////////////////////////////////////////////////////////////////////////////////////
 
 /**
- * @deprecated Use `MenuSheet` instead.
+ * @deprecated Use `SwipeableMenuSheet` instead.
  */
 export interface ActionSheetRootProps extends ActionSheetVariantProps, DialogPrimitive.RootProps {
   /**
@@ -31,7 +31,7 @@ export interface ActionSheetRootProps extends ActionSheetVariantProps, DialogPri
 }
 
 /**
- * @deprecated Use `MenuSheet` instead.
+ * @deprecated Use `SwipeableMenuSheet` instead.
  */
 export const ActionSheetRoot = withRootProvider<ActionSheetRootProps>(DialogPrimitive.Root, {
   defaultProps: {
@@ -43,24 +43,24 @@ export const ActionSheetRoot = withRootProvider<ActionSheetRootProps>(DialogPrim
 ////////////////////////////////////////////////////////////////////////////////////
 
 /**
- * @deprecated Use `MenuSheet` instead.
+ * @deprecated Use `SwipeableMenuSheet` instead.
  */
 export interface ActionSheetTriggerProps extends DialogPrimitive.TriggerProps {}
 
 /**
- * @deprecated Use `MenuSheet` instead.
+ * @deprecated Use `SwipeableMenuSheet` instead.
  */
 export const ActionSheetTrigger = DialogPrimitive.Trigger;
 
 ////////////////////////////////////////////////////////////////////////////////////
 
 /**
- * @deprecated Use `MenuSheet` instead.
+ * @deprecated Use `SwipeableMenuSheet` instead.
  */
 export interface ActionSheetPositionerProps extends DialogPrimitive.PositionerProps {}
 
 /**
- * @deprecated Use `MenuSheet` instead.
+ * @deprecated Use `SwipeableMenuSheet` instead.
  */
 export const ActionSheetPositioner = withContext<HTMLDivElement, ActionSheetPositionerProps>(
   DialogPrimitive.Positioner,
@@ -70,12 +70,12 @@ export const ActionSheetPositioner = withContext<HTMLDivElement, ActionSheetPosi
 ////////////////////////////////////////////////////////////////////////////////////
 
 /**
- * @deprecated Use `MenuSheet` instead.
+ * @deprecated Use `SwipeableMenuSheet` instead.
  */
 export interface ActionSheetBackdropProps extends DialogPrimitive.BackdropProps {}
 
 /**
- * @deprecated Use `MenuSheet` instead.
+ * @deprecated Use `SwipeableMenuSheet` instead.
  */
 export const ActionSheetBackdrop = withContext<HTMLDivElement, ActionSheetBackdropProps>(
   DialogPrimitive.Backdrop,
@@ -85,12 +85,12 @@ export const ActionSheetBackdrop = withContext<HTMLDivElement, ActionSheetBackdr
 ////////////////////////////////////////////////////////////////////////////////////
 
 /**
- * @deprecated Use `MenuSheet` instead.
+ * @deprecated Use `SwipeableMenuSheet` instead.
  */
 export interface ActionSheetContentProps extends DialogPrimitive.ContentProps {}
 
 /**
- * @deprecated Use `MenuSheet` instead.
+ * @deprecated Use `SwipeableMenuSheet` instead.
  */
 export const ActionSheetContent = withContext<HTMLDivElement, ActionSheetContentProps>(
   DialogPrimitive.Content,
@@ -100,14 +100,14 @@ export const ActionSheetContent = withContext<HTMLDivElement, ActionSheetContent
 ////////////////////////////////////////////////////////////////////////////////////
 
 /**
- * @deprecated Use `MenuSheet` instead.
+ * @deprecated Use `SwipeableMenuSheet` instead.
  */
 export interface ActionSheetHeaderProps
   extends PrimitiveProps,
     React.HTMLAttributes<HTMLDivElement> {}
 
 /**
- * @deprecated Use `MenuSheet` instead.
+ * @deprecated Use `SwipeableMenuSheet` instead.
  */
 export const ActionSheetHeader = withContext<HTMLDivElement, ActionSheetHeaderProps>(
   withStateProps(Primitive.div),
@@ -117,12 +117,12 @@ export const ActionSheetHeader = withContext<HTMLDivElement, ActionSheetHeaderPr
 ////////////////////////////////////////////////////////////////////////////////////
 
 /**
- * @deprecated Use `MenuSheet` instead.
+ * @deprecated Use `SwipeableMenuSheet` instead.
  */
 export interface ActionSheetTitleProps extends DialogPrimitive.TitleProps {}
 
 /**
- * @deprecated Use `MenuSheet` instead.
+ * @deprecated Use `SwipeableMenuSheet` instead.
  */
 export const ActionSheetTitle = withContext<HTMLHeadingElement, ActionSheetTitleProps>(
   withStateProps(Primitive.h2),
@@ -132,12 +132,12 @@ export const ActionSheetTitle = withContext<HTMLHeadingElement, ActionSheetTitle
 ////////////////////////////////////////////////////////////////////////////////////
 
 /**
- * @deprecated Use `MenuSheet` instead.
+ * @deprecated Use `SwipeableMenuSheet` instead.
  */
 export interface ActionSheetDescriptionProps extends DialogPrimitive.DescriptionProps {}
 
 /**
- * @deprecated Use `MenuSheet` instead.
+ * @deprecated Use `SwipeableMenuSheet` instead.
  */
 export const ActionSheetDescription = withContext<
   HTMLParagraphElement,
@@ -147,12 +147,12 @@ export const ActionSheetDescription = withContext<
 ////////////////////////////////////////////////////////////////////////////////////
 
 /**
- * @deprecated Use `MenuSheet` instead.
+ * @deprecated Use `SwipeableMenuSheet` instead.
  */
 export interface ActionSheetListProps extends React.HTMLAttributes<HTMLDivElement> {}
 
 /**
- * @deprecated Use `MenuSheet` instead.
+ * @deprecated Use `SwipeableMenuSheet` instead.
  */
 export const ActionSheetList = withContext<HTMLDivElement, ActionSheetListProps>(
   withStateProps(Primitive.div),
@@ -162,7 +162,7 @@ export const ActionSheetList = withContext<HTMLDivElement, ActionSheetListProps>
 ////////////////////////////////////////////////////////////////////////////////////
 
 /**
- * @deprecated Use `MenuSheet` instead.
+ * @deprecated Use `SwipeableMenuSheet` instead.
  */
 export interface ActionSheetItemProps
   extends PrimitiveProps,
@@ -170,7 +170,7 @@ export interface ActionSheetItemProps
     React.HTMLAttributes<HTMLButtonElement> {}
 
 /**
- * @deprecated Use `MenuSheet` instead.
+ * @deprecated Use `SwipeableMenuSheet` instead.
  */
 export const ActionSheetItem = withItemContext<HTMLButtonElement, ActionSheetItemProps>(
   withStateProps(Primitive.button),
@@ -179,12 +179,12 @@ export const ActionSheetItem = withItemContext<HTMLButtonElement, ActionSheetIte
 ////////////////////////////////////////////////////////////////////////////////////
 
 /**
- * @deprecated Use `MenuSheet` instead.
+ * @deprecated Use `SwipeableMenuSheet` instead.
  */
 export interface ActionSheetCloseButtonProps extends DialogPrimitive.CloseButtonProps {}
 
 /**
- * @deprecated Use `MenuSheet` instead.
+ * @deprecated Use `SwipeableMenuSheet` instead.
  */
 export const ActionSheetCloseButton = withContext<HTMLDivElement, ActionSheetCloseButtonProps>(
   DialogPrimitive.CloseButton,

package/src/components/Article/Article.tsx

@@ -3,7 +3,7 @@ import { Box, type BoxProps } from "../Box/Box";
 import clsx from "clsx";
 import { article } from "@seed-design/css/recipes/article";
 
-export interface ArticleProps extends BoxProps {}
+export type ArticleProps = BoxProps;
 
 export const Article = React.forwardRef<HTMLElement, ArticleProps>(
   ({ as = "article", className, ...props }, ref) => {

package/src/components/AspectRatio/AspectRatio.tsx

@@ -3,7 +3,7 @@ import clsx from "clsx";
 import * as React from "react";
 import { Box, type BoxProps } from "../Box/Box";
 
-export interface AspectRatioProps extends BoxProps {
+export type AspectRatioProps = BoxProps & {
   /**
    * The aspect ratio of the aspect ratio container (width / height).
    * @default 4 / 3
@@ -24,7 +24,7 @@ export interface AspectRatioProps extends BoxProps {
    * @default "hidden"
    */
   overflowY?: BoxProps["overflowY"];
-}
+};
 
 export const AspectRatio = React.forwardRef<HTMLDivElement, AspectRatioProps>(
   ({ ratio = 4 / 3, children, className, style, ...rest }, ref) => {