@geniusdynamics/ns8-ui-lib 1.0.5 → 1.0.7

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>

package/src/components/ui/text-input/NsTextInput.vue

@@ -1,269 +0,0 @@
-<script setup lang="ts">
-import { computed, ref, useId, nextTick } from 'vue'
-import { Eye, EyeOff, AlertCircle, AlertTriangle, CheckCircle } from 'lucide-vue-next'
-import { cn } from '@/lib/utils'
-import { textInputVariants, labelVariants, helperTextVariants, type TextInputVariants, type LabelVariants, type HelperTextVariants } from '.'
-
-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
-  placeholder?: string
-  prefix?: string
-  suffix?: string
-  variant?: TextInputVariants['variant']
-  size?: TextInputVariants['size']
-  labelVariant?: LabelVariants['variant']
-  class?: string
-  labelClass?: string
-  inputClass?: string
-  containerClass?: string
-  showPasswordToggle?: boolean
-  validateOnChange?: boolean
-  validator?: (value: string) => string | null
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  type: 'text',
-  variant: 'default',
-  size: 'default',
-  labelVariant: 'default',
-  showPasswordToggle: false,
-  validateOnChange: false,
-})
-
-const emit = defineEmits<{
-  'update:modelValue': [value: string]
-  'update:value': [value: string]
-  'focus': [event: FocusEvent]
-  'blur': [event: FocusEvent]
-  '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((): TextInputVariants['variant'] => {
-  if (props.errorMessage) return 'destructive'
-  if (props.warningMessage) return 'warning'
-  if (props.successMessage) return 'success'
-  return props.variant
-})
-
-const labelVariant = computed((): LabelVariants['variant'] => {
-  if (props.errorMessage) return 'destructive'
-  if (props.warningMessage) return 'warning'
-  if (props.successMessage) return 'success'
-  return props.labelVariant
-})
-
-const helperTextVariant = computed((): HelperTextVariants['variant'] => {
-  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 PasswordIcon = computed(() => isPasswordVisible.value ? EyeOff : Eye)
-
-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: FocusEvent) => {
-  isFocused.value = false
-  if (props.validateOnChange && props.validator) {
-    const error = props.validator(internalValue.value)
-    // You might want to emit validation errors or handle them differently
-  }
-  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(
-        labelVariants({ variant: labelVariant }),
-        'flex items-center gap-1',
-        {
-          'cursor-not-allowed': disabled
-        },
-        labelClass
-      )"
-    >
-      <slot name="label">{{ label }}</slot>
-      <slot name="label-addon" />
-    </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': variant === 'destructive',
-            'text-orange-600': variant === 'warning',
-            'text-green-600': variant === 'success'
-          }
-        )"
-      >
-        {{ prefix }}
-      </span>
-
-      <input
-        :id="inputId"
-        ref="inputRef"
-        :type="actualType"
-        :class="cn(
-          textInputVariants({ variant: inputVariant, size }),
-          {
-            'pl-8': prefix,
-            'pr-16': (isPassword && showPasswordToggle) || StatusIcon,
-            'pr-12': StatusIcon && !(isPassword && showPasswordToggle),
-            '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="cn(
-          'absolute right-0 top-1/2 transform -translate-y-1/2 flex items-center gap-1 pr-3',
-          {
-            'pointer-events-none': StatusIcon && !(isPassword && showPasswordToggle)
-          }
-        )"
-      >
-        <component
-          v-if="StatusIcon"
-          :is="StatusIcon"
-          :class="cn('h-4 w-4', {
-            'text-destructive': variant === 'destructive',
-            'text-orange-600': variant === 'warning',
-            'text-green-600': variant === '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'"
-        >
-          <component :is="PasswordIcon" class="h-4 w-4" />
-        </button>
-      </div>
-    </div>
-
-    <p
-      v-if="displayMessage"
-      :class="cn(helperTextVariants({ variant: helperTextVariant }), 'flex items-start gap-1')"
-    >
-      <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/ui/toggle/NsToggle.vue

@@ -1,126 +0,0 @@
-<script setup lang="ts">
-import { computed, useId } from 'vue'
-import { SwitchRoot, SwitchThumb } from 'reka-ui'
-import { cn } from '@/lib/utils'
-import { toggleVariants, toggleThumbVariants, labelVariants, type ToggleVariants, 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
-  leftText?: string
-  rightText?: string
-  variant?: ToggleVariants['variant']
-  size?: ToggleVariants['size']
-  labelVariant?: LabelVariants['variant']
-  class?: string
-  labelClass?: string
-  containerClass?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  variant: 'default',
-  size: 'default',
-  labelVariant: 'default',
-  leftText: 'Off',
-  rightText: 'On',
-})
-
-const emit = defineEmits<{
-  'update:modelValue': [value: boolean]
-  'update:checked': [value: boolean]
-}>()
-
-const uniqueId = useId()
-const toggleId = 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-center gap-3', containerClass)">
-    <SwitchRoot
-      :id="toggleId"
-      v-model:checked="isChecked"
-      :default-checked="defaultChecked"
-      :disabled="disabled"
-      :required="required"
-      :name="name"
-      :value="value"
-      :class="cn(toggleVariants({ variant, size }), props.class)"
-    >
-      <SwitchThumb :class="toggleThumbVariants({ size })" />
-    </SwitchRoot>
-
-    <div class="grid gap-1.5">
-      <label
-        v-if="label || $slots.label"
-        :for="toggleId"
-        :class="cn(
-          labelVariants({ variant: labelVariant }),
-          'cursor-pointer',
-          {
-            'sr-only': hideLabel,
-            'cursor-not-allowed': disabled
-          },
-          labelClass
-        )"
-      >
-        <slot name="label">{{ label }}</slot>
-      </label>
-
-      <div
-        v-if="!hideLabel && (leftText || rightText || $slots['left-text'] || $slots['right-text'])"
-        :class="cn(
-          'flex items-center gap-2 text-xs font-medium',
-          {
-            'text-muted-foreground': !isChecked,
-            'text-primary': isChecked,
-            'text-destructive': variant === 'destructive' && isChecked,
-            'text-green-600': variant === 'success' && isChecked,
-            'text-orange-600': variant === 'warning' && isChecked,
-          }
-        )"
-      >
-        <span :class="{ 'opacity-50': isChecked }">
-          <slot name="left-text">{{ leftText }}</slot>
-        </span>
-        
-        <div :class="cn(
-          'w-8 h-px bg-current',
-          {
-            'opacity-20': !isChecked,
-            'opacity-100': isChecked
-          }
-        )" />
-        
-        <span :class="{ 'opacity-50': !isChecked }">
-          <slot name="right-text">{{ rightText }}</slot>
-        </span>
-      </div>
-
-      <p
-        v-if="description"
-        class="text-sm text-muted-foreground"
-      >
-        {{ description }}
-      </p>
-
-      <slot name="extra" />
-    </div>
-  </div>
-</template>