@compa11y/react 0.1.0 → 0.1.2

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/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
- export { type RovingTabindexItem, Switch, type SwitchProps, type UseFocusTrapOptions, type UseRovingTabindexOptions, useAnnounceLoading, useAnnounceOnChange, useAnnouncer, useFocusControl, useFocusManager, useFocusTrap, useFocusTrapControls, useFocusVisible, useFocusWithin, useGridKeyboard, useId, useIdScope, useIds, useKeyPressed, useKeyboard, useMenuKeyboard, useRovingTabindex, useRovingTabindexMap, useTabsKeyboard, useTypeAhead };
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 };