@seed-design/react 1.1.17 → 1.2.0

package/lib/index.js

@@ -4,6 +4,7 @@ export { ActionSheetBackdrop, ActionSheetCloseButton, ActionSheetContent, Action
 import * as ActionSheet_namespace from './components/ActionSheet/ActionSheet.namespace.js';
 export { ActionSheet_namespace as ActionSheet };
 export { Article } from './components/Article/Article.js';
+export { AspectRatio } from './components/AspectRatio/AspectRatio.js';
 export { AvatarBadge, AvatarFallback, AvatarImage, AvatarRoot, AvatarStack } from './components/Avatar/Avatar.js';
 import * as Avatar_namespace from './components/Avatar/Avatar.namespace.js';
 export { Avatar_namespace as Avatar };
@@ -16,7 +17,7 @@ export { CalloutCloseButton, CalloutContent, CalloutDescription, CalloutLink, Ca
 import * as Callout_namespace from './components/Callout/Callout.namespace.js';
 export { Callout_namespace as Callout };
 export { Celsius } from './components/Celsius/Celsius.js';
-export { CheckboxControl, CheckboxHiddenInput, CheckboxIndicator, CheckboxLabel, CheckboxRoot } from './components/Checkbox/Checkbox.js';
+export { CheckboxControl, CheckboxGroup, CheckboxHiddenInput, CheckboxIndicator, CheckboxLabel, CheckboxRoot } from './components/Checkbox/Checkbox.js';
 import * as Checkbox_namespace from './components/Checkbox/Checkbox.namespace.js';
 export { Checkbox_namespace as Checkbox };
 export { ChipLabel, ChipPrefixAvatar, ChipPrefixIcon, ChipRoot, ChipSuffixIcon } from './components/Chip/Chip.js';
@@ -45,18 +46,24 @@ export { Field_namespace as Field };
 export { FieldButtonButton, FieldButtonClearButton, FieldButtonControl, FieldButtonDescription, FieldButtonErrorMessage, FieldButtonFooter, FieldButtonHeader, FieldButtonHiddenInput, FieldButtonIndicatorText, FieldButtonLabel, FieldButtonPlaceholder, FieldButtonPrefixIcon, FieldButtonPrefixText, FieldButtonRequiredIndicator, FieldButtonRoot, FieldButtonSuffixIcon, FieldButtonSuffixText, FieldButtonValue } from './components/FieldButton/FieldButton.js';
 import * as FieldButton_namespace from './components/FieldButton/FieldButton.namespace.js';
 export { FieldButton_namespace as FieldButton };
+export { FieldsetDescription, FieldsetErrorMessage, FieldsetFooter, FieldsetHeader, FieldsetIndicatorText, FieldsetLabel, FieldsetRequiredIndicator, FieldsetRoot } from './components/Fieldset/Fieldset.js';
+import * as Fieldset_namespace from './components/Fieldset/Fieldset.namespace.js';
+export { Fieldset_namespace as Fieldset };
 export { Flex } from './components/Flex/Flex.js';
 export { Float } from './components/Float/Float.js';
 export { FloatingActionButtonIcon, FloatingActionButtonLabel, FloatingActionButtonRoot } from './components/FloatingActionButton/FloatingActionButton.js';
 import * as FloatingActionButton_namespace from './components/FloatingActionButton/FloatingActionButton.namespace.js';
 export { FloatingActionButton_namespace as FloatingActionButton };
-export { HelpBubbleAnchor, HelpBubbleArrow, HelpBubbleArrowTip, HelpBubbleCloseButton, HelpBubbleContent, HelpBubbleDescription, HelpBubblePositioner, HelpBubblePositionerPortal, HelpBubbleRoot, HelpBubbleTitle, HelpBubbleTrigger } from './components/HelpBubble/HelpBubble.js';
+export { Grid } from './components/Grid/Grid.js';
+export { GridItem } from './components/GridItem/GridItem.js';
+export { HelpBubbleAnchor, HelpBubbleArrow, HelpBubbleArrowTip, HelpBubbleBody, HelpBubbleCloseButton, HelpBubbleContent, HelpBubbleDescription, HelpBubblePositioner, HelpBubblePositionerPortal, HelpBubbleRoot, HelpBubbleTitle, HelpBubbleTrigger } from './components/HelpBubble/HelpBubble.js';
 import * as HelpBubble_namespace from './components/HelpBubble/HelpBubble.namespace.js';
 export { HelpBubble_namespace as HelpBubble };
 export { Icon, PrefixIcon, SuffixIcon } from './components/Icon/Icon.js';
 export { IdentityPlaceholderImage, IdentityPlaceholderRoot } from './components/IdentityPlaceholder/IdentityPlaceholder.js';
 import * as IdentityPlaceholder_namespace from './components/IdentityPlaceholder/IdentityPlaceholder.namespace.js';
 export { IdentityPlaceholder_namespace as IdentityPlaceholder };
+export { ImageFrame, ImageFrameBadge, ImageFrameFloater, ImageFrameIcon, ImageFrameIndicator, ImageFrameReactionButton } from './components/ImageFrame/ImageFrame.js';
 export { Inline } from './components/Inline/Inline.js';
 export { InlineBannerCloseButton, InlineBannerContent, InlineBannerDescription, InlineBannerLink, InlineBannerRoot, InlineBannerTitle } from './components/InlineBanner/InlineBanner.js';
 import * as InlineBanner_namespace from './components/InlineBanner/InlineBanner.namespace.js';
@@ -70,7 +77,7 @@ export { LoadingIndicator } from './components/LoadingIndicator/LoadingIndicator
 export { MannerTemp } from './components/MannerTemp/MannerTemp.js';
 export { MannerTempEmote } from './components/MannerTemp/MannerTempEmote.js';
 export { MannerTempBadge } from './components/MannerTempBadge/MannerTempBadge.js';
-export { MenuSheetBackdrop, MenuSheetCloseButton, MenuSheetContent, MenuSheetFooter, MenuSheetGroup, MenuSheetHeader, MenuSheetItem, MenuSheetList, MenuSheetPositioner, MenuSheetRoot, MenuSheetTitle, MenuSheetTrigger } from './components/MenuSheet/MenuSheet.js';
+export { MenuSheetBackdrop, MenuSheetCloseButton, MenuSheetContent, MenuSheetDescription, MenuSheetFooter, MenuSheetGroup, MenuSheetHeader, MenuSheetItem, MenuSheetItemContent, MenuSheetItemDescription, MenuSheetItemLabel, MenuSheetList, MenuSheetPositioner, MenuSheetRoot, MenuSheetTitle, MenuSheetTrigger } from './components/MenuSheet/MenuSheet.js';
 import * as MenuSheet_namespace from './components/MenuSheet/MenuSheet.namespace.js';
 export { MenuSheet_namespace as MenuSheet };
 export { NotificationBadge, NotificationBadgePositioner } from './components/NotificationBadge/NotificationBadge.js';
@@ -88,14 +95,17 @@ export { PullToRefresh_namespace as PullToRefresh };
 export { RadioGroupItem, RadioGroupItemControl, RadioGroupItemHiddenInput, RadioGroupItemIndicator, RadioGroupItemLabel, RadioGroupRoot } from './components/RadioGroup/RadioGroup.js';
 import * as RadioGroup_namespace from './components/RadioGroup/RadioGroup.namespace.js';
 export { RadioGroup_namespace as RadioGroup };
+export { RadioGroupFieldDescription, RadioGroupFieldErrorMessage, RadioGroupFieldFooter, RadioGroupFieldHeader, RadioGroupFieldIndicatorText, RadioGroupFieldLabel, RadioGroupFieldRequiredIndicator, RadioGroupFieldRoot } from './components/RadioGroupField/RadioGroupField.js';
+import * as RadioGroupField_namespace from './components/RadioGroupField/RadioGroupField.namespace.js';
+export { RadioGroupField_namespace as RadioGroupField };
 export { ReactionButton } from './components/ReactionButton/ReactionButton.js';
 export { ResponsivePair } from './components/ResponsivePair/ResponsivePair.js';
 export { ScrollFog } from './components/ScrollFog/ScrollFog.js';
 export { SegmentedControlIndicator, SegmentedControlItem, SegmentedControlItemHiddenInput, SegmentedControlRoot } from './components/SegmentedControl/SegmentedControl.js';
 import * as SegmentedControl_namespace from './components/SegmentedControl/SegmentedControl.namespace.js';
 export { SegmentedControl_namespace as SegmentedControl };
-export { CheckSelectBoxContent, CheckSelectBoxDescription, CheckSelectBoxGroup, CheckSelectBoxLabel, CheckSelectBoxRoot } from './components/SelectBox/CheckSelectBox.js';
-export { RadioSelectBoxContent, RadioSelectBoxDescription, RadioSelectBoxItem, RadioSelectBoxLabel, RadioSelectBoxRoot } from './components/SelectBox/RadioSelectBox.js';
+export { CheckSelectBoxBody, CheckSelectBoxCheckmarkControl, CheckSelectBoxCheckmarkIcon, CheckSelectBoxContent, CheckSelectBoxDescription, CheckSelectBoxFooter, CheckSelectBoxGroup, CheckSelectBoxHiddenInput, CheckSelectBoxLabel, CheckSelectBoxRoot, CheckSelectBoxTrigger } from './components/SelectBox/CheckSelectBox.js';
+export { RadioSelectBoxBody, RadioSelectBoxContent, RadioSelectBoxDescription, RadioSelectBoxFooter, RadioSelectBoxGroup, RadioSelectBoxHiddenInput, RadioSelectBoxItem, RadioSelectBoxLabel, RadioSelectBoxTrigger } from './components/SelectBox/RadioSelectBox.js';
 import * as CheckSelectBox_namespace from './components/SelectBox/CheckSelectBox.namespace.js';
 export { CheckSelectBox_namespace as CheckSelectBox };
 import * as RadioSelectBox_namespace from './components/SelectBox/RadioSelectBox.namespace.js';
@@ -117,7 +127,7 @@ export { TabsCarousel, TabsCarouselCamera, TabsContent, TabsIndicator, TabsList,
 export { tabsCarouselPreventDrag } from '@seed-design/react-tabs';
 import * as Tabs_namespace from './components/Tabs/Tabs.namespace.js';
 export { Tabs_namespace as Tabs };
-export { TagGroupItem, TagGroupRoot } from './components/TagGroup/TagGroup.js';
+export { TagGroupItem, TagGroupItemLabel, TagGroupRoot } from './components/TagGroup/TagGroup.js';
 import * as TagGroup_namespace from './components/TagGroup/TagGroup.namespace.js';
 export { TagGroup_namespace as TagGroup };
 export { Text } from './components/Text/Text.js';

package/lib/utils/styled.cjs

@@ -211,10 +211,13 @@ function useStyleProps(props) {
     flexDirection,
     flexWrap,
     justifyContent,
+    justifySelf,
     alignItems,
     alignContent,
     alignSelf,
     gap,
+    gridColumn,
+    gridRow,
     unstable_transform,
     _active,
     style,
@@ -272,9 +275,12 @@ function useStyleProps(props) {
       "--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
       "--seed-box-background--active": handleColor(_active?.bg ?? _active?.background),

package/lib/utils/styled.d.ts

@@ -131,10 +131,16 @@ export interface StyleProps {
      */
     flexWrap?: "wrap" | "wrap-reverse" | "nowrap" | true;
     justifyContent?: "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "flexStart" | "flexEnd" | "spaceBetween" | "spaceAround";
+    /**
+     * In flexbox layout, this property is ignored.
+     */
+    justifySelf?: "center" | "start" | "end" | "stretch";
     alignItems?: "flex-start" | "flex-end" | "center" | "stretch" | "flexStart" | "flexEnd";
     alignContent?: "flex-start" | "flex-end" | "center" | "stretch" | "flexStart" | "flexEnd";
     alignSelf?: "flex-start" | "flex-end" | "center" | "stretch" | "flexStart" | "flexEnd";
     gap?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+    gridColumn?: string;
+    gridRow?: string;
     unstable_transform?: string;
     _active?: {
         bg?: ScopedColorBg | ScopedColorPalette | (string & {});

package/lib/utils/styled.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styled.d.ts","sourceRoot":"","sources":["../../src/utils/styled.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"styled.d.ts","sourceRoot":"","sources":["../../src/utils/styled.tsx"],"names":[],"mappings":"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"}

package/lib/utils/styled.js

@@ -207,10 +207,13 @@ function useStyleProps(props) {
     flexDirection,
     flexWrap,
     justifyContent,
+    justifySelf,
     alignItems,
     alignContent,
     alignSelf,
     gap,
+    gridColumn,
+    gridRow,
     unstable_transform,
     _active,
     style,
@@ -268,9 +271,12 @@ function useStyleProps(props) {
       "--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
       "--seed-box-background--active": handleColor(_active?.bg ?? _active?.background),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/react",
-  "version": "1.1.17",
+  "version": "1.2.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -43,16 +43,19 @@
     "@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.1",
     "@seed-design/react-drawer": "1.0.5",
     "@seed-design/react-field": "1.0.1",
+    "@seed-design/react-image": "0.1.0",
+    "@seed-design/react-fieldset": "0.1.0",
     "@seed-design/react-field-button": "1.0.1",
     "@seed-design/react-popover": "1.0.3",
     "@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.0.1",
+    "@seed-design/react-radio-group": "1.1.0",
     "@seed-design/react-segmented-control": "1.0.1",
     "@seed-design/react-slider": "1.0.1",
     "@seed-design/react-snackbar": "1.0.0",

package/src/components/AspectRatio/AspectRatio.tsx

@@ -0,0 +1,38 @@
+import { aspectRatio as aspectRatioRecipe } from "@seed-design/css/recipes/aspect-ratio";
+import clsx from "clsx";
+import * as React from "react";
+import { Box, type BoxProps } from "../Box/Box";
+
+export interface AspectRatioProps extends BoxProps {
+  /**
+   * The aspect ratio of the aspect ratio container (width / height).
+   * @default 4 / 3
+   */
+  ratio?: number;
+}
+
+export const AspectRatio = React.forwardRef<HTMLDivElement, AspectRatioProps>(
+  ({ ratio = 4 / 3, children, className, style, ...rest }, ref) => {
+    const child = React.Children.only(children);
+    const aspectRatio = aspectRatioRecipe();
+
+    return (
+      <Box
+        ref={ref}
+        className={clsx(aspectRatio, className)}
+        style={
+          {
+            // NOTE: aspectRatio는 iOS 15+부터 지원하기 때문에 padding으로 ratio hack을 사용합니다.
+            "--seed-aspect-ratio-padding": `${(1 / ratio) * 100}%`,
+            ...style,
+          } as React.CSSProperties
+        }
+        {...rest}
+      >
+        {child}
+      </Box>
+    );
+  },
+);
+
+AspectRatio.displayName = "AspectRatio";

package/src/components/AspectRatio/index.ts

@@ -0,0 +1 @@
+export { AspectRatio, type AspectRatioProps } from "./AspectRatio";

package/src/components/Avatar/Avatar.tsx

@@ -1,4 +1,4 @@
-import { Avatar as AvatarPrimitive } from "@seed-design/react-avatar";
+import { Image } from "@seed-design/react-image";
 import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
 import { avatar, type AvatarVariantProps } from "@seed-design/css/recipes/avatar";
 import { avatarStack, type AvatarStackVariantProps } from "@seed-design/css/recipes/avatar-stack";
@@ -11,28 +11,22 @@ const { PropsProvider, withProvider, withContext } = createSlotRecipeContext(ava
 
 ////////////////////////////////////////////////////////////////////////////////////
 
-export interface AvatarRootProps extends AvatarVariantProps, AvatarPrimitive.RootProps {}
+export interface AvatarRootProps extends AvatarVariantProps, Image.RootProps {}
 
-export const AvatarRoot = withProvider<HTMLDivElement, AvatarRootProps>(
-  AvatarPrimitive.Root,
-  "root",
-);
+export const AvatarRoot = withProvider<HTMLDivElement, AvatarRootProps>(Image.Root, "root");
 
 ////////////////////////////////////////////////////////////////////////////////////
 
-export interface AvatarImageProps extends AvatarPrimitive.ImageProps {}
+export interface AvatarImageProps extends Image.ContentProps {}
 
-export const AvatarImage = withContext<HTMLImageElement, AvatarImageProps>(
-  AvatarPrimitive.Image,
-  "image",
-);
+export const AvatarImage = withContext<HTMLImageElement, AvatarImageProps>(Image.Content, "image");
 
 ////////////////////////////////////////////////////////////////////////////////////
 
-export interface AvatarFallbackProps extends AvatarPrimitive.FallbackProps {}
+export interface AvatarFallbackProps extends Image.FallbackProps {}
 
 export const AvatarFallback = withContext<HTMLDivElement, AvatarFallbackProps>(
-  AvatarPrimitive.Fallback,
+  Image.Fallback,
   "fallback",
 );
 
@@ -48,7 +42,6 @@ export interface AvatarStackProps
   extends AvatarStackVariantProps,
     React.HTMLAttributes<HTMLDivElement> {}
 
-// TODO: implement stacking order
 export const AvatarStack = React.forwardRef<HTMLDivElement, AvatarStackProps>(
   ({ className, children, size, ...otherProps }, ref) => {
     const classNames = avatarStack({ size });

package/src/components/Checkbox/Checkbox.namespace.ts

@@ -1,10 +1,12 @@
 export {
   CheckboxControl as Control,
+  CheckboxGroup as Group,
   CheckboxHiddenInput as HiddenInput,
   CheckboxIndicator as Indicator,
   CheckboxLabel as Label,
   CheckboxRoot as Root,
   type CheckboxControlProps as ControlProps,
+  type CheckboxGroupProps as GroupProps,
   type CheckboxHiddenInputProps as HiddenInputProps,
   type CheckboxIndicatorProps as IndicatorProps,
   type CheckboxLabelProps as LabelProps,

package/src/components/Checkbox/Checkbox.tsx

@@ -9,7 +9,13 @@ import { forwardRef } from "react";
 import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
 import { createWithStateProps } from "../../utils/createWithStateProps";
 import { InternalIcon } from "../private/Icon";
+import { createRecipeContext } from "../../utils/createRecipeContext";
+import {
+  checkboxGroup,
+  type CheckboxGroupVariantProps,
+} from "@seed-design/css/recipes/checkbox-group";
 
+const { withContext: withGroupContext } = createRecipeContext(checkboxGroup);
 const { ClassNamesProvider, withContext } = createSlotRecipeContext(checkbox);
 const {
   withProvider: withCheckmarkProvider,
@@ -20,6 +26,15 @@ const withStateProps = createWithStateProps([useCheckboxContext]);
 
 ////////////////////////////////////////////////////////////////////////////////////
 
+export interface CheckboxGroupProps
+  extends CheckboxGroupVariantProps,
+    PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const CheckboxGroup = withGroupContext<HTMLDivElement, CheckboxGroupProps>(Primitive.div);
+
+////////////////////////////////////////////////////////////////////////////////////
+
 /**
  * @deprecated Use `regular` or `bold` instead of `default` or `stronger`
  */

package/src/components/Checkbox/index.ts

@@ -1,10 +1,12 @@
 export {
   CheckboxControl,
+  CheckboxGroup,
   CheckboxHiddenInput,
   CheckboxIndicator,
   CheckboxLabel,
   CheckboxRoot,
   type CheckboxControlProps,
+  type CheckboxGroupProps,
   type CheckboxHiddenInputProps,
   type CheckboxIndicatorProps,
   type CheckboxLabelProps,

package/src/components/Dialog/Dialog.tsx

@@ -69,6 +69,9 @@ export const DialogHeader = withContext<HTMLDivElement, DialogHeaderProps>(Primi
 
 ////////////////////////////////////////////////////////////////////////////////////
 
+// NOTE: uses DialogPrimitive.TitleProps,
+// but actual rendered component is a Primitive.span rather than a DialogPrimitive.Title
+// find out why later; misses h2 and some a11y features
 export interface DialogTitleProps extends DialogPrimitive.TitleProps {}
 
 export const DialogTitle = withContext<HTMLHeadingElement, DialogTitleProps>(
@@ -78,6 +81,9 @@ export const DialogTitle = withContext<HTMLHeadingElement, DialogTitleProps>(
 
 ////////////////////////////////////////////////////////////////////////////////////
 
+// NOTE: uses DialogPrimitive.DescriptionProps,
+// but actual rendered component is a Primitive.div rather than a DialogPrimitive.Description
+// find out why later; misses p and some a11y features
 export interface DialogDescriptionProps extends DialogPrimitive.DescriptionProps {}
 
 export const DialogDescription = withContext<HTMLParagraphElement, DialogDescriptionProps>(

package/src/components/Fieldset/Fieldset.namespace.ts

@@ -0,0 +1,17 @@
+export {
+  FieldsetRoot as Root,
+  FieldsetHeader as Header,
+  FieldsetLabel as Label,
+  FieldsetIndicatorText as IndicatorText,
+  FieldsetRequiredIndicator as RequiredIndicator,
+  FieldsetFooter as Footer,
+  FieldsetDescription as Description,
+  FieldsetErrorMessage as ErrorMessage,
+  type FieldsetRootProps as RootProps,
+  type FieldsetHeaderProps as HeaderProps,
+  type FieldsetLabelProps as LabelProps,
+  type FieldsetIndicatorTextProps as IndicatorTextProps,
+  type FieldsetFooterProps as FooterProps,
+  type FieldsetDescriptionProps as DescriptionProps,
+  type FieldsetErrorMessageProps as ErrorMessageProps,
+} from "./Fieldset";

package/src/components/Fieldset/Fieldset.tsx

@@ -0,0 +1,101 @@
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import type * as React from "react";
+import { forwardRef } from "react";
+import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
+import { field, type FieldVariantProps } from "@seed-design/css/recipes/field";
+import { fieldLabel, type FieldLabelVariantProps } from "@seed-design/css/recipes/field-label";
+import { Fieldset } from "@seed-design/react-fieldset";
+import { InternalIcon } from "../private/Icon";
+import clsx from "clsx";
+
+const { withProvider, withContext } = createSlotRecipeContext(field);
+const {
+  withContext: withLabelContext,
+  withProvider: withLabelProvider,
+  useClassNames: useLabelClassNames,
+} = createSlotRecipeContext(fieldLabel);
+
+// withStateProps isn't needed because currently useFieldset doesn't return any state props
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface FieldsetRootProps extends FieldVariantProps, Fieldset.RootProps {}
+
+export const FieldsetRoot = withProvider<HTMLDivElement, FieldsetRootProps>(Fieldset.Root, "root");
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface FieldsetHeaderProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {}
+
+export const FieldsetHeader = withContext<HTMLDivElement, FieldsetHeaderProps>(
+  Primitive.div,
+  "header",
+);
+
+export interface FieldsetLabelProps extends FieldLabelVariantProps, Fieldset.LabelProps {}
+
+export const FieldsetLabel = withLabelProvider<HTMLDivElement, FieldsetLabelProps>(
+  Fieldset.Label,
+  "root",
+);
+
+export interface FieldsetIndicatorTextProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLSpanElement> {}
+
+export const FieldsetIndicatorText = withLabelContext<HTMLSpanElement, FieldsetIndicatorTextProps>(
+  Primitive.span,
+  "indicatorText",
+);
+
+export interface FieldsetRequiredIndicatorProps extends React.SVGProps<SVGElement> {}
+
+export const FieldsetRequiredIndicator = forwardRef<SVGSVGElement, FieldsetRequiredIndicatorProps>(
+  ({ 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}
+      />
+    );
+  },
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface FieldsetFooterProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {}
+
+export const FieldsetFooter = withContext<HTMLDivElement, FieldsetFooterProps>(
+  Primitive.div,
+  "footer",
+);
+
+export interface FieldsetDescriptionProps extends Fieldset.DescriptionProps {}
+
+export const FieldsetDescription = withContext<HTMLSpanElement, FieldsetDescriptionProps>(
+  Fieldset.Description,
+  "description",
+);
+
+export interface FieldsetErrorMessageProps extends Fieldset.ErrorMessageProps {}
+
+export const FieldsetErrorMessage = withContext<HTMLDivElement, FieldsetErrorMessageProps>(
+  Fieldset.ErrorMessage,
+  "errorMessage",
+);

package/src/components/Fieldset/index.ts

@@ -0,0 +1,19 @@
+export {
+  FieldsetRoot,
+  FieldsetHeader,
+  FieldsetLabel,
+  FieldsetIndicatorText,
+  FieldsetRequiredIndicator,
+  FieldsetFooter,
+  FieldsetDescription,
+  FieldsetErrorMessage,
+  type FieldsetRootProps,
+  type FieldsetHeaderProps,
+  type FieldsetLabelProps,
+  type FieldsetIndicatorTextProps,
+  type FieldsetFooterProps,
+  type FieldsetDescriptionProps,
+  type FieldsetErrorMessageProps,
+} from "./Fieldset";
+
+export * as Fieldset from "./Fieldset.namespace";

package/src/components/Grid/Grid.tsx

@@ -0,0 +1,79 @@
+import { mergeProps } from "@seed-design/dom-utils";
+import * as React from "react";
+import { Box, type BoxProps } from "../Box/Box";
+
+export interface GridProps extends Omit<BoxProps, "display"> {
+  /**
+   * @default "grid"
+   */
+  display?: "grid" | "none";
+
+  /**
+   * Shorthand for `alignItems`.
+   */
+  align?: BoxProps["alignItems"];
+
+  /**
+   * Shorthand for `justifyContent`.
+   */
+  justify?: BoxProps["justifyContent"];
+
+  justifyItems?: "flex-start" | "flex-end" | "center" | "stretch";
+
+  /**
+   * Shorthand for `gridTemplateColumns`.
+   * If number, `repeat({columns}, minmax(0, 1fr))` is applied.
+   */
+  columns?: number | string;
+
+  /**
+   * Shorthand for `gridTemplateRows`.
+   * If number, `repeat({rows}, minmax(0, 1fr))` is applied.
+   */
+  rows?: number | string;
+
+  // NOTE: grid-template-areas not currently supported here.
+  // since grid-area is a shorthand of grid-column/row (in a grid item),
+  // if we bind grid-area CSS variable together, it causes conflict.
+
+  /**
+   * Shorthand for `gridAutoFlow`.
+   */
+  autoFlow?: "row" | "column" | "row dense" | "column dense";
+
+  /**
+   * Shorthand for `gridAutoColumns`.
+   */
+  autoColumns?: string;
+
+  /**
+   * Shorthand for `gridAutoRows`.
+   */
+  autoRows?: string;
+}
+
+export const Grid = React.forwardRef<HTMLDivElement, GridProps>((props, ref) => {
+  const { align, justify, justifyItems, columns, rows, autoFlow, autoColumns, autoRows, ...rest } =
+    props;
+
+  return (
+    // @ts-expect-error: display: "grid" is not allowed in the Box component
+    <Box
+      ref={ref}
+      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,
+          "--seed-grid-auto-flow": autoFlow,
+          "--seed-grid-auto-columns": autoColumns,
+          "--seed-grid-auto-rows": autoRows,
+          "--seed-grid-justify-items": justifyItems,
+        } as React.CSSProperties,
+      })}
+    />
+  );
+});

package/src/components/Grid/index.ts

@@ -0,0 +1 @@
+export { Grid, type GridProps } from "./Grid";