sherick-ui 2.4.0 → 2.6.0
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 +57 -1
- package/dist/cjs/components/CheckboxGroup.cjs +41 -0
- package/dist/cjs/components/CheckboxGroup.cjs.map +1 -0
- package/dist/cjs/components/Combobox.cjs +186 -12
- package/dist/cjs/components/Combobox.cjs.map +1 -1
- package/dist/cjs/components/DatePicker.cjs +1 -1
- package/dist/cjs/components/DatePicker.cjs.map +1 -1
- package/dist/cjs/components/DateRangePicker.cjs +1 -1
- package/dist/cjs/components/DateRangePicker.cjs.map +1 -1
- package/dist/cjs/components/DateTimePicker.cjs +176 -0
- package/dist/cjs/components/DateTimePicker.cjs.map +1 -0
- package/dist/cjs/components/Form.cjs +27 -0
- package/dist/cjs/components/Form.cjs.map +1 -0
- package/dist/cjs/components/Input.cjs +20 -2
- package/dist/cjs/components/Input.cjs.map +1 -1
- package/dist/cjs/components/NumberField.cjs +29 -3
- package/dist/cjs/components/NumberField.cjs.map +1 -1
- package/dist/cjs/components/RadioGroup.cjs +7 -3
- package/dist/cjs/components/RadioGroup.cjs.map +1 -1
- package/dist/cjs/components/Select.cjs +4 -2
- package/dist/cjs/components/Select.cjs.map +1 -1
- package/dist/cjs/components/Textarea.cjs +6 -1
- package/dist/cjs/components/Textarea.cjs.map +1 -1
- package/dist/cjs/components/choice-row.cjs +51 -0
- package/dist/cjs/components/choice-row.cjs.map +1 -0
- package/dist/cjs/components/date-family.cjs +64 -2
- package/dist/cjs/components/date-family.cjs.map +1 -1
- package/dist/cjs/components/date-field.cjs +14 -4
- package/dist/cjs/components/date-field.cjs.map +1 -1
- package/dist/cjs/components/option-groups.cjs +35 -0
- package/dist/cjs/components/option-groups.cjs.map +1 -0
- package/dist/cjs/components/time-panel.cjs +125 -0
- package/dist/cjs/components/time-panel.cjs.map +1 -0
- package/dist/cjs/components/ui.common.cjs +13 -0
- package/dist/cjs/components/ui.common.cjs.map +1 -1
- package/dist/cjs/dev.cjs +1 -0
- package/dist/cjs/dev.cjs.map +1 -1
- package/dist/cjs/index.cjs +6 -0
- package/dist/cjs/index.cjs.map +1 -1
- package/dist/esm/components/CheckboxGroup.js +36 -0
- package/dist/esm/components/CheckboxGroup.js.map +1 -0
- package/dist/esm/components/Combobox.js +191 -17
- package/dist/esm/components/Combobox.js.map +1 -1
- package/dist/esm/components/DatePicker.js +2 -2
- package/dist/esm/components/DatePicker.js.map +1 -1
- package/dist/esm/components/DateRangePicker.js +2 -2
- package/dist/esm/components/DateRangePicker.js.map +1 -1
- package/dist/esm/components/DateTimePicker.js +172 -0
- package/dist/esm/components/DateTimePicker.js.map +1 -0
- package/dist/esm/components/Form.js +22 -0
- package/dist/esm/components/Form.js.map +1 -0
- package/dist/esm/components/Input.js +21 -3
- package/dist/esm/components/Input.js.map +1 -1
- package/dist/esm/components/NumberField.js +30 -4
- package/dist/esm/components/NumberField.js.map +1 -1
- package/dist/esm/components/RadioGroup.js +10 -6
- package/dist/esm/components/RadioGroup.js.map +1 -1
- package/dist/esm/components/Select.js +6 -4
- package/dist/esm/components/Select.js.map +1 -1
- package/dist/esm/components/Textarea.js +6 -1
- package/dist/esm/components/Textarea.js.map +1 -1
- package/dist/esm/components/choice-row.js +46 -0
- package/dist/esm/components/choice-row.js.map +1 -0
- package/dist/esm/components/date-family.js +58 -3
- package/dist/esm/components/date-family.js.map +1 -1
- package/dist/esm/components/date-field.js +14 -5
- package/dist/esm/components/date-field.js.map +1 -1
- package/dist/esm/components/option-groups.js +30 -0
- package/dist/esm/components/option-groups.js.map +1 -0
- package/dist/esm/components/time-panel.js +122 -0
- package/dist/esm/components/time-panel.js.map +1 -0
- package/dist/esm/components/ui.common.js +14 -2
- package/dist/esm/components/ui.common.js.map +1 -1
- package/dist/esm/dev.js +1 -1
- package/dist/esm/index.js +3 -0
- package/dist/esm/index.js.map +1 -1
- package/dist/styles.css +89 -0
- package/dist/types/dev.d.cts +3 -1
- package/dist/types/dev.d.ts +3 -1
- package/dist/types/index.d.cts +257 -20
- package/dist/types/index.d.ts +257 -20
- package/package.json +1 -1
package/dist/types/index.d.ts
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import { Accordion as Accordion$1 } from '@base-ui/react/accordion';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
import React__default, { ReactNode, ButtonHTMLAttributes, ImgHTMLAttributes, HTMLAttributes, ComponentPropsWithoutRef, AnchorHTMLAttributes, ComponentProps, Ref, ReactElement, InputHTMLAttributes, ForwardRefExoticComponent, RefAttributes, MouseEventHandler, ComponentPropsWithRef, TextareaHTMLAttributes } from 'react';
|
|
3
|
+
import React__default, { ReactNode, ButtonHTMLAttributes, ImgHTMLAttributes, HTMLAttributes, ComponentPropsWithoutRef, AnchorHTMLAttributes, ComponentProps, Ref, ClipboardEvent, ReactElement, InputHTMLAttributes, ForwardRefExoticComponent, RefAttributes, MouseEventHandler, ComponentPropsWithRef, TextareaHTMLAttributes } from 'react';
|
|
4
4
|
import { Collapsible as Collapsible$1 } from '@base-ui/react/collapsible';
|
|
5
5
|
import { AlertDialog as AlertDialog$1 } from '@base-ui/react/alert-dialog';
|
|
6
6
|
import { Checkbox as Checkbox$1 } from '@base-ui/react/checkbox';
|
|
7
|
+
import { CheckboxGroup as CheckboxGroup$1 } from '@base-ui/react/checkbox-group';
|
|
7
8
|
import { Toggle } from '@base-ui/react/toggle';
|
|
8
9
|
import { ToggleGroup as ToggleGroup$1 } from '@base-ui/react/toggle-group';
|
|
9
10
|
import { Combobox as Combobox$1 } from '@base-ui/react/combobox';
|
|
@@ -12,6 +13,7 @@ import { Dialog as Dialog$1 } from '@base-ui/react/dialog';
|
|
|
12
13
|
import { Popover as Popover$1 } from '@base-ui/react/popover';
|
|
13
14
|
import { Select as Select$1 } from '@base-ui/react/select';
|
|
14
15
|
import { Field as Field$1 } from '@base-ui/react/field';
|
|
16
|
+
import { Form as Form$1 } from '@base-ui/react/form';
|
|
15
17
|
import { Input as Input$1 } from '@base-ui/react/input';
|
|
16
18
|
import { Menu as Menu$1 } from '@base-ui/react/menu';
|
|
17
19
|
import { NumberField as NumberField$1 } from '@base-ui/react/number-field';
|
|
@@ -236,6 +238,7 @@ interface CalendarLabels {
|
|
|
236
238
|
/** Reported when a date — or a range — cannot be selected or is not acceptable. */
|
|
237
239
|
unavailableRange: string;
|
|
238
240
|
}
|
|
241
|
+
type CalendarDateTime = string;
|
|
239
242
|
|
|
240
243
|
interface CalendarBaseProps extends Omit<ComponentProps<"div">, "children" | "value" | "defaultValue" | "defaultChecked" | "onChange"> {
|
|
241
244
|
/** The month on screen, normalized to its first day. Undefined means the calendar owns it. */
|
|
@@ -323,6 +326,55 @@ interface CheckboxProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "v
|
|
|
323
326
|
*/
|
|
324
327
|
declare const Checkbox: React__default.ForwardRefExoticComponent<CheckboxProps & React__default.RefAttributes<HTMLButtonElement>>;
|
|
325
328
|
|
|
329
|
+
type ChoiceAppearance = "default" | "surface";
|
|
330
|
+
|
|
331
|
+
interface CheckboxGroupOption {
|
|
332
|
+
value: string;
|
|
333
|
+
label: ReactNode;
|
|
334
|
+
/** Supporting copy beneath the label, such as the domains a casino answers on. */
|
|
335
|
+
description?: ReactNode;
|
|
336
|
+
disabled?: boolean;
|
|
337
|
+
}
|
|
338
|
+
type CheckboxGroupChangeDetails = Parameters<NonNullable<CheckboxGroup$1.Props["onValueChange"]>>[1];
|
|
339
|
+
interface CheckboxGroupProps extends Omit<ComponentProps<"div">, "onChange" | "defaultValue" | "children"> {
|
|
340
|
+
options: CheckboxGroupOption[];
|
|
341
|
+
/** Gives each choice its own selectable surface. The default keeps the compact, unfilled rows. */
|
|
342
|
+
appearance?: ChoiceAppearance;
|
|
343
|
+
/** The group's own label. Base names the group from it. */
|
|
344
|
+
label?: ReactNode;
|
|
345
|
+
/** Supporting copy beneath the group. */
|
|
346
|
+
description?: ReactNode;
|
|
347
|
+
/**
|
|
348
|
+
* The message shown while the group is invalid. Its presence is what makes the group invalid; omit
|
|
349
|
+
* it and the group shows what Base reports, including an error a `Form` returns for its `name`.
|
|
350
|
+
*/
|
|
351
|
+
error?: ReactNode;
|
|
352
|
+
/** The ticked options' values. */
|
|
353
|
+
value?: string[];
|
|
354
|
+
defaultValue?: string[];
|
|
355
|
+
/** Base's own change callback, event details included. */
|
|
356
|
+
onValueChange?: (value: string[], eventDetails: CheckboxGroupChangeDetails) => void;
|
|
357
|
+
/** Identifies the group when a form is submitted: one entry per ticked option. */
|
|
358
|
+
name?: string;
|
|
359
|
+
/**
|
|
360
|
+
* At least one option must be ticked. It marks the label and is checked when a `Form` validates;
|
|
361
|
+
* the message is `requiredMessage`.
|
|
362
|
+
*/
|
|
363
|
+
required?: boolean;
|
|
364
|
+
/** The message a required group shows when nothing is ticked. */
|
|
365
|
+
requiredMessage?: string;
|
|
366
|
+
disabled?: boolean;
|
|
367
|
+
readOnly?: boolean;
|
|
368
|
+
/** Styles the labelled group. */
|
|
369
|
+
className?: string;
|
|
370
|
+
}
|
|
371
|
+
/**
|
|
372
|
+
* Any number of choices out of a list — the options-API sibling of `RadioGroup`, with the same rows,
|
|
373
|
+
* the same opt-in `surface` row and the same labelled column. Base UI owns the value, the group
|
|
374
|
+
* semantics and the form participation; Sherick UI owns the rows and the marks.
|
|
375
|
+
*/
|
|
376
|
+
declare const CheckboxGroup: React__default.ForwardRefExoticComponent<Omit<CheckboxGroupProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
|
|
377
|
+
|
|
326
378
|
/** The parts every chip has, whichever of its two forms it takes. */
|
|
327
379
|
interface ChipAnatomy {
|
|
328
380
|
children: ReactNode;
|
|
@@ -401,23 +453,35 @@ interface ChipGroupProps extends Omit<ToggleGroup$1.Props<string>, "multiple" |
|
|
|
401
453
|
*/
|
|
402
454
|
declare const ChipGroup: React__default.ForwardRefExoticComponent<Omit<ChipGroupProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
|
|
403
455
|
|
|
456
|
+
interface OptionGroup<Option> {
|
|
457
|
+
/** The heading the group is filed under. The primitive names the group from it. */
|
|
458
|
+
label: string;
|
|
459
|
+
options: Option[];
|
|
460
|
+
}
|
|
461
|
+
|
|
404
462
|
interface ComboboxOption {
|
|
405
463
|
label: string;
|
|
406
464
|
value: string;
|
|
407
465
|
disabled?: boolean;
|
|
408
466
|
}
|
|
467
|
+
/** Options filed under one heading, such as channels under their category. */
|
|
468
|
+
type ComboboxOptionGroup = OptionGroup<ComboboxOption>;
|
|
409
469
|
type ComboboxRootProps = Combobox$1.Root.Props<ComboboxOption>;
|
|
410
470
|
type ComboboxChangeDetails = Parameters<NonNullable<ComboboxRootProps["onValueChange"]>>[1];
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
471
|
+
/**
|
|
472
|
+
* A change Base did not make: several entries pasted at once into a creatable combobox. It carries
|
|
473
|
+
* the paste event itself, and nothing to cancel — the entries are added in one step.
|
|
474
|
+
*/
|
|
475
|
+
interface ComboboxPasteDetails {
|
|
476
|
+
reason: "input-paste";
|
|
477
|
+
event: ClipboardEvent<HTMLInputElement>["nativeEvent"];
|
|
478
|
+
}
|
|
479
|
+
interface ComboboxCommonProps {
|
|
416
480
|
/**
|
|
417
|
-
* The
|
|
418
|
-
*
|
|
481
|
+
* The options, in the order they read. Any of them may be filed under a heading by passing a group
|
|
482
|
+
* (`{ label, options }`) in its place; an option outside every group is listed where it stands.
|
|
419
483
|
*/
|
|
420
|
-
|
|
484
|
+
options: Array<ComboboxOption | ComboboxOptionGroup>;
|
|
421
485
|
placeholder?: string;
|
|
422
486
|
/** Shown in place of the list when the query matches no option. */
|
|
423
487
|
emptyMessage?: ReactNode;
|
|
@@ -446,12 +510,48 @@ interface ComboboxProps {
|
|
|
446
510
|
readOnly?: boolean;
|
|
447
511
|
disabled?: boolean;
|
|
448
512
|
}
|
|
513
|
+
interface ComboboxSingleProps extends ComboboxCommonProps {
|
|
514
|
+
multiple?: false;
|
|
515
|
+
/** The selected option's value, or `null` for no selection. */
|
|
516
|
+
value?: string | null;
|
|
517
|
+
defaultValue?: string | null;
|
|
518
|
+
/**
|
|
519
|
+
* The selected option's own `value`, so two equal options compare equal even when a caller
|
|
520
|
+
* rebuilds its options array. Base's event details are passed through unchanged.
|
|
521
|
+
*/
|
|
522
|
+
onValueChange?: (value: string | null, eventDetails: ComboboxChangeDetails) => void;
|
|
523
|
+
creatable?: never;
|
|
524
|
+
createLabel?: never;
|
|
525
|
+
chipsLabel?: never;
|
|
526
|
+
}
|
|
527
|
+
interface ComboboxMultipleProps extends ComboboxCommonProps {
|
|
528
|
+
/** Holds any number of options, each shown as a removable chip inside the field. */
|
|
529
|
+
multiple: true;
|
|
530
|
+
/** The selected options' values, in the order they were chosen. */
|
|
531
|
+
value?: string[];
|
|
532
|
+
defaultValue?: string[];
|
|
533
|
+
/**
|
|
534
|
+
* The selected options' own values. Base's event details are passed through unchanged; a
|
|
535
|
+
* multi-line paste into a creatable field reports `{ reason: "input-paste" }` instead.
|
|
536
|
+
*/
|
|
537
|
+
onValueChange?: (value: string[], eventDetails: ComboboxChangeDetails | ComboboxPasteDetails) => void;
|
|
538
|
+
/**
|
|
539
|
+
* Accepts entries that are not among the options: the typed text is offered as an "Add" row, and
|
|
540
|
+
* pasting several lines adds one entry per line. A created entry's value is its own text.
|
|
541
|
+
*/
|
|
542
|
+
creatable?: boolean;
|
|
543
|
+
/** The "Add" row's copy for the current query. */
|
|
544
|
+
createLabel?: (query: string) => ReactNode;
|
|
545
|
+
/** The accessible name of the chip row. */
|
|
546
|
+
chipsLabel?: string;
|
|
547
|
+
}
|
|
548
|
+
type ComboboxProps = ComboboxSingleProps | ComboboxMultipleProps;
|
|
449
549
|
/**
|
|
450
|
-
* A text field that filters a list of options and selects one of them. It is the
|
|
451
|
-
* sibling of `Select`: the same option shape, the same value contract and the same box,
|
|
452
|
-
* input instead of a trigger. Base UI owns filtering, the listbox semantics, keyboard
|
|
453
|
-
* interaction, the anchored popup and the hidden form
|
|
454
|
-
* treatment and the tone of the selected option.
|
|
550
|
+
* A text field that filters a list of options and selects one of them, or several. It is the
|
|
551
|
+
* searchable sibling of `Select`: the same option shape, the same value contract and the same box,
|
|
552
|
+
* with an input instead of a trigger. Base UI owns filtering, the listbox semantics, keyboard
|
|
553
|
+
* interaction, chip navigation and removal, the anchored popup and the hidden form inputs; Sherick UI
|
|
554
|
+
* owns the field, the row treatment, the chips and the tone of the selected option.
|
|
455
555
|
*
|
|
456
556
|
* Filtering is Base's and it is local — an application that needs remote results owns the
|
|
457
557
|
* fetching, the debounce and the loading state around this control.
|
|
@@ -674,6 +774,78 @@ interface DateRangePickerProps {
|
|
|
674
774
|
*/
|
|
675
775
|
declare const DateRangePicker: React__default.ForwardRefExoticComponent<DateRangePickerProps & React__default.RefAttributes<HTMLInputElement>>;
|
|
676
776
|
|
|
777
|
+
interface TimePanelLabels {
|
|
778
|
+
/** Names the panel's group of columns. */
|
|
779
|
+
time: string;
|
|
780
|
+
hour: string;
|
|
781
|
+
minute: string;
|
|
782
|
+
period: string;
|
|
783
|
+
/** Shown in place of the reading until one is chosen. */
|
|
784
|
+
chooseTime: string;
|
|
785
|
+
}
|
|
786
|
+
|
|
787
|
+
interface DateTimePickerLabels extends CalendarLabels, TimePanelLabels {
|
|
788
|
+
/** The action that closes the popup. */
|
|
789
|
+
done: string;
|
|
790
|
+
/** Reported when the entered date and time cannot be accepted. */
|
|
791
|
+
unavailableDateTime: string;
|
|
792
|
+
}
|
|
793
|
+
interface DateTimePickerProps {
|
|
794
|
+
/** The selected date and time, `YYYY-MM-DDTHH:mm`, or `null` for none. Undefined makes the picker
|
|
795
|
+
* uncontrolled. */
|
|
796
|
+
value?: CalendarDateTime | null;
|
|
797
|
+
defaultValue?: CalendarDateTime | null;
|
|
798
|
+
/** Receives the next date and time, or `null` when the field is cleared. */
|
|
799
|
+
onValueChange?: (value: CalendarDateTime | null) => void;
|
|
800
|
+
/** The field's label. It names the native field, its control and the popup. */
|
|
801
|
+
label: string;
|
|
802
|
+
description?: ReactNode;
|
|
803
|
+
error?: ReactNode;
|
|
804
|
+
required?: boolean;
|
|
805
|
+
disabled?: boolean;
|
|
806
|
+
/** Styles the field's own column. */
|
|
807
|
+
className?: string;
|
|
808
|
+
id?: string;
|
|
809
|
+
/** The form that owns the field, when it renders outside it. */
|
|
810
|
+
form?: string;
|
|
811
|
+
/** Identifies the field when it is submitted. */
|
|
812
|
+
name?: string;
|
|
813
|
+
open?: boolean;
|
|
814
|
+
defaultOpen?: boolean;
|
|
815
|
+
/** Base's own open-change callback, event details included. */
|
|
816
|
+
onOpenChange?: Popover$1.Root.Props["onOpenChange"];
|
|
817
|
+
/** The earliest acceptable date and time, inclusive. */
|
|
818
|
+
min?: CalendarDateTime;
|
|
819
|
+
/** The latest acceptable date and time, inclusive. */
|
|
820
|
+
max?: CalendarDateTime;
|
|
821
|
+
/** Whether a date cannot be chosen at any time. Unavailable dates stay visible and are never selected. */
|
|
822
|
+
isDateUnavailable?: (date: CalendarDate) => boolean;
|
|
823
|
+
/** The interval, in minutes, between the minutes the popup offers. Typed entry stays
|
|
824
|
+
* minute-precise. Defaults to 5. */
|
|
825
|
+
minuteStep?: number;
|
|
826
|
+
/** Shows a twelve-hour clock with a day period, or a twenty-four-hour clock. Defaults to the
|
|
827
|
+
* locale's own. */
|
|
828
|
+
hourCycle?: 12 | 24;
|
|
829
|
+
locale?: string;
|
|
830
|
+
weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
|
|
831
|
+
today?: CalendarDate;
|
|
832
|
+
labels?: Partial<DateTimePickerLabels>;
|
|
833
|
+
}
|
|
834
|
+
/**
|
|
835
|
+
* A date and a time of day: a native `datetime-local` input, with a named control beside it that
|
|
836
|
+
* opens the shared `Calendar` and a column for each part of the clock in a popover.
|
|
837
|
+
*
|
|
838
|
+
* The native input stays the field's control, so the browser owns its entry, its mobile UI, its
|
|
839
|
+
* form submission and the `required` and `min`/`max` constraints; `isDateUnavailable` is reported
|
|
840
|
+
* through the field's own validation, and a value the popup would refuse is never accepted — the
|
|
841
|
+
* input keeps what was typed and the field says why. In the popup, a half-chosen value waits for
|
|
842
|
+
* its other half, a choice that crosses a bound settles on the bound, and Done closes the surface.
|
|
843
|
+
*
|
|
844
|
+
* Values are civil `YYYY-MM-DDTHH:mm` readings with no time zone, exactly as the native input
|
|
845
|
+
* submits them.
|
|
846
|
+
*/
|
|
847
|
+
declare const DateTimePicker: React__default.ForwardRefExoticComponent<DateTimePickerProps & React__default.RefAttributes<HTMLInputElement>>;
|
|
848
|
+
|
|
677
849
|
declare const edgeTone: {
|
|
678
850
|
readonly row: "border-sherick-edge/[0.06]";
|
|
679
851
|
readonly header: "border-sherick-edge/[0.10]";
|
|
@@ -699,10 +871,16 @@ interface SelectOption {
|
|
|
699
871
|
value: string;
|
|
700
872
|
disabled?: boolean;
|
|
701
873
|
}
|
|
874
|
+
/** Options filed under one heading, such as channels under their category. */
|
|
875
|
+
type SelectOptionGroup = OptionGroup<SelectOption>;
|
|
702
876
|
type SelectRootProps = Select$1.Root.Props<string>;
|
|
703
877
|
type SelectChangeDetails = Parameters<NonNullable<SelectRootProps["onValueChange"]>>[1];
|
|
704
878
|
interface SelectProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "value" | "defaultValue"> {
|
|
705
|
-
|
|
879
|
+
/**
|
|
880
|
+
* The options, in the order they read. Any of them may be filed under a heading by passing a group
|
|
881
|
+
* (`{ label, options }`) in its place; an option outside every group is listed where it stands.
|
|
882
|
+
*/
|
|
883
|
+
options: Array<SelectOption | SelectOptionGroup>;
|
|
706
884
|
variant?: Variant;
|
|
707
885
|
value?: string | null;
|
|
708
886
|
defaultValue?: string | null;
|
|
@@ -809,6 +987,32 @@ interface FileUploadProps extends Omit<HTMLAttributes<HTMLDivElement>, "children
|
|
|
809
987
|
}
|
|
810
988
|
declare const FileUpload: React__default.ForwardRefExoticComponent<FileUploadProps & React__default.RefAttributes<HTMLInputElement>>;
|
|
811
989
|
|
|
990
|
+
/** Messages keyed by each field's `name`: one message, or several. */
|
|
991
|
+
type FormErrors = Record<string, string | string[]>;
|
|
992
|
+
interface FormProps extends Omit<ComponentProps<typeof Form$1>, "className" | "render" | "errors" | "children" | "ref"> {
|
|
993
|
+
/**
|
|
994
|
+
* Errors returned from outside the form — typically a server's answer to a submission — keyed by
|
|
995
|
+
* each field's `name`. Each field shows its own message, the form moves focus to the first field
|
|
996
|
+
* that has one, and a field's entry clears as soon as its value changes.
|
|
997
|
+
*/
|
|
998
|
+
errors?: FormErrors;
|
|
999
|
+
/** Styles the form's own column. The fields inside it style themselves. */
|
|
1000
|
+
className?: string;
|
|
1001
|
+
children?: ReactNode;
|
|
1002
|
+
}
|
|
1003
|
+
/**
|
|
1004
|
+
* A form whose fields report what is wrong where it is wrong. On submit, Base UI validates every
|
|
1005
|
+
* field it holds, keeps the submission from leaving while any is invalid and moves focus to the
|
|
1006
|
+
* first invalid field in document order, so a submit button at the bottom of a long form never
|
|
1007
|
+
* answers with nothing. The same happens when `errors` arrive after a submission.
|
|
1008
|
+
*
|
|
1009
|
+
* Every Sherick field takes part through its `name`: `Input`, `Textarea`, `RadioGroup` and
|
|
1010
|
+
* `CheckboxGroup` carry their own; `Select`, `Combobox`, `NumberField`, `Checkbox`, `Switch` and
|
|
1011
|
+
* `Slider` take part inside a `Field` given the `name`. Base UI owns validation, the errors map and
|
|
1012
|
+
* the focus move; Sherick UI owns only the column the fields stand in.
|
|
1013
|
+
*/
|
|
1014
|
+
declare const Form: React__default.ForwardRefExoticComponent<FormProps & React__default.RefAttributes<HTMLFormElement>>;
|
|
1015
|
+
|
|
812
1016
|
type IconButtonAppearance = "tonal" | "ghost" | "acrylic";
|
|
813
1017
|
interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
814
1018
|
variant?: Variant;
|
|
@@ -818,7 +1022,7 @@ interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
|
818
1022
|
}
|
|
819
1023
|
declare const IconButton: React__default.ForwardRefExoticComponent<IconButtonProps & React__default.RefAttributes<HTMLButtonElement>>;
|
|
820
1024
|
|
|
821
|
-
interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
|
|
1025
|
+
interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "prefix"> {
|
|
822
1026
|
label?: ReactNode;
|
|
823
1027
|
description?: ReactNode;
|
|
824
1028
|
error?: boolean;
|
|
@@ -826,6 +1030,13 @@ interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
|
|
|
826
1030
|
inputClassName?: string;
|
|
827
1031
|
/** Base's value-change callback, event details included. */
|
|
828
1032
|
onValueChange?: Input$1.Props["onValueChange"];
|
|
1033
|
+
/**
|
|
1034
|
+
* Text or a mark at the start of the field, such as `€` or `https://`. It is presentation only and
|
|
1035
|
+
* hidden from assistive technology, so the label must carry whatever the reader needs from it.
|
|
1036
|
+
*/
|
|
1037
|
+
prefix?: ReactNode;
|
|
1038
|
+
/** Text or a mark at the end of the field, such as `tickets` or `.discord.gg`. Presentation only. */
|
|
1039
|
+
suffix?: ReactNode;
|
|
829
1040
|
}
|
|
830
1041
|
declare const Input: React__default.ForwardRefExoticComponent<InputProps & React__default.RefAttributes<HTMLInputElement>>;
|
|
831
1042
|
|
|
@@ -1011,7 +1222,7 @@ interface NavItemProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
|
|
|
1011
1222
|
}
|
|
1012
1223
|
declare const NavItem: ({ children, icon, className, href, active, ...props }: NavItemProps) => React__default.JSX.Element;
|
|
1013
1224
|
|
|
1014
|
-
interface NumberFieldProps extends Omit<ComponentProps<"input">, "value" | "defaultValue" | "onChange" | "min" | "max" | "step" | "type" | "size" | "ref"> {
|
|
1225
|
+
interface NumberFieldProps extends Omit<ComponentProps<"input">, "value" | "defaultValue" | "onChange" | "min" | "max" | "step" | "type" | "size" | "ref" | "prefix"> {
|
|
1015
1226
|
value?: number | null;
|
|
1016
1227
|
defaultValue?: number;
|
|
1017
1228
|
onValueChange?: NumberField$1.Root.Props["onValueChange"];
|
|
@@ -1020,6 +1231,23 @@ interface NumberFieldProps extends Omit<ComponentProps<"input">, "value" | "defa
|
|
|
1020
1231
|
min?: number;
|
|
1021
1232
|
max?: number;
|
|
1022
1233
|
step?: number;
|
|
1234
|
+
/**
|
|
1235
|
+
* How the value is written: Base's `Intl.NumberFormatOptions`, passed through unchanged —
|
|
1236
|
+
* `{ style: "currency", currency: "EUR" }`, `{ minimumFractionDigits: 2 }`, `{ style: "percent" }`.
|
|
1237
|
+
*/
|
|
1238
|
+
format?: NumberField$1.Root.Props["format"];
|
|
1239
|
+
/** The locale the value is parsed and written in. Defaults to the runtime's own. */
|
|
1240
|
+
locale?: NumberField$1.Root.Props["locale"];
|
|
1241
|
+
/**
|
|
1242
|
+
* A unit written before the value, such as `€`. It is presentation only and hidden from assistive
|
|
1243
|
+
* technology, so the field's label must name the unit as well ("Price (€)").
|
|
1244
|
+
*/
|
|
1245
|
+
prefix?: ReactNode;
|
|
1246
|
+
/**
|
|
1247
|
+
* A unit written after the value, such as `×` or `tickets`. Presentation only, like `prefix`:
|
|
1248
|
+
* name the unit in the label as well.
|
|
1249
|
+
*/
|
|
1250
|
+
suffix?: ReactNode;
|
|
1023
1251
|
disabled?: boolean;
|
|
1024
1252
|
readOnly?: boolean;
|
|
1025
1253
|
required?: boolean;
|
|
@@ -1136,15 +1364,24 @@ declare const Progress: React__default.ForwardRefExoticComponent<Omit<ProgressPr
|
|
|
1136
1364
|
interface RadioGroupOption {
|
|
1137
1365
|
value: string;
|
|
1138
1366
|
label: ReactNode;
|
|
1367
|
+
/** Supporting copy beneath the label. It describes the choice rather than naming it. */
|
|
1368
|
+
description?: ReactNode;
|
|
1139
1369
|
disabled?: boolean;
|
|
1140
1370
|
}
|
|
1141
1371
|
interface RadioGroupProps extends Omit<ComponentProps<"div">, "onChange" | "defaultValue" | "children"> {
|
|
1142
1372
|
options: RadioGroupOption[];
|
|
1143
1373
|
/** Gives each choice its own selectable surface. The default keeps the compact, unfilled rows. */
|
|
1144
|
-
appearance?:
|
|
1374
|
+
appearance?: ChoiceAppearance;
|
|
1145
1375
|
/** The group's own label. Naming the group is the group's job, not a field's: an
|
|
1146
1376
|
* enclosing `Field` names one control, while every option here is its own control. */
|
|
1147
1377
|
label?: ReactNode;
|
|
1378
|
+
/** Supporting copy beneath the group. */
|
|
1379
|
+
description?: ReactNode;
|
|
1380
|
+
/**
|
|
1381
|
+
* The message shown while the group is invalid. Its presence is what makes the group invalid; omit
|
|
1382
|
+
* it and the group shows what Base reports, including an error a `Form` returns for its `name`.
|
|
1383
|
+
*/
|
|
1384
|
+
error?: ReactNode;
|
|
1148
1385
|
value?: string;
|
|
1149
1386
|
defaultValue?: string;
|
|
1150
1387
|
onValueChange?: RadioGroup$1.Props<string>["onValueChange"];
|
|
@@ -1653,5 +1890,5 @@ interface DirectionProviderProps {
|
|
|
1653
1890
|
/** Declares writing direction to the interaction and positioning primitives, including portals. */
|
|
1654
1891
|
declare const DirectionProvider: ({ direction, children }: DirectionProviderProps) => React__default.JSX.Element;
|
|
1655
1892
|
|
|
1656
|
-
export { Accordion, Alert, AlertDialog, Avatar, Badge, Breadcrumb, Button, Calendar, Card, Checkbox, Chip, ChipGroup, Collapsible, Combobox, Command, CommandPalette, DatePicker, DateRangePicker, Dialog, DirectionProvider, Divider, Drawer, Field, FileUpload, IconButton, Input, Media, Menu, NavGroup, NavItem, NumberField, Pagination, Popover, Progress, RadioGroup, Search, SegmentedControl, Select, Skeleton, Slider, Spinner, Stepper, Switch, Table, Tabs, Textarea, ToastProvider, ToastViewport, ToggleGroup, Tooltip, TreeView, createToastManager, useToast };
|
|
1657
|
-
export type { AccordionHeadingLevel, AccordionItemProps, AccordionPanelProps, AccordionProps, AccordionTriggerProps, AlertDialogProps, AlertProps, AvatarProps, BadgeProps, BreadcrumbItem, BreadcrumbProps, ButtonAppearance, ButtonProps, ButtonSize, CalendarDate, CalendarLabels, CalendarProps, CardProps, CheckboxProps, ChipGroupProps, ChipProps, CollapsiblePanelProps, CollapsibleProps, CollapsibleTriggerProps, ComboboxOption, ComboboxProps, CommandItem, CommandPaletteProps, CommandProps, DatePickerProps, DateRange, DateRangePickerProps, DialogContentProps, DialogDescriptionProps, DialogFooterProps, DialogHeaderProps, DialogProps, DirectionProviderProps, DividerProps, DividerWeight, DrawerContentProps, DrawerDescriptionProps, DrawerFooterProps, DrawerHeaderProps, DrawerProps, DrawerSide, DrawerTriggerProps, FieldProps, FileRejection, FileUploadProps, IconButtonAppearance, IconButtonProps, InputProps, MediaImageProps, MediaVideoProps, MenuContentProps, MenuItemProps, MenuProps, MenuSeparatorProps, MenuTriggerProps, NavGroupHeadingLevel, NavGroupItem, NavGroupProps, NavItemProps, NumberFieldProps, OverlayAlign, OverlaySide, PaginationProps, PopoverContentProps, PopoverProps, PopoverTriggerProps, ProgressProps, RadioGroupOption, RadioGroupProps, SearchProps, SegmentedControlOption, SegmentedControlProps, SelectOption, SelectProps, SkeletonProps, SliderProps, SpinnerProps, StepperItem, StepperProps, SwitchProps, Tab, TableColumn, TableProps, TabsProps, TextareaProps, ToastActionOptions, ToastManager, ToastOptions, ToastPosition, ToastPromiseOptions, ToastProviderProps, ToastType, ToastUpdateOptions, ToastViewportProps, ToggleGroupItemProps, ToggleGroupProps, TooltipProps, TreeViewItem, TreeViewProps, Variant };
|
|
1893
|
+
export { Accordion, Alert, AlertDialog, Avatar, Badge, Breadcrumb, Button, Calendar, Card, Checkbox, CheckboxGroup, Chip, ChipGroup, Collapsible, Combobox, Command, CommandPalette, DatePicker, DateRangePicker, DateTimePicker, Dialog, DirectionProvider, Divider, Drawer, Field, FileUpload, Form, IconButton, Input, Media, Menu, NavGroup, NavItem, NumberField, Pagination, Popover, Progress, RadioGroup, Search, SegmentedControl, Select, Skeleton, Slider, Spinner, Stepper, Switch, Table, Tabs, Textarea, ToastProvider, ToastViewport, ToggleGroup, Tooltip, TreeView, createToastManager, useToast };
|
|
1894
|
+
export type { AccordionHeadingLevel, AccordionItemProps, AccordionPanelProps, AccordionProps, AccordionTriggerProps, AlertDialogProps, AlertProps, AvatarProps, BadgeProps, BreadcrumbItem, BreadcrumbProps, ButtonAppearance, ButtonProps, ButtonSize, CalendarDate, CalendarDateTime, CalendarLabels, CalendarProps, CardProps, CheckboxGroupOption, CheckboxGroupProps, CheckboxProps, ChipGroupProps, ChipProps, CollapsiblePanelProps, CollapsibleProps, CollapsibleTriggerProps, ComboboxMultipleProps, ComboboxOption, ComboboxOptionGroup, ComboboxPasteDetails, ComboboxProps, ComboboxSingleProps, CommandItem, CommandPaletteProps, CommandProps, DatePickerProps, DateRange, DateRangePickerProps, DateTimePickerLabels, DateTimePickerProps, DialogContentProps, DialogDescriptionProps, DialogFooterProps, DialogHeaderProps, DialogProps, DirectionProviderProps, DividerProps, DividerWeight, DrawerContentProps, DrawerDescriptionProps, DrawerFooterProps, DrawerHeaderProps, DrawerProps, DrawerSide, DrawerTriggerProps, FieldProps, FileRejection, FileUploadProps, FormErrors, FormProps, IconButtonAppearance, IconButtonProps, InputProps, MediaImageProps, MediaVideoProps, MenuContentProps, MenuItemProps, MenuProps, MenuSeparatorProps, MenuTriggerProps, NavGroupHeadingLevel, NavGroupItem, NavGroupProps, NavItemProps, NumberFieldProps, OverlayAlign, OverlaySide, PaginationProps, PopoverContentProps, PopoverProps, PopoverTriggerProps, ProgressProps, RadioGroupOption, RadioGroupProps, SearchProps, SegmentedControlOption, SegmentedControlProps, SelectOption, SelectOptionGroup, SelectProps, SkeletonProps, SliderProps, SpinnerProps, StepperItem, StepperProps, SwitchProps, Tab, TableColumn, TableProps, TabsProps, TextareaProps, ToastActionOptions, ToastManager, ToastOptions, ToastPosition, ToastPromiseOptions, ToastProviderProps, ToastType, ToastUpdateOptions, ToastViewportProps, ToggleGroupItemProps, ToggleGroupProps, TooltipProps, TreeViewItem, TreeViewProps, Variant };
|