birus-ui 0.0.0-stage → 0.3.0

package/src/components/BirusProgress.vue

@@ -0,0 +1,70 @@
+<script setup>
+import { computed } from 'vue';
+import { progressTrackVariants, progressBarVariants, cn } from '@birus-ui/core';
+
+const props = defineProps({
+  value: { type: Number, default: 0 },
+  max: { type: Number, default: 100 },
+  variant: { type: String, default: 'default' },
+  size: { type: String, default: 'md' },
+  showValue: { type: Boolean, default: false },
+  label: { type: String, default: '' },
+  indeterminate: { type: Boolean, default: false },
+  class: { type: String, default: '' },
+});
+
+const percentage = computed(() => {
+  if (props.max <= 0) return 0;
+  return Math.min(100, Math.max(0, Math.round((props.value / props.max) * 100)));
+});
+
+const trackClasses = computed(() =>
+  cn(progressTrackVariants({ size: props.size }), props.class),
+);
+
+const barClasses = computed(() =>
+  cn(
+    progressBarVariants({ variant: props.variant }),
+    props.indeterminate && 'birus-progress-indeterminate w-1/3',
+  ),
+);
+</script>
+
+<template>
+  <div class="w-full space-y-1.5">
+    <div v-if="label || showValue" class="flex items-center justify-between text-xs font-medium">
+      <span v-if="label" class="text-fg">{{ label }}</span>
+      <span v-if="showValue && !indeterminate" class="text-muted-fg tabular-nums ml-auto">
+        {{ percentage }}%
+      </span>
+    </div>
+
+    <div
+      role="progressbar"
+      :aria-valuemin="0"
+      :aria-valuemax="max"
+      :aria-valuenow="indeterminate ? undefined : value"
+      :class="trackClasses"
+    >
+      <div
+        :class="barClasses"
+        :style="indeterminate ? undefined : { width: `${percentage}%` }"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+@keyframes birus-indeterminate {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(300%);
+  }
+}
+
+.birus-progress-indeterminate {
+  animation: birus-indeterminate 1.4s infinite ease-in-out;
+}
+</style>

package/src/components/BirusRadioGroup.vue

@@ -0,0 +1,157 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { radioCircleVariants, radioCardVariants, cn } from '@birus-ui/core';
+import BirusBadge from './BirusBadge.vue';
+
+const props = defineProps({
+  modelValue: { type: [String, Number], default: '' },
+  options: { type: Array, default: () => [] },
+  variant: { type: String, default: 'list' }, // 'list' | 'cards'
+  orientation: { type: String, default: 'vertical' }, // 'vertical' | 'horizontal'
+  size: { type: String, default: 'md' },
+  label: { type: String, default: '' },
+  disabled: { type: Boolean, default: false },
+  class: { type: String, default: '' },
+});
+
+const emit = defineEmits(['update:modelValue', 'change']);
+const itemRefs = ref([]);
+
+const dotSizeClass = computed(() => {
+  switch (props.size) {
+    case 'sm':
+      return 'h-2 w-2';
+    case 'lg':
+      return 'h-3 w-3';
+    default:
+      return 'h-2.5 w-2.5';
+  }
+});
+
+function selectOption(option) {
+  if (props.disabled || option.disabled) return;
+  emit('update:modelValue', option.value);
+  emit('change', option);
+}
+
+function handleKeydown(event, index) {
+  const enabledIndexes = props.options
+    .map((opt, i) => (props.disabled || opt.disabled ? -1 : i))
+    .filter((i) => i !== -1);
+
+  if (!enabledIndexes.length) return;
+
+  const pos = enabledIndexes.indexOf(index);
+  let nextPos = pos;
+
+  if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {
+    nextPos = (pos + 1) % enabledIndexes.length;
+  } else if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {
+    nextPos = (pos - 1 + enabledIndexes.length) % enabledIndexes.length;
+  } else {
+    return;
+  }
+
+  event.preventDefault();
+  const nextIndex = enabledIndexes[nextPos];
+  const nextOpt = props.options[nextIndex];
+  if (nextOpt) {
+    selectOption(nextOpt);
+    itemRefs.value[nextIndex]?.focus();
+  }
+}
+</script>
+
+<template>
+  <div role="radiogroup" :aria-label="label || 'Grupo de opções'" :class="cn('w-full space-y-2', props.class)">
+    <div v-if="label" class="text-sm font-medium text-fg leading-none mb-2">
+      {{ label }}
+    </div>
+
+    <div
+      :class="[
+        variant === 'cards'
+          ? orientation === 'horizontal'
+            ? 'grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3'
+            : 'space-y-2.5'
+          : orientation === 'horizontal'
+            ? 'flex flex-wrap items-center gap-5'
+            : 'space-y-2.5',
+      ]"
+    >
+      <template v-for="(opt, index) in options" :key="String(opt.value)">
+        <!-- Modo Radio Cards -->
+        <button
+          v-if="variant === 'cards'"
+          :ref="(el) => { if (el) itemRefs[index] = el; }"
+          type="button"
+          role="radio"
+          :aria-checked="modelValue === opt.value ? 'true' : 'false'"
+          :disabled="disabled || opt.disabled"
+          :class="
+            cn(
+              'w-full',
+              radioCardVariants({
+                checked: modelValue === opt.value,
+                disabled: Boolean(disabled || opt.disabled),
+              }),
+            )
+          "
+          @click="selectOption(opt)"
+          @keydown="handleKeydown($event, index)"
+        >
+          <div class="space-y-1 min-w-0">
+            <div class="flex items-center gap-2">
+              <span class="text-sm font-semibold text-fg">{{ opt.label }}</span>
+              <BirusBadge v-if="opt.badge" size="sm" :variant="modelValue === opt.value ? 'default' : 'secondary'">
+                {{ opt.badge }}
+              </BirusBadge>
+            </div>
+            <p v-if="opt.description" class="text-xs text-muted-fg leading-relaxed">
+              {{ opt.description }}
+            </p>
+          </div>
+
+          <span :class="radioCircleVariants({ size, checked: modelValue === opt.value })">
+            <span
+              v-if="modelValue === opt.value"
+              :class="['rounded-full bg-primary transition-transform', dotSizeClass]"
+            />
+          </span>
+        </button>
+
+        <!-- Modo Lista Tradicional -->
+        <div
+          v-else
+          :class="[
+            'inline-flex items-start gap-2.5',
+            disabled || opt.disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer',
+          ]"
+          @click="selectOption(opt)"
+        >
+          <button
+            :ref="(el) => { if (el) itemRefs[index] = el; }"
+            type="button"
+            role="radio"
+            :aria-checked="modelValue === opt.value ? 'true' : 'false'"
+            :disabled="disabled || opt.disabled"
+            :class="radioCircleVariants({ size, checked: modelValue === opt.value })"
+            @keydown="handleKeydown($event, index)"
+          >
+            <span
+              v-if="modelValue === opt.value"
+              :class="['rounded-full bg-primary transition-transform', dotSizeClass]"
+            />
+          </button>
+
+          <div class="flex flex-col gap-0.5 select-none">
+            <span class="text-sm font-medium leading-snug text-fg">{{ opt.label }}</span>
+            <span v-if="opt.description" class="text-xs text-muted-fg leading-relaxed">
+              {{ opt.description }}
+            </span>
+          </div>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>

package/src/components/BirusSelect.vue

@@ -0,0 +1,272 @@
+<script setup>
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { selectTriggerVariants, cn } from '@birus-ui/core';
+
+const props = defineProps({
+  modelValue: { type: [String, Number], default: null },
+  options: { type: Array, default: () => [] },
+  placeholder: { type: String, default: 'Selecione uma opção...' },
+  label: { type: String, default: '' },
+  hint: { type: String, default: '' },
+  errorMessage: { type: String, default: '' },
+  state: { type: String, default: 'default' },
+  size: { type: String, default: 'md' },
+  searchable: { type: Boolean, default: false },
+  clearable: { type: Boolean, default: false },
+  searchPlaceholder: { type: String, default: 'Buscar opção...' },
+  disabled: { type: Boolean, default: false },
+  required: { type: Boolean, default: false },
+  class: { type: String, default: '' },
+});
+
+const emit = defineEmits(['update:modelValue', 'change']);
+
+const rootRef = ref(null);
+const searchInputRef = ref(null);
+const isOpen = ref(false);
+const searchQuery = ref('');
+const highlightedIndex = ref(-1);
+
+const resolvedState = computed(() => (props.errorMessage ? 'error' : props.state));
+
+const triggerClasses = computed(() =>
+  cn(
+    selectTriggerVariants({
+      state: resolvedState.value,
+      size: props.size,
+    }),
+    props.class,
+  ),
+);
+
+const selectedOption = computed(
+  () => props.options.find((opt) => opt.value === props.modelValue) ?? null,
+);
+
+const filteredOptions = computed(() => {
+  const q = searchQuery.value.trim().toLowerCase();
+  if (!q) return props.options;
+  return props.options.filter(
+    (opt) =>
+      opt.label.toLowerCase().includes(q) ||
+      (opt.description && opt.description.toLowerCase().includes(q)),
+  );
+});
+
+async function openDropdown() {
+  if (props.disabled) return;
+  isOpen.value = true;
+  searchQuery.value = '';
+  const currentIdx = filteredOptions.value.findIndex((o) => o.value === props.modelValue);
+  highlightedIndex.value = currentIdx >= 0 ? currentIdx : 0;
+  if (props.searchable) {
+    await nextTick();
+    searchInputRef.value?.focus();
+  }
+}
+
+function closeDropdown() {
+  isOpen.value = false;
+  searchQuery.value = '';
+}
+
+function toggleDropdown() {
+  if (isOpen.value) {
+    closeDropdown();
+  } else {
+    openDropdown();
+  }
+}
+
+function selectOption(option) {
+  if (option.disabled) return;
+  emit('update:modelValue', option.value);
+  emit('change', option);
+  closeDropdown();
+}
+
+function clearSelection() {
+  emit('update:modelValue', '');
+}
+
+function moveHighlight(delta) {
+  const list = filteredOptions.value;
+  if (!list.length) return;
+  let idx = highlightedIndex.value;
+  for (let i = 0; i < list.length; i++) {
+    idx = (idx + delta + list.length) % list.length;
+    if (!list[idx].disabled) {
+      highlightedIndex.value = idx;
+      return;
+    }
+  }
+}
+
+function handleKeydown(event) {
+  if (props.disabled) return;
+  if (!isOpen.value) {
+    if (event.key === 'ArrowDown' || event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      openDropdown();
+    }
+    return;
+  }
+
+  if (event.key === 'Escape') {
+    event.preventDefault();
+    closeDropdown();
+  } else if (event.key === 'ArrowDown') {
+    event.preventDefault();
+    moveHighlight(1);
+  } else if (event.key === 'ArrowUp') {
+    event.preventDefault();
+    moveHighlight(-1);
+  } else if (event.key === 'Enter') {
+    event.preventDefault();
+    const target = filteredOptions.value[highlightedIndex.value];
+    if (target) {
+      selectOption(target);
+    }
+  }
+}
+
+function handleClickOutside(event) {
+  if (rootRef.value && !rootRef.value.contains(event.target)) {
+    closeDropdown();
+  }
+}
+
+watch(searchQuery, () => {
+  highlightedIndex.value = 0;
+});
+
+onMounted(() => {
+  document.addEventListener('mousedown', handleClickOutside);
+});
+
+onBeforeUnmount(() => {
+  document.removeEventListener('mousedown', handleClickOutside);
+});
+</script>
+
+<template>
+  <div ref="rootRef" class="relative w-full space-y-1.5" @keydown="handleKeydown">
+    <label v-if="label" class="block text-sm font-medium text-fg leading-none">
+      {{ label }}
+      <span v-if="required" class="text-destructive ml-0.5">*</span>
+    </label>
+
+    <button
+      type="button"
+      role="combobox"
+      :aria-expanded="isOpen ? 'true' : 'false'"
+      aria-haspopup="listbox"
+      :disabled="disabled"
+      :class="triggerClasses"
+      @click="toggleDropdown"
+    >
+      <span :class="['truncate', selectedOption ? 'text-fg' : 'text-muted-fg']">
+        {{ selectedOption ? selectedOption.label : placeholder }}
+      </span>
+      <span class="flex items-center gap-1 shrink-0">
+        <span
+          v-if="clearable && selectedOption && !disabled"
+          role="button"
+          tabindex="-1"
+          class="rounded-full p-0.5 text-muted-fg hover:text-fg hover:bg-surface-hover"
+          aria-label="Limpar seleção"
+          @click.stop="clearSelection"
+        >
+          <svg class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M18 6L6 18M6 6l12 12" />
+          </svg>
+        </span>
+        <svg
+          :class="['h-4 w-4 text-muted-fg transition-transform duration-200', isOpen && 'rotate-180']"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+        >
+          <path stroke-linecap="round" stroke-linejoin="round" d="M6 9l6 6 6-6" />
+        </svg>
+      </span>
+    </button>
+
+    <Transition
+      enter-active-class="transition duration-150 ease-out"
+      enter-from-class="opacity-0 -translate-y-1 scale-[0.98]"
+      enter-to-class="opacity-100 translate-y-0 scale-100"
+      leave-active-class="transition duration-100 ease-in"
+      leave-from-class="opacity-100 scale-100"
+      leave-to-class="opacity-0 scale-[0.98]"
+    >
+      <div
+        v-if="isOpen"
+        class="absolute left-0 right-0 z-50 mt-1.5 rounded-birus border border-border bg-popover p-1.5 text-popover-fg shadow-xl"
+      >
+        <div v-if="searchable" class="mb-1.5 px-1">
+          <input
+            ref="searchInputRef"
+            v-model="searchQuery"
+            type="text"
+            :placeholder="searchPlaceholder"
+            class="w-full rounded-birus-sm border border-input bg-bg px-2.5 py-1.5 text-xs text-fg placeholder:text-muted-fg focus:outline-none focus:border-primary"
+            @keydown.stop="handleKeydown"
+          />
+        </div>
+
+        <ul role="listbox" class="max-h-60 overflow-y-auto space-y-0.5">
+          <li
+            v-for="(option, index) in filteredOptions"
+            :key="String(option.value)"
+            role="option"
+            :aria-selected="option.value === modelValue ? 'true' : 'false'"
+            :class="[
+              'flex items-start justify-between gap-2 rounded-birus-sm px-2.5 py-2 text-sm transition-colors',
+              option.disabled
+                ? 'opacity-45 cursor-not-allowed'
+                : 'cursor-pointer',
+              !option.disabled && (highlightedIndex === index || option.value === modelValue)
+                ? 'bg-accent text-accent-fg'
+                : !option.disabled && 'hover:bg-surface-hover',
+            ]"
+            @mouseenter="highlightedIndex = index"
+            @click="selectOption(option)"
+          >
+            <div class="min-w-0">
+              <div class="font-medium leading-tight truncate">{{ option.label }}</div>
+              <div v-if="option.description" class="text-xs text-muted-fg mt-0.5 leading-snug">
+                {{ option.description }}
+              </div>
+            </div>
+            <svg
+              v-if="option.value === modelValue"
+              class="h-4 w-4 shrink-0 text-primary mt-0.5"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2.5"
+            >
+              <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
+            </svg>
+          </li>
+
+          <li
+            v-if="filteredOptions.length === 0"
+            class="px-3 py-4 text-center text-xs text-muted-fg"
+          >
+            Nenhuma opção encontrada.
+          </li>
+        </ul>
+      </div>
+    </Transition>
+
+    <p
+      v-if="errorMessage || hint"
+      :class="['text-xs', errorMessage ? 'text-destructive font-medium' : 'text-muted-fg']"
+    >
+      {{ errorMessage || hint }}
+    </p>
+  </div>
+</template>

package/src/components/BirusSeparator.vue

@@ -0,0 +1,72 @@
+<script setup>
+import { computed } from 'vue';
+import { cn, separatorVariants } from '@birus-ui/core';
+
+const props = defineProps({
+  orientation: {
+    type: String,
+    default: 'horizontal',
+  },
+  variant: {
+    type: String,
+    default: 'solid',
+  },
+  label: {
+    type: String,
+    default: '',
+  },
+  labelPosition: {
+    type: String,
+    default: 'center',
+  },
+  decorative: {
+    type: Boolean,
+    default: true,
+  },
+  class: {
+    type: String,
+    default: '',
+  },
+});
+
+const lineClasses = computed(() =>
+  cn(
+    separatorVariants({
+      orientation: props.orientation,
+      variant: props.variant,
+    }),
+    props.class
+  )
+);
+</script>
+
+<template>
+  <div
+    v-if="label && orientation === 'horizontal'"
+    :role="decorative ? 'none' : 'separator'"
+    :aria-orientation="orientation"
+    class="relative flex items-center w-full my-2"
+  >
+    <div
+      v-if="labelPosition !== 'start'"
+      class="flex-1"
+      :class="separatorVariants({ orientation: 'horizontal', variant })"
+    />
+    <span
+      class="px-3 text-xs font-medium uppercase tracking-wider text-birus-muted-fg select-none shrink-0"
+    >
+      <slot>{{ label }}</slot>
+    </span>
+    <div
+      v-if="labelPosition !== 'end'"
+      class="flex-1"
+      :class="separatorVariants({ orientation: 'horizontal', variant })"
+    />
+  </div>
+  <div
+    v-else
+    :role="decorative ? 'none' : 'separator'"
+    :aria-orientation="orientation"
+    :class="lineClasses"
+  />
+</template>

package/src/components/BirusSkeleton.vue

@@ -0,0 +1,46 @@
+<script setup>
+import { computed } from 'vue';
+import { cn } from '@birus-ui/core';
+
+const props = defineProps({
+  variant: { type: String, default: 'rect' },
+  width: { type: String, default: undefined },
+  height: { type: String, default: undefined },
+  lines: { type: Number, default: 3 },
+  class: { type: String, default: '' },
+});
+
+const basePulse = 'animate-pulse bg-muted';
+
+const singleClasses = computed(() => {
+  switch (props.variant) {
+    case 'circle':
+      return cn(basePulse, 'rounded-full h-10 w-10', props.class);
+    case 'card':
+      return cn(basePulse, 'rounded-birus-lg h-36 w-full', props.class);
+    default:
+      return cn(basePulse, 'rounded-birus h-4 w-full', props.class);
+  }
+});
+</script>
+
+<template>
+  <div v-if="variant === 'text'" class="space-y-2.5 w-full" aria-hidden="true">
+    <div
+      v-for="n in lines"
+      :key="n"
+      :class="[
+        basePulse,
+        'h-3.5 rounded-birus-sm',
+        n === lines && lines > 1 ? 'w-3/4' : 'w-full',
+        props.class,
+      ]"
+    />
+  </div>
+  <div
+    v-else
+    :class="singleClasses"
+    :style="{ width: width, height: height }"
+    aria-hidden="true"
+  />
+</template>