From 4ac94b5e9b30a3963573d380fd55f31a3773c74b Mon Sep 17 00:00:00 2001
From: Alex Lohr <alexthkloss@web.de>
Date: Tue, 20 Oct 2026 21:33:06 +0200
Subject: [PATCH 1/2] docs(input-mask): add function-type story

---
 .changeset/dark-carrots-prove.md              |  5 +++
 .../input-mask/stories/inputMask.stories.tsx  | 43 +++++++++++++++++++
 2 files changed, 48 insertions(+)
 create mode 100644 .changeset/dark-carrots-prove.md

diff --git a/.changeset/dark-carrots-prove.md b/.changeset/dark-carrots-prove.md
new file mode 100644
index 000000000..cbbdf8a5f
--- /dev/null
+++ b/.changeset/dark-carrots-prove.md
@@ -0,0 +1,5 @@
+---
+"@solid-primitives/input-mask": patch
+---
+
+input-mask: add story illustrating function-type masks
diff --git a/packages/input-mask/stories/inputMask.stories.tsx b/packages/input-mask/stories/inputMask.stories.tsx
index f9b402bfb..da4f22d1f 100644
--- a/packages/input-mask/stories/inputMask.stories.tsx
+++ b/packages/input-mask/stories/inputMask.stories.tsx
@@ -198,3 +198,46 @@ export const ArrayMask = meta.story({
     );
   },
 });
+
+export const FunctionMask = meta.story({
+  name: "IPv4 mask (function format)",
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "`createInputMask` accepts a function that receives value and selection and returns new value and selection, in this case to block any input that creates an invalid (partial) IPv4 address.",
+      },
+    },
+  },
+  render: () => {
+    const [value, setValue] = createSignal("");
+    let previous = ["", { start: 0, end: 0 }];
+    const mask = createInputMask((addr, sel) => {
+      const isValid = addr.split(/\./g).every(num => num === "" || !/\D/.test(num) && Number(num) < 256);
+      if (isValid) {
+        previous = [addr, sel];
+      } 
+      return previous;
+    });
+
+    return (
+      <Container>
+        <h3 style={{ margin: 0 }}>IPv44 Address — "127.0.0.1"</h3>
+
+        <div style={{ display: "flex", "flex-direction": "column", gap: "0.35rem" }}>
+          <Label>Type an IPv4 Address (0.0.0.0)</Label>
+          <input
+            type="text"
+            placeholder="0.0.0.0"
+            onKeyup={e => setValue(mask(e))}
+            onInput={e => setValue(mask(e))}
+            onPaste={e => setValue(mask(e))}
+            style={inputStyle}
+          />
+        </div>
+
+        <ValueDisplay label="value" value={value()} />
+      </Container>
+    );
+  },
+});
\ No newline at end of file

From f635907524dd4c26264cc24bcab040b8b8fa4af8 Mon Sep 17 00:00:00 2001
From: Alex Lohr <alexthkloss@web.de>
Date: Wed, 21 Oct 2026 21:20:57 +0200
Subject: [PATCH 2/2] fix: correct selection format

---
 packages/input-mask/stories/inputMask.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/input-mask/stories/inputMask.stories.tsx b/packages/input-mask/stories/inputMask.stories.tsx
index da4f22d1f..cf1b5225a 100644
--- a/packages/input-mask/stories/inputMask.stories.tsx
+++ b/packages/input-mask/stories/inputMask.stories.tsx
@@ -211,7 +211,7 @@ export const FunctionMask = meta.story({
   },
   render: () => {
     const [value, setValue] = createSignal("");
-    let previous = ["", { start: 0, end: 0 }];
+    let previous: [string, Selection] = ["", [0, 0]];
     const mask = createInputMask((addr, sel) => {
       const isValid = addr.split(/\./g).every(num => num === "" || !/\D/.test(num) && Number(num) < 256);
       if (isValid) {