@brijbyte/agentic-ui 0.0.1-beta → 0.0.1

package/src/switch/switch.tsx

@@ -0,0 +1,33 @@
+import { useId } from "react";
+import type { ReactNode } from "react";
+import { Switch as BaseSwitch } from "@base-ui/react/switch";
+import styles from "./switch.module.css";
+
+export interface SwitchProps {
+  checked?: boolean;
+  defaultChecked?: boolean;
+  disabled?: boolean;
+  required?: boolean;
+  name?: string;
+  value?: string;
+  /** Called when checked state changes. `eventDetails` is the base-ui event details object. */
+  onCheckedChange?: (checked: boolean, eventDetails: unknown) => void;
+  children?: ReactNode;
+  id?: string;
+  className?: string;
+}
+
+export function Switch({ children, id, className, onCheckedChange, ...props }: SwitchProps) {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const switchId = id ?? useId();
+
+  return (
+    <label className={`${styles.root} ${className ?? ""}`} htmlFor={switchId}>
+      <BaseSwitch.Root id={switchId} className={styles["thumb-track"]} onCheckedChange={onCheckedChange as never} {...props}>
+        <BaseSwitch.Thumb className={styles.thumb} />
+      </BaseSwitch.Root>
+      {children && <span className={styles.label}>{children}</span>}
+    </label>
+  );
+}
+export { styles as SwitchStyles };

package/src/tabs/index.ts

@@ -0,0 +1,6 @@
+export { Tabs } from "./tabs";
+export type { TabsProps, TabItem } from "./tabs";
+
+export { TabsList, TabsTab, TabsPanel } from "./parts";
+export type { TabsListProps, TabsTabProps, TabsPanelProps } from "./parts";
+export { TabsStyles } from "./tabs";

package/src/tabs/parts.tsx

@@ -0,0 +1,48 @@
+/**
+ * Styled primitives for Tabs.
+ *
+ * @example
+ * ```tsx
+ * import { Tabs } from '@base-ui/react/tabs';
+ * import { TabsList, TabsTab, TabsPanel } from '@brijbyte/agentic-ui/tabs';
+ *
+ * <Tabs.Root defaultValue="a">
+ *   <TabsList>
+ *     <TabsTab value="a">Tab A</TabsTab>
+ *     <TabsTab value="b">Tab B</TabsTab>
+ *   </TabsList>
+ *   <TabsPanel value="a">Content A</TabsPanel>
+ *   <TabsPanel value="b">Content B</TabsPanel>
+ * </Tabs.Root>
+ * ```
+ */
+import { forwardRef } from "react";
+import type { ComponentRef, ComponentPropsWithoutRef } from "react";
+import { Tabs as BaseTabs } from "@base-ui/react/tabs";
+import styles from "./tabs.module.css";
+
+type BaseListProps = ComponentPropsWithoutRef<typeof BaseTabs.List>;
+type BaseTabProps = ComponentPropsWithoutRef<typeof BaseTabs.Tab>;
+type BasePanelProps = ComponentPropsWithoutRef<typeof BaseTabs.Panel>;
+
+export interface TabsListProps extends Omit<BaseListProps, "className"> {
+  className?: string;
+}
+export interface TabsTabProps extends Omit<BaseTabProps, "className"> {
+  className?: string;
+}
+export interface TabsPanelProps extends Omit<BasePanelProps, "className"> {
+  className?: string;
+}
+
+export const TabsList = forwardRef<ComponentRef<typeof BaseTabs.List>, TabsListProps>(function TabsList({ className, ...props }, ref) {
+  return <BaseTabs.List ref={ref} className={`${styles.list} ${className ?? ""}`} {...props} />;
+});
+
+export const TabsTab = forwardRef<ComponentRef<typeof BaseTabs.Tab>, TabsTabProps>(function TabsTab({ className, ...props }, ref) {
+  return <BaseTabs.Tab ref={ref} className={`${styles.tab} ${className ?? ""}`} {...props} />;
+});
+
+export const TabsPanel = forwardRef<ComponentRef<typeof BaseTabs.Panel>, TabsPanelProps>(function TabsPanel({ className, ...props }, ref) {
+  return <BaseTabs.Panel ref={ref} className={`${styles.panel} ${className ?? ""}`} {...props} />;
+});

package/src/tabs/tabs.module.css

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

package/src/tabs/tabs.tsx

@@ -0,0 +1,48 @@
+import type { ReactNode } from "react";
+import { Tabs as BaseTabs } from "@base-ui/react/tabs";
+import styles from "./tabs.module.css";
+
+export interface TabItem {
+  value: string;
+  label: ReactNode;
+  content: ReactNode;
+  disabled?: boolean;
+  icon?: ReactNode;
+}
+
+export interface TabsProps {
+  items: TabItem[];
+  value?: string;
+  defaultValue?: string;
+  /** `eventDetails` is the base-ui event details object. */
+  onValueChange?: (value: unknown, eventDetails: unknown) => void;
+  className?: string;
+}
+
+export function Tabs({ items, className, ...props }: TabsProps) {
+  const defaultVal = props.defaultValue ?? items[0]?.value;
+
+  return (
+    <BaseTabs.Root
+      className={`${styles.root} ${className ?? ""}`}
+      defaultValue={defaultVal}
+      onValueChange={props.onValueChange as never}
+      value={props.value}
+    >
+      <BaseTabs.List className={styles.list}>
+        {items.map((item) => (
+          <BaseTabs.Tab key={item.value} value={item.value} disabled={item.disabled} className={styles.tab}>
+            {item.icon}
+            {item.label}
+          </BaseTabs.Tab>
+        ))}
+      </BaseTabs.List>
+      {items.map((item) => (
+        <BaseTabs.Panel key={item.value} value={item.value} className={styles.panel}>
+          {item.content}
+        </BaseTabs.Panel>
+      ))}
+    </BaseTabs.Root>
+  );
+}
+export { styles as TabsStyles };

package/src/toast/index.ts

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

package/src/toast/parts.tsx

@@ -0,0 +1,76 @@
+/**
+ * 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>
+ * ))
+ * ```
+ */
+import { forwardRef } from "react";
+import type { ComponentRef, ComponentPropsWithoutRef } from "react";
+import { Toast as BaseToast } from "@base-ui/react/toast";
+import styles from "./toast.module.css";
+
+type BaseRootProps = ComponentPropsWithoutRef<typeof BaseToast.Root>;
+type BaseTitleProps = ComponentPropsWithoutRef<typeof BaseToast.Title>;
+type BaseDescriptionProps = ComponentPropsWithoutRef<typeof BaseToast.Description>;
+type BaseCloseProps = ComponentPropsWithoutRef<typeof BaseToast.Close>;
+type BaseViewportProps = ComponentPropsWithoutRef<typeof BaseToast.Viewport>;
+
+export interface ToastRootProps extends Omit<BaseRootProps, "className"> {
+  className?: string;
+}
+export interface ToastTitleProps extends Omit<BaseTitleProps, "className"> {
+  className?: string;
+}
+export interface ToastDescriptionProps extends Omit<BaseDescriptionProps, "className"> {
+  className?: string;
+}
+export interface ToastCloseProps extends Omit<BaseCloseProps, "className"> {
+  className?: string;
+}
+export interface ToastViewportPartProps extends Omit<BaseViewportProps, "className"> {
+  className?: string;
+}
+
+export const ToastRoot = forwardRef<ComponentRef<typeof BaseToast.Root>, ToastRootProps>(function ToastRoot({ className, ...props }, ref) {
+  return <BaseToast.Root ref={ref} className={`${styles.toast} ${className ?? ""}`} {...props} />;
+});
+
+export const ToastTitle = forwardRef<ComponentRef<typeof BaseToast.Title>, ToastTitleProps>(function ToastTitle(
+  { className, ...props },
+  ref,
+) {
+  return <BaseToast.Title ref={ref} className={`${styles.title} ${className ?? ""}`} {...props} />;
+});
+
+export const ToastDescription = forwardRef<ComponentRef<typeof BaseToast.Description>, ToastDescriptionProps>(function ToastDescription(
+  { className, ...props },
+  ref,
+) {
+  return <BaseToast.Description ref={ref} className={`${styles.description} ${className ?? ""}`} {...props} />;
+});
+
+export const ToastClose = forwardRef<ComponentRef<typeof BaseToast.Close>, ToastCloseProps>(function ToastClose(
+  { className, ...props },
+  ref,
+) {
+  return <BaseToast.Close ref={ref} className={`${styles.close} ${className ?? ""}`} {...props} />;
+});
+
+export const ToastViewportPart = forwardRef<ComponentRef<typeof BaseToast.Viewport>, ToastViewportPartProps>(function ToastViewportPart(
+  { className, ...props },
+  ref,
+) {
+  return <BaseToast.Viewport ref={ref} className={`${styles.viewport} ${className ?? ""}`} {...props} />;
+});

package/src/toast/toast.module.css

@@ -0,0 +1,252 @@
+@layer theme, base, components, utilities;
+
+@layer components {
+  /* ─── Viewport ───────────────────────────────────────────────────── */
+
+  .viewport {
+    position: fixed;
+    bottom: var(--space-4);
+    right: var(--space-4);
+    z-index: var(--z-toast);
+    display: flex;
+    flex-direction: column;
+    width: 360px;
+    max-width: calc(100vw - var(--space-8));
+    list-style: none;
+    pointer-events: none;
+    outline: none;
+  }
+
+  /* List variant — toasts sit in a normal column */
+  .viewport-list {
+    gap: var(--space-2);
+  }
+
+  /* Stacked variant — toasts overlap; viewport height = frontmost toast */
+  .viewport-stacked {
+    gap: 0;
+  }
+
+  /* ─── Toast base ─────────────────────────────────────────────────── */
+
+  .toast {
+    display: flex;
+    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%;
+  }
+
+  @supports (backdrop-filter: blur(12px)) {
+    .toast {
+      backdrop-filter: blur(12px) saturate(1.5);
+      -webkit-backdrop-filter: blur(12px) saturate(1.5);
+    }
+  }
+
+  /* ─── List mode animations ───────────────────────────────────────── */
+
+  .viewport-list .toast {
+    transform-origin: bottom right;
+    opacity: 1;
+    transform: translateX(0);
+    transition:
+      opacity 300ms var(--easing-ease-out),
+      transform 300ms var(--easing-spring);
+
+    @starting-style {
+      opacity: 0;
+      transform: translateX(calc(100% + var(--space-4)));
+    }
+  }
+
+  .viewport-list .toast[data-ending-style] {
+    opacity: 0;
+    transform: translateX(calc(100% + var(--space-4)));
+    transition:
+      opacity 200ms var(--easing-ease-in),
+      transform 200ms var(--easing-ease-in);
+  }
+
+  /* ─── Stacked mode ───────────────────────────────────────────────── */
+
+  /*
+   * Base UI provides on each toast root (as inline styles):
+   *   --toast-index   : plain integer, 0 = frontmost/newest
+   *   --toast-offset-y: "Npx" — cumulative height of all toasts above
+   *   --toast-height  : "Npx" — this toast's measured height
+   *
+   * Base UI provides on the viewport:
+   *   --toast-frontmost-height: "Npx" — height of index-0 toast
+   *
+   * Collapsed: toasts sit at bottom:0, stacked via scale+translate.
+   * Expanded (data-expanded): each toast moves to its offset position.
+   */
+
+  .viewport-stacked {
+    height: calc(var(--toast-frontmost-height, 64px) + 20px);
+    padding-top: 20px;
+    box-sizing: content-box;
+    clip-path: inset(0 0 0 0 round var(--radius-xl));
+    transition:
+      clip-path 200ms var(--easing-ease-out),
+      height 200ms var(--easing-ease-out);
+  }
+
+  .viewport-stacked[data-expanded] {
+    clip-path: inset(-9999px 0 0 0 round var(--radius-xl));
+    height: calc(var(--toast-frontmost-height, 64px) + 20px);
+  }
+
+  /* Fill the gaps between expanded toasts so the mouse doesn't leave
+     the viewport as it moves between them, which would collapse the stack */
+  .viewport-stacked[data-expanded]::after {
+    content: "";
+    position: absolute;
+    inset: -9999px 0 0 0;
+    pointer-events: auto;
+    z-index: 0;
+  }
+
+  .toast-stacked {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+
+    z-index: calc(50 - var(--toast-index));
+
+    transform: translateY(calc(var(--toast-index) * -8px)) scale(calc(1 - var(--toast-index) * 0.04));
+    transform-origin: bottom center;
+    opacity: calc(1 - var(--toast-index) * 0.15);
+
+    transition:
+      transform 200ms var(--easing-ease-out),
+      opacity 200ms var(--easing-ease-out);
+  }
+
+  /* Expanded: each toast animates to its stacked position with a gap */
+  .viewport-stacked[data-expanded] .toast-stacked {
+    transform: translateY(calc((var(--toast-offset-y) + var(--toast-index) * 8px) * -1));
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  /* Enter: new toast slides up from below */
+  .viewport-stacked .toast-stacked {
+    @starting-style {
+      opacity: 0;
+      transform: translateY(16px) scale(calc(1 - var(--toast-index) * 0.04));
+    }
+  }
+
+  /* Exit: dismissed toast slides right */
+  .viewport-stacked .toast-stacked[data-ending-style] {
+    opacity: 0;
+    transform: translateX(calc(100% + var(--space-4)));
+    transition:
+      opacity 150ms var(--easing-ease-in),
+      transform 150ms var(--easing-ease-in);
+  }
+
+  /* ─── Variant tints ──────────────────────────────────────────────── */
+
+  .toast-success {
+    background-color: color-mix(in srgb, var(--color-success-solid) 6%, var(--color-bg-overlay));
+  }
+
+  .toast-error {
+    background-color: color-mix(in srgb, var(--color-error-solid) 6%, var(--color-bg-overlay));
+  }
+
+  .toast-warning {
+    background-color: color-mix(in srgb, var(--color-warning-solid) 6%, var(--color-bg-overlay));
+  }
+
+  .toast-info {
+    background-color: color-mix(in srgb, var(--color-info-solid) 6%, var(--color-bg-overlay));
+  }
+
+  /* ─── Icon ───────────────────────────────────────────────────────── */
+
+  .icon {
+    flex-shrink: 0;
+    width: 16px;
+    height: 16px;
+    margin-top: 1px;
+  }
+
+  .icon-success {
+    color: var(--color-success-solid);
+  }
+  .icon-warning {
+    color: var(--color-warning-solid);
+  }
+  .icon-error {
+    color: var(--color-error-solid);
+  }
+  .icon-info {
+    color: var(--color-info-solid);
+  }
+
+  /* ─── Content ────────────────────────────────────────────────────── */
+
+  .content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-0-5);
+    min-width: 0;
+  }
+
+  .title {
+    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 {
+    font-family: var(--font-mono);
+    font-size: var(--font-size-xs);
+    color: var(--color-text-secondary);
+    line-height: var(--line-height-relaxed);
+  }
+
+  /* ─── Close button ───────────────────────────────────────────────── */
+
+  .close {
+    flex-shrink: 0;
+    width: 20px;
+    height: 20px;
+    border-radius: var(--radius-sm);
+    border: none;
+    background: transparent;
+    color: var(--color-text-tertiary);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    outline: none;
+    transition:
+      background-color var(--duration-fast) var(--easing-standard),
+      color var(--duration-fast) var(--easing-standard);
+    margin-top: 1px;
+  }
+
+  .close:hover {
+    background-color: var(--color-surface-hover);
+    color: var(--color-text-primary);
+  }
+
+  .close:focus-visible {
+    box-shadow: var(--shadow-focus);
+  }
+}

package/src/toast/toast.tsx

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