@samuel-charpentier/sform 0.0.1

package/dist/Sform/utils/mask.js

@@ -0,0 +1,155 @@
+/**
+ * Mask Utility for Sform
+ * Native implementation for input masking without external dependencies
+ */
+export const DEFAULT_TOKENS = {
+    '9': { pattern: /[0-9]/ },
+    '#': { pattern: /[0-9]/ },
+    a: { pattern: /[a-zA-Z]/ },
+    A: { pattern: /[a-zA-Z]/, transform: (c) => c.toUpperCase() },
+    '*': { pattern: /[a-zA-Z0-9]/ }
+};
+/**
+ * Apply mask to a value
+ *
+ * Algorithm:
+ * 1. Walk through the mask and input simultaneously
+ * 2. For each mask position:
+ *    - If it's a wildcard, try to find a matching input character
+ *    - If it's a literal, add it only if we have more input to process
+ * 3. Stop when input is exhausted
+ */
+export function applyMask(value, options, cursorPosition = value.length) {
+    const { mask, tokens = DEFAULT_TOKENS, placeholder = '_', showPlaceholder = false } = options;
+    let masked = '';
+    let raw = '';
+    let valueIndex = 0;
+    for (let maskIndex = 0; maskIndex < mask.length; maskIndex++) {
+        const maskChar = mask[maskIndex];
+        const token = tokens[maskChar];
+        if (token) {
+            // This is a wildcard position - find next matching input character
+            let found = false;
+            while (valueIndex < value.length && !found) {
+                const inputChar = value[valueIndex];
+                valueIndex++;
+                if (token.pattern.test(inputChar)) {
+                    const transformedChar = token.transform ? token.transform(inputChar) : inputChar;
+                    masked += transformedChar;
+                    raw += transformedChar;
+                    found = true;
+                }
+                // If char doesn't match, skip it and try next
+            }
+            if (!found) {
+                // No more matching input
+                if (showPlaceholder) {
+                    masked += placeholder;
+                }
+                else {
+                    // Stop processing - no more input for wildcards
+                    break;
+                }
+            }
+        }
+        else {
+            // This is a literal character
+            if (showPlaceholder) {
+                // Always add literals when showing placeholders
+                masked += maskChar;
+                // Skip if input matches literal
+                if (valueIndex < value.length && value[valueIndex] === maskChar) {
+                    valueIndex++;
+                }
+            }
+            else {
+                // Only add literals if we have more wildcard matches coming
+                // Look ahead to see if there's more input that matches future wildcards
+                let hasMoreMatchingInput = false;
+                let tempValueIndex = valueIndex;
+                // Skip any literal in input that matches
+                if (tempValueIndex < value.length && value[tempValueIndex] === maskChar) {
+                    tempValueIndex++;
+                }
+                // Look for any remaining input that could match future wildcards
+                for (let futureIdx = maskIndex + 1; futureIdx < mask.length; futureIdx++) {
+                    const futureMaskChar = mask[futureIdx];
+                    const futureToken = tokens[futureMaskChar];
+                    if (futureToken) {
+                        // Check if any remaining input matches this wildcard
+                        for (let vi = tempValueIndex; vi < value.length; vi++) {
+                            if (futureToken.pattern.test(value[vi])) {
+                                hasMoreMatchingInput = true;
+                                break;
+                            }
+                        }
+                        break; // Only check up to the next wildcard
+                    }
+                }
+                if (hasMoreMatchingInput) {
+                    masked += maskChar;
+                    // Skip if input matches literal
+                    if (valueIndex < value.length && value[valueIndex] === maskChar) {
+                        valueIndex++;
+                    }
+                }
+                else {
+                    // No more input for future wildcards, stop here
+                    break;
+                }
+            }
+        }
+    }
+    // Calculate cursor position - put cursor at the end of the masked value
+    const newCursorPosition = masked.length;
+    // Calculate if mask is complete
+    const requiredLength = mask.split('').filter((c) => tokens[c]).length;
+    const complete = raw.length === requiredLength;
+    return {
+        masked,
+        raw,
+        complete,
+        cursorPosition: newCursorPosition
+    };
+}
+/**
+ * Get the raw value from a masked value
+ */
+export function unmask(maskedValue, options) {
+    const { mask, tokens = DEFAULT_TOKENS } = options;
+    let raw = '';
+    let valueIndex = 0;
+    for (let maskIndex = 0; maskIndex < mask.length && valueIndex < maskedValue.length; maskIndex++) {
+        const maskChar = mask[maskIndex];
+        const inputChar = maskedValue[valueIndex];
+        if (tokens[maskChar]) {
+            // This is a token position
+            if (tokens[maskChar].pattern.test(inputChar)) {
+                raw += inputChar;
+            }
+            valueIndex++;
+        }
+        else {
+            // This is a literal - skip it
+            if (inputChar === maskChar) {
+                valueIndex++;
+            }
+        }
+    }
+    return raw;
+}
+/**
+ * Common mask patterns
+ */
+export const MASK_PATTERNS = {
+    phone: '(999) 999-9999',
+    phoneIntl: '+9 (999) 999-9999',
+    ssn: '999-99-9999',
+    zip: '99999',
+    zipPlus4: '99999-9999',
+    creditCard: '9999 9999 9999 9999',
+    date: '99/99/9999',
+    time: '99:99',
+    time24: '99:99',
+    currency: '$9,999.99'
+};

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { Sform, Sfield, Sbutton } from './Sform/index.js';
+export type { ValidateOn, FieldState, SfieldClasses, InputType, SelectOption, SformContext, SformProps, ButtonFormState, ButtonInputProps, InputAffixProps, SfieldTypeMap, AllowedSfieldType, TypedSfieldProps, SfieldBaseProps, TypedBaseSfieldProps, SfieldTextProps, SfieldPasswordProps, SfieldNumberProps, SfieldTextareaProps, SfieldSelectProps, SfieldCheckboxProps, SfieldCheckboxGroupProps, SfieldRadioProps, SfieldRangeProps, SfieldToggleProps, SfieldToggleOptionsProps, SfieldMaskedProps, RemoteForm, RemoteFormField, RemoteFormFields, RemoteFormFieldValue, RemoteFormInput, RemoteFormIssue } from './Sform/index.js';

package/dist/index.js

@@ -0,0 +1 @@
+export { Sform, Sfield, Sbutton } from './Sform/index.js';

package/package.json

@@ -0,0 +1,78 @@
+{
+	"name": "@samuel-charpentier/sform",
+	"version": "0.0.1",
+	"description": "A Svelte 5 form library for SvelteKit remote forms",
+	"keywords": [
+		"svelte",
+		"forms",
+		"sveltekit"
+	],
+	"author": "Samuel Charpentier",
+	"license": "MIT",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/SamuelCharpentier/sform.git"
+	},
+	"homepage": "https://github.com/SamuelCharpentier/sform#readme",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build && npm run prepack",
+		"preview": "vite preview",
+		"prepare": "svelte-kit sync || echo ''",
+		"prepack": "svelte-kit sync && svelte-package && publint",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"format": "prettier --write .",
+		"lint": "prettier --check . && eslint .",
+		"test:unit": "vitest",
+		"test": "npm run test:unit -- --run"
+	},
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*"
+	],
+	"sideEffects": [
+		"**/*.css"
+	],
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"type": "module",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js"
+		}
+	},
+	"peerDependencies": {
+		"svelte": "^5.0.0"
+	},
+	"devDependencies": {
+		"@eslint/compat": "^1.4.0",
+		"@eslint/js": "^9.39.1",
+		"@sveltejs/adapter-auto": "^7.0.0",
+		"@sveltejs/kit": "^2.49.1",
+		"@sveltejs/package": "^2.5.7",
+		"@sveltejs/vite-plugin-svelte": "^6.2.1",
+		"@types/node": "^22",
+		"@vitest/browser-playwright": "^4.0.15",
+		"eslint": "^9.39.1",
+		"eslint-config-prettier": "^10.1.8",
+		"eslint-plugin-svelte": "^3.13.1",
+		"globals": "^16.5.0",
+		"playwright": "^1.57.0",
+		"prettier": "^3.7.4",
+		"prettier-plugin-svelte": "^3.4.0",
+		"publint": "^0.3.15",
+		"svelte": "^5.45.6",
+		"svelte-check": "^4.3.4",
+		"typescript": "^5.9.3",
+		"typescript-eslint": "^8.48.1",
+		"vite": "^7.2.6",
+		"vitest": "^4.0.15",
+		"vitest-browser-svelte": "^2.0.1"
+	},
+	"dependencies": {
+		"valibot": "^1.2.0"
+	}
+}