birus-ui 0.0.0-stage → 0.3.0

package/src/components/BirusSlider.vue

@@ -0,0 +1,96 @@
+<script setup>
+import { computed } from 'vue';
+import { sliderTrackVariants, sliderFillVariants, cn } from '@birus-ui/core';
+
+const props = defineProps({
+  modelValue: { type: Number, default: 50 },
+  min: { type: Number, default: 0 },
+  max: { type: Number, default: 100 },
+  step: { type: Number, default: 1 },
+  size: { type: String, default: 'md' },
+  variant: { type: String, default: 'default' },
+  label: { type: String, default: '' },
+  showValue: { type: Boolean, default: true },
+  valueSuffix: { type: String, default: '' },
+  disabled: { type: Boolean, default: false },
+  class: { type: String, default: '' },
+});
+
+const emit = defineEmits(['update:modelValue', 'change']);
+
+const percentage = computed(() => {
+  const range = props.max - props.min;
+  if (range <= 0) return 0;
+  const clamped = Math.min(props.max, Math.max(props.min, props.modelValue));
+  return ((clamped - props.min) / range) * 100;
+});
+
+const thumbSizeClass = computed(() => {
+  switch (props.size) {
+    case 'sm':
+      return 'h-4 w-4';
+    case 'lg':
+      return 'h-6 w-6';
+    default:
+      return 'h-5 w-5';
+  }
+});
+
+function onInput(event) {
+  const val = Number(event.target.value);
+  emit('update:modelValue', val);
+}
+
+function onChange(event) {
+  emit('change', Number(event.target.value));
+}
+</script>
+
+<template>
+  <div :class="cn('w-full space-y-2', disabled && 'opacity-50', props.class)">
+    <div v-if="label || showValue" class="flex items-center justify-between gap-2">
+      <label v-if="label" class="text-sm font-medium text-fg leading-none">
+        {{ label }}
+      </label>
+      <span
+        v-if="showValue"
+        class="inline-flex items-center rounded-birus-sm border border-border bg-surface px-2 py-0.5 text-xs font-mono font-semibold text-fg tabular-nums ml-auto"
+      >
+        {{ modelValue }}{{ valueSuffix }}
+      </span>
+    </div>
+
+    <div class="relative flex items-center py-2">
+      <!-- Trilha visual -->
+      <div :class="sliderTrackVariants({ size })">
+        <div
+          :class="sliderFillVariants({ variant })"
+          :style="{ width: `${percentage}%` }"
+        />
+      </div>
+
+      <!-- Thumb visual posicionado -->
+      <span
+        :class="[
+          'pointer-events-none absolute -translate-x-1/2 rounded-full border-2 border-primary bg-card shadow-md transition-transform duration-75',
+          thumbSizeClass,
+        ]"
+        :style="{ left: `${percentage}%` }"
+      />
+
+      <!-- Input range nativo invisível para acessibilidade total (teclado + touch + mouse) -->
+      <input
+        type="range"
+        :value="modelValue"
+        :min="min"
+        :max="max"
+        :step="step"
+        :disabled="disabled"
+        :aria-label="label || 'Controle deslizante'"
+        class="absolute inset-0 h-full w-full cursor-pointer opacity-0 disabled:cursor-not-allowed"
+        @input="onInput"
+        @change="onChange"
+      />
+    </div>
+  </div>
+</template>

package/src/components/BirusStatCard.vue

@@ -0,0 +1,106 @@
+<script setup>
+import { computed } from 'vue';
+import { cn, statCardVariants, statTrendVariants } from '@birus-ui/core';
+
+const props = defineProps({
+  label: {
+    type: String,
+    required: true,
+  },
+  value: {
+    type: [String, Number],
+    required: true,
+  },
+  trend: {
+    type: String,
+    default: '',
+  },
+  trendDirection: {
+    type: String,
+    default: 'neutral',
+  },
+  caption: {
+    type: String,
+    default: '',
+  },
+  progress: {
+    type: Number,
+    default: null,
+  },
+  variant: {
+    type: String,
+    default: 'default',
+  },
+  class: {
+    type: String,
+    default: '',
+  },
+});
+
+const cardClasses = computed(() =>
+  cn(statCardVariants({ variant: props.variant }), props.class)
+);
+const trendClasses = computed(() =>
+  cn(statTrendVariants({ direction: props.trendDirection }))
+);
+</script>
+
+<template>
+  <div :class="cardClasses">
+    <div class="flex items-start justify-between gap-3">
+      <div class="space-y-1">
+        <p class="text-xs font-medium uppercase tracking-wider text-birus-muted-fg">
+          {{ label }}
+        </p>
+        <div class="flex items-baseline gap-2.5">
+          <span class="text-2xl sm:text-3xl font-bold tracking-tight text-birus-fg">
+            {{ value }}
+          </span>
+          <span v-if="trend" :class="trendClasses">
+            <svg
+              v-if="trendDirection === 'up'"
+              class="h-3 w-3"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              stroke-width="2.5"
+            >
+              <path stroke-linecap="round" stroke-linejoin="round" d="M5 10l7-7m0 0l7 7m-7-7v18" />
+            </svg>
+            <svg
+              v-else-if="trendDirection === 'down'"
+              class="h-3 w-3"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              stroke-width="2.5"
+            >
+              <path stroke-linecap="round" stroke-linejoin="round" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
+            </svg>
+            {{ trend }}
+          </span>
+        </div>
+      </div>
+
+      <div
+        v-if="$slots.icon"
+        class="flex h-10 w-10 shrink-0 items-center justify-center rounded-birus bg-birus-primary/10 text-birus-primary"
+      >
+        <slot name="icon" />
+      </div>
+    </div>
+
+    <div v-if="progress !== null && progress !== undefined" class="mt-4">
+      <div class="h-1.5 w-full overflow-hidden rounded-full bg-birus-muted">
+        <div
+          class="h-full rounded-full bg-birus-primary transition-all duration-300"
+          :style="{ width: `${Math.min(100, Math.max(0, progress))}%` }"
+        />
+      </div>
+    </div>
+
+    <p v-if="caption || $slots.footer" class="mt-3 text-xs text-birus-muted-fg">
+      <slot name="footer">{{ caption }}</slot>
+    </p>
+  </div>
+</template>

package/src/components/BirusStepper.vue

@@ -0,0 +1,114 @@
+<script setup>
+import { cn } from '@birus-ui/core';
+
+const props = defineProps({
+  steps: {
+    type: Array,
+    default: () => [],
+  },
+  modelValue: {
+    type: Number,
+    default: 0,
+  },
+  orientation: {
+    type: String,
+    default: 'horizontal',
+  },
+  clickable: {
+    type: Boolean,
+    default: true,
+  },
+  class: {
+    type: String,
+    default: '',
+  },
+});
+
+const emit = defineEmits(['update:modelValue', 'change']);
+
+function selectStep(index) {
+  if (!props.clickable) return;
+  emit('update:modelValue', index);
+  emit('change', index);
+}
+</script>
+
+<template>
+  <nav
+    aria-label="Progresso de etapas"
+    :class="
+      cn(
+        orientation === 'vertical'
+          ? 'flex flex-col space-y-4'
+          : 'flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 w-full',
+        props.class
+      )
+    "
+  >
+    <div
+      v-for="(step, idx) in steps"
+      :key="step.id || idx"
+      :class="
+        cn(
+          'flex items-center gap-3',
+          orientation === 'horizontal' && idx < steps.length - 1 ? 'flex-1 w-full' : ''
+        )
+      "
+    >
+      <button
+        type="button"
+        :disabled="!clickable"
+        :aria-current="idx === modelValue ? 'step' : undefined"
+        class="group flex items-center gap-3 text-left focus:outline-none disabled:cursor-default"
+        @click="selectStep(idx)"
+      >
+        <span
+          :class="
+            cn(
+              'flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-xs font-bold transition-all border',
+              idx < modelValue
+                ? 'bg-birus-primary text-birus-primary-fg border-birus-primary shadow-sm'
+                : idx === modelValue
+                ? 'bg-birus-primary/15 text-birus-primary border-birus-primary ring-4 ring-birus-primary/15'
+                : 'bg-birus-surface text-birus-muted-fg border-birus-border group-hover:border-birus-primary/40'
+            )
+          "
+        >
+          <svg
+            v-if="idx < modelValue"
+            class="h-4 w-4"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            stroke-width="2.5"
+          >
+            <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
+          </svg>
+          <span v-else>{{ idx + 1 }}</span>
+        </span>
+
+        <div class="min-w-0">
+          <p
+            :class="
+              cn(
+                'text-xs sm:text-sm font-semibold transition-colors',
+                idx <= modelValue ? 'text-birus-fg' : 'text-birus-muted-fg'
+              )
+            "
+          >
+            {{ step.title }}
+          </p>
+          <p v-if="step.description" class="text-[11px] text-birus-muted-fg truncate max-w-[180px]">
+            {{ step.description }}
+          </p>
+        </div>
+      </button>
+
+      <div
+        v-if="orientation === 'horizontal' && idx < steps.length - 1"
+        class="hidden sm:block flex-1 h-[2px] mx-2 rounded-full transition-colors"
+        :class="idx < modelValue ? 'bg-birus-primary' : 'bg-birus-border'"
+      />
+    </div>
+  </nav>
+</template>

package/src/components/BirusSwitch.vue

@@ -0,0 +1,76 @@
+<script setup>
+import { computed } from 'vue';
+import { switchTrackVariants, switchThumbVariants, cn } from '@birus-ui/core';
+
+const props = defineProps({
+  modelValue: { type: Boolean, default: false },
+  size: { type: String, default: 'md' },
+  label: { type: String, default: '' },
+  description: { type: String, default: '' },
+  disabled: { type: Boolean, default: false },
+  id: { type: String, default: undefined },
+  class: { type: String, default: '' },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const uid = props.id || `birus-switch-${Math.random().toString(36).slice(2, 9)}`;
+
+const trackClasses = computed(() =>
+  cn(
+    switchTrackVariants({
+      size: props.size,
+      checked: props.modelValue,
+    }),
+    props.class,
+  ),
+);
+
+const thumbClasses = computed(() =>
+  switchThumbVariants({
+    size: props.size,
+    checked: props.modelValue,
+  }),
+);
+
+function toggle() {
+  if (props.disabled) return;
+  emit('update:modelValue', !props.modelValue);
+}
+</script>
+
+<template>
+  <div class="inline-flex items-start gap-3">
+    <button
+      :id="uid"
+      type="button"
+      role="switch"
+      :aria-checked="modelValue ? 'true' : 'false'"
+      :aria-labelledby="label ? `${uid}-label` : undefined"
+      :disabled="disabled"
+      :class="trackClasses"
+      @click="toggle"
+      @keydown.enter.prevent="toggle"
+    >
+      <span :class="thumbClasses" />
+    </button>
+
+    <div v-if="label || description || $slots.default" class="flex flex-col gap-0.5">
+      <label
+        v-if="label || $slots.default"
+        :id="`${uid}-label`"
+        :for="uid"
+        :class="[
+          'text-sm font-medium leading-snug text-fg select-none',
+          disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer',
+        ]"
+        @click.prevent="toggle"
+      >
+        <slot>{{ label }}</slot>
+      </label>
+      <p v-if="description" class="text-xs text-muted-fg leading-relaxed">
+        {{ description }}
+      </p>
+    </div>
+  </div>
+</template>

package/src/components/BirusTable.vue

@@ -0,0 +1,126 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { tableCellVariants, cn } from '@birus-ui/core';
+
+const props = defineProps({
+  columns: { type: Array, default: () => [] }, // [{ key, label, sortable, align }]
+  rows: { type: Array, default: () => [] },
+  striped: { type: Boolean, default: false },
+  hoverable: { type: Boolean, default: true },
+  density: { type: String, default: 'default' }, // 'compact' | 'default' | 'relaxed'
+  emptyText: { type: String, default: 'Nenhum registro encontrado.' },
+  caption: { type: String, default: '' },
+  class: { type: String, default: '' },
+});
+
+const emit = defineEmits(['row-click', 'sort']);
+
+const sortKey = ref('');
+const sortOrder = ref('asc'); // 'asc' | 'desc'
+
+const sortedRows = computed(() => {
+  if (!sortKey.value) return props.rows;
+  const key = sortKey.value;
+  const dir = sortOrder.value === 'asc' ? 1 : -1;
+
+  return [...props.rows].sort((a, b) => {
+    const valA = a[key];
+    const valB = b[key];
+    if (valA === valB) return 0;
+    if (typeof valA === 'number' && typeof valB === 'number') {
+      return (valA - valB) * dir;
+    }
+    return String(valA ?? '').localeCompare(String(valB ?? '')) * dir;
+  });
+});
+
+function toggleSort(col) {
+  if (!col.sortable) return;
+  if (sortKey.value === col.key) {
+    if (sortOrder.value === 'asc') {
+      sortOrder.value = 'desc';
+    } else {
+      sortKey.value = '';
+      sortOrder.value = 'asc';
+    }
+  } else {
+    sortKey.value = col.key;
+    sortOrder.value = 'asc';
+  }
+  emit('sort', { key: sortKey.value, order: sortOrder.value });
+}
+
+function getAlignClass(align) {
+  if (align === 'right') return 'text-right';
+  if (align === 'center') return 'text-center';
+  return 'text-left';
+}
+</script>
+
+<template>
+  <div :class="cn('w-full overflow-x-auto rounded-birus-lg border border-border bg-card', props.class)">
+    <table class="w-full border-collapse text-sm">
+      <caption
+        v-if="caption"
+        class="border-b border-border bg-surface/50 px-4 py-2.5 text-left text-xs text-muted-fg"
+      >
+        {{ caption }}
+      </caption>
+
+      <thead class="border-b border-border bg-surface text-xs uppercase tracking-wider text-muted-fg">
+        <tr>
+          <th
+            v-for="col in columns"
+            :key="col.key"
+            :class="[
+              tableCellVariants({ density }),
+              getAlignClass(col.align),
+              'font-semibold select-none',
+              col.sortable && 'cursor-pointer hover:text-fg transition-colors',
+            ]"
+            @click="toggleSort(col)"
+          >
+            <span class="inline-flex items-center gap-1.5">
+              <span>{{ col.label }}</span>
+              <span v-if="col.sortable" class="text-[10px]">
+                <template v-if="sortKey === col.key">
+                  {{ sortOrder === 'asc' ? '▲' : '▼' }}
+                </template>
+                <span v-else class="opacity-35">⇅</span>
+              </span>
+            </span>
+          </th>
+        </tr>
+      </thead>
+
+      <tbody class="divide-y divide-border">
+        <tr
+          v-for="(row, rIdx) in sortedRows"
+          :key="row.id || rIdx"
+          :class="[
+            'transition-colors',
+            striped && rIdx % 2 === 1 && 'bg-surface/40',
+            hoverable && 'hover:bg-surface-hover/70',
+          ]"
+          @click="emit('row-click', row)"
+        >
+          <td
+            v-for="col in columns"
+            :key="col.key"
+            :class="[tableCellVariants({ density }), getAlignClass(col.align), 'text-fg']"
+          >
+            <slot :name="`cell-${col.key}`" :row="row" :value="row[col.key]">
+              {{ row[col.key] }}
+            </slot>
+          </td>
+        </tr>
+
+        <tr v-if="sortedRows.length === 0">
+          <td :colspan="Math.max(1, columns.length)" class="px-4 py-8 text-center text-sm text-muted-fg">
+            {{ emptyText }}
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>

package/src/components/BirusTabs.vue

@@ -0,0 +1,121 @@
+<script setup>
+import { computed, ref, watch } from 'vue';
+import { tabsListVariants, tabsTriggerVariants, cn } from '@birus-ui/core';
+
+const props = defineProps({
+  modelValue: { type: String, default: '' },
+  defaultValue: { type: String, default: '' },
+  tabs: { type: Array, default: () => [] },
+  variant: { type: String, default: 'segmented' },
+  fullWidth: { type: Boolean, default: false },
+  class: { type: String, default: '' },
+});
+
+const emit = defineEmits(['update:modelValue', 'change']);
+
+const triggerRefs = ref([]);
+const internalValue = ref(
+  props.modelValue || props.defaultValue || props.tabs[0]?.value || ''
+);
+
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    if (newVal !== undefined && newVal !== '') {
+      internalValue.value = newVal;
+    }
+  }
+);
+
+const activeValue = computed(() => {
+  if (internalValue.value && props.tabs.some((t) => t.value === internalValue.value)) {
+    return internalValue.value;
+  }
+  return props.tabs[0]?.value ?? '';
+});
+
+const listClasses = computed(() =>
+  cn(
+    tabsListVariants({ variant: props.variant, fullWidth: props.fullWidth }),
+    props.class,
+  ),
+);
+
+function selectTab(tab) {
+  if (tab.disabled) return;
+  internalValue.value = tab.value;
+  emit('update:modelValue', tab.value);
+  emit('change', tab.value);
+}
+
+function handleKeydown(event, index) {
+  const enabledIndexes = props.tabs
+    .map((t, i) => (t.disabled ? -1 : i))
+    .filter((i) => i !== -1);
+
+  if (enabledIndexes.length === 0) return;
+
+  const currentPos = enabledIndexes.indexOf(index);
+  let targetPos = currentPos;
+
+  if (event.key === 'ArrowRight') {
+    targetPos = (currentPos + 1) % enabledIndexes.length;
+  } else if (event.key === 'ArrowLeft') {
+    targetPos = (currentPos - 1 + enabledIndexes.length) % enabledIndexes.length;
+  } else if (event.key === 'Home') {
+    targetPos = 0;
+  } else if (event.key === 'End') {
+    targetPos = enabledIndexes.length - 1;
+  } else {
+    return;
+  }
+
+  event.preventDefault();
+  const nextIndex = enabledIndexes[targetPos];
+  const nextTab = props.tabs[nextIndex];
+  if (nextTab) {
+    selectTab(nextTab);
+    triggerRefs.value[nextIndex]?.focus();
+  }
+}
+</script>
+
+<template>
+  <div class="w-full">
+    <div role="tablist" :class="listClasses">
+      <button
+        v-for="(tab, index) in tabs"
+        :key="tab.value"
+        :ref="(el) => { if (el) triggerRefs[index] = el; }"
+        type="button"
+        role="tab"
+        :aria-selected="activeValue === tab.value ? 'true' : 'false'"
+        :tabindex="activeValue === tab.value ? 0 : -1"
+        :disabled="tab.disabled"
+        :class="tabsTriggerVariants({ variant, active: activeValue === tab.value, fullWidth })"
+        @click="selectTab(tab)"
+        @keydown="handleKeydown($event, index)"
+      >
+        <slot :name="`icon-${tab.value}`" />
+        <span>{{ tab.label }}</span>
+        <span
+          v-if="tab.badge !== undefined"
+          :class="[
+            'inline-flex items-center justify-center rounded-full px-1.5 py-0.5 text-[10px] font-semibold leading-none',
+            activeValue === tab.value
+              ? 'bg-primary/15 text-primary'
+              : 'bg-surface-hover text-muted-fg',
+          ]"
+        >
+          {{ tab.badge }}
+        </span>
+      </button>
+    </div>
+
+    <div v-if="$slots.default || $slots[`panel-${activeValue}`]" class="mt-4" role="tabpanel">
+      <slot :name="`panel-${activeValue}`" :active-tab="activeValue">
+        <slot :active-tab="activeValue" />
+      </slot>
+    </div>
+  </div>
+</template>