@bl33dz/fa814698dcde12f86a37ac31dd3aedf9 1.0.6 → 1.0.9

package/src/ui/threat-gauge.vue

@@ -1,137 +1,137 @@
-<template>
-  <div :class="['relative', $attrs.class]" :style="{ width: `${size}px`, height: `${size}px` }">
-    <svg
-      :width="size"
-      :height="size"
-      :viewBox="`0 0 ${size} ${size}`"
-      class="overflow-visible"
-    >
-      <!-- Colored segments with FLAT ends and visible gaps -->
-      <path
-        v-for="seg in segments"
-        :key="seg.key"
-        :d="createArcPath(seg.tRange[0], seg.tRange[1])"
-        fill="none"
-        :stroke="seg.color"
-        :stroke-width="strokeWidth"
-        stroke-linecap="butt"
-      />
-      <!-- Indicator circle on the active segment -->
-      <circle
-        :cx="indicatorX"
-        :cy="indicatorY"
-        :r="indicatorRadius"
-        fill="#ffffff"
-        :stroke="activeSeg.color"
-        :stroke-width="indicatorStroke"
-      />
-    </svg>
-    <!-- LEVEL text centered inside the gauge box -->
-    <div
-      class="absolute left-1/2 font-semibold text-center"
-      :style="{
-        top: '50%',
-        transform: 'translate(-50%, -50%)',
-        color: colors[level],
-        fontSize: `${levelSize}px`,
-        lineHeight: 1.1,
-      }"
-    >
-      {{ level }}
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, defineProps, toRefs } from 'vue';
-
-type Level = 'LOW' | 'MEDIUM' | 'HIGH' | 'CRITICAL';
-
-const props = defineProps({
-  value: { type: Number, required: true },
-  level: { type: String as () => Level, required: true },
-  size: { type: Number, default: 240 },
-  gapDegrees: { type: Number, default: 10 },
-  thicknessRatio: { type: Number, default: 0.09 },
-  snapToSegmentCenter: { type: Boolean, default: false },
-});
-
-const { value, level, size, gapDegrees, thicknessRatio, snapToSegmentCenter } = toRefs(props);
-
-const colors: Record<Level, string> = {
-  LOW: 'var(--success-500)',
-  MEDIUM: 'var(--warning-400)',
-  HIGH: 'var(--warning-600)',
-  CRITICAL: 'var(--error-500)',
-};
-
-const order: Level[] = ['LOW', 'MEDIUM', 'HIGH', 'CRITICAL'];
-const valueRanges: [number, number][] = [
-  [0, 25],
-  [25, 50],
-  [50, 75],
-  [75, 100.0001],
-];
-
-const n = 4;
-const gapT = computed(() => Math.max(0, Math.min(gapDegrees.value, 30)) / 180);
-const totalGapT = computed(() => gapT.value * (n - 1));
-const segT = computed(() => (1 - totalGapT.value) / n);
-
-const segments = computed(() =>
-  order.map((key, i) => {
-    const startT = i * (segT.value + gapT.value);
-    const endT = startT + segT.value;
-    return {
-      key,
-      color: colors[key],
-      range: valueRanges[i],
-      tRange: [startT, endT],
-    };
-  })
-);
-
-const strokeWidth = computed(() => Math.max(4, size.value * thicknessRatio.value));
-const radius = computed(() => size.value * 0.45);
-const centerX = computed(() => size.value / 2);
-const centerY = computed(() => size.value * 0.65);
-
-const pct = computed(() => Math.min(Math.max(value.value, 0), 100));
-
-const activeSeg = computed(() =>
-  segments.value.find((s) => s.key === level.value) ||
-  segments.value.find((s) => pct.value >= s.range[0] && pct.value < s.range[1]) ||
-  segments.value[0]
-);
-
-function createArcPath(startT: number, endT: number, segmentsCount = 42) {
-  const pts: string[] = [];
-  const span = Math.max(0, Math.min(1, endT) - Math.max(0, startT));
-  const steps = Math.max(2, Math.round(segmentsCount * span));
-  for (let i = 0; i <= steps; i++) {
-    const t = startT + ((endT - startT) * i) / steps;
-    const ang = Math.PI * (1 - t);
-    const x = centerX.value + radius.value * Math.cos(ang);
-    const y = centerY.value - radius.value * Math.sin(ang);
-    pts.push(`${x} ${y}`);
-  }
-  return `M ${pts[0]} L ${pts.slice(1).join(' ')}`;
-}
-
-const [vMin, vMax] = computed(() => activeSeg.value.range).value;
-const pctForIndicator = computed(() =>
-  snapToSegmentCenter.value
-    ? (vMin + vMax) / 2
-    : Math.min(Math.max(pct.value, vMin), vMax)
-);
-const local = computed(() => (pctForIndicator.value - vMin) / (vMax - vMin));
-const [tMin, tMax] = computed(() => activeSeg.value.tRange).value;
-const tIndicator = computed(() => tMin + (tMax - tMin) * local.value);
-const angIndicator = computed(() => Math.PI * (1 - tIndicator.value));
-const indicatorX = computed(() => centerX.value + radius.value * Math.cos(angIndicator.value));
-const indicatorY = computed(() => centerY.value - radius.value * Math.sin(angIndicator.value));
-
-const levelSize = computed(() => size.value * 0.12);
-const indicatorRadius = computed(() => Math.max(8, size.value * 0.04));
-const indicatorStroke = computed(() => Math.max(2.5, size.value * 0.015));
-</script>
+<template>
+  <div :class="['relative', $attrs.class]" :style="{ width: `${size}px`, height: `${size}px` }">
+    <svg
+      :width="size"
+      :height="size"
+      :viewBox="`0 0 ${size} ${size}`"
+      class="overflow-visible"
+    >
+      <!-- Colored segments with FLAT ends and visible gaps -->
+      <path
+        v-for="seg in segments"
+        :key="seg.key"
+        :d="createArcPath(seg.tRange[0], seg.tRange[1])"
+        fill="none"
+        :stroke="seg.color"
+        :stroke-width="strokeWidth"
+        stroke-linecap="butt"
+      />
+      <!-- Indicator circle on the active segment -->
+      <circle
+        :cx="indicatorX"
+        :cy="indicatorY"
+        :r="indicatorRadius"
+        fill="#ffffff"
+        :stroke="activeSeg.color"
+        :stroke-width="indicatorStroke"
+      />
+    </svg>
+    <!-- LEVEL text centered inside the gauge box -->
+    <div
+      class="absolute left-1/2 font-semibold text-center"
+      :style="{
+        top: '50%',
+        transform: 'translate(-50%, -50%)',
+        color: colors[level],
+        fontSize: `${levelSize}px`,
+        lineHeight: 1.1,
+      }"
+    >
+      {{ level }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, defineProps, toRefs } from 'vue';
+
+type Level = 'LOW' | 'MEDIUM' | 'HIGH' | 'CRITICAL';
+
+const props = defineProps({
+  value: { type: Number, required: true },
+  level: { type: String as () => Level, required: true },
+  size: { type: Number, default: 240 },
+  gapDegrees: { type: Number, default: 10 },
+  thicknessRatio: { type: Number, default: 0.09 },
+  snapToSegmentCenter: { type: Boolean, default: false },
+});
+
+const { value, level, size, gapDegrees, thicknessRatio, snapToSegmentCenter } = toRefs(props);
+
+const colors: Record<Level, string> = {
+  LOW: 'var(--success-500)',
+  MEDIUM: 'var(--warning-400)',
+  HIGH: 'var(--warning-600)',
+  CRITICAL: 'var(--error-500)',
+};
+
+const order: Level[] = ['LOW', 'MEDIUM', 'HIGH', 'CRITICAL'];
+const valueRanges: [number, number][] = [
+  [0, 25],
+  [25, 50],
+  [50, 75],
+  [75, 100.0001],
+];
+
+const n = 4;
+const gapT = computed(() => Math.max(0, Math.min(gapDegrees.value, 30)) / 180);
+const totalGapT = computed(() => gapT.value * (n - 1));
+const segT = computed(() => (1 - totalGapT.value) / n);
+
+const segments = computed(() =>
+  order.map((key, i) => {
+    const startT = i * (segT.value + gapT.value);
+    const endT = startT + segT.value;
+    return {
+      key,
+      color: colors[key],
+      range: valueRanges[i],
+      tRange: [startT, endT],
+    };
+  })
+);
+
+const strokeWidth = computed(() => Math.max(4, size.value * thicknessRatio.value));
+const radius = computed(() => size.value * 0.45);
+const centerX = computed(() => size.value / 2);
+const centerY = computed(() => size.value * 0.65);
+
+const pct = computed(() => Math.min(Math.max(value.value, 0), 100));
+
+const activeSeg = computed(() =>
+  segments.value.find((s) => s.key === level.value) ||
+  segments.value.find((s) => pct.value >= s.range[0] && pct.value < s.range[1]) ||
+  segments.value[0]
+);
+
+function createArcPath(startT: number, endT: number, segmentsCount = 42) {
+  const pts: string[] = [];
+  const span = Math.max(0, Math.min(1, endT) - Math.max(0, startT));
+  const steps = Math.max(2, Math.round(segmentsCount * span));
+  for (let i = 0; i <= steps; i++) {
+    const t = startT + ((endT - startT) * i) / steps;
+    const ang = Math.PI * (1 - t);
+    const x = centerX.value + radius.value * Math.cos(ang);
+    const y = centerY.value - radius.value * Math.sin(ang);
+    pts.push(`${x} ${y}`);
+  }
+  return `M ${pts[0]} L ${pts.slice(1).join(' ')}`;
+}
+
+const [vMin, vMax] = computed(() => activeSeg.value.range).value;
+const pctForIndicator = computed(() =>
+  snapToSegmentCenter.value
+    ? (vMin + vMax) / 2
+    : Math.min(Math.max(pct.value, vMin), vMax)
+);
+const local = computed(() => (pctForIndicator.value - vMin) / (vMax - vMin));
+const [tMin, tMax] = computed(() => activeSeg.value.tRange).value;
+const tIndicator = computed(() => tMin + (tMax - tMin) * local.value);
+const angIndicator = computed(() => Math.PI * (1 - tIndicator.value));
+const indicatorX = computed(() => centerX.value + radius.value * Math.cos(angIndicator.value));
+const indicatorY = computed(() => centerY.value - radius.value * Math.sin(angIndicator.value));
+
+const levelSize = computed(() => size.value * 0.12);
+const indicatorRadius = computed(() => Math.max(8, size.value * 0.04));
+const indicatorStroke = computed(() => Math.max(2.5, size.value * 0.015));
+</script>

package/src/ui/toggle.vue

@@ -1,69 +1,69 @@
-<script setup lang="ts">
-import { computed, useAttrs } from 'vue';
-import { useVModel } from '@vueuse/core';
-import { cn } from './utils';
-import Label from './label.vue';
-import { Toggle } from '@/shadcn/toggle';
-
-const props = defineProps({
-  modelValue: Boolean,
-  variant: {
-    type: String,
-    default: 'default',
-    validator: (v: string) => ['default', 'outline'].includes(v),
-  },
-  size: {
-    type: String,
-    default: 'default',
-    validator: (v: string) => ['default', 'sm', 'lg'].includes(v),
-  },
-  label: String,
-  id: String,
-  disabled: Boolean,
-  ariaLabel: String,
-  class: String,
-})
-
-const emit = defineEmits(['update:modelValue']);
-const attrs = useAttrs();
-const pressed = useVModel(props, 'modelValue', emit);
-
-const baseClass =
-  'inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*=\'size-\'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap';
-
-const variantClasses = {
-  default: 'bg-transparent',
-  outline: 'border bg-border bg-transparent hover:bg-accent hover:text-accent-foreground',
-};
-const sizeClasses = {
-  default: 'h-9 px-2 min-w-9',
-  sm: 'h-8 px-1.5 min-w-8',
-  lg: 'h-10 px-2.5 min-w-10',
-};
-
-const toggleClass = computed(() =>
-  cn(
-    baseClass,
-    variantClasses[props.variant],
-    sizeClasses[props.size],
-    props.class,
-  ),
-);
-</script>
-
-<template>
-  <div class="flex items-center gap-2">
-      <Toggle
-        :id="id"
-        data-slot="toggle"
-        :class="toggleClass"
-        :aria-label="ariaLabel"
-        :disabled="disabled"
-        v-bind="attrs"
-        v-model="pressed"
-      >
-        <slot />
-      </Toggle>
-    <Label v-if="label" :for="id">{{ label }}</Label>
-  </div>
-</template>
+<script setup lang="ts">
+import { computed, useAttrs } from 'vue';
+import { useVModel } from '@vueuse/core';
+import { cn } from './utils';
+import Label from './label.vue';
+import { Toggle } from '@/shadcn/toggle';
+
+const props = defineProps({
+  modelValue: Boolean,
+  variant: {
+    type: String,
+    default: 'default',
+    validator: (v: string) => ['default', 'outline'].includes(v),
+  },
+  size: {
+    type: String,
+    default: 'default',
+    validator: (v: string) => ['default', 'sm', 'lg'].includes(v),
+  },
+  label: String,
+  id: String,
+  disabled: Boolean,
+  ariaLabel: String,
+  class: String,
+})
+
+const emit = defineEmits(['update:modelValue']);
+const attrs = useAttrs();
+const pressed = useVModel(props, 'modelValue', emit);
+
+const baseClass =
+  'inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*=\'size-\'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap';
+
+const variantClasses = {
+  default: 'bg-transparent',
+  outline: 'border bg-border bg-transparent hover:bg-accent hover:text-accent-foreground',
+};
+const sizeClasses = {
+  default: 'h-9 px-2 min-w-9',
+  sm: 'h-8 px-1.5 min-w-8',
+  lg: 'h-10 px-2.5 min-w-10',
+};
+
+const toggleClass = computed(() =>
+  cn(
+    baseClass,
+    variantClasses[props.variant],
+    sizeClasses[props.size],
+    props.class,
+  ),
+);
+</script>
+
+<template>
+  <div class="flex items-center gap-2">
+      <Toggle
+        :id="id"
+        data-slot="toggle"
+        :class="toggleClass"
+        :aria-label="ariaLabel"
+        :disabled="disabled"
+        v-bind="attrs"
+        v-model="pressed"
+      >
+        <slot />
+      </Toggle>
+    <Label v-if="label" :for="id">{{ label }}</Label>
+  </div>
+</template>

package/src/ui/tooltip-content.vue

@@ -1,52 +1,52 @@
-<script setup lang="ts">
-import { defineProps, useSlots } from 'vue';
-import { cn } from './utils';
-import { TooltipContent } from '@/shadcn/tooltip';
-
-const props = defineProps({
-  sideOffset: { type: Number, default: 0 },
-  variant: { type: String, default: 'default' },
-  class: { type: String, default: '' },
-});
-const slots = useSlots();
-
-const tooltipVariants = {
-  default: 'bg-primary text-primary-foreground',
-  secondary: 'bg-secondary text-secondary-foreground',
-  outline: 'bg-popover text-popover-foreground border border-border shadow-md',
-  'soft-success': 'bg-green-50 text-green-700 border border-green-200 dark:bg-green-950 dark:text-green-300 dark:border-green-800',
-  'soft-warning': 'bg-yellow-50 text-yellow-700 border border-yellow-200 dark:bg-yellow-950 dark:text-yellow-300 dark:border-yellow-800',
-  'soft-danger': 'bg-red-50 text-red-700 border border-red-200 dark:bg-red-950 dark:text-red-300 dark:border-red-800',
-  'soft-info': 'bg-blue-50 text-blue-700 border border-blue-200 dark:bg-blue-950 dark:text-blue-300 dark:border-blue-800',
-  'soft-primary': 'bg-cyan-50 text-cyan-700 border border-cyan-200 dark:bg-cyan-950 dark:text-cyan-300 dark:border-cyan-800',
-  'soft-purple': 'bg-purple-50 text-purple-700 border border-purple-200 dark:bg-purple-950 dark:text-purple-300 dark:border-purple-800',
-  'soft-pink': 'bg-pink-50 text-pink-700 border border-pink-200 dark:bg-pink-950 dark:text-pink-300 dark:border-pink-800',
-  'soft-indigo': 'bg-indigo-50 text-indigo-700 border border-indigo-200 dark:bg-indigo-950 dark:text-indigo-300 dark:border-indigo-800',
-  'soft-orange': 'bg-orange-50 text-orange-700 border border-orange-200 dark:bg-orange-950 dark:text-orange-300 dark:border-orange-800',
-  'soft-teal': 'bg-teal-50 text-teal-700 border border-teal-200 dark:bg-teal-950 dark:text-teal-300 dark:border-teal-800',
-  'soft-neutral': 'bg-stone-50 text-stone-700 border border-stone-200 dark:bg-stone-900 dark:text-stone-300 dark:border-stone-700',
-};
-const tooltipArrowVariants = {
-  default: 'bg-primary fill-primary',
-  secondary: 'bg-secondary fill-secondary',
-  outline: 'bg-popover fill-popover border border-border',
-  'soft-success': 'bg-green-50 fill-green-50 border border-green-200 dark:bg-green-950 dark:fill-green-950 dark:border-green-800',
-  'soft-warning': 'bg-yellow-50 fill-yellow-50 border border-yellow-200 dark:bg-yellow-950 dark:fill-yellow-950 dark:border-yellow-800',
-  'soft-danger': 'bg-red-50 fill-red-50 border border-red-200 dark:bg-red-950 dark:fill-red-950 dark:border-red-800',
-  'soft-info': 'bg-blue-50 fill-blue-50 border border-blue-200 dark:bg-blue-950 dark:fill-blue-950 dark:border-blue-800',
-  'soft-primary': 'bg-cyan-50 fill-cyan-50 border border-cyan-200 dark:bg-cyan-950 dark:fill-cyan-950 dark:border-cyan-800',
-  'soft-purple': 'bg-purple-50 fill-purple-50 border border-purple-200 dark:bg-purple-950 dark:fill-purple-950 dark:border-purple-800',
-  'soft-pink': 'bg-pink-50 fill-pink-50 border border-pink-200 dark:bg-pink-950 dark:fill-pink-950 dark:border-pink-800',
-  'soft-indigo': 'bg-indigo-50 fill-indigo-50 border border-indigo-200 dark:bg-indigo-950 dark:fill-indigo-950 dark:border-indigo-800',
-  'soft-orange': 'bg-orange-50 fill-orange-50 border border-orange-200 dark:bg-orange-950 dark:fill-orange-950 dark:border-orange-800',
-  'soft-teal': 'bg-teal-50 fill-teal-50 border border-teal-200 dark:bg-teal-950 dark:fill-teal-950 dark:border-teal-800',
-  'soft-neutral': 'bg-stone-50 fill-stone-50 border border-stone-200 dark:bg-stone-900 dark:fill-stone-900 dark:border-stone-700',
-};
-</script>
-<template>
-  <TooltipContent data-slot="tooltip-content" :side-offset="props.sideOffset"
-    :class="cn(tooltipVariants[props.variant] || tooltipVariants.default, props.class, 'p-3 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit rounded-md px-3 py-1.5 text-xs text-balance')"
-    v-bind="props">
-    <slot />
-  </TooltipContent>
-</template>
+<script setup lang="ts">
+import { defineProps, useSlots } from 'vue';
+import { cn } from './utils';
+import { TooltipContent } from '@/shadcn/tooltip';
+
+const props = defineProps({
+  sideOffset: { type: Number, default: 0 },
+  variant: { type: String, default: 'default' },
+  class: { type: String, default: '' },
+});
+const slots = useSlots();
+
+const tooltipVariants = {
+  default: 'bg-primary text-primary-foreground',
+  secondary: 'bg-secondary text-secondary-foreground',
+  outline: 'bg-popover text-popover-foreground border border-border shadow-md',
+  'soft-success': 'bg-green-50 text-green-700 border border-green-200 dark:bg-green-950 dark:text-green-300 dark:border-green-800',
+  'soft-warning': 'bg-yellow-50 text-yellow-700 border border-yellow-200 dark:bg-yellow-950 dark:text-yellow-300 dark:border-yellow-800',
+  'soft-danger': 'bg-red-50 text-red-700 border border-red-200 dark:bg-red-950 dark:text-red-300 dark:border-red-800',
+  'soft-info': 'bg-blue-50 text-blue-700 border border-blue-200 dark:bg-blue-950 dark:text-blue-300 dark:border-blue-800',
+  'soft-primary': 'bg-cyan-50 text-cyan-700 border border-cyan-200 dark:bg-cyan-950 dark:text-cyan-300 dark:border-cyan-800',
+  'soft-purple': 'bg-purple-50 text-purple-700 border border-purple-200 dark:bg-purple-950 dark:text-purple-300 dark:border-purple-800',
+  'soft-pink': 'bg-pink-50 text-pink-700 border border-pink-200 dark:bg-pink-950 dark:text-pink-300 dark:border-pink-800',
+  'soft-indigo': 'bg-indigo-50 text-indigo-700 border border-indigo-200 dark:bg-indigo-950 dark:text-indigo-300 dark:border-indigo-800',
+  'soft-orange': 'bg-orange-50 text-orange-700 border border-orange-200 dark:bg-orange-950 dark:text-orange-300 dark:border-orange-800',
+  'soft-teal': 'bg-teal-50 text-teal-700 border border-teal-200 dark:bg-teal-950 dark:text-teal-300 dark:border-teal-800',
+  'soft-neutral': 'bg-stone-50 text-stone-700 border border-stone-200 dark:bg-stone-900 dark:text-stone-300 dark:border-stone-700',
+};
+const tooltipArrowVariants = {
+  default: 'bg-primary fill-primary',
+  secondary: 'bg-secondary fill-secondary',
+  outline: 'bg-popover fill-popover border border-border',
+  'soft-success': 'bg-green-50 fill-green-50 border border-green-200 dark:bg-green-950 dark:fill-green-950 dark:border-green-800',
+  'soft-warning': 'bg-yellow-50 fill-yellow-50 border border-yellow-200 dark:bg-yellow-950 dark:fill-yellow-950 dark:border-yellow-800',
+  'soft-danger': 'bg-red-50 fill-red-50 border border-red-200 dark:bg-red-950 dark:fill-red-950 dark:border-red-800',
+  'soft-info': 'bg-blue-50 fill-blue-50 border border-blue-200 dark:bg-blue-950 dark:fill-blue-950 dark:border-blue-800',
+  'soft-primary': 'bg-cyan-50 fill-cyan-50 border border-cyan-200 dark:bg-cyan-950 dark:fill-cyan-950 dark:border-cyan-800',
+  'soft-purple': 'bg-purple-50 fill-purple-50 border border-purple-200 dark:bg-purple-950 dark:fill-purple-950 dark:border-purple-800',
+  'soft-pink': 'bg-pink-50 fill-pink-50 border border-pink-200 dark:bg-pink-950 dark:fill-pink-950 dark:border-pink-800',
+  'soft-indigo': 'bg-indigo-50 fill-indigo-50 border border-indigo-200 dark:bg-indigo-950 dark:fill-indigo-950 dark:border-indigo-800',
+  'soft-orange': 'bg-orange-50 fill-orange-50 border border-orange-200 dark:bg-orange-950 dark:fill-orange-950 dark:border-orange-800',
+  'soft-teal': 'bg-teal-50 fill-teal-50 border border-teal-200 dark:bg-teal-950 dark:fill-teal-950 dark:border-teal-800',
+  'soft-neutral': 'bg-stone-50 fill-stone-50 border border-stone-200 dark:bg-stone-900 dark:fill-stone-900 dark:border-stone-700',
+};
+</script>
+<template>
+  <TooltipContent data-slot="tooltip-content" :side-offset="props.sideOffset"
+    :class="cn(tooltipVariants[props.variant] || tooltipVariants.default, props.class, 'p-3 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit rounded-md px-3 py-1.5 text-xs text-balance')"
+    v-bind="props">
+    <slot />
+  </TooltipContent>
+</template>

package/src/ui/tooltip-provider.vue

@@ -1,13 +1,13 @@
-<script setup lang="ts">
-import { useAttrs, defineProps } from 'vue';
-import { TooltipProvider } from '@/shadcn/tooltip';
-const props = defineProps({
-  delayDuration: { type: Number, default: 0 },
-});
-const attrs = useAttrs();
-</script>
-<template>
-  <TooltipProvider :delay-duration="props.delayDuration" v-bind="attrs">
-    <slot />
-  </TooltipProvider>
-</template>
+<script setup lang="ts">
+import { useAttrs, defineProps } from 'vue';
+import { TooltipProvider } from '@/shadcn/tooltip';
+const props = defineProps({
+  delayDuration: { type: Number, default: 0 },
+});
+const attrs = useAttrs();
+</script>
+<template>
+  <TooltipProvider :delay-duration="props.delayDuration" v-bind="attrs">
+    <slot />
+  </TooltipProvider>
+</template>

package/src/ui/tooltip-root.vue

@@ -1,9 +1,9 @@
-<script setup lang="ts">
-import { useAttrs } from 'vue';
-const attrs = useAttrs();
-</script>
-<template>
-  <div data-slot="tooltip" v-bind="attrs">
-    <slot />
-  </div>
-</template>
+<script setup lang="ts">
+import { useAttrs } from 'vue';
+const attrs = useAttrs();
+</script>
+<template>
+  <div data-slot="tooltip" v-bind="attrs">
+    <slot />
+  </div>
+</template>

package/src/ui/tooltip-trigger.vue

@@ -1,13 +1,13 @@
-
-<script setup lang="ts">
-import TooltipTrigger from "@/shadcn/tooltip/TooltipTrigger.vue";
-import { defineProps } from "vue";
-const props = defineProps<{ asChild?: boolean }>();
-</script>
-
-<template>
-  <slot v-if="props.asChild" />
-  <TooltipTrigger v-else data-slot="tooltip-trigger" v-bind="props">
-    <slot />
-  </TooltipTrigger>
-</template>
+
+<script setup lang="ts">
+import TooltipTrigger from "@/shadcn/tooltip/TooltipTrigger.vue";
+import { defineProps } from "vue";
+const props = defineProps<{ asChild?: boolean }>();
+</script>
+
+<template>
+  <slot v-if="props.asChild" />
+  <TooltipTrigger v-else data-slot="tooltip-trigger" v-bind="props">
+    <slot />
+  </TooltipTrigger>
+</template>

package/src/ui/tooltip.vue

@@ -1,22 +1,22 @@
-<script setup lang="ts">
-import { defineProps, useSlots } from 'vue';
-import TooltipProvider from './tooltip-provider.vue';
-import { Tooltip } from '@/shadcn/tooltip';
-import { cn } from './utils';
-
-const props = defineProps({
-  sideOffset: { type: Number, default: 0 },
-  variant: { type: String, default: 'default' },
-  class: { type: String, default: '' },
-  delayDuration: { type: Number, default: 0 },
-});
-const slots = useSlots();
-</script>
-
-<template>
-  <TooltipProvider :delay-duration="props.delayDuration">
-    <Tooltip data-slot="tooltip" v-bind="props">
-        <slot />
-    </Tooltip>
-  </TooltipProvider>
-</template>
+<script setup lang="ts">
+import { defineProps, useSlots } from 'vue';
+import TooltipProvider from './tooltip-provider.vue';
+import { Tooltip } from '@/shadcn/tooltip';
+import { cn } from './utils';
+
+const props = defineProps({
+  sideOffset: { type: Number, default: 0 },
+  variant: { type: String, default: 'default' },
+  class: { type: String, default: '' },
+  delayDuration: { type: Number, default: 0 },
+});
+const slots = useSlots();
+</script>
+
+<template>
+  <TooltipProvider :delay-duration="props.delayDuration">
+    <Tooltip data-slot="tooltip" v-bind="props">
+        <slot />
+    </Tooltip>
+  </TooltipProvider>
+</template>