@seed-design/react 0.0.0-alpha-20260324091316

package/src/components/ActionSheet/ActionSheet.tsx

@@ -0,0 +1,192 @@
+import { actionSheet, type ActionSheetVariantProps } from "@seed-design/css/recipes/action-sheet";
+import {
+  actionSheetItem,
+  type ActionSheetItemVariantProps,
+} from "@seed-design/css/recipes/action-sheet-item";
+import { Dialog as DialogPrimitive, useDialogContext } from "@seed-design/react-dialog";
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import type * as React from "react";
+import { createRecipeContext } from "../../utils/createRecipeContext";
+import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
+import { createWithStateProps } from "../../utils/createWithStateProps";
+
+const { withRootProvider, withContext } = createSlotRecipeContext(actionSheet);
+const { withContext: withItemContext } = createRecipeContext(actionSheetItem);
+const withStateProps = createWithStateProps([useDialogContext]);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * @deprecated Use `MenuSheet` instead.
+ */
+export interface ActionSheetRootProps extends ActionSheetVariantProps, DialogPrimitive.RootProps {
+  /**
+   * @default true
+   */
+  lazyMount?: DialogPrimitive.RootProps["lazyMount"];
+  /**
+   * @default true
+   */
+  unmountOnExit?: DialogPrimitive.RootProps["unmountOnExit"];
+}
+
+/**
+ * @deprecated Use `MenuSheet` instead.
+ */
+export const ActionSheetRoot = withRootProvider<ActionSheetRootProps>(DialogPrimitive.Root, {
+  defaultProps: {
+    lazyMount: true,
+    unmountOnExit: true,
+  },
+});
+
+////////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * @deprecated Use `MenuSheet` instead.
+ */
+export interface ActionSheetTriggerProps extends DialogPrimitive.TriggerProps {}
+
+/**
+ * @deprecated Use `MenuSheet` instead.
+ */
+export const ActionSheetTrigger = DialogPrimitive.Trigger;
+
+////////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * @deprecated Use `MenuSheet` instead.
+ */
+export interface ActionSheetPositionerProps extends DialogPrimitive.PositionerProps {}
+
+/**
+ * @deprecated Use `MenuSheet` instead.
+ */
+export const ActionSheetPositioner = withContext<HTMLDivElement, ActionSheetPositionerProps>(
+  DialogPrimitive.Positioner,
+  "positioner",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * @deprecated Use `MenuSheet` instead.
+ */
+export interface ActionSheetBackdropProps extends DialogPrimitive.BackdropProps {}
+
+/**
+ * @deprecated Use `MenuSheet` instead.
+ */
+export const ActionSheetBackdrop = withContext<HTMLDivElement, ActionSheetBackdropProps>(
+  DialogPrimitive.Backdrop,
+  "backdrop",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * @deprecated Use `MenuSheet` instead.
+ */
+export interface ActionSheetContentProps extends DialogPrimitive.ContentProps {}
+
+/**
+ * @deprecated Use `MenuSheet` instead.
+ */
+export const ActionSheetContent = withContext<HTMLDivElement, ActionSheetContentProps>(
+  DialogPrimitive.Content,
+  "content",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * @deprecated Use `MenuSheet` instead.
+ */
+export interface ActionSheetHeaderProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+/**
+ * @deprecated Use `MenuSheet` instead.
+ */
+export const ActionSheetHeader = withContext<HTMLDivElement, ActionSheetHeaderProps>(
+  withStateProps(Primitive.div),
+  "header",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * @deprecated Use `MenuSheet` instead.
+ */
+export interface ActionSheetTitleProps extends DialogPrimitive.TitleProps {}
+
+/**
+ * @deprecated Use `MenuSheet` instead.
+ */
+export const ActionSheetTitle = withContext<HTMLHeadingElement, ActionSheetTitleProps>(
+  withStateProps(Primitive.h2),
+  "title",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * @deprecated Use `MenuSheet` instead.
+ */
+export interface ActionSheetDescriptionProps extends DialogPrimitive.DescriptionProps {}
+
+/**
+ * @deprecated Use `MenuSheet` instead.
+ */
+export const ActionSheetDescription = withContext<
+  HTMLParagraphElement,
+  ActionSheetDescriptionProps
+>(withStateProps(Primitive.p), "description");
+
+////////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * @deprecated Use `MenuSheet` instead.
+ */
+export interface ActionSheetListProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+/**
+ * @deprecated Use `MenuSheet` instead.
+ */
+export const ActionSheetList = withContext<HTMLDivElement, ActionSheetListProps>(
+  withStateProps(Primitive.div),
+  "list",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * @deprecated Use `MenuSheet` instead.
+ */
+export interface ActionSheetItemProps
+  extends PrimitiveProps,
+    ActionSheetItemVariantProps,
+    React.HTMLAttributes<HTMLButtonElement> {}
+
+/**
+ * @deprecated Use `MenuSheet` instead.
+ */
+export const ActionSheetItem = withItemContext<HTMLButtonElement, ActionSheetItemProps>(
+  withStateProps(Primitive.button),
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * @deprecated Use `MenuSheet` instead.
+ */
+export interface ActionSheetCloseButtonProps extends DialogPrimitive.CloseButtonProps {}
+
+/**
+ * @deprecated Use `MenuSheet` instead.
+ */
+export const ActionSheetCloseButton = withContext<HTMLDivElement, ActionSheetCloseButtonProps>(
+  DialogPrimitive.CloseButton,
+  "closeButton",
+);

package/src/components/ActionSheet/index.ts

@@ -0,0 +1,26 @@
+export {
+  ActionSheetBackdrop,
+  ActionSheetPositioner,
+  ActionSheetContent,
+  ActionSheetHeader,
+  ActionSheetRoot,
+  ActionSheetTitle,
+  ActionSheetDescription,
+  ActionSheetTrigger,
+  ActionSheetList,
+  ActionSheetItem,
+  ActionSheetCloseButton,
+  type ActionSheetBackdropProps,
+  type ActionSheetPositionerProps,
+  type ActionSheetContentProps,
+  type ActionSheetHeaderProps,
+  type ActionSheetRootProps,
+  type ActionSheetTitleProps,
+  type ActionSheetDescriptionProps,
+  type ActionSheetTriggerProps,
+  type ActionSheetListProps,
+  type ActionSheetItemProps,
+  type ActionSheetCloseButtonProps,
+} from "./ActionSheet";
+
+export * as ActionSheet from "./ActionSheet.namespace";

package/src/components/Article/Article.tsx

@@ -0,0 +1,19 @@
+import * as React from "react";
+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 const Article = React.forwardRef<HTMLElement, ArticleProps>(
+  ({ as = "article", className, ...props }, ref) => {
+    return (
+      <Box
+        as={as}
+        ref={ref as React.ForwardedRef<HTMLDivElement>}
+        className={clsx(article(), className)}
+        {...props}
+      />
+    );
+  },
+);

package/src/components/Article/index.ts

@@ -0,0 +1 @@
+export { Article, type ArticleProps } from "./Article";

package/src/components/AspectRatio/AspectRatio.tsx

@@ -0,0 +1,56 @@
+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;
+
+  // following 3 are just here for JSDoc purposes
+
+  /**
+   * @default "relative"
+   */
+  position?: BoxProps["position"];
+  /**
+   * @default "hidden"
+   */
+  overflowX?: BoxProps["overflowX"];
+  /**
+   * @default "hidden"
+   */
+  overflowY?: BoxProps["overflowY"];
+}
+
+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)}
+        position="relative" // TODO: these are currently here but we might want to make AspectRatio just a Primitive.div which takes BoxProps
+        overflowX="hidden"
+        overflowY="hidden"
+        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.namespace.ts

@@ -0,0 +1,12 @@
+export {
+  AvatarBadge as Badge,
+  AvatarFallback as Fallback,
+  AvatarImage as Image,
+  AvatarRoot as Root,
+  AvatarStack as Stack,
+  type AvatarBadgeProps as BadgeProps,
+  type AvatarFallbackProps as FallbackProps,
+  type AvatarImageProps as ImageProps,
+  type AvatarRootProps as RootProps,
+  type AvatarStackProps as StackProps,
+} from "./Avatar";

package/src/components/Avatar/Avatar.tsx

@@ -0,0 +1,62 @@
+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";
+import clsx from "clsx";
+import * as React from "react";
+import { useMemo } from "react";
+import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
+
+const { PropsProvider, withProvider, withContext } = createSlotRecipeContext(avatar);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface AvatarRootProps extends AvatarVariantProps, Image.RootProps {}
+
+export const AvatarRoot = withProvider<HTMLDivElement, AvatarRootProps>(Image.Root, "root");
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface AvatarImageProps extends Image.ContentProps {}
+
+export const AvatarImage = withContext<HTMLImageElement, AvatarImageProps>(Image.Content, "image");
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface AvatarFallbackProps extends Image.FallbackProps {}
+
+export const AvatarFallback = withContext<HTMLDivElement, AvatarFallbackProps>(
+  Image.Fallback,
+  "fallback",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface AvatarBadgeProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {}
+
+export const AvatarBadge = withContext<HTMLDivElement, AvatarBadgeProps>(Primitive.div, "badge");
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface AvatarStackProps
+  extends AvatarStackVariantProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const AvatarStack = React.forwardRef<HTMLDivElement, AvatarStackProps>(
+  ({ className, children, size, ...otherProps }, ref) => {
+    const classNames = avatarStack({ size });
+    const avatars = React.Children.toArray(children);
+    return (
+      <PropsProvider value={useMemo(() => ({ size }), [size])}>
+        <div ref={ref} className={clsx(classNames.root, className)} {...otherProps}>
+          {avatars.map((avatar, index) => (
+            // biome-ignore lint/suspicious/noArrayIndexKey: There is no unique key for each child
+            <div key={index} className={classNames.item}>
+              {avatar}
+            </div>
+          ))}
+        </div>
+      </PropsProvider>
+    );
+  },
+);

package/src/components/Avatar/index.ts

@@ -0,0 +1,14 @@
+export {
+  AvatarBadge,
+  AvatarFallback,
+  AvatarImage,
+  AvatarRoot,
+  AvatarStack,
+  type AvatarBadgeProps,
+  type AvatarFallbackProps,
+  type AvatarImageProps,
+  type AvatarRootProps,
+  type AvatarStackProps,
+} from "./Avatar";
+
+export * as Avatar from "./Avatar.namespace";

package/src/components/Badge/Badge.tsx

@@ -0,0 +1,26 @@
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import { badge, type BadgeVariantProps } from "@seed-design/css/recipes/badge";
+import type * as React from "react";
+import { forwardRef } from "react";
+import clsx from "clsx";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface BadgeProps
+  extends BadgeVariantProps,
+    PrimitiveProps,
+    React.HTMLAttributes<HTMLSpanElement> {}
+
+export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(
+  ({ className, children, ...props }, ref) => {
+    const [variantProps, restProps] = badge.splitVariantProps(props);
+    const { root, label } = badge(variantProps);
+
+    return (
+      <Primitive.span className={clsx(root, className)} {...restProps} ref={ref}>
+        <Primitive.span className={label}>{children}</Primitive.span>
+      </Primitive.span>
+    );
+  },
+);
+Badge.displayName = "Badge";

package/src/components/Badge/index.ts

@@ -0,0 +1 @@
+export { Badge, type BadgeProps } from "./Badge";

package/src/components/BottomSheet/BottomSheet.namespace.ts

@@ -0,0 +1,29 @@
+export {
+  BottomSheetBackdrop as Backdrop,
+  BottomSheetBody as Body,
+  BottomSheetContent as Content,
+  BottomSheetDescription as Description,
+  BottomSheetFooter as Footer,
+  BottomSheetHeader as Header,
+  BottomSheetPositioner as Positioner,
+  BottomSheetRoot as Root,
+  BottomSheetTitle as Title,
+  BottomSheetTrigger as Trigger,
+  BottomSheetCloseButton as CloseButton,
+  type BottomSheetBackdropProps as BackdropProps,
+  type BottomSheetBodyProps as BodyProps,
+  type BottomSheetContentProps as ContentProps,
+  type BottomSheetDescriptionProps as DescriptionProps,
+  type BottomSheetFooterProps as FooterProps,
+  type BottomSheetHeaderProps as HeaderProps,
+  type BottomSheetPositionerProps as PositionerProps,
+  type BottomSheetRootProps as RootProps,
+  type BottomSheetTitleProps as TitleProps,
+  type BottomSheetTriggerProps as TriggerProps,
+  type BottomSheetCloseButtonProps as CloseButtonProps,
+} from "./BottomSheet";
+
+export {
+  BottomSheetHandle as Handle,
+  type BottomSheetHandleProps as HandleProps,
+} from "../BottomSheetHandle";

package/src/components/BottomSheet/BottomSheet.tsx

@@ -0,0 +1,122 @@
+import { bottomSheet, type BottomSheetVariantProps } from "@seed-design/css/recipes/bottom-sheet";
+import { dataAttr } from "@seed-design/dom-utils";
+import { Drawer, useDrawerContext } from "@seed-design/react-drawer";
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import { forwardRef } from "react";
+import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
+import { withStyleProps, type StyleProps } from "../../utils/styled";
+
+const { withRootProvider, withContext } = createSlotRecipeContext(bottomSheet);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface BottomSheetRootProps extends BottomSheetVariantProps, Drawer.RootProps {}
+
+export const BottomSheetRoot = withRootProvider<BottomSheetRootProps>(Drawer.Root, {
+  defaultProps: {
+    direction: "bottom",
+  },
+});
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface BottomSheetTriggerProps extends Drawer.TriggerProps {}
+
+export const BottomSheetTrigger = Drawer.Trigger;
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface BottomSheetPositionerProps extends Drawer.PositionerProps {}
+
+export const BottomSheetPositioner = withContext<HTMLDivElement, BottomSheetPositionerProps>(
+  Drawer.Positioner,
+  "positioner",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface BottomSheetBackdropProps extends Drawer.BackdropProps {}
+
+export const BottomSheetBackdrop = withContext<HTMLDivElement, BottomSheetBackdropProps>(
+  Drawer.Backdrop,
+  "backdrop",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface BottomSheetContentProps extends Drawer.ContentProps {}
+
+export const BottomSheetContent = withContext<HTMLDivElement, BottomSheetContentProps>(
+  Drawer.Content,
+  "content",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface BottomSheetHeaderProps extends Drawer.HeaderProps {}
+
+export const BottomSheetHeader = withContext<HTMLDivElement, BottomSheetHeaderProps>(
+  Drawer.Header,
+  "header",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface BottomSheetTitleProps extends Drawer.TitleProps {}
+
+export const BottomSheetTitle = withContext<HTMLHeadingElement, BottomSheetTitleProps>(
+  forwardRef<HTMLHeadingElement, BottomSheetTitleProps>((props, ref) => {
+    const { isCloseButtonRendered } = useDrawerContext();
+
+    return (
+      <Drawer.Title ref={ref} data-show-close-button={dataAttr(isCloseButtonRendered)} {...props} />
+    );
+  }),
+  "title",
+);
+
+BottomSheetTitle.displayName = "BottomSheetTitle";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface BottomSheetDescriptionProps extends Drawer.DescriptionProps {}
+
+export const BottomSheetDescription = withContext<
+  HTMLParagraphElement,
+  BottomSheetDescriptionProps
+>(Drawer.Description, "description");
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface BottomSheetBodyProps
+  extends PrimitiveProps,
+    Pick<
+      StyleProps,
+      "paddingX" | "height" | "maxHeight" | "minHeight" | "justifyContent" | "alignItems"
+    >,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const BottomSheetBody = withContext<HTMLDivElement, BottomSheetBodyProps>(
+  withStyleProps(Primitive.div),
+  "body",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface BottomSheetFooterProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const BottomSheetFooter = withContext<HTMLDivElement, BottomSheetFooterProps>(
+  Primitive.div,
+  "footer",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface BottomSheetCloseButtonProps extends Drawer.CloseButtonProps {}
+
+export const BottomSheetCloseButton = withContext<HTMLButtonElement, BottomSheetCloseButtonProps>(
+  Drawer.CloseButton,
+  "closeButton",
+);

package/src/components/BottomSheet/index.ts

@@ -0,0 +1,26 @@
+export {
+  BottomSheetBackdrop,
+  BottomSheetBody,
+  BottomSheetContent,
+  BottomSheetDescription,
+  BottomSheetFooter,
+  BottomSheetHeader,
+  BottomSheetPositioner,
+  BottomSheetRoot,
+  BottomSheetTitle,
+  BottomSheetTrigger,
+  BottomSheetCloseButton,
+  type BottomSheetBackdropProps,
+  type BottomSheetBodyProps,
+  type BottomSheetContentProps,
+  type BottomSheetDescriptionProps,
+  type BottomSheetFooterProps,
+  type BottomSheetHeaderProps,
+  type BottomSheetPositionerProps,
+  type BottomSheetRootProps,
+  type BottomSheetTitleProps,
+  type BottomSheetTriggerProps,
+  type BottomSheetCloseButtonProps,
+} from "./BottomSheet";
+
+export * as BottomSheet from "./BottomSheet.namespace";

package/src/components/BottomSheetHandle/BottomSheetHandle.tsx

@@ -0,0 +1,23 @@
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import { Drawer } from "@seed-design/react-drawer";
+import { bottomSheetHandle } from "@seed-design/css/recipes/bottom-sheet-handle";
+import React from "react";
+import clsx from "clsx";
+
+export interface BottomSheetHandleProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const BottomSheetHandle = React.forwardRef<HTMLDivElement, BottomSheetHandleProps>(
+  ({ className, ...props }, ref) => {
+    const classNames = bottomSheetHandle();
+
+    return (
+      <Drawer.Handle ref={ref} className={clsx(classNames.root, className)} {...props}>
+        <Primitive.div aria-hidden="true" className={classNames.touchArea} />
+      </Drawer.Handle>
+    );
+  },
+);
+
+BottomSheetHandle.displayName = "BottomSheetHandle";

package/src/components/BottomSheetHandle/index.ts

@@ -0,0 +1 @@
+export { BottomSheetHandle, type BottomSheetHandleProps } from "./BottomSheetHandle";