@karibsen/eponyme 0.1.0

package/dist/runtime/components/fields/UrlField.d.vue.ts

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

package/dist/runtime/components/fields/UrlField.vue

@@ -0,0 +1,35 @@
+<script setup>
+import EPFormField from "../ui/EPFormField.vue";
+import EPLinkEditor from "../ui/EPLinkEditor.vue";
+defineProps({
+  id: { type: String, required: true },
+  modelValue: { type: null, required: false },
+  label: { type: String, required: true },
+  description: { type: String, required: false },
+  required: { type: Boolean, required: false },
+  placeholder: { type: String, required: false },
+  errors: { type: Array, required: false, default: () => [] },
+  disabled: { type: Boolean, required: false }
+});
+const emit = defineEmits(["update:modelValue"]);
+</script>
+
+<template>
+  <EPFormField
+    :id="id"
+    :label="label"
+    :description="description"
+    :required="required"
+    :errors="errors"
+  >
+    <EPLinkEditor
+      :id="id"
+      :label="label"
+      :model-value="modelValue"
+      :placeholder="placeholder"
+      :invalid="Boolean(errors.length)"
+      :disabled="disabled"
+      @update:model-value="emit('update:modelValue', $event)"
+    />
+  </EPFormField>
+</template>

package/dist/runtime/components/fields/UrlField.vue.d.ts

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

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

@@ -0,0 +1,26 @@
+type __VLS_Props = {
+    modelValue?: boolean;
+    value: string;
+    disabled?: boolean;
+};
+declare var __VLS_22: {}, __VLS_35: {}, __VLS_43: {};
+type __VLS_Slots = {} & {
+    header?: (props: typeof __VLS_22) => any;
+} & {
+    action?: (props: typeof __VLS_35) => any;
+} & {
+    default?: (props: typeof __VLS_43) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((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/EPAccordion.vue

@@ -0,0 +1,64 @@
+<script setup>
+import {
+  AccordionContent,
+  AccordionHeader,
+  AccordionItem,
+  AccordionRoot,
+  AccordionTrigger
+} from "reka-ui";
+import { computed } from "vue";
+const props = defineProps({
+  modelValue: { type: Boolean, required: false, default: false },
+  value: { type: String, required: true },
+  disabled: { type: Boolean, required: false, default: false }
+});
+const emit = defineEmits(["update:modelValue"]);
+const activeValue = computed(() => props.modelValue ? props.value : void 0);
+</script>
+
+<template>
+  <AccordionRoot
+    type="single"
+    collapsible
+    :model-value="activeValue"
+    class="ep:w-full ep:min-w-0"
+    @update:model-value="emit('update:modelValue', $event === value)"
+  >
+    <AccordionItem
+      :value="value"
+      :disabled="disabled"
+      class="ep:w-full ep:min-w-0"
+    >
+      <AccordionHeader
+        as="div"
+        class="ep:group ep:relative ep:w-full ep:min-w-0"
+      >
+        <slot name="header" />
+        <AccordionTrigger
+          class="ep:group ep:absolute ep:top-1/2 ep:right-1.5 ep:flex ep:h-7 ep:w-7 ep:-translate-y-1/2 ep:cursor-pointer ep:items-center ep:justify-center ep:rounded-md ep:border-0 ep:bg-transparent ep:text-muted-ep ep:transition ep:hover:bg-theme-ep ep:hover:text-white ep:focus-visible:outline-none ep:focus-visible:ring-2 ep:focus-visible:ring-white/20"
+          :aria-label="modelValue ? 'Close folder' : 'Open folder'"
+        >
+          <Icon
+            name="mingcute:down-small-line"
+            size="18"
+            aria-hidden="true"
+            class="ep:transition-transform ep:group-data-[state=closed]:-rotate-90"
+          />
+        </AccordionTrigger>
+        <div
+          v-if="$slots.action"
+          class="ep:absolute ep:top-1/2 ep:right-9 ep:-translate-y-1/2 ep:opacity-0 ep:transition ep:group-hover:opacity-100 ep:focus-within:opacity-100"
+        >
+          <slot name="action" />
+        </div>
+      </AccordionHeader>
+      <AccordionContent class="eponyme-accordion-content ep:overflow-hidden ep:pt-1 ep:text-muted-ep">
+        <slot />
+      </AccordionContent>
+    </AccordionItem>
+  </AccordionRoot>
+</template>
+
+<style scoped>
+.eponyme-accordion-content[data-state=open]{animation:eponyme-accordion-down .18s cubic-bezier(.22,1,.36,1)}.eponyme-accordion-content[data-state=closed]{animation:eponyme-accordion-up .14s ease-in}@keyframes eponyme-accordion-down{0%{height:0;opacity:0}to{height:var(--reka-accordion-content-height);opacity:1}}@keyframes eponyme-accordion-up{0%{height:var(--reka-accordion-content-height);opacity:1}to{height:0;opacity:0}}
+</style>

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

@@ -0,0 +1,26 @@
+type __VLS_Props = {
+    modelValue?: boolean;
+    value: string;
+    disabled?: boolean;
+};
+declare var __VLS_22: {}, __VLS_35: {}, __VLS_43: {};
+type __VLS_Slots = {} & {
+    header?: (props: typeof __VLS_22) => any;
+} & {
+    action?: (props: typeof __VLS_35) => any;
+} & {
+    default?: (props: typeof __VLS_43) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((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/EPAvatar.d.vue.ts

@@ -0,0 +1,9 @@
+type __VLS_Props = {
+    src?: string;
+    alt?: string;
+    fallback?: string;
+    size?: 'sm' | 'md' | 'lg';
+};
+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/EPAvatar.vue

@@ -0,0 +1,25 @@
+<script setup>
+import { AvatarFallback, AvatarImage, AvatarRoot } from "reka-ui";
+import { initials } from "../../utils/initials";
+defineProps({
+  src: { type: String, required: false },
+  alt: { type: String, required: false, default: "" },
+  fallback: { type: String, required: false, default: "?" },
+  size: { type: String, required: false, default: "md" }
+});
+</script>
+
+<template>
+  <AvatarRoot
+    class="ep:inline-flex ep:shrink-0 ep:items-center ep:justify-center ep:overflow-hidden ep:rounded-full ep:bg-selected-ep ep:text-xs ep:font-semibold ep:text-text-ep"
+    :class="{ sm: 'ep:h-8 ep:w-8', md: 'ep:h-9 ep:w-9', lg: 'ep:h-12 ep:w-12' }[size]"
+  >
+    <AvatarImage
+      v-if="src"
+      :src="src"
+      :alt="alt"
+      class="ep:h-full ep:w-full ep:object-cover"
+    />
+    <AvatarFallback>{{ initials(fallback) }}</AvatarFallback>
+  </AvatarRoot>
+</template>

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

@@ -0,0 +1,9 @@
+type __VLS_Props = {
+    src?: string;
+    alt?: string;
+    fallback?: string;
+    size?: 'sm' | 'md' | 'lg';
+};
+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/EPBadge.d.vue.ts

@@ -0,0 +1,16 @@
+type __VLS_Props = {
+    variant?: 'neutral' | 'success' | 'warning' | 'danger';
+};
+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/EPBadge.vue

@@ -0,0 +1,17 @@
+<script setup>
+defineProps({
+  variant: { type: String, required: false, default: "neutral" }
+});
+</script>
+
+<template>
+  <span
+    class="ep:inline-flex ep:items-center ep:rounded-full ep:border ep:px-2.5 ep:py-1 ep:text-[10px] ep:font-semibold ep:tracking-widest ep:uppercase"
+    :class="{
+  neutral: 'ep:border-white/15 ep:text-muted-ep',
+  success: 'ep:border-success-ep/30 ep:text-success-ep',
+  warning: 'ep:border-warning-ep/30 ep:text-warning-ep',
+  danger: 'ep:border-danger-ep/30 ep:text-danger-ep'
+}[variant]"
+  ><slot /></span>
+</template>

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

@@ -0,0 +1,16 @@
+type __VLS_Props = {
+    variant?: 'neutral' | 'success' | 'warning' | 'danger';
+};
+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/EPButton.d.vue.ts

@@ -0,0 +1,22 @@
+type __VLS_Props = {
+    label?: string;
+    icon?: string;
+    variant?: 'primary' | 'secondary' | 'ghost' | 'danger';
+    size?: 'sm' | 'md' | 'icon';
+    type?: 'button' | 'submit' | 'reset';
+    loading?: boolean;
+    disabled?: 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/EPButton.vue

@@ -0,0 +1,55 @@
+<script setup>
+import { computed, useSlots } from "vue";
+const slots = useSlots();
+const props = defineProps({
+  label: { type: String, required: false },
+  icon: { type: String, required: false },
+  variant: { type: String, required: false, default: "secondary" },
+  size: { type: String, required: false },
+  type: { type: String, required: false, default: "button" },
+  loading: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false }
+});
+const resolvedSize = computed(
+  () => props.size ?? (props.icon && !props.label && !slots.default ? "icon" : "md")
+);
+const classes = computed(() => [
+  "ep:inline-flex ep:cursor-pointer ep:items-center ep:justify-center ep:gap-2 ep:rounded-lg ep:border ep:text-sm ep:font-medium ep:transition ep:focus-visible:outline-none ep:focus-visible:ring-2 ep:focus-visible:ring-white/30 ep:active:translate-y-px ep:disabled:cursor-not-allowed ep:disabled:opacity-50",
+  {
+    primary: "ep:border-white/80 ep:bg-white ep:text-theme-ep ep:hover:bg-text-ep",
+    secondary: "ep:border-border-ep ep:bg-transparent ep:text-muted-ep ep:hover:bg-selected-ep ep:hover:text-white",
+    ghost: "ep:border-transparent ep:bg-transparent ep:text-muted-ep ep:hover:bg-selected-ep ep:hover:text-white",
+    danger: "ep:border-danger-ep/30 ep:bg-danger-ep/10 ep:text-danger-ep ep:hover:bg-danger-ep/20"
+  }[props.variant],
+  {
+    sm: "ep:h-8 ep:px-3 ep:text-xs",
+    md: "ep:h-10 ep:px-5",
+    icon: "ep:h-8 ep:w-8 ep:p-0"
+  }[resolvedSize.value]
+]);
+</script>
+
+<template>
+  <button
+    :type="type"
+    :disabled="disabled || loading"
+    :aria-busy="loading || void 0"
+    :class="classes"
+  >
+    <span
+      v-if="loading"
+      class="ep:h-1.5 ep:w-1.5 ep:animate-pulse ep:rounded-full ep:bg-current"
+      aria-hidden="true"
+    />
+    <template v-if="label">
+      {{ label }}
+    </template>
+    <slot v-else-if="$slots.default" />
+    <Icon
+      v-else-if="icon"
+      :name="icon"
+      size="20"
+      aria-hidden="true"
+    />
+  </button>
+</template>

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

@@ -0,0 +1,22 @@
+type __VLS_Props = {
+    label?: string;
+    icon?: string;
+    variant?: 'primary' | 'secondary' | 'ghost' | 'danger';
+    size?: 'sm' | 'md' | 'icon';
+    type?: 'button' | 'submit' | 'reset';
+    loading?: boolean;
+    disabled?: 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/EPCheckbox.d.vue.ts

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

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

@@ -0,0 +1,21 @@
+<script setup>
+import { CheckboxIndicator, CheckboxRoot } from "reka-ui";
+defineProps({
+  modelValue: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false }
+});
+const emit = defineEmits(["update:modelValue"]);
+</script>
+
+<template>
+  <CheckboxRoot
+    :model-value="modelValue"
+    :disabled="disabled"
+    class="ep:flex ep:h-5 ep:w-5 ep:shrink-0 ep:cursor-pointer ep:items-center ep:justify-center ep:rounded-md ep:border ep:border-border-ep ep:bg-selected-ep ep:text-theme-ep ep:outline-none ep:transition ep:focus-visible:ring-2 ep:focus-visible:ring-white/20 ep:data-[state=checked]:border-white ep:data-[state=checked]:bg-white ep:disabled:cursor-not-allowed ep:disabled:opacity-50"
+    @update:model-value="emit('update:modelValue', $event === true)"
+  >
+    <CheckboxIndicator class="ep:text-xs ep:font-bold">
+      ✓
+    </CheckboxIndicator>
+  </CheckboxRoot>
+</template>

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

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

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

@@ -0,0 +1,19 @@
+type __VLS_Props = {
+    /** Lands on the native picker, which is the focusable control the label points at. */
+    id?: string;
+    modelValue?: string;
+    /** Clickable palette; an empty list leaves only the custom picker. */
+    presets?: ReadonlyArray<{
+        label: string;
+        value: string;
+    }>;
+    disabled?: boolean;
+    invalid?: 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/EPColorPicker.vue

@@ -0,0 +1,63 @@
+<script setup>
+import { computed } from "vue";
+import { normalizeHexColor, sameHexColor } from "../../utils/normalize-hex-color";
+const props = defineProps({
+  id: { type: String, required: false },
+  modelValue: { type: String, required: false, default: "" },
+  presets: { type: Array, required: false, default: () => [] },
+  disabled: { type: Boolean, required: false },
+  invalid: { type: Boolean, required: false }
+});
+const emit = defineEmits(["update:modelValue"]);
+const swatchClasses = "ep:h-8 ep:w-8 ep:shrink-0 ep:cursor-pointer ep:rounded-full ep:border ep:border-white/15 ep:transition ep:outline-none ep:focus-visible:ring-2 ep:focus-visible:ring-white/40 ep:disabled:cursor-not-allowed ep:disabled:opacity-50";
+const pickerValue = computed(() => normalizeHexColor(props.modelValue)?.slice(0, 7) ?? "#000000");
+const isPreset = computed(() => props.presets.some((preset) => sameHexColor(preset.value, props.modelValue)));
+const customActive = computed(() => Boolean(props.modelValue) && !isPreset.value);
+function select(value) {
+  if (props.disabled) return;
+  emit("update:modelValue", value);
+}
+</script>
+
+<template>
+  <div class="ep:flex ep:flex-wrap ep:items-center ep:gap-2">
+    <button
+      v-for="preset in presets"
+      :key="preset.value"
+      type="button"
+      :class="[swatchClasses, sameHexColor(preset.value, modelValue) ? 'ep:ring-2 ep:ring-white ep:ring-offset-2 ep:ring-offset-theme-ep' : 'ep:hover:scale-110']"
+      :style="{ backgroundColor: preset.value }"
+      :disabled="disabled"
+      :aria-pressed="sameHexColor(preset.value, modelValue)"
+      :aria-label="preset.label"
+      :title="preset.label"
+      @click="select(preset.value)"
+    />
+
+    <span
+      class="ep:relative ep:inline-flex"
+      :class="{ 'ep:ml-1': presets.length }"
+    >
+      <span
+        :class="[swatchClasses, 'ep:flex ep:items-center ep:justify-center ep:bg-selected-ep ep:text-sm ep:text-muted-ep', customActive ? 'ep:ring-2 ep:ring-white ep:ring-offset-2 ep:ring-offset-theme-ep' : '']"
+        :style="customActive ? { backgroundColor: pickerValue } : void 0"
+        aria-hidden="true"
+      >
+        <template v-if="!customActive">+</template>
+      </span>
+      <input
+        :id="id"
+        type="color"
+        :value="pickerValue"
+        :disabled="disabled"
+        :aria-invalid="invalid || void 0"
+        aria-label="Custom color"
+        title="Custom color"
+        class="ep:absolute ep:inset-0 ep:h-full ep:w-full ep:cursor-pointer ep:rounded-full ep:opacity-0 ep:disabled:cursor-not-allowed"
+        @input="select($event.target.value)"
+      >
+    </span>
+
+    <span class="ep:ml-1 ep:text-sm ep:font-medium ep:text-muted-ep">{{ modelValue }}</span>
+  </div>
+</template>

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

@@ -0,0 +1,19 @@
+type __VLS_Props = {
+    /** Lands on the native picker, which is the focusable control the label points at. */
+    id?: string;
+    modelValue?: string;
+    /** Clickable palette; an empty list leaves only the custom picker. */
+    presets?: ReadonlyArray<{
+        label: string;
+        value: string;
+    }>;
+    disabled?: boolean;
+    invalid?: 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/EPDialog.d.vue.ts

@@ -0,0 +1,24 @@
+type __VLS_Props = {
+    open?: boolean;
+    title: string;
+    description?: string;
+};
+declare var __VLS_16: {}, __VLS_47: {};
+type __VLS_Slots = {} & {
+    trigger?: (props: typeof __VLS_16) => any;
+} & {
+    default?: (props: typeof __VLS_47) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+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/EPDialog.vue

@@ -0,0 +1,54 @@
+<script setup>
+import { DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogRoot, DialogTitle, DialogTrigger } from "reka-ui";
+import EPButton from "./EPButton.vue";
+defineProps({
+  open: { type: Boolean, required: false },
+  title: { type: String, required: true },
+  description: { type: String, required: false }
+});
+const emit = defineEmits(["update:open"]);
+</script>
+
+<template>
+  <DialogRoot
+    :open="open"
+    @update:open="emit('update:open', $event)"
+  >
+    <DialogTrigger
+      v-if="$slots.trigger"
+      as-child
+    >
+      <slot name="trigger" />
+    </DialogTrigger>
+    <DialogPortal>
+      <DialogOverlay class="eponyme-dialog-overlay ep:fixed ep:inset-0 ep:z-50 ep:bg-black/65 ep:backdrop-blur-sm" />
+      <DialogContent class="eponyme-dialog-content eponyme-portal ep:fixed ep:top-1/2 ep:left-1/2 ep:z-50 ep:w-[min(32rem,calc(100vw-2rem))] ep:rounded-2xl ep:border-0 ep:bg-theme-ep ep:p-6 ep:font-sans ep:text-text-ep ep:outline-none">
+        <DialogTitle class="ep:text-xl ep:font-semibold ep:text-white">
+          {{ title }}
+        </DialogTitle>
+        <DialogDescription
+          v-if="description"
+          class="ep:mt-2 ep:text-sm ep:leading-relaxed ep:text-muted-ep"
+        >
+          {{ description }}
+        </DialogDescription>
+        <div class="ep:mt-5">
+          <slot />
+        </div>
+        <DialogClose as-child>
+          <EPButton
+            variant="ghost"
+            icon="mingcute:close-line"
+            class="ep:absolute ep:top-4 ep:right-4"
+            aria-label="Close"
+            title="Close"
+          />
+        </DialogClose>
+      </DialogContent>
+    </DialogPortal>
+  </DialogRoot>
+</template>
+
+<style scoped>
+.eponyme-dialog-content{transform:translate(-50%,-50%)}.eponyme-dialog-overlay[data-state=open]{animation:eponyme-dialog-overlay-in .22s ease-out}.eponyme-dialog-overlay[data-state=closed]{animation:eponyme-dialog-overlay-out .14s ease-in}.eponyme-dialog-content[data-state=open]{animation:eponyme-dialog-content-in .28s cubic-bezier(.22,1,.36,1)}.eponyme-dialog-content[data-state=closed]{animation:eponyme-dialog-content-out .15s ease-in}@keyframes eponyme-dialog-overlay-in{0%{opacity:0}to{opacity:1}}@keyframes eponyme-dialog-overlay-out{0%{opacity:1}to{opacity:0}}@keyframes eponyme-dialog-content-in{0%{opacity:0;transform:translate(-50%,-48%) scale(.96)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}@keyframes eponyme-dialog-content-out{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-48%) scale(.97)}}@media (prefers-reduced-motion:reduce){.eponyme-dialog-content,.eponyme-dialog-overlay{animation-duration:1ms!important}}
+</style>

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

@@ -0,0 +1,24 @@
+type __VLS_Props = {
+    open?: boolean;
+    title: string;
+    description?: string;
+};
+declare var __VLS_16: {}, __VLS_47: {};
+type __VLS_Slots = {} & {
+    trigger?: (props: typeof __VLS_16) => any;
+} & {
+    default?: (props: typeof __VLS_47) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+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;
+    };
+};