@brijbyte/agentic-ui 0.0.4 → 0.0.5

package/src/toast/parts.tsx

@@ -20,6 +20,7 @@ import { forwardRef } from "react";
 import type { ComponentRef, ComponentPropsWithoutRef } from "react";
 import { Toast as BaseToast } from "@base-ui/react/toast";
 import styles from "./toast.module.css";
+import { resolveClassName, cx } from "../utils/resolveClassName";
 
 type BaseRootProps = ComponentPropsWithoutRef<typeof BaseToast.Root>;
 type BaseTitleProps = ComponentPropsWithoutRef<typeof BaseToast.Title>;
@@ -27,50 +28,40 @@ type BaseDescriptionProps = ComponentPropsWithoutRef<typeof BaseToast.Descriptio
 type BaseCloseProps = ComponentPropsWithoutRef<typeof BaseToast.Close>;
 type BaseViewportProps = ComponentPropsWithoutRef<typeof BaseToast.Viewport>;
 
-export interface ToastRootProps extends Omit<BaseRootProps, "className"> {
-  className?: string;
-}
-export interface ToastTitleProps extends Omit<BaseTitleProps, "className"> {
-  className?: string;
-}
-export interface ToastDescriptionProps extends Omit<BaseDescriptionProps, "className"> {
-  className?: string;
-}
-export interface ToastCloseProps extends Omit<BaseCloseProps, "className"> {
-  className?: string;
-}
-export interface ToastViewportPartProps extends Omit<BaseViewportProps, "className"> {
-  className?: string;
-}
+export interface ToastRootProps extends BaseRootProps {}
+export interface ToastTitleProps extends BaseTitleProps {}
+export interface ToastDescriptionProps extends BaseDescriptionProps {}
+export interface ToastCloseProps extends BaseCloseProps {}
+export interface ToastViewportPartProps extends BaseViewportProps {}
 
 export const ToastRoot = forwardRef<ComponentRef<typeof BaseToast.Root>, ToastRootProps>(function ToastRoot({ className, ...props }, ref) {
-  return <BaseToast.Root ref={ref} className={`${styles.toast} ${className ?? ""}`} {...props} />;
+  return <BaseToast.Root ref={ref} className={(state) => cx(styles.toast, resolveClassName(className, state))} {...props} />;
 });
 
 export const ToastTitle = forwardRef<ComponentRef<typeof BaseToast.Title>, ToastTitleProps>(function ToastTitle(
   { className, ...props },
   ref,
 ) {
-  return <BaseToast.Title ref={ref} className={`${styles.title} ${className ?? ""}`} {...props} />;
+  return <BaseToast.Title ref={ref} className={(state) => cx(styles.title, resolveClassName(className, state))} {...props} />;
 });
 
 export const ToastDescription = forwardRef<ComponentRef<typeof BaseToast.Description>, ToastDescriptionProps>(function ToastDescription(
   { className, ...props },
   ref,
 ) {
-  return <BaseToast.Description ref={ref} className={`${styles.description} ${className ?? ""}`} {...props} />;
+  return <BaseToast.Description ref={ref} className={(state) => cx(styles.description, resolveClassName(className, state))} {...props} />;
 });
 
 export const ToastClose = forwardRef<ComponentRef<typeof BaseToast.Close>, ToastCloseProps>(function ToastClose(
   { className, ...props },
   ref,
 ) {
-  return <BaseToast.Close ref={ref} className={`${styles.close} ${className ?? ""}`} {...props} />;
+  return <BaseToast.Close ref={ref} className={(state) => cx(styles.close, resolveClassName(className, state))} {...props} />;
 });
 
 export const ToastViewportPart = forwardRef<ComponentRef<typeof BaseToast.Viewport>, ToastViewportPartProps>(function ToastViewportPart(
   { className, ...props },
   ref,
 ) {
-  return <BaseToast.Viewport ref={ref} className={`${styles.viewport} ${className ?? ""}`} {...props} />;
+  return <BaseToast.Viewport ref={ref} className={(state) => cx(styles.viewport, resolveClassName(className, state))} {...props} />;
 });

package/src/tooltip/parts.tsx

@@ -25,38 +25,33 @@ import { forwardRef } from "react";
 import type { ComponentRef, ComponentPropsWithoutRef } from "react";
 import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
 import styles from "./tooltip.module.css";
+import { resolveClassName, cx } from "../utils/resolveClassName";
 
 type BasePositionerProps = ComponentPropsWithoutRef<typeof BaseTooltip.Positioner>;
 type BasePopupProps = ComponentPropsWithoutRef<typeof BaseTooltip.Popup>;
 type BaseArrowProps = ComponentPropsWithoutRef<typeof BaseTooltip.Arrow>;
 
-export interface TooltipPositionerProps extends Omit<BasePositionerProps, "className"> {
-  className?: string;
-}
-export interface TooltipPopupProps extends Omit<BasePopupProps, "className"> {
-  className?: string;
-}
-export interface TooltipArrowProps extends Omit<BaseArrowProps, "className"> {
-  className?: string;
-}
+export interface TooltipPositionerProps extends BasePositionerProps {}
+export interface TooltipPopupProps extends BasePopupProps {}
+export interface TooltipArrowProps extends BaseArrowProps {}
 
 export const TooltipPositioner = forwardRef<ComponentRef<typeof BaseTooltip.Positioner>, TooltipPositionerProps>(function TooltipPositioner(
   { className, ...props },
   ref,
 ) {
-  return <BaseTooltip.Positioner ref={ref} className={`${styles.positioner} ${className ?? ""}`} {...props} />;
+  return <BaseTooltip.Positioner ref={ref} className={(state) => cx(styles.positioner, resolveClassName(className, state))} {...props} />;
 });
 
 export const TooltipPopup = forwardRef<ComponentRef<typeof BaseTooltip.Popup>, TooltipPopupProps>(function TooltipPopup(
   { className, ...props },
   ref,
 ) {
-  return <BaseTooltip.Popup ref={ref} className={`${styles.popup} ${className ?? ""}`} {...props} />;
+  return <BaseTooltip.Popup ref={ref} className={(state) => cx(styles.popup, resolveClassName(className, state))} {...props} />;
 });
 
 export const TooltipArrow = forwardRef<ComponentRef<typeof BaseTooltip.Arrow>, TooltipArrowProps>(function TooltipArrow(
   { className, ...props },
   ref,
 ) {
-  return <BaseTooltip.Arrow ref={ref} className={`${styles.arrow} ${className ?? ""}`} {...props} />;
+  return <BaseTooltip.Arrow ref={ref} className={(state) => cx(styles.arrow, resolveClassName(className, state))} {...props} />;
 });

package/src/utils/resolveClassName.ts

@@ -0,0 +1,24 @@
+/**
+ * Resolves a base-ui className prop (string | function | undefined) into a string.
+ * When the className is a function, it is called with the component state.
+ * Used by styled parts to merge our fixed style class with the consumer's className.
+ *
+ * @example
+ * ```tsx
+ * // In a styled part, prepend our class while preserving function className support:
+ * className={(state) => cx(styles.root, resolveClassName(className, state))}
+ * ```
+ */
+export function resolveClassName<State>(
+  className: string | ((state: State) => string | undefined) | undefined,
+  state: State,
+): string | undefined {
+  return typeof className === "function" ? className(state) : className;
+}
+
+/**
+ * Joins class name strings, filtering out falsy values.
+ */
+export function cx(...classes: (string | undefined | null | false)[]): string {
+  return classes.filter(Boolean).join(" ");
+}