@witchcraft/ui 0.0.1

package/dist/runtime/components/shared/storyHelpers/playInput.js

@@ -0,0 +1,26 @@
+import { expect, userEvent, within } from "@storybook/test";
+export const playBasicVModel = async ({ canvasElement, args }) => {
+  const canvas = within(canvasElement);
+  const input = canvas.getByLabelText(args.label ?? "", { selector: "input" });
+  await userEvent.type(input, "A");
+  await expect(canvas.getByTestId("model-value").textContent).toBe("A");
+  await userEvent.clear(input);
+  await expect(canvas.getByTestId("model-value").textContent).toBe("");
+};
+export const playMultipleValues = async ({ canvasElement, args }) => {
+  const initialValues = [...args.values ?? []];
+  const canvas = within(canvasElement);
+  const input = canvas.getByLabelText(args.label ?? "", { selector: "input" });
+  await userEvent.type(input, "A");
+  await expect(canvas.getByTestId("model-value")).toHaveTextContent("A");
+  await userEvent.keyboard("{Enter}");
+  await expect(canvas.getByTestId("values").textContent).toBe([...initialValues, "A"].join(", "));
+  await expect(canvas.getByTestId("model-value")).toBeEmptyDOMElement();
+  await userEvent.type(input, "B");
+  await expect(canvas.getByTestId("model-value")).toHaveTextContent("B");
+  await userEvent.keyboard("{Enter}");
+  await expect(canvas.getByTestId("values").textContent).toBe([...initialValues, "A", "B"].join(", "));
+  await userEvent.clear(input);
+  await userEvent.keyboard("{Enter}");
+  await expect(canvas.getByTestId("values").textContent).toBe([...initialValues, "A", "B"].join(", "));
+};

package/dist/runtime/components/shared/storyHelpers/playSuggestions.d.ts

@@ -0,0 +1,12 @@
+export declare const playBasicSelect: ({ canvasElement, args }: {
+    canvasElement: HTMLElement;
+    args: any;
+}) => Promise<void>;
+export declare const playBasicKeyboardSelect: ({ canvasElement, args }: {
+    canvasElement: HTMLElement;
+    args: any;
+}) => Promise<void>;
+export declare const playBasicClickSelect: ({ canvasElement, args }: {
+    canvasElement: HTMLElement;
+    args: any;
+}) => Promise<void>;

package/dist/runtime/components/shared/storyHelpers/playSuggestions.js

@@ -0,0 +1,83 @@
+import { expect, userEvent, within } from "@storybook/test";
+export const playBasicSelect = async ({ canvasElement, args }) => {
+  const canvas = within(canvasElement);
+  const input = canvas.getByLabelText(args.label ?? "", { selector: "input" });
+  await userEvent.type(input, "A");
+  await expect(canvas.queryByRole("option", { name: "A", selected: true })).toBeInTheDocument();
+  await userEvent.type(input, "BCDE");
+  await expect(canvas.queryByRole("option", { name: "ABCDEFGHIJKLMNOPQRSTUVWXYZ", selected: true })).toBeInTheDocument();
+  await userEvent.keyboard("{Enter}");
+  if (args.values !== void 0) {
+    await expect(canvas.getByTestId("model-value").textContent).toBe("");
+    await expect(canvas.queryByRole("listbox")).not.toBeNull();
+  } else {
+    await expect(canvas.getByTestId("model-value")).toHaveTextContent("ABCDEFGHIJKLMNOPQRSTUVWXYZ");
+    await expect(canvas.queryByRole("listbox")).toBeNull();
+  }
+  await userEvent.keyboard("{Backspace}");
+  await expect(canvas.queryByRole("option", { selected: true })).toBeInTheDocument();
+  await userEvent.clear(input);
+  await userEvent.type(input, "unmatched");
+  if (!args.suggestionsFilter) {
+    await expect(canvas.queryAllByRole("option", { selected: true })).toEqual([]);
+  }
+  await userEvent.clear(input);
+  await expect(await canvas.findByRole("option", { name: "A", selected: true })).toBeInTheDocument();
+  if (args.restrictToSuggestions && args.values === void 0) {
+    await expect(canvas.getByTestId("model-value").textContent).toBe("ABCDEFGHIJKLMNOPQRSTUVWXYZ");
+  }
+  await userEvent.keyboard("{Enter}");
+  if (args.values === void 0) {
+    await expect(canvas.getByTestId("model-value").textContent).toBe("A");
+  }
+  await userEvent.clear(input);
+  await userEvent.keyboard("AB{Escape}");
+  await expect(canvas.queryByRole("listbox")).toBeNull();
+  if (args.values === void 0) {
+    if (args.restrictToSuggestions) {
+      await expect(canvas.getByTestId("model-value").textContent).toBe("A");
+    }
+  }
+};
+export const playBasicKeyboardSelect = async ({ canvasElement, args }) => {
+  const canvas = within(canvasElement);
+  const input = canvas.getByLabelText(args.label ?? "", { selector: "input" });
+  await userEvent.clear(input);
+  await userEvent.type(input, "A");
+  await expect(canvas.queryByRole("option", { name: "A", selected: true })).toBeInTheDocument();
+  await userEvent.keyboard("{ArrowDown}");
+  await expect(canvas.queryByRole("option", { name: "AB", selected: true })).toBeInTheDocument();
+  await userEvent.keyboard("{ArrowUp}");
+  await expect(canvas.queryByRole("option", { name: "A", selected: true })).toBeInTheDocument();
+  await userEvent.keyboard("{ArrowUp}");
+  await expect(canvas.queryByRole("option", { name: "ABCDEFGHIJKLMNOPQRSTUVWXYZ", selected: true })).toBeInTheDocument();
+  await userEvent.keyboard("{ArrowDown}");
+  await expect(canvas.queryByRole("option", { name: "A", selected: true })).toBeInTheDocument();
+  await userEvent.keyboard("{PageDown}");
+  await expect(canvas.queryByRole("option", { name: "ABCDEFGHIJKLMNOPQRSTUVWXYZ", selected: true })).toBeInTheDocument();
+  await userEvent.keyboard("{PageUp}");
+  await expect(canvas.queryByRole("option", { name: "A", selected: true })).toBeInTheDocument();
+  const testOpen = async (key) => {
+    await userEvent.keyboard("{Escape}");
+    await expect(canvas.queryByRole("listbox")).toBeNull();
+    await userEvent.keyboard(`{${key}}`);
+    await expect(canvas.queryByRole("listbox")).toBeInTheDocument();
+  };
+  await testOpen("ArrowDown");
+  await testOpen("ArrowUp");
+  await testOpen("PageDown");
+  await testOpen("PageUp");
+};
+export const playBasicClickSelect = async ({ canvasElement, args }) => {
+  const canvas = within(canvasElement);
+  const input = canvas.getByLabelText(args.label ?? "", { selector: "input" });
+  await userEvent.clear(input);
+  await userEvent.type(input, "A");
+  await userEvent.click(canvas.getByRole("option", { name: "AB" }));
+  if (args.values === void 0) {
+    await expect(canvas.getByTestId("model-value").textContent).toBe("AB");
+    await expect(canvas.queryByRole("listbox")).toBeNull();
+  } else {
+    await expect(canvas.getByTestId("values")).toHaveTextContent(/AB$/);
+  }
+};

package/dist/runtime/composables/index.d.ts

@@ -0,0 +1,11 @@
+export { useAccesibilityOutline } from "./useAccesibilityOutline.js.js";
+export { useAriaLabel } from "./useAriaLabel.js.js";
+export { useDarkMode } from "./useDarkMode.js.js";
+export { useDivideAttrs } from "./useDivideAttrs.js.js";
+export { useGlobalResizeObserver } from "./useGlobalResizeObserver.js.js";
+export { useInjectedDarkMode } from "./useInjectedDarkMode.js.js";
+export { useNotificationHandler } from "./useNotificationHandler.js.js";
+export { useScrollNearContainerEdges } from "./useScrollNearContainerEdges.js.js";
+export { useSetupDarkMode } from "./useSetupDarkMode.js.js";
+export { useShowDevOnlyKey } from "./useShowDevOnlyKey.js.js";
+export { useSuggestions } from "./useSuggestions.js.js";

package/dist/runtime/composables/index.js

@@ -0,0 +1,11 @@
+export { useAccesibilityOutline } from "./useAccesibilityOutline.js";
+export { useAriaLabel } from "./useAriaLabel.js";
+export { useDarkMode } from "./useDarkMode.js";
+export { useDivideAttrs } from "./useDivideAttrs.js";
+export { useGlobalResizeObserver } from "./useGlobalResizeObserver.js";
+export { useInjectedDarkMode } from "./useInjectedDarkMode.js";
+export { useNotificationHandler } from "./useNotificationHandler.js";
+export { useScrollNearContainerEdges } from "./useScrollNearContainerEdges.js";
+export { useSetupDarkMode } from "./useSetupDarkMode.js";
+export { useShowDevOnlyKey } from "./useShowDevOnlyKey.js";
+export { useSuggestions } from "./useSuggestions.js";

package/dist/runtime/composables/useAccesibilityOutline.d.ts

@@ -0,0 +1,41 @@
+import { type Ref } from "vue";
+/**
+ * Returns a reactive ref that indicates whether the user presses a key *and* produced a change in focus. Used for only providing a `:focus` outline when the user is navigating via the keyboard.
+ *
+ * Can be optionally passed a reactive ref to enable/disabled the calculation (e.g. based on a user setting). This is returned back by the function in case you want to just use the control variable it auto creates. Event listeners are automatically attached/detached when this is changed.
+ *
+ * In setup:
+ * ```ts
+ * const el = ref(null)
+ *
+ * const {outline, control: outlineControl} = useAccesibilityOutline(el)
+ * outlineControl.value = userSettings.outlineOnlyOnNavigation
+ * // or
+ * useAccesibilityOutline(el, userSettings.outlineOnlyOnNavigation)
+ *
+ * const classes = computed(() =>( {
+ * 	// if setting is false => always outline
+ * 	outline: !userSettings.outlineOnlyOnNavigation || outline.value
+ * }))
+ *
+ * return {
+ * 	classes,
+ * 	el
+ * }
+ * ```
+ *
+ * In the root app component. Note it requires the element have a tabindex.
+ * ```html
+ * 	<div id="app" :class="classes" ref="el" tabindex="-1"></div>
+ * ```
+ *
+ * In style of any subcomponents we can now target `:focus` only when the user is navigating with the keyboard.
+ *
+ * ```css
+ * .outline button:focus {
+ * 	....
+ * }
+ * ```
+ *
+ */
+export declare function useAccesibilityOutline(target: Ref<HTMLElement | null>, enable?: Ref<boolean>): Record<"outline" | "control", Ref<boolean>>;

package/dist/runtime/composables/useAccesibilityOutline.js

@@ -0,0 +1,58 @@
+import { castType } from "@alanscodelog/utils/castType.js";
+import { onBeforeUnmount, onMounted, ref, watch } from "vue";
+export function useAccesibilityOutline(target, enable = ref(true)) {
+  const outline = ref(false);
+  const awaitingFocus = ref(false);
+  const keydown = (_e) => {
+    awaitingFocus.value = true;
+    setTimeout(() => {
+      awaitingFocus.value = false;
+    }, 0);
+  };
+  const mousedown = (_e) => {
+    awaitingFocus.value = false;
+    outline.value = false;
+  };
+  const focusin = (_e) => {
+    if (awaitingFocus.value && enable.value) {
+      outline.value = true;
+    }
+  };
+  let canAttach = false;
+  const attach = () => {
+    if (!canAttach) return;
+    castType(target.value);
+    if (!target.value) return;
+    target.value.addEventListener("focusin", focusin);
+    target.value.addEventListener("keydown", keydown);
+    target.value.addEventListener("mousedown", mousedown);
+  };
+  const detach = () => {
+    if (target.value) {
+      castType(target.value);
+      target.value.removeEventListener("focusin", focusin);
+      target.value.removeEventListener("keydown", keydown);
+      target.value.removeEventListener("mousedown", mousedown);
+    }
+  };
+  watch(enable, (newVal, oldVal) => {
+    if (newVal === oldVal) return;
+    if (newVal) {
+      attach();
+    } else {
+      outline.value = false;
+      detach();
+    }
+  });
+  onMounted(() => {
+    canAttach = true;
+    if (enable.value) {
+      attach();
+    }
+  });
+  onBeforeUnmount(() => {
+    canAttach = false;
+    detach();
+  });
+  return { outline, control: enable };
+}

package/dist/runtime/composables/useAriaLabel.d.ts

@@ -0,0 +1,6 @@
+import { type ComputedRef } from "vue";
+/** Returns a computed ref that creates aria-label and aria-labelledby with the correct id for labelledby. */
+export declare const useAriaLabel: (props: {
+    id?: string;
+    label?: string;
+}, fallbackId?: string) => ComputedRef<Record<string, string | undefined>>;

package/dist/runtime/composables/useAriaLabel.js

@@ -0,0 +1,15 @@
+import { computed, onMounted, ref } from "vue";
+export const useAriaLabel = (props, fallbackId) => {
+  const id = computed(() => props.id ?? fallbackId);
+  const labelExists = ref(false);
+  const aria = computed(() => ({
+    "aria-label": labelExists.value ? void 0 : props.label,
+    "aria-labelledby": labelExists.value ? `label-${id.value}` : void 0
+  }));
+  onMounted(() => {
+    if (id.value && document.querySelector(`#label-${id.value}`)) {
+      labelExists.value = true;
+    }
+  });
+  return aria;
+};

package/dist/runtime/composables/useDarkMode.d.ts

@@ -0,0 +1,38 @@
+import { type InjectionKey, type Ref } from "vue";
+/**
+ * @deprecated Use `useSetupDarkMode` instead.
+ *
+ * A composable for setting up dark mode that automatically takes care of saving the user's preference.
+ *
+ * See the returned utilities for more details.
+ *
+ * It also provides injection keys with a ref so it can be accessed in deep nested components if needed. Alternatively you can use `useInjectedDarkMode` for ease of use.
+ *
+ * Note that this should only be called once at the root of the app.
+ */
+export declare const useDarkMode: ({ useLocalStorage, darkModeOrder, isClientSide }?: DarkModeOptions) => DarkModeState & DarkModeCommands;
+export declare const defaultDarkModeOrder: readonly ["system", "dark", "light"];
+export declare const isDarkModeInjectionKey: InjectionKey<Ref<boolean, boolean>>;
+export declare const manualDarkModeInjectionKey: InjectionKey<Ref<boolean | undefined, boolean | undefined>>;
+export declare const darkModeCommandsInjectionKey: InjectionKey<DarkModeCommands>;
+export declare const darkModeStateInjectionKey: InjectionKey<DarkModeState>;
+export type DarkModeOptions = {
+    useLocalStorage?: boolean | string;
+    darkModeOrder?: readonly ("system" | "dark" | "light")[];
+    /** True by default, should be passed import.meta.client if using nuxt, or false when running server side. */
+    isClientSide?: boolean;
+};
+export interface DarkModeCommands {
+    setDarkMode: (value: "dark" | "light" | "system") => void;
+    cycleDarkMode: () => void;
+}
+export interface DarkModeState {
+    /** Whether the dark mode should be enabled or not */
+    darkMode: Ref<boolean>;
+    /** The current state of the darkMode but as a string (dark, light, system) */
+    darkModeState: Ref<"dark" | "light" | "system">;
+    /** The value of the manuably controllable dark mode. You can set this to true/false or undefined to allow the systemDarkMode to take priority. Alternatively use setDarkMode instead. */
+    manualDarkMode: Ref<boolean | undefined>;
+    /** The value of the system dark mode. This is automatically set depending on the user's `prefer-color-scheme` and should not be set directly. */
+    systemDarkMode: Ref<boolean>;
+}

package/dist/runtime/composables/useDarkMode.js

@@ -0,0 +1,79 @@
+import { computed, onMounted, provide, ref, watch } from "vue";
+const defaultLocalStorageKey = "prefersColorSchemeDark";
+const defaultOrder = ["system", "dark", "light"];
+const injectionKey = Symbol("isDarkMode");
+const manualInjectionKey = Symbol("manualDarkMode");
+const commandsInjectionKey = Symbol("darkModeCommands");
+const stateInjectionKey = Symbol("darkModeState");
+export const useDarkMode = ({
+  useLocalStorage = true,
+  darkModeOrder = defaultOrder,
+  /** True by default, should be passed import.meta.client if using nuxt, or false when running server side. */
+  isClientSide = true
+} = {}) => {
+  const systemDarkMode = ref(false);
+  const manualDarkMode = ref(void 0);
+  if (useLocalStorage && isClientSide) {
+    watch(manualDarkMode, () => {
+      localStorage.setItem(defaultLocalStorageKey, manualDarkMode.value ? "true" : "false");
+    });
+  }
+  const darkMode = computed(() => manualDarkMode.value ?? systemDarkMode.value);
+  const darkModeState = computed(
+    () => manualDarkMode.value === void 0 ? "system" : manualDarkMode.value ? "dark" : "light"
+  );
+  function setDarkMode(value) {
+    manualDarkMode.value = value === "dark" ? true : value === "light" ? false : void 0;
+  }
+  function cycleDarkMode() {
+    const index = darkModeOrder.indexOf(darkModeState.value);
+    if (index === 2) {
+      setDarkMode(darkModeOrder[0]);
+    } else {
+      setDarkMode(darkModeOrder[index + 1]);
+    }
+  }
+  onMounted(() => {
+    window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", ({ matches }) => {
+      if (matches) {
+        systemDarkMode.value = true;
+      } else {
+        systemDarkMode.value = false;
+      }
+    });
+    if (useLocalStorage !== false) {
+      const key = typeof useLocalStorage === "string" ? useLocalStorage : defaultLocalStorageKey;
+      const value = localStorage.getItem(key);
+      if (value === "true") {
+        manualDarkMode.value = true;
+      } else if (value === "false") {
+        manualDarkMode.value = false;
+      }
+    }
+  });
+  provide(injectionKey, darkMode);
+  provide(manualInjectionKey, manualDarkMode);
+  provide(stateInjectionKey, {
+    darkMode,
+    darkModeState,
+    manualDarkMode,
+    systemDarkMode
+  });
+  provide(commandsInjectionKey, {
+    setDarkMode,
+    cycleDarkMode
+  });
+  return {
+    darkMode,
+    darkModeState,
+    setDarkMode,
+    cycleDarkMode,
+    manualDarkMode,
+    systemDarkMode
+  };
+};
+export const defaultDarkModeOrder = defaultOrder;
+export const isDarkModeInjectionKey = injectionKey;
+export const manualDarkModeInjectionKey = manualInjectionKey;
+export const darkModeCommandsInjectionKey = commandsInjectionKey;
+export const darkModeStateInjectionKey = stateInjectionKey;

package/dist/runtime/composables/useDivideAttrs.d.ts

@@ -0,0 +1,27 @@
+import { type Ref } from "vue";
+/**
+ * Allows users to more easily pass attributes to different parts of a component. Suppose a component has an input and a wrapper and you want most attributes to go to the input, but any that start with `wrapper` to go to the wrapper.
+ *
+ * You can do:
+ *
+ * ```ts
+ * const extraAttrs = useDivideAttrs(["wrapper"] as const)
+ * ```
+ * This will correctly remove the start of the key. So if the user passes:
+ * ```vue
+ * <your-component regular-attr wrapper-attr wrapperAttrs/>
+ * ```
+ * You will get a ref like:
+ *
+ * ```ts
+ * extraAttrs.value = {
+ * 	attrs: { regular-attr: true },
+ * 	wrapperAttrs: { attr: true, Attrs: true },
+ * }
+ *
+ * Additionally attributes are properly reactive, tough this is probably a bit expensive given they weren't meant to be reactive.
+ *
+ * Note that if using multi-word prefixes, like `inner-wrapper`, they will appear as the key `inner-wrapperAttrs` internally, but users will be able to correctly pass `inner-wrapper-prop`. Aditionally these can be passed down to deeper components, allowing easy wrapping.
+ * ```
+ */
+export declare const useDivideAttrs: <T extends readonly string[]>(divisionKeys: T) => Ref<Record<`${T[number]}Attrs` | "attrs", Record<string, any>>>;

package/dist/runtime/composables/useDivideAttrs.js

@@ -0,0 +1,26 @@
+import { keys } from "@alanscodelog/utils/keys.js";
+import { computed, useAttrs } from "vue";
+export const useDivideAttrs = (divisionKeys) => computed(() => {
+  const attrs = useAttrs();
+  const res = { attrs: {} };
+  const unseen = keys(attrs);
+  for (const key of divisionKeys) {
+    res[`${key}Attrs`] = {};
+    for (let i = 0; i < unseen.length; i++) {
+      const attrKey = unseen[i];
+      if (attrKey.startsWith(`${key}-`)) {
+        res[`${key}Attrs`][attrKey.slice(key.length + 1)] = attrs[attrKey];
+        unseen.splice(i, 1);
+        i--;
+      } else if (attrKey.startsWith(key)) {
+        res[`${key}Attrs`][attrKey.slice(key.length)] = attrs[attrKey];
+        unseen.splice(i, 1);
+        i--;
+      }
+    }
+  }
+  for (const attrKey of unseen) {
+    res.attrs[attrKey] = attrs[attrKey];
+  }
+  return res;
+});

package/dist/runtime/composables/useGlobalResizeObserver.d.ts

@@ -0,0 +1,3 @@
+import type { AnyFunction } from "@alanscodelog/utils";
+import { type Ref } from "vue";
+export declare const useGlobalResizeObserver: (el: Ref<HTMLElement | null>, cb: AnyFunction) => void;

package/dist/runtime/composables/useGlobalResizeObserver.js

@@ -0,0 +1,28 @@
+import { onBeforeUnmount, onMounted, watch } from "vue";
+import { globalResizeObserver } from "../globalResizeObserver.js";
+export const useGlobalResizeObserver = (el, cb) => {
+  let wasMounted = false;
+  if (el.value) {
+    wasMounted = true;
+    globalResizeObserver.observe(el.value, cb);
+  }
+  onMounted(() => {
+    watch(el, (_newval, oldval) => {
+      if (el.value) {
+        globalResizeObserver.observe(el.value, cb);
+      } else {
+        if (oldval) {
+          globalResizeObserver.unobserve(oldval, cb);
+        }
+      }
+    });
+    if (el.value && !wasMounted) {
+      globalResizeObserver.observe(el.value, cb);
+    }
+  });
+  onBeforeUnmount(() => {
+    if (el.value) {
+      globalResizeObserver.unobserve(el.value, cb);
+    }
+  });
+};

package/dist/runtime/composables/useInjectedDarkMode.d.ts

@@ -0,0 +1,2 @@
+import { type DarkModeCommands, type DarkModeState } from "./useDarkMode.js.js";
+export declare function useInjectedDarkMode(): DarkModeState & DarkModeCommands;

package/dist/runtime/composables/useInjectedDarkMode.js

@@ -0,0 +1,13 @@
+import { inject } from "vue";
+import { darkModeCommandsInjectionKey, darkModeStateInjectionKey } from "./useDarkMode.js";
+export function useInjectedDarkMode() {
+  const darkModeState = inject(darkModeStateInjectionKey);
+  const darkModeCommands = inject(darkModeCommandsInjectionKey);
+  if (!darkModeState || !darkModeCommands) {
+    throw new Error("useInjectedDarkMode could not find provided state. Did you use useSetupDarkMode?");
+  }
+  return {
+    ...darkModeState,
+    ...darkModeCommands
+  };
+}

package/dist/runtime/composables/useInjectedI18n.d.ts

@@ -0,0 +1,2 @@
+import { type TranslationFunction } from "./useSetupI18n.js.js";
+export declare function useInjectedI18n(): TranslationFunction;

package/dist/runtime/composables/useInjectedI18n.js

@@ -0,0 +1,7 @@
+import { inject } from "vue";
+import { i18nInjectionKey } from "./useSetupI18n.js";
+export function useInjectedI18n() {
+  const val = inject(i18nInjectionKey, void 0);
+  if (val === void 0) throw new Error("witchcraft/ui: i18n is not injected. See useSetupI18n.");
+  return val;
+}

package/dist/runtime/composables/useInjectedLocale.d.ts

@@ -0,0 +1,2 @@
+import { type useSetupLocale } from "./useSetupLocale.js.js";
+export declare function useInjectedLocale(): ReturnType<typeof useSetupLocale>;

package/dist/runtime/composables/useInjectedLocale.js

@@ -0,0 +1,21 @@
+import { inject } from "vue";
+import { languageLocaleInjectionKey, timeLocaleInjectionKey } from "./useSetupLocale.js";
+export function useInjectedLocale() {
+  const timeLocale = inject(timeLocaleInjectionKey);
+  const languageLocale = inject(languageLocaleInjectionKey);
+  if (timeLocale === void 0 || languageLocale === void 0) {
+    throw new Error("useInjectedLocale could not find provided state. Did you use useSetupLocale?");
+  }
+  function setLanguageLocale(value) {
+    languageLocale.value = value;
+  }
+  function setTimeLocale(value) {
+    timeLocale.value = value;
+  }
+  return {
+    timeLocale,
+    languageLocale,
+    setLanguageLocale,
+    setTimeLocale
+  };
+}

package/dist/runtime/composables/useNotificationHandler.d.ts

@@ -0,0 +1,4 @@
+import type { NotificationHandler } from "../helpers/NotificationHandler.js.js";
+export declare const useNotificationHandler: (handler?: NotificationHandler, 
+/** True by default, should be passed import.meta.client if using nuxt, or false when running server side. */
+isClientSide?: boolean) => NotificationHandler;

package/dist/runtime/composables/useNotificationHandler.js

@@ -0,0 +1,21 @@
+let first = true;
+const configuration = {
+  notificationHandler: void 0,
+  isClientSide: void 0
+};
+export const useNotificationHandler = (handler, isClientSide) => {
+  const clientSide = isClientSide ?? configuration.isClientSide;
+  if (!clientSide) return void 0;
+  if (first) {
+    first = false;
+    configuration.isClientSide = clientSide ?? true;
+    if (handler) {
+      configuration.notificationHandler = handler;
+    } else {
+      throw new Error("You must set the notification handler to use at least once before using it.");
+    }
+  } else if (handler || isClientSide) {
+    console.warn("You can only configure useNotificationHandler once. (Note that there might be false positive during HMR).");
+  }
+  return configuration.notificationHandler;
+};

package/dist/runtime/composables/useScrollNearContainerEdges.d.ts

@@ -0,0 +1,68 @@
+import { type Ref } from "vue";
+import type { ScrollNearContainerEdgesOptions } from "../types/index.js.js";
+/**
+ * Creates a function `scrollContainer` that allows scrolling a container manually when the coordinates are near it's edges.
+ * Supports scrolling faster the closer one is to the edge, and configuing an inner and outer margin.
+ *
+ * It can be used in any *move event.
+ *
+ * By default it sets a setInterval timer to continue scrolling even when the user does not move.
+ * An `endScroll` function is provided which should be called on the *up event to cleanup the timer and variables properly (there is also the individual `clearScrollInterval` and `resetCanScroll` functions.
+ *
+ * It also provides an `isScrolling` ref and a `scrollIndicator` reactive object for knowing which direction the user is scrolling in to be able to style the element. They can be force cleared with the `resetCanScroll` function.
+ *
+ * ```ts
+ * const {
+ * 	scrollEdges,
+ * 	isScrolling,
+ * 	scrollIndicator,
+ * 	endScroll,
+ * } = useScrollNearContainerEdges({
+ * 	containerEl,
+ * 	scrollMargin,
+ * 	outerScrollMargin,
+ * })
+ *
+ * const onPointerMove = (e: PointerEvent): void => {
+ * 	scrollEdges(e.clientX, e.clientY)
+ * 	if (isScrolling.value) {
+ * 		e.preventDefault()
+ * 		return
+ * 	}
+ * 	//...
+ * }
+ * const onPointerUp = (_e: PointerEvent): void => {
+ * 	endScroll()
+ * 	//...
+ * }
+ * ```
+ * Styling example with tailwind and tailwind-merge:
+ *
+ * ```vue
+ * <div
+ * 	:class="twMerge(
+ * 		isScrolling && `relative after:content-[''] after:absolute after:inset after:border-2 after:border-transparent`,
+ * 		scrollIndicator.right && `after:border-r-accent-500/60`,
+ * 		scrollIndicator.down && `after:border-b-accent-500/60`,
+ * 		scrollIndicator.left && `after:border-l-accent-500/60`,
+ * 		scrollIndicator.up && `after:border-t-accent-500/60`,
+ * 	)"
+ * >
+ * 	<div class="overflow-auto" ref="containerEl" >
+ * </div>
+ * ```
+ */
+export declare const useScrollNearContainerEdges: ({ containerEl, scrollMargin, outerScrollMargin, fastPixelMultiplier, fastPixelAmount, useTimer, timerInterval, }: ScrollNearContainerEdgesOptions) => {
+    scrollEdges: (clientX: number, clientY: number, overrideUseTimer?: boolean) => void;
+    /** Reactive. */
+    scrollIndicator: {
+        left: boolean;
+        right: boolean;
+        down: boolean;
+        up: boolean;
+    };
+    resetScrollIndicator: () => void;
+    clearScrollInterval: () => void;
+    isScrolling: Ref<boolean>;
+    endScroll: () => void;
+};