@soave/ui 0.1.0

package/dist/components/ui/SelectItem.vue

@@ -0,0 +1,51 @@
+<template>
+    <div
+        :class="composable.base_classes.value"
+        :data-disabled="composable.is_disabled.value ? '' : undefined"
+        role="option"
+        :aria-selected="composable.is_selected.value"
+        @click="handleClick"
+    >
+        <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+            <svg
+                v-if="composable.is_selected.value"
+                class="h-4 w-4"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+            >
+                <polyline points="20 6 9 17 4 12" />
+            </svg>
+        </span>
+        <slot />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { inject, toRef } from "vue"
+import { useSelectItem } from "../../composables/useSelect"
+import type { SelectContext } from "../../types/select"
+import { SELECT_KEY } from "../../types/select"
+
+interface Props {
+    value: string
+    disabled?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    disabled: false
+})
+
+const context = inject<SelectContext>(SELECT_KEY)
+const composable = useSelectItem(toRef(() => props))
+
+const handleClick = () => {
+    if (!composable.is_disabled.value && context) {
+        context.updateValue(props.value)
+    }
+}
+</script>

package/dist/components/ui/SelectTrigger.vue

@@ -0,0 +1,38 @@
+<template>
+    <button
+        type="button"
+        :class="composable.base_classes.value"
+        :disabled="composable.is_disabled.value"
+        :aria-expanded="context?.is_open.value"
+        aria-haspopup="listbox"
+        @click="handleClick"
+    >
+        <slot />
+        <svg
+            class="h-4 w-4 opacity-50"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+        >
+            <path d="m6 9 6 6 6-6" />
+        </svg>
+    </button>
+</template>
+
+<script setup lang="ts">
+import { inject } from "vue"
+import { useSelectTrigger } from "../../composables/useSelect"
+import type { SelectContext } from "../../types/select"
+import { SELECT_KEY } from "../../types/select"
+
+const context = inject<SelectContext>(SELECT_KEY)
+const composable = useSelectTrigger()
+
+const handleClick = () => {
+    context?.toggle()
+}
+</script>

package/dist/components/ui/SelectValue.vue

@@ -0,0 +1,16 @@
+<template>
+    <span :class="!hasValue && 'text-muted-foreground'">
+        <slot v-if="hasValue" />
+        <template v-else>{{ context?.placeholder.value }}</template>
+    </span>
+</template>
+
+<script setup lang="ts">
+import { computed, inject } from "vue"
+import type { SelectContext } from "../../types/select"
+import { SELECT_KEY } from "../../types/select"
+
+const context = inject<SelectContext>(SELECT_KEY)
+
+const hasValue = computed(() => !!context?.model_value.value)
+</script>

package/dist/components/ui/Sheet.vue

@@ -0,0 +1,140 @@
+<template>
+    <Teleport to="body">
+        <Transition name="sheet-overlay">
+            <div
+                v-if="is_open"
+                class="fixed inset-0 z-50 bg-black/80"
+                @click="handleOverlayClick"
+            />
+        </Transition>
+
+        <Transition :name="transition_name">
+            <div
+                v-if="is_open"
+                ref="sheet_element"
+                role="dialog"
+                aria-modal="true"
+                :class="cn(base_classes, side_classes[side], props.class)"
+                tabindex="-1"
+                @keydown.escape="close"
+            >
+                <slot />
+
+                <button
+                    v-if="show_close_button"
+                    type="button"
+                    class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
+                    aria-label="Close"
+                    @click="close"
+                >
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="24"
+                        height="24"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                    >
+                        <path d="M18 6 6 18" />
+                        <path d="m6 6 12 12" />
+                    </svg>
+                </button>
+            </div>
+        </Transition>
+    </Teleport>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, provide, onMounted, onUnmounted, type InjectionKey } from "vue"
+import { cn } from "../../utils/cn"
+import type { SheetSide, SheetContext } from "../../types/sheet"
+
+export interface Props {
+    open?: boolean
+    side?: SheetSide
+    show_close_button?: boolean
+    class?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    open: false,
+    side: "right",
+    show_close_button: true
+})
+
+const emit = defineEmits<{
+    "update:open": [value: boolean]
+}>()
+
+export const SHEET_CONTEXT_KEY: InjectionKey<SheetContext> = Symbol("sheet-context")
+
+const is_open = ref(props.open)
+const sheet_element = ref<HTMLElement | null>(null)
+
+watch(() => props.open, (value) => {
+    is_open.value = value
+})
+
+const open = (): void => {
+    is_open.value = true
+    emit("update:open", true)
+}
+
+const close = (): void => {
+    is_open.value = false
+    emit("update:open", false)
+}
+
+const handleOverlayClick = (): void => {
+    close()
+}
+
+const handleKeyDown = (event: KeyboardEvent): void => {
+    if (event.key === "Escape" && is_open.value) {
+        close()
+    }
+}
+
+onMounted(() => {
+    document.addEventListener("keydown", handleKeyDown)
+})
+
+onUnmounted(() => {
+    document.removeEventListener("keydown", handleKeyDown)
+})
+
+watch(is_open, (open) => {
+    if (open) {
+        document.body.style.overflow = "hidden"
+    } else {
+        document.body.style.overflow = ""
+    }
+})
+
+const side = computed(() => props.side)
+
+const transition_name = computed(() => `sheet-${side.value}`)
+
+provide(SHEET_CONTEXT_KEY, {
+    is_open: is_open.value,
+    side: side.value,
+    open,
+    close
+})
+
+const base_classes = "fixed z-50 gap-4 bg-background p-6 shadow-lg"
+
+const side_classes: Record<SheetSide, string> = {
+    top: "inset-x-0 top-0 border-b",
+    bottom: "inset-x-0 bottom-0 border-t",
+    left: "inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+    right: "inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm"
+}
+</script>
+
+<style scoped>
+.sheet-overlay-enter-active,.sheet-overlay-leave-active{transition:opacity .3s ease}.sheet-overlay-enter-from,.sheet-overlay-leave-to{opacity:0}.sheet-bottom-enter-active,.sheet-bottom-leave-active,.sheet-left-enter-active,.sheet-left-leave-active,.sheet-right-enter-active,.sheet-right-leave-active,.sheet-top-enter-active,.sheet-top-leave-active{transition:transform .3s ease}.sheet-right-enter-from,.sheet-right-leave-to{transform:translateX(100%)}.sheet-left-enter-from,.sheet-left-leave-to{transform:translateX(-100%)}.sheet-top-enter-from,.sheet-top-leave-to{transform:translateY(-100%)}.sheet-bottom-enter-from,.sheet-bottom-leave-to{transform:translateY(100%)}
+</style>

package/dist/components/ui/SheetDescription.vue

@@ -0,0 +1,15 @@
+<template>
+    <p :class="cn('text-sm text-muted-foreground', props.class)">
+        <slot />
+    </p>
+</template>
+
+<script setup lang="ts">
+import { cn } from "../../utils/cn"
+
+export interface Props {
+    class?: string
+}
+
+const props = defineProps<Props>()
+</script>

package/dist/components/ui/SheetFooter.vue

@@ -0,0 +1,15 @@
+<template>
+    <div :class="cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', props.class)">
+        <slot />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { cn } from "../../utils/cn"
+
+export interface Props {
+    class?: string
+}
+
+const props = defineProps<Props>()
+</script>

package/dist/components/ui/SheetHeader.vue

@@ -0,0 +1,15 @@
+<template>
+    <div :class="cn('flex flex-col space-y-2 text-center sm:text-left', props.class)">
+        <slot />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { cn } from "../../utils/cn"
+
+export interface Props {
+    class?: string
+}
+
+const props = defineProps<Props>()
+</script>

package/dist/components/ui/SheetTitle.vue

@@ -0,0 +1,15 @@
+<template>
+    <h2 :class="cn('text-lg font-semibold text-foreground', props.class)">
+        <slot />
+    </h2>
+</template>
+
+<script setup lang="ts">
+import { cn } from "../../utils/cn"
+
+export interface Props {
+    class?: string
+}
+
+const props = defineProps<Props>()
+</script>

package/dist/components/ui/Switch.vue

@@ -0,0 +1,43 @@
+<template>
+    <button
+        type="button"
+        :class="composable.track_classes.value"
+        :disabled="composable.is_disabled.value"
+        :data-state="modelValue ? 'checked' : 'unchecked'"
+        v-bind="composable.aria_attributes.value"
+        @click="handleClick"
+    >
+        <span
+            :class="composable.thumb_classes.value"
+            :data-state="modelValue ? 'checked' : 'unchecked'"
+        />
+    </button>
+</template>
+
+<script setup lang="ts">
+import { toRef } from "vue"
+import { useSwitch } from "../../composables/useSwitch"
+import type { SwitchProps } from "../../types/switch"
+
+interface Props extends SwitchProps {
+    modelValue?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    modelValue: false,
+    disabled: false
+})
+
+const emit = defineEmits<{
+    "update:modelValue": [value: boolean]
+}>()
+
+const checked = toRef(() => props.modelValue)
+const composable = useSwitch(toRef(() => props), checked)
+
+const handleClick = () => {
+    if (!composable.is_disabled.value) {
+        emit("update:modelValue", !props.modelValue)
+    }
+}
+</script>

package/dist/components/ui/Textarea.vue

@@ -0,0 +1,50 @@
+<template>
+    <textarea
+        :id="id"
+        :class="composable.base_classes.value"
+        :disabled="composable.is_disabled.value"
+        :readonly="composable.is_readonly.value"
+        :placeholder="placeholder"
+        :rows="rows"
+        :value="modelValue"
+        v-bind="composable.aria_attributes.value"
+        @input="handleInput"
+        @focus="composable.handleFocus"
+        @blur="handleBlur"
+    />
+</template>
+
+<script setup lang="ts">
+import { toRef } from "vue"
+import { useTextarea } from "../../composables/useTextarea"
+import type { TextareaProps } from "../../types/textarea"
+
+interface Props extends TextareaProps {
+    id?: string
+    modelValue?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    rows: 3,
+    resize: "vertical",
+    disabled: false,
+    readonly: false
+})
+
+const emit = defineEmits<{
+    "update:modelValue": [value: string]
+    blur: [event: FocusEvent]
+}>()
+
+const composable = useTextarea(toRef(() => props))
+
+const handleInput = (event: Event) => {
+    const target = event.target as HTMLTextAreaElement
+    emit("update:modelValue", target.value)
+}
+
+const handleBlur = (event: FocusEvent) => {
+    composable.handleBlur()
+    emit("blur", event)
+}
+</script>

package/dist/components/ui/Toast.vue

@@ -0,0 +1,107 @@
+<template>
+    <div
+        :class="cn(base_classes, variant_classes[variant], props.class)"
+        :role="aria_role"
+        :aria-live="aria_live"
+        aria-atomic="true"
+    >
+        <div class="flex-1 space-y-1">
+            <div v-if="title" class="text-sm font-semibold">
+                {{ title }}
+            </div>
+            <div v-if="description" class="text-sm opacity-90">
+                {{ description }}
+            </div>
+        </div>
+
+        <div v-if="action || dismissible" class="flex items-center gap-2 ml-4">
+            <button
+                v-if="action"
+                type="button"
+                :class="action_button_classes"
+                @click="action.onClick"
+            >
+                {{ action.label }}
+            </button>
+
+            <button
+                v-if="dismissible"
+                type="button"
+                :class="dismiss_button_classes"
+                aria-label="Dismiss"
+                @click="emit('dismiss')"
+            >
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="16"
+                    height="16"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                >
+                    <path d="M18 6 6 18" />
+                    <path d="m6 6 12 12" />
+                </svg>
+            </button>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue"
+import { cn } from "../../utils/cn"
+import type { ToastVariant, ToastAction } from "../../types/toast"
+
+export interface Props {
+    title?: string
+    description?: string
+    variant?: ToastVariant
+    dismissible?: boolean
+    action?: ToastAction
+    class?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    variant: "default",
+    dismissible: true
+})
+
+const emit = defineEmits<{
+    dismiss: []
+}>()
+
+const base_classes = "pointer-events-auto flex items-start gap-4 rounded-lg border p-4 shadow-lg transition-all"
+
+const variant_classes: Record<ToastVariant, string> = {
+    default: "bg-background text-foreground border-border",
+    success: "bg-green-50 text-green-900 border-green-200 dark:bg-green-950 dark:text-green-100 dark:border-green-800",
+    error: "bg-red-50 text-red-900 border-red-200 dark:bg-red-950 dark:text-red-100 dark:border-red-800",
+    warning: "bg-yellow-50 text-yellow-900 border-yellow-200 dark:bg-yellow-950 dark:text-yellow-100 dark:border-yellow-800",
+    info: "bg-blue-50 text-blue-900 border-blue-200 dark:bg-blue-950 dark:text-blue-100 dark:border-blue-800"
+}
+
+const aria_role = computed(() => {
+    return props.variant === "error" ? "alert" : "status"
+})
+
+const aria_live = computed(() => {
+    return props.variant === "error" ? "assertive" : "polite"
+})
+
+const action_button_classes = cn(
+    "inline-flex items-center justify-center rounded-md text-sm font-medium",
+    "h-8 px-3 ring-offset-background transition-colors",
+    "hover:bg-secondary focus-visible:outline-none focus-visible:ring-2",
+    "focus-visible:ring-ring focus-visible:ring-offset-2"
+)
+
+const dismiss_button_classes = cn(
+    "inline-flex items-center justify-center rounded-md",
+    "h-6 w-6 shrink-0 opacity-70 transition-opacity",
+    "hover:opacity-100 focus-visible:outline-none focus-visible:ring-2",
+    "focus-visible:ring-ring"
+)
+</script>

package/dist/components/ui/Toaster.vue

@@ -0,0 +1,80 @@
+<template>
+    <Teleport to="body">
+        <div
+            :class="cn(container_classes, position_classes[position], props.class)"
+            aria-label="Notifications"
+        >
+            <TransitionGroup
+                name="toast"
+                tag="div"
+                :class="cn('flex flex-col', gap_class)"
+            >
+                <Toast
+                    v-for="toast in visible_toasts"
+                    :key="toast.id"
+                    :title="toast.title"
+                    :description="toast.description"
+                    :variant="toast.variant"
+                    :dismissible="toast.dismissible"
+                    :action="toast.action"
+                    @dismiss="handleDismiss(toast.id)"
+                />
+            </TransitionGroup>
+        </div>
+    </Teleport>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watchEffect } from "vue"
+import { cn } from "../../utils/cn"
+import { useToast } from "../../composables/useToast"
+import Toast from "./Toast.vue"
+import type { ToastPosition, Toast as ToastType } from "../../types/toast"
+
+export interface Props {
+    position?: ToastPosition
+    max_toasts?: number
+    gap?: number
+    class?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    position: "bottom-right",
+    max_toasts: 5,
+    gap: 8
+})
+
+const { toasts, dismiss } = useToast()
+
+const internal_toasts = ref<ToastType[]>([])
+
+watchEffect(() => {
+    internal_toasts.value = [...toasts]
+})
+
+const visible_toasts = computed(() => {
+    const sorted = [...internal_toasts.value].sort((a, b) => b.created_at - a.created_at)
+    return sorted.slice(0, props.max_toasts)
+})
+
+const handleDismiss = (id: string): void => {
+    dismiss(id)
+}
+
+const container_classes = "fixed z-[100] flex pointer-events-none p-4"
+
+const position_classes: Record<ToastPosition, string> = {
+    "top-left": "top-0 left-0 flex-col",
+    "top-center": "top-0 left-1/2 -translate-x-1/2 flex-col items-center",
+    "top-right": "top-0 right-0 flex-col items-end",
+    "bottom-left": "bottom-0 left-0 flex-col-reverse",
+    "bottom-center": "bottom-0 left-1/2 -translate-x-1/2 flex-col-reverse items-center",
+    "bottom-right": "bottom-0 right-0 flex-col-reverse items-end"
+}
+
+const gap_class = computed(() => `gap-${props.gap / 4}`)
+</script>
+
+<style scoped>
+.toast-enter-active,.toast-leave-active{transition:all .3s ease}.toast-enter-from,.toast-leave-to{opacity:0;transform:translateX(100%)}.toast-move{transition:transform .3s ease}
+</style>

package/dist/components/ui/Tooltip.vue

@@ -0,0 +1,42 @@
+<template>
+    <div class="relative inline-block" :class="props.class">
+        <slot />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { provide, ref, toRef, type InjectionKey, type Ref } from "vue"
+import { useTooltip, type UseTooltipReturn } from "../../composables/useTooltip"
+import type { TooltipSide, TooltipAlign } from "../../types/tooltip"
+
+export interface Props {
+    side?: TooltipSide
+    align?: TooltipAlign
+    delay_duration?: number
+    skip_delay_duration?: number
+    disabled?: boolean
+    class?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    side: "top",
+    align: "center",
+    delay_duration: 200,
+    skip_delay_duration: 100,
+    disabled: false
+})
+
+export const TOOLTIP_CONTEXT_KEY: InjectionKey<UseTooltipReturn> = Symbol("tooltip-context")
+
+const tooltip_props = ref({
+    side: props.side,
+    align: props.align,
+    delay_duration: props.delay_duration,
+    skip_delay_duration: props.skip_delay_duration,
+    disabled: props.disabled
+})
+
+const tooltip = useTooltip(tooltip_props as Ref<typeof tooltip_props.value>)
+
+provide(TOOLTIP_CONTEXT_KEY, tooltip)
+</script>