Intermediate

import * as Dialog from "@radix-ui/react-dialog";
// => Dialog uses Portal for overlay rendering
 
export function PortalExample() {
  return (
    <div style={{ overflow: "hidden", height: 200, position: "relative" }}>
      {/* => Parent has overflow: hidden */}
      {/* => Without Portal, dialog content would be clipped */}
      <Dialog.Root>
        <Dialog.Trigger asChild>
          <button>Open (inside overflow:hidden parent)</button>
        </Dialog.Trigger>
        <Dialog.Portal>
          {/* => Portal: renders children at document.body */}
          {/* => Content escapes the overflow:hidden parent */}
          {/* => Default container: document.body */}
          <Dialog.Overlay />
          <Dialog.Content>
            <Dialog.Title>Portaled Content</Dialog.Title>
            <Dialog.Description>
              This dialog renders at document.body, not inside the overflow:hidden parent. It is fully visible.
            </Dialog.Description>
            <Dialog.Close asChild>
              <button>Close</button>
            </Dialog.Close>
          </Dialog.Content>
        </Dialog.Portal>
      </Dialog.Root>
    </div>
  );
}
// => Without Portal: content clipped by overflow:hidden
// => With Portal: content visible at document.body
// => Focus management still works (Radix tracks focus across portal)
// => Event bubbling still works (React synthetic events span portals)

import * as Popover from "@radix-ui/react-popover";
import { useRef } from "react";
// => useRef to reference a custom container
 
export function CustomPortalContainer() {
  const containerRef = useRef<HTMLDivElement>(null);
  // => ref: points to our custom portal target
 
  return (
    <div>
      <div
        ref={containerRef}
        style={{
          position: "relative",
          border: "2px dashed #ccc",
          padding: 16,
          minHeight: 200,
        }}
      >
        {/* => Custom portal container */}
        {/* => Popover content renders HERE, not document.body */}
        <p>Portal content renders inside this box:</p>
      </div>
      <Popover.Root>
        <Popover.Trigger asChild>
          <button>Show Info</button>
        </Popover.Trigger>
        <Popover.Portal container={containerRef.current}>
          {/* => container: custom DOM element for portal */}
          {/* => Popover renders inside containerRef div */}
          {/* => Useful for scoped styling or containment */}
          <Popover.Content side="bottom" sideOffset={8}>
            <p>This popover is inside the dashed box.</p>
            <Popover.Arrow />
          </Popover.Content>
        </Popover.Portal>
      </Popover.Root>
    </div>
  );
}
// => container={null}: renders at document.body (default)
// => container={element}: renders inside specified element
// => Useful for: shadow DOM, iframes, CSS containment
// => Scoped CSS: portal content inherits container's styles
// => React context: portal content shares React tree context

import * as Dialog from "@radix-ui/react-dialog";
// => Dialog manages scroll lock automatically
 
export function ScrollLockDialog() {
  return (
    <Dialog.Root>
      <Dialog.Trigger asChild>
        <button>Open (body scroll locked)</button>
      </Dialog.Trigger>
      <Dialog.Portal>
        <Dialog.Overlay
          style={{
            position: "fixed",
            inset: 0,
            // => inset: 0 = top/right/bottom/left: 0
            backgroundColor: "rgba(0, 0, 0, 0.5)",
            // => Semi-transparent backdrop
          }}
        />
        <Dialog.Content
          style={{
            position: "fixed",
            top: "50%",
            left: "50%",
            transform: "translate(-50%, -50%)",
            // => Centers dialog in viewport
            backgroundColor: "white",
            padding: 24,
            borderRadius: 8,
            maxHeight: "85vh",
            overflowY: "auto",
            // => Content scrolls if taller than 85vh
            // => Body scroll is locked (no scroll behind overlay)
          }}
          onOpenAutoFocus={(event) => {
            // => Called when dialog opens
            // => Default: focuses first focusable element
            // => Override to focus a specific element
            event.preventDefault();
            // => Prevents auto-focus (you manage focus manually)
          }}
        >
          <Dialog.Title>Long Content Dialog</Dialog.Title>
          <Dialog.Description>The page behind this dialog cannot scroll.</Dialog.Description>
          {Array.from({ length: 30 }, (_, i) => (
            <p key={i}>Line {i + 1} of scrollable dialog content</p>
          ))}
          {/* => 30 paragraphs: dialog content scrolls */}
          {/* => Body behind overlay: scroll locked */}
          <Dialog.Close asChild>
            <button>Close</button>
          </Dialog.Close>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  );
}
// => Radix adds overflow:hidden to document.body when dialog opens
// => Removes overflow:hidden when dialog closes
// => Preserves scroll position (no jump on open/close)
// => Dialog content can scroll independently (overflowY: auto)
// => This is standard WAI-ARIA dialog behavior

import * as Dialog from "@radix-ui/react-dialog";
import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
import * as Tooltip from "@radix-ui/react-tooltip";
// => Three overlay types at once
 
export function StackedOverlays() {
  return (
    <Tooltip.Provider>
      <Dialog.Root>
        <Dialog.Trigger asChild>
          <button>Open Dialog</button>
        </Dialog.Trigger>
        <Dialog.Portal>
          <Dialog.Overlay style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.3)" }} />
          <Dialog.Content
            style={{
              position: "fixed",
              top: "50%",
              left: "50%",
              transform: "translate(-50%,-50%)",
              background: "white",
              padding: 24,
            }}
          >
            <Dialog.Title>Layer 1: Dialog</Dialog.Title>
            <Dialog.Description>This dialog contains a dropdown menu.</Dialog.Description>
            <DropdownMenu.Root>
              {/* => Layer 2: Dropdown inside Dialog */}
              <DropdownMenu.Trigger asChild>
                <button>Actions Menu</button>
              </DropdownMenu.Trigger>
              <DropdownMenu.Portal>
                <DropdownMenu.Content sideOffset={4}>
                  <DropdownMenu.Item onSelect={() => console.log("Edit")}>Edit</DropdownMenu.Item>
                  <DropdownMenu.Item onSelect={() => console.log("Delete")}>Delete</DropdownMenu.Item>
                </DropdownMenu.Content>
              </DropdownMenu.Portal>
            </DropdownMenu.Root>
            <Tooltip.Root>
              {/* => Tooltip inside dialog */}
              <Tooltip.Trigger asChild>
                <button aria-label="Help">?</button>
              </Tooltip.Trigger>
              <Tooltip.Portal>
                <Tooltip.Content side="right" sideOffset={4}>
                  Click the menu for actions.
                  <Tooltip.Arrow />
                </Tooltip.Content>
              </Tooltip.Portal>
            </Tooltip.Root>
            <Dialog.Close asChild>
              <button>Close Dialog</button>
            </Dialog.Close>
          </Dialog.Content>
        </Dialog.Portal>
      </Dialog.Root>
    </Tooltip.Provider>
  );
}
// => Stacking order (visual): Tooltip > Dropdown > Dialog > Page
// => Escape closes innermost: Dropdown first, then Dialog
// => Focus: Dialog traps focus, Dropdown manages within trap
// => Tooltip appears above all layers automatically
// => Radix manages z-index and stacking internally

import * as Dialog from "@radix-ui/react-dialog";
// => Dialog with CSS animations
 
const animationStyles = `
  .dialog-overlay[data-state="open"] {
    animation: overlayShow 200ms ease-out;
    /* => Fade in overlay on open */
  }
  .dialog-overlay[data-state="closed"] {
    animation: overlayHide 200ms ease-in;
    /* => Fade out overlay on close */
  }
  .dialog-content[data-state="open"] {
    animation: contentShow 300ms cubic-bezier(0.16, 1, 0.3, 1);
    /* => Scale + fade in content on open */
    /* => Ease-out curve for natural feel */
  }
  .dialog-content[data-state="closed"] {
    animation: contentHide 200ms ease-in;
    /* => Scale + fade out content on close */
  }
 
  @keyframes overlayShow {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  @keyframes overlayHide {
    from { opacity: 1; }
    to { opacity: 0; }
  }
  @keyframes contentShow {
    from {
      opacity: 0;
      transform: translate(-50%, -48%) scale(0.96);
      /* => Starts slightly above and smaller */
    }
    to {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
      /* => Ends centered at full size */
    }
  }
  @keyframes contentHide {
    from {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }
    to {
      opacity: 0;
      transform: translate(-50%, -48%) scale(0.96);
    }
  }
`;
// => data-state="open" triggers enter animation
// => data-state="closed" triggers exit animation
// => Radix waits for exit animation to complete before unmounting
 
export function AnimatedDialog() {
  return (
    <>
      <style>{animationStyles}</style>
      <Dialog.Root>
        <Dialog.Trigger asChild>
          <button>Open Animated Dialog</button>
        </Dialog.Trigger>
        <Dialog.Portal>
          <Dialog.Overlay
            className="dialog-overlay"
            // => data-state="open" | "closed" set by Radix
            style={{ position: "fixed", inset: 0, backgroundColor: "rgba(0,0,0,0.5)" }}
          />
          <Dialog.Content
            className="dialog-content"
            // => data-state drives CSS animation
            style={{
              position: "fixed",
              top: "50%",
              left: "50%",
              backgroundColor: "white",
              padding: 24,
              borderRadius: 8,
            }}
          >
            <Dialog.Title>Animated Dialog</Dialog.Title>
            <Dialog.Description>This dialog has enter and exit animations.</Dialog.Description>
            <Dialog.Close asChild>
              <button>Close</button>
            </Dialog.Close>
          </Dialog.Content>
        </Dialog.Portal>
      </Dialog.Root>
    </>
  );
}
// => Radix detects CSS animations on data-state="closed"
// => Waits for animation to finish before removing from DOM
// => No JavaScript animation library needed
// => No onAnimationEnd callback management

import * as Tooltip from "@radix-ui/react-tooltip";
// => Tooltip with CSS transition animation
 
const transitionStyles = `
  .tooltip-content {
    /* => Base styles with transition declarations */
    padding: 8px 12px;
    background: #333;
    color: white;
    border-radius: 4px;
    /* => Transition properties for smooth animation */
    animation-duration: 200ms;
    animation-timing-function: ease-out;
  }
  .tooltip-content[data-state="delayed-open"] {
    animation-name: tooltipFadeIn;
    /* => delayed-open: tooltip opened after delay */
  }
  .tooltip-content[data-state="closed"] {
    animation-name: tooltipFadeOut;
    /* => closed: tooltip closing */
  }
  .tooltip-content[data-side="top"] {
    animation-name: slideFromBottom;
    /* => Slides up when positioned above trigger */
  }
  .tooltip-content[data-side="bottom"] {
    animation-name: slideFromTop;
    /* => Slides down when positioned below trigger */
  }
 
  @keyframes tooltipFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  @keyframes tooltipFadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
  }
  @keyframes slideFromBottom {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes slideFromTop {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
  }
`;
// => data-side: "top" | "bottom" | "left" | "right"
// => Changes based on collision detection repositioning
// => Animations adapt to actual rendered position
 
export function AnimatedTooltip() {
  return (
    <>
      <style>{transitionStyles}</style>
      <Tooltip.Provider>
        <Tooltip.Root>
          <Tooltip.Trigger asChild>
            <button>Hover me</button>
          </Tooltip.Trigger>
          <Tooltip.Portal>
            <Tooltip.Content
              className="tooltip-content"
              side="top"
              sideOffset={4}
              // => data-side reflects ACTUAL rendered side
              // => May differ from requested side due to collision
            >
              Tooltip with directional animation
              <Tooltip.Arrow />
            </Tooltip.Content>
          </Tooltip.Portal>
        </Tooltip.Root>
      </Tooltip.Provider>
    </>
  );
}
// => data-side adapts animation direction to actual position
// => If tooltip flips from top to bottom, animation changes
// => No JavaScript needed to detect position changes
// => CSS handles all animation logic via attribute selectors

import * as Accordion from "@radix-ui/react-accordion";
// => Accordion with height animation
 
const accordionStyles = `
  .accordion-content {
    overflow: hidden;
    /* => Required: clips content during animation */
  }
  .accordion-content[data-state="open"] {
    animation: accordionOpen 300ms cubic-bezier(0.87, 0, 0.13, 1);
    /* => Smooth ease-in-out curve */
  }
  .accordion-content[data-state="closed"] {
    animation: accordionClose 300ms cubic-bezier(0.87, 0, 0.13, 1);
  }
 
  @keyframes accordionOpen {
    from {
      height: 0;
      /* => Starts collapsed */
    }
    to {
      height: var(--radix-accordion-content-height);
      /* => Ends at measured content height */
      /* => Radix sets this CSS variable automatically */
      /* => Value updates if content size changes */
    }
  }
  @keyframes accordionClose {
    from {
      height: var(--radix-accordion-content-height);
      /* => Starts at full content height */
    }
    to {
      height: 0;
      /* => Collapses to zero */
    }
  }
`;
// => --radix-accordion-content-height: measured by Radix
// => Updates dynamically if content size changes
// => Works with variable-length content
 
export function AnimatedAccordion() {
  return (
    <>
      <style>{accordionStyles}</style>
      <Accordion.Root type="single" collapsible>
        <Accordion.Item value="item-1">
          <Accordion.Header>
            <Accordion.Trigger>Section 1</Accordion.Trigger>
          </Accordion.Header>
          <Accordion.Content className="accordion-content">
            {/* => overflow:hidden + height animation */}
            <div style={{ padding: 16 }}>
              <p>Short content for section 1.</p>
            </div>
          </Accordion.Content>
        </Accordion.Item>
        <Accordion.Item value="item-2">
          <Accordion.Header>
            <Accordion.Trigger>Section 2</Accordion.Trigger>
          </Accordion.Header>
          <Accordion.Content className="accordion-content">
            <div style={{ padding: 16 }}>
              <p>This section has more content.</p>
              <p>The animation height adjusts automatically.</p>
              <p>No fixed height needed in CSS.</p>
            </div>
          </Accordion.Content>
        </Accordion.Item>
      </Accordion.Root>
    </>
  );
}
// => Each section animates to its OWN content height
// => No hardcoded max-height values
// => Works with dynamic content (fetched data, user input)
// => --radix-accordion-content-width also available

import * as Accordion from "@radix-ui/react-accordion";
// => Accordion styled with Tailwind data-state selectors
 
export function TailwindAccordion() {
  return (
    <Accordion.Root type="single" collapsible className="w-full max-w-md">
      {/* => Tailwind width utilities */}
      <Accordion.Item value="item-1" className="border-b">
        <Accordion.Header>
          <Accordion.Trigger
            className="flex w-full items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180"
            // => [&[data-state=open]>svg]:rotate-180
            // => When trigger has data-state="open",
            // => rotate child SVG 180 degrees
            // => Arbitrary Tailwind selector syntax
          >
            Is it accessible?
            <svg
              className="h-4 w-4 shrink-0 transition-transform duration-200"
              // => transition-transform: smooth rotation
              // => duration-200: 200ms animation
              viewBox="0 0 24 24"
              aria-hidden="true"
            >
              <path d="M6 9l6 6 6-6" />
            </svg>
          </Accordion.Trigger>
        </Accordion.Header>
        <Accordion.Content
          className="data-[state=open]:animate-accordion-down data-[state=closed]:animate-accordion-up overflow-hidden"
          // => data-[state=open]: Tailwind data attribute selector
          // => animate-accordion-down: custom Tailwind animation
          // => Defined in tailwind.config.js
        >
          <div className="pt-0 pb-4">Yes. Radix follows WAI-ARIA design patterns.</div>
        </Accordion.Content>
      </Accordion.Item>
    </Accordion.Root>
  );
}
// => Tailwind data-state selectors:
// => data-[state=open]:className   - applied when open
// => data-[state=closed]:className - applied when closed
// => [&[data-state=open]]:className - parent state selector
// => No custom CSS file needed for state-based styling
// =>
// => tailwind.config.js animation setup:
// => keyframes: { 'accordion-down': { from: { height: '0' },
// =>   to: { height: 'var(--radix-accordion-content-height)' } } }
// => animation: { 'accordion-down': 'accordion-down 0.2s ease-out' }

import * as Dialog from "@radix-ui/react-dialog";
import { useState } from "react";
// => Controlled dialog with forceMount
 
export function ForceMountedDialog() {
  const [open, setOpen] = useState(false);
  // => Controlled state for dialog
 
  return (
    <Dialog.Root open={open} onOpenChange={setOpen}>
      <Dialog.Trigger asChild>
        <button>Open</button>
      </Dialog.Trigger>
      <Dialog.Portal forceMount>
        {/* => forceMount: keeps portal content in DOM always */}
        {/* => Without forceMount: content unmounts when closed */}
        {/* => With forceMount: content stays, you control visibility */}
        <Dialog.Overlay
          forceMount
          // => forceMount on each sub-component
          style={{
            position: "fixed",
            inset: 0,
            backgroundColor: "rgba(0,0,0,0.5)",
            // => Manual visibility control:
            opacity: open ? 1 : 0,
            pointerEvents: open ? "auto" : "none",
            // => pointerEvents: "none" prevents interaction when hidden
            transition: "opacity 300ms ease",
          }}
        />
        <Dialog.Content
          forceMount
          style={{
            position: "fixed",
            top: "50%",
            left: "50%",
            transform: `translate(-50%, -50%) scale(${open ? 1 : 0.95})`,
            // => Scale based on open state
            opacity: open ? 1 : 0,
            pointerEvents: open ? "auto" : "none",
            transition: "opacity 300ms ease, transform 300ms ease",
            backgroundColor: "white",
            padding: 24,
            borderRadius: 8,
          }}
        >
          <Dialog.Title>Force Mounted</Dialog.Title>
          <Dialog.Description>This content is always in the DOM.</Dialog.Description>
          <Dialog.Close asChild>
            <button>Close</button>
          </Dialog.Close>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  );
}
// => forceMount: element stays in DOM regardless of open state
// => You manage visibility via CSS (opacity, pointerEvents)
// => Required for: Framer Motion AnimatePresence
// => Required for: React Spring useTransition
// => Required for: measuring content before first open
// => Trade-off: more DOM elements, but enables advanced animations

import * as Select from "@radix-ui/react-select";
// => Select with entry/exit animations
 
const selectStyles = `
  .select-content {
    overflow: hidden;
    background: white;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
  .select-content[data-state="open"] {
    animation: selectOpen 200ms ease-out;
  }
  .select-content[data-state="closed"] {
    animation: selectClose 150ms ease-in;
  }
  .select-item {
    padding: 8px 12px;
    cursor: default;
    outline: none;
  }
  .select-item[data-highlighted] {
    background: #0173B2;
    color: white;
    /* => data-highlighted: keyboard/mouse hover state */
    /* => Uses accessible blue from palette */
  }
  .select-item[data-disabled] {
    opacity: 0.5;
    /* => data-disabled: grayed out item */
  }
 
  @keyframes selectOpen {
    from { opacity: 0; transform: scale(0.96) translateY(-4px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
  }
  @keyframes selectClose {
    from { opacity: 1; transform: scale(1) translateY(0); }
    to { opacity: 0; transform: scale(0.96) translateY(-4px); }
  }
`;
// => data-highlighted: item under keyboard/mouse focus
// => data-disabled: item cannot be selected
 
export function AnimatedSelect() {
  return (
    <>
      <style>{selectStyles}</style>
      <Select.Root defaultValue="react">
        <Select.Trigger className="select-trigger" aria-label="Framework">
          <Select.Value placeholder="Choose framework" />
          <Select.Icon />
        </Select.Trigger>
        <Select.Portal>
          <Select.Content className="select-content" position="popper" sideOffset={4}>
            <Select.Viewport>
              <Select.Item value="react" className="select-item">
                <Select.ItemText>React</Select.ItemText>
                <Select.ItemIndicator>V</Select.ItemIndicator>
              </Select.Item>
              <Select.Item value="vue" className="select-item">
                <Select.ItemText>Vue</Select.ItemText>
                <Select.ItemIndicator>V</Select.ItemIndicator>
              </Select.Item>
              <Select.Item value="angular" className="select-item" disabled>
                <Select.ItemText>Angular (unavailable)</Select.ItemText>
                <Select.ItemIndicator>V</Select.ItemIndicator>
              </Select.Item>
              <Select.Item value="svelte" className="select-item">
                <Select.ItemText>Svelte</Select.ItemText>
                <Select.ItemIndicator>V</Select.ItemIndicator>
              </Select.Item>
            </Select.Viewport>
          </Select.Content>
        </Select.Portal>
      </Select.Root>
    </>
  );
}
// => data-highlighted styles the keyboard-focused item
// => data-disabled grays out unavailable options
// => Animations use data-state for enter/exit
// => position="popper" enables side/sideOffset positioning

import * as Switch from "@radix-ui/react-switch";
import * as Select from "@radix-ui/react-select";
import * as Checkbox from "@radix-ui/react-checkbox";
import * as Label from "@radix-ui/react-label";
// => Radix form controls
// => Assumes: npm install react-hook-form
 
// NOTE: This example requires react-hook-form to be installed
// import { useForm, Controller } from "react-hook-form";
 
// Type definition for form values
interface SettingsForm {
  theme: string;
  notifications: boolean;
  terms: boolean;
}
 
export function HookFormExample() {
  // => useForm manages form state, validation, submission
  // const { control, handleSubmit } = useForm<SettingsForm>({
  //   defaultValues: {
  //     theme: "light",
  //     notifications: true,
  //     terms: false,
  //   },
  // });
 
  // Simulated form handler for self-contained example
  const handleSubmit = (onSubmit: (data: SettingsForm) => void) => {
    return (e: React.FormEvent) => {
      e.preventDefault();
      // => In real code, react-hook-form handles this
      onSubmit({ theme: "dark", notifications: true, terms: true });
    };
  };
 
  const onSubmit = (data: SettingsForm) => {
    console.log("Form data:", data);
    // => Output: Form data: { theme: "dark", notifications: true, terms: true }
  };
 
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {/* Controller wraps Radix components for react-hook-form */}
      {/* <Controller
        name="theme"
        control={control}
        render={({ field }) => (
          <Select.Root
            value={field.value}
            onValueChange={field.onChange}
          >
            <Select.Trigger>
              <Select.Value />
            </Select.Trigger>
            <Select.Portal>
              <Select.Content>
                <Select.Viewport>
                  <Select.Item value="light"><Select.ItemText>Light</Select.ItemText></Select.Item>
                  <Select.Item value="dark"><Select.ItemText>Dark</Select.ItemText></Select.Item>
                </Select.Viewport>
              </Select.Content>
            </Select.Portal>
          </Select.Root>
        )}
      /> */}
 
      {/* Switch integration pattern */}
      {/* <Controller
        name="notifications"
        control={control}
        render={({ field }) => (
          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
            <Switch.Root
              checked={field.value}
              onCheckedChange={field.onChange}
              ref={field.ref}
            >
              <Switch.Thumb />
            </Switch.Root>
            <Label.Root>Notifications</Label.Root>
          </div>
        )}
      /> */}
 
      {/* Checkbox integration pattern */}
      {/* <Controller
        name="terms"
        control={control}
        render={({ field }) => (
          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
            <Checkbox.Root
              checked={field.value}
              onCheckedChange={field.onChange}
              ref={field.ref}
            >
              <Checkbox.Indicator>V</Checkbox.Indicator>
            </Checkbox.Root>
            <Label.Root>Accept terms</Label.Root>
          </div>
        )}
      /> */}
 
      <button type="submit">Save Settings</button>
    </form>
  );
}
// => Pattern: Controller render prop bridges react-hook-form and Radix
// => field.value -> Radix value/checked prop
// => field.onChange -> Radix onValueChange/onCheckedChange
// => field.ref -> Radix ref (for focus management)
// => All validation, dirty tracking, error handling from react-hook-form

import * as Select from "@radix-ui/react-select";
import * as Checkbox from "@radix-ui/react-checkbox";
import * as Label from "@radix-ui/react-label";
import { useState } from "react";
// => Form with validation errors
 
interface FormErrors {
  country?: string;
  terms?: string;
}
 
export function ValidatedForm() {
  const [errors, setErrors] = useState<FormErrors>({});
  const [country, setCountry] = useState("");
  const [terms, setTerms] = useState(false);
  // => Form state and errors
 
  const validate = (): boolean => {
    const newErrors: FormErrors = {};
    // => Build error object
    if (!country) {
      newErrors.country = "Please select a country.";
      // => Country is required
    }
    if (!terms) {
      newErrors.terms = "You must accept the terms.";
      // => Terms must be checked
    }
    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
    // => Returns true if no errors
  };
 
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (validate()) {
      console.log("Valid:", { country, terms });
      // => Output: Valid: { country: "us", terms: true }
    }
  };
 
  return (
    <form onSubmit={handleSubmit} noValidate>
      {/* => noValidate: disables browser validation (we handle it) */}
      <div>
        <Label.Root htmlFor="country-select">Country</Label.Root>
        <Select.Root
          value={country}
          onValueChange={(value) => {
            setCountry(value);
            setErrors((prev) => ({ ...prev, country: undefined }));
            // => Clear error on selection
          }}
        >
          <Select.Trigger
            id="country-select"
            aria-invalid={!!errors.country}
            // => aria-invalid: indicates validation error
            aria-describedby={errors.country ? "country-error" : undefined}
            // => aria-describedby: links to error message
          >
            <Select.Value placeholder="Select country" />
          </Select.Trigger>
          <Select.Portal>
            <Select.Content>
              <Select.Viewport>
                <Select.Item value="us">
                  <Select.ItemText>United States</Select.ItemText>
                </Select.Item>
                <Select.Item value="gb">
                  <Select.ItemText>United Kingdom</Select.ItemText>
                </Select.Item>
              </Select.Viewport>
            </Select.Content>
          </Select.Portal>
        </Select.Root>
        {errors.country && (
          <span id="country-error" role="alert" style={{ color: "#c00" }}>
            {/* => role="alert": screen readers announce immediately */}
            {/* => id: matches aria-describedby on trigger */}
            {errors.country}
          </span>
        )}
      </div>
      <div style={{ display: "flex", alignItems: "center", gap: 8, marginTop: 16 }}>
        <Checkbox.Root
          id="terms-check"
          checked={terms}
          onCheckedChange={(checked) => {
            setTerms(!!checked);
            setErrors((prev) => ({ ...prev, terms: undefined }));
          }}
          aria-invalid={!!errors.terms}
          aria-describedby={errors.terms ? "terms-error" : undefined}
        >
          <Checkbox.Indicator>V</Checkbox.Indicator>
        </Checkbox.Root>
        <Label.Root htmlFor="terms-check">Accept terms and conditions</Label.Root>
      </div>
      {errors.terms && (
        <span id="terms-error" role="alert" style={{ color: "#c00" }}>
          {errors.terms}
        </span>
      )}
      <button type="submit" style={{ marginTop: 16 }}>
        Submit
      </button>
    </form>
  );
}
// => aria-invalid: signals error state to screen readers
// => aria-describedby: links control to error message
// => role="alert": error message announced immediately
// => Clear errors on valid input (responsive validation)
// => Pattern works with any Radix form control

import * as Slider from "@radix-ui/react-slider";
import { useState } from "react";
// => Slider with range selection
 
export function PriceRangeSlider() {
  const [range, setRange] = useState([200, 800]);
  // => range: [min, max] thumb positions
  // => Two values = two thumbs
 
  return (
    <div>
      <label id="price-label">
        Price: ${range[0]} - ${range[1]}
        {/* => Display current range values */}
      </label>
      <Slider.Root
        value={range}
        // => Array of two values creates two thumbs
        onValueChange={setRange}
        // => Updates both values: [newMin, newMax]
        min={0}
        max={1000}
        step={10}
        // => step: 10 = moves in $10 increments
        minStepsBetweenThumbs={1}
        // => Prevents thumbs from overlapping
        // => Minimum gap: 1 step ($10)
        aria-labelledby="price-label"
      >
        <Slider.Track>
          {/* => Full track rail */}
          <Slider.Range />
          {/* => Range: filled area BETWEEN the two thumbs */}
          {/* => Visually highlights the selected range */}
        </Slider.Track>
        <Slider.Thumb aria-label="Minimum price" />
        {/* => First thumb: controls range[0] */}
        <Slider.Thumb aria-label="Maximum price" />
        {/* => Second thumb: controls range[1] */}
        {/* => Each thumb is independently keyboard-controllable */}
      </Slider.Root>
    </div>
  );
}
// => Two Slider.Thumb elements = range slider
// => Slider.Range fills between thumbs (not from min)
// => minStepsBetweenThumbs prevents invalid ranges
// => Each thumb has independent aria-label
// => Keyboard: Tab between thumbs, Arrow keys to adjust
// => Thumbs cannot cross each other

import * as ContextMenu from "@radix-ui/react-context-menu";
// => Install: npm install @radix-ui/react-context-menu
 
export function FileContextMenu() {
  return (
    <ContextMenu.Root>
      {/* => Root manages context menu state */}
      <ContextMenu.Trigger asChild>
        <div
          style={{
            border: "2px dashed #ccc",
            padding: 32,
            textAlign: "center",
            userSelect: "none",
            // => userSelect: "none" prevents text selection on right-click
          }}
        >
          Right-click this area
          {/* => Right-click (or long-press on mobile) opens menu */}
        </div>
      </ContextMenu.Trigger>
      <ContextMenu.Portal>
        <ContextMenu.Content>
          <ContextMenu.Item onSelect={() => console.log("Copy")}>
            Copy
            <span style={{ marginLeft: "auto", opacity: 0.6 }}>Ctrl+C</span>
            {/* => Keyboard shortcut hint */}
          </ContextMenu.Item>
          <ContextMenu.Item onSelect={() => console.log("Paste")}>
            Paste
            <span style={{ marginLeft: "auto", opacity: 0.6 }}>Ctrl+V</span>
          </ContextMenu.Item>
          <ContextMenu.Separator />
          {/* => Visual divider */}
          <ContextMenu.Sub>
            {/* => Submenu for nested options */}
            <ContextMenu.SubTrigger>
              Share
              <span style={{ marginLeft: "auto" }}>&gt;</span>
              {/* => Arrow indicates submenu */}
            </ContextMenu.SubTrigger>
            <ContextMenu.Portal>
              <ContextMenu.SubContent sideOffset={4}>
                <ContextMenu.Item onSelect={() => console.log("Email")}>Email</ContextMenu.Item>
                <ContextMenu.Item onSelect={() => console.log("Slack")}>Slack</ContextMenu.Item>
              </ContextMenu.SubContent>
            </ContextMenu.Portal>
          </ContextMenu.Sub>
          <ContextMenu.Separator />
          <ContextMenu.CheckboxItem checked={true} onCheckedChange={(checked) => console.log("Show hidden:", checked)}>
            <ContextMenu.ItemIndicator>V</ContextMenu.ItemIndicator>
            Show Hidden Files
            {/* => Toggleable checkbox item in context menu */}
          </ContextMenu.CheckboxItem>
        </ContextMenu.Content>
      </ContextMenu.Portal>
    </ContextMenu.Root>
  );
}
// => Right-click: opens context menu at cursor position
// => Long-press: opens on mobile/touch devices
// => Keyboard: same navigation as DropdownMenu
// => Sub: nested submenu opens on hover or ArrowRight
// => CheckboxItem: toggleable boolean option
// => RadioGroup available for exclusive options (same as DropdownMenu)

import * as NavigationMenu from "@radix-ui/react-navigation-menu";
// => Install: npm install @radix-ui/react-navigation-menu
 
export function SiteNavigation() {
  return (
    <NavigationMenu.Root>
      {/* => Root: top-level navigation container */}
      <NavigationMenu.List>
        {/* => List: horizontal menu bar */}
        <NavigationMenu.Item>
          <NavigationMenu.Trigger>
            Products
            {/* => Trigger: opens content panel on hover/click */}
          </NavigationMenu.Trigger>
          <NavigationMenu.Content>
            {/* => Content: dropdown panel for this item */}
            <ul style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8, padding: 16 }}>
              <li>
                <NavigationMenu.Link href="/products/analytics" asChild>
                  <a>
                    <strong>Analytics</strong>
                    <p>Track user behavior.</p>
                  </a>
                </NavigationMenu.Link>
              </li>
              <li>
                <NavigationMenu.Link href="/products/automation" asChild>
                  <a>
                    <strong>Automation</strong>
                    <p>Automate workflows.</p>
                  </a>
                </NavigationMenu.Link>
              </li>
            </ul>
          </NavigationMenu.Content>
        </NavigationMenu.Item>
        <NavigationMenu.Item>
          <NavigationMenu.Trigger>Resources</NavigationMenu.Trigger>
          <NavigationMenu.Content>
            <ul style={{ padding: 16 }}>
              <li>
                <NavigationMenu.Link href="/docs" asChild>
                  <a>Documentation</a>
                </NavigationMenu.Link>
              </li>
              <li>
                <NavigationMenu.Link href="/blog" asChild>
                  <a>Blog</a>
                </NavigationMenu.Link>
              </li>
            </ul>
          </NavigationMenu.Content>
        </NavigationMenu.Item>
        <NavigationMenu.Item>
          {/* => Simple link item (no dropdown) */}
          <NavigationMenu.Link href="/pricing" asChild>
            <a>Pricing</a>
          </NavigationMenu.Link>
        </NavigationMenu.Item>
        <NavigationMenu.Indicator />
        {/* => Indicator: visual highlight under active item */}
        {/* => Animates between items on hover */}
        {/* => Style with CSS for bottom border or arrow effect */}
      </NavigationMenu.List>
      <NavigationMenu.Viewport />
      {/* => Viewport: container where content panels render */}
      {/* => Positioned below the navigation list */}
      {/* => Content swaps smoothly within the viewport */}
    </NavigationMenu.Root>
  );
}
// => Hover: opens content panel after brief delay
// => Keyboard: ArrowLeft/Right between top-level items
// => Keyboard: ArrowDown enters content panel
// => Keyboard: Tab navigates links within content
// => Keyboard: Escape closes content, returns to trigger
// => Indicator animates between active items
// => Viewport provides smooth content transitions

import * as Dialog from "@radix-ui/react-dialog";
import { useRef } from "react";
// => useRef for manual focus target
 
export function CustomFocusDialog() {
  const saveButtonRef = useRef<HTMLButtonElement>(null);
  // => ref: points to the save button for initial focus
 
  return (
    <Dialog.Root>
      <Dialog.Trigger asChild>
        <button>Edit Profile</button>
      </Dialog.Trigger>
      <Dialog.Portal>
        <Dialog.Overlay style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.3)" }} />
        <Dialog.Content
          style={{
            position: "fixed",
            top: "50%",
            left: "50%",
            transform: "translate(-50%,-50%)",
            background: "white",
            padding: 24,
          }}
          onOpenAutoFocus={(event) => {
            // => Fires when dialog opens and focus is about to move
            event.preventDefault();
            // => Prevents default (focusing first focusable element)
            saveButtonRef.current?.focus();
            // => Focuses the save button instead
            // => Useful when the first element is "Cancel"
          }}
          onCloseAutoFocus={(event) => {
            // => Fires when dialog closes and focus returns
            // => Default: return focus to trigger
            // => Override to focus a different element
            console.log("Dialog closed, focus restoring");
          }}
        >
          <Dialog.Title>Edit Profile</Dialog.Title>
          <Dialog.Description>Make changes to your profile.</Dialog.Description>
          <input placeholder="Display name" />
          {/* => First focusable element (default focus target) */}
          {/* => But we override to focus Save button instead */}
          <input placeholder="Email" />
          <div style={{ display: "flex", gap: 8, marginTop: 16 }}>
            <Dialog.Close asChild>
              <button>Cancel</button>
            </Dialog.Close>
            <button
              ref={saveButtonRef}
              // => ref: save button for manual focus
              onClick={() => console.log("Saved")}
            >
              Save Changes
            </button>
          </div>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  );
}
// => onOpenAutoFocus: customize initial focus target
// => onCloseAutoFocus: customize where focus goes after close
// => event.preventDefault() on either disables default behavior
// => Use case: focus Save button (primary action) instead of first input
// => Use case: focus a specific element after dialog close

import * as Toolbar from "@radix-ui/react-toolbar";
// => Install: npm install @radix-ui/react-toolbar
import * as ToggleGroup from "@radix-ui/react-toggle-group";
import * as Separator from "@radix-ui/react-separator";
// => Toolbar sub-components
 
export function EditorToolbar() {
  return (
    <Toolbar.Root
      aria-label="Text formatting"
      // => aria-label: describes the toolbar
      orientation="horizontal"
      // => orientation: "horizontal" | "vertical"
      // => Controls ArrowLeft/Right vs ArrowUp/Down navigation
    >
      {/* => role="toolbar" */}
      <Toolbar.ToggleGroup
        type="multiple"
        aria-label="Text style"
        // => Toggle group inside toolbar
      >
        <Toolbar.ToggleItem value="bold" aria-label="Bold">
          {/* => ToggleItem: part of toolbar keyboard navigation */}
          <strong>B</strong>
        </Toolbar.ToggleItem>
        <Toolbar.ToggleItem value="italic" aria-label="Italic">
          <em>I</em>
        </Toolbar.ToggleItem>
        <Toolbar.ToggleItem value="underline" aria-label="Underline">
          <u>U</u>
        </Toolbar.ToggleItem>
      </Toolbar.ToggleGroup>
      <Toolbar.Separator />
      {/* => Visual separator between tool groups */}
      <Toolbar.ToggleGroup type="single" defaultValue="left" aria-label="Text alignment">
        <Toolbar.ToggleItem value="left" aria-label="Align left">
          L
        </Toolbar.ToggleItem>
        <Toolbar.ToggleItem value="center" aria-label="Align center">
          C
        </Toolbar.ToggleItem>
        <Toolbar.ToggleItem value="right" aria-label="Align right">
          R
        </Toolbar.ToggleItem>
      </Toolbar.ToggleGroup>
      <Toolbar.Separator />
      <Toolbar.Button
        onClick={() => console.log("Insert link")}
        // => Regular button (not toggle) in toolbar
      >
        Link
      </Toolbar.Button>
      <Toolbar.Link href="/help" target="_blank">
        {/* => Link element in toolbar */}
        Help
      </Toolbar.Link>
    </Toolbar.Root>
  );
}
// => Keyboard: ArrowLeft/Right moves between tools
// => Keyboard: Tab leaves toolbar entirely
// => Only ONE tool is in Tab order (roving tabindex)
// => Toolbar.ToggleGroup: grouped toggles within toolbar
// => Toolbar.Button: action button in toolbar
// => Toolbar.Link: navigation link in toolbar
// => Toolbar.Separator: visual divider between groups

import * as Menubar from "@radix-ui/react-menubar";
// => Install: npm install @radix-ui/react-menubar
 
export function AppMenubar() {
  return (
    <Menubar.Root>
      {/* => role="menubar" */}
      {/* => Horizontal menu bar container */}
      <Menubar.Menu>
        {/* => Single menu in the bar */}
        <Menubar.Trigger>File</Menubar.Trigger>
        {/* => Menu label that opens dropdown */}
        <Menubar.Portal>
          <Menubar.Content sideOffset={4} align="start">
            <Menubar.Item onSelect={() => console.log("New")}>
              New File
              <span style={{ marginLeft: "auto", opacity: 0.6 }}>Ctrl+N</span>
            </Menubar.Item>
            <Menubar.Item onSelect={() => console.log("Open")}>
              Open...
              <span style={{ marginLeft: "auto", opacity: 0.6 }}>Ctrl+O</span>
            </Menubar.Item>
            <Menubar.Separator />
            <Menubar.Sub>
              <Menubar.SubTrigger>
                Recent Files
                <span style={{ marginLeft: "auto" }}>&gt;</span>
              </Menubar.SubTrigger>
              <Menubar.Portal>
                <Menubar.SubContent>
                  <Menubar.Item>document.tsx</Menubar.Item>
                  <Menubar.Item>styles.css</Menubar.Item>
                </Menubar.SubContent>
              </Menubar.Portal>
            </Menubar.Sub>
            <Menubar.Separator />
            <Menubar.Item onSelect={() => console.log("Quit")}>
              Quit
              <span style={{ marginLeft: "auto", opacity: 0.6 }}>Ctrl+Q</span>
            </Menubar.Item>
          </Menubar.Content>
        </Menubar.Portal>
      </Menubar.Menu>
      <Menubar.Menu>
        <Menubar.Trigger>Edit</Menubar.Trigger>
        <Menubar.Portal>
          <Menubar.Content sideOffset={4} align="start">
            <Menubar.Item disabled>
              Undo
              <span style={{ marginLeft: "auto", opacity: 0.6 }}>Ctrl+Z</span>
            </Menubar.Item>
            <Menubar.Item>
              Redo
              <span style={{ marginLeft: "auto", opacity: 0.6 }}>Ctrl+Y</span>
            </Menubar.Item>
            <Menubar.Separator />
            <Menubar.Item>Cut</Menubar.Item>
            <Menubar.Item>Copy</Menubar.Item>
            <Menubar.Item>Paste</Menubar.Item>
          </Menubar.Content>
        </Menubar.Portal>
      </Menubar.Menu>
      <Menubar.Menu>
        <Menubar.Trigger>View</Menubar.Trigger>
        <Menubar.Portal>
          <Menubar.Content sideOffset={4} align="start">
            <Menubar.CheckboxItem checked={true}>
              <Menubar.ItemIndicator>V</Menubar.ItemIndicator>
              Show Sidebar
            </Menubar.CheckboxItem>
            <Menubar.CheckboxItem checked={false}>
              <Menubar.ItemIndicator>V</Menubar.ItemIndicator>
              Show Minimap
            </Menubar.CheckboxItem>
          </Menubar.Content>
        </Menubar.Portal>
      </Menubar.Menu>
    </Menubar.Root>
  );
}
// => ArrowLeft/Right: moves between menu triggers
// => ArrowDown: opens menu, focuses first item
// => ArrowRight on SubTrigger: opens submenu
// => Hover: opening one menu enables hover-open on siblings
// => Escape: closes menu, returns to trigger
// => CheckboxItem: toggleable options in menus
// => Full desktop application menu keyboard experience

import * as Dialog from "@radix-ui/react-dialog";
import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
// => Dialog + Dropdown for focus trap testing
 
export function FocusTrapDemo() {
  return (
    <Dialog.Root>
      <Dialog.Trigger asChild>
        <button>Open Dialog</button>
        {/* => Tab order: this button is focusable */}
      </Dialog.Trigger>
      <Dialog.Portal>
        <Dialog.Overlay style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.3)" }} />
        <Dialog.Content
          style={{
            position: "fixed",
            top: "50%",
            left: "50%",
            transform: "translate(-50%,-50%)",
            background: "white",
            padding: 24,
          }}
        >
          <Dialog.Title>Focus Trap Test</Dialog.Title>
          <Dialog.Description>Tab cycles only through elements inside this dialog.</Dialog.Description>
          <input placeholder="First input" />
          {/* => Focus trap: Tab cycles through dialog elements */}
          {/* => Cannot Tab to elements outside dialog */}
          <input placeholder="Second input" />
          <DropdownMenu.Root>
            <DropdownMenu.Trigger asChild>
              <button>Actions</button>
              {/* => Dropdown trigger inside focus trap */}
            </DropdownMenu.Trigger>
            <DropdownMenu.Portal>
              <DropdownMenu.Content sideOffset={4}>
                {/* => Dropdown content is INSIDE the focus trap */}
                {/* => Radix extends focus trap to include portal content */}
                <DropdownMenu.Item onSelect={() => console.log("Copy")}>Copy</DropdownMenu.Item>
                <DropdownMenu.Item onSelect={() => console.log("Delete")}>Delete</DropdownMenu.Item>
              </DropdownMenu.Content>
            </DropdownMenu.Portal>
          </DropdownMenu.Root>
          <Dialog.Close asChild>
            <button>Close</button>
            {/* => Last focusable element */}
            {/* => Tab from here goes back to first input */}
          </Dialog.Close>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  );
}
// => Focus trap sequence: First input -> Second input -> Actions -> Close
// => Tab wraps: Close -> First input (cycles)
// => Shift+Tab wraps: First input -> Close (reverse cycles)
// => Opening dropdown: focus enters dropdown items
// => Closing dropdown: focus returns to dropdown trigger
// => Focus NEVER leaves the dialog (unless dialog closes)
// => Portal content is included in the focus trap

import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
import { useEffect, useCallback } from "react";
// => useEffect for global keyboard listener
 
export function MenuWithShortcuts() {
  const handleCopy = useCallback(() => {
    console.log("Copy action triggered");
    // => Output: Copy action triggered
  }, []);
 
  const handlePaste = useCallback(() => {
    console.log("Paste action triggered");
    // => Output: Paste action triggered
  }, []);
 
  useEffect(() => {
    const handleKeyDown = (event: KeyboardEvent) => {
      // => Global keyboard shortcut listener
      if ((event.ctrlKey || event.metaKey) && event.key === "c") {
        // => Ctrl+C (Windows) or Cmd+C (Mac)
        // => Do NOT preventDefault -- allow native copy
        handleCopy();
      }
      if ((event.ctrlKey || event.metaKey) && event.key === "v") {
        // => Ctrl+V or Cmd+V
        handlePaste();
      }
    };
    window.addEventListener("keydown", handleKeyDown);
    // => Attach global listener
    return () => window.removeEventListener("keydown", handleKeyDown);
    // => Cleanup on unmount
  }, [handleCopy, handlePaste]);
 
  return (
    <DropdownMenu.Root>
      <DropdownMenu.Trigger asChild>
        <button>Edit</button>
      </DropdownMenu.Trigger>
      <DropdownMenu.Portal>
        <DropdownMenu.Content sideOffset={4}>
          <DropdownMenu.Item onSelect={handleCopy}>
            {/* => Same handler for menu item and keyboard shortcut */}
            Copy
            <span style={{ marginLeft: "auto", opacity: 0.6 }}>Ctrl+C</span>
            {/* => Visual hint only -- not functional */}
            {/* => Actual shortcut handled by useEffect above */}
          </DropdownMenu.Item>
          <DropdownMenu.Item onSelect={handlePaste}>
            Paste
            <span style={{ marginLeft: "auto", opacity: 0.6 }}>Ctrl+V</span>
          </DropdownMenu.Item>
        </DropdownMenu.Content>
      </DropdownMenu.Portal>
    </DropdownMenu.Root>
  );
}
// => Menu shortcut text is display-only (not functional)
// => Real shortcuts implemented via global useEffect listener
// => Both menu click and keyboard shortcut call same handler
// => Pattern: shared handler functions, separate trigger mechanisms
// => Radix does NOT implement actual keyboard shortcuts
// => You implement shortcuts and display hints independently

import * as Toast from "@radix-ui/react-toast";
import { useState, useRef, useCallback } from "react";
// => Install: npm install @radix-ui/react-toast
 
export function ToastDemo() {
  const [open, setOpen] = useState(false);
  const timerRef = useRef(0);
  // => ref: tracks timeout for cleanup
 
  const showToast = useCallback(() => {
    setOpen(false);
    // => Close existing toast first
    window.clearTimeout(timerRef.current);
    // => Clear any pending timeout
    timerRef.current = window.setTimeout(() => {
      setOpen(true);
      // => Open new toast after brief delay
      // => Delay ensures close/open transition
    }, 100);
  }, []);
 
  return (
    <Toast.Provider swipeDirection="right" duration={5000}>
      {/* => Provider wraps all toasts */}
      {/* => swipeDirection: "right" | "left" | "up" | "down" */}
      {/* => duration: auto-dismiss after 5000ms */}
      <button onClick={showToast}>Save Changes</button>
      <Toast.Root
        open={open}
        onOpenChange={setOpen}
        // => Controlled toast state
      >
        <Toast.Title>Changes saved</Toast.Title>
        {/* => Toast heading */}
        <Toast.Description>Your profile has been updated successfully.</Toast.Description>
        {/* => Toast body text */}
        <Toast.Action altText="Undo changes" asChild>
          {/* => altText: screen reader text for the action */}
          {/* => Required for accessibility */}
          <button>Undo</button>
        </Toast.Action>
        <Toast.Close aria-label="Dismiss notification" asChild>
          <button>X</button>
          {/* => Manual dismiss button */}
        </Toast.Close>
      </Toast.Root>
      <Toast.Viewport
        style={{
          position: "fixed",
          bottom: 24,
          right: 24,
          // => Viewport position: bottom-right corner
          display: "flex",
          flexDirection: "column",
          gap: 8,
          width: 380,
          maxWidth: "100vw",
          zIndex: 50,
        }}
      />
      {/* => Viewport: container where toasts render */}
      {/* => Position it where you want toasts to appear */}
      {/* => Multiple toasts stack within the viewport */}
    </Toast.Provider>
  );
}
// => Toast lifecycle: appear -> auto-dismiss (5s) or manual close
// => Swipe to dismiss on touch devices
// => Action button: must have altText for screen readers
// => Viewport: fixed position container for all toasts
// => Multiple toasts stack vertically in viewport
// => role="status" (polite announcement to screen readers)

import * as Dialog from "@radix-ui/react-dialog";
import { useState } from "react";
// => Dialog + step state management
 
export function WizardDialog() {
  const [step, setStep] = useState(1);
  // => step: current wizard step (1, 2, or 3)
 
  const handleOpenChange = (open: boolean) => {
    if (!open) {
      setStep(1);
      // => Reset to step 1 when dialog closes
      // => Ensures clean state on next open
    }
  };
 
  return (
    <Dialog.Root onOpenChange={handleOpenChange}>
      <Dialog.Trigger asChild>
        <button>Start Setup</button>
      </Dialog.Trigger>
      <Dialog.Portal>
        <Dialog.Overlay style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.3)" }} />
        <Dialog.Content
          style={{
            position: "fixed",
            top: "50%",
            left: "50%",
            transform: "translate(-50%,-50%)",
            background: "white",
            padding: 24,
            minWidth: 400,
          }}
          onEscapeKeyDown={(event) => {
            if (step > 1) {
              event.preventDefault();
              // => Prevent dialog close if past step 1
              setStep(step - 1);
              // => Go back to previous step instead
            }
          }}
        >
          <Dialog.Title>
            Setup Wizard - Step {step} of 3{/* => Dynamic title shows progress */}
          </Dialog.Title>
          <Dialog.Description>
            {step === 1 && "Enter your personal information."}
            {step === 2 && "Choose your preferences."}
            {step === 3 && "Review and confirm your settings."}
          </Dialog.Description>
          {/* Step content */}
          {step === 1 && (
            <div>
              <input placeholder="Full name" />
              <input placeholder="Email" />
            </div>
          )}
          {step === 2 && (
            <div>
              <label>
                <input type="checkbox" /> Enable notifications
              </label>
              <label>
                <input type="checkbox" /> Dark mode
              </label>
            </div>
          )}
          {step === 3 && (
            <div>
              <p>Review your settings and click Finish.</p>
            </div>
          )}
          {/* Navigation buttons */}
          <div style={{ display: "flex", gap: 8, marginTop: 16, justifyContent: "flex-end" }}>
            {step > 1 && <button onClick={() => setStep(step - 1)}>Back</button>}
            {step < 3 ? (
              <button onClick={() => setStep(step + 1)}>Next</button>
            ) : (
              <Dialog.Close asChild>
                <button>Finish</button>
                {/* => Final step closes dialog */}
              </Dialog.Close>
            )}
          </div>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  );
}
// => Step state resets when dialog closes (onOpenChange)
// => Escape goes back one step (not close dialog)
// => onEscapeKeyDown prevents close on steps 2-3
// => Dialog.Close only on final step
// => Focus trap maintained across all steps
// => Title and description update per step

import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
import { useState } from "react";
// => DropdownMenu with stateful items
 
export function ViewOptionsMenu() {
  const [showGrid, setShowGrid] = useState(true);
  const [showLabels, setShowLabels] = useState(true);
  const [sortBy, setSortBy] = useState("name");
  // => State for checkbox and radio items
 
  return (
    <DropdownMenu.Root>
      <DropdownMenu.Trigger asChild>
        <button>View Options</button>
      </DropdownMenu.Trigger>
      <DropdownMenu.Portal>
        <DropdownMenu.Content sideOffset={4}>
          <DropdownMenu.Label>Display</DropdownMenu.Label>
          {/* => Label: non-interactive group heading */}
          <DropdownMenu.CheckboxItem
            checked={showGrid}
            onCheckedChange={setShowGrid}
            // => Toggle boolean state
          >
            <DropdownMenu.ItemIndicator>V</DropdownMenu.ItemIndicator>
            {/* => Indicator: check icon when checked */}
            Show Grid
          </DropdownMenu.CheckboxItem>
          <DropdownMenu.CheckboxItem checked={showLabels} onCheckedChange={setShowLabels}>
            <DropdownMenu.ItemIndicator>V</DropdownMenu.ItemIndicator>
            Show Labels
          </DropdownMenu.CheckboxItem>
          <DropdownMenu.Separator />
          <DropdownMenu.Label>Sort By</DropdownMenu.Label>
          <DropdownMenu.RadioGroup
            value={sortBy}
            onValueChange={setSortBy}
            // => Exclusive selection (one at a time)
          >
            <DropdownMenu.RadioItem value="name">
              <DropdownMenu.ItemIndicator>*</DropdownMenu.ItemIndicator>
              {/* => Dot/bullet when selected */}
              Name
            </DropdownMenu.RadioItem>
            <DropdownMenu.RadioItem value="date">
              <DropdownMenu.ItemIndicator>*</DropdownMenu.ItemIndicator>
              Date Modified
            </DropdownMenu.RadioItem>
            <DropdownMenu.RadioItem value="size">
              <DropdownMenu.ItemIndicator>*</DropdownMenu.ItemIndicator>
              Size
            </DropdownMenu.RadioItem>
          </DropdownMenu.RadioGroup>
        </DropdownMenu.Content>
      </DropdownMenu.Portal>
    </DropdownMenu.Root>
  );
}
// => CheckboxItem: toggleable boolean (checked/unchecked)
// => RadioGroup + RadioItem: exclusive selection (one active)
// => Menu stays open during checkbox/radio interactions
// => CheckboxItem: role="menuitemcheckbox"
// => RadioItem: role="menuitemradio"
// => ItemIndicator: visible only when item is selected
// => Screen readers: "Show Grid, menu item checkbox, checked"

import * as Popover from "@radix-ui/react-popover";
import * as RadioGroup from "@radix-ui/react-radio-group";
import * as VisuallyHidden from "@radix-ui/react-visually-hidden";
import { useState } from "react";
// => Three Radix primitives composing into a color picker
 
const COLORS = [
  { value: "blue", hex: "#0173B2", label: "Blue" },
  { value: "orange", hex: "#DE8F05", label: "Orange" },
  { value: "teal", hex: "#029E73", label: "Teal" },
  { value: "purple", hex: "#CC78BC", label: "Purple" },
  { value: "brown", hex: "#CA9161", label: "Brown" },
];
// => Accessible color palette
 
export function ColorPicker() {
  const [color, setColor] = useState("blue");
  // => Currently selected color
 
  const selectedHex = COLORS.find((c) => c.value === color)?.hex ?? "#0173B2";
  // => Look up hex value for display
 
  return (
    <Popover.Root>
      <Popover.Trigger asChild>
        <button
          style={{ display: "flex", alignItems: "center", gap: 8 }}
          aria-label={`Color: ${color}. Click to change.`}
          // => Describes current selection
        >
          <span
            style={{
              width: 24,
              height: 24,
              borderRadius: 4,
              backgroundColor: selectedHex,
              border: "2px solid #333",
              // => Color swatch showing current selection
            }}
            aria-hidden="true"
            // => Decorative: color conveyed through aria-label
          />
          {color}
        </button>
      </Popover.Trigger>
      <Popover.Portal>
        <Popover.Content side="bottom" sideOffset={8}>
          <VisuallyHidden.Root>
            <p>Choose a color</p>
            {/* => Screen reader instruction */}
          </VisuallyHidden.Root>
          <RadioGroup.Root
            value={color}
            onValueChange={setColor}
            // => RadioGroup for exclusive color selection
            aria-label="Color selection"
            style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 4 }}
          >
            {COLORS.map((c) => (
              <RadioGroup.Item
                key={c.value}
                value={c.value}
                aria-label={c.label}
                // => aria-label: "Blue", "Orange", etc.
                style={{
                  width: 32,
                  height: 32,
                  borderRadius: "50%",
                  backgroundColor: c.hex,
                  border: color === c.value ? "3px solid #000" : "2px solid #ccc",
                  // => Thick border indicates selection
                  // => NOT relying on color alone (border width changes)
                  cursor: "pointer",
                }}
              >
                <VisuallyHidden.Root>
                  <RadioGroup.Indicator />
                  {/* => Indicator hidden but accessible */}
                </VisuallyHidden.Root>
              </RadioGroup.Item>
            ))}
          </RadioGroup.Root>
          <Popover.Arrow />
        </Popover.Content>
      </Popover.Portal>
    </Popover.Root>
  );
}
// => Popover: floating panel for color grid
// => RadioGroup: exclusive selection with keyboard navigation
// => VisuallyHidden: screen reader text and indicator
// => aria-label on each color: accessible without seeing color
// => Border width change: selection visible without color perception
// => Keyboard: ArrowKeys navigate colors, Space selects

import * as AlertDialog from "@radix-ui/react-alert-dialog";
import { useState } from "react";
// => AlertDialog with async confirmation
 
export function AsyncDeleteDialog() {
  const [isDeleting, setIsDeleting] = useState(false);
  const [error, setError] = useState<string | null>(null);
  // => Loading and error state
 
  const handleDelete = async () => {
    setIsDeleting(true);
    setError(null);
    // => Start loading, clear previous errors
 
    try {
      // Simulated API call
      await new Promise((resolve, reject) => {
        setTimeout(() => {
          // => Simulate success or failure
          Math.random() > 0.3 ? resolve(null) : reject(new Error("Network error"));
        }, 1500);
      });
      // => API call succeeded
      console.log("Deleted successfully");
      // => Dialog closes automatically (controlled state)
    } catch (err) {
      setError(err instanceof Error ? err.message : "Unknown error");
      // => Show error, keep dialog open for retry
      console.log("Delete failed:", err);
    } finally {
      setIsDeleting(false);
      // => End loading state regardless of outcome
    }
  };
 
  return (
    <AlertDialog.Root>
      <AlertDialog.Trigger asChild>
        <button>Delete Project</button>
      </AlertDialog.Trigger>
      <AlertDialog.Portal>
        <AlertDialog.Overlay style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.3)" }} />
        <AlertDialog.Content
          style={{
            position: "fixed",
            top: "50%",
            left: "50%",
            transform: "translate(-50%,-50%)",
            background: "white",
            padding: 24,
          }}
          onEscapeKeyDown={(event) => {
            if (isDeleting) {
              event.preventDefault();
              // => Prevent close during async operation
            }
          }}
          onPointerDownOutside={(event) => {
            if (isDeleting) {
              event.preventDefault();
              // => Prevent close during async operation
            }
          }}
        >
          <AlertDialog.Title>Delete Project</AlertDialog.Title>
          <AlertDialog.Description>
            This will permanently delete the project and all its data. This action cannot be undone.
          </AlertDialog.Description>
          {error && (
            <p role="alert" style={{ color: "#c00", marginTop: 8 }}>
              {/* => role="alert" announces error to screen readers */}
              Error: {error}. Please try again.
            </p>
          )}
          <div style={{ display: "flex", gap: 8, justifyContent: "flex-end", marginTop: 16 }}>
            <AlertDialog.Cancel
              asChild
              disabled={isDeleting}
              // => Disable cancel during operation
            >
              <button disabled={isDeleting}>Cancel</button>
            </AlertDialog.Cancel>
            <AlertDialog.Action asChild>
              <button
                onClick={(event) => {
                  event.preventDefault();
                  // => Prevent default Action behavior (close dialog)
                  // => We close manually after async success
                  handleDelete();
                }}
                disabled={isDeleting}
              >
                {isDeleting ? "Deleting..." : "Delete"}
                {/* => Loading indicator in button text */}
              </button>
            </AlertDialog.Action>
          </div>
        </AlertDialog.Content>
      </AlertDialog.Portal>
    </AlertDialog.Root>
  );
}
// => event.preventDefault() on Action: prevents auto-close
// => onEscapeKeyDown + onPointerDownOutside: prevent close during loading
// => disabled on buttons: prevents double-click
// => role="alert" on error: immediate screen reader announcement
// => Loading state shown in button text
// => Dialog stays open on error for retry
// => Pattern: prevent default close, manage close manually