@cwa/nuxt-edge 0.0.0-29696494.72f11a4

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

@@ -0,0 +1,11 @@
+import type { ButtonOption, ModelValue } from './Button.vue.js';
+type __VLS_Props = {
+    option: 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/ButtonPopoverItem.vue

@@ -0,0 +1,15 @@
+<script setup>
+const emit = defineEmits(["click"]);
+defineProps({
+  option: { type: Object, required: true }
+});
+</script>
+
+<template>
+  <button
+    class="cwa:block cwa:w-full cwa:py-2 cwa:px-5 cwa:hover:bg-dark cwa:text-left cwa:transition cwa:cursor-pointer"
+    @click.prevent.stop="emit('click', option.value)"
+  >
+    {{ option.label }}
+  </button>
+</template>

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

@@ -0,0 +1,11 @@
+import type { ButtonOption, ModelValue } from './Button.vue.js';
+type __VLS_Props = {
+    option: 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/File.d.vue.ts

@@ -0,0 +1,18 @@
+type __VLS_Props = {
+    label: string;
+    modelValue: string | number | undefined | null;
+    accept?: string;
+    fileExists: boolean;
+    disabled?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    delete: (...args: any[]) => void;
+    change: (...args: any[]) => void;
+    "update:modelValue": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onDelete?: ((...args: any[]) => any) | undefined;
+    onChange?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,72 @@
+<script setup>
+import { computed, useTemplateRef } from "vue";
+const props = defineProps({
+  label: { type: String, required: true },
+  modelValue: { type: null, required: true },
+  accept: { type: String, required: false },
+  fileExists: { type: Boolean, required: true },
+  disabled: { type: Boolean, required: false }
+});
+const fileInput = useTemplateRef("fileInput");
+const emit = defineEmits(["update:modelValue", "change", "delete"]);
+const value = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(value2) {
+    emit("update:modelValue", value2);
+  }
+});
+function showFileSelect() {
+  const clickEvent = new MouseEvent("click", {
+    view: window,
+    bubbles: true,
+    cancelable: false
+  });
+  fileInput.value?.dispatchEvent(clickEvent);
+}
+function handleFileChange() {
+  const file = fileInput.value?.files?.[0];
+  if (!file) return;
+  emit("change", file);
+  value.value = file.name;
+}
+function handleDeleteClick() {
+  emit("delete");
+}
+</script>
+
+<template>
+  <div
+    class="cwa:flex cwa:relative cwa:items-center cwa:select-none"
+    :class="{ 'cwa:opacity-50 cwa:pointer-events-none': disabled }"
+  >
+    <div class="cwa:flex cwa:items-center cwa:relative">
+      <input
+        ref="fileInput"
+        :accept="accept"
+        class="cwa:absolute cwa:h-full cwa:w-full cwa:top-0 cwa:left-0 cwa:opacity-0 cwa:outline-0"
+        type="file"
+        @change="handleFileChange"
+      >
+      <CwaUiFormButton @click="showFileSelect">
+        {{ label }}
+      </CwaUiFormButton>
+      <span class="cwa:ml-3 cwa:text-sm cwa:cursor-pointer cwa:font-medium">
+        {{ value || "No file" }}
+      </span>
+    </div>
+    <span
+      v-if="fileExists"
+      class="cwa:ml-4"
+    >
+      <CwaUiFormButton
+        color="grey"
+        button-class="cwa:min-w-[100px]"
+        @click="handleDeleteClick"
+      >
+        Remove File
+      </CwaUiFormButton>
+    </span>
+  </div>
+</template>

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

@@ -0,0 +1,18 @@
+type __VLS_Props = {
+    label: string;
+    modelValue: string | number | undefined | null;
+    accept?: string;
+    fileExists: boolean;
+    disabled?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    delete: (...args: any[]) => void;
+    change: (...args: any[]) => void;
+    "update:modelValue": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onDelete?: ((...args: any[]) => any) | undefined;
+    onChange?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

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

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

@@ -0,0 +1,17 @@
+<script setup>
+const [model, modifiers] = defineModel({ type: null, ...{
+  set(value) {
+    if (modifiers.nullable) {
+      value ||= null;
+    }
+    return value;
+  }
+} });
+</script>
+
+<template>
+  <input
+    v-model="model"
+    class="cwa:disabled:opacity-50 cwa:disabled:cursor-not-allowed cwa:disabled:pointer-events-none cwa:disabled:select-none cwa:text-light cwa:w-full cwa:dark-blur cwa:border-0 cwa:outline-dotted cwa:outline-1 cwa:outline-stone-700 cwa:hover:outline-stone-400 cwa:focus-visible:ring-2 cwa:focus-visible:ring-stone-600"
+  >
+</template>

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

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

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

@@ -0,0 +1,15 @@
+type __VLS_Props = {
+    label: string;
+};
+type __VLS_Slots = {
+    default(): 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/templates/components/ui/form/LabelWrapper.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="cwa:flex cwa:items-center cwa:gap-x-2">
+    <div class="cwa:text-sm">
+      {{ label }}
+    </div>
+    <div>
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  label: { type: String, required: true }
+});
+defineSlots();
+</script>

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

@@ -0,0 +1,15 @@
+type __VLS_Props = {
+    label: string;
+};
+type __VLS_Slots = {
+    default(): 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/templates/components/ui/form/SearchResource.d.vue.ts

@@ -0,0 +1,15 @@
+import type { ModelValue } from '#cwa/templates/components/ui/form/Button.vue';
+type __VLS_Props = {
+    modelValue: ModelValue;
+    endpoint: string;
+    property: string;
+    searchProperties?: string[];
+    notNullable?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:modelValue": (value?: ModelValue) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((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/SearchResource.vue

@@ -0,0 +1,212 @@
+<script setup>
+import { computed, onMounted, ref, watch } from "vue";
+import debounce from "lodash-es/debounce";
+import { Popover, PopoverPanel } from "@headlessui/vue";
+import CwaUiFormInput from "./Input.vue";
+import { useCwa, usePopper } from "#imports";
+import Spinner from "#cwa/templates/components/utils/Spinner.vue";
+import ButtonPopoverItem from "#cwa/templates/components/ui/form/ButtonPopoverItem.vue";
+import ButtonPopoverGroup from "#cwa/templates/components/ui/form/ButtonPopoverGroup.vue";
+const props = defineProps({
+  modelValue: { type: [String, Number, Boolean, Object, null, Array], required: true, skipCheck: true },
+  endpoint: { type: String, required: true },
+  property: { type: String, required: true },
+  searchProperties: { type: Array, required: false },
+  notNullable: { type: Boolean, required: false }
+});
+const emit = defineEmits(["update:modelValue"]);
+const $cwa = useCwa();
+const [trigger, container] = usePopper({
+  placement: "top-start",
+  offsetDistance: 4
+});
+const selectedResource = ref();
+const searchValue = ref();
+const fetchingCurrentResource = ref(0);
+const fetchCurrentCount = ref(0);
+const fetchingSearchValue = ref();
+const debounceFetchActive = ref(false);
+const fetchingSearchResults = ref(false);
+const searchResults = ref();
+const focussed = ref(false);
+const open = computed(() => {
+  return focussed.value && (showLoadingIndicator.value || !!searchResults.value);
+});
+let debouncedSearchCall;
+const value = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(value2) {
+    emit("update:modelValue", value2);
+  }
+});
+const resourcePropertyValue = computed(() => {
+  return selectedResource.value?.[props.property];
+});
+const showLoadingIndicator = computed(() => {
+  return fetchingCurrentResource.value === 0 && (fetchingSearchResults.value || debounceFetchActive.value);
+});
+const displaySearchResults = computed(() => {
+  if (!searchResults.value) {
+    return;
+  }
+  return [...searchResults.value].reverse().map((result) => ({ value: result["@id"], label: result[props.property] }));
+});
+async function fetchResource() {
+  if (!value.value) {
+    fetchingCurrentResource.value = 0;
+    selectedResource.value = void 0;
+    return;
+  }
+  fetchingCurrentResource.value = ++fetchCurrentCount.value;
+  const newResource = await $cwa.fetchResource({
+    path: `${value.value}`,
+    noSave: false,
+    shallowFetch: true
+  });
+  if (fetchCurrentCount.value === fetchingCurrentResource.value) {
+    selectedResource.value = newResource;
+    fetchingCurrentResource.value = 0;
+  }
+}
+async function search() {
+  debounceFetchActive.value = false;
+  const searchParamsObj = {
+    perPage: "6",
+    [`order[${props.property}]`]: "asc"
+  };
+  if (fetchingSearchValue.value && fetchingSearchValue.value === searchValue.value) {
+    return;
+  }
+  if (!fetchingSearchValue.value && searchValue.value === resourcePropertyValue.value) {
+    return;
+  }
+  fetchingSearchValue.value = searchValue.value;
+  if (!searchValue.value) {
+    searchResults.value = void 0;
+    fetchingSearchValue.value = void 0;
+    fetchingSearchResults.value = false;
+    return;
+  }
+  fetchingSearchResults.value = true;
+  if (props.searchProperties) {
+    for (const prop of props.searchProperties) {
+      searchParamsObj[prop] = searchValue.value;
+    }
+  } else {
+    searchParamsObj[props.property] = searchValue.value;
+  }
+  const params = new URLSearchParams(searchParamsObj);
+  const query = params.toString();
+  const path = `${props.endpoint}?${query}`;
+  const fetch = $cwa.fetch({
+    path
+  });
+  const result = await fetch.response;
+  if (searchValue.value === fetchingSearchValue.value) {
+    fetchingSearchResults.value = false;
+    searchResults.value = result._data?.["member"];
+  }
+}
+function clearResource() {
+  if (props.notNullable) {
+    return;
+  }
+  value.value = null;
+}
+function handleOptionClick(clickValue, close) {
+  value.value = clickValue;
+  close();
+  focussed.value = false;
+  searchValue.value = resourcePropertyValue.value;
+}
+function unfocus() {
+  setTimeout(() => {
+    focussed.value = false;
+  }, 100);
+}
+watch(resourcePropertyValue, (newValue) => {
+  searchValue.value = newValue;
+});
+watch(value, () => {
+  searchValue.value = "";
+  fetchResource();
+});
+watch(searchValue, (newSearchValue) => {
+  if (debouncedSearchCall) {
+    debouncedSearchCall.cancel();
+  }
+  if (fetchingSearchValue.value && fetchingSearchValue.value === newSearchValue) {
+    return;
+  }
+  if (!fetchingSearchValue.value && newSearchValue === resourcePropertyValue.value) {
+    return;
+  }
+  debounceFetchActive.value = true;
+  debouncedSearchCall = debounce(search, 250);
+  debouncedSearchCall();
+});
+onMounted(() => {
+  fetchResource();
+});
+</script>
+
+<template>
+  <Popover class="cwa:flex cwa:items-center cwa:gap-x-2">
+    <div
+      ref="trigger"
+      class="cwa:relative"
+    >
+      <CwaUiFormInput
+        v-model="searchValue"
+        class="cwa:pr-8"
+        :disabled="fetchingCurrentResource !== 0"
+        @focus="focussed = true"
+        @blur="unfocus"
+      />
+      <div
+        v-if="fetchingCurrentResource !== 0"
+        class="cwa:absolute cwa:top-1/2 cwa:-translate-y-1/2 cwa:left-2"
+      >
+        <Spinner :show="true" />
+      </div>
+      <button
+        v-if="!notNullable && !!resourcePropertyValue"
+        class="cwa:absolute cwa:right-1 cwa:top-1/2 cwa:-translate-y-1/2 cwa:opacity-50 cwa:hover:opacity-100 cwa:transition cwa:cursor-pointer"
+        @click="clearResource"
+      >
+        <CwaUiIconXMarkIcon class="cwa:w-6" />
+      </button>
+    </div>
+    <div v-if="open">
+      <PopoverPanel
+        v-slot="{ close }"
+        ref="container"
+        static
+        class="cwa:absolute cwa:max-h-60 cwa:min-w-full cwa:max-w-[300px] cwa:overflow-auto cwa:dark-blur cwa:border-0 cwa:outline-dotted cwa:outline-1 cwa:outline-stone-400"
+      >
+        <div v-if="showLoadingIndicator">
+          Loading...
+        </div>
+        <template
+          v-for="(option, index) of displaySearchResults"
+          v-else
+        >
+          <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>
+    </div>
+  </Popover>
+</template>

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

@@ -0,0 +1,15 @@
+import type { ModelValue } from '#cwa/templates/components/ui/form/Button.vue';
+type __VLS_Props = {
+    modelValue: ModelValue;
+    endpoint: string;
+    property: string;
+    searchProperties?: string[];
+    notNullable?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:modelValue": (value?: ModelValue) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((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/Select.d.vue.ts

@@ -0,0 +1,8 @@
+import type { SelectInputProps } from '#cwa/composables/cwa-select-input';
+declare const __VLS_export: import("vue").DefineComponent<SelectInputProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<SelectInputProps> & Readonly<{
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,60 @@
+<script setup>
+import {
+  Listbox,
+  ListboxButton,
+  ListboxOptions,
+  ListboxOption
+} from "@headlessui/vue";
+import { computed } from "vue";
+import { useCwaSelectInput } from "#cwa/composables/cwa-select-input";
+const emit = defineEmits(["update:modelValue"]);
+const props = defineProps({
+  options: { type: Array, required: true },
+  modelValue: { type: [String, Number, Boolean, Object, null, Array], required: true, skipCheck: true },
+  popper: { type: Object, required: false }
+});
+const { value, compareOptions, selectedOption, trigger, container } = useCwaSelectInput(computed(() => props), emit);
+</script>
+
+<template>
+  <Listbox
+    v-model="value"
+    :by="compareOptions"
+  >
+    <div class="cwa:relative cwa:inline-flex">
+      <ListboxButton
+        ref="trigger"
+        class="cwa:relative cwa:py-2 cwa:px-4 cwa:text-left cwa:text-light cwa:w-full cwa:dark-blur cwa:border-0 cwa:outline-dotted cwa:outline-1 cwa:outline-stone-700 cwa:hover:outline-stone-400 cwa:focus-visible:ring-2 cwa:focus-visible:ring-stone-600 cwa:cursor-pointer"
+      >
+        <span class="cwa:block cwa:truncate">{{ selectedOption?.label }}</span>
+      </ListboxButton>
+      <ListboxOptions
+        ref="container"
+        class="cwa:absolute cwa:max-h-60 cwa:min-w-full cwa:max-w-[300px] cwa:overflow-auto cwa:dark-blur cwa:border-0 cwa:outline-dotted cwa:outline-1 cwa:outline-stone-400"
+      >
+        <ListboxOption
+          v-for="option in options"
+          :key="option.label"
+          v-slot="{ active, selected }"
+          as="template"
+          :value="option.value"
+          :disabled="option.disabled"
+        >
+          <li
+            :class="[
+  active ? 'cwa:text-white' : 'cwa:text-stone-400',
+  'cwa:relative cwa:cursor-pointer cwa:select-none cwa:py-2 cwa:px-4'
+]"
+          >
+            <span
+              :class="[
+  selected ? 'cwa:text-white' : '',
+  'cwa:block cwa:truncate'
+]"
+            >{{ option.label }}</span>
+          </li>
+        </ListboxOption>
+      </ListboxOptions>
+    </div>
+  </Listbox>
+</template>

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

@@ -0,0 +1,8 @@
+import type { SelectInputProps } from '#cwa/composables/cwa-select-input';
+declare const __VLS_export: import("vue").DefineComponent<SelectInputProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<SelectInputProps> & Readonly<{
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

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

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

@@ -0,0 +1,48 @@
+<script setup>
+import { Switch, SwitchGroup, SwitchLabel } from "@headlessui/vue";
+import { computed } from "vue";
+const emit = defineEmits(["update:modelValue"]);
+const { modelValue } = defineProps({
+  label: { type: String, required: true },
+  modelValue: { type: [Boolean, null], required: true, skipCheck: true }
+});
+const valueAsBoolean = computed({
+  get() {
+    return !!modelValue;
+  },
+  set(value) {
+    handleSwitchInput(value);
+  }
+});
+function handleSwitchInput(newValue) {
+  emit("update:modelValue", newValue);
+}
+</script>
+
+<template>
+  <SwitchGroup
+    as="div"
+    class="cwa:flex cwa:items-center"
+  >
+    <Switch
+      :model-value="valueAsBoolean"
+      :class="[
+  modelValue ? 'cwa:bg-indigo-600' : 'cwa:bg-gray-200',
+  'cwa:relative cwa:inline-flex cwa:h-6 cwa:w-11 cwa:shrink-0 cwa:cursor-pointer cwa:border-2 cwa:border-transparent cwa:transition-colors cwa:duration-200 cwa:ease-in-out cwa:rounded-full'
+]"
+      @update:model-value="handleSwitchInput"
+    >
+      <span
+        aria-hidden="true"
+        :class="[modelValue ? 'cwa:translate-x-5' : 'cwa:translate-x-0', 'cwa:pointer-events-none cwa:inline-block cwa:h-5 cwa:w-5 cwa:transform cwa:bg-white cwa:shadow cwa:ring-0 cwa:transition cwa:duration-200 cwa:ease-in-out cwa:rounded-full']"
+      />
+    </Switch>
+
+    <SwitchLabel
+      as="span"
+      class="cwa:ml-3 cwa:text-sm cwa:cursor-pointer"
+    >
+      <span class="cwa:font-medium">{{ label }}</span>
+    </SwitchLabel>
+  </SwitchGroup>
+</template>

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

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

package/dist/runtime/templates/components/ui/icon/ArrowIcon.d.vue.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;