@vvedantb/ui 0.5.4 → 0.6.1

package/shell/src/SignOutDialog.tsx

@@ -1,13 +1,5 @@
-import { IconAlertTriangle, IconLoader2 } from "@tabler/icons-react";
-import { Button } from "../../src/ui/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "../../src/ui/dialog";
+import { IconAlertTriangle } from "@tabler/icons-react";
+import { ConfirmDialog } from "../../src/ui/confirm-dialog";
 import { cn } from "../../src/utils/cn";
 import { signOutCancelClass, signOutDescriptionClass } from "./app-shell-classes";
 
@@ -22,13 +14,13 @@ export type SignOutDialogProps = {
   description?: string;
   /** Merged onto the dialog content after `sm:max-w-sm`. */
   contentClassName?: string;
-  /** Dialog title and confirm button label. Default `"Sign out"`. */
+  /** Legacy (still supported): dialog title and confirm button label. Default `"Sign out"`. */
   title?: string;
-  /** Default `"Sign out of your account?"`. */
+  /** Legacy (still supported): default `"Sign out of your account?"`. */
   question?: string;
 };
 
-/** Sign-out confirmation. The app owns the state and the sign-out call. */
+/** Sign-out confirmation. The app owns the state and the sign-out call. Composed from `ConfirmDialog` parts. */
 export function SignOutDialog({
   open,
   onOpenChange,
@@ -40,21 +32,15 @@ export function SignOutDialog({
   question = "Sign out of your account?",
 }: SignOutDialogProps) {
   return (
-    <Dialog
-      open={open}
-      onOpenChange={(next) => {
-        if (!next && pending) return;
-        onOpenChange(next);
-      }}
-    >
-      <DialogContent className={cn("sm:max-w-sm", contentClassName)}>
-        <DialogHeader>
-          <DialogTitle className="text-foreground">{title}</DialogTitle>
-          <DialogDescription className="sr-only">
+    <ConfirmDialog.Root open={open} onOpenChange={onOpenChange} alert={false} pending={pending}>
+      <ConfirmDialog.Content className={cn("sm:max-w-sm", contentClassName)}>
+        <ConfirmDialog.Header>
+          <ConfirmDialog.Title className="text-foreground">{title}</ConfirmDialog.Title>
+          <ConfirmDialog.Description className="sr-only">
             Confirm signing out of your account
-          </DialogDescription>
-        </DialogHeader>
-        <div className="flex items-start gap-3 py-4">
+          </ConfirmDialog.Description>
+        </ConfirmDialog.Header>
+        <ConfirmDialog.Body className="flex items-start gap-3 py-4">
           <div className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-danger/10">
             <IconAlertTriangle size={20} className="text-danger" />
           </div>
@@ -62,32 +48,19 @@ export function SignOutDialog({
             <p className="text-foreground">{question}</p>
             {description ? <p className={signOutDescriptionClass}>{description}</p> : null}
           </div>
-        </div>
-        <DialogFooter>
-          <Button
-            variant="ghost"
-            onClick={() => onOpenChange(false)}
-            disabled={pending}
-            className={signOutCancelClass}
-          >
-            Cancel
-          </Button>
-          <Button
+        </ConfirmDialog.Body>
+        <ConfirmDialog.Footer>
+          <ConfirmDialog.Cancel className={signOutCancelClass} />
+          <ConfirmDialog.Action
             onClick={() => void onConfirm()}
-            disabled={pending}
+            pendingLabel="Signing out..."
+            spinnerSize={16}
             className="bg-danger text-danger-foreground"
           >
-            {pending ? (
-              <>
-                <IconLoader2 size={16} className="animate-spin" />
-                Signing out...
-              </>
-            ) : (
-              title
-            )}
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+            {title}
+          </ConfirmDialog.Action>
+        </ConfirmDialog.Footer>
+      </ConfirmDialog.Content>
+    </ConfirmDialog.Root>
   );
 }

package/shell/src/app-shell-classes.ts

@@ -33,6 +33,9 @@ export function sidebarNavRowClass(isIconOnly: boolean): string {
   return cn(isIconOnly ? "justify-center px-0 py-1.5" : "gap-3 px-3 py-1.5");
 }
 
+/** Sidebar header row: the panel title and its trailing actions. */
+export const sidebarHeaderRowClass = "flex h-11 items-center gap-1 pl-3 pr-1";
+
 export const mobileMenuButtonClass = "-ml-1 h-11 w-11 shrink-0 rounded-lg text-muted hover:bg-surface-tertiary/50 hover:text-foreground"; // check-tokens-allow: text-muted
 
 export const panelCloseButtonClass = "rounded-lg text-muted hover:bg-surface-tertiary/50 hover:text-foreground"; // check-tokens-allow: text-muted
@@ -42,3 +45,6 @@ export const accountEmailClass = "block truncate text-xs font-normal text-muted"
 export const signOutDescriptionClass = "mt-1 text-sm text-muted"; // check-tokens-allow: text-muted
 
 export const signOutCancelClass = "text-muted"; // check-tokens-allow: text-muted
+
+/** Label of the type-to-confirm field (`ConfirmDialog.Field`). */
+export const confirmFieldLabelClass = "text-sm text-muted"; // check-tokens-allow: text-muted

package/shell/src/index.ts

@@ -11,9 +11,17 @@ export type {
   SessionsHoverCardSurface,
 } from "./SessionsHoverCard.js";
 export { AppShell } from "./AppShell.js";
-export type { AppShellProps } from "./AppShell.js";
+export type {
+  AppShellContentProps,
+  AppShellMainProps,
+  AppShellProps,
+  AppShellRootProps,
+  AppShellSkipLinkProps,
+} from "./AppShell.js";
 export { AppSidebar } from "./AppSidebar.js";
 export type { AppSidebarProps } from "./AppSidebar.js";
+// Composable sidebar parts (`Sidebar.Root`, `Sidebar.Rail`, ...) and their prop types.
+export * from "./Sidebar.js";
 export { SidebarRail, RailTile, RailDivider } from "./SidebarRail.js";
 export type { SidebarRailProps, RailTileProps, RailDividerProps } from "./SidebarRail.js";
 export { SidebarResizeHandle, useAppShellResize } from "./SidebarResize.js";

package/src/index.ts

@@ -123,9 +123,17 @@ export type {
 // App shell: sidebar and main page layout. Widths come from the
 // `--app-shell-*` CSS variables that `AppShell` sets.
 export { AppShell } from "../shell/src/AppShell";
-export type { AppShellProps } from "../shell/src/AppShell";
+export type {
+  AppShellContentProps,
+  AppShellMainProps,
+  AppShellProps,
+  AppShellRootProps,
+  AppShellSkipLinkProps,
+} from "../shell/src/AppShell";
 export { AppSidebar } from "../shell/src/AppSidebar";
 export type { AppSidebarProps } from "../shell/src/AppSidebar";
+// Composable sidebar parts (`Sidebar.Root`, `Sidebar.Rail`, ...) and their prop types.
+export * from "../shell/src/Sidebar";
 export { SidebarRail, RailTile, RailDivider } from "../shell/src/SidebarRail";
 export type { SidebarRailProps, RailTileProps, RailDividerProps } from "../shell/src/SidebarRail";
 export { SidebarResizeHandle, useAppShellResize } from "../shell/src/SidebarResize";

package/src/ui/confirm-dialog-parts.tsx

@@ -0,0 +1,355 @@
+import * as React from "react";
+import { IconLoader2 } from "@tabler/icons-react";
+import { confirmFieldLabelClass } from "../../shell/src/app-shell-classes";
+import { cn } from "../utils/cn";
+import {
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+} from "./alert-dialog";
+import { Button, type ButtonProps } from "./button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "./dialog";
+import { Input } from "./input";
+
+export type ConfirmDialogSize = "default" | "sm" | "md";
+
+type ConfirmDialogContextValue = {
+  size: ConfirmDialogSize;
+  alert: boolean;
+  pending: boolean;
+  focusCancel: boolean;
+  confirmPhrase: string | undefined;
+  typed: string;
+  setTyped: (value: string) => void;
+  phraseMatches: boolean;
+  /** Calls the Root's `onOpenChange(false)` unless `pending` (and not `dismissibleWhilePending`). */
+  requestClose: () => void;
+};
+
+const ConfirmDialogContext = React.createContext<ConfirmDialogContextValue>({
+  size: "default",
+  alert: true,
+  pending: false,
+  focusCancel: false,
+  confirmPhrase: undefined,
+  typed: "",
+  setTyped: () => {},
+  phraseMatches: true,
+  requestClose: () => {},
+});
+
+/** State of the nearest `ConfirmDialog.Root`, for custom parts. */
+export function useConfirmDialog(): ConfirmDialogContextValue {
+  return React.useContext(ConfirmDialogContext);
+}
+
+export type ConfirmDialogRootProps = React.ComponentProps<typeof Dialog> & {
+  /** Layout slot for the other parts. Default `"default"`. */
+  size?: ConfirmDialogSize;
+  /** Blocking alert dialog: no outside dismiss, no close button, Cancel focused. Default `size === "default"`. */
+  alert?: boolean;
+  /**
+   * While `true`, close requests (Escape, outside click, close button, Cancel)
+   * are swallowed, Cancel is disabled and Action shows its pending state.
+   * Needs a controlled `open`.
+   */
+  pending?: boolean;
+  /**
+   * While `pending`, Escape, outside click and the close button still close
+   * (Root `onOpenChange(false)` runs). Cancel stays disabled and Action stays
+   * pending. Default `false`.
+   */
+  dismissibleWhilePending?: boolean;
+  /**
+   * Non-alert only: Cancel renders `data-alert-cancel=""`, so a Content with
+   * `role="alertdialog"` focuses it on open. An explicit `data-alert-cancel`
+   * on Cancel wins. No-op with `alert` (its Cancel already has it). Default `false`.
+   */
+  focusCancel?: boolean;
+  /** Type-to-confirm phrase for `ConfirmDialog.Field`. Action stays disabled until it matches (trimmed, case-insensitive). */
+  confirmPhrase?: string;
+};
+
+function Root({
+  size = "default",
+  alert = size === "default",
+  pending = false,
+  dismissibleWhilePending = false,
+  focusCancel = false,
+  confirmPhrase,
+  open,
+  onOpenChange,
+  children,
+  ...props
+}: ConfirmDialogRootProps) {
+  const [typed, setTyped] = React.useState("");
+  const [prevOpen, setPrevOpen] = React.useState(open);
+  if (open !== prevOpen) {
+    setPrevOpen(open);
+    if (open) setTyped("");
+  }
+
+  const handleOpenChange = (next: boolean) => {
+    if (!next && pending && !dismissibleWhilePending) return;
+    if (next) setTyped("");
+    onOpenChange?.(next);
+  };
+
+  const phraseMatches =
+    confirmPhrase === undefined ||
+    typed.trim().toLowerCase() === confirmPhrase.trim().toLowerCase();
+
+  return (
+    <ConfirmDialogContext.Provider
+      value={{
+        size,
+        alert,
+        pending,
+        focusCancel,
+        confirmPhrase,
+        typed,
+        setTyped,
+        phraseMatches,
+        requestClose: () => handleOpenChange(false),
+      }}
+    >
+      <Dialog {...props} open={open} onOpenChange={handleOpenChange}>
+        {children}
+      </Dialog>
+    </ConfirmDialogContext.Provider>
+  );
+}
+Root.displayName = "ConfirmDialog.Root";
+
+export type ConfirmDialogContentProps = React.ComponentProps<typeof DialogContent>;
+
+/** Alert or plain dialog content (from Root `alert`); `sm` and `md` cap the width. */
+function Content({ className, ...props }: ConfirmDialogContentProps) {
+  const { size, alert } = useConfirmDialog();
+  const Comp = alert ? AlertDialogContent : DialogContent;
+  return <Comp {...props} className={cn(size !== "default" && "sm:max-w-96", className)} />;
+}
+Content.displayName = "ConfirmDialog.Content";
+
+export type ConfirmDialogHeaderProps = React.HTMLAttributes<HTMLDivElement>;
+
+function Header({ className, ...props }: ConfirmDialogHeaderProps) {
+  const { size } = useConfirmDialog();
+  return <DialogHeader {...props} className={cn(size === "md" && "pb-4", className)} />;
+}
+Header.displayName = "ConfirmDialog.Header";
+
+export type ConfirmDialogTitleProps = React.ComponentProps<typeof DialogTitle>;
+
+function Title({ className, ...props }: ConfirmDialogTitleProps) {
+  const { size } = useConfirmDialog();
+  return <DialogTitle {...props} className={cn(size === "sm" && "mb-2 text-sm font-medium", className)} />;
+}
+Title.displayName = "ConfirmDialog.Title";
+
+export type ConfirmDialogDescriptionProps = React.ComponentProps<typeof DialogDescription>;
+
+function Description({ className, ...props }: ConfirmDialogDescriptionProps) {
+  const { size } = useConfirmDialog();
+  return (
+    <DialogDescription
+      {...props}
+      className={cn(
+        size === "sm" && "mb-4 text-sm text-muted-foreground",
+        size === "md" && "py-6 text-muted-foreground",
+        className,
+      )}
+    />
+  );
+}
+// Matched by `DialogContent` when it checks an alert dialog for a description.
+Description.displayName = "ConfirmDialog.Description";
+
+export type ConfirmDialogBodyProps = React.ComponentProps<"div">;
+
+/** Plain `<div>` for extra content. No default classes. */
+function Body(props: ConfirmDialogBodyProps) {
+  return <div {...props} />;
+}
+Body.displayName = "ConfirmDialog.Body";
+
+export type ConfirmDialogFooterProps = React.HTMLAttributes<HTMLDivElement> & {
+  /**
+   * Right-aligned row of buttons at every width, laid out like a
+   * `flex justify-end gap-2` div inside the footer. Adds `justify-end flex-row!`:
+   * the `!important` beats both the footer's own `flex-col-reverse` below `sm`
+   * and the compact sheet's descendant `flex-col-reverse` rule, which has higher
+   * specificity than a plain class. Keeps `data-slot` and every other footer
+   * class. No-op for `size="sm"` (already a row). Default `false`.
+   */
+  row?: boolean;
+};
+
+function Footer({ row = false, className, ...props }: ConfirmDialogFooterProps) {
+  const { size } = useConfirmDialog();
+  if (size === "sm") return <div {...props} className={cn("flex justify-end gap-2", className)} />;
+  return (
+    <DialogFooter
+      {...props}
+      className={cn(size === "md" && "pt-4", row && "justify-end flex-row!", className)}
+    />
+  );
+}
+Footer.displayName = "ConfirmDialog.Footer";
+
+export type ConfirmDialogCancelProps = ButtonProps;
+
+/**
+ * Alert: a `DialogClose` outline button. Otherwise a ghost button that runs
+ * `onClick` and then, unless it called `preventDefault()`, the Root's
+ * `onOpenChange(false)`. Disabled while pending. With Root `focusCancel`
+ * it also gets `data-alert-cancel`.
+ */
+function Cancel({ children = "Cancel", variant, size, disabled, onClick, ...props }: ConfirmDialogCancelProps) {
+  const dialog = useConfirmDialog();
+  if (dialog.alert) {
+    return (
+      <AlertDialogCancel
+        variant={variant}
+        size={size}
+        {...props}
+        onClick={onClick}
+        disabled={disabled || dialog.pending}
+      >
+        {children}
+      </AlertDialogCancel>
+    );
+  }
+  return (
+    <Button
+      variant={variant ?? "ghost"}
+      size={size ?? (dialog.size === "sm" ? "sm" : undefined)}
+      data-alert-cancel={dialog.focusCancel ? "" : undefined}
+      {...props}
+      onClick={(event) => {
+        onClick?.(event);
+        if (!event.defaultPrevented) dialog.requestClose();
+      }}
+      disabled={disabled || dialog.pending}
+    >
+      {children}
+    </Button>
+  );
+}
+Cancel.displayName = "ConfirmDialog.Cancel";
+
+export type ConfirmDialogActionProps = ButtonProps & {
+  /** Default from Root `pending`. Disables the button. */
+  pending?: boolean;
+  /** Shown with a spinner while pending. Without it the children stay. */
+  pendingLabel?: React.ReactNode;
+  /** Spinner size in px. Default `14`. */
+  spinnerSize?: number;
+  /** Merged into the spinner className after `animate-spin`, e.g. `"mr-2"`. */
+  spinnerClassName?: string;
+};
+
+/** Confirm button. Does not close the dialog. Disabled while pending or until the confirm phrase matches. */
+function Action({
+  pending: pendingProp,
+  pendingLabel,
+  spinnerSize = 14,
+  spinnerClassName,
+  size,
+  disabled,
+  children,
+  ...props
+}: ConfirmDialogActionProps) {
+  const dialog = useConfirmDialog();
+  const pending = pendingProp ?? dialog.pending;
+  const content =
+    pending && pendingLabel !== undefined ? (
+      <>
+        <IconLoader2 size={spinnerSize} className={cn("animate-spin", spinnerClassName)} />
+        {pendingLabel}
+      </>
+    ) : (
+      children
+    );
+  const isDisabled = disabled || pending || !dialog.phraseMatches;
+  if (dialog.alert) {
+    return (
+      <AlertDialogAction size={size} {...props} disabled={isDisabled}>
+        {content}
+      </AlertDialogAction>
+    );
+  }
+  return (
+    <Button size={size ?? (dialog.size === "sm" ? "sm" : undefined)} {...props} disabled={isDisabled}>
+      {content}
+    </Button>
+  );
+}
+Action.displayName = "ConfirmDialog.Action";
+
+export type ConfirmDialogFieldProps = {
+  /** Replaces the whole label content. Default "Type <phrase> to confirm". */
+  label?: React.ReactNode;
+  /** Enter in the input, only while the phrase matches and not pending. */
+  onEnter?: () => void;
+  className?: string;
+  /** Spread onto the `Input`; `id` also sets the label `htmlFor`. */
+  inputProps?: Omit<React.ComponentProps<typeof Input>, "value" | "defaultValue" | "onChange">;
+};
+
+/** Type-to-confirm input bound to the Root `confirmPhrase`. */
+function Field({ label, onEnter, className, inputProps }: ConfirmDialogFieldProps) {
+  const { confirmPhrase = "", typed, setTyped, phraseMatches, pending } = useConfirmDialog();
+  const autoId = React.useId();
+  const { id = autoId, onKeyDown, ...rest } = inputProps ?? {};
+  return (
+    <div className={cn("space-y-2", className)}>
+      <label htmlFor={id} className={confirmFieldLabelClass}>
+        {label ?? (
+          <>
+            Type{" "}
+            <span className="font-mono text-foreground">{confirmPhrase}</span>{" "}
+            to confirm
+          </>
+        )}
+      </label>
+      <Input
+        id={id}
+        autoComplete="off"
+        autoFocus
+        value={typed}
+        onChange={(event) => setTyped(event.target.value)}
+        disabled={pending}
+        placeholder={confirmPhrase}
+        {...rest}
+        onKeyDown={(event) => {
+          onKeyDown?.(event);
+          if (event.key !== "Enter" || !phraseMatches || pending) return;
+          event.preventDefault();
+          onEnter?.();
+        }}
+      />
+    </div>
+  );
+}
+Field.displayName = "ConfirmDialog.Field";
+
+export const ConfirmDialogParts = {
+  Root,
+  Content,
+  Header,
+  Title,
+  Description,
+  Body,
+  Footer,
+  Cancel,
+  Action,
+  Field,
+};