/**
 * Toggle Icon Button Stories
 * @generated 2025-12-11T14:37:52.652538
 */
import type { Meta, StoryObj } from '@storybook/preact';
import { ToggleIconButton, type ToggleIconButtonProps } from '../src/atoms/ToggleIconButton';

const meta: Meta<ToggleIconButtonProps> = {
  title: '2. Atoms/ToggleIconButton',
  component: ToggleIconButton,
  tags: ['autodocs'],
  parameters: {
    docs: {
      description: {
        component: `Auto-generated ToggleIconButton component

**Classification:** atom
**Slots:** icon
**Figma ID:** 164:20378`
      }
    }
  },
  argTypes: {
    roundness: {
      control: 'select',
      options: ['Default', 'Round'],
      description: 'Roundness variant',
    },
    skin: {
      control: 'select',
      options: ['Ghost', 'Outlined'],
      description: 'Skin variant',
    },
    size: {
      control: 'select',
      options: ['Default', 'Large', 'Mini', 'Small'],
      description: 'Size variant',
    },
    position: {
      control: 'select',
      options: ['Left', 'Middle', 'Right', 'Single'],
      description: 'Position variant',
    },
    active: {
      control: 'select',
      options: ['false', 'true'],
      description: 'Active variant',
    },
    state: {
      control: 'select',
      options: ['Default', 'Disabled', 'Focus'],
      description: 'State variant',
    },
  },
};

export default meta;
type Story = StoryObj<ToggleIconButtonProps>;

export const Default: Story = {
  args: {
    roundness: 'Default',
    skin: 'Ghost',
    size: 'Default',
    position: 'Left',
    active: 'false',
    state: 'Default',
    children: 'ToggleIconButton'
  },
};

export const SizeDefault: Story = {
  args: {
    ...Default.args,
    size: 'Default',
  },
};

export const SizeLarge: Story = {
  args: {
    ...Default.args,
    size: 'Large',
  },
};

export const SizeMini: Story = {
  args: {
    ...Default.args,
    size: 'Mini',
  },
};
