vlite3 0.1.0 → 0.1.2

package/src/components/Navbar/Navbar.vue

@@ -1,277 +0,0 @@
-<script setup lang="ts">
-import { computed, ref, onMounted, onUnmounted, useSlots } from 'vue'
-import Icon from '../Icon.vue'
-import NavbarItem from './NavbarItem.vue'
-import Button from '../Button.vue'
-import SidePanel from '../SidePanel.vue'
-import Logo from '../Logo.vue' // Assuming Logo exists or using fallback
-import type { NavbarProps } from '@/types/navbar.type'
-
-const props = withDefaults(defineProps<NavbarProps>(), {
-  variant: 'header',
-  position: 'sticky', // default to sticky for modern feels
-  centerPosition: 'center',
-  glass: true,
-  border: true,
-  floating: false,
-  height: 'h-16',
-  width: 'w-64',
-  class: '',
-})
-
-const emit = defineEmits<{
-  (e: 'toggle-mobile'): void
-}>()
-
-const isMobileMenuOpen = ref(false)
-const isScrolled = ref(false)
-const slots = useSlots()
-
-// Scroll detection for styling effects
-const handleScroll = () => {
-  isScrolled.value = window.scrollY > 10
-}
-
-onMounted(() => {
-  window.addEventListener('scroll', handleScroll, { passive: true })
-})
-
-onUnmounted(() => {
-  window.removeEventListener('scroll', handleScroll)
-})
-
-// CSS Classes Construction
-const containerClasses = computed(() => {
-  const isSidebar = props.variant === 'sidebar'
-
-  const positionClasses = {
-    fixed: 'fixed top-0 left-0 z-40',
-    sticky: 'sticky top-0 z-40',
-    relative: 'relative z-10',
-    absolute: 'absolute top-0 left-0 w-full z-40',
-  }
-
-  const base = 'transition-all duration-300 ease-in-out bg-body'
-
-  // Effects
-  const effects = [
-    props.glass && (isScrolled.value || isSidebar || props.floating)
-      ? 'backdrop-blur-md bg-background/80 supports-[backdrop-filter]:bg-background/60'
-      : 'bg-background',
-    props.border && !props.floating
-      ? isSidebar
-        ? 'border-r border-border'
-        : 'border-b border-border'
-      : '',
-    props.floating ? 'm-4 rounded-xl shadow-lg border border-border/50' : '',
-    isScrolled.value && !props.floating && !isSidebar && props.position === 'sticky'
-      ? 'shadow-sm'
-      : '',
-  ]
-
-  // Layout
-  let layout = ''
-  if (isSidebar) {
-    // Sidebar: Mobile (auto height, full width) -> Desktop (fixed width based on prop, full height constrained to viewport)
-    // We use md:max-h-screen to ensure that if the sidebar is sticky/fixed, it never exceeds the viewport height,
-    // allowing internal scrolling to work correctly regardless of the main content height.
-    layout = `flex flex-col max-md:w-full ${props.width} h-auto md:h-full md:max-h-screen`
-  } else {
-    // Header Navbar
-    // Flexbox with standard gap. Alignment is handled by child margins.
-    layout = `flex items-center gap-4 w-full px-4 sm:px-6 lg:px-8 ${props.height}`
-  }
-
-  return [base, positionClasses[props.position], ...effects, layout, props.class].join(' ')
-})
-
-const centerClasses = computed(() => {
-  if (props.variant === 'sidebar') return 'flex-1 py-4 overflow-y-auto'
-
-  // Header logic
-  switch (props.centerPosition) {
-    case 'left':
-      // Sits next to Left section. No special margin needed other than global gap.
-      return 'flex items-center justify-start'
-    case 'right':
-      // Pushed to the right (ml-auto), sitting next to Right section.
-      return 'flex items-center justify-end ml-auto'
-    case 'center':
-    default:
-      // Tried to center in available space. mx-auto in a flex container pushes against siblings.
-      return 'hidden md:flex items-center justify-center mx-auto'
-  }
-})
-</script>
-
-<template>
-  <nav :class="containerClasses" role="navigation">
-    <!-- HEADER LAYOUT -->
-    <template v-if="variant === 'header'">
-      <!-- Left Section -->
-      <div class="flex items-center gap-4 shrink-0 z-10">
-        <!-- Mobile Toggle -->
-        <slot name="mobile-trigger">
-          <button
-            type="button"
-            class="md:hidden p-2 -ml-2 text-muted-foreground hover:bg-accent rounded-md shrink-0"
-            @click="isMobileMenuOpen = true">
-            <Icon icon="lucide:menu" class="w-5 h-5" />
-            <span class="sr-only">Open Menu</span>
-          </button>
-        </slot>
-
-        <!-- Logo Slot -->
-        <div class="shrink-0">
-          <slot name="logo">
-            <component
-              :is="props.logo ? 'img' : 'div'"
-              :src="props.logo"
-              class="h-8 w-auto font-bold text-xl flex items-center gap-2">
-              <Logo v-if="!props.logo" class="h-6 w-6" />
-              <span v-if="!props.logo && props.logoAlt">{{ props.logoAlt }}</span>
-              <span v-else-if="!props.logo">Brand</span>
-            </component>
-          </slot>
-        </div>
-
-        <!-- Left Slot Content -->
-        <div class="hidden md:flex items-center gap-1 overflow-x-auto no-scrollbar mask-gradient">
-          <slot name="left" />
-        </div>
-      </div>
-
-      <!-- Center Section -->
-      <div
-        :class="[
-          centerClasses,
-          // Width constraint to ensure it doesn't crush others, but allows simple resizing
-          'max-w-full',
-        ]">
-        <slot name="center" />
-      </div>
-
-      <!-- Right Section -->
-      <!-- 
-                ml-auto ensures this section is ALWAYS pushed to the end.
-                Even if centerPosition is 'right', the Center section has ml-auto, so they will stack at the end.
-                This logic relies on Flexbox behavior: multiple auto-margins split the available space.
-                
-                Scenario 1: Center='left'. Left -> Center -> (space) -> Right (ml-auto). Correct.
-                Scenario 2: Center='center'. Left -> (space/2) -> Center (mx-auto) -> (space/2) -> Right. Correct-ish (Right might need its own push if Center isn't perfect).
-                            Actually if Center is mx-auto, it consumes equal space on both sides. Right naturally sits at end? 
-                            No, if Center is mx-auto, it tries to centers itself between Left and Right.
-                            BUT to guarantee Right is at EDGE:
-                            If we put ml-auto on Right, it consumes all right-side space.
-                            If Center ALSO has mx-auto (ml-auto + mr-auto), space is shared.
-                            
-                            To strictly enforce Right at End:
-                            We should rely on `ml-auto` on the Right section primarily. 
-                            AND modify Center logic:
-                             - If Right has `ml-auto`, it pins to right.
-                             - If Center is 'center', it should assume `mx-auto`.
-                             - If Center is 'right', it also needs `ml-auto` but `mr-4` (gap).
-                             
-                             Let's keep it simple: Right always gets `ml-0` by default, but if layout gap handles it...
-                             Wait, `justify-between` on parent was safer for 'center'.
-                             Let's try:
-                             Left (natural)
-                             Center (flex-1 flex justify-center, IF center='center') -> This centers it in remaining space.
-                             Right (shrink-0)
-            -->
-      <div
-        class="flex items-center gap-2 shrink-0 max-w-[40%] z-10"
-        :class="{
-          // Always push to end unless Center is pushing it.
-          // If Center is 'center' (mx-auto) or 'right' (ml-auto), this naturally falls to end.
-          // If Center is 'left', we MUST have ml-auto here.
-          'ml-auto': centerPosition === 'left' || centerPosition === 'center',
-          // If center is 'right', Center has ml-auto. Right just sits next to it.
-          // But if we add ml-auto here too, they might split space? No, flexbox parses strictly.
-        }">
-        <slot name="right" />
-      </div>
-    </template>
-
-    <!-- SIDEBAR LAYOUT -->
-    <template v-else>
-      <!-- MOBILE HEADER (Visible only on small screens) -->
-      <div class="md:hidden flex items-center justify-between px-4 py-3 shrink-0 bg-background">
-        <!-- Logo -->
-        <slot name="logo">
-          <div class="font-bold text-xl truncate">Brand</div>
-        </slot>
-
-        <!-- Mobile Toggle -->
-        <button
-          type="button"
-          class="p-2 -mr-2 text-muted-foreground hover:bg-accent rounded-md"
-          @click="isMobileMenuOpen = true">
-          <Icon icon="lucide:menu" class="w-5 h-5" />
-          <span class="sr-only">Open Menu</span>
-        </button>
-      </div>
-
-      <!-- DESKTOP SIDEBAR CONTENT -->
-      <div class="hidden md:flex flex-col h-full w-full overflow-hidden">
-        <!-- Sidebar Header -->
-        <div class="h-16 flex items-center px-6 shrink-0 z-10">
-          <slot name="logo">
-            <div class="font-bold text-xl truncate">Brand</div>
-          </slot>
-        </div>
-
-        <!-- Sidebar Body -->
-        <div class="flex-1 px-4 py-4 overflow-y-auto space-y-4 scrollbar-thin">
-          <slot name="left" />
-          <slot />
-          <slot name="center" />
-        </div>
-
-        <!-- Sidebar Footer -->
-        <div class="p-4 border-t border-border shrink-0 bg-background mt-auto">
-          <slot name="right" />
-        </div>
-      </div>
-    </template>
-
-    <!-- MOBILE DRAWER (reusing SidePanel) -->
-    <SidePanel
-      v-model:show="isMobileMenuOpen"
-      position="left"
-      size="sm"
-      triggerClass="sm:hidden"
-      class="z-60 sm:hidden">
-      <template #header>
-        <slot name="logo">Brand</slot>
-      </template>
-
-      <div class="flex flex-col space-y-6 pt-4 h-full">
-        <!-- Header Variant Menu -->
-        <template v-if="variant === 'header'">
-          <div class="flex flex-col space-y-1">
-            <slot name="mobile-menu">
-              <!-- Fallback to using left+center content if no mobile-specific menu provided -->
-              <slot name="left" />
-              <div class="h-px bg-border my-2"></div>
-              <slot name="center" />
-            </slot>
-          </div>
-        </template>
-
-        <!-- Sidebar Variant Menu (Just replicate sidebar content) -->
-        <template v-else>
-          <div class="flex flex-col space-y-4 flex-1 overflow-y-auto">
-            <slot name="left" />
-            <slot />
-            <slot name="center" />
-          </div>
-        </template>
-
-        <div class="mt-auto pt-4 border-t border-border">
-          <slot name="right" />
-        </div>
-      </div>
-    </SidePanel>
-  </nav>
-</template>

package/src/components/Navbar/NavbarGroup.vue

@@ -1,27 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-
-interface Props {
-  orientation?: 'horizontal' | 'vertical'
-  class?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  orientation: 'horizontal',
-  class: '',
-})
-
-const classes = computed(() => {
-  return [
-    'flex',
-    props.orientation === 'vertical' ? 'flex-col space-y-1' : 'flex-row items-center space-x-1',
-    props.class,
-  ].join(' ')
-})
-</script>
-
-<template>
-  <div :class="classes">
-    <slot />
-  </div>
-</template>

package/src/components/Navbar/NavbarItem.vue

@@ -1,124 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import Icon from '../Icon.vue'
-
-interface Props {
-  to?: string
-  href?: string
-  label?: string
-  icon?: string
-  iconRight?: string
-  active?: boolean
-  disabled?: boolean
-  class?: string
-  // 'horizontal' | 'vertical' - usually inferred but can be forced
-  orientation?: 'horizontal' | 'vertical'
-  // 'default' | 'pill' | 'underline'
-  variant?: 'default' | 'pill' | 'underline' | 'ghost'
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  active: false,
-  disabled: false,
-  class: '',
-  orientation: 'horizontal',
-  variant: 'ghost',
-})
-
-const emit = defineEmits<{
-  (e: 'click', event: MouseEvent): void
-}>()
-
-const isExternal = computed(() => {
-  return props.href && (props.href.startsWith('http') || props.href.startsWith('//'))
-})
-
-const componentType = computed(() => {
-  if (props.to) return 'router-link'
-  if (props.href) return 'a'
-  return 'button'
-})
-
-const classes = computed(() => {
-  const base =
-    'group flex items-center gap-2 px-3 py-2 text-sm font-medium transition-all duration-200 rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none cursor-pointer'
-
-  // Ghost Variant
-  if (props.variant === 'ghost') {
-    return [
-      base,
-      'hover:bg-accent hover:text-foreground text-muted-foreground',
-      props.active ? 'bg-accent text-accent-foreground font-semibold' : 'text-muted-foreground',
-      props.class,
-    ].join(' ')
-  }
-
-  // Pill Variant
-  if (props.variant === 'pill') {
-    return [
-      base,
-      props.active
-        ? 'bg-primary text-primary-fg shadow-sm'
-        : 'text-muted-foreground hover:bg-accent hover:text-foreground',
-      props.class,
-    ].join(' ')
-  }
-
-  // Underline Variant
-  if (props.variant === 'underline') {
-    return [
-      base,
-      'rounded-none border-b-2',
-      props.active
-        ? 'text-primary border-primary'
-        : 'text-muted-foreground border-transparent hover:border-border hover:text-foreground',
-      props.class,
-    ].join(' ')
-  }
-
-  // Default Variant (link style)
-  return [
-    base,
-    'hover:text-foreground transition-colors',
-    props.active ? 'text-foreground font-semibold' : 'text-muted-foreground',
-    props.class,
-  ].join(' ')
-})
-
-const handleClick = (e: MouseEvent) => {
-  if (props.disabled) {
-    e.preventDefault()
-    return
-  }
-  emit('click', e)
-}
-</script>
-
-<template>
-  <component
-    :is="componentType"
-    :to="to"
-    :href="href"
-    :type="componentType === 'button' ? 'button' : undefined"
-    :target="isExternal ? '_blank' : undefined"
-    :rel="isExternal ? 'noopener noreferrer' : undefined"
-    :class="classes"
-    @click="handleClick">
-    <Icon
-      v-if="icon"
-      :icon="icon"
-      class="h-4 w-4 shrink-0 transition-colors"
-      :class="active ? 'text-current' : 'text-muted-foreground group-hover:text-current'" />
-
-    <span v-if="label || $slots.default" class="flex-1 truncate text-left">
-      <slot>{{ label }}</slot>
-    </span>
-
-    <Icon v-if="iconRight" :icon="iconRight" class="h-4 w-4 shrink-0 opacity-70" />
-
-    <!-- Optional Badge Slot support -->
-    <div v-if="$slots.badge" class="ml-auto">
-      <slot name="badge" />
-    </div>
-  </component>
-</template>

package/src/components/Navbar/index.ts

@@ -1,3 +0,0 @@
-export { default as Navbar } from './Navbar.vue'
-export { default as NavbarItem } from './NavbarItem.vue'
-export { default as NavbarGroup } from './NavbarGroup.vue'

package/src/components/OTPInput/OTPInput.vue

@@ -1,220 +0,0 @@
-<script setup lang="ts">
-import { ref, watch, onMounted, nextTick, computed } from 'vue'
-
-interface Props {
-  length?: number
-  modelValue?: string
-  disabled?: boolean
-  error?: boolean
-  autofocus?: boolean
-  type?: 'text' | 'number'
-  placeholder?: string
-  variant?: 'solid' | 'outline' | 'ghost'
-  attached?: boolean
-  size?: 'sm' | 'md' | 'lg'
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  length: 6,
-  modelValue: '',
-  disabled: false,
-  error: false,
-  autofocus: false,
-  type: 'number',
-  placeholder: '',
-  variant: 'outline',
-  attached: false,
-  size: 'md',
-})
-
-const emit = defineEmits<{
-  (e: 'update:modelValue', value: string): void
-  (e: 'complete', value: string): void
-  (e: 'change', value: string): void
-}>()
-
-const inputs = ref<(HTMLInputElement | null)[]>([])
-const digits = ref<string[]>(new Array(props.length).fill(''))
-
-// Sync from modelValue
-watch(
-  () => props.modelValue,
-  (newVal) => {
-    const val = newVal || ''
-    const chars = val.split('').slice(0, props.length)
-    const currentJoined = digits.value.join('')
-    if (currentJoined !== val) {
-      const newDigits = new Array(props.length).fill('')
-      chars.forEach((c, i) => (newDigits[i] = c))
-      digits.value = newDigits
-    }
-  },
-  { immediate: true }
-)
-
-const updateModel = () => {
-  const val = digits.value.join('')
-  emit('update:modelValue', val)
-  emit('change', val)
-  if (val.length === props.length) {
-    emit('complete', val)
-  }
-}
-
-const handleInput = (event: Event, index: number) => {
-  const target = event.target as HTMLInputElement
-  let val = target.value
-
-  if (props.type === 'number') {
-    val = val.replace(/\D/g, '')
-  }
-
-  if (val.length === 1) {
-    digits.value[index] = val
-    updateModel()
-    if (index < props.length - 1) {
-      inputs.value[index + 1]?.focus()
-    }
-    return
-  }
-
-  if (!val) {
-    digits.value[index] = ''
-    updateModel()
-    return
-  }
-
-  if (val.length > 1) {
-    const chars = val.split('').slice(0, props.length - index)
-    chars.forEach((c, i) => {
-      if (index + i < props.length) {
-        digits.value[index + i] = c
-      }
-    })
-    updateModel()
-    const nextFocus = Math.min(index + chars.length, props.length - 1)
-    inputs.value[nextFocus]?.focus()
-  }
-}
-
-const handleKeyDown = (event: KeyboardEvent, index: number) => {
-  const key = event.key
-
-  if (key === 'Backspace') {
-    if (!digits.value[index]) {
-      event.preventDefault()
-      if (index > 0) {
-        digits.value[index - 1] = ''
-        inputs.value[index - 1]?.focus()
-        updateModel()
-      }
-    }
-    return
-  }
-
-  if (key === 'ArrowLeft') {
-    event.preventDefault()
-    if (index > 0) {
-      inputs.value[index - 1]?.focus()
-    }
-  }
-
-  if (key === 'ArrowRight') {
-    event.preventDefault()
-    if (index < props.length - 1) {
-      inputs.value[index + 1]?.focus()
-    }
-  }
-}
-
-const handlePaste = (event: ClipboardEvent) => {
-  event.preventDefault()
-  const pastedData = event.clipboardData?.getData('text/plain')
-  if (!pastedData) return
-
-  let paste = pastedData.trim()
-  if (props.type === 'number') {
-    paste = paste.replace(/\D/g, '')
-  }
-
-  const chars = paste.split('').slice(0, props.length)
-  const newDigits = [...digits.value]
-  chars.forEach((char, i) => {
-    newDigits[i] = char
-  })
-  digits.value = newDigits
-
-  updateModel()
-
-  const nextIndex = Math.min(chars.length, props.length - 1)
-  inputs.value[nextIndex]?.focus()
-}
-
-const setInputRef = (el: any, index: number) => {
-  if (el) inputs.value[index] = el
-}
-
-onMounted(() => {
-  if (props.autofocus) {
-    nextTick(() => {
-      inputs.value[0]?.focus()
-    })
-  }
-})
-
-// Styling Computed Props
-const containerClasses = computed(() => {
-  return ['flex items-center', props.attached ? '-space-x-px' : 'gap-2'].join(' ')
-})
-
-const inputClasses = (index: number) => {
-  const base =
-    'text-center font-medium transition-all focus:outline-none focus:z-10 disabled:opacity-50 disabled:cursor-not-allowed placeholder:text-muted-foreground'
-
-  const sizes = {
-    sm: 'w-8 h-8 text-sm',
-    md: 'w-10 h-10 text-lg',
-    lg: 'w-12 h-12 text-xl',
-  }
-
-  const variants = {
-    solid:
-      'bg-muted border border-transparent focus:border-primary focus:ring-2 focus:ring-primary',
-    outline: 'border border-input focus:border-primary focus:ring-2 focus:ring-primary',
-    ghost:
-      'bg-transparent border border-transparent hover:bg-accent focus:focus:border-primary focus:ring-2 focus:ring-primary',
-  }
-
-  // Error state override
-  const errorClass = props.error ? 'border-destructive focus:ring-destructive text-destructive' : ''
-
-  let rounding = 'rounded-md'
-  if (props.attached) {
-    if (index === 0) rounding = 'rounded-l-md rounded-r-none'
-    else if (index === props.length - 1) rounding = 'rounded-r-md rounded-l-none'
-    else rounding = 'rounded-none'
-  }
-
-  return [base, sizes[props.size], variants[props.variant], errorClass, rounding].join(' ')
-}
-</script>
-
-<template>
-  <div :class="containerClasses">
-    <input
-      v-for="(digit, index) in props.length"
-      :key="index"
-      :ref="(el) => setInputRef(el, index)"
-      :value="digits[index]"
-      :type="type === 'number' ? 'tel' : 'text'"
-      inputmode="numeric"
-      :maxlength="1"
-      :disabled="disabled"
-      :placeholder="placeholder"
-      :class="inputClasses(index)"
-      @input="(e) => handleInput(e, index)"
-      @keydown="(e) => handleKeyDown(e, index)"
-      @paste="handlePaste"
-      @focus="$emit('update:modelValue', digits.join(''))" />
-  </div>
-</template>

package/src/components/OTPInput/index.ts

@@ -1 +0,0 @@
-export { default as OTPInput } from './OTPInput.vue'