@envive-ai/react-toolkit 0.2.13 → 0.3.0

package/dist/util/index.cjs

@@ -1,80 +1,9 @@
-const require_chunk = require('../chunk-CbDLau6x.cjs');
-const require_formatPrice = require('../formatPrice-CyfkjZ3R.cjs');
-let react = require("react");
+const require_formatPrice = require('./formatPrice.cjs');
+const require_useScrollDirection = require('./useScrollDirection.cjs');
+const require_useStickyVisibility = require('./useStickyVisibility.cjs');
+const require_colorVar = require('./colorVar.cjs');
 
-//#region src/util/useScrollDirection.ts
-const useScrollDirection = (scrollContainerRef) => {
-	const [scrollDirection, setScrollDirection] = (0, react.useState)(null);
-	const touchStartY = (0, react.useRef)(0);
-	(0, react.useEffect)(() => {
-		const container = scrollContainerRef?.current || window;
-		const touchTarget = scrollContainerRef?.current || document;
-		const handleWheel = (e) => {
-			if (e.deltaY > 0) setScrollDirection("down");
-			else setScrollDirection("up");
-		};
-		const handleTouchStart = (e) => {
-			touchStartY.current = e.touches[0].clientY;
-		};
-		const handleTouchMove = (e) => {
-			const currentTouchY = e.touches[0].clientY;
-			const deltaY = touchStartY.current - currentTouchY;
-			if (Math.abs(deltaY) < 10) return;
-			if (deltaY > 0) setScrollDirection("down");
-			else setScrollDirection("up");
-			touchStartY.current = currentTouchY;
-		};
-		container.addEventListener("wheel", handleWheel, { passive: true });
-		touchTarget.addEventListener("touchstart", handleTouchStart, { passive: true });
-		touchTarget.addEventListener("touchmove", handleTouchMove, { passive: true });
-		return () => {
-			container.removeEventListener("wheel", handleWheel);
-			touchTarget.removeEventListener("touchstart", handleTouchStart);
-			touchTarget.removeEventListener("touchmove", handleTouchMove);
-		};
-	}, [scrollContainerRef]);
-	return scrollDirection;
-};
-
-//#endregion
-//#region src/util/useStickyVisibility.ts
-const useStickyVisibility = () => {
-	const [isVisible, setIsVisible] = (0, react.useState)(true);
-	const toolbarRef = (0, react.useRef)(null);
-	const [toolbarHeight, setToolbarHeight] = (0, react.useState)(0);
-	const [scrollY, setScrollY] = (0, react.useState)(0);
-	const scrollDirection = useScrollDirection();
-	(0, react.useEffect)(() => {
-		const handleScroll = () => {
-			setScrollY(window.scrollY);
-		};
-		window.addEventListener("scroll", handleScroll, { passive: true });
-		return () => window.removeEventListener("scroll", handleScroll);
-	}, []);
-	(0, react.useEffect)(() => {
-		if (toolbarRef.current) setToolbarHeight(toolbarRef.current.offsetHeight);
-	}, []);
-	(0, react.useEffect)(() => {
-		if (scrollDirection === "down" && scrollY > toolbarHeight && toolbarHeight > 0) setIsVisible(false);
-		else setIsVisible(true);
-	}, [
-		scrollDirection,
-		toolbarHeight,
-		scrollY
-	]);
-	return {
-		toolbarRef,
-		isVisible,
-		toolbarHeight
-	};
-};
-
-//#endregion
-//#region src/util/colorVar.ts
-const colorVar = (color) => `var(--spiffy-colors-${color})`;
-
-//#endregion
-exports.colorVar = colorVar;
+exports.colorVar = require_colorVar.colorVar;
 exports.formatPrice = require_formatPrice.formatPrice;
-exports.useScrollDirection = useScrollDirection;
-exports.useStickyVisibility = useStickyVisibility;
+exports.useScrollDirection = require_useScrollDirection.useScrollDirection;
+exports.useStickyVisibility = require_useStickyVisibility.useStickyVisibility;

package/dist/util/index.d.cts

@@ -0,0 +1,5 @@
+import { formatPrice } from "./formatPrice.cjs";
+import { ScrollDirection, useScrollDirection } from "./useScrollDirection.cjs";
+import { useStickyVisibility } from "./useStickyVisibility.cjs";
+import { colorVar } from "./colorVar.cjs";
+export { ScrollDirection, colorVar, formatPrice, useScrollDirection, useStickyVisibility };

package/dist/util/index.d.ts

@@ -0,0 +1,5 @@
+import { formatPrice } from "./formatPrice.js";
+import { ScrollDirection, useScrollDirection } from "./useScrollDirection.js";
+import { useStickyVisibility } from "./useStickyVisibility.js";
+import { colorVar } from "./colorVar.js";
+export { ScrollDirection, colorVar, formatPrice, useScrollDirection, useStickyVisibility };

package/dist/util/index.js

@@ -1,76 +1,6 @@
-import { t as formatPrice } from "../formatPrice-DexQu2aZ.js";
-import { useEffect, useRef, useState } from "react";
+import { formatPrice } from "./formatPrice.js";
+import { useScrollDirection } from "./useScrollDirection.js";
+import { useStickyVisibility } from "./useStickyVisibility.js";
+import { colorVar } from "./colorVar.js";
 
-//#region src/util/useScrollDirection.ts
-const useScrollDirection = (scrollContainerRef) => {
-	const [scrollDirection, setScrollDirection] = useState(null);
-	const touchStartY = useRef(0);
-	useEffect(() => {
-		const container = scrollContainerRef?.current || window;
-		const touchTarget = scrollContainerRef?.current || document;
-		const handleWheel = (e) => {
-			if (e.deltaY > 0) setScrollDirection("down");
-			else setScrollDirection("up");
-		};
-		const handleTouchStart = (e) => {
-			touchStartY.current = e.touches[0].clientY;
-		};
-		const handleTouchMove = (e) => {
-			const currentTouchY = e.touches[0].clientY;
-			const deltaY = touchStartY.current - currentTouchY;
-			if (Math.abs(deltaY) < 10) return;
-			if (deltaY > 0) setScrollDirection("down");
-			else setScrollDirection("up");
-			touchStartY.current = currentTouchY;
-		};
-		container.addEventListener("wheel", handleWheel, { passive: true });
-		touchTarget.addEventListener("touchstart", handleTouchStart, { passive: true });
-		touchTarget.addEventListener("touchmove", handleTouchMove, { passive: true });
-		return () => {
-			container.removeEventListener("wheel", handleWheel);
-			touchTarget.removeEventListener("touchstart", handleTouchStart);
-			touchTarget.removeEventListener("touchmove", handleTouchMove);
-		};
-	}, [scrollContainerRef]);
-	return scrollDirection;
-};
-
-//#endregion
-//#region src/util/useStickyVisibility.ts
-const useStickyVisibility = () => {
-	const [isVisible, setIsVisible] = useState(true);
-	const toolbarRef = useRef(null);
-	const [toolbarHeight, setToolbarHeight] = useState(0);
-	const [scrollY, setScrollY] = useState(0);
-	const scrollDirection = useScrollDirection();
-	useEffect(() => {
-		const handleScroll = () => {
-			setScrollY(window.scrollY);
-		};
-		window.addEventListener("scroll", handleScroll, { passive: true });
-		return () => window.removeEventListener("scroll", handleScroll);
-	}, []);
-	useEffect(() => {
-		if (toolbarRef.current) setToolbarHeight(toolbarRef.current.offsetHeight);
-	}, []);
-	useEffect(() => {
-		if (scrollDirection === "down" && scrollY > toolbarHeight && toolbarHeight > 0) setIsVisible(false);
-		else setIsVisible(true);
-	}, [
-		scrollDirection,
-		toolbarHeight,
-		scrollY
-	]);
-	return {
-		toolbarRef,
-		isVisible,
-		toolbarHeight
-	};
-};
-
-//#endregion
-//#region src/util/colorVar.ts
-const colorVar = (color) => `var(--spiffy-colors-${color})`;
-
-//#endregion
 export { colorVar, formatPrice, useScrollDirection, useStickyVisibility };

package/dist/util/internal.d.cts

@@ -0,0 +1,22 @@
+import { Trim } from "./trim.cjs";
+
+//#region src/util/internal.d.ts
+
+/**
+ * Returns a boolean for whether the string is numeric.
+ *
+ * This type is a workaround for [Microsoft/TypeScript#46109](https://github.com/microsoft/TypeScript/issues/46109#issuecomment-930307987).
+ */
+type IsNumeric<T extends string> = T extends `${number}` ? Trim<T> extends T ? true : false : false;
+/**
+ * Returns a boolean for whether the string is lowercased.
+ */
+type IsLowerCase<T extends string> = T extends Lowercase<T> ? true : false;
+/**
+ * Returns a boolean for whether the string is upper-cased.
+ */
+type IsUpperCase<T extends string> = T extends Uppercase<T> ? true : false;
+type WordSeparators = '-' | '_' | Whitespace;
+type Whitespace = '\u{9}' | '\u{A}' | '\u{B}' | '\u{C}' | '\u{D}' | '\u{20}' | '\u{85}' | '\u{A0}' | '\u{1680}' | '\u{2000}' | '\u{2001}' | '\u{2002}' | '\u{2003}' | '\u{2004}' | '\u{2005}' | '\u{2006}' | '\u{2007}' | '\u{2008}' | '\u{2009}' | '\u{200A}' | '\u{2028}' | '\u{2029}' | '\u{202F}' | '\u{205F}' | '\u{3000}' | '\u{FEFF}';
+//#endregion
+export { IsLowerCase, IsNumeric, IsUpperCase, Whitespace, WordSeparators };

package/dist/util/internal.d.ts

@@ -0,0 +1,22 @@
+import { Trim } from "./trim.js";
+
+//#region src/util/internal.d.ts
+
+/**
+ * Returns a boolean for whether the string is numeric.
+ *
+ * This type is a workaround for [Microsoft/TypeScript#46109](https://github.com/microsoft/TypeScript/issues/46109#issuecomment-930307987).
+ */
+type IsNumeric<T extends string> = T extends `${number}` ? Trim<T> extends T ? true : false : false;
+/**
+ * Returns a boolean for whether the string is lowercased.
+ */
+type IsLowerCase<T extends string> = T extends Lowercase<T> ? true : false;
+/**
+ * Returns a boolean for whether the string is upper-cased.
+ */
+type IsUpperCase<T extends string> = T extends Uppercase<T> ? true : false;
+type WordSeparators = '-' | '_' | Whitespace;
+type Whitespace = '\u{9}' | '\u{A}' | '\u{B}' | '\u{C}' | '\u{D}' | '\u{20}' | '\u{85}' | '\u{A0}' | '\u{1680}' | '\u{2000}' | '\u{2001}' | '\u{2002}' | '\u{2003}' | '\u{2004}' | '\u{2005}' | '\u{2006}' | '\u{2007}' | '\u{2008}' | '\u{2009}' | '\u{200A}' | '\u{2028}' | '\u{2029}' | '\u{202F}' | '\u{205F}' | '\u{3000}' | '\u{FEFF}';
+//#endregion
+export { IsLowerCase, IsNumeric, IsUpperCase, Whitespace, WordSeparators };

package/dist/util/splitWords.d.cts

@@ -0,0 +1,28 @@
+import { IsLowerCase, IsNumeric, IsUpperCase, WordSeparators } from "./internal.cjs";
+
+//#region src/util/splitWords.d.ts
+type SkipEmptyWord<Word extends string> = Word extends '' ? [] : [Word];
+type RemoveLastCharacter<Sentence extends string, Character extends string> = Sentence extends `${infer LeftSide}${Character}` ? SkipEmptyWord<LeftSide> : never;
+/**
+ * Split a string (almost) like Lodash's `_.words()` function.
+ *
+ * - Split on each word that begins with a capital letter.
+ * - Split on each {@link WordSeparators}.
+ * - Split on numeric sequence.
+ *
+ * @example
+ * ```
+ * type Words0 = SplitWords<'helloWorld'>; // ['hello', 'World']
+ * type Words1 = SplitWords<'helloWORLD'>; // ['hello', 'WORLD']
+ * type Words2 = SplitWords<'hello-world'>; // ['hello', 'world']
+ * type Words3 = SplitWords<'--hello the_world'>; // ['hello', 'the', 'world']
+ * type Words4 = SplitWords<'lifeIs42'>; // ['life', 'Is', '42']
+ * ```
+ *
+ * @internal
+ * @category Change case
+ * @category Template literal
+ */
+type SplitWords<Sentence extends string, LastCharacter extends string = '', CurrentWord extends string = ''> = Sentence extends `${infer FirstCharacter}${infer RemainingCharacters}` ? FirstCharacter extends WordSeparators ? [...SkipEmptyWord<CurrentWord>, ...SplitWords<RemainingCharacters>] : LastCharacter extends '' ? SplitWords<RemainingCharacters, FirstCharacter, FirstCharacter> : [false, true] extends [IsNumeric<LastCharacter>, IsNumeric<FirstCharacter>] ? [...SkipEmptyWord<CurrentWord>, ...SplitWords<RemainingCharacters, FirstCharacter, FirstCharacter>] : [true, false] extends [IsNumeric<LastCharacter>, IsNumeric<FirstCharacter>] ? [...SkipEmptyWord<CurrentWord>, ...SplitWords<RemainingCharacters, FirstCharacter, FirstCharacter>] : [true, true] extends [IsNumeric<LastCharacter>, IsNumeric<FirstCharacter>] ? SplitWords<RemainingCharacters, FirstCharacter, `${CurrentWord}${FirstCharacter}`> : [true, true] extends [IsLowerCase<LastCharacter>, IsUpperCase<FirstCharacter>] ? [...SkipEmptyWord<CurrentWord>, ...SplitWords<RemainingCharacters, FirstCharacter, FirstCharacter>] : [true, true] extends [IsUpperCase<LastCharacter>, IsLowerCase<FirstCharacter>] ? [...RemoveLastCharacter<CurrentWord, LastCharacter>, ...SplitWords<RemainingCharacters, FirstCharacter, `${LastCharacter}${FirstCharacter}`>] : SplitWords<RemainingCharacters, FirstCharacter, `${CurrentWord}${FirstCharacter}`> : [...SkipEmptyWord<CurrentWord>];
+//#endregion
+export { SplitWords };

package/dist/util/splitWords.d.ts

@@ -0,0 +1,28 @@
+import { IsLowerCase, IsNumeric, IsUpperCase, WordSeparators } from "./internal.js";
+
+//#region src/util/splitWords.d.ts
+type SkipEmptyWord<Word extends string> = Word extends '' ? [] : [Word];
+type RemoveLastCharacter<Sentence extends string, Character extends string> = Sentence extends `${infer LeftSide}${Character}` ? SkipEmptyWord<LeftSide> : never;
+/**
+ * Split a string (almost) like Lodash's `_.words()` function.
+ *
+ * - Split on each word that begins with a capital letter.
+ * - Split on each {@link WordSeparators}.
+ * - Split on numeric sequence.
+ *
+ * @example
+ * ```
+ * type Words0 = SplitWords<'helloWorld'>; // ['hello', 'World']
+ * type Words1 = SplitWords<'helloWORLD'>; // ['hello', 'WORLD']
+ * type Words2 = SplitWords<'hello-world'>; // ['hello', 'world']
+ * type Words3 = SplitWords<'--hello the_world'>; // ['hello', 'the', 'world']
+ * type Words4 = SplitWords<'lifeIs42'>; // ['life', 'Is', '42']
+ * ```
+ *
+ * @internal
+ * @category Change case
+ * @category Template literal
+ */
+type SplitWords<Sentence extends string, LastCharacter extends string = '', CurrentWord extends string = ''> = Sentence extends `${infer FirstCharacter}${infer RemainingCharacters}` ? FirstCharacter extends WordSeparators ? [...SkipEmptyWord<CurrentWord>, ...SplitWords<RemainingCharacters>] : LastCharacter extends '' ? SplitWords<RemainingCharacters, FirstCharacter, FirstCharacter> : [false, true] extends [IsNumeric<LastCharacter>, IsNumeric<FirstCharacter>] ? [...SkipEmptyWord<CurrentWord>, ...SplitWords<RemainingCharacters, FirstCharacter, FirstCharacter>] : [true, false] extends [IsNumeric<LastCharacter>, IsNumeric<FirstCharacter>] ? [...SkipEmptyWord<CurrentWord>, ...SplitWords<RemainingCharacters, FirstCharacter, FirstCharacter>] : [true, true] extends [IsNumeric<LastCharacter>, IsNumeric<FirstCharacter>] ? SplitWords<RemainingCharacters, FirstCharacter, `${CurrentWord}${FirstCharacter}`> : [true, true] extends [IsLowerCase<LastCharacter>, IsUpperCase<FirstCharacter>] ? [...SkipEmptyWord<CurrentWord>, ...SplitWords<RemainingCharacters, FirstCharacter, FirstCharacter>] : [true, true] extends [IsUpperCase<LastCharacter>, IsLowerCase<FirstCharacter>] ? [...RemoveLastCharacter<CurrentWord, LastCharacter>, ...SplitWords<RemainingCharacters, FirstCharacter, `${LastCharacter}${FirstCharacter}`>] : SplitWords<RemainingCharacters, FirstCharacter, `${CurrentWord}${FirstCharacter}`> : [...SkipEmptyWord<CurrentWord>];
+//#endregion
+export { SplitWords };

package/dist/util/trim.d.cts

@@ -0,0 +1,28 @@
+import { Whitespace } from "./internal.cjs";
+
+//#region src/util/trim.d.ts
+
+/**
+ * Remove spaces from the left side.
+ */
+type TrimLeft<V extends string> = V extends `${Whitespace}${infer R}` ? TrimLeft<R> : V;
+/**
+ * Remove spaces from the right side.
+ */
+type TrimRight<V extends string> = V extends `${infer R}${Whitespace}` ? TrimRight<R> : V;
+/**
+ * Remove leading and trailing spaces from a string.
+ * @example
+ * ```
+ * import type {Trim} from 'type-fest';
+ *
+ * Trim<' foo '>
+ * //=> 'foo'
+ * ```
+ *
+ * @category String
+ * @category Template literal
+ */
+type Trim<V extends string> = TrimLeft<TrimRight<V>>;
+//#endregion
+export { Trim };

package/dist/util/trim.d.ts

@@ -0,0 +1,28 @@
+import { Whitespace } from "./internal.js";
+
+//#region src/util/trim.d.ts
+
+/**
+ * Remove spaces from the left side.
+ */
+type TrimLeft<V extends string> = V extends `${Whitespace}${infer R}` ? TrimLeft<R> : V;
+/**
+ * Remove spaces from the right side.
+ */
+type TrimRight<V extends string> = V extends `${infer R}${Whitespace}` ? TrimRight<R> : V;
+/**
+ * Remove leading and trailing spaces from a string.
+ * @example
+ * ```
+ * import type {Trim} from 'type-fest';
+ *
+ * Trim<' foo '>
+ * //=> 'foo'
+ * ```
+ *
+ * @category String
+ * @category Template literal
+ */
+type Trim<V extends string> = TrimLeft<TrimRight<V>>;
+//#endregion
+export { Trim };

package/dist/util/unknownArray.d.cts

@@ -0,0 +1,28 @@
+//#region src/util/unknownArray.d.ts
+/**
+ * Represents an array with `unknown` value.
+ *
+ * Use case: You want a type that all arrays can be assigned to, but you don't care about the value.
+ *
+ * @example
+ * ```
+ * import type {UnknownArray} from 'type-fest';
+ *
+ * type IsArray<T> = T extends UnknownArray ? true : false;
+ *
+ * type A = IsArray<['foo']>;
+ * //=> true
+ *
+ * type B = IsArray<readonly number[]>;
+ * //=> true
+ *
+ * type C = IsArray<string>;
+ * //=> false
+ * ```
+ *
+ * @category Type
+ * @category Array
+ */
+type UnknownArray = readonly unknown[];
+//#endregion
+export { UnknownArray };

package/dist/util/unknownArray.d.ts

@@ -0,0 +1,28 @@
+//#region src/util/unknownArray.d.ts
+/**
+ * Represents an array with `unknown` value.
+ *
+ * Use case: You want a type that all arrays can be assigned to, but you don't care about the value.
+ *
+ * @example
+ * ```
+ * import type {UnknownArray} from 'type-fest';
+ *
+ * type IsArray<T> = T extends UnknownArray ? true : false;
+ *
+ * type A = IsArray<['foo']>;
+ * //=> true
+ *
+ * type B = IsArray<readonly number[]>;
+ * //=> true
+ *
+ * type C = IsArray<string>;
+ * //=> false
+ * ```
+ *
+ * @category Type
+ * @category Array
+ */
+type UnknownArray = readonly unknown[];
+//#endregion
+export { UnknownArray };

package/dist/util/useScrollDirection.cjs

@@ -0,0 +1,39 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+let react = require("react");
+
+//#region src/util/useScrollDirection.ts
+const useScrollDirection = (scrollContainerRef) => {
+	const [scrollDirection, setScrollDirection] = (0, react.useState)(null);
+	const touchStartY = (0, react.useRef)(0);
+	(0, react.useEffect)(() => {
+		const container = scrollContainerRef?.current || window;
+		const touchTarget = scrollContainerRef?.current || document;
+		const handleWheel = (e) => {
+			if (e.deltaY > 0) setScrollDirection("down");
+			else setScrollDirection("up");
+		};
+		const handleTouchStart = (e) => {
+			touchStartY.current = e.touches[0].clientY;
+		};
+		const handleTouchMove = (e) => {
+			const currentTouchY = e.touches[0].clientY;
+			const deltaY = touchStartY.current - currentTouchY;
+			if (Math.abs(deltaY) < 10) return;
+			if (deltaY > 0) setScrollDirection("down");
+			else setScrollDirection("up");
+			touchStartY.current = currentTouchY;
+		};
+		container.addEventListener("wheel", handleWheel, { passive: true });
+		touchTarget.addEventListener("touchstart", handleTouchStart, { passive: true });
+		touchTarget.addEventListener("touchmove", handleTouchMove, { passive: true });
+		return () => {
+			container.removeEventListener("wheel", handleWheel);
+			touchTarget.removeEventListener("touchstart", handleTouchStart);
+			touchTarget.removeEventListener("touchmove", handleTouchMove);
+		};
+	}, [scrollContainerRef]);
+	return scrollDirection;
+};
+
+//#endregion
+exports.useScrollDirection = useScrollDirection;

package/dist/util/useScrollDirection.d.cts

@@ -0,0 +1,5 @@
+//#region src/util/useScrollDirection.d.ts
+type ScrollDirection = 'up' | 'down';
+declare const useScrollDirection: (scrollContainerRef?: React.RefObject<HTMLElement>) => ScrollDirection;
+//#endregion
+export { ScrollDirection, useScrollDirection };

package/dist/util/useScrollDirection.d.ts

@@ -0,0 +1,5 @@
+//#region src/util/useScrollDirection.d.ts
+type ScrollDirection = 'up' | 'down';
+declare const useScrollDirection: (scrollContainerRef?: React.RefObject<HTMLElement>) => ScrollDirection;
+//#endregion
+export { ScrollDirection, useScrollDirection };

package/dist/util/useScrollDirection.js

@@ -0,0 +1,38 @@
+import { useEffect, useRef, useState } from "react";
+
+//#region src/util/useScrollDirection.ts
+const useScrollDirection = (scrollContainerRef) => {
+	const [scrollDirection, setScrollDirection] = useState(null);
+	const touchStartY = useRef(0);
+	useEffect(() => {
+		const container = scrollContainerRef?.current || window;
+		const touchTarget = scrollContainerRef?.current || document;
+		const handleWheel = (e) => {
+			if (e.deltaY > 0) setScrollDirection("down");
+			else setScrollDirection("up");
+		};
+		const handleTouchStart = (e) => {
+			touchStartY.current = e.touches[0].clientY;
+		};
+		const handleTouchMove = (e) => {
+			const currentTouchY = e.touches[0].clientY;
+			const deltaY = touchStartY.current - currentTouchY;
+			if (Math.abs(deltaY) < 10) return;
+			if (deltaY > 0) setScrollDirection("down");
+			else setScrollDirection("up");
+			touchStartY.current = currentTouchY;
+		};
+		container.addEventListener("wheel", handleWheel, { passive: true });
+		touchTarget.addEventListener("touchstart", handleTouchStart, { passive: true });
+		touchTarget.addEventListener("touchmove", handleTouchMove, { passive: true });
+		return () => {
+			container.removeEventListener("wheel", handleWheel);
+			touchTarget.removeEventListener("touchstart", handleTouchStart);
+			touchTarget.removeEventListener("touchmove", handleTouchMove);
+		};
+	}, [scrollContainerRef]);
+	return scrollDirection;
+};
+
+//#endregion
+export { useScrollDirection };

package/dist/util/useStickyVisibility.cjs

@@ -0,0 +1,38 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_useScrollDirection = require('./useScrollDirection.cjs');
+let react = require("react");
+
+//#region src/util/useStickyVisibility.ts
+const useStickyVisibility = () => {
+	const [isVisible, setIsVisible] = (0, react.useState)(true);
+	const toolbarRef = (0, react.useRef)(null);
+	const [toolbarHeight, setToolbarHeight] = (0, react.useState)(0);
+	const [scrollY, setScrollY] = (0, react.useState)(0);
+	const scrollDirection = require_useScrollDirection.useScrollDirection();
+	(0, react.useEffect)(() => {
+		const handleScroll = () => {
+			setScrollY(window.scrollY);
+		};
+		window.addEventListener("scroll", handleScroll, { passive: true });
+		return () => window.removeEventListener("scroll", handleScroll);
+	}, []);
+	(0, react.useEffect)(() => {
+		if (toolbarRef.current) setToolbarHeight(toolbarRef.current.offsetHeight);
+	}, []);
+	(0, react.useEffect)(() => {
+		if (scrollDirection === "down" && scrollY > toolbarHeight && toolbarHeight > 0) setIsVisible(false);
+		else setIsVisible(true);
+	}, [
+		scrollDirection,
+		toolbarHeight,
+		scrollY
+	]);
+	return {
+		toolbarRef,
+		isVisible,
+		toolbarHeight
+	};
+};
+
+//#endregion
+exports.useStickyVisibility = useStickyVisibility;

package/dist/util/useStickyVisibility.d.cts

@@ -0,0 +1,10 @@
+import * as react0 from "react";
+
+//#region src/util/useStickyVisibility.d.ts
+declare const useStickyVisibility: () => {
+  toolbarRef: react0.RefObject<HTMLDivElement>;
+  isVisible: boolean;
+  toolbarHeight: number;
+};
+//#endregion
+export { useStickyVisibility };

package/dist/util/useStickyVisibility.d.ts

@@ -0,0 +1,10 @@
+import * as react0 from "react";
+
+//#region src/util/useStickyVisibility.d.ts
+declare const useStickyVisibility: () => {
+  toolbarRef: react0.RefObject<HTMLDivElement>;
+  isVisible: boolean;
+  toolbarHeight: number;
+};
+//#endregion
+export { useStickyVisibility };

package/dist/util/useStickyVisibility.js

@@ -0,0 +1,37 @@
+import { useScrollDirection } from "./useScrollDirection.js";
+import { useEffect, useRef, useState } from "react";
+
+//#region src/util/useStickyVisibility.ts
+const useStickyVisibility = () => {
+	const [isVisible, setIsVisible] = useState(true);
+	const toolbarRef = useRef(null);
+	const [toolbarHeight, setToolbarHeight] = useState(0);
+	const [scrollY, setScrollY] = useState(0);
+	const scrollDirection = useScrollDirection();
+	useEffect(() => {
+		const handleScroll = () => {
+			setScrollY(window.scrollY);
+		};
+		window.addEventListener("scroll", handleScroll, { passive: true });
+		return () => window.removeEventListener("scroll", handleScroll);
+	}, []);
+	useEffect(() => {
+		if (toolbarRef.current) setToolbarHeight(toolbarRef.current.offsetHeight);
+	}, []);
+	useEffect(() => {
+		if (scrollDirection === "down" && scrollY > toolbarHeight && toolbarHeight > 0) setIsVisible(false);
+		else setIsVisible(true);
+	}, [
+		scrollDirection,
+		toolbarHeight,
+		scrollY
+	]);
+	return {
+		toolbarRef,
+		isVisible,
+		toolbarHeight
+	};
+};
+
+//#endregion
+export { useStickyVisibility };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@envive-ai/react-toolkit",
-  "version": "0.2.13",
+  "version": "0.3.0",
   "description": "React component library for Envive services.",
   "keywords": [
     "react",
@@ -31,13 +31,14 @@
     "test": "vitest"
   },
   "dependencies": {
-    "@envive-ai/react-hooks": "0.2.9",
     "@tailwindcss/typography": "^0.5.15",
     "classnames": "^2.5.1",
     "react-icons": "^5.0.1",
     "react-indiana-drag-scroll": "^3.0.3-alpha"
   },
   "peerDependencies": {
+    "@envive-ai/react-hooks": "*",
+    "@envive-ai/react-icons": "*",
     "framer-motion": ">=12.23.24",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"

package/src/components/ButtonBase/ButtonBase.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { createElement, useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import { ButtonBaseOverrides, ButtonBaseProps } from './types';
 import { Typography } from '../Typography';
 
@@ -15,6 +15,7 @@ export const ButtonBase = ({
   onClick,
   disablePadding = false,
 }: ButtonBaseProps) => {
+  const RenderedIcon = () => icon;
   const buttonRef = useRef<HTMLButtonElement | null>(null);
 
   const buttonClassName = classNames({
@@ -59,10 +60,7 @@ export const ButtonBase = ({
       data-testid={dataTestId}
       onClick={onClick}
     >
-      {icon &&
-        createElement(icon, {
-          className: iconClassName,
-        })}
+      {icon && <RenderedIcon />}
       <Typography className={textClassName}>{text}</Typography>
     </button>
   );