@neut/ui 0.0.1 → 0.0.2

package/README.md

@@ -36,8 +36,7 @@
 
 ```css
 @import "tailwindcss";
-@import "./styles/animate.css";
-@import "./styles/toast.css";
+@import "../node_modules/@neut/ui/dist/ui.css";
 ```
 
 除了样式文件外，还需要安装样式合并依赖`tailwind-merge`及样式定义依赖`class-variance-authority`：
@@ -79,26 +78,28 @@ bun i lucide-solid
 本组件库也支持作为依赖安装：
 
 ```bash
-bun i @dome/ui
+bun i @neut/ui
 ```
 
 安装后需要在根样式文件中导入样式及注册样式资源：
 
 ```css
-@import "../node_modules/@dome/ui/dist/styles/index.css";
-@source "../node_modules/@dome/ui/dist";
+@import "../node_modules/@neut/ui/dist/styles/index.css";
+@source "../node_modules/@neut/ui/dist";
 ```
 
 然后即可如同其他组件库一样导入并使用组件：
 
 ```tsx
-import { Button } from "@dome/ui";
+import { Button } from "@neut/ui";
 
 const App = () => {
   return <Button>Click me</Button>;
 };
 ```
 
+组件库的安装可以参考示例：https://github.com/thep0y/neut/tree/main/example
+
 ## 参考项目
 
 - shadcn: https://ui.shadcn.com/docs/installation

package/dist/components/accordion/Accordion/Accordion.context.d.ts

@@ -1,17 +1,16 @@
 import { ParentProps } from 'solid-js';
-interface AccordionContextValue<T> {
+import { AccordionValue } from './Accordion.types';
+interface AccordionContextValue {
     orientation: "horizontal" | "vertical";
-    isOpen: (index: number) => boolean;
-    toggle: (index: number) => void;
-    registerItem: (value?: T) => number;
-    unregisterItem: (index: number) => void;
+    isOpen: (value: string | number) => boolean;
+    toggle: (value: string | number) => void;
 }
-export declare function AccordionProvider<T>(props: ParentProps & {
+export declare function AccordionProvider(props: ParentProps & {
     orientation: "horizontal" | "vertical";
-    defaultValue?: T[];
-    value?: T[];
+    defaultValue?: AccordionValue[];
+    value?: AccordionValue[];
     multiple?: boolean;
-    onValueChange?: (value: T[]) => void;
+    onValueChange?: (value: (string | number)[]) => void;
 }): import("solid-js").JSX.Element;
-export declare const useAccordionContext: <T extends string | number>() => AccordionContextValue<T>;
+export declare const useAccordionContext: () => AccordionContextValue;
 export {};

package/dist/components/accordion/Accordion/Accordion.context.js

@@ -4,32 +4,28 @@ import { createStore as r, produce as i } from "solid-js/store";
 //#region src/components/accordion/Accordion/Accordion.context.tsx
 var a = t();
 function o(t) {
-	let [n, o] = r([]), s = (e) => {
-		let r = Symbol(), i = e === void 0 ? !1 : (t.defaultValue ?? []).includes(e), a = n.length;
-		return o(n.length, {
-			id: r,
-			value: e,
-			isOpen: i
-		}), a;
-	}, c = (e) => n[e].isOpen ?? !1, l = (e) => {
-		o((t) => t.filter((t, n) => n !== e));
-	}, u = (e) => {
-		t.multiple ? o(e, "isOpen", (e) => !e) : o(i((n) => {
-			let r = n[e], i = !r.isOpen;
-			r.isOpen = i, i && n.forEach((t, n) => {
-				n !== e && (t.isOpen = !1);
-			}), t.onValueChange?.(n.filter((e) => e.isOpen && e.value).map(({ value: e }) => e));
-		}));
-	};
+	let [n, o] = r((t.defaultValue ?? []).reduce((e, t) => (e[String(t)] = t, e), {}));
 	return e(a.Provider, {
-		get value() {
-			return {
-				orientation: t.orientation,
-				isOpen: c,
-				toggle: u,
-				registerItem: s,
-				unregisterItem: l
-			};
+		value: {
+			get orientation() {
+				return t.orientation;
+			},
+			isOpen: (e) => t.value ? t.value.includes(e) : n[String(e)] !== void 0,
+			toggle: (e) => {
+				if (t.value) {
+					let n = t.value, r = n.includes(e) ? n.filter((t) => t !== e) : t.multiple ? [...n, e] : [e];
+					t.onValueChange?.(r);
+					return;
+				}
+				let r = String(e);
+				t.multiple ? o(r, (t) => t === void 0 ? e : void 0) : o(i((t) => {
+					let n = t[r] !== void 0;
+					for (let e in t) t[e] = void 0;
+					n || (t[r] = e);
+				}));
+				let a = Object.values(n).filter((e) => e !== void 0);
+				t.onValueChange?.(a);
+			}
 		},
 		get children() {
 			return t.children;

package/dist/components/accordion/Accordion/Accordion.d.ts

@@ -1,2 +1,2 @@
 import { AccordionProps } from './Accordion.types';
-export declare const Accordion: <T extends string | number>(props: AccordionProps<T>) => import("solid-js").JSX.Element;
+export declare const Accordion: (props: AccordionProps) => import("solid-js").JSX.Element;

package/dist/components/accordion/Accordion/Accordion.js

@@ -1,10 +1,11 @@
 import { clsx as e } from "../../../lib/utils/clsx.js";
 import { AccordionProvider as t } from "./Accordion.context.js";
-import { createComponent as n, insert as r, mergeProps as i, spread as a, template as o } from "solid-js/web";
-import { mergeProps as s, splitProps as c } from "solid-js";
+import { useAccordion as n } from "./useAccordion.js";
+import { addEventListener as r, createComponent as i, delegateEvents as a, insert as o, mergeProps as s, spread as c, template as l } from "solid-js/web";
+import { mergeProps as u, splitProps as d } from "solid-js";
 //#region src/components/accordion/Accordion/Accordion.tsx
-var l = /* @__PURE__ */ o("<section data-slot=accordion>"), u = (o) => {
-	let [u, d] = c(s({
+var f = /* @__PURE__ */ l("<section data-slot=accordion>"), p = (a) => {
+	let [l, p] = d(u({
 		hiddenUntilFound: !1,
 		loopFocus: !0,
 		multiple: !1,
@@ -12,7 +13,7 @@ var l = /* @__PURE__ */ o("<section data-slot=accordion>"), u = (o) => {
 		orientation: "vertical",
 		keepMounted: !1,
 		dir: "ltr"
-	}, o), [
+	}, a), [
 		"defaultValue",
 		"value",
 		"onValueChange",
@@ -26,40 +27,41 @@ var l = /* @__PURE__ */ o("<section data-slot=accordion>"), u = (o) => {
 		"keepMounted",
 		"dir",
 		"children"
-	]);
+	]), { handleKeyDown: m } = n();
 	return (() => {
-		var s = l();
-		return a(s, i({
+		var n = f();
+		return r(n, "keydown", m, !0), c(n, s({
 			get class() {
-				return e("flex", "w-full", "flex-col", "max-w-lg", u.class);
+				return e("flex", "w-full", "flex-col", "max-w-lg", l.class);
 			},
 			get "data-orientation"() {
-				return u.orientation;
+				return l.orientation;
 			},
 			get dir() {
-				return u.dir;
+				return l.dir;
 			}
-		}, d), !1, !0), r(s, n(t, {
+		}, p), !1, !0), o(n, i(t, {
 			get orientation() {
-				return u.orientation;
+				return l.orientation;
 			},
 			get defaultValue() {
-				return o.defaultValue;
+				return a.defaultValue;
 			},
 			get value() {
-				return o.value;
+				return a.value;
 			},
 			get multiple() {
-				return o.multiple;
+				return a.multiple;
 			},
 			get onValueChange() {
-				return o.onValueChange;
+				return a.onValueChange;
 			},
 			get children() {
-				return u.children;
+				return l.children;
 			}
-		})), s;
+		})), n;
 	})();
 };
+a(["keydown"]);
 //#endregion
-export { u as Accordion };
+export { p as Accordion };

package/dist/components/accordion/Accordion/Accordion.types.d.ts

@@ -1,8 +1,9 @@
 import { BaseProps, PolymorphicProps } from '../../../types';
-interface BaseAccordionProps<T> extends BaseProps {
-    defaultValue?: T[];
-    value?: T[];
-    onValueChange?: (value: T[]) => void;
+export type AccordionValue = string | number;
+interface BaseAccordionProps extends BaseProps {
+    defaultValue?: AccordionValue[];
+    value?: AccordionValue[];
+    onValueChange?: (value: AccordionValue[]) => void;
     hiddenUntilFound?: boolean;
     loopFocus?: boolean;
     multiple?: boolean;
@@ -10,10 +11,10 @@ interface BaseAccordionProps<T> extends BaseProps {
     orientation?: "horizontal" | "vertical";
     keepMounted?: boolean;
 }
-export type AccordionProps<T> = PolymorphicProps<"section", BaseAccordionProps<T>, false>;
-export interface ItemEntry<T> {
+export type AccordionProps = PolymorphicProps<"section", BaseAccordionProps, false>;
+export interface ItemEntry {
     id: symbol;
-    value?: T;
+    value?: AccordionValue;
     isOpen: boolean;
 }
 export {};

package/dist/components/accordion/Accordion/index.d.ts

@@ -1 +1,3 @@
 export { Accordion } from './Accordion';
+export * from './Accordion.types';
+export * from './Accordion.context';

package/dist/components/accordion/Accordion/useAccordion.d.ts

@@ -0,0 +1,3 @@
+export declare const useAccordion: () => {
+    handleKeyDown: (e: KeyboardEvent) => void;
+};

package/dist/components/accordion/Accordion/useAccordion.js

@@ -0,0 +1,32 @@
+//#region src/components/accordion/Accordion/useAccordion.ts
+var e = () => ({ handleKeyDown: (e) => {
+	if (![
+		"ArrowDown",
+		"ArrowUp",
+		"Home",
+		"End"
+	].includes(e.key)) return;
+	let t = document.activeElement;
+	if (!t || t.getAttribute("data-accordion-trigger") === null) return;
+	e.preventDefault();
+	let n = e.currentTarget, r = Array.from(n.querySelectorAll("[data-accordion-trigger]:not([disabled])")), i = r.indexOf(t);
+	if (i === -1) return;
+	let a = i;
+	switch (e.key) {
+		case "ArrowDown":
+			a = (i + 1) % r.length;
+			break;
+		case "ArrowUp":
+			a = (i - 1 + r.length) % r.length;
+			break;
+		case "Home":
+			a = 0;
+			break;
+		case "End":
+			a = r.length - 1;
+			break;
+	}
+	r[a]?.focus();
+} });
+//#endregion
+export { e as useAccordion };

package/dist/components/accordion/AccordionContent/AccordionContent.js

@@ -2,52 +2,43 @@ import { clsx as e } from "../../../lib/utils/clsx.js";
 import { useAccordionContext as t } from "../Accordion/Accordion.context.js";
 import { useAccordionItemContext as n } from "../AccordionItem/AccordionItem.context.js";
 import { className as r, createComponent as i, effect as a, insert as o, mergeProps as s, setAttribute as c, spread as l, template as u, use as d } from "solid-js/web";
-import { Show as f, createEffect as p, createSignal as m, onCleanup as h, splitProps as g } from "solid-js";
+import { Show as f, createEffect as p, createSignal as m, on as h, splitProps as g, untrack as _ } from "solid-js";
 //#region src/components/accordion/AccordionContent/AccordionContent.tsx
-var _ = /* @__PURE__ */ u("<div class=\"overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up\"data-slot=accordion-content><div>"), v = (u) => {
-	let { orientation: v } = t(), { index: y, open: b } = n(), [x, S] = g(u, [
+var v = /* @__PURE__ */ u("<div role=region class=\"overflow-hidden text-sm data-[open=true]:animate-accordion-down data-[open=false]:animate-accordion-up\"data-slot=accordion-content><div>"), y = (u) => {
+	let { orientation: y } = t(), { triggerId: b, open: x, contentId: S } = n(), [C, w] = g(u, [
 		"hiddenUntilFound",
 		"keepMounted",
 		"class",
 		"classList",
 		"children",
 		"style"
-	]), [C, w] = m(b()), [T, E] = m(null), D, O;
-	return p(() => {
-		b() && w(!0);
-	}), p(() => {
-		if (C() && D) {
-			let e = D.scrollHeight;
-			E(e);
-		}
-	}), p(() => {
-		if (!b() && O) {
-			let e = O, t = (e) => {
-				e.animationName === "accordion-up" && (w(!1), E(null));
-			};
-			e.addEventListener("animationend", t), h(() => e.removeEventListener("animationend", t));
-		}
-	}), i(f, {
+	]), [T, E] = m(_(x)), [D, O] = m(null), k;
+	p(h(x, (e) => {
+		e && E(!0);
+	})), p(() => {
+		T() && k && O(k.scrollHeight);
+	});
+	let A = (e) => {
+		!x() && e.animationName === "accordion-up" && (E(!1), O(null));
+	};
+	return i(f, {
 		get when() {
-			return C();
+			return T();
 		},
 		get children() {
-			var t = _(), n = t.firstChild, i = O;
-			typeof i == "function" ? d(i, t) : O = t, c(t, "data-orientation", v), c(t, "data-index", y), l(t, s({
+			var t = v(), n = t.firstChild;
+			t.addEventListener("animationend", A), c(t, "id", S), c(t, "aria-labelledby", b), c(t, "data-orientation", y), l(t, s({
 				get "data-open"() {
-					return b() ? "" : null;
-				},
-				get "data-closed"() {
-					return b() ? null : "";
+					return x() ? "true" : "false";
 				},
 				get style() {
-					return { "--accordion-panel-height": T() ? `${T()}px` : "auto" };
+					return { "--accordion-panel-height": D() === null ? "auto" : `${D()}px` };
 				}
-			}, S), !1, !0);
-			var u = D;
-			return typeof u == "function" ? d(u, n) : D = n, o(n, () => x.children), a(() => r(n, e("pb-2.5 pt-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4", x.class))), t;
+			}, w), !1, !0);
+			var i = k;
+			return typeof i == "function" ? d(i, n) : k = n, o(n, () => C.children), a(() => r(n, e("pb-2.5 pt-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4", C.class))), t;
 		}
 	});
 };
 //#endregion
-export { v as AccordionContent };
+export { y as AccordionContent };

package/dist/components/accordion/AccordionItem/AccordionItem.context.d.ts

@@ -1,13 +1,11 @@
-import { ParentProps } from 'solid-js';
+import { AccordionValue } from '../Accordion';
 interface AccordionItemContextValue {
-    index: number;
+    value: AccordionValue;
+    triggerId: string;
+    contentId: string;
     open: () => boolean;
     disabled?: boolean;
 }
-export declare function AccordionItemProvider(props: ParentProps & {
-    index: number;
-    open: () => boolean;
-    disabled?: boolean;
-}): import("solid-js").JSX.Element;
+export declare const AccordionItemContext: import('solid-js').Context<AccordionItemContextValue | undefined>;
 export declare const useAccordionItemContext: () => AccordionItemContextValue;
 export {};

package/dist/components/accordion/AccordionItem/AccordionItem.context.js

@@ -1,25 +1,9 @@
-import { createComponent as e } from "solid-js/web";
-import { createContext as t, useContext as n } from "solid-js";
+import { createContext as e, useContext as t } from "solid-js";
 //#region src/components/accordion/AccordionItem/AccordionItem.context.tsx
-var r = t();
-function i(t) {
-	return e(r.Provider, {
-		get value() {
-			return {
-				index: t.index,
-				open: t.open,
-				disabled: t.disabled
-			};
-		},
-		get children() {
-			return t.children;
-		}
-	});
-}
-var a = () => {
-	let e = n(r);
+var n = e(), r = () => {
+	let e = t(n);
 	if (!e) throw Error("useAccordionItemContext must be used in AccordionProvider");
 	return e;
 };
 //#endregion
-export { i as AccordionItemProvider, a as useAccordionItemContext };
+export { n as AccordionItemContext, r as useAccordionItemContext };

package/dist/components/accordion/AccordionItem/AccordionItem.d.ts

@@ -1,2 +1,2 @@
 import { AccordionItemProps } from './AccordionItem.types';
-export declare const AccordionItem: <T extends string | number>(props: AccordionItemProps<T>) => import("solid-js").JSX.Element;
+export declare const AccordionItem: (props: AccordionItemProps) => import("solid-js").JSX.Element;

package/dist/components/accordion/AccordionItem/AccordionItem.js

@@ -1,43 +1,42 @@
 import { clsx as e } from "../../../lib/utils/clsx.js";
 import { useAccordionContext as t } from "../Accordion/Accordion.context.js";
-import { AccordionItemProvider as n } from "./AccordionItem.context.js";
+import { AccordionItemContext as n } from "./AccordionItem.context.js";
 import { createComponent as r, insert as i, mergeProps as a, setAttribute as o, spread as s, template as c } from "solid-js/web";
-import { onCleanup as l, splitProps as u } from "solid-js";
+import { createUniqueId as l, splitProps as u } from "solid-js";
 //#region src/components/accordion/AccordionItem/AccordionItem.tsx
 var d = /* @__PURE__ */ c("<div data-slot=accordion-item>"), f = (c) => {
-	let { orientation: f, isOpen: p, registerItem: m, unregisterItem: h } = t(), [g, _] = u(c, [
+	let { orientation: f, isOpen: p } = t(), [m, h] = u(c, [
 		"value",
 		"onOpenChange",
 		"disabled",
 		"class",
 		"classList",
 		"children"
-	]), v = m(g.value);
-	l(() => h(v));
-	let y = () => p(v);
+	]), g = l(), _ = `accordion-trigger-${g}`, v = `accordion-content-${g}`, y = () => m.value ?? g, b = () => p(y());
 	return (() => {
 		var t = d();
-		return o(t, "data-orientation", f), o(t, "data-index", v), s(t, a({
+		return o(t, "data-orientation", f), s(t, a({
 			get class() {
-				return e("not-last:border-b", g.class);
+				return e("not-last:border-b", m.class);
 			},
 			get "data-open"() {
-				return y() ? "" : null;
-			},
-			get "data-closed"() {
-				return y() ? null : "";
+				return b();
 			},
 			get "data-disabled"() {
 				return c.disabled ? "" : null;
 			}
-		}, _), !1, !0), i(t, r(n, {
-			index: v,
-			open: y,
-			get disabled() {
-				return c.disabled;
+		}, h), !1, !0), i(t, r(n.Provider, {
+			get value() {
+				return {
+					value: y(),
+					triggerId: _,
+					contentId: v,
+					open: b,
+					disabled: c.disabled
+				};
 			},
 			get children() {
-				return g.children;
+				return m.children;
 			}
 		})), t;
 	})();

package/dist/components/accordion/AccordionItem/AccordionItem.types.d.ts

@@ -1,8 +1,9 @@
 import { BaseProps, PolymorphicProps } from '../../../types';
-interface BaseAccordionItemProps<T> extends BaseProps {
-    value?: T;
+import { AccordionValue } from '../Accordion';
+interface BaseAccordionItemProps extends BaseProps {
+    value?: AccordionValue;
     onOpenChange?: (open: boolean) => void;
     disabled?: boolean;
 }
-export type AccordionItemProps<T> = PolymorphicProps<"div", BaseAccordionItemProps<T>, false>;
+export type AccordionItemProps = PolymorphicProps<"div", BaseAccordionItemProps, false>;
 export {};

package/dist/components/accordion/AccordionTrigger/AccordionTrigger.js

@@ -3,35 +3,30 @@ import { useAccordionContext as t } from "../Accordion/Accordion.context.js";
 import { useAccordionItemContext as n } from "../AccordionItem/AccordionItem.context.js";
 import { className as r, createComponent as i, delegateEvents as a, effect as o, insert as s, mergeProps as c, setAttribute as l, spread as u, template as d } from "solid-js/web";
 import { splitProps as f } from "solid-js";
-import { ChevronDown as p, ChevronUp as m } from "lucide-solid";
+import { ChevronDown as p } from "lucide-solid";
 //#region src/components/accordion/AccordionTrigger/AccordionTrigger.tsx
-var h = /* @__PURE__ */ d("<h3 class=flex><button type=button>"), g = (a) => {
-	let { orientation: d, toggle: g } = t(), { index: _, open: v, disabled: y } = n(), [b, x] = f(a, [
+var m = /* @__PURE__ */ d("<h3 class=flex><button type=button data-accordion-trigger>"), h = (a) => {
+	let { orientation: d, toggle: h } = t(), { value: g, open: _, disabled: v, triggerId: y, contentId: b } = n(), [x, S] = f(a, [
 		"nativeButton",
 		"class",
 		"classList",
 		"children"
-	]), S = () => {
-		g(_);
+	]), C = () => {
+		v || h(g);
 	};
 	return (() => {
-		var t = h(), n = t.firstChild;
-		return l(t, "data-orientation", d), l(t, "data-disabled", y ? "" : null), l(t, "data-index", _), u(t, c({
+		var t = m(), n = t.firstChild;
+		return l(t, "data-orientation", d), l(t, "data-disabled", v ? "" : null), u(t, c({ get "data-open"() {
+			return _();
+		} }, S), !1, !0), n.$$click = C, l(n, "id", y), l(n, "aria-controls", b), l(n, "aria-disabled", v), l(n, "data-orientation", d), n.disabled = v, s(n, () => x.children, null), s(n, i(p, {
+			class: "pointer-events-none shrink-0 data-[open=true]:-rotate-180 transition-[rotate] duration-200",
+			"data-slot": "accordion-trigger-icon",
 			get "data-open"() {
-				return v() ? "" : null;
-			},
-			get "data-closed"() {
-				return v() ? null : "";
+				return _();
 			}
-		}, x), !1, !0), n.$$click = S, l(n, "data-orientation", d), l(n, "aria-disabled", y), l(n, "data-index", _), s(n, () => b.children, null), s(n, i(p, {
-			class: "pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden",
-			"data-slot": "accordion-trigger-icon"
-		}), null), s(n, i(m, {
-			class: "pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline",
-			"data-slot": "accordion-trigger-icon"
 		}), null), o((t) => {
-			var i = e("group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring aria-disabled:pointer-events-none aria-disabled:select-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-neutral-500 dark:**:data-[slot=accordion-trigger-icon]:text-neutral-400", b.class), a = v() ? "" : null, o = v();
-			return i !== t.e && r(n, t.e = i), a !== t.t && l(n, "data-panel-open", t.t = a), o !== t.a && l(n, "aria-expanded", t.a = o), t;
+			var i = _(), a = e("group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring aria-disabled:pointer-events-none aria-disabled:select-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-neutral-500 dark:**:data-[slot=accordion-trigger-icon]:text-neutral-400", x.class), o = _();
+			return i !== t.e && l(n, "aria-expanded", t.e = i), a !== t.t && r(n, t.t = a), o !== t.a && l(n, "data-open", t.a = o), t;
 		}, {
 			e: void 0,
 			t: void 0,
@@ -41,4 +36,4 @@ var h = /* @__PURE__ */ d("<h3 class=flex><button type=button>"), g = (a) => {
 };
 a(["click"]);
 //#endregion
-export { g as AccordionTrigger };
+export { h as AccordionTrigger };

package/dist/components/scroll-area/ScrollArea/ScrollArea.context.d.ts

@@ -2,7 +2,7 @@ import { Accessor, Setter } from 'solid-js';
 import { ScrollMetrics } from './ScrollArea.types';
 interface ScrollAreaContextValue {
     hovering: Accessor<boolean>;
-    viewportRef: () => HTMLDivElement;
+    viewportRef: () => HTMLDivElement | undefined;
     dragging: Accessor<"vertical" | "horizontal" | null>;
     setDragging: Setter<"vertical" | "horizontal" | null>;
     vertical: Accessor<ScrollMetrics>;