@seed-design/react 0.0.0-alpha-20260324091316

package/src/components/Snackbar/index.ts

@@ -0,0 +1,32 @@
+export {
+  SnackbarActionButton,
+  SnackbarAvoidOverlap,
+  SnackbarHiddenCloseButton,
+  SnackbarMessage,
+  SnackbarPrefixIcon,
+  SnackbarRegion,
+  SnackbarRenderer,
+  SnackbarRoot,
+  SnackbarRootProvider,
+  type SnackbarActionButtonProps,
+  type SnackbarAvoidOverlapProps,
+  type SnackbarHiddenCloseButtonProps,
+  type SnackbarMessageProps,
+  type SnackbarPrefixIconProps,
+  type SnackbarRegionProps,
+  type SnackbarRendererProps,
+  type SnackbarRootProps,
+  type SnackbarRootProviderProps,
+} from "./Snackbar";
+
+export {
+  useSnackbarContext,
+  type UseSnackbarContext,
+  type CreateSnackbarOptions,
+} from "@seed-design/react-snackbar";
+export {
+  useSnackbarAdapter,
+  type UseSnackbarAdapterReturn,
+} from "./useSnackbarAdapter";
+
+export * as Snackbar from "./Snackbar.namespace";

package/src/components/Snackbar/useSnackbarAdapter.ts

@@ -0,0 +1,28 @@
+import { useSnackbarContext, type CreateSnackbarOptions } from "@seed-design/react-snackbar";
+import { useMemo } from "react";
+
+export type UseSnackbarAdapterReturn = ReturnType<typeof useSnackbarAdapter>;
+
+/**
+ * wraps the snackbar context to provide a more user-friendly API
+ */
+export function useSnackbarAdapter() {
+  const api = useSnackbarContext();
+  const adapter = useMemo(
+    () => ({
+      visible: api.visible,
+      create: (options: CreateSnackbarOptions) => {
+        return api.create({
+          timeout: options.timeout ?? 5000,
+          removeDelay: options.removeDelay ?? 200,
+          onClose: options.onClose,
+          render: options.render,
+        });
+      },
+      dismiss: api.dismiss,
+    }),
+    [api],
+  );
+
+  return adapter;
+}

package/src/components/Stack/Stack.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { Flex, type FlexProps } from "../Flex";
+
+/**
+ * @deprecated Use `VStack` instead.
+ */
+export interface StackProps extends Omit<FlexProps, "flexDirection"> {}
+
+/**
+ * @deprecated Use `VStack` instead.
+ */
+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 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 const HStack = React.forwardRef<HTMLDivElement, HStackProps>((props, ref) => {
+  return <Flex ref={ref} display="flex" flexDirection="row" {...props} />;
+});

package/src/components/Stack/index.ts

@@ -0,0 +1,8 @@
+export {
+  Stack,
+  VStack,
+  HStack,
+  type StackProps,
+  type VStackProps,
+  type HStackProps,
+} from "./Stack";

package/src/components/Switch/Switch.namespace.ts

@@ -0,0 +1,12 @@
+export {
+  SwitchControl as Control,
+  SwitchHiddenInput as HiddenInput,
+  SwitchLabel as Label,
+  SwitchRoot as Root,
+  SwitchThumb as Thumb,
+  type SwitchControlProps as ControlProps,
+  type SwitchHiddenInputProps as HiddenInputProps,
+  type SwitchLabelProps as LabelProps,
+  type SwitchRootProps as RootProps,
+  type SwitchThumbProps as ThumbProps,
+} from "./Switch";

package/src/components/Switch/Switch.tsx

@@ -0,0 +1,102 @@
+import { Switch as SwitchPrimitive, useSwitchContext } from "@seed-design/react-switch";
+import { switchStyle, type SwitchVariantProps } from "@seed-design/css/recipes/switch";
+import { switchmark, type SwitchmarkVariantProps } from "@seed-design/css/recipes/switchmark";
+import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import { createWithStateProps } from "../../utils/createWithStateProps";
+import React from "react";
+import clsx from "clsx";
+import { splitMultipleVariantsProps } from "../../utils/splitMultipleVariantsProps";
+
+const { withContext, ClassNamesProvider } = createSlotRecipeContext(switchStyle);
+const {
+  withContext: withControlContext,
+  PropsProvider: ControlPropsProvider,
+  withProvider: withControlProvider,
+} = createSlotRecipeContext(switchmark);
+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">,
+    Omit<SwitchmarkVariantProps, "size">,
+    SwitchPrimitive.RootProps {
+  size?: SwitchVariantProps["size"] | SwitchVariantDeprecatedSizeProps;
+}
+
+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@1.3.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 },
+      );
+
+    const classNames = switchStyle(switchVariantProps);
+
+    return (
+      <ControlPropsProvider value={switchmarkVariantProps}>
+        <ClassNamesProvider value={classNames}>
+          <SwitchPrimitive.Root
+            ref={ref}
+            className={clsx(classNames.root, className)}
+            {...otherProps}
+          />
+        </ClassNamesProvider>
+      </ControlPropsProvider>
+    );
+  },
+);
+SwitchRoot.displayName = "SwitchRoot";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface SwitchControlProps extends SwitchmarkVariantProps, SwitchPrimitive.ControlProps {}
+
+export const SwitchControl = withControlProvider<HTMLDivElement, SwitchControlProps>(
+  SwitchPrimitive.Control,
+  "root",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface SwitchThumbProps extends SwitchPrimitive.ThumbProps {}
+
+export const SwitchThumb = withControlContext<HTMLDivElement, SwitchThumbProps>(
+  SwitchPrimitive.Thumb,
+  "thumb",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface SwitchLabelProps extends PrimitiveProps, React.HTMLAttributes<HTMLSpanElement> {}
+
+export const SwitchLabel = withContext<HTMLSpanElement, SwitchLabelProps>(
+  withStateProps(Primitive.span),
+  "label",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface SwitchHiddenInputProps extends SwitchPrimitive.HiddenInputProps {}
+
+export const SwitchHiddenInput = SwitchPrimitive.HiddenInput;

package/src/components/Switch/index.ts

@@ -0,0 +1,14 @@
+export {
+  SwitchControl,
+  SwitchHiddenInput,
+  SwitchLabel,
+  SwitchRoot,
+  SwitchThumb,
+  type SwitchControlProps,
+  type SwitchHiddenInputProps,
+  type SwitchLabelProps,
+  type SwitchRootProps,
+  type SwitchThumbProps,
+} from "./Switch";
+
+export * as Switch from "./Switch.namespace";

package/src/components/Tabs/Tabs.namespace.ts

@@ -0,0 +1,18 @@
+export {
+  TabsContent as Content,
+  TabsIndicator as Indicator,
+  TabsList as List,
+  TabsRoot as Root,
+  TabsCarouselCamera as CarouselCamera,
+  TabsCarousel as Carousel,
+  TabsTrigger as Trigger,
+  type TabsContentProps as ContentProps,
+  type TabsIndicatorProps as IndicatorProps,
+  type TabsListProps as ListProps,
+  type TabsRootProps as RootProps,
+  type TabsCarouselCameraProps as CarouselCameraProps,
+  type TabsCarouselProps as CarouselProps,
+  type TabsTriggerProps as TriggerProps,
+} from "./Tabs";
+
+export { tabsCarouselPreventDrag as carouselPreventDrag } from "@seed-design/react-tabs";

package/src/components/Tabs/Tabs.tsx

@@ -0,0 +1,62 @@
+import { tabs, type TabsVariantProps } from "@seed-design/css/recipes/tabs";
+import { Tabs as TabsPrimitive } from "@seed-design/react-tabs";
+import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
+
+const { withProvider, withContext } = createSlotRecipeContext(tabs);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface TabsRootProps extends TabsVariantProps, TabsPrimitive.RootProps {}
+
+export const TabsRoot = withProvider<HTMLDivElement, TabsRootProps>(TabsPrimitive.Root, "root");
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface TabsListProps extends TabsPrimitive.ListProps {}
+
+export const TabsList = withContext<HTMLDivElement, TabsListProps>(TabsPrimitive.List, "list");
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface TabsTriggerProps extends TabsPrimitive.TriggerProps {}
+
+export const TabsTrigger = withContext<HTMLButtonElement, TabsTriggerProps>(
+  TabsPrimitive.Trigger,
+  "trigger",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface TabsIndicatorProps extends TabsPrimitive.IndicatorProps {}
+
+export const TabsIndicator = withContext<HTMLSpanElement, TabsIndicatorProps>(
+  TabsPrimitive.Indicator,
+  "indicator",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface TabsContentProps extends TabsPrimitive.ContentProps {}
+
+export const TabsContent = withContext<HTMLSpanElement, TabsContentProps>(
+  TabsPrimitive.Content,
+  "content",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface TabsCarouselProps extends TabsPrimitive.CarouselProps {}
+
+export const TabsCarousel = withContext<HTMLDivElement, TabsCarouselProps>(
+  TabsPrimitive.Carousel,
+  "carousel",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface TabsCarouselCameraProps extends TabsPrimitive.CarouselCameraProps {}
+
+export const TabsCarouselCamera = withContext<HTMLDivElement, TabsCarouselCameraProps>(
+  TabsPrimitive.CarouselCamera,
+  "carouselCamera",
+);

package/src/components/Tabs/index.ts

@@ -0,0 +1,20 @@
+export {
+  TabsContent,
+  TabsIndicator,
+  TabsList,
+  TabsRoot,
+  TabsCarouselCamera,
+  TabsCarousel,
+  TabsTrigger,
+  type TabsContentProps,
+  type TabsIndicatorProps,
+  type TabsListProps,
+  type TabsRootProps,
+  type TabsCarouselCameraProps,
+  type TabsCarouselProps,
+  type TabsTriggerProps,
+} from "./Tabs";
+
+export { tabsCarouselPreventDrag } from "@seed-design/react-tabs";
+
+export * as Tabs from "./Tabs.namespace";

package/src/components/TagGroup/TagGroup.namespace.ts

@@ -0,0 +1,8 @@
+export {
+  TagGroupRoot as Root,
+  TagGroupItem as Item,
+  TagGroupItemLabel as ItemLabel,
+  type TagGroupRootProps as RootProps,
+  type TagGroupItemProps as ItemProps,
+  type TagGroupItemLabelProps as ItemLabelProps,
+} from "./TagGroup";

package/src/components/TagGroup/TagGroup.tsx

@@ -0,0 +1,90 @@
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import { tagGroup, type TagGroupVariantProps } from "@seed-design/css/recipes/tag-group";
+import {
+  tagGroupItem,
+  type TagGroupItemVariantProps,
+} from "@seed-design/css/recipes/tag-group-item";
+import { forwardRef, Children, Fragment } from "react";
+import clsx from "clsx";
+import { splitMultipleVariantsProps } from "../../utils/splitMultipleVariantsProps";
+import { useStyleProps, type StyleProps } from "../../utils/styled";
+import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
+
+const { PropsProvider, useProps, withContext, ClassNamesProvider } =
+  createSlotRecipeContext(tagGroupItem);
+
+export interface TagGroupRootProps
+  extends TagGroupVariantProps,
+    TagGroupItemVariantProps,
+    PrimitiveProps,
+    React.HTMLAttributes<HTMLSpanElement> {
+  separator?: React.ReactNode;
+}
+
+export const TagGroupRoot = forwardRef<HTMLSpanElement, TagGroupRootProps>(
+  ({ className, children, separator = " · ", ...props }, ref) => {
+    const [{ tagGroup: tagGroupVariantProps, tagGroupItem: tagGroupItemVariantProps }, otherProps] =
+      splitMultipleVariantsProps(props, { tagGroup, tagGroupItem });
+    const classNames = tagGroup(tagGroupVariantProps);
+
+    return (
+      <PropsProvider value={tagGroupItemVariantProps}>
+        <Primitive.span ref={ref} className={clsx(classNames.root, className)} {...otherProps}>
+          {Children.toArray(children)
+            // putting something other than TagGroupItem in TagGroupRoot is not a good idea,
+            // but we shouldn't throw an error for it either
+            // thus .filter(React.isValidElement) is too strict here
+            .filter(Boolean)
+            .map((child, index) => (
+              // biome-ignore lint/suspicious/noArrayIndexKey: those fragments won't change order
+              <Fragment key={index}>
+                {index > 0 && (
+                  <Primitive.span aria-hidden className={classNames.separator}>
+                    {separator}
+                  </Primitive.span>
+                )}
+                {child}
+              </Fragment>
+            ))}
+        </Primitive.span>
+      </PropsProvider>
+    );
+  },
+);
+
+export interface TagGroupItemProps
+  extends TagGroupItemVariantProps,
+    Pick<StyleProps, "flexShrink">,
+    PrimitiveProps,
+    React.HTMLAttributes<HTMLSpanElement> {}
+
+export const TagGroupItem = forwardRef<HTMLSpanElement, TagGroupItemProps>(
+  ({ className, ...props }, ref) => {
+    const parentVariantProps = useProps();
+
+    const [variantProps, otherProps] = tagGroupItem.splitVariantProps(props);
+    const classNames = tagGroupItem({ ...parentVariantProps, ...variantProps });
+
+    const { style, restProps } = useStyleProps(otherProps);
+
+    return (
+      <ClassNamesProvider value={classNames}>
+        <Primitive.span
+          ref={ref}
+          style={style}
+          className={clsx(classNames.root, className)}
+          {...restProps}
+        />
+      </ClassNamesProvider>
+    );
+  },
+);
+
+export interface TagGroupItemLabelProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLSpanElement> {}
+
+export const TagGroupItemLabel = withContext<HTMLSpanElement, TagGroupItemLabelProps>(
+  Primitive.span,
+  "label",
+);

package/src/components/TagGroup/index.ts

@@ -0,0 +1,10 @@
+export {
+  TagGroupRoot,
+  TagGroupItem,
+  TagGroupItemLabel,
+  type TagGroupRootProps,
+  type TagGroupItemProps,
+  type TagGroupItemLabelProps,
+} from "./TagGroup";
+
+export * as TagGroup from "./TagGroup.namespace";

package/src/components/Text/Text.tsx

@@ -0,0 +1,169 @@
+import { text, type TextVariantProps } from "@seed-design/css/recipes/text";
+import {
+  vars,
+  type FontSize,
+  type FontWeight,
+  type LineHeight,
+  type ScopedColorFg,
+  type ScopedColorPalette,
+} from "@seed-design/css/vars";
+import clsx from "clsx";
+import type * as React from "react";
+import { forwardRef, useMemo } from "react";
+import type * as CSS from "csstype";
+
+function handleColor(color: string | undefined) {
+  if (!color) {
+    return undefined;
+  }
+  const [type, value] = color.split(".");
+  // @ts-expect-error
+  return vars.$color[type]?.[value] ?? color;
+}
+
+function handleFontWeight(fontWeight: string | undefined) {
+  if (!fontWeight) {
+    return undefined;
+  }
+  // @ts-expect-error
+  return vars.$fontWeight[fontWeight] ?? undefined;
+}
+
+function handleFontSize(size: string | undefined) {
+  if (!size) {
+    return undefined;
+  }
+  // @ts-expect-error
+  return vars.$fontSize[size] ?? size;
+}
+
+function handleLineHeight(lineHeight: string | undefined) {
+  if (!lineHeight) {
+    return undefined;
+  }
+  // @ts-expect-error
+  return vars.$lineHeight[lineHeight] ?? lineHeight;
+}
+
+export interface TextProps
+  extends Omit<TextVariantProps, "maxLines">,
+    React.HTMLAttributes<HTMLSpanElement> {
+  /**
+   * The element to render as
+   * @default "span"
+   */
+  as?: "dt" | "dd" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "strong" | "legend";
+
+  /**
+   * The color of the text.
+   */
+  color?: ScopedColorFg | ScopedColorPalette | (string & {});
+
+  /**
+   * The font size of the text. Partially overrides the textStyle.
+   */
+  fontSize?: FontSize | (string & {});
+
+  /**
+   * The line height of the text. Partially overrides the textStyle.
+   */
+  lineHeight?: LineHeight | (string & {});
+
+  /**
+   * The font weight of the text. Partially overrides the textStyle.
+   */
+  fontWeight?: FontWeight;
+
+  /**
+   * The maximum number of lines to display. If the text overflows, it will be truncated.
+   */
+  maxLines?: number;
+
+  /**
+   * The alignment of the text.
+   */
+  align?: Extract<CSS.Property.TextAlign, "left" | "center" | "right">;
+
+  /**
+   * The user-select behavior of the text.
+   */
+  userSelect?: Extract<CSS.Property.UserSelect, "none" | "text" | "auto">;
+
+  /**
+   * The white-space behavior of the text.
+   */
+  whiteSpace?: Extract<
+    CSS.Property.WhiteSpace,
+    "normal" | "nowrap" | "pre" | "pre-wrap" | "pre-line" | "break-spaces"
+  >;
+}
+
+function mapMaxLines(maxLines: number | undefined): "none" | "single" | "multi" {
+  if (maxLines === undefined) {
+    return "none";
+  }
+  if (maxLines === 1) {
+    return "single";
+  }
+  return "multi";
+}
+
+export const Text = forwardRef<HTMLSpanElement, TextProps>(
+  (
+    {
+      as,
+      color,
+      textStyle,
+      fontSize,
+      lineHeight,
+      fontWeight,
+      maxLines,
+      textDecorationLine,
+      align,
+      userSelect,
+      whiteSpace,
+      children,
+      className,
+      style,
+      ...otherProps
+    },
+    ref,
+  ) => {
+    const Comp = as || "span";
+    const textClassName = useMemo(
+      () =>
+        text({
+          textStyle,
+          textDecorationLine,
+          maxLines: mapMaxLines(maxLines),
+        }),
+      [textStyle, textDecorationLine, maxLines],
+    );
+
+    return (
+      <Comp
+        // @ts-expect-error: We might need overloading for ref types, not a big deal for now.
+        ref={ref}
+        className={clsx(textClassName, className)}
+        style={
+          {
+            "--seed-max-lines": maxLines,
+            "--seed-text-color": handleColor(color),
+            "--seed-font-size": handleFontSize(fontSize),
+            "--seed-line-height": handleLineHeight(lineHeight ?? fontSize),
+            "--seed-font-weight": handleFontWeight(fontWeight),
+            "--seed-text-align": align,
+            "--seed-user-select": userSelect,
+            "--seed-white-space": whiteSpace,
+            ...style,
+          } as React.CSSProperties
+        }
+        {...otherProps}
+      >
+        {children}
+      </Comp>
+    );
+  },
+);
+
+Text.displayName = "Text";

package/src/components/Text/index.ts

@@ -0,0 +1 @@
+export * from "./Text";

package/src/components/TextField/TextField.namespace.ts

@@ -0,0 +1,16 @@
+export {
+  TextFieldRoot as Root,
+  TextFieldInput as Input,
+  TextFieldTextarea as Textarea,
+  TextFieldPrefixIcon as PrefixIcon,
+  TextFieldPrefixText as PrefixText,
+  TextFieldSuffixIcon as SuffixIcon,
+  TextFieldSuffixText as SuffixText,
+  type TextFieldRootProps as RootProps,
+  type TextFieldInputProps as InputProps,
+  type TextFieldTextareaProps as TextareaProps,
+  type TextFieldPrefixIconProps as PrefixIconProps,
+  type TextFieldPrefixTextProps as PrefixTextProps,
+  type TextFieldSuffixIconProps as SuffixIconProps,
+  type TextFieldSuffixTextProps as SuffixTextProps,
+} from "./TextField";