@geniusdynamics/ns8-ui-lib 1.0.0

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

@@ -0,0 +1,162 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { X, AlertCircle, AlertTriangle, CheckCircle, Info, Loader2 } from 'lucide-vue-next'
+import { cn } from '@/lib/utils'
+
+interface Props {
+  title?: string
+  description?: string
+  variant?: 'default' | 'destructive' | 'warning' | 'success' | 'info'
+  showCloseButton?: boolean
+  actionLabel?: string
+  closeAriaLabel?: string
+  loading?: boolean
+  timer?: number
+  lowContrast?: boolean
+  class?: string
+  icon?: object
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'info',
+  showCloseButton: false,
+  closeAriaLabel: 'Dismiss notification',
+  loading: false,
+  lowContrast: false,
+})
+
+const emit = defineEmits<{
+  close: []
+  action: []
+}>()
+
+const NotificationIcon = computed(() => {
+  if (props.icon) {
+    return props.icon
+  }
+  
+  switch (props.variant) {
+    case 'destructive':
+      return AlertCircle
+    case 'warning':
+      return AlertTriangle
+    case 'success':
+      return CheckCircle
+    case 'info':
+    default:
+      return Info
+  }
+})
+
+const containerClasses = computed(() => {
+  const baseClasses = 'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground'
+  
+  const variantClasses = {
+    default: 'bg-background text-foreground',
+    destructive: 'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
+    warning: 'border-orange-500/50 text-orange-800 dark:border-orange-500 [&>svg]:text-orange-500 dark:text-orange-400',
+    success: 'border-green-500/50 text-green-800 dark:border-green-500 [&>svg]:text-green-500 dark:text-green-400',
+    info: 'border-blue-500/50 text-blue-800 dark:border-blue-500 [&>svg]:text-blue-500 dark:text-blue-400'
+  }
+
+  return cn(baseClasses, variantClasses[props.variant], {
+    'opacity-75': props.lowContrast
+  }, props.class)
+})
+
+const role = computed(() => {
+  if (props.variant === 'destructive' || props.variant === 'warning') {
+    return 'alert'
+  }
+  return 'status'
+})
+
+const ariaLive = computed(() => {
+  if (props.variant === 'destructive') {
+    return 'assertive'
+  }
+  return 'polite'
+})
+
+const hasTitle = computed(() => props.title || $slots.title)
+const hasDescription = computed(() => props.description || $slots.description)
+const hasAction = computed(() => props.actionLabel)
+const hasTimer = computed(() => props.timer)
+const hasLoading = computed(() => props.loading)
+
+const showCloseButtonVisible = computed(() => props.showCloseButton && !hasLoading.value)
+</script>
+
+<template>
+  <div
+    :class="containerClasses"
+    :role="role"
+    :aria-live="ariaLive"
+  >
+    <!-- Icon -->
+    <component
+      :is="NotificationIcon"
+      class="h-4 w-4"
+    />
+
+    <!-- Loading spinner -->
+    <Loader2 
+      v-if="loading"
+      class="h-4 w-4 animate-spin absolute right-12 top-4"
+    />
+
+    <!-- Timer circle -->
+    <div
+      v-if="timer"
+      class="h-4 w-4 absolute right-12 top-4"
+    >
+      <!-- You can integrate NSCircleTimer component here -->
+      <div class="h-4 w-4 rounded-full border-2 border-current animate-pulse" />
+    </div>
+
+    <!-- Content -->
+    <div class="grid gap-1">
+      <!-- Title -->
+      <h4
+        v-if="hasTitle"
+        class="text-sm font-medium leading-none"
+      >
+        <slot name="title">{{ title }}</slot>
+      </h4>
+
+      <!-- Description -->
+      <p
+        v-if="hasDescription"
+        :class="cn('text-sm opacity-90', {
+          'mr-12': hasAction || showCloseButtonVisible || hasTimer || hasLoading
+        })"
+      >
+        <slot name="description">{{ description }}</slot>
+      </p>
+
+      <!-- Action button -->
+      <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"
+        @click="emit('action')"
+      >
+        {{ actionLabel }}
+      </button>
+    </div>
+
+    <!-- Close button -->
+    <button
+      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"
+      @click="emit('close')"
+    >
+      <X class="h-4 w-4" />
+    </button>
+
+    <!-- Extra content -->
+    <slot name="extra" />
+  </div>
+</template>

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

@@ -0,0 +1,255 @@
+<script setup lang="ts">
+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
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  width: 200,
+  height: 200,
+  loop: false,
+  autoplay: true,
+  speed: 1,
+  playOnHover: false,
+  stopOnHoverOut: false,
+  direction: 1,
+  renderer: 'svg',
+  lazy: false,
+  responsive: true,
+  preserveAspectRatio: 'xMidYMid meet',
+  role: 'img',
+})
+
+const emit = defineEmits<{
+  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>>()
+
+// Computed properties
+const lottieOptions = computed(() => ({
+  path: props.path,
+  animationData: props.animationData,
+  loop: props.loop,
+  autoplay: props.autoplay && !props.playOnHover,
+  renderer: props.renderer,
+  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,
+}))
+
+const containerClasses = computed(() => {
+  return cn(
+    'relative inline-block',
+    {
+      'opacity-50': isLoading.value,
+      'opacity-100': !isLoading.value,
+    },
+    props.containerClassName
+  )
+})
+
+const playerClasses = computed(() => {
+  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')
+  }
+}
+
+const pause = () => {
+  if (lottieRef.value && isPlaying.value) {
+    lottieRef.value.pause()
+    isPlaying.value = false
+    emit('pause')
+  }
+}
+
+const stop = () => {
+  if (lottieRef.value) {
+    lottieRef.value.stop()
+    isPlaying.value = false
+    emit('stop')
+  }
+}
+
+const goToAndStop = (frame?: number) => {
+  if (lottieRef.value) {
+    lottieRef.value.goToAndStop(frame || 0, true)
+  }
+}
+
+const setDirection = (direction: number) => {
+  if (lottieRef.value) {
+    lottieRef.value.setDirection(direction)
+  }
+}
+
+const setSpeed = (speed: number) => {
+  if (lottieRef.value) {
+    lottieRef.value.setSpeed(speed)
+  }
+}
+
+// Event handlers
+const handleDataReady = () => {
+  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'))
+}
+
+const handleDOMLoaded = () => {
+  emit('load')
+}
+
+const handleComplete = () => {
+  emit('complete')
+}
+
+const handleLoopComplete = () => {
+  emit('loopComplete')
+}
+
+const handleEnterFrame = (event: any) => {
+  emit('enterFrame', event)
+}
+
+// Hover handlers
+const handleMouseOver = () => {
+  if (props.playOnHover && !isPlaying.value) {
+    play()
+  }
+  emit('mouseOver')
+}
+
+const handleMouseOut = () => {
+  if (props.stopOnHoverOut && isPlaying.value) {
+    pause()
+  }
+  emit('mouseOut')
+}
+
+// Watch for prop changes
+watch([() => props.path, () => props.animationData], () => {
+  isLoading.value = true
+  isLoaded.value = false
+  isError.value = false
+})
+
+watch(() => props.speed, (newSpeed) => {
+  setSpeed(newSpeed)
+})
+
+watch(() => props.direction, (newDirection) => {
+  setDirection(newDirection)
+})
+
+// Expose methods
+defineExpose({
+  play,
+  pause,
+  stop,
+  goToAndStop,
+  setDirection,
+  setSpeed,
+  isLoaded,
+  isPlaying,
+  isLoading,
+  isError,
+})
+</script>
+
+<template>
+  <div 
+    :class="containerClasses"
+    :style="containerStyle"
+    :title="title"
+    :aria-label="ariaLabel"
+    :role="role"
+    @mouseover="handleMouseOver"
+    @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>
+
+    <!-- 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>
+
+    <!-- Lottie Animation -->
+    <LottieAnimation
+      v-if="path || animationData"
+      ref="lottieRef"
+      :options="lottieOptions"
+      :width="width"
+      :height="height"
+      :class="playerClasses"
+      @onDataReady="handleDataReady"
+      @onDataFailed="handleDataFailed"
+      @onDOMLoaded="handleDOMLoaded"
+      @onComplete="handleComplete"
+      @onLoopComplete="handleLoopComplete"
+      @onEnterFrame="handleEnterFrame"
+    />
+  </div>
+</template>

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

@@ -0,0 +1,193 @@
+<script setup lang="ts">
+import { computed, watch, nextTick } from 'vue'
+import { X, Maximize2, Minimize2 } from 'lucide-vue-next'
+import { 
+  DialogClose, 
+  DialogContent, 
+  DialogDescription, 
+  DialogOverlay, 
+  DialogPortal, 
+  DialogTitle, 
+  DialogTrigger 
+} from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+interface Props {
+  open?: boolean
+  modelValue?: boolean
+  title?: string
+  description?: string
+  showCloseButton?: boolean
+  closeOnOverlayClick?: boolean
+  closeOnEscape?: boolean
+  size?: 'sm' | 'default' | 'lg' | 'xl' | 'full'
+  maxWidth?: string
+  maxHeight?: string
+  persistent?: boolean
+  fullscreen?: boolean
+  class?: string
+  contentClass?: string
+  overlayClass?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  showCloseButton: true,
+  closeOnOverlayClick: true,
+  closeOnEscape: true,
+  size: 'default',
+  persistent: false,
+  fullscreen: false,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+  'update:open': [value: boolean]
+  'open': []
+  'close': []
+}>()
+
+const isOpen = computed({
+  get: () => props.modelValue ?? props.open ?? false,
+  set: (value: boolean) => {
+    emit('update:modelValue', value)
+    emit('update:open', value)
+    if (value) {
+      emit('open')
+    } else {
+      emit('close')
+    }
+  }
+})
+
+const isFullscreen = computed(() => props.fullscreen)
+
+const contentClasses = computed(() => {
+  const baseClasses = 'relative z-50 grid w-full gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full'
+  
+  const sizeClasses = {
+    sm: 'max-w-md',
+    default: 'max-w-lg',
+    lg: 'max-w-2xl',
+    xl: 'max-w-4xl',
+    full: 'max-w-screen-2xl'
+  }
+
+  const fullscreenClasses = isFullscreen.value 
+    ? 'w-screen h-screen max-w-none rounded-none border-none p-0'
+    : ''
+
+  return cn(
+    baseClasses, 
+    sizeClasses[props.size],
+    fullscreenClasses,
+    props.contentClass
+  )
+})
+
+const overlayClasses = computed(() => {
+  const baseClasses = 'fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0'
+  
+  return cn(baseClasses, props.overlayClass)
+})
+
+const sizeStyle = computed(() => {
+  if (props.maxWidth || props.maxHeight) {
+    return {
+      maxWidth: props.maxWidth,
+      maxHeight: props.maxHeight
+    }
+  }
+  return {}
+})
+
+const handleClose = () => {
+  if (!props.persistent) {
+    isOpen.value = false
+  }
+}
+</script>
+
+<template>
+  <DialogPortal>
+    <DialogOverlay 
+      :class="overlayClasses"
+      @click="closeOnOverlayClick ? handleClose() : undefined"
+    />
+    <DialogContent
+      :class="contentClasses"
+      :style="sizeStyle"
+      :aria-describedby="description ? undefined : undefined"
+    >
+      <!-- Header -->
+      <div 
+        v-if="title || $slots.header || showCloseButton" 
+        :class="cn(
+          'flex items-center justify-between',
+          isFullscreen ? 'border-b p-6' : 'mb-4'
+        )"
+      >
+        <!-- Title and description -->
+        <div class="space-y-1">
+          <DialogTitle 
+            v-if="title || $slots.title"
+            class="text-lg font-semibold leading-none tracking-tight"
+          >
+            <slot name="title">{{ title }}</slot>
+          </DialogTitle>
+          <DialogDescription 
+            v-if="description || $slots.description"
+            class="text-sm text-muted-foreground"
+          >
+            <slot name="description">{{ description }}</slot>
+          </DialogDescription>
+        </div>
+
+        <!-- Close button -->
+        <div class="flex items-center 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"
+            :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" />
+          </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"
+          >
+            <X class="h-4 w-4" />
+            <span class="sr-only">Close</span>
+          </DialogClose>
+        </div>
+      </div>
+
+      <!-- Custom header slot -->
+      <slot name="header" />
+
+      <!-- Content -->
+      <div :class="cn('flex-1', isFullscreen ? 'p-6' : '')">
+        <slot />
+      </div>
+
+      <!-- Custom footer slot -->
+      <slot name="footer" />
+
+      <!-- Default actions -->
+      <div 
+        v-if="$slots.actions" 
+        :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'
+        )"
+      >
+        <slot name="actions" />
+      </div>
+    </DialogContent>
+  </DialogPortal>
+</template>

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

@@ -0,0 +1,109 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import NSModal from './NSModal.vue'
+
+interface Props {
+  modelValue?: boolean
+  open?: boolean
+  title?: string
+  description?: string
+  showCloseButton?: boolean
+  closeOnOverlayClick?: boolean
+  closeOnEscape?: boolean
+  size?: 'sm' | 'default' | 'lg' | 'xl' | 'full'
+  maxWidth?: string
+  maxHeight?: string
+  persistent?: boolean
+  fullscreen?: boolean
+  class?: string
+  contentClass?: string
+  overlayClass?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  showCloseButton: true,
+  closeOnOverlayClick: true,
+  closeOnEscape: true,
+  size: 'default',
+  persistent: false,
+  fullscreen: false,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+  'update:open': [value: boolean]
+  'open': []
+  'close': []
+}>()
+
+const isOpen = computed({
+  get: () => props.modelValue ?? props.open ?? false,
+  set: (value: boolean) => {
+    emit('update:modelValue', value)
+    emit('update:open', value)
+    if (value) {
+      emit('open')
+    } else {
+      emit('close')
+    }
+  }
+})
+
+const triggerRef = ref<HTMLElement>()
+</script>
+
+<template>
+  <!-- Use DialogTrigger to wrap trigger content -->
+  <slot name="trigger" :open="isOpen" :toggle="() => isOpen = !isOpen">
+    <button
+      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"
+    >
+      Open Modal
+    </button>
+  </slot>
+
+  <!-- Modal -->
+  <NSModal
+    v-model="isOpen"
+    :title="title"
+    :description="description"
+    :show-close-button="showCloseButton"
+    :close-on-overlay-click="closeOnOverlayClick"
+    :close-on-escape="closeOnEscape"
+    :size="size"
+    :max-width="maxWidth"
+    :max-height="maxHeight"
+    :persistent="persistent"
+    :fullscreen="fullscreen"
+    :class="class"
+    :content-class="contentClass"
+    :overlay-class="overlayClass"
+    @open="emit('open')"
+    @close="emit('close')"
+  >
+    <slot />
+    
+    <template #title>
+      <slot name="title" />
+    </template>
+    
+    <template #description>
+      <slot name="description" />
+    </template>
+    
+    <template #header>
+      <slot name="header" />
+    </template>
+    
+    <template #actions>
+      <slot name="actions" />
+    </template>
+    
+    <template #footer>
+      <slot name="footer" />
+    </template>
+  </NSModal>
+</template>