@aerogel/core 0.0.0-next.c2e6acc000e97a1020c2e232678563c53884dd0e → 0.0.0-next.c33ad773d3eb977461630ff22012d99eeedf46cb

package/src/components/ui/Button.vue

@@ -1,5 +1,5 @@
 <template>
-    <HeadlessButton :class="renderedClasses" v-bind="props">
+    <HeadlessButton :class="renderedClasses" :disabled v-bind="props">
         <slot />
     </HeadlessButton>
 </template>
@@ -10,29 +10,33 @@ import { computedVariantClasses } from '@aerogel/core/components/utils';
 import type { ButtonProps } from '@aerogel/core/components/contracts/Button';
 import type { Variants } from '@aerogel/core/components/utils';
 
-const { class: baseClasses, size, variant, ...props } = defineProps<ButtonProps>();
+const { class: baseClasses, size, variant, disabled, ...props } = defineProps<ButtonProps>();
 
 /* eslint-disable vue/max-len */
 // prettier-ignore
-const renderedClasses = computedVariantClasses<Variants<Pick<ButtonProps, 'size' | 'variant'>>>(
-    { baseClasses, variant, size },
+const renderedClasses = computedVariantClasses<Variants<Pick<ButtonProps, 'size' | 'variant' | 'disabled'>>>(
+    { baseClasses, variant, size, disabled },
     {
-        baseClasses: 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2',
+        baseClasses: 'flex items-center justify-center gap-1 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2',
         variants: {
             variant: {
-                default: 'bg-primary text-white hover:bg-primary/90 focus-visible:outline-primary',
-                secondary: 'bg-background text-gray-900 ring-gray-300 hover:bg-accent',
-                danger: 'bg-danger text-white hover:bg-danger/80 focus-visible:outline-danger',
-                ghost: 'bg-background hover:bg-accent',
-                outline: 'bg-background text-primary ring-primary hover:bg-accent',
-                link: 'text-primary hover:underline',
+                default: 'bg-primary text-white focus-visible:outline-primary',
+                secondary: 'bg-background text-gray-900 ring-gray-300',
+                danger: 'bg-danger text-white focus-visible:outline-danger',
+                ghost: 'bg-transparent',
+                outline: 'bg-transparent text-primary ring-primary',
+                link: 'text-primary',
             },
             size: {
-                small: 'rounded px-2 py-1 text-xs',
-                default: 'rounded-md px-2.5 py-1.5 text-sm',
-                large: 'rounded-md px-3 py-2 text-base',
+                small: 'text-xs',
+                default: 'text-sm',
+                large: 'text-base',
                 icon: 'rounded-full p-2.5',
             },
+            disabled: {
+                false: null,
+                true: 'opacity-50 cursor-not-allowed',
+            },
         },
         compoundVariants: [
             {
@@ -47,10 +51,46 @@ const renderedClasses = computedVariantClasses<Variants<Pick<ButtonProps, 'size'
                 variant: ['secondary', 'outline'],
                 class: 'ring-1 ring-inset',
             },
+            {
+                variant: ['default', 'secondary', 'danger', 'ghost', 'outline'],
+                size: 'small',
+                class: 'rounded px-2 py-1',
+            },
+            {
+                variant: ['default', 'secondary', 'danger', 'ghost', 'outline'],
+                size: 'default',
+                class: 'rounded-md px-2.5 py-1.5',
+            },
+            {
+                variant: ['default', 'secondary', 'danger', 'ghost', 'outline'],
+                size: 'large',
+                class: 'rounded-md px-3 py-2',
+            },
+            {
+                variant: 'default',
+                disabled: false,
+                class: 'hover:bg-primary/90',
+            },
+            {
+                variant: ['secondary', 'ghost', 'outline'],
+                disabled: false,
+                class: 'hover:bg-accent',
+            },
+            {
+                variant: 'danger',
+                disabled: false,
+                class: 'hover:bg-danger/80',
+            },
+            {
+                variant: 'link',
+                disabled: false,
+                class: 'hover:underline',
+            },
         ],
         defaultVariants: {
             variant: 'default',
             size: 'default',
+            disabled: false,
         },
     },
 );

package/src/components/ui/Checkbox.vue

@@ -8,33 +8,39 @@
         <div class="flex h-6 items-center">
             <HeadlessInputInput v-bind="inputAttrs" type="checkbox" :class="renderedInputClasses" />
         </div>
-        <div v-if="$slots.default" class="ml-2 text-sm leading-6">
+        <div v-if="$slots.default" :class="renderedLabelClasses">
             <HeadlessInputLabel class="text-gray-900">
                 <slot />
             </HeadlessInputLabel>
-            <HeadlessInputError class="text-sm text-red-600" />
+            <HeadlessInputError class="text-red-600" />
         </div>
-        <div v-else-if="label" class="ml-2 text-sm leading-6">
-            <HeadlessInputLabel />
-            <HeadlessInputError class="text-sm text-red-600" />
+        <div v-else-if="label" :class="renderedLabelClasses">
+            <HeadlessInputLabel class="text-gray-900" />
+            <HeadlessInputError class="text-red-600" />
         </div>
     </HeadlessInput>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, useTemplateRef } from 'vue';
 import type { HTMLAttributes } from 'vue';
 
+import HeadlessInput from '@aerogel/core/components/headless/HeadlessInput.vue';
+import HeadlessInputError from '@aerogel/core/components/headless/HeadlessInputError.vue';
+import HeadlessInputInput from '@aerogel/core/components/headless/HeadlessInputInput.vue';
+import HeadlessInputLabel from '@aerogel/core/components/headless/HeadlessInputLabel.vue';
 import { classes } from '@aerogel/core/components/utils';
 import { useInputAttrs } from '@aerogel/core/utils/composition/forms';
-import { componentRef } from '@aerogel/core/utils/vue';
-import type { InputEmits, InputExpose, InputProps } from '@aerogel/core/components/contracts/Input';
+import type { InputEmits, InputProps } from '@aerogel/core/components/contracts/Input';
 
 defineOptions({ inheritAttrs: false });
 defineEmits<InputEmits>();
-const { inputClass, ...props } = defineProps<InputProps & { inputClass?: HTMLAttributes['class'] }>();
 
-const $input = componentRef<InputExpose>();
+const { inputClass, labelClass, ...props } = defineProps<
+    InputProps & { inputClass?: HTMLAttributes['class']; labelClass?: HTMLAttributes['class'] }
+>();
+
+const $input = useTemplateRef('$input');
 const [inputAttrs, rootClasses] = useInputAttrs();
 const renderedClasses = computed(() => classes('relative flex items-start', rootClasses.value));
 const renderedInputClasses = computed(() =>
@@ -46,4 +52,5 @@ const renderedInputClasses = computed(() =>
         },
         inputClass,
     ));
+const renderedLabelClasses = computed(() => classes('ml-2 text-sm leading-6', labelClass));
 </script>

package/src/components/ui/ConfirmModal.vue

@@ -1,7 +1,7 @@
 <template>
-    <Modal v-slot="{ close }" :title="title" persistent>
-        <Form :form="form" @submit="close([true, form.data()])">
-            <Markdown :text="message" :actions="actions" />
+    <Modal v-slot="{ close }" :title persistent>
+        <Form :form @submit="close([true, form.data()])">
+            <Markdown :text="message" :actions />
 
             <ul v-if="checkboxes" class="mt-4 flex flex-col text-sm text-gray-600">
                 <li v-for="(checkbox, name) of checkboxes" :key="name">

package/src/components/ui/DropdownMenu.vue

@@ -0,0 +1,33 @@
+<template>
+    <DropdownMenuRoot>
+        <DropdownMenuTrigger>
+            <slot />
+        </DropdownMenuTrigger>
+        <DropdownMenuPortal>
+            <DropdownMenuContent class="gap-y-0.5 rounded-lg bg-white p-1.5 shadow-lg ring-1 ring-black/5" :align>
+                <DropdownMenuItem
+                    v-for="(option, key) in options"
+                    :key
+                    class="flex w-full items-center rounded-lg px-2 py-2 text-sm text-gray-900 data-[highlighted]:bg-gray-100"
+                    @select="option.click"
+                >
+                    {{ option.label }}
+                </DropdownMenuItem>
+            </DropdownMenuContent>
+        </DropdownMenuPortal>
+    </DropdownMenuRoot>
+</template>
+
+<script setup lang="ts">
+import {
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuPortal,
+    DropdownMenuRoot,
+    DropdownMenuTrigger,
+} from 'reka-ui';
+
+import type { DropdownMenuProps } from '@aerogel/core/components/contracts/DropdownMenu';
+
+defineProps<DropdownMenuProps>();
+</script>

package/src/components/ui/EditableContent.vue

@@ -0,0 +1,82 @@
+<template>
+    <div class="relative" :class="{ 'pointer-events-none!': disabled && !editing }">
+        <div v-if="!editing" :class="renderedContentClass">
+            <slot />
+        </div>
+        <span v-else :class="renderedFillerClass">
+            {{ draft }}
+        </span>
+        <span v-if="type === 'number'" class="inline-block transition-[width]" :class="editing ? 'w-5' : 'w-0'" />
+        <form class="w-full" :aria-hidden="formAriaHidden" @submit.prevent="$input?.blur()">
+            <input
+                ref="$input"
+                v-model="draft"
+                :tabindex="tabindex ?? undefined"
+                :aria-label="ariaLabel ?? undefined"
+                :type
+                :class="[
+                    renderedInputClass,
+                    { 'opacity-0': !editing, 'appearance-textfield': !editing && type === 'number' },
+                ]"
+                @keyup="$emit('update', draft)"
+                @focus="startEditing()"
+                @blur="stopEditing()"
+            >
+        </form>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watchEffect } from 'vue';
+import type { HTMLAttributes } from 'vue';
+
+import { classes } from '@aerogel/core/components/utils';
+
+const emit = defineEmits<{ update: [value: string | number]; save: [] }>();
+const {
+    type = 'text',
+    text,
+    contentClass,
+    ariaLabel,
+    formAriaHidden,
+    tabindex,
+    disabled,
+} = defineProps<{
+    type?: string;
+    contentClass?: HTMLAttributes['class'];
+    ariaLabel?: string;
+    formAriaHidden?: boolean;
+    tabindex?: string;
+    text: string;
+    disabled?: boolean;
+}>();
+const $input = ref<HTMLElement>();
+const editing = ref<string | null>(null);
+const draft = ref(text);
+const renderedContentClass = computed(() => classes('inline whitespace-pre', contentClass));
+const renderedFillerClass = computed(() => classes('invisible whitespace-pre', contentClass));
+const renderedInputClass = computed(() =>
+    classes('absolute inset-0 h-full w-full resize-none border-0 bg-transparent p-0 focus:ring-0', contentClass));
+
+function startEditing() {
+    editing.value = text;
+}
+
+function stopEditing() {
+    if (!editing.value) {
+        return;
+    }
+
+    if (type !== 'number' && draft.value.trim().length === 0) {
+        draft.value = editing.value;
+
+        emit('update', draft.value);
+    }
+
+    editing.value = null;
+
+    emit('save');
+}
+
+watchEffect(() => (draft.value = text));
+</script>

package/src/components/{lib/AGErrorMessage.vue → ui/ErrorMessage.vue}

@@ -5,12 +5,11 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-import { requiredObjectProp } from '@aerogel/core/utils/vue';
 import { getErrorMessage } from '@aerogel/core/errors/utils';
 import type { ErrorSource } from '@aerogel/core/errors/Errors.state';
 
 import Markdown from '@aerogel/core/components/ui/Markdown.vue';
 
-const props = defineProps({ error: requiredObjectProp<ErrorSource>() });
-const message = computed(() => getErrorMessage(props.error));
+const { error } = defineProps<{ error: ErrorSource }>();
+const message = computed(() => getErrorMessage(error));
 </script>

package/src/components/ui/ErrorReportModal.vue

@@ -33,7 +33,7 @@
                         </Button>
                     </span>
                 </div>
-                <ErrorReportModalButtons :report="report" class="gap-0.5" />
+                <ErrorReportModalButtons :report class="gap-0.5" />
             </h2>
             <Markdown v-if="report.description" :text="report.description" class="text-gray-600" />
         </div>

package/src/components/ui/ErrorReportModalButtons.vue

@@ -7,7 +7,7 @@
                 class="group whitespace-nowrap"
                 :href="button.url"
                 :title="$td(`errors.report_${button.id}`, button.description)"
-                @click="button.handler"
+                @click="button.click"
             >
                 <span class="sr-only">{{ $td(`errors.report_${button.id}`, button.description) }}</span>
                 <component :is="button.iconComponent" class="size-4" aria-hidden="true" />
@@ -36,7 +36,7 @@ interface ErrorReportModalButtonsDefaultSlotProps {
     description: string;
     iconComponent: Component;
     url?: string;
-    handler?(): void;
+    click?(): void;
 }
 
 defineSlots<{
@@ -75,19 +75,17 @@ const buttons = computed(() =>
                 id: 'clipboard',
                 description: 'Copy to clipboard',
                 iconComponent: IconCopy,
-                async handler() {
+                async click() {
                     await navigator.clipboard.writeText(`${summary.value}\n\n${props.report.details}`);
 
-                    UI.showSnackbar(
-                        translateWithDefault('errors.copiedToClipboard', 'Debug information copied to clipboard'),
-                    );
+                    UI.toast(translateWithDefault('errors.copiedToClipboard', 'Debug information copied to clipboard'));
                 },
             },
             {
                 id: 'console',
                 description: 'Log to console',
                 iconComponent: IconConsole,
-                handler() {
+                click() {
                     const error = props.report.error ?? props.report;
 
                     (window as { error?: unknown }).error = error;
@@ -95,7 +93,7 @@ const buttons = computed(() =>
                     // eslint-disable-next-line no-console
                     console.error(error);
 
-                    UI.showSnackbar(
+                    UI.toast(
                         translateWithDefault(
                             'errors.addedToConsole',
                             'You can now use the **error** variable in the console',

package/src/components/ui/ErrorReportModalTitle.vue

@@ -1,5 +1,5 @@
 <template>
-    <Markdown :text="text" inline />
+    <Markdown :text inline />
 </template>
 
 <script setup lang="ts">

package/src/components/ui/Input.vue

@@ -21,20 +21,24 @@
 <script setup lang="ts">
 import IconExclamationSolid from '~icons/zondicons/exclamation-solid';
 
-import { computed } from 'vue';
+import { computed, useTemplateRef } from 'vue';
 import type { HTMLAttributes } from 'vue';
 
+import HeadlessInput from '@aerogel/core/components/headless/HeadlessInput.vue';
+import HeadlessInputLabel from '@aerogel/core/components/headless/HeadlessInputLabel.vue';
+import HeadlessInputInput from '@aerogel/core/components/headless/HeadlessInputInput.vue';
+import HeadlessInputDescription from '@aerogel/core/components/headless/HeadlessInputDescription.vue';
+import HeadlessInputError from '@aerogel/core/components/headless/HeadlessInputError.vue';
 import { classes } from '@aerogel/core/components/utils';
 import { useInputAttrs } from '@aerogel/core/utils/composition/forms';
-import { componentRef } from '@aerogel/core/utils/vue';
-import type { InputEmits, InputExpose, InputProps } from '@aerogel/core/components/contracts/Input';
+import type { InputEmits, InputProps } from '@aerogel/core/components/contracts/Input';
 
 defineOptions({ inheritAttrs: false });
 defineEmits<InputEmits>();
 const { label, inputClass, wrapperClass, ...props } = defineProps<
     InputProps & { inputClass?: HTMLAttributes['class']; wrapperClass?: HTMLAttributes['class'] }
 >();
-const $input = componentRef<InputExpose>();
+const $input = useTemplateRef('$input');
 const [inputAttrs, rootClasses] = useInputAttrs();
 const renderedWrapperClasses = computed(() =>
     classes('relative rounded-md shadow-2xs', { 'mt-1': label }, wrapperClass));

package/src/components/ui/Link.vue

@@ -1,5 +1,5 @@
 <template>
-    <Button variant="link" v-bind="props">
+    <Button variant="link" v-bind="$props">
         <slot />
     </Button>
 </template>
@@ -8,5 +8,5 @@
 import Button from '@aerogel/core/components/ui/Button.vue';
 import type { ButtonProps } from '@aerogel/core/components/contracts/Button';
 
-const props = defineProps<Omit<ButtonProps, 'variant'>>();
+defineProps<Omit<ButtonProps, 'variant'>>();
 </script>

package/src/components/ui/LoadingModal.vue

@@ -3,13 +3,13 @@
         persistent
         class="flex"
         wrapper-class="w-auto"
-        :title="title"
+        :title
         :class="{ 'flex-col-reverse': showProgress, 'items-center justify-center gap-2': !showProgress }"
     >
         <ProgressBar
             v-if="showProgress"
-            :progress="progress"
-            :job="job"
+            :progress
+            :job
             class="min-w-[min(400px,80vw)]"
         />
         <IconSpinner v-else class="text-primary mr-1 size-6" />

package/src/components/ui/Markdown.vue

@@ -8,14 +8,15 @@ import { isInstanceOf } from '@noeldemartin/utils';
 import type { VNode } from 'vue';
 
 import { renderMarkdown } from '@aerogel/core/utils/markdown';
-import { translate } from '@aerogel/core/lang';
+import { translate, translateWithDefault } from '@aerogel/core/lang';
 import { renderNode } from '@aerogel/core/utils/vdom';
 
-const { as, inline, langKey, langParams, text, actions } = defineProps<{
+const { as, inline, langKey, langParams, langDefault, text, actions } = defineProps<{
     as?: string;
     inline?: boolean;
     langKey?: string;
     langParams?: number | Record<string, unknown>;
+    langDefault?: string;
     text?: string;
     actions?: Record<string, () => unknown>;
 }>();
@@ -27,7 +28,13 @@ const markdown = computed(() => {
         return slots.default().map(renderNode).join('');
     }
 
-    return text ?? (langKey && translate(langKey, langParams ?? {}));
+    return (
+        text ??
+        (langKey &&
+            (langDefault
+                ? translateWithDefault(langKey, langDefault, langParams ?? {})
+                : translate(langKey, langParams ?? {})))
+    );
 });
 const html = computed(() => {
     if (!markdown.value) {

package/src/components/ui/Modal.vue

@@ -1,9 +1,14 @@
 <template>
-    <HeadlessModal v-slot="{ close }" :persistent="persistent" v-bind="props">
+    <HeadlessModal
+        v-slot="{ close }"
+        v-bind="props"
+        ref="$modal"
+        :persistent
+    >
         <HeadlessModalOverlay class="fixed inset-0 bg-gray-500/75" />
 
         <HeadlessModalContent :class="renderedWrapperClass">
-            <div v-if="!persistent" class="absolute top-0 right-0 hidden pt-1.5 pr-1.5 sm:block">
+            <div v-if="!persistent && dismissable" class="absolute top-0 right-0 hidden pt-1.5 pr-1.5 sm:block">
                 <Button variant="ghost" size="icon" @click="close()">
                     <span class="sr-only">{{ $td('ui.close', 'Close') }}</span>
                     <IconClose class="size-3 text-gray-400" />
@@ -15,7 +20,7 @@
             </HeadlessModalTitle>
 
             <div :class="renderedContentClass">
-                <slot :close="close" />
+                <slot :close />
             </div>
         </HeadlessModalContent>
     </HeadlessModal>
@@ -24,27 +29,34 @@
 <script setup lang="ts">
 import IconClose from '~icons/zondicons/close';
 
-import { computed } from 'vue';
+import { computed, useTemplateRef } from 'vue';
 import type { HTMLAttributes } from 'vue';
 
 import Markdown from '@aerogel/core/components/ui/Markdown.vue';
+import Button from '@aerogel/core/components/ui/Button.vue';
 import HeadlessModal from '@aerogel/core/components/headless/HeadlessModal.vue';
 import HeadlessModalContent from '@aerogel/core/components/headless/HeadlessModalContent.vue';
 import HeadlessModalOverlay from '@aerogel/core/components/headless/HeadlessModalOverlay.vue';
 import HeadlessModalTitle from '@aerogel/core/components/headless/HeadlessModalTitle.vue';
 import { classes } from '@aerogel/core/components/utils';
-import type { ModalProps, ModalSlots } from '@aerogel/core/components/contracts/Modal';
+import type { ModalExpose, ModalProps, ModalSlots } from '@aerogel/core/components/contracts/Modal';
 
 const {
     class: contentClass = '',
+    dismissable = true,
     wrapperClass = '',
     title,
     persistent,
     ...props
-} = defineProps<ModalProps & { wrapperClass?: HTMLAttributes['class']; class?: HTMLAttributes['class'] }>();
-
-defineSlots<ModalSlots>();
+} = defineProps<
+    ModalProps & {
+        dismissable?: boolean;
+        wrapperClass?: HTMLAttributes['class'];
+        class?: HTMLAttributes['class'];
+    }
+>();
 
+const $modal = useTemplateRef('$modal');
 const renderedContentClass = computed(() => classes({ 'mt-2': title }, contentClass));
 const renderedWrapperClass = computed(() =>
     classes(
@@ -52,4 +64,7 @@ const renderedWrapperClass = computed(() =>
         'fixed top-1/2 left-1/2 z-50 w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl sm:max-w-lg',
         wrapperClass,
     ));
+
+defineSlots<ModalSlots>();
+defineExpose<ModalExpose>({ close: async () => $modal.value?.close() });
 </script>

package/src/components/ui/PromptModal.vue

@@ -1,12 +1,12 @@
 <template>
-    <Modal v-slot="{ close }" :title="title" persistent>
-        <Form :form="form" @submit="close(form.draft)">
+    <Modal v-slot="{ close }" :title persistent>
+        <Form :form @submit="close(form.draft)">
             <Markdown :text="message" />
             <Input
                 name="draft"
                 class="mt-2"
-                :placeholder="placeholder"
-                :label="label"
+                :placeholder
+                :label
             />
 
             <div class="mt-4 flex flex-row-reverse gap-2">

package/src/components/ui/Select.vue

@@ -0,0 +1,53 @@
+<template>
+    <HeadlessSelect ref="$select" v-bind="$props" @update:model-value="$emit('update:modelValue', $event)">
+        <HeadlessSelectLabel class="block text-sm leading-6 font-medium text-gray-900" />
+        <slot>
+            <HeadlessSelectTrigger
+                class="focus:outline-primary grid w-full cursor-default grid-cols-1 rounded-md bg-white py-1.5 pr-2 pl-3 text-left text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 focus:outline focus:outline-2 focus:-outline-offset-2 sm:text-sm/6"
+                :class="{ 'mt-1': label }"
+            >
+                <HeadlessSelectValue class="col-start-1 row-start-1 truncate pr-6" />
+                <IconCheveronDown
+                    class="col-start-1 row-start-1 size-5 self-center justify-self-end text-gray-500 sm:size-4"
+                />
+            </HeadlessSelectTrigger>
+            <HeadlessSelectOptions
+                class="z-50 overflow-auto rounded-lg bg-white text-base shadow-lg ring-1 ring-black/5 focus:outline-hidden"
+            >
+                <HeadlessSelectOption
+                    v-for="option of $select?.options ?? []"
+                    :key="option.key"
+                    :value="option.value"
+                    class="group p-1 outline-none"
+                >
+                    <div
+                        class="relative flex max-w-[calc(100vw-2rem)] cursor-pointer items-center truncate rounded-md px-2 py-1 select-none *:truncate group-data-[highlighted]:bg-gray-100 group-data-[state=checked]:font-semibold group-data-[state=unchecked]:opacity-50"
+                    >
+                        <span class="text-sm">
+                            {{ option.label }}
+                        </span>
+                    </div>
+                </HeadlessSelectOption>
+            </HeadlessSelectOptions>
+        </slot>
+    </HeadlessSelect>
+</template>
+
+<script setup lang="ts">
+import IconCheveronDown from '~icons/zondicons/cheveron-down';
+
+import { useTemplateRef } from 'vue';
+
+import HeadlessSelect from '@aerogel/core/components/headless/HeadlessSelect.vue';
+import HeadlessSelectLabel from '@aerogel/core/components/headless/HeadlessSelectLabel.vue';
+import HeadlessSelectTrigger from '@aerogel/core/components/headless/HeadlessSelectTrigger.vue';
+import HeadlessSelectOptions from '@aerogel/core/components/headless/HeadlessSelectOptions.vue';
+import HeadlessSelectOption from '@aerogel/core/components/headless/HeadlessSelectOption.vue';
+import HeadlessSelectValue from '@aerogel/core/components/headless/HeadlessSelectValue.vue';
+import type { SelectEmits, SelectProps } from '@aerogel/core/components/contracts/Select';
+
+defineProps<SelectProps>();
+defineEmits<SelectEmits>();
+
+const $select = useTemplateRef('$select');
+</script>

package/src/components/ui/Toast.vue

@@ -0,0 +1,42 @@
+<template>
+    <HeadlessToast :class="renderedClasses">
+        <Markdown v-if="message" :text="message" inline />
+
+        <Button
+            v-for="(action, key) of actions"
+            :key
+            :action
+            :variant
+            :as="HeadlessToastAction"
+        />
+    </HeadlessToast>
+</template>
+
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+
+import Button from '@aerogel/core/components/ui/Button.vue';
+import Markdown from '@aerogel/core/components/ui/Markdown.vue';
+import HeadlessToast from '@aerogel/core/components/headless/HeadlessToast.vue';
+import HeadlessToastAction from '@aerogel/core/components/headless/HeadlessToastAction.vue';
+import { computedVariantClasses } from '@aerogel/core/components/utils';
+import type { ToastProps } from '@aerogel/core/components/contracts/Toast';
+import type { Variants } from '@aerogel/core/components/utils';
+
+const { class: baseClasses, variant = 'secondary' } = defineProps<ToastProps & { class?: HTMLAttributes['class'] }>();
+const renderedClasses = computedVariantClasses<Variants<Pick<ToastProps, 'variant'>>>(
+    { baseClasses, variant },
+    {
+        baseClasses: 'flex items-center gap-2 rounded-md p-2 ring-1 shadow-lg border-gray-200',
+        variants: {
+            variant: {
+                secondary: 'bg-gray-900 text-white ring-black',
+                danger: 'bg-red-50 text-red-900 ring-red-100',
+            },
+        },
+        defaultVariants: {
+            variant: 'secondary',
+        },
+    },
+);
+</script>