@geniusdynamics/ns8-ui-lib 1.0.4 → 1.0.6

package/src/components/NS/cards/NSSystemInfoCard.vue

@@ -1,56 +1,68 @@
 <script setup lang="ts">
-import { computed } from 'vue'
-import { HardDrive, Activity, CheckCircle, AlertCircle, Clock } from 'lucide-vue-next'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
-import { Progress } from '@/components/ui/progress'
-import { Badge } from '@/components/ui/badge'
-import { Button } from '@/components/ui/button'
-import { cn } from '@/lib/utils'
+import { computed } from "vue";
+import {
+  HardDrive,
+  Activity,
+  CheckCircle,
+  AlertCircle,
+  Clock,
+} from "lucide-vue-next";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Progress } from "@/components/ui/progress";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
 
 interface SystemMetrics {
-  totalSpace: string
-  usedSpace: string
-  freeSpace: string
-  usagePercentage: number
-  temperature?: string
-  loadAverage?: string[]
-  uptime?: string
-  processes?: number
+  totalSpace: string;
+  usedSpace: string;
+  freeSpace: string;
+  usagePercentage: number;
+  temperature?: string;
+  loadAverage?: string[];
+  uptime?: string;
+  processes?: number;
   memory?: {
-    total: string
-    used: string
-    free: string
-    percentage: number
-  }
+    total: string;
+    used: string;
+    free: string;
+    percentage: number;
+  };
   cpu?: {
-    cores: number
-    usage: number
-    frequency: string
-  }
+    cores: number;
+    usage: number;
+    frequency: string;
+  };
 }
 
 interface Props {
-  title?: string
-  description?: string
-  metrics?: SystemMetrics
-  loading?: boolean
-  refreshInterval?: number
-  showTemperature?: boolean
-  showLoadAverage?: boolean
-  showUptime?: boolean
-  showProcesses?: boolean
-  showMemory?: boolean
-  showCpu?: boolean
-  showStorage?: boolean
-  refreshable?: boolean
-  light?: boolean
-  maxHeight?: string
-  class?: string
+  title?: string;
+  description?: string;
+  metrics?: SystemMetrics;
+  loading?: boolean;
+  refreshInterval?: number;
+  showTemperature?: boolean;
+  showLoadAverage?: boolean;
+  showUptime?: boolean;
+  showProcesses?: boolean;
+  showMemory?: boolean;
+  showCpu?: boolean;
+  showStorage?: boolean;
+  refreshable?: boolean;
+  light?: boolean;
+  maxHeight?: string;
+  class?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  title: 'System Information',
-  description: 'Current system status and metrics',
+  title: "System Information",
+  description: "Current system status and metrics",
   loading: false,
   showTemperature: false,
   showLoadAverage: true,
@@ -61,83 +73,81 @@ const props = withDefaults(defineProps<Props>(), {
   showStorage: true,
   refreshable: true,
   light: false,
-})
+});
 
 const emit = defineEmits<{
-  refresh: []
-}>()
+  refresh: [];
+}>();
 
-const hasMetrics = computed(() => !!props.metrics)
+const hasMetrics = computed(() => !!props.metrics);
 
 const storageVariant = computed(() => {
-  if (!props.metrics?.usagePercentage) return 'default'
-  
-  const percentage = props.metrics.usagePercentage
-  if (percentage >= 90) return 'destructive'
-  if (percentage >= 80) return 'warning'
-  if (percentage >= 60) return 'default'
-  return 'success'
-})
+  if (!props.metrics?.usagePercentage) return "default";
+
+  const percentage = props.metrics.usagePercentage;
+  if (percentage >= 90) return "destructive";
+  if (percentage >= 80) return "warning";
+  if (percentage >= 60) return "default";
+  return "success";
+});
 
 const memoryVariant = computed(() => {
-  if (!props.metrics?.memory?.percentage) return 'default'
-  
-  const percentage = props.metrics.memory.percentage
-  if (percentage >= 90) return 'destructive'
-  if (percentage >= 80) return 'warning'
-  if (percentage >= 60) return 'default'
-  return 'success'
-})
+  if (!props.metrics?.memory?.percentage) return "default";
+
+  const percentage = props.metrics.memory.percentage;
+  if (percentage >= 90) return "destructive";
+  if (percentage >= 80) return "warning";
+  if (percentage >= 60) return "default";
+  return "success";
+});
 
 const cpuVariant = computed(() => {
-  if (!props.metrics?.cpu?.usage) return 'default'
-  
-  const usage = props.metrics.cpu.usage
-  if (usage >= 90) return 'destructive'
-  if (usage >= 80) return 'warning'
-  if (usage >= 60) return 'default'
-  return 'success'
-})
-
-const containerClasses = computed(() => {
-  return cn('w-full', props.class)
-})
+  if (!props.metrics?.cpu?.usage) return "default";
+
+  const usage = props.metrics.cpu.usage;
+  if (usage >= 90) return "destructive";
+  if (usage >= 80) return "warning";
+  if (usage >= 60) return "default";
+  return "success";
+});
 
 const cardClasses = computed(() => {
   return cn(
-    'transition-all duration-200 hover:shadow-md',
-    props.light ? 'bg-background/95' : 'bg-background'
-  )
-})
+    "transition-all duration-200 hover:shadow-md",
+    props.light ? "bg-background/95" : "bg-background",
+  );
+});
 
 const metricsGridClasses = computed(() => {
-  return cn('grid gap-4', {
-    'grid-cols-1': !props.showMemory && !props.showCpu && !props.showStorage,
-    'grid-cols-2': (props.showMemory && !props.showCpu && !props.showStorage) ||
-                       (!props.showMemory && props.showCpu && !props.showStorage) ||
-                       (!props.showMemory && !props.showCpu && props.showStorage),
-    'grid-cols-3': (props.showMemory && props.showCpu && !props.showStorage) ||
-                       (props.showMemory && !props.showCpu && props.showStorage) ||
-                       (!props.showMemory && props.showCpu && props.showStorage),
-    'lg:grid-cols-4': props.showMemory && props.showCpu && props.showStorage
-  })
-})
+  return cn("grid gap-4", {
+    "grid-cols-1": !props.showMemory && !props.showCpu && !props.showStorage,
+    "grid-cols-2":
+      (props.showMemory && !props.showCpu && !props.showStorage) ||
+      (!props.showMemory && props.showCpu && !props.showStorage) ||
+      (!props.showMemory && !props.showCpu && props.showStorage),
+    "grid-cols-3":
+      (props.showMemory && props.showCpu && !props.showStorage) ||
+      (props.showMemory && !props.showCpu && props.showStorage) ||
+      (!props.showMemory && props.showCpu && props.showStorage),
+    "lg:grid-cols-4": props.showMemory && props.showCpu && props.showStorage,
+  });
+});
 </script>
 
 <template>
   <Card :class="cardClasses">
-    <CardHeader class="pb-3">
-      <div class="flex items-center justify-between">
+    <CardHeader class="tw:pb-3">
+      <div class="tw:flex tw:items-center tw:justify-between">
         <div>
-          <CardTitle class="flex items-center gap-2">
-            <Activity class="h-5 w-5 text-primary" />
+          <CardTitle class="tw:flex tw:items-center tw:gap-2">
+            <Activity class="tw:h-5 tw:w-5 tw:text-primary" />
             {{ title }}
           </CardTitle>
           <CardDescription>
             {{ description }}
           </CardDescription>
         </div>
-        
+
         <!-- Refresh button -->
         <Button
           v-if="refreshable && !loading"
@@ -145,108 +155,126 @@ const metricsGridClasses = computed(() => {
           size="sm"
           @click="emit('refresh')"
         >
-          <Clock class="h-4 w-4" />
+          <Clock class="tw:h-4 tw:w-4" />
         </Button>
       </div>
     </CardHeader>
 
-    <CardContent class="space-y-4">
+    <CardContent class="tw:space-y-4">
       <!-- Loading state -->
-      <div v-if="loading" class="space-y-3">
-        <div class="space-y-2">
-          <div class="h-2 bg-secondary rounded-full" />
-          <div class="h-2 bg-secondary rounded-full" />
-          <div class="h-2 bg-secondary rounded-full" />
+      <div v-if="loading" class="tw:space-y-3">
+        <div class="tw:space-y-2">
+          <div class="tw:h-2 tw:bg-secondary tw:rounded-full" />
+          <div class="tw:h-2 tw:bg-secondary tw:rounded-full" />
+          <div class="tw:h-2 tw:bg-secondary tw:rounded-full" />
         </div>
       </div>
 
       <!-- System metrics -->
       <div v-else-if="hasMetrics" :class="metricsGridClasses">
         <!-- Storage metrics -->
-        <div v-if="showStorage" class="space-y-2">
-          <div class="flex items-center gap-2 text-sm font-medium">
-            <HardDrive class="h-4 w-4" />
+        <div v-if="showStorage" class="tw:space-y-2">
+          <div
+            class="tw:flex tw:items-center tw:gap-2 tw:text-sm tw:font-medium"
+          >
+            <HardDrive class="tw:h-4 tw:w-4" />
             Storage
           </div>
-          <Progress 
-            :value="metrics.usagePercentage" 
+          <Progress
+            :value="metrics.usagePercentage"
             :variant="storageVariant"
-            class="mb-2"
+            class="tw:mb-2"
           />
-          <div class="text-xs text-muted-foreground space-y-1">
+          <div class="tw:text-xs tw:text-muted-foreground tw:space-y-1">
             <div>Used: {{ metrics.usedSpace }} / {{ metrics.totalSpace }}</div>
             <div>Free: {{ metrics.freeSpace }}</div>
           </div>
         </div>
 
         <!-- Memory metrics -->
-        <div v-if="showMemory && metrics?.memory" class="space-y-2">
-          <div class="flex items-center gap-2 text-sm font-medium">
-            <Activity class="h-4 w-4" />
+        <div v-if="showMemory && metrics?.memory" class="tw:space-y-2">
+          <div
+            class="tw:flex tw:items-center tw:gap-2 tw:text-sm tw:font-medium"
+          >
+            <Activity class="tw:h-4 tw:w-4" />
             Memory
           </div>
-          <Progress 
-            :value="metrics.memory.percentage" 
+          <Progress
+            :value="metrics.memory.percentage"
             :variant="memoryVariant"
-            class="mb-2"
+            class="tw:mb-2"
           />
-          <div class="text-xs text-muted-foreground space-y-1">
-            <div>Used: {{ metrics.memory.used }} / {{ metrics.memory.total }}</div>
+          <div class="tw:text-xs tw:text-muted-foreground tw:space-y-1">
+            <div>
+              Used: {{ metrics.memory.used }} / {{ metrics.memory.total }}
+            </div>
             <div>Free: {{ metrics.memory.free }}</div>
           </div>
         </div>
 
         <!-- CPU metrics -->
-        <div v-if="showCpu && metrics?.cpu" class="space-y-2">
-          <div class="flex items-center gap-2 text-sm font-medium">
-            <Activity class="h-4 w-4" />
+        <div v-if="showCpu && metrics?.cpu" class="tw:space-y-2">
+          <div
+            class="tw:flex tw:items-center tw:gap-2 tw:text-sm tw:font-medium"
+          >
+            <Activity class="tw:h-4 tw:w-4" />
             CPU
           </div>
-          <Progress 
-            :value="metrics.cpu.usage" 
+          <Progress
+            :value="metrics.cpu.usage"
             :variant="cpuVariant"
-            class="mb-2"
+            class="tw:mb-2"
           />
-          <div class="text-xs text-muted-foreground space-y-1">
+          <div class="tw:text-xs tw:text-muted-foreground tw:space-y-1">
             <div>Usage: {{ metrics.cpu.usage }}%</div>
             <div>Cores: {{ metrics.cpu.cores }}</div>
-            <div v-if="metrics.cpu.frequency">Frequency: {{ metrics.cpu.frequency }}</div>
+            <div v-if="metrics.cpu.frequency">
+              Frequency: {{ metrics.cpu.frequency }}
+            </div>
           </div>
         </div>
       </div>
 
       <!-- Additional system info -->
-      <div v-if="hasMetrics" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3 pt-4 border-t">
+      <div
+        v-if="hasMetrics"
+        class="tw:grid tw:grid-cols-1 md:tw:grid-cols-2 lg:tw:grid-cols-4 tw:gap-3 tw:pt-4 tw:border-t"
+      >
         <!-- Temperature -->
         <div v-if="showTemperature && metrics?.temperature">
-          <div class="text-xs text-muted-foreground">Temperature</div>
-          <div class="text-sm font-medium">{{ metrics.temperature }}</div>
+          <div class="tw:text-xs tw:text-muted-foreground">Temperature</div>
+          <div class="tw:text-sm tw:font-medium">{{ metrics.temperature }}</div>
         </div>
 
         <!-- Load average -->
         <div v-if="showLoadAverage && metrics?.loadAverage">
-          <div class="text-xs text-muted-foreground">Load Average</div>
-          <div class="text-sm font-medium">{{ metrics.loadAverage.join(', ') }}</div>
+          <div class="tw:text-xs tw:text-muted-foreground">Load Average</div>
+          <div class="tw:text-sm tw:font-medium">
+            {{ metrics.loadAverage.join(", ") }}
+          </div>
         </div>
 
         <!-- Uptime -->
         <div v-if="showUptime && metrics?.uptime">
-          <div class="text-xs text-muted-foreground">Uptime</div>
-          <div class="text-sm font-medium">{{ metrics.uptime }}</div>
+          <div class="tw:text-xs tw:text-muted-foreground">Uptime</div>
+          <div class="tw:text-sm tw:font-medium">{{ metrics.uptime }}</div>
         </div>
 
         <!-- Processes -->
         <div v-if="showProcesses && metrics?.processes">
-          <div class="text-xs text-muted-foreground">Processes</div>
-          <div class="text-sm font-medium">{{ metrics.processes }}</div>
+          <div class="tw:text-xs tw:text-muted-foreground">Processes</div>
+          <div class="tw:text-sm tw:font-medium">{{ metrics.processes }}</div>
         </div>
       </div>
 
       <!-- No data state -->
-      <div v-if="!hasMetrics && !loading" class="flex items-center gap-3 text-muted-foreground">
-        <AlertCircle class="h-5 w-5" />
+      <div
+        v-if="!hasMetrics && !loading"
+        class="tw:flex tw:items-center tw:gap-3 tw:text-muted-foreground"
+      >
+        <AlertCircle class="tw:h-5 tw:w-5" />
         <span>No system metrics available</span>
       </div>
     </CardContent>
   </Card>
-</template>
+</template>

package/src/components/NS/cards/NSSystemdServiceCard.vue

@@ -125,16 +125,16 @@ const iconClass = computed(() => {
 
 <template>
   <Card :class="cardClasses">
-    <CardHeader class="pb-3">
-      <div class="flex items-center justify-between">
-        <CardTitle class="flex items-center gap-3">
+    <CardHeader class="tw:pb-3">
+      <div class="tw:flex tw:items-center tw:justify-between">
+        <CardTitle class="tw:flex tw:items-center tw:gap-3">
           <component
             v-if="icon"
             :is="icon"
             :class="iconClass"
           />
           <div>
-            <div class="text-lg font-semibold">{{ title }}</div>
+            <div class="tw:text-lg tw:font-semibold">{{ title }}</div>
             <CardDescription v-if="description">
               {{ description }}
             </CardDescription>
@@ -148,53 +148,53 @@ const iconClass = computed(() => {
       </div>
     </CardHeader>
 
-    <CardContent class="space-y-4">
+    <CardContent class="tw:space-y-4">
       <!-- Loading state -->
-      <div v-if="loading" class="space-y-3">
-        <Skeleton class="h-4 w-3/4" />
-        <Skeleton class="h-4 w-1/2" />
-        <Skeleton class="h-4 w-2/3" />
+      <div v-if="loading" class="tw:space-y-3">
+        <Skeleton class="tw:h-4 tw:w-3/4" />
+        <Skeleton class="tw:h-4 tw:w-1/2" />
+        <Skeleton class="tw:h-4 tw:w-2/3" />
       </div>
 
       <!-- Service details -->
-      <div v-else class="space-y-3">
+      <div v-else class="tw:space-y-3">
         <!-- Service name -->
-        <div v-if="serviceName" class="text-sm text-muted-foreground">
-          <span class="font-medium">Service:</span> {{ serviceName }}
+        <div v-if="serviceName" class="tw:text-sm tw:text-muted-foreground">
+          <span class="tw:font-medium">Service:</span> {{ serviceName }}
         </div>
 
         <!-- Uptime -->
-        <div v-if="showUptime && status?.uptime" class="flex items-center gap-2">
-          <Clock class="h-4 w-4 text-muted-foreground" />
-          <span class="text-sm">
-            <span class="font-medium">Uptime:</span> {{ status.uptime }}
+        <div v-if="showUptime && status?.uptime" class="tw:flex tw:items-center tw:gap-2">
+          <Clock class="tw:h-4 tw:w-4 tw:text-muted-foreground" />
+          <span class="tw:text-sm">
+            <span class="tw:font-medium">Uptime:</span> {{ status.uptime }}
           </span>
         </div>
 
         <!-- Last restart -->
-        <div v-if="status?.lastRestart" class="text-sm text-muted-foreground">
-          <span class="font-medium">Last restart:</span> {{ status.lastRestart }}
+        <div v-if="status?.lastRestart" class="tw:text-sm tw:text-muted-foreground">
+          <span class="tw:font-medium">Last restart:</span> {{ status.lastRestart }}
         </div>
 
         <!-- Metrics -->
-        <div v-if="showMetrics" class="grid grid-cols-2 gap-3">
-          <div v-if="status?.memory" class="text-sm">
-            <span class="font-medium">Memory:</span> {{ status.memory }}
+        <div v-if="showMetrics" class="tw:grid tw:grid-cols-2 tw:gap-3">
+          <div v-if="status?.memory" class="tw:text-sm">
+            <span class="tw:font-medium">Memory:</span> {{ status.memory }}
           </div>
-          <div v-if="status?.cpu" class="text-sm">
-            <span class="font-medium">CPU:</span> {{ status.cpu }}
+          <div v-if="status?.cpu" class="tw:text-sm">
+            <span class="tw:font-medium">CPU:</span> {{ status.cpu }}
           </div>
         </div>
 
         <!-- Custom status message -->
-        <div v-if="status?.status && status?.status !== statusText" class="text-sm">
+        <div v-if="status?.status && status?.status !== statusText" class="tw:text-sm">
           {{ status.status }}
         </div>
       </div>
 
       <!-- Action buttons -->
-      <div class="flex items-center justify-between pt-4 border-t">
-        <div class="flex gap-2">
+      <div class="tw:flex tw:items-center tw:justify-between tw:pt-4 tw:border-t">
+        <div class="tw:flex tw:gap-2">
           <Button
             v-if="status?.enabled && !status?.running"
             variant="default"
@@ -242,7 +242,7 @@ const iconClass = computed(() => {
           size="sm"
           @click="emit('view', serviceName)"
         >
-          <MoreHorizontal class="h-4 w-4" />
+          <MoreHorizontal class="tw:h-4 tw:w-4" />
         </Button>
       </div>
     </CardContent>

package/src/components/NS/checkbox/NSCheckbox.vue

@@ -47,8 +47,7 @@ const isChecked = computed({
       :required="required"
       :name="name"
       :value="value"
-      :class="cn(
-        'peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
+      :class="cn( 'peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
         {
           'border-destructive': errorMessage,
           'data-[state=checked]:bg-destructive data-[state=checked]:text-destructive-foreground': errorMessage
@@ -61,17 +60,16 @@ const isChecked = computed({
           'opacity-50': indeterminate
         })"
       >
-        <Check v-if="!indeterminate" class="h-4 w-4" />
-        <div v-else class="h-1 w-2 bg-current rounded-sm" />
+        <Check v-if="!indeterminate" class="tw:h-4 tw:w-4" />
+        <div v-else class="tw:h-1 tw:w-2 tw:bg-current tw:rounded-sm" />
       </CheckboxIndicator>
     </CheckboxRoot>
 
-    <div class="grid gap-1.5">
+    <div class="tw:grid tw:gap-1.5">
       <label
         v-if="label || $slots.label"
         :for="checkboxId"
-        :class="cn(
-          'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer',
+        :class="cn( 'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer',
           {
             'sr-only': hideLabel,
             'cursor-not-allowed': disabled,
@@ -93,7 +91,7 @@ const isChecked = computed({
 
       <p
         v-if="errorMessage"
-        class="text-sm text-destructive"
+        class="tw:text-sm tw:text-destructive"
       >
         {{ errorMessage }}
       </p>