aetherx-dt-ui 0.1.3 → 0.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aetherx-dt-ui",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "Lightweight, customizable Vue components for DT projects",
   "type": "module",
   "bin": {

package/src/registry/components/badge/DtBadge.vue

@@ -1,94 +1,94 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-
-export type BadgeVariant = 'default' | 'secondary' | 'outline' | 'destructive' | 'success' | 'warning'
-export type BadgeSize = 'sm' | 'default'
-
-const props = withDefaults(defineProps<{
-  variant?: BadgeVariant
-  size?: BadgeSize
-  dot?: boolean
-}>(), {
-  variant: 'default',
-  size: 'default',
-})
-
-const classes = computed(() => [
-  'dt-badge',
-  `dt-badge--${props.variant}`,
-  `dt-badge--${props.size}`,
-  props.dot && 'dt-badge--dot',
-].filter(Boolean))
-</script>
-
-<template>
-  <span :class="classes" v-bind="$attrs">
-    <span v-if="dot" class="dt-badge__dot" aria-hidden="true" />
-    <slot />
-  </span>
-</template>
-
-<style scoped>
-.dt-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--dt-space-1);
-  font-weight: 500;
-  border-radius: var(--dt-radius-full);
-  white-space: nowrap;
-  transition: background-color var(--dt-transition-base), color var(--dt-transition-base);
-  border: 1px solid transparent;
-  line-height: 1;
-}
-
-/* Sizes */
-.dt-badge--sm {
-  padding: 0.125rem 0.5rem;
-  font-size: var(--dt-font-size-xs);
-}
-.dt-badge--default {
-  padding: 0.25rem 0.625rem;
-  font-size: var(--dt-font-size-sm);
-}
-
-/* Variants */
-.dt-badge--default {
-  background-color: var(--dt-primary);
-  color: var(--dt-primary-foreground);
-}
-
-.dt-badge--secondary {
-  background-color: var(--dt-secondary);
-  color: var(--dt-secondary-foreground);
-}
-
-.dt-badge--outline {
-  border-color: var(--dt-border);
-  background-color: transparent;
-  color: var(--dt-foreground);
-}
-
-.dt-badge--destructive {
-  background-color: var(--dt-destructive);
-  color: var(--dt-destructive-foreground);
-}
-
-.dt-badge--success {
-  background-color: var(--dt-success);
-  color: var(--dt-success-foreground);
-}
-
-.dt-badge--warning {
-  background-color: var(--dt-warning);
-  color: var(--dt-warning-foreground);
-}
-
-/* Dot */
-.dt-badge__dot {
-  width: 0.375rem;
-  height: 0.375rem;
-  border-radius: var(--dt-radius-full);
-  background-color: currentColor;
-  flex-shrink: 0;
-}
-</style>
+<script setup lang="ts">
+import { computed } from 'vue'
+
+export type BadgeVariant = 'default' | 'secondary' | 'outline' | 'destructive' | 'success' | 'warning'
+export type BadgeSize = 'sm' | 'default'
+
+const props = withDefaults(defineProps<{
+  variant?: BadgeVariant
+  size?: BadgeSize
+  dot?: boolean
+}>(), {
+  variant: 'default',
+  size: 'default',
+})
+
+const classes = computed(() => [
+  'dt-badge',
+  `dt-badge--${props.variant}`,
+  `dt-badge--${props.size}`,
+  props.dot && 'dt-badge--dot',
+].filter(Boolean))
+</script>
+
+<template>
+  <span :class="classes" v-bind="$attrs">
+    <span v-if="dot" class="dt-badge__dot" aria-hidden="true" />
+    <slot />
+  </span>
+</template>
+
+<style scoped>
+.dt-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--dt-space-1);
+  font-weight: 500;
+  border-radius: var(--dt-radius-sm);
+  white-space: nowrap;
+  transition: background-color var(--dt-transition-base), color var(--dt-transition-base);
+  border: 1px solid transparent;
+  line-height: 1;
+}
+
+/* Sizes */
+.dt-badge--sm {
+  padding: 0.125rem 0.375rem;
+  font-size: var(--dt-text-xs);
+}
+.dt-badge--default {
+  padding: 0.25rem 0.5rem;
+  font-size: var(--dt-text-xs);
+}
+
+/* Variants */
+.dt-badge--default {
+  background-color: var(--dt-color-accent-light);
+  color: var(--dt-color-accent);
+}
+
+.dt-badge--secondary {
+  background-color: var(--dt-color-background-tertiary);
+  color: var(--dt-color-text-secondary);
+}
+
+.dt-badge--outline {
+  border-color: var(--dt-color-border);
+  background-color: transparent;
+  color: var(--dt-color-text);
+}
+
+.dt-badge--destructive {
+  background-color: var(--dt-color-error-light);
+  color: var(--dt-color-error);
+}
+
+.dt-badge--success {
+  background-color: var(--dt-color-success-light);
+  color: var(--dt-color-success);
+}
+
+.dt-badge--warning {
+  background-color: var(--dt-color-warning-light);
+  color: var(--dt-color-warning);
+}
+
+/* Dot */
+.dt-badge__dot {
+  width: 0.375rem;
+  height: 0.375rem;
+  border-radius: var(--dt-radius-full);
+  background-color: currentColor;
+  flex-shrink: 0;
+}
+</style>

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

@@ -1,176 +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>
+<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-base);
+  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-color-accent);
+  color: var(--dt-color-accent-foreground);
+}
+.dt-button--default:hover {
+  background-color: var(--dt-color-accent-hover);
+}
+
+.dt-button--secondary {
+  background-color: var(--dt-color-secondary);
+  color: var(--dt-color-secondary-foreground);
+}
+.dt-button--secondary:hover {
+  background-color: var(--dt-color-secondary-hover);
+}
+
+.dt-button--outline {
+  border-color: var(--dt-color-border);
+  background-color: transparent;
+  color: var(--dt-color-text);
+}
+.dt-button--outline:hover {
+  background-color: var(--dt-color-surface-hover);
+  border-color: var(--dt-color-border-hover);
+}
+
+.dt-button--ghost {
+  background-color: transparent;
+  color: var(--dt-color-text);
+}
+.dt-button--ghost:hover {
+  background-color: var(--dt-color-surface-hover);
+}
+
+.dt-button--destructive {
+  background-color: var(--dt-color-error);
+  color: var(--dt-color-error-foreground);
+}
+.dt-button--destructive:hover {
+  background-color: var(--dt-color-error-hover);
+}
+
+.dt-button--link {
+  background-color: transparent;
+  color: var(--dt-color-accent);
+  text-decoration: underline;
+  text-underline-offset: 4px;
+}
+.dt-button--link:hover {
+  color: var(--dt-color-accent-hover);
+}
+
+/* Sizes */
+.dt-button--sm {
+  height: 2rem;
+  padding: 0 0.75rem;
+  font-size: var(--dt-text-sm);
+}
+.dt-button--default {
+  height: 2.5rem;
+  padding: 0 1rem;
+  font-size: var(--dt-text-sm);
+}
+.dt-button--lg {
+  height: 2.75rem;
+  padding: 0 1.5rem;
+  font-size: var(--dt-text-base);
+}
+.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-color-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/card/DtCard.vue

@@ -1,46 +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>
+<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-color-background);
+  border-radius: var(--dt-radius-lg);
+  overflow: hidden;
+}
+
+.dt-card--bordered {
+  border: 1px solid var(--dt-color-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

@@ -1,15 +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>
+<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-text-base);
+  color: var(--dt-color-text);
+}
+</style>