@seed-design/react 1.2.15 → 2.0.1

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";

package/src/components/ResponsiveSidePanel/ResponsiveSidePanel.tsx

@@ -0,0 +1,316 @@
+import type { Breakpoint } from "@seed-design/css/breakpoints";
+import * as React from "react";
+import { useBreakpointValue } from "../../hooks/useBreakpointValue";
+import {
+  type BottomSheet,
+  BottomSheetBackdrop,
+  BottomSheetBody,
+  BottomSheetCloseButton,
+  BottomSheetContent,
+  BottomSheetDescription,
+  BottomSheetFooter,
+  BottomSheetHeader,
+  BottomSheetPositioner,
+  BottomSheetRoot,
+  BottomSheetTitle,
+  BottomSheetTrigger,
+} from "../BottomSheet";
+import { BottomSheetHandle } from "../BottomSheetHandle";
+import {
+  type SidePanel,
+  SidePanelBackdrop,
+  SidePanelBody,
+  SidePanelCloseButton,
+  SidePanelContent,
+  SidePanelDescription,
+  SidePanelFooter,
+  SidePanelHeader,
+  SidePanelPositioner,
+  SidePanelRoot,
+  SidePanelTitle,
+  SidePanelTrigger,
+} from "../SidePanel";
+
+type SharedProps<SidePanelProps, BottomSheetProps> = Pick<
+  SidePanelProps,
+  Extract<keyof SidePanelProps, keyof BottomSheetProps>
+> &
+  Pick<BottomSheetProps, Extract<keyof BottomSheetProps, keyof SidePanelProps>>;
+
+interface ResponsiveSidePanelContextValue {
+  shouldUseBottomSheet: boolean | undefined;
+}
+
+const ResponsiveSidePanelContext = React.createContext<ResponsiveSidePanelContextValue | null>(
+  null,
+);
+
+export function useResponsiveSidePanelContext() {
+  const ctx = React.useContext(ResponsiveSidePanelContext);
+  if (!ctx) {
+    throw new Error(
+      "ResponsiveSidePanel sub-components must be used inside <ResponsiveSidePanelRoot>",
+    );
+  }
+
+  return ctx;
+}
+
+export interface ResponsiveSidePanelRootProps {
+  children?: React.ReactNode;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+
+  /**
+   * Breakpoint at and above which the panel renders as a SidePanel; below it, a
+   * BottomSheet. Cannot be `"base"`, which would always be a SidePanel.
+   * @default "md"
+   */
+  sidePanelBreakpoint?: Exclude<Breakpoint, "base">;
+
+  /** Props forwarded to the underlying SidePanel root (at and above the breakpoint). */
+  sidePanelRootProps?: Omit<
+    SidePanel.RootProps,
+    "children" | "open" | "defaultOpen" | "onOpenChange"
+  >;
+
+  /** Props forwarded to the underlying BottomSheet root (below the breakpoint). */
+  bottomSheetRootProps?: Omit<
+    BottomSheet.RootProps,
+    "children" | "open" | "defaultOpen" | "onOpenChange"
+  >;
+}
+
+export const ResponsiveSidePanelRoot = ({
+  children,
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  sidePanelBreakpoint = "md",
+  sidePanelRootProps,
+  bottomSheetRootProps,
+}: ResponsiveSidePanelRootProps) => {
+  const shouldUseBottomSheet = useBreakpointValue({ base: true, [sidePanelBreakpoint]: false });
+
+  const isControlled = openProp !== undefined;
+  const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
+  const open = openProp ?? internalOpen;
+
+  const setOpen = React.useCallback(
+    (nextOpen: boolean) => {
+      if (nextOpen === open) return;
+
+      if (!isControlled) {
+        setInternalOpen(nextOpen);
+      }
+
+      onOpenChange?.(nextOpen);
+    },
+    [isControlled, onOpenChange, open],
+  );
+
+  const value = React.useMemo(() => ({ shouldUseBottomSheet }), [shouldUseBottomSheet]);
+
+  return (
+    <ResponsiveSidePanelContext.Provider value={value}>
+      {shouldUseBottomSheet ? (
+        <BottomSheetRoot {...bottomSheetRootProps} open={open} onOpenChange={setOpen}>
+          {children}
+        </BottomSheetRoot>
+      ) : (
+        <SidePanelRoot {...sidePanelRootProps} open={open} onOpenChange={setOpen}>
+          {children}
+        </SidePanelRoot>
+      )}
+    </ResponsiveSidePanelContext.Provider>
+  );
+};
+
+export interface ResponsiveSidePanelTriggerProps
+  extends SharedProps<SidePanel.TriggerProps, BottomSheet.TriggerProps> {}
+
+export const ResponsiveSidePanelTrigger = React.forwardRef<
+  HTMLButtonElement,
+  ResponsiveSidePanelTriggerProps
+>((props, ref) => {
+  const { shouldUseBottomSheet } = useResponsiveSidePanelContext();
+
+  return shouldUseBottomSheet ? (
+    <BottomSheetTrigger ref={ref} {...props} />
+  ) : (
+    <SidePanelTrigger ref={ref} {...props} />
+  );
+});
+ResponsiveSidePanelTrigger.displayName = "ResponsiveSidePanelTrigger";
+
+export interface ResponsiveSidePanelPositionerProps
+  extends SharedProps<SidePanel.PositionerProps, BottomSheet.PositionerProps> {}
+
+export const ResponsiveSidePanelPositioner = React.forwardRef<
+  HTMLDivElement,
+  ResponsiveSidePanelPositionerProps
+>((props, ref) => {
+  const { shouldUseBottomSheet } = useResponsiveSidePanelContext();
+
+  return shouldUseBottomSheet ? (
+    <BottomSheetPositioner ref={ref} {...props} />
+  ) : (
+    <SidePanelPositioner ref={ref} {...props} />
+  );
+});
+ResponsiveSidePanelPositioner.displayName = "ResponsiveSidePanelPositioner";
+
+export interface ResponsiveSidePanelBackdropProps
+  extends SharedProps<SidePanel.BackdropProps, BottomSheet.BackdropProps> {}
+
+export const ResponsiveSidePanelBackdrop = React.forwardRef<
+  HTMLDivElement,
+  ResponsiveSidePanelBackdropProps
+>((props, ref) => {
+  const { shouldUseBottomSheet } = useResponsiveSidePanelContext();
+
+  return shouldUseBottomSheet ? (
+    <BottomSheetBackdrop ref={ref} {...props} />
+  ) : (
+    <SidePanelBackdrop ref={ref} {...props} />
+  );
+});
+ResponsiveSidePanelBackdrop.displayName = "ResponsiveSidePanelBackdrop";
+
+/**
+ * `width` / `maxWidth` only apply in SidePanel mode (md+); they are ignored when
+ * rendered as a BottomSheet.
+ */
+export interface ResponsiveSidePanelContentProps
+  extends SharedProps<SidePanel.ContentProps, BottomSheet.ContentProps>,
+    Pick<SidePanel.ContentProps, "width" | "maxWidth"> {}
+
+export const ResponsiveSidePanelContent = React.forwardRef<
+  HTMLDivElement,
+  ResponsiveSidePanelContentProps
+>(({ width, maxWidth, ...props }, ref) => {
+  const { shouldUseBottomSheet } = useResponsiveSidePanelContext();
+
+  return shouldUseBottomSheet ? (
+    <BottomSheetContent ref={ref} {...props} />
+  ) : (
+    <SidePanelContent ref={ref} width={width} maxWidth={maxWidth} {...props} />
+  );
+});
+ResponsiveSidePanelContent.displayName = "ResponsiveSidePanelContent";
+
+export interface ResponsiveSidePanelHeaderProps
+  extends SharedProps<SidePanel.HeaderProps, BottomSheet.HeaderProps> {}
+
+export const ResponsiveSidePanelHeader = React.forwardRef<
+  HTMLDivElement,
+  ResponsiveSidePanelHeaderProps
+>((props, ref) => {
+  const { shouldUseBottomSheet } = useResponsiveSidePanelContext();
+
+  return shouldUseBottomSheet ? (
+    <BottomSheetHeader ref={ref} {...props} />
+  ) : (
+    <SidePanelHeader ref={ref} {...props} />
+  );
+});
+ResponsiveSidePanelHeader.displayName = "ResponsiveSidePanelHeader";
+
+export interface ResponsiveSidePanelTitleProps
+  extends SharedProps<SidePanel.TitleProps, BottomSheet.TitleProps> {}
+
+export const ResponsiveSidePanelTitle = React.forwardRef<
+  HTMLHeadingElement,
+  ResponsiveSidePanelTitleProps
+>((props, ref) => {
+  const { shouldUseBottomSheet } = useResponsiveSidePanelContext();
+
+  return shouldUseBottomSheet ? (
+    <BottomSheetTitle ref={ref} {...props} />
+  ) : (
+    <SidePanelTitle ref={ref} {...props} />
+  );
+});
+ResponsiveSidePanelTitle.displayName = "ResponsiveSidePanelTitle";
+
+export interface ResponsiveSidePanelDescriptionProps
+  extends SharedProps<SidePanel.DescriptionProps, BottomSheet.DescriptionProps> {}
+
+export const ResponsiveSidePanelDescription = React.forwardRef<
+  HTMLParagraphElement,
+  ResponsiveSidePanelDescriptionProps
+>((props, ref) => {
+  const { shouldUseBottomSheet } = useResponsiveSidePanelContext();
+
+  return shouldUseBottomSheet ? (
+    <BottomSheetDescription ref={ref} {...props} />
+  ) : (
+    <SidePanelDescription ref={ref} {...props} />
+  );
+});
+ResponsiveSidePanelDescription.displayName = "ResponsiveSidePanelDescription";
+
+export interface ResponsiveSidePanelBodyProps
+  extends SharedProps<SidePanel.BodyProps, BottomSheet.BodyProps> {}
+
+export const ResponsiveSidePanelBody = React.forwardRef<
+  HTMLDivElement,
+  ResponsiveSidePanelBodyProps
+>((props, ref) => {
+  const { shouldUseBottomSheet } = useResponsiveSidePanelContext();
+
+  return shouldUseBottomSheet ? (
+    <BottomSheetBody ref={ref} {...props} />
+  ) : (
+    <SidePanelBody ref={ref} {...props} />
+  );
+});
+ResponsiveSidePanelBody.displayName = "ResponsiveSidePanelBody";
+
+export interface ResponsiveSidePanelFooterProps
+  extends SharedProps<SidePanel.FooterProps, BottomSheet.FooterProps> {}
+
+export const ResponsiveSidePanelFooter = React.forwardRef<
+  HTMLDivElement,
+  ResponsiveSidePanelFooterProps
+>((props, ref) => {
+  const { shouldUseBottomSheet } = useResponsiveSidePanelContext();
+
+  return shouldUseBottomSheet ? (
+    <BottomSheetFooter ref={ref} {...props} />
+  ) : (
+    <SidePanelFooter ref={ref} {...props} />
+  );
+});
+ResponsiveSidePanelFooter.displayName = "ResponsiveSidePanelFooter";
+
+export interface ResponsiveSidePanelCloseButtonProps
+  extends SharedProps<SidePanel.CloseButtonProps, BottomSheet.CloseButtonProps> {}
+
+export const ResponsiveSidePanelCloseButton = React.forwardRef<
+  HTMLButtonElement,
+  ResponsiveSidePanelCloseButtonProps
+>((props, ref) => {
+  const { shouldUseBottomSheet } = useResponsiveSidePanelContext();
+
+  return shouldUseBottomSheet ? (
+    <BottomSheetCloseButton ref={ref} {...props} />
+  ) : (
+    <SidePanelCloseButton ref={ref} {...props} />
+  );
+});
+ResponsiveSidePanelCloseButton.displayName = "ResponsiveSidePanelCloseButton";
+
+export interface ResponsiveSidePanelHandleProps extends BottomSheet.HandleProps {}
+
+export const ResponsiveSidePanelHandle = React.forwardRef<
+  HTMLDivElement,
+  ResponsiveSidePanelHandleProps
+>((props, ref) => {
+  const { shouldUseBottomSheet } = useResponsiveSidePanelContext();
+  if (!shouldUseBottomSheet) return null;
+
+  return <BottomSheetHandle ref={ref} {...props} />;
+});
+ResponsiveSidePanelHandle.displayName = "ResponsiveSidePanelHandle";

package/src/components/ResponsiveSidePanel/index.ts

@@ -0,0 +1,29 @@
+export {
+  ResponsiveSidePanelBackdrop,
+  ResponsiveSidePanelBody,
+  ResponsiveSidePanelContent,
+  ResponsiveSidePanelDescription,
+  ResponsiveSidePanelFooter,
+  ResponsiveSidePanelHandle,
+  ResponsiveSidePanelHeader,
+  ResponsiveSidePanelPositioner,
+  ResponsiveSidePanelRoot,
+  ResponsiveSidePanelTitle,
+  ResponsiveSidePanelTrigger,
+  ResponsiveSidePanelCloseButton,
+  useResponsiveSidePanelContext,
+  type ResponsiveSidePanelBackdropProps,
+  type ResponsiveSidePanelBodyProps,
+  type ResponsiveSidePanelContentProps,
+  type ResponsiveSidePanelDescriptionProps,
+  type ResponsiveSidePanelFooterProps,
+  type ResponsiveSidePanelHandleProps,
+  type ResponsiveSidePanelHeaderProps,
+  type ResponsiveSidePanelPositionerProps,
+  type ResponsiveSidePanelRootProps,
+  type ResponsiveSidePanelTitleProps,
+  type ResponsiveSidePanelTriggerProps,
+  type ResponsiveSidePanelCloseButtonProps,
+} from "./ResponsiveSidePanel";
+
+export * as ResponsiveSidePanel from "./ResponsiveSidePanel.namespace";

package/src/components/ScrollFog/ScrollFog.tsx

@@ -1,7 +1,6 @@
 import { scrollFog, type ScrollFogVariantProps } from "@seed-design/css/recipes/scroll-fog";
 import clsx from "clsx";
 import { forwardRef, useMemo } from "react";
-import { scrollFog as vars } from "@seed-design/css/vars/component";
 
 type ScrollPlacement = "top" | "bottom" | "left" | "right";
 
@@ -35,15 +34,7 @@ export interface ScrollFogProps
 
 export const ScrollFog = forwardRef<HTMLDivElement, ScrollFogProps>(
   (
-    {
-      className,
-      hideScrollBar,
-      placement = ["top", "bottom"],
-      size = vars.base.enabled.root.size,
-      sizes,
-      style,
-      ...props
-    },
+    { className, hideScrollBar, placement = ["top", "bottom"], size = 20, sizes, style, ...props },
     ref,
   ) => {
     const [variantProps, restProps] = scrollFog.splitVariantProps({
@@ -51,7 +42,7 @@ export const ScrollFog = forwardRef<HTMLDivElement, ScrollFogProps>(
       ...props,
     });
     const scrollFogClassName = scrollFog(variantProps);
-    const sizePx = typeof size === "number" ? `${size}px` : size;
+    const sizePx = typeof size === "number" ? `${size}px` : size; // TODO: redundant typeof?
 
     const sizeStyle = useMemo(() => {
       const finalSizes = {

package/src/components/SelectBox/CheckSelectBox.tsx

@@ -3,7 +3,7 @@ import { selectBox, type SelectBoxVariantProps } from "@seed-design/css/recipes/
 import {
   selectBoxCheckmark,
   type SelectBoxCheckmarkVariantProps,
-} from "@seed-design/css/recipes/selectBoxCheckmark";
+} from "@seed-design/css/recipes/select-box-checkmark";
 import {
   selectBoxGroup,
   type SelectBoxGroupVariantProps,

package/src/components/SideNavigation/SideNavigation.namespace.ts

@@ -0,0 +1,37 @@
+export {
+  SideNavigationRoot as Root,
+  SideNavigationHeader as Header,
+  SideNavigationContent as Content,
+  SideNavigationFooter as Footer,
+  SideNavigationGroup as Group,
+  SideNavigationGroupLabel as GroupLabel,
+  SideNavigationItem as Item,
+  SideNavigationItemLabel as ItemLabel,
+  SideNavigationItemPrefixIcon as ItemPrefixIcon,
+  SideNavigationItemSuffixIcon as ItemSuffixIcon,
+  SideNavigationItemCollapsibleRoot as ItemCollapsibleRoot,
+  SideNavigationItemCollapsibleTrigger as ItemCollapsibleTrigger,
+  SideNavigationItemCollapsibleContent as ItemCollapsibleContent,
+  SideNavigationTrigger as Trigger,
+  SideNavigationInset as Inset,
+  type SideNavigationRootProps as RootProps,
+  type SideNavigationHeaderProps as HeaderProps,
+  type SideNavigationContentProps as ContentProps,
+  type SideNavigationFooterProps as FooterProps,
+  type SideNavigationGroupProps as GroupProps,
+  type SideNavigationGroupLabelProps as GroupLabelProps,
+  type SideNavigationItemProps as ItemProps,
+  type SideNavigationItemLabelProps as ItemLabelProps,
+  type SideNavigationItemPrefixIconProps as ItemPrefixIconProps,
+  type SideNavigationItemSuffixIconProps as ItemSuffixIconProps,
+  type SideNavigationItemCollapsibleRootProps as ItemCollapsibleRootProps,
+  type SideNavigationItemCollapsibleTriggerProps as ItemCollapsibleTriggerProps,
+  type SideNavigationItemCollapsibleContentProps as ItemCollapsibleContentProps,
+  type SideNavigationTriggerProps as TriggerProps,
+  type SideNavigationInsetProps as InsetProps,
+} from "./SideNavigation";
+
+export {
+  SideNavigationProvider as Provider,
+  type SideNavigationProviderProps as ProviderProps,
+} from "./SideNavigation";