vlite3 0.1.0 → 0.1.2

package/src/playground/demos/TabesDemo.vue

@@ -1,178 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-import { Tabes, TabesOption, TabesVariant } from '@/components/Tabes'
-
-// Demo 1: Basic
-const selectedMode = ref('write')
-const basicOptions: TabesOption[] = [
-	{ label: 'Write', value: 'write', icon: 'lucide:pen-line' },
-	{ label: 'Preview', value: 'preview', icon: 'lucide:eye' },
-	{ label: 'Settings', value: 'settings', icon: 'lucide:settings' },
-]
-
-// Demo 2: Block (Full Width)
-const selectedPlan = ref('monthly')
-const planOptions: TabesOption[] = [
-	{ label: 'Monthly', value: 'monthly' },
-	{ label: 'Yearly', value: 'yearly' },
-]
-
-// Demo 3: Sizes
-const sizeVal = ref('small')
-const sizeOptions: TabesOption[] = [
-	{ label: 'Small', value: 'small' },
-	{ label: 'Medium', value: 'medium' },
-	{ label: 'Large', value: 'large' },
-]
-
-// Demo 4: Variants
-const variantVal = ref('1')
-const variantOptions: TabesOption[] = [
-	{ label: 'Option 1', value: '1' },
-	{ label: 'Option 2', value: '2' },
-	{ label: 'Option 3', value: '3' },
-]
-</script>
-
-<template>
-	<div class="space-y-12">
-		<!-- Header -->
-		<div>
-			<h2 class="text-2xl font-bold text-gray-900">
-				Tabes
-				<span
-					class="text-xs font-normal text-gray-400 align-middle ml-2"
-					>(Segmented Control)</span
-				>
-			</h2>
-			<p class="mt-2 text-gray-500">
-				A premium segmented control for switching modes or views.
-			</p>
-		</div>
-
-		<!-- Basic Usage -->
-		<div class="space-y-4">
-			<h3 class="text-lg font-semibold text-gray-900">Basic Usage</h3>
-			<div
-				class="p-8 border rounded-xl bg-white shadow-sm flex flex-col items-center gap-6">
-				<Tabes
-					v-model="selectedMode"
-					:options="basicOptions" />
-				<div class="text-sm text-gray-500">
-					Selected: {{ selectedMode }}
-				</div>
-			</div>
-		</div>
-
-		<!-- Block Usage -->
-		<div class="space-y-4">
-			<h3 class="text-lg font-semibold text-gray-900">
-				Full Width (Block)
-			</h3>
-			<div
-				class="p-8 border rounded-xl bg-white shadow-sm w-full max-w-md mx-auto">
-				<Tabes
-					v-model="selectedPlan"
-					:options="planOptions"
-					block />
-			</div>
-		</div>
-
-		<!-- Sizes -->
-		<div class="space-y-4">
-			<h3 class="text-lg font-semibold text-gray-900">Sizes</h3>
-			<div
-				class="p-8 border rounded-xl bg-white shadow-sm flex flex-col items-center gap-6">
-				<Tabes
-					v-model="sizeVal"
-					:options="sizeOptions"
-					size="sm" />
-				<Tabes
-					v-model="sizeVal"
-					:options="sizeOptions"
-					size="md" />
-				<Tabes
-					v-model="sizeVal"
-					:options="sizeOptions"
-					size="lg" />
-			</div>
-		</div>
-
-		<!-- Variants -->
-		<div class="space-y-4">
-			<h3 class="text-lg font-semibold text-gray-900">Variants</h3>
-			<div
-				class="flex flex-col w-full gap-8 p-8 border rounded-xl bg-white shadow-sm">
-				<div class="space-y-2">
-					<span class="text-xs font-medium text-gray-500 uppercase"
-						>Surface (Default)</span
-					>
-					<Tabes
-						v-model="variantVal"
-						:options="variantOptions"
-						variant="surface" />
-				</div>
-
-				<div class="space-y-2">
-					<span class="text-xs font-medium text-gray-500 uppercase"
-						>Primary</span
-					>
-					<Tabes
-						v-model="variantVal"
-						:options="variantOptions"
-						variant="primary" />
-				</div>
-
-				<div class="space-y-2">
-					<span class="text-xs font-medium text-gray-500 uppercase"
-						>Secondary</span
-					>
-					<Tabes
-						v-model="variantVal"
-						:options="variantOptions"
-						variant="secondary" />
-				</div>
-
-				<div class="space-y-2">
-					<span class="text-xs font-medium text-gray-500 uppercase"
-						>Outline</span
-					>
-					<Tabes
-						v-model="variantVal"
-						:options="variantOptions"
-						variant="outline" />
-				</div>
-
-				<div class="space-y-2">
-					<span class="text-xs font-medium text-gray-500 uppercase"
-						>Danger</span
-					>
-					<Tabes
-						v-model="variantVal"
-						:options="variantOptions"
-						variant="danger" />
-				</div>
-
-				<div class="space-y-2">
-					<span class="text-xs font-medium text-gray-500 uppercase"
-						>Success</span
-					>
-					<Tabes
-						v-model="variantVal"
-						:options="variantOptions"
-						variant="success" />
-				</div>
-
-				<div class="space-y-2 md:col-span-2">
-					<span class="text-xs font-medium text-gray-500 uppercase"
-						>Line (Underline)</span
-					>
-					<Tabes
-						v-model="variantVal"
-						:options="variantOptions"
-						variant="line" />
-				</div>
-			</div>
-		</div>
-	</div>
-</template>

package/src/playground/demos/TextareaDemo.vue

@@ -1,31 +0,0 @@
-<script setup lang="ts">
-import Textarea from '@/components/Textarea.vue'
-import { ref } from 'vue'
-
-const val = ref('')
-</script>
-
-<template>
-  <div class="space-y-10">
-    <div class="space-y-2">
-      <h2 class="text-2xl font-bold">Textarea</h2>
-      <p class="text-gray-500">Multi-line text input component.</p>
-    </div>
-
-    <section class="space-y-4">
-      <h3 class="text-lg font-semibold">Basic Usage</h3>
-      <div class="max-w-xl space-y-4">
-        <Textarea placeholder="Type your message here..." v-model="val" :rows="4" />
-        <p class="text-sm text-gray-500">Value: {{ val }}</p>
-      </div>
-    </section>
-
-    <section class="space-y-4">
-      <h3 class="text-lg font-semibold">States</h3>
-      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-        <Textarea disabled placeholder="This textarea is disabled" :rows="3" />
-        <Textarea error="This field is required" placeholder="Error state" :rows="3" />
-      </div>
-    </section>
-  </div>
-</template>

package/src/playground/demos/ThemeToggleDemo.vue

@@ -1,20 +0,0 @@
-<script setup lang="ts">
-import ThemeToggle from '@/components/ThemeToggle.vue'
-</script>
-
-<template>
-  <div class="space-y-10">
-    <div class="space-y-2">
-      <h2 class="text-2xl font-bold">ThemeToggle</h2>
-      <p class="text-gray-500">A dedicated button to toggle between light and dark modes.</p>
-    </div>
-
-    <section class="space-y-4">
-      <h3 class="text-lg font-semibold">Usage</h3>
-      <div class="flex items-center gap-4">
-        <ThemeToggle />
-        <span class="text-sm text-gray-500">Click to switch theme</span>
-      </div>
-    </section>
-  </div>
-</template>

package/src/playground/demos/TimelineDemo.vue

@@ -1,43 +0,0 @@
-<script setup lang="ts">
-import Timeline from '@/components/Timeline.vue'
-import Button from '@/components/Button.vue'
-import { ref } from 'vue'
-
-const activeStep = ref(1)
-const steps = [
-  { id: 1, title: 'Ordered', icon: 'lucide:shopping-cart' },
-  { id: 2, title: 'Processing', icon: 'lucide:settings' },
-  { id: 3, title: 'Shipped', icon: 'lucide:truck' },
-  { id: 4, title: 'Delivered', icon: 'lucide:check' },
-]
-</script>
-
-<template>
-  <div class="space-y-10">
-    <div class="space-y-2">
-      <h2 class="text-2xl font-bold">Timeline</h2>
-      <p class="text-gray-500">Visualizes a sequence of events or steps.</p>
-    </div>
-
-    <section class="space-y-4">
-      <div class="flex items-center justify-between max-w-2xl">
-         <h3 class="text-lg font-semibold">Horizontal</h3>
-         <div class="flex gap-2">
-            <Button size="sm" variant="outline" :disabled="activeStep <= 0" @click="activeStep--">Prev</Button>
-            <Button size="sm" variant="outline" :disabled="activeStep >= steps.length" @click="activeStep++">Next</Button>
-         </div>
-      </div>
-      
-      <div class="p-6 border rounded-lg max-w-2xl">
-        <Timeline :steps="steps" :active-step="activeStep" />
-      </div>
-    </section>
-
-    <section class="space-y-4">
-      <h3 class="text-lg font-semibold">Vertical</h3>
-       <div class="p-6 border rounded-lg max-w-xs">
-        <Timeline :steps="steps" :active-step="activeStep" direction="vertical" />
-      </div>
-    </section>
-  </div>
-</template>

package/src/playground/demos/ToastDemo.vue

@@ -1,111 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-import { showToast, useNotifications, type ToastPosition } from '@/composables/useNotifications'
-import Button from '@/components/Button.vue'
-import ToastNotification from '@/components/ToastNotification.vue'
-
-const { toast, configure } = useNotifications()
-
-// Global Config State for Demo
-const globalPos = ref<ToastPosition>('bottom-right')
-
-const applyGlobalConfig = (pos: ToastPosition) => {
-  globalPos.value = pos
-  configure({ position: pos })
-  toast.info('Global position updated!')
-}
-
-const triggerToast = (position: ToastPosition, type: 'success' | 'info' | 'error' = 'success') => {
-  // Pass undefined for position to use global default
-  showToast(`Login Successful`, type, {
-    duration: 3000,
-    position,
-  })
-}
-
-const triggerActionToast = () => {
-  toast('File deleted successfully', {
-    description: 'You can undo this action within 5 seconds.',
-    action: {
-      label: 'Undo',
-      onClick: () => toast.success('Undo action clicked!'),
-    },
-    position: 'bottom-right',
-  })
-}
-
-const triggerStack = () => {
-  // Quickly add multiple toasts to show stacking
-  ;['Event Created', 'Email Sent', 'Profile Updated'].forEach((msg, i) => {
-    setTimeout(() => {
-      toast.success(msg, { description: 'Just now' })
-    }, i * 200)
-  })
-}
-
-const triggerPromise = () => {
-  toast.promise(new Promise((resolve) => setTimeout(() => resolve({ name: 'Document' }), 2000)), {
-    loading: 'Uploading...',
-    success: (data: any) => `${data.name} uploaded successfully`,
-    error: 'Upload failed',
-  })
-}
-</script>
-
-<template>
-  <div class="space-y-10">
-    <!-- Ensure the global provider is present for the demo -->
-    <ToastNotification />
-
-    <div class="space-y-2">
-      <h2 class="text-2xl font-bold">Toast Notification</h2>
-      <p class="text-gray-500">Global notification system with stacked layout and animations.</p>
-    </div>
-
-    <section class="space-y-6">
-      <h3 class="text-lg font-semibold">Global Configuration</h3>
-      <div class="p-6 border rounded-xl bg-gray-50 space-y-4">
-        <p class="text-sm text-gray-500">Set the default position for all future toasts.</p>
-        <div class="flex flex-wrap gap-2">
-          <Button
-            v-for="pos in ['top-left', 'top-right', 'bottom-left', 'bottom-right']"
-            :key="pos"
-            :variant="globalPos === pos ? 'primary' : 'outline'"
-            size="sm"
-            @click="applyGlobalConfig(pos as ToastPosition)">
-            {{ pos }}
-          </Button>
-        </div>
-        <div class="pt-4 border-t">
-          <Button @click="showToast('This uses the global default position')">
-            Test Default Toast
-          </Button>
-        </div>
-      </div>
-    </section>
-
-    <section class="space-y-6">
-      <h3 class="text-lg font-semibold">Positions</h3>
-      <div class="grid grid-cols-2 md:grid-cols-3 gap-4 max-w-2xl">
-        <Button @click="triggerToast('top-left')">Top Left</Button>
-        <Button @click="triggerToast('top-center')">Top Center</Button>
-        <Button @click="triggerToast('top-right')">Top Right</Button>
-
-        <Button @click="triggerToast('bottom-left', 'info')">Bottom Left</Button>
-        <Button @click="triggerToast('bottom-center', 'info')">Bottom Center</Button>
-        <Button @click="triggerToast('bottom-right', 'info')">Bottom Right</Button>
-      </div>
-    </section>
-
-    <section class="space-y-6">
-      <h3 class="text-lg font-semibold">Types & Features</h3>
-      <div class="flex flex-wrap gap-4">
-        <Button variant="success" @click="triggerToast('bottom-right', 'success')">Success</Button>
-        <Button variant="danger" @click="triggerToast('bottom-right', 'error')">Error</Button>
-        <Button variant="outline" @click="triggerActionToast">With Action & Desc</Button>
-        <Button variant="outline" @click="triggerStack">Trigger Stack</Button>
-        <Button variant="outline" @click="triggerPromise">Promise Toast</Button>
-      </div>
-    </section>
-  </div>
-</template>

package/src/playground/demos/TooltipDemo.vue

@@ -1,30 +0,0 @@
-<script setup lang="ts">
-import Tooltip from '@/components/Tooltip.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">Tooltip</h2>
-      <p class="text-gray-500">A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.</p>
-    </div>
-
-    <section class="space-y-4">
-      <h3 class="text-lg font-semibold">Usage</h3>
-      <div class="flex gap-4">
-        <Tooltip content="Add to Library">
-           <Button variant="ghost" size="sm" icon="lucide:plus" />
-        </Tooltip>
-        
-        <Tooltip content="Delete Item">
-           <Button variant="danger" size="sm" icon="lucide:trash" />
-        </Tooltip>
-
-        <Tooltip content="This is a much longer tooltip description needed for complex contexts.">
-           <Button variant="outline">Hover for details</Button>
-        </Tooltip>
-      </div>
-    </section>
-  </div>
-</template>

package/src/playground/demos/WorkbookDemo.vue

@@ -1,227 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-import { Workbook, WorkbookSheet, AddButtonPosition } from '@/components/Workbook'
-import Button from '@/components/Button.vue'
-import Input from '@/components/Input.vue'
-import { Dropdown } from '@/components/Dropdown'
-
-// --- Demo 1: Basic Usage ---
-const activeSheet1 = ref('1')
-const sheets1 = ref<WorkbookSheet[]>([
-	{ id: '1', title: 'Dashboard', icon: 'lucide:layout-dashboard' },
-	{ id: '2', title: 'Projects', icon: 'lucide:folder-kanban' },
-	{ id: '3', title: 'Settings', icon: 'lucide:settings' },
-])
-
-const handleAdd1 = () => {
-	const newId = Date.now().toString()
-	sheets1.value.push({ id: newId, title: 'New Sheet', icon: 'lucide:file' })
-	activeSheet1.value = newId
-}
-
-// --- Demo 2: Full Featured (Editable, Draggable, Attached) ---
-const activeSheet2 = ref('doc1')
-const sheets2 = ref<WorkbookSheet[]>([
-	{ id: 'doc1', title: 'Project Proposal.docx', icon: 'lucide:file-text' },
-	{ id: 'sheet1', title: 'Budget 2024.xlsx', icon: 'lucide:sheet' },
-	{ id: 'pres1', title: 'Q1 Review.pptx', icon: 'lucide:presentation' },
-])
-const addButtonPos = ref<AddButtonPosition>('attached')
-
-const handleAdd2 = () => {
-	const newId = Date.now().toString()
-	sheets2.value.push({ id: newId, title: 'Untitled', icon: 'lucide:file' })
-	activeSheet2.value = newId
-}
-
-const handleDelete2 = (id: string) => {
-	const idx = sheets2.value.findIndex((t) => t.id === id)
-	if (idx !== -1) {
-		sheets2.value.splice(idx, 1)
-		// Select nearest
-		if (activeSheet2.value === id && sheets2.value.length > 0) {
-			activeSheet2.value = sheets2.value[Math.max(0, idx - 1)].id
-		}
-	}
-}
-
-const handleDuplicate2 = (id: string) => {
-	const original = sheets2.value.find((t) => t.id === id)
-	if (original) {
-		const newId = Date.now().toString()
-		const newSheet = {
-			...original,
-			id: newId,
-			title: `${original.title} (Copy)`,
-		}
-		sheets2.value.push(newSheet)
-		activeSheet2.value = newId
-	}
-}
-
-// --- Demo 3: Overflow Handling ---
-const activeSheet3 = ref('1')
-const sheets3 = ref<WorkbookSheet[]>(
-	Array.from({ length: 20 }, (_, i) => ({
-		id: String(i + 1),
-		title: `Sheet ${i + 1}`,
-		icon: 'lucide:file',
-	})),
-)
-
-const handleAdd3 = () => {
-	const newId = String(sheets3.value.length + 1)
-	sheets3.value.push({ id: newId, title: `Sheet ${newId}`, icon: 'lucide:file' })
-	activeSheet3.value = newId
-}
-
-// --- Demo 4: Slots & Custom Content ---
-// Removed as it was identical logic
-</script>
-
-<template>
-	<div class="space-y-12">
-		<!-- Title -->
-		<div>
-			<h2 class="text-2xl font-bold text-gray-900">Workbook</h2>
-			<p class="mt-2 text-gray-500">
-				Dynamic, Excel-like workbook with drag & drop, renaming, and
-				overflow support.
-			</p>
-		</div>
-
-		<!-- Demo 1: Basic -->
-		<div class="space-y-4">
-			<div class="flex items-center justify-between">
-				<h3 class="text-lg font-semibold text-gray-900">Basic Usage</h3>
-			</div>
-			<div
-				class="p-6 border rounded-xl bg-white shadow-sm overflow-hidden">
-			<div
-				class="p-6 border rounded-xl bg-white shadow-sm overflow-hidden">
-				<Workbook
-					v-model="activeSheet1"
-					v-model:sheets="sheets1"
-					:editable="false"
-					:draggable="false"
-					add-button-position="fixed-right"
-					@add="handleAdd1">
-					<div
-						class="p-8 bg-gray-50/50 rounded-lg border border-dashed text-center text-gray-500 mt-4 h-32 flex items-center justify-center">
-						Content for sheet:
-						<strong class="ml-1 text-gray-700">{{
-							activeSheet1
-						}}</strong>
-					</div>
-				</Workbook>
-			</div>
-			</div>
-		</div>
-
-		<!-- Demo 2: Full Featured -->
-		<div class="space-y-4">
-			<div class="flex items-center justify-between">
-				<h3 class="text-lg font-semibold text-gray-900">
-					Full Interactive (Draggable, Editable)
-				</h3>
-				<div class="flex items-center gap-2">
-					<span class="text-sm text-gray-500">Add Button:</span>
-					<Dropdown
-						:selected="addButtonPos"
-						:options="[
-							{ label: 'Fixed Right', value: 'fixed-right' },
-							{ label: 'Attached', value: 'attached' },
-						]"
-						@onSelect="(opt) => (addButtonPos = opt.value)" />
-				</div>
-			</div>
-			<div
-				class="p-6 border rounded-xl bg-white shadow-sm overflow-hidden">
-				<!-- Simulation of a document editor header -->
-			<div
-				class="p-6 border rounded-xl bg-white shadow-sm overflow-hidden">
-				<!-- Simulation of a document editor header -->
-				<Workbook
-					v-model="activeSheet2"
-					v-model:sheets="sheets2"
-					:editable="true"
-					:draggable="true"
-					:add-button-position="addButtonPos"
-					@add="handleAdd2"
-					confirmDelete
-					@delete="handleDelete2"
-					@duplicate="handleDuplicate2">
-					<!-- Left Slot Example -->
-					<template #left-addons>
-						<div
-							class="w-8 h-8 rounded bg-blue-600 text-white flex items-center justify-center font-bold mr-2 ml-1 shadow-sm">
-							B
-						</div>
-					</template>
-
-					<!-- Right Slot Example -->
-					<template #right-addons>
-						<Button
-							size="xs"
-							variant="ghost"
-							icon="lucide:more-horizontal" />
-					</template>
-
-					<div class="mt-4 border rounded-lg h-64 bg-white relative">
-						<!-- Toolbar Simulation -->
-						<div class="border-b p-2 flex gap-2">
-							<Button
-								size="xs"
-								variant="ghost"
-								icon="lucide:bold" />
-							<Button
-								size="xs"
-								variant="ghost"
-								icon="lucide:italic" />
-							<Button
-								size="xs"
-								variant="ghost"
-								icon="lucide:align-left" />
-						</div>
-						<div class="p-8 text-gray-500">
-							Editing document:
-							<span class="text-primary font-medium">{{
-								sheets2.find((t) => t.id === activeSheet2)?.title
-							}}</span>
-							<p class="mt-2 text-sm text-gray-400">
-								Try renaming the sheet by double-clicking it!
-							</p>
-						</div>
-					</div>
-				</Workbook>
-			</div>
-			</div>
-		</div>
-
-		<!-- Demo 3: Overflow -->
-		<div class="space-y-4">
-			<div class="flex items-center justify-between">
-				<h3 class="text-lg font-semibold text-gray-900">
-					Overflow Handling
-				</h3>
-			</div>
-			<div
-				class="p-6 border rounded-xl bg-white shadow-sm overflow-hidden">
-			<div
-				class="p-6 border rounded-xl bg-white shadow-sm overflow-hidden">
-				<Workbook
-					v-model="activeSheet3"
-					v-model:sheets="sheets3"
-					:editable="true"
-					add-button-position="attached"
-					@add="handleAdd3">
-					<div
-						class="p-8 bg-gray-50/50 rounded-lg border border-dashed text-center text-gray-500 mt-4">
-						Selected: {{ activeSheet3 }}
-					</div>
-				</Workbook>
-			</div>
-			</div>
-		</div>
-	</div>
-</template>

package/src/types/alert.type.ts

@@ -1,11 +0,0 @@
-export type AlertVariant = 'primary' | 'success' | 'warning' | 'danger'
-
-export interface AlertProps {
-  title: string
-  description?: string
-  icon?: string
-  variant?: AlertVariant
-  closable?: boolean
-  role?: 'alert' | 'status' | 'none'
-  class?: string
-}