@brijbyte/agentic-ui 0.0.3 → 0.0.4

package/dist/switch/switch.css

@@ -7,11 +7,14 @@
     display: flex;
   }
 
-  .root_3hDtBa[data-disabled] {
-    opacity: .44;
+  .root_3hDtBa:has([data-disabled]) {
     cursor: not-allowed;
   }
 
+  .root_3hDtBa:has([data-disabled]) .label_3hDtBa {
+    opacity: .44;
+  }
+
   .thumb-track_3hDtBa {
     border-radius: var(--radius-full);
     background-color: var(--color-surface-3);
@@ -26,6 +29,12 @@
     position: relative;
   }
 
+  .thumb-track_3hDtBa[data-disabled] {
+    opacity: .44;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
   .thumb-track_3hDtBa:focus-visible {
     box-shadow: var(--shadow-focus);
   }

package/dist/switch/switch.d.ts

@@ -4,18 +4,30 @@ import styles from "./switch.module.css";
 
 //#region src/switch/switch.d.ts
 interface SwitchProps {
+  /** Controlled checked state. */
   checked?: boolean;
+  /** Initial checked state (uncontrolled). */
   defaultChecked?: boolean;
+  /** Prevent interaction. */
   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 switch. */
   children?: ReactNode;
+  /** Override the auto-generated element id. */
   id?: string;
   className?: string;
 }
+/**
+ * Toggle for boolean settings. Renders a track with a sliding thumb and
+ * an optional label. Wraps `@base-ui/react` Switch.
+ */
 declare function Switch({
   children,
   id,

package/dist/switch/switch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"switch.d.ts","names":[],"sources":["../../src/switch/switch.tsx"],"mappings":";;;;;UAKiB,WAAA;EACf,OAAA;EACA,cAAA;EACA,QAAA;EACA,QAAA;EACA,IAAA;EACA,KAAA;EALA;EAOA,eAAA,IAAmB,OAAA,WAAkB,YAAA;EACrC,QAAA,GAAW,SAAA;EACX,EAAA;EACA,SAAA;AAAA;AAAA,iBAGc,MAAA,CAAA;EAAS,QAAA;EAAU,EAAA;EAAI,SAAA;EAAW,eAAA;EAAA,GAAoB;AAAA,GAAS,WAAA,GAAW,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"switch.d.ts","names":[],"sources":["../../src/switch/switch.tsx"],"mappings":";;;;;UAKiB,WAAA;;EAEf,OAAA;EAFe;EAIf,cAAA;;EAEA,QAAA;EAJA;EAMA,QAAA;EAFA;EAIA,IAAA;EAAA;EAEA,KAAA;EAEA;EAAA,eAAA,IAAmB,OAAA,WAAkB,YAAA;EAAA;EAErC,QAAA,GAAW,SAAA;EAAA;EAEX,EAAA;EACA,SAAA;AAAA;;AAOF;;;iBAAgB,MAAA,CAAA;EAAS,QAAA;EAAU,EAAA;EAAI,SAAA;EAAW,eAAA;EAAA,GAAoB;AAAA,GAAS,WAAA,GAAW,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/switch/switch.js

@@ -3,6 +3,10 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useId } from "react";
 import { Switch } from "@base-ui/react/switch";
 //#region src/switch/switch.tsx
+/**
+* Toggle for boolean settings. Renders a track with a sliding thumb and
+* an optional label. Wraps `@base-ui/react` Switch.
+*/
 function Switch$1({ children, id, className, onCheckedChange, ...props }) {
 	const switchId = id ?? useId();
 	return /* @__PURE__ */ jsxs("label", {

package/dist/switch/switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch.js","names":["Switch","styles","BaseSwitch"],"sources":["../../src/switch/switch.tsx"],"sourcesContent":["import { useId } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { Switch as BaseSwitch } from \"@base-ui/react/switch\";\nimport styles from \"./switch.module.css\";\n\nexport interface SwitchProps {\n  checked?: boolean;\n  defaultChecked?: boolean;\n  disabled?: boolean;\n  required?: boolean;\n  name?: string;\n  value?: string;\n  /** Called when checked state changes. `eventDetails` is the base-ui event details object. */\n  onCheckedChange?: (checked: boolean, eventDetails: unknown) => void;\n  children?: ReactNode;\n  id?: string;\n  className?: string;\n}\n\nexport function Switch({ children, id, className, onCheckedChange, ...props }: SwitchProps) {\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  const switchId = id ?? useId();\n\n  return (\n    <label className={`${styles.root} ${className ?? \"\"}`} htmlFor={switchId}>\n      <BaseSwitch.Root id={switchId} className={styles[\"thumb-track\"]} onCheckedChange={onCheckedChange as never} {...props}>\n        <BaseSwitch.Thumb className={styles.thumb} />\n      </BaseSwitch.Root>\n      {children && <span className={styles.label}>{children}</span>}\n    </label>\n  );\n}\nexport { styles as SwitchStyles };\n"],"mappings":";;;;;AAmBA,SAAgBA,SAAO,EAAE,UAAU,IAAI,WAAW,iBAAiB,GAAG,SAAsB;CAE1F,MAAM,WAAW,MAAM,OAAO;AAE9B,QACE,qBAAC,SAAD;EAAO,WAAW,GAAGC,sBAAO,KAAK,GAAG,aAAa;EAAM,SAAS;YAAhE,CACE,oBAACC,OAAW,MAAZ;GAAiB,IAAI;GAAU,WAAWD,sBAAO;GAAiC;GAA0B,GAAI;aAC9G,oBAACC,OAAW,OAAZ,EAAkB,WAAWD,sBAAO,OAAS,CAAA;GAC7B,CAAA,EACjB,YAAY,oBAAC,QAAD;GAAM,WAAWA,sBAAO;GAAQ;GAAgB,CAAA,CACvD"}
+{"version":3,"file":"switch.js","names":["Switch","styles","BaseSwitch"],"sources":["../../src/switch/switch.tsx"],"sourcesContent":["import { useId } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { Switch as BaseSwitch } from \"@base-ui/react/switch\";\nimport styles from \"./switch.module.css\";\n\nexport interface SwitchProps {\n  /** Controlled checked state. */\n  checked?: boolean;\n  /** Initial checked state (uncontrolled). */\n  defaultChecked?: boolean;\n  /** Prevent interaction. */\n  disabled?: boolean;\n  /** Mark the field as required for form validation. */\n  required?: boolean;\n  /** HTML name attribute for form submission. */\n  name?: string;\n  /** HTML value attribute for form submission. */\n  value?: string;\n  /** Called when checked state changes. `eventDetails` is the base-ui event details object. */\n  onCheckedChange?: (checked: boolean, eventDetails: unknown) => void;\n  /** Label content rendered next to the switch. */\n  children?: ReactNode;\n  /** Override the auto-generated element id. */\n  id?: string;\n  className?: string;\n}\n\n/**\n * Toggle for boolean settings. Renders a track with a sliding thumb and\n * an optional label. Wraps `@base-ui/react` Switch.\n */\nexport function Switch({ children, id, className, onCheckedChange, ...props }: SwitchProps) {\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  const switchId = id ?? useId();\n\n  return (\n    <label className={`${styles.root} ${className ?? \"\"}`} htmlFor={switchId}>\n      <BaseSwitch.Root id={switchId} className={styles[\"thumb-track\"]} onCheckedChange={onCheckedChange as never} {...props}>\n        <BaseSwitch.Thumb className={styles.thumb} />\n      </BaseSwitch.Root>\n      {children && <span className={styles.label}>{children}</span>}\n    </label>\n  );\n}\nexport { styles as SwitchStyles };\n"],"mappings":";;;;;;;;;AA+BA,SAAgBA,SAAO,EAAE,UAAU,IAAI,WAAW,iBAAiB,GAAG,SAAsB;CAE1F,MAAM,WAAW,MAAM,OAAO;AAE9B,QACE,qBAAC,SAAD;EAAO,WAAW,GAAGC,sBAAO,KAAK,GAAG,aAAa;EAAM,SAAS;YAAhE,CACE,oBAACC,OAAW,MAAZ;GAAiB,IAAI;GAAU,WAAWD,sBAAO;GAAiC;GAA0B,GAAI;aAC9G,oBAACC,OAAW,OAAZ,EAAkB,WAAWD,sBAAO,OAAS,CAAA;GAC7B,CAAA,EACjB,YAAY,oBAAC,QAAD;GAAM,WAAWA,sBAAO;GAAQ;GAAgB,CAAA,CACvD"}

package/dist/switch/switch.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch.module.js","names":[],"sources":["../../src/switch/switch.module.css"],"sourcesContent":["@layer components {\n  .root {\n    display: flex;\n    align-items: center;\n    gap: var(--space-2);\n    cursor: pointer;\n    user-select: none;\n  }\n  .root[data-disabled] {\n    opacity: 0.44;\n    cursor: not-allowed;\n  }\n  .thumb-track {\n    position: relative;\n    width: 36px;\n    height: 20px;\n    border-radius: var(--radius-full);\n    background-color: var(--color-surface-3);\n    border: var(--border-width-base) solid var(--color-line);\n    transition:\n      background-color var(--duration-normal) var(--easing-standard),\n      border-color var(--duration-normal) var(--easing-standard),\n      box-shadow var(--duration-fast) var(--easing-standard);\n    outline: none;\n    flex-shrink: 0;\n  }\n  .thumb-track:focus-visible {\n    box-shadow: var(--shadow-focus);\n  }\n  .thumb-track[data-checked] {\n    background-color: var(--color-accent);\n    border-color: var(--color-accent);\n  }\n  .thumb-track[data-checked]:hover {\n    background-color: var(--color-accent-hover);\n    border-color: var(--color-accent-hover);\n  }\n  .thumb {\n    position: absolute;\n    top: 2px;\n    left: 2px;\n    width: 14px;\n    height: 14px;\n    border-radius: var(--radius-full);\n    background-color: #ffffff;\n    box-shadow: var(--shadow-xs);\n    transition: transform var(--duration-normal) var(--easing-spring);\n  }\n  .thumb-track[data-checked] .thumb {\n    transform: translateX(16px);\n  }\n  .label {\n    font-family: var(--font-mono);\n    font-size: var(--font-size-sm);\n    color: var(--color-primary);\n  }\n}\n"],"mappings":";AAQA,IAAA,wBAAa;CAAA,SAAU;CAAA,QAAA;CAAA,SAAA;CAAA,eAAA;CAAA"}
+{"version":3,"file":"switch.module.js","names":[],"sources":["../../src/switch/switch.module.css"],"sourcesContent":["@layer components {\n  .root {\n    display: flex;\n    align-items: center;\n    gap: var(--space-2);\n    cursor: pointer;\n    user-select: none;\n  }\n  /* data-disabled lives on the inner button, not the label wrapper.\n     Use :has() to dim the label text, and target the track directly. */\n  .root:has([data-disabled]) {\n    cursor: not-allowed;\n  }\n  .root:has([data-disabled]) .label {\n    opacity: 0.44;\n  }\n  .thumb-track {\n    position: relative;\n    width: 36px;\n    height: 20px;\n    border-radius: var(--radius-full);\n    background-color: var(--color-surface-3);\n    border: var(--border-width-base) solid var(--color-line);\n    transition:\n      background-color var(--duration-normal) var(--easing-standard),\n      border-color var(--duration-normal) var(--easing-standard),\n      box-shadow var(--duration-fast) var(--easing-standard);\n    outline: none;\n    flex-shrink: 0;\n  }\n  .thumb-track[data-disabled] {\n    opacity: 0.44;\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n  .thumb-track:focus-visible {\n    box-shadow: var(--shadow-focus);\n  }\n  .thumb-track[data-checked] {\n    background-color: var(--color-accent);\n    border-color: var(--color-accent);\n  }\n  .thumb-track[data-checked]:hover {\n    background-color: var(--color-accent-hover);\n    border-color: var(--color-accent-hover);\n  }\n  .thumb {\n    position: absolute;\n    top: 2px;\n    left: 2px;\n    width: 14px;\n    height: 14px;\n    border-radius: var(--radius-full);\n    background-color: #ffffff;\n    box-shadow: var(--shadow-xs);\n    transition: transform var(--duration-normal) var(--easing-spring);\n  }\n  .thumb-track[data-checked] .thumb {\n    transform: translateX(16px);\n  }\n  .label {\n    font-family: var(--font-mono);\n    font-size: var(--font-size-sm);\n    color: var(--color-primary);\n  }\n}\n"],"mappings":";AAQA,IAAA,wBAAU;CAAA,SAAc;CAAc,QAAQ;CAAc,SAAO;CAAA,eAAA;CAAA"}

package/dist/tabs/tabs.d.ts

@@ -11,13 +11,20 @@ interface TabItem {
   icon?: ReactNode;
 }
 interface TabsProps {
+  /** Array of tab definitions to render. */
   items: TabItem[];
+  /** Currently active tab value (controlled). */
   value?: string;
+  /** Initially active tab value (uncontrolled). Defaults to the first item. */
   defaultValue?: string;
-  /** `eventDetails` is the base-ui event details object. */
+  /** Called when the active tab changes. `eventDetails` is the base-ui event details object. */
   onValueChange?: (value: unknown, eventDetails: unknown) => void;
   className?: string;
 }
+/**
+ * Tab navigation for switching between content panels. Each tab can have
+ * an optional icon and can be individually disabled.
+ */
 declare function Tabs({
   items,
   className,

package/dist/tabs/tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.d.ts","names":[],"sources":["../../src/tabs/tabs.tsx"],"mappings":";;;;;UAIiB,OAAA;EACf,KAAA;EACA,KAAA,EAAO,SAAA;EACP,OAAA,EAAS,SAAA;EACT,QAAA;EACA,IAAA,GAAO,SAAA;AAAA;AAAA,UAGQ,SAAA;EACf,KAAA,EAAO,OAAA;EACP,KAAA;EACA,YAAA;EAVA;EAYA,aAAA,IAAiB,KAAA,WAAgB,YAAA;EACjC,SAAA;AAAA;AAAA,iBAGc,IAAA,CAAA;EAAO,KAAA;EAAO,SAAA;EAAA,GAAc;AAAA,GAAS,SAAA,GAAS,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"tabs.d.ts","names":[],"sources":["../../src/tabs/tabs.tsx"],"mappings":";;;;;UAIiB,OAAA;EACf,KAAA;EACA,KAAA,EAAO,SAAA;EACP,OAAA,EAAS,SAAA;EACT,QAAA;EACA,IAAA,GAAO,SAAA;AAAA;AAAA,UAGQ,SAAA;EAHR;EAKP,KAAA,EAAO,OAAA;EALS;EAOhB,KAAA;EAVA;EAYA,YAAA;EAXA;EAaA,aAAA,IAAiB,KAAA,WAAgB,YAAA;EACjC,SAAA;AAAA;;;;AATF;iBAgBgB,IAAA,CAAA;EAAO,KAAA;EAAO,SAAA;EAAA,GAAc;AAAA,GAAS,SAAA,GAAS,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/tabs/tabs.js

@@ -2,6 +2,10 @@ import tabs_module_default from "./tabs.module.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Tabs } from "@base-ui/react/tabs";
 //#region src/tabs/tabs.tsx
+/**
+* Tab navigation for switching between content panels. Each tab can have
+* an optional icon and can be individually disabled.
+*/
 function Tabs$1({ items, className, ...props }) {
 	const defaultVal = props.defaultValue ?? items[0]?.value;
 	return /* @__PURE__ */ jsxs(Tabs.Root, {

package/dist/tabs/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","names":["Tabs","BaseTabs","styles"],"sources":["../../src/tabs/tabs.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { Tabs as BaseTabs } from \"@base-ui/react/tabs\";\nimport styles from \"./tabs.module.css\";\n\nexport interface TabItem {\n  value: string;\n  label: ReactNode;\n  content: ReactNode;\n  disabled?: boolean;\n  icon?: ReactNode;\n}\n\nexport interface TabsProps {\n  items: TabItem[];\n  value?: string;\n  defaultValue?: string;\n  /** `eventDetails` is the base-ui event details object. */\n  onValueChange?: (value: unknown, eventDetails: unknown) => void;\n  className?: string;\n}\n\nexport function Tabs({ items, className, ...props }: TabsProps) {\n  const defaultVal = props.defaultValue ?? items[0]?.value;\n\n  return (\n    <BaseTabs.Root\n      className={`${styles.root} ${className ?? \"\"}`}\n      defaultValue={defaultVal}\n      onValueChange={props.onValueChange as never}\n      value={props.value}\n    >\n      <BaseTabs.List className={styles.list}>\n        {items.map((item) => (\n          <BaseTabs.Tab key={item.value} value={item.value} disabled={item.disabled} className={styles.tab}>\n            {item.icon}\n            {item.label}\n          </BaseTabs.Tab>\n        ))}\n      </BaseTabs.List>\n      {items.map((item) => (\n        <BaseTabs.Panel key={item.value} value={item.value} className={styles.panel}>\n          {item.content}\n        </BaseTabs.Panel>\n      ))}\n    </BaseTabs.Root>\n  );\n}\nexport { styles as TabsStyles };\n"],"mappings":";;;;AAqBA,SAAgBA,OAAK,EAAE,OAAO,WAAW,GAAG,SAAoB;CAC9D,MAAM,aAAa,MAAM,gBAAgB,MAAM,IAAI;AAEnD,QACE,qBAACC,KAAS,MAAV;EACE,WAAW,GAAGC,oBAAO,KAAK,GAAG,aAAa;EAC1C,cAAc;EACd,eAAe,MAAM;EACrB,OAAO,MAAM;YAJf,CAME,oBAACD,KAAS,MAAV;GAAe,WAAWC,oBAAO;aAC9B,MAAM,KAAK,SACV,qBAACD,KAAS,KAAV;IAA+B,OAAO,KAAK;IAAO,UAAU,KAAK;IAAU,WAAWC,oBAAO;cAA7F,CACG,KAAK,MACL,KAAK,MACO;MAHI,KAAK,MAGT,CACf;GACY,CAAA,EACf,MAAM,KAAK,SACV,oBAACD,KAAS,OAAV;GAAiC,OAAO,KAAK;GAAO,WAAWC,oBAAO;aACnE,KAAK;GACS,EAFI,KAAK,MAET,CACjB,CACY"}
+{"version":3,"file":"tabs.js","names":["Tabs","BaseTabs","styles"],"sources":["../../src/tabs/tabs.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { Tabs as BaseTabs } from \"@base-ui/react/tabs\";\nimport styles from \"./tabs.module.css\";\n\nexport interface TabItem {\n  value: string;\n  label: ReactNode;\n  content: ReactNode;\n  disabled?: boolean;\n  icon?: ReactNode;\n}\n\nexport interface TabsProps {\n  /** Array of tab definitions to render. */\n  items: TabItem[];\n  /** Currently active tab value (controlled). */\n  value?: string;\n  /** Initially active tab value (uncontrolled). Defaults to the first item. */\n  defaultValue?: string;\n  /** Called when the active tab changes. `eventDetails` is the base-ui event details object. */\n  onValueChange?: (value: unknown, eventDetails: unknown) => void;\n  className?: string;\n}\n\n/**\n * Tab navigation for switching between content panels. Each tab can have\n * an optional icon and can be individually disabled.\n */\nexport function Tabs({ items, className, ...props }: TabsProps) {\n  const defaultVal = props.defaultValue ?? items[0]?.value;\n\n  return (\n    <BaseTabs.Root\n      className={`${styles.root} ${className ?? \"\"}`}\n      defaultValue={defaultVal}\n      onValueChange={props.onValueChange as never}\n      value={props.value}\n    >\n      <BaseTabs.List className={styles.list}>\n        {items.map((item) => (\n          <BaseTabs.Tab key={item.value} value={item.value} disabled={item.disabled} className={styles.tab}>\n            {item.icon}\n            {item.label}\n          </BaseTabs.Tab>\n        ))}\n      </BaseTabs.List>\n      {items.map((item) => (\n        <BaseTabs.Panel key={item.value} value={item.value} className={styles.panel}>\n          {item.content}\n        </BaseTabs.Panel>\n      ))}\n    </BaseTabs.Root>\n  );\n}\nexport { styles as TabsStyles };\n"],"mappings":";;;;;;;;AA4BA,SAAgBA,OAAK,EAAE,OAAO,WAAW,GAAG,SAAoB;CAC9D,MAAM,aAAa,MAAM,gBAAgB,MAAM,IAAI;AAEnD,QACE,qBAACC,KAAS,MAAV;EACE,WAAW,GAAGC,oBAAO,KAAK,GAAG,aAAa;EAC1C,cAAc;EACd,eAAe,MAAM;EACrB,OAAO,MAAM;YAJf,CAME,oBAACD,KAAS,MAAV;GAAe,WAAWC,oBAAO;aAC9B,MAAM,KAAK,SACV,qBAACD,KAAS,KAAV;IAA+B,OAAO,KAAK;IAAO,UAAU,KAAK;IAAU,WAAWC,oBAAO;cAA7F,CACG,KAAK,MACL,KAAK,MACO;MAHI,KAAK,MAGT,CACf;GACY,CAAA,EACf,MAAM,KAAK,SACV,oBAACD,KAAS,OAAV;GAAiC,OAAO,KAAK;GAAO,WAAWC,oBAAO;aACnE,KAAK;GACS,EAFI,KAAK,MAET,CACjB,CACY"}

package/dist/toast/toast.d.ts

@@ -24,16 +24,27 @@ interface ToastViewportProps {
 }
 interface ToastProviderProps {
   children: ReactNode;
+  /** Layout style for the viewport. @default "list" */
   variant?: ToastViewportProps["variant"];
+  /** Maximum number of toasts shown at once. */
   limit?: number;
+  /** Auto-dismiss delay in milliseconds. */
   timeout?: number;
 }
+/**
+ * Drop-in provider that wires limit defaults to the chosen viewport variant.
+ * Use this instead of base-ui's `Toast.Provider` when using `ToastViewport`.
+ */
 declare function ToastProvider({
   children,
   variant,
   limit,
   timeout
 }: ToastProviderProps): react_jsx_runtime0.JSX.Element;
+/**
+ * Renders and manages toast notifications. Supports `"stacked"` (Sonner-style
+ * fanned cards) and `"list"` (vertically stacked, each fully visible) layouts.
+ */
 declare function ToastViewport({
   variant,
   limit: _limit

package/dist/toast/toast.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toast.d.ts","names":[],"sources":["../../src/toast/toast.tsx"],"mappings":";;;;;;KAIY,SAAA;AAAA,cAGC,eAAA,SAAe,KAAA,CAAA,eAAA;AAAA,UAgDX,kBAAA;EAnDL;;;;;AAGZ;;EAwDE,OAAA;EAxD0B;;AAgD5B;;;EAcE,KAAA;AAAA;AAAA,UAQe,kBAAA;EACf,QAAA,EAAU,SAAA;EACV,OAAA,GAAU,kBAAA;EACV,KAAA;EACA,OAAA;AAAA;AAAA,iBAYc,aAAA,CAAA;EAAgB,QAAA;EAAU,OAAA;EAAkB,KAAA;EAAO;AAAA,GAAW,kBAAA,GAAkB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAShF,aAAA,CAAA;EAAgB,OAAA;EAAkB,KAAA,EAAO;AAAA,GAAU,kBAAA,GAAkB,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"toast.d.ts","names":[],"sources":["../../src/toast/toast.tsx"],"mappings":";;;;;;KAIY,SAAA;AAAA,cAGC,eAAA,SAAe,KAAA,CAAA,eAAA;AAAA,UAgDX,kBAAA;EAnDL;;;;;AAGZ;;EAwDE,OAAA;EAxD0B;;AAgD5B;;;EAcE,KAAA;AAAA;AAAA,UAQe,kBAAA;EACf,QAAA,EAAU,SAAA;;EAEV,OAAA,GAAU,kBAAA;EAFV;EAIA,KAAA;EAFA;EAIA,OAAA;AAAA;;;;AAgBF;iBAAgB,aAAA,CAAA;EAAgB,QAAA;EAAU,OAAA;EAAkB,KAAA;EAAO;AAAA,GAAW,kBAAA,GAAkB,kBAAA,CAAA,GAAA,CAAA,OAAA;;;;;iBAahF,aAAA,CAAA;EAAgB,OAAA;EAAkB,KAAA,EAAO;AAAA,GAAU,kBAAA,GAAkB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/toast/toast.js

@@ -118,6 +118,10 @@ const MAX_LIMIT = {
 	stacked: 10,
 	list: 5
 };
+/**
+* Drop-in provider that wires limit defaults to the chosen viewport variant.
+* Use this instead of base-ui's `Toast.Provider` when using `ToastViewport`.
+*/
 function ToastProvider({ children, variant = "list", limit, timeout }) {
 	const resolvedLimit = Math.min(limit ?? DEFAULT_LIMIT[variant], MAX_LIMIT[variant]);
 	return /* @__PURE__ */ jsx(Toast.Provider, {
@@ -126,6 +130,10 @@ function ToastProvider({ children, variant = "list", limit, timeout }) {
 		children
 	});
 }
+/**
+* Renders and manages toast notifications. Supports `"stacked"` (Sonner-style
+* fanned cards) and `"list"` (vertically stacked, each fully visible) layouts.
+*/
 function ToastViewport({ variant = "list", limit: _limit }) {
 	const manager = useToastManager();
 	const isStacked = variant === "stacked";

package/dist/toast/toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"toast.js","names":["BaseToast","styles"],"sources":["../../src/toast/toast.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { Toast as BaseToast } from \"@base-ui/react/toast\";\nimport styles from \"./toast.module.css\";\n\nexport type ToastType = \"default\" | \"success\" | \"warning\" | \"error\" | \"info\";\n\n// Re-export for consumer convenience\nexport const useToastManager = BaseToast.useToastManager;\n\nfunction XIcon() {\n  return (\n    <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n      <path d=\"M1 1L9 9M9 1L1 9\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\n    </svg>\n  );\n}\n\nfunction StatusIcon({ type }: { type: string }) {\n  if (type === \"success\") {\n    return (\n      <svg viewBox=\"0 0 16 16\" fill=\"none\" className={`${styles.icon} ${styles[\"icon-success\"]}`}>\n        <circle cx=\"8\" cy=\"8\" r=\"7\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\n        <path d=\"M4.5 8L6.5 10.5L11 5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n      </svg>\n    );\n  }\n  if (type === \"error\") {\n    return (\n      <svg viewBox=\"0 0 16 16\" fill=\"none\" className={`${styles.icon} ${styles[\"icon-error\"]}`}>\n        <circle cx=\"8\" cy=\"8\" r=\"7\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\n        <path d=\"M5.5 5.5L10.5 10.5M10.5 5.5L5.5 10.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\n      </svg>\n    );\n  }\n  if (type === \"warning\") {\n    return (\n      <svg viewBox=\"0 0 16 16\" fill=\"none\" className={`${styles.icon} ${styles[\"icon-warning\"]}`}>\n        <path d=\"M8 2L14.5 13H1.5L8 2Z\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinejoin=\"round\" />\n        <path d=\"M8 6.5V9\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\n        <circle cx=\"8\" cy=\"11\" r=\"0.75\" fill=\"currentColor\" />\n      </svg>\n    );\n  }\n  if (type === \"info\") {\n    return (\n      <svg viewBox=\"0 0 16 16\" fill=\"none\" className={`${styles.icon} ${styles[\"icon-info\"]}`}>\n        <circle cx=\"8\" cy=\"8\" r=\"7\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\n        <path d=\"M8 7V11\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\n        <circle cx=\"8\" cy=\"5\" r=\"0.75\" fill=\"currentColor\" />\n      </svg>\n    );\n  }\n  return null;\n}\n\nexport interface ToastViewportProps {\n  /**\n   * \"stacked\" — toasts fan out behind each other like Sonner.\n   *   Collapsed: only the front toast is fully visible; others peek as\n   *   scaled-down cards behind it. Hover/focus expands the full stack.\n   *\n   * \"list\" — toasts stack vertically, each fully visible (default behaviour).\n   */\n  variant?: \"stacked\" | \"list\";\n  /**\n   * Maximum number of toasts shown at once.\n   * Defaults to 5 for \"stacked\", 3 for \"list\".\n   * Oldest toasts are removed when the limit is exceeded.\n   */\n  limit?: number;\n}\n\nconst DEFAULT_LIMIT: Record<NonNullable<ToastViewportProps[\"variant\"]>, number> = {\n  stacked: 5,\n  list: 3,\n};\n\nexport interface ToastProviderProps {\n  children: ReactNode;\n  variant?: ToastViewportProps[\"variant\"];\n  limit?: number;\n  timeout?: number;\n}\n\n/**\n * Drop-in provider that wires limit defaults to the chosen variant.\n * Use this instead of base-ui's Toast.Provider when using ToastViewport.\n */\nconst MAX_LIMIT: Record<NonNullable<ToastViewportProps[\"variant\"]>, number> = {\n  stacked: 10,\n  list: 5,\n};\n\nexport function ToastProvider({ children, variant = \"list\", limit, timeout }: ToastProviderProps) {\n  const resolvedLimit = Math.min(limit ?? DEFAULT_LIMIT[variant], MAX_LIMIT[variant]);\n  return (\n    <BaseToast.Provider limit={resolvedLimit} timeout={timeout}>\n      {children}\n    </BaseToast.Provider>\n  );\n}\n\nexport function ToastViewport({ variant = \"list\", limit: _limit }: ToastViewportProps) {\n  const manager = useToastManager();\n  const isStacked = variant === \"stacked\";\n\n  return (\n    <BaseToast.Viewport className={`${styles.viewport} ${isStacked ? styles[\"viewport-stacked\"] : styles[\"viewport-list\"]}`}>\n      {manager.toasts.map((toast) => (\n        <BaseToast.Root\n          key={toast.id}\n          toast={toast}\n          className={`${styles.toast} ${isStacked ? styles[\"toast-stacked\"] : \"\"} ${styles[`toast-${toast.type ?? \"default\"}`]}`}\n          swipeDirection={isStacked ? [\"right\", \"down\"] : [\"right\", \"down\"]}\n        >\n          {toast.type && toast.type !== \"default\" && <StatusIcon type={toast.type} />}\n          <div className={styles.content}>\n            {toast.title && <BaseToast.Title className={styles.title} />}\n            {toast.description && <BaseToast.Description className={styles.description} />}\n          </div>\n          <BaseToast.Close className={styles.close} aria-label=\"Dismiss\">\n            <XIcon />\n          </BaseToast.Close>\n        </BaseToast.Root>\n      ))}\n    </BaseToast.Viewport>\n  );\n}\nexport { styles as ToastStyles };\n"],"mappings":"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"}
+{"version":3,"file":"toast.js","names":["BaseToast","styles"],"sources":["../../src/toast/toast.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { Toast as BaseToast } from \"@base-ui/react/toast\";\nimport styles from \"./toast.module.css\";\n\nexport type ToastType = \"default\" | \"success\" | \"warning\" | \"error\" | \"info\";\n\n// Re-export for consumer convenience\nexport const useToastManager = BaseToast.useToastManager;\n\nfunction XIcon() {\n  return (\n    <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n      <path d=\"M1 1L9 9M9 1L1 9\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\n    </svg>\n  );\n}\n\nfunction StatusIcon({ type }: { type: string }) {\n  if (type === \"success\") {\n    return (\n      <svg viewBox=\"0 0 16 16\" fill=\"none\" className={`${styles.icon} ${styles[\"icon-success\"]}`}>\n        <circle cx=\"8\" cy=\"8\" r=\"7\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\n        <path d=\"M4.5 8L6.5 10.5L11 5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n      </svg>\n    );\n  }\n  if (type === \"error\") {\n    return (\n      <svg viewBox=\"0 0 16 16\" fill=\"none\" className={`${styles.icon} ${styles[\"icon-error\"]}`}>\n        <circle cx=\"8\" cy=\"8\" r=\"7\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\n        <path d=\"M5.5 5.5L10.5 10.5M10.5 5.5L5.5 10.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\n      </svg>\n    );\n  }\n  if (type === \"warning\") {\n    return (\n      <svg viewBox=\"0 0 16 16\" fill=\"none\" className={`${styles.icon} ${styles[\"icon-warning\"]}`}>\n        <path d=\"M8 2L14.5 13H1.5L8 2Z\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinejoin=\"round\" />\n        <path d=\"M8 6.5V9\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\n        <circle cx=\"8\" cy=\"11\" r=\"0.75\" fill=\"currentColor\" />\n      </svg>\n    );\n  }\n  if (type === \"info\") {\n    return (\n      <svg viewBox=\"0 0 16 16\" fill=\"none\" className={`${styles.icon} ${styles[\"icon-info\"]}`}>\n        <circle cx=\"8\" cy=\"8\" r=\"7\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\n        <path d=\"M8 7V11\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\n        <circle cx=\"8\" cy=\"5\" r=\"0.75\" fill=\"currentColor\" />\n      </svg>\n    );\n  }\n  return null;\n}\n\nexport interface ToastViewportProps {\n  /**\n   * \"stacked\" — toasts fan out behind each other like Sonner.\n   *   Collapsed: only the front toast is fully visible; others peek as\n   *   scaled-down cards behind it. Hover/focus expands the full stack.\n   *\n   * \"list\" — toasts stack vertically, each fully visible (default behaviour).\n   */\n  variant?: \"stacked\" | \"list\";\n  /**\n   * Maximum number of toasts shown at once.\n   * Defaults to 5 for \"stacked\", 3 for \"list\".\n   * Oldest toasts are removed when the limit is exceeded.\n   */\n  limit?: number;\n}\n\nconst DEFAULT_LIMIT: Record<NonNullable<ToastViewportProps[\"variant\"]>, number> = {\n  stacked: 5,\n  list: 3,\n};\n\nexport interface ToastProviderProps {\n  children: ReactNode;\n  /** Layout style for the viewport. @default \"list\" */\n  variant?: ToastViewportProps[\"variant\"];\n  /** Maximum number of toasts shown at once. */\n  limit?: number;\n  /** Auto-dismiss delay in milliseconds. */\n  timeout?: number;\n}\n\n/**\n * Drop-in provider that wires limit defaults to the chosen variant.\n * Use this instead of base-ui's Toast.Provider when using ToastViewport.\n */\nconst MAX_LIMIT: Record<NonNullable<ToastViewportProps[\"variant\"]>, number> = {\n  stacked: 10,\n  list: 5,\n};\n\n/**\n * Drop-in provider that wires limit defaults to the chosen viewport variant.\n * Use this instead of base-ui's `Toast.Provider` when using `ToastViewport`.\n */\nexport function ToastProvider({ children, variant = \"list\", limit, timeout }: ToastProviderProps) {\n  const resolvedLimit = Math.min(limit ?? DEFAULT_LIMIT[variant], MAX_LIMIT[variant]);\n  return (\n    <BaseToast.Provider limit={resolvedLimit} timeout={timeout}>\n      {children}\n    </BaseToast.Provider>\n  );\n}\n\n/**\n * Renders and manages toast notifications. Supports `\"stacked\"` (Sonner-style\n * fanned cards) and `\"list\"` (vertically stacked, each fully visible) layouts.\n */\nexport function ToastViewport({ variant = \"list\", limit: _limit }: ToastViewportProps) {\n  const manager = useToastManager();\n  const isStacked = variant === \"stacked\";\n\n  return (\n    <BaseToast.Viewport className={`${styles.viewport} ${isStacked ? styles[\"viewport-stacked\"] : styles[\"viewport-list\"]}`}>\n      {manager.toasts.map((toast) => (\n        <BaseToast.Root\n          key={toast.id}\n          toast={toast}\n          className={`${styles.toast} ${isStacked ? styles[\"toast-stacked\"] : \"\"} ${styles[`toast-${toast.type ?? \"default\"}`]}`}\n          swipeDirection={isStacked ? [\"right\", \"down\"] : [\"right\", \"down\"]}\n        >\n          {toast.type && toast.type !== \"default\" && <StatusIcon type={toast.type} />}\n          <div className={styles.content}>\n            {toast.title && <BaseToast.Title className={styles.title} />}\n            {toast.description && <BaseToast.Description className={styles.description} />}\n          </div>\n          <BaseToast.Close className={styles.close} aria-label=\"Dismiss\">\n            <XIcon />\n          </BaseToast.Close>\n        </BaseToast.Root>\n      ))}\n    </BaseToast.Viewport>\n  );\n}\nexport { styles as ToastStyles };\n"],"mappings":"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"}

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brijbyte/agentic-ui",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "private": false,
   "repository": {
     "type": "git",
@@ -89,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"
@@ -99,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"
@@ -133,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.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();

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>