birus-ui 0.0.0-stage → 0.3.0

package/src/components/BirusText.vue

@@ -0,0 +1,74 @@
+<script setup>
+import { computed } from 'vue';
+import { cn, textVariants } from '@birus-ui/core';
+
+const props = defineProps({
+  as: {
+    type: String,
+    default: '',
+  },
+  variant: {
+    type: String,
+    default: 'body',
+  },
+  tone: {
+    type: String,
+    default: 'default',
+  },
+  weight: {
+    type: String,
+    default: 'normal',
+  },
+  align: {
+    type: String,
+    default: 'left',
+  },
+  truncate: {
+    type: Boolean,
+    default: false,
+  },
+  clamp: {
+    type: Number,
+    default: 0,
+  },
+  class: {
+    type: String,
+    default: '',
+  },
+});
+
+const tag = computed(() => {
+  if (props.as) return props.as;
+  if (props.variant === 'code') return 'code';
+  if (props.variant === 'quote') return 'blockquote';
+  if (props.variant === 'overline' || props.variant === 'caption') return 'span';
+  return 'p';
+});
+
+const clampClasses = {
+  1: 'line-clamp-1',
+  2: 'line-clamp-2',
+  3: 'line-clamp-3',
+  4: 'line-clamp-4',
+};
+
+const classes = computed(() =>
+  cn(
+    textVariants({
+      variant: props.variant,
+      tone: props.tone,
+      weight: props.weight,
+      align: props.align,
+    }),
+    props.truncate && 'truncate block',
+    props.clamp > 0 && clampClasses[props.clamp],
+    props.class
+  )
+);
+</script>
+
+<template>
+  <component :is="tag" :class="classes">
+    <slot />
+  </component>
+</template>

package/src/components/BirusTextarea.vue

@@ -0,0 +1,84 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { textareaVariants, cn } from '@birus-ui/core';
+
+const props = defineProps({
+  modelValue: { type: String, default: '' },
+  placeholder: { type: String, default: '' },
+  label: { type: String, default: '' },
+  hint: { type: String, default: '' },
+  errorMessage: { type: String, default: '' },
+  state: { type: String, default: 'default' },
+  rows: { type: Number, default: 4 },
+  maxlength: { type: Number, default: undefined },
+  autoResize: { type: Boolean, default: false },
+  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']);
+
+const textareaRef = ref(null);
+const uid = props.id || `birus-textarea-${Math.random().toString(36).slice(2, 9)}`;
+
+const resolvedState = computed(() => (props.errorMessage ? 'error' : props.state));
+const stringLength = computed(() => String(props.modelValue ?? '').length);
+
+const classes = computed(() =>
+  cn(
+    textareaVariants({
+      state: resolvedState.value,
+    }),
+    props.autoResize && 'resize-none overflow-hidden',
+    props.class,
+  ),
+);
+
+function onInput(event) {
+  const target = event.target;
+  if (props.autoResize && textareaRef.value) {
+    textareaRef.value.style.height = 'auto';
+    textareaRef.value.style.height = `${textareaRef.value.scrollHeight}px`;
+  }
+  emit('update:modelValue', target.value);
+}
+</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">
+        {{ 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>
+
+    <textarea
+      :id="uid"
+      ref="textareaRef"
+      :value="modelValue"
+      :rows="rows"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :readonly="readonly"
+      :required="required"
+      :maxlength="maxlength"
+      :aria-invalid="resolvedState === 'error' ? 'true' : undefined"
+      :class="classes"
+      @input="onInput"
+    />
+
+    <p
+      v-if="errorMessage || hint"
+      :class="['text-xs', errorMessage ? 'text-destructive font-medium' : 'text-muted-fg']"
+    >
+      {{ errorMessage || hint }}
+    </p>
+  </div>
+</template>

package/src/components/BirusTimeline.vue

@@ -0,0 +1,61 @@
+<script setup>
+import { cn } from '@birus-ui/core';
+
+const props = defineProps({
+  items: {
+    type: Array,
+    default: () => [],
+  },
+  class: {
+    type: String,
+    default: '',
+  },
+});
+
+const dotStyles = {
+  primary: 'bg-birus-primary ring-birus-primary/20',
+  success: 'bg-birus-success ring-birus-success/20',
+  warning: 'bg-birus-warning ring-birus-warning/20',
+  destructive: 'bg-birus-destructive ring-birus-destructive/20',
+  info: 'bg-birus-info ring-birus-info/20',
+  muted: 'bg-birus-muted-fg/50 ring-birus-muted',
+};
+</script>
+
+<template>
+  <ol :class="cn('relative space-y-6 before:absolute before:left-[11px] before:top-2 before:bottom-2 before:w-[2px] before:bg-birus-border', props.class)">
+    <li
+      v-for="(item, index) in items"
+      :key="item.id || index"
+      class="relative pl-8 group"
+    >
+      <span
+        class="absolute left-0 top-1.5 flex h-6 w-6 items-center justify-center rounded-full bg-birus-card border border-birus-border shadow-xs"
+      >
+        <span
+          class="h-2.5 w-2.5 rounded-full ring-4 transition-transform group-hover:scale-110"
+          :class="dotStyles[item.status || 'primary'] || dotStyles.primary"
+        />
+      </span>
+
+      <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-1">
+        <div class="flex items-center gap-2 flex-wrap">
+          <h4 class="text-sm font-semibold text-birus-fg">{{ item.title }}</h4>
+          <span
+            v-if="item.badge"
+            class="inline-flex items-center rounded-full bg-birus-primary/10 px-2 py-0.5 text-[11px] font-medium text-birus-primary border border-birus-primary/20"
+          >
+            {{ item.badge }}
+          </span>
+        </div>
+        <time v-if="item.time" class="text-xs font-mono text-birus-muted-fg shrink-0">
+          {{ item.time }}
+        </time>
+      </div>
+
+      <p v-if="item.description" class="mt-1 text-xs sm:text-sm text-birus-muted-fg leading-relaxed">
+        {{ item.description }}
+      </p>
+    </li>
+  </ol>
+</template>

package/src/components/BirusToaster.vue

@@ -0,0 +1,130 @@
+<script setup>
+import { useToast } from '../composables/useToast.js';
+
+defineProps({
+  position: { type: String, default: 'bottom-right' },
+});
+
+const { toasts, dismiss } = useToast();
+
+function getPositionClasses(pos) {
+  switch (pos) {
+    case 'top-right':
+      return 'top-4 right-4';
+    case 'top-left':
+      return 'top-4 left-4';
+    case 'bottom-left':
+      return 'bottom-4 left-4';
+    default:
+      return 'bottom-4 right-4';
+  }
+}
+
+function getAccentClasses(variant) {
+  switch (variant) {
+    case 'success':
+      return 'border-success/40 bg-card';
+    case 'warning':
+      return 'border-warning/40 bg-card';
+    case 'destructive':
+      return 'border-destructive/40 bg-card';
+    case 'info':
+      return 'border-info/40 bg-card';
+    default:
+      return 'border-border bg-card';
+  }
+}
+
+function getBadgeBarClass(variant) {
+  switch (variant) {
+    case 'success':
+      return 'bg-success';
+    case 'warning':
+      return 'bg-warning';
+    case 'destructive':
+      return 'bg-destructive';
+    case 'info':
+      return 'bg-info';
+    default:
+      return 'bg-primary';
+  }
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <div
+      :class="['fixed z-[60] flex flex-col gap-2.5 w-full max-w-sm pointer-events-none px-4 sm:px-0', getPositionClasses(position)]"
+      aria-live="polite"
+    >
+      <TransitionGroup
+        enter-active-class="transition duration-200 ease-out"
+        enter-from-class="opacity-0 translate-y-2 scale-95"
+        enter-to-class="opacity-100 translate-y-0 scale-100"
+        leave-active-class="transition duration-150 ease-in"
+        leave-from-class="opacity-100 scale-100"
+        leave-to-class="opacity-0 translate-x-4 scale-95"
+      >
+        <div
+          v-for="item in toasts"
+          :key="item.id"
+          :class="[
+            'pointer-events-auto relative overflow-hidden rounded-birus-lg border p-4 shadow-xl shadow-black/25 text-card-fg flex items-start gap-3',
+            getAccentClasses(item.variant),
+          ]"
+        >
+          <span :class="['w-1 self-stretch rounded-full shrink-0', getBadgeBarClass(item.variant)]" />
+
+          <div class="flex-1 min-w-0 space-y-1">
+            <div class="text-sm font-semibold leading-tight text-fg">{{ item.title }}</div>
+            <p v-if="item.description" class="text-xs text-muted-fg leading-relaxed">
+              {{ item.description }}
+            </p>
+            <button
+              v-if="item.action"
+              type="button"
+              class="mt-1.5 inline-flex text-xs font-semibold text-primary hover:underline"
+              @click="() => { item.action?.onClick(); dismiss(item.id); }"
+            >
+              {{ item.action.label }}
+            </button>
+          </div>
+
+          <button
+            type="button"
+            class="shrink-0 rounded-birus-sm p-1 text-muted-fg hover:text-fg hover:bg-surface-hover transition-colors"
+            aria-label="Fechar notificação"
+            @click="dismiss(item.id)"
+          >
+            <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>
+
+          <div
+            v-if="item.duration > 0"
+            :class="['absolute bottom-0 left-0 h-0.5 opacity-60 birus-toast-progress', getBadgeBarClass(item.variant)]"
+            :style="{ animationDuration: `${item.duration}ms` }"
+          />
+        </div>
+      </TransitionGroup>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped>
+@keyframes birus-toast-shrink {
+  from {
+    width: 100%;
+  }
+  to {
+    width: 0%;
+  }
+}
+
+.birus-toast-progress {
+  animation-name: birus-toast-shrink;
+  animation-timing-function: linear;
+  animation-fill-mode: forwards;
+}
+</style>

package/src/components/BirusTooltip.vue

@@ -0,0 +1,63 @@
+<script setup>
+import { computed, onBeforeUnmount, ref } from 'vue';
+import { tooltipContentVariants, cn } from '@birus-ui/core';
+
+const props = defineProps({
+  content: { type: String, required: true },
+  position: { type: String, default: 'top' },
+  delay: { type: Number, default: 150 },
+  disabled: { type: Boolean, default: false },
+  class: { type: String, default: '' },
+});
+
+const visible = ref(false);
+let timer = null;
+
+const tooltipClasses = computed(() =>
+  cn(tooltipContentVariants({ position: props.position }), props.class),
+);
+
+function show() {
+  if (props.disabled) return;
+  if (timer) clearTimeout(timer);
+  timer = setTimeout(() => {
+    visible.value = true;
+  }, props.delay);
+}
+
+function hide() {
+  if (timer) {
+    clearTimeout(timer);
+    timer = null;
+  }
+  visible.value = false;
+}
+
+onBeforeUnmount(() => {
+  if (timer) clearTimeout(timer);
+});
+</script>
+
+<template>
+  <div
+    class="relative inline-flex"
+    @mouseenter="show"
+    @mouseleave="hide"
+    @focusin="show"
+    @focusout="hide"
+  >
+    <slot />
+    <Transition
+      enter-active-class="transition duration-150 ease-out"
+      enter-from-class="opacity-0 scale-95"
+      enter-to-class="opacity-100 scale-100"
+      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="visible && content" role="tooltip" :class="['absolute', tooltipClasses]">
+        {{ content }}
+      </div>
+    </Transition>
+  </div>
+</template>

package/src/composables/useBirusTheme.js

@@ -0,0 +1,144 @@
+import { reactive, computed, onMounted, watch } from 'vue';
+import {
+  applyBirusTheme,
+  DEFAULT_BIRUS_THEME,
+  generateThemeCss,
+  BIRUS_PALETTES,
+  BIRUS_RADIUS_MAP,
+  BIRUS_FONTS,
+  BIRUS_TYPE_SCALE,
+} from '@birus-ui/core';
+
+const STORAGE_KEY = 'birus-ui-theme-config';
+
+const themeState = reactive({ ...DEFAULT_BIRUS_THEME });
+let initialized = false;
+
+function loadStoredTheme() {
+  if (typeof window === 'undefined') return null;
+  try {
+    const raw = window.localStorage.getItem(STORAGE_KEY);
+    return raw ? JSON.parse(raw) : null;
+  } catch {
+    return null;
+  }
+}
+
+function persistTheme(config) {
+  if (typeof window === 'undefined') return;
+  try {
+    window.localStorage.setItem(STORAGE_KEY, JSON.stringify(config));
+  } catch {
+    // Ignorar restrições de storage
+  }
+}
+
+export function initBirusTheme(initial) {
+  const stored = loadStoredTheme();
+  if (stored?.palette && stored.palette in BIRUS_PALETTES) {
+    themeState.palette = stored.palette;
+  } else if (initial?.palette) {
+    themeState.palette = initial.palette;
+  }
+
+  if (stored?.mode === 'light' || stored?.mode === 'dark') {
+    themeState.mode = stored.mode;
+  } else if (initial?.mode) {
+    themeState.mode = initial.mode;
+  }
+
+  if (stored?.radius && stored.radius in BIRUS_RADIUS_MAP) {
+    themeState.radius = stored.radius;
+  } else if (initial?.radius) {
+    themeState.radius = initial.radius;
+  }
+
+  if (stored?.font && stored.font in BIRUS_FONTS) {
+    themeState.font = stored.font;
+  } else if (initial?.font) {
+    themeState.font = initial.font;
+  }
+
+  if (stored?.tokens && typeof stored.tokens === 'object') {
+    themeState.tokens = { ...stored.tokens, ...(initial?.tokens || {}) };
+  } else if (initial?.tokens && typeof initial.tokens === 'object') {
+    themeState.tokens = { ...initial.tokens };
+  }
+
+  applyBirusTheme(themeState);
+  initialized = true;
+}
+
+export function useBirusTheme() {
+  onMounted(() => {
+    if (!initialized) {
+      initBirusTheme();
+    } else {
+      applyBirusTheme(themeState);
+    }
+  });
+
+  watch(
+    () => ({ ...themeState }),
+    (next) => {
+      applyBirusTheme(next);
+      persistTheme(next);
+    },
+    { deep: true },
+  );
+
+  const setPalette = (palette) => {
+    themeState.palette = palette;
+  };
+
+  const setMode = (mode) => {
+    themeState.mode = mode;
+  };
+
+  const toggleMode = () => {
+    themeState.mode = themeState.mode === 'dark' ? 'light' : 'dark';
+  };
+
+  const setRadius = (radius) => {
+    themeState.radius = radius;
+  };
+
+  const setFont = (font) => {
+    themeState.font = font;
+  };
+
+  const setCustomTokens = (customTokens = {}) => {
+    themeState.tokens = { ...(themeState.tokens || {}), ...customTokens };
+  };
+
+  const clearCustomTokens = () => {
+    themeState.tokens = {};
+  };
+
+  const resetTheme = () => {
+    themeState.palette = DEFAULT_BIRUS_THEME.palette;
+    themeState.mode = DEFAULT_BIRUS_THEME.mode;
+    themeState.radius = DEFAULT_BIRUS_THEME.radius;
+    themeState.font = DEFAULT_BIRUS_THEME.font;
+    themeState.tokens = {};
+  };
+
+  const themeCss = computed(() => generateThemeCss(themeState));
+
+  return {
+    theme: themeState,
+    palettes: Object.values(BIRUS_PALETTES),
+    radii: Object.values(BIRUS_RADIUS_MAP),
+    fonts: Object.values(BIRUS_FONTS),
+    typeScale: BIRUS_TYPE_SCALE,
+    themeCss,
+    setPalette,
+    setMode,
+    toggleMode,
+    setRadius,
+    setFont,
+    setCustomTokens,
+    clearCustomTokens,
+    resetTheme,
+  };
+}

package/src/composables/useToast.js

@@ -0,0 +1,63 @@
+import { ref, readonly } from 'vue';
+
+const toasts = ref([]);
+const timers = new Map();
+
+let idCounter = 0;
+
+function dismissToast(id) {
+  const timer = timers.get(id);
+  if (timer) {
+    clearTimeout(timer);
+    timers.delete(id);
+  }
+  toasts.value = toasts.value.filter((item) => item.id !== id);
+}
+
+function addToast(options) {
+  const id = `birus-toast-${++idCounter}-${Date.now()}`;
+  const duration = options.duration ?? 4500;
+  const item = {
+    id,
+    title: options.title,
+    description: options.description,
+    variant: options.variant ?? 'default',
+    duration,
+    action: options.action,
+    createdAt: Date.now(),
+  };
+
+  toasts.value = [item, ...toasts.value].slice(0, 5);
+
+  if (duration > 0) {
+    const timer = setTimeout(() => {
+      dismissToast(id);
+    }, duration);
+    timers.set(id, timer);
+  }
+
+  return id;
+}
+
+function clearToasts() {
+  timers.forEach((t) => clearTimeout(t));
+  timers.clear();
+  toasts.value = [];
+}
+
+export function useToast() {
+  return {
+    toasts: readonly(toasts),
+    toast: addToast,
+    dismiss: dismissToast,
+    clear: clearToasts,
+    success: (title, description) =>
+      addToast({ title, description, variant: 'success' }),
+    error: (title, description) =>
+      addToast({ title, description, variant: 'destructive' }),
+    warning: (title, description) =>
+      addToast({ title, description, variant: 'warning' }),
+    info: (title, description) =>
+      addToast({ title, description, variant: 'info' }),
+  };
+}