@frollo/frollo-web-ui 0.0.3 → 0.0.6

package/cjs/index.js

@@ -1259,7 +1259,7 @@ $$1({ target: 'Object', stat: true }, {
   entries: function entries(O) {
     return $entries(O);
   }
-});var script$1 = vue.defineComponent({
+});var script$2 = vue.defineComponent({
   name: 'FwCard',
   props: {
     /**
@@ -1279,24 +1279,24 @@ $$1({ target: 'Object', stat: true }, {
 });var _hoisted_1$1 = {
   "class": "fw-card shadow rounded-lg"
 };
-var _hoisted_2 = {
+var _hoisted_2$1 = {
   key: 0,
   "class": "fw-card--header text-lg px-8 py-4 font-bold bg-grey-lightest rounded-t-lg border-opacity-0"
 };
-var _hoisted_3 = {
+var _hoisted_3$1 = {
   key: 0,
   "class": "fw-card--prefix-title text-primary"
 };
-var _hoisted_4 = {
+var _hoisted_4$1 = {
   key: 1
 };
-var _hoisted_5 = {
+var _hoisted_5$1 = {
   key: 1,
   "class": "p-8"
 };
-function render$1(_ctx, _cache, $props, $setup, $data, $options) {
-  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1, [_ctx.title || _ctx.prefixTitle ? (vue.openBlock(), vue.createElementBlock("h4", _hoisted_2, [_ctx.prefixTitle ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3, vue.toDisplayString(_ctx.prefixTitle), 1)) : vue.createCommentVNode("", true), _ctx.title ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4, vue.toDisplayString(_ctx.title), 1)) : vue.createCommentVNode("", true)])) : vue.createCommentVNode("", true), _ctx.$slots["default"] ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, [vue.renderSlot(_ctx.$slots, "default")])) : vue.createCommentVNode("", true)]);
-}script$1.render = render$1;var es_array_includes = {};var objectDefineProperties = {};var DESCRIPTORS = descriptors;
+function render$2(_ctx, _cache, $props, $setup, $data, $options) {
+  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1, [_ctx.title || _ctx.prefixTitle ? (vue.openBlock(), vue.createElementBlock("h4", _hoisted_2$1, [_ctx.prefixTitle ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$1, vue.toDisplayString(_ctx.prefixTitle), 1)) : vue.createCommentVNode("", true), _ctx.title ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4$1, vue.toDisplayString(_ctx.title), 1)) : vue.createCommentVNode("", true)])) : vue.createCommentVNode("", true), _ctx.$slots["default"] ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$1, [vue.renderSlot(_ctx.$slots, "default")])) : vue.createCommentVNode("", true)]);
+}script$2.render = render$2;var es_array_includes = {};var objectDefineProperties = {};var DESCRIPTORS = descriptors;
 var V8_PROTOTYPE_DEFINE_BUG = v8PrototypeDefineBug;
 var definePropertyModule$1 = objectDefineProperty;
 var anObject$1 = anObject$4;
@@ -1432,7 +1432,7 @@ $({ target: 'Array', proto: true }, {
 });
 
 // https://tc39.es/ecma262/#sec-array.prototype-@@unscopables
-addToUnscopables('includes');var script = vue.defineComponent({
+addToUnscopables('includes');var script$1 = vue.defineComponent({
   name: 'FwButton',
   emits: ['click', 'mouseover', 'mouseout', 'focusin', 'focusout'],
   props: {
@@ -1467,7 +1467,7 @@ addToUnscopables('includes');var script = vue.defineComponent({
       type: String,
       "default": 'primary',
       validator: function validator(value) {
-        return ['primary', 'secondary', 'tertiary', 'error', 'success'].includes(value);
+        return ['primary', 'secondary', 'tertiary', 'error', 'success', 'text'].includes(value);
       }
     }
   },
@@ -1479,9 +1479,9 @@ addToUnscopables('includes');var script = vue.defineComponent({
         border: 'border-primary focus:ring-primary'
       },
       secondary: {
-        text: 'text-secondary hover:text-tertiary active:text-tertiary',
-        background: 'bg-tertiary hover:bg-secondary active:bg-secondary',
-        border: 'border-secondary focus:ring-secondary'
+        text: 'text-primary hover:text-tertiary active:text-tertiary',
+        background: 'bg-tertiary hover:bg-primary active:bg-primary',
+        border: 'border-primary focus:ring-primary'
       },
       tertiary: {
         text: 'text-tertiary hover:text-secondary active:text-secondary',
@@ -1497,14 +1497,19 @@ addToUnscopables('includes');var script = vue.defineComponent({
         text: 'text-white hover:text-error active:text-error',
         background: 'bg-error hover:bg-white active:bg-white',
         border: 'border-error focus:ring-error'
+      },
+      text: {
+        text: 'text-body font-medium hover:text-white active:text-white',
+        background: 'bg-white hover:bg-body active:bg-body',
+        border: 'border-transparent focus:ring-body'
       }
     });
     var sizes = vue.ref({
-      sm: 'px-16 py-0.5 text-sm leading-tight',
-      md: 'px-24 py-1 text-md leading-tight',
-      lg: 'px-32 py-1.5 text-lg leading-tight',
-      xl: 'px-40 py-2 text-xl leading-none',
-      '2xl': 'px-48 py-3 text-2xl leading-normal'
+      sm: 'px-2 py-0.5 text-sm',
+      md: 'px-6 py-1 text-md',
+      lg: 'px-10 py-2 text-lg',
+      xl: 'px-12 py-3 text-xl',
+      '2xl': 'px-16 py-4 text-2xl'
     });
     var textColorClass = vue.computed(function () {
       return buttonClasses.value[props.variant].text;
@@ -1558,6 +1563,11 @@ addToUnscopables('includes');var script = vue.defineComponent({
       return ctx.emit('focusout', e);
     };
 
+    var tagName = vue.computed(function () {
+      if (props.to) return 'router-link';
+      if (props.href) return 'a';
+      return 'button';
+    });
     return {
       textColorClass: textColorClass,
       bgColorClass: bgColorClass,
@@ -1567,32 +1577,219 @@ addToUnscopables('includes');var script = vue.defineComponent({
       onMouseover: onMouseover,
       onMouseout: onMouseout,
       onFocusin: onFocusin,
-      onFocusout: onFocusout
+      onFocusout: onFocusout,
+      tagName: tagName
     };
   }
-});var _hoisted_1 = ["to", "href"];
-function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return vue.openBlock(), vue.createElementBlock("button", {
-    "class": vue.normalizeClass(["fw-button rounded-full border-2 focus:outline-none ring-offset-2 focus:ring", [_ctx.textColorClass, _ctx.bgColorClass, _ctx.sizeClass, _ctx.borderClass]]),
+});function render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.tagName), {
+    "class": vue.normalizeClass(["fw-button font-bold cursor-pointer whitespace-nowrap rounded-full border-2 focus:outline-none ring-offset-2 focus:ring", [_ctx.textColorClass, _ctx.bgColorClass, _ctx.sizeClass, _ctx.borderClass]]),
+    type: _ctx.tagName === 'button' ? _ctx.tagName : null,
     to: _ctx.to,
     href: _ctx.href,
-    onClick: _cache[0] || (_cache[0] = function () {
-      return _ctx.onClick && _ctx.onClick.apply(_ctx, arguments);
+    onClick: _ctx.onClick,
+    onFocusin: _ctx.onFocusin,
+    onFocusout: _ctx.onFocusout,
+    onMouseover: _ctx.onMouseover,
+    onMouseout: _ctx.onMouseout
+  }, {
+    "default": vue.withCtx(function () {
+      return [vue.renderSlot(_ctx.$slots, "default")];
     }),
-    onFocusin: _cache[1] || (_cache[1] = function () {
-      return _ctx.onFocusin && _ctx.onFocusin.apply(_ctx, arguments);
+    _: 3
+  }, 8, ["class", "type", "to", "href", "onClick", "onFocusin", "onFocusout", "onMouseover", "onMouseout"]);
+}function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}var css_248z$1 = ".fw-button{-webkit-transition:all .25s ease-in;-o-transition:all .25s ease-in;transition:all .25s ease-in}";
+var stylesheet$1 = ".fw-button{-webkit-transition:all .25s ease-in;-o-transition:all .25s ease-in;transition:all .25s ease-in}";
+styleInject(css_248z$1);script$1.render = render$1;var script = vue.defineComponent({
+  name: 'FwNavigationMenu',
+  emits: ['action'],
+  components: {
+    FwButton: script$1
+  },
+  props: {
+    /**
+     * An array of menu items
+     * `{ to?: string | object; href?: string; label: string; }`
+     */
+    menuItems: {
+      type: Array
+    },
+
+    /**
+     * The label for the action button.
+     * Also emits the `action` event.
+     */
+    actionLabel: {
+      type: String
+    }
+  },
+  setup: function setup(_props, ctx) {
+    var isMobileMenuOpen = vue.ref(false);
+
+    var toggleMobileMenu = function toggleMobileMenu() {
+      return isMobileMenuOpen.value = !isMobileMenuOpen.value;
+    };
+
+    var actionClicked = function actionClicked() {
+      return ctx.emit('action');
+    };
+
+    return {
+      isMobileMenuOpen: isMobileMenuOpen,
+      toggleMobileMenu: toggleMobileMenu,
+      actionClicked: actionClicked
+    };
+  }
+});var _hoisted_1 = {
+  "class": "fw-nav-menu relative z-50 h-20 shadow-md"
+};
+var _hoisted_2 = {
+  "class": "px-6 flex-1 h-full flex bg-white items-stretch justify-between"
+};
+var _hoisted_3 = {
+  key: 0,
+  "class": "flex-shrink-0 flex items-center"
+};
+var _hoisted_4 = {
+  key: 1,
+  "class": "container hidden sm:flex items-center justify-start sm:ml-6"
+};
+var _hoisted_5 = {
+  "class": "flex space-x-2"
+};
+var _hoisted_6 = {
+  key: 2,
+  "class": "hidden sm:flex items-center justify-start sm:ml-6"
+};
+var _hoisted_7 = {
+  "class": "flex items-center sm:hidden"
+};
+
+var _hoisted_8 = /*#__PURE__*/vue.createElementVNode("span", {
+  "class": "sr-only"
+}, "Open main menu", -1);
+
+var _hoisted_9 = {
+  "class": "block h-6 w-6",
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  stroke: "currentColor",
+  "aria-hidden": "true"
+};
+var _hoisted_10 = ["d"];
+var _hoisted_11 = {
+  key: 0,
+  "class": "fw-nav-menu--mobile min-h-screen top-0 left-0 pt-20 absolute w-full flex flex-col justify-between px-2 bg-white shadow-md pb-3 space-y-1"
+};
+var _hoisted_12 = {
+  "class": "w-full flex flex-col"
+};
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _ctx$menuItems;
+
+  var _component_FwButton = vue.resolveComponent("FwButton");
+
+  return vue.openBlock(), vue.createElementBlock("nav", _hoisted_1, [vue.createElementVNode("div", _hoisted_2, [_ctx.$slots.logo ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [vue.renderSlot(_ctx.$slots, "logo")])) : vue.createCommentVNode("", true), ((_ctx$menuItems = _ctx.menuItems) === null || _ctx$menuItems === void 0 ? void 0 : _ctx$menuItems.length) > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [vue.createElementVNode("div", _hoisted_5, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.menuItems, function (item, i) {
+    return vue.openBlock(), vue.createBlock(_component_FwButton, {
+      key: i,
+      variant: "text",
+      href: item.href,
+      to: item.to,
+      size: "md",
+      "aria-current": "page"
+    }, {
+      "default": vue.withCtx(function () {
+        return [vue.createTextVNode(vue.toDisplayString(item.label), 1)];
+      }),
+      _: 2
+    }, 1032, ["href", "to"]);
+  }), 128))])])) : vue.createCommentVNode("", true), _ctx.actionLabel ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6, [vue.createVNode(_component_FwButton, {
+    onClick: _ctx.actionClicked,
+    size: "md",
+    "aria-label": _ctx.actionLabel
+  }, {
+    "default": vue.withCtx(function () {
+      return [vue.createTextVNode(vue.toDisplayString(_ctx.actionLabel), 1)];
     }),
-    onFocusout: _cache[2] || (_cache[2] = function () {
-      return _ctx.onFocusout && _ctx.onFocusout.apply(_ctx, arguments);
+    _: 1
+  }, 8, ["onClick", "aria-label"])])) : vue.createCommentVNode("", true), vue.createElementVNode("div", _hoisted_7, [vue.createVNode(_component_FwButton, {
+    variant: "text",
+    size: "sm",
+    onClick: _ctx.toggleMobileMenu
+  }, {
+    "default": vue.withCtx(function () {
+      return [_hoisted_8, (vue.openBlock(), vue.createElementBlock("svg", _hoisted_9, [vue.createElementVNode("path", {
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round",
+        "stroke-width": "2",
+        d: _ctx.isMobileMenuOpen ? 'M6 18L18 6M6 6l12 12' : 'M4 6h16M4 12h16M4 18h16'
+      }, null, 8, _hoisted_10)]))];
     }),
-    onMouseover: _cache[3] || (_cache[3] = function () {
-      return _ctx.onMouseover && _ctx.onMouseover.apply(_ctx, arguments);
+    _: 1
+  }, 8, ["onClick"])])]), vue.createVNode(vue.Transition, {
+    name: "slideInLeft"
+  }, {
+    "default": vue.withCtx(function () {
+      var _ctx$menuItems2;
+
+      return [((_ctx$menuItems2 = _ctx.menuItems) === null || _ctx$menuItems2 === void 0 ? void 0 : _ctx$menuItems2.length) > 0 && _ctx.isMobileMenuOpen ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_11, [vue.createElementVNode("div", _hoisted_12, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.menuItems, function (item, i) {
+        return vue.openBlock(), vue.createBlock(_component_FwButton, {
+          key: i,
+          "class": "w-full rounded-md px-2",
+          variant: "text",
+          href: item.href,
+          to: item.to,
+          size: "md",
+          "aria-current": "page"
+        }, {
+          "default": vue.withCtx(function () {
+            return [vue.createTextVNode(vue.toDisplayString(item.label), 1)];
+          }),
+          _: 2
+        }, 1032, ["href", "to"]);
+      }), 128))]), _ctx.actionLabel ? (vue.openBlock(), vue.createBlock(_component_FwButton, {
+        key: 0,
+        "class": "w-full rounded-md px-2",
+        onClick: _ctx.actionClicked,
+        size: "md"
+      }, {
+        "default": vue.withCtx(function () {
+          return [vue.createTextVNode(vue.toDisplayString(_ctx.actionLabel), 1)];
+        }),
+        _: 1
+      }, 8, ["onClick"])) : vue.createCommentVNode("", true)])) : vue.createCommentVNode("", true)];
     }),
-    onMouseout: _cache[4] || (_cache[4] = function () {
-      return _ctx.onMouseout && _ctx.onMouseout.apply(_ctx, arguments);
-    })
-  }, [vue.renderSlot(_ctx.$slots, "default")], 42, _hoisted_1);
-}script.render = render;var components$1=/*#__PURE__*/Object.freeze({__proto__:null,FwCard:script$1,FwButton:script});var install = function install(app) {
+    _: 1
+  })]);
+}var css_248z = ".fw-nav-menu--mobile{z-index:-1}.fw-nav-menu--mobile,.slideInLeft-enter-active{-webkit-transition:left .35s ease-in;-o-transition:left .35s ease-in;transition:left .35s ease-in}.slideInLeft-enter-active{-webkit-animation:slideInLeft .35s;animation:slideInLeft .35s}.slideInLeft-leave-active{animation:slideInLeft .35s reverse;-webkit-transition:left .35s ease-in-out;-o-transition:left .35s ease-in-out;transition:left .35s ease-in-out}@-webkit-keyframes slideInLeft{0%{left:100%}to{left:0}}@keyframes slideInLeft{0%{left:100%}to{left:0}}";
+var stylesheet = ".fw-nav-menu--mobile{z-index:-1}.fw-nav-menu--mobile,.slideInLeft-enter-active{-webkit-transition:left .35s ease-in;-o-transition:left .35s ease-in;transition:left .35s ease-in}.slideInLeft-enter-active{-webkit-animation:slideInLeft .35s;animation:slideInLeft .35s}.slideInLeft-leave-active{animation:slideInLeft .35s reverse;-webkit-transition:left .35s ease-in-out;-o-transition:left .35s ease-in-out;transition:left .35s ease-in-out}@-webkit-keyframes slideInLeft{0%{left:100%}to{left:0}}@keyframes slideInLeft{0%{left:100%}to{left:0}}";
+styleInject(css_248z);script.render = render;var components$1=/*#__PURE__*/Object.freeze({__proto__:null,FwCard:script$2,FwButton:script$1,FwNavigationMenu:script});var install = function install(app) {
   Object.entries(components$1).forEach(function (_ref) {
     var _ref2 = _slicedToArray(_ref, 2),
         componentName = _ref2[0],
@@ -1600,7 +1797,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 
     app.component(componentName, component);
   });
-};var components=/*#__PURE__*/Object.freeze({__proto__:null,'default':install,FwCard:script$1,FwButton:script});Object.entries(components).forEach(function (_ref) {
+};var components=/*#__PURE__*/Object.freeze({__proto__:null,'default':install,FwCard:script$2,FwButton:script$1,FwNavigationMenu:script});Object.entries(components).forEach(function (_ref) {
   var _ref2 = _slicedToArray(_ref, 2),
       componentName = _ref2[0],
       component = _ref2[1];

package/esm/{index-280a9116.js → fw-button-deb8cb87.js}

@@ -1,4 +1,4 @@
-import { defineComponent, ref, computed, openBlock, createElementBlock, normalizeClass, renderSlot } from 'vue';
+import { defineComponent, ref, computed, openBlock, createBlock, resolveDynamicComponent, normalizeClass, withCtx, renderSlot } from 'vue';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -1183,7 +1183,7 @@ var script = defineComponent({
       type: String,
       "default": 'primary',
       validator: function validator(value) {
-        return ['primary', 'secondary', 'tertiary', 'error', 'success'].includes(value);
+        return ['primary', 'secondary', 'tertiary', 'error', 'success', 'text'].includes(value);
       }
     }
   },
@@ -1195,9 +1195,9 @@ var script = defineComponent({
         border: 'border-primary focus:ring-primary'
       },
       secondary: {
-        text: 'text-secondary hover:text-tertiary active:text-tertiary',
-        background: 'bg-tertiary hover:bg-secondary active:bg-secondary',
-        border: 'border-secondary focus:ring-secondary'
+        text: 'text-primary hover:text-tertiary active:text-tertiary',
+        background: 'bg-tertiary hover:bg-primary active:bg-primary',
+        border: 'border-primary focus:ring-primary'
       },
       tertiary: {
         text: 'text-tertiary hover:text-secondary active:text-secondary',
@@ -1213,14 +1213,19 @@ var script = defineComponent({
         text: 'text-white hover:text-error active:text-error',
         background: 'bg-error hover:bg-white active:bg-white',
         border: 'border-error focus:ring-error'
+      },
+      text: {
+        text: 'text-body font-medium hover:text-white active:text-white',
+        background: 'bg-white hover:bg-body active:bg-body',
+        border: 'border-transparent focus:ring-body'
       }
     });
     var sizes = ref({
-      sm: 'px-16 py-0.5 text-sm leading-tight',
-      md: 'px-24 py-1 text-md leading-tight',
-      lg: 'px-32 py-1.5 text-lg leading-tight',
-      xl: 'px-40 py-2 text-xl leading-none',
-      '2xl': 'px-48 py-3 text-2xl leading-normal'
+      sm: 'px-2 py-0.5 text-sm',
+      md: 'px-6 py-1 text-md',
+      lg: 'px-10 py-2 text-lg',
+      xl: 'px-12 py-3 text-xl',
+      '2xl': 'px-16 py-4 text-2xl'
     });
     var textColorClass = computed(function () {
       return buttonClasses.value[props.variant].text;
@@ -1274,6 +1279,11 @@ var script = defineComponent({
       return ctx.emit('focusout', e);
     };
 
+    var tagName = computed(function () {
+      if (props.to) return 'router-link';
+      if (props.href) return 'a';
+      return 'button';
+    });
     return {
       textColorClass: textColorClass,
       bgColorClass: bgColorClass,
@@ -1283,35 +1293,62 @@ var script = defineComponent({
       onMouseover: onMouseover,
       onMouseout: onMouseout,
       onFocusin: onFocusin,
-      onFocusout: onFocusout
+      onFocusout: onFocusout,
+      tagName: tagName
     };
   }
 });
 
-var _hoisted_1 = ["to", "href"];
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("button", {
-    "class": normalizeClass(["fw-button rounded-full border-2 focus:outline-none ring-offset-2 focus:ring", [_ctx.textColorClass, _ctx.bgColorClass, _ctx.sizeClass, _ctx.borderClass]]),
+  return openBlock(), createBlock(resolveDynamicComponent(_ctx.tagName), {
+    "class": normalizeClass(["fw-button font-bold cursor-pointer whitespace-nowrap rounded-full border-2 focus:outline-none ring-offset-2 focus:ring", [_ctx.textColorClass, _ctx.bgColorClass, _ctx.sizeClass, _ctx.borderClass]]),
+    type: _ctx.tagName === 'button' ? _ctx.tagName : null,
     to: _ctx.to,
     href: _ctx.href,
-    onClick: _cache[0] || (_cache[0] = function () {
-      return _ctx.onClick && _ctx.onClick.apply(_ctx, arguments);
-    }),
-    onFocusin: _cache[1] || (_cache[1] = function () {
-      return _ctx.onFocusin && _ctx.onFocusin.apply(_ctx, arguments);
-    }),
-    onFocusout: _cache[2] || (_cache[2] = function () {
-      return _ctx.onFocusout && _ctx.onFocusout.apply(_ctx, arguments);
+    onClick: _ctx.onClick,
+    onFocusin: _ctx.onFocusin,
+    onFocusout: _ctx.onFocusout,
+    onMouseover: _ctx.onMouseover,
+    onMouseout: _ctx.onMouseout
+  }, {
+    "default": withCtx(function () {
+      return [renderSlot(_ctx.$slots, "default")];
     }),
-    onMouseover: _cache[3] || (_cache[3] = function () {
-      return _ctx.onMouseover && _ctx.onMouseover.apply(_ctx, arguments);
-    }),
-    onMouseout: _cache[4] || (_cache[4] = function () {
-      return _ctx.onMouseout && _ctx.onMouseout.apply(_ctx, arguments);
-    })
-  }, [renderSlot(_ctx.$slots, "default")], 42, _hoisted_1);
+    _: 3
+  }, 8, ["class", "type", "to", "href", "onClick", "onFocusin", "onFocusout", "onMouseover", "onMouseout"]);
 }
 
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z = ".fw-button{-webkit-transition:all .25s ease-in;-o-transition:all .25s ease-in;transition:all .25s ease-in}";
+var stylesheet = ".fw-button{-webkit-transition:all .25s ease-in;-o-transition:all .25s ease-in;transition:all .25s ease-in}";
+styleInject(css_248z);
+
 script.render = render;
 
-export { _export as _, aCallable$1 as a, functionBindNative as b, classofRaw as c, fails$7 as d, getBuiltIn$4 as e, functionUncurryThis as f, global$l as g, inspectSource$2 as h, isCallable$9 as i, isObject$5 as j, indexedObject as k, lengthOfArrayLike$1 as l, documentCreateElement$1 as m, createNonEnumerableProperty$3 as n, descriptors as o, objectKeys$1 as p, toIndexedObject$4 as q, redefine$2 as r, objectPropertyIsEnumerable as s, toObject$1 as t, script as u, wellKnownSymbol$2 as w };
+export { _export as _, aCallable$1 as a, functionBindNative as b, classofRaw as c, fails$7 as d, getBuiltIn$4 as e, functionUncurryThis as f, global$l as g, inspectSource$2 as h, isCallable$9 as i, isObject$5 as j, indexedObject as k, lengthOfArrayLike$1 as l, documentCreateElement$1 as m, createNonEnumerableProperty$3 as n, descriptors as o, objectKeys$1 as p, toIndexedObject$4 as q, redefine$2 as r, objectPropertyIsEnumerable as s, toObject$1 as t, script as u, styleInject as v, wellKnownSymbol$2 as w };

package/esm/fw-button.js

@@ -1,2 +1,2 @@
-export { u as FwButton } from './index-280a9116.js';
+export { u as FwButton } from './fw-button-deb8cb87.js';
 import 'vue';

package/esm/fw-navigation-menu.js

@@ -0,0 +1,176 @@
+import { defineComponent, ref, createElementVNode, resolveComponent, openBlock, createElementBlock, renderSlot, createCommentVNode, Fragment, renderList, createBlock, withCtx, createTextVNode, toDisplayString, createVNode, Transition } from 'vue';
+import { u as script$1, v as styleInject } from './fw-button-deb8cb87.js';
+
+var script = defineComponent({
+  name: 'FwNavigationMenu',
+  emits: ['action'],
+  components: {
+    FwButton: script$1
+  },
+  props: {
+    /**
+     * An array of menu items
+     * `{ to?: string | object; href?: string; label: string; }`
+     */
+    menuItems: {
+      type: Array
+    },
+
+    /**
+     * The label for the action button.
+     * Also emits the `action` event.
+     */
+    actionLabel: {
+      type: String
+    }
+  },
+  setup: function setup(_props, ctx) {
+    var isMobileMenuOpen = ref(false);
+
+    var toggleMobileMenu = function toggleMobileMenu() {
+      return isMobileMenuOpen.value = !isMobileMenuOpen.value;
+    };
+
+    var actionClicked = function actionClicked() {
+      return ctx.emit('action');
+    };
+
+    return {
+      isMobileMenuOpen: isMobileMenuOpen,
+      toggleMobileMenu: toggleMobileMenu,
+      actionClicked: actionClicked
+    };
+  }
+});
+
+var _hoisted_1 = {
+  "class": "fw-nav-menu relative z-50 h-20 shadow-md"
+};
+var _hoisted_2 = {
+  "class": "px-6 flex-1 h-full flex bg-white items-stretch justify-between"
+};
+var _hoisted_3 = {
+  key: 0,
+  "class": "flex-shrink-0 flex items-center"
+};
+var _hoisted_4 = {
+  key: 1,
+  "class": "container hidden sm:flex items-center justify-start sm:ml-6"
+};
+var _hoisted_5 = {
+  "class": "flex space-x-2"
+};
+var _hoisted_6 = {
+  key: 2,
+  "class": "hidden sm:flex items-center justify-start sm:ml-6"
+};
+var _hoisted_7 = {
+  "class": "flex items-center sm:hidden"
+};
+
+var _hoisted_8 = /*#__PURE__*/createElementVNode("span", {
+  "class": "sr-only"
+}, "Open main menu", -1);
+
+var _hoisted_9 = {
+  "class": "block h-6 w-6",
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  stroke: "currentColor",
+  "aria-hidden": "true"
+};
+var _hoisted_10 = ["d"];
+var _hoisted_11 = {
+  key: 0,
+  "class": "fw-nav-menu--mobile min-h-screen top-0 left-0 pt-20 absolute w-full flex flex-col justify-between px-2 bg-white shadow-md pb-3 space-y-1"
+};
+var _hoisted_12 = {
+  "class": "w-full flex flex-col"
+};
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _ctx$menuItems;
+
+  var _component_FwButton = resolveComponent("FwButton");
+
+  return openBlock(), createElementBlock("nav", _hoisted_1, [createElementVNode("div", _hoisted_2, [_ctx.$slots.logo ? (openBlock(), createElementBlock("div", _hoisted_3, [renderSlot(_ctx.$slots, "logo")])) : createCommentVNode("", true), ((_ctx$menuItems = _ctx.menuItems) === null || _ctx$menuItems === void 0 ? void 0 : _ctx$menuItems.length) > 0 ? (openBlock(), createElementBlock("div", _hoisted_4, [createElementVNode("div", _hoisted_5, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.menuItems, function (item, i) {
+    return openBlock(), createBlock(_component_FwButton, {
+      key: i,
+      variant: "text",
+      href: item.href,
+      to: item.to,
+      size: "md",
+      "aria-current": "page"
+    }, {
+      "default": withCtx(function () {
+        return [createTextVNode(toDisplayString(item.label), 1)];
+      }),
+      _: 2
+    }, 1032, ["href", "to"]);
+  }), 128))])])) : createCommentVNode("", true), _ctx.actionLabel ? (openBlock(), createElementBlock("div", _hoisted_6, [createVNode(_component_FwButton, {
+    onClick: _ctx.actionClicked,
+    size: "md",
+    "aria-label": _ctx.actionLabel
+  }, {
+    "default": withCtx(function () {
+      return [createTextVNode(toDisplayString(_ctx.actionLabel), 1)];
+    }),
+    _: 1
+  }, 8, ["onClick", "aria-label"])])) : createCommentVNode("", true), createElementVNode("div", _hoisted_7, [createVNode(_component_FwButton, {
+    variant: "text",
+    size: "sm",
+    onClick: _ctx.toggleMobileMenu
+  }, {
+    "default": withCtx(function () {
+      return [_hoisted_8, (openBlock(), createElementBlock("svg", _hoisted_9, [createElementVNode("path", {
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round",
+        "stroke-width": "2",
+        d: _ctx.isMobileMenuOpen ? 'M6 18L18 6M6 6l12 12' : 'M4 6h16M4 12h16M4 18h16'
+      }, null, 8, _hoisted_10)]))];
+    }),
+    _: 1
+  }, 8, ["onClick"])])]), createVNode(Transition, {
+    name: "slideInLeft"
+  }, {
+    "default": withCtx(function () {
+      var _ctx$menuItems2;
+
+      return [((_ctx$menuItems2 = _ctx.menuItems) === null || _ctx$menuItems2 === void 0 ? void 0 : _ctx$menuItems2.length) > 0 && _ctx.isMobileMenuOpen ? (openBlock(), createElementBlock("div", _hoisted_11, [createElementVNode("div", _hoisted_12, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.menuItems, function (item, i) {
+        return openBlock(), createBlock(_component_FwButton, {
+          key: i,
+          "class": "w-full rounded-md px-2",
+          variant: "text",
+          href: item.href,
+          to: item.to,
+          size: "md",
+          "aria-current": "page"
+        }, {
+          "default": withCtx(function () {
+            return [createTextVNode(toDisplayString(item.label), 1)];
+          }),
+          _: 2
+        }, 1032, ["href", "to"]);
+      }), 128))]), _ctx.actionLabel ? (openBlock(), createBlock(_component_FwButton, {
+        key: 0,
+        "class": "w-full rounded-md px-2",
+        onClick: _ctx.actionClicked,
+        size: "md"
+      }, {
+        "default": withCtx(function () {
+          return [createTextVNode(toDisplayString(_ctx.actionLabel), 1)];
+        }),
+        _: 1
+      }, 8, ["onClick"])) : createCommentVNode("", true)])) : createCommentVNode("", true)];
+    }),
+    _: 1
+  })]);
+}
+
+var css_248z = ".fw-nav-menu--mobile{z-index:-1}.fw-nav-menu--mobile,.slideInLeft-enter-active{-webkit-transition:left .35s ease-in;-o-transition:left .35s ease-in;transition:left .35s ease-in}.slideInLeft-enter-active{-webkit-animation:slideInLeft .35s;animation:slideInLeft .35s}.slideInLeft-leave-active{animation:slideInLeft .35s reverse;-webkit-transition:left .35s ease-in-out;-o-transition:left .35s ease-in-out;transition:left .35s ease-in-out}@-webkit-keyframes slideInLeft{0%{left:100%}to{left:0}}@keyframes slideInLeft{0%{left:100%}to{left:0}}";
+var stylesheet = ".fw-nav-menu--mobile{z-index:-1}.fw-nav-menu--mobile,.slideInLeft-enter-active{-webkit-transition:left .35s ease-in;-o-transition:left .35s ease-in;transition:left .35s ease-in}.slideInLeft-enter-active{-webkit-animation:slideInLeft .35s;animation:slideInLeft .35s}.slideInLeft-leave-active{animation:slideInLeft .35s reverse;-webkit-transition:left .35s ease-in-out;-o-transition:left .35s ease-in-out;transition:left .35s ease-in-out}@-webkit-keyframes slideInLeft{0%{left:100%}to{left:0}}@keyframes slideInLeft{0%{left:100%}to{left:0}}";
+styleInject(css_248z);
+
+script.render = render;
+
+export { script as FwNavigationMenu };

package/esm/index.js

@@ -1,7 +1,10 @@
-import { f as functionUncurryThis, a as aCallable$1, b as functionBindNative, c as classofRaw$1, w as wellKnownSymbol$3, g as global$3, i as isCallable$2, d as fails$2, e as getBuiltIn$1, h as inspectSource$1, j as isObject$1, k as indexedObject, t as toObject$1, l as lengthOfArrayLike$1, _ as _export, r as redefine$1, m as documentCreateElement$1, n as createNonEnumerableProperty$1, o as descriptors, p as objectKeys$1, q as toIndexedObject$1, s as objectPropertyIsEnumerable, u as script$1 } from './index-280a9116.js';
-export { u as FwButton } from './index-280a9116.js';
+import { f as functionUncurryThis, a as aCallable$1, b as functionBindNative, c as classofRaw$1, w as wellKnownSymbol$3, g as global$3, i as isCallable$2, d as fails$2, e as getBuiltIn$1, h as inspectSource$1, j as isObject$1, k as indexedObject, t as toObject$1, l as lengthOfArrayLike$1, _ as _export, r as redefine$1, m as documentCreateElement$1, n as createNonEnumerableProperty$1, o as descriptors, p as objectKeys$1, q as toIndexedObject$1, s as objectPropertyIsEnumerable, u as script$1 } from './fw-button-deb8cb87.js';
+export { u as FwButton } from './fw-button-deb8cb87.js';
 import { FwCard as script } from './fw-card.js';
 export { FwCard } from './fw-card.js';
+import './fw-button.js';
+import { FwNavigationMenu as script$2 } from './fw-navigation-menu.js';
+export { FwNavigationMenu } from './fw-navigation-menu.js';
 import 'vue';
 
 function _arrayWithHoles(arr) {
@@ -468,7 +471,8 @@ $({ target: 'Object', stat: true }, {
 var components = /*#__PURE__*/Object.freeze({
   __proto__: null,
   FwCard: script,
-  FwButton: script$1
+  FwButton: script$1,
+  FwNavigationMenu: script$2
 });
 
 var install = function install(app) {

package/frollo-web-ui.esm.js

@@ -1,4 +1,4 @@
-import { defineComponent, openBlock, createElementBlock, toDisplayString, createCommentVNode, renderSlot, ref, computed, normalizeClass } from 'vue';
+import { defineComponent, openBlock, createElementBlock, toDisplayString, createCommentVNode, renderSlot, ref, computed, createBlock, resolveDynamicComponent, normalizeClass, withCtx, createElementVNode, resolveComponent, Fragment, renderList, createTextVNode, createVNode, Transition } from 'vue';
 
 function _arrayWithHoles(arr) {
   if (Array.isArray(arr)) return arr;
@@ -1459,7 +1459,7 @@ $$1({ target: 'Object', stat: true }, {
   }
 });
 
-var script$1 = defineComponent({
+var script$2 = defineComponent({
   name: 'FwCard',
   props: {
     /**
@@ -1481,26 +1481,26 @@ var script$1 = defineComponent({
 var _hoisted_1$1 = {
   "class": "fw-card shadow rounded-lg"
 };
-var _hoisted_2 = {
+var _hoisted_2$1 = {
   key: 0,
   "class": "fw-card--header text-lg px-8 py-4 font-bold bg-grey-lightest rounded-t-lg border-opacity-0"
 };
-var _hoisted_3 = {
+var _hoisted_3$1 = {
   key: 0,
   "class": "fw-card--prefix-title text-primary"
 };
-var _hoisted_4 = {
+var _hoisted_4$1 = {
   key: 1
 };
-var _hoisted_5 = {
+var _hoisted_5$1 = {
   key: 1,
   "class": "p-8"
 };
-function render$1(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", _hoisted_1$1, [_ctx.title || _ctx.prefixTitle ? (openBlock(), createElementBlock("h4", _hoisted_2, [_ctx.prefixTitle ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(_ctx.prefixTitle), 1)) : createCommentVNode("", true), _ctx.title ? (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(_ctx.title), 1)) : createCommentVNode("", true)])) : createCommentVNode("", true), _ctx.$slots["default"] ? (openBlock(), createElementBlock("div", _hoisted_5, [renderSlot(_ctx.$slots, "default")])) : createCommentVNode("", true)]);
+function render$2(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", _hoisted_1$1, [_ctx.title || _ctx.prefixTitle ? (openBlock(), createElementBlock("h4", _hoisted_2$1, [_ctx.prefixTitle ? (openBlock(), createElementBlock("span", _hoisted_3$1, toDisplayString(_ctx.prefixTitle), 1)) : createCommentVNode("", true), _ctx.title ? (openBlock(), createElementBlock("span", _hoisted_4$1, toDisplayString(_ctx.title), 1)) : createCommentVNode("", true)])) : createCommentVNode("", true), _ctx.$slots["default"] ? (openBlock(), createElementBlock("div", _hoisted_5$1, [renderSlot(_ctx.$slots, "default")])) : createCommentVNode("", true)]);
 }
 
-script$1.render = render$1;
+script$2.render = render$2;
 
 var es_array_includes = {};
 
@@ -1652,7 +1652,7 @@ $({ target: 'Array', proto: true }, {
 // https://tc39.es/ecma262/#sec-array.prototype-@@unscopables
 addToUnscopables('includes');
 
-var script = defineComponent({
+var script$1 = defineComponent({
   name: 'FwButton',
   emits: ['click', 'mouseover', 'mouseout', 'focusin', 'focusout'],
   props: {
@@ -1687,7 +1687,7 @@ var script = defineComponent({
       type: String,
       "default": 'primary',
       validator: function validator(value) {
-        return ['primary', 'secondary', 'tertiary', 'error', 'success'].includes(value);
+        return ['primary', 'secondary', 'tertiary', 'error', 'success', 'text'].includes(value);
       }
     }
   },
@@ -1699,9 +1699,9 @@ var script = defineComponent({
         border: 'border-primary focus:ring-primary'
       },
       secondary: {
-        text: 'text-secondary hover:text-tertiary active:text-tertiary',
-        background: 'bg-tertiary hover:bg-secondary active:bg-secondary',
-        border: 'border-secondary focus:ring-secondary'
+        text: 'text-primary hover:text-tertiary active:text-tertiary',
+        background: 'bg-tertiary hover:bg-primary active:bg-primary',
+        border: 'border-primary focus:ring-primary'
       },
       tertiary: {
         text: 'text-tertiary hover:text-secondary active:text-secondary',
@@ -1717,14 +1717,19 @@ var script = defineComponent({
         text: 'text-white hover:text-error active:text-error',
         background: 'bg-error hover:bg-white active:bg-white',
         border: 'border-error focus:ring-error'
+      },
+      text: {
+        text: 'text-body font-medium hover:text-white active:text-white',
+        background: 'bg-white hover:bg-body active:bg-body',
+        border: 'border-transparent focus:ring-body'
       }
     });
     var sizes = ref({
-      sm: 'px-16 py-0.5 text-sm leading-tight',
-      md: 'px-24 py-1 text-md leading-tight',
-      lg: 'px-32 py-1.5 text-lg leading-tight',
-      xl: 'px-40 py-2 text-xl leading-none',
-      '2xl': 'px-48 py-3 text-2xl leading-normal'
+      sm: 'px-2 py-0.5 text-sm',
+      md: 'px-6 py-1 text-md',
+      lg: 'px-10 py-2 text-lg',
+      xl: 'px-12 py-3 text-xl',
+      '2xl': 'px-16 py-4 text-2xl'
     });
     var textColorClass = computed(function () {
       return buttonClasses.value[props.variant].text;
@@ -1778,6 +1783,11 @@ var script = defineComponent({
       return ctx.emit('focusout', e);
     };
 
+    var tagName = computed(function () {
+      if (props.to) return 'router-link';
+      if (props.href) return 'a';
+      return 'button';
+    });
     return {
       textColorClass: textColorClass,
       bgColorClass: bgColorClass,
@@ -1787,41 +1797,241 @@ var script = defineComponent({
       onMouseover: onMouseover,
       onMouseout: onMouseout,
       onFocusin: onFocusin,
-      onFocusout: onFocusout
+      onFocusout: onFocusout,
+      tagName: tagName
     };
   }
 });
 
-var _hoisted_1 = ["to", "href"];
-function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("button", {
-    "class": normalizeClass(["fw-button rounded-full border-2 focus:outline-none ring-offset-2 focus:ring", [_ctx.textColorClass, _ctx.bgColorClass, _ctx.sizeClass, _ctx.borderClass]]),
+function render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createBlock(resolveDynamicComponent(_ctx.tagName), {
+    "class": normalizeClass(["fw-button font-bold cursor-pointer whitespace-nowrap rounded-full border-2 focus:outline-none ring-offset-2 focus:ring", [_ctx.textColorClass, _ctx.bgColorClass, _ctx.sizeClass, _ctx.borderClass]]),
+    type: _ctx.tagName === 'button' ? _ctx.tagName : null,
     to: _ctx.to,
     href: _ctx.href,
-    onClick: _cache[0] || (_cache[0] = function () {
-      return _ctx.onClick && _ctx.onClick.apply(_ctx, arguments);
+    onClick: _ctx.onClick,
+    onFocusin: _ctx.onFocusin,
+    onFocusout: _ctx.onFocusout,
+    onMouseover: _ctx.onMouseover,
+    onMouseout: _ctx.onMouseout
+  }, {
+    "default": withCtx(function () {
+      return [renderSlot(_ctx.$slots, "default")];
     }),
-    onFocusin: _cache[1] || (_cache[1] = function () {
-      return _ctx.onFocusin && _ctx.onFocusin.apply(_ctx, arguments);
+    _: 3
+  }, 8, ["class", "type", "to", "href", "onClick", "onFocusin", "onFocusout", "onMouseover", "onMouseout"]);
+}
+
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z$1 = ".fw-button{-webkit-transition:all .25s ease-in;-o-transition:all .25s ease-in;transition:all .25s ease-in}";
+var stylesheet$1 = ".fw-button{-webkit-transition:all .25s ease-in;-o-transition:all .25s ease-in;transition:all .25s ease-in}";
+styleInject(css_248z$1);
+
+script$1.render = render$1;
+
+var script = defineComponent({
+  name: 'FwNavigationMenu',
+  emits: ['action'],
+  components: {
+    FwButton: script$1
+  },
+  props: {
+    /**
+     * An array of menu items
+     * `{ to?: string | object; href?: string; label: string; }`
+     */
+    menuItems: {
+      type: Array
+    },
+
+    /**
+     * The label for the action button.
+     * Also emits the `action` event.
+     */
+    actionLabel: {
+      type: String
+    }
+  },
+  setup: function setup(_props, ctx) {
+    var isMobileMenuOpen = ref(false);
+
+    var toggleMobileMenu = function toggleMobileMenu() {
+      return isMobileMenuOpen.value = !isMobileMenuOpen.value;
+    };
+
+    var actionClicked = function actionClicked() {
+      return ctx.emit('action');
+    };
+
+    return {
+      isMobileMenuOpen: isMobileMenuOpen,
+      toggleMobileMenu: toggleMobileMenu,
+      actionClicked: actionClicked
+    };
+  }
+});
+
+var _hoisted_1 = {
+  "class": "fw-nav-menu relative z-50 h-20 shadow-md"
+};
+var _hoisted_2 = {
+  "class": "px-6 flex-1 h-full flex bg-white items-stretch justify-between"
+};
+var _hoisted_3 = {
+  key: 0,
+  "class": "flex-shrink-0 flex items-center"
+};
+var _hoisted_4 = {
+  key: 1,
+  "class": "container hidden sm:flex items-center justify-start sm:ml-6"
+};
+var _hoisted_5 = {
+  "class": "flex space-x-2"
+};
+var _hoisted_6 = {
+  key: 2,
+  "class": "hidden sm:flex items-center justify-start sm:ml-6"
+};
+var _hoisted_7 = {
+  "class": "flex items-center sm:hidden"
+};
+
+var _hoisted_8 = /*#__PURE__*/createElementVNode("span", {
+  "class": "sr-only"
+}, "Open main menu", -1);
+
+var _hoisted_9 = {
+  "class": "block h-6 w-6",
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  stroke: "currentColor",
+  "aria-hidden": "true"
+};
+var _hoisted_10 = ["d"];
+var _hoisted_11 = {
+  key: 0,
+  "class": "fw-nav-menu--mobile min-h-screen top-0 left-0 pt-20 absolute w-full flex flex-col justify-between px-2 bg-white shadow-md pb-3 space-y-1"
+};
+var _hoisted_12 = {
+  "class": "w-full flex flex-col"
+};
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _ctx$menuItems;
+
+  var _component_FwButton = resolveComponent("FwButton");
+
+  return openBlock(), createElementBlock("nav", _hoisted_1, [createElementVNode("div", _hoisted_2, [_ctx.$slots.logo ? (openBlock(), createElementBlock("div", _hoisted_3, [renderSlot(_ctx.$slots, "logo")])) : createCommentVNode("", true), ((_ctx$menuItems = _ctx.menuItems) === null || _ctx$menuItems === void 0 ? void 0 : _ctx$menuItems.length) > 0 ? (openBlock(), createElementBlock("div", _hoisted_4, [createElementVNode("div", _hoisted_5, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.menuItems, function (item, i) {
+    return openBlock(), createBlock(_component_FwButton, {
+      key: i,
+      variant: "text",
+      href: item.href,
+      to: item.to,
+      size: "md",
+      "aria-current": "page"
+    }, {
+      "default": withCtx(function () {
+        return [createTextVNode(toDisplayString(item.label), 1)];
+      }),
+      _: 2
+    }, 1032, ["href", "to"]);
+  }), 128))])])) : createCommentVNode("", true), _ctx.actionLabel ? (openBlock(), createElementBlock("div", _hoisted_6, [createVNode(_component_FwButton, {
+    onClick: _ctx.actionClicked,
+    size: "md",
+    "aria-label": _ctx.actionLabel
+  }, {
+    "default": withCtx(function () {
+      return [createTextVNode(toDisplayString(_ctx.actionLabel), 1)];
     }),
-    onFocusout: _cache[2] || (_cache[2] = function () {
-      return _ctx.onFocusout && _ctx.onFocusout.apply(_ctx, arguments);
+    _: 1
+  }, 8, ["onClick", "aria-label"])])) : createCommentVNode("", true), createElementVNode("div", _hoisted_7, [createVNode(_component_FwButton, {
+    variant: "text",
+    size: "sm",
+    onClick: _ctx.toggleMobileMenu
+  }, {
+    "default": withCtx(function () {
+      return [_hoisted_8, (openBlock(), createElementBlock("svg", _hoisted_9, [createElementVNode("path", {
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round",
+        "stroke-width": "2",
+        d: _ctx.isMobileMenuOpen ? 'M6 18L18 6M6 6l12 12' : 'M4 6h16M4 12h16M4 18h16'
+      }, null, 8, _hoisted_10)]))];
     }),
-    onMouseover: _cache[3] || (_cache[3] = function () {
-      return _ctx.onMouseover && _ctx.onMouseover.apply(_ctx, arguments);
+    _: 1
+  }, 8, ["onClick"])])]), createVNode(Transition, {
+    name: "slideInLeft"
+  }, {
+    "default": withCtx(function () {
+      var _ctx$menuItems2;
+
+      return [((_ctx$menuItems2 = _ctx.menuItems) === null || _ctx$menuItems2 === void 0 ? void 0 : _ctx$menuItems2.length) > 0 && _ctx.isMobileMenuOpen ? (openBlock(), createElementBlock("div", _hoisted_11, [createElementVNode("div", _hoisted_12, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.menuItems, function (item, i) {
+        return openBlock(), createBlock(_component_FwButton, {
+          key: i,
+          "class": "w-full rounded-md px-2",
+          variant: "text",
+          href: item.href,
+          to: item.to,
+          size: "md",
+          "aria-current": "page"
+        }, {
+          "default": withCtx(function () {
+            return [createTextVNode(toDisplayString(item.label), 1)];
+          }),
+          _: 2
+        }, 1032, ["href", "to"]);
+      }), 128))]), _ctx.actionLabel ? (openBlock(), createBlock(_component_FwButton, {
+        key: 0,
+        "class": "w-full rounded-md px-2",
+        onClick: _ctx.actionClicked,
+        size: "md"
+      }, {
+        "default": withCtx(function () {
+          return [createTextVNode(toDisplayString(_ctx.actionLabel), 1)];
+        }),
+        _: 1
+      }, 8, ["onClick"])) : createCommentVNode("", true)])) : createCommentVNode("", true)];
     }),
-    onMouseout: _cache[4] || (_cache[4] = function () {
-      return _ctx.onMouseout && _ctx.onMouseout.apply(_ctx, arguments);
-    })
-  }, [renderSlot(_ctx.$slots, "default")], 42, _hoisted_1);
+    _: 1
+  })]);
 }
 
+var css_248z = ".fw-nav-menu--mobile{z-index:-1}.fw-nav-menu--mobile,.slideInLeft-enter-active{-webkit-transition:left .35s ease-in;-o-transition:left .35s ease-in;transition:left .35s ease-in}.slideInLeft-enter-active{-webkit-animation:slideInLeft .35s;animation:slideInLeft .35s}.slideInLeft-leave-active{animation:slideInLeft .35s reverse;-webkit-transition:left .35s ease-in-out;-o-transition:left .35s ease-in-out;transition:left .35s ease-in-out}@-webkit-keyframes slideInLeft{0%{left:100%}to{left:0}}@keyframes slideInLeft{0%{left:100%}to{left:0}}";
+var stylesheet = ".fw-nav-menu--mobile{z-index:-1}.fw-nav-menu--mobile,.slideInLeft-enter-active{-webkit-transition:left .35s ease-in;-o-transition:left .35s ease-in;transition:left .35s ease-in}.slideInLeft-enter-active{-webkit-animation:slideInLeft .35s;animation:slideInLeft .35s}.slideInLeft-leave-active{animation:slideInLeft .35s reverse;-webkit-transition:left .35s ease-in-out;-o-transition:left .35s ease-in-out;transition:left .35s ease-in-out}@-webkit-keyframes slideInLeft{0%{left:100%}to{left:0}}@keyframes slideInLeft{0%{left:100%}to{left:0}}";
+styleInject(css_248z);
+
 script.render = render;
 
 var components = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  FwCard: script$1,
-  FwButton: script
+  FwCard: script$2,
+  FwButton: script$1,
+  FwNavigationMenu: script
 });
 
 var install = function install(app) {
@@ -1834,4 +2044,4 @@ var install = function install(app) {
   });
 };
 
-export { script as FwButton, script$1 as FwCard, install as default };
+export { script$1 as FwButton, script$2 as FwCard, script as FwNavigationMenu, install as default };

package/icons/generate.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 42 55" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M39.668 11.0859L30.9141 2.33203C29.9648 1.38281 28.5938 0.75 27.3281 0.75H5.70703C2.96484 0.855469 0.75 3.07031 0.75 5.91797V49.793C0.75 52.5352 2.96484 54.75 5.70703 54.75H36.1875C38.9297 54.75 41.25 52.5352 41.25 49.793V14.6719C41.25 13.4062 40.6172 12.0352 39.668 11.0859ZM27.75 4.23047C27.9609 4.33594 28.2773 4.44141 28.4883 4.65234L37.3477 13.5117C37.5586 13.7227 37.6641 14.0391 37.7695 14.3555H27.75V4.23047ZM37.875 49.793C37.875 50.6367 37.0312 51.4805 36.1875 51.4805H5.70703C4.86328 51.4805 4.01953 50.6367 4.01953 49.793V5.91797C4.01953 4.96875 4.86328 4.125 5.70703 4.125H24.375V15.1992C24.375 16.5703 25.4297 17.625 26.9062 17.625H37.875V49.793ZM21 21V34.5H34.3945C34.5 34.5 34.3945 34.5 34.3945 34.5C34.3945 27.1172 28.3828 21.1055 21 21ZM24.375 25.0078C27.2227 26.0625 29.4375 28.2773 30.4922 31.125H24.375V25.0078ZM19.3125 44.625C14.5664 44.625 10.875 40.9336 10.875 36.1875C10.875 32.1797 13.7227 28.8047 17.625 27.9609V24.5859C11.8242 25.4297 7.5 30.2812 7.5 36.1875C7.5 42.7266 12.7734 48 19.3125 48C25.2188 48 30.0703 43.6758 30.9141 37.875H27.5391C26.6953 41.7773 23.3203 44.625 19.3125 44.625Z" />
+</svg>

package/icons/manage.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 54 42" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M11.25 27C11.25 25.7812 10.2188 24.75 9 24.75C7.6875 24.75 6.75 25.7812 6.75 27C6.75 28.3125 7.6875 29.25 9 29.25C10.2188 29.25 11.25 28.3125 11.25 27ZM27 11.25C28.2188 11.25 29.25 10.3125 29.25 9C29.25 7.78125 28.2188 6.75 27 6.75C25.6875 6.75 24.75 7.78125 24.75 9C24.75 10.3125 25.6875 11.25 27 11.25ZM14.25 12C12.9375 12 12 13.0312 12 14.25C12 15.5625 12.9375 16.5 14.25 16.5C15.4688 16.5 16.5 15.5625 16.5 14.25C16.5 13.0312 15.4688 12 14.25 12ZM40.6875 13.125C40.0312 12.6562 39.0938 12.75 38.5312 13.3125L29.4375 24.5625C28.6875 24.2812 27.8438 24 27 24C23.625 24 21 26.7188 21 30C21 33.375 23.625 36 27 36C30.2812 36 33 33.375 33 30C33 28.6875 32.5312 27.4688 31.7812 26.5312L40.875 15.2812C41.4375 14.625 41.25 13.6875 40.6875 13.125ZM30 30C30 31.6875 28.5938 33 27 33C25.3125 33 24 31.6875 24 30C24 28.4062 25.3125 27 27 27C28.5938 27 30 28.4062 30 30ZM45 24.75C43.6875 24.75 42.75 25.7812 42.75 27C42.75 28.3125 43.6875 29.25 45 29.25C46.2188 29.25 47.25 28.3125 47.25 27C47.25 25.7812 46.2188 24.75 45 24.75ZM54 27C54 12.0938 41.9062 0 27 0C12 0 0 12.0938 0 27C0 31.9688 1.3125 36.6562 3.65625 40.5938C4.125 41.5312 5.15625 42 6.1875 42H47.7188C48.75 42 49.7812 41.5312 50.25 40.5938C52.5938 36.6562 54 31.9688 54 27ZM51 27C51 31.3125 49.875 35.4375 47.7188 39L6.1875 39.0938C4.125 35.4375 3 31.3125 3 27C3 13.7812 13.6875 3 27 3C40.2188 3 51 13.7812 51 27Z" />
+</svg>

package/icons/not-found.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 404 146" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M130 113.6H107.2V143H75.6002V113.6H0.200195V91.8001L66.2002 3.00009H100.2L39.0002 87.2001H76.6002V61.0001H107.2V87.2001H130V113.6Z"/>
+  <path d="M199.691 145.4C188.091 145.4 177.757 142.533 168.691 136.8C159.624 131.067 152.491 122.8 147.291 112C142.224 101.067 139.691 88.0668 139.691 73.0001C139.691 57.9334 142.224 45.0001 147.291 34.2001C152.491 23.2668 159.624 14.9334 168.691 9.20009C177.757 3.46676 188.091 0.600098 199.691 0.600098C211.291 0.600098 221.624 3.46676 230.691 9.20009C239.757 14.9334 246.824 23.2668 251.891 34.2001C257.091 45.0001 259.691 57.9334 259.691 73.0001C259.691 88.0668 257.091 101.067 251.891 112C246.824 122.8 239.757 131.067 230.691 136.8C221.624 142.533 211.291 145.4 199.691 145.4ZM199.691 118C208.224 118 214.891 114.333 219.691 107C224.624 99.6668 227.091 88.3334 227.091 73.0001C227.091 57.6668 224.624 46.3334 219.691 39.0001C214.891 31.6668 208.224 28.0001 199.691 28.0001C191.291 28.0001 184.624 31.6668 179.691 39.0001C174.891 46.3334 172.491 57.6668 172.491 73.0001C172.491 88.3334 174.891 99.6668 179.691 107C184.624 114.333 191.291 118 199.691 118Z"/>
+  <path d="M403.633 113.6H380.833V143H349.233V113.6H273.833V91.8001L339.833 3.00009H373.833L312.633 87.2001H350.233V61.0001H380.833V87.2001H403.633V113.6Z"/>
+</svg>

package/icons/view.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 52 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M25.973 19.9375C29.0491 19.9375 31.598 17.4766 31.598 14.3125C31.598 11.2363 29.0491 8.6875 25.973 8.6875C25.8851 8.6875 25.7972 8.77539 25.7093 8.77539C25.7972 9.21484 25.8851 9.6543 25.8851 10.1816C25.8851 12.4668 24.0394 14.3125 21.7542 14.3125C21.2269 14.3125 20.7874 14.2246 20.348 14.1367C20.348 14.2246 20.348 14.3125 20.348 14.3125C20.348 17.4766 22.8089 19.9375 25.973 19.9375ZM50.9339 15.8945C46.1878 6.57812 36.6956 0.25 25.973 0.25C15.1624 0.25 5.67024 6.57812 0.924145 15.8945C0.748363 16.2461 0.660473 16.6855 0.660473 17.125C0.660473 17.6523 0.748363 18.0918 0.924145 18.4434C5.67024 27.7598 15.1624 34 25.973 34C36.6956 34 46.1878 27.7598 50.9339 18.4434C51.1097 18.0918 51.1976 17.6523 51.1976 17.2129C51.1976 16.6855 51.1097 16.2461 50.9339 15.8945ZM25.973 3.0625C32.1253 3.0625 37.223 8.16016 37.223 14.3125C37.223 20.5527 32.1253 25.5625 25.973 25.5625C19.7327 25.5625 14.723 20.5527 14.723 14.3125C14.723 8.16016 19.7327 3.15039 25.973 3.0625ZM25.973 31.1875C16.4808 31.1875 7.8675 25.8262 3.47297 17.125C5.93391 12.291 9.88899 8.24805 14.8109 5.78711C12.9652 8.16016 11.9105 11.1484 11.9105 14.3125C11.9105 22.1348 18.1507 28.375 25.973 28.375C33.7073 28.375 40.0355 22.1348 40.0355 14.3125C40.0355 11.1484 38.8929 8.16016 37.0472 5.78711C41.9691 8.24805 45.9241 12.291 48.473 17.125C43.9906 25.8262 35.3773 31.1875 25.973 31.1875Z" />
+</svg>

package/index.d.ts

@@ -1,7 +1,7 @@
 import * as vue from 'vue';
 import { PropType, Plugin } from 'vue';
 
-declare const _default$1: vue.DefineComponent<{
+declare const _default$2: vue.DefineComponent<{
     /**
      * The header title of the card
      */
@@ -29,7 +29,7 @@ declare const _default$1: vue.DefineComponent<{
     };
 }>>, {}>;
 
-declare type ButtonVariantName = 'primary' | 'secondary' | 'tertiary' | 'error' | 'success';
+declare type ButtonVariantName = 'primary' | 'secondary' | 'tertiary' | 'error' | 'success' | 'text';
 interface ButtonDefinition {
     text: string;
     background: string;
@@ -48,7 +48,7 @@ interface FwButtonProps {
     size?: ButtonSize;
     variant?: ButtonVariantName;
 }
-declare const _default: vue.DefineComponent<{
+declare const _default$1: vue.DefineComponent<{
     /**
      * A `router-link` path or object
      */
@@ -86,6 +86,7 @@ declare const _default: vue.DefineComponent<{
     onMouseout: (this: GlobalEventHandlers, ev: MouseEvent) => any;
     onFocusin: (this: GlobalEventHandlers, ev: FocusEvent) => any;
     onFocusout: (this: GlobalEventHandlers, ev: FocusEvent) => any;
+    tagName: vue.ComputedRef<"router-link" | "a" | "button">;
 }, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("click" | "mouseover" | "mouseout" | "focusin" | "focusout")[], "click" | "mouseover" | "mouseout" | "focusin" | "focusout", vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
     /**
      * A `router-link` path or object
@@ -125,6 +126,49 @@ declare const _default: vue.DefineComponent<{
     variant: ButtonVariantName;
 }>;
 
+interface NavMenuItem {
+    to?: string | object;
+    href?: string;
+    label: string;
+}
+declare const _default: vue.DefineComponent<{
+    /**
+     * An array of menu items
+     * `{ to?: string | object; href?: string; label: string; }`
+     */
+    menuItems: {
+        type: PropType<NavMenuItem[]>;
+    };
+    /**
+     * The label for the action button.
+     * Also emits the `action` event.
+     */
+    actionLabel: {
+        type: StringConstructor;
+    };
+}, {
+    isMobileMenuOpen: vue.Ref<boolean>;
+    toggleMobileMenu: () => boolean;
+    actionClicked: () => void;
+}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "action"[], "action", vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    /**
+     * An array of menu items
+     * `{ to?: string | object; href?: string; label: string; }`
+     */
+    menuItems: {
+        type: PropType<NavMenuItem[]>;
+    };
+    /**
+     * The label for the action button.
+     * Also emits the `action` event.
+     */
+    actionLabel: {
+        type: StringConstructor;
+    };
+}>> & {
+    onAction?: ((...args: any[]) => any) | undefined;
+}, {}>;
+
 declare const install: Exclude<Plugin['install'], undefined>;
 
-export { ButtonDefinition, ButtonDefinitionList, ButtonSize, ButtonSizes, ButtonVariantName, _default as FwButton, FwButtonProps, _default$1 as FwCard, install as default };
+export { ButtonDefinition, ButtonDefinitionList, ButtonSize, ButtonSizes, ButtonVariantName, _default$1 as FwButton, FwButtonProps, _default$2 as FwCard, _default as FwNavigationMenu, NavMenuItem, install as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frollo/frollo-web-ui",
-  "version": "0.0.3",
+  "version": "0.0.6",
   "description": "Frollo's UI library for components, utilities and configs",
   "exports": {
     "./tailwind.config.js": "./tailwind.config.js",

package/tailwind.config.js

@@ -8,7 +8,7 @@ module.exports = {
       white: '#ffffff',
       black: '#000000',
       transparent: 'transparent',
-      body: '#2C3E50',
+      body: '#000000',
       error: '#eb5757',
       success: '#00c48c',
       grey: {

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

@@ -1,5 +1,5 @@
 import { PropType } from 'vue';
-export declare type ButtonVariantName = 'primary' | 'secondary' | 'tertiary' | 'error' | 'success';
+export declare type ButtonVariantName = 'primary' | 'secondary' | 'tertiary' | 'error' | 'success' | 'text';
 export interface ButtonDefinition {
     text: string;
     background: string;
@@ -56,6 +56,7 @@ declare const _default: import("vue").DefineComponent<{
     onMouseout: (this: GlobalEventHandlers, ev: MouseEvent) => any;
     onFocusin: (this: GlobalEventHandlers, ev: FocusEvent) => any;
     onFocusout: (this: GlobalEventHandlers, ev: FocusEvent) => any;
+    tagName: import("vue").ComputedRef<"router-link" | "a" | "button">;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click" | "mouseover" | "mouseout" | "focusin" | "focusout")[], "click" | "mouseover" | "mouseout" | "focusin" | "focusout", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     /**
      * A `router-link` path or object

package/types/components/fw-navigation-menu/fw-navigation-menu.vue.d.ts

@@ -0,0 +1,44 @@
+import { PropType } from 'vue';
+export interface NavMenuItem {
+    to?: string | object;
+    href?: string;
+    label: string;
+}
+declare const _default: import("vue").DefineComponent<{
+    /**
+     * An array of menu items
+     * `{ to?: string | object; href?: string; label: string; }`
+     */
+    menuItems: {
+        type: PropType<NavMenuItem[]>;
+    };
+    /**
+     * The label for the action button.
+     * Also emits the `action` event.
+     */
+    actionLabel: {
+        type: StringConstructor;
+    };
+}, {
+    isMobileMenuOpen: import("vue").Ref<boolean>;
+    toggleMobileMenu: () => boolean;
+    actionClicked: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "action"[], "action", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * An array of menu items
+     * `{ to?: string | object; href?: string; label: string; }`
+     */
+    menuItems: {
+        type: PropType<NavMenuItem[]>;
+    };
+    /**
+     * The label for the action button.
+     * Also emits the `action` event.
+     */
+    actionLabel: {
+        type: StringConstructor;
+    };
+}>> & {
+    onAction?: ((...args: any[]) => any) | undefined;
+}, {}>;
+export default _default;

package/types/components/fw-navigation-menu/index.d.ts

@@ -0,0 +1,2 @@
+import FwNavigationMenu from './fw-navigation-menu.vue';
+export { FwNavigationMenu };

package/types/components/index.d.ts

@@ -1,2 +1,3 @@
 export * from './fw-card';
 export * from './fw-button';
+export * from './fw-navigation-menu';

package/types/index-types.esm.d.ts

@@ -3,3 +3,4 @@ export default install;
 export * from './components';
 export * from './components/fw-card/fw-card.vue';
 export * from './components/fw-button/fw-button.vue';
+export * from './components/fw-navigation-menu/fw-navigation-menu.vue';