Form Controls

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  /** Render as child component using Radix Slot */
  asChild?: boolean;
  /** Button size */
  size?: 'small' | 'medium';
  /** Button padding */
  padding?: 'small' | 'medium' | 'none';
  /** Button visual variant */
  variant?: 'outline' | 'solid' | 'ghost';
  /** Click handler */
  onClick?: (event: React.SyntheticEvent) => void;
  /** Disabled state */
  disabled?: boolean;
  /** Active/pressed state */
  active?: boolean;
  /** Animation type */
  animation?: 'none' | 'rotate360' | 'glow' | 'jiggle';

  // Deprecated props (maintained for compatibility)
  /** @deprecated Use asChild instead. This will be removed in Storybook 9.0 */
  isLink?: boolean;
  /** @deprecated Use variant instead. This will be removed in Storybook 9.0 */
  primary?: boolean;
  /** @deprecated Use variant instead. This will be removed in Storybook 9.0 */
  secondary?: boolean;
  /** @deprecated Use variant instead. This will be removed in Storybook 9.0 */
  tertiary?: boolean;
  /** @deprecated Use variant instead. This will be removed in Storybook 9.0 */
  gray?: boolean;
  /** @deprecated Use variant instead. This will be removed in Storybook 9.0 */
  inForm?: boolean;
  /** @deprecated Use size instead. This will be removed in Storybook 9.0 */
  small?: boolean;
  /** @deprecated Use variant instead. This will be removed in Storybook 9.0 */
  outline?: boolean;
  /** @deprecated Add your icon as a child directly. This will be removed in Storybook 9.0 */
  containsIcon?: boolean;
}

/**
 * Primary button component with support for variants, sizes, animations, and accessibility features
 */
const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;

/**
 * Icon-based button component for toolbar and interface actions
 */
const IconButton: React.ComponentType<{
  children: React.ReactNode;
  onClick?: () => void;
  disabled?: boolean;
  active?: boolean;
  title?: string;
}>;

/**
 * Form components and utilities namespace
 * Contains form controls, inputs, and layout components
 */
const Form: {
  /** Form field container component for labels and inputs */
  Field: React.ComponentType<{
    label?: string;
    children: React.ReactNode;
    [key: string]: any;
  }>;
  /** Text input component */
  Input: React.ComponentType<React.InputHTMLAttributes<HTMLInputElement>>;
  /** Select dropdown component */
  Select: React.ComponentType<React.SelectHTMLAttributes<HTMLSelectElement>>;
  /** Textarea component for multi-line text */
  Textarea: React.ComponentType<React.TextareaHTMLAttributes<HTMLTextAreaElement>>;
  /** Button component (same as standalone Button) */
  Button: React.ComponentType<ButtonProps>;
} & React.ComponentType<React.FormHTMLAttributes<HTMLFormElement>>;

import { Button } from "@storybook/components";

// Solid button (primary action)
<Button variant="solid" size="medium" onClick={() => console.log('clicked')}>
  Submit
</Button>

// Outline button (secondary action)
<Button variant="outline" size="small">
  Cancel
</Button>

// Ghost button (subtle action)
<Button variant="ghost" active={true}>
  Active State
</Button>

import { Button } from "@storybook/components";

// Different variants
<Button variant="solid">Solid Button</Button>
<Button variant="outline">Outline Button</Button>
<Button variant="ghost">Ghost Button</Button>

// Different sizes
<Button size="small">Small Button</Button>
<Button size="medium">Medium Button</Button>

// Different padding
<Button padding="small">Small Padding</Button>
<Button padding="medium">Medium Padding</Button>
<Button padding="none">No Padding</Button>

import { Button } from "@storybook/components";

// Animated buttons
<Button animation="rotate360" onClick={() => {}}>
  Rotate on Click
</Button>

<Button animation="glow" onClick={() => {}}>
  Glow Effect
</Button>

<Button animation="jiggle" onClick={() => {}}>
  Jiggle Animation
</Button>

import { Button } from "@storybook/components";

// Different states
<Button disabled={true}>Disabled Button</Button>
<Button active={true}>Active Button</Button>

// With loading state (using children)
<Button disabled={true}>
  <span>Loading...</span>
</Button>

import { Button } from "@storybook/components";
import { Link } from "react-router-dom";

// Render as a link using asChild
<Button asChild variant="solid">
  <Link to="/dashboard">Go to Dashboard</Link>
</Button>

// Render as custom component
<Button asChild variant="outline">
  <a href="https://storybook.js.org" target="_blank">
    Visit Storybook
  </a>
</Button>

import { IconButton, Icons } from "@storybook/components";

<IconButton 
  onClick={() => console.log('icon clicked')}
  title="Settings"
  active={false}
>
  <Icons icon="settings" />
</IconButton>

// Disabled icon button
<IconButton disabled={true} title="Disabled Action">
  <Icons icon="trash" />
</IconButton>

import { Form } from "@storybook/components";

// Complete form with all components
<Form onSubmit={(e) => { e.preventDefault(); console.log('submitted'); }}>
  <Form.Field label="Name">
    <Form.Input 
      placeholder="Enter your name" 
      required 
    />
  </Form.Field>
  
  <Form.Field label="Description">
    <Form.Textarea 
      placeholder="Enter description"
      rows={4}
    />
  </Form.Field>
  
  <Form.Field label="Category">
    <Form.Select>
      <option value="">Select category</option>
      <option value="ui">UI Component</option>
      <option value="layout">Layout</option>
    </Form.Select>
  </Form.Field>
  
  <Form.Button variant="solid" type="submit">
    Submit Form
  </Form.Button>
</Form>

// Individual form components
<Form.Input type="email" placeholder="Email address" />
<Form.Select defaultValue="option1">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
</Form.Select>
<Form.Textarea rows={3} placeholder="Comments" />