@brijbyte/agentic-ui 0.0.2 → 0.0.4

package/dist/tooltip/tooltip.d.ts

@@ -1,15 +1,24 @@
-import { ReactElement, ReactNode } from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { ReactElement, ReactNode } from "react";
 import styles from "./tooltip.module.css";
 
 //#region src/tooltip/tooltip.d.ts
 interface TooltipProps {
+  /** Text or rich content shown inside the tooltip popup. */
   content: ReactNode;
+  /** The element that triggers the tooltip on hover/focus. */
   children: ReactElement;
+  /** Hover delay in milliseconds before the tooltip appears. @default 400 */
   delay?: number;
+  /** Which side of the trigger the tooltip appears on. @default "top" */
   side?: "top" | "bottom" | "left" | "right";
+  /** Alignment along the side axis. @default "center" */
   align?: "start" | "center" | "end";
 }
+/**
+ * Accessible popup shown on hover or focus. Automatically positions itself
+ * with an arrow and supports configurable delay, side, and alignment.
+ */
 declare function Tooltip({
   content,
   children,

package/dist/tooltip/tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.d.ts","names":[],"sources":["../../src/tooltip/tooltip.tsx"],"mappings":";;;;;UAIiB,YAAA;EACf,OAAA,EAAS,SAAA;EACT,QAAA,EAAU,YAAA;EACV,KAAA;EACA,IAAA;EACA,KAAA;AAAA;AAAA,iBAGc,OAAA,CAAA;EAAU,OAAA;EAAS,QAAA;EAAU,KAAA;EAAa,IAAA;EAAc;AAAA,GAAoB,YAAA,GAAY,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"tooltip.d.ts","names":[],"sources":["../../src/tooltip/tooltip.tsx"],"mappings":";;;;;UAIiB,YAAA;;EAEf,OAAA,EAAS,SAAA;EAFM;EAIf,QAAA,EAAU,YAAA;;EAEV,KAAA;EAJA;EAMA,IAAA;EAJA;EAMA,KAAA;AAAA;;;;;iBAOc,OAAA,CAAA;EAAU,OAAA;EAAS,QAAA;EAAU,KAAA;EAAa,IAAA;EAAc;AAAA,GAAoB,YAAA,GAAY,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/tooltip/tooltip.js

@@ -2,6 +2,10 @@ import tooltip_module_default from "./tooltip.module.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Tooltip } from "@base-ui/react/tooltip";
 //#region src/tooltip/tooltip.tsx
+/**
+* Accessible popup shown on hover or focus. Automatically positions itself
+* with an arrow and supports configurable delay, side, and alignment.
+*/
 function Tooltip$1({ content, children, delay = 400, side = "top", align = "center" }) {
 	return /* @__PURE__ */ jsx(Tooltip.Provider, {
 		delay,

package/dist/tooltip/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","names":["Tooltip","BaseTooltip","styles"],"sources":["../../src/tooltip/tooltip.tsx"],"sourcesContent":["import type { ReactNode, ReactElement } from \"react\";\nimport { Tooltip as BaseTooltip } from \"@base-ui/react/tooltip\";\nimport styles from \"./tooltip.module.css\";\n\nexport interface TooltipProps {\n  content: ReactNode;\n  children: ReactElement;\n  delay?: number;\n  side?: \"top\" | \"bottom\" | \"left\" | \"right\";\n  align?: \"start\" | \"center\" | \"end\";\n}\n\nexport function Tooltip({ content, children, delay = 400, side = \"top\", align = \"center\" }: TooltipProps) {\n  return (\n    <BaseTooltip.Provider delay={delay}>\n      <BaseTooltip.Root>\n        <BaseTooltip.Trigger render={children} />\n        <BaseTooltip.Portal>\n          <BaseTooltip.Positioner className={styles.positioner} side={side} align={align} sideOffset={6}>\n            <BaseTooltip.Popup className={styles.popup}>\n              <BaseTooltip.Arrow className={styles.arrow} />\n              {content}\n            </BaseTooltip.Popup>\n          </BaseTooltip.Positioner>\n        </BaseTooltip.Portal>\n      </BaseTooltip.Root>\n    </BaseTooltip.Provider>\n  );\n}\nexport { styles as TooltipStyles };\n"],"mappings":";;;;AAYA,SAAgBA,UAAQ,EAAE,SAAS,UAAU,QAAQ,KAAK,OAAO,OAAO,QAAQ,YAA0B;AACxG,QACE,oBAACC,QAAY,UAAb;EAA6B;YAC3B,qBAACA,QAAY,MAAb,EAAA,UAAA,CACE,oBAACA,QAAY,SAAb,EAAqB,QAAQ,UAAY,CAAA,EACzC,oBAACA,QAAY,QAAb,EAAA,UACE,oBAACA,QAAY,YAAb;GAAwB,WAAWC,uBAAO;GAAkB;GAAa;GAAO,YAAY;aAC1F,qBAACD,QAAY,OAAb;IAAmB,WAAWC,uBAAO;cAArC,CACE,oBAACD,QAAY,OAAb,EAAmB,WAAWC,uBAAO,OAAS,CAAA,EAC7C,QACiB;;GACG,CAAA,EACN,CAAA,CACJ,EAAA,CAAA;EACE,CAAA"}
+{"version":3,"file":"tooltip.js","names":["Tooltip","BaseTooltip","styles"],"sources":["../../src/tooltip/tooltip.tsx"],"sourcesContent":["import type { ReactNode, ReactElement } from \"react\";\nimport { Tooltip as BaseTooltip } from \"@base-ui/react/tooltip\";\nimport styles from \"./tooltip.module.css\";\n\nexport interface TooltipProps {\n  /** Text or rich content shown inside the tooltip popup. */\n  content: ReactNode;\n  /** The element that triggers the tooltip on hover/focus. */\n  children: ReactElement;\n  /** Hover delay in milliseconds before the tooltip appears. @default 400 */\n  delay?: number;\n  /** Which side of the trigger the tooltip appears on. @default \"top\" */\n  side?: \"top\" | \"bottom\" | \"left\" | \"right\";\n  /** Alignment along the side axis. @default \"center\" */\n  align?: \"start\" | \"center\" | \"end\";\n}\n\n/**\n * Accessible popup shown on hover or focus. Automatically positions itself\n * with an arrow and supports configurable delay, side, and alignment.\n */\nexport function Tooltip({ content, children, delay = 400, side = \"top\", align = \"center\" }: TooltipProps) {\n  return (\n    <BaseTooltip.Provider delay={delay}>\n      <BaseTooltip.Root>\n        <BaseTooltip.Trigger render={children} />\n        <BaseTooltip.Portal>\n          <BaseTooltip.Positioner className={styles.positioner} side={side} align={align} sideOffset={6}>\n            <BaseTooltip.Popup className={styles.popup}>\n              <BaseTooltip.Arrow className={styles.arrow} />\n              {content}\n            </BaseTooltip.Popup>\n          </BaseTooltip.Positioner>\n        </BaseTooltip.Portal>\n      </BaseTooltip.Root>\n    </BaseTooltip.Provider>\n  );\n}\nexport { styles as TooltipStyles };\n"],"mappings":";;;;;;;;AAqBA,SAAgBA,UAAQ,EAAE,SAAS,UAAU,QAAQ,KAAK,OAAO,OAAO,QAAQ,YAA0B;AACxG,QACE,oBAACC,QAAY,UAAb;EAA6B;YAC3B,qBAACA,QAAY,MAAb,EAAA,UAAA,CACE,oBAACA,QAAY,SAAb,EAAqB,QAAQ,UAAY,CAAA,EACzC,oBAACA,QAAY,QAAb,EAAA,UACE,oBAACA,QAAY,YAAb;GAAwB,WAAWC,uBAAO;GAAkB;GAAa;GAAO,YAAY;aAC1F,qBAACD,QAAY,OAAb;IAAmB,WAAWC,uBAAO;cAArC,CACE,oBAACD,QAAY,OAAb,EAAmB,WAAWC,uBAAO,OAAS,CAAA,EAC7C,QACiB;;GACG,CAAA,EACN,CAAA,CACJ,EAAA,CAAA;EACE,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brijbyte/agentic-ui",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "private": false,
   "repository": {
     "type": "git",
@@ -23,6 +23,7 @@
       "import": "./dist/index.js",
       "types": "./dist/index.d.ts"
     },
+    "./package.json": "./package.json",
     "./styles": "./dist/index.css",
     "./layer-order": "./dist/layer-order.css",
     "./tokens": "./dist/tokens.css",
@@ -88,6 +89,11 @@
       "types": "./dist/menu/index.d.ts"
     },
     "./menu.css": "./dist/menu/menu.css",
+    "./meter": {
+      "import": "./dist/meter/index.js",
+      "types": "./dist/meter/index.d.ts"
+    },
+    "./meter.css": "./dist/meter/meter.css",
     "./number-field": {
       "import": "./dist/number-field/index.js",
       "types": "./dist/number-field/index.d.ts"
@@ -98,6 +104,16 @@
       "types": "./dist/progress/index.d.ts"
     },
     "./progress.css": "./dist/progress/progress.css",
+    "./radio": {
+      "import": "./dist/radio/index.js",
+      "types": "./dist/radio/index.d.ts"
+    },
+    "./radio.css": "./dist/radio/radio.css",
+    "./radio-group": {
+      "import": "./dist/radio-group/index.js",
+      "types": "./dist/radio-group/index.d.ts"
+    },
+    "./radio-group.css": "./dist/radio-group/radio-group.css",
     "./select": {
       "import": "./dist/select/index.js",
       "types": "./dist/select/index.d.ts"
@@ -132,7 +148,12 @@
       "import": "./dist/tooltip/index.js",
       "types": "./dist/tooltip/index.d.ts"
     },
-    "./tooltip.css": "./dist/tooltip/tooltip.css"
+    "./tooltip.css": "./dist/tooltip/tooltip.css",
+    "./popover": {
+      "import": "./dist/popover/index.js",
+      "types": "./dist/popover/index.d.ts"
+    },
+    "./popover.css": "./dist/popover/popover.css"
   },
   "publishConfig": {
     "access": "public",

package/src/accordion/accordion.tsx

@@ -3,17 +3,26 @@ import { Accordion as BaseAccordion } from "@base-ui/react/accordion";
 import styles from "./accordion.module.css";
 
 export interface AccordionItem {
+  /** Unique identifier for this panel. */
   value: string;
+  /** Content rendered inside the trigger button. */
   header: ReactNode;
+  /** Content revealed when the panel is expanded. */
   content: ReactNode;
+  /** When `true`, the item cannot be toggled. */
   disabled?: boolean;
 }
 
 export interface AccordionProps {
+  /** Array of items to render as collapsible panels. */
   items: AccordionItem[];
+  /** Allow multiple panels open at once. @default true */
   multiple?: boolean;
+  /** Initially expanded panel values (uncontrolled). */
   defaultValue?: string[];
+  /** Currently expanded panel values (controlled). */
   value?: string[];
+  /** Called when the set of open panels changes. */
   onValueChange?: (value: string[]) => void;
   className?: string;
 }
@@ -26,6 +35,11 @@ function ChevronIcon() {
   );
 }
 
+/**
+ * Collapsible content panels. Wraps `@base-ui/react` Accordion with pre-styled
+ * headers, triggers, and animated panels. Pass `multiple` to allow more than one
+ * panel open at a time.
+ */
 export function Accordion({ items, className, multiple = true, ...props }: AccordionProps) {
   return (
     <BaseAccordion.Root className={`${styles.root} ${className ?? ""}`} multiple={multiple} {...props}>

package/src/alert-dialog/alert-dialog.tsx

@@ -14,13 +14,19 @@ export interface AlertAction {
 }
 
 export interface AlertDialogProps {
+  /** Controlled open state. */
   open?: boolean;
+  /** Whether the dialog is initially open (uncontrolled). */
   defaultOpen?: boolean;
+  /** Called when the dialog opens or closes. */
   onOpenChange?: (open: boolean, eventDetails: unknown) => void;
+  /** Element that opens the dialog when clicked. */
   trigger?: ReactElement;
   /** Optional icon shown above the title. */
   icon?: ReactNode;
+  /** Dialog heading text. */
   title: ReactNode;
+  /** Supplementary text below the title. */
   description?: ReactNode;
   /**
    * Action buttons rendered right-aligned.
@@ -31,6 +37,11 @@ export interface AlertDialogProps {
   className?: string;
 }
 
+/**
+ * A modal that requires a user response before continuing. Blocks interaction
+ * with the rest of the page until dismissed. Two actions render side-by-side;
+ * three or more stack vertically.
+ */
 export function AlertDialog({ trigger, icon, title, description, actions, className, onOpenChange, ...props }: AlertDialogProps) {
   return (
     <BaseAlertDialog.Root onOpenChange={onOpenChange as never} {...props}>

package/src/badge/badge.tsx

@@ -4,10 +4,16 @@ import styles from "./badge.module.css";
 export type BadgeVariant = "default" | "solid" | "soft" | "success" | "warning" | "error" | "info";
 
 export interface BadgeProps extends ComponentPropsWithoutRef<"span"> {
+  /** Visual style and semantic colour. @default "default" */
   variant?: BadgeVariant;
+  /** Show a small coloured dot indicator before the label. */
   dot?: boolean;
 }
 
+/**
+ * Compact label for status, counts, and categories. A plain styled `<span>` —
+ * no base-ui dependency.
+ */
 export function Badge({ variant = "default", dot = false, className, children, ...props }: BadgeProps) {
   return (
     <span className={[styles.root, styles[`variant-${variant}`], className ?? ""].filter(Boolean).join(" ")} {...props}>

package/src/button/button.module.css

@@ -78,18 +78,21 @@
   }
   /* ─── Tones — set scoped color tokens ────────────────────────────── */
   /*
-   * Each tone exposes four custom properties consumed by the variants below:
-   *   --btn-color         solid bg / soft text / outline+ghost hover text
-   *   --btn-color-hover   solid bg hover
-   *   --btn-color-pressed solid bg pressed
+   * Each tone exposes scoped custom properties consumed by the variants below:
+   *   --btn-color         solid bg color
+   *   --btn-color-hover   solid bg on hover
+   *   --btn-color-pressed solid bg on press
+   *   --btn-text-color    text color for soft / outline / ghost variants
+   *                       (may differ from --btn-color for contrast on tinted surfaces)
    *   --btn-tint          soft bg
-   *   --btn-tint-hover    soft bg hover
+   *   --btn-tint-hover    soft bg on hover
    *   --btn-on-color      text on solid bg
    */
   .tone-primary {
-    --btn-color: var(--color-accent);
+    --btn-color: var(--color-accent-solid);
     --btn-color-hover: var(--color-accent-hover);
     --btn-color-pressed: var(--color-accent-pressed);
+    --btn-text-color: var(--color-accent-text);
     --btn-tint: var(--color-accent-tint);
     --btn-tint-hover: var(--color-accent-tint-hover);
     --btn-on-color: var(--color-on-accent);
@@ -98,6 +101,7 @@
     --btn-color: var(--color-secondary);
     --btn-color-hover: var(--color-primary);
     --btn-color-pressed: var(--color-primary);
+    --btn-text-color: var(--color-secondary);
     --btn-tint: var(--color-hover);
     --btn-tint-hover: var(--color-active);
     --btn-on-color: var(--color-canvas);
@@ -106,25 +110,28 @@
     --btn-color: var(--color-error-solid);
     --btn-color-hover: var(--color-error-solid);
     --btn-color-pressed: var(--color-error-solid);
+    --btn-text-color: var(--color-error-text);
     --btn-tint: var(--color-error-bg);
     --btn-tint-hover: var(--color-error-bg);
-    --btn-on-color: #ffffff;
+    --btn-on-color: var(--color-error-on-solid);
   }
   .tone-success {
     --btn-color: var(--color-success-solid);
     --btn-color-hover: var(--color-success-solid);
     --btn-color-pressed: var(--color-success-solid);
+    --btn-text-color: var(--color-success-text);
     --btn-tint: var(--color-success-bg);
     --btn-tint-hover: var(--color-success-bg);
-    --btn-on-color: #ffffff;
+    --btn-on-color: var(--color-success-on-solid);
   }
   .tone-warning {
     --btn-color: var(--color-warning-solid);
     --btn-color-hover: var(--color-warning-solid);
     --btn-color-pressed: var(--color-warning-solid);
+    --btn-text-color: var(--color-warning-text);
     --btn-tint: var(--color-warning-bg);
     --btn-tint-hover: var(--color-warning-bg);
-    --btn-on-color: #ffffff;
+    --btn-on-color: var(--color-warning-on-solid);
   }
   /* ─── Variants — consume tone tokens ────────────────────────────── */
   .variant-solid {
@@ -158,7 +165,7 @@
   .variant-soft {
     background-color: var(--btn-tint);
     border-color: transparent;
-    color: var(--btn-color);
+    color: var(--btn-text-color);
   }
   .variant-soft:hover:not([data-disabled]) {
     background-color: var(--btn-tint-hover);
@@ -173,10 +180,15 @@
     border-color: var(--color-line-strong);
     color: var(--color-primary);
   }
+  /* Non-secondary tones show their tone color at rest */
+  .variant-outline:not(.tone-secondary) {
+    border-color: var(--btn-text-color);
+    color: var(--btn-text-color);
+  }
   .variant-outline:hover:not([data-disabled]) {
     background-color: var(--color-hover);
-    border-color: var(--btn-color);
-    color: var(--btn-color);
+    border-color: var(--btn-text-color);
+    color: var(--btn-text-color);
   }
   .variant-outline:active:not([data-disabled]),
   .variant-outline[data-pressed]:not([data-disabled]) {
@@ -187,9 +199,13 @@
     border-color: transparent;
     color: var(--color-secondary);
   }
+  /* Non-secondary tones show their tone color at rest */
+  .variant-ghost:not(.tone-secondary) {
+    color: var(--btn-text-color);
+  }
   .variant-ghost:hover:not([data-disabled]) {
     background-color: var(--color-hover);
-    color: var(--btn-color);
+    color: var(--btn-text-color);
   }
   .variant-ghost:active:not([data-disabled]),
   .variant-ghost[data-pressed]:not([data-disabled]) {

package/src/button/button.tsx

@@ -8,22 +8,33 @@ export type ButtonTone = "primary" | "secondary" | "destructive" | "success" | "
 export type ButtonSize = "xs" | "sm" | "md" | "lg";
 
 export interface ButtonProps extends ComponentPropsWithoutRef<"button"> {
+  /** Visual shape — filled, tinted, outlined, or borderless. @default "solid" */
   variant?: ButtonVariant;
-  /** Semantic color. Defaults to "primary". */
-  tone?: ButtonTone;
-  size?: ButtonSize;
-  loading?: boolean;
+  /** Semantic colour. @default "primary" */
+  tone?: ButtonTone | undefined;
+  /** Controls padding and font size. @default "md" */
+  size?: ButtonSize | undefined;
+  /** Shows a spinner overlay and disables interaction. */
+  loading?: boolean | undefined;
   /**
    * Text shown in place of children while loading.
    * When provided the button width adapts to this text (variable width).
    * When omitted, children stay rendered invisibly — width stays stable.
    */
-  loadingText?: string;
-  iconOnly?: boolean;
-  render?: ReactElement;
-  nativeButton?: boolean;
+  loadingText?: string | undefined;
+  /** Renders as a square button with equal padding on all sides. */
+  iconOnly?: boolean | undefined;
+  /** Custom render element forwarded to base-ui Button. */
+  render?: ReactElement | undefined;
+  /** Use a native `<button>` element. @default true */
+  nativeButton?: boolean | undefined;
 }
 
+/**
+ * Pressable button with multiple variants, tones, and sizes. Composes
+ * `@base-ui/react` Button with focus management and disabled-while-loading.
+ * Supports a spinner overlay that preserves button width.
+ */
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
   {
     variant = "solid",

package/src/card/card.tsx

@@ -2,7 +2,9 @@ import type { ComponentPropsWithoutRef, ReactNode } from "react";
 import styles from "./card.module.css";
 
 export interface CardProps extends ComponentPropsWithoutRef<"div"> {
+  /** Apply a raised shadow for layered surfaces. */
   elevated?: boolean;
+  /** Add hover/active states for clickable cards. */
   interactive?: boolean;
 }
 
@@ -10,9 +12,14 @@ export interface CardProps extends ComponentPropsWithoutRef<"div"> {
 export interface CardHeaderProps extends Omit<ComponentPropsWithoutRef<"div">, "title"> {
   /** Card heading rendered in the header area. */
   heading?: ReactNode;
+  /** Secondary text below the heading. */
   description?: ReactNode;
 }
 
+/**
+ * Surface container with optional header, body, and footer slots.
+ * Pure HTML — no base-ui dependency.
+ */
 export function Card({ elevated, interactive, className, children, ...props }: CardProps) {
   return (
     <div
@@ -26,6 +33,7 @@ export function Card({ elevated, interactive, className, children, ...props }: C
   );
 }
 
+/** Header area with optional heading and description. */
 export function CardHeader({ heading, description, className, children, ...props }: CardHeaderProps) {
   return (
     <div className={`${styles.header} ${className ?? ""}`} {...props}>
@@ -36,6 +44,7 @@ export function CardHeader({ heading, description, className, children, ...props
   );
 }
 
+/** Padded body content area. */
 export function CardBody({ className, children, ...props }: ComponentPropsWithoutRef<"div">) {
   return (
     <div className={`${styles.body} ${className ?? ""}`} {...props}>
@@ -44,6 +53,7 @@ export function CardBody({ className, children, ...props }: ComponentPropsWithou
   );
 }
 
+/** Footer area, typically used for actions. */
 export function CardFooter({ className, children, ...props }: ComponentPropsWithoutRef<"div">) {
   return (
     <div className={`${styles.footer} ${className ?? ""}`} {...props}>

package/src/checkbox/checkbox.tsx

@@ -4,20 +4,33 @@ import { Checkbox as BaseCheckbox } from "@base-ui/react/checkbox";
 import styles from "./checkbox.module.css";
 
 export interface CheckboxProps {
+  /** Controlled checked state. */
   checked?: boolean;
+  /** Initial checked state (uncontrolled). */
   defaultChecked?: boolean;
+  /** Display a horizontal dash instead of a checkmark. */
   indeterminate?: boolean;
+  /** Prevent interaction and dim the checkbox. */
   disabled?: boolean;
+  /** Mark the field as required for form validation. */
   required?: boolean;
+  /** HTML name attribute for form submission. */
   name?: string;
+  /** HTML value attribute for form submission. */
   value?: string;
   /** Called when checked state changes. `eventDetails` is the base-ui event details object. */
   onCheckedChange?: (checked: boolean, eventDetails: unknown) => void;
+  /** Label content rendered next to the checkbox. */
   children?: ReactNode;
+  /** Override the auto-generated element id. */
   id?: string;
   className?: string;
 }
 
+/**
+ * Boolean selection with an accessible label. Wraps `@base-ui/react` Checkbox
+ * with a styled indicator, check icon, and label layout.
+ */
 export function Checkbox({ children, id, className, onCheckedChange, ...props }: CheckboxProps) {
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const checkboxId = id ?? useId();

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