vlite3 0.1.0 → 0.1.2

package/src/playground/demos/MultiSelectDemo.vue

@@ -1,300 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-import { MultiSelect } from '@/components/MultiSelect'
-import Icon from '@/components/Icon.vue'
-
-// --- Data ---
-const options = [
-	{ label: 'Vue.js', value: 'vue' },
-	{ label: 'React', value: 'react' },
-	{ label: 'Angular', value: 'angular' },
-	{ label: 'Svelte', value: 'svelte' },
-	{ label: 'Solid', value: 'solid' },
-	{ label: 'Qwik', value: 'qwik' },
-	{ label: 'Nuxt', value: 'nuxt' },
-	{ label: 'Next.js', value: 'next' },
-	{ label: 'Remix', value: 'remix' },
-	{ label: 'Astro', value: 'astro' },
-]
-
-const groupedOptions = [
-    {
-        label: 'Frontend',
-        children: [
-            { label: 'Vue.js', value: 'vue' },
-            { label: 'React', value: 'react' },
-            { label: 'Angular', value: 'angular' },
-        ]
-    },
-    {
-        label: 'Backend',
-        children: [
-            { label: 'Node.js', value: 'node' },
-            { label: 'Python', value: 'python' },
-            { label: 'Go', value: 'go' },
-        ]
-    }
-]
-
-// --- State ---
-const selectedFrameworks = ref(['vue', 'nuxt'])
-const selectedEmpty = ref([])
-const selectedMany = ref(['vue', 'react', 'angular', 'svelte', 'solid'])
-const selectedGrouped = ref(['vue', 'node'])
-
-// Remote Search State
-const remoteOptions = ref<{label: string, value: string}[]>([])
-const remoteSelected = ref([])
-const isLoading = ref(false)
-
-// Rich Options
-const richOptions = [
-    { label: 'Profile', value: 'profile', subtitle: '⌘P', icon: 'lucide:user' },
-    { label: 'Settings', value: 'settings', subtitle: '⌘,', icon: 'lucide:settings' },
-    { label: 'Print (Native)', value: 'print', description: 'Recommended for high fidelity', icon: 'lucide:printer' },
-    { label: 'Export PDF', value: 'export', description: 'Best for digital sharing', subtitle: '⌘E', icon: 'lucide:file-down' },
-]
-const selectedRich = ref(['profile'])
-
-// --- Methods ---
-const handleChange = (label: string, val: any) => {
-	console.log(`[${label}] Changed:`, val)
-}
-
-const handleSearch = (query: string) => {
-    console.log('Searching:', query)
-    isLoading.value = true
-    // Simulate API call
-    setTimeout(() => {
-        if (!query) {
-            remoteOptions.value = []
-        } else {
-            remoteOptions.value = [
-                { label: `${query} Result 1`, value: `${query}-1` },
-                { label: `${query} Result 2`, value: `${query}-2` },
-                { label: `${query} Result 3`, value: `${query}-3` },
-            ]
-        }
-        isLoading.value = false
-    }, 1000)
-}
-
-// Pagination State
-const pagedOptions = ref([...options, ...Array.from({ length: 40 }, (_, i) => ({ label: `Item ${i + 11}`, value: `item-${i + 11}` }))])
-const hasMore = ref(true)
-const isPageLoading = ref(false)
-const selectedPaged = ref([])
-
-const handleLoadMore = () => {
-    if (isPageLoading.value || !hasMore.value) return
-    console.log('Loading more...')
-    isPageLoading.value = true
-    
-    setTimeout(() => {
-        const currentLength = pagedOptions.value.length
-        const nextBatch = Array.from({ length: 20 }, (_, i) => ({ 
-            label: `Deferred Item ${currentLength + i + 1}`, 
-            value: `deferred-${currentLength + i + 1}` 
-        }))
-        pagedOptions.value.push(...nextBatch)
-        
-        if (pagedOptions.value.length >= 100) {
-            hasMore.value = false
-        }
-        isPageLoading.value = false
-    }, 1000)
-}
-
-</script>
-
-<template>
-	<div class="space-y-8 p-4 max-w-3xl mx-auto">
-		<div>
-			<h2 class="text-2xl font-bold mb-2">MultiSelect Component</h2>
-			<p class="text-gray-500 mb-6">
-				A robust multi-select dropdown with tag display, search, and
-				virtualization support via DropdownMenu.
-			</p>
-		</div>
-
-		<!-- 1. Basic Usage -->
-		<section class="space-y-4">
-			<h3 class="text-lg font-semibold flex items-center gap-2">
-				<Icon
-					icon="lucide:check-square"
-					class="text-primary" />
-				Basic Usage
-			</h3>
-			<div class="p-4 border rounded-xl bg-gray-50/50">
-				<MultiSelect
-					v-model="selectedFrameworks"
-					:options="options"
-					@change="(v) => handleChange('Basic', v)" />
-				<div
-					class="mt-4 text-xs text-gray-500 font-mono bg-white p-2 rounded border">
-					Model: {{ selectedFrameworks }}
-				</div>
-			</div>
-		</section>
-
-        <!-- 2. Remote Search -->
-        <section class="space-y-4">
-            <h3 class="text-lg font-semibold flex items-center gap-2">
-                <Icon
-                    icon="lucide:search"
-                    class="text-primary" />
-                Remote Search (Async)
-            </h3>
-            <div class="p-4 border rounded-xl bg-gray-50/50">
-                <MultiSelect
-                    v-model="remoteSelected"
-                    :options="remoteOptions"
-                    placeholder="Type to search..."
-                    remote
-                    :loading="isLoading"
-                    @search="handleSearch"
-                    @change="(v) => handleChange('Remote', v)"
-                />
-                 <div class="mt-2 text-xs text-gray-500">
-                    Type anything to simulate an API search.
-                </div>
-            </div>
-        </section>
-
-        <!-- 3. Rich Options (Subtitle & Description) -->
-        <section class="space-y-4">
-            <h3 class="text-lg font-semibold flex items-center gap-2">
-                <Icon
-                    icon="lucide:layout-list"
-                    class="text-primary" />
-                Rich Options
-            </h3>
-            <div class="p-4 border rounded-xl bg-gray-50/50">
-                <MultiSelect
-                    v-model="selectedRich"
-                    :options="richOptions"
-                    placeholder="Select actions..."
-                    @change="(v) => handleChange('Rich', v)"
-                />
-                 <div class="mt-2 text-xs text-gray-500">
-                    Options with subtitles (shortcuts) and descriptions.
-                </div>
-            </div>
-        </section>
-
-        <!-- 4. Pagination / Infinite Scroll -->
-        <section class="space-y-4">
-            <h3 class="text-lg font-semibold flex items-center gap-2">
-                <Icon
-                    icon="lucide:list-plus"
-                    class="text-primary" />
-                Pagination (Load More)
-            </h3>
-            <div class="p-4 border rounded-xl bg-gray-50/50">
-                <MultiSelect
-                    v-model="selectedPaged"
-                    :options="pagedOptions"
-                    placeholder="Scroll for more..."
-                    :has-more="hasMore"
-                    :loading="isPageLoading"
-                    @load-more="handleLoadMore"
-                    @change="(v) => handleChange('Paged', v)"
-                />
-                 <div class="mt-2 text-xs text-gray-500">
-                    Scroll to the bottom of the list to load more items.
-                </div>
-            </div>
-        </section>
-
-        <!-- 4. Grouped Options -->
-        <section class="space-y-4">
-            <h3 class="text-lg font-semibold flex items-center gap-2">
-                <Icon
-                    icon="lucide:layers"
-                    class="text-primary" />
-                Grouped Options
-            </h3>
-            <div class="p-4 border rounded-xl bg-gray-50/50">
-                <MultiSelect
-                    v-model="selectedGrouped"
-                    :options="groupedOptions"
-                    layout="grouped"
-                    placeholder="Select from groups..."
-                    @change="(v) => handleChange('Grouped', v)"
-                />
-                <div
-					class="mt-4 text-xs text-gray-500 font-mono bg-white p-2 rounded border">
-					Model: {{ selectedGrouped }}
-				</div>
-            </div>
-        </section>
-
-		<!-- 5. Empty State & Placeholder -->
-		<section class="space-y-4">
-			<h3 class="text-lg font-semibold flex items-center gap-2">
-				<Icon
-					icon="lucide:message-square"
-					class="text-primary" />
-				Placeholder
-			</h3>
-			<div class="p-4 border rounded-xl bg-gray-50/50">
-				<MultiSelect
-					v-model="selectedEmpty"
-					:options="options"
-					placeholder="Choose your stack..."
-					@change="(v) => handleChange('Empty', v)" />
-			</div>
-		</section>
-
-		<!-- 6. Overflow Handling (+N) -->
-		<section class="space-y-4">
-			<h3 class="text-lg font-semibold flex items-center gap-2">
-				<Icon
-					icon="lucide:more-horizontal"
-					class="text-primary" />
-				Overflow Handling (+N)
-			</h3>
-			<div class="p-4 border rounded-xl bg-gray-50/50">
-				<MultiSelect
-					v-model="selectedMany"
-					:options="options"
-					:max-visible="3"
-					@change="(v) => handleChange('Overflow', v)" />
-				<p class="mt-2 text-xs text-gray-500">
-					Max visible set to 3. Selection has 5 items.
-				</p>
-			</div>
-		</section>
-
-		<!-- 7. States -->
-		<section class="space-y-4">
-			<h3 class="text-lg font-semibold flex items-center gap-2">
-				<Icon
-					icon="lucide:toggle-left"
-					class="text-primary" />
-				States
-			</h3>
-			<div
-				class="grid grid-cols-1 md:grid-cols-2 gap-4 p-4 border rounded-xl bg-gray-50/50">
-				<div>
-					<label class="text-sm font-medium mb-1 block"
-						>Disabled</label
-					>
-					<MultiSelect
-						v-model="selectedFrameworks"
-						:options="options"
-						disabled />
-				</div>
-				<div>
-					<label class="text-sm font-medium mb-1 block"
-						>Solid Variant</label
-					>
-					<MultiSelect
-						v-model="selectedFrameworks"
-						:options="options"
-						variant="solid" />
-				</div>
-			</div>
-		</section>
-	</div>
-</template>

package/src/playground/demos/NavbarDemo.vue

@@ -1,59 +0,0 @@
-<script setup lang="ts">
-import { Navbar, NavbarItem, NavbarGroup } from '@/components/Navbar'
-import Avatar from '@/components/Avatar.vue'
-import Input from '@/components/Input.vue'
-import Button from '@/components/Button.vue'
-import Icon from '@/components/Icon.vue'
-</script>
-
-<template>
-  <div class="space-y-10">
-    <div class="space-y-2">
-      <h2 class="text-2xl font-bold">Navbar</h2>
-      <p class="text-gray-500">Navigation headers and sidebars.</p>
-    </div>
-
-    <section class="space-y-4">
-      <h3 class="text-lg font-semibold">Top Navigation</h3>
-      <div class="border rounded-lg overflow-hidden bg-gray-100 h-[200px] relative">
-          <Navbar position="absolute" class="w-full bg-white border-b">
-             <template #logo>
-                <div class="flex items-center gap-2 font-bold text-lg">Builto</div>
-             </template>
-             <template #left>
-                <NavbarGroup>
-                   <NavbarItem label="Home" active />
-                   <NavbarItem label="Features" />
-                </NavbarGroup>
-             </template>
-             <template #right>
-                <Button size="sm">Get Started</Button>
-             </template>
-          </Navbar>
-       </div>
-    </section>
-
-    <section class="space-y-4">
-      <h3 class="text-lg font-semibold">Sidebar Navigation</h3>
-      <div class="border rounded-lg overflow-hidden bg-gray-50 h-[300px] flex">
-          <Navbar variant="sidebar" position="relative" width="w-48" class="bg-white border-r h-full flex flex-col">
-             <template #logo>
-                <div class="flex items-center gap-2 font-bold px-4 py-2">
-                   <Icon icon="lucide:box" /> Dashboard
-                </div>
-             </template>
-             <template #default>
-                <div class="flex-1 py-4">
-                   <NavbarGroup orientation="vertical">
-                      <NavbarItem icon="lucide:home" label="Overview" active />
-                      <NavbarItem icon="lucide:users" label="Team" />
-                      <NavbarItem icon="lucide:settings" label="Settings" />
-                   </NavbarGroup>
-                </div>
-             </template>
-          </Navbar>
-          <div class="p-8 text-gray-400">Main Content</div>
-       </div>
-    </section>
-  </div>
-</template>

package/src/playground/demos/NavigationDemo.vue

@@ -1,116 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-import { Navbar, NavbarItem, NavbarGroup } from '@/components/Navbar'
-import Avatar from '@/components/Avatar.vue'
-import Input from '@/components/Input.vue'
-import Button from '@/components/Button.vue'
-import Label from '@/components/Label.vue'
-import Icon from '@/components/Icon.vue'
-
-const centerPosition = ref<'center' | 'left' | 'right'>('center')
-</script>
-
-<template>
-  <section class="space-y-8">
-     <div class="space-y-2">
-      <h2 class="text-xl font-semibold tracking-tight">Navigation</h2>
-      <p class="text-sm text-gray-500">
-        Navbars, sidebars, and other navigational structures.
-      </p>
-    </div>
-
-    <!-- Top Navbar Demo -->
-    <div class="space-y-4">
-       <h3 class="text-sm font-medium text-gray-500 uppercase tracking-wider">Top Navbar</h3>
-       
-       <div class="border border-border rounded-lg overflow-hidden bg-gray-100 h-[250px] relative flex flex-col">
-          <Navbar position="absolute" :center-position="centerPosition" class="w-full bg-body border-b">
-             <template #logo>
-                <div class="flex items-center gap-2 font-bold text-lg">
-                   <div class="w-8 h-8 bg-primary text-primary-fg rounded-md flex items-center justify-center">B</div>
-                   Builto
-                </div>
-             </template>
-             
-             <template #left>
-                <NavbarGroup>
-                   <NavbarItem label="Dashboard" active />
-                   <NavbarItem label="Projects" />
-                   <NavbarItem label="Team" />
-                </NavbarGroup>
-             </template>
-             
-             <template #center>
-                <div class="w-full max-w-[240px]">
-                   <Input placeholder="Search..." icon="lucide:search" size="sm" rounded="full" class="bg-gray-100 border-transparent focus:bg-white" />
-                </div>
-             </template>
-             
-             <template #right>
-                <NavbarGroup>
-                   <Button variant="ghost" size="sm" icon="lucide:bell" rounded="full" />
-                   <Button variant="ghost" size="sm" icon="lucide:settings" rounded="full" />
-                   <Avatar size="sm" src="https://i.pravatar.cc/150?u=1" />
-                </NavbarGroup>
-             </template>
-          </Navbar>
-          
-          <div class="flex-1 flex items-center justify-center text-gray-400">
-             Content Area
-          </div>
-       </div>
-    </div>
-    
-    <!-- Sidebar Demo -->
-    <div class="space-y-4">
-       <h3 class="text-sm font-medium text-gray-500 uppercase tracking-wider">Sidebar Layout</h3>
-       
-       <div class="border border-border rounded-lg overflow-hidden bg-gray-50 h-[400px] flex">
-          <Navbar variant="sidebar" position="relative" width="w-64" class="bg-body border-r h-full flex flex-col">
-             <template #logo>
-                <div class="flex items-center gap-2 font-bold text-lg px-2">
-                   <Icon icon="lucide:hexagon" class="w-6 h-6 text-primary" />
-                   Sidebar
-                </div>
-             </template>
-             
-             <template #default>
-                <div class="flex-1 overflow-y-auto py-4">
-                   <NavbarGroup orientation="vertical">
-                      <Label class="px-2 mb-2 text-xs uppercase text-gray-500">Main</Label>
-                      <NavbarItem icon="lucide:layout-dashboard" label="Dashboard" active />
-                      <NavbarItem icon="lucide:users" label="Users" />
-                      <NavbarItem icon="lucide:shopping-bag" label="Products" />
-                   </NavbarGroup>
-                   
-                   <div class="my-4 h-px bg-border mx-2"></div>
-                   
-                   <NavbarGroup orientation="vertical">
-                      <Label class="px-2 mb-2 text-xs uppercase text-gray-500">Settings</Label>
-                      <NavbarItem icon="lucide:settings" label="General" />
-                      <NavbarItem icon="lucide:shield" label="Security" />
-                   </NavbarGroup>
-                </div>
-             </template>
-             
-             <template #right>
-                <div class="mt-auto border-t pt-4">
-                   <div class="flex items-center gap-3 p-2 rounded-md hover:bg-gray-100 cursor-pointer transition-colors">
-                      <Avatar size="sm" fallback="JD" />
-                      <div class="flex flex-col text-sm overflow-hidden">
-                         <span class="font-medium truncate">John Doe</span>
-                         <span class="text-xs text-gray-500 truncate">admin@builto.com</span>
-                      </div>
-                   </div>
-                </div>
-             </template>
-          </Navbar>
-          
-           <div class="flex-1 flex items-center justify-center text-gray-400 bg-gray-50">
-             Main Content
-          </div>
-       </div>
-    </div>
-
-  </section>
-</template>

package/src/playground/demos/OTPInputDemo.vue

@@ -1,170 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-import { OTPInput } from '@/components/OTPInput'
-import Button from '@/components/Button.vue'
-
-const code1 = ref('')
-const code2 = ref('')
-const code3 = ref('')
-const code4 = ref('')
-const code5 = ref('')
-const code6 = ref('')
-const code7 = ref('')
-
-const handleComplete = (val: string) => {
-	console.log('OTP Complete:', val)
-}
-</script>
-
-<template>
-	<div class="space-y-10 p-4">
-		<div class="space-y-2">
-			<h2 class="text-2xl font-bold">OTP Input</h2>
-			<p class="text-gray-500">
-				For entering one-time passwords, verification codes, and PINs.
-			</p>
-		</div>
-
-		<!-- Default -->
-		<section class="space-y-4">
-			<h3 class="text-lg font-semibold">Default</h3>
-			<div class="p-4 border rounded-lg">
-				<OTPInput
-					v-model="code1"
-					@complete="handleComplete" />
-				<p class="mt-2 text-sm text-gray-500">Value: {{ code1 }}</p>
-			</div>
-		</section>
-
-		<!-- Variants -->
-		<section class="space-y-4">
-			<h3 class="text-lg font-semibold">Variants</h3>
-			<div class="grid gap-6">
-				<div>
-					<p class="text-sm font-medium mb-2 text-gray-600">
-						Outline (Default)
-					</p>
-					<OTPInput
-						v-model="code2"
-						variant="outline" />
-				</div>
-				<div>
-					<p class="text-sm font-medium mb-2 text-gray-600">Solid</p>
-					<OTPInput
-						v-model="code2"
-						variant="solid" />
-				</div>
-				<div>
-					<p class="text-sm font-medium mb-2 text-gray-600">Ghost</p>
-					<OTPInput
-						v-model="code2"
-						variant="ghost" />
-				</div>
-			</div>
-		</section>
-
-		<!-- Attached -->
-		<section class="space-y-4">
-			<h3 class="text-lg font-semibold">Attached / Grouped</h3>
-			<div class="grid gap-6">
-				<div>
-					<p class="text-sm font-medium mb-2 text-gray-600">
-						Attached Outline
-					</p>
-					<OTPInput
-						v-model="code3"
-						attached
-						variant="outline" />
-				</div>
-				<div>
-					<p class="text-sm font-medium mb-2 text-gray-600">
-						Attached Solid
-					</p>
-					<OTPInput
-						v-model="code3"
-						attached
-						variant="solid" />
-				</div>
-			</div>
-		</section>
-
-		<!-- Sizes -->
-		<section class="space-y-4">
-			<h3 class="text-lg font-semibold">Sizes</h3>
-			<div class="flex flex-col gap-4">
-				<div class="flex items-center gap-4">
-					<span class="w-20 text-sm text-gray-500">Small</span>
-					<OTPInput
-						v-model="code4"
-						size="sm" />
-				</div>
-				<div class="flex items-center gap-4">
-					<span class="w-20 text-sm text-gray-500">Medium</span>
-					<OTPInput
-						v-model="code4"
-						size="md" />
-				</div>
-				<div class="flex items-center gap-4">
-					<span class="w-20 text-sm text-gray-500">Large</span>
-					<OTPInput
-						v-model="code4"
-						size="lg" />
-				</div>
-			</div>
-		</section>
-
-		<!-- Custom Length & Type -->
-		<section class="space-y-4">
-			<h3 class="text-lg font-semibold">Custom configuration</h3>
-			<div class="grid gap-6">
-				<div>
-					<p class="text-sm font-medium mb-2 text-gray-600">
-						4 Digits (Number only)
-					</p>
-					<OTPInput
-						v-model="code5"
-						:length="4" />
-				</div>
-				<div>
-					<p class="text-sm font-medium mb-2 text-gray-600">
-						8 Chars (Text allowed - e.g. License Plate)
-					</p>
-					<OTPInput
-						v-model="code6"
-						:length="8"
-						type="text"
-						class="uppercase" />
-					<p class="text-xs text-gray-400 mt-1">Try typing letters</p>
-				</div>
-			</div>
-		</section>
-
-		<!-- States -->
-		<section class="space-y-4">
-			<h3 class="text-lg font-semibold">States</h3>
-			<div class="grid gap-6">
-				<div>
-					<p class="text-sm font-medium mb-2 text-gray-600">Error</p>
-					<OTPInput
-						v-model="code7"
-						error />
-					<p class="text-xs text-danger mt-1">Verification failed</p>
-				</div>
-				<div>
-					<p class="text-sm font-medium mb-2 text-gray-600">
-						Disabled
-					</p>
-					<OTPInput
-						modelValue="123456"
-						disabled />
-				</div>
-				<div>
-					<p class="text-sm font-medium mb-2 text-gray-600">
-						Autofocus (chk console/reload)
-					</p>
-					<OTPInput autofocus />
-				</div>
-			</div>
-		</section>
-	</div>
-</template>