@geniusdynamics/ns8-ui-lib 1.0.6 → 1.0.7

package/src/components/ui/tooltip/TooltipContent.vue

@@ -24,11 +24,11 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     <TooltipContent
       data-slot="tooltip-content"
       v-bind="{ ...forwarded, ...$attrs }"
-      :class="cn('tw:bg-foreground tw:text-background tw:animate-in tw:fade-in-0 tw:zoom-in-95 tw:data-[state=closed]:animate-out tw:data-[state=closed]:fade-out-0 tw:data-[state=closed]:zoom-out-95 tw:data-[side=bottom]:slide-in-from-top-2 tw:data-[side=left]:slide-in-from-right-2 tw:data-[side=right]:slide-in-from-left-2 tw:data-[side=top]:slide-in-from-bottom-2 tw:z-50 tw:w-fit tw:rounded-md tw:px-3 tw:py-1.5 tw:text-xs tw:text-balance', props.class)"
+      :class="cn('bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit rounded-md px-3 py-1.5 text-xs text-balance', props.class)"
     >
       <slot />
 
-      <TooltipArrow class=""tw:bg-foreground tw:fill-foreground tw:z-50 tw:size-2.5 tw:translate-y-[calc(-50%_-_2px)] tw:rotate-45 tw:rounded-[2px]"" />
+      <TooltipArrow class="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
     </TooltipContent>
   </TooltipPortal>
 </template>

package/src/components/ui/checkbox/NsCheckbox.vue

@@ -1,123 +0,0 @@
-<script setup lang="ts">
-import { computed, useId } from 'vue'
-import { CheckboxRoot, CheckboxIndicator } from 'reka-ui'
-import { Check } from 'lucide-vue-next'
-import { cn } from '@/lib/utils'
-import { checkboxVariants, labelVariants, type CheckboxVariants, type LabelVariants } from '.'
-
-interface Props {
-  modelValue?: boolean
-  checked?: boolean
-  defaultChecked?: boolean
-  disabled?: boolean
-  required?: boolean
-  name?: string
-  value?: string
-  id?: string
-  label?: string
-  hideLabel?: boolean
-  description?: string
-  errorMessage?: string
-  variant?: CheckboxVariants['variant']
-  size?: CheckboxVariants['size']
-  labelVariant?: LabelVariants['variant']
-  class?: string
-  labelClass?: string
-  indeterminate?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  variant: 'default',
-  size: 'default',
-  labelVariant: 'default',
-})
-
-const emit = defineEmits<{
-  'update:modelValue': [value: boolean]
-  'update:checked': [value: boolean]
-}>()
-
-const uniqueId = useId()
-const checkboxId = props.id || uniqueId
-
-const isChecked = computed({
-  get: () => props.modelValue ?? props.checked ?? false,
-  set: (value: boolean) => {
-    emit('update:modelValue', value)
-    emit('update:checked', value)
-  }
-})
-</script>
-
-<template>
-  <div :class="cn('flex items-start space-x-2', props.class)">
-    <CheckboxRoot
-      :id="checkboxId"
-      v-model:checked="isChecked"
-      :default-checked="defaultChecked"
-      :disabled="disabled"
-      :required="required"
-      :name="name"
-      :value="value"
-      :class="cn(checkboxVariants({ variant, size }))"
-      :data-indeterminate="indeterminate"
-    >
-      <CheckboxIndicator 
-        :class="cn('flex items-center justify-center text-current', {
-          'opacity-50': indeterminate
-        })"
-      >
-        <Check 
-          v-if="!indeterminate" 
-          :class="cn('h-4 w-4', {
-            'h-3.5 w-3.5': size === 'sm',
-            'h-5 w-5': size === 'lg'
-          })" 
-        />
-        <div 
-          v-else 
-          :class="cn('h-1 w-2 bg-current rounded-sm', {
-            'h-0.5 w-1.5': size === 'sm',
-            'h-1.5 w-2.5': size === 'lg'
-          })" 
-        />
-      </CheckboxIndicator>
-    </CheckboxRoot>
-
-    <div class="grid gap-1.5">
-      <label
-        v-if="label || $slots.label"
-        :for="checkboxId"
-        :class="cn(
-          labelVariants({ variant: labelVariant }),
-          'cursor-pointer',
-          {
-            'sr-only': hideLabel,
-            'cursor-not-allowed': disabled
-          },
-          labelClass
-        )"
-      >
-        <slot name="label">{{ label }}</slot>
-      </label>
-
-      <p
-        v-if="description"
-        :class="cn('text-sm text-muted-foreground', {
-          'text-destructive': errorMessage
-        })"
-      >
-        {{ description }}
-      </p>
-
-      <p
-        v-if="errorMessage"
-        class="text-sm text-destructive"
-      >
-        {{ errorMessage }}
-      </p>
-
-      <slot name="extra" />
-    </div>
-  </div>
-</template>

package/src/components/ui/empty-state/NsEmptyState.vue

@@ -1,149 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import { FileX, Search, InBox, AlertCircle, Info } from 'lucide-vue-next'
-import { cn } from '@/lib/utils'
-import { emptyStateVariants, iconVariants, type EmptyStateVariants } from '.'
-
-interface Props {
-  title?: string
-  description?: string
-  icon?: string | object // Lucide icon name or component
-  animationData?: any
-  animationTitle?: string
-  size?: EmptyStateVariants['size']
-  variant?: EmptyStateVariants['variant']
-  loop?: boolean | number
-  animateOnHover?: boolean
-  autoPlay?: boolean
-  class?: string
-  iconClass?: string
-  titleClass?: string
-  descriptionClass?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  title: 'No data available',
-  size: 'default',
-  variant: 'default',
-  loop: true,
-  animateOnHover: false,
-  autoPlay: true,
-})
-
-const DefaultIcon = computed(() => {
-  if (props.icon) {
-    return null // Use custom icon
-  }
-  
-  // Choose appropriate default icon based on title content
-  const title = props.title?.toLowerCase() || ''
-  
-  if (title.includes('search') || title.includes('find') || title.includes('result')) {
-    return Search
-  } else if (title.includes('empty') || title.includes('no') || title.includes('data')) {
-    return FileX
-  } else if (title.includes('message') || title.includes('notification') || title.includes('alert')) {
-    return InBox
-  } else if (title.includes('error') || title.includes('warning')) {
-    return AlertCircle
-  } else {
-    return Info
-  }
-})
-
-const iconComponent = computed(() => {
-  if (typeof props.icon === 'object') {
-    return props.icon // Vue component
-  }
-  
-  if (typeof props.icon === 'string') {
-    // Map string to Lucide icons
-    const iconMap: Record<string, any> = {
-      'file-x': FileX,
-      'search': Search,
-      'inbox': InBox,
-      'alert-circle': AlertCircle,
-      'info': Info,
-    }
-    
-    return iconMap[props.icon] || DefaultIcon.value
-  }
-  
-  return DefaultIcon.value
-})
-
-const hasIconSlot = computed(() => !!$slots.icon)
-const hasDescriptionSlot = computed(() => !!$slots.description)
-const hasActionsSlot = computed(() => !!$slots.actions)
-</script>
-
-<template>
-  <div :class="cn(emptyStateVariants({ size, variant }), props.class)">
-    <!-- Icon section -->
-    <div class="mb-4">
-      <slot name="icon">
-        <!-- Lottie animation if provided -->
-        <div
-          v-if="animationData"
-          :class="cn(iconVariants({ size }))"
-          :title="animationTitle || title"
-        >
-          <!-- You can integrate a Lottie component here -->
-          <component 
-            :is="iconComponent" 
-            :class="cn(iconVariants({ size }), props.iconClass)"
-          />
-        </div>
-        
-        <!-- Custom icon or default Lucide icon -->
-        <component
-          v-else-if="iconComponent && !hasIconSlot"
-          :is="iconComponent"
-          :class="cn(iconVariants({ size }), props.iconClass)"
-        />
-      </slot>
-    </div>
-
-    <!-- Title section -->
-    <h3
-      v-if="title || $slots.title"
-      :class="cn(
-        'text-lg font-semibold mb-2',
-        {
-          'text-foreground': variant === 'default',
-          'text-muted-foreground': variant === 'muted'
-        },
-        titleClass
-      )"
-    >
-      <slot name="title">{{ title }}</slot>
-    </h3>
-
-    <!-- Description section -->
-    <div
-      v-if="hasDescriptionSlot || description"
-      :class="cn(
-        'text-sm max-w-md mb-6',
-        {
-          'text-muted-foreground': variant === 'default',
-          'text-muted-foreground/70': variant === 'muted'
-        },
-        descriptionClass
-      )"
-    >
-      <slot name="description">
-        <p>{{ description }}</p>
-      </slot>
-    </div>
-
-    <!-- Actions section -->
-    <div v-if="hasActionsSlot" class="mt-4">
-      <slot name="actions" />
-    </div>
-
-    <!-- Extra content section -->
-    <div v-if="$slots.extra" class="mt-6">
-      <slot name="extra" />
-    </div>
-  </div>
-</template>

package/src/components/ui/inline-notification/NsInlineNotification.vue

@@ -1,163 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import { X, AlertCircle, AlertTriangle, CheckCircle, Info, Loader2 } from 'lucide-vue-next'
-import { cn } from '@/lib/utils'
-import { inlineNotificationVariants, type InlineNotificationVariants } from '.'
-
-interface Props {
-  title?: string
-  description?: string
-  variant?: InlineNotificationVariants['variant']
-  showCloseButton?: boolean
-  actionLabel?: string
-  closeAriaLabel?: string
-  loading?: boolean
-  timer?: number
-  lowContrast?: boolean
-  class?: string
-  icon?: object // Custom icon component
-}
-
-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 variantToKind = {
-  destructive: 'error',
-  warning: 'warning',
-  success: 'success',
-  info: 'info',
-  default: 'info'
-}
-
-const kind = computed(() => variantToKind[props.variant])
-
-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)
-
-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'
-})
-</script>
-
-<template>
-  <div
-    :class="cn(
-      inlineNotificationVariants({ variant }),
-      {
-        'opacity-75': lowContrast
-      },
-      props.class
-    )"
-    :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/ui/tag/NsTag.vue

@@ -1,114 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import { X } from 'lucide-vue-next'
-import { cn } from '@/lib/utils'
-import { tagVariants, type TagVariants } from '.'
-
-interface Props {
-  label?: string
-  variant?: TagVariants['variant']
-  size?: TagVariants['size']
-  interactive?: boolean
-  removable?: boolean
-  disabled?: boolean
-  icon?: string // SVG icon string or component
-  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 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="cn(
-      tagVariants({ variant, size, interactive }),
-      {
-        'opacity-50 cursor-not-allowed': disabled,
-        'cursor-default': isFilter && !interactive,
-      },
-      props.class
-    )"
-    :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>