@brijbyte/agentic-ui 0.0.3 → 0.0.5

package/src/checkbox/parts.tsx

@@ -18,15 +18,13 @@ import { forwardRef } from "react";
 import type { ComponentRef, ComponentPropsWithoutRef, ReactNode } from "react";
 import { Checkbox as BaseCheckbox } from "@base-ui/react/checkbox";
 import styles from "./checkbox.module.css";
+import { resolveClassName, cx } from "../utils/resolveClassName";
 
 type BaseRootProps = ComponentPropsWithoutRef<typeof BaseCheckbox.Root>;
 type BaseIndicatorProps = ComponentPropsWithoutRef<typeof BaseCheckbox.Indicator>;
 
-export interface CheckboxRootProps extends Omit<BaseRootProps, "className"> {
-  className?: string;
-}
-export interface CheckboxIndicatorProps extends Omit<BaseIndicatorProps, "className"> {
-  className?: string;
+export interface CheckboxRootProps extends BaseRootProps {}
+export interface CheckboxIndicatorProps extends BaseIndicatorProps {
   /** Custom icon rendered inside the indicator. Defaults to an SVG checkmark. */
   children?: ReactNode;
 }
@@ -35,7 +33,7 @@ export const CheckboxRoot = forwardRef<ComponentRef<typeof BaseCheckbox.Root>, C
   { className, ...props },
   ref,
 ) {
-  return <BaseCheckbox.Root ref={ref} className={`${styles.indicator} ${className ?? ""}`} {...props} />;
+  return <BaseCheckbox.Root ref={ref} className={(state) => cx(styles.indicator, resolveClassName(className, state))} {...props} />;
 });
 
 export const CheckboxIndicator = forwardRef<ComponentRef<typeof BaseCheckbox.Indicator>, CheckboxIndicatorProps>(function CheckboxIndicator(
@@ -43,7 +41,7 @@ export const CheckboxIndicator = forwardRef<ComponentRef<typeof BaseCheckbox.Ind
   ref,
 ) {
   return (
-    <BaseCheckbox.Indicator ref={ref} className={`${styles.icon} ${className ?? ""}`} {...props}>
+    <BaseCheckbox.Indicator ref={ref} className={(state) => cx(styles.icon, resolveClassName(className, state))} {...props}>
       {children ?? (
         <svg viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path d="M1.5 5L3.5 7.5L8.5 2.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />

package/src/collapsible/collapsible.tsx

@@ -3,11 +3,17 @@ import { Collapsible as BaseCollapsible } from "@base-ui/react/collapsible";
 import styles from "./collapsible.module.css";
 
 export interface CollapsibleProps {
+  /** Content rendered inside the toggle button. */
   trigger: ReactNode;
+  /** Content revealed when expanded. */
   children: ReactNode;
+  /** Whether the panel is initially open (uncontrolled). */
   defaultOpen?: boolean;
+  /** Controlled open state. */
   open?: boolean;
+  /** Called when the panel opens or closes. */
   onOpenChange?: (open: boolean) => void;
+  /** Prevent the panel from being toggled. */
   disabled?: boolean;
   className?: string;
 }
@@ -20,6 +26,11 @@ function ChevronIcon() {
   );
 }
 
+/**
+ * A single panel toggled by a button. Unlike Accordion it stands alone —
+ * ideal for inline FAQ entries, code blocks, or side panels.
+ * Animates via `--collapsible-panel-height`.
+ */
 export function Collapsible({ trigger, children, className, onOpenChange, ...props }: CollapsibleProps) {
   return (
     <BaseCollapsible.Root className={`${styles.root} ${className ?? ""}`} onOpenChange={onOpenChange as never} {...props}>

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/context-menu.tsx

@@ -26,6 +26,7 @@ export type ContextMenuEntry = ContextMenuItemDef | ContextMenuSeparatorDef | Co
 export interface ContextMenuProps {
   /** The element that can be right-clicked / long-pressed to open the menu. */
   children: ReactElement;
+  /** Array of menu entries: items, separators, and groups. */
   items: ContextMenuEntry[];
   className?: string;
 }
@@ -40,6 +41,10 @@ function RenderItem({ item, i }: { item: ContextMenuItemDef; i: number }) {
   );
 }
 
+/**
+ * A menu that appears at the pointer on right-click or long press. Supports
+ * items, separators, groups, keyboard shortcuts, and disabled states.
+ */
 export function ContextMenu({ children, items, className }: ContextMenuProps) {
   return (
     <BaseContextMenu.Root>

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/dialog.tsx

@@ -3,12 +3,17 @@ import { Dialog as BaseDialog } from "@base-ui/react/dialog";
 import styles from "./dialog.module.css";
 
 export interface DialogProps {
+  /** Controlled open state. */
   open?: boolean;
+  /** Whether the dialog is initially open (uncontrolled). */
   defaultOpen?: boolean;
-  /** `eventDetails` is the base-ui event details object. */
+  /** Called when the dialog opens or closes. `eventDetails` is the base-ui event details object. */
   onOpenChange?: (open: boolean, eventDetails: unknown) => void;
+  /** Element that opens the dialog when clicked. */
   trigger?: ReactElement;
+  /** Heading rendered at the top of the dialog. */
   title?: ReactNode;
+  /** Supplementary text below the title. */
   description?: ReactNode;
   children?: ReactNode;
   /** Buttons aligned to the right (cancel, confirm). */
@@ -20,6 +25,7 @@ export interface DialogProps {
    */
   footerStart?: ReactNode;
   className?: string;
+  /** Whether the dialog can be closed by clicking the backdrop or pressing Escape. @default true */
   dismissible?: boolean;
 }
 
@@ -31,6 +37,12 @@ function XIcon() {
   );
 }
 
+/**
+ * Modal overlay dialog with title, description, body, and footer slots.
+ * Wraps `@base-ui/react` Dialog with a pre-styled backdrop, popup, and
+ * close button. Use `footerStart` for a macOS-style left-aligned
+ * destructive action.
+ */
 export function Dialog({
   trigger,
   title,

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/drawer.tsx

@@ -9,17 +9,23 @@ export interface DrawerProps {
   trigger?: ReactElement;
   /** Which edge the drawer slides in from. @default "right" */
   side?: DrawerSide;
+  /** Heading rendered at the top of the drawer. */
   title?: ReactNode;
+  /** Supplementary text below the title. */
   description?: ReactNode;
   children?: ReactNode;
+  /** Content rendered at the bottom of the drawer. */
   footer?: ReactNode;
   /** Show a drag handle bar (useful for bottom/top drawers). @default true for bottom/top */
   handleBar?: boolean;
   /** Show a close button in the top-right corner. @default true */
   dismissible?: boolean;
 
+  /** Controlled open state. */
   open?: boolean;
+  /** Whether the drawer is initially open (uncontrolled). */
   defaultOpen?: boolean;
+  /** Called when the drawer opens or closes. */
   onOpenChange?: (open: boolean) => void;
 }
 
@@ -47,6 +53,11 @@ const POPUP_CLASS: Record<DrawerSide, string> = {
   top: styles["popup-top"] as string,
 };
 
+/**
+ * A panel that slides in from any edge of the screen with swipe-to-dismiss
+ * gestures. Supports left, right, top, and bottom orientations with an
+ * optional drag handle bar.
+ */
 export function Drawer({
   trigger,
   side = "right",

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/index.ts

@@ -14,8 +14,12 @@ export * from "./dialog";
 export * from "./drawer";
 export * from "./input";
 export * from "./menu";
+export * from "./meter";
 export * from "./number-field";
+export * from "./popover";
 export * from "./progress";
+export * from "./radio";
+export * from "./radio-group";
 export * from "./select";
 export * from "./separator";
 export * from "./slider";

package/src/input/input.tsx

@@ -9,11 +9,19 @@ export type InputSize = "sm" | "md" | "lg";
 export interface InputProps extends Omit<ComponentPropsWithoutRef<"input">, "size"> {
   /** Visual size. Maps to height + font-size design tokens. Default: `"md"`. */
   size?: InputSize;
+  /** Icon or element rendered before the input text. */
   leftAdornment?: ReactNode;
+  /** Icon or element rendered after the input text. */
   rightAdornment?: ReactNode;
+  /** Applies error styling and sets `aria-invalid`. */
   invalid?: boolean;
 }
 
+/**
+ * Text input with optional left and right adornment slots. Extends the
+ * native `<input>` API — replaces the numeric `size` attribute with a
+ * token-based size prop.
+ */
 export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
   { size = "md", leftAdornment, rightAdornment, invalid, className, ...props },
   ref,

package/src/menu/menu.module.css

@@ -14,8 +14,8 @@
     font-family: var(--font-mono);
     font-size: var(--font-size-sm);
     min-width: 200px;
-    transform-origin: var(--transform-origin);
     outline: none;
+    transition: opacity 150ms var(--easing-ease-out);
   }
   @supports (backdrop-filter: blur(12px)) {
     .popup {
@@ -25,17 +25,10 @@
   }
   .popup[data-starting-style] {
     opacity: 0;
-    transform: scale(0.95);
-    transition:
-      opacity 150ms var(--easing-ease-out),
-      transform 150ms var(--easing-ease-out);
   }
   .popup[data-ending-style] {
     opacity: 0;
-    transform: scale(0.98);
-    transition:
-      opacity 75ms var(--easing-ease-in),
-      transform 75ms var(--easing-ease-in);
+    transition: opacity 75ms var(--easing-ease-in);
   }
   /* ─── Item ───────────────────────────────────────────────────────── */
   .item {
@@ -136,7 +129,7 @@
   .arrow-fill {
     fill: var(--color-overlay);
   }
-  .arrow-stroke {
+  .arrow-seam {
     fill: var(--color-line);
   }
 }