@geniusdynamics/ns8-ui-lib 1.0.4 → 1.0.5

package/dist/src/components/ui/tags-input/TagsInputItem.vue.d.ts

@@ -0,0 +1,22 @@
+import { TagsInputItemProps } from 'reka-ui';
+import { HTMLAttributes } from 'vue';
+type __VLS_Props = TagsInputItemProps & {
+    class?: HTMLAttributes["class"];
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, 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/src/components/ui/tags-input/TagsInputItemDelete.vue.d.ts

@@ -0,0 +1,22 @@
+import { TagsInputItemDeleteProps } from 'reka-ui';
+import { HTMLAttributes } from 'vue';
+type __VLS_Props = TagsInputItemDeleteProps & {
+    class?: HTMLAttributes["class"];
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, 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/src/components/ui/tags-input/TagsInputItemText.vue.d.ts

@@ -0,0 +1,22 @@
+import { TagsInputItemTextProps } from 'reka-ui';
+import { HTMLAttributes } from 'vue';
+type __VLS_Props = TagsInputItemTextProps & {
+    class?: HTMLAttributes["class"];
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, 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/src/components/ui/tags-input/index.d.ts

@@ -0,0 +1,5 @@
+export { default as TagsInput } from './TagsInput.vue';
+export { default as TagsInputInput } from './TagsInputInput.vue';
+export { default as TagsInputItem } from './TagsInputItem.vue';
+export { default as TagsInputItemDelete } from './TagsInputItemDelete.vue';
+export { default as TagsInputItemText } from './TagsInputItemText.vue';

package/dist/src/components/ui/toggle/Toggle.vue.d.ts

@@ -0,0 +1,33 @@
+import { ToggleProps } from 'reka-ui';
+import { HTMLAttributes } from 'vue';
+import { ToggleVariants } from '.';
+type __VLS_Props = ToggleProps & {
+    class?: HTMLAttributes["class"];
+    variant?: ToggleVariants["variant"];
+    size?: ToggleVariants["size"];
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: any): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {
+    disabled: boolean;
+    variant: "default" | "outline" | null;
+    size: "default" | "sm" | "lg" | null;
+}, {}, {}, {}, 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/src/components/ui/toggle/index.d.ts

@@ -1,15 +1,7 @@
 import { VariantProps } from 'class-variance-authority';
-export { default as NsToggle } from './NsToggle.vue';
+export { default as Toggle } from './Toggle.vue';
 export declare const toggleVariants: (props?: ({
-    variant?: "default" | "destructive" | "warning" | "success" | null | undefined;
+    variant?: "default" | "outline" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export declare const toggleThumbVariants: (props?: ({
-    size?: "default" | "sm" | "lg" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export declare const labelVariants: (props?: ({
-    variant?: "default" | "destructive" | "warning" | "success" | "muted" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type ToggleVariants = VariantProps<typeof toggleVariants>;
-export type ToggleThumbVariants = VariantProps<typeof toggleThumbVariants>;
-export type LabelVariants = VariantProps<typeof labelVariants>;

package/dist/src/components/ui/toggle-group/ToggleGroup.vue.d.ts

@@ -0,0 +1,36 @@
+import { VariantProps } from 'class-variance-authority';
+import { ToggleGroupRootProps } from 'reka-ui';
+import { HTMLAttributes } from 'vue';
+import { toggleVariants } from '../toggle';
+type ToggleGroupVariants = VariantProps<typeof toggleVariants>;
+type __VLS_Props = ToggleGroupRootProps & {
+    class?: HTMLAttributes["class"];
+    variant?: ToggleGroupVariants["variant"];
+    size?: ToggleGroupVariants["size"];
+    spacing?: number;
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {
+            modelValue: import('reka-ui').AcceptableValue | import('reka-ui').AcceptableValue[] | undefined;
+        }): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (payload: import('reka-ui').AcceptableValue | import('reka-ui').AcceptableValue[]) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((payload: import('reka-ui').AcceptableValue | import('reka-ui').AcceptableValue[]) => any) | undefined;
+}>, {
+    spacing: 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/src/components/ui/toggle-group/ToggleGroupItem.vue.d.ts

@@ -0,0 +1,29 @@
+import { VariantProps } from 'class-variance-authority';
+import { ToggleGroupItemProps } from 'reka-ui';
+import { HTMLAttributes } from 'vue';
+import { toggleVariants } from '../toggle';
+type ToggleGroupVariants = VariantProps<typeof toggleVariants> & {
+    spacing?: number;
+};
+type __VLS_Props = ToggleGroupItemProps & {
+    class?: HTMLAttributes["class"];
+    variant?: ToggleGroupVariants["variant"];
+    size?: ToggleGroupVariants["size"];
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: any): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, 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/src/components/ui/toggle-group/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ToggleGroup } from './ToggleGroup.vue';
+export { default as ToggleGroupItem } from './ToggleGroupItem.vue';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geniusdynamics/ns8-ui-lib",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "Vue 3 library for NethServer 8 UI with TailwindCSS and Shadcn Vue",
   "keywords": [
     "nethserver",
@@ -38,35 +38,41 @@
   },
   "dependencies": {
     "@tanstack/vue-table": "^8.21.3",
-    "@vueuse/core": "^11.0.3",
-    "axios": "^1.13.2",
+    "@vee-validate/zod": "^4.15.1",
+    "@vueuse/core": "^14.2.1",
+    "axios": "^1.13.6",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
     "date-fns-tz": "^3.2.0",
-    "lottie-web-vue": "^1.2.0",
-    "radix-vue": "^1.9.7",
-    "reka-ui": "^2.6.1",
-    "tailwind-merge": "^3.4.0",
+    "embla-carousel-vue": "^8.6.0",
+    "lottie-web-vue": "^2.0.7",
+    "radix-vue": "^1.9.17",
+    "reka-ui": "^2.9.2",
+    "tailwind-merge": "^3.5.0",
     "tw-animate-css": "^1.4.0",
     "uuid": "^13.0.0",
-    "vue": "^3.5.24",
-    "vue-sonner": "^2.0.9"
+    "vaul-vue": "^0.4.1",
+    "vee-validate": "^4.15.1",
+    "vue": "^3.5.30",
+    "vue-input-otp": "^0.3.2",
+    "vue-sonner": "^2.0.9",
+    "zod": "3.25.76"
   },
   "devDependencies": {
-    "@tailwindcss/vite": "^4.1.18",
-    "@types/node": "^24.10.1",
-    "@vitejs/plugin-vue": "^6.0.1",
-    "@vue/tsconfig": "^0.8.1",
-    "autoprefixer": "^10.4.20",
-    "postcss": "^8.4.47",
+    "@tailwindcss/vite": "^4.2.1",
+    "@types/node": "^25.5.0",
+    "@vitejs/plugin-vue": "^6.0.5",
+    "@vue/tsconfig": "^0.9.0",
+    "autoprefixer": "^10.4.27",
+    "postcss": "^8.5.8",
     "shadcn-vue": "^2.4.3",
-    "tailwindcss": "^4.1.18",
+    "tailwindcss": "^4.2.1",
     "tailwindcss-animate": "^1.0.7",
     "typescript": "~5.9.3",
-    "vite": "^7.2.4",
-    "vite-plugin-dts": "^4.3.0",
-    "vue-tsc": "^3.1.4"
+    "vite": "^8.0.0",
+    "vite-plugin-dts": "^4.5.4",
+    "vue-tsc": "^3.2.5"
   },
   "peerDependencies": {
     "lucide-vue-next": "^0.562.0",

package/src/App.vue

@@ -5,10 +5,10 @@ import HelloWorld from './components/HelloWorld.vue'
 <template>
   <div>
     <a href="https://vite.dev" target="_blank">
-      <img src="/vite.svg" class="logo" alt="Vite logo" />
+      <img src="/vite.svg" class="tw:logo" alt="Vite logo" />
     </a>
     <a href="https://vuejs.org/" target="_blank">
-      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
+      <img src="./assets/vue.svg" class="tw:logo tw:vue" alt="Vue logo" />
     </a>
   </div>
   <HelloWorld msg="Vite + Vue" />

package/src/components/HelloWorld.vue

@@ -9,7 +9,7 @@ const count = ref(0)
 <template>
   <h1>{{ msg }}</h1>
 
-  <div class="card">
+  <div class="tw:card">
     <button type="button" @click="count++">count is {{ count }}</button>
     <p>
       Edit
@@ -31,7 +31,7 @@ const count = ref(0)
       >Vue Docs Scaling up Guide</a
     >.
   </p>
-  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
+  <p class="tw:read-the-docs">Click on the Vite and Vue logos to learn more</p>
 </template>
 
 <style scoped>

package/src/components/NS/CompleteDemo.vue

@@ -149,16 +149,16 @@ const handleWizardFinish = (data: any) => {
 </script>
 
 <template>
-  <div class="p-8 space-y-12 max-w-7xl mx-auto">
-    <h1 class="text-3xl font-bold mb-8">NS Components - Complete Showcase</h1>
+  <div class="tw:p-8 tw:space-y-12 tw:max-w-7xl tw:mx-auto">
+    <h1 class="tw:text-3xl tw:font-bold tw:mb-8">NS Components - Complete Showcase</h1>
 
     <!-- Basic Form Controls -->
-    <section class="space-y-6">
-      <h2 class="text-2xl font-semibold">Basic Form Controls</h2>
-      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+    <section class="tw:space-y-6">
+      <h2 class="tw:text-2xl tw:font-semibold">Basic Form Controls</h2>
+      <div class="tw:grid tw:grid-cols-1 md:tw:grid-cols-2 lg:tw:grid-cols-3 tw:gap-6">
         <!-- NS Checkbox -->
-        <div class="space-y-4">
-          <h3 class="text-lg font-medium">NS Checkbox</h3>
+        <div class="tw:space-y-4">
+          <h3 class="tw:text-lg tw:font-medium">NS Checkbox</h3>
           <NSCheckbox
             v-model:checked="checkboxValue"
             label="Accept terms and conditions"
@@ -174,8 +174,8 @@ const handleWizardFinish = (data: any) => {
         </div>
 
         <!-- NS Text Input -->
-        <div class="space-y-4">
-          <h3 class="text-lg font-medium">NS Text Input</h3>
+        <div class="tw:space-y-4">
+          <h3 class="tw:text-lg tw:font-medium">NS Text Input</h3>
           <NSTextInput
             v-model="textValue"
             label="Email"
@@ -194,8 +194,8 @@ const handleWizardFinish = (data: any) => {
         </div>
 
         <!-- NS Toggle -->
-        <div class="space-y-4">
-          <h3 class="text-lg font-medium">NS Toggle</h3>
+        <div class="tw:space-y-4">
+          <h3 class="tw:text-lg tw:font-medium">NS Toggle</h3>
           <NSToggle
             v-model:checked="toggleValue"
             label="Dark Mode"
@@ -215,9 +215,9 @@ const handleWizardFinish = (data: any) => {
     </section>
 
     <!-- Tags and Badges -->
-    <section class="space-y-6">
-      <h2 class="text-2xl font-semibold">NS Tag</h2>
-      <div class="flex flex-wrap gap-2">
+    <section class="tw:space-y-6">
+      <h2 class="tw:text-2xl tw:font-semibold">NS Tag</h2>
+      <div class="tw:flex tw:flex-wrap tw:gap-2">
         <NSTag 
           v-for="(tag, index) in tags" 
           :key="index" 
@@ -236,11 +236,11 @@ const handleWizardFinish = (data: any) => {
     </section>
 
     <!-- Progress and Sliders -->
-    <section class="space-y-6">
-      <h2 class="text-2xl font-semibold">Progress & Sliders</h2>
-      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-        <div class="space-y-4">
-          <h3 class="text-lg font-medium">Progress Components</h3>
+    <section class="tw:space-y-6">
+      <h2 class="tw:text-2xl tw:font-semibold">Progress & Sliders</h2>
+      <div class="tw:grid tw:grid-cols-1 md:tw:grid-cols-2 tw:gap-6">
+        <div class="tw:space-y-4">
+          <h3 class="tw:text-lg tw:font-medium">Progress Components</h3>
           <NSProgress
             :value="progressValue"
             show-label
@@ -255,8 +255,8 @@ const handleWizardFinish = (data: any) => {
           />
         </div>
 
-        <div class="space-y-4">
-          <h3 class="text-lg font-medium">Slider Components</h3>
+        <div class="tw:space-y-4">
+          <h3 class="tw:text-lg tw:font-medium">Slider Components</h3>
           <NSSlider
             v-model="sliderValue"
             :max="100"
@@ -277,19 +277,19 @@ const handleWizardFinish = (data: any) => {
     </section>
 
     <!-- Empty State and Notifications -->
-    <section class="space-y-6">
-      <h2 class="text-2xl font-semibold">Empty States & Notifications</h2>
-      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-        <div class="space-y-4">
-          <h3 class="text-lg font-medium">Empty States</h3>
+    <section class="tw:space-y-6">
+      <h2 class="tw:text-2xl tw:font-semibold">Empty States & Notifications</h2>
+      <div class="tw:grid tw:grid-cols-1 md:tw:grid-cols-2 tw:gap-6">
+        <div class="tw:space-y-4">
+          <h3 class="tw:text-lg tw:font-medium">Empty States</h3>
           <NSEmptyState
             title="No results found"
             description="Try adjusting your search filters to find what you're looking for."
           />
         </div>
 
-        <div class="space-y-4">
-          <h3 class="text-lg font-medium">Notifications</h3>
+        <div class="tw:space-y-4">
+          <h3 class="tw:text-lg tw:font-medium">Notifications</h3>
           <NSInlineNotification
             title="Success!"
             description="Your changes have been saved successfully."
@@ -309,36 +309,36 @@ const handleWizardFinish = (data: any) => {
     </section>
 
     <!-- Modal -->
-    <section class="space-y-6">
-      <h2 class="text-2xl font-semibold">Modal</h2>
+    <section class="tw:space-y-6">
+      <h2 class="tw:text-2xl tw:font-semibold">Modal</h2>
       <NSModalTrigger
         v-model="modalOpen"
         title="Example Modal"
         description="This is an example modal with rich content."
       >
         <template #trigger>
-          <button class="px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90">
+          <button class="tw:px-4 tw:py-2 tw:bg-primary tw:text-primary-foreground tw:rounded-md hover:tw:bg-primary/90">
             Open Modal
           </button>
         </template>
         
-        <div class="space-y-4">
+        <div class="tw:space-y-4">
           <p>This modal demonstrates the NSModal component with:</p>
-          <ul class="list-disc list-inside space-y-1 text-sm text-muted-foreground">
+          <ul class="tw:list-disc tw:list-inside tw:space-y-1 tw:text-sm tw:text-muted-foreground">
             <li>Customizable sizes</li>
             <li>Fullscreen mode</li>
             <li>Header and footer slots</li>
             <li>Escape key and overlay click handling</li>
           </ul>
-          <div class="flex justify-end gap-2 pt-4">
+          <div class="tw:flex tw:justify-end tw:gap-2 tw:pt-4">
             <button 
-              class="px-3 py-2 border border-input bg-background hover:bg-accent rounded-md"
+              class="tw:px-3 tw:py-2 tw:border tw:border-input tw:bg-background hover:tw:bg-accent tw:rounded-md"
               @click="modalOpen = false"
             >
               Cancel
             </button>
             <button 
-              class="px-3 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90"
+              class="tw:px-3 tw:py-2 tw:bg-primary tw:text-primary-foreground tw:rounded-md hover:tw:bg-primary/90"
               @click="modalOpen = false"
             >
               Confirm
@@ -349,8 +349,8 @@ const handleWizardFinish = (data: any) => {
     </section>
 
     <!-- Data Table -->
-    <section class="space-y-6">
-      <h2 class="text-2xl font-semibold">Data Table</h2>
+    <section class="tw:space-y-6">
+      <h2 class="tw:text-2xl tw:font-semibold">Data Table</h2>
       <NSDataTable
         :data="tableData"
         :columns="tableColumns"
@@ -367,8 +367,8 @@ const handleWizardFinish = (data: any) => {
     </section>
 
     <!-- Wizard -->
-    <section class="space-y-6">
-      <h2 class="text-2xl font-semibold">Wizard</h2>
+    <section class="tw:space-y-6">
+      <h2 class="tw:text-2xl tw:font-semibold">Wizard</h2>
       <NSWizard
         v-model="wizardStep"
         :steps="wizardSteps"
@@ -379,7 +379,7 @@ const handleWizardFinish = (data: any) => {
         @finish="handleWizardFinish"
       >
         <template #step-account>
-          <div class="space-y-4">
+          <div class="tw:space-y-4">
             <NSTextInput label="Username" placeholder="Choose a username" />
             <NSTextInput label="Email" type="email" placeholder="your@email.com" />
             <NSTextInput label="Password" type="password" :show-password-toggle="true" />
@@ -387,7 +387,7 @@ const handleWizardFinish = (data: any) => {
         </template>
         
         <template #step-profile>
-          <div class="space-y-4">
+          <div class="tw:space-y-4">
             <NSTextInput label="First Name" placeholder="John" />
             <NSTextInput label="Last Name" placeholder="Doe" />
             <NSTextInput label="Phone" placeholder="+1 234 567 8900" />
@@ -395,7 +395,7 @@ const handleWizardFinish = (data: any) => {
         </template>
         
         <template #step-preferences>
-          <div class="space-y-4">
+          <div class="tw:space-y-4">
             <NSToggle label="Email Notifications" description="Receive email updates" />
             <NSToggle label="Push Notifications" description="Receive push notifications" />
             <NSToggle label="Dark Mode" description="Use dark theme" />
@@ -403,7 +403,7 @@ const handleWizardFinish = (data: any) => {
         </template>
         
         <template #step-review>
-          <div class="space-y-4">
+          <div class="tw:space-y-4">
             <NSEmptyState
               title="Review Your Information"
               description="Please review all the information you've provided before completing the setup."
@@ -415,9 +415,9 @@ const handleWizardFinish = (data: any) => {
     </section>
 
     <!-- Specialized Cards -->
-    <section class="space-y-6">
-      <h2 class="text-2xl font-semibold">Specialized Cards</h2>
-      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+    <section class="tw:space-y-6">
+      <h2 class="tw:text-2xl tw:font-semibold">Specialized Cards</h2>
+      <div class="tw:grid tw:grid-cols-1 md:tw:grid-cols-2 lg:tw:grid-cols-3 tw:gap-6">
         <!-- Backup Card -->
         <NSBackupCard
           :backups="backupData"
@@ -459,8 +459,8 @@ const handleWizardFinish = (data: any) => {
     </section>
 
     <!-- Pagination -->
-    <section class="space-y-6">
-      <h2 class="text-2xl font-semibold">Pagination</h2>
+    <section class="tw:space-y-6">
+      <h2 class="tw:text-2xl tw:font-semibold">Pagination</h2>
       <NSPagination
         :current-page="currentPage"
         :total-items="50"

package/src/components/NS/Demo.vue

@@ -28,13 +28,13 @@ const handleNotificationAction = () => {
 </script>
 
 <template>
-  <div class="p-8 space-y-8 max-w-4xl mx-auto">
-    <h1 class="text-2xl font-bold mb-6">NS Components Demo</h1>
+  <div class="tw:p-8 tw:space-y-8 tw:max-w-4xl tw:mx-auto">
+    <h1 class="tw:text-2xl tw:font-bold tw:mb-6">NS Components Demo</h1>
 
     <!-- NS Checkbox -->
-    <div class="space-y-4">
-      <h2 class="text-xl font-semibold">NS Checkbox</h2>
-      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+    <div class="tw:space-y-4">
+      <h2 class="tw:text-xl tw:font-semibold">NS Checkbox</h2>
+      <div class="tw:grid tw:grid-cols-1 md:tw:grid-cols-2 tw:gap-4">
         <NSCheckbox
           v-model:checked="checkboxValue"
           label="Accept terms and conditions"
@@ -63,9 +63,9 @@ const handleNotificationAction = () => {
     </div>
 
     <!-- NS Text Input -->
-    <div class="space-y-4">
-      <h2 class="text-xl font-semibold">NS Text Input</h2>
-      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+    <div class="tw:space-y-4">
+      <h2 class="tw:text-xl tw:font-semibold">NS Text Input</h2>
+      <div class="tw:grid tw:grid-cols-1 md:tw:grid-cols-2 tw:gap-4">
         <NSTextInput
           v-model="textValue"
           label="Username"
@@ -97,9 +97,9 @@ const handleNotificationAction = () => {
     </div>
 
     <!-- NS Toggle -->
-    <div class="space-y-4">
-      <h2 class="text-xl font-semibold">NS Toggle</h2>
-      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+    <div class="tw:space-y-4">
+      <h2 class="tw:text-xl tw:font-semibold">NS Toggle</h2>
+      <div class="tw:grid tw:grid-cols-1 md:tw:grid-cols-2 tw:gap-4">
         <NSToggle
           v-model:checked="toggleValue"
           label="Dark Mode"
@@ -130,9 +130,9 @@ const handleNotificationAction = () => {
     </div>
 
     <!-- NS Tag -->
-    <div class="space-y-4">
-      <h2 class="text-xl font-semibold">NS Tag</h2>
-      <div class="flex flex-wrap gap-2">
+    <div class="tw:space-y-4">
+      <h2 class="tw:text-xl tw:font-semibold">NS Tag</h2>
+      <div class="tw:flex tw:flex-wrap tw:gap-2">
         <NSTag v-for="(tag, index) in tags" :key="index" :label="tag" removable @remove="handleTagRemove(index)" />
         <NSTag label="Default" />
         <NSTag label="Secondary" variant="secondary" />
@@ -145,9 +145,9 @@ const handleNotificationAction = () => {
     </div>
 
     <!-- NS Empty State -->
-    <div class="space-y-4">
-      <h2 class="text-xl font-semibold">NS Empty State</h2>
-      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+    <div class="tw:space-y-4">
+      <h2 class="tw:text-xl tw:font-semibold">NS Empty State</h2>
+      <div class="tw:grid tw:grid-cols-1 md:tw:grid-cols-2 tw:gap-4">
         <NSEmptyState
           title="No results found"
           description="Try adjusting your search filters to find what you're looking for."
@@ -161,9 +161,9 @@ const handleNotificationAction = () => {
     </div>
 
     <!-- NS Inline Notification -->
-    <div class="space-y-4">
-      <h2 class="text-xl font-semibold">NS Inline Notification</h2>
-      <div class="grid grid-cols-1 gap-4">
+    <div class="tw:space-y-4">
+      <h2 class="tw:text-xl tw:font-semibold">NS Inline Notification</h2>
+      <div class="tw:grid tw:grid-cols-1 tw:gap-4">
         <NSInlineNotification
           title="Success!"
           description="Your changes have been saved successfully."