Radix UI React Toggle

import { Toggle, Root } from "@radix-ui/react-toggle";
import type { ToggleProps } from "@radix-ui/react-toggle";

const { Toggle, Root } = require("@radix-ui/react-toggle");

import { Toggle } from "@radix-ui/react-toggle";

// Uncontrolled toggle with default state
function BasicToggle() {
  return (
    <Toggle defaultPressed={false} onPressedChange={(pressed) => console.log(pressed)}>
      Toggle Me
    </Toggle>
  );
}

// Controlled toggle
function ControlledToggle() {
  const [isPressed, setIsPressed] = useState(false);
  
  return (
    <Toggle pressed={isPressed} onPressedChange={setIsPressed}>
      {isPressed ? "On" : "Off"}
    </Toggle>
  );
}

/**
 * Toggle component - A two-state button that can be pressed/unpressed
 */
const Toggle: React.ForwardRefExoticComponent<
  ToggleProps & React.RefAttributes<HTMLButtonElement>
>;

/**
 * Root component - Alias for Toggle following Radix UI naming conventions
 */
const Root: React.ForwardRefExoticComponent<
  ToggleProps & React.RefAttributes<HTMLButtonElement>
>;

// Basic uncontrolled usage
<Toggle defaultPressed onPressedChange={(pressed) => console.log(pressed)}>
  Like
</Toggle>

// Controlled usage
<Toggle pressed={isPressed} onPressedChange={setIsPressed}>
  {isPressed ? "Liked" : "Like"}
</Toggle>

// With custom styling via data attributes
<Toggle 
  className="toggle-button"
  data-testid="like-button"
>
  <HeartIcon />
</Toggle>

// Using asChild for custom element
<Toggle asChild>
  <button className="custom-toggle-button">
    Custom Toggle
  </button>
</Toggle>

// Using Root alias
<Toggle.Root pressed={isPressed}>
  Toggle Content
</Toggle.Root>

interface ToggleProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  /**
   * The controlled state of the toggle
   */
  pressed?: boolean;
  
  /**
   * The state of the toggle when initially rendered
   * Use when you do not need to control the state
   * @defaultValue false
   */
  defaultPressed?: boolean;
  
  /**
   * Callback that fires when the state of the toggle changes
   */
  onPressedChange?: (pressed: boolean) => void;
  
  /**
   * When true, merges props into the child element instead of rendering a button
   * Enables the slot pattern for custom element composition
   */
  asChild?: boolean;
  
  /**
   * All standard HTML button attributes are supported:
   * - Event handlers: onClick, onMouseDown, onMouseUp, onDoubleClick, etc.
   * - Form attributes: type, disabled, form, name, value, etc.
   * - Accessibility: aria-*, role, tabIndex, etc.
   * - Styling: className, style, data-*, etc.
   * - Standard attributes: id, title, lang, dir, etc.
   */
}

function ControlledExample() {
  const [isPressed, setIsPressed] = useState(false);
  
  // External state updates
  useEffect(() => {
    if (someCondition) {
      setIsPressed(true);
    }
  }, [someCondition]);
  
  return (
    <Toggle 
      pressed={isPressed} 
      onPressedChange={setIsPressed}
    >
      {isPressed ? "Active" : "Inactive"}
    </Toggle>
  );
}

function UncontrolledExample() {
  return (
    <Toggle 
      defaultPressed={false}
      onPressedChange={(pressed) => {
        // React to state changes without controlling the state
        console.log("Toggle is now:", pressed ? "pressed" : "unpressed");
      }}
    >
      Toggle Me
    </Toggle>
  );
}

// When pressed=false or unpressed
<button aria-pressed="false" data-state="off">...</button>

// When pressed=true or pressed  
<button aria-pressed="true" data-state="on">...</button>

// When disabled
<button disabled data-disabled="">...</button>

/* Target different states */
.toggle-button[data-state="on"] {
  background-color: blue;
  color: white;
}

.toggle-button[data-state="off"] {
  background-color: gray;
  color: black;
}

.toggle-button[data-disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

function CustomToggle() {
  return (
    <Toggle asChild pressed={isPressed} onPressedChange={setIsPressed}>
      <div className="custom-toggle-div" role="button" tabIndex={0}>
        <Icon name={isPressed ? "heart-filled" : "heart-outline"} />
        <span>{isPressed ? "Liked" : "Like"}</span>
      </div>
    </Toggle>
  );
}

function EnhancedToggle() {
  const handleClick = (event) => {
    console.log("Custom click handler");
    // Toggle's internal handler will still run unless preventDefault() is called
  };
  
  return (
    <Toggle 
      onClick={handleClick}
      onPressedChange={(pressed) => console.log("State changed:", pressed)}
    >
      Enhanced Toggle
    </Toggle>
  );
}

function FormToggle() {
  return (
    <form>
      <Toggle 
        name="notifications"
        value="enabled"
        defaultPressed
        onPressedChange={(pressed) => {
          // Update form state or trigger validation
        }}
      >
        Enable Notifications
      </Toggle>
    </form>
  );
}

/**
 * Complete props interface for Toggle component
 */
interface ToggleProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  pressed?: boolean;
  defaultPressed?: boolean;
  onPressedChange?: (pressed: boolean) => void;
  asChild?: boolean;
}