glass-studio-ui-pro 1.1.6 → 1.1.8

package/README.md

@@ -33,7 +33,34 @@ npm install glass-studio-ui-pro
 yarn add glass-studio-ui-pro
 ```
 
-### 2. Plugin Configuration (`main.ts`)
+### 2. Tailwind CSS v4 (Required)
+
+`glass-studio-ui-pro` uses **Tailwind CSS v4** for gradient and utility classes (e.g., `CgIcon`). You must install and configure it in your project:
+
+```bash
+npm install tailwindcss @tailwindcss/vite
+```
+
+Then add the Tailwind Vite plugin to your `vite.config.ts`:
+
+```typescript
+import tailwindcss from "@tailwindcss/vite";
+
+export default defineConfig({
+  plugins: [
+    tailwindcss(),
+    // ...other plugins
+  ],
+});
+```
+
+Finally, import Tailwind CSS in your main CSS file (e.g., `main.css` or `style.css`):
+
+```css
+@import "tailwindcss";
+```
+
+### 3. Plugin Configuration (`main.ts`)
 
 To unlock all Pro features, register the plugin and provide your **License Key**:
 
@@ -52,7 +79,7 @@ app.use(GlassUI, {
 app.mount("#app");
 ```
 
-### 3. Global SVG Filters (`App.vue`)
+### 4. Global SVG Filters (`App.vue`)
 
 The liquid distortion engine requires the `CgFilters` component to be present at the root level (usually in `App.vue`):
 
@@ -85,6 +112,10 @@ To purchase a PRO license and unlock all premium glass effects, please visit [ht
 
 ## 🎨 Component Usage
 
+### 🔷 Glass Components (`Cg` prefix)
+
+Glass components use the Crystal Glass design system with liquid distortion, glassmorphism, and material presets.
+
 ### CgCard (Glass Surface)
 A versatile container with backdrop blur and texture.
 
@@ -132,6 +163,31 @@ Glass toolbars with multiple layout modes (Full, Floating, Fit).
 
 ---
 
+### 🔶 Common Components (`Cm` prefix)
+
+Common components are general-purpose UI elements without glass effects.
+
+### CmIcon (Icon)
+A single, reusable icon with morph animation on hover. Accepts any Lucide icon (or Vue component), with customizable size, gradient background, glow, and color.
+
+```vue
+<script setup>
+import { Settings } from "lucide-vue-next";
+</script>
+
+<template>
+  <CmIcon
+    :icon="Settings"
+    size="lg"
+    bg="bg-gradient-to-br from-emerald-500 to-teal-500"
+    glow="bg-emerald-400"
+    color="#ffd700"
+  />
+</template>
+```
+
+---
+
 ## 📖 API Reference
 
 ### CgCard Props
@@ -180,6 +236,16 @@ Glass toolbars with multiple layout modes (Full, Floating, Fit).
 | `shadow` | `string` | `'reflex'` | Surface glint intensity. |
 | `position` | `string` | `'static'` | CSS Position: `static`, `top`, `bottom`. |
 
+### CmIcon Props
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `icon` | `Component` | — | Lucide icon or any Vue component. **Required.** |
+| `size` | `'sm' \| 'md' \| 'lg' \| 'xl' \| number` | `'md'` | Predefined size or custom px value. |
+| `bg` | `string` | `'bg-gradient-to-br from-indigo-500 to-purple-600'` | Tailwind gradient class for the icon body. |
+| `glow` | `string` | `'bg-indigo-400'` | Tailwind background class for hover glow. |
+| `color` | `string` | `'white'` | CSS color value for the icon SVG. |
+
 ---
 
 ## 🔐 Security & License Guard

package/dist/components/cg/CgIcon.vue.d.ts

@@ -0,0 +1,31 @@
+interface Props {
+    icon?: any;
+    size?: 'sm' | 'md' | 'lg' | 'xl' | number;
+    bg?: string;
+    glow?: string;
+    color?: string;
+    active?: boolean;
+}
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
+    size: "sm" | "md" | "lg" | "xl" | number;
+    bg: string;
+    glow: string;
+    color: string;
+    active: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/cm/CmButton.vue.d.ts

@@ -0,0 +1,34 @@
+interface Props {
+    color?: string;
+    variant?: "solid" | "tonal" | "outline" | "text";
+    size?: "sm" | "md" | "lg" | "xl";
+    lightPosition?: "tl" | "tr" | "bl" | "br" | "t" | "b" | "l" | "r";
+    disabled?: boolean;
+    iconOnly?: boolean;
+}
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        prepend?(_: {}): any;
+        default?(_: {}): any;
+        append?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLButtonElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
+    size: "sm" | "md" | "lg" | "xl";
+    color: string;
+    variant: "solid" | "tonal" | "outline" | "text";
+    disabled: boolean;
+    lightPosition: "tl" | "tr" | "bl" | "br" | "t" | "b" | "l" | "r";
+    iconOnly: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLButtonElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/cm/CmCard.vue.d.ts

@@ -0,0 +1,28 @@
+interface Props {
+    color?: string;
+    intensity?: number;
+    lightPosition?: "tl" | "tr" | "bl" | "br" | "t" | "b" | "l" | "r";
+}
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        header?(_: {}): any;
+        default?(_: {}): any;
+        footer?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
+    color: string;
+    lightPosition: "tl" | "tr" | "bl" | "br" | "t" | "b" | "l" | "r";
+    intensity: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/cm/CmIcon.vue.d.ts

@@ -0,0 +1,30 @@
+interface Props {
+    variant?: "text" | "solid" | "outline" | "tonal";
+    color?: string;
+    size?: number;
+    rounded?: boolean;
+    lightPosition?: "tl" | "tr" | "bl" | "br" | "t" | "b" | "l" | "r";
+}
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
+    size: number;
+    color: string;
+    variant: "text" | "solid" | "outline" | "tonal";
+    lightPosition: "tl" | "tr" | "bl" | "br" | "t" | "b" | "l" | "r";
+    rounded: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/cn/CnButton.vue.d.ts

@@ -0,0 +1,32 @@
+interface Props {
+    color?: string;
+    size?: "sm" | "md" | "lg" | "xl";
+    variant?: "solid" | "tonal" | "outline" | "text" | "soft";
+    pill?: boolean;
+    lightPosition?: "tl" | "tr" | "bl" | "br" | "t" | "b" | "l" | "r";
+    intensity?: number;
+}
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLButtonElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
+    size: "sm" | "md" | "lg" | "xl";
+    color: string;
+    variant: "solid" | "tonal" | "outline" | "text" | "soft";
+    lightPosition: "tl" | "tr" | "bl" | "br" | "t" | "b" | "l" | "r";
+    intensity: number;
+    pill: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLButtonElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/cn/CnCard.vue.d.ts

@@ -0,0 +1,28 @@
+interface Props {
+    color?: string;
+    intensity?: number;
+    lightPosition?: 'tl' | 'tr' | 'bl' | 'br' | 't' | 'b' | 'l' | 'r';
+}
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        header?(_: {}): any;
+        default?(_: {}): any;
+        footer?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
+    color: string;
+    lightPosition: "tl" | "tr" | "bl" | "br" | "t" | "b" | "l" | "r";
+    intensity: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/cn/CnIcon.vue.d.ts

@@ -0,0 +1,32 @@
+interface Props {
+    color?: string;
+    variant?: 'solid' | 'tonal' | 'soft' | 'outline' | 'text';
+    size?: number | string;
+    pill?: boolean;
+    intensity?: number;
+    lightPosition?: 'tl' | 'tr' | 'bl' | 'br' | 't' | 'b' | 'l' | 'r';
+}
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
+    size: number | string;
+    color: string;
+    variant: "solid" | "tonal" | "soft" | "outline" | "text";
+    lightPosition: "tl" | "tr" | "bl" | "br" | "t" | "b" | "l" | "r";
+    intensity: number;
+    pill: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/cn/CnModal.vue.d.ts

@@ -0,0 +1,39 @@
+interface Props {
+    modelValue: boolean;
+    title?: string;
+    width?: string;
+    color?: string;
+    intensity?: number;
+    showClose?: boolean;
+}
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        header?(_: {}): any;
+        default?(_: {}): any;
+        footer?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    close: (...args: any[]) => void;
+    "update:modelValue": (...args: any[]) => void;
+}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
+    onClose?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}>, {
+    color: string;
+    title: string;
+    width: string;
+    showClose: boolean;
+    intensity: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/index.d.ts

@@ -1,19 +1,16 @@
-import { default as CgCard } from './components/CgCard.vue';
-import { default as CgButton } from './components/CgButton.vue';
-import { default as CgCheckbox } from './components/CgCheckbox.vue';
-import { default as CgFilters } from './components/CgFilters.vue';
-import { default as CgModal } from './components/CgModal.vue';
-import { default as CgToolbar } from './components/CgToolbar.vue';
-import { default as CgNotification } from './components/CgNotification.vue';
-import { default as CgIcon } from './components/CgIcon.vue';
-import { default as CmIcon } from './components/CmIcon.vue';
-import { getLicenseStatus } from './core/license';
-export { CgCard, CgButton, CgCheckbox, CgFilters, CgModal, CgToolbar, CgNotification, CgIcon, CmIcon, getLicenseStatus };
-export interface GlassUIOptions {
-    licenseKey?: string;
-}
-declare const GlassUI: {
-    install(app: any, options?: GlassUIOptions): void;
-};
-export { GlassUI };
-export default GlassUI;
+export { default as CgIcon } from './components/cg/CgIcon.vue';
+export { default as CgCard } from './components/cg/CgCard.vue';
+export { default as CgButton } from './components/cg/CgButton.vue';
+export { default as CgModal } from './components/cg/CgModal.vue';
+export { default as CgToolbar } from './components/cg/CgToolbar.vue';
+export { default as CgNotification } from './components/cg/CgNotification.vue';
+export { default as CgCheckbox } from './components/cg/CgCheckbox.vue';
+export { default as CgFilters } from './components/cg/CgFilters.vue';
+export { default as CmButton } from './components/cm/CmButton.vue';
+export { default as CmCard } from './components/cm/CmCard.vue';
+export { default as CmIcon } from './components/cm/CmIcon.vue';
+export { default as CnButton } from './components/cn/CnButton.vue';
+export { default as CnCard } from './components/cn/CnCard.vue';
+export { default as CnIcon } from './components/cn/CnIcon.vue';
+export { default as CnModal } from './components/cn/CnModal.vue';
+export { getLicenseStatus, validateProductLicense } from './core/license';