birus-ui 0.0.0-stage → 0.3.0

package/src/components/BirusBreadcrumb.vue

@@ -0,0 +1,61 @@
+<script setup>
+import { breadcrumbItemVariants, cn } from '@birus-ui/core';
+
+const props = defineProps({
+  items: { type: Array, default: () => [] },
+  separator: { type: String, default: 'chevron' }, // 'chevron' | 'slash' | 'dot'
+  size: { type: String, default: 'md' },
+  class: { type: String, default: '' },
+});
+
+const emit = defineEmits(['navigate']);
+
+function isLast(index) {
+  return index === props.items.length - 1;
+}
+
+function handleClick(item, index) {
+  if (isLast(index) || item.current) return;
+  emit('navigate', item);
+}
+</script>
+
+<template>
+  <nav aria-label="Breadcrumb" :class="cn('flex items-center flex-wrap gap-1.5', props.class)">
+    <ol class="inline-flex items-center flex-wrap gap-1.5">
+      <li
+        v-for="(item, index) in items"
+        :key="item.value || item.label || index"
+        class="inline-flex items-center gap-1.5"
+      >
+        <button
+          type="button"
+          :aria-current="isLast(index) || item.current ? 'page' : undefined"
+          :class="breadcrumbItemVariants({ size, active: isLast(index) || Boolean(item.current) })"
+          @click="handleClick(item, index)"
+        >
+          <span>{{ item.label }}</span>
+        </button>
+
+        <span
+          v-if="!isLast(index)"
+          class="text-muted-fg/60 select-none inline-flex items-center"
+          aria-hidden="true"
+        >
+          <span v-if="separator === 'slash'" class="text-xs px-0.5">/</span>
+          <span v-else-if="separator === 'dot'" class="text-xs px-0.5">•</span>
+          <svg
+            v-else
+            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="M9 18l6-6-6-6" />
+          </svg>
+        </span>
+      </li>
+    </ol>
+  </nav>
+</template>

package/src/components/BirusButton.vue

@@ -0,0 +1,84 @@
+<script setup>
+import { computed } from 'vue';
+import { buttonVariants, cn } from '@birus-ui/core';
+
+const props = defineProps({
+  variant: { type: String, default: 'default' },
+  size: { type: String, default: 'md' },
+  block: { type: Boolean, default: false },
+  pill: { type: Boolean, default: false },
+  loading: { type: Boolean, default: false },
+  disabled: { type: Boolean, default: false },
+  shortcut: { type: String, default: '' },
+  as: { type: String, default: 'button' },
+  type: { type: String, default: 'button' },
+  class: { type: String, default: '' },
+});
+
+const emit = defineEmits(['click']);
+
+const isDisabled = computed(() => props.disabled || props.loading);
+
+const classes = computed(() =>
+  cn(
+    buttonVariants({
+      variant: props.variant,
+      size: props.size,
+      block: props.block,
+      pill: props.pill,
+    }),
+    props.class,
+  ),
+);
+
+function handleClick(event) {
+  if (isDisabled.value) {
+    event.preventDefault();
+    return;
+  }
+  emit('click', event);
+}
+</script>
+
+<template>
+  <component
+    :is="as"
+    :type="as === 'button' ? type : undefined"
+    :disabled="as === 'button' ? isDisabled : undefined"
+    :aria-disabled="isDisabled ? 'true' : undefined"
+    :aria-busy="loading ? 'true' : undefined"
+    :class="classes"
+    @click="handleClick"
+  >
+    <svg
+      v-if="loading"
+      class="h-4 w-4 animate-spin shrink-0"
+      viewBox="0 0 24 24"
+      fill="none"
+      aria-hidden="true"
+    >
+      <circle
+        class="opacity-25"
+        cx="12"
+        cy="12"
+        r="10"
+        stroke="currentColor"
+        stroke-width="3"
+      />
+      <path
+        class="opacity-90"
+        fill="currentColor"
+        d="M4 12a8 8 0 018-8v3a5 5 0 00-5 5H4z"
+      />
+    </svg>
+    <slot v-else name="prefix" />
+    <slot />
+    <slot name="suffix" />
+    <kbd
+      v-if="shortcut && size !== 'icon'"
+      class="ml-1 inline-flex items-center rounded border border-current/20 bg-black/10 dark:bg-white/10 px-1.5 py-0.5 text-[10px] font-mono leading-none opacity-85"
+    >
+      {{ shortcut }}
+    </kbd>
+  </component>
+</template>

package/src/components/BirusCard.vue

@@ -0,0 +1,89 @@
+<script setup>
+import { computed, useSlots } from 'vue';
+import { cardVariants, cn } from '@birus-ui/core';
+import BirusBadge from './BirusBadge.vue';
+
+const props = defineProps({
+  variant: { type: String, default: 'default' },
+  title: { type: String, default: '' },
+  description: { type: String, default: '' },
+  badge: { type: String, default: '' },
+  badgeVariant: { type: String, default: 'secondary' },
+  padding: { type: String, default: 'md' },
+  accentTop: { type: Boolean, default: false },
+  class: { type: String, default: '' },
+});
+
+const slots = useSlots();
+
+const classes = computed(() =>
+  cn(
+    'relative',
+    cardVariants({ variant: props.variant }),
+    props.class,
+  ),
+);
+
+const paddingClass = computed(() => {
+  switch (props.padding) {
+    case 'none':
+      return 'p-0';
+    case 'sm':
+      return 'p-4';
+    case 'lg':
+      return 'p-7';
+    default:
+      return 'p-5';
+  }
+});
+
+const hasHeader = computed(
+  () => Boolean(slots.header) || Boolean(props.title) || Boolean(props.description) || Boolean(props.badge),
+);
+</script>
+
+<template>
+  <div :class="classes">
+    <div
+      v-if="accentTop"
+      class="h-1 w-full bg-gradient-to-r from-primary via-info to-primary"
+      aria-hidden="true"
+    />
+
+    <div v-if="$slots.media" class="w-full overflow-hidden border-b border-border">
+      <slot name="media" />
+    </div>
+
+    <div v-if="hasHeader" :class="[paddingClass, $slots.default ? 'pb-3' : '']">
+      <slot name="header">
+        <div class="flex items-start justify-between gap-3">
+          <div class="space-y-1">
+            <h3 v-if="title" class="text-base font-semibold tracking-tight text-card-fg">
+              {{ title }}
+            </h3>
+            <p v-if="description" class="text-sm text-muted-fg leading-relaxed">
+              {{ description }}
+            </p>
+          </div>
+          <BirusBadge v-if="badge" :variant="badgeVariant" size="sm" class="shrink-0">
+            {{ badge }}
+          </BirusBadge>
+        </div>
+      </slot>
+    </div>
+
+    <div v-if="$slots.default" :class="[paddingClass, hasHeader ? 'pt-0' : '']">
+      <slot />
+    </div>
+
+    <div
+      v-if="$slots.footer"
+      :class="[
+        paddingClass,
+        'pt-3.5 border-t border-border/80 bg-surface/50 flex items-center justify-between gap-3',
+      ]"
+    >
+      <slot name="footer" />
+    </div>
+  </div>
+</template>

package/src/components/BirusCheckbox.vue

@@ -0,0 +1,106 @@
+<script setup>
+import { computed } from 'vue';
+import { checkboxBoxVariants, cn } from '@birus-ui/core';
+
+const props = defineProps({
+  modelValue: { type: Boolean, default: false },
+  indeterminate: { 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-checkbox-${Math.random().toString(36).slice(2, 9)}`;
+const isCheckedOrMixed = computed(() => props.modelValue || props.indeterminate);
+
+const disabledClass = computed(() =>
+  props.disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer',
+);
+
+const boxClasses = computed(() =>
+  cn(
+    checkboxBoxVariants({
+      size: props.size,
+      checked: isCheckedOrMixed.value,
+    }),
+    disabledClass.value,
+    props.class,
+  ),
+);
+
+const iconSizeClass = computed(() => {
+  switch (props.size) {
+    case 'sm':
+      return 'h-3 w-3';
+    case 'lg':
+      return 'h-4 w-4';
+    default:
+      return 'h-3.5 w-3.5';
+  }
+});
+
+function toggle() {
+  if (props.disabled) return;
+  emit('update:modelValue', !props.modelValue);
+}
+</script>
+
+<template>
+  <div class="inline-flex items-start gap-2.5">
+    <button
+      :id="uid"
+      type="button"
+      role="checkbox"
+      :aria-checked="indeterminate ? 'mixed' : modelValue ? 'true' : 'false'"
+      :aria-labelledby="label ? `${uid}-label` : undefined"
+      :disabled="disabled"
+      :class="boxClasses"
+      @click="toggle"
+      @keydown.enter.prevent="toggle"
+    >
+      <svg
+        v-if="indeterminate"
+        :class="iconSizeClass"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="3"
+      >
+        <path stroke-linecap="round" d="M5 12h14" />
+      </svg>
+      <svg
+        v-else-if="modelValue"
+        :class="iconSizeClass"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="3"
+      >
+        <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
+      </svg>
+    </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/BirusDialog.vue

@@ -0,0 +1,127 @@
+<script setup>
+import { computed, onBeforeUnmount, watch } from 'vue';
+import { dialogContentVariants, cn } from '@birus-ui/core';
+
+const props = defineProps({
+  modelValue: { type: Boolean, required: true },
+  title: { type: String, default: '' },
+  description: { type: String, default: '' },
+  size: { type: String, default: 'md' },
+  closeOnOverlay: { type: Boolean, default: true },
+  closeOnEscape: { type: Boolean, default: true },
+  showCloseButton: { type: Boolean, default: true },
+  class: { type: String, default: '' },
+});
+
+const emit = defineEmits(['update:modelValue', 'close']);
+
+const contentClasses = computed(() =>
+  cn(dialogContentVariants({ size: props.size }), props.class),
+);
+
+function close() {
+  emit('update:modelValue', false);
+  emit('close');
+}
+
+function open() {
+  emit('update:modelValue', true);
+}
+
+function handleOverlayClick() {
+  if (props.closeOnOverlay) {
+    close();
+  }
+}
+
+function handleKeydown(event) {
+  if (event.key === 'Escape' && props.closeOnEscape && props.modelValue) {
+    event.stopPropagation();
+    close();
+  }
+}
+
+watch(
+  () => props.modelValue,
+  (isOpen) => {
+    if (typeof document === 'undefined') return;
+    if (isOpen) {
+      document.body.style.overflow = 'hidden';
+      window.addEventListener('keydown', handleKeydown);
+    } else {
+      document.body.style.overflow = '';
+      window.removeEventListener('keydown', handleKeydown);
+    }
+  },
+  { immediate: true },
+);
+
+onBeforeUnmount(() => {
+  if (typeof document !== 'undefined') {
+    document.body.style.overflow = '';
+    window.removeEventListener('keydown', handleKeydown);
+  }
+});
+</script>
+
+<template>
+  <slot name="trigger" :open="open" />
+
+  <Teleport to="body">
+    <Transition
+      enter-active-class="transition duration-200 ease-out"
+      enter-from-class="opacity-0"
+      enter-to-class="opacity-100"
+      leave-active-class="transition duration-150 ease-in"
+      leave-from-class="opacity-100"
+      leave-to-class="opacity-0"
+    >
+      <div
+        v-if="modelValue"
+        class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/65 backdrop-blur-sm"
+        @click.self="handleOverlayClick"
+      >
+        <div
+          role="dialog"
+          aria-modal="true"
+          :aria-label="title || 'Diálogo'"
+          :class="contentClasses"
+        >
+          <button
+            v-if="showCloseButton"
+            type="button"
+            class="absolute right-4 top-4 rounded-birus-sm p-1.5 text-muted-fg hover:text-fg hover:bg-surface-hover transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            aria-label="Fechar modal"
+            @click="close"
+          >
+            <svg 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="M18 6L6 18M6 6l12 12" />
+            </svg>
+          </button>
+
+          <div v-if="$slots.header || title || description" class="mb-4 pr-6 space-y-1.5">
+            <slot name="header">
+              <h2 v-if="title" class="text-lg font-semibold text-card-fg leading-snug">
+                {{ title }}
+              </h2>
+              <p v-if="description" class="text-sm text-muted-fg leading-relaxed">
+                {{ description }}
+              </p>
+            </slot>
+          </div>
+
+          <div class="text-sm text-card-fg">
+            <slot :close="close" />
+          </div>
+
+          <div
+            v-if="$slots.footer"
+            class="mt-6 flex flex-wrap items-center justify-end gap-2.5 pt-4 border-t border-border"
+          >
+            <slot name="footer" :close="close" />
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>

package/src/components/BirusDrawer.vue

@@ -0,0 +1,158 @@
+<script setup>
+import { computed, onBeforeUnmount, watch } from 'vue';
+import { drawerPanelVariants, cn } from '@birus-ui/core';
+
+const props = defineProps({
+  modelValue: { type: Boolean, default: false },
+  title: { type: String, default: '' },
+  description: { type: String, default: '' },
+  side: { type: String, default: 'right' }, // 'right' | 'left' | 'top' | 'bottom'
+  size: { type: String, default: 'md' }, // 'sm' | 'md' | 'lg' | 'xl'
+  closeOnOverlay: { type: Boolean, default: true },
+  closeOnEscape: { type: Boolean, default: true },
+  class: { type: String, default: '' },
+});
+
+const emit = defineEmits(['update:modelValue', 'close']);
+
+const panelClasses = computed(() =>
+  cn(
+    drawerPanelVariants({
+      side: props.side,
+      size: props.size,
+    }),
+    props.class,
+  ),
+);
+
+const enterFromClass = computed(() => {
+  switch (props.side) {
+    case 'left':
+      return '-translate-x-full';
+    case 'top':
+      return '-translate-y-full';
+    case 'bottom':
+      return 'translate-y-full';
+    default:
+      return 'translate-x-full';
+  }
+});
+
+function close() {
+  emit('update:modelValue', false);
+  emit('close');
+}
+
+function open() {
+  emit('update:modelValue', true);
+}
+
+function handleOverlayClick() {
+  if (props.closeOnOverlay) close();
+}
+
+function handleKeydown(event) {
+  if (event.key === 'Escape' && props.closeOnEscape && props.modelValue) {
+    event.stopPropagation();
+    close();
+  }
+}
+
+watch(
+  () => props.modelValue,
+  (isOpen) => {
+    if (typeof document === 'undefined') return;
+    if (isOpen) {
+      document.body.style.overflow = 'hidden';
+      window.addEventListener('keydown', handleKeydown);
+    } else {
+      document.body.style.overflow = '';
+      window.removeEventListener('keydown', handleKeydown);
+    }
+  },
+  { immediate: true },
+);
+
+onBeforeUnmount(() => {
+  if (typeof document !== 'undefined') {
+    document.body.style.overflow = '';
+    window.removeEventListener('keydown', handleKeydown);
+  }
+});
+</script>
+
+<template>
+  <slot name="trigger" :open="open" />
+
+  <Teleport to="body">
+    <Transition
+      enter-active-class="transition-opacity duration-200 ease-out"
+      enter-from-class="opacity-0"
+      enter-to-class="opacity-100"
+      leave-active-class="transition-opacity duration-150 ease-in"
+      leave-from-class="opacity-100"
+      leave-to-class="opacity-0"
+    >
+      <div
+        v-if="modelValue"
+        class="fixed inset-0 z-50 bg-black/60 backdrop-blur-sm"
+        @click.self="handleOverlayClick"
+      >
+        <Transition
+          appear
+          enter-active-class="transition-transform duration-200 ease-out"
+          :enter-from-class="enterFromClass"
+          enter-to-class="translate-x-0 translate-y-0"
+          leave-active-class="transition-transform duration-150 ease-in"
+          leave-from-class="translate-x-0 translate-y-0"
+          :leave-to-class="enterFromClass"
+        >
+          <div
+            v-if="modelValue"
+            role="dialog"
+            aria-modal="true"
+            :aria-label="title || 'Painel lateral'"
+            :class="panelClasses"
+          >
+            <!-- Header -->
+            <div class="flex items-start justify-between gap-4 border-b border-border p-5">
+              <div class="space-y-1">
+                <slot name="header">
+                  <h2 v-if="title" class="text-lg font-semibold text-card-fg leading-snug">
+                    {{ title }}
+                  </h2>
+                  <p v-if="description" class="text-sm text-muted-fg">
+                    {{ description }}
+                  </p>
+                </slot>
+              </div>
+              <button
+                type="button"
+                class="rounded-birus-sm p-1.5 text-muted-fg hover:text-fg hover:bg-surface-hover transition-colors"
+                aria-label="Fechar painel"
+                @click="close"
+              >
+                <svg 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="M18 6L6 18M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+
+            <!-- Body -->
+            <div class="flex-1 overflow-y-auto p-5 text-sm text-card-fg">
+              <slot :close="close" />
+            </div>
+
+            <!-- Footer -->
+            <div
+              v-if="$slots.footer"
+              class="flex flex-wrap items-center justify-end gap-2.5 border-t border-border bg-surface/60 p-4"
+            >
+              <slot name="footer" :close="close" />
+            </div>
+          </div>
+        </Transition>
+      </div>
+    </Transition>
+  </Teleport>
+</template>