@justanarthur/modo-ui 0.6.0-canary.8 → 0.6.0

package/components/navigation/tabs-subtle/index.tsx

@@ -1,512 +0,0 @@
-// biome-ignore-all lint: vendored upstream code keeps its own patterns (see the header)
-/*
- * Ported from Fluid Functionalism — github.com/mickadesign/fluid-functionalism
- * `registry/base/tabs-subtle.tsx` @ b3587bdbd83fc66c2a6aae3817ffb856cb09260b
- * MIT License © 2026 Micka Touillaud — fluidfunctionalism.com (notice: LICENSE.fluid-functionalism)
- * Local modifications: `"use client"` dropped; `@/lib/*` and `@/hooks/*`
- * imports rewritten to `../../../lib/*` (`SizeProvider` to
- * `../../../primitives/sizes`), `framer-motion` to `motion/react`; uncontrolled mode added — `selectedIndex` and `onSelect` are
- * optional, with a `defaultSelectedIndex` twin backed by
- * `useControllableState`; panels may now be written inside `<TabsSubtle>` —
- * the root partitions its children, renders only the tabs inside the tab list
- * and the `TabsSubtlePanel`s as its siblings right after it (the root element
- * IS the `role="tablist"`, so panels cannot nest in it), and a panel with no
- * `selectedIndex` / `idPrefix` of its own reads both from the TabsSubtle
- * context, with the prefix falling back to a `useId()` one; a panel rendered
- * outside `<TabsSubtle>` keeps taking them as props, exactly as upstream;
- * React 18 types: the tab list's ref write goes through `MutableRefObject`; modo
- * docs — TSDoc with FF's docs/API text, `TabsSubtle.Item` / `TabsSubtle.Panel`
- * statics (typed via a cast on the root), default export.
- * Styling reads DS tokens (AGENTS.md styling): inline `fontVariationSettings`
- * → `weight-*`; the hex focus-ring fallback → `ring-focus-ring` /
- * `border-focus-ring`; `duration-80|120|160` and tier-length JS durations →
- * `duration-<tier>` / `spring.*`.
- * The selected and hover pills are `GooIndicator`s (`lib/goo-indicator.tsx`,
- * local): they melt from tab to tab instead of sliding; the hover pill now
- * always returns to the selected tab as it fades.
- */
-
-import { Tabs } from '@base-ui/react/tabs'
-import { AnimatePresence, motion } from 'motion/react'
-import {
-  Children,
-  createContext,
-  type ForwardRefExoticComponent,
-  forwardRef,
-  type HTMLAttributes,
-  isValidElement,
-  type ReactNode,
-  type RefAttributes,
-  useCallback,
-  useContext,
-  useEffect,
-  useId,
-  useRef,
-  useState,
-} from 'react'
-import { GooIndicator } from '../../../lib/goo-indicator'
-import type { IconComponent } from '../../../lib/icon-context'
-import { useShape } from '../../../lib/shape-context'
-import { type SizeVariant, useSize } from '../../../lib/size-context'
-import { spring } from '../../../lib/springs'
-import { useControllableState } from '../../../lib/use-controllable-state'
-import { useFluidHover } from '../../../lib/use-fluid-hover'
-import { cn } from '../../../lib/utils'
-import { SizeProvider } from '../../../primitives/sizes'
-
-interface TabsSubtleContextValue {
-  registerTab: (index: number, element: HTMLElement | null) => void
-  hoveredIndex: number | null
-  selectedIndex: number
-  idPrefix: string | undefined
-  activeLabel: boolean
-}
-
-const TabsSubtleContext = createContext<TabsSubtleContextValue | null>(null)
-
-const isPanel = (child: ReactNode) => isValidElement(child) && child.type === TabsSubtlePanel
-
-function useTabsSubtle() {
-  const ctx = useContext(TabsSubtleContext)
-  if (!ctx) throw new Error('useTabsSubtle must be used within a TabsSubtle')
-  return ctx
-}
-
-interface TabsSubtleProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onSelect'> {
-  /** TabsSubtle.Item children, and optionally the TabsSubtle.Panel children they select. */
-  children: ReactNode
-  /** Index of the currently selected tab. Controlled — pair it with `onSelect`. */
-  selectedIndex?: number
-  /** Selected tab on first render when uncontrolled. Defaults to `0`. */
-  defaultSelectedIndex?: number
-  /** Called when a tab is selected. */
-  onSelect?: (index: number) => void
-  /** Prefix for ARIA IDs linking tabs to panels. Defaults to a generated one when panels are nested inside. */
-  idPrefix?: string
-  /** When true, only the selected tab shows its text label. Requires icons on tabs. Defaults to `false`. */
-  activeLabel?: boolean
-  /** Pins the tabs to one step of the size ladder (default 36px, compact 28px). Defaults to the surrounding SizeProvider. */
-  size?: SizeVariant
-}
-
-type TabsSubtleComponent = ForwardRefExoticComponent<TabsSubtleProps & RefAttributes<HTMLDivElement>> & {
-  Item: typeof TabsSubtleItem
-  Panel: typeof TabsSubtlePanel
-}
-
-/**
- * Tab navigation with smooth pill animations.
- *
- * A borderless tab strip: the selected pill melts from tab to tab like a drop
- * (the liquid indicators in Morph), a lighter hover pill previews the next one, and the active label animates to semibold
- * without shifting. With `activeLabel`, tabs collapse to their icon and the
- * selected one expands its label to a measured width. Base UI owns
- * `role="tablist"`, the roving tabindex and Arrow/Home/End navigation
- * (manual activation — arrows move, Enter or Space selects). Uncontrolled with
- * `defaultSelectedIndex`, or controlled with `selectedIndex` + `onSelect`.
- *
- * The root element is the tab list itself, so nested `TabsSubtle.Panel`
- * children are lifted out and rendered as its siblings, wired to the tabs
- * through a generated id prefix; panels rendered outside still take
- * `selectedIndex` and `idPrefix` as props.
- *
- * Statics:
- * - `TabsSubtle.Item` — one tab: `index`, `label`, optional `icon`.
- * - `TabsSubtle.Panel` — content for the tab with the same `index`.
- *
- * @example {@include ./examples.mdx}
- */
-const TabsSubtle = forwardRef<HTMLDivElement, TabsSubtleProps>(
-  (
-    {
-      children,
-      selectedIndex: selectedIndexProp,
-      defaultSelectedIndex = 0,
-      onSelect: onSelectProp,
-      idPrefix,
-      activeLabel = false,
-      size,
-      className,
-      ...props
-    },
-    ref,
-  ) => {
-    const [selectedIndex, onSelect] = useControllableState(selectedIndexProp, defaultSelectedIndex, onSelectProp)
-
-    // the root IS the tab list, so panels written inside it are rendered right after it
-    const childList = Children.toArray(children)
-    const panels = childList.filter(isPanel)
-    const tabs = childList.filter(child => !isPanel(child))
-    const generatedIdPrefix = useId()
-    const resolvedIdPrefix = idPrefix ?? (panels.length > 0 ? generatedIdPrefix : undefined)
-
-    const containerRef = useRef<HTMLDivElement>(null)
-    const isMouseInside = useRef(false)
-    const shape = useShape()
-
-    const {
-      activeIndex: hoveredIndex,
-      setActiveIndex: setHoveredIndex,
-      itemRects: tabRects,
-      handlers,
-      registerItem,
-      measureItems: measureTabs,
-    } = useFluidHover(containerRef, { axis: 'x' })
-
-    // Track tab elements locally so we can observe their individual resizes
-    const tabElementsRef = useRef(new Map<number, HTMLElement>())
-    const registerTab = useCallback(
-      (index: number, element: HTMLElement | null) => {
-        registerItem(index, element)
-        if (element) {
-          tabElementsRef.current.set(index, element)
-        } else {
-          tabElementsRef.current.delete(index)
-        }
-      },
-      [registerItem],
-    )
-
-    useEffect(() => {
-      measureTabs()
-    }, [measureTabs, children])
-
-    // Observe individual tab buttons for resize (label expand/collapse in activeLabel mode)
-    useEffect(() => {
-      const elements = tabElementsRef.current
-      if (elements.size === 0) return
-      const ro = new ResizeObserver(() => measureTabs())
-      elements.forEach(el => ro.observe(el))
-      return () => ro.disconnect()
-    }, [measureTabs, children])
-
-    // Wrap handlers to track isMouseInside
-    const handleMouseMove = useCallback(
-      (e: React.MouseEvent) => {
-        isMouseInside.current = true
-        handlers.onMouseMove(e)
-      },
-      [handlers],
-    )
-
-    const handleMouseLeave = useCallback(() => {
-      isMouseInside.current = false
-      handlers.onMouseLeave()
-    }, [handlers])
-
-    const [focusedIndex, setFocusedIndex] = useState<number | null>(null)
-
-    const selectedRect = tabRects[selectedIndex]
-    const hoverRect = hoveredIndex !== null ? tabRects[hoveredIndex] : null
-    const focusRect = focusedIndex !== null ? tabRects[focusedIndex] : null
-    const isHoveringSelected = hoveredIndex === selectedIndex
-    const isHovering = hoveredIndex !== null && !isHoveringSelected
-
-    const root = (
-      <TabsSubtleContext.Provider
-        value={{
-          registerTab,
-          hoveredIndex,
-          selectedIndex,
-          idPrefix: resolvedIdPrefix,
-          activeLabel,
-        }}
-      >
-        {/* Root is merged into List via `render` so a single <div> is emitted,
-            matching the previous DOM structure. Base UI owns role="tablist",
-            roving tabindex, and Arrow/Home/End keyboard navigation.
-            `activateOnFocus={false}` keeps manual activation: arrows move
-            focus, Enter/Space selects. */}
-        <Tabs.Root
-          value={selectedIndex}
-          onValueChange={value => {
-            if (typeof value === 'number') onSelect(value)
-          }}
-          render={
-            <Tabs.List
-              activateOnFocus={false}
-              ref={(node: HTMLDivElement | null) => {
-                // React 18 types: `useRef<T>(null)` is a read-only RefObject.
-                ;(containerRef as React.MutableRefObject<HTMLDivElement | null>).current = node
-                if (typeof ref === 'function') ref(node)
-                else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node
-              }}
-              onMouseMove={handleMouseMove}
-              onMouseLeave={handleMouseLeave}
-              onFocus={(e: React.FocusEvent<HTMLDivElement>) => {
-                const indexAttr = (e.target as HTMLElement)
-                  .closest('[data-fluid-hover-index]')
-                  ?.getAttribute('data-fluid-hover-index')
-                if (indexAttr != null) {
-                  const idx = Number(indexAttr)
-                  setHoveredIndex(idx)
-                  setFocusedIndex((e.target as HTMLElement).matches(':focus-visible') ? idx : null)
-                }
-              }}
-              onBlur={(e: React.FocusEvent<HTMLDivElement>) => {
-                if (containerRef.current?.contains(e.relatedTarget as Node)) return
-                setFocusedIndex(null)
-                if (isMouseInside.current) return
-                setHoveredIndex(null)
-              }}
-              className={cn(
-                // -mx-1 px-1 / -my-1 py-1 give the 2px-outset focus ring room
-                // to draw without being clipped by overflow-x-auto. The
-                // max-width allows for the negative margins: fit-content
-                // parents size against the margin box (8px narrower than the
-                // border box), so a plain max-w-full would clamp the list 8px
-                // too small and clip the first/last tab's ring.
-                'relative flex items-center select-none overflow-x-auto max-w-[calc(100%_+_8px)] scrollbar-hide -mx-1 px-1 -my-1 py-1',
-                className,
-              )}
-              {...props}
-            >
-              {selectedRect && (
-                <GooIndicator
-                  rect={selectedRect}
-                  className={cn('bg-active', shape.bg)}
-                  opacity={isHovering ? 0.8 : 1}
-                />
-              )}
-
-              {/* the hover pill rests on the selected tab, so it drips back into it as it fades */}
-              {selectedRect && (
-                <GooIndicator
-                  rect={isHovering && hoverRect ? hoverRect : selectedRect}
-                  className={cn('bg-active', shape.bg)}
-                  transition={spring.fast}
-                  opacity={isHovering ? 0.4 : 0}
-                />
-              )}
-
-              {/* Focus ring */}
-              <AnimatePresence>
-                {focusRect && (
-                  <motion.div
-                    className={cn('absolute pointer-events-none z-20 border border-focus-ring', shape.focusRing)}
-                    initial={false}
-                    animate={{
-                      left: focusRect.left - 2,
-                      top: focusRect.top - 2,
-                      width: focusRect.width + 4,
-                      height: focusRect.height + 4,
-                    }}
-                    exit={{ opacity: 0, transition: spring.fast.exit }}
-                    transition={{
-                      ...spring.fast,
-                      opacity: { duration: spring.fast.duration },
-                    }}
-                  />
-                )}
-              </AnimatePresence>
-
-              {tabs}
-            </Tabs.List>
-          }
-        />
-        {panels}
-      </TabsSubtleContext.Provider>
-    )
-
-    // A size prop pins every tab to one ladder step.
-    return size ? <SizeProvider size={size}>{root}</SizeProvider> : root
-  },
-) as TabsSubtleComponent
-
-TabsSubtle.displayName = 'TabsSubtle'
-
-interface TabsSubtleItemProps extends HTMLAttributes<HTMLButtonElement> {
-  /** Icon displayed in the tab. */
-  icon?: IconComponent
-  /** Text label for the tab. */
-  label: string
-  /** Position index within the tab list. */
-  index: number
-}
-
-const TabsSubtleItem = forwardRef<HTMLButtonElement, TabsSubtleItemProps>(
-  ({ icon: Icon, label, index, className, ...props }, ref) => {
-    const internalRef = useRef<HTMLButtonElement | null>(null)
-    // The collapsing label animates to a MEASURED layout width, not "auto":
-    // framer resolves an "auto" target from the element's *visual*
-    // (transformed) size, so under a scaled ancestor (e.g. /demo's card) the
-    // spring overshoots to scale-x the real width and snaps when "auto"
-    // lands. offsetWidth and ResizeObserver are transform-immune — same
-    // setup as the accordions' height animation.
-    const [labelWidth, setLabelWidth] = useState<number | null>(null)
-    const labelRoRef = useRef<ResizeObserver | null>(null)
-    const measureLabel = useCallback((el: HTMLSpanElement | null) => {
-      labelRoRef.current?.disconnect()
-      labelRoRef.current = null
-      if (!el) return
-      const update = () => setLabelWidth(el.offsetWidth)
-      update()
-      labelRoRef.current = new ResizeObserver(update)
-      labelRoRef.current.observe(el)
-    }, [])
-    const shape = useShape()
-    const sizeClasses = useSize()
-    const { registerTab, hoveredIndex, selectedIndex, idPrefix, activeLabel } = useTabsSubtle()
-
-    useEffect(() => {
-      registerTab(index, internalRef.current)
-      return () => registerTab(index, null)
-    }, [index, registerTab])
-
-    const isSelected = selectedIndex === index
-    const isActive = hoveredIndex === index || isSelected
-    const collapseLabel = activeLabel && !!Icon
-    const showLabel = !collapseLabel || isSelected
-
-    const labelContent = (
-      // Both stacked spans carry the text-box trim so the invisible bold
-      // sizer and the visible label keep identical boxes.
-      <span ref={measureLabel} className={cn('inline-grid whitespace-nowrap', sizeClasses.text)}>
-        <span
-          className="col-start-1 row-start-1 invisible [text-box:trim-both_cap_alphabetic] weight-semibold"
-          aria-hidden="true"
-        >
-          {label}
-        </span>
-        <span
-          className={cn(
-            'col-start-1 row-start-1 transition-[color,font-variation-settings] duration-fast [text-box:trim-both_cap_alphabetic]',
-            isActive ? 'text-foreground' : 'text-muted-foreground',
-            isSelected ? 'weight-semibold' : 'weight-normal',
-          )}
-        >
-          {label}
-        </span>
-      </span>
-    )
-
-    return (
-      // Base UI Tab renders a native <button type="button"> and wires
-      // role="tab", aria-selected, roving tabindex, and activation for us.
-      // id/aria-controls are only overridden when an idPrefix is supplied so
-      // externally rendered TabsSubtlePanel elements stay linked.
-      <Tabs.Tab
-        ref={(node: HTMLElement | null) => {
-          const button = node as HTMLButtonElement | null
-          internalRef.current = button
-          if (typeof ref === 'function') ref(button)
-          else if (ref) (ref as React.MutableRefObject<HTMLButtonElement | null>).current = button
-        }}
-        value={index}
-        data-fluid-hover-index={index}
-        id={idPrefix ? `${idPrefix}-tab-${index}` : undefined}
-        aria-controls={idPrefix ? `${idPrefix}-panel-${index}` : undefined}
-        aria-label={collapseLabel && !showLabel ? label : undefined}
-        className={cn(
-          // Fixed heights (was py-2 around a 19.5px line box ≈ 35.5px) so the
-          // text-box trim on the label doesn't shrink the tab. Standalone
-          // pills sit directly on the ladder's control height.
-          'relative z-10 flex items-center cursor-pointer bg-transparent border-none outline-none',
-          sizeClasses.control,
-          sizeClasses.px,
-          !collapseLabel && sizeClasses.gap,
-          shape.bg,
-          className,
-        )}
-        {...props}
-      >
-        {Icon && (
-          <Icon
-            size={sizeClasses.icon}
-            strokeWidth={isActive ? 2 : 1.5}
-            className={cn(
-              'shrink-0 transition-[color,stroke-width] duration-fast',
-              isActive ? 'text-foreground' : 'text-muted-foreground',
-            )}
-          />
-        )}
-        {collapseLabel ? (
-          <AnimatePresence initial={false}>
-            {showLabel && (
-              <motion.span
-                key="label"
-                className="overflow-hidden"
-                // Until the measurement lands, let CSS resolve the width
-                // instead of handing framer "auto": framer resolves an "auto"
-                // target from the element's *visual* size, so under a scaled
-                // ancestor (the /demo card, ~1.76x) it writes back a layout
-                // width that much too wide, then springs back down when the
-                // measured value arrives — the selected tab visibly pulses on
-                // arrival. Plain CSS auto is the true layout width, and the
-                // measured number that follows matches it exactly.
-                style={labelWidth == null ? { width: 'auto' } : undefined}
-                initial={{ width: 0, opacity: 0, marginLeft: 0 }}
-                animate={{
-                  ...(labelWidth != null ? { width: labelWidth } : null),
-                  opacity: 1,
-                  // Matches the ladder's icon-to-label gap (gap-2 / gap-1.5).
-                  marginLeft: sizeClasses.variant === 'compact' ? 6 : 8,
-                }}
-                exit={{ width: 0, opacity: 0, marginLeft: 0 }}
-                transition={{
-                  ...spring.fast,
-                  opacity: { duration: spring.fast.exit.duration },
-                }}
-              >
-                {labelContent}
-              </motion.span>
-            )}
-          </AnimatePresence>
-        ) : (
-          labelContent
-        )}
-      </Tabs.Tab>
-    )
-  },
-)
-
-TabsSubtleItem.displayName = 'TabsSubtleItem'
-
-interface TabsSubtlePanelProps extends HTMLAttributes<HTMLDivElement> {
-  /** Index of this panel; rendered only when it matches the selected tab. */
-  index: number
-  /** Currently selected tab index. Defaults to the enclosing TabsSubtle's selection. */
-  selectedIndex?: number
-  /** Must match the TabsSubtle idPrefix. Defaults to the enclosing TabsSubtle's prefix. */
-  idPrefix?: string
-  /** Panel content, only rendered when selected. */
-  children: ReactNode
-}
-
-// Written either inside <TabsSubtle> (the root lifts it out of the tab list
-// and it reads the selection from context) or outside it, next to the tabs
-// (then it takes `selectedIndex` and `idPrefix` as props, as upstream). Either
-// way it cannot use Base UI's Tabs.Panel — which needs the Tabs.Root context,
-// and that root is merged into the tab list — so it stays a plain tabpanel
-// linked to its tab through the shared idPrefix.
-const TabsSubtlePanel = forwardRef<HTMLDivElement, TabsSubtlePanelProps>(
-  ({ index, selectedIndex, idPrefix, children, className, ...props }, ref) => {
-    const ctx = useContext(TabsSubtleContext)
-    const resolvedSelectedIndex = selectedIndex ?? ctx?.selectedIndex ?? -1
-    const resolvedIdPrefix = idPrefix ?? ctx?.idPrefix
-    const isSelected = resolvedSelectedIndex === index
-
-    return (
-      <div
-        ref={ref}
-        id={resolvedIdPrefix ? `${resolvedIdPrefix}-panel-${index}` : undefined}
-        role="tabpanel"
-        aria-labelledby={resolvedIdPrefix ? `${resolvedIdPrefix}-tab-${index}` : undefined}
-        hidden={!isSelected}
-        tabIndex={-1}
-        className={cn('outline-none', className)}
-        {...props}
-      >
-        {isSelected && children}
-      </div>
-    )
-  },
-)
-
-TabsSubtlePanel.displayName = 'TabsSubtlePanel'
-
-Object.assign(TabsSubtle, { Item: TabsSubtleItem, Panel: TabsSubtlePanel })
-
-export type { TabsSubtleItemProps, TabsSubtlePanelProps, TabsSubtleProps }
-export { TabsSubtle, TabsSubtleItem, TabsSubtlePanel }
-export default TabsSubtle

package/components/overlays/alert-dialog/examples.mdx

@@ -1,123 +0,0 @@
-import AlertDialog from './index'
-import Button from '../../button'
-import Toast, { toast } from '../toast'
-import Dialog from '../dialog'
-import Tooltip from '../tooltip'
-import PendingDemo from './pending-demo'
-
-# Confirm a destructive step
-
-A press outside does nothing; the answer is Cancel, Delete or Escape.
-
-<AlertDialog>
-  <AlertDialog.Trigger render={<Button variant="secondary">Delete project</Button>} />
-  <AlertDialog.Content>
-    <AlertDialog.Header>
-      <AlertDialog.Title>Delete this project?</AlertDialog.Title>
-      <AlertDialog.Description>Its pages and history go with it. This can't be undone.</AlertDialog.Description>
-    </AlertDialog.Header>
-    <AlertDialog.Footer>
-      <AlertDialog.Close render={<Button variant="ghost">Cancel</Button>} />
-      <AlertDialog.Close render={<Button>Delete</Button>} />
-    </AlertDialog.Footer>
-  </AlertDialog.Content>
-</AlertDialog>
-
-# Wait for the confirm
-
-`AlertDialog.Action`'s `onClick` returns a promise: the button folds into a spinner, Cancel greys out and Escape does nothing until it settles, then the dialog closes.
-
-<AlertDialog>
-  <AlertDialog.Trigger render={<Button variant="secondary">Archive workspace</Button>} />
-  <AlertDialog.Content>
-    <AlertDialog.Header>
-      <AlertDialog.Title>Archive this workspace?</AlertDialog.Title>
-      <AlertDialog.Description>Members lose access until it is restored.</AlertDialog.Description>
-    </AlertDialog.Header>
-    <AlertDialog.Footer>
-      <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
-      <AlertDialog.Action onClick={() => new Promise(resolve => setTimeout(resolve, 1600))}>Archive</AlertDialog.Action>
-    </AlertDialog.Footer>
-  </AlertDialog.Content>
-</AlertDialog>
-
-# With a mutation's pending
-
-`pending` takes a mutation's `isPending`. A plain `onClick={() => mutate()}` then keeps the dialog open and locked while it runs, and closes it once `pending` falls back to false.
-
-<PendingDemo />
-
-# When it fails
-
-A rejected promise keeps the dialog open and hands the reason to `onError` — here a toast — so the person can try again or cancel.
-
-<Toast manager={toast} position="bottom-right">
-  <AlertDialog>
-    <AlertDialog.Trigger render={<Button variant="secondary">Delete account</Button>} />
-    <AlertDialog.Content>
-      <AlertDialog.Header>
-        <AlertDialog.Title>Delete your account?</AlertDialog.Title>
-        <AlertDialog.Description>Everything you made goes with it.</AlertDialog.Description>
-      </AlertDialog.Header>
-      <AlertDialog.Footer>
-        <AlertDialog.Cancel>Keep it</AlertDialog.Cancel>
-        <AlertDialog.Action
-          variant="destructive"
-          onClick={() => new Promise((resolve, reject) => setTimeout(() => reject(new Error('The server is busy')), 1400))}
-          onError={error => toast.error({ title: 'Could not delete', description: error.message })}
-        >
-          Delete
-        </AlertDialog.Action>
-      </AlertDialog.Footer>
-    </AlertDialog.Content>
-  </AlertDialog>
-</Toast>
-
-# From the pointer
-
-The same morph options as Dialog: here a circle grows from where you pressed.
-
-<AlertDialog>
-  <AlertDialog.Trigger render={<Button variant="secondary">Sign out</Button>} />
-  <AlertDialog.Content from="pointer" effect="morph">
-    <AlertDialog.Header>
-      <AlertDialog.Title>Sign out?</AlertDialog.Title>
-      <AlertDialog.Description>You'll need to sign in again on this device.</AlertDialog.Description>
-    </AlertDialog.Header>
-    <AlertDialog.Footer>
-      <AlertDialog.Close render={<Button variant="ghost">Stay</Button>} />
-      <AlertDialog.Close render={<Button>Sign out</Button>} />
-    </AlertDialog.Footer>
-  </AlertDialog.Content>
-</AlertDialog>
-
-# Inside a dialog
-
-Opened from a dialog, the alert lifts above it, and so does the tooltip on the button that opens it.
-
-<Dialog>
-  <Dialog.Trigger render={<Button variant="secondary">Project settings</Button>} />
-  <Dialog.Content>
-    <Dialog.Header>
-      <Dialog.Title>Project settings</Dialog.Title>
-      <Dialog.Description>Rename, transfer or delete this project.</Dialog.Description>
-    </Dialog.Header>
-    <Dialog.Footer>
-      <AlertDialog>
-        <Tooltip content="Removes it for everyone">
-          <AlertDialog.Trigger render={<Button variant="destructive">Delete project</Button>} />
-        </Tooltip>
-        <AlertDialog.Content>
-          <AlertDialog.Header>
-            <AlertDialog.Title>Delete this project?</AlertDialog.Title>
-            <AlertDialog.Description>Its pages and history go with it.</AlertDialog.Description>
-          </AlertDialog.Header>
-          <AlertDialog.Footer>
-            <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
-            <AlertDialog.Action variant="destructive" onClick={() => new Promise(resolve => setTimeout(resolve, 1200))}>Delete</AlertDialog.Action>
-          </AlertDialog.Footer>
-        </AlertDialog.Content>
-      </AlertDialog>
-    </Dialog.Footer>
-  </Dialog.Content>
-</Dialog>