raqam 0.2.4 → 0.2.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +31 -16
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
| Truly headless | ✅ | ✅ | ❌ | ✅ |
|
|
17
17
|
| i18n digit input (Persian ۱۲۳, Arabic ١٢٣…) | ❌ | ✅ | ❌ | ✅ |
|
|
18
18
|
| WAI-ARIA spinbutton | ✅ | ✅✅ | ⚠️ | ✅✅ |
|
|
19
|
-
| Bundle size | ~10 KB | ~30 KB | ~60 KB | **~1.
|
|
19
|
+
| Bundle size | ~10 KB | ~30 KB | ~60 KB | **~1.8 KB core** |
|
|
20
20
|
|
|
21
21
|
No existing package combines all four. raqam does.
|
|
22
22
|
|
|
@@ -184,10 +184,15 @@ Uses the Pointer Lock API so the cursor never hits the screen edge during drag.
|
|
|
184
184
|
[data-invalid] { border-color: red; }
|
|
185
185
|
[data-disabled] { opacity: 0.5; }
|
|
186
186
|
[data-readonly] { background: #f5f5f5; }
|
|
187
|
-
[data-
|
|
187
|
+
[data-required] { /* required-field styling */ }
|
|
188
188
|
[data-scrubbing] { cursor: ew-resize; }
|
|
189
|
+
[data-rtl] { /* RTL-specific overrides (set on the input element) */ }
|
|
189
190
|
```
|
|
190
191
|
|
|
192
|
+
`data-focused`, `data-invalid`, `data-disabled`, `data-readonly`, `data-required`,
|
|
193
|
+
and `data-scrubbing` are set on `NumberField.Root`; `data-rtl` (plus the state
|
|
194
|
+
attributes) is set on the `NumberField.Input` element.
|
|
195
|
+
|
|
191
196
|
## 🔗 react-hook-form integration
|
|
192
197
|
|
|
193
198
|
```tsx
|
|
@@ -272,14 +277,18 @@ State management hook — returns `NumberFieldState`.
|
|
|
272
277
|
| `validate` | `(v: number \| null) => boolean \| string \| null` | — | Custom validation |
|
|
273
278
|
| `prefix` | `string` | — | String prefix (e.g. `"$"`) |
|
|
274
279
|
| `suffix` | `string` | — | String suffix (e.g. `" تومان"`) |
|
|
280
|
+
| `liveFormat` | `boolean` | `true` | Format while typing (disable for IME locales) |
|
|
275
281
|
| `disabled` | `boolean` | `false` | Disable the field |
|
|
276
282
|
| `readOnly` | `boolean` | `false` | Read-only mode |
|
|
283
|
+
| `required` | `boolean` | `false` | Mark the field as required |
|
|
277
284
|
|
|
278
|
-
|
|
285
|
+
Also accepts `maximumFractionDigits`, `minimumFractionDigits`, `formatValue`,
|
|
286
|
+
and `parseValue` — see the [full options reference](https://47vigen.github.io/raqam/api/use-number-field-state/).
|
|
279
287
|
|
|
280
|
-
|
|
288
|
+
### `useNumberField(props, state, inputRef)`
|
|
281
289
|
|
|
282
|
-
|
|
290
|
+
Behavior hook — returns `NumberFieldAria` prop objects for each element. Accepts
|
|
291
|
+
every `useNumberFieldState` option plus the behavior-only props below:
|
|
283
292
|
|
|
284
293
|
| Prop | Type | Default | Description |
|
|
285
294
|
|------|------|---------|-------------|
|
|
@@ -287,18 +296,23 @@ Additional props beyond state options:
|
|
|
287
296
|
| `copyBehavior` | `"formatted" \| "raw" \| "number"` | `"formatted"` | Clipboard content on copy |
|
|
288
297
|
| `stepHoldDelay` | `number` | `400` | Press-and-hold initial delay (ms) |
|
|
289
298
|
| `stepHoldInterval` | `number` | `200` | Press-and-hold repeat interval (ms) |
|
|
290
|
-
| `
|
|
291
|
-
|
|
299
|
+
| `label` / `name` / `id` / `aria-*` | `string` | — | Labelling, form name, and id wiring |
|
|
300
|
+
|
|
301
|
+
→ Full reference: [`useNumberField`](https://47vigen.github.io/raqam/api/use-number-field/).
|
|
292
302
|
|
|
293
303
|
### `NumberField.Root` extra props
|
|
294
304
|
|
|
295
305
|
| Prop | Type | Description |
|
|
296
306
|
|------|------|-------------|
|
|
297
|
-
| `onValueChange` | `(value, { reason, formattedValue }) => void` | Fires with change reason |
|
|
307
|
+
| `onValueChange` | `(value, { reason, formattedValue }) => void` | Fires on every change, with the change `reason` |
|
|
308
|
+
| `onValueCommitted` | `(value, { reason }) => void` | Fires only on commit (`reason: "blur" \| "keyboard"`) |
|
|
309
|
+
| `className` / `style` | `string` / `CSSProperties` | Applied to the root wrapper `<div>` |
|
|
298
310
|
|
|
299
311
|
### `useNumberFieldFormat(value, options)`
|
|
300
312
|
|
|
301
|
-
Display-only formatting hook
|
|
313
|
+
Display-only formatting hook (client-only — it carries `"use client"`). Returns a
|
|
314
|
+
formatted string with zero state overhead. For React Server Components, SSR, or
|
|
315
|
+
Edge, use `createFormatter` from `raqam/server` instead (shown above).
|
|
302
316
|
|
|
303
317
|
### `NumberField.*` components
|
|
304
318
|
|
|
@@ -329,14 +343,15 @@ Every component accepts a `render` prop for element replacement:
|
|
|
329
343
|
|
|
330
344
|
## 📦 Bundle size
|
|
331
345
|
|
|
332
|
-
|
|
346
|
+
Measured min + brotli (including dependencies), enforced in CI via
|
|
347
|
+
[`.size-limit.json`](.size-limit.json):
|
|
333
348
|
|
|
334
|
-
| Entry | Size |
|
|
335
|
-
|
|
336
|
-
| `raqam/core` | ~1.
|
|
337
|
-
| `raqam` (hooks + components) | ~
|
|
338
|
-
| `raqam/react` | ~
|
|
339
|
-
| `raqam/locales/fa` |
|
|
349
|
+
| Entry | Size | CI budget |
|
|
350
|
+
|-------|------|-----------|
|
|
351
|
+
| `raqam/core` | ~1.84 KB | 2 KB |
|
|
352
|
+
| `raqam` (hooks + components) | ~8.3 KB | 12 KB |
|
|
353
|
+
| `raqam/react` | ~8.1 KB | 10 KB |
|
|
354
|
+
| `raqam/locales/fa` | 189 B | 0.3 KB |
|
|
340
355
|
|
|
341
356
|
## 📄 License
|
|
342
357
|
|