@mkatogui/uds-vue 0.2.1

package/README.md

@@ -0,0 +1,102 @@
+# @mkatogui/uds-vue
+
+Vue 3 Composition API components for the Universal Design System. 32 accessible, themeable components built with `<script setup lang="ts">` and `defineProps`.
+
+## Installation
+
+```bash
+npm install @mkatogui/uds-vue
+```
+
+Vue 3.3+ is required as a peer dependency.
+
+## Usage
+
+Import individual components:
+
+```vue
+<script setup>
+import { UdsButton, UdsInput, UdsModal } from '@mkatogui/uds-vue'
+</script>
+
+<template>
+  <UdsButton variant="primary" size="md" @click="handleClick">
+    Get Started
+  </UdsButton>
+</template>
+```
+
+## Theming
+
+Components use UDS design tokens via CSS custom properties and BEM class naming (`uds-{component}--{variant}`). Apply a palette with the `data-theme` attribute on a parent element:
+
+```html
+<div data-theme="ai-futuristic">
+  <UdsButton variant="gradient">Launch</UdsButton>
+</div>
+```
+
+Available palettes: `minimal-saas`, `ai-futuristic`, `gradient-startup`, `corporate`, `apple-minimal`, `illustration`, `dashboard`, `bold-lifestyle`, `minimal-corporate`.
+
+## Components
+
+| Component | File | Variants |
+|-----------|------|----------|
+| Button | `UdsButton.vue` | primary, secondary, ghost, gradient, destructive, icon-only |
+| Navigation Bar | `UdsNavbar.vue` | standard, minimal, dark, transparent |
+| Hero Section | `UdsHero.vue` | centered, product-screenshot, video-bg, gradient-mesh, search-forward, split |
+| Feature Card | `UdsCard.vue` | icon-top, image-top, horizontal, stat-card, dashboard-preview |
+| Pricing Table | `UdsPricing.vue` | 2-column, 3-column, 4-column, toggle |
+| Social Proof Bar | `UdsSocialProof.vue` | logo-strip, stats-counter, testimonial-mini, combined |
+| Testimonial Card | `UdsTestimonial.vue` | quote-card, video, metric, carousel |
+| Footer | `UdsFooter.vue` | simple, multi-column, newsletter, mega-footer |
+| Code Block | `UdsCodeBlock.vue` | syntax-highlighted, terminal, multi-tab |
+| Modal | `UdsModal.vue` | confirmation, task, alert |
+| Form Input | `UdsInput.vue` | text, email, password, number, search, textarea |
+| Select | `UdsSelect.vue` | native, custom |
+| Checkbox | `UdsCheckbox.vue` | standard, indeterminate |
+| Radio | `UdsRadio.vue` | standard, card |
+| Toggle Switch | `UdsToggle.vue` | standard, with-label |
+| Alert | `UdsAlert.vue` | success, warning, error, info |
+| Badge | `UdsBadge.vue` | status, count, tag |
+| Tabs | `UdsTabs.vue` | line, pill, segmented |
+| Accordion | `UdsAccordion.vue` | single, multi, flush |
+| Breadcrumb | `UdsBreadcrumb.vue` | standard, truncated |
+| Tooltip | `UdsTooltip.vue` | simple, rich |
+| Dropdown Menu | `UdsDropdown.vue` | action, context, nav-sub |
+| Avatar | `UdsAvatar.vue` | image, initials, icon, group |
+| Skeleton | `UdsSkeleton.vue` | text, card, avatar, table |
+| Toast | `UdsToast.vue` | success, error, warning, info, neutral |
+| Pagination | `UdsPagination.vue` | numbered, simple, load-more, infinite-scroll |
+| Data Table | `UdsDataTable.vue` | basic, sortable, selectable, expandable |
+| Date Picker | `UdsDatePicker.vue` | single, range, with-time |
+| Command Palette | `UdsCommandPalette.vue` | standard |
+| Progress Indicator | `UdsProgress.vue` | bar, circular, stepper |
+| Side Navigation | `UdsSideNav.vue` | default, collapsed, with-sections |
+| File Upload | `UdsFileUpload.vue` | dropzone, button, avatar-upload |
+
+## Accessibility
+
+All components follow WCAG 2.1 AA guidelines:
+
+- Proper ARIA roles and attributes (`role`, `aria-label`, `aria-expanded`, `aria-selected`, etc.)
+- Keyboard navigation support (arrow keys, Enter, Space, Escape, Tab)
+- Focus management (focus traps in Modal, focus restoration)
+- Semantic HTML elements (`nav`, `button`, `figure`, `blockquote`, `table`)
+- Screen reader announcements via `role="alert"` and `role="status"`
+- Form label associations via `for`/`id` pairs
+
+## v-model Support
+
+Form components support Vue's `v-model` directive:
+
+```vue
+<UdsInput v-model="email" variant="email" label="Email" />
+<UdsSelect v-model="country" :options="countries" label="Country" />
+<UdsCheckbox v-model="agreed" label="I agree to the terms" />
+<UdsToggle v-model="darkMode" label="Dark mode" />
+```
+
+## License
+
+MIT

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@mkatogui/uds-vue",
+  "version": "0.2.1",
+  "description": "Vue 3 components for Universal Design System — 31 accessible, themeable components",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": ["dist/", "src/"],
+  "peerDependencies": {
+    "vue": ">=3.3.0"
+  },
+  "keywords": ["vue", "design-system", "components", "accessibility", "wcag"],
+  "author": "Marcelo Katogui",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mkatogui/universal-design-system.git",
+    "directory": "packages/vue"
+  }
+}

package/src/components/UdsAccordion.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+interface AccordionItem {
+  title: string
+  content?: string
+  defaultExpanded?: boolean
+}
+
+interface Props {
+  variant?: 'single' | 'multi' | 'flush'
+  items?: AccordionItem[]
+  allowMultiple?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'single',
+  items: () => [],
+})
+
+const expandedItems = ref<Set<number>>(
+  new Set(props.items.map((item, i) => (item.defaultExpanded ? i : -1)).filter((i) => i >= 0))
+)
+
+const classes = computed(() =>
+  [
+    'uds-accordion',
+    `uds-accordion--${props.variant}`,
+  ]
+    .filter(Boolean)
+    .join(' ')
+)
+
+function toggle(index: number) {
+  const next = new Set(expandedItems.value)
+  if (next.has(index)) {
+    next.delete(index)
+  } else {
+    if (!props.allowMultiple && props.variant === 'single') {
+      next.clear()
+    }
+    next.add(index)
+  }
+  expandedItems.value = next
+}
+
+function handleKeydown(e: KeyboardEvent, index: number) {
+  if (e.key === 'Enter' || e.key === ' ') {
+    e.preventDefault()
+    toggle(index)
+  }
+}
+</script>
+
+<template>
+  <div :class="classes">
+    <div v-for="(item, i) in items" :key="i" class="uds-accordion__item">
+      <button
+        class="uds-accordion__trigger"
+        :aria-expanded="expandedItems.has(i)"
+        :aria-controls="`accordion-panel-${i}`"
+        @click="toggle(i)"
+        @keydown="handleKeydown($event, i)"
+      >
+        <span class="uds-accordion__title">{{ item.title }}</span>
+        <span class="uds-accordion__icon" aria-hidden="true" />
+      </button>
+      <div
+        :id="`accordion-panel-${i}`"
+        class="uds-accordion__panel"
+        role="region"
+        :hidden="!expandedItems.has(i)"
+      >
+        <div class="uds-accordion__content">
+          <slot :name="`item-${i}`">
+            {{ item.content }}
+          </slot>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/src/components/UdsAlert.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+interface Props {
+  variant?: 'success' | 'warning' | 'error' | 'info'
+  size?: 'sm' | 'md' | 'lg'
+  title?: string
+  message?: string
+  dismissible?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'info',
+  size: 'md',
+})
+
+const emit = defineEmits<{
+  dismiss: []
+}>()
+
+const dismissed = ref(false)
+
+const classes = computed(() =>
+  [
+    'uds-alert',
+    `uds-alert--${props.variant}`,
+    `uds-alert--${props.size}`,
+  ]
+    .filter(Boolean)
+    .join(' ')
+)
+
+const alertRole = computed(() =>
+  props.variant === 'error' || props.variant === 'warning' ? 'alert' : 'status'
+)
+
+function handleDismiss() {
+  dismissed.value = true
+  emit('dismiss')
+}
+</script>
+
+<template>
+  <div v-if="!dismissed" :class="classes" :role="alertRole">
+    <div class="uds-alert__content">
+      <strong v-if="title" class="uds-alert__title">{{ title }}</strong>
+      <p v-if="message" class="uds-alert__message">{{ message }}</p>
+      <slot />
+    </div>
+    <button
+      v-if="dismissible"
+      class="uds-alert__dismiss"
+      aria-label="Dismiss alert"
+      @click="handleDismiss"
+    >
+      <svg width="16" height="16" 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>
+</template>

package/src/components/UdsAvatar.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+interface Props {
+  variant?: 'image' | 'initials' | 'icon' | 'group'
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+  src?: string
+  alt?: string
+  initials?: string
+  status?: 'online' | 'offline' | 'busy'
+  fallback?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'image',
+  size: 'md',
+})
+
+const imgError = ref(false)
+
+const classes = computed(() =>
+  [
+    'uds-avatar',
+    `uds-avatar--${props.variant}`,
+    `uds-avatar--${props.size}`,
+    props.status && `uds-avatar--${props.status}`,
+  ]
+    .filter(Boolean)
+    .join(' ')
+)
+
+function handleError() {
+  imgError.value = true
+}
+</script>
+
+<template>
+  <div :class="classes">
+    <img
+      v-if="variant === 'image' && src && !imgError"
+      :src="src"
+      :alt="alt || ''"
+      class="uds-avatar__image"
+      @error="handleError"
+    />
+    <span v-else-if="variant === 'initials' || imgError" class="uds-avatar__initials" :aria-label="alt">
+      {{ initials || fallback || '?' }}
+    </span>
+    <span v-else class="uds-avatar__icon" :aria-label="alt">
+      <slot />
+    </span>
+    <span
+      v-if="status"
+      class="uds-avatar__status"
+      :class="`uds-avatar__status--${status}`"
+      :aria-label="status"
+    />
+  </div>
+</template>

package/src/components/UdsBadge.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  variant?: 'status' | 'count' | 'tag'
+  size?: 'sm' | 'md'
+  label?: string
+  color?: string
+  removable?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'status',
+  size: 'md',
+})
+
+const emit = defineEmits<{
+  remove: []
+}>()
+
+const classes = computed(() =>
+  [
+    'uds-badge',
+    `uds-badge--${props.variant}`,
+    `uds-badge--${props.size}`,
+    props.color && `uds-badge--${props.color}`,
+    props.removable && 'uds-badge--removable',
+  ]
+    .filter(Boolean)
+    .join(' ')
+)
+</script>
+
+<template>
+  <span :class="classes" :aria-label="label">
+    <slot>{{ label }}</slot>
+    <button
+      v-if="removable"
+      class="uds-badge__remove"
+      :aria-label="`Remove ${label || ''}`"
+      @click="emit('remove')"
+    >
+      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+        <path d="M18 6L6 18M6 6l12 12" />
+      </svg>
+    </button>
+  </span>
+</template>

package/src/components/UdsBreadcrumb.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface BreadcrumbItem {
+  label: string
+  href?: string
+}
+
+interface Props {
+  variant?: 'standard' | 'truncated'
+  items?: BreadcrumbItem[]
+  separator?: string
+  maxItems?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'standard',
+  separator: '/',
+  items: () => [],
+})
+
+const classes = computed(() =>
+  [
+    'uds-breadcrumb',
+    `uds-breadcrumb--${props.variant}`,
+  ]
+    .filter(Boolean)
+    .join(' ')
+)
+
+const displayItems = computed(() => {
+  if (props.variant === 'truncated' && props.maxItems && props.items.length > props.maxItems) {
+    const first = props.items.slice(0, 1)
+    const last = props.items.slice(-(props.maxItems - 1))
+    return [...first, { label: '...', href: undefined } as BreadcrumbItem, ...last]
+  }
+  return props.items
+})
+</script>
+
+<template>
+  <nav :class="classes" aria-label="Breadcrumb">
+    <ol class="uds-breadcrumb__list">
+      <li
+        v-for="(item, i) in displayItems"
+        :key="i"
+        class="uds-breadcrumb__item"
+      >
+        <a
+          v-if="item.href && i < displayItems.length - 1"
+          :href="item.href"
+          class="uds-breadcrumb__link"
+        >
+          {{ item.label }}
+        </a>
+        <span
+          v-else
+          class="uds-breadcrumb__current"
+          :aria-current="i === displayItems.length - 1 ? 'page' : undefined"
+        >
+          {{ item.label }}
+        </span>
+        <span
+          v-if="i < displayItems.length - 1"
+          class="uds-breadcrumb__separator"
+          aria-hidden="true"
+        >
+          {{ separator }}
+        </span>
+      </li>
+    </ol>
+  </nav>
+</template>

package/src/components/UdsButton.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  variant?: 'primary' | 'secondary' | 'ghost' | 'gradient' | 'destructive' | 'icon-only'
+  size?: 'sm' | 'md' | 'lg' | 'xl'
+  loading?: boolean
+  fullWidth?: boolean
+  disabled?: boolean
+  iconLeft?: boolean
+  iconRight?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'primary',
+  size: 'md',
+})
+
+const classes = computed(() =>
+  [
+    'uds-btn',
+    `uds-btn--${props.variant}`,
+    `uds-btn--${props.size}`,
+    props.fullWidth && 'uds-btn--full-width',
+    props.loading && 'uds-btn--loading',
+  ]
+    .filter(Boolean)
+    .join(' ')
+)
+</script>
+
+<template>
+  <button
+    :class="classes"
+    :disabled="disabled || loading"
+    :aria-busy="loading || undefined"
+    :aria-disabled="disabled || undefined"
+    role="button"
+  >
+    <span v-if="loading" class="uds-btn__spinner" aria-hidden="true" />
+    <slot />
+  </button>
+</template>

package/src/components/UdsCard.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  variant?: 'icon-top' | 'image-top' | 'horizontal' | 'stat-card' | 'dashboard-preview'
+  size?: 'sm' | 'md' | 'lg'
+  title?: string
+  description?: string
+  link?: string
+  image?: string
+  imageAlt?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'icon-top',
+  size: 'md',
+})
+
+const classes = computed(() =>
+  [
+    'uds-card',
+    `uds-card--${props.variant}`,
+    `uds-card--${props.size}`,
+  ]
+    .filter(Boolean)
+    .join(' ')
+)
+</script>
+
+<template>
+  <div :class="classes">
+    <div v-if="image" class="uds-card__image">
+      <img :src="image" :alt="imageAlt || ''" />
+    </div>
+    <div class="uds-card__icon">
+      <slot name="icon" />
+    </div>
+    <div class="uds-card__body">
+      <h3 v-if="title" class="uds-card__title">{{ title }}</h3>
+      <p v-if="description" class="uds-card__description">{{ description }}</p>
+      <slot />
+    </div>
+    <div v-if="link" class="uds-card__link">
+      <a :href="link">
+        <slot name="link-text">Learn more</slot>
+      </a>
+    </div>
+  </div>
+</template>

package/src/components/UdsCheckbox.vue

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

package/src/components/UdsCodeBlock.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+interface Tab {
+  label: string
+  language: string
+  code: string
+}
+
+interface Props {
+  variant?: 'syntax-highlighted' | 'terminal' | 'multi-tab'
+  size?: 'sm' | 'md' | 'lg'
+  language?: string
+  code?: string
+  showLineNumbers?: boolean
+  showCopy?: boolean
+  tabs?: Tab[]
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'syntax-highlighted',
+  size: 'md',
+  showCopy: true,
+  tabs: () => [],
+})
+
+const copied = ref(false)
+const activeTab = ref(0)
+
+const classes = computed(() =>
+  [
+    'uds-code-block',
+    `uds-code-block--${props.variant}`,
+    `uds-code-block--${props.size}`,
+    props.showLineNumbers && 'uds-code-block--line-numbers',
+    copied.value && 'uds-code-block--copied',
+  ]
+    .filter(Boolean)
+    .join(' ')
+)
+
+const displayCode = computed(() => {
+  if (props.variant === 'multi-tab' && props.tabs.length) {
+    return props.tabs[activeTab.value]?.code || ''
+  }
+  return props.code || ''
+})
+
+async function copyToClipboard() {
+  try {
+    await navigator.clipboard.writeText(displayCode.value)
+    copied.value = true
+    setTimeout(() => { copied.value = false }, 2000)
+  } catch {
+    // Clipboard API not available
+  }
+}
+</script>
+
+<template>
+  <div :class="classes">
+    <div v-if="variant === 'multi-tab' && tabs.length" class="uds-code-block__tabs" role="tablist">
+      <button
+        v-for="(tab, i) in tabs"
+        :key="i"
+        role="tab"
+        :aria-selected="activeTab === i"
+        class="uds-code-block__tab"
+        @click="activeTab = i"
+      >
+        {{ tab.label }}
+      </button>
+    </div>
+    <div class="uds-code-block__container">
+      <button
+        v-if="showCopy"
+        class="uds-code-block__copy"
+        aria-label="Copy code to clipboard"
+        @click="copyToClipboard"
+      >
+        {{ copied ? 'Copied' : 'Copy' }}
+      </button>
+      <pre><code :class="language ? `language-${language}` : undefined">{{ displayCode }}</code></pre>
+    </div>
+  </div>
+</template>