solid-tiny-ui 0.5.0 → 0.6.0

package/dist/components/form-components/text-field/text-field.jsx

@@ -0,0 +1,40 @@
+import { createClassStyles, extraAriasAndDatasets } from "../../../utils/index.jsx";
+import text_field_default from "../../../_virtual/__viteSafe__/home/runner/work/solid-tiny-ui/solid-tiny-ui/packages/core/src/components/form-components/text-field/text-field.jsx";
+import { Show, children } from "solid-js";
+import { combineClass, combineStyle, dataIf, mountStyle } from "solid-tiny-utils";
+
+//#region src/components/form-components/text-field/text-field.tsx
+function TextField(props) {
+	mountStyle(text_field_default, "tiny-text-field");
+	const prefix = children(() => props.prefix);
+	const suffix = children(() => props.suffix);
+	const [classes, styles] = createClassStyles(() => props.classNames, () => props.styles, () => ({
+		disabled: props.disabled ?? false,
+		invalid: props.invalid ?? false,
+		size: props.size || "medium"
+	}));
+	const handleKeyDown = (e) => {
+		if (e.key === "Enter") {
+			props.onPressEnter?.(e);
+			e.currentTarget.blur();
+		}
+	};
+	return <div class={combineClass("tiny-text-field", classes().root)} data-disabled={dataIf(props.disabled ?? false)} data-invalid={dataIf(props.invalid ?? false)} data-size={props.size || "medium"} style={combineStyle({}, styles().root)}>
+      <Show when={prefix()}>
+        <div class={combineClass("tiny-text-field-prefix", classes().prefix)} style={combineStyle({}, styles().prefix)}>
+          {prefix()}
+        </div>
+      </Show>
+      <input {...extraAriasAndDatasets(props)} class={combineClass("tiny-text-field-input", classes().input)} disabled={props.disabled} id={props.id} name={props.name} onInput={(e) => {
+		props.onChange?.(e.currentTarget.value);
+	}} onKeyDown={handleKeyDown} placeholder={props.placeholder} style={combineStyle({}, styles().input)} type="text" value={props.value} />
+      <Show when={suffix()}>
+        <div class={combineClass("tiny-text-field-suffix", classes().suffix)} style={combineStyle({}, styles().suffix)}>
+          {suffix()}
+        </div>
+      </Show>
+    </div>;
+}
+
+//#endregion
+export { TextField };

package/dist/components/{textarea → form-components/textarea}/textarea.d.ts

@@ -1,7 +1,7 @@
-import { ClassNames, Styles } from "../../utils/types.js";
+import { ClassNames, Styles } from "../../../utils/types.js";
 import { JSX } from "solid-js";
 
-//#region src/components/textarea/textarea.d.ts
+//#region src/components/form-components/textarea/textarea.d.ts
 declare function Textarea(props: {
   autosize?: boolean;
   rows?: number;
@@ -16,7 +16,10 @@ declare function Textarea(props: {
     disabled: boolean;
   }>;
   onChange?: (value: string) => void;
+  invalid?: boolean;
   value?: string;
+  id?: string;
+  name?: string;
 }): JSX.Element;
 //#endregion
 export { Textarea };

package/dist/components/form-components/textarea/textarea.js

@@ -0,0 +1,55 @@
+import { createClassStyles } from "../../../utils/index.js";
+import textarea_default from "../../../_virtual/__viteSafe__/home/runner/work/solid-tiny-ui/solid-tiny-ui/packages/core/src/components/form-components/textarea/textarea.js";
+import { className, delegateEvents, effect, setAttribute, style, template } from "solid-js/web";
+import { mergeProps as mergeProps$1 } from "solid-js";
+import { combineClass, combineStyle, dataIf, mountStyle } from "solid-tiny-utils";
+
+//#region src/components/form-components/textarea/textarea.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<textarea>`);
+function Textarea(props) {
+	mountStyle(textarea_default, "tiny-textarea");
+	const real = mergeProps$1({
+		autosize: false,
+		rows: 3,
+		disabled: false
+	}, props);
+	const [classes, styles] = createClassStyles(() => props.classNames, () => props.styles, () => ({ disabled: real.disabled }));
+	return (() => {
+		var _el$ = _tmpl$();
+		_el$.$$input = (e) => {
+			props.onChange?.(e.target.value);
+		};
+		effect((_p$) => {
+			var _v$ = combineClass("tiny-textarea", classes().root), _v$2 = dataIf(real.invalid ?? false), _v$3 = real.disabled, _v$4 = props.id, _v$5 = real.maxLength, _v$6 = props.name, _v$7 = real.placeholder, _v$8 = real.rows, _v$9 = combineStyle({
+				resize: real.resize,
+				"min-height": "88px"
+			}, styles().root);
+			_v$ !== _p$.e && className(_el$, _p$.e = _v$);
+			_v$2 !== _p$.t && setAttribute(_el$, "data-invalid", _p$.t = _v$2);
+			_v$3 !== _p$.a && (_el$.disabled = _p$.a = _v$3);
+			_v$4 !== _p$.o && setAttribute(_el$, "id", _p$.o = _v$4);
+			_v$5 !== _p$.i && setAttribute(_el$, "maxlength", _p$.i = _v$5);
+			_v$6 !== _p$.n && setAttribute(_el$, "name", _p$.n = _v$6);
+			_v$7 !== _p$.s && setAttribute(_el$, "placeholder", _p$.s = _v$7);
+			_v$8 !== _p$.h && setAttribute(_el$, "rows", _p$.h = _v$8);
+			_p$.r = style(_el$, _v$9, _p$.r);
+			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
+		});
+		effect(() => _el$.value = real.value);
+		return _el$;
+	})();
+}
+delegateEvents(["input"]);
+
+//#endregion
+export { Textarea };

package/dist/components/form-components/textarea/textarea.jsx

@@ -0,0 +1,24 @@
+import { createClassStyles } from "../../../utils/index.jsx";
+import textarea_default from "../../../_virtual/__viteSafe__/home/runner/work/solid-tiny-ui/solid-tiny-ui/packages/core/src/components/form-components/textarea/textarea.jsx";
+import { mergeProps } from "solid-js";
+import { combineClass, combineStyle, dataIf, mountStyle } from "solid-tiny-utils";
+
+//#region src/components/form-components/textarea/textarea.tsx
+function Textarea(props) {
+	mountStyle(textarea_default, "tiny-textarea");
+	const real = mergeProps({
+		autosize: false,
+		rows: 3,
+		disabled: false
+	}, props);
+	const [classes, styles] = createClassStyles(() => props.classNames, () => props.styles, () => ({ disabled: real.disabled }));
+	return <textarea class={combineClass("tiny-textarea", classes().root)} data-invalid={dataIf(real.invalid ?? false)} disabled={real.disabled} id={props.id} maxLength={real.maxLength} name={props.name} onInput={(e) => {
+		props.onChange?.(e.target.value);
+	}} placeholder={real.placeholder} rows={real.rows} style={combineStyle({
+		resize: real.resize,
+		"min-height": "88px"
+	}, styles().root)} value={real.value} />;
+}
+
+//#endregion
+export { Textarea };

package/dist/components/form-components/time-picker/index.d.ts

@@ -0,0 +1,27 @@
+import { ClassNames, Styles } from "../../../utils/types.js";
+import * as solid_js43 from "solid-js";
+
+//#region src/components/form-components/time-picker/index.d.ts
+declare function TimePicker(props: {
+  type?: "hour" | "minute" | "second";
+  size?: "small" | "medium" | "large";
+  hour?: number | null;
+  minute?: number | null;
+  second?: number | null;
+  onChange?: (time: {
+    hour: number | null;
+    minute: number | null;
+    second: number | null;
+  }) => void;
+  disabled?: boolean;
+  classNames?: ClassNames<"trigger" | "popover", {
+    disabled: boolean;
+    size: "small" | "medium" | "large";
+  }>;
+  styles?: Styles<"trigger" | "popover", {
+    disabled: boolean;
+    size: "small" | "medium" | "large";
+  }>;
+}): solid_js43.JSX.Element;
+//#endregion
+export { TimePicker };

package/dist/components/{time-picker → form-components/time-picker}/index.js

@@ -1,14 +1,19 @@
-import { Popover } from "../popover/index.js";
-import time_picker_default from "../../_virtual/__viteSafe__/home/runner/work/solid-tiny-ui/solid-tiny-ui/packages/core/src/components/time-picker/time-picker.js";
+import { createClassStyles } from "../../../utils/index.js";
+import { Popover } from "../../popover/index.js";
+import time_picker_default from "../../../_virtual/__viteSafe__/home/runner/work/solid-tiny-ui/solid-tiny-ui/packages/core/src/components/form-components/time-picker/time-picker.js";
 import { TimePanel } from "./panel.js";
 import { TimeTrigger } from "./trigger.js";
 import { createComponent, memo } from "solid-js/web";
-import { mountStyle, noop } from "solid-tiny-utils";
+import { combineClass, mountStyle, noop } from "solid-tiny-utils";
 import { getHours, getMinutes, getSeconds } from "time-core";
 
-//#region src/components/time-picker/index.tsx
+//#region src/components/form-components/time-picker/index.tsx
 function TimePicker(props) {
 	mountStyle(time_picker_default, "tiny-time-picker");
+	const [classes, styles] = createClassStyles(() => props.classNames, () => props.styles, () => ({
+		disabled: props.disabled ?? false,
+		size: props.size ?? "medium"
+	}));
 	return createComponent(Popover, {
 		get disabled() {
 			return props.disabled;
@@ -24,6 +29,9 @@ function TimePicker(props) {
 		trigger: "click",
 		children: (state, actions) => [createComponent(Popover.Trigger, { get children() {
 			return createComponent(TimeTrigger, {
+				get ["class"]() {
+					return classes().trigger;
+				},
 				get disabled() {
 					return props.disabled ?? false;
 				},
@@ -39,15 +47,23 @@ function TimePicker(props) {
 				get size() {
 					return props.size ?? "medium";
 				},
+				get style() {
+					return styles().trigger;
+				},
 				get type() {
 					return props.type ?? "hour";
 				}
 			});
 		} }), createComponent(Popover.Content, {
-			"class": "tiny-time-picker-popover tiny-time-picker-popover-vars",
+			get ["class"]() {
+				return combineClass("tiny-time-picker-popover tiny-time-picker-popover-vars", classes().popover);
+			},
 			get ["data-size"]() {
 				return props.size || "medium";
 			},
+			get style() {
+				return styles().popover;
+			},
 			get children() {
 				return createComponent(TimePanel, {
 					get hour() {

package/dist/components/{time-picker → form-components/time-picker}/index.jsx

@@ -1,13 +1,18 @@
-import { Popover } from "../popover/index.jsx";
-import time_picker_default from "../../_virtual/__viteSafe__/home/runner/work/solid-tiny-ui/solid-tiny-ui/packages/core/src/components/time-picker/time-picker.jsx";
+import { createClassStyles } from "../../../utils/index.jsx";
+import { Popover } from "../../popover/index.jsx";
+import time_picker_default from "../../../_virtual/__viteSafe__/home/runner/work/solid-tiny-ui/solid-tiny-ui/packages/core/src/components/form-components/time-picker/time-picker.jsx";
 import { TimePanel } from "./panel.jsx";
 import { TimeTrigger } from "./trigger.jsx";
-import { mountStyle, noop } from "solid-tiny-utils";
+import { combineClass, mountStyle, noop } from "solid-tiny-utils";
 import { getHours, getMinutes, getSeconds } from "time-core";
 
-//#region src/components/time-picker/index.tsx
+//#region src/components/form-components/time-picker/index.tsx
 function TimePicker(props) {
 	mountStyle(time_picker_default, "tiny-time-picker");
+	const [classes, styles] = createClassStyles(() => props.classNames, () => props.styles, () => ({
+		disabled: props.disabled ?? false,
+		size: props.size ?? "medium"
+	}));
 	return <Popover disabled={props.disabled} floatingOption={{
 		offset: ({ rects }) => {
 			return -rects.reference.height * 4 + 6;
@@ -17,9 +22,9 @@ function TimePicker(props) {
 	}} placement="bottom" trigger="click">
       {(state, actions) => <>
           <Popover.Trigger>
-            <TimeTrigger disabled={props.disabled ?? false} hour={props.hour ?? null} minute={props.minute ?? null} second={props.second ?? null} size={props.size ?? "medium"} type={props.type ?? "hour"} />
+            <TimeTrigger class={classes().trigger} disabled={props.disabled ?? false} hour={props.hour ?? null} minute={props.minute ?? null} second={props.second ?? null} size={props.size ?? "medium"} style={styles().trigger} type={props.type ?? "hour"} />
           </Popover.Trigger>
-          <Popover.Content class="tiny-time-picker-popover tiny-time-picker-popover-vars" data-size={props.size || "medium"}>
+          <Popover.Content class={combineClass("tiny-time-picker-popover tiny-time-picker-popover-vars", classes().popover)} data-size={props.size || "medium"} style={styles().popover}>
             <TimePanel hour={props.hour || getHours(Date.now())} itemHeight={state.refTrigger?.clientHeight || 32} minute={props.minute || getMinutes(Date.now())} onCancel={() => {
 		actions.setOpen(false);
 	}} onChange={noop} onConfirm={(hour, minute, second) => {

package/dist/components/{time-picker → form-components/time-picker}/panel.js

@@ -1,14 +1,14 @@
-import { CheckLine } from "../../icons/check-line.js";
-import { CloseLine } from "../../icons/close-line.js";
-import "../../icons/index.js";
-import { FakeScrollListCore } from "../../primitives/fake-scroll-list/index.js";
-import "../../primitives/index.js";
+import { CheckLine } from "../../../icons/check-line.js";
+import { CloseLine } from "../../../icons/close-line.js";
+import "../../../icons/index.js";
+import { FakeScrollListCore } from "../../../primitives/fake-scroll-list/index.js";
+import "../../../primitives/index.js";
 import { createComponent, delegateEvents, effect, insert, setStyleProperty, template } from "solid-js/web";
 import { Show, createMemo } from "solid-js";
 import { createWatch, list } from "solid-tiny-utils";
 import { createStore } from "solid-js/store";
 
-//#region src/components/time-picker/panel.tsx
+//#region src/components/form-components/time-picker/panel.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<div style=display:flex;flex-direction:column;position:relative><div class=tiny-time-picker__thumb></div><div style=width:100%;display:flex;position:relative></div><div class=tiny-time-picker__action><button type=button></button><button type=button>`);
 function CommonTimeList(props) {
 	return createComponent(FakeScrollListCore, {

package/dist/components/{time-picker → form-components/time-picker}/panel.jsx

@@ -1,13 +1,13 @@
-import { CheckLine } from "../../icons/check-line.jsx";
-import { CloseLine } from "../../icons/close-line.jsx";
-import "../../icons/index.jsx";
-import { FakeScrollListCore } from "../../primitives/fake-scroll-list/index.jsx";
-import "../../primitives/index.jsx";
+import { CheckLine } from "../../../icons/check-line.jsx";
+import { CloseLine } from "../../../icons/close-line.jsx";
+import "../../../icons/index.jsx";
+import { FakeScrollListCore } from "../../../primitives/fake-scroll-list/index.jsx";
+import "../../../primitives/index.jsx";
 import { Show, createMemo } from "solid-js";
 import { createWatch, list } from "solid-tiny-utils";
 import { createStore } from "solid-js/store";
 
-//#region src/components/time-picker/panel.tsx
+//#region src/components/form-components/time-picker/panel.tsx
 function CommonTimeList(props) {
 	return <FakeScrollListCore inViewIndex={props.inViewItem} itemHeight={props.itemHeight} items={props.items.map((v) => v.toString().padStart(2, "0"))} onInViewIndexChange={(i) => {
 		props.onChange(i);

package/dist/components/{time-picker → form-components/time-picker}/trigger.js

@@ -1,10 +1,10 @@
-import { VisuallyHidden } from "../visually-hidden/index.js";
-import { createComponent, effect, insert, memo, setAttribute, template } from "solid-js/web";
+import { VisuallyHidden } from "../../visually-hidden/index.js";
+import { className, createComponent, effect, insert, memo, setAttribute, style, template } from "solid-js/web";
 import { Show, createMemo } from "solid-js";
-import { dataIf } from "solid-tiny-utils";
+import { combineClass, combineStyle, dataIf } from "solid-tiny-utils";
 
-//#region src/components/time-picker/trigger.tsx
-var _tmpl$ = /* @__PURE__ */ template(`<input readonly tabindex=-1 type=text>`), _tmpl$2 = /* @__PURE__ */ template(`<div class=tiny-time-picker-trigger__item>`), _tmpl$3 = /* @__PURE__ */ template(`<button class="tiny-time-picker-trigger tiny-time-picker-trigger-vars"type=button><div class=tiny-time-picker-trigger__item>`);
+//#region src/components/form-components/time-picker/trigger.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<input readonly tabindex=-1 type=text>`), _tmpl$2 = /* @__PURE__ */ template(`<div class=tiny-time-picker-trigger__item>`), _tmpl$3 = /* @__PURE__ */ template(`<button type=button><div class=tiny-time-picker-trigger__item>`);
 function TimeTrigger(props) {
 	const typeIndex = createMemo(() => [
 		"hour",
@@ -46,15 +46,19 @@ function TimeTrigger(props) {
 			}
 		}), null);
 		effect((_p$) => {
-			var _v$ = dataIf(props.disabled), _v$2 = props.size, _v$3 = dataIf(props.hour === null);
-			_v$ !== _p$.e && setAttribute(_el$, "data-disabled", _p$.e = _v$);
-			_v$2 !== _p$.t && setAttribute(_el$, "data-size", _p$.t = _v$2);
-			_v$3 !== _p$.a && setAttribute(_el$3, "data-empty", _p$.a = _v$3);
+			var _v$ = combineClass("tiny-time-picker-trigger tiny-time-picker-trigger-vars", props.class), _v$2 = dataIf(props.disabled), _v$3 = props.size, _v$4 = combineStyle({}, props.style), _v$5 = dataIf(props.hour === null);
+			_v$ !== _p$.e && className(_el$, _p$.e = _v$);
+			_v$2 !== _p$.t && setAttribute(_el$, "data-disabled", _p$.t = _v$2);
+			_v$3 !== _p$.a && setAttribute(_el$, "data-size", _p$.a = _v$3);
+			_p$.o = style(_el$, _v$4, _p$.o);
+			_v$5 !== _p$.i && setAttribute(_el$3, "data-empty", _p$.i = _v$5);
 			return _p$;
 		}, {
 			e: void 0,
 			t: void 0,
-			a: void 0
+			a: void 0,
+			o: void 0,
+			i: void 0
 		});
 		return _el$;
 	})();

package/dist/components/{time-picker → form-components/time-picker}/trigger.jsx

@@ -1,8 +1,8 @@
-import { VisuallyHidden } from "../visually-hidden/index.jsx";
+import { VisuallyHidden } from "../../visually-hidden/index.jsx";
 import { Show, createMemo } from "solid-js";
-import { dataIf } from "solid-tiny-utils";
+import { combineClass, combineStyle, dataIf } from "solid-tiny-utils";
 
-//#region src/components/time-picker/trigger.tsx
+//#region src/components/form-components/time-picker/trigger.tsx
 function TimeTrigger(props) {
 	const typeIndex = createMemo(() => [
 		"hour",
@@ -13,7 +13,7 @@ function TimeTrigger(props) {
 		if (num === null) return "";
 		return num.toString().padStart(2, "0");
 	};
-	return <button class="tiny-time-picker-trigger tiny-time-picker-trigger-vars" data-disabled={dataIf(props.disabled)} data-size={props.size} type="button">
+	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>

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_store2 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_store2.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 };