@seed-design/react 0.0.0-alpha-20260324091316

package/src/components/List/index.ts

@@ -0,0 +1,20 @@
+export {
+  ListContent,
+  ListDetail,
+  ListItem,
+  ListPrefix,
+  ListRoot,
+  ListSuffix,
+  ListTitle,
+  type ListContentProps,
+  type ListDetailProps,
+  type ListItemProps,
+  type ListPrefixProps,
+  type ListRootProps,
+  type ListSuffixProps,
+  type ListTitleProps,
+} from "./List";
+
+export { ListHeader, type ListHeaderProps } from "./ListHeader";
+
+export * as List from "./List.namespace";

package/src/components/LoadingIndicator/LoadingIndicator.tsx

@@ -0,0 +1,27 @@
+import { mergeProps } from "@seed-design/dom-utils";
+import { Primitive } from "@seed-design/react-primitive";
+import { forwardRef } from "react";
+import { usePendingButtonContext } from "./usePendingButton";
+
+export interface LoadingIndicatorProps
+  extends Omit<React.HTMLAttributes<HTMLSpanElement>, "color"> {
+  indicator: React.ReactNode;
+}
+
+export const LoadingIndicator = forwardRef<HTMLSpanElement, LoadingIndicatorProps>((props, ref) => {
+  const { indicator, children, ...otherProps } = props;
+  const { stateProps } = usePendingButtonContext();
+  return (
+    <>
+      <Primitive.span
+        ref={ref}
+        {...mergeProps(stateProps, { className: "seed-loading-indicator" }, otherProps)}
+      >
+        {indicator}
+      </Primitive.span>
+      <Primitive.span style={{ opacity: 0, display: "inherit", gap: "inherit" }}>
+        {children}
+      </Primitive.span>
+    </>
+  );
+});

package/src/components/LoadingIndicator/index.ts

@@ -0,0 +1,4 @@
+export {
+  LoadingIndicator,
+  type LoadingIndicatorProps,
+} from "./LoadingIndicator";

package/src/components/LoadingIndicator/usePendingButton.tsx

@@ -0,0 +1,45 @@
+import { elementProps } from "@seed-design/dom-utils";
+import * as React from "react";
+
+export interface UsePendingButtonProps {
+  /**
+   * 버튼에 등록된 비동기 작업이 진행 중임을 사용자에게 알립니다.
+   * @default false
+   */
+  loading?: boolean;
+
+  /**
+   * 버튼의 비활성화 여부를 나타냅니다.
+   * @default false
+   */
+  disabled?: boolean;
+}
+
+export type UsePendingButtonReturn = ReturnType<typeof usePendingButton>;
+
+export function usePendingButton(props: UsePendingButtonProps) {
+  const { loading, disabled } = props;
+  const stateProps = elementProps({
+    "data-loading": loading ? "" : undefined,
+    "data-disabled": disabled ? "" : undefined,
+  });
+
+  return {
+    loading,
+    disabled,
+    stateProps,
+  };
+}
+
+const PendingButtonContext = React.createContext<ReturnType<typeof usePendingButton> | null>(null);
+
+export const PendingButtonProvider = PendingButtonContext.Provider;
+
+export const usePendingButtonContext = () => {
+  const context = React.useContext(PendingButtonContext);
+  if (context === null) {
+    throw new Error("usePendingButtonContext should be used within UsePendingButtonProvider");
+  }
+
+  return context;
+};

package/src/components/MannerTemp/MannerTemp.tsx

@@ -0,0 +1,25 @@
+import { mannerTemp, type MannerTempVariantProps } from "@seed-design/css/recipes/manner-temp";
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import type * as React from "react";
+import { forwardRef, useMemo } from "react";
+import { createRecipeContext } from "../../utils/createRecipeContext";
+import { MannerTempEmotePropsProvider } from "./MannerTempEmote";
+
+const { withContext } = createRecipeContext(mannerTemp);
+
+export interface MannerTempProps
+  extends MannerTempVariantProps,
+    PrimitiveProps,
+    React.HTMLAttributes<HTMLSpanElement> {}
+
+const MannerTempBase = withContext<HTMLSpanElement, MannerTempProps>(Primitive.span);
+
+export const MannerTemp = forwardRef<HTMLSpanElement, MannerTempProps>((props, ref) => {
+  const emoteProps = useMemo(() => ({ level: props.level }), [props.level]);
+
+  return (
+    <MannerTempEmotePropsProvider value={emoteProps}>
+      <MannerTempBase {...props} ref={ref} />
+    </MannerTempEmotePropsProvider>
+  );
+});

package/src/components/MannerTemp/MannerTempEmote.tsx

@@ -0,0 +1,136 @@
+import type * as React from "react";
+import { createContext, forwardRef, useContext } from "react";
+
+const src = {
+  l1: {
+    x2: "https://assetstorage.krrt.io/1123529253537884138/b63c9b3c-410c-4cf5-ba83-d787a03c3c57/width_64_height_64.webp",
+    x3: "https://assetstorage.krrt.io/1123529253537884138/b63c9b3c-410c-4cf5-ba83-d787a03c3c57/width_96_height_96.webp",
+    x4: "https://assetstorage.krrt.io/1123529253537884138/b63c9b3c-410c-4cf5-ba83-d787a03c3c57/width_128_height_128.webp",
+  },
+  l2: {
+    x2: "https://assetstorage.krrt.io/1123529253537884138/8e4bc458-f6d4-41ce-bfa2-17ea34022f5b/width_64_height_64.webp",
+    x3: "https://assetstorage.krrt.io/1123529253537884138/8e4bc458-f6d4-41ce-bfa2-17ea34022f5b/width_96_height_96.webp",
+    x4: "https://assetstorage.krrt.io/1123529253537884138/8e4bc458-f6d4-41ce-bfa2-17ea34022f5b/width_128_height_128.webp",
+  },
+  l3: {
+    x2: "https://assetstorage.krrt.io/1123529253537884138/906ff501-edf6-402d-a3a4-a93ce9e04d30/width_64_height_64.webp",
+    x3: "https://assetstorage.krrt.io/1123529253537884138/906ff501-edf6-402d-a3a4-a93ce9e04d30/width_96_height_96.webp",
+    x4: "https://assetstorage.krrt.io/1123529253537884138/906ff501-edf6-402d-a3a4-a93ce9e04d30/width_128_height_128.webp",
+  },
+  l4: {
+    x2: "https://assetstorage.krrt.io/1123529253537884138/10753976-b25d-4e4c-84b2-dbbe196dd0d9/width_64_height_64.webp",
+    x3: "https://assetstorage.krrt.io/1123529253537884138/10753976-b25d-4e4c-84b2-dbbe196dd0d9/width_96_height_96.webp",
+    x4: "https://assetstorage.krrt.io/1123529253537884138/10753976-b25d-4e4c-84b2-dbbe196dd0d9/width_128_height_128.webp",
+  },
+  l5: {
+    x2: "https://assetstorage.krrt.io/1123529253537884138/ddfbd296-5089-408c-aa37-919f45074e5e/width_64_height_64.webp",
+    x3: "https://assetstorage.krrt.io/1123529253537884138/ddfbd296-5089-408c-aa37-919f45074e5e/width_96_height_96.webp",
+    x4: "https://assetstorage.krrt.io/1123529253537884138/ddfbd296-5089-408c-aa37-919f45074e5e/width_128_height_128.webp",
+  },
+  l6: {
+    x2: "https://assetstorage.krrt.io/1123529253537884138/bf8f9b4d-c72e-4bf2-a094-460d3ad1b11f/width_64_height_64.webp",
+    x3: "https://assetstorage.krrt.io/1123529253537884138/bf8f9b4d-c72e-4bf2-a094-460d3ad1b11f/width_96_height_96.webp",
+    x4: "https://assetstorage.krrt.io/1123529253537884138/bf8f9b4d-c72e-4bf2-a094-460d3ad1b11f/width_128_height_128.webp",
+  },
+  l7: {
+    x2: "https://assetstorage.krrt.io/1123529253537884138/9906a459-a4e3-4521-a6e5-0cc24c0aa763/width_64_height_64.webp",
+    x3: "https://assetstorage.krrt.io/1123529253537884138/9906a459-a4e3-4521-a6e5-0cc24c0aa763/width_96_height_96.webp",
+    x4: "https://assetstorage.krrt.io/1123529253537884138/9906a459-a4e3-4521-a6e5-0cc24c0aa763/width_128_height_128.webp",
+  },
+  l8: {
+    x2: "https://assetstorage.krrt.io/1123529253537884138/438edadb-d31d-4711-aebd-a72f303fdf49/width_64_height_64.webp",
+    x3: "https://assetstorage.krrt.io/1123529253537884138/438edadb-d31d-4711-aebd-a72f303fdf49/width_96_height_96.webp",
+    x4: "https://assetstorage.krrt.io/1123529253537884138/438edadb-d31d-4711-aebd-a72f303fdf49/width_128_height_128.webp",
+  },
+  l9: {
+    x2: "https://assetstorage.krrt.io/1123529253537884138/61f6c297-11da-4d72-ba90-20cd69c09c22/width_64_height_64.webp",
+    x3: "https://assetstorage.krrt.io/1123529253537884138/61f6c297-11da-4d72-ba90-20cd69c09c22/width_96_height_96.webp",
+    x4: "https://assetstorage.krrt.io/1123529253537884138/61f6c297-11da-4d72-ba90-20cd69c09c22/width_128_height_128.webp",
+  },
+  l10: {
+    x2: "https://assetstorage.krrt.io/1123529253537884138/6cc410ac-3a55-4542-b49f-53551db74c4d/width_64_height_64.webp",
+    x3: "https://assetstorage.krrt.io/1123529253537884138/6cc410ac-3a55-4542-b49f-53551db74c4d/width_96_height_96.webp",
+    x4: "https://assetstorage.krrt.io/1123529253537884138/6cc410ac-3a55-4542-b49f-53551db74c4d/width_128_height_128.webp",
+  },
+} satisfies {
+  [key in NonNullable<MannerTempEmoteProps["level"]>]: { x2: string; x3: string; x4: string };
+};
+
+const createImgProps: (params: {
+  x2: string;
+  x3: string;
+  x4: string;
+}) => React.ImgHTMLAttributes<HTMLImageElement> = ({ x2, x3, x4 }) => ({
+  src: x2, // this is used on x1 displays
+  srcSet: `${x2} 2x, ${x3} 3x, ${x4} 4x`,
+});
+
+const l1 = forwardRef<HTMLImageElement, React.ImgHTMLAttributes<HTMLImageElement>>((props, ref) => (
+  <img {...createImgProps(src.l1)} aria-hidden ref={ref} {...props} />
+));
+
+const l2 = forwardRef<HTMLImageElement, React.ImgHTMLAttributes<HTMLImageElement>>((props, ref) => (
+  <img {...createImgProps(src.l2)} aria-hidden ref={ref} {...props} />
+));
+
+const l3 = forwardRef<HTMLImageElement, React.ImgHTMLAttributes<HTMLImageElement>>((props, ref) => (
+  <img {...createImgProps(src.l3)} aria-hidden ref={ref} {...props} />
+));
+
+const l4 = forwardRef<HTMLImageElement, React.ImgHTMLAttributes<HTMLImageElement>>((props, ref) => (
+  <img {...createImgProps(src.l4)} aria-hidden ref={ref} {...props} />
+));
+
+const l5 = forwardRef<HTMLImageElement, React.ImgHTMLAttributes<HTMLImageElement>>((props, ref) => (
+  <img {...createImgProps(src.l5)} aria-hidden ref={ref} {...props} />
+));
+
+const l6 = forwardRef<HTMLImageElement, React.ImgHTMLAttributes<HTMLImageElement>>((props, ref) => (
+  <img {...createImgProps(src.l6)} aria-hidden ref={ref} {...props} />
+));
+
+const l7 = forwardRef<HTMLImageElement, React.ImgHTMLAttributes<HTMLImageElement>>((props, ref) => (
+  <img {...createImgProps(src.l7)} aria-hidden ref={ref} {...props} />
+));
+
+const l8 = forwardRef<HTMLImageElement, React.ImgHTMLAttributes<HTMLImageElement>>((props, ref) => (
+  <img {...createImgProps(src.l8)} aria-hidden ref={ref} {...props} />
+));
+
+const l9 = forwardRef<HTMLImageElement, React.ImgHTMLAttributes<HTMLImageElement>>((props, ref) => (
+  <img {...createImgProps(src.l9)} aria-hidden ref={ref} {...props} />
+));
+
+const l10 = forwardRef<HTMLImageElement, React.ImgHTMLAttributes<HTMLImageElement>>(
+  (props, ref) => <img {...createImgProps(src.l10)} aria-hidden ref={ref} {...props} />,
+);
+
+const emotes = {
+  l1,
+  l2,
+  l3,
+  l4,
+  l5,
+  l6,
+  l7,
+  l8,
+  l9,
+  l10,
+};
+
+export interface MannerTempEmoteProps {
+  level?: "l1" | "l2" | "l3" | "l4" | "l5" | "l6" | "l7" | "l8" | "l9" | "l10";
+}
+
+const MannerTempEmotePropsContext = createContext<MannerTempEmoteProps | null>(null);
+
+export const MannerTempEmotePropsProvider = MannerTempEmotePropsContext.Provider;
+
+export const MannerTempEmote = forwardRef<HTMLImageElement, MannerTempEmoteProps>(
+  ({ level: __level, ...props }, ref) => {
+    const level = __level ?? useContext(MannerTempEmotePropsContext)?.level ?? "l1";
+    const Emote = emotes[level];
+
+    return <Emote ref={ref} {...props} />;
+  },
+);

package/src/components/MannerTemp/index.ts

@@ -0,0 +1,2 @@
+export { MannerTemp, type MannerTempProps } from "./MannerTemp";
+export { MannerTempEmote, type MannerTempEmoteProps } from "./MannerTempEmote";

package/src/components/MannerTempBadge/MannerTempBadge.tsx

@@ -0,0 +1,18 @@
+import {
+  mannerTempBadge,
+  type MannerTempBadgeVariantProps,
+} from "@seed-design/css/recipes/manner-temp-badge";
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import type * as React from "react";
+import { createRecipeContext } from "../../utils/createRecipeContext";
+
+const { withContext } = createRecipeContext(mannerTempBadge);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface MannerTempBadgeProps
+  extends MannerTempBadgeVariantProps,
+    PrimitiveProps,
+    React.HTMLAttributes<HTMLSpanElement> {}
+
+export const MannerTempBadge = withContext<HTMLSpanElement, MannerTempBadgeProps>(Primitive.span);

package/src/components/MannerTempBadge/index.ts

@@ -0,0 +1,4 @@
+export {
+  MannerTempBadge,
+  type MannerTempBadgeProps,
+} from "./MannerTempBadge";

package/src/components/MenuSheet/MenuSheet.namespace.ts

@@ -0,0 +1,34 @@
+export {
+  MenuSheetBackdrop as Backdrop,
+  MenuSheetPositioner as Positioner,
+  MenuSheetContent as Content,
+  MenuSheetFooter as Footer,
+  MenuSheetHeader as Header,
+  MenuSheetRoot as Root,
+  MenuSheetTitle as Title,
+  MenuSheetDescription as Description,
+  MenuSheetTrigger as Trigger,
+  MenuSheetList as List,
+  MenuSheetGroup as Group,
+  MenuSheetItem as Item,
+  MenuSheetItemContent as ItemContent,
+  MenuSheetItemLabel as ItemLabel,
+  MenuSheetItemDescription as ItemDescription,
+  MenuSheetCloseButton as CloseButton,
+  type MenuSheetBackdropProps as BackdropProps,
+  type MenuSheetPositionerProps as PositionerProps,
+  type MenuSheetContentProps as ContentProps,
+  type MenuSheetFooterProps as FooterProps,
+  type MenuSheetHeaderProps as HeaderProps,
+  type MenuSheetRootProps as RootProps,
+  type MenuSheetTitleProps as TitleProps,
+  type MenuSheetDescriptionProps as DescriptionProps,
+  type MenuSheetTriggerProps as TriggerProps,
+  type MenuSheetListProps as ListProps,
+  type MenuSheetGroupProps as GroupProps,
+  type MenuSheetItemProps as ItemProps,
+  type MenuSheetItemContentProps as ItemContentProps,
+  type MenuSheetItemLabelProps as ItemLabelProps,
+  type MenuSheetItemDescriptionProps as ItemDescriptionProps,
+  type MenuSheetCloseButtonProps as CloseButtonProps,
+} from "./MenuSheet";

package/src/components/MenuSheet/MenuSheet.tsx

@@ -0,0 +1,229 @@
+import { Dialog as DialogPrimitive, useDialogContext } from "@seed-design/react-dialog";
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import { menuSheet, type MenuSheetVariantProps } from "@seed-design/css/recipes/menu-sheet";
+import {
+  menuSheetItem,
+  type MenuSheetItemVariantProps,
+} from "@seed-design/css/recipes/menu-sheet-item";
+import * as React from "react";
+import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
+import { createWithStateProps } from "../../utils/createWithStateProps";
+import clsx from "clsx";
+
+const { withRootProvider, withContext, useClassNames } = createSlotRecipeContext(menuSheet);
+const {
+  PropsProvider: ItemPropsProvider,
+  useProps: useItemProps,
+  withContext: withItemContext,
+  ClassNamesProvider: ItemClassNamesProvider,
+} = createSlotRecipeContext(menuSheetItem);
+const withStateProps = createWithStateProps([useDialogContext]);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface MenuSheetRootProps extends MenuSheetVariantProps, DialogPrimitive.RootProps {
+  /**
+   * @default true
+   */
+  lazyMount?: DialogPrimitive.RootProps["lazyMount"];
+  /**
+   * @default true
+   */
+  unmountOnExit?: DialogPrimitive.RootProps["unmountOnExit"];
+}
+
+export const MenuSheetRoot = withRootProvider<MenuSheetRootProps>(DialogPrimitive.Root, {
+  defaultProps: {
+    lazyMount: true,
+    unmountOnExit: true,
+  },
+});
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface MenuSheetTriggerProps extends DialogPrimitive.TriggerProps {}
+
+export const MenuSheetTrigger = DialogPrimitive.Trigger;
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface MenuSheetPositionerProps extends DialogPrimitive.PositionerProps {}
+
+export const MenuSheetPositioner = withContext<HTMLDivElement, MenuSheetPositionerProps>(
+  DialogPrimitive.Positioner,
+  "positioner",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface MenuSheetBackdropProps extends DialogPrimitive.BackdropProps {}
+
+export const MenuSheetBackdrop = withContext<HTMLDivElement, MenuSheetBackdropProps>(
+  DialogPrimitive.Backdrop,
+  "backdrop",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface MenuSheetContentProps
+  extends DialogPrimitive.ContentProps,
+    Pick<MenuSheetItemVariantProps, "labelAlign"> {}
+
+export const MenuSheetContent = React.forwardRef<HTMLDivElement, MenuSheetContentProps>(
+  ({ className, ...props }, ref) => {
+    const [variantProps, otherProps] = menuSheetItem.splitVariantProps(props);
+    const classNames = useClassNames();
+
+    return (
+      <ItemPropsProvider value={variantProps}>
+        <DialogPrimitive.Content
+          className={clsx(classNames.content, className)}
+          ref={ref}
+          {...otherProps}
+        />
+      </ItemPropsProvider>
+    );
+  },
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface MenuSheetHeaderProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const MenuSheetHeader = withContext<HTMLDivElement, MenuSheetHeaderProps>(
+  withStateProps(Primitive.div),
+  "header",
+);
+
+// NOTE: uses DialogPrimitive.TitleProps,
+// but actual rendered component is a Primitive.h2 rather than a DialogPrimitive.Title
+// find out why later; h2 is same but missing and some a11y features
+export interface MenuSheetTitleProps extends DialogPrimitive.TitleProps {}
+
+export const MenuSheetTitle = withContext<HTMLHeadingElement, MenuSheetTitleProps>(
+  withStateProps(Primitive.h2),
+  "title",
+);
+
+// NOTE: uses DialogPrimitive.DescriptionProps,
+// but actual rendered component is a Primitive.p rather than a DialogPrimitive.Description
+// find out why later; p is same but missing and some a11y features
+export interface MenuSheetDescriptionProps extends DialogPrimitive.DescriptionProps {}
+
+export const MenuSheetDescription = withContext<HTMLParagraphElement, MenuSheetDescriptionProps>(
+  withStateProps(Primitive.p),
+  "description",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface MenuSheetListProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {}
+
+export const MenuSheetList = withContext<HTMLDivElement, MenuSheetListProps>(
+  withStateProps(Primitive.div),
+  "list",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface MenuSheetGroupProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    Pick<MenuSheetItemVariantProps, "labelAlign"> {}
+
+export const MenuSheetGroup = React.forwardRef<HTMLDivElement, MenuSheetGroupProps>(
+  ({ className, ...props }, ref) => {
+    const [variantProps, otherProps] = menuSheetItem.splitVariantProps(props);
+    const parentProps = useItemProps();
+
+    const classNames = useClassNames();
+    const { stateProps } = useDialogContext();
+
+    return (
+      <ItemPropsProvider value={{ ...parentProps, ...variantProps }}>
+        <Primitive.div
+          className={clsx(classNames.group, className)}
+          ref={ref}
+          {...stateProps}
+          {...otherProps}
+        />
+      </ItemPropsProvider>
+    );
+  },
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface MenuSheetItemProps
+  extends PrimitiveProps,
+    MenuSheetItemVariantProps,
+    React.HTMLAttributes<HTMLButtonElement> {}
+
+export const MenuSheetItem = React.forwardRef<HTMLButtonElement, MenuSheetItemProps>(
+  ({ className: propClassName, ...props }, ref) => {
+    const [variantProps, otherProps] = menuSheetItem.splitVariantProps(props);
+    const parentProps = useItemProps();
+
+    const classNames = menuSheetItem({ ...parentProps, ...variantProps });
+    const { stateProps } = useDialogContext();
+
+    return (
+      <ItemClassNamesProvider value={classNames}>
+        <Primitive.button
+          ref={ref}
+          className={clsx(classNames.root, propClassName)}
+          {...stateProps}
+          {...otherProps}
+        />
+      </ItemClassNamesProvider>
+    );
+  },
+);
+
+export interface MenuSheetItemContentProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const MenuSheetItemContent = withItemContext<HTMLDivElement, MenuSheetItemContentProps>(
+  withStateProps(Primitive.div),
+  "content",
+);
+
+export interface MenuSheetItemLabelProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLSpanElement> {}
+
+export const MenuSheetItemLabel = withItemContext<HTMLSpanElement, MenuSheetItemLabelProps>(
+  withStateProps(Primitive.span),
+  "label",
+);
+
+export interface MenuSheetItemDescriptionProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLSpanElement> {}
+
+export const MenuSheetItemDescription = withItemContext<
+  HTMLSpanElement,
+  MenuSheetItemDescriptionProps
+>(withStateProps(Primitive.span), "description");
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface MenuSheetFooterProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const MenuSheetFooter = withContext<HTMLDivElement, MenuSheetFooterProps>(
+  withStateProps(Primitive.div),
+  "footer",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface MenuSheetCloseButtonProps extends DialogPrimitive.CloseButtonProps {}
+
+export const MenuSheetCloseButton = withContext<HTMLDivElement, MenuSheetCloseButtonProps>(
+  DialogPrimitive.CloseButton,
+  "closeButton",
+);

package/src/components/MenuSheet/index.ts

@@ -0,0 +1,36 @@
+export {
+  MenuSheetBackdrop,
+  MenuSheetPositioner,
+  MenuSheetContent,
+  MenuSheetFooter,
+  MenuSheetHeader,
+  MenuSheetRoot,
+  MenuSheetTitle,
+  MenuSheetDescription,
+  MenuSheetTrigger,
+  MenuSheetList,
+  MenuSheetGroup,
+  MenuSheetItem,
+  MenuSheetItemContent,
+  MenuSheetItemLabel,
+  MenuSheetItemDescription,
+  MenuSheetCloseButton,
+  type MenuSheetBackdropProps,
+  type MenuSheetPositionerProps,
+  type MenuSheetContentProps,
+  type MenuSheetFooterProps,
+  type MenuSheetHeaderProps,
+  type MenuSheetRootProps,
+  type MenuSheetTitleProps,
+  type MenuSheetDescriptionProps,
+  type MenuSheetTriggerProps,
+  type MenuSheetListProps,
+  type MenuSheetGroupProps,
+  type MenuSheetItemProps,
+  type MenuSheetItemContentProps,
+  type MenuSheetItemLabelProps,
+  type MenuSheetItemDescriptionProps,
+  type MenuSheetCloseButtonProps,
+} from "./MenuSheet";
+
+export * as MenuSheet from "./MenuSheet.namespace";

package/src/components/NotificationBadge/NotificationBadge.tsx

@@ -0,0 +1,47 @@
+import {
+  notificationBadge,
+  type NotificationBadgeVariantProps,
+} from "@seed-design/css/recipes/notification-badge";
+import {
+  notificationBadgePositioner,
+  type NotificationBadgePositionerVariantProps,
+} from "@seed-design/css/recipes/notification-badge-positioner";
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import clsx from "clsx";
+import * as React from "react";
+import { useMemo } from "react";
+import { createRecipeContext } from "../../utils/createRecipeContext";
+
+const { withContext, PropsProvider } = createRecipeContext(notificationBadge);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface NotificationBadgeProps
+  extends NotificationBadgeVariantProps,
+    PrimitiveProps,
+    React.HTMLAttributes<HTMLSpanElement> {}
+
+export const NotificationBadge = withContext<HTMLSpanElement, NotificationBadgeProps>(
+  Primitive.span,
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface NotificationBadgePositionerProps
+  extends NotificationBadgePositionerVariantProps,
+    PrimitiveProps,
+    React.HTMLAttributes<HTMLSpanElement> {}
+
+export const NotificationBadgePositioner = React.forwardRef<
+  HTMLSpanElement,
+  NotificationBadgePositionerProps
+>((props, ref) => {
+  const { attach, size, className, ...otherProps } = props;
+  const positionerClassName = notificationBadgePositioner({ attach, size });
+
+  return (
+    <PropsProvider value={useMemo(() => ({ size }), [size])}>
+      <Primitive.span ref={ref} className={clsx(positionerClassName, className)} {...otherProps} />
+    </PropsProvider>
+  );
+});

package/src/components/NotificationBadge/index.ts

@@ -0,0 +1,6 @@
+export {
+  NotificationBadge,
+  NotificationBadgePositioner,
+  type NotificationBadgeProps,
+  type NotificationBadgePositionerProps,
+} from "./NotificationBadge";

package/src/components/PageBanner/PageBanner.namespace.ts

@@ -0,0 +1,16 @@
+export {
+  PageBannerBody as Body,
+  PageBannerCloseButton as CloseButton,
+  PageBannerContent as Content,
+  PageBannerDescription as Description,
+  PageBannerButton as Button,
+  PageBannerRoot as Root,
+  PageBannerTitle as Title,
+  type PageBannerBodyProps as BodyProps,
+  type PageBannerCloseButtonProps as CloseButtonProps,
+  type PageBannerContentProps as ContentProps,
+  type PageBannerDescriptionProps as DescriptionProps,
+  type PageBannerButtonProps as ButtonProps,
+  type PageBannerRootProps as RootProps,
+  type PageBannerTitleProps as TitleProps,
+} from "./PageBanner";