vlite3 0.1.10 → 0.2.2

package/README.md

@@ -1,17 +1,13 @@
 # vlite3
 
-A lightweight Vue 3 UI component library built with Tailwind CSS.
+A lightweight Vue 3 UI component library built with Tailwind CSS, created for personal projects and available for anyone to use.
 
 ## Installation
 
-### NPM
-
 ```bash
 npm install vlite3
 ```
 
-### Yarn
-
 ```bash
 yarn add vlite3
 ```
@@ -55,160 +51,28 @@ import { Button, Input } from 'vlite3'
 </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`                  | `text-muted`                  | Muted Text              | Secondary text, Unactive Link, description.                                 |
-| `--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:
+In your `main.ts` or `main.js`, import `createVLite` and `vScrollReveal` and register your services:
 
 ```typescript
 import { createApp } from 'vue'
 import App from './App.vue'
-import { createVLite } from 'vlite3'
+import { env, createVLite, vScrollReveal, GoogleSignInPlugin } from 'vlite3'
 
 const app = createApp(App)
 
+// Register global directives
+app.directive('scroll-reveal', vScrollReveal)
+
+app.use(GoogleSignInPlugin, {
+  clientId: env.VITE_GOOGLE_CLIENT_ID,
+})
+
 // Initialize VLite with custom configuration
 const vlite = createVLite({
   services: {
@@ -292,11 +156,223 @@ const handleSubmit = (payload) => {
 </script>
 
 <template>
-  <div class="p-4 space-y-4">
-    <Button>Click Me</Button>
-    <Input placeholder="Type here..." />
-
+  <div class="">
     <Form :schema="schema" @onSubmit="handleSubmit" />
   </div>
 </template>
 ```
+
+# 🎨 Theming & Customization
+
+Reference guide for **vlite3** and the Tailwind CSS v4 theming system. This setup uses a semantic design token approach inspired by shadcn/ui and optimized for Tailwind CSS v4.
+
+All colors are defined as CSS variables, allowing you to customize the appearance of your application with minimal effort, including full Dark Mode support.
+
+---
+
+## Semantic Colors
+
+Override these variables in `:root` or within a `.dark` class (when using class-based dark mode) to adjust your theme.
+
+| Variable                         | Utility Class                 | Description                             | Recommended Usage                               |
+| -------------------------------- | ----------------------------- | --------------------------------------- | ----------------------------------------------- |
+| `--color-background`             | `bg-background`               | Default page background (white)         | Main application background                     |
+| `--color-foreground`             | `text-foreground`             | Default text color (gray-900)           | Primary content text                            |
+| `--color-card`                   | `bg-card`                     | Card background (gray-100)              | Cards, containers, surfaces, panels, dialogs    |
+| `--color-primary`                | `bg-primary`                  | Primary brand color (blue)              | Main actions, buttons, active states            |
+| `--color-primary-foreground`     | `text-primary-foreground`     | Text on primary background (white)      | Text/icons displayed on primary elements        |
+| `--color-secondary`              | `bg-secondary`                | Secondary background (gray-200)         | Secondary actions, muted sections               |
+| `--color-secondary-foreground`   | `text-secondary-foreground`   | Text on secondary background (gray-900) | Content displayed on secondary elements         |
+| `--color-muted`                  | `bg-muted`                    | Muted background (gray-150)             | Subtle surfaces, table headers, disabled states |
+| `--color-muted`                  | `text-muted`                  | Muted text (gray-600)                   | Secondary text, inactive links, descriptions    |
+| `--color-accent`                 | `bg-accent`                   | Accent background (gray-150)            | Hover states, selection highlights              |
+| `--color-accent-foreground`      | `text-accent-foreground`      | Text on accent background (gray-900)    | Content displayed on accent elements            |
+| `--color-destructive`            | `bg-destructive`              | Destructive color (red)                 | Errors, warnings, destructive actions           |
+| `--color-destructive-foreground` | `text-destructive-foreground` | Text on destructive background (white)  | Content displayed on destructive elements       |
+| `--color-border`                 | `border`                      | Default border color (gray-250)         | Inputs, cards, dividers                         |
+| `--radius`                       | `rounded`                     | Global border radius                    | Shared radius across 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. |
+
+---
+
+## 8. Typography Scale System
+
+The typography system is organized into two complementary scales:
+
+- Compact scale (prefixed with `--text--fs-*`)
+- Progressive scale (prefixed with `--text-fs-*`)
+
+Use the progressive scale only when you need finer visual control beyond the standard Tailwind size tokens.
+For most layout and content needs, prefer the default Tailwind text sizes to maintain consistency.
+
+### Compact Text Scale
+
+```css
+--text--fs-1: 0.95em;
+--text--fs-2: 0.8em;
+--text--fs-3: 0.75em;
+--text--fs-4: 0.7em;
+--text--fs-5: 0.65em;
+--text--fs-6: 0.6em;
+--text--fs-7: 0.55em;
+--text--fs-8: 0.5em;
+```
+
+### Progressive Text Scale
+
+```css
+--text-fs-0.5: 1.05em;
+--text-fs-1: 1.1em;
+--text-fs-1.5: 1.14em;
+--text-fs-2: 1.18em;
+--text-fs-2.5: 1.22em;
+--text-fs-3: 1.26em;
+--text-fs-3.5: 1.3em;
+--text-fs-4: 1.34em;
+--text-fs-4.5: 1.38em;
+--text-fs-5: 1.42em;
+--text-fs-5.5: 1.46em;
+--text-fs-6: 1.5em;
+--text-fs-6.5: 1.54em;
+--text-fs-7: 1.58em;
+--text-fs-7.5: 1.62em;
+--text-fs-8: 1.68em;
+--text-fs-8.5: 1.72em;
+--text-fs-9: 1.8em;
+--text-fs-9.5: 2em;
+--text-fs-10: 2.5em;
+```
+
+### Tailwind Size Tokens
+
+```css
+--text-xs: 0.75rem --text-sm: 0.875rem --text-base: 1rem --text-lg: 1.125rem --text-xl: 1.25rem
+  --text-2xl: 1.5rem --text-3xl: 1.875rem --text-4xl: 2.25rem --text-5xl: 3rem --text-6xl: 4rem;
+```
+
+---
+
+### Usage Examples
+
+```html
+<p class="text-fs-2">Body text</p>
+
+<span class="-text-fs-4 text-muted"> Caption text </span>
+
+<h1 class="text-xl font-semibold">Page Title</h1>
+```
+
+## Hard Rules
+
+Follow these rules strictly to ensure visual consistency and predictable styling across the system:
+
+- Use `border` instead of `border-border` (the default border color (gray-250) is already applied).
+- Use `rounded` instead of `rounded-rounded`.
+- Use `bg-muted` instead of `bg-secondary/20`.
+- Use `gap-x-*` instead of applying `ml-*` or `mr-*` directly on sibling items.
+- Use `gap-y-*` instead of applying `mt
+
+---
+
+## ✅ 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**
+- **NumberInput**
+- **Google Login**
+
+### Data Display
+
+- **Avatar**
+- **Accordion**
+- **Carousel**
+- **DataTable**
+- **Pagination**
+- **Timeline**
+- **Heatmap**
+- **PricingPlan**
+- **FileTree**
+- **Workbook**
+- **Tabes**
+
+### Feedback & Overlays
+
+- **Alert**
+- **Modal**
+- **ConfirmationModal**
+- **ToastNotification**
+- **Tooltip**
+- **Dropdown**
+- **ProgressBar**
+- **Spinner**
+
+## Complete reference for AI agents and developers:
+
+- [llms.txt](https://github.com/safdar-azeem/vlite3/blob/main/llms.txt).
+- [llms-theming.txt](https://github.com/safdar-azeem/vlite3/blob/main/llms-theming.txt).
+- [llms-full.txt](https://github.com/safdar-azeem/vlite3/blob/main/llms-full.txt).
+- [llms-advance.txt](https://github.com/safdar-azeem/vlite3/blob/main/llms-advance.txt).

package/components/Button.vue.js

@@ -17,7 +17,7 @@ const R = ["type", "disabled"], D = /* @__PURE__ */ v({
   },
   setup(e) {
     const t = e, g = x(), l = s(() => t.icon && !t.text && !g.default), h = s(() => {
-      const n = "inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 active:scale-95 cursor-pointer gap-2", d = {
+      const n = "inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 active:scale-[0.98] cursor-pointer gap-2", d = {
         primary: "bg-primary text-primary-foreground hover:bg-primary/90",
         "primary-light": "bg-primary-light text-primary-fg-light hover:bg-primary/20",
         secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",

package/components/Chip/Chip.vue.js

@@ -1,5 +1,5 @@
 import { defineComponent as $, computed as s, openBlock as l, createElementBlock as c, normalizeClass as o, renderSlot as u, createBlock as d, createCommentVNode as i, createTextVNode as C, toDisplayString as z, withCtx as B, createVNode as D } from "vue";
-import b from "../Icon.vue.js";
+import f from "../Icon.vue.js";
 import S from "../Button.vue.js";
 const N = ["role", "tabindex"], V = {
   key: 0,
@@ -17,8 +17,8 @@ const N = ["role", "tabindex"], V = {
     class: { default: "" }
   },
   emits: ["click", "delete"],
-  setup(a, { emit: f }) {
-    const t = a, n = f, r = s(() => t.clickable && !t.disabled), g = (e) => {
+  setup(a, { emit: b }) {
+    const t = a, n = b, r = s(() => t.clickable && !t.disabled), g = (e) => {
       t.disabled || t.clickable && n("click", e);
     }, v = (e) => {
       t.disabled || (e.stopPropagation(), n("delete", e));
@@ -27,11 +27,11 @@ const N = ["role", "tabindex"], V = {
     }, h = s(() => {
       switch (t.size) {
         case "small":
-          return "h-6 text-xs px-2 gap-1.5";
+          return "h-5 text-[10px] px-1.5 gap-1";
         case "large":
-          return "h-10 text-base px-4 gap-2.5";
-        default:
           return "h-8 text-sm px-3 gap-2";
+        default:
+          return "h-6 text-xs px-2.5 gap-1.5";
       }
     }), x = s(() => {
       if (t.disabled)
@@ -53,20 +53,20 @@ const N = ["role", "tabindex"], V = {
     }), p = s(() => [j, h.value, x.value, t.class].join(" ")), k = s(() => {
       switch (t.size) {
         case "small":
-          return "h-3.5 w-3.5";
+          return "h-3 w-3";
         case "large":
-          return "h-5 w-5";
-        default:
           return "h-4 w-4";
+        default:
+          return "h-3.5 w-3.5";
       }
     }), y = s(() => {
       switch (t.size) {
         case "small":
-          return "h-3 w-3";
+          return "h-2.5 w-2.5";
         case "large":
-          return "h-4 w-4";
-        default:
           return "h-3.5 w-3.5";
+        default:
+          return "h-3 w-3";
       }
     });
     return (e, w) => (l(), c("div", {
@@ -77,7 +77,7 @@ const N = ["role", "tabindex"], V = {
       onKeydown: m
     }, [
       u(e.$slots, "icon", {}, () => [
-        a.icon ? (l(), d(b, {
+        a.icon ? (l(), d(f, {
           key: 0,
           icon: a.icon,
           class: o([k.value, "shrink-0", a.text ? "-ml-0.5" : ""])
@@ -94,11 +94,11 @@ const N = ["role", "tabindex"], V = {
         size: "xs",
         rounded: "full",
         disabled: a.disabled,
-        class: o(["ml-auto !p-0.5 !h-auto !w-auto hover:bg-[#8282823c]", [a.text ? a.size === "small" ? "-mr-0.5" : "-mr-1" : ""]]),
+        class: o(["ml-auto p-0.5! h-auto! w-auto! hover:bg-[#8282823c]", [a.text ? a.size === "small" ? "-mr-0.5" : "-mr-1" : ""]]),
         onClick: v
       }, {
         default: B(() => [
-          D(b, {
+          D(f, {
             icon: "lucide:x",
             class: o(y.value)
           }, null, 8, ["class"])

package/components/DataTable/DataTable.vue.js

@@ -1,7 +1,7 @@
 import o from "./DataTable.vue2.js";
 /* empty css               */
 import t from "../../_virtual/_plugin-vue_export-helper.js";
-const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-896cd72f"]]);
+const e = /* @__PURE__ */ t(o, [["__scopeId", "data-v-53f1fe21"]]);
 export {
-  m as default
+  e as default
 };