@owocow/saber-ui 0.0.7 → 0.0.8

package/dist/SaberNavigationSearch.vue_vue_type_script_setup_true_lang-BdCVvmQo.js

@@ -0,0 +1,108 @@
+import z from "@nuxt/ui/components/DashboardSearch.vue";
+import L from "@nuxt/ui/components/Button.vue";
+import P from "@nuxt/ui/components/Kbd.vue";
+import { defineComponent as V, useModel as y, computed as w, openBlock as s, createElementBlock as S, normalizeClass as u, createVNode as T, withCtx as B, createElementVNode as A, Fragment as D, renderList as F, createBlock as G, renderSlot as O, normalizeProps as R, guardReactiveProps as W, mergeModels as U } from "vue";
+const Q = /* @__PURE__ */ V({
+  name: "SaberNavigationSearch",
+  __name: "SaberNavigationSearch",
+  props: /* @__PURE__ */ U({
+    groups: {},
+    label: { default: "搜索菜单" },
+    placeholder: { default: "搜索菜单" },
+    shortcut: { default: "meta_k" },
+    kbds: { default: () => ["meta", "k"] },
+    ui: {}
+  }, {
+    open: { type: Boolean, default: !1 },
+    openModifiers: {},
+    searchTerm: { default: "" },
+    searchTermModifiers: {}
+  }),
+  emits: /* @__PURE__ */ U(["select"], ["update:open", "update:searchTerm"]),
+  setup(l, { emit: C }) {
+    const e = l, K = C, n = y(l, "open"), r = y(l, "searchTerm");
+    function M(a, t) {
+      K("select", {
+        source: "search",
+        item: a,
+        sectionKey: t.sectionKey,
+        groupKey: t.key
+      }), n.value = !1, r.value = "";
+    }
+    const N = w(
+      () => e.groups.map((a) => ({
+        id: a.key,
+        label: a.label,
+        items: a.items.map((t) => ({
+          ...t,
+          onSelect: () => M(t, a)
+        }))
+      }))
+    ), E = {
+      fuseOptions: {
+        keys: ["label", "description"],
+        useTokenSearch: !0,
+        threshold: 0.2
+      },
+      resultLimit: 12,
+      matchAllWhenSearchEmpty: !0
+    };
+    return (a, t) => {
+      var c, i, m, p, d, h, b, f, v, _;
+      const I = P, $ = L, x = z;
+      return s(), S("div", {
+        class: u((c = e.ui) == null ? void 0 : c.root)
+      }, [
+        T($, {
+          "data-testid": "search-button",
+          color: "neutral",
+          variant: "outline",
+          icon: "i-lucide-search",
+          label: e.label,
+          class: u([(m = (i = e.ui) == null ? void 0 : i.button) == null ? void 0 : m.base, (d = (p = e.ui) == null ? void 0 : p.button) == null ? void 0 : d.hover]),
+          ui: {
+            leadingIcon: (b = (h = e.ui) == null ? void 0 : h.button) == null ? void 0 : b.leadingIcon,
+            label: (v = (f = e.ui) == null ? void 0 : f.button) == null ? void 0 : v.label
+          },
+          onClick: t[0] || (t[0] = (o) => n.value = !0)
+        }, {
+          trailing: B(() => {
+            var o, g;
+            return [
+              A("span", {
+                class: u((g = (o = e.ui) == null ? void 0 : o.button) == null ? void 0 : g.trailing)
+              }, [
+                (s(!0), S(D, null, F(e.kbds, (k) => (s(), G(I, {
+                  key: k,
+                  value: k,
+                  variant: "subtle"
+                }, null, 8, ["value"]))), 128))
+              ], 2)
+            ];
+          }),
+          _: 1
+        }, 8, ["label", "class", "ui"]),
+        T(x, {
+          open: n.value,
+          "onUpdate:open": t[1] || (t[1] = (o) => n.value = o),
+          "search-term": r.value,
+          "onUpdate:searchTerm": t[2] || (t[2] = (o) => r.value = o),
+          groups: N.value,
+          shortcut: e.shortcut,
+          placeholder: e.placeholder,
+          fuse: E,
+          "color-mode": !1,
+          ui: (_ = e.ui) == null ? void 0 : _.panel
+        }, {
+          empty: B((o) => [
+            O(a.$slots, "empty", R(W(o)))
+          ]),
+          _: 3
+        }, 8, ["open", "search-term", "groups", "shortcut", "placeholder", "ui"])
+      ], 2);
+    };
+  }
+});
+export {
+  Q as _
+};

package/dist/components/SaberAppSidebar.mjs

@@ -0,0 +1,4 @@
+import { _ as f } from "../SaberAppSidebar.vue_vue_type_script_setup_true_lang-DsdFlpyM.js";
+export {
+  f as default
+};

package/dist/components/SaberNavigationSearch.mjs

@@ -0,0 +1,4 @@
+import { _ as f } from "../SaberNavigationSearch.vue_vue_type_script_setup_true_lang-BdCVvmQo.js";
+export {
+  f as default
+};

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

@@ -0,0 +1,89 @@
+import { DashboardSearchProps } from '@nuxt/ui/components/DashboardSearch.vue';
+export interface SaberNavigationItem {
+    key: string;
+    label: string;
+    value: string;
+    icon?: string;
+    description?: string;
+}
+export interface SaberNavigationGroup {
+    key: string;
+    label?: string;
+    items: SaberNavigationItem[];
+}
+export interface SaberNavigationSection {
+    key: string;
+    label: string;
+    icon?: string;
+    entryValue?: string;
+    groups: SaberNavigationGroup[];
+}
+export interface SaberNavigationSearchGroup {
+    key: string;
+    label?: string;
+    sectionKey?: string;
+    items: SaberNavigationItem[];
+}
+export type SaberNavigationSelectSource = 'direct' | 'item' | 'search';
+export interface SaberNavigationSelectPayload {
+    source: SaberNavigationSelectSource;
+    item: SaberNavigationItem;
+    sectionKey?: string;
+    groupKey?: string;
+}
+export interface SaberNavigationSearchUI {
+    root?: string;
+    button?: {
+        base?: string;
+        hover?: string;
+        leadingIcon?: string;
+        label?: string;
+        trailing?: string;
+    };
+    panel?: DashboardSearchProps['ui'];
+}
+export interface SaberAppSidebarUI {
+    root?: string;
+    header?: string;
+    logo?: string;
+    viewport?: string;
+    panel?: string;
+    sectionList?: string;
+    group?: string;
+    groupLabel?: string;
+    childList?: string;
+    nestedHeader?: string;
+    footer?: string;
+    transition?: {
+        enterActive?: string;
+        leaveActive?: string;
+        forwardEnterFrom?: string;
+        forwardLeaveTo?: string;
+        backwardEnterFrom?: string;
+        backwardLeaveTo?: string;
+    };
+    backButton?: {
+        base?: string;
+        hover?: string;
+        icon?: string;
+        label?: string;
+    };
+    sectionItem?: {
+        base?: string;
+        active?: string;
+        inactive?: string;
+        hover?: string;
+        leadingIcon?: string;
+        label?: string;
+        trailingIcon?: string;
+    };
+    childItem?: {
+        base?: string;
+        active?: string;
+        inactive?: string;
+        hover?: string;
+        leadingIcon?: string;
+        label?: string;
+    };
+    search?: SaberNavigationSearchUI;
+}

package/dist/components/navigation/SaberAppSidebar.vue.d.ts

@@ -0,0 +1,43 @@
+import { SaberAppSidebarUI, SaberNavigationSearchGroup, SaberNavigationSection, SaberNavigationSelectPayload } from './SaberAppSidebar.types';
+type __VLS_Props = {
+    sections: SaberNavigationSection[];
+    searchGroups?: SaberNavigationSearchGroup[];
+    activeKey?: string;
+    shortcut?: string;
+    ui?: SaberAppSidebarUI;
+};
+type __VLS_PublicProps = {
+    'activeSection'?: string | undefined;
+} & __VLS_Props;
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        logo?(_: {}): any;
+        'search-empty'?(_: {
+            searchTerm: string;
+        }): any;
+        footer?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    select: (payload: SaberNavigationSelectPayload) => any;
+    "section-select": (section: SaberNavigationSection) => any;
+    "update:activeSection": (value: string | undefined) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onSelect?: ((payload: SaberNavigationSelectPayload) => any) | undefined;
+    "onSection-select"?: ((section: SaberNavigationSection) => any) | undefined;
+    "onUpdate:activeSection"?: ((value: string | undefined) => any) | undefined;
+}>, {
+    shortcut: string;
+    searchGroups: SaberNavigationSearchGroup[];
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/navigation/SaberNavigationSearch.vue.d.ts

@@ -0,0 +1,49 @@
+import { SaberNavigationSearchGroup, SaberNavigationSearchUI, SaberNavigationSelectPayload } from './SaberAppSidebar.types';
+type __VLS_Props = {
+    groups: SaberNavigationSearchGroup[];
+    label?: string;
+    placeholder?: string;
+    shortcut?: string;
+    kbds?: string[];
+    ui?: SaberNavigationSearchUI;
+};
+type __VLS_PublicProps = {
+    'open'?: boolean;
+    'searchTerm'?: string;
+} & __VLS_Props;
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        empty?: (props: {
+            searchTerm: string;
+        }) => unknown;
+    }> & {
+        empty?: (props: {
+            searchTerm: string;
+        }) => unknown;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    select: (payload: SaberNavigationSelectPayload) => any;
+    "update:open": (value: boolean) => any;
+    "update:searchTerm": (value: string) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onSelect?: ((payload: SaberNavigationSelectPayload) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    "onUpdate:searchTerm"?: ((value: string) => any) | undefined;
+}>, {
+    label: string;
+    placeholder: string;
+    shortcut: string;
+    kbds: string[];
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/forms/components/fields/SaberPopSelect.vue.d.ts

@@ -17,9 +17,9 @@ declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {},
     "onUpdate:modelValue"?: ((value: any) => any) | undefined;
 }>, {
     placeholder: string;
+    multiple: boolean;
     disabled: boolean;
     clearable: boolean;
     items: PopSelectOption[];
-    multiple: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/forms/components/fields/SaberUploadImage.vue.d.ts

@@ -102,10 +102,10 @@ declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {
     "onUpdate:modelValue"?: ((value: any) => any) | undefined;
     onRemoveError?: ((error: Error, value: any) => any) | undefined;
 }>, {
+    multiple: boolean;
     disabled: boolean;
     size: string;
     dataSource: UploadImageDataSource<any>;
-    multiple: boolean;
     max: number;
     maxSize: number;
     accept: string;

package/dist/index.d.ts

@@ -8,6 +8,8 @@ import { default as SaberInfoProvider } from './components/SaberInfoProvider.vue
 import { default as SaberModalWithMobile } from './components/SaberModalWithMobile.vue';
 import { default as SaberStatus } from './components/SaberStatus.vue';
 import { default as SaberSwitchBar } from './components/SaberSwitchBar.vue';
+import { default as SaberAppSidebar } from './components/navigation/SaberAppSidebar.vue';
+import { default as SaberNavigationSearch } from './components/navigation/SaberNavigationSearch.vue';
 import { default as SaberFilterBar } from './forms/components/SaberFilterBar.vue';
 import { default as SaberFormModal } from './forms/components/SaberFormModal.vue';
 import { default as SaberModal } from './forms/components/SaberModal.vue';
@@ -31,10 +33,11 @@ export { BadgeStatus as SaberBadgeStatus };
 export type { BadgeStatusProps } from './BadgeStatus.types';
 export { SaberNoData };
 export type { SaberNoDataProps } from './SaberNoData.types';
-export { SaberConfirmModal, SaberConfirmProvider, SaberInfo, SaberInfoProvider, SaberModalWithMobile, SaberStatus, SaberSwitchBar, };
+export { SaberConfirmModal, SaberConfirmProvider, SaberInfo, SaberInfoProvider, SaberModalWithMobile, SaberAppSidebar, SaberNavigationSearch, SaberStatus, SaberSwitchBar, };
 export type { SaberInfoContext, SaberInfoMode, SaberInfoProps, SaberInfoVariant } from './components/SaberInfo.types';
 export type { SaberStatusType } from './components/SaberStatus.types';
 export type { SaberSwitchBarItem, SaberSwitchBarUI, SaberSwitchBarValue } from './components/SaberSwitchBar.types';
+export type { SaberAppSidebarUI, SaberNavigationGroup, SaberNavigationItem, SaberNavigationSearchGroup, SaberNavigationSearchUI, SaberNavigationSection, SaberNavigationSelectPayload, SaberNavigationSelectSource, } from './components/navigation/SaberAppSidebar.types';
 export { SaberFilterBar, SaberFormModal, SaberDictCheckbox, SaberDictRadio, SaberDictSelect, SaberDistrictSelect, SaberInput, SaberInputNumber, SaberModal, SaberPopSelect, SaberRadioGroup, SaberSelect, SaberTextarea, };
 export { installSaberForms, type SaberFormsOptions } from './forms/plugin';
 export type { DictDataSource, DictOption, FilterField, FormField, FormSubmitHandler, FormValidator } from './forms/types';
@@ -50,6 +53,8 @@ declare module 'vue' {
         SaberModalWithMobile: typeof SaberModalWithMobile;
         SaberStatus: typeof SaberStatus;
         SaberSwitchBar: typeof SaberSwitchBar;
+        SaberAppSidebar: typeof SaberAppSidebar;
+        SaberNavigationSearch: typeof SaberNavigationSearch;
         SaberFilterBar: typeof SaberFilterBar;
         SaberFormModal: typeof SaberFormModal;
         SaberModal: typeof SaberModal;

package/dist/index.mjs

@@ -1,22 +1,24 @@
 import h from "@nuxt/ui/vue-plugin";
 import y from "@nuxt/ui/components/Badge.vue";
-import { defineComponent as S, computed as f, openBlock as s, createBlock as $, normalizeStyle as v, withCtx as C, createTextVNode as k, toDisplayString as d, createElementBlock as i, normalizeClass as B, createElementVNode as l, createVNode as I, createCommentVNode as m, renderSlot as u } from "vue";
-import D from "@nuxt/ui/runtime/vue/components/Icon.vue";
-import { _ as N } from "./SaberConfirmModal.vue_vue_type_script_setup_true_lang-Cqp9krYl.js";
+import { defineComponent as _, computed as f, openBlock as s, createBlock as $, normalizeStyle as v, withCtx as C, createTextVNode as k, toDisplayString as d, createElementBlock as i, normalizeClass as B, createElementVNode as l, createVNode as I, createCommentVNode as m, renderSlot as u } from "vue";
+import N from "@nuxt/ui/runtime/vue/components/Icon.vue";
+import { _ as D } from "./SaberConfirmModal.vue_vue_type_script_setup_true_lang-Cqp9krYl.js";
 import { _ as M } from "./SaberConfirmProvider.vue_vue_type_script_setup_true_lang-DUJ6ftNJ.js";
 import { _ as w } from "./SaberInfo.vue_vue_type_script_setup_true_lang-B3W5VsGR.js";
 import { _ as P } from "./SaberInfoProvider.vue_vue_type_script_setup_true_lang-3rF6bSCn.js";
 import { _ as z } from "./SaberModalWithMobile.vue_vue_type_script_setup_true_lang-aQlToncY.js";
-import { _ as F } from "./SaberStatus.vue_vue_type_script_setup_true_lang-D9aRVCow.js";
-import { _ as U } from "./SaberSwitchBar.vue_vue_type_script_setup_true_lang-CDx3Dcas.js";
-import { k as V } from "./plugin-Dr3z0YFg.js";
-import { _ as ie, a as le, b as me, c as de, d as be, e as fe } from "./plugin-Dr3z0YFg.js";
-import { _ as _e } from "./SaberModal.vue_vue_type_script_setup_true_lang-DJno3jA3.js";
-import { _ as pe } from "./SaberDictCheckbox.vue_vue_type_script_setup_true_lang-DUbzy_C6.js";
-import { _ as xe, a as he } from "./SaberDictRadio.vue_vue_type_script_setup_true_lang-DR6-jSID.js";
-import { _ as $e } from "./SaberDictSelect.vue_vue_type_script_setup_true_lang-B8PTKNKX.js";
-import { _ as Ce } from "./SaberDistrictSelect.vue_vue_type_script_setup_true_lang-BX8nLC35.js";
-import { _ as Be } from "./SaberPopSelect.vue_vue_type_script_setup_true_lang-BcS27NXI.js";
+import { _ as A } from "./SaberStatus.vue_vue_type_script_setup_true_lang-D9aRVCow.js";
+import { _ as F } from "./SaberSwitchBar.vue_vue_type_script_setup_true_lang-CDx3Dcas.js";
+import { _ as U } from "./SaberAppSidebar.vue_vue_type_script_setup_true_lang-DsdFlpyM.js";
+import { _ as V } from "./SaberNavigationSearch.vue_vue_type_script_setup_true_lang-BdCVvmQo.js";
+import { k as W } from "./plugin-Dr3z0YFg.js";
+import { _ as be, a as fe, b as ue, c as Se, d as _e, e as pe } from "./plugin-Dr3z0YFg.js";
+import { _ as xe } from "./SaberModal.vue_vue_type_script_setup_true_lang-DJno3jA3.js";
+import { _ as ye } from "./SaberDictCheckbox.vue_vue_type_script_setup_true_lang-DUbzy_C6.js";
+import { _ as ve, a as Ce } from "./SaberDictRadio.vue_vue_type_script_setup_true_lang-DR6-jSID.js";
+import { _ as Be } from "./SaberDictSelect.vue_vue_type_script_setup_true_lang-B8PTKNKX.js";
+import { _ as Ne } from "./SaberDistrictSelect.vue_vue_type_script_setup_true_lang-BX8nLC35.js";
+import { _ as Me } from "./SaberPopSelect.vue_vue_type_script_setup_true_lang-BcS27NXI.js";
 const b = {
   red: { 500: "#ef4444", 600: "#dc2626" },
   orange: { 500: "#f97316", 600: "#ea580c" },
@@ -40,16 +42,16 @@ const b = {
   zinc: { 500: "#71717a", 600: "#52525b" },
   neutral: { 500: "#737373", 600: "#525252" },
   stone: { 500: "#78716c", 600: "#57534e" }
-}, W = b.gray;
-function _(e, t) {
+}, H = b.gray;
+function S(e, t) {
   var o, a;
-  return ((o = b[e]) == null ? void 0 : o[t]) ?? ((a = b[e]) == null ? void 0 : a[500]) ?? W[500];
+  return ((o = b[e]) == null ? void 0 : o[t]) ?? ((a = b[e]) == null ? void 0 : a[500]) ?? H[500];
 }
-function H(e, t) {
+function R(e, t) {
   const o = parseInt(e.slice(1, 3), 16), a = parseInt(e.slice(3, 5), 16), r = parseInt(e.slice(5, 7), 16);
   return `rgba(${o}, ${a}, ${r}, ${t / 100})`;
 }
-const R = /* @__PURE__ */ S({
+const T = /* @__PURE__ */ _({
   __name: "BadgeStatus",
   props: {
     value: {},
@@ -69,9 +71,9 @@ const R = /* @__PURE__ */ S({
       }
       return { label: r, color: "gray" };
     }), a = f(() => {
-      const { color: r } = o.value, c = _(r, 500), n = _(r, t.textColorWeight);
+      const { color: r } = o.value, c = S(r, 500), n = S(r, t.textColorWeight);
       return {
-        backgroundColor: H(c, t.bgOpacity),
+        backgroundColor: R(c, t.bgOpacity),
         color: n
       };
     });
@@ -88,10 +90,10 @@ const R = /* @__PURE__ */ S({
       }, 8, ["style"]);
     };
   }
-}), T = { class: "rounded-md border border-accented p-3" }, A = { class: "flex flex-col gap-1" }, E = { class: "text-base font-semibold mb-2 text-highlighted w-60" }, L = {
+}), E = { class: "rounded-md border border-accented p-3" }, L = { class: "flex flex-col gap-1" }, O = { class: "text-base font-semibold mb-2 text-highlighted w-60" }, j = {
   key: 0,
   class: "text-sm text-muted w-60"
-}, O = { key: 0 }, j = { key: 1 }, G = /* @__PURE__ */ S({
+}, G = { key: 0 }, K = { key: 1 }, q = /* @__PURE__ */ _({
   name: "SaberNoData",
   __name: "SaberNoData",
   props: {
@@ -103,7 +105,7 @@ const R = /* @__PURE__ */ S({
   },
   setup(e) {
     return (t, o) => {
-      const a = D;
+      const a = N;
       return s(), i("div", {
         class: B([
           "flex flex-col items-center justify-center gap-6 rounded-md p-10 text-center bg-default",
@@ -111,53 +113,55 @@ const R = /* @__PURE__ */ S({
           t.$props.class
         ])
       }, [
-        l("div", T, [
+        l("div", E, [
           I(a, {
             name: e.icon,
             class: "size-5"
           }, null, 8, ["name"])
         ]),
-        l("div", A, [
-          l("h4", E, d(e.title), 1),
-          e.description ? (s(), i("p", L, d(e.description), 1)) : m("", !0)
+        l("div", L, [
+          l("h4", O, d(e.title), 1),
+          e.description ? (s(), i("p", j, d(e.description), 1)) : m("", !0)
         ]),
-        t.$slots.default ? (s(), i("div", O, [
+        t.$slots.default ? (s(), i("div", G, [
           u(t.$slots, "default")
         ])) : m("", !0),
-        t.$slots.extra ? (s(), i("p", j, [
+        t.$slots.extra ? (s(), i("p", K, [
           u(t.$slots, "extra")
         ])) : m("", !0)
       ], 2);
     };
   }
-}), ne = {
+}), le = {
   install(e, t = {}) {
-    e.use(h), e.component("SaberBadgeStatus", R), e.component("SaberNoData", G), e.component("SaberConfirmModal", N), e.component("SaberConfirmProvider", M), e.component("SaberInfo", w), e.component("SaberInfoProvider", P), e.component("SaberModalWithMobile", z), e.component("SaberStatus", F), e.component("SaberSwitchBar", U), V(e, t.forms);
+    e.use(h), e.component("SaberBadgeStatus", T), e.component("SaberNoData", q), e.component("SaberConfirmModal", D), e.component("SaberConfirmProvider", M), e.component("SaberInfo", w), e.component("SaberInfoProvider", P), e.component("SaberModalWithMobile", z), e.component("SaberStatus", A), e.component("SaberSwitchBar", F), e.component("SaberAppSidebar", U), e.component("SaberNavigationSearch", V), W(e, t.forms);
   }
 };
 export {
-  R as SaberBadgeStatus,
-  N as SaberConfirmModal,
+  U as SaberAppSidebar,
+  T as SaberBadgeStatus,
+  D as SaberConfirmModal,
   M as SaberConfirmProvider,
-  pe as SaberDictCheckbox,
-  xe as SaberDictRadio,
-  $e as SaberDictSelect,
-  Ce as SaberDistrictSelect,
-  ie as SaberFilterBar,
-  le as SaberFormModal,
+  ye as SaberDictCheckbox,
+  ve as SaberDictRadio,
+  Be as SaberDictSelect,
+  Ne as SaberDistrictSelect,
+  be as SaberFilterBar,
+  fe as SaberFormModal,
   w as SaberInfo,
   P as SaberInfoProvider,
-  me as SaberInput,
-  de as SaberInputNumber,
-  _e as SaberModal,
+  ue as SaberInput,
+  Se as SaberInputNumber,
+  xe as SaberModal,
   z as SaberModalWithMobile,
-  G as SaberNoData,
-  Be as SaberPopSelect,
-  he as SaberRadioGroup,
-  be as SaberSelect,
-  F as SaberStatus,
-  U as SaberSwitchBar,
-  fe as SaberTextarea,
-  ne as default,
-  V as installSaberForms
+  V as SaberNavigationSearch,
+  q as SaberNoData,
+  Me as SaberPopSelect,
+  Ce as SaberRadioGroup,
+  _e as SaberSelect,
+  A as SaberStatus,
+  F as SaberSwitchBar,
+  pe as SaberTextarea,
+  le as default,
+  W as installSaberForms
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@owocow/saber-ui",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "Saber application foundation for Vue 3 projects built on Nuxt UI",
   "type": "module",
   "sideEffects": false,
@@ -100,6 +100,14 @@
       "types": "./dist/components/SaberSwitchBar.vue.d.ts",
       "import": "./dist/components/SaberSwitchBar.mjs"
     },
+    "./components/SaberAppSidebar": {
+      "types": "./dist/components/navigation/SaberAppSidebar.vue.d.ts",
+      "import": "./dist/components/SaberAppSidebar.mjs"
+    },
+    "./components/SaberNavigationSearch": {
+      "types": "./dist/components/navigation/SaberNavigationSearch.vue.d.ts",
+      "import": "./dist/components/SaberNavigationSearch.mjs"
+    },
     "./components/SaberStatus": {
       "types": "./dist/components/SaberStatus.vue.d.ts",
       "import": "./dist/components/SaberStatus.mjs"
@@ -177,7 +185,7 @@
     "dist"
   ],
   "scripts": {
-    "test": "node --test",
+    "test": "node --test && vitest run",
     "build": "vite build",
     "docs:dev": "vitepress dev docs",
     "docs:typecheck": "tsc -p docs/tsconfig.json --noEmit",
@@ -191,7 +199,8 @@
     "jsencrypt": "^3.5.4",
     "klona": "^2.0.6",
     "nanoid": "^5.1.9",
-    "ofetch": "^1.5.1"
+    "ofetch": "^1.5.1",
+    "tailwind-variants": "^3.3.0"
   },
   "peerDependencies": {
     "@nuxt/ui": "^4",
@@ -203,12 +212,15 @@
     "@types/crypto-js": "^4.2.2",
     "@types/node": "^26.1.2",
     "@vitejs/plugin-vue": "^5",
+    "@vue/test-utils": "^2.5.0",
+    "jsdom": "27.4.0",
     "tailwindcss": "^4.3.3",
     "typescript": "^5",
     "unplugin-vue-components": "^32",
     "vite": "^6",
     "vite-plugin-dts": "^4",
     "vitepress": "2.0.0-alpha.19",
+    "vitest": "^4.1.11",
     "vue": "^3.5.31",
     "vue-router": "^4.6.4"
   },