@bl33dz/fa814698dcde12f86a37ac31dd3aedf9 1.0.0

package/src/ui/tab-content.vue

@@ -0,0 +1,28 @@
+<script lang="ts" setup>
+import { cn } from './utils';
+import { defineProps } from 'vue';
+import { TabsContent } from '@/shadcn/tabs';
+
+const props = defineProps({
+  variant: {
+    type: String,
+    default: 'default',
+  },
+});
+</script>
+
+<template>
+  <TabsContent
+    data-slot="tabs-content"
+    :class="cn(
+      'mt-4 outline-none',
+      'focus-visible:ring-2 focus-visible:ring-primary/20 focus-visible:ring-offset-2',
+      props.variant === 'card' && 'p-4 border rounded-lg',
+      props.variant === 'minimal' && 'mt-2',
+      $attrs.class
+    )"
+    v-bind="{ ...$attrs, ...props }"
+  >
+    <slot />
+  </TabsContent>
+</template>

package/src/ui/tab-list.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { cn } from './utils';
+import { defineProps, useAttrs } from 'vue';
+import { TabsList } from '@/shadcn/tabs';
+
+const props = defineProps({
+  variant: {
+    type: String,
+    default: 'default',
+  },
+});
+const attrs = useAttrs();
+</script>
+
+<template>
+  <TabsList
+    data-slot="tabs-list"
+    :class="cn(
+      'inline-flex items-center justify-start border-b border-border bg-transparent',
+      '[&:has(.corner-cut-trigger)]:border-primary',
+      '[&:has(.corner-cut-trigger)]:gap-0 [&:has(.corner-cut-trigger)]:-space-x-[1px]',
+      props.variant === 'grid' && 'grid w-full',
+      props.variant === 'vertical' && 'flex-col h-auto w-48 border-b-0 border-r',
+      props.variant === 'inline' && 'h-10 items-center justify-start',
+      attrs.class
+    )"
+    v-bind="{ ...attrs, ...props }"
+  >
+    <slot />
+  </TabsList>
+</template>

package/src/ui/tab-panel.vue

@@ -0,0 +1,19 @@
+<template>
+  <div v-show="active" class="mt-2">
+    <slot />
+  </div>
+</template>
+
+<script setup>
+import { defineProps } from 'vue';
+const props = defineProps({
+  value: {
+    type: [String, Number],
+    required: true,
+  },
+  active: {
+    type: Boolean,
+    default: false,
+  },
+});
+</script>

package/src/ui/tab-trigger.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { cn } from './utils';
+import { defineProps } from 'vue';
+import { TabsTrigger } from '@/shadcn/tabs';
+
+const props = defineProps({
+  variant: {
+    type: String,
+    default: 'default',
+  },
+});
+</script>
+
+<template>
+  <TabsTrigger
+    data-slot="tabs-trigger"
+    :class="cn(
+      'relative inline-flex items-center justify-center gap-2 px-4 py-2 transition-all duration-200 ease-out',
+      'min-w-0 max-w-48 w-auto shrink-0',
+      'text-muted-foreground hover:text-foreground',
+      'border-b-2 border-transparent',
+      'data-[state=active]:text-primary data-[state=active]:border-primary',
+      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/20 focus-visible:ring-offset-2',
+      'disabled:pointer-events-none disabled:opacity-50',
+      '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+      '[&>span]:truncate [&>span]:block',
+      props.variant === 'vertical' && 'w-full justify-start border-b-0 border-r-2',
+      $attrs.class
+    )"
+    v-bind="{ ...$attrs, ...props }"
+  >
+    <slot />
+  </TabsTrigger>
+</template>

package/src/ui/tab.vue

@@ -0,0 +1,30 @@
+<template>
+  <button
+    class="inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow"
+    :class="{ 'bg-background text-foreground shadow': active }"
+    :disabled="disabled"
+    @click="$emit('select', value)"
+    type="button"
+  >
+    <slot />
+  </button>
+</template>
+
+<script setup>
+import { defineProps, defineEmits } from 'vue';
+const props = defineProps({
+  value: {
+    type: [String, Number],
+    required: true,
+  },
+  active: {
+    type: Boolean,
+    default: false,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+const emit = defineEmits(['select']);
+</script>

package/src/ui/table-body.vue

@@ -0,0 +1,16 @@
+<template>
+  <tbody data-slot="table-body" :class="bodyClass">
+    <slot />
+  </tbody>
+</template>
+
+<script setup lang="ts">
+import { cn } from './utils';
+const props = defineProps({
+  class: {
+    type: String,
+    default: '',
+  },
+});
+const bodyClass = cn('[&_tr:last-child]:border-0', props.class);
+</script>

package/src/ui/table-caption.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { cn } from './utils';
+
+defineProps({
+  class: {
+    type: String,
+    default: '',
+  },
+});
+</script>
+
+<template>
+  <caption
+    data-slot="table-caption"
+    :class="cn('text-muted-foreground mt-4 text-sm', $attrs.class)"
+    v-bind="$attrs"
+  >
+    <slot />
+  </caption>
+</template>

package/src/ui/table-cell.vue

@@ -0,0 +1,16 @@
+<template>
+  <td data-slot="table-cell" :class="cellClass">
+    <slot />
+  </td>
+</template>
+
+<script setup lang="ts">
+import { cn } from './utils';
+const props = defineProps({
+  class: {
+    type: String,
+    default: '',
+  },
+});
+const cellClass = cn('p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]', props.class);
+</script>

package/src/ui/table-footer.vue

@@ -0,0 +1,16 @@
+<template>
+  <tfoot data-slot="table-footer" :class="footerClass">
+    <slot />
+  </tfoot>
+</template>
+
+<script setup lang="ts">
+import { cn } from './utils';
+const props = defineProps({
+  class: {
+    type: String,
+    default: '',
+  },
+});
+const footerClass = cn('bg-muted/50 border-t font-medium [&>tr]:last:border-b-0', props.class);
+</script>

package/src/ui/table-header.vue

@@ -0,0 +1,132 @@
+<template>
+  <th
+    ref="headerRef"
+    data-slot="table-header"
+    :class="headerClass"
+    :tabindex="sortable ? 0 : undefined"
+    :role="sortable ? 'button' : undefined"
+    :aria-sort="ariaSort"
+    @click="sortable ? handleClick : undefined"
+    @keydown="sortable ? handleKeyDown : undefined"
+    :style="headerStyle"
+  >
+    <div class="flex items-center">
+      <slot />
+      <component v-if="sortable" :is="sortIcon" />
+    </div>
+    <div
+      v-if="resizable"
+      class="absolute right-0 top-0 w-1 h-full cursor-col-resize bg-transparent hover:bg-blue-500/50 transition-colors opacity-0 group-hover:opacity-100"
+      @mousedown="handleMouseDown"
+    />
+  </th>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, defineEmits } from 'vue';
+import { cn } from './utils';
+import { ArrowUpDown, ArrowUp, ArrowDown } from 'lucide-vue-next';
+
+const props = defineProps({
+  sortable: Boolean,
+  sortDirection: {
+    type: String,
+    default: null,
+  },
+  resizable: Boolean,
+  width: Number,
+  minWidth: {
+    type: Number,
+    default: 100,
+  },
+  maxWidth: {
+    type: Number,
+    default: 500,
+  },
+  class: {
+    type: String,
+    default: '',
+  },
+});
+
+const headerRef = ref(null);
+const emit = defineEmits(['sort', 'resize']);
+const isResizing = ref(false);
+const currentWidth = ref(props.width || 150);
+
+watch(() => props.width, (val) => {
+  if (val) currentWidth.value = val;
+});
+
+const headerClass = computed(() =>
+  cn(
+    'text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+    props.sortable && 'cursor-pointer select-none hover:bg-muted/50 focus-visible:bg-muted/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 transition-colors',
+    'relative group',
+    props.class
+  )
+);
+
+const ariaSort = computed(() => {
+  if (!props.sortable) return undefined;
+  if (props.sortDirection === 'asc') return 'ascending';
+  if (props.sortDirection === 'desc') return 'descending';
+  return 'none';
+});
+
+import { h } from 'vue';
+const sortIcon = computed(() => {
+  if (!props.sortable) return null;
+  switch (props.sortDirection) {
+    case 'asc':
+      return h(ArrowUp, { class: 'ml-2 h-4 w-4' });
+    case 'desc':
+      return h(ArrowDown, { class: 'ml-2 h-4 w-4' });
+    default:
+      return h(ArrowUpDown, { class: 'ml-2 h-4 w-4 opacity-50' });
+  }
+});
+
+const headerStyle = computed(() => {
+  return {
+    width: props.resizable ? currentWidth.value + 'px' : (props.width ? props.width + 'px' : undefined),
+    minWidth: props.resizable ? props.minWidth + 'px' : undefined,
+    maxWidth: props.resizable ? props.maxWidth + 'px' : undefined,
+  };
+});
+
+function handleClick() {
+  if (props.sortable && !isResizing.value) {
+    emit('sort');
+  }
+}
+
+function handleKeyDown(e) {
+  if (props.sortable && (e.key === 'Enter' || e.key === ' ')) {
+    e.preventDefault();
+    emit('sort');
+  }
+}
+
+function handleMouseDown(e) {
+  if (!props.resizable) return;
+  e.preventDefault();
+  isResizing.value = true;
+  const startX = e.clientX;
+  const startWidth = currentWidth.value;
+
+  function onMouseMove(ev) {
+    const deltaX = ev.clientX - startX;
+    const newWidth = Math.min(props.maxWidth, Math.max(props.minWidth, startWidth + deltaX));
+    currentWidth.value = newWidth;
+    emit('resize', newWidth);
+  }
+  function onMouseUp() {
+    isResizing.value = false;
+    document.removeEventListener('mousemove', onMouseMove);
+    document.removeEventListener('mouseup', onMouseUp);
+  }
+  document.addEventListener('mousemove', onMouseMove);
+  document.addEventListener('mouseup', onMouseUp);
+}
+</script>

package/src/ui/table-row.vue

@@ -0,0 +1,16 @@
+<template>
+  <tr data-slot="table-row" :class="rowClass">
+    <slot />
+  </tr>
+</template>
+
+<script setup lang="ts">
+import { cn } from './utils';
+const props = defineProps({
+  class: {
+    type: String,
+    default: '',
+  },
+});
+const rowClass = cn('hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors', props.class);
+</script>

package/src/ui/table.vue

@@ -0,0 +1,55 @@
+<template>
+  <div data-slot="table-container" class="relative w-full overflow-x-auto">
+    <table data-slot="table" :class="tableClass">
+      <!-- Table caption slot -->
+      <slot name="caption" />
+
+      <!-- Auto-wrap first TableRow in thead, rest in tbody -->
+      <thead v-if="rows.length" data-slot="table-head" class="[&_tr]:border-b">
+        <component :is="rows[0]" />
+      </thead>
+      <tbody v-if="rows.length > 1" data-slot="table-body" class="[&_tr:last-child]:border-0">
+        <template v-for="(row, i) in rows.slice(1)" :key="i">
+          <component :is="row" />
+        </template>
+      </tbody>
+
+      <!-- Render any other default slot content (e.g., TableBody, TableCaption, etc.) -->
+      <slot />
+    </table>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, useSlots } from 'vue';
+import { cn } from './utils';
+
+const props = defineProps({
+  resizable: {
+    type: Boolean,
+    default: false,
+  },
+  class: {
+    type: String,
+    default: '',
+  },
+});
+
+const slots = useSlots();
+const rows = computed(() => {
+  const vnodes = slots.default ? slots.default() : [];
+  // Vue SFC: TableRow is a functional component, so check type.name or type.__name
+  return vnodes.filter(v => {
+    const type = v.type;
+    return type && (type.name === 'TableRow' || type.__name === 'TableRow');
+  });
+});
+
+const tableClass = computed(() =>
+  cn(
+    'w-full caption-bottom text-sm',
+    props.resizable && 'table-fixed',
+    props.class
+  )
+);
+</script>

package/src/ui/tabs.vue

@@ -0,0 +1,33 @@
+<script setup>
+
+import { cn } from './utils';
+import { defineProps, useAttrs } from 'vue';
+import { Tabs } from '@/shadcn/tabs';
+
+const props = defineProps({
+  variant: {
+    type: String,
+    default: 'default',
+  },
+  orientation: {
+    type: String,
+    default: 'horizontal',
+  },
+});
+
+const attrs = useAttrs();
+</script>
+
+<template>
+  <Tabs
+    data-slot="tabs"
+    :class="cn(
+      'flex flex-col',
+      props.variant === 'vertical' && 'flex-row',
+      attrs.class
+    )"
+    v-bind="{ ...attrs, ...props }"
+  >
+    <slot />
+  </Tabs>
+</template>

package/src/ui/textarea.vue

@@ -0,0 +1,91 @@
+<template>
+  <div v-if="label" class="space-y-2">
+    <div class="flex items-center gap-2">
+      <component v-if="icon" :is="icon" class="h-4 w-4" />
+      <Label v-if="label" :for="id">{{ label }}</Label>
+    </div>
+    <textarea
+      :id="id"
+      data-slot="textarea"
+      :class="cn(
+        'resize-none border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive flex field-sizing-content min-h-16 w-full rounded-md border bg-input-background px-3 py-2 text-base transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+        validationState === 'error' && 'border-red-500 focus:border-red-500 focus:ring-red-500',
+        validationState === 'success' && 'border-green-500 focus:border-green-500 focus:ring-green-500',
+        $attrs.class
+      )"
+      v-bind="$attrs"
+      :disabled="disabled"
+      :readonly="readonly"
+      :value="modelValue"
+      @input="$emit('update:modelValue', $event.target.value)"
+    />
+    <p v-if="validationState === 'error' && validationText" class="text-sm text-red-600 flex items-center gap-1">
+      <AlertCircle class="h-4 w-4" />
+      {{ validationText }}
+    </p>
+    <p v-else-if="validationState === 'success' && validationText" class="text-sm text-green-600 flex items-center gap-1">
+      <CheckCircle class="h-4 w-4" />
+      {{ validationText }}
+    </p>
+  </div>
+  <textarea
+    v-else
+    data-slot="textarea"
+    :class="cn(
+      'resize-none border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive flex field-sizing-content min-h-16 w-full rounded-md border bg-input-background px-3 py-2 text-base transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+      $attrs.class
+    )"
+    v-bind="$attrs"
+    :disabled="disabled"
+    :readonly="readonly"
+    :value="modelValue"
+    @input="$emit('update:modelValue', $event.target.value)"
+  />
+</template>
+
+
+<script setup>
+import { defineProps, useAttrs, defineEmits } from 'vue';
+import { AlertCircle, CheckCircle } from 'lucide-vue-next';
+import Label from './label.vue';
+import { cn } from '@/lib/utils';
+
+const $attrs = useAttrs();
+
+const props = defineProps({
+  modelValue: {
+    type: [String, Number],
+    default: '',
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+  label: {
+    type: String,
+    default: '',
+  },
+  icon: {
+    type: [Object, Function, String],
+    default: null,
+  },
+  id: {
+    type: String,
+    default: undefined,
+  },
+  validationState: {
+    type: String,
+    default: undefined,
+  },
+  validationText: {
+    type: String,
+    default: '',
+  },
+});
+
+const emit = defineEmits(['update:modelValue']);
+</script>

package/src/ui/threat-gauge.vue

@@ -0,0 +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>