@brijbyte/agentic-ui 0.0.1-beta → 0.0.1

package/dist/tooltip/index.js

@@ -0,0 +1,4 @@
+import tooltip_module_default from "./tooltip.module.js";
+import { Tooltip } from "./tooltip.js";
+import { TooltipArrow, TooltipPopup, TooltipPositioner } from "./parts.js";
+export { Tooltip, TooltipArrow, TooltipPopup, TooltipPositioner, tooltip_module_default as TooltipStyles };

package/dist/tooltip/parts.d.ts

@@ -0,0 +1,23 @@
+import * as react from "react";
+import { ComponentPropsWithoutRef } from "react";
+import { Tooltip } from "@base-ui/react/tooltip";
+
+//#region src/tooltip/parts.d.ts
+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;
+}
+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>>;
+//#endregion
+export { TooltipArrow, TooltipArrowProps, TooltipPopup, TooltipPopupProps, TooltipPositioner, TooltipPositionerProps };
+//# sourceMappingURL=parts.d.ts.map

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

@@ -0,0 +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"}

package/dist/tooltip/parts.js

@@ -0,0 +1,53 @@
+import tooltip_module_default from "./tooltip.module.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Tooltip } from "@base-ui/react/tooltip";
+//#region src/tooltip/parts.tsx
+/**
+* Styled primitives for Tooltip.
+*
+* @example
+* ```tsx
+* import { Tooltip } from '@base-ui/react/tooltip';
+* import { TooltipPositioner, TooltipPopup, TooltipArrow } from '@brijbyte/agentic-ui/tooltip';
+*
+* <Tooltip.Provider>
+*   <Tooltip.Root>
+*     <Tooltip.Trigger render={<button>Hover me</button>} />
+*     <Tooltip.Portal>
+*       <TooltipPositioner side="top" sideOffset={6}>
+*         <TooltipPopup>
+*           <TooltipArrow />
+*           Tooltip content
+*         </TooltipPopup>
+*       </TooltipPositioner>
+*     </Tooltip.Portal>
+*   </Tooltip.Root>
+* </Tooltip.Provider>
+* ```
+*/
+const TooltipPositioner = forwardRef(function TooltipPositioner({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Tooltip.Positioner, {
+		ref,
+		className: `${tooltip_module_default.positioner} ${className ?? ""}`,
+		...props
+	});
+});
+const TooltipPopup = forwardRef(function TooltipPopup({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Tooltip.Popup, {
+		ref,
+		className: `${tooltip_module_default.popup} ${className ?? ""}`,
+		...props
+	});
+});
+const TooltipArrow = forwardRef(function TooltipArrow({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Tooltip.Arrow, {
+		ref,
+		className: `${tooltip_module_default.arrow} ${className ?? ""}`,
+		...props
+	});
+});
+//#endregion
+export { TooltipArrow, TooltipPopup, TooltipPositioner };
+
+//# sourceMappingURL=parts.js.map

package/dist/tooltip/parts.js.map

@@ -0,0 +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"}

package/dist/tooltip/tooltip.css

@@ -0,0 +1,64 @@
+@layer theme, base;
+
+@layer components {
+  .positioner_yQZxSq {
+    z-index: var(--z-tooltip);
+  }
+
+  .popup_yQZxSq {
+    background-color: var(--color-surface-3);
+    border: var(--border-width-base) solid var(--color-border-base);
+    border-radius: var(--radius-sm);
+    box-shadow: var(--shadow-sm);
+    padding: var(--space-1) var(--space-2);
+    font-family: var(--font-mono);
+    font-size: var(--font-size-xs);
+    color: var(--color-text-primary);
+    line-height: var(--line-height-normal);
+    word-break: break-word;
+    max-width: 240px;
+    transform-origin: var(--transform-origin);
+    transition: opacity .125s var(--easing-ease-out),
+      transform .125s var(--easing-ease-out);
+  }
+
+  .popup_yQZxSq[data-instant] {
+    transition-duration: 0s;
+  }
+
+  .popup_yQZxSq[data-starting-style] {
+    opacity: 0;
+    transform: scale(.96);
+  }
+
+  .popup_yQZxSq[data-ending-style] {
+    opacity: 0;
+    transition: opacity 75ms var(--easing-ease-in),
+      transform 75ms var(--easing-ease-in);
+    transform: scale(.98);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .popup_yQZxSq {
+      transition: opacity .125s var(--easing-ease-out);
+    }
+
+    .popup_yQZxSq[data-ending-style] {
+      transition: opacity 75ms var(--easing-ease-in);
+    }
+
+    .popup_yQZxSq[data-starting-style], .popup_yQZxSq[data-ending-style] {
+      transform: none;
+    }
+  }
+
+  .arrow_yQZxSq {
+    width: 8px;
+    height: 8px;
+    fill: var(--color-surface-3);
+    stroke: var(--color-border-base);
+    stroke-width: 1px;
+  }
+}
+
+@layer utilities;

package/dist/tooltip/tooltip.d.ts

@@ -0,0 +1,22 @@
+import { ReactElement, ReactNode } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import styles from "./tooltip.module.css";
+
+//#region src/tooltip/tooltip.d.ts
+interface TooltipProps {
+  content: ReactNode;
+  children: ReactElement;
+  delay?: number;
+  side?: "top" | "bottom" | "left" | "right";
+  align?: "start" | "center" | "end";
+}
+declare function Tooltip({
+  content,
+  children,
+  delay,
+  side,
+  align
+}: TooltipProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Tooltip, TooltipProps, styles };
+//# sourceMappingURL=tooltip.d.ts.map

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

@@ -0,0 +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"}

package/dist/tooltip/tooltip.js

@@ -0,0 +1,23 @@
+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
+function Tooltip$1({ content, children, delay = 400, side = "top", align = "center" }) {
+	return /* @__PURE__ */ jsx(Tooltip.Provider, {
+		delay,
+		children: /* @__PURE__ */ jsxs(Tooltip.Root, { children: [/* @__PURE__ */ jsx(Tooltip.Trigger, { render: children }), /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, {
+			className: tooltip_module_default.positioner,
+			side,
+			align,
+			sideOffset: 6,
+			children: /* @__PURE__ */ jsxs(Tooltip.Popup, {
+				className: tooltip_module_default.popup,
+				children: [/* @__PURE__ */ jsx(Tooltip.Arrow, { className: tooltip_module_default.arrow }), content]
+			})
+		}) })] })
+	});
+}
+//#endregion
+export { Tooltip$1 as Tooltip };
+
+//# sourceMappingURL=tooltip.js.map

package/dist/tooltip/tooltip.js.map

@@ -0,0 +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"}

package/dist/tooltip/tooltip.module.css.d.ts

@@ -0,0 +1,2 @@
+declare const styles: Record<string, string | undefined>;
+export default styles;

package/dist/tooltip/tooltip.module.js

@@ -0,0 +1,10 @@
+//#region src/tooltip/tooltip.module.css
+var tooltip_module_default = {
+	"arrow": "arrow_yQZxSq",
+	"popup": "popup_yQZxSq",
+	"positioner": "positioner_yQZxSq"
+};
+//#endregion
+export { tooltip_module_default as default };
+
+//# sourceMappingURL=tooltip.module.js.map

package/dist/tooltip/tooltip.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.module.js","names":[],"sources":["../../src/tooltip/tooltip.module.css"],"sourcesContent":["@layer theme, base, components, utilities;\n\n@layer components {\n  .positioner {\n    z-index: var(--z-tooltip);\n  }\n\n  .popup {\n    background-color: var(--color-surface-3);\n    border: var(--border-width-base) solid var(--color-border-base);\n    border-radius: var(--radius-sm);\n    box-shadow: var(--shadow-sm);\n    padding: var(--space-1) var(--space-2);\n    font-family: var(--font-mono);\n    font-size: var(--font-size-xs);\n    color: var(--color-text-primary);\n    line-height: var(--line-height-normal);\n    max-width: 240px;\n    word-break: break-word;\n\n    transform-origin: var(--transform-origin);\n    transition:\n      opacity 125ms var(--easing-ease-out),\n      transform 125ms var(--easing-ease-out);\n  }\n\n  /* Skip animation when moving between tooltips quickly */\n  .popup[data-instant] {\n    transition-duration: 0ms;\n  }\n\n  .popup[data-starting-style] {\n    opacity: 0;\n    transform: scale(0.96);\n  }\n\n  .popup[data-ending-style] {\n    opacity: 0;\n    transform: scale(0.98);\n    transition:\n      opacity 75ms var(--easing-ease-in),\n      transform 75ms var(--easing-ease-in);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .popup {\n      transition: opacity 125ms var(--easing-ease-out);\n    }\n\n    .popup[data-ending-style] {\n      transition: opacity 75ms var(--easing-ease-in);\n    }\n\n    .popup[data-starting-style],\n    .popup[data-ending-style] {\n      transform: none;\n    }\n  }\n\n  .arrow {\n    width: 8px;\n    height: 8px;\n    fill: var(--color-surface-3);\n    stroke: var(--color-border-base);\n    stroke-width: 1;\n  }\n}\n"],"mappings":""}

package/package.json

@@ -1,8 +1,141 @@
 {
   "name": "@brijbyte/agentic-ui",
-  "version": "0.0.1-beta",
+  "version": "0.0.1",
+  "private": false,
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/brijbyte/agentic-ui.git",
+    "directory": "packages/agentic-ui"
+  },
+  "files": [
+    "dist",
+    "src",
+    "README.md"
+  ],
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./styles": "./dist/index.css",
+    "./tokens": "./dist/tokens.css",
+    "./reset": "./dist/reset.css",
+    "./tailwind-theme": "./dist/tailwind-theme.css",
+    "./accordion": {
+      "import": "./dist/accordion/index.js",
+      "types": "./dist/accordion/index.d.ts"
+    },
+    "./accordion.css": "./dist/accordion/accordion.css",
+    "./badge": {
+      "import": "./dist/badge/index.js",
+      "types": "./dist/badge/index.d.ts"
+    },
+    "./badge.css": "./dist/badge/badge.css",
+    "./button": {
+      "import": "./dist/button/index.js",
+      "types": "./dist/button/index.d.ts"
+    },
+    "./button.css": "./dist/button/button.css",
+    "./card": {
+      "import": "./dist/card/index.js",
+      "types": "./dist/card/index.d.ts"
+    },
+    "./card.css": "./dist/card/card.css",
+    "./checkbox": {
+      "import": "./dist/checkbox/index.js",
+      "types": "./dist/checkbox/index.d.ts"
+    },
+    "./checkbox.css": "./dist/checkbox/checkbox.css",
+    "./collapsible": {
+      "import": "./dist/collapsible/index.js",
+      "types": "./dist/collapsible/index.d.ts"
+    },
+    "./collapsible.css": "./dist/collapsible/collapsible.css",
+    "./dialog": {
+      "import": "./dist/dialog/index.js",
+      "types": "./dist/dialog/index.d.ts"
+    },
+    "./dialog.css": "./dist/dialog/dialog.css",
+    "./drawer": {
+      "import": "./dist/drawer/index.js",
+      "types": "./dist/drawer/index.d.ts"
+    },
+    "./drawer.css": "./dist/drawer/drawer.css",
+    "./input": {
+      "import": "./dist/input/index.js",
+      "types": "./dist/input/index.d.ts"
+    },
+    "./input.css": "./dist/input/input.css",
+    "./menu": {
+      "import": "./dist/menu/index.js",
+      "types": "./dist/menu/index.d.ts"
+    },
+    "./menu.css": "./dist/menu/menu.css",
+    "./number-field": {
+      "import": "./dist/number-field/index.js",
+      "types": "./dist/number-field/index.d.ts"
+    },
+    "./number-field.css": "./dist/number-field/number-field.css",
+    "./progress": {
+      "import": "./dist/progress/index.js",
+      "types": "./dist/progress/index.d.ts"
+    },
+    "./progress.css": "./dist/progress/progress.css",
+    "./select": {
+      "import": "./dist/select/index.js",
+      "types": "./dist/select/index.d.ts"
+    },
+    "./select.css": "./dist/select/select.css",
+    "./separator": {
+      "import": "./dist/separator/index.js",
+      "types": "./dist/separator/index.d.ts"
+    },
+    "./separator.css": "./dist/separator/separator.css",
+    "./switch": {
+      "import": "./dist/switch/index.js",
+      "types": "./dist/switch/index.d.ts"
+    },
+    "./switch.css": "./dist/switch/switch.css",
+    "./tabs": {
+      "import": "./dist/tabs/index.js",
+      "types": "./dist/tabs/index.d.ts"
+    },
+    "./tabs.css": "./dist/tabs/tabs.css",
+    "./toast": {
+      "import": "./dist/toast/index.js",
+      "types": "./dist/toast/index.d.ts"
+    },
+    "./toast.css": "./dist/toast/toast.css",
+    "./tooltip": {
+      "import": "./dist/tooltip/index.js",
+      "types": "./dist/tooltip/index.d.ts"
+    },
+    "./tooltip.css": "./dist/tooltip/tooltip.css"
+  },
   "publishConfig": {
-    "tag": "beta",
-    "access": "public"
+    "access": "public",
+    "provenance": true
+  },
+  "dependencies": {
+    "@base-ui/react": "^1.3.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "dev": "tsdown --watch",
+    "typecheck": "tsgo --noEmit"
   }
-}
+}

package/src/accordion/accordion.module.css

@@ -0,0 +1,89 @@
+@layer theme, base, components, utilities;
+
+@layer components {
+  .root {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+    border: var(--border-width-base) solid var(--color-border-base);
+    border-radius: var(--radius-lg);
+    overflow: hidden;
+  }
+
+  .item {
+    border-bottom: var(--border-width-base) solid var(--color-border-subtle);
+  }
+
+  .item:last-child {
+    border-bottom: none;
+  }
+
+  .header {
+    display: flex;
+    align-items: center;
+  }
+
+  .trigger {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-2);
+    padding: var(--space-3) var(--space-4);
+    font-family: var(--font-mono);
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-medium);
+    color: var(--color-text-primary);
+    background: none;
+    border: none;
+    cursor: pointer;
+    outline: none;
+    text-align: left;
+    transition:
+      background-color var(--duration-fast) var(--easing-standard),
+      color var(--duration-fast) var(--easing-standard);
+    user-select: none;
+  }
+
+  .trigger:hover {
+    background-color: var(--color-surface-hover);
+  }
+
+  .trigger:focus-visible {
+    box-shadow: inset var(--shadow-focus);
+  }
+
+  .trigger[data-disabled] {
+    opacity: 0.44;
+    cursor: not-allowed;
+  }
+
+  .trigger-icon {
+    color: var(--color-text-tertiary);
+    flex-shrink: 0;
+    transition: transform var(--duration-normal) var(--easing-standard);
+  }
+
+  .trigger[data-panel-open] .trigger-icon {
+    transform: rotate(180deg);
+  }
+
+  .panel {
+    height: var(--accordion-panel-height);
+    overflow: hidden;
+    transition: height var(--duration-normal) var(--easing-standard);
+  }
+
+  .panel[data-starting-style],
+  .panel[data-ending-style] {
+    height: 0;
+  }
+
+  .panel-content {
+    padding: var(--space-2) var(--space-4) var(--space-4);
+    font-family: var(--font-mono);
+    font-size: var(--font-size-sm);
+    color: var(--color-text-secondary);
+    line-height: var(--line-height-relaxed);
+  }
+}

package/src/accordion/accordion.tsx

@@ -0,0 +1,50 @@
+import type { ReactNode } from "react";
+import { Accordion as BaseAccordion } from "@base-ui/react/accordion";
+import styles from "./accordion.module.css";
+
+export interface AccordionItem {
+  value: string;
+  header: ReactNode;
+  content: ReactNode;
+  disabled?: boolean;
+}
+
+export interface AccordionProps {
+  items: AccordionItem[];
+  multiple?: boolean;
+  defaultValue?: string[];
+  value?: string[];
+  onValueChange?: (value: string[]) => void;
+  className?: string;
+}
+
+function ChevronIcon() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
+      <path d="M2.5 4.5L6 8L9.5 4.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
+export function Accordion({ items, className, multiple = true, ...props }: AccordionProps) {
+  return (
+    <BaseAccordion.Root className={`${styles.root} ${className ?? ""}`} multiple={multiple} {...props}>
+      {items.map((item) => (
+        <BaseAccordion.Item key={item.value} value={item.value} className={styles.item} disabled={item.disabled ?? false}>
+          <BaseAccordion.Header className={styles.header}>
+            <BaseAccordion.Trigger className={styles.trigger}>
+              {item.header}
+              <span className={styles["trigger-icon"]}>
+                <ChevronIcon />
+              </span>
+            </BaseAccordion.Trigger>
+          </BaseAccordion.Header>
+          <BaseAccordion.Panel className={styles.panel}>
+            <div className={styles["panel-content"]}>{item.content}</div>
+          </BaseAccordion.Panel>
+        </BaseAccordion.Item>
+      ))}
+    </BaseAccordion.Root>
+  );
+}
+export { styles as AccordionStyles };

package/src/accordion/index.ts

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

package/src/accordion/parts.tsx

@@ -0,0 +1,68 @@
+/**
+ * Styled primitives for Accordion.
+ *
+ * @example
+ * ```tsx
+ * import { Accordion } from '@base-ui/react/accordion';
+ * import { AccordionItem, AccordionHeader, AccordionTrigger, AccordionPanel } from '@brijbyte/agentic-ui/accordion';
+ *
+ * <Accordion.Root defaultValue={['a']}>
+ *   <AccordionItem value="a">
+ *     <AccordionHeader>
+ *       <AccordionTrigger>Section A</AccordionTrigger>
+ *     </AccordionHeader>
+ *     <AccordionPanel>Content A</AccordionPanel>
+ *   </AccordionItem>
+ * </Accordion.Root>
+ * ```
+ */
+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";
+
+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 const AccordionItem = forwardRef<ComponentRef<typeof BaseAccordion.Item>, AccordionItemProps>(function AccordionItem(
+  { className, ...props },
+  ref,
+) {
+  return <BaseAccordion.Item ref={ref} className={`${styles.item} ${className ?? ""}`} {...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} />;
+});
+
+export const AccordionTrigger = forwardRef<ComponentRef<typeof BaseAccordion.Trigger>, AccordionTriggerProps>(function AccordionTrigger(
+  { className, ...props },
+  ref,
+) {
+  return <BaseAccordion.Trigger ref={ref} className={`${styles.trigger} ${className ?? ""}`} {...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} />;
+});

package/src/badge/badge.module.css

@@ -0,0 +1,70 @@
+@layer theme, base, components, utilities;
+
+@layer components {
+  .root {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1);
+    font-family: var(--font-mono);
+    font-size: var(--font-size-xs);
+    font-weight: var(--font-weight-medium);
+    letter-spacing: var(--letter-spacing-wide);
+    line-height: 1;
+    border-radius: var(--radius-sm);
+    border: var(--border-width-base) solid transparent;
+    padding: 2px var(--space-1-5);
+    white-space: nowrap;
+  }
+
+  /* Variants */
+  .variant-default {
+    background-color: var(--color-surface-3);
+    border-color: var(--color-border-base);
+    color: var(--color-text-secondary);
+  }
+
+  .variant-solid {
+    background-color: var(--color-accent);
+    border-color: var(--color-accent);
+    color: var(--color-text-on-accent);
+  }
+
+  .variant-soft {
+    background-color: var(--color-accent-tint);
+    border-color: var(--color-accent-tint-hover);
+    color: var(--color-accent);
+  }
+
+  .variant-success {
+    background-color: var(--color-success-bg);
+    border-color: var(--color-success-border);
+    color: var(--color-success-text);
+  }
+
+  .variant-warning {
+    background-color: var(--color-warning-bg);
+    border-color: var(--color-warning-border);
+    color: var(--color-warning-text);
+  }
+
+  .variant-error {
+    background-color: var(--color-error-bg);
+    border-color: var(--color-error-border);
+    color: var(--color-error-text);
+  }
+
+  .variant-info {
+    background-color: var(--color-info-bg);
+    border-color: var(--color-info-border);
+    color: var(--color-info-text);
+  }
+
+  /* Dot indicator */
+  .dot {
+    width: 5px;
+    height: 5px;
+    border-radius: var(--radius-full);
+    background-color: currentColor;
+    flex-shrink: 0;
+  }
+}