@seed-design/react 0.0.1-alpha-20250210081704

package/src/components/Tabs/Tabs.tsx

@@ -0,0 +1,94 @@
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import {
+  Tabs as TabsPrimitive,
+  useTabsContext,
+  useTabsTriggerContext,
+} from "@seed-design/react-tabs";
+import { tabs, type TabsVariantProps } from "@seed-design/recipe/tabs";
+import { createStyleContext } from "../../utils/createStyleContext";
+import { createWithStateProps } from "../../utils/createWithStateProps";
+import type React from "react";
+
+const { withProvider, withContext } = createStyleContext(tabs);
+const withStateProps = createWithStateProps([useTabsContext, useTabsTriggerContext], {
+  strict: false,
+});
+
+////////////////////////////////////////////////////////////////////////////////////
+
+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 TabsTriggerLabelProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLSpanElement> {}
+
+export const TabsTriggerLabel = withContext<HTMLSpanElement, TabsTriggerLabelProps>(
+  withStateProps(Primitive.span),
+  "triggerLabel",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface TabsTriggerNotificationProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const TabsTriggerNotification = withContext<HTMLDivElement, TabsTriggerNotificationProps>(
+  withStateProps(Primitive.div),
+  "triggerNotification",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+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,22 @@
+export {
+  TabsContent,
+  TabsIndicator,
+  TabsList,
+  TabsRoot,
+  TabsCarouselCamera,
+  TabsCarousel,
+  TabsTrigger,
+  TabsTriggerLabel,
+  TabsTriggerNotification,
+  type TabsContentProps,
+  type TabsIndicatorProps,
+  type TabsListProps,
+  type TabsRootProps,
+  type TabsCarouselCameraProps,
+  type TabsCarouselProps,
+  type TabsTriggerLabelProps,
+  type TabsTriggerNotificationProps,
+  type TabsTriggerProps,
+} from "./Tabs";
+
+export * as Tabs from "./Tabs.namespace";

package/src/components/Text/Text.tsx

@@ -0,0 +1,139 @@
+import { text, type TextVariantProps } from "@seed-design/recipe/text";
+import {
+  vars,
+  type ColorFg,
+  type ColorPalette,
+  type FontSize,
+  type FontWeight,
+  type LineHeight,
+} from "@seed-design/vars";
+import clsx from "clsx";
+import type * as React from "react";
+import { useMemo } 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 handleFontWeight(fontWeight: string | undefined) {
+  if (!fontWeight) {
+    return undefined;
+  }
+  // @ts-ignore
+  return vars.$fontWeight[fontWeight] ?? undefined;
+}
+
+function handleFontSize(size: string | undefined) {
+  if (!size) {
+    return undefined;
+  }
+  // @ts-ignore
+  return vars.$fontSize[size] ?? size;
+}
+
+function handleLineHeight(lineHeight: string | undefined) {
+  if (!lineHeight) {
+    return undefined;
+  }
+  // @ts-ignore
+  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?: `fg.${ColorFg}` | `palette.${ColorPalette}`;
+
+  /**
+   * The font size of the text. Partially overrides the textStyle.
+   */
+  fontSize?: FontSize;
+
+  /**
+   * The line height of the text. Partially overrides the textStyle.
+   */
+  lineHeight?: LineHeight;
+
+  /**
+   * 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?: "left" | "center" | "right";
+}
+
+function mapMaxLines(maxLines: number | undefined): "none" | "single" | "multi" {
+  if (maxLines === undefined) {
+    return "none";
+  }
+  if (maxLines === 1) {
+    return "single";
+  }
+  return "multi";
+}
+
+export const Text = ({
+  as,
+  color,
+  textStyle,
+  fontSize,
+  lineHeight,
+  fontWeight,
+  maxLines,
+  children,
+  className,
+  style,
+  ...otherProps
+}: TextProps) => {
+  const Comp = as || "span";
+  const classNames = useMemo(
+    () =>
+      text({
+        textStyle,
+        maxLines: mapMaxLines(maxLines),
+      }),
+    [textStyle, maxLines],
+  );
+
+  return (
+    <Comp
+      className={clsx(classNames.root, 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": otherProps.align,
+          ...style,
+        } as React.CSSProperties
+      }
+      {...otherProps}
+    >
+      {children}
+    </Comp>
+  );
+};

package/src/components/Text/index.tsx

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

package/src/components/TextButton/TextButton.namespace.ts

@@ -0,0 +1,10 @@
+export {
+  TextButtonLabel as Label,
+  TextButtonPrefixIcon as PrefixIcon,
+  TextButtonRoot as Root,
+  TextButtonSuffixIcon as SuffixIcon,
+  type TextButtonLabelProps as LabelProps,
+  type TextButtonPrefixIconProps as PrefixIconProps,
+  type TextButtonRootProps as RootProps,
+  type TextButtonSuffixIconProps as SuffixIconProps,
+} from "./TextButton";

package/src/components/TextButton/TextButton.tsx

@@ -0,0 +1,41 @@
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import { textButton, type TextButtonVariantProps } from "@seed-design/recipe/textButton";
+import { createStyleContext } from "../../utils/createStyleContext";
+import { Icon, type IconProps } from "../private/Icon";
+
+import type * as React from "react";
+
+const { withProvider, withContext } = createStyleContext(textButton);
+
+export interface TextButtonRootProps
+  extends TextButtonVariantProps,
+    PrimitiveProps,
+    React.ButtonHTMLAttributes<HTMLButtonElement> {}
+
+export const TextButtonRoot = withProvider<HTMLButtonElement, TextButtonRootProps>(
+  Primitive.button,
+  "root",
+);
+
+export interface TextButtonLabelProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLSpanElement> {}
+
+export const TextButtonLabel = withContext<HTMLSpanElement, TextButtonLabelProps>(
+  Primitive.span,
+  "label",
+);
+
+export interface TextButtonPrefixIconProps extends IconProps {}
+
+export const TextButtonPrefixIcon = withContext<SVGSVGElement, TextButtonPrefixIconProps>(
+  Icon,
+  "prefixIcon",
+);
+
+export interface TextButtonSuffixIconProps extends IconProps {}
+
+export const TextButtonSuffixIcon = withContext<SVGSVGElement, TextButtonSuffixIconProps>(
+  Icon,
+  "suffixIcon",
+);

package/src/components/TextButton/index.ts

@@ -0,0 +1,12 @@
+export {
+  TextButtonLabel,
+  TextButtonPrefixIcon,
+  TextButtonRoot,
+  TextButtonSuffixIcon,
+  type TextButtonLabelProps,
+  type TextButtonPrefixIconProps,
+  type TextButtonRootProps,
+  type TextButtonSuffixIconProps,
+} from "./TextButton";
+
+export * as TextButton from "./TextButton.namespace";

package/src/components/TextField/TextField.namespace.tsx

@@ -0,0 +1,38 @@
+export {
+  TextFieldCharacterCount as CharacterCount,
+  TextFieldCharacterCountArea as CharacterCountArea,
+  TextFieldDescription as Description,
+  TextFieldErrorIcon as ErrorIcon,
+  TextFieldErrorMessage as ErrorMessage,
+  TextFieldField as Field,
+  TextFieldFooter as Footer,
+  TextFieldHeader as Header,
+  TextFieldIndicator as Indicator,
+  TextFieldInput as Input,
+  TextFieldTextarea as Textarea,
+  TextFieldLabel as Label,
+  TextFieldMaxCharacterCount as MaxCharacterCount,
+  TextFieldPrefixIcon as PrefixIcon,
+  TextFieldPrefixText as PrefixText,
+  TextFieldRoot as Root,
+  TextFieldSuffixIcon as SuffixIcon,
+  TextFieldSuffixText as SuffixText,
+  type TextFieldCharacterCountAreaProps as CharacterCountAreaProps,
+  type TextFieldCharacterCountProps as CharacterCountProps,
+  type TextFieldDescriptionProps as DescriptionProps,
+  type TextFieldErrorIconProps as ErrorIconProps,
+  type TextFieldErrorMessageProps as ErrorMessageProps,
+  type TextFieldFieldProps as FieldProps,
+  type TextFieldFooterProps as FooterProps,
+  type TextFieldHeaderProps as HeaderProps,
+  type TextFieldIndicatorProps as IndicatorProps,
+  type TextFieldInputProps as InputProps,
+  type TextFieldTextareaProps as TextareaProps,
+  type TextFieldLabelProps as LabelProps,
+  type TextFieldMaxCharacterCountProps as MaxCharacterCountProps,
+  type TextFieldPrefixIconProps as PrefixIconProps,
+  type TextFieldPrefixTextProps as PrefixTextProps,
+  type TextFieldRootProps as RootProps,
+  type TextFieldSuffixIconProps as SuffixIconProps,
+  type TextFieldSuffixTextProps as SuffixTextProps,
+} from "./TextField";

package/src/components/TextField/TextField.tsx

@@ -0,0 +1,258 @@
+import { useLayoutEffect } from "@radix-ui/react-use-layout-effect";
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import { TextField, useTextFieldContext } from "@seed-design/react-text-field";
+import { textField, type TextFieldVariantProps } from "@seed-design/recipe/textField";
+import clsx from "clsx";
+import type * as React from "react";
+import { forwardRef, useCallback, useRef } from "react";
+import { createStyleContext } from "../../utils/createStyleContext";
+import { createWithStateProps } from "../../utils/createWithStateProps";
+import { Icon, type IconProps } from "../private/Icon";
+import { composeRefs } from "@radix-ui/react-compose-refs";
+
+const { withProvider, withContext, useClassNames } = createStyleContext(textField);
+const withStateProps = createWithStateProps([useTextFieldContext]);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface TextFieldRootProps extends TextFieldVariantProps, TextField.RootProps {}
+
+export const TextFieldRoot = withProvider<HTMLDivElement, TextFieldRootProps>(
+  TextField.Root,
+  "root",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface TextFieldHeaderProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const TextFieldHeader = withContext<HTMLDivElement, TextFieldHeaderProps>(
+  withStateProps(Primitive.div),
+  "header",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface TextFieldLabelProps extends TextField.LabelProps {}
+
+export const TextFieldLabel = withContext<HTMLLabelElement, TextFieldLabelProps>(
+  TextField.Label,
+  "label",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface TextFieldIndicatorProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLSpanElement> {}
+
+export const TextFieldIndicator = forwardRef<HTMLSpanElement, TextFieldIndicatorProps>(
+  (props, ref) => {
+    const { className, ...otherProps } = props;
+    const classNames = useClassNames();
+
+    return (
+      <>
+        <Primitive.span> </Primitive.span>
+        <Primitive.span
+          ref={ref}
+          className={clsx(classNames.indicator, className)}
+          {...otherProps}
+        />
+      </>
+    );
+  },
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface TextFieldFieldProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {}
+
+export const TextFieldField = withContext<HTMLDivElement, TextFieldFieldProps>(
+  withStateProps(Primitive.div),
+  "field",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface TextFieldPrefixIconProps extends IconProps {}
+
+export const TextFieldPrefixIcon = withContext<SVGSVGElement, TextFieldPrefixIconProps>(
+  withStateProps(Icon),
+  "prefixIcon",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface TextFieldPrefixTextProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLSpanElement> {}
+
+export const TextFieldPrefixText = withContext<HTMLSpanElement, TextFieldPrefixTextProps>(
+  withStateProps(Primitive.span),
+  "prefixText",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface TextFieldSuffixIconProps extends IconProps {}
+
+export const TextFieldSuffixIcon = withContext<SVGSVGElement, TextFieldSuffixIconProps>(
+  withStateProps(Icon),
+  "suffixIcon",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface TextFieldSuffixTextProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLSpanElement> {}
+
+export const TextFieldSuffixText = withContext<HTMLSpanElement, TextFieldSuffixTextProps>(
+  withStateProps(Primitive.span),
+  "suffixText",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface TextFieldInputProps extends TextField.InputProps {}
+
+export const TextFieldInput = withContext<HTMLInputElement, TextFieldInputProps>(
+  TextField.Input,
+  "value",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface TextFieldTextareaProps extends TextField.TextareaProps {
+  /**
+   * If true, the textarea will automatically resize based on its content.
+   * @default true
+   */
+  autoresize?: boolean;
+}
+
+export const TextFieldTextarea = forwardRef<HTMLTextAreaElement, TextFieldTextareaProps>(
+  (props, ref) => {
+    const { className, autoresize = true, ...otherProps } = props;
+    const classNames = useClassNames();
+    const { value } = useTextFieldContext();
+
+    // referenced from React Spectrum
+    const inputRef = useRef<HTMLTextAreaElement>(null);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: intended
+    const onHeightChange = useCallback(() => {
+      if (!inputRef.current) return;
+      if (otherProps.style?.height) return;
+      if (!autoresize) return;
+
+      // Quiet textareas always grow based on their text content.
+      // Standard textareas also grow by default, unless an explicit height is set.
+
+      const input = inputRef.current;
+      const prevAlignment = input.style.alignSelf;
+      const prevOverflow = input.style.overflow;
+      // Firefox scroll position is lost when overflow: 'hidden' is applied so we skip applying it.
+      // The measure/applied height is also incorrect/reset if we turn on and off
+      // overflow: hidden in Firefox https://bugzilla.mozilla.org/show_bug.cgi?id=1787062
+      const isFirefox = "MozAppearance" in input.style;
+      if (!isFirefox) {
+        input.style.overflow = "hidden";
+      }
+
+      input.style.alignSelf = "start";
+      input.style.height = "auto";
+
+      // offsetHeight - clientHeight accounts for the border/padding.
+      input.style.height = `${input.scrollHeight + (input.offsetHeight - input.clientHeight)}px`;
+
+      input.style.overflow = prevOverflow;
+      input.style.alignSelf = prevAlignment;
+    }, [inputRef, otherProps.style?.height, autoresize]);
+
+    useLayoutEffect(() => {
+      if (inputRef.current) {
+        onHeightChange();
+      }
+    }, [onHeightChange, value, inputRef]);
+
+    return (
+      <TextField.Textarea
+        ref={composeRefs(inputRef, ref)}
+        {...otherProps}
+        className={clsx(classNames.value, className)}
+      />
+    );
+  },
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface TextFieldFooterProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const TextFieldFooter = withContext<HTMLDivElement, TextFieldFooterProps>(
+  withStateProps(Primitive.div),
+  "footer",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface TextFieldDescriptionProps extends TextField.DescriptionProps {}
+
+export const TextFieldDescription = withContext<HTMLSpanElement, TextFieldDescriptionProps>(
+  TextField.Description,
+  "description",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface TextFieldErrorMessageProps extends TextField.ErrorMessageProps {}
+
+export const TextFieldErrorMessage = withContext<HTMLSpanElement, TextFieldErrorMessageProps>(
+  TextField.ErrorMessage,
+  "errorMessage",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface TextFieldErrorIconProps extends IconProps {}
+
+export const TextFieldErrorIcon = withContext<SVGSVGElement, TextFieldErrorIconProps>(
+  withStateProps(Icon),
+  "errorIcon",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface TextFieldCharacterCountAreaProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const TextFieldCharacterCountArea = withContext<
+  HTMLDivElement,
+  TextFieldCharacterCountAreaProps
+>(withStateProps(Primitive.div), "characterCountArea");
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface TextFieldCharacterCountProps extends TextField.GraphemeCountProps {}
+
+export const TextFieldCharacterCount = withContext<HTMLDivElement, TextFieldCharacterCountProps>(
+  TextField.GraphemeCount,
+  "characterCount",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface TextFieldMaxCharacterCountProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLSpanElement> {}
+
+export const TextFieldMaxCharacterCount = withContext<
+  HTMLSpanElement,
+  TextFieldMaxCharacterCountProps
+>(withStateProps(Primitive.span), "maxCharacterCount");

package/src/components/TextField/index.tsx

@@ -0,0 +1,40 @@
+export {
+  TextFieldCharacterCount,
+  TextFieldCharacterCountArea,
+  TextFieldDescription,
+  TextFieldErrorIcon,
+  TextFieldErrorMessage,
+  TextFieldField,
+  TextFieldFooter,
+  TextFieldHeader,
+  TextFieldIndicator,
+  TextFieldInput,
+  TextFieldTextarea,
+  TextFieldLabel,
+  TextFieldMaxCharacterCount,
+  TextFieldPrefixIcon,
+  TextFieldPrefixText,
+  TextFieldRoot,
+  TextFieldSuffixIcon,
+  TextFieldSuffixText,
+  type TextFieldCharacterCountAreaProps,
+  type TextFieldCharacterCountProps,
+  type TextFieldDescriptionProps,
+  type TextFieldErrorIconProps,
+  type TextFieldErrorMessageProps,
+  type TextFieldFieldProps,
+  type TextFieldFooterProps,
+  type TextFieldHeaderProps,
+  type TextFieldIndicatorProps,
+  type TextFieldInputProps,
+  type TextFieldTextareaProps,
+  type TextFieldLabelProps,
+  type TextFieldMaxCharacterCountProps,
+  type TextFieldPrefixIconProps,
+  type TextFieldPrefixTextProps,
+  type TextFieldRootProps,
+  type TextFieldSuffixIconProps,
+  type TextFieldSuffixTextProps,
+} from "./TextField";
+
+export * as TextField from "./TextField.namespace";