@brijbyte/agentic-ui 0.0.3 → 0.0.5

package/dist/tooltip/parts.d.ts

@@ -6,15 +6,9 @@ import { Tooltip } from "@base-ui/react/tooltip";
 type BasePositionerProps = ComponentPropsWithoutRef<typeof Tooltip.Positioner>;
 type BasePopupProps = ComponentPropsWithoutRef<typeof Tooltip.Popup>;
 type BaseArrowProps = ComponentPropsWithoutRef<typeof Tooltip.Arrow>;
-interface TooltipPositionerProps extends Omit<BasePositionerProps, "className"> {
-  className?: string;
-}
-interface TooltipPopupProps extends Omit<BasePopupProps, "className"> {
-  className?: string;
-}
-interface TooltipArrowProps extends Omit<BaseArrowProps, "className"> {
-  className?: string;
-}
+interface TooltipPositionerProps extends BasePositionerProps {}
+interface TooltipPopupProps extends BasePopupProps {}
+interface TooltipArrowProps extends BaseArrowProps {}
 declare const TooltipPositioner: react.ForwardRefExoticComponent<TooltipPositionerProps & react.RefAttributes<HTMLDivElement>>;
 declare const TooltipPopup: react.ForwardRefExoticComponent<TooltipPopupProps & react.RefAttributes<HTMLDivElement>>;
 declare const TooltipArrow: react.ForwardRefExoticComponent<TooltipArrowProps & react.RefAttributes<HTMLDivElement>>;

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

@@ -1 +1 @@
-{"version":3,"file":"parts.d.ts","names":[],"sources":["../../src/tooltip/parts.tsx"],"mappings":";;;;;KA4BK,mBAAA,GAAsB,wBAAA,QAAgC,OAAA,CAAY,UAAA;AAAA,KAClE,cAAA,GAAiB,wBAAA,QAAgC,OAAA,CAAY,KAAA;AAAA,KAC7D,cAAA,GAAiB,wBAAA,QAAgC,OAAA,CAAY,KAAA;AAAA,UAEjD,sBAAA,SAA+B,IAAA,CAAK,mBAAA;EACnD,SAAA;AAAA;AAAA,UAEe,iBAAA,SAA0B,IAAA,CAAK,cAAA;EAC9C,SAAA;AAAA;AAAA,UAEe,iBAAA,SAA0B,IAAA,CAAK,cAAA;EAC9C,SAAA;AAAA;AAAA,cAGW,iBAAA,EAAiB,KAAA,CAAA,yBAAA,CAAA,sBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,cAAA;AAAA,cAOjB,YAAA,EAAY,KAAA,CAAA,yBAAA,CAAA,iBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,cAAA;AAAA,cAOZ,YAAA,EAAY,KAAA,CAAA,yBAAA,CAAA,iBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,cAAA"}
+{"version":3,"file":"parts.d.ts","names":[],"sources":["../../src/tooltip/parts.tsx"],"mappings":";;;;;KA6BK,mBAAA,GAAsB,wBAAA,QAAgC,OAAA,CAAY,UAAA;AAAA,KAClE,cAAA,GAAiB,wBAAA,QAAgC,OAAA,CAAY,KAAA;AAAA,KAC7D,cAAA,GAAiB,wBAAA,QAAgC,OAAA,CAAY,KAAA;AAAA,UAEjD,sBAAA,SAA+B,mBAAA;AAAA,UAC/B,iBAAA,SAA0B,cAAA;AAAA,UAC1B,iBAAA,SAA0B,cAAA;AAAA,cAE9B,iBAAA,EAAiB,KAAA,CAAA,yBAAA,CAAA,sBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,cAAA;AAAA,cAOjB,YAAA,EAAY,KAAA,CAAA,yBAAA,CAAA,iBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,cAAA;AAAA,cAOZ,YAAA,EAAY,KAAA,CAAA,yBAAA,CAAA,iBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,cAAA"}

package/dist/tooltip/parts.js

@@ -1,3 +1,4 @@
+import { cx, resolveClassName } from "../utils/resolveClassName.js";
 import tooltip_module_default from "./tooltip.module.js";
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
@@ -29,21 +30,21 @@ import { Tooltip } from "@base-ui/react/tooltip";
 const TooltipPositioner = forwardRef(function TooltipPositioner({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Tooltip.Positioner, {
 		ref,
-		className: `${tooltip_module_default.positioner} ${className ?? ""}`,
+		className: (state) => cx(tooltip_module_default.positioner, resolveClassName(className, state)),
 		...props
 	});
 });
 const TooltipPopup = forwardRef(function TooltipPopup({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Tooltip.Popup, {
 		ref,
-		className: `${tooltip_module_default.popup} ${className ?? ""}`,
+		className: (state) => cx(tooltip_module_default.popup, resolveClassName(className, state)),
 		...props
 	});
 });
 const TooltipArrow = forwardRef(function TooltipArrow({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Tooltip.Arrow, {
 		ref,
-		className: `${tooltip_module_default.arrow} ${className ?? ""}`,
+		className: (state) => cx(tooltip_module_default.arrow, resolveClassName(className, state)),
 		...props
 	});
 });

package/dist/tooltip/parts.js.map

@@ -1 +1 @@
-{"version":3,"file":"parts.js","names":["BaseTooltip","styles"],"sources":["../../src/tooltip/parts.tsx"],"sourcesContent":["/**\n * Styled primitives for Tooltip.\n *\n * @example\n * ```tsx\n * import { Tooltip } from '@base-ui/react/tooltip';\n * import { TooltipPositioner, TooltipPopup, TooltipArrow } from '@brijbyte/agentic-ui/tooltip';\n *\n * <Tooltip.Provider>\n *   <Tooltip.Root>\n *     <Tooltip.Trigger render={<button>Hover me</button>} />\n *     <Tooltip.Portal>\n *       <TooltipPositioner side=\"top\" sideOffset={6}>\n *         <TooltipPopup>\n *           <TooltipArrow />\n *           Tooltip content\n *         </TooltipPopup>\n *       </TooltipPositioner>\n *     </Tooltip.Portal>\n *   </Tooltip.Root>\n * </Tooltip.Provider>\n * ```\n */\nimport { forwardRef } from \"react\";\nimport type { ComponentRef, ComponentPropsWithoutRef } from \"react\";\nimport { Tooltip as BaseTooltip } from \"@base-ui/react/tooltip\";\nimport styles from \"./tooltip.module.css\";\n\ntype BasePositionerProps = ComponentPropsWithoutRef<typeof BaseTooltip.Positioner>;\ntype BasePopupProps = ComponentPropsWithoutRef<typeof BaseTooltip.Popup>;\ntype BaseArrowProps = ComponentPropsWithoutRef<typeof BaseTooltip.Arrow>;\n\nexport interface TooltipPositionerProps extends Omit<BasePositionerProps, \"className\"> {\n  className?: string;\n}\nexport interface TooltipPopupProps extends Omit<BasePopupProps, \"className\"> {\n  className?: string;\n}\nexport interface TooltipArrowProps extends Omit<BaseArrowProps, \"className\"> {\n  className?: string;\n}\n\nexport const TooltipPositioner = forwardRef<ComponentRef<typeof BaseTooltip.Positioner>, TooltipPositionerProps>(function TooltipPositioner(\n  { className, ...props },\n  ref,\n) {\n  return <BaseTooltip.Positioner ref={ref} className={`${styles.positioner} ${className ?? \"\"}`} {...props} />;\n});\n\nexport const TooltipPopup = forwardRef<ComponentRef<typeof BaseTooltip.Popup>, TooltipPopupProps>(function TooltipPopup(\n  { className, ...props },\n  ref,\n) {\n  return <BaseTooltip.Popup ref={ref} className={`${styles.popup} ${className ?? \"\"}`} {...props} />;\n});\n\nexport const TooltipArrow = forwardRef<ComponentRef<typeof BaseTooltip.Arrow>, TooltipArrowProps>(function TooltipArrow(\n  { className, ...props },\n  ref,\n) {\n  return <BaseTooltip.Arrow ref={ref} className={`${styles.arrow} ${className ?? \"\"}`} {...props} />;\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CA,MAAa,oBAAoB,WAAgF,SAAS,kBACxH,EAAE,WAAW,GAAG,SAChB,KACA;AACA,QAAO,oBAACA,QAAY,YAAb;EAA6B;EAAK,WAAW,GAAGC,uBAAO,WAAW,GAAG,aAAa;EAAM,GAAI;EAAS,CAAA;EAC5G;AAEF,MAAa,eAAe,WAAsE,SAAS,aACzG,EAAE,WAAW,GAAG,SAChB,KACA;AACA,QAAO,oBAACD,QAAY,OAAb;EAAwB;EAAK,WAAW,GAAGC,uBAAO,MAAM,GAAG,aAAa;EAAM,GAAI;EAAS,CAAA;EAClG;AAEF,MAAa,eAAe,WAAsE,SAAS,aACzG,EAAE,WAAW,GAAG,SAChB,KACA;AACA,QAAO,oBAACD,QAAY,OAAb;EAAwB;EAAK,WAAW,GAAGC,uBAAO,MAAM,GAAG,aAAa;EAAM,GAAI;EAAS,CAAA;EAClG"}
+{"version":3,"file":"parts.js","names":["BaseTooltip","styles"],"sources":["../../src/tooltip/parts.tsx"],"sourcesContent":["/**\n * Styled primitives for Tooltip.\n *\n * @example\n * ```tsx\n * import { Tooltip } from '@base-ui/react/tooltip';\n * import { TooltipPositioner, TooltipPopup, TooltipArrow } from '@brijbyte/agentic-ui/tooltip';\n *\n * <Tooltip.Provider>\n *   <Tooltip.Root>\n *     <Tooltip.Trigger render={<button>Hover me</button>} />\n *     <Tooltip.Portal>\n *       <TooltipPositioner side=\"top\" sideOffset={6}>\n *         <TooltipPopup>\n *           <TooltipArrow />\n *           Tooltip content\n *         </TooltipPopup>\n *       </TooltipPositioner>\n *     </Tooltip.Portal>\n *   </Tooltip.Root>\n * </Tooltip.Provider>\n * ```\n */\nimport { forwardRef } from \"react\";\nimport type { ComponentRef, ComponentPropsWithoutRef } from \"react\";\nimport { Tooltip as BaseTooltip } from \"@base-ui/react/tooltip\";\nimport styles from \"./tooltip.module.css\";\nimport { resolveClassName, cx } from \"../utils/resolveClassName\";\n\ntype BasePositionerProps = ComponentPropsWithoutRef<typeof BaseTooltip.Positioner>;\ntype BasePopupProps = ComponentPropsWithoutRef<typeof BaseTooltip.Popup>;\ntype BaseArrowProps = ComponentPropsWithoutRef<typeof BaseTooltip.Arrow>;\n\nexport interface TooltipPositionerProps extends BasePositionerProps {}\nexport interface TooltipPopupProps extends BasePopupProps {}\nexport interface TooltipArrowProps extends BaseArrowProps {}\n\nexport const TooltipPositioner = forwardRef<ComponentRef<typeof BaseTooltip.Positioner>, TooltipPositionerProps>(function TooltipPositioner(\n  { className, ...props },\n  ref,\n) {\n  return <BaseTooltip.Positioner ref={ref} className={(state) => cx(styles.positioner, resolveClassName(className, state))} {...props} />;\n});\n\nexport const TooltipPopup = forwardRef<ComponentRef<typeof BaseTooltip.Popup>, TooltipPopupProps>(function TooltipPopup(\n  { className, ...props },\n  ref,\n) {\n  return <BaseTooltip.Popup ref={ref} className={(state) => cx(styles.popup, resolveClassName(className, state))} {...props} />;\n});\n\nexport const TooltipArrow = forwardRef<ComponentRef<typeof BaseTooltip.Arrow>, TooltipArrowProps>(function TooltipArrow(\n  { className, ...props },\n  ref,\n) {\n  return <BaseTooltip.Arrow ref={ref} className={(state) => cx(styles.arrow, resolveClassName(className, state))} {...props} />;\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqCA,MAAa,oBAAoB,WAAgF,SAAS,kBACxH,EAAE,WAAW,GAAG,SAChB,KACA;AACA,QAAO,oBAACA,QAAY,YAAb;EAA6B;EAAK,YAAY,UAAU,GAAGC,uBAAO,YAAY,iBAAiB,WAAW,MAAM,CAAC;EAAE,GAAI;EAAS,CAAA;EACvI;AAEF,MAAa,eAAe,WAAsE,SAAS,aACzG,EAAE,WAAW,GAAG,SAChB,KACA;AACA,QAAO,oBAACD,QAAY,OAAb;EAAwB;EAAK,YAAY,UAAU,GAAGC,uBAAO,OAAO,iBAAiB,WAAW,MAAM,CAAC;EAAE,GAAI;EAAS,CAAA;EAC7H;AAEF,MAAa,eAAe,WAAsE,SAAS,aACzG,EAAE,WAAW,GAAG,SAChB,KACA;AACA,QAAO,oBAACD,QAAY,OAAb;EAAwB;EAAK,YAAY,UAAU,GAAGC,uBAAO,OAAO,iBAAiB,WAAW,MAAM,CAAC;EAAE,GAAI;EAAS,CAAA;EAC7H"}

package/dist/tooltip/tooltip.d.ts

@@ -4,12 +4,21 @@ 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/dist/utils/resolveClassName.js

@@ -0,0 +1,25 @@
+//#region src/utils/resolveClassName.ts
+/**
+* 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))}
+* ```
+*/
+function resolveClassName(className, state) {
+	return typeof className === "function" ? className(state) : className;
+}
+/**
+* Joins class name strings, filtering out falsy values.
+*/
+function cx(...classes) {
+	return classes.filter(Boolean).join(" ");
+}
+//#endregion
+export { cx, resolveClassName };
+
+//# sourceMappingURL=resolveClassName.js.map

package/dist/utils/resolveClassName.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolveClassName.js","names":[],"sources":["../../src/utils/resolveClassName.ts"],"sourcesContent":["/**\n * Resolves a base-ui className prop (string | function | undefined) into a string.\n * When the className is a function, it is called with the component state.\n * Used by styled parts to merge our fixed style class with the consumer's className.\n *\n * @example\n * ```tsx\n * // In a styled part, prepend our class while preserving function className support:\n * className={(state) => cx(styles.root, resolveClassName(className, state))}\n * ```\n */\nexport function resolveClassName<State>(\n  className: string | ((state: State) => string | undefined) | undefined,\n  state: State,\n): string | undefined {\n  return typeof className === \"function\" ? className(state) : className;\n}\n\n/**\n * Joins class name strings, filtering out falsy values.\n */\nexport function cx(...classes: (string | undefined | null | false)[]): string {\n  return classes.filter(Boolean).join(\" \");\n}\n"],"mappings":";;;;;;;;;;;;AAWA,SAAgB,iBACd,WACA,OACoB;AACpB,QAAO,OAAO,cAAc,aAAa,UAAU,MAAM,GAAG;;;;;AAM9D,SAAgB,GAAG,GAAG,SAAwD;AAC5E,QAAO,QAAQ,OAAO,QAAQ,CAAC,KAAK,IAAI"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brijbyte/agentic-ui",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "private": false,
   "repository": {
     "type": "git",
@@ -28,6 +28,7 @@
     "./layer-order": "./dist/layer-order.css",
     "./tokens": "./dist/tokens.css",
     "./reset": "./dist/reset.css",
+    "./reset-scoped": "./dist/reset-scoped.css",
     "./tailwind-theme": "./dist/tailwind-theme.css",
     "./alert-dialog": {
       "import": "./dist/alert-dialog/index.js",
@@ -89,6 +90,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"
@@ -99,6 +105,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"
@@ -133,7 +149,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",
@@ -143,8 +164,8 @@
     "@base-ui/react": "^1.3.0"
   },
   "devDependencies": {
-    "@types/react": "^19.0.0",
-    "@types/react-dom": "^19.0.0"
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3"
   },
   "peerDependencies": {
     "react": "^19.0.0",

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

@@ -1,6 +1,6 @@
 export { Accordion } from "./accordion";
 export type { AccordionProps, AccordionItem } from "./accordion";
 
-export { AccordionItem as AccordionItemPart, AccordionHeader, AccordionTrigger, AccordionPanel } from "./parts";
+export { AccordionItemPart, AccordionHeader, AccordionTrigger, AccordionPanel } from "./parts";
 export type { AccordionItemProps, AccordionHeaderProps, AccordionTriggerProps, AccordionPanelProps } from "./parts";
 export { AccordionStyles } from "./accordion";

package/src/accordion/parts.tsx

@@ -20,49 +20,42 @@ import { forwardRef } from "react";
 import type { ComponentRef, ComponentPropsWithoutRef } from "react";
 import { Accordion as BaseAccordion } from "@base-ui/react/accordion";
 import styles from "./accordion.module.css";
+import { resolveClassName, cx } from "../utils/resolveClassName";
 
 type BaseItemProps = ComponentPropsWithoutRef<typeof BaseAccordion.Item>;
 type BaseHeaderProps = ComponentPropsWithoutRef<typeof BaseAccordion.Header>;
 type BaseTriggerProps = ComponentPropsWithoutRef<typeof BaseAccordion.Trigger>;
 type BasePanelProps = ComponentPropsWithoutRef<typeof BaseAccordion.Panel>;
 
-export interface AccordionItemProps extends Omit<BaseItemProps, "className"> {
-  className?: string;
-}
-export interface AccordionHeaderProps extends Omit<BaseHeaderProps, "className"> {
-  className?: string;
-}
-export interface AccordionTriggerProps extends Omit<BaseTriggerProps, "className"> {
-  className?: string;
-}
-export interface AccordionPanelProps extends Omit<BasePanelProps, "className"> {
-  className?: string;
-}
+export interface AccordionItemProps extends BaseItemProps {}
+export interface AccordionHeaderProps extends BaseHeaderProps {}
+export interface AccordionTriggerProps extends BaseTriggerProps {}
+export interface AccordionPanelProps extends BasePanelProps {}
 
-export const AccordionItem = forwardRef<ComponentRef<typeof BaseAccordion.Item>, AccordionItemProps>(function AccordionItem(
+export const AccordionItemPart = forwardRef<ComponentRef<typeof BaseAccordion.Item>, AccordionItemProps>(function AccordionItemPart(
   { className, ...props },
   ref,
 ) {
-  return <BaseAccordion.Item ref={ref} className={`${styles.item} ${className ?? ""}`} {...props} />;
+  return <BaseAccordion.Item ref={ref} className={(state) => cx(styles.item, resolveClassName(className, state))} {...props} />;
 });
 
 export const AccordionHeader = forwardRef<ComponentRef<typeof BaseAccordion.Header>, AccordionHeaderProps>(function AccordionHeader(
   { className, ...props },
   ref,
 ) {
-  return <BaseAccordion.Header ref={ref} className={`${styles.header} ${className ?? ""}`} {...props} />;
+  return <BaseAccordion.Header ref={ref} className={(state) => cx(styles.header, resolveClassName(className, state))} {...props} />;
 });
 
 export const AccordionTrigger = forwardRef<ComponentRef<typeof BaseAccordion.Trigger>, AccordionTriggerProps>(function AccordionTrigger(
   { className, ...props },
   ref,
 ) {
-  return <BaseAccordion.Trigger ref={ref} className={`${styles.trigger} ${className ?? ""}`} {...props} />;
+  return <BaseAccordion.Trigger ref={ref} className={(state) => cx(styles.trigger, resolveClassName(className, state))} {...props} />;
 });
 
 export const AccordionPanel = forwardRef<ComponentRef<typeof BaseAccordion.Panel>, AccordionPanelProps>(function AccordionPanel(
   { className, ...props },
   ref,
 ) {
-  return <BaseAccordion.Panel ref={ref} className={`${styles.panel} ${className ?? ""}`} {...props} />;
+  return <BaseAccordion.Panel ref={ref} className={(state) => cx(styles.panel, resolveClassName(className, state))} {...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/alert-dialog/parts.tsx

@@ -3,52 +3,42 @@
  *
  * @example
  * ```tsx
- * import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog';
- * import { Button } from '@brijbyte/agentic-ui/button';
+ * import { AlertDialog } from '@base-ui/react/alert-dialog';
  * import { AlertDialogBackdrop, AlertDialogPopup, AlertDialogTitle, AlertDialogDescription } from '@brijbyte/agentic-ui/alert-dialog';
  *
- * <BaseAlertDialog.Root>
- *   <BaseAlertDialog.Trigger render={<button>Open</button>} />
- *   <BaseAlertDialog.Portal>
+ * <AlertDialog.Root>
+ *   <AlertDialog.Trigger render={<button>Open</button>} />
+ *   <AlertDialog.Portal>
  *     <AlertDialogBackdrop />
- *     <AlertDialogPopup>
- *       <AlertDialogTitle>Delete account?</AlertDialogTitle>
- *       <AlertDialogDescription>This cannot be undone.</AlertDialogDescription>
- *       <div>
- *         <BaseAlertDialog.Close render={<Button variant="soft" tone="destructive" size="sm" />}>Delete</BaseAlertDialog.Close>
- *         <BaseAlertDialog.Close render={<Button variant="outline" size="sm" />}>Cancel</BaseAlertDialog.Close>
- *       </div>
- *     </AlertDialogPopup>
- *   </BaseAlertDialog.Portal>
- * </BaseAlertDialog.Root>
+ *     <AlertDialog.Viewport>
+ *       <AlertDialogPopup>
+ *         <AlertDialogTitle>Confirm</AlertDialogTitle>
+ *         <AlertDialogDescription>Are you sure?</AlertDialogDescription>
+ *       </AlertDialogPopup>
+ *     </AlertDialog.Viewport>
+ *   </AlertDialog.Portal>
+ * </AlertDialog.Root>
  * ```
  */
 import { forwardRef } from "react";
 import type { ComponentRef, ComponentPropsWithoutRef } from "react";
 import { AlertDialog as BaseAlertDialog } from "@base-ui/react/alert-dialog";
 import styles from "./alert-dialog.module.css";
+import { resolveClassName, cx } from "../utils/resolveClassName";
 
 type BaseBackdropProps = ComponentPropsWithoutRef<typeof BaseAlertDialog.Backdrop>;
 type BasePopupProps = ComponentPropsWithoutRef<typeof BaseAlertDialog.Popup>;
 type BaseTitleProps = ComponentPropsWithoutRef<typeof BaseAlertDialog.Title>;
 type BaseDescriptionProps = ComponentPropsWithoutRef<typeof BaseAlertDialog.Description>;
 
-export interface AlertDialogBackdropProps extends Omit<BaseBackdropProps, "className"> {
-  className?: string;
-}
-export interface AlertDialogPopupProps extends Omit<BasePopupProps, "className"> {
-  className?: string;
-}
-export interface AlertDialogTitleProps extends Omit<BaseTitleProps, "className"> {
-  className?: string;
-}
-export interface AlertDialogDescriptionProps extends Omit<BaseDescriptionProps, "className"> {
-  className?: string;
-}
+export interface AlertDialogBackdropProps extends BaseBackdropProps {}
+export interface AlertDialogPopupProps extends BasePopupProps {}
+export interface AlertDialogTitleProps extends BaseTitleProps {}
+export interface AlertDialogDescriptionProps extends BaseDescriptionProps {}
 
 export const AlertDialogBackdrop = forwardRef<ComponentRef<typeof BaseAlertDialog.Backdrop>, AlertDialogBackdropProps>(
   function AlertDialogBackdrop({ className, ...props }, ref) {
-    return <BaseAlertDialog.Backdrop ref={ref} className={`${styles.backdrop} ${className ?? ""}`} {...props} />;
+    return <BaseAlertDialog.Backdrop ref={ref} className={(state) => cx(styles.backdrop, resolveClassName(className, state))} {...props} />;
   },
 );
 
@@ -56,18 +46,20 @@ export const AlertDialogPopup = forwardRef<ComponentRef<typeof BaseAlertDialog.P
   { className, ...props },
   ref,
 ) {
-  return <BaseAlertDialog.Popup ref={ref} className={`${styles.popup} ${className ?? ""}`} {...props} />;
+  return <BaseAlertDialog.Popup ref={ref} className={(state) => cx(styles.popup, resolveClassName(className, state))} {...props} />;
 });
 
 export const AlertDialogTitle = forwardRef<ComponentRef<typeof BaseAlertDialog.Title>, AlertDialogTitleProps>(function AlertDialogTitle(
   { className, ...props },
   ref,
 ) {
-  return <BaseAlertDialog.Title ref={ref} className={`${styles.title} ${className ?? ""}`} {...props} />;
+  return <BaseAlertDialog.Title ref={ref} className={(state) => cx(styles.title, resolveClassName(className, state))} {...props} />;
 });
 
 export const AlertDialogDescription = forwardRef<ComponentRef<typeof BaseAlertDialog.Description>, AlertDialogDescriptionProps>(
   function AlertDialogDescription({ className, ...props }, ref) {
-    return <BaseAlertDialog.Description ref={ref} className={`${styles.description} ${className ?? ""}`} {...props} />;
+    return (
+      <BaseAlertDialog.Description ref={ref} className={(state) => cx(styles.description, resolveClassName(className, state))} {...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.tsx

@@ -8,10 +8,13 @@ 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". */
+  /** 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.
@@ -19,11 +22,19 @@ export interface ButtonProps extends ComponentPropsWithoutRef<"button"> {
    * When omitted, children stay rendered invisibly — width stays stable.
    */
   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();