@shwfed/config 1.0.0

package/dist/runtime/components/ui/date-range-picker/DateRangePickerTimeInput.vue

@@ -0,0 +1,148 @@
+<script setup>
+import { Icon } from "@iconify/vue";
+import { TimeField } from "reka-ui/namespaced";
+import { computed } from "vue";
+import { cn } from "../../../utils/cn";
+defineOptions({ name: "UiDateRangePickerTimeInput", inheritAttrs: false });
+const props = defineProps({
+  startValue: { type: Object, required: false },
+  endValue: { type: Object, required: false },
+  granularity: { type: String, required: false, default: "second" },
+  hourCycle: { type: Number, required: false, default: 24 },
+  rangeSeparatorIcon: { type: String, required: false, default: "lucide:arrow-right" },
+  prefixIcon: { type: String, required: false },
+  clearIcon: { type: String, required: false, default: "lucide:x" },
+  clearable: { type: Boolean, required: false, default: true },
+  disabled: { type: Boolean, required: false },
+  readonly: { type: Boolean, required: false },
+  size: { type: String, required: false, default: "md" },
+  class: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true }
+});
+const sizeClass = computed(() => ({
+  sm: "h-7 text-xs",
+  md: "h-9 text-sm",
+  lg: "h-10 text-base"
+})[props.size]);
+const emits = defineEmits(["update:startValue", "update:endValue", "clear"]);
+function onStartUpdate(value) {
+  emits("update:startValue", value ?? void 0);
+}
+function onEndUpdate(value) {
+  emits("update:endValue", value ?? void 0);
+}
+function onClear() {
+  emits("update:startValue", void 0);
+  emits("update:endValue", void 0);
+  emits("clear");
+}
+const showClear = computed(
+  () => props.clearable && !props.disabled && !props.readonly && (props.startValue !== void 0 || props.endValue !== void 0)
+);
+</script>
+
+<template>
+  <div
+    v-bind="$attrs"
+    data-slot="date-range-picker-time-input"
+    :data-disabled="props.disabled ? 'true' : void 0"
+    :class="cn(
+  'group/date-range-time-input',
+  'border-zinc-200 relative flex w-full min-w-0 items-center rounded-md border bg-transparent transition-[color,box-shadow] outline-none',
+  'data-[disabled=true]:bg-zinc-100',
+  'has-[[data-reka-time-field-input]:focus]:border-(--primary)',
+  'hover:border-zinc-300',
+  sizeClass,
+  props.class
+)"
+  >
+    <Icon
+      v-if="props.prefixIcon"
+      :icon="props.prefixIcon"
+      class="text-zinc-500 ml-3 mr-1 size-4 shrink-0"
+    />
+    <TimeField.Root
+      v-slot="{ segments }"
+      data-slot="date-range-picker-time-start"
+      :model-value="props.startValue"
+      :granularity="props.granularity"
+      :hour-cycle="props.hourCycle"
+      :disabled="props.disabled"
+      :readonly="props.readonly"
+      class="text-zinc-700 flex flex-1 items-center justify-center gap-1.5 px-4 outline-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50"
+      @update:model-value="onStartUpdate"
+    >
+      <template v-if="Array.isArray(segments)">
+        <template
+          v-for="(segment, index) in segments"
+          :key="`s-${segment.part}-${index}`"
+        >
+          <TimeField.Input
+            v-if="segment.part !== 'literal'"
+            :part="segment.part"
+            class="rounded-sm px-1 outline-none focus:bg-zinc-100 data-[placeholder]:text-zinc-400"
+          >
+            {{ segment.value }}
+          </TimeField.Input>
+          <span
+            v-else
+            class="text-zinc-400 select-none"
+          >{{ segment.value }}</span>
+        </template>
+      </template>
+    </TimeField.Root>
+    <Icon
+      :icon="props.rangeSeparatorIcon"
+      data-slot="date-range-picker-time-separator"
+      class="text-zinc-400 size-3.5 shrink-0"
+    />
+    <TimeField.Root
+      v-slot="{ segments }"
+      data-slot="date-range-picker-time-end"
+      :model-value="props.endValue"
+      :granularity="props.granularity"
+      :hour-cycle="props.hourCycle"
+      :disabled="props.disabled"
+      :readonly="props.readonly"
+      class="text-zinc-700 flex flex-1 items-center justify-center gap-1.5 px-4 outline-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50"
+      @update:model-value="onEndUpdate"
+    >
+      <template v-if="Array.isArray(segments)">
+        <template
+          v-for="(segment, index) in segments"
+          :key="`e-${segment.part}-${index}`"
+        >
+          <TimeField.Input
+            v-if="segment.part !== 'literal'"
+            :part="segment.part"
+            class="rounded-sm px-1 outline-none focus:bg-zinc-100 data-[placeholder]:text-zinc-400"
+          >
+            {{ segment.value }}
+          </TimeField.Input>
+          <span
+            v-else
+            class="text-zinc-400 select-none"
+          >{{ segment.value }}</span>
+        </template>
+      </template>
+    </TimeField.Root>
+    <button
+      v-if="showClear"
+      type="button"
+      data-slot="date-range-picker-clear"
+      tabindex="-1"
+      :class="cn(
+  'mr-2 size-5 shrink-0 rounded text-zinc-500 transition-opacity hover:text-zinc-700',
+  'opacity-0',
+  'group-hover/date-range-time-input:opacity-100 focus-within:opacity-100',
+  'flex items-center justify-center'
+)"
+      @mousedown.prevent
+      @click.stop="onClear"
+    >
+      <Icon
+        :icon="props.clearIcon"
+        class="size-3.5"
+      />
+    </button>
+  </div>
+</template>

package/dist/runtime/components/ui/date-range-picker/DateRangePickerTimeInput.vue.d.ts

@@ -0,0 +1,34 @@
+import type { Time } from '@internationalized/date';
+import type { HTMLAttributes } from 'vue';
+type __VLS_Props = {
+    startValue?: Time;
+    endValue?: Time;
+    granularity?: 'hour' | 'minute' | 'second';
+    hourCycle?: 12 | 24;
+    rangeSeparatorIcon?: string;
+    prefixIcon?: string;
+    clearIcon?: string;
+    clearable?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    class?: HTMLAttributes['class'];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    clear: () => any;
+    "update:startValue": (args_0: Time | undefined) => any;
+    "update:endValue": (args_0: Time | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClear?: (() => any) | undefined;
+    "onUpdate:startValue"?: ((args_0: Time | undefined) => any) | undefined;
+    "onUpdate:endValue"?: ((args_0: Time | undefined) => any) | undefined;
+}>, {
+    size: "sm" | "md" | "lg";
+    granularity: "hour" | "minute" | "second";
+    hourCycle: 12 | 24;
+    clearable: boolean;
+    clearIcon: string;
+    rangeSeparatorIcon: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/ui/date-range-picker/DateRangePickerYearPanel.d.vue.ts

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

package/dist/runtime/components/ui/date-range-picker/DateRangePickerYearPanel.vue

@@ -0,0 +1,73 @@
+<script setup>
+import { Icon } from "@iconify/vue";
+import { YearRangePicker } from "reka-ui/namespaced";
+import { cn } from "../../../utils/cn";
+defineOptions({ name: "UiDateRangePickerYearPanel" });
+const props = defineProps({
+  modelValue: { type: Object, required: false },
+  isDateDisabled: { type: Function, required: false },
+  class: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true }
+});
+const emits = defineEmits(["update:modelValue"]);
+function handleUpdate(value) {
+  emits("update:modelValue", value);
+}
+</script>
+
+<template>
+  <YearRangePicker.Root
+    v-slot="{ grid }"
+    data-slot="date-range-picker-year-panel"
+    :class="cn('p-3', props.class)"
+    :model-value="props.modelValue"
+    :default-placeholder="props.modelValue?.start"
+    :is-year-disabled="props.isDateDisabled"
+    @update:model-value="handleUpdate"
+  >
+    <YearRangePicker.Header class="pt-2 pb-2 relative">
+      <nav class="w-full flex items-center gap-1 absolute top-1/2 -translate-y-1/2 transform-gpu inset-x-0 justify-between z-10">
+        <YearRangePicker.Prev>
+          <Icon icon="lucide:chevron-left" />
+        </YearRangePicker.Prev>
+        <YearRangePicker.Next>
+          <Icon icon="lucide:chevron-right" />
+        </YearRangePicker.Next>
+      </nav>
+      <YearRangePicker.Heading class="text-sm font-medium text-center w-full" />
+    </YearRangePicker.Header>
+
+    <YearRangePicker.Grid class="mt-4">
+      <YearRangePicker.GridBody>
+        <YearRangePicker.GridRow
+          v-for="(row, rIdx) in grid.rows"
+          :key="`yrow-${rIdx}`"
+          class="grid grid-cols-4 gap-1 mb-1 last:mb-0"
+        >
+          <YearRangePicker.Cell
+            v-for="year in row"
+            :key="year.toString()"
+            :date="year"
+          >
+            <YearRangePicker.CellTrigger
+              v-slot="{ yearValue, disabled, selected, selectionStart, selectionEnd, highlighted }"
+              :year="year"
+              class="block w-full"
+            >
+              <span
+                :class="cn(
+  'flex h-9 w-full items-center justify-center rounded-md text-sm font-normal cursor-pointer',
+  'hover:bg-zinc-100',
+  selected || selectionStart || selectionEnd ? 'bg-(--primary) text-white hover:bg-(--primary)' : '',
+  highlighted && !selected ? 'bg-[color-mix(in_srgb,var(--primary)_20%,white)] text-(--primary) hover:bg-[color-mix(in_srgb,var(--primary)_25%,white)]' : '',
+  disabled ? 'text-zinc-400 opacity-50 cursor-default' : ''
+)"
+              >
+                {{ yearValue }}
+              </span>
+            </YearRangePicker.CellTrigger>
+          </YearRangePicker.Cell>
+        </YearRangePicker.GridRow>
+      </YearRangePicker.GridBody>
+    </YearRangePicker.Grid>
+  </YearRangePicker.Root>
+</template>

package/dist/runtime/components/ui/date-range-picker/DateRangePickerYearPanel.vue.d.ts

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

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

@@ -0,0 +1,9 @@
+export { default as DateRangePicker, type DateRangePickerShortcut } from './DateRangePicker.vue.js';
+export { default as DateRangePickerDatePanel } from './DateRangePickerDatePanel.vue.js';
+export { default as DateRangePickerDateTimePanel } from './DateRangePickerDateTimePanel.vue.js';
+export { default as DateRangePickerInput } from './DateRangePickerInput.vue.js';
+export { default as DateRangePickerMonthPanel } from './DateRangePickerMonthPanel.vue.js';
+export { default as DateRangePickerTimeInput } from './DateRangePickerTimeInput.vue.js';
+export { default as DateRangePickerYearPanel } from './DateRangePickerYearPanel.vue.js';
+export { DATE_RANGE_PICKER_DEFAULT_FORMATS } from './types.js';
+export type { DateRangePickerType } from './types.js';

package/dist/runtime/components/ui/date-range-picker/index.js

@@ -0,0 +1,8 @@
+export { default as DateRangePicker } from "./DateRangePicker.vue";
+export { default as DateRangePickerDatePanel } from "./DateRangePickerDatePanel.vue";
+export { default as DateRangePickerDateTimePanel } from "./DateRangePickerDateTimePanel.vue";
+export { default as DateRangePickerInput } from "./DateRangePickerInput.vue";
+export { default as DateRangePickerMonthPanel } from "./DateRangePickerMonthPanel.vue";
+export { default as DateRangePickerTimeInput } from "./DateRangePickerTimeInput.vue";
+export { default as DateRangePickerYearPanel } from "./DateRangePickerYearPanel.vue";
+export { DATE_RANGE_PICKER_DEFAULT_FORMATS } from "./types.js";

package/dist/runtime/components/ui/date-range-picker/types.d.ts

@@ -0,0 +1,5 @@
+export type DateRangePickerType = 'daterange' | 'datetimerange' | 'monthrange' | 'yearrange' | 'timerange';
+export declare const DATE_RANGE_PICKER_DEFAULT_FORMATS: Record<DateRangePickerType, {
+    display: string;
+    value: string;
+}>;

package/dist/runtime/components/ui/date-range-picker/types.js

@@ -0,0 +1,7 @@
+export const DATE_RANGE_PICKER_DEFAULT_FORMATS = {
+  daterange: { display: "yyyy-MM-dd", value: "yyyy-MM-dd" },
+  datetimerange: { display: "yyyy-MM-dd HH:mm:ss", value: "yyyy-MM-dd HH:mm:ss" },
+  monthrange: { display: "yyyy-MM", value: "yyyy-MM" },
+  yearrange: { display: "yyyy", value: "yyyy" },
+  timerange: { display: "HH:mm:ss", value: "HH:mm:ss" }
+};

package/dist/runtime/components/ui/dialog/Dialog.d.vue.ts

@@ -0,0 +1,21 @@
+import type { DialogRootProps } from 'reka-ui';
+declare var __VLS_8: {
+    open: boolean;
+    close: () => void;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<DialogRootProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<DialogRootProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => 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/dialog/Dialog.vue

@@ -0,0 +1,21 @@
+<script setup>
+import { DialogRoot, useForwardPropsEmits } from "reka-ui";
+defineOptions({ name: "DialogRoot" });
+const props = defineProps({
+  open: { type: Boolean, required: false },
+  defaultOpen: { type: Boolean, required: false },
+  modal: { type: Boolean, required: false }
+});
+const emits = defineEmits(["update:open"]);
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <DialogRoot
+    v-slot="slotProps"
+    data-slot="dialog"
+    v-bind="forwarded"
+  >
+    <slot v-bind="slotProps" />
+  </DialogRoot>
+</template>

package/dist/runtime/components/ui/dialog/Dialog.vue.d.ts

@@ -0,0 +1,21 @@
+import type { DialogRootProps } from 'reka-ui';
+declare var __VLS_8: {
+    open: boolean;
+    close: () => void;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<DialogRootProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<DialogRootProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => 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/dialog/DialogClose.d.vue.ts

@@ -0,0 +1,14 @@
+import type { DialogCloseProps } from 'reka-ui';
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<DialogCloseProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DialogCloseProps> & 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/dialog/DialogClose.vue

@@ -0,0 +1,16 @@
+<script setup>
+import { DialogClose } from "reka-ui";
+const props = defineProps({
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false }
+});
+</script>
+
+<template>
+  <DialogClose
+    data-slot="dialog-close"
+    v-bind="props"
+  >
+    <slot />
+  </DialogClose>
+</template>

package/dist/runtime/components/ui/dialog/DialogClose.vue.d.ts

@@ -0,0 +1,14 @@
+import type { DialogCloseProps } from 'reka-ui';
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<DialogCloseProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DialogCloseProps> & 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/dialog/DialogContent.d.vue.ts

@@ -0,0 +1,37 @@
+import type { DialogContentProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+type __VLS_Props = DialogContentProps & {
+    class?: HTMLAttributes['class'];
+    showCloseButton?: boolean;
+};
+declare var __VLS_22: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_22) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    escapeKeyDown: (event: KeyboardEvent) => any;
+    pointerDownOutside: (event: import("reka-ui").PointerDownOutsideEvent) => any;
+    focusOutside: (event: import("reka-ui").FocusOutsideEvent) => any;
+    interactOutside: (event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any;
+    openAutoFocus: (event: Event) => any;
+    closeAutoFocus: (event: Event) => any;
+    "after-close": () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
+    onPointerDownOutside?: ((event: import("reka-ui").PointerDownOutsideEvent) => any) | undefined;
+    onFocusOutside?: ((event: import("reka-ui").FocusOutsideEvent) => any) | undefined;
+    onInteractOutside?: ((event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any) | undefined;
+    onOpenAutoFocus?: ((event: Event) => any) | undefined;
+    onCloseAutoFocus?: ((event: Event) => any) | undefined;
+    "onAfter-close"?: (() => any) | undefined;
+}>, {
+    showCloseButton: boolean;
+}, {}, {}, {}, 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/dialog/DialogContent.vue

@@ -0,0 +1,164 @@
+<script setup>
+import { reactiveOmit } from "@vueuse/core";
+import {
+  DialogClose,
+  DialogContent,
+  DialogPortal,
+  useForwardPropsEmits
+} from "reka-ui";
+import { cn } from "../../../utils/cn";
+import DialogOverlay from "./DialogOverlay.vue";
+import { Icon } from "@iconify/vue";
+import { onBeforeUnmount, shallowRef, watchEffect } from "vue";
+defineOptions({
+  inheritAttrs: false
+});
+const props = defineProps({
+  forceMount: { type: Boolean, required: false },
+  disableOutsidePointerEvents: { type: Boolean, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  class: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
+  showCloseButton: { type: Boolean, required: false, default: true }
+});
+const emit = defineEmits(["escapeKeyDown", "pointerDownOutside", "focusOutside", "interactOutside", "openAutoFocus", "closeAutoFocus", "after-close"]);
+const delegatedProps = reactiveOmit(props, "class");
+const forwarded = useForwardPropsEmits(delegatedProps, emit);
+const contentElement = shallowRef(null);
+let closeFallbackTimer;
+let hasEmittedAfterClose = false;
+function isClosedContentTarget(target) {
+  return target instanceof HTMLElement && target.dataset.state === "closed";
+}
+function clearCloseFallbackTimer() {
+  if (closeFallbackTimer === void 0) {
+    return;
+  }
+  window.clearTimeout(closeFallbackTimer);
+  closeFallbackTimer = void 0;
+}
+function emitAfterClose() {
+  if (hasEmittedAfterClose) {
+    return;
+  }
+  hasEmittedAfterClose = true;
+  clearCloseFallbackTimer();
+  emit("after-close");
+}
+function parseDurationMs(value) {
+  const normalizedValue = value.trim();
+  if (normalizedValue.endsWith("ms")) {
+    const duration = Number.parseFloat(normalizedValue.slice(0, -2));
+    return Number.isFinite(duration) ? duration : 0;
+  }
+  if (normalizedValue.endsWith("s")) {
+    const duration = Number.parseFloat(normalizedValue.slice(0, -1));
+    return Number.isFinite(duration) ? duration * 1e3 : 0;
+  }
+  return 0;
+}
+function getLongestMotionMs(element) {
+  const style = window.getComputedStyle(element);
+  const animationDurations = style.animationDuration.split(",");
+  const animationDelays = style.animationDelay.split(",");
+  const transitionDurations = style.transitionDuration.split(",");
+  const transitionDelays = style.transitionDelay.split(",");
+  let longestMotionMs = 0;
+  for (const [index, durationValue] of animationDurations.entries()) {
+    const durationMs = parseDurationMs(durationValue);
+    const delayMs = parseDurationMs(animationDelays[index] ?? animationDelays[0] ?? "0s");
+    longestMotionMs = Math.max(longestMotionMs, durationMs + delayMs);
+  }
+  for (const [index, durationValue] of transitionDurations.entries()) {
+    const durationMs = parseDurationMs(durationValue);
+    const delayMs = parseDurationMs(transitionDelays[index] ?? transitionDelays[0] ?? "0s");
+    longestMotionMs = Math.max(longestMotionMs, durationMs + delayMs);
+  }
+  return longestMotionMs;
+}
+function syncCloseFallback() {
+  const element = contentElement.value;
+  clearCloseFallbackTimer();
+  if (!element) {
+    return;
+  }
+  if (element.dataset.state !== "closed") {
+    hasEmittedAfterClose = false;
+    return;
+  }
+  const motionMs = getLongestMotionMs(element);
+  closeFallbackTimer = window.setTimeout(() => {
+    emitAfterClose();
+  }, motionMs > 0 ? motionMs : 0);
+}
+function handleCloseMotionEnd(event) {
+  if (hasEmittedAfterClose || event.target !== event.currentTarget || !isClosedContentTarget(event.currentTarget)) {
+    return;
+  }
+  emitAfterClose();
+}
+function setContentElement(target) {
+  if (target instanceof HTMLElement) {
+    contentElement.value = target;
+    syncCloseFallback();
+    return;
+  }
+  if (target && "$el" in target && target.$el instanceof HTMLElement) {
+    contentElement.value = target.$el;
+    syncCloseFallback();
+    return;
+  }
+  contentElement.value = null;
+  clearCloseFallbackTimer();
+}
+watchEffect((onCleanup) => {
+  const element = contentElement.value;
+  if (!element) {
+    return;
+  }
+  const observer = new MutationObserver(() => {
+    syncCloseFallback();
+  });
+  observer.observe(element, {
+    attributes: true,
+    attributeFilter: ["data-state"]
+  });
+  syncCloseFallback();
+  onCleanup(() => {
+    observer.disconnect();
+  });
+});
+onBeforeUnmount(() => {
+  clearCloseFallbackTimer();
+});
+</script>
+
+<template>
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogContent
+      :ref="setContentElement"
+      data-slot="dialog-content"
+      v-bind="{ ...$attrs, ...forwarded }"
+      :class="
+  cn(
+    'bg-white 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border border-zinc-200 p-6 shadow-lg duration-200 sm:max-w-lg',
+    props.class
+  )
+"
+      @animationend="handleCloseMotionEnd"
+      @transitionend="handleCloseMotionEnd"
+    >
+      <slot />
+
+      <DialogClose
+        v-if="showCloseButton"
+        data-slot="dialog-close"
+        class="data-[state=open]:bg-zinc-100 data-[state=open]:text-zinc-700 absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+      >
+        <Icon icon="fluent:dismiss-20-filled" />
+        <span class="sr-only">Close</span>
+      </DialogClose>
+    </DialogContent>
+  </DialogPortal>
+</template>