windly-ui 1.0.0 → 1.0.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Your Name
+
+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

@@ -142,6 +142,30 @@ No unnecessary abstractions or overhead.
 
 ## Example Usage
 
+```vue
+<template>
+  <UICard bordered>
+    <template #header>
+      <h3 class="text-lg font-semibold">Welcome</h3>
+    </template>
+
+    <p>This is a simple card using the UI library.</p>
+# Tailwind-Based UI Library for Nuxt 4
+
+A lightweight, modular UI component library built specifically for Nuxt 4 applications, powered by Tailwind CSS.
+
+## Overview
+
+This UI library is designed to accelerate frontend development by providing reusable, customizable, and auto-imported components.
+
+## Key Features
+
+- Tailwind-first design: components accept Tailwind utility classes directly.
+- Auto-imported components via Nuxt 4's component system.
+- Lightweight, framework-native Vue 3 components.
+
+## Example Usage
+
 ```vue
 <template>
   <UICard bordered>
@@ -158,51 +182,51 @@ No unnecessary abstractions or overhead.
 </template>
 ```
 
----
+## Local test and packaging
 
-## Advanced Example
+1. Build the module (the `prepare` script runs this automatically on `npm pack` and `npm publish`):
 
-```vue
-<UITabs v-model="activeTab">
-  <UITabPanel name="first" label="Overview">
-    <p>Overview content</p>
-  </UITabPanel>
-
-  <UITabPanel name="second" label="Details">
-    <p>Details content</p>
-  </UITabPanel>
-</UITabs>
+```bash
+npm run build
 ```
 
----
+2. Create a local tarball for testing:
 
-## Goals
+```bash
+npm pack
+```
 
-* Provide a clean alternative to heavy UI frameworks
-* Showcase advanced Vue patterns in a simple way
-* Enable rapid prototyping with Tailwind
-* Keep the system small, composable, and extensible
+3. In another project, install the generated tarball (replace the filename with the one produced by `npm pack`):
 
----
+```bash
+npm install /path/to/windly-ui-1.0.2.tgz
+```
 
-## Future Improvements
+4. Add the module to `nuxt.config` in the consuming project:
 
-* Theme system (dark mode, tokens)
-* Component playground with live prop editing
-* Accessibility improvements (ARIA support)
-* Animation utilities
-* Plugin system for extending components
+```ts
+export default defineNuxtConfig({
+  modules: [
+    'windly-ui'
+  ]
+})
+```
 
----
+## Publish
+
+1. Bump the version in `package.json`.
+2. Ensure you are logged into npm: `npm login`.
+3. Publish:
 
-## Summary
+```bash
+npm publish --access public
+```
 
-This UI library is a developer-focused toolkit for building modern Nuxt applications quickly without sacrificing flexibility or control.
+## Notes
 
-It combines:
+- The package auto-registers components under the `UI` prefix (for example `UIButton`, `UICard`).
+- The `plugin.ts` also registers the most common components explicitly.
 
-* Vue 3 reactivity
-* Tailwind CSS flexibility
-* Clean and consistent component design
+## License
 
-Build fast, customize freely, and stay in control.
+MIT

package/package.json

@@ -1,21 +1,59 @@
 {
   "name": "windly-ui",
-  "version": "1.0.0",
+  "version": "1.0.2",
+  "description": "A Nuxt 4 module providing a small Tailwind-based UI component library",
   "type": "module",
-  "private": false,
+  "main": "./ui-library/dist/module.mjs",
+  "exports": {
+    ".": "./ui-library/dist/module.mjs"
+  },
+  "files": [
+    "ui-library/dist",
+    "README.md",
+    "LICENSE"
+  ],
   "scripts": {
-    "build": "nuxt build",
-    "dev": "nuxt dev",
-    "generate": "nuxt generate",
-    "preview": "nuxt preview",
-    "postinstall": "nuxt prepare"
+  "build": "nuxt-module-build ui-library",
+    "prepare": "npm run build",
+    "prepublishOnly": "npm run build",
+    "pack": "npm pack",
+    "pack:local": "npm run build && npm pack --pack-destination ./pack",
+    "lint": "echo \"no lint configured\" && exit 0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/your-username/windly-ui.git"
+  },
+  "keywords": [
+    "nuxt-module",
+    "nuxt",
+    "vue",
+    "tailwind",
+    "ui-library"
+  ],
+  "author": "Your Name <you@example.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/your-username/windly-ui/issues"
   },
-  "dependencies": {
+  "homepage": "https://github.com/your-username/windly-ui#readme",
+  "peerDependencies": {
     "nuxt": "^4.2.2",
-    "vue": "^3.5.26",
-    "vue-router": "^4.6.4"
+    "vue": "^3.5.26"
   },
   "devDependencies": {
+    "@nuxt/module-builder": "^latest",
     "@nuxtjs/tailwindcss": "^6.14.0"
+  },
+  "typesVersions": {
+    "*": {
+      "*": ["./ui-library/dist/*"]
+    }
+  },
+  "engines": {
+    "node": ">=16"
+  },
+  "publishConfig": {
+    "access": "public"
   }
-}
+}

package/ui-library/dist/module.d.mts

@@ -0,0 +1,3 @@
+declare const _default: any;
+
+export { _default as default };

package/ui-library/dist/module.json

@@ -0,0 +1,8 @@
+{
+  "name": "ui-library",
+  "configKey": "uiLibrary",
+  "builder": {
+    "@nuxt/module-builder": "1.0.2",
+    "unbuild": "3.6.1"
+  }
+}

package/ui-library/dist/module.mjs

@@ -0,0 +1,22 @@
+import { defineNuxtModule, createResolver, addComponentsDir } from '@nuxt/kit';
+
+const module$1 = defineNuxtModule({
+  meta: {
+    name: "ui-library",
+    configKey: "uiLibrary"
+  },
+  setup(_, nuxt) {
+    const resolver = createResolver(import.meta.url);
+    addComponentsDir({
+      path: resolver.resolve("./components"),
+      prefix: "UI",
+      // This will prefix components with <UIButton />, <UICard /> etc.
+      pathPrefix: false,
+      // Don't include folder names as prefix
+      extensions: ["vue"],
+      watch: nuxt.options.dev
+    });
+  }
+});
+
+export { module$1 as default };

package/ui-library/dist/types.d.mts

@@ -0,0 +1,7 @@
+import type { NuxtModule } from '@nuxt/schema'
+
+import type { default as Module } from './module.mjs'
+
+export type ModuleOptions = typeof Module extends NuxtModule<infer O> ? Partial<O> : Record<string, any>
+
+export { default } from './module.mjs'

package/app/app.vue

@@ -1,10 +0,0 @@
-<template>
-  <NuxtLayout>
-    <NuxtPage/>
-  </NuxtLayout>
-</template>
-<style>
-body {
-  font-family: "Poppins", sans-serif;
-}
-</style>

package/app/assets/css/tailwind.css

@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;

package/app/components/doc/component.vue

@@ -1,34 +0,0 @@
-<script setup>
-    const props = defineProps({
-        title: {
-            type: String
-        },
-        caption: {
-            type: String,
-            default: ""
-        }
-    })
-    const sectionId = props.title.split(' ').join('-').toLocaleLowerCase()
-    const copySectionLink = async () => {
-        const url = `${window.location.origin}${window.location.pathname}#${sectionId}`
-
-        try {
-            await navigator.clipboard.writeText(url)
-            console.log('Link copied:', url)
-        } catch (err) {
-            console.error('Failed to copy link', err)
-        }
-        }
-</script>
-<template>
-    <div :id="sectionId" class="flex flex-col my-10">
-        <h4 class="text-3xl font-semibold text-gray-700 cursor-pointer" @click="copySectionLink"># {{title}}</h4>
-        <div v-if="caption" class="text-md font-light mt-2 text-gray-800 pl-7">{{caption}}</div>
-        <div class="my-6">
-            <UICodeBlock :title="title">
-                <slot />
-            </UICodeBlock>
-        </div>
-        <hr/>
-    </div>
-</template>

package/app/components/doc/megaSection.vue

@@ -1,56 +0,0 @@
-<script setup>
-import { ref, computed } from 'vue'
-
-const props = defineProps({
-    title: {
-        type: String,
-        required: true
-    },
-    subTitle: {
-        type: String,
-        default: ""
-    },
-    caption: {
-        type: String,
-        default: ""
-    },
-})
-
-const sectionId = computed(() =>
-    props.title.split(' ').join('-').toLowerCase()
-)
-
-const copySectionLink = async (e) => {
-    e.stopPropagation()
-
-    const url = `${window.location.origin}${window.location.pathname}#${sectionId.value}`
-
-    try {
-        await navigator.clipboard.writeText(url)
-        console.log('Link copied:', url)
-    } catch (err) {
-        console.error('Failed to copy link', err)
-    }
-}
-</script>
-<template>
-    <section :id="sectionId">
-        <div class="flex flex-col my-10">
-            <UIAccordion class="!border-0" :default-open="true" :margin="false">
-                <template #header>
-                    <h3 class="flex items-center gap-2 text-5xl font-semibold text-sky-500 group select-none">
-                    {{ title }}
-                        <span class="hidden group-hover:block text-xl hover:opacity-100" @click="copySectionLink">
-                            #
-                        </span>
-                    </h3>
-                    <div class="font-light text-gray-700">{{ subTitle }}</div>
-                </template>
-                    <p v-if="caption" class="text-md font-light mt-2 text-gray-800 pl-7">
-                        {{ caption }}
-                    </p>
-                    <slot />
-            </UIAccordion>
-        </div>
-    </section>
-</template>

package/app/components/doc/section.vue

@@ -1,56 +0,0 @@
-<script setup>
-import { ref, computed } from 'vue'
-
-const props = defineProps({
-    title: {
-        type: String,
-        required: true
-    },
-    subTitle: {
-        type: String,
-        default: ""
-    },
-    caption: {
-        type: String,
-        default: ""
-    },
-})
-
-const sectionId = computed(() =>
-    props.title.split(' ').join('-').toLowerCase()
-)
-
-const copySectionLink = async (e) => {
-    e.stopPropagation()
-
-    const url = `${window.location.origin}${window.location.pathname}#${sectionId.value}`
-
-    try {
-        await navigator.clipboard.writeText(url)
-        console.log('Link copied:', url)
-    } catch (err) {
-        console.error('Failed to copy link', err)
-    }
-}
-</script>
-<template>
-    <section :id="sectionId">
-        <div class="flex flex-col my-10">
-            <UIAccordion :default-open="true">
-                <template #header>
-                    <h3 class="flex items-center gap-2 text-5xl font-semibold text-sky-500 group select-none">
-                    {{ title }}
-                        <span class="hidden group-hover:block text-xl hover:opacity-100" @click="copySectionLink">
-                            #
-                        </span>
-                    </h3>
-                    <div class="font-light text-gray-700">{{ subTitle }}</div>
-                </template>
-                    <p v-if="caption" class="text-md font-light mt-2 text-gray-800 pl-7">
-                        {{ caption }}
-                    </p>
-                    <slot />
-            </UIAccordion>
-        </div>
-    </section>
-</template>