@geniusdynamics/ns8-ui-lib 1.0.0

package/src/components/ui/tabs/TabsTrigger.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { TabsTriggerProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { TabsTrigger, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<TabsTriggerProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TabsTrigger
+    data-slot="tabs-trigger"
+    :class="cn(
+      'data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+      props.class,
+    )"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </TabsTrigger>
+</template>

package/src/components/ui/tag/NsTag.vue

@@ -0,0 +1,114 @@
+<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

@@ -0,0 +1,269 @@
+<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/textarea/Textarea.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { useVModel } from "@vueuse/core"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+  defaultValue?: string | number
+  modelValue?: string | number
+}>()
+
+const emits = defineEmits<{
+  (e: "update:modelValue", payload: string | number): void
+}>()
+
+const modelValue = useVModel(props, "modelValue", emits, {
+  passive: true,
+  defaultValue: props.defaultValue,
+})
+</script>
+
+<template>
+  <textarea
+    v-model="modelValue"
+    data-slot="textarea"
+    :class="cn('border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm', props.class)"
+  />
+</template>

package/src/components/ui/toggle/NsToggle.vue

@@ -0,0 +1,126 @@
+<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>

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

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { TooltipRootEmits, TooltipRootProps } from "reka-ui"
+import { TooltipRoot, useForwardPropsEmits } from "reka-ui"
+
+const props = defineProps<TooltipRootProps>()
+const emits = defineEmits<TooltipRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <TooltipRoot
+    v-slot="slotProps"
+    data-slot="tooltip"
+    v-bind="forwarded"
+  >
+    <slot v-bind="slotProps" />
+  </TooltipRoot>
+</template>

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

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { TooltipContentEmits, TooltipContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { TooltipArrow, TooltipContent, TooltipPortal, useForwardPropsEmits } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<TooltipContentProps & { class?: HTMLAttributes["class"] }>(), {
+  sideOffset: 4,
+})
+
+const emits = defineEmits<TooltipContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <TooltipPortal>
+    <TooltipContent
+      data-slot="tooltip-content"
+      v-bind="{ ...forwarded, ...$attrs }"
+      :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="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/tooltip/TooltipProvider.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { TooltipProviderProps } from "reka-ui"
+import { TooltipProvider } from "reka-ui"
+
+const props = withDefaults(defineProps<TooltipProviderProps>(), {
+  delayDuration: 0,
+})
+</script>
+
+<template>
+  <TooltipProvider v-bind="props">
+    <slot />
+  </TooltipProvider>
+</template>

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

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { TooltipTriggerProps } from "reka-ui"
+import { TooltipTrigger } from "reka-ui"
+
+const props = defineProps<TooltipTriggerProps>()
+</script>
+
+<template>
+  <TooltipTrigger
+    data-slot="tooltip-trigger"
+    v-bind="props"
+  >
+    <slot />
+  </TooltipTrigger>
+</template>