@soave/ui 0.1.0

package/dist/components/ui/DropdownMenuTrigger.vue

@@ -0,0 +1,38 @@
+<template>
+    <button
+        ref="trigger_element"
+        type="button"
+        :aria-expanded="is_open"
+        :aria-controls="dropdown_id"
+        :aria-haspopup="true"
+        @click="handleTriggerClick"
+        @keydown="handleTriggerKeyDown"
+    >
+        <slot />
+    </button>
+</template>
+
+<script setup lang="ts">
+import { inject, ref, watchEffect } from "vue"
+import { DROPDOWN_CONTEXT_KEY } from "./DropdownMenu.vue"
+
+const context = inject(DROPDOWN_CONTEXT_KEY)
+
+if (!context) {
+    throw new Error("DropdownMenuTrigger must be used within a DropdownMenu component")
+}
+
+const {
+    is_open,
+    trigger_ref,
+    dropdown_id,
+    handleTriggerClick,
+    handleTriggerKeyDown
+} = context
+
+const trigger_element = ref<HTMLElement | null>(null)
+
+watchEffect(() => {
+    trigger_ref.value = trigger_element.value
+})
+</script>

package/dist/components/ui/FileInput.vue

@@ -0,0 +1,153 @@
+<template>
+    <div :class="composable.base_classes.value">
+        <input
+            ref="input_ref"
+            type="file"
+            :accept="accept"
+            :multiple="multiple"
+            :disabled="composable.is_disabled.value"
+            class="sr-only"
+            @change="handleChange"
+        />
+
+        <div
+            :class="composable.dropzone_classes.value"
+            v-bind="composable.aria_attributes.value"
+            @click="composable.openFilePicker"
+            @dragenter="composable.handleDragEnter"
+            @dragleave="composable.handleDragLeave"
+            @dragover.prevent
+            @drop="composable.handleDrop"
+        >
+            <slot name="dropzone">
+                <svg
+                    class="w-10 h-10 mb-3 text-muted-foreground"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="1.5"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                >
+                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+                    <polyline points="17 8 12 3 7 8" />
+                    <line x1="12" y1="3" x2="12" y2="15" />
+                </svg>
+                <p class="text-sm text-muted-foreground">
+                    <span class="font-semibold text-primary">クリック</span>
+                    または ドラッグ&ドロップ
+                </p>
+                <p v-if="accept" class="mt-1 text-xs text-muted-foreground">
+                    {{ accept }}
+                </p>
+            </slot>
+        </div>
+
+        <p
+            v-if="composable.error.value"
+            class="mt-2 text-sm text-destructive"
+        >
+            {{ composable.error.value }}
+        </p>
+
+        <ul
+            v-if="composable.files.value.length > 0"
+            class="mt-4 space-y-2"
+        >
+            <li
+                v-for="(file, index) in composable.files.value"
+                :key="file.name + index"
+                class="flex items-center gap-3 p-2 rounded-md border bg-muted/50"
+            >
+                <img
+                    v-if="file.preview_url"
+                    :src="file.preview_url"
+                    :alt="file.name"
+                    class="w-10 h-10 object-cover rounded"
+                />
+                <svg
+                    v-else
+                    class="w-10 h-10 text-muted-foreground"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="1.5"
+                >
+                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+                    <polyline points="14 2 14 8 20 8" />
+                </svg>
+                <div class="flex-1 min-w-0">
+                    <p class="text-sm font-medium truncate">{{ file.name }}</p>
+                    <p class="text-xs text-muted-foreground">
+                        {{ formatSize(file.size) }}
+                    </p>
+                </div>
+                <button
+                    type="button"
+                    class="p-1 rounded hover:bg-destructive/10 text-muted-foreground hover:text-destructive"
+                    @click.stop="composable.removeFile(index)"
+                >
+                    <svg
+                        class="w-4 h-4"
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                    >
+                        <line x1="18" y1="6" x2="6" y2="18" />
+                        <line x1="6" y1="6" x2="18" y2="18" />
+                    </svg>
+                </button>
+            </li>
+        </ul>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, toRef, watch } from "vue"
+import { useFileInput } from "../../composables/useFileInput"
+import type { FileInputProps, FileInfo } from "../../types/file-input"
+
+interface Props extends FileInputProps {
+    modelValue?: File | File[] | null
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    multiple: false,
+    disabled: false
+})
+
+const emit = defineEmits<{
+    "update:modelValue": [value: File | File[] | null]
+}>()
+
+const input_ref = ref<HTMLInputElement | null>(null)
+const composable = useFileInput(toRef(() => props), input_ref)
+
+const formatSize = (bytes: number): string => {
+    if (bytes < 1024) return `${bytes}B`
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)}KB`
+    return `${(bytes / (1024 * 1024)).toFixed(1)}MB`
+}
+
+const handleChange = (event: Event) => {
+    const target = event.target as HTMLInputElement
+    composable.handleFiles(target.files)
+    target.value = ""
+}
+
+watch(
+    () => composable.files.value,
+    (new_files: FileInfo[]) => {
+        if (props.multiple) {
+            emit("update:modelValue", new_files.map(f => f.file))
+        } else {
+            emit("update:modelValue", new_files[0]?.file ?? null)
+        }
+    },
+    { deep: true }
+)
+</script>

package/dist/components/ui/FormError.vue

@@ -0,0 +1,20 @@
+<template>
+    <p
+        v-if="$slots.default"
+        :id="id"
+        :class="cn('text-sm font-medium text-destructive', props.class)"
+    >
+        <slot />
+    </p>
+</template>
+
+<script setup lang="ts">
+import { cn } from "../../utils/cn"
+import type { FormErrorProps } from "../../types/form"
+
+interface Props extends FormErrorProps {
+    id?: string
+}
+
+const props = defineProps<Props>()
+</script>

package/dist/components/ui/FormField.vue

@@ -0,0 +1,12 @@
+<template>
+    <div :class="cn('space-y-2', props.class)">
+        <slot />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { cn } from "../../utils/cn"
+import type { FormFieldProps } from "../../types/form"
+
+const props = defineProps<FormFieldProps>()
+</script>

package/dist/components/ui/FormInput.vue

@@ -0,0 +1,46 @@
+<template>
+    <Input
+        :id="id"
+        :type="type"
+        :size="size"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        :readonly="readonly"
+        :error="error"
+        :error_id="error_id"
+        :model-value="modelValue"
+        :class="props.class"
+        @update:model-value="emit('update:modelValue', $event)"
+        @blur="emit('blur', $event)"
+    />
+</template>
+
+<script setup lang="ts">
+import Input from "./Input.vue"
+import type { InputType, InputSize } from "../../types/input"
+
+interface Props {
+    id?: string
+    type?: InputType
+    size?: InputSize
+    placeholder?: string
+    disabled?: boolean
+    readonly?: boolean
+    error?: string
+    error_id?: string
+    modelValue?: string | number
+    class?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    type: "text",
+    size: "md",
+    disabled: false,
+    readonly: false
+})
+
+const emit = defineEmits<{
+    "update:modelValue": [value: string | number]
+    blur: [event: FocusEvent]
+}>()
+</script>

package/dist/components/ui/FormLabel.vue

@@ -0,0 +1,19 @@
+<template>
+    <label
+        :for="props.for"
+        :class="cn(
+            'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+            props.class
+        )"
+    >
+        <slot />
+        <span v-if="props.required" class="text-destructive ml-1">*</span>
+    </label>
+</template>
+
+<script setup lang="ts">
+import { cn } from "../../utils/cn"
+import type { FormLabelProps } from "../../types/form"
+
+const props = defineProps<FormLabelProps>()
+</script>

package/dist/components/ui/FormTextarea.vue

@@ -0,0 +1,39 @@
+<template>
+    <Textarea
+        :id="id"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        :readonly="readonly"
+        :error="error"
+        :error_id="error_id"
+        :rows="rows"
+        :resize="resize"
+        :model-value="modelValue"
+        :class="props.class"
+        @update:model-value="emit('update:modelValue', $event)"
+        @blur="emit('blur', $event)"
+    />
+</template>
+
+<script setup lang="ts">
+import Textarea from "./Textarea.vue"
+import type { TextareaProps } from "../../types/textarea"
+
+interface Props extends TextareaProps {
+    id?: string
+    modelValue?: string
+    class?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    rows: 3,
+    resize: "vertical",
+    disabled: false,
+    readonly: false
+})
+
+const emit = defineEmits<{
+    "update:modelValue": [value: string]
+    blur: [event: FocusEvent]
+}>()
+</script>

package/dist/components/ui/Input.vue

@@ -0,0 +1,49 @@
+<template>
+    <input
+        :id="id"
+        :type="type"
+        :class="composable.base_classes.value"
+        :disabled="composable.is_disabled.value"
+        :readonly="composable.is_readonly.value"
+        :placeholder="placeholder"
+        :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 { useInput } from "../../composables/useInput"
+import type { InputProps, InputType } from "../../types/input"
+
+interface Props extends InputProps {
+    id?: string
+    modelValue?: string | number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    type: "text" as InputType,
+    disabled: false,
+    readonly: false
+})
+
+const emit = defineEmits<{
+    "update:modelValue": [value: string | number]
+    blur: [event: FocusEvent]
+}>()
+
+const composable = useInput(toRef(() => props))
+
+const handleInput = (event: Event) => {
+    const target = event.target as HTMLInputElement
+    emit("update:modelValue", target.value)
+}
+
+const handleBlur = (event: FocusEvent) => {
+    composable.handleBlur()
+    emit("blur", event)
+}
+</script>

package/dist/components/ui/Popover.vue

@@ -0,0 +1,36 @@
+<template>
+    <div class="relative inline-block" :class="props.class">
+        <slot />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { provide, ref, type InjectionKey, type Ref } from "vue"
+import { usePopover, type UsePopoverReturn } from "../../composables/usePopover"
+import type { PopoverSide, PopoverAlign } from "../../types/popover"
+
+export interface Props {
+    side?: PopoverSide
+    align?: PopoverAlign
+    modal?: boolean
+    class?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    side: "bottom",
+    align: "center",
+    modal: false
+})
+
+export const POPOVER_CONTEXT_KEY: InjectionKey<UsePopoverReturn> = Symbol("popover-context")
+
+const popover_props = ref({
+    side: props.side,
+    align: props.align,
+    modal: props.modal
+})
+
+const popover = usePopover(popover_props as Ref<typeof popover_props.value>)
+
+provide(POPOVER_CONTEXT_KEY, popover)
+</script>

package/dist/components/ui/PopoverContent.vue

@@ -0,0 +1,62 @@
+<template>
+    <Transition name="popover">
+        <div
+            v-if="is_open"
+            ref="content_element"
+            :id="popover_id"
+            role="dialog"
+            aria-modal="false"
+            :style="position_styles"
+            :class="cn(base_classes, props.class)"
+            tabindex="-1"
+        >
+            <slot />
+        </div>
+    </Transition>
+</template>
+
+<script setup lang="ts">
+import { inject, ref, watchEffect, onMounted } from "vue"
+import { cn } from "../../utils/cn"
+import { POPOVER_CONTEXT_KEY } from "./Popover.vue"
+
+export interface Props {
+    class?: string
+}
+
+const props = defineProps<Props>()
+
+const context = inject(POPOVER_CONTEXT_KEY)
+
+if (!context) {
+    throw new Error("PopoverContent must be used within a Popover component")
+}
+
+const {
+    is_open,
+    content_ref,
+    popover_id,
+    position_styles
+} = context
+
+const content_element = ref<HTMLElement | null>(null)
+
+watchEffect(() => {
+    content_ref.value = content_element.value
+})
+
+onMounted(() => {
+    if (is_open.value && content_element.value) {
+        content_element.value.focus()
+    }
+})
+
+const base_classes = cn(
+    "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none",
+    "animate-in fade-in-0 zoom-in-95"
+)
+</script>
+
+<style scoped>
+.popover-enter-active,.popover-leave-active{transition:opacity .2s ease,transform .2s ease}.popover-enter-from,.popover-leave-to{opacity:0;transform:scale(.95)}
+</style>

package/dist/components/ui/PopoverTrigger.vue

@@ -0,0 +1,36 @@
+<template>
+    <button
+        ref="trigger_element"
+        type="button"
+        :aria-expanded="is_open"
+        :aria-controls="popover_id"
+        :aria-haspopup="true"
+        @click="handleTriggerClick"
+    >
+        <slot />
+    </button>
+</template>
+
+<script setup lang="ts">
+import { inject, ref, watchEffect } from "vue"
+import { POPOVER_CONTEXT_KEY } from "./Popover.vue"
+
+const context = inject(POPOVER_CONTEXT_KEY)
+
+if (!context) {
+    throw new Error("PopoverTrigger must be used within a Popover component")
+}
+
+const {
+    is_open,
+    trigger_ref,
+    popover_id,
+    handleTriggerClick
+} = context
+
+const trigger_element = ref<HTMLElement | null>(null)
+
+watchEffect(() => {
+    trigger_ref.value = trigger_element.value
+})
+</script>

package/dist/components/ui/RadioGroup.vue

@@ -0,0 +1,42 @@
+<template>
+    <div
+        role="radiogroup"
+        :class="cn(
+            'grid gap-2',
+            orientation === 'horizontal' && 'grid-flow-col'
+        )"
+    >
+        <slot />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { provide, toRef } from "vue"
+import { cn } from "../../utils/cn"
+import type { RadioGroupProps, RadioGroupContext } from "../../types/radio"
+import { RADIO_GROUP_KEY } from "../../types/radio"
+
+interface Props extends RadioGroupProps {
+    modelValue?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    modelValue: "",
+    disabled: false,
+    orientation: "vertical"
+})
+
+const emit = defineEmits<{
+    "update:modelValue": [value: string]
+}>()
+
+const context: RadioGroupContext = {
+    model_value: toRef(() => props.modelValue),
+    disabled: toRef(() => props.disabled),
+    updateValue: (value: string) => {
+        emit("update:modelValue", value)
+    }
+}
+
+provide(RADIO_GROUP_KEY, context)
+</script>

package/dist/components/ui/RadioItem.vue

@@ -0,0 +1,41 @@
+<template>
+    <button
+        type="button"
+        :class="composable.base_classes.value"
+        :disabled="composable.is_disabled.value"
+        v-bind="composable.aria_attributes.value"
+        @click="handleClick"
+    >
+        <span
+            v-if="composable.is_checked.value"
+            :class="composable.indicator_classes.value"
+        >
+            <svg
+                class="fill-current"
+                viewBox="0 0 24 24"
+            >
+                <circle cx="12" cy="12" r="6" />
+            </svg>
+        </span>
+    </button>
+</template>
+
+<script setup lang="ts">
+import { inject, toRef } from "vue"
+import { useRadioItem } from "../../composables/useRadio"
+import type { RadioItemProps, RadioGroupContext } from "../../types/radio"
+import { RADIO_GROUP_KEY } from "../../types/radio"
+
+const props = withDefaults(defineProps<RadioItemProps>(), {
+    disabled: false
+})
+
+const context = inject<RadioGroupContext>(RADIO_GROUP_KEY)
+const composable = useRadioItem(toRef(() => props))
+
+const handleClick = () => {
+    if (!composable.is_disabled.value && context) {
+        context.updateValue(props.value)
+    }
+}
+</script>

package/dist/components/ui/Select.vue

@@ -0,0 +1,55 @@
+<template>
+    <div class="relative">
+        <slot />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { provide, ref, toRef } from "vue"
+import type { SelectProps, SelectContext, SelectSize } from "../../types/select"
+import { SELECT_KEY } from "../../types/select"
+
+interface Props extends SelectProps {
+    modelValue?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    modelValue: "",
+    size: "md" as SelectSize,
+    disabled: false,
+    placeholder: "Select..."
+})
+
+const emit = defineEmits<{
+    "update:modelValue": [value: string]
+}>()
+
+const is_open = ref(false)
+
+const context: SelectContext = {
+    model_value: toRef(() => props.modelValue),
+    is_open,
+    disabled: toRef(() => props.disabled),
+    size: toRef(() => props.size ?? "md"),
+    placeholder: toRef(() => props.placeholder ?? "Select..."),
+    updateValue: (value: string) => {
+        emit("update:modelValue", value)
+        is_open.value = false
+    },
+    open: () => {
+        if (!props.disabled) {
+            is_open.value = true
+        }
+    },
+    close: () => {
+        is_open.value = false
+    },
+    toggle: () => {
+        if (!props.disabled) {
+            is_open.value = !is_open.value
+        }
+    }
+}
+
+provide(SELECT_KEY, context)
+</script>

package/dist/components/ui/SelectContent.vue

@@ -0,0 +1,29 @@
+<template>
+    <Teleport to="body">
+        <div
+            v-if="context?.is_open.value"
+            class="fixed inset-0 z-40"
+            @click="context?.close()"
+        />
+        <div
+            v-if="context?.is_open.value"
+            :class="composable.base_classes.value"
+            :data-state="context?.is_open.value ? 'open' : 'closed'"
+            role="listbox"
+        >
+            <div class="p-1">
+                <slot />
+            </div>
+        </div>
+    </Teleport>
+</template>
+
+<script setup lang="ts">
+import { inject } from "vue"
+import { useSelectContent } from "../../composables/useSelect"
+import type { SelectContext } from "../../types/select"
+import { SELECT_KEY } from "../../types/select"
+
+const context = inject<SelectContext>(SELECT_KEY)
+const composable = useSelectContent()
+</script>