@knitify/vue 0.0.8 → 0.0.9

package/dist/index.es.js

@@ -1,34 +1,131 @@
-import { defineComponent as b, openBlock as n, createElementBlock as o, normalizeClass as t, renderSlot as c, createElementVNode as r, computed as $, resolveComponent as g, Fragment as x, renderList as M, createVNode as u, unref as S, withCtx as m, withModifiers as I, createBlock as y, createTextVNode as j, toDisplayString as C, createCommentVNode as i, useModel as O, useSlots as z, mergeModels as N } from "vue";
-import { RouterLink as A } from "vue-router";
-const T = /* @__PURE__ */ b({
+import { defineComponent as K, computed as b, openBlock as o, createBlock as m, resolveDynamicComponent as V, normalizeClass as l, withCtx as h, renderSlot as u, createElementBlock as s, createElementVNode as c, useModel as k, useSlots as x, createCommentVNode as f, withDirectives as j, vModelDynamic as z, mergeModels as B, resolveComponent as p, Fragment as O, renderList as A, createVNode as g, unref as D, withModifiers as L, createTextVNode as T, toDisplayString as C } from "vue";
+import { useLink as w, RouterLink as U } from "vue-router";
+function N(e) {
+  return e.charAt(0).toUpperCase() + e.slice(1);
+}
+const E = /* @__PURE__ */ K({
+  __name: "KButton",
+  props: {
+    disabled: { type: Boolean, default: !1 },
+    expanded: { type: Boolean, default: !1 },
+    ghost: { type: Boolean, default: !1 },
+    href: {},
+    outline: { type: Boolean, default: !1 },
+    rounded: { type: Boolean, default: !1 },
+    to: {},
+    type: { default: "button" },
+    variant: {}
+  },
+  setup(e) {
+    const { href: a, navigate: n } = w({
+      to: b(() => e.to ?? "/")
+    }), d = b(() => e.to || e.href ? "a" : "button"), r = b(() => {
+      if (e.to)
+        return a.value;
+      if (e.href)
+        return e.href;
+    }), i = b(() => [
+      "KButton",
+      e.variant ? e.ghost ? `KButton--ghost${N(e.variant)}` : e.outline ? `KButton--outline${N(e.variant)}` : `KButton--${e.variant}` : null,
+      !e.variant && e.outline && "KButton--outline",
+      !e.variant && e.ghost && "KButton--ghost",
+      e.rounded && "KButton--rounded",
+      e.expanded && "KButton--expanded"
+    ]);
+    function t(v) {
+      e.to && n(v);
+    }
+    return (v, y) => (o(), m(V(d.value), {
+      href: r.value,
+      type: d.value === "button" ? e.type : void 0,
+      disabled: d.value === "button" ? e.disabled : void 0,
+      class: l(i.value),
+      onClick: t
+    }, {
+      default: h(() => [
+        u(v.$slots, "default")
+      ]),
+      _: 3
+    }, 8, ["href", "type", "disabled", "class"]));
+  }
+}), H = /* @__PURE__ */ K({
   __name: "KContainer",
   props: {
     glassy: { type: Boolean }
   },
   setup(e) {
-    return (s, l) => (n(), o("div", {
-      class: t(["KContainer", e.glassy && "KContainer--glassy"])
+    return (a, n) => (o(), s("div", {
+      class: l(["KContainer", e.glassy && "KContainer--glassy"])
     }, [
-      c(s.$slots, "default")
+      u(a.$slots, "default")
     ], 2));
   }
-}), V = {
+}), F = {
   class: "KIcon",
   title: "icon",
   role: "img"
-}, L = ["href"], w = /* @__PURE__ */ b({
+}, P = ["href"], R = /* @__PURE__ */ K({
   __name: "KIcon",
   props: {
     href: { default: "" }
   },
   setup(e) {
-    return (s, l) => (n(), o("svg", V, [
-      r("use", {
+    return (a, n) => (o(), s("svg", F, [
+      c("use", {
         href: `#${e.href.replace(/^#/, "")}`
-      }, null, 8, L)
+      }, null, 8, P)
     ]));
   }
-}), E = /* @__PURE__ */ b({
+}), q = {
+  key: 0,
+  class: "KInput-addon"
+}, G = ["disabled", "placeholder", "type"], J = {
+  key: 1,
+  class: "KInput-addon"
+}, Q = /* @__PURE__ */ K({
+  __name: "KInput",
+  props: /* @__PURE__ */ B({
+    disabled: { type: Boolean, default: !1 },
+    ghost: { type: Boolean, default: !1 },
+    placeholder: {},
+    rounded: { type: Boolean, default: !1 },
+    sunken: { type: Boolean, default: !1 },
+    transparent: { type: Boolean, default: !1 },
+    type: { default: "text" }
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(e) {
+    const a = k(e, "modelValue"), n = x(), d = b(() => [
+      "KInput",
+      e.disabled && "KInput--disabled",
+      e.ghost && "KInput--ghost",
+      e.rounded && "KInput--rounded",
+      e.sunken && "KInput--sunken",
+      e.transparent && "KInput--transparent"
+    ]);
+    return (r, i) => (o(), s("div", {
+      class: l(d.value)
+    }, [
+      n.prefix ? (o(), s("div", q, [
+        u(r.$slots, "prefix")
+      ])) : f("", !0),
+      j(c("input", {
+        "onUpdate:modelValue": i[0] || (i[0] = (t) => a.value = t),
+        disabled: e.disabled,
+        placeholder: e.placeholder,
+        type: e.type
+      }, null, 8, G), [
+        [z, a.value]
+      ]),
+      n.suffix ? (o(), s("div", J, [
+        u(r.$slots, "suffix")
+      ])) : f("", !0)
+    ], 2));
+  }
+}), W = /* @__PURE__ */ K({
   __name: "KBadge",
   props: {
     pill: { type: Boolean },
@@ -37,8 +134,8 @@ const T = /* @__PURE__ */ b({
     variant: {}
   },
   setup(e) {
-    return (s, l) => (n(), o("div", {
-      class: t([
+    return (a, n) => (o(), s("div", {
+      class: l([
         "KBadge",
         e.pill && "KBadge--pill",
         e.size && `KBadge--${e.size}`,
@@ -46,77 +143,77 @@ const T = /* @__PURE__ */ b({
         e.variant && `KBadge--${e.variant}`
       ])
     }, [
-      c(s.$slots, "default")
+      u(a.$slots, "default")
     ], 2));
   }
-}), D = { class: "KNavbar-menu" }, F = ["href", "onClick"], P = {
+}), X = { class: "KNavbar-menu" }, Y = ["href", "onClick"], Z = {
   key: 0,
-  class: /* @__PURE__ */ t(["KNavbar-caret", "KCollapse-toggle"]),
+  class: /* @__PURE__ */ l(["KNavbar-caret", "KCollapse-toggle"]),
   "data-kt-collapse-toggle": ""
-}, B = /* @__PURE__ */ b({
+}, I = /* @__PURE__ */ K({
   __name: "KNavbarMenu",
   props: {
     items: { default: () => [] }
   },
   setup(e) {
-    const s = $(() => e.items.filter(({ hidden: l }) => !l));
-    return (l, K) => {
-      const d = g("KIcon"), f = g("KNavbarMenu", !0);
-      return n(), o("ul", D, [
-        (n(!0), o(x, null, M(s.value, (a, p) => c(l.$slots, "item", {
-          key: `navbar-menu-item-${p}`,
-          item: a
+    const a = b(() => e.items.filter(({ hidden: n }) => !n));
+    return (n, d) => {
+      const r = p("KIcon"), i = p("KNavbarMenu", !0);
+      return o(), s("ul", X, [
+        (o(!0), s(O, null, A(a.value, (t, v) => u(n.$slots, "item", {
+          key: `navbar-menu-item-${v}`,
+          item: t
         }, () => [
-          u(S(A), {
-            to: a.route ?? "/",
+          g(D(U), {
+            to: t.route ?? "/",
             custom: ""
           }, {
-            default: m(({ isActive: v, href: _, navigate: k }) => [
-              r("li", {
-                class: t([
+            default: h(({ isActive: y, href: M, navigate: S }) => [
+              c("li", {
+                class: l([
                   "KNavbar-item",
                   "KCollapse is-collapsed",
-                  v && "KNavbar-item-is-active"
+                  y && "KNavbar-item-is-active"
                 ]),
                 "data-kt-collapse": ""
               }, [
-                r("a", {
-                  class: t(["KNavbar-link"]),
-                  href: a.route ? _ : void 0,
-                  onClick: I((U) => a.route ? k() : a.onClick?.(), ["prevent"])
+                c("a", {
+                  class: l(["KNavbar-link"]),
+                  href: t.route ? M : void 0,
+                  onClick: L((ee) => t.route ? S() : t.onClick?.(), ["prevent"])
                 }, [
-                  r("span", {
-                    class: t(["KNavbar-icon", a.iconClass])
+                  c("span", {
+                    class: l(["KNavbar-icon", t.iconClass])
                   }, [
-                    u(d, {
-                      href: a.icon
+                    g(r, {
+                      href: t.icon
                     }, null, 8, ["href"])
                   ], 2),
-                  a.badge ? (n(), y(E, {
+                  t.badge ? (o(), m(W, {
                     key: 0,
-                    class: t(["KNavbar-badge", a.badgeClass]),
+                    class: l(["KNavbar-badge", t.badgeClass]),
                     pill: "",
                     size: "sm",
                     variant: "danger"
                   }, {
-                    default: m(() => [
-                      j(C(a.badge), 1)
+                    default: h(() => [
+                      T(C(t.badge), 1)
                     ]),
                     _: 2
-                  }, 1032, ["class"])) : i("", !0),
-                  r("span", {
-                    class: t(["KNavbar-text", a.textClass])
-                  }, C(a.text), 3)
-                ], 8, F),
-                a.children ? (n(), o("span", P, [
-                  u(d, { href: "#caretUp" })
-                ])) : i("", !0),
-                a.children ? (n(), y(f, {
+                  }, 1032, ["class"])) : f("", !0),
+                  c("span", {
+                    class: l(["KNavbar-text", t.textClass])
+                  }, C(t.text), 3)
+                ], 8, Y),
+                t.children ? (o(), s("span", Z, [
+                  g(r, { href: "#caretUp" })
+                ])) : f("", !0),
+                t.children ? (o(), m(i, {
                   key: 1,
-                  items: a.children,
+                  items: t.children,
                   class: "KCollapse-content",
                   "data-kt-collapse-content": ""
-                }, null, 8, ["items"])) : i("", !0)
+                }, null, 8, ["items"])) : f("", !0)
               ], 2)
             ]),
             _: 2
@@ -125,9 +222,9 @@ const T = /* @__PURE__ */ b({
       ]);
     };
   }
-}), R = /* @__PURE__ */ b({
+}), _ = /* @__PURE__ */ K({
   __name: "KNavbar",
-  props: /* @__PURE__ */ N({
+  props: /* @__PURE__ */ B({
     items: {},
     bodyClass: { type: [Boolean, null, String, Object, Array] },
     brandClass: { type: [Boolean, null, String, Object, Array] },
@@ -140,73 +237,77 @@ const T = /* @__PURE__ */ b({
     expanded: { type: Boolean, default: !1 },
     expandedModifiers: {}
   }),
-  emits: /* @__PURE__ */ N(["toggle"], ["update:expanded"]),
-  setup(e, { emit: s }) {
-    const l = O(e, "expanded"), K = s, d = z(), f = () => {
-      l.value = !l.value, K("toggle", l.value);
+  emits: /* @__PURE__ */ B(["toggle"], ["update:expanded"]),
+  setup(e, { emit: a }) {
+    const n = k(e, "expanded"), d = a, r = x(), i = () => {
+      n.value = !n.value, d("toggle", n.value);
     };
-    return (a, p) => {
-      const v = g("KIcon");
-      return n(), o("aside", {
-        class: t([
+    return (t, v) => {
+      const y = p("KIcon");
+      return o(), s("aside", {
+        class: l([
           "KNavbar",
-          l.value && "KNavbar-is-expanded",
+          n.value && "KNavbar-is-expanded",
           e.fixed && "KNavbar-is-fixed"
         ])
       }, [
-        r("div", {
-          class: t(["KNavbar-inner", e.innerClass])
+        c("div", {
+          class: l(["KNavbar-inner", e.innerClass])
         }, [
-          d.brand ? (n(), o("div", {
+          r.brand ? (o(), s("div", {
             key: 0,
-            class: t(["KNavbar-brand", e.brandClass])
+            class: l(["KNavbar-brand", e.brandClass])
           }, [
-            c(a.$slots, "brand")
-          ], 2)) : i("", !0),
-          r("nav", {
-            class: t(["KNavbar-body", e.bodyClass])
+            u(t.$slots, "brand")
+          ], 2)) : f("", !0),
+          c("nav", {
+            class: l(["KNavbar-body", e.bodyClass])
           }, [
-            c(a.$slots, "default", {}, () => [
-              u(B, { items: e.items }, null, 8, ["items"])
+            u(t.$slots, "default", {}, () => [
+              g(I, { items: e.items }, null, 8, ["items"])
             ])
           ], 2),
-          d.footer ? (n(), o("div", {
+          r.footer ? (o(), s("div", {
             key: 1,
-            class: t(["KNavbar-footer", e.footerClass])
+            class: l(["KNavbar-footer", e.footerClass])
           }, [
-            c(a.$slots, "footer")
-          ], 2)) : i("", !0)
+            u(t.$slots, "footer")
+          ], 2)) : f("", !0)
         ], 2),
-        e.hideToggle ? i("", !0) : (n(), o("button", {
+        e.hideToggle ? f("", !0) : (o(), s("button", {
           key: 0,
           type: "button",
-          class: t(["KNavbar-toggle", e.toggleClass]),
-          onClick: f
+          class: l(["KNavbar-toggle", e.toggleClass]),
+          onClick: i
         }, [
-          u(v, { href: "#caretLeft" })
+          g(y, { href: "#caretLeft" })
         ], 2))
       ], 2);
     };
   }
-}), h = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}), $ = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  KContainer: T,
-  KIcon: w,
-  KNavbar: R,
-  KNavbarMenu: B
-}, Symbol.toStringTag, { value: "Module" })), H = {
+  KButton: E,
+  KContainer: H,
+  KIcon: R,
+  KInput: Q,
+  KNavbar: _,
+  KNavbarMenu: I
+}, Symbol.toStringTag, { value: "Module" })), ne = {
   install(e) {
-    for (const s in h)
+    for (const a in $)
       e.component(
-        s,
-        h[s]
+        a,
+        $[a]
       );
   }
 };
 export {
-  T as KContainer,
-  w as KIcon,
-  R as KNavbar,
-  B as KNavbarMenu,
-  H as default
+  E as KButton,
+  H as KContainer,
+  R as KIcon,
+  Q as KInput,
+  _ as KNavbar,
+  I as KNavbarMenu,
+  ne as default
 };

package/dist/index.umd.js

@@ -1 +1 @@
-(function(n,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("vue-router")):typeof define=="function"&&define.amd?define(["exports","vue","vue-router"],e):(n=typeof globalThis<"u"?globalThis:n||self,e(n["knitify-vue"]={},n.Vue,n.vueRouter))})(this,(function(n,e,g){"use strict";const d=e.defineComponent({__name:"KContainer",props:{glassy:{type:Boolean}},setup(t){return(o,l)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["KContainer",t.glassy&&"KContainer--glassy"])},[e.renderSlot(o.$slots,"default")],2))}}),K={class:"KIcon",title:"icon",role:"img"},N=["href"],m=e.defineComponent({__name:"KIcon",props:{href:{default:""}},setup(t){return(o,l)=>(e.openBlock(),e.createElementBlock("svg",K,[e.createElementVNode("use",{href:`#${t.href.replace(/^#/,"")}`},null,8,N)]))}}),k=e.defineComponent({__name:"KBadge",props:{pill:{type:Boolean},size:{},subtle:{type:Boolean},variant:{}},setup(t){return(o,l)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["KBadge",t.pill&&"KBadge--pill",t.size&&`KBadge--${t.size}`,t.subtle&&"KBadge--subtle",t.variant&&`KBadge--${t.variant}`])},[e.renderSlot(o.$slots,"default")],2))}}),B={class:"KNavbar-menu"},y=["href","onClick"],h={key:0,class:e.normalizeClass(["KNavbar-caret","KCollapse-toggle"]),"data-kt-collapse-toggle":""},r=e.defineComponent({__name:"KNavbarMenu",props:{items:{default:()=>[]}},setup(t){const o=e.computed(()=>t.items.filter(({hidden:l})=>!l));return(l,C)=>{const s=e.resolveComponent("KIcon"),c=e.resolveComponent("KNavbarMenu",!0);return e.openBlock(),e.createElementBlock("ul",B,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.value,(a,b)=>e.renderSlot(l.$slots,"item",{key:`navbar-menu-item-${b}`,item:a},()=>[e.createVNode(e.unref(g.RouterLink),{to:a.route??"/",custom:""},{default:e.withCtx(({isActive:i,href:V,navigate:z})=>[e.createElementVNode("li",{class:e.normalizeClass(["KNavbar-item","KCollapse is-collapsed",i&&"KNavbar-item-is-active"]),"data-kt-collapse":""},[e.createElementVNode("a",{class:e.normalizeClass(["KNavbar-link"]),href:a.route?V:void 0,onClick:e.withModifiers(S=>a.route?z():a.onClick?.(),["prevent"])},[e.createElementVNode("span",{class:e.normalizeClass(["KNavbar-icon",a.iconClass])},[e.createVNode(s,{href:a.icon},null,8,["href"])],2),a.badge?(e.openBlock(),e.createBlock(k,{key:0,class:e.normalizeClass(["KNavbar-badge",a.badgeClass]),pill:"",size:"sm",variant:"danger"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(a.badge),1)]),_:2},1032,["class"])):e.createCommentVNode("",!0),e.createElementVNode("span",{class:e.normalizeClass(["KNavbar-text",a.textClass])},e.toDisplayString(a.text),3)],8,y),a.children?(e.openBlock(),e.createElementBlock("span",h,[e.createVNode(s,{href:"#caretUp"})])):e.createCommentVNode("",!0),a.children?(e.openBlock(),e.createBlock(c,{key:1,items:a.children,class:"KCollapse-content","data-kt-collapse-content":""},null,8,["items"])):e.createCommentVNode("",!0)],2)]),_:2},1032,["to"])])),128))])}}}),f=e.defineComponent({__name:"KNavbar",props:e.mergeModels({items:{},bodyClass:{type:[Boolean,null,String,Object,Array]},brandClass:{type:[Boolean,null,String,Object,Array]},fixed:{type:Boolean,default:!1},footerClass:{type:[Boolean,null,String,Object,Array]},hideToggle:{type:Boolean},innerClass:{type:[Boolean,null,String,Object,Array]},toggleClass:{type:[Boolean,null,String,Object,Array]}},{expanded:{type:Boolean,default:!1},expandedModifiers:{}}),emits:e.mergeModels(["toggle"],["update:expanded"]),setup(t,{emit:o}){const l=e.useModel(t,"expanded"),C=o,s=e.useSlots(),c=()=>{l.value=!l.value,C("toggle",l.value)};return(a,b)=>{const i=e.resolveComponent("KIcon");return e.openBlock(),e.createElementBlock("aside",{class:e.normalizeClass(["KNavbar",l.value&&"KNavbar-is-expanded",t.fixed&&"KNavbar-is-fixed"])},[e.createElementVNode("div",{class:e.normalizeClass(["KNavbar-inner",t.innerClass])},[s.brand?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["KNavbar-brand",t.brandClass])},[e.renderSlot(a.$slots,"brand")],2)):e.createCommentVNode("",!0),e.createElementVNode("nav",{class:e.normalizeClass(["KNavbar-body",t.bodyClass])},[e.renderSlot(a.$slots,"default",{},()=>[e.createVNode(r,{items:t.items},null,8,["items"])])],2),s.footer?(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass(["KNavbar-footer",t.footerClass])},[e.renderSlot(a.$slots,"footer")],2)):e.createCommentVNode("",!0)],2),t.hideToggle?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("button",{key:0,type:"button",class:e.normalizeClass(["KNavbar-toggle",t.toggleClass]),onClick:c},[e.createVNode(i,{href:"#caretLeft"})],2))],2)}}}),p=Object.freeze(Object.defineProperty({__proto__:null,KContainer:d,KIcon:m,KNavbar:f,KNavbarMenu:r},Symbol.toStringTag,{value:"Module"})),_={install(t){for(const o in p)t.component(o,p[o])}};n.KContainer=d,n.KIcon=m,n.KNavbar=f,n.KNavbarMenu=r,n.default=_,Object.defineProperties(n,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));
+(function(l,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("vue-router")):typeof define=="function"&&define.amd?define(["exports","vue","vue-router"],e):(l=typeof globalThis<"u"?globalThis:l||self,e(l["knitify-vue"]={},l.Vue,l.vueRouter))})(this,(function(l,e,f){"use strict";function u(t){return t.charAt(0).toUpperCase()+t.slice(1)}const B=e.defineComponent({__name:"KButton",props:{disabled:{type:Boolean,default:!1},expanded:{type:Boolean,default:!1},ghost:{type:Boolean,default:!1},href:{},outline:{type:Boolean,default:!1},rounded:{type:Boolean,default:!1},to:{},type:{default:"button"},variant:{}},setup(t){const{href:a,navigate:o}=f.useLink({to:e.computed(()=>t.to??"/")}),r=e.computed(()=>t.to||t.href?"a":"button"),s=e.computed(()=>{if(t.to)return a.value;if(t.href)return t.href}),d=e.computed(()=>["KButton",t.variant?t.ghost?`KButton--ghost${u(t.variant)}`:t.outline?`KButton--outline${u(t.variant)}`:`KButton--${t.variant}`:null,!t.variant&&t.outline&&"KButton--outline",!t.variant&&t.ghost&&"KButton--ghost",t.rounded&&"KButton--rounded",t.expanded&&"KButton--expanded"]);function n(c){t.to&&o(c)}return(c,i)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(r.value),{href:s.value,type:r.value==="button"?t.type:void 0,disabled:r.value==="button"?t.disabled:void 0,class:e.normalizeClass(d.value),onClick:n},{default:e.withCtx(()=>[e.renderSlot(c.$slots,"default")]),_:3},8,["href","type","disabled","class"]))}}),C=e.defineComponent({__name:"KContainer",props:{glassy:{type:Boolean}},setup(t){return(a,o)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["KContainer",t.glassy&&"KContainer--glassy"])},[e.renderSlot(a.$slots,"default")],2))}}),g={class:"KIcon",title:"icon",role:"img"},h=["href"],K=e.defineComponent({__name:"KIcon",props:{href:{default:""}},setup(t){return(a,o)=>(e.openBlock(),e.createElementBlock("svg",g,[e.createElementVNode("use",{href:`#${t.href.replace(/^#/,"")}`},null,8,h)]))}}),k={key:0,class:"KInput-addon"},N=["disabled","placeholder","type"],$={key:1,class:"KInput-addon"},p=e.defineComponent({__name:"KInput",props:e.mergeModels({disabled:{type:Boolean,default:!1},ghost:{type:Boolean,default:!1},placeholder:{},rounded:{type:Boolean,default:!1},sunken:{type:Boolean,default:!1},transparent:{type:Boolean,default:!1},type:{default:"text"}},{modelValue:{},modelModifiers:{}}),emits:["update:modelValue"],setup(t){const a=e.useModel(t,"modelValue"),o=e.useSlots(),r=e.computed(()=>["KInput",t.disabled&&"KInput--disabled",t.ghost&&"KInput--ghost",t.rounded&&"KInput--rounded",t.sunken&&"KInput--sunken",t.transparent&&"KInput--transparent"]);return(s,d)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(r.value)},[o.prefix?(e.openBlock(),e.createElementBlock("div",k,[e.renderSlot(s.$slots,"prefix")])):e.createCommentVNode("",!0),e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":d[0]||(d[0]=n=>a.value=n),disabled:t.disabled,placeholder:t.placeholder,type:t.type},null,8,N),[[e.vModelDynamic,a.value]]),o.suffix?(e.openBlock(),e.createElementBlock("div",$,[e.renderSlot(s.$slots,"suffix")])):e.createCommentVNode("",!0)],2))}}),V=e.defineComponent({__name:"KBadge",props:{pill:{type:Boolean},size:{},subtle:{type:Boolean},variant:{}},setup(t){return(a,o)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["KBadge",t.pill&&"KBadge--pill",t.size&&`KBadge--${t.size}`,t.subtle&&"KBadge--subtle",t.variant&&`KBadge--${t.variant}`])},[e.renderSlot(a.$slots,"default")],2))}}),z={class:"KNavbar-menu"},S=["href","onClick"],E={key:0,class:e.normalizeClass(["KNavbar-caret","KCollapse-toggle"]),"data-kt-collapse-toggle":""},m=e.defineComponent({__name:"KNavbarMenu",props:{items:{default:()=>[]}},setup(t){const a=e.computed(()=>t.items.filter(({hidden:o})=>!o));return(o,r)=>{const s=e.resolveComponent("KIcon"),d=e.resolveComponent("KNavbarMenu",!0);return e.openBlock(),e.createElementBlock("ul",z,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.value,(n,c)=>e.renderSlot(o.$slots,"item",{key:`navbar-menu-item-${c}`,item:n},()=>[e.createVNode(e.unref(f.RouterLink),{to:n.route??"/",custom:""},{default:e.withCtx(({isActive:i,href:x,navigate:M})=>[e.createElementVNode("li",{class:e.normalizeClass(["KNavbar-item","KCollapse is-collapsed",i&&"KNavbar-item-is-active"]),"data-kt-collapse":""},[e.createElementVNode("a",{class:e.normalizeClass(["KNavbar-link"]),href:n.route?x:void 0,onClick:e.withModifiers(j=>n.route?M():n.onClick?.(),["prevent"])},[e.createElementVNode("span",{class:e.normalizeClass(["KNavbar-icon",n.iconClass])},[e.createVNode(s,{href:n.icon},null,8,["href"])],2),n.badge?(e.openBlock(),e.createBlock(V,{key:0,class:e.normalizeClass(["KNavbar-badge",n.badgeClass]),pill:"",size:"sm",variant:"danger"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(n.badge),1)]),_:2},1032,["class"])):e.createCommentVNode("",!0),e.createElementVNode("span",{class:e.normalizeClass(["KNavbar-text",n.textClass])},e.toDisplayString(n.text),3)],8,S),n.children?(e.openBlock(),e.createElementBlock("span",E,[e.createVNode(s,{href:"#caretUp"})])):e.createCommentVNode("",!0),n.children?(e.openBlock(),e.createBlock(d,{key:1,items:n.children,class:"KCollapse-content","data-kt-collapse-content":""},null,8,["items"])):e.createCommentVNode("",!0)],2)]),_:2},1032,["to"])])),128))])}}}),b=e.defineComponent({__name:"KNavbar",props:e.mergeModels({items:{},bodyClass:{type:[Boolean,null,String,Object,Array]},brandClass:{type:[Boolean,null,String,Object,Array]},fixed:{type:Boolean,default:!1},footerClass:{type:[Boolean,null,String,Object,Array]},hideToggle:{type:Boolean},innerClass:{type:[Boolean,null,String,Object,Array]},toggleClass:{type:[Boolean,null,String,Object,Array]}},{expanded:{type:Boolean,default:!1},expandedModifiers:{}}),emits:e.mergeModels(["toggle"],["update:expanded"]),setup(t,{emit:a}){const o=e.useModel(t,"expanded"),r=a,s=e.useSlots(),d=()=>{o.value=!o.value,r("toggle",o.value)};return(n,c)=>{const i=e.resolveComponent("KIcon");return e.openBlock(),e.createElementBlock("aside",{class:e.normalizeClass(["KNavbar",o.value&&"KNavbar-is-expanded",t.fixed&&"KNavbar-is-fixed"])},[e.createElementVNode("div",{class:e.normalizeClass(["KNavbar-inner",t.innerClass])},[s.brand?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["KNavbar-brand",t.brandClass])},[e.renderSlot(n.$slots,"brand")],2)):e.createCommentVNode("",!0),e.createElementVNode("nav",{class:e.normalizeClass(["KNavbar-body",t.bodyClass])},[e.renderSlot(n.$slots,"default",{},()=>[e.createVNode(m,{items:t.items},null,8,["items"])])],2),s.footer?(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass(["KNavbar-footer",t.footerClass])},[e.renderSlot(n.$slots,"footer")],2)):e.createCommentVNode("",!0)],2),t.hideToggle?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("button",{key:0,type:"button",class:e.normalizeClass(["KNavbar-toggle",t.toggleClass]),onClick:d},[e.createVNode(i,{href:"#caretLeft"})],2))],2)}}}),y=Object.freeze(Object.defineProperty({__proto__:null,KButton:B,KContainer:C,KIcon:K,KInput:p,KNavbar:b,KNavbarMenu:m},Symbol.toStringTag,{value:"Module"})),I={install(t){for(const a in y)t.component(a,y[a])}};l.KButton=B,l.KContainer=C,l.KIcon=K,l.KInput=p,l.KNavbar=b,l.KNavbarMenu=m,l.default=I,Object.defineProperties(l,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));

package/dist/types/components/Button/KButton.vue.d.ts

@@ -0,0 +1,11 @@
+import type { KButtonProps, KButtonSlots } from './types';
+type __VLS_Slots = KButtonSlots;
+declare const __VLS_base: import("vue").DefineComponent<KButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<KButtonProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/components/Button/types.d.ts

@@ -0,0 +1,17 @@
+import type { RouteLocationRaw } from 'vue-router';
+import type { Variant } from '../../types';
+export type KButtonType = 'button' | 'submit' | 'reset';
+export type KButtonProps = {
+    disabled?: boolean;
+    expanded?: boolean;
+    ghost?: boolean;
+    href?: string;
+    outline?: boolean;
+    rounded?: boolean;
+    to?: RouteLocationRaw;
+    type?: KButtonType;
+    variant?: Variant;
+};
+export type KButtonSlots = {
+    default?(): any;
+};

package/dist/types/components/Input/KInput.vue.d.ts

@@ -0,0 +1,20 @@
+import type { KInputProps, KInputSlots } from './types';
+type __VLS_Props = KInputProps;
+type __VLS_Slots = KInputSlots;
+type __VLS_ModelProps = {
+    modelValue?: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/components/Input/types.d.ts

@@ -0,0 +1,13 @@
+export type KInputSlots = {
+    prefix?(): any;
+    suffix?(): any;
+};
+export type KInputProps = {
+    disabled?: boolean;
+    ghost?: boolean;
+    placeholder?: string;
+    rounded?: boolean;
+    sunken?: boolean;
+    transparent?: boolean;
+    type?: string;
+};

package/dist/types/components/index.d.ts

@@ -1,4 +1,6 @@
+export { default as KButton } from './Button/KButton.vue';
 export { default as KContainer } from './Container/KContainer.vue';
 export { default as KIcon } from './Icon/KIcon.vue';
+export { default as KInput } from './Input/KInput.vue';
 export { default as KNavbar } from './Navbar/KNavbar.vue';
 export { default as KNavbarMenu } from './Navbar/KNavbarMenu.vue';

package/dist/types/components/types.d.ts

@@ -1,3 +1,5 @@
+export * from './Button/types';
 export * from './Container/types';
 export * from './Icon/types';
+export * from './Input/types';
 export * from './Navbar/types';

package/dist/types/stories/KBadge.stories.d.ts

@@ -0,0 +1,104 @@
+import type { StoryObj } from '@storybook/vue3-vite';
+declare const meta: {
+    title: string;
+    component: {
+        new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("../components/Badge/types.js").KBadgeProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {}, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+            P: {};
+            B: {};
+            D: {};
+            C: {};
+            M: {};
+            Defaults: {};
+        }, Readonly<import("../components/Badge/types.js").KBadgeProps> & Readonly<{}>, {}, {}, {}, {}, {}>;
+        __isFragment?: never;
+        __isTeleport?: never;
+        __isSuspense?: never;
+    } & import("vue").ComponentOptionsBase<Readonly<import("../components/Badge/types.js").KBadgeProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+        $slots: {
+            default?: (props: {}) => any;
+        };
+    });
+    tags: string[];
+    argTypes: {
+        variant: {
+            control: "select";
+            options: string[];
+        };
+        size: {
+            control: "select";
+            options: string[];
+        };
+    };
+    render: (args: import("@storybook/vue3-vite").ComponentPropsAndSlots<{
+        new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("../components/Badge/types.js").KBadgeProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {}, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+            P: {};
+            B: {};
+            D: {};
+            C: {};
+            M: {};
+            Defaults: {};
+        }, Readonly<import("../components/Badge/types.js").KBadgeProps> & Readonly<{}>, {}, {}, {}, {}, {}>;
+        __isFragment?: never;
+        __isTeleport?: never;
+        __isSuspense?: never;
+    } & import("vue").ComponentOptionsBase<Readonly<import("../components/Badge/types.js").KBadgeProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+        $slots: {
+            default?: (props: {}) => any;
+        };
+    })>) => {
+        components: {
+            KBadge: {
+                new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("../components/Badge/types.js").KBadgeProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {}, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+                    P: {};
+                    B: {};
+                    D: {};
+                    C: {};
+                    M: {};
+                    Defaults: {};
+                }, Readonly<import("../components/Badge/types.js").KBadgeProps> & Readonly<{}>, {}, {}, {}, {}, {}>;
+                __isFragment?: never;
+                __isTeleport?: never;
+                __isSuspense?: never;
+            } & import("vue").ComponentOptionsBase<Readonly<import("../components/Badge/types.js").KBadgeProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+                $slots: {
+                    default?: (props: {}) => any;
+                };
+            });
+        };
+        setup(this: void): {
+            args: import("@storybook/vue3-vite").ComponentPropsAndSlots<{
+                new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("../components/Badge/types.js").KBadgeProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {}, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+                    P: {};
+                    B: {};
+                    D: {};
+                    C: {};
+                    M: {};
+                    Defaults: {};
+                }, Readonly<import("../components/Badge/types.js").KBadgeProps> & Readonly<{}>, {}, {}, {}, {}, {}>;
+                __isFragment?: never;
+                __isTeleport?: never;
+                __isSuspense?: never;
+            } & import("vue").ComponentOptionsBase<Readonly<import("../components/Badge/types.js").KBadgeProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+                $slots: {
+                    default?: (props: {}) => any;
+                };
+            })>;
+        };
+        template: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Brand: Story;
+export declare const Success: Story;
+export declare const Info: Story;
+export declare const Attention: Story;
+export declare const Danger: Story;
+export declare const Pill: Story;
+export declare const Subtle: Story;
+export declare const SubtlePill: Story;
+export declare const Small: Story;
+export declare const Large: Story;
+export declare const AllVariants: Story;
+export declare const AllVariantsSubtle: Story;

package/dist/types/stories/KButton.stories.d.ts

@@ -0,0 +1,117 @@
+import type { StoryObj } from '@storybook/vue3-vite';
+declare const meta: {
+    title: string;
+    component: {
+        new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("../index.js").KButtonProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {}, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+            P: {};
+            B: {};
+            D: {};
+            C: {};
+            M: {};
+            Defaults: {};
+        }, Readonly<import("../index.js").KButtonProps> & Readonly<{}>, {}, {}, {}, {}, {}>;
+        __isFragment?: never;
+        __isTeleport?: never;
+        __isSuspense?: never;
+    } & import("vue").ComponentOptionsBase<Readonly<import("../index.js").KButtonProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+        $slots: import("../index.js").KButtonSlots;
+    });
+    tags: string[];
+    argTypes: {
+        variant: {
+            control: "select";
+            options: string[];
+        };
+        type: {
+            control: "select";
+            options: string[];
+        };
+        outline: {
+            control: "boolean";
+        };
+        ghost: {
+            control: "boolean";
+        };
+        rounded: {
+            control: "boolean";
+        };
+        expanded: {
+            control: "boolean";
+        };
+        disabled: {
+            control: "boolean";
+        };
+    };
+    render: (args: import("@storybook/vue3-vite").ComponentPropsAndSlots<{
+        new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("../index.js").KButtonProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {}, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+            P: {};
+            B: {};
+            D: {};
+            C: {};
+            M: {};
+            Defaults: {};
+        }, Readonly<import("../index.js").KButtonProps> & Readonly<{}>, {}, {}, {}, {}, {}>;
+        __isFragment?: never;
+        __isTeleport?: never;
+        __isSuspense?: never;
+    } & import("vue").ComponentOptionsBase<Readonly<import("../index.js").KButtonProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+        $slots: import("../index.js").KButtonSlots;
+    })>) => {
+        components: {
+            KButton: {
+                new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("../index.js").KButtonProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {}, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+                    P: {};
+                    B: {};
+                    D: {};
+                    C: {};
+                    M: {};
+                    Defaults: {};
+                }, Readonly<import("../index.js").KButtonProps> & Readonly<{}>, {}, {}, {}, {}, {}>;
+                __isFragment?: never;
+                __isTeleport?: never;
+                __isSuspense?: never;
+            } & import("vue").ComponentOptionsBase<Readonly<import("../index.js").KButtonProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+                $slots: import("../index.js").KButtonSlots;
+            });
+        };
+        setup(this: void): {
+            args: import("@storybook/vue3-vite").ComponentPropsAndSlots<{
+                new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("../index.js").KButtonProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {}, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+                    P: {};
+                    B: {};
+                    D: {};
+                    C: {};
+                    M: {};
+                    Defaults: {};
+                }, Readonly<import("../index.js").KButtonProps> & Readonly<{}>, {}, {}, {}, {}, {}>;
+                __isFragment?: never;
+                __isTeleport?: never;
+                __isSuspense?: never;
+            } & import("vue").ComponentOptionsBase<Readonly<import("../index.js").KButtonProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+                $slots: import("../index.js").KButtonSlots;
+            })>;
+        };
+        template: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Brand: Story;
+export declare const Success: Story;
+export declare const Info: Story;
+export declare const Attention: Story;
+export declare const Danger: Story;
+export declare const Outline: Story;
+export declare const OutlineBrand: Story;
+export declare const Ghost: Story;
+export declare const GhostBrand: Story;
+export declare const Rounded: Story;
+export declare const Expanded: Story;
+export declare const Disabled: Story;
+export declare const AsLink: Story;
+export declare const AsRouterLink: Story;
+export declare const AllVariants: Story;
+export declare const AllVariantsOutline: Story;
+export declare const AllVariantsGhost: Story;
+export declare const AllStyles: Story;

package/dist/types/stories/KContainer.stories.d.ts

@@ -0,0 +1,84 @@
+import type { StoryObj } from '@storybook/vue3-vite';
+declare const meta: {
+    title: string;
+    component: {
+        new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("../index.js").KContainerProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {}, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+            P: {};
+            B: {};
+            D: {};
+            C: {};
+            M: {};
+            Defaults: {};
+        }, Readonly<import("../index.js").KContainerProps> & Readonly<{}>, {}, {}, {}, {}, {}>;
+        __isFragment?: never;
+        __isTeleport?: never;
+        __isSuspense?: never;
+    } & import("vue").ComponentOptionsBase<Readonly<import("../index.js").KContainerProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+        $slots: {
+            default?: (props: {}) => any;
+        };
+    });
+    tags: string[];
+    render: (args: import("@storybook/vue3-vite").ComponentPropsAndSlots<{
+        new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("../index.js").KContainerProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {}, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+            P: {};
+            B: {};
+            D: {};
+            C: {};
+            M: {};
+            Defaults: {};
+        }, Readonly<import("../index.js").KContainerProps> & Readonly<{}>, {}, {}, {}, {}, {}>;
+        __isFragment?: never;
+        __isTeleport?: never;
+        __isSuspense?: never;
+    } & import("vue").ComponentOptionsBase<Readonly<import("../index.js").KContainerProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+        $slots: {
+            default?: (props: {}) => any;
+        };
+    })>) => {
+        components: {
+            KContainer: {
+                new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("../index.js").KContainerProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {}, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+                    P: {};
+                    B: {};
+                    D: {};
+                    C: {};
+                    M: {};
+                    Defaults: {};
+                }, Readonly<import("../index.js").KContainerProps> & Readonly<{}>, {}, {}, {}, {}, {}>;
+                __isFragment?: never;
+                __isTeleport?: never;
+                __isSuspense?: never;
+            } & import("vue").ComponentOptionsBase<Readonly<import("../index.js").KContainerProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+                $slots: {
+                    default?: (props: {}) => any;
+                };
+            });
+        };
+        setup(this: void): {
+            args: import("@storybook/vue3-vite").ComponentPropsAndSlots<{
+                new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("../index.js").KContainerProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {}, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+                    P: {};
+                    B: {};
+                    D: {};
+                    C: {};
+                    M: {};
+                    Defaults: {};
+                }, Readonly<import("../index.js").KContainerProps> & Readonly<{}>, {}, {}, {}, {}, {}>;
+                __isFragment?: never;
+                __isTeleport?: never;
+                __isSuspense?: never;
+            } & import("vue").ComponentOptionsBase<Readonly<import("../index.js").KContainerProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+                $slots: {
+                    default?: (props: {}) => any;
+                };
+            })>;
+        };
+        template: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Glassy: Story;
+export declare const WithRichContent: Story;

package/dist/types/stories/KInput.stories.d.ts

@@ -0,0 +1,172 @@
+import type { StoryObj } from '@storybook/vue3-vite';
+declare const meta: {
+    title: string;
+    component: {
+        new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("../index.js").KInputProps & {
+            modelValue?: string;
+        }> & Readonly<{
+            "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+        }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+            "update:modelValue": (value: string | undefined) => any;
+        }, import("vue").PublicProps, {}, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+            P: {};
+            B: {};
+            D: {};
+            C: {};
+            M: {};
+            Defaults: {};
+        }, Readonly<import("../index.js").KInputProps & {
+            modelValue?: string;
+        }> & Readonly<{
+            "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+        }>, {}, {}, {}, {}, {}>;
+        __isFragment?: never;
+        __isTeleport?: never;
+        __isSuspense?: never;
+    } & import("vue").ComponentOptionsBase<Readonly<import("../index.js").KInputProps & {
+        modelValue?: string;
+    }> & Readonly<{
+        "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+    }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+        "update:modelValue": (value: string | undefined) => any;
+    }, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+        $slots: import("../index.js").KInputSlots;
+    });
+    tags: string[];
+    argTypes: {
+        type: {
+            control: "text";
+        };
+        disabled: {
+            control: "boolean";
+        };
+        rounded: {
+            control: "boolean";
+        };
+        sunken: {
+            control: "boolean";
+        };
+        ghost: {
+            control: "boolean";
+        };
+        transparent: {
+            control: "boolean";
+        };
+        'onUpdate:modelValue': {
+            action: string;
+        };
+    };
+    render: (args: import("@storybook/vue3-vite").ComponentPropsAndSlots<{
+        new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("../index.js").KInputProps & {
+            modelValue?: string;
+        }> & Readonly<{
+            "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+        }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+            "update:modelValue": (value: string | undefined) => any;
+        }, import("vue").PublicProps, {}, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+            P: {};
+            B: {};
+            D: {};
+            C: {};
+            M: {};
+            Defaults: {};
+        }, Readonly<import("../index.js").KInputProps & {
+            modelValue?: string;
+        }> & Readonly<{
+            "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+        }>, {}, {}, {}, {}, {}>;
+        __isFragment?: never;
+        __isTeleport?: never;
+        __isSuspense?: never;
+    } & import("vue").ComponentOptionsBase<Readonly<import("../index.js").KInputProps & {
+        modelValue?: string;
+    }> & Readonly<{
+        "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+    }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+        "update:modelValue": (value: string | undefined) => any;
+    }, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+        $slots: import("../index.js").KInputSlots;
+    })>) => {
+        components: {
+            KInput: {
+                new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("../index.js").KInputProps & {
+                    modelValue?: string;
+                }> & Readonly<{
+                    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+                }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+                    "update:modelValue": (value: string | undefined) => any;
+                }, import("vue").PublicProps, {}, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+                    P: {};
+                    B: {};
+                    D: {};
+                    C: {};
+                    M: {};
+                    Defaults: {};
+                }, Readonly<import("../index.js").KInputProps & {
+                    modelValue?: string;
+                }> & Readonly<{
+                    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+                }>, {}, {}, {}, {}, {}>;
+                __isFragment?: never;
+                __isTeleport?: never;
+                __isSuspense?: never;
+            } & import("vue").ComponentOptionsBase<Readonly<import("../index.js").KInputProps & {
+                modelValue?: string;
+            }> & Readonly<{
+                "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+            }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+                "update:modelValue": (value: string | undefined) => any;
+            }, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+                $slots: import("../index.js").KInputSlots;
+            });
+        };
+        setup(this: void): {
+            args: import("@storybook/vue3-vite").ComponentPropsAndSlots<{
+                new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("../index.js").KInputProps & {
+                    modelValue?: string;
+                }> & Readonly<{
+                    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+                }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+                    "update:modelValue": (value: string | undefined) => any;
+                }, import("vue").PublicProps, {}, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+                    P: {};
+                    B: {};
+                    D: {};
+                    C: {};
+                    M: {};
+                    Defaults: {};
+                }, Readonly<import("../index.js").KInputProps & {
+                    modelValue?: string;
+                }> & Readonly<{
+                    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+                }>, {}, {}, {}, {}, {}>;
+                __isFragment?: never;
+                __isTeleport?: never;
+                __isSuspense?: never;
+            } & import("vue").ComponentOptionsBase<Readonly<import("../index.js").KInputProps & {
+                modelValue?: string;
+            }> & Readonly<{
+                "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+            }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+                "update:modelValue": (value: string | undefined) => any;
+            }, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+                $slots: import("../index.js").KInputSlots;
+            })>;
+            value: import("vue").Ref<string, string>;
+        };
+        template: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithPlaceholder: Story;
+export declare const Disabled: Story;
+export declare const Rounded: Story;
+export declare const Sunken: Story;
+export declare const Ghost: Story;
+export declare const Transparent: Story;
+export declare const WithPrefix: Story;
+export declare const WithSuffix: Story;
+export declare const WithBothAddons: Story;
+export declare const AllVariants: Story;

package/dist/types/stories/KNavbar.stories.d.ts

@@ -0,0 +1,67 @@
+import type { StoryObj } from '@storybook/vue3-vite';
+declare const meta: {
+    title: string;
+    component: {
+        new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("../index.js").KNavbarProps & {
+            expanded?: boolean;
+        }> & Readonly<{
+            onToggle?: ((value: boolean) => any) | undefined;
+            "onUpdate:expanded"?: ((value: boolean) => any) | undefined;
+        }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+            "update:expanded": (value: boolean) => any;
+        } & {
+            toggle: (value: boolean) => any;
+        }, import("vue").PublicProps, {}, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+            P: {};
+            B: {};
+            D: {};
+            C: {};
+            M: {};
+            Defaults: {};
+        }, Readonly<import("../index.js").KNavbarProps & {
+            expanded?: boolean;
+        }> & Readonly<{
+            onToggle?: ((value: boolean) => any) | undefined;
+            "onUpdate:expanded"?: ((value: boolean) => any) | undefined;
+        }>, {}, {}, {}, {}, {}>;
+        __isFragment?: never;
+        __isTeleport?: never;
+        __isSuspense?: never;
+    } & import("vue").ComponentOptionsBase<Readonly<import("../index.js").KNavbarProps & {
+        expanded?: boolean;
+    }> & Readonly<{
+        onToggle?: ((value: boolean) => any) | undefined;
+        "onUpdate:expanded"?: ((value: boolean) => any) | undefined;
+    }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+        "update:expanded": (value: boolean) => any;
+    } & {
+        toggle: (value: boolean) => any;
+    }, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+        $slots: import("../index.js").KNavbarSlots;
+    });
+    tags: string[];
+    argTypes: {
+        fixed: {
+            control: "boolean";
+        };
+        hideToggle: {
+            control: "boolean";
+        };
+        'onUpdate:expanded': {
+            action: string;
+        };
+        onToggle: {
+            action: string;
+        };
+    };
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Expanded: Story;
+export declare const WithBrandSlot: Story;
+export declare const WithFooterSlot: Story;
+export declare const NoToggle: Story;

package/dist/types/stories/KNavbarMenu.stories.d.ts

@@ -0,0 +1,99 @@
+import type { StoryObj } from '@storybook/vue3-vite';
+import type { MenuItem } from '../components/Navbar/types';
+declare const meta: {
+    title: string;
+    component: {
+        new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("../index.js").KNavbarMenuProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {}, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+            P: {};
+            B: {};
+            D: {};
+            C: {};
+            M: {};
+            Defaults: {};
+        }, Readonly<import("../index.js").KNavbarMenuProps> & Readonly<{}>, {}, {}, {}, {}, {}>;
+        __isFragment?: never;
+        __isTeleport?: never;
+        __isSuspense?: never;
+    } & import("vue").ComponentOptionsBase<Readonly<import("../index.js").KNavbarMenuProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+        $slots: {
+            item?: (props: {
+                item: MenuItem;
+            }) => any;
+        };
+    });
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+    render: (args: import("@storybook/vue3-vite").ComponentPropsAndSlots<{
+        new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("../index.js").KNavbarMenuProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {}, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+            P: {};
+            B: {};
+            D: {};
+            C: {};
+            M: {};
+            Defaults: {};
+        }, Readonly<import("../index.js").KNavbarMenuProps> & Readonly<{}>, {}, {}, {}, {}, {}>;
+        __isFragment?: never;
+        __isTeleport?: never;
+        __isSuspense?: never;
+    } & import("vue").ComponentOptionsBase<Readonly<import("../index.js").KNavbarMenuProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+        $slots: {
+            item?: (props: {
+                item: MenuItem;
+            }) => any;
+        };
+    })>) => {
+        components: {
+            KNavbarMenu: {
+                new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("../index.js").KNavbarMenuProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {}, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+                    P: {};
+                    B: {};
+                    D: {};
+                    C: {};
+                    M: {};
+                    Defaults: {};
+                }, Readonly<import("../index.js").KNavbarMenuProps> & Readonly<{}>, {}, {}, {}, {}, {}>;
+                __isFragment?: never;
+                __isTeleport?: never;
+                __isSuspense?: never;
+            } & import("vue").ComponentOptionsBase<Readonly<import("../index.js").KNavbarMenuProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+                $slots: {
+                    item?: (props: {
+                        item: MenuItem;
+                    }) => any;
+                };
+            });
+        };
+        setup(this: void): {
+            args: import("@storybook/vue3-vite").ComponentPropsAndSlots<{
+                new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("../index.js").KNavbarMenuProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {}, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+                    P: {};
+                    B: {};
+                    D: {};
+                    C: {};
+                    M: {};
+                    Defaults: {};
+                }, Readonly<import("../index.js").KNavbarMenuProps> & Readonly<{}>, {}, {}, {}, {}, {}>;
+                __isFragment?: never;
+                __isTeleport?: never;
+                __isSuspense?: never;
+            } & import("vue").ComponentOptionsBase<Readonly<import("../index.js").KNavbarMenuProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+                $slots: {
+                    item?: (props: {
+                        item: MenuItem;
+                    }) => any;
+                };
+            })>;
+        };
+        template: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const FlatItems: Story;
+export declare const WithBadges: Story;
+export declare const NestedItems: Story;
+export declare const NoIcons: Story;
+export declare const ClickHandlers: Story;

package/dist/types/utils/capitalize.d.ts

@@ -0,0 +1 @@
+export declare function capitalize(value: string): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@knitify/vue",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "description": "",
   "author": "",
   "license": "ISC",
@@ -12,16 +12,18 @@
     "dist"
   ],
   "devDependencies": {
+    "@storybook/vue3-vite": "^10.4.0",
     "@vitejs/plugin-vue": "^6.0.4",
+    "storybook": "^10.4.0",
     "typescript": "^5.9.3",
     "vite": "^7.3.1",
     "vue": "^3.5.12",
     "vue-router": "^4.0.3",
     "vue-tsc": "^3.2.5",
-    "@knitify/core": "1.0.10"
+    "@knitify/core": "1.0.11"
   },
   "peerDependencies": {
-    "@knitify/core": "^1.0.1",
+    "@knitify/core": "^1.0.10",
     "vue": "^3.5.12",
     "vue-router": "^4.0.3"
   },
@@ -31,6 +33,8 @@
   "scripts": {
     "dev": "vite --mode development",
     "build": "vite build",
-    "compile": "vite build && vue-tsc --declaration --emitDeclarationOnly"
+    "compile": "vite build && vue-tsc --declaration --emitDeclarationOnly",
+    "storybook": "storybook dev -p 6006",
+    "storybook:build": "storybook build"
   }
 }