@geniusdynamics/ns8-ui-lib 1.0.0

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

@@ -0,0 +1,142 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { SliderRoot, SliderTrack, SliderRange, SliderThumb } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+interface Props {
+  modelValue?: number | number[]
+  defaultValue?: number | number[]
+  min?: number
+  max?: number
+  step?: number
+  disabled?: boolean
+  orientation?: 'horizontal' | 'vertical'
+  showLabel?: boolean
+  label?: string
+  showValue?: boolean
+  formatValue?: (value: number) => string
+  class?: string
+  trackClass?: string
+  thumbClass?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  min: 0,
+  max: 100,
+  step: 1,
+  orientation: 'horizontal',
+  showLabel: false,
+  showValue: true,
+  formatValue: (value: number) => value.toString(),
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: number | number[]]
+}>()
+
+const value = computed({
+  get: () => props.modelValue ?? props.defaultValue ?? 0,
+  set: (value: number | number[]) => {
+    emit('update:modelValue', value)
+  }
+})
+
+const isRange = computed(() => Array.isArray(value.value))
+
+const displayValue = computed(() => {
+  if (isRange.value) {
+    return (value.value as number[]).map(v => props.formatValue(v)).join(' - ')
+  }
+  return props.formatValue(value.value as number)
+})
+
+const containerClasses = computed(() => {
+  const baseClasses = 'relative'
+  
+  return cn(baseClasses, props.class)
+})
+
+const rootClasses = computed(() => {
+  const baseClasses = 'relative flex w-full touch-none select-none items-center'
+  
+  const orientationClasses = {
+    horizontal: 'flex-col',
+    vertical: 'w-auto h-full flex-row'
+  }
+
+  return cn(baseClasses, orientationClasses[props.orientation])
+})
+
+const trackClasses = computed(() => {
+  const baseClasses = 'relative h-2 w-full grow overflow-hidden rounded-full bg-secondary'
+  
+  const orientationClasses = {
+    horizontal: 'h-2 w-full',
+    vertical: 'w-2 h-full'
+  }
+
+  return cn(baseClasses, orientationClasses[props.orientation], props.trackClass)
+})
+
+const rangeClasses = computed(() => {
+  const baseClasses = 'absolute h-full bg-primary'
+  
+  return cn(baseClasses)
+})
+
+const thumbClasses = computed(() => {
+  const baseClasses = 'block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background 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'
+  
+  return cn(baseClasses, props.thumbClass)
+})
+
+const labelClasses = computed(() => {
+  return 'text-sm font-medium text-foreground'
+})
+
+const valueClasses = computed(() => {
+  return 'text-sm text-muted-foreground'
+})
+</script>
+
+<template>
+  <div :class="containerClasses">
+    <!-- Label -->
+    <div 
+      v-if="showLabel && (label || $slots.label)" 
+      class="flex items-center justify-between mb-2"
+    >
+      <div :class="labelClasses">
+        <slot name="label">{{ label }}</slot>
+      </div>
+      <div v-if="showValue" :class="valueClasses">
+        {{ displayValue }}
+      </div>
+    </div>
+
+    <!-- Slider -->
+    <SliderRoot
+      :class="rootClasses"
+      v-model="value"
+      :min="min"
+      :max="max"
+      :step="step"
+      :disabled="disabled"
+      :orientation="orientation"
+    >
+      <SliderTrack :class="trackClasses">
+        <SliderRange :class="rangeClasses" />
+      </SliderTrack>
+      <SliderThumb 
+        v-for="(_, index) in isRange ? 2 : 1" 
+        :key="index"
+        :class="thumbClasses" 
+      />
+    </SliderRoot>
+
+    <!-- Custom value display -->
+    <div v-if="$slots.value" class="mt-2">
+      <slot name="value" :value="value" :display-value="displayValue" />
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,139 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { X } from 'lucide-vue-next'
+import { cn } from '@/lib/utils'
+
+interface Props {
+  label?: string
+  variant?: 'default' | 'secondary' | 'destructive' | 'outline' | 'success' | 'warning' | 'info' | 'gray'
+  size?: 'default' | 'sm' | 'lg'
+  interactive?: boolean
+  removable?: boolean
+  disabled?: boolean
+  icon?: string | object
+  clearAriaLabel?: string
+  title?: string
+  class?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'default',
+  size: 'default',
+  interactive: false,
+  removable: false,
+  clearAriaLabel: 'Remove tag',
+})
+
+const emit = defineEmits<{
+  remove: []
+  click: [event: Event]
+}>()
+
+const isClickable = computed(() => props.interactive && !props.disabled)
+const isFilter = computed(() => props.removable)
+
+const tagClasses = computed(() => {
+  const baseClasses = 'inline-flex items-center gap-1 rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2'
+  
+  const variantClasses = {
+    default: 'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
+    secondary: 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+    destructive: 'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
+    outline: 'text-foreground',
+    success: 'border-transparent bg-green-500 text-white hover:bg-green-600',
+    warning: 'border-transparent bg-orange-500 text-white hover:bg-orange-600',
+    info: 'border-transparent bg-blue-500 text-white hover:bg-blue-600',
+    gray: 'border-transparent bg-gray-100 text-gray-800 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700'
+  }
+
+  const sizeClasses = {
+    default: 'px-2.5 py-0.5 text-xs',
+    sm: 'px-2 py-0.5 text-xs',
+    lg: 'px-3 py-1 text-sm'
+  }
+
+  return cn(
+    baseClasses,
+    variantClasses[props.variant],
+    sizeClasses[props.size],
+    {
+      'cursor-pointer hover:opacity-80': isClickable.value,
+      'opacity-50 cursor-not-allowed': disabled,
+      'cursor-default': isFilter.value && !interactive,
+    },
+    props.class
+  )
+})
+
+const handleClick = (event: Event) => {
+  if (isClickable.value) {
+    emit('click', event)
+  }
+}
+
+const handleRemove = (event: Event) => {
+  event.stopPropagation()
+  if (!props.disabled) {
+    emit('remove')
+  }
+}
+
+const handleKeydown = (event: KeyboardEvent) => {
+  if (isFilter.value && (event.key === 'Enter' || event.key === ' ')) {
+    event.preventDefault()
+    handleRemove(event)
+  }
+}
+</script>
+
+<template>
+  <component
+    :is="isClickable ? 'button' : 'div'"
+    :class="tagClasses"
+    :disabled="disabled"
+    :title="title || label"
+    @click="handleClick"
+    @keydown="handleKeydown"
+    :aria-label="label"
+    role="button"
+    tabindex="0"
+  >
+    <!-- Icon slot/component -->
+    <div v-if="icon && !isFilter" class="flex items-center justify-center">
+      <component 
+        v-if="typeof icon === 'object'" 
+        :is="icon" 
+        class="h-3 w-3" 
+      />
+      <div 
+        v-else-if="typeof icon === 'string'" 
+        v-html="icon" 
+        class="h-3 w-3" 
+      />
+    </div>
+
+    <!-- Label content -->
+    <span class="truncate max-w-[200px]">
+      <slot>{{ label }}</slot>
+    </span>
+
+    <!-- Remove button for filter tags -->
+    <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',
+        'ml-1 -mr-1 h-4 w-4 p-0',
+        {
+          'opacity-50 cursor-not-allowed': disabled,
+        }
+      )"
+      :disabled="disabled"
+      :aria-label="clearAriaLabel"
+      :title="clearAriaLabel"
+      @click="handleRemove"
+    >
+      <X class="h-3 w-3" />
+    </button>
+  </component>
+</template>

package/src/components/NS/text-input/NSTextInput.vue

@@ -0,0 +1,242 @@
+<script setup lang="ts">
+import { computed, ref, nextTick, useId } from 'vue'
+import { Eye, EyeOff, AlertCircle, AlertTriangle, CheckCircle } from 'lucide-vue-next'
+import { cn } from '@/lib/utils'
+
+interface Props {
+  modelValue?: string
+  value?: string
+  defaultValue?: string
+  type?: string
+  placeholder?: string
+  disabled?: boolean
+  readonly?: boolean
+  required?: boolean
+  name?: string
+  id?: string
+  label?: string
+  description?: string
+  errorMessage?: string
+  warningMessage?: string
+  successMessage?: string
+  helperText?: string
+  prefix?: string
+  suffix?: string
+  showPasswordToggle?: boolean
+  class?: string
+  labelClass?: string
+  inputClass?: string
+  containerClass?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'text',
+  showPasswordToggle: false,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+  'update:value': [value: string]
+  'focus': [event: FocusEvent]
+  'blur': [event: BlurEvent]
+  'input': [event: Event]
+  'change': [event: Event]
+}>()
+
+const uniqueId = useId()
+const inputId = props.id || uniqueId
+
+const isPasswordVisible = ref(false)
+const isFocused = ref(false)
+const inputRef = ref<HTMLInputElement>()
+
+const isPassword = computed(() => props.type === 'password')
+const actualType = computed(() => {
+  if (isPassword.value) {
+    return isPasswordVisible.value ? 'text' : 'password'
+  }
+  return props.type
+})
+
+const inputVariant = computed(() => {
+  if (props.errorMessage) return 'destructive'
+  if (props.warningMessage) return 'warning'
+  if (props.successMessage) return 'success'
+  return 'default'
+})
+
+const displayMessage = computed(() => {
+  if (props.errorMessage) return props.errorMessage
+  if (props.warningMessage) return props.warningMessage
+  if (props.successMessage) return props.successMessage
+  if (props.helperText) return props.helperText
+  return ''
+})
+
+const StatusIcon = computed(() => {
+  if (props.errorMessage) return AlertCircle
+  if (props.warningMessage) return AlertTriangle
+  if (props.successMessage) return CheckCircle
+  return null
+})
+
+const internalValue = computed({
+  get: () => props.modelValue ?? props.value ?? '',
+  set: (value: string) => {
+    emit('update:modelValue', value)
+    emit('update:value', value)
+  }
+})
+
+const togglePasswordVisibility = () => {
+  isPasswordVisible.value = !isPasswordVisible.value
+}
+
+const handleInput = (event: Event) => {
+  const target = event.target as HTMLInputElement
+  internalValue.value = target.value
+  emit('input', event)
+}
+
+const handleChange = (event: Event) => {
+  emit('change', event)
+}
+
+const handleFocus = (event: FocusEvent) => {
+  isFocused.value = true
+  emit('focus', event)
+}
+
+const handleBlur = (event: BlurEvent) => {
+  isFocused.value = false
+  emit('blur', event)
+}
+
+const focus = () => {
+  nextTick(() => {
+    inputRef.value?.focus()
+  })
+}
+
+defineExpose({
+  focus,
+  inputRef,
+})
+</script>
+
+<template>
+  <div :class="cn('grid w-full max-w-sm gap-1.5', containerClass)">
+    <label
+      v-if="label || $slots.label"
+      :for="inputId"
+      :class="cn(
+        'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+        {
+          'text-destructive': errorMessage,
+          'text-orange-600': warningMessage,
+          'text-green-600': successMessage
+        },
+        labelClass
+      )"
+    >
+      <slot name="label">{{ label }}</slot>
+    </label>
+
+    <div class="relative">
+      <span
+        v-if="prefix"
+        :class="cn(
+          'absolute left-3 top-1/2 transform -translate-y-1/2 text-sm text-muted-foreground',
+          {
+            'text-destructive': errorMessage,
+            'text-orange-600': warningMessage,
+            'text-green-600': successMessage
+          }
+        )"
+      >
+        {{ prefix }}
+      </span>
+
+      <input
+        :id="inputId"
+        ref="inputRef"
+        :type="actualType"
+        :class="cn(
+          'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
+          {
+            'pl-8': prefix,
+            'pr-16': (isPassword && showPasswordToggle) || StatusIcon,
+            'pr-12': StatusIcon && !(isPassword && showPasswordToggle),
+            'border-destructive text-destructive focus:border-destructive': inputVariant === 'destructive',
+            'border-orange-500 text-orange-600 focus:border-orange-500': inputVariant === 'warning',
+            'border-green-500 text-green-600 focus:border-green-500': inputVariant === 'success',
+            'ring-2 ring-ring ring-offset-2': isFocused,
+          },
+          inputClass
+        )"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        :readonly="readonly"
+        :required="required"
+        :name="name"
+        :value="internalValue"
+        @input="handleInput"
+        @change="handleChange"
+        @focus="handleFocus"
+        @blur="handleBlur"
+        v-bind="$attrs"
+      />
+
+      <div
+        v-if="StatusIcon || (isPassword && showPasswordToggle)"
+        class="absolute right-0 top-1/2 transform -translate-y-1/2 flex items-center gap-1 pr-3"
+      >
+        <component
+          v-if="StatusIcon"
+          :is="StatusIcon"
+          :class="cn('h-4 w-4', {
+            'text-destructive': inputVariant === 'destructive',
+            'text-orange-600': inputVariant === 'warning',
+            'text-green-600': inputVariant === 'success'
+          })"
+        />
+        
+        <button
+          v-if="isPassword && showPasswordToggle"
+          type="button"
+          :class="cn(
+            'text-muted-foreground hover:text-foreground transition-colors',
+            {
+              'pointer-events-none': disabled
+            }
+          )"
+          :disabled="disabled"
+          @click="togglePasswordVisibility"
+          :title="isPasswordVisible ? 'Hide password' : 'Show password'"
+        >
+          <EyeOff v-if="isPasswordVisible" class="h-4 w-4" />
+          <Eye v-else class="h-4 w-4" />
+        </button>
+      </div>
+    </div>
+
+    <p
+      v-if="displayMessage"
+      :class="cn('text-sm flex items-start gap-1', {
+        'text-muted-foreground': !errorMessage && !warningMessage && !successMessage,
+        'text-destructive': errorMessage,
+        'text-orange-600': warningMessage,
+        'text-green-600': successMessage
+      })"
+    >
+      <component
+        v-if="StatusIcon"
+        :is="StatusIcon"
+        class="h-4 w-4 mt-0.5 flex-shrink-0"
+      />
+      <span>{{ displayMessage }}</span>
+    </p>
+
+    <slot name="extra" />
+  </div>
+</template>

package/src/components/NS/toast-notification/NSToastNotification.vue

@@ -0,0 +1,163 @@
+<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'
+  duration?: number
+  showCloseButton?: boolean
+  actionLabel?: string
+  closeAriaLabel?: string
+  position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center'
+  loading?: boolean
+  class?: string
+  icon?: object
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'info',
+  duration: 5000,
+  showCloseButton: true,
+  closeAriaLabel: 'Close notification',
+  position: 'top-right',
+  loading: 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 = 'group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=cancel]:translate-x-0 data-[swipe=end]:animate-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full md:data-[state=open]:slide-in-from-right-full'
+  
+  const variantClasses = {
+    default: 'border-border bg-background text-foreground',
+    destructive: 'border-destructive/50 bg-destructive text-destructive-foreground',
+    warning: 'border-orange-500/50 bg-orange-500 text-white',
+    success: 'border-green-500/50 bg-green-500 text-white',
+    info: 'border-blue-500/50 bg-blue-500 text-white'
+  }
+
+  return cn(baseClasses, variantClasses[props.variant], props.class)
+})
+
+const positionClasses = computed(() => {
+  const baseClasses = 'fixed z-50 flex flex-col-reverse p-4'
+  
+  const positionMap = {
+    'top-right': 'top-0 right-0',
+    'top-left': 'top-0 left-0',
+    'bottom-right': 'bottom-0 right-0',
+    'bottom-left': 'bottom-0 left-0',
+    'top-center': 'top-0 left-1/2 -translate-x-1/2',
+    'bottom-center': 'bottom-0 left-1/2 -translate-x-1/2'
+  }
+
+  return cn(baseClasses, positionMap[props.position])
+})
+</script>
+
+<template>
+  <div :class="positionClasses">
+    <div :class="containerClasses">
+      <!-- Icon -->
+      <component
+        :is="NotificationIcon"
+        class="h-5 w-5 shrink-0"
+      />
+
+      <!-- Loading spinner -->
+      <Loader2 
+        v-if="loading"
+        class="h-5 w-5 shrink-0 animate-spin"
+      />
+
+      <!-- Content -->
+      <div class="grid gap-1">
+        <!-- Title -->
+        <div v-if="title || $slots.title" class="text-sm font-semibold">
+          <slot name="title">{{ title }}</slot>
+        </div>
+
+        <!-- Description -->
+        <div v-if="description || $slots.description" class="text-sm opacity-90">
+          <slot name="description">{{ description }}</slot>
+        </div>
+
+        <!-- Action button -->
+        <button
+          v-if="actionLabel"
+          type="button"
+          :class="cn(
+            'inline-flex items-center text-sm font-medium underline underline-offset-2 hover:no-underline',
+            {
+              'text-destructive-foreground': variant === 'destructive',
+              'text-white': ['warning', 'success', 'info'].includes(variant),
+              'text-foreground': variant === 'default'
+            }
+          )"
+          @click="emit('action')"
+        >
+          {{ actionLabel }}
+        </button>
+      </div>
+
+      <!-- Close button -->
+      <button
+        v-if="showCloseButton"
+        type="button"
+        :aria-label="closeAriaLabel"
+        :class="cn(
+          'absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100',
+          {
+            'text-destructive-foreground/50 hover:text-destructive-foreground': variant === 'destructive',
+            'text-white/50 hover:text-white': ['warning', 'success', 'info'].includes(variant)
+          }
+        )"
+        @click="emit('close')"
+      >
+        <X class="h-4 w-4" />
+      </button>
+
+      <!-- Progress bar for auto-dismiss -->
+      <div 
+        v-if="duration > 0"
+        class="absolute bottom-0 left-0 h-1 bg-black/20 dark:bg-white/20 animate-[shrink_x_var(--duration)_linear_forwards]"
+        :style="{ '--duration': `${duration}ms` }"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+@keyframes shrink-x {
+  from {
+    width: 100%;
+  }
+  to {
+    width: 0%;
+  }
+}
+</style>