@karibsen/eponyme 0.1.0

package/dist/runtime/components/ui/EPDropdownMenu.d.vue.ts

@@ -0,0 +1,25 @@
+type __VLS_Props = {
+    items: ReadonlyArray<{
+        label: string;
+        value: string;
+        disabled?: boolean;
+        danger?: boolean;
+    }>;
+};
+declare var __VLS_14: {};
+type __VLS_Slots = {} & {
+    trigger?: (props: typeof __VLS_14) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((value: string) => 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/EPDropdownMenu.vue

@@ -0,0 +1,40 @@
+<script setup>
+import { DropdownMenuContent, DropdownMenuItem, DropdownMenuPortal, DropdownMenuRoot, DropdownMenuTrigger } from "reka-ui";
+defineProps({
+  items: { type: Array, required: true }
+});
+const emit = defineEmits(["select"]);
+</script>
+
+<template>
+  <DropdownMenuRoot>
+    <DropdownMenuTrigger as-child>
+      <slot name="trigger">
+        <button
+          type="button"
+          class="ep:h-9 ep:rounded-lg ep:border ep:border-border-ep ep:px-3 ep:text-muted-ep"
+        >
+          •••
+        </button>
+      </slot>
+    </DropdownMenuTrigger>
+    <DropdownMenuPortal>
+      <DropdownMenuContent
+        :side-offset="6"
+        align="end"
+        class="eponyme-portal ep:z-50 ep:min-w-44 ep:rounded-xl ep:border ep:border-border-ep ep:bg-selected-ep ep:p-1 ep:text-text-ep"
+      >
+        <DropdownMenuItem
+          v-for="item in items"
+          :key="item.value"
+          :disabled="item.disabled"
+          class="ep:cursor-pointer ep:rounded-lg ep:px-3 ep:py-2.5 ep:text-sm ep:outline-none ep:select-none ep:data-[disabled]:pointer-events-none ep:data-[disabled]:opacity-40 ep:data-[highlighted]:bg-white/10"
+          :class="{ 'ep:text-danger-ep': item.danger }"
+          @select="emit('select', item.value)"
+        >
+          {{ item.label }}
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenuPortal>
+  </DropdownMenuRoot>
+</template>

package/dist/runtime/components/ui/EPDropdownMenu.vue.d.ts

@@ -0,0 +1,25 @@
+type __VLS_Props = {
+    items: ReadonlyArray<{
+        label: string;
+        value: string;
+        disabled?: boolean;
+        danger?: boolean;
+    }>;
+};
+declare var __VLS_14: {};
+type __VLS_Slots = {} & {
+    trigger?: (props: typeof __VLS_14) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((value: string) => 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/EPFormField.d.vue.ts

@@ -0,0 +1,24 @@
+type __VLS_Props = {
+    id?: string;
+    label?: string;
+    description?: string;
+    required?: boolean;
+    errors?: string[];
+    /** The parent already renders the label — only the control and its messages are shown. */
+    hideLabel?: boolean;
+    /** Smaller label, for fields nested inside an array item. */
+    compact?: boolean;
+};
+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/EPFormField.vue

@@ -0,0 +1,62 @@
+<script setup>
+import { computed, inject } from "vue";
+import { formFieldContextKey } from "./form-field-context";
+const props = defineProps({
+  id: { type: String, required: false },
+  label: { type: String, required: false },
+  description: { type: String, required: false },
+  required: { type: Boolean, required: false },
+  errors: { type: Array, required: false, default: () => [] },
+  hideLabel: { type: Boolean, required: false, default: void 0 },
+  compact: { type: Boolean, required: false, default: void 0 }
+});
+const context = inject(formFieldContextKey, {});
+const hideLabel = computed(() => props.hideLabel ?? context.hideLabel ?? false);
+const compact = computed(() => props.compact ?? context.compact ?? false);
+const descriptionId = computed(() => props.id ? `${props.id}-description` : void 0);
+const errorId = computed(() => props.id ? `${props.id}-error` : void 0);
+const describedBy = computed(() => [
+  props.description ? descriptionId.value : void 0,
+  props.errors.length ? errorId.value : void 0
+].filter(Boolean).join(" ") || void 0);
+</script>
+
+<template>
+  <div class="ep:min-w-0">
+    <template v-if="!hideLabel">
+      <label
+        v-if="label"
+        :for="id"
+        class="ep:mb-1.5 ep:inline-block ep:w-fit ep:font-medium ep:text-text-ep"
+        :class="compact ? 'ep:text-xs' : 'ep:text-sm'"
+      >
+        {{ label }}<span
+          v-if="required"
+          class="ep:text-danger-ep"
+        > *</span>
+      </label>
+      <p
+        v-if="description"
+        :id="descriptionId"
+        class="ep:mt-0 ep:mb-2 ep:text-xs ep:leading-relaxed ep:text-muted-ep"
+      >
+        {{ description }}
+      </p>
+    </template>
+    <div
+      class="ep:block ep:min-w-0"
+      :aria-describedby="describedBy"
+    >
+      <slot />
+    </div>
+    <p
+      v-for="(error, index) in errors"
+      :id="index === 0 ? errorId : void 0"
+      :key="error"
+      role="alert"
+      class="ep:mt-1.5 ep:text-xs ep:text-danger-ep"
+    >
+      {{ error }}
+    </p>
+  </div>
+</template>

package/dist/runtime/components/ui/EPFormField.vue.d.ts

@@ -0,0 +1,24 @@
+type __VLS_Props = {
+    id?: string;
+    label?: string;
+    description?: string;
+    required?: boolean;
+    errors?: string[];
+    /** The parent already renders the label — only the control and its messages are shown. */
+    hideLabel?: boolean;
+    /** Smaller label, for fields nested inside an array item. */
+    compact?: boolean;
+};
+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/EPInputText.d.vue.ts

@@ -0,0 +1,17 @@
+type __VLS_Props = {
+    modelValue?: string | number;
+    type?: string;
+    invalid?: boolean;
+    disabled?: boolean;
+    /** `sm` suits dense chrome such as the sidebar search; `md` is the form default. */
+    size?: 'sm' | 'md';
+    /** Extra horizontal room for an icon or shortcut hint overlaid on the input. */
+    padded?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/ui/EPInputText.vue

@@ -0,0 +1,33 @@
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  modelValue: { type: [String, Number], required: false, default: "" },
+  type: { type: String, required: false, default: "text" },
+  invalid: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false },
+  size: { type: String, required: false, default: "md" },
+  padded: { type: Boolean, required: false }
+});
+const emit = defineEmits(["update:modelValue"]);
+const classes = computed(() => [
+  "ep:block ep:w-full ep:min-w-0 ep:border-0 ep:bg-selected-ep ep:text-sm ep:text-white ep:outline-none ep:transition ep:placeholder:text-muted-ep ep:focus:border-muted-ep ep:focus:ring-2 ep:focus:ring-white/10 ep:aria-invalid:border-danger-ep ep:disabled:cursor-not-allowed ep:disabled:opacity-50",
+  props.size === "sm" ? "ep:h-10 ep:rounded-lg" : "ep:h-12 ep:rounded-xl ep:py-3",
+  props.padded ? "ep:pr-12 ep:pl-10" : "ep:px-4",
+  { "eponyme-date-input": props.type === "date" }
+]);
+function update(event) {
+  const value = event.target.value;
+  emit("update:modelValue", props.type === "number" && value !== "" ? Number(value) : value);
+}
+</script>
+
+<template>
+  <input
+    :type="type"
+    :value="modelValue"
+    :aria-invalid="invalid || void 0"
+    :disabled="disabled"
+    :class="classes"
+    @input="update"
+  >
+</template>

package/dist/runtime/components/ui/EPInputText.vue.d.ts

@@ -0,0 +1,17 @@
+type __VLS_Props = {
+    modelValue?: string | number;
+    type?: string;
+    invalid?: boolean;
+    disabled?: boolean;
+    /** `sm` suits dense chrome such as the sidebar search; `md` is the form default. */
+    size?: 'sm' | 'md';
+    /** Extra horizontal room for an icon or shortcut hint overlaid on the input. */
+    padded?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/ui/EPLinkEditor.d.vue.ts

@@ -0,0 +1,16 @@
+import type { UrlValue } from '../../types/index.js';
+type __VLS_Props = {
+    id: string;
+    label: string;
+    modelValue?: unknown;
+    placeholder?: string;
+    invalid?: boolean;
+    disabled?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: UrlValue) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: UrlValue) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/ui/EPLinkEditor.vue

@@ -0,0 +1,169 @@
+<script setup>
+import { computed, ref } from "vue";
+import EPButton from "./EPButton.vue";
+import EPDialog from "./EPDialog.vue";
+import EPInputText from "./EPInputText.vue";
+import EPRadioButton from "./EPRadioButton.vue";
+import EPSwitch from "./EPSwitch.vue";
+import EPTooltip from "./EPTooltip.vue";
+const props = defineProps({
+  id: { type: String, required: true },
+  label: { type: String, required: true },
+  modelValue: { type: null, required: false },
+  placeholder: { type: String, required: false },
+  invalid: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false }
+});
+const emit = defineEmits(["update:modelValue"]);
+const dialogOpen = ref(false);
+const draftHref = ref("");
+const draftType = ref("external");
+const draftOpenInNewTab = ref(false);
+const value = computed(() => {
+  if (props.modelValue && typeof props.modelValue === "object" && !Array.isArray(props.modelValue)) {
+    const link = props.modelValue;
+    return {
+      href: typeof link.href === "string" ? link.href : "",
+      type: link.type === "internal" ? "internal" : "external",
+      openInNewTab: link.openInNewTab === true
+    };
+  }
+  return { href: "", type: "external", openInNewTab: false };
+});
+const typeOptions = [
+  { label: "Internal link", value: "internal" },
+  { label: "External link", value: "external" }
+];
+function openDialog() {
+  draftHref.value = value.value.href;
+  draftType.value = value.value.type;
+  draftOpenInNewTab.value = value.value.openInNewTab;
+  dialogOpen.value = true;
+}
+function updateDialogOpen(open) {
+  dialogOpen.value = open;
+}
+function updateType(type) {
+  draftType.value = type === "internal" ? "internal" : "external";
+}
+function updateHref(href) {
+  draftHref.value = String(href);
+}
+function save() {
+  emit("update:modelValue", {
+    href: draftHref.value.trim(),
+    type: draftType.value,
+    openInNewTab: draftOpenInNewTab.value
+  });
+  dialogOpen.value = false;
+}
+function openLink() {
+  if (!value.value.href || typeof window === "undefined") return;
+  const href = value.value.type === "internal" ? new URL(value.value.href, window.location.origin).href : value.value.href;
+  window.open(href, "_blank", "noopener,noreferrer");
+}
+</script>
+
+<template>
+  <div
+    class="ep:flex ep:min-h-12 ep:items-center ep:gap-3 ep:rounded-xl ep:border ep:bg-selected-ep ep:px-3 ep:py-2"
+    :class="invalid ? 'ep:border-danger-ep' : 'ep:border-0'"
+  >
+    <Icon
+      name="mingcute:link-2-line"
+      size="20"
+      class="ep:shrink-0 ep:text-muted-ep"
+      aria-hidden="true"
+    />
+    <div class="ep:min-w-0 ep:flex-1">
+      <p class="ep:m-0 ep:truncate ep:text-sm ep:text-white">
+        {{ value.href || "No link configured" }}
+      </p>
+      <p class="ep:mt-0.5 ep:mb-0 ep:text-[11px] ep:text-muted-ep">
+        {{ value.type === "internal" ? "Internal" : "External" }} · {{ value.openInNewTab ? "New tab" : "Same tab" }}
+      </p>
+    </div>
+    <EPTooltip content="Open link">
+      <EPButton
+        variant="ghost"
+        icon="mingcute:external-link-line"
+        :disabled="!value.href"
+        :aria-label="`Open ${label}`"
+        @click="openLink"
+      />
+    </EPTooltip>
+    <EPTooltip content="Configure link">
+      <EPButton
+        :id="id"
+        variant="ghost"
+        icon="mingcute:settings-3-line"
+        :disabled="disabled"
+        :aria-label="`Configure ${label}`"
+        @click="openDialog"
+      />
+    </EPTooltip>
+  </div>
+
+  <EPDialog
+    :open="dialogOpen"
+    title="Configure link"
+    description="Choose where the link points and how it should open."
+    @update:open="updateDialogOpen"
+  >
+    <div class="ep:grid ep:gap-5">
+      <div>
+        <p class="ep:mt-0 ep:mb-2 ep:text-sm ep:font-medium ep:text-white">
+          Link type
+        </p>
+        <EPRadioButton
+          :model-value="draftType"
+          :options="typeOptions"
+          @update:model-value="updateType"
+        />
+      </div>
+
+      <label class="ep:block">
+        <span class="ep:mb-2 ep:block ep:text-sm ep:font-medium ep:text-white">Destination</span>
+        <EPInputText
+          :model-value="draftHref"
+          :type="draftType === 'external' ? 'url' : 'text'"
+          :placeholder="draftType === 'internal' ? '/contact' : placeholder || 'https://example.com'"
+          @update:model-value="updateHref"
+        />
+        <span class="ep:mt-1.5 ep:block ep:text-xs ep:text-muted-ep">
+          {{ draftType === "internal" ? "Use a path beginning with / or an anchor beginning with #." : "Use a complete HTTP(S) address." }}
+        </span>
+      </label>
+
+      <div class="ep:flex ep:items-center ep:justify-between ep:gap-4 ep:rounded-xl ep:bg-selected-ep/40 ep:px-4 ep:py-3">
+        <div>
+          <p class="ep:m-0 ep:text-sm ep:font-medium ep:text-white">
+            Open in new tab
+          </p>
+          <p class="ep:mt-1 ep:mb-0 ep:text-xs ep:text-muted-ep">
+            Keep the current page open when visitors follow this link.
+          </p>
+        </div>
+        <EPSwitch
+          :model-value="draftOpenInNewTab"
+          @update:model-value="draftOpenInNewTab = $event"
+        />
+      </div>
+
+      <div class="ep:flex ep:justify-end ep:gap-2">
+        <EPButton
+          variant="ghost"
+          @click="dialogOpen = false"
+        >
+          Cancel
+        </EPButton>
+        <EPButton
+          variant="primary"
+          @click="save"
+        >
+          Apply link
+        </EPButton>
+      </div>
+    </div>
+  </EPDialog>
+</template>

package/dist/runtime/components/ui/EPLinkEditor.vue.d.ts

@@ -0,0 +1,16 @@
+import type { UrlValue } from '../../types/index.js';
+type __VLS_Props = {
+    id: string;
+    label: string;
+    modelValue?: unknown;
+    placeholder?: string;
+    invalid?: boolean;
+    disabled?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: UrlValue) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: UrlValue) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/ui/EPRadioButton.d.vue.ts

@@ -0,0 +1,16 @@
+type __VLS_Props = {
+    modelValue?: string;
+    options: ReadonlyArray<{
+        label: string;
+        value: string;
+    }>;
+    required?: boolean;
+    disabled?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/ui/EPRadioButton.vue

@@ -0,0 +1,34 @@
+<script setup>
+import { RadioGroupIndicator, RadioGroupItem, RadioGroupRoot } from "reka-ui";
+defineProps({
+  modelValue: { type: String, required: false },
+  options: { type: Array, required: true },
+  required: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false }
+});
+const emit = defineEmits(["update:modelValue"]);
+</script>
+
+<template>
+  <RadioGroupRoot
+    :model-value="modelValue"
+    :required="required"
+    :disabled="disabled"
+    class="ep:grid ep:gap-2 ep:sm:grid-cols-2"
+    @update:model-value="emit('update:modelValue', String($event ?? ''))"
+  >
+    <label
+      v-for="option in options"
+      :key="option.value"
+      class="ep:flex ep:cursor-pointer ep:items-center ep:gap-3 ep:rounded-xl ep:bg-selected-ep/40 ep:px-4 ep:py-3 ep:text-sm ep:text-text-ep ep:transition ep:hover:border-muted-ep"
+    >
+      <RadioGroupItem
+        :value="option.value"
+        class="ep:flex ep:h-5 ep:w-5 ep:items-center ep:justify-center ep:rounded-full ep:border ep:border-border-ep ep:bg-selected-ep ep:outline-none ep:focus-visible:ring-2 ep:focus-visible:ring-white/20"
+      >
+        <RadioGroupIndicator class="ep:block ep:aspect-square ep:h-2.5 ep:w-2.5 ep:rounded-full ep:bg-white" />
+      </RadioGroupItem>
+      {{ option.label }}
+    </label>
+  </RadioGroupRoot>
+</template>

package/dist/runtime/components/ui/EPRadioButton.vue.d.ts

@@ -0,0 +1,16 @@
+type __VLS_Props = {
+    modelValue?: string;
+    options: ReadonlyArray<{
+        label: string;
+        value: string;
+    }>;
+    required?: boolean;
+    disabled?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/ui/EPSelect.d.vue.ts

@@ -0,0 +1,21 @@
+type __VLS_Props = {
+    modelValue?: string;
+    options: ReadonlyArray<{
+        label: string;
+        value: string;
+    }>;
+    placeholder?: string;
+    required?: boolean;
+    disabled?: boolean;
+    invalid?: boolean;
+    size?: 'sm' | 'md';
+    /** Classes applied to the portalled menu content. Replaces the default z-index class. */
+    contentClass?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/ui/EPSelect.vue

@@ -0,0 +1,73 @@
+<script setup>
+import {
+  SelectContent,
+  SelectItem,
+  SelectItemIndicator,
+  SelectItemText,
+  SelectPortal,
+  SelectRoot,
+  SelectTrigger,
+  SelectValue,
+  SelectViewport
+} from "reka-ui";
+import { computed } from "vue";
+const props = defineProps({
+  modelValue: { type: String, required: false },
+  options: { type: Array, required: true },
+  placeholder: { type: String, required: false },
+  required: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false },
+  invalid: { type: Boolean, required: false },
+  size: { type: String, required: false, default: "md" },
+  contentClass: { type: String, required: false }
+});
+const emit = defineEmits(["update:modelValue"]);
+const triggerClasses = computed(() => [
+  "ep:flex ep:w-full ep:min-w-0 ep:items-center ep:justify-between ep:gap-3 ep:border ep:border-border-ep ep:bg-selected-ep ep:px-4 ep:text-left ep:text-sm ep:text-white ep:outline-none ep:transition ep:focus:border-muted-ep ep:focus:ring-2 ep:focus:ring-white/10 ep:aria-invalid:border-danger-ep ep:disabled:cursor-not-allowed ep:disabled:opacity-50",
+  props.size === "sm" ? "ep:h-10 ep:rounded-lg" : "ep:h-12 ep:rounded-xl"
+]);
+</script>
+
+<template>
+  <SelectRoot
+    :model-value="modelValue"
+    :required="required"
+    :disabled="disabled"
+    @update:model-value="emit('update:modelValue', String($event ?? ''))"
+  >
+    <SelectTrigger
+      :aria-invalid="invalid || void 0"
+      :class="triggerClasses"
+    >
+      <SelectValue :placeholder="placeholder" />
+      <span
+        class="ep:text-xs ep:text-muted-ep"
+        aria-hidden="true"
+      >⌄</span>
+    </SelectTrigger>
+    <SelectPortal>
+      <SelectContent
+        position="popper"
+        :side-offset="6"
+        :class="[
+  'eponyme-portal ep:min-w-(--reka-select-trigger-width) ep:overflow-hidden ep:rounded-xl ep:border ep:border-border-ep ep:bg-selected-ep ep:p-1 ep:text-text-ep',
+  contentClass || 'ep:z-50'
+]"
+      >
+        <SelectViewport>
+          <SelectItem
+            v-for="option in options"
+            :key="option.value"
+            :value="option.value"
+            class="ep:relative ep:flex ep:cursor-pointer ep:items-center ep:rounded-lg ep:py-2.5 ep:pr-8 ep:pl-3 ep:text-sm ep:outline-none ep:select-none ep:data-highlighted:bg-white/10"
+          >
+            <SelectItemText>{{ option.label }}</SelectItemText>
+            <SelectItemIndicator class="ep:absolute ep:right-3">
+              ✓
+            </SelectItemIndicator>
+          </SelectItem>
+        </SelectViewport>
+      </SelectContent>
+    </SelectPortal>
+  </SelectRoot>
+</template>

package/dist/runtime/components/ui/EPSelect.vue.d.ts

@@ -0,0 +1,21 @@
+type __VLS_Props = {
+    modelValue?: string;
+    options: ReadonlyArray<{
+        label: string;
+        value: string;
+    }>;
+    placeholder?: string;
+    required?: boolean;
+    disabled?: boolean;
+    invalid?: boolean;
+    size?: 'sm' | 'md';
+    /** Classes applied to the portalled menu content. Replaces the default z-index class. */
+    contentClass?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;