@geniusdynamics/ns8-ui-lib 1.0.0

package/src/components/NS/toggle/NSToggle.vue

@@ -0,0 +1,156 @@
+<script setup lang="ts">
+import { computed, useId } from 'vue'
+import { SwitchRoot, SwitchThumb } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+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?: 'default' | 'destructive' | 'success' | 'warning'
+  size?: 'default' | 'sm' | 'lg'
+  class?: string
+  labelClass?: string
+  containerClass?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'default',
+  size: '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)
+  }
+})
+
+const toggleClasses = computed(() => {
+  const baseClasses = 'peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50'
+  
+  const variantClasses = {
+    default: 'data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
+    destructive: 'data-[state=checked]:bg-destructive data-[state=unchecked]:bg-input',
+    success: 'data-[state=checked]:bg-green-500 data-[state=unchecked]:bg-input',
+    warning: 'data-[state=checked]:bg-orange-500 data-[state=unchecked]:bg-input'
+  }
+
+  const sizeClasses = {
+    default: 'h-6 w-11',
+    sm: 'h-5 w-9',
+    lg: 'h-7 w-13'
+  }
+
+  return cn(baseClasses, variantClasses[props.variant], sizeClasses[props.size])
+})
+
+const thumbClasses = computed(() => {
+  const baseClasses = 'pointer-events-none block rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0'
+  
+  const sizeClasses = {
+    default: 'h-5 w-5 data-[state=checked]:translate-x-5',
+    sm: 'h-4 w-4 data-[state=checked]:translate-x-4',
+    lg: 'h-6 w-6 data-[state=checked]:translate-x-6'
+  }
+
+  return cn(baseClasses, sizeClasses[props.size])
+})
+</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="toggleClasses"
+    >
+      <SwitchThumb :class="thumbClasses" />
+    </SwitchRoot>
+
+    <div class="grid gap-1.5">
+      <label
+        v-if="label || $slots.label"
+        :for="toggleId"
+        :class="cn(
+          'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer',
+          {
+            'sr-only': hideLabel,
+            'cursor-not-allowed': disabled,
+            'text-destructive': variant === 'destructive',
+            'text-green-600': variant === 'success',
+            'text-orange-600': variant === 'warning'
+          },
+          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/NS/wizard/NSWizard.vue

@@ -0,0 +1,399 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { ChevronLeft, ChevronRight, Check } from 'lucide-vue-next'
+import { Button } from '@/components/ui/button'
+import { Separator } from '@/components/ui/separator'
+import { cn } from '@/lib/utils'
+
+interface WizardStep {
+  id: string
+  title: string
+  description?: string
+  icon?: any
+  disabled?: boolean
+  valid?: boolean
+  onValidate?: () => boolean | Promise<boolean>
+  onEnter?: () => void
+  onLeave?: () => void
+}
+
+interface Props {
+  modelValue?: number
+  steps?: WizardStep[]
+  vertical?: boolean
+  showStepNumbers?: boolean
+  showStepIcons?: boolean
+  showNavigation?: boolean
+  showProgressBar?: boolean
+  allowSkip?: boolean
+  hidePreviousOnFirst?: boolean
+  hideNextOnLast?: boolean
+  finishButtonText?: string
+  nextButtonText?: string
+  previousButtonText?: string
+  skipButtonText?: string
+  disabled?: boolean
+  class?: string
+  stepClass?: string
+  navigationClass?: string
+  contentClass?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: 0,
+  steps: () => [],
+  vertical: false,
+  showStepNumbers: true,
+  showStepIcons: false,
+  showNavigation: true,
+  showProgressBar: true,
+  allowSkip: false,
+  hidePreviousOnFirst: true,
+  hideNextOnLast: false,
+  finishButtonText: 'Finish',
+  nextButtonText: 'Next',
+  previousButtonText: 'Previous',
+  skipButtonText: 'Skip',
+  disabled: false,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [step: number]
+  'step-change': [step: number, previousStep: number]
+  'finish': [data: any]
+  'skip': [step: number]
+  'validate': [step: number, valid: boolean]
+}>()
+
+const currentStep = computed({
+  get: () => props.modelValue || 0,
+  set: (step: number) => {
+    if (step >= 0 && step < props.steps.length && !props.disabled) {
+      const previousStep = currentStep.value
+      
+      // Call onLeave for current step
+      if (props.steps[previousStep]?.onLeave) {
+        props.steps[previousStep].onLeave()
+      }
+      
+      // Update step
+      emit('update:modelValue', step)
+      emit('step-change', step, previousStep)
+      
+      // Call onEnter for new step
+      if (props.steps[step]?.onEnter) {
+        props.steps[step].onEnter()
+      }
+    }
+  }
+})
+
+const currentStepData = computed(() => {
+  return props.steps[currentStep.value] || {}
+})
+
+const isFirstStep = computed(() => currentStep.value === 0)
+const isLastStep = computed(() => currentStep.value === props.steps.length - 1)
+
+const progressPercentage = computed(() => {
+  return ((currentStep.value + 1) / props.steps.length) * 100
+})
+
+const containerClasses = computed(() => {
+  const baseClasses = 'w-full'
+  
+  return cn(baseClasses, props.class)
+})
+
+const wizardClasses = computed(() => {
+  const baseClasses = 'flex'
+  
+  return cn(
+    baseClasses,
+    props.vertical ? 'flex-col' : 'flex-col lg:flex-row gap-8'
+  )
+})
+
+const stepsClasses = computed(() => {
+  const baseClasses = 'flex'
+  
+  return cn(
+    baseClasses,
+    props.vertical ? 'flex-col space-y-4' : 'flex-row lg:flex-col lg:space-y-4'
+  )
+})
+
+const contentClasses = computed(() => {
+  const baseClasses = 'flex-1 min-w-0'
+  
+  return cn(baseClasses, props.contentClass)
+})
+
+const navigationClasses = computed(() => {
+  const baseClasses = 'flex justify-between items-center pt-6'
+  
+  return cn(baseClasses, props.navigationClass)
+})
+
+const stepClasses = computed(() => {
+  return cn(
+    'flex items-center gap-3 cursor-pointer transition-colors',
+    props.stepClass,
+    {
+      'opacity-50 cursor-not-allowed': props.disabled
+    }
+  )
+})
+
+const getStepState = (index: number) => {
+  const step = props.steps[index]
+  
+  if (!step) return 'disabled'
+  
+  if (index < currentStep.value) return 'completed'
+  if (index === currentStep.value) return 'active'
+  if (step.disabled) return 'disabled'
+  return 'pending'
+}
+
+const getStepClasses = (index: number) => {
+  const state = getStepState(index)
+  
+  const baseClasses = 'flex items-center justify-center rounded-full transition-colors'
+  
+  const stateClasses = {
+    completed: 'bg-primary text-primary-foreground',
+    active: 'bg-primary text-primary-foreground ring-2 ring-ring ring-offset-2',
+    pending: 'bg-muted text-muted-foreground border-2 border-border',
+    disabled: 'bg-muted text-muted-foreground opacity-50 border-2 border-border'
+  }
+
+  return cn(baseClasses, stateClasses[state])
+}
+
+const canGoNext = computed(() => {
+  if (props.disabled) return false
+  if (isLastStep.value) return false
+  
+  const step = props.steps[currentStep.value]
+  if (step?.disabled) return false
+  
+  // Check if current step is valid
+  if (step?.valid === false) return false
+  
+  return true
+})
+
+const canGoPrevious = computed(() => {
+  if (props.disabled) return false
+  if (isFirstStep.value) return false
+  
+  return true
+})
+
+const canSkip = computed(() => {
+  if (props.disabled) return false
+  if (!props.allowSkip) return false
+  
+  const step = props.steps[currentStep.value]
+  if (step?.disabled) return false
+  
+  return true
+})
+
+const goToStep = async (index: number) => {
+  if (index < 0 || index >= props.steps.length) return
+  
+  const step = props.steps[index]
+  if (step?.disabled) return
+  
+  // Validate current step if moving forward
+  if (index > currentStep.value) {
+    const currentStepData = props.steps[currentStep.value]
+    if (currentStepData?.onValidate) {
+      try {
+        const isValid = await currentStepData.onValidate()
+        emit('validate', currentStep.value, isValid)
+        if (!isValid) return
+      } catch (error) {
+        emit('validate', currentStep.value, false)
+        return
+      }
+    }
+  }
+  
+  currentStep.value = index
+}
+
+const handleNext = async () => {
+  if (!canGoNext.value) return
+  
+  const currentStepData = props.steps[currentStep.value]
+  
+  // Validate current step
+  if (currentStepData?.onValidate) {
+    try {
+      const isValid = await currentStepData.onValidate()
+      emit('validate', currentStep.value, isValid)
+      if (!isValid) return
+    } catch (error) {
+      emit('validate', currentStep.value, false)
+      return
+    }
+  }
+  
+  if (isLastStep.value) {
+    emit('finish', {})
+  } else {
+    currentStep.value++
+  }
+}
+
+const handlePrevious = () => {
+  if (canGoPrevious.value) {
+    currentStep.value--
+  }
+}
+
+const handleSkip = () => {
+  if (canSkip.value) {
+    emit('skip', currentStep.value)
+    if (!isLastStep.value) {
+      currentStep.value++
+    }
+  }
+}
+
+// Watch for step changes
+watch(currentStep, (newStep, oldStep) => {
+  if (newStep !== oldStep) {
+    // Auto-validate new step
+    const step = props.steps[newStep]
+    if (step?.onValidate) {
+      step.onValidate().then(isValid => {
+        emit('validate', newStep, isValid)
+      })
+    }
+  }
+}, { immediate: true })
+</script>
+
+<template>
+  <div :class="containerClasses">
+    <!-- Progress bar -->
+    <div v-if="showProgressBar" class="mb-8">
+      <div class="relative h-2 w-full overflow-hidden rounded-full bg-secondary">
+        <div 
+          class="h-full w-full bg-primary transition-all duration-300 ease-in-out"
+          :style="{ width: `${progressPercentage}%` }"
+        />
+      </div>
+      <div class="mt-2 text-sm text-muted-foreground">
+        Step {{ currentStep + 1 }} of {{ steps.length }}
+      </div>
+    </div>
+
+    <div :class="wizardClasses">
+      <!-- Steps navigation -->
+      <div :class="stepsClasses">
+        <div
+          v-for="(step, index) in steps"
+          :key="step.id"
+          :class="stepClasses"
+          @click="goToStep(index)"
+        >
+          <!-- Step indicator -->
+          <div :class="getStepClasses(index)" class="w-8 h-8 text-sm font-medium">
+            <Check v-if="getStepState(index) === 'completed'" class="h-4 w-4" />
+            <component v-else-if="showStepIcons && step.icon" :is="step.icon" class="h-4 w-4" />
+            <span v-else-if="showStepNumbers">{{ index + 1 }}</span>
+          </div>
+
+          <!-- Step info -->
+          <div class="text-left">
+            <div class="font-medium text-sm">{{ step.title }}</div>
+            <div v-if="step.description" class="text-xs text-muted-foreground">
+              {{ step.description }}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Separator -->
+      <Separator 
+        v-if="!vertical" 
+        orientation="vertical" 
+        class="hidden lg:block" 
+      />
+
+      <!-- Content -->
+      <div :class="contentClasses">
+        <!-- Current step content -->
+        <div class="space-y-6">
+          <slot 
+            :name="`step-${currentStepData.id}`" 
+            :step="currentStepData"
+            :index="currentStep"
+            :isFirst="isFirstStep"
+            :isLast="isLastStep"
+            :next="handleNext"
+            :previous="handlePrevious"
+            :skip="handleSkip"
+            :canGoNext="canGoNext"
+            :canGoPrevious="canGoPrevious"
+            :canSkip="canSkip"
+          >
+            <!-- Default step content -->
+            <div class="space-y-4">
+              <h2 class="text-xl font-semibold">{{ currentStepData.title }}</h2>
+              <p v-if="currentStepData.description" class="text-muted-foreground">
+                {{ currentStepData.description }}
+              </p>
+              <div class="text-sm text-muted-foreground">
+                Step {{ currentStep + 1 }} of {{ steps.length }}
+              </div>
+            </div>
+          </slot>
+        </div>
+
+        <!-- Navigation buttons -->
+        <div v-if="showNavigation" :class="navigationClasses">
+          <div class="flex gap-2">
+            <!-- Previous button -->
+            <Button
+              v-if="!hidePreviousOnFirst || !isFirstStep"
+              variant="outline"
+              :disabled="!canGoPrevious"
+              @click="handlePrevious"
+            >
+              <ChevronLeft class="h-4 w-4" />
+              {{ previousButtonText }}
+            </Button>
+
+            <!-- Skip button -->
+            <Button
+              v-if="allowSkip && !isLastStep"
+              variant="ghost"
+              :disabled="!canSkip"
+              @click="handleSkip"
+            >
+              {{ skipButtonText }}
+            </Button>
+          </div>
+
+          <div class="flex gap-2">
+            <!-- Next/Finish button -->
+            <Button
+              :disabled="!canGoNext"
+              @click="handleNext"
+            >
+              {{ isLastStep ? finishButtonText : nextButtonText }}
+              <ChevronRight v-if="!isLastStep" class="h-4 w-4" />
+              <Check v-else class="h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/src/components/ui/button/Button.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import type { ButtonVariants } from "."
+import { Primitive } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "."
+
+interface Props extends PrimitiveProps {
+  variant?: ButtonVariants["variant"]
+  size?: ButtonVariants["size"]
+  class?: HTMLAttributes["class"]
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  as: "button",
+})
+</script>
+
+<template>
+  <Primitive
+    data-slot="button"
+    :as="as"
+    :as-child="asChild"
+    :class="cn(buttonVariants({ variant, size }), props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>

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

@@ -0,0 +1,22 @@
+<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="card"
+    :class="
+      cn(
+        'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>

package/src/components/ui/card/CardAction.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>
+  <div
+    data-slot="card-action"
+    :class="cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', props.class)"
+  >
+    <slot />
+  </div>
+</template>

package/src/components/ui/card/CardContent.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>
+  <div
+    data-slot="card-content"
+    :class="cn('px-6', props.class)"
+  >
+    <slot />
+  </div>
+</template>

package/src/components/ui/card/CardDescription.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>
+  <p
+    data-slot="card-description"
+    :class="cn('text-muted-foreground text-sm', props.class)"
+  >
+    <slot />
+  </p>
+</template>

package/src/components/ui/card/CardFooter.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>
+  <div
+    data-slot="card-footer"
+    :class="cn('flex items-center px-6 [.border-t]:pt-6', props.class)"
+  >
+    <slot />
+  </div>
+</template>

package/src/components/ui/card/CardHeader.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>
+  <div
+    data-slot="card-header"
+    :class="cn('@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6', props.class)"
+  >
+    <slot />
+  </div>
+</template>