@frollo/frollo-web-ui 8.4.1 → 8.4.3

package/frollo-web-ui.esm.js

@@ -6913,7 +6913,7 @@ function uniqueId(prefix) {
 
 var script$o = defineComponent({
   name: 'FwInput',
-  emits: ['update:modelValue'],
+  emits: ['update:modelValue', 'focus', 'blur'],
   components: {
     InputField: Field
   },
@@ -7033,10 +7033,18 @@ var script$o = defineComponent({
         return ctx.emit('update:modelValue', state);
       }
     });
+    var onFocus = function onFocus(e) {
+      return ctx.emit('focus', e);
+    };
+    var onBlur = function onBlur(e) {
+      return ctx.emit('blur', e);
+    };
     return {
       uuid: uuid,
       inputBaseClass: inputBaseClass,
-      inputValue: inputValue
+      inputValue: inputValue,
+      onFocus: onFocus,
+      onBlur: onBlur
     };
   }
 });
@@ -7081,7 +7089,7 @@ function render$1d(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_InputField = resolveComponent("InputField");
   return openBlock(), createElementBlock("div", _hoisted_1$1j, [createVNode(_component_InputField, {
     modelValue: _ctx.inputValue,
-    "onUpdate:modelValue": _cache[0] || (_cache[0] = function ($event) {
+    "onUpdate:modelValue": _cache[2] || (_cache[2] = function ($event) {
       return _ctx.inputValue = $event;
     }),
     name: _ctx.name,
@@ -7116,7 +7124,13 @@ function render$1d(_ctx, _cache, $props, $setup, $data, $options) {
           'pr-20': !!_ctx.$slots.suffix
         }, (errorMessage || errors[0]) && meta.touched ? 'border-error text-error' : 'border-grey-40', _ctx.inputBaseClass, _ctx.rounded ? 'rounded-full' : 'rounded', {
           'text-center': _ctx.centerAlignInput
-        }]]
+        }]],
+        onFocus: _cache[0] || (_cache[0] = function () {
+          return _ctx.onFocus && _ctx.onFocus.apply(_ctx, arguments);
+        }),
+        onBlur: _cache[1] || (_cache[1] = function () {
+          return _ctx.onBlur && _ctx.onBlur.apply(_ctx, arguments);
+        })
       }), null, 16, _hoisted_8$a), _ctx.$slots.suffix ? (openBlock(), createElementBlock("div", _hoisted_9$9, [renderSlot(_ctx.$slots, "suffix", {
         "class": "h-full"
       })])) : createCommentVNode("", true)]), _ctx.enableErrors ? (openBlock(), createElementBlock("div", _hoisted_10$6, [createVNode(Transition, {
@@ -8645,6 +8659,20 @@ var script$h = defineComponent({
      */
     external: {
       type: Boolean
+    },
+    /**
+     * Whether the button is disabled or not
+     */
+    disabled: {
+      type: Boolean,
+      "default": false
+    },
+    /**
+     * Whether the button is preselected or not
+     */
+    active: {
+      type: Boolean,
+      "default": false
     }
   },
   setup: function setup(props, ctx) {
@@ -8689,6 +8717,11 @@ var script$h = defineComponent({
         text: 'text-grey-base hover:text-primary active:text-primary',
         background: 'bg-none hover:bg-white focus:bg-white active:bg-white',
         border: 'border-transparent focus-visible:ring-1 focus-visible:ring-primary'
+      },
+      disabled: {
+        text: 'text-white',
+        background: 'bg-grey-base bg-opacity-60',
+        border: ''
       }
     });
     var sizes = ref({
@@ -8779,13 +8812,14 @@ var _hoisted_1$v = {
 function render$o(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_FwLoadingSpinner = resolveComponent("FwLoadingSpinner");
   return openBlock(), createBlock(resolveDynamicComponent(_ctx.tagName), {
-    "class": normalizeClass(["fw-button", [_ctx.baseClass, _ctx.textColorClass, _ctx.bgColorClass, _ctx.sizeClass, _ctx.borderClass, _ctx.rounded && _ctx.variant !== 'link' ? 'rounded-full' : 'rounded', _ctx.variant === 'link' ? 'pl-0 pr-0 pt-0 pb-0 font-normal rounded-1' : 'font-semibold', _ctx.animation === 'fade' ? 'animation--fade' : 'animation--alternate', _ctx.loading === true ? 'fw-button--loading cursor-progress' : 'cursor-pointer']]),
+    "class": normalizeClass(["fw-button", [_ctx.baseClass, _ctx.textColorClass, _ctx.bgColorClass, _ctx.sizeClass, _ctx.borderClass, _ctx.rounded && _ctx.variant !== 'link' ? 'rounded-full' : 'rounded', _ctx.variant === 'link' ? 'pl-0 pr-0 pt-0 pb-0 font-normal rounded-1' : 'font-semibold', _ctx.animation === 'fade' ? 'animation--fade' : 'animation--alternate', _ctx.loading === true ? 'fw-button--loading cursor-progress' : 'cursor-pointer', _ctx.disabled && !_ctx.loading ? 'pointer-events-none text-grey-light' : '', _ctx.disabled && _ctx.active ? 'fw-button--disabled-active' : '']]),
     type: _ctx.tagName === 'button' ? _ctx.buttonType : null,
     to: _ctx.to ? _ctx.to : null,
     href: _ctx.href ? _ctx.href : null,
     tabindex: _ctx.to ? 0 : null,
-    disabled: _ctx.loading,
+    disabled: _ctx.loading || _ctx.disabled,
     target: !!_ctx.external ? '_blank' : null,
+    active: _ctx.active,
     onClick: _ctx.onClick,
     onFocusin: _ctx.onFocusin,
     onFocusout: _ctx.onFocusout,
@@ -8807,11 +8841,11 @@ function render$o(_ctx, _cache, $props, $setup, $data, $options) {
       })], 2)) : createCommentVNode("", true)])) : createCommentVNode("", true)];
     }),
     _: 3
-  }, 40, ["class", "type", "to", "href", "tabindex", "disabled", "target", "onClick", "onFocusin", "onFocusout", "onMouseover", "onMouseout"]);
+  }, 40, ["class", "type", "to", "href", "tabindex", "disabled", "target", "active", "onClick", "onFocusin", "onFocusout", "onMouseover", "onMouseout"]);
 }
 
-var css_248z$f = ".fw-button{line-height:normal}.fw-button--label-wrapper{-webkit-transition-duration:.2s;-moz-transition-duration:.2s;transition-duration:.2s;-webkit-transition-property:margin,padding;-moz-transition-property:margin,padding;transition-property:margin,padding;-webkit-transition-timing-function:ease-in-out;-moz-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out}.fw-button--primary{background:var(--colorButtonPrimary);color:var(--colorButtonPrimaryText)}.fw-button--primary.fw-button--loading,.fw-button--primary:hover{background:var(--colorButtonPrimaryFade);border-color:var(--colorButtonPrimaryFade)}.fw-button--secondary{background:var(--colorButtonSecondary);color:var(--colorButtonSecondaryText)}.fw-button--secondary.animation--alternate.fw-button--loading,.fw-button--secondary.animation--alternate:hover{background:var(--colorButtonSecondaryText);color:var(--colorButtonSecondary)}.fw-button--secondary.animation--fade.fw-button--loading,.fw-button--secondary.animation--fade:hover{-webkit-filter:brightness(135%);filter:brightness(135%)}.fw-button--tertiary{background:var(--colorButtonTertiary);color:var(--colorButtonTertiaryText)}.fw-button--tertiary.animation--alternate.fw-button--loading,.fw-button--tertiary.animation--alternate:hover{background:var(--colorButtonTertiaryText);color:var(--colorButtonTertiary)}.fw-button--tertiary.animation--fade.fw-button--loading,.fw-button--tertiary.animation--fade:hover{-webkit-filter:brightness(135%);filter:brightness(135%)}";
-var stylesheet$f = ".fw-button{line-height:normal}.fw-button--label-wrapper{-webkit-transition-duration:.2s;-moz-transition-duration:.2s;transition-duration:.2s;-webkit-transition-property:margin,padding;-moz-transition-property:margin,padding;transition-property:margin,padding;-webkit-transition-timing-function:ease-in-out;-moz-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out}.fw-button--primary{background:var(--colorButtonPrimary);color:var(--colorButtonPrimaryText)}.fw-button--primary.fw-button--loading,.fw-button--primary:hover{background:var(--colorButtonPrimaryFade);border-color:var(--colorButtonPrimaryFade)}.fw-button--secondary{background:var(--colorButtonSecondary);color:var(--colorButtonSecondaryText)}.fw-button--secondary.animation--alternate.fw-button--loading,.fw-button--secondary.animation--alternate:hover{background:var(--colorButtonSecondaryText);color:var(--colorButtonSecondary)}.fw-button--secondary.animation--fade.fw-button--loading,.fw-button--secondary.animation--fade:hover{-webkit-filter:brightness(135%);filter:brightness(135%)}.fw-button--tertiary{background:var(--colorButtonTertiary);color:var(--colorButtonTertiaryText)}.fw-button--tertiary.animation--alternate.fw-button--loading,.fw-button--tertiary.animation--alternate:hover{background:var(--colorButtonTertiaryText);color:var(--colorButtonTertiary)}.fw-button--tertiary.animation--fade.fw-button--loading,.fw-button--tertiary.animation--fade:hover{-webkit-filter:brightness(135%);filter:brightness(135%)}";
+var css_248z$f = ".fw-button{line-height:normal}.fw-button--label-wrapper{-webkit-transition-duration:.2s;-moz-transition-duration:.2s;transition-duration:.2s;-webkit-transition-property:margin,padding;-moz-transition-property:margin,padding;transition-property:margin,padding;-webkit-transition-timing-function:ease-in-out;-moz-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out}.fw-button--primary{background:var(--colorButtonPrimary);color:var(--colorButtonPrimaryText)}.fw-button--primary.fw-button--loading,.fw-button--primary:hover{background:var(--colorButtonPrimaryFade);border-color:var(--colorButtonPrimaryFade)}.fw-button--secondary{background:var(--colorButtonSecondary);color:var(--colorButtonSecondaryText)}.fw-button--secondary.animation--alternate.fw-button--loading,.fw-button--secondary.animation--alternate:hover{background:var(--colorButtonSecondaryText);color:var(--colorButtonSecondary)}.fw-button--secondary.animation--fade.fw-button--loading,.fw-button--secondary.animation--fade:hover{-webkit-filter:brightness(135%);filter:brightness(135%)}.fw-button--tertiary{background:var(--colorButtonTertiary);color:var(--colorButtonTertiaryText)}.fw-button--tertiary.animation--alternate.fw-button--loading,.fw-button--tertiary.animation--alternate:hover{background:var(--colorButtonTertiaryText);color:var(--colorButtonTertiary)}.fw-button--tertiary.animation--fade.fw-button--loading,.fw-button--tertiary.animation--fade:hover{-webkit-filter:brightness(135%);filter:brightness(135%)}.fw-button--disabled-active{background:var(--colorButtonDisabled)!important;color:rgb(from var(--colorButtonDisabledText) r g b/.6)!important}";
+var stylesheet$f = ".fw-button{line-height:normal}.fw-button--label-wrapper{-webkit-transition-duration:.2s;-moz-transition-duration:.2s;transition-duration:.2s;-webkit-transition-property:margin,padding;-moz-transition-property:margin,padding;transition-property:margin,padding;-webkit-transition-timing-function:ease-in-out;-moz-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out}.fw-button--primary{background:var(--colorButtonPrimary);color:var(--colorButtonPrimaryText)}.fw-button--primary.fw-button--loading,.fw-button--primary:hover{background:var(--colorButtonPrimaryFade);border-color:var(--colorButtonPrimaryFade)}.fw-button--secondary{background:var(--colorButtonSecondary);color:var(--colorButtonSecondaryText)}.fw-button--secondary.animation--alternate.fw-button--loading,.fw-button--secondary.animation--alternate:hover{background:var(--colorButtonSecondaryText);color:var(--colorButtonSecondary)}.fw-button--secondary.animation--fade.fw-button--loading,.fw-button--secondary.animation--fade:hover{-webkit-filter:brightness(135%);filter:brightness(135%)}.fw-button--tertiary{background:var(--colorButtonTertiary);color:var(--colorButtonTertiaryText)}.fw-button--tertiary.animation--alternate.fw-button--loading,.fw-button--tertiary.animation--alternate:hover{background:var(--colorButtonTertiaryText);color:var(--colorButtonTertiary)}.fw-button--tertiary.animation--fade.fw-button--loading,.fw-button--tertiary.animation--fade:hover{-webkit-filter:brightness(135%);filter:brightness(135%)}.fw-button--disabled-active{background:var(--colorButtonDisabled)!important;color:rgb(from var(--colorButtonDisabledText) r g b/.6)!important}";
 styleInject(css_248z$f);
 
 script$h.render = render$o;
@@ -34669,7 +34703,7 @@ function usePage() {
     "Page context missing. Please verify this component is nested within a valid context provider."
   );
 }
-const _hoisted_1$5$1 = { class: "vc-nav-header" };
+const _hoisted_1$5 = { class: "vc-nav-header" };
 const _hoisted_2$4$1 = ["disabled"];
 const _hoisted_3$3 = ["disabled"];
 const _hoisted_4$2$1 = { class: "vc-nav-items" };
@@ -34819,7 +34853,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
         ref_key: "navContainer",
         ref: navContainer
       }, [
-        createElementVNode("div", _hoisted_1$5$1, [
+        createElementVNode("div", _hoisted_1$5, [
           createElementVNode("button", {
             type: "button",
             class: "vc-nav-arrow is-left vc-focus",
@@ -36661,7 +36695,7 @@ __default__$3.setup = __setup__$3 ? function (props, ctx) {
   return __setup__$3(props, ctx);
 } : __injectCSSVars__$3;
 
-var _hoisted_1$5 = {
+var _hoisted_1$4 = {
   "class": "fw-date-picker w-full"
 };
 var _hoisted_2$4 = {
@@ -36710,7 +36744,7 @@ var _hoisted_18 = {
 function render$5(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_CalendarDaySvg = resolveComponent("CalendarDaySvg");
   var _component_DatePicker = resolveComponent("DatePicker");
-  return openBlock(), createElementBlock("div", _hoisted_1$5, [createVNode(_component_DatePicker, {
+  return openBlock(), createElementBlock("div", _hoisted_1$4, [createVNode(_component_DatePicker, {
     modelValue: _ctx.dateModel,
     "onUpdate:modelValue": _cache[0] || (_cache[0] = function ($event) {
       return _ctx.dateModel = $event;
@@ -37045,7 +37079,7 @@ __default__$2.setup = __setup__$2 ? function (props, ctx) {
 var _withScopeId$2 = function _withScopeId(n) {
   return pushScopeId("data-v-6df01fae"), n = n(), popScopeId(), n;
 };
-var _hoisted_1$4 = ["id", "aria-hidden"];
+var _hoisted_1$3 = ["id", "aria-hidden"];
 var _hoisted_2$3 = {
   key: 0,
   "data-popper-arrow": "",
@@ -37085,7 +37119,7 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
     })
   }, [renderSlot(_ctx.$slots, "content", {}, function () {
     return [createTextVNode(toDisplayString(_ctx.title), 1)];
-  }), _ctx.showArrow ? (openBlock(), createElementBlock("span", _hoisted_2$3)) : createCommentVNode("", true)], 10, _hoisted_1$4)], 2);
+  }), _ctx.showArrow ? (openBlock(), createElementBlock("span", _hoisted_2$3)) : createCommentVNode("", true)], 10, _hoisted_1$3)], 2);
 }
 
 var css_248z$3 = ".fw-popover__content[data-v-6df01fae]{opacity:0;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;transition:all .3s ease;white-space:normal;z-index:9999}.fw-popover__content--center[data-v-6df01fae]{text-align:center}.fw-popover__content--left[data-v-6df01fae]{text-align:left}.fw-popover__content--right[data-v-6df01fae]{text-align:right}.fw-popover--visible .fw-popover__content[data-v-6df01fae]{opacity:1;pointer-events:all}.fw-popover__arrow[data-v-6df01fae]:after{height:var(--bf2f5546);left:0;top:0;-webkit-transform:translate(-50%,-50%) rotate(45deg);-moz-transform:translate(-50%,-50%) rotate(45deg);-ms-transform:translate(-50%,-50%) rotate(45deg);transform:translate(-50%,-50%) rotate(45deg);width:var(--bf2f5546)}.fw-popover__content[data-popper-placement^=top][data-v-6df01fae]{margin-bottom:var(--bf2f5546)!important}.fw-popover__content[data-popper-placement^=right][data-v-6df01fae]{margin-left:var(--bf2f5546)!important}.fw-popover__content[data-popper-placement^=bottom][data-v-6df01fae]{margin-top:var(--bf2f5546)!important}.fw-popover__content[data-popper-placement^=left][data-v-6df01fae]{margin-right:var(--bf2f5546)!important}.fw-popover__content[data-popper-placement^=top] .fw-popover__arrow[data-v-6df01fae]{bottom:0}.fw-popover__content[data-popper-placement^=right] .fw-popover__arrow[data-v-6df01fae]{left:0}.fw-popover__content[data-popper-placement^=bottom] .fw-popover__arrow[data-v-6df01fae]{top:0}.fw-popover__content[data-popper-placement^=left] .fw-popover__arrow[data-v-6df01fae]{right:0}.fw-popover__content[data-popper-placement^=top] .fw-popover__arrow[data-v-6df01fae]{bottom:-1px}.fw-popover__content[data-popper-placement^=top] .fw-popover__arrow[data-v-6df01fae]:after{border-left:none;border-top:none}.fw-popover__content[data-popper-placement^=right] .fw-popover__arrow[data-v-6df01fae]{left:-1px}.fw-popover__content[data-popper-placement^=right] .fw-popover__arrow[data-v-6df01fae]:after{border-right:none;border-top:none}.fw-popover__content[data-popper-placement^=bottom] .fw-popover__arrow[data-v-6df01fae]{top:-1px}.fw-popover__content[data-popper-placement^=bottom] .fw-popover__arrow[data-v-6df01fae]:after{border-bottom:none;border-right:none}.fw-popover__content[data-popper-placement^=left] .fw-popover__arrow[data-v-6df01fae]{right:-1px}.fw-popover__content[data-popper-placement^=left] .fw-popover__arrow[data-v-6df01fae]:after{border-bottom:none;border-left:none}";
@@ -37121,6 +37155,10 @@ var script$1 = defineComponent({
       validator: function validator(value) {
         return ['sm', 'md', 'lg', 'xl', '2xl'].includes(value);
       }
+    },
+    disabled: {
+      type: Boolean,
+      "default": false
     }
   },
   setup: function setup(props, ctx) {
@@ -37142,27 +37180,28 @@ var script$1 = defineComponent({
   }
 });
 
-var _hoisted_1$3 = {
-  "class": "fw-period-selector w-fit bg-grey-light bg-opacity-10 border-grey-light border-2 border-opacity-40 gap-x-1"
-};
 function render$3(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_FwButton = resolveComponent("FwButton");
-  return openBlock(), createElementBlock("div", _hoisted_1$3, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.periodOptions, function (period) {
+  return openBlock(), createElementBlock("div", {
+    "class": normalizeClass(["fw-period-selector w-fit bg-grey-light bg-opacity-10 border-grey-light border-2 border-opacity-40 gap-x-1", _ctx.disabled === true ? 'hover:none cursor:none pointer-events-none' : ''])
+  }, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.periodOptions, function (period) {
     return openBlock(), createBlock(_component_FwButton, {
       key: period,
-      variant: _ctx.selectedPeriod === period ? 'tertiary' : 'transparent',
+      variant: _ctx.selectedPeriod === period ? _ctx.disabled ? 'disabled' : 'tertiary' : 'transparent',
       "class": "hover:!border-button-primary-bg -m-[2px] flex-1",
       size: _ctx.size,
       onClick: function onClick($event) {
         return _ctx.selectedPeriod = period;
-      }
+      },
+      disabled: _ctx.disabled,
+      active: _ctx.disabled && _ctx.selectedPeriod === period
     }, {
       "default": withCtx(function () {
         return [createTextVNode(toDisplayString(_ctx.generateButtonLabel(period)), 1)];
       }),
       _: 2
-    }, 1032, ["variant", "size", "onClick"]);
-  }), 128))]);
+    }, 1032, ["variant", "size", "onClick", "disabled", "active"]);
+  }), 128))], 2);
 }
 
 var css_248z$2 = ".fw-period-selector{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-moz-box-orient:horizontal;-moz-box-direction:normal;border-radius:9999px;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row}";

package/index.d.ts

@@ -131,7 +131,9 @@ declare const _default$o: vue.DefineComponent<{
     uuid: string;
     inputBaseClass: vue.Ref<string>;
     inputValue: vue.WritableComputedRef<string>;
-}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    onFocus: (e: FocusEvent) => void;
+    onBlur: (e: FocusEvent) => void;
+}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("update:modelValue" | "focus" | "blur")[], "update:modelValue" | "focus" | "blur", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
     /**
      * The input v-model
      */
@@ -235,6 +237,8 @@ declare const _default$o: vue.DefineComponent<{
     };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onFocus?: ((...args: any[]) => any) | undefined;
+    onBlur?: ((...args: any[]) => any) | undefined;
 }, {
     modelValue: string;
     type: FwInputType;
@@ -604,7 +608,7 @@ declare const _default$l: vue.DefineComponent<{
     isBordered: boolean;
 }, {}>;
 
-type ButtonVariantName = 'primary' | 'secondary' | 'tertiary' | 'error' | 'success' | 'link' | 'text' | 'transparent';
+type ButtonVariantName = 'primary' | 'secondary' | 'tertiary' | 'error' | 'success' | 'link' | 'text' | 'transparent' | 'disabled';
 declare interface ButtonDefinition {
     text: string;
     background: string;
@@ -630,6 +634,8 @@ declare interface FwButtonProps {
     rounded?: boolean;
     loading?: boolean;
     external?: boolean;
+    disabled?: boolean;
+    active?: boolean;
 }
 
 declare const _default$k: vue.DefineComponent<{
@@ -704,6 +710,20 @@ declare const _default$k: vue.DefineComponent<{
     external: {
         type: BooleanConstructor;
     };
+    /**
+     * Whether the button is disabled or not
+     */
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Whether the button is preselected or not
+     */
+    active: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, {
     baseClass: vue.Ref<string>;
     textColorClass: vue.ComputedRef<string>;
@@ -804,6 +824,20 @@ declare const _default$k: vue.DefineComponent<{
     external: {
         type: BooleanConstructor;
     };
+    /**
+     * Whether the button is disabled or not
+     */
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Whether the button is preselected or not
+     */
+    active: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & {
     onClick?: ((...args: any[]) => any) | undefined;
     onMouseover?: ((...args: any[]) => any) | undefined;
@@ -812,12 +846,14 @@ declare const _default$k: vue.DefineComponent<{
     onFocusout?: ((...args: any[]) => any) | undefined;
 }, {
     size: ButtonSize;
+    disabled: boolean;
     variant: ButtonVariantName;
     buttonType: ButtonTypeAttribute;
     animation: ButtonAnimation;
     rounded: boolean;
     loading: boolean;
     external: boolean;
+    active: boolean;
 }, {}>;
 
 declare interface NavMenuItem {
@@ -2889,6 +2925,10 @@ declare const _default$2: vue.DefineComponent<{
         default: string;
         validator: (value: string) => boolean;
     };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, {
     generateButtonLabel: (month: number) => string;
     selectedPeriod: vue.WritableComputedRef<number | undefined>;
@@ -2910,10 +2950,15 @@ declare const _default$2: vue.DefineComponent<{
         default: string;
         validator: (value: string) => boolean;
     };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     size: ButtonSize;
+    disabled: boolean;
 }, {}>;
 
 declare const _default$1: vue.DefineComponent<{

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frollo/frollo-web-ui",
-  "version": "8.4.1",
+  "version": "8.4.3",
   "description": "Frollo's UI library for components, utilities and configs",
   "exports": {
     "./icons": "./icons/index.ts",

package/styles/tailwind.scss

@@ -24,6 +24,9 @@
   --colorButtonTertiary: #ffffff;
   --colorButtonTertiaryText: #6923ff;
 
+  --colorButtonDisabled: #ffffff;
+  --colorButtonDisabledText: #4B4B4B;
+
   --fontFamily: 'Montserrat';
 }
 /* 

package/tailwind.config.js

@@ -22,6 +22,10 @@ module.exports = {
         tertiary: {
           bg: 'var(--colorButtonTertiary)',
           text: 'var(--colorButtonTertiaryText)'
+        },
+        disabled: {
+          bg: 'var(--colorButtonDisabled)',
+          text: 'var(--colorButtonDisabledText)'
         }
       },
       grey: {

package/types/components/fw-button/fw-button.vue.d.ts

@@ -72,6 +72,20 @@ declare const _default: import("vue").DefineComponent<{
     external: {
         type: BooleanConstructor;
     };
+    /**
+     * Whether the button is disabled or not
+     */
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Whether the button is preselected or not
+     */
+    active: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, {
     baseClass: import("vue").Ref<string>;
     textColorClass: import("vue").ComputedRef<string>;
@@ -172,6 +186,20 @@ declare const _default: import("vue").DefineComponent<{
     external: {
         type: BooleanConstructor;
     };
+    /**
+     * Whether the button is disabled or not
+     */
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Whether the button is preselected or not
+     */
+    active: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & {
     onClick?: ((...args: any[]) => any) | undefined;
     onMouseover?: ((...args: any[]) => any) | undefined;
@@ -180,11 +208,13 @@ declare const _default: import("vue").DefineComponent<{
     onFocusout?: ((...args: any[]) => any) | undefined;
 }, {
     size: ButtonSize;
+    disabled: boolean;
     variant: ButtonVariantName;
     buttonType: ButtonTypeAttribute;
     animation: ButtonAnimation;
     rounded: boolean;
     loading: boolean;
     external: boolean;
+    active: boolean;
 }, {}>;
 export default _default;

package/types/components/fw-button/index.types.d.ts

@@ -1,4 +1,4 @@
-export type ButtonVariantName = 'primary' | 'secondary' | 'tertiary' | 'error' | 'success' | 'link' | 'text' | 'transparent';
+export type ButtonVariantName = 'primary' | 'secondary' | 'tertiary' | 'error' | 'success' | 'link' | 'text' | 'transparent' | 'disabled';
 export declare interface ButtonDefinition {
     text: string;
     background: string;
@@ -24,4 +24,6 @@ export declare interface FwButtonProps {
     rounded?: boolean;
     loading?: boolean;
     external?: boolean;
+    disabled?: boolean;
+    active?: boolean;
 }

package/types/components/fw-input/fw-input.vue.d.ts

@@ -106,7 +106,9 @@ declare const _default: import("vue").DefineComponent<{
     uuid: string;
     inputBaseClass: import("vue").Ref<string>;
     inputValue: import("vue").WritableComputedRef<string>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    onFocus: (e: FocusEvent) => void;
+    onBlur: (e: FocusEvent) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "focus" | "blur")[], "update:modelValue" | "focus" | "blur", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     /**
      * The input v-model
      */
@@ -210,6 +212,8 @@ declare const _default: import("vue").DefineComponent<{
     };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onFocus?: ((...args: any[]) => any) | undefined;
+    onBlur?: ((...args: any[]) => any) | undefined;
 }, {
     modelValue: string;
     type: FwInputType;

package/types/components/fw-period-selector/fw-period-selector.vue.d.ts

@@ -18,6 +18,10 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
         validator: (value: string) => boolean;
     };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, {
     generateButtonLabel: (month: number) => string;
     selectedPeriod: import("vue").WritableComputedRef<number | undefined>;
@@ -39,9 +43,14 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
         validator: (value: string) => boolean;
     };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     size: ButtonSize;
+    disabled: boolean;
 }, {}>;
 export default _default;