@brijbyte/agentic-ui 0.0.1-beta → 0.0.1

package/src/drawer/drawer.module.css

@@ -0,0 +1,289 @@
+@layer theme, base, components, utilities;
+
+@layer components {
+  /* ── Backdrop ──────────────────────────────────────────────────── */
+
+  .backdrop {
+    --backdrop-opacity: 0.48;
+    position: fixed;
+    inset: 0;
+    min-height: 100dvh;
+    background-color: black;
+    opacity: calc(var(--backdrop-opacity) * (1 - var(--drawer-swipe-progress)));
+    z-index: var(--z-overlay);
+
+    transition-property: opacity;
+    transition-duration: 450ms;
+    transition-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
+
+    /* iOS 26+: cover the full visual viewport even when scrolled */
+    @supports (-webkit-touch-callout: none) {
+      position: absolute;
+    }
+  }
+
+  .backdrop[data-starting-style],
+  .backdrop[data-ending-style] {
+    opacity: 0;
+  }
+
+  .backdrop[data-swiping] {
+    transition-duration: 0ms;
+  }
+
+  .backdrop[data-ending-style] {
+    transition-duration: calc(var(--drawer-swipe-strength) * 400ms);
+  }
+
+  /* ── Viewport ──────────────────────────────────────────────────── */
+
+  .viewport {
+    position: fixed;
+    inset: 0;
+    z-index: var(--z-modal);
+    display: flex;
+  }
+
+  /* side drawers sit against their respective edge */
+  .viewport[data-side="left"] {
+    justify-content: flex-start;
+    align-items: stretch;
+  }
+  .viewport[data-side="right"] {
+    justify-content: flex-end;
+    align-items: stretch;
+  }
+  .viewport[data-side="bottom"] {
+    align-items: flex-end;
+    justify-content: center;
+  }
+  .viewport[data-side="top"] {
+    align-items: flex-start;
+    justify-content: center;
+  }
+
+  /* iOS rounded inset padding */
+  @supports (-webkit-touch-callout: none) {
+    .viewport[data-side="left"],
+    .viewport[data-side="right"] {
+      padding: 0.625rem;
+    }
+
+    .viewport[data-side="bottom"] {
+      padding: 0 0.625rem 0.625rem;
+    }
+
+    .viewport[data-side="top"] {
+      padding: 0.625rem 0.625rem 0;
+    }
+  }
+
+  /* ── Popup — shared ────────────────────────────────────────────── */
+
+  .popup {
+    box-sizing: border-box;
+    background-color: var(--color-bg-elevated);
+    border: var(--border-width-base) solid var(--color-border-base);
+    outline: none;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    touch-action: auto;
+    will-change: transform;
+    transition-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
+    transition-duration: 450ms;
+  }
+
+  .popup[data-swiping] {
+    user-select: none;
+    transition-duration: 0ms;
+  }
+
+  .popup[data-ending-style] {
+    transition-duration: calc(var(--drawer-swipe-strength) * 400ms);
+  }
+
+  /* ── Popup — right side (default) ─────────────────────────────── */
+
+  .popup-right {
+    --bleed: 3rem;
+    height: 100%;
+    width: calc(var(--drawer-width, 20rem) + var(--bleed));
+    max-width: calc(100vw - 3rem + var(--bleed));
+    padding: var(--space-6);
+    padding-right: calc(var(--space-6) + var(--bleed));
+    margin-right: calc(-1 * var(--bleed));
+    transform: translateX(var(--drawer-swipe-movement-x));
+    transition-property: transform;
+
+    @supports (-webkit-touch-callout: none) {
+      --bleed: 0px;
+      margin-right: 0;
+      border-radius: var(--radius-xl);
+    }
+  }
+
+  .popup-right[data-starting-style],
+  .popup-right[data-ending-style] {
+    transform: translateX(calc(100% - var(--bleed) + 2px));
+  }
+
+  /* ── Popup — left side ─────────────────────────────────────────── */
+
+  .popup-left {
+    --bleed: 3rem;
+    height: 100%;
+    width: calc(var(--drawer-width, 20rem) + var(--bleed));
+    max-width: calc(100vw - 3rem + var(--bleed));
+    padding: var(--space-6);
+    padding-left: calc(var(--space-6) + var(--bleed));
+    margin-left: calc(-1 * var(--bleed));
+    transform: translateX(var(--drawer-swipe-movement-x));
+    transition-property: transform;
+
+    @supports (-webkit-touch-callout: none) {
+      --bleed: 0px;
+      margin-left: 0;
+      border-radius: var(--radius-xl);
+    }
+  }
+
+  .popup-left[data-starting-style],
+  .popup-left[data-ending-style] {
+    transform: translateX(calc(-100% + var(--bleed) - 2px));
+  }
+
+  /* ── Popup — bottom ────────────────────────────────────────────── */
+
+  .popup-bottom {
+    width: 100%;
+    max-width: var(--drawer-max-width, 480px);
+    max-height: 90dvh;
+    padding: var(--space-5) var(--space-5) calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
+    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
+    border-bottom: none;
+    transform: translateY(var(--drawer-swipe-movement-y));
+    transition-property: transform;
+
+    @supports (-webkit-touch-callout: none) {
+      border-radius: var(--radius-2xl);
+    }
+  }
+
+  .popup-bottom[data-starting-style],
+  .popup-bottom[data-ending-style] {
+    transform: translateY(calc(100% + 2px));
+  }
+
+  /* ── Popup — top ───────────────────────────────────────────────── */
+
+  .popup-top {
+    width: 100%;
+    max-width: var(--drawer-max-width, 480px);
+    max-height: 90dvh;
+    padding: calc(var(--space-5) + env(safe-area-inset-top, 0px)) var(--space-5) var(--space-5);
+    border-radius: 0 0 var(--radius-2xl) var(--radius-2xl);
+    border-top: none;
+    transform: translateY(var(--drawer-swipe-movement-y));
+    transition-property: transform;
+
+    @supports (-webkit-touch-callout: none) {
+      border-radius: var(--radius-2xl);
+    }
+  }
+
+  .popup-top[data-starting-style],
+  .popup-top[data-ending-style] {
+    transform: translateY(calc(-100% - 2px));
+  }
+
+  /* ── Handle bar (bottom/top drawers) ───────────────────────────── */
+
+  .handle-bar {
+    width: 2.5rem;
+    height: 4px;
+    border-radius: 9999px;
+    background-color: var(--color-border-strong);
+    margin: 0 auto var(--space-4);
+    flex-shrink: 0;
+  }
+
+  .popup-top .handle-bar {
+    margin: var(--space-4) auto 0;
+    order: 1; /* push to bottom in top drawer */
+  }
+
+  /* ── Content ───────────────────────────────────────────────────── */
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-4);
+    height: 100%;
+  }
+
+  /* ── Title ─────────────────────────────────────────────────────── */
+
+  .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);
+    margin: 0;
+    padding-right: var(--space-6);
+  }
+
+  /* ── Description ───────────────────────────────────────────────── */
+
+  .description {
+    font-family: var(--font-mono);
+    font-size: var(--font-size-sm);
+    color: var(--color-text-secondary);
+    line-height: var(--line-height-relaxed);
+    margin: 0;
+  }
+
+  /* ── Close button ──────────────────────────────────────────────── */
+
+  .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);
+  }
+
+  /* ── Footer ────────────────────────────────────────────────────── */
+
+  .footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--space-2);
+    padding-top: var(--space-4);
+    margin-top: auto;
+    border-top: var(--border-width-base) solid var(--color-border-subtle);
+  }
+}

package/src/drawer/drawer.tsx

@@ -0,0 +1,96 @@
+import type { ReactNode, ReactElement } from "react";
+import { Drawer as BaseDrawer } from "@base-ui/react/drawer";
+import styles from "./drawer.module.css";
+
+export type DrawerSide = "left" | "right" | "bottom" | "top";
+
+export interface DrawerProps {
+  /** Element that triggers the drawer — rendered as a `Drawer.Trigger`. */
+  trigger?: ReactElement;
+  /** Which edge the drawer slides in from. @default "right" */
+  side?: DrawerSide;
+  title?: ReactNode;
+  description?: ReactNode;
+  children?: ReactNode;
+  footer?: ReactNode;
+  /** Show a drag handle bar (useful for bottom/top drawers). @default true for bottom/top */
+  handleBar?: boolean;
+  /** Show a close button in the top-right corner. @default true */
+  dismissible?: boolean;
+
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}
+
+function XIcon() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden>
+      <path d="M2 2L10 10M10 2L2 10" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+    </svg>
+  );
+}
+
+/** Map side → swipe direction for dismiss gesture */
+const SWIPE_DIR: Record<DrawerSide, "left" | "right" | "up" | "down"> = {
+  right: "right",
+  left: "left",
+  bottom: "down",
+  top: "up",
+};
+
+/** Popup CSS classes by side */
+const POPUP_CLASS: Record<DrawerSide, string> = {
+  right: styles["popup-right"] as string,
+  left: styles["popup-left"] as string,
+  bottom: styles["popup-bottom"] as string,
+  top: styles["popup-top"] as string,
+};
+
+export function Drawer({
+  trigger,
+  side = "right",
+  title,
+  description,
+  children,
+  footer,
+  handleBar,
+  dismissible = true,
+  onOpenChange,
+  ...props
+}: DrawerProps) {
+  const showHandle = handleBar ?? (side === "bottom" || side === "top");
+  const popupClass = `${styles.popup} ${POPUP_CLASS[side]}`;
+
+  return (
+    <BaseDrawer.Root swipeDirection={SWIPE_DIR[side]} onOpenChange={onOpenChange as never} {...props}>
+      {trigger && <BaseDrawer.Trigger render={trigger} />}
+      <BaseDrawer.Portal>
+        <BaseDrawer.Backdrop className={styles.backdrop} />
+        <BaseDrawer.Viewport className={styles.viewport} data-side={side}>
+          <BaseDrawer.Popup className={popupClass} style={{ position: "relative" }}>
+            {/* handle bar sits above content in bottom drawers */}
+            {showHandle && side !== "top" && <div className={styles["handle-bar"]} aria-hidden />}
+
+            <BaseDrawer.Content className={styles.content}>
+              {title && <BaseDrawer.Title className={styles.title}>{title}</BaseDrawer.Title>}
+              {description && <BaseDrawer.Description className={styles.description}>{description}</BaseDrawer.Description>}
+              {children}
+              {footer && <div className={styles.footer}>{footer}</div>}
+            </BaseDrawer.Content>
+
+            {/* handle bar sits below content in top drawers */}
+            {showHandle && side === "top" && <div className={styles["handle-bar"]} aria-hidden />}
+
+            {dismissible && (
+              <BaseDrawer.Close className={styles.close} aria-label="Close drawer">
+                <XIcon />
+              </BaseDrawer.Close>
+            )}
+          </BaseDrawer.Popup>
+        </BaseDrawer.Viewport>
+      </BaseDrawer.Portal>
+    </BaseDrawer.Root>
+  );
+}
+export { styles as DrawerStyles };

package/src/drawer/index.ts

@@ -0,0 +1,24 @@
+export { Drawer } from "./drawer";
+export type { DrawerProps, DrawerSide } from "./drawer";
+
+export {
+  DrawerBackdrop,
+  DrawerViewport,
+  DrawerPopup,
+  DrawerContent,
+  DrawerTitle,
+  DrawerDescription,
+  DrawerClose,
+  DrawerHandleBar,
+  DrawerFooter,
+} from "./parts";
+export type {
+  DrawerBackdropProps,
+  DrawerViewportProps,
+  DrawerPopupProps,
+  DrawerContentProps,
+  DrawerTitleProps,
+  DrawerDescriptionProps,
+  DrawerCloseProps,
+} from "./parts";
+export { DrawerStyles } from "./drawer";

package/src/drawer/parts.tsx

@@ -0,0 +1,122 @@
+/**
+ * Styled primitives for Drawer.
+ *
+ * @example
+ * ```tsx
+ * import { Drawer } from '@base-ui/react/drawer';
+ * import {
+ *   DrawerBackdrop, DrawerViewport, DrawerPopup,
+ *   DrawerContent, DrawerTitle, DrawerClose,
+ * } from '@brijbyte/agentic-ui/drawer';
+ *
+ * <Drawer.Root swipeDirection="right">
+ *   <Drawer.Trigger render={<button>Open</button>} />
+ *   <Drawer.Portal>
+ *     <DrawerBackdrop />
+ *     <DrawerViewport side="right">
+ *       <DrawerPopup side="right">
+ *         <DrawerContent>
+ *           <DrawerTitle>Title</DrawerTitle>
+ *           {children}
+ *           <DrawerClose />
+ *         </DrawerContent>
+ *       </DrawerPopup>
+ *     </DrawerViewport>
+ *   </Drawer.Portal>
+ * </Drawer.Root>
+ * ```
+ */
+import { forwardRef } from "react";
+import type { ComponentPropsWithoutRef } from "react";
+import { Drawer as BaseDrawer } from "@base-ui/react/drawer";
+import type { DrawerSide } from "./drawer";
+import styles from "./drawer.module.css";
+
+// ─── Base prop types ───────────────────────────────────────────────────────
+
+type BaseBackdropProps = ComponentPropsWithoutRef<typeof BaseDrawer.Backdrop>;
+type BaseViewportProps = ComponentPropsWithoutRef<typeof BaseDrawer.Viewport>;
+type BasePopupProps = ComponentPropsWithoutRef<typeof BaseDrawer.Popup>;
+type BaseContentProps = ComponentPropsWithoutRef<typeof BaseDrawer.Content>;
+type BaseTitleProps = ComponentPropsWithoutRef<typeof BaseDrawer.Title>;
+type BaseDescriptionProps = ComponentPropsWithoutRef<typeof BaseDrawer.Description>;
+type BaseCloseProps = ComponentPropsWithoutRef<typeof BaseDrawer.Close>;
+
+// ─── Exported prop types ───────────────────────────────────────────────────
+
+export interface DrawerBackdropProps extends Omit<BaseBackdropProps, "className"> {
+  className?: string;
+}
+export interface DrawerViewportProps extends Omit<BaseViewportProps, "className"> {
+  className?: string;
+  side?: DrawerSide;
+}
+export interface DrawerPopupProps extends Omit<BasePopupProps, "className"> {
+  className?: string;
+  side?: DrawerSide;
+}
+export interface DrawerContentProps extends Omit<BaseContentProps, "className"> {
+  className?: string;
+}
+export interface DrawerTitleProps extends Omit<BaseTitleProps, "className"> {
+  className?: string;
+}
+export interface DrawerDescriptionProps extends Omit<BaseDescriptionProps, "className"> {
+  className?: string;
+}
+export interface DrawerCloseProps extends Omit<BaseCloseProps, "className"> {
+  className?: string;
+}
+
+// ─── Parts ────────────────────────────────────────────────────────────────
+
+export const DrawerBackdrop = forwardRef<HTMLDivElement, DrawerBackdropProps>(function DrawerBackdrop({ className, ...props }, ref) {
+  return <BaseDrawer.Backdrop ref={ref} className={`${styles.backdrop} ${className ?? ""}`} {...props} />;
+});
+
+export const DrawerViewport = forwardRef<HTMLDivElement, DrawerViewportProps>(function DrawerViewport(
+  { className, side = "right", ...props },
+  ref,
+) {
+  return <BaseDrawer.Viewport ref={ref} className={`${styles.viewport} ${className ?? ""}`} data-side={side} {...props} />;
+});
+
+const POPUP_CLASS: Record<DrawerSide, string> = {
+  right: styles["popup-right"] as string,
+  left: styles["popup-left"] as string,
+  bottom: styles["popup-bottom"] as string,
+  top: styles["popup-top"] as string,
+};
+
+export const DrawerPopup = forwardRef<HTMLDivElement, DrawerPopupProps>(function DrawerPopup({ className, side = "right", ...props }, ref) {
+  return <BaseDrawer.Popup ref={ref} className={`${styles.popup} ${POPUP_CLASS[side]} ${className ?? ""}`} {...props} />;
+});
+
+export const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(function DrawerContent({ className, ...props }, ref) {
+  return <BaseDrawer.Content ref={ref} className={`${styles.content} ${className ?? ""}`} {...props} />;
+});
+
+export const DrawerTitle = forwardRef<HTMLHeadingElement, DrawerTitleProps>(function DrawerTitle({ className, ...props }, ref) {
+  return <BaseDrawer.Title ref={ref} className={`${styles.title} ${className ?? ""}`} {...props} />;
+});
+
+export const DrawerDescription = forwardRef<HTMLParagraphElement, DrawerDescriptionProps>(function DrawerDescription(
+  { className, ...props },
+  ref,
+) {
+  return <BaseDrawer.Description ref={ref} className={`${styles.description} ${className ?? ""}`} {...props} />;
+});
+
+export const DrawerClose = forwardRef<HTMLButtonElement, DrawerCloseProps>(function DrawerClose({ className, ...props }, ref) {
+  return <BaseDrawer.Close ref={ref} className={`${styles.close} ${className ?? ""}`} {...props} />;
+});
+
+/** A decorative drag handle bar. Place at the top of a bottom drawer or bottom of a top drawer. */
+export function DrawerHandleBar({ className }: { className?: string }) {
+  return <div className={`${styles["handle-bar"]} ${className ?? ""}`} aria-hidden />;
+}
+
+/** Styled footer strip for action buttons. */
+export function DrawerFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={`${styles.footer} ${className ?? ""}`} {...props} />;
+}