@compa11y/react 0.1.0 → 0.1.3
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 +487 -5
- package/dist/chunk-36S2JYVF.cjs +1 -0
- package/dist/chunk-AJ7JSWUT.cjs +1 -0
- package/dist/chunk-DDFEION3.cjs +1 -0
- package/dist/chunk-DWU3PTJO.cjs +1 -0
- package/dist/chunk-FD4F6ONU.cjs +1 -0
- package/dist/chunk-FOVHQAY5.cjs +1 -0
- package/dist/chunk-GITBIGD4.js +1 -0
- package/dist/chunk-HEA4NAOM.js +1 -0
- package/dist/chunk-IZ7LLPPV.js +1 -0
- package/dist/chunk-JS3UD7KS.cjs +1 -0
- package/dist/chunk-MAR6RBHF.cjs +1 -0
- package/dist/chunk-MD4AVTLT.js +1 -0
- package/dist/chunk-SB6ASQ36.js +1 -0
- package/dist/chunk-VMM4K2K4.js +1 -0
- package/dist/chunk-XEJXACWE.js +1 -0
- package/dist/chunk-ZB3SYGHE.js +1 -0
- package/dist/components/combobox/index.cjs +1 -31
- package/dist/components/combobox/index.js +1 -6
- package/dist/components/dialog/index.cjs +1 -46
- package/dist/components/dialog/index.js +1 -5
- package/dist/components/menu/index.cjs +1 -46
- package/dist/components/menu/index.js +1 -5
- package/dist/components/tabs/index.cjs +1 -35
- package/dist/components/tabs/index.js +1 -6
- package/dist/components/toast/index.cjs +1 -24
- package/dist/components/toast/index.js +1 -3
- package/dist/index.cjs +1 -702
- package/dist/index.d.cts +760 -3
- package/dist/index.d.ts +760 -3
- package/dist/index.js +1 -430
- package/package.json +44 -3
- package/dist/chunk-2S4C6FGA.js +0 -380
- package/dist/chunk-2S4C6FGA.js.map +0 -1
- package/dist/chunk-52J4Z3QD.cjs +0 -45
- package/dist/chunk-52J4Z3QD.cjs.map +0 -1
- package/dist/chunk-C7QK2I7H.js +0 -373
- package/dist/chunk-C7QK2I7H.js.map +0 -1
- package/dist/chunk-D2UMS62N.cjs +0 -245
- package/dist/chunk-D2UMS62N.cjs.map +0 -1
- package/dist/chunk-E265U2RK.js +0 -234
- package/dist/chunk-E265U2RK.js.map +0 -1
- package/dist/chunk-E4XJRXWM.js +0 -215
- package/dist/chunk-E4XJRXWM.js.map +0 -1
- package/dist/chunk-GDLOJH6K.cjs +0 -110
- package/dist/chunk-GDLOJH6K.cjs.map +0 -1
- package/dist/chunk-IR46CNNY.cjs +0 -329
- package/dist/chunk-IR46CNNY.cjs.map +0 -1
- package/dist/chunk-JXYOE7SH.js +0 -103
- package/dist/chunk-JXYOE7SH.js.map +0 -1
- package/dist/chunk-O3YYQZ5O.js +0 -317
- package/dist/chunk-O3YYQZ5O.js.map +0 -1
- package/dist/chunk-OIVTOU4Z.cjs +0 -386
- package/dist/chunk-OIVTOU4Z.cjs.map +0 -1
- package/dist/chunk-OND5B7UG.js +0 -85
- package/dist/chunk-OND5B7UG.js.map +0 -1
- package/dist/chunk-R4FR6M6I.cjs +0 -383
- package/dist/chunk-R4FR6M6I.cjs.map +0 -1
- package/dist/chunk-RBDQCIS7.cjs +0 -89
- package/dist/chunk-RBDQCIS7.cjs.map +0 -1
- package/dist/chunk-SOBS7MIH.cjs +0 -220
- package/dist/chunk-SOBS7MIH.cjs.map +0 -1
- package/dist/chunk-WURPAE3R.js +0 -41
- package/dist/chunk-WURPAE3R.js.map +0 -1
- package/dist/components/combobox/index.cjs.map +0 -1
- package/dist/components/combobox/index.js.map +0 -1
- package/dist/components/dialog/index.cjs.map +0 -1
- package/dist/components/dialog/index.js.map +0 -1
- package/dist/components/menu/index.cjs.map +0 -1
- package/dist/components/menu/index.js.map +0 -1
- package/dist/components/tabs/index.cjs.map +0 -1
- package/dist/components/tabs/index.js.map +0 -1
- package/dist/components/toast/index.cjs.map +0 -1
- package/dist/components/toast/index.js.map +0 -1
- package/dist/index.cjs.map +0 -1
- package/dist/index.js.map +0 -1
package/dist/index.d.cts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React$1 from 'react';
|
|
2
|
-
import React__default from 'react';
|
|
2
|
+
import React__default, { ReactNode, InputHTMLAttributes, ButtonHTMLAttributes, TextareaHTMLAttributes } from 'react';
|
|
3
3
|
import { FocusTrapOptions, AnnouncerOptions, KeyboardHandlers } from '@compa11y/core';
|
|
4
4
|
export { announce, announceAssertive, announceError, announcePolite, announceProgress, announceStatus, aria, buildAriaProps, checks, createComponentWarnings, hasAccessibleName, isAndroid, isBrowser, isIOS, isMac, mergeAriaIds, prefersDarkMode, prefersHighContrast, prefersReducedMotion, setWarningHandler, warn } from '@compa11y/core';
|
|
5
5
|
export { DialogCompound as Dialog, DialogActions, DialogActionsProps, Dialog as DialogBase, DialogClose, DialogCloseProps, DialogContent, DialogContentProps, DialogContextValue, DialogDescription, DialogDescriptionProps, DialogProps, DialogTitle, DialogTitleProps, DialogTrigger, DialogTriggerProps, useDialogContext } from './components/dialog/index.cjs';
|
|
@@ -7,7 +7,7 @@ export { ActionMenuCompound as ActionMenu, ActionMenu as ActionMenuBase, ActionM
|
|
|
7
7
|
export { Tab, TabList, TabListProps, TabPanel, TabPanelProps, TabProps, TabsCompound as Tabs, Tabs as TabsBase, TabsContextValue, TabsProps, useTabsContext } from './components/tabs/index.cjs';
|
|
8
8
|
export { Toast, ToastProvider, ToastProviderProps, ToastType, ToastViewport, ToastViewportProps, useToast, useToastHelpers } from './components/toast/index.cjs';
|
|
9
9
|
export { ComboboxCompound as Combobox, Combobox as ComboboxBase, ComboboxInput, ComboboxInputProps, ComboboxListbox, ComboboxListboxProps, ComboboxOption, ComboboxOptionProps, ComboboxOption as ComboboxOptionType, ComboboxProps } from './components/combobox/index.cjs';
|
|
10
|
-
import 'react/jsx-runtime';
|
|
10
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
11
11
|
|
|
12
12
|
/**
|
|
13
13
|
* Generate a unique ID for accessibility purposes
|
|
@@ -358,6 +358,385 @@ declare function useRovingTabindexMap<T extends string>(ids: T[], options?: Omit
|
|
|
358
358
|
previous: () => void;
|
|
359
359
|
};
|
|
360
360
|
|
|
361
|
+
interface SelectOption {
|
|
362
|
+
value: string;
|
|
363
|
+
label: string;
|
|
364
|
+
disabled?: boolean;
|
|
365
|
+
}
|
|
366
|
+
/**
|
|
367
|
+
* Accessible Select component
|
|
368
|
+
*
|
|
369
|
+
* A dropdown selection component following WAI-ARIA Listbox pattern.
|
|
370
|
+
* Unlike Combobox, Select uses a button trigger and does not support text filtering.
|
|
371
|
+
*
|
|
372
|
+
* @example
|
|
373
|
+
* ```tsx
|
|
374
|
+
* <Select
|
|
375
|
+
* options={[
|
|
376
|
+
* { value: 'apple', label: 'Apple' },
|
|
377
|
+
* { value: 'banana', label: 'Banana' },
|
|
378
|
+
* ]}
|
|
379
|
+
* value={value}
|
|
380
|
+
* onValueChange={setValue}
|
|
381
|
+
* aria-label="Choose a fruit"
|
|
382
|
+
* >
|
|
383
|
+
* <Select.Trigger placeholder="Pick a fruit..." />
|
|
384
|
+
* <Select.Listbox />
|
|
385
|
+
* </Select>
|
|
386
|
+
* ```
|
|
387
|
+
*/
|
|
388
|
+
interface SelectProps {
|
|
389
|
+
/** List of options */
|
|
390
|
+
options: SelectOption[];
|
|
391
|
+
/** Controlled selected value */
|
|
392
|
+
value?: string | null;
|
|
393
|
+
/** Default value for uncontrolled mode */
|
|
394
|
+
defaultValue?: string;
|
|
395
|
+
/** Called when selection changes */
|
|
396
|
+
onValueChange?: (value: string | null) => void;
|
|
397
|
+
/** Whether the select is disabled */
|
|
398
|
+
disabled?: boolean;
|
|
399
|
+
/** Placeholder text when no value is selected */
|
|
400
|
+
placeholder?: string;
|
|
401
|
+
/** Accessible label */
|
|
402
|
+
'aria-label'?: string;
|
|
403
|
+
/** ID of labelling element */
|
|
404
|
+
'aria-labelledby'?: string;
|
|
405
|
+
children: React__default.ReactNode;
|
|
406
|
+
}
|
|
407
|
+
declare function Select({ options, value: controlledValue, defaultValue, onValueChange, disabled, placeholder, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, children, }: SelectProps): react_jsx_runtime.JSX.Element;
|
|
408
|
+
interface SelectTriggerProps extends Omit<React__default.ButtonHTMLAttributes<HTMLButtonElement>, 'value'> {
|
|
409
|
+
}
|
|
410
|
+
declare const SelectTrigger: React__default.ForwardRefExoticComponent<SelectTriggerProps & React__default.RefAttributes<HTMLButtonElement>>;
|
|
411
|
+
interface SelectListboxProps extends React__default.HTMLAttributes<HTMLUListElement> {
|
|
412
|
+
children?: React__default.ReactNode;
|
|
413
|
+
}
|
|
414
|
+
declare const SelectListbox: React__default.ForwardRefExoticComponent<SelectListboxProps & React__default.RefAttributes<HTMLUListElement>>;
|
|
415
|
+
interface SelectOptionProps extends React__default.LiHTMLAttributes<HTMLLIElement> {
|
|
416
|
+
option: SelectOption;
|
|
417
|
+
index: number;
|
|
418
|
+
}
|
|
419
|
+
declare const SelectOptionItem: React__default.ForwardRefExoticComponent<SelectOptionProps & React__default.RefAttributes<HTMLLIElement>>;
|
|
420
|
+
declare const SelectCompound: typeof Select & {
|
|
421
|
+
Trigger: React__default.ForwardRefExoticComponent<SelectTriggerProps & React__default.RefAttributes<HTMLButtonElement>>;
|
|
422
|
+
Listbox: React__default.ForwardRefExoticComponent<SelectListboxProps & React__default.RefAttributes<HTMLUListElement>>;
|
|
423
|
+
Option: React__default.ForwardRefExoticComponent<SelectOptionProps & React__default.RefAttributes<HTMLLIElement>>;
|
|
424
|
+
};
|
|
425
|
+
|
|
426
|
+
/**
|
|
427
|
+
* Checkbox Component
|
|
428
|
+
*
|
|
429
|
+
* Accessible checkbox and checkbox group components following WAI-ARIA patterns.
|
|
430
|
+
* Supports single checkboxes, checkbox groups with fieldset/legend, indeterminate
|
|
431
|
+
* (tri-state) for "select all" patterns, and full keyboard/screen reader support.
|
|
432
|
+
*
|
|
433
|
+
* @example
|
|
434
|
+
* ```tsx
|
|
435
|
+
* // Single checkbox
|
|
436
|
+
* <Checkbox label="Accept terms" checked={agreed} onCheckedChange={setAgreed} />
|
|
437
|
+
*
|
|
438
|
+
* // With hint text
|
|
439
|
+
* <Checkbox label="Subscribe" hint="We'll email you weekly." />
|
|
440
|
+
*
|
|
441
|
+
* // Indeterminate (select all)
|
|
442
|
+
* <Checkbox label="Select all" indeterminate={someChecked} checked={allChecked}
|
|
443
|
+
* onCheckedChange={handleSelectAll} />
|
|
444
|
+
*
|
|
445
|
+
* // Checkbox group
|
|
446
|
+
* <Checkbox.Group legend="Select toppings" value={toppings} onValueChange={setToppings}>
|
|
447
|
+
* <Checkbox value="cheese" label="Cheese" />
|
|
448
|
+
* <Checkbox value="peppers" label="Peppers" />
|
|
449
|
+
* <Checkbox value="olives" label="Olives" />
|
|
450
|
+
* </Checkbox.Group>
|
|
451
|
+
* ```
|
|
452
|
+
*/
|
|
453
|
+
|
|
454
|
+
interface CheckboxGroupContextValue {
|
|
455
|
+
/** Group name for form submission */
|
|
456
|
+
name: string;
|
|
457
|
+
/** Currently selected values */
|
|
458
|
+
value: string[];
|
|
459
|
+
/** Whether all checkboxes in the group are disabled */
|
|
460
|
+
disabled: boolean;
|
|
461
|
+
/** Whether to remove default styles */
|
|
462
|
+
unstyled: boolean;
|
|
463
|
+
/** Called when a checkbox in the group changes */
|
|
464
|
+
onCheckboxChange: (checkboxValue: string, checked: boolean) => void;
|
|
465
|
+
}
|
|
466
|
+
interface CheckboxGroupProps {
|
|
467
|
+
/** Controlled selected values */
|
|
468
|
+
value?: string[];
|
|
469
|
+
/** Default selected values (uncontrolled) */
|
|
470
|
+
defaultValue?: string[];
|
|
471
|
+
/** Called when selected values change */
|
|
472
|
+
onValueChange?: (value: string[]) => void;
|
|
473
|
+
/** Whether all checkboxes are disabled */
|
|
474
|
+
disabled?: boolean;
|
|
475
|
+
/** Group label displayed as fieldset legend */
|
|
476
|
+
legend?: React__default.ReactNode;
|
|
477
|
+
/** Group-level error message */
|
|
478
|
+
error?: React__default.ReactNode;
|
|
479
|
+
/** Layout orientation */
|
|
480
|
+
orientation?: 'horizontal' | 'vertical';
|
|
481
|
+
/** Group name for native inputs */
|
|
482
|
+
name?: string;
|
|
483
|
+
/** Remove default styles */
|
|
484
|
+
unstyled?: boolean;
|
|
485
|
+
/** Custom class name */
|
|
486
|
+
className?: string;
|
|
487
|
+
/** Children (Checkbox components) */
|
|
488
|
+
children: React__default.ReactNode;
|
|
489
|
+
/** Accessible label (if no visible legend) */
|
|
490
|
+
'aria-label'?: string;
|
|
491
|
+
/** Reference to external label element */
|
|
492
|
+
'aria-labelledby'?: string;
|
|
493
|
+
}
|
|
494
|
+
interface CheckboxProps extends Omit<React__default.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'type' | 'checked' | 'defaultChecked' | 'size'> {
|
|
495
|
+
/** Controlled checked state */
|
|
496
|
+
checked?: boolean;
|
|
497
|
+
/** Default checked state (uncontrolled) */
|
|
498
|
+
defaultChecked?: boolean;
|
|
499
|
+
/** Called when checked state changes */
|
|
500
|
+
onCheckedChange?: (checked: boolean) => void;
|
|
501
|
+
/** Whether the checkbox is in indeterminate/mixed state */
|
|
502
|
+
indeterminate?: boolean;
|
|
503
|
+
/** Visible label text */
|
|
504
|
+
label?: React__default.ReactNode;
|
|
505
|
+
/** Helper/description text */
|
|
506
|
+
hint?: React__default.ReactNode;
|
|
507
|
+
/** Error message */
|
|
508
|
+
error?: React__default.ReactNode;
|
|
509
|
+
/** Whether the checkbox is disabled */
|
|
510
|
+
disabled?: boolean;
|
|
511
|
+
/** Value for use in checkbox groups */
|
|
512
|
+
value?: string;
|
|
513
|
+
/** Whether the checkbox is required */
|
|
514
|
+
required?: boolean;
|
|
515
|
+
/** Remove default styles */
|
|
516
|
+
unstyled?: boolean;
|
|
517
|
+
/** Custom class name */
|
|
518
|
+
className?: string;
|
|
519
|
+
/** Size variant */
|
|
520
|
+
size?: 'sm' | 'md' | 'lg';
|
|
521
|
+
}
|
|
522
|
+
interface CheckboxIndicatorProps {
|
|
523
|
+
/** Custom indicator content (replaces default checkmark/dash) */
|
|
524
|
+
children?: React__default.ReactNode;
|
|
525
|
+
/** Custom class name */
|
|
526
|
+
className?: string;
|
|
527
|
+
}
|
|
528
|
+
/**
|
|
529
|
+
* Access the CheckboxGroup context. Returns null if not within a group.
|
|
530
|
+
*/
|
|
531
|
+
declare function useCheckboxGroupContext(): CheckboxGroupContextValue | null;
|
|
532
|
+
/**
|
|
533
|
+
* CheckboxGroup - Groups related checkboxes with fieldset/legend semantics.
|
|
534
|
+
*
|
|
535
|
+
* Uses `<fieldset>` and `<legend>` for proper screen reader group labeling.
|
|
536
|
+
* Manages an array of selected values for controlled/uncontrolled usage.
|
|
537
|
+
*
|
|
538
|
+
* @example
|
|
539
|
+
* ```tsx
|
|
540
|
+
* <Checkbox.Group legend="Toppings" value={toppings} onValueChange={setToppings}>
|
|
541
|
+
* <Checkbox value="cheese" label="Cheese" />
|
|
542
|
+
* <Checkbox value="peppers" label="Peppers" />
|
|
543
|
+
* </Checkbox.Group>
|
|
544
|
+
* ```
|
|
545
|
+
*/
|
|
546
|
+
declare const CheckboxGroup: React__default.ForwardRefExoticComponent<CheckboxGroupProps & React__default.RefAttributes<HTMLFieldSetElement>>;
|
|
547
|
+
/**
|
|
548
|
+
* Checkbox - An accessible checkbox with label, hint, error, and indeterminate support.
|
|
549
|
+
*
|
|
550
|
+
* Uses a native `<input type="checkbox">` for proper form integration and
|
|
551
|
+
* built-in keyboard behavior (Space to toggle, Tab to focus).
|
|
552
|
+
*
|
|
553
|
+
* Supports standalone usage and usage within a CheckboxGroup.
|
|
554
|
+
*
|
|
555
|
+
* @example
|
|
556
|
+
* ```tsx
|
|
557
|
+
* // Standalone
|
|
558
|
+
* <Checkbox label="Accept terms" checked={agreed} onCheckedChange={setAgreed} />
|
|
559
|
+
*
|
|
560
|
+
* // With hint
|
|
561
|
+
* <Checkbox label="Subscribe" hint="Weekly newsletter" />
|
|
562
|
+
*
|
|
563
|
+
* // Indeterminate
|
|
564
|
+
* <Checkbox label="Select all" indeterminate={someSelected} />
|
|
565
|
+
*
|
|
566
|
+
* // In a group
|
|
567
|
+
* <Checkbox.Group legend="Options" value={selected} onValueChange={setSelected}>
|
|
568
|
+
* <Checkbox value="a" label="Option A" />
|
|
569
|
+
* <Checkbox value="b" label="Option B" />
|
|
570
|
+
* </Checkbox.Group>
|
|
571
|
+
* ```
|
|
572
|
+
*/
|
|
573
|
+
declare const Checkbox: React__default.ForwardRefExoticComponent<CheckboxProps & React__default.RefAttributes<HTMLInputElement>>;
|
|
574
|
+
/**
|
|
575
|
+
* CheckboxIndicator - Optional custom indicator for compound usage.
|
|
576
|
+
*
|
|
577
|
+
* When used inside a checkbox, replaces the default checkmark/dash icons.
|
|
578
|
+
* Primarily for advanced customization scenarios.
|
|
579
|
+
*/
|
|
580
|
+
declare const CheckboxIndicator: React__default.ForwardRefExoticComponent<CheckboxIndicatorProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
581
|
+
declare const CheckboxCompound: React__default.ForwardRefExoticComponent<CheckboxProps & React__default.RefAttributes<HTMLInputElement>> & {
|
|
582
|
+
Group: React__default.ForwardRefExoticComponent<CheckboxGroupProps & React__default.RefAttributes<HTMLFieldSetElement>>;
|
|
583
|
+
Indicator: React__default.ForwardRefExoticComponent<CheckboxIndicatorProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
584
|
+
};
|
|
585
|
+
|
|
586
|
+
/**
|
|
587
|
+
* RadioGroup Component
|
|
588
|
+
*
|
|
589
|
+
* An accessible radio group for single-selection from a set of options.
|
|
590
|
+
* Follows WAI-ARIA Radio Group pattern with roving tabindex and
|
|
591
|
+
* selection-follows-focus keyboard behavior.
|
|
592
|
+
*
|
|
593
|
+
* @example
|
|
594
|
+
* ```tsx
|
|
595
|
+
* // Controlled
|
|
596
|
+
* <RadioGroup value={color} onValueChange={setColor} aria-label="Favorite color">
|
|
597
|
+
* <RadioGroup.Radio value="red">Red</RadioGroup.Radio>
|
|
598
|
+
* <RadioGroup.Radio value="green">Green</RadioGroup.Radio>
|
|
599
|
+
* <RadioGroup.Radio value="blue">Blue</RadioGroup.Radio>
|
|
600
|
+
* </RadioGroup>
|
|
601
|
+
*
|
|
602
|
+
* // Uncontrolled
|
|
603
|
+
* <RadioGroup defaultValue="red" aria-label="Favorite color">
|
|
604
|
+
* <RadioGroup.Radio value="red">Red</RadioGroup.Radio>
|
|
605
|
+
* <RadioGroup.Radio value="green">Green</RadioGroup.Radio>
|
|
606
|
+
* </RadioGroup>
|
|
607
|
+
*
|
|
608
|
+
* // With legend (fieldset semantics)
|
|
609
|
+
* <RadioGroup legend="Delivery speed" required>
|
|
610
|
+
* <RadioGroup.Radio value="standard">Standard</RadioGroup.Radio>
|
|
611
|
+
* <RadioGroup.Radio value="express">Express</RadioGroup.Radio>
|
|
612
|
+
* <RadioGroup.Radio value="overnight">Overnight</RadioGroup.Radio>
|
|
613
|
+
* </RadioGroup>
|
|
614
|
+
*
|
|
615
|
+
* // With error validation
|
|
616
|
+
* <RadioGroup legend="Payment method" required error="Please select a payment method">
|
|
617
|
+
* <RadioGroup.Radio value="card">Credit Card</RadioGroup.Radio>
|
|
618
|
+
* <RadioGroup.Radio value="paypal">PayPal</RadioGroup.Radio>
|
|
619
|
+
* </RadioGroup>
|
|
620
|
+
* ```
|
|
621
|
+
*/
|
|
622
|
+
|
|
623
|
+
interface RadioGroupContextValue {
|
|
624
|
+
/** Group name for native radio inputs */
|
|
625
|
+
name: string;
|
|
626
|
+
/** Currently selected value */
|
|
627
|
+
value: string | null;
|
|
628
|
+
/** Whether all radios are disabled */
|
|
629
|
+
disabled: boolean;
|
|
630
|
+
/** Whether disabled radios remain discoverable in tab order */
|
|
631
|
+
discoverable: boolean;
|
|
632
|
+
/** Whether selection is required */
|
|
633
|
+
required: boolean;
|
|
634
|
+
/** Whether to remove default styles */
|
|
635
|
+
unstyled: boolean;
|
|
636
|
+
/** Layout orientation */
|
|
637
|
+
orientation: 'horizontal' | 'vertical';
|
|
638
|
+
/** Called when selected value changes */
|
|
639
|
+
onValueChange: (value: string) => void;
|
|
640
|
+
/** Register a radio option with the group */
|
|
641
|
+
registerRadio: (value: string, disabled: boolean) => void;
|
|
642
|
+
/** Unregister a radio option from the group */
|
|
643
|
+
unregisterRadio: (value: string) => void;
|
|
644
|
+
/** Update a radio's disabled state */
|
|
645
|
+
updateRadioDisabled: (value: string, disabled: boolean) => void;
|
|
646
|
+
}
|
|
647
|
+
interface RadioGroupProps {
|
|
648
|
+
/** Controlled value */
|
|
649
|
+
value?: string;
|
|
650
|
+
/** Default value (uncontrolled) */
|
|
651
|
+
defaultValue?: string;
|
|
652
|
+
/** Called when selected value changes */
|
|
653
|
+
onValueChange?: (value: string) => void;
|
|
654
|
+
/** Whether all radios are disabled */
|
|
655
|
+
disabled?: boolean;
|
|
656
|
+
/** Whether disabled radios remain discoverable in tab order */
|
|
657
|
+
discoverable?: boolean;
|
|
658
|
+
/** Whether selection is required */
|
|
659
|
+
required?: boolean;
|
|
660
|
+
/** Layout orientation */
|
|
661
|
+
orientation?: 'horizontal' | 'vertical';
|
|
662
|
+
/** Group name for native radio inputs */
|
|
663
|
+
name?: string;
|
|
664
|
+
/** Group label displayed as fieldset legend */
|
|
665
|
+
legend?: React__default.ReactNode;
|
|
666
|
+
/** Helper/description text */
|
|
667
|
+
hint?: React__default.ReactNode;
|
|
668
|
+
/** Error message */
|
|
669
|
+
error?: React__default.ReactNode;
|
|
670
|
+
/** Remove default styles */
|
|
671
|
+
unstyled?: boolean;
|
|
672
|
+
/** Custom class name */
|
|
673
|
+
className?: string;
|
|
674
|
+
/** Children (Radio components) */
|
|
675
|
+
children: React__default.ReactNode;
|
|
676
|
+
/** Accessible label (if no visible legend) */
|
|
677
|
+
'aria-label'?: string;
|
|
678
|
+
/** Reference to external label element */
|
|
679
|
+
'aria-labelledby'?: string;
|
|
680
|
+
}
|
|
681
|
+
interface RadioProps {
|
|
682
|
+
/** Value for this radio option (required) */
|
|
683
|
+
value: string;
|
|
684
|
+
/** Whether this individual radio is disabled */
|
|
685
|
+
disabled?: boolean;
|
|
686
|
+
/** Whether disabled radio remains discoverable */
|
|
687
|
+
discoverable?: boolean;
|
|
688
|
+
/** Label text (alternative to children) */
|
|
689
|
+
label?: React__default.ReactNode;
|
|
690
|
+
/** Helper/description text */
|
|
691
|
+
hint?: React__default.ReactNode;
|
|
692
|
+
/** Remove default styles */
|
|
693
|
+
unstyled?: boolean;
|
|
694
|
+
/** Custom class name */
|
|
695
|
+
className?: string;
|
|
696
|
+
/** Children (typically label text) */
|
|
697
|
+
children?: React__default.ReactNode;
|
|
698
|
+
/** Accessible label */
|
|
699
|
+
'aria-label'?: string;
|
|
700
|
+
}
|
|
701
|
+
/**
|
|
702
|
+
* Access the RadioGroup context.
|
|
703
|
+
* Throws if used outside a RadioGroup.
|
|
704
|
+
*/
|
|
705
|
+
declare function useRadioGroupContext(): RadioGroupContextValue;
|
|
706
|
+
/**
|
|
707
|
+
* RadioGroup - Groups related radio buttons with proper ARIA semantics.
|
|
708
|
+
*
|
|
709
|
+
* Uses `role="radiogroup"` with optional `<fieldset>/<legend>` for proper
|
|
710
|
+
* screen reader group labeling. Implements roving tabindex and
|
|
711
|
+
* selection-follows-focus keyboard behavior.
|
|
712
|
+
*
|
|
713
|
+
* Keyboard support:
|
|
714
|
+
* - Tab: Move into/out of the group
|
|
715
|
+
* - Arrow Down/Right: Move to next radio and select it
|
|
716
|
+
* - Arrow Up/Left: Move to previous radio and select it
|
|
717
|
+
* - Home: Move to first radio and select it
|
|
718
|
+
* - End: Move to last radio and select it
|
|
719
|
+
* - Space: Select the focused radio
|
|
720
|
+
*/
|
|
721
|
+
declare const RadioGroup: React__default.ForwardRefExoticComponent<RadioGroupProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
722
|
+
/**
|
|
723
|
+
* Radio - Individual radio option for use within a RadioGroup.
|
|
724
|
+
*
|
|
725
|
+
* Uses a native `<input type="radio">` (visually hidden) for full
|
|
726
|
+
* accessibility, with a custom visual indicator overlay.
|
|
727
|
+
*
|
|
728
|
+
* @example
|
|
729
|
+
* ```tsx
|
|
730
|
+
* <RadioGroup.Radio value="option1">Option 1</RadioGroup.Radio>
|
|
731
|
+
* <RadioGroup.Radio value="option2" label="Option 2" />
|
|
732
|
+
* <RadioGroup.Radio value="option3" disabled>Option 3 (unavailable)</RadioGroup.Radio>
|
|
733
|
+
* ```
|
|
734
|
+
*/
|
|
735
|
+
declare const Radio: React__default.ForwardRefExoticComponent<RadioProps & React__default.RefAttributes<HTMLInputElement>>;
|
|
736
|
+
declare const RadioGroupCompound: React__default.ForwardRefExoticComponent<RadioGroupProps & React__default.RefAttributes<HTMLDivElement>> & {
|
|
737
|
+
Radio: React__default.ForwardRefExoticComponent<RadioProps & React__default.RefAttributes<HTMLInputElement>>;
|
|
738
|
+
};
|
|
739
|
+
|
|
361
740
|
interface SwitchProps extends Omit<React__default.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'role'> {
|
|
362
741
|
/** Controlled checked state */
|
|
363
742
|
checked?: boolean;
|
|
@@ -399,4 +778,382 @@ interface SwitchProps extends Omit<React__default.ButtonHTMLAttributes<HTMLButto
|
|
|
399
778
|
*/
|
|
400
779
|
declare const Switch: React__default.ForwardRefExoticComponent<SwitchProps & React__default.RefAttributes<HTMLButtonElement>>;
|
|
401
780
|
|
|
402
|
-
|
|
781
|
+
/**
|
|
782
|
+
* Listbox Component
|
|
783
|
+
*
|
|
784
|
+
* An accessible listbox for single or multi-selection from a visible list.
|
|
785
|
+
* Follows WAI-ARIA Listbox pattern with aria-activedescendant,
|
|
786
|
+
* type-ahead search, option groups, and full keyboard support.
|
|
787
|
+
*
|
|
788
|
+
* @example
|
|
789
|
+
* ```tsx
|
|
790
|
+
* // Single select (selection follows focus)
|
|
791
|
+
* <Listbox value={fruit} onValueChange={setFruit} aria-label="Favorite fruit">
|
|
792
|
+
* <Listbox.Option value="apple">Apple</Listbox.Option>
|
|
793
|
+
* <Listbox.Option value="banana" disabled>Banana</Listbox.Option>
|
|
794
|
+
* <Listbox.Group label="Citrus">
|
|
795
|
+
* <Listbox.Option value="orange">Orange</Listbox.Option>
|
|
796
|
+
* </Listbox.Group>
|
|
797
|
+
* </Listbox>
|
|
798
|
+
*
|
|
799
|
+
* // Multi select (focus independent of selection)
|
|
800
|
+
* <Listbox multiple value={toppings} onValueChange={setToppings} aria-label="Toppings">
|
|
801
|
+
* <Listbox.Option value="cheese">Cheese</Listbox.Option>
|
|
802
|
+
* <Listbox.Option value="pepperoni">Pepperoni</Listbox.Option>
|
|
803
|
+
* </Listbox>
|
|
804
|
+
* ```
|
|
805
|
+
*/
|
|
806
|
+
|
|
807
|
+
interface ListboxContextValue {
|
|
808
|
+
multiple: boolean;
|
|
809
|
+
disabled: boolean;
|
|
810
|
+
discoverable: boolean;
|
|
811
|
+
unstyled: boolean;
|
|
812
|
+
orientation: 'horizontal' | 'vertical';
|
|
813
|
+
selectedValues: Set<string>;
|
|
814
|
+
focusedValue: string | null;
|
|
815
|
+
onSelect: (value: string) => void;
|
|
816
|
+
onFocusOption: (value: string) => void;
|
|
817
|
+
registerOption: (value: string, disabled: boolean, label: string) => void;
|
|
818
|
+
unregisterOption: (value: string) => void;
|
|
819
|
+
updateOptionDisabled: (value: string, disabled: boolean) => void;
|
|
820
|
+
isSelected: (value: string) => boolean;
|
|
821
|
+
listboxId: string;
|
|
822
|
+
}
|
|
823
|
+
interface ListboxProps {
|
|
824
|
+
/** Controlled value — string for single, string[] for multi */
|
|
825
|
+
value?: string | string[];
|
|
826
|
+
/** Default value (uncontrolled) */
|
|
827
|
+
defaultValue?: string | string[];
|
|
828
|
+
/** Called when selection changes */
|
|
829
|
+
onValueChange?: (value: string | string[]) => void;
|
|
830
|
+
/** Enable multi-select mode */
|
|
831
|
+
multiple?: boolean;
|
|
832
|
+
/** Disable all options */
|
|
833
|
+
disabled?: boolean;
|
|
834
|
+
/** Keep disabled listbox in tab order */
|
|
835
|
+
discoverable?: boolean;
|
|
836
|
+
/** Layout orientation */
|
|
837
|
+
orientation?: 'horizontal' | 'vertical';
|
|
838
|
+
/** Remove default styles */
|
|
839
|
+
unstyled?: boolean;
|
|
840
|
+
/** Custom class name */
|
|
841
|
+
className?: string;
|
|
842
|
+
/** Children (Option and Group components) */
|
|
843
|
+
children: React__default.ReactNode;
|
|
844
|
+
/** Accessible label */
|
|
845
|
+
'aria-label'?: string;
|
|
846
|
+
/** Reference to external label element */
|
|
847
|
+
'aria-labelledby'?: string;
|
|
848
|
+
}
|
|
849
|
+
interface ListboxOptionProps {
|
|
850
|
+
/** Value for this option (required) */
|
|
851
|
+
value: string;
|
|
852
|
+
/** Whether this option is disabled */
|
|
853
|
+
disabled?: boolean;
|
|
854
|
+
/** Keep disabled option discoverable */
|
|
855
|
+
discoverable?: boolean;
|
|
856
|
+
/** Remove default styles */
|
|
857
|
+
unstyled?: boolean;
|
|
858
|
+
/** Custom class name */
|
|
859
|
+
className?: string;
|
|
860
|
+
/** Children (label content) */
|
|
861
|
+
children?: React__default.ReactNode;
|
|
862
|
+
/** Accessible label override */
|
|
863
|
+
'aria-label'?: string;
|
|
864
|
+
}
|
|
865
|
+
interface ListboxGroupProps {
|
|
866
|
+
/** Group label (required, visible) */
|
|
867
|
+
label: string;
|
|
868
|
+
/** Disable all options in this group */
|
|
869
|
+
disabled?: boolean;
|
|
870
|
+
/** Remove default styles */
|
|
871
|
+
unstyled?: boolean;
|
|
872
|
+
/** Custom class name */
|
|
873
|
+
className?: string;
|
|
874
|
+
/** Children (Option components) */
|
|
875
|
+
children: React__default.ReactNode;
|
|
876
|
+
}
|
|
877
|
+
declare function useListboxContext(): ListboxContextValue;
|
|
878
|
+
declare const Listbox: React__default.ForwardRefExoticComponent<ListboxProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
879
|
+
declare const ListboxOption: React__default.ForwardRefExoticComponent<ListboxOptionProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
880
|
+
declare const ListboxGroup: React__default.ForwardRefExoticComponent<ListboxGroupProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
881
|
+
declare const ListboxCompound: React__default.ForwardRefExoticComponent<ListboxProps & React__default.RefAttributes<HTMLDivElement>> & {
|
|
882
|
+
Option: React__default.ForwardRefExoticComponent<ListboxOptionProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
883
|
+
Group: React__default.ForwardRefExoticComponent<ListboxGroupProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
884
|
+
};
|
|
885
|
+
|
|
886
|
+
type InputType = 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search';
|
|
887
|
+
interface InputProps {
|
|
888
|
+
/** Controlled value */
|
|
889
|
+
value?: string;
|
|
890
|
+
/** Uncontrolled default value */
|
|
891
|
+
defaultValue?: string;
|
|
892
|
+
/** Called when value changes */
|
|
893
|
+
onValueChange?: (value: string) => void;
|
|
894
|
+
/** Input type */
|
|
895
|
+
type?: InputType;
|
|
896
|
+
/** Visible label text (props mode) */
|
|
897
|
+
label?: ReactNode;
|
|
898
|
+
/** Hint/description text (props mode) */
|
|
899
|
+
hint?: ReactNode;
|
|
900
|
+
/** Error message (props mode) */
|
|
901
|
+
error?: ReactNode;
|
|
902
|
+
/** Whether the input is required */
|
|
903
|
+
required?: boolean;
|
|
904
|
+
/** Whether the input is disabled */
|
|
905
|
+
disabled?: boolean;
|
|
906
|
+
/** Whether the input is read-only */
|
|
907
|
+
readOnly?: boolean;
|
|
908
|
+
/** Accessible label when no visible label */
|
|
909
|
+
'aria-label'?: string;
|
|
910
|
+
/** ID of external labelling element */
|
|
911
|
+
'aria-labelledby'?: string;
|
|
912
|
+
/** Placeholder text */
|
|
913
|
+
placeholder?: string;
|
|
914
|
+
/** Input name for form submission */
|
|
915
|
+
name?: string;
|
|
916
|
+
/** Autocomplete hint */
|
|
917
|
+
autoComplete?: string;
|
|
918
|
+
/** Maximum character length */
|
|
919
|
+
maxLength?: number;
|
|
920
|
+
/** Minimum character length */
|
|
921
|
+
minLength?: number;
|
|
922
|
+
/** Validation pattern */
|
|
923
|
+
pattern?: string;
|
|
924
|
+
/** Input mode hint for virtual keyboards */
|
|
925
|
+
inputMode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
|
|
926
|
+
/** Provided element ID (overrides generated) */
|
|
927
|
+
id?: string;
|
|
928
|
+
/** Remove default styles for full customization */
|
|
929
|
+
unstyled?: boolean;
|
|
930
|
+
/** CSS class name */
|
|
931
|
+
className?: string;
|
|
932
|
+
/** Focus event handler */
|
|
933
|
+
onFocus?: React.FocusEventHandler<HTMLInputElement>;
|
|
934
|
+
/** Blur event handler */
|
|
935
|
+
onBlur?: React.FocusEventHandler<HTMLInputElement>;
|
|
936
|
+
/** Children for compound mode */
|
|
937
|
+
children?: ReactNode;
|
|
938
|
+
}
|
|
939
|
+
interface InputFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'onChange' | 'value'> {
|
|
940
|
+
/** Input type */
|
|
941
|
+
type?: InputType;
|
|
942
|
+
}
|
|
943
|
+
interface InputLabelProps {
|
|
944
|
+
children: ReactNode;
|
|
945
|
+
className?: string;
|
|
946
|
+
}
|
|
947
|
+
interface InputHintProps {
|
|
948
|
+
children: ReactNode;
|
|
949
|
+
className?: string;
|
|
950
|
+
}
|
|
951
|
+
interface InputErrorProps {
|
|
952
|
+
children?: ReactNode;
|
|
953
|
+
className?: string;
|
|
954
|
+
}
|
|
955
|
+
interface InputContextValue {
|
|
956
|
+
fieldId: string;
|
|
957
|
+
labelId: string;
|
|
958
|
+
hintId: string;
|
|
959
|
+
errorId: string;
|
|
960
|
+
value: string;
|
|
961
|
+
setValue: (value: string) => void;
|
|
962
|
+
hasError: boolean;
|
|
963
|
+
disabled: boolean;
|
|
964
|
+
readOnly: boolean;
|
|
965
|
+
required: boolean;
|
|
966
|
+
isFocusVisible: boolean;
|
|
967
|
+
focusProps: {
|
|
968
|
+
onFocus: () => void;
|
|
969
|
+
onBlur: () => void;
|
|
970
|
+
};
|
|
971
|
+
unstyled: boolean;
|
|
972
|
+
}
|
|
973
|
+
declare function useInputContext(): InputContextValue;
|
|
974
|
+
|
|
975
|
+
/**
|
|
976
|
+
* Input label sub-component
|
|
977
|
+
*/
|
|
978
|
+
declare const InputLabel: React$1.ForwardRefExoticComponent<InputLabelProps & React$1.RefAttributes<HTMLLabelElement>>;
|
|
979
|
+
/**
|
|
980
|
+
* Input field sub-component (the actual <input> element)
|
|
981
|
+
*/
|
|
982
|
+
declare const InputField: React$1.ForwardRefExoticComponent<InputFieldProps & React$1.RefAttributes<HTMLInputElement>>;
|
|
983
|
+
/**
|
|
984
|
+
* Input hint sub-component
|
|
985
|
+
*/
|
|
986
|
+
declare const InputHint: React$1.ForwardRefExoticComponent<InputHintProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
987
|
+
/**
|
|
988
|
+
* Input error sub-component - only renders when children are truthy
|
|
989
|
+
*/
|
|
990
|
+
declare const InputError: React$1.ForwardRefExoticComponent<InputErrorProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
991
|
+
/**
|
|
992
|
+
* Accessible Input component with label, hint, and error support.
|
|
993
|
+
*
|
|
994
|
+
* Supports two modes:
|
|
995
|
+
* - **Props mode**: Pass `label`, `hint`, `error` as props for automatic layout
|
|
996
|
+
* - **Compound mode**: Use `<Input.Label>`, `<Input.Field>`, etc. as children for custom layout
|
|
997
|
+
*/
|
|
998
|
+
declare const Input: React$1.ForwardRefExoticComponent<InputProps & React$1.RefAttributes<HTMLInputElement>>;
|
|
999
|
+
declare const InputCompound: React$1.ForwardRefExoticComponent<InputProps & React$1.RefAttributes<HTMLInputElement>> & {
|
|
1000
|
+
Label: React$1.ForwardRefExoticComponent<InputLabelProps & React$1.RefAttributes<HTMLLabelElement>>;
|
|
1001
|
+
Field: React$1.ForwardRefExoticComponent<InputFieldProps & React$1.RefAttributes<HTMLInputElement>>;
|
|
1002
|
+
Hint: React$1.ForwardRefExoticComponent<InputHintProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
1003
|
+
Error: React$1.ForwardRefExoticComponent<InputErrorProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
1004
|
+
};
|
|
1005
|
+
|
|
1006
|
+
type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'outline' | 'ghost';
|
|
1007
|
+
type ButtonSize = 'sm' | 'md' | 'lg';
|
|
1008
|
+
interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'disabled' | 'type'> {
|
|
1009
|
+
/** Visual variant */
|
|
1010
|
+
variant?: ButtonVariant;
|
|
1011
|
+
/** Size */
|
|
1012
|
+
size?: ButtonSize;
|
|
1013
|
+
/** HTML button type */
|
|
1014
|
+
type?: 'button' | 'submit' | 'reset';
|
|
1015
|
+
/** Whether the button is disabled */
|
|
1016
|
+
disabled?: boolean;
|
|
1017
|
+
/**
|
|
1018
|
+
* Whether disabled button remains discoverable via keyboard.
|
|
1019
|
+
* When true, disabled button stays in tab order with aria-disabled.
|
|
1020
|
+
* When false, disabled button is removed from tab order with native disabled.
|
|
1021
|
+
* @default false
|
|
1022
|
+
*/
|
|
1023
|
+
discoverable?: boolean;
|
|
1024
|
+
/** Whether the button is in a loading state (sets aria-busy) */
|
|
1025
|
+
loading?: boolean;
|
|
1026
|
+
/** Remove default styles for full customization */
|
|
1027
|
+
unstyled?: boolean;
|
|
1028
|
+
/** Accessible label when no visible text */
|
|
1029
|
+
'aria-label'?: string;
|
|
1030
|
+
/** Children (button content) */
|
|
1031
|
+
children?: ReactNode;
|
|
1032
|
+
}
|
|
1033
|
+
/**
|
|
1034
|
+
* Accessible Button component with variant, size, and loading support.
|
|
1035
|
+
*
|
|
1036
|
+
* Uses `aria-disabled` + event prevention for discoverable disabled state,
|
|
1037
|
+
* keeping the button in the tab order so keyboard users can find it.
|
|
1038
|
+
*/
|
|
1039
|
+
declare const Button: React$1.ForwardRefExoticComponent<ButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
1040
|
+
|
|
1041
|
+
type TextareaResize = 'none' | 'both' | 'horizontal' | 'vertical';
|
|
1042
|
+
interface TextareaProps {
|
|
1043
|
+
/** Controlled value */
|
|
1044
|
+
value?: string;
|
|
1045
|
+
/** Uncontrolled default value */
|
|
1046
|
+
defaultValue?: string;
|
|
1047
|
+
/** Called when value changes */
|
|
1048
|
+
onValueChange?: (value: string) => void;
|
|
1049
|
+
/** Number of visible text rows */
|
|
1050
|
+
rows?: number;
|
|
1051
|
+
/** Resize behavior */
|
|
1052
|
+
resize?: TextareaResize;
|
|
1053
|
+
/** Visible label text (props mode) */
|
|
1054
|
+
label?: ReactNode;
|
|
1055
|
+
/** Hint/description text (props mode) */
|
|
1056
|
+
hint?: ReactNode;
|
|
1057
|
+
/** Error message (props mode) */
|
|
1058
|
+
error?: ReactNode;
|
|
1059
|
+
/** Whether the textarea is required */
|
|
1060
|
+
required?: boolean;
|
|
1061
|
+
/** Whether the textarea is disabled */
|
|
1062
|
+
disabled?: boolean;
|
|
1063
|
+
/** Whether the textarea is read-only */
|
|
1064
|
+
readOnly?: boolean;
|
|
1065
|
+
/** Accessible label when no visible label */
|
|
1066
|
+
'aria-label'?: string;
|
|
1067
|
+
/** ID of external labelling element */
|
|
1068
|
+
'aria-labelledby'?: string;
|
|
1069
|
+
/** Placeholder text */
|
|
1070
|
+
placeholder?: string;
|
|
1071
|
+
/** Textarea name for form submission */
|
|
1072
|
+
name?: string;
|
|
1073
|
+
/** Autocomplete hint */
|
|
1074
|
+
autoComplete?: string;
|
|
1075
|
+
/** Maximum character length */
|
|
1076
|
+
maxLength?: number;
|
|
1077
|
+
/** Minimum character length */
|
|
1078
|
+
minLength?: number;
|
|
1079
|
+
/** Provided element ID (overrides generated) */
|
|
1080
|
+
id?: string;
|
|
1081
|
+
/** Remove default styles for full customization */
|
|
1082
|
+
unstyled?: boolean;
|
|
1083
|
+
/** CSS class name */
|
|
1084
|
+
className?: string;
|
|
1085
|
+
/** Focus event handler */
|
|
1086
|
+
onFocus?: React.FocusEventHandler<HTMLTextAreaElement>;
|
|
1087
|
+
/** Blur event handler */
|
|
1088
|
+
onBlur?: React.FocusEventHandler<HTMLTextAreaElement>;
|
|
1089
|
+
/** Children for compound mode */
|
|
1090
|
+
children?: ReactNode;
|
|
1091
|
+
}
|
|
1092
|
+
interface TextareaFieldProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange' | 'value'> {
|
|
1093
|
+
}
|
|
1094
|
+
interface TextareaLabelProps {
|
|
1095
|
+
children: ReactNode;
|
|
1096
|
+
className?: string;
|
|
1097
|
+
}
|
|
1098
|
+
interface TextareaHintProps {
|
|
1099
|
+
children: ReactNode;
|
|
1100
|
+
className?: string;
|
|
1101
|
+
}
|
|
1102
|
+
interface TextareaErrorProps {
|
|
1103
|
+
children?: ReactNode;
|
|
1104
|
+
className?: string;
|
|
1105
|
+
}
|
|
1106
|
+
interface TextareaContextValue {
|
|
1107
|
+
fieldId: string;
|
|
1108
|
+
labelId: string;
|
|
1109
|
+
hintId: string;
|
|
1110
|
+
errorId: string;
|
|
1111
|
+
value: string;
|
|
1112
|
+
setValue: (value: string) => void;
|
|
1113
|
+
hasError: boolean;
|
|
1114
|
+
disabled: boolean;
|
|
1115
|
+
readOnly: boolean;
|
|
1116
|
+
required: boolean;
|
|
1117
|
+
rows: number;
|
|
1118
|
+
resize: TextareaResize;
|
|
1119
|
+
isFocusVisible: boolean;
|
|
1120
|
+
focusProps: {
|
|
1121
|
+
onFocus: () => void;
|
|
1122
|
+
onBlur: () => void;
|
|
1123
|
+
};
|
|
1124
|
+
unstyled: boolean;
|
|
1125
|
+
}
|
|
1126
|
+
declare function useTextareaContext(): TextareaContextValue;
|
|
1127
|
+
|
|
1128
|
+
/**
|
|
1129
|
+
* Textarea label sub-component
|
|
1130
|
+
*/
|
|
1131
|
+
declare const TextareaLabel: React$1.ForwardRefExoticComponent<TextareaLabelProps & React$1.RefAttributes<HTMLLabelElement>>;
|
|
1132
|
+
/**
|
|
1133
|
+
* Textarea field sub-component (the actual <textarea> element)
|
|
1134
|
+
*/
|
|
1135
|
+
declare const TextareaField: React$1.ForwardRefExoticComponent<TextareaFieldProps & React$1.RefAttributes<HTMLTextAreaElement>>;
|
|
1136
|
+
/**
|
|
1137
|
+
* Textarea hint sub-component
|
|
1138
|
+
*/
|
|
1139
|
+
declare const TextareaHint: React$1.ForwardRefExoticComponent<TextareaHintProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
1140
|
+
/**
|
|
1141
|
+
* Textarea error sub-component - only renders when children are truthy
|
|
1142
|
+
*/
|
|
1143
|
+
declare const TextareaError: React$1.ForwardRefExoticComponent<TextareaErrorProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
1144
|
+
/**
|
|
1145
|
+
* Accessible Textarea component with label, hint, and error support.
|
|
1146
|
+
*
|
|
1147
|
+
* Supports two modes:
|
|
1148
|
+
* - **Props mode**: Pass `label`, `hint`, `error` as props for automatic layout
|
|
1149
|
+
* - **Compound mode**: Use `<Textarea.Label>`, `<Textarea.Field>`, etc. as children for custom layout
|
|
1150
|
+
*/
|
|
1151
|
+
declare const Textarea: React$1.ForwardRefExoticComponent<TextareaProps & React$1.RefAttributes<HTMLTextAreaElement>>;
|
|
1152
|
+
declare const TextareaCompound: React$1.ForwardRefExoticComponent<TextareaProps & React$1.RefAttributes<HTMLTextAreaElement>> & {
|
|
1153
|
+
Label: React$1.ForwardRefExoticComponent<TextareaLabelProps & React$1.RefAttributes<HTMLLabelElement>>;
|
|
1154
|
+
Field: React$1.ForwardRefExoticComponent<TextareaFieldProps & React$1.RefAttributes<HTMLTextAreaElement>>;
|
|
1155
|
+
Hint: React$1.ForwardRefExoticComponent<TextareaHintProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
1156
|
+
Error: React$1.ForwardRefExoticComponent<TextareaErrorProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
1157
|
+
};
|
|
1158
|
+
|
|
1159
|
+
export { Button, type ButtonProps, CheckboxCompound as Checkbox, Checkbox as CheckboxBase, CheckboxGroup, type CheckboxGroupContextValue, type CheckboxGroupProps, CheckboxIndicator, type CheckboxIndicatorProps, type CheckboxProps, InputCompound as Input, Input as InputBase, type InputContextValue, InputError, type InputErrorProps, InputField, type InputFieldProps, InputHint, type InputHintProps, InputLabel, type InputLabelProps, type InputProps, ListboxCompound as Listbox, Listbox as ListboxBase, type ListboxContextValue, ListboxGroup, type ListboxGroupProps, ListboxOption, type ListboxOptionProps, type ListboxProps, Radio, RadioGroupCompound as RadioGroup, RadioGroup as RadioGroupBase, type RadioGroupContextValue, type RadioGroupProps, type RadioProps, type RovingTabindexItem, SelectCompound as Select, Select as SelectBase, SelectListbox, type SelectListboxProps, SelectOptionItem, type SelectOptionProps, type SelectOption as SelectOptionType, type SelectProps, SelectTrigger, type SelectTriggerProps, Switch, type SwitchProps, TextareaCompound as Textarea, Textarea as TextareaBase, type TextareaContextValue, TextareaError, type TextareaErrorProps, TextareaField, type TextareaFieldProps, TextareaHint, type TextareaHintProps, TextareaLabel, type TextareaLabelProps, type TextareaProps, type UseFocusTrapOptions, type UseRovingTabindexOptions, useAnnounceLoading, useAnnounceOnChange, useAnnouncer, useCheckboxGroupContext, useFocusControl, useFocusManager, useFocusTrap, useFocusTrapControls, useFocusVisible, useFocusWithin, useGridKeyboard, useId, useIdScope, useIds, useInputContext, useKeyPressed, useKeyboard, useListboxContext, useMenuKeyboard, useRadioGroupContext, useRovingTabindex, useRovingTabindexMap, useTabsKeyboard, useTextareaContext, useTypeAhead };
|