@geniusdynamics/ns8-ui-lib 1.0.5 → 1.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geniusdynamics/ns8-ui-lib",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "description": "Vue 3 library for NethServer 8 UI with TailwindCSS and Shadcn Vue",
   "keywords": [
     "nethserver",

package/src/App.vue

@@ -1,17 +1,20 @@
 <script setup lang="ts">
-import HelloWorld from './components/HelloWorld.vue'
+import HelloWorld from "./components/HelloWorld.vue";
+import { NSBackupCard, NSProgressBar } from "./components/NS";
 </script>
 
 <template>
   <div>
     <a href="https://vite.dev" target="_blank">
-      <img src="/vite.svg" class="tw:logo" alt="Vite logo" />
+      <img src="/vite.svg" class="logo" alt="Vite logo" />
     </a>
     <a href="https://vuejs.org/" target="_blank">
-      <img src="./assets/vue.svg" class="tw:logo tw:vue" alt="Vue logo" />
+      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
     </a>
   </div>
   <HelloWorld msg="Vite + Vue" />
+  <NSBackupCard />
+  <NSProgressBar />
 </template>
 
 <style scoped>

package/src/components/HelloWorld.vue

@@ -9,7 +9,7 @@ const count = ref(0)
 <template>
   <h1>{{ msg }}</h1>
 
-  <div class="tw:card">
+  <div class="card">
     <button type="button" @click="count++">count is {{ count }}</button>
     <p>
       Edit
@@ -31,7 +31,7 @@ const count = ref(0)
       >Vue Docs Scaling up Guide</a
     >.
   </p>
-  <p class="tw:read-the-docs">Click on the Vite and Vue logos to learn more</p>
+  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
 </template>
 
 <style scoped>

package/src/components/NS/CompleteDemo.vue

@@ -149,16 +149,16 @@ const handleWizardFinish = (data: any) => {
 </script>
 
 <template>
-  <div class="tw:p-8 tw:space-y-12 tw:max-w-7xl tw:mx-auto">
-    <h1 class="tw:text-3xl tw:font-bold tw:mb-8">NS Components - Complete Showcase</h1>
+  <div class="p-8 space-y-12 max-w-7xl mx-auto">
+    <h1 class="text-3xl font-bold mb-8">NS Components - Complete Showcase</h1>
 
     <!-- Basic Form Controls -->
-    <section class="tw:space-y-6">
-      <h2 class="tw:text-2xl tw:font-semibold">Basic Form Controls</h2>
-      <div class="tw:grid tw:grid-cols-1 md:tw:grid-cols-2 lg:tw:grid-cols-3 tw:gap-6">
+    <section class="space-y-6">
+      <h2 class="text-2xl font-semibold">Basic Form Controls</h2>
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
         <!-- NS Checkbox -->
-        <div class="tw:space-y-4">
-          <h3 class="tw:text-lg tw:font-medium">NS Checkbox</h3>
+        <div class="space-y-4">
+          <h3 class="text-lg font-medium">NS Checkbox</h3>
           <NSCheckbox
             v-model:checked="checkboxValue"
             label="Accept terms and conditions"
@@ -174,8 +174,8 @@ const handleWizardFinish = (data: any) => {
         </div>
 
         <!-- NS Text Input -->
-        <div class="tw:space-y-4">
-          <h3 class="tw:text-lg tw:font-medium">NS Text Input</h3>
+        <div class="space-y-4">
+          <h3 class="text-lg font-medium">NS Text Input</h3>
           <NSTextInput
             v-model="textValue"
             label="Email"
@@ -194,8 +194,8 @@ const handleWizardFinish = (data: any) => {
         </div>
 
         <!-- NS Toggle -->
-        <div class="tw:space-y-4">
-          <h3 class="tw:text-lg tw:font-medium">NS Toggle</h3>
+        <div class="space-y-4">
+          <h3 class="text-lg font-medium">NS Toggle</h3>
           <NSToggle
             v-model:checked="toggleValue"
             label="Dark Mode"
@@ -215,9 +215,9 @@ const handleWizardFinish = (data: any) => {
     </section>
 
     <!-- Tags and Badges -->
-    <section class="tw:space-y-6">
-      <h2 class="tw:text-2xl tw:font-semibold">NS Tag</h2>
-      <div class="tw:flex tw:flex-wrap tw:gap-2">
+    <section class="space-y-6">
+      <h2 class="text-2xl font-semibold">NS Tag</h2>
+      <div class="flex flex-wrap gap-2">
         <NSTag 
           v-for="(tag, index) in tags" 
           :key="index" 
@@ -236,11 +236,11 @@ const handleWizardFinish = (data: any) => {
     </section>
 
     <!-- Progress and Sliders -->
-    <section class="tw:space-y-6">
-      <h2 class="tw:text-2xl tw:font-semibold">Progress & Sliders</h2>
-      <div class="tw:grid tw:grid-cols-1 md:tw:grid-cols-2 tw:gap-6">
-        <div class="tw:space-y-4">
-          <h3 class="tw:text-lg tw:font-medium">Progress Components</h3>
+    <section class="space-y-6">
+      <h2 class="text-2xl font-semibold">Progress & Sliders</h2>
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <div class="space-y-4">
+          <h3 class="text-lg font-medium">Progress Components</h3>
           <NSProgress
             :value="progressValue"
             show-label
@@ -255,8 +255,8 @@ const handleWizardFinish = (data: any) => {
           />
         </div>
 
-        <div class="tw:space-y-4">
-          <h3 class="tw:text-lg tw:font-medium">Slider Components</h3>
+        <div class="space-y-4">
+          <h3 class="text-lg font-medium">Slider Components</h3>
           <NSSlider
             v-model="sliderValue"
             :max="100"
@@ -277,19 +277,19 @@ const handleWizardFinish = (data: any) => {
     </section>
 
     <!-- Empty State and Notifications -->
-    <section class="tw:space-y-6">
-      <h2 class="tw:text-2xl tw:font-semibold">Empty States & Notifications</h2>
-      <div class="tw:grid tw:grid-cols-1 md:tw:grid-cols-2 tw:gap-6">
-        <div class="tw:space-y-4">
-          <h3 class="tw:text-lg tw:font-medium">Empty States</h3>
+    <section class="space-y-6">
+      <h2 class="text-2xl font-semibold">Empty States & Notifications</h2>
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <div class="space-y-4">
+          <h3 class="text-lg font-medium">Empty States</h3>
           <NSEmptyState
             title="No results found"
             description="Try adjusting your search filters to find what you're looking for."
           />
         </div>
 
-        <div class="tw:space-y-4">
-          <h3 class="tw:text-lg tw:font-medium">Notifications</h3>
+        <div class="space-y-4">
+          <h3 class="text-lg font-medium">Notifications</h3>
           <NSInlineNotification
             title="Success!"
             description="Your changes have been saved successfully."
@@ -309,36 +309,36 @@ const handleWizardFinish = (data: any) => {
     </section>
 
     <!-- Modal -->
-    <section class="tw:space-y-6">
-      <h2 class="tw:text-2xl tw:font-semibold">Modal</h2>
+    <section class="space-y-6">
+      <h2 class="text-2xl font-semibold">Modal</h2>
       <NSModalTrigger
         v-model="modalOpen"
         title="Example Modal"
         description="This is an example modal with rich content."
       >
         <template #trigger>
-          <button class="tw:px-4 tw:py-2 tw:bg-primary tw:text-primary-foreground tw:rounded-md hover:tw:bg-primary/90">
+          <button class="px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90">
             Open Modal
           </button>
         </template>
         
-        <div class="tw:space-y-4">
+        <div class="space-y-4">
           <p>This modal demonstrates the NSModal component with:</p>
-          <ul class="tw:list-disc tw:list-inside tw:space-y-1 tw:text-sm tw:text-muted-foreground">
+          <ul class="list-disc list-inside space-y-1 text-sm text-muted-foreground">
             <li>Customizable sizes</li>
             <li>Fullscreen mode</li>
             <li>Header and footer slots</li>
             <li>Escape key and overlay click handling</li>
           </ul>
-          <div class="tw:flex tw:justify-end tw:gap-2 tw:pt-4">
+          <div class="flex justify-end gap-2 pt-4">
             <button 
-              class="tw:px-3 tw:py-2 tw:border tw:border-input tw:bg-background hover:tw:bg-accent tw:rounded-md"
+              class="px-3 py-2 border border-input bg-background hover:bg-accent rounded-md"
               @click="modalOpen = false"
             >
               Cancel
             </button>
             <button 
-              class="tw:px-3 tw:py-2 tw:bg-primary tw:text-primary-foreground tw:rounded-md hover:tw:bg-primary/90"
+              class="px-3 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90"
               @click="modalOpen = false"
             >
               Confirm
@@ -349,8 +349,8 @@ const handleWizardFinish = (data: any) => {
     </section>
 
     <!-- Data Table -->
-    <section class="tw:space-y-6">
-      <h2 class="tw:text-2xl tw:font-semibold">Data Table</h2>
+    <section class="space-y-6">
+      <h2 class="text-2xl font-semibold">Data Table</h2>
       <NSDataTable
         :data="tableData"
         :columns="tableColumns"
@@ -367,8 +367,8 @@ const handleWizardFinish = (data: any) => {
     </section>
 
     <!-- Wizard -->
-    <section class="tw:space-y-6">
-      <h2 class="tw:text-2xl tw:font-semibold">Wizard</h2>
+    <section class="space-y-6">
+      <h2 class="text-2xl font-semibold">Wizard</h2>
       <NSWizard
         v-model="wizardStep"
         :steps="wizardSteps"
@@ -379,7 +379,7 @@ const handleWizardFinish = (data: any) => {
         @finish="handleWizardFinish"
       >
         <template #step-account>
-          <div class="tw:space-y-4">
+          <div class="space-y-4">
             <NSTextInput label="Username" placeholder="Choose a username" />
             <NSTextInput label="Email" type="email" placeholder="your@email.com" />
             <NSTextInput label="Password" type="password" :show-password-toggle="true" />
@@ -387,7 +387,7 @@ const handleWizardFinish = (data: any) => {
         </template>
         
         <template #step-profile>
-          <div class="tw:space-y-4">
+          <div class="space-y-4">
             <NSTextInput label="First Name" placeholder="John" />
             <NSTextInput label="Last Name" placeholder="Doe" />
             <NSTextInput label="Phone" placeholder="+1 234 567 8900" />
@@ -395,7 +395,7 @@ const handleWizardFinish = (data: any) => {
         </template>
         
         <template #step-preferences>
-          <div class="tw:space-y-4">
+          <div class="space-y-4">
             <NSToggle label="Email Notifications" description="Receive email updates" />
             <NSToggle label="Push Notifications" description="Receive push notifications" />
             <NSToggle label="Dark Mode" description="Use dark theme" />
@@ -403,7 +403,7 @@ const handleWizardFinish = (data: any) => {
         </template>
         
         <template #step-review>
-          <div class="tw:space-y-4">
+          <div class="space-y-4">
             <NSEmptyState
               title="Review Your Information"
               description="Please review all the information you've provided before completing the setup."
@@ -415,9 +415,9 @@ const handleWizardFinish = (data: any) => {
     </section>
 
     <!-- Specialized Cards -->
-    <section class="tw:space-y-6">
-      <h2 class="tw:text-2xl tw:font-semibold">Specialized Cards</h2>
-      <div class="tw:grid tw:grid-cols-1 md:tw:grid-cols-2 lg:tw:grid-cols-3 tw:gap-6">
+    <section class="space-y-6">
+      <h2 class="text-2xl font-semibold">Specialized Cards</h2>
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
         <!-- Backup Card -->
         <NSBackupCard
           :backups="backupData"
@@ -459,8 +459,8 @@ const handleWizardFinish = (data: any) => {
     </section>
 
     <!-- Pagination -->
-    <section class="tw:space-y-6">
-      <h2 class="tw:text-2xl tw:font-semibold">Pagination</h2>
+    <section class="space-y-6">
+      <h2 class="text-2xl font-semibold">Pagination</h2>
       <NSPagination
         :current-page="currentPage"
         :total-items="50"

package/src/components/NS/Demo.vue

@@ -28,13 +28,13 @@ const handleNotificationAction = () => {
 </script>
 
 <template>
-  <div class="tw:p-8 tw:space-y-8 tw:max-w-4xl tw:mx-auto">
-    <h1 class="tw:text-2xl tw:font-bold tw:mb-6">NS Components Demo</h1>
+  <div class="p-8 space-y-8 max-w-4xl mx-auto">
+    <h1 class="text-2xl font-bold mb-6">NS Components Demo</h1>
 
     <!-- NS Checkbox -->
-    <div class="tw:space-y-4">
-      <h2 class="tw:text-xl tw:font-semibold">NS Checkbox</h2>
-      <div class="tw:grid tw:grid-cols-1 md:tw:grid-cols-2 tw:gap-4">
+    <div class="space-y-4">
+      <h2 class="text-xl font-semibold">NS Checkbox</h2>
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
         <NSCheckbox
           v-model:checked="checkboxValue"
           label="Accept terms and conditions"
@@ -63,9 +63,9 @@ const handleNotificationAction = () => {
     </div>
 
     <!-- NS Text Input -->
-    <div class="tw:space-y-4">
-      <h2 class="tw:text-xl tw:font-semibold">NS Text Input</h2>
-      <div class="tw:grid tw:grid-cols-1 md:tw:grid-cols-2 tw:gap-4">
+    <div class="space-y-4">
+      <h2 class="text-xl font-semibold">NS Text Input</h2>
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
         <NSTextInput
           v-model="textValue"
           label="Username"
@@ -97,9 +97,9 @@ const handleNotificationAction = () => {
     </div>
 
     <!-- NS Toggle -->
-    <div class="tw:space-y-4">
-      <h2 class="tw:text-xl tw:font-semibold">NS Toggle</h2>
-      <div class="tw:grid tw:grid-cols-1 md:tw:grid-cols-2 tw:gap-4">
+    <div class="space-y-4">
+      <h2 class="text-xl font-semibold">NS Toggle</h2>
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
         <NSToggle
           v-model:checked="toggleValue"
           label="Dark Mode"
@@ -130,9 +130,9 @@ const handleNotificationAction = () => {
     </div>
 
     <!-- NS Tag -->
-    <div class="tw:space-y-4">
-      <h2 class="tw:text-xl tw:font-semibold">NS Tag</h2>
-      <div class="tw:flex tw:flex-wrap tw:gap-2">
+    <div class="space-y-4">
+      <h2 class="text-xl font-semibold">NS Tag</h2>
+      <div class="flex flex-wrap gap-2">
         <NSTag v-for="(tag, index) in tags" :key="index" :label="tag" removable @remove="handleTagRemove(index)" />
         <NSTag label="Default" />
         <NSTag label="Secondary" variant="secondary" />
@@ -145,9 +145,9 @@ const handleNotificationAction = () => {
     </div>
 
     <!-- NS Empty State -->
-    <div class="tw:space-y-4">
-      <h2 class="tw:text-xl tw:font-semibold">NS Empty State</h2>
-      <div class="tw:grid tw:grid-cols-1 md:tw:grid-cols-2 tw:gap-4">
+    <div class="space-y-4">
+      <h2 class="text-xl font-semibold">NS Empty State</h2>
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
         <NSEmptyState
           title="No results found"
           description="Try adjusting your search filters to find what you're looking for."
@@ -161,9 +161,9 @@ const handleNotificationAction = () => {
     </div>
 
     <!-- NS Inline Notification -->
-    <div class="tw:space-y-4">
-      <h2 class="tw:text-xl tw:font-semibold">NS Inline Notification</h2>
-      <div class="tw:grid tw:grid-cols-1 tw:gap-4">
+    <div class="space-y-4">
+      <h2 class="text-xl font-semibold">NS Inline Notification</h2>
+      <div class="grid grid-cols-1 gap-4">
         <NSInlineNotification
           title="Success!"
           description="Your changes have been saved successfully."

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

@@ -129,51 +129,51 @@ const tableClasses = computed(() => {
 
 <template>
   <Card :class="cardClasses">
-    <CardHeader class="tw:pb-3">
-      <CardTitle class="tw:flex tw:items-center tw:gap-2">
-        <Save class="tw:h-5 tw:w-5 tw:text-primary" />
+    <CardHeader class="pb-3">
+      <CardTitle class="flex items-center gap-2">
+        <Save class="h-5 w-5 text-primary" />
         {{ title }}
       </CardTitle>
     </CardHeader>
 
-    <CardContent class="tw:space-y-4">
+    <CardContent class="space-y-4">
       <!-- Loading state -->
-      <div v-if="loading" class="tw:space-y-2">
-        <Skeleton class="tw:h-4 tw:w-3/4" />
-        <Skeleton class="tw:h-4 tw:w-1/2" />
+      <div v-if="loading" class="space-y-2">
+        <Skeleton class="h-4 w-3/4" />
+        <Skeleton class="h-4 w-1/2" />
       </div>
 
       <!-- No backups state -->
       <div
         v-else-if="!hasBackups"
-        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>{{ noBackupMessage }}</span>
       </div>
 
       <!-- Single backup state -->
-      <div v-else-if="singleBackup" class="tw:space-y-4">
+      <div v-else-if="singleBackup" class="space-y-4">
         <div :class="tableWrapperClasses">
           <div :class="tableClasses">
             <!-- Status row -->
             <div
-              class="tw:flex tw:items-center tw:justify-between tw:py-2 tw:border-b"
+              class="flex items-center justify-between py-2 border-b"
             >
-              <span class="tw:text-sm tw:font-medium">{{ statusLabel }}</span>
-              <div class="tw:flex tw:items-center tw:gap-2">
-                <span v-if="!singleBackup.enabled" class="tw:text-destructive">
+              <span class="text-sm font-medium">{{ statusLabel }}</span>
+              <div class="flex items-center gap-2">
+                <span v-if="!singleBackup.enabled" class="text-destructive">
                   {{ backupDisabledLabel }}
                 </span>
                 <span
                   v-else-if="status[singleBackup.id]?.success"
-                  class="tw:text-green-600"
+                  class="text-green-600"
                 >
                   {{ statusSuccessLabel }}
                 </span>
                 <span
                   v-else-if="status[singleBackup.id]?.message"
-                  class="tw:text-destructive"
+                  class="text-destructive"
                 >
                   {{ status[singleBackup.id].message }}
                 </span>
@@ -181,27 +181,27 @@ const tableClasses = computed(() => {
             </div>
 
             <!-- Backup details -->
-            <div class="tw:space-y-2 tw:py-2">
-              <div class="tw:flex tw:justify-between">
-                <span class="tw:text-sm tw:text-muted-foreground">Name:</span>
-                <span class="tw:text-sm tw:font-medium">{{
+            <div class="space-y-2 py-2">
+              <div class="flex justify-between">
+                <span class="text-sm text-muted-foreground">Name:</span>
+                <span class="text-sm font-medium">{{
                   singleBackup.name
                 }}</span>
               </div>
-              <div class="tw:flex tw:justify-between">
-                <span class="tw:text-sm tw:text-muted-foreground">Date:</span>
-                <span class="tw:text-sm">{{ singleBackup.date }}</span>
+              <div class="flex justify-between">
+                <span class="text-sm text-muted-foreground">Date:</span>
+                <span class="text-sm">{{ singleBackup.date }}</span>
               </div>
-              <div class="tw:flex tw:justify-between">
-                <span class="tw:text-sm tw:text-muted-foreground">Size:</span>
-                <span class="tw:text-sm">{{ singleBackup.size }}</span>
+              <div class="flex justify-between">
+                <span class="text-sm text-muted-foreground">Size:</span>
+                <span class="text-sm">{{ singleBackup.size }}</span>
               </div>
             </div>
           </div>
         </div>
 
         <!-- Action buttons -->
-        <div class="tw:flex tw:gap-2 tw:pt-2">
+        <div class="flex gap-2 pt-2">
           <Button
             v-if="singleBackup.enabled"
             variant="outline"
@@ -233,20 +233,20 @@ const tableClasses = computed(() => {
         <div :class="tableWrapperClasses">
           <table :class="tableClasses">
             <thead>
-              <tr class="tw:border-b">
-                <th class="tw:text-left tw:p-2 tw:text-sm tw:font-medium">
+              <tr class="border-b">
+                <th class="text-left p-2 text-sm font-medium">
                   Name
                 </th>
-                <th class="tw:text-left tw:p-2 tw:text-sm tw:font-medium">
+                <th class="text-left p-2 text-sm font-medium">
                   Date
                 </th>
-                <th class="tw:text-left tw:p-2 tw:text-sm tw:font-medium">
+                <th class="text-left p-2 text-sm font-medium">
                   Size
                 </th>
-                <th class="tw:text-left tw:p-2 tw:text-sm tw:font-medium">
+                <th class="text-left p-2 text-sm font-medium">
                   Status
                 </th>
-                <th class="tw:text-right tw:p-2 tw:text-sm tw:font-medium">
+                <th class="text-right p-2 text-sm font-medium">
                   Actions
                 </th>
               </tr>
@@ -255,13 +255,13 @@ const tableClasses = computed(() => {
               <tr
                 v-for="backup in backups"
                 :key="backup.id"
-                class="tw:border-b"
+                class="border-b"
               >
-                <td class="tw:p-2 tw:text-sm">{{ backup.name }}</td>
-                <td class="tw:p-2 tw:text-sm">{{ backup.date }}</td>
-                <td class="tw:p-2 tw:text-sm">{{ backup.size }}</td>
-                <td class="tw:p-2 tw:text-sm">
-                  <div class="tw:flex tw:items-center tw:gap-2">
+                <td class="p-2 text-sm">{{ backup.name }}</td>
+                <td class="p-2 text-sm">{{ backup.date }}</td>
+                <td class="p-2 text-sm">{{ backup.size }}</td>
+                <td class="p-2 text-sm">
+                  <div class="flex items-center gap-2">
                     <component
                       v-if="getStatusIcon(backup)"
                       :is="getStatusIcon(backup)"
@@ -272,8 +272,8 @@ const tableClasses = computed(() => {
                     </span>
                   </div>
                 </td>
-                <td class="tw:p-2 tw:text-sm">
-                  <div class="tw:flex tw:items-center tw:justify-end tw:gap-1">
+                <td class="p-2 text-sm">
+                  <div class="flex items-center justify-end gap-1">
                     <Button
                       variant="ghost"
                       size="sm"