manolis-ui 1.0.6

package/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "eslint.experimental.useFlatConfig": true
+}

package/CHANGELOG.md

@@ -0,0 +1 @@
+- no changes- no changes- no changes- no changes

package/CHANGELOG_NEW.md

@@ -0,0 +1 @@
+- no changes

package/LICENSE

@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/README.md

@@ -0,0 +1,87 @@
+<!--
+Get your module up and running quickly.
+
+Find and replace all on all files (CMD+SHIFT+F):
+- Name: Manolis UI
+- Package name: manolis-ui
+- Description: My new Nuxt module
+-->
+
+# Manolis UI
+
+[![npm version][npm-version-src]][npm-version-href]
+[![npm downloads][npm-downloads-src]][npm-downloads-href]
+[![License][license-src]][license-href]
+[![Nuxt][nuxt-src]][nuxt-href]
+
+A design system for every product and or company under manolis trading
+
+- [✨ &nbsp;Release Notes](/CHANGELOG.md)
+<!-- - [🏀 Online playground](https://stackblitz.com/github/manolis-trading/manolis-ui?file=playground%2Fapp.vue) -->
+<!-- - [📖 &nbsp;Documentation](https://example.com) -->
+
+## Features
+
+<!-- Highlight some of the features your module provide here -->
+- 🌼 Build on top of daisy UI
+- 🛠 55 custom build components
+- 📦 Packaged for Vue 3 and nuxt 3
+
+## Quick Setup
+
+Install the module to your Nuxt application with one command:
+
+```bash
+npx nuxi module add manolis-ui
+```
+
+That's it! You can now use Manolis UI in your Nuxt app ✨
+
+
+## Contribution
+
+<details>
+  <summary>Local development</summary>
+  
+  ```bash
+  # Install dependencies
+  yarn install
+  
+  # Generate type stubs
+  yarn run dev:prepare
+  
+  # Develop with the playground
+  yarn run dev
+  
+  # Build the playground
+  yarn run dev:build
+  
+  # Run ESLint
+  yarn run lint
+  
+  # Run Vitest
+  yarn run test
+  yarn run test:watch
+  
+  # Release new version
+  yarn run release
+
+  # Storybook
+  yarn run storybook
+  ```
+
+</details>
+
+
+<!-- Badges -->
+[npm-version-src]: https://img.shields.io/npm/v/manolis-ui/latest.svg?style=flat&colorA=020420&colorB=00DC82
+[npm-version-href]: https://npmjs.com/package/manolis-ui
+
+[npm-downloads-src]: https://img.shields.io/npm/dm/manolis-ui.svg?style=flat&colorA=020420&colorB=00DC82
+[npm-downloads-href]: https://npm.chart.dev/manolis-ui
+
+[license-src]: https://img.shields.io/npm/l/manolis-ui.svg?style=flat&colorA=020420&colorB=00DC82
+[license-href]: https://npmjs.com/package/manolis-ui
+
+[nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js
+[nuxt-href]: https://nuxt.com

package/dist/module.cjs

@@ -0,0 +1,5 @@
+module.exports = function(...args) {
+  return import('./module.mjs').then(m => m.default.call(this, ...args))
+}
+const _meta = module.exports.meta = require('./module.json')
+module.exports.getMeta = () => Promise.resolve(_meta)

package/dist/module.d.mts

@@ -0,0 +1,12 @@
+import * as _nuxt_schema from '@nuxt/schema';
+
+interface ThemeOptions {
+    name: string;
+}
+interface ModuleOptions {
+    css: boolean;
+    theme?: ThemeOptions;
+}
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
+
+export { type ModuleOptions, type ThemeOptions, _default as default };

package/dist/module.d.ts

@@ -0,0 +1,12 @@
+import * as _nuxt_schema from '@nuxt/schema';
+
+interface ThemeOptions {
+    name: string;
+}
+interface ModuleOptions {
+    css: boolean;
+    theme?: ThemeOptions;
+}
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
+
+export { type ModuleOptions, type ThemeOptions, _default as default };

package/dist/module.json

@@ -0,0 +1,9 @@
+{
+  "name": "manolis-ui",
+  "configKey": "manolisUI",
+  "version": "1.0.6",
+  "builder": {
+    "@nuxt/module-builder": "0.8.4",
+    "unbuild": "2.0.0"
+  }
+}

package/dist/module.mjs

@@ -0,0 +1,34 @@
+import { defineNuxtModule, createResolver, addPlugin, installModule, addComponentsDir } from '@nuxt/kit';
+
+const module = defineNuxtModule({
+  meta: {
+    name: "manolis-ui",
+    configKey: "manolisUI"
+  },
+  // Default configuration options of the Nuxt module
+  defaults: {
+    css: true
+  },
+  async setup(_options, _nuxt) {
+    const resolver = createResolver(import.meta.url);
+    addPlugin(resolver.resolve("./runtime/plugin"));
+    await installModule("@nuxtjs/tailwindcss", {
+      /**
+       * Here, you specify where your config is.
+       * By default, the module have a configPath relative
+       * to the current path, ie the playground !
+       * (or the app using your module)
+       */
+      cssPath: _options.css ? resolver.resolve("./runtime/assets/css/tailwind.css") : false,
+      configPath: resolver.resolve("../tailwind.config")
+    });
+    await addComponentsDir({
+      path: resolver.resolve("./runtime/components"),
+      pathPrefix: false,
+      prefix: "",
+      global: true
+    });
+  }
+});
+
+export { module as default };

package/dist/runtime/assets/css/tailwind.css

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

package/dist/runtime/components/actions/ButtonComponent.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+interface Props {
+    outlined?: boolean,
+    active?: boolean,
+    loading?: boolean,
+    type?: 'neutral' | 'primary' | 'secondary' | 'accent' | 'ghost' | 'link' | 'info' | 'success' | 'warning' | 'error';
+    size?: string;
+    shape?: 'square' | 'circle';
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    outlined: false,
+    active: false,
+    loading: false
+});
+
+const sizeClass = computed(() => {
+    switch (props.size) {
+        case 'large':
+            return 'btn-lg';
+        case 'small':
+            return 'btn-sm';
+        case 'tiny':
+            return 'btn-tiny';
+        case 'wide':
+            return 'btn-wide';
+        default:
+            return '';
+    }
+});
+
+const buttonType = computed(() => {
+    switch (props.type) {
+        case "neutral":
+            return "btn-neutral";
+        case "primary":
+            return "btn-primary";
+        case "secondary":
+            return "btn-secondary";
+        case "accent":
+            return "btn-accent";
+        case "ghost":
+            return "btn-ghost";
+        case "link":
+            return "btn-link";
+        case "info":
+            return "btn-info";
+        case "success":
+            return "btn-success";
+        case "warning":
+            return "btn-warning";
+        case "error":
+            return "btn-error";
+        default:
+            return "btn-neutral";
+    }
+});
+
+const shapeClass = computed(() => {
+    switch (props.shape) {
+        case "square":
+            return "btn-square";
+        case "circle":
+            return "btn-circle";
+        default:
+            return "";
+    }
+});
+</script>
+
+<template>
+    <button
+        :class="['btn', {['btn-outline']: props.outlined }, {['btn-active']: props.active }, buttonType, sizeClass, shapeClass]">
+        <span v-if="loading" class="loading loading-spinner"></span>
+        <slot>Submit</slot>
+    </button>
+</template>

package/dist/runtime/components/actions/dropdown.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+interface Props {
+    items?: Array<dropdownItem>;
+    position?: keyof typeof dropdownPosition;
+    floatPosition?: keyof typeof dropdownFloatPosition;
+    openOnHover?: boolean,
+    forceOpen?: boolean
+}
+
+interface dropdownItem {
+    text: string,
+    link: string,
+}
+
+const dropdownPosition = {
+    left: "dropdown-left",
+    right: "dropdown-right",
+    bottom: "dropdown-bottom",
+    top: "dropdown-top"
+}
+
+const dropdownFloatPosition = {
+    start: "",
+    end: "dropdown-end"
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    position: "bottom",
+    floatPosition: "start",
+    openOnHover: false,
+    forceOpen: false,
+});</script>
+
+<template>
+    <div class="dropdown" :class="dropdownPosition[props.position], dropdownFloatPosition[props.floatPosition],{ ['dropdown-open']: props.forceOpen } , { ['dropdown-hover']: props.openOnHover }">
+        <!-- this has to be a button -->
+        <slot tabindex="0" role="button">
+            <div class="btn m-1">Open dropdown</div>
+        </slot>
+        <ul tabindex="0" class="dropdown-content menu bg-base-100 rounded z-[1] w-52 p-2 shadow">
+            <li v-for="item in items"><a :href="item.link">{{ item.text }}</a></li>
+            <slot name="additional"></slot>
+        </ul>
+
+    </div>
+</template>

package/dist/runtime/components/actions/modal.vue

@@ -0,0 +1,52 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+interface Props {
+    position?: keyof typeof modalPosition;
+    withBackdrop?: boolean,
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    position: "center",
+    withBackdrop: false
+});
+
+const modalPosition = {
+    top: "modal-top",
+    bottom: "modal-bottom",
+    center: "modal-middle"
+}
+
+const dialog = ref<HTMLDialogElement | null>(null);
+
+const openDialog = (): void => {
+    dialog.value?.showModal();
+}
+
+const closeDialog = (): void => {
+    dialog.value?.close();
+}
+
+</script>
+
+<template>
+    <span class="w-fit cursor-pointer" @click="openDialog">
+        <slot name="trigger" role="button">
+            <button class="btn">Open</button>
+        </slot>
+    </span>
+    
+    <dialog ref="dialog" class="modal" :class="modalPosition[position]">
+        <div class="modal-box">
+            <slot></slot>
+            <div class="modal-action">
+                <slot name="actions" />
+                <form method="dialog" @submit="closeDialog" :class="withBackdrop ? 'modal-backdrop' : ''">
+                    <slot name="close-button">
+                        <button class="btn">Close</button>
+                    </slot>
+                </form>
+            </div>
+        </div>
+    </dialog>
+</template>

package/dist/runtime/components/actions/swap.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+interface Props {
+    effect?: "rotate" | "flip"
+}
+
+const props = defineProps<Props>();
+</script>
+
+<template>
+    <label class="swap" :class="props.effect ? `swap-${effect}` : ''">
+        <input type="checkbox" />
+        <div class="swap-on"><slot name="on"></slot></div>
+        <div class="swap-off"><slot name="off"></slot></div>
+    </label>
+</template>

package/dist/runtime/components/actions/theme-controller.vue

@@ -0,0 +1,52 @@
+<script lang="ts" setup>
+import { Sun, Moon } from 'lucide-vue-next';
+import { ref, watch, onMounted } from 'vue';
+import { useLocalStorage } from '../../composables/useLocalStorage'; // Import the custom composable
+
+// Define the Props interface and default values
+interface Props {
+    theme?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    theme: 'reserveren-dark',
+});
+
+// Use the composable for localStorage functionality
+const themeValue = useLocalStorage('theme', props.theme);
+
+// Function to apply DaisyUI theme using `data-theme` attribute
+function updateTheme(theme: string) {
+    if (typeof window !== 'undefined' && window.document) {
+        const htmlElement = document.documentElement;
+        htmlElement.setAttribute('data-theme', theme);
+    }
+}
+
+// Apply the theme on mounted (client-side only)
+onMounted(() => {
+    updateTheme(themeValue.value);
+});
+
+// Watch themeValue changes and update localStorage
+watch(themeValue, (newValue) => {
+    updateTheme(newValue); // Apply the theme change
+});
+</script>
+
+<template>
+    <label class="swap swap-rotate">
+        <!-- Checkbox controls the state -->
+        <input
+            type="checkbox"
+            class="theme-controller"
+            v-model="themeValue"
+            :true-value="'light'"
+            :false-value="'reserveren-dark'"
+        />
+        <!-- Sun icon for light mode -->
+        <Sun class="swap-off fill-current"></Sun>
+        <!-- Moon icon for dark mode -->
+        <Moon class="swap-on fill-current"></Moon>
+    </label>
+</template>

package/dist/runtime/components/data-display/accordion.vue

@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+import { ref, watch } from 'vue';
+
+const props = withDefaults(defineProps<Props>(), {
+    joinItems: false
+});
+
+interface Props {
+    name: string;
+    items: Array<Accordion>;
+    joinItems?: boolean;
+    icon?: "arrow" | "plus";
+}
+
+interface Accordion {
+    title: string;
+    content: string;
+}
+</script>
+
+
+<template>
+    <div class="collapse" :class="[props.icon ? `collapse-${props.icon}` : '', { ['join-item']: joinItems }]" v-for="(item, index) in props.items">
+        <input type="radio" :name="name" value="true" />
+        <div class="collapse-title text-xl font-medium">{{item.title}}</div>
+        <div class="collapse-content">
+            <span v-html="item.content"></span>
+        </div>
+    </div>
+</template>

package/dist/runtime/components/data-display/avatar.vue

@@ -0,0 +1,36 @@
+<script lang="ts" setup>
+import { ref, watch } from 'vue';
+
+interface Props {
+    image: string,
+    onlineStatus?: "online" | "offline" | "none",
+    initials?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    onlineStatus: "none"
+});
+
+const onlineStatusValue = ref<"online" | "offline" | "none">(props.onlineStatus);
+watch(
+    () => props.onlineStatus,
+    (newValue) => {
+        if (newValue) {
+            onlineStatusValue.value = newValue;
+        }
+    }
+);
+
+</script>
+
+<template>
+    <div class="avatar" :class="onlineStatus">
+        <div class="rounded-full" v-if="image">
+            <img :src="image" class="w-24">
+        </div>
+
+        <div v-else class="bg-neutral text-neutral-content w-16 rounded-full flex justify-center p-[25%] text-center">
+            <p class="text-xl">{{initials}}</p>
+        </div>
+    </div>
+</template>

package/dist/runtime/components/data-display/badge.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+const props = withDefaults(defineProps<Props>(), {
+    color: "neutral",
+    outline: false,
+    size: "medium"
+});
+const sizes = {
+    'extra small': 'badge-xs',
+    small: "badge-sm",
+    medium: "badge-md",
+    large: "badge-lg",
+}
+
+const colors = {
+    neutral: "badge-neutral",
+    primary: "badge-primary",
+    secondary: "badge-secondary",
+    accent: "badge-accent",
+    ghost: "badge-ghost",
+    info: "badge-info",
+    success: "badge-success",
+    warning: "badge-warning",
+    error: "badge-error"
+}
+
+interface Props {
+    color?: "neutral" | "primary" | "secondary" | "accent" | "ghost" | "info" | "success" | "warning" | "error"
+    outline?: boolean,
+    size?: "extra small" | "small" | "medium" | "large"
+}
+</script>
+
+<template>
+    <span class="badge" :class="sizes[props.size], colors[props.color], {['badge-outline']: props.outline }"><slot></slot></span>
+</template>

package/dist/runtime/components/data-display/card.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+
+interface Props {
+    imgUrl: string;
+    alt?: string;
+    title?: string;
+    description?: string;
+    outlined?: boolean;
+}
+  
+  const props = withDefaults(defineProps<Props>(), {
+    imgUrl: "",
+    alt: "A beautiful picture that says something about this card",
+    title: '',
+    outlined: false,
+    description: ""
+  });
+
+  const outlined = ref<boolean>(props.outlined);
+
+  watch(
+    () => props.outlined,
+    (newValue) => {
+        outlined.value = newValue;
+    }
+  );
+</script>
+
+
+<template>
+    <div class="card card-compact bg-base-100 max-w-80 min-w-64 shadow-xl rounded group h-full" :class="outlined ? 'border-4 border-primary' : ''">
+    <figure>
+        <img
+        :src="imgUrl"
+        :alt="alt"
+        class="object-cover w-full rounded"
+        v-if="imgUrl"
+        />
+    </figure>
+    <div class="card-body">
+        <h2 class="card-title text-lg text-left group-hover:text-primary cursor-pointer" v-if="title">{{ title }}</h2>
+        <slot name="details"></slot>
+        <p class="text-left" v-if="description">{{ description }}</p>
+        <div class="card-actions flex-col flex-nowrap">
+         <slot name="actions" />
+        </div>
+    </div>
+    </div>
+</template>

package/dist/runtime/components/data-display/carousel.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+interface Props {
+    snapTo?: "start" | "center" | "end";
+    vertical?: boolean;
+}
+
+interface Carousel {
+
+}
+
+interface CarouselItem {
+
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    snapTo: "start",
+    vertical: false
+  });
+
+</script>
+
+<template>
+    <div class="carousel">
+        <div class="carousel-item">
+            <img src="https://img.daisyui.com/images/stock/photo-1559703248-dcaaec9fab78.webp" alt="">
+        </div>
+        <div class="carousel-item">
+            <img src="https://img.daisyui.com/images/stock/photo-1559703248-dcaaec9fab78.webp" alt="">
+        </div>
+        <div class="carousel-item">
+            <img src="https://img.daisyui.com/images/stock/photo-1559703248-dcaaec9fab78.webp" alt="">
+        </div>
+    </div>
+</template>

package/dist/runtime/components/data-input/rating.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+  import { ref, watch, withDefaults } from 'vue';
+  
+  interface Props {
+    initialRating: number;
+    numberOfStars?: number;
+    halfStars?: boolean;
+    isInteractive?: boolean;
+    size?: "xs" | "sm" | "md" | "lg";
+  }
+  
+  const props = withDefaults(defineProps<Props>(), {
+    initialRating: 0,
+    numberOfStars: 5,
+    halfStars: true,
+    isInteractive: false,
+    size: "sm",
+  });
+  
+  const rating = ref<number>(props.initialRating);
+  
+  watch(
+    () => props.initialRating,
+    (newValue) => {
+      rating.value = newValue;
+    }
+  );
+  
+  const updateRating = (newRating: number) => {
+    rating.value = newRating;
+  };
+</script>
+
+<template>
+    <div class="rating" :class="`rating-${size}`">
+      <input
+        v-for="i in numberOfStars * (halfStars ? 2 : 1)"
+        :key="i"
+        type="radio"
+        :value="halfStars ? i * 0.5 : i"
+        :checked="rating === (halfStars ? i * 0.5 : i)"
+        @change="isInteractive ? updateRating(halfStars ? i * 0.5 : i) : null"
+        class="mask mask-star"
+        :class="{
+          'bg-yellow-400': rating >= (halfStars ? i * 0.5 : i),
+          'mask-half-1': halfStars && i % 2 !== 0,
+          'mask-half-2': halfStars && i % 2 === 0,
+          'cursor-pointer': isInteractive,
+          'cursor-default': !isInteractive
+        }"
+        :disabled="!isInteractive"
+      />
+    </div>
+  </template>
+  
+  
+  

package/dist/runtime/components/feedback/loader.vue

@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+import { ref, watch } from 'vue';
+
+interface Props {
+    loading?: boolean;
+}
+  
+  const props = withDefaults(defineProps<Props>(), {
+    loading: true,
+  });
+
+  const loading = ref<boolean>(props.loading);
+
+  watch(
+    () => props.loading,
+    (newValue) => {
+        loading.value = newValue;
+    }
+  );
+  
+</script>
+
+<template>
+  <span class="loading loading-spinner loading-md mx-auto " v-if="loading"></span>
+</template>

package/dist/runtime/components/layout/footer.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+interface Props {
+  items: Array<FooterNavigation>;
+}
+
+const props = defineProps<Props>();
+
+interface FooterNavigation {
+  title: string;
+  items: Array<FooterNavigationItem>;
+}
+
+interface FooterNavigationItem {
+  text: string;
+  link: string;
+  enabled: Boolean,
+}
+</script>
+
+<template>
+  <footer class="bg-base-200 text-base-content p-10">
+    <div class="container flex space-between flex-wrap flex-col lg:flex-row">
+      <div class="footer w-full lg:w-2/3 mb-16">
+        <nav v-for="footerCols in props.items">
+          <h6 class="footer-title">{{ footerCols.title }}</h6>
+          <a v-for="footerItem in footerCols.items" class="link link-hover" :href="footerItem.link">{{ footerItem.text
+            }}</a>
+        </nav>
+      </div>
+
+      <slot></slot>
+    </div>
+  </footer>
+</template>
+
+
+<style scoped>
+.footer>*{@apply w-max relative}footer .footer-title{@apply font-bold text-xl opacity-100 border-base-300 border-b-4 after:flex after:border-b-2 after:absolute after:w-full after:h-1 after:border-base-300}
+</style>

package/dist/runtime/components/layout/hero.vue

@@ -0,0 +1,15 @@
+<template>
+    <div class="hero min-h-80 container">
+        <div class="hero-content !px-0 text-center">
+            <div class="max-w-1/2">
+                <h1 class="text-4xl mt-9">
+                    <slot name="title">hero title</slot>
+                </h1>
+                <p>
+                    <slot name="description" class="py-9" />
+                </p>
+                <slot name="call-to-action-block" class="max-w-full"><button class="btn btn-primary">Call to action</button></slot>
+            </div>
+        </div>
+    </div>
+</template>

package/dist/runtime/components/navigation/navigation-bar.vue

@@ -0,0 +1,21 @@
+<script lang="ts" setup></script>
+
+<template>
+    <nav class="navbar border-b-4 border-primary px-5 py-5">
+        <div class="navbar-start flex-1">
+            <!-- <a href="#" class="w-fit"><img src="/images/logo.svg"></a> -->
+        </div>
+        
+        <div class="navbar-center flex-1 hidden md:block">
+            <div class="form-control">
+                <input type="text" placeholder="Search" class="input input-bordered w-24 md:w-auto" />
+            </div>
+        </div>
+
+        <div class="navbar-end flex-1">
+            <slot name="end"></slot>
+        </div>
+    </nav>
+</template>
+
+

package/dist/runtime/components/navigation/tab.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+interface Props {
+    items: Array<string>;
+    withControlls?: boolean;
+    rotateTabsAfter?: number;//in seconds
+}
+
+const props = defineProps<Props>();
+
+const currentTab = ref(props.items[0]);
+
+// for setting a propperty in the template when needed (dynamic data for example)
+const emit = defineEmits(['tab-changed']);
+
+function setCurrentTab(tab: string) {
+    currentTab.value = tab;
+    emit('tab-changed', tab);
+}
+
+function nextTab() {
+    const currentIndex = props.items.indexOf(currentTab.value);
+    const nextIndex = (currentIndex + 1) % props.items.length;
+    setCurrentTab(props.items[nextIndex]);
+}
+
+function previousTab() {
+    const currentIndex = props.items.indexOf(currentTab.value);
+    const previousIndex = (currentIndex - 1 + props.items.length) % props.items.length;
+    setCurrentTab(props.items[previousIndex]);
+}
+onMounted(() => {
+    if (props.rotateTabsAfter) {
+        setInterval(() => {
+            nextTab();
+        }, props.rotateTabsAfter * 1000);
+    }
+})
+
+</script>
+
+<template>
+    <div role="tablist" class="tabs tabs-bordered tabs-lg mt-28 relative w-full">
+        <!-- controls -->
+        <div v-if="withControlls" class="hidden md:flex gap-4 right-0 top-4 absolute">
+            <button @click="previousTab()" class="cursor-pointer">Previous</button>
+            <button @click="nextTab()" class="cursor-pointer text-primary">Next</button>
+        </div>
+        <!-- tab buttons -->
+        <template v-for="item in items">
+            <a type="button" role="tab" class="tab min-w-max"
+                :class="item === currentTab ? 'bg-primary text-base-100' : ''" @click="setCurrentTab(item)"
+                :aria-selected="currentTab == item"> {{ item }}</a>
+            <!-- tab content -->
+            <div role="tabpanel"
+                class="tab-content border-base-300 border-t-2 border-x-0 border-b-0 p-6 overflow-x-auto max-w-full">
+                <slot :name="`${item}-tab`"></slot>
+            </div>
+        </template>
+    </div>
+</template>

package/dist/runtime/composables/useLocalStorage.d.ts

@@ -0,0 +1 @@
+export declare const useLocalStorage: <T>(key: string, initialValue: T) => [T | null] extends [import("vue").Ref<any, any>] ? import("@vue/shared").IfAny<import("vue").Ref<any, any> & T, import("vue").Ref<import("vue").Ref<any, any> & T, import("vue").Ref<any, any> & T>, import("vue").Ref<any, any> & T> : import("vue").Ref<import("vue").UnwrapRef<T> | null, T | import("vue").UnwrapRef<T> | null>;

package/dist/runtime/composables/useLocalStorage.js

@@ -0,0 +1,16 @@
+import { onMounted, ref, watch } from "vue";
+export const useLocalStorage = (key, initialValue) => {
+  const storedValue = ref(null);
+  onMounted(() => {
+    if (typeof window !== "undefined") {
+      const stored = window.localStorage.getItem(key);
+      storedValue.value = stored ? JSON.parse(stored) : initialValue;
+    }
+  });
+  watch(storedValue, (newValue) => {
+    if (typeof window !== "undefined") {
+      window.localStorage.setItem(key, JSON.stringify(newValue));
+    }
+  });
+  return storedValue;
+};

package/dist/runtime/plugin.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/dist/runtime/plugin.js

@@ -0,0 +1,4 @@
+import { defineNuxtPlugin } from "#app";
+export default defineNuxtPlugin((_nuxtApp) => {
+  console.log("Design System injected by manolis-ui!");
+});

package/dist/runtime/server/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../../../.nuxt/tsconfig.server.json",
+}

package/dist/types.d.mts

@@ -0,0 +1 @@
+export { type ModuleOptions, type ThemeOptions, default } from './module.js'

package/dist/types.d.ts

@@ -0,0 +1 @@
+export { type ModuleOptions, type ThemeOptions, default } from './module'

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "manolis-ui",
+  "version": "1.0.6",
+  "description": "A modern design system made for vue based on daisy UI",
+  "repository": "manolis-trading/manolis-ui",
+  "license": "Apache-2.0",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/types.d.ts",
+      "import": "./dist/module.mjs",
+      "require": "./dist/module.cjs"
+    }
+  },
+  "main": "./dist/module.cjs",
+  "types": "./dist/types.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "prepack": "nuxt-module-build build",
+    "dev": "nuxi dev playground",
+    "dev:build": "nuxi build playground",
+    "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
+    "release": "npm run lint && npm run test && npm run prepack && changelogen --release && npm publish && git push --follow-tags",
+    "lint": "eslint .",
+    "test": "vitest run",
+    "test:watch": "vitest watch",
+    "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "dependencies": {
+    "@nuxt/kit": "^3.14.159",
+    "lucide-vue-next": "^0.460.0"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^3.2.2",
+    "@nuxt/devtools": "^1.6.0",
+    "@nuxt/eslint-config": "^0.7.1",
+    "@nuxt/module-builder": "^0.8.4",
+    "@nuxt/schema": "^3.14.159",
+    "@nuxt/test-utils": "^3.14.4",
+    "@nuxtjs/tailwindcss": "^6.12.2",
+    "@storybook/addon-essentials": "8.5.0-alpha.7",
+    "@storybook/addon-interactions": "8.5.0-alpha.7",
+    "@storybook/addon-links": "^8.4.4",
+    "@storybook/addon-postcss": "^2.0.0",
+    "@storybook/blocks": "8.5.0-alpha.7",
+    "@storybook/test": "8.5.0-alpha.7",
+    "@storybook/vue3": "8.5.0-alpha.7",
+    "@storybook/vue3-vite": "8.5.0-alpha.7",
+    "@types/node": "^22.9.1",
+    "@vitejs/plugin-vue": "^5.2.0",
+    "changelogen": "^0.5.7",
+    "daisyui": "^4.12.14",
+    "eslint": "^9.15.0",
+    "eslint-plugin-storybook": "^0.11.1",
+    "nuxt": "^3.14.159",
+    "storybook": "8.5.0-alpha.7",
+    "storybook-addon-vue-slots": "^0.9.29",
+    "typescript": "latest",
+    "vitest": "^2.1.5",
+    "vue": "^3.2",
+    "vue-tsc": "^2.1.10"
+  },
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e",
+  "eslintConfig": {
+    "extends": [
+      "plugin:storybook/recommended"
+    ]
+  }
+}