@soave/ui 0.1.0

package/dist/composables/useFileInput.mjs

@@ -0,0 +1,152 @@
+import { computed, ref } from "vue";
+import { cn } from "../utils/cn.mjs";
+const FILE_ERRORS = {
+  MAX_SIZE_EXCEEDED: (max) => `\u30D5\u30A1\u30A4\u30EB\u30B5\u30A4\u30BA\u304C${formatFileSize(max)}\u3092\u8D85\u3048\u3066\u3044\u307E\u3059`,
+  MAX_FILES_EXCEEDED: (max) => `\u6700\u5927${max}\u30D5\u30A1\u30A4\u30EB\u307E\u3067\u30A2\u30C3\u30D7\u30ED\u30FC\u30C9\u3067\u304D\u307E\u3059`,
+  INVALID_TYPE: "\u8A31\u53EF\u3055\u308C\u3066\u3044\u306A\u3044\u30D5\u30A1\u30A4\u30EB\u5F62\u5F0F\u3067\u3059"
+};
+const formatFileSize = (bytes) => {
+  if (bytes < 1024) return `${bytes}B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)}KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)}MB`;
+};
+const createPreviewUrl = (file) => {
+  if (file.type.startsWith("image/")) {
+    return URL.createObjectURL(file);
+  }
+  return null;
+};
+export const useFileInput = (props, input_ref) => {
+  const is_disabled = computed(() => props.value.disabled ?? false);
+  const is_dragging = ref(false);
+  const files = ref([]);
+  const error = ref(null);
+  const base_classes = computed(
+    () => cn(
+      "relative",
+      is_disabled.value && "opacity-50 cursor-not-allowed"
+    )
+  );
+  const dropzone_classes = computed(
+    () => cn(
+      "flex flex-col items-center justify-center w-full p-6",
+      "border-2 border-dashed rounded-lg",
+      "transition-colors cursor-pointer",
+      "hover:border-primary hover:bg-primary/5",
+      is_dragging.value && "border-primary bg-primary/10",
+      error.value && "border-destructive",
+      is_disabled.value && "pointer-events-none"
+    )
+  );
+  const aria_attributes = computed(() => ({
+    "aria-disabled": is_disabled.value || void 0,
+    "aria-invalid": !!error.value || void 0
+  }));
+  const validateFile = (file) => {
+    const { accept, max_size } = props.value;
+    if (max_size && file.size > max_size) {
+      return FILE_ERRORS.MAX_SIZE_EXCEEDED(max_size);
+    }
+    if (accept) {
+      const accepted_types = accept.split(",").map((t) => t.trim());
+      const is_valid = accepted_types.some((type) => {
+        if (type.startsWith(".")) {
+          return file.name.toLowerCase().endsWith(type.toLowerCase());
+        }
+        if (type.endsWith("/*")) {
+          return file.type.startsWith(type.replace("/*", "/"));
+        }
+        return file.type === type;
+      });
+      if (!is_valid) {
+        return FILE_ERRORS.INVALID_TYPE;
+      }
+    }
+    return null;
+  };
+  const handleFiles = (file_list) => {
+    if (!file_list || is_disabled.value) return;
+    error.value = null;
+    const { multiple, max_files } = props.value;
+    const new_files = [];
+    const files_to_process = Array.from(file_list);
+    for (const file of files_to_process) {
+      const validation_error = validateFile(file);
+      if (validation_error) {
+        error.value = validation_error;
+        return;
+      }
+      new_files.push({
+        file,
+        name: file.name,
+        size: file.size,
+        type: file.type,
+        preview_url: createPreviewUrl(file)
+      });
+    }
+    if (multiple) {
+      const total = files.value.length + new_files.length;
+      if (max_files && total > max_files) {
+        error.value = FILE_ERRORS.MAX_FILES_EXCEEDED(max_files);
+        return;
+      }
+      files.value.push(...new_files);
+    } else {
+      files.value.forEach((f) => {
+        if (f.preview_url) URL.revokeObjectURL(f.preview_url);
+      });
+      files.value = new_files.slice(0, 1);
+    }
+  };
+  const handleDragEnter = (event) => {
+    event.preventDefault();
+    if (!is_disabled.value) {
+      is_dragging.value = true;
+    }
+  };
+  const handleDragLeave = (event) => {
+    event.preventDefault();
+    is_dragging.value = false;
+  };
+  const handleDrop = (event) => {
+    event.preventDefault();
+    is_dragging.value = false;
+    if (!is_disabled.value) {
+      handleFiles(event.dataTransfer?.files ?? null);
+    }
+  };
+  const removeFile = (index) => {
+    const removed = files.value.splice(index, 1)[0];
+    if (removed?.preview_url) {
+      URL.revokeObjectURL(removed.preview_url);
+    }
+  };
+  const clearFiles = () => {
+    files.value.forEach((f) => {
+      if (f.preview_url) URL.revokeObjectURL(f.preview_url);
+    });
+    files.value = [];
+    error.value = null;
+  };
+  const openFilePicker = () => {
+    if (!is_disabled.value && input_ref.value) {
+      input_ref.value.click();
+    }
+  };
+  return {
+    base_classes,
+    dropzone_classes,
+    is_disabled,
+    is_dragging,
+    files,
+    error,
+    aria_attributes,
+    handleFiles,
+    handleDragEnter,
+    handleDragLeave,
+    handleDrop,
+    removeFile,
+    clearFiles,
+    openFilePicker
+  };
+};

package/dist/composables/useForm.d.ts

@@ -0,0 +1,7 @@
+import { z, type ZodSchema } from "zod";
+import type { FormReturn } from "../types/form";
+/**
+ * フォーム状態管理とZodバリデーションを提供するComposable
+ * スキーマに基づいた型安全なフォーム管理を実現
+ */
+export declare const useForm: <T extends ZodSchema>(schema: T) => FormReturn<z.infer<T>>;

package/dist/composables/useForm.mjs

@@ -0,0 +1,159 @@
+import { reactive, computed, readonly } from "vue";
+import { ZodError } from "zod";
+import { FORM_ERRORS } from "../constants/errors.mjs";
+export const useForm = (schema) => {
+  const form_state = reactive({
+    values: {},
+    errors: {},
+    touched: {},
+    is_submitting: false,
+    is_dirty: false
+  });
+  const is_valid = computed(() => {
+    const result = schema.safeParse(form_state.values);
+    return result.success;
+  });
+  const validateField = (field) => {
+    form_state.touched[field] = true;
+    form_state.is_dirty = true;
+    try {
+      const zod_object = schema;
+      const field_schema = zod_object.shape[field];
+      if (!field_schema) {
+        throw new Error(FORM_ERRORS.FIELD_NOT_FOUND);
+      }
+      field_schema.parse(form_state.values[field]);
+      form_state.errors[field] = void 0;
+    } catch (error) {
+      if (error instanceof ZodError) {
+        form_state.errors[field] = error.errors[0].message;
+      } else if (error instanceof Error) {
+        form_state.errors[field] = error.message;
+      }
+    }
+  };
+  const validateAll = () => {
+    try {
+      schema.parse(form_state.values);
+      form_state.errors = {};
+      return true;
+    } catch (error) {
+      if (error instanceof ZodError) {
+        form_state.errors = {};
+        error.errors.forEach((err) => {
+          const field = err.path[0];
+          form_state.errors[field] = err.message;
+          form_state.touched[field] = true;
+        });
+      }
+      return false;
+    }
+  };
+  const reset = () => {
+    form_state.values = {};
+    form_state.errors = {};
+    form_state.touched = {};
+    form_state.is_dirty = false;
+  };
+  const setValues = (values) => {
+    Object.assign(form_state.values, values);
+    form_state.is_dirty = true;
+  };
+  const setFieldValue = (field, value) => {
+    form_state.values[field] = value;
+    form_state.is_dirty = true;
+  };
+  const submit = async (on_submit) => {
+    if (!validateAll()) {
+      return;
+    }
+    form_state.is_submitting = true;
+    try {
+      const validated_data = schema.parse(form_state.values);
+      await on_submit(validated_data);
+    } catch (error) {
+      if (error instanceof ZodError) {
+        error.errors.forEach((err) => {
+          const field = err.path[0];
+          form_state.errors[field] = err.message;
+        });
+      }
+      throw error;
+    } finally {
+      form_state.is_submitting = false;
+    }
+  };
+  const getFieldArray = (field) => {
+    const getArray = () => {
+      const value = form_state.values[field];
+      if (!Array.isArray(value)) {
+        form_state.values[field] = [];
+        return [];
+      }
+      return value;
+    };
+    const helpers = {
+      get fields() {
+        return getArray();
+      },
+      append: (value) => {
+        const array = getArray();
+        array.push(value);
+        form_state.is_dirty = true;
+      },
+      prepend: (value) => {
+        const array = getArray();
+        array.unshift(value);
+        form_state.is_dirty = true;
+      },
+      insert: (index, value) => {
+        const array = getArray();
+        array.splice(index, 0, value);
+        form_state.is_dirty = true;
+      },
+      remove: (index) => {
+        const array = getArray();
+        array.splice(index, 1);
+        form_state.is_dirty = true;
+      },
+      move: (from_index, to_index) => {
+        const array = getArray();
+        const item = array.splice(from_index, 1)[0];
+        array.splice(to_index, 0, item);
+        form_state.is_dirty = true;
+      },
+      swap: (index_a, index_b) => {
+        const array = getArray();
+        const temp = array[index_a];
+        array[index_a] = array[index_b];
+        array[index_b] = temp;
+        form_state.is_dirty = true;
+      },
+      replace: (index, value) => {
+        const array = getArray();
+        array[index] = value;
+        form_state.is_dirty = true;
+      },
+      clear: () => {
+        form_state.values[field] = [];
+        form_state.is_dirty = true;
+      }
+    };
+    return helpers;
+  };
+  return {
+    values: form_state.values,
+    errors: readonly(form_state.errors),
+    touched: readonly(form_state.touched),
+    is_valid,
+    is_submitting: readonly(computed(() => form_state.is_submitting)),
+    is_dirty: readonly(computed(() => form_state.is_dirty)),
+    validateField,
+    validateAll,
+    reset,
+    setValues,
+    setFieldValue,
+    submit,
+    getFieldArray
+  };
+};

package/dist/composables/useInput.d.ts

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

package/dist/composables/useInput.mjs

@@ -0,0 +1,52 @@
+import { computed, ref } from "vue";
+import { cn } from "../utils/cn.mjs";
+import { useUI } from "./useUIConfig.mjs";
+export const useInput = (props) => {
+  const ui_config = useUI("input");
+  const is_focused = ref(false);
+  const has_error = computed(() => !!props.value.error);
+  const is_disabled = computed(() => props.value.disabled ?? false);
+  const is_readonly = computed(() => props.value.readonly ?? false);
+  const size_classes = computed(() => {
+    const size_map = {
+      sm: "h-9 text-sm",
+      md: "h-10",
+      lg: "h-11 text-lg"
+    };
+    return size_map[props.value.size ?? ui_config.default_size];
+  });
+  const base_classes = computed(
+    () => cn(
+      "flex w-full rounded-md border border-input bg-background px-3 py-2",
+      "text-sm ring-offset-background",
+      "file:border-0 file:bg-transparent file:text-sm file:font-medium",
+      "placeholder:text-muted-foreground",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      "disabled:cursor-not-allowed disabled:opacity-50",
+      size_classes.value,
+      has_error.value && "border-destructive focus-visible:ring-destructive",
+      is_readonly.value && "bg-muted"
+    )
+  );
+  const aria_attributes = computed(() => ({
+    "aria-invalid": has_error.value || void 0,
+    "aria-describedby": props.value.error_id,
+    "aria-readonly": is_readonly.value || void 0
+  }));
+  const handleFocus = () => {
+    is_focused.value = true;
+  };
+  const handleBlur = () => {
+    is_focused.value = false;
+  };
+  return {
+    base_classes,
+    is_focused,
+    has_error,
+    is_disabled,
+    is_readonly,
+    aria_attributes,
+    handleFocus,
+    handleBlur
+  };
+};

package/dist/composables/usePopover.d.ts

@@ -0,0 +1,20 @@
+import { type Ref, type ComputedRef } from "vue";
+import type { PopoverSide, PopoverAlign } from "../types/popover";
+export interface UsePopoverProps {
+    side?: PopoverSide;
+    align?: PopoverAlign;
+    modal?: boolean;
+}
+export interface UsePopoverReturn {
+    is_open: Ref<boolean>;
+    trigger_ref: Ref<HTMLElement | null>;
+    content_ref: Ref<HTMLElement | null>;
+    popover_id: string;
+    position_styles: ComputedRef<Record<string, string>>;
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+    handleTriggerClick: () => void;
+    handleKeyDown: (event: KeyboardEvent) => void;
+}
+export declare function usePopover(props: Ref<UsePopoverProps>): UsePopoverReturn;

package/dist/composables/usePopover.mjs

@@ -0,0 +1,113 @@
+import { ref, computed, onMounted, onUnmounted } from "vue";
+let popover_counter = 0;
+export function usePopover(props) {
+  const is_open = ref(false);
+  const trigger_ref = ref(null);
+  const content_ref = ref(null);
+  const popover_id = `popover-${++popover_counter}`;
+  const open = () => {
+    is_open.value = true;
+  };
+  const close = () => {
+    is_open.value = false;
+  };
+  const toggle = () => {
+    is_open.value = !is_open.value;
+  };
+  const handleTriggerClick = () => {
+    toggle();
+  };
+  const handleKeyDown = (event) => {
+    if (event.key === "Escape" && is_open.value) {
+      close();
+      trigger_ref.value?.focus();
+    }
+  };
+  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 position_styles = computed(() => {
+    if (!trigger_ref.value || !is_open.value) {
+      return {};
+    }
+    const side = props.value.side ?? "bottom";
+    const align = props.value.align ?? "center";
+    const offset = 8;
+    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);
+    document.addEventListener("keydown", handleKeyDown);
+  });
+  onUnmounted(() => {
+    document.removeEventListener("mousedown", handleClickOutside);
+    document.removeEventListener("keydown", handleKeyDown);
+  });
+  return {
+    is_open,
+    trigger_ref,
+    content_ref,
+    popover_id,
+    position_styles,
+    open,
+    close,
+    toggle,
+    handleTriggerClick,
+    handleKeyDown
+  };
+}

package/dist/composables/useRadio.d.ts

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

package/dist/composables/useRadio.mjs

@@ -0,0 +1,55 @@
+import { computed, inject } from "vue";
+import { cn } from "../utils/cn.mjs";
+import { RADIO_GROUP_KEY } from "../types/radio.mjs";
+import { COMPONENT_ERRORS } from "../constants/errors.mjs";
+export const useRadioItem = (props) => {
+  const context = inject(RADIO_GROUP_KEY, null);
+  if (!context) {
+    throw new Error(COMPONENT_ERRORS.PROVIDER_NOT_FOUND);
+  }
+  const is_disabled = computed(() => props.value.disabled ?? context.disabled.value);
+  const is_checked = computed(() => context.model_value.value === props.value.value);
+  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(
+      "aspect-square rounded-full border border-primary text-primary",
+      "ring-offset-background",
+      "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      "disabled:cursor-not-allowed disabled:opacity-50",
+      size_classes.value
+    )
+  );
+  const indicator_size_classes = computed(() => {
+    const size_map = {
+      sm: "h-2 w-2",
+      md: "h-2.5 w-2.5",
+      lg: "h-3 w-3"
+    };
+    return size_map[props.value.size ?? "md"];
+  });
+  const indicator_classes = computed(
+    () => cn(
+      "flex items-center justify-center",
+      indicator_size_classes.value
+    )
+  );
+  const aria_attributes = computed(() => ({
+    role: "radio",
+    "aria-checked": is_checked.value,
+    "aria-disabled": is_disabled.value || void 0
+  }));
+  return {
+    base_classes,
+    indicator_classes,
+    is_checked,
+    is_disabled,
+    aria_attributes
+  };
+};

package/dist/composables/useSelect.d.ts

@@ -0,0 +1,17 @@
+import { type Ref } from "vue";
+import type { SelectTriggerReturn, SelectContentReturn, SelectItemReturn } from "../types/select";
+/**
+ * SelectTriggerコンポーネントのロジックを提供するComposable
+ */
+export declare const useSelectTrigger: () => SelectTriggerReturn;
+/**
+ * SelectContentコンポーネントのロジックを提供するComposable
+ */
+export declare const useSelectContent: () => SelectContentReturn;
+/**
+ * SelectItemコンポーネントのロジックを提供するComposable
+ */
+export declare const useSelectItem: (props: Ref<{
+    value: string;
+    disabled?: boolean;
+}>) => SelectItemReturn;

package/dist/composables/useSelect.mjs

@@ -0,0 +1,71 @@
+import { computed, inject } from "vue";
+import { cn } from "../utils/cn.mjs";
+import { SELECT_KEY } from "../types/select.mjs";
+import { COMPONENT_ERRORS } from "../constants/errors.mjs";
+export const useSelectTrigger = () => {
+  const context = inject(SELECT_KEY, null);
+  if (!context) {
+    throw new Error(COMPONENT_ERRORS.PROVIDER_NOT_FOUND);
+  }
+  const is_disabled = computed(() => context.disabled.value);
+  const size_classes = computed(() => {
+    const size_map = {
+      sm: "h-9 text-sm",
+      md: "h-10",
+      lg: "h-11 text-lg"
+    };
+    return size_map[context.size.value];
+  });
+  const base_classes = computed(
+    () => cn(
+      "flex w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2",
+      "text-sm ring-offset-background",
+      "placeholder:text-muted-foreground",
+      "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+      "disabled:cursor-not-allowed disabled:opacity-50",
+      "[&>span]:line-clamp-1",
+      size_classes.value
+    )
+  );
+  return {
+    base_classes,
+    is_disabled
+  };
+};
+export const useSelectContent = () => {
+  const base_classes = computed(
+    () => cn(
+      "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md",
+      "data-[state=open]:animate-in data-[state=closed]:animate-out",
+      "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+      "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
+      "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
+    )
+  );
+  return {
+    base_classes
+  };
+};
+export const useSelectItem = (props) => {
+  const context = inject(SELECT_KEY, null);
+  if (!context) {
+    throw new Error(COMPONENT_ERRORS.PROVIDER_NOT_FOUND);
+  }
+  const is_selected = computed(() => context.model_value.value === props.value.value);
+  const is_disabled = computed(() => props.value.disabled ?? false);
+  const base_classes = computed(
+    () => cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2",
+      "text-sm outline-none",
+      "focus:bg-accent focus:text-accent-foreground",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      is_selected.value && "bg-accent text-accent-foreground"
+    )
+  );
+  return {
+    base_classes,
+    is_selected,
+    is_disabled
+  };
+};

package/dist/composables/useSwitch.d.ts

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