Form Components

export const BInput: Component<{
  modelValue?: string | number;
  type?: 'text' | 'password' | 'email' | 'tel' | 'url' | 'search' | 'number' | 'textarea';
  placeholder?: string;
  size?: 'is-small' | 'is-medium' | 'is-large';
  expanded?: boolean;
  passwordReveal?: boolean;
  loading?: boolean;
  disabled?: boolean;
  readonly?: boolean;
  maxlength?: number | string;
  autocomplete?: string;
  lazy?: boolean;
  customClass?: string;
  hasCounter?: boolean;
  statusIcon?: boolean;
}>;

import { BInput } from "buefy";

// Basic text input
<BInput v-model="name" placeholder="Enter your name" />

// Password input with reveal
<BInput 
  v-model="password" 
  type="password" 
  :password-reveal="true" 
/>

// Textarea with counter
<BInput 
  v-model="description" 
  type="textarea" 
  :maxlength="200" 
  :has-counter="true" 
/>

export const BButton: Component<{
  label?: string;
  type?: 'is-white' | 'is-light' | 'is-dark' | 'is-black' | 'is-text' | 
         'is-ghost' | 'is-primary' | 'is-link' | 'is-info' | 'is-success' | 
         'is-warning' | 'is-danger';
  size?: 'is-small' | 'is-normal' | 'is-medium' | 'is-large';
  loading?: boolean;
  disabled?: boolean;
  expanded?: boolean;
  rounded?: boolean;
  outlined?: boolean;
  inverted?: boolean;
  focused?: boolean;
  active?: boolean;
  hovered?: boolean;
  selected?: boolean;
  iconLeft?: string;
  iconRight?: string;
  iconPack?: string;
  nativeType?: 'button' | 'submit' | 'reset';
  tag?: string | Component;
}>;

import { BButton } from "buefy";

// Primary button with icon
<BButton 
  type="is-primary" 
  icon-left="account" 
  @click="handleLogin"
>
  Login
</BButton>

// Loading state
<BButton :loading="isSubmitting" type="is-success">
  Submit
</BButton>

export const BField: Component<{
  type?: 'is-white' | 'is-light' | 'is-dark' | 'is-black' | 'is-text' | 
         'is-primary' | 'is-link' | 'is-info' | 'is-success' | 'is-warning' | 'is-danger';
  label?: string;
  labelFor?: string;
  message?: string | string[];
  grouped?: boolean;
  groupMultiline?: boolean;
  position?: 'is-centered' | 'is-right';
  expanded?: boolean;
  addons?: boolean;
  horizontal?: boolean;
  customClass?: string;
}>;

import { BField, BInput } from "buefy";

// Basic field with label
<BField label="Username">
  <BInput v-model="username" />
</BField>

// Field with validation message
<BField 
  label="Email" 
  :type="hasError ? 'is-danger' : ''" 
  :message="errorMessage"
>
  <BInput v-model="email" type="email" />
</BField>

// Grouped fields
<BField grouped>
  <BField label="First Name" expanded>
    <BInput v-model="firstName" />
  </BField>
  <BField label="Last Name" expanded>
    <BInput v-model="lastName" />
  </BField>
</BField>

export const BCheckbox: Component<{
  modelValue?: boolean | string | number | any[];
  nativeValue?: string | number | boolean;
  trueValue?: any;
  falseValue?: any;
  disabled?: boolean;
  required?: boolean;
  name?: string;
  size?: 'is-small' | 'is-medium' | 'is-large';
  type?: 'is-white' | 'is-light' | 'is-dark' | 'is-black' | 'is-text' | 
         'is-primary' | 'is-link' | 'is-info' | 'is-success' | 'is-warning' | 'is-danger';
  indeterminate?: boolean;
}>;

export const BCheckboxButton: Component<{
  modelValue?: boolean | string | number | any[];
  nativeValue?: string | number | boolean;
  trueValue?: any;
  falseValue?: any;
  disabled?: boolean;
  required?: boolean;
  name?: string;
  size?: 'is-small' | 'is-medium' | 'is-large';
  type?: 'is-white' | 'is-light' | 'is-dark' | 'is-black' | 'is-text' | 
         'is-primary' | 'is-link' | 'is-info' | 'is-success' | 'is-warning' | 'is-danger';
  expanded?: boolean;
}>;

import { BCheckbox } from "buefy";

// Basic checkbox
<BCheckbox v-model="agreed">
  I agree to the terms
</BCheckbox>

// Checkbox group
<BCheckbox 
  v-model="selectedOptions" 
  native-value="option1"
>
  Option 1
</BCheckbox>
<BCheckbox 
  v-model="selectedOptions" 
  native-value="option2"
>
  Option 2
</BCheckbox>

export const BRadio: Component<{
  modelValue?: string | number | boolean;
  nativeValue?: string | number | boolean;
  disabled?: boolean;
  required?: boolean;
  name?: string;
  size?: 'is-small' | 'is-medium' | 'is-large';
  type?: 'is-white' | 'is-light' | 'is-dark' | 'is-black' | 'is-text' | 
         'is-primary' | 'is-link' | 'is-info' | 'is-success' | 'is-warning' | 'is-danger';
}>;

export const BRadioButton: Component<{
  modelValue?: string | number | boolean;
  nativeValue?: string | number | boolean;
  disabled?: boolean;
  required?: boolean;
  name?: string;
  size?: 'is-small' | 'is-medium' | 'is-large';
  type?: 'is-white' | 'is-light' | 'is-dark' | 'is-black' | 'is-text' | 
         'is-primary' | 'is-link' | 'is-info' | 'is-success' | 'is-warning' | 'is-danger';
  expanded?: boolean;
}>;

import { BRadio } from "buefy";

// Radio group
<BRadio v-model="selectedPlan" native-value="basic">
  Basic Plan
</BRadio>
<BRadio v-model="selectedPlan" native-value="premium">
  Premium Plan
</BRadio>

export const BSelect: Component<{
  modelValue?: any;
  placeholder?: string;
  multiple?: boolean;
  nativeSize?: number;
  size?: 'is-small' | 'is-medium' | 'is-large';
  expanded?: boolean;
  loading?: boolean;
  disabled?: boolean;
  required?: boolean;
  name?: string;
  icon?: string;
  iconPack?: string;
  autocomplete?: string;
  maxHeight?: string | number;
}>;

import { BSelect } from "buefy";

// Basic select
<BSelect v-model="selectedCountry" placeholder="Select country">
  <option value="us">United States</option>
  <option value="ca">Canada</option>
  <option value="mx">Mexico</option>
</BSelect>

// Multiple select
<BSelect v-model="selectedTags" multiple>
  <option value="vue">Vue.js</option>
  <option value="react">React</option>
  <option value="angular">Angular</option>
</BSelect>

export const BSwitch: Component<{
  modelValue?: boolean | string | number;
  nativeValue?: string | number | boolean;
  trueValue?: any;
  falseValue?: any;
  disabled?: boolean;
  required?: boolean;
  name?: string;
  size?: 'is-small' | 'is-medium' | 'is-large';
  type?: 'is-white' | 'is-light' | 'is-dark' | 'is-black' | 'is-text' | 
         'is-primary' | 'is-link' | 'is-info' | 'is-success' | 'is-warning' | 'is-danger';
  rounded?: boolean;
  outlined?: boolean;
  leftLabel?: boolean;
  passiveType?: string;
}>;

import { BSwitch } from "buefy";

// Basic switch
<BSwitch v-model="notificationsEnabled">
  Enable notifications
</BSwitch>

// Styled switch
<BSwitch 
  v-model="darkMode" 
  type="is-success" 
  :rounded="true"
>
  Dark Mode
</BSwitch>

// Common events for all form inputs
interface FormEvents {
  'update:modelValue': (value: any) => void;
  'input': (value: any) => void;
  'change': (value: any) => void;
  'focus': (event: FocusEvent) => void;
  'blur': (event: FocusEvent) => void;
}

// Button-specific events
interface ButtonEvents {
  'click': (event: MouseEvent) => void;
}

// Example with validation
<BField 
  label="Email" 
  :type="$v.email.$error ? 'is-danger' : ''"
  :message="$v.email.$error ? 'Invalid email' : ''"
>
  <BInput 
    v-model="email" 
    type="email"
    @blur="$v.email.$touch()"
  />
</BField>