@brijbyte/agentic-ui 0.0.1-beta → 0.0.2

package/src/collapsible/collapsible.tsx

@@ -0,0 +1,38 @@
+import type { ReactNode } from "react";
+import { Collapsible as BaseCollapsible } from "@base-ui/react/collapsible";
+import styles from "./collapsible.module.css";
+
+export interface CollapsibleProps {
+  trigger: ReactNode;
+  children: ReactNode;
+  defaultOpen?: boolean;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  disabled?: boolean;
+  className?: string;
+}
+
+function ChevronIcon() {
+  return (
+    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" aria-hidden>
+      <path d="M3.5 9L7.5 5L3.5 1" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
+export function Collapsible({ trigger, children, className, onOpenChange, ...props }: CollapsibleProps) {
+  return (
+    <BaseCollapsible.Root className={`${styles.root} ${className ?? ""}`} onOpenChange={onOpenChange as never} {...props}>
+      <BaseCollapsible.Trigger className={styles.trigger}>
+        <span className={styles["trigger-icon"]}>
+          <ChevronIcon />
+        </span>
+        {trigger}
+      </BaseCollapsible.Trigger>
+      <BaseCollapsible.Panel className={styles.panel}>
+        <div className={styles["panel-content"]}>{children}</div>
+      </BaseCollapsible.Panel>
+    </BaseCollapsible.Root>
+  );
+}
+export { styles as CollapsibleStyles };

package/src/collapsible/index.ts

@@ -0,0 +1,6 @@
+export { Collapsible } from "./collapsible";
+export type { CollapsibleProps } from "./collapsible";
+
+export { CollapsibleRoot, CollapsibleTrigger, CollapsiblePanel } from "./parts";
+export type { CollapsibleRootProps, CollapsibleTriggerProps, CollapsiblePanelProps } from "./parts";
+export { CollapsibleStyles } from "./collapsible";

package/src/collapsible/parts.tsx

@@ -0,0 +1,52 @@
+/**
+ * Styled primitives for Collapsible.
+ *
+ * @example
+ * ```tsx
+ * import { Collapsible } from '@base-ui/react/collapsible';
+ * import { CollapsibleTrigger, CollapsiblePanel } from '@brijbyte/agentic-ui/collapsible';
+ *
+ * <Collapsible.Root>
+ *   <CollapsibleTrigger>Toggle</CollapsibleTrigger>
+ *   <CollapsiblePanel>Content</CollapsiblePanel>
+ * </Collapsible.Root>
+ * ```
+ */
+import { forwardRef } from "react";
+import type { ComponentRef, ComponentPropsWithoutRef } from "react";
+import { Collapsible as BaseCollapsible } from "@base-ui/react/collapsible";
+import styles from "./collapsible.module.css";
+
+type BaseRootProps = ComponentPropsWithoutRef<typeof BaseCollapsible.Root>;
+type BaseTriggerProps = ComponentPropsWithoutRef<typeof BaseCollapsible.Trigger>;
+type BasePanelProps = ComponentPropsWithoutRef<typeof BaseCollapsible.Panel>;
+
+export interface CollapsibleRootProps extends Omit<BaseRootProps, "className"> {
+  className?: string;
+}
+export interface CollapsibleTriggerProps extends Omit<BaseTriggerProps, "className"> {
+  className?: string;
+}
+export interface CollapsiblePanelProps extends Omit<BasePanelProps, "className"> {
+  className?: string;
+}
+
+export const CollapsibleRoot = forwardRef<ComponentRef<typeof BaseCollapsible.Root>, CollapsibleRootProps>(function CollapsibleRoot(
+  { className, ...props },
+  ref,
+) {
+  return <BaseCollapsible.Root ref={ref} className={`${styles.root} ${className ?? ""}`} {...props} />;
+});
+
+export const CollapsibleTrigger = forwardRef<ComponentRef<typeof BaseCollapsible.Trigger>, CollapsibleTriggerProps>(
+  function CollapsibleTrigger({ className, ...props }, ref) {
+    return <BaseCollapsible.Trigger ref={ref} className={`${styles.trigger} ${className ?? ""}`} {...props} />;
+  },
+);
+
+export const CollapsiblePanel = forwardRef<ComponentRef<typeof BaseCollapsible.Panel>, CollapsiblePanelProps>(function CollapsiblePanel(
+  { className, ...props },
+  ref,
+) {
+  return <BaseCollapsible.Panel ref={ref} className={`${styles.panel} ${className ?? ""}`} {...props} />;
+});

package/src/context-menu/context-menu.module.css

@@ -0,0 +1,168 @@
+@layer components {
+  .positioner {
+    outline: none;
+    z-index: var(--z-dropdown);
+  }
+
+  .popup {
+    box-sizing: border-box;
+    padding: var(--space-1) 0;
+    border-radius: var(--radius-lg);
+    background-color: var(--color-overlay);
+    border: var(--border-width-base) solid var(--color-line);
+    box-shadow: var(--shadow-popover);
+    color: var(--color-primary);
+    font-family: var(--font-sans);
+    font-size: var(--font-size-md);
+    min-width: 220px;
+    transform-origin: var(--transform-origin);
+    outline: none;
+    transition:
+      opacity 150ms var(--easing-ease-out),
+      transform 150ms var(--easing-ease-out);
+  }
+
+  @supports (backdrop-filter: blur(20px)) {
+    .popup {
+      backdrop-filter: blur(20px) saturate(1.8);
+      -webkit-backdrop-filter: blur(20px) saturate(1.8);
+    }
+  }
+
+  .popup[data-starting-style] {
+    opacity: 0;
+    transform: scale(0.97);
+  }
+
+  .popup[data-ending-style] {
+    opacity: 0;
+    transform: scale(0.99);
+    transition:
+      opacity 75ms var(--easing-ease-in),
+      transform 75ms var(--easing-ease-in);
+  }
+
+  /* ─── Trigger area ───────────────────────────────────────────── */
+
+  .trigger {
+    display: block;
+    outline: none;
+    user-select: none;
+    -webkit-user-select: none;
+    cursor: default;
+  }
+
+  /* ─── Item ───────────────────────────────────────────────────── */
+
+  .item {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    /* Full-width — no inset margin */
+    padding: var(--space-1) var(--space-4);
+    font-family: var(--font-sans);
+    font-size: var(--font-size-md);
+    color: var(--color-primary);
+    cursor: default;
+    outline: none;
+    user-select: none;
+    position: relative;
+    transition: none;
+  }
+
+  .item[data-highlighted] {
+    background-color: var(--color-accent);
+    color: var(--color-on-accent);
+  }
+
+  .item[data-disabled] {
+    opacity: 0.36;
+    cursor: not-allowed;
+  }
+
+  /* ─── Item internals ─────────────────────────────────────────── */
+
+  .item-icon {
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: inherit;
+  }
+
+  .item-label {
+    flex: 1;
+  }
+
+  .item-shortcut {
+    margin-left: var(--space-8);
+    font-size: var(--font-size-sm);
+    color: var(--color-tertiary);
+    flex-shrink: 0;
+  }
+
+  .item[data-highlighted] .item-shortcut {
+    color: color-mix(in srgb, var(--color-on-accent) 60%, transparent);
+  }
+
+  .submenu-icon {
+    margin-left: auto;
+    color: var(--color-tertiary);
+    flex-shrink: 0;
+  }
+
+  .item[data-highlighted] .submenu-icon,
+  .submenu-trigger[data-highlighted] .submenu-icon {
+    color: color-mix(in srgb, var(--color-on-accent) 70%, transparent);
+  }
+
+  /* ─── Submenu trigger ────────────────────────────────────────── */
+
+  .submenu-trigger {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    padding: var(--space-1) var(--space-4);
+    font-family: var(--font-sans);
+    font-size: var(--font-size-md);
+    color: var(--color-primary);
+    cursor: default;
+    outline: none;
+    user-select: none;
+    transition: none;
+  }
+
+  .submenu-trigger[data-highlighted],
+  .submenu-trigger[data-popup-open] {
+    background-color: var(--color-accent);
+    color: var(--color-on-accent);
+  }
+
+  .submenu-trigger[data-disabled] {
+    opacity: 0.36;
+    cursor: not-allowed;
+  }
+
+  /* ─── Group label ────────────────────────────────────────────── */
+
+  .group-label {
+    padding: var(--space-1) var(--space-4) var(--space-0-5);
+    font-family: var(--font-sans);
+    font-size: var(--font-size-xs);
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-tertiary);
+    text-transform: uppercase;
+    letter-spacing: var(--letter-spacing-wide);
+    cursor: default;
+    user-select: none;
+  }
+
+  /* ─── Separator ──────────────────────────────────────────────── */
+  .separator {
+    margin: var(--space-1) var(--space-4);
+    height: var(--border-width-base);
+    background-color: var(--color-line-subtle);
+  }
+}

package/src/context-menu/context-menu.tsx

@@ -0,0 +1,75 @@
+import type { ReactNode, ReactElement } from "react";
+import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
+import styles from "./context-menu.module.css";
+
+export interface ContextMenuItemDef {
+  type?: "item";
+  label: ReactNode;
+  icon?: ReactNode;
+  shortcut?: string;
+  onSelect?: () => void;
+  disabled?: boolean;
+}
+
+export interface ContextMenuSeparatorDef {
+  type: "separator";
+}
+
+export interface ContextMenuGroupDef {
+  type: "group";
+  label?: ReactNode;
+  items: ContextMenuItemDef[];
+}
+
+export type ContextMenuEntry = ContextMenuItemDef | ContextMenuSeparatorDef | ContextMenuGroupDef;
+
+export interface ContextMenuProps {
+  /** The element that can be right-clicked / long-pressed to open the menu. */
+  children: ReactElement;
+  items: ContextMenuEntry[];
+  className?: string;
+}
+
+function RenderItem({ item, i }: { item: ContextMenuItemDef; i: number }) {
+  return (
+    <BaseContextMenu.Item key={i} className={styles.item} disabled={item.disabled} onClick={item.onSelect}>
+      {item.icon && <span className={styles["item-icon"]}>{item.icon}</span>}
+      <span className={styles["item-label"]}>{item.label}</span>
+      {item.shortcut && <span className={styles["item-shortcut"]}>{item.shortcut}</span>}
+    </BaseContextMenu.Item>
+  );
+}
+
+export function ContextMenu({ children, items, className }: ContextMenuProps) {
+  return (
+    <BaseContextMenu.Root>
+      <BaseContextMenu.Trigger className={`${styles.trigger} ${className ?? ""}`} render={children} />
+      <BaseContextMenu.Portal>
+        <BaseContextMenu.Positioner className={styles.positioner}>
+          <BaseContextMenu.Popup className={styles.popup}>
+            {items.map((entry, i) => {
+              if (entry.type === "separator") {
+                return <BaseContextMenu.Separator key={i} className={styles.separator} />;
+              }
+              if (entry.type === "group") {
+                return (
+                  <BaseContextMenu.Group key={i}>
+                    {entry.label && (
+                      <BaseContextMenu.GroupLabel className={styles["group-label"]}>{entry.label}</BaseContextMenu.GroupLabel>
+                    )}
+                    {entry.items.map((item, j) => (
+                      <RenderItem key={j} item={item} i={j} />
+                    ))}
+                  </BaseContextMenu.Group>
+                );
+              }
+              return <RenderItem key={i} item={entry} i={i} />;
+            })}
+          </BaseContextMenu.Popup>
+        </BaseContextMenu.Positioner>
+      </BaseContextMenu.Portal>
+    </BaseContextMenu.Root>
+  );
+}
+
+export { styles as ContextMenuStyles };

package/src/context-menu/index.ts

@@ -0,0 +1,21 @@
+export { ContextMenu } from "./context-menu";
+export type { ContextMenuProps, ContextMenuEntry, ContextMenuItemDef, ContextMenuSeparatorDef, ContextMenuGroupDef } from "./context-menu";
+
+export {
+  ContextMenuPopup,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuGroup,
+  ContextMenuGroupLabel,
+  ContextMenuSubmenuTrigger,
+} from "./parts";
+export type {
+  ContextMenuPopupProps,
+  ContextMenuItemProps,
+  ContextMenuSeparatorProps,
+  ContextMenuGroupProps,
+  ContextMenuGroupLabelProps,
+  ContextMenuSubmenuTriggerProps,
+} from "./parts";
+
+export { ContextMenuStyles } from "./context-menu";

package/src/context-menu/parts.tsx

@@ -0,0 +1,99 @@
+/**
+ * Styled primitives for ContextMenu.
+ *
+ * @example
+ * ```tsx
+ * import { ContextMenu as BaseContextMenu } from '@base-ui/react/context-menu';
+ * import { ContextMenuPopup, ContextMenuItem, ContextMenuSeparator } from '@brijbyte/agentic-ui/context-menu';
+ *
+ * <BaseContextMenu.Root>
+ *   <BaseContextMenu.Trigger render={<div>Right click me</div>} />
+ *   <BaseContextMenu.Portal>
+ *     <BaseContextMenu.Positioner>
+ *       <ContextMenuPopup>
+ *         <ContextMenuItem>Cut</ContextMenuItem>
+ *         <ContextMenuItem>Copy</ContextMenuItem>
+ *         <ContextMenuSeparator />
+ *         <ContextMenuItem>Paste</ContextMenuItem>
+ *       </ContextMenuPopup>
+ *     </BaseContextMenu.Positioner>
+ *   </BaseContextMenu.Portal>
+ * </BaseContextMenu.Root>
+ * ```
+ */
+import { forwardRef } from "react";
+import type { ComponentRef, ComponentPropsWithoutRef } from "react";
+import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
+import styles from "./context-menu.module.css";
+
+type BasePopupProps = ComponentPropsWithoutRef<typeof BaseContextMenu.Popup>;
+type BaseItemProps = ComponentPropsWithoutRef<typeof BaseContextMenu.Item>;
+type BaseSeparatorProps = ComponentPropsWithoutRef<typeof BaseContextMenu.Separator>;
+type BaseGroupProps = ComponentPropsWithoutRef<typeof BaseContextMenu.Group>;
+type BaseGroupLabelProps = ComponentPropsWithoutRef<typeof BaseContextMenu.GroupLabel>;
+type BaseSubmenuTriggerProps = ComponentPropsWithoutRef<typeof BaseContextMenu.SubmenuTrigger>;
+
+export interface ContextMenuPopupProps extends Omit<BasePopupProps, "className"> {
+  className?: string;
+}
+export interface ContextMenuItemProps extends Omit<BaseItemProps, "className"> {
+  className?: string;
+}
+export interface ContextMenuSeparatorProps extends Omit<BaseSeparatorProps, "className"> {
+  className?: string;
+}
+export interface ContextMenuGroupProps extends Omit<BaseGroupProps, "className"> {
+  className?: string;
+}
+export interface ContextMenuGroupLabelProps extends Omit<BaseGroupLabelProps, "className"> {
+  className?: string;
+}
+export interface ContextMenuSubmenuTriggerProps extends Omit<BaseSubmenuTriggerProps, "className"> {
+  className?: string;
+}
+
+export const ContextMenuPopup = forwardRef<ComponentRef<typeof BaseContextMenu.Popup>, ContextMenuPopupProps>(function ContextMenuPopup(
+  { className, ...props },
+  ref,
+) {
+  return <BaseContextMenu.Popup ref={ref} className={`${styles.popup} ${className ?? ""}`} {...props} />;
+});
+
+export const ContextMenuItem = forwardRef<ComponentRef<typeof BaseContextMenu.Item>, ContextMenuItemProps>(function ContextMenuItem(
+  { className, ...props },
+  ref,
+) {
+  return <BaseContextMenu.Item ref={ref} className={`${styles.item} ${className ?? ""}`} {...props} />;
+});
+
+export const ContextMenuSeparator = forwardRef<ComponentRef<typeof BaseContextMenu.Separator>, ContextMenuSeparatorProps>(
+  function ContextMenuSeparator({ className, ...props }, ref) {
+    return <BaseContextMenu.Separator ref={ref} className={`${styles.separator} ${className ?? ""}`} {...props} />;
+  },
+);
+
+export const ContextMenuGroup = forwardRef<ComponentRef<typeof BaseContextMenu.Group>, ContextMenuGroupProps>(function ContextMenuGroup(
+  { className, ...props },
+  ref,
+) {
+  return <BaseContextMenu.Group ref={ref} className={className} {...props} />;
+});
+
+export const ContextMenuGroupLabel = forwardRef<ComponentRef<typeof BaseContextMenu.GroupLabel>, ContextMenuGroupLabelProps>(
+  function ContextMenuGroupLabel({ className, ...props }, ref) {
+    return <BaseContextMenu.GroupLabel ref={ref} className={`${styles["group-label"]} ${className ?? ""}`} {...props} />;
+  },
+);
+
+export const ContextMenuSubmenuTrigger = forwardRef<ComponentRef<typeof BaseContextMenu.SubmenuTrigger>, ContextMenuSubmenuTriggerProps>(
+  function ContextMenuSubmenuTrigger({ className, children, ...props }, ref) {
+    return (
+      <BaseContextMenu.SubmenuTrigger ref={ref} className={`${styles["submenu-trigger"]} ${className ?? ""}`} {...props}>
+        <span style={{ flex: 1 }}>{children}</span>
+        <svg width="10" height="10" viewBox="0 0 10 10" fill="none" className={styles["submenu-icon"]}>
+          <path d="M3.5 9L7.5 5L3.5 1" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+        </svg>
+      </BaseContextMenu.SubmenuTrigger>
+    );
+  },
+);

package/src/css.d.ts

@@ -0,0 +1,8 @@
+declare module "*.module.css" {
+  const styles: Record<string, string | undefined>;
+  export default styles;
+}
+
+declare module "*.css" {
+  // side-effect import
+}

package/src/dialog/dialog.module.css

@@ -0,0 +1,116 @@
+@layer components {
+  .backdrop {
+    position: fixed;
+    inset: 0;
+    background-color: rgba(0, 0, 0, 0.48);
+    z-index: var(--z-overlay);
+    transition: opacity var(--duration-slow) var(--easing-standard);
+  }
+  .backdrop[data-starting-style],
+  .backdrop[data-ending-style] {
+    opacity: 0;
+  }
+  .popup {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: var(--z-modal);
+    background-color: var(--color-elevated);
+    border: var(--border-width-base) solid var(--color-line);
+    border-radius: var(--radius-2xl);
+    box-shadow: var(--shadow-xl);
+    padding: var(--space-5) var(--space-6) var(--space-5);
+    width: min(440px, calc(100vw - var(--space-8)));
+    max-height: min(640px, calc(100vh - var(--space-8)));
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+    outline: none;
+    overflow: hidden;
+    transition:
+      opacity 200ms var(--easing-ease-out),
+      transform 200ms var(--easing-spring);
+  }
+  .popup[data-starting-style] {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.96);
+  }
+  .popup[data-ending-style] {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.98);
+    transition:
+      opacity 150ms var(--easing-ease-in),
+      transform 150ms var(--easing-ease-in);
+  }
+  .header {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+    text-align: center;
+  }
+  .title {
+    font-family: var(--font-sans);
+    font-size: var(--font-size-lg);
+    font-weight: var(--font-weight-bold);
+    color: var(--color-primary);
+    line-height: var(--line-height-tight);
+    letter-spacing: var(--letter-spacing-tight);
+  }
+  .description {
+    font-family: var(--font-sans);
+    font-size: var(--font-size-md);
+    color: var(--color-secondary);
+    line-height: var(--line-height-relaxed);
+  }
+  .close {
+    position: absolute;
+    top: var(--space-4);
+    right: var(--space-4);
+    width: 24px;
+    height: 24px;
+    border-radius: var(--radius-sm);
+    border: none;
+    background: transparent;
+    color: var(--color-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);
+  }
+  .close:hover {
+    background-color: var(--color-hover);
+    color: var(--color-primary);
+  }
+  .close:focus-visible {
+    box-shadow: var(--shadow-focus);
+  }
+  .body {
+    flex: 1;
+    overflow-y: auto;
+    font-family: var(--font-mono);
+    font-size: var(--font-size-sm);
+    color: var(--color-secondary);
+    line-height: var(--line-height-relaxed);
+  }
+  .footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--space-2);
+    padding-top: var(--space-2);
+  }
+  /* When a footerStart slot is present, space-between pushes it left */
+  .footer-split {
+    justify-content: space-between;
+  }
+  .footer-end {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+  }
+}

package/src/dialog/dialog.tsx

@@ -0,0 +1,73 @@
+import type { ReactNode, ReactElement } from "react";
+import { Dialog as BaseDialog } from "@base-ui/react/dialog";
+import styles from "./dialog.module.css";
+
+export 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;
+}
+
+function XIcon() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
+      <path d="M2 2L10 10M10 2L2 10" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+    </svg>
+  );
+}
+
+export function Dialog({
+  trigger,
+  title,
+  description,
+  children,
+  footer,
+  footerStart,
+  className,
+  dismissible = true,
+  onOpenChange,
+  ...props
+}: DialogProps) {
+  return (
+    <BaseDialog.Root onOpenChange={onOpenChange as never} {...props}>
+      {trigger && <BaseDialog.Trigger render={trigger} />}
+      <BaseDialog.Portal>
+        <BaseDialog.Backdrop className={styles.backdrop} />
+        <BaseDialog.Viewport>
+          <BaseDialog.Popup className={`${styles.popup} ${className ?? ""}`}>
+            {title && <BaseDialog.Title className={styles.title}>{title}</BaseDialog.Title>}
+            {description && <BaseDialog.Description className={styles.description}>{description}</BaseDialog.Description>}
+            {dismissible && (
+              <BaseDialog.Close className={styles.close} aria-label="Close dialog">
+                <XIcon />
+              </BaseDialog.Close>
+            )}
+            {children && <div className={styles.body}>{children}</div>}
+            {(footer || footerStart) && (
+              <div className={`${styles.footer} ${footerStart ? styles["footer-split"] : ""}`}>
+                {footerStart && <div>{footerStart}</div>}
+                {footer && <div className={styles["footer-end"]}>{footer}</div>}
+              </div>
+            )}
+          </BaseDialog.Popup>
+        </BaseDialog.Viewport>
+      </BaseDialog.Portal>
+    </BaseDialog.Root>
+  );
+}
+export { styles as DialogStyles };

package/src/dialog/index.ts

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