@mkatogui/uds-vue 0.2.1

package/src/components/UdsHero.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  variant?: 'centered' | 'product-screenshot' | 'video-bg' | 'gradient-mesh' | 'search-forward' | 'split'
+  size?: 'full' | 'compact'
+  headline?: string
+  subheadline?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'centered',
+  size: 'full',
+})
+
+const classes = computed(() =>
+  [
+    'uds-hero',
+    `uds-hero--${props.variant}`,
+    `uds-hero--${props.size}`,
+  ]
+    .filter(Boolean)
+    .join(' ')
+)
+</script>
+
+<template>
+  <section :class="classes">
+    <div class="uds-hero__content">
+      <h1 v-if="headline" class="uds-hero__headline">{{ headline }}</h1>
+      <p v-if="subheadline" class="uds-hero__subheadline">{{ subheadline }}</p>
+      <div class="uds-hero__cta">
+        <slot name="cta" />
+      </div>
+      <div class="uds-hero__social-proof">
+        <slot name="social-proof" />
+      </div>
+    </div>
+    <div class="uds-hero__visual">
+      <slot name="visual" />
+    </div>
+    <slot />
+  </section>
+</template>

package/src/components/UdsInput.vue

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import { computed, useId } from 'vue'
+
+interface Props {
+  variant?: 'text' | 'email' | 'password' | 'number' | 'search' | 'textarea'
+  size?: 'sm' | 'md' | 'lg'
+  state?: 'default' | 'focus' | 'error' | 'disabled' | 'readonly'
+  label?: string
+  helperText?: string
+  errorText?: string
+  required?: boolean
+  modelValue?: string | number
+  placeholder?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'text',
+  size: 'md',
+  state: 'default',
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string | number]
+}>()
+
+const inputId = useId()
+const helperId = useId()
+const errorId = useId()
+
+const classes = computed(() =>
+  [
+    'uds-input',
+    `uds-input--${props.variant}`,
+    `uds-input--${props.size}`,
+    props.state === 'error' && 'uds-input--error',
+    props.state === 'disabled' && 'uds-input--disabled',
+  ]
+    .filter(Boolean)
+    .join(' ')
+)
+
+const describedBy = computed(() => {
+  const ids: string[] = []
+  if (props.errorText) ids.push(errorId)
+  if (props.helperText) ids.push(helperId)
+  return ids.length ? ids.join(' ') : undefined
+})
+
+function handleInput(e: Event) {
+  const target = e.target as HTMLInputElement | HTMLTextAreaElement
+  emit('update:modelValue', target.value)
+}
+</script>
+
+<template>
+  <div :class="classes">
+    <label v-if="label" :for="inputId" class="uds-input__label">
+      {{ label }}
+      <span v-if="required" class="uds-input__required" aria-hidden="true">*</span>
+    </label>
+    <textarea
+      v-if="variant === 'textarea'"
+      :id="inputId"
+      class="uds-input__field uds-input__textarea"
+      :value="modelValue"
+      :placeholder="placeholder"
+      :required="required"
+      :disabled="state === 'disabled'"
+      :readonly="state === 'readonly'"
+      :aria-invalid="state === 'error' || undefined"
+      :aria-describedby="describedBy"
+      @input="handleInput"
+    />
+    <input
+      v-else
+      :id="inputId"
+      class="uds-input__field"
+      :type="variant"
+      :value="modelValue"
+      :placeholder="placeholder"
+      :required="required"
+      :disabled="state === 'disabled'"
+      :readonly="state === 'readonly'"
+      :aria-invalid="state === 'error' || undefined"
+      :aria-describedby="describedBy"
+      @input="handleInput"
+    />
+    <p v-if="errorText && state === 'error'" :id="errorId" class="uds-input__error" role="alert">
+      {{ errorText }}
+    </p>
+    <p v-if="helperText" :id="helperId" class="uds-input__helper">
+      {{ helperText }}
+    </p>
+  </div>
+</template>

package/src/components/UdsModal.vue

@@ -0,0 +1,114 @@
+<script setup lang="ts">
+import { computed, ref, watch, onUnmounted, nextTick } from 'vue'
+
+interface Props {
+  variant?: 'confirmation' | 'task' | 'alert'
+  size?: 'sm' | 'md' | 'lg'
+  open?: boolean
+  title?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'confirmation',
+  size: 'md',
+})
+
+const emit = defineEmits<{
+  close: []
+}>()
+
+const modalRef = ref<HTMLElement | null>(null)
+let previousFocus: HTMLElement | null = null
+
+const classes = computed(() =>
+  [
+    'uds-modal',
+    `uds-modal--${props.variant}`,
+    `uds-modal--${props.size}`,
+  ]
+    .filter(Boolean)
+    .join(' ')
+)
+
+function getFocusableElements(): HTMLElement[] {
+  if (!modalRef.value) return []
+  return Array.from(
+    modalRef.value.querySelectorAll<HTMLElement>(
+      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+    )
+  )
+}
+
+function handleKeydown(e: KeyboardEvent) {
+  if (e.key === 'Escape') {
+    emit('close')
+    return
+  }
+  if (e.key === 'Tab') {
+    const focusable = getFocusableElements()
+    if (!focusable.length) return
+    const first = focusable[0]
+    const last = focusable[focusable.length - 1]
+    if (e.shiftKey && document.activeElement === first) {
+      e.preventDefault()
+      last.focus()
+    } else if (!e.shiftKey && document.activeElement === last) {
+      e.preventDefault()
+      first.focus()
+    }
+  }
+}
+
+watch(() => props.open, async (isOpen) => {
+  if (isOpen) {
+    previousFocus = document.activeElement as HTMLElement
+    document.body.style.overflow = 'hidden'
+    document.addEventListener('keydown', handleKeydown)
+    await nextTick()
+    const focusable = getFocusableElements()
+    if (focusable.length) focusable[0].focus()
+  } else {
+    document.body.style.overflow = ''
+    document.removeEventListener('keydown', handleKeydown)
+    previousFocus?.focus()
+  }
+})
+
+onUnmounted(() => {
+  document.body.style.overflow = ''
+  document.removeEventListener('keydown', handleKeydown)
+})
+
+function handleOverlayClick(e: MouseEvent) {
+  if (e.target === e.currentTarget) emit('close')
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <div v-if="open" class="uds-modal-overlay" role="presentation" @click="handleOverlayClick">
+      <div
+        ref="modalRef"
+        :class="classes"
+        role="dialog"
+        aria-modal="true"
+        :aria-label="title"
+      >
+        <div v-if="title" class="uds-modal__header">
+          <h2 class="uds-modal__title">{{ title }}</h2>
+          <button class="uds-modal__close" aria-label="Close dialog" @click="emit('close')">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+              <path d="M18 6L6 18M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+        <div class="uds-modal__body">
+          <slot />
+        </div>
+        <div class="uds-modal__footer">
+          <slot name="actions" />
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>

package/src/components/UdsNavbar.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+interface Props {
+  variant?: 'standard' | 'minimal' | 'dark' | 'transparent'
+  sticky?: boolean
+  blurOnScroll?: boolean
+  megaMenu?: boolean
+  darkModeToggle?: boolean
+  ctaButton?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'standard',
+})
+
+const mobileOpen = ref(false)
+
+const classes = computed(() =>
+  [
+    'uds-navbar',
+    `uds-navbar--${props.variant}`,
+    props.sticky && 'uds-navbar--sticky',
+    mobileOpen.value && 'uds-navbar--mobile-open',
+  ]
+    .filter(Boolean)
+    .join(' ')
+)
+
+function toggleMobile() {
+  mobileOpen.value = !mobileOpen.value
+}
+</script>
+
+<template>
+  <nav :class="classes" aria-label="Main navigation">
+    <div class="uds-navbar__brand">
+      <slot name="brand" />
+    </div>
+    <button
+      class="uds-navbar__toggle"
+      :aria-expanded="mobileOpen"
+      aria-label="Toggle navigation menu"
+      @click="toggleMobile"
+    >
+      <slot name="toggle-icon">
+        <span class="uds-navbar__hamburger" aria-hidden="true" />
+      </slot>
+    </button>
+    <div class="uds-navbar__menu" :hidden="!mobileOpen && undefined">
+      <slot />
+    </div>
+    <div v-if="ctaButton" class="uds-navbar__cta">
+      <slot name="cta" />
+    </div>
+  </nav>
+</template>

package/src/components/UdsPagination.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  variant?: 'numbered' | 'simple' | 'load-more' | 'infinite-scroll'
+  size?: 'sm' | 'md'
+  currentPage?: number
+  totalPages?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'numbered',
+  size: 'md',
+  currentPage: 1,
+  totalPages: 1,
+})
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+const classes = computed(() =>
+  [
+    'uds-pagination',
+    `uds-pagination--${props.variant}`,
+    `uds-pagination--${props.size}`,
+  ]
+    .filter(Boolean)
+    .join(' ')
+)
+
+const pages = computed(() => {
+  const result: (number | string)[] = []
+  const total = props.totalPages
+  const current = props.currentPage
+
+  if (total <= 7) {
+    for (let i = 1; i <= total; i++) result.push(i)
+  } else {
+    result.push(1)
+    if (current > 3) result.push('...')
+    const start = Math.max(2, current - 1)
+    const end = Math.min(total - 1, current + 1)
+    for (let i = start; i <= end; i++) result.push(i)
+    if (current < total - 2) result.push('...')
+    result.push(total)
+  }
+  return result
+})
+</script>
+
+<template>
+  <nav :class="classes" aria-label="Pagination">
+    <template v-if="variant === 'numbered' || variant === 'simple'">
+      <button
+        class="uds-pagination__prev"
+        :disabled="currentPage <= 1"
+        aria-label="Previous page"
+        @click="emit('pageChange', currentPage - 1)"
+      >
+        Previous
+      </button>
+      <ol v-if="variant === 'numbered'" class="uds-pagination__list">
+        <li v-for="(page, i) in pages" :key="i">
+          <span v-if="page === '...'" class="uds-pagination__ellipsis">...</span>
+          <button
+            v-else
+            class="uds-pagination__page"
+            :aria-current="page === currentPage ? 'page' : undefined"
+            :aria-label="`Page ${page}`"
+            @click="emit('pageChange', page as number)"
+          >
+            {{ page }}
+          </button>
+        </li>
+      </ol>
+      <button
+        class="uds-pagination__next"
+        :disabled="currentPage >= totalPages"
+        aria-label="Next page"
+        @click="emit('pageChange', currentPage + 1)"
+      >
+        Next
+      </button>
+    </template>
+    <template v-if="variant === 'load-more'">
+      <button
+        class="uds-pagination__load-more"
+        :disabled="currentPage >= totalPages"
+        @click="emit('pageChange', currentPage + 1)"
+      >
+        <slot>Load more</slot>
+      </button>
+    </template>
+  </nav>
+</template>

package/src/components/UdsPricing.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+interface Plan {
+  name: string
+  price: string
+  annualPrice?: string
+  features: string[]
+  highlighted?: boolean
+  cta?: string
+}
+
+interface Props {
+  variant?: '2-column' | '3-column' | '4-column' | 'toggle'
+  size?: 'standard' | 'compact'
+  plans?: Plan[]
+  highlightedPlan?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: '3-column',
+  size: 'standard',
+  plans: () => [],
+})
+
+const isAnnual = ref(false)
+
+const classes = computed(() =>
+  [
+    'uds-pricing',
+    `uds-pricing--${props.variant}`,
+    `uds-pricing--${props.size}`,
+  ]
+    .filter(Boolean)
+    .join(' ')
+)
+</script>
+
+<template>
+  <div :class="classes">
+    <div v-if="variant === 'toggle'" class="uds-pricing__toggle">
+      <span>Monthly</span>
+      <button
+        role="switch"
+        :aria-checked="isAnnual"
+        aria-label="Toggle annual pricing"
+        class="uds-pricing__switch"
+        @click="isAnnual = !isAnnual"
+      >
+        <span class="uds-pricing__switch-thumb" />
+      </button>
+      <span>Annual</span>
+    </div>
+    <div class="uds-pricing__plans">
+      <slot :is-annual="isAnnual" />
+    </div>
+  </div>
+</template>

package/src/components/UdsProgress.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  variant?: 'bar' | 'circular' | 'stepper'
+  size?: 'sm' | 'md' | 'lg'
+  value?: number
+  max?: number
+  label?: string
+  showValue?: boolean
+  indeterminate?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'bar',
+  size: 'md',
+  value: 0,
+  max: 100,
+})
+
+const classes = computed(() =>
+  [
+    'uds-progress',
+    `uds-progress--${props.variant}`,
+    `uds-progress--${props.size}`,
+    props.indeterminate && 'uds-progress--indeterminate',
+  ]
+    .filter(Boolean)
+    .join(' ')
+)
+
+const percentage = computed(() =>
+  props.max > 0 ? Math.round((props.value / props.max) * 100) : 0
+)
+
+const circumference = computed(() => 2 * Math.PI * 40)
+const strokeDashoffset = computed(() =>
+  circumference.value - (percentage.value / 100) * circumference.value
+)
+</script>
+
+<template>
+  <div :class="classes">
+    <div v-if="label" class="uds-progress__label">{{ label }}</div>
+
+    <template v-if="variant === 'bar'">
+      <div
+        class="uds-progress__track"
+        role="progressbar"
+        :aria-valuenow="indeterminate ? undefined : value"
+        :aria-valuemin="0"
+        :aria-valuemax="max"
+        :aria-label="label"
+      >
+        <div
+          class="uds-progress__fill"
+          :style="indeterminate ? {} : { width: `${percentage}%` }"
+        />
+      </div>
+    </template>
+
+    <template v-else-if="variant === 'circular'">
+      <svg
+        class="uds-progress__circle"
+        viewBox="0 0 100 100"
+        role="progressbar"
+        :aria-valuenow="indeterminate ? undefined : value"
+        :aria-valuemin="0"
+        :aria-valuemax="max"
+        :aria-label="label"
+      >
+        <circle class="uds-progress__circle-track" cx="50" cy="50" r="40" fill="none" stroke-width="8" />
+        <circle
+          class="uds-progress__circle-fill"
+          cx="50" cy="50" r="40"
+          fill="none" stroke-width="8"
+          :stroke-dasharray="circumference"
+          :stroke-dashoffset="indeterminate ? circumference * 0.75 : strokeDashoffset"
+          stroke-linecap="round"
+        />
+      </svg>
+    </template>
+
+    <template v-else-if="variant === 'stepper'">
+      <div class="uds-progress__steps" role="progressbar" :aria-valuenow="value" :aria-valuemin="0" :aria-valuemax="max" :aria-label="label">
+        <slot />
+      </div>
+    </template>
+
+    <span v-if="showValue && !indeterminate" class="uds-progress__value">{{ percentage }}%</span>
+  </div>
+</template>

package/src/components/UdsRadio.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { computed, useId } from 'vue'
+
+interface Props {
+  variant?: 'standard' | 'card'
+  checked?: boolean
+  disabled?: boolean
+  label?: string
+  name?: string
+  value?: string
+  modelValue?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'standard',
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+
+const radioId = useId()
+
+const classes = computed(() =>
+  [
+    'uds-radio',
+    `uds-radio--${props.variant}`,
+    props.disabled && 'uds-radio--disabled',
+  ]
+    .filter(Boolean)
+    .join(' ')
+)
+
+function handleChange() {
+  if (props.value !== undefined) {
+    emit('update:modelValue', props.value)
+  }
+}
+</script>
+
+<template>
+  <div :class="classes">
+    <input
+      :id="radioId"
+      type="radio"
+      class="uds-radio__input"
+      :checked="modelValue !== undefined ? modelValue === value : checked"
+      :disabled="disabled"
+      :name="name"
+      :value="value"
+      :aria-checked="modelValue === value || checked || undefined"
+      @change="handleChange"
+    />
+    <label v-if="label" :for="radioId" class="uds-radio__label">{{ label }}</label>
+  </div>
+</template>

package/src/components/UdsSelect.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { computed, useId } from 'vue'
+
+interface Option {
+  value: string
+  label: string
+  disabled?: boolean
+}
+
+interface Props {
+  variant?: 'native' | 'custom'
+  size?: 'sm' | 'md' | 'lg'
+  options?: Option[]
+  placeholder?: string
+  required?: boolean
+  disabled?: boolean
+  state?: 'default' | 'focus' | 'error' | 'disabled'
+  label?: string
+  helperText?: string
+  errorText?: string
+  modelValue?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'native',
+  size: 'md',
+  state: 'default',
+  options: () => [],
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+
+const selectId = useId()
+const errorId = useId()
+
+const classes = computed(() =>
+  [
+    'uds-select',
+    `uds-select--${props.variant}`,
+    `uds-select--${props.size}`,
+    props.state === 'error' && 'uds-select--error',
+    props.disabled && 'uds-select--disabled',
+  ]
+    .filter(Boolean)
+    .join(' ')
+)
+
+function handleChange(e: Event) {
+  const target = e.target as HTMLSelectElement
+  emit('update:modelValue', target.value)
+}
+</script>
+
+<template>
+  <div :class="classes">
+    <label v-if="label" :for="selectId" class="uds-select__label">{{ label }}</label>
+    <select
+      :id="selectId"
+      class="uds-select__field"
+      :value="modelValue"
+      :required="required"
+      :disabled="disabled || state === 'disabled'"
+      :aria-invalid="state === 'error' || undefined"
+      :aria-describedby="errorText ? errorId : undefined"
+      @change="handleChange"
+    >
+      <option v-if="placeholder" value="" disabled>{{ placeholder }}</option>
+      <option
+        v-for="opt in options"
+        :key="opt.value"
+        :value="opt.value"
+        :disabled="opt.disabled"
+      >
+        {{ opt.label }}
+      </option>
+    </select>
+    <p v-if="errorText && state === 'error'" :id="errorId" class="uds-select__error" role="alert">
+      {{ errorText }}
+    </p>
+    <p v-if="helperText" class="uds-select__helper">{{ helperText }}</p>
+  </div>
+</template>