@brijbyte/agentic-ui 0.0.4 → 0.0.5

package/src/collapsible/parts.tsx

@@ -4,43 +4,38 @@
  * @example
  * ```tsx
  * import { Collapsible } from '@base-ui/react/collapsible';
- * import { CollapsibleTrigger, CollapsiblePanel } from '@brijbyte/agentic-ui/collapsible';
+ * import { CollapsibleRoot, CollapsibleTrigger, CollapsiblePanel } from '@brijbyte/agentic-ui/collapsible';
  *
- * <Collapsible.Root>
+ * <CollapsibleRoot>
  *   <CollapsibleTrigger>Toggle</CollapsibleTrigger>
  *   <CollapsiblePanel>Content</CollapsiblePanel>
- * </Collapsible.Root>
+ * </CollapsibleRoot>
  * ```
  */
 import { forwardRef } from "react";
 import type { ComponentRef, ComponentPropsWithoutRef } from "react";
 import { Collapsible as BaseCollapsible } from "@base-ui/react/collapsible";
 import styles from "./collapsible.module.css";
+import { resolveClassName, cx } from "../utils/resolveClassName";
 
 type BaseRootProps = ComponentPropsWithoutRef<typeof BaseCollapsible.Root>;
 type BaseTriggerProps = ComponentPropsWithoutRef<typeof BaseCollapsible.Trigger>;
 type BasePanelProps = ComponentPropsWithoutRef<typeof BaseCollapsible.Panel>;
 
-export interface CollapsibleRootProps extends Omit<BaseRootProps, "className"> {
-  className?: string;
-}
-export interface CollapsibleTriggerProps extends Omit<BaseTriggerProps, "className"> {
-  className?: string;
-}
-export interface CollapsiblePanelProps extends Omit<BasePanelProps, "className"> {
-  className?: string;
-}
+export interface CollapsibleRootProps extends BaseRootProps {}
+export interface CollapsibleTriggerProps extends BaseTriggerProps {}
+export interface CollapsiblePanelProps extends BasePanelProps {}
 
 export const CollapsibleRoot = forwardRef<ComponentRef<typeof BaseCollapsible.Root>, CollapsibleRootProps>(function CollapsibleRoot(
   { className, ...props },
   ref,
 ) {
-  return <BaseCollapsible.Root ref={ref} className={`${styles.root} ${className ?? ""}`} {...props} />;
+  return <BaseCollapsible.Root ref={ref} className={(state) => cx(styles.root, resolveClassName(className, state))} {...props} />;
 });
 
 export const CollapsibleTrigger = forwardRef<ComponentRef<typeof BaseCollapsible.Trigger>, CollapsibleTriggerProps>(
   function CollapsibleTrigger({ className, ...props }, ref) {
-    return <BaseCollapsible.Trigger ref={ref} className={`${styles.trigger} ${className ?? ""}`} {...props} />;
+    return <BaseCollapsible.Trigger ref={ref} className={(state) => cx(styles.trigger, resolveClassName(className, state))} {...props} />;
   },
 );
 
@@ -48,5 +43,5 @@ export const CollapsiblePanel = forwardRef<ComponentRef<typeof BaseCollapsible.P
   { className, ...props },
   ref,
 ) {
-  return <BaseCollapsible.Panel ref={ref} className={`${styles.panel} ${className ?? ""}`} {...props} />;
+  return <BaseCollapsible.Panel ref={ref} className={(state) => cx(styles.panel, resolveClassName(className, state))} {...props} />;
 });

package/src/context-menu/parts.tsx

@@ -3,28 +3,28 @@
  *
  * @example
  * ```tsx
- * import { ContextMenu as BaseContextMenu } from '@base-ui/react/context-menu';
+ * import { ContextMenu } from '@base-ui/react/context-menu';
  * import { ContextMenuPopup, ContextMenuItem, ContextMenuSeparator } from '@brijbyte/agentic-ui/context-menu';
  *
- * <BaseContextMenu.Root>
- *   <BaseContextMenu.Trigger render={<div>Right click me</div>} />
- *   <BaseContextMenu.Portal>
- *     <BaseContextMenu.Positioner>
+ * <ContextMenu.Root>
+ *   <ContextMenu.Trigger render={<div>Right click me</div>} />
+ *   <ContextMenu.Portal>
+ *     <ContextMenu.Positioner>
  *       <ContextMenuPopup>
- *         <ContextMenuItem>Cut</ContextMenuItem>
- *         <ContextMenuItem>Copy</ContextMenuItem>
+ *         <ContextMenuItem>Action</ContextMenuItem>
  *         <ContextMenuSeparator />
- *         <ContextMenuItem>Paste</ContextMenuItem>
+ *         <ContextMenuItem>Another</ContextMenuItem>
  *       </ContextMenuPopup>
- *     </BaseContextMenu.Positioner>
- *   </BaseContextMenu.Portal>
- * </BaseContextMenu.Root>
+ *     </ContextMenu.Positioner>
+ *   </ContextMenu.Portal>
+ * </ContextMenu.Root>
  * ```
  */
 import { forwardRef } from "react";
 import type { ComponentRef, ComponentPropsWithoutRef } from "react";
 import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
 import styles from "./context-menu.module.css";
+import { resolveClassName, cx } from "../utils/resolveClassName";
 
 type BasePopupProps = ComponentPropsWithoutRef<typeof BaseContextMenu.Popup>;
 type BaseItemProps = ComponentPropsWithoutRef<typeof BaseContextMenu.Item>;
@@ -33,42 +33,32 @@ type BaseGroupProps = ComponentPropsWithoutRef<typeof BaseContextMenu.Group>;
 type BaseGroupLabelProps = ComponentPropsWithoutRef<typeof BaseContextMenu.GroupLabel>;
 type BaseSubmenuTriggerProps = ComponentPropsWithoutRef<typeof BaseContextMenu.SubmenuTrigger>;
 
-export interface ContextMenuPopupProps extends Omit<BasePopupProps, "className"> {
-  className?: string;
-}
-export interface ContextMenuItemProps extends Omit<BaseItemProps, "className"> {
-  className?: string;
-}
-export interface ContextMenuSeparatorProps extends Omit<BaseSeparatorProps, "className"> {
-  className?: string;
-}
-export interface ContextMenuGroupProps extends Omit<BaseGroupProps, "className"> {
-  className?: string;
-}
-export interface ContextMenuGroupLabelProps extends Omit<BaseGroupLabelProps, "className"> {
-  className?: string;
-}
-export interface ContextMenuSubmenuTriggerProps extends Omit<BaseSubmenuTriggerProps, "className"> {
-  className?: string;
-}
+export interface ContextMenuPopupProps extends BasePopupProps {}
+export interface ContextMenuItemProps extends BaseItemProps {}
+export interface ContextMenuSeparatorProps extends BaseSeparatorProps {}
+export interface ContextMenuGroupProps extends BaseGroupProps {}
+export interface ContextMenuGroupLabelProps extends BaseGroupLabelProps {}
+export interface ContextMenuSubmenuTriggerProps extends BaseSubmenuTriggerProps {}
 
 export const ContextMenuPopup = forwardRef<ComponentRef<typeof BaseContextMenu.Popup>, ContextMenuPopupProps>(function ContextMenuPopup(
   { className, ...props },
   ref,
 ) {
-  return <BaseContextMenu.Popup ref={ref} className={`${styles.popup} ${className ?? ""}`} {...props} />;
+  return <BaseContextMenu.Popup ref={ref} className={(state) => cx(styles.popup, resolveClassName(className, state))} {...props} />;
 });
 
 export const ContextMenuItem = forwardRef<ComponentRef<typeof BaseContextMenu.Item>, ContextMenuItemProps>(function ContextMenuItem(
   { className, ...props },
   ref,
 ) {
-  return <BaseContextMenu.Item ref={ref} className={`${styles.item} ${className ?? ""}`} {...props} />;
+  return <BaseContextMenu.Item ref={ref} className={(state) => cx(styles.item, resolveClassName(className, state))} {...props} />;
 });
 
 export const ContextMenuSeparator = forwardRef<ComponentRef<typeof BaseContextMenu.Separator>, ContextMenuSeparatorProps>(
   function ContextMenuSeparator({ className, ...props }, ref) {
-    return <BaseContextMenu.Separator ref={ref} className={`${styles.separator} ${className ?? ""}`} {...props} />;
+    return (
+      <BaseContextMenu.Separator ref={ref} className={(state) => cx(styles.separator, resolveClassName(className, state))} {...props} />
+    );
   },
 );
 
@@ -81,14 +71,24 @@ export const ContextMenuGroup = forwardRef<ComponentRef<typeof BaseContextMenu.G
 
 export const ContextMenuGroupLabel = forwardRef<ComponentRef<typeof BaseContextMenu.GroupLabel>, ContextMenuGroupLabelProps>(
   function ContextMenuGroupLabel({ className, ...props }, ref) {
-    return <BaseContextMenu.GroupLabel ref={ref} className={`${styles["group-label"]} ${className ?? ""}`} {...props} />;
+    return (
+      <BaseContextMenu.GroupLabel
+        ref={ref}
+        className={(state) => cx(styles["group-label"], resolveClassName(className, state))}
+        {...props}
+      />
+    );
   },
 );
 
 export const ContextMenuSubmenuTrigger = forwardRef<ComponentRef<typeof BaseContextMenu.SubmenuTrigger>, ContextMenuSubmenuTriggerProps>(
   function ContextMenuSubmenuTrigger({ className, children, ...props }, ref) {
     return (
-      <BaseContextMenu.SubmenuTrigger ref={ref} className={`${styles["submenu-trigger"]} ${className ?? ""}`} {...props}>
+      <BaseContextMenu.SubmenuTrigger
+        ref={ref}
+        className={(state) => cx(styles["submenu-trigger"], resolveClassName(className, state))}
+        {...props}
+      >
         <span style={{ flex: 1 }}>{children}</span>
         <svg width="10" height="10" viewBox="0 0 10 10" fill="none" className={styles["submenu-icon"]}>
           <path d="M3.5 9L7.5 5L3.5 1" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />

package/src/dialog/parts.tsx

@@ -1,7 +1,5 @@
 /**
- * Styled primitives for Dialog — each one wraps the corresponding @base-ui/react
- * Dialog part and pre-applies the agentic-ui CSS class. All base-ui props are
- * forwarded so you can compose these with a raw `Dialog.Root` / `Dialog.Trigger`.
+ * Styled primitives for Dialog.
  *
  * @example
  * ```tsx
@@ -26,6 +24,7 @@ import { forwardRef } from "react";
 import type { ComponentRef, ComponentPropsWithoutRef } from "react";
 import { Dialog as BaseDialog } from "@base-ui/react/dialog";
 import styles from "./dialog.module.css";
+import { resolveClassName, cx } from "../utils/resolveClassName";
 
 type BaseBackdropProps = ComponentPropsWithoutRef<typeof BaseDialog.Backdrop>;
 type BaseViewportProps = ComponentPropsWithoutRef<typeof BaseDialog.Viewport>;
@@ -34,63 +33,51 @@ type BaseTitleProps = ComponentPropsWithoutRef<typeof BaseDialog.Title>;
 type BaseDescriptionProps = ComponentPropsWithoutRef<typeof BaseDialog.Description>;
 type BaseCloseProps = ComponentPropsWithoutRef<typeof BaseDialog.Close>;
 
-export interface DialogBackdropProps extends Omit<BaseBackdropProps, "className"> {
-  className?: string;
-}
-export interface DialogViewportProps extends Omit<BaseViewportProps, "className"> {
-  className?: string;
-}
-export interface DialogPopupProps extends Omit<BasePopupProps, "className"> {
-  className?: string;
-}
-export interface DialogTitleProps extends Omit<BaseTitleProps, "className"> {
-  className?: string;
-}
-export interface DialogDescriptionProps extends Omit<BaseDescriptionProps, "className"> {
-  className?: string;
-}
-export interface DialogCloseProps extends Omit<BaseCloseProps, "className"> {
-  className?: string;
-}
+export interface DialogBackdropProps extends BaseBackdropProps {}
+export interface DialogViewportProps extends BaseViewportProps {}
+export interface DialogPopupProps extends BasePopupProps {}
+export interface DialogTitleProps extends BaseTitleProps {}
+export interface DialogDescriptionProps extends BaseDescriptionProps {}
+export interface DialogCloseProps extends BaseCloseProps {}
 
 export const DialogBackdrop = forwardRef<ComponentRef<typeof BaseDialog.Backdrop>, DialogBackdropProps>(function DialogBackdrop(
   { className, ...props },
   ref,
 ) {
-  return <BaseDialog.Backdrop ref={ref} className={`${styles.backdrop} ${className ?? ""}`} {...props} />;
+  return <BaseDialog.Backdrop ref={ref} className={(state) => cx(styles.backdrop, resolveClassName(className, state))} {...props} />;
 });
 
 export const DialogViewport = forwardRef<ComponentRef<typeof BaseDialog.Viewport>, DialogViewportProps>(function DialogViewport(
   { className, ...props },
   ref,
 ) {
-  return <BaseDialog.Viewport ref={ref} className={`${styles.viewport ?? ""} ${className ?? ""}`} {...props} />;
+  return <BaseDialog.Viewport ref={ref} className={(state) => cx(styles.viewport ?? "", resolveClassName(className, state))} {...props} />;
 });
 
 export const DialogPopup = forwardRef<ComponentRef<typeof BaseDialog.Popup>, DialogPopupProps>(function DialogPopup(
   { className, ...props },
   ref,
 ) {
-  return <BaseDialog.Popup ref={ref} className={`${styles.popup} ${className ?? ""}`} {...props} />;
+  return <BaseDialog.Popup ref={ref} className={(state) => cx(styles.popup, resolveClassName(className, state))} {...props} />;
 });
 
 export const DialogTitle = forwardRef<ComponentRef<typeof BaseDialog.Title>, DialogTitleProps>(function DialogTitle(
   { className, ...props },
   ref,
 ) {
-  return <BaseDialog.Title ref={ref} className={`${styles.title} ${className ?? ""}`} {...props} />;
+  return <BaseDialog.Title ref={ref} className={(state) => cx(styles.title, resolveClassName(className, state))} {...props} />;
 });
 
 export const DialogDescription = forwardRef<ComponentRef<typeof BaseDialog.Description>, DialogDescriptionProps>(function DialogDescription(
   { className, ...props },
   ref,
 ) {
-  return <BaseDialog.Description ref={ref} className={`${styles.description} ${className ?? ""}`} {...props} />;
+  return <BaseDialog.Description ref={ref} className={(state) => cx(styles.description, resolveClassName(className, state))} {...props} />;
 });
 
 export const DialogClose = forwardRef<ComponentRef<typeof BaseDialog.Close>, DialogCloseProps>(function DialogClose(
   { className, ...props },
   ref,
 ) {
-  return <BaseDialog.Close ref={ref} className={`${styles.close} ${className ?? ""}`} {...props} />;
+  return <BaseDialog.Close ref={ref} className={(state) => cx(styles.close, resolveClassName(className, state))} {...props} />;
 });

package/src/drawer/parts.tsx

@@ -31,8 +31,7 @@ import type { ComponentPropsWithoutRef } from "react";
 import { Drawer as BaseDrawer } from "@base-ui/react/drawer";
 import type { DrawerSide } from "./drawer";
 import styles from "./drawer.module.css";
-
-// ─── Base prop types ───────────────────────────────────────────────────────
+import { resolveClassName, cx } from "../utils/resolveClassName";
 
 type BaseBackdropProps = ComponentPropsWithoutRef<typeof BaseDrawer.Backdrop>;
 type BaseViewportProps = ComponentPropsWithoutRef<typeof BaseDrawer.Viewport>;
@@ -42,73 +41,66 @@ type BaseTitleProps = ComponentPropsWithoutRef<typeof BaseDrawer.Title>;
 type BaseDescriptionProps = ComponentPropsWithoutRef<typeof BaseDrawer.Description>;
 type BaseCloseProps = ComponentPropsWithoutRef<typeof BaseDrawer.Close>;
 
-// ─── Exported prop types ───────────────────────────────────────────────────
-
-export interface DrawerBackdropProps extends Omit<BaseBackdropProps, "className"> {
-  className?: string;
-}
-export interface DrawerViewportProps extends Omit<BaseViewportProps, "className"> {
-  className?: string;
+export interface DrawerBackdropProps extends BaseBackdropProps {}
+export interface DrawerViewportProps extends BaseViewportProps {
   side?: DrawerSide;
 }
-export interface DrawerPopupProps extends Omit<BasePopupProps, "className"> {
-  className?: string;
+export interface DrawerPopupProps extends BasePopupProps {
   side?: DrawerSide;
 }
-export interface DrawerContentProps extends Omit<BaseContentProps, "className"> {
-  className?: string;
-}
-export interface DrawerTitleProps extends Omit<BaseTitleProps, "className"> {
-  className?: string;
-}
-export interface DrawerDescriptionProps extends Omit<BaseDescriptionProps, "className"> {
-  className?: string;
-}
-export interface DrawerCloseProps extends Omit<BaseCloseProps, "className"> {
-  className?: string;
-}
+export interface DrawerContentProps extends BaseContentProps {}
+export interface DrawerTitleProps extends BaseTitleProps {}
+export interface DrawerDescriptionProps extends BaseDescriptionProps {}
+export interface DrawerCloseProps extends BaseCloseProps {}
 
-// ─── Parts ────────────────────────────────────────────────────────────────
+const POPUP_CLASS: Record<DrawerSide, string> = {
+  right: styles["popup-right"] as string,
+  left: styles["popup-left"] as string,
+  bottom: styles["popup-bottom"] as string,
+  top: styles["popup-top"] as string,
+};
 
 export const DrawerBackdrop = forwardRef<HTMLDivElement, DrawerBackdropProps>(function DrawerBackdrop({ className, ...props }, ref) {
-  return <BaseDrawer.Backdrop ref={ref} className={`${styles.backdrop} ${className ?? ""}`} {...props} />;
+  return <BaseDrawer.Backdrop ref={ref} className={(state) => cx(styles.backdrop, resolveClassName(className, state))} {...props} />;
 });
 
 export const DrawerViewport = forwardRef<HTMLDivElement, DrawerViewportProps>(function DrawerViewport(
   { className, side = "right", ...props },
   ref,
 ) {
-  return <BaseDrawer.Viewport ref={ref} className={`${styles.viewport} ${className ?? ""}`} data-side={side} {...props} />;
+  return (
+    <BaseDrawer.Viewport
+      ref={ref}
+      className={(state) => cx(styles.viewport, resolveClassName(className, state))}
+      data-side={side}
+      {...props}
+    />
+  );
 });
 
-const POPUP_CLASS: Record<DrawerSide, string> = {
-  right: styles["popup-right"] as string,
-  left: styles["popup-left"] as string,
-  bottom: styles["popup-bottom"] as string,
-  top: styles["popup-top"] as string,
-};
-
 export const DrawerPopup = forwardRef<HTMLDivElement, DrawerPopupProps>(function DrawerPopup({ className, side = "right", ...props }, ref) {
-  return <BaseDrawer.Popup ref={ref} className={`${styles.popup} ${POPUP_CLASS[side]} ${className ?? ""}`} {...props} />;
+  return (
+    <BaseDrawer.Popup ref={ref} className={(state) => cx(styles.popup, POPUP_CLASS[side], resolveClassName(className, state))} {...props} />
+  );
 });
 
 export const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(function DrawerContent({ className, ...props }, ref) {
-  return <BaseDrawer.Content ref={ref} className={`${styles.content} ${className ?? ""}`} {...props} />;
+  return <BaseDrawer.Content ref={ref} className={(state) => cx(styles.content, resolveClassName(className, state))} {...props} />;
 });
 
 export const DrawerTitle = forwardRef<HTMLHeadingElement, DrawerTitleProps>(function DrawerTitle({ className, ...props }, ref) {
-  return <BaseDrawer.Title ref={ref} className={`${styles.title} ${className ?? ""}`} {...props} />;
+  return <BaseDrawer.Title ref={ref} className={(state) => cx(styles.title, resolveClassName(className, state))} {...props} />;
 });
 
 export const DrawerDescription = forwardRef<HTMLParagraphElement, DrawerDescriptionProps>(function DrawerDescription(
   { className, ...props },
   ref,
 ) {
-  return <BaseDrawer.Description ref={ref} className={`${styles.description} ${className ?? ""}`} {...props} />;
+  return <BaseDrawer.Description ref={ref} className={(state) => cx(styles.description, resolveClassName(className, state))} {...props} />;
 });
 
 export const DrawerClose = forwardRef<HTMLButtonElement, DrawerCloseProps>(function DrawerClose({ className, ...props }, ref) {
-  return <BaseDrawer.Close ref={ref} className={`${styles.close} ${className ?? ""}`} {...props} />;
+  return <BaseDrawer.Close ref={ref} className={(state) => cx(styles.close, resolveClassName(className, state))} {...props} />;
 });
 
 /** A decorative drag handle bar. Place at the top of a bottom drawer or bottom of a top drawer. */

package/src/menu/parts.tsx

@@ -26,6 +26,7 @@ import { forwardRef } from "react";
 import type { ComponentRef, ComponentPropsWithoutRef } from "react";
 import { Menu as BaseMenu } from "@base-ui/react/menu";
 import styles from "./menu.module.css";
+import { resolveClassName, cx } from "../utils/resolveClassName";
 
 type BasePositionerProps = ComponentPropsWithoutRef<typeof BaseMenu.Positioner>;
 type BasePopupProps = ComponentPropsWithoutRef<typeof BaseMenu.Popup>;
@@ -34,56 +35,44 @@ type BaseSeparatorProps = ComponentPropsWithoutRef<typeof BaseMenu.Separator>;
 type BaseGroupLabelProps = ComponentPropsWithoutRef<typeof BaseMenu.GroupLabel>;
 type BaseArrowProps = ComponentPropsWithoutRef<typeof BaseMenu.Arrow>;
 
-export interface MenuPositionerProps extends Omit<BasePositionerProps, "className"> {
-  className?: string;
-}
-export interface MenuPopupProps extends Omit<BasePopupProps, "className"> {
-  className?: string;
-}
-export interface MenuItemProps extends Omit<BaseItemProps, "className"> {
-  className?: string;
-}
-export interface MenuSeparatorProps extends Omit<BaseSeparatorProps, "className"> {
-  className?: string;
-}
-export interface MenuGroupLabelProps extends Omit<BaseGroupLabelProps, "className"> {
-  className?: string;
-}
-export interface MenuArrowProps extends Omit<BaseArrowProps, "className"> {
-  className?: string;
-}
+export interface MenuPositionerProps extends BasePositionerProps {}
+export interface MenuPopupProps extends BasePopupProps {}
+export interface MenuItemProps extends BaseItemProps {}
+export interface MenuSeparatorProps extends BaseSeparatorProps {}
+export interface MenuGroupLabelProps extends BaseGroupLabelProps {}
+export interface MenuArrowProps extends BaseArrowProps {}
 
 export const MenuPositioner = forwardRef<ComponentRef<typeof BaseMenu.Positioner>, MenuPositionerProps>(function MenuPositioner(
   { className, ...props },
   ref,
 ) {
-  return <BaseMenu.Positioner ref={ref} className={`${styles.positioner} ${className ?? ""}`} {...props} />;
+  return <BaseMenu.Positioner ref={ref} className={(state) => cx(styles.positioner, resolveClassName(className, state))} {...props} />;
 });
 
 export const MenuPopup = forwardRef<ComponentRef<typeof BaseMenu.Popup>, MenuPopupProps>(function MenuPopup({ className, ...props }, ref) {
-  return <BaseMenu.Popup ref={ref} className={`${styles.popup} ${className ?? ""}`} {...props} />;
+  return <BaseMenu.Popup ref={ref} className={(state) => cx(styles.popup, resolveClassName(className, state))} {...props} />;
 });
 
 export const MenuItem = forwardRef<ComponentRef<typeof BaseMenu.Item>, MenuItemProps>(function MenuItem({ className, ...props }, ref) {
-  return <BaseMenu.Item ref={ref} className={`${styles.item} ${className ?? ""}`} {...props} />;
+  return <BaseMenu.Item ref={ref} className={(state) => cx(styles.item, resolveClassName(className, state))} {...props} />;
 });
 
 export const MenuSeparator = forwardRef<ComponentRef<typeof BaseMenu.Separator>, MenuSeparatorProps>(function MenuSeparator(
   { className, ...props },
   ref,
 ) {
-  return <BaseMenu.Separator ref={ref} className={`${styles.separator} ${className ?? ""}`} {...props} />;
+  return <BaseMenu.Separator ref={ref} className={(state) => cx(styles.separator, resolveClassName(className, state))} {...props} />;
 });
 
 export const MenuGroupLabel = forwardRef<ComponentRef<typeof BaseMenu.GroupLabel>, MenuGroupLabelProps>(function MenuGroupLabel(
   { className, ...props },
   ref,
 ) {
-  return <BaseMenu.GroupLabel ref={ref} className={`${styles["group-label"]} ${className ?? ""}`} {...props} />;
+  return <BaseMenu.GroupLabel ref={ref} className={(state) => cx(styles["group-label"], resolveClassName(className, state))} {...props} />;
 });
 
 export const MenuArrow = forwardRef<ComponentRef<typeof BaseMenu.Arrow>, MenuArrowProps>(function MenuArrow({ className, ...props }, ref) {
-  return <BaseMenu.Arrow ref={ref} className={`${styles.arrow} ${className ?? ""}`} {...props} />;
+  return <BaseMenu.Arrow ref={ref} className={(state) => cx(styles.arrow, resolveClassName(className, state))} {...props} />;
 });
 
 /** Convenience class for keyboard shortcut hints inside a MenuItem. */

package/src/meter/parts.tsx

@@ -21,52 +21,53 @@ import { forwardRef } from "react";
 import type { ComponentRef, ComponentPropsWithoutRef } from "react";
 import { Meter as BaseMeter } from "@base-ui/react/meter";
 import styles from "./meter.module.css";
+import { resolveClassName, cx } from "../utils/resolveClassName";
 
 type BaseTrackProps = ComponentPropsWithoutRef<typeof BaseMeter.Track>;
 type BaseIndicatorProps = ComponentPropsWithoutRef<typeof BaseMeter.Indicator>;
 type BaseLabelProps = ComponentPropsWithoutRef<typeof BaseMeter.Label>;
 type BaseValueProps = ComponentPropsWithoutRef<typeof BaseMeter.Value>;
 
-export interface MeterTrackProps extends Omit<BaseTrackProps, "className"> {
-  className?: string;
+export interface MeterTrackProps extends BaseTrackProps {
   size?: "sm" | "md" | "lg";
 }
-export interface MeterIndicatorProps extends Omit<BaseIndicatorProps, "className"> {
-  className?: string;
+export interface MeterIndicatorProps extends BaseIndicatorProps {
   /** Threshold state — controls fill colour. Set automatically by the high-level Meter wrapper. */
   "data-meter-state"?: "optimum" | "suboptimal" | "critical";
 }
-export interface MeterLabelProps extends Omit<BaseLabelProps, "className"> {
-  className?: string;
-}
-export interface MeterValueProps extends Omit<BaseValueProps, "className"> {
-  className?: string;
-}
+export interface MeterLabelProps extends BaseLabelProps {}
+export interface MeterValueProps extends BaseValueProps {}
 
 export const MeterTrack = forwardRef<ComponentRef<typeof BaseMeter.Track>, MeterTrackProps>(function MeterTrack(
   { className, size = "md", ...props },
   ref,
 ) {
-  return <BaseMeter.Track ref={ref} className={`${styles.track} ${styles[`track-${size}`]} ${className ?? ""}`} {...props} />;
+  return (
+    <BaseMeter.Track
+      ref={ref}
+      className={(state) => cx(styles.track, styles[`track-${size}`], resolveClassName(className, state))}
+      {...props}
+    />
+  );
 });
 
 export const MeterIndicator = forwardRef<ComponentRef<typeof BaseMeter.Indicator>, MeterIndicatorProps>(function MeterIndicator(
   { className, ...props },
   ref,
 ) {
-  return <BaseMeter.Indicator ref={ref} className={`${styles.indicator} ${className ?? ""}`} {...props} />;
+  return <BaseMeter.Indicator ref={ref} className={(state) => cx(styles.indicator, resolveClassName(className, state))} {...props} />;
 });
 
 export const MeterLabel = forwardRef<ComponentRef<typeof BaseMeter.Label>, MeterLabelProps>(function MeterLabel(
   { className, ...props },
   ref,
 ) {
-  return <BaseMeter.Label ref={ref} className={`${styles.label} ${className ?? ""}`} {...props} />;
+  return <BaseMeter.Label ref={ref} className={(state) => cx(styles.label, resolveClassName(className, state))} {...props} />;
 });
 
 export const MeterValue = forwardRef<ComponentRef<typeof BaseMeter.Value>, MeterValueProps>(function MeterValue(
   { className, ...props },
   ref,
 ) {
-  return <BaseMeter.Value ref={ref} className={`${styles.value} ${className ?? ""}`} {...props} />;
+  return <BaseMeter.Value ref={ref} className={(state) => cx(styles.value, resolveClassName(className, state))} {...props} />;
 });

package/src/number-field/parts.tsx

@@ -25,6 +25,7 @@ import { forwardRef } from "react";
 import type { ComponentRef, ComponentPropsWithoutRef } from "react";
 import { NumberField as BaseNumberField } from "@base-ui/react/number-field";
 import styles from "./number-field.module.css";
+import { resolveClassName, cx } from "../utils/resolveClassName";
 
 type BaseGroupProps = ComponentPropsWithoutRef<typeof BaseNumberField.Group>;
 type BaseInputProps = ComponentPropsWithoutRef<typeof BaseNumberField.Input>;
@@ -33,59 +34,67 @@ type BaseIncrementProps = ComponentPropsWithoutRef<typeof BaseNumberField.Increm
 type BaseScrubAreaProps = ComponentPropsWithoutRef<typeof BaseNumberField.ScrubArea>;
 type BaseScrubAreaCursorProps = ComponentPropsWithoutRef<typeof BaseNumberField.ScrubAreaCursor>;
 
-export interface NumberFieldGroupProps extends Omit<BaseGroupProps, "className"> {
-  className?: string;
-}
-export interface NumberFieldInputProps extends Omit<BaseInputProps, "className"> {
-  className?: string;
-}
-export interface NumberFieldDecrementProps extends Omit<BaseDecrementProps, "className"> {
-  className?: string;
-}
-export interface NumberFieldIncrementProps extends Omit<BaseIncrementProps, "className"> {
-  className?: string;
-}
-export interface NumberFieldScrubAreaProps extends Omit<BaseScrubAreaProps, "className"> {
-  className?: string;
-}
-export interface NumberFieldScrubAreaCursorProps extends Omit<BaseScrubAreaCursorProps, "className"> {
-  className?: string;
-}
+export interface NumberFieldGroupProps extends BaseGroupProps {}
+export interface NumberFieldInputProps extends BaseInputProps {}
+export interface NumberFieldDecrementProps extends BaseDecrementProps {}
+export interface NumberFieldIncrementProps extends BaseIncrementProps {}
+export interface NumberFieldScrubAreaProps extends BaseScrubAreaProps {}
+export interface NumberFieldScrubAreaCursorProps extends BaseScrubAreaCursorProps {}
 
 export const NumberFieldGroup = forwardRef<ComponentRef<typeof BaseNumberField.Group>, NumberFieldGroupProps>(function NumberFieldGroup(
   { className, ...props },
   ref,
 ) {
-  return <BaseNumberField.Group ref={ref} className={`${styles.group} ${className ?? ""}`} {...props} />;
+  return <BaseNumberField.Group ref={ref} className={(state) => cx(styles.group, resolveClassName(className, state))} {...props} />;
 });
 
 export const NumberFieldInput = forwardRef<ComponentRef<typeof BaseNumberField.Input>, NumberFieldInputProps>(function NumberFieldInput(
   { className, ...props },
   ref,
 ) {
-  return <BaseNumberField.Input ref={ref} className={`${styles.input} ${className ?? ""}`} {...props} />;
+  return <BaseNumberField.Input ref={ref} className={(state) => cx(styles.input, resolveClassName(className, state))} {...props} />;
 });
 
 export const NumberFieldDecrement = forwardRef<ComponentRef<typeof BaseNumberField.Decrement>, NumberFieldDecrementProps>(
   function NumberFieldDecrement({ className, ...props }, ref) {
-    return <BaseNumberField.Decrement ref={ref} className={`${styles["step-button"]} ${styles.decrement} ${className ?? ""}`} {...props} />;
+    return (
+      <BaseNumberField.Decrement
+        ref={ref}
+        className={(state) => cx(styles["step-button"], styles.decrement, resolveClassName(className, state))}
+        {...props}
+      />
+    );
   },
 );
 
 export const NumberFieldIncrement = forwardRef<ComponentRef<typeof BaseNumberField.Increment>, NumberFieldIncrementProps>(
   function NumberFieldIncrement({ className, ...props }, ref) {
-    return <BaseNumberField.Increment ref={ref} className={`${styles["step-button"]} ${styles.increment} ${className ?? ""}`} {...props} />;
+    return (
+      <BaseNumberField.Increment
+        ref={ref}
+        className={(state) => cx(styles["step-button"], styles.increment, resolveClassName(className, state))}
+        {...props}
+      />
+    );
   },
 );
 
 export const NumberFieldScrubArea = forwardRef<ComponentRef<typeof BaseNumberField.ScrubArea>, NumberFieldScrubAreaProps>(
   function NumberFieldScrubArea({ className, ...props }, ref) {
-    return <BaseNumberField.ScrubArea ref={ref} className={`${styles["scrub-area"]} ${className ?? ""}`} {...props} />;
+    return (
+      <BaseNumberField.ScrubArea ref={ref} className={(state) => cx(styles["scrub-area"], resolveClassName(className, state))} {...props} />
+    );
   },
 );
 
 export const NumberFieldScrubAreaCursor = forwardRef<ComponentRef<typeof BaseNumberField.ScrubAreaCursor>, NumberFieldScrubAreaCursorProps>(
   function NumberFieldScrubAreaCursor({ className, ...props }, ref) {
-    return <BaseNumberField.ScrubAreaCursor ref={ref} className={`${styles["scrub-area-cursor"]} ${className ?? ""}`} {...props} />;
+    return (
+      <BaseNumberField.ScrubAreaCursor
+        ref={ref}
+        className={(state) => cx(styles["scrub-area-cursor"], resolveClassName(className, state))}
+        {...props}
+      />
+    );
   },
 );