@xy-planning-network/trees 0.11.0 → 0.11.1-dev

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xy-planning-network/trees",
-  "version": "0.11.0",
+  "version": "0.11.1-dev",
   "description": "",
   "license": "MIT",
   "repository": "github:xy-planning-network/trees",
@@ -54,7 +54,7 @@
     "unplugin-vue-components": "^0.27.4",
     "unplugin-vue-markdown": "^0.25.2",
     "vite": "^5.4.10",
-    "vue-tsc": "^2.1.8"
+    "vue-tsc": "^2.1.10"
   },
   "dependencies": {
     "@floating-ui/vue": "^1.0.1",

package/src/index.css

@@ -77,6 +77,18 @@
     @apply inline-flex justify-center items-center px-5 py-2.5 border border-transparent text-base font-display font-semibold rounded-3xl shadow-sm text-white bg-xy-blue-600 hover:bg-xy-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-xy-blue-500 disabled:bg-xy-blue-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors ease-linear duration-300;
   }
 
+  .xy-btn-alt-sm {
+    @apply inline-flex justify-center items-center px-2.5 py-1.5 border border-transparent text-xs font-display font-semibold rounded-3xl shadow-sm text-xy-black bg-xy-green-200 hover:bg-xy-green-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-xy-green-100 disabled:bg-xy-green-200 disabled:opacity-50 disabled:cursor-not-allowed transition-colors ease-linear duration-300;
+  }
+
+  .xy-btn-alt {
+    @apply inline-flex justify-center items-center px-4 py-2 border border-transparent text-sm font-display font-semibold rounded-3xl shadow-sm text-xy-black bg-xy-green-200 hover:bg-xy-green-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-xy-green-100 disabled:bg-xy-green-200 disabled:opacity-50 disabled:cursor-not-allowed transition-colors ease-linear duration-300;
+  }
+
+  .xy-btn-alt-lg {
+    @apply inline-flex justify-center items-center px-5 py-2.5 border border-transparent text-base font-display font-semibold rounded-3xl shadow-sm text-xy-black bg-xy-green-200 hover:bg-xy-green-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-xy-green-100 disabled:bg-xy-green-200 disabled:opacity-50 disabled:cursor-not-allowed transition-colors ease-linear duration-300;
+  }
+
   /* NOTE(spk): including .xy-btn-red alias for backwards compatibility */
   .xy-btn-danger-sm,
   .xy-btn-red-sm {
@@ -105,6 +117,18 @@
     @apply inline-flex justify-center items-center px-5 py-2.5 border border-transparent text-base font-display font-semibold rounded-3xl shadow-none text-neutral-800 bg-transparent hover:bg-neutral-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-xy-blue-500 disabled:bg-transparent disabled:text-neutral-600 disabled:cursor-not-allowed transition-colors ease-linear duration-300;
   }
 
+  .xy-btn-neutral-inverse-sm {
+    @apply inline-flex justify-center items-center px-2.5 py-1.5 border border-transparent text-xs font-display font-semibold rounded-3xl shadow-none text-neutral-800 bg-white hover:bg-white/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-xy-blue-500 disabled:bg-white/90 disabled:text-neutral-700 disabled:cursor-not-allowed transition-colors ease-linear duration-300;
+  }
+
+  .xy-btn-neutral-inverse {
+    @apply inline-flex justify-center items-center px-4 py-2 border border-transparent text-sm font-display font-semibold rounded-3xl shadow-none text-neutral-800 bg-white hover:bg-white/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-xy-blue-500 disabled:bg-white/90 disabled:disabled:text-neutral-700 disabled:cursor-not-allowed transition-colors ease-linear duration-300;
+  }
+
+  .xy-btn-neutral-inverse-lg {
+    @apply inline-flex justify-center items-center px-5 py-2.5 border border-transparent text-base font-display font-semibold rounded-3xl shadow-none text-neutral-800 bg-white hover:bg-white/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-xy-blue-500 disabled:bg-white/90 disabled:disabled:text-neutral-700 disabled:cursor-not-allowed transition-colors ease-linear duration-300;
+  }
+
   /* NOTE(spk): always consider the relative box-sizing between buttons with solid backgrounds and full borders vs secondary styles as they will commonly be laid out next to each other */
   /* NOTE(spk): there's no way to round a ring or outline in a focus state without rounding the entire button.  Avoid this as it causes odd shapes on the bottom border and using content hacks aren't worth the trouble */
   .xy-btn-secondary-sm {
@@ -155,11 +179,6 @@
     @apply inline-flex justify-center items-center py-2.5 border-b-2 border-b-red-700 text-base font-display font-semibold shadow-none text-neutral-800 hover:text-red-700 hover:border-b-transparent focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-xy-blue-500 disabled:text-neutral-800 disabled:border-b-red-700 disabled:opacity-70 disabled:cursor-not-allowed transition-colors ease-linear duration-150;
   }
 
-  /* Deprecated */
-  .xy-btn-white {
-    @apply inline-flex justify-center items-center px-4 py-2 border border-xy-blue shadow-sm text-sm font-semibold rounded-3xl text-xy-blue bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-xy-blue-500 disabled:opacity-50 disabled:cursor-not-allowed;
-  }
-
   /* Header classes */
   .h1 {
     @apply text-3xl leading-9 font-semibold;

package/src/lib-components/forms/BaseInput.vue

@@ -9,6 +9,7 @@ import {
   emailPattern,
   looseToNumber,
   phonePattern,
+  urlPattern,
 } from "@/composables/forms"
 import type { TextLikeInput } from "@/composables/forms"
 import { computed, useTemplateRef } from "vue"
@@ -61,6 +62,10 @@ const typeAttributes = computed(() => {
       return {
         pattern: phonePattern,
       }
+    case "url":
+      return {
+        pattern: urlPattern,
+      }
     default:
       return {}
   }

package/src/lib-components/indicators/AppIcon.vue

@@ -0,0 +1,97 @@
+<script setup lang="ts">
+/**
+ * IconCircle
+ * A utility component for wrapping a Heroicon in a circle.
+ *
+ * Usage:
+ * import CircleIcon from "@/components/shared/CircleIcon.vue"
+ * import { SpeakerphoneIcon } from "@heroicons/vue/outline"
+ * <template>
+ *   <CircleIcon
+ *     :icon="SpeakerphoneIcon"
+ *     icon-color="text-white"
+ *     bg-color="bg-xy-green"
+ *   />
+ * </template>
+ */
+
+import { computed } from "vue"
+import type { Component, FunctionalComponent, RenderFunction } from "vue"
+
+// TODO: themed icons?
+
+const props = withDefaults(
+  defineProps<{
+    bgColor?: `bg-${string}`
+    iconColor?: `text-${string}`
+    icon: FunctionalComponent | Component | RenderFunction
+    indicator?: string | number | boolean
+    size?: "xs" | "sm" | "base" | "lg" | "xl"
+    type?: "circle" | "square" // TODO: squircle?
+  }>(),
+  {
+    bgColor: "bg-transparent",
+    iconColor: "text-xy-black",
+    indicator: false,
+    size: "base",
+    type: "square",
+  }
+)
+
+const size = computed(() => {
+  const sizes = {
+    xs: { bg: "w-6 h-6", icon: "w-4 h-4" },
+    sm: { bg: "w-7 h-7", icon: "w-5 h-5" },
+    base: { bg: "w-10 h-10", icon: "w-6 h-6" },
+    lg: { bg: "w-12 h-12", icon: "w-6 h-6" },
+    xl: { bg: "w-14 h-14", icon: "w-6 h-6" },
+  }
+
+  return sizes[props.size]
+})
+
+const indicatorStr = computed(() => {
+  if (!props.indicator) {
+    return ""
+  }
+
+  return ["string", "number"].includes(typeof props.indicator)
+    ? props.indicator.toString()
+    : ""
+})
+</script>
+
+<template>
+  <div
+    aria-hidden="true"
+    :class="[
+      'aspect-square leading-none relative',
+      type === 'circle' ? 'rounded-full' : 'rounded-md',
+      bgColor,
+      size.bg,
+    ]"
+  >
+    <div class="flex flex-col h-full w-full items-center justify-center">
+      <div
+        :class="[size.icon]"
+        class="flex flex-col items-center justify-center"
+      >
+        <component :is="icon" :class="iconColor" />
+        <div v-if="$slots['default']" class="sr-only">
+          <slot />
+        </div>
+      </div>
+    </div>
+
+    <!--TODO(spk): position edge cases based on content length-->
+    <div
+      v-if="props.indicator"
+      :class="[
+        'absolute top-0 right-0 block bg-xy-green text-xy-black text-xs/3 font-bold translate-x-1/4 -translate-y-1/4',
+        indicatorStr ? 'p-1 rounded-xy' : 'h-3 w-3 rounded-full',
+      ]"
+    >
+      {{ indicatorStr }}
+    </div>
+  </div>
+</template>

package/src/lib-components/layout/SidebarLayout.vue

@@ -5,23 +5,20 @@ import {
   Dialog,
   DialogOverlay,
   Menu,
-  MenuButton,
-  MenuItem,
-  MenuItems,
   TransitionChild,
   TransitionRoot,
 } from "@headlessui/vue"
 import { MenuAlt2Icon, XIcon } from "@heroicons/vue/outline"
-import { CogIcon } from "@heroicons/vue/solid"
-import type { NavItem } from "@/composables/nav"
+import type { NavItem, UserMenuItem } from "@/composables/nav"
 import { ref } from "vue"
+import UserMenu from "@/lib-components/layout/UserMenu.vue"
 
 const props = withDefaults(
   defineProps<{
     activeUrl?: string
     iconUrl: string
     navigation: NavItem[]
-    userNavigation: NavItem[]
+    userNavigation: UserMenuItem[]
   }>(),
   {
     activeUrl: "",
@@ -205,41 +202,7 @@ const isActive = (url: string): boolean => {
           <div class="ml-4 flex items-center lg:ml-6">
             <!-- Profile dropdown -->
             <Menu as="div" class="ml-3 relative">
-              <div>
-                <MenuButton
-                  class="max-w-xs flex items-center text-sm text-white rounded-full hover:bg-blue-900 hover:text-gray-50 focus:outline-none focus:ring focus:text-white"
-                >
-                  <span class="sr-only">Open user menu</span>
-                  <CogIcon class="h-8 w-8" fill="currentColor" />
-                </MenuButton>
-              </div>
-              <transition
-                enter-active-class="transition ease-out duration-100"
-                enter-from-class="transform opacity-0 scale-95"
-                enter-to-class="transform opacity-100 scale-100"
-                leave-active-class="transition ease-in duration-75"
-                leave-from-class="transform opacity-100 scale-100"
-                leave-to-class="transform opacity-0 scale-95"
-              >
-                <MenuItems
-                  class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none"
-                >
-                  <MenuItem
-                    v-for="item in userNavigation"
-                    :key="item.name"
-                    v-slot="{ active }"
-                  >
-                    <a
-                      :href="item.url"
-                      :class="[
-                        active ? 'bg-gray-100' : '',
-                        'block px-4 py-2 text-sm text-gray-700 font-semibold',
-                      ]"
-                      >{{ item.name }}</a
-                    >
-                  </MenuItem>
-                </MenuItems>
-              </transition>
+              <UserMenu :menu="userNavigation" />
             </Menu>
           </div>
         </div>

package/src/lib-components/layout/UserMenu.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { UserMenuItem } from "@/composables/nav"
+import { AppIcon } from "@/lib-components"
+import TooltipWrapper from "@/lib-components/overlays/TooltipWrapper.vue"
+import { computed } from "vue"
+
+const props = withDefaults(defineProps<{ menu?: UserMenuItem[] }>(), {
+  menu: () => [],
+})
+
+const items = computed(() => {
+  return props.menu.map((item) => {
+    const isPopover = item.action != "url"
+
+    return {
+      ...item,
+      isPopover: isPopover,
+    }
+  })
+})
+</script>
+
+<template>
+  <!--TODO: focus rings? -->
+  <div v-if="items.length > 0" class="flex items-center justify-center gap-3.5">
+    <template v-for="(item, key) in items" :key="key">
+      <div v-if="item.action === 'url'">
+        <TooltipWrapper position="bottom-end" :tooltip="item.name">
+          <a :href="item.url" target="" class="block">
+            <AppIcon
+              bg-color="bg-transparent hover:bg-black/20"
+              icon-color="text-neutral-200"
+              :icon="item.icon"
+              :indicator="item.indicator"
+              size="base"
+              type="square"
+              >{{ item.name }}</AppIcon
+            >
+          </a>
+        </TooltipWrapper>
+      </div>
+
+      <div v-else-if="item.isPopover" class="leading-none">
+        <Popover position="bottom-end">
+          <template #button>
+            <TooltipWrapper position="bottom-end" :tooltip="item.name">
+              <AppIcon
+                bg-color="bg-transparent hover:bg-black/20"
+                icon-color="text-neutral-200"
+                :icon="item.icon"
+                :indicator="item.indicator"
+                size="base"
+                >{{ item.name }}</AppIcon
+              >
+            </TooltipWrapper>
+          </template>
+
+          <template #default>
+            <PopoverContent>
+              <ul v-if="item.action === 'nav'" class="flex flex-col text-sm/6">
+                <li v-for="(nav, navKey) in item.navigation" :key="navKey">
+                  <a
+                    :href="nav.url"
+                    class="block relative rounded-lg p-4 hover:bg-gray-50"
+                  >
+                    <div class="font-semibold text-gray-900">
+                      {{ nav.name }}
+                    </div>
+                    <div v-if="nav.description" class="mt-0.5 text-gray-600">
+                      {{ nav.description }}
+                    </div>
+                  </a>
+                </li>
+              </ul>
+
+              <component
+                :is="item.component"
+                v-if="item.action === 'flyout'"
+                v-bind="item.props"
+              />
+            </PopoverContent>
+          </template>
+        </Popover>
+      </div>
+    </template>
+  </div>
+</template>

package/src/lib-components/overlays/TooltipWrapper.vue

@@ -0,0 +1,73 @@
+<script lang="ts" setup>
+import { computed, useTemplateRef } from "vue"
+import {
+  autoPlacement,
+  autoUpdate,
+  offset,
+  shift,
+  useFloating,
+  type Placement,
+} from "@floating-ui/vue"
+
+// props
+const props = withDefaults(
+  defineProps<{
+    as?: string
+    position?: Placement | "auto"
+    tooltip: string
+  }>(),
+  {
+    as: "div",
+    position: "auto",
+  }
+)
+
+// NOTE(spk): explicitly typing as useTemplateRef is unable to infer the template type.
+// https://vuejs.org/guide/typescript/composition-api.html#typing-template-refs
+const triggerRef = useTemplateRef<HTMLElement>("trigger")
+const wrapperRef = useTemplateRef<HTMLElement>("wrapper")
+const middleware = computed(() => {
+  const middleware = [offset(5), shift()]
+  if (props.position === "auto") {
+    middleware.push(autoPlacement())
+  }
+
+  return middleware
+})
+
+/**
+ * floating-ui's placement property does not support a direct "auto"
+ * mode. Passing undefined is expected when auto position is used.
+ */
+const placement = computed(() => {
+  if (props.position === "auto") {
+    return undefined
+  }
+
+  return props.position
+})
+
+const { floatingStyles } = useFloating(triggerRef, wrapperRef, {
+  middleware: middleware,
+  placement: placement,
+  strategy: "fixed",
+  whileElementsMounted: autoUpdate,
+})
+</script>
+
+<template>
+  <component :is="as" ref="trigger" class="group">
+    <slot></slot>
+    <div
+      ref="wrapper"
+      class="hidden group-hover:block z-[5]"
+      :style="floatingStyles"
+    >
+      <div
+        class="max-w-xs bg-xy-black rounded-md px-3 py-1 drop-shadow text-sm text-white leading-snug font-semibold"
+      >
+        {{ tooltip }}
+      </div>
+    </div>
+  </component>
+</template>

package/types/composables/forms.d.ts

@@ -110,6 +110,19 @@ export declare const emailPattern: string;
  * used with input type="tel" in the pattern attribute for html5 validation
  */
 export declare const phonePattern: string;
+/**
+ * url validation regex pattern
+ * used with input type="url" in the pattern attribute for html5
+ *
+ * The pattern is conservative and focuses on ensuring the protocol is valid
+ * and the remainder of the url does not include empty spaces.  If additional protocols
+ * need to be supported, they can be added to the first group (?:https|http|ftp).
+ *
+ * Reference: https://regex101.com/r/P5dlas/3
+ *
+ * NOTE(spk): not all JavaScript regular expression characters are not supported in input patterns.
+ */
+export declare const urlPattern: string;
 /**
  * This is used for the .number modifier in v-model
  */

package/types/composables/nav.d.ts

@@ -1,7 +1,28 @@
-import { Component, FunctionalComponent, MaybeRef, Ref, RenderFunction } from "vue";
+import { type Component, type FunctionalComponent, type MaybeRef, type Ref, type RenderFunction } from "vue";
+interface UserMenuItemBase {
+    indicator?: boolean | string | number;
+    icon: Component | RenderFunction;
+    name: string;
+}
+export interface UserMenuItemUrl extends UserMenuItemBase {
+    action: "url";
+    url: string;
+}
+export interface UserMenuItemNav extends UserMenuItemBase {
+    action: "nav";
+    navigation: NavItem[];
+}
+export interface UserMenuItemFlyout<T extends Component> extends UserMenuItemBase {
+    action: "flyout";
+    component: T;
+    props: Record<string, any>;
+}
+export type UserMenuItem = UserMenuItemUrl | UserMenuItemNav | UserMenuItemFlyout<Component>;
 export interface NavItem {
+    badge?: boolean | string | number;
     icon?: Component | RenderFunction;
     name: string;
+    description?: string;
     openInTab?: boolean;
     url: string;
 }
@@ -159,3 +180,4 @@ export type URLParams<T> = {
  * @return Ref<T>
  */
 export declare const useUrlSearchParams: <T>(initial: URLParams<T>) => [URLParams<T>] extends [Ref<any, any>] ? import("@vue/shared").IfAny<Ref<any, any> & URLParams<T>, Ref<Ref<any, any> & URLParams<T>, Ref<any, any> & URLParams<T>>, Ref<any, any> & URLParams<T>> : Ref<import("vue").UnwrapRef<URLParams<T>>, URLParams<T> | import("vue").UnwrapRef<URLParams<T>>>;
+export {};

package/types/entry.d.ts

@@ -1,7 +1,7 @@
 import { Plugin } from "vue";
 import BaseAPI, { isHttpCancel, isHttpError, setBaseAPIDefaults } from "./api/base";
 import type { HttpPromise, HttpError, QueryParams, ReqOptions, ReqPayload, TrailsPromise, TrailsPromisePaged, TrailsResp, TrailsRespPaged } from "./api/client";
-import { emailPattern, looseToNumber, phonePattern, textInputTypes, useInputField } from "./composables/forms";
+import { emailPattern, looseToNumber, phonePattern, urlPattern, textInputTypes, useInputField } from "./composables/forms";
 import { debounce as debounceFn, debounceLeading } from "./helpers/Debounce";
 import { throttle as throttleFn } from "./helpers/Throttle";
 declare const install: Exclude<Plugin["install"], undefined>;
@@ -11,5 +11,5 @@ export * from "./lib-components/index";
 export { BaseAPI, isHttpCancel, isHttpError, setBaseAPIDefaults };
 export type { HttpPromise, HttpError, QueryParams, ReqOptions, ReqPayload, TrailsPromise, TrailsPromisePaged, TrailsResp, TrailsRespPaged, };
 export type * from "./composables/forms";
-export { emailPattern, looseToNumber, phonePattern, textInputTypes, useInputField, };
+export { emailPattern, looseToNumber, phonePattern, urlPattern, textInputTypes, useInputField, };
 export { debounceFn, debounceLeading, throttleFn };

package/types/lib-components/forms/RadioCards.vue.d.ts

@@ -13,7 +13,7 @@ declare const _default: <T extends InputOption>(__VLS_props: {
             active: boolean;
             checked: boolean;
             disabled: boolean;
-            option: import("vue").Reactive<T>;
+            option: T;
         }): any;
     };
     attrs: any;
@@ -35,7 +35,7 @@ declare const _default: <T extends InputOption>(__VLS_props: {
             active: boolean;
             checked: boolean;
             disabled: boolean;
-            option: import("vue").Reactive<T>;
+            option: T;
         }): any;
     };
     emit: (evt: "update:modelValue", value: string | number | null | undefined) => void;
@@ -59,7 +59,7 @@ declare const _default: <T extends InputOption>(__VLS_props: {
                 active: boolean;
                 checked: boolean;
                 disabled: boolean;
-                option: import("vue").Reactive<T>;
+                option: T;
             }): any;
         };
         emit: (evt: "update:modelValue", value: string | number | null | undefined) => void;

package/types/lib-components/index.d.ts

@@ -5,6 +5,7 @@ import { default as DateFilter } from "./layout/DateFilter.vue";
 import { default as DetailList } from "./lists/DetailList.vue";
 import { default as DownloadCell } from "./lists/DownloadCell.vue";
 import { default as Flash } from "./overlays/Flash.vue";
+import { default as AppIcon } from "./indicators/AppIcon.vue";
 import { default as InlineAlert } from "./indicators/InlineAlert.vue";
 import { default as Modal } from "./overlays/Modal.vue";
 import { default as SidebarLayout } from "./layout/SidebarLayout.vue";
@@ -38,7 +39,7 @@ import { default as RadioCards } from "./forms/RadioCards.vue";
 import { default as Select } from "./forms/Select.vue";
 import { default as TextArea } from "./forms/TextArea.vue";
 import { default as YesOrNoRadio } from "./forms/YesOrNoRadio.vue";
-export { ActionsDropdown, Cards, ContentModal, DateFilter, DetailList, DownloadCell, Flash, InlineAlert, Modal, SidebarLayout, Slideover, StackedLayout, Popover, PopoverContent, PopoverPosition, // Type export
+export { ActionsDropdown, Cards, ContentModal, DateFilter, DetailList, DownloadCell, Flash, AppIcon, InlineAlert, Modal, SidebarLayout, Slideover, StackedLayout, Popover, PopoverContent, PopoverPosition, // Type export
 Paginator, Spinner, DataTable, Steps, DynamicTable, Tabs, Toggle, Tooltip, BaseInput, Checkbox, DateRangePicker, DateTime, InputError, InputHelp, InputLabel, FieldsetLegend, MultiCheckboxes, Radio, RadioCards, Select, TextArea, YesOrNoRadio, XYSpinner, ProgressCircles, ProgressCirclesLabeled, };
 /**
  * declare global component types for App.use(Trees)
@@ -51,6 +52,7 @@ export interface TreesComponents {
     DetailList: typeof DetailList;
     DownloadCell: typeof DownloadCell;
     Flash: typeof Flash;
+    AppIcon: typeof AppIcon;
     Modal: typeof Modal;
     SidebarLayout: typeof SidebarLayout;
     Slideover: typeof Slideover;

package/types/lib-components/indicators/AppIcon.vue.d.ts

@@ -0,0 +1,24 @@
+import type { Component, FunctionalComponent, RenderFunction } from "vue";
+type __VLS_Props = {
+    bgColor?: `bg-${string}`;
+    iconColor?: `text-${string}`;
+    icon: FunctionalComponent | Component | RenderFunction;
+    indicator?: string | number | boolean;
+    size?: "xs" | "sm" | "base" | "lg" | "xl";
+    type?: "circle" | "square";
+};
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    type: "circle" | "square";
+    size: "base" | "xs" | "sm" | "lg" | "xl";
+    bgColor: `bg-${string}`;
+    iconColor: `text-${string}`;
+    indicator: string | number | boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLDivElement>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/types/lib-components/layout/SidebarLayout.vue.d.ts

@@ -1,9 +1,9 @@
-import type { NavItem } from "../../composables/nav";
+import type { NavItem, UserMenuItem } from "../../composables/nav";
 type __VLS_Props = {
     activeUrl?: string;
     iconUrl: string;
     navigation: NavItem[];
-    userNavigation: NavItem[];
+    userNavigation: UserMenuItem[];
 };
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     activeUrl: string;

package/types/lib-components/layout/UserMenu.vue.d.ts

@@ -0,0 +1,8 @@
+import { UserMenuItem } from "../../composables/nav";
+type __VLS_Props = {
+    menu?: UserMenuItem[];
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    menu: UserMenuItem[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/types/lib-components/overlays/TooltipWrapper.vue.d.ts

@@ -0,0 +1,18 @@
+import { type Placement } from "@floating-ui/vue";
+type __VLS_Props = {
+    as?: string;
+    position?: Placement | "auto";
+    tooltip: string;
+};
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    as: string;
+    position: Placement | "auto";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};