@shwfed/nuxt 0.1.20 → 0.1.22

package/dist/runtime/components/ui/checkbox/Checkbox.d.vue.ts

@@ -0,0 +1,25 @@
+import type { CheckboxRootProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+type __VLS_Props = CheckboxRootProps & {
+    class?: HTMLAttributes['class'];
+};
+declare var __VLS_14: {
+    modelValue: import("reka-ui").CheckboxCheckedState;
+    state: import("reka-ui").CheckboxCheckedState;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_14) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean | "indeterminate") => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean | "indeterminate") => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/ui/checkbox/Checkbox.vue

@@ -0,0 +1,47 @@
+<script setup>
+import { reactiveOmit } from "@vueuse/core";
+import { Icon } from "@iconify/vue";
+import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from "reka-ui";
+import { cn } from "../../../utils/cn";
+const props = defineProps({
+  defaultValue: { type: [Boolean, String], required: false },
+  modelValue: { type: [Boolean, String, null], required: false },
+  disabled: { type: Boolean, required: false },
+  value: { type: null, required: false },
+  id: { type: String, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  name: { type: String, required: false },
+  required: { type: Boolean, required: false },
+  class: { type: null, required: false }
+});
+const emits = defineEmits(["update:modelValue"]);
+const delegatedProps = reactiveOmit(props, "class");
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <CheckboxRoot
+    v-slot="slotProps"
+    data-slot="checkbox"
+    v-bind="forwarded"
+    :class="
+  cn(
+    'peer cursor-pointer flex items-center justify-center border-zinc-200 data-[state=checked]:bg-(--primary) data-[state=checked]:text-white data-[state=checked]:border-(--primary) aria-invalid:border-red-400 size-4 shrink-0 rounded border shadow-xs hover:shadow transition-shadow outline-none disabled:cursor-not-allowed disabled:opacity-50',
+    props.class
+  )
+"
+  >
+    <CheckboxIndicator
+      data-slot="checkbox-indicator"
+      class="grid h-full w-full place-content-center transition-none text-xs"
+    >
+      <slot v-bind="slotProps">
+        <Icon
+          v-if="$props.modelValue === true"
+          icon="fluent:checkmark-20-filled"
+        />
+      </slot>
+    </CheckboxIndicator>
+  </CheckboxRoot>
+</template>

package/dist/runtime/components/ui/checkbox/Checkbox.vue.d.ts

@@ -0,0 +1,25 @@
+import type { CheckboxRootProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+type __VLS_Props = CheckboxRootProps & {
+    class?: HTMLAttributes['class'];
+};
+declare var __VLS_14: {
+    modelValue: import("reka-ui").CheckboxCheckedState;
+    state: import("reka-ui").CheckboxCheckedState;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_14) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean | "indeterminate") => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean | "indeterminate") => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/ui/checkbox/index.d.ts

@@ -0,0 +1 @@
+export { default as Checkbox } from './Checkbox.vue.js';

package/dist/runtime/components/ui/checkbox/index.js

@@ -0,0 +1 @@
+export { default as Checkbox } from "./Checkbox.vue";

package/dist/runtime/components/ui/command/Command.d.vue.ts

@@ -0,0 +1,36 @@
+import type { ListboxRootProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+type __VLS_Props = ListboxRootProps & {
+    class?: HTMLAttributes['class'];
+};
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: import("reka-ui").AcceptableValue) => any;
+    highlight: (payload: {
+        ref: HTMLElement;
+        value: import("reka-ui").AcceptableValue;
+    } | undefined) => any;
+    entryFocus: (event: CustomEvent<any>) => any;
+    leave: (event: Event) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: import("reka-ui").AcceptableValue) => any) | undefined;
+    onHighlight?: ((payload: {
+        ref: HTMLElement;
+        value: import("reka-ui").AcceptableValue;
+    } | undefined) => any) | undefined;
+    onEntryFocus?: ((event: CustomEvent<any>) => any) | undefined;
+    onLeave?: ((event: Event) => any) | undefined;
+}>, {
+    modelValue: import("reka-ui").AcceptableValue | import("reka-ui").AcceptableValue[];
+}, {}, {}, {}, 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/ui/command/Command.vue

@@ -0,0 +1,81 @@
+<script setup>
+import { reactiveOmit } from "@vueuse/core";
+import { ListboxRoot, useFilter, useForwardPropsEmits } from "reka-ui";
+import { reactive, ref, watch } from "vue";
+import { cn } from "../../../utils/cn";
+import { provideCommandContext } from ".";
+const props = defineProps({
+  modelValue: { type: null, required: false, default: "" },
+  defaultValue: { type: null, required: false },
+  multiple: { type: Boolean, required: false },
+  orientation: { type: String, required: false },
+  dir: { type: String, required: false },
+  disabled: { type: Boolean, required: false },
+  selectionBehavior: { type: String, required: false },
+  highlightOnHover: { type: Boolean, required: false },
+  by: { type: [String, Function], required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  name: { type: String, required: false },
+  required: { type: Boolean, required: false },
+  class: { type: null, required: false }
+});
+const emits = defineEmits(["update:modelValue", "highlight", "entryFocus", "leave"]);
+const delegatedProps = reactiveOmit(props, "class");
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+const allItems = ref(/* @__PURE__ */ new Map());
+const allGroups = ref(/* @__PURE__ */ new Map());
+const { contains } = useFilter({ sensitivity: "base" });
+const filterState = reactive({
+  search: "",
+  filtered: {
+    /** The count of all visible items. */
+    count: 0,
+    /** Map from visible item id to its search score. */
+    items: /* @__PURE__ */ new Map(),
+    /** Set of groups with at least one visible item. */
+    groups: /* @__PURE__ */ new Set()
+  }
+});
+function filterItems() {
+  if (!filterState.search) {
+    filterState.filtered.count = allItems.value.size;
+    return;
+  }
+  filterState.filtered.groups = /* @__PURE__ */ new Set();
+  let itemCount = 0;
+  for (const [id, value] of allItems.value) {
+    const score = contains(value, filterState.search);
+    filterState.filtered.items.set(id, score ? 1 : 0);
+    if (score)
+      itemCount++;
+  }
+  for (const [groupId, group] of allGroups.value) {
+    for (const itemId of group) {
+      if (filterState.filtered.items.get(itemId) > 0) {
+        filterState.filtered.groups.add(groupId);
+        break;
+      }
+    }
+  }
+  filterState.filtered.count = itemCount;
+}
+watch(() => filterState.search, () => {
+  filterItems();
+});
+provideCommandContext({
+  allItems,
+  allGroups,
+  filterState
+});
+</script>
+
+<template>
+  <ListboxRoot
+    data-slot="command"
+    v-bind="forwarded"
+    :class="cn('bg-white text-zinc-700 flex h-full w-full flex-col overflow-hidden rounded-md', props.class)"
+  >
+    <slot />
+  </ListboxRoot>
+</template>

package/dist/runtime/components/ui/command/Command.vue.d.ts

@@ -0,0 +1,36 @@
+import type { ListboxRootProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+type __VLS_Props = ListboxRootProps & {
+    class?: HTMLAttributes['class'];
+};
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: import("reka-ui").AcceptableValue) => any;
+    highlight: (payload: {
+        ref: HTMLElement;
+        value: import("reka-ui").AcceptableValue;
+    } | undefined) => any;
+    entryFocus: (event: CustomEvent<any>) => any;
+    leave: (event: Event) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: import("reka-ui").AcceptableValue) => any) | undefined;
+    onHighlight?: ((payload: {
+        ref: HTMLElement;
+        value: import("reka-ui").AcceptableValue;
+    } | undefined) => any) | undefined;
+    onEntryFocus?: ((event: CustomEvent<any>) => any) | undefined;
+    onLeave?: ((event: Event) => any) | undefined;
+}>, {
+    modelValue: import("reka-ui").AcceptableValue | import("reka-ui").AcceptableValue[];
+}, {}, {}, {}, 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/{tooltip.d.vue.ts → ui/command/CommandDialog.d.vue.ts}

@@ -1,16 +1,23 @@
-import { type TooltipRootProps } from 'reka-ui';
-type __VLS_Props = TooltipRootProps & {
-    content?: string;
+import type { DialogRootProps } from 'reka-ui';
+type __VLS_Props = DialogRootProps & {
+    title?: string;
+    description?: string;
+};
+declare var __VLS_38: {
+    open: boolean;
+    close: () => void;
 };
-declare var __VLS_14: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_14) => any;
+    default?: (props: typeof __VLS_38) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:open": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {
+    title: string;
+    description: string;
+}, {}, {}, {}, 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;

package/dist/runtime/components/ui/command/CommandDialog.vue

@@ -0,0 +1,34 @@
+<script setup>
+import { useForwardPropsEmits } from "reka-ui";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "../dialog";
+import Command from "./Command.vue";
+const props = defineProps({
+  open: { type: Boolean, required: false },
+  defaultOpen: { type: Boolean, required: false },
+  modal: { type: Boolean, required: false },
+  title: { type: String, required: false, default: "Command Palette" },
+  description: { type: String, required: false, default: "Search for a command to run..." }
+});
+const emits = defineEmits(["update:open"]);
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <Dialog
+    v-slot="slotProps"
+    v-bind="forwarded"
+  >
+    <DialogContent
+      :show-close-button="false"
+      class="overflow-hidden p-0"
+    >
+      <DialogHeader class="sr-only">
+        <DialogTitle>{{ title }}</DialogTitle>
+        <DialogDescription>{{ description }}</DialogDescription>
+      </DialogHeader>
+      <Command>
+        <slot v-bind="slotProps" />
+      </Command>
+    </DialogContent>
+  </Dialog>
+</template>

package/dist/runtime/components/{tooltip.vue.d.ts → ui/command/CommandDialog.vue.d.ts}

@@ -1,16 +1,23 @@
-import { type TooltipRootProps } from 'reka-ui';
-type __VLS_Props = TooltipRootProps & {
-    content?: string;
+import type { DialogRootProps } from 'reka-ui';
+type __VLS_Props = DialogRootProps & {
+    title?: string;
+    description?: string;
+};
+declare var __VLS_38: {
+    open: boolean;
+    close: () => void;
 };
-declare var __VLS_14: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_14) => any;
+    default?: (props: typeof __VLS_38) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:open": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {
+    title: string;
+    description: string;
+}, {}, {}, {}, 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;

package/dist/runtime/components/ui/command/CommandEmpty.d.vue.ts

@@ -0,0 +1,18 @@
+import type { PrimitiveProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+type __VLS_Props = PrimitiveProps & {
+    class?: HTMLAttributes['class'];
+};
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => 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/ui/command/CommandEmpty.vue

@@ -0,0 +1,28 @@
+<script setup>
+import { reactiveOmit } from "@vueuse/core";
+import { Primitive } from "reka-ui";
+import { computed } from "vue";
+import { cn } from "../../../utils/cn";
+import { useCommand } from ".";
+const props = defineProps({
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  class: { type: null, required: false }
+});
+const delegatedProps = reactiveOmit(props, "class");
+const { filterState } = useCommand();
+const isRender = computed(
+  () => !!filterState.search && filterState.filtered.count === 0
+);
+</script>
+
+<template>
+  <Primitive
+    v-if="isRender"
+    data-slot="command-empty"
+    v-bind="delegatedProps"
+    :class="cn('py-6 text-center text-sm', props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>

package/dist/runtime/components/ui/command/CommandEmpty.vue.d.ts

@@ -0,0 +1,18 @@
+import type { PrimitiveProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+type __VLS_Props = PrimitiveProps & {
+    class?: HTMLAttributes['class'];
+};
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => 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/ui/command/CommandGroup.d.vue.ts

@@ -0,0 +1,19 @@
+import type { ListboxGroupProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+type __VLS_Props = ListboxGroupProps & {
+    class?: HTMLAttributes['class'];
+    heading?: string;
+};
+declare var __VLS_14: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_14) => 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/ui/command/CommandGroup.vue

@@ -0,0 +1,44 @@
+<script setup>
+import { reactiveOmit } from "@vueuse/core";
+import { ListboxGroup, ListboxGroupLabel, useId } from "reka-ui";
+import { computed, onMounted, onUnmounted } from "vue";
+import { cn } from "../../../utils/cn";
+import { provideCommandGroupContext, useCommand } from ".";
+const props = defineProps({
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  class: { type: null, required: false },
+  heading: { type: String, required: false }
+});
+const delegatedProps = reactiveOmit(props, "class");
+const { allGroups, filterState } = useCommand();
+const id = useId();
+const isRender = computed(() => !filterState.search ? true : filterState.filtered.groups.has(id));
+provideCommandGroupContext({ id });
+onMounted(() => {
+  if (!allGroups.value.has(id))
+    allGroups.value.set(id, /* @__PURE__ */ new Set());
+});
+onUnmounted(() => {
+  allGroups.value.delete(id);
+});
+</script>
+
+<template>
+  <ListboxGroup
+    v-bind="delegatedProps"
+    :id="id"
+    data-slot="command-group"
+    :class="cn('text-zinc-700 overflow-hidden p-1', props.class)"
+    :hidden="isRender ? void 0 : true"
+  >
+    <ListboxGroupLabel
+      v-if="heading"
+      data-slot="command-group-heading"
+      class="px-2 py-1.5 text-xs font-medium text-zinc-700"
+    >
+      {{ heading }}
+    </ListboxGroupLabel>
+    <slot />
+  </ListboxGroup>
+</template>

package/dist/runtime/components/ui/command/CommandGroup.vue.d.ts

@@ -0,0 +1,19 @@
+import type { ListboxGroupProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+type __VLS_Props = ListboxGroupProps & {
+    class?: HTMLAttributes['class'];
+    heading?: string;
+};
+declare var __VLS_14: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_14) => 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/ui/command/CommandInput.d.vue.ts

@@ -0,0 +1,8 @@
+import type { ListboxFilterProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+type __VLS_Props = ListboxFilterProps & {
+    class?: HTMLAttributes['class'];
+};
+declare const __VLS_export: 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 _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/ui/command/CommandInput.vue

@@ -0,0 +1,40 @@
+<script setup>
+import { reactiveOmit } from "@vueuse/core";
+import { Icon } from "@iconify/vue";
+import { ListboxFilter, useForwardProps } from "reka-ui";
+import { cn } from "../../../utils/cn";
+import { useCommand } from ".";
+defineOptions({
+  inheritAttrs: false
+});
+const props = defineProps({
+  modelValue: { type: String, required: false },
+  autoFocus: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  class: { type: null, required: false }
+});
+const delegatedProps = reactiveOmit(props, "class");
+const forwardedProps = useForwardProps(delegatedProps);
+const { filterState } = useCommand();
+</script>
+
+<template>
+  <div
+    data-slot="command-input-wrapper"
+    class="flex h-12 items-center gap-2 border-b border-zinc-200 px-3"
+  >
+    <Icon
+      icon="fluent:search-20-filled"
+      class="size-4 shrink-0 opacity-50"
+    />
+    <ListboxFilter
+      v-bind="{ ...forwardedProps, ...$attrs }"
+      v-model="filterState.search"
+      data-slot="command-input"
+      auto-focus
+      :class="cn('placeholder:text-zinc-700 flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50', props.class)"
+    />
+  </div>
+</template>

package/dist/runtime/components/ui/command/CommandInput.vue.d.ts

@@ -0,0 +1,8 @@
+import type { ListboxFilterProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+type __VLS_Props = ListboxFilterProps & {
+    class?: HTMLAttributes['class'];
+};
+declare const __VLS_export: 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 _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/ui/command/CommandItem.d.vue.ts

@@ -0,0 +1,22 @@
+import type { ListboxItemProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+type __VLS_Props = ListboxItemProps & {
+    class?: HTMLAttributes['class'];
+};
+declare var __VLS_11: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_11) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (event: import("reka-ui").ListboxItemSelectEvent<import("reka-ui").AcceptableValue>) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((event: import("reka-ui").ListboxItemSelectEvent<import("reka-ui").AcceptableValue>) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/ui/command/CommandItem.vue

@@ -0,0 +1,65 @@
+<script setup>
+import { reactiveOmit, useCurrentElement } from "@vueuse/core";
+import { ListboxItem, useForwardPropsEmits, useId } from "reka-ui";
+import { computed, onMounted, onUnmounted, ref } from "vue";
+import { cn } from "../../../utils/cn";
+import { useCommand, useCommandGroup } from ".";
+const props = defineProps({
+  value: { type: null, required: true },
+  disabled: { type: Boolean, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  class: { type: null, required: false }
+});
+const emits = defineEmits(["select"]);
+const delegatedProps = reactiveOmit(props, "class");
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+const id = useId();
+const { filterState, allItems, allGroups } = useCommand();
+const groupContext = useCommandGroup();
+const isRender = computed(() => {
+  if (!filterState.search) {
+    return true;
+  } else {
+    const filteredCurrentItem = filterState.filtered.items.get(id);
+    if (filteredCurrentItem === void 0) {
+      return true;
+    }
+    return filteredCurrentItem > 0;
+  }
+});
+const itemRef = ref();
+const currentElement = useCurrentElement(itemRef);
+onMounted(() => {
+  if (!(currentElement.value instanceof HTMLElement))
+    return;
+  allItems.value.set(id, currentElement.value.textContent ?? (props.value?.toString() ?? ""));
+  const groupId = groupContext?.id;
+  if (groupId) {
+    if (!allGroups.value.has(groupId)) {
+      allGroups.value.set(groupId, /* @__PURE__ */ new Set([id]));
+    } else {
+      allGroups.value.get(groupId)?.add(id);
+    }
+  }
+});
+onUnmounted(() => {
+  allItems.value.delete(id);
+});
+</script>
+
+<template>
+  <ListboxItem
+    v-if="isRender"
+    v-bind="forwarded"
+    :id="id"
+    ref="itemRef"
+    data-slot="command-item"
+    :class="cn('data-highlighted:bg-zinc-100 data-highlighted:text-zinc-700 [&_svg:not([class*=\'text-\'])]:text-zinc-700 relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4', props.class)"
+    @select="() => {
+  filterState.search = '';
+}"
+  >
+    <slot />
+  </ListboxItem>
+</template>