@shwfed/nuxt 0.1.29 → 0.1.30

package/dist/module.json

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

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

@@ -1,10 +1,59 @@
-type __VLS_Props = {
-    fields: ReadonlyArray<{
-        label: string;
-        prop: string;
-        initial?: string;
-    }>;
-};
-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>;
+import { Field } from './ui/field/index.js';
+import type { ClassValue } from 'clsx';
+type Option = Readonly<{
+    label: Record<string, string>;
+    value: string | number;
+    icon?: string;
+}>;
+type OptionsGroup = Readonly<{
+    label: Record<string, string>;
+    value: string | number;
+    options: ReadonlyArray<Option>;
+}>;
+type TextField = Readonly<{
+    type: 'string';
+    path: string;
+    label: Record<string, string>;
+    intial?: string;
+    icon?: string;
+    class?: ClassValue;
+    treatEmptyAsDifferentStateFromNull?: boolean;
+}>;
+type SelectField = Readonly<{
+    type: 'select';
+    path: string;
+    label: Record<string, string>;
+    intial?: string;
+    icon?: string;
+    options: ReadonlyArray<OptionsGroup>;
+    class?: ClassValue;
+}>;
+type Field = TextField | SelectField;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
+    fields: ReadonlyArray<Field>;
+} & {
+    modelValue?: Record<string, unknown>;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: Record<string, unknown>) => any;
+}, string, import("vue").PublicProps, Readonly<{
+    fields: ReadonlyArray<Field>;
+} & {
+    modelValue?: Record<string, unknown>;
+}> & Readonly<{
+    "onUpdate:modelValue"?: ((value: Record<string, unknown>) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    option?: (props: {
+        option: Readonly<{
+            label: Record<string, string>;
+            value: string | number;
+            icon?: string;
+        }>;
+    }) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/query.vue

@@ -1,68 +1,115 @@
-<script setup>
+<script>
 import { Icon } from "@iconify/vue";
 import { Field, FieldLabel } from "./ui/field";
-import { InputGroup, InputGroupAddon, InputGroupButton, InputCombobox } from "./ui/input-group";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./ui/tooltip";
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputCombobox } from "./ui/input-group";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
 import { useI18n } from "vue-i18n";
-import { CommandItem, CommandGroup } from "./ui/command";
-const { t } = useI18n();
-defineProps({
+import { deleteProperty, getProperty, hasProperty, setProperty } from "dot-prop";
+import { CommandGroup, CommandItem } from "./ui/command";
+import { useCheating, useId } from "#imports";
+import { defu } from "defu";
+</script>
+
+<script setup>
+const id = useId();
+const props = defineProps({
   fields: { type: Array, required: true }
 });
+const { t } = useI18n({
+  messages: props.fields.reduce((acc, field, i) => {
+    function t2(locales) {
+      return Object.fromEntries(Object.entries(locales).map(([locale, message]) => [locale, { [`${id}-${i}`]: message }]));
+    }
+    return defu(acc, t2(field.label));
+  }, {})
+});
+const modelValue = defineModel("modelValue", { type: Object, ...{
+  default: () => ({})
+} });
+const isCheating = useCheating();
 </script>
 
 <template>
-  <div
-    class="mx-auto"
-    style="width: 400px;"
-  >
-    <Field>
+  <div>
+    <Field
+      v-for="(field, i) in fields"
+      :key="field.path"
+      :class="field.class"
+    >
       <InputGroup>
-        <InputCombobox>
-          <CommandGroup heading="Search">
-            <CommandItem
-              value="1"
-            >
-              <Icon
-                icon="fluent:search-20-filled"
-              />
-              <span>
-                Search
-              </span>
-            </CommandItem>
+        <InputGroupInput
+          v-if="field.type === 'string'"
+          :treat-empty-as-different-state-from-null="field.treatEmptyAsDifferentStateFromNull"
+          :model-value="getProperty(modelValue, field.path)"
+          @update:model-value="(value) => {
+  if (!value && !field.treatEmptyAsDifferentStateFromNull) {
+    deleteProperty(modelValue, field.path);
+  } else {
+    setProperty(modelValue, field.path, value);
+  }
+}"
+        />
+        <InputCombobox
+          v-if="field.type === 'select'"
+        >
+          <CommandGroup
+            v-for="group in field.options"
+            :key="group.value"
+          >
             <CommandItem
-              value="2"
+              v-for="option in group.options"
+              :key="option.value"
+              :value="option.value"
             >
-              <Icon
-                icon="fluent:bookmark-20-filled"
-              />
-              <span>
-                Bookmark
-              </span>
+              <slot
+                name="option"
+                :option="option"
+              >
+                <Icon
+                  v-if="option.icon"
+                  :icon="option.icon"
+                />
+                <span>{{ option.label }}</span>
+              </slot>
             </CommandItem>
           </CommandGroup>
         </InputCombobox>
+        <InputGroupAddon v-if="field.icon">
+          <Icon
+            :icon="field.icon"
+          />
+        </InputGroupAddon>
         <InputGroupAddon
+          v-if="hasProperty(modelValue, field.path)"
           align="inline-end"
         >
           <Tooltip :delay-duration="800">
-            <TooltipProvider>
-              <TooltipTrigger as-child>
-                <InputGroupButton>
+            <TooltipTrigger>
+              <InputGroupButton as-child>
+                <button
+                  type="button"
+                  @click="deleteProperty(modelValue, field.path)"
+                >
                   <Icon
                     icon="fluent:dismiss-20-regular"
                   />
-                </InputGroupButton>
-              </TooltipTrigger>
-              <TooltipContent>
-                {{ t("clear") }}
-              </TooltipContent>
-            </TooltipProvider>
+                </button>
+              </InputGroupButton>
+            </TooltipTrigger>
+            <TooltipContent>
+              {{ t("clear") }}
+            </TooltipContent>
           </Tooltip>
         </InputGroupAddon>
       </InputGroup>
-      <FieldLabel>
-        Query
+      <FieldLabel
+        v-if="isCheating"
+        class="font-mono"
+      >
+        {{ field.path }}
+      </FieldLabel>
+      <FieldLabel v-else>
+        {{ t(`${id}-${i}`) }}
       </FieldLabel>
     </Field>
   </div>

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

@@ -1,10 +1,59 @@
-type __VLS_Props = {
-    fields: ReadonlyArray<{
-        label: string;
-        prop: string;
-        initial?: string;
-    }>;
-};
-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>;
+import { Field } from './ui/field/index.js';
+import type { ClassValue } from 'clsx';
+type Option = Readonly<{
+    label: Record<string, string>;
+    value: string | number;
+    icon?: string;
+}>;
+type OptionsGroup = Readonly<{
+    label: Record<string, string>;
+    value: string | number;
+    options: ReadonlyArray<Option>;
+}>;
+type TextField = Readonly<{
+    type: 'string';
+    path: string;
+    label: Record<string, string>;
+    intial?: string;
+    icon?: string;
+    class?: ClassValue;
+    treatEmptyAsDifferentStateFromNull?: boolean;
+}>;
+type SelectField = Readonly<{
+    type: 'select';
+    path: string;
+    label: Record<string, string>;
+    intial?: string;
+    icon?: string;
+    options: ReadonlyArray<OptionsGroup>;
+    class?: ClassValue;
+}>;
+type Field = TextField | SelectField;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
+    fields: ReadonlyArray<Field>;
+} & {
+    modelValue?: Record<string, unknown>;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: Record<string, unknown>) => any;
+}, string, import("vue").PublicProps, Readonly<{
+    fields: ReadonlyArray<Field>;
+} & {
+    modelValue?: Record<string, unknown>;
+}> & Readonly<{
+    "onUpdate:modelValue"?: ((value: Record<string, unknown>) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    option?: (props: {
+        option: Readonly<{
+            label: Record<string, string>;
+            value: string | number;
+            icon?: string;
+        }>;
+    }) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -11,11 +11,11 @@ export type Accessor = string | Readonly<{
 }>;
 export type Column = Readonly<{
     id?: string;
-    title?: string;
+    title?: Record<string, string>;
     accessor?: Accessor;
     accessorKey?: string;
     renderer?: Render;
-    tooltip?: string;
+    tooltip?: Record<string, string>;
     size?: number;
     enableSorting?: boolean;
     enableMultiSorting?: boolean;

package/dist/runtime/components/table.vue

@@ -4,12 +4,15 @@ import { useVirtualizer } from "@tanstack/vue-virtual";
 import { Icon } from "@iconify/vue";
 import { getProperty } from "dot-prop";
 import { Pagination } from "reka-ui/namespaced";
+import { useI18n } from "vue-i18n";
 import { computed, ref } from "vue";
 import { useNuxtApp } from "#app";
 import { Button } from "./ui/button";
+import { NumberField, NumberFieldInput } from "./ui/number-field";
 import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
 import { useTableRenderers } from "../composables/useTableRenderers";
 import { useCheating } from "#imports";
+import { defu } from "defu";
 </script>
 
 <script setup>
@@ -26,6 +29,23 @@ const props = defineProps({
   paginationLeft: { type: String, required: false },
   paginationRight: { type: String, required: false }
 });
+const { t } = useI18n({
+  messages: props.columns.reduce((acc, column) => {
+    function f(column2) {
+      return defu(
+        acc,
+        Object.fromEntries(
+          Object.entries(
+            column2.title ?? {}
+          ).map(([locale, message]) => [locale, { [genColumnId(column2)]: message }])
+        ),
+        column2.tooltip ? Object.fromEntries(Object.entries(column2.tooltip).map(([locale, message]) => [locale, { [`${genColumnId(column2)}-tooltip`]: message }])) : {},
+        ...column2.columns?.map((column3) => f(column3)) ?? []
+      );
+    }
+    return f(column);
+  }, {})
+});
 const slots = defineSlots();
 const { $dsl } = useNuxtApp();
 const isCheating = useCheating();
@@ -36,6 +56,8 @@ function genColumnId(column) {
     return column.accessor;
   } else if (column.accessor) {
     return column.accessor.read;
+  } else if (column.id) {
+    return column.id;
   }
   return crypto.randomUUID();
 }
@@ -43,14 +65,14 @@ function translate(column) {
   if (Array.isArray(column.columns) && column.columns.length > 0) {
     return {
       id: column.id ?? genColumnId(column),
-      header: column.title,
+      header: t(genColumnId(column)),
       columns: column.columns?.map((column2) => translate(column2)) ?? [],
       enableSorting: column.enableSorting ?? false,
       enableMultiSort: column.enableMultiSorting,
       enablePinning: column.enablePinning,
       size: column.size,
       meta: {
-        tooltip: column.tooltip,
+        tooltip: column.tooltip ? `${genColumnId(column)}-tooltip` : void 0,
         grow: column.grow ?? false
       }
     };
@@ -59,7 +81,7 @@ function translate(column) {
   const options = renderer.parseOptions(column.renderer && typeof column.renderer === "object" && "props" in column.renderer ? column.renderer.props : null);
   return {
     id: column.id ?? genColumnId(column),
-    header: (ctx) => renderer.header?.({ ctx, options }) ?? column.title,
+    header: (ctx) => renderer.header?.({ ctx, options }) ?? t(genColumnId(column)),
     cell: (ctx) => {
       if (ctx.column.id in slots) {
         return slots[ctx.column.id]?.({ cell: ctx });
@@ -89,7 +111,7 @@ function translate(column) {
     size: column.size,
     columns: column.columns?.map((column2) => translate(column2)) ?? [],
     meta: {
-      tooltip: column.tooltip,
+      tooltip: column.tooltip ? `${genColumnId(column)}-tooltip` : void 0,
       grow: column.grow ?? false
     },
     ...renderer.columnDefOverrides
@@ -305,19 +327,38 @@ function getSortIcon(column) {
                     align="center"
                     side="top"
                   >
-                    <span v-html="$md.inline`${header.column.columnDef.meta.tooltip}`()" />
+                    <span v-html="$md.inline`${t(`${header.column.id}-tooltip`)}`()" />
                   </TooltipContent>
                 </Tooltip>
 
-                <Button
+                <Tooltip
                   v-if="!header.isPlaceholder && header.column.getCanSort()"
-                  variant="ghost"
-                  size="xs"
-                  class="absolute hover:bg-transparent right-1 top-1/2 -translate-y-1/2 transform-3d group-hover:opacity-100 opacity-60 transition-opacity duration-180"
-                  @click="(event) => header.column.getToggleSortingHandler()?.(event)"
+                  :delay-duration="800"
                 >
-                  <Icon :icon="getSortIcon(header.column)" />
-                </Button>
+                  <TooltipTrigger as-child>
+                    <Button
+                      variant="ghost"
+                      size="xs"
+                      :class="[
+  'absolute hover:bg-transparent right-1 top-1/2 -translate-y-1/2 transform-3d transition-opacity duration-180',
+  !header.column.getIsSorted() ? 'opacity-30 hover:opacity-60' : 'text-(--primary)/80 hover:text-(--primary)'
+]"
+                      as-child
+                    >
+                      <button
+                        type="button"
+                        @click="header.column.getToggleSortingHandler()?.($event)"
+                      >
+                        <Icon :icon="getSortIcon(header.column)" />
+                      </button>
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    {{
+                      header.column.getIsSorted() ? t(`table-sort-${header.column.getIsSorted()}`) : t("table-sort-unsorted")
+                    }}
+                  </TooltipContent>
+                </Tooltip>
 
                 <div
                   v-if="!header.isPlaceholder && header.column.getCanResize() && (!header.column.getIsLastColumn('right') || !table.getIsSomeColumnsPinned('right') && !header.column.getIsLastColumn('center'))"
@@ -437,7 +478,15 @@ function getSortIcon(column) {
             &nbsp;
       </div>
       <div class="flex items-center gap-4">
-        <span class="text-xs">{{ `\u5171 ${props.data.length} \u6761` }}</span>
+        <i18n-t
+          keypath="total"
+          tag="span"
+          class="text-xs"
+        >
+          <template #count>
+            <strong>{{ props.data.length }}</strong>
+          </template>
+        </i18n-t>
         <Pagination.Root
           show-edges
           :total="props.data.length"
@@ -480,7 +529,7 @@ function getSortIcon(column) {
                 v-if="page.type === 'page'"
                 :class="[
   'w-7 h-7 flex items-center justify-center rounded text-xs bg-transparent',
-  'data-selected:text-(--primary) data-selected:border-(--primary) hover:bg-zinc-100 transition cursor-pointer'
+  'data-selected:text-(--primary) hover:bg-zinc-100 transition cursor-pointer'
 ]"
                 :value="page.value"
               >
@@ -518,7 +567,22 @@ function getSortIcon(column) {
             </Pagination.Last>
           </Pagination.List>
         </Pagination.Root>
-        <span class="text-xs">前往</span>
+        <i18n-t
+          keypath="goto"
+          tag="div"
+          class="text-xs flex items-center gap-2"
+        >
+          <template #page>
+            <NumberField
+              :model-value="table.getState().pagination.pageIndex + 1"
+              :min="1"
+              :max="Math.ceil(props.data.length / table.getState().pagination.pageSize)"
+              @update:model-value="(value) => table.setPageIndex(value - 1)"
+            >
+              <NumberFieldInput class="h-6 w-16 text-xs" />
+            </NumberField>
+          </template>
+        </i18n-t>
       </div>
       <div
         :class="[
@@ -541,3 +605,29 @@ function getSortIcon(column) {
     </div>
   </div>
 </template>
+
+<i18n lang="json">
+{
+  "zh": {
+    "total": "共 {count} 条",
+    "goto": "前往 {page} 页",
+    "table-sort-asc": "升序",
+    "table-sort-desc": "降序",
+    "table-sort-unsorted": "未排序"
+  },
+  "ja": {
+    "total": "合計 {count} 件",
+    "goto": "ページ {page} に移動",
+    "table-sort-asc": "昇順",
+    "table-sort-desc": "降順",
+    "table-sort-unsorted": "未排序"
+  },
+  "en": {
+    "total": "Total {count} items",
+    "goto": "Go to page {page}",
+    "table-sort-asc": "Ascending",
+    "table-sort-desc": "Descending",
+    "table-sort-unsorted": "Unsorted"
+  }
+}
+</i18n>

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

@@ -11,11 +11,11 @@ export type Accessor = string | Readonly<{
 }>;
 export type Column = Readonly<{
     id?: string;
-    title?: string;
+    title?: Record<string, string>;
     accessor?: Accessor;
     accessorKey?: string;
     renderer?: Render;
-    tooltip?: string;
+    tooltip?: Record<string, string>;
     size?: number;
     enableSorting?: boolean;
     enableMultiSorting?: boolean;

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

@@ -17,7 +17,7 @@ export const fieldVariants = cva(
         ],
         floating: [
           "relative *:data-[slot=field-label]:absolute *:data-[slot=field-label]:text-zinc-500",
-          "*:data-[slot=field-label]:top-1/2 *:data-[slot=field-label]:-translate-1/2 *:data-[slot=field-label]:transition-all *:data-[slot=field-label]:duration-180",
+          "*:data-[slot=field-label]:top-1/2 *:data-[slot=field-label]:-translate-y-1/2 *:data-[slot=field-label]:transition-all *:data-[slot=field-label]:duration-180",
           "*:data-[slot=field-label]:pointer-events-none *:data-[slot=field-label]:select-none *:data-[slot=field-label]:cursor-text",
           "has-data-[value=true]:**:data-[slot=field-label]:top-0",
           "**:data-[slot=field-label]:bg-white",
@@ -30,8 +30,8 @@ export const fieldVariants = cva(
           "has-[[data-slot=input-group-control]:focus]:**:data-[slot=field-label]:text-zinc-700",
           "has-data-[state=open]:**:data-[slot=field-label]:text-zinc-700",
           "has-data-[value=true]:**:data-[slot=field-label]:text-zinc-700",
-          "*:data-[slot=field-label]:left-7",
-          "has-[[data-slot=input-group-addon][data-align=inline-start]]:**:data-[slot=field-label]:left-14"
+          "*:data-[slot=field-label]:left-3",
+          "has-[[data-slot=input-group-addon][data-align=inline-start]]:**:data-[slot=field-label]:left-7"
         ]
       }
     },

package/dist/runtime/components/ui/input/Input.d.vue.ts

@@ -3,6 +3,7 @@ type __VLS_Props = {
     defaultValue?: string | number;
     modelValue?: string | number;
     class?: HTMLAttributes['class'];
+    treatEmptyAsDifferentStateFromNull?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:modelValue": (payload: string | number) => any;

package/dist/runtime/components/ui/input/Input.vue

@@ -4,7 +4,8 @@ import { cn } from "../../../utils/cn";
 const props = defineProps({
   defaultValue: { type: [String, Number], required: false },
   modelValue: { type: [String, Number], required: false },
-  class: { type: null, required: false }
+  class: { type: null, required: false },
+  treatEmptyAsDifferentStateFromNull: { type: Boolean, required: false }
 });
 const emits = defineEmits(["update:modelValue"]);
 const modelValue = useVModel(props, "modelValue", emits, {
@@ -17,7 +18,7 @@ const modelValue = useVModel(props, "modelValue", emits, {
   <input
     v-model="modelValue"
     data-slot="input"
-    :data-value="!!modelValue"
+    :data-value="!treatEmptyAsDifferentStateFromNull ? !!modelValue : modelValue !== void 0"
     :class="cn(
   'file:text-zinc-700 placeholder:text-zinc-700 border-zinc-200 h-9 w-full min-w-0 rounded border bg-transparent px-3 py-1 text-base transition-colors ease-out duration-180 outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
   'aria-invalid:border-red-400 hover:border-zinc-300 focus-visible:border-(--primary)',

package/dist/runtime/components/ui/input/Input.vue.d.ts

@@ -3,6 +3,7 @@ type __VLS_Props = {
     defaultValue?: string | number;
     modelValue?: string | number;
     class?: HTMLAttributes['class'];
+    treatEmptyAsDifferentStateFromNull?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:modelValue": (payload: string | number) => any;

package/dist/runtime/components/ui/input-group/InputCombobox.d.vue.ts

@@ -1,8 +1,9 @@
+import { type PopoverContentProps } from 'reka-ui';
 declare var __VLS_48: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_48) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<PopoverContentProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PopoverContentProps> & 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;

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

@@ -4,7 +4,34 @@ import { Command, CommandList, CommandEmpty } from "../command";
 import InputComboboxInput from "./InputComboboxInput.vue";
 import { useI18n } from "vue-i18n";
 import { Icon } from "@iconify/vue";
+import { useForwardProps } from "reka-ui";
+import { getInputGroupReference } from ".";
 const { t } = useI18n();
+const props = defineProps({
+  forceMount: { type: Boolean, required: false },
+  side: { type: null, required: false },
+  sideOffset: { type: Number, required: false },
+  sideFlip: { type: Boolean, required: false },
+  align: { type: null, required: false },
+  alignOffset: { type: Number, required: false },
+  alignFlip: { type: Boolean, required: false },
+  avoidCollisions: { type: Boolean, required: false },
+  collisionBoundary: { type: null, required: false },
+  collisionPadding: { type: [Number, Object], required: false },
+  arrowPadding: { type: Number, required: false },
+  hideShiftedArrow: { type: Boolean, required: false },
+  sticky: { type: String, required: false },
+  hideWhenDetached: { type: Boolean, required: false },
+  positionStrategy: { type: String, required: false },
+  updatePositionStrategy: { type: String, required: false },
+  disableUpdateOnLayoutShift: { type: Boolean, required: false },
+  prioritizePosition: { type: Boolean, required: false },
+  reference: { type: null, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  disableOutsidePointerEvents: { type: Boolean, required: false }
+});
+const forwarded = useForwardProps(props);
 </script>
 
 <template>
@@ -17,7 +44,8 @@ const { t } = useI18n();
         <InputComboboxInput />
       </PopoverTrigger>
       <PopoverContent
-        :side-offset="12"
+        v-bind="forwarded"
+        :reference="getInputGroupReference().value ?? void 0"
         :style="{
   minWidth: 'var(--reka-popover-trigger-width)'
 }"

package/dist/runtime/components/ui/input-group/InputCombobox.vue.d.ts

@@ -1,8 +1,9 @@
+import { type PopoverContentProps } from 'reka-ui';
 declare var __VLS_48: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_48) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<PopoverContentProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PopoverContentProps> & 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;

package/dist/runtime/components/ui/input-group/InputGroup.d.vue.ts

@@ -1,4 +1,4 @@
-import type { HTMLAttributes } from 'vue';
+import { type HTMLAttributes } from 'vue';
 type __VLS_Props = {
     class?: HTMLAttributes['class'];
 };

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

@@ -1,12 +1,16 @@
 <script setup>
+import { useTemplateRef } from "vue";
 import { cn } from "../../../utils/cn";
+import { setInputGroupReference } from ".";
 const props = defineProps({
   class: { type: null, required: false }
 });
+setInputGroupReference(useTemplateRef("input-group"));
 </script>
 
 <template>
   <div
+    ref="input-group"
     data-slot="input-group"
     role="group"
     :class="cn(

package/dist/runtime/components/ui/input-group/InputGroup.vue.d.ts

@@ -1,4 +1,4 @@
-import type { HTMLAttributes } from 'vue';
+import { type HTMLAttributes } from 'vue';
 type __VLS_Props = {
     class?: HTMLAttributes['class'];
 };

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

@@ -1,6 +1,7 @@
 import type { HTMLAttributes } from 'vue';
 type __VLS_Props = {
     class?: HTMLAttributes['class'];
+    treatEmptyAsDifferentStateFromNull?: boolean;
 };
 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;

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

@@ -2,7 +2,8 @@
 import { cn } from "../../../utils/cn";
 import { Input } from "../input";
 const props = defineProps({
-  class: { type: null, required: false }
+  class: { type: null, required: false },
+  treatEmptyAsDifferentStateFromNull: { type: Boolean, required: false }
 });
 </script>
 
@@ -10,6 +11,7 @@ const props = defineProps({
   <Input
     ref="input"
     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',
   props.class

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

@@ -1,6 +1,7 @@
 import type { HTMLAttributes } from 'vue';
 type __VLS_Props = {
     class?: HTMLAttributes['class'];
+    treatEmptyAsDifferentStateFromNull?: boolean;
 };
 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;

package/dist/runtime/components/ui/input-group/index.d.ts

@@ -1,4 +1,5 @@
 import type { VariantProps } from 'class-variance-authority';
+import type { ShallowRef } from 'vue';
 export { default as InputGroup } from './InputGroup.vue.js';
 export { default as InputGroupAddon } from './InputGroupAddon.vue.js';
 export { default as InputGroupButton } from './InputGroupButton.vue.js';
@@ -14,3 +15,4 @@ export declare const inputGroupButtonVariants: (props?: ({
     size?: "sm" | "xs" | "icon-xs" | "icon-sm" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type InputGroupButtonVariants = VariantProps<typeof inputGroupButtonVariants>;
+export declare const getInputGroupReference: <T extends ShallowRef<HTMLDivElement | null> | null | undefined = ShallowRef<HTMLDivElement | null>>(fallback?: T | undefined) => T extends null ? ShallowRef<HTMLDivElement | null> | null : ShallowRef<HTMLDivElement | null>, setInputGroupReference: (contextValue: ShallowRef<HTMLDivElement | null>) => ShallowRef<HTMLDivElement | null>;

package/dist/runtime/components/ui/input-group/index.js

@@ -1,4 +1,5 @@
 import { cva } from "class-variance-authority";
+import { createContext } from "reka-ui";
 export { default as InputGroup } from "./InputGroup.vue";
 export { default as InputGroupAddon } from "./InputGroupAddon.vue";
 export { default as InputGroupButton } from "./InputGroupButton.vue";
@@ -38,3 +39,4 @@ export const inputGroupButtonVariants = cva(
     }
   }
 );
+export const [getInputGroupReference, setInputGroupReference] = createContext("InputGroup");

package/dist/runtime/components/ui/number-field/NumberField.d.vue.ts

@@ -0,0 +1,25 @@
+import type { NumberFieldRootProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+type __VLS_Props = NumberFieldRootProps & {
+    class?: HTMLAttributes['class'];
+};
+declare var __VLS_8: {
+    modelValue: number | undefined;
+    textValue: string;
+};
+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": (val: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((val: number) => 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/number-field/NumberField.vue

@@ -0,0 +1,39 @@
+<script setup>
+import { reactiveOmit } from "@vueuse/core";
+import { NumberFieldRoot, useForwardPropsEmits } from "reka-ui";
+import { cn } from "../../../utils/cn";
+const props = defineProps({
+  defaultValue: { type: Number, required: false },
+  modelValue: { type: [Number, null], required: false },
+  min: { type: Number, required: false },
+  max: { type: Number, required: false },
+  step: { type: Number, required: false },
+  stepSnapping: { type: Boolean, required: false },
+  focusOnChange: { type: Boolean, required: false },
+  formatOptions: { type: null, required: false },
+  locale: { type: String, required: false },
+  disabled: { type: Boolean, required: false },
+  readonly: { type: Boolean, required: false },
+  disableWheelChange: { type: Boolean, required: false },
+  invertWheelChange: { type: Boolean, 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>
+  <NumberFieldRoot
+    v-slot="slotProps"
+    v-bind="forwarded"
+    :class="cn('grid gap-1.5', props.class)"
+  >
+    <slot v-bind="slotProps" />
+  </NumberFieldRoot>
+</template>

package/dist/runtime/components/ui/number-field/NumberField.vue.d.ts

@@ -0,0 +1,25 @@
+import type { NumberFieldRootProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+type __VLS_Props = NumberFieldRootProps & {
+    class?: HTMLAttributes['class'];
+};
+declare var __VLS_8: {
+    modelValue: number | undefined;
+    textValue: string;
+};
+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": (val: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((val: number) => 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/number-field/NumberFieldContent.d.vue.ts

@@ -0,0 +1,17 @@
+import type { HTMLAttributes } from 'vue';
+type __VLS_Props = {
+    class?: HTMLAttributes['class'];
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => 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/number-field/NumberFieldContent.vue

@@ -0,0 +1,12 @@
+<script setup>
+import { cn } from "../../../utils/cn";
+const props = defineProps({
+  class: { type: null, required: false }
+});
+</script>
+
+<template>
+  <div :class="cn('relative *:data-[slot=input]:has-*:data-[slot=increment]:pr-5 *:data-[slot=input]:has-*:data-[slot=decrement]:pl-5', props.class)">
+    <slot />
+  </div>
+</template>

package/dist/runtime/components/ui/number-field/NumberFieldContent.vue.d.ts

@@ -0,0 +1,17 @@
+import type { HTMLAttributes } from 'vue';
+type __VLS_Props = {
+    class?: HTMLAttributes['class'];
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => 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/number-field/NumberFieldDecrement.d.vue.ts

@@ -0,0 +1,18 @@
+import type { NumberFieldDecrementProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+type __VLS_Props = NumberFieldDecrementProps & {
+    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/number-field/NumberFieldDecrement.vue

@@ -0,0 +1,29 @@
+<script setup>
+import { reactiveOmit } from "@vueuse/core";
+import { Icon } from "@iconify/vue";
+import { NumberFieldDecrement, useForwardProps } from "reka-ui";
+import { cn } from "../../../utils/cn";
+const props = defineProps({
+  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 forwarded = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <NumberFieldDecrement
+    data-slot="decrement"
+    v-bind="forwarded"
+    :class="cn('absolute top-1/2 -translate-y-1/2 left-0 p-3 disabled:cursor-not-allowed disabled:opacity-20', props.class)"
+  >
+    <slot>
+      <Icon
+        icon="radix-icons:minus"
+        class="size-4"
+      />
+    </slot>
+  </NumberFieldDecrement>
+</template>

package/dist/runtime/components/ui/number-field/NumberFieldDecrement.vue.d.ts

@@ -0,0 +1,18 @@
+import type { NumberFieldDecrementProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+type __VLS_Props = NumberFieldDecrementProps & {
+    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/number-field/NumberFieldIncrement.d.vue.ts

@@ -0,0 +1,18 @@
+import type { NumberFieldIncrementProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+type __VLS_Props = NumberFieldIncrementProps & {
+    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/number-field/NumberFieldIncrement.vue

@@ -0,0 +1,29 @@
+<script setup>
+import { reactiveOmit } from "@vueuse/core";
+import { Icon } from "@iconify/vue";
+import { NumberFieldIncrement, useForwardProps } from "reka-ui";
+import { cn } from "../../../utils/cn";
+const props = defineProps({
+  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 forwarded = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <NumberFieldIncrement
+    data-slot="increment"
+    v-bind="forwarded"
+    :class="cn('absolute top-1/2 -translate-y-1/2 right-0 disabled:cursor-not-allowed disabled:opacity-20 p-3', props.class)"
+  >
+    <slot>
+      <Icon
+        icon="radix-icons:plus"
+        class="size-4"
+      />
+    </slot>
+  </NumberFieldIncrement>
+</template>

package/dist/runtime/components/ui/number-field/NumberFieldIncrement.vue.d.ts

@@ -0,0 +1,18 @@
+import type { NumberFieldIncrementProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+type __VLS_Props = NumberFieldIncrementProps & {
+    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/number-field/NumberFieldInput.d.vue.ts

@@ -0,0 +1,7 @@
+import type { HTMLAttributes } from 'vue';
+type __VLS_Props = {
+    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/number-field/NumberFieldInput.vue

@@ -0,0 +1,14 @@
+<script setup>
+import { NumberFieldInput } from "reka-ui";
+import { cn } from "../../../utils/cn";
+const props = defineProps({
+  class: { type: null, required: false }
+});
+</script>
+
+<template>
+  <NumberFieldInput
+    data-slot="input"
+    :class="cn('flex h-9 w-full rounded border border-zinc-200 hover:border-zinc-300 focus-visible:border-[color-mix(in_srgb,var(--primary)_60%,white)] bg-transparent py-1 text-sm text-center shadow-sm transition-colors duration-180 placeholder:text-zinc-700 outline-none disabled:cursor-not-allowed disabled:opacity-50', props.class)"
+  />
+</template>

package/dist/runtime/components/ui/number-field/NumberFieldInput.vue.d.ts

@@ -0,0 +1,7 @@
+import type { HTMLAttributes } from 'vue';
+type __VLS_Props = {
+    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/number-field/index.d.ts

@@ -0,0 +1,5 @@
+export { default as NumberField } from './NumberField.vue.js';
+export { default as NumberFieldContent } from './NumberFieldContent.vue.js';
+export { default as NumberFieldDecrement } from './NumberFieldDecrement.vue.js';
+export { default as NumberFieldIncrement } from './NumberFieldIncrement.vue.js';
+export { default as NumberFieldInput } from './NumberFieldInput.vue.js';

package/dist/runtime/components/ui/number-field/index.js

@@ -0,0 +1,5 @@
+export { default as NumberField } from "./NumberField.vue";
+export { default as NumberFieldContent } from "./NumberFieldContent.vue";
+export { default as NumberFieldDecrement } from "./NumberFieldDecrement.vue";
+export { default as NumberFieldIncrement } from "./NumberFieldIncrement.vue";
+export { default as NumberFieldInput } from "./NumberFieldInput.vue";

package/dist/runtime/components/ui/popover/PopoverContent.vue

@@ -46,7 +46,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
       v-bind="{ ...$attrs, ...forwarded }"
       :class="
   cn(
-    'bg-white text-zinc-700 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded border border-zinc-200 p-4 shadow-md origin-(--reka-popover-content-transform-origin) outline-hidden',
+    'bg-white text-zinc-700 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded border border-zinc-200 shadow-md origin-(--reka-popover-content-transform-origin) outline-hidden',
     props.class
   )
 "

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shwfed/nuxt",
-  "version": "0.1.29",
+  "version": "0.1.30",
   "description": "",
   "license": "MIT",
   "type": "module",
@@ -53,6 +53,7 @@
     "dot-prop": "^10.1.0",
     "effect": "^3.19.15",
     "markdown-it": "^14.1.0",
+    "mutative": "^1.3.0",
     "reka-ui": "^2.7.0",
     "tailwind-merge": "^3.4.0",
     "vue": "^3.5.27",