@seed-design/react 1.2.15 → 2.0.1

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;

package/src/components/HelpBubble/HelpBubble.tsx

@@ -5,6 +5,7 @@ import { forwardRef } from "react";
 import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
 import { createWithStateProps } from "../../utils/createWithStateProps";
 import { withStyleProps, type StyleProps } from "../../utils/styled";
+import { getHelpBubbleArrowTipPath } from "../../utils/getHelpBubbleArrowTipPath";
 import { composeRefs } from "@radix-ui/react-compose-refs";
 import clsx from "clsx";
 
@@ -114,11 +115,7 @@ export const HelpBubbleArrowTip = forwardRef<SVGSVGElement, HelpBubbleArrowTipPr
     const width = api.rects.arrowTip?.width || 0;
     const height = api.rects.arrowTip?.height || 0;
 
-    const pathData = `M0,0
-      H${width}
-      L${width / 2 + tipRadius},${height - tipRadius}
-      Q${width / 2},${height} ${width / 2 - tipRadius},${height - tipRadius}
-      Z`;
+    const pathData = getHelpBubbleArrowTipPath(width, height, tipRadius);
 
     // TODO: mergeProps with api.stateProps
     return (

package/src/components/HelpBubbleTooltip/HelpBubbleTooltip.namespace.ts

@@ -0,0 +1,24 @@
+export {
+  HelpBubbleTooltipArrow as Arrow,
+  HelpBubbleTooltipArrowTip as ArrowTip,
+  HelpBubbleTooltipBody as Body,
+  HelpBubbleTooltipContent as Content,
+  HelpBubbleTooltipDelayGroup as DelayGroup,
+  HelpBubbleTooltipDescription as Description,
+  HelpBubbleTooltipPositioner as Positioner,
+  HelpBubbleTooltipPositionerPortal as PositionerPortal,
+  HelpBubbleTooltipRoot as Root,
+  HelpBubbleTooltipTitle as Title,
+  HelpBubbleTooltipTrigger as Trigger,
+  type HelpBubbleTooltipArrowProps as ArrowProps,
+  type HelpBubbleTooltipArrowTipProps as ArrowTipProps,
+  type HelpBubbleTooltipBodyProps as BodyProps,
+  type HelpBubbleTooltipContentProps as ContentProps,
+  type HelpBubbleTooltipDelayGroupProps as DelayGroupProps,
+  type HelpBubbleTooltipDescriptionProps as DescriptionProps,
+  type HelpBubbleTooltipPositionerProps as PositionerProps,
+  type HelpBubbleTooltipPositionerPortalProps as PositionerPortalProps,
+  type HelpBubbleTooltipRootProps as RootProps,
+  type HelpBubbleTooltipTitleProps as TitleProps,
+  type HelpBubbleTooltipTriggerProps as TriggerProps,
+} from "./HelpBubbleTooltip";

package/src/components/HelpBubbleTooltip/HelpBubbleTooltip.tsx

@@ -0,0 +1,169 @@
+import { Tooltip as TooltipPrimitive, useTooltipContext } from "@seed-design/react-tooltip";
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import { helpBubble, type HelpBubbleVariantProps } from "@seed-design/css/recipes/help-bubble";
+import { forwardRef } from "react";
+import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
+import { createWithStateProps } from "../../utils/createWithStateProps";
+import { withStyleProps, type StyleProps } from "../../utils/styled";
+import { getHelpBubbleArrowTipPath } from "../../utils/getHelpBubbleArrowTipPath";
+import { composeRefs } from "@radix-ui/react-compose-refs";
+import clsx from "clsx";
+
+const { withRootProvider, withContext, useClassNames } = createSlotRecipeContext(helpBubble);
+const withStateProps = createWithStateProps([useTooltipContext]);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface HelpBubbleTooltipRootProps
+  extends HelpBubbleVariantProps,
+    TooltipPrimitive.RootProps {
+  /**
+   * @default "top"
+   */
+  placement?: TooltipPrimitive.RootProps["placement"];
+  /**
+   * @default 4
+   */
+  gutter?: TooltipPrimitive.RootProps["gutter"];
+  /**
+   * @default 16
+   */
+  overflowPadding?: TooltipPrimitive.RootProps["overflowPadding"];
+  /**
+   * @default 14
+   */
+  arrowPadding?: TooltipPrimitive.RootProps["arrowPadding"];
+}
+
+export const HelpBubbleTooltipRoot = withRootProvider<HelpBubbleTooltipRootProps>(
+  TooltipPrimitive.Root,
+  {
+    defaultProps: {
+      placement: "top",
+      gutter: 4, // TODO: get value from rootage spec
+      overflowPadding: 16,
+      arrowPadding: 14,
+    },
+  },
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface HelpBubbleTooltipTriggerProps extends TooltipPrimitive.TriggerProps {}
+
+export const HelpBubbleTooltipTrigger = TooltipPrimitive.Trigger;
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface HelpBubbleTooltipDelayGroupProps extends TooltipPrimitive.DelayGroupProps {}
+
+export const HelpBubbleTooltipDelayGroup = TooltipPrimitive.DelayGroup;
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface HelpBubbleTooltipPositionerProps extends TooltipPrimitive.PositionerProps {}
+
+export const HelpBubbleTooltipPositioner = withContext<
+  HTMLDivElement,
+  HelpBubbleTooltipPositionerProps
+>(TooltipPrimitive.Positioner, "positioner");
+
+export interface HelpBubbleTooltipPositionerPortalProps
+  extends TooltipPrimitive.PositionerPortalProps {}
+
+export const HelpBubbleTooltipPositionerPortal = withContext<
+  HTMLDivElement,
+  HelpBubbleTooltipPositionerPortalProps
+>(TooltipPrimitive.PositionerPortal, "positioner");
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface HelpBubbleTooltipContentProps
+  extends PrimitiveProps,
+    Pick<StyleProps, "maxWidth">,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const HelpBubbleTooltipContent = withContext<HTMLDivElement, HelpBubbleTooltipContentProps>(
+  withStyleProps(withStateProps(Primitive.div)),
+  "content",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface HelpBubbleTooltipArrowProps extends TooltipPrimitive.ArrowProps {}
+
+export const HelpBubbleTooltipArrow = withContext<HTMLDivElement, HelpBubbleTooltipArrowProps>(
+  TooltipPrimitive.Arrow,
+  "arrow",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface HelpBubbleTooltipArrowTipProps extends React.SVGProps<SVGSVGElement> {
+  /**
+   * radius of the arrow tip
+   * @default 2
+   */
+  tipRadius?: number;
+}
+
+export const HelpBubbleTooltipArrowTip = forwardRef<SVGSVGElement, HelpBubbleTooltipArrowTipProps>(
+  (props, ref) => {
+    const {
+      tipRadius = 2, // TODO: get value from rootage spec
+      className,
+      ...otherProps
+    } = props;
+    const api = useTooltipContext();
+
+    const classNames = useClassNames();
+
+    const width = api.rects.arrowTip?.width || 0;
+    const height = api.rects.arrowTip?.height || 0;
+
+    const pathData = getHelpBubbleArrowTipPath(width, height, tipRadius);
+
+    // TODO: mergeProps with api.stateProps
+    return (
+      <svg
+        aria-hidden="true"
+        viewBox={`0 0 ${width} ${height}`}
+        ref={composeRefs(api.refs.arrowTip, ref)}
+        className={clsx(classNames.arrowTip, className)}
+        {...otherProps}
+      >
+        <path stroke="none" d={pathData} />
+      </svg>
+    );
+  },
+);
+HelpBubbleTooltipArrowTip.displayName = "HelpBubbleTooltipArrowTip";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface HelpBubbleTooltipBodyProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const HelpBubbleTooltipBody = withContext<HTMLDivElement, HelpBubbleTooltipBodyProps>(
+  withStateProps(Primitive.div),
+  "body",
+);
+
+export interface HelpBubbleTooltipTitleProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLSpanElement> {}
+
+export const HelpBubbleTooltipTitle = withContext<HTMLSpanElement, HelpBubbleTooltipTitleProps>(
+  withStateProps(Primitive.span),
+  "title",
+);
+
+export interface HelpBubbleTooltipDescriptionProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const HelpBubbleTooltipDescription = withContext<
+  HTMLDivElement,
+  HelpBubbleTooltipDescriptionProps
+>(withStateProps(Primitive.div), "description");

package/src/components/HelpBubbleTooltip/index.ts

@@ -0,0 +1,26 @@
+export {
+  HelpBubbleTooltipArrow,
+  HelpBubbleTooltipArrowTip,
+  HelpBubbleTooltipBody,
+  HelpBubbleTooltipContent,
+  HelpBubbleTooltipDelayGroup,
+  HelpBubbleTooltipDescription,
+  HelpBubbleTooltipPositioner,
+  HelpBubbleTooltipPositionerPortal,
+  HelpBubbleTooltipRoot,
+  HelpBubbleTooltipTitle,
+  HelpBubbleTooltipTrigger,
+  type HelpBubbleTooltipArrowProps,
+  type HelpBubbleTooltipArrowTipProps,
+  type HelpBubbleTooltipBodyProps,
+  type HelpBubbleTooltipContentProps,
+  type HelpBubbleTooltipDelayGroupProps,
+  type HelpBubbleTooltipDescriptionProps,
+  type HelpBubbleTooltipPositionerProps,
+  type HelpBubbleTooltipPositionerPortalProps,
+  type HelpBubbleTooltipRootProps,
+  type HelpBubbleTooltipTitleProps,
+  type HelpBubbleTooltipTriggerProps,
+} from "./HelpBubbleTooltip";
+
+export * as HelpBubbleTooltip from "./HelpBubbleTooltip.namespace";

package/src/components/Icon/Icon.tsx

@@ -1,6 +1,7 @@
 import { Slot } from "@radix-ui/react-slot";
 import { useLayoutEffect } from "@radix-ui/react-use-layout-effect";
 import { createContext, forwardRef, useCallback, useContext, useMemo, useRef } from "react";
+import type { UnwrapResponsive } from "../../types/responsive";
 import { handleColor, handleDimension, type StyleProps } from "../../utils/styled";
 
 export interface PrefixIconProps {
@@ -108,7 +109,7 @@ export const IconRequired = ({
 export interface IconProps {
   svg: React.ReactNode;
 
-  size?: StyleProps["height"];
+  size?: UnwrapResponsive<StyleProps["height"]>;
 
   color?: StyleProps["color"];
 }

package/src/components/ImageFrame/ImageFrame.test.tsx

@@ -16,9 +16,7 @@ describe("ImageFrame", () => {
   describe("ImageFrameReactionButton", () => {
     it("renders the unselected icon by default", () => {
       const classNames = imageFrameReactionButton();
-      const { getByRole, container } = setUp(
-        <ImageFrameReactionButton aria-label="Like image" />,
-      );
+      const { getByRole, container } = setUp(<ImageFrameReactionButton aria-label="Like image" />);
 
       const button = getByRole("button", { name: "Like image" });
       const lineIcon = container.querySelector(`.${classNames.lineIcon}`);

package/src/components/ImageFrame/ImageFrame.tsx

@@ -11,13 +11,13 @@ import {
   type ImageFrameIndicatorVariantProps,
 } from "@seed-design/css/recipes/image-frame-indicator";
 import { imageFrameReactionButton } from "@seed-design/css/recipes/image-frame-reaction-button";
-import { imageFrameFloater as floaterVars } from "@seed-design/css/vars/component";
 import { mergeProps } from "@seed-design/dom-utils";
 import { Image } from "@seed-design/react-image";
 import { Toggle as TogglePrimitive, useToggleContext } from "@seed-design/react-toggle";
 import clsx from "clsx";
 import * as React from "react";
 import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
+import type { DistributiveOmit } from "../../utils/styled";
 import { AspectRatio, type AspectRatioProps } from "../AspectRatio/AspectRatio";
 import { Badge, type BadgeProps } from "../Badge/Badge";
 import { Float, type FloatProps } from "../Float/Float";
@@ -26,28 +26,21 @@ import { InternalIcon } from "../private/Icon";
 
 ////////////////////////////////////////////////////////////////////////////////////
 
-export interface ImageFrameProps
-  extends Omit<AspectRatioProps, "children">,
-    ImageFrameVariantProps {
-  /**
-   * @deprecated Deprecated in `@seed-design/react@1.2.x`; will be removed in 2.0.0.
-   * Use borderRadius="r2" instead.
-   * Reason: 모서리 스타일은 borderRadius prop으로 통일합니다.
-   */
-  rounded?: ImageFrameVariantProps["rounded"];
-  src: string;
-  alt: string;
-  fallback?: React.ReactNode;
-  loading?: "eager" | "lazy";
-  decoding?: "async" | "auto" | "sync";
-  crossOrigin?: "anonymous" | "use-credentials" | "";
-  referrerPolicy?: React.HTMLAttributeReferrerPolicy;
-  sizes?: string;
-  srcSet?: string;
-  onLoad?: React.ReactEventHandler<HTMLImageElement>;
-  onError?: React.ReactEventHandler<HTMLImageElement>;
-  children?: React.ReactNode;
-}
+export type ImageFrameProps = DistributiveOmit<AspectRatioProps, "children"> &
+  ImageFrameVariantProps & {
+    src: string;
+    alt: string;
+    fallback?: React.ReactNode;
+    loading?: "eager" | "lazy";
+    decoding?: "async" | "auto" | "sync";
+    crossOrigin?: "anonymous" | "use-credentials" | "";
+    referrerPolicy?: React.HTMLAttributeReferrerPolicy;
+    sizes?: string;
+    srcSet?: string;
+    onLoad?: React.ReactEventHandler<HTMLImageElement>;
+    onError?: React.ReactEventHandler<HTMLImageElement>;
+    children?: React.ReactNode;
+  };
 
 export const ImageFrame = React.forwardRef<HTMLDivElement, ImageFrameProps>(
   (
@@ -65,6 +58,7 @@ export const ImageFrame = React.forwardRef<HTMLDivElement, ImageFrameProps>(
       srcSet,
       onLoad,
       onError,
+      borderRadius = "r2",
       children,
       ...rest
     },
@@ -74,7 +68,14 @@ export const ImageFrame = React.forwardRef<HTMLDivElement, ImageFrameProps>(
     const classNames = imageFrameRecipe(variantProps);
 
     return (
-      <AspectRatio ref={ref} ratio={ratio} className={className} {...restProps}>
+      <AspectRatio
+        ref={ref}
+        ratio={ratio}
+        className={className}
+        borderRadius={borderRadius}
+        // splitVariantProps collapses the margin/bleed union; re-assert the shape.
+        {...(restProps as AspectRatioProps)}
+      >
         <Image.Root className={classNames.root}>
           <Image.Content
             className={classNames.content}
@@ -105,19 +106,9 @@ export interface ImageFrameFloaterProps extends FloatProps {}
 
 /**
  * ImageFrame 내에서 오버레이 요소를 배치하기 위한 컴포넌트
- *
- * @remarks
- * offsetX, offsetY 기본값은 rootage 스펙(image-frame-floater)에서 가져옵니다.
  */
 export const ImageFrameFloater = React.forwardRef<HTMLDivElement, ImageFrameFloaterProps>(
-  (
-    {
-      offsetX = floaterVars.base.enabled.root.offset,
-      offsetY = floaterVars.base.enabled.root.offset,
-      ...rest
-    },
-    ref,
-  ) => {
+  ({ offsetX = "x1_5", offsetY = "x1_5", ...rest }, ref) => {
     return <Float ref={ref} offsetX={offsetX} offsetY={offsetY} {...rest} />;
   },
 );
@@ -215,6 +206,7 @@ const HeartFillSvg = (props: React.SVGAttributes<SVGSVGElement>) => {
           y2="10.5391"
           gradientUnits="userSpaceOnUse"
         >
+          {/* NOTE: see image-frame-reaction-button.yaml for the colors */}
           <stop stopColor="#FF9A56" />
           <stop offset="1" stopColor="#FF6600" />
         </linearGradient>
@@ -233,6 +225,8 @@ const HeartLineSvg = (props: React.SVGAttributes<SVGSVGElement>) => (
     aria-hidden="true"
     {...props}
   >
+    {/* NOTE: see image-frame-reaction-button.yaml for the color */}
+    <path d={HeartFillPath} fill="#0000004c" />
     <path fillRule="evenodd" clipRule="evenodd" d={HeartOutlineStrokePath} fill="currentColor" />
   </svg>
 );

package/src/components/Inline/Inline.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 InlineProps extends Omit<BoxProps, "display" | "direction" | "flexWrap"> {}
+export type InlineProps = DistributiveOmit<BoxProps, "display" | "direction" | "flexWrap">;
 
 /**
  * @deprecated Use `HStack` instead.

package/src/components/Layout/Layout.namespace.ts

@@ -0,0 +1,6 @@
+export {
+  LayoutContent as Content,
+  LayoutRoot as Root,
+  type LayoutContentProps as ContentProps,
+  type LayoutRootProps as RootProps,
+} from "./Layout";

package/src/components/Layout/Layout.tsx

@@ -0,0 +1,21 @@
+import type * as React from "react";
+
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import { layout, type LayoutVariantProps } from "@seed-design/css/recipes/layout";
+import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
+
+const { withProvider, withContext } = createSlotRecipeContext(layout);
+
+export interface LayoutRootProps
+  extends LayoutVariantProps,
+    PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const LayoutRoot = withProvider<HTMLDivElement, LayoutRootProps>(Primitive.div, "root");
+
+export interface LayoutContentProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {}
+
+export const LayoutContent = withContext<HTMLDivElement, LayoutContentProps>(
+  Primitive.div,
+  "content",
+);

package/src/components/Layout/index.ts

@@ -0,0 +1,8 @@
+export {
+  LayoutRoot,
+  LayoutContent,
+  type LayoutRootProps,
+  type LayoutContentProps,
+} from "./Layout";
+
+export * as Layout from "./Layout.namespace";

package/src/components/List/List.tsx

@@ -18,7 +18,11 @@ const withStateProps = createWithStateProps([
   { useContext: useSwitchContext, strict: false },
 ]);
 
-export interface ListRootProps extends VStackProps {
+export interface ListRootProps
+  extends Omit<
+    VStackProps,
+    "bleed" | "bleedX" | "bleedY" | "bleedTop" | "bleedRight" | "bleedBottom" | "bleedLeft"
+  > {
   itemBorderRadius?: StyleProps["borderRadius"];
 }
 

package/src/components/Menu/Menu.namespace.ts

@@ -0,0 +1,26 @@
+export {
+  MenuRoot as Root,
+  MenuAnchor as Anchor,
+  MenuTrigger as Trigger,
+  MenuPositioner as Positioner,
+  MenuContent as Content,
+  MenuScrollArea as ScrollArea,
+  MenuGroup as Group,
+  MenuGroupLabel as GroupLabel,
+  MenuItem as Item,
+  MenuItemBody as ItemBody,
+  MenuItemLabel as ItemLabel,
+  MenuItemDescription as ItemDescription,
+  type MenuRootProps as RootProps,
+  type MenuAnchorProps as AnchorProps,
+  type MenuTriggerProps as TriggerProps,
+  type MenuPositionerProps as PositionerProps,
+  type MenuContentProps as ContentProps,
+  type MenuScrollAreaProps as ScrollAreaProps,
+  type MenuGroupProps as GroupProps,
+  type MenuGroupLabelProps as GroupLabelProps,
+  type MenuItemProps as ItemProps,
+  type MenuItemBodyProps as ItemBodyProps,
+  type MenuItemLabelProps as ItemLabelProps,
+  type MenuItemDescriptionProps as ItemDescriptionProps,
+} from "./Menu";