@bl33dz/fa814698dcde12f86a37ac31dd3aedf9 1.0.5 → 1.0.7

package/src/ui/category-breakdown-metric.vue

@@ -1,205 +1,205 @@
-<script setup lang="ts">
-import { ref, computed } from 'vue'
-import Tooltip from './tooltip.vue'
-import TooltipContent from './tooltip-content.vue'
-import TooltipProvider from './tooltip-provider.vue'
-import TooltipTrigger from './tooltip-trigger.vue'
-
-type Category = {
-  name: string
-  label?: string
-  color: string
-}
-
-
-
-const props = defineProps({
-  title: String,
-  iconName: String,
-  categories: {
-    type: Array as () => Category[],
-    required: true
-  },
-  data: {
-    type: Object as () => Record<string, number>,
-    required: true
-  },
-  isLoading: Boolean
-})
-
-const nonZeroCategories = computed(() => props.categories?.filter(c => (props.data[c.name] ?? 0) > 0))
-const total = computed(() => nonZeroCategories.value?.reduce((sum, cat) => sum + (props.data[cat.name] || 0), 0))
-
-const categoryPositions = computed(() => {
-  let cumulativePercentage = 0
-  return nonZeroCategories.value?.map((category, index) => {
-    const value = props.data[category.name] || 0
-    const proportion = total.value > 0 ? value / total.value : 0
-    const percentage = proportion * 100
-    const boundaryPosition = cumulativePercentage
-    cumulativePercentage += percentage
-    return {
-      ...category,
-      value,
-      boundaryPosition,
-      percentage,
-      index
-    }
-  })
-})
-
-const MIN_LABEL_WIDTH_PCT = 24
-const showLabel = computed(() => {
-  const arr = categoryPositions.value?.map(() => true)
-  for (let i = 0; i < categoryPositions.value?.length - 1; i++) {
-    const cur = categoryPositions.value[i]
-    const next = categoryPositions.value[i + 1]
-    const segmentWidthPct = next.boundaryPosition - cur.boundaryPosition
-    if (segmentWidthPct < MIN_LABEL_WIDTH_PCT) {
-      arr[i] = false
-    }
-  }
-  if (categoryPositions.value?.length > 0) {
-    const last = categoryPositions.value[categoryPositions.value?.length - 1]
-    const lastWidthPct = 100 - last.boundaryPosition
-    if (lastWidthPct < MIN_LABEL_WIDTH_PCT) {
-      arr[categoryPositions.value?.length - 1] = false
-    }
-  }
-  return arr
-})
-
-const visibleCategories = computed(() => {
-  return categoryPositions.value?.map((category, index) => {
-    if (index === categoryPositions.value?.length - 1) {
-      return { ...category, isVisible: true }
-    }
-    const nextCategory = categoryPositions.value[index + 1]
-    const minSpacingNeeded = 15
-    const spaceAvailable = nextCategory.boundaryPosition - category.boundaryPosition
-    const isVisible = spaceAvailable >= minSpacingNeeded
-    return { ...category, isVisible }
-  })
-})
-
-const BAR_COUNT = 74
-const bars = computed(() => {
-  const arr: Array<{ color: string; position: number }> = []
-  let currentPosition = 0
-  props.categories?.forEach(category => {
-    const value = props.data[category.name] || 0
-    const isNonZero = nonZeroCategories.value.find(c => c.name === category.name)
-    const proportion = total.value > 0 ? (isNonZero ? value / total.value : 0) : 0
-    const barCount = Math.round(proportion * BAR_COUNT)
-    for (let i = 0; i < barCount; i++) {
-      arr.push({ color: category.color, position: currentPosition + i })
-    }
-    currentPosition += barCount
-  })
-  while (arr?.length < BAR_COUNT) {
-    let lastNonZero
-    if (nonZeroCategories.value) lastNonZero = nonZeroCategories.value[nonZeroCategories.value?.length - 1]
-    const fallback = lastNonZero?.color || (props.categories && props.categories[props.categories?.length - 1]?.color) || '#9ca3af'
-    arr.push({ color: fallback, position: arr?.length })
-  }
-  return arr
-})
-
-const isEmpty = computed(() => total.value === 0)
-</script>
-
-<template>
-  <div v-if="isEmpty" class="relative w-full h-[75px] flex items-center justify-center bg-gray-800 rounded-md">
-    <span class="text-gray-400 text-sm">No data available</span>
-  </div>
-  <TooltipProvider v-else>
-    <Tooltip>
-      <TooltipTrigger as-child>
-        <div class="relative w-full h-[75px] cursor-help select-none">
-          <!-- Labels -->
-          <template v-for="(category, index) in categoryPositions" :key="category.name">
-            <div v-if="showLabel[index]">
-              <div
-                v-if="index !== categoryPositions?.length - 1"
-                class="absolute box-border content-stretch flex flex-col gap-[4px] py-0 top-[0.33px] items-start"
-                :style="{ left: category.boundaryPosition + '%', transform: 'translateX(8px)' }"
-              >
-                <p class="leading-[16px] text-[12px] text-muted-foreground">{{ category.label || category.name }}</p>
-                <p class="leading-[20px] text-[24px]" :style="{ color: category.color }">{{ category.value }}</p>
-              </div>
-              <div
-                v-else
-                class="absolute box-border content-stretch flex flex-col gap-[4px] py-0 top-[0.33px]"
-                :style="{
-                  left: category.boundaryPosition + '%',
-                  transform: (100 - category.boundaryPosition < 6) ? 'translateX(calc(-100% - 8px))' : 'translateX(8px)',
-                  textAlign: (100 - category.boundaryPosition < 6) ? 'right' : 'left'
-                }"
-              >
-                <p class="leading-[16px] text-[12px] text-muted-foreground">{{ category.label || category.name }}</p>
-                <p class="leading-[20px] text-[24px]" :style="{ color: category.color }">{{ category.value }}</p>
-              </div>
-            </div>
-          </template>
-
-          <!-- Boundary separators -->
-          <template v-for="(category, index) in categoryPositions" :key="'line-' + index">
-            <div v-if="index !== 0" class="absolute flex h-[75px] items-center justify-center top-0 w-[0px] overflow-visible" :style="{ left: categoryPositions.slice(0, index).reduce((sum, cat) => sum + cat.percentage, 0) + '%' }">
-              <div class="flex-none" style="rotate: 90deg">
-                <div class="h-0 relative w-[75px]">
-                  <div class="absolute bottom-0 left-0 right-0 top-[-1px]">
-                    <svg class="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 75 1">
-                      <line :stroke="category.color" x2="75" y1="0.5" y2="0.5" />
-                    </svg>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </template>
-
-          <!-- Left edge vertical line -->
-          <div class="absolute flex h-[75px] items-center justify-center left-0 top-0 w-[0px]">
-            <div class="flex-none" style="rotate: 90deg">
-              <div class="h-0 relative w-[75px]">
-                <div class="absolute bottom-0 left-0 right-0 top-[-1px]">
-                  <svg class="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 75 1">
-                    <line :stroke="(visibleCategories && visibleCategories[0]?.color) || (nonZeroCategories && nonZeroCategories[0]?.color) || '#9ca3af'" x2="75" y1="0.5" y2="0.5" />
-                  </svg>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <!-- Bars -->
-          <div class="absolute box-border content-stretch flex items-center justify-between left-[0.33px] overflow-clip px-[2px] py-0 right-[0.33px] rounded-[2px] top-[51px]">
-            <div v-for="(bar, index) in bars" :key="index" class="flex items-center justify-center relative shrink-0">
-              <div class="flex-none rotate-[180deg] scale-y-[-100%]">
-                <div class="h-[24px] w-px" :style="{ backgroundColor: isEmpty ? '#9ca3af' : bar.color }" />
-              </div>
-            </div>
-          </div>
-        </div>
-      </TooltipTrigger>
-      <TooltipContent variant="outline">
-        <div class="space-y-2">
-          <p class="font-medium text-sm">Threat Breakdown</p>
-          <div class="space-y-1">
-            <div v-for="category in props.categories" :key="category.name" class="flex items-center justify-between gap-4">
-              <div class="flex items-center gap-2">
-                <div class="w-2 h-2 rounded-full flex-shrink-0" :style="{ backgroundColor: category.color }" />
-                <span class="text-sm">{{ category.label || category.name }}</span>
-              </div>
-              <span class="text-sm font-mono" :style="{ color: category.color }">{{ props.data[category.name] || 0 }}</span>
-            </div>
-          </div>
-          <div class="border-t pt-2 mt-2">
-            <div class="flex items-center justify-between">
-              <span class="text-sm font-medium">Total</span>
-              <span class="text-sm font-mono font-medium">{{ props.categories.reduce((sum, c) => sum + (props.data[c.name] || 0), 0).toLocaleString() }}</span>
-            </div>
-          </div>
-        </div>
-      </TooltipContent>
-    </Tooltip>
-  </TooltipProvider>
-</template>
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import Tooltip from './tooltip.vue'
+import TooltipContent from './tooltip-content.vue'
+import TooltipProvider from './tooltip-provider.vue'
+import TooltipTrigger from './tooltip-trigger.vue'
+
+type Category = {
+  name: string
+  label?: string
+  color: string
+}
+
+
+
+const props = defineProps({
+  title: String,
+  iconName: String,
+  categories: {
+    type: Array as () => Category[],
+    required: true
+  },
+  data: {
+    type: Object as () => Record<string, number>,
+    required: true
+  },
+  isLoading: Boolean
+})
+
+const nonZeroCategories = computed(() => props.categories?.filter(c => (props.data[c.name] ?? 0) > 0))
+const total = computed(() => nonZeroCategories.value?.reduce((sum, cat) => sum + (props.data[cat.name] || 0), 0))
+
+const categoryPositions = computed(() => {
+  let cumulativePercentage = 0
+  return nonZeroCategories.value?.map((category, index) => {
+    const value = props.data[category.name] || 0
+    const proportion = total.value > 0 ? value / total.value : 0
+    const percentage = proportion * 100
+    const boundaryPosition = cumulativePercentage
+    cumulativePercentage += percentage
+    return {
+      ...category,
+      value,
+      boundaryPosition,
+      percentage,
+      index
+    }
+  })
+})
+
+const MIN_LABEL_WIDTH_PCT = 24
+const showLabel = computed(() => {
+  const arr = categoryPositions.value?.map(() => true)
+  for (let i = 0; i < categoryPositions.value?.length - 1; i++) {
+    const cur = categoryPositions.value[i]
+    const next = categoryPositions.value[i + 1]
+    const segmentWidthPct = next.boundaryPosition - cur.boundaryPosition
+    if (segmentWidthPct < MIN_LABEL_WIDTH_PCT) {
+      arr[i] = false
+    }
+  }
+  if (categoryPositions.value?.length > 0) {
+    const last = categoryPositions.value[categoryPositions.value?.length - 1]
+    const lastWidthPct = 100 - last.boundaryPosition
+    if (lastWidthPct < MIN_LABEL_WIDTH_PCT) {
+      arr[categoryPositions.value?.length - 1] = false
+    }
+  }
+  return arr
+})
+
+const visibleCategories = computed(() => {
+  return categoryPositions.value?.map((category, index) => {
+    if (index === categoryPositions.value?.length - 1) {
+      return { ...category, isVisible: true }
+    }
+    const nextCategory = categoryPositions.value[index + 1]
+    const minSpacingNeeded = 15
+    const spaceAvailable = nextCategory.boundaryPosition - category.boundaryPosition
+    const isVisible = spaceAvailable >= minSpacingNeeded
+    return { ...category, isVisible }
+  })
+})
+
+const BAR_COUNT = 74
+const bars = computed(() => {
+  const arr: Array<{ color: string; position: number }> = []
+  let currentPosition = 0
+  props.categories?.forEach(category => {
+    const value = props.data[category.name] || 0
+    const isNonZero = nonZeroCategories.value.find(c => c.name === category.name)
+    const proportion = total.value > 0 ? (isNonZero ? value / total.value : 0) : 0
+    const barCount = Math.round(proportion * BAR_COUNT)
+    for (let i = 0; i < barCount; i++) {
+      arr.push({ color: category.color, position: currentPosition + i })
+    }
+    currentPosition += barCount
+  })
+  while (arr?.length < BAR_COUNT) {
+    let lastNonZero
+    if (nonZeroCategories.value) lastNonZero = nonZeroCategories.value[nonZeroCategories.value?.length - 1]
+    const fallback = lastNonZero?.color || (props.categories && props.categories[props.categories?.length - 1]?.color) || '#9ca3af'
+    arr.push({ color: fallback, position: arr?.length })
+  }
+  return arr
+})
+
+const isEmpty = computed(() => total.value === 0)
+</script>
+
+<template>
+  <div v-if="isEmpty" class="relative w-full h-[75px] flex items-center justify-center bg-gray-800 rounded-md">
+    <span class="text-gray-400 text-sm">No data available</span>
+  </div>
+  <TooltipProvider v-else>
+    <Tooltip>
+      <TooltipTrigger as-child>
+        <div class="relative w-full h-[75px] cursor-help select-none">
+          <!-- Labels -->
+          <template v-for="(category, index) in categoryPositions" :key="category.name">
+            <div v-if="showLabel[index]">
+              <div
+                v-if="index !== categoryPositions?.length - 1"
+                class="absolute box-border content-stretch flex flex-col gap-[4px] py-0 top-[0.33px] items-start"
+                :style="{ left: category.boundaryPosition + '%', transform: 'translateX(8px)' }"
+              >
+                <p class="leading-[16px] text-[12px] text-muted-foreground">{{ category.label || category.name }}</p>
+                <p class="leading-[20px] text-[24px]" :style="{ color: category.color }">{{ category.value }}</p>
+              </div>
+              <div
+                v-else
+                class="absolute box-border content-stretch flex flex-col gap-[4px] py-0 top-[0.33px]"
+                :style="{
+                  left: category.boundaryPosition + '%',
+                  transform: (100 - category.boundaryPosition < 6) ? 'translateX(calc(-100% - 8px))' : 'translateX(8px)',
+                  textAlign: (100 - category.boundaryPosition < 6) ? 'right' : 'left'
+                }"
+              >
+                <p class="leading-[16px] text-[12px] text-muted-foreground">{{ category.label || category.name }}</p>
+                <p class="leading-[20px] text-[24px]" :style="{ color: category.color }">{{ category.value }}</p>
+              </div>
+            </div>
+          </template>
+
+          <!-- Boundary separators -->
+          <template v-for="(category, index) in categoryPositions" :key="'line-' + index">
+            <div v-if="index !== 0" class="absolute flex h-[75px] items-center justify-center top-0 w-[0px] overflow-visible" :style="{ left: categoryPositions.slice(0, index).reduce((sum, cat) => sum + cat.percentage, 0) + '%' }">
+              <div class="flex-none" style="rotate: 90deg">
+                <div class="h-0 relative w-[75px]">
+                  <div class="absolute bottom-0 left-0 right-0 top-[-1px]">
+                    <svg class="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 75 1">
+                      <line :stroke="category.color" x2="75" y1="0.5" y2="0.5" />
+                    </svg>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </template>
+
+          <!-- Left edge vertical line -->
+          <div class="absolute flex h-[75px] items-center justify-center left-0 top-0 w-[0px]">
+            <div class="flex-none" style="rotate: 90deg">
+              <div class="h-0 relative w-[75px]">
+                <div class="absolute bottom-0 left-0 right-0 top-[-1px]">
+                  <svg class="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 75 1">
+                    <line :stroke="(visibleCategories && visibleCategories[0]?.color) || (nonZeroCategories && nonZeroCategories[0]?.color) || '#9ca3af'" x2="75" y1="0.5" y2="0.5" />
+                  </svg>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Bars -->
+          <div class="absolute box-border content-stretch flex items-center justify-between left-[0.33px] overflow-clip px-[2px] py-0 right-[0.33px] rounded-[2px] top-[51px]">
+            <div v-for="(bar, index) in bars" :key="index" class="flex items-center justify-center relative shrink-0">
+              <div class="flex-none rotate-[180deg] scale-y-[-100%]">
+                <div class="h-[24px] w-px" :style="{ backgroundColor: isEmpty ? '#9ca3af' : bar.color }" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </TooltipTrigger>
+      <TooltipContent variant="outline">
+        <div class="space-y-2">
+          <p class="font-medium text-sm">Threat Breakdown</p>
+          <div class="space-y-1">
+            <div v-for="category in props.categories" :key="category.name" class="flex items-center justify-between gap-4">
+              <div class="flex items-center gap-2">
+                <div class="w-2 h-2 rounded-full flex-shrink-0" :style="{ backgroundColor: category.color }" />
+                <span class="text-sm">{{ category.label || category.name }}</span>
+              </div>
+              <span class="text-sm font-mono" :style="{ color: category.color }">{{ props.data[category.name] || 0 }}</span>
+            </div>
+          </div>
+          <div class="border-t pt-2 mt-2">
+            <div class="flex items-center justify-between">
+              <span class="text-sm font-medium">Total</span>
+              <span class="text-sm font-mono font-medium">{{ props.categories.reduce((sum, c) => sum + (props.data[c.name] || 0), 0).toLocaleString() }}</span>
+            </div>
+          </div>
+        </div>
+      </TooltipContent>
+    </Tooltip>
+  </TooltipProvider>
+</template>

package/src/ui/checkbox.vue

@@ -1,84 +1,84 @@
-
-
-<template>
-  <div v-if="label" class="space-y-2">
-    <div class="flex items-center space-x-2">
-      <span class="relative flex items-center">
-        <input
-          id="with-label"
-          data-slot="checkbox"
-          type="checkbox"
-          :checked="modelValue"
-          :disabled="disabled"
-          :aria-invalid="validationState === 'error' ? 'true' : undefined"
-          :class="checkboxClass"
-          v-bind="$attrs"
-          @change="$emit('update:modelValue', $event.target.checked)"
-        />
-        <span v-if="modelValue" data-slot="checkbox-indicator" class="absolute left-0 top-0 flex h-full w-full items-center justify-center text-current transition-none pointer-events-none">
-          <CheckIcon class="h-3.5 w-3.5" />
-        </span>
-      </span>
-      <Label htmlFor="with-label">{{ label }}</Label>
-    </div>
-    <p v-if="validationState === 'success' && validationText" class="text-sm text-green-600 flex items-center gap-1">
-      <CheckIcon class="h-4 w-4" />
-      {{ validationText }}
-    </p>
-    <p v-if="validationState === 'error' && validationText" class="text-sm text-red-600 flex items-center gap-1">
-      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01" /></svg>
-      {{ validationText }}
-    </p>
-  </div>
-  <div v-else class="space-y-2">
-    <span class="relative flex items-center">
-      <input
-        data-slot="checkbox"
-        type="checkbox"
-        :checked="modelValue"
-        :disabled="disabled"
-        :aria-invalid="validationState === 'error' ? 'true' : undefined"
-        :class="checkboxClass"
-        v-bind="$attrs"
-        @change="$emit('update:modelValue', $event.target.checked)"
-      />
-      <span v-if="modelValue" data-slot="checkbox-indicator" class="absolute left-0 top-0 flex h-full w-full items-center justify-center text-current transition-none pointer-events-none">
-        <CheckIcon class="h-3.5 w-3.5" />
-      </span>
-    </span>
-    <slot name="label" />
-    <p v-if="validationState === 'success' && validationText" class="text-sm text-green-600 flex items-center gap-1">
-      <CheckIcon class="h-4 w-4" />
-      {{ validationText }}
-    </p>
-    <p v-if="validationState === 'error' && validationText" class="text-sm text-red-600 flex items-center gap-1">
-      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01" /></svg>
-      {{ validationText }}
-    </p>
-  </div>
-</template>
-
-<script setup>
-import { computed } from 'vue';
-import Label from './label.vue';
-import CheckIcon from './icons/Check.vue';
-
-const props = defineProps({
-  modelValue: { type: Boolean, default: false },
-  disabled: { type: Boolean, default: false },
-  label: { type: String, default: '' },
-  validationState: { type: String, default: undefined }, // 'success' | 'error'
-  validationText: { type: String, default: '' },
-  id: { type: String, default: undefined },
-  class: { type: String, default: '' },
-});
-
-const computedId = computed(() => props.id || `checkbox-${Math.random().toString(36).substr(2, 9)}`);
-
-const checkboxClass = computed(() => [
-  'peer border bg-input-background dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-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 size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
-  props.validationState === 'error' ? 'border-red-500 data-[state=checked]:bg-red-500' : '',
-  props.validationState === 'success' ? 'border-green-500 data-[state=checked]:bg-green-500' : '',
-  props.class,
-]);
-</script>
+
+
+<template>
+  <div v-if="label" class="space-y-2">
+    <div class="flex items-center space-x-2">
+      <span class="relative flex items-center">
+        <input
+          id="with-label"
+          data-slot="checkbox"
+          type="checkbox"
+          :checked="modelValue"
+          :disabled="disabled"
+          :aria-invalid="validationState === 'error' ? 'true' : undefined"
+          :class="checkboxClass"
+          v-bind="$attrs"
+          @change="$emit('update:modelValue', $event.target.checked)"
+        />
+        <span v-if="modelValue" data-slot="checkbox-indicator" class="absolute left-0 top-0 flex h-full w-full items-center justify-center text-current transition-none pointer-events-none">
+          <CheckIcon class="h-3.5 w-3.5" />
+        </span>
+      </span>
+      <Label htmlFor="with-label">{{ label }}</Label>
+    </div>
+    <p v-if="validationState === 'success' && validationText" class="text-sm text-green-600 flex items-center gap-1">
+      <CheckIcon class="h-4 w-4" />
+      {{ validationText }}
+    </p>
+    <p v-if="validationState === 'error' && validationText" class="text-sm text-red-600 flex items-center gap-1">
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01" /></svg>
+      {{ validationText }}
+    </p>
+  </div>
+  <div v-else class="space-y-2">
+    <span class="relative flex items-center">
+      <input
+        data-slot="checkbox"
+        type="checkbox"
+        :checked="modelValue"
+        :disabled="disabled"
+        :aria-invalid="validationState === 'error' ? 'true' : undefined"
+        :class="checkboxClass"
+        v-bind="$attrs"
+        @change="$emit('update:modelValue', $event.target.checked)"
+      />
+      <span v-if="modelValue" data-slot="checkbox-indicator" class="absolute left-0 top-0 flex h-full w-full items-center justify-center text-current transition-none pointer-events-none">
+        <CheckIcon class="h-3.5 w-3.5" />
+      </span>
+    </span>
+    <slot name="label" />
+    <p v-if="validationState === 'success' && validationText" class="text-sm text-green-600 flex items-center gap-1">
+      <CheckIcon class="h-4 w-4" />
+      {{ validationText }}
+    </p>
+    <p v-if="validationState === 'error' && validationText" class="text-sm text-red-600 flex items-center gap-1">
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01" /></svg>
+      {{ validationText }}
+    </p>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import Label from './label.vue';
+import CheckIcon from './icons/Check.vue';
+
+const props = defineProps({
+  modelValue: { type: Boolean, default: false },
+  disabled: { type: Boolean, default: false },
+  label: { type: String, default: '' },
+  validationState: { type: String, default: undefined }, // 'success' | 'error'
+  validationText: { type: String, default: '' },
+  id: { type: String, default: undefined },
+  class: { type: String, default: '' },
+});
+
+const computedId = computed(() => props.id || `checkbox-${Math.random().toString(36).substr(2, 9)}`);
+
+const checkboxClass = computed(() => [
+  'peer border bg-input-background dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-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 size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+  props.validationState === 'error' ? 'border-red-500 data-[state=checked]:bg-red-500' : '',
+  props.validationState === 'success' ? 'border-green-500 data-[state=checked]:bg-green-500' : '',
+  props.class,
+]);
+</script>

package/src/ui/cn.ts

@@ -1,6 +1,6 @@
-import { clsx, type ClassValue } from "clsx";
-import { twMerge } from "tailwind-merge";
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/src/ui/dialog-body.vue

@@ -1,13 +1,13 @@
-<template>
-  <div
-    data-slot="dialog-body"
-    :class="['p-4 space-y-4', $attrs.class]"
-    v-bind="$attrs"
-  >
-    <slot />
-  </div>
-</template>
-
-<script setup>
-// No additional logic needed
-</script>
+<template>
+  <div
+    data-slot="dialog-body"
+    :class="['p-4 space-y-4', $attrs.class]"
+    v-bind="$attrs"
+  >
+    <slot />
+  </div>
+</template>
+
+<script setup>
+// No additional logic needed
+</script>

package/src/ui/dialog-close.vue

@@ -1,9 +1,9 @@
-<template>
-  <DialogClose v-bind="$attrs">
-    <slot />
-  </DialogClose>
-</template>
-
-<script setup>
-import { DialogClose } from "reka-ui"
-</script>
+<template>
+  <DialogClose v-bind="$attrs">
+    <slot />
+  </DialogClose>
+</template>
+
+<script setup>
+import { DialogClose } from "reka-ui"
+</script>