@iankibetsh/sh-tailwind 0.1.0

package/src/index.js

@@ -0,0 +1,45 @@
+// Plugin + theming
+export { ShTailwind, createShTailwind } from './plugin/ShTailwind.js'
+export { defaultTheme } from './theme/defaultTheme.js'
+export { SH_TW_THEME, SH_TW_COMPONENTS, SH_DIALOG_CONTEXT } from './theme/keys.js'
+export { useTheme } from './theme/useTheme.js'
+
+// Composables
+export { useDialog } from './composables/useDialog.js'
+
+// Form
+export { default as ShForm } from './components/form/ShForm.vue'
+export { default as ShFormSteps } from './components/form/ShFormSteps.vue'
+
+// Overlays
+export { default as ShDialog } from './components/overlay/ShDialog.vue'
+export { default as ShDrawer } from './components/overlay/ShDrawer.vue'
+export { default as ShDialogBtn } from './components/overlay/ShDialogBtn.vue'
+export { default as ShDrawerBtn } from './components/overlay/ShDrawerBtn.vue'
+export { default as ShDialogForm } from './components/overlay/ShDialogForm.vue'
+
+// Table
+export { default as ShTable } from './components/table/ShTable.vue'
+export { default as ShTablePagination } from './components/table/ShTablePagination.vue'
+export { useTableData } from './table/useTableData.js'
+export { localQuery } from './table/localQuery.js'
+export { default as shTableCache, clearTableCache } from './table/tableCache.js'
+
+// Actions
+export { default as ShConfirmAction } from './components/actions/ShConfirmAction.vue'
+export { default as ShSilentAction } from './components/actions/ShSilentAction.vue'
+export { default as ShSpinner } from './components/actions/ShSpinner.vue'
+
+// Inputs (also used by the formComponents override mechanism)
+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 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'
+export { default as PhoneInput } from './components/form/inputs/PhoneInput.vue'
+export { default as ShSuggest } from './components/form/inputs/ShSuggest.vue'
+
+// Data
+export { default as countries } from './data/countries.js'

package/src/plugin/ShTailwind.js

@@ -0,0 +1,36 @@
+import { ShCore } from '@iankibetsh/sh-core'
+import { defaultTheme } from '../theme/defaultTheme.js'
+import { SH_TW_THEME, SH_TW_COMPONENTS } from '../theme/keys.js'
+import { deepMerge } from '../utils/deepMerge.js'
+
+// Tailwind UI layer plugin: installs sh-core (API client, auth strategy,
+// config, session, v-if-user-can) then provides the theme and input
+// component overrides. Registers no routes in v1 (options.router reserved
+// for a future Tailwind ShAuth).
+export const ShTailwind = {
+    install (app, options = {}) {
+        ShCore.install(app, options)
+
+        const theme = deepMerge(defaultTheme, options.theme ?? {})
+        app.provide(SH_TW_THEME, theme)
+        app.provide(SH_TW_COMPONENTS, options.formComponents ?? {})
+
+        // Compat bridge for ecosystem components that inject the legacy keys
+        app.provide('formComponents', options.formComponents ?? {})
+        app.provide('shFormElementClasses', {
+            formGroup: theme.form.group,
+            formLabel: theme.form.label,
+            formControl: theme.form.input,
+            helperText: theme.form.helper,
+            invalidFeedback: theme.form.error,
+            formErrorTitle: theme.form.errorTitle,
+            actionBtn: theme.form.submitBtn
+        })
+    }
+}
+
+export const createShTailwind = (options = {}) => ({
+    install: (app) => ShTailwind.install(app, options)
+})
+
+export default ShTailwind

package/src/table/localQuery.js

@@ -0,0 +1,60 @@
+// Pure helpers that run a table query (search/sort/paginate) against the
+// offline row pool, returning the same shape as a Laravel paginator so the
+// table renders identically online and offline.
+
+export function getPath (record, path) {
+    if (!record || !path || typeof path !== 'string') {
+        return ''
+    }
+    return path.split('.').reduce((obj, key) => (obj ? obj[key] : ''), record)
+}
+
+function rowMatches (row, term, exact, depth = 0) {
+    if (row === null || typeof row === 'undefined') {
+        return false
+    }
+    if (typeof row === 'object') {
+        if (depth > 2) {
+            return false
+        }
+        return Object.values(row).some(value => rowMatches(value, term, exact, depth + 1))
+    }
+    const text = String(row).toLowerCase()
+    return exact ? text === term : text.includes(term)
+}
+
+export function localQuery (rows, { search, exact, orderBy, orderMethod, page, perPage } = {}) {
+    let filtered = rows
+
+    if (search) {
+        const term = String(search).toLowerCase()
+        filtered = rows.filter(row => rowMatches(row, term, !!exact))
+    }
+
+    if (orderBy) {
+        const direction = orderMethod === 'asc' ? 1 : -1
+        filtered = [...filtered].sort((a, b) => {
+            const left = getPath(a, orderBy)
+            const right = getPath(b, orderBy)
+            if (typeof left === 'number' && typeof right === 'number') {
+                return (left - right) * direction
+            }
+            return String(left ?? '').localeCompare(String(right ?? ''), undefined, { numeric: true }) * direction
+        })
+    }
+
+    const total = filtered.length
+    const limit = Math.max(1, Number(perPage) || 10)
+    const lastPage = Math.max(1, Math.ceil(total / limit))
+    const currentPage = Math.min(Math.max(1, Number(page) || 1), lastPage)
+    const start = (currentPage - 1) * limit
+
+    return {
+        data: filtered.slice(start, start + limit),
+        total,
+        per_page: limit,
+        current_page: currentPage,
+        last_page: lastPage,
+        from: total === 0 ? 0 : start + 1
+    }
+}

package/src/table/tableCache.js

@@ -0,0 +1,116 @@
+import { shStorage } from '@iankibetsh/sh-core'
+
+// Revamped table cache. Two stores:
+// - 'pages': exact query snapshots (endpoint+page+search+sort+range) for
+//   instant stale-while-revalidate rendering.
+// - 'rows':  a merged pool of every row ever fetched per endpoint, so
+//   search/sort/pagination can run fully offline when the network is slow
+//   or unreachable.
+const DB_NAME = 'sh_tw_table_cache'
+const PAGES_STORE = 'pages'
+const ROWS_STORE = 'rows'
+const DB_VERSION = 1
+// Cap the offline pool per endpoint so the cache can't grow unbounded
+const MAX_POOL_ROWS = 3000
+
+let dbPromise = null
+
+function getDB () {
+    if (dbPromise) {
+        return dbPromise
+    }
+    dbPromise = new Promise((resolve, reject) => {
+        const request = indexedDB.open(DB_NAME, DB_VERSION)
+        request.onupgradeneeded = (event) => {
+            const db = event.target.result
+            if (!db.objectStoreNames.contains(PAGES_STORE)) {
+                db.createObjectStore(PAGES_STORE)
+            }
+            if (!db.objectStoreNames.contains(ROWS_STORE)) {
+                db.createObjectStore(ROWS_STORE)
+            }
+        }
+        request.onsuccess = (event) => resolve(event.target.result)
+        request.onerror = (event) => reject(event.target.error)
+    })
+    return dbPromise
+}
+
+// Cache entries are scoped per logged-in user so shared devices never leak
+// another account's rows
+function userPrefix () {
+    try {
+        const user = shStorage.getItem('user')
+        return user?.id ? `u${user.id}_` : ''
+    } catch (err) {
+        return ''
+    }
+}
+
+function tx (storeName, mode, run) {
+    return getDB().then(db => new Promise((resolve, reject) => {
+        const transaction = db.transaction(storeName, mode)
+        const store = transaction.objectStore(storeName)
+        const request = run(store)
+        request.onsuccess = () => resolve(request.result)
+        request.onerror = () => reject(request.error)
+    })).catch(error => {
+        console.error('[sh-tailwind] table cache error', error)
+        return undefined
+    })
+}
+
+export async function getPage (key) {
+    const entry = await tx(PAGES_STORE, 'readonly', store => store.get(userPrefix() + key))
+    return entry?.response ?? null
+}
+
+export function setPage (key, response) {
+    return tx(PAGES_STORE, 'readwrite', store =>
+        store.put({ response, timestamp: Date.now() }, userPrefix() + key)
+    )
+}
+
+export async function getRows (endpoint) {
+    const entry = await tx(ROWS_STORE, 'readonly', store => store.get(userPrefix() + endpoint))
+    return entry?.rows ?? []
+}
+
+// Upsert freshly fetched rows into the endpoint's offline pool (merged by id)
+export async function mergeRows (endpoint, newRows) {
+    if (!Array.isArray(newRows) || !newRows.length) {
+        return
+    }
+    const existing = await getRows(endpoint)
+    const byId = new Map()
+    existing.forEach(row => {
+        if (row && typeof row.id !== 'undefined') {
+            byId.set(row.id, row)
+        }
+    })
+    newRows.forEach(row => {
+        if (row && typeof row.id !== 'undefined') {
+            byId.set(row.id, row)
+        }
+    })
+    let rows = [...byId.values()]
+    if (rows.length > MAX_POOL_ROWS) {
+        rows = rows.slice(rows.length - MAX_POOL_ROWS)
+    }
+    return tx(ROWS_STORE, 'readwrite', store =>
+        store.put({ rows, timestamp: Date.now() }, userPrefix() + endpoint)
+    )
+}
+
+export async function clearTableCache () {
+    await tx(PAGES_STORE, 'readwrite', store => store.clear())
+    await tx(ROWS_STORE, 'readwrite', store => store.clear())
+}
+
+export default {
+    getPage,
+    setPage,
+    getRows,
+    mergeRows,
+    clear: clearTableCache
+}

package/src/table/useTableData.js

@@ -0,0 +1,125 @@
+import { ref } from 'vue'
+import { shApis } from '@iankibetsh/sh-core'
+import tableCache from './tableCache.js'
+import { localQuery } from './localQuery.js'
+
+/**
+ * Table data engine with an offline-first cache:
+ * 1. Cached snapshot of the exact query renders instantly (stale-while-revalidate).
+ * 2. Network response replaces it, refreshes the snapshot and merges rows
+ *    into the endpoint's offline pool.
+ * 3. When the network fails or times out (no HTTP response), the query -
+ *    including search, sort and pagination - runs locally against the pool
+ *    and the result is flagged `offline`.
+ *
+ * `query()` must return { endpoint, params } where params carry the Laravel
+ * contract keys (page, per_page, filter_value, order_by, ...).
+ */
+export function useTableData ({ query, cacheEnabled = () => false, networkTimeout = () => 10000 }) {
+    const records = ref([])
+    const meta = ref(null) // Laravel paginator shape
+    const status = ref('loading') // loading | done | error
+    const error = ref('')
+    const offline = ref(false)
+    const fromCache = ref(false)
+
+    let requestSeq = 0
+
+    const queryKey = (endpoint, params) =>
+        endpoint + '|' + JSON.stringify(params)
+
+    const apply = (response, { append = false } = {}) => {
+        if (append) {
+            records.value.push(...(response.data ?? []))
+        } else {
+            records.value = response.data ?? []
+        }
+        meta.value = {
+            total: response.total ?? records.value.length,
+            per_page: response.per_page,
+            current_page: response.current_page ?? 1,
+            last_page: response.last_page ?? 1,
+            from: response.from ?? 1
+        }
+        status.value = 'done'
+    }
+
+    const load = async ({ append = false } = {}) => {
+        const seq = ++requestSeq
+        const { endpoint, params } = query()
+        const key = queryKey(endpoint, params)
+        const useCache = !!cacheEnabled()
+        let showedCached = false
+
+        if (!records.value.length) {
+            status.value = 'loading'
+        }
+
+        // 1. Instant render from the exact-query snapshot
+        if (useCache && !append) {
+            const cached = await tableCache.getPage(key)
+            if (cached && seq === requestSeq) {
+                apply(cached)
+                fromCache.value = true
+                showedCached = true
+            }
+        }
+
+        // 2. Network attempt (bounded so a dead connection falls back fast)
+        try {
+            const res = await shApis.doGet(endpoint, params, { timeout: networkTimeout() })
+            if (seq !== requestSeq) {
+                return
+            }
+            const response = res.data?.data ?? res.data
+            apply(response, { append })
+            offline.value = false
+            fromCache.value = false
+            error.value = ''
+            if (useCache) {
+                tableCache.setPage(key, response)
+                tableCache.mergeRows(endpoint, response.data)
+            }
+            return response
+        } catch (reason) {
+            if (seq !== requestSeq) {
+                return
+            }
+            // Server answered (4xx/5xx): a real error, not an offline situation
+            if (reason.response) {
+                if (!showedCached) {
+                    status.value = 'error'
+                    error.value = `${reason.response.status}: ${reason.response.statusText} (${endpoint})`
+                }
+                return
+            }
+            // 3. Network unreachable or timed out: run the query locally
+            offline.value = true
+            if (showedCached) {
+                return
+            }
+            if (useCache) {
+                const pool = await tableCache.getRows(endpoint)
+                if (seq !== requestSeq) {
+                    return
+                }
+                if (pool.length) {
+                    apply(localQuery(pool, {
+                        search: params.filter_value,
+                        exact: params.exact,
+                        orderBy: params.order_by,
+                        orderMethod: params.order_method,
+                        page: params.page,
+                        perPage: params.per_page
+                    }), { append: false })
+                    fromCache.value = true
+                    return
+                }
+            }
+            status.value = 'error'
+            error.value = 'You appear to be offline and there is no cached data yet'
+        }
+    }
+
+    return { records, meta, status, error, offline, fromCache, load }
+}

package/src/theme/defaultTheme.js

@@ -0,0 +1,148 @@
+// Every value is a complete Tailwind utility string (never interpolated
+// fragments) so consumers' @source extraction always finds the classes.
+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',
+        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',
+        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',
+        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',
+        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',
+            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',
+            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',
+            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',
+        passwordWrapper: 'relative',
+        passwordToggle: 'absolute inset-y-0 right-2 flex items-center text-gray-400 hover:text-gray-600 dark:hover:text-gray-300',
+        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',
+            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',
+            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',
+            flag: 'text-base leading-none',
+            dial: 'text-sm font-medium text-gray-600 dark:text-gray-300',
+            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',
+            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',
+            optionName: 'flex-1 truncate',
+            optionDial: 'text-xs text-gray-400',
+            empty: 'px-3 py-3 text-center text-sm text-gray-400'
+        }
+    },
+    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',
+        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',
+        sizes: {
+            sm: 'max-w-sm',
+            md: 'max-w-lg',
+            lg: 'max-w-2xl',
+            xl: 'max-w-4xl',
+            full: 'h-[95vh] max-w-[95vw]'
+        }
+    },
+    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',
+        body: 'flex-1 overflow-y-auto px-5 py-4',
+        sizes: {
+            sm: 'max-w-xs',
+            md: 'max-w-md',
+            lg: 'max-w-lg',
+            xl: 'max-w-2xl',
+            full: 'max-w-full'
+        },
+        sizesVertical: {
+            sm: 'max-h-48',
+            md: 'max-h-72',
+            lg: 'max-h-96',
+            xl: 'max-h-[60vh]',
+            full: 'max-h-full'
+        }
+    },
+    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',
+        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',
+        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',
+        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',
+        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',
+        cardLabel: 'text-xs font-semibold uppercase tracking-wide text-gray-400',
+        cardValue: 'mb-2 text-sm text-gray-700 dark:text-gray-200',
+        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',
+            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',
+            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'
+        },
+        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',
+        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'
+    },
+    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',
+        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/theme/keys.js

@@ -0,0 +1,3 @@
+export const SH_TW_THEME = Symbol('sh-tw-theme')
+export const SH_TW_COMPONENTS = Symbol('sh-tw-components')
+export const SH_DIALOG_CONTEXT = Symbol('sh-dialog-context')

package/src/theme/useTheme.js

@@ -0,0 +1,11 @@
+import { computed, inject, unref } from 'vue'
+import { SH_TW_THEME } from './keys.js'
+import { defaultTheme } from './defaultTheme.js'
+import { deepMerge } from '../utils/deepMerge.js'
+
+// Resolves one theme section with optional per-instance overrides.
+// Precedence: instance overrides > plugin theme > defaults.
+export function useTheme (section, overrides = null) {
+    const theme = inject(SH_TW_THEME, defaultTheme)
+    return computed(() => deepMerge(theme[section] ?? defaultTheme[section], unref(overrides) ?? {}))
+}

package/src/utils/deepMerge.js

@@ -0,0 +1,19 @@
+const isPlainObject = (v) => v !== null && typeof v === 'object' && !Array.isArray(v)
+
+export function deepMerge (base, override) {
+    if (!isPlainObject(base)) {
+        return override ?? base
+    }
+    const out = { ...base }
+    if (!isPlainObject(override)) {
+        return out
+    }
+    Object.keys(override).forEach(key => {
+        if (isPlainObject(base[key]) && isPlainObject(override[key])) {
+            out[key] = deepMerge(base[key], override[key])
+        } else {
+            out[key] = override[key]
+        }
+    })
+    return out
+}

package/src/utils/normalizeField.js

@@ -0,0 +1,61 @@
+import { startCase } from './strings.js'
+
+// Exact-name inference carried over from shframework's ShAutoForm
+const NAME_TYPE_MAP = {
+    password: 'password',
+    pin: 'password',
+    password_confirmation: 'password',
+    message: 'textarea',
+    description: 'textarea',
+    comments: 'textarea',
+    notes: 'textarea',
+    email: 'email',
+    phone: 'phone',
+    phone_number: 'phone',
+    age: 'number',
+    date: 'date'
+}
+
+function inferType (field) {
+    if (field.type) {
+        return field.type
+    }
+    if (field.component) {
+        return 'custom'
+    }
+    if (field.options) {
+        return (field.multiple || field.allowCustom) ? 'suggest' : 'select'
+    }
+    const name = field.name ?? ''
+    if (NAME_TYPE_MAP[name]) {
+        return NAME_TYPE_MAP[name]
+    }
+    if (/_email$/.test(name)) return 'email'
+    if (/_phone$/.test(name)) return 'phone'
+    if (/(_at|_date|_on)$/.test(name)) return 'date'
+    return 'text'
+}
+
+/**
+ * Normalize a fields array (strings or partial objects) into full field
+ * objects with reactive-ready `value` seeds.
+ */
+export function normalizeFields (fields, currentData = {}) {
+    return (fields ?? []).map(raw => {
+        const field = typeof raw === 'string' ? { name: raw } : { ...raw }
+        field.name = field.name ?? field.field
+        if (!field.name) {
+            console.warn('[sh-tailwind] form field without a name was skipped', raw)
+            return null
+        }
+        field.type = inferType(field)
+        if (field.label !== false) {
+            field.label = field.label ?? startCase(field.name)
+        }
+        field.placeholder = field.placeholder ?? ''
+        field.helper = field.helper ?? ''
+        field.required = !!field.required
+        field.value = field.value ?? currentData?.[field.name] ?? null
+        return field
+    }).filter(Boolean)
+}

package/src/utils/normalizeOptions.js

@@ -0,0 +1,18 @@
+// Coerce arbitrary backend rows into { id, label } pairs, matching the
+// lenient shapes shframework's SelectInput accepted.
+export function normalizeOptions (items) {
+    if (!Array.isArray(items)) {
+        return []
+    }
+    return items.map(item => {
+        if (item === null || typeof item === 'undefined') {
+            return null
+        }
+        if (typeof item !== 'object') {
+            return { id: item, label: String(item) }
+        }
+        const id = item.id ?? item.key ?? item.value ?? item.name
+        const label = item.label ?? item.name ?? item.option ?? item.value ?? String(id)
+        return { id, label, raw: item }
+    }).filter(Boolean)
+}

package/src/utils/strings.js

@@ -0,0 +1,11 @@
+export const startCase = (value) =>
+    String(value ?? '')
+        .replace(/[_-]+/g, ' ')
+        .replace(/([a-z\d])([A-Z])/g, '$1 $2')
+        .trim()
+        .split(/\s+/)
+        .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+        .join(' ')
+
+export const randomId = (prefix = 'sh') =>
+    `${prefix}-${Math.random().toString(36).slice(2, 9)}`