@soave/ui 0.1.0

package/dist/build.config.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("unbuild").BuildConfig[];
+export default _default;

package/dist/build.config.mjs

@@ -0,0 +1,14 @@
+import { defineBuildConfig } from "unbuild";
+export default defineBuildConfig({
+  entries: [
+    {
+      builder: "mkdist",
+      input: "./",
+      outDir: "./dist",
+      pattern: ["**/*.ts", "**/*.vue"],
+      declaration: true
+    }
+  ],
+  clean: true,
+  externals: ["vue", "zod", "clsx", "tailwind-merge"]
+});

package/dist/components/ui/Alert.vue

@@ -0,0 +1,39 @@
+<template>
+    <div
+        role="alert"
+        :class="cn(
+            'relative w-full rounded-lg border p-4',
+            variant_classes,
+            props.class
+        )"
+    >
+        <slot />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue"
+import { cn } from "../../utils/cn"
+import { useUI } from "../../composables/useUIConfig"
+import type { AlertVariant } from "../../types/alert"
+
+interface Props {
+    variant?: AlertVariant
+    class?: string
+}
+
+const props = defineProps<Props>()
+
+const ui_config = useUI("alert")
+
+const variant_classes = computed(() => {
+    const variant_map: Record<AlertVariant, string> = {
+        default: "bg-background text-foreground",
+        info: "border-blue-200 bg-blue-50 text-blue-900 [&>svg]:text-blue-600",
+        success: "border-green-200 bg-green-50 text-green-900 [&>svg]:text-green-600",
+        warning: "border-yellow-200 bg-yellow-50 text-yellow-900 [&>svg]:text-yellow-600",
+        destructive: "border-destructive/50 text-destructive bg-destructive/10 [&>svg]:text-destructive"
+    }
+    return variant_map[props.variant ?? ui_config.default_variant]
+})
+</script>

package/dist/components/ui/AlertDescription.vue

@@ -0,0 +1,12 @@
+<template>
+    <div :class="cn('text-sm [&_p]:leading-relaxed', props.class)">
+        <slot />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { cn } from "../../utils/cn"
+import type { AlertDescriptionProps } from "../../types/alert"
+
+const props = defineProps<AlertDescriptionProps>()
+</script>

package/dist/components/ui/AlertTitle.vue

@@ -0,0 +1,12 @@
+<template>
+    <h5 :class="cn('mb-1 font-medium leading-none tracking-tight', props.class)">
+        <slot />
+    </h5>
+</template>
+
+<script setup lang="ts">
+import { cn } from "../../utils/cn"
+import type { AlertTitleProps } from "../../types/alert"
+
+const props = defineProps<AlertTitleProps>()
+</script>

package/dist/components/ui/Button.vue

@@ -0,0 +1,59 @@
+<template>
+    <button
+        :class="composable.base_classes.value"
+        :disabled="composable.is_disabled.value"
+        v-bind="composable.aria_attributes.value"
+        @click="handleClick"
+    >
+        <slot name="icon-left" />
+        <span v-if="composable.is_loading.value" class="animate-spin">
+            <slot name="loading">
+                <svg
+                    class="h-4 w-4"
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                >
+                    <circle
+                        class="opacity-25"
+                        cx="12"
+                        cy="12"
+                        r="10"
+                        stroke="currentColor"
+                        stroke-width="4"
+                    />
+                    <path
+                        class="opacity-75"
+                        fill="currentColor"
+                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                    />
+                </svg>
+            </slot>
+        </span>
+        <slot />
+        <slot name="icon-right" />
+    </button>
+</template>
+
+<script setup lang="ts">
+import { toRef } from "vue"
+import { useButton } from "../../composables/useButton"
+import type { ButtonProps } from "../../types/button"
+
+const props = withDefaults(defineProps<ButtonProps>(), {
+    disabled: false,
+    loading: false
+})
+
+const emit = defineEmits<{
+    click: [event: MouseEvent]
+}>()
+
+const composable = useButton(toRef(() => props))
+
+const handleClick = (event: MouseEvent) => {
+    if (!composable.is_disabled.value && !composable.is_loading.value) {
+        emit("click", event)
+    }
+}
+</script>

package/dist/components/ui/Card.vue

@@ -0,0 +1,15 @@
+<template>
+    <div :class="composable.base_classes.value">
+        <slot />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { toRef } from "vue"
+import { useCard } from "../../composables/useCard"
+import type { CardProps } from "../../types/card"
+
+const props = defineProps<CardProps>()
+
+const composable = useCard(toRef(() => props))
+</script>

package/dist/components/ui/CardContent.vue

@@ -0,0 +1,12 @@
+<template>
+    <div :class="cn('p-6 pt-0', props.class)">
+        <slot />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { cn } from "../../utils/cn"
+import type { CardContentProps } from "../../types/card"
+
+const props = defineProps<CardContentProps>()
+</script>

package/dist/components/ui/CardDescription.vue

@@ -0,0 +1,12 @@
+<template>
+    <p :class="cn('text-sm text-muted-foreground', props.class)">
+        <slot />
+    </p>
+</template>
+
+<script setup lang="ts">
+import { cn } from "../../utils/cn"
+import type { CardDescriptionProps } from "../../types/card"
+
+const props = defineProps<CardDescriptionProps>()
+</script>

package/dist/components/ui/CardFooter.vue

@@ -0,0 +1,12 @@
+<template>
+    <div :class="cn('flex items-center p-6 pt-0', props.class)">
+        <slot />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { cn } from "../../utils/cn"
+import type { CardFooterProps } from "../../types/card"
+
+const props = defineProps<CardFooterProps>()
+</script>

package/dist/components/ui/CardHeader.vue

@@ -0,0 +1,12 @@
+<template>
+    <div :class="cn('flex flex-col space-y-1.5 p-6', props.class)">
+        <slot />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { cn } from "../../utils/cn"
+import type { CardHeaderProps } from "../../types/card"
+
+const props = defineProps<CardHeaderProps>()
+</script>

package/dist/components/ui/CardTitle.vue

@@ -0,0 +1,12 @@
+<template>
+    <h3 :class="cn('text-2xl font-semibold leading-none tracking-tight', props.class)">
+        <slot />
+    </h3>
+</template>
+
+<script setup lang="ts">
+import { cn } from "../../utils/cn"
+import type { CardTitleProps } from "../../types/card"
+
+const props = defineProps<CardTitleProps>()
+</script>

package/dist/components/ui/Checkbox.vue

@@ -0,0 +1,73 @@
+<template>
+    <button
+        type="button"
+        :class="composable.base_classes.value"
+        :disabled="composable.is_disabled.value"
+        :data-state="dataState"
+        v-bind="composable.aria_attributes.value"
+        @click="handleClick"
+    >
+        <span
+            v-if="modelValue || composable.is_indeterminate.value"
+            :class="composable.indicator_classes.value"
+        >
+            <svg
+                v-if="composable.is_indeterminate.value"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="3"
+                stroke-linecap="round"
+            >
+                <line x1="5" y1="12" x2="19" y2="12" />
+            </svg>
+            <svg
+                v-else
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="3"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+            >
+                <polyline points="20 6 9 17 4 12" />
+            </svg>
+        </span>
+    </button>
+</template>
+
+<script setup lang="ts">
+import { computed, toRef } from "vue"
+import { useCheckbox } from "../../composables/useCheckbox"
+import type { CheckboxProps } from "../../types/checkbox"
+
+interface Props extends CheckboxProps {
+    modelValue?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    modelValue: false,
+    disabled: false,
+    indeterminate: false
+})
+
+const emit = defineEmits<{
+    "update:modelValue": [value: boolean]
+}>()
+
+const checked = toRef(() => props.modelValue)
+const composable = useCheckbox(toRef(() => props), checked)
+
+const dataState = computed(() => {
+    if (props.indeterminate) return "indeterminate"
+    return props.modelValue ? "checked" : "unchecked"
+})
+
+const handleClick = () => {
+    if (!composable.is_disabled.value) {
+        emit("update:modelValue", !props.modelValue)
+    }
+}
+</script>

package/dist/components/ui/Dialog.vue

@@ -0,0 +1,93 @@
+<template>
+    <Teleport to="body">
+        <Transition name="dialog">
+            <div
+                v-if="is_open"
+                class="fixed inset-0 z-50 flex items-center justify-center"
+            >
+                <div
+                    class="fixed inset-0 bg-black/80"
+                    @click="handleOverlayClick"
+                />
+                <div
+                    class="relative z-50 grid w-full max-w-lg gap-4 border bg-background p-6 shadow-lg sm:rounded-lg"
+                    role="dialog"
+                    aria-modal="true"
+                >
+                    <slot />
+                    <button
+                        v-if="show_close_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 disabled:pointer-events-none"
+                        @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"
+                            class="h-4 w-4"
+                        >
+                            <path d="M18 6 6 18" />
+                            <path d="m6 6 12 12" />
+                        </svg>
+                        <span class="sr-only">閉じる</span>
+                    </button>
+                </div>
+            </div>
+        </Transition>
+    </Teleport>
+</template>
+
+<script setup lang="ts">
+import { computed, provide, type InjectionKey } from "vue"
+
+interface Props {
+    open?: boolean
+    modal?: boolean
+    showCloseButton?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    open: false,
+    modal: true,
+    showCloseButton: true
+})
+
+const emit = defineEmits<{
+    "update:open": [value: boolean]
+}>()
+
+const is_open = computed({
+    get: () => props.open,
+    set: (value) => emit("update:open", value)
+})
+
+const show_close_button = computed(() => props.showCloseButton)
+
+const close = () => {
+    is_open.value = false
+}
+
+const handleOverlayClick = () => {
+    if (props.modal) {
+        close()
+    }
+}
+
+export interface DialogContext {
+    close: () => void
+}
+
+export const DialogKey: InjectionKey<DialogContext> = Symbol("dialog")
+
+provide(DialogKey, { close })
+</script>
+
+<style scoped>
+.dialog-enter-active,.dialog-leave-active{transition:opacity .2s ease}.dialog-enter-from,.dialog-leave-to{opacity:0}
+</style>

package/dist/components/ui/DialogDescription.vue

@@ -0,0 +1,12 @@
+<template>
+    <p :class="cn('text-sm text-muted-foreground', props.class)">
+        <slot />
+    </p>
+</template>
+
+<script setup lang="ts">
+import { cn } from "../../utils/cn"
+import type { DialogDescriptionProps } from "../../types/dialog"
+
+const props = defineProps<DialogDescriptionProps>()
+</script>

package/dist/components/ui/DialogFooter.vue

@@ -0,0 +1,12 @@
+<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"
+import type { DialogFooterProps } from "../../types/dialog"
+
+const props = defineProps<DialogFooterProps>()
+</script>

package/dist/components/ui/DialogHeader.vue

@@ -0,0 +1,12 @@
+<template>
+    <div :class="cn('flex flex-col space-y-1.5 text-center sm:text-left', props.class)">
+        <slot />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { cn } from "../../utils/cn"
+import type { DialogHeaderProps } from "../../types/dialog"
+
+const props = defineProps<DialogHeaderProps>()
+</script>

package/dist/components/ui/DialogTitle.vue

@@ -0,0 +1,12 @@
+<template>
+    <h2 :class="cn('text-lg font-semibold leading-none tracking-tight', props.class)">
+        <slot />
+    </h2>
+</template>
+
+<script setup lang="ts">
+import { cn } from "../../utils/cn"
+import type { DialogTitleProps } from "../../types/dialog"
+
+const props = defineProps<DialogTitleProps>()
+</script>

package/dist/components/ui/DropdownMenu.vue

@@ -0,0 +1,33 @@
+<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 { useDropdown, type UseDropdownReturn } from "../../composables/useDropdown"
+import type { DropdownSide, DropdownAlign } from "../../types/dropdown"
+
+export interface Props {
+    side?: DropdownSide
+    align?: DropdownAlign
+    class?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    side: "bottom",
+    align: "start"
+})
+
+export const DROPDOWN_CONTEXT_KEY: InjectionKey<UseDropdownReturn> = Symbol("dropdown-context")
+
+const dropdown_props = ref({
+    side: props.side,
+    align: props.align
+})
+
+const dropdown = useDropdown(dropdown_props as Ref<typeof dropdown_props.value>)
+
+provide(DROPDOWN_CONTEXT_KEY, dropdown)
+</script>

package/dist/components/ui/DropdownMenuContent.vue

@@ -0,0 +1,66 @@
+<template>
+    <Transition name="dropdown">
+        <div
+            v-if="is_open"
+            ref="content_element"
+            :id="dropdown_id"
+            role="menu"
+            :aria-labelledby="`${dropdown_id}-trigger`"
+            :style="position_styles"
+            :class="cn(base_classes, props.class)"
+            tabindex="-1"
+            @keydown="handleContentKeyDown"
+        >
+            <slot />
+        </div>
+    </Transition>
+</template>
+
+<script setup lang="ts">
+import { inject, ref, watchEffect, nextTick, watch } from "vue"
+import { cn } from "../../utils/cn"
+import { DROPDOWN_CONTEXT_KEY } from "./DropdownMenu.vue"
+
+export interface Props {
+    class?: string
+}
+
+const props = defineProps<Props>()
+
+const context = inject(DROPDOWN_CONTEXT_KEY)
+
+if (!context) {
+    throw new Error("DropdownMenuContent must be used within a DropdownMenu component")
+}
+
+const {
+    is_open,
+    content_ref,
+    dropdown_id,
+    position_styles,
+    handleContentKeyDown
+} = context
+
+const content_element = ref<HTMLElement | null>(null)
+
+watchEffect(() => {
+    content_ref.value = content_element.value
+})
+
+watch(is_open, async (open) => {
+    if (open) {
+        await nextTick()
+        content_element.value?.focus()
+    }
+})
+
+const base_classes = cn(
+    "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1",
+    "text-popover-foreground shadow-md outline-none",
+    "animate-in fade-in-0 zoom-in-95"
+)
+</script>
+
+<style scoped>
+.dropdown-enter-active,.dropdown-leave-active{transition:opacity .15s ease,transform .15s ease}.dropdown-enter-from,.dropdown-leave-to{opacity:0;transform:scale(.95)}
+</style>

package/dist/components/ui/DropdownMenuItem.vue

@@ -0,0 +1,77 @@
+<template>
+    <div
+        role="menuitem"
+        :tabindex="disabled ? -1 : 0"
+        :class="cn(item_classes, props.class)"
+        :aria-disabled="disabled"
+        :data-highlighted="is_active ? '' : undefined"
+        :data-disabled="disabled ? '' : undefined"
+        @click="handleClick"
+        @mouseenter="handleMouseEnter"
+        @keydown.enter="handleClick"
+        @keydown.space.prevent="handleClick"
+    >
+        <slot />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { inject, computed, onMounted } from "vue"
+import { cn } from "../../utils/cn"
+import { DROPDOWN_CONTEXT_KEY } from "./DropdownMenu.vue"
+
+export interface Props {
+    disabled?: boolean
+    destructive?: boolean
+    class?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    disabled: false,
+    destructive: false
+})
+
+const emit = defineEmits<{
+    select: []
+}>()
+
+const context = inject(DROPDOWN_CONTEXT_KEY)
+
+if (!context) {
+    throw new Error("DropdownMenuItem must be used within a DropdownMenu component")
+}
+
+const { active_item_index, close, registerItem, setActiveItem } = context
+
+let item_index = -1
+
+onMounted(() => {
+    if (!props.disabled) {
+        item_index = registerItem()
+    }
+})
+
+const is_active = computed(() => {
+    return active_item_index.value === item_index && !props.disabled
+})
+
+const handleClick = (): void => {
+    if (props.disabled) return
+    emit("select")
+    close()
+}
+
+const handleMouseEnter = (): void => {
+    if (!props.disabled && item_index >= 0) {
+        setActiveItem(item_index)
+    }
+}
+
+const item_classes = computed(() => cn(
+    "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
+    "transition-colors focus:bg-accent focus:text-accent-foreground",
+    "data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground",
+    "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+    props.destructive && "text-destructive focus:text-destructive"
+))
+</script>

package/dist/components/ui/DropdownMenuLabel.vue

@@ -0,0 +1,20 @@
+<template>
+    <div
+        :class="cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)"
+    >
+        <slot />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { cn } from "../../utils/cn"
+
+export interface Props {
+    inset?: boolean
+    class?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    inset: false
+})
+</script>

package/dist/components/ui/DropdownMenuSeparator.vue

@@ -0,0 +1,16 @@
+<template>
+    <div
+        role="separator"
+        :class="cn('-mx-1 my-1 h-px bg-muted', props.class)"
+    />
+</template>
+
+<script setup lang="ts">
+import { cn } from "../../utils/cn"
+
+export interface Props {
+    class?: string
+}
+
+const props = defineProps<Props>()
+</script>