import { ComponentDefinition } from '../../../proxy/developerKit/componentInfo'

export const CUSTOM_COMPONENTS: ComponentDefinition[] = [
  {
    name: 'Alert',
    icon: 'AlertCircle',
    category: 'feedback',
    description: 'App.ComponentAlert.AlertDescription',
    properties: [
      {
        name: 'children',
        type: 'string',
        value: 'Bu bir uyarı mesajıdır',
        category: 'properties',
      },
      {
        name: 'type',
        type: 'select',
        value: 'warning',
        category: 'properties',
        options: ['success', 'warning', 'danger', 'info'],
      },
      {
        name: 'closable',
        type: 'boolean',
        value: true,
        category: 'properties',
      },
      {
        name: 'customClose',
        type: 'string',
        value: '',
        category: 'properties',
      },
      { name: 'customIcon', type: 'string', value: '', category: 'properties' },
      { name: 'duration', type: 'number', value: 3000, category: 'properties' },
      {
        name: 'title',
        type: 'string',
        value: 'Uyarı Başlığı',
        category: 'properties',
      },
      { name: 'rounded', type: 'boolean', value: true, category: 'properties' },
      {
        name: 'showIcon',
        type: 'boolean',
        value: true,
        category: 'properties',
      },
      {
        name: 'triggerByToast',
        type: 'boolean',
        value: false,
        category: 'properties',
      },
      { name: 'className', type: 'string', value: '', category: 'styling' },
      { name: 'onClose', type: 'function', value: '', category: 'events' },
    ],
    hooks: [],
  },
  {
    name: 'Avatar',
    icon: 'User',
    category: 'media',
    description: 'App.ComponentAvatar.AvatarDescription',
    properties: [
      {
        name: 'alt',
        type: 'string',
        value: 'Kullanıcı Avatarı',
        category: 'properties',
      },
      { name: 'icon', type: 'string', value: '', category: 'properties' },
      {
        name: 'size',
        type: 'select',
        value: 'md',
        category: 'properties',
        options: ['sm', 'md', 'lg'],
      },
      {
        name: 'shape',
        type: 'select',
        value: 'rounded',
        category: 'properties',
        options: ['round', 'square', 'circle', 'rounded'],
      },
      {
        name: 'src',
        type: 'string',
        value:
          'https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&w=150',
        category: 'properties',
      },
      { name: 'srcSet', type: 'string', value: '', category: 'properties' },
      {
        name: 'title',
        type: 'string',
        value: 'Kullanıcı Avatarı',
        category: 'properties',
      },
      { name: 'className', type: 'string', value: '', category: 'styling' },
      { name: 'onClick', type: 'function', value: '', category: 'events' },
    ],
    hooks: [],
  },
  {
    name: 'Badge',
    icon: 'Tag',
    category: 'feedback',
    description: 'App.ComponentBadge.BadgeDescription',
    properties: [
      {
        name: 'children',
        type: 'string',
        value: 'New',
        category: 'properties',
      },
      {
        name: 'badgeStyle',
        type: 'object',
        value: {},
        category: 'properties',
      },
      {
        name: 'content',
        type: 'string',
        value: '5',
        category: 'properties',
      },
      { name: 'innerClass', type: 'string', value: '', category: 'styling' },
      { name: 'maxCount', type: 'number', value: 99, category: 'properties' },
      { name: 'className', type: 'string', value: '', category: 'styling' },
    ],
    hooks: [],
  },
  {
    name: 'Button',
    icon: 'MousePointer',
    category: 'basic',
    description: 'App.ComponentButton.ButtonDescription',
    properties: [
      {
        name: 'children',
        type: 'string',
        value: 'Buton',
        category: 'properties',
      },
      { name: 'active', type: 'boolean', value: false, category: 'properties' },
      { name: 'block', type: 'boolean', value: false, category: 'properties' },
      { name: 'color', type: 'string', value: 'blue-500', category: 'styling' },
      {
        name: 'disabled',
        type: 'boolean',
        value: false,
        category: 'properties',
      },
      { name: 'icon', type: 'string', value: '', category: 'properties' },
      {
        name: 'loading',
        type: 'boolean',
        value: false,
        category: 'properties',
      },
      {
        name: 'shape',
        type: 'select',
        value: 'round',
        category: 'properties',
        options: ['round', 'circle', 'none'],
      },
      {
        name: 'size',
        type: 'select',
        value: 'md',
        category: 'properties',
        options: ['md', 'sm', 'lg', 'xs'],
      },
      {
        name: 'variant',
        type: 'select',
        value: 'solid',
        category: 'properties',
        options: ['solid', 'twoTone', 'plain', 'default'],
      },
      { name: 'className', type: 'string', value: '', category: 'styling' },
      { name: 'onClick', type: 'function', value: '', category: 'events' },
    ],
    hooks: [],
  },
  {
    name: 'Card',
    icon: 'Square',
    category: 'layout',
    description: 'App.ComponentCard.CardDescription',
    properties: [
      {
        name: 'children',
        type: 'string',
        value:
          'Kart içeriği buraya gelir. Lorem ipsum dolor sit amet consectetur adipisicing elit.',
        category: 'properties',
      },
      {
        name: 'clickable',
        type: 'boolean',
        value: false,
        category: 'properties',
      },
      { name: 'bodyClass', type: 'string', value: '', category: 'styling' },
      {
        name: 'bordered',
        type: 'boolean',
        value: true,
        category: 'properties',
      },
      {
        name: 'header',
        type: 'string',
        value: 'Kart Başlığı',
        category: 'properties',
      },
      { name: 'headerClass', type: 'string', value: '', category: 'styling' },
      {
        name: 'headerBorder',
        type: 'boolean',
        value: true,
        category: 'properties',
      },
      {
        name: 'headerExtra',
        type: 'string',
        value: '',
        category: 'properties',
      },
      { name: 'footer', type: 'string', value: '', category: 'properties' },
      { name: 'footerClass', type: 'string', value: '', category: 'styling' },
      {
        name: 'footerBorder',
        type: 'boolean',
        value: true,
        category: 'properties',
      },
      { name: 'className', type: 'string', value: '', category: 'styling' },
      { name: 'onClick', type: 'function', value: '', category: 'events' },
    ],
    hooks: [],
  },
  {
    name: 'Checkbox',
    icon: 'Check',
    category: 'form',
    description: 'App.ComponentCheckbox.CheckboxDescription',
    properties: [
      {
        name: 'children',
        type: 'string',
        value: 'Onay Kutusu',
        category: 'properties',
      },
      {
        name: 'checked',
        type: 'boolean',
        value: false,
        category: 'properties',
      },
      { name: 'color', type: 'string', value: 'blue-500', category: 'styling' },
      {
        name: 'defaultChecked',
        type: 'boolean',
        value: false,
        category: 'properties',
      },
      {
        name: 'disabled',
        type: 'boolean',
        value: false,
        category: 'properties',
      },
      { name: 'name', type: 'string', value: '', category: 'properties' },
      {
        name: 'readOnly',
        type: 'boolean',
        value: false,
        category: 'properties',
      },
      { name: 'value', type: 'string', value: '', category: 'properties' },
      { name: 'field', type: 'string', value: null, category: 'properties' },
      { name: 'className', type: 'string', value: '', category: 'styling' },
      { name: 'onChange', type: 'function', value: '', category: 'events' },
    ],
    hooks: [
      { name: 'useState', type: 'useState', enabled: false },
      { name: 'useRef', type: 'useRef', enabled: false },
    ],
  },
  {
    name: 'DatePicker',
    icon: 'Calendar',
    category: 'form',
    description: 'App.ComponentDatePicker.DatePickerDescription',
    properties: [
      {
        name: 'closePickerOnChange',
        type: 'boolean',
        value: true,
        category: 'properties',
      },
      {
        name: 'defaultOpen',
        type: 'boolean',
        value: false,
        category: 'properties',
      },
      {
        name: 'defaultValue',
        type: 'string',
        value: '',
        category: 'properties',
      },
      { name: 'value', type: 'string', value: '', category: 'properties' },
      {
        name: 'inputFormat',
        type: 'string',
        value: 'YYYY-MM-DD',
        category: 'properties',
      },
      {
        name: 'inputtableBlurClose',
        type: 'boolean',
        value: true,
        category: 'properties',
      },
      {
        name: 'openPickerOnClear',
        type: 'boolean',
        value: false,
        category: 'properties',
      },
      { name: 'className', type: 'string', value: '', category: 'styling' },
      {
        name: 'clearable',
        type: 'boolean',
        value: true,
        category: 'properties',
      },
      {
        name: 'clearButton',
        type: 'string',
        value: '',
        category: 'properties',
      },
      {
        name: 'disabled',
        type: 'boolean',
        value: false,
        category: 'properties',
      },
      {
        name: 'inputtable',
        type: 'boolean',
        value: true,
        category: 'properties',
      },
      {
        name: 'inputPrefix',
        type: 'string',
        value: '',
        category: 'properties',
      },
      {
        name: 'inputSuffix',
        type: 'string',
        value: '',
        category: 'properties',
      },
      { name: 'name', type: 'string', value: 'date', category: 'properties' },
      {
        name: 'firstDayOfWeek',
        type: 'select',
        value: 'monday',
        category: 'properties',
        options: ['sunday', 'monday'],
      },
      {
        name: 'hideOutOfMonthDates',
        type: 'boolean',
        value: false,
        category: 'properties',
      },
      {
        name: 'hideWeekdays',
        type: 'boolean',
        value: false,
        category: 'properties',
      },
      {
        name: 'disableOutOfMonth',
        type: 'boolean',
        value: false,
        category: 'properties',
      },
      {
        name: 'enableHeaderLabel',
        type: 'boolean',
        value: true,
        category: 'properties',
      },
      {
        name: 'dateViewCount',
        type: 'number',
        value: 1,
        category: 'properties',
      },
      {
        name: 'defaultView',
        type: 'select',
        value: 'date',
        category: 'properties',
        options: ['date', 'month', 'year'],
      },
      {
        name: 'placeholder',
        type: 'string',
        value: 'Tarih seçin',
        category: 'properties',
      },
      {
        name: 'size',
        type: 'select',
        value: 'md',
        category: 'properties',
        options: ['sm', 'md', 'lg'],
      },
      { name: 'type', type: 'string', value: 'date', category: 'properties' },
      { name: 'onChange', type: 'function', value: '', category: 'events' },
      { name: 'onBlur', type: 'function', value: '', category: 'events' },
      {
        name: 'onDropdownOpen',
        type: 'function',
        value: '',
        category: 'events',
      },
      {
        name: 'onDropdownClose',
        type: 'function',
        value: '',
        category: 'events',
      },
      { name: 'onFocus', type: 'function', value: '', category: 'events' },
    ],
    hooks: [{ name: 'useState', type: 'useState', enabled: false }],
  },
  {
    name: 'Dialog',
    icon: 'Square',
    category: 'interactive',
    description: 'Modal dialog penceresi',
    properties: [
      {
        name: 'title',
        type: 'string',
        value: 'Dialog Başlığı',
        category: 'properties',
      },
      {
        name: 'children',
        type: 'string',
        value: 'Dialog içeriği buraya gelir.',
        category: 'properties',
      },
      {
        name: 'closable',
        type: 'boolean',
        value: true,
        category: 'properties',
      },
      {
        name: 'contentClassName',
        type: 'string',
        value: '',
        category: 'styling',
      },
      {
        name: 'height',
        type: 'number',
        value: '',
        category: 'properties',
      },
      { name: 'width', type: 'number', value: 520, category: 'properties' },
      { name: 'isOpen', type: 'boolean', value: false, category: 'properties' },
      {
        name: 'bodyOpenClassName',
        type: 'string',
        value: '',
        category: 'styling',
      },
      {
        name: 'htmlOpenClassName',
        type: 'string',
        value: '',
        category: 'styling',
      },
      { name: 'className', type: 'string', value: '', category: 'styling' },
      { name: 'onClose', type: 'function', value: '', category: 'events' },
    ],
    hooks: [{ name: 'useState', type: 'useState', enabled: false }],
  },
  {
    name: 'Drawer',
    icon: 'Sidebar',
    category: 'interactive',
    description: 'App.ComponentDrawer.DrawerDescription',
    properties: [
      {
        name: 'children',
        type: 'string',
        value: 'Drawer içeriği buraya gelir.',
        category: 'properties',
      },
      { name: 'bodyClass', type: 'string', value: '', category: 'styling' },
      {
        name: 'closable',
        type: 'boolean',
        value: true,
        category: 'properties',
      },
      {
        name: 'closeTimeoutMS',
        type: 'number',
        value: 300,
        category: 'properties',
      },
      { name: 'footer', type: 'string', value: '', category: 'properties' },
      { name: 'footerClass', type: 'string', value: '', category: 'styling' },
      { name: 'headerClass', type: 'string', value: '', category: 'styling' },
      { name: 'height', type: 'number', value: 400, category: 'properties' },
      {
        name: 'lockScroll',
        type: 'boolean',
        value: true,
        category: 'properties',
      },
      {
        name: 'placement',
        type: 'select',
        value: 'right',
        category: 'properties',
        options: ['left', 'right', 'top', 'bottom'],
      },
      {
        name: 'showBackdrop',
        type: 'boolean',
        value: true,
        category: 'properties',
      },
      {
        name: 'title',
        type: 'string',
        value: 'Drawer Başlığı',
        category: 'properties',
      },
      { name: 'width', type: 'number', value: 400, category: 'properties' },
      { name: 'isOpen', type: 'boolean', value: false, category: 'properties' },
      {
        name: 'showOkButton',
        type: 'boolean',
        value: true,
        category: 'properties',
      },
      {
        name: 'showCancelButton',
        type: 'boolean',
        value: true,
        category: 'properties',
      },
      { name: 'className', type: 'string', value: '', category: 'styling' },
      { name: 'onClose', type: 'function', value: '', category: 'events' },
    ],
    hooks: [{ name: 'useState', type: 'useState', enabled: false }],
  },
  {
    name: 'Dropdown',
    icon: 'MoreVertical',
    category: 'interactive',
    description: 'App.ComponentDropdown.DropdownDescription',
    properties: [
      {
        name: 'title',
        type: 'string',
        value: 'Dropdown',
        category: 'properties',
      },
      { name: 'menuClass', type: 'string', value: '', category: 'styling' },
      { name: 'menuStyle', type: 'string', value: '', category: 'styling' },
      {
        name: 'disabled',
        type: 'boolean',
        value: false,
        category: 'properties',
      },
      { name: 'activeKey', type: 'string', value: '', category: 'properties' },
      {
        name: 'trigger',
        type: 'select',
        value: 'click',
        category: 'properties',
        options: ['click', 'hover', 'context'],
      },
      {
        name: 'placement',
        type: 'string',
        value: 'bottom-start',
        category: 'properties',
      },
      { name: 'className', type: 'string', value: '', category: 'styling' },
      {
        name: 'items',
        type: 'array',
        value: [
          { eventKey: 'a', children: 'Öğe A', to: '' },
          { eventKey: 'b', children: 'Öğe B', to: '' },
          { eventKey: 'c', children: 'Öğe C', to: '' },
        ],
        category: 'properties',
      },
      { name: 'onClick', type: 'function', value: '', category: 'events' },
      { name: 'onMouseEnter', type: 'function', value: '', category: 'events' },
      { name: 'onMouseLeave', type: 'function', value: '', category: 'events' },
      {
        name: 'onContextMenu',
        type: 'function',
        value: '',
        category: 'events',
      },
      { name: 'onSelect', type: 'function', value: '', category: 'events' },
      { name: 'onOpen', type: 'function', value: '', category: 'events' },
      { name: 'onClose', type: 'function', value: '', category: 'events' },
      { name: 'onToggle', type: 'function', value: '', category: 'events' },
    ],
    hooks: [],
  },
  {
    name: 'Input',
    icon: 'Edit',
    category: 'form',
    description: 'App.ComponentInput.InputDescription',
    properties: [
      {
        name: 'disabled',
        type: 'boolean',
        value: false,
        category: 'properties',
      },
      {
        name: 'invalid',
        type: 'boolean',
        value: false,
        category: 'properties',
      },
      { name: 'rows', type: 'number', value: 3, category: 'properties' },
      { name: 'prefix', type: 'string', value: '', category: 'properties' },
      {
        name: 'size',
        type: 'select',
        value: 'md',
        category: 'properties',
        options: ['sm', 'md', 'lg'],
      },
      { name: 'suffix', type: 'string', value: '', category: 'properties' },
      {
        name: 'textArea',
        type: 'boolean',
        value: false,
        category: 'properties',
      },
      {
        name: 'type',
        type: 'select',
        value: 'text',
        category: 'properties',
        options: [
          'button',
          'checkbox',
          'color',
          'date',
          'datetime-local',
          'email',
          'file',
          'hidden',
          'image',
          'month',
          'number',
          'password',
          'radio',
          'range',
          'reset',
          'search',
          'submit',
          'tel',
          'text',
          'time',
          'url',
          'week',
        ],
      },
      {
        name: 'unstyle',
        type: 'boolean',
        value: false,
        category: 'properties',
      },
      { name: 'className', type: 'string', value: '', category: 'styling' },
      {
        name: 'placeholder',
        type: 'string',
        value: 'Metin girin...',
        category: 'properties',
      },
      { name: 'value', type: 'string', value: '', category: 'properties' },
      { name: 'name', type: 'string', value: '', category: 'properties' },
      {
        name: 'autoComplete',
        type: 'select',
        value: 'off',
        category: 'properties',
        options: ['on', 'off'],
      },
      {
        name: 'autoFocus',
        type: 'boolean',
        value: false,
        category: 'properties',
      },
      {
        name: 'readOnly',
        type: 'boolean',
        value: false,
        category: 'properties',
      },
      {
        name: 'required',
        type: 'boolean',
        value: false,
        category: 'properties',
      },
      {
        name: 'maxLength',
        type: 'number',
        value: '',
        category: 'properties',
      },
      {
        name: 'minLength',
        type: 'number',
        value: '',
        category: 'properties',
      },
      { name: 'pattern', type: 'string', value: '', category: 'properties' },
      { name: 'onChange', type: 'function', value: '', category: 'events' },
    ],
    hooks: [
      { name: 'useState', type: 'useState', enabled: false, initialValue: '' },
      { name: 'useRef', type: 'useRef', enabled: false },
    ],
  },
  {
    name: 'Menu',
    icon: 'Menu',
    category: 'navigation',
    description: 'App.ComponentMenu.MenuDescription',
    properties: [
      { name: 'children', type: 'string', value: '', category: 'properties' },
      {
        name: 'menuItemHeight',
        type: 'number',
        value: 40,
        category: 'properties',
      },
      {
        name: 'sideCollapsed',
        type: 'boolean',
        value: false,
        category: 'properties',
      },
      {
        name: 'variant',
        type: 'select',
        value: 'light',
        category: 'properties',
        options: ['light', 'dark', 'themed', 'transparent'],
      },
      { name: 'icon', type: 'string', value: '', category: 'properties' },
      { name: 'className', type: 'string', value: '', category: 'styling' },
      {
        name: 'items',
        type: 'array',
        value: [
          {
            eventKey: 'ayarlar',
            icon: '',
            children: 'Ayarlar',
            label: 'Ayarlar',
            disabled: false,
          },
          {
            eventKey: 'mesaj',
            icon: '',
            children: 'Mesaj',
            label: 'Mesaj',
            disabled: false,
          },
          {
            eventKey: 'galeri',
            icon: '',
            children: 'Galeri',
            label: 'Galeri',
            disabled: false,
          },
        ],
        category: 'properties',
      },
      { name: 'onSelect', type: 'function', value: '', category: 'events' },
    ],
    hooks: [],
  },
  {
    name: 'Notification',
    icon: 'Bell',
    category: 'feedback',
    description: 'App.ComponentNotification.NotificationDescription',
    properties: [
      {
        name: 'children',
        type: 'string',
        value: 'Bu bir bildirim mesajıdır',
        category: 'properties',
      },
      {
        name: 'closable',
        type: 'boolean',
        value: true,
        category: 'properties',
      },
      { name: 'customIcon', type: 'string', value: '', category: 'properties' },
      { name: 'duration', type: 'number', value: 3000, category: 'properties' },
      {
        name: 'title',
        type: 'string',
        value: 'Bildirim Başlığı',
        category: 'properties',
      },
      {
        name: 'triggerByToast',
        type: 'boolean',
        value: false,
        category: 'properties',
      },
      {
        name: 'type',
        type: 'select',
        value: 'info',
        category: 'properties',
        options: ['success', 'warning', 'danger', 'info'],
      },
      { name: 'width', type: 'string', value: '350', category: 'properties' },
      { name: 'className', type: 'string', value: '', category: 'styling' },
      { name: 'onClose', type: 'function', value: '', category: 'events' },
    ],
    hooks: [],
  },
  {
    name: 'Pagination',
    icon: 'ChevronRight',
    category: 'navigation',
    description: 'App.ComponentPagination.PaginationDescription',
    properties: [
      { name: 'currentPage', type: 'number', value: 1, category: 'properties' },
      {
        name: 'displayTotal',
        type: 'boolean',
        value: true,
        category: 'properties',
      },
      { name: 'pageSize', type: 'number', value: 10, category: 'properties' },
      { name: 'total', type: 'number', value: 100, category: 'properties' },
      { name: 'className', type: 'string', value: '', category: 'styling' },
      { name: 'onChange', type: 'function', value: '', category: 'events' },
    ],
    hooks: [{ name: 'useState', type: 'useState', enabled: false }],
  },
  {
    name: 'Progress',
    icon: 'Activity',
    category: 'feedback',
    description: 'App.ComponentProgress.ProgressDescription',
    properties: [
      { name: 'customInfo', type: 'string', value: '', category: 'properties' },
      { name: 'color', type: 'string', value: '', category: 'styling' },
      { name: 'gapDegree', type: 'number', value: 0, category: 'properties' },
      {
        name: 'gapPosition',
        type: 'select',
        value: 'top',
        category: 'properties',
        options: ['top', 'bottom', 'left', 'right'],
      },
      { name: 'percent', type: 'number', value: 50, category: 'properties' },
      {
        name: 'showInfo',
        type: 'boolean',
        value: true,
        category: 'properties',
      },
      {
        name: 'size',
        type: 'select',
        value: 'md',
        category: 'properties',
        options: ['sm', 'md'],
      },
      {
        name: 'strokeLinecap',
        type: 'select',
        value: 'round',
        category: 'properties',
        options: ['round', 'square'],
      },
      { name: 'strokeWidth', type: 'number', value: 8, category: 'properties' },
      { name: 'width', type: 'number', value: 120, category: 'properties' },
      {
        name: 'variant',
        type: 'select',
        value: 'line',
        category: 'properties',
        options: ['line', 'circle'],
      },
      { name: 'className', type: 'string', value: '', category: 'styling' },
    ],
    hooks: [],
  },
  {
    name: 'Radio.Group',
    icon: 'Circle',
    category: 'form',
    description: 'Radio buton grubu',
    properties: [
      {
        name: 'checked',
        type: 'boolean',
        value: false,
        category: 'properties',
      },
      { name: 'color', type: 'string', value: 'blue-500', category: 'styling' },
      {
        name: 'defaultChecked',
        type: 'boolean',
        value: false,
        category: 'properties',
      },
      {
        name: 'disabled',
        type: 'boolean',
        value: false,
        category: 'properties',
      },
      {
        name: 'name',
        type: 'string',
        value: 'radioGroup',
        category: 'properties',
      },
      { name: 'value', type: 'string', value: '', category: 'properties' },
      {
        name: 'vertical',
        type: 'boolean',
        value: false,
        category: 'properties',
      },
      {
        name: 'readOnly',
        type: 'boolean',
        value: false,
        category: 'properties',
      },
      { name: 'className', type: 'string', value: '', category: 'styling' },
      {
        name: 'items',
        type: 'array',
        value: [
          { value: 'secenekA', label: 'Seçenek A', disabled: false },
          { value: 'secenekB', label: 'Seçenek B', disabled: false },
          { value: 'secenekC', label: 'Seçenek C', disabled: false },
        ],
        category: 'properties',
      },
      { name: 'onChange', type: 'function', value: '', category: 'events' },
    ],
    hooks: [{ name: 'useState', type: 'useState', enabled: false }],
  },
  {
    name: 'Segment',
    icon: 'ToggleLeft',
    category: 'form',
    description: 'App.ComponentSegment.SegmentDescription',
    properties: [
      { name: 'children', type: 'string', value: '', category: 'properties' },
      {
        name: 'defaultValue',
        type: 'string',
        value: '',
        category: 'properties',
      },
      {
        name: 'selectionType',
        type: 'select',
        value: 'single',
        category: 'properties',
        options: ['single', 'multiple'],
      },
      {
        name: 'size',
        type: 'select',
        value: 'md',
        category: 'properties',
        options: ['lg', 'md', 'sm', 'xs'],
      },
      { name: 'value', type: 'string', value: '', category: 'properties' },
      { name: 'className', type: 'string', value: '', category: 'styling' },
      {
        name: 'items',
        type: 'array',
        value: [
          { label: 'Seçenek 1', value: 'secenekA', icon: '', disabled: false },
          { label: 'Seçenek 2', value: 'secenekB', icon: '', disabled: false },
          { label: 'Seçenek 3', value: 'secenekC', icon: '', disabled: false },
        ],
        category: 'properties',
      },
      { name: 'onChange', type: 'function', value: '', category: 'events' },
    ],
    hooks: [],
  },
  {
    name: 'Select',
    icon: 'ChevronDown',
    category: 'form',
    description: 'App.ComponentSelect.SelectDescription',
    properties: [
      { name: 'children', type: 'string', value: '', category: 'properties' },
      {
        name: 'size',
        type: 'select',
        value: 'md',
        category: 'properties',
        options: ['sm', 'md', 'lg'],
      },
      { name: 'className', type: 'string', value: '', category: 'styling' },
      { name: 'value', type: 'string', value: '', category: 'properties' },
      {
        name: 'disabled',
        type: 'boolean',
        value: false,
        category: 'properties',
      },
      {
        name: 'multiple',
        type: 'boolean',
        value: false,
        category: 'properties',
      },
      {
        name: 'clearable',
        type: 'boolean',
        value: false,
        category: 'properties',
      },
      {
        name: 'searchable',
        type: 'boolean',
        value: true,
        category: 'properties',
      },
      {
        name: 'items',
        type: 'array',
        value: [
          { label: 'Seçenek 1', value: 'secenekA', disabled: false },
          { label: 'Seçenek 2', value: 'secenekB', disabled: false },
          { label: 'Seçenek 3', value: 'secenekC', disabled: false },
        ],
        category: 'properties',
      },
      { name: 'onChange', type: 'function', value: '', category: 'events' },
      { name: 'onSearch', type: 'function', value: '', category: 'events' },
    ],
    hooks: [{ name: 'useState', type: 'useState', enabled: false }],
  },
  {
    name: 'Skeleton',
    icon: 'Square',
    category: 'feedback',
    description: 'App.ComponentSkeleton.SkeletonDescription',
    properties: [
      {
        name: 'animated',
        type: 'boolean',
        value: true,
        category: 'properties',
      },
      { name: 'height', type: 'string', value: '', category: 'properties' },
      {
        name: 'variant',
        type: 'select',
        value: 'block',
        category: 'properties',
        options: ['block', 'circle'],
      },
      { name: 'width', type: 'string', value: '', category: 'properties' },
      { name: 'className', type: 'string', value: '', category: 'styling' },
    ],
    hooks: [],
  },
  {
    name: 'Spinner',
    icon: 'Loader',
    category: 'feedback',
    description: 'App.ComponentSpinner.SpinnerDescription',
    properties: [
      { name: 'color', type: 'string', value: '#3b82f6', category: 'styling' },
      {
        name: 'enableTheme',
        type: 'boolean',
        value: true,
        category: 'properties',
      },
      {
        name: 'isSpining',
        type: 'boolean',
        value: true,
        category: 'properties',
      },
      {
        name: 'size',
        type: 'number',
        value: 'md',
        category: 'properties',
      },
      { name: 'className', type: 'string', value: '', category: 'styling' },
    ],
    hooks: [],
  },
  {
    name: 'Steps',
    icon: 'GitBranch',
    category: 'navigation',
    description: 'App.ComponentSteps.StepsDescription',
    properties: [
      { name: 'children', type: 'string', value: '', category: 'properties' },
      { name: 'current', type: 'number', value: 0, category: 'properties' },
      {
        name: 'status',
        type: 'select',
        value: 'in-progress',
        category: 'properties',
        options: ['in-progress', 'error', 'complete', 'pending'],
      },
      {
        name: 'vertical',
        type: 'boolean',
        value: false,
        category: 'properties',
      },
      { name: 'className', type: 'string', value: '', category: 'styling' },
      {
        name: 'items',
        type: 'array',
        value: [
          {
            title: 'Giriş',
            description: 'App.ComponentArray.ArrayDescription',
            icon: '',
          },
          {
            title: 'Sipariş',
            description: 'App.ComponentArray.ArrayDescription2',
            icon: '',
          },
          {
            title: 'İnceleme',
            description: 'App.ComponentArray.ArrayDescription3',
            icon: '',
          },
          { title: 'Onay', description: 'App.ComponentArray.ArrayDescription4', icon: '' },
        ],
        category: 'properties',
      },
      { name: 'onChange', type: 'function', value: '', category: 'events' },
    ],
    hooks: [{ name: 'useState', type: 'useState', enabled: false }],
  },
  {
    name: 'Switcher',
    icon: 'ToggleLeft',
    category: 'form',
    description: 'App.ComponentSwitcher.SwitcherDescription',
    properties: [
      {
        name: 'checked',
        type: 'boolean',
        value: false,
        category: 'properties',
      },
      {
        name: 'checkedContent',
        type: 'string',
        value: '',
        category: 'properties',
      },
      { name: 'color', type: 'string', value: '', category: 'styling' },
      {
        name: 'defaultChecked',
        type: 'boolean',
        value: false,
        category: 'properties',
      },
      {
        name: 'disabled',
        type: 'boolean',
        value: false,
        category: 'properties',
      },
      {
        name: 'isLoading',
        type: 'boolean',
        value: true,
        category: 'properties',
      },
      { name: 'name', type: 'string', value: '', category: 'properties' },
      {
        name: 'readOnly',
        type: 'boolean',
        value: false,
        category: 'properties',
      },
      {
        name: 'unCheckedContent',
        type: 'string',
        value: '',
        category: 'properties',
      },
      { name: 'className', type: 'string', value: '', category: 'styling' },
      { name: 'onChange', type: 'function', value: '', category: 'events' },
    ],
    hooks: [{ name: 'useState', type: 'useState', enabled: false }],
  },
  {
    name: 'Table',
    icon: 'Table',
    category: 'data',
    description: 'Veri tablosu',
    properties: [
      {
        name: 'borderlessRow',
        type: 'boolean',
        value: false,
        category: 'properties',
      },
      {
        name: 'compact',
        type: 'boolean',
        value: false,
        category: 'properties',
      },
      {
        name: 'hoverable',
        type: 'boolean',
        value: true,
        category: 'properties',
      },
      {
        name: 'overflow',
        type: 'boolean',
        value: true,
        category: 'properties',
      },
      { name: 'className', type: 'string', value: '', category: 'styling' },
      {
        name: 'columns',
        type: 'array',
        value: [
          { title: 'Ad', dataIndex: 'name', key: 'name' },
          { title: 'Yaş', dataIndex: 'age', key: 'age' },
          { title: 'Şehir', dataIndex: 'city', key: 'city' },
        ],
        category: 'properties',
      },
      {
        name: 'data',
        type: 'array',
        value: [
          { key: 1, name: 'Ali Veli', age: 32, city: 'İstanbul' },
          { key: 2, name: 'Ayşe Fatma', age: 28, city: 'Ankara' },
          { key: 3, name: 'Mehmet Can', age: 35, city: 'İzmir' },
        ],
        category: 'properties',
      },
    ],
    hooks: [],
  },
  {
    name: 'Tabs',
    icon: 'Tabs',
    category: 'navigation',
    description: 'Sekmeli navigasyon',
    properties: [
      {
        name: 'defaultValue',
        type: 'string',
        value: 'tab1',
        category: 'properties',
      },
      { name: 'value', type: 'string', value: '', category: 'properties' },
      {
        name: 'variant',
        type: 'select',
        value: 'underline',
        category: 'properties',
        options: ['underline', 'pill'],
      },
      { name: 'className', type: 'string', value: '', category: 'styling' },
      {
        name: 'items',
        type: 'array',
        value: [
          {
            key: 'tab1',
            label: 'Sekme 1',
            children: 'İlk sekme içeriği',
            disabled: false,
          },
          {
            key: 'tab2',
            label: 'Sekme 2',
            children: 'İkinci sekme içeriği',
            disabled: false,
          },
          {
            key: 'tab3',
            label: 'Sekme 3',
            children: 'Üçüncü sekme içeriği',
            disabled: false,
          },
        ],
        category: 'properties',
      },
      { name: 'onChange', type: 'function', value: '', category: 'events' },
    ],
    hooks: [{ name: 'useState', type: 'useState', enabled: false }],
  },
  {
    name: 'Tag',
    icon: 'Hash',
    category: 'feedback',
    description: 'App.ComponentTag.TagDescription',
    properties: [
      {
        name: 'children',
        type: 'string',
        value: 'Etiket',
        category: 'properties',
      },
      { name: 'prefix', type: 'boolean', value: false, category: 'properties' },
      { name: 'suffix', type: 'boolean', value: false, category: 'properties' },
      { name: 'prefixClass', type: 'string', value: '', category: 'styling' },
      { name: 'suffixClass', type: 'string', value: '', category: 'styling' },
      { name: 'className', type: 'string', value: '', category: 'styling' },
      { name: 'onClose', type: 'function', value: '', category: 'events' },
    ],
    hooks: [],
  },
  {
    name: 'TimeInput',
    icon: 'Clock',
    category: 'form',
    description: 'App.ComponentTimeInput.TimeInputDescription',
    properties: [
      { name: 'amLabel', type: 'string', value: 'AM', category: 'properties' },
      {
        name: 'amPmPlaceholder',
        type: 'string',
        value: 'AM',
        category: 'properties',
      },
      {
        name: 'clearable',
        type: 'boolean',
        value: true,
        category: 'properties',
      },
      {
        name: 'defaultValue',
        type: 'string',
        value: '',
        category: 'properties',
      },
      {
        name: 'disabled',
        type: 'boolean',
        value: false,
        category: 'properties',
      },
      {
        name: 'format',
        type: 'select',
        value: '24',
        category: 'properties',
        options: ['12', '24'],
      },
      {
        name: 'invalid',
        type: 'boolean',
        value: false,
        category: 'properties',
      },
      { name: 'name', type: 'string', value: '', category: 'properties' },
      { name: 'pmLabel', type: 'string', value: 'PM', category: 'properties' },
      { name: 'prefix', type: 'string', value: '', category: 'properties' },
      {
        name: 'showSeconds',
        type: 'boolean',
        value: false,
        category: 'properties',
      },
      {
        name: 'size',
        type: 'select',
        value: 'md',
        category: 'properties',
        options: ['sm', 'md', 'lg'],
      },
      { name: 'suffix', type: 'string', value: '', category: 'properties' },
      {
        name: 'timeFieldPlaceholder',
        type: 'string',
        value: '--:--',
        category: 'properties',
      },
      {
        name: 'timeFieldClass',
        type: 'string',
        value: '',
        category: 'styling',
      },
      {
        name: 'unstyle',
        type: 'boolean',
        value: false,
        category: 'properties',
      },
      { name: 'value', type: 'string', value: '', category: 'properties' },
      { name: 'className', type: 'string', value: '', category: 'styling' },
      { name: 'onchange', type: 'function', value: '', category: 'events' },
    ],
    hooks: [{ name: 'useState', type: 'useState', enabled: false }],
  },
  {
    name: 'Tooltip',
    icon: 'MessageCircle',
    category: 'interactive',
    description: 'App.ComponentTooltip.TooltipDescription',
    properties: [
      {
        name: 'children',
        type: 'string',
        value: 'Üzerime gel',
        category: 'properties',
      },
      {
        name: 'placement',
        type: 'select',
        value: 'top',
        category: 'properties',
        options: [
          'right',
          'left',
          'top',
          'bottom',
          'bottom-start',
          'top-start',
          'top-end',
          'bottom-end',
          'right-start',
          'right-end',
          'left-start',
          'left-end',
        ],
      },
      {
        name: 'title',
        type: 'string',
        value: 'Tooltip içeriği',
        category: 'properties',
      },
      { name: 'wrapperClass', type: 'string', value: '', category: 'styling' },
      { name: 'className', type: 'string', value: '', category: 'styling' },
    ],
    hooks: [{ name: 'useState', type: 'useState', enabled: false }],
  },
  {
    name: 'Upload',
    icon: 'Upload',
    category: 'form',
    description: 'App.ComponentUpload.UploadDescription',
    properties: [
      {
        name: 'children',
        type: 'string',
        value: 'Dosya yükle',
        category: 'properties',
      },
      { name: 'accept', type: 'string', value: '', category: 'properties' },
      {
        name: 'disabled',
        type: 'boolean',
        value: false,
        category: 'properties',
      },
      {
        name: 'draggable',
        type: 'boolean',
        value: true,
        category: 'properties',
      },
      { name: 'fileList', type: 'array', value: [], category: 'properties' },
      { name: 'fileListClass', type: 'string', value: '', category: 'styling' },
      { name: 'fileItemClass', type: 'string', value: '', category: 'styling' },
      {
        name: 'multiple',
        type: 'boolean',
        value: false,
        category: 'properties',
      },
      {
        name: 'showList',
        type: 'boolean',
        value: true,
        category: 'properties',
      },
      { name: 'tip', type: 'string', value: '', category: 'properties' },
      { name: 'uploadLimit', type: 'number', value: 5, category: 'properties' },
      { name: 'className', type: 'string', value: '', category: 'styling' },
      { name: 'beforeUpload', type: 'function', value: '', category: 'events' },
      { name: 'onChange', type: 'function', value: '', category: 'events' },
      { name: 'onFileRemove', type: 'function', value: '', category: 'events' },
    ],
    hooks: [],
  },
  {
    name: 'Grid',
    icon: 'Grid3x3',
    category: 'layout',
    description: 'App.ComponentGrid.GridDescription',
    properties: [
      { name: 'children', type: 'string', value: '', category: 'properties' },
      {
        name: 'cols',
        type: 'select',
        value: '3',
        category: 'properties',
        options: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
      },
      {
        name: 'rows',
        type: 'select',
        value: '2',
        category: 'properties',
        options: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
      },
      {
        name: 'gap',
        type: 'select',
        value: '4',
        category: 'properties',
        options: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
      },
      {
        name: 'colGap',
        type: 'select',
        value: '4',
        category: 'properties',
        options: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
      },
      {
        name: 'rowGap',
        type: 'select',
        value: '4',
        category: 'properties',
        options: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
      },
      {
        name: 'responsive',
        type: 'boolean',
        value: true,
        category: 'properties',
      },
      {
        name: 'smCols',
        type: 'select',
        value: '1',
        category: 'properties',
        options: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
      },
      {
        name: 'mdCols',
        type: 'select',
        value: '2',
        category: 'properties',
        options: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
      },
      {
        name: 'lgCols',
        type: 'select',
        value: '3',
        category: 'properties',
        options: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
      },
      {
        name: 'xlCols',
        type: 'select',
        value: '4',
        category: 'properties',
        options: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
      },
      {
        name: 'autoFit',
        type: 'boolean',
        value: false,
        category: 'properties',
      },
      {
        name: 'minColWidth',
        type: 'string',
        value: '200px',
        category: 'properties',
      },
      { name: 'height', type: 'string', value: 'auto', category: 'properties' },
      { name: 'className', type: 'string', value: '', category: 'styling' },
      {
        name: 'items',
        type: 'array',
        value: [
          {
            id: 'grid-item-1',
            content: 'Grid Item 1',
            colSpan: 1,
            rowSpan: 1,
            colStart: 1,
            rowStart: 1,
            className: 'bg-blue-100 p-4 border rounded',
          },
          {
            id: 'grid-item-2',
            content: 'Grid Item 2',
            colSpan: 1,
            rowSpan: 1,
            colStart: 2,
            rowStart: 1,
            className: 'bg-green-100 p-4 border rounded',
          },
          {
            id: 'grid-item-3',
            content: 'Grid Item 3',
            colSpan: 1,
            rowSpan: 1,
            colStart: 3,
            rowStart: 1,
            className: 'bg-yellow-100 p-4 border rounded',
          },
          {
            id: 'grid-item-4',
            content: 'Grid Item 4',
            colSpan: 2,
            rowSpan: 1,
            colStart: 1,
            rowStart: 2,
            className: 'bg-purple-100 p-4 border rounded',
          },
          {
            id: 'grid-item-5',
            content: 'Grid Item 5',
            colSpan: 1,
            rowSpan: 1,
            colStart: 3,
            rowStart: 2,
            className: 'bg-red-100 p-4 border rounded',
          },
        ],
        category: 'properties',
      },
    ],
    hooks: [],
  },
]
export const HTML_ELEMENTS: ComponentDefinition[] = [
  {
    name: 'div',
    icon: 'Square',
    category: 'basic',
    description: 'App.ComponentDiv.DivDescription',
    properties: [
      {
        name: 'children',
        type: 'string',
        value: '',
        category: 'properties',
      },
      {
        name: 'className',
        type: 'string',
        value: '',
        category: 'properties',
      },
      {
        name: 'style',
        type: 'object',
        value: {},
        category: 'properties',
      },
      {
        name: 'onClick',
        type: 'string',
        value: '',
        category: 'events',
      },
      {
        name: 'onMouseEnter',
        type: 'string',
        value: '',
        category: 'events',
      },
      {
        name: 'onMouseLeave',
        type: 'string',
        value: '',
        category: 'events',
      },
    ],
    hooks: [
      {
        name: 'useState',
        type: 'useState',
        enabled: false,
      },
      {
        name: 'useRef',
        type: 'useRef',
        enabled: false,
      },
    ],
  },
  {
    name: 'input',
    icon: 'Input',
    category: 'form',
    description: 'App.ComponentInput.InputDescription2',
    properties: [
      {
        name: 'type',
        type: 'select',
        value: 'text',
        options: ['text', 'password', 'email', 'number', 'tel', 'url'],
        category: 'properties',
      },
      { name: 'value', type: 'string', value: '', category: 'properties' },
      {
        name: 'placeholder',
        type: 'string',
        value: '',
        category: 'properties',
      },
      {
        name: 'disabled',
        type: 'boolean',
        value: false,
        category: 'properties',
      },
      {
        name: 'required',
        type: 'boolean',
        value: false,
        category: 'properties',
      },
      { name: 'className', type: 'string', value: '', category: 'properties' },
      { name: 'onClick', type: 'function', value: '', category: 'events' },
      { name: 'onKeyDown', type: 'function', value: '', category: 'events' },
      { name: 'onKeyUp', type: 'function', value: '', category: 'events' },
      { name: 'onChange', type: 'function', value: '', category: 'events' },
      { name: 'onFocus', type: 'function', value: '', category: 'events' },
      { name: 'onBlur', type: 'function', value: '', category: 'events' },
    ],
    hooks: [
      { name: 'useState', type: 'useState', enabled: false, initialValue: '' },
      { name: 'useRef', type: 'useRef', enabled: false },
    ],
  },
  {
    name: 'button',
    icon: 'MousePointerClick',
    category: 'form',
    description: 'App.ComponentButton.ButtonDescription2',
    properties: [
      {
        name: 'children',
        type: 'string',
        value: '',
        description: 'Button text',
        category: 'properties',
      },
      {
        name: 'type',
        type: 'select',
        value: 'button',
        options: ['button', 'submit', 'reset'],
        category: 'properties',
      },
      {
        name: 'disabled',
        type: 'boolean',
        value: false,
        category: 'properties',
      },
      {
        name: 'className',
        type: 'string',
        value: '',
        category: 'properties',
      },
      {
        name: 'onClick',
        type: 'function',
        value: '',
        category: 'events',
      },
    ],
    hooks: [
      {
        name: 'useState',
        type: 'useState',
        enabled: false,
        initialValue: false,
      },
    ],
  },
  {
    name: 'textarea',
    icon: 'AlignLeft',
    category: 'form',
    description: 'App.ComponentTextarea.TextareaDescription',
    properties: [
      {
        name: 'value',
        type: 'string',
        value: '',
        category: 'properties',
      },
      {
        name: 'placeholder',
        type: 'string',
        value: '',
        category: 'properties',
      },
      {
        name: 'rows',
        type: 'number',
        value: 4,
        category: 'properties',
      },
      {
        name: 'cols',
        type: 'number',
        value: 50,
        category: 'properties',
      },
      {
        name: 'disabled',
        type: 'boolean',
        value: false,
        category: 'properties',
      },
      {
        name: 'className',
        type: 'string',
        value: '',
        category: 'properties',
      },
      {
        name: 'onChange',
        type: 'function',
        value: '',
        category: 'events',
      },
    ],
    hooks: [
      {
        name: 'useState',
        type: 'useState',
        enabled: false,
        initialValue: '',
      },
    ],
  },
  {
    name: 'select',
    icon: 'ListTree',
    category: 'form',
    description: 'App.ComponentSelect.SelectDescription2',
    properties: [
      {
        name: 'value',
        type: 'string',
        value: '',
        category: 'properties',
      },
      {
        name: 'disabled',
        type: 'boolean',
        value: false,
        category: 'properties',
      },
      {
        name: 'multiple',
        type: 'boolean',
        value: false,
        category: 'properties',
      },
      {
        name: 'className',
        type: 'string',
        value: '',
        category: 'properties',
      },
      {
        name: 'onChange',
        type: 'function',
        value: '',
        category: 'events',
      },
    ],
    hooks: [
      {
        name: 'useState',
        type: 'useState',
        enabled: false,
        initialValue: '',
      },
    ],
  },
  {
    name: 'checkbox',
    icon: 'CheckSquare',
    category: 'form',
    description: 'App.ComponentCheckbox.CheckboxDescription2',
    properties: [
      {
        name: 'checked',
        type: 'boolean',
        value: false,
        category: 'properties',
      },
      {
        name: 'disabled',
        type: 'boolean',
        value: false,
        category: 'properties',
      },
      { name: 'className', type: 'string', value: '', category: 'properties' },
      { name: 'onChange', type: 'function', value: '', category: 'events' },
    ],
    hooks: [
      {
        name: 'useState',
        type: 'useState',
        enabled: false,
        initialValue: false,
      },
    ],
  },
  {
    name: 'p',
    icon: 'Text',
    category: 'basic',
    description: 'App.ComponentP.PDescription',
    properties: [
      {
        name: 'children',
        type: 'string',
        value: '',
        description: 'Text content',
        category: 'properties',
      },
      {
        name: 'className',
        type: 'string',
        value: '',
        category: 'properties',
      },
      {
        name: 'onClick',
        type: 'function',
        value: '',
        category: 'properties',
      },
    ],
    hooks: [
      {
        name: 'useState',
        type: 'useState',
        enabled: false,
      },
    ],
  },
  {
    name: 'span',
    icon: 'Type',
    category: 'basic',
    description: 'App.ComponentSpan.SpanDescription',
    properties: [
      {
        name: 'children',
        type: 'string',
        value: '',
        description: 'Text content',
        category: 'properties',
      },
      {
        name: 'className',
        type: 'string',
        value: '',
        category: 'properties',
      },
      {
        name: 'onClick',
        type: 'function',
        value: '',
        category: 'events',
      },
    ],
    hooks: [
      {
        name: 'useState',
        type: 'useState',
        enabled: false,
      },
    ],
  },
  {
    name: 'h1',
    icon: 'Heading1',
    category: 'basic',
    description: 'App.ComponentH1.H1Description',
    properties: [
      {
        name: 'children',
        type: 'string',
        value: '',
        description: 'Heading text',
        category: 'properties',
      },
      {
        name: 'className',
        type: 'string',
        value: '',
        category: 'styling',
      },
      {
        name: 'onClick',
        type: 'function',
        value: '',
        description: 'Click event handler',
        category: 'events',
      },
    ],
    hooks: [
      {
        name: 'useState',
        type: 'useState',
        enabled: false,
      },
    ],
  },
  {
    name: 'h2',
    icon: 'Heading2',
    category: 'basic',
    description: 'App.ComponentH2.H2Description',
    properties: [
      {
        name: 'children',
        type: 'string',
        value: '',
        description: 'Heading text',
        category: 'properties',
      },
      {
        name: 'className',
        type: 'string',
        value: '',
        category: 'styling',
      },
      {
        name: 'onClick',
        type: 'function',
        value: '',
        description: 'Click event handler',
        category: 'events',
      },
    ],
    hooks: [
      {
        name: 'useState',
        type: 'useState',
        enabled: false,
      },
    ],
  },
  {
    name: 'h3',
    icon: 'Heading3',
    category: 'basic',
    description: 'App.ComponentH3.H3Description',
    properties: [
      {
        name: 'children',
        type: 'string',
        value: '',
        description: 'Heading text',
        category: 'properties',
      },
      {
        name: 'className',
        type: 'string',
        value: '',
        category: 'styling',
      },
      {
        name: 'onClick',
        type: 'function',
        value: '',
        category: 'events',
      },
    ],
    hooks: [
      {
        name: 'useState',
        type: 'useState',
        enabled: false,
      },
    ],
  },
  {
    name: 'h4',
    icon: 'Heading4',
    category: 'basic',
    description: 'App.ComponentH4.H4Description',
    properties: [
      {
        name: 'children',
        type: 'string',
        value: '',
        description: 'Heading text',
        category: 'properties',
      },
      {
        name: 'className',
        type: 'string',
        value: '',
        category: 'styling',
      },
      {
        name: 'onClick',
        type: 'function',
        value: '',
        category: 'events',
      },
    ],
    hooks: [],
  },
  {
    name: 'h5',
    icon: 'Heading5',
    category: 'basic',
    description: 'App.ComponentH5.H5Description',
    properties: [
      {
        name: 'children',
        type: 'string',
        value: '',
        description: 'Heading text',
        category: 'properties',
      },
      {
        name: 'className',
        type: 'string',
        value: '',
        category: 'styling',
      },
      {
        name: 'onClick',
        type: 'function',
        value: '',
        category: 'events',
      },
    ],
    hooks: [],
  },
  {
    name: 'img',
    icon: 'Image',
    category: 'media',
    description: 'App.ComponentImg.ImgDescription',
    properties: [
      {
        name: 'src',
        type: 'string',
        value: '',
        category: 'properties',
      },
      {
        name: 'alt',
        type: 'string',
        value: '',
        category: 'properties',
      },
      {
        name: 'width',
        type: 'number',
        value: 0,
        category: 'properties',
      },
      {
        name: 'height',
        type: 'number',
        value: 0,
        category: 'properties',
      },
      {
        name: 'className',
        type: 'string',
        value: '',
        category: 'properties',
      },
      {
        name: 'onClick',
        type: 'function',
        value: '',
        category: 'events',
      },
      {
        name: 'onLoad',
        type: 'string',
        value: '',
        category: 'events',
      },
    ],
    hooks: [
      {
        name: 'useState',
        type: 'useState',
        enabled: false,
      },
    ],
  },
]