@aerogel/core 0.0.0-next.9a1c5ba39a454b316eba36ec7bdf579fed3d95d2 → 0.0.0-next.9e0c0bbdcff5db68a1087ef53cbdc0f53299f6bb

package/src/ui/index.ts

@@ -1,16 +1,16 @@
 import type { Component } from 'vue';
 
+import AlertModal from '@aerogel/core/components/ui/AlertModal.vue';
+import ConfirmModal from '@aerogel/core/components/ui/ConfirmModal.vue';
+import ErrorReportModal from '@aerogel/core/components/ui/ErrorReportModal.vue';
+import LoadingModal from '@aerogel/core/components/ui/LoadingModal.vue';
+import PromptModal from '@aerogel/core/components/ui/PromptModal.vue';
+import StartupCrash from '@aerogel/core/components/ui/StartupCrash.vue';
+import Toast from '@aerogel/core/components/ui/Toast.vue';
 import { bootServices } from '@aerogel/core/services';
 import { definePlugin } from '@aerogel/core/plugins';
 
 import UI, { UIComponents } from './UI';
-import AGAlertModal from '../components/modals/AGAlertModal.vue';
-import AGConfirmModal from '../components/modals/AGConfirmModal.vue';
-import AGErrorReportModal from '../components/modals/AGErrorReportModal.vue';
-import AGLoadingModal from '../components/modals/AGLoadingModal.vue';
-import AGPromptModal from '../components/modals/AGPromptModal.vue';
-import AGSnackbar from '../components/snackbars/AGSnackbar.vue';
-import AGStartupCrash from '../components/lib/AGStartupCrash.vue';
 import type { UIComponent } from './UI';
 
 const services = { $ui: UI };
@@ -24,13 +24,13 @@ export type UIServices = typeof services;
 export default definePlugin({
     async install(app, options) {
         const defaultComponents = {
-            [UIComponents.AlertModal]: AGAlertModal,
-            [UIComponents.ConfirmModal]: AGConfirmModal,
-            [UIComponents.ErrorReportModal]: AGErrorReportModal,
-            [UIComponents.LoadingModal]: AGLoadingModal,
-            [UIComponents.PromptModal]: AGPromptModal,
-            [UIComponents.Snackbar]: AGSnackbar,
-            [UIComponents.StartupCrash]: AGStartupCrash,
+            [UIComponents.AlertModal]: AlertModal,
+            [UIComponents.ConfirmModal]: ConfirmModal,
+            [UIComponents.ErrorReportModal]: ErrorReportModal,
+            [UIComponents.LoadingModal]: LoadingModal,
+            [UIComponents.PromptModal]: PromptModal,
+            [UIComponents.Toast]: Toast,
+            [UIComponents.StartupCrash]: StartupCrash,
         };
 
         Object.entries({

package/src/utils/classes.ts

@@ -0,0 +1,49 @@
+import clsx from 'clsx';
+import { computed, unref } from 'vue';
+import { cva } from 'class-variance-authority';
+import { twMerge } from 'tailwind-merge';
+import type { ClassValue } from 'clsx';
+import type { ComputedRef, PropType, Ref } from 'vue';
+import type { GetClosureArgs, GetClosureResult } from '@noeldemartin/utils';
+
+export type CVAConfig<T> = NonNullable<GetClosureArgs<typeof cva<T>>[1]>;
+export type CVAProps<T> = NonNullable<GetClosureArgs<GetClosureResult<typeof cva<T>>>[0]>;
+export type RefsObject<T> = { [K in keyof T]: Ref<T[K]> | T[K] };
+export type Variants<T extends Record<string, string | boolean>> = Required<{
+    [K in keyof T]: Exclude<T[K], undefined> extends string
+        ? { [key in Exclude<T[K], undefined>]: string | null }
+        : { true: string | null; false: string | null };
+}>;
+
+export type ComponentPropDefinitions<T> = {
+    [K in keyof T]: {
+        type?: PropType<T[K]>;
+        default: T[K] | (() => T[K]) | null;
+    };
+};
+
+export type PickComponentProps<TValues, TDefinitions> = {
+    [K in keyof TValues]: K extends keyof TDefinitions ? TValues[K] : never;
+};
+
+export function computedVariantClasses<T>(
+    value: RefsObject<{ baseClasses?: string } & CVAProps<T>>,
+    config: { baseClasses?: string } & CVAConfig<T>,
+): ComputedRef<string> {
+    return computed(() => {
+        const { baseClasses: valueBaseClasses, ...valueRefs } = value;
+        const { baseClasses: configBaseClasses, ...configs } = config;
+        const variants = cva(configBaseClasses, configs as CVAConfig<T>);
+        const values = Object.entries(valueRefs).reduce((extractedValues, [name, valueRef]) => {
+            extractedValues[name as keyof CVAProps<T>] = unref(valueRef);
+
+            return extractedValues;
+        }, {} as CVAProps<T>);
+
+        return classes(variants(values), unref(valueBaseClasses));
+    });
+}
+
+export function classes(...inputs: ClassValue[]): string {
+    return twMerge(clsx(inputs));
+}

package/src/utils/composition/forms.ts

@@ -1,11 +1,21 @@
 import { objectWithout } from '@noeldemartin/utils';
-import { computed, useAttrs } from 'vue';
+import { computed, inject, onUnmounted, useAttrs } from 'vue';
+import type { ClassValue } from 'clsx';
 import type { ComputedRef } from 'vue';
+import type { FormController } from '@aerogel/core/forms';
+import type { Nullable } from '@noeldemartin/utils';
 
-export function useInputAttrs(): [ComputedRef<{}>, ComputedRef<unknown>] {
+export function onFormFocus(input: { name: Nullable<string> }, listener: () => unknown): void {
+    const form = inject<FormController | null>('form', null);
+    const stop = form?.on('focus', (name) => input.name === name && listener());
+
+    onUnmounted(() => stop?.());
+}
+
+export function useInputAttrs(): [ComputedRef<{}>, ComputedRef<ClassValue>] {
     const attrs = useAttrs();
-    const className = computed(() => attrs.class);
+    const classes = computed(() => attrs.class);
     const inputAttrs = computed(() => objectWithout(attrs, 'class'));
 
-    return [inputAttrs, className];
+    return [inputAttrs, classes as ComputedRef<ClassValue>];
 }

package/src/utils/composition/state.ts

@@ -1,12 +1,21 @@
 import { debounce } from '@noeldemartin/utils';
-import { ref, watchEffect } from 'vue';
-import type { ComputedGetter, ComputedRef } from '@vue/runtime-core';
+import { computed, ref, watch, watchEffect } from 'vue';
+import type { ComputedGetter, ComputedRef, Ref } from 'vue';
 
 export interface ComputedDebounceOptions<T> {
     initial?: T;
     delay?: number;
 }
 
+export function computedAsync<T>(getter: () => Promise<T>): Ref<T | undefined> {
+    const result = ref<T>();
+    const asyncValue = computed(getter);
+
+    watch(asyncValue, async () => (result.value = await asyncValue.value), { immediate: true });
+
+    return result;
+}
+
 export function computedDebounce<T>(options: ComputedDebounceOptions<T>, getter: ComputedGetter<T>): ComputedRef<T>;
 export function computedDebounce<T>(getter: ComputedGetter<T>): ComputedRef<T | null>;
 export function computedDebounce<T>(

package/src/utils/index.ts

@@ -1,7 +1,9 @@
+export * from './classes';
 export * from './composition/events';
 export * from './composition/forms';
 export * from './composition/hooks';
 export * from './composition/persistent';
+export * from './composition/state';
 export * from './markdown';
-export * from './tailwindcss';
+export * from './types';
 export * from './vue';

package/src/utils/types.ts

@@ -0,0 +1,3 @@
+import type { Nullable } from '@noeldemartin/utils';
+
+export type Falsifiable<T> = Nullable<T> | false;

package/src/utils/vue.ts

@@ -1,59 +1,21 @@
 import { fail, toString } from '@noeldemartin/utils';
-import { computed, inject, reactive, ref, watch } from 'vue';
-import type { Directive, InjectionKey, MaybeRef, PropType, Ref, UnwrapNestedRefs } from 'vue';
+import { Comment, Static, Text, inject, reactive } from 'vue';
+import type { Directive, InjectionKey, MaybeRef, Ref, UnwrapNestedRefs, VNode } from 'vue';
 
 export type AcceptRefs<T> = { [K in keyof T]: T[K] | RefUnion<T[K]> };
-export type BaseProp<T> = { type?: PropType<T>; validator?(value: unknown): boolean };
-export type ComponentProps<T = {}> = T & Record<string, unknown>;
-export type OptionalProp<T> = BaseProp<T> & { default: T | (() => T) | null };
 export type RefUnion<T> = T extends infer R ? Ref<R> : never;
-export type RequiredProp<T> = BaseProp<T> & { required: true };
 export type Unref<T> = { [K in keyof T]: T[K] extends MaybeRef<infer Value> ? Value : T[K] };
 
-export function arrayProp<T>(defaultValue?: () => T[]): OptionalProp<T[]> {
-    return {
-        type: Array as PropType<T[]>,
-        default: defaultValue ?? (() => []),
-    };
-}
-
-export function booleanProp(defaultValue: boolean = false): OptionalProp<boolean> {
-    return {
-        type: Boolean,
-        default: defaultValue,
-    };
-}
-
-export function componentRef<T>(): Ref<UnwrapNestedRefs<T> | undefined> {
-    return ref<UnwrapNestedRefs<T>>();
-}
-
-export function computedAsync<T>(getter: () => Promise<T>): Ref<T | undefined> {
-    const result = ref<T>();
-    const asyncValue = computed(getter);
-
-    watch(asyncValue, async () => (result.value = await asyncValue.value), { immediate: true });
-
-    return result;
+function renderVNodeAttrs(node: VNode): string {
+    return Object.entries(node.props ?? {}).reduce((attrs, [name, value]) => {
+        return attrs + `${name}="${toString(value)}"`;
+    }, '');
 }
 
 export function defineDirective(directive: Directive): Directive {
     return directive;
 }
 
-export function enumProp<Enum extends Record<string, unknown>>(
-    enumeration: Enum,
-    defaultValue?: Enum[keyof Enum],
-): OptionalProp<Enum[keyof Enum]> {
-    const values = Object.values(enumeration) as Enum[keyof Enum][];
-
-    return {
-        type: String as unknown as PropType<Enum[keyof Enum]>,
-        default: defaultValue ?? values[0] ?? null,
-        validator: (value) => values.includes(value as Enum[keyof Enum]),
-    };
-}
-
 export function injectReactive<T extends object>(key: InjectionKey<T> | string): UnwrapNestedRefs<T> | undefined {
     const value = inject(key);
 
@@ -71,92 +33,24 @@ export function injectOrFail<T>(key: InjectionKey<T> | string, errorMessage?: st
     return inject(key) ?? fail(errorMessage ?? `Could not resolve '${toString(key)}' injection key`);
 }
 
-export function listenerProp<T extends Function = Function>(): OptionalProp<T | null> {
-    return {
-        type: Function as PropType<T>,
-        default: null,
-    };
-}
-
-export function mixedProp<T>(type?: PropType<T>): OptionalProp<T | null>;
-export function mixedProp<T>(type: PropType<T>, defaultValue: T): OptionalProp<T>;
-export function mixedProp<T>(type?: PropType<T>, defaultValue?: T): OptionalProp<T | null> {
-    return {
-        type,
-        default: defaultValue ?? null,
-    };
-}
-
-export function numberProp(): OptionalProp<number | null>;
-export function numberProp(defaultValue: number): OptionalProp<number>;
-export function numberProp(defaultValue: number | null = null): OptionalProp<number | null> {
-    return {
-        type: Number,
-        default: defaultValue,
-    };
-}
-
-export function objectProp<T = Object>(): OptionalProp<T | null>;
-export function objectProp<T>(defaultValue: () => T): OptionalProp<T>;
-export function objectProp<T = Object>(defaultValue: (() => T) | null = null): OptionalProp<T | null> {
-    return {
-        type: Object,
-        default: defaultValue,
-    };
-}
-
-export function requiredArrayProp<T>(): RequiredProp<T[]> {
-    return {
-        type: Array as PropType<T[]>,
-        required: true,
-    };
-}
-
-export function requiredEnumProp<Enum extends Record<string, unknown>>(
-    enumeration: Enum,
-): RequiredProp<Enum[keyof Enum]> {
-    const values = Object.values(enumeration);
+export function renderVNode(node: VNode | string): string {
+    if (typeof node === 'string') {
+        return node;
+    }
 
-    return {
-        type: String as unknown as PropType<Enum[keyof Enum]>,
-        required: true,
-        validator: (value) => values.includes(value),
-    };
-}
-
-export function requiredMixedProp<T>(type?: PropType<T>): RequiredProp<T> {
-    return {
-        type,
-        required: true,
-    };
-}
+    if (node.type === Comment) {
+        return '';
+    }
 
-export function requiredNumberProp(): RequiredProp<number> {
-    return {
-        type: Number,
-        required: true,
-    };
-}
+    if (node.type === Text || node.type === Static) {
+        return node.children as string;
+    }
 
-export function requiredObjectProp<T = Object>(): RequiredProp<T> {
-    return {
-        type: Object,
-        required: true,
-    };
-}
-
-export function requiredStringProp(): RequiredProp<string> {
-    return {
-        type: String,
-        required: true,
-    };
-}
+    if (node.type === 'br') {
+        return '\n\n';
+    }
 
-export function stringProp(): OptionalProp<string | null>;
-export function stringProp(defaultValue: string): OptionalProp<string>;
-export function stringProp(defaultValue: string | null = null): OptionalProp<string | null> {
-    return {
-        type: String,
-        default: defaultValue,
-    };
+    return `<${node.type} ${renderVNodeAttrs(node)}>${Array.from(node.children as Array<VNode | string>)
+        .map(renderVNode)
+        .join('')}</${node.type}>`;
 }

package/src/components/AGAppSnackbars.vue

@@ -1,13 +0,0 @@
-<template>
-    <div aria-live="assertive" class="pointer-events-none fixed inset-0 z-50 flex items-end px-4 py-6 sm:p-6">
-        <div class="flex w-full flex-col items-end space-y-4">
-            <component
-                :is="snackbar.component"
-                v-for="snackbar of $ui.snackbars"
-                :id="snackbar.id"
-                :key="snackbar.id"
-                v-bind="snackbar.properties"
-            />
-        </div>
-    </div>
-</template>

package/src/components/composition.ts

@@ -1,23 +0,0 @@
-import { customRef } from 'vue';
-import type { Ref } from 'vue';
-
-import { getElement } from '@aerogel/core/components/utils';
-
-export function elementRef(): Ref<HTMLElement | undefined> {
-    return customRef((track, trigger) => {
-        let value: HTMLElement | undefined = undefined;
-
-        return {
-            get() {
-                track();
-
-                return value;
-            },
-            set(newValue) {
-                value = getElement(newValue);
-
-                trigger();
-            },
-        };
-    });
-}

package/src/components/constants.ts

@@ -1,8 +0,0 @@
-export const Colors = {
-    Primary: 'primary',
-    Secondary: 'secondary',
-    Danger: 'danger',
-    Clear: 'clear',
-} as const;
-
-export type Color = (typeof Colors)[keyof typeof Colors];

package/src/components/contracts/shared.ts

@@ -1,9 +0,0 @@
-import type { Ref } from 'vue';
-
-export interface HasElement {
-    $el: Readonly<Ref<HTMLElement | undefined>>;
-}
-
-export interface __SetsElement {
-    __setElement(element?: HTMLElement): void;
-}

package/src/components/forms/AGButton.vue

@@ -1,44 +0,0 @@
-<template>
-    <AGHeadlessButton class="px-2.5 py-1.5 focus-visible:outline focus-visible:outline-2" :class="colorClasses">
-        <slot />
-    </AGHeadlessButton>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-
-import { enumProp } from '@aerogel/core/utils/vue';
-import { Colors } from '@aerogel/core/components/constants';
-
-import AGHeadlessButton from '../headless/forms/AGHeadlessButton.vue';
-
-const props = defineProps({
-    color: enumProp(Colors, Colors.Primary),
-});
-
-const colorClasses = computed(() => {
-    switch (props.color) {
-        case Colors.Secondary:
-            return [
-                'text-white bg-gray-600',
-                'hover:bg-gray-500',
-                'focus-visible:outline-offset-2 focus-visible:outline-gray-600',
-            ].join(' ');
-        case Colors.Clear:
-            return 'hover:bg-gray-500/20 focus-visible:outline-gray-500/60';
-        case Colors.Danger:
-            return [
-                'text-white bg-red-600',
-                'hover:bg-red-500',
-                'focus-visible:outline-offset-2 focus-visible:outline-red-600',
-            ].join(' ');
-        case Colors.Primary:
-        default:
-            return [
-                'text-white bg-indigo-600',
-                'hover:bg-indigo-500',
-                'focus-visible:outline-offset-2 focus-visible:outline-indigo-600',
-            ].join(' ');
-    }
-});
-</script>

package/src/components/forms/AGCheckbox.vue

@@ -1,42 +0,0 @@
-<template>
-    <AGHeadlessInput
-        ref="$input"
-        :name="name"
-        class="flex"
-        @update:model-value="$emit('update:modelValue', $event)"
-    >
-        <AGHeadlessInputInput
-            v-bind="$attrs"
-            type="checkbox"
-            :class="{
-                'text-indigo-600 focus:ring-indigo-600': !$input?.errors,
-                'border-red-200 text-red-600 focus:ring-red-600': $input?.errors,
-            }"
-        />
-
-        <div class="ml-2">
-            <AGHeadlessInputLabel v-if="$slots.default">
-                <slot />
-            </AGHeadlessInputLabel>
-            <AGHeadlessInputError class="text-sm text-red-600" />
-        </div>
-    </AGHeadlessInput>
-</template>
-
-<script setup lang="ts">
-import { componentRef, stringProp } from '@aerogel/core/utils/vue';
-
-import { useInputEmits } from '@aerogel/core/components/headless/forms/AGHeadlessInput';
-import type { IAGHeadlessInput } from '@aerogel/core/components/headless/forms/AGHeadlessInput';
-
-import AGHeadlessInput from '../headless/forms/AGHeadlessInput.vue';
-import AGHeadlessInputError from '../headless/forms/AGHeadlessInputError.vue';
-import AGHeadlessInputInput from '../headless/forms/AGHeadlessInputInput.vue';
-import AGHeadlessInputLabel from '../headless/forms/AGHeadlessInputLabel.vue';
-
-defineProps({ name: stringProp() });
-defineOptions({ inheritAttrs: false });
-defineEmits(useInputEmits());
-
-const $input = componentRef<IAGHeadlessInput>();
-</script>

package/src/components/forms/AGInput.vue

@@ -1,42 +0,0 @@
-<template>
-    <AGHeadlessInput
-        ref="$input"
-        class="relative flex flex-col items-center"
-        :class="className"
-        v-bind="props"
-        @update:model-value="$emit('update:modelValue', $event)"
-    >
-        <AGHeadlessInputLabel class="sr-only" />
-        <AGHeadlessInputInput
-            v-bind="attrs"
-            class="block w-full border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600"
-            :class="{
-                'ring-1 ring-red-500': $input?.errors,
-            }"
-        />
-        <AGHeadlessInputDescription />
-        <div class="absolute bottom-0 left-0 translate-y-full">
-            <AGHeadlessInputError class="mt-1 text-sm text-red-500" />
-        </div>
-    </AGHeadlessInput>
-</template>
-
-<script setup lang="ts">
-import { componentRef } from '@aerogel/core/utils/vue';
-import { useInputAttrs } from '@aerogel/core/utils/composition/forms';
-import { useInputEmits, useInputProps } from '@aerogel/core/components/headless/forms/AGHeadlessInput';
-import type { IAGHeadlessInput } from '@aerogel/core/components/headless/forms/AGHeadlessInput';
-
-import AGHeadlessInput from '../headless/forms/AGHeadlessInput.vue';
-import AGHeadlessInputDescription from '../headless/forms/AGHeadlessInputDescription.vue';
-import AGHeadlessInputError from '../headless/forms/AGHeadlessInputError.vue';
-import AGHeadlessInputInput from '../headless/forms/AGHeadlessInputInput.vue';
-import AGHeadlessInputLabel from '../headless/forms/AGHeadlessInputLabel.vue';
-
-defineOptions({ inheritAttrs: false });
-defineEmits(useInputEmits());
-
-const props = defineProps(useInputProps());
-const $input = componentRef<IAGHeadlessInput>();
-const [attrs, className] = useInputAttrs();
-</script>

package/src/components/forms/AGSelect.story.vue

@@ -1,46 +0,0 @@
-<template>
-    <Story>
-        <div class="h-96">
-            <AGSelect v-model="bestMugiwara" :label="bestMugiwaraLabel" :options="bestMugiwaraOptions" />
-            <AGSelect
-                v-model="bestFood"
-                :label="bestFoodLabel"
-                :options="bestFoodOptions"
-                options-text="name"
-            />
-        </div>
-    </Story>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue';
-
-import AGSelect from './AGSelect.vue';
-
-const bestMugiwara = ref(null);
-const bestFood = ref(null);
-const bestMugiwaraLabel = 'Who\'s the best Mugiwara?';
-const bestFoodLabel = 'What\'s the best food?';
-const bestMugiwaraOptions = [
-    'Monkey D. Luffy',
-    'Roronoa Zoro',
-    'Nami',
-    'Usopp',
-    'Sanji',
-    'Tony Tony Chopper',
-    'Nico Robin',
-    'Franky',
-    'Brook',
-    'Jinbe',
-];
-const bestFoodOptions = [
-    {
-        id: 'ramen',
-        name: 'Ramen',
-    },
-    {
-        id: 'pizza',
-        name: 'Pizza',
-    },
-];
-</script>

package/src/components/forms/AGSelect.vue

@@ -1,54 +0,0 @@
-<template>
-    <AGHeadlessSelect
-        v-bind="props"
-        ref="$select"
-        as="div"
-        @update:model-value="$emit('update:modelValue', $event)"
-    >
-        <div class="relative" :class="{ 'mt-2': $select?.label }">
-            <AGHeadlessSelectTrigger
-                class="relative w-full cursor-default bg-white py-1.5 pr-10 pl-3 text-left text-gray-900 ring-1 ring-gray-300 ring-inset focus:ring-2 focus:ring-indigo-600 focus:outline-hidden"
-                text-class="block truncate"
-                :class="{
-                    'ring-1 ring-red-500': $select?.errors,
-                }"
-            >
-                <template #icon>
-                    <span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
-                        <IconCheveronDown class="size-5 text-gray-400" />
-                    </span>
-                </template>
-            </AGHeadlessSelectTrigger>
-            <AGHeadlessSelectOptions
-                class="absolute z-10 mt-1 max-h-60 w-full overflow-auto border border-gray-300 bg-white py-1 text-base ring-1 ring-black/5 focus:outline-hidden"
-            >
-                <AGHeadlessSelectOption
-                    v-for="(option, index) in $select?.options ?? []"
-                    :key="index"
-                    :value="option"
-                    class="relative block cursor-default truncate py-2 pr-9 pl-3 text-gray-900 select-none data-[highlighted]:bg-indigo-600 data-[highlighted]:text-white data-[state=checked]:font-semibold data-[state=unchecked]:font-normal"
-                />
-            </AGHeadlessSelectOptions>
-        </div>
-        <AGHeadlessSelectError class="mt-2 text-sm text-red-600" />
-    </AGHeadlessSelect>
-</template>
-
-<script setup lang="ts">
-import IconCheveronDown from '~icons/zondicons/cheveron-down';
-
-import { componentRef } from '@aerogel/core/utils/vue';
-import { useSelectEmits, useSelectProps } from '@aerogel/core/components/headless/forms/AGHeadlessSelect';
-import type { IAGHeadlessSelect } from '@aerogel/core/components/headless/forms/AGHeadlessSelect';
-
-import AGHeadlessSelect from '../headless/forms/AGHeadlessSelect.vue';
-import AGHeadlessSelectTrigger from '../headless/forms/AGHeadlessSelectTrigger.vue';
-import AGHeadlessSelectError from '../headless/forms/AGHeadlessSelectError.vue';
-import AGHeadlessSelectOption from '../headless/forms/AGHeadlessSelectOption.vue';
-import AGHeadlessSelectOptions from '../headless/forms/AGHeadlessSelectOptions.vue';
-
-defineEmits(useSelectEmits());
-
-const props = defineProps(useSelectProps());
-const $select = componentRef<IAGHeadlessSelect>();
-</script>

package/src/components/forms/index.ts

@@ -1,5 +0,0 @@
-export { default as AGButton } from './AGButton.vue';
-export { default as AGCheckbox } from './AGCheckbox.vue';
-export { default as AGForm } from './AGForm.vue';
-export { default as AGInput } from './AGInput.vue';
-export { default as AGSelect } from './AGSelect.vue';

package/src/components/headless/forms/AGHeadlessButton.ts

@@ -1,3 +0,0 @@
-import type { HasElement } from '@aerogel/core/components/contracts/shared';
-
-export interface IAGHeadlessButton extends HasElement {}