@seed-design/react 0.0.1-alpha-20250210081704

package/src/components/ActionSheet/index.ts

@@ -0,0 +1,30 @@
+export {
+  ActionSheetBackdrop,
+  ActionSheetPositioner,
+  ActionSheetContent,
+  ActionSheetHeader,
+  ActionSheetRoot,
+  ActionSheetTitle,
+  ActionSheetDescription,
+  ActionSheetTrigger,
+  ActionSheetList,
+  ActionSheetItem,
+  ActionSheetItemLabel,
+  ActionSheetCloseButton,
+  ActionSheetCloseButtonLabel,
+  type ActionSheetBackdropProps,
+  type ActionSheetPositionerProps,
+  type ActionSheetContentProps,
+  type ActionSheetHeaderProps,
+  type ActionSheetRootProps,
+  type ActionSheetTitleProps,
+  type ActionSheetDescriptionProps,
+  type ActionSheetTriggerProps,
+  type ActionSheetListProps,
+  type ActionSheetItemProps,
+  type ActionSheetItemLabelProps,
+  type ActionSheetCloseButtonProps,
+  type ActionSheetCloseButtonLabelProps,
+} from "./ActionSheet";
+
+export * as ActionSheet from "./ActionSheet.namespace";

package/src/components/Avatar/Avatar.namespace.ts

@@ -0,0 +1,12 @@
+export {
+  AvatarBadge as Badge,
+  AvatarFallback as Fallback,
+  AvatarImage as Image,
+  AvatarRoot as Root,
+  AvatarStack as Stack,
+  type AvatarBadgeProps as BadgeProps,
+  type AvatarFallbackProps as FallbackProps,
+  type AvatarImageProps as ImageProps,
+  type AvatarRootProps as RootProps,
+  type AvatarStackProps as StackProps,
+} from "./Avatar";

package/src/components/Avatar/Avatar.tsx

@@ -0,0 +1,69 @@
+import { Avatar as AvatarPrimitive } from "@seed-design/react-avatar";
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import { avatar, type AvatarVariantProps } from "@seed-design/recipe/avatar";
+import { avatarStack, type AvatarStackVariantProps } from "@seed-design/recipe/avatarStack";
+import clsx from "clsx";
+import * as React from "react";
+import { useMemo } from "react";
+import { createStyleContext } from "../../utils/createStyleContext";
+
+const { PropsProvider, withProvider, withContext } = createStyleContext(avatar);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface AvatarRootProps extends AvatarVariantProps, AvatarPrimitive.RootProps {}
+
+export const AvatarRoot = withProvider<HTMLDivElement, AvatarRootProps>(
+  AvatarPrimitive.Root,
+  "root",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface AvatarImageProps extends AvatarPrimitive.ImageProps {}
+
+export const AvatarImage = withContext<HTMLImageElement, AvatarImageProps>(
+  AvatarPrimitive.Image,
+  "image",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface AvatarFallbackProps extends AvatarPrimitive.FallbackProps {}
+
+export const AvatarFallback = withContext<HTMLDivElement, AvatarFallbackProps>(
+  AvatarPrimitive.Fallback,
+  "fallback",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface AvatarBadgeProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {}
+
+export const AvatarBadge = withContext<HTMLDivElement, AvatarBadgeProps>(Primitive.div, "badge");
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface AvatarStackProps
+  extends AvatarStackVariantProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+// TODO: implement stacking order
+export const AvatarStack = React.forwardRef<HTMLDivElement, AvatarStackProps>(
+  ({ className, children, size, ...otherProps }, ref) => {
+    const classNames = avatarStack({ size });
+    const avatars = React.Children.toArray(children);
+    return (
+      <PropsProvider value={useMemo(() => ({ size }), [size])}>
+        <div ref={ref} className={clsx(classNames.root, className)} {...otherProps}>
+          {avatars.map((avatar, index) => (
+            // biome-ignore lint/suspicious/noArrayIndexKey: There is no unique key for each child
+            <div key={index} className={classNames.item}>
+              {avatar}
+            </div>
+          ))}
+        </div>
+      </PropsProvider>
+    );
+  },
+);

package/src/components/Avatar/index.ts

@@ -0,0 +1,14 @@
+export {
+  AvatarBadge,
+  AvatarFallback,
+  AvatarImage,
+  AvatarRoot,
+  AvatarStack,
+  type AvatarBadgeProps,
+  type AvatarFallbackProps,
+  type AvatarImageProps,
+  type AvatarRootProps,
+  type AvatarStackProps,
+} from "./Avatar";
+
+export * as Avatar from "./Avatar.namespace";

package/src/components/Badge/Badge.namespace.ts

@@ -0,0 +1,6 @@
+export {
+  BadgeLabel as Label,
+  BadgeRoot as Root,
+  type BadgeLabelProps as LabelProps,
+  type BadgeRootProps as RootProps,
+} from "./Badge";

package/src/components/Badge/Badge.tsx

@@ -0,0 +1,21 @@
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import { badge, type BadgeVariantProps } from "@seed-design/recipe/badge";
+import type * as React from "react";
+import { createStyleContext } from "../../utils/createStyleContext";
+
+const { withProvider, withContext } = createStyleContext(badge);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface BadgeRootProps
+  extends BadgeVariantProps,
+    PrimitiveProps,
+    React.HTMLAttributes<HTMLSpanElement> {}
+
+export const BadgeRoot = withProvider<HTMLSpanElement, BadgeRootProps>(Primitive.span, "root");
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface BadgeLabelProps extends PrimitiveProps, React.HTMLAttributes<HTMLSpanElement> {}
+
+export const BadgeLabel = withContext<HTMLSpanElement, BadgeLabelProps>(Primitive.span, "label");

package/src/components/Badge/index.ts

@@ -0,0 +1,8 @@
+export {
+  BadgeLabel,
+  BadgeRoot,
+  type BadgeLabelProps,
+  type BadgeRootProps,
+} from "./Badge";
+
+export * as Badge from "./Badge.namespace";

package/src/components/BottomSheet/BottomSheet.namespace.ts

@@ -0,0 +1,26 @@
+export {
+  BottomSheetBackdrop as Backdrop,
+  BottomSheetBody as Body,
+  BottomSheetContent as Content,
+  BottomSheetDescription as Description,
+  BottomSheetFooter as Footer,
+  BottomSheetHeader as Header,
+  BottomSheetPositioner as Positioner,
+  BottomSheetRoot as Root,
+  BottomSheetTitle as Title,
+  BottomSheetTrigger as Trigger,
+  BottomSheetCloseButton as CloseButton,
+  BottomSheetCloseIcon as CloseIcon,
+  type BottomSheetBackdropProps as BackdropProps,
+  type BottomSheetBodyProps as BodyProps,
+  type BottomSheetContentProps as ContentProps,
+  type BottomSheetDescriptionProps as DescriptionProps,
+  type BottomSheetFooterProps as FooterProps,
+  type BottomSheetHeaderProps as HeaderProps,
+  type BottomSheetPositionerProps as PositionerProps,
+  type BottomSheetRootProps as RootProps,
+  type BottomSheetTitleProps as TitleProps,
+  type BottomSheetTriggerProps as TriggerProps,
+  type BottomSheetCloseButtonProps as CloseButtonProps,
+  type BottomSheetCloseIconProps as CloseIconProps,
+} from "./BottomSheet";

package/src/components/BottomSheet/BottomSheet.tsx

@@ -0,0 +1,123 @@
+import { Dialog as DialogPrimitive, useDialogContext } from "@seed-design/react-dialog";
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import { bottomSheet, type BottomSheetVariantProps } from "@seed-design/recipe/bottomSheet";
+import { createStyleContext } from "../../utils/createStyleContext";
+import { createWithStateProps } from "../../utils/createWithStateProps";
+import { Box, type BoxProps } from "../Box";
+import { Icon, type IconProps } from "../private/Icon";
+
+const { withRootProvider, withContext } = createStyleContext(bottomSheet);
+const withStateProps = createWithStateProps([useDialogContext]);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface BottomSheetRootProps extends BottomSheetVariantProps, DialogPrimitive.RootProps {}
+
+export const BottomSheetRoot = withRootProvider<BottomSheetRootProps>(DialogPrimitive.Root, {
+  defaultProps: {
+    lazyMount: true,
+    unmountOnExit: true,
+  },
+});
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface BottomSheetTriggerProps extends DialogPrimitive.TriggerProps {}
+
+export const BottomSheetTrigger = DialogPrimitive.Trigger;
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface BottomSheetPositionerProps extends DialogPrimitive.PositionerProps {}
+
+export const BottomSheetPositioner = withContext<HTMLDivElement, BottomSheetPositionerProps>(
+  DialogPrimitive.Positioner,
+  "positioner",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface BottomSheetBackdropProps extends DialogPrimitive.BackdropProps {}
+
+export const BottomSheetBackdrop = withContext<HTMLDivElement, BottomSheetBackdropProps>(
+  DialogPrimitive.Backdrop,
+  "backdrop",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface BottomSheetContentProps extends DialogPrimitive.ContentProps {}
+
+export const BottomSheetContent = withContext<HTMLDivElement, BottomSheetContentProps>(
+  DialogPrimitive.Content,
+  "content",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface BottomSheetHeaderProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const BottomSheetHeader = withContext<HTMLDivElement, BottomSheetHeaderProps>(
+  withStateProps(Primitive.div),
+  "header",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface BottomSheetTitleProps extends DialogPrimitive.TitleProps {}
+
+export const BottomSheetTitle = withContext<HTMLHeadingElement, BottomSheetTitleProps>(
+  withStateProps(Primitive.h2),
+  "title",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface BottomSheetDescriptionProps extends DialogPrimitive.DescriptionProps {}
+
+export const BottomSheetDescription = withContext<
+  HTMLParagraphElement,
+  BottomSheetDescriptionProps
+>(withStateProps(Primitive.p), "description");
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface BottomSheetBodyProps extends BoxProps {}
+
+export const BottomSheetBody = withContext<HTMLDivElement, BottomSheetBodyProps>(
+  withStateProps(Box),
+  "body",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface BottomSheetFooterProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const BottomSheetFooter = withContext<HTMLDivElement, BottomSheetFooterProps>(
+  withStateProps(Primitive.div),
+  "footer",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface BottomSheetCloseButtonProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLButtonElement> {}
+
+export const BottomSheetCloseButton = withContext<HTMLButtonElement, BottomSheetCloseButtonProps>(
+  withStateProps(Primitive.button),
+  "closeButton",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface BottomSheetCloseIconProps extends IconProps {}
+
+export const BottomSheetCloseIcon = withContext<SVGSVGElement, BottomSheetCloseIconProps>(
+  Icon,
+  "closeIcon",
+);

package/src/components/BottomSheet/index.ts

@@ -0,0 +1,28 @@
+export {
+  BottomSheetBackdrop,
+  BottomSheetBody,
+  BottomSheetContent,
+  BottomSheetDescription,
+  BottomSheetFooter,
+  BottomSheetHeader,
+  BottomSheetPositioner,
+  BottomSheetRoot,
+  BottomSheetTitle,
+  BottomSheetTrigger,
+  BottomSheetCloseButton,
+  BottomSheetCloseIcon,
+  type BottomSheetBackdropProps,
+  type BottomSheetBodyProps,
+  type BottomSheetContentProps,
+  type BottomSheetDescriptionProps,
+  type BottomSheetFooterProps,
+  type BottomSheetHeaderProps,
+  type BottomSheetPositionerProps,
+  type BottomSheetRootProps,
+  type BottomSheetTitleProps,
+  type BottomSheetTriggerProps,
+  type BottomSheetCloseButtonProps,
+  type BottomSheetCloseIconProps,
+} from "./BottomSheet";
+
+export * as BottomSheet from "./BottomSheet.namespace";

package/src/components/Box/Box.tsx

@@ -0,0 +1,303 @@
+import type {
+  ColorBg,
+  ColorFg,
+  ColorPalette,
+  ColorStroke,
+  Dimension,
+  Radius,
+  SpacingX,
+  SpacingY,
+} from "@seed-design/vars";
+import { vars } from "@seed-design/vars";
+import clsx from "clsx";
+import * as React from "react";
+
+function handleColor(color: string | undefined) {
+  if (!color) {
+    return undefined;
+  }
+  const [type, value] = color.split(".");
+  // @ts-ignore
+  return vars.$color[type][value] ?? undefined;
+}
+
+function handleDimension(dimension: string | undefined) {
+  if (!dimension) {
+    return undefined;
+  }
+  const [type, value] = dimension.split(".");
+  // @ts-ignore
+  return vars.$dimension[dimension] ?? vars.$dimension[type][value] ?? undefined;
+}
+
+function handleSize(size: string | undefined) {
+  if (!size) {
+    return undefined;
+  }
+  if (size === "full") {
+    return "100%";
+  }
+  // @ts-ignore
+  return vars.$dimension[size] ?? size;
+}
+
+function handleRadius(radius: string | undefined) {
+  if (!radius) {
+    return undefined;
+  }
+  // @ts-ignore
+  return vars.$radius[radius] ?? undefined;
+}
+
+function handleDisplay(
+  display: "block" | "flex" | "inlineFlex" | "inline" | "inlineBlock" | "none" | undefined,
+) {
+  if (!display) {
+    return undefined;
+  }
+
+  return {
+    block: "block",
+    flex: "flex",
+    inlineFlex: "inline-flex",
+    inline: "inline",
+    inlineBlock: "inline-block",
+    none: "none",
+  }[display];
+}
+
+function handleFlexDirection(flexDirection: string | undefined) {
+  if (!flexDirection) {
+    return undefined;
+  }
+
+  return {
+    row: "row",
+    column: "column",
+    rowReverse: "row-reverse",
+    columnReverse: "column-reverse",
+  }[flexDirection];
+}
+
+function handleJustifyContent(justifyContent: string | undefined) {
+  if (!justifyContent) {
+    return undefined;
+  }
+
+  return {
+    flexStart: "flex-start",
+    flexEnd: "flex-end",
+    center: "center",
+    spaceBetween: "space-between",
+    spaceAround: "space-around",
+  }[justifyContent];
+}
+
+function handleAlignItems(alignItems: string | undefined) {
+  if (!alignItems) {
+    return undefined;
+  }
+
+  return {
+    flexStart: "flex-start",
+    flexEnd: "flex-end",
+    center: "center",
+    stretch: "stretch",
+  }[alignItems];
+}
+
+export interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {
+  as?: React.ElementType;
+
+  background?: `bg.${ColorBg}` | `palette.${ColorPalette}`;
+
+  color?: `fg.${ColorFg}` | `palette.${ColorPalette}`;
+
+  borderColor?: `stroke.${ColorStroke}` | `palette.${ColorPalette}`;
+
+  borderWidth?: 0 | 1 | (number & {});
+
+  borderTopWidth?: 0 | 1 | (number & {});
+
+  borderRightWidth?: 0 | 1 | (number & {});
+
+  borderBottomWidth?: 0 | 1 | (number & {});
+
+  borderLeftWidth?: 0 | 1 | (number & {});
+
+  borderRadius?: Radius;
+
+  borderTopLeftRadius?: Radius;
+
+  borderTopRightRadius?: Radius;
+
+  borderBottomRightRadius?: Radius;
+
+  borderBottomLeftRadius?: Radius;
+
+  width?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | "full" | (string & {});
+
+  minWidth?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | "full" | (string & {});
+
+  maxWidth?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | "full" | (string & {});
+
+  height?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | "full" | (string & {});
+
+  minHeight?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | "full" | (string & {});
+
+  maxHeight?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | "full" | (string & {});
+
+  top?: 0;
+
+  left?: 0;
+
+  right?: 0;
+
+  bottom?: 0;
+
+  padding?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}`;
+
+  paddingX?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}`;
+
+  paddingY?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}`;
+
+  paddingTop?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}`;
+
+  paddingRight?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}`;
+
+  paddingBottom?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}`;
+
+  paddingLeft?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}`;
+
+  display?: "block" | "flex" | "inlineFlex" | "inline" | "inlineBlock" | "none";
+
+  position?: "relative" | "absolute" | "fixed" | "sticky";
+
+  overflowX?: "visible" | "hidden" | "scroll" | "auto";
+
+  overflowY?: "visible" | "hidden" | "scroll" | "auto";
+
+  flexGrow?: 0 | 1 | (number & {});
+
+  flexShrink?: 0 | (number & {});
+
+  // Flex
+
+  flexDirection?: "row" | "column" | "rowReverse" | "columnReverse";
+
+  flexWrap?: "wrap" | "nowrap";
+
+  justifyContent?: "flexStart" | "flexEnd" | "center" | "spaceBetween" | "spaceAround";
+
+  alignItems?: "flexStart" | "flexEnd" | "center" | "stretch";
+
+  alignContent?: "flexStart" | "flexEnd" | "center" | "stretch";
+
+  alignSelf?: "flexStart" | "flexEnd" | "center" | "stretch";
+
+  gap?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}`;
+}
+
+export const Box = React.forwardRef<HTMLDivElement, BoxProps>((props, ref) => {
+  const {
+    as: Comp = "div",
+    background,
+    color,
+    borderColor,
+    borderWidth,
+    borderTopWidth,
+    borderRightWidth,
+    borderBottomWidth,
+    borderLeftWidth,
+    borderRadius,
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    borderBottomRightRadius,
+    borderBottomLeftRadius,
+    width,
+    minWidth,
+    maxWidth,
+    height,
+    minHeight,
+    maxHeight,
+    padding,
+    paddingX,
+    paddingY,
+    paddingTop,
+    paddingRight,
+    paddingBottom,
+    paddingLeft,
+    display,
+    position,
+    overflowX,
+    overflowY,
+    flexGrow,
+    flexShrink,
+    flexDirection,
+    flexWrap,
+    justifyContent,
+    alignItems,
+    alignContent,
+    alignSelf,
+    gap,
+    className,
+    style,
+    ...nativeProps
+  } = props;
+
+  return (
+    <Comp
+      ref={ref}
+      className={clsx("seed-box", className)}
+      style={
+        {
+          "--seed-box-background": handleColor(background),
+          "--seed-box-color": handleColor(color),
+          "--seed-box-border-color": handleColor(borderColor),
+          "--seed-box-border-width": borderWidth !== undefined ? `${borderWidth}px` : undefined,
+          "--seed-box-border-top-width":
+            borderTopWidth !== undefined ? `${borderTopWidth}px` : undefined,
+          "--seed-box-border-right-width":
+            borderRightWidth !== undefined ? `${borderRightWidth}px` : undefined,
+          "--seed-box-border-bottom-width":
+            borderBottomWidth !== undefined ? `${borderBottomWidth}px` : undefined,
+          "--seed-box-border-left-width":
+            borderLeftWidth !== undefined ? `${borderLeftWidth}px` : undefined,
+          "--seed-box-border-radius": handleRadius(borderRadius),
+          "--seed-box-border-top-left-radius": handleRadius(borderTopLeftRadius),
+          "--seed-box-border-top-right-radius": handleRadius(borderTopRightRadius),
+          "--seed-box-border-bottom-right-radius": handleRadius(borderBottomRightRadius),
+          "--seed-box-border-bottom-left-radius": handleRadius(borderBottomLeftRadius),
+          "--seed-box-width": handleSize(width),
+          "--seed-box-min-width": handleSize(minWidth),
+          "--seed-box-max-width": handleSize(maxWidth),
+          "--seed-box-height": handleSize(height),
+          "--seed-box-min-height": handleSize(minHeight),
+          "--seed-box-max-height": handleSize(maxHeight),
+          "--seed-box-padding": handleDimension(padding),
+          "--seed-box-padding-x": handleDimension(paddingX),
+          "--seed-box-padding-y": handleDimension(paddingY),
+          "--seed-box-padding-top": handleDimension(paddingTop),
+          "--seed-box-padding-right": handleDimension(paddingRight),
+          "--seed-box-padding-bottom": handleDimension(paddingBottom),
+          "--seed-box-padding-left": handleDimension(paddingLeft),
+          "--seed-box-gap": handleDimension(gap),
+          "--seed-box-display": handleDisplay(display),
+          "--seed-box-position": position,
+          "--seed-box-overflow-x": overflowX,
+          "--seed-box-overflow-y": overflowY,
+          "--seed-box-flex-grow": flexGrow,
+          "--seed-box-flex-shrink": flexShrink,
+          "--seed-box-flex-direction": handleFlexDirection(flexDirection),
+          "--seed-box-flex-wrap": flexWrap,
+          "--seed-box-justify-content": handleJustifyContent(justifyContent),
+          "--seed-box-align-items": handleAlignItems(alignItems),
+          "--seed-box-align-content": handleAlignItems(alignContent),
+          "--seed-box-align-self": handleAlignItems(alignSelf),
+          ...style,
+        } as React.CSSProperties
+      }
+      {...nativeProps}
+    />
+  );
+});

package/src/components/Box/index.ts

@@ -0,0 +1 @@
+export { Box, type BoxProps } from "./Box";