solid-tiny-ui 0.4.0 → 0.6.0

package/dist/components/form-components/time-picker/trigger.jsx

@@ -0,0 +1,37 @@
+import { VisuallyHidden } from "../../visually-hidden/index.jsx";
+import { Show, createMemo } from "solid-js";
+import { combineClass, combineStyle, dataIf } from "solid-tiny-utils";
+
+//#region src/components/form-components/time-picker/trigger.tsx
+function TimeTrigger(props) {
+	const typeIndex = createMemo(() => [
+		"hour",
+		"minute",
+		"second"
+	].indexOf(props.type));
+	const toStr = (num) => {
+		if (num === null) return "";
+		return num.toString().padStart(2, "0");
+	};
+	return <button class={combineClass("tiny-time-picker-trigger tiny-time-picker-trigger-vars", props.class)} data-disabled={dataIf(props.disabled)} data-size={props.size} style={combineStyle({}, props.style)} type="button">
+      <VisuallyHidden>
+        <input disabled={props.disabled} readonly tabIndex={-1} type="text" />
+      </VisuallyHidden>
+      <div class="tiny-time-picker-trigger__item" data-empty={dataIf(props.hour === null)}>
+        {toStr(props.hour) || "hh"}
+      </div>
+      <Show when={typeIndex() > 0}>
+        <div class="tiny-time-picker-trigger__item" data-empty={dataIf(props.minute === null)}>
+          {toStr(props.minute) || "mm"}
+        </div>
+      </Show>
+      <Show when={typeIndex() > 1}>
+        <div class="tiny-time-picker-trigger__item" data-empty={dataIf(props.second === null)}>
+          {toStr(props.second) || "ss"}
+        </div>
+      </Show>
+    </button>;
+}
+
+//#endregion
+export { TimeTrigger };

package/dist/components/modal/helpers.js

@@ -1,9 +1,9 @@
 import { CloseLine } from "../../icons/close-line.js";
 import { ModalCore } from "../../primitives/modal/index.js";
-import modal_helper_default from "../../_virtual/__viteSafe__/home/runner/work/solid-tiny-ui/solid-tiny-ui/packages/core/src/components/modal/modal-helper.js";
 import { Flex } from "../../layout/flex/index.js";
 import "../../layout/index.js";
 import "../../primitives/index.js";
+import modal_helper_default from "../../_virtual/__viteSafe__/home/runner/work/solid-tiny-ui/solid-tiny-ui/packages/core/src/components/modal/modal-helper.js";
 import { createComponent, insert, memo, mergeProps, template } from "solid-js/web";
 import { Show, onMount, splitProps } from "solid-js";
 import { combineClass, combineStyle, makeEventListener, mountStyle } from "solid-tiny-utils";

package/dist/components/modal/helpers.jsx

@@ -1,9 +1,9 @@
 import { CloseLine } from "../../icons/close-line.jsx";
 import { ModalCore } from "../../primitives/modal/index.jsx";
-import modal_helper_default from "../../_virtual/__viteSafe__/home/runner/work/solid-tiny-ui/solid-tiny-ui/packages/core/src/components/modal/modal-helper.jsx";
 import { Flex } from "../../layout/flex/index.jsx";
 import "../../layout/index.jsx";
 import "../../primitives/index.jsx";
+import modal_helper_default from "../../_virtual/__viteSafe__/home/runner/work/solid-tiny-ui/solid-tiny-ui/packages/core/src/components/modal/modal-helper.jsx";
 import { Show, onMount, splitProps } from "solid-js";
 import { combineClass, combineStyle, makeEventListener, mountStyle } from "solid-tiny-utils";
 import { Ref } from "@solid-primitives/refs";

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

@@ -3,7 +3,8 @@ import { Trigger } from "../../primitives/modal/trigger.js";
 import { ModalCore } from "../../primitives/modal/index.js";
 import { ModalHelper } from "./helpers.js";
 import { JSX } from "solid-js";
-import * as solid_js_store1 from "solid-js/store";
+import * as solid_tiny_utils2 from "solid-tiny-utils";
+import * as solid_js_store10 from "solid-js/store";
 
 //#region src/components/modal/index.d.ts
 declare function Root(props: Parameters<typeof ModalCore>[0]): JSX.Element;
@@ -17,24 +18,20 @@ declare const Modal: typeof Root & {
   Trigger: typeof Trigger;
   Content: typeof Content;
   useContext: () => [Readonly<{
-    id: string;
     open: boolean;
     refContent: HTMLElement | null;
-    preventScroll: boolean;
     closeOnClickMask: boolean;
     closeOnEsc: boolean;
   } & {}>, Omit<{}, "setState"> & {
-    setState: solid_js_store1.SetStoreFunction<{
-      id: string;
+    setState: solid_js_store10.SetStoreFunction<{
       open: boolean;
       refContent: HTMLElement | null;
-      preventScroll: boolean;
       closeOnClickMask: boolean;
       closeOnEsc: boolean;
     }>;
   }, {
-    shouldMount: () => boolean;
-    presenceState: () => string;
+    isMounted: () => boolean;
+    presencePhase: () => solid_tiny_utils2.PresencePhase;
   }];
 };
 //#endregion

package/dist/components/modal/index.js

@@ -1,8 +1,9 @@
 import { createClassStyles } from "../../utils/index.js";
-import modal_default from "../../_virtual/__viteSafe__/home/runner/work/solid-tiny-ui/solid-tiny-ui/packages/core/src/components/modal/modal.js";
 import { ModalCore } from "../../primitives/modal/index.js";
+import modal_default from "../../_virtual/__viteSafe__/home/runner/work/solid-tiny-ui/solid-tiny-ui/packages/core/src/components/modal/modal.js";
 import { ModalHelper } from "./helpers.js";
 import { createComponent } from "solid-js/web";
+import { createMemo } from "solid-js";
 import { combineClass, combineStyle, dataIf, mountStyle } from "solid-tiny-utils";
 
 //#region src/components/modal/index.tsx
@@ -11,18 +12,20 @@ function Root(props) {
 }
 function Content(props) {
 	mountStyle(modal_default, "tiny-modal");
-	const [, , { presenceState }] = ModalCore.useContext();
+	const [, , { presencePhase }] = ModalCore.useContext();
 	const [classes, styles] = createClassStyles(() => props.classNames, () => props.styles);
+	const isEntering = createMemo(() => ["pre-enter", "entering"].includes(presencePhase()));
+	const isExiting = createMemo(() => ["exiting"].includes(presencePhase()));
 	return createComponent(ModalCore.Portal, { get children() {
 		return [createComponent(ModalCore.Mask, {
 			get ["class"]() {
 				return combineClass("tiny-modal__mask", classes().mask);
 			},
-			get ["data-closing"]() {
-				return dataIf(presenceState() === "closing");
+			get ["data-entering"]() {
+				return dataIf(isEntering());
 			},
-			get ["data-opening"]() {
-				return dataIf(presenceState() === "opening");
+			get ["data-exiting"]() {
+				return dataIf(isExiting());
 			},
 			get style() {
 				return styles().mask;
@@ -39,11 +42,11 @@ function Content(props) {
 					get ["class"]() {
 						return combineClass("tiny-modal__content", classes().content);
 					},
-					get ["data-closing"]() {
-						return dataIf(presenceState() === "closing");
+					get ["data-entering"]() {
+						return dataIf(isEntering());
 					},
-					get ["data-opening"]() {
-						return dataIf(presenceState() === "opening");
+					get ["data-exiting"]() {
+						return dataIf(isExiting());
 					},
 					get style() {
 						return combineStyle({ width: props.width || "500px" }, styles().content);

package/dist/components/modal/index.jsx

@@ -1,7 +1,8 @@
 import { createClassStyles } from "../../utils/index.jsx";
-import modal_default from "../../_virtual/__viteSafe__/home/runner/work/solid-tiny-ui/solid-tiny-ui/packages/core/src/components/modal/modal.jsx";
 import { ModalCore } from "../../primitives/modal/index.jsx";
+import modal_default from "../../_virtual/__viteSafe__/home/runner/work/solid-tiny-ui/solid-tiny-ui/packages/core/src/components/modal/modal.jsx";
 import { ModalHelper } from "./helpers.jsx";
+import { createMemo } from "solid-js";
 import { combineClass, combineStyle, dataIf, mountStyle } from "solid-tiny-utils";
 
 //#region src/components/modal/index.tsx
@@ -10,12 +11,14 @@ function Root(props) {
 }
 function Content(props) {
 	mountStyle(modal_default, "tiny-modal");
-	const [, , { presenceState }] = ModalCore.useContext();
+	const [, , { presencePhase }] = ModalCore.useContext();
 	const [classes, styles] = createClassStyles(() => props.classNames, () => props.styles);
+	const isEntering = createMemo(() => ["pre-enter", "entering"].includes(presencePhase()));
+	const isExiting = createMemo(() => ["exiting"].includes(presencePhase()));
 	return <ModalCore.Portal>
-      <ModalCore.Mask class={combineClass("tiny-modal__mask", classes().mask)} data-closing={dataIf(presenceState() === "closing")} data-opening={dataIf(presenceState() === "opening")} style={styles().mask} />
+      <ModalCore.Mask class={combineClass("tiny-modal__mask", classes().mask)} data-entering={dataIf(isEntering())} data-exiting={dataIf(isExiting())} style={styles().mask} />
       <ModalCore.ContentWrapper class={combineClass("tiny-modal__wrapper tiny-modal-vars", classes().wrapper)} style={combineStyle({}, styles().wrapper)}>
-        <ModalCore.Content class={combineClass("tiny-modal__content", classes().content)} data-closing={dataIf(presenceState() === "closing")} data-opening={dataIf(presenceState() === "opening")} style={combineStyle({ width: props.width || "500px" }, styles().content)}>
+        <ModalCore.Content class={combineClass("tiny-modal__content", classes().content)} data-entering={dataIf(isEntering())} data-exiting={dataIf(isExiting())} style={combineStyle({ width: props.width || "500px" }, styles().content)}>
           {props.children}
         </ModalCore.Content>
       </ModalCore.ContentWrapper>

package/dist/components/pagination/index.d.ts

@@ -0,0 +1 @@
+import { Pagination, PaginationSize } from "./pagination.js";

package/dist/components/pagination/index.js

@@ -0,0 +1 @@
+import { Pagination } from "./pagination.js";

package/dist/components/pagination/index.jsx

@@ -0,0 +1 @@
+import { Pagination } from "./pagination.jsx";

package/dist/components/pagination/pagination.d.ts

@@ -0,0 +1,32 @@
+import { ClassNames, Styles } from "../../utils/types.js";
+import { JSX } from "solid-js";
+
+//#region src/components/pagination/pagination.d.ts
+type PaginationSize = "small" | "middle" | "large";
+/**
+ * A pagination component for navigating through pages of content.
+ *
+ * maxVisiblePages: Maximum number of page buttons to display (default: 7, minimum: 5).
+ */
+declare function Pagination(props: {
+  current?: number;
+  total?: number;
+  pageSize?: number;
+  onChange?: (page: number) => void;
+  disabled?: boolean;
+  maxVisiblePages?: number;
+  size?: PaginationSize;
+  dense?: boolean;
+  classNames?: ClassNames<"root" | "prev" | "items" | "item" | "separator" | "next" | "input", {
+    disabled: boolean;
+    size: PaginationSize;
+    dense: boolean;
+  }>;
+  styles?: Styles<"root" | "prev" | "items" | "item" | "separator" | "next" | "input", {
+    disabled: boolean;
+    size: PaginationSize;
+    dense: boolean;
+  }>;
+}): JSX.Element;
+//#endregion
+export { Pagination, PaginationSize };

package/dist/components/pagination/pagination.js

@@ -0,0 +1,336 @@
+import { IconArrowLeft } from "../../icons/arrow-left.js";
+import { IconArrowRight } from "../../icons/arrow-right.js";
+import { IconEllipsis } from "../../icons/ellipsis.js";
+import "../../icons/index.js";
+import { createClassStyles } from "../../utils/index.js";
+import { PaginationCore } from "../../primitives/pagination/index.js";
+import "../../primitives/index.js";
+import pagination_default from "../../_virtual/__viteSafe__/home/runner/work/solid-tiny-ui/solid-tiny-ui/packages/core/src/components/pagination/pagination.js";
+import { addEventListener, className, createComponent, delegateEvents, effect, insert, setAttribute, style, template, use } from "solid-js/web";
+import { Show, createSignal, onMount } from "solid-js";
+import { combineClass, combineStyle, createWatch, dataIf, makeEventListener, mountStyle } from "solid-tiny-utils";
+import { Ref } from "@solid-primitives/refs";
+
+//#region src/components/pagination/pagination.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<input min=1 type=number>`), _tmpl$2 = /* @__PURE__ */ template(`<button type=button>`), _tmpl$3 = /* @__PURE__ */ template(`<span>/`), _tmpl$4 = /* @__PURE__ */ template(`<div><button type=button></button><div></div><button type=button>`);
+function GoToPageInput(props) {
+	let ref;
+	onMount(() => {
+		ref.focus();
+	});
+	const handleKeyDown = (e) => {
+		if (e.key === "Enter") ref.blur();
+	};
+	return (() => {
+		var _el$ = _tmpl$();
+		var _ref$ = ref;
+		typeof _ref$ === "function" ? use(_ref$, _el$) : ref = _el$;
+		_el$.$$keydown = handleKeyDown;
+		addEventListener(_el$, "blur", props.onBlur);
+		effect((_p$) => {
+			var _v$ = combineClass("tiny-pagination-input", props.class), _v$2 = combineStyle({ "--width": `${props.width}px` }, props.style);
+			_v$ !== _p$.e && className(_el$, _p$.e = _v$);
+			_p$.t = style(_el$, _v$2, _p$.t);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0
+		});
+		effect(() => _el$.value = props.value);
+		return _el$;
+	})();
+}
+function GoToPageEditable(props) {
+	const [editable, setEditable] = createSignal(false);
+	const [ref, setRef] = createSignal(null);
+	const [w, setW] = createSignal(0);
+	createWatch(ref, (el) => {
+		if (!el) return;
+		makeEventListener(el, "click", () => {
+			setW(el.offsetWidth);
+			setEditable(true);
+		});
+	});
+	return createComponent(Show, {
+		get fallback() {
+			return createComponent(Ref, {
+				ref: setRef,
+				get children() {
+					return props.children;
+				}
+			});
+		},
+		get when() {
+			return editable();
+		},
+		get children() {
+			return createComponent(GoToPageInput, {
+				get ["class"]() {
+					return props.inputClass;
+				},
+				onBlur: (e) => {
+					const tryTo = e.currentTarget.valueAsNumber;
+					if (tryTo > 0 && tryTo !== props.current) props.gotoPage(tryTo);
+					setEditable(false);
+				},
+				get style() {
+					return props.inputStyle;
+				},
+				get value() {
+					return props.current;
+				},
+				get width() {
+					return w();
+				}
+			});
+		}
+	});
+}
+function DensePages(props) {
+	return [
+		createComponent(GoToPageEditable, {
+			get current() {
+				return props.current;
+			},
+			get disabled() {
+				return props.disabled;
+			},
+			get gotoPage() {
+				return props.onPageClick;
+			},
+			get inputClass() {
+				return props.inputClass;
+			},
+			get inputStyle() {
+				return props.inputStyle;
+			},
+			get children() {
+				var _el$2 = _tmpl$2();
+				insert(_el$2, () => props.current);
+				effect((_p$) => {
+					var _v$3 = combineClass("tiny-pagination-item", props.itemClass), _v$4 = props.disabled, _v$5 = combineStyle({}, props.itemStyle);
+					_v$3 !== _p$.e && className(_el$2, _p$.e = _v$3);
+					_v$4 !== _p$.t && (_el$2.disabled = _p$.t = _v$4);
+					_p$.a = style(_el$2, _v$5, _p$.a);
+					return _p$;
+				}, {
+					e: void 0,
+					t: void 0,
+					a: void 0
+				});
+				return _el$2;
+			}
+		}),
+		(() => {
+			var _el$3 = _tmpl$3();
+			effect((_p$) => {
+				var _v$6 = combineClass("tiny-pagination-separator", props.separatorClass), _v$7 = dataIf(props.disabled), _v$8 = combineStyle({}, props.separatorStyle);
+				_v$6 !== _p$.e && className(_el$3, _p$.e = _v$6);
+				_v$7 !== _p$.t && setAttribute(_el$3, "data-disabled", _p$.t = _v$7);
+				_p$.a = style(_el$3, _v$8, _p$.a);
+				return _p$;
+			}, {
+				e: void 0,
+				t: void 0,
+				a: void 0
+			});
+			return _el$3;
+		})(),
+		(() => {
+			var _el$4 = _tmpl$2();
+			_el$4.$$click = () => props.onPageClick(props.totalPages);
+			insert(_el$4, () => props.totalPages);
+			effect((_p$) => {
+				var _v$9 = combineClass("tiny-pagination-item", props.itemClass), _v$0 = props.disabled, _v$1 = combineStyle({}, props.itemStyle);
+				_v$9 !== _p$.e && className(_el$4, _p$.e = _v$9);
+				_v$0 !== _p$.t && (_el$4.disabled = _p$.t = _v$0);
+				_p$.a = style(_el$4, _v$1, _p$.a);
+				return _p$;
+			}, {
+				e: void 0,
+				t: void 0,
+				a: void 0
+			});
+			return _el$4;
+		})()
+	];
+}
+/**
+* A pagination component for navigating through pages of content.
+*
+* maxVisiblePages: Maximum number of page buttons to display (default: 7, minimum: 5).
+*/
+function Pagination(props) {
+	mountStyle(pagination_default, "tiny-pagination");
+	const size = () => props.size ?? "middle";
+	const [classes, styles] = createClassStyles(() => props.classNames, () => props.styles, () => ({
+		disabled: props.disabled ?? false,
+		size: size(),
+		dense: props.dense ?? false
+	}));
+	return createComponent(PaginationCore, {
+		get current() {
+			return props.current;
+		},
+		get disabled() {
+			return props.disabled;
+		},
+		get maxVisiblePages() {
+			return props.maxVisiblePages;
+		},
+		get onChange() {
+			return props.onChange;
+		},
+		get pageSize() {
+			return props.pageSize;
+		},
+		get total() {
+			return props.total;
+		},
+		children: (state, actions) => {
+			return (() => {
+				var _el$5 = _tmpl$4(), _el$6 = _el$5.firstChild, _el$7 = _el$6.nextSibling, _el$8 = _el$7.nextSibling;
+				addEventListener(_el$6, "click", actions.prev, true);
+				insert(_el$6, createComponent(IconArrowLeft, {}));
+				insert(_el$7, createComponent(Show, {
+					get fallback() {
+						return createComponent(DensePages, {
+							get current() {
+								return state.current;
+							},
+							get disabled() {
+								return state.disabled;
+							},
+							get inputClass() {
+								return classes().input;
+							},
+							get inputStyle() {
+								return styles().input;
+							},
+							get itemClass() {
+								return classes().item;
+							},
+							get itemStyle() {
+								return styles().item;
+							},
+							get onPageClick() {
+								return actions.gotoPage;
+							},
+							get separatorClass() {
+								return classes().separator;
+							},
+							get separatorStyle() {
+								return styles().separator;
+							},
+							get totalPages() {
+								return state.totalPages;
+							}
+						});
+					},
+					get when() {
+						return !props.dense;
+					},
+					get children() {
+						return createComponent(PaginationCore.Items, { render: (page) => {
+							return createComponent(Show, {
+								get fallback() {
+									return createComponent(GoToPageEditable, {
+										get current() {
+											return state.current;
+										},
+										get disabled() {
+											return state.disabled;
+										},
+										get gotoPage() {
+											return actions.gotoPage;
+										},
+										get inputClass() {
+											return classes().input;
+										},
+										get inputStyle() {
+											return styles().input;
+										},
+										get children() {
+											var _el$0 = _tmpl$2();
+											insert(_el$0, createComponent(IconEllipsis, {}));
+											effect((_p$) => {
+												var _v$26 = combineClass("tiny-pagination-item", classes().item), _v$27 = state.disabled, _v$28 = combineStyle({}, styles().item);
+												_v$26 !== _p$.e && className(_el$0, _p$.e = _v$26);
+												_v$27 !== _p$.t && (_el$0.disabled = _p$.t = _v$27);
+												_p$.a = style(_el$0, _v$28, _p$.a);
+												return _p$;
+											}, {
+												e: void 0,
+												t: void 0,
+												a: void 0
+											});
+											return _el$0;
+										}
+									});
+								},
+								get when() {
+									return page.type === "page";
+								},
+								get children() {
+									var _el$9 = _tmpl$2();
+									_el$9.$$click = () => actions.gotoPage(page.page);
+									insert(_el$9, () => page.page);
+									effect((_p$) => {
+										var _v$22 = combineClass("tiny-pagination-item", classes().item), _v$23 = dataIf(page.page === state.current), _v$24 = state.disabled, _v$25 = combineStyle({}, styles().item);
+										_v$22 !== _p$.e && className(_el$9, _p$.e = _v$22);
+										_v$23 !== _p$.t && setAttribute(_el$9, "data-active", _p$.t = _v$23);
+										_v$24 !== _p$.a && (_el$9.disabled = _p$.a = _v$24);
+										_p$.o = style(_el$9, _v$25, _p$.o);
+										return _p$;
+									}, {
+										e: void 0,
+										t: void 0,
+										a: void 0,
+										o: void 0
+									});
+									return _el$9;
+								}
+							});
+						} });
+					}
+				}));
+				addEventListener(_el$8, "click", actions.next, true);
+				insert(_el$8, createComponent(IconArrowRight, {}));
+				effect((_p$) => {
+					var _v$10 = combineClass("tiny-pagination", classes().root), _v$11 = dataIf(state.disabled), _v$12 = size(), _v$13 = combineStyle({}, styles().root), _v$14 = combineClass("tiny-pagination-prev", classes().prev), _v$15 = state.disabled || state.current <= 1, _v$16 = combineStyle({}, styles().prev), _v$17 = combineClass("tiny-pagination-items", classes().items), _v$18 = combineStyle({}, styles().items), _v$19 = combineClass("tiny-pagination-next", classes().next), _v$20 = state.disabled || state.current >= state.totalPages, _v$21 = combineStyle({}, styles().next);
+					_v$10 !== _p$.e && className(_el$5, _p$.e = _v$10);
+					_v$11 !== _p$.t && setAttribute(_el$5, "data-disabled", _p$.t = _v$11);
+					_v$12 !== _p$.a && setAttribute(_el$5, "data-size", _p$.a = _v$12);
+					_p$.o = style(_el$5, _v$13, _p$.o);
+					_v$14 !== _p$.i && className(_el$6, _p$.i = _v$14);
+					_v$15 !== _p$.n && (_el$6.disabled = _p$.n = _v$15);
+					_p$.s = style(_el$6, _v$16, _p$.s);
+					_v$17 !== _p$.h && className(_el$7, _p$.h = _v$17);
+					_p$.r = style(_el$7, _v$18, _p$.r);
+					_v$19 !== _p$.d && className(_el$8, _p$.d = _v$19);
+					_v$20 !== _p$.l && (_el$8.disabled = _p$.l = _v$20);
+					_p$.u = style(_el$8, _v$21, _p$.u);
+					return _p$;
+				}, {
+					e: void 0,
+					t: void 0,
+					a: void 0,
+					o: void 0,
+					i: void 0,
+					n: void 0,
+					s: void 0,
+					h: void 0,
+					r: void 0,
+					d: void 0,
+					l: void 0,
+					u: void 0
+				});
+				return _el$5;
+			})();
+		}
+	});
+}
+delegateEvents(["keydown", "click"]);
+
+//#endregion
+export { Pagination };

package/dist/components/pagination/pagination.jsx

@@ -0,0 +1,104 @@
+import { IconArrowLeft } from "../../icons/arrow-left.jsx";
+import { IconArrowRight } from "../../icons/arrow-right.jsx";
+import { IconEllipsis } from "../../icons/ellipsis.jsx";
+import "../../icons/index.jsx";
+import { createClassStyles } from "../../utils/index.jsx";
+import { PaginationCore } from "../../primitives/pagination/index.jsx";
+import "../../primitives/index.jsx";
+import pagination_default from "../../_virtual/__viteSafe__/home/runner/work/solid-tiny-ui/solid-tiny-ui/packages/core/src/components/pagination/pagination.jsx";
+import { Show, createSignal, onMount } from "solid-js";
+import { combineClass, combineStyle, createWatch, dataIf, makeEventListener, mountStyle } from "solid-tiny-utils";
+import { Ref } from "@solid-primitives/refs";
+
+//#region src/components/pagination/pagination.tsx
+function GoToPageInput(props) {
+	let ref;
+	onMount(() => {
+		ref.focus();
+	});
+	const handleKeyDown = (e) => {
+		if (e.key === "Enter") ref.blur();
+	};
+	return <input class={combineClass("tiny-pagination-input", props.class)} min="1" onBlur={props.onBlur} onKeyDown={handleKeyDown} ref={ref} style={combineStyle({ "--width": `${props.width}px` }, props.style)} type="number" value={props.value} />;
+}
+function GoToPageEditable(props) {
+	const [editable, setEditable] = createSignal(false);
+	const [ref, setRef] = createSignal(null);
+	const [w, setW] = createSignal(0);
+	createWatch(ref, (el) => {
+		if (!el) return;
+		makeEventListener(el, "click", () => {
+			setW(el.offsetWidth);
+			setEditable(true);
+		});
+	});
+	return <Show fallback={<Ref ref={setRef}>{props.children}</Ref>} when={editable()}>
+      <GoToPageInput class={props.inputClass} onBlur={(e) => {
+		const tryTo = e.currentTarget.valueAsNumber;
+		if (tryTo > 0 && tryTo !== props.current) props.gotoPage(tryTo);
+		setEditable(false);
+	}} style={props.inputStyle} value={props.current} width={w()} />
+    </Show>;
+}
+function DensePages(props) {
+	return <>
+      <GoToPageEditable current={props.current} disabled={props.disabled} gotoPage={props.onPageClick} inputClass={props.inputClass} inputStyle={props.inputStyle}>
+        <button class={combineClass("tiny-pagination-item", props.itemClass)} disabled={props.disabled} style={combineStyle({}, props.itemStyle)} type="button">
+          {props.current}
+        </button>
+      </GoToPageEditable>
+
+      <span class={combineClass("tiny-pagination-separator", props.separatorClass)} data-disabled={dataIf(props.disabled)} style={combineStyle({}, props.separatorStyle)}>
+        /
+      </span>
+
+      <button class={combineClass("tiny-pagination-item", props.itemClass)} disabled={props.disabled} onClick={() => props.onPageClick(props.totalPages)} style={combineStyle({}, props.itemStyle)} type="button">
+        {props.totalPages}
+      </button>
+    </>;
+}
+/**
+* A pagination component for navigating through pages of content.
+*
+* maxVisiblePages: Maximum number of page buttons to display (default: 7, minimum: 5).
+*/
+function Pagination(props) {
+	mountStyle(pagination_default, "tiny-pagination");
+	const size = () => props.size ?? "middle";
+	const [classes, styles] = createClassStyles(() => props.classNames, () => props.styles, () => ({
+		disabled: props.disabled ?? false,
+		size: size(),
+		dense: props.dense ?? false
+	}));
+	return <PaginationCore current={props.current} disabled={props.disabled} maxVisiblePages={props.maxVisiblePages} onChange={props.onChange} pageSize={props.pageSize} total={props.total}>
+      {(state, actions) => {
+		return <div class={combineClass("tiny-pagination", classes().root)} data-disabled={dataIf(state.disabled)} data-size={size()} style={combineStyle({}, styles().root)}>
+            <button class={combineClass("tiny-pagination-prev", classes().prev)} disabled={state.disabled || state.current <= 1} onClick={actions.prev} style={combineStyle({}, styles().prev)} type="button">
+              <IconArrowLeft />
+            </button>
+            <div class={combineClass("tiny-pagination-items", classes().items)} style={combineStyle({}, styles().items)}>
+              <Show fallback={<DensePages current={state.current} disabled={state.disabled} inputClass={classes().input} inputStyle={styles().input} itemClass={classes().item} itemStyle={styles().item} onPageClick={actions.gotoPage} separatorClass={classes().separator} separatorStyle={styles().separator} totalPages={state.totalPages} />} when={!props.dense}>
+                <PaginationCore.Items render={(page) => {
+			return <Show fallback={<GoToPageEditable current={state.current} disabled={state.disabled} gotoPage={actions.gotoPage} inputClass={classes().input} inputStyle={styles().input}>
+                            <button class={combineClass("tiny-pagination-item", classes().item)} disabled={state.disabled} style={combineStyle({}, styles().item)} type="button">
+                              <IconEllipsis />
+                            </button>
+                          </GoToPageEditable>} when={page.type === "page"}>
+                        <button class={combineClass("tiny-pagination-item", classes().item)} data-active={dataIf(page.page === state.current)} disabled={state.disabled} onClick={() => actions.gotoPage(page.page)} style={combineStyle({}, styles().item)} type="button">
+                          {page.page}
+                        </button>
+                      </Show>;
+		}} />
+              </Show>
+            </div>
+
+            <button class={combineClass("tiny-pagination-next", classes().next)} disabled={state.disabled || state.current >= state.totalPages} onClick={actions.next} style={combineStyle({}, styles().next)} type="button">
+              <IconArrowRight />
+            </button>
+          </div>;
+	}}
+    </PaginationCore>;
+}
+
+//#endregion
+export { Pagination };