@robuust-digital/vue-components 1.0.0-rc.1 → 1.0.1-rc.1

package/README.md

@@ -16,17 +16,21 @@ A modern and customizable component library built with **Vue 3** and **Tailwind
 
 ## Installation
 
-1. **Install the component library via yarn:**
+1. **Install the component library via yarn or npm:**
 
 ```bash
-yarn add @robuust/vue-components
+yarn add @robuust-digital/vue-components
+```
+
+```bash
+npm i @robuust-digital/vue-components
 ```
 
 2. **Add the component library plugin to your `tailwind.config.js`:**
 
 ```javascript
 // tailwind.config.js
-import components from '@robuust/vue-components/src/tailwind';
+import components from '@robuust-digital/vue-components/tailwind';
 
 export default {
   theme: {
@@ -56,7 +60,7 @@ export default {
 
 ```javascript
 export default defineNuxtConfig({
-  modules: ['@robuust/vue-components/nuxt'],
+  modules: ['@robuust-digital/vue-components/nuxt'],
 });
 ```
 
@@ -72,7 +76,7 @@ Import and use components in your Vue 3 project with ease. Here’s an example o
 </template>
 
 <script setup>
-import { ButtonBase } from '@robuust/vue-components';
+import { ButtonBase } from '@robuust-digital/vue-components';
 </script>
 ```
 
@@ -156,7 +160,7 @@ module.exports = {
 </template>
 
 <script setup>
-import { ButtonBase } from '@robuust/vue-components';
+import { ButtonBase } from '@robuust-digital/vue-components';
 </script>
 ```
 
@@ -190,4 +194,4 @@ yarn build
 MIT © Robuust Digital
 
 
-*With `@robuust/vue-components`, bring consistency, flexibility, and a polished look to all your Vue 3 applications.*
+*With `@robuust-digital/vue-components`, bring consistency, flexibility, and a polished look to all your Vue 3 applications.*

package/dist/nuxt-module.js

@@ -1,5 +1,5 @@
 import { defineNuxtModule, addComponent } from '@nuxt/kit';
-import * as components from '@robuust/vue-components';
+import * as components from '@robuust-digital/vue-components';
 import pkg from '../package.json';
 
 /**
@@ -17,7 +17,7 @@ export default defineNuxtModule({
     Object.keys(components).forEach((name) => {
       addComponent({
         name,
-        filePath: '@robuust/vue-components',
+        filePath: '@robuust-digital/vue-components',
         export: name,
         global: true,
       });

package/dist/tailwind/components/button.js

@@ -29,13 +29,20 @@ export default (theme) => {
       gap: theme('gap.2'),
       borderRadius: theme('borderRadius.xl'),
       fontWeight: theme('fontWeight.medium'),
-      fontSize: theme('fontSize.base'),
-      whiteSpace: theme('whitespace.normal'),
+      fontSize: theme('fontSize.base.0'),
+      whiteSpace: 'nowrap',
       transitionProperty: theme('transitionProperty.colors'),
       transitionDuration: theme('transitionDuration.300'),
       transitionTimingFunction: theme('transitionTimingFunction.DEFAULT'),
       ...theme('components.button'),
 
+      // Disabled state
+      '&:disabled': {
+        '@apply pointer-events-none': {},
+        opacity: theme('opacity.50'),
+        ...theme('components.button.disabled'),
+      },
+
       // Icon styling
       '.button-icon': {
         '@apply block': {},
@@ -43,6 +50,16 @@ export default (theme) => {
         height: theme('height.5'),
         flexShrink: theme('flexShrink.0'),
         ...theme('components.button.icon'),
+
+        '&.button-icon-loading': {
+          '@apply animate-spin': {},
+          ...theme('components.button.icon.loading'),
+        },
+      },
+
+      // Reverse icon
+      '&.button-reverse': {
+        '@apply flex-row-reverse': {},
       },
 
       // Color variants
@@ -56,6 +73,14 @@ export default (theme) => {
           color: theme('colors.black'),
           ...theme('components.button.primary.hover'),
         },
+
+        '&:disabled': {
+          ...theme('components.button.primary.disabled'),
+        },
+
+        '.button-icon': {
+          ...theme('components.button.primary.icon'),
+        },
       },
       '&.button-primary-soft': {
         backgroundColor: theme('colors.lime.200'),
@@ -67,6 +92,14 @@ export default (theme) => {
           color: theme('colors.700'),
           ...theme('components.button.primary-soft.hover'),
         },
+
+        '&:disabled': {
+          ...theme('components.button.primary-soft.disabled'),
+        },
+
+        '.button-icon': {
+          ...theme('components.button.primary-soft.icon'),
+        },
       },
       '&.button-secondary': {
         backgroundColor: theme('colors.indigo.400'),
@@ -78,6 +111,14 @@ export default (theme) => {
           color: theme('colors.white'),
           ...theme('components.button.secondary.hover'),
         },
+
+        '&:disabled': {
+          ...theme('components.button.secondary.disabled'),
+        },
+
+        '.button-icon': {
+          ...theme('components.button.secondary.icon'),
+        },
       },
       '&.button-secondary-soft': {
         backgroundColor: theme('colors.indigo.200'),
@@ -89,6 +130,14 @@ export default (theme) => {
           color: theme('colors.700'),
           ...theme('components.button.secondary-soft.hover'),
         },
+
+        '&:disabled': {
+          ...theme('components.button.secondary-soft.disabled'),
+        },
+
+        '.button-icon': {
+          ...theme('components.button.secondary-soft.icon'),
+        },
       },
       '&.button-tertiary': {
         backgroundColor: theme('colors.orange.400'),
@@ -100,6 +149,14 @@ export default (theme) => {
           color: theme('colors.black'),
           ...theme('components.button.tertiary.hover'),
         },
+
+        '&:disabled': {
+          ...theme('components.button.tertiary.disabled'),
+        },
+
+        '.button-icon': {
+          ...theme('components.button.tertiary.icon'),
+        },
       },
       '&.button-tertiary-soft': {
         backgroundColor: theme('colors.orange.200'),
@@ -111,6 +168,14 @@ export default (theme) => {
           color: theme('colors.700'),
           ...theme('components.button.tertiary-soft.hover'),
         },
+
+        '&:disabled': {
+          ...theme('components.button.tertiary-soft.disabled'),
+        },
+
+        '.button-icon': {
+          ...theme('components.button.tertiary-soft.icon'),
+        },
       },
       '&.button-light': {
         backgroundColor: theme('colors.white'),
@@ -123,6 +188,14 @@ export default (theme) => {
           color: theme('colors.stone.900'),
           ...theme('components.button.light.hover'),
         },
+
+        '&:disabled': {
+          ...theme('components.button.light.disabled'),
+        },
+
+        '.button-icon': {
+          ...theme('components.button.light.icon'),
+        },
       },
       '&.button-dark': {
         backgroundColor: theme('colors.black'),
@@ -134,6 +207,14 @@ export default (theme) => {
           color: theme('colors.white'),
           ...theme('components.button.dark.hover'),
         },
+
+        '&:disabled': {
+          ...theme('components.button.dark.disabled'),
+        },
+
+        '.button-icon': {
+          ...theme('components.button.dark.icon'),
+        },
       },
       '&.button-danger': {
         backgroundColor: theme('colors.red.600'),
@@ -145,6 +226,14 @@ export default (theme) => {
           color: theme('colors.white'),
           ...theme('components.button.danger.hover'),
         },
+
+        '&:disabled': {
+          ...theme('components.button.danger.disabled'),
+        },
+
+        '.button-icon': {
+          ...theme('components.button.danger.icon'),
+        },
       },
       '&.button-danger-soft': {
         backgroundColor: theme('colors.red.200'),
@@ -156,6 +245,14 @@ export default (theme) => {
           color: theme('colors.700'),
           ...theme('components.button.danger-soft.hover'),
         },
+
+        '&:disabled': {
+          ...theme('components.button.danger-soft.disabled'),
+        },
+
+        '.button-icon': {
+          ...theme('components.button.danger-soft.icon'),
+        },
       },
       '&.button-warning': {
         backgroundColor: theme('colors.yellow.400'),
@@ -167,6 +264,14 @@ export default (theme) => {
           color: theme('colors.black'),
           ...theme('components.button.warning.hover'),
         },
+
+        '&:disabled': {
+          ...theme('components.button.warning.disabled'),
+        },
+
+        '.button-icon': {
+          ...theme('components.button.warning.icon'),
+        },
       },
       '&.button-warning-soft': {
         backgroundColor: theme('colors.yellow.200'),
@@ -178,6 +283,14 @@ export default (theme) => {
           color: theme('colors.700'),
           ...theme('components.button.warning-soft.hover'),
         },
+
+        '&:disabled': {
+          ...theme('components.button.warning-soft.disabled'),
+        },
+
+        '.button-icon': {
+          ...theme('components.button.warning-soft.icon'),
+        },
       },
       '&.button-success': {
         backgroundColor: theme('colors.green.500'),
@@ -189,6 +302,14 @@ export default (theme) => {
           color: theme('colors.white'),
           ...theme('components.button.success.hover'),
         },
+
+        '&:disabled': {
+          ...theme('components.button.success.disabled'),
+        },
+
+        '.button-icon': {
+          ...theme('components.button.success.icon'),
+        },
       },
       '&.button-success-soft': {
         backgroundColor: theme('colors.green.200'),
@@ -200,6 +321,14 @@ export default (theme) => {
           color: theme('colors.700'),
           ...theme('components.button.success-soft.hover'),
         },
+
+        '&:disabled': {
+          ...theme('components.button.success-soft.disabled'),
+        },
+
+        '.button-icon': {
+          ...theme('components.button.success-soft.icon'),
+        },
       },
       '&.button-clear': {
         '@apply bg-transparent px-0': {},
@@ -210,6 +339,14 @@ export default (theme) => {
           color: theme('colors.stone.800'),
           ...theme('components.button.clear.hover'),
         },
+
+        '&:disabled': {
+          ...theme('components.button.clear.disabled'),
+        },
+
+        '.button-icon': {
+          ...theme('components.button.clear.icon'),
+        },
       },
       ...customColorStyles,
 
@@ -222,7 +359,7 @@ export default (theme) => {
         gap: theme('gap[1.5]'),
         borderRadius: theme('borderRadius.md'),
         fontWeight: theme('fontWeight.medium'),
-        fontSize: theme('fontSize.xs'),
+        fontSize: theme('fontSize.xs.0'),
         ...theme('components.button.xs'),
 
         '.button-icon': {
@@ -239,7 +376,7 @@ export default (theme) => {
         gap: theme('gap.2'),
         borderRadius: theme('borderRadius.lg'),
         fontWeight: theme('fontWeight.medium'),
-        fontSize: theme('fontSize.sm'),
+        fontSize: theme('fontSize.sm.0'),
         ...theme('components.button.sm'),
 
         '.button-icon': {
@@ -256,7 +393,7 @@ export default (theme) => {
         gap: theme('gap.4'),
         borderRadius: theme('borderRadius.2xl'),
         fontWeight: theme('fontWeight.medium'),
-        fontSize: theme('fontSize.lg'),
+        fontSize: theme('fontSize.lg.0'),
         ...theme('components.button.lg'),
 
         '.button-icon': {

package/dist/vue-components.es.js

@@ -1,11 +1,11 @@
-import { openBlock as n, createElementBlock as s, createElementVNode as r, createBlock as o, resolveDynamicComponent as l, normalizeClass as c, withCtx as u, createTextVNode as d, toDisplayString as m, renderSlot as i, createCommentVNode as a, unref as y } from "vue";
-const f = {
+import { openBlock as n, createElementBlock as c, createElementVNode as r, createBlock as o, resolveDynamicComponent as l, normalizeClass as s, withCtx as u, createTextVNode as d, toDisplayString as y, renderSlot as i, createCommentVNode as a, unref as m } from "vue";
+const g = {
   xmlns: "http://www.w3.org/2000/svg",
   fill: "none",
   viewBox: "0 0 24 24"
 };
-function g(t, e) {
-  return n(), s("svg", f, e[0] || (e[0] = [
+function f(t, e) {
+  return n(), c("svg", g, e[0] || (e[0] = [
     r("circle", {
       cx: "12",
       cy: "12",
@@ -20,7 +20,7 @@ function g(t, e) {
     }, null, -1)
   ]));
 }
-const b = { render: g }, w = {
+const b = { render: f }, k = {
   __name: "ButtonBase",
   props: {
     as: {
@@ -53,11 +53,11 @@ const b = { render: g }, w = {
     }
   },
   setup(t) {
-    return (e, p) => (n(), o(l(t.as), {
-      class: c(["button", `button-${t.color}`, `button-${t.size}`, { "flex-row-reverse": t.iconLeft }])
+    return (e, B) => (n(), o(l(t.as), {
+      class: s(["button", `button-${t.color}`, `button-${t.size}`, { "button-reverse": t.iconLeft }])
     }, {
       default: u(() => [
-        d(m(t.label) + " ", 1),
+        d(y(t.label) + " ", 1),
         i(e.$slots, "icon", {}, () => [
           t.icon && !t.spinning ? (n(), o(l(t.icon), {
             key: 0,
@@ -65,9 +65,9 @@ const b = { render: g }, w = {
           })) : a("", !0)
         ]),
         i(e.$slots, "spinner", {}, () => [
-          t.spinning ? (n(), o(y(b), {
+          t.spinning ? (n(), o(m(b), {
             key: 0,
-            class: "button-icon animate-spin"
+            class: "button-icon button-icon-loading"
           })) : a("", !0)
         ])
       ]),
@@ -76,5 +76,5 @@ const b = { render: g }, w = {
   }
 };
 export {
-  w as ButtonBase
+  k as ButtonBase
 };

package/dist/vue-components.umd.js

@@ -1 +1 @@
-(function(n,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(n=typeof globalThis<"u"?globalThis:n||self,e(n.VueComponents={},n.Vue))})(this,function(n,e){"use strict";const i={xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24"};function r(t,o){return e.openBlock(),e.createElementBlock("svg",i,o[0]||(o[0]=[e.createElementVNode("circle",{cx:"12",cy:"12",r:"10",stroke:"currentColor","stroke-width":"4",style:{opacity:".25"}},null,-1),e.createElementVNode("path",{fill:"currentColor",d:"M4 12a8 8 0 0 1 8-8V0C5.373 0 0 5.373 0 12zm2 5.291A7.96 7.96 0 0 1 4 12H0c0 3.042 1.135 5.824 3 7.938z"},null,-1)]))}const l={render:r},c={__name:"ButtonBase",props:{as:{type:[String,Object,Function],default:"button"},label:{type:String,default:""},icon:{type:[Object,Function],default:null},iconLeft:{type:Boolean},size:{type:String,default:"base",validator:t=>["xs","sm","base","lg"].includes(t)},spinning:{type:Boolean},color:{type:String,default:"primary",validator:t=>/^(primary|secondary|tertiary|light|dark|danger|warning|success)(-soft)?$/.test(t)||t.startsWith("custom-")||"clear"}},setup(t){return(o,s)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.as),{class:e.normalizeClass(["button",`button-${t.color}`,`button-${t.size}`,{"flex-row-reverse":t.iconLeft}])},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.label)+" ",1),e.renderSlot(o.$slots,"icon",{},()=>[t.icon&&!t.spinning?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.icon),{key:0,class:"button-icon"})):e.createCommentVNode("",!0)]),e.renderSlot(o.$slots,"spinner",{},()=>[t.spinning?(e.openBlock(),e.createBlock(e.unref(l),{key:0,class:"button-icon animate-spin"})):e.createCommentVNode("",!0)])]),_:3},8,["class"]))}};n.ButtonBase=c,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})});
+(function(n,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(n=typeof globalThis<"u"?globalThis:n||self,e(n.VueComponents={},n.Vue))})(this,function(n,e){"use strict";const i={xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24"};function r(t,o){return e.openBlock(),e.createElementBlock("svg",i,o[0]||(o[0]=[e.createElementVNode("circle",{cx:"12",cy:"12",r:"10",stroke:"currentColor","stroke-width":"4",style:{opacity:".25"}},null,-1),e.createElementVNode("path",{fill:"currentColor",d:"M4 12a8 8 0 0 1 8-8V0C5.373 0 0 5.373 0 12zm2 5.291A7.96 7.96 0 0 1 4 12H0c0 3.042 1.135 5.824 3 7.938z"},null,-1)]))}const c={render:r},l={__name:"ButtonBase",props:{as:{type:[String,Object,Function],default:"button"},label:{type:String,default:""},icon:{type:[Object,Function],default:null},iconLeft:{type:Boolean},size:{type:String,default:"base",validator:t=>["xs","sm","base","lg"].includes(t)},spinning:{type:Boolean},color:{type:String,default:"primary",validator:t=>/^(primary|secondary|tertiary|light|dark|danger|warning|success)(-soft)?$/.test(t)||t.startsWith("custom-")||"clear"}},setup(t){return(o,s)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.as),{class:e.normalizeClass(["button",`button-${t.color}`,`button-${t.size}`,{"button-reverse":t.iconLeft}])},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.label)+" ",1),e.renderSlot(o.$slots,"icon",{},()=>[t.icon&&!t.spinning?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.icon),{key:0,class:"button-icon"})):e.createCommentVNode("",!0)]),e.renderSlot(o.$slots,"spinner",{},()=>[t.spinning?(e.openBlock(),e.createBlock(e.unref(c),{key:0,class:"button-icon button-icon-loading"})):e.createCommentVNode("",!0)])]),_:3},8,["class"]))}};n.ButtonBase=l,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@robuust-digital/vue-components",
-  "version": "1.0.0-rc.1",
+  "version": "1.0.1-rc.1",
   "type": "module",
   "description": "A modern and customizable component library built with **Vue 3** and **Tailwind CSS**, designed to deliver a flexible, cohesive UI experience across all projects. Quickly integrate reusable components with ease, and customize them to suit your unique branding needs.",
   "directories": {
@@ -38,8 +38,6 @@
     "preview": "vite preview",
     "test:unit": "vitest run",
     "lint": "eslint . --fix",
-    "npm:login": "npm login",
-    "npm:publish": "npm publish --access public",
     "docs:dev": "vitepress dev docs",
     "docs:build": "vitepress build docs",
     "docs:preview": "vitepress preview docs"