I'm James Ross JrSenior Project ManagerFull-Stack Developer

<template>
  <component
    :is="componentTag"
    :class="buttonClasses"
    :disabled="disabled || loading"
    :type="href || to ? undefined : type"
    v-bind="$attrs"
    @click="handleClick"
  >
    <UiSpinner
      v-if="loading"
      :size="spinnerSize"
      class="ui-button__spinner"
    />
    
    <UiIcon
      v-if="icon && iconPosition === 'left' && !loading"
      :name="icon"
      :size="iconSize"
      class="ui-button__icon ui-button__icon--left"
    />
    
    <span
      v-if="$slots.default"
      class="ui-button__content"
      :class="{ 'ui-button__content--hidden': loading }"
    >
      <slot />
    </span>
    
    <UiIcon
      v-if="icon && iconPosition === 'right' && !loading"
      :name="icon"
      :size="iconSize"
      class="ui-button__icon ui-button__icon--right"
    />
  </component>
</template>

<script setup lang="ts">
interface Props {
  variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'error'
  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
  type?: 'button' | 'submit' | 'reset'
  disabled?: boolean
  loading?: boolean
  icon?: string
  iconPosition?: 'left' | 'right'
}

const props = withDefaults(defineProps<Props>(), {
  variant: 'primary',
  size: 'md',
  type: 'button',
  iconPosition: 'left'
})

const emit = defineEmits<{
  click: [event: MouseEvent]
}>()

const buttonClasses = computed(() => [
  'ui-button',
  `ui-button--${props.variant}`,
  `ui-button--${props.size}`,
  {
    'ui-button--disabled': props.disabled,
    'ui-button--loading': props.loading
  }
])
</script>

<template>
  <div class="ui-input-wrapper">
    <label
      v-if="label"
      :for="inputId"
      class="ui-input__label"
      :class="{ 'ui-input__label--required': required }"
    >
      {{ label }}
    </label>
    
    <div class="ui-input__container">
      <div v-if="$slots.prepend" class="ui-input__prepend">
        <slot name="prepend" />
      </div>
      
      <input
        :id="inputId"
        ref="inputRef"
        :class="inputClasses"
        :type="type"
        :value="modelValue"
        :placeholder="placeholder"
        :disabled="disabled"
        :required="required"
        :name="name"
        v-bind="$attrs"
        @input="handleInput"
        @change="handleChange"
        @focus="handleFocus"
        @blur="handleBlur"
      >
      
      <div v-if="$slots.append" class="ui-input__append">
        <slot name="append" />
      </div>
    </div>
    
    <div v-if="error || hint" class="ui-input__help">
      <p v-if="error" class="ui-input__error">{{ error }}</p>
      <p v-else-if="hint" class="ui-input__hint">{{ hint }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
interface Props {
  modelValue?: string | number
  type?: 'text' | 'email' | 'password' | 'number'
  label?: string
  placeholder?: string
  disabled?: boolean
  required?: boolean
  error?: string
  hint?: string
  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
}

const props = withDefaults(defineProps<Props>(), {
  type: 'text',
  size: 'md'
})

const emit = defineEmits<{
  'update:modelValue': [value: string | number]
  input: [event: Event]
  change: [event: Event]
  focus: [event: FocusEvent]
  blur: [event: FocusEvent]
}>()

const inputRef = ref<HTMLInputElement>()
const inputId = computed(() => `ui-input-${Math.random().toString(36).substr(2, 9)}`)

const inputClasses = computed(() => [
  'ui-input',
  `ui-input--${props.size}`,
  {
    'ui-input--error': props.error,
    'ui-input--disabled': props.disabled
  }
])
</script>

<template>
  <div :class="cardClasses" v-bind="$attrs">
    <div v-if="$slots.header || title" class="ui-card__header">
      <div v-if="title || subtitle" class="ui-card__header-content">
        <h3 v-if="title" class="ui-card__title">{{ title }}</h3>
        <p v-if="subtitle" class="ui-card__subtitle">{{ subtitle }}</p>
      </div>
      
      <div v-if="$slots.header" class="ui-card__header-actions">
        <slot name="header" />
      </div>
    </div>
    
    <div v-if="image" class="ui-card__image">
      <img :src="image" :alt="imageAlt" class="ui-card__img">
    </div>
    
    <div v-if="$slots.default" class="ui-card__body">
      <slot />
    </div>
    
    <div v-if="$slots.footer" class="ui-card__footer">
      <slot name="footer" />
    </div>
  </div>
</template>

<script setup lang="ts">
interface Props {
  title?: string
  subtitle?: string
  image?: string
  imageAlt?: string
  elevated?: boolean
  bordered?: boolean
  hoverable?: boolean
  variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'error'
}

const props = withDefaults(defineProps<Props>(), {
  variant: 'primary',
  elevated: true,
  hoverable: false
})

const cardClasses = computed(() => [
  'ui-card',
  `ui-card--${props.variant}`,
  {
    'ui-card--elevated': props.elevated,
    'ui-card--bordered': props.bordered,
    'ui-card--hoverable': props.hoverable
  }
])
</script>

<template>
  <Teleport to="body">
    <Transition name="ui-modal" appear>
      <div
        v-if="modelValue"
        class="ui-modal"
        @click="handleBackdropClick"
        @keydown.esc="handleEscape"
      >
        <div
          ref="modalRef"
          :class="modalClasses"
          role="dialog"
          :aria-modal="true"
          :aria-labelledby="titleId"
          tabindex="-1"
        >
          <div class="ui-modal__header">
            <h3 v-if="title || $slots.title" :id="titleId" class="ui-modal__title">
              <slot name="title">{{ title }}</slot>
            </h3>
            
            <UiButton
              v-if="!persistent"
              variant="text"
              size="sm"
              icon="x"
              class="ui-modal__close"
              @click="close"
              aria-label="Close modal"
            />
          </div>
          
          <div class="ui-modal__body">
            <slot />
          </div>
          
          <div v-if="$slots.footer" class="ui-modal__footer">
            <slot name="footer" />
          </div>
        </div>
      </div>
    </Transition>
  </Teleport>
</template>

<script setup lang="ts">
interface Props {
  modelValue?: boolean
  title?: string
  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
  persistent?: boolean
  fullscreen?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
  size: 'md',
  persistent: false,
  fullscreen: false
})

const emit = defineEmits<{
  'update:modelValue': [value: boolean]
  close: []
  open: []
}>()

const modalRef = ref<HTMLElement>()
const titleId = computed(() => `ui-modal-title-${Math.random().toString(36).substr(2, 9)}`)

const modalClasses = computed(() => [
  'ui-modal__content',
  `ui-modal__content--${props.size}`,
  {
    'ui-modal__content--fullscreen': props.fullscreen
  }
])

const close = () => {
  emit('update:modelValue', false)
  emit('close')
}

// Focus management and accessibility
watch(() => props.modelValue, (isOpen) => {
  if (isOpen) {
    nextTick(() => {
      modalRef.value?.focus()
    })
    emit('open')
  }
})
</script>

<template>
  <div :class="gridClasses" :style="gridStyles" v-bind="$attrs">
    <slot />
  </div>
</template>

<script setup lang="ts">
interface Props {
  cols?: number | string | Record<string, number>
  gap?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
  responsive?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  cols: 12,
  gap: 'md',
  responsive: true
})

const gridClasses = computed(() => [
  'ui-grid',
  `ui-grid--gap-${props.gap}`,
  {
    'ui-grid--responsive': props.responsive
  }
])

const gridStyles = computed(() => {
  if (typeof props.cols === 'object') {
    // Handle responsive columns
    return {
      '--ui-grid-cols-xs': props.cols.xs || 1,
      '--ui-grid-cols-sm': props.cols.sm || 2,
      '--ui-grid-cols-md': props.cols.md || 3,
      '--ui-grid-cols-lg': props.cols.lg || 4
    }
  }
  
  return {
    '--ui-grid-cols': typeof props.cols === 'number' ? props.cols : props.cols
  }
})
</script>

<style scoped>
.ui-grid {
  display: grid;
  grid-template-columns: repeat(var(--ui-grid-cols), minmax(0, 1fr));
}

.ui-grid--responsive {
  grid-template-columns: repeat(var(--ui-grid-cols-xs, 1), minmax(0, 1fr));
}

@media (min-width: 640px) {
  .ui-grid--responsive {
    grid-template-columns: repeat(var(--ui-grid-cols-sm, 2), minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .ui-grid--responsive {
    grid-template-columns: repeat(var(--ui-grid-cols-md, 3), minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .ui-grid--responsive {
    grid-template-columns: repeat(var(--ui-grid-cols-lg, 4), minmax(0, 1fr));
  }
}

.ui-grid--gap-xs { gap: 0.25rem; }
.ui-grid--gap-sm { gap: 0.5rem; }
.ui-grid--gap-md { gap: 1rem; }
.ui-grid--gap-lg { gap: 1.5rem; }
.ui-grid--gap-xl { gap: 2rem; }
</style>