@seed-design/react 1.2.15 → 2.0.0

package/src/components/Stack/Stack.tsx

@@ -1,10 +1,11 @@
 import * as React from "react";
+import type { DistributiveOmit } from "../../utils/styled";
 import { Flex, type FlexProps } from "../Flex";
 
 /**
  * @deprecated Use `VStack` instead.
  */
-export interface StackProps extends Omit<FlexProps, "flexDirection"> {}
+export type StackProps = DistributiveOmit<FlexProps, "flexDirection">;
 
 /**
  * @deprecated Use `VStack` instead.
@@ -13,13 +14,13 @@ export const Stack = React.forwardRef<HTMLDivElement, StackProps>((props, ref) =
   return <Flex ref={ref} display="flex" flexDirection="column" {...props} />;
 });
 
-export interface VStackProps extends Omit<FlexProps, "flexDirection"> {}
+export type VStackProps = DistributiveOmit<FlexProps, "flexDirection">;
 
 export const VStack = React.forwardRef<HTMLDivElement, VStackProps>((props, ref) => {
   return <Flex ref={ref} display="flex" flexDirection="column" {...props} />;
 });
 
-export interface HStackProps extends Omit<FlexProps, "flexDirection"> {}
+export type HStackProps = DistributiveOmit<FlexProps, "flexDirection">;
 
 export const HStack = React.forwardRef<HTMLDivElement, HStackProps>((props, ref) => {
   return <Flex ref={ref} display="flex" flexDirection="row" {...props} />;

package/src/components/SwipeableMenuSheet/SwipeableMenuSheet.namespace.ts

@@ -0,0 +1,36 @@
+export {
+  SwipeableMenuSheetBackdrop as Backdrop,
+  SwipeableMenuSheetPositioner as Positioner,
+  SwipeableMenuSheetContent as Content,
+  SwipeableMenuSheetHandle as Handle,
+  SwipeableMenuSheetCloseButton as CloseButton,
+  SwipeableMenuSheetHeader as Header,
+  SwipeableMenuSheetRoot as Root,
+  SwipeableMenuSheetTitle as Title,
+  SwipeableMenuSheetDescription as Description,
+  SwipeableMenuSheetTrigger as Trigger,
+  SwipeableMenuSheetList as List,
+  SwipeableMenuSheetGroup as Group,
+  SwipeableMenuSheetFooter as Footer,
+  SwipeableMenuSheetItem as Item,
+  SwipeableMenuSheetItemContent as ItemContent,
+  SwipeableMenuSheetItemLabel as ItemLabel,
+  SwipeableMenuSheetItemDescription as ItemDescription,
+  type SwipeableMenuSheetBackdropProps as BackdropProps,
+  type SwipeableMenuSheetPositionerProps as PositionerProps,
+  type SwipeableMenuSheetContentProps as ContentProps,
+  type SwipeableMenuSheetHandleProps as HandleProps,
+  type SwipeableMenuSheetCloseButtonProps as CloseButtonProps,
+  type SwipeableMenuSheetHeaderProps as HeaderProps,
+  type SwipeableMenuSheetRootProps as RootProps,
+  type SwipeableMenuSheetTitleProps as TitleProps,
+  type SwipeableMenuSheetDescriptionProps as DescriptionProps,
+  type SwipeableMenuSheetTriggerProps as TriggerProps,
+  type SwipeableMenuSheetListProps as ListProps,
+  type SwipeableMenuSheetGroupProps as GroupProps,
+  type SwipeableMenuSheetFooterProps as FooterProps,
+  type SwipeableMenuSheetItemProps as ItemProps,
+  type SwipeableMenuSheetItemContentProps as ItemContentProps,
+  type SwipeableMenuSheetItemLabelProps as ItemLabelProps,
+  type SwipeableMenuSheetItemDescriptionProps as ItemDescriptionProps,
+} from "./SwipeableMenuSheet";

package/src/components/SwipeableMenuSheet/SwipeableMenuSheet.tsx

@@ -0,0 +1,269 @@
+import { bottomSheetHandle } from "@seed-design/css/recipes/bottom-sheet-handle";
+import { menuSheet, type MenuSheetVariantProps } from "@seed-design/css/recipes/menu-sheet";
+import {
+  menuSheetItem,
+  type MenuSheetItemVariantProps,
+} from "@seed-design/css/recipes/menu-sheet-item";
+import { Drawer } from "@seed-design/react-drawer";
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import clsx from "clsx";
+import * as React from "react";
+import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
+
+const { withContext, useClassNames, ClassNamesProvider } = createSlotRecipeContext(menuSheet);
+const {
+  PropsProvider: ItemPropsProvider,
+  useProps: useItemProps,
+  withContext: withItemContext,
+  ClassNamesProvider: ItemClassNamesProvider,
+} = createSlotRecipeContext(menuSheetItem);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+// Allowlist only the Drawer props that fit a bottom menu sheet, so the public surface
+// stays stable if Drawer changes or its implementation is swapped later. Intentionally
+// left out: `direction` (forced "bottom" below so the bottom-only recipe transform holds),
+// `dismissible` (no default close button → would trap users), and `modal` (omitted so it
+// stays at Drawer's default `true`, keeping the focus trap and aria-modal contract on the
+// action list).
+export interface SwipeableMenuSheetRootProps
+  extends MenuSheetVariantProps,
+    Pick<
+      Drawer.RootProps,
+      | "children"
+      | "open"
+      | "defaultOpen"
+      | "onOpenChange"
+      | "closeOnEscape"
+      | "closeOnInteractOutside"
+      | "lazyMount"
+      | "unmountOnExit"
+      | "onAnimationEnd"
+    > {}
+
+// Forces `direction="bottom"` so the bottom-only recipe transform isn't broken.
+export function SwipeableMenuSheetRoot(props: SwipeableMenuSheetRootProps) {
+  const [variantProps, otherProps] = menuSheet.splitVariantProps({
+    lazyMount: true,
+    unmountOnExit: true,
+    ...props,
+  });
+  const classNames = menuSheet(variantProps);
+
+  return (
+    <ClassNamesProvider value={classNames}>
+      <Drawer.Root {...otherProps} direction="bottom" />
+    </ClassNamesProvider>
+  );
+}
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface SwipeableMenuSheetTriggerProps extends Drawer.TriggerProps {}
+
+export const SwipeableMenuSheetTrigger = Drawer.Trigger;
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface SwipeableMenuSheetPositionerProps extends Drawer.PositionerProps {}
+
+export const SwipeableMenuSheetPositioner = withContext<
+  HTMLDivElement,
+  SwipeableMenuSheetPositionerProps
+>(Drawer.Positioner, "positioner");
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface SwipeableMenuSheetBackdropProps extends Drawer.BackdropProps {}
+
+export const SwipeableMenuSheetBackdrop = withContext<
+  HTMLDivElement,
+  SwipeableMenuSheetBackdropProps
+>(Drawer.Backdrop, "backdrop");
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface SwipeableMenuSheetContentProps
+  extends Drawer.ContentProps,
+    Pick<MenuSheetItemVariantProps, "labelAlign"> {}
+
+export const SwipeableMenuSheetContent = React.forwardRef<
+  HTMLDivElement,
+  SwipeableMenuSheetContentProps
+>(({ className, ...props }, ref) => {
+  const [variantProps, otherProps] = menuSheetItem.splitVariantProps(props);
+  const classNames = useClassNames();
+
+  return (
+    <ItemPropsProvider value={variantProps}>
+      <Drawer.Content ref={ref} className={clsx(classNames.content, className)} {...otherProps} />
+    </ItemPropsProvider>
+  );
+});
+
+SwipeableMenuSheetContent.displayName = "SwipeableMenuSheetContent";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+// `preventCycle` only applies when snap points are configured, and
+// SwipeableMenuSheet omits snap points from its Root API.
+export interface SwipeableMenuSheetHandleProps
+  extends PrimitiveProps,
+    Omit<Drawer.HandleProps, "preventCycle"> {}
+
+export const SwipeableMenuSheetHandle = React.forwardRef<
+  HTMLDivElement,
+  SwipeableMenuSheetHandleProps
+>(({ 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>
+  );
+});
+
+SwipeableMenuSheetHandle.displayName = "SwipeableMenuSheetHandle";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface SwipeableMenuSheetHeaderProps extends Drawer.HeaderProps {}
+
+export const SwipeableMenuSheetHeader = withContext<HTMLDivElement, SwipeableMenuSheetHeaderProps>(
+  Drawer.Header,
+  "header",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface SwipeableMenuSheetTitleProps extends Drawer.TitleProps {}
+
+export const SwipeableMenuSheetTitle = withContext<
+  HTMLHeadingElement,
+  SwipeableMenuSheetTitleProps
+>(Drawer.Title, "title");
+
+SwipeableMenuSheetTitle.displayName = "SwipeableMenuSheetTitle";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface SwipeableMenuSheetDescriptionProps extends Drawer.DescriptionProps {}
+
+export const SwipeableMenuSheetDescription = withContext<
+  HTMLParagraphElement,
+  SwipeableMenuSheetDescriptionProps
+>(Drawer.Description, "description");
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface SwipeableMenuSheetListProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const SwipeableMenuSheetList = withContext<HTMLDivElement, SwipeableMenuSheetListProps>(
+  Primitive.div,
+  "list",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface SwipeableMenuSheetGroupProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement>,
+    Pick<MenuSheetItemVariantProps, "labelAlign"> {}
+
+export const SwipeableMenuSheetGroup = React.forwardRef<
+  HTMLDivElement,
+  SwipeableMenuSheetGroupProps
+>(({ className, ...props }, ref) => {
+  const [variantProps, otherProps] = menuSheetItem.splitVariantProps(props);
+  const parentProps = useItemProps();
+  const classNames = useClassNames();
+
+  return (
+    <ItemPropsProvider value={{ ...parentProps, ...variantProps }}>
+      <Primitive.div className={clsx(classNames.group, className)} ref={ref} {...otherProps} />
+    </ItemPropsProvider>
+  );
+});
+
+SwipeableMenuSheetGroup.displayName = "SwipeableMenuSheetGroup";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface SwipeableMenuSheetItemProps
+  extends PrimitiveProps,
+    MenuSheetItemVariantProps,
+    React.HTMLAttributes<HTMLButtonElement> {}
+
+export const SwipeableMenuSheetItem = React.forwardRef<
+  HTMLButtonElement,
+  SwipeableMenuSheetItemProps
+>(({ className: propClassName, ...props }, ref) => {
+  const [variantProps, otherProps] = menuSheetItem.splitVariantProps(props);
+  const parentProps = useItemProps();
+  const classNames = menuSheetItem({ ...parentProps, ...variantProps });
+
+  return (
+    <ItemClassNamesProvider value={classNames}>
+      <Primitive.button
+        ref={ref}
+        className={clsx(classNames.root, propClassName)}
+        {...otherProps}
+      />
+    </ItemClassNamesProvider>
+  );
+});
+
+SwipeableMenuSheetItem.displayName = "SwipeableMenuSheetItem";
+
+export interface SwipeableMenuSheetItemContentProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const SwipeableMenuSheetItemContent = withItemContext<
+  HTMLDivElement,
+  SwipeableMenuSheetItemContentProps
+>(Primitive.div, "content");
+
+export interface SwipeableMenuSheetItemLabelProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLSpanElement> {}
+
+export const SwipeableMenuSheetItemLabel = withItemContext<
+  HTMLSpanElement,
+  SwipeableMenuSheetItemLabelProps
+>(Primitive.span, "label");
+
+export interface SwipeableMenuSheetItemDescriptionProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLSpanElement> {}
+
+export const SwipeableMenuSheetItemDescription = withItemContext<
+  HTMLSpanElement,
+  SwipeableMenuSheetItemDescriptionProps
+>(Primitive.span, "description");
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface SwipeableMenuSheetFooterProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const SwipeableMenuSheetFooter = withContext<HTMLDivElement, SwipeableMenuSheetFooterProps>(
+  Primitive.div,
+  "footer",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface SwipeableMenuSheetCloseButtonProps extends Drawer.CloseButtonProps {}
+
+/**
+ * Visible button that closes the swipeable menu sheet.
+ */
+export const SwipeableMenuSheetCloseButton = withContext<
+  HTMLButtonElement,
+  SwipeableMenuSheetCloseButtonProps
+>(Drawer.CloseButton, "closeButton");

package/src/components/SwipeableMenuSheet/index.ts

@@ -0,0 +1,38 @@
+export {
+  SwipeableMenuSheetBackdrop,
+  SwipeableMenuSheetPositioner,
+  SwipeableMenuSheetContent,
+  SwipeableMenuSheetHandle,
+  SwipeableMenuSheetCloseButton,
+  SwipeableMenuSheetHeader,
+  SwipeableMenuSheetRoot,
+  SwipeableMenuSheetTitle,
+  SwipeableMenuSheetDescription,
+  SwipeableMenuSheetTrigger,
+  SwipeableMenuSheetList,
+  SwipeableMenuSheetGroup,
+  SwipeableMenuSheetFooter,
+  SwipeableMenuSheetItem,
+  SwipeableMenuSheetItemContent,
+  SwipeableMenuSheetItemLabel,
+  SwipeableMenuSheetItemDescription,
+  type SwipeableMenuSheetBackdropProps,
+  type SwipeableMenuSheetPositionerProps,
+  type SwipeableMenuSheetContentProps,
+  type SwipeableMenuSheetHandleProps,
+  type SwipeableMenuSheetCloseButtonProps,
+  type SwipeableMenuSheetHeaderProps,
+  type SwipeableMenuSheetRootProps,
+  type SwipeableMenuSheetTitleProps,
+  type SwipeableMenuSheetDescriptionProps,
+  type SwipeableMenuSheetTriggerProps,
+  type SwipeableMenuSheetListProps,
+  type SwipeableMenuSheetGroupProps,
+  type SwipeableMenuSheetFooterProps,
+  type SwipeableMenuSheetItemProps,
+  type SwipeableMenuSheetItemContentProps,
+  type SwipeableMenuSheetItemLabelProps,
+  type SwipeableMenuSheetItemDescriptionProps,
+} from "./SwipeableMenuSheet";
+
+export * as SwipeableMenuSheet from "./SwipeableMenuSheet.namespace";

package/src/components/Switch/Switch.tsx

@@ -18,38 +18,15 @@ const withStateProps = createWithStateProps([useSwitchContext]);
 
 ////////////////////////////////////////////////////////////////////////////////////
 
-/**
- * @deprecated Use `16` or `32` instead of `small` or `medium`.
- */
-type SwitchVariantDeprecatedSizeProps = "small" | "medium";
-
 export interface SwitchRootProps
-  extends Omit<SwitchVariantProps, "size">,
+  extends SwitchVariantProps,
     Omit<SwitchmarkVariantProps, "size">,
-    SwitchPrimitive.RootProps {
-  size?: SwitchVariantProps["size"] | SwitchVariantDeprecatedSizeProps;
-}
+    SwitchPrimitive.RootProps {}
 
 export const SwitchRoot = React.forwardRef<HTMLLabelElement, SwitchRootProps>(
   ({ className, ...props }, ref) => {
-    if (
-      process.env.NODE_ENV !== "production" &&
-      (props.size === "small" || props.size === "medium")
-    ) {
-      console.warn(
-        `[SEED Design System] Switch size='${props.size}' is deprecated and will be removed in @seed-design/react@2.0.0. Use size='${props.size === "small" ? "16" : "32"}' instead.`,
-      );
-    }
-
     const [{ switch: switchVariantProps, switchmark: switchmarkVariantProps }, otherProps] =
-      splitMultipleVariantsProps(
-        {
-          ...props,
-          // TODO: replace this mapping completely
-          size: props.size === "small" ? "16" : props.size === "medium" ? "32" : props.size,
-        },
-        { switchmark, switch: switchStyle },
-      );
+      splitMultipleVariantsProps(props, { switchmark, switch: switchStyle });
 
     const classNames = switchStyle(switchVariantProps);
 

package/src/components/index.ts

@@ -1,3 +1,4 @@
+export * from "./Accordion";
 export * from "./ActionButton";
 export * from "./ActionChip";
 export * from "./ActionSheet";
@@ -26,23 +27,30 @@ export * from "./Fab";
 export * from "./Field";
 export * from "./FieldButton";
 export * from "./Fieldset";
+export * from "./AttachmentDisplay";
+export * from "./AttachmentInput";
 export * from "./Flex";
 export * from "./Float";
 export * from "./FloatingActionButton";
+export * from "./Footer";
 export * from "./Grid";
 export * from "./GridItem";
 export * from "./HelpBubble";
+export * from "./HelpBubbleTooltip";
 export * from "./Icon";
 export * from "./IdentityPlaceholder";
 export * from "./ImageFrame";
 export * from "./Inline";
 export * from "./InlineBanner";
+export * from "./Layout";
 export * from "./LinkContent";
 export * from "./List";
 export * from "./LoadingIndicator";
 export * from "./MannerTemp";
 export * from "./MannerTempBadge";
+export * from "./Menu";
 export * from "./MenuSheet";
+export * from "./NavigationMenu";
 export * from "./NotificationBadge";
 export * from "./PageBanner";
 export * from "./Portal";
@@ -52,13 +60,17 @@ export * from "./RadioGroup";
 export * from "./RadioGroupField";
 export * from "./ReactionButton";
 export * from "./ResponsivePair";
+export * from "./ResponsiveSidePanel";
 export * from "./ScrollFog";
 export * from "./SegmentedControl";
 export * from "./SelectBox";
+export * from "./SideNavigation";
+export * from "./SidePanel";
 export * from "./Skeleton";
 export * from "./Slider";
 export * from "./Snackbar";
 export * from "./Stack";
+export * from "./SwipeableMenuSheet";
 export * from "./Switch";
 export * from "./Tabs";
 export * from "./TagGroup";

package/src/hooks/useBreakpoint.test.tsx

@@ -0,0 +1,94 @@
+import { act, renderHook } from "@testing-library/react";
+import { beforeEach, describe, expect, it, mock } from "bun:test";
+import type * as React from "react";
+
+import { BreakpointProvider } from "../providers/BreakpointProvider";
+import { useBreakpoint } from "./useBreakpoint";
+
+type ChangeHandler = (e: { matches: boolean }) => void;
+
+let currentWidth = 0;
+const entries = new Map<string, { minWidth: number; handlers: Set<ChangeHandler> }>();
+
+function mockMatchMedia(query: string) {
+  const match = query.match(/min-width:\s*(\d+)px/);
+  const minWidth = match ? Number(match[1]) : 0;
+  const entry = entries.get(query) ?? { minWidth, handlers: new Set<ChangeHandler>() };
+  entries.set(query, entry);
+  return {
+    get matches() {
+      return currentWidth >= entry.minWidth;
+    },
+    media: query,
+    addEventListener(_: string, handler: ChangeHandler) {
+      entry.handlers.add(handler);
+    },
+    removeEventListener(_: string, handler: ChangeHandler) {
+      entry.handlers.delete(handler);
+    },
+    onchange: null,
+    addListener: mock(),
+    removeListener: mock(),
+    dispatchEvent: () => false,
+  };
+}
+
+function setViewport(minWidthPx: number) {
+  currentWidth = minWidthPx;
+  for (const [, entry] of entries) {
+    const nowMatches = currentWidth >= entry.minWidth;
+    for (const handler of entry.handlers) {
+      handler({ matches: nowMatches });
+    }
+  }
+}
+
+beforeEach(() => {
+  currentWidth = 0;
+  entries.clear();
+  window.matchMedia = mockMatchMedia as unknown as typeof window.matchMedia;
+});
+
+describe("useBreakpoint", () => {
+  it("returns 'base' when no media query matches", () => {
+    const { result } = renderHook(() => useBreakpoint());
+    expect(result.current).toBe("base");
+  });
+
+  it("returns 'md' when viewport is 768px", () => {
+    currentWidth = 768;
+    const { result } = renderHook(() => useBreakpoint());
+    expect(result.current).toBe("md");
+  });
+
+  it("returns the largest matching breakpoint", () => {
+    currentWidth = 1440;
+    const { result } = renderHook(() => useBreakpoint());
+    expect(result.current).toBe("xl");
+  });
+
+  it("updates when viewport changes", () => {
+    const { result } = renderHook(() => useBreakpoint());
+    expect(result.current).toBe("base");
+
+    act(() => setViewport(768));
+    expect(result.current).toBe("md");
+
+    act(() => setViewport(1280));
+    expect(result.current).toBe("lg");
+  });
+
+  it("respects defaultBreakpoint option", () => {
+    const { result } = renderHook(() => useBreakpoint({ defaultBreakpoint: "lg" }));
+    expect(result.current).toBe("base");
+  });
+
+  it("uses BreakpointProvider context when wrapped", () => {
+    currentWidth = 768;
+    const wrapper = ({ children }: { children: React.ReactNode }) => (
+      <BreakpointProvider>{children}</BreakpointProvider>
+    );
+    const { result } = renderHook(() => useBreakpoint(), { wrapper });
+    expect(result.current).toBe("md");
+  });
+});

package/src/hooks/useBreakpoint.ts

@@ -0,0 +1,24 @@
+import type { Breakpoint } from "@seed-design/css/breakpoints";
+import { createContext, useContext, useSyncExternalStore } from "react";
+
+import * as store from "../primitives/breakpoint-store";
+
+export interface UseBreakpointOptions {
+  defaultBreakpoint?: Breakpoint;
+}
+
+export interface BreakpointContextValue {
+  breakpoint: Breakpoint;
+  defaultBreakpoint: Breakpoint;
+}
+
+export const BreakpointContext = createContext<BreakpointContextValue | null>(null);
+
+export function useBreakpoint(options?: UseBreakpointOptions): Breakpoint {
+  const ctx = useContext(BreakpointContext);
+  const defaultBp = options?.defaultBreakpoint ?? ctx?.defaultBreakpoint ?? "base";
+
+  const storeBreakpoint = useSyncExternalStore(store.subscribe, store.getSnapshot, () => defaultBp);
+
+  return ctx ? ctx.breakpoint : storeBreakpoint;
+}