@shwfed/nuxt 0.7.10 → 0.8.0

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@shwfed/nuxt",
   "configKey": "shwfed",
-  "version": "0.7.10",
+  "version": "0.8.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -1,5 +1,5 @@
 import { execSync } from 'node:child_process';
-import { defineNuxtModule, createResolver, addVitePlugin, addPlugin, addImportsDir, addComponentsDir, addRouteMiddleware } from '@nuxt/kit';
+import { defineNuxtModule, createResolver, addVitePlugin, addPlugin, addImportsDir, addComponentsDir, addRouteMiddleware, addLayout } from '@nuxt/kit';
 import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite';
 import TailwindCSS from '@tailwindcss/vite';
 import defu from 'defu';
@@ -75,6 +75,7 @@ const module$1 = defineNuxtModule({
       name: "token",
       global: true
     });
+    addLayout(resolver.resolve("runtime/layouts/default.vue"), "default");
   },
   hooks: {
     "build:error": (error) => {

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

@@ -35,9 +35,42 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
             grow?: boolean;
         }>[];
         cellStyles?: import("./table.vue.js").Expression;
-        props?: Omit<import("@tanstack/table-core").TableOptions<unknown>, "columns" | "data" | "getRowId" | "getCoreRowModel">;
+        props?: Readonly<{
+            [key: string]: unknown;
+            initialState?: Readonly<{
+                columnVisibility?: Record<string, boolean>;
+                columnOrder?: ReadonlyArray<string>;
+                columnPinning?: Readonly<{
+                    left?: ReadonlyArray<string>;
+                    right?: ReadonlyArray<string>;
+                }>;
+                rowPinning?: Readonly<{
+                    top?: ReadonlyArray<string>;
+                    bottom?: ReadonlyArray<string>;
+                }>;
+                columnFilters?: ReadonlyArray<Readonly<{
+                    id: string;
+                    value: unknown;
+                }>>;
+                globalFilter?: unknown;
+                sorting?: ReadonlyArray<Readonly<{
+                    id: string;
+                    desc: boolean;
+                }>>;
+                expanded?: boolean | Record<string, boolean>;
+                grouping?: ReadonlyArray<string>;
+                columnSizing?: Record<string, number>;
+                columnSizingInfo?: Record<string, unknown>;
+                pagination?: Readonly<{
+                    pageIndex?: number;
+                    pageSize?: number;
+                }>;
+                rowSelection?: Record<string, boolean>;
+            }>;
+        }>;
         paginationLeft?: import("./table.vue.js").Markdown;
         paginationRight?: import("./table.vue.js").Markdown;
+        paginationPageSizes?: ReadonlyArray<number>;
     }>) => any;
 }, string, import("vue").PublicProps, Readonly<{
     config: import("effect").Effect.Effect<TableConfig>;
@@ -63,9 +96,42 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
             grow?: boolean;
         }>[];
         cellStyles?: import("./table.vue.js").Expression;
-        props?: Omit<import("@tanstack/table-core").TableOptions<unknown>, "columns" | "data" | "getRowId" | "getCoreRowModel">;
+        props?: Readonly<{
+            [key: string]: unknown;
+            initialState?: Readonly<{
+                columnVisibility?: Record<string, boolean>;
+                columnOrder?: ReadonlyArray<string>;
+                columnPinning?: Readonly<{
+                    left?: ReadonlyArray<string>;
+                    right?: ReadonlyArray<string>;
+                }>;
+                rowPinning?: Readonly<{
+                    top?: ReadonlyArray<string>;
+                    bottom?: ReadonlyArray<string>;
+                }>;
+                columnFilters?: ReadonlyArray<Readonly<{
+                    id: string;
+                    value: unknown;
+                }>>;
+                globalFilter?: unknown;
+                sorting?: ReadonlyArray<Readonly<{
+                    id: string;
+                    desc: boolean;
+                }>>;
+                expanded?: boolean | Record<string, boolean>;
+                grouping?: ReadonlyArray<string>;
+                columnSizing?: Record<string, number>;
+                columnSizingInfo?: Record<string, unknown>;
+                pagination?: Readonly<{
+                    pageIndex?: number;
+                    pageSize?: number;
+                }>;
+                rowSelection?: Record<string, boolean>;
+            }>;
+        }>;
         paginationLeft?: import("./table.vue.js").Markdown;
         paginationRight?: import("./table.vue.js").Markdown;
+        paginationPageSizes?: ReadonlyArray<number>;
     }>) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     [x: string]: ((props: {

package/dist/runtime/components/table.vue

@@ -49,7 +49,6 @@ export { AccessorC, ColumnC, RenderC, TableConfigC } from "./ui/table/schema";
 <template>
   <UiTable
     ref="tableRef"
-    v-bind="$attrs"
     :config="props.config"
     :data="props.data"
     :row-count="props.rowCount"

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

@@ -35,9 +35,42 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
             grow?: boolean;
         }>[];
         cellStyles?: import("./table.vue.js").Expression;
-        props?: Omit<import("@tanstack/table-core").TableOptions<unknown>, "columns" | "data" | "getRowId" | "getCoreRowModel">;
+        props?: Readonly<{
+            [key: string]: unknown;
+            initialState?: Readonly<{
+                columnVisibility?: Record<string, boolean>;
+                columnOrder?: ReadonlyArray<string>;
+                columnPinning?: Readonly<{
+                    left?: ReadonlyArray<string>;
+                    right?: ReadonlyArray<string>;
+                }>;
+                rowPinning?: Readonly<{
+                    top?: ReadonlyArray<string>;
+                    bottom?: ReadonlyArray<string>;
+                }>;
+                columnFilters?: ReadonlyArray<Readonly<{
+                    id: string;
+                    value: unknown;
+                }>>;
+                globalFilter?: unknown;
+                sorting?: ReadonlyArray<Readonly<{
+                    id: string;
+                    desc: boolean;
+                }>>;
+                expanded?: boolean | Record<string, boolean>;
+                grouping?: ReadonlyArray<string>;
+                columnSizing?: Record<string, number>;
+                columnSizingInfo?: Record<string, unknown>;
+                pagination?: Readonly<{
+                    pageIndex?: number;
+                    pageSize?: number;
+                }>;
+                rowSelection?: Record<string, boolean>;
+            }>;
+        }>;
         paginationLeft?: import("./table.vue.js").Markdown;
         paginationRight?: import("./table.vue.js").Markdown;
+        paginationPageSizes?: ReadonlyArray<number>;
     }>) => any;
 }, string, import("vue").PublicProps, Readonly<{
     config: import("effect").Effect.Effect<TableConfig>;
@@ -63,9 +96,42 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
             grow?: boolean;
         }>[];
         cellStyles?: import("./table.vue.js").Expression;
-        props?: Omit<import("@tanstack/table-core").TableOptions<unknown>, "columns" | "data" | "getRowId" | "getCoreRowModel">;
+        props?: Readonly<{
+            [key: string]: unknown;
+            initialState?: Readonly<{
+                columnVisibility?: Record<string, boolean>;
+                columnOrder?: ReadonlyArray<string>;
+                columnPinning?: Readonly<{
+                    left?: ReadonlyArray<string>;
+                    right?: ReadonlyArray<string>;
+                }>;
+                rowPinning?: Readonly<{
+                    top?: ReadonlyArray<string>;
+                    bottom?: ReadonlyArray<string>;
+                }>;
+                columnFilters?: ReadonlyArray<Readonly<{
+                    id: string;
+                    value: unknown;
+                }>>;
+                globalFilter?: unknown;
+                sorting?: ReadonlyArray<Readonly<{
+                    id: string;
+                    desc: boolean;
+                }>>;
+                expanded?: boolean | Record<string, boolean>;
+                grouping?: ReadonlyArray<string>;
+                columnSizing?: Record<string, number>;
+                columnSizingInfo?: Record<string, unknown>;
+                pagination?: Readonly<{
+                    pageIndex?: number;
+                    pageSize?: number;
+                }>;
+                rowSelection?: Record<string, boolean>;
+            }>;
+        }>;
         paginationLeft?: import("./table.vue.js").Markdown;
         paginationRight?: import("./table.vue.js").Markdown;
+        paginationPageSizes?: ReadonlyArray<number>;
     }>) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     [x: string]: ((props: {

package/dist/runtime/components/ui/dropdown-menu/DropdownMenuItem.vue

@@ -22,7 +22,7 @@ const forwardedProps = useForwardPropsEmits(delegatedProps, emits);
     :data-inset="inset ? '' : void 0"
     :data-variant="variant"
     v-bind="forwardedProps"
-    :class="cn('focus:bg-[color-mix(in_srgb,var(--primary)_10%,white)] hover:bg-[color-mix(in_srgb,var(--primary)_10%,white)] focus:text-(--primary) hover:text-(--primary) data-[variant=destructive]:text-red-600 data-[variant=destructive]:focus:bg-red-200 dark:data-[variant=destructive]:focus:bg-red-800 data-[variant=destructive]:focus:text-red-600 data-[variant=destructive]:*:[svg]:text-red-600! [&_svg:not([class*=\'text-\'])]:text-zinc-300 relative flex cursor-pointer items-center gap-2 rounded-sm p-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4', props.class)"
+    :class="cn('focus:bg-[color-mix(in_srgb,var(--primary)_10%,white)] hover:bg-[color-mix(in_srgb,var(--primary)_10%,white)] focus:text-(--primary) hover:text-(--primary) data-[variant=destructive]:text-red-600 data-[variant=destructive]:focus:bg-red-200 data-[variant=destructive]:focus:text-red-600 data-[variant=destructive]:*:[svg]:text-red-600! [&_svg:not([class*=\'text-\'])]:text-zinc-300 relative flex cursor-pointer items-center gap-2 rounded-sm p-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4', props.class)"
   >
     <slot />
   </DropdownMenuItem>

package/dist/runtime/components/ui/field/FieldLabel.vue

@@ -12,7 +12,7 @@ const props = defineProps({
     :class="cn(
   'group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:text-zinc-600 group-data-[disabled=true]/field:opacity-100',
   'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border *:data-[slot=field]:p-4',
-  'has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10',
+  'has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary',
   props.class
 )"
   >

package/dist/runtime/components/ui/fields/Fields.vue

@@ -1,7 +1,7 @@
 <script>
 import { Icon } from "@iconify/vue";
 import { useNuxtApp } from "#app";
-import { ref, toRaw, useId, watchEffect } from "vue";
+import { ref, toRaw, useId, watch, watchEffect } from "vue";
 import { Field, FieldContent, FieldError, FieldLabel } from "../field";
 import { Button } from "../button";
 import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupCombobox, InputGroupInput, InputGroupNumberField } from "../input-group";
@@ -16,7 +16,7 @@ import { Skeleton } from "../skeleton";
 import z from "zod";
 import { Effect } from "effect";
 import { computedAsync } from "@vueuse/core";
-import { localeC, dotPropC, expressionC } from "../../../utils/coders";
+import { getLocalizedText, localeC, dotPropC, expressionC } from "../../../utils/coders";
 import { CalendarDate, getLocalTimeZone } from "@internationalized/date";
 import { format, parse } from "date-fns";
 import { TZDate } from "@date-fns/tz";
@@ -102,6 +102,7 @@ const modelValue = defineModel("modelValue", { type: Object, ...{
 } });
 const isCheating = useCheating();
 const isConfiguratorOpen = ref(false);
+const displayFields = ref([]);
 const validationErrors = ref({});
 const calendarOpen = ref({});
 function toCalendarDateValue(value, valueFormat) {
@@ -159,6 +160,9 @@ function validateField(field) {
 function isFieldInvalid(field) {
   return validationErrors.value[field.path] !== void 0;
 }
+function getFieldLabel(field) {
+  return getLocalizedText(field.title, locale.value) ?? field.path;
+}
 function renderValidationMessage(field) {
   const error = validationErrors.value[field.path];
   if (!error) return "";
@@ -180,11 +184,15 @@ function handleCalendarBlur(field) {
   }, 0);
 }
 function handleConfiguratorConfirm(nextFields) {
+  displayFields.value = nextFields.slice();
   emit("update:fields", nextFields);
 }
+watch(fields, (value) => {
+  displayFields.value = (value ?? []).slice();
+}, { immediate: true });
 watchEffect(() => {
   const activePaths = /* @__PURE__ */ new Set();
-  for (const field of fields.value ?? []) {
+  for (const field of displayFields.value) {
     if (!isFieldHidden(field) && !isFieldDisabled(field)) {
       activePaths.add(field.path);
     }
@@ -224,7 +232,7 @@ watchEffect(() => {
     <FieldsConfiguratorDialog
       v-if="fields"
       v-model:open="isConfiguratorOpen"
-      :fields="fields"
+      :fields="displayFields"
       @confirm="handleConfiguratorConfirm"
     />
 
@@ -234,7 +242,7 @@ watchEffect(() => {
     />
 
     <template
-      v-for="field in fields"
+      v-for="field in displayFields"
       :key="field.path"
     >
       <Field
@@ -245,7 +253,7 @@ watchEffect(() => {
         :style="field.style ? $dsl.evaluate`${field.style}`() : {}"
       >
         <FieldLabel :for="['string', 'number'].includes(field.type) ? `${id}:${field.path}` : void 0">
-          {{ field.title.find((r) => r.locale === locale)?.message ?? field.title[0]?.message }}
+          {{ getFieldLabel(field) }}
           <span v-if="isCheating">
             <span class="font-mono">{{ field.path }}</span>
           </span>

package/dist/runtime/components/ui/fields-configurator/FieldsConfiguratorDialog.vue

@@ -4,6 +4,7 @@ import { Icon } from "@iconify/vue";
 import { computed, nextTick, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import { cn } from "../../../utils/cn";
+import { getLocalizedText } from "../../../utils/coders";
 import { Button } from "../button";
 import {
   Dialog,
@@ -13,6 +14,7 @@ import {
   DialogHeader,
   DialogTitle
 } from "../dialog";
+import Locale from "../locale/Locale.vue";
 const props = defineProps({
   fields: { type: Array, required: true }
 });
@@ -30,8 +32,7 @@ const generalItem = computed(() => ({
   label: t("general")
 }));
 function getFieldLabel(field) {
-  const localizedTitle = field.title.find((item) => item.locale === locale.value && item.message.trim().length > 0);
-  return localizedTitle?.message ?? field.path;
+  return getLocalizedText(field.title, locale.value) ?? field.path;
 }
 const fieldItems = computed(() => draftFields.value.map((field) => ({
   itemId: field.path,
@@ -144,6 +145,12 @@ function deleteField(itemId) {
   const nextField = nextFields[deleteIndex] ?? nextFields[deleteIndex - 1];
   selectedItemId.value = nextField?.path ?? "general";
 }
+function updateSelectedFieldTitle(value) {
+  if (!selectedField.value) {
+    return;
+  }
+  draftFields.value = draftFields.value.map((field) => field.path === selectedField.value?.path ? { ...field, title: value } : field);
+}
 function confirmChanges() {
   emit("confirm", draftFields.value.slice());
   open.value = false;
@@ -230,12 +237,6 @@ function confirmChanges() {
                     >
                       {{ item.label }}
                     </span>
-                    <span
-                      data-slot="fields-configurator-field-path"
-                      class="block truncate text-xs text-zinc-400"
-                    >
-                      {{ item.path }}
-                    </span>
                   </button>
 
                   <button
@@ -286,10 +287,23 @@ function confirmChanges() {
 
           <div
             v-else-if="selectedField"
-            data-slot="fields-configurator-field-placeholder"
-            class="mt-6 flex min-h-48 items-center justify-center rounded-lg border border-dashed border-zinc-200 bg-zinc-50/60 px-6 text-center text-sm text-zinc-400"
+            data-slot="fields-configurator-field-main"
+            class="mt-6 flex flex-col gap-6"
           >
-            {{ t("field-placeholder", { field: selectedItemLabel }) }}
+            <section
+              data-slot="fields-configurator-field-label-section"
+              class="flex flex-col gap-2"
+            >
+              <p class="text-xs font-medium text-zinc-500">
+                {{ t("field-label") }}
+              </p>
+
+              <Locale
+                data-slot="fields-configurator-field-title-locale"
+                :model-value="selectedField.title"
+                @update:model-value="updateSelectedFieldTitle"
+              />
+            </section>
           </div>
         </section>
       </div>
@@ -326,7 +340,7 @@ function confirmChanges() {
     "general": "通用",
     "general-placeholder": "这里会放置字段集合的通用配置。",
     "general-empty": "通用配置区域预留中。",
-    "field-placeholder": "字段“{field}”的配置区域预留中。",
+    "field-label": "Label",
     "no-fields": "还没有字段。",
     "drag-field": "拖拽调整字段顺序：{field}",
     "delete-field": "删除字段：{field}",
@@ -339,7 +353,7 @@ function confirmChanges() {
     "general": "共通",
     "general-placeholder": "ここにはフィールド群の共通設定を配置します。",
     "general-empty": "共通設定エリアはまだ準備中です。",
-    "field-placeholder": "フィールド「{field}」の設定エリアはまだ準備中です。",
+    "field-label": "Label",
     "no-fields": "フィールドがありません。",
     "drag-field": "{field} の順序をドラッグで変更",
     "delete-field": "{field} を削除",
@@ -352,7 +366,7 @@ function confirmChanges() {
     "general": "General",
     "general-placeholder": "Shared settings for this field group will live here.",
     "general-empty": "The shared settings area is reserved for now.",
-    "field-placeholder": "The configuration area for \"{field}\" is reserved for now.",
+    "field-label": "Label",
     "no-fields": "No fields yet.",
     "drag-field": "Drag to reorder field {field}",
     "delete-field": "Delete field {field}",

package/dist/runtime/components/ui/icon-picker/IconPicker.d.vue.ts

@@ -0,0 +1,15 @@
+import type { HTMLAttributes } from 'vue';
+type __VLS_Props = {
+    modelValue?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    invalid?: boolean;
+    class?: HTMLAttributes['class'];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (args_0: string | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((args_0: string | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/ui/icon-picker/IconPicker.vue

@@ -0,0 +1,178 @@
+<script setup>
+import { icons } from "@iconify-json/fluent";
+import { Icon } from "@iconify/vue";
+import { useVirtualizer } from "@tanstack/vue-virtual";
+import { computed, shallowRef, ref, watch } from "vue";
+import { cn } from "../../../utils/cn";
+import { InputGroup, InputGroupAddon, InputGroupInput } from "../input-group";
+defineOptions({
+  inheritAttrs: false
+});
+const ICON_COLUMNS = 6;
+const ICON_ROW_HEIGHT = 60;
+const props = defineProps({
+  modelValue: { type: String, required: false },
+  placeholder: { type: String, required: false },
+  disabled: { type: Boolean, required: false },
+  invalid: { type: Boolean, required: false },
+  class: { type: null, required: false }
+});
+const emit = defineEmits(["update:modelValue"]);
+const availableIcons = Object.entries(icons.icons).filter(([name]) => name.endsWith("-20-regular")).map(([name, icon]) => ({
+  id: `fluent:${name}`,
+  icon
+}));
+const availableIconIds = new Set(availableIcons.map((icon) => icon.id));
+const searchQuery = ref("");
+const galleryElement = shallowRef(null);
+const selectedIcon = computed(() => props.modelValue && availableIconIds.has(props.modelValue) ? availableIcons.find((icon) => icon.id === props.modelValue) : void 0);
+const filteredIcons = computed(() => {
+  const term = searchQuery.value.trim().toLowerCase();
+  if (!term) {
+    return availableIcons;
+  }
+  return availableIcons.filter((icon) => icon.id.includes(term));
+});
+const rowCount = computed(() => Math.ceil(filteredIcons.value.length / ICON_COLUMNS));
+const rowVirtualizer = useVirtualizer(computed(() => ({
+  count: rowCount.value,
+  getScrollElement: () => galleryElement.value,
+  estimateSize: () => ICON_ROW_HEIGHT,
+  overscan: 4
+})));
+watch(() => props.modelValue, (value) => {
+  if (value && availableIconIds.has(value)) {
+    searchQuery.value = "";
+  }
+});
+function iconsForRow(index) {
+  const start = index * ICON_COLUMNS;
+  return filteredIcons.value.slice(start, start + ICON_COLUMNS);
+}
+function selectIcon(iconId) {
+  if (props.disabled) {
+    return;
+  }
+  searchQuery.value = "";
+  emit("update:modelValue", iconId);
+}
+function clearIcon() {
+  if (props.disabled) {
+    return;
+  }
+  searchQuery.value = "";
+  emit("update:modelValue", void 0);
+}
+function handleSearchUpdate(value) {
+  searchQuery.value = String(value);
+}
+</script>
+
+<template>
+  <div
+    v-bind="$attrs"
+    data-slot="icon-picker"
+    :data-disabled="props.disabled ? 'true' : void 0"
+    :class="cn(
+  'flex min-h-88 flex-col overflow-hidden rounded-xl border bg-white',
+  props.invalid ? 'border-red-400' : 'border-zinc-200',
+  props.disabled ? 'bg-zinc-50' : void 0,
+  props.class
+)"
+  >
+    <section
+      v-if="selectedIcon"
+      data-slot="icon-picker-selected"
+      class="flex flex-1 flex-col items-center justify-center gap-4 px-6 py-8 text-center"
+    >
+      <div
+        data-slot="icon-picker-hero"
+        :data-icon-id="selectedIcon.id"
+        class="relative flex size-40 items-center justify-center rounded-3xl border border-zinc-200 bg-zinc-50 text-zinc-700 shadow-xs"
+      >
+        <button
+          type="button"
+          data-slot="icon-picker-clear"
+          class="absolute right-3 top-3 flex size-8 items-center justify-center rounded-full border border-zinc-200 bg-white text-zinc-500 transition-colors hover:border-red-200 hover:bg-red-50 hover:text-red-600 disabled:pointer-events-none disabled:opacity-60"
+          :disabled="props.disabled"
+          @click="clearIcon"
+        >
+          <Icon icon="fluent:dismiss-20-regular" />
+        </button>
+        <Icon
+          :icon="selectedIcon.icon"
+          class="size-16"
+        />
+      </div>
+
+      <p
+        data-slot="icon-picker-name"
+        class="font-mono text-sm text-zinc-500"
+      >
+        {{ selectedIcon.id }}
+      </p>
+    </section>
+
+    <template v-else>
+      <div
+        data-slot="icon-picker-search"
+        class="border-b border-zinc-200 p-4"
+      >
+        <InputGroup class="overflow-hidden">
+          <InputGroupAddon>
+            <Icon icon="fluent:search-20-regular" />
+          </InputGroupAddon>
+          <InputGroupInput
+            :model-value="searchQuery"
+            :placeholder="props.placeholder ?? 'Search icons'"
+            :disabled="props.disabled"
+            @update:model-value="handleSearchUpdate"
+          />
+        </InputGroup>
+      </div>
+
+      <div
+        v-if="filteredIcons.length > 0"
+        ref="galleryElement"
+        data-slot="icon-picker-gallery"
+        class="h-80 overflow-auto px-4 py-4"
+      >
+        <div
+          class="relative w-full"
+          :style="{ height: `${rowVirtualizer.getTotalSize()}px` }"
+        >
+          <div
+            v-for="row in rowVirtualizer.getVirtualItems()"
+            :key="String(row.key)"
+            class="absolute left-0 top-0 grid w-full grid-cols-6 gap-2"
+            :style="{
+  height: `${row.size}px`,
+  transform: `translateY(${row.start}px)`
+}"
+          >
+            <button
+              v-for="item in iconsForRow(row.index)"
+              :key="item.id"
+              type="button"
+              data-slot="icon-picker-item"
+              :data-icon-id="item.id"
+              class="flex h-12 items-center justify-center rounded-lg border border-transparent bg-zinc-50 text-zinc-600 transition-colors hover:border-zinc-200 hover:bg-zinc-100 hover:text-zinc-800 disabled:pointer-events-none disabled:opacity-60"
+              :disabled="props.disabled"
+              @click="selectIcon(item.id)"
+            >
+              <Icon :icon="item.icon" />
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div
+        v-else
+        data-slot="icon-picker-empty"
+        class="flex h-80 items-center justify-center px-6 text-center text-sm text-zinc-400"
+      >
+        No icons match your search.
+      </div>
+    </template>
+  </div>
+</template>

package/dist/runtime/components/ui/icon-picker/IconPicker.vue.d.ts

@@ -0,0 +1,15 @@
+import type { HTMLAttributes } from 'vue';
+type __VLS_Props = {
+    modelValue?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    invalid?: boolean;
+    class?: HTMLAttributes['class'];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (args_0: string | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((args_0: string | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/ui/icon-picker/index.d.ts

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

package/dist/runtime/components/ui/icon-picker/index.js

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

package/dist/runtime/components/ui/input-group/InputGroupComboboxInput.vue

@@ -20,7 +20,7 @@ function handleBlur(event) {
     :data-value="!!filterState.search"
     :aria-invalid="props.invalid ? 'true' : void 0"
     :class="cn(
-  'flex-1 px-2 rounded-none border-none bg-transparent shadow-none dark:bg-transparent peer outline-none disabled:cursor-not-allowed disabled:text-zinc-600 disabled:opacity-100'
+  'flex-1 px-2 rounded-none border-none bg-transparent shadow-none peer outline-none disabled:cursor-not-allowed disabled:text-zinc-600 disabled:opacity-100'
 )"
     @blur="handleBlur"
   />

package/dist/runtime/components/ui/input-group/InputGroupInput.vue

@@ -13,7 +13,7 @@ const props = defineProps({
     data-slot="input-group-control"
     :treat-empty-as-different-state-from-null="treatEmptyAsDifferentStateFromNull"
     :class="cn(
-  'flex-1 rounded-none border-0 bg-transparent shadow-none dark:bg-transparent peer disabled:text-zinc-600 disabled:opacity-100',
+  'flex-1 rounded-none border-0 bg-transparent shadow-none peer disabled:text-zinc-600 disabled:opacity-100',
   props.class
 )"
   />

package/dist/runtime/components/ui/input-group/InputGroupNumberField.vue

@@ -43,7 +43,7 @@ const delegatedProps = reactiveOmit(props, "class", "invalid");
       :data-value="typeof delegatedProps.modelValue === 'number'"
       :aria-invalid="props.invalid ? 'true' : void 0"
       :class="cn(
-  'flex-1 px-2 py-1 rounded-none w-full text-sm text-zinc-700 border-0 bg-transparent shadow-none dark:bg-transparent outline-none peer disabled:cursor-not-allowed disabled:text-zinc-600 disabled:opacity-100'
+  'flex-1 px-2 py-1 rounded-none w-full text-sm text-zinc-700 border-0 bg-transparent shadow-none outline-none peer disabled:cursor-not-allowed disabled:text-zinc-600 disabled:opacity-100'
 )"
       @blur="emits('blur', $event)"
     />