solid-tiny-ui 0.4.0 → 0.6.0

package/dist/primitives/floating/trigger.jsx

@@ -14,7 +14,7 @@ function Trigger(props) {
 			state.trigger === "hover" && actions.setOpen(false);
 		});
 		makeEventListener(refTrigger, "click", () => {
-			state.trigger === "click" && actions.setOpen(staticData.presenceState() === "closed");
+			state.trigger === "click" && actions.setOpen(staticData.presencePhase() === "idle");
 		});
 	});
 	return <Ref ref={mergeRefs(props.ref, (el) => {

package/dist/primitives/floating/types.d.ts

@@ -16,5 +16,6 @@ interface FloatingUiCoreProps {
     size?: SizeOptions | Derivable<SizeOptions>;
   };
 }
+type CloseableStatus = "closing" | "closed" | "opening" | "opened";
 //#endregion
-export { FloatingUiCoreProps, Placement$1 as Placement };
+export { CloseableStatus, FloatingUiCoreProps, Placement$1 as Placement };

package/dist/primitives/index.d.ts

@@ -1,5 +1,12 @@
 import { ModalCore } from "./modal/index.js";
+import { CloseableStatus, FloatingUiCoreProps, Placement } from "./floating/types.js";
+import { FloatingUiCore } from "./floating/index.js";
 import { AnimatedGroup } from "./animated-group/index.js";
+import { CheckboxCore } from "./checkbox/index.js";
+import { FakeScrollListCore } from "./fake-scroll-list/index.js";
 import { Listbox } from "./listbox/listbox.js";
 import "./listbox/index.js";
-export { AnimatedGroup, Listbox, ModalCore };
+import { PaginationPageType, PaginationPager } from "./pagination/context.js";
+import { PaginationCore } from "./pagination/index.js";
+import { RadioGroupCore } from "./radio-group/index.js";
+export { AnimatedGroup, CheckboxCore, CloseableStatus, FakeScrollListCore, FloatingUiCore, FloatingUiCoreProps, Listbox, ModalCore, PaginationCore, PaginationPageType, PaginationPager, Placement, RadioGroupCore };

package/dist/primitives/index.js

@@ -1,6 +1,11 @@
-import { Listbox } from "./listbox/listbox.js";
-import "./listbox/index.js";
+import { FloatingUiCore } from "./floating/index.js";
 import { ModalCore } from "./modal/index.js";
 import { AnimatedGroup } from "./animated-group/index.js";
+import { CheckboxCore } from "./checkbox/index.js";
+import { FakeScrollListCore } from "./fake-scroll-list/index.js";
+import { Listbox } from "./listbox/listbox.js";
+import "./listbox/index.js";
+import { PaginationCore } from "./pagination/index.js";
+import { RadioGroupCore } from "./radio-group/index.js";
 
-export { AnimatedGroup, Listbox, ModalCore };
+export { AnimatedGroup, CheckboxCore, FakeScrollListCore, FloatingUiCore, Listbox, ModalCore, PaginationCore, RadioGroupCore };

package/dist/primitives/index.jsx

@@ -1,6 +1,11 @@
-import { Listbox } from "./listbox/listbox.jsx";
-import "./listbox/index.jsx";
+import { FloatingUiCore } from "./floating/index.jsx";
 import { ModalCore } from "./modal/index.jsx";
 import { AnimatedGroup } from "./animated-group/index.jsx";
+import { CheckboxCore } from "./checkbox/index.jsx";
+import { FakeScrollListCore } from "./fake-scroll-list/index.jsx";
+import { Listbox } from "./listbox/listbox.jsx";
+import "./listbox/index.jsx";
+import { PaginationCore } from "./pagination/index.jsx";
+import { RadioGroupCore } from "./radio-group/index.jsx";
 
-export { AnimatedGroup, Listbox, ModalCore };
+export { AnimatedGroup, CheckboxCore, FakeScrollListCore, FloatingUiCore, Listbox, ModalCore, PaginationCore, RadioGroupCore };

package/dist/primitives/listbox/listbox.d.ts

@@ -1,14 +1,14 @@
-import * as solid_js7 from "solid-js";
+import * as solid_js1 from "solid-js";
 import { ComponentProps } from "solid-js";
 
 //#region src/primitives/listbox/listbox.d.ts
 declare function Root(props: Omit<ComponentProps<"div">, "role" | "tabIndex" | "tabindex"> & {
   autofocus?: boolean;
-}): solid_js7.JSX.Element;
+}): solid_js1.JSX.Element;
 declare function Item(props: Omit<ComponentProps<"div">, "role" | "tabIndex" | "tabindex"> & {
   focus?: boolean;
   disabled?: boolean;
-}): solid_js7.JSX.Element;
+}): solid_js1.JSX.Element;
 declare const Listbox: typeof Root & {
   Item: typeof Item;
 };

package/dist/primitives/modal/content.d.ts

@@ -1,8 +1,8 @@
-import * as solid_js4 from "solid-js";
+import * as solid_js5 from "solid-js";
 import { ComponentProps } from "solid-js";
 
 //#region src/primitives/modal/content.d.ts
-declare function ContentWrapper(props: ComponentProps<"div">): solid_js4.JSX.Element;
-declare function Content(props: ComponentProps<"div">): solid_js4.JSX.Element;
+declare function ContentWrapper(props: ComponentProps<"div">): solid_js5.JSX.Element;
+declare function Content(props: ComponentProps<"div">): solid_js5.JSX.Element;
 //#endregion
 export { Content, ContentWrapper };

package/dist/primitives/modal/content.js

@@ -5,7 +5,7 @@ import { combineStyle, runSolidEventHandler } from "solid-tiny-utils";
 import { mergeRefs } from "@solid-primitives/refs";
 
 //#region src/primitives/modal/content.tsx
-/** biome-ignore-all lint/a11y/noNoninteractiveElementInteractions: <explanation> */
+/** biome-ignore-all lint/a11y/noNoninteractiveElementInteractions: The modal overlay needs to be interactive to handle close events (click outside, Escape key). */
 var _tmpl$ = /* @__PURE__ */ template(`<div>`), _tmpl$2 = /* @__PURE__ */ template(`<div role=dialog>`);
 function ContentWrapper(props) {
 	const [local, others] = splitProps(props, [
@@ -39,8 +39,7 @@ function ContentWrapper(props) {
 			get style() {
 				return combineStyle({
 					position: "fixed",
-					inset: 0,
-					overflow: "auto"
+					inset: 0
 				}, local.style);
 			},
 			"tabIndex": -1

package/dist/primitives/modal/content.jsx

@@ -4,7 +4,7 @@ import { combineStyle, runSolidEventHandler } from "solid-tiny-utils";
 import { mergeRefs } from "@solid-primitives/refs";
 
 //#region src/primitives/modal/content.tsx
-/** biome-ignore-all lint/a11y/noNoninteractiveElementInteractions: <explanation> */
+/** biome-ignore-all lint/a11y/noNoninteractiveElementInteractions: The modal overlay needs to be interactive to handle close events (click outside, Escape key). */
 function ContentWrapper(props) {
 	const [local, others] = splitProps(props, [
 		"style",
@@ -29,8 +29,7 @@ function ContentWrapper(props) {
 		refWrapper = el;
 	})} style={combineStyle({
 		position: "fixed",
-		inset: 0,
-		overflow: "auto"
+		inset: 0
 	}, local.style)} tabIndex={-1} />;
 }
 function Content(props) {

package/dist/primitives/modal/context.d.ts

@@ -1,76 +1,63 @@
-import * as solid_js16 from "solid-js";
-import * as solid_tiny_context1 from "solid-tiny-context";
-import * as solid_js_store5 from "solid-js/store";
+import * as solid_js37 from "solid-js";
+import { PresencePhase } from "solid-tiny-utils";
+import * as solid_tiny_context7 from "solid-tiny-context";
+import * as solid_js_store17 from "solid-js/store";
 
 //#region src/primitives/modal/context.d.ts
 declare const context: {
   useContext: () => [Readonly<{
-    id: string;
     open: boolean;
     refContent: HTMLElement | null;
-    preventScroll: boolean;
     closeOnClickMask: boolean;
     closeOnEsc: boolean;
   } & {}>, Omit<{}, "setState"> & {
-    setState: solid_js_store5.SetStoreFunction<{
-      id: string;
+    setState: solid_js_store17.SetStoreFunction<{
       open: boolean;
       refContent: HTMLElement | null;
-      preventScroll: boolean;
       closeOnClickMask: boolean;
       closeOnEsc: boolean;
     }>;
   }, {
-    shouldMount: () => boolean;
-    presenceState: () => string;
+    isMounted: () => boolean;
+    presencePhase: () => PresencePhase;
   }];
-  initial(initialState?: Partial<solid_tiny_context1.MaybeSignals<{
-    id: string;
+  initial(initialState?: Partial<solid_tiny_context7.MaybeSignals<{
     open: boolean;
     refContent: HTMLElement | null;
-    preventScroll: boolean;
     closeOnClickMask: boolean;
     closeOnEsc: boolean;
   }>> | undefined): {
     Provider(props: {
-      children?: solid_js16.JSX.Element;
-    }): solid_js16.JSX.Element;
+      children?: solid_js37.JSX.Element;
+    }): solid_js37.JSX.Element;
     value: [Readonly<{
-      id: string;
       open: boolean;
       refContent: HTMLElement | null;
-      preventScroll: boolean;
       closeOnClickMask: boolean;
       closeOnEsc: boolean;
-    } & {}>, Omit<ThisType<solid_tiny_context1.RealContextThis<{
-      id: string;
+    } & {}>, Omit<ThisType<solid_tiny_context7.RealContextThis<{
       open: boolean;
       refContent: HTMLElement | null;
-      preventScroll: boolean;
       closeOnClickMask: boolean;
       closeOnEsc: boolean;
     }, {
-      shouldMount: () => boolean;
-      presenceState: () => string;
+      isMounted: () => boolean;
+      presencePhase: () => PresencePhase;
     }, {}, {}>>, "setState"> & {
-      setState: solid_js_store5.SetStoreFunction<{
-        id: string;
+      setState: solid_js_store17.SetStoreFunction<{
         open: boolean;
         refContent: HTMLElement | null;
-        preventScroll: boolean;
         closeOnClickMask: boolean;
         closeOnEsc: boolean;
       }>;
     }, {
-      shouldMount: () => boolean;
-      presenceState: () => string;
+      isMounted: () => boolean;
+      presencePhase: () => PresencePhase;
     }];
   };
   defaultValue: () => {
-    id: string;
     open: boolean;
     refContent: HTMLElement | null;
-    preventScroll: boolean;
     closeOnClickMask: boolean;
     closeOnEsc: boolean;
   };

package/dist/primitives/modal/context.js

@@ -3,17 +3,15 @@ import { createComponentState } from "solid-tiny-context";
 //#region src/primitives/modal/context.ts
 const context = createComponentState({
 	state: () => ({
-		id: "",
 		open: false,
 		refContent: null,
-		preventScroll: true,
 		closeOnClickMask: false,
 		closeOnEsc: false
 	}),
 	methods: {},
 	nowrapData: () => ({
-		shouldMount: () => false,
-		presenceState: () => "closed"
+		isMounted: () => false,
+		presencePhase: () => "idle"
 	})
 });
 

package/dist/primitives/modal/context.jsx

@@ -3,17 +3,15 @@ import { createComponentState } from "solid-tiny-context";
 //#region src/primitives/modal/context.ts
 const context = createComponentState({
 	state: () => ({
-		id: "",
 		open: false,
 		refContent: null,
-		preventScroll: true,
 		closeOnClickMask: false,
 		closeOnEsc: false
 	}),
 	methods: {},
 	nowrapData: () => ({
-		shouldMount: () => false,
-		presenceState: () => "closed"
+		isMounted: () => false,
+		presencePhase: () => "idle"
 	})
 });
 

package/dist/primitives/modal/index.d.ts

@@ -3,7 +3,8 @@ import { Content, ContentWrapper } from "./content.js";
 import { Mask } from "./mask.js";
 import { Portal } from "./portal.js";
 import { Root } from "./root.js";
-import * as solid_js_store0 from "solid-js/store";
+import * as solid_tiny_utils0 from "solid-tiny-utils";
+import * as solid_js_store3 from "solid-js/store";
 
 //#region src/primitives/modal/index.d.ts
 declare const ModalCore: typeof Root & {
@@ -13,24 +14,20 @@ declare const ModalCore: typeof Root & {
   Content: typeof Content;
   Mask: typeof Mask;
   useContext: () => [Readonly<{
-    id: string;
     open: boolean;
     refContent: HTMLElement | null;
-    preventScroll: boolean;
     closeOnClickMask: boolean;
     closeOnEsc: boolean;
   } & {}>, Omit<{}, "setState"> & {
-    setState: solid_js_store0.SetStoreFunction<{
-      id: string;
+    setState: solid_js_store3.SetStoreFunction<{
       open: boolean;
       refContent: HTMLElement | null;
-      preventScroll: boolean;
       closeOnClickMask: boolean;
       closeOnEsc: boolean;
     }>;
   }, {
-    shouldMount: () => boolean;
-    presenceState: () => string;
+    isMounted: () => boolean;
+    presencePhase: () => solid_tiny_utils0.PresencePhase;
   }];
 };
 //#endregion

package/dist/primitives/modal/portal.js

@@ -7,7 +7,7 @@ function Portal$1(props) {
 	const [, , staticData] = context.useContext();
 	return createComponent(Show, {
 		get when() {
-			return staticData.shouldMount();
+			return staticData.isMounted();
 		},
 		get children() {
 			return createComponent(Portal, {

package/dist/primitives/modal/portal.jsx

@@ -5,7 +5,7 @@ import { Portal } from "solid-js/web";
 //#region src/primitives/modal/portal.tsx
 function Portal$1(props) {
 	const [, , staticData] = context.useContext();
-	return <Show when={staticData.shouldMount()}>
+	return <Show when={staticData.isMounted()}>
       <Portal mount={props.mount} ref={props.ref}>
         {props.children}
       </Portal>

package/dist/primitives/modal/root.d.ts

@@ -1,5 +1,5 @@
 import { context } from "./context.js";
-import * as solid_js3 from "solid-js";
+import * as solid_js7 from "solid-js";
 import { MaybeCallableChild } from "solid-tiny-utils";
 
 //#region src/primitives/modal/root.d.ts
@@ -7,9 +7,8 @@ declare function Root(props: {
   children: MaybeCallableChild<ReturnType<typeof context.useContext>>;
   open?: boolean;
   onOpenChange?: (open: boolean) => void;
-  preventScroll?: boolean;
   closeOnClickMask?: boolean;
   closeOnEsc?: boolean;
-}): solid_js3.JSX.Element;
+}): solid_js7.JSX.Element;
 //#endregion
 export { Root };

package/dist/primitives/modal/root.js

@@ -1,3 +1,4 @@
+import { getAnimationDurationMs } from "../../utils/duration.js";
 import { context } from "./context.js";
 import { createComponent } from "solid-js/web";
 import { createUniqueId } from "solid-js";
@@ -6,22 +7,21 @@ import { callMaybeCallableChild, createPresence, createWatch, mountStyle } from
 //#region src/primitives/modal/root.tsx
 function Root(props) {
 	const Context = context.initial({
-		id: () => `tiny-modal_${createUniqueId()}`,
-		preventScroll: () => props.preventScroll,
 		closeOnClickMask: () => props.closeOnClickMask,
 		closeOnEsc: () => props.closeOnEsc,
 		open: () => props.open
 	});
 	const [state, _, staticData] = Context.value;
-	const [shouldMount, presenceState] = createPresence({
-		show: () => state.open,
-		element: () => state.refContent || void 0
+	const presence = createPresence(() => state.open, {
+		enterDuration: () => getAnimationDurationMs(state.refContent),
+		exitDuration: () => getAnimationDurationMs(state.refContent)
 	});
-	staticData.shouldMount = shouldMount;
-	staticData.presenceState = presenceState;
-	createWatch(() => [shouldMount()], (mounted) => {
-		if (mounted) mountStyle("html body{overflow:hidden}", state.id);
-		else document.querySelector(`#${state.id}`)?.remove();
+	staticData.isMounted = presence.isMounted;
+	staticData.presencePhase = presence.phase;
+	const id = `ps__${createUniqueId()}`;
+	createWatch(() => [presence.isMounted()], ([mounted]) => {
+		if (mounted) mountStyle("html body{overflow:hidden}", id);
+		else document.querySelector(`#${id}`)?.remove();
 	});
 	return createComponent(Context.Provider, { get children() {
 		return callMaybeCallableChild(props.children, ...Context.value);

package/dist/primitives/modal/root.jsx

@@ -1,3 +1,4 @@
+import { getAnimationDurationMs } from "../../utils/duration.jsx";
 import { context } from "./context.jsx";
 import { createUniqueId } from "solid-js";
 import { callMaybeCallableChild, createPresence, createWatch, mountStyle } from "solid-tiny-utils";
@@ -5,22 +6,21 @@ import { callMaybeCallableChild, createPresence, createWatch, mountStyle } from
 //#region src/primitives/modal/root.tsx
 function Root(props) {
 	const Context = context.initial({
-		id: () => `tiny-modal_${createUniqueId()}`,
-		preventScroll: () => props.preventScroll,
 		closeOnClickMask: () => props.closeOnClickMask,
 		closeOnEsc: () => props.closeOnEsc,
 		open: () => props.open
 	});
 	const [state, _, staticData] = Context.value;
-	const [shouldMount, presenceState] = createPresence({
-		show: () => state.open,
-		element: () => state.refContent || void 0
+	const presence = createPresence(() => state.open, {
+		enterDuration: () => getAnimationDurationMs(state.refContent),
+		exitDuration: () => getAnimationDurationMs(state.refContent)
 	});
-	staticData.shouldMount = shouldMount;
-	staticData.presenceState = presenceState;
-	createWatch(() => [shouldMount()], (mounted) => {
-		if (mounted) mountStyle("html body{overflow:hidden}", state.id);
-		else document.querySelector(`#${state.id}`)?.remove();
+	staticData.isMounted = presence.isMounted;
+	staticData.presencePhase = presence.phase;
+	const id = `ps__${createUniqueId()}`;
+	createWatch(() => [presence.isMounted()], ([mounted]) => {
+		if (mounted) mountStyle("html body{overflow:hidden}", id);
+		else document.querySelector(`#${id}`)?.remove();
 	});
 	return <Context.Provider>
       {callMaybeCallableChild(props.children, ...Context.value)}

package/dist/primitives/pagination/context.d.ts

@@ -0,0 +1,89 @@
+import * as solid_js10 from "solid-js";
+import * as solid_tiny_context0 from "solid-tiny-context";
+import * as solid_js_store7 from "solid-js/store";
+
+//#region src/primitives/pagination/context.d.ts
+type PaginationPageType = "page" | "ellipsis-left" | "ellipsis-right";
+interface PaginationPager {
+  type: PaginationPageType;
+  page: number;
+}
+declare const context: {
+  useContext: () => [Readonly<{
+    current: number;
+    total: number;
+    pageSize: number;
+    disabled: boolean;
+    maxVisiblePages: number;
+  } & {
+    totalPages: number;
+    renderedPages: PaginationPager[];
+  }>, Omit<{
+    gotoPage(page: number): void;
+    next(): void;
+    prev(): void;
+  }, "setState" | "totalPages" | "renderedPages"> & {
+    setState: solid_js_store7.SetStoreFunction<{
+      current: number;
+      total: number;
+      pageSize: number;
+      disabled: boolean;
+      maxVisiblePages: number;
+    }>;
+  }, {}];
+  initial(initialState?: Partial<solid_tiny_context0.MaybeSignals<{
+    current: number;
+    total: number;
+    pageSize: number;
+    disabled: boolean;
+    maxVisiblePages: number;
+  }>> | undefined): {
+    Provider(props: {
+      children?: solid_js10.JSX.Element;
+    }): solid_js10.JSX.Element;
+    value: [Readonly<{
+      current: number;
+      total: number;
+      pageSize: number;
+      disabled: boolean;
+      maxVisiblePages: number;
+    } & {
+      totalPages: number;
+      renderedPages: PaginationPager[];
+    }>, Omit<{
+      gotoPage(page: number): void;
+      next(): void;
+      prev(): void;
+    } & ThisType<solid_tiny_context0.RealContextThis<{
+      current: number;
+      total: number;
+      pageSize: number;
+      disabled: boolean;
+      maxVisiblePages: number;
+    }, {}, {
+      totalPages(): number;
+      renderedPages(): PaginationPager[];
+    }, {
+      gotoPage(page: number): void;
+      next(): void;
+      prev(): void;
+    }>>, "setState" | "totalPages" | "renderedPages"> & {
+      setState: solid_js_store7.SetStoreFunction<{
+        current: number;
+        total: number;
+        pageSize: number;
+        disabled: boolean;
+        maxVisiblePages: number;
+      }>;
+    }, {}];
+  };
+  defaultValue: () => {
+    current: number;
+    total: number;
+    pageSize: number;
+    disabled: boolean;
+    maxVisiblePages: number;
+  };
+};
+//#endregion
+export { PaginationPageType, PaginationPager, context };

package/dist/primitives/pagination/context.js

@@ -0,0 +1,88 @@
+import { inRange, max } from "solid-tiny-utils";
+import { createComponentState } from "solid-tiny-context";
+
+//#region src/primitives/pagination/context.ts
+const context = createComponentState({
+	state: () => ({
+		current: 1,
+		total: 1,
+		pageSize: 10,
+		disabled: false,
+		maxVisiblePages: 7
+	}),
+	getters: {
+		totalPages() {
+			return Math.ceil(this.state.total / this.state.pageSize);
+		},
+		renderedPages() {
+			const total = this.state.totalPages;
+			const current = this.state.current;
+			const maxVisiblePages = this.state.maxVisiblePages;
+			const pages = [];
+			if (total <= 1) return [{
+				type: "page",
+				page: 1
+			}];
+			if (total <= maxVisiblePages) {
+				for (let i = 1; i <= total; i++) pages.push({
+					type: "page",
+					page: i
+				});
+				return pages;
+			}
+			pages.push({
+				type: "page",
+				page: 1
+			});
+			const centerCount = maxVisiblePages - 2;
+			let start = max(2, current - Math.floor(centerCount / 2));
+			let end = start + centerCount - 1;
+			if (end >= total) {
+				end = total - 1;
+				start = end - centerCount + 1;
+			}
+			if (start > 2) pages.push({
+				type: "ellipsis-left",
+				page: start - 1
+			});
+			else pages.push({
+				type: "page",
+				page: 2
+			});
+			for (let i = start + 1; i <= end - 1; i++) pages.push({
+				type: "page",
+				page: i
+			});
+			if (end < total - 1) pages.push({
+				type: "ellipsis-right",
+				page: end + 1
+			});
+			else pages.push({
+				type: "page",
+				page: total - 1
+			});
+			pages.push({
+				type: "page",
+				page: total
+			});
+			return pages;
+		}
+	},
+	methods: {
+		gotoPage(page) {
+			if (this.state.disabled) return;
+			const safePage = Math.floor(page);
+			const total = this.state.totalPages;
+			if (inRange(safePage, 1, total)) this.actions.setState("current", safePage);
+		},
+		next() {
+			this.actions.gotoPage(this.state.current + 1);
+		},
+		prev() {
+			this.actions.gotoPage(this.state.current - 1);
+		}
+	}
+});
+
+//#endregion
+export { context };