@seed-design/react 0.0.0-alpha-20260324091316

package/src/components/Grid/Grid.tsx

@@ -0,0 +1,86 @@
+import { mergeProps } from "@seed-design/dom-utils";
+import * as React from "react";
+import type { ResponsiveValue } from "../../types/responsive";
+import { resolveResponsive } from "../../utils/styled";
+import { Box, type BoxProps } from "../Box/Box";
+
+export interface GridProps extends Omit<BoxProps, "display"> {
+  /**
+   * @default "grid"
+   */
+  display?: ResponsiveValue<"grid" | "none">;
+
+  /**
+   * Shorthand for `alignItems`.
+   */
+  align?: BoxProps["alignItems"];
+
+  /**
+   * Shorthand for `justifyContent`.
+   */
+  justify?: BoxProps["justifyContent"];
+
+  justifyItems?: "flex-start" | "flex-end" | "center" | "stretch";
+
+  /**
+   * Shorthand for `gridTemplateColumns`.
+   * If number, `repeat({columns}, minmax(0, 1fr))` is applied.
+   */
+  columns?: ResponsiveValue<number | string>;
+
+  /**
+   * Shorthand for `gridTemplateRows`.
+   * If number, `repeat({rows}, minmax(0, 1fr))` is applied.
+   */
+  rows?: ResponsiveValue<number | string>;
+
+  // NOTE: grid-template-areas not currently supported here.
+  // since grid-area is a shorthand of grid-column/row (in a grid item),
+  // if we bind grid-area CSS variable together, it causes conflict.
+
+  /**
+   * Shorthand for `gridAutoFlow`.
+   */
+  autoFlow?: "row" | "column" | "row dense" | "column dense";
+
+  /**
+   * Shorthand for `gridAutoColumns`.
+   */
+  autoColumns?: string;
+
+  /**
+   * Shorthand for `gridAutoRows`.
+   */
+  autoRows?: string;
+}
+
+function handleGridTemplate(v: number | string): string {
+  return typeof v === "number" ? `repeat(${v}, minmax(0, 1fr))` : v;
+}
+
+export const Grid = React.forwardRef<HTMLDivElement, GridProps>((props, ref) => {
+  const { align, justify, justifyItems, columns, rows, autoFlow, autoColumns, autoRows, ...rest } =
+    props;
+
+  return (
+    <Box
+      ref={ref}
+      display="grid"
+      alignItems={align}
+      justifyContent={justify}
+      {...mergeProps(rest, {
+        className: "seed-grid",
+        style: {
+          ...(columns !== undefined &&
+            resolveResponsive("--seed-grid-columns", columns, handleGridTemplate)),
+          ...(rows !== undefined &&
+            resolveResponsive("--seed-grid-rows", rows, handleGridTemplate)),
+          "--seed-grid-auto-flow": autoFlow,
+          "--seed-grid-auto-columns": autoColumns,
+          "--seed-grid-auto-rows": autoRows,
+          "--seed-grid-justify-items": justifyItems,
+        } as React.CSSProperties,
+      })}
+    />
+  );
+});

package/src/components/Grid/index.ts

@@ -0,0 +1 @@
+export { Grid, type GridProps } from "./Grid";

package/src/components/GridItem/GridItem.tsx

@@ -0,0 +1,70 @@
+import * as React from "react";
+import { Box, type BoxProps } from "../Box/Box";
+
+export interface GridItemProps extends Omit<BoxProps, "gridColumn" | "gridRow" | "gridArea"> {
+  /**
+   * If true, the component will render its children directly without a wrapper element.
+   * @default false
+   */
+  asChild?: boolean;
+
+  /**
+   * Number of columns to span, or "full" for full width (1 / -1).
+   */
+  colSpan?: number | "full";
+
+  /**
+   * Number of rows to span, or "full" for full height (1 / -1).
+   */
+  rowSpan?: number | "full";
+
+  /**
+   * Starting column
+   */
+  colStart?: number;
+
+  /**
+   * Ending column.
+   */
+  colEnd?: number;
+
+  /**
+   * Starting row
+   */
+  rowStart?: number;
+
+  /**
+   * Ending row.
+   */
+  rowEnd?: number;
+
+  // NOTE: grid-area is not currently supported here: see Grid.tsx
+}
+
+export const GridItem = React.forwardRef<HTMLDivElement, GridItemProps>((props, ref) => {
+  const { asChild = false, colSpan, colStart, colEnd, rowSpan, rowStart, rowEnd, ...rest } = props;
+
+  const gridColumn = getGridLine(colSpan, colStart, colEnd);
+  const gridRow = getGridLine(rowSpan, rowStart, rowEnd);
+
+  return <Box ref={ref} asChild={asChild} gridColumn={gridColumn} gridRow={gridRow} {...rest} />;
+});
+GridItem.displayName = "GridItem";
+
+function getGridLine(
+  span: GridItemProps["colSpan"] & GridItemProps["rowSpan"],
+  start: GridItemProps["colStart"] & GridItemProps["rowStart"],
+  end: GridItemProps["colEnd"] & GridItemProps["rowEnd"],
+): (BoxProps["gridRow"] & BoxProps["gridColumn"]) | undefined {
+  if (span === "full") return "1 / -1";
+
+  if (start !== undefined && end !== undefined) return `${start} / ${end}`;
+
+  if (start !== undefined) return `${start}`;
+
+  if (end !== undefined) return `auto / ${end}`;
+
+  if (span !== undefined) return `span ${span}`;
+
+  return undefined;
+}

package/src/components/GridItem/index.ts

@@ -0,0 +1 @@
+export { GridItem, type GridItemProps } from "./GridItem";

package/src/components/HelpBubble/HelpBubble.namespace.ts

@@ -0,0 +1,26 @@
+export {
+  HelpBubbleAnchor as Anchor,
+  HelpBubbleArrow as Arrow,
+  HelpBubbleArrowTip as ArrowTip,
+  HelpBubbleBody as Body,
+  HelpBubbleCloseButton as CloseButton,
+  HelpBubbleContent as Content,
+  HelpBubbleDescription as Description,
+  HelpBubblePositioner as Positioner,
+  HelpBubblePositionerPortal as PositionerPortal,
+  HelpBubbleRoot as Root,
+  HelpBubbleTitle as Title,
+  HelpBubbleTrigger as Trigger,
+  type HelpBubbleAnchorProps as AnchorProps,
+  type HelpBubbleArrowProps as ArrowProps,
+  type HelpBubbleArrowTipProps as ArrowTipProps,
+  type HelpBubbleBodyProps as BodyProps,
+  type HelpBubbleCloseButtonProps as CloseButtonProps,
+  type HelpBubbleContentProps as ContentProps,
+  type HelpBubbleDescriptionProps as DescriptionProps,
+  type HelpBubblePositionerProps as PositionerProps,
+  type HelpBubblePositionerPortalProps as PositionerPortalProps,
+  type HelpBubbleRootProps as RootProps,
+  type HelpBubbleTitleProps as TitleProps,
+  type HelpBubbleTriggerProps as TriggerProps,
+} from "./HelpBubble";

package/src/components/HelpBubble/HelpBubble.tsx

@@ -0,0 +1,173 @@
+import { Popover as PopoverPrimitive, usePopoverContext } from "@seed-design/react-popover";
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import { helpBubble, type HelpBubbleVariantProps } from "@seed-design/css/recipes/help-bubble";
+import { forwardRef } from "react";
+import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
+import { createWithStateProps } from "../../utils/createWithStateProps";
+import { withStyleProps, type StyleProps } from "../../utils/styled";
+import { composeRefs } from "@radix-ui/react-compose-refs";
+import clsx from "clsx";
+
+const { withRootProvider, withContext, useClassNames } = createSlotRecipeContext(helpBubble);
+const withStateProps = createWithStateProps([usePopoverContext]);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface HelpBubbleRootProps extends HelpBubbleVariantProps, PopoverPrimitive.RootProps {
+  /**
+   * @default "top"
+   */
+  placement?: PopoverPrimitive.RootProps["placement"];
+  /**
+   * @default 4
+   */
+  gutter?: PopoverPrimitive.RootProps["gutter"];
+  /**
+   * @default 16
+   */
+  overflowPadding?: PopoverPrimitive.RootProps["overflowPadding"];
+  /**
+   * @default 14
+   */
+  arrowPadding?: PopoverPrimitive.RootProps["arrowPadding"];
+}
+
+export const HelpBubbleRoot = withRootProvider<HelpBubbleRootProps>(PopoverPrimitive.Root, {
+  defaultProps: {
+    placement: "top",
+    gutter: 4, // TODO: get value from rootage spec
+    overflowPadding: 16,
+    arrowPadding: 14,
+  },
+});
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface HelpBubbleAnchorProps extends PopoverPrimitive.AnchorProps {}
+
+export const HelpBubbleAnchor = PopoverPrimitive.Anchor;
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface HelpBubbleTriggerProps extends PopoverPrimitive.TriggerProps {}
+
+export const HelpBubbleTrigger = PopoverPrimitive.Trigger;
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface HelpBubblePositionerProps extends PopoverPrimitive.PositionerProps {}
+
+export const HelpBubblePositioner = withContext<HTMLDivElement, HelpBubblePositionerProps>(
+  PopoverPrimitive.Positioner,
+  "positioner",
+);
+
+export interface HelpBubblePositionerPortalProps extends PopoverPrimitive.PositionerPortalProps {}
+
+export const HelpBubblePositionerPortal = withContext<
+  HTMLDivElement,
+  HelpBubblePositionerPortalProps
+>(PopoverPrimitive.PositionerPortal, "positioner");
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface HelpBubbleContentProps
+  extends PrimitiveProps,
+    Pick<StyleProps, "maxWidth">,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const HelpBubbleContent = withContext<HTMLDivElement, HelpBubbleContentProps>(
+  withStyleProps(withStateProps(Primitive.div)),
+  "content",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface HelpBubbleArrowProps extends PopoverPrimitive.ArrowProps {}
+
+export const HelpBubbleArrow = withContext<HTMLDivElement, HelpBubbleArrowProps>(
+  PopoverPrimitive.Arrow,
+  "arrow",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface HelpBubbleArrowTipProps extends React.SVGProps<SVGSVGElement> {
+  /**
+   * radius of the arrow tip
+   * @default 2
+   */
+  tipRadius?: number;
+}
+
+export const HelpBubbleArrowTip = forwardRef<SVGSVGElement, HelpBubbleArrowTipProps>(
+  (props, ref) => {
+    const {
+      tipRadius = 2, // TODO: get value from rootage spec
+      className,
+      ...otherProps
+    } = props;
+    const api = usePopoverContext();
+
+    const classNames = useClassNames();
+
+    const width = api.rects.arrowTip?.width || 0;
+    const height = api.rects.arrowTip?.height || 0;
+
+    const pathData = `M0,0
+      H${width}
+      L${width / 2 + tipRadius},${height - tipRadius}
+      Q${width / 2},${height} ${width / 2 - tipRadius},${height - tipRadius}
+      Z`;
+
+    // TODO: mergeProps with api.stateProps
+    return (
+      <svg
+        aria-hidden="true"
+        viewBox={`0 0 ${width} ${height}`}
+        ref={composeRefs(api.refs.arrowTip, ref)}
+        className={clsx(classNames.arrowTip, className)}
+        {...otherProps}
+      >
+        <path stroke="none" d={pathData} />
+      </svg>
+    );
+  },
+);
+HelpBubbleArrowTip.displayName = "HelpBubbleArrowTip";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface HelpBubbleCloseButtonProps extends PopoverPrimitive.CloseButtonProps {}
+
+export const HelpBubbleCloseButton = withContext<HTMLButtonElement, HelpBubbleCloseButtonProps>(
+  PopoverPrimitive.CloseButton,
+  "closeButton",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface HelpBubbleBodyProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {}
+
+export const HelpBubbleBody = withContext<HTMLDivElement, HelpBubbleBodyProps>(
+  withStateProps(Primitive.div),
+  "body",
+);
+
+export interface HelpBubbleTitleProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLSpanElement> {}
+
+export const HelpBubbleTitle = withContext<HTMLSpanElement, HelpBubbleTitleProps>(
+  withStateProps(Primitive.span),
+  "title",
+);
+
+export interface HelpBubbleDescriptionProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const HelpBubbleDescription = withContext<HTMLDivElement, HelpBubbleDescriptionProps>(
+  withStateProps(Primitive.div),
+  "description",
+);

package/src/components/HelpBubble/index.ts

@@ -0,0 +1,28 @@
+export {
+  HelpBubbleAnchor,
+  HelpBubbleArrow,
+  HelpBubbleArrowTip,
+  HelpBubbleBody,
+  HelpBubbleCloseButton,
+  HelpBubbleContent,
+  HelpBubbleDescription,
+  HelpBubblePositioner,
+  HelpBubblePositionerPortal,
+  HelpBubbleRoot,
+  HelpBubbleTitle,
+  HelpBubbleTrigger,
+  type HelpBubbleAnchorProps,
+  type HelpBubbleArrowProps,
+  type HelpBubbleArrowTipProps,
+  type HelpBubbleBodyProps,
+  type HelpBubbleCloseButtonProps,
+  type HelpBubbleContentProps,
+  type HelpBubbleDescriptionProps,
+  type HelpBubblePositionerProps,
+  type HelpBubblePositionerPortalProps,
+  type HelpBubbleRootProps,
+  type HelpBubbleTitleProps,
+  type HelpBubbleTriggerProps,
+} from "./HelpBubble";
+
+export * as HelpBubble from "./HelpBubble.namespace";

package/src/components/Icon/Icon.tsx

@@ -0,0 +1,167 @@
+import { Slot } from "@radix-ui/react-slot";
+import { useLayoutEffect } from "@radix-ui/react-use-layout-effect";
+import { createContext, forwardRef, useCallback, useContext, useMemo, useRef } from "react";
+import type { UnwrapResponsive } from "../../types/responsive";
+import { handleColor, handleDimension, type StyleProps } from "../../utils/styled";
+
+export interface PrefixIconProps {
+  svg: React.ReactNode;
+}
+
+export const PrefixIcon = forwardRef<SVGSVGElement, PrefixIconProps>(
+  ({ svg, ...otherProps }, ref) => {
+    return (
+      <Slot
+        ref={ref as React.ForwardedRef<HTMLElement>}
+        aria-hidden
+        className="seed-prefix-icon"
+        {...otherProps}
+      >
+        {svg}
+      </Slot>
+    );
+  },
+);
+
+export interface SuffixIconProps {
+  svg: React.ReactNode;
+}
+
+export const SuffixIcon = forwardRef<SVGSVGElement, SuffixIconProps>(
+  ({ svg, ...otherProps }, ref) => {
+    return (
+      <Slot
+        ref={ref as React.ForwardedRef<HTMLElement>}
+        aria-hidden
+        className="seed-suffix-icon"
+        {...otherProps}
+      >
+        {svg}
+      </Slot>
+    );
+  },
+);
+
+const IconContext = createContext<{ register: () => void; unregister: () => void } | null>(null);
+
+export const IconRequired = ({
+  children,
+  enabled,
+}: {
+  children: React.ReactNode;
+  enabled: boolean;
+}) => {
+  const registeredRef = useRef(false);
+  const parentContext = useContext(IconContext);
+
+  const register = useCallback(() => {
+    // @ts-ignore
+    if (process.env.NODE_ENV !== "production") {
+      if (registeredRef.current) {
+        throw new Error(
+          "Icon-only Component must render only one <Icon /> under children. Check if you are rendering multiple <Icon />.",
+        );
+      }
+    }
+    registeredRef.current = true;
+  }, []);
+
+  const unregister = useCallback(() => {
+    registeredRef.current = false;
+  }, []);
+
+  useLayoutEffect(() => {
+    if (!enabled) {
+      return;
+    }
+    // @ts-ignore
+    if (process.env.NODE_ENV !== "production") {
+      if (parentContext) {
+        throw new Error(
+          "Icon-only Component must not be nested within another Icon-Only. Check if you are using Icon-Only inside another Icon-Only.",
+        );
+      }
+      if (!registeredRef.current) {
+        throw new Error(
+          "Icon-only Component must render <Icon /> as a child. Check if you are using raw svg icon instead of <Icon svg={} />.",
+        );
+      }
+    }
+  }, [parentContext, enabled]);
+
+  const providerValue = useMemo(() => {
+    if (!enabled) {
+      // If not enabled, return parent context if exists
+      if (parentContext) {
+        return parentContext;
+      }
+      // If not enabled and no parent context, return null
+      return null;
+    }
+
+    // If enabled, return register and unregister functions to detect <Icon /> count
+    return { register, unregister };
+  }, [enabled, parentContext, register, unregister]);
+
+  return <IconContext.Provider value={providerValue}>{children}</IconContext.Provider>;
+};
+
+export interface IconProps {
+  svg: React.ReactNode;
+
+  size?: UnwrapResponsive<StyleProps["height"]>;
+
+  color?: StyleProps["color"];
+}
+
+export const Icon = forwardRef<SVGSVGElement, IconProps>(
+  ({ svg, size, color, ...otherProps }, ref) => {
+    const context = useContext(IconContext);
+
+    useLayoutEffect(() => {
+      context?.register();
+      return () => {
+        context?.unregister();
+      };
+    }, [context]);
+
+    const sizeValue = handleDimension(size);
+    const colorValue = handleColor(color);
+
+    return (
+      <Slot
+        ref={ref as React.ForwardedRef<HTMLElement>}
+        aria-hidden
+        className="seed-icon"
+        style={
+          {
+            "--seed-icon-size": sizeValue,
+            "--seed-icon-color": colorValue,
+          } as React.CSSProperties
+        }
+        {...otherProps}
+      >
+        {svg}
+      </Slot>
+    );
+  },
+);
+
+export function withIconRequired<P extends {}, R>(
+  Component: React.ComponentType<P & React.RefAttributes<R>>,
+  enabledPredicate: (props: React.PropsWithoutRef<P>) => boolean,
+) {
+  const Node = forwardRef<R, P>((props, ref) => {
+    const enabled = enabledPredicate(props);
+    return (
+      <IconRequired enabled={enabled}>
+        {/* @ts-ignore */}
+        <Component ref={ref} {...props} />
+      </IconRequired>
+    );
+  });
+
+  Node.displayName = Component.displayName || Component.name;
+
+  return Node;
+}

package/src/components/Icon/index.ts

@@ -0,0 +1,8 @@
+export {
+  Icon,
+  PrefixIcon,
+  SuffixIcon,
+  type IconProps,
+  type PrefixIconProps,
+  type SuffixIconProps,
+} from "./Icon";

package/src/components/IdentityPlaceholder/IdentityPlaceholder.namespace.ts

@@ -0,0 +1,6 @@
+export {
+  IdentityPlaceholderRoot as Root,
+  IdentityPlaceholderImage as Image,
+  type IdentityPlaceholderRootProps as RootProps,
+  type IdentityPlaceholderImageProps as ImageProps,
+} from "./IdentityPlaceholder";

package/src/components/IdentityPlaceholder/IdentityPlaceholder.tsx

@@ -0,0 +1,77 @@
+import {
+  identityPlaceholder,
+  type IdentityPlaceholderVariantProps,
+} from "@seed-design/css/recipes/identity-placeholder";
+import { mergeProps } from "@seed-design/dom-utils";
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import * as React from "react";
+import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
+
+const { ClassNamesProvider, PropsProvider, useClassNames, useProps } =
+  createSlotRecipeContext(identityPlaceholder);
+
+export interface IdentityPlaceholderRootProps
+  extends IdentityPlaceholderVariantProps,
+    PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const IdentityPlaceholderRoot = React.forwardRef<
+  HTMLDivElement,
+  IdentityPlaceholderRootProps
+>((props, ref) => {
+  const [variantProps, restProps] = identityPlaceholder.splitVariantProps(props);
+  const classNames = identityPlaceholder(variantProps);
+
+  return (
+    <PropsProvider value={variantProps}>
+      <ClassNamesProvider value={classNames}>
+        <Primitive.div ref={ref} {...mergeProps({ className: classNames.root }, restProps)} />
+      </ClassNamesProvider>
+    </PropsProvider>
+  );
+});
+IdentityPlaceholderRoot.displayName = "IdentityPlaceholderRoot";
+
+export interface IdentityPlaceholderImageProps extends React.SVGProps<SVGSVGElement> {}
+
+export const IdentityPlaceholderImage = React.forwardRef<
+  SVGSVGElement,
+  IdentityPlaceholderImageProps
+>((props, ref) => {
+  const classNames = useClassNames();
+  const parentProps = useProps();
+
+  switch (parentProps?.identity) {
+    case "business":
+      return (
+        <svg
+          ref={ref}
+          viewBox="0 0 640 640"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          role="img"
+          aria-label="Identity placeholder"
+          {...mergeProps({ className: classNames.image }, props)}
+        >
+          <path d="m512 250-29-73c-7-17-24-29-42-29H200c-18 0-35 12-42 29l-29 73q-3 7 2 14c17 23 42 41 71 41q35-2 59-26 25 24 59 26 35-2 59-26 25 24 59 26c28 0 56-18 72-41 2-3 3-11 2-14M439 340c-28 0-47-12-59-23a86 86 0 0 1-59 23c-28 0-48-12-59-23a86 86 0 0 1-60 23q-33-2-53-17v119c0 27 22 49 49 49h138l107 1c27 0 49-22 49-50V323q-20 15-53 17m-143 72q-1 11-12 12h-18q-11-2-12-12v-19q1-10 12-11h18q11 1 12 11zm91 0q-1 11-11 12h-19q-11-2-12-12v-19q1-10 12-11h19q10 1 11 11z" />
+        </svg>
+      );
+
+    case "person":
+    case undefined:
+      return (
+        <svg
+          ref={ref}
+          viewBox="0 0 640 640"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          role="img"
+          aria-label="Identity placeholder"
+          {...mergeProps({ className: classNames.image }, props)}
+        >
+          <path d="M496 460q4 5 0 11c-42 52-97 81-176 81s-134-29-176-81q-3-5-1-10c33-50 104-74 177-74s144 23 176 73M222 251a98 98 0 0 1 196 0c0 54-44 97-98 97s-98-43-98-97" />
+        </svg>
+      );
+  }
+});
+IdentityPlaceholderImage.displayName = "IdentityPlaceholderImage";

package/src/components/IdentityPlaceholder/index.ts

@@ -0,0 +1,8 @@
+export {
+  IdentityPlaceholderRoot,
+  IdentityPlaceholderImage,
+  type IdentityPlaceholderRootProps,
+  type IdentityPlaceholderImageProps,
+} from "./IdentityPlaceholder";
+
+export * as IdentityPlaceholder from "./IdentityPlaceholder.namespace";