glass-studio-ui-pro 1.1.5 → 1.1.8

package/README.md

@@ -1,14 +1,14 @@
-# 💎 Glass Studio UI Pro
+# 💎 Glass Studio UI Pro (Cg View Studio)
 
-**Premium Liquid Glass UI Library for Vue 3**
+**Premium Liquid Glass UI Library (Crystal Glass) for Vue 3**
 
 > [!IMPORTANT]
-> **UNDER ACTIVE DEVELOPMENT**: This library is currently in Beta and is not yet available for public use.
-> **Official Launch Date: May 1st, 2026**.
+> **HỆ THỐNG ĐANG TRONG GIAI ĐOẠN BETA**: Đã mở dùng thử miễn phí đến ngày **01/05/2026**.
+> Sau thời gian này, các tính năng Pro sẽ yêu cầu Giấy phép (License Key) chính thức.
 
 ![Glass Studio Preview](https://i.ibb.co/yc8QmHwZ/Screenshot-2026-03-27-154613.png)
 
-`glass-studio-ui-pro` is a high-performance Vue 3 UI library specialized in advanced Glassmorphism effects. It features real-time Liquid Distortion filters, multi-layered reflection systems, and professional-grade presets for crafting state-of-the-art premium interfaces.
+`glass-studio-ui-pro` is a high-performance Vue 3 UI library specialized in advanced Glassmorphism effects. It features real-time Liquid Distortion filters, multi-layered reflection systems, and professional-grade presets for crafting state-of-the-art premium interfaces with the new **Cg (Crystal Glass)** design system.
 
 ---
 
@@ -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,19 +79,19 @@ app.use(GlassUI, {
 app.mount("#app");
 ```
 
-### 3. Global SVG Filters (`App.vue`)
+### 4. Global SVG Filters (`App.vue`)
 
-The liquid distortion engine requires the `CmFilters` component to be present at the root level (usually in `App.vue`):
+The liquid distortion engine requires the `CgFilters` component to be present at the root level (usually in `App.vue`):
 
 ```vue
 <script setup>
-import { CmFilters } from "glass-studio-ui-pro";
+import { CgFilters } from "glass-studio-ui-pro";
 </script>
 
 <template>
   <div id="app">
     <router-view />
-    <CmFilters />
+    <CgFilters />
     <!-- The core engine for glass distortion effects -->
   </div>
 </template>
@@ -79,53 +106,83 @@ To purchase a PRO license and unlock all premium glass effects, please visit [ht
 1. **Register an account**: Create your developer account on the platform.
 2. **Purchase**: Navigate to the **NPM Libraries** section, select **Glass Studio UI Pro**, and complete the payment process.
 3. **Get your Key**: After successful payment, you will receive a unique `licenseKey`.
+4. **Renewal**: If your license expires, you can renew it directly on the dashboard to immediately restore all premium effects.
 
 ---
 
 ## 🎨 Component Usage
 
-### CmCard (Glass Surface)
+### 🔷 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.
 
 ```vue
 <template>
-  <CmCard type="heavy-frost" shadow="mist" distortion="wavy">
+  <CgCard type="heavy-frost" shadow="mist" distortion="wavy">
     <h3>Liquid Glass Performance</h3>
     <p>Content rendered with premium glass optics.</p>
-  </CmCard>
+  </CgCard>
 </template>
 ```
 
-### CmButton (Glass Controls)
+### CgButton (Glass Controls)
 Interactive buttons with material presets and liquid glow.
 
 ```vue
 <template>
-  <CmButton variant="primary" glow :blur="20" distortion="frosted">
+  <CgButton variant="primary" glow :blur="20" distortion="frosted">
     Explore Pro
-  </CmButton>
+  </CgButton>
 </template>
 ```
 
-### CmCheckbox (Liquid Selection)
+### CgCheckbox (Liquid Selection)
 Neon-lit checkboxes with animated state transitions.
 
 ```vue
 <template>
-  <CmCheckbox v-model="isChecked" label="Enable Reflections" />
+  <CgCheckbox v-model="isChecked" label="Enable Reflections" />
 </template>
 ```
 
-### CmToolbar (Adaptive Navigation)
+### CgToolbar (Adaptive Navigation)
 Glass toolbars with multiple layout modes (Full, Floating, Fit).
 
 ```vue
 <template>
-  <CmToolbar width="floating" type="fine-frost" shadow="reflex">
+  <CgToolbar width="floating" type="fine-frost" shadow="reflex">
     <template #left><span>Logo</span></template>
-    <CmButton variant="ghost">Home</CmButton>
-    <template #right><CmButton variant="primary">Login</CmButton></template>
-  </CmToolbar>
+    <CgButton variant="ghost">Home</CgButton>
+    <template #right><CgButton variant="primary">Login</CgButton></template>
+  </CgToolbar>
+</template>
+```
+
+---
+
+### 🔶 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>
 ```
 
@@ -133,7 +190,7 @@ Glass toolbars with multiple layout modes (Full, Floating, Fit).
 
 ## 📖 API Reference
 
-### CmCard Props
+### CgCard Props
 
 | Prop | Type | Default | Description |
 | :--- | :--- | :--- | :--- |
@@ -143,7 +200,7 @@ Glass toolbars with multiple layout modes (Full, Floating, Fit).
 | `distortion`| `string` | `'none'` | Filter style: `wavy`, `frosted`, `grain`, `ripple`, `mist`. |
 | `shadow` | `string` | `'none'` | Shadow style: `mist`, `reflex`. |
 
-### CmButton Props
+### CgButton Props
 
 | Prop | Type | Default | Description |
 | :--- | :--- | :--- | :--- |
@@ -153,7 +210,7 @@ Glass toolbars with multiple layout modes (Full, Floating, Fit).
 | `blur` | `number` | `12` | Backdrop blur intensity. |
 | `active` | `boolean` | `false` | Visual active state toggle. |
 
-### CmCheckbox Props
+### CgCheckbox Props
 
 | Prop | Type | Default | Description |
 | :--- | :--- | :--- | :--- |
@@ -161,7 +218,7 @@ Glass toolbars with multiple layout modes (Full, Floating, Fit).
 | `label` | `string` | `''` | Optional label text. |
 | `disabled` | `boolean` | `false` | Prevents user interaction. |
 
-### CmModal Props
+### CgModal Props
 
 | Prop | Type | Default | Description |
 | :--- | :--- | :--- | :--- |
@@ -170,7 +227,7 @@ Glass toolbars with multiple layout modes (Full, Floating, Fit).
 | `type` | `Preset` | `'heavy-frost'` | Modal material style. |
 | `shadow` | `string` | `'reflex'` | Surface reflection mode. |
 
-### CmToolbar Props
+### CgToolbar Props
 
 | Prop | Type | Default | Description |
 | :--- | :--- | :--- | :--- |
@@ -179,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
@@ -186,7 +253,8 @@ Glass toolbars with multiple layout modes (Full, Floating, Fit).
 This is the **Pro** version of the library. If a valid License Key is not detected or has expired:
 
 - Components will enter **Secure Lock** state (Blackout/Restricted UI).
-- Console warnings will be triggered (e.g., **"LICENSE_REQUIRED"**).
+- Interactive elements will show a **"LICENSE_REQUIRED"** message.
+- Console warnings will be triggered (e.g., **"SECURITY_ALERT: Components Locked"**).
 - Advanced SVG Filters and material presets will be disabled to protect intellectual property.
 
 You can check the current license status programmatically:
@@ -204,4 +272,4 @@ if (!status.isValid) {
 
 ## 📄 License
 
-(C) 2026 Glass Studio & CM Team. All rights reserved. Intellectual Property under private commercial license.
+(C) 2026 Glass Studio & CG Team. All rights reserved. Intellectual Property under private commercial license.

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,17 +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 { getLicenseStatus } from './core/license';
-export { CgCard, CgButton, CgCheckbox, CgFilters, CgModal, CgToolbar, CgNotification, 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';