@timeax/form-palette 0.1.19 → 0.1.20
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 +185 -185
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -306,25 +306,25 @@ Below are the **variant-specific props** you can pass to `<InputField />` for:
|
|
|
306
306
|
|
|
307
307
|
### Variant props
|
|
308
308
|
|
|
309
|
-
| Prop | Description
|
|
310
|
-
|
|
311
|
-
| `trim?: boolean` | **boolean** — If `true`, the value is trimmed **before validation** (visual input stays as typed).
|
|
312
|
-
| `minLength?: number` | **number** — Minimum allowed length (after optional trimming).
|
|
313
|
-
| `maxLength?: number` | **number** — Maximum allowed length (after optional trimming).
|
|
314
|
-
| `joinControls?: boolean` | **boolean** — If `true` and there are controls, the input + controls share one box (border/radius/focus).
|
|
309
|
+
| Prop | Description |
|
|
310
|
+
|--------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------|
|
|
311
|
+
| `trim?: boolean` | **boolean** — If `true`, the value is trimmed **before validation** (visual input stays as typed). |
|
|
312
|
+
| `minLength?: number` | **number** — Minimum allowed length (after optional trimming). |
|
|
313
|
+
| `maxLength?: number` | **number** — Maximum allowed length (after optional trimming). |
|
|
314
|
+
| `joinControls?: boolean` | **boolean** — If `true` and there are controls, the input + controls share one box (border/radius/focus). |
|
|
315
315
|
| `extendBoxToControls?: boolean` | **boolean** — When `joinControls` is true, controls are either visually “inside†the same box (`true`) or separate (`false`). |
|
|
316
|
-
| `inputClassName?: string` | **string** — Extra classes for the **inner** `<input>` element (not the wrapper).
|
|
317
|
-
| `prefix?: string` | **string** — Fixed prefix rendered as part of the visible input string (e.g. `₦`, `ID: `).
|
|
318
|
-
| `suffix?: string` | **string** — Fixed suffix rendered as part of the visible input string (e.g. `%`, `kg`).
|
|
319
|
-
| `stripPrefix?: boolean` | **boolean** — If `true` (default), the prefix is stripped from the emitted model value before calling `onValue` internally.
|
|
320
|
-
| `stripSuffix?: boolean` | **boolean** — If `true` (default), the suffix is stripped from the emitted model value before calling `onValue` internally.
|
|
321
|
-
| `mask?: string` | **string** — Mask pattern (PrimeReact style), e.g. `"99/99/9999"`, `"(999) 999-9999"`.
|
|
322
|
-
| `maskDefinitions?: Record<string, RegExp>` | **Record** — Per-symbol slot definitions (kept for future custom engine; unused by current implementation).
|
|
323
|
-
| `slotChar?: string` | **string** — Placeholder slot character (default `_`).
|
|
316
|
+
| `inputClassName?: string` | **string** — Extra classes for the **inner** `<input>` element (not the wrapper). |
|
|
317
|
+
| `prefix?: string` | **string** — Fixed prefix rendered as part of the visible input string (e.g. `₦`, `ID: `). |
|
|
318
|
+
| `suffix?: string` | **string** — Fixed suffix rendered as part of the visible input string (e.g. `%`, `kg`). |
|
|
319
|
+
| `stripPrefix?: boolean` | **boolean** — If `true` (default), the prefix is stripped from the emitted model value before calling `onValue` internally. |
|
|
320
|
+
| `stripSuffix?: boolean` | **boolean** — If `true` (default), the suffix is stripped from the emitted model value before calling `onValue` internally. |
|
|
321
|
+
| `mask?: string` | **string** — Mask pattern (PrimeReact style), e.g. `"99/99/9999"`, `"(999) 999-9999"`. |
|
|
322
|
+
| `maskDefinitions?: Record<string, RegExp>` | **Record** — Per-symbol slot definitions (kept for future custom engine; unused by current implementation). |
|
|
323
|
+
| `slotChar?: string` | **string** — Placeholder slot character (default `_`). |
|
|
324
324
|
| `autoClear?: boolean` | **boolean** — If `true`, “empty†masked values emit `""` instead of a fully-masked placeholder string. |
|
|
325
325
|
| `unmask?: "raw" \| "masked" \| boolean` | **union** — Controls whether the **model value** is raw vs masked. (`"raw"`/`true` ⇒ emit unmasked; `"masked"`/`false`/`undefined` ⇒ emit masked). |
|
|
326
|
-
| `maskInsertMode?: "stream" \| "caret"` | **union** — Reserved for future caret-mode logic (currently unused; kept for API compatibility).
|
|
327
|
-
| `...inputProps` | All other standard `React.InputHTMLAttributes<HTMLInputElement>` (except `value`, `defaultValue`, `onChange`, `size`) are forwarded.
|
|
326
|
+
| `maskInsertMode?: "stream" \| "caret"` | **union** — Reserved for future caret-mode logic (currently unused; kept for API compatibility). |
|
|
327
|
+
| `...inputProps` | All other standard `React.InputHTMLAttributes<HTMLInputElement>` (except `value`, `defaultValue`, `onChange`, `size`) are forwarded. |
|
|
328
328
|
|
|
329
329
|
### Sample usage (InputField)
|
|
330
330
|
|
|
@@ -366,7 +366,7 @@ export function ExampleText() {
|
|
|
366
366
|
### Variant props
|
|
367
367
|
|
|
368
368
|
| Prop | Description |
|
|
369
|
-
|
|
369
|
+
|--------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
|
|
370
370
|
| `...textareaProps` | The textarea variant primarily forwards props from the underlying UI `Textarea` component (`UiTextareaProps`), excluding `value`, `defaultValue`, and `onChange` because the variant emits changes via the form runtime. |
|
|
371
371
|
|
|
372
372
|
### Sample usage (InputField)
|
|
@@ -397,19 +397,19 @@ export function ExampleTextarea() {
|
|
|
397
397
|
### Variant props
|
|
398
398
|
|
|
399
399
|
| Prop | Description |
|
|
400
|
-
|
|
400
|
+
|------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------|
|
|
401
401
|
| `options: (ToggleOption \| string \| number \| boolean)[]` | Options for the toggle group. You can pass full option objects or primitive shorthand (primitives are normalized to `{ value: String(x), label: String(x) }`). |
|
|
402
|
-
| `multiple?: boolean` | **boolean** — If `true`, enables multi-select (value becomes an array of strings internally).
|
|
403
|
-
| `variant?: "default" \| "outline"` | **union** — Visual style passed to the underlying ToggleGroup.
|
|
404
|
-
| `layout?: "horizontal" \| "vertical" \| "grid"` | **union** — Layout mode.
|
|
405
|
-
| `gridCols?: number` | **number** — Column count when `layout="grid"` (defaults to `2` in the component).
|
|
406
|
-
| `fillWidth?: boolean` | **boolean** — If `true`, makes the group/items stretch to fill available width (adds `w-full` and related item sizing).
|
|
407
|
-
| `optionValue?: string` | **string** — When `options` are custom objects, the property name to read `value` from (fallback: `obj.value`).
|
|
408
|
-
| `optionLabel?: string` | **string** — When `options` are custom objects, the property name to read `label` from (fallback: `obj.label` or `String(value)`).
|
|
409
|
-
| `optionIcon?: string` | **string** — When `options` are custom objects, the property name to read `icon` from (fallback: `obj.icon`).
|
|
410
|
-
| `optionDisabled?: string` | **string** — When `options` are custom objects, the property name to read disabled flag from (fallback: `obj.disabled`).
|
|
411
|
-
| `optionTooltip?: string` | **string** — When `options` are custom objects, the property name to read tooltip content from (fallback: `obj.tooltip`).
|
|
412
|
-
| `optionMeta?: string` | **string** — When `options` are custom objects, the property name to read meta from (fallback: `obj.meta`).
|
|
402
|
+
| `multiple?: boolean` | **boolean** — If `true`, enables multi-select (value becomes an array of strings internally). |
|
|
403
|
+
| `variant?: "default" \| "outline"` | **union** — Visual style passed to the underlying ToggleGroup. |
|
|
404
|
+
| `layout?: "horizontal" \| "vertical" \| "grid"` | **union** — Layout mode. |
|
|
405
|
+
| `gridCols?: number` | **number** — Column count when `layout="grid"` (defaults to `2` in the component). |
|
|
406
|
+
| `fillWidth?: boolean` | **boolean** — If `true`, makes the group/items stretch to fill available width (adds `w-full` and related item sizing). |
|
|
407
|
+
| `optionValue?: string` | **string** — When `options` are custom objects, the property name to read `value` from (fallback: `obj.value`). |
|
|
408
|
+
| `optionLabel?: string` | **string** — When `options` are custom objects, the property name to read `label` from (fallback: `obj.label` or `String(value)`). |
|
|
409
|
+
| `optionIcon?: string` | **string** — When `options` are custom objects, the property name to read `icon` from (fallback: `obj.icon`). |
|
|
410
|
+
| `optionDisabled?: string` | **string** — When `options` are custom objects, the property name to read disabled flag from (fallback: `obj.disabled`). |
|
|
411
|
+
| `optionTooltip?: string` | **string** — When `options` are custom objects, the property name to read tooltip content from (fallback: `obj.tooltip`). |
|
|
412
|
+
| `optionMeta?: string` | **string** — When `options` are custom objects, the property name to read meta from (fallback: `obj.meta`). |
|
|
413
413
|
| `renderOption?: (option, isSelected) => React.ReactNode` | Custom renderer per option (receives normalized option + selected state). |
|
|
414
414
|
| `className?: string` | Class for the toggle group container. |
|
|
415
415
|
| `itemClassName?: string` | Base class applied to **all** toggle items. |
|
|
@@ -459,8 +459,8 @@ export function ExampleToggleGroup() {
|
|
|
459
459
|
## number
|
|
460
460
|
|
|
461
461
|
| Prop | Description |
|
|
462
|
-
|
|
463
|
-
| `showButtons` | When `true`, renders built-in step controls (±) alongside the number input.
|
|
462
|
+
|----------------|----------------------------------------------------------------------------------------------------------------------------------------------------------|
|
|
463
|
+
| `showButtons` | When `true`, renders built-in step controls (±) alongside the number input. |
|
|
464
464
|
| `buttonLayout` | Layout for the step controls when `showButtons` is enabled. Supported layouts: `"stacked"` (vertical on the right) and `"inline"` (`-` left, `+` right). |
|
|
465
465
|
| `step` | Step amount used by the built-in controls and stepping logic (forwarded to the underlying number input). |
|
|
466
466
|
| `min` | Minimum numeric value constraint (used by the stepping logic and forwarded to the underlying number input). |
|
|
@@ -489,7 +489,7 @@ export function ExampleToggleGroup() {
|
|
|
489
489
|
## password
|
|
490
490
|
|
|
491
491
|
| Prop | Description |
|
|
492
|
-
|
|
492
|
+
|-------------------------|-----------------------------------------------------------|
|
|
493
493
|
| `autoComplete` | Sets the input `autoComplete` hint for password managers. |
|
|
494
494
|
| `minLength` | Minimum allowed length (HTML constraint). |
|
|
495
495
|
| `maxLength` | Maximum allowed length (HTML constraint). |
|
|
@@ -529,7 +529,7 @@ export function ExampleToggleGroup() {
|
|
|
529
529
|
## phone
|
|
530
530
|
|
|
531
531
|
| Prop | Description |
|
|
532
|
-
|
|
532
|
+
|------------------------|---------------------------------------------------------------------------------|
|
|
533
533
|
| `countries` | List of allowed countries (and their dial codes) shown in the country selector. |
|
|
534
534
|
| `defaultCountryCode` | The default selected country code (e.g. `"NG"`). |
|
|
535
535
|
| `allowCountrySearch` | Enable searching in the country list. |
|
|
@@ -542,7 +542,7 @@ export function ExampleToggleGroup() {
|
|
|
542
542
|
| `dialCodeDelimiter` | Delimiter between dial code and the input number (e.g. `" "`, `"-"`). |
|
|
543
543
|
| `valueMode` | Controls how the field value is emitted (e.g. E.164 vs local formats). |
|
|
544
544
|
| `mask` | Optional input mask (string or resolver function). |
|
|
545
|
-
| `lazy` | IMask “lazy†mode (placeholder chars hidden until typed).
|
|
545
|
+
| `lazy` | IMask “lazy†mode (placeholder chars hidden until typed). |
|
|
546
546
|
| `keepCharPositions` | IMask option to keep character positions stable. |
|
|
547
547
|
| `unmask` | How the underlying mask value is emitted (IMask option). |
|
|
548
548
|
|
|
@@ -572,7 +572,7 @@ Value type: `number | undefined`
|
|
|
572
572
|
### Props
|
|
573
573
|
|
|
574
574
|
| Prop | Description |
|
|
575
|
-
|
|
575
|
+
|----------------------------|--------------------------------------------------------|
|
|
576
576
|
| `value` | Current slider value (number). |
|
|
577
577
|
| `onValue` | Called when the value changes. |
|
|
578
578
|
| `error` | Validation/error message for the field. |
|
|
@@ -600,7 +600,7 @@ Value type: `number | undefined`
|
|
|
600
600
|
| `leadingControlClassName` | Wrapper className for the leading control. |
|
|
601
601
|
| `trailingControlClassName` | Wrapper className for the trailing control. |
|
|
602
602
|
| `joinControls` | Join controls visually to the slider box. |
|
|
603
|
-
| `extendBoxToControls` | Extend slider “box†background behind controls.
|
|
603
|
+
| `extendBoxToControls` | Extend slider “box†background behind controls. |
|
|
604
604
|
| `controlVariant` | Variant for the +/- controls (if shown). |
|
|
605
605
|
| `controlStep` | Step used by +/- controls (falls back to `step`). |
|
|
606
606
|
| `controlDecrementIcon` | Custom icon node for decrement control. |
|
|
@@ -633,7 +633,7 @@ Value type: `boolean | undefined`
|
|
|
633
633
|
### Props
|
|
634
634
|
|
|
635
635
|
| Prop | Description |
|
|
636
|
-
|
|
636
|
+
|------------------------|--------------------------------------------|
|
|
637
637
|
| `value` | Current toggle value (boolean). |
|
|
638
638
|
| `onValue` | Called when the value changes. |
|
|
639
639
|
| `error` | Validation/error message for the field. |
|
|
@@ -668,7 +668,7 @@ Value type: `TreeKey | TreeKey[] | undefined` (where `TreeKey` is `string | numb
|
|
|
668
668
|
### Base props
|
|
669
669
|
|
|
670
670
|
| Prop | Description |
|
|
671
|
-
|
|
671
|
+
|-------------------------|--------------------------------------------------------------------------------|
|
|
672
672
|
| `value` | Selected key(s). Single value is a key; multi is an array of keys. |
|
|
673
673
|
| `onValue` | Called when selection changes. |
|
|
674
674
|
| `error` | Validation/error message for the field. |
|
|
@@ -703,7 +703,7 @@ Value type: `TreeKey | TreeKey[] | undefined` (where `TreeKey` is `string | numb
|
|
|
703
703
|
### Mode: default (`mode` omitted or "default")
|
|
704
704
|
|
|
705
705
|
| Prop | Description |
|
|
706
|
-
|
|
706
|
+
|----------------------------|-----------------------------------------------------------------|
|
|
707
707
|
| `mode` | Omit or set to `'default'` to use the standard field trigger. |
|
|
708
708
|
| `button` | Optional custom trigger button renderer. |
|
|
709
709
|
| `selectedBadge` | Optional selected-count badge renderer. |
|
|
@@ -718,12 +718,12 @@ Value type: `TreeKey | TreeKey[] | undefined` (where `TreeKey` is `string | numb
|
|
|
718
718
|
| `joinControls` | Visually join controls to the trigger box (shared border). |
|
|
719
719
|
| `extendBoxToControls` | Extend trigger background behind controls. |
|
|
720
720
|
| `rootClassName` | Wrapper className around controls + trigger. |
|
|
721
|
-
| `triggerInnerClassName` | ClassName for the trigger’s inner content.
|
|
721
|
+
| `triggerInnerClassName` | ClassName for the trigger’s inner content. |
|
|
722
722
|
|
|
723
723
|
### Mode: button (`mode="button"`)
|
|
724
724
|
|
|
725
725
|
| Prop | Description |
|
|
726
|
-
|
|
726
|
+
|----------------------------|-----------------------------------------------------------------|
|
|
727
727
|
| `mode` | Set to `'button'` to render a button-style trigger. |
|
|
728
728
|
| `button` | (mode='button') If provided, this is the trigger renderer. |
|
|
729
729
|
| `selectedBadge` | (mode='button') Selected-count badge renderer. |
|
|
@@ -781,7 +781,7 @@ Value type: `TreeKey | TreeKey[] | undefined` (where `TreeKey` is `string | numb
|
|
|
781
781
|
### Variant props
|
|
782
782
|
|
|
783
783
|
| Prop | Description |
|
|
784
|
-
|
|
784
|
+
|---------------------|---------------------------------------------------------------------------------------------------------------------------------|
|
|
785
785
|
| `options` | Options for the multi-select. Accepts primitives or objects. |
|
|
786
786
|
| `autoCap` | Capitalise the first letter of the label (when the resolved label is a string). |
|
|
787
787
|
| `optionLabel` | How to read the label from each option (string key or mapper function). If omitted: uses `label`, else `String(value)`. |
|
|
@@ -793,9 +793,9 @@ Value type: `TreeKey | TreeKey[] | undefined` (where `TreeKey` is `string | numb
|
|
|
793
793
|
| `searchable` | Enable search field in the list. |
|
|
794
794
|
| `searchPlaceholder` | Placeholder for the search field. |
|
|
795
795
|
| `emptySearchText` | Text when there are no matches for the current search. |
|
|
796
|
-
| `showSelectAll` | Show a “Select all†row.
|
|
797
|
-
| `selectAllLabel` | Label for the “Select all†row.
|
|
798
|
-
| `selectAllPosition` | Where to render the “Select all†row.
|
|
796
|
+
| `showSelectAll` | Show a “Select all†row. |
|
|
797
|
+
| `selectAllLabel` | Label for the “Select all†row. |
|
|
798
|
+
| `selectAllPosition` | Where to render the “Select all†row. |
|
|
799
799
|
| `clearable` | Show a clear action when there is at least one selection. |
|
|
800
800
|
| `placeholder` | Placeholder when nothing is selected. |
|
|
801
801
|
| `renderOption` | Optional global renderer for an option row. (An option may also provide its own per-option `render`.) |
|
|
@@ -814,7 +814,7 @@ Value type: `TreeKey | TreeKey[] | undefined` (where `TreeKey` is `string | numb
|
|
|
814
814
|
### Mode and trigger props
|
|
815
815
|
|
|
816
816
|
| Prop | Description |
|
|
817
|
-
|
|
817
|
+
|-------------------------------|------------------------------------------------------------------------------------------------------|
|
|
818
818
|
| `mode` | Choose trigger style: `"default"` (standard input-like trigger) or `"button"` (custom trigger node). |
|
|
819
819
|
| `leadingIcons` | Icons shown before the summary text inside the trigger (default mode). |
|
|
820
820
|
| `trailingIcons` | Icons shown after the summary / clear button inside the trigger. |
|
|
@@ -869,30 +869,30 @@ export function MultiSelectExample() {
|
|
|
869
869
|
|
|
870
870
|
### Variant props
|
|
871
871
|
|
|
872
|
-
| Prop | Description
|
|
873
|
-
|
|
874
|
-
| `items` | Alias of `options` (list of items to render).
|
|
875
|
-
| `options` | Options to render. Supports `RadioItem` objects or custom items via mappers.
|
|
872
|
+
| Prop | Description |
|
|
873
|
+
|------------------------|-----------------------------------------------------------------------------------------------------------------------|
|
|
874
|
+
| `items` | Alias of `options` (list of items to render). |
|
|
875
|
+
| `options` | Options to render. Supports `RadioItem` objects or custom items via mappers. |
|
|
876
876
|
| `mappers` | Mapping functions for `TItem → value/label/description/disabled/key/render`. Takes precedence over `option*` props. |
|
|
877
|
-
| `optionValue` | Shortcut mapping for **value** (used only if `mappers` is not provided).
|
|
878
|
-
| `optionLabel` | Shortcut mapping for **label** (used only if `mappers` is not provided).
|
|
879
|
-
| `renderOption` | Global option renderer (can be overridden per item via `item.render`).
|
|
880
|
-
| `layout` | Layout mode: `"stack"` or `"grid"`.
|
|
881
|
-
| `columns` | Number of columns when `layout="grid"`.
|
|
882
|
-
| `itemGapPx` | Gap (px) between items.
|
|
883
|
-
| `size` | Variant size override for the radio control.
|
|
884
|
-
| `density` | Variant density override for spacing.
|
|
885
|
-
| `autoCap` | Auto-capitalise labels when the resolved label is a string.
|
|
886
|
-
| `aria-label` | ARIA label forwarded to the radio group wrapper.
|
|
887
|
-
| `aria-labelledby` | ARIA `aria-labelledby` forwarded to the radio group wrapper.
|
|
888
|
-
| `aria-describedby` | ARIA `aria-describedby` forwarded to the radio group wrapper.
|
|
889
|
-
| `groupClassName` | ClassName for the group wrapper.
|
|
890
|
-
| `optionClassName` | ClassName for each option container.
|
|
891
|
-
| `labelClassName` | ClassName for the option label.
|
|
892
|
-
| `descriptionClassName` | ClassName for the option description.
|
|
893
|
-
| `id` | Optional `id` for the group wrapper.
|
|
894
|
-
| `name` | HTML `name` attribute to group radio inputs.
|
|
895
|
-
| `className` | Alias for `groupClassName`.
|
|
877
|
+
| `optionValue` | Shortcut mapping for **value** (used only if `mappers` is not provided). |
|
|
878
|
+
| `optionLabel` | Shortcut mapping for **label** (used only if `mappers` is not provided). |
|
|
879
|
+
| `renderOption` | Global option renderer (can be overridden per item via `item.render`). |
|
|
880
|
+
| `layout` | Layout mode: `"stack"` or `"grid"`. |
|
|
881
|
+
| `columns` | Number of columns when `layout="grid"`. |
|
|
882
|
+
| `itemGapPx` | Gap (px) between items. |
|
|
883
|
+
| `size` | Variant size override for the radio control. |
|
|
884
|
+
| `density` | Variant density override for spacing. |
|
|
885
|
+
| `autoCap` | Auto-capitalise labels when the resolved label is a string. |
|
|
886
|
+
| `aria-label` | ARIA label forwarded to the radio group wrapper. |
|
|
887
|
+
| `aria-labelledby` | ARIA `aria-labelledby` forwarded to the radio group wrapper. |
|
|
888
|
+
| `aria-describedby` | ARIA `aria-describedby` forwarded to the radio group wrapper. |
|
|
889
|
+
| `groupClassName` | ClassName for the group wrapper. |
|
|
890
|
+
| `optionClassName` | ClassName for each option container. |
|
|
891
|
+
| `labelClassName` | ClassName for the option label. |
|
|
892
|
+
| `descriptionClassName` | ClassName for the option description. |
|
|
893
|
+
| `id` | Optional `id` for the group wrapper. |
|
|
894
|
+
| `name` | HTML `name` attribute to group radio inputs. |
|
|
895
|
+
| `className` | Alias for `groupClassName`. |
|
|
896
896
|
|
|
897
897
|
### Supported option shapes
|
|
898
898
|
|
|
@@ -931,7 +931,7 @@ export function RadioExample() {
|
|
|
931
931
|
### Variant props
|
|
932
932
|
|
|
933
933
|
| Prop | Description |
|
|
934
|
-
|
|
934
|
+
|----------------------------|---------------------------------------------------------------------------------------------------------------------------------|
|
|
935
935
|
| `options` | Options for the select. Accepts primitives or objects. |
|
|
936
936
|
| `autoCap` | Capitalise the first letter of the label (when the resolved label is a string). |
|
|
937
937
|
| `optionLabel` | How to read the label from each option (string key or mapper function). If omitted: uses `label`, else `String(value)`. |
|
|
@@ -944,7 +944,7 @@ export function RadioExample() {
|
|
|
944
944
|
| `searchPlaceholder` | Placeholder for the search field. |
|
|
945
945
|
| `emptySearchText` | Text shown when there are no matches for the current search. |
|
|
946
946
|
| `clearable` | Show a clear action (x) when a value is selected. |
|
|
947
|
-
| `emptyLabel` | Label to show when no value is selected (acts like “noneâ€).
|
|
947
|
+
| `emptyLabel` | Label to show when no value is selected (acts like “noneâ€). |
|
|
948
948
|
| `placeholder` | Placeholder when no value is selected (and `emptyLabel` not shown). |
|
|
949
949
|
| `renderOption` | Optional global renderer for a list option. (An option may also provide its own per-option `render`.) |
|
|
950
950
|
| `renderValue` | Custom renderer for the trigger display (selected option). |
|
|
@@ -1007,20 +1007,20 @@ export function SelectExample() {
|
|
|
1007
1007
|
## checkbox
|
|
1008
1008
|
|
|
1009
1009
|
| Prop | Description | | |
|
|
1010
|
-
|
|
1010
|
+
|------------------------|------------------------------------------------------------------------------------------------------------------------------------|--------------------------------|------------------------|
|
|
1011
1011
|
| `single` | Render a single boolean checkbox instead of an option group. | | |
|
|
1012
1012
|
| `singleLabel` | Label text shown next to the checkbox in single mode. | | |
|
|
1013
1013
|
| `singleDescription` | Optional helper text shown under the single checkbox label. | | |
|
|
1014
1014
|
| `options` | Option list for group mode. Accepts primitives or objects (normalized to `{ value, label, description?, disabled?, key? }`). | | |
|
|
1015
1015
|
| `items` | Alias for `options` (alternate naming). | | |
|
|
1016
1016
|
| `mappers` | Override normalization: `{ mapValue?, mapLabel?, mapDescription?, mapDisabled?, mapKey? }`. | | |
|
|
1017
|
-
| `optionValue` | Map item → option value (overrides `mappers.mapValue`).
|
|
1018
|
-
| `optionLabel` | Map item → option label (overrides `mappers.mapLabel`).
|
|
1019
|
-
| `optionDescription` | Map item → option description (overrides `mappers.mapDescription`).
|
|
1020
|
-
| `optionDisabled` | Map item → disabled boolean (overrides `mappers.mapDisabled`).
|
|
1021
|
-
| `optionKey` | Map item → stable React key (overrides `mappers.mapKey`).
|
|
1017
|
+
| `optionValue` | Map item → option value (overrides `mappers.mapValue`). | | |
|
|
1018
|
+
| `optionLabel` | Map item → option label (overrides `mappers.mapLabel`). | | |
|
|
1019
|
+
| `optionDescription` | Map item → option description (overrides `mappers.mapDescription`). | | |
|
|
1020
|
+
| `optionDisabled` | Map item → disabled boolean (overrides `mappers.mapDisabled`). | | |
|
|
1021
|
+
| `optionKey` | Map item → stable React key (overrides `mappers.mapKey`). | | |
|
|
1022
1022
|
| `renderOption` | Custom option renderer (gets `{ item, index, state, effectiveTristate, disabled, size, density, checkboxId, click(), checkbox }`). | | |
|
|
1023
|
-
| `tristate` | Enable tri-state cycling for group options (`none → true → false → none`).
|
|
1023
|
+
| `tristate` | Enable tri-state cycling for group options (`none → true → false → none`). | | |
|
|
1024
1024
|
| `layout` | Group layout: `"list"` or `"grid"`. | | |
|
|
1025
1025
|
| `columns` | Grid columns when `layout="grid"` (default: `2`). | | |
|
|
1026
1026
|
| `itemGapPx` | Gap between options in px (defaults vary by layout). | | |
|
|
@@ -1077,14 +1077,14 @@ export function SelectExample() {
|
|
|
1077
1077
|
## chips
|
|
1078
1078
|
|
|
1079
1079
|
| Prop | Description | |
|
|
1080
|
-
|
|
1080
|
+
|------------------------|--------------------------------------------------------------------------|-------------------------------|
|
|
1081
1081
|
| `placeholder` | Placeholder shown when there are no chips and input is empty. | |
|
|
1082
1082
|
| `separators` | Separators used to split raw input into chips. Default: `[",", ";"]`. | |
|
|
1083
1083
|
| `addOnEnter` | Commit chips on **Enter**. Default: `true`. | |
|
|
1084
1084
|
| `addOnTab` | Commit chips on **Tab**. Default: `true`. | |
|
|
1085
1085
|
| `addOnBlur` | Commit chips on **blur**. Default: `true`. | |
|
|
1086
1086
|
| `allowDuplicates` | When `false`, duplicate chips are ignored. Default: `false`. | |
|
|
1087
|
-
| `maxChips` | Maximum number of chips allowed (`undefined` → unlimited).
|
|
1087
|
+
| `maxChips` | Maximum number of chips allowed (`undefined` → unlimited). | |
|
|
1088
1088
|
| `backspaceRemovesLast` | Remove last chip on Backspace when input is empty. Default: `true`. | |
|
|
1089
1089
|
| `clearable` | Show a clear-all button. Default: `false`. | |
|
|
1090
1090
|
| `onAddChips` | Callback: `(added, next) => void` after chips are added. | |
|
|
@@ -1132,7 +1132,7 @@ export function SelectExample() {
|
|
|
1132
1132
|
## color
|
|
1133
1133
|
|
|
1134
1134
|
| Prop | Description |
|
|
1135
|
-
|
|
1135
|
+
|--------------------------|----------------------------------------------------------------------------|
|
|
1136
1136
|
| `showPreview` | Show a color preview button / swatch. Default: `true`. |
|
|
1137
1137
|
| `showPickerToggle` | Show the small picker toggle icon. Default: `true`. |
|
|
1138
1138
|
| `previewSize` | Preview swatch size in px. Default: `16`. |
|
|
@@ -1166,16 +1166,16 @@ import { Palette } from "lucide-react";
|
|
|
1166
1166
|
### Variant props
|
|
1167
1167
|
|
|
1168
1168
|
| Prop | Description | |
|
|
1169
|
-
|
|
1169
|
+
|--------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------|
|
|
1170
1170
|
| `mode` | Selection mode: `"single"` or `"range"`. | |
|
|
1171
|
-
| `placeholder` | Placeholder content shown when there’s no selection.
|
|
1171
|
+
| `placeholder` | Placeholder content shown when there’s no selection. | |
|
|
1172
1172
|
| `clearable` | If `true`, shows a clear action when a value is set. | |
|
|
1173
1173
|
| `minDate` | Minimum selectable date (inclusive). | |
|
|
1174
1174
|
| `maxDate` | Maximum selectable date (inclusive). | |
|
|
1175
1175
|
| `disabledDays` | Disabled-day matcher forwarded to the calendar wrapper (`Calendar["disabled"]`). | |
|
|
1176
1176
|
| `formatSingle` | Display pattern for single values. Supports tokens: `yyyy`, `MM`, `dd`, `HH`, `mm`. Defaults depend on `kind`. | |
|
|
1177
1177
|
| `formatRange` | Range display formatter: either a pattern string (same tokens as `formatSingle`) or a custom `(range) => string` formatter. | |
|
|
1178
|
-
| `rangeSeparator` | Separator used between `from` and `to` when `formatRange` is a string pattern. Default: `" – "`.
|
|
1178
|
+
| `rangeSeparator` | Separator used between `from` and `to` when `formatRange` is a string pattern. Default: `" – "`. | |
|
|
1179
1179
|
| `stayOpenOnSelect` | If `true`, keeps the popover open after selecting. In range mode, stays open until both ends are chosen. | |
|
|
1180
1180
|
| `open` | Controlled open state for the popover. | |
|
|
1181
1181
|
| `onOpenChange` | Called when the popover open state changes. | |
|
|
@@ -1215,19 +1215,19 @@ export function DateRangeExample() {
|
|
|
1215
1215
|
### Variant props
|
|
1216
1216
|
|
|
1217
1217
|
| Prop | Description |
|
|
1218
|
-
|
|
1218
|
+
|------------------|------------------------------------------------------------------------------------------------------------------|
|
|
1219
1219
|
| `min` | Minimum number of pairs allowed (enforced by the UI controls). |
|
|
1220
1220
|
| `max` | Maximum number of pairs allowed. |
|
|
1221
|
-
| `minVisible` | Minimum number of chips to show before collapsing into a “more†indicator.
|
|
1222
|
-
| `maxVisible` | Maximum number of chips to show before collapsing into a “more†indicator.
|
|
1223
|
-
| `showAddButton` | Toggle visibility of the “Add†action.
|
|
1221
|
+
| `minVisible` | Minimum number of chips to show before collapsing into a “more†indicator. |
|
|
1222
|
+
| `maxVisible` | Maximum number of chips to show before collapsing into a “more†indicator. |
|
|
1223
|
+
| `showAddButton` | Toggle visibility of the “Add†action. |
|
|
1224
1224
|
| `showMenuButton` | Toggle visibility of the overflow/menu action (if supported by the preset). |
|
|
1225
1225
|
| `placeholder` | Placeholder shown when there are no items. |
|
|
1226
1226
|
| `dialogTitle` | Title for the edit/add dialog UI. |
|
|
1227
|
-
| `keyLabel` | Label used for the “key†input.
|
|
1228
|
-
| `valueLabel` | Label used for the “value†input.
|
|
1227
|
+
| `keyLabel` | Label used for the “key†input. |
|
|
1228
|
+
| `valueLabel` | Label used for the “value†input. |
|
|
1229
1229
|
| `submitLabel` | Text for the dialog submit button. |
|
|
1230
|
-
| `moreLabel` | Label renderer for the collapsed “more†indicator: `(count) => ReactNode`.
|
|
1230
|
+
| `moreLabel` | Label renderer for the collapsed “more†indicator: `(count) => ReactNode`. |
|
|
1231
1231
|
| `emptyLabel` | Label shown when there are no entries (fallback text). |
|
|
1232
1232
|
| `className` | Wrapper class for the whole variant. |
|
|
1233
1233
|
| `chipsClassName` | Class for the chips container. |
|
|
@@ -1267,7 +1267,7 @@ export function KeyValueExample() {
|
|
|
1267
1267
|
### Variant props
|
|
1268
1268
|
|
|
1269
1269
|
| Prop | Description |
|
|
1270
|
-
|
|
1270
|
+
|--------------------|-------------------------------------------------------------------|
|
|
1271
1271
|
| `placeholder` | Placeholder content when the editor is empty. |
|
|
1272
1272
|
| `minHeight` | Minimum height (px) for the editor surface. |
|
|
1273
1273
|
| `maxHeight` | Maximum height (px) for the editor surface (scrolls beyond this). |
|
|
@@ -1312,36 +1312,36 @@ export function EditorExample() {
|
|
|
1312
1312
|
|
|
1313
1313
|
### Variant props
|
|
1314
1314
|
|
|
1315
|
-
| Prop | Description
|
|
1316
|
-
|
|
1317
|
-
| `multiple` | Allow selecting multiple files.
|
|
1318
|
-
| `accept` | Accepted file types (input accept string / list).
|
|
1319
|
-
| `maxFiles` | Max number of files allowed.
|
|
1320
|
-
| `maxTotalSize` | Max total size allowed for all files (bytes).
|
|
1321
|
-
| `showDropArea` | Show the drop-area UI section.
|
|
1322
|
-
| `dropIcon` | Optional icon shown in the drop area.
|
|
1323
|
-
| `dropTitle` | Title text shown in the drop area.
|
|
1324
|
-
| `dropDescription` | Helper text shown in the drop area.
|
|
1315
|
+
| Prop | Description |
|
|
1316
|
+
|---------------------|--------------------------------------------------------------------------|
|
|
1317
|
+
| `multiple` | Allow selecting multiple files. |
|
|
1318
|
+
| `accept` | Accepted file types (input accept string / list). |
|
|
1319
|
+
| `maxFiles` | Max number of files allowed. |
|
|
1320
|
+
| `maxTotalSize` | Max total size allowed for all files (bytes). |
|
|
1321
|
+
| `showDropArea` | Show the drop-area UI section. |
|
|
1322
|
+
| `dropIcon` | Optional icon shown in the drop area. |
|
|
1323
|
+
| `dropTitle` | Title text shown in the drop area. |
|
|
1324
|
+
| `dropDescription` | Helper text shown in the drop area. |
|
|
1325
1325
|
| `custom` | Use a fully custom “picker†UI instead of the built-in drop/trigger. |
|
|
1326
|
-
| `asRaw` | Treat values as raw `File` objects (native picker flow).
|
|
1327
|
-
| `renderDropArea` | Custom renderer for the drop area section.
|
|
1328
|
-
| `renderFileItem` | Custom renderer for each file item row.
|
|
1329
|
-
| `showCheckboxes` | Show checkboxes next to file items (when supported by the UI).
|
|
1330
|
-
| `onFilesAdded` | Callback fired when files are added.
|
|
1331
|
-
| `customLoader` | Provide your own file loader (e.g. resolve URLs → metadata).
|
|
1332
|
-
| `mergeMode` | Merge strategy when adding files (e.g. append/replace/dedupe).
|
|
1333
|
-
| `formatFileName` | Custom formatter for displaying a file name.
|
|
1334
|
-
| `formatFileSize` | Custom formatter for displaying a file size.
|
|
1335
|
-
| `placeholder` | Placeholder text when nothing is selected.
|
|
1336
|
-
| `className` | Wrapper class for the whole variant.
|
|
1337
|
-
| `dropAreaClassName` | ClassName for the drop-area wrapper.
|
|
1338
|
-
| `listClassName` | ClassName for the file list container.
|
|
1339
|
-
| `triggerClassName` | ClassName for the trigger (when using the built-in trigger).
|
|
1326
|
+
| `asRaw` | Treat values as raw `File` objects (native picker flow). |
|
|
1327
|
+
| `renderDropArea` | Custom renderer for the drop area section. |
|
|
1328
|
+
| `renderFileItem` | Custom renderer for each file item row. |
|
|
1329
|
+
| `showCheckboxes` | Show checkboxes next to file items (when supported by the UI). |
|
|
1330
|
+
| `onFilesAdded` | Callback fired when files are added. |
|
|
1331
|
+
| `customLoader` | Provide your own file loader (e.g. resolve URLs → metadata). |
|
|
1332
|
+
| `mergeMode` | Merge strategy when adding files (e.g. append/replace/dedupe). |
|
|
1333
|
+
| `formatFileName` | Custom formatter for displaying a file name. |
|
|
1334
|
+
| `formatFileSize` | Custom formatter for displaying a file size. |
|
|
1335
|
+
| `placeholder` | Placeholder text when nothing is selected. |
|
|
1336
|
+
| `className` | Wrapper class for the whole variant. |
|
|
1337
|
+
| `dropAreaClassName` | ClassName for the drop-area wrapper. |
|
|
1338
|
+
| `listClassName` | ClassName for the file list container. |
|
|
1339
|
+
| `triggerClassName` | ClassName for the trigger (when using the built-in trigger). |
|
|
1340
1340
|
|
|
1341
1341
|
### Mode and trigger props
|
|
1342
1342
|
|
|
1343
1343
|
| Prop | Description |
|
|
1344
|
-
|
|
1344
|
+
|-------------------------------|-------------------------------------------------------------------------|
|
|
1345
1345
|
| `mode` | Trigger style: `"default"` (input-like) or `"button"` (custom trigger). |
|
|
1346
1346
|
| `leadingIcons` | Icons shown before the summary (default mode). |
|
|
1347
1347
|
| `trailingIcons` | Icons shown after the summary / clear action. |
|
|
@@ -1353,7 +1353,7 @@ export function EditorExample() {
|
|
|
1353
1353
|
| `trailingControl` | Custom node on the far-right *outside* the trigger. |
|
|
1354
1354
|
| `leadingControlClassName` | ClassName for the leading control wrapper. |
|
|
1355
1355
|
| `trailingControlClassName` | ClassName for the trailing control wrapper. |
|
|
1356
|
-
| `joinControls` | Visually “joins†leading/trailing controls with the trigger.
|
|
1356
|
+
| `joinControls` | Visually “joins†leading/trailing controls with the trigger. |
|
|
1357
1357
|
| `extendBoxToControls` | Extends the input box styling around joined controls. |
|
|
1358
1358
|
| `button` | When `mode="button"`: explicit trigger node. |
|
|
1359
1359
|
| `children` | When `mode="button"` and `button` is not provided: trigger content. |
|
|
@@ -1391,22 +1391,22 @@ export function FileExample() {
|
|
|
1391
1391
|
|
|
1392
1392
|
### Variant props
|
|
1393
1393
|
|
|
1394
|
-
| Prop | Description
|
|
1395
|
-
|
|
1396
|
-
| `multiple` | Allow selecting multiple icons (value becomes `string[]`).
|
|
1397
|
-
| `url` | Iconify API base URL (defaults to registry `iconPicker.url`).
|
|
1398
|
-
| `groups` | Icon groups to display (defaults to registry `iconPicker.groups`).
|
|
1399
|
-
| `allowedGroupIds` | Restrict selectable groups by group id.
|
|
1400
|
-
| `maxRender` | Max icons rendered in the grid (safety cap for large sets).
|
|
1401
|
-
| `placeholder` | Placeholder text when nothing is selected.
|
|
1402
|
-
| `className` | Wrapper class for the whole variant.
|
|
1403
|
-
| `triggerClassName` | ClassName for the trigger (default mode).
|
|
1404
|
-
| `popoverClassName` | ClassName for the popover content wrapper.
|
|
1394
|
+
| Prop | Description |
|
|
1395
|
+
|--------------------|--------------------------------------------------------------------|
|
|
1396
|
+
| `multiple` | Allow selecting multiple icons (value becomes `string[]`). |
|
|
1397
|
+
| `url` | Iconify API base URL (defaults to registry `iconPicker.url`). |
|
|
1398
|
+
| `groups` | Icon groups to display (defaults to registry `iconPicker.groups`). |
|
|
1399
|
+
| `allowedGroupIds` | Restrict selectable groups by group id. |
|
|
1400
|
+
| `maxRender` | Max icons rendered in the grid (safety cap for large sets). |
|
|
1401
|
+
| `placeholder` | Placeholder text when nothing is selected. |
|
|
1402
|
+
| `className` | Wrapper class for the whole variant. |
|
|
1403
|
+
| `triggerClassName` | ClassName for the trigger (default mode). |
|
|
1404
|
+
| `popoverClassName` | ClassName for the popover content wrapper. |
|
|
1405
1405
|
|
|
1406
1406
|
### Mode and trigger props
|
|
1407
1407
|
|
|
1408
1408
|
| Prop | Description |
|
|
1409
|
-
|
|
1409
|
+
|-------------------------------|-------------------------------------------------------------------------|
|
|
1410
1410
|
| `mode` | Trigger style: `"default"` (input-like) or `"button"` (custom trigger). |
|
|
1411
1411
|
| `leadingIcons` | Icons shown before the selection (default mode). |
|
|
1412
1412
|
| `trailingIcons` | Icons shown after the selection. |
|
|
@@ -1452,31 +1452,31 @@ export function IconExample() {
|
|
|
1452
1452
|
|
|
1453
1453
|
### Variant props
|
|
1454
1454
|
|
|
1455
|
-
| Prop | Description
|
|
1456
|
-
|
|
1457
|
-
| `multiple` | Allow selecting multiple items (icons and/or images).
|
|
1458
|
-
| `iconUrl` | Iconify API base URL for the icon picker (defaults to registry `iconPicker.url`).
|
|
1459
|
-
| `iconGroups` | Icon groups to display (defaults to registry `iconPicker.groups`).
|
|
1460
|
-
| `allowedIconGroupIds` | Restrict selectable icon groups by id.
|
|
1461
|
-
| `iconMaxRender` | Max icons rendered in the grid (safety cap for large sets).
|
|
1462
|
-
| `accept` | Accepted file types (input accept string / list).
|
|
1463
|
-
| `maxFiles` | Max number of files allowed.
|
|
1464
|
-
| `maxTotalSize` | Max total size allowed for all files (bytes).
|
|
1465
|
-
| `customLoader` | Provide your own file loader (e.g. resolve URLs -> metadata).
|
|
1466
|
-
| `mergeMode` | Merge strategy when adding files (`"append"` or `"replace"`).
|
|
1467
|
-
| `formatFileName` | Custom formatter for displaying a file name.
|
|
1468
|
-
| `formatFileSize` | Custom formatter for displaying a file size.
|
|
1469
|
-
| `formatFileValue` | Convert a `FileItem` into a persisted string value (falls back to `url`, `path`, or native file).
|
|
1470
|
-
| `placeholder` | Placeholder text when nothing is selected.
|
|
1471
|
-
| `className` | Wrapper class for the whole variant.
|
|
1472
|
-
| `triggerClassName` | ClassName for the trigger (default mode).
|
|
1473
|
-
| `popoverClassName` | ClassName for the popover content wrapper.
|
|
1474
|
-
| `showCheckboxes` | Show checkboxes next to items in the list (when supported by the UI).
|
|
1455
|
+
| Prop | Description |
|
|
1456
|
+
|-----------------------|---------------------------------------------------------------------------------------------------------------|
|
|
1457
|
+
| `multiple` | Allow selecting multiple items (icons and/or images). |
|
|
1458
|
+
| `iconUrl` | Iconify API base URL for the icon picker (defaults to registry `iconPicker.url`). |
|
|
1459
|
+
| `iconGroups` | Icon groups to display (defaults to registry `iconPicker.groups`). |
|
|
1460
|
+
| `allowedIconGroupIds` | Restrict selectable icon groups by id. |
|
|
1461
|
+
| `iconMaxRender` | Max icons rendered in the grid (safety cap for large sets). |
|
|
1462
|
+
| `accept` | Accepted file types (input accept string / list). |
|
|
1463
|
+
| `maxFiles` | Max number of files allowed. |
|
|
1464
|
+
| `maxTotalSize` | Max total size allowed for all files (bytes). |
|
|
1465
|
+
| `customLoader` | Provide your own file loader or pass true to use your global built-in loader (e.g. resolve URLs -> metadata). |
|
|
1466
|
+
| `mergeMode` | Merge strategy when adding files (`"append"` or `"replace"`). |
|
|
1467
|
+
| `formatFileName` | Custom formatter for displaying a file name. |
|
|
1468
|
+
| `formatFileSize` | Custom formatter for displaying a file size. |
|
|
1469
|
+
| `formatFileValue` | Convert a `FileItem` into a persisted string value (falls back to `url`, `path`, or native file). |
|
|
1470
|
+
| `placeholder` | Placeholder text when nothing is selected. |
|
|
1471
|
+
| `className` | Wrapper class for the whole variant. |
|
|
1472
|
+
| `triggerClassName` | ClassName for the trigger (default mode). |
|
|
1473
|
+
| `popoverClassName` | ClassName for the popover content wrapper. |
|
|
1474
|
+
| `showCheckboxes` | Show checkboxes next to items in the list (when supported by the UI). |
|
|
1475
1475
|
|
|
1476
1476
|
### Mode and trigger props
|
|
1477
1477
|
|
|
1478
1478
|
| Prop | Description |
|
|
1479
|
-
|
|
1479
|
+
|-------------------------------|-------------------------------------------------------------------------|
|
|
1480
1480
|
| `mode` | Trigger style: `"default"` (input-like) or `"button"` (custom trigger). |
|
|
1481
1481
|
| `leadingIcons` | Icons shown before the summary (default mode). |
|
|
1482
1482
|
| `trailingIcons` | Icons shown after the summary / clear action. |
|
|
@@ -1527,7 +1527,7 @@ export function ImageIconExample() {
|
|
|
1527
1527
|
### Wrapper / trigger props
|
|
1528
1528
|
|
|
1529
1529
|
| Prop | Description |
|
|
1530
|
-
|
|
1530
|
+
|--------------------|-----------------------------------------------------------|
|
|
1531
1531
|
| `mode` | Display mode: `"popover"` or `"accordion"`. |
|
|
1532
1532
|
| `trigger` | Custom trigger node (popover mode). |
|
|
1533
1533
|
| `triggerLabel` | Default trigger label text (popover mode). |
|
|
@@ -1546,25 +1546,25 @@ export function ImageIconExample() {
|
|
|
1546
1546
|
|
|
1547
1547
|
### Editor props (passed into the JSON editor)
|
|
1548
1548
|
|
|
1549
|
-
| Prop | Description
|
|
1550
|
-
|
|
1551
|
-
| `title` | Title displayed in the editor header.
|
|
1549
|
+
| Prop | Description |
|
|
1550
|
+
|--------------------|---------------------------------------------------------------------------------------|
|
|
1551
|
+
| `title` | Title displayed in the editor header. |
|
|
1552
1552
|
| `fieldMap` | Field mapping rules (wildcards supported) → picks a field variant + props per path. |
|
|
1553
|
-
| `layout` | Layout rules (grid/rows + route/page rules).
|
|
1554
|
-
| `defaults` | Default values / behaviours for missing keys and created fields.
|
|
1555
|
-
| `filters` | Include/exclude filters for routes/fields.
|
|
1556
|
-
| `permissions` | Permissions (add/delete/view/edit raw, etc.).
|
|
1557
|
-
| `callbacks` | Hooks for events like add/delete/edit / route changes.
|
|
1558
|
-
| `route` | Controlled “page route†(e.g. `"config.headers"`).
|
|
1559
|
-
| `defaultRoute` | Starting route when uncontrolled.
|
|
1560
|
-
| `onRouteChange` | Route change callback.
|
|
1561
|
-
| `viewMode` | Controlled view mode (e.g. raw vs structured UI).
|
|
1562
|
-
| `defaultViewMode` | Default view mode when uncontrolled.
|
|
1563
|
-
| `onViewModeChange` | View mode change callback.
|
|
1564
|
-
| `className` | Root class for the editor.
|
|
1565
|
-
| `contentClassName` | Class for the main content region.
|
|
1566
|
-
| `navClassName` | Class for the navigation region.
|
|
1567
|
-
| `bodyClassName` | Class for the body region.
|
|
1553
|
+
| `layout` | Layout rules (grid/rows + route/page rules). |
|
|
1554
|
+
| `defaults` | Default values / behaviours for missing keys and created fields. |
|
|
1555
|
+
| `filters` | Include/exclude filters for routes/fields. |
|
|
1556
|
+
| `permissions` | Permissions (add/delete/view/edit raw, etc.). |
|
|
1557
|
+
| `callbacks` | Hooks for events like add/delete/edit / route changes. |
|
|
1558
|
+
| `route` | Controlled “page route†(e.g. `"config.headers"`). |
|
|
1559
|
+
| `defaultRoute` | Starting route when uncontrolled. |
|
|
1560
|
+
| `onRouteChange` | Route change callback. |
|
|
1561
|
+
| `viewMode` | Controlled view mode (e.g. raw vs structured UI). |
|
|
1562
|
+
| `defaultViewMode` | Default view mode when uncontrolled. |
|
|
1563
|
+
| `onViewModeChange` | View mode change callback. |
|
|
1564
|
+
| `className` | Root class for the editor. |
|
|
1565
|
+
| `contentClassName` | Class for the main content region. |
|
|
1566
|
+
| `navClassName` | Class for the navigation region. |
|
|
1567
|
+
| `bodyClassName` | Class for the body region. |
|
|
1568
1568
|
|
|
1569
1569
|
### Sample usage
|
|
1570
1570
|
|
|
@@ -1609,31 +1609,31 @@ export function JsonEditorExample() {
|
|
|
1609
1609
|
### Data + mapping props
|
|
1610
1610
|
|
|
1611
1611
|
| Prop | Description |
|
|
1612
|
-
|
|
1612
|
+
|---------------------|-------------------------------------------------------------------------|
|
|
1613
1613
|
| `def` | Base lister definition (columns, source, mapping, etc.). |
|
|
1614
1614
|
| `endpoint` | Inline source endpoint (standalone inline mode). |
|
|
1615
1615
|
| `method` | Inline HTTP method: `"GET"` or `"POST"`. |
|
|
1616
1616
|
| `buildRequest` | Custom request builder (params/body/headers). |
|
|
1617
1617
|
| `selector` | How to extract the array from the response (function or selector path). |
|
|
1618
|
-
| `optionValue` | How to map a raw row → option value (key or function).
|
|
1619
|
-
| `optionLabel` | How to map a raw row → label.
|
|
1620
|
-
| `optionIcon` | How to map a raw row → icon.
|
|
1621
|
-
| `optionDescription` | How to map a raw row → description.
|
|
1622
|
-
| `optionDisabled` | How to map a raw row → disabled.
|
|
1623
|
-
| `optionGroup` | How to map a raw row → group label.
|
|
1624
|
-
| `optionMeta` | How to map a raw row → meta payload.
|
|
1618
|
+
| `optionValue` | How to map a raw row → option value (key or function). |
|
|
1619
|
+
| `optionLabel` | How to map a raw row → label. |
|
|
1620
|
+
| `optionIcon` | How to map a raw row → icon. |
|
|
1621
|
+
| `optionDescription` | How to map a raw row → description. |
|
|
1622
|
+
| `optionDisabled` | How to map a raw row → disabled. |
|
|
1623
|
+
| `optionGroup` | How to map a raw row → group label. |
|
|
1624
|
+
| `optionMeta` | How to map a raw row → meta payload. |
|
|
1625
1625
|
| `search` | Search override (inline). |
|
|
1626
1626
|
| `searchTarget` | Search target override (inline). |
|
|
1627
1627
|
|
|
1628
1628
|
### Selection + behaviour props
|
|
1629
1629
|
|
|
1630
1630
|
| Prop | Description |
|
|
1631
|
-
|
|
1631
|
+
|--------------------|------------------------------------------------------------|
|
|
1632
1632
|
| `filters` | Filters payload used by the lister source. |
|
|
1633
1633
|
| `confirm` | Optional confirm behaviour (e.g. confirm selection). |
|
|
1634
1634
|
| `permissions` | Permissions object used by the lister UI (actions, views). |
|
|
1635
1635
|
| `placeholder` | Placeholder text when nothing is selected. |
|
|
1636
|
-
| `maxDisplayItems` | Max chips/labels to show before collapsing into “+Nâ€.
|
|
1636
|
+
| `maxDisplayItems` | Max chips/labels to show before collapsing into “+Nâ€. |
|
|
1637
1637
|
| `renderTrigger` | Custom trigger renderer. |
|
|
1638
1638
|
| `title` | Title displayed when opening the lister UI. |
|
|
1639
1639
|
| `searchMode` | Search mode for the open UI. |
|
|
@@ -1649,7 +1649,7 @@ export function JsonEditorExample() {
|
|
|
1649
1649
|
### Trigger styling + container props
|
|
1650
1650
|
|
|
1651
1651
|
| Prop | Description |
|
|
1652
|
-
|
|
1652
|
+
|-------------------------------|-------------------------------------------------------------------------|
|
|
1653
1653
|
| `mode` | Trigger style: `"default"` (input-like) or `"button"` (custom trigger). |
|
|
1654
1654
|
| `clearable` | Show clear action when a selection exists. |
|
|
1655
1655
|
| `leadingIcons` | Icons shown before the summary (default mode). |
|
|
@@ -1662,7 +1662,7 @@ export function JsonEditorExample() {
|
|
|
1662
1662
|
| `trailingControl` | Custom node on the far-right *outside* the trigger. |
|
|
1663
1663
|
| `leadingControlClassName` | ClassName for the leading control wrapper. |
|
|
1664
1664
|
| `trailingControlClassName` | ClassName for the trailing control wrapper. |
|
|
1665
|
-
| `joinControls` | Visually “joins†leading/trailing controls with the trigger.
|
|
1665
|
+
| `joinControls` | Visually “joins†leading/trailing controls with the trigger. |
|
|
1666
1666
|
| `extendBoxToControls` | Extends the input box styling around joined controls. |
|
|
1667
1667
|
| `maxListHeight` | Max height for the open list/panel (px). |
|
|
1668
1668
|
| `className` | Wrapper class for the whole variant. |
|
|
@@ -1711,7 +1711,7 @@ export function ListerExample() {
|
|
|
1711
1711
|
### Variant props
|
|
1712
1712
|
|
|
1713
1713
|
| Prop | Description |
|
|
1714
|
-
|
|
1714
|
+
|-------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
|
|
1715
1715
|
| `component` | React component to render. **Required.** |
|
|
1716
1716
|
| `valueProp` | Prop name that receives the current value. Default: `"value"`. |
|
|
1717
1717
|
| `changeProp` | Prop name for the change handler the component calls. Default: `"onChange"`. The component is expected to call `props[changeProp](nextValue, ...args)`; the **first** argument is treated as the next value. |
|
|
@@ -1942,7 +1942,7 @@ It also returns **selection state** (optional) and **fetch/search/filter helpers
|
|
|
1942
1942
|
## `UseDataOptions` (inputs)
|
|
1943
1943
|
|
|
1944
1944
|
| Option | Description |
|
|
1945
|
-
|
|
1945
|
+
|----------------------------|------------------------------------------------------------------------------|
|
|
1946
1946
|
| `id?` | Optional identifier used when building the inline def. |
|
|
1947
1947
|
| `endpoint` | URL/path to fetch items from. |
|
|
1948
1948
|
| `method?` | HTTP method (default: `"GET"`). |
|
|
@@ -1961,7 +1961,7 @@ It also returns **selection state** (optional) and **fetch/search/filter helpers
|
|
|
1961
1961
|
### Selection config (`selection`)
|
|
1962
1962
|
|
|
1963
1963
|
| Key | Meaning |
|
|
1964
|
-
|
|
1964
|
+
|---------|--------------------------------------------------------------------------------------------------------------------------|
|
|
1965
1965
|
| `mode` | `"single"` or `"multiple"` (omit = no selection). |
|
|
1966
1966
|
| `key` | How to compute the item ID. String key (e.g. `"id"`) or `(item) => id`. |
|
|
1967
1967
|
| `prune` | `"never"` (default) keeps selection across new fetches. `"missing"` removes selected IDs not present in the latest list. |
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@timeax/form-palette",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "0.1.
|
|
4
|
+
"version": "0.1.20",
|
|
5
5
|
"description": "This package extracts and standardizes the **form + input + variant system** from an existing Laravel/Inertia/React project into a **reusable, framework-friendly** library",
|
|
6
6
|
"keywords": [
|
|
7
7
|
"Form",
|