@seed-design/react 1.2.14 → 2.0.0

package/src/components/MenuSheet/MenuSheet.tsx

@@ -21,6 +21,9 @@ const withStateProps = createWithStateProps([useDialogContext]);
 
 ////////////////////////////////////////////////////////////////////////////////////
 
+/**
+ * @deprecated Use `SwipeableMenuSheet` instead.
+ */
 export interface MenuSheetRootProps extends MenuSheetVariantProps, DialogPrimitive.RootProps {
   /**
    * @default true
@@ -32,6 +35,9 @@ export interface MenuSheetRootProps extends MenuSheetVariantProps, DialogPrimiti
   unmountOnExit?: DialogPrimitive.RootProps["unmountOnExit"];
 }
 
+/**
+ * @deprecated Use `SwipeableMenuSheet` instead.
+ */
 export const MenuSheetRoot = withRootProvider<MenuSheetRootProps>(DialogPrimitive.Root, {
   defaultProps: {
     lazyMount: true,
@@ -41,14 +47,26 @@ export const MenuSheetRoot = withRootProvider<MenuSheetRootProps>(DialogPrimitiv
 
 ////////////////////////////////////////////////////////////////////////////////////
 
+/**
+ * @deprecated Use `SwipeableMenuSheet` instead.
+ */
 export interface MenuSheetTriggerProps extends DialogPrimitive.TriggerProps {}
 
+/**
+ * @deprecated Use `SwipeableMenuSheet` instead.
+ */
 export const MenuSheetTrigger = DialogPrimitive.Trigger;
 
 ////////////////////////////////////////////////////////////////////////////////////
 
+/**
+ * @deprecated Use `SwipeableMenuSheet` instead.
+ */
 export interface MenuSheetPositionerProps extends DialogPrimitive.PositionerProps {}
 
+/**
+ * @deprecated Use `SwipeableMenuSheet` instead.
+ */
 export const MenuSheetPositioner = withContext<HTMLDivElement, MenuSheetPositionerProps>(
   DialogPrimitive.Positioner,
   "positioner",
@@ -56,8 +74,14 @@ export const MenuSheetPositioner = withContext<HTMLDivElement, MenuSheetPosition
 
 ////////////////////////////////////////////////////////////////////////////////////
 
+/**
+ * @deprecated Use `SwipeableMenuSheet` instead.
+ */
 export interface MenuSheetBackdropProps extends DialogPrimitive.BackdropProps {}
 
+/**
+ * @deprecated Use `SwipeableMenuSheet` instead.
+ */
 export const MenuSheetBackdrop = withContext<HTMLDivElement, MenuSheetBackdropProps>(
   DialogPrimitive.Backdrop,
   "backdrop",
@@ -65,10 +89,16 @@ export const MenuSheetBackdrop = withContext<HTMLDivElement, MenuSheetBackdropPr
 
 ////////////////////////////////////////////////////////////////////////////////////
 
+/**
+ * @deprecated Use `SwipeableMenuSheet` instead.
+ */
 export interface MenuSheetContentProps
   extends DialogPrimitive.ContentProps,
     Pick<MenuSheetItemVariantProps, "labelAlign"> {}
 
+/**
+ * @deprecated Use `SwipeableMenuSheet` instead.
+ */
 export const MenuSheetContent = React.forwardRef<HTMLDivElement, MenuSheetContentProps>(
   ({ className, ...props }, ref) => {
     const [variantProps, otherProps] = menuSheetItem.splitVariantProps(props);
@@ -88,10 +118,16 @@ export const MenuSheetContent = React.forwardRef<HTMLDivElement, MenuSheetConten
 
 ////////////////////////////////////////////////////////////////////////////////////
 
+/**
+ * @deprecated Use `SwipeableMenuSheet` instead.
+ */
 export interface MenuSheetHeaderProps
   extends PrimitiveProps,
     React.HTMLAttributes<HTMLDivElement> {}
 
+/**
+ * @deprecated Use `SwipeableMenuSheet` instead.
+ */
 export const MenuSheetHeader = withContext<HTMLDivElement, MenuSheetHeaderProps>(
   withStateProps(Primitive.div),
   "header",
@@ -100,8 +136,14 @@ export const MenuSheetHeader = withContext<HTMLDivElement, MenuSheetHeaderProps>
 // 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
+/**
+ * @deprecated Use `SwipeableMenuSheet` instead.
+ */
 export interface MenuSheetTitleProps extends DialogPrimitive.TitleProps {}
 
+/**
+ * @deprecated Use `SwipeableMenuSheet` instead.
+ */
 export const MenuSheetTitle = withContext<HTMLHeadingElement, MenuSheetTitleProps>(
   withStateProps(Primitive.h2),
   "title",
@@ -110,8 +152,14 @@ export const MenuSheetTitle = withContext<HTMLHeadingElement, MenuSheetTitleProp
 // 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
+/**
+ * @deprecated Use `SwipeableMenuSheet` instead.
+ */
 export interface MenuSheetDescriptionProps extends DialogPrimitive.DescriptionProps {}
 
+/**
+ * @deprecated Use `SwipeableMenuSheet` instead.
+ */
 export const MenuSheetDescription = withContext<HTMLParagraphElement, MenuSheetDescriptionProps>(
   withStateProps(Primitive.p),
   "description",
@@ -119,8 +167,14 @@ export const MenuSheetDescription = withContext<HTMLParagraphElement, MenuSheetD
 
 ////////////////////////////////////////////////////////////////////////////////////
 
+/**
+ * @deprecated Use `SwipeableMenuSheet` instead.
+ */
 export interface MenuSheetListProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {}
 
+/**
+ * @deprecated Use `SwipeableMenuSheet` instead.
+ */
 export const MenuSheetList = withContext<HTMLDivElement, MenuSheetListProps>(
   withStateProps(Primitive.div),
   "list",
@@ -128,10 +182,16 @@ export const MenuSheetList = withContext<HTMLDivElement, MenuSheetListProps>(
 
 ////////////////////////////////////////////////////////////////////////////////////
 
+/**
+ * @deprecated Use `SwipeableMenuSheet` instead.
+ */
 export interface MenuSheetGroupProps
   extends React.HTMLAttributes<HTMLDivElement>,
     Pick<MenuSheetItemVariantProps, "labelAlign"> {}
 
+/**
+ * @deprecated Use `SwipeableMenuSheet` instead.
+ */
 export const MenuSheetGroup = React.forwardRef<HTMLDivElement, MenuSheetGroupProps>(
   ({ className, ...props }, ref) => {
     const [variantProps, otherProps] = menuSheetItem.splitVariantProps(props);
@@ -155,11 +215,17 @@ export const MenuSheetGroup = React.forwardRef<HTMLDivElement, MenuSheetGroupPro
 
 ////////////////////////////////////////////////////////////////////////////////////
 
+/**
+ * @deprecated Use `SwipeableMenuSheet` instead.
+ */
 export interface MenuSheetItemProps
   extends PrimitiveProps,
     MenuSheetItemVariantProps,
     React.HTMLAttributes<HTMLButtonElement> {}
 
+/**
+ * @deprecated Use `SwipeableMenuSheet` instead.
+ */
 export const MenuSheetItem = React.forwardRef<HTMLButtonElement, MenuSheetItemProps>(
   ({ className: propClassName, ...props }, ref) => {
     const [variantProps, otherProps] = menuSheetItem.splitVariantProps(props);
@@ -181,28 +247,46 @@ export const MenuSheetItem = React.forwardRef<HTMLButtonElement, MenuSheetItemPr
   },
 );
 
+/**
+ * @deprecated Use `SwipeableMenuSheet` instead.
+ */
 export interface MenuSheetItemContentProps
   extends PrimitiveProps,
     React.HTMLAttributes<HTMLDivElement> {}
 
+/**
+ * @deprecated Use `SwipeableMenuSheet` instead.
+ */
 export const MenuSheetItemContent = withItemContext<HTMLDivElement, MenuSheetItemContentProps>(
   withStateProps(Primitive.div),
   "content",
 );
 
+/**
+ * @deprecated Use `SwipeableMenuSheet` instead.
+ */
 export interface MenuSheetItemLabelProps
   extends PrimitiveProps,
     React.HTMLAttributes<HTMLSpanElement> {}
 
+/**
+ * @deprecated Use `SwipeableMenuSheet` instead.
+ */
 export const MenuSheetItemLabel = withItemContext<HTMLSpanElement, MenuSheetItemLabelProps>(
   withStateProps(Primitive.span),
   "label",
 );
 
+/**
+ * @deprecated Use `SwipeableMenuSheet` instead.
+ */
 export interface MenuSheetItemDescriptionProps
   extends PrimitiveProps,
     React.HTMLAttributes<HTMLSpanElement> {}
 
+/**
+ * @deprecated Use `SwipeableMenuSheet` instead.
+ */
 export const MenuSheetItemDescription = withItemContext<
   HTMLSpanElement,
   MenuSheetItemDescriptionProps
@@ -210,10 +294,16 @@ export const MenuSheetItemDescription = withItemContext<
 
 ////////////////////////////////////////////////////////////////////////////////////
 
+/**
+ * @deprecated Use `SwipeableMenuSheet` instead.
+ */
 export interface MenuSheetFooterProps
   extends PrimitiveProps,
     React.HTMLAttributes<HTMLDivElement> {}
 
+/**
+ * @deprecated Use `SwipeableMenuSheet` instead.
+ */
 export const MenuSheetFooter = withContext<HTMLDivElement, MenuSheetFooterProps>(
   withStateProps(Primitive.div),
   "footer",
@@ -221,8 +311,14 @@ export const MenuSheetFooter = withContext<HTMLDivElement, MenuSheetFooterProps>
 
 ////////////////////////////////////////////////////////////////////////////////////
 
+/**
+ * @deprecated Use `SwipeableMenuSheet` instead.
+ */
 export interface MenuSheetCloseButtonProps extends DialogPrimitive.CloseButtonProps {}
 
+/**
+ * @deprecated Use `SwipeableMenuSheet` instead.
+ */
 export const MenuSheetCloseButton = withContext<HTMLDivElement, MenuSheetCloseButtonProps>(
   DialogPrimitive.CloseButton,
   "closeButton",

package/src/components/NavigationMenu/NavigationMenu.namespace.ts

@@ -0,0 +1,26 @@
+export {
+  NavigationMenuProvider as Provider,
+  NavigationMenuRoot as Root,
+  NavigationMenuTrigger as Trigger,
+  NavigationMenuPositioner as Positioner,
+  NavigationMenuContent as Content,
+  NavigationMenuScrollArea as ScrollArea,
+  NavigationMenuGroup as Group,
+  NavigationMenuGroupLabel as GroupLabel,
+  NavigationMenuItem as Item,
+  NavigationMenuItemBody as ItemBody,
+  NavigationMenuItemLabel as ItemLabel,
+  NavigationMenuItemDescription as ItemDescription,
+  type NavigationMenuProviderProps as ProviderProps,
+  type NavigationMenuRootProps as RootProps,
+  type NavigationMenuTriggerProps as TriggerProps,
+  type NavigationMenuPositionerProps as PositionerProps,
+  type NavigationMenuContentProps as ContentProps,
+  type NavigationMenuScrollAreaProps as ScrollAreaProps,
+  type NavigationMenuGroupProps as GroupProps,
+  type NavigationMenuGroupLabelProps as GroupLabelProps,
+  type NavigationMenuItemProps as ItemProps,
+  type NavigationMenuItemBodyProps as ItemBodyProps,
+  type NavigationMenuItemLabelProps as ItemLabelProps,
+  type NavigationMenuItemDescriptionProps as ItemDescriptionProps,
+} from "./NavigationMenu";

package/src/components/NavigationMenu/NavigationMenu.tsx

@@ -0,0 +1,172 @@
+"use client";
+
+import { menu, type MenuVariantProps } from "@seed-design/css/recipes/menu";
+import { menuItem, type MenuItemVariantProps } from "@seed-design/css/recipes/menu-item";
+import {
+  NavigationMenu as NavigationMenuPrimitive,
+  useNavigationMenuItemContext,
+  useNavigationMenuRootContext,
+} from "@seed-design/react-navigation-menu";
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import clsx from "clsx";
+import * as React from "react";
+import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
+import { createWithStateProps } from "../../utils/createWithStateProps";
+
+const { ClassNamesProvider, withContext, useClassNames } = createSlotRecipeContext(menu);
+const {
+  PropsProvider: ItemPropsProvider,
+  useProps: useItemProps,
+  withContext: withItemContext,
+  ClassNamesProvider: ItemClassNamesProvider,
+} = createSlotRecipeContext(menuItem);
+const withStateProps = createWithStateProps([useNavigationMenuRootContext]);
+const withItemStateProps = createWithStateProps([useNavigationMenuItemContext]);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface NavigationMenuProviderProps
+  extends MenuVariantProps,
+    NavigationMenuPrimitive.ProviderProps {}
+
+export const NavigationMenuProvider = (props: NavigationMenuProviderProps) => {
+  const [variantProps, otherProps] = menu.splitVariantProps(props);
+  const classNames = menu(variantProps);
+
+  return (
+    <ClassNamesProvider value={classNames}>
+      <ItemPropsProvider value={{ size: variantProps.size }}>
+        <NavigationMenuPrimitive.Provider {...otherProps} />
+      </ItemPropsProvider>
+    </ClassNamesProvider>
+  );
+};
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface NavigationMenuRootProps extends NavigationMenuPrimitive.RootProps {}
+
+export const NavigationMenuRoot = NavigationMenuPrimitive.Root;
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface NavigationMenuTriggerProps extends NavigationMenuPrimitive.TriggerProps {}
+
+export const NavigationMenuTrigger = NavigationMenuPrimitive.Trigger;
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface NavigationMenuPositionerProps extends NavigationMenuPrimitive.PositionerProps {}
+
+export const NavigationMenuPositioner = React.forwardRef<
+  HTMLDivElement,
+  NavigationMenuPositionerProps
+>(({ className, ...props }, ref) => {
+  const classNames = useClassNames();
+
+  return (
+    <NavigationMenuPrimitive.Positioner
+      ref={ref}
+      className={clsx(classNames.positioner, className)}
+      {...props}
+    />
+  );
+});
+NavigationMenuPositioner.displayName = "NavigationMenuPositioner";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface NavigationMenuContentProps extends NavigationMenuPrimitive.ContentProps {}
+
+export const NavigationMenuContent = withContext<HTMLDivElement, NavigationMenuContentProps>(
+  NavigationMenuPrimitive.Content,
+  "content",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface NavigationMenuScrollAreaProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const NavigationMenuScrollArea = withContext<HTMLDivElement, NavigationMenuScrollAreaProps>(
+  withStateProps(Primitive.div),
+  "scrollArea",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface NavigationMenuGroupProps extends NavigationMenuPrimitive.GroupProps {}
+
+export const NavigationMenuGroup = withContext<HTMLDivElement, NavigationMenuGroupProps>(
+  NavigationMenuPrimitive.Group,
+  "group",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface NavigationMenuGroupLabelProps extends NavigationMenuPrimitive.GroupLabelProps {}
+
+export const NavigationMenuGroupLabel = withContext<HTMLDivElement, NavigationMenuGroupLabelProps>(
+  NavigationMenuPrimitive.GroupLabel,
+  "groupLabel",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface NavigationMenuItemProps
+  extends MenuItemVariantProps,
+    NavigationMenuPrimitive.ItemProps {}
+
+export const NavigationMenuItem = React.forwardRef<HTMLButtonElement, NavigationMenuItemProps>(
+  ({ className: propClassName, ...props }, ref) => {
+    const [variantProps, otherProps] = menuItem.splitVariantProps(props);
+    const parentProps = useItemProps();
+
+    const classNames = menuItem({ ...parentProps, ...variantProps });
+
+    return (
+      <ItemClassNamesProvider value={classNames}>
+        <NavigationMenuPrimitive.Item
+          ref={ref}
+          className={clsx(classNames.root, propClassName)}
+          {...otherProps}
+        />
+      </ItemClassNamesProvider>
+    );
+  },
+);
+NavigationMenuItem.displayName = "NavigationMenuItem";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface NavigationMenuItemBodyProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const NavigationMenuItemBody = withItemContext<HTMLDivElement, NavigationMenuItemBodyProps>(
+  withItemStateProps(Primitive.div),
+  "body",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface NavigationMenuItemLabelProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLSpanElement> {}
+
+export const NavigationMenuItemLabel = withItemContext<
+  HTMLSpanElement,
+  NavigationMenuItemLabelProps
+>(withItemStateProps(Primitive.span), "label");
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface NavigationMenuItemDescriptionProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLSpanElement> {}
+
+export const NavigationMenuItemDescription = withItemContext<
+  HTMLSpanElement,
+  NavigationMenuItemDescriptionProps
+>(withItemStateProps(Primitive.span), "description");

package/src/components/NavigationMenu/index.ts

@@ -0,0 +1,28 @@
+export {
+  NavigationMenuProvider,
+  NavigationMenuRoot,
+  NavigationMenuTrigger,
+  NavigationMenuPositioner,
+  NavigationMenuContent,
+  NavigationMenuScrollArea,
+  NavigationMenuGroup,
+  NavigationMenuGroupLabel,
+  NavigationMenuItem,
+  NavigationMenuItemBody,
+  NavigationMenuItemLabel,
+  NavigationMenuItemDescription,
+  type NavigationMenuProviderProps,
+  type NavigationMenuRootProps,
+  type NavigationMenuTriggerProps,
+  type NavigationMenuPositionerProps,
+  type NavigationMenuContentProps,
+  type NavigationMenuScrollAreaProps,
+  type NavigationMenuGroupProps,
+  type NavigationMenuGroupLabelProps,
+  type NavigationMenuItemProps,
+  type NavigationMenuItemBodyProps,
+  type NavigationMenuItemLabelProps,
+  type NavigationMenuItemDescriptionProps,
+} from "./NavigationMenu";
+
+export * as NavigationMenu from "./NavigationMenu.namespace";

package/src/components/ResponsivePair/ResponsivePair.tsx

@@ -1,25 +1,25 @@
 import { Slot } from "@radix-ui/react-slot";
 import * as React from "react";
-import { handleDimension, useStyleProps } from "../../utils/styled";
+import type { DistributiveOmit } from "../../utils/styled";
 import { Flex, type FlexProps } from "../Flex";
 
-export interface ResponsivePairProps extends Omit<FlexProps, "flexDirection" | "flexWrap"> {
+export type ResponsivePairProps = DistributiveOmit<FlexProps, "flexDirection" | "flexWrap"> & {
   /**
    * @default "wrap-reverse"
    */
   wrap?: "wrap" | "wrap-reverse";
 
   children: [React.ReactNode, React.ReactNode];
-}
+};
 
 export const ResponsivePair = React.forwardRef<HTMLDivElement, ResponsivePairProps>(
   (props, ref) => {
     const { wrap = "wrap-reverse", gap, children, ...rest } = props;
     const childrenArray = React.Children.toArray(children);
-    const { style } = useStyleProps({
-      minWidth: `calc(${100 / childrenArray.length}% - ${handleDimension(gap)} / ${childrenArray.length})`,
-      flexGrow: 1,
-    });
+    const style = {
+      "--seed-box-min-width": `calc(${100 / childrenArray.length}% - var(--responsive-pair-gap) / ${childrenArray.length})`,
+      "--seed-box-flex-grow": 1,
+    } as React.CSSProperties;
 
     return (
       <Flex
@@ -30,6 +30,12 @@ export const ResponsivePair = React.forwardRef<HTMLDivElement, ResponsivePairPro
         flexWrap={wrap}
         gap={gap}
         {...rest}
+        style={
+          {
+            "--responsive-pair-gap": "var(--seed-box-gap, 0px)",
+            ...rest.style,
+          } as React.CSSProperties
+        }
       >
         <Slot style={style}>{childrenArray[0]}</Slot>
         <Slot style={style}>{childrenArray[1]}</Slot>

package/src/components/ResponsiveSidePanel/ResponsiveSidePanel.namespace.ts

@@ -0,0 +1,26 @@
+export {
+  ResponsiveSidePanelBackdrop as Backdrop,
+  ResponsiveSidePanelBody as Body,
+  ResponsiveSidePanelContent as Content,
+  ResponsiveSidePanelDescription as Description,
+  ResponsiveSidePanelFooter as Footer,
+  ResponsiveSidePanelHandle as Handle,
+  ResponsiveSidePanelHeader as Header,
+  ResponsiveSidePanelPositioner as Positioner,
+  ResponsiveSidePanelRoot as Root,
+  ResponsiveSidePanelTitle as Title,
+  ResponsiveSidePanelTrigger as Trigger,
+  ResponsiveSidePanelCloseButton as CloseButton,
+  type ResponsiveSidePanelBackdropProps as BackdropProps,
+  type ResponsiveSidePanelBodyProps as BodyProps,
+  type ResponsiveSidePanelContentProps as ContentProps,
+  type ResponsiveSidePanelDescriptionProps as DescriptionProps,
+  type ResponsiveSidePanelFooterProps as FooterProps,
+  type ResponsiveSidePanelHandleProps as HandleProps,
+  type ResponsiveSidePanelHeaderProps as HeaderProps,
+  type ResponsiveSidePanelPositionerProps as PositionerProps,
+  type ResponsiveSidePanelRootProps as RootProps,
+  type ResponsiveSidePanelTitleProps as TitleProps,
+  type ResponsiveSidePanelTriggerProps as TriggerProps,
+  type ResponsiveSidePanelCloseButtonProps as CloseButtonProps,
+} from "./ResponsiveSidePanel";