@seed-design/react 2.5.1 → 3.0.0

package/src/components/AttachmentInput/index.ts

@@ -54,3 +54,13 @@ export {
 } from "./AttachmentInputTrigger";
 
 export * as AttachmentInput from "./AttachmentInput.namespace";
+
+export {
+  useFileUploadContext as useAttachmentInputContext,
+  type UseFileUploadContext as AttachmentInputContextValue,
+} from "@seed-design/react-file-upload";
+
+export type {
+  FileEntry as AttachmentInputFileEntry,
+  FileStatusDetails as AttachmentInputFileStatusDetails,
+} from "@seed-design/react-file-upload";

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

@@ -0,0 +1,10 @@
+export {
+  BadgeRoot as Root,
+  BadgePrefix as Prefix,
+  BadgeLabel as Label,
+  BadgeAction as Action,
+  type BadgeRootProps as RootProps,
+  type BadgePrefixProps as PrefixProps,
+  type BadgeLabelProps as LabelProps,
+  type BadgeActionProps as ActionProps,
+} from "./Badge";

package/src/components/Badge/Badge.test.tsx

@@ -0,0 +1,56 @@
+import { badge } from "@seed-design/css/recipes/badge";
+import { SCALE_FEEDBACK_CLASS_NAME } from "@seed-design/css/scale-feedback";
+import { render } from "@testing-library/react";
+import { describe, expect, it } from "bun:test";
+import { BadgeAction, BadgeLabel, BadgePrefix, BadgeRoot } from "./Badge";
+
+describe("Badge", () => {
+  it("applies root and label classes", () => {
+    const classNames = badge();
+    const { container } = render(
+      <BadgeRoot>
+        <BadgeLabel>New</BadgeLabel>
+      </BadgeRoot>,
+    );
+
+    expect(container.firstElementChild).toHaveClass(classNames.root);
+    expect(container.querySelector("span span")).toHaveClass(classNames.label);
+  });
+
+  it("renders prefix without an action", () => {
+    const classNames = badge();
+    const { container } = render(
+      <BadgeRoot>
+        <BadgePrefix>New</BadgePrefix>
+      </BadgeRoot>,
+    );
+
+    expect(container.querySelector("span span")).toHaveClass(classNames.prefix);
+  });
+
+  it("renders action without a prefix", () => {
+    const classNames = badge();
+    const { getByRole } = render(
+      <BadgeRoot>
+        <BadgeAction aria-label="Dismiss" />
+      </BadgeRoot>,
+    );
+
+    const action = getByRole("button", { name: "Dismiss" });
+    expect(action).toHaveClass(classNames.action, SCALE_FEEDBACK_CLASS_NAME);
+    expect(action).toHaveAttribute("type", "button");
+  });
+
+  it("renders a prefix and action together", () => {
+    const classNames = badge();
+    const { getByRole, getByText } = render(
+      <BadgeRoot>
+        <BadgePrefix>New</BadgePrefix>
+        <BadgeAction aria-label="Details" />
+      </BadgeRoot>,
+    );
+
+    expect(getByText("New")).toHaveClass(classNames.prefix);
+    expect(getByRole("button", { name: "Details" })).toHaveClass(classNames.action);
+  });
+});

package/src/components/Badge/Badge.tsx

@@ -1,26 +1,97 @@
+"use client";
+
+import { useComposedRefs } from "@radix-ui/react-compose-refs";
+import { badge, type BadgeSlotName, type BadgeVariantProps } from "@seed-design/css/recipes/badge";
 import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
-import { badge, type BadgeVariantProps } from "@seed-design/css/recipes/badge";
-import type * as React from "react";
-import { forwardRef } from "react";
+import { useScaleFeedback } from "@seed-design/react-scale-feedback";
 import clsx from "clsx";
+import * as React from "react";
+
+type BadgeClassNames = Record<BadgeSlotName, string>;
+
+interface BadgeSlotContextValue {
+  classNames: BadgeClassNames;
+}
+
+const BadgeSlotContext = React.createContext<BadgeSlotContextValue | null>(null);
+
+function useBadgeSlotContext() {
+  const context = React.useContext(BadgeSlotContext);
+
+  if (!context) {
+    throw new Error("Badge slots must be rendered within Badge.Root.");
+  }
+
+  return context;
+}
 
 ////////////////////////////////////////////////////////////////////////////////////
 
-export interface BadgeProps
+export interface BadgeRootProps
   extends BadgeVariantProps,
     PrimitiveProps,
     React.HTMLAttributes<HTMLSpanElement> {}
 
-export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(
-  ({ className, children, ...props }, ref) => {
+export const BadgeRoot = React.forwardRef<HTMLSpanElement, BadgeRootProps>(
+  ({ className, ...props }, ref) => {
     const [variantProps, restProps] = badge.splitVariantProps(props);
-    const { root, label } = badge(variantProps);
+    const classNames = badge(variantProps);
+    const contextValue: BadgeSlotContextValue = { classNames };
+
+    return (
+      <BadgeSlotContext.Provider value={contextValue}>
+        <Primitive.span ref={ref} className={clsx(classNames.root, className)} {...restProps} />
+      </BadgeSlotContext.Provider>
+    );
+  },
+);
+BadgeRoot.displayName = "Badge.Root";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface BadgePrefixProps extends PrimitiveProps, React.HTMLAttributes<HTMLSpanElement> {}
+
+export const BadgePrefix = React.forwardRef<HTMLSpanElement, BadgePrefixProps>(
+  ({ className, ...props }, ref) => {
+    const { classNames } = useBadgeSlotContext();
+
+    return <Primitive.span ref={ref} className={clsx(classNames.prefix, className)} {...props} />;
+  },
+);
+BadgePrefix.displayName = "Badge.Prefix";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface BadgeLabelProps extends PrimitiveProps, React.HTMLAttributes<HTMLSpanElement> {}
+
+export const BadgeLabel = React.forwardRef<HTMLSpanElement, BadgeLabelProps>(
+  ({ className, ...props }, ref) => {
+    const { classNames } = useBadgeSlotContext();
+
+    return <Primitive.span ref={ref} className={clsx(classNames.label, className)} {...props} />;
+  },
+);
+BadgeLabel.displayName = "Badge.Label";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface BadgeActionProps
+  extends PrimitiveProps,
+    React.ButtonHTMLAttributes<HTMLButtonElement> {}
+
+export const BadgeAction = React.forwardRef<HTMLButtonElement, BadgeActionProps>(
+  ({ className, ...props }, ref) => {
+    const { classNames } = useBadgeSlotContext();
+    const { scaleFeedbackRef, scaleFeedbackClassName } = useScaleFeedback();
 
     return (
-      <Primitive.span className={clsx(root, className)} {...restProps} ref={ref}>
-        <Primitive.span className={label}>{children}</Primitive.span>
-      </Primitive.span>
+      <Primitive.button
+        ref={useComposedRefs(scaleFeedbackRef, ref)}
+        type="button"
+        className={clsx(classNames.action, scaleFeedbackClassName, className)}
+        {...props}
+      />
     );
   },
 );
-Badge.displayName = "Badge";
+BadgeAction.displayName = "Badge.Action";

package/src/components/Badge/index.ts

@@ -1 +1,12 @@
-export { Badge, type BadgeProps } from "./Badge";
+export {
+  BadgeRoot,
+  BadgePrefix,
+  BadgeLabel,
+  BadgeAction,
+  type BadgeRootProps,
+  type BadgePrefixProps,
+  type BadgeLabelProps,
+  type BadgeActionProps,
+} from "./Badge";
+
+export * as Badge from "./Badge.namespace";

package/src/components/Box/Box.test.tsx

@@ -0,0 +1,88 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "bun:test";
+import { Box } from "./Box";
+
+describe("Box safeArea", () => {
+  it("resolves pl and pr to the inline safe area insets", () => {
+    render(<Box data-testid="box" pl="safeArea" pr="safeArea" />);
+    const { style } = screen.getByTestId("box");
+
+    expect(style.getPropertyValue("--seed-box-padding-left-base")).toBe(
+      "var(--seed-safe-area-left)",
+    );
+    expect(style.getPropertyValue("--seed-box-padding-right-base")).toBe(
+      "var(--seed-safe-area-right)",
+    );
+  });
+
+  it("keeps resolving other pl and pr values as dimensions", () => {
+    render(<Box data-testid="box" pl="spacingX.globalGutter" pr="x4" />);
+    const { style } = screen.getByTestId("box");
+
+    expect(style.getPropertyValue("--seed-box-padding-left-base")).toBe(
+      "var(--seed-dimension-spacing-x-global-gutter)",
+    );
+    expect(style.getPropertyValue("--seed-box-padding-right-base")).toBe(
+      "var(--seed-dimension-x4)",
+    );
+  });
+
+  it("resolves safeArea per breakpoint", () => {
+    render(<Box data-testid="box" pl={{ base: "safeArea", md: "x4" }} />);
+    const { style } = screen.getByTestId("box");
+
+    expect(style.getPropertyValue("--seed-box-padding-left-base")).toBe(
+      "var(--seed-safe-area-left)",
+    );
+    expect(style.getPropertyValue("--seed-box-padding-left-md")).toBe("var(--seed-dimension-x4)");
+  });
+
+  it("prefers paddingLeft over pl", () => {
+    render(<Box data-testid="box" paddingLeft="safeArea" pl="x4" />);
+    const { style } = screen.getByTestId("box");
+
+    expect(style.getPropertyValue("--seed-box-padding-left-base")).toBe(
+      "var(--seed-safe-area-left)",
+    );
+  });
+
+  it("resolves directional bleed to the safe area inset and its negative margin", () => {
+    render(<Box data-testid="box" bleedLeft="safeArea" bleedTop="safeArea" />);
+    const { style } = screen.getByTestId("box");
+
+    expect(style.getPropertyValue("--seed-box-bleed-left-base")).toBe("var(--seed-safe-area-left)");
+    expect(style.getPropertyValue("--seed-box-margin-left-base")).toBe(
+      "calc(var(--seed-safe-area-left) * -1)",
+    );
+    expect(style.getPropertyValue("--seed-box-bleed-top-base")).toBe("var(--seed-safe-area-top)");
+    expect(style.getPropertyValue("--seed-box-margin-top-base")).toBe(
+      "calc(var(--seed-safe-area-top) * -1)",
+    );
+  });
+
+  it("resolves bleedX and bleedY to each side's own inset", () => {
+    render(<Box data-testid="box" bleedX="safeArea" bleedY="safeArea" />);
+    const { style } = screen.getByTestId("box");
+
+    expect(style.getPropertyValue("--seed-box-bleed-left-base")).toBe("var(--seed-safe-area-left)");
+    expect(style.getPropertyValue("--seed-box-bleed-right-base")).toBe(
+      "var(--seed-safe-area-right)",
+    );
+    expect(style.getPropertyValue("--seed-box-margin-right-base")).toBe(
+      "calc(var(--seed-safe-area-right) * -1)",
+    );
+    expect(style.getPropertyValue("--seed-box-bleed-top-base")).toBe("var(--seed-safe-area-top)");
+    expect(style.getPropertyValue("--seed-box-bleed-bottom-base")).toBe(
+      "var(--seed-safe-area-bottom)",
+    );
+  });
+
+  it("lets a directional bleed override bleed", () => {
+    render(<Box data-testid="box" bleed="safeArea" bleedBottom="x4" />);
+    const { style } = screen.getByTestId("box");
+
+    expect(style.getPropertyValue("--seed-box-bleed-top-base")).toBe("var(--seed-safe-area-top)");
+    expect(style.getPropertyValue("--seed-box-bleed-left-base")).toBe("var(--seed-safe-area-left)");
+    expect(style.getPropertyValue("--seed-box-bleed-bottom-base")).toBe("var(--seed-dimension-x4)");
+  });
+});

package/src/components/Checkbox/Checkbox.namespace.ts

@@ -11,4 +11,5 @@ export {
   type CheckboxIndicatorProps as IndicatorProps,
   type CheckboxLabelProps as LabelProps,
   type CheckboxRootProps as RootProps,
+  type CheckboxRootPrimitiveProps as RootPrimitiveProps,
 } from "./Checkbox";

package/src/components/Checkbox/Checkbox.tsx

@@ -41,6 +41,8 @@ export interface CheckboxRootProps
     CheckmarkVariantProps,
     CheckboxPrimitive.RootProps {}
 
+export interface CheckboxRootPrimitiveProps extends CheckboxPrimitive.RootProps {}
+
 export const CheckboxRoot = Object.assign(
   forwardRef<HTMLLabelElement, CheckboxRootProps>(({ className, ...props }, ref) => {
     const [{ checkbox: checkboxVariantProps, checkmark: checkmarkVariantProps }, otherProps] =
@@ -68,7 +70,7 @@ export const CheckboxRoot = Object.assign(
 ////////////////////////////////////////////////////////////////////////////////////
 
 /**
- * CheckboxControl combines Checkbox.Primitive with checkmark.root styling
+ * CheckboxControl combines Checkbox.Root.Primitive with checkmark.root styling
  * This enables standalone usage of Checkbox.Control with variants
  */
 

package/src/components/Checkbox/index.ts

@@ -11,6 +11,7 @@ export {
   type CheckboxIndicatorProps,
   type CheckboxLabelProps,
   type CheckboxRootProps,
+  type CheckboxRootPrimitiveProps,
 } from "./Checkbox";
 
 export * as Checkbox from "./Checkbox.namespace";

package/src/components/Chip/Chip.namespace.ts

@@ -1,10 +1,16 @@
 export {
-  ChipRoot as Root,
+  ChipToggle as Toggle,
+  ChipRadioRoot as RadioRoot,
+  ChipRadioItem as RadioItem,
+  type ChipToggleProps as ToggleProps,
+  type ChipRadioRootProps as RadioRootProps,
+  type ChipRadioItemProps as RadioItemProps,
+  ChipButton as Button,
   ChipLabel as Label,
   ChipPrefixIcon as PrefixIcon,
   ChipPrefixAvatar as PrefixAvatar,
   ChipSuffixIcon as SuffixIcon,
-  type ChipRootProps as RootProps,
+  type ChipButtonProps as ButtonProps,
   type ChipLabelProps as LabelProps,
   type ChipPrefixIconProps as PrefixIconProps,
   type ChipPrefixAvatarProps as PrefixAvatarProps,

package/src/components/Chip/Chip.tsx

@@ -5,8 +5,11 @@ import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
 import { withScaleFeedback } from "../../utils/withScaleFeedback";
 import { withIconRequired } from "../Icon/Icon";
 import { createWithStateProps } from "../../utils/createWithStateProps";
-import { useCheckboxContext } from "@seed-design/react-checkbox";
-import { useRadioGroupItemContext } from "@seed-design/react-radio-group";
+import { Checkbox as CheckboxPrimitive, useCheckboxContext } from "@seed-design/react-checkbox";
+import {
+  RadioGroup as RadioGroupPrimitive,
+  useRadioGroupItemContext,
+} from "@seed-design/react-radio-group";
 
 const { withProvider, withContext } = createSlotRecipeContext(chip);
 const withStateProps = createWithStateProps([
@@ -16,16 +19,40 @@ const withStateProps = createWithStateProps([
 
 ////////////////////////////////////////////////////////////////////////////////////
 
-export interface ChipRootProps
+export interface ChipButtonProps
   extends PrimitiveProps,
     ChipVariantProps,
     React.ButtonHTMLAttributes<HTMLButtonElement> {}
 
-export const ChipRoot = withIconRequired(
-  withScaleFeedback(withProvider<HTMLButtonElement, ChipRootProps>(Primitive.button, "root")),
-  (props: ChipRootProps) => props.layout === "iconOnly",
+export const ChipButton = withIconRequired(
+  withScaleFeedback(withProvider<HTMLButtonElement, ChipButtonProps>(Primitive.button, "root")),
+  (props: ChipButtonProps) => props.layout === "iconOnly",
 );
-ChipRoot.displayName = "Chip.Root";
+ChipButton.displayName = "Chip.Button";
+
+export interface ChipToggleProps extends ChipVariantProps, CheckboxPrimitive.RootProps {}
+
+export const ChipToggle = withIconRequired(
+  withScaleFeedback(
+    withProvider<HTMLLabelElement, ChipToggleProps>(CheckboxPrimitive.Root, "root"),
+  ),
+  (props: ChipToggleProps) => props.layout === "iconOnly",
+);
+ChipToggle.displayName = "Chip.Toggle";
+
+export interface ChipRadioRootProps extends RadioGroupPrimitive.RootProps {}
+
+export const ChipRadioRoot = RadioGroupPrimitive.Root;
+
+export interface ChipRadioItemProps extends ChipVariantProps, RadioGroupPrimitive.ItemProps {}
+
+export const ChipRadioItem = withIconRequired(
+  withScaleFeedback(
+    withProvider<HTMLLabelElement, ChipRadioItemProps>(RadioGroupPrimitive.Item, "root"),
+  ),
+  (props: ChipRadioItemProps) => props.layout === "iconOnly",
+);
+ChipRadioItem.displayName = "Chip.RadioItem";
 
 ////////////////////////////////////////////////////////////////////////////////////
 

package/src/components/Chip/index.ts

@@ -1,10 +1,16 @@
 export {
-  ChipRoot,
+  ChipToggle,
+  ChipRadioRoot,
+  ChipRadioItem,
+  type ChipToggleProps,
+  type ChipRadioRootProps,
+  type ChipRadioItemProps,
+  ChipButton,
   ChipLabel,
   ChipPrefixIcon,
   ChipPrefixAvatar,
   ChipSuffixIcon,
-  type ChipRootProps,
+  type ChipButtonProps,
   type ChipLabelProps,
   type ChipPrefixIconProps,
   type ChipPrefixAvatarProps,

package/src/components/DatePicker/DatePicker.namespace.ts

@@ -0,0 +1,14 @@
+export {
+  DatePickerRoot as Root,
+  DatePickerHeader as Header,
+  DatePickerCalendar as Calendar,
+  DatePickerWheel as Wheel,
+  type DatePickerRootProps as RootProps,
+  type DatePickerHeaderProps as HeaderProps,
+  type DatePickerCalendarProps as CalendarProps,
+  type DatePickerWheelProps as WheelProps,
+  type DatePickerWheelRenderProps as WheelRenderProps,
+  type DatePickerWheelColumn as WheelColumn,
+  type DatePickerCellContentRenderProps as CellContentRenderProps,
+  type DatePickerActions as Actions,
+} from "./DatePicker";