@seed-design/react 2.6.1 → 3.0.1

package/src/components/ActionSheet/ActionSheet.namespace.ts

@@ -1,24 +0,0 @@
-export {
-  ActionSheetBackdrop as Backdrop,
-  ActionSheetPositioner as Positioner,
-  ActionSheetContent as Content,
-  ActionSheetHeader as Header,
-  ActionSheetRoot as Root,
-  ActionSheetTitle as Title,
-  ActionSheetDescription as Description,
-  ActionSheetTrigger as Trigger,
-  ActionSheetList as List,
-  ActionSheetItem as Item,
-  ActionSheetCloseButton as CloseButton,
-  type ActionSheetBackdropProps as BackdropProps,
-  type ActionSheetPositionerProps as PositionerProps,
-  type ActionSheetContentProps as ContentProps,
-  type ActionSheetHeaderProps as HeaderProps,
-  type ActionSheetRootProps as RootProps,
-  type ActionSheetTitleProps as TitleProps,
-  type ActionSheetDescriptionProps as DescriptionProps,
-  type ActionSheetTriggerProps as TriggerProps,
-  type ActionSheetListProps as ListProps,
-  type ActionSheetItemProps as ItemProps,
-  type ActionSheetCloseButtonProps as CloseButtonProps,
-} from "./ActionSheet";

package/src/components/ActionSheet/ActionSheet.tsx

@@ -1,192 +0,0 @@
-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 `SwipeableMenuSheet` instead.
- */
-export interface ActionSheetRootProps extends ActionSheetVariantProps, DialogPrimitive.RootProps {
-  /**
-   * @default true
-   */
-  lazyMount?: DialogPrimitive.RootProps["lazyMount"];
-  /**
-   * @default true
-   */
-  unmountOnExit?: DialogPrimitive.RootProps["unmountOnExit"];
-}
-
-/**
- * @deprecated Use `SwipeableMenuSheet` instead.
- */
-export const ActionSheetRoot = withRootProvider<ActionSheetRootProps>(DialogPrimitive.Root, {
-  defaultProps: {
-    lazyMount: true,
-    unmountOnExit: true,
-  },
-});
-
-////////////////////////////////////////////////////////////////////////////////////
-
-/**
- * @deprecated Use `SwipeableMenuSheet` instead.
- */
-export interface ActionSheetTriggerProps extends DialogPrimitive.TriggerProps {}
-
-/**
- * @deprecated Use `SwipeableMenuSheet` instead.
- */
-export const ActionSheetTrigger = DialogPrimitive.Trigger;
-
-////////////////////////////////////////////////////////////////////////////////////
-
-/**
- * @deprecated Use `SwipeableMenuSheet` instead.
- */
-export interface ActionSheetPositionerProps extends DialogPrimitive.PositionerProps {}
-
-/**
- * @deprecated Use `SwipeableMenuSheet` instead.
- */
-export const ActionSheetPositioner = withContext<HTMLDivElement, ActionSheetPositionerProps>(
-  DialogPrimitive.Positioner,
-  "positioner",
-);
-
-////////////////////////////////////////////////////////////////////////////////////
-
-/**
- * @deprecated Use `SwipeableMenuSheet` instead.
- */
-export interface ActionSheetBackdropProps extends DialogPrimitive.BackdropProps {}
-
-/**
- * @deprecated Use `SwipeableMenuSheet` instead.
- */
-export const ActionSheetBackdrop = withContext<HTMLDivElement, ActionSheetBackdropProps>(
-  DialogPrimitive.Backdrop,
-  "backdrop",
-);
-
-////////////////////////////////////////////////////////////////////////////////////
-
-/**
- * @deprecated Use `SwipeableMenuSheet` instead.
- */
-export interface ActionSheetContentProps extends DialogPrimitive.ContentProps {}
-
-/**
- * @deprecated Use `SwipeableMenuSheet` instead.
- */
-export const ActionSheetContent = withContext<HTMLDivElement, ActionSheetContentProps>(
-  DialogPrimitive.Content,
-  "content",
-);
-
-////////////////////////////////////////////////////////////////////////////////////
-
-/**
- * @deprecated Use `SwipeableMenuSheet` instead.
- */
-export interface ActionSheetHeaderProps
-  extends PrimitiveProps,
-    React.HTMLAttributes<HTMLDivElement> {}
-
-/**
- * @deprecated Use `SwipeableMenuSheet` instead.
- */
-export const ActionSheetHeader = withContext<HTMLDivElement, ActionSheetHeaderProps>(
-  withStateProps(Primitive.div),
-  "header",
-);
-
-////////////////////////////////////////////////////////////////////////////////////
-
-/**
- * @deprecated Use `SwipeableMenuSheet` instead.
- */
-export interface ActionSheetTitleProps extends DialogPrimitive.TitleProps {}
-
-/**
- * @deprecated Use `SwipeableMenuSheet` instead.
- */
-export const ActionSheetTitle = withContext<HTMLHeadingElement, ActionSheetTitleProps>(
-  withStateProps(Primitive.h2),
-  "title",
-);
-
-////////////////////////////////////////////////////////////////////////////////////
-
-/**
- * @deprecated Use `SwipeableMenuSheet` instead.
- */
-export interface ActionSheetDescriptionProps extends DialogPrimitive.DescriptionProps {}
-
-/**
- * @deprecated Use `SwipeableMenuSheet` instead.
- */
-export const ActionSheetDescription = withContext<
-  HTMLParagraphElement,
-  ActionSheetDescriptionProps
->(withStateProps(Primitive.p), "description");
-
-////////////////////////////////////////////////////////////////////////////////////
-
-/**
- * @deprecated Use `SwipeableMenuSheet` instead.
- */
-export interface ActionSheetListProps extends React.HTMLAttributes<HTMLDivElement> {}
-
-/**
- * @deprecated Use `SwipeableMenuSheet` instead.
- */
-export const ActionSheetList = withContext<HTMLDivElement, ActionSheetListProps>(
-  withStateProps(Primitive.div),
-  "list",
-);
-
-////////////////////////////////////////////////////////////////////////////////////
-
-/**
- * @deprecated Use `SwipeableMenuSheet` instead.
- */
-export interface ActionSheetItemProps
-  extends PrimitiveProps,
-    ActionSheetItemVariantProps,
-    React.HTMLAttributes<HTMLButtonElement> {}
-
-/**
- * @deprecated Use `SwipeableMenuSheet` instead.
- */
-export const ActionSheetItem = withItemContext<HTMLButtonElement, ActionSheetItemProps>(
-  withStateProps(Primitive.button),
-);
-
-////////////////////////////////////////////////////////////////////////////////////
-
-/**
- * @deprecated Use `SwipeableMenuSheet` instead.
- */
-export interface ActionSheetCloseButtonProps extends DialogPrimitive.CloseButtonProps {}
-
-/**
- * @deprecated Use `SwipeableMenuSheet` instead.
- */
-export const ActionSheetCloseButton = withContext<HTMLDivElement, ActionSheetCloseButtonProps>(
-  DialogPrimitive.CloseButton,
-  "closeButton",
-);

package/src/components/ActionSheet/index.ts

@@ -1,26 +0,0 @@
-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/Columns/Columns.tsx

@@ -1,50 +0,0 @@
-import * as React from "react";
-import type { DistributiveOmit } from "../../utils/styled";
-import { Box, type BoxProps } from "../Box/Box";
-
-/**
- * @deprecated Use `HStack` instead.
- */
-export type ColumnsProps = DistributiveOmit<BoxProps, "display" | "direction">;
-
-/**
- * @deprecated Use `HStack` instead.
- */
-export const Columns = React.forwardRef<HTMLDivElement, ColumnsProps>((props, ref) => {
-  return (
-    <Box
-      ref={ref}
-      display="flex"
-      flexDirection="row"
-      flexWrap="nowrap"
-      justifyContent="flex-start"
-      {...props}
-    />
-  );
-});
-
-/**
- * @deprecated Use `HStack` instead.
- */
-export type ColumnProps = DistributiveOmit<BoxProps, "display" | "flexDirection" | "width"> & {
-  width?: BoxProps["width"] | "content";
-};
-
-/**
- * @deprecated Use `HStack` instead.
- */
-export const Column = React.forwardRef<HTMLDivElement, ColumnProps>((props, ref) => {
-  const { width, ...otherProps } = props;
-
-  return (
-    <Box
-      ref={ref}
-      display="flex"
-      flexDirection="column"
-      width={width !== "content" ? "full" : undefined}
-      flexShrink={width ? 0 : undefined}
-      flexGrow={width ? 0 : 1}
-      {...otherProps}
-    />
-  );
-});

package/src/components/Columns/index.ts

@@ -1 +0,0 @@
-export { Columns, Column, type ColumnsProps, type ColumnProps } from "./Columns";

package/src/components/ContentDialog/ContentDialog.namespace.ts

@@ -1,26 +0,0 @@
-export {
-  ContentDialogBackdrop as Backdrop,
-  ContentDialogPositioner as Positioner,
-  ContentDialogContent as Content,
-  ContentDialogBody as Body,
-  ContentDialogDescription as Description,
-  ContentDialogFooter as Footer,
-  ContentDialogHeader as Header,
-  ContentDialogRoot as Root,
-  ContentDialogTitle as Title,
-  ContentDialogTrigger as Trigger,
-  ContentDialogAction as Action,
-  ContentDialogCloseButton as CloseButton,
-  type ContentDialogBackdropProps as BackdropProps,
-  type ContentDialogPositionerProps as PositionerProps,
-  type ContentDialogContentProps as ContentProps,
-  type ContentDialogBodyProps as BodyProps,
-  type ContentDialogDescriptionProps as DescriptionProps,
-  type ContentDialogFooterProps as FooterProps,
-  type ContentDialogHeaderProps as HeaderProps,
-  type ContentDialogRootProps as RootProps,
-  type ContentDialogTitleProps as TitleProps,
-  type ContentDialogTriggerProps as TriggerProps,
-  type ContentDialogActionProps as ActionProps,
-  type ContentDialogCloseButtonProps as CloseButtonProps,
-} from "./ContentDialog";

package/src/components/ContentDialog/ContentDialog.tsx

@@ -1,224 +0,0 @@
-import { composeRefs, useComposedRefs } from "@radix-ui/react-compose-refs";
-import {
-  contentDialog,
-  type ContentDialogVariantProps,
-} from "@seed-design/css/recipes/content-dialog";
-import { dataAttr } from "@seed-design/dom-utils";
-import { Dialog as DialogPrimitive } from "@seed-design/react-dialog";
-import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
-import clsx from "clsx";
-import * as React from "react";
-import { createRenderTrackingContext } from "../../utils/createRenderTrackingContext";
-import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
-import { useScaleFeedback } from "@seed-design/react-scale-feedback";
-import { useStyleProps, withStyleProps, type StyleProps } from "../../utils/styled";
-
-const { withContext, useClassNames, ClassNamesProvider } = createSlotRecipeContext(contentDialog);
-
-const closeButtonTracker = createRenderTrackingContext("ContentDialogCloseButton");
-
-////////////////////////////////////////////////////////////////////////////////////
-
-export interface ContentDialogRootProps
-  extends ContentDialogVariantProps,
-    Omit<DialogPrimitive.RootProps, "role"> {
-  /**
-   * @default true
-   */
-  lazyMount?: DialogPrimitive.RootProps["lazyMount"];
-  /**
-   * @default true
-   */
-  unmountOnExit?: DialogPrimitive.RootProps["unmountOnExit"];
-}
-
-export function ContentDialogRoot(props: ContentDialogRootProps) {
-  const [variantProps, otherProps] = contentDialog.splitVariantProps({
-    lazyMount: true,
-    unmountOnExit: true,
-    ...props,
-  });
-  const classNames = contentDialog(variantProps);
-
-  return (
-    <ClassNamesProvider value={classNames}>
-      <closeButtonTracker.Provider>
-        <DialogPrimitive.Root {...otherProps} />
-      </closeButtonTracker.Provider>
-    </ClassNamesProvider>
-  );
-}
-
-////////////////////////////////////////////////////////////////////////////////////
-
-export interface ContentDialogTriggerProps extends DialogPrimitive.TriggerProps {}
-
-export const ContentDialogTrigger = DialogPrimitive.Trigger;
-
-////////////////////////////////////////////////////////////////////////////////////
-
-export interface ContentDialogPositionerProps extends DialogPrimitive.PositionerProps {}
-
-export const ContentDialogPositioner = withContext<HTMLDivElement, ContentDialogPositionerProps>(
-  DialogPrimitive.Positioner,
-  "positioner",
-);
-
-////////////////////////////////////////////////////////////////////////////////////
-
-export interface ContentDialogBackdropProps extends DialogPrimitive.BackdropProps {}
-
-export const ContentDialogBackdrop = withContext<HTMLDivElement, ContentDialogBackdropProps>(
-  DialogPrimitive.Backdrop,
-  "backdrop",
-);
-
-////////////////////////////////////////////////////////////////////////////////////
-
-export interface ContentDialogContentProps
-  extends DialogPrimitive.ContentProps,
-    Pick<StyleProps, "width" | "maxWidth"> {}
-
-export const ContentDialogContent = withContext<HTMLDivElement, ContentDialogContentProps>(
-  withStyleProps(DialogPrimitive.Content),
-  "content",
-);
-
-////////////////////////////////////////////////////////////////////////////////////
-
-export interface ContentDialogHeaderProps
-  extends PrimitiveProps,
-    React.HTMLAttributes<HTMLDivElement> {}
-
-export const ContentDialogHeader = React.forwardRef<HTMLDivElement, ContentDialogHeaderProps>(
-  ({ className, ...props }, ref) => {
-    const classNames = useClassNames();
-    const { isRendered } = closeButtonTracker.useRenderTracking();
-
-    return (
-      <Primitive.div
-        ref={ref}
-        data-show-close-button={dataAttr(isRendered)}
-        className={clsx(classNames.header, className)}
-        {...props}
-      />
-    );
-  },
-);
-
-ContentDialogHeader.displayName = "ContentDialogHeader";
-
-////////////////////////////////////////////////////////////////////////////////////
-
-export interface ContentDialogTitleProps extends DialogPrimitive.TitleProps {}
-
-export const ContentDialogTitle = withContext<HTMLHeadingElement, ContentDialogTitleProps>(
-  DialogPrimitive.Title,
-  "title",
-);
-
-////////////////////////////////////////////////////////////////////////////////////
-
-export interface ContentDialogDescriptionProps extends DialogPrimitive.DescriptionProps {}
-
-export const ContentDialogDescription = withContext<
-  HTMLParagraphElement,
-  ContentDialogDescriptionProps
->(DialogPrimitive.Description, "description");
-
-////////////////////////////////////////////////////////////////////////////////////
-
-export interface ContentDialogBodyProps
-  extends PrimitiveProps,
-    Pick<StyleProps, "paddingX" | "minHeight" | "maxHeight" | "justifyContent" | "alignItems">,
-    React.HTMLAttributes<HTMLDivElement> {}
-
-export const ContentDialogBody = React.forwardRef<HTMLDivElement, ContentDialogBodyProps>(
-  (props, forwardedRef) => {
-    const classNames = useClassNames();
-    const { style, restProps } = useStyleProps(props);
-    const { className, ...otherProps } = restProps;
-
-    const ref = React.useRef<HTMLDivElement>(null);
-    const [scrolled, setScrolled] = React.useState(false);
-    const [overflowing, setOverflowing] = React.useState(false);
-
-    React.useEffect(() => {
-      const element = ref.current;
-      if (!element) return;
-
-      const check = () => {
-        setScrolled(element.scrollTop > 0);
-        // Subtract the current bottom padding so overflow detection stays independent
-        // of the padding we conditionally apply — otherwise that padding would count as
-        // overflow and the state would never settle (padding -> overflow -> padding...).
-        const paddingBottom = Number.parseFloat(getComputedStyle(element).paddingBottom) || 0;
-        setOverflowing(element.scrollHeight - paddingBottom > element.clientHeight);
-      };
-      check();
-
-      element.addEventListener("scroll", check);
-
-      const observer = new ResizeObserver(check);
-      observer.observe(element);
-
-      return () => {
-        element.removeEventListener("scroll", check);
-        observer.disconnect();
-      };
-    }, []);
-
-    return (
-      <Primitive.div
-        ref={composeRefs(ref, forwardedRef)}
-        data-scrolled={dataAttr(scrolled)}
-        data-overflow={dataAttr(overflowing)}
-        className={clsx(classNames.body, className)}
-        style={style}
-        {...otherProps}
-      />
-    );
-  },
-);
-
-ContentDialogBody.displayName = "ContentDialogBody";
-
-////////////////////////////////////////////////////////////////////////////////////
-
-export interface ContentDialogFooterProps
-  extends PrimitiveProps,
-    React.HTMLAttributes<HTMLDivElement> {}
-
-export const ContentDialogFooter = withContext<HTMLDivElement, ContentDialogFooterProps>(
-  Primitive.div,
-  "footer",
-);
-
-////////////////////////////////////////////////////////////////////////////////////
-
-export interface ContentDialogActionProps extends DialogPrimitive.CloseButtonProps {}
-
-export const ContentDialogAction = DialogPrimitive.CloseButton;
-
-////////////////////////////////////////////////////////////////////////////////////
-
-export interface ContentDialogCloseButtonProps extends DialogPrimitive.CloseButtonProps {}
-
-export const ContentDialogCloseButton = React.forwardRef<
-  HTMLButtonElement,
-  ContentDialogCloseButtonProps
->(({ className, ...props }, ref) => {
-  const classNames = useClassNames();
-  const { trackRef } = closeButtonTracker.useRenderTracking();
-  const { scaleFeedbackRef, scaleFeedbackClassName } = useScaleFeedback();
-
-  return (
-    <DialogPrimitive.CloseButton
-      ref={useComposedRefs(scaleFeedbackRef, ref, trackRef)}
-      className={clsx(classNames.closeButton, scaleFeedbackClassName, className)}
-      {...props}
-    />
-  );
-});
-
-ContentDialogCloseButton.displayName = "ContentDialogCloseButton";

package/src/components/ContentDialog/index.ts

@@ -1,33 +0,0 @@
-// NOTE: dialog naming is mid-rename; rootage/vars already use the new names, recipes and react components still use the old ones.
-// Semantically (= snippet naming), this component is the Dialog:
-//   snippet AlertDialog → react Dialog        → recipe "dialog"         → vars alertDialog
-//   snippet Dialog      → react ContentDialog → recipe "content-dialog" → vars dialog
-
-export {
-  ContentDialogBackdrop,
-  ContentDialogPositioner,
-  ContentDialogContent,
-  ContentDialogBody,
-  ContentDialogDescription,
-  ContentDialogFooter,
-  ContentDialogHeader,
-  ContentDialogRoot,
-  ContentDialogTitle,
-  ContentDialogTrigger,
-  ContentDialogAction,
-  ContentDialogCloseButton,
-  type ContentDialogBackdropProps,
-  type ContentDialogPositionerProps,
-  type ContentDialogContentProps,
-  type ContentDialogBodyProps,
-  type ContentDialogDescriptionProps,
-  type ContentDialogFooterProps,
-  type ContentDialogHeaderProps,
-  type ContentDialogRootProps,
-  type ContentDialogTitleProps,
-  type ContentDialogTriggerProps,
-  type ContentDialogActionProps,
-  type ContentDialogCloseButtonProps,
-} from "./ContentDialog";
-
-export * as ContentDialog from "./ContentDialog.namespace";

package/src/components/ControlChip/ControlChip.tsx

@@ -1,38 +0,0 @@
-import { controlChip, type ControlChipVariantProps } from "@seed-design/css/recipes/control-chip";
-import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
-import type * as React from "react";
-import { createRecipeContext } from "../../utils/createRecipeContext";
-import { withIconRequired } from "../Icon/Icon";
-
-const { withContext } = createRecipeContext(controlChip);
-
-/**
- * @deprecated ControlChipBaseProps is deprecated. Use ChipBaseProps from Chip instead.
- */
-export interface ControlChipBaseProps extends PrimitiveProps, ControlChipVariantProps {}
-
-/**
- * @deprecated ControlChipProps is deprecated. Use Chip.Toggle or Chip.Button instead.
- *
- * Migration guide:
- * ```tsx
- * // Before
- * <ControlChip size="medium">Label</ControlChip>
- *
- * // After
- * import { Chip } from "@seed-design/react";
- * <Chip.Toggle size="medium" variant="outlineStrong">Label</Chip.Toggle>
- * ```
- */
-export interface ControlChipProps
-  extends ControlChipBaseProps,
-    React.HTMLAttributes<HTMLButtonElement> {}
-
-/**
- * @deprecated ControlChip is deprecated. Use Chip.Toggle or Chip.Button instead.
- */
-export const ControlChip = withIconRequired(
-  withContext<HTMLButtonElement, ControlChipProps>(Primitive.button),
-  (props: ControlChipProps) => props.layout === "iconOnly",
-);
-ControlChip.displayName = "ControlChip";

package/src/components/ControlChip/index.ts

@@ -1,5 +0,0 @@
-export {
-  ControlChip,
-  type ControlChipBaseProps,
-  type ControlChipProps,
-} from "./ControlChip";

package/src/components/ExtendedActionSheet/ExtendedActionSheet.namespace.ts

@@ -1,26 +0,0 @@
-export {
-  ExtendedActionSheetBackdrop as Backdrop,
-  ExtendedActionSheetPositioner as Positioner,
-  ExtendedActionSheetContent as Content,
-  ExtendedActionSheetFooter as Footer,
-  ExtendedActionSheetHeader as Header,
-  ExtendedActionSheetRoot as Root,
-  ExtendedActionSheetTitle as Title,
-  ExtendedActionSheetTrigger as Trigger,
-  ExtendedActionSheetList as List,
-  ExtendedActionSheetGroup as Group,
-  ExtendedActionSheetItem as Item,
-  ExtendedActionSheetCloseButton as CloseButton,
-  type ExtendedActionSheetBackdropProps as BackdropProps,
-  type ExtendedActionSheetPositionerProps as PositionerProps,
-  type ExtendedActionSheetContentProps as ContentProps,
-  type ExtendedActionSheetFooterProps as FooterProps,
-  type ExtendedActionSheetHeaderProps as HeaderProps,
-  type ExtendedActionSheetRootProps as RootProps,
-  type ExtendedActionSheetTitleProps as TitleProps,
-  type ExtendedActionSheetTriggerProps as TriggerProps,
-  type ExtendedActionSheetListProps as ListProps,
-  type ExtendedActionSheetGroupProps as GroupProps,
-  type ExtendedActionSheetItemProps as ItemProps,
-  type ExtendedActionSheetCloseButtonProps as CloseButtonProps,
-} from "./ExtendedActionSheet";