@geniusdynamics/ns8-ui-lib 1.0.0

package/src/components/ui/card/CardTitle.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <h3
+    data-slot="card-title"
+    :class="cn('leading-none font-semibold', props.class)"
+  >
+    <slot />
+  </h3>
+</template>

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

@@ -0,0 +1,123 @@
+<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/dialog/Dialog.vue

@@ -0,0 +1,68 @@
+<template>
+  <DialogRoot v-model:open="open">
+    <DialogPortal>
+      <DialogOverlay class="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" />
+      <DialogContent
+        :class="cn(
+          'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] 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',
+          size === 'sm' && 'max-w-sm',
+          size === 'md' && 'max-w-md', 
+          size === 'lg' && 'max-w-lg',
+          size === 'xl' && 'max-w-xl',
+          size === '2xl' && 'max-w-2xl',
+          size === '3xl' && 'max-w-3xl',
+          size === '4xl' && 'max-w-4xl',
+          size === '5xl' && 'max-w-5xl',
+          className
+        )"
+      >
+        <div v-if="$slots.title || $slots.description" class="flex flex-col space-y-1.5 text-center sm:text-left">
+          <DialogTitle v-if="$slots.title" class="text-lg font-semibold leading-none tracking-tight">
+            <slot name="title" />
+          </DialogTitle>
+          <DialogDescription v-if="$slots.description" class="text-sm text-muted-foreground">
+            <slot name="description" />
+          </DialogDescription>
+        </div>
+        
+        <div class="flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2">
+          <slot />
+        </div>
+        
+        <DialogClose
+          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 data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
+        >
+          <Cross2Icon class="h-4 w-4" />
+          <span class="sr-only">Close</span>
+        </DialogClose>
+      </DialogContent>
+    </DialogPortal>
+  </DialogRoot>
+</template>
+
+<script setup lang="ts">
+import { DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogRoot, DialogTitle } from 'radix-vue'
+import { Cross2Icon } from '@radix-vue/icons'
+import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
+
+interface Props {
+  open?: boolean
+  size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl'
+  class?: HTMLAttributes['class']
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  open: false,
+  size: 'lg'
+})
+
+const open = computed({
+  get: () => props.open,
+  set: (value) => {
+    if (!value) {
+      // Handle close
+    }
+  }
+})
+</script>

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

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

@@ -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'
+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/input/Input.vue

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

package/src/components/ui/input-group/InputGroup.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="input-group"
+    role="group"
+    :class="cn(
+      'group/input-group border-input dark:bg-input/30 relative flex w-full items-center rounded-md border shadow-xs transition-[color,box-shadow] outline-none',
+      'h-9 min-w-0 has-[>textarea]:h-auto',
+
+      // Variants based on alignment.
+      'has-[>[data-align=inline-start]]:[&>input]:pl-2',
+      'has-[>[data-align=inline-end]]:[&>input]:pr-2',
+      'has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3',
+      'has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3',
+
+      // Focus state.
+      'has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]',
+
+      // Error state.
+      'has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40',
+
+      props.class,
+    )"
+  >
+    <slot />
+  </div>
+</template>

package/src/components/ui/input-group/InputGroupAddon.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import type { InputGroupVariants } from "."
+import { cn } from "@/lib/utils"
+import { inputGroupAddonVariants } from "."
+
+const props = withDefaults(defineProps<{
+  align?: InputGroupVariants["align"]
+  class?: HTMLAttributes["class"]
+}>(), {
+  align: "inline-start",
+})
+
+function handleInputGroupAddonClick(e: MouseEvent) {
+  const currentTarget = e.currentTarget as HTMLElement | null
+  const target = e.target as HTMLElement | null
+  if (target && target.closest("button")) {
+    return
+  }
+  if (currentTarget && currentTarget?.parentElement) {
+    currentTarget.parentElement?.querySelector("input")?.focus()
+  }
+}
+</script>
+
+<template>
+  <div
+    role="group"
+    data-slot="input-group-addon"
+    :data-align="props.align"
+    :class="cn(inputGroupAddonVariants({ align: props.align }), props.class)"
+    @click="handleInputGroupAddonClick"
+  >
+    <slot />
+  </div>
+</template>

package/src/components/ui/input-group/InputGroupButton.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { InputGroupButtonProps } from "."
+import { cn } from "@/lib/utils"
+import { Button } from '@/components/ui/button'
+import { inputGroupButtonVariants } from "."
+
+const props = withDefaults(defineProps<InputGroupButtonProps>(), {
+  size: "xs",
+  variant: "ghost",
+})
+</script>
+
+<template>
+  <Button
+    :data-size="props.size"
+    :variant="props.variant"
+    :class="cn(inputGroupButtonVariants({ size: props.size }), props.class)"
+  >
+    <slot />
+  </Button>
+</template>

package/src/components/ui/input-group/InputGroupInput.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+import { Input } from '@/components/ui/input'
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <Input
+    data-slot="input-group-control"
+    :class="cn(
+      'flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent',
+      props.class,
+    )"
+  />
+</template>

package/src/components/ui/input-group/InputGroupText.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <span
+    :class="cn(
+      'text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*=\'size-\'])]:size-4',
+      props.class,
+    )"
+  >
+    <slot />
+  </span>
+</template>