@cwa/nuxt-edge 0.0.0-29696494.72f11a4

package/dist/runtime/templates/components/ui/BackgroundParticles.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/templates/components/ui/Hamburger.d.vue.ts

@@ -0,0 +1,10 @@
+type __VLS_ModelProps = {
+    modelValue: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & 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/templates/components/ui/Hamburger.vue

@@ -0,0 +1,75 @@
+<template>
+  <a
+    class="cwa:inline-block cwa:h-6"
+    :class="{ 'is-open': model }"
+    @click.stop="toggleMenu"
+  >
+    <span class="cwa:sr-only">Menu</span>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 50 50"
+      class="cwa:relative cwa:block cwa:transition-[stroke] cwa:duration-300 cwa:fill-none cwa:my-0 cwa:mx-auto cwa:[stroke-linecap:round] cwa:stroke-[5px] cwa:h-full cwa:cursor-pointer"
+      :class="[model ? 'cwa:stroke-white' : 'cwa:stroke-gray-300']"
+    >
+      <!-- end - final X -->
+      <g
+        class="cwa:transition-opacity-transform cwa:duration-300 cwa:origin-center"
+        :class="[model ? 'cwa:opacity-100 cwa:rotate-0' : 'cwa:opacity-0 cwa:-rotate-45']"
+      >
+        <path
+          class="end-one"
+          d="M42,8 L 25.5,25.3 L 8,8"
+        />
+        <path
+          class="end-two"
+          d="M8,42 L 25.5,25.3 L 42,42"
+        />
+      </g>
+      <!-- middle - curved X (only used in legacy gsap svg transforms) -->
+      <g class="cwa:hidden">
+        <path
+          class="middle-one"
+          d="M8,8 c 0 0, 2.2 4.5, 12 13.5 S 38,8,42,8"
+        />
+        <path
+          class="middle-two"
+          d="M8,42 c 0 0, 2.2-4.5, 12-13.5 S 38,42,42,42"
+        />
+      </g>
+      <!-- start, 3 lines -->
+      <g
+        class="cwa:transition-opacity-transform cwa:duration-300 cwa:origin-center"
+        :class="[model ? 'cwa:opacity-0 cwa:rotate-180' : 'cwa:opacity-100 cwa:rotate-0']"
+      >
+        <!-- top path for morphing into middle (when legacy used gsap - may re-implement) -->
+        <path
+          class="stage-one"
+          d="M5,8c0,0,2.2,0,13,0s13,0,27,0"
+        />
+        <!-- bottom path for morphing into middle (when legacy used gsap - may re-implement) -->
+        <path
+          class="stage-two"
+          d="M5,42c0,0,2.2,0,13,0s13,0,27,0"
+        />
+        <!-- middle line as we just fade out -->
+        <line
+          class="cwa:origin-center"
+          x1="5"
+          y1="25"
+          x2="45"
+          y2="25"
+        />
+      </g>
+    </svg>
+  </a>
+</template>
+
+<script setup>
+const model = defineModel({ type: Boolean, ...{
+  required: true,
+  default: false
+} });
+function toggleMenu() {
+  model.value = !model.value;
+}
+</script>

package/dist/runtime/templates/components/ui/Hamburger.vue.d.ts

@@ -0,0 +1,10 @@
+type __VLS_ModelProps = {
+    modelValue: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & 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/templates/components/ui/ProgressBar.d.vue.ts

@@ -0,0 +1,10 @@
+type __VLS_Props = {
+    show: boolean;
+    percent: number;
+    colourClass?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    colourClass: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/templates/components/ui/ProgressBar.spec.ts.snap

@@ -0,0 +1,71 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`ProgressBar > snapshots > should match snapshot IF progress bar has percentage 1`] = `
+<transition-stub
+  appear="false"
+  css="true"
+  enteractiveclass="cwa:duration-200 cwa:ease-out"
+  enterfromclass="cwa:transform cwa:opacity-0 cwa:w-0"
+  entertoclass="cwa:opacity-100"
+  leaveactiveclass="cwa:duration-300 cwa:ease-in cwa:delay-200"
+  leavefromclass="cwa:opacity-100"
+  leavetoclass="cwa:transform cwa:opacity-0"
+  persisted="true"
+>
+  <div
+    class="cwa:w-full cwa:h-0.5"
+  >
+    <div
+      class="cwa:bg-green cwa:h-0.5 cwa:transition-all cwa:duration-300"
+      style="width: 75%;"
+    />
+  </div>
+</transition-stub>
+`;
+
+exports[`ProgressBar > snapshots > should match snapshot IF progress bar is NOT shown 1`] = `
+<transition-stub
+  appear="false"
+  css="true"
+  enteractiveclass="cwa:duration-200 cwa:ease-out"
+  enterfromclass="cwa:transform cwa:opacity-0 cwa:w-0"
+  entertoclass="cwa:opacity-100"
+  leaveactiveclass="cwa:duration-300 cwa:ease-in cwa:delay-200"
+  leavefromclass="cwa:opacity-100"
+  leavetoclass="cwa:transform cwa:opacity-0"
+  persisted="true"
+>
+  <div
+    class="cwa:w-full cwa:h-0.5"
+    style="display: none;"
+  >
+    <div
+      class="cwa:bg-green cwa:h-0.5 cwa:transition-all cwa:duration-300"
+      style="width: 0%;"
+    />
+  </div>
+</transition-stub>
+`;
+
+exports[`ProgressBar > snapshots > should match snapshot IF progress bar is shown 1`] = `
+<transition-stub
+  appear="false"
+  css="true"
+  enteractiveclass="cwa:duration-200 cwa:ease-out"
+  enterfromclass="cwa:transform cwa:opacity-0 cwa:w-0"
+  entertoclass="cwa:opacity-100"
+  leaveactiveclass="cwa:duration-300 cwa:ease-in cwa:delay-200"
+  leavefromclass="cwa:opacity-100"
+  leavetoclass="cwa:transform cwa:opacity-0"
+  persisted="true"
+>
+  <div
+    class="cwa:w-full cwa:h-0.5"
+  >
+    <div
+      class="cwa:bg-green cwa:h-0.5 cwa:transition-all cwa:duration-300"
+      style="width: 0%;"
+    />
+  </div>
+</transition-stub>
+`;

package/dist/runtime/templates/components/ui/ProgressBar.vue

@@ -0,0 +1,29 @@
+<template>
+  <Transition
+    enter-from-class="cwa:transform cwa:opacity-0 cwa:w-0"
+    enter-active-class="cwa:duration-200 cwa:ease-out"
+    enter-to-class="cwa:opacity-100"
+    leave-from-class="cwa:opacity-100"
+    leave-active-class="cwa:duration-300 cwa:ease-in cwa:delay-200"
+    leave-to-class="cwa:transform cwa:opacity-0"
+  >
+    <div
+      v-show="props.show"
+      class="cwa:w-full cwa:h-0.5"
+    >
+      <div
+        :class="[colourClass]"
+        class="cwa:h-0.5 cwa:transition-all cwa:duration-300"
+        :style="{ width: `${props.percent}%` }"
+      />
+    </div>
+  </Transition>
+</template>
+
+<script setup>
+const props = defineProps({
+  show: { type: Boolean, required: true },
+  percent: { type: Number, required: true },
+  colourClass: { type: String, required: false, default: "cwa:bg-green" }
+});
+</script>

package/dist/runtime/templates/components/ui/ProgressBar.vue.d.ts

@@ -0,0 +1,10 @@
+type __VLS_Props = {
+    show: boolean;
+    percent: number;
+    colourClass?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    colourClass: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/templates/components/ui/README.md

@@ -0,0 +1,6 @@
+Components in this directory are available to the application automatically with the 'CwaUi' prefix.
+
+For example:
+```vue
+<CwaUiFormToggle />
+```

package/dist/runtime/templates/components/ui/alert/Info.d.vue.ts

@@ -0,0 +1,12 @@
+type __VLS_Slots = {
+    default(): 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_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/templates/components/ui/alert/Info.spec.ts.snap

@@ -0,0 +1,23 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Info > snapshots > should match snapshot with passed content 1`] = `
+<div
+  class="cwa:flex cwa:items-center cwa:bg-blue-500 cwa:text-white cwa:text-sm cwa:font-bold cwa:px-4 cwa:py-3"
+  role="alert"
+>
+  <svg
+    class="cwa:fill-current cwa:w-4 cwa:h-4 cwa:mr-2"
+    viewBox="0 0 20 20"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M12.432 0c1.34 0 2.01.912 2.01 1.957 0 1.305-1.164 2.512-2.679 2.512-1.269 0-2.009-.75-1.974-1.99C9.789 1.436 10.67 0 12.432 0zM8.309 20c-1.058 0-1.833-.652-1.093-3.524l1.214-5.092c.211-.814.246-1.141 0-1.141-.317 0-1.689.562-2.502 1.117l-.528-.88c2.572-2.186 5.531-3.467 6.801-3.467 1.057 0 1.233 1.273.705 3.23l-1.391 5.352c-.246.945-.141 1.271.106 1.271.317 0 1.357-.392 2.379-1.207l.6.814C12.098 19.02 9.365 20 8.309 20z"
+    />
+  </svg>
+  
+  <div>
+    CWA
+  </div>
+  
+</div>
+`;

package/dist/runtime/templates/components/ui/alert/Info.vue

@@ -0,0 +1,17 @@
+<script setup>
+defineSlots();
+</script>
+
+<template>
+  <div
+    class="cwa:flex cwa:items-center cwa:bg-blue-500 cwa:text-white cwa:text-sm cwa:font-bold cwa:px-4 cwa:py-3"
+    role="alert"
+  >
+    <svg
+      class="cwa:fill-current cwa:w-4 cwa:h-4 cwa:mr-2"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 20 20"
+    ><path d="M12.432 0c1.34 0 2.01.912 2.01 1.957 0 1.305-1.164 2.512-2.679 2.512-1.269 0-2.009-.75-1.974-1.99C9.789 1.436 10.67 0 12.432 0zM8.309 20c-1.058 0-1.833-.652-1.093-3.524l1.214-5.092c.211-.814.246-1.141 0-1.141-.317 0-1.689.562-2.502 1.117l-.528-.88c2.572-2.186 5.531-3.467 6.801-3.467 1.057 0 1.233 1.273.705 3.23l-1.391 5.352c-.246.945-.141 1.271.106 1.271.317 0 1.357-.392 2.379-1.207l.6.814C12.098 19.02 9.365 20 8.309 20z" /></svg>
+    <slot />
+  </div>
+</template>

package/dist/runtime/templates/components/ui/alert/Info.vue.d.ts

@@ -0,0 +1,12 @@
+type __VLS_Slots = {
+    default(): 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_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/templates/components/ui/alert/Warning.d.vue.ts

@@ -0,0 +1,13 @@
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => 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_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/templates/components/ui/alert/Warning.spec.ts.snap

@@ -0,0 +1,18 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Warning > snapshots > should match snapshot with passed content 1`] = `
+<div
+  class="cwa:p-1.5"
+  role="alert"
+>
+  <div
+    class="cwa:flex cwa:items-start cwa:outline-1 cwa:outline-offset-2 cwa:outline-danger-dark cwa:bg-danger-dark cwa:text-white cwa:text-sm cwa:font-bold cwa:px-4 cwa:py-3 cwa:rounded-md"
+  >
+    
+    <div>
+      CWA
+    </div>
+    
+  </div>
+</div>
+`;

package/dist/runtime/templates/components/ui/alert/Warning.vue

@@ -0,0 +1,13 @@
+<template>
+  <div
+    class="cwa:p-1.5"
+    role="alert"
+  >
+    <div class="cwa:flex cwa:items-start cwa:outline-1 cwa:outline-offset-2 cwa:outline-danger-dark cwa:bg-danger-dark cwa:text-white cwa:text-sm cwa:font-bold cwa:px-4 cwa:py-3 cwa:rounded-md">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+</script>

package/dist/runtime/templates/components/ui/alert/Warning.vue.d.ts

@@ -0,0 +1,13 @@
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => 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_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/templates/components/ui/form/Button.d.vue.ts

@@ -0,0 +1,53 @@
+import type { RouteLocationRaw } from 'vue-router';
+import type { PopperOptions } from '#cwa/types/popper';
+export type ModelValue = undefined | string | number | boolean | object | null | (string | number | boolean | object)[];
+export interface ButtonOption {
+    label: string;
+    value: ModelValue;
+}
+export type ButtonColor = 'blue' | 'grey' | 'dark' | 'error';
+type __VLS_Props = {
+    color?: ButtonColor;
+    buttonClass?: string;
+    options?: (ButtonOption | ButtonOption[])[];
+    popper?: PopperOptions;
+    disabled?: boolean;
+    loading?: boolean;
+    to?: RouteLocationRaw;
+};
+declare const props: Readonly<{}> & {
+    readonly color: ButtonColor;
+    readonly buttonClass: string | undefined;
+    readonly options: (ButtonOption | ButtonOption[])[] | undefined;
+    readonly popper: PopperOptions | undefined;
+    readonly disabled: boolean;
+    readonly loading: boolean;
+    readonly to: string | import("vue-router").RouteLocationAsRelativeGeneric | import("vue-router").RouteLocationAsPathGeneric | undefined;
+} & {
+    readonly disabled: boolean;
+    readonly loading: boolean;
+};
+type __VLS_Slots = {
+    default?: (p: typeof props) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    click: (value?: ModelValue) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: ((value?: ModelValue) => any) | undefined;
+}>, {
+    options: (ButtonOption | ButtonOption[])[];
+    popper: PopperOptions;
+    color: ButtonColor;
+    disabled: boolean;
+    to: RouteLocationRaw;
+    buttonClass: string;
+    loading: 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/templates/components/ui/form/Button.vue

@@ -0,0 +1,139 @@
+<script setup>
+import { computed, Comment, Text } from "vue";
+import { defu } from "defu";
+import {
+  Popover,
+  PopoverButton,
+  PopoverPanel
+} from "@headlessui/vue";
+import { usePopper } from "#cwa/composables/popper";
+import ButtonPopoverGroup from "#cwa/templates/components/ui/form/ButtonPopoverGroup.vue";
+import ButtonPopoverItem from "#cwa/templates/components/ui/form/ButtonPopoverItem.vue";
+import Spinner from "#cwa/templates/components/utils/Spinner.vue";
+import { CwaLink } from "#components";
+const props = defineProps({
+  color: { type: String, required: false, default: "grey" },
+  buttonClass: { type: String, required: false, default: void 0 },
+  options: { type: Array, required: false, default: void 0 },
+  popper: { type: Object, required: false, default: void 0 },
+  disabled: { type: Boolean, required: false, default: false },
+  loading: { type: Boolean, required: false, default: false },
+  to: { type: null, required: false, default: void 0 }
+});
+const slots = defineSlots();
+const emit = defineEmits(["click"]);
+const buttonColorClassNames = computed(() => {
+  if (props.color === "blue") {
+    return "cwa:text-white cwa:bg-blue-600/90 cwa:hover:bg-blue-600 cwa:border-transparent";
+  }
+  if (props.color === "dark") {
+    return "cwa:text-light cwa:bg-dark/90 cwa:hover:bg-dark cwa:border-stone-400 cwa:hover:border-white cwa:hover:text-white";
+  }
+  if (props.color === "error") {
+    return "cwa:text-light cwa:bg-magenta/80 cwa:hover:bg-magenta cwa:border-magenta cwa:hover:border-magenta cwa:hover:text-white";
+  }
+  return "cwa:text-white cwa:bg-stone-700/90 cwa:hover:bg-stone-700 cwa:border-transparent";
+});
+const buttonBaseClass = computed(() => {
+  return `${buttonColorClassNames.value} cwa:cursor-pointer cwa:py-1.5 cwa:px-3 cwa:md:px-4 cwa:border cwa:transition cwa:disabled:pointer-events-none cwa:disabled:opacity-70 cwa:disabled:saturate-[.4]`;
+});
+const buttonClassNames = computed(() => {
+  const baseClass = `cwa:grow ${buttonBaseClass.value} ${props.buttonClass}`;
+  return `${baseClass} ${buttonColorClassNames.value}`;
+});
+const hasOptions = computed(() => {
+  return props.options?.length;
+});
+function handleOptionClick(value, close) {
+  close();
+  emit("click", value);
+}
+function hasSlotContent(slot, slotProps = {}) {
+  if (!slot) {
+    return false;
+  }
+  return slot(slotProps).some((vnode) => {
+    if (vnode.type === Comment) {
+      return false;
+    }
+    if (Array.isArray(vnode.children) && !vnode.children.length) {
+      return false;
+    }
+    return vnode.type !== Text || typeof vnode.children === "string" && vnode.children.trim() !== "";
+  });
+}
+const showButton = computed(() => {
+  const slotContent = slots.default?.(props);
+  return hasSlotContent(slots.default, slotContent);
+});
+const dotClassName = ["cwa:w-[0.3rem]", "cwa:h-[0.3rem]", "cwa:rounded-full", "cwa:bg-white", "cwa:absolute", "cwa:left-1/2", "cwa:-translate-x-1/2"];
+const middleDotClassName = [...dotClassName, "cwa:top-1/2 cwa:-translate-y-1/2"];
+const topDotClassName = [...dotClassName, "cwa:top-2"];
+const bottomDotClassName = [...dotClassName, "cwa:bottom-2"];
+const enforcedOps = {
+  placement: "top-start",
+  offsetDistance: 0
+};
+const popperOps = computed(() => defu({}, props.popper, enforcedOps));
+const [trigger, container] = usePopper(popperOps.value);
+</script>
+
+<template>
+  <Popover
+    v-slot="{ open }"
+    class="cwa:flex cwa:gap-x-1.5 relative"
+  >
+    <component
+      :is="to ? CwaLink : 'button'"
+      v-if="showButton"
+      :to="to"
+      :class="[buttonClassNames, open ? 'cwa:opacity-50' : '']"
+      :disabled="loading || disabled || open"
+      @click.prevent.stop="emit('click')"
+    >
+      <div
+        v-if="loading"
+        class="cwa:flex cwa:w-full cwa:justify-center"
+      >
+        <Spinner :show="true" />
+      </div>
+      <slot
+        v-else
+        v-bind="props"
+      />
+    </component>
+    <template v-if="hasOptions">
+      <PopoverButton
+        ref="trigger"
+        :class="buttonBaseClass"
+        class="cwa:relative"
+        :disabled="disabled || loading"
+      >
+        &nbsp;
+        <span :class="topDotClassName" />
+        <span :class="middleDotClassName" />
+        <span :class="bottomDotClassName" />
+      </PopoverButton>
+      <PopoverPanel
+        v-slot="{ close }"
+        ref="container"
+        class="cwa:absolute cwa:!min-w-[220px] cwa:max-w-[300px] cwa:bg-stone-700 cwa:py-1"
+      >
+        <template v-for="(option, index) of options">
+          <ButtonPopoverGroup
+            v-if="Array.isArray(option)"
+            :key="`popover-group-option-${index}`"
+            :options="option"
+            @click="(value) => handleOptionClick(value, close)"
+          />
+          <ButtonPopoverItem
+            v-else
+            :key="`popover-item-option-${index}`"
+            :option="option"
+            @click="(value) => handleOptionClick(value, close)"
+          />
+        </template>
+      </PopoverPanel>
+    </template>
+  </Popover>
+</template>

package/dist/runtime/templates/components/ui/form/Button.vue.d.ts

@@ -0,0 +1,53 @@
+import type { RouteLocationRaw } from 'vue-router';
+import type { PopperOptions } from '#cwa/types/popper';
+export type ModelValue = undefined | string | number | boolean | object | null | (string | number | boolean | object)[];
+export interface ButtonOption {
+    label: string;
+    value: ModelValue;
+}
+export type ButtonColor = 'blue' | 'grey' | 'dark' | 'error';
+type __VLS_Props = {
+    color?: ButtonColor;
+    buttonClass?: string;
+    options?: (ButtonOption | ButtonOption[])[];
+    popper?: PopperOptions;
+    disabled?: boolean;
+    loading?: boolean;
+    to?: RouteLocationRaw;
+};
+declare const props: Readonly<{}> & {
+    readonly color: ButtonColor;
+    readonly buttonClass: string | undefined;
+    readonly options: (ButtonOption | ButtonOption[])[] | undefined;
+    readonly popper: PopperOptions | undefined;
+    readonly disabled: boolean;
+    readonly loading: boolean;
+    readonly to: string | import("vue-router").RouteLocationAsRelativeGeneric | import("vue-router").RouteLocationAsPathGeneric | undefined;
+} & {
+    readonly disabled: boolean;
+    readonly loading: boolean;
+};
+type __VLS_Slots = {
+    default?: (p: typeof props) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    click: (value?: ModelValue) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: ((value?: ModelValue) => any) | undefined;
+}>, {
+    options: (ButtonOption | ButtonOption[])[];
+    popper: PopperOptions;
+    color: ButtonColor;
+    disabled: boolean;
+    to: RouteLocationRaw;
+    buttonClass: string;
+    loading: 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/templates/components/ui/form/ButtonPopoverGroup.d.vue.ts

@@ -0,0 +1,11 @@
+import type { ButtonOption, ModelValue } from './Button.vue.js';
+type __VLS_Props = {
+    options: ButtonOption[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    click: (value?: ModelValue) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: ((value?: ModelValue) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/templates/components/ui/form/ButtonPopoverGroup.vue

@@ -0,0 +1,18 @@
+<script setup>
+import ButtonPopoverItem from "./ButtonPopoverItem.vue";
+const emit = defineEmits(["click"]);
+defineProps({
+  options: { type: Array, required: true }
+});
+</script>
+
+<template>
+  <div class="cwa:not-last:border-b cwa:border-solid cwa:border-stone-400">
+    <ButtonPopoverItem
+      v-for="(option, index) of options"
+      :key="`option-${index}-${option.label}`"
+      :option="option"
+      @click="(value) => emit('click', value)"
+    />
+  </div>
+</template>

package/dist/runtime/templates/components/ui/form/ButtonPopoverGroup.vue.d.ts

@@ -0,0 +1,11 @@
+import type { ButtonOption, ModelValue } from './Button.vue.js';
+type __VLS_Props = {
+    options: ButtonOption[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    click: (value?: ModelValue) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: ((value?: ModelValue) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;