@iankibetsh/sh-tailwind 0.1.1 → 0.1.3

package/documentation/actions.md

@@ -0,0 +1,26 @@
+# Actions
+
+[← Back to overview](../README.md)
+
+Action buttons that wrap a request lifecycle — confirm → POST → toast, or a direct request → toast.
+
+## Example
+
+```vue
+<ShConfirmAction url="users/9/suspend" title="Suspend user?" message="They lose access immediately" @success="reload">
+    Suspend
+</ShConfirmAction>
+
+<ShSilentAction url="cache/flush" method="POST" success-message="Cache cleared">Flush cache</ShSilentAction>
+```
+
+## ShConfirmAction
+
+swal confirm → POST → toast.
+
+**Props:** `url`, `data`, `title`, `message`, `loadingMessage`, `successMessage`, `failMessage`, `tag` (default `button`), `btnClass`.
+**Events:** `success` / `failed` / `canceled` (+ `actionSuccessful` / `actionFailed` / `actionCanceled` aliases).
+
+## ShSilentAction
+
+Direct request, no confirm. Same surface as `ShConfirmAction` plus `method` (`GET|POST|PUT|DELETE`) and `disableSuccessMessage`.

package/documentation/forms.md

@@ -0,0 +1,96 @@
+# Forms
+
+[← Back to overview](../README.md)
+
+`ShForm` is a schema-driven form: type inference, input masks, Laravel `422` validation, and an optional multi-step wizard. For the inputs it renders and how to mask them, see [Inputs & masks](inputs.md).
+
+## Example
+
+```vue
+<ShForm
+    action="users"
+    method="post"
+    :fields="[
+        'name',                                                 // type inferred → text
+        'email',                                                // inferred → email
+        { name: 'amount', mask: 'money' },                      // auto-formatted
+        { name: 'role_id', label: 'Role', options: { url: 'roles' } },
+        { name: 'tags', type: 'suggest', multiple: true, options: [...] },
+        { name: 'bio', type: 'textarea', rows: 5, helper: 'Shown publicly' }
+    ]"
+    :current-data="editingUser"
+    success-message="Saved!"
+    @success="reload"
+/>
+```
+
+## Props
+
+| Prop | Default | Notes |
+|---|---|---|
+| `action` | — (required) | endpoint |
+| `method` | `'post'` | `post` \| `put` \| `patch` \| `delete` |
+| `fields` | — (required) | array of strings or [field objects](#field-schema) |
+| `currentData` | — | prefill for edit flows (seeds values, adds hidden `id`) |
+| `steps` | — | `[{ title, fields: ['name', ...] }]` → wizard |
+| `submitLabel` | `'Submit'` | submit button text |
+| `successMessage` | — | toast on success |
+| `retainData` | `false` | keep values after a successful submit |
+| `preSubmit` | — | `(data) => false` aborts, an object replaces the payload, else proceeds |
+| `hiddenId` | `true` | auto-append a hidden `id` when `currentData.id` exists |
+| `disabled` | `false` | disable the whole form |
+| `classes` | — | per-instance override of the `form` theme section |
+
+**Events:** `success(data)`, `error(reason)`, `fieldChanged(name, value, data)`, `preSubmit(data)` — plus legacy aliases `formSubmitted` / `formError`.
+
+## Field schema
+
+```ts
+{
+  name,                 // required (string shorthand → { name })
+  type,                 // omitted → inferred (see below)
+  label,                // default startCase(name); false hides it
+  placeholder, helper,  // helper renders as html under the field
+  required,             // shows a * marker (server still validates)
+  value,                // initial value (else from currentData[name])
+  options,              // array | { url }  → select/suggest data
+  multiple, allowCustom,// suggest behaviour
+  optionTemplate,       // component to render each suggest option
+  min, max, step,       // number / date
+  rows,                 // textarea
+  withTime,             // date → datetime-local
+  mask,                 // input mask (see Inputs & masks)
+  digits, secret,       // pin: box count / dot-mask
+  countryCode, detectCountry, // phone
+  component,            // use a custom component for this field
+  props,                // extra props v-bound onto the input
+  class                 // extra classes appended to the input
+}
+```
+
+**Type inference** (when `type` is omitted): exact names (`password`, `email`, `phone`, `pin`, `description`, …), suffixes (`*_email`, `*_phone`, `*_at`/`*_date`/`*_on`), and `options` present → `select` (or `suggest` with `multiple`/`allowCustom`).
+
+## Validation
+
+Laravel `422` errors (`reason.response.data.errors`) render under each field and clear on focus; in a wizard the form jumps to the first step containing an error.
+
+## Multi-step wizard
+
+Pass `steps` to split fields across pages:
+
+```vue
+<ShForm
+    action="signup"
+    :fields="['name', 'email', 'phone', 'password', 'description']"
+    :steps="[
+        { title: 'Account',  fields: ['name', 'email'] },
+        { title: 'Security', fields: ['phone', 'password'] },
+        { title: 'Profile',  fields: ['description'] }
+    ]"
+    submit-label="Create account"
+/>
+```
+
+## Inside a dialog
+
+A successful submit auto-closes the host `ShDialog` (set `retain-on-success` on the dialog, or `retain-dialog` on `ShDialogForm`, to keep it open). See [Overlays](overlays.md).

package/documentation/getting-started.md

@@ -0,0 +1,62 @@
+# Getting started
+
+[← Back to overview](../README.md)
+
+Install, Tailwind setup, and the plugin that wires everything together.
+
+## Install
+
+```bash
+npm i @iankibetsh/sh-tailwind @iankibetsh/sh-core pinia
+```
+
+Peers: `@iankibetsh/sh-core@^1`, `vue@^3.5`, `pinia@^3`, and `vue-router@^4||^5` (optional — only needed for `ShTable` row links / `link:` actions and `ShTabs` router mode).
+
+## Tailwind CSS setup
+
+With **`@tailwindcss/vite`** the library's classes are picked up automatically from the module graph — no extra config.
+
+With the **PostCSS plugin or CLI**, add an `@source` directive so Tailwind scans the package:
+
+```css
+@import "tailwindcss";
+@source "../node_modules/@iankibetsh/sh-tailwind";
+```
+
+The path is relative to the CSS file. **If components render unstyled, this line is what's missing.** The package ships its `src/` for exactly this reason.
+
+The default theme is **light only** — it never emits `dark:` variants, so it won't fight your app's theme. Dark mode is opt-in via [theming](theming.md).
+
+## Plugin
+
+```js
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import { ShTailwind } from '@iankibetsh/sh-tailwind'
+
+const app = createApp(App)
+app.use(createPinia())
+app.use(ShTailwind, {
+    // every @iankibetsh/sh-core option passes through (API client, auth, session):
+    baseApiUrl: import.meta.env.VITE_APP_API_URL,
+    authMode: 'bearer',            // or 'cookie' (Laravel Sanctum SPA)
+    sessionTimeout: 400,
+    enableTableCache: true,        // default cache flag for ShTable
+
+    // sh-tailwind options:
+    theme: { form: { submitBtn: 'rounded-lg bg-indigo-600 px-4 py-2 text-white ...' } },
+    formComponents: { /* date: MyDatePicker */ }   // replace input types globally
+})
+```
+
+`createShTailwind(options)` is also exported (returns an installable plugin object). Installing the plugin also wires sh-core's API client, the `v-if-user-can` directive and auth-endpoint provides.
+
+## Next steps
+
+- [Forms](forms.md) — schema-driven `ShForm`
+- [Inputs & masks](inputs.md) — standalone inputs, masks, PIN
+- [Table](table.md) — server-driven `ShTable` with offline cache
+- [Tabs](tabs.md) — `ShTabs`
+- [Overlays](overlays.md) — dialogs & drawers
+- [Actions](actions.md) — confirm / silent action buttons
+- [Theming](theming.md) — the three override layers

package/documentation/inputs.md

@@ -0,0 +1,55 @@
+# Inputs & masks
+
+[← Back to overview](../README.md)
+
+Every input is standalone-usable with a `v-model` contract (`modelValue` + `update:modelValue`, and a `clearValidationErrors` emit used by [ShForm](forms.md)). Override any type globally with the plugin's `formComponents`, or per-field with `component`.
+
+## Input masks
+
+Set `mask` on a field (or use `MaskedInput` directly) to auto-format as the user types:
+
+| `mask` | Display | v-model receives |
+|---|---|---|
+| `'money'` | `1,234,567.89` | raw number `1234567.89` |
+| `'integer'` | `1,234,567` | `1234567` |
+| `{ type: 'money', prefix: 'KES ', decimals: 0 }` | `KES 50,000` | `50000` |
+| `'#### #### #### ####'` | `4111 1111 1111 1111` | formatted string |
+| `{ pattern: '#### ####', unmask: true }` | `1234 5678` | `12345678` (stripped) |
+| `(value) => value.toUpperCase()` | `ABC` | `ABC` |
+
+Pattern tokens: `#` digit, `A` letter, `N`/`*` alphanumeric; any other character is a literal. Money masks emit the **raw number** (clean for the backend); pattern masks emit the formatted string unless `unmask: true`.
+
+```vue
+<MaskedInput v-model="amount" mask="money" />
+<MaskedInput v-model="card" mask="#### #### #### ####" />
+```
+
+`applyMask(value, mask)`, `maskMoney(raw, opts)` and `maskPattern(raw, pattern, opts)` are exported if you need them outside a form.
+
+## PIN input
+
+`type: 'pin'` (or the standalone `PinInput`) renders segmented digit boxes — auto-advance, backspace-to-previous, arrow nav, and paste-distributes-a-code.
+
+```vue
+<!-- in a form -->
+{ name: 'otp', type: 'pin', digits: 6 }
+{ name: 'wallet_pin', type: 'pin', digits: 4, secret: true }
+
+<!-- standalone -->
+<PinInput v-model="otp" :length="6" />
+<PinInput v-model="pin" :length="4" secret />
+```
+
+Props: `length` (default 4), `secret` (mask as dots), `isInvalid`, `disabled`. Emits `update:modelValue`, `complete(value)` when all boxes are filled, and `clearValidationErrors`.
+
+## Other inputs
+
+| Component | Key props |
+|---|---|
+| `PhoneInput` | `countryCode` (default `'KE'`), `detectCountry` (opt-in `sh-country-code` lookup). Searchable country dropdown, **offline emoji flags** — no assets, no native select |
+| `SelectInput` | `options` (array) **or** `url` (fetched with `{ all: 1 }`); coerces `{ id, label }` from loose shapes |
+| `ShSuggest` | `options`/`url`, `multiple`, `allowCustom`, `optionTemplate`; debounced remote search, badges, keyboard nav |
+| `PasswordInput` | show/hide eye toggle, `autocomplete` |
+| `DateInput` | `withTime` → `datetime-local`, `min`, `max` |
+| `NumberInput` | `min`, `max`, `step` |
+| `TextInput` / `TextAreaInput` / `EmailInput` | `rows` (textarea) |

package/documentation/overlays.md

@@ -0,0 +1,42 @@
+# Overlays — dialogs & drawers
+
+[← Back to overview](../README.md)
+
+Tailwind-native modal and slide-over panels — Teleport + Transition, no Bootstrap JS.
+
+## Example
+
+```vue
+<ShDialog v-model:open="open" title="Edit user" size="lg">
+    <p>content…</p>
+    <template #footer="{ close }"><button @click="close()">Done</button></template>
+</ShDialog>
+
+<ShDrawer v-model:open="side" position="end" size="md" title="Filters">…</ShDrawer>
+
+<ShDialogBtn title="Quick view"><template #trigger>Open</template> … </ShDialogBtn>
+
+<ShDialogForm title="New user" action="users" :fields="['name','email']">
+    <template #trigger>Add user</template>
+</ShDialogForm>
+```
+
+## ShDialog
+
+**Props:** `open` (v-model), `title` (or `#title` slot), `size` (`sm|md|lg|xl|full`, default `md`), `static` (disables Escape/backdrop close — backdrop click pulses the panel), `hideClose`, `retainOnSuccess`, `classes`.
+**Events:** `update:open`, `opened`, `closed`. **Exposes:** `show()`, `close()`.
+**Slots:** default (`{ close }`), `#title`, `#footer="{ close }"`.
+
+## ShDrawer
+
+Same as `ShDialog` plus `position` (`start|end|top|bottom`, default `end`); same size/static/events/slots.
+
+## Trigger + form helpers
+
+**ShDialogBtn / ShDrawerBtn** render a trigger button + the overlay; props add `btnClass` and a `#trigger` slot.
+
+**ShDialogForm** = trigger + dialog + [`ShForm`](forms.md) (all ShForm props pass through), re-keys the form on `currentData`, auto-closes ~600ms after success unless `retain-dialog`.
+
+## Behaviour
+
+Dialogs stack — Escape closes the topmost first; body scroll locks while open; focus returns to the trigger on close. The low-level `useDialog({ isStatic, onOpen, onClose })` → `{ isOpen, zIndex, show, close, onBackdrop }` is exported if you're building your own overlay.

package/documentation/table.md

@@ -0,0 +1,98 @@
+# Table
+
+[← Back to overview](../README.md)
+
+`ShTable` is a server-driven data table with an offline-first IndexedDB cache — search, sort and pagination all work offline.
+
+## Example
+
+```vue
+<ShTable
+    endpoint="users"
+    :columns="[
+        'name',                                       // label inferred
+        { name: 'email', label: 'Email Address' },
+        { name: 'amount', format: 'money' },          // money | number | date | datetime
+        { name: 'owner.name', label: 'Owner' },       // dot paths
+        { name: 'status', component: StatusBadge }    // custom cell (:row, :value)
+    ]"
+    :actions="[
+        { label: 'Edit', handler: row => (editing = row) },               // direct callback (no @event)
+        { label: 'View', link: '/users/{id}' },                           // router push / location
+        { label: 'Suspend', url: 'users/{id}/suspend', confirm: 'Sure?' }, // swal confirm → POST → reload
+        { label: 'Promote', emit: 'promote' }                             // → @promote(row), if you prefer events
+    ]"
+    :multi-actions="[{ label: 'Archive', handler: rows => archive(rows), permission: 'archive-users' }]"
+    searchable has-range cache
+    row-link="/users/{id}"
+    @promote="onPromote"
+/>
+```
+
+## Action handlers
+
+An action runs the **first** matching key, so you pick the style per action:
+
+| Key | Behaviour |
+|---|---|
+| `handler: (row) => {}` | **call your callback directly** — close over component state, mutate, then `table.reload()` via a ref |
+| `emit: 'name'` | emits `@name(row)` (and a generic `@action('name', row)`) |
+| `link: '/x/{id}'` | router push (or `location` without vue-router); `{id}` filled from the row |
+| `url: 'x/{id}'` | POST (optionally behind `confirm: 'msg'`), toast the result, reload |
+
+```js
+const userActions = [
+  { label: 'View',    handler: (row) => openProfile(row) },
+  { label: 'Promote', handler: (row) => { row.role = 'Manager'; table.value.reload() } },
+  { label: 'Delete',  class: 'text-red-600', handler: (row) => removeUser(row) }
+]
+// multi-actions get the selected rows array:
+const bulk = [{ label: 'Email selected', handler: (rows) => emailAll(rows) }]
+```
+
+## Props
+
+| Prop | Default | Notes |
+|---|---|---|
+| `endpoint` | — (required) | data endpoint |
+| `columns` | — (required) | [column schema](#column--action-schema) |
+| `actions` | `[]` | row actions |
+| `multiActions` | `[]` | bulk actions over selected rows (adds checkboxes + a floating bar) |
+| `searchable` | `true` | debounced search box with an Exact toggle |
+| `searchPlaceholder` | `'Search'` | |
+| `hasRange` | `false` | from/to date filters |
+| `perPage` | ShConfig `tablePerPage` (10) | persisted per table |
+| `sortBy` / `sortMethod` | — / `'desc'` | initial sort |
+| `paginationStyle` | ShConfig `tablePaginationStyle` | `'pages'` \| `'loadMore'` |
+| `rowLink` | — | `'/users/{id}'` — whole row navigates |
+| `cache` | `null` → ShConfig `enableTableCache` | offline cache (see below) |
+| `networkTimeout` | `10000` | ms before falling back to cache |
+| `reload` | — | change the value to force a reload |
+| `emptyMessage` | `'No records found'` | |
+| `classes` | — | override the `table` theme section |
+
+**Events:** `rowClick(row)`, `loaded(response)`, `action(name, row)`, plus each action's own `emit` name. **Slots:** `#cell-<name>="{ row, value, index }"`, `#actions="{ row }"`, `#empty`. **Exposes:** `reload()`, `records`.
+
+## Column / action schema
+
+```ts
+// column
+{ name, label, format: 'money'|'number'|'date'|'datetime', sortable, component, show: () => bool, class }
+// action
+{ label, emit, handler: (row)=>{}, link: '/x/{id}', url: 'x/{id}', confirm: 'msg',
+  data, permission, show: (row)=>bool, class, failMessage }
+// multi-action
+{ label, handler: (rows)=>{}, permission, class }
+```
+
+The table sends the classic server contract — `page`, `per_page`, `filter_value`, `order_by`, `order_method`, `from`, `to`, `exact`, `paginated` — and expects a Laravel paginator response, so existing backends work unchanged.
+
+## Offline-first cache
+
+With `cache` (or the global `enableTableCache`):
+
+1. The exact query's last response renders instantly from IndexedDB, then revalidates over the network.
+2. Every fetched row is merged into a per-endpoint pool (capped at 3000, scoped per user id).
+3. If the network is unreachable or slower than `network-timeout`, the query — **including search, sort and pagination** — runs locally against the pool and an amber offline banner shows. The next successful response clears it.
+
+Helpers are exported for custom tables: `useTableData({ query, cacheEnabled, networkTimeout })`, `localQuery(rows, opts)`, and `clearTableCache()` (call on logout).

package/documentation/tabs.md

@@ -0,0 +1,138 @@
+# Tabs
+
+[← Back to overview](../README.md)
+
+`ShTabs` is a single, unified tabs component. It replaces shframework's two separate `ShTabs` + `ShDynamicTabs` with one component that supports three content strategies and degrades gracefully when vue-router isn't installed.
+
+| Strategy | When | Content comes from |
+|---|---|---|
+| **slots** | most cases — you own the markup | `#tab-<key>` named slots (or the default slot) |
+| **component** | render a component per tab | each tab's `component`, swapped in place |
+| **router** | page-level, deep-linkable tabs | a nested `<router-view>` at `/{base}/tab/{key}` |
+
+Modern niceties throughout: `v-model:tab`, full keyboard navigation (a11y), lazy panels, three visual variants, counts/badges, per-tab icons, `permission`/`validator` filtering.
+
+## Slots (default)
+
+`ShTabs` owns the active state; you provide a `#tab-<key>` slot per tab.
+
+```vue
+<ShTabs
+    v-model:tab="active"
+    :tabs="['overview', { key: 'activity', count: 12 }, { key: 'archived', disabled: true }]"
+    variant="pills"
+    @change="(key, tab) => console.log('switched to', key)"
+>
+    <template #tab-overview>…</template>
+    <template #tab-activity>…</template>
+</ShTabs>
+```
+
+A scoped **default slot** `{ tab, active }` is used as the fallback for any tab without a named slot — handy for rendering one body driven by the active tab.
+
+## Components
+
+Give each tab a `component` and `ShTabs` swaps it in place (the old `ShDynamicTabs`). Use `sync="query"` to reflect the active tab in the URL as `?tab=<key>`.
+
+```vue
+<ShTabs
+    :tabs="[
+        { label: 'Profile',  component: ProfileTab },
+        { label: 'Security', component: SecurityTab, count: 2 }
+    ]"
+    sync="query"
+/>
+```
+
+Extra attributes and `:data` are bound onto the rendered component, so `<ProfileTab :user="user" />` works by spreading attrs.
+
+## Router mode
+
+Set `router` (or a `baseUrl`) and the active tab is driven by the route. `ShTabs` renders the nav as `<router-link>`s pointing at `/{base}/tab/{key}` and a nested `<router-view>` for the panel (the old `ShTabs`). Requires nested routes under the base path.
+
+```vue
+<ShTabs :tabs="['pending', 'completed', 'archived']" base-url="/admin/tasks" :counts="{ pending: 3 }" />
+```
+
+On mount, if the URL has no `/tab/...` segment it redirects to the first tab. `baseUrl` defaults to the current route path when omitted.
+
+## Tab item shapes
+
+A tab is a **string**, an **object**, or a **function** (called with `data`):
+
+```ts
+'pending'                          // → { key: 'pending', label: 'Pending' }
+(data) => ({ key, label, ... })    // computed from :data
+
+{
+  key,          // unique id (defaults to `name`, or a slug of `label`)
+  label,        // defaults to startCase(key)
+  component,    // component mode: rendered when active
+  icon,         // component rendered before the label
+  count,        // number bubble (aliases: counts, badge); 0 still renders
+  permission,   // hidden unless userStore.isAllowedTo(permission)
+  validator,    // (data) => boolean; hidden when it returns false
+  disabled,     // not selectable; skipped by keyboard nav
+  class         // extra classes on this tab button/link
+}
+```
+
+If every tab is filtered out by `permission`/`validator`, `ShTabs` shows the `forbiddenMessage` ("403 — not allowed"); with no tabs at all it shows `emptyMessage`.
+
+## Counts
+
+Three sources, most specific wins: a fetched API map > the `counts` prop > the tab's own `count`/`counts`/`badge`.
+
+```vue
+<!-- per-tab -->
+:tabs="[{ key: 'inbox', count: 5 }]"
+<!-- shared object map -->
+:counts="{ inbox: 5, archived: 0 }"
+<!-- API endpoint string — fetched on mount, expects { key: n } -->
+counts="messages/tab-counts"
+```
+
+## Props
+
+| Prop | Default | Notes |
+|---|---|---|
+| `tabs` | — (required) | array of strings / objects / functions |
+| `modelValue` (`v-model:tab`) | `null` | active tab key; null = `ShTabs` owns it |
+| `data` | `{}` | passed to tab functions / `validator`, bound to content |
+| `counts` | `null` | object map `{ key: n }` **or** an API endpoint string |
+| `variant` | `'underline'` | `underline` \| `pills` \| `boxed` |
+| `sync` | `'none'` | `'query'` reflects the active tab as `?tab=<key>` |
+| `queryKey` | `'tab'` | query-param name for `sync="query"` |
+| `router` | `false` | force router mode (auto-on when `baseUrl` set) |
+| `baseUrl` | `null` | base path for router-mode links |
+| `lazy` | `false` | mount a panel only the first time it becomes active |
+| `emptyMessage` | `'No tabs available'` | shown when there are no tabs |
+| `forbiddenMessage` | `'403 — not allowed'` | shown when all tabs are filtered out |
+| `classes` | `null` | per-instance override of the `tabs` theme section |
+
+**Events:** `update:modelValue(key)` (for `v-model:tab`), `change(key, tab)`.
+**Exposes:** `active` (ref of the current key), `select(tab)`.
+
+## Accessibility & keyboard
+
+The nav is a `role="tablist"` with `role="tab"` items and a roving `tabindex`. With a tab focused:
+
+| Key | Action |
+|---|---|
+| `←` / `→` / `↑` / `↓` | move to the previous / next tab (wraps, skips `disabled`) |
+| `Home` / `End` | jump to the first / last enabled tab |
+
+Inline panels stay mounted and toggle with `v-show`, so form state and scroll position survive tab switches; combine with `lazy` to defer mounting heavy panels until first viewed.
+
+## Variants
+
+`variant` selects a preset block from the `tabs` theme section — `underline` (default), `pills`, `boxed`. Override any of them (or the `count`/`panel`/`nav` tokens) via the plugin `theme` or the per-instance `classes` prop. See [Theming](theming.md).
+
+## Coming from shframework
+
+| shframework | sh-tailwind |
+|---|---|
+| `ShTabs` (router, `base-url`, `tab-counts`) | `ShTabs` with `base-url` / `:counts` (router mode) |
+| `ShDynamicTabs` (`:tabs` with `component`, `addTabQuery`) | `ShTabs` with `component` tabs + `sync="query"` |
+| `currentTab="Tab Two"` | `v-model:tab="key"` |
+| `validator` / `permission` on tabs | same keys, unchanged |

package/documentation/theming.md

@@ -0,0 +1,42 @@
+# Theming
+
+[← Back to overview](../README.md)
+
+Three layers, most specific wins:
+
+1. **Plugin `theme`** — deep-merged over `defaultTheme`. Sections: `form` (incl. `steps`), `inputs` (`select`, `pin`, `phone`, `suggest`, password toggle), `dialog`, `drawer`, `table` (incl. `pagination`), `tabs` (incl. `pills` / `boxed` variants), `buttons`. Import `defaultTheme` to see every key.
+2. **Per-component `classes` prop** — overrides one section for that instance.
+3. **Per-field `class`** — appended to that input.
+
+```js
+app.use(ShTailwind, { theme: { buttons: { primary: 'rounded-full bg-black px-5 py-2 text-white' } } })
+```
+
+Because overrides are plain class strings written in your app, they're always in Tailwind's scan path. For dark mode, supply dark-aware class strings here (the defaults are intentionally light-only). `formComponents` swaps whole input components by type; `useTheme(section, overrides)` resolves a section in custom components.
+
+## Every value is a full utility string
+
+Theme values are **complete** Tailwind utility strings, never interpolated fragments — so consumers' `@source` extraction always finds the classes. When overriding, write the whole string for that key (e.g. an active tab), not a partial.
+
+## Exports
+
+```js
+// plugin & theme
+ShTailwind, createShTailwind, defaultTheme, useTheme,
+SH_TW_THEME, SH_TW_COMPONENTS, SH_DIALOG_CONTEXT
+// form
+ShForm, ShFormSteps
+// navigation
+ShTabs
+// overlays
+ShDialog, ShDrawer, ShDialogBtn, ShDrawerBtn, ShDialogForm, useDialog
+// table
+ShTable, ShTablePagination, useTableData, localQuery, shTableCache, clearTableCache
+// actions
+ShConfirmAction, ShSilentAction, ShSpinner
+// inputs
+TextInput, TextAreaInput, EmailInput, PasswordInput, PinInput, MaskedInput,
+NumberInput, DateInput, SelectInput, PhoneInput, ShSuggest
+// utilities & data
+applyMask, maskMoney, maskPattern, countries
+```

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iankibetsh/sh-tailwind",
-  "version": "0.1.1",
-  "description": "Vue 3 + Tailwind CSS v4 component library for Laravel backends, built on @iankibetsh/sh-core. Forms, dialogs, drawers and action components.",
+  "version": "0.1.3",
+  "description": "Vue 3 + Tailwind CSS v4 component library for Laravel backends, built on @iankibetsh/sh-core. Forms, tables, tabs, dialogs, drawers and action components.",
   "type": "module",
   "main": "./dist/sh-tailwind.cjs.js",
   "module": "./dist/sh-tailwind.es.js",
@@ -14,6 +14,7 @@
   "files": [
     "dist",
     "src",
+    "documentation",
     "!src/playground"
   ],
   "scripts": {