@iankibetsh/sh-tailwind 0.1.0 → 0.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iankibetsh/sh-tailwind",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Vue 3 + Tailwind CSS v4 component library for Laravel backends, built on @iankibetsh/sh-core. Forms, dialogs, drawers and action components.",
   "type": "module",
   "main": "./dist/sh-tailwind.cjs.js",
@@ -19,7 +19,8 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "prepublishOnly": "vite build"
   },
   "keywords": [
     "vue",

package/src/components/form/ShForm.vue

@@ -10,6 +10,8 @@ import TextInput from './inputs/TextInput.vue'
 import TextAreaInput from './inputs/TextAreaInput.vue'
 import EmailInput from './inputs/EmailInput.vue'
 import PasswordInput from './inputs/PasswordInput.vue'
+import PinInput from './inputs/PinInput.vue'
+import MaskedInput from './inputs/MaskedInput.vue'
 import NumberInput from './inputs/NumberInput.vue'
 import DateInput from './inputs/DateInput.vue'
 import SelectInput from './inputs/SelectInput.vue'
@@ -48,6 +50,7 @@ const builtins = {
     textarea: TextAreaInput,
     email: EmailInput,
     password: PasswordInput,
+    pin: PinInput,
     number: NumberInput,
     date: DateInput,
     select: SelectInput,
@@ -93,8 +96,14 @@ const formSteps = computed(() => {
 
 const isLastStep = computed(() => currentStep.value >= formSteps.value.length - 1)
 
-const resolveComponent = (field) =>
-    field.component ?? injectedComponents[field.type] ?? builtins[field.type] ?? builtins.text
+const resolveComponent = (field) => {
+    // a `mask` (string/object/function) auto-formats via MaskedInput,
+    // except for pins (their `secret` flag is unrelated to formatting)
+    if (field.mask && field.type !== 'pin') {
+        return MaskedInput
+    }
+    return field.component ?? injectedComponents[field.type] ?? builtins[field.type] ?? builtins.text
+}
 
 const inputClass = (field) => {
     if (errors[field.name]) {
@@ -119,6 +128,8 @@ const inputProps = (field) => ({
     ...(field.type === 'textarea' ? { rows: field.rows } : {}),
     ...(field.type === 'date' ? { withTime: field.withTime, min: field.min, max: field.max } : {}),
     ...(field.type === 'phone' ? { countryCode: field.countryCode, detectCountry: field.detectCountry } : {}),
+    ...(field.type === 'pin' ? { length: field.length ?? field.digits, secret: field.secret } : {}),
+    ...(field.mask && field.type !== 'pin' ? { mask: field.mask } : {}),
     ...(field.props ?? {})
 })
 

package/src/components/form/inputs/MaskedInput.vue

@@ -0,0 +1,61 @@
+<script setup>
+import { nextTick, ref, watch } from 'vue'
+import { applyMask, maskInputMode } from '../../../utils/mask.js'
+
+const props = defineProps({
+    modelValue: [String, Number],
+    // mask spec: named ('money'|'integer'|'decimal'), pattern string,
+    // options object, or a (value) => string function
+    mask: { type: [String, Object, Function], required: true },
+    placeholder: String,
+    isInvalid: Boolean,
+    disabled: Boolean
+})
+const emit = defineEmits(['update:modelValue', 'clearValidationErrors'])
+
+const display = ref('')
+
+const sync = (value) => {
+    const { display: formatted } = applyMask(value, props.mask)
+    if (formatted !== display.value) {
+        display.value = formatted
+    }
+}
+watch(() => props.modelValue, sync, { immediate: true })
+watch(() => props.mask, () => sync(props.modelValue))
+
+const onInput = (event) => {
+    emit('clearValidationErrors')
+    const el = event.target
+    const prevCaret = el.selectionStart ?? el.value.length
+    const prevLen = el.value.length
+    const { display: formatted, model } = applyMask(el.value, props.mask)
+    display.value = formatted
+    emit('update:modelValue', model)
+    // keep the caret stable relative to the end as separators are inserted
+    nextTick(() => {
+        if (el.type !== 'text' && el.type !== 'tel') {
+            return
+        }
+        let pos = prevCaret + (formatted.length - prevLen)
+        pos = Math.max(0, Math.min(pos, formatted.length))
+        try {
+            el.setSelectionRange(pos, pos)
+        } catch (err) {
+            // some input types don't support selection range; ignore
+        }
+    })
+}
+</script>
+
+<template>
+    <input
+        :value="display"
+        type="text"
+        :inputmode="maskInputMode(mask)"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        @input="onInput"
+        @focus="emit('clearValidationErrors')"
+    >
+</template>

package/src/components/form/inputs/PinInput.vue

@@ -0,0 +1,125 @@
+<script setup>
+import { computed, nextTick, ref, watch } from 'vue'
+import { useTheme } from '../../../theme/useTheme.js'
+
+defineOptions({ inheritAttrs: false })
+
+const props = defineProps({
+    modelValue: [String, Number],
+    // number of digit boxes
+    length: { type: [Number, String], default: 4 },
+    // render entries as dots (secret PIN) vs. visible (OTP code)
+    secret: Boolean,
+    isInvalid: Boolean,
+    disabled: Boolean
+})
+const emit = defineEmits(['update:modelValue', 'clearValidationErrors', 'complete'])
+
+const t = useTheme('inputs')
+const count = computed(() => Math.max(1, parseInt(props.length) || 4))
+const boxes = ref([]) // input element refs
+const digits = ref([])
+
+const seed = (value) => {
+    const chars = String(value ?? '').replace(/\D/g, '').slice(0, count.value).split('')
+    digits.value = Array.from({ length: count.value }, (_, i) => chars[i] ?? '')
+}
+seed(props.modelValue)
+
+// re-seed when the count changes or the model is set externally
+watch(count, () => seed(props.modelValue))
+watch(() => props.modelValue, (value) => {
+    if (value !== digits.value.join('')) {
+        seed(value)
+    }
+})
+
+const emitValue = () => {
+    const value = digits.value.join('')
+    emit('update:modelValue', value)
+    if (value.length === count.value) {
+        emit('complete', value)
+    }
+}
+
+const focusBox = (index) => {
+    nextTick(() => {
+        const el = boxes.value[index]
+        el?.focus()
+        el?.select()
+    })
+}
+
+const onInput = (index, event) => {
+    emit('clearValidationErrors')
+    const raw = event.target.value.replace(/\D/g, '')
+    if (!raw) {
+        digits.value[index] = ''
+        emitValue()
+        return
+    }
+    // take the last typed digit; advance through remaining boxes if pasted
+    const chars = raw.split('')
+    let i = index
+    for (const char of chars) {
+        if (i >= count.value) break
+        digits.value[i] = char
+        i++
+    }
+    emitValue()
+    focusBox(Math.min(i, count.value - 1))
+}
+
+const onKeydown = (index, event) => {
+    if (event.key === 'Backspace') {
+        event.preventDefault()
+        if (digits.value[index]) {
+            digits.value[index] = ''
+        } else if (index > 0) {
+            digits.value[index - 1] = ''
+            focusBox(index - 1)
+        }
+        emitValue()
+    } else if (event.key === 'ArrowLeft' && index > 0) {
+        focusBox(index - 1)
+    } else if (event.key === 'ArrowRight' && index < count.value - 1) {
+        focusBox(index + 1)
+    }
+}
+
+const onPaste = (event) => {
+    event.preventDefault()
+    const text = (event.clipboardData?.getData('text') ?? '').replace(/\D/g, '').slice(0, count.value)
+    seed(text)
+    emitValue()
+    focusBox(Math.min(text.length, count.value - 1))
+}
+
+const boxClass = (index) => {
+    if (props.isInvalid) {
+        return t.value.pin.boxInvalid
+    }
+    return digits.value[index] ? t.value.pin.boxFilled : t.value.pin.box
+}
+</script>
+
+<template>
+    <div :class="t.pin.wrapper">
+        <input
+            v-for="(digit, index) in digits"
+            :key="index"
+            :ref="el => (boxes[index] = el)"
+            :value="digit"
+            :type="secret ? 'password' : 'text'"
+            inputmode="numeric"
+            autocomplete="one-time-code"
+            maxlength="1"
+            :disabled="disabled"
+            :class="boxClass(index)"
+            @input="onInput(index, $event)"
+            @keydown="onKeydown(index, $event)"
+            @paste="onPaste"
+            @focus="$event.target.select(); emit('clearValidationErrors')"
+        >
+    </div>
+</template>

package/src/components/table/ShTable.vue

@@ -451,7 +451,7 @@ defineExpose({ reload: () => reloadData(), records })
         </template>
 
         <div v-if="selected.length && activeMultiActions.length" :class="t.multiBar">
-            <div class="text-sm text-gray-700 dark:text-gray-200">
+            <div class="text-sm text-gray-700">
                 <span :class="t.multiCount">{{ selected.length }}</span>
                 selected
             </div>

package/src/index.js

@@ -35,6 +35,9 @@ export { default as TextInput } from './components/form/inputs/TextInput.vue'
 export { default as TextAreaInput } from './components/form/inputs/TextAreaInput.vue'
 export { default as EmailInput } from './components/form/inputs/EmailInput.vue'
 export { default as PasswordInput } from './components/form/inputs/PasswordInput.vue'
+export { default as PinInput } from './components/form/inputs/PinInput.vue'
+export { default as MaskedInput } from './components/form/inputs/MaskedInput.vue'
+export { applyMask, maskMoney, maskPattern } from './utils/mask.js'
 export { default as NumberInput } from './components/form/inputs/NumberInput.vue'
 export { default as DateInput } from './components/form/inputs/DateInput.vue'
 export { default as SelectInput } from './components/form/inputs/SelectInput.vue'

package/src/theme/defaultTheme.js

@@ -4,55 +4,61 @@ export const defaultTheme = {
     form: {
         form: 'space-y-4',
         group: 'space-y-1',
-        label: 'block text-sm font-medium text-gray-700 dark:text-gray-200',
+        label: 'block text-sm font-medium text-gray-700',
         required: 'text-red-500',
-        input: 'block w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 shadow-sm placeholder:text-gray-400 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/30 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100',
-        inputInvalid: 'block w-full rounded-md border border-red-500 bg-white px-3 py-2 text-sm text-gray-900 shadow-sm placeholder:text-gray-400 focus:border-red-500 focus:outline-none focus:ring-2 focus:ring-red-500/30 dark:bg-gray-800 dark:text-gray-100',
-        helper: 'text-xs text-gray-500 dark:text-gray-400',
+        input: 'block w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 shadow-sm placeholder:text-gray-400 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/30 disabled:cursor-not-allowed disabled:opacity-50',
+        inputInvalid: 'block w-full rounded-md border border-red-500 bg-white px-3 py-2 text-sm text-gray-900 shadow-sm placeholder:text-gray-400 focus:border-red-500 focus:outline-none focus:ring-2 focus:ring-red-500/30',
+        helper: 'text-xs text-gray-500',
         error: 'text-xs text-red-600',
-        errorTitle: 'rounded-md bg-red-50 px-4 py-3 text-sm text-red-700 dark:bg-red-950 dark:text-red-300',
+        errorTitle: 'rounded-md bg-red-50 px-4 py-3 text-sm text-red-700',
         nav: 'flex items-center justify-end gap-3 pt-2',
         submitBtn: 'inline-flex items-center justify-center gap-2 rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500/40 disabled:cursor-not-allowed disabled:opacity-60',
-        prevBtn: 'inline-flex items-center justify-center gap-2 rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200',
+        prevBtn: 'inline-flex items-center justify-center gap-2 rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-300',
         nextBtn: 'inline-flex items-center justify-center gap-2 rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500/40',
         steps: {
             wrapper: 'mb-6 flex items-start',
             step: 'relative flex flex-1 flex-col items-center gap-1',
-            circle: 'z-10 flex size-9 items-center justify-center rounded-full border-2 border-gray-300 bg-white text-sm font-semibold text-gray-500 dark:border-gray-600 dark:bg-gray-800',
+            circle: 'z-10 flex size-9 items-center justify-center rounded-full border-2 border-gray-300 bg-white text-sm font-semibold text-gray-500',
             circleActive: 'z-10 flex size-9 items-center justify-center rounded-full border-2 border-blue-600 bg-blue-600 text-sm font-semibold text-white',
             circleDone: 'z-10 flex size-9 items-center justify-center rounded-full border-2 border-emerald-500 bg-emerald-500 text-sm font-semibold text-white',
-            title: 'text-xs text-gray-600 dark:text-gray-300',
+            title: 'text-xs text-gray-600',
             titleActive: 'text-xs font-semibold text-blue-600',
-            connector: 'absolute top-4 right-1/2 -z-0 h-0.5 w-full bg-gray-200 dark:bg-gray-700',
+            connector: 'absolute top-4 right-1/2 -z-0 h-0.5 w-full bg-gray-200',
             connectorDone: 'absolute top-4 right-1/2 -z-0 h-0.5 w-full bg-emerald-500'
         }
     },
     inputs: {
-        select: 'block w-full appearance-none rounded-md border border-gray-300 bg-white px-3 py-2 pr-8 text-sm text-gray-900 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/30 disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100',
+        select: 'block w-full appearance-none rounded-md border border-gray-300 bg-white px-3 py-2 pr-8 text-sm text-gray-900 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/30 disabled:opacity-50',
         passwordWrapper: 'relative',
-        passwordToggle: 'absolute inset-y-0 right-2 flex items-center text-gray-400 hover:text-gray-600 dark:hover:text-gray-300',
+        passwordToggle: 'absolute inset-y-0 right-2 flex items-center text-gray-400 hover:text-gray-600',
+        pin: {
+            wrapper: 'flex items-center gap-2',
+            box: 'size-11 rounded-md border border-gray-300 bg-white text-center text-lg font-semibold text-gray-900 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/30 disabled:cursor-not-allowed disabled:opacity-50',
+            boxFilled: 'size-11 rounded-md border border-blue-400 bg-blue-50 text-center text-lg font-semibold text-gray-900 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/30',
+            boxInvalid: 'size-11 rounded-md border border-red-500 bg-white text-center text-lg font-semibold text-gray-900 shadow-sm focus:border-red-500 focus:outline-none focus:ring-2 focus:ring-red-500/30'
+        },
         suggest: {
             wrapper: 'relative',
             badges: 'mb-1 flex flex-wrap gap-1',
-            badge: 'inline-flex items-center gap-1 rounded-full bg-gray-200 px-2 py-0.5 text-xs text-gray-700 dark:bg-gray-700 dark:text-gray-200',
+            badge: 'inline-flex items-center gap-1 rounded-full bg-gray-200 px-2 py-0.5 text-xs text-gray-700',
             badgeRemove: 'cursor-pointer text-gray-500 hover:text-red-600',
-            dropdown: 'absolute z-20 mt-1 max-h-60 w-full overflow-auto rounded-md border border-gray-200 bg-white py-1 shadow-lg dark:border-gray-700 dark:bg-gray-800',
-            option: 'cursor-pointer px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700',
-            optionActive: 'cursor-pointer bg-blue-50 px-3 py-2 text-sm text-blue-700 dark:bg-gray-700 dark:text-blue-300',
+            dropdown: 'absolute z-20 mt-1 max-h-60 w-full overflow-auto rounded-md border border-gray-200 bg-white py-1 shadow-lg',
+            option: 'cursor-pointer px-3 py-2 text-sm text-gray-700 hover:bg-gray-100',
+            optionActive: 'cursor-pointer bg-blue-50 px-3 py-2 text-sm text-blue-700',
             empty: 'px-3 py-2 text-sm text-gray-400'
         },
         phone: {
-            wrapper: 'relative flex items-stretch rounded-md border border-gray-300 bg-white shadow-sm focus-within:border-blue-500 focus-within:ring-2 focus-within:ring-blue-500/30 dark:border-gray-600 dark:bg-gray-800',
-            trigger: 'flex shrink-0 cursor-pointer items-center gap-1.5 rounded-l-md border-r border-gray-200 bg-gray-50 px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 focus:outline-none dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600',
+            wrapper: 'relative flex items-stretch rounded-md border border-gray-300 bg-white shadow-sm focus-within:border-blue-500 focus-within:ring-2 focus-within:ring-blue-500/30',
+            trigger: 'flex shrink-0 cursor-pointer items-center gap-1.5 rounded-l-md border-r border-gray-200 bg-gray-50 px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 focus:outline-none',
             flag: 'text-base leading-none',
-            dial: 'text-sm font-medium text-gray-600 dark:text-gray-300',
+            dial: 'text-sm font-medium text-gray-600',
             chevron: 'size-3.5 text-gray-400',
-            input: 'block w-full rounded-r-md border-0 bg-transparent px-3 py-2 text-sm text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-0 dark:text-gray-100',
-            dropdown: 'absolute left-0 top-full z-20 mt-1 w-72 overflow-hidden rounded-lg border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-800',
-            search: 'block w-full border-0 border-b border-gray-100 bg-transparent px-3 py-2.5 text-sm text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-0 dark:border-gray-700 dark:text-gray-100',
+            input: 'block w-full rounded-r-md border-0 bg-transparent px-3 py-2 text-sm text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-0',
+            dropdown: 'absolute left-0 top-full z-20 mt-1 w-72 overflow-hidden rounded-lg border border-gray-200 bg-white shadow-lg',
+            search: 'block w-full border-0 border-b border-gray-100 bg-transparent px-3 py-2.5 text-sm text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-0',
             list: 'max-h-60 overflow-y-auto py-1',
-            option: 'flex w-full cursor-pointer items-center gap-2.5 px-3 py-2 text-left text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700',
-            optionActive: 'flex w-full cursor-pointer items-center gap-2.5 bg-blue-50 px-3 py-2 text-left text-sm text-blue-700 dark:bg-gray-700 dark:text-blue-300',
+            option: 'flex w-full cursor-pointer items-center gap-2.5 px-3 py-2 text-left text-sm text-gray-700 hover:bg-gray-100',
+            optionActive: 'flex w-full cursor-pointer items-center gap-2.5 bg-blue-50 px-3 py-2 text-left text-sm text-blue-700',
             optionName: 'flex-1 truncate',
             optionDial: 'text-xs text-gray-400',
             empty: 'px-3 py-3 text-center text-sm text-gray-400'
@@ -61,12 +67,12 @@ export const defaultTheme = {
     dialog: {
         backdrop: 'fixed inset-0 bg-black/50',
         wrapper: 'fixed inset-0 flex items-center justify-center overflow-y-auto p-4',
-        panel: 'relative flex max-h-[90vh] w-full flex-col rounded-xl bg-white shadow-xl outline-none dark:bg-gray-900',
-        header: 'flex items-center justify-between border-b border-gray-100 px-5 py-3.5 dark:border-gray-800',
-        title: 'text-base font-semibold text-gray-900 dark:text-gray-100',
-        closeBtn: 'rounded-md p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-600 focus:outline-none dark:hover:bg-gray-800',
+        panel: 'relative flex max-h-[90vh] w-full flex-col rounded-xl bg-white shadow-xl outline-none',
+        header: 'flex items-center justify-between border-b border-gray-100 px-5 py-3.5',
+        title: 'text-base font-semibold text-gray-900',
+        closeBtn: 'rounded-md p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-600 focus:outline-none',
         body: 'overflow-y-auto px-5 py-4',
-        footer: 'flex justify-end gap-2 border-t border-gray-100 px-5 py-3 dark:border-gray-800',
+        footer: 'flex justify-end gap-2 border-t border-gray-100 px-5 py-3',
         sizes: {
             sm: 'max-w-sm',
             md: 'max-w-lg',
@@ -77,10 +83,10 @@ export const defaultTheme = {
     },
     drawer: {
         backdrop: 'fixed inset-0 bg-black/50',
-        panel: 'fixed flex flex-col bg-white shadow-xl outline-none dark:bg-gray-900',
-        header: 'flex items-center justify-between border-b border-gray-100 px-5 py-3.5 dark:border-gray-800',
-        title: 'text-base font-semibold text-gray-900 dark:text-gray-100',
-        closeBtn: 'rounded-md p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-600 focus:outline-none dark:hover:bg-gray-800',
+        panel: 'fixed flex flex-col bg-white shadow-xl outline-none',
+        header: 'flex items-center justify-between border-b border-gray-100 px-5 py-3.5',
+        title: 'text-base font-semibold text-gray-900',
+        closeBtn: 'rounded-md p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-600 focus:outline-none',
         body: 'flex-1 overflow-y-auto px-5 py-4',
         sizes: {
             sm: 'max-w-xs',
@@ -100,48 +106,48 @@ export const defaultTheme = {
     table: {
         wrapper: 'space-y-3',
         toolbar: 'flex flex-col gap-3 md:flex-row md:items-center md:justify-between',
-        search: 'block w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 shadow-sm placeholder:text-gray-400 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/30 md:max-w-xs dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100',
+        search: 'block w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 shadow-sm placeholder:text-gray-400 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/30 md:max-w-xs',
         exactLabel: 'inline-flex items-center gap-1.5 text-xs text-gray-500',
         rangeWrapper: 'flex items-center gap-2',
-        rangeInput: 'rounded-md border border-gray-300 px-2 py-1.5 text-sm text-gray-700 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200',
-        offline: 'flex items-center gap-2 rounded-md border border-amber-200 bg-amber-50 px-3 py-2 text-xs text-amber-700 dark:border-amber-700 dark:bg-amber-950 dark:text-amber-300',
-        container: 'hidden overflow-x-auto rounded-lg border border-gray-200 md:block dark:border-gray-700',
-        table: 'w-full min-w-full divide-y divide-gray-200 text-sm dark:divide-gray-700',
-        thead: 'bg-gray-50 dark:bg-gray-800',
-        th: 'px-4 py-2.5 text-left text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400',
-        sortBtn: 'inline-flex cursor-pointer items-center gap-1 uppercase hover:text-gray-800 dark:hover:text-gray-200',
-        tbody: 'divide-y divide-gray-100 bg-white dark:divide-gray-800 dark:bg-gray-900',
+        rangeInput: 'rounded-md border border-gray-300 px-2 py-1.5 text-sm text-gray-700',
+        offline: 'flex items-center gap-2 rounded-md border border-amber-200 bg-amber-50 px-3 py-2 text-xs text-amber-700',
+        container: 'hidden overflow-x-auto rounded-lg border border-gray-200 md:block',
+        table: 'w-full min-w-full divide-y divide-gray-200 text-sm',
+        thead: 'bg-gray-50',
+        th: 'px-4 py-2.5 text-left text-xs font-semibold uppercase tracking-wide text-gray-500',
+        sortBtn: 'inline-flex cursor-pointer items-center gap-1 uppercase hover:text-gray-800',
+        tbody: 'divide-y divide-gray-100 bg-white',
         tr: '',
-        trClickable: 'cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800',
-        td: 'px-4 py-2.5 text-gray-700 dark:text-gray-200',
+        trClickable: 'cursor-pointer hover:bg-gray-50',
+        td: 'px-4 py-2.5 text-gray-700',
         money: 'font-semibold text-emerald-600',
         empty: 'px-4 py-10 text-center text-sm text-gray-400',
-        error: 'rounded-md bg-red-50 px-4 py-3 text-sm text-red-700 dark:bg-red-950 dark:text-red-300',
+        error: 'rounded-md bg-red-50 px-4 py-3 text-sm text-red-700',
         loading: 'flex justify-center px-4 py-10 text-gray-400',
         actionsCell: 'whitespace-nowrap px-4 py-2.5 text-right',
         actionBtn: 'ml-3 inline-flex cursor-pointer items-center gap-1 text-sm text-blue-600 hover:underline first:ml-0',
         checkbox: 'size-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500',
         cards: 'space-y-3 md:hidden',
-        card: 'rounded-lg border border-gray-200 bg-white p-4 dark:border-gray-700 dark:bg-gray-900',
+        card: 'rounded-lg border border-gray-200 bg-white p-4',
         cardLabel: 'text-xs font-semibold uppercase tracking-wide text-gray-400',
-        cardValue: 'mb-2 text-sm text-gray-700 dark:text-gray-200',
+        cardValue: 'mb-2 text-sm text-gray-700',
         pagination: {
             wrapper: 'flex flex-col items-center justify-between gap-3 md:flex-row',
             info: 'text-xs text-gray-500',
-            perPage: 'rounded-md border border-gray-300 px-2 py-1 text-xs text-gray-600 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300',
+            perPage: 'rounded-md border border-gray-300 px-2 py-1 text-xs text-gray-600',
             pages: 'flex items-center gap-1',
-            pageBtn: 'inline-flex size-8 cursor-pointer items-center justify-center rounded-md border border-gray-300 text-xs text-gray-600 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-40 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-800',
+            pageBtn: 'inline-flex size-8 cursor-pointer items-center justify-center rounded-md border border-gray-300 text-xs text-gray-600 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-40',
             pageBtnActive: 'inline-flex size-8 items-center justify-center rounded-md border border-blue-600 bg-blue-600 text-xs font-semibold text-white',
             ellipsis: 'px-1 text-xs text-gray-400',
-            loadMore: 'inline-flex items-center justify-center gap-2 rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:opacity-60 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200'
+            loadMore: 'inline-flex items-center justify-center gap-2 rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:opacity-60'
         },
-        multiBar: 'fixed bottom-5 left-1/2 z-40 flex min-w-80 -translate-x-1/2 items-center justify-between gap-4 rounded-xl border border-gray-200 bg-white p-3 shadow-lg dark:border-gray-700 dark:bg-gray-900',
+        multiBar: 'fixed bottom-5 left-1/2 z-40 flex min-w-80 -translate-x-1/2 items-center justify-between gap-4 rounded-xl border border-gray-200 bg-white p-3 shadow-lg',
         multiCount: 'inline-flex items-center justify-center rounded-full bg-blue-600 px-2 py-0.5 text-xs font-semibold text-white',
-        multiBtn: 'inline-flex items-center justify-center gap-1 rounded-md border border-blue-200 px-3 py-1.5 text-xs font-medium text-blue-700 hover:bg-blue-50 dark:border-blue-800 dark:text-blue-300'
+        multiBtn: 'inline-flex items-center justify-center gap-1 rounded-md border border-blue-200 px-3 py-1.5 text-xs font-medium text-blue-700 hover:bg-blue-50'
     },
     buttons: {
         primary: 'inline-flex items-center justify-center gap-2 rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500/40 disabled:opacity-60',
-        secondary: 'inline-flex items-center justify-center gap-2 rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200',
+        secondary: 'inline-flex items-center justify-center gap-2 rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none',
         danger: 'inline-flex items-center justify-center gap-2 rounded-md bg-red-600 px-4 py-2 text-sm font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500/40',
         link: 'inline-flex cursor-pointer items-center gap-1 text-sm text-blue-600 hover:underline'
     }

package/src/utils/mask.js

@@ -0,0 +1,103 @@
+// Lightweight, dependency-free input masking.
+//
+// A field's `mask` can be:
+//   - a named numeric mask: 'money' | 'integer' | 'decimal'
+//   - a pattern string: '#' = digit, 'A' = letter, 'N'/'*' = alphanumeric,
+//     any other char is a literal e.g. '#### #### #### ####', '(###) ###-####'
+//   - an options object: { pattern, unmask } or { type:'money', decimals, prefix, suffix }
+//   - a function: (rawValue) => formattedString
+//
+// applyMask returns { display, model }:
+//   display = what the user sees, model = what v-model emits (raw number for
+//   money, stripped tokens when unmask:true, otherwise the formatted string).
+
+const TOKENS = {
+    '#': /[0-9]/,
+    A: /[a-zA-Z]/,
+    N: /[a-zA-Z0-9]/,
+    '*': /[a-zA-Z0-9]/
+}
+
+const NAMED = ['money', 'integer', 'number', 'decimal']
+
+export function isNamedNumericMask (mask) {
+    return typeof mask === 'string' && NAMED.includes(mask)
+}
+
+export function maskPattern (raw, pattern, { unmask = false } = {}) {
+    const chars = String(raw ?? '').split('')
+    let display = ''
+    let model = ''
+    let ci = 0
+    for (let i = 0; i < pattern.length; i++) {
+        const token = TOKENS[pattern[i]]
+        if (token) {
+            while (ci < chars.length && !token.test(chars[ci])) ci++
+            if (ci >= chars.length) break
+            display += chars[ci]
+            model += chars[ci]
+            ci++
+        } else if (ci < chars.length) {
+            // insert literal only while there is more input to place after it
+            display += pattern[i]
+        }
+    }
+    return { display, model: unmask ? model : display }
+}
+
+export function maskMoney (raw, { decimals = 2, prefix = '', suffix = '', integer = false } = {}) {
+    let s = String(raw ?? '').replace(/[^0-9.]/g, '')
+    const dot = s.indexOf('.')
+    if (dot !== -1) {
+        s = s.slice(0, dot + 1) + s.slice(dot + 1).replace(/\./g, '')
+    }
+    if (integer) {
+        // drop the decimal part rather than merging the digits
+        s = s.split('.')[0]
+    }
+    let [int = '', dec] = s.split('.')
+    int = int.replace(/^0+(?=\d)/, '')
+    const grouped = int.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+    const hasDot = s.includes('.') && !integer
+
+    let display = grouped
+    let model = int
+    if (hasDot) {
+        dec = (dec ?? '').slice(0, decimals)
+        display = (grouped || '0') + '.' + dec
+        model = (int || '0') + '.' + dec
+    }
+    if (display) {
+        display = prefix + display + suffix
+    }
+    return { display, model }
+}
+
+export function applyMask (value, mask) {
+    if (typeof mask === 'function') {
+        const display = mask(value) ?? ''
+        return { display: String(display), model: String(display) }
+    }
+    if (mask && typeof mask === 'object') {
+        if (mask.pattern) {
+            return maskPattern(value, mask.pattern, mask)
+        }
+        return maskMoney(value, mask)
+    }
+    if (isNamedNumericMask(mask)) {
+        return maskMoney(value, { integer: mask === 'integer' || mask === 'number', decimals: mask === 'integer' || mask === 'number' ? 0 : 2 })
+    }
+    return maskPattern(value, String(mask))
+}
+
+// inputmode hint for the on-screen keyboard
+export function maskInputMode (mask) {
+    if (isNamedNumericMask(mask) || (mask && typeof mask === 'object' && !mask.pattern)) {
+        return 'decimal'
+    }
+    const pattern = typeof mask === 'string' ? mask : (mask && mask.pattern)
+    if (typeof pattern === 'string' && /^[#\s().+-]*$/.test(pattern)) {
+        return 'numeric'
+    }
+    return 'text'
+}

package/src/utils/normalizeField.js

@@ -3,7 +3,7 @@ import { startCase } from './strings.js'
 // Exact-name inference carried over from shframework's ShAutoForm
 const NAME_TYPE_MAP = {
     password: 'password',
-    pin: 'password',
+    pin: 'pin',
     password_confirmation: 'password',
     message: 'textarea',
     description: 'textarea',