@seed-design/react 1.1.17 → 1.2.1

package/src/components/TagGroup/TagGroup.tsx

@@ -4,13 +4,14 @@ import {
   tagGroupItem,
   type TagGroupItemVariantProps,
 } from "@seed-design/css/recipes/tag-group-item";
-import { createRecipeContext } from "../../utils/createRecipeContext";
 import { forwardRef, Children, Fragment } from "react";
 import clsx from "clsx";
 import { splitMultipleVariantsProps } from "../../utils/splitMultipleVariantsProps";
-import { mergeProps } from "@seed-design/dom-utils";
+import { useStyleProps, type StyleProps } from "../../utils/styled";
+import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
 
-const { PropsProvider, useProps } = createRecipeContext(tagGroupItem);
+const { PropsProvider, useProps, withContext, ClassNamesProvider } =
+  createSlotRecipeContext(tagGroupItem);
 
 export interface TagGroupRootProps
   extends TagGroupVariantProps,
@@ -50,14 +51,37 @@ export const TagGroupRoot = forwardRef<HTMLSpanElement, TagGroupRootProps>(
 
 export interface TagGroupItemProps
   extends TagGroupItemVariantProps,
+    Pick<StyleProps, "flexShrink">,
     PrimitiveProps,
     React.HTMLAttributes<HTMLSpanElement> {}
 
-export const TagGroupItem = forwardRef<HTMLSpanElement, TagGroupItemProps>((props, ref) => {
-  const parentVariantProps = useProps();
+export const TagGroupItem = forwardRef<HTMLSpanElement, TagGroupItemProps>(
+  ({ className, ...props }, ref) => {
+    const parentVariantProps = useProps();
 
-  const [variantProps, { className, ...otherProps }] = tagGroupItem.splitVariantProps(props);
-  const recipeClassName = tagGroupItem(mergeProps(parentVariantProps, variantProps));
+    const [variantProps, otherProps] = tagGroupItem.splitVariantProps(props);
+    const classNames = tagGroupItem({ ...parentVariantProps, ...variantProps });
 
-  return <Primitive.span ref={ref} className={clsx(recipeClassName, className)} {...otherProps} />;
-});
+    const { style, restProps } = useStyleProps(otherProps);
+
+    return (
+      <ClassNamesProvider value={classNames}>
+        <Primitive.span
+          ref={ref}
+          style={style}
+          className={clsx(classNames.root, className)}
+          {...restProps}
+        />
+      </ClassNamesProvider>
+    );
+  },
+);
+
+export interface TagGroupItemLabelProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLSpanElement> {}
+
+export const TagGroupItemLabel = withContext<HTMLSpanElement, TagGroupItemLabelProps>(
+  Primitive.span,
+  "label",
+);

package/src/components/TagGroup/index.ts

@@ -1,8 +1,10 @@
 export {
   TagGroupRoot,
   TagGroupItem,
+  TagGroupItemLabel,
   type TagGroupRootProps,
   type TagGroupItemProps,
+  type TagGroupItemLabelProps,
 } from "./TagGroup";
 
 export * as TagGroup from "./TagGroup.namespace";

package/src/components/index.ts

@@ -2,6 +2,7 @@ export * from "./ActionButton";
 export * from "./ActionChip";
 export * from "./ActionSheet";
 export * from "./Article";
+export * from "./AspectRatio";
 export * from "./Avatar";
 export * from "./Badge";
 export * from "./BottomSheet";
@@ -23,12 +24,16 @@ export * from "./ExtendedFab";
 export * from "./Fab";
 export * from "./Field";
 export * from "./FieldButton";
+export * from "./Fieldset";
 export * from "./Flex";
 export * from "./Float";
 export * from "./FloatingActionButton";
+export * from "./Grid";
+export * from "./GridItem";
 export * from "./HelpBubble";
 export * from "./Icon";
 export * from "./IdentityPlaceholder";
+export * from "./ImageFrame";
 export * from "./Inline";
 export * from "./InlineBanner";
 export * from "./LinkContent";
@@ -43,6 +48,7 @@ export * from "./Portal";
 export * from "./ProgressCircle";
 export * from "./PullToRefresh";
 export * from "./RadioGroup";
+export * from "./RadioGroupField";
 export * from "./ReactionButton";
 export * from "./ResponsivePair";
 export * from "./ScrollFog";

package/src/utils/styled.tsx

@@ -471,6 +471,11 @@ export interface StyleProps {
     | "spaceBetween" // @deprecated Use `space-between` instead.
     | "spaceAround"; // @deprecated Use `space-around` instead.
 
+  /**
+   * In flexbox layout, this property is ignored.
+   */
+  justifySelf?: "center" | "start" | "end" | "stretch";
+
   alignItems?:
     | "flex-start"
     | "flex-end"
@@ -497,6 +502,13 @@ export interface StyleProps {
 
   gap?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
 
+  // Grid Item
+  // NOTE: gridArea는 지원하지 않습니다.
+  // grid-area가 grid-column/row의 shorthand이므로 CSS 변수로 동시에 바인딩하면 충돌합니다.
+  gridColumn?: string;
+
+  gridRow?: string;
+
   // NOTE: Not sure how to treat transform/translate right now, mark as unstable until we have a better solution.
   unstable_transform?: string;
 
@@ -577,10 +589,13 @@ export function useStyleProps<T extends UseStyleProps>(
     flexDirection,
     flexWrap,
     justifyContent,
+    justifySelf,
     alignItems,
     alignContent,
     alignSelf,
     gap,
+    gridColumn,
+    gridRow,
     unstable_transform,
     _active,
     style,
@@ -644,9 +659,12 @@ export function useStyleProps<T extends UseStyleProps>(
       "--seed-box-flex-direction": handleFlexDirection(flexDirection),
       "--seed-box-flex-wrap": flexWrap === true ? "wrap" : flexWrap,
       "--seed-box-justify-content": handleJustifyContent(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-grid-column": gridColumn,
+      "--seed-box-grid-row": gridRow,
       "--seed-box-unstable-transform": unstable_transform,
 
       // Active