@bitrix24/b24ui-nuxt 2.2.1 → 2.4.0

package/dist/runtime/components/DashboardNavbar.vue

@@ -0,0 +1,79 @@
+<script>
+import theme from "#build/b24ui/dashboard-navbar";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { Primitive } from "reka-ui";
+import { createReusableTemplate } from "@vueuse/core";
+import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
+import { useDashboard } from "../utils/dashboard";
+import { tv } from "../utils/tv";
+import B24DashboardSidebarToggle from "./DashboardSidebarToggle.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  as: { type: null, required: false },
+  icon: { type: [Function, Object], required: false },
+  title: { type: String, required: false },
+  toggle: { type: [Boolean, Object], required: false, default: true },
+  toggleSide: { type: String, required: false, default: "left" },
+  class: { type: null, required: false },
+  b24ui: { type: Object, required: false }
+});
+const slots = defineSlots();
+const appConfig = useAppConfig();
+const uiProp = useComponentUI("dashboardNavbar", props);
+const dashboardContext = useDashboard({});
+const [DefineToggleTemplate, ReuseToggleTemplate] = createReusableTemplate();
+const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.dashboardNavbar || {} })());
+</script>
+
+<template>
+  <DefineToggleTemplate>
+    <slot name="toggle" v-bind="{ ...dashboardContext, b24ui }">
+      <B24DashboardSidebarToggle
+        v-if="toggle"
+        v-bind="typeof toggle === 'object' ? toggle : {}"
+        :side="toggleSide"
+        data-slot="toggle"
+        :class="b24ui.toggle({ class: uiProp?.toggle, toggleSide })"
+      />
+    </slot>
+  </DefineToggleTemplate>
+
+  <Primitive :as="as" v-bind="$attrs" data-slot="root" :class="b24ui.root({ class: [uiProp?.root, props.class] })">
+    <div data-slot="left" :class="b24ui.left({ class: uiProp?.left })">
+      <ReuseToggleTemplate v-if="toggleSide === 'left'" />
+
+      <slot name="left" v-bind="dashboardContext">
+        <slot name="leading" v-bind="{ ...dashboardContext, b24ui }">
+          <Component
+            :is="icon"
+            v-if="icon"
+            data-slot="icon"
+            :class="b24ui.icon({ class: uiProp?.icon })"
+          />
+        </slot>
+
+        <h1 data-slot="title" :class="b24ui.title({ class: uiProp?.title })">
+          <slot name="title">
+            {{ title }}
+          </slot>
+        </h1>
+
+        <slot name="trailing" v-bind="{ ...dashboardContext, b24ui }" />
+      </slot>
+    </div>
+
+    <div v-if="!!slots.default" data-slot="center" :class="b24ui.center({ class: uiProp?.center })">
+      <slot v-bind="dashboardContext" />
+    </div>
+
+    <div data-slot="right" :class="b24ui.right({ class: uiProp?.right })">
+      <slot name="right" v-bind="dashboardContext" />
+
+      <ReuseToggleTemplate v-if="toggleSide === 'right'" />
+    </div>
+  </Primitive>
+</template>

package/dist/runtime/components/DashboardNavbar.vue.d.ts

@@ -0,0 +1,59 @@
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/b24ui/dashboard-navbar';
+import type { DashboardContext } from '../utils/dashboard';
+import type { ButtonProps, IconComponent, LinkPropsKeys } from '../types';
+import type { ComponentConfig } from '../types/tv';
+type DashboardNavbar = ComponentConfig<typeof theme, AppConfig, 'dashboardNavbar'>;
+export interface DashboardNavbarProps {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    /**
+     * The icon displayed next to the title.
+     * @IconComponent
+     */
+    icon?: IconComponent;
+    title?: string;
+    /**
+     * Customize the toggle button to open the sidebar.
+     * `{ color: 'air-tertiary', size: 'md' }`{lang="ts-type"}
+     * @defaultValue true
+     */
+    toggle?: boolean | Omit<ButtonProps, LinkPropsKeys>;
+    /**
+     * The side to render the toggle button on.
+     * @defaultValue 'left'
+     */
+    toggleSide?: 'left' | 'right';
+    class?: any;
+    b24ui?: DashboardNavbar['slots'];
+}
+type DashboardNavbarSlotsProps = Omit<DashboardContext, 'storage' | 'storageKey' | 'persistent' | 'unit'>;
+export interface DashboardNavbarSlots {
+    title(props?: {}): any;
+    leading(props: DashboardNavbarSlotsProps & {
+        b24ui: DashboardNavbar['b24ui'];
+    }): any;
+    trailing(props: DashboardNavbarSlotsProps & {
+        b24ui: DashboardNavbar['b24ui'];
+    }): any;
+    left(props: DashboardNavbarSlotsProps): any;
+    default(props: DashboardNavbarSlotsProps): any;
+    right(props: DashboardNavbarSlotsProps): any;
+    toggle(props: DashboardNavbarSlotsProps & {
+        b24ui: DashboardNavbar['b24ui'];
+    }): any;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DashboardNavbarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardNavbarProps> & Readonly<{}>, {
+    toggle: boolean | Omit<ButtonProps, LinkPropsKeys>;
+    toggleSide: "left" | "right";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DashboardNavbarSlots>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/DashboardPanel.d.vue.ts

@@ -0,0 +1,31 @@
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/b24ui/dashboard-panel';
+import type { UseResizableProps } from '../composables/useResizable';
+import type { ComponentConfig } from '../types/tv';
+type DashboardPanel = ComponentConfig<typeof theme, AppConfig, 'dashboardPanel'>;
+export interface DashboardPanelProps extends Pick<UseResizableProps, 'id' | 'minSize' | 'maxSize' | 'defaultSize' | 'resizable'> {
+    class?: any;
+    b24ui?: DashboardPanel['slots'];
+}
+export interface DashboardPanelSlots {
+    'default'(props?: {}): any;
+    'header'(props?: {}): any;
+    'body'(props?: {}): any;
+    'footer'(props?: {}): any;
+    'resize-handle'(props: {
+        onMouseDown: (e: MouseEvent) => void;
+        onTouchStart: (e: TouchEvent) => void;
+        onDoubleClick: (e: MouseEvent) => void;
+    }): any;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DashboardPanelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardPanelProps> & Readonly<{}>, {
+    minSize: number;
+    resizable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DashboardPanelSlots>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/DashboardPanel.vue

@@ -0,0 +1,66 @@
+<script>
+import theme from "#build/b24ui/dashboard-panel";
+</script>
+
+<script setup>
+import { computed, useId, toRef } from "vue";
+import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
+import { useResizable } from "../composables/useResizable";
+import { useDashboard } from "../utils/dashboard";
+import { tv } from "../utils/tv";
+import B24DashboardResizeHandle from "./DashboardResizeHandle.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  class: { type: null, required: false },
+  b24ui: { type: Object, required: false },
+  id: { type: String, required: false },
+  minSize: { type: Number, required: false, default: 200 },
+  maxSize: { type: Number, required: false },
+  defaultSize: { type: Number, required: false },
+  resizable: { type: Boolean, required: false, default: false }
+});
+defineSlots();
+const appConfig = useAppConfig();
+const uiProp = useComponentUI("dashboardPanel", props);
+const dashboardContext = useDashboard({ storageKey: "dashboard", unit: "px" });
+const id = `${dashboardContext.storageKey}-panel-${props.id || useId()}`;
+const { el, size, isDragging, onMouseDown, onTouchStart, onDoubleClick } = useResizable(id, toRef(() => ({ ...dashboardContext, ...props })));
+const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.dashboardPanel || {} })({
+  size: !!size.value
+}));
+</script>
+
+<template>
+  <div
+    :id="id"
+    ref="el"
+    v-bind="$attrs"
+    :data-dragging="isDragging"
+    data-slot="root"
+    :class="b24ui.root({ class: [uiProp?.root, props.class] })"
+    :style="[size ? { '--width': `${size}${dashboardContext.unit}` } : void 0]"
+  >
+    <slot>
+      <slot name="header" />
+
+      <div data-slot="body" :class="b24ui.body({ class: uiProp?.body })">
+        <slot name="body" />
+      </div>
+
+      <slot name="footer" />
+    </slot>
+  </div>
+
+  <slot name="resize-handle" :on-mouse-down="onMouseDown" :on-touch-start="onTouchStart" :on-double-click="onDoubleClick">
+    <B24DashboardResizeHandle
+      v-if="resizable"
+      :aria-controls="id"
+      data-slot="handle"
+      :class="b24ui.handle({ class: uiProp?.handle })"
+      @mousedown="onMouseDown"
+      @touchstart="onTouchStart"
+      @dblclick="onDoubleClick"
+    />
+  </slot>
+</template>

package/dist/runtime/components/DashboardPanel.vue.d.ts

@@ -0,0 +1,31 @@
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/b24ui/dashboard-panel';
+import type { UseResizableProps } from '../composables/useResizable';
+import type { ComponentConfig } from '../types/tv';
+type DashboardPanel = ComponentConfig<typeof theme, AppConfig, 'dashboardPanel'>;
+export interface DashboardPanelProps extends Pick<UseResizableProps, 'id' | 'minSize' | 'maxSize' | 'defaultSize' | 'resizable'> {
+    class?: any;
+    b24ui?: DashboardPanel['slots'];
+}
+export interface DashboardPanelSlots {
+    'default'(props?: {}): any;
+    'header'(props?: {}): any;
+    'body'(props?: {}): any;
+    'footer'(props?: {}): any;
+    'resize-handle'(props: {
+        onMouseDown: (e: MouseEvent) => void;
+        onTouchStart: (e: TouchEvent) => void;
+        onDoubleClick: (e: MouseEvent) => void;
+    }): any;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DashboardPanelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardPanelProps> & Readonly<{}>, {
+    minSize: number;
+    resizable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DashboardPanelSlots>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/DashboardResizeHandle.d.vue.ts

@@ -0,0 +1,22 @@
+export interface DashboardResizeHandleProps {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    class?: any;
+    b24ui?: {
+        base?: any;
+    };
+}
+export interface DashboardResizeHandleSlots {
+    default(props?: {}): any;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DashboardResizeHandleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardResizeHandleProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DashboardResizeHandleSlots>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/DashboardResizeHandle.vue

@@ -0,0 +1,30 @@
+<script>
+import theme from "#build/b24ui/dashboard-resize-handle";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { Primitive } from "reka-ui";
+import { useAppConfig } from "#imports";
+import { tv } from "../utils/tv";
+import { useComponentUI } from "../composables/useComponentUI";
+const props = defineProps({
+  as: { type: null, required: false },
+  class: { type: null, required: false },
+  b24ui: { type: Object, required: false }
+});
+defineSlots();
+const appConfig = useAppConfig();
+const uiProp = useComponentUI("dashboardResizeHandle", props);
+const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.dashboardResizeHandle || {} }));
+</script>
+
+<template>
+  <Primitive
+    :as="as"
+    role="separator"
+    :class="b24ui({ class: [uiProp?.base, props.class] })"
+  >
+    <slot />
+  </Primitive>
+</template>

package/dist/runtime/components/DashboardResizeHandle.vue.d.ts

@@ -0,0 +1,22 @@
+export interface DashboardResizeHandleProps {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    class?: any;
+    b24ui?: {
+        base?: any;
+    };
+}
+export interface DashboardResizeHandleSlots {
+    default(props?: {}): any;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DashboardResizeHandleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardResizeHandleProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DashboardResizeHandleSlots>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/DashboardSearch.d.vue.ts

@@ -8,6 +8,10 @@ type DashboardSearch = ComponentConfig<typeof theme, AppConfig, 'dashboardSearch
  * @memo not use loadingIcon
  */
 export interface DashboardSearchProps<T extends CommandPaletteItem = CommandPaletteItem> extends Pick<ModalProps, 'title' | 'description' | 'overlay' | 'transition' | 'content' | 'dismissible' | 'fullscreen' | 'modal' | 'portal'> {
+    /**
+     * @defaultValue 'md'
+     */
+    size?: DashboardSearch['variants']['size'];
     /**
      * The icon displayed in the input.
      * @defaultValue icons.search
@@ -63,11 +67,13 @@ export type DashboardSearchSlots = CommandPaletteSlots<CommandPaletteGroup<Comma
         close: () => void;
     }): any;
 };
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DashboardSearchProps<CommandPaletteItem> & {
     open?: boolean;
     searchTerm?: string;
 }, {
-    commandPaletteRef: Readonly<import("vue").ShallowRef<any>>;
+    commandPaletteRef: Readonly<import("vue").ShallowRef<{} | null, {} | null>>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:open": (value: boolean) => any;
     "update:searchTerm": (value: string) => any;
@@ -77,9 +83,12 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Dashbo
 }> & Readonly<{
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
     "onUpdate:searchTerm"?: ((value: string) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DashboardSearchSlots>;
-declare const _default: typeof __VLS_export;
-export default _default;
+}>, {
+    close: boolean | Omit<ButtonProps, LinkPropsKeys>;
+    colorMode: boolean;
+    fullscreen: boolean;
+    shortcut: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DashboardSearchSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/DashboardSearch.vue

@@ -8,6 +8,7 @@ import { useForwardProps } from "reka-ui";
 import { defu } from "defu";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig, useColorMode, defineShortcuts, useRuntimeHook } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { useLocale } from "../composables/useLocale";
 import { omit, transformUI } from "../utils";
 import { tv } from "../utils/tv";
@@ -15,6 +16,7 @@ import icons from "../dictionary/icons";
 import B24CommandPalette from "./CommandPalette.vue";
 import B24Modal from "./Modal.vue";
 const props = defineProps({
+  size: { type: null, required: false },
   icon: { type: [Function, Object], required: false },
   placeholder: { type: String, required: false },
   autofocus: { type: Boolean, required: false },
@@ -26,7 +28,7 @@ const props = defineProps({
   fuse: { type: Object, required: false },
   colorMode: { type: Boolean, required: false, default: true },
   class: { type: null, required: false },
-  b24ui: { type: void 0, required: false },
+  b24ui: { type: Object, required: false },
   title: { type: String, required: false },
   description: { type: String, required: false },
   overlay: { type: Boolean, required: false },
@@ -46,13 +48,15 @@ useRuntimeHook("dashboard:search:toggle", () => {
 const { t } = useLocale();
 const colorMode = useColorMode();
 const appConfig = useAppConfig();
-const commandPaletteProps = useForwardProps(reactivePick(props, "icon", "placeholder", "autofocus", "loading", "close", "closeIcon"));
+const uiProp = useComponentUI("dashboardSearch", props);
+const commandPaletteProps = useForwardProps(reactivePick(props, "size", "icon", "placeholder", "autofocus", "loading", "close", "closeIcon"));
 const modalProps = useForwardProps(reactivePick(props, "overlay", "transition", "content", "dismissible", "fullscreen", "modal", "portal"));
 const getProxySlots = () => omit(slots, ["content"]);
 const fuse = computed(() => defu({}, props.fuse, {
   fuseOptions: {}
 }));
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.dashboardSearch || {} })({
+  size: props.size,
   fullscreen: props.fullscreen
 }));
 const groups = computed(() => {
@@ -118,7 +122,7 @@ defineExpose({
     :description="description || t('dashboardSearch.description')"
     v-bind="modalProps"
     data-slot="modal"
-    :class="b24ui.modal({ class: [props.b24ui?.modal, props.class] })"
+    :class="b24ui.modal({ class: [uiProp?.modal, props.class] })"
   >
     <template #content="contentData">
       <slot name="content" v-bind="contentData">
@@ -128,7 +132,8 @@ defineExpose({
           v-bind="commandPaletteProps"
           :groups="groups"
           :fuse="fuse"
-          :b24ui="transformUI(omit(b24ui, ['modal']), props.b24ui)"
+          :input="{ fixed: true }"
+          :b24ui="transformUI(omit(b24ui, ['modal']), uiProp)"
           @update:model-value="onSelect"
           @update:open="open = $event"
         >

package/dist/runtime/components/DashboardSearch.vue.d.ts

@@ -8,6 +8,10 @@ type DashboardSearch = ComponentConfig<typeof theme, AppConfig, 'dashboardSearch
  * @memo not use loadingIcon
  */
 export interface DashboardSearchProps<T extends CommandPaletteItem = CommandPaletteItem> extends Pick<ModalProps, 'title' | 'description' | 'overlay' | 'transition' | 'content' | 'dismissible' | 'fullscreen' | 'modal' | 'portal'> {
+    /**
+     * @defaultValue 'md'
+     */
+    size?: DashboardSearch['variants']['size'];
     /**
      * The icon displayed in the input.
      * @defaultValue icons.search
@@ -63,11 +67,13 @@ export type DashboardSearchSlots = CommandPaletteSlots<CommandPaletteGroup<Comma
         close: () => void;
     }): any;
 };
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DashboardSearchProps<CommandPaletteItem> & {
     open?: boolean;
     searchTerm?: string;
 }, {
-    commandPaletteRef: Readonly<import("vue").ShallowRef<any>>;
+    commandPaletteRef: Readonly<import("vue").ShallowRef<{} | null, {} | null>>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:open": (value: boolean) => any;
     "update:searchTerm": (value: string) => any;
@@ -77,9 +83,12 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Dashbo
 }> & Readonly<{
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
     "onUpdate:searchTerm"?: ((value: string) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DashboardSearchSlots>;
-declare const _default: typeof __VLS_export;
-export default _default;
+}>, {
+    close: boolean | Omit<ButtonProps, LinkPropsKeys>;
+    colorMode: boolean;
+    fullscreen: boolean;
+    shortcut: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DashboardSearchSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/DashboardSearchButton.d.vue.ts

@@ -39,9 +39,14 @@ export interface DashboardSearchButtonProps extends Omit<ButtonProps, LinkPropsK
     b24ui?: DashboardSearchButton['slots'] & ButtonProps['b24ui'];
     class?: any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DashboardSearchButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardSearchButtonProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ButtonSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DashboardSearchButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardSearchButtonProps> & Readonly<{}>, {
+    color: "link" | "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-secondary" | "air-secondary-alert" | "air-secondary-accent" | "air-secondary-accent-1" | "air-secondary-accent-2" | "air-tertiary" | "default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | "air-selection" | "air-secondary-no-accent" | "air-tertiary-accent" | "air-tertiary-no-accent" | "air-boost";
+    collapsed: boolean;
+    tooltip: boolean | TooltipProps;
+    kbds: KbdProps["value"][] | KbdProps[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ButtonSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/DashboardSearchButton.vue

@@ -8,6 +8,7 @@ import { useForwardProps } from "reka-ui";
 import { defu } from "defu";
 import { reactiveOmit, createReusableTemplate } from "@vueuse/core";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { useLocale } from "../composables/useLocale";
 import { useDashboard } from "../utils/dashboard";
 import { omit, transformUI } from "../utils";
@@ -24,7 +25,7 @@ const props = defineProps({
   collapsed: { type: Boolean, required: false, default: false },
   tooltip: { type: [Boolean, Object], required: false, default: false },
   kbds: { type: Array, required: false, default: () => ["meta", "k"] },
-  b24ui: { type: void 0, required: false },
+  b24ui: { type: Object, required: false },
   class: { type: null, required: false },
   activeColor: { type: null, required: false },
   depth: { type: null, required: false },
@@ -54,6 +55,7 @@ const buttonProps = useForwardProps(reactiveOmit(props, "icon", "label", "collap
 const tooltipProps = toRef(() => defu(typeof props.tooltip === "boolean" ? {} : props.tooltip, { delayDuration: 0, content: { side: "right" } }));
 const { t } = useLocale();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("dashboardSearchButton", props);
 const { toggleSearch } = useDashboard({ toggleSearch: () => {
 } });
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.dashboardSearchButton || {} })({
@@ -68,16 +70,17 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.dashboa
       :label="label || t('dashboardSearchButton.label')"
       v-bind="{
   ...buttonProps,
-  ...collapsed ? {
+  ...props.collapsed ? {
+    'label': void 0,
     'aria-label': label || t('dashboardSearchButton.label')
   } : {
-    color: 'air-secondary-no-accent'
+    color: buttonProps['color'] === 'air-tertiary-no-accent' ? 'air-secondary-no-accent' : buttonProps['color']
   },
   ...$attrs
 }"
       data-slot="base"
-      :class="b24ui.base({ class: [props.b24ui?.base, props.class] })"
-      :b24ui="transformUI(b24ui, props.b24ui)"
+      :class="b24ui.base({ class: [uiProp?.base, props.class] })"
+      :b24ui="transformUI(b24ui, uiProp)"
       @click="toggleSearch"
     >
       <template v-for="(_, name) in getProxySlots()" #[name]="slotData">
@@ -85,12 +88,13 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.dashboa
       </template>
 
       <template #trailing="{ b24ui: b24uiProxy }">
-        <div data-slot="trailing" :class="b24ui.trailing({ class: props.b24ui?.trailing })">
+        <div data-slot="trailing" :class="b24ui.trailing({ class: uiProp?.trailing })">
           <slot name="trailing" :b24ui="b24uiProxy">
-            <template v-if="kbds?.length">
+            <template v-if="!collapsed && kbds?.length">
               <B24Kbd
                 v-for="(kbd, index) in kbds"
                 :key="index"
+                size="sm"
                 v-bind="typeof kbd === 'string' ? { value: kbd } : kbd"
               />
             </template>

package/dist/runtime/components/DashboardSearchButton.vue.d.ts

@@ -39,9 +39,14 @@ export interface DashboardSearchButtonProps extends Omit<ButtonProps, LinkPropsK
     b24ui?: DashboardSearchButton['slots'] & ButtonProps['b24ui'];
     class?: any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DashboardSearchButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardSearchButtonProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ButtonSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DashboardSearchButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardSearchButtonProps> & Readonly<{}>, {
+    color: "link" | "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-secondary" | "air-secondary-alert" | "air-secondary-accent" | "air-secondary-accent-1" | "air-secondary-accent-2" | "air-tertiary" | "default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | "air-selection" | "air-secondary-no-accent" | "air-tertiary-accent" | "air-tertiary-no-accent" | "air-boost";
+    collapsed: boolean;
+    tooltip: boolean | TooltipProps;
+    kbds: KbdProps["value"][] | KbdProps[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ButtonSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;