@geniusdynamics/ns8-ui-lib 1.0.4 → 1.0.5

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>

package/src/components/NS/data-table/NSDataTable.vue

@@ -237,52 +237,52 @@ watch(() => props.currentPage, () => {
 <template>
   <div :class="containerClasses">
     <!-- Header with search and filters -->
-    <div class="flex items-center justify-between gap-4 mb-4">
-      <div class="flex items-center gap-2">
+    <div class="tw:flex tw:items-center tw:justify-between tw:gap-4 tw:mb-4">
+      <div class="tw:flex tw:items-center tw:gap-2">
         <!-- Search -->
-        <div v-if="searchable" class="relative">
-          <Search class="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+        <div v-if="searchable" class="tw:relative">
+          <Search class="tw:absolute tw:left-3 tw:top-1/2 tw:transform tw:-translate-y-1/2 tw:h-4 tw:w-4 tw:text-muted-foreground" />
           <Input
             :model-value="searchQuery"
             @update:model-value="handleSearch"
             placeholder="Search..."
-            class="pl-9 w-64"
+            class="tw:pl-9 tw:w-64"
           />
         </div>
 
         <!-- Filters -->
-        <div v-if="filterable" class="flex items-center gap-2">
-          <Filter class="h-4 w-4 text-muted-foreground" />
+        <div v-if="filterable" class="tw:flex tw:items-center tw:gap-2">
+          <Filter class="tw:h-4 tw:w-4 tw:text-muted-foreground" />
           <div v-for="column in columns.filter(c => c.filterable)" :key="column.key">
             <Input
               :model-value="filters[column.key]"
               @update:model-value="(value) => handleFilterChange(column.key, value)"
               :placeholder="`Filter ${column.label}...`"
-              class="w-32"
+              class="tw:w-32"
             />
           </div>
         </div>
       </div>
 
       <!-- Total count -->
-      <div v-if="showTotal" class="text-sm text-muted-foreground">
+      <div v-if="showTotal" class="tw:text-sm tw:text-muted-foreground">
         {{ processedData.length }} items total
       </div>
     </div>
 
     <!-- Table -->
-    <div class="rounded-md border">
+    <div class="tw:rounded-md tw:border">
       <Table :class="tableClasses">
         <TableHeader :class="headerClasses">
           <TableRow>
             <!-- Select all checkbox -->
-            <TableHead v-if="selectable" class="w-12">
+            <TableHead v-if="selectable" class="tw:w-12">
               <input
                 type="checkbox"
                 :checked="isAllSelected"
                 :indeterminate="isIndeterminate"
                 @change="toggleAllSelection"
-                class="rounded border-gray-300"
+                class="tw:rounded tw:border-gray-300"
               />
             </TableHead>
 
@@ -290,8 +290,7 @@ watch(() => props.currentPage, () => {
             <TableHead
               v-for="column in columns"
               :key="column.key"
-              :class="cn(
-                'relative',
+              :class="cn( 'relative',
                 {
                   'text-left': column.align === 'left' || !column.align,
                   'text-center': column.align === 'center',
@@ -302,18 +301,16 @@ watch(() => props.currentPage, () => {
               :style="{ width: column.width }"
               @click="handleSort(column)"
             >
-              <div class="flex items-center gap-1">
+              <div class="tw:flex tw:items-center tw:gap-1">
                 {{ column.label }}
-                <div v-if="column.sortable" class="flex flex-col">
+                <div v-if="column.sortable" class="tw:flex tw:flex-col">
                   <ChevronUp 
-                    :class="cn(
-                      'h-3 w-3',
+                    :class="cn( 'h-3 w-3',
                       sortColumn === column.key && sortDirection === 'asc' ? 'text-primary' : 'text-muted-foreground'
                     )" 
                   />
                   <ChevronDown 
-                    :class="cn(
-                      'h-3 w-3 -mt-1',
+                    :class="cn( 'h-3 w-3 -mt-1',
                       sortColumn === column.key && sortDirection === 'desc' ? 'text-primary' : 'text-muted-foreground'
                     )" 
                   />
@@ -322,8 +319,8 @@ watch(() => props.currentPage, () => {
             </TableHead>
 
             <!-- Actions column -->
-            <TableHead v-if="actions.length > 0" class="w-16">
-              <span class="sr-only">Actions</span>
+            <TableHead v-if="actions.length > 0" class="tw:w-16">
+              <span class="tw:sr-only">Actions</span>
             </TableHead>
           </TableRow>
         </TableHeader>
@@ -331,9 +328,9 @@ watch(() => props.currentPage, () => {
         <TableBody :class="bodyClasses">
           <!-- Loading state -->
           <TableRow v-if="loading">
-            <TableCell :colspan="columns.length + (selectable ? 1 : 0) + (actions.length > 0 ? 1 : 0)" class="text-center py-8">
-              <div class="flex items-center justify-center space-x-2">
-                <div class="animate-spin rounded-full h-4 w-4 border-b-2 border-primary"></div>
+            <TableCell :colspan="columns.length + (selectable ? 1 : 0) + (actions.length > 0 ? 1 : 0)" class="tw:text-center tw:py-8">
+              <div class="tw:flex tw:items-center tw:justify-center tw:space-x-2">
+                <div class="tw:animate-spin tw:rounded-full tw:h-4 tw:w-4 tw:border-b-2 tw:border-primary"></div>
                 <span>{{ loadingMessage }}</span>
               </div>
             </TableCell>
@@ -341,7 +338,7 @@ watch(() => props.currentPage, () => {
 
           <!-- Empty state -->
           <TableRow v-else-if="currentPageData.length === 0">
-            <TableCell :colspan="columns.length + (selectable ? 1 : 0) + (actions.length > 0 ? 1 : 0)" class="text-center py-8">
+            <TableCell :colspan="columns.length + (selectable ? 1 : 0) + (actions.length > 0 ? 1 : 0)" class="tw:text-center tw:py-8">
               {{ emptyMessage }}
             </TableCell>
           </TableRow>
@@ -351,19 +348,18 @@ watch(() => props.currentPage, () => {
             v-else
             v-for="(row, index) in currentPageData"
             :key="`row-${index}`"
-            :class="{
-              'selected': selectedRows.includes(row)
+            :class="{ 'selected': selectedRows.includes(row)
             }"
             @click="handleRowClick(row, index)"
-            class="cursor-pointer"
+            class="tw:cursor-pointer"
           >
             <!-- Selection checkbox -->
-            <TableCell v-if="selectable" class="w-12">
+            <TableCell v-if="selectable" class="tw:w-12">
               <input
                 type="checkbox"
                 :checked="selectedRows.includes(row)"
                 @change="toggleSelection(row)"
-                class="rounded border-gray-300"
+                class="tw:rounded tw:border-gray-300"
               />
             </TableCell>
 
@@ -371,9 +367,7 @@ watch(() => props.currentPage, () => {
             <TableCell
               v-for="column in columns"
               :key="column.key"
-              :class="cn(
-                {
-                  'text-left': column.align === 'left' || !column.align,
+              :class="cn( { 'text-left': column.align === 'left' || !column.align,
                   'text-center': column.align === 'center',
                   'text-right': column.align === 'right'
                 }
@@ -397,7 +391,7 @@ watch(() => props.currentPage, () => {
 
             <!-- Actions -->
             <TableCell v-if="actions.length > 0">
-              <div class="flex items-center justify-end space-x-1">
+              <div class="tw:flex tw:items-center tw:justify-end tw:space-x-1">
                 <Button
                   v-for="action in actions"
                   :key="action.key"
@@ -406,7 +400,7 @@ watch(() => props.currentPage, () => {
                   :disabled="action.disabled ? action.disabled(row) : false"
                   @click.stop="action.onClick(row, index)"
                 >
-                  <component v-if="action.icon" :is="action.icon" class="h-4 w-4" />
+                  <component v-if="action.icon" :is="action.icon" class="tw:h-4 tw:w-4" />
                   {{ action.label }}
                 </Button>
               </div>
@@ -417,14 +411,14 @@ watch(() => props.currentPage, () => {
     </div>
 
     <!-- Pagination -->
-    <div v-if="pagination" class="mt-4">
+    <div v-if="pagination" class="tw:mt-4">
       <slot name="pagination" :current-page="currentPage" :total-items="processedData.length">
         <!-- Built-in pagination placeholder -->
-        <div class="flex items-center justify-between">
-          <div class="text-sm text-muted-foreground">
+        <div class="tw:flex tw:items-center tw:justify-between">
+          <div class="tw:text-sm tw:text-muted-foreground">
             Showing {{ (currentPage - 1) * itemsPerPage + 1 }} to {{ Math.min(currentPage * itemsPerPage, processedData.length) }} of {{ processedData.length }} items
           </div>
-          <div class="text-sm text-muted-foreground">
+          <div class="tw:text-sm tw:text-muted-foreground">
             Page {{ currentPage }} of {{ Math.ceil(processedData.length / itemsPerPage) }}
           </div>
         </div>

package/src/components/NS/empty-state/NSEmptyState.vue

@@ -148,7 +148,7 @@ const descriptionClasses = computed(() => {
 <template>
   <div :class="containerClasses">
     <!-- Icon section -->
-    <div class="mb-4">
+    <div class="tw:mb-4">
       <slot name="icon">
         <!-- Lottie animation if provided -->
         <NSLottieAnimation
@@ -185,12 +185,12 @@ const descriptionClasses = computed(() => {
     </div>
 
     <!-- Actions section -->
-    <div v-if="$slots.actions" class="mt-4">
+    <div v-if="$slots.actions" class="tw:mt-4">
       <slot name="actions" />
     </div>
 
     <!-- Extra content section -->
-    <div v-if="$slots.extra" class="mt-6">
+    <div v-if="$slots.extra" class="tw:mt-6">
       <slot name="extra" />
     </div>
   </div>

package/src/components/NS/inline-notification/NSInlineNotification.vue

@@ -96,30 +96,30 @@ const showCloseButtonVisible = computed(() => props.showCloseButton && !hasLoadi
     <!-- Icon -->
     <component
       :is="NotificationIcon"
-      class="h-4 w-4"
+      class="tw:h-4 tw:w-4"
     />
 
     <!-- Loading spinner -->
     <Loader2 
       v-if="loading"
-      class="h-4 w-4 animate-spin absolute right-12 top-4"
+      class="tw:h-4 tw:w-4 tw:animate-spin tw:absolute tw:right-12 tw:top-4"
     />
 
     <!-- Timer circle -->
     <div
       v-if="timer"
-      class="h-4 w-4 absolute right-12 top-4"
+      class="tw:h-4 tw:w-4 tw:absolute tw:right-12 tw:top-4"
     >
       <!-- You can integrate NSCircleTimer component here -->
-      <div class="h-4 w-4 rounded-full border-2 border-current animate-pulse" />
+      <div class="tw:h-4 tw:w-4 tw:rounded-full tw:border-2 tw:border-current tw:animate-pulse" />
     </div>
 
     <!-- Content -->
-    <div class="grid gap-1">
+    <div class="tw:grid tw:gap-1">
       <!-- Title -->
       <h4
         v-if="hasTitle"
-        class="text-sm font-medium leading-none"
+        class="tw:text-sm tw:font-medium tw:leading-none"
       >
         <slot name="title">{{ title }}</slot>
       </h4>
@@ -138,7 +138,7 @@ const showCloseButtonVisible = computed(() => props.showCloseButton && !hasLoadi
       <button
         v-if="hasAction"
         type="button"
-        class="inline-flex items-center text-sm font-medium underline underline-offset-2 hover:no-underline focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 rounded-sm"
+        class="tw:inline-flex tw:items-center tw:text-sm tw:font-medium tw:underline tw:underline-offset-2 hover:tw:no-underline focus:tw:outline-none focus:tw:ring-2 focus:tw:ring-ring focus:tw:ring-offset-2 tw:rounded-sm"
         @click="emit('action')"
       >
         {{ actionLabel }}
@@ -150,10 +150,10 @@ const showCloseButtonVisible = computed(() => props.showCloseButton && !hasLoadi
       v-if="showCloseButtonVisible"
       type="button"
       :aria-label="closeAriaLabel"
-      class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none"
+      class="tw:absolute tw:right-4 tw:top-4 tw:rounded-sm tw:opacity-70 tw:ring-offset-background tw:transition-opacity hover:tw:opacity-100 focus:tw:outline-none focus:tw:ring-2 focus:tw:ring-ring focus:tw:ring-offset-2 disabled:tw:pointer-events-none"
       @click="emit('close')"
     >
-      <X class="h-4 w-4" />
+      <X class="tw:h-4 tw:w-4" />
     </button>
 
     <!-- Extra content -->