aetherx-dt-ui 0.1.0

package/src/registry/components/button/DtButton.vue

@@ -0,0 +1,176 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+export type ButtonVariant = 'default' | 'secondary' | 'outline' | 'ghost' | 'destructive' | 'link'
+export type ButtonSize = 'sm' | 'default' | 'lg' | 'icon'
+
+const props = withDefaults(defineProps<{
+  variant?: ButtonVariant
+  size?: ButtonSize
+  disabled?: boolean
+  loading?: boolean
+}>(), {
+  variant: 'default',
+  size: 'default',
+})
+
+const classes = computed(() => [
+  'dt-button',
+  `dt-button--${props.variant}`,
+  `dt-button--${props.size}`,
+  props.disabled && 'dt-button--disabled',
+  props.loading && 'dt-button--loading',
+].filter(Boolean))
+</script>
+
+<template>
+  <button
+    :class="classes"
+    :disabled="disabled || loading"
+    v-bind="$attrs"
+  >
+    <span v-if="loading" class="dt-button__spinner" aria-hidden="true" />
+    <span v-if="$slots['icon-left']" class="dt-button__icon dt-button__icon--left">
+      <slot name="icon-left" />
+    </span>
+    <slot />
+    <span v-if="$slots['icon-right']" class="dt-button__icon dt-button__icon--right">
+      <slot name="icon-right" />
+    </span>
+  </button>
+</template>
+
+<style scoped>
+.dt-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--dt-space-2);
+  font-weight: 500;
+  border-radius: var(--dt-radius-md);
+  transition: background-color var(--dt-transition-base),
+    border-color var(--dt-transition-base),
+    color var(--dt-transition-base),
+    box-shadow var(--dt-transition-base);
+  cursor: pointer;
+  border: 1px solid transparent;
+  font-family: inherit;
+  line-height: 1;
+  white-space: nowrap;
+  user-select: none;
+}
+
+/* Variants */
+.dt-button--default {
+  background-color: var(--dt-primary);
+  color: var(--dt-primary-foreground);
+}
+.dt-button--default:hover {
+  background-color: var(--dt-primary-hover);
+}
+
+.dt-button--secondary {
+  background-color: var(--dt-secondary);
+  color: var(--dt-secondary-foreground);
+}
+.dt-button--secondary:hover {
+  background-color: var(--dt-secondary-hover);
+}
+
+.dt-button--outline {
+  border-color: var(--dt-border);
+  background-color: transparent;
+  color: var(--dt-foreground);
+}
+.dt-button--outline:hover {
+  background-color: var(--dt-accent);
+  border-color: var(--dt-border-hover);
+}
+
+.dt-button--ghost {
+  background-color: transparent;
+  color: var(--dt-foreground);
+}
+.dt-button--ghost:hover {
+  background-color: var(--dt-accent);
+}
+
+.dt-button--destructive {
+  background-color: var(--dt-destructive);
+  color: var(--dt-destructive-foreground);
+}
+.dt-button--destructive:hover {
+  background-color: var(--dt-destructive-hover);
+}
+
+.dt-button--link {
+  background-color: transparent;
+  color: var(--dt-primary);
+  text-decoration: underline;
+  text-underline-offset: 4px;
+}
+.dt-button--link:hover {
+  color: var(--dt-primary-hover);
+}
+
+/* Sizes */
+.dt-button--sm {
+  height: 2rem;
+  padding: 0 0.75rem;
+  font-size: var(--dt-font-size-sm);
+}
+.dt-button--default {
+  height: 2.5rem;
+  padding: 0 1rem;
+  font-size: var(--dt-font-size-base);
+}
+.dt-button--lg {
+  height: 2.75rem;
+  padding: 0 1.5rem;
+  font-size: var(--dt-font-size-lg);
+}
+.dt-button--icon {
+  height: 2.5rem;
+  width: 2.5rem;
+  padding: 0;
+}
+
+/* States */
+.dt-button--disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.dt-button--loading {
+  position: relative;
+  pointer-events: none;
+}
+
+.dt-button:focus-visible {
+  outline: 2px solid var(--dt-ring);
+  outline-offset: 2px;
+}
+
+/* Spinner */
+.dt-button__spinner {
+  width: 1em;
+  height: 1em;
+  border: 2px solid currentColor;
+  border-right-color: transparent;
+  border-radius: var(--dt-radius-full);
+  animation: dt-spin 0.6s linear infinite;
+}
+
+.dt-button__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+@keyframes dt-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>

package/src/registry/components/button/index.ts

@@ -0,0 +1,2 @@
+export { default as DtButton } from './DtButton.vue'
+export type { ButtonVariant, ButtonSize } from './DtButton.vue'

package/src/registry/components/card/DtCard.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = withDefaults(defineProps<{
+  bordered?: boolean
+  shadow?: boolean
+  padding?: boolean
+}>(), {
+  bordered: true,
+  shadow: false,
+  padding: true,
+})
+
+const classes = computed(() => [
+  'dt-card',
+  props.bordered && 'dt-card--bordered',
+  props.shadow && 'dt-card--shadow',
+  props.padding && 'dt-card--padding',
+].filter(Boolean))
+</script>
+
+<template>
+  <div :class="classes" v-bind="$attrs">
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.dt-card {
+  background-color: var(--dt-background);
+  border-radius: var(--dt-radius-lg);
+  overflow: hidden;
+}
+
+.dt-card--bordered {
+  border: 1px solid var(--dt-border);
+}
+
+.dt-card--shadow {
+  box-shadow: var(--dt-shadow-md);
+}
+
+.dt-card--padding {
+  padding: var(--dt-space-6);
+}
+</style>

package/src/registry/components/card/DtCardContent.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div class="dt-card-content" v-bind="$attrs">
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.dt-card-content {
+  font-size: var(--dt-font-size-base);
+  color: var(--dt-foreground);
+}
+</style>

package/src/registry/components/card/DtCardFooter.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div class="dt-card-footer" v-bind="$attrs">
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.dt-card-footer {
+  display: flex;
+  align-items: center;
+  gap: var(--dt-space-2);
+  padding-top: var(--dt-space-4);
+}
+</style>

package/src/registry/components/card/DtCardHeader.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div class="dt-card-header" v-bind="$attrs">
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.dt-card-header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--dt-space-1);
+  padding-bottom: var(--dt-space-4);
+}
+
+.dt-card-header :deep(h1),
+.dt-card-header :deep(h2),
+.dt-card-header :deep(h3),
+.dt-card-header :deep(h4) {
+  font-weight: 600;
+  line-height: 1.25;
+  color: var(--dt-foreground);
+}
+
+.dt-card-header :deep(p) {
+  font-size: var(--dt-font-size-sm);
+  color: var(--dt-muted-foreground);
+}
+</style>

package/src/registry/components/card/index.ts

@@ -0,0 +1,4 @@
+export { default as DtCard } from './DtCard.vue'
+export { default as DtCardHeader } from './DtCardHeader.vue'
+export { default as DtCardContent } from './DtCardContent.vue'
+export { default as DtCardFooter } from './DtCardFooter.vue'

package/src/registry/components/dialog/DtDialog.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { provide, ref, computed, watch } from 'vue'
+
+const props = withDefaults(defineProps<{
+  modelValue?: boolean
+}>(), {
+  modelValue: undefined,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+}>()
+
+const internalOpen = ref(false)
+
+const isOpen = computed({
+  get: () => props.modelValue !== undefined ? props.modelValue : internalOpen.value,
+  set: (val: boolean) => {
+    internalOpen.value = val
+    emit('update:modelValue', val)
+  },
+})
+
+function open() {
+  isOpen.value = true
+}
+
+function close() {
+  isOpen.value = false
+}
+
+function toggle() {
+  isOpen.value = !isOpen.value
+}
+
+provide('dt-dialog', { isOpen, open, close, toggle })
+</script>
+
+<template>
+  <slot :open="isOpen" :toggle="toggle" :close="close" />
+</template>

package/src/registry/components/dialog/DtDialogContent.vue

@@ -0,0 +1,140 @@
+<script setup lang="ts">
+import { inject, ref, watch, onMounted, onBeforeUnmount, nextTick, type Ref, type ComputedRef } from 'vue'
+
+const dialog = inject<{
+  isOpen: ComputedRef<boolean>
+  close: () => void
+}>('dt-dialog')!
+
+const contentRef = ref<HTMLElement | null>(null)
+const visible = ref(false)
+const animating = ref(false)
+
+// Focus trap
+const previousActiveElement = ref<HTMLElement | null>(null)
+
+function focusTrap(event: KeyboardEvent) {
+  if (event.key !== 'Tab' || !contentRef.value) return
+
+  const focusableElements = contentRef.value.querySelectorAll<HTMLElement>(
+    'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])'
+  )
+
+  if (focusableElements.length === 0) return
+
+  const first = focusableElements[0]
+  const last = focusableElements[focusableElements.length - 1]
+
+  if (event.shiftKey && document.activeElement === first) {
+    event.preventDefault()
+    last.focus()
+  } else if (!event.shiftKey && document.activeElement === last) {
+    event.preventDefault()
+    first.focus()
+  }
+}
+
+function onKeydown(event: KeyboardEvent) {
+  if (event.key === 'Escape') {
+    dialog.close()
+  }
+  focusTrap(event)
+}
+
+function onOverlayClick(event: MouseEvent) {
+  if (event.target === event.currentTarget) {
+    dialog.close()
+  }
+}
+
+watch(() => dialog.isOpen.value, async (open) => {
+  if (open) {
+    previousActiveElement.value = document.activeElement as HTMLElement
+    visible.value = true
+    document.body.style.overflow = 'hidden'
+    await nextTick()
+    animating.value = true
+    // Focus the first focusable element
+    const firstFocusable = contentRef.value?.querySelector<HTMLElement>(
+      'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])'
+    )
+    firstFocusable?.focus()
+  } else {
+    animating.value = false
+    document.body.style.overflow = ''
+    // Wait for exit animation
+    setTimeout(() => {
+      visible.value = false
+      previousActiveElement.value?.focus()
+    }, 200)
+  }
+})
+
+onBeforeUnmount(() => {
+  document.body.style.overflow = ''
+})
+</script>
+
+<template>
+  <Teleport to="body">
+    <div
+      v-if="visible"
+      class="dt-dialog-overlay"
+      :class="{ 'dt-dialog-overlay--open': animating }"
+      @click="onOverlayClick"
+      @keydown="onKeydown"
+    >
+      <div
+        ref="contentRef"
+        class="dt-dialog-content"
+        :class="{ 'dt-dialog-content--open': animating }"
+        role="dialog"
+        aria-modal="true"
+        v-bind="$attrs"
+      >
+        <slot />
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped>
+.dt-dialog-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: var(--dt-z-overlay);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--dt-space-4);
+  background-color: rgb(0 0 0 / 0.4);
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+
+.dt-dialog-overlay--open {
+  opacity: 1;
+}
+
+.dt-dialog-content {
+  position: relative;
+  z-index: var(--dt-z-modal);
+  width: 100%;
+  max-width: 28rem;
+  max-height: calc(100vh - 2rem);
+  overflow-y: auto;
+  background-color: var(--dt-background);
+  border: 1px solid var(--dt-border);
+  border-radius: var(--dt-radius-lg);
+  box-shadow: var(--dt-shadow-lg);
+  padding: var(--dt-space-6);
+  transform: scale(0.95) translateY(0.5rem);
+  opacity: 0;
+  transition: transform 0.2s ease, opacity 0.2s ease;
+}
+
+.dt-dialog-content--open {
+  transform: scale(1) translateY(0);
+  opacity: 1;
+}
+</style>

package/src/registry/components/dialog/DtDialogFooter.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div class="dt-dialog-footer" v-bind="$attrs">
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.dt-dialog-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--dt-space-2);
+  padding-top: var(--dt-space-4);
+}
+</style>

package/src/registry/components/dialog/DtDialogHeader.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div class="dt-dialog-header" v-bind="$attrs">
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.dt-dialog-header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--dt-space-1);
+  padding-bottom: var(--dt-space-4);
+}
+
+.dt-dialog-header :deep(h1),
+.dt-dialog-header :deep(h2),
+.dt-dialog-header :deep(h3),
+.dt-dialog-header :deep(h4) {
+  font-size: var(--dt-font-size-lg);
+  font-weight: 600;
+  line-height: 1.25;
+  color: var(--dt-foreground);
+}
+
+.dt-dialog-header :deep(p) {
+  font-size: var(--dt-font-size-sm);
+  color: var(--dt-muted-foreground);
+}
+</style>

package/src/registry/components/dialog/DtDialogTrigger.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { inject } from 'vue'
+
+const dialog = inject<{
+  toggle: () => void
+}>('dt-dialog')!
+</script>
+
+<template>
+  <span class="dt-dialog-trigger" @click="dialog.toggle()" v-bind="$attrs">
+    <slot />
+  </span>
+</template>
+
+<style scoped>
+.dt-dialog-trigger {
+  display: inline-flex;
+  cursor: pointer;
+}
+</style>

package/src/registry/components/dialog/index.ts

@@ -0,0 +1,5 @@
+export { default as DtDialog } from './DtDialog.vue'
+export { default as DtDialogTrigger } from './DtDialogTrigger.vue'
+export { default as DtDialogContent } from './DtDialogContent.vue'
+export { default as DtDialogHeader } from './DtDialogHeader.vue'
+export { default as DtDialogFooter } from './DtDialogFooter.vue'

package/src/registry/components/input/DtInput.vue

@@ -0,0 +1,140 @@
+<script setup lang="ts">
+import { computed, useAttrs } from 'vue'
+
+export type InputType = 'text' | 'email' | 'password' | 'number' | 'search' | 'tel' | 'url'
+
+const props = withDefaults(defineProps<{
+  modelValue?: string | number
+  type?: InputType
+  placeholder?: string
+  disabled?: boolean
+  error?: string
+  hint?: string
+  id?: string
+}>(), {
+  type: 'text',
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string | number]
+}>()
+
+const attrs = useAttrs()
+
+const inputId = computed(() => props.id || `dt-input-${Math.random().toString(36).slice(2, 9)}`)
+
+const wrapperClasses = computed(() => [
+  'dt-input-wrapper',
+  props.error && 'dt-input-wrapper--error',
+  props.disabled && 'dt-input-wrapper--disabled',
+].filter(Boolean))
+
+const inputClasses = computed(() => [
+  'dt-input',
+  props.error && 'dt-input--error',
+].filter(Boolean))
+
+function onInput(event: Event) {
+  const target = event.target as HTMLInputElement
+  const value = props.type === 'number' ? Number(target.value) : target.value
+  emit('update:modelValue', value)
+}
+</script>
+
+<template>
+  <div :class="wrapperClasses">
+    <label v-if="$slots.label" :for="inputId" class="dt-input__label">
+      <slot name="label" />
+    </label>
+    <input
+      :id="inputId"
+      :class="inputClasses"
+      :type="type"
+      :value="modelValue"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :aria-invalid="!!error"
+      :aria-describedby="error ? `${inputId}-error` : hint ? `${inputId}-hint` : undefined"
+      v-bind="attrs"
+      @input="onInput"
+    />
+    <p v-if="error" :id="`${inputId}-error`" class="dt-input__error" role="alert">
+      {{ error }}
+    </p>
+    <p v-else-if="hint" :id="`${inputId}-hint`" class="dt-input__hint">
+      {{ hint }}
+    </p>
+  </div>
+</template>
+
+<style scoped>
+.dt-input-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--dt-space-1);
+  width: 100%;
+}
+
+.dt-input__label {
+  font-size: var(--dt-font-size-sm);
+  font-weight: 500;
+  color: var(--dt-foreground);
+}
+
+.dt-input {
+  height: 2.5rem;
+  width: 100%;
+  padding: 0 0.75rem;
+  font-size: var(--dt-font-size-base);
+  font-family: inherit;
+  color: var(--dt-foreground);
+  background-color: var(--dt-background);
+  border: 1px solid var(--dt-border);
+  border-radius: var(--dt-radius-md);
+  transition: border-color var(--dt-transition-base),
+    box-shadow var(--dt-transition-base);
+  outline: none;
+}
+
+.dt-input::placeholder {
+  color: var(--dt-muted-foreground);
+}
+
+.dt-input:hover:not(:disabled) {
+  border-color: var(--dt-border-hover);
+}
+
+.dt-input:focus {
+  border-color: var(--dt-ring);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--dt-ring) 25%, transparent);
+}
+
+.dt-input--error {
+  border-color: var(--dt-destructive);
+}
+.dt-input--error:focus {
+  border-color: var(--dt-destructive);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--dt-destructive) 25%, transparent);
+}
+
+.dt-input:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  background-color: var(--dt-muted);
+}
+
+.dt-input__error {
+  font-size: var(--dt-font-size-xs);
+  color: var(--dt-destructive);
+}
+
+.dt-input__hint {
+  font-size: var(--dt-font-size-xs);
+  color: var(--dt-muted-foreground);
+}
+
+.dt-input-wrapper--disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+</style>

package/src/registry/components/input/index.ts

@@ -0,0 +1,2 @@
+export { default as DtInput } from './DtInput.vue'
+export type { InputType } from './DtInput.vue'