@brijbyte/agentic-ui 0.0.1-beta → 0.0.2

package/dist/dialog/dialog.d.ts

@@ -0,0 +1,40 @@
+import { ReactElement, ReactNode } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import styles from "./dialog.module.css";
+
+//#region src/dialog/dialog.d.ts
+interface DialogProps {
+  open?: boolean;
+  defaultOpen?: boolean;
+  /** `eventDetails` is the base-ui event details object. */
+  onOpenChange?: (open: boolean, eventDetails: unknown) => void;
+  trigger?: ReactElement;
+  title?: ReactNode;
+  description?: ReactNode;
+  children?: ReactNode;
+  /** Buttons aligned to the right (cancel, confirm). */
+  footer?: ReactNode;
+  /**
+   * Content anchored to the left of the footer — intended for a destructive
+   * action (e.g. Delete). When present the footer switches to space-between
+   * layout, matching the macOS dialog pattern.
+   */
+  footerStart?: ReactNode;
+  className?: string;
+  dismissible?: boolean;
+}
+declare function Dialog({
+  trigger,
+  title,
+  description,
+  children,
+  footer,
+  footerStart,
+  className,
+  dismissible,
+  onOpenChange,
+  ...props
+}: DialogProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Dialog, DialogProps, styles };
+//# sourceMappingURL=dialog.d.ts.map

package/dist/dialog/dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.d.ts","names":[],"sources":["../../src/dialog/dialog.tsx"],"mappings":";;;;;UAIiB,WAAA;EACf,IAAA;EACA,WAAA;EAFe;EAIf,YAAA,IAAgB,IAAA,WAAe,YAAA;EAC/B,OAAA,GAAU,YAAA;EACV,KAAA,GAAQ,SAAA;EACR,WAAA,GAAc,SAAA;EACd,QAAA,GAAW,SAAA;EAAA;EAEX,MAAA,GAAS,SAAA;EAMK;;;;;EAAd,WAAA,GAAc,SAAA;EACd,SAAA;EACA,WAAA;AAAA;AAAA,iBAWc,MAAA,CAAA;EACd,OAAA;EACA,KAAA;EACA,WAAA;EACA,QAAA;EACA,MAAA;EACA,WAAA;EACA,SAAA;EACA,WAAA;EACA,YAAA;EAAA,GACG;AAAA,GACF,WAAA,GAAW,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/dialog/dialog.js

@@ -0,0 +1,57 @@
+import dialog_module_default from "./dialog.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Dialog } from "@base-ui/react/dialog";
+//#region src/dialog/dialog.tsx
+function XIcon() {
+	return /* @__PURE__ */ jsx("svg", {
+		width: "12",
+		height: "12",
+		viewBox: "0 0 12 12",
+		fill: "none",
+		children: /* @__PURE__ */ jsx("path", {
+			d: "M2 2L10 10M10 2L2 10",
+			stroke: "currentColor",
+			strokeWidth: "1.5",
+			strokeLinecap: "round"
+		})
+	});
+}
+function Dialog$1({ trigger, title, description, children, footer, footerStart, className, dismissible = true, onOpenChange, ...props }) {
+	return /* @__PURE__ */ jsxs(Dialog.Root, {
+		onOpenChange,
+		...props,
+		children: [trigger && /* @__PURE__ */ jsx(Dialog.Trigger, { render: trigger }), /* @__PURE__ */ jsxs(Dialog.Portal, { children: [/* @__PURE__ */ jsx(Dialog.Backdrop, { className: dialog_module_default.backdrop }), /* @__PURE__ */ jsx(Dialog.Viewport, { children: /* @__PURE__ */ jsxs(Dialog.Popup, {
+			className: `${dialog_module_default.popup} ${className ?? ""}`,
+			children: [
+				title && /* @__PURE__ */ jsx(Dialog.Title, {
+					className: dialog_module_default.title,
+					children: title
+				}),
+				description && /* @__PURE__ */ jsx(Dialog.Description, {
+					className: dialog_module_default.description,
+					children: description
+				}),
+				dismissible && /* @__PURE__ */ jsx(Dialog.Close, {
+					className: dialog_module_default.close,
+					"aria-label": "Close dialog",
+					children: /* @__PURE__ */ jsx(XIcon, {})
+				}),
+				children && /* @__PURE__ */ jsx("div", {
+					className: dialog_module_default.body,
+					children
+				}),
+				(footer || footerStart) && /* @__PURE__ */ jsxs("div", {
+					className: `${dialog_module_default.footer} ${footerStart ? dialog_module_default["footer-split"] : ""}`,
+					children: [footerStart && /* @__PURE__ */ jsx("div", { children: footerStart }), footer && /* @__PURE__ */ jsx("div", {
+						className: dialog_module_default["footer-end"],
+						children: footer
+					})]
+				})
+			]
+		}) })] })]
+	});
+}
+//#endregion
+export { Dialog$1 as Dialog };
+
+//# sourceMappingURL=dialog.js.map

package/dist/dialog/dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.js","names":["Dialog","BaseDialog","styles"],"sources":["../../src/dialog/dialog.tsx"],"sourcesContent":["import type { ReactNode, ReactElement } from \"react\";\nimport { Dialog as BaseDialog } from \"@base-ui/react/dialog\";\nimport styles from \"./dialog.module.css\";\n\nexport interface DialogProps {\n  open?: boolean;\n  defaultOpen?: boolean;\n  /** `eventDetails` is the base-ui event details object. */\n  onOpenChange?: (open: boolean, eventDetails: unknown) => void;\n  trigger?: ReactElement;\n  title?: ReactNode;\n  description?: ReactNode;\n  children?: ReactNode;\n  /** Buttons aligned to the right (cancel, confirm). */\n  footer?: ReactNode;\n  /**\n   * Content anchored to the left of the footer — intended for a destructive\n   * action (e.g. Delete). When present the footer switches to space-between\n   * layout, matching the macOS dialog pattern.\n   */\n  footerStart?: ReactNode;\n  className?: string;\n  dismissible?: boolean;\n}\n\nfunction XIcon() {\n  return (\n    <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\n      <path d=\"M2 2L10 10M10 2L2 10\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\n    </svg>\n  );\n}\n\nexport function Dialog({\n  trigger,\n  title,\n  description,\n  children,\n  footer,\n  footerStart,\n  className,\n  dismissible = true,\n  onOpenChange,\n  ...props\n}: DialogProps) {\n  return (\n    <BaseDialog.Root onOpenChange={onOpenChange as never} {...props}>\n      {trigger && <BaseDialog.Trigger render={trigger} />}\n      <BaseDialog.Portal>\n        <BaseDialog.Backdrop className={styles.backdrop} />\n        <BaseDialog.Viewport>\n          <BaseDialog.Popup className={`${styles.popup} ${className ?? \"\"}`}>\n            {title && <BaseDialog.Title className={styles.title}>{title}</BaseDialog.Title>}\n            {description && <BaseDialog.Description className={styles.description}>{description}</BaseDialog.Description>}\n            {dismissible && (\n              <BaseDialog.Close className={styles.close} aria-label=\"Close dialog\">\n                <XIcon />\n              </BaseDialog.Close>\n            )}\n            {children && <div className={styles.body}>{children}</div>}\n            {(footer || footerStart) && (\n              <div className={`${styles.footer} ${footerStart ? styles[\"footer-split\"] : \"\"}`}>\n                {footerStart && <div>{footerStart}</div>}\n                {footer && <div className={styles[\"footer-end\"]}>{footer}</div>}\n              </div>\n            )}\n          </BaseDialog.Popup>\n        </BaseDialog.Viewport>\n      </BaseDialog.Portal>\n    </BaseDialog.Root>\n  );\n}\nexport { styles as DialogStyles };\n"],"mappings":";;;;AAyBA,SAAS,QAAQ;AACf,QACE,oBAAC,OAAD;EAAK,OAAM;EAAK,QAAO;EAAK,SAAQ;EAAY,MAAK;YACnD,oBAAC,QAAD;GAAM,GAAE;GAAuB,QAAO;GAAe,aAAY;GAAM,eAAc;GAAU,CAAA;EAC3F,CAAA;;AAIV,SAAgBA,SAAO,EACrB,SACA,OACA,aACA,UACA,QACA,aACA,WACA,cAAc,MACd,cACA,GAAG,SACW;AACd,QACE,qBAACC,OAAW,MAAZ;EAA+B;EAAuB,GAAI;YAA1D,CACG,WAAW,oBAACA,OAAW,SAAZ,EAAoB,QAAQ,SAAW,CAAA,EACnD,qBAACA,OAAW,QAAZ,EAAA,UAAA,CACE,oBAACA,OAAW,UAAZ,EAAqB,WAAWC,sBAAO,UAAY,CAAA,EACnD,oBAACD,OAAW,UAAZ,EAAA,UACE,qBAACA,OAAW,OAAZ;GAAkB,WAAW,GAAGC,sBAAO,MAAM,GAAG,aAAa;aAA7D;IACG,SAAS,oBAACD,OAAW,OAAZ;KAAkB,WAAWC,sBAAO;eAAQ;KAAyB,CAAA;IAC9E,eAAe,oBAACD,OAAW,aAAZ;KAAwB,WAAWC,sBAAO;eAAc;KAAqC,CAAA;IAC5G,eACC,oBAACD,OAAW,OAAZ;KAAkB,WAAWC,sBAAO;KAAO,cAAW;eACpD,oBAAC,OAAD,EAAS,CAAA;KACQ,CAAA;IAEpB,YAAY,oBAAC,OAAD;KAAK,WAAWA,sBAAO;KAAO;KAAe,CAAA;KACxD,UAAU,gBACV,qBAAC,OAAD;KAAK,WAAW,GAAGA,sBAAO,OAAO,GAAG,cAAcA,sBAAO,kBAAkB;eAA3E,CACG,eAAe,oBAAC,OAAD,EAAA,UAAM,aAAkB,CAAA,EACvC,UAAU,oBAAC,OAAD;MAAK,WAAWA,sBAAO;gBAAgB;MAAa,CAAA,CAC3D;;IAES;MACC,CAAA,CACJ,EAAA,CAAA,CACJ"}

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

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

package/dist/dialog/dialog.module.js

@@ -0,0 +1,17 @@
+//#region src/dialog/dialog.module.css
+var dialog_module_default = {
+	"backdrop": "backdrop_VsZA5W",
+	"body": "body_VsZA5W",
+	"close": "close_VsZA5W",
+	"description": "description_VsZA5W",
+	"footer": "footer_VsZA5W",
+	"footer-end": "footer-end_VsZA5W",
+	"footer-split": "footer-split_VsZA5W",
+	"header": "header_VsZA5W",
+	"popup": "popup_VsZA5W",
+	"title": "title_VsZA5W"
+};
+//#endregion
+export { dialog_module_default as default };
+
+//# sourceMappingURL=dialog.module.js.map

package/dist/dialog/dialog.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.module.js","names":[],"sources":["../../src/dialog/dialog.module.css"],"sourcesContent":["@layer components {\n  .backdrop {\n    position: fixed;\n    inset: 0;\n    background-color: rgba(0, 0, 0, 0.48);\n    z-index: var(--z-overlay);\n    transition: opacity var(--duration-slow) var(--easing-standard);\n  }\n  .backdrop[data-starting-style],\n  .backdrop[data-ending-style] {\n    opacity: 0;\n  }\n  .popup {\n    position: fixed;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    z-index: var(--z-modal);\n    background-color: var(--color-elevated);\n    border: var(--border-width-base) solid var(--color-line);\n    border-radius: var(--radius-2xl);\n    box-shadow: var(--shadow-xl);\n    padding: var(--space-5) var(--space-6) var(--space-5);\n    width: min(440px, calc(100vw - var(--space-8)));\n    max-height: min(640px, calc(100vh - var(--space-8)));\n    display: flex;\n    flex-direction: column;\n    gap: var(--space-3);\n    outline: none;\n    overflow: hidden;\n    transition:\n      opacity 200ms var(--easing-ease-out),\n      transform 200ms var(--easing-spring);\n  }\n  .popup[data-starting-style] {\n    opacity: 0;\n    transform: translate(-50%, -48%) scale(0.96);\n  }\n  .popup[data-ending-style] {\n    opacity: 0;\n    transform: translate(-50%, -50%) scale(0.98);\n    transition:\n      opacity 150ms var(--easing-ease-in),\n      transform 150ms var(--easing-ease-in);\n  }\n  .header {\n    display: flex;\n    flex-direction: column;\n    gap: var(--space-2);\n    text-align: center;\n  }\n  .title {\n    font-family: var(--font-sans);\n    font-size: var(--font-size-lg);\n    font-weight: var(--font-weight-bold);\n    color: var(--color-primary);\n    line-height: var(--line-height-tight);\n    letter-spacing: var(--letter-spacing-tight);\n  }\n  .description {\n    font-family: var(--font-sans);\n    font-size: var(--font-size-md);\n    color: var(--color-secondary);\n    line-height: var(--line-height-relaxed);\n  }\n  .close {\n    position: absolute;\n    top: var(--space-4);\n    right: var(--space-4);\n    width: 24px;\n    height: 24px;\n    border-radius: var(--radius-sm);\n    border: none;\n    background: transparent;\n    color: var(--color-tertiary);\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    outline: none;\n    transition:\n      background-color var(--duration-fast) var(--easing-standard),\n      color var(--duration-fast) var(--easing-standard);\n  }\n  .close:hover {\n    background-color: var(--color-hover);\n    color: var(--color-primary);\n  }\n  .close:focus-visible {\n    box-shadow: var(--shadow-focus);\n  }\n  .body {\n    flex: 1;\n    overflow-y: auto;\n    font-family: var(--font-mono);\n    font-size: var(--font-size-sm);\n    color: var(--color-secondary);\n    line-height: var(--line-height-relaxed);\n  }\n  .footer {\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    gap: var(--space-2);\n    padding-top: var(--space-2);\n  }\n  /* When a footerStart slot is present, space-between pushes it left */\n  .footer-split {\n    justify-content: space-between;\n  }\n  .footer-end {\n    display: flex;\n    align-items: center;\n    gap: var(--space-2);\n  }\n}\n"],"mappings":";AAoBA,IAAA,wBAAW;CAAA,YAAc;CAAW,QAAA;CAAA,SAAA;CAAA,eAAA;CAAA,UAAA;CAAA,cAAA;CAAA,gBAAA;CAAA,UAAA;CAAA,SAAA;CAAA,SAAA;CAAA"}

package/dist/dialog/index.d.ts

@@ -0,0 +1,3 @@
+import { Dialog, DialogProps, styles } from "./dialog.js";
+import { DialogBackdrop, DialogBackdropProps, DialogClose, DialogCloseProps, DialogDescription, DialogDescriptionProps, DialogPopup, DialogPopupProps, DialogTitle, DialogTitleProps, DialogViewport, DialogViewportProps } from "./parts.js";
+export { Dialog, DialogBackdrop, type DialogBackdropProps, DialogClose, type DialogCloseProps, DialogDescription, type DialogDescriptionProps, DialogPopup, type DialogPopupProps, type DialogProps, styles as DialogStyles, DialogTitle, type DialogTitleProps, DialogViewport, type DialogViewportProps };

package/dist/dialog/index.js

@@ -0,0 +1,4 @@
+import dialog_module_default from "./dialog.module.js";
+import { Dialog } from "./dialog.js";
+import { DialogBackdrop, DialogClose, DialogDescription, DialogPopup, DialogTitle, DialogViewport } from "./parts.js";
+export { Dialog, DialogBackdrop, DialogClose, DialogDescription, DialogPopup, dialog_module_default as DialogStyles, DialogTitle, DialogViewport };

package/dist/dialog/parts.d.ts

@@ -0,0 +1,38 @@
+import * as react from "react";
+import { ComponentPropsWithoutRef } from "react";
+import { Dialog } from "@base-ui/react/dialog";
+
+//#region src/dialog/parts.d.ts
+type BaseBackdropProps = ComponentPropsWithoutRef<typeof Dialog.Backdrop>;
+type BaseViewportProps = ComponentPropsWithoutRef<typeof Dialog.Viewport>;
+type BasePopupProps = ComponentPropsWithoutRef<typeof Dialog.Popup>;
+type BaseTitleProps = ComponentPropsWithoutRef<typeof Dialog.Title>;
+type BaseDescriptionProps = ComponentPropsWithoutRef<typeof Dialog.Description>;
+type BaseCloseProps = ComponentPropsWithoutRef<typeof Dialog.Close>;
+interface DialogBackdropProps extends Omit<BaseBackdropProps, "className"> {
+  className?: string;
+}
+interface DialogViewportProps extends Omit<BaseViewportProps, "className"> {
+  className?: string;
+}
+interface DialogPopupProps extends Omit<BasePopupProps, "className"> {
+  className?: string;
+}
+interface DialogTitleProps extends Omit<BaseTitleProps, "className"> {
+  className?: string;
+}
+interface DialogDescriptionProps extends Omit<BaseDescriptionProps, "className"> {
+  className?: string;
+}
+interface DialogCloseProps extends Omit<BaseCloseProps, "className"> {
+  className?: string;
+}
+declare const DialogBackdrop: react.ForwardRefExoticComponent<DialogBackdropProps & react.RefAttributes<HTMLDivElement>>;
+declare const DialogViewport: react.ForwardRefExoticComponent<DialogViewportProps & react.RefAttributes<HTMLDivElement>>;
+declare const DialogPopup: react.ForwardRefExoticComponent<DialogPopupProps & react.RefAttributes<HTMLDivElement>>;
+declare const DialogTitle: react.ForwardRefExoticComponent<DialogTitleProps & react.RefAttributes<HTMLHeadingElement>>;
+declare const DialogDescription: react.ForwardRefExoticComponent<DialogDescriptionProps & react.RefAttributes<HTMLParagraphElement>>;
+declare const DialogClose: react.ForwardRefExoticComponent<DialogCloseProps & react.RefAttributes<HTMLButtonElement>>;
+//#endregion
+export { DialogBackdrop, DialogBackdropProps, DialogClose, DialogCloseProps, DialogDescription, DialogDescriptionProps, DialogPopup, DialogPopupProps, DialogTitle, DialogTitleProps, DialogViewport, DialogViewportProps };
+//# sourceMappingURL=parts.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"parts.d.ts","names":[],"sources":["../../src/dialog/parts.tsx"],"mappings":";;;;;KA6BK,iBAAA,GAAoB,wBAAA,QAAgC,MAAA,CAAW,QAAA;AAAA,KAC/D,iBAAA,GAAoB,wBAAA,QAAgC,MAAA,CAAW,QAAA;AAAA,KAC/D,cAAA,GAAiB,wBAAA,QAAgC,MAAA,CAAW,KAAA;AAAA,KAC5D,cAAA,GAAiB,wBAAA,QAAgC,MAAA,CAAW,KAAA;AAAA,KAC5D,oBAAA,GAAuB,wBAAA,QAAgC,MAAA,CAAW,WAAA;AAAA,KAClE,cAAA,GAAiB,wBAAA,QAAgC,MAAA,CAAW,KAAA;AAAA,UAEhD,mBAAA,SAA4B,IAAA,CAAK,iBAAA;EAChD,SAAA;AAAA;AAAA,UAEe,mBAAA,SAA4B,IAAA,CAAK,iBAAA;EAChD,SAAA;AAAA;AAAA,UAEe,gBAAA,SAAyB,IAAA,CAAK,cAAA;EAC7C,SAAA;AAAA;AAAA,UAEe,gBAAA,SAAyB,IAAA,CAAK,cAAA;EAC7C,SAAA;AAAA;AAAA,UAEe,sBAAA,SAA+B,IAAA,CAAK,oBAAA;EACnD,SAAA;AAAA;AAAA,UAEe,gBAAA,SAAyB,IAAA,CAAK,cAAA;EAC7C,SAAA;AAAA;AAAA,cAGW,cAAA,EAAc,KAAA,CAAA,yBAAA,CAAA,mBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,cAAA;AAAA,cAOd,cAAA,EAAc,KAAA,CAAA,yBAAA,CAAA,mBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,cAAA;AAAA,cAOd,WAAA,EAAW,KAAA,CAAA,yBAAA,CAAA,gBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,cAAA;AAAA,cAOX,WAAA,EAAW,KAAA,CAAA,yBAAA,CAAA,gBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,kBAAA;AAAA,cAOX,iBAAA,EAAiB,KAAA,CAAA,yBAAA,CAAA,sBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,oBAAA;AAAA,cAOjB,WAAA,EAAW,KAAA,CAAA,yBAAA,CAAA,gBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,iBAAA"}

package/dist/dialog/parts.js

@@ -0,0 +1,75 @@
+import dialog_module_default from "./dialog.module.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Dialog } from "@base-ui/react/dialog";
+//#region src/dialog/parts.tsx
+/**
+* Styled primitives for Dialog — each one wraps the corresponding @base-ui/react
+* Dialog part and pre-applies the agentic-ui CSS class. All base-ui props are
+* forwarded so you can compose these with a raw `Dialog.Root` / `Dialog.Trigger`.
+*
+* @example
+* ```tsx
+* import { Dialog } from '@base-ui/react/dialog';
+* import { DialogBackdrop, DialogViewport, DialogPopup, DialogTitle, DialogClose } from '@brijbyte/agentic-ui/dialog';
+*
+* <Dialog.Root>
+*   <Dialog.Trigger render={<button>Open</button>} />
+*   <Dialog.Portal>
+*     <DialogBackdrop />
+*     <DialogViewport>
+*       <DialogPopup>
+*         <DialogTitle>Hello</DialogTitle>
+*         <DialogClose aria-label="Close" />
+*       </DialogPopup>
+*     </DialogViewport>
+*   </Dialog.Portal>
+* </Dialog.Root>
+* ```
+*/
+const DialogBackdrop = forwardRef(function DialogBackdrop({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Dialog.Backdrop, {
+		ref,
+		className: `${dialog_module_default.backdrop} ${className ?? ""}`,
+		...props
+	});
+});
+const DialogViewport = forwardRef(function DialogViewport({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Dialog.Viewport, {
+		ref,
+		className: `${dialog_module_default.viewport ?? ""} ${className ?? ""}`,
+		...props
+	});
+});
+const DialogPopup = forwardRef(function DialogPopup({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Dialog.Popup, {
+		ref,
+		className: `${dialog_module_default.popup} ${className ?? ""}`,
+		...props
+	});
+});
+const DialogTitle = forwardRef(function DialogTitle({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Dialog.Title, {
+		ref,
+		className: `${dialog_module_default.title} ${className ?? ""}`,
+		...props
+	});
+});
+const DialogDescription = forwardRef(function DialogDescription({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Dialog.Description, {
+		ref,
+		className: `${dialog_module_default.description} ${className ?? ""}`,
+		...props
+	});
+});
+const DialogClose = forwardRef(function DialogClose({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Dialog.Close, {
+		ref,
+		className: `${dialog_module_default.close} ${className ?? ""}`,
+		...props
+	});
+});
+//#endregion
+export { DialogBackdrop, DialogClose, DialogDescription, DialogPopup, DialogTitle, DialogViewport };
+
+//# sourceMappingURL=parts.js.map

package/dist/dialog/parts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"parts.js","names":["BaseDialog","styles"],"sources":["../../src/dialog/parts.tsx"],"sourcesContent":["/**\n * Styled primitives for Dialog — each one wraps the corresponding @base-ui/react\n * Dialog part and pre-applies the agentic-ui CSS class. All base-ui props are\n * forwarded so you can compose these with a raw `Dialog.Root` / `Dialog.Trigger`.\n *\n * @example\n * ```tsx\n * import { Dialog } from '@base-ui/react/dialog';\n * import { DialogBackdrop, DialogViewport, DialogPopup, DialogTitle, DialogClose } from '@brijbyte/agentic-ui/dialog';\n *\n * <Dialog.Root>\n *   <Dialog.Trigger render={<button>Open</button>} />\n *   <Dialog.Portal>\n *     <DialogBackdrop />\n *     <DialogViewport>\n *       <DialogPopup>\n *         <DialogTitle>Hello</DialogTitle>\n *         <DialogClose aria-label=\"Close\" />\n *       </DialogPopup>\n *     </DialogViewport>\n *   </Dialog.Portal>\n * </Dialog.Root>\n * ```\n */\nimport { forwardRef } from \"react\";\nimport type { ComponentRef, ComponentPropsWithoutRef } from \"react\";\nimport { Dialog as BaseDialog } from \"@base-ui/react/dialog\";\nimport styles from \"./dialog.module.css\";\n\ntype BaseBackdropProps = ComponentPropsWithoutRef<typeof BaseDialog.Backdrop>;\ntype BaseViewportProps = ComponentPropsWithoutRef<typeof BaseDialog.Viewport>;\ntype BasePopupProps = ComponentPropsWithoutRef<typeof BaseDialog.Popup>;\ntype BaseTitleProps = ComponentPropsWithoutRef<typeof BaseDialog.Title>;\ntype BaseDescriptionProps = ComponentPropsWithoutRef<typeof BaseDialog.Description>;\ntype BaseCloseProps = ComponentPropsWithoutRef<typeof BaseDialog.Close>;\n\nexport interface DialogBackdropProps extends Omit<BaseBackdropProps, \"className\"> {\n  className?: string;\n}\nexport interface DialogViewportProps extends Omit<BaseViewportProps, \"className\"> {\n  className?: string;\n}\nexport interface DialogPopupProps extends Omit<BasePopupProps, \"className\"> {\n  className?: string;\n}\nexport interface DialogTitleProps extends Omit<BaseTitleProps, \"className\"> {\n  className?: string;\n}\nexport interface DialogDescriptionProps extends Omit<BaseDescriptionProps, \"className\"> {\n  className?: string;\n}\nexport interface DialogCloseProps extends Omit<BaseCloseProps, \"className\"> {\n  className?: string;\n}\n\nexport const DialogBackdrop = forwardRef<ComponentRef<typeof BaseDialog.Backdrop>, DialogBackdropProps>(function DialogBackdrop(\n  { className, ...props },\n  ref,\n) {\n  return <BaseDialog.Backdrop ref={ref} className={`${styles.backdrop} ${className ?? \"\"}`} {...props} />;\n});\n\nexport const DialogViewport = forwardRef<ComponentRef<typeof BaseDialog.Viewport>, DialogViewportProps>(function DialogViewport(\n  { className, ...props },\n  ref,\n) {\n  return <BaseDialog.Viewport ref={ref} className={`${styles.viewport ?? \"\"} ${className ?? \"\"}`} {...props} />;\n});\n\nexport const DialogPopup = forwardRef<ComponentRef<typeof BaseDialog.Popup>, DialogPopupProps>(function DialogPopup(\n  { className, ...props },\n  ref,\n) {\n  return <BaseDialog.Popup ref={ref} className={`${styles.popup} ${className ?? \"\"}`} {...props} />;\n});\n\nexport const DialogTitle = forwardRef<ComponentRef<typeof BaseDialog.Title>, DialogTitleProps>(function DialogTitle(\n  { className, ...props },\n  ref,\n) {\n  return <BaseDialog.Title ref={ref} className={`${styles.title} ${className ?? \"\"}`} {...props} />;\n});\n\nexport const DialogDescription = forwardRef<ComponentRef<typeof BaseDialog.Description>, DialogDescriptionProps>(function DialogDescription(\n  { className, ...props },\n  ref,\n) {\n  return <BaseDialog.Description ref={ref} className={`${styles.description} ${className ?? \"\"}`} {...props} />;\n});\n\nexport const DialogClose = forwardRef<ComponentRef<typeof BaseDialog.Close>, DialogCloseProps>(function DialogClose(\n  { className, ...props },\n  ref,\n) {\n  return <BaseDialog.Close ref={ref} className={`${styles.close} ${className ?? \"\"}`} {...props} />;\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuDA,MAAa,iBAAiB,WAA0E,SAAS,eAC/G,EAAE,WAAW,GAAG,SAChB,KACA;AACA,QAAO,oBAACA,OAAW,UAAZ;EAA0B;EAAK,WAAW,GAAGC,sBAAO,SAAS,GAAG,aAAa;EAAM,GAAI;EAAS,CAAA;EACvG;AAEF,MAAa,iBAAiB,WAA0E,SAAS,eAC/G,EAAE,WAAW,GAAG,SAChB,KACA;AACA,QAAO,oBAACD,OAAW,UAAZ;EAA0B;EAAK,WAAW,GAAGC,sBAAO,YAAY,GAAG,GAAG,aAAa;EAAM,GAAI;EAAS,CAAA;EAC7G;AAEF,MAAa,cAAc,WAAoE,SAAS,YACtG,EAAE,WAAW,GAAG,SAChB,KACA;AACA,QAAO,oBAACD,OAAW,OAAZ;EAAuB;EAAK,WAAW,GAAGC,sBAAO,MAAM,GAAG,aAAa;EAAM,GAAI;EAAS,CAAA;EACjG;AAEF,MAAa,cAAc,WAAoE,SAAS,YACtG,EAAE,WAAW,GAAG,SAChB,KACA;AACA,QAAO,oBAACD,OAAW,OAAZ;EAAuB;EAAK,WAAW,GAAGC,sBAAO,MAAM,GAAG,aAAa;EAAM,GAAI;EAAS,CAAA;EACjG;AAEF,MAAa,oBAAoB,WAAgF,SAAS,kBACxH,EAAE,WAAW,GAAG,SAChB,KACA;AACA,QAAO,oBAACD,OAAW,aAAZ;EAA6B;EAAK,WAAW,GAAGC,sBAAO,YAAY,GAAG,aAAa;EAAM,GAAI;EAAS,CAAA;EAC7G;AAEF,MAAa,cAAc,WAAoE,SAAS,YACtG,EAAE,WAAW,GAAG,SAChB,KACA;AACA,QAAO,oBAACD,OAAW,OAAZ;EAAuB;EAAK,WAAW,GAAGC,sBAAO,MAAM,GAAG,aAAa;EAAM,GAAI;EAAS,CAAA;EACjG"}

package/dist/drawer/drawer.css

@@ -0,0 +1,253 @@
+@layer components {
+  .backdrop_JNKGQq {
+    --backdrop-opacity: .48;
+    min-height: 100dvh;
+    opacity: calc(var(--backdrop-opacity) * (1 - var(--drawer-swipe-progress)));
+    z-index: var(--z-overlay);
+    background-color: #000;
+    transition-property: opacity;
+    transition-duration: .45s;
+    transition-timing-function: cubic-bezier(.32, .72, 0, 1);
+    position: fixed;
+    inset: 0;
+
+    @supports (-webkit-touch-callout: none) {
+      position: absolute;
+    }
+  }
+
+  .backdrop_JNKGQq[data-starting-style], .backdrop_JNKGQq[data-ending-style] {
+    opacity: 0;
+  }
+
+  .backdrop_JNKGQq[data-swiping] {
+    transition-duration: 0s;
+  }
+
+  .backdrop_JNKGQq[data-ending-style] {
+    transition-duration: calc(var(--drawer-swipe-strength) * .4s);
+  }
+
+  .viewport_JNKGQq {
+    z-index: var(--z-modal);
+    display: flex;
+    position: fixed;
+    inset: 0;
+  }
+
+  .viewport_JNKGQq[data-side="left"] {
+    justify-content: flex-start;
+    align-items: stretch;
+  }
+
+  .viewport_JNKGQq[data-side="right"] {
+    justify-content: flex-end;
+    align-items: stretch;
+  }
+
+  .viewport_JNKGQq[data-side="bottom"] {
+    justify-content: center;
+    align-items: flex-end;
+  }
+
+  .viewport_JNKGQq[data-side="top"] {
+    justify-content: center;
+    align-items: flex-start;
+  }
+
+  @supports (-webkit-touch-callout: none) {
+    .viewport_JNKGQq[data-side="left"], .viewport_JNKGQq[data-side="right"] {
+      padding: .625rem;
+    }
+
+    .viewport_JNKGQq[data-side="bottom"] {
+      padding: 0 .625rem .625rem;
+    }
+
+    .viewport_JNKGQq[data-side="top"] {
+      padding: .625rem .625rem 0;
+    }
+  }
+
+  .popup_JNKGQq {
+    box-sizing: border-box;
+    background-color: var(--color-elevated);
+    border: var(--border-width-base) solid var(--color-line);
+    overscroll-behavior: contain;
+    touch-action: auto;
+    will-change: transform;
+    outline: none;
+    transition-duration: .45s;
+    transition-timing-function: cubic-bezier(.32, .72, 0, 1);
+    overflow-y: auto;
+  }
+
+  .popup_JNKGQq[data-swiping] {
+    user-select: none;
+    transition-duration: 0s;
+  }
+
+  .popup_JNKGQq[data-ending-style] {
+    transition-duration: calc(var(--drawer-swipe-strength) * .4s);
+  }
+
+  .popup-right_JNKGQq {
+    --bleed: 3rem;
+    height: 100%;
+    width: calc(var(--drawer-width, 20rem) + var(--bleed));
+    max-width: calc(100vw - 3rem + var(--bleed));
+    padding: var(--space-6);
+    padding-right: calc(var(--space-6) + var(--bleed));
+    margin-right: calc(-1 * var(--bleed));
+    transform: translateX(var(--drawer-swipe-movement-x));
+    transition-property: transform;
+
+    @supports (-webkit-touch-callout: none) {
+      --bleed: 0px;
+      border-radius: var(--radius-xl);
+      margin-right: 0;
+    }
+  }
+
+  .popup-right_JNKGQq[data-starting-style], .popup-right_JNKGQq[data-ending-style] {
+    transform: translateX(calc(100% - var(--bleed) + 2px));
+  }
+
+  .popup-left_JNKGQq {
+    --bleed: 3rem;
+    height: 100%;
+    width: calc(var(--drawer-width, 20rem) + var(--bleed));
+    max-width: calc(100vw - 3rem + var(--bleed));
+    padding: var(--space-6);
+    padding-left: calc(var(--space-6) + var(--bleed));
+    margin-left: calc(-1 * var(--bleed));
+    transform: translateX(var(--drawer-swipe-movement-x));
+    transition-property: transform;
+
+    @supports (-webkit-touch-callout: none) {
+      --bleed: 0px;
+      border-radius: var(--radius-xl);
+      margin-left: 0;
+    }
+  }
+
+  .popup-left_JNKGQq[data-starting-style], .popup-left_JNKGQq[data-ending-style] {
+    transform: translateX(calc(-100% + var(--bleed) - 2px));
+  }
+
+  .popup-bottom_JNKGQq {
+    width: 100%;
+    max-width: var(--drawer-max-width, 480px);
+    max-height: 90dvh;
+    padding: var(--space-5) var(--space-5) calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
+    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
+    transform: translateY(var(--drawer-swipe-movement-y));
+    border-bottom: none;
+    transition-property: transform;
+
+    @supports (-webkit-touch-callout: none) {
+      border-radius: var(--radius-2xl);
+    }
+  }
+
+  .popup-bottom_JNKGQq[data-starting-style], .popup-bottom_JNKGQq[data-ending-style] {
+    transform: translateY(calc(100% + 2px));
+  }
+
+  .popup-top_JNKGQq {
+    width: 100%;
+    max-width: var(--drawer-max-width, 480px);
+    max-height: 90dvh;
+    padding: calc(var(--space-5) + env(safe-area-inset-top, 0px)) var(--space-5) var(--space-5);
+    border-radius: 0 0 var(--radius-2xl) var(--radius-2xl);
+    transform: translateY(var(--drawer-swipe-movement-y));
+    border-top: none;
+    transition-property: transform;
+
+    @supports (-webkit-touch-callout: none) {
+      border-radius: var(--radius-2xl);
+    }
+  }
+
+  .popup-top_JNKGQq[data-starting-style], .popup-top_JNKGQq[data-ending-style] {
+    transform: translateY(calc(-100% - 2px));
+  }
+
+  .handle-bar_JNKGQq {
+    background-color: var(--color-line-strong);
+    width: 2.5rem;
+    height: 4px;
+    margin: 0 auto var(--space-4);
+    border-radius: 9999px;
+    flex-shrink: 0;
+  }
+
+  .popup-top_JNKGQq .handle-bar_JNKGQq {
+    margin: var(--space-4) auto 0;
+    order: 1;
+  }
+
+  .content_JNKGQq {
+    gap: var(--space-4);
+    flex-direction: column;
+    height: 100%;
+    display: flex;
+  }
+
+  .title_JNKGQq {
+    font-family: var(--font-mono);
+    font-size: var(--font-size-lg);
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-primary);
+    line-height: var(--line-height-tight);
+    letter-spacing: var(--letter-spacing-tight);
+    padding-right: var(--space-6);
+    margin: 0;
+  }
+
+  .description_JNKGQq {
+    font-family: var(--font-mono);
+    font-size: var(--font-size-sm);
+    color: var(--color-secondary);
+    line-height: var(--line-height-relaxed);
+    margin: 0;
+  }
+
+  .close_JNKGQq {
+    top: var(--space-4);
+    right: var(--space-4);
+    border-radius: var(--radius-sm);
+    width: 24px;
+    height: 24px;
+    color: var(--color-tertiary);
+    cursor: pointer;
+    transition: background-color var(--duration-fast) var(--easing-standard),
+      color var(--duration-fast) var(--easing-standard);
+    background: none;
+    border: none;
+    outline: none;
+    justify-content: center;
+    align-items: center;
+    display: flex;
+    position: absolute;
+  }
+
+  .close_JNKGQq:hover {
+    background-color: var(--color-hover);
+    color: var(--color-primary);
+  }
+
+  .close_JNKGQq:focus-visible {
+    box-shadow: var(--shadow-focus);
+  }
+
+  .footer_JNKGQq {
+    justify-content: flex-end;
+    align-items: center;
+    gap: var(--space-2);
+    padding-top: var(--space-4);
+    border-top: var(--border-width-base) solid var(--color-line-subtle);
+    margin-top: auto;
+    display: flex;
+  }
+}

package/dist/drawer/drawer.d.ts

@@ -0,0 +1,38 @@
+import { ReactElement, ReactNode } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import styles from "./drawer.module.css";
+
+//#region src/drawer/drawer.d.ts
+type DrawerSide = "left" | "right" | "bottom" | "top";
+interface DrawerProps {
+  /** Element that triggers the drawer — rendered as a `Drawer.Trigger`. */
+  trigger?: ReactElement;
+  /** Which edge the drawer slides in from. @default "right" */
+  side?: DrawerSide;
+  title?: ReactNode;
+  description?: ReactNode;
+  children?: ReactNode;
+  footer?: ReactNode;
+  /** Show a drag handle bar (useful for bottom/top drawers). @default true for bottom/top */
+  handleBar?: boolean;
+  /** Show a close button in the top-right corner. @default true */
+  dismissible?: boolean;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}
+declare function Drawer({
+  trigger,
+  side,
+  title,
+  description,
+  children,
+  footer,
+  handleBar,
+  dismissible,
+  onOpenChange,
+  ...props
+}: DrawerProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Drawer, DrawerProps, DrawerSide, styles };
+//# sourceMappingURL=drawer.d.ts.map

package/dist/drawer/drawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.d.ts","names":[],"sources":["../../src/drawer/drawer.tsx"],"mappings":";;;;;KAIY,UAAA;AAAA,UAEK,WAAA;;EAEf,OAAA,GAAU,YAAA;EAJU;EAMpB,IAAA,GAAO,UAAA;EACP,KAAA,GAAQ,SAAA;EACR,WAAA,GAAc,SAAA;EACd,QAAA,GAAW,SAAA;EACX,MAAA,GAAS,SAAA;;EAET,SAAA;EANO;EAQP,WAAA;EAEA,IAAA;EACA,WAAA;EACA,YAAA,IAAgB,IAAA;AAAA;AAAA,iBA2BF,MAAA,CAAA;EACd,OAAA;EACA,IAAA;EACA,KAAA;EACA,WAAA;EACA,QAAA;EACA,MAAA;EACA,SAAA;EACA,WAAA;EACA,YAAA;EAAA,GACG;AAAA,GACF,WAAA,GAAW,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/drawer/drawer.js

@@ -0,0 +1,87 @@
+import drawer_module_default from "./drawer.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Drawer } from "@base-ui/react/drawer";
+//#region src/drawer/drawer.tsx
+function XIcon() {
+	return /* @__PURE__ */ jsx("svg", {
+		width: "12",
+		height: "12",
+		viewBox: "0 0 12 12",
+		fill: "none",
+		"aria-hidden": true,
+		children: /* @__PURE__ */ jsx("path", {
+			d: "M2 2L10 10M10 2L2 10",
+			stroke: "currentColor",
+			strokeWidth: "1.5",
+			strokeLinecap: "round"
+		})
+	});
+}
+/** Map side → swipe direction for dismiss gesture */
+const SWIPE_DIR = {
+	right: "right",
+	left: "left",
+	bottom: "down",
+	top: "up"
+};
+/** Popup CSS classes by side */
+const POPUP_CLASS = {
+	right: drawer_module_default["popup-right"],
+	left: drawer_module_default["popup-left"],
+	bottom: drawer_module_default["popup-bottom"],
+	top: drawer_module_default["popup-top"]
+};
+function Drawer$1({ trigger, side = "right", title, description, children, footer, handleBar, dismissible = true, onOpenChange, ...props }) {
+	const showHandle = handleBar ?? (side === "bottom" || side === "top");
+	const popupClass = `${drawer_module_default.popup} ${POPUP_CLASS[side]}`;
+	return /* @__PURE__ */ jsxs(Drawer.Root, {
+		swipeDirection: SWIPE_DIR[side],
+		onOpenChange,
+		...props,
+		children: [trigger && /* @__PURE__ */ jsx(Drawer.Trigger, { render: trigger }), /* @__PURE__ */ jsxs(Drawer.Portal, { children: [/* @__PURE__ */ jsx(Drawer.Backdrop, { className: drawer_module_default.backdrop }), /* @__PURE__ */ jsx(Drawer.Viewport, {
+			className: drawer_module_default.viewport,
+			"data-side": side,
+			children: /* @__PURE__ */ jsxs(Drawer.Popup, {
+				className: popupClass,
+				style: { position: "relative" },
+				children: [
+					showHandle && side !== "top" && /* @__PURE__ */ jsx("div", {
+						className: drawer_module_default["handle-bar"],
+						"aria-hidden": true
+					}),
+					/* @__PURE__ */ jsxs(Drawer.Content, {
+						className: drawer_module_default.content,
+						children: [
+							title && /* @__PURE__ */ jsx(Drawer.Title, {
+								className: drawer_module_default.title,
+								children: title
+							}),
+							description && /* @__PURE__ */ jsx(Drawer.Description, {
+								className: drawer_module_default.description,
+								children: description
+							}),
+							children,
+							footer && /* @__PURE__ */ jsx("div", {
+								className: drawer_module_default.footer,
+								children: footer
+							})
+						]
+					}),
+					showHandle && side === "top" && /* @__PURE__ */ jsx("div", {
+						className: drawer_module_default["handle-bar"],
+						"aria-hidden": true
+					}),
+					dismissible && /* @__PURE__ */ jsx(Drawer.Close, {
+						className: drawer_module_default.close,
+						"aria-label": "Close drawer",
+						children: /* @__PURE__ */ jsx(XIcon, {})
+					})
+				]
+			})
+		})] })]
+	});
+}
+//#endregion
+export { Drawer$1 as Drawer };
+
+//# sourceMappingURL=drawer.js.map