@galaxy-io/dls 1.6.0 → 2.0.0

package/dist/hooks/useIsMac.js

@@ -0,0 +1,27 @@
+import { useSyncExternalStore } from "react";
+//#region src/hooks/useIsMac.ts
+var MAC_PLATFORM = /mac|iphone|ipad|ipod/i;
+/** The platform never changes while the page is open, so there is nothing to subscribe to. */
+var subscribe = () => () => {};
+var getSnapshot = () => {
+	if (typeof navigator === "undefined") return false;
+	const platform = navigator.userAgentData?.platform || navigator.platform || "";
+	return MAC_PLATFORM.test(platform);
+};
+var getServerSnapshot = () => false;
+/**
+* Whether the user is on an Apple platform (macOS, iOS, iPadOS), for ⌘ vs Ctrl labels and
+* bindings. Reads `navigator.userAgentData.platform`, falling back to `navigator.platform`.
+* `false` on the server and during hydration; the client re-renders once with the real value.
+*
+* @returns Whether the platform is macOS, iOS or iPadOS
+*
+* @example
+* const isMac = useIsMac();
+* const modLabel = isMac ? "⌘" : "Ctrl";
+*/
+function useIsMac() {
+	return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}
+//#endregion
+export { useIsMac };

package/dist/hooks/useIsomorphicLayoutEffect.d.ts

@@ -0,0 +1,17 @@
+/**
+ * `useLayoutEffect` in the browser, `useEffect` on the server. React warns when `useLayoutEffect`
+ * runs during server rendering (it never fires there); this picks the effect at module load so
+ * measuring and focusing code reads the DOM before paint in the browser and stays silent in SSR.
+ * The choice is made once per module load, which is SSR-safe: `typeof window` is a check, not a
+ * read.
+ */
+import { useEffect } from "react";
+/**
+ * Layout effect in the browser, plain effect on the server (no SSR warning).
+ *
+ * @example
+ * useIsomorphicLayoutEffect(() => {
+ *   setWidth(ref.current?.getBoundingClientRect().width ?? 0);
+ * }, []);
+ */
+export declare const useIsomorphicLayoutEffect: typeof useEffect;

package/dist/hooks/useIsomorphicLayoutEffect.js

@@ -0,0 +1,20 @@
+import { useEffect, useLayoutEffect } from "react";
+//#region src/hooks/useIsomorphicLayoutEffect.ts
+/**
+* `useLayoutEffect` in the browser, `useEffect` on the server. React warns when `useLayoutEffect`
+* runs during server rendering (it never fires there); this picks the effect at module load so
+* measuring and focusing code reads the DOM before paint in the browser and stays silent in SSR.
+* The choice is made once per module load, which is SSR-safe: `typeof window` is a check, not a
+* read.
+*/
+/**
+* Layout effect in the browser, plain effect on the server (no SSR warning).
+*
+* @example
+* useIsomorphicLayoutEffect(() => {
+*   setWidth(ref.current?.getBoundingClientRect().width ?? 0);
+* }, []);
+*/
+var useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+//#endregion
+export { useIsomorphicLayoutEffect };

package/dist/hooks/useLocalStorage.d.ts

@@ -0,0 +1,28 @@
+/** The part of the Web Storage API `useLocalStorage` uses; `sessionStorage` or any adapter fits. */
+export type LocalStorageLike = Pick<Storage, "getItem" | "setItem" | "removeItem">;
+/** Options for `useLocalStorage`. */
+export interface UseLocalStorageOptions<T> {
+    /** Turns a value into the stored string. @default JSON.stringify */
+    serialize?: ((value: T) => string) | undefined;
+    /** Turns the stored string back into a value; a throw reads as `initial`. @default JSON.parse */
+    deserialize?: ((raw: string) => T) | undefined;
+    /** Where the value lives. Read lazily, never at module scope. @default window.localStorage */
+    storage?: LocalStorageLike | undefined;
+}
+/**
+ * State persisted in `localStorage` (or `options.storage`) under `key`. Returns
+ * `[value, setValue, remove]`; `setValue` takes a value or an updater, `remove()` deletes the key
+ * and the value returns to `initial`. Instances with the same key stay in sync, in this tab and
+ * across tabs. Returns `initial` on the server and during hydration, so hydration never
+ * mismatches. A value that fails to deserialize reads as `initial`; a failed write still updates
+ * the value for the session.
+ *
+ * @param key - The storage key
+ * @param initial - The value when nothing (or nothing readable) is stored, and on the server
+ * @param options - `serialize` (default `JSON.stringify`), `deserialize` (default `JSON.parse`), `storage` (default `window.localStorage`)
+ * @returns `[value, setValue, remove]`
+ *
+ * @example
+ * const [isCollapsed, setIsCollapsed] = useLocalStorage("sidebar:collapsed", false);
+ */
+export declare function useLocalStorage<T>(key: string, initial: T, options?: UseLocalStorageOptions<T>): [value: T, setValue: (value: T | ((previous: T) => T)) => void, remove: () => void];

package/dist/hooks/useLocalStorage.js

@@ -0,0 +1,145 @@
+import { useCallback, useRef, useSyncExternalStore } from "react";
+//#region src/hooks/useLocalStorage.ts
+/**
+* Writes that failed (quota, private mode) per storage, so the value still holds for the session.
+* `null` records a failed remove.
+*/
+var MEMORY_OVERLAYS = /* @__PURE__ */ new WeakMap();
+/** Same-tab subscribers; the `storage` event only reaches other tabs. */
+var LISTENERS = /* @__PURE__ */ new Set();
+/** Stands in for `localStorage` on the server, or where reading it throws. Created on first use. */
+var memoryStorage;
+function getMemoryStorage() {
+	if (memoryStorage === void 0) {
+		const values = /* @__PURE__ */ new Map();
+		memoryStorage = {
+			getItem: (key) => values.get(key) ?? null,
+			setItem: (key, value) => {
+				values.set(key, value);
+			},
+			removeItem: (key) => {
+				values.delete(key);
+			}
+		};
+	}
+	return memoryStorage;
+}
+function getDefaultStorage() {
+	try {
+		if (typeof window !== "undefined" && window.localStorage) return window.localStorage;
+	} catch {}
+	return getMemoryStorage();
+}
+function getOverlay(storage) {
+	let overlay = MEMORY_OVERLAYS.get(storage);
+	if (overlay === void 0) {
+		overlay = /* @__PURE__ */ new Map();
+		MEMORY_OVERLAYS.set(storage, overlay);
+	}
+	return overlay;
+}
+/** The stored string for `key`: a failed write's value first, then the storage itself. */
+function readRaw(storage, key) {
+	const overlay = MEMORY_OVERLAYS.get(storage);
+	if (overlay?.has(key)) return overlay.get(key) ?? null;
+	try {
+		return storage.getItem(key);
+	} catch {
+		return null;
+	}
+}
+function writeRaw(storage, key, raw) {
+	try {
+		if (raw === null) storage.removeItem(key);
+		else storage.setItem(key, raw);
+		MEMORY_OVERLAYS.get(storage)?.delete(key);
+	} catch {
+		getOverlay(storage).set(key, raw);
+	}
+	for (const listener of LISTENERS) listener(storage, key);
+}
+/**
+* State persisted in `localStorage` (or `options.storage`) under `key`. Returns
+* `[value, setValue, remove]`; `setValue` takes a value or an updater, `remove()` deletes the key
+* and the value returns to `initial`. Instances with the same key stay in sync, in this tab and
+* across tabs. Returns `initial` on the server and during hydration, so hydration never
+* mismatches. A value that fails to deserialize reads as `initial`; a failed write still updates
+* the value for the session.
+*
+* @param key - The storage key
+* @param initial - The value when nothing (or nothing readable) is stored, and on the server
+* @param options - `serialize` (default `JSON.stringify`), `deserialize` (default `JSON.parse`), `storage` (default `window.localStorage`)
+* @returns `[value, setValue, remove]`
+*
+* @example
+* const [isCollapsed, setIsCollapsed] = useLocalStorage("sidebar:collapsed", false);
+*/
+function useLocalStorage(key, initial, options) {
+	const storageOption = options?.storage;
+	const serialize = options?.serialize ?? JSON.stringify;
+	const deserialize = options?.deserialize ?? JSON.parse;
+	const initialRef = useRef(initial);
+	const cacheRef = useRef(void 0);
+	const resolveStorage = useCallback(() => storageOption ?? getDefaultStorage(), [storageOption]);
+	const subscribe = useCallback((onStoreChange) => {
+		const storage = resolveStorage();
+		const handleLocalChange = (changedStorage, changedKey) => {
+			if (changedStorage === storage && changedKey === key) onStoreChange();
+		};
+		const handleStorageEvent = (event) => {
+			if (event.storageArea === storage && (event.key === key || event.key === null)) onStoreChange();
+		};
+		LISTENERS.add(handleLocalChange);
+		window.addEventListener("storage", handleStorageEvent);
+		return () => {
+			LISTENERS.delete(handleLocalChange);
+			window.removeEventListener("storage", handleStorageEvent);
+		};
+	}, [resolveStorage, key]);
+	const getSnapshot = () => {
+		const raw = readRaw(resolveStorage(), key);
+		const cached = cacheRef.current;
+		if (cached !== void 0 && cached.key === key && cached.raw === raw) return cached.value;
+		let value = initialRef.current;
+		if (raw !== null) try {
+			value = deserialize(raw);
+		} catch {
+			value = initialRef.current;
+		}
+		cacheRef.current = {
+			key,
+			raw,
+			value
+		};
+		return value;
+	};
+	const getServerSnapshot = () => initialRef.current;
+	const value = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+	const latestRef = useRef({
+		serialize,
+		getSnapshot
+	});
+	latestRef.current = {
+		serialize,
+		getSnapshot
+	};
+	return [
+		value,
+		useCallback((next) => {
+			const { serialize: write, getSnapshot: read } = latestRef.current;
+			const resolved = typeof next === "function" ? next(read()) : next;
+			const raw = write(resolved);
+			cacheRef.current = {
+				key,
+				raw,
+				value: resolved
+			};
+			writeRaw(resolveStorage(), key, raw);
+		}, [resolveStorage, key]),
+		useCallback(() => {
+			writeRaw(resolveStorage(), key, null);
+		}, [resolveStorage, key])
+	];
+}
+//#endregion
+export { useLocalStorage };

package/dist/hooks/useMediaQuery.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Whether the CSS media `query` matches, updating when it changes. `false` on the server and
+ * during hydration; the client re-renders once with the real value.
+ *
+ * @param query - A CSS media query, e.g. `"(max-width: 640px)"`
+ * @returns Whether it matches
+ *
+ * @example
+ * const isNarrow = useMediaQuery("(max-width: 640px)");
+ */
+export declare function useMediaQuery(query: string): boolean;

package/dist/hooks/useMediaQuery.js

@@ -0,0 +1,23 @@
+import { useCallback, useSyncExternalStore } from "react";
+//#region src/hooks/useMediaQuery.ts
+var getServerSnapshot = () => false;
+/**
+* Whether the CSS media `query` matches, updating when it changes. `false` on the server and
+* during hydration; the client re-renders once with the real value.
+*
+* @param query - A CSS media query, e.g. `"(max-width: 640px)"`
+* @returns Whether it matches
+*
+* @example
+* const isNarrow = useMediaQuery("(max-width: 640px)");
+*/
+function useMediaQuery(query) {
+	return useSyncExternalStore(useCallback((onStoreChange) => {
+		if (typeof window === "undefined" || typeof window.matchMedia !== "function") return () => {};
+		const mediaQueryList = window.matchMedia(query);
+		mediaQueryList.addEventListener("change", onStoreChange);
+		return () => mediaQueryList.removeEventListener("change", onStoreChange);
+	}, [query]), useCallback(() => typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia(query).matches, [query]), getServerSnapshot);
+}
+//#endregion
+export { useMediaQuery };

package/dist/hooks/usePrefersReducedMotion.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Whether motion should be reduced. The nearest `GalaxyProvider`'s `reducedMotion` wins:
+ * `ALWAYS` → `true`, `NEVER` → `false`. With `SYSTEM`, or outside a provider, it follows
+ * `prefers-reduced-motion`. `false` on the server and during hydration unless a provider forces it.
+ *
+ * @returns Whether motion should be reduced
+ *
+ * @example
+ * const prefersReducedMotion = usePrefersReducedMotion();
+ * <motion.div transition={prefersReducedMotion ? { duration: 0 } : undefined} />
+ */
+export declare function usePrefersReducedMotion(): boolean;

package/dist/hooks/usePrefersReducedMotion.js

@@ -0,0 +1,25 @@
+import { ReducedMotion } from "../theme/enums.js";
+import { GalaxyThemeContext } from "../theme/useGalaxyTheme.js";
+import { useMediaQuery } from "./useMediaQuery.js";
+import { useContext } from "react";
+//#region src/hooks/usePrefersReducedMotion.ts
+/**
+* Whether motion should be reduced. The nearest `GalaxyProvider`'s `reducedMotion` wins:
+* `ALWAYS` → `true`, `NEVER` → `false`. With `SYSTEM`, or outside a provider, it follows
+* `prefers-reduced-motion`. `false` on the server and during hydration unless a provider forces it.
+*
+* @returns Whether motion should be reduced
+*
+* @example
+* const prefersReducedMotion = usePrefersReducedMotion();
+* <motion.div transition={prefersReducedMotion ? { duration: 0 } : undefined} />
+*/
+function usePrefersReducedMotion() {
+	const reducedMotion = useContext(GalaxyThemeContext)?.reducedMotion ?? ReducedMotion.SYSTEM;
+	const isSystemReduced = useMediaQuery("(prefers-reduced-motion: reduce)");
+	if (reducedMotion === ReducedMotion.ALWAYS) return true;
+	if (reducedMotion === ReducedMotion.NEVER) return false;
+	return isSystemReduced;
+}
+//#endregion
+export { usePrefersReducedMotion };

package/dist/hooks/useResize.d.ts

@@ -1,86 +1,66 @@
+import { type MouseEvent as ReactMouseEvent } from "react";
 /**
- * Which edge or corner stays put while dragging. Edge anchors resize one
- * dimension; corner anchors resize both.
+ * Which edge or corner the resize handle sits on; the opposite edge or corner stays put while
+ * dragging. Edge anchors resize one dimension; corner anchors resize both.
  */
-export type ResizeAnchor = "left" | "right" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
+export declare enum ResizeAnchor {
+    /** Handle on the left; the right edge is fixed. Resizes width. */
+    LEFT = "LEFT",
+    /** Handle on the right; the left edge is fixed. Resizes width. */
+    RIGHT = "RIGHT",
+    /** Handle on top; the bottom edge is fixed. Resizes height. */
+    TOP = "TOP",
+    /** Handle on the bottom; the top edge is fixed. Resizes height. */
+    BOTTOM = "BOTTOM",
+    /** Handle top-left; the bottom-right corner is fixed. Resizes both. */
+    TOP_LEFT = "TOP_LEFT",
+    /** Handle top-right; the bottom-left corner is fixed. Resizes both. */
+    TOP_RIGHT = "TOP_RIGHT",
+    /** Handle bottom-left; the top-right corner is fixed. Resizes both. */
+    BOTTOM_LEFT = "BOTTOM_LEFT",
+    /** Handle bottom-right; the top-left corner is fixed. Resizes both. */
+    BOTTOM_RIGHT = "BOTTOM_RIGHT"
+}
+/** Options for `useResize`. */
 export interface UseResizeProps {
-    /**
-     * Current width of the element
-     */
+    /** Current width of the element in pixels; read when a drag starts. */
     currentWidth: number;
-    /**
-     * Current height of the element
-     */
+    /** Current height of the element in pixels; read when a drag starts. */
     currentHeight: number;
-    /**
-     * Callback when width changes
-     */
+    /** Called with the new width while dragging an edge that resizes width. */
     onWidthChange?: (width: number) => void;
-    /**
-     * Callback when height changes
-     */
+    /** Called with the new height while dragging an edge that resizes height. */
     onHeightChange?: (height: number) => void;
-    /**
-     * Callback when both dimensions change (for corner resizing)
-     */
+    /** Called with both dimensions while dragging; when set it replaces `onWidthChange`/`onHeightChange`. */
     onSizeChange?: (width: number, height: number) => void;
-    /**
-     * Minimum width constraint
-     */
+    /** Minimum width in pixels. @default 0 */
     minWidth?: number;
-    /**
-     * Maximum width constraint
-     */
+    /** Maximum width in pixels. @default Infinity */
     maxWidth?: number;
-    /**
-     * Minimum height constraint
-     */
+    /** Minimum height in pixels. @default 0 */
     minHeight?: number;
-    /**
-     * Maximum height constraint
-     */
+    /** Maximum height in pixels. @default Infinity */
     maxHeight?: number;
-    /**
-     * Which edge(s) are anchored/fixed. The resize handle is on the opposite side.
-     * - "left": right edge is fixed, handle on left
-     * - "right": left edge is fixed, handle on right
-     * - "top": bottom edge is fixed, handle on top
-     * - "bottom": top edge is fixed, handle on bottom
-     * - "top-left": bottom-right corner is fixed, handle on top-left
-     * - "top-right": bottom-left corner is fixed, handle on top-right
-     * - "bottom-left": top-right corner is fixed, handle on bottom-left
-     * - "bottom-right": top-left corner is fixed, handle on bottom-right
-     */
+    /** Where the resize handle sits; the opposite edge or corner is fixed. */
     anchor: ResizeAnchor;
 }
 /**
- * Unified resize hook that handles horizontal, vertical, and diagonal resizing.
+ * Horizontal, vertical, and diagonal drag-resizing. Returns a `mousedown` handler for the resize
+ * handle; document listeners attach on mousedown only, so the hook is SSR-safe.
  *
- * The anchor parameter determines which edge(s) are fixed:
- * - For edge anchors (left/right/top/bottom), only that dimension is resized
- * - For corner anchors (top-left/top-right/bottom-left/bottom-right), both dimensions are resized
+ * The anchor determines what resizes:
+ * - Edge anchors (`LEFT` / `RIGHT` / `TOP` / `BOTTOM`) resize one dimension.
+ * - Corner anchors (`TOP_LEFT` / `TOP_RIGHT` / `BOTTOM_LEFT` / `BOTTOM_RIGHT`) resize both.
  *
  * @example
- * // Resize from left edge (right edge is fixed)
- * const handleResize = useResize({
- *   currentWidth: width,
- *   anchor: "left",
- *   onWidthChange: setWidth,
- *   minWidth: 100,
- *   maxWidth: 1000,
- * });
- *
- * @example
- * // Resize from top-left corner (bottom-right corner is fixed)
- * const handleResize = useResize({
+ * // Resize from the left edge (right edge is fixed)
+ * const onResizeStart = useResize({
  *   currentWidth: width,
  *   currentHeight: height,
- *   anchor: "top-left",
- *   onSizeChange: (w, h) => { setWidth(w); setHeight(h); },
+ *   anchor: ResizeAnchor.LEFT,
+ *   onWidthChange: setWidth,
  *   minWidth: 100,
  *   maxWidth: 1000,
- *   minHeight: 100,
- *   maxHeight: 1000,
  * });
  */
-export declare const useResize: ({ currentWidth, currentHeight, onWidthChange, onHeightChange, onSizeChange, minWidth, maxWidth, minHeight, maxHeight, anchor, }: UseResizeProps) => (e: React.MouseEvent) => void;
+export declare function useResize({ currentWidth, currentHeight, onWidthChange, onHeightChange, onSizeChange, minWidth, maxWidth, minHeight, maxHeight, anchor, }: UseResizeProps): (event: ReactMouseEvent) => void;

package/dist/hooks/useResize.js

@@ -1,36 +1,48 @@
 import { useCallback, useRef } from "react";
 //#region src/hooks/useResize.ts
 /**
-* Unified resize hook that handles horizontal, vertical, and diagonal resizing.
-*
-* The anchor parameter determines which edge(s) are fixed:
-* - For edge anchors (left/right/top/bottom), only that dimension is resized
-* - For corner anchors (top-left/top-right/bottom-left/bottom-right), both dimensions are resized
+* Which edge or corner the resize handle sits on; the opposite edge or corner stays put while
+* dragging. Edge anchors resize one dimension; corner anchors resize both.
+*/
+var ResizeAnchor = /* @__PURE__ */ function(ResizeAnchor) {
+	/** Handle on the left; the right edge is fixed. Resizes width. */
+	ResizeAnchor["LEFT"] = "LEFT";
+	/** Handle on the right; the left edge is fixed. Resizes width. */
+	ResizeAnchor["RIGHT"] = "RIGHT";
+	/** Handle on top; the bottom edge is fixed. Resizes height. */
+	ResizeAnchor["TOP"] = "TOP";
+	/** Handle on the bottom; the top edge is fixed. Resizes height. */
+	ResizeAnchor["BOTTOM"] = "BOTTOM";
+	/** Handle top-left; the bottom-right corner is fixed. Resizes both. */
+	ResizeAnchor["TOP_LEFT"] = "TOP_LEFT";
+	/** Handle top-right; the bottom-left corner is fixed. Resizes both. */
+	ResizeAnchor["TOP_RIGHT"] = "TOP_RIGHT";
+	/** Handle bottom-left; the top-right corner is fixed. Resizes both. */
+	ResizeAnchor["BOTTOM_LEFT"] = "BOTTOM_LEFT";
+	/** Handle bottom-right; the top-left corner is fixed. Resizes both. */
+	ResizeAnchor["BOTTOM_RIGHT"] = "BOTTOM_RIGHT";
+	return ResizeAnchor;
+}({});
+/**
+* Horizontal, vertical, and diagonal drag-resizing. Returns a `mousedown` handler for the resize
+* handle; document listeners attach on mousedown only, so the hook is SSR-safe.
 *
-* @example
-* // Resize from left edge (right edge is fixed)
-* const handleResize = useResize({
-*   currentWidth: width,
-*   anchor: "left",
-*   onWidthChange: setWidth,
-*   minWidth: 100,
-*   maxWidth: 1000,
-* });
+* The anchor determines what resizes:
+* - Edge anchors (`LEFT` / `RIGHT` / `TOP` / `BOTTOM`) resize one dimension.
+* - Corner anchors (`TOP_LEFT` / `TOP_RIGHT` / `BOTTOM_LEFT` / `BOTTOM_RIGHT`) resize both.
 *
 * @example
-* // Resize from top-left corner (bottom-right corner is fixed)
-* const handleResize = useResize({
+* // Resize from the left edge (right edge is fixed)
+* const onResizeStart = useResize({
 *   currentWidth: width,
 *   currentHeight: height,
-*   anchor: "top-left",
-*   onSizeChange: (w, h) => { setWidth(w); setHeight(h); },
+*   anchor: ResizeAnchor.LEFT,
+*   onWidthChange: setWidth,
 *   minWidth: 100,
 *   maxWidth: 1000,
-*   minHeight: 100,
-*   maxHeight: 1000,
 * });
 */
-var useResize = ({ currentWidth, currentHeight, onWidthChange, onHeightChange, onSizeChange, minWidth = 0, maxWidth = Infinity, minHeight = 0, maxHeight = Infinity, anchor }) => {
+function useResize({ currentWidth, currentHeight, onWidthChange, onHeightChange, onSizeChange, minWidth = 0, maxWidth = Number.POSITIVE_INFINITY, minHeight = 0, maxHeight = Number.POSITIVE_INFINITY, anchor }) {
 	const isResizingRef = useRef(false);
 	const startXRef = useRef(0);
 	const startYRef = useRef(0);
@@ -43,31 +55,31 @@ var useResize = ({ currentWidth, currentHeight, onWidthChange, onHeightChange, o
 		let widthDelta = 0;
 		let heightDelta = 0;
 		switch (anchor) {
-			case "left":
+			case "LEFT":
 				widthDelta = deltaX;
 				break;
-			case "right":
+			case "RIGHT":
 				widthDelta = -deltaX;
 				break;
-			case "top":
+			case "TOP":
 				heightDelta = deltaY;
 				break;
-			case "bottom":
+			case "BOTTOM":
 				heightDelta = -deltaY;
 				break;
-			case "top-left":
+			case "TOP_LEFT":
 				widthDelta = deltaX;
 				heightDelta = deltaY;
 				break;
-			case "top-right":
+			case "TOP_RIGHT":
 				widthDelta = -deltaX;
 				heightDelta = deltaY;
 				break;
-			case "bottom-left":
+			case "BOTTOM_LEFT":
 				widthDelta = deltaX;
 				heightDelta = -deltaY;
 				break;
-			case "bottom-right":
+			case "BOTTOM_RIGHT":
 				widthDelta = -deltaX;
 				heightDelta = -deltaY;
 				break;
@@ -109,6 +121,6 @@ var useResize = ({ currentWidth, currentHeight, onWidthChange, onHeightChange, o
 		currentHeight,
 		handleMouseMove
 	]);
-};
+}
 //#endregion
-export { useResize };
+export { ResizeAnchor, useResize };