@soave/ui 0.1.0

package/dist/components/ui/TooltipContent.vue

@@ -0,0 +1,68 @@
+<template>
+    <Transition name="tooltip">
+        <div
+            v-if="is_open"
+            ref="content_element"
+            :id="tooltip_id"
+            role="tooltip"
+            :style="position_styles"
+            :class="cn(base_classes, props.class)"
+            @mouseenter="handleContentMouseEnter"
+            @mouseleave="handleContentMouseLeave"
+        >
+            <slot />
+        </div>
+    </Transition>
+</template>
+
+<script setup lang="ts">
+import { inject, ref, watchEffect } from "vue"
+import { cn } from "../../utils/cn"
+import { TOOLTIP_CONTEXT_KEY } from "./Tooltip.vue"
+
+export interface Props {
+    class?: string
+}
+
+const props = defineProps<Props>()
+
+const context = inject(TOOLTIP_CONTEXT_KEY)
+
+if (!context) {
+    throw new Error("TooltipContent must be used within a Tooltip component")
+}
+
+const {
+    is_open,
+    content_ref,
+    tooltip_id,
+    position_styles,
+    handleMouseEnter,
+    handleMouseLeave
+} = context
+
+const content_element = ref<HTMLElement | null>(null)
+
+watchEffect(() => {
+    content_ref.value = content_element.value
+})
+
+const handleContentMouseEnter = (): void => {
+    // Keep tooltip open when hovering over content
+    handleMouseEnter()
+}
+
+const handleContentMouseLeave = (): void => {
+    handleMouseLeave()
+}
+
+const base_classes = cn(
+    "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5",
+    "text-xs text-primary-foreground shadow-md",
+    "animate-in fade-in-0 zoom-in-95"
+)
+</script>
+
+<style scoped>
+.tooltip-enter-active,.tooltip-leave-active{transition:opacity .15s ease,transform .15s ease}.tooltip-enter-from,.tooltip-leave-to{opacity:0;transform:scale(.95)}
+</style>

package/dist/components/ui/TooltipTrigger.vue

@@ -0,0 +1,39 @@
+<template>
+    <span
+        ref="trigger_element"
+        :aria-describedby="is_open ? tooltip_id : undefined"
+        @mouseenter="handleMouseEnter"
+        @mouseleave="handleMouseLeave"
+        @focus="handleFocus"
+        @blur="handleBlur"
+    >
+        <slot />
+    </span>
+</template>
+
+<script setup lang="ts">
+import { inject, ref, watchEffect } from "vue"
+import { TOOLTIP_CONTEXT_KEY } from "./Tooltip.vue"
+
+const context = inject(TOOLTIP_CONTEXT_KEY)
+
+if (!context) {
+    throw new Error("TooltipTrigger must be used within a Tooltip component")
+}
+
+const {
+    is_open,
+    trigger_ref,
+    tooltip_id,
+    handleMouseEnter,
+    handleMouseLeave,
+    handleFocus,
+    handleBlur
+} = context
+
+const trigger_element = ref<HTMLElement | null>(null)
+
+watchEffect(() => {
+    trigger_ref.value = trigger_element.value
+})
+</script>

package/dist/components/ui/UIProvider.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { DeepPartial } from "../../types/utils"
+import type { UIConfig } from "../../types/config"
+import { useUIProvider } from "../../composables/useUIConfig"
+
+interface UIProviderProps {
+    config?: DeepPartial<UIConfig>
+}
+
+const props = withDefaults(defineProps<UIProviderProps>(), {
+    config: () => ({})
+})
+
+useUIProvider(props.config)
+</script>
+
+<template>
+    <slot />
+</template>

package/dist/components/ui/index.d.ts

@@ -0,0 +1,52 @@
+export { default as UIProvider } from "./UIProvider.vue";
+export { default as Button } from "./Button.vue";
+export { default as Input } from "./Input.vue";
+export { default as Card } from "./Card.vue";
+export { default as CardHeader } from "./CardHeader.vue";
+export { default as CardTitle } from "./CardTitle.vue";
+export { default as CardDescription } from "./CardDescription.vue";
+export { default as CardContent } from "./CardContent.vue";
+export { default as CardFooter } from "./CardFooter.vue";
+export { default as Alert } from "./Alert.vue";
+export { default as AlertTitle } from "./AlertTitle.vue";
+export { default as AlertDescription } from "./AlertDescription.vue";
+export { default as Dialog } from "./Dialog.vue";
+export { default as DialogHeader } from "./DialogHeader.vue";
+export { default as DialogTitle } from "./DialogTitle.vue";
+export { default as DialogDescription } from "./DialogDescription.vue";
+export { default as DialogFooter } from "./DialogFooter.vue";
+export { default as FormField } from "./FormField.vue";
+export { default as FormLabel } from "./FormLabel.vue";
+export { default as FormInput } from "./FormInput.vue";
+export { default as FormError } from "./FormError.vue";
+export { default as Checkbox } from "./Checkbox.vue";
+export { default as RadioGroup } from "./RadioGroup.vue";
+export { default as RadioItem } from "./RadioItem.vue";
+export { default as Switch } from "./Switch.vue";
+export { default as Textarea } from "./Textarea.vue";
+export { default as Select } from "./Select.vue";
+export { default as SelectTrigger } from "./SelectTrigger.vue";
+export { default as SelectValue } from "./SelectValue.vue";
+export { default as SelectContent } from "./SelectContent.vue";
+export { default as SelectItem } from "./SelectItem.vue";
+export { default as FileInput } from "./FileInput.vue";
+export { default as FormTextarea } from "./FormTextarea.vue";
+export { default as Toast } from "./Toast.vue";
+export { default as Toaster } from "./Toaster.vue";
+export { default as Tooltip } from "./Tooltip.vue";
+export { default as TooltipTrigger } from "./TooltipTrigger.vue";
+export { default as TooltipContent } from "./TooltipContent.vue";
+export { default as Popover } from "./Popover.vue";
+export { default as PopoverTrigger } from "./PopoverTrigger.vue";
+export { default as PopoverContent } from "./PopoverContent.vue";
+export { default as DropdownMenu } from "./DropdownMenu.vue";
+export { default as DropdownMenuTrigger } from "./DropdownMenuTrigger.vue";
+export { default as DropdownMenuContent } from "./DropdownMenuContent.vue";
+export { default as DropdownMenuItem } from "./DropdownMenuItem.vue";
+export { default as DropdownMenuSeparator } from "./DropdownMenuSeparator.vue";
+export { default as DropdownMenuLabel } from "./DropdownMenuLabel.vue";
+export { default as Sheet } from "./Sheet.vue";
+export { default as SheetHeader } from "./SheetHeader.vue";
+export { default as SheetTitle } from "./SheetTitle.vue";
+export { default as SheetDescription } from "./SheetDescription.vue";
+export { default as SheetFooter } from "./SheetFooter.vue";

package/dist/components/ui/index.mjs

@@ -0,0 +1,52 @@
+export { default as UIProvider } from "./UIProvider.vue";
+export { default as Button } from "./Button.vue";
+export { default as Input } from "./Input.vue";
+export { default as Card } from "./Card.vue";
+export { default as CardHeader } from "./CardHeader.vue";
+export { default as CardTitle } from "./CardTitle.vue";
+export { default as CardDescription } from "./CardDescription.vue";
+export { default as CardContent } from "./CardContent.vue";
+export { default as CardFooter } from "./CardFooter.vue";
+export { default as Alert } from "./Alert.vue";
+export { default as AlertTitle } from "./AlertTitle.vue";
+export { default as AlertDescription } from "./AlertDescription.vue";
+export { default as Dialog } from "./Dialog.vue";
+export { default as DialogHeader } from "./DialogHeader.vue";
+export { default as DialogTitle } from "./DialogTitle.vue";
+export { default as DialogDescription } from "./DialogDescription.vue";
+export { default as DialogFooter } from "./DialogFooter.vue";
+export { default as FormField } from "./FormField.vue";
+export { default as FormLabel } from "./FormLabel.vue";
+export { default as FormInput } from "./FormInput.vue";
+export { default as FormError } from "./FormError.vue";
+export { default as Checkbox } from "./Checkbox.vue";
+export { default as RadioGroup } from "./RadioGroup.vue";
+export { default as RadioItem } from "./RadioItem.vue";
+export { default as Switch } from "./Switch.vue";
+export { default as Textarea } from "./Textarea.vue";
+export { default as Select } from "./Select.vue";
+export { default as SelectTrigger } from "./SelectTrigger.vue";
+export { default as SelectValue } from "./SelectValue.vue";
+export { default as SelectContent } from "./SelectContent.vue";
+export { default as SelectItem } from "./SelectItem.vue";
+export { default as FileInput } from "./FileInput.vue";
+export { default as FormTextarea } from "./FormTextarea.vue";
+export { default as Toast } from "./Toast.vue";
+export { default as Toaster } from "./Toaster.vue";
+export { default as Tooltip } from "./Tooltip.vue";
+export { default as TooltipTrigger } from "./TooltipTrigger.vue";
+export { default as TooltipContent } from "./TooltipContent.vue";
+export { default as Popover } from "./Popover.vue";
+export { default as PopoverTrigger } from "./PopoverTrigger.vue";
+export { default as PopoverContent } from "./PopoverContent.vue";
+export { default as DropdownMenu } from "./DropdownMenu.vue";
+export { default as DropdownMenuTrigger } from "./DropdownMenuTrigger.vue";
+export { default as DropdownMenuContent } from "./DropdownMenuContent.vue";
+export { default as DropdownMenuItem } from "./DropdownMenuItem.vue";
+export { default as DropdownMenuSeparator } from "./DropdownMenuSeparator.vue";
+export { default as DropdownMenuLabel } from "./DropdownMenuLabel.vue";
+export { default as Sheet } from "./Sheet.vue";
+export { default as SheetHeader } from "./SheetHeader.vue";
+export { default as SheetTitle } from "./SheetTitle.vue";
+export { default as SheetDescription } from "./SheetDescription.vue";
+export { default as SheetFooter } from "./SheetFooter.vue";

package/dist/composables/index.d.ts

@@ -0,0 +1,17 @@
+export { useButton } from "./useButton";
+export { useInput } from "./useInput";
+export { useCard } from "./useCard";
+export { useDialog } from "./useDialog";
+export { useForm } from "./useForm";
+export { useUIProvider, useUI, useUIConfig, UI_CONFIG_KEY } from "./useUIConfig";
+export { useCheckbox } from "./useCheckbox";
+export { useRadioItem } from "./useRadio";
+export { useSwitch } from "./useSwitch";
+export { useTextarea } from "./useTextarea";
+export { useSelectTrigger, useSelectContent, useSelectItem } from "./useSelect";
+export { useFileInput } from "./useFileInput";
+export { useToast, toast } from "./useToast";
+export { useTooltip } from "./useTooltip";
+export { usePopover } from "./usePopover";
+export { useDropdown } from "./useDropdown";
+export { useTheme, generateThemeCSS } from "./useTheme";

package/dist/composables/index.mjs

@@ -0,0 +1,17 @@
+export { useButton } from "./useButton.mjs";
+export { useInput } from "./useInput.mjs";
+export { useCard } from "./useCard.mjs";
+export { useDialog } from "./useDialog.mjs";
+export { useForm } from "./useForm.mjs";
+export { useUIProvider, useUI, useUIConfig, UI_CONFIG_KEY } from "./useUIConfig.mjs";
+export { useCheckbox } from "./useCheckbox.mjs";
+export { useRadioItem } from "./useRadio.mjs";
+export { useSwitch } from "./useSwitch.mjs";
+export { useTextarea } from "./useTextarea.mjs";
+export { useSelectTrigger, useSelectContent, useSelectItem } from "./useSelect.mjs";
+export { useFileInput } from "./useFileInput.mjs";
+export { useToast, toast } from "./useToast.mjs";
+export { useTooltip } from "./useTooltip.mjs";
+export { usePopover } from "./usePopover.mjs";
+export { useDropdown } from "./useDropdown.mjs";
+export { useTheme, generateThemeCSS } from "./useTheme.mjs";

package/dist/composables/useButton.d.ts

@@ -0,0 +1,8 @@
+import { type Ref } from "vue";
+import type { ButtonProps, ButtonReturn } from "../types/button";
+/**
+ * Buttonコンポーネントのロジックを提供するComposable
+ * variant, size, disabled, loadingに基づいてクラスとaria属性を生成
+ * Providerから設定されたデフォルト値を使用
+ */
+export declare const useButton: (props: Ref<ButtonProps>) => ButtonReturn;

package/dist/composables/useButton.mjs

@@ -0,0 +1,49 @@
+import { computed } from "vue";
+import { cn } from "../utils/cn.mjs";
+import { useUI } from "./useUIConfig.mjs";
+export const useButton = (props) => {
+  const ui_config = useUI("button");
+  const is_disabled = computed(() => props.value.disabled ?? false);
+  const is_loading = computed(() => props.value.loading ?? false);
+  const variant_classes = computed(() => {
+    const variant_map = {
+      primary: "bg-primary text-primary-foreground hover:bg-primary/90",
+      secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+      ghost: "hover:bg-accent hover:text-accent-foreground",
+      outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+      destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90"
+    };
+    return variant_map[props.value.variant ?? ui_config.default_variant];
+  });
+  const size_classes = computed(() => {
+    const size_map = {
+      sm: "h-9 px-3 text-sm",
+      md: "h-10 px-4 py-2",
+      lg: "h-11 px-8"
+    };
+    return size_map[props.value.size ?? ui_config.default_size];
+  });
+  const base_classes = computed(
+    () => cn(
+      "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium",
+      "ring-offset-background transition-colors",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      "disabled:pointer-events-none disabled:opacity-50",
+      variant_classes.value,
+      size_classes.value,
+      is_disabled.value && "opacity-50 cursor-not-allowed",
+      is_loading.value && "cursor-wait"
+    )
+  );
+  const aria_attributes = computed(() => ({
+    "aria-disabled": is_disabled.value || void 0,
+    "aria-busy": is_loading.value || void 0,
+    role: "button"
+  }));
+  return {
+    base_classes,
+    is_disabled,
+    is_loading,
+    aria_attributes
+  };
+};

package/dist/composables/useCard.d.ts

@@ -0,0 +1,8 @@
+import { type Ref } from "vue";
+import type { CardProps, CardReturn } from "../types/card";
+/**
+ * Cardコンポーネントのロジックを提供するComposable
+ * paddingに基づいてクラスを生成
+ * Providerから設定されたデフォルト値を使用
+ */
+export declare const useCard: (props: Ref<CardProps>) => CardReturn;

package/dist/composables/useCard.mjs

@@ -0,0 +1,24 @@
+import { computed } from "vue";
+import { cn } from "../utils/cn.mjs";
+import { useUI } from "./useUIConfig.mjs";
+export const useCard = (props) => {
+  const ui_config = useUI("card");
+  const padding_classes = computed(() => {
+    const padding_map = {
+      none: "",
+      sm: "p-4",
+      md: "p-6",
+      lg: "p-8"
+    };
+    return padding_map[props.value.padding ?? ui_config.default_padding];
+  });
+  const base_classes = computed(
+    () => cn(
+      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      padding_classes.value
+    )
+  );
+  return {
+    base_classes
+  };
+};

package/dist/composables/useCheckbox.d.ts

@@ -0,0 +1,7 @@
+import { type Ref } from "vue";
+import type { CheckboxProps, CheckboxReturn } from "../types/checkbox";
+/**
+ * Checkboxコンポーネントのロジックを提供するComposable
+ * size, disabled, indeterminateに基づいてクラスとaria属性を生成
+ */
+export declare const useCheckbox: (props: Ref<CheckboxProps>, checked: Ref<boolean>) => CheckboxReturn;

package/dist/composables/useCheckbox.mjs

@@ -0,0 +1,51 @@
+import { computed } from "vue";
+import { cn } from "../utils/cn.mjs";
+export const useCheckbox = (props, checked) => {
+  const is_disabled = computed(() => props.value.disabled ?? false);
+  const is_indeterminate = computed(() => props.value.indeterminate ?? false);
+  const size_classes = computed(() => {
+    const size_map = {
+      sm: "h-4 w-4",
+      md: "h-5 w-5",
+      lg: "h-6 w-6"
+    };
+    return size_map[props.value.size ?? "md"];
+  });
+  const base_classes = computed(
+    () => cn(
+      "peer shrink-0 rounded-sm border border-primary",
+      "ring-offset-background",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      "disabled:cursor-not-allowed disabled:opacity-50",
+      "data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      "data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground",
+      size_classes.value
+    )
+  );
+  const indicator_size_classes = computed(() => {
+    const size_map = {
+      sm: "h-3 w-3",
+      md: "h-4 w-4",
+      lg: "h-5 w-5"
+    };
+    return size_map[props.value.size ?? "md"];
+  });
+  const indicator_classes = computed(
+    () => cn(
+      "flex items-center justify-center text-current",
+      indicator_size_classes.value
+    )
+  );
+  const aria_attributes = computed(() => ({
+    role: "checkbox",
+    "aria-checked": is_indeterminate.value ? "mixed" : checked.value,
+    "aria-disabled": is_disabled.value || void 0
+  }));
+  return {
+    base_classes,
+    indicator_classes,
+    is_disabled,
+    is_indeterminate,
+    aria_attributes
+  };
+};

package/dist/composables/useDialog.d.ts

@@ -0,0 +1,6 @@
+import type { DialogReturn } from "../types/dialog";
+/**
+ * Dialogコンポーネントの状態管理を提供するComposable
+ * open/close/toggle操作と状態を管理
+ */
+export declare const useDialog: () => DialogReturn;

package/dist/composables/useDialog.mjs

@@ -0,0 +1,19 @@
+import { ref, readonly } from "vue";
+export const useDialog = () => {
+  const is_open = ref(false);
+  const open = () => {
+    is_open.value = true;
+  };
+  const close = () => {
+    is_open.value = false;
+  };
+  const toggle = () => {
+    is_open.value = !is_open.value;
+  };
+  return {
+    is_open: readonly(is_open),
+    open,
+    close,
+    toggle
+  };
+};

package/dist/composables/useDropdown.d.ts

@@ -0,0 +1,24 @@
+import { type Ref, type ComputedRef } from "vue";
+import type { DropdownSide, DropdownAlign } from "../types/dropdown";
+export interface UseDropdownProps {
+    side?: DropdownSide;
+    align?: DropdownAlign;
+}
+export interface UseDropdownReturn {
+    is_open: Ref<boolean>;
+    trigger_ref: Ref<HTMLElement | null>;
+    content_ref: Ref<HTMLElement | null>;
+    dropdown_id: string;
+    active_item_index: Ref<number>;
+    items_count: Ref<number>;
+    position_styles: ComputedRef<Record<string, string>>;
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+    handleTriggerClick: () => void;
+    handleTriggerKeyDown: (event: KeyboardEvent) => void;
+    handleContentKeyDown: (event: KeyboardEvent) => void;
+    registerItem: () => number;
+    setActiveItem: (index: number) => void;
+}
+export declare function useDropdown(props: Ref<UseDropdownProps>): UseDropdownReturn;

package/dist/composables/useDropdown.mjs

@@ -0,0 +1,170 @@
+import { ref, computed, onMounted, onUnmounted } from "vue";
+let dropdown_counter = 0;
+export function useDropdown(props) {
+  const is_open = ref(false);
+  const trigger_ref = ref(null);
+  const content_ref = ref(null);
+  const dropdown_id = `dropdown-${++dropdown_counter}`;
+  const active_item_index = ref(-1);
+  const items_count = ref(0);
+  let item_counter = 0;
+  const open = () => {
+    is_open.value = true;
+    active_item_index.value = 0;
+  };
+  const close = () => {
+    is_open.value = false;
+    active_item_index.value = -1;
+  };
+  const toggle = () => {
+    if (is_open.value) {
+      close();
+    } else {
+      open();
+    }
+  };
+  const handleTriggerClick = () => {
+    toggle();
+  };
+  const handleTriggerKeyDown = (event) => {
+    switch (event.key) {
+      case "Enter":
+      case " ":
+      case "ArrowDown":
+        event.preventDefault();
+        open();
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        open();
+        active_item_index.value = items_count.value - 1;
+        break;
+    }
+  };
+  const handleContentKeyDown = (event) => {
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        active_item_index.value = Math.min(active_item_index.value + 1, items_count.value - 1);
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        active_item_index.value = Math.max(active_item_index.value - 1, 0);
+        break;
+      case "Home":
+        event.preventDefault();
+        active_item_index.value = 0;
+        break;
+      case "End":
+        event.preventDefault();
+        active_item_index.value = items_count.value - 1;
+        break;
+      case "Escape":
+        event.preventDefault();
+        close();
+        trigger_ref.value?.focus();
+        break;
+      case "Tab":
+        close();
+        break;
+    }
+  };
+  const handleClickOutside = (event) => {
+    if (!is_open.value) return;
+    const target = event.target;
+    const trigger = trigger_ref.value;
+    const content = content_ref.value;
+    if (trigger && trigger.contains(target)) return;
+    if (content && content.contains(target)) return;
+    close();
+  };
+  const registerItem = () => {
+    const index = item_counter++;
+    items_count.value = item_counter;
+    return index;
+  };
+  const setActiveItem = (index) => {
+    active_item_index.value = index;
+  };
+  const position_styles = computed(() => {
+    if (!trigger_ref.value || !is_open.value) {
+      return {};
+    }
+    const side = props.value.side ?? "bottom";
+    const align = props.value.align ?? "start";
+    const offset = 4;
+    const styles = {
+      position: "absolute",
+      zIndex: "50"
+    };
+    switch (side) {
+      case "top":
+        styles.bottom = "100%";
+        styles.marginBottom = `${offset}px`;
+        break;
+      case "bottom":
+        styles.top = "100%";
+        styles.marginTop = `${offset}px`;
+        break;
+      case "left":
+        styles.right = "100%";
+        styles.marginRight = `${offset}px`;
+        break;
+      case "right":
+        styles.left = "100%";
+        styles.marginLeft = `${offset}px`;
+        break;
+    }
+    if (side === "top" || side === "bottom") {
+      switch (align) {
+        case "start":
+          styles.left = "0";
+          break;
+        case "center":
+          styles.left = "50%";
+          styles.transform = "translateX(-50%)";
+          break;
+        case "end":
+          styles.right = "0";
+          break;
+      }
+    } else {
+      switch (align) {
+        case "start":
+          styles.top = "0";
+          break;
+        case "center":
+          styles.top = "50%";
+          styles.transform = "translateY(-50%)";
+          break;
+        case "end":
+          styles.bottom = "0";
+          break;
+      }
+    }
+    return styles;
+  });
+  onMounted(() => {
+    document.addEventListener("mousedown", handleClickOutside);
+  });
+  onUnmounted(() => {
+    document.removeEventListener("mousedown", handleClickOutside);
+  });
+  return {
+    is_open,
+    trigger_ref,
+    content_ref,
+    dropdown_id,
+    active_item_index,
+    items_count,
+    position_styles,
+    open,
+    close,
+    toggle,
+    handleTriggerClick,
+    handleTriggerKeyDown,
+    handleContentKeyDown,
+    registerItem,
+    setActiveItem
+  };
+}

package/dist/composables/useFileInput.d.ts

@@ -0,0 +1,6 @@
+import { type Ref } from "vue";
+import type { FileInputProps, FileInputReturn } from "../types/file-input";
+/**
+ * FileInputコンポーネントのロジックを提供するComposable
+ */
+export declare const useFileInput: (props: Ref<FileInputProps>, input_ref: Ref<HTMLInputElement | null>) => FileInputReturn;