paket-ui 0.1.0 → 0.1.2

package/dist/runtime/components/navbar/Navbar.vue

@@ -0,0 +1,56 @@
+<script setup>
+import { cn } from "../../lib/utils";
+import useSidebar from "../../composables/useSidebar";
+const { collapsed, collapsedMobile } = useSidebar();
+</script>
+
+<template>
+  <div
+    :class="
+  cn(
+    'bg-layer h-navbar fixed z-60 top-0 left-0 right-0 py-1.5 transform lg:grid px-2 lg:py-0 lg:pr-2.5 lg:pl-0',
+    {
+      'lg:left-14': collapsed && !collapsedMobile,
+      'lg:left-64': !collapsed && !collapsedMobile,
+      'w-full': collapsedMobile
+    }
+  )
+"
+  >
+    <div class="container mx-auto grid">
+      <slot />
+    </div>
+  </div>
+  <div
+    class="hidden lg:block pointer-events-none lg:fixed top-navbar right-0 h-4 z-5"
+    :class="{
+  'lg:left-14': collapsed && !collapsedMobile,
+  'lg:left-64': !collapsed && !collapsedMobile,
+  'w-full': collapsedMobile
+}"
+  >
+    <span
+      class="bg-surface-container-high absolute top-0 right-0 left-3.5 pointer-events-none h-px"
+    ></span>
+    <svg
+      class="absolute top-0 left-0 rotate-180 text-layer"
+      width="16"
+      height="16"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <!-- Red filled area -->
+      <path
+        d="M 16 0 L 16 16 L 0 16 A 16 16 0 0 0 16 0 Z"
+        fill="currentColor"
+      />
+      <!-- Border ONLY on the curve -->
+      <path
+        d="M 16 0 A 16 16 0 0 1 0 16"
+        fill="none"
+        class="text-surface-container-high"
+        stroke="currentColor"
+        stroke-width="1"
+      />
+    </svg>
+  </div>
+</template>

package/dist/runtime/components/navbar/Navbar.vue.d.ts

@@ -0,0 +1,13 @@
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, 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/runtime/components/navbar/NavbarMenus.d.vue.ts

@@ -0,0 +1,19 @@
+declare var __VLS_13: {
+    collapsed: boolean;
+}, __VLS_15: {}, __VLS_17: {};
+type __VLS_Slots = {} & {
+    logo?: (props: typeof __VLS_13) => any;
+} & {
+    search?: (props: typeof __VLS_15) => any;
+} & {
+    shortcuts?: (props: typeof __VLS_17) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, 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/runtime/components/navbar/NavbarMenus.vue

@@ -0,0 +1,34 @@
+<template>
+  <div
+    class="grid grid-cols-4 lg:flex lg:justify-between lg:gap-10 items-center"
+  >
+    <Button
+      class="p-0 lg:hidden inline-flex border-none w-12 h-12 justify-center items-center"
+      :icon="
+  collapsedMobile ? 'material-symbols:close' : 'material-symbols:menu'
+"
+      variant="outline"
+      @click="toggle()"
+    />
+
+    <Link
+      :to="'/'"
+      class="col-span-2 flex justify-center items-center h-full lg:hidden"
+    >
+      <slot name="logo" :collapsed="collapsed && !collapsedMobile" />
+    </Link>
+
+    <slot name="search" />
+
+    <div class="flex justify-end items-center gap-2.5">
+      <slot name="shortcuts" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import Button from "../button/Button.vue";
+import useSidebar from "../../composables/useSidebar";
+import Link from "../link/Link.vue";
+const { collapsed, collapsedMobile, toggle } = useSidebar();
+</script>

package/dist/runtime/components/navbar/NavbarMenus.vue.d.ts

@@ -0,0 +1,19 @@
+declare var __VLS_13: {
+    collapsed: boolean;
+}, __VLS_15: {}, __VLS_17: {};
+type __VLS_Slots = {} & {
+    logo?: (props: typeof __VLS_13) => any;
+} & {
+    search?: (props: typeof __VLS_15) => any;
+} & {
+    shortcuts?: (props: typeof __VLS_17) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, 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/runtime/components/navbar/NavbarSearch.d.vue.ts

@@ -0,0 +1,18 @@
+import type { NavigationMenu } from '../../types/navigation.js';
+type __VLS_Props = {
+    menus: NavigationMenu[];
+    filter?: (menu: NavigationMenu) => NavigationMenu | undefined;
+};
+declare var __VLS_35: {};
+type __VLS_Slots = {} & {
+    results?: (props: typeof __VLS_35) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & 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/runtime/components/navbar/NavbarSearch.vue

@@ -0,0 +1,78 @@
+<template>
+  <Transition v-if="isOpen" name="page" appear>
+    <div class="fixed z-10 h-screen black-opacity"></div>
+  </Transition>
+
+  <ComboboxRoot
+    ref="search-container"
+    v-model:open="isOpen"
+    class="hidden relative lg:grid lg:grow z-20"
+    :ignore-filter="true"
+    reset-model-value-on-clear
+  >
+    <NavbarSearchInput ref="search" v-model:keyword="keyword" />
+
+    <ComboboxContent
+      class="absolute top-full w-full mt-2 bg-background dark:bg-surface-container border border-outline-variant text-onSurface rounded-lg p-4 max-h-72 overflow-auto navbarSearchItem"
+    >
+      <template v-if="keyword.length">
+        <NavbarSearchResults
+          v-if="searchedMenus.length > 0 && keyword.length > 0"
+          :menus="searchedMenus"
+          @on-select="handleEscKeyDown"
+        />
+
+        <slot name="results" />
+      </template>
+    </ComboboxContent>
+  </ComboboxRoot>
+</template>
+
+<script setup>
+import { useMagicKeys, whenever } from "@vueuse/core";
+import { ComboboxContent, ComboboxRoot } from "reka-ui";
+import { computed, ref, useTemplateRef } from "vue";
+import NavbarSearchInput from "./NavbarSearchInput.vue";
+import NavbarSearchResults from "./NavbarSearchResults.vue";
+const props = defineProps({
+  menus: { type: Array, required: true },
+  filter: { type: Function, required: false }
+});
+const keyword = ref("");
+const isOpen = ref(false);
+const isFocusField = ref(false);
+const search = useTemplateRef("search");
+const { ctrl_k, meta_k } = useMagicKeys({
+  passive: false,
+  onEventFired: (e) => {
+    if ((e.ctrlKey || e.metaKey) && (e.key === "k" || e.key === "K") && e.type === "keydown") {
+      e.preventDefault();
+    }
+  }
+});
+whenever(
+  () => ctrl_k?.value || meta_k?.value || false,
+  () => isFocusField.value = true
+);
+const searchedMenus = computed(() => {
+  const kw = keyword.value.toLowerCase().replace(/[^a-z0-9]/gi, "");
+  return props.menus.flatMap((menu) => {
+    const subMenus = (menu.submenus ?? []).map((item) => ({
+      ...item,
+      icon: menu.icon
+    }));
+    return [menu, ...subMenus];
+  }).filter((menu) => props.filter ? props.filter(menu) : menu).filter((menu) => {
+    if (menu.path === "") return;
+    const title = menu.title.toLowerCase().replace(/[^a-z0-9]/gi, "");
+    const desc = menu.description?.toLowerCase() ?? "".replace(/[^a-z0-9]/gi, "");
+    const path = menu.path?.toLowerCase();
+    return title.includes(kw) || desc.includes(kw) || path?.includes(kw);
+  });
+});
+const handleEscKeyDown = () => {
+  keyword.value = "";
+  isOpen.value = false;
+  search.value?.inputRef?.$el.blur();
+};
+</script>

package/dist/runtime/components/navbar/NavbarSearch.vue.d.ts

@@ -0,0 +1,18 @@
+import type { NavigationMenu } from '../../types/navigation.js';
+type __VLS_Props = {
+    menus: NavigationMenu[];
+    filter?: (menu: NavigationMenu) => NavigationMenu | undefined;
+};
+declare var __VLS_35: {};
+type __VLS_Slots = {} & {
+    results?: (props: typeof __VLS_35) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & 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/runtime/components/navbar/NavbarSearchInput.d.vue.ts

@@ -0,0 +1,133 @@
+type __VLS_Props = {
+    focus?: boolean;
+    keyword: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    inputRef: import("vue").Ref<({
+        $: import("vue").ComponentInternalInstance;
+        $data: {};
+        $props: {
+            readonly displayValue?: ((val: any) => string) | undefined;
+            readonly modelValue?: string | undefined;
+            readonly autoFocus?: boolean | undefined;
+            readonly disabled?: boolean | undefined;
+            readonly asChild?: boolean | undefined;
+            readonly as?: (import("reka-ui").AsTag | import("vue").Component) | undefined;
+            readonly "onUpdate:modelValue"?: ((args_0: string) => any) | undefined | undefined;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: import("vue").Slot<any> | undefined;
+        }>;
+        $root: import("vue").ComponentPublicInstance | null;
+        $parent: import("vue").ComponentPublicInstance | null;
+        $host: Element | null;
+        $emit: (event: "update:modelValue", args_0: string) => void;
+        $el: any;
+        $options: import("vue").ComponentOptionsBase<Readonly<import("reka-ui").ComboboxInputProps> & Readonly<{
+            "onUpdate:modelValue"?: ((args_0: string) => any) | undefined;
+        }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+            "update:modelValue": (args_0: string) => any;
+        }, string, {
+            as: import("reka-ui").AsTag | import("vue").Component;
+        }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & {
+            beforeCreate?: (() => void) | (() => void)[];
+            created?: (() => void) | (() => void)[];
+            beforeMount?: (() => void) | (() => void)[];
+            mounted?: (() => void) | (() => void)[];
+            beforeUpdate?: (() => void) | (() => void)[];
+            updated?: (() => void) | (() => void)[];
+            activated?: (() => void) | (() => void)[];
+            deactivated?: (() => void) | (() => void)[];
+            beforeDestroy?: (() => void) | (() => void)[];
+            beforeUnmount?: (() => void) | (() => void)[];
+            destroyed?: (() => void) | (() => void)[];
+            unmounted?: (() => void) | (() => void)[];
+            renderTracked?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+            renderTriggered?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+            errorCaptured?: ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void)[];
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof import("vue").nextTick;
+        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import("@vue/reactivity").OnCleanup]) => any : (...args: [any, any, import("@vue/reactivity").OnCleanup]) => any, options?: import("vue").WatchOptions): import("vue").WatchStopHandle;
+    } & Readonly<{
+        as: import("reka-ui").AsTag | import("vue").Component;
+    }> & Omit<Readonly<import("reka-ui").ComboboxInputProps> & Readonly<{
+        "onUpdate:modelValue"?: ((args_0: string) => any) | undefined;
+    }>, "as"> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {} & {
+        $slots: {
+            default?: (props: {}) => any;
+        };
+    }) | null, ({
+        $: import("vue").ComponentInternalInstance;
+        $data: {};
+        $props: {
+            readonly displayValue?: ((val: any) => string) | undefined;
+            readonly modelValue?: string | undefined;
+            readonly autoFocus?: boolean | undefined;
+            readonly disabled?: boolean | undefined;
+            readonly asChild?: boolean | undefined;
+            readonly as?: (import("reka-ui").AsTag | import("vue").Component) | undefined;
+            readonly "onUpdate:modelValue"?: ((args_0: string) => any) | undefined | undefined;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: import("vue").Slot<any> | undefined;
+        }>;
+        $root: import("vue").ComponentPublicInstance | null;
+        $parent: import("vue").ComponentPublicInstance | null;
+        $host: Element | null;
+        $emit: (event: "update:modelValue", args_0: string) => void;
+        $el: any;
+        $options: import("vue").ComponentOptionsBase<Readonly<import("reka-ui").ComboboxInputProps> & Readonly<{
+            "onUpdate:modelValue"?: ((args_0: string) => any) | undefined;
+        }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+            "update:modelValue": (args_0: string) => any;
+        }, string, {
+            as: import("reka-ui").AsTag | import("vue").Component;
+        }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & {
+            beforeCreate?: (() => void) | (() => void)[];
+            created?: (() => void) | (() => void)[];
+            beforeMount?: (() => void) | (() => void)[];
+            mounted?: (() => void) | (() => void)[];
+            beforeUpdate?: (() => void) | (() => void)[];
+            updated?: (() => void) | (() => void)[];
+            activated?: (() => void) | (() => void)[];
+            deactivated?: (() => void) | (() => void)[];
+            beforeDestroy?: (() => void) | (() => void)[];
+            beforeUnmount?: (() => void) | (() => void)[];
+            destroyed?: (() => void) | (() => void)[];
+            unmounted?: (() => void) | (() => void)[];
+            renderTracked?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+            renderTriggered?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+            errorCaptured?: ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void)[];
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof import("vue").nextTick;
+        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import("@vue/reactivity").OnCleanup]) => any : (...args: [any, any, import("@vue/reactivity").OnCleanup]) => any, options?: import("vue").WatchOptions): import("vue").WatchStopHandle;
+    } & Readonly<{
+        as: import("reka-ui").AsTag | import("vue").Component;
+    }> & Omit<Readonly<import("reka-ui").ComboboxInputProps> & Readonly<{
+        "onUpdate:modelValue"?: ((args_0: string) => any) | undefined;
+    }>, "as"> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {} & {
+        $slots: {
+            default?: (props: {}) => any;
+        };
+    }) | null>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:keyword": (payload: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:keyword"?: ((payload: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/navbar/NavbarSearchInput.vue

@@ -0,0 +1,54 @@
+<template>
+  <section class="h-10 relative transform">
+    <ComboboxInput
+      id="home-search-text-field"
+      ref="inputRef"
+      v-model.trim="keyword"
+      type="text"
+      aria-autocomplete="none"
+      autocomplete="off"
+      placeholder="Cari resi, order ID, atau menu yang ingin diakses..."
+      class="w-full focus:outline-none border rounded-xl bg-layer-inner border-surface-container-high focus:ring-1 focus:ring-primary focus:border-primary text-sm h-full pr-3.5 pl-10 placeholder-outline text-on-surface"
+      @keydown.enter.prevent
+    />
+
+    <Icon
+      name="i-material-symbols-search"
+      size="20px"
+      class="absolute left-2 top-1/2 transform -translate-y-1/2 text-outline"
+    />
+
+    <div
+      class="absolute right-2.5 top-1/2 transform -translate-y-1/2 flex font-medium justify-center items-center text-outline rounded text-xs"
+      :class="{
+  'pr-2': keyword.length
+}"
+    >
+      <Icon
+        v-if="keyword.length"
+        name="i-material-symbols-close-rounded"
+        size="14px"
+        @click.prevent="keyword = ''"
+      />
+      <span v-else>{{ isAppleDevice ? "\u2318" : "Ctrl" }} + K</span>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { useVModel } from "@vueuse/core";
+import { ComboboxInput } from "reka-ui";
+import useDevice from "../../composables/useDevice";
+const props = defineProps({
+  focus: { type: Boolean, required: false },
+  keyword: { type: String, required: true }
+});
+const emits = defineEmits(["update:keyword"]);
+const inputRef = ref(null);
+const keyword = useVModel(props, "keyword", emits);
+const { isAppleDevice } = useDevice();
+defineExpose({
+  inputRef
+});
+</script>

package/dist/runtime/components/navbar/NavbarSearchInput.vue.d.ts

@@ -0,0 +1,133 @@
+type __VLS_Props = {
+    focus?: boolean;
+    keyword: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    inputRef: import("vue").Ref<({
+        $: import("vue").ComponentInternalInstance;
+        $data: {};
+        $props: {
+            readonly displayValue?: ((val: any) => string) | undefined;
+            readonly modelValue?: string | undefined;
+            readonly autoFocus?: boolean | undefined;
+            readonly disabled?: boolean | undefined;
+            readonly asChild?: boolean | undefined;
+            readonly as?: (import("reka-ui").AsTag | import("vue").Component) | undefined;
+            readonly "onUpdate:modelValue"?: ((args_0: string) => any) | undefined | undefined;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: import("vue").Slot<any> | undefined;
+        }>;
+        $root: import("vue").ComponentPublicInstance | null;
+        $parent: import("vue").ComponentPublicInstance | null;
+        $host: Element | null;
+        $emit: (event: "update:modelValue", args_0: string) => void;
+        $el: any;
+        $options: import("vue").ComponentOptionsBase<Readonly<import("reka-ui").ComboboxInputProps> & Readonly<{
+            "onUpdate:modelValue"?: ((args_0: string) => any) | undefined;
+        }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+            "update:modelValue": (args_0: string) => any;
+        }, string, {
+            as: import("reka-ui").AsTag | import("vue").Component;
+        }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & {
+            beforeCreate?: (() => void) | (() => void)[];
+            created?: (() => void) | (() => void)[];
+            beforeMount?: (() => void) | (() => void)[];
+            mounted?: (() => void) | (() => void)[];
+            beforeUpdate?: (() => void) | (() => void)[];
+            updated?: (() => void) | (() => void)[];
+            activated?: (() => void) | (() => void)[];
+            deactivated?: (() => void) | (() => void)[];
+            beforeDestroy?: (() => void) | (() => void)[];
+            beforeUnmount?: (() => void) | (() => void)[];
+            destroyed?: (() => void) | (() => void)[];
+            unmounted?: (() => void) | (() => void)[];
+            renderTracked?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+            renderTriggered?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+            errorCaptured?: ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void)[];
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof import("vue").nextTick;
+        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import("@vue/reactivity").OnCleanup]) => any : (...args: [any, any, import("@vue/reactivity").OnCleanup]) => any, options?: import("vue").WatchOptions): import("vue").WatchStopHandle;
+    } & Readonly<{
+        as: import("reka-ui").AsTag | import("vue").Component;
+    }> & Omit<Readonly<import("reka-ui").ComboboxInputProps> & Readonly<{
+        "onUpdate:modelValue"?: ((args_0: string) => any) | undefined;
+    }>, "as"> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {} & {
+        $slots: {
+            default?: (props: {}) => any;
+        };
+    }) | null, ({
+        $: import("vue").ComponentInternalInstance;
+        $data: {};
+        $props: {
+            readonly displayValue?: ((val: any) => string) | undefined;
+            readonly modelValue?: string | undefined;
+            readonly autoFocus?: boolean | undefined;
+            readonly disabled?: boolean | undefined;
+            readonly asChild?: boolean | undefined;
+            readonly as?: (import("reka-ui").AsTag | import("vue").Component) | undefined;
+            readonly "onUpdate:modelValue"?: ((args_0: string) => any) | undefined | undefined;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: import("vue").Slot<any> | undefined;
+        }>;
+        $root: import("vue").ComponentPublicInstance | null;
+        $parent: import("vue").ComponentPublicInstance | null;
+        $host: Element | null;
+        $emit: (event: "update:modelValue", args_0: string) => void;
+        $el: any;
+        $options: import("vue").ComponentOptionsBase<Readonly<import("reka-ui").ComboboxInputProps> & Readonly<{
+            "onUpdate:modelValue"?: ((args_0: string) => any) | undefined;
+        }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+            "update:modelValue": (args_0: string) => any;
+        }, string, {
+            as: import("reka-ui").AsTag | import("vue").Component;
+        }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & {
+            beforeCreate?: (() => void) | (() => void)[];
+            created?: (() => void) | (() => void)[];
+            beforeMount?: (() => void) | (() => void)[];
+            mounted?: (() => void) | (() => void)[];
+            beforeUpdate?: (() => void) | (() => void)[];
+            updated?: (() => void) | (() => void)[];
+            activated?: (() => void) | (() => void)[];
+            deactivated?: (() => void) | (() => void)[];
+            beforeDestroy?: (() => void) | (() => void)[];
+            beforeUnmount?: (() => void) | (() => void)[];
+            destroyed?: (() => void) | (() => void)[];
+            unmounted?: (() => void) | (() => void)[];
+            renderTracked?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+            renderTriggered?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+            errorCaptured?: ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void)[];
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof import("vue").nextTick;
+        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import("@vue/reactivity").OnCleanup]) => any : (...args: [any, any, import("@vue/reactivity").OnCleanup]) => any, options?: import("vue").WatchOptions): import("vue").WatchStopHandle;
+    } & Readonly<{
+        as: import("reka-ui").AsTag | import("vue").Component;
+    }> & Omit<Readonly<import("reka-ui").ComboboxInputProps> & Readonly<{
+        "onUpdate:modelValue"?: ((args_0: string) => any) | undefined;
+    }>, "as"> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {} & {
+        $slots: {
+            default?: (props: {}) => any;
+        };
+    }) | null>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:keyword": (payload: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:keyword"?: ((payload: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/navbar/NavbarSearchResults.d.vue.ts

@@ -0,0 +1,11 @@
+import type { NavigationMenu } from '../../types/navigation.js';
+type __VLS_Props = {
+    menus: NavigationMenu[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    onSelect: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onOnSelect?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/navbar/NavbarSearchResults.vue

@@ -0,0 +1,34 @@
+<script setup>
+import { ComboboxGroup, ComboboxItem, ComboboxLabel } from "reka-ui";
+import { navigateTo } from "#imports";
+defineProps({
+  menus: { type: Array, required: true }
+});
+const emits = defineEmits(["onSelect"]);
+const handleSelect = (ev, value) => {
+  ev.preventDefault();
+  emits("onSelect");
+  navigateTo(value);
+};
+</script>
+
+<template>
+  <ComboboxGroup>
+    <ComboboxLabel class="font-medium mb-3"> Akses Cepat </ComboboxLabel>
+    <ComboboxItem
+      v-for="(menu, index) in menus"
+      :key="index"
+      :value="menu.title"
+      class="flex gap-3 p-3 cursor-pointer rounded-lg relative text-sm font-semibold data-highlighted:bg-surface-container-high"
+      @select="(ev) => handleSelect(ev, menu.path)"
+    >
+      <Icon :name="menu.icon?.DEFAULT ?? ''" size="24px" />
+      <div>
+        <div class="flex items-center gap-2">
+          <span>{{ menu.title }}</span>
+        </div>
+        <p class="text-onSurfaceVariant font-normal">{{ menu.description }}</p>
+      </div>
+    </ComboboxItem>
+  </ComboboxGroup>
+</template>

package/dist/runtime/components/navbar/NavbarSearchResults.vue.d.ts

@@ -0,0 +1,11 @@
+import type { NavigationMenu } from '../../types/navigation.js';
+type __VLS_Props = {
+    menus: NavigationMenu[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    onSelect: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onOnSelect?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;