@geniusdynamics/ns8-ui-lib 1.0.6 → 1.0.7

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

@@ -136,11 +136,11 @@ const metricsGridClasses = computed(() => {
 
 <template>
   <Card :class="cardClasses">
-    <CardHeader class="tw:pb-3">
-      <div class="tw:flex tw:items-center tw:justify-between">
+    <CardHeader class="pb-3">
+      <div class="flex items-center justify-between">
         <div>
-          <CardTitle class="tw:flex tw:items-center tw:gap-2">
-            <Activity class="tw:h-5 tw:w-5 tw:text-primary" />
+          <CardTitle class="flex items-center gap-2">
+            <Activity class="h-5 w-5 text-primary" />
             {{ title }}
           </CardTitle>
           <CardDescription>
@@ -155,56 +155,56 @@ const metricsGridClasses = computed(() => {
           size="sm"
           @click="emit('refresh')"
         >
-          <Clock class="tw:h-4 tw:w-4" />
+          <Clock class="h-4 w-4" />
         </Button>
       </div>
     </CardHeader>
 
-    <CardContent class="tw:space-y-4">
+    <CardContent class="space-y-4">
       <!-- Loading state -->
-      <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 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>
       </div>
 
       <!-- System metrics -->
       <div v-else-if="hasMetrics" :class="metricsGridClasses">
         <!-- Storage metrics -->
-        <div v-if="showStorage" class="tw:space-y-2">
+        <div v-if="showStorage" class="space-y-2">
           <div
-            class="tw:flex tw:items-center tw:gap-2 tw:text-sm tw:font-medium"
+            class="flex items-center gap-2 text-sm font-medium"
           >
-            <HardDrive class="tw:h-4 tw:w-4" />
+            <HardDrive class="h-4 w-4" />
             Storage
           </div>
           <Progress
             :value="metrics.usagePercentage"
             :variant="storageVariant"
-            class="tw:mb-2"
+            class="mb-2"
           />
-          <div class="tw:text-xs tw:text-muted-foreground tw:space-y-1">
+          <div class="text-xs text-muted-foreground 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="tw:space-y-2">
+        <div v-if="showMemory && metrics?.memory" class="space-y-2">
           <div
-            class="tw:flex tw:items-center tw:gap-2 tw:text-sm tw:font-medium"
+            class="flex items-center gap-2 text-sm font-medium"
           >
-            <Activity class="tw:h-4 tw:w-4" />
+            <Activity class="h-4 w-4" />
             Memory
           </div>
           <Progress
             :value="metrics.memory.percentage"
             :variant="memoryVariant"
-            class="tw:mb-2"
+            class="mb-2"
           />
-          <div class="tw:text-xs tw:text-muted-foreground tw:space-y-1">
+          <div class="text-xs text-muted-foreground space-y-1">
             <div>
               Used: {{ metrics.memory.used }} / {{ metrics.memory.total }}
             </div>
@@ -213,19 +213,19 @@ const metricsGridClasses = computed(() => {
         </div>
 
         <!-- CPU metrics -->
-        <div v-if="showCpu && metrics?.cpu" class="tw:space-y-2">
+        <div v-if="showCpu && metrics?.cpu" class="space-y-2">
           <div
-            class="tw:flex tw:items-center tw:gap-2 tw:text-sm tw:font-medium"
+            class="flex items-center gap-2 text-sm font-medium"
           >
-            <Activity class="tw:h-4 tw:w-4" />
+            <Activity class="h-4 w-4" />
             CPU
           </div>
           <Progress
             :value="metrics.cpu.usage"
             :variant="cpuVariant"
-            class="tw:mb-2"
+            class="mb-2"
           />
-          <div class="tw:text-xs tw:text-muted-foreground tw:space-y-1">
+          <div class="text-xs text-muted-foreground space-y-1">
             <div>Usage: {{ metrics.cpu.usage }}%</div>
             <div>Cores: {{ metrics.cpu.cores }}</div>
             <div v-if="metrics.cpu.frequency">
@@ -238,41 +238,41 @@ const metricsGridClasses = computed(() => {
       <!-- Additional system info -->
       <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"
+        class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3 pt-4 border-t"
       >
         <!-- Temperature -->
         <div v-if="showTemperature && metrics?.temperature">
-          <div class="tw:text-xs tw:text-muted-foreground">Temperature</div>
-          <div class="tw:text-sm tw:font-medium">{{ metrics.temperature }}</div>
+          <div class="text-xs text-muted-foreground">Temperature</div>
+          <div class="text-sm font-medium">{{ metrics.temperature }}</div>
         </div>
 
         <!-- Load average -->
         <div v-if="showLoadAverage && metrics?.loadAverage">
-          <div class="tw:text-xs tw:text-muted-foreground">Load Average</div>
-          <div class="tw:text-sm tw:font-medium">
+          <div class="text-xs text-muted-foreground">Load Average</div>
+          <div class="text-sm font-medium">
             {{ metrics.loadAverage.join(", ") }}
           </div>
         </div>
 
         <!-- Uptime -->
         <div v-if="showUptime && metrics?.uptime">
-          <div class="tw:text-xs tw:text-muted-foreground">Uptime</div>
-          <div class="tw:text-sm tw:font-medium">{{ metrics.uptime }}</div>
+          <div class="text-xs text-muted-foreground">Uptime</div>
+          <div class="text-sm font-medium">{{ metrics.uptime }}</div>
         </div>
 
         <!-- Processes -->
         <div v-if="showProcesses && metrics?.processes">
-          <div class="tw:text-xs tw:text-muted-foreground">Processes</div>
-          <div class="tw:text-sm tw:font-medium">{{ metrics.processes }}</div>
+          <div class="text-xs text-muted-foreground">Processes</div>
+          <div class="text-sm font-medium">{{ metrics.processes }}</div>
         </div>
       </div>
 
       <!-- No data state -->
       <div
         v-if="!hasMetrics && !loading"
-        class="tw:flex tw:items-center tw:gap-3 tw:text-muted-foreground"
+        class="flex items-center gap-3 text-muted-foreground"
       >
-        <AlertCircle class="tw:h-5 tw:w-5" />
+        <AlertCircle class="h-5 w-5" />
         <span>No system metrics available</span>
       </div>
     </CardContent>

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

@@ -125,16 +125,16 @@ const iconClass = computed(() => {
 
 <template>
   <Card :class="cardClasses">
-    <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">
+    <CardHeader class="pb-3">
+      <div class="flex items-center justify-between">
+        <CardTitle class="flex items-center gap-3">
           <component
             v-if="icon"
             :is="icon"
             :class="iconClass"
           />
           <div>
-            <div class="tw:text-lg tw:font-semibold">{{ title }}</div>
+            <div class="text-lg font-semibold">{{ title }}</div>
             <CardDescription v-if="description">
               {{ description }}
             </CardDescription>
@@ -148,53 +148,53 @@ const iconClass = computed(() => {
       </div>
     </CardHeader>
 
-    <CardContent class="tw:space-y-4">
+    <CardContent class="space-y-4">
       <!-- Loading state -->
-      <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 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>
 
       <!-- Service details -->
-      <div v-else class="tw:space-y-3">
+      <div v-else class="space-y-3">
         <!-- Service name -->
-        <div v-if="serviceName" class="tw:text-sm tw:text-muted-foreground">
-          <span class="tw:font-medium">Service:</span> {{ serviceName }}
+        <div v-if="serviceName" class="text-sm text-muted-foreground">
+          <span class="font-medium">Service:</span> {{ serviceName }}
         </div>
 
         <!-- 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 }}
+        <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 }}
           </span>
         </div>
 
         <!-- Last restart -->
-        <div v-if="status?.lastRestart" class="tw:text-sm tw:text-muted-foreground">
-          <span class="tw:font-medium">Last restart:</span> {{ status.lastRestart }}
+        <div v-if="status?.lastRestart" class="text-sm text-muted-foreground">
+          <span class="font-medium">Last restart:</span> {{ status.lastRestart }}
         </div>
 
         <!-- Metrics -->
-        <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 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>
-          <div v-if="status?.cpu" class="tw:text-sm">
-            <span class="tw:font-medium">CPU:</span> {{ status.cpu }}
+          <div v-if="status?.cpu" class="text-sm">
+            <span class="font-medium">CPU:</span> {{ status.cpu }}
           </div>
         </div>
 
         <!-- Custom status message -->
-        <div v-if="status?.status && status?.status !== statusText" class="tw:text-sm">
+        <div v-if="status?.status && status?.status !== statusText" class="text-sm">
           {{ status.status }}
         </div>
       </div>
 
       <!-- Action buttons -->
-      <div class="tw:flex tw:items-center tw:justify-between tw:pt-4 tw:border-t">
-        <div class="tw:flex tw:gap-2">
+      <div class="flex items-center justify-between pt-4 border-t">
+        <div class="flex 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="tw:h-4 tw:w-4" />
+          <MoreHorizontal class="h-4 w-4" />
         </Button>
       </div>
     </CardContent>

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

@@ -60,12 +60,12 @@ const isChecked = computed({
           'opacity-50': indeterminate
         })"
       >
-        <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" />
+        <Check v-if="!indeterminate" class="h-4 w-4" />
+        <div v-else class="h-1 w-2 bg-current rounded-sm" />
       </CheckboxIndicator>
     </CheckboxRoot>
 
-    <div class="tw:grid tw:gap-1.5">
+    <div class="grid gap-1.5">
       <label
         v-if="label || $slots.label"
         :for="checkboxId"
@@ -91,7 +91,7 @@ const isChecked = computed({
 
       <p
         v-if="errorMessage"
-        class="tw:text-sm tw:text-destructive"
+        class="text-sm 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="tw:flex tw:items-center tw:justify-between tw:gap-4 tw:mb-4">
-      <div class="tw:flex tw:items-center tw:gap-2">
+    <div class="flex items-center justify-between gap-4 mb-4">
+      <div class="flex items-center gap-2">
         <!-- Search -->
-        <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" />
+        <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" />
           <Input
             :model-value="searchQuery"
             @update:model-value="handleSearch"
             placeholder="Search..."
-            class="tw:pl-9 tw:w-64"
+            class="pl-9 w-64"
           />
         </div>
 
         <!-- Filters -->
-        <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-if="filterable" class="flex items-center gap-2">
+          <Filter class="h-4 w-4 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="tw:w-32"
+              class="w-32"
             />
           </div>
         </div>
       </div>
 
       <!-- Total count -->
-      <div v-if="showTotal" class="tw:text-sm tw:text-muted-foreground">
+      <div v-if="showTotal" class="text-sm text-muted-foreground">
         {{ processedData.length }} items total
       </div>
     </div>
 
     <!-- Table -->
-    <div class="tw:rounded-md tw:border">
+    <div class="rounded-md border">
       <Table :class="tableClasses">
         <TableHeader :class="headerClasses">
           <TableRow>
             <!-- Select all checkbox -->
-            <TableHead v-if="selectable" class="tw:w-12">
+            <TableHead v-if="selectable" class="w-12">
               <input
                 type="checkbox"
                 :checked="isAllSelected"
                 :indeterminate="isIndeterminate"
                 @change="toggleAllSelection"
-                class="tw:rounded tw:border-gray-300"
+                class="rounded border-gray-300"
               />
             </TableHead>
 
@@ -301,9 +301,9 @@ watch(() => props.currentPage, () => {
               :style="{ width: column.width }"
               @click="handleSort(column)"
             >
-              <div class="tw:flex tw:items-center tw:gap-1">
+              <div class="flex items-center gap-1">
                 {{ column.label }}
-                <div v-if="column.sortable" class="tw:flex tw:flex-col">
+                <div v-if="column.sortable" class="flex flex-col">
                   <ChevronUp 
                     :class="cn( 'h-3 w-3',
                       sortColumn === column.key && sortDirection === 'asc' ? 'text-primary' : 'text-muted-foreground'
@@ -319,8 +319,8 @@ watch(() => props.currentPage, () => {
             </TableHead>
 
             <!-- Actions column -->
-            <TableHead v-if="actions.length > 0" class="tw:w-16">
-              <span class="tw:sr-only">Actions</span>
+            <TableHead v-if="actions.length > 0" class="w-16">
+              <span class="sr-only">Actions</span>
             </TableHead>
           </TableRow>
         </TableHeader>
@@ -328,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="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>
+            <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>
                 <span>{{ loadingMessage }}</span>
               </div>
             </TableCell>
@@ -338,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="tw:text-center tw:py-8">
+            <TableCell :colspan="columns.length + (selectable ? 1 : 0) + (actions.length > 0 ? 1 : 0)" class="text-center py-8">
               {{ emptyMessage }}
             </TableCell>
           </TableRow>
@@ -351,15 +351,15 @@ watch(() => props.currentPage, () => {
             :class="{ 'selected': selectedRows.includes(row)
             }"
             @click="handleRowClick(row, index)"
-            class="tw:cursor-pointer"
+            class="cursor-pointer"
           >
             <!-- Selection checkbox -->
-            <TableCell v-if="selectable" class="tw:w-12">
+            <TableCell v-if="selectable" class="w-12">
               <input
                 type="checkbox"
                 :checked="selectedRows.includes(row)"
                 @change="toggleSelection(row)"
-                class="tw:rounded tw:border-gray-300"
+                class="rounded border-gray-300"
               />
             </TableCell>
 
@@ -391,7 +391,7 @@ watch(() => props.currentPage, () => {
 
             <!-- Actions -->
             <TableCell v-if="actions.length > 0">
-              <div class="tw:flex tw:items-center tw:justify-end tw:space-x-1">
+              <div class="flex items-center justify-end space-x-1">
                 <Button
                   v-for="action in actions"
                   :key="action.key"
@@ -400,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="tw:h-4 tw:w-4" />
+                  <component v-if="action.icon" :is="action.icon" class="h-4 w-4" />
                   {{ action.label }}
                 </Button>
               </div>
@@ -411,14 +411,14 @@ watch(() => props.currentPage, () => {
     </div>
 
     <!-- Pagination -->
-    <div v-if="pagination" class="tw:mt-4">
+    <div v-if="pagination" class="mt-4">
       <slot name="pagination" :current-page="currentPage" :total-items="processedData.length">
         <!-- Built-in pagination placeholder -->
-        <div class="tw:flex tw:items-center tw:justify-between">
-          <div class="tw:text-sm tw:text-muted-foreground">
+        <div class="flex items-center justify-between">
+          <div class="text-sm text-muted-foreground">
             Showing {{ (currentPage - 1) * itemsPerPage + 1 }} to {{ Math.min(currentPage * itemsPerPage, processedData.length) }} of {{ processedData.length }} items
           </div>
-          <div class="tw:text-sm tw:text-muted-foreground">
+          <div class="text-sm 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="tw:mb-4">
+    <div class="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="tw:mt-4">
+    <div v-if="$slots.actions" class="mt-4">
       <slot name="actions" />
     </div>
 
     <!-- Extra content section -->
-    <div v-if="$slots.extra" class="tw:mt-6">
+    <div v-if="$slots.extra" class="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="tw:h-4 tw:w-4"
+      class="h-4 w-4"
     />
 
     <!-- Loading spinner -->
     <Loader2 
       v-if="loading"
-      class="tw:h-4 tw:w-4 tw:animate-spin tw:absolute tw:right-12 tw:top-4"
+      class="h-4 w-4 animate-spin absolute right-12 top-4"
     />
 
     <!-- Timer circle -->
     <div
       v-if="timer"
-      class="tw:h-4 tw:w-4 tw:absolute tw:right-12 tw:top-4"
+      class="h-4 w-4 absolute right-12 top-4"
     >
       <!-- You can integrate NSCircleTimer component here -->
-      <div class="tw:h-4 tw:w-4 tw:rounded-full tw:border-2 tw:border-current tw:animate-pulse" />
+      <div class="h-4 w-4 rounded-full border-2 border-current animate-pulse" />
     </div>
 
     <!-- Content -->
-    <div class="tw:grid tw:gap-1">
+    <div class="grid gap-1">
       <!-- Title -->
       <h4
         v-if="hasTitle"
-        class="tw:text-sm tw:font-medium tw:leading-none"
+        class="text-sm font-medium 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="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"
+        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"
         @click="emit('action')"
       >
         {{ actionLabel }}
@@ -150,10 +150,10 @@ const showCloseButtonVisible = computed(() => props.showCloseButton && !hasLoadi
       v-if="showCloseButtonVisible"
       type="button"
       :aria-label="closeAriaLabel"
-      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"
+      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"
       @click="emit('close')"
     >
-      <X class="tw:h-4 tw:w-4" />
+      <X class="h-4 w-4" />
     </button>
 
     <!-- Extra content -->

package/src/components/NS/lottie-animation/NSLottieAnimation.vue

@@ -242,12 +242,12 @@ defineExpose({
     <!-- Loading placeholder -->
     <div
       v-if="isLoading && !isLoaded"
-      class="tw:flex tw:items-center tw:justify-center tw:h-full"
+      class="flex items-center justify-center h-full"
     >
       <div
-        class="tw:animate-spin tw:rounded-full tw:h-8 tw:w-8 tw:border-b-2 tw:border-primary"
+        class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"
       ></div>
-      <span v-if="placeholder" class="tw:ml-2 tw:text-sm tw:text-muted-foreground">{{
+      <span v-if="placeholder" class="ml-2 text-sm text-muted-foreground">{{
         placeholder
       }}</span>
     </div>
@@ -255,9 +255,9 @@ defineExpose({
     <!-- Error state -->
     <div
       v-else-if="isError"
-      class="tw:flex tw:items-center tw:justify-center tw:h-full tw:text-destructive"
+      class="flex items-center justify-center h-full text-destructive"
     >
-      <div class="tw:text-sm">{{ error || "Failed to load animation" }}</div>
+      <div class="text-sm">{{ error || "Failed to load animation" }}</div>
     </div>
 
     <!-- Lottie Animation -->

package/src/components/NS/modal/NSModal.vue

@@ -126,42 +126,42 @@ const handleClose = () => {
         )"
       >
         <!-- Title and description -->
-        <div class="tw:space-y-1">
+        <div class="space-y-1">
           <DialogTitle 
             v-if="title || $slots.title"
-            class="tw:text-lg tw:font-semibold tw:leading-none tw:tracking-tight"
+            class="text-lg font-semibold leading-none tracking-tight"
           >
             <slot name="title">{{ title }}</slot>
           </DialogTitle>
           <DialogDescription 
             v-if="description || $slots.description"
-            class="tw:text-sm tw:text-muted-foreground"
+            class="text-sm text-muted-foreground"
           >
             <slot name="description">{{ description }}</slot>
           </DialogDescription>
         </div>
 
         <!-- Close button -->
-        <div class="tw:flex tw:items-center tw:gap-2">
+        <div class="flex items-center gap-2">
           <!-- Fullscreen toggle -->
           <button
             v-if="!fullscreen"
             type="button"
-            class="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"
+            class="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"
             :title="isFullscreen ? 'Exit fullscreen' : 'Enter fullscreen'"
             @click="isFullscreen = !isFullscreen"
           >
-            <Maximize2 v-if="!isFullscreen" class="tw:h-4 tw:w-4" />
-            <Minimize2 v-else class="tw:h-4 tw:w-4" />
+            <Maximize2 v-if="!isFullscreen" class="h-4 w-4" />
+            <Minimize2 v-else class="h-4 w-4" />
           </button>
 
           <!-- Close button -->
           <DialogClose
             v-if="showCloseButton && !persistent"
-            class="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"
+            class="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"
           >
-            <X class="tw:h-4 tw:w-4" />
-            <span class="tw:sr-only">Close</span>
+            <X class="h-4 w-4" />
+            <span class="sr-only">Close</span>
           </DialogClose>
         </div>
       </div>

package/src/components/NS/modal/NSModalTrigger.vue

@@ -59,7 +59,7 @@ const triggerRef = ref<HTMLElement>()
       v-if="!$slots.trigger"
       ref="triggerRef"
       @click="isOpen = !isOpen"
-      class="tw:inline-flex tw:items-center tw:justify-center tw:rounded-md tw:text-sm tw:font-medium tw:transition-colors focus-visible:tw:outline-none focus-visible:tw:ring-2 focus-visible:tw:ring-ring focus-visible:tw:ring-offset-2 disabled:tw:pointer-events-none disabled:tw:opacity-50 tw:bg-primary tw:text-primary-foreground hover:tw:bg-primary/90"
+      class="inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90"
     >
       Open Modal
     </button>