@datametria/vue-components 1.1.1

package/src/components/DatametriaNavbar.vue

@@ -0,0 +1,227 @@
+<template>
+  <nav 
+    class="dm-navbar" 
+    :class="[
+      `dm-navbar--${props.variant}`,
+      { 'dm-navbar--sticky': props.sticky },
+      { 'dm-navbar--transparent': props.transparent },
+      { 'dm-navbar--bordered': props.bordered }
+    ]" 
+    role="navigation" 
+    :aria-label="props.ariaLabel"
+  >
+    <div class="dm-navbar__container">
+      <div class="dm-navbar__brand">
+        <slot name="brand">
+          <a href="/" class="dm-navbar__logo">{{ brand }}</a>
+        </slot>
+      </div>
+      
+      <button
+        v-if="$slots.menu"
+        class="dm-navbar__toggle"
+        :aria-expanded="isMenuOpen"
+        aria-controls="navbar-menu"
+        @click="toggleMenu"
+      >
+        <span class="dm-navbar__toggle-icon"></span>
+      </button>
+
+      <div
+        id="navbar-menu"
+        class="dm-navbar__menu"
+        :class="{ 'dm-navbar__menu--open': isMenuOpen }"
+      >
+        <slot name="menu"></slot>
+      </div>
+
+      <div v-if="$slots.actions" class="dm-navbar__actions">
+        <slot name="actions"></slot>
+      </div>
+    </div>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+interface Props {
+  brand?: string
+  variant?: 'light' | 'dark' | 'transparent'
+  sticky?: boolean
+  transparent?: boolean
+  bordered?: boolean
+  ariaLabel?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  brand: '',
+  variant: 'light',
+  sticky: false,
+  transparent: false,
+  bordered: false,
+  ariaLabel: 'Main navigation'
+})
+
+const isMenuOpen = ref(false)
+
+const toggleMenu = () => {
+  isMenuOpen.value = !isMenuOpen.value
+}
+</script>
+
+<style scoped>
+.dm-navbar {
+  width: 100%;
+  background: var(--dm-white);
+  border-bottom: 1px solid var(--dm-gray-200);
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+
+.dm-navbar--dark {
+  background: var(--dm-gray-900);
+  border-bottom-color: var(--dm-gray-800);
+}
+
+.dm-navbar--transparent {
+  background: transparent;
+  border-bottom: none;
+}
+
+.dm-navbar__container {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: var(--dm-space-4);
+  display: flex;
+  align-items: center;
+  gap: var(--dm-space-4);
+}
+
+.dm-navbar__brand {
+  flex-shrink: 0;
+}
+
+.dm-navbar__logo {
+  font-size: var(--dm-text-lg);
+  font-weight: 600;
+  color: var(--dm-text-primary);
+  text-decoration: none;
+}
+
+.dm-navbar--dark .dm-navbar__logo {
+  color: var(--dm-white);
+}
+
+.dm-navbar__toggle {
+  display: none;
+  width: 44px;
+  height: 44px;
+  padding: var(--dm-space-2);
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  margin-left: auto;
+}
+
+.dm-navbar__toggle-icon {
+  display: block;
+  width: 24px;
+  height: 2px;
+  background: var(--dm-text-primary);
+  position: relative;
+  transition: var(--dm-transition);
+}
+
+.dm-navbar__toggle-icon::before,
+.dm-navbar__toggle-icon::after {
+  content: '';
+  position: absolute;
+  width: 24px;
+  height: 2px;
+  background: var(--dm-text-primary);
+  transition: var(--dm-transition);
+}
+
+.dm-navbar__toggle-icon::before {
+  top: -8px;
+}
+
+.dm-navbar__toggle-icon::after {
+  bottom: -8px;
+}
+
+.dm-navbar__menu {
+  display: flex;
+  align-items: center;
+  gap: var(--dm-space-4);
+  flex: 1;
+}
+
+.dm-navbar__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--dm-space-2);
+  margin-left: auto;
+}
+
+@media (max-width: 768px) {
+  .dm-navbar__toggle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .dm-navbar__menu {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    background: var(--dm-white);
+    border-bottom: 1px solid var(--dm-gray-200);
+    flex-direction: column;
+    align-items: stretch;
+    padding: var(--dm-space-4);
+    display: none;
+  }
+
+  .dm-navbar--dark .dm-navbar__menu {
+    background: var(--dm-gray-900);
+    border-bottom-color: var(--dm-gray-800);
+  }
+
+  .dm-navbar__menu--open {
+    display: flex;
+  }
+
+  .dm-navbar__actions {
+    margin-left: 0;
+    margin-top: var(--dm-space-4);
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .dm-navbar {
+    background: var(--dm-gray-900);
+    border-bottom-color: var(--dm-gray-800);
+  }
+
+  .dm-navbar__logo {
+    color: var(--dm-white);
+  }
+
+  .dm-navbar__toggle-icon,
+  .dm-navbar__toggle-icon::before,
+  .dm-navbar__toggle-icon::after {
+    background: var(--dm-white);
+  }
+
+  @media (max-width: 768px) {
+    .dm-navbar__menu {
+      background: var(--dm-gray-900);
+      border-bottom-color: var(--dm-gray-800);
+    }
+  }
+}
+</style>

package/src/components/DatametriaProgress.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="dm-progress">
+    <div v-if="label" class="dm-progress__header">
+      <span class="dm-progress__label">{{ label }}</span>
+      <span v-if="showValue" class="dm-progress__value">{{ value }}%</span>
+    </div>
+    <div
+      class="dm-progress__track"
+      role="progressbar"
+      :aria-valuenow="value"
+      :aria-valuemin="0"
+      :aria-valuemax="100"
+      :aria-label="ariaLabel || label"
+    >
+      <div
+        class="dm-progress__bar"
+        :class="`dm-progress__bar--${variant}`"
+        :style="{ width: `${clampedValue}%` }"
+      ></div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  value: number
+  label?: string
+  variant?: 'primary' | 'success' | 'warning' | 'error'
+  showValue?: boolean
+  ariaLabel?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'primary',
+  showValue: true
+})
+
+const clampedValue = computed(() => {
+  return Math.min(Math.max(props.value, 0), 100)
+})
+</script>
+
+<style scoped>
+.dm-progress {
+  display: flex;
+  flex-direction: column;
+  gap: var(--dm-space-2);
+}
+
+.dm-progress__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.dm-progress__label {
+  font-size: var(--dm-text-sm);
+  font-weight: 500;
+  color: var(--dm-text-primary);
+}
+
+.dm-progress__value {
+  font-size: var(--dm-text-sm);
+  font-weight: 600;
+  color: var(--dm-text-secondary);
+}
+
+.dm-progress__track {
+  width: 100%;
+  height: 8px;
+  background: var(--dm-gray-200);
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.dm-progress__bar {
+  height: 100%;
+  border-radius: 4px;
+  transition: width 0.3s ease;
+}
+
+.dm-progress__bar--primary {
+  background: var(--dm-primary);
+}
+
+.dm-progress__bar--success {
+  background: var(--dm-success);
+}
+
+.dm-progress__bar--warning {
+  background: var(--dm-warning);
+}
+
+.dm-progress__bar--error {
+  background: var(--dm-error);
+}
+
+@media (prefers-color-scheme: dark) {
+  .dm-progress__track {
+    background: var(--dm-gray-700);
+  }
+
+  .dm-progress__label {
+    color: var(--dm-white);
+  }
+
+  .dm-progress__value {
+    color: var(--dm-gray-400);
+  }
+}
+</style>

package/src/components/DatametriaRadio.vue

@@ -0,0 +1,138 @@
+<template>
+  <div class="dm-radio">
+    <label class="dm-radio__label">
+      <input
+        type="radio"
+        class="dm-radio__input"
+        :value="value"
+        :checked="modelValue === value"
+        :disabled="disabled"
+        :name="name"
+        :aria-label="ariaLabel"
+        :aria-describedby="error ? `${name}-error` : undefined"
+        @change="handleChange"
+      />
+      <span class="dm-radio__checkmark"></span>
+      <span v-if="label" class="dm-radio__text">{{ label }}</span>
+    </label>
+    <p v-if="error" :id="`${name}-error`" class="dm-radio__error">{{ error }}</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  modelValue?: string | number | boolean
+  value: string | number | boolean
+  label?: string
+  name?: string
+  disabled?: boolean
+  error?: string
+  ariaLabel?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  disabled: false
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string | number | boolean]
+}>()
+
+const handleChange = () => {
+  if (!props.disabled) {
+    emit('update:modelValue', props.value)
+  }
+}
+</script>
+
+<style scoped>
+.dm-radio {
+  display: flex;
+  flex-direction: column;
+  gap: var(--dm-space-1);
+}
+
+.dm-radio__label {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--dm-space-2);
+  cursor: pointer;
+  min-height: 44px;
+  padding: var(--dm-space-2);
+  user-select: none;
+}
+
+.dm-radio__label:has(.dm-radio__input:disabled) {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.dm-radio__input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.dm-radio__checkmark {
+  position: relative;
+  width: 20px;
+  height: 20px;
+  border: 2px solid var(--dm-gray-400);
+  border-radius: 50%;
+  background: var(--dm-white);
+  transition: var(--dm-transition);
+  flex-shrink: 0;
+}
+
+.dm-radio__input:checked + .dm-radio__checkmark {
+  border-color: var(--dm-primary);
+  background: var(--dm-primary);
+}
+
+.dm-radio__input:checked + .dm-radio__checkmark::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--dm-white);
+}
+
+.dm-radio__input:focus-visible + .dm-radio__checkmark {
+  outline: var(--dm-focus-ring);
+  outline-offset: 2px;
+}
+
+.dm-radio__input:disabled + .dm-radio__checkmark {
+  background: var(--dm-gray-100);
+  border-color: var(--dm-gray-300);
+}
+
+.dm-radio__text {
+  color: var(--dm-text-primary);
+  font-size: var(--dm-text-base);
+  line-height: 1.5;
+}
+
+.dm-radio__error {
+  color: var(--dm-error);
+  font-size: var(--dm-text-sm);
+  margin: 0;
+}
+
+@media (prefers-color-scheme: dark) {
+  .dm-radio__checkmark {
+    background: var(--dm-gray-800);
+    border-color: var(--dm-gray-600);
+  }
+
+  .dm-radio__input:disabled + .dm-radio__checkmark {
+    background: var(--dm-gray-900);
+    border-color: var(--dm-gray-700);
+  }
+}
+</style>

package/src/components/DatametriaSelect.vue

@@ -0,0 +1,112 @@
+<template>
+  <div class="datametria-select">
+    <label v-if="label" :for="selectId" class="datametria-select__label">
+      {{ label }}
+      <span v-if="required" class="datametria-select__required">*</span>
+    </label>
+    
+    <select
+      :id="selectId"
+      :value="modelValue"
+      :disabled="disabled"
+      :required="required"
+      :class="selectClasses"
+      @change="$emit('update:modelValue', ($event.target as HTMLSelectElement).value)"
+    >
+      <option v-if="placeholder" value="" disabled>{{ placeholder }}</option>
+      <option v-for="option in options" :key="option.value" :value="option.value">
+        {{ option.label }}
+      </option>
+    </select>
+    
+    <p v-if="errorMessage" class="datametria-select__error">{{ errorMessage }}</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Option {
+  value: string | number
+  label: string
+}
+
+interface Props {
+  modelValue?: string | number
+  options: Option[]
+  label?: string
+  placeholder?: string
+  errorMessage?: string
+  disabled?: boolean
+  required?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: '',
+  disabled: false,
+  required: false
+})
+
+defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+
+const selectId = computed(() => `select-${Math.random().toString(36).substr(2, 9)}`)
+
+const selectClasses = computed(() => [
+  'datametria-select__field',
+  {
+    'datametria-select__field--error': props.errorMessage,
+    'datametria-select__field--disabled': props.disabled
+  }
+])
+</script>
+
+<style scoped>
+.datametria-select {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.datametria-select__label {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #374151;
+}
+
+.datametria-select__required {
+  color: #ef4444;
+}
+
+.datametria-select__field {
+  padding: 0.75rem;
+  border: 1px solid #d1d5db;
+  border-radius: 0.375rem;
+  font-size: 1rem;
+  background: white;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.datametria-select__field:focus {
+  outline: none;
+  border-color: #0072CE;
+  box-shadow: 0 0 0 3px rgba(0, 114, 206, 0.1);
+}
+
+.datametria-select__field--error {
+  border-color: #ef4444;
+}
+
+.datametria-select__field--disabled {
+  background: #f3f4f6;
+  cursor: not-allowed;
+}
+
+.datametria-select__error {
+  font-size: 0.875rem;
+  color: #ef4444;
+  margin: 0;
+}
+</style>

package/src/components/DatametriaSpinner.vue

@@ -0,0 +1,112 @@
+<template>
+  <div
+    class="dm-spinner"
+    :class="[`dm-spinner--${size}`, `dm-spinner--${variant}`]"
+    role="status"
+    :aria-label="ariaLabel"
+  >
+    <svg class="dm-spinner__svg" viewBox="0 0 50 50">
+      <circle
+        class="dm-spinner__circle"
+        cx="25"
+        cy="25"
+        r="20"
+        fill="none"
+        stroke-width="4"
+      ></circle>
+    </svg>
+    <span v-if="label" class="dm-spinner__label">{{ label }}</span>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  size?: 'sm' | 'md' | 'lg'
+  variant?: 'primary' | 'secondary' | 'white'
+  label?: string
+  ariaLabel?: string
+}
+
+withDefaults(defineProps<Props>(), {
+  size: 'md',
+  variant: 'primary',
+  ariaLabel: 'Carregando'
+})
+</script>
+
+<style scoped>
+.dm-spinner {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--dm-space-2);
+}
+
+.dm-spinner__svg {
+  animation: dm-spinner-rotate 2s linear infinite;
+}
+
+.dm-spinner--sm .dm-spinner__svg {
+  width: 20px;
+  height: 20px;
+}
+
+.dm-spinner--md .dm-spinner__svg {
+  width: 40px;
+  height: 40px;
+}
+
+.dm-spinner--lg .dm-spinner__svg {
+  width: 60px;
+  height: 60px;
+}
+
+.dm-spinner__circle {
+  stroke-linecap: round;
+  animation: dm-spinner-dash 1.5s ease-in-out infinite;
+}
+
+.dm-spinner--primary .dm-spinner__circle {
+  stroke: var(--dm-primary);
+}
+
+.dm-spinner--secondary .dm-spinner__circle {
+  stroke: var(--dm-secondary);
+}
+
+.dm-spinner--white .dm-spinner__circle {
+  stroke: var(--dm-white);
+}
+
+.dm-spinner__label {
+  font-size: var(--dm-text-sm);
+  color: var(--dm-text-secondary);
+}
+
+@keyframes dm-spinner-rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes dm-spinner-dash {
+  0% {
+    stroke-dasharray: 1, 150;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -35;
+  }
+  100% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -124;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .dm-spinner__label {
+    color: var(--dm-gray-400);
+  }
+}
+</style>