@geniusdynamics/ns8-ui-lib 1.0.4 → 1.0.6

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 -->

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

@@ -1,29 +1,29 @@
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue'
-import LottieAnimation from 'lottie-web-vue'
-import { cn } from '@/lib/utils'
+import { computed, ref, watch } from "vue";
+import { LottieAnimation } from "lottie-web-vue";
+import { cn } from "@/lib/utils";
 
 interface Props {
-  path?: string // Path to Lottie JSON file
-  animationData?: any // Direct animation data
-  width?: number | string
-  height?: number | string
-  loop?: boolean
-  autoplay?: boolean
-  speed?: number
-  playOnHover?: boolean
-  stopOnHoverOut?: boolean
-  direction?: number
-  renderer?: 'svg' | 'canvas' | 'html'
-  className?: string
-  containerClassName?: string
-  lazy?: boolean
-  placeholder?: string
-  responsive?: boolean
-  preserveAspectRatio?: string
-  title?: string
-  ariaLabel?: string
-  role?: string
+  path?: string; // Path to Lottie JSON file
+  animationData?: any; // Direct animation data
+  width?: number | string;
+  height?: number | string;
+  loop?: boolean;
+  autoplay?: boolean;
+  speed?: number;
+  playOnHover?: boolean;
+  stopOnHoverOut?: boolean;
+  direction?: number;
+  renderer?: "svg" | "canvas" | "html";
+  className?: string;
+  containerClassName?: string;
+  lazy?: boolean;
+  placeholder?: string;
+  responsive?: boolean;
+  preserveAspectRatio?: string;
+  title?: string;
+  ariaLabel?: string;
+  role?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -35,34 +35,34 @@ const props = withDefaults(defineProps<Props>(), {
   playOnHover: false,
   stopOnHoverOut: false,
   direction: 1,
-  renderer: 'svg',
+  renderer: "svg",
   lazy: false,
   responsive: true,
-  preserveAspectRatio: 'xMidYMid meet',
-  role: 'img',
-})
+  preserveAspectRatio: "xMidYMid meet",
+  role: "img",
+});
 
 const emit = defineEmits<{
-  load: []
-  ready: []
-  play: []
-  pause: []
-  stop: []
-  complete: []
-  loopComplete: []
-  enterFrame: [event: any]
-  error: [error: Error]
-  mouseOver: []
-  mouseOut: []
-}>()
+  load: [];
+  ready: [];
+  play: [];
+  pause: [];
+  stop: [];
+  complete: [];
+  loopComplete: [];
+  enterFrame: [event: any];
+  error: [error: Error];
+  mouseOver: [];
+  mouseOut: [];
+}>();
 
 // State
-const isLoading = ref(false)
-const isError = ref(false)
-const isLoaded = ref(false)
-const isPlaying = ref(props.autoplay)
-const error = ref<string | null>(null)
-const lottieRef = ref<InstanceType<typeof LottieAnimation>>()
+const isLoading = ref(false);
+const isError = ref(false);
+const isLoaded = ref(false);
+const isPlaying = ref(props.autoplay);
+const error = ref<string | null>(null);
+const lottieRef = ref<InstanceType<typeof LottieAnimation>>();
 
 // Computed properties
 const lottieOptions = computed(() => ({
@@ -74,131 +74,145 @@ const lottieOptions = computed(() => ({
   rendererSettings: {
     preserveAspectRatio: props.preserveAspectRatio,
   },
-}))
+}));
 
 const containerStyle = computed(() => ({
-  width: props.width ? (typeof props.width === 'number' ? `${props.width}px` : props.width) : 'auto',
-  height: props.height ? (typeof props.height === 'number' ? `${props.height}px` : props.height) : 'auto',
-  maxWidth: props.responsive ? '100%' : undefined,
-}))
+  width: props.width
+    ? typeof props.width === "number"
+      ? `${props.width}px`
+      : props.width
+    : "auto",
+  height: props.height
+    ? typeof props.height === "number"
+      ? `${props.height}px`
+      : props.height
+    : "auto",
+  maxWidth: props.responsive ? "100%" : undefined,
+}));
 
 const containerClasses = computed(() => {
   return cn(
-    'relative inline-block',
+    "relative inline-block",
     {
-      'opacity-50': isLoading.value,
-      'opacity-100': !isLoading.value,
+      "opacity-50": isLoading.value,
+      "opacity-100": !isLoading.value,
     },
-    props.containerClassName
-  )
-})
+    props.containerClassName,
+  );
+});
 
 const playerClasses = computed(() => {
-  return cn('w-full h-full', props.className)
-})
+  return cn("w-full h-full", props.className);
+});
 
 // Player controls
 const play = () => {
   if (lottieRef.value && !isPlaying.value) {
-    lottieRef.value.play()
-    isPlaying.value = true
-    emit('play')
+    lottieRef.value.play();
+    isPlaying.value = true;
+    emit("play");
   }
-}
+};
 
 const pause = () => {
   if (lottieRef.value && isPlaying.value) {
-    lottieRef.value.pause()
-    isPlaying.value = false
-    emit('pause')
+    lottieRef.value.pause();
+    isPlaying.value = false;
+    emit("pause");
   }
-}
+};
 
 const stop = () => {
   if (lottieRef.value) {
-    lottieRef.value.stop()
-    isPlaying.value = false
-    emit('stop')
+    lottieRef.value.stop();
+    isPlaying.value = false;
+    emit("stop");
   }
-}
+};
 
 const goToAndStop = (frame?: number) => {
   if (lottieRef.value) {
-    lottieRef.value.goToAndStop(frame || 0, true)
+    lottieRef.value.goToAndStop(frame || 0, true);
   }
-}
+};
 
 const setDirection = (direction: number) => {
   if (lottieRef.value) {
-    lottieRef.value.setDirection(direction)
+    lottieRef.value.setDirection(direction);
   }
-}
+};
 
 const setSpeed = (speed: number) => {
   if (lottieRef.value) {
-    lottieRef.value.setSpeed(speed)
+    lottieRef.value.setSpeed(speed);
   }
-}
+};
 
 // Event handlers
 const handleDataReady = () => {
-  isLoaded.value = true
-  isLoading.value = false
-  emit('ready')
-}
+  isLoaded.value = true;
+  isLoading.value = false;
+  emit("ready");
+};
 
 const handleDataFailed = () => {
-  isLoading.value = false
-  isError.value = true
-  error.value = 'Failed to load animation'
-  emit('error', new Error('Animation data failed to load'))
-}
+  isLoading.value = false;
+  isError.value = true;
+  error.value = "Failed to load animation";
+  emit("error", new Error("Animation data failed to load"));
+};
 
 const handleDOMLoaded = () => {
-  emit('load')
-}
+  emit("load");
+};
 
 const handleComplete = () => {
-  emit('complete')
-}
+  emit("complete");
+};
 
 const handleLoopComplete = () => {
-  emit('loopComplete')
-}
+  emit("loopComplete");
+};
 
 const handleEnterFrame = (event: any) => {
-  emit('enterFrame', event)
-}
+  emit("enterFrame", event);
+};
 
 // Hover handlers
 const handleMouseOver = () => {
   if (props.playOnHover && !isPlaying.value) {
-    play()
+    play();
   }
-  emit('mouseOver')
-}
+  emit("mouseOver");
+};
 
 const handleMouseOut = () => {
   if (props.stopOnHoverOut && isPlaying.value) {
-    pause()
+    pause();
   }
-  emit('mouseOut')
-}
+  emit("mouseOut");
+};
 
 // Watch for prop changes
 watch([() => props.path, () => props.animationData], () => {
-  isLoading.value = true
-  isLoaded.value = false
-  isError.value = false
-})
+  isLoading.value = true;
+  isLoaded.value = false;
+  isError.value = false;
+});
 
-watch(() => props.speed, (newSpeed) => {
-  setSpeed(newSpeed)
-})
+watch(
+  () => props.speed,
+  (newSpeed) => {
+    setSpeed(newSpeed);
+  },
+);
 
-watch(() => props.direction, (newDirection) => {
-  setDirection(newDirection)
-})
+watch(
+  () => props.direction,
+  (newDirection) => {
+    setDirection(newDirection);
+  },
+);
 
 // Expose methods
 defineExpose({
@@ -212,11 +226,11 @@ defineExpose({
   isPlaying,
   isLoading,
   isError,
-})
+});
 </script>
 
 <template>
-  <div 
+  <div
     :class="containerClasses"
     :style="containerStyle"
     :title="title"
@@ -226,14 +240,24 @@ defineExpose({
     @mouseout="handleMouseOut"
   >
     <!-- Loading placeholder -->
-    <div v-if="isLoading && !isLoaded" class="flex items-center justify-center h-full">
-      <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
-      <span v-if="placeholder" class="ml-2 text-sm text-muted-foreground">{{ placeholder }}</span>
+    <div
+      v-if="isLoading && !isLoaded"
+      class="tw:flex tw:items-center tw:justify-center tw:h-full"
+    >
+      <div
+        class="tw:animate-spin tw:rounded-full tw:h-8 tw:w-8 tw:border-b-2 tw:border-primary"
+      ></div>
+      <span v-if="placeholder" class="tw:ml-2 tw:text-sm tw:text-muted-foreground">{{
+        placeholder
+      }}</span>
     </div>
 
     <!-- Error state -->
-    <div v-else-if="isError" class="flex items-center justify-center h-full text-destructive">
-      <div class="text-sm">{{ error || 'Failed to load animation' }}</div>
+    <div
+      v-else-if="isError"
+      class="tw:flex tw:items-center tw:justify-center tw:h-full tw:text-destructive"
+    >
+      <div class="tw:text-sm">{{ error || "Failed to load animation" }}</div>
     </div>
 
     <!-- Lottie Animation -->