@geniusdynamics/ns8-ui-lib 1.0.4 → 1.0.5

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

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

@@ -121,48 +121,47 @@ const handleClose = () => {
       <!-- Header -->
       <div 
         v-if="title || $slots.header || showCloseButton" 
-        :class="cn(
-          'flex items-center justify-between',
+        :class="cn( 'flex items-center justify-between',
           isFullscreen ? 'border-b p-6' : 'mb-4'
         )"
       >
         <!-- Title and description -->
-        <div class="space-y-1">
+        <div class="tw:space-y-1">
           <DialogTitle 
             v-if="title || $slots.title"
-            class="text-lg font-semibold leading-none tracking-tight"
+            class="tw:text-lg tw:font-semibold tw:leading-none tw:tracking-tight"
           >
             <slot name="title">{{ title }}</slot>
           </DialogTitle>
           <DialogDescription 
             v-if="description || $slots.description"
-            class="text-sm text-muted-foreground"
+            class="tw:text-sm tw:text-muted-foreground"
           >
             <slot name="description">{{ description }}</slot>
           </DialogDescription>
         </div>
 
         <!-- Close button -->
-        <div class="flex items-center gap-2">
+        <div class="tw:flex tw:items-center tw:gap-2">
           <!-- Fullscreen toggle -->
           <button
             v-if="!fullscreen"
             type="button"
-            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"
+            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"
             :title="isFullscreen ? 'Exit fullscreen' : 'Enter fullscreen'"
             @click="isFullscreen = !isFullscreen"
           >
-            <Maximize2 v-if="!isFullscreen" class="h-4 w-4" />
-            <Minimize2 v-else class="h-4 w-4" />
+            <Maximize2 v-if="!isFullscreen" class="tw:h-4 tw:w-4" />
+            <Minimize2 v-else class="tw:h-4 tw:w-4" />
           </button>
 
           <!-- Close button -->
           <DialogClose
             v-if="showCloseButton && !persistent"
-            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"
+            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"
           >
-            <X class="h-4 w-4" />
-            <span class="sr-only">Close</span>
+            <X class="tw:h-4 tw:w-4" />
+            <span class="tw:sr-only">Close</span>
           </DialogClose>
         </div>
       </div>
@@ -181,8 +180,7 @@ const handleClose = () => {
       <!-- Default actions -->
       <div 
         v-if="$slots.actions" 
-        :class="cn(
-          'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
+        :class="cn( 'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
           isFullscreen ? 'border-t p-6 mt-auto' : 'mt-6'
         )"
       >

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="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"
+      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"
     >
       Open Modal
     </button>

package/src/components/NS/pagination/NSPagination.vue

@@ -170,13 +170,13 @@ const handleJumperChange = (event: Event) => {
 <template>
   <div :class="containerClasses">
     <!-- Total items display -->
-    <div v-if="showTotal && totalItems" class="text-sm text-muted-foreground">
+    <div v-if="showTotal && totalItems" class="tw:text-sm tw:text-muted-foreground">
       Total: {{ totalItems }} items
     </div>
 
     <!-- Page size changer -->
-    <div v-if="showSizeChanger" class="flex items-center gap-2">
-      <span class="text-sm text-muted-foreground">Items per page:</span>
+    <div v-if="showSizeChanger" class="tw:flex tw:items-center tw:gap-2">
+      <span class="tw:text-sm tw:text-muted-foreground">Items per page:</span>
       <select 
         v-model="itemsPerPageInternal"
         :disabled="disabled"
@@ -189,7 +189,7 @@ const handleJumperChange = (event: Event) => {
     </div>
 
     <!-- Pagination buttons -->
-    <div class="flex items-center gap-1">
+    <div class="tw:flex tw:items-center tw:gap-1">
       <!-- Previous button -->
       <button
         :class="buttonClasses"
@@ -197,7 +197,7 @@ const handleJumperChange = (event: Event) => {
         @click="handlePrev"
         aria-label="Previous page"
       >
-        <ChevronLeft class="h-4 w-4" />
+        <ChevronLeft class="tw:h-4 tw:w-4" />
       </button>
 
       <!-- Page numbers -->
@@ -212,9 +212,9 @@ const handleJumperChange = (event: Event) => {
         </button>
         <span
           v-else
-          class="flex items-center justify-center h-8 w-8 text-sm text-muted-foreground"
+          class="tw:flex tw:items-center tw:justify-center tw:h-8 tw:w-8 tw:text-sm tw:text-muted-foreground"
         >
-          <MoreHorizontal class="h-4 w-4" />
+          <MoreHorizontal class="tw:h-4 tw:w-4" />
         </span>
       </template>
 
@@ -225,13 +225,13 @@ const handleJumperChange = (event: Event) => {
         @click="handleNext"
         aria-label="Next page"
       >
-        <ChevronRight class="h-4 w-4" />
+        <ChevronRight class="tw:h-4 tw:w-4" />
       </button>
     </div>
 
     <!-- Quick jumper -->
-    <div v-if="showQuickJumper" class="flex items-center gap-2">
-      <span class="text-sm text-muted-foreground">Go to page:</span>
+    <div v-if="showQuickJumper" class="tw:flex tw:items-center tw:gap-2">
+      <span class="tw:text-sm tw:text-muted-foreground">Go to page:</span>
       <input
         type="number"
         :min="1"

package/src/components/NS/progress/NSProgress.vue

@@ -71,9 +71,9 @@ const labelClasses = computed(() => {
 </script>
 
 <template>
-  <div class="space-y-2">
+  <div class="tw:space-y-2">
     <!-- Label -->
-    <div v-if="showLabel && (label || $slots.label)" class="flex items-center justify-between">
+    <div v-if="showLabel && (label || $slots.label)" class="tw:flex tw:items-center tw:justify-between">
       <div :class="labelClasses">
         <slot name="label">{{ label }}</slot>
       </div>
@@ -94,7 +94,7 @@ const labelClasses = computed(() => {
     </div>
 
     <!-- Value display -->
-    <div v-if="$slots.value" class="text-sm text-muted-foreground">
+    <div v-if="$slots.value" class="tw:text-sm tw:text-muted-foreground">
       <slot name="value" :value="value" :percentage="percentage" />
     </div>
   </div>

package/src/components/NS/progress/NSProgressBar.vue

@@ -78,9 +78,9 @@ const labelClasses = computed(() => {
 </script>
 
 <template>
-  <div class="space-y-2">
+  <div class="tw:space-y-2">
     <!-- Label -->
-    <div v-if="showLabel && (label || $slots.label)" class="flex items-center justify-between">
+    <div v-if="showLabel && (label || $slots.label)" class="tw:flex tw:items-center tw:justify-between">
       <div :class="labelClasses">
         <slot name="label">{{ label }}</slot>
       </div>
@@ -101,13 +101,13 @@ const labelClasses = computed(() => {
         <!-- Animated shimmer effect -->
         <div 
           v-if="animated && !indeterminate" 
-          class="h-full w-full bg-gradient-to-r from-transparent via-white/20 to-transparent animate-[shimmer_2s_ease-in-out_infinite]"
+          class="tw:h-full tw:w-full tw:bg-gradient-to-r tw:from-transparent tw:via-white/20 tw:to-transparent tw:animate-[shimmer_2s_ease-in-out_infinite]"
         />
       </div>
     </div>
 
     <!-- Value display -->
-    <div v-if="$slots.value" class="text-sm text-muted-foreground">
+    <div v-if="$slots.value" class="tw:text-sm tw:text-muted-foreground">
       <slot name="value" :value="value" :percentage="percentage" />
     </div>
   </div>

package/src/components/NS/slider/NSByteSlider.vue

@@ -105,7 +105,7 @@ const decimals = computed(() => {
     <!-- Label -->
     <div 
       v-if="showLabel && (label || $slots.label)" 
-      class="flex items-center justify-between mb-2"
+      class="tw:flex tw:items-center tw:justify-between tw:mb-2"
     >
       <div :class="labelClasses">
         <slot name="label">{{ label }}</slot>
@@ -131,13 +131,13 @@ const decimals = computed(() => {
     </SliderRoot>
 
     <!-- Scale markers for byte units -->
-    <div class="relative mt-2 flex justify-between text-xs text-muted-foreground">
+    <div class="tw:relative tw:mt-2 tw:flex tw:justify-between tw:text-xs tw:text-muted-foreground">
       <span v-if="showByteUnits">{{ formatBytes(min) }}</span>
       <span v-if="showByteUnits">{{ formatBytes(max) }}</span>
     </div>
 
     <!-- Custom value display -->
-    <div v-if="$slots.value" class="mt-2">
+    <div v-if="$slots.value" class="tw:mt-2">
       <slot name="value" :value="value" :display-value="displayValue" />
     </div>
   </div>

package/src/components/NS/slider/NSSlider.vue

@@ -104,7 +104,7 @@ const valueClasses = computed(() => {
     <!-- Label -->
     <div 
       v-if="showLabel && (label || $slots.label)" 
-      class="flex items-center justify-between mb-2"
+      class="tw:flex tw:items-center tw:justify-between tw:mb-2"
     >
       <div :class="labelClasses">
         <slot name="label">{{ label }}</slot>
@@ -135,7 +135,7 @@ const valueClasses = computed(() => {
     </SliderRoot>
 
     <!-- Custom value display -->
-    <div v-if="$slots.value" class="mt-2">
+    <div v-if="$slots.value" class="tw:mt-2">
       <slot name="value" :value="value" :display-value="displayValue" />
     </div>
   </div>

package/src/components/NS/tag/NSTag.vue

@@ -99,21 +99,21 @@ const handleKeydown = (event: KeyboardEvent) => {
     tabindex="0"
   >
     <!-- Icon slot/component -->
-    <div v-if="icon && !isFilter" class="flex items-center justify-center">
+    <div v-if="icon && !isFilter" class="tw:flex tw:items-center tw:justify-center">
       <component 
         v-if="typeof icon === 'object'" 
         :is="icon" 
-        class="h-3 w-3" 
+        class="tw:h-3 tw:w-3" 
       />
       <div 
         v-else-if="typeof icon === 'string'" 
         v-html="icon" 
-        class="h-3 w-3" 
+        class="tw:h-3 tw:w-3" 
       />
     </div>
 
     <!-- Label content -->
-    <span class="truncate max-w-[200px]">
+    <span class="tw:truncate tw:max-w-[200px]">
       <slot>{{ label }}</slot>
     </span>
 
@@ -121,8 +121,7 @@ const handleKeydown = (event: KeyboardEvent) => {
     <button
       v-if="isFilter"
       type="button"
-      :class="cn(
-        'flex items-center justify-center rounded-full hover:bg-black/10 dark:hover:bg-white/10 transition-colors',
+      :class="cn( 'flex items-center justify-center rounded-full hover:bg-black/10 dark:hover:bg-white/10 transition-colors',
         'ml-1 -mr-1 h-4 w-4 p-0',
         {
           'opacity-50 cursor-not-allowed': disabled,
@@ -133,7 +132,7 @@ const handleKeydown = (event: KeyboardEvent) => {
       :title="clearAriaLabel"
       @click="handleRemove"
     >
-      <X class="h-3 w-3" />
+      <X class="tw:h-3 tw:w-3" />
     </button>
   </component>
 </template>