vlite3 0.0.8 → 0.1.0

package/.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar"]
+}

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Safdar Azeem
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -16,23 +16,19 @@ npm install vlite3
 yarn add vlite3
 ```
 
-## Configuration
+## 2. Tailwind CSS Setup (Tailwind v4)
 
-### 1. Import Styles
-
-Import the library's base styles (for custom component styles) in your main entry file (e.g., `main.ts` or `App.vue`):
+`vite.config.ts`
 
 ```ts
-import 'vlite3/style.css'
-```
-
-### 2. Tailwind CSS Setup
-
-This library relies on Tailwind CSS for utility classes. You must configure your project to scan the library's files so that the necessary classes are generated.
+import tailwindcss from '@tailwindcss/vite'
 
-#### Tailwind CSS v4
+export default defineConfig({
+  plugins: [vue(), tailwindcss()],
+})
+```
 
-If you are using the new CSS-first configuration, add the source path:
+`style.css`
 
 ```css
 @import 'tailwindcss';
@@ -42,7 +38,7 @@ If you are using the new CSS-first configuration, add the source path:
 @source "../node_modules/vlite3";
 ```
 
-## Usage
+## 3. Usage
 
 Import components directly in your Vue files:
 
@@ -52,9 +48,254 @@ import { Button, Input } from 'vlite3'
 </script>
 
 <template>
-	<div class="p-4 space-y-4">
-		<Button>Click Me</Button>
-		<Input placeholder="Type here..." />
-	</div>
+  <div class="p-4 space-y-4">
+    <Button>Click Me</Button>
+    <Input placeholder="Type here..." />
+  </div>
+</template>
+```
+
+## 🎨 Theming & Customization
+
+vlite3 uses a semantic theming system inspired by **shadcn/ui** and compatible with **Tailwind CSS v4**. All colors are defined as CSS variables, making it easy to customize the look and feel of your application including Dark Mode support.
+
+### Semantic Colors
+
+You can customize these colors in your CSS by overriding the variables in `:root` or `.dark` classes (if you are using a class-based dark mode switcher).
+
+| Variable                   | Class Name                    | Description             | Recommended Usage                                                           |
+| :------------------------- | :---------------------------- | :---------------------- | :-------------------------------------------------------------------------- |
+| `--background`             | `bg-background`               | Default page background | The main background color of your app.                                      |
+| `--foreground`             | `text-foreground`             | Default text color      | The primary text color for content.                                         |
+| `--card`                   | `bg-card`                     | Card background         | Little Gray Background for cards, containers, surfece, panels, and dialogs. |
+| `--primary`                | `bg-primary`                  | Primary brand color     | Used for main actions (buttons, active states).                             |
+| `--primary-foreground`     | `text-primary-foreground`     | Primary text color      | Text color for content on top of primary background.                        |
+| `--secondary`              | `bg-secondary`                | Secondary background    | Used for secondary actions or muted sections.                               |
+| `--secondary-foreground`   | `text-secondary-foreground`   | Secondary text color    | Text color for content on top of secondary background.                      |
+| `--muted`                  | `bg-muted`                    | Muted background        | Subtle backgrounds (e.g., table headers, disabled states).                  |
+| `--muted-foreground`       | `text-muted-foreground`       | Muted text color        | Secondary text, hints, placeholders.                                        |
+| `--accent`                 | `bg-accent`                   | Accent background       | Used for hover states, selection highlights.                                |
+| `--accent-foreground`      | `text-accent-foreground`      | Accent text color       | Text color on accent backgrounds.                                           |
+| `--destructive`            | `bg-destructive`              | Destructive color       | Used for error states and destructive actions.                              |
+| `--destructive-foreground` | `text-destructive-foreground` | Destructive text color  | Text color on destructive backgrounds.                                      |
+| `--border`                 | `border`                      | Default border color    | Borders for inputs, cards, and dividers.                                    |
+| `--input`                  | `border-input`                | Input border color      | Borders specifically for form inputs.                                       |
+| `--ring`                   | `ring-ring`                   | Focus ring color        | Outline color for focused elements.                                         |
+| `--radius`                 | `rounded`                     | Border radius           | Global border radius for components.                                        |
+
+### Extended Color Variants
+
+For more complex components, vlite3 provides extended variants for main semantic colors (`primary`, `danger`, `warning`, `info`, `success`). These are useful for building nuanced UIs with subtle backgrounds, hover states, and accessible text.
+
+| Base Color  | Variant Variables                                                                                       | Usage Description                                                                                                                                                                                           |
+| :---------- | :------------------------------------------------------------------------------------------------------ | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Primary** | `--color-primary-light`<br>`--color-primary-dark`<br>`--color-primary-fg`<br>`--color-primary-fg-light` | **Light**: Subtle background (e.g., 10% opacity).<br>**Dark**: Hover state for the main color.<br>**Fg**: Text color on top of the _main_ color.<br>**Fg-Light**: Text color on top of the _light_ variant. |
+| **Danger**  | `--color-danger-light`<br>`--color-danger-dark`<br>`--color-danger-fg`<br>`--color-danger-fg-light`     | **Light**: Error backgrounds (alerts).<br>**Dark**: Hover state for destructive buttons.<br>**Fg**: Text on destructive buttons.<br>**Fg-Light**: Text on error alerts.                                     |
+| **Warning** | `--color-warning-light`<br>`--color-warning-dark`<br>`--color-warning-fg`<br>`--color-warning-fg-light` | **Light**: Warning backgrounds.<br>**Dark**: Active/Determined warning states.<br>**Fg**: Text on warning badges.<br>**Fg-Light**: Text on warning backgrounds.                                             |
+| **Success** | `--color-success-light`<br>`--color-success-dark`<br>`--color-success-fg`<br>`--color-success-fg-light` | **Light**: Success backgrounds (toasts).<br>**Dark**: Hover/Active success actions.<br>**Fg**: Text on success buttons.<br>**Fg-Light**: Text on success backgrounds.                                       |
+| **Info**    | `--color-info-light`<br>`--color-info-dark`<br>`--color-info-fg`<br>`--color-info-fg-light`             | **Light**: Info backgrounds.<br>**Dark**: Hover/Active info actions.<br>**Fg**: Text on info buttons.<br>**Fg-Light**: Text on info backgrounds.                                                            |
+
+**Example Usage:**
+
+```html
+<!-- A success badge with subtle background and matching text -->
+<div class="bg-success-light text-success-fg-light border border-success/20">
+  Operation Completed
+</div>
+
+<!-- A danger button with hover effect -->
+<button class="bg-danger text-danger-fg hover:bg-danger-dark">Delete</button>
+```
+
+### Additional Colors
+
+vlite3 also provides additional utility colors for specific feedback states:
+
+| Variable          | Class Name                   | Description                             |
+| :---------------- | :--------------------------- | :-------------------------------------- |
+| `--color-success` | `text-success`, `bg-success` | For success messages/badges.            |
+| `--color-warning` | `text-warning`, `bg-warning` | For warning messages/badges.            |
+| `--color-info`    | `text-info`, `bg-info`       | For informational messages/badges.      |
+| `--color-danger`  | `text-danger`, `bg-danger`   | Alias for destructive in some contexts. |
+
+### Example Customization
+
+To customize the theme, simply override the CSS variables in your main CSS file:
+
+```css
+@layer base {
+  :root {
+    --primary: #3b82f6; /* Blue-500 */
+    --primary-foreground: #ffffff;
+    --radius: 0.75rem;
+  }
+
+  .dark {
+    --primary: #60a5fa; /* Blue-400 */
+    --primary-foreground: #000000;
+  }
+}
+```
+
+## ✅ Components
+
+- **Button**
+- **ButtonGroup**
+- **Icon**
+- **Label**
+- **Badge**
+- **Chip**
+- **Logo**
+- **Navbar**
+- **SidebarMenu**
+- **SidePanel**
+- **Masonry Grid**
+- **ThemeToggle**
+
+### Inputs & Forms
+
+- **Input**
+- **Textarea**
+- **CheckBox**
+- **Switch**
+- **ChoiceBox**
+- **Slider**
+- **OTPInput**
+- **DatePicker**
+- **ColorPicker**
+- **FilePicker**
+- **AvatarUploader**
+- **IconPicker**
+- **MultiSelect**
+- **Form**
+- **CustomFields**
+
+### Data Display
+
+- **Avatar**
+- **Accordion**
+- **Carousel**
+- **DataTable**
+- **Pagination**
+- **Timeline**
+- **Heatmap**
+- **PricingPlan**
+- **FileTree**
+- **Workbook**
+- **Tabes**
+
+### Feedback & Overlays
+
+- **Alert**
+- **Modal**
+- **ConfirmationModal**
+- **ToastNotification**
+- **Tooltip**
+- **Dropdown**
+
+## Global Configuration (Registry System)
+
+vlite3 features a plugin-based architecture that allows you to register global services. This is particularly useful for dependency injection, such as defining how file uploads should be handled across all `Form` components in your app.
+
+### Setting up the Plugin
+
+In your `main.ts` or `main.js`, import `createVLite` and register your services:
+
+```typescript
+import { createApp } from 'vue'
+import App from './App.vue'
+import { createVLite } from 'vlite3'
+
+const app = createApp(App)
+
+// Initialize VLite with custom configuration
+const vlite = createVLite({
+  services: {
+    /**
+     * Global File Upload Handler
+     *
+     * This function will be called automatically by:
+     * - useFileUpload() composable
+     * - Form components (when using 'file', 'fileUploader', or 'avatarUpload' types)
+     *
+     * @param file - The File object to upload
+     * @param folderId - (Optional) Folder ID passed from component props
+     * @returns Promise<string> - The public URL of the uploaded file
+     */
+    upload: async (file, folderId) => {
+      // Example: Upload to your own backend
+      const formData = new FormData()
+      formData.append('file', file)
+      if (folderId) formData.append('folder_id', folderId)
+
+      // Replace with your actual API call (e.g., Axios, Fetch)
+      const response = await fetch(
+        '[https://api.yourdomain.com/v1/upload](https://api.yourdomain.com/v1/upload)',
+        {
+          method: 'POST',
+          body: formData,
+          headers: {
+            Authorization: 'Bearer ...',
+          },
+        }
+      )
+
+      if (!response.ok) throw new Error('Upload failed')
+
+      const data = await response.json()
+      return data.url // MUST return the file URL string
+    },
+  },
+})
+
+app.use(vlite)
+app.mount('#app')
+```
+
+### How it works
+
+Once registered, you don't need to pass upload handlers to individual components.
+
+1. **Automatic Injection**: The `Form` component detects input types like `file`, `avatarUpload`, or `fileUploader`.
+2. **Parallel Processing**: When the form is submitted, it automatically uploads all files in **parallel** using your registered `upload` service.
+3. **URL Replacement**: The File objects in your form data are replaced with the returned URLs before the final `onSubmit` event is triggered.
+
+## 4. Usage
+
+Import components directly in your Vue files:
+
+```vue
+<script setup>
+import { Button, Input, Form } from 'vlite3'
+
+// The form will automatically use the global upload service defined in main.ts
+const schema = [
+  {
+    name: 'avatar',
+    label: 'Profile Picture',
+    type: 'avatarUpload',
+  },
+  {
+    name: 'documents',
+    label: 'Attachments',
+    type: 'fileUploader',
+    props: { multiple: true },
+  },
+]
+
+const handleSubmit = (payload) => {
+  // payload.values.avatar will be a URL string (e.g., "https://api...")
+  // payload.values.documents will be an array of URL strings
+  console.log(payload.values)
+}
+</script>
+
+<template>
+  <div class="p-4 space-y-4">
+    <Button>Click Me</Button>
+    <Input placeholder="Type here..." />
+
+    <Form :schema="schema" @onSubmit="handleSubmit" />
+  </div>
 </template>
 ```

package/index.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en" cl>
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>vLite3</title>
+</head>
+
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.ts"></script>
+</body>
+
+</html>

package/package.json

@@ -1,16 +1,19 @@
 {
   "name": "vlite3",
   "private": false,
-  "description": "A lightweight Vue 3 UI component library built with Tailwind CSS.",
+  "description": "A Vue 3 UI component library built with Tailwind CSS.",
   "license": "MIT",
-  "version": "0.0.8",
+  "version": "0.1.0",
   "type": "module",
   "main": "index.js",
   "module": "index.js",
   "types": "index.d.ts",
+  "author": "safdar-azeem",
+  "repository": "https://github.com/safdar-azeem/vlite3",
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc -b && vite build",
+    "build:vercel": "vue-tsc -b && vite build --config vite.config.vercel.ts",
     "postbuild": "node scripts/bundle-css.js",
     "preview": "vite preview",
     "prepare:dist": "npm run build && cp package.json README.md dist/",
@@ -63,4 +66,4 @@
     "endOfLine": "auto",
     "bracketSameLine": true
   }
-}
+}

package/scripts/bundle-css.js

@@ -0,0 +1,45 @@
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const distDir = path.resolve(__dirname, '../dist');
+const srcDir = path.resolve(__dirname, '../src/css');
+
+// Ensure dist directory exists
+if (!fs.existsSync(distDir)) {
+    fs.mkdirSync(distDir, { recursive: true });
+}
+
+// Define the order of files to concatenate
+// We recreate the structure of main.css manually but directly embedding content
+// main.css has:
+// @import 'tailwindcss';
+// @layer theme, base, components, utilities;
+
+let finalCss = `@import 'tailwindcss';\n@layer theme, base, components, utilities;\n\n`;
+
+const filesToRead = ['theme.css', 'base.css', 'input.css'];
+
+filesToRead.forEach(file => {
+    const filePath = path.join(srcDir, file);
+    if (fs.existsSync(filePath)) {
+        const content = fs.readFileSync(filePath, 'utf8');
+        finalCss += `/* --- ${file} --- */\n${content}\n\n`;
+    } else {
+        console.warn(`Warning: ${file} not found at ${filePath}`);
+    }
+});
+
+const outputPath = path.join(distDir, 'style.css');
+
+if (fs.existsSync(outputPath)) {
+    const existingCss = fs.readFileSync(outputPath, 'utf8');
+    finalCss += `/* --- Vite Generated CSS --- */\n${existingCss}\n`;
+}
+
+fs.writeFileSync(outputPath, finalCss);
+
+console.log(`CSS bundled successfully into ${outputPath}`);

package/src/App.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import Playground from './playground/Playground.vue'
+</script>
+
+<template>
+	<Playground />
+</template>

package/src/components/Accordion/Accordion.vue

@@ -0,0 +1,139 @@
+<script setup lang="ts">
+import { ref, watch, computed } from 'vue'
+import type { AccordionProps } from './types'
+import AccordionItem from './AccordionItem.vue'
+
+const props = withDefaults(defineProps<AccordionProps>(), {
+  allowMultiple: false,
+  variant: 'default',
+  attached: false,
+  items: () => [],
+  disabled: false,
+  showIndex: false,
+  iconVariant: 'simple',
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string | string[]): void
+  (e: 'change', value: string | string[]): void
+}>()
+
+// Internal state
+const internalValue = ref<string[]>([])
+
+const normalizeValue = (val: string | string[] | undefined): string[] => {
+  if (Array.isArray(val)) return val
+  if (typeof val === 'string' && val) return [val]
+  return []
+}
+
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    internalValue.value = normalizeValue(newVal)
+  },
+  { immediate: true }
+)
+
+watch(
+  () => props.defaultValue,
+  (newVal) => {
+    if (!props.modelValue && newVal) {
+      internalValue.value = normalizeValue(newVal)
+    }
+  },
+  { immediate: true }
+)
+
+const toggleItem = (id: string) => {
+  if (props.disabled) return
+
+  const isOpen = internalValue.value.includes(id)
+
+  if (props.allowMultiple) {
+    if (isOpen) {
+      internalValue.value = internalValue.value.filter((v) => v !== id)
+    } else {
+      internalValue.value = [...internalValue.value, id]
+    }
+  } else {
+    // Single mode
+    if (isOpen) {
+      internalValue.value = [] // Toggle off if clicking same
+    } else {
+      internalValue.value = [id]
+    }
+  }
+
+  emitChange()
+}
+
+const emitChange = () => {
+  const val = props.allowMultiple ? internalValue.value : internalValue.value[0] || ''
+  emit('update:modelValue', val)
+  emit('change', val)
+}
+
+const rootClasses = computed(() => {
+  const classes = ['w-full', props.class]
+
+  if (props.attached) {
+    // classes.push('rounded-lg overflow-hidden') -> Managed by Items for cleaner edges if separated logic used
+    // But for attached, usually the container clips.
+    classes.push('rounded-lg overflow-hidden')
+
+    // Add border to container if it's outline or default attached
+    // Solid usually doesn't have a container border if items are solid blocks?
+    // But if attached list, yes.
+    if (props.variant === 'outline' || props.variant === 'default') {
+      classes.push('border')
+    }
+    if (props.variant === 'solid') {
+      // If solid attached, usually no border or just internal dividers?
+      // Let's add border to keep it contained.
+      classes.push('border')
+    }
+  }
+
+  return classes.join(' ')
+})
+</script>
+
+<template>
+  <div :class="rootClasses">
+    <slot>
+      <template v-for="(item, index) in items" :key="item.id">
+        <AccordionItem
+          :item="item"
+          :isOpen="internalValue.includes(item.id)"
+          :variant="variant"
+          :attached="attached"
+          :disabled="disabled"
+          :index="index + 1"
+          :showIndex="showIndex"
+          :openIcon="openIcon"
+          :closeIcon="closeIcon"
+          :iconVariant="iconVariant"
+          :activeIconVariant="activeIconVariant"
+          :triggerClass="triggerClass"
+          :contentClass="contentClass"
+          :itemClass="itemClass"
+          @toggle="toggleItem">
+          <!-- Pass Slots Down -->
+          <template v-if="$slots.trigger" #trigger="{ item, open, toggle, triggerClass }">
+            <slot
+              name="trigger"
+              :item="item"
+              :open="open"
+              :toggle="toggle"
+              :triggerClass="triggerClass" />
+          </template>
+
+          <template v-if="$slots.content" #content="{ item }">
+            <slot name="content" :close="toggleItem" :item="item" />
+          </template>
+        </AccordionItem>
+      </template>
+    </slot>
+  </div>
+</template>

package/src/components/Accordion/AccordionContent.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { computed, inject } from 'vue'
+
+interface Props {
+  class?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  class: '',
+})
+
+// In simple implementations, the open state is checked in the parent Item or here.
+// But mostly the Item decides if Content is rendered or if it is v-show.
+// For smooth animation on v-if/v-show, we need a Transition.
+
+const beforeEnter = (el: Element) => {
+  const element = el as HTMLElement
+  element.style.height = '0'
+}
+
+const enter = (el: Element) => {
+  const element = el as HTMLElement
+  element.style.height = element.scrollHeight + 'px'
+}
+
+const afterEnter = (el: Element) => {
+  const element = el as HTMLElement
+  element.style.height = 'auto'
+}
+
+const beforeLeave = (el: Element) => {
+  const element = el as HTMLElement
+  element.style.height = element.scrollHeight + 'px'
+}
+
+const leave = (el: Element) => {
+  const element = el as HTMLElement
+  element.style.height = '0'
+}
+</script>
+
+<template>
+  <Transition
+    name="accordion"
+    @before-enter="beforeEnter"
+    @enter="enter"
+    @after-enter="afterEnter"
+    @before-leave="beforeLeave"
+    @leave="leave">
+    <div class="overflow-hidden text-sm transition-all duration-300 ease-in-out">
+      <div :class="['pb-4', props.class]">
+        <slot />
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<style scoped>
+.accordion-enter-active,
+.accordion-leave-active {
+  transition: height 0.3s ease-in-out;
+}
+</style>