vlite3 0.1.0 → 0.1.2

package/src/playground/demos/ButtonDemo.vue

@@ -1,99 +0,0 @@
-<script setup lang="ts">
-import Button from '@/components/Button.vue'
-</script>
-
-<template>
-	<div class="space-y-10">
-		<div class="space-y-2">
-			<h2 class="text-2xl font-bold">Button</h2>
-			<p class="text-gray-500">
-				Triggers an event or action. They let users know what will
-				happen next.
-			</p>
-		</div>
-
-		<!-- Variants -->
-		<section class="space-y-4">
-			<h3 class="text-lg font-semibold">Variants</h3>
-			<div class="flex flex-wrap gap-2">
-				<Button>Primary</Button>
-				<Button variant="secondary">Secondary</Button>
-				<Button variant="outline">Outline</Button>
-				<Button variant="ghost">Ghost</Button>
-				<Button variant="link">Link</Button>
-			</div>
-		</section>
-
-		<!-- Semantic Variants -->
-		<section class="space-y-4">
-			<h3 class="text-lg font-semibold">Semantic / Colors</h3>
-			<div class="space-y-4">
-				<div class="flex flex-wrap gap-2">
-					<Button variant="info">Info</Button>
-					<Button variant="success">Success</Button>
-					<Button variant="warning">Warning</Button>
-					<Button variant="danger">Danger</Button>
-				</div>
-				<div class="flex flex-wrap gap-2">
-					<Button variant="info-light">Info Light</Button>
-					<Button variant="success-light">Success Light</Button>
-					<Button variant="warning-light">Warning Light</Button>
-					<Button variant="danger-light">Danger Light</Button>
-				</div>
-				<div class="flex flex-wrap gap-2">
-					<Button variant="outline-info">Outline Info</Button>
-					<Button variant="outline-success">Outline Success</Button>
-					<Button variant="outline-warning">Outline Warning</Button>
-					<Button variant="outline-danger">Outline Danger</Button>
-				</div>
-			</div>
-		</section>
-
-		<!-- Sizes -->
-		<section class="space-y-4">
-			<h3 class="text-lg font-semibold">Sizes</h3>
-			<div class="flex flex-wrap items-center gap-4">
-				<Button size="sm">Small</Button>
-				<Button size="md">Medium (Default)</Button>
-				<Button size="lg">Large</Button>
-			</div>
-		</section>
-
-		<!-- States & Shapes -->
-		<section class="space-y-4">
-			<h3 class="text-lg font-semibold">States & Shapes</h3>
-			<div class="flex flex-wrap items-center gap-4">
-				<Button loading>Loading</Button>
-				<Button disabled>Disabled</Button>
-				<Button rounded="full">Rounded Full</Button>
-				<Button rounded="none">Rounded None</Button>
-			</div>
-		</section>
-
-		<!-- Icons -->
-		<section class="space-y-4">
-			<h3 class="text-lg font-semibold">With Icons</h3>
-			<div class="flex flex-wrap gap-4">
-				<Button icon="lucide:plus">Add New</Button>
-				<Button icon-right="lucide:arrow-right">Continue</Button>
-				<Button
-					icon="lucide:settings"
-					variant="outline"
-					>Settings</Button
-				>
-				<Button
-					icon="lucide:trash-2"
-					variant="danger" />
-
-				<Button
-					variant="secondary"
-					icon="https://cdn.prod.website-files.com/666ad77562dfabab1eb27f63/6747850440da96e6bc2d78b3_friso_ai3.webp"
-					text="Secondary" />
-				<Button
-					variant="secondary"
-					icon="lucide:settings"
-					text="Secondary" />
-			</div>
-		</section>
-	</div>
-</template>

package/src/playground/demos/ButtonGroupDemo.vue

@@ -1,39 +0,0 @@
-<script setup lang="ts">
-import ButtonGroup from '@/components/ButtonGroup.vue'
-import Button from '@/components/Button.vue'
-</script>
-
-<template>
-  <div class="space-y-10">
-    <div class="space-y-2">
-      <h2 class="text-2xl font-bold">ButtonGroup</h2>
-      <p class="text-gray-500">Group a series of buttons together on a single line.</p>
-    </div>
-
-    <section class="space-y-4">
-      <h3 class="text-lg font-semibold">Attached (Default)</h3>
-      <ButtonGroup>
-        <Button>Years</Button>
-        <Button>Months</Button>
-        <Button>Days</Button>
-      </ButtonGroup>
-    </section>
-
-    <section class="space-y-4">
-      <h3 class="text-lg font-semibold">Detached</h3>
-      <ButtonGroup :attached="false">
-        <Button variant="outline">Cancel</Button>
-        <Button variant="outline">Save</Button>
-      </ButtonGroup>
-    </section>
-
-    <section class="space-y-4">
-      <h3 class="text-lg font-semibold">Vertical</h3>
-      <ButtonGroup direction="vertical">
-        <Button variant="secondary">Top</Button>
-        <Button variant="secondary">Middle</Button>
-        <Button variant="secondary">Bottom</Button>
-      </ButtonGroup>
-    </section>
-  </div>
-</template>

package/src/playground/demos/ButtonsDemo.vue

@@ -1,111 +0,0 @@
-<script setup lang="ts">
-import Button from '@/components/Button.vue'
-import ButtonGroup from '@/components/ButtonGroup.vue'
-</script>
-
-<template>
-  <section class="space-y-6">
-    <div class="space-y-2">
-			<h2 class="text-xl font-semibold tracking-tight">Buttons</h2>
-			<p class="text-sm text-gray-500">
-				Button components with various variants, sizes, and states.
-			</p>
-		</div>
-
-    <div class="space-y-8">
-      <!-- Variants -->
-      <div class="space-y-3">
-        <h3 class="text-sm font-medium text-gray-500 uppercase tracking-wider">Variants</h3>
-        <div class="flex flex-wrap gap-2">
-          <Button>Primary</Button>
-          <Button variant="secondary">Secondary</Button>
-          <Button variant="outline">Outline</Button>
-          <Button variant="ghost">Ghost</Button>
-          <Button variant="link">Link</Button>
-        </div>
-      </div>
-
-      <!-- Semantic -->
-      <div class="space-y-3">
-        <h3 class="text-sm font-medium text-gray-500 uppercase tracking-wider">Semantic</h3>
-        <div class="space-y-3">
-          <!-- Solid -->
-          <div class="flex flex-wrap gap-2">
-            <Button variant="info">Info</Button>
-            <Button variant="success">Success</Button>
-            <Button variant="warning">Warning</Button>
-            <Button variant="danger">Danger</Button>
-          </div>
-          <!-- Light -->
-          <div class="flex flex-wrap gap-2">
-            <Button variant="primary-light">Primary Light</Button>
-            <Button variant="info-light">Info Light</Button>
-            <Button variant="success-light">Success Light</Button>
-            <Button variant="warning-light">Warning Light</Button>
-            <Button variant="danger-light">Danger Light</Button>
-          </div>
-          <!-- Outline -->
-           <div class="flex flex-wrap gap-2">
-            <Button variant="outline-primary">Outline Primary</Button>
-            <Button variant="outline-info">Outline Info</Button>
-            <Button variant="outline-success">Outline Success</Button>
-            <Button variant="outline-warning">Outline Warning</Button>
-            <Button variant="outline-danger">Outline Danger</Button>
-          </div>
-        </div>
-      </div>
-
-      <!-- Sizes & States -->
-      <div class="space-y-3">
-        <h3 class="text-sm font-medium text-gray-500 uppercase tracking-wider">Sizes & States</h3>
-        <div class="flex flex-wrap items-center gap-4">
-          <Button size="sm">Small</Button>
-          <Button size="md">Medium</Button>
-          <Button size="lg">Large</Button>
-          <div class="w-px h-8 bg-gray-200 mx-2"></div>
-          <Button loading>Loading</Button>
-          <Button disabled>Disabled</Button>
-          <Button icon="lucide:settings">Icon Only</Button>
-          <Button icon="lucide:mail" icon-right="lucide:arrow-right">With Icons</Button>
-					<Button rounded="full">Rounded Full</Button>
-        </div>
-      </div>
-
-      <!-- Button Groups -->
-      <div class="space-y-3">
-         <h3 class="text-sm font-medium text-gray-500 uppercase tracking-wider">Button Groups</h3>
-         <div class="flex flex-wrap gap-8 items-start">
-            <!-- Basic Attached -->
-            <div class="space-y-2">
-              <label class="text-xs text-gray-400">Attached (Default)</label>
-              <ButtonGroup>
-                <Button>Left</Button>
-                <Button>Middle</Button>
-                <Button>Right</Button>
-              </ButtonGroup>
-            </div>
-
-            <!-- Detached -->
-            <div class="space-y-2">
-               <label class="text-xs text-gray-400">Detached (Gap 2)</label>
-                <ButtonGroup :attached="false">
-                  <Button variant="outline">One</Button>
-                  <Button variant="outline">Two</Button>
-                  <Button variant="outline">Three</Button>
-                </ButtonGroup>
-            </div>
-
-            <!-- Vertical -->
-            <div class="space-y-2">
-              <label class="text-xs text-gray-400">Vertical</label>
-              <ButtonGroup direction="vertical">
-                <Button variant="secondary">Top</Button>
-                <Button variant="secondary">Middle</Button>
-                <Button variant="secondary">Bottom</Button>
-              </ButtonGroup>
-            </div>
-         </div>
-      </div>
-    </div>
-  </section>
-</template>

package/src/playground/demos/CarouselDemo.vue

@@ -1,135 +0,0 @@
-<script setup lang="ts">
-import { Carousel } from '@/components/Carousel'
-
-/*
- * Carousel Wrapper Demo
- * Shows various configurations of the Carousel component
- */
-
-const images = [
-	'https://picsum.photos/600/400?random=1',
-	'https://picsum.photos/600/400?random=2',
-	'https://picsum.photos/600/400?random=3',
-	'https://picsum.photos/600/400?random=4',
-	'https://picsum.photos/600/400?random=5',
-]
-
-const itemsToShowBreakpoints = {
-	640: 1,
-	768: 2,
-	1024: 3,
-}
-</script>
-
-<template>
-	<div class="p-8 space-y-12">
-		<h1 class="text-3xl font-bold mb-6">Carousel Wrapper Demo</h1>
-
-		<!-- 1. Basic Carousel -->
-		<section>
-			<h2 class="text-xl font-semibold mb-4">1. Basic Carousel</h2>
-			<Carousel
-				:data="images"
-				pagination="dots"
-				:items-to-show="1">
-				<template #default="{ item }">
-					<div class="h-64 w-full">
-						<img
-							:src="item"
-							alt="Slide"
-							class="w-full h-full object-cover rounded-lg" />
-					</div>
-				</template>
-			</Carousel>
-		</section>
-
-		<!-- 2. Responsive Breakpoints -->
-		<section>
-			<h2 class="text-xl font-semibold mb-4">
-				2. Responsive Breakpoints
-			</h2>
-			<Carousel
-				:data="images"
-				:items-to-show="itemsToShowBreakpoints"
-				pagination="dots"
-				pagination-position="bottom-center"
-				:gap="10">
-				<template #default="{ item }">
-					<div class="h-48 w-full">
-						<img
-							:src="item"
-							alt="Slide"
-							class="w-full h-full object-cover rounded-lg" />
-					</div>
-				</template>
-			</Carousel>
-		</section>
-
-		<!-- 3. Multi Pagination Types -->
-		<section>
-			<h2 class="text-xl font-semibold mb-4">
-				3. Multi Pagination (Dots + Buttons)
-			</h2>
-			<Carousel
-				:data="images"
-				:pagination="['dots', 'buttons']"
-				:pagination-position="['bottom-center', 'center']"
-				:items-to-show="1"
-				:gap="10">
-				<template #default="{ item }">
-					<div class="h-64 w-full">
-						<img
-							:src="item"
-							alt="Slide"
-							class="w-full h-full object-cover rounded-lg" />
-					</div>
-				</template>
-			</Carousel>
-		</section>
-
-		<!-- 4. Hover Visibility Control -->
-		<section>
-			<h2 class="text-xl font-semibold mb-4">
-				4. Hover Visibility (Buttons on Hover)
-			</h2>
-			<Carousel
-				:data="images"
-				:pagination="['dots', 'buttons']"
-				:pagination-position="['bottom-center', 'center']"
-				:pagination-visibility="['always', 'hover']"
-				:items-to-show="1">
-				<template #default="{ item }">
-					<div class="h-64 w-full">
-						<img
-							:src="item"
-							alt="Slide"
-							class="w-full h-full object-cover rounded-lg" />
-					</div>
-				</template>
-			</Carousel>
-		</section>
-
-		<!-- 5. Vertical Carousel -->
-		<section>
-			<h2 class="text-xl font-semibold mb-4">5. Vertical Carousel</h2>
-			<Carousel
-				:data="images"
-				direction="vertical"
-				:pagination="['dots', 'buttons']"
-				:pagination-position="['center-right', 'center']"
-				:pagination-visibility="['always', 'hover']"
-				:items-to-show="1">
-				<template #default="{ item }">
-					<div
-						class="h-full w-full"
-						style="height: 600px">
-						<img
-							:src="item"
-							alt="Slide"
-							class="w-full h-full object-cover rounded-lg" />
-					</div>
-				</template>
-			</Carousel>
-		</section>
-	</div>
-</template>

package/src/playground/demos/CheckBoxDemo.vue

@@ -1,43 +0,0 @@
-<script setup lang="ts">
-import CheckBox from '@/components/CheckBox.vue'
-import Label from '@/components/Label.vue'
-import { ref } from 'vue'
-
-const checked1 = ref(false)
-const checked2 = ref(true)
-const checked3 = ref(false)
-</script>
-
-<template>
-  <div class="space-y-10">
-    <div class="space-y-2">
-      <h2 class="text-2xl font-bold">CheckBox</h2>
-      <p class="text-gray-500">A control that allows the user to make a binary choice.</p>
-    </div>
-
-    <section class="space-y-4">
-      <h3 class="text-lg font-semibold">Basic</h3>
-      <div class="flex flex-col gap-4">
-        <div class="flex items-center gap-2">
-          <CheckBox v-model:checked="checked1" id="c1" />
-          <Label for="c1">Accept Terms and Conditions</Label>
-        </div>
-        <p class="text-xs text-gray-400">Value: {{ checked1 }}</p>
-      </div>
-    </section>
-
-    <section class="space-y-4">
-      <h3 class="text-lg font-semibold">States</h3>
-      <div class="flex flex-col gap-4">
-        <div class="flex items-center gap-2">
-          <CheckBox checked disabled id="c2" />
-          <Label for="c2" class="opacity-50">Checked & Disabled</Label>
-        </div>
-        <div class="flex items-center gap-2">
-          <CheckBox :checked="false" disabled id="c3" />
-          <Label for="c3" class="opacity-50">Unchecked & Disabled</Label>
-        </div>
-      </div>
-    </section>
-  </div>
-</template>

package/src/playground/demos/ChipDemo.vue

@@ -1,190 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-import { Chip } from '@/components/Chip'
-
-const deletedChips = ref<string[]>([])
-
-const handleClick = (msg: string) => {
-	console.log('Clicked:', msg)
-	alert('Clicked: ' + msg)
-}
-
-const handleDelete = (id: string) => {
-	console.log('Deleted:', id)
-	deletedChips.value.push(id)
-}
-
-const restore = () => {
-	deletedChips.value = []
-}
-</script>
-
-<template>
-	<div class="space-y-10">
-		<div class="space-y-2">
-			<h2 class="text-2xl font-bold">Chip</h2>
-			<p class="text-gray-500">
-				Compact elements that represent an input, attribute, or action.
-			</p>
-		</div>
-
-		<!-- Basic Variants -->
-		<section class="space-y-4">
-			<h3 class="text-lg font-semibold">Variants</h3>
-			<div class="flex flex-wrap gap-2">
-				<Chip
-					text="Solid"
-					variant="solid" />
-				<Chip
-					text="Outline"
-					variant="outline" />
-				<Chip
-					text="Secondary"
-					variant="secondary" />
-				<Chip
-					text="Subtle"
-					variant="subtle" />
-				<Chip
-					text="Ghost"
-					variant="ghost" />
-			</div>
-		</section>
-
-		<!-- Semantic Variants -->
-		<section class="space-y-4">
-			<h3 class="text-lg font-semibold">Semantic Colors</h3>
-			<div class="flex flex-wrap gap-2">
-				<Chip
-					text="Primary"
-					variant="solid" />
-				<Chip
-					text="Success"
-					variant="success"
-					icon="lucide:check" />
-				<Chip
-					text="Warning"
-					variant="warning"
-					icon="lucide:alert-triangle" />
-				<Chip
-					text="Danger"
-					variant="danger"
-					icon="lucide:x-circle" />
-				<Chip
-					text="Info"
-					variant="info"
-					icon="lucide:info" />
-			</div>
-		</section>
-
-		<!-- Sizes -->
-		<section class="space-y-4">
-			<h3 class="text-lg font-semibold">Sizes</h3>
-			<div class="flex flex-wrap items-center gap-2">
-				<Chip
-					text="Small"
-					size="small" />
-				<Chip
-					text="Medium (Default)"
-					size="medium" />
-				<Chip
-					text="Large"
-					size="large" />
-			</div>
-		</section>
-
-		<!-- Icons & Avatars -->
-		<section class="space-y-4">
-			<h3 class="text-lg font-semibold">Icons & Avatars</h3>
-			<div class="flex flex-wrap gap-2">
-				<Chip
-					text="With Icon"
-					icon="lucide:star"
-					variant="secondary" />
-				<Chip
-					text="Solid Icon"
-					icon="lucide:check"
-					variant="solid" />
-				<Chip
-					text="Avatar"
-					icon="https://i.pravatar.cc/150?u=a042581f4e29026024d" />
-				<Chip
-					icon="lucide:bell"
-					variant="outline" />
-				<!-- Icon Only -->
-			</div>
-		</section>
-
-		<!-- Interactions -->
-		<section class="space-y-4">
-			<h3 class="text-lg font-semibold">Interactions</h3>
-			<div class="space-y-4">
-				<div class="flex flex-wrap gap-2">
-					<Chip
-						text="Click Me"
-						clickable
-						variant="outline"
-						@click="handleClick('Click Me Chip')" />
-					<Chip
-						text="Clickable Solid"
-						clickable
-						variant="solid"
-						icon="lucide:mouse-pointer-2"
-						@click="handleClick('Solid Clicked')" />
-				</div>
-
-				<div class="flex flex-wrap gap-2 items-center">
-					<Chip
-						v-if="!deletedChips.includes('chip-1')"
-						text="Deletable"
-						deletable
-						variant="secondary"
-						@delete="handleDelete('chip-1')" />
-					<Chip
-						v-if="!deletedChips.includes('chip-2')"
-						text="Clickable & Deletable"
-						clickable
-						deletable
-						variant="secondary"
-						@click="handleClick('Mixed Interaction')"
-						@delete="handleDelete('chip-2')" />
-
-					<button
-						v-if="deletedChips.length > 0"
-						class="text-sm text-primary hover:underline"
-						@click="restore">
-						Restore Deleted
-					</button>
-				</div>
-			</div>
-		</section>
-
-		<!-- States -->
-		<section class="space-y-4">
-			<h3 class="text-lg font-semibold">States</h3>
-			<div class="flex flex-wrap gap-2">
-				<Chip
-					text="Disabled"
-					disabled />
-				<Chip
-					text="Disabled Outline"
-					variant="outline"
-					disabled />
-				<Chip
-					text="Disabled Clickable"
-					clickable
-					disabled />
-			</div>
-		</section>
-
-		<!-- Custom Styling -->
-		<section class="space-y-4">
-			<h3 class="text-lg font-semibold">Custom Styling (Override)</h3>
-			<div class="flex flex-wrap gap-2">
-				<!-- Example of overriding classes manually if needed, distinct from semantic variants -->
-				<Chip
-					text="Custom Class"
-					class="bg-indigo-100 text-indigo-700 border-indigo-200" />
-			</div>
-		</section>
-	</div>
-</template>