@bigbot-community/bigbot-ui 1.0.1

package/src/components/atoms/BrSelect/BrSelect.vue

@@ -0,0 +1,408 @@
+<script setup lang="ts">
+/**
+ * BrSelect - Dropdown select component
+ *
+ * @example
+ * <BrSelect v-model="selected" :options="options" />
+ * <BrSelect v-model="value" :options="items" placeholder="Selecione..." />
+ */
+
+import { computed, ref, watch, onMounted, onUnmounted } from 'vue'
+import type { SelectProps, SelectOption } from './types'
+
+// ---------------------------------------------------------------------------
+// PROPS
+// ---------------------------------------------------------------------------
+
+const props = withDefaults(defineProps<SelectProps>(), {
+  options: () => [],
+  placeholder: 'Selecione...',
+  disabled: false,
+  error: false,
+  size: 'md',
+  searchable: false,
+  clearable: false,
+})
+
+// ---------------------------------------------------------------------------
+// MODEL
+// ---------------------------------------------------------------------------
+
+const model = defineModel<string | number | null>()
+
+// ---------------------------------------------------------------------------
+// EMITS
+// ---------------------------------------------------------------------------
+
+const emit = defineEmits<{
+  (e: 'change', value: string | number | null): void
+  (e: 'open'): void
+  (e: 'close'): void
+}>()
+
+// ---------------------------------------------------------------------------
+// REFS
+// ---------------------------------------------------------------------------
+
+const selectRef = ref<HTMLDivElement | null>(null)
+const isOpen = ref(false)
+const searchQuery = ref('')
+const highlightedIndex = ref(0)
+
+// ---------------------------------------------------------------------------
+// COMPUTED
+// ---------------------------------------------------------------------------
+
+const selectedOption = computed(() => {
+  return props.options.find((opt) => opt.id === model.value)
+})
+
+const filteredOptions = computed(() => {
+  if (!props.searchable || !searchQuery.value) {
+    return props.options
+  }
+  const query = searchQuery.value.toLowerCase()
+  return props.options.filter((opt) => opt.text.toLowerCase().includes(query))
+})
+
+const classes = computed(() => [
+  'br-select',
+  `br-select--${props.size}`,
+  {
+    'br-select--open': isOpen.value,
+    'br-select--error': props.error,
+    'br-select--disabled': props.disabled,
+    'br-select--has-value': model.value !== null && model.value !== undefined,
+  },
+])
+
+// ---------------------------------------------------------------------------
+// METHODS
+// ---------------------------------------------------------------------------
+
+function toggleDropdown() {
+  if (props.disabled) return
+  isOpen.value = !isOpen.value
+  if (isOpen.value) {
+    emit('open')
+    highlightedIndex.value = 0
+  } else {
+    emit('close')
+    searchQuery.value = ''
+  }
+}
+
+function selectOption(option: SelectOption) {
+  model.value = option.id
+  emit('change', option.id)
+  closeDropdown()
+}
+
+function closeDropdown() {
+  isOpen.value = false
+  searchQuery.value = ''
+  emit('close')
+}
+
+function clearSelection() {
+  model.value = null
+  emit('change', null)
+}
+
+function handleKeydown(event: KeyboardEvent) {
+  if (!isOpen.value) {
+    if (event.key === 'Enter' || event.key === ' ' || event.key === 'ArrowDown') {
+      event.preventDefault()
+      toggleDropdown()
+    }
+    return
+  }
+
+  switch (event.key) {
+    case 'ArrowDown':
+      event.preventDefault()
+      highlightedIndex.value = Math.min(highlightedIndex.value + 1, filteredOptions.value.length - 1)
+      break
+    case 'ArrowUp':
+      event.preventDefault()
+      highlightedIndex.value = Math.max(highlightedIndex.value - 1, 0)
+      break
+    case 'Enter':
+      event.preventDefault()
+      if (filteredOptions.value[highlightedIndex.value]) {
+        selectOption(filteredOptions.value[highlightedIndex.value])
+      }
+      break
+    case 'Escape':
+      closeDropdown()
+      break
+  }
+}
+
+function handleClickOutside(event: MouseEvent) {
+  if (selectRef.value && !selectRef.value.contains(event.target as Node)) {
+    closeDropdown()
+  }
+}
+
+// ---------------------------------------------------------------------------
+// LIFECYCLE
+// ---------------------------------------------------------------------------
+
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside)
+})
+</script>
+
+<template>
+  <div ref="selectRef" :class="classes" @keydown="handleKeydown">
+    <button
+      type="button"
+      class="br-select__trigger"
+      :disabled="disabled"
+      @click="toggleDropdown"
+    >
+      <span class="br-select__value">
+        {{ selectedOption?.text || placeholder }}
+      </span>
+      <span class="br-select__actions">
+        <span
+          v-if="clearable && model !== null && model !== undefined"
+          class="br-select__clear"
+          @click.stop="clearSelection"
+        >
+          <svg viewBox="0 0 24 24" fill="currentColor">
+            <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
+          </svg>
+        </span>
+        <span class="br-select__arrow">
+          <svg viewBox="0 0 24 24" fill="currentColor">
+            <path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z" />
+          </svg>
+        </span>
+      </span>
+    </button>
+
+    <Transition name="br-select-dropdown">
+      <div v-if="isOpen" class="br-select__dropdown">
+        <input
+          v-if="searchable"
+          v-model="searchQuery"
+          type="text"
+          class="br-select__search"
+          placeholder="Buscar..."
+          @click.stop
+        />
+        <ul class="br-select__options">
+          <li
+            v-for="(option, index) in filteredOptions"
+            :key="option.id"
+            class="br-select__option"
+            :class="{
+              'br-select__option--selected': option.id === model,
+              'br-select__option--highlighted': index === highlightedIndex,
+            }"
+            @click="selectOption(option)"
+            @mouseenter="highlightedIndex = index"
+          >
+            {{ option.text }}
+          </li>
+          <li v-if="filteredOptions.length === 0" class="br-select__empty">
+            Nenhum resultado encontrado
+          </li>
+        </ul>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.br-select {
+  position: relative;
+  width: 100%;
+
+  &__trigger {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    padding: 0 var(--br-space-4);
+    border: 1px solid var(--br-light-300);
+    border-radius: var(--br-radius-sm);
+    background: var(--br-light-0);
+    color: var(--br-dark-700);
+    font-family: var(--br-font-primary);
+    cursor: pointer;
+    transition: all var(--br-transition-fast);
+
+    &:focus {
+      outline: none;
+      border-color: var(--br-primary-600);
+      box-shadow: 0 0 0 3px rgba(109, 54, 251, 0.1);
+    }
+  }
+
+  &__value {
+    flex: 1;
+    text-align: left;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__actions {
+    display: flex;
+    align-items: center;
+    gap: var(--br-space-1);
+  }
+
+  &__clear,
+  &__arrow {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    color: var(--br-dark-900);
+
+    svg {
+      width: 16px;
+      height: 16px;
+    }
+  }
+
+  &__clear:hover {
+    color: var(--br-danger-600);
+  }
+
+  &__arrow {
+    transition: transform var(--br-transition-fast);
+  }
+
+  // ---------------------------------------------------------------------------
+  // SIZES
+  // ---------------------------------------------------------------------------
+
+  &--sm .br-select__trigger {
+    height: 36px;
+    font-size: var(--br-text-xs);
+  }
+
+  &--md .br-select__trigger {
+    height: 44px;
+    font-size: var(--br-text-sm);
+  }
+
+  &--lg .br-select__trigger {
+    height: 56px;
+    font-size: var(--br-text-base);
+  }
+
+  // ---------------------------------------------------------------------------
+  // STATES
+  // ---------------------------------------------------------------------------
+
+  &--open {
+    .br-select__arrow {
+      transform: rotate(180deg);
+    }
+
+    .br-select__trigger {
+      border-color: var(--br-primary-600);
+    }
+  }
+
+  &--error .br-select__trigger {
+    border-color: var(--br-danger-600);
+  }
+
+  &--disabled .br-select__trigger {
+    background: var(--br-light-200);
+    color: var(--br-dark-1100);
+    cursor: not-allowed;
+  }
+
+  &:not(&--has-value) .br-select__value {
+    color: var(--br-dark-1100);
+  }
+
+  // ---------------------------------------------------------------------------
+  // DROPDOWN
+  // ---------------------------------------------------------------------------
+
+  &__dropdown {
+    position: absolute;
+    top: calc(100% + 4px);
+    left: 0;
+    right: 0;
+    z-index: var(--br-z-dropdown);
+    background: var(--br-light-0);
+    border: 1px solid var(--br-light-300);
+    border-radius: var(--br-radius-md);
+    box-shadow: var(--br-shadow-lg);
+    overflow: hidden;
+  }
+
+  &__search {
+    width: 100%;
+    padding: var(--br-space-3);
+    border: none;
+    border-bottom: 1px solid var(--br-light-300);
+    font-family: var(--br-font-primary);
+    font-size: var(--br-text-sm);
+
+    &:focus {
+      outline: none;
+    }
+  }
+
+  &__options {
+    list-style: none;
+    margin: 0;
+    padding: var(--br-space-1) 0;
+    max-height: 240px;
+    overflow-y: auto;
+  }
+
+  &__option {
+    padding: var(--br-space-3) var(--br-space-4);
+    cursor: pointer;
+    transition: background var(--br-transition-fast);
+
+    &:hover,
+    &--highlighted {
+      background: var(--br-light-100);
+    }
+
+    &--selected {
+      background: var(--br-primary-100);
+      color: var(--br-primary-700);
+    }
+  }
+
+  &__empty {
+    padding: var(--br-space-4);
+    text-align: center;
+    color: var(--br-dark-1100);
+  }
+}
+
+// ---------------------------------------------------------------------------
+// TRANSITION
+// ---------------------------------------------------------------------------
+
+.br-select-dropdown-enter-active,
+.br-select-dropdown-leave-active {
+  transition: opacity 0.15s ease, transform 0.15s ease;
+}
+
+.br-select-dropdown-enter-from,
+.br-select-dropdown-leave-to {
+  opacity: 0;
+  transform: translateY(-8px);
+}
+</style>

package/src/components/atoms/BrSelect/index.ts

@@ -0,0 +1,2 @@
+export { default as BrSelect } from './BrSelect.vue'
+export * from './types'

package/src/components/atoms/BrSelect/types.ts

@@ -0,0 +1,61 @@
+export type SelectSize = 'sm' | 'md' | 'lg'
+
+export interface SelectOption {
+  /**
+   * Unique identifier
+   */
+  id: string | number
+
+  /**
+   * Display text
+   */
+  text: string
+
+  /**
+   * Disabled option
+   */
+  disabled?: boolean
+}
+
+export interface SelectProps {
+  /**
+   * Available options
+   */
+  options?: SelectOption[]
+
+  /**
+   * Placeholder text
+   * @default 'Selecione...'
+   */
+  placeholder?: string
+
+  /**
+   * Disable the select
+   * @default false
+   */
+  disabled?: boolean
+
+  /**
+   * Error state
+   * @default false
+   */
+  error?: boolean
+
+  /**
+   * Select size
+   * @default 'md'
+   */
+  size?: SelectSize
+
+  /**
+   * Enable search/filter
+   * @default false
+   */
+  searchable?: boolean
+
+  /**
+   * Allow clearing selection
+   * @default false
+   */
+  clearable?: boolean
+}

package/src/components/atoms/BrSpinner/BrSpinner.vue

@@ -0,0 +1,125 @@
+<script setup lang="ts">
+/**
+ * BrSpinner - Loading spinner component
+ *
+ * @example
+ * <BrSpinner />
+ * <BrSpinner size="lg" color="var(--br-primary-600)" />
+ * <BrSpinner status="success" />
+ */
+
+import { computed } from 'vue'
+import type { SpinnerProps } from './types'
+
+// ---------------------------------------------------------------------------
+// PROPS
+// ---------------------------------------------------------------------------
+
+const props = withDefaults(defineProps<SpinnerProps>(), {
+  size: 'md',
+  color: 'var(--br-primary-600)',
+  status: 'loading',
+})
+
+// ---------------------------------------------------------------------------
+// COMPUTED
+// ---------------------------------------------------------------------------
+
+const sizeMap = {
+  sm: 16,
+  md: 24,
+  lg: 32,
+  xl: 48,
+}
+
+const spinnerSize = computed(() => sizeMap[props.size])
+
+const styles = computed(() => ({
+  '--spinner-size': `${spinnerSize.value}px`,
+  '--spinner-color': props.color,
+}))
+</script>
+
+<template>
+  <div class="br-spinner" :style="styles">
+    <span v-if="status === 'loading'" class="br-spinner__circle" />
+    <svg
+      v-else-if="status === 'success'"
+      class="br-spinner__check"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"
+        fill="currentColor"
+      />
+    </svg>
+    <svg
+      v-else-if="status === 'error'"
+      class="br-spinner__error"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+        fill="currentColor"
+      />
+    </svg>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.br-spinner {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  &__circle {
+    width: var(--spinner-size);
+    height: var(--spinner-size);
+    border-radius: 50%;
+    background: conic-gradient(from 0deg, transparent 0%, var(--spinner-color) 100%);
+    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
+    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
+    animation: br-spin 1s linear infinite;
+  }
+
+  &__check,
+  &__error {
+    width: var(--spinner-size);
+    height: var(--spinner-size);
+    color: var(--spinner-color);
+    animation: br-fade-in 0.3s ease-out;
+  }
+
+  &__check {
+    color: var(--br-success-600);
+  }
+
+  &__error {
+    color: var(--br-danger-600);
+  }
+}
+
+@keyframes br-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes br-fade-in {
+  from {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+</style>

package/src/components/atoms/BrSpinner/index.ts

@@ -0,0 +1,2 @@
+export { default as BrSpinner } from './BrSpinner.vue'
+export * from './types'

package/src/components/atoms/BrSpinner/types.ts

@@ -0,0 +1,22 @@
+export type SpinnerSize = 'sm' | 'md' | 'lg' | 'xl'
+export type SpinnerStatus = 'loading' | 'success' | 'error'
+
+export interface SpinnerProps {
+  /**
+   * Spinner size
+   * @default 'md'
+   */
+  size?: SpinnerSize
+
+  /**
+   * Spinner color
+   * @default 'var(--br-primary-600)'
+   */
+  color?: string
+
+  /**
+   * Spinner status
+   * @default 'loading'
+   */
+  status?: SpinnerStatus
+}

package/src/components/atoms/BrSwitch/BrSwitch.test.ts

@@ -0,0 +1,81 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import BrSwitch from './BrSwitch.vue'
+
+describe('BrSwitch', () => {
+  it('renders as button element', () => {
+    const wrapper = mount(BrSwitch)
+    expect(wrapper.element.tagName).toBe('BUTTON')
+  })
+
+  it('has role="switch" attribute', () => {
+    const wrapper = mount(BrSwitch)
+    expect(wrapper.attributes('role')).toBe('switch')
+  })
+
+  it('toggles value on click', async () => {
+    const wrapper = mount(BrSwitch, {
+      props: {
+        modelValue: false,
+        'onUpdate:modelValue': (e: boolean) => wrapper.setProps({ modelValue: e }),
+      },
+    })
+    expect(wrapper.props('modelValue')).toBe(false)
+    await wrapper.trigger('click')
+    expect(wrapper.props('modelValue')).toBe(true)
+  })
+
+  it('applies checked class when value is true', () => {
+    const wrapper = mount(BrSwitch, {
+      props: { modelValue: true },
+    })
+    expect(wrapper.classes()).toContain('br-switch--checked')
+  })
+
+  it('does not toggle when disabled', async () => {
+    const wrapper = mount(BrSwitch, {
+      props: {
+        modelValue: false,
+        disabled: true,
+        'onUpdate:modelValue': (e: boolean) => wrapper.setProps({ modelValue: e }),
+      },
+    })
+    await wrapper.trigger('click')
+    expect(wrapper.props('modelValue')).toBe(false)
+  })
+
+  it('applies disabled class when disabled', () => {
+    const wrapper = mount(BrSwitch, {
+      props: { disabled: true },
+    })
+    expect(wrapper.classes()).toContain('br-switch--disabled')
+  })
+
+  it('applies correct size class', () => {
+    const sizes = ['sm', 'md', 'lg'] as const
+    sizes.forEach((size) => {
+      const wrapper = mount(BrSwitch, {
+        props: { size },
+      })
+      expect(wrapper.classes()).toContain(`br-switch--${size}`)
+    })
+  })
+
+  it('has aria-checked attribute reflecting state', () => {
+    const wrapperFalse = mount(BrSwitch, {
+      props: { modelValue: false },
+    })
+    expect(wrapperFalse.attributes('aria-checked')).toBe('false')
+
+    const wrapperTrue = mount(BrSwitch, {
+      props: { modelValue: true },
+    })
+    expect(wrapperTrue.attributes('aria-checked')).toBe('true')
+  })
+
+  it('contains track and thumb elements', () => {
+    const wrapper = mount(BrSwitch)
+    expect(wrapper.find('.br-switch__track').exists()).toBe(true)
+    expect(wrapper.find('.br-switch__thumb').exists()).toBe(true)
+  })
+})