Beginner

// => Install: npm install @radix-ui/react-dialog
import * as Dialog from "@radix-ui/react-dialog";
// => Imports all Dialog compound components
// => Dialog.Root, Dialog.Trigger, Dialog.Portal, Dialog.Overlay,
// => Dialog.Content, Dialog.Title, Dialog.Description, Dialog.Close
 
export function MyFirstDialog() {
  // => Functional component using Dialog primitive
  return (
    <Dialog.Root>
      {/* => Root manages open/close state internally */}
      {/* => No useState needed for basic usage (uncontrolled) */}
      <Dialog.Trigger asChild>
        {/* => asChild merges props onto child element */}
        {/* => Instead of rendering a <button> wrapper */}
        <button>Open Dialog</button>
        {/* => Renders: <button data-state="closed">Open Dialog</button> */}
      </Dialog.Trigger>
      <Dialog.Portal>
        {/* => Portals content to document.body */}
        {/* => Escapes parent overflow/z-index constraints */}
        <Dialog.Overlay />
        {/* => Renders backdrop overlay behind dialog */}
        {/* => data-state="open" | "closed" for CSS animations */}
        <Dialog.Content>
          {/* => The modal container */}
          {/* => Traps focus automatically (WAI-ARIA compliant) */}
          <Dialog.Title>Welcome</Dialog.Title>
          {/* => Required for accessibility (aria-labelledby) */}
          <Dialog.Description>
            {/* => Optional but recommended (aria-describedby) */}
            This is your first Radix UI dialog.
          </Dialog.Description>
          <Dialog.Close asChild>
            {/* => Close button restores focus to trigger */}
            <button>Got it</button>
          </Dialog.Close>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  );
}
// => Renders: A button that opens an accessible modal dialog
// => Pressing Escape closes the dialog automatically
// => Clicking overlay closes the dialog automatically
// => Focus returns to trigger button on close

import * as Dialog from "@radix-ui/react-dialog";
// => Dialog compound components
 
// WITHOUT asChild - Radix renders its own <button>
function WithoutAsChild() {
  // => Default behavior: Radix wraps content in a button
  return (
    <Dialog.Root>
      <Dialog.Trigger>
        {/* => Renders: <button>Open</button> */}
        {/* => Radix creates the <button> element */}
        Open
      </Dialog.Trigger>
      <Dialog.Portal>
        <Dialog.Overlay />
        <Dialog.Content>
          <Dialog.Title>Example</Dialog.Title>
          <Dialog.Close>Close</Dialog.Close>
          {/* => Renders: <button>Close</button> */}
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  );
}
 
// WITH asChild - Radix merges onto YOUR element
function WithAsChild() {
  // => asChild pattern: you control the rendered element
  return (
    <Dialog.Root>
      <Dialog.Trigger asChild>
        {/* => asChild: merges Radix props onto child */}
        {/* => Child MUST forward ref (use forwardRef or native element) */}
        <a href="#open-dialog">Open as Link</a>
        {/* => Renders: <a href="#open-dialog" data-state="closed" */}
        {/* =>           aria-haspopup="dialog">Open as Link</a> */}
        {/* => The <a> gets all Radix behavior (click, keyboard, ARIA) */}
      </Dialog.Trigger>
      <Dialog.Portal>
        <Dialog.Overlay />
        <Dialog.Content>
          <Dialog.Title>Example</Dialog.Title>
          <Dialog.Close asChild>
            <span role="button" tabIndex={0}>
              {/* => Custom close element */}
              {/* => Radix adds onClick, onKeyDown handlers */}
              Dismiss
            </span>
          </Dialog.Close>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  );
}
// => asChild enables polymorphic rendering
// => Use any element or component as the trigger/close
// => Critical for design system flexibility

import * as Dialog from "@radix-ui/react-dialog";
import { useState } from "react";
// => useState for controlled mode
 
// UNCONTROLLED - Radix manages state internally
function UncontrolledDialog() {
  // => No state needed -- Radix tracks open/close
  return (
    <Dialog.Root>
      {/* => Root manages open state internally */}
      {/* => defaultOpen={false} is the implicit default */}
      <Dialog.Trigger asChild>
        <button>Open</button>
      </Dialog.Trigger>
      <Dialog.Portal>
        <Dialog.Overlay />
        <Dialog.Content>
          <Dialog.Title>Uncontrolled</Dialog.Title>
          <Dialog.Description>Radix manages this dialog's state automatically.</Dialog.Description>
          <Dialog.Close asChild>
            <button>Close</button>
          </Dialog.Close>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  );
}
 
// CONTROLLED - You manage state with useState
function ControlledDialog() {
  const [open, setOpen] = useState(false);
  // => open: current dialog state (boolean)
  // => setOpen: function to update state
 
  const handleSave = () => {
    // => Custom logic before closing
    console.log("Saving data...");
    // => Output: Saving data...
    setOpen(false);
    // => Programmatically closes the dialog
  };
 
  return (
    <Dialog.Root open={open} onOpenChange={setOpen}>
      {/* => open: controls visibility */}
      {/* => onOpenChange: called when Radix wants to change state */}
      {/* => (trigger click, Escape key, overlay click) */}
      <Dialog.Trigger asChild>
        <button>Open Controlled</button>
      </Dialog.Trigger>
      <Dialog.Portal>
        <Dialog.Overlay />
        <Dialog.Content>
          <Dialog.Title>Controlled</Dialog.Title>
          <Dialog.Description>You manage this dialog's state.</Dialog.Description>
          <button onClick={handleSave}>Save & Close</button>
          {/* => Custom close via programmatic state change */}
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  );
}
// => Uncontrolled: simpler, less code, Radix manages state
// => Controlled: full control, custom close logic, async operations
// => Both maintain identical accessibility behavior

import * as Collapsible from "@radix-ui/react-collapsible";
// => Install: npm install @radix-ui/react-collapsible
 
// CSS that targets Radix data-state attributes
const styles = `
  /* => Targets the trigger button's visual state */
  [data-state="open"] > .chevron {
    transform: rotate(180deg);
    /* => Rotates chevron when collapsible is open */
  }
 
  /* => Targets the collapsible content */
  .collapsible-content[data-state="open"] {
    animation: slideDown 200ms ease-out;
    /* => Slide-down animation on open */
  }
 
  .collapsible-content[data-state="closed"] {
    animation: slideUp 200ms ease-out;
    /* => Slide-up animation on close */
  }
 
  @keyframes slideDown {
    from { height: 0; opacity: 0; }
    to { height: var(--radix-collapsible-content-height); opacity: 1; }
    /* => --radix-collapsible-content-height is a CSS variable */
    /* => Radix measures and sets this automatically */
  }
 
  @keyframes slideUp {
    from { height: var(--radix-collapsible-content-height); opacity: 1; }
    to { height: 0; opacity: 0; }
  }
`;
// => CSS variable --radix-collapsible-content-height
// => Automatically set by Radix for smooth height transitions
 
export function StyledCollapsible() {
  return (
    <>
      <style>{styles}</style>
      {/* => Inline styles for demonstration */}
      <Collapsible.Root>
        {/* => Root manages open/close state */}
        <Collapsible.Trigger asChild>
          <button>
            Toggle Section
            <span className="chevron">V</span>
            {/* => Chevron rotates via data-state CSS */}
          </button>
          {/* => Renders: <button data-state="closed"> */}
          {/* => On click: <button data-state="open"> */}
        </Collapsible.Trigger>
        <Collapsible.Content className="collapsible-content">
          {/* => Content div receives data-state attribute */}
          {/* => data-state="open" when visible */}
          {/* => data-state="closed" when hidden */}
          <p>This content slides in and out.</p>
          <p>Radix provides the CSS variable for height.</p>
        </Collapsible.Content>
      </Collapsible.Root>
    </>
  );
}
// => data-state drives CSS without JavaScript state checks
// => CSS variables enable smooth height animations
// => No need for className toggling or inline styles

import * as VisuallyHidden from "@radix-ui/react-visually-hidden";
// => Install: npm install @radix-ui/react-visually-hidden
import * as Dialog from "@radix-ui/react-dialog";
// => Dialog for demonstrating hidden title pattern
 
export function IconButtonWithLabel() {
  // => Icon-only button with screen reader label
  return (
    <button>
      <svg viewBox="0 0 24 24" aria-hidden="true">
        {/* => aria-hidden: decorative icon, not announced */}
        <path d="M3 6h18M3 12h18M3 18h18" />
        {/* => Hamburger menu icon (three horizontal lines) */}
      </svg>
      <VisuallyHidden.Root>Open menu</VisuallyHidden.Root>
      {/* => Screen reader announces: "Open menu" button */}
      {/* => Sighted users see only the hamburger icon */}
      {/* => Renders visually hidden span with clip/overflow styles */}
    </button>
  );
}
 
export function DialogWithHiddenTitle() {
  // => Dialog that hides title visually but keeps it accessible
  return (
    <Dialog.Root>
      <Dialog.Trigger asChild>
        <button>Settings</button>
      </Dialog.Trigger>
      <Dialog.Portal>
        <Dialog.Overlay />
        <Dialog.Content>
          <VisuallyHidden.Root asChild>
            <Dialog.Title>Application Settings</Dialog.Title>
            {/* => Title is required for accessibility */}
            {/* => But design doesn't show it visually */}
            {/* => VisuallyHidden keeps it in DOM for screen readers */}
          </VisuallyHidden.Root>
          <Dialog.Description>Configure your preferences below.</Dialog.Description>
          {/* => Settings form content here */}
          <Dialog.Close asChild>
            <button>Done</button>
          </Dialog.Close>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  );
}
// => VisuallyHidden: visible to screen readers, invisible to sighted users
// => Different from display:none (which hides from ALL users)
// => Different from aria-label (which doesn't support rich content)
// => Uses CSS clip technique: position absolute, 1px size, overflow hidden

import * as Popover from "@radix-ui/react-popover";
// => Install: npm install @radix-ui/react-popover
 
export function InfoPopover() {
  return (
    <Popover.Root>
      {/* => Root manages open/close and positioning state */}
      <Popover.Trigger asChild>
        <button aria-label="More information">{/* => aria-label: describes the trigger's purpose */}i</button>
      </Popover.Trigger>
      <Popover.Portal>
        {/* => Portals to document.body for z-index safety */}
        <Popover.Content
          side="bottom"
          // => Preferred side: below the trigger
          // => Falls back to opposite side if no space
          sideOffset={8}
          // => 8px gap between trigger and popover
          align="center"
          // => Centers popover relative to trigger
          collisionPadding={16}
          // => 16px padding from viewport edges
          // => Prevents popover from touching screen edges
        >
          <p>This is helpful contextual information.</p>
          <p>The popover repositions automatically on scroll.</p>
          <Popover.Arrow />
          {/* => Renders an SVG arrow pointing at the trigger */}
          {/* => Arrow position updates with content alignment */}
          {/* => Style with CSS: fill color, size */}
          <Popover.Close asChild>
            <button aria-label="Close popover">X</button>
            {/* => Close button within the popover */}
          </Popover.Close>
        </Popover.Content>
      </Popover.Portal>
    </Popover.Root>
  );
}
// => side: "top" | "bottom" | "left" | "right"
// => align: "start" | "center" | "end"
// => Collision detection flips side when viewport space is insufficient
// => Arrow follows the content's alignment automatically

import * as Tooltip from "@radix-ui/react-tooltip";
// => Install: npm install @radix-ui/react-tooltip
 
export function ButtonWithTooltip() {
  return (
    <Tooltip.Provider delayDuration={300} skipDelayDuration={100}>
      {/* => Provider wraps all tooltips in your app */}
      {/* => delayDuration: ms before tooltip appears (300ms) */}
      {/* => skipDelayDuration: ms to skip delay between tooltips */}
      {/* => (moving between tooltipped items feels instant) */}
      <Tooltip.Root>
        {/* => Root manages single tooltip state */}
        <Tooltip.Trigger asChild>
          <button aria-label="Save document">
            {/* => Trigger element (hover/focus target) */}
            <svg viewBox="0 0 24 24" aria-hidden="true">
              <path d="M19 21H5a2 2 0 01-2-2V5a2 2 0 012-2h11l5 5v11a2 2 0 01-2 2z" />
            </svg>
          </button>
        </Tooltip.Trigger>
        <Tooltip.Portal>
          <Tooltip.Content
            side="bottom"
            sideOffset={4}
            // => 4px below the trigger
          >
            Save document (Ctrl+S)
            {/* => Tooltip text content */}
            {/* => Brief, informational, not interactive */}
            <Tooltip.Arrow />
            {/* => Small arrow pointing at trigger */}
          </Tooltip.Content>
        </Tooltip.Portal>
      </Tooltip.Root>
    </Tooltip.Provider>
  );
}
// => Tooltip appears after 300ms hover delay
// => Disappears immediately on mouse leave
// => Keyboard: appears on focus, hides on blur or Escape
// => ARIA: role="tooltip", aria-describedby set automatically
// => Never put interactive content in tooltips (use Popover instead)

import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
// => Install: npm install @radix-ui/react-dropdown-menu
 
export function FileMenu() {
  return (
    <DropdownMenu.Root>
      {/* => Root manages menu open/close state */}
      <DropdownMenu.Trigger asChild>
        <button>File</button>
        {/* => Renders: <button aria-haspopup="menu" */}
        {/* =>           aria-expanded="false"> */}
      </DropdownMenu.Trigger>
      <DropdownMenu.Portal>
        <DropdownMenu.Content
          sideOffset={4}
          // => 4px below trigger
        >
          <DropdownMenu.Item onSelect={() => console.log("New File")}>
            {/* => onSelect fires on click or Enter/Space key */}
            {/* => Menu closes automatically after selection */}
            New File
          </DropdownMenu.Item>
          <DropdownMenu.Item onSelect={() => console.log("Open")}>Open...</DropdownMenu.Item>
          <DropdownMenu.Separator />
          {/* => Visual divider between menu sections */}
          {/* => Renders <div role="separator"> */}
          <DropdownMenu.Item
            onSelect={() => console.log("Save")}
            disabled
            // => Grayed out, not selectable
            // => Skipped during keyboard navigation
          >
            Save
          </DropdownMenu.Item>
          <DropdownMenu.Separator />
          <DropdownMenu.Item onSelect={() => console.log("Quit")}>
            Quit
            <span style={{ marginLeft: "auto" }}>Ctrl+Q</span>
            {/* => Keyboard shortcut hint (visual only) */}
          </DropdownMenu.Item>
        </DropdownMenu.Content>
      </DropdownMenu.Portal>
    </DropdownMenu.Root>
  );
}
// => Keyboard: ArrowDown/Up moves focus between items
// => Keyboard: Enter/Space selects focused item
// => Keyboard: Escape closes menu, returns focus to trigger
// => Type-ahead: typing "q" jumps to "Quit"
// => Home/End: jumps to first/last item
// => All keyboard behavior is automatic

import * as AlertDialog from "@radix-ui/react-alert-dialog";
// => Install: npm install @radix-ui/react-alert-dialog
 
export function DeleteConfirmation() {
  const handleDelete = () => {
    // => Destructive action handler
    console.log("Item deleted");
    // => Output: Item deleted
  };
 
  return (
    <AlertDialog.Root>
      {/* => Root manages alert dialog state */}
      <AlertDialog.Trigger asChild>
        <button>Delete Account</button>
      </AlertDialog.Trigger>
      <AlertDialog.Portal>
        <AlertDialog.Overlay />
        {/* => Overlay does NOT close dialog on click */}
        {/* => Unlike Dialog.Overlay, this is non-dismissive */}
        <AlertDialog.Content>
          {/* => role="alertdialog" (not "dialog") */}
          {/* => Screen readers announce as urgent/important */}
          <AlertDialog.Title>Are you sure?</AlertDialog.Title>
          {/* => Required: describes the alert */}
          <AlertDialog.Description>
            This action cannot be undone. Your account and all data will be permanently deleted.
          </AlertDialog.Description>
          {/* => Describes consequences clearly */}
          <div style={{ display: "flex", gap: 16, justifyContent: "flex-end" }}>
            <AlertDialog.Cancel asChild>
              {/* => Cancel: closes dialog, no action taken */}
              {/* => Receives initial focus by default */}
              <button>Cancel</button>
            </AlertDialog.Cancel>
            <AlertDialog.Action asChild>
              {/* => Action: confirms and proceeds */}
              <button onClick={handleDelete}>Yes, delete account</button>
            </AlertDialog.Action>
          </div>
        </AlertDialog.Content>
      </AlertDialog.Portal>
    </AlertDialog.Root>
  );
}
// => AlertDialog vs Dialog:
// => - AlertDialog: overlay click does NOT close
// => - AlertDialog: Cancel button gets initial focus (safer default)
// => - AlertDialog: role="alertdialog" for screen readers
// => - Dialog: overlay click DOES close
// => - Dialog: first focusable element gets focus

import * as HoverCard from "@radix-ui/react-hover-card";
// => Install: npm install @radix-ui/react-hover-card
 
export function UserHoverCard() {
  return (
    <HoverCard.Root openDelay={200} closeDelay={300}>
      {/* => openDelay: 200ms before card appears */}
      {/* => closeDelay: 300ms before card disappears */}
      {/* => closeDelay gives user time to move mouse to card */}
      <HoverCard.Trigger asChild>
        <a href="/user/alice">
          {/* => Trigger: the element that activates hover */}
          @alice
        </a>
      </HoverCard.Trigger>
      <HoverCard.Portal>
        <HoverCard.Content side="bottom" sideOffset={4}>
          {/* => Rich preview content */}
          <div style={{ display: "flex", gap: 12 }}>
            <img
              src="/avatars/alice.jpg"
              alt="Alice's avatar"
              // => alt text for accessibility
              style={{ width: 48, height: 48, borderRadius: "50%" }}
            />
            <div>
              <p style={{ fontWeight: "bold" }}>Alice Smith</p>
              {/* => User name */}
              <p>Software Engineer at Acme Corp</p>
              {/* => User bio */}
              <a href="/user/alice">View full profile</a>
              {/* => Interactive link INSIDE the card */}
              {/* => This is allowed in HoverCard (not in Tooltip) */}
            </div>
          </div>
          <HoverCard.Arrow />
          {/* => Arrow pointing at trigger */}
        </HoverCard.Content>
      </HoverCard.Portal>
    </HoverCard.Root>
  );
}
// => HoverCard vs Tooltip:
// => - HoverCard: interactive content allowed (links, buttons)
// => - HoverCard: opened by hover only (not focus)
// => - Tooltip: text-only, non-interactive
// => - Tooltip: opened by hover AND focus
// => Use HoverCard for rich previews (user cards, link previews)
// => Use Tooltip for brief labels (button descriptions)

import * as Accordion from "@radix-ui/react-accordion";
// => Install: npm install @radix-ui/react-accordion
 
// SINGLE mode - only one item open at a time
export function FaqAccordion() {
  return (
    <Accordion.Root
      type="single"
      // => type="single": one item open at a time
      // => Opening a new item closes the current one
      defaultValue="item-1"
      // => "item-1" starts expanded
      collapsible
      // => collapsible: allows closing all items
      // => Without collapsible, one item must always be open
    >
      <Accordion.Item value="item-1">
        {/* => value: unique identifier for this item */}
        <Accordion.Header>
          {/* => Wraps trigger in proper heading element */}
          <Accordion.Trigger>
            What is Radix UI?
            {/* => Trigger text */}
            {/* => Renders: <button aria-expanded="true"> */}
          </Accordion.Trigger>
        </Accordion.Header>
        <Accordion.Content>
          {/* => Content panel */}
          {/* => data-state="open" | "closed" for animations */}
          <p>Radix UI is a headless component library for React.</p>
        </Accordion.Content>
      </Accordion.Item>
      <Accordion.Item value="item-2">
        <Accordion.Header>
          <Accordion.Trigger>Is it accessible?</Accordion.Trigger>
        </Accordion.Header>
        <Accordion.Content>
          <p>Yes, it follows WAI-ARIA Accordion pattern.</p>
        </Accordion.Content>
      </Accordion.Item>
      <Accordion.Item value="item-3">
        <Accordion.Header>
          <Accordion.Trigger>Can I style it?</Accordion.Trigger>
        </Accordion.Header>
        <Accordion.Content>
          <p>Absolutely. Radix ships unstyled by default.</p>
        </Accordion.Content>
      </Accordion.Item>
    </Accordion.Root>
  );
}
// => Keyboard: ArrowDown/Up moves between triggers
// => Keyboard: Home/End jumps to first/last trigger
// => Keyboard: Enter/Space toggles current item
// => type="single" + collapsible: zero or one item open
// => type="multiple": any number of items open simultaneously

import * as Tabs from "@radix-ui/react-tabs";
// => Install: npm install @radix-ui/react-tabs
 
export function SettingsTabs() {
  return (
    <Tabs.Root defaultValue="general">
      {/* => defaultValue: initially active tab */}
      {/* => Uncontrolled mode (Radix manages state) */}
      <Tabs.List aria-label="Settings sections">
        {/* => List: container for tab triggers */}
        {/* => role="tablist" set automatically */}
        {/* => aria-label describes the tab group */}
        <Tabs.Trigger value="general">
          {/* => value: links trigger to its content panel */}
          {/* => role="tab", aria-selected="true|false" */}
          General
        </Tabs.Trigger>
        <Tabs.Trigger value="security">Security</Tabs.Trigger>
        <Tabs.Trigger value="notifications" disabled>
          {/* => disabled: tab is not selectable */}
          {/* => Skipped during keyboard navigation */}
          Notifications
        </Tabs.Trigger>
      </Tabs.List>
      <Tabs.Content value="general">
        {/* => role="tabpanel" */}
        {/* => Only visible when "general" tab is active */}
        {/* => aria-labelledby points to its trigger */}
        <h3>General Settings</h3>
        <p>Configure your general preferences here.</p>
      </Tabs.Content>
      <Tabs.Content value="security">
        <h3>Security Settings</h3>
        <p>Manage passwords and two-factor authentication.</p>
      </Tabs.Content>
      <Tabs.Content value="notifications">
        <h3>Notification Preferences</h3>
        <p>Choose which notifications to receive.</p>
      </Tabs.Content>
    </Tabs.Root>
  );
}
// => Keyboard: ArrowLeft/Right moves between tabs
// => Keyboard: Home/End jumps to first/last tab
// => Tab key: moves focus from tab to panel content
// => Automatic activation: tab activates on arrow key focus
// => Optional: activationMode="manual" requires Enter/Space

import * as Switch from "@radix-ui/react-switch";
// => Install: npm install @radix-ui/react-switch
 
export function DarkModeSwitch() {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
      <label htmlFor="dark-mode">
        {/* => Accessible label linked via htmlFor */}
        Dark Mode
      </label>
      <Switch.Root
        id="dark-mode"
        // => id: links to <label htmlFor>
        defaultChecked={false}
        // => defaultChecked: initial state (uncontrolled)
        onCheckedChange={(checked) => {
          // => Callback when state changes
          console.log("Dark mode:", checked);
          // => Output: Dark mode: true (or false)
        }}
      >
        {/* => role="switch", aria-checked="true|false" */}
        {/* => data-state="checked" | "unchecked" */}
        <Switch.Thumb />
        {/* => The sliding circle/indicator */}
        {/* => data-state="checked" | "unchecked" */}
        {/* => Position with CSS: translateX on data-state */}
      </Switch.Root>
    </div>
  );
}
// => Keyboard: Space toggles the switch
// => Keyboard: Enter does NOT toggle (differs from checkbox)
// => Screen reader: "Dark Mode, switch, off"
// => Switch vs Checkbox: Switch is for immediate effects
// => Checkbox is for forms submitted later

import * as Checkbox from "@radix-ui/react-checkbox";
// => Install: npm install @radix-ui/react-checkbox
import { useState } from "react";
// => useState for controlled state management
 
export function TaskCheckbox() {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
      <Checkbox.Root
        id="task-1"
        defaultChecked={false}
        // => Uncontrolled: starts unchecked
      >
        {/* => role="checkbox" */}
        {/* => data-state="checked" | "unchecked" | "indeterminate" */}
        <Checkbox.Indicator>
          {/* => Indicator: visible only when checked/indeterminate */}
          {/* => Empty when unchecked */}
          <svg viewBox="0 0 24 24" aria-hidden="true">
            <path d="M20 6L9 17l-5-5" />
          </svg>
          {/* => Checkmark SVG icon */}
        </Checkbox.Indicator>
      </Checkbox.Root>
      <label htmlFor="task-1">Complete documentation</label>
    </div>
  );
}
 
// Indeterminate state for "select all" parent checkbox
export function SelectAllCheckbox() {
  const [items, setItems] = useState([
    { id: "a", label: "Item A", checked: true },
    { id: "b", label: "Item B", checked: false },
    { id: "c", label: "Item C", checked: true },
  ]);
  // => items: array of checkbox states
 
  const allChecked = items.every((item) => item.checked);
  // => allChecked: true only if ALL items are checked
  const someChecked = items.some((item) => item.checked) && !allChecked;
  // => someChecked: true if SOME (but not all) items are checked
  // => This is the indeterminate state
 
  const parentChecked = allChecked ? true : someChecked ? "indeterminate" : false;
  // => "indeterminate": Radix's third checkbox state
  // => Renders: aria-checked="mixed"
 
  return (
    <div>
      <Checkbox.Root
        checked={parentChecked}
        // => Controlled: state driven by children
        onCheckedChange={(checked) => {
          // => checked: true when toggling on, false when toggling off
          setItems(items.map((item) => ({ ...item, checked: !!checked })));
          // => Toggles ALL children to match parent
        }}
      >
        <Checkbox.Indicator>
          {parentChecked === "indeterminate" ? "—" : "V"}
          {/* => Shows dash for indeterminate, check for checked */}
        </Checkbox.Indicator>
      </Checkbox.Root>
      <label>Select All</label>
    </div>
  );
}
// => Three states: checked (true), unchecked (false), indeterminate ("indeterminate")
// => Indeterminate: aria-checked="mixed" for screen readers
// => Used in tree views, data tables, permission matrices

import * as RadioGroup from "@radix-ui/react-radio-group";
// => Install: npm install @radix-ui/react-radio-group
 
export function PlanSelector() {
  return (
    <RadioGroup.Root
      defaultValue="monthly"
      // => defaultValue: initially selected radio
      aria-label="Billing plan"
      // => aria-label: describes the group
      onValueChange={(value) => {
        // => Fires when selection changes
        console.log("Selected plan:", value);
        // => Output: Selected plan: monthly (or yearly, lifetime)
      }}
    >
      {/* => role="radiogroup" */}
      <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <RadioGroup.Item value="monthly" id="monthly">
            {/* => role="radio", aria-checked="true|false" */}
            {/* => value: this radio's selection value */}
            <RadioGroup.Indicator />
            {/* => Visual indicator: visible when this radio is selected */}
            {/* => Renders a dot/circle inside the radio */}
          </RadioGroup.Item>
          <label htmlFor="monthly">Monthly ($9/mo)</label>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <RadioGroup.Item value="yearly" id="yearly">
            <RadioGroup.Indicator />
          </RadioGroup.Item>
          <label htmlFor="yearly">Yearly ($89/yr)</label>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <RadioGroup.Item value="lifetime" id="lifetime" disabled>
            {/* => disabled: not selectable, skipped by keyboard */}
            <RadioGroup.Indicator />
          </RadioGroup.Item>
          <label htmlFor="lifetime">Lifetime (Sold out)</label>
        </div>
      </div>
    </RadioGroup.Root>
  );
}
// => Keyboard: ArrowDown/Right moves to next radio (loops)
// => Keyboard: ArrowUp/Left moves to previous radio (loops)
// => Keyboard: Tab moves focus out of the radio group
// => Only one radio can be selected at a time
// => Disabled items are skipped during keyboard navigation

import * as Slider from "@radix-ui/react-slider";
// => Install: npm install @radix-ui/react-slider
 
export function VolumeSlider() {
  return (
    <div>
      <label id="volume-label">Volume</label>
      <Slider.Root
        defaultValue={[50]}
        // => defaultValue: array of thumb positions
        // => [50]: single thumb at position 50
        max={100}
        // => Maximum value
        min={0}
        // => Minimum value
        step={1}
        // => Increment step size
        aria-labelledby="volume-label"
        // => Links to external label
        onValueChange={(values) => {
          console.log("Volume:", values[0]);
          // => Output: Volume: 50 (changes as thumb moves)
        }}
      >
        {/* => Root renders the track container */}
        <Slider.Track>
          {/* => Track: the horizontal rail */}
          <Slider.Range />
          {/* => Range: filled portion of the track */}
          {/* => Spans from min to thumb position */}
        </Slider.Track>
        <Slider.Thumb aria-label="Volume" />
        {/* => Thumb: draggable handle */}
        {/* => aria-label for screen readers */}
        {/* => role="slider", aria-valuenow, aria-valuemin, aria-valuemax */}
      </Slider.Root>
    </div>
  );
}
// => Keyboard: ArrowRight/Up increases by step
// => Keyboard: ArrowLeft/Down decreases by step
// => Keyboard: PageUp/PageDown moves by 10% of range
// => Keyboard: Home/End jumps to min/max
// => Mouse: click on track moves thumb to click position
// => Touch: drag thumb on mobile devices

import * as Toggle from "@radix-ui/react-toggle";
// => Install: npm install @radix-ui/react-toggle
 
export function BoldToggle() {
  return (
    <Toggle.Root
      aria-label="Toggle bold"
      // => aria-label: describes the toggle purpose
      defaultPressed={false}
      // => defaultPressed: initial state (uncontrolled)
      onPressedChange={(pressed) => {
        console.log("Bold:", pressed);
        // => Output: Bold: true (or false)
      }}
    >
      {/* => role="button", aria-pressed="true|false" */}
      {/* => data-state="on" | "off" */}
      <strong>B</strong>
      {/* => Bold icon/label */}
    </Toggle.Root>
  );
}
// => Keyboard: Enter or Space toggles state
// => Screen reader: "Toggle bold, button, pressed" (or "not pressed")
// => data-state="on" | "off" for CSS styling
// => Use for toolbar buttons: bold, italic, alignment, view mode
// => NOT for form inputs (use Switch or Checkbox instead)

import * as Label from "@radix-ui/react-label";
// => Install: npm install @radix-ui/react-label
import * as Switch from "@radix-ui/react-switch";
// => Switch for demonstration
 
export function LabeledControl() {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
      <Label.Root htmlFor="airplane-mode">
        {/* => htmlFor: links label to control via id */}
        {/* => Clicking label focuses/activates the control */}
        Airplane Mode
      </Label.Root>
      <Switch.Root id="airplane-mode">
        {/* => id: matches label's htmlFor */}
        <Switch.Thumb />
      </Switch.Root>
    </div>
  );
}
 
export function LabelWithWrapping() {
  // => Alternative: wrap control inside label (no htmlFor needed)
  return (
    <Label.Root>
      {/* => Wrapping pattern: label contains the control */}
      <span>Enable notifications</span>
      <Switch.Root>
        <Switch.Thumb />
      </Switch.Root>
      {/* => Clicking "Enable notifications" text toggles switch */}
    </Label.Root>
  );
}
// => Label.Root renders a <label> element
// => Two association patterns:
// => 1. htmlFor + id (explicit, works across DOM distance)
// => 2. Wrapping (implicit, control must be a descendant)
// => Both patterns are WAI-ARIA compliant

import * as Separator from "@radix-ui/react-separator";
// => Install: npm install @radix-ui/react-separator
 
export function ContentWithSeparators() {
  return (
    <div>
      <h2>Profile</h2>
      <p>View and manage your account details.</p>
      <Separator.Root
        orientation="horizontal"
        // => orientation: "horizontal" (default) | "vertical"
        // => Sets aria-orientation attribute
        decorative={false}
        // => decorative: false (default) - meaningful separator
        // => decorative: true - purely visual (role="none")
      />
      {/* => Renders: <div role="separator" aria-orientation="horizontal"> */}
      <h2>Preferences</h2>
      <p>Customize your experience.</p>
      <Separator.Root decorative />
      {/* => decorative: role="none" (not announced by screen readers) */}
      <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
        <span>Home</span>
        <Separator.Root orientation="vertical" />
        {/* => Vertical separator between inline items */}
        {/* => Style with CSS: height and border */}
        <span>Settings</span>
        <Separator.Root orientation="vertical" />
        <span>Help</span>
      </div>
    </div>
  );
}
// => Semantic separator: role="separator" (announced by screen readers)
// => Decorative separator: role="none" (purely visual)
// => Use semantic for meaningful content divisions
// => Use decorative for visual-only styling

import * as AspectRatio from "@radix-ui/react-aspect-ratio";
// => Install: npm install @radix-ui/react-aspect-ratio
 
export function ResponsiveImage() {
  return (
    <div style={{ width: 400 }}>
      {/* => Container constrains the maximum width */}
      <AspectRatio.Root ratio={16 / 9}>
        {/* => ratio: width / height */}
        {/* => 16/9 = 1.777... (widescreen) */}
        {/* => Container maintains 16:9 regardless of width */}
        <img
          src="/hero-image.jpg"
          alt="Hero banner showing mountain landscape"
          // => alt text for accessibility
          style={{
            width: "100%",
            height: "100%",
            objectFit: "cover",
            // => objectFit: "cover" fills container, may crop
            // => objectFit: "contain" fits inside, may letterbox
          }}
        />
      </AspectRatio.Root>
    </div>
  );
}
 
export function VideoEmbed() {
  return (
    <AspectRatio.Root ratio={4 / 3}>
      {/* => 4:3 ratio for classic video format */}
      <iframe
        src="https://www.youtube.com/embed/example"
        title="Tutorial video"
        // => title: required for iframe accessibility
        style={{ width: "100%", height: "100%" }}
        allowFullScreen
      />
    </AspectRatio.Root>
  );
}
// => Common ratios: 16/9 (widescreen), 4/3 (classic), 1/1 (square)
// => Prevents Cumulative Layout Shift (CLS) during loading
// => Child fills the aspect ratio container completely
// => Works with img, video, iframe, or any content

import * as ScrollArea from "@radix-ui/react-scroll-area";
// => Install: npm install @radix-ui/react-scroll-area
 
const styles = `
  .scroll-viewport {
    width: 300px;
    height: 200px;
    /* => Fixed dimensions create overflow */
  }
  .scrollbar {
    display: flex;
    padding: 2px;
    background: #f0f0f0;
    /* => Scrollbar track background */
  }
  .scrollbar[data-orientation="vertical"] {
    width: 10px;
    /* => Vertical scrollbar width */
  }
  .scrollbar[data-orientation="horizontal"] {
    height: 10px;
    /* => Horizontal scrollbar height */
  }
  .scroll-thumb {
    background: #888;
    border-radius: 5px;
    /* => Scrollbar thumb styling */
  }
`;
// => Custom scrollbar styles (fully configurable)
 
export function StyledScrollArea() {
  return (
    <>
      <style>{styles}</style>
      <ScrollArea.Root>
        {/* => Root container for scroll area */}
        <ScrollArea.Viewport className="scroll-viewport">
          {/* => Viewport: the scrollable content area */}
          {/* => All scrollable content goes inside */}
          <div style={{ padding: 16 }}>
            <h3>Long Content</h3>
            {Array.from({ length: 20 }, (_, i) => (
              <p key={i}>Item {i + 1}: Scrollable content line</p>
            ))}
            {/* => 20 items exceed viewport height */}
            {/* => Triggers vertical scrollbar */}
          </div>
        </ScrollArea.Viewport>
        <ScrollArea.Scrollbar orientation="vertical" className="scrollbar">
          {/* => Vertical scrollbar component */}
          <ScrollArea.Thumb className="scroll-thumb" />
          {/* => Draggable thumb */}
        </ScrollArea.Scrollbar>
        <ScrollArea.Scrollbar orientation="horizontal" className="scrollbar">
          <ScrollArea.Thumb className="scroll-thumb" />
        </ScrollArea.Scrollbar>
        <ScrollArea.Corner />
        {/* => Corner: fills the intersection of both scrollbars */}
      </ScrollArea.Root>
    </>
  );
}
// => Uses native scrolling (mouse wheel, touch, keyboard)
// => Custom-styled scrollbars replace browser defaults
// => Scrollbars auto-hide when not scrolling (configurable)
// => Works identically across Chrome, Firefox, Safari

import * as Collapsible from "@radix-ui/react-collapsible";
// => Install: npm install @radix-ui/react-collapsible
import { useState } from "react";
// => useState for controlled state
 
export function CollapsibleSection() {
  const [open, setOpen] = useState(false);
  // => open: tracks expanded/collapsed state
  // => setOpen: updates state
 
  return (
    <Collapsible.Root open={open} onOpenChange={setOpen}>
      {/* => Controlled mode: you manage state */}
      <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
        <h3>Advanced Options</h3>
        <Collapsible.Trigger asChild>
          <button aria-label={open ? "Collapse" : "Expand"}>
            {/* => Dynamic aria-label based on state */}
            {open ? "Hide" : "Show"}
          </button>
        </Collapsible.Trigger>
      </div>
      <Collapsible.Content>
        {/* => Content: visible when open, hidden when closed */}
        {/* => data-state="open" | "closed" for CSS animations */}
        {/* => Provides --radix-collapsible-content-height CSS var */}
        <div style={{ padding: 16, border: "1px solid #ddd" }}>
          <p>
            Debug mode: <strong>Enabled</strong>
          </p>
          <p>
            Log level: <strong>Verbose</strong>
          </p>
          <p>
            Cache: <strong>Disabled</strong>
          </p>
        </div>
      </Collapsible.Content>
    </Collapsible.Root>
  );
}
// => Collapsible vs Accordion:
// => - Collapsible: single section, independent state
// => - Accordion: multiple sections, coordinated state
// => Collapsible is simpler when you need one expandable area
// => Accordion manages groups of collapsibles together

import * as Dialog from "@radix-ui/react-dialog";
import * as Tabs from "@radix-ui/react-tabs";
import * as Switch from "@radix-ui/react-switch";
import * as Separator from "@radix-ui/react-separator";
import * as Label from "@radix-ui/react-label";
// => Multiple Radix packages compose naturally together
 
export function SettingsDialog() {
  return (
    <Dialog.Root>
      <Dialog.Trigger asChild>
        <button>Settings</button>
      </Dialog.Trigger>
      <Dialog.Portal>
        <Dialog.Overlay />
        <Dialog.Content style={{ maxWidth: 500, padding: 24 }}>
          <Dialog.Title>Settings</Dialog.Title>
          <Dialog.Description>Manage your application preferences.</Dialog.Description>
          <Separator.Root style={{ margin: "16px 0" }} />
          {/* => Visual divider below title */}
          <Tabs.Root defaultValue="general">
            <Tabs.List aria-label="Settings categories">
              <Tabs.Trigger value="general">General</Tabs.Trigger>
              <Tabs.Trigger value="privacy">Privacy</Tabs.Trigger>
            </Tabs.List>
            <Tabs.Content value="general">
              {/* => General settings tab */}
              <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "12px 0" }}>
                <Label.Root htmlFor="dark-mode">Dark Mode</Label.Root>
                <Switch.Root id="dark-mode">
                  <Switch.Thumb />
                </Switch.Root>
              </div>
              <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "12px 0" }}>
                <Label.Root htmlFor="notifications">Notifications</Label.Root>
                <Switch.Root id="notifications" defaultChecked>
                  <Switch.Thumb />
                </Switch.Root>
              </div>
            </Tabs.Content>
            <Tabs.Content value="privacy">
              {/* => Privacy settings tab */}
              <p>Privacy controls go here.</p>
            </Tabs.Content>
          </Tabs.Root>
          <Separator.Root style={{ margin: "16px 0" }} />
          <Dialog.Close asChild>
            <button>Done</button>
          </Dialog.Close>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  );
}
// => Radix components nest freely without conflicts
// => Focus management works across component boundaries
// => Dialog traps focus within, Tabs manages focus within its list
// => Screen readers navigate the full hierarchy correctly

import * as Dialog from "@radix-ui/react-dialog";
import * as Popover from "@radix-ui/react-popover";
// => Both are overlay components
 
export function DialogWithPopover() {
  return (
    <Dialog.Root>
      <Dialog.Trigger asChild>
        <button>Open Form</button>
      </Dialog.Trigger>
      <Dialog.Portal>
        <Dialog.Overlay />
        <Dialog.Content style={{ padding: 24 }}>
          <Dialog.Title>Edit Profile</Dialog.Title>
          <Dialog.Description>Update your profile information.</Dialog.Description>
          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
            <input placeholder="Display name" />
            <Popover.Root>
              {/* => Popover nested inside Dialog */}
              {/* => Focus trap expands to include popover */}
              <Popover.Trigger asChild>
                <button aria-label="Name help">?</button>
              </Popover.Trigger>
              <Popover.Portal>
                <Popover.Content side="right" sideOffset={8}>
                  <p>Your display name is visible to other users.</p>
                  <p>You can change it at any time.</p>
                  <Popover.Arrow />
                  <Popover.Close asChild>
                    <button>Got it</button>
                  </Popover.Close>
                </Popover.Content>
              </Popover.Portal>
            </Popover.Root>
          </div>
          <Dialog.Close asChild>
            <button>Save</button>
          </Dialog.Close>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  );
}
// => Focus trap includes both dialog and popover
// => Closing popover returns focus to popover trigger
// => Closing dialog returns focus to dialog trigger
// => Escape closes innermost overlay first (popover, then dialog)
// => Radix manages the overlay stack automatically

import * as Tooltip from "@radix-ui/react-tooltip";
// => Tooltip for explaining why button is disabled
 
export function DisabledButtonWithTooltip() {
  const isDisabled = true;
  // => Button is disabled (e.g., form invalid)
 
  return (
    <Tooltip.Provider>
      <Tooltip.Root>
        <Tooltip.Trigger asChild>
          <span tabIndex={isDisabled ? 0 : undefined}>
            {/* => span wrapper enables tooltip on disabled button */}
            {/* => tabIndex={0}: makes span focusable when button disabled */}
            {/* => Without wrapper: disabled button can't receive hover/focus */}
            <button disabled={isDisabled} style={{ pointerEvents: "none" }}>
              {/* => pointerEvents: "none" lets span handle hover */}
              Submit
            </button>
          </span>
        </Tooltip.Trigger>
        <Tooltip.Portal>
          <Tooltip.Content side="bottom" sideOffset={4}>
            Please fill in all required fields before submitting.
            {/* => Explains WHY the button is disabled */}
            <Tooltip.Arrow />
          </Tooltip.Content>
        </Tooltip.Portal>
      </Tooltip.Root>
    </Tooltip.Provider>
  );
}
// => Pattern: wrap disabled element in focusable container
// => span with tabIndex={0} receives hover and focus events
// => Inner button has pointerEvents: "none" to delegate hover
// => Screen readers: "Submit, button, disabled" + tooltip content
// => Explains the disabled state to ALL users

import * as Avatar from "@radix-ui/react-avatar";
// => Install: npm install @radix-ui/react-avatar
 
export function UserAvatar() {
  return (
    <div style={{ display: "flex", gap: 16 }}>
      {/* Avatar with image */}
      <Avatar.Root>
        {/* => Root container for avatar */}
        <Avatar.Image
          src="/avatars/alice.jpg"
          alt="Alice Smith"
          // => alt text for accessibility
        />
        {/* => Attempts to load image */}
        {/* => Shows image if load succeeds */}
        <Avatar.Fallback delayMs={600}>
          {/* => Fallback: shown if image fails or during load */}
          {/* => delayMs: wait before showing fallback */}
          {/* => Prevents flash of fallback on fast connections */}
          AS
          {/* => User initials */}
        </Avatar.Fallback>
      </Avatar.Root>
 
      {/* Avatar with broken image (fallback shown) */}
      <Avatar.Root>
        <Avatar.Image
          src="/avatars/nonexistent.jpg"
          alt="Unknown User"
          // => Image will fail to load
        />
        <Avatar.Fallback>
          {/* => No delayMs: shows immediately after load failure */}
          <svg viewBox="0 0 24 24" aria-hidden="true">
            <circle cx="12" cy="8" r="4" />
            <path d="M20 21a8 8 0 10-16 0" />
          </svg>
          {/* => Generic user icon as fallback */}
        </Avatar.Fallback>
      </Avatar.Root>
    </div>
  );
}
// => Load states: idle → loading → loaded | error
// => Image success: Avatar.Image visible, Fallback hidden
// => Image error: Avatar.Image hidden, Fallback visible
// => delayMs prevents fallback flash on fast connections
// => Fallback can contain text, icons, or any React content

import * as Select from "@radix-ui/react-select";
// => Install: npm install @radix-ui/react-select
 
export function CountrySelect() {
  return (
    <Select.Root
      defaultValue="us"
      // => defaultValue: initially selected option
      onValueChange={(value) => {
        console.log("Selected:", value);
        // => Output: Selected: us (or gb, de, jp)
      }}
    >
      <Select.Trigger aria-label="Country">
        {/* => Trigger: the button that opens the dropdown */}
        {/* => aria-label: for screen readers */}
        <Select.Value placeholder="Select a country" />
        {/* => Value: shows selected option's text */}
        {/* => placeholder: shown when nothing is selected */}
        <Select.Icon>
          {/* => Icon: dropdown arrow indicator */}
          <span aria-hidden="true">V</span>
        </Select.Icon>
      </Select.Trigger>
      <Select.Portal>
        <Select.Content position="popper" sideOffset={4}>
          {/* => position="popper": floating dropdown */}
          {/* => position="item-aligned": aligns to selected item */}
          <Select.ScrollUpButton>
            {/* => Scroll indicator at top */}
            <span aria-hidden="true">^</span>
          </Select.ScrollUpButton>
          <Select.Viewport>
            {/* => Viewport: scrollable container for items */}
            <Select.Group>
              <Select.Label>Americas</Select.Label>
              {/* => Group label (not selectable) */}
              <Select.Item value="us">
                {/* => value: the selection value */}
                <Select.ItemText>United States</Select.ItemText>
                {/* => Display text for this option */}
                <Select.ItemIndicator>
                  {/* => Check icon: visible when item is selected */}
                  <span aria-hidden="true">V</span>
                </Select.ItemIndicator>
              </Select.Item>
            </Select.Group>
            <Select.Separator />
            {/* => Visual divider between groups */}
            <Select.Group>
              <Select.Label>Europe</Select.Label>
              <Select.Item value="gb">
                <Select.ItemText>United Kingdom</Select.ItemText>
                <Select.ItemIndicator>
                  <span aria-hidden="true">V</span>
                </Select.ItemIndicator>
              </Select.Item>
              <Select.Item value="de">
                <Select.ItemText>Germany</Select.ItemText>
                <Select.ItemIndicator>
                  <span aria-hidden="true">V</span>
                </Select.ItemIndicator>
              </Select.Item>
            </Select.Group>
            <Select.Separator />
            <Select.Group>
              <Select.Label>Asia</Select.Label>
              <Select.Item value="jp">
                <Select.ItemText>Japan</Select.ItemText>
                <Select.ItemIndicator>
                  <span aria-hidden="true">V</span>
                </Select.ItemIndicator>
              </Select.Item>
            </Select.Group>
          </Select.Viewport>
          <Select.ScrollDownButton>
            <span aria-hidden="true">v</span>
          </Select.ScrollDownButton>
        </Select.Content>
      </Select.Portal>
    </Select.Root>
  );
}
// => Keyboard: ArrowDown/Up navigates items
// => Keyboard: Enter/Space selects focused item
// => Keyboard: Type-ahead jumps to matching item
// => Groups with labels organize long option lists
// => ScrollUp/DownButton appear when content overflows

import * as ToggleGroup from "@radix-ui/react-toggle-group";
// => Install: npm install @radix-ui/react-toggle-group
 
// SINGLE mode - one button selected at a time (like radio)
export function TextAlignGroup() {
  return (
    <ToggleGroup.Root
      type="single"
      // => type="single": one selection at a time
      defaultValue="left"
      // => defaultValue: initially selected item
      aria-label="Text alignment"
      // => aria-label: describes the group
      onValueChange={(value) => {
        console.log("Alignment:", value);
        // => Output: Alignment: left (or center, right)
      }}
    >
      <ToggleGroup.Item value="left" aria-label="Align left">
        {/* => Each item is a toggle button */}
        {/* => data-state="on" | "off" */}L
      </ToggleGroup.Item>
      <ToggleGroup.Item value="center" aria-label="Align center">
        C
      </ToggleGroup.Item>
      <ToggleGroup.Item value="right" aria-label="Align right">
        R
      </ToggleGroup.Item>
    </ToggleGroup.Root>
  );
}
 
// MULTIPLE mode - any combination of buttons
export function TextFormatGroup() {
  return (
    <ToggleGroup.Root
      type="multiple"
      // => type="multiple": any combination allowed
      defaultValue={["bold"]}
      // => defaultValue: array of initially selected items
      aria-label="Text formatting"
      onValueChange={(values) => {
        console.log("Formatting:", values);
        // => Output: Formatting: ["bold", "italic"] (array)
      }}
    >
      <ToggleGroup.Item value="bold" aria-label="Bold">
        <strong>B</strong>
      </ToggleGroup.Item>
      <ToggleGroup.Item value="italic" aria-label="Italic">
        <em>I</em>
      </ToggleGroup.Item>
      <ToggleGroup.Item value="underline" aria-label="Underline">
        <u>U</u>
      </ToggleGroup.Item>
    </ToggleGroup.Root>
  );
}
// => Single: like RadioGroup but for buttons (toolbar alignment)
// => Multiple: like CheckboxGroup but for buttons (toolbar formatting)
// => Keyboard: ArrowLeft/Right moves between items
// => Keyboard: Enter/Space toggles focused item
// => data-state="on" | "off" on each item for CSS

import * as Switch from "@radix-ui/react-switch";
import * as Checkbox from "@radix-ui/react-checkbox";
import * as RadioGroup from "@radix-ui/react-radio-group";
import * as Select from "@radix-ui/react-select";
import * as Label from "@radix-ui/react-label";
// => Multiple form controls
 
export function NativeForm() {
  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    // => Prevent page reload
    const formData = new FormData(event.currentTarget);
    // => Collect form values via native FormData API
    console.log("Theme:", formData.get("theme"));
    // => Output: Theme: dark (from Select)
    console.log("Newsletter:", formData.get("newsletter"));
    // => Output: Newsletter: on (from Switch, when checked)
    console.log("Terms:", formData.get("terms"));
    // => Output: Terms: on (from Checkbox, when checked)
    console.log("Plan:", formData.get("plan"));
    // => Output: Plan: yearly (from RadioGroup)
  };
 
  return (
    <form onSubmit={handleSubmit}>
      <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
        <div>
          <Label.Root htmlFor="theme-select">Theme</Label.Root>
          <Select.Root name="theme" defaultValue="dark">
            {/* => name: form field name for FormData */}
            <Select.Trigger id="theme-select">
              <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>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <Switch.Root name="newsletter" id="newsletter">
            {/* => name: form field name */}
            {/* => Renders hidden <input type="hidden"> when checked */}
            <Switch.Thumb />
          </Switch.Root>
          <Label.Root htmlFor="newsletter">Subscribe to newsletter</Label.Root>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <Checkbox.Root name="terms" id="terms">
            <Checkbox.Indicator>V</Checkbox.Indicator>
          </Checkbox.Root>
          <Label.Root htmlFor="terms">Accept terms</Label.Root>
        </div>
        <RadioGroup.Root name="plan" defaultValue="yearly">
          {/* => name: shared form field name for the group */}
          <div style={{ display: "flex", gap: 16 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 4 }}>
              <RadioGroup.Item value="monthly" id="monthly">
                <RadioGroup.Indicator />
              </RadioGroup.Item>
              <Label.Root htmlFor="monthly">Monthly</Label.Root>
            </div>
            <div style={{ display: "flex", alignItems: "center", gap: 4 }}>
              <RadioGroup.Item value="yearly" id="yearly">
                <RadioGroup.Indicator />
              </RadioGroup.Item>
              <Label.Root htmlFor="yearly">Yearly</Label.Root>
            </div>
          </div>
        </RadioGroup.Root>
        <button type="submit">Save</button>
      </div>
    </form>
  );
}
// => Radix controls render hidden <input> elements
// => FormData collects values via name attribute
// => Works with native form submission (no JavaScript required)
// => Works with form libraries (React Hook Form, Formik)
// => name prop enables server-side form handling

import * as Dialog from "@radix-ui/react-dialog";
// => Dialog for demonstrating prop forwarding
 
export function PropForwardingExample() {
  return (
    <Dialog.Root>
      <Dialog.Trigger
        asChild
        // => asChild: merges onto child element
      >
        <button
          className="my-custom-class"
          // => className: forwarded to the button element
          data-testid="open-dialog-btn"
          // => data-testid: forwarded (useful for testing)
          onClick={() => {
            console.log("Custom click handler!");
            // => Output: Custom click handler!
            // => Runs ALONGSIDE Radix's internal click handler
            // => NOT instead of it -- both execute
          }}
          onKeyDown={(e) => {
            if (e.key === "Enter") {
              console.log("Custom Enter handler!");
              // => Output: Custom Enter handler!
              // => Also runs alongside Radix's handler
            }
          }}
          style={{ backgroundColor: "blue", color: "white" }}
          // => style: forwarded to DOM element
        >
          Open Dialog
        </button>
      </Dialog.Trigger>
      <Dialog.Portal>
        <Dialog.Overlay
          className="overlay-custom"
          // => className forwarded to overlay div
          onClick={() => {
            console.log("Overlay clicked");
            // => Fires before Radix closes the dialog
          }}
        />
        <Dialog.Content
          onEscapeKeyDown={(event) => {
            // => Radix-specific event handler
            // => Fires when Escape is pressed inside content
            console.log("Escape pressed");
            // event.preventDefault(); // => Would prevent dialog close
          }}
          onPointerDownOutside={(event) => {
            // => Radix-specific event handler
            // => Fires on click outside content
            console.log("Clicked outside");
            // event.preventDefault(); // => Would prevent dialog close
          }}
          onOpenAutoFocus={(event) => {
            // => Fires when dialog opens and focus is about to move
            // event.preventDefault(); // => Would prevent auto-focus
          }}
          onCloseAutoFocus={(event) => {
            // => Fires when dialog closes and focus returns
            // event.preventDefault(); // => Would prevent focus restore
          }}
        >
          <Dialog.Title>Prop Forwarding</Dialog.Title>
          <Dialog.Description>All standard DOM props are forwarded to the rendered element.</Dialog.Description>
          <Dialog.Close asChild>
            <button>Close</button>
          </Dialog.Close>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  );
}
// => Standard props (className, style, data-*, onClick) forwarded
// => Radix-specific events: onEscapeKeyDown, onPointerDownOutside
// => onOpenAutoFocus, onCloseAutoFocus for focus control
// => event.preventDefault() on Radix events cancels default behavior
// => Custom handlers compose WITH Radix handlers (both execute)