@sentry/junior-dashboard 0.266.0 → 0.268.0

package/src/client/components/UserInputForm.tsx

@@ -0,0 +1,283 @@
+import { useId, useRef, useState, type FormEvent, type ReactNode } from "react";
+import {
+  buttonUserInputField,
+  isEmptyUserInputAnswer,
+  normalizeUserInputAnswer,
+  type UserInputAnswer,
+  type UserInputField,
+  type UserInputRequest,
+} from "@sentry/junior/api/schema";
+
+import { cn } from "../styles";
+import { Button } from "./ui/button";
+import { Checkbox } from "./ui/checkbox";
+import { Field, FieldDescription, FieldLabel } from "./ui/field";
+import { RadioGroup, RadioGroupItem } from "./ui/radio-group";
+import { Textarea } from "./ui/textarea";
+
+// Each choice is a whole selectable row, so the hit area and the selected
+// state read at a glance. The control inside keeps its own focus ring.
+const optionClass =
+  "flex cursor-pointer items-start gap-3 rounded-md border border-dashboard-border bg-dashboard-surface-panel px-3 py-2.5 text-sm transition-colors hover:border-dashboard-border-emphasis hover:bg-dashboard-surface-hover has-[[data-checked]]:border-dashboard-accent/60 has-[[data-checked]]:bg-dashboard-accent/10 has-[[data-disabled]]:cursor-not-allowed has-[[data-disabled]]:opacity-60";
+
+function OptionText(props: { description?: string; label: string }) {
+  return (
+    <span className="grid min-w-0 gap-0.5 break-words">
+      <span className="font-medium text-dashboard-text">{props.label}</span>
+      {props.description ? (
+        <span className="text-xs text-dashboard-text-muted">
+          {props.description}
+        </span>
+      ) : null}
+    </span>
+  );
+}
+
+function ChoiceField(props: {
+  disabled: boolean;
+  field: Extract<UserInputField, { kind: "choice" | "multi_choice" }>;
+  onChange(values: string[]): void;
+  values: string[];
+}) {
+  const id = useId();
+  const { field } = props;
+  const legend = (
+    <legend className="mb-2 p-0 text-sm font-semibold text-dashboard-text">
+      {field.label}
+    </legend>
+  );
+  const description = field.description ? (
+    <FieldDescription className="-mt-1 mb-2" id={`${id}-help`}>
+      {field.description}
+    </FieldDescription>
+  ) : null;
+  const describedBy = field.description ? `${id}-help` : undefined;
+  if (field.kind === "choice") {
+    return (
+      <fieldset className="m-0 min-w-0 border-0 p-0">
+        {legend}
+        {description}
+        <RadioGroup
+          aria-describedby={describedBy}
+          aria-label={field.label}
+          className="grid gap-2"
+          disabled={props.disabled}
+          onValueChange={(value) => props.onChange([String(value)])}
+          value={props.values[0] ?? null}
+        >
+          {field.options.map((option) => (
+            <label className={optionClass} key={option.label}>
+              <RadioGroupItem className="mt-0.5" value={option.label} />
+              <OptionText
+                description={option.description}
+                label={option.label}
+              />
+            </label>
+          ))}
+        </RadioGroup>
+      </fieldset>
+    );
+  }
+  return (
+    <fieldset
+      aria-describedby={describedBy}
+      className="m-0 min-w-0 border-0 p-0"
+    >
+      {legend}
+      {description}
+      <div className="grid gap-2">
+        {field.options.map((option) => (
+          <label className={optionClass} key={option.label}>
+            <Checkbox
+              checked={props.values.includes(option.label)}
+              className="mt-0.5"
+              disabled={props.disabled}
+              onCheckedChange={(checked) =>
+                props.onChange(
+                  checked
+                    ? [...props.values, option.label]
+                    : props.values.filter((value) => value !== option.label),
+                )
+              }
+            />
+            <OptionText description={option.description} label={option.label} />
+          </label>
+        ))}
+      </div>
+    </fieldset>
+  );
+}
+
+function TextField(props: {
+  className?: string;
+  description?: string;
+  disabled: boolean;
+  label: string;
+  onChange(value: string): void;
+  value: string;
+}) {
+  const id = useId();
+  return (
+    <Field>
+      <FieldLabel htmlFor={id}>{props.label}</FieldLabel>
+      {props.description ? (
+        <FieldDescription className="-mt-1" id={`${id}-help`}>
+          {props.description}
+        </FieldDescription>
+      ) : null}
+      <Textarea
+        aria-describedby={props.description ? `${id}-help` : undefined}
+        className={cn("min-h-20 leading-relaxed", props.className)}
+        disabled={props.disabled}
+        id={id}
+        onChange={(event) => props.onChange(event.target.value)}
+        value={props.value}
+      />
+    </Field>
+  );
+}
+
+/**
+ * Render the answer controls of a `requestUserInput` request. A request with
+ * one short choice field shows one button per choice, and a click is the
+ * answer. Other requests show a form that the reader submits once. A failed
+ * `onSubmit` lets the reader try again. `secondaryActions`, such as Dismiss,
+ * sit in the same action row, after the answer controls.
+ */
+export function UserInputForm(props: {
+  onSubmit(answer: UserInputAnswer): Promise<void>;
+  request: UserInputRequest;
+  requestId: string;
+  secondaryActions?: ReactNode;
+}) {
+  const [sending, setSending] = useState(false);
+  const [failed, setFailed] = useState(false);
+  const [values, setValues] = useState<Record<string, string[]>>({});
+  const [other, setOther] = useState("");
+  const buttonField = buttonUserInputField(props.request);
+
+  // A ref blocks a second click before React renders the disabled controls.
+  // The lock stays after a sent answer; only a failed send can retry.
+  const sendLock = useRef(false);
+
+  async function send(answer: UserInputAnswer) {
+    if (sendLock.current) return;
+    sendLock.current = true;
+    setSending(true);
+    setFailed(false);
+    try {
+      await props.onSubmit(answer);
+    } catch {
+      sendLock.current = false;
+      setSending(false);
+      setFailed(true);
+    }
+  }
+
+  const answer: UserInputAnswer = {
+    other,
+    requestId: props.requestId,
+    values,
+  };
+  function submit(event: FormEvent) {
+    event.preventDefault();
+    if (
+      !isEmptyUserInputAnswer(normalizeUserInputAnswer(props.request, answer))
+    ) {
+      void send(answer);
+    }
+  }
+
+  const secondary = props.secondaryActions ? (
+    <div className="flex flex-wrap gap-1 sm:ml-auto">
+      {props.secondaryActions}
+    </div>
+  ) : null;
+
+  return (
+    <>
+      {buttonField ? (
+        <>
+          <div className="mt-3 flex flex-wrap items-center gap-2">
+            {buttonField.options.map((option) => (
+              <Button
+                disabled={sending}
+                key={option.label}
+                onClick={() =>
+                  void send({
+                    requestId: props.requestId,
+                    values: { [buttonField.id]: [option.label] },
+                  })
+                }
+                title={option.description}
+              >
+                {option.label}
+              </Button>
+            ))}
+            {secondary}
+          </div>
+          {buttonField.options.some((option) => option.description) ? (
+            <ul className="mb-0 mt-2 list-none p-0 text-xs text-dashboard-text-muted">
+              {buttonField.options
+                .filter((option) => option.description)
+                .map((option) => (
+                  <li key={option.label}>
+                    <span className="font-medium text-dashboard-text">
+                      {option.label}
+                    </span>
+                    : {option.description}
+                  </li>
+                ))}
+            </ul>
+          ) : null}
+        </>
+      ) : (
+        <form className="mt-4 grid gap-5" onSubmit={submit}>
+          {props.request.fields.map((field) =>
+            field.kind === "text" ? (
+              <TextField
+                description={field.description}
+                disabled={sending}
+                key={field.id}
+                label={field.label}
+                onChange={(value) =>
+                  setValues((current) => ({ ...current, [field.id]: [value] }))
+                }
+                value={values[field.id]?.[0] ?? ""}
+              />
+            ) : (
+              <ChoiceField
+                disabled={sending}
+                field={field}
+                key={field.id}
+                onChange={(picked) =>
+                  setValues((current) => ({ ...current, [field.id]: picked }))
+                }
+                values={values[field.id] ?? []}
+              />
+            ),
+          )}
+          <TextField
+            className="min-h-16"
+            description="Optional. Anything else, or an answer that is not listed."
+            disabled={sending}
+            label="Other"
+            onChange={setOther}
+            value={other}
+          />
+          <div className="flex flex-wrap items-center gap-2">
+            <Button disabled={sending} type="submit" variant="primary">
+              Send
+            </Button>
+            {secondary}
+          </div>
+        </form>
+      )}
+      {failed ? (
+        <p className="mb-0 mt-2 text-xs text-rose-300" role="alert">
+          Could not send your answer. Try again.
+        </p>
+      ) : null}
+    </>
+  );
+}

package/src/client/components/layout/DashboardHeader.tsx

@@ -15,11 +15,22 @@ import {
 import { cn, dashboardInteractiveTextClass } from "../../styles";
 
 export type DashboardHeaderNavItem = {
+  /** Shown beside the label when it is above zero. */
+  count?: number;
   key: string;
   label: string;
   to: string;
 };
 
+function NavCount(props: { count?: number }) {
+  if (!props.count) return null;
+  return (
+    <span className="ml-1.5 rounded-full bg-violet-300/20 px-1.5 py-0.5 text-xs text-violet-200">
+      {props.count.toLocaleString("en-US")}
+    </span>
+  );
+}
+
 /** Render the primary dashboard shell header and optional mobile nav sheet. */
 export function DashboardHeader(props: {
   /** Back target used on mobile conversation detail. */
@@ -151,6 +162,7 @@ export function DashboardHeader(props: {
           {props.navItems.map((item) => (
             <NavLink className={navLinkClass} key={item.key} to={item.to}>
               {item.label}
+              <NavCount count={item.count} />
             </NavLink>
           ))}
         </nav>
@@ -204,6 +216,7 @@ export function DashboardHeader(props: {
                     to={item.to}
                   >
                     {item.label}
+                    <NavCount count={item.count} />
                   </NavLink>
                 ))}
               </nav>

package/src/client/components/ui/alert.tsx

@@ -10,7 +10,7 @@ const alertVariants = cva(
         default:
           "border-dashboard-border-strong bg-dashboard-surface-raised text-dashboard-text",
         destructive:
-          "border-rose-300/25 bg-dashboard-surface-raised text-rose-50 *:data-[slot=alert-description]:text-rose-100/70 *:[svg]:text-current",
+          "border-rose-300/20 bg-rose-300/[0.08] text-rose-100 *:data-[slot=alert-description]:text-rose-100/70 *:[svg]:text-rose-300",
       },
     },
     defaultVariants: {

package/src/client/components/ui/button-group.tsx

@@ -0,0 +1,59 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@dashboard/lib/utils";
+
+import { Separator } from "@dashboard/components/ui/separator";
+
+const buttonGroupVariants = cva(
+  "flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2",
+  {
+    variants: {
+      orientation: {
+        horizontal:
+          "*:data-slot:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-md! [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0",
+        vertical:
+          "flex-col *:data-slot:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-md! [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0",
+      },
+    },
+    defaultVariants: {
+      orientation: "horizontal",
+    },
+  },
+);
+
+/** Join related buttons into one control and name it for assistive technology. */
+function ButtonGroup({
+  className,
+  orientation,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="button-group"
+      data-orientation={orientation}
+      className={cn(buttonGroupVariants({ orientation }), className)}
+      {...props}
+    />
+  );
+}
+
+/** Draw a divider between buttons in a group. */
+function ButtonGroupSeparator({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="button-group-separator"
+      orientation={orientation}
+      className={cn(
+        "relative self-stretch bg-dashboard-border data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { ButtonGroup, ButtonGroupSeparator };

package/src/client/components/ui/button.tsx

@@ -5,7 +5,7 @@ import { cn } from "@dashboard/lib/utils";
 const commandButtonClass =
   "inline-flex h-9 max-w-full items-center justify-center gap-2 rounded-md border px-3 text-sm font-medium leading-none focus-visible:outline-2 focus-visible:outline-offset-2";
 
-/** Style the dashboard command, primary, danger, icon, and menu row button surfaces. Links use it with `className`. */
+/** Style the dashboard command, primary, quiet, danger, icon, and menu row button surfaces. Links use it with `className`. */
 const buttonVariants = cva(
   "cursor-pointer font-sans no-underline transition-colors data-disabled:cursor-not-allowed data-disabled:opacity-50",
   {
@@ -13,6 +13,8 @@ const buttonVariants = cva(
       variant: {
         default: "",
         primary: "",
+        /** A secondary action beside a primary one, such as Dismiss. */
+        quiet: "",
         danger: "",
       },
       size: {
@@ -38,6 +40,14 @@ const buttonVariants = cva(
           "border-dashboard-text-solid bg-dashboard-text-solid text-dashboard-text-inverse hover:border-dashboard-text-subtle hover:bg-dashboard-text-subtle focus-visible:outline-dashboard-focus data-disabled:hover:border-dashboard-text-solid data-disabled:hover:bg-dashboard-text-solid",
         ),
       },
+      {
+        size: "default",
+        variant: "quiet",
+        className: cn(
+          commandButtonClass,
+          "border-transparent bg-transparent text-dashboard-text-muted hover:bg-dashboard-fill-strong hover:text-dashboard-text focus-visible:outline-dashboard-focus data-disabled:hover:bg-transparent data-disabled:hover:text-dashboard-text-muted",
+        ),
+      },
       {
         size: "default",
         variant: "danger",

package/src/client/components/ui/dialog.tsx

@@ -1,66 +1,60 @@
+import type { ComponentProps } from "react";
 import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
 import { cn } from "@dashboard/lib/utils";
 
-/** Own the open state and modal focus rules for a dialog. */
-function Dialog({ ...props }: DialogPrimitive.Root.Props) {
+/** Own the open state and modal focus rules for a centered dialog. */
+function Dialog(props: DialogPrimitive.Root.Props) {
   return <DialogPrimitive.Root data-slot="dialog" {...props} />;
 }
 
-function DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {
-  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
-}
-
 /** Close the dialog through Base UI dismissal and focus handling. */
-function DialogClose({ ...props }: DialogPrimitive.Close.Props) {
+function DialogClose(props: DialogPrimitive.Close.Props) {
   return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
 }
 
-function DialogOverlay({
-  className,
-  ...props
-}: DialogPrimitive.Backdrop.Props) {
-  return (
-    <DialogPrimitive.Backdrop
-      data-slot="dialog-overlay"
-      className={cn(
-        "fixed inset-0 isolate z-50 bg-dashboard-overlay transition-opacity duration-180 motion-reduce:transition-none data-ending-style:opacity-0 data-starting-style:opacity-0",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-/** Show the dialog above a backdrop, centered in the viewport. */
+/** Show a short task above the page. Small screens keep it near the top, clear of the keyboard. */
 function DialogContent({ className, ...props }: DialogPrimitive.Popup.Props) {
   return (
-    <DialogPortal>
-      <DialogOverlay />
+    <DialogPrimitive.Portal data-slot="dialog-portal">
+      {/* Dim an open sheet too, so a dialog opened from it stands out. */}
+      <DialogPrimitive.Backdrop
+        forceRender
+        data-slot="dialog-overlay"
+        className="fixed inset-0 z-50 bg-dashboard-overlay transition-opacity duration-180 motion-reduce:transition-none data-ending-style:opacity-0 data-starting-style:opacity-0"
+      />
       <DialogPrimitive.Popup
-        data-slot="dialog-content"
         data-dashboard-modal=""
+        data-slot="dialog-content"
         className={cn(
-          "fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl border border-dashboard-border-emphasis bg-dashboard-surface-raised p-4 text-sm text-dashboard-text shadow-lg outline-none transition-[opacity,scale] duration-180 motion-reduce:transition-none sm:max-w-sm data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:scale-95 data-starting-style:scale-95",
+          "fixed top-[max(1rem,env(safe-area-inset-top))] left-1/2 z-50 grid max-h-[calc(100dvh-2rem)] w-[calc(100%-2rem)] max-w-md -translate-x-1/2 gap-4 overflow-y-auto rounded-xl border border-dashboard-border-emphasis bg-dashboard-surface-raised p-5 text-sm text-dashboard-text shadow-lg outline-none transition-[opacity,scale] duration-180 motion-reduce:transition-none data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0 sm:top-1/2 sm:-translate-y-1/2",
           className,
         )}
         {...props}
       />
-    </DialogPortal>
+    </DialogPrimitive.Portal>
   );
 }
 
-/** Give the dialog its accessible name. */
+/** Name the dialog task. */
 function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {
   return (
     <DialogPrimitive.Title
       data-slot="dialog-title"
-      className={cn(
-        "m-0 text-base leading-none font-medium text-dashboard-text",
-        className,
-      )}
+      className={cn("m-0 font-display text-lg font-medium", className)}
+      {...props}
+    />
+  );
+}
+
+/** Keep dialog actions together at the end of the dialog. */
+function DialogFooter({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn("flex flex-wrap justify-end gap-2", className)}
       {...props}
     />
   );
 }
 
-export { Dialog, DialogClose, DialogContent, DialogTitle };
+export { Dialog, DialogClose, DialogContent, DialogFooter, DialogTitle };

package/src/client/components/ui/drawer.tsx

@@ -0,0 +1,140 @@
+import * as React from "react";
+import { Drawer as DrawerPrimitive } from "@base-ui/react/drawer";
+import { cn } from "@dashboard/lib/utils";
+
+type DrawerContextProps = {
+  modal: DrawerPrimitive.Root.Props["modal"];
+  swipeDirection: NonNullable<DrawerPrimitive.Root.Props["swipeDirection"]>;
+};
+
+const DrawerContext = React.createContext<DrawerContextProps | null>(null);
+
+function useDrawer() {
+  const context = React.useContext(DrawerContext);
+
+  if (!context) {
+    throw new Error("useDrawer must be used within a Drawer.");
+  }
+
+  return context;
+}
+
+/**
+ * Own the open state, swipe dismissal, and nesting for a shadcn drawer.
+ * A drawer rendered inside another drawer stacks in front of it.
+ */
+function Drawer({
+  modal = true,
+  swipeDirection = "down",
+  ...props
+}: DrawerPrimitive.Root.Props) {
+  const contextValue = React.useMemo(
+    () => ({ modal, swipeDirection }),
+    [modal, swipeDirection],
+  );
+
+  return (
+    <DrawerContext.Provider value={contextValue}>
+      <DrawerPrimitive.Root
+        data-slot="drawer"
+        modal={modal}
+        swipeDirection={swipeDirection}
+        {...props}
+      />
+    </DrawerContext.Provider>
+  );
+}
+
+function DrawerPortal({ ...props }: DrawerPrimitive.Portal.Props) {
+  return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />;
+}
+
+/** Close the drawer through Base UI dismissal and focus handling. */
+function DrawerClose({ ...props }: DrawerPrimitive.Close.Props) {
+  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />;
+}
+
+function DrawerOverlay({
+  className,
+  ...props
+}: DrawerPrimitive.Backdrop.Props) {
+  return (
+    <DrawerPrimitive.Backdrop
+      data-slot="drawer-overlay"
+      className={cn(
+        "fixed inset-0 z-50 min-h-dvh bg-dashboard-overlay opacity-[calc(1-var(--drawer-swipe-progress))] transition-opacity duration-450 ease-[cubic-bezier(0.32,0.72,0,1)] select-none motion-reduce:transition-none data-ending-style:pointer-events-none data-ending-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-starting-style:opacity-0 data-swiping:duration-0 supports-[-webkit-touch-callout:none]:absolute",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+/**
+ * Place the drawer on its swipe edge. While a nested drawer is open, this
+ * drawer scales back, peeks out behind it, and hides its content.
+ */
+function DrawerContent({
+  className,
+  children,
+  ...props
+}: DrawerPrimitive.Popup.Props) {
+  const { modal, swipeDirection } = useDrawer();
+  const swipeAxis =
+    swipeDirection === "down" || swipeDirection === "up" ? "y" : "x";
+
+  return (
+    <DrawerPortal>
+      {/* App drawers trap focus without a modal root, so keep the overlay.
+          Base UI skips it for a nested drawer. */}
+      <DrawerOverlay />
+      <DrawerPrimitive.Viewport
+        data-slot="drawer-viewport"
+        data-modal={modal}
+        className="pointer-events-none fixed inset-0 z-50 select-none data-[modal=true]:pointer-events-auto"
+      >
+        <DrawerPrimitive.Popup
+          data-slot="drawer-popup"
+          data-swipe-axis={swipeAxis}
+          className={cn(
+            // Base.
+            "group/drawer-popup pointer-events-auto fixed z-50 m-(--drawer-inset,0px) flex h-(--drawer-content-height) max-h-(--drawer-content-max-height,none) min-h-0 w-(--drawer-content-width,auto) transform-[translate3d(var(--translate-x,0px),var(--translate-y,0px),0)_scale(var(--stack-scale))] flex-col border-dashboard-border-strong bg-popover text-sm text-popover-foreground transition-[transform,height,opacity,filter] duration-450 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-transform outline-none motion-reduce:transition-none select-none [interpolate-size:allow-keywords] data-[swipe-direction=down]:rounded-t-xl data-[swipe-direction=down]:border-t data-[swipe-direction=left]:rounded-r-xl data-[swipe-direction=left]:border-r data-[swipe-direction=right]:rounded-l-xl data-[swipe-direction=right]:border-l data-[swipe-direction=up]:rounded-b-xl data-[swipe-direction=up]:border-b",
+            // Nested.
+            "data-nested-drawer-open:overflow-hidden data-nested-drawer-open:brightness-95",
+            // Bleed.
+            "after:pointer-events-none after:absolute after:bg-(--drawer-bleed-background,var(--color-popover)) data-[swipe-axis=x]:after:inset-y-0 data-[swipe-axis=x]:after:w-(--bleed) data-[swipe-axis=y]:after:inset-x-0 data-[swipe-axis=y]:after:h-(--bleed) data-[swipe-direction=down]:after:top-full data-[swipe-direction=left]:after:right-full data-[swipe-direction=right]:after:left-full data-[swipe-direction=up]:after:bottom-full",
+            // Sizing.
+            "[--drawer-content-height:var(--drawer-height,auto)] data-[swipe-axis=x]:[--drawer-content-width:75%] data-[swipe-axis=y]:[--drawer-content-max-height:calc(100dvh-6rem)] data-[swipe-axis=y]:data-snap-points:[--drawer-content-height:100dvh] data-[swipe-axis=x]:sm:[--drawer-content-width:24rem]",
+            // Stack.
+            "[--bleed:3rem] [--peek:1rem] [--stack-height:var(--drawer-frontmost-height,var(--drawer-height,0px))] [--stack-peek-offset:max(0px,calc((var(--nested-drawers)-var(--stack-progress))*var(--peek)))] [--stack-progress:clamp(0,var(--drawer-swipe-progress),1)] [--stack-scale-base:max(0,calc(1-(var(--nested-drawers)*var(--stack-step))))] [--stack-scale:clamp(0,calc(var(--stack-scale-base)+(var(--stack-step)*var(--stack-progress))),1)] [--stack-shrink:calc(1-var(--stack-scale))] [--stack-step:0.05]",
+            // Transitions.
+            "data-ending-style:transform-(--closed-transform) data-ending-style:opacity-[0.9999] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-nested-drawer-swiping:duration-0 data-ending-style:data-nested-drawer-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-starting-style:transform-(--closed-transform) data-swiping:duration-0 data-ending-style:data-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)]",
+            // Axis: y.
+            "data-[swipe-axis=y]:inset-x-0 data-[swipe-axis=y]:data-nested-drawer-open:h-(--stack-height)",
+            // Axis: x.
+            "data-[swipe-axis=x]:inset-y-0 data-[swipe-axis=x]:flex-row",
+            // Direction: down.
+            "data-[swipe-direction=down]:bottom-0 data-[swipe-direction=down]:origin-bottom data-[swipe-direction=down]:[--closed-transform:translate3d(0,calc(100%+var(--drawer-inset,0px)+2px),0)] data-[swipe-direction=down]:[--translate-y:calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y)-var(--stack-peek-offset)-(var(--stack-shrink)*var(--stack-height)))]",
+            // Direction: up.
+            "data-[swipe-direction=up]:top-0 data-[swipe-direction=up]:origin-top data-[swipe-direction=up]:[--closed-transform:translate3d(0,calc(-100%-var(--drawer-inset,0px)-2px),0)] data-[swipe-direction=up]:[--translate-y:calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y)+var(--stack-peek-offset)+(var(--stack-shrink)*var(--stack-height)))]",
+            // Direction: left.
+            "data-[swipe-direction=left]:left-0 data-[swipe-direction=left]:origin-left data-[swipe-direction=left]:[--closed-transform:translate3d(calc(-100%-var(--drawer-inset,0px)-2px),0,0)] data-[swipe-direction=left]:[--translate-x:calc(var(--drawer-swipe-movement-x)+var(--stack-peek-offset)+(var(--stack-shrink)*100%))]",
+            // Direction: right.
+            "data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:origin-right data-[swipe-direction=right]:[--closed-transform:translate3d(calc(100%+var(--drawer-inset,0px)+2px),0,0)] data-[swipe-direction=right]:[--translate-x:calc(var(--drawer-swipe-movement-x)-var(--stack-peek-offset)-(var(--stack-shrink)*100%))]",
+            className,
+          )}
+          {...props}
+        >
+          <DrawerPrimitive.Content
+            data-slot="drawer-content"
+            className="flex min-h-0 flex-1 flex-col overflow-hidden overscroll-contain rounded-[inherit] transition-opacity duration-300 ease-[cubic-bezier(0.45,1.005,0,1.005)] select-text motion-reduce:transition-none group-data-nested-drawer-open/drawer-popup:opacity-0 group-data-nested-drawer-swiping/drawer-popup:opacity-100 group-data-swiping/drawer-popup:select-none"
+          >
+            {children}
+          </DrawerPrimitive.Content>
+        </DrawerPrimitive.Popup>
+      </DrawerPrimitive.Viewport>
+    </DrawerPortal>
+  );
+}
+
+export { Drawer, DrawerClose, DrawerContent };