birus-ui 0.0.0-stage → 0.3.0

package/src/components/BirusDropdownMenu.vue

@@ -0,0 +1,184 @@
+<script setup>
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
+import { dropdownContentVariants, dropdownItemVariants, cn } from '@birus-ui/core';
+import BirusButton from './BirusButton.vue';
+
+const props = defineProps({
+  items: { type: Array, default: () => [] },
+  align: { type: String, default: 'end' }, // 'start' | 'center' | 'end'
+  triggerLabel: { type: String, default: 'Opções' },
+  triggerVariant: { type: String, default: 'outline' },
+  triggerSize: { type: String, default: 'md' },
+  class: { type: String, default: '' },
+});
+
+const emit = defineEmits(['select']);
+
+const rootRef = ref(null);
+const isOpen = ref(false);
+const highlightedIndex = ref(-1);
+
+const contentClasses = computed(() =>
+  cn(dropdownContentVariants({ align: props.align }), props.class),
+);
+
+const actionableIndexes = computed(() =>
+  props.items
+    .map((item, idx) => (item.divider || item.header || item.disabled ? -1 : idx))
+    .filter((idx) => idx !== -1),
+);
+
+function openMenu() {
+  isOpen.value = true;
+  highlightedIndex.value = actionableIndexes.value[0] ?? -1;
+}
+
+function closeMenu() {
+  isOpen.value = false;
+  highlightedIndex.value = -1;
+}
+
+function toggleMenu() {
+  if (isOpen.value) {
+    closeMenu();
+  } else {
+    openMenu();
+  }
+}
+
+function selectItem(item) {
+  if (item.disabled || item.divider || item.header) return;
+  emit('select', item);
+  if (typeof item.onClick === 'function') {
+    item.onClick(item);
+  }
+  closeMenu();
+}
+
+function handleKeydown(event) {
+  if (!isOpen.value) {
+    if (event.key === 'ArrowDown' || event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      openMenu();
+    }
+    return;
+  }
+
+  if (event.key === 'Escape') {
+    event.preventDefault();
+    closeMenu();
+    return;
+  }
+
+  const list = actionableIndexes.value;
+  if (!list.length) return;
+  const currentPos = list.indexOf(highlightedIndex.value);
+
+  if (event.key === 'ArrowDown') {
+    event.preventDefault();
+    highlightedIndex.value = list[(currentPos + 1) % list.length];
+  } else if (event.key === 'ArrowUp') {
+    event.preventDefault();
+    highlightedIndex.value = list[(currentPos - 1 + list.length) % list.length];
+  } else if (event.key === 'Enter') {
+    event.preventDefault();
+    const item = props.items[highlightedIndex.value];
+    if (item) selectItem(item);
+  }
+}
+
+function handleClickOutside(event) {
+  if (rootRef.value && !rootRef.value.contains(event.target)) {
+    closeMenu();
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('mousedown', handleClickOutside);
+});
+
+onBeforeUnmount(() => {
+  document.removeEventListener('mousedown', handleClickOutside);
+});
+</script>
+
+<template>
+  <div ref="rootRef" class="relative inline-block text-left" @keydown="handleKeydown">
+    <slot name="trigger" :is-open="isOpen" :toggle="toggleMenu" :open="openMenu" :close="closeMenu">
+      <BirusButton
+        :variant="triggerVariant"
+        :size="triggerSize"
+        aria-haspopup="menu"
+        :aria-expanded="isOpen ? 'true' : 'false'"
+        @click="toggleMenu"
+      >
+        <span>{{ triggerLabel }}</span>
+        <template #suffix>
+          <svg
+            :class="['h-4 w-4 transition-transform duration-150', 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>
+        </template>
+      </BirusButton>
+    </slot>
+
+    <Transition
+      enter-active-class="transition duration-150 ease-out"
+      enter-from-class="opacity-0 scale-95 -translate-y-1"
+      enter-to-class="opacity-100 scale-100 translate-y-0"
+      leave-active-class="transition duration-100 ease-in"
+      leave-from-class="opacity-100 scale-100"
+      leave-to-class="opacity-0 scale-95"
+    >
+      <div v-if="isOpen" role="menu" :class="contentClasses">
+        <template v-for="(item, index) in items" :key="item.id || index">
+          <div
+            v-if="item.divider"
+            class="my-1 h-px bg-border"
+            role="separator"
+          />
+          <div
+            v-else-if="item.header"
+            class="px-2.5 py-1.5 text-[11px] font-semibold uppercase tracking-wider text-muted-fg"
+          >
+            {{ item.header }}
+          </div>
+          <button
+            v-else
+            type="button"
+            role="menuitem"
+            :disabled="item.disabled"
+            :class="[
+              dropdownItemVariants({
+                variant: item.variant || 'default',
+                disabled: Boolean(item.disabled),
+              }),
+              highlightedIndex === index && 'bg-surface-hover',
+            ]"
+            @mouseenter="highlightedIndex = index"
+            @click="selectItem(item)"
+          >
+            <div class="flex flex-col min-w-0">
+              <span class="font-medium truncate">{{ item.label }}</span>
+              <span v-if="item.description" class="text-xs text-muted-fg truncate">
+                {{ item.description }}
+              </span>
+            </div>
+            <kbd
+              v-if="item.shortcut"
+              class="ml-auto rounded border border-border bg-surface px-1.5 py-0.5 text-[10px] font-mono text-muted-fg shrink-0"
+            >
+              {{ item.shortcut }}
+            </kbd>
+          </button>
+        </template>
+        <slot :close="closeMenu" />
+      </div>
+    </Transition>
+  </div>
+</template>

package/src/components/BirusEmptyState.vue

@@ -0,0 +1,64 @@
+<script setup>
+import { computed } from 'vue';
+import { cn } from '@birus-ui/core';
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: 'Nenhum item encontrado',
+  },
+  description: {
+    type: String,
+    default: '',
+  },
+  variant: {
+    type: String,
+    default: 'default',
+  },
+  class: {
+    type: String,
+    default: '',
+  },
+});
+
+const containerClasses = computed(() =>
+  cn(
+    'flex flex-col items-center justify-center text-center rounded-birus-lg transition-all',
+    props.variant === 'default' && 'border border-birus-border bg-birus-card/60 p-8 sm:p-10',
+    props.variant === 'dashed' && 'border-2 border-dashed border-birus-border bg-birus-surface/30 p-8 sm:p-10',
+    props.variant === 'compact' && 'border border-birus-border bg-birus-surface/20 p-5',
+    props.class
+  )
+);
+</script>
+
+<template>
+  <div :class="containerClasses">
+    <div
+      class="mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-birus-primary/10 text-birus-primary ring-4 ring-birus-primary/5"
+    >
+      <slot name="icon">
+        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"
+          />
+        </svg>
+      </slot>
+    </div>
+
+    <h3 class="text-base font-semibold text-birus-fg">{{ title }}</h3>
+    <p v-if="description" class="mt-1.5 max-w-sm text-sm text-birus-muted-fg leading-relaxed">
+      {{ description }}
+    </p>
+
+    <div v-if="$slots.default" class="mt-4 w-full max-w-sm">
+      <slot />
+    </div>
+
+    <div v-if="$slots.actions" class="mt-5 flex flex-wrap items-center justify-center gap-2.5">
+      <slot name="actions" />
+    </div>
+  </div>
+</template>

package/src/components/BirusHeading.vue

@@ -0,0 +1,70 @@
+<script setup>
+import { computed } from 'vue';
+import { cn, headingVariants } from '@birus-ui/core';
+
+const props = defineProps({
+  as: {
+    type: String,
+    default: 'h2',
+  },
+  size: {
+    type: String,
+    default: 'xl',
+  },
+  weight: {
+    type: String,
+    default: 'bold',
+  },
+  tracking: {
+    type: String,
+    default: 'tight',
+  },
+  align: {
+    type: String,
+    default: 'left',
+  },
+  gradient: {
+    type: Boolean,
+    default: false,
+  },
+  balance: {
+    type: Boolean,
+    default: false,
+  },
+  accentLine: {
+    type: Boolean,
+    default: false,
+  },
+  class: {
+    type: String,
+    default: '',
+  },
+});
+
+const classes = computed(() =>
+  cn(
+    headingVariants({
+      size: props.size,
+      weight: props.weight,
+      tracking: props.tracking,
+      align: props.align,
+      gradient: props.gradient,
+    }),
+    props.balance && 'text-balance',
+    props.class
+  )
+);
+</script>
+
+<template>
+  <div class="inline-flex flex-col gap-1.5" :class="align === 'center' ? 'items-center w-full' : align === 'right' ? 'items-end w-full' : 'items-start'">
+    <component :is="as" :class="classes">
+      <slot />
+    </component>
+    <span
+      v-if="accentLine"
+      class="h-1 w-12 rounded-full bg-gradient-to-r from-birus-primary to-birus-info"
+      aria-hidden="true"
+    />
+  </div>
+</template>

package/src/components/BirusInput.vue

@@ -0,0 +1,197 @@
+<script setup>
+import { computed, ref, useSlots } from 'vue';
+import { inputVariants, cn } from '@birus-ui/core';
+
+const props = defineProps({
+  modelValue: { type: [String, Number], default: '' },
+  type: { type: String, default: 'text' },
+  placeholder: { type: String, default: '' },
+  label: { type: String, default: '' },
+  hint: { type: String, default: '' },
+  errorMessage: { type: String, default: '' },
+  state: { type: String, default: 'default' },
+  size: { type: String, default: 'md' },
+  prefixText: { type: String, default: '' },
+  suffixText: { type: String, default: '' },
+  clearable: { type: Boolean, default: false },
+  maxlength: { type: Number, default: undefined },
+  disabled: { type: Boolean, default: false },
+  readonly: { type: Boolean, default: false },
+  required: { type: Boolean, default: false },
+  id: { type: String, default: undefined },
+  class: { type: String, default: '' },
+});
+
+const emit = defineEmits(['update:modelValue', 'clear', 'focus', 'blur']);
+
+const slots = useSlots();
+const showPassword = ref(false);
+const uid = props.id || `birus-input-${Math.random().toString(36).slice(2, 9)}`;
+
+const resolvedState = computed(() => (props.errorMessage ? 'error' : props.state));
+
+const effectiveType = computed(() => {
+  if (props.type === 'password') {
+    return showPassword.value ? 'text' : 'password';
+  }
+  return props.type;
+});
+
+const stringLength = computed(() => String(props.modelValue ?? '').length);
+const hasValue = computed(() => stringLength.value > 0);
+const hasLeftSlot = computed(() => Boolean(slots.left));
+const hasRightControls = computed(
+  () =>
+    Boolean(slots.right) ||
+    props.type === 'password' ||
+    (props.clearable && hasValue.value && !props.disabled),
+);
+
+const inputClasses = computed(() =>
+  cn(
+    inputVariants({
+      state: resolvedState.value,
+      size: props.size,
+    }),
+    hasLeftSlot.value && 'pl-9',
+    hasRightControls.value && 'pr-10',
+    props.prefixText && 'rounded-l-none',
+    props.suffixText && 'rounded-r-none',
+    props.class,
+  ),
+);
+
+function onInput(event) {
+  emit('update:modelValue', event.target.value);
+}
+
+function handleClear() {
+  emit('update:modelValue', '');
+  emit('clear');
+}
+</script>
+
+<template>
+  <div class="w-full space-y-1.5">
+    <div v-if="label || maxlength" class="flex items-center justify-between gap-2">
+      <label
+        v-if="label"
+        :for="uid"
+        class="text-sm font-medium text-fg leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+      >
+        {{ label }}
+        <span v-if="required" class="text-destructive ml-0.5">*</span>
+      </label>
+      <span v-if="maxlength" class="text-xs text-muted-fg tabular-nums ml-auto">
+        {{ stringLength }}/{{ maxlength }}
+      </span>
+    </div>
+
+    <div class="flex items-stretch">
+      <span
+        v-if="prefixText"
+        class="inline-flex items-center rounded-l-birus border border-r-0 border-input bg-surface px-3 text-xs font-mono text-muted-fg select-none"
+      >
+        {{ prefixText }}
+      </span>
+
+      <div class="relative flex flex-1 items-center">
+        <span
+          v-if="hasLeftSlot"
+          class="pointer-events-none absolute left-3 flex items-center text-muted-fg"
+        >
+          <slot name="left" />
+        </span>
+
+        <input
+          :id="uid"
+          :type="effectiveType"
+          :value="modelValue"
+          :placeholder="placeholder"
+          :disabled="disabled"
+          :readonly="readonly"
+          :required="required"
+          :maxlength="maxlength"
+          :aria-invalid="resolvedState === 'error' ? 'true' : undefined"
+          :aria-describedby="errorMessage || hint ? `${uid}-desc` : undefined"
+          :class="inputClasses"
+          @input="onInput"
+          @focus="emit('focus', $event)"
+          @blur="emit('blur', $event)"
+        />
+
+        <div
+          v-if="hasRightControls"
+          class="absolute right-2.5 flex items-center gap-1 text-muted-fg"
+        >
+          <button
+            v-if="clearable && hasValue && !disabled && !readonly"
+            type="button"
+            class="inline-flex h-6 w-6 items-center justify-center rounded-birus-sm hover:bg-surface-hover hover:text-fg transition-colors"
+            aria-label="Limpar campo"
+            @click="handleClear"
+          >
+            <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>
+          </button>
+
+          <button
+            v-if="type === 'password'"
+            type="button"
+            class="inline-flex h-6 w-6 items-center justify-center rounded-birus-sm hover:bg-surface-hover hover:text-fg transition-colors"
+            :aria-label="showPassword ? 'Ocultar senha' : 'Mostrar senha'"
+            @click="showPassword = !showPassword"
+          >
+            <svg
+              v-if="showPassword"
+              class="h-4 w-4"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M3 3l18 18M10.584 10.587a2 2 0 002.828 2.83M9.363 5.365A9.466 9.466 0 0112 5c4.478 0 8.268 2.943 9.543 7a9.97 9.97 0 01-1.563 3.029m-5.858.908a3 3 0 01-4.243-4.243M3.735 7.736A9.969 9.969 0 002.458 12c1.274 4.057 5.064 7 9.542 7a9.46 9.46 0 003.32-.6"
+              />
+            </svg>
+            <svg
+              v-else
+              class="h-4 w-4"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
+              />
+              <circle cx="12" cy="12" r="3" />
+            </svg>
+          </button>
+
+          <slot name="right" />
+        </div>
+      </div>
+
+      <span
+        v-if="suffixText"
+        class="inline-flex items-center rounded-r-birus border border-l-0 border-input bg-surface px-3 text-xs font-mono text-muted-fg select-none"
+      >
+        {{ suffixText }}
+      </span>
+    </div>
+
+    <p
+      v-if="errorMessage || hint"
+      :id="`${uid}-desc`"
+      :class="['text-xs', errorMessage ? 'text-destructive font-medium' : 'text-muted-fg']"
+    >
+      {{ errorMessage || hint }}
+    </p>
+  </div>
+</template>

package/src/components/BirusKbd.vue

@@ -0,0 +1,43 @@
+<script setup>
+import { computed } from 'vue';
+import { kbdVariants, cn } from '@birus-ui/core';
+
+const props = defineProps({
+  keys: { type: [Array, String], default: () => [] },
+  size: { type: String, default: 'md' }, // 'sm' | 'md' | 'lg'
+  variant: { type: String, default: 'default' }, // 'default' | 'outline' | 'primary'
+  class: { type: String, default: '' },
+});
+
+const normalizedKeys = computed(() => {
+  if (Array.isArray(props.keys)) return props.keys;
+  if (typeof props.keys === 'string' && props.keys.trim()) {
+    return props.keys.split('+').map((k) => k.trim());
+  }
+  return [];
+});
+
+const keyClasses = computed(() =>
+  cn(kbdVariants({ size: props.size, variant: props.variant }), props.class),
+);
+</script>
+
+<template>
+  <span class="inline-flex items-center gap-1 align-middle">
+    <template v-if="normalizedKeys.length > 0">
+      <template v-for="(k, idx) in normalizedKeys" :key="`${k}-${idx}`">
+        <kbd :class="keyClasses">{{ k }}</kbd>
+        <span
+          v-if="idx < normalizedKeys.length - 1"
+          class="text-[10px] text-muted-fg font-mono select-none"
+          aria-hidden="true"
+        >
+          +
+        </span>
+      </template>
+    </template>
+    <kbd v-else :class="keyClasses">
+      <slot />
+    </kbd>
+  </span>
+</template>

package/src/components/BirusPagination.vue

@@ -0,0 +1,132 @@
+<script setup>
+import { computed } from 'vue';
+import { paginationItemVariants, cn } from '@birus-ui/core';
+
+const props = defineProps({
+  modelValue: { type: Number, default: 1 },
+  totalPages: { type: Number, default: 10 },
+  siblingCount: { type: Number, default: 1 },
+  variant: { type: String, default: 'default' }, // 'default' | 'outline' | 'pills'
+  size: { type: String, default: 'md' },
+  showEdges: { type: Boolean, default: true },
+  disabled: { type: Boolean, default: false },
+  class: { type: String, default: '' },
+});
+
+const emit = defineEmits(['update:modelValue', 'change']);
+
+const pages = computed(() => {
+  const total = Math.max(1, props.totalPages);
+  const current = Math.min(total, Math.max(1, props.modelValue));
+  const siblings = props.siblingCount;
+
+  const totalNumbers = siblings * 2 + 5;
+  if (total <= totalNumbers) {
+    return Array.from({ length: total }, (_, i) => i + 1);
+  }
+
+  const leftSibling = Math.max(current - siblings, 1);
+  const rightSibling = Math.min(current + siblings, total);
+
+  const showLeftDots = leftSibling > 2;
+  const showRightDots = rightSibling < total - 1;
+
+  if (!showLeftDots && showRightDots) {
+    const leftCount = 3 + 2 * siblings;
+    const leftRange = Array.from({ length: leftCount }, (_, i) => i + 1);
+    return [...leftRange, '...', total];
+  }
+
+  if (showLeftDots && !showRightDots) {
+    const rightCount = 3 + 2 * siblings;
+    const rightRange = Array.from({ length: rightCount }, (_, i) => total - rightCount + i + 1);
+    return [1, '...', ...rightRange];
+  }
+
+  const middleRange = Array.from(
+    { length: rightSibling - leftSibling + 1 },
+    (_, i) => leftSibling + i,
+  );
+  return [1, '...', ...middleRange, '...', total];
+});
+
+function goToPage(page) {
+  if (props.disabled) return;
+  const clamped = Math.min(props.totalPages, Math.max(1, page));
+  if (clamped !== props.modelValue) {
+    emit('update:modelValue', clamped);
+    emit('change', clamped);
+  }
+}
+</script>
+
+<template>
+  <nav role="navigation" aria-label="Paginação" :class="cn('inline-flex items-center gap-1.5 flex-wrap', props.class)">
+    <!-- Primeira página -->
+    <button
+      v-if="showEdges"
+      type="button"
+      :disabled="disabled || modelValue <= 1"
+      :class="paginationItemVariants({ variant, size, active: false })"
+      aria-label="Primeira página"
+      @click="goToPage(1)"
+    >
+      «
+    </button>
+
+    <!-- Anterior -->
+    <button
+      type="button"
+      :disabled="disabled || modelValue <= 1"
+      :class="paginationItemVariants({ variant, size, active: false })"
+      aria-label="Página anterior"
+      @click="goToPage(modelValue - 1)"
+    >
+      ‹ Anterior
+    </button>
+
+    <!-- Números -->
+    <template v-for="(item, idx) in pages" :key="`${item}-${idx}`">
+      <span
+        v-if="item === '...'"
+        class="px-2 text-xs text-muted-fg select-none"
+        aria-hidden="true"
+      >
+        •••
+      </span>
+      <button
+        v-else
+        type="button"
+        :disabled="disabled"
+        :aria-current="modelValue === item ? 'page' : undefined"
+        :class="paginationItemVariants({ variant, size, active: modelValue === item })"
+        @click="goToPage(item)"
+      >
+        {{ item }}
+      </button>
+    </template>
+
+    <!-- Próxima -->
+    <button
+      type="button"
+      :disabled="disabled || modelValue >= totalPages"
+      :class="paginationItemVariants({ variant, size, active: false })"
+      aria-label="Próxima página"
+      @click="goToPage(modelValue + 1)"
+    >
+      Próxima ›
+    </button>
+
+    <!-- Última página -->
+    <button
+      v-if="showEdges"
+      type="button"
+      :disabled="disabled || modelValue >= totalPages"
+      :class="paginationItemVariants({ variant, size, active: false })"
+      aria-label="Última página"
+      @click="goToPage(totalPages)"
+    >
+      »
+    </button>
+  </nav>
+</template>