@soave/ui 0.3.2 → 0.4.0

package/dist/useTheme-C2uPqAtQ.js

@@ -0,0 +1,1175 @@
+import { reactive, provide, inject, readonly, computed, ref, onUnmounted, onMounted, watch } from "vue";
+import { t as tailwindAdapter } from "./tailwind-B-R7fPT1.js";
+import { ZodError } from "zod";
+const DEFAULT_UI_CONFIG = {
+  button: {
+    default_variant: "primary",
+    default_size: "md"
+  },
+  input: {
+    default_size: "md"
+  },
+  card: {
+    default_padding: "md"
+  },
+  alert: {
+    default_variant: "default"
+  }
+};
+const deepMerge = (target, source) => {
+  const output = { ...target };
+  for (const key in source) {
+    if (Object.prototype.hasOwnProperty.call(source, key)) {
+      const source_value = source[key];
+      const target_value = target[key];
+      if (source_value !== null && typeof source_value === "object" && !Array.isArray(source_value) && target_value !== null && typeof target_value === "object" && !Array.isArray(target_value)) {
+        output[key] = deepMerge(
+          target_value,
+          source_value
+        );
+      } else if (source_value !== void 0) {
+        output[key] = source_value;
+      }
+    }
+  }
+  return output;
+};
+const FORM_ERRORS = {
+  FIELD_NOT_FOUND: "指定されたフィールドがスキーマに存在しません",
+  VALIDATION_FAILED: "バリデーションに失敗しました",
+  SUBMIT_FAILED: "フォームの送信に失敗しました",
+  SCHEMA_INVALID: "無効なスキーマが指定されました"
+};
+const COMPONENT_ERRORS = {
+  INVALID_VARIANT: "無効なvariantが指定されました",
+  INVALID_SIZE: "無効なsizeが指定されました",
+  PROVIDER_NOT_FOUND: "UIProviderが見つかりません。アプリケーションをUIProviderでラップしてください"
+};
+const DIALOG_ERRORS = {
+  ALREADY_OPEN: "ダイアログは既に開いています",
+  ALREADY_CLOSED: "ダイアログは既に閉じています"
+};
+const INPUT_ERRORS = {
+  INVALID_TYPE: "無効なinputタイプが指定されました"
+};
+const UI_PROVIDER_KEY = Symbol("ui-provider");
+const UI_CONFIG_KEY = Symbol("ui-config");
+const useUIProvider = (config = {}, adapter = tailwindAdapter) => {
+  const merged_config = reactive(
+    deepMerge(DEFAULT_UI_CONFIG, config)
+  );
+  const context = {
+    config: merged_config,
+    adapter
+  };
+  provide(UI_PROVIDER_KEY, context);
+  provide(UI_CONFIG_KEY, merged_config);
+  return context;
+};
+function useUI(component) {
+  const context = inject(UI_PROVIDER_KEY, null);
+  if (!context) {
+    return readonly(DEFAULT_UI_CONFIG[component]);
+  }
+  return readonly(context.config[component]);
+}
+const useUIConfig = () => {
+  const context = inject(UI_PROVIDER_KEY, null);
+  if (!context) {
+    return readonly(DEFAULT_UI_CONFIG);
+  }
+  return readonly(context.config);
+};
+const useStyleAdapter = () => {
+  const context = inject(UI_PROVIDER_KEY, null);
+  if (!context) {
+    return tailwindAdapter;
+  }
+  return context.adapter;
+};
+const useButton = (props) => {
+  const ui_config = useUI("button");
+  const state = computed(() => ({
+    variant: props.value.variant ?? ui_config.default_variant,
+    size: props.value.size ?? ui_config.default_size,
+    disabled: props.value.disabled ?? false,
+    loading: props.value.loading ?? false,
+    type: props.value.type ?? "button"
+  }));
+  const aria_attributes = computed(() => ({
+    "aria-disabled": state.value.disabled || void 0,
+    "aria-busy": state.value.loading || void 0,
+    role: "button",
+    type: state.value.type
+  }));
+  return {
+    state: readonly(state),
+    aria_attributes: readonly(aria_attributes)
+  };
+};
+const useInput = (props) => {
+  const ui_config = useUI("input");
+  const is_focused = ref(false);
+  const state = computed(() => ({
+    type: props.value.type ?? "text",
+    size: props.value.size ?? ui_config.default_size,
+    disabled: props.value.disabled ?? false,
+    readonly: props.value.readonly ?? false,
+    has_error: !!props.value.error
+  }));
+  const aria_attributes = computed(() => ({
+    "aria-invalid": state.value.has_error || void 0,
+    "aria-describedby": props.value.error_id,
+    "aria-readonly": state.value.readonly || void 0
+  }));
+  const handleFocus = () => {
+    is_focused.value = true;
+  };
+  const handleBlur = () => {
+    is_focused.value = false;
+  };
+  return {
+    state: readonly(state),
+    is_focused,
+    aria_attributes: readonly(aria_attributes),
+    handleFocus,
+    handleBlur
+  };
+};
+const useCard = (props) => {
+  const ui_config = useUI("card");
+  const state = computed(() => ({
+    padding: props.value.padding ?? ui_config.default_padding
+  }));
+  return {
+    state: readonly(state)
+  };
+};
+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
+  };
+};
+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: computed(() => form_state.is_submitting),
+    is_dirty: computed(() => form_state.is_dirty),
+    validateField,
+    validateAll,
+    reset,
+    setValues,
+    setFieldValue,
+    submit,
+    getFieldArray
+  };
+};
+const useCheckbox = (props, checked) => {
+  const state = computed(() => ({
+    size: props.value.size ?? "md",
+    disabled: props.value.disabled ?? false,
+    indeterminate: props.value.indeterminate ?? false,
+    checked: checked.value
+  }));
+  const aria_attributes = computed(() => ({
+    role: "checkbox",
+    "aria-checked": state.value.indeterminate ? "mixed" : state.value.checked,
+    "aria-disabled": state.value.disabled || void 0
+  }));
+  return {
+    state: readonly(state),
+    aria_attributes: readonly(aria_attributes)
+  };
+};
+const RADIO_GROUP_KEY = Symbol("radio-group");
+const useRadioItem = (props) => {
+  const context = inject(RADIO_GROUP_KEY, null);
+  if (!context) {
+    throw new Error(COMPONENT_ERRORS.PROVIDER_NOT_FOUND);
+  }
+  const state = computed(() => ({
+    size: props.value.size ?? "md",
+    disabled: props.value.disabled ?? context.disabled.value,
+    checked: context.model_value.value === props.value.value
+  }));
+  const aria_attributes = computed(() => ({
+    role: "radio",
+    "aria-checked": state.value.checked,
+    "aria-disabled": state.value.disabled || void 0
+  }));
+  return {
+    state: readonly(state),
+    aria_attributes: readonly(aria_attributes)
+  };
+};
+const useSwitch = (props, checked) => {
+  const state = computed(() => ({
+    size: props.value.size ?? "md",
+    disabled: props.value.disabled ?? false,
+    checked: checked.value
+  }));
+  const aria_attributes = computed(() => ({
+    role: "switch",
+    "aria-checked": state.value.checked,
+    "aria-disabled": state.value.disabled || void 0
+  }));
+  return {
+    state: readonly(state),
+    aria_attributes: readonly(aria_attributes)
+  };
+};
+const useTextarea = (props) => {
+  const is_focused = ref(false);
+  const state = computed(() => ({
+    size: props.value.size ?? "md",
+    disabled: props.value.disabled ?? false,
+    readonly: props.value.readonly ?? false,
+    has_error: !!props.value.error,
+    resize: props.value.resize ?? "vertical"
+  }));
+  const aria_attributes = computed(() => ({
+    "aria-invalid": state.value.has_error || void 0,
+    "aria-describedby": props.value.error_id,
+    "aria-readonly": state.value.readonly || void 0
+  }));
+  const handleFocus = () => {
+    is_focused.value = true;
+  };
+  const handleBlur = () => {
+    is_focused.value = false;
+  };
+  return {
+    state: readonly(state),
+    is_focused,
+    aria_attributes: readonly(aria_attributes),
+    handleFocus,
+    handleBlur
+  };
+};
+const SELECT_KEY = Symbol("select");
+const useSelectTrigger = () => {
+  const context = inject(SELECT_KEY, null);
+  if (!context) {
+    throw new Error(COMPONENT_ERRORS.PROVIDER_NOT_FOUND);
+  }
+  const state = computed(() => ({
+    size: context.size.value,
+    disabled: context.disabled.value,
+    is_open: context.is_open.value
+  }));
+  return {
+    state: readonly(state)
+  };
+};
+const useSelectContent = () => {
+  const context = inject(SELECT_KEY, null);
+  if (!context) {
+    throw new Error(COMPONENT_ERRORS.PROVIDER_NOT_FOUND);
+  }
+  const state = computed(() => ({
+    is_open: context.is_open.value
+  }));
+  return {
+    state: readonly(state)
+  };
+};
+const useSelectItem = (props) => {
+  const context = inject(SELECT_KEY, null);
+  if (!context) {
+    throw new Error(COMPONENT_ERRORS.PROVIDER_NOT_FOUND);
+  }
+  const state = computed(() => ({
+    selected: context.model_value.value === props.value.value,
+    disabled: props.value.disabled ?? false
+  }));
+  return {
+    state: readonly(state)
+  };
+};
+const FILE_ERRORS = {
+  MAX_SIZE_EXCEEDED: (max) => `ファイルサイズが${formatFileSize(max)}を超えています`,
+  MAX_FILES_EXCEEDED: (max) => `最大${max}ファイルまでアップロードできます`,
+  INVALID_TYPE: "許可されていないファイル形式です"
+};
+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;
+};
+const useFileInput = (props, input_ref) => {
+  const is_dragging = ref(false);
+  const files = ref([]);
+  const error = ref(null);
+  const state = computed(() => ({
+    disabled: props.value.disabled ?? false,
+    is_dragging: is_dragging.value,
+    has_error: !!error.value,
+    has_files: files.value.length > 0
+  }));
+  const aria_attributes = computed(() => ({
+    "aria-disabled": state.value.disabled || void 0,
+    "aria-invalid": state.value.has_error || 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 || state.value.disabled) 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 (!state.value.disabled) {
+      is_dragging.value = true;
+    }
+  };
+  const handleDragLeave = (event) => {
+    event.preventDefault();
+    is_dragging.value = false;
+  };
+  const handleDrop = (event) => {
+    var _a;
+    event.preventDefault();
+    is_dragging.value = false;
+    if (!state.value.disabled) {
+      handleFiles(((_a = event.dataTransfer) == null ? void 0 : _a.files) ?? null);
+    }
+  };
+  const removeFile = (index) => {
+    const removed = files.value.splice(index, 1)[0];
+    if (removed == null ? void 0 : 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 (!state.value.disabled && input_ref.value) {
+      input_ref.value.click();
+    }
+  };
+  return {
+    state: readonly(state),
+    is_dragging,
+    files,
+    error,
+    aria_attributes: readonly(aria_attributes),
+    handleFiles,
+    handleDragEnter,
+    handleDragLeave,
+    handleDrop,
+    removeFile,
+    clearFiles,
+    openFilePicker
+  };
+};
+const toasts = ref([]);
+let toast_counter = 0;
+const generateId = () => {
+  toast_counter++;
+  return `toast-${toast_counter}-${Date.now()}`;
+};
+function useToast() {
+  const add = (props) => {
+    const id = props.id ?? generateId();
+    const toast2 = {
+      id,
+      title: props.title,
+      description: props.description,
+      variant: props.variant ?? "default",
+      duration: props.duration ?? 5e3,
+      dismissible: props.dismissible ?? true,
+      action: props.action,
+      created_at: Date.now()
+    };
+    toasts.value = [...toasts.value, toast2];
+    if (toast2.duration > 0) {
+      setTimeout(() => {
+        dismiss(id);
+      }, toast2.duration);
+    }
+    return id;
+  };
+  const dismiss = (id) => {
+    toasts.value = toasts.value.filter((t) => t.id !== id);
+  };
+  const dismissAll = () => {
+    toasts.value = [];
+  };
+  const update = (id, props) => {
+    toasts.value = toasts.value.map((toast2) => {
+      if (toast2.id === id) {
+        return {
+          ...toast2,
+          ...props,
+          id: toast2.id,
+          created_at: toast2.created_at
+        };
+      }
+      return toast2;
+    });
+  };
+  return {
+    toasts: [...toasts.value],
+    add,
+    dismiss,
+    dismissAll,
+    update
+  };
+}
+const toast = {
+  default: (props) => useToast().add({ ...props, variant: "default" }),
+  success: (props) => useToast().add({ ...props, variant: "success" }),
+  error: (props) => useToast().add({ ...props, variant: "error" }),
+  warning: (props) => useToast().add({ ...props, variant: "warning" }),
+  info: (props) => useToast().add({ ...props, variant: "info" }),
+  dismiss: (id) => useToast().dismiss(id),
+  dismissAll: () => useToast().dismissAll()
+};
+let tooltip_counter = 0;
+function useTooltip(props) {
+  const is_open = ref(false);
+  const trigger_ref = ref(null);
+  const content_ref = ref(null);
+  const tooltip_id = `tooltip-${++tooltip_counter}`;
+  let show_timeout = null;
+  let hide_timeout = null;
+  const clearTimeouts = () => {
+    if (show_timeout) {
+      clearTimeout(show_timeout);
+      show_timeout = null;
+    }
+    if (hide_timeout) {
+      clearTimeout(hide_timeout);
+      hide_timeout = null;
+    }
+  };
+  const show = () => {
+    if (props.value.disabled) return;
+    clearTimeouts();
+    is_open.value = true;
+  };
+  const hide = () => {
+    clearTimeouts();
+    is_open.value = false;
+  };
+  const handleMouseEnter = () => {
+    if (props.value.disabled) return;
+    clearTimeouts();
+    const delay = props.value.delay_duration ?? 200;
+    show_timeout = setTimeout(() => {
+      is_open.value = true;
+    }, delay);
+  };
+  const handleMouseLeave = () => {
+    clearTimeouts();
+    const skip_delay = props.value.skip_delay_duration ?? 100;
+    hide_timeout = setTimeout(() => {
+      is_open.value = false;
+    }, skip_delay);
+  };
+  const handleFocus = () => {
+    if (props.value.disabled) return;
+    show();
+  };
+  const handleBlur = () => {
+    hide();
+  };
+  const position_styles = computed(() => {
+    if (!trigger_ref.value || !is_open.value) {
+      return {};
+    }
+    const side = props.value.side ?? "top";
+    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;
+  });
+  onUnmounted(() => {
+    clearTimeouts();
+  });
+  return {
+    is_open,
+    trigger_ref,
+    content_ref,
+    tooltip_id,
+    position_styles,
+    show,
+    hide,
+    handleMouseEnter,
+    handleMouseLeave,
+    handleFocus,
+    handleBlur
+  };
+}
+let popover_counter = 0;
+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) => {
+    var _a;
+    if (event.key === "Escape" && is_open.value) {
+      close();
+      (_a = trigger_ref.value) == null ? void 0 : _a.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
+  };
+}
+let dropdown_counter = 0;
+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) => {
+    var _a;
+    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();
+        (_a = trigger_ref.value) == null ? void 0 : _a.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
+  };
+}
+const DEFAULT_OPTIONS = {
+  default_mode: "system",
+  storage_key: "soave-ui-theme",
+  attribute: "data-theme"
+};
+function useTheme(options = {}) {
+  const merged_options = { ...DEFAULT_OPTIONS, ...options };
+  const mode = ref(merged_options.default_mode);
+  let media_query = null;
+  const getSystemTheme = () => {
+    if (typeof window === "undefined") return "light";
+    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  };
+  const resolved_mode = computed(() => {
+    if (mode.value === "system") {
+      return getSystemTheme();
+    }
+    return mode.value;
+  });
+  const applyTheme = (theme) => {
+    if (typeof document === "undefined") return;
+    const root = document.documentElement;
+    root.setAttribute(merged_options.attribute, theme);
+    if (theme === "dark") {
+      root.classList.add("dark");
+    } else {
+      root.classList.remove("dark");
+    }
+  };
+  const setMode = (new_mode) => {
+    mode.value = new_mode;
+    if (typeof localStorage !== "undefined") {
+      localStorage.setItem(merged_options.storage_key, new_mode);
+    }
+    applyTheme(resolved_mode.value);
+  };
+  const toggleMode = () => {
+    const next_mode = resolved_mode.value === "light" ? "dark" : "light";
+    setMode(next_mode);
+  };
+  const handleSystemThemeChange = (event) => {
+    if (mode.value === "system") {
+      applyTheme(event.matches ? "dark" : "light");
+    }
+  };
+  onMounted(() => {
+    if (typeof localStorage !== "undefined") {
+      const stored = localStorage.getItem(merged_options.storage_key);
+      if (stored && ["light", "dark", "system"].includes(stored)) {
+        mode.value = stored;
+      }
+    }
+    if (typeof window !== "undefined") {
+      media_query = window.matchMedia("(prefers-color-scheme: dark)");
+      media_query.addEventListener("change", handleSystemThemeChange);
+    }
+    applyTheme(resolved_mode.value);
+  });
+  onUnmounted(() => {
+    if (media_query) {
+      media_query.removeEventListener("change", handleSystemThemeChange);
+    }
+  });
+  watch(mode, () => {
+    applyTheme(resolved_mode.value);
+  });
+  return {
+    mode,
+    resolved_mode,
+    setMode,
+    toggleMode
+  };
+}
+function generateThemeCSS(light, dark) {
+  const formatColor = (key, value) => {
+    const css_key = key.replace(/_/g, "-");
+    return `  --${css_key}: ${value};`;
+  };
+  const lightCSS = Object.entries(light).map(([key, value]) => formatColor(key, value)).join("\n");
+  const darkCSS = Object.entries(dark).map(([key, value]) => formatColor(key, value)).join("\n");
+  return `:root {
+${lightCSS}
+}
+
+.dark {
+${darkCSS}
+}`;
+}
+export {
+  DIALOG_ERRORS as A,
+  COMPONENT_ERRORS as C,
+  DEFAULT_UI_CONFIG as D,
+  FORM_ERRORS as F,
+  INPUT_ERRORS as I,
+  RADIO_GROUP_KEY as R,
+  SELECT_KEY as S,
+  UI_PROVIDER_KEY as U,
+  useInput as a,
+  useCard as b,
+  useDialog as c,
+  useForm as d,
+  useUIProvider as e,
+  useUI as f,
+  useUIConfig as g,
+  useStyleAdapter as h,
+  UI_CONFIG_KEY as i,
+  useCheckbox as j,
+  useRadioItem as k,
+  useSwitch as l,
+  useTextarea as m,
+  useSelectTrigger as n,
+  useSelectContent as o,
+  useSelectItem as p,
+  useFileInput as q,
+  useToast as r,
+  useTooltip as s,
+  toast as t,
+  useButton as u,
+  usePopover as v,
+  useDropdown as w,
+  useTheme as x,
+  generateThemeCSS as y,
+  deepMerge as z
+};
+//# sourceMappingURL=useTheme-C2uPqAtQ.js.map