@seed-design/react 2.6.0 → 3.0.0

package/lib/utils/withContentScale.cjs

@@ -0,0 +1,30 @@
+"use client";
+const require_runtime = require("../_virtual/_rolldown/runtime.cjs");
+let clsx = require("clsx");
+clsx = require_runtime.__toESM(clsx);
+let react = require("react");
+react = require_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let _radix_ui_react_compose_refs = require("@radix-ui/react-compose-refs");
+let _radix_ui_react_slot = require("@radix-ui/react-slot");
+let _seed_design_react_scale_feedback = require("@seed-design/react-scale-feedback");
+//#region src/utils/withContentScale.tsx
+function withContentScale(Component) {
+	const Pressable = react.forwardRef(({ children, ...props }, ref) => {
+		const { scaleFeedbackRef, scaleFeedbackClassName } = (0, _seed_design_react_scale_feedback.useScaleFeedback)();
+		const composedRef = (0, _radix_ui_react_compose_refs.useComposedRefs)(scaleFeedbackRef, ref);
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
+			...props,
+			ref: composedRef,
+			className: (0, clsx.default)(scaleFeedbackClassName, props.className),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_slot.Slottable, {
+				child: children,
+				children: (content) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_seed_design_react_scale_feedback.ContentScale, { children: content })
+			})
+		});
+	});
+	Pressable.displayName = Component.displayName;
+	return Pressable;
+}
+//#endregion
+exports.withContentScale = withContentScale;

package/lib/utils/withContentScale.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+/**
+ * Wraps a component so its element opts into scale feedback and renders its
+ * children inside a `ContentScale` box, for slots whose recipe publishes
+ * `--seed-content-scale` instead of scaling the element itself.
+ *
+ * The children go through `Slottable`, so the box lands inside whichever element
+ * ends up rendered: the component's own element, or the `asChild` child, whose
+ * children are wrapped in its place.
+ */
+export declare function withContentScale<P>(Component: React.ForwardRefExoticComponent<P>): React.ForwardRefExoticComponent<P>;
+//# sourceMappingURL=withContentScale.d.ts.map

package/lib/utils/withContentScale.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"withContentScale.d.ts","sourceRoot":"","sources":["../../src/utils/withContentScale.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;;;;;;;GAQG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,EAChC,SAAS,EAAE,KAAK,CAAC,yBAAyB,CAAC,CAAC,CAAC,GAC5C,KAAK,CAAC,yBAAyB,CAAC,CAAC,CAAC,CAAC"}

package/lib/utils/withContentScale.js

@@ -0,0 +1,27 @@
+"use client";
+import clsx$1 from "clsx";
+import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
+import { useComposedRefs } from "@radix-ui/react-compose-refs";
+import { Slottable } from "@radix-ui/react-slot";
+import { ContentScale, useScaleFeedback } from "@seed-design/react-scale-feedback";
+//#region src/utils/withContentScale.tsx
+function withContentScale(Component) {
+	const Pressable = React$1.forwardRef(({ children, ...props }, ref) => {
+		const { scaleFeedbackRef, scaleFeedbackClassName } = useScaleFeedback();
+		const composedRef = useComposedRefs(scaleFeedbackRef, ref);
+		return /* @__PURE__ */ jsx(Component, {
+			...props,
+			ref: composedRef,
+			className: clsx$1(scaleFeedbackClassName, props.className),
+			children: /* @__PURE__ */ jsx(Slottable, {
+				child: children,
+				children: (content) => /* @__PURE__ */ jsx(ContentScale, { children: content })
+			})
+		});
+	});
+	Pressable.displayName = Component.displayName;
+	return Pressable;
+}
+//#endregion
+export { withContentScale };

package/lib/utils/withContentScale.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=withContentScale.test.d.ts.map

package/lib/utils/withContentScale.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"withContentScale.test.d.ts","sourceRoot":"","sources":["../../src/utils/withContentScale.test.tsx"],"names":[],"mappings":""}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/react",
-  "version": "2.6.0",
+  "version": "3.0.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -17,11 +17,6 @@
       "import": "./lib/index.js",
       "require": "./lib/index.cjs"
     },
-    "./primitive": {
-      "types": "./lib/primitive.d.ts",
-      "import": "./lib/primitive.js",
-      "require": "./lib/primitive.cjs"
-    },
     "./package.json": "./package.json"
   },
   "main": "./lib/index.cjs",
@@ -39,18 +34,17 @@
   },
   "dependencies": {
     "@radix-ui/react-compose-refs": "^1.1.2",
-    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-slot": "^1.2.5",
     "@radix-ui/react-use-controllable-state": "1.2.2",
     "@radix-ui/react-use-layout-effect": "^1.1.1",
     "@seed-design/dom-utils": "^2.1.0",
     "@seed-design/react-accordion": "^1.0.1",
     "@seed-design/react-attachment-display": "^1.0.1",
-    "@seed-design/react-avatar": "^2.0.1",
     "@seed-design/react-checkbox": "^2.0.1",
     "@seed-design/react-collapsible": "^1.0.1",
+    "@seed-design/react-date-picker": "^1.3.0",
     "@seed-design/react-dialog": "^2.0.3",
-    "@seed-design/react-date-picker": "^1.2.0",
-    "@seed-design/react-drawer": "^2.0.7",
+    "@seed-design/react-drawer": "^3.0.0",
     "@seed-design/react-field": "^2.0.1",
     "@seed-design/react-field-button": "^2.0.1",
     "@seed-design/react-fieldset": "^1.0.1",
@@ -59,14 +53,15 @@
     "@seed-design/react-menu": "^2.0.3",
     "@seed-design/react-middle-truncate": "^1.0.1",
     "@seed-design/react-navigation-menu": "^2.0.2",
-    "@seed-design/react-popover": "^2.0.1",
+    "@seed-design/react-pagination": "^1.0.0",
+    "@seed-design/react-popover": "^3.0.0",
     "@seed-design/react-portal": "^2.0.1",
-    "@seed-design/react-primitive": "^2.0.1",
+    "@seed-design/react-primitive": "^2.0.2",
     "@seed-design/react-progress": "^2.0.1",
     "@seed-design/react-pull-to-refresh": "^2.1.0",
     "@seed-design/react-quantity-picker": "^1.0.0",
     "@seed-design/react-radio-group": "^2.0.1",
-    "@seed-design/react-scale-feedback": "^1.0.0",
+    "@seed-design/react-scale-feedback": "^2.0.0",
     "@seed-design/react-segmented-control": "^2.0.2",
     "@seed-design/react-select": "^1.0.2",
     "@seed-design/react-side-navigation": "^1.0.1",
@@ -83,7 +78,7 @@
     "unicode-segmenter": "^0.17.3"
   },
   "peerDependencies": {
-    "@seed-design/css": "^2.9.0",
+    "@seed-design/css": "^3.0.0",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
   },

package/src/components/Accordion/Accordion.tsx

@@ -9,6 +9,7 @@ import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
 import type * as React from "react";
 import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
 import { createWithStateProps } from "../../utils/createWithStateProps";
+import { withContentScale } from "../../utils/withContentScale";
 
 const { withProvider, withContext } = createSlotRecipeContext(accordion);
 const withStateProps = createWithStateProps([useAccordionItemContext]);
@@ -47,9 +48,8 @@ AccordionHeader.displayName = "AccordionHeader";
 
 export interface AccordionTriggerProps extends AccordionPrimitive.TriggerProps {}
 
-export const AccordionTrigger = withContext<HTMLButtonElement, AccordionTriggerProps>(
-  AccordionPrimitive.Trigger,
-  "trigger",
+export const AccordionTrigger = withContentScale(
+  withContext<HTMLButtonElement, AccordionTriggerProps>(AccordionPrimitive.Trigger, "trigger"),
 );
 AccordionTrigger.displayName = "AccordionTrigger";
 

package/src/components/AlertDialog/AlertDialog.namespace.ts

@@ -0,0 +1,22 @@
+export {
+  AlertDialogBackdrop as Backdrop,
+  AlertDialogPositioner as Positioner,
+  AlertDialogContent as Content,
+  AlertDialogDescription as Description,
+  AlertDialogFooter as Footer,
+  AlertDialogHeader as Header,
+  AlertDialogRoot as Root,
+  AlertDialogTitle as Title,
+  AlertDialogTrigger as Trigger,
+  AlertDialogAction as Action,
+  type AlertDialogBackdropProps as BackdropProps,
+  type AlertDialogPositionerProps as PositionerProps,
+  type AlertDialogContentProps as ContentProps,
+  type AlertDialogDescriptionProps as DescriptionProps,
+  type AlertDialogFooterProps as FooterProps,
+  type AlertDialogHeaderProps as HeaderProps,
+  type AlertDialogRootProps as RootProps,
+  type AlertDialogTitleProps as TitleProps,
+  type AlertDialogTriggerProps as TriggerProps,
+  type AlertDialogActionProps as ActionProps,
+} from "./AlertDialog";

package/src/components/AlertDialog/AlertDialog.test.tsx

@@ -0,0 +1,61 @@
+import { act, render } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, mock } from "bun:test";
+import {
+  AlertDialogBackdrop,
+  AlertDialogContent,
+  AlertDialogPositioner,
+  AlertDialogRoot,
+  type AlertDialogRootProps,
+  AlertDialogTitle,
+} from "./AlertDialog";
+
+function renderAlertDialog(props: Omit<AlertDialogRootProps, "children">) {
+  return render(
+    <AlertDialogRoot defaultOpen {...props}>
+      <AlertDialogPositioner>
+        <AlertDialogBackdrop data-testid="backdrop" />
+        <AlertDialogContent>
+          <AlertDialogTitle>제목</AlertDialogTitle>
+        </AlertDialogContent>
+      </AlertDialogPositioner>
+    </AlertDialogRoot>,
+  );
+}
+
+describe("AlertDialog", () => {
+  it("기본 role로 alertdialog를 사용한다", () => {
+    renderAlertDialog({});
+
+    expect(document.querySelector('[role="alertdialog"]')).not.toBeNull();
+  });
+
+  it("role을 명시하면 기본값 대신 사용한다", () => {
+    renderAlertDialog({ role: "dialog" });
+
+    expect(document.querySelector('[role="dialog"]')).not.toBeNull();
+    expect(document.querySelector('[role="alertdialog"]')).toBeNull();
+  });
+
+  it("기본적으로 바깥을 눌러도 닫히지 않는다", async () => {
+    const user = userEvent.setup({ pointerEventsCheck: 0 });
+    const onOpenChange = mock(() => {});
+    const { getByTestId } = renderAlertDialog({ onOpenChange });
+
+    await act(() => new Promise((resolve) => setTimeout(resolve, 10)));
+    await user.click(getByTestId("backdrop"));
+
+    expect(onOpenChange).not.toHaveBeenCalled();
+  });
+
+  it("closeOnInteractOutside를 켜면 바깥을 눌렀을 때 닫힌다", async () => {
+    const user = userEvent.setup({ pointerEventsCheck: 0 });
+    const onOpenChange = mock(() => {});
+    const { getByTestId } = renderAlertDialog({ onOpenChange, closeOnInteractOutside: true });
+
+    await act(() => new Promise((resolve) => setTimeout(resolve, 10)));
+    await user.click(getByTestId("backdrop"));
+
+    expect(onOpenChange).toHaveBeenCalledTimes(1);
+  });
+});

package/src/components/AlertDialog/AlertDialog.tsx

@@ -0,0 +1,115 @@
+import { Dialog as DialogPrimitive } from "@seed-design/react-dialog";
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import { alertDialog, type AlertDialogVariantProps } from "@seed-design/css/recipes/alert-dialog";
+import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
+
+const { withRootProvider, withContext } = createSlotRecipeContext(alertDialog);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface AlertDialogRootProps extends AlertDialogVariantProps, DialogPrimitive.RootProps {
+  /**
+   * @default "alertdialog"
+   */
+  role?: DialogPrimitive.RootProps["role"];
+  /**
+   * @default false
+   */
+  closeOnInteractOutside?: DialogPrimitive.RootProps["closeOnInteractOutside"];
+  /**
+   * @default true
+   */
+  lazyMount?: DialogPrimitive.RootProps["lazyMount"];
+  /**
+   * @default true
+   */
+  unmountOnExit?: DialogPrimitive.RootProps["unmountOnExit"];
+}
+
+export const AlertDialogRoot = withRootProvider<AlertDialogRootProps>(DialogPrimitive.Root, {
+  defaultProps: {
+    role: "alertdialog",
+    closeOnInteractOutside: false,
+    lazyMount: true,
+    unmountOnExit: true,
+  },
+});
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface AlertDialogTriggerProps extends DialogPrimitive.TriggerProps {}
+
+export const AlertDialogTrigger = DialogPrimitive.Trigger;
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface AlertDialogPositionerProps extends DialogPrimitive.PositionerProps {}
+
+export const AlertDialogPositioner = withContext<HTMLDivElement, AlertDialogPositionerProps>(
+  DialogPrimitive.Positioner,
+  "positioner",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface AlertDialogBackdropProps extends DialogPrimitive.BackdropProps {}
+
+export const AlertDialogBackdrop = withContext<HTMLDivElement, AlertDialogBackdropProps>(
+  DialogPrimitive.Backdrop,
+  "backdrop",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface AlertDialogContentProps extends DialogPrimitive.ContentProps {}
+
+export const AlertDialogContent = withContext<HTMLDivElement, AlertDialogContentProps>(
+  DialogPrimitive.Content,
+  "content",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface AlertDialogHeaderProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const AlertDialogHeader = withContext<HTMLDivElement, AlertDialogHeaderProps>(
+  Primitive.div,
+  "header",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface AlertDialogTitleProps extends DialogPrimitive.TitleProps {}
+
+export const AlertDialogTitle = withContext<HTMLHeadingElement, AlertDialogTitleProps>(
+  DialogPrimitive.Title,
+  "title",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface AlertDialogDescriptionProps extends DialogPrimitive.DescriptionProps {}
+
+export const AlertDialogDescription = withContext<
+  HTMLParagraphElement,
+  AlertDialogDescriptionProps
+>(DialogPrimitive.Description, "description");
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface AlertDialogFooterProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const AlertDialogFooter = withContext<HTMLDivElement, AlertDialogFooterProps>(
+  Primitive.div,
+  "footer",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface AlertDialogActionProps extends DialogPrimitive.CloseButtonProps {}
+
+export const AlertDialogAction = DialogPrimitive.CloseButton;

package/src/components/AlertDialog/index.ts

@@ -0,0 +1,24 @@
+export {
+  AlertDialogBackdrop,
+  AlertDialogPositioner,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogRoot,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+  AlertDialogAction,
+  type AlertDialogBackdropProps,
+  type AlertDialogPositionerProps,
+  type AlertDialogContentProps,
+  type AlertDialogDescriptionProps,
+  type AlertDialogFooterProps,
+  type AlertDialogHeaderProps,
+  type AlertDialogRootProps,
+  type AlertDialogTitleProps,
+  type AlertDialogTriggerProps,
+  type AlertDialogActionProps,
+} from "./AlertDialog";
+
+export * as AlertDialog from "./AlertDialog.namespace";

package/src/components/AttachmentDisplay/AttachmentDisplayItem.tsx

@@ -166,6 +166,8 @@ export const AttachmentDisplayItemBadge = React.forwardRef<
   const classNames = useClassNames();
 
   return (
+    // FIXME: `asChild` slots onto the label span below, not this element, so the caller's element
+    // lands inside the badge without its class or ref. Route `children` through `Slottable`.
     <Primitive.div ref={ref} className={clsx(classNames.badge, className)} {...props}>
       <Primitive.span className={classNames.badgeLabel}>{children}</Primitive.span>
     </Primitive.div>

package/src/components/AttachmentDisplay/index.ts

@@ -57,3 +57,13 @@ export {
 } from "./AttachmentDisplayTrigger";
 
 export * as AttachmentDisplay from "./AttachmentDisplay.namespace";
+
+export {
+  useAttachmentDisplayContext,
+  type UseAttachmentDisplayContext as AttachmentDisplayContextValue,
+} from "@seed-design/react-attachment-display";
+
+export type {
+  DisplayItemEntry as AttachmentDisplayItemEntry,
+  DisplayItemStatusDetails as AttachmentDisplayItemStatusDetails,
+} from "@seed-design/react-attachment-display";

package/src/components/AttachmentInput/AttachmentInputItem.tsx

@@ -171,6 +171,8 @@ export const AttachmentInputItemBadge = React.forwardRef<
   const classNames = useClassNames();
 
   return (
+    // FIXME: `asChild` slots onto the label span below, not this element, so the caller's element
+    // lands inside the badge without its class or ref. Route `children` through `Slottable`.
     <Primitive.div ref={ref} className={clsx(classNames.badge, className)} {...props}>
       <Primitive.span className={classNames.badgeLabel}>{children}</Primitive.span>
     </Primitive.div>

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/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";