@bl33dz/fa814698dcde12f86a37ac31dd3aedf9 1.0.6 → 1.0.7

package/src/ui/input.vue

@@ -1,98 +1,98 @@
-<template>
-  <div class="space-y-2">
-    <Label v-if="label" :for="id || 'input'">
-      {{ label }}
-    </Label>
-    <div class="relative">
-      <span v-if="$slots.iconLeft" class="absolute left-1 top-1/2 transform -translate-y-1/2 pointer-events-none">
-        <slot name="iconLeft" />
-      </span>
-      <span v-if="$slots.iconRight || validationState === 'success' || validationState === 'error'" :class="[
-        'absolute right-3 top-1/2 transform -translate-y-1/2 pointer-events-none',
-        validationState === 'error' ? 'text-red-500' : '',
-        validationState === 'success' ? 'text-green-500' : ''
-      ]">
-        <template v-if="validationState === 'success'">
-          <CheckCircle class="text-green-500 h-4 w-4" />
-        </template>
-        <template v-else-if="validationState === 'error'">
-          <AlertCircle class="text-red-500 h-4 w-4" />
-        </template>
-        <template v-else>
-          <slot name="iconRight" />
-        </template>
-      </span>
-      <input
-        :id="id || 'input'"
-        data-slot="input"
-        :class="cn(
-          'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground border-input flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base bg-input-background transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
-          $slots.iconLeft ? 'pl-10' : '',
-          ($slots.iconRight || validationState === 'success' || validationState === 'error') ? 'pr-10' : '',
-          validationState === 'error'
-            ? 'border-red-500 focus-visible:border-red-500 focus-visible:ring-red-500'
-            : validationState === 'success'
-            ? 'border-green-500 focus-visible:border-green-500 focus-visible:ring-green-500'
-            : 'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
-          'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
-          $attrs['custom-class'] || ''
-        )"
-        v-bind="$attrs"
-        :type="type"
-        :disabled="disabled"
-        :readonly="readonly"
-        :value="modelValue"
-        @input="$emit('update:modelValue', $event.target.value)"
-      />
-    </div>
-    <p v-if="validationMessage" :class="['text-sm', validationState === 'error' ? 'text-red-600' : '', validationState === 'success' ? 'text-green-600' : '']">
-      {{ validationMessage }}
-    </p>
-  </div>
-</template>
-
-<script setup>
-import Label from './label.vue';
-import { defineProps, useAttrs, defineEmits } from 'vue';
-import { CheckCircle, AlertCircle } from 'lucide-vue-next';
-import { cn as _cn } from './cn';
-
-const props = defineProps({
-  modelValue: {
-    type: [String, Number],
-    default: '',
-  },
-  type: {
-    type: String,
-    default: 'text',
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  readonly: {
-    type: Boolean,
-    default: false,
-  },
-  label: {
-    type: String,
-    default: '',
-  },
-  id: {
-    type: String,
-    default: '',
-  },
-  validationState: {
-    type: String,
-    default: '',
-    validator: v => ['success', 'error', ''].includes(v),
-  },
-  validationMessage: {
-    type: String,
-    default: '',
-  },
-});
-
-const cn = _cn;
-const emit = defineEmits(['update:modelValue']);
-</script>
+<template>
+  <div class="space-y-2">
+    <Label v-if="label" :for="id || 'input'">
+      {{ label }}
+    </Label>
+    <div class="relative">
+      <span v-if="$slots.iconLeft" class="absolute left-1 top-1/2 transform -translate-y-1/2 pointer-events-none">
+        <slot name="iconLeft" />
+      </span>
+      <span v-if="$slots.iconRight || validationState === 'success' || validationState === 'error'" :class="[
+        'absolute right-3 top-1/2 transform -translate-y-1/2 pointer-events-none',
+        validationState === 'error' ? 'text-red-500' : '',
+        validationState === 'success' ? 'text-green-500' : ''
+      ]">
+        <template v-if="validationState === 'success'">
+          <CheckCircle class="text-green-500 h-4 w-4" />
+        </template>
+        <template v-else-if="validationState === 'error'">
+          <AlertCircle class="text-red-500 h-4 w-4" />
+        </template>
+        <template v-else>
+          <slot name="iconRight" />
+        </template>
+      </span>
+      <input
+        :id="id || 'input'"
+        data-slot="input"
+        :class="cn(
+          'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground border-input flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base bg-input-background transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+          $slots.iconLeft ? 'pl-10' : '',
+          ($slots.iconRight || validationState === 'success' || validationState === 'error') ? 'pr-10' : '',
+          validationState === 'error'
+            ? 'border-red-500 focus-visible:border-red-500 focus-visible:ring-red-500'
+            : validationState === 'success'
+            ? 'border-green-500 focus-visible:border-green-500 focus-visible:ring-green-500'
+            : 'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+          'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+          $attrs['custom-class'] || ''
+        )"
+        v-bind="$attrs"
+        :type="type"
+        :disabled="disabled"
+        :readonly="readonly"
+        :value="modelValue"
+        @input="$emit('update:modelValue', $event.target.value)"
+      />
+    </div>
+    <p v-if="validationMessage" :class="['text-sm', validationState === 'error' ? 'text-red-600' : '', validationState === 'success' ? 'text-green-600' : '']">
+      {{ validationMessage }}
+    </p>
+  </div>
+</template>
+
+<script setup>
+import Label from './label.vue';
+import { defineProps, useAttrs, defineEmits } from 'vue';
+import { CheckCircle, AlertCircle } from 'lucide-vue-next';
+import { cn as _cn } from './cn';
+
+const props = defineProps({
+  modelValue: {
+    type: [String, Number],
+    default: '',
+  },
+  type: {
+    type: String,
+    default: 'text',
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+  label: {
+    type: String,
+    default: '',
+  },
+  id: {
+    type: String,
+    default: '',
+  },
+  validationState: {
+    type: String,
+    default: '',
+    validator: v => ['success', 'error', ''].includes(v),
+  },
+  validationMessage: {
+    type: String,
+    default: '',
+  },
+});
+
+const cn = _cn;
+const emit = defineEmits(['update:modelValue']);
+</script>

package/src/ui/label.vue

@@ -1,19 +1,19 @@
-
-<template>
-  <label
-    data-slot="label"
-    v-bind="$attrs"
-    :class="cn(
-      'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
-      $attrs.class
-    )"
-  >
-    <slot />
-  </label>
-</template>
-
-<script setup>
-import { useAttrs } from 'vue';
-import { cn } from './utils';
-const $attrs = useAttrs();
-</script>
+
+<template>
+  <label
+    data-slot="label"
+    v-bind="$attrs"
+    :class="cn(
+      'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
+      $attrs.class
+    )"
+  >
+    <slot />
+  </label>
+</template>
+
+<script setup>
+import { useAttrs } from 'vue';
+import { cn } from './utils';
+const $attrs = useAttrs();
+</script>

package/src/ui/pagination.vue

@@ -1,41 +1,41 @@
-<template>
-  <nav class="flex items-center justify-center gap-2" role="navigation" aria-label="Pagination">
-    <button
-      class="h-8 w-8 flex items-center justify-center rounded border border-input bg-background px-0 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground disabled:opacity-50"
-      :disabled="page <= 1"
-      @click="$emit('update:page', page - 1)"
-      aria-label="Previous page"
-    >
-      &lt;
-    </button>
-    <span class="px-2 text-sm">{{ page }} / {{ totalPages }}</span>
-    <button
-      class="h-8 w-8 flex items-center justify-center rounded border border-input bg-background px-0 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground disabled:opacity-50"
-      :disabled="page >= totalPages"
-      @click="$emit('update:page', page + 1)"
-      aria-label="Next page"
-    >
-      &gt;
-    </button>
-  </nav>
-</template>
-
-<script setup>
-import { defineProps, defineEmits, computed } from 'vue';
-const props = defineProps({
-  page: {
-    type: Number,
-    default: 1,
-  },
-  total: {
-    type: Number,
-    required: true,
-  },
-  perPage: {
-    type: Number,
-    default: 10,
-  },
-});
-const emit = defineEmits(['update:page']);
-const totalPages = computed(() => Math.max(1, Math.ceil(props.total / props.perPage)));
-</script>
+<template>
+  <nav class="flex items-center justify-center gap-2" role="navigation" aria-label="Pagination">
+    <button
+      class="h-8 w-8 flex items-center justify-center rounded border border-input bg-background px-0 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground disabled:opacity-50"
+      :disabled="page <= 1"
+      @click="$emit('update:page', page - 1)"
+      aria-label="Previous page"
+    >
+      &lt;
+    </button>
+    <span class="px-2 text-sm">{{ page }} / {{ totalPages }}</span>
+    <button
+      class="h-8 w-8 flex items-center justify-center rounded border border-input bg-background px-0 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground disabled:opacity-50"
+      :disabled="page >= totalPages"
+      @click="$emit('update:page', page + 1)"
+      aria-label="Next page"
+    >
+      &gt;
+    </button>
+  </nav>
+</template>
+
+<script setup>
+import { defineProps, defineEmits, computed } from 'vue';
+const props = defineProps({
+  page: {
+    type: Number,
+    default: 1,
+  },
+  total: {
+    type: Number,
+    required: true,
+  },
+  perPage: {
+    type: Number,
+    default: 10,
+  },
+});
+const emit = defineEmits(['update:page']);
+const totalPages = computed(() => Math.max(1, Math.ceil(props.total / props.perPage)));
+</script>

package/src/ui/popover.vue

@@ -1,9 +1,9 @@
-<script setup lang="ts">
-import { Popover } from '@/shadcn/popover';
-</script>
-
-<template>
-  <Popover data-slot="popover" v-bind="$attrs">
-    <slot />
-  </Popover>
-</template>
+<script setup lang="ts">
+import { Popover } from '@/shadcn/popover';
+</script>
+
+<template>
+  <Popover data-slot="popover" v-bind="$attrs">
+    <slot />
+  </Popover>
+</template>

package/src/ui/progress.vue

@@ -1,67 +1,67 @@
-<template>
-  <div :class="cn('space-y-2', $attrs.class)">
-    <div v-if="label" class="flex items-center justify-between">
-      <span class="text-sm font-medium text-muted-foreground">{{ label }}</span>
-      <span v-if="typeof value === 'number' && !showSteps" class="text-xs text-muted-foreground">{{ value }}%</span>
-    </div>
-    <div v-if="showSteps" class="space-y-3 mb-2">
-      <div v-for="(step, idx) in steps" :key="idx" class="flex items-center space-x-3">
-        <div :class="stepStatusClass(step.status)" class="w-4 h-4 rounded-full flex items-center justify-center">
-          <CheckCircle v-if="step.status === 'complete'" class="w-3 h-3 text-white" />
-          <Loader2 v-else-if="step.status === 'in-progress'" class="w-3 h-3 text-white animate-spin" />
-        </div>
-        <span :class="['text-sm', step.status === 'pending' ? 'text-muted-foreground' : '']">{{ step.label }}</span>
-        <Badge :variant="badgeVariant(step.status)">
-          {{ badgeText(step.status) }}
-        </Badge>
-      </div>
-    </div>
-    <div v-if="!showSteps" :class="cn('bg-primary/20 relative h-2 w-full overflow-hidden rounded-full', $attrs.class)">
-      <div
-        class="bg-primary h-full w-full flex-1 transition-all"
-        :style="{ transform: `translateX(-${100 - (value || 0)}%)` }"
-        role="progressbar"
-        :aria-valuenow="value"
-        aria-valuemin="0"
-        aria-valuemax="100"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { computed, defineProps, useAttrs } from 'vue';
-import { CheckCircle, Loader2 } from 'lucide-vue-next';
-import Badge from './badge.vue';
-import { cn } from './utils';
-
-const props = defineProps({
-  value: {
-    type: Number,
-    default: 0,
-  },
-  label: String,
-  steps: Array,
-});
-
-const $attrs = useAttrs();
-const showSteps = computed(() => Array.isArray(props.steps) && props.steps.length > 0);
-
-function stepStatusClass(status) {
-  if (status === 'complete') return 'bg-green-500';
-  if (status === 'in-progress') return 'bg-blue-500';
-  return 'bg-muted';
-}
-
-function badgeVariant(status) {
-  if (status === 'complete') return 'soft-success';
-  if (status === 'in-progress') return 'soft-primary';
-  return 'secondary';
-}
-
-function badgeText(status) {
-  if (status === 'complete') return 'Complete';
-  if (status === 'in-progress') return 'In Progress';
-  return 'Pending';
-}
-</script>
+<template>
+  <div :class="cn('space-y-2', $attrs.class)">
+    <div v-if="label" class="flex items-center justify-between">
+      <span class="text-sm font-medium text-muted-foreground">{{ label }}</span>
+      <span v-if="typeof value === 'number' && !showSteps" class="text-xs text-muted-foreground">{{ value }}%</span>
+    </div>
+    <div v-if="showSteps" class="space-y-3 mb-2">
+      <div v-for="(step, idx) in steps" :key="idx" class="flex items-center space-x-3">
+        <div :class="stepStatusClass(step.status)" class="w-4 h-4 rounded-full flex items-center justify-center">
+          <CheckCircle v-if="step.status === 'complete'" class="w-3 h-3 text-white" />
+          <Loader2 v-else-if="step.status === 'in-progress'" class="w-3 h-3 text-white animate-spin" />
+        </div>
+        <span :class="['text-sm', step.status === 'pending' ? 'text-muted-foreground' : '']">{{ step.label }}</span>
+        <Badge :variant="badgeVariant(step.status)">
+          {{ badgeText(step.status) }}
+        </Badge>
+      </div>
+    </div>
+    <div v-if="!showSteps" :class="cn('bg-primary/20 relative h-2 w-full overflow-hidden rounded-full', $attrs.class)">
+      <div
+        class="bg-primary h-full w-full flex-1 transition-all"
+        :style="{ transform: `translateX(-${100 - (value || 0)}%)` }"
+        role="progressbar"
+        :aria-valuenow="value"
+        aria-valuemin="0"
+        aria-valuemax="100"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, defineProps, useAttrs } from 'vue';
+import { CheckCircle, Loader2 } from 'lucide-vue-next';
+import Badge from './badge.vue';
+import { cn } from './utils';
+
+const props = defineProps({
+  value: {
+    type: Number,
+    default: 0,
+  },
+  label: String,
+  steps: Array,
+});
+
+const $attrs = useAttrs();
+const showSteps = computed(() => Array.isArray(props.steps) && props.steps.length > 0);
+
+function stepStatusClass(status) {
+  if (status === 'complete') return 'bg-green-500';
+  if (status === 'in-progress') return 'bg-blue-500';
+  return 'bg-muted';
+}
+
+function badgeVariant(status) {
+  if (status === 'complete') return 'soft-success';
+  if (status === 'in-progress') return 'soft-primary';
+  return 'secondary';
+}
+
+function badgeText(status) {
+  if (status === 'complete') return 'Complete';
+  if (status === 'in-progress') return 'In Progress';
+  return 'Pending';
+}
+</script>

package/src/ui/radio-group-item.vue

@@ -1,53 +1,53 @@
-
-<template>
-  <RadioGroupItem
-    data-slot="radio-group-item"
-    :value="value"
-    :disabled="disabled"
-    :class="cn('border-neutral-300 dark:border-neutral-600 text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive bg-background dark:bg-input aspect-square size-4 shrink-0 rounded-full border-2 shadow-xs transition-[color,box-shadow,border-color] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50', $attrs.class)"
-    v-bind="$attrs"
-    v-model="internalModelValue"
-  >
-    <template #indicator>
-      <span data-slot="radio-group-indicator" class="relative flex items-center justify-center">
-        <svg class="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" viewBox="0 0 8 8"><circle cx="4" cy="4" r="4" /></svg>
-      </span>
-    </template>
-    <slot />
-  </RadioGroupItem>
-</template>
-
-<script setup>
-import { defineProps, useAttrs } from 'vue';
-import { cn } from './utils';
-import { RadioGroupItem } from '@/shadcn/radio-group';
-
-const props = defineProps({
-  modelValue: {
-    type: [String, Number, Boolean],
-    default: undefined,
-  },
-  value: {
-    type: [String, Number, Boolean],
-    required: true,
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-import { ref, watch } from 'vue';
-const $attrs = useAttrs();
-
-const internalModelValue = ref(props.modelValue);
-watch(() => props.modelValue, (val) => {
-  internalModelValue.value = val;
-});
-watch(internalModelValue, (val) => {
-  if (val !== props.modelValue) {
-    // emit update if needed (parent should sync)
-    // this is a placeholder for two-way binding if needed
-  }
-});
-</script>
+
+<template>
+  <RadioGroupItem
+    data-slot="radio-group-item"
+    :value="value"
+    :disabled="disabled"
+    :class="cn('border-neutral-300 dark:border-neutral-600 text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive bg-background dark:bg-input aspect-square size-4 shrink-0 rounded-full border-2 shadow-xs transition-[color,box-shadow,border-color] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50', $attrs.class)"
+    v-bind="$attrs"
+    v-model="internalModelValue"
+  >
+    <template #indicator>
+      <span data-slot="radio-group-indicator" class="relative flex items-center justify-center">
+        <svg class="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" viewBox="0 0 8 8"><circle cx="4" cy="4" r="4" /></svg>
+      </span>
+    </template>
+    <slot />
+  </RadioGroupItem>
+</template>
+
+<script setup>
+import { defineProps, useAttrs } from 'vue';
+import { cn } from './utils';
+import { RadioGroupItem } from '@/shadcn/radio-group';
+
+const props = defineProps({
+  modelValue: {
+    type: [String, Number, Boolean],
+    default: undefined,
+  },
+  value: {
+    type: [String, Number, Boolean],
+    required: true,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+import { ref, watch } from 'vue';
+const $attrs = useAttrs();
+
+const internalModelValue = ref(props.modelValue);
+watch(() => props.modelValue, (val) => {
+  internalModelValue.value = val;
+});
+watch(internalModelValue, (val) => {
+  if (val !== props.modelValue) {
+    // emit update if needed (parent should sync)
+    // this is a placeholder for two-way binding if needed
+  }
+});
+</script>

package/src/ui/radio-group.vue

@@ -1,27 +1,27 @@
-
-<template>
-  <RadioGroup
-    data-slot="radio-group"
-    :aria-labelledby="ariaLabelledby"
-    :class="cn('grid gap-3', $attrs.class)"
-    v-bind="$attrs"
-  >
-    <slot />
-  </RadioGroup>
-</template>
-
-
-<script setup>
-import { defineProps, useAttrs } from 'vue';
-import { cn } from './utils';
-import { RadioGroup } from '@/shadcn/radio-group';
-
-const props = defineProps({
-  ariaLabelledby: {
-    type: String,
-    default: undefined,
-  },
-});
-
-const $attrs = useAttrs();
-</script>
+
+<template>
+  <RadioGroup
+    data-slot="radio-group"
+    :aria-labelledby="ariaLabelledby"
+    :class="cn('grid gap-3', $attrs.class)"
+    v-bind="$attrs"
+  >
+    <slot />
+  </RadioGroup>
+</template>
+
+
+<script setup>
+import { defineProps, useAttrs } from 'vue';
+import { cn } from './utils';
+import { RadioGroup } from '@/shadcn/radio-group';
+
+const props = defineProps({
+  ariaLabelledby: {
+    type: String,
+    default: undefined,
+  },
+});
+
+const $attrs = useAttrs();
+</script>