@brijbyte/agentic-ui 0.0.1-beta → 0.0.1

package/src/collapsible/collapsible.module.css

@@ -0,0 +1,94 @@
+@layer theme, base, components, utilities;
+
+@layer components {
+  .root {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+  }
+
+  .trigger {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    padding: var(--space-2) var(--space-3);
+    font-family: var(--font-mono);
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-medium);
+    color: var(--color-text-primary);
+    background: var(--color-surface-1);
+    border: var(--border-width-base) solid var(--color-border-base);
+    border-radius: var(--radius-md);
+    cursor: pointer;
+    outline: none;
+    text-align: left;
+    user-select: none;
+    transition:
+      background-color var(--duration-fast) var(--easing-standard),
+      border-bottom-left-radius var(--duration-normal) var(--easing-standard) var(--duration-normal),
+      border-bottom-right-radius var(--duration-normal) var(--easing-standard) var(--duration-normal),
+      border-bottom-color var(--duration-normal) var(--easing-standard) var(--duration-normal);
+  }
+
+  .trigger[data-panel-open] {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    border-bottom-color: transparent;
+    transition:
+      background-color var(--duration-fast) var(--easing-standard),
+      border-bottom-left-radius var(--duration-normal) var(--easing-standard),
+      border-bottom-right-radius var(--duration-normal) var(--easing-standard),
+      border-bottom-color var(--duration-normal) var(--easing-standard);
+  }
+
+  .trigger:hover {
+    background-color: var(--color-surface-hover);
+  }
+
+  .trigger:focus-visible {
+    box-shadow: var(--shadow-focus);
+  }
+
+  .trigger[data-disabled] {
+    opacity: 0.44;
+    cursor: not-allowed;
+  }
+
+  .trigger-icon {
+    color: var(--color-text-tertiary);
+    flex-shrink: 0;
+    transition: transform var(--duration-normal) var(--easing-standard);
+  }
+
+  .trigger[data-panel-open] .trigger-icon {
+    transform: rotate(90deg);
+  }
+
+  .panel {
+    height: var(--collapsible-panel-height);
+    overflow: hidden;
+    transition: height var(--duration-normal) var(--easing-standard);
+  }
+
+  /* hide when not using hidden="until-found" */
+  .panel[hidden]:not([hidden="until-found"]) {
+    display: none;
+  }
+
+  .panel[data-starting-style],
+  .panel[data-ending-style] {
+    height: 0;
+  }
+
+  .panel-content {
+    padding: var(--space-3) var(--space-3) var(--space-3) var(--space-3);
+    font-family: var(--font-mono);
+    font-size: var(--font-size-sm);
+    color: var(--color-text-secondary);
+    line-height: var(--line-height-relaxed);
+    border: var(--border-width-base) solid var(--color-border-base);
+    border-top: none;
+    border-radius: 0 0 var(--radius-md) var(--radius-md);
+    background: var(--color-bg-elevated);
+  }
+}

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/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,123 @@
+@layer theme, base, components, utilities;
+
+@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-bg-elevated);
+    border: var(--border-width-base) solid var(--color-border-base);
+    border-radius: var(--radius-2xl);
+    box-shadow: var(--shadow-xl);
+    padding: var(--space-6);
+    width: min(480px, calc(100vw - var(--space-8)));
+    max-height: min(640px, calc(100vh - var(--space-8)));
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-4);
+    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-1);
+  }
+
+  .title {
+    font-family: var(--font-mono);
+    font-size: var(--font-size-lg);
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-text-primary);
+    line-height: var(--line-height-tight);
+    letter-spacing: var(--letter-spacing-tight);
+    padding-right: var(--space-6);
+  }
+
+  .description {
+    font-family: var(--font-mono);
+    font-size: var(--font-size-sm);
+    color: var(--color-text-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-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);
+  }
+
+  .close:hover {
+    background-color: var(--color-surface-hover);
+    color: var(--color-text-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-text-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);
+    border-top: var(--border-width-base) solid var(--color-border-subtle);
+  }
+}

package/src/dialog/dialog.tsx

@@ -0,0 +1,60 @@
+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;
+  footer?: 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,
+  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 && <div className={styles.footer}>{footer}</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";

package/src/dialog/parts.tsx

@@ -0,0 +1,96 @@
+/**
+ * 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>
+ * ```
+ */
+import { forwardRef } from "react";
+import type { ComponentRef, ComponentPropsWithoutRef } from "react";
+import { Dialog as BaseDialog } from "@base-ui/react/dialog";
+import styles from "./dialog.module.css";
+
+type BaseBackdropProps = ComponentPropsWithoutRef<typeof BaseDialog.Backdrop>;
+type BaseViewportProps = ComponentPropsWithoutRef<typeof BaseDialog.Viewport>;
+type BasePopupProps = ComponentPropsWithoutRef<typeof BaseDialog.Popup>;
+type BaseTitleProps = ComponentPropsWithoutRef<typeof BaseDialog.Title>;
+type BaseDescriptionProps = ComponentPropsWithoutRef<typeof BaseDialog.Description>;
+type BaseCloseProps = ComponentPropsWithoutRef<typeof BaseDialog.Close>;
+
+export interface DialogBackdropProps extends Omit<BaseBackdropProps, "className"> {
+  className?: string;
+}
+export interface DialogViewportProps extends Omit<BaseViewportProps, "className"> {
+  className?: string;
+}
+export interface DialogPopupProps extends Omit<BasePopupProps, "className"> {
+  className?: string;
+}
+export interface DialogTitleProps extends Omit<BaseTitleProps, "className"> {
+  className?: string;
+}
+export interface DialogDescriptionProps extends Omit<BaseDescriptionProps, "className"> {
+  className?: string;
+}
+export interface DialogCloseProps extends Omit<BaseCloseProps, "className"> {
+  className?: string;
+}
+
+export const DialogBackdrop = forwardRef<ComponentRef<typeof BaseDialog.Backdrop>, DialogBackdropProps>(function DialogBackdrop(
+  { className, ...props },
+  ref,
+) {
+  return <BaseDialog.Backdrop ref={ref} className={`${styles.backdrop} ${className ?? ""}`} {...props} />;
+});
+
+export const DialogViewport = forwardRef<ComponentRef<typeof BaseDialog.Viewport>, DialogViewportProps>(function DialogViewport(
+  { className, ...props },
+  ref,
+) {
+  return <BaseDialog.Viewport ref={ref} className={`${styles.viewport ?? ""} ${className ?? ""}`} {...props} />;
+});
+
+export const DialogPopup = forwardRef<ComponentRef<typeof BaseDialog.Popup>, DialogPopupProps>(function DialogPopup(
+  { className, ...props },
+  ref,
+) {
+  return <BaseDialog.Popup ref={ref} className={`${styles.popup} ${className ?? ""}`} {...props} />;
+});
+
+export const DialogTitle = forwardRef<ComponentRef<typeof BaseDialog.Title>, DialogTitleProps>(function DialogTitle(
+  { className, ...props },
+  ref,
+) {
+  return <BaseDialog.Title ref={ref} className={`${styles.title} ${className ?? ""}`} {...props} />;
+});
+
+export const DialogDescription = forwardRef<ComponentRef<typeof BaseDialog.Description>, DialogDescriptionProps>(function DialogDescription(
+  { className, ...props },
+  ref,
+) {
+  return <BaseDialog.Description ref={ref} className={`${styles.description} ${className ?? ""}`} {...props} />;
+});
+
+export const DialogClose = forwardRef<ComponentRef<typeof BaseDialog.Close>, DialogCloseProps>(function DialogClose(
+  { className, ...props },
+  ref,
+) {
+  return <BaseDialog.Close ref={ref} className={`${styles.close} ${className ?? ""}`} {...props} />;
+});