@brijbyte/agentic-ui 0.0.1-beta → 0.0.1

package/dist/tabs/tabs.css

@@ -0,0 +1,90 @@
+@layer theme, base;
+
+@layer components {
+  .root_prqJ8a {
+    flex-direction: column;
+    gap: 0;
+    display: flex;
+  }
+
+  .list_prqJ8a {
+    align-items: center;
+    gap: var(--space-px);
+    border-bottom: var(--border-width-base) solid var(--color-border-base);
+    scrollbar-width: none;
+    display: flex;
+    overflow-x: auto;
+  }
+
+  .list_prqJ8a::-webkit-scrollbar {
+    display: none;
+  }
+
+  .tab_prqJ8a {
+    align-items: center;
+    gap: var(--space-1-5);
+    padding: var(--space-1-5) var(--space-3);
+    font-family: var(--font-mono);
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-regular);
+    color: var(--color-text-tertiary);
+    cursor: pointer;
+    white-space: nowrap;
+    transition: color var(--duration-fast) var(--easing-standard),
+      border-color var(--duration-fast) var(--easing-standard);
+    user-select: none;
+    background: none;
+    border: none;
+    border-bottom: 3px solid #0000;
+    outline: none;
+    margin-bottom: -1px;
+    display: inline-flex;
+    position: relative;
+  }
+
+  .tab_prqJ8a:hover:not([data-disabled]) {
+    color: var(--color-text-primary);
+    border-bottom-color: var(--color-border-strong);
+  }
+
+  .tab_prqJ8a:focus-visible {
+    outline: none;
+  }
+
+  .tab_prqJ8a:focus-visible:after {
+    content: "";
+    border-radius: var(--radius-sm);
+    box-shadow: var(--shadow-focus);
+    pointer-events: none;
+    position: absolute;
+    inset: 2px 2px 8px;
+  }
+
+  .tab_prqJ8a[data-active] {
+    color: var(--color-text-primary);
+    font-weight: var(--font-weight-medium);
+    border-bottom-color: var(--color-accent);
+  }
+
+  .tab_prqJ8a[data-disabled] {
+    opacity: .44;
+    cursor: not-allowed;
+  }
+
+  .panel_prqJ8a {
+    padding-top: var(--space-4);
+    transition: opacity .15s var(--easing-ease-out);
+    outline: none;
+  }
+
+  .panel_prqJ8a[data-starting-style] {
+    opacity: 0;
+  }
+
+  .panel_prqJ8a:focus-visible {
+    box-shadow: var(--shadow-focus);
+    border-radius: var(--radius-sm);
+  }
+}
+
+@layer utilities;

package/dist/tabs/tabs.d.ts

@@ -0,0 +1,28 @@
+import { ReactNode } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import styles from "./tabs.module.css";
+
+//#region src/tabs/tabs.d.ts
+interface TabItem {
+  value: string;
+  label: ReactNode;
+  content: ReactNode;
+  disabled?: boolean;
+  icon?: ReactNode;
+}
+interface TabsProps {
+  items: TabItem[];
+  value?: string;
+  defaultValue?: string;
+  /** `eventDetails` is the base-ui event details object. */
+  onValueChange?: (value: unknown, eventDetails: unknown) => void;
+  className?: string;
+}
+declare function Tabs({
+  items,
+  className,
+  ...props
+}: TabsProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { TabItem, Tabs, TabsProps, styles };
+//# sourceMappingURL=tabs.d.ts.map

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

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

package/dist/tabs/tabs.js

@@ -0,0 +1,30 @@
+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
+function Tabs$1({ items, className, ...props }) {
+	const defaultVal = props.defaultValue ?? items[0]?.value;
+	return /* @__PURE__ */ jsxs(Tabs.Root, {
+		className: `${tabs_module_default.root} ${className ?? ""}`,
+		defaultValue: defaultVal,
+		onValueChange: props.onValueChange,
+		value: props.value,
+		children: [/* @__PURE__ */ jsx(Tabs.List, {
+			className: tabs_module_default.list,
+			children: items.map((item) => /* @__PURE__ */ jsxs(Tabs.Tab, {
+				value: item.value,
+				disabled: item.disabled,
+				className: tabs_module_default.tab,
+				children: [item.icon, item.label]
+			}, item.value))
+		}), items.map((item) => /* @__PURE__ */ jsx(Tabs.Panel, {
+			value: item.value,
+			className: tabs_module_default.panel,
+			children: item.content
+		}, item.value))]
+	});
+}
+//#endregion
+export { Tabs$1 as Tabs };
+
+//# sourceMappingURL=tabs.js.map

package/dist/tabs/tabs.js.map

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

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

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

package/dist/tabs/tabs.module.js

@@ -0,0 +1,11 @@
+//#region src/tabs/tabs.module.css
+var tabs_module_default = {
+	"list": "list_prqJ8a",
+	"panel": "panel_prqJ8a",
+	"root": "root_prqJ8a",
+	"tab": "tab_prqJ8a"
+};
+//#endregion
+export { tabs_module_default as default };
+
+//# sourceMappingURL=tabs.module.js.map

package/dist/tabs/tabs.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.module.js","names":[],"sources":["../../src/tabs/tabs.module.css"],"sourcesContent":["@layer theme, base, components, utilities;\n\n@layer components {\n  .root {\n    display: flex;\n    flex-direction: column;\n    gap: 0;\n  }\n\n  /* ─── Tab List ──────────────────────────────────────── */\n  .list {\n    display: flex;\n    align-items: center;\n    gap: var(--space-px);\n    border-bottom: var(--border-width-base) solid var(--color-border-base);\n    overflow-x: auto;\n    scrollbar-width: none;\n  }\n\n  .list::-webkit-scrollbar {\n    display: none;\n  }\n\n  /* ─── Tab trigger ────────────────────────────────────── */\n  .tab {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--space-1-5);\n    padding: var(--space-1-5) var(--space-3);\n    font-family: var(--font-mono);\n    font-size: var(--font-size-sm);\n    font-weight: var(--font-weight-regular);\n    color: var(--color-text-tertiary);\n    border: none;\n    background: none;\n    cursor: pointer;\n    outline: none;\n    white-space: nowrap;\n    position: relative;\n    margin-bottom: -1px;\n    border-bottom: 3px solid transparent;\n    transition:\n      color var(--duration-fast) var(--easing-standard),\n      border-color var(--duration-fast) var(--easing-standard);\n    user-select: none;\n  }\n\n  .tab:hover:not([data-disabled]) {\n    color: var(--color-text-primary);\n    border-bottom-color: var(--color-border-strong);\n  }\n\n  .tab:focus-visible {\n    outline: none;\n  }\n\n  .tab:focus-visible::after {\n    content: \"\";\n    position: absolute;\n    inset: 2px 2px 8px;\n    border-radius: var(--radius-sm);\n    box-shadow: var(--shadow-focus);\n    pointer-events: none;\n  }\n\n  .tab[data-active] {\n    color: var(--color-text-primary);\n    font-weight: var(--font-weight-medium);\n    border-bottom-color: var(--color-accent);\n  }\n\n  .tab[data-disabled] {\n    opacity: 0.44;\n    cursor: not-allowed;\n  }\n\n  /* ─── Tab panel ─────────────────────────────────────── */\n  .panel {\n    padding-top: var(--space-4);\n    outline: none;\n    transition: opacity 150ms var(--easing-ease-out);\n  }\n\n  .panel[data-starting-style] {\n    opacity: 0;\n  }\n\n  .panel:focus-visible {\n    box-shadow: var(--shadow-focus);\n    border-radius: var(--radius-sm);\n  }\n}\n"],"mappings":""}

package/dist/tailwind-theme.css

@@ -0,0 +1,142 @@
+/**
+ * @brijbyte/agentic-ui — Tailwind v4 theme integration
+ *
+ * Import this AFTER `@import "tailwindcss"` and AFTER the agentic-ui
+ * token/reset CSS in your app's CSS entry file:
+ *
+ *   @import "tailwindcss";
+ *   @import "@brijbyte/agentic-ui/styles/tokens.css";
+ *   @import "@brijbyte/agentic-ui/styles/reset.css";
+ *   @import "@brijbyte/agentic-ui/tailwind-theme";
+ *
+ * `@theme inline` tells Tailwind v4 to generate utility classes that
+ * reference our CSS custom properties directly — dark mode and theme
+ * overrides work automatically without any Tailwind configuration.
+ *
+ * Generated utility examples:
+ *   bg-bg-base        → background-color: var(--color-bg-base)
+ *   text-text-primary → color: var(--color-text-primary)
+ *   border-border-base→ border-color: var(--color-border-base)
+ *   font-mono         → font-family: var(--font-mono)
+ *   rounded-md        → border-radius: var(--radius-md)
+ *   shadow-sm         → box-shadow: var(--shadow-sm)
+ */
+
+@theme inline {
+  /* ── Backgrounds ────────────────────────────────────────────── */
+  --color-bg-base: var(--color-bg-base);
+  --color-bg-elevated: var(--color-bg-elevated);
+  --color-bg-sunken: var(--color-bg-sunken);
+  --color-bg-overlay: var(--color-bg-overlay);
+  --color-bg-sidebar: var(--color-bg-sidebar);
+
+  /* ── Surfaces ───────────────────────────────────────────────── */
+  --color-surface-1: var(--color-surface-1);
+  --color-surface-2: var(--color-surface-2);
+  --color-surface-3: var(--color-surface-3);
+  --color-surface-hover: var(--color-surface-hover);
+  --color-surface-active: var(--color-surface-active);
+  --color-surface-selected: var(--color-surface-selected);
+
+  /* ── Text ───────────────────────────────────────────────────── */
+  --color-text-primary: var(--color-text-primary);
+  --color-text-secondary: var(--color-text-secondary);
+  --color-text-tertiary: var(--color-text-tertiary);
+  --color-text-disabled: var(--color-text-disabled);
+  --color-text-inverse: var(--color-text-inverse);
+  --color-text-on-accent: var(--color-text-on-accent);
+  --color-text-code: var(--color-text-code);
+
+  /* ── Borders ────────────────────────────────────────────────── */
+  --color-border-base: var(--color-border-base);
+  --color-border-strong: var(--color-border-strong);
+  --color-border-subtle: var(--color-border-subtle);
+  --color-border-focus: var(--color-border-focus);
+
+  /* ── Accent (macOS blue) ────────────────────────────────────── */
+  --color-accent: var(--color-accent);
+  --color-accent-hover: var(--color-accent-hover);
+  --color-accent-pressed: var(--color-accent-pressed);
+  --color-accent-tint: var(--color-accent-tint);
+  --color-accent-tint-hover: var(--color-accent-tint-hover);
+
+  /* ── Focus ──────────────────────────────────────────────────── */
+  --color-focus-ring: var(--color-focus-ring);
+
+  /* ── Status ─────────────────────────────────────────────────── */
+  --color-success-bg: var(--color-success-bg);
+  --color-success-border: var(--color-success-border);
+  --color-success-text: var(--color-success-text);
+  --color-success-solid: var(--color-success-solid);
+
+  --color-warning-bg: var(--color-warning-bg);
+  --color-warning-border: var(--color-warning-border);
+  --color-warning-text: var(--color-warning-text);
+  --color-warning-solid: var(--color-warning-solid);
+
+  --color-error-bg: var(--color-error-bg);
+  --color-error-border: var(--color-error-border);
+  --color-error-text: var(--color-error-text);
+  --color-error-solid: var(--color-error-solid);
+
+  --color-info-bg: var(--color-info-bg);
+  --color-info-border: var(--color-info-border);
+  --color-info-text: var(--color-info-text);
+  --color-info-solid: var(--color-info-solid);
+
+  /* ── Code syntax ────────────────────────────────────────────── */
+  --color-code-bg: var(--color-code-bg);
+  --color-code-border: var(--color-code-border);
+  --color-code-keyword: var(--color-code-keyword);
+  --color-code-string: var(--color-code-string);
+  --color-code-function: var(--color-code-function);
+
+  /* ── Fonts ──────────────────────────────────────────────────── */
+  --font-display: var(--font-display);
+  --font-mono: var(--font-mono);
+  --font-sans: var(--font-sans);
+
+  /* ── Border radius ──────────────────────────────────────────── */
+  --radius-none: var(--radius-none);
+  --radius-sm: var(--radius-sm);
+  --radius-md: var(--radius-md);
+  --radius-lg: var(--radius-lg);
+  --radius-xl: var(--radius-xl);
+  --radius-2xl: var(--radius-2xl);
+  --radius-full: var(--radius-full);
+
+  /* ── Shadows ────────────────────────────────────────────────── */
+  --shadow-xs: var(--shadow-xs);
+  --shadow-sm: var(--shadow-sm);
+  --shadow-md: var(--shadow-md);
+  --shadow-lg: var(--shadow-lg);
+  --shadow-xl: var(--shadow-xl);
+  --shadow-popover: var(--shadow-popover);
+  --shadow-focus: var(--shadow-focus);
+  --shadow-inset: var(--shadow-inset);
+
+  /* ── Line heights ───────────────────────────────────────────── */
+  --leading-tight: var(--line-height-tight);
+  --leading-normal: var(--line-height-normal);
+  --leading-relaxed: var(--line-height-relaxed);
+
+  /* ── Letter spacing ─────────────────────────────────────────── */
+  --tracking-tight: var(--letter-spacing-tight);
+  --tracking-normal: var(--letter-spacing-normal);
+  --tracking-wide: var(--letter-spacing-wide);
+  --tracking-wider: var(--letter-spacing-wider);
+
+  /* ── Easing ─────────────────────────────────────────────────── */
+  --ease-standard: var(--easing-standard);
+  --ease-spring: var(--easing-spring);
+  --ease-in: var(--easing-ease-in);
+  --ease-out: var(--easing-ease-out);
+  --ease-linear: var(--easing-linear);
+
+  /* ── Z-index ────────────────────────────────────────────────── */
+  --z-dropdown: var(--z-dropdown);
+  --z-overlay: var(--z-overlay);
+  --z-modal: var(--z-modal);
+  --z-toast: var(--z-toast);
+  --z-tooltip: var(--z-tooltip);
+}

package/dist/toast/index.d.ts

@@ -0,0 +1,3 @@
+import { ToastProvider, ToastProviderProps, ToastType, ToastViewport, ToastViewportProps, styles, useToastManager } from "./toast.js";
+import { ToastClose, ToastCloseProps, ToastDescription, ToastDescriptionProps, ToastRoot, ToastRootProps, ToastTitle, ToastTitleProps, ToastViewportPart, ToastViewportPartProps } from "./parts.js";
+export { ToastClose, type ToastCloseProps, ToastDescription, type ToastDescriptionProps, ToastProvider, type ToastProviderProps, ToastRoot, type ToastRootProps, styles as ToastStyles, ToastTitle, type ToastTitleProps, type ToastType, ToastViewport, ToastViewportPart, type ToastViewportPartProps, type ToastViewportProps, useToastManager };

package/dist/toast/index.js

@@ -0,0 +1,4 @@
+import toast_module_default from "./toast.module.js";
+import { ToastProvider, ToastViewport, useToastManager } from "./toast.js";
+import { ToastClose, ToastDescription, ToastRoot, ToastTitle, ToastViewportPart } from "./parts.js";
+export { ToastClose, ToastDescription, ToastProvider, ToastRoot, toast_module_default as ToastStyles, ToastTitle, ToastViewport, ToastViewportPart, useToastManager };

package/dist/toast/parts.d.ts

@@ -0,0 +1,33 @@
+import * as react from "react";
+import { ComponentPropsWithoutRef } from "react";
+import { Toast } from "@base-ui/react/toast";
+
+//#region src/toast/parts.d.ts
+type BaseRootProps = ComponentPropsWithoutRef<typeof Toast.Root>;
+type BaseTitleProps = ComponentPropsWithoutRef<typeof Toast.Title>;
+type BaseDescriptionProps = ComponentPropsWithoutRef<typeof Toast.Description>;
+type BaseCloseProps = ComponentPropsWithoutRef<typeof Toast.Close>;
+type BaseViewportProps = ComponentPropsWithoutRef<typeof Toast.Viewport>;
+interface ToastRootProps extends Omit<BaseRootProps, "className"> {
+  className?: string;
+}
+interface ToastTitleProps extends Omit<BaseTitleProps, "className"> {
+  className?: string;
+}
+interface ToastDescriptionProps extends Omit<BaseDescriptionProps, "className"> {
+  className?: string;
+}
+interface ToastCloseProps extends Omit<BaseCloseProps, "className"> {
+  className?: string;
+}
+interface ToastViewportPartProps extends Omit<BaseViewportProps, "className"> {
+  className?: string;
+}
+declare const ToastRoot: react.ForwardRefExoticComponent<ToastRootProps & react.RefAttributes<HTMLDivElement>>;
+declare const ToastTitle: react.ForwardRefExoticComponent<ToastTitleProps & react.RefAttributes<HTMLHeadingElement>>;
+declare const ToastDescription: react.ForwardRefExoticComponent<ToastDescriptionProps & react.RefAttributes<HTMLParagraphElement>>;
+declare const ToastClose: react.ForwardRefExoticComponent<ToastCloseProps & react.RefAttributes<HTMLButtonElement>>;
+declare const ToastViewportPart: react.ForwardRefExoticComponent<ToastViewportPartProps & react.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { ToastClose, ToastCloseProps, ToastDescription, ToastDescriptionProps, ToastRoot, ToastRootProps, ToastTitle, ToastTitleProps, ToastViewportPart, ToastViewportPartProps };
+//# sourceMappingURL=parts.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"parts.d.ts","names":[],"sources":["../../src/toast/parts.tsx"],"mappings":";;;;;KAuBK,aAAA,GAAgB,wBAAA,QAAgC,KAAA,CAAU,IAAA;AAAA,KAC1D,cAAA,GAAiB,wBAAA,QAAgC,KAAA,CAAU,KAAA;AAAA,KAC3D,oBAAA,GAAuB,wBAAA,QAAgC,KAAA,CAAU,WAAA;AAAA,KACjE,cAAA,GAAiB,wBAAA,QAAgC,KAAA,CAAU,KAAA;AAAA,KAC3D,iBAAA,GAAoB,wBAAA,QAAgC,KAAA,CAAU,QAAA;AAAA,UAElD,cAAA,SAAuB,IAAA,CAAK,aAAA;EAC3C,SAAA;AAAA;AAAA,UAEe,eAAA,SAAwB,IAAA,CAAK,cAAA;EAC5C,SAAA;AAAA;AAAA,UAEe,qBAAA,SAA8B,IAAA,CAAK,oBAAA;EAClD,SAAA;AAAA;AAAA,UAEe,eAAA,SAAwB,IAAA,CAAK,cAAA;EAC5C,SAAA;AAAA;AAAA,UAEe,sBAAA,SAA+B,IAAA,CAAK,iBAAA;EACnD,SAAA;AAAA;AAAA,cAGW,SAAA,EAAS,KAAA,CAAA,yBAAA,CAAA,cAAA,GAAA,KAAA,CAAA,aAAA,CAAA,cAAA;AAAA,cAIT,UAAA,EAAU,KAAA,CAAA,yBAAA,CAAA,eAAA,GAAA,KAAA,CAAA,aAAA,CAAA,kBAAA;AAAA,cAOV,gBAAA,EAAgB,KAAA,CAAA,yBAAA,CAAA,qBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,oBAAA;AAAA,cAOhB,UAAA,EAAU,KAAA,CAAA,yBAAA,CAAA,eAAA,GAAA,KAAA,CAAA,aAAA,CAAA,iBAAA;AAAA,cAOV,iBAAA,EAAiB,KAAA,CAAA,yBAAA,CAAA,sBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,cAAA"}

package/dist/toast/parts.js

@@ -0,0 +1,62 @@
+import toast_module_default from "./toast.module.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Toast } from "@base-ui/react/toast";
+//#region src/toast/parts.tsx
+/**
+* Styled primitives for Toast.
+*
+* @example
+* ```tsx
+* import { Toast } from '@base-ui/react/toast';
+* import { ToastRoot, ToastTitle, ToastDescription, ToastClose } from '@brijbyte/agentic-ui/toast';
+*
+* // Inside a Toast.Viewport or custom viewport:
+* manager.toasts.map((toast) => (
+*   <ToastRoot key={toast.id} toast={toast}>
+*     <ToastTitle />
+*     <ToastDescription />
+*     <ToastClose aria-label="Dismiss" />
+*   </ToastRoot>
+* ))
+* ```
+*/
+const ToastRoot = forwardRef(function ToastRoot({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Toast.Root, {
+		ref,
+		className: `${toast_module_default.toast} ${className ?? ""}`,
+		...props
+	});
+});
+const ToastTitle = forwardRef(function ToastTitle({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Toast.Title, {
+		ref,
+		className: `${toast_module_default.title} ${className ?? ""}`,
+		...props
+	});
+});
+const ToastDescription = forwardRef(function ToastDescription({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Toast.Description, {
+		ref,
+		className: `${toast_module_default.description} ${className ?? ""}`,
+		...props
+	});
+});
+const ToastClose = forwardRef(function ToastClose({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Toast.Close, {
+		ref,
+		className: `${toast_module_default.close} ${className ?? ""}`,
+		...props
+	});
+});
+const ToastViewportPart = forwardRef(function ToastViewportPart({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Toast.Viewport, {
+		ref,
+		className: `${toast_module_default.viewport} ${className ?? ""}`,
+		...props
+	});
+});
+//#endregion
+export { ToastClose, ToastDescription, ToastRoot, ToastTitle, ToastViewportPart };
+
+//# sourceMappingURL=parts.js.map

package/dist/toast/parts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"parts.js","names":["BaseToast","styles"],"sources":["../../src/toast/parts.tsx"],"sourcesContent":["/**\n * Styled primitives for Toast.\n *\n * @example\n * ```tsx\n * import { Toast } from '@base-ui/react/toast';\n * import { ToastRoot, ToastTitle, ToastDescription, ToastClose } from '@brijbyte/agentic-ui/toast';\n *\n * // Inside a Toast.Viewport or custom viewport:\n * manager.toasts.map((toast) => (\n *   <ToastRoot key={toast.id} toast={toast}>\n *     <ToastTitle />\n *     <ToastDescription />\n *     <ToastClose aria-label=\"Dismiss\" />\n *   </ToastRoot>\n * ))\n * ```\n */\nimport { forwardRef } from \"react\";\nimport type { ComponentRef, ComponentPropsWithoutRef } from \"react\";\nimport { Toast as BaseToast } from \"@base-ui/react/toast\";\nimport styles from \"./toast.module.css\";\n\ntype BaseRootProps = ComponentPropsWithoutRef<typeof BaseToast.Root>;\ntype BaseTitleProps = ComponentPropsWithoutRef<typeof BaseToast.Title>;\ntype BaseDescriptionProps = ComponentPropsWithoutRef<typeof BaseToast.Description>;\ntype BaseCloseProps = ComponentPropsWithoutRef<typeof BaseToast.Close>;\ntype BaseViewportProps = ComponentPropsWithoutRef<typeof BaseToast.Viewport>;\n\nexport interface ToastRootProps extends Omit<BaseRootProps, \"className\"> {\n  className?: string;\n}\nexport interface ToastTitleProps extends Omit<BaseTitleProps, \"className\"> {\n  className?: string;\n}\nexport interface ToastDescriptionProps extends Omit<BaseDescriptionProps, \"className\"> {\n  className?: string;\n}\nexport interface ToastCloseProps extends Omit<BaseCloseProps, \"className\"> {\n  className?: string;\n}\nexport interface ToastViewportPartProps extends Omit<BaseViewportProps, \"className\"> {\n  className?: string;\n}\n\nexport const ToastRoot = forwardRef<ComponentRef<typeof BaseToast.Root>, ToastRootProps>(function ToastRoot({ className, ...props }, ref) {\n  return <BaseToast.Root ref={ref} className={`${styles.toast} ${className ?? \"\"}`} {...props} />;\n});\n\nexport const ToastTitle = forwardRef<ComponentRef<typeof BaseToast.Title>, ToastTitleProps>(function ToastTitle(\n  { className, ...props },\n  ref,\n) {\n  return <BaseToast.Title ref={ref} className={`${styles.title} ${className ?? \"\"}`} {...props} />;\n});\n\nexport const ToastDescription = forwardRef<ComponentRef<typeof BaseToast.Description>, ToastDescriptionProps>(function ToastDescription(\n  { className, ...props },\n  ref,\n) {\n  return <BaseToast.Description ref={ref} className={`${styles.description} ${className ?? \"\"}`} {...props} />;\n});\n\nexport const ToastClose = forwardRef<ComponentRef<typeof BaseToast.Close>, ToastCloseProps>(function ToastClose(\n  { className, ...props },\n  ref,\n) {\n  return <BaseToast.Close ref={ref} className={`${styles.close} ${className ?? \"\"}`} {...props} />;\n});\n\nexport const ToastViewportPart = forwardRef<ComponentRef<typeof BaseToast.Viewport>, ToastViewportPartProps>(function ToastViewportPart(\n  { className, ...props },\n  ref,\n) {\n  return <BaseToast.Viewport ref={ref} className={`${styles.viewport} ${className ?? \"\"}`} {...props} />;\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA6CA,MAAa,YAAY,WAAgE,SAAS,UAAU,EAAE,WAAW,GAAG,SAAS,KAAK;AACxI,QAAO,oBAACA,MAAU,MAAX;EAAqB;EAAK,WAAW,GAAGC,qBAAO,MAAM,GAAG,aAAa;EAAM,GAAI;EAAS,CAAA;EAC/F;AAEF,MAAa,aAAa,WAAkE,SAAS,WACnG,EAAE,WAAW,GAAG,SAChB,KACA;AACA,QAAO,oBAACD,MAAU,OAAX;EAAsB;EAAK,WAAW,GAAGC,qBAAO,MAAM,GAAG,aAAa;EAAM,GAAI;EAAS,CAAA;EAChG;AAEF,MAAa,mBAAmB,WAA8E,SAAS,iBACrH,EAAE,WAAW,GAAG,SAChB,KACA;AACA,QAAO,oBAACD,MAAU,aAAX;EAA4B;EAAK,WAAW,GAAGC,qBAAO,YAAY,GAAG,aAAa;EAAM,GAAI;EAAS,CAAA;EAC5G;AAEF,MAAa,aAAa,WAAkE,SAAS,WACnG,EAAE,WAAW,GAAG,SAChB,KACA;AACA,QAAO,oBAACD,MAAU,OAAX;EAAsB;EAAK,WAAW,GAAGC,qBAAO,MAAM,GAAG,aAAa;EAAM,GAAI;EAAS,CAAA;EAChG;AAEF,MAAa,oBAAoB,WAA4E,SAAS,kBACpH,EAAE,WAAW,GAAG,SAChB,KACA;AACA,QAAO,oBAACD,MAAU,UAAX;EAAyB;EAAK,WAAW,GAAGC,qBAAO,SAAS,GAAG,aAAa;EAAM,GAAI;EAAS,CAAA;EACtG"}

package/dist/toast/toast.css

@@ -0,0 +1,211 @@
+@layer theme, base;
+
+@layer components {
+  .viewport_QXnIWW {
+    bottom: var(--space-4);
+    right: var(--space-4);
+    z-index: var(--z-toast);
+    width: 360px;
+    max-width: calc(100vw - var(--space-8));
+    pointer-events: none;
+    outline: none;
+    flex-direction: column;
+    list-style: none;
+    display: flex;
+    position: fixed;
+  }
+
+  .viewport-list_QXnIWW {
+    gap: var(--space-2);
+  }
+
+  .viewport-stacked_QXnIWW {
+    gap: 0;
+  }
+
+  .toast_QXnIWW {
+    align-items: flex-start;
+    gap: var(--space-3);
+    padding: var(--space-3) var(--space-4);
+    background-color: var(--color-bg-overlay);
+    border: var(--border-width-base) solid var(--color-border-base);
+    border-radius: var(--radius-xl);
+    box-shadow: var(--shadow-popover);
+    pointer-events: auto;
+    cursor: default;
+    width: 100%;
+    display: flex;
+  }
+
+  @supports (backdrop-filter: blur(12px)) {
+    .toast_QXnIWW {
+      -webkit-backdrop-filter: blur(12px) saturate(1.5);
+    }
+  }
+
+  .viewport-list_QXnIWW .toast_QXnIWW {
+    transform-origin: 100% 100%;
+    opacity: 1;
+    transition: opacity .3s var(--easing-ease-out),
+      transform .3s var(--easing-spring);
+    transform: translateX(0);
+
+    @starting-style {
+      opacity: 0;
+      transform: translateX(calc(100% + var(--space-4)));
+    }
+  }
+
+  .viewport-list_QXnIWW .toast_QXnIWW[data-ending-style] {
+    opacity: 0;
+    transform: translateX(calc(100% + var(--space-4)));
+    transition: opacity .2s var(--easing-ease-in),
+      transform .2s var(--easing-ease-in);
+  }
+
+  .viewport-stacked_QXnIWW {
+    height: calc(var(--toast-frontmost-height, 64px) + 20px);
+    box-sizing: content-box;
+    clip-path: inset(0 0 0 0 round var(--radius-xl));
+    transition: clip-path .2s var(--easing-ease-out),
+      height .2s var(--easing-ease-out);
+    padding-top: 20px;
+  }
+
+  .viewport-stacked_QXnIWW[data-expanded] {
+    clip-path: inset(-9999px 0 0 0 round var(--radius-xl));
+    height: calc(var(--toast-frontmost-height, 64px) + 20px);
+  }
+
+  .viewport-stacked_QXnIWW[data-expanded]:after {
+    content: "";
+    pointer-events: auto;
+    z-index: 0;
+    position: absolute;
+    inset: -9999px 0 0;
+  }
+
+  .toast-stacked_QXnIWW {
+    z-index: calc(50 - var(--toast-index));
+    transform: translateY(calc(var(--toast-index) * -8px)) scale(calc(1 - var(--toast-index) * .04));
+    transform-origin: bottom;
+    opacity: calc(1 - var(--toast-index) * .15);
+    transition: transform .2s var(--easing-ease-out),
+      opacity .2s var(--easing-ease-out);
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+
+  .viewport-stacked_QXnIWW[data-expanded] .toast-stacked_QXnIWW {
+    transform: translateY(calc((var(--toast-offset-y) + var(--toast-index) * 8px) * -1));
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .viewport-stacked_QXnIWW .toast-stacked_QXnIWW {
+    @starting-style {
+      opacity: 0;
+      transform: translateY(16px) scale(calc(1 - var(--toast-index) * .04));
+    }
+  }
+
+  .viewport-stacked_QXnIWW .toast-stacked_QXnIWW[data-ending-style] {
+    opacity: 0;
+    transform: translateX(calc(100% + var(--space-4)));
+    transition: opacity .15s var(--easing-ease-in),
+      transform .15s var(--easing-ease-in);
+  }
+
+  .toast-success_QXnIWW {
+    background-color: color-mix(in srgb, var(--color-success-solid) 6%, var(--color-bg-overlay));
+  }
+
+  .toast-error_QXnIWW {
+    background-color: color-mix(in srgb, var(--color-error-solid) 6%, var(--color-bg-overlay));
+  }
+
+  .toast-warning_QXnIWW {
+    background-color: color-mix(in srgb, var(--color-warning-solid) 6%, var(--color-bg-overlay));
+  }
+
+  .toast-info_QXnIWW {
+    background-color: color-mix(in srgb, var(--color-info-solid) 6%, var(--color-bg-overlay));
+  }
+
+  .icon_QXnIWW {
+    flex-shrink: 0;
+    width: 16px;
+    height: 16px;
+    margin-top: 1px;
+  }
+
+  .icon-success_QXnIWW {
+    color: var(--color-success-solid);
+  }
+
+  .icon-warning_QXnIWW {
+    color: var(--color-warning-solid);
+  }
+
+  .icon-error_QXnIWW {
+    color: var(--color-error-solid);
+  }
+
+  .icon-info_QXnIWW {
+    color: var(--color-info-solid);
+  }
+
+  .content_QXnIWW {
+    gap: var(--space-0-5);
+    flex-direction: column;
+    flex: 1;
+    min-width: 0;
+    display: flex;
+  }
+
+  .title_QXnIWW {
+    font-family: var(--font-mono);
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-medium);
+    color: var(--color-text-primary);
+    line-height: var(--line-height-normal);
+  }
+
+  .description_QXnIWW {
+    font-family: var(--font-mono);
+    font-size: var(--font-size-xs);
+    color: var(--color-text-secondary);
+    line-height: var(--line-height-relaxed);
+  }
+
+  .close_QXnIWW {
+    border-radius: var(--radius-sm);
+    width: 20px;
+    height: 20px;
+    color: var(--color-text-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;
+    flex-shrink: 0;
+    justify-content: center;
+    align-items: center;
+    margin-top: 1px;
+    display: flex;
+  }
+
+  .close_QXnIWW:hover {
+    background-color: var(--color-surface-hover);
+    color: var(--color-text-primary);
+  }
+
+  .close_QXnIWW:focus-visible {
+    box-shadow: var(--shadow-focus);
+  }
+}
+
+@layer utilities;