@capitaltg/vero 1.8.2 → 1.10.0

package/dist/types/index.d.ts

@@ -58,18 +58,27 @@ declare type AlertSize = 'sm' | 'default';
 
 declare type AlertVariant = 'success' | 'warning' | 'danger' | 'info';
 
-export declare const Autocomplete: default_2.ForwardRefExoticComponent<AutocompleteProps & default_2.RefAttributes<HTMLButtonElement>>;
+export declare const Autocomplete: <T, K extends keyof T, L extends keyof T>(props: AutocompleteProps<T, K, L> & {
+    ref?: default_2.ForwardedRef<HTMLButtonElement>;
+}) => default_2.ReactElement;
 
-export declare interface AutocompleteOption {
-    value: string;
-    label: string;
-}
+declare type AutocompleteFormAttributes = Pick<React.SelectHTMLAttributes<HTMLSelectElement>, 'name' | 'required' | 'autoFocus'>;
 
-export declare interface AutocompleteProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'disabled'> {
-    loadOptions?: (inputValue: string) => Promise<AutocompleteOption[]>;
-    options?: AutocompleteOption[];
-    value: string;
-    onChange: (value: string) => void;
+export declare interface AutocompleteProps<T, K extends keyof T, L extends keyof T> extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'disabled' | 'value'>, AutocompleteFormAttributes {
+    loadOptions?: (inputValue: string) => Promise<T[]>;
+    options?: T[];
+    value: T[K] | '';
+    /**
+     * The key to use for the value property in option objects.
+     * Must be a key of T.
+     */
+    valueKey: K;
+    /**
+     * The key to use for the label property in option objects.
+     * Must be a key of T.
+     */
+    labelKey: L;
+    onChange: (value: T[K]) => void;
     placeholder?: string;
     emptyMessage?: string;
     className?: string;
@@ -81,6 +90,26 @@ export declare interface AutocompleteProps extends Omit<ButtonHTMLAttributes<HTM
     errorMessage?: string;
     zIndex?: number;
     isDisabled?: boolean;
+    /**
+     * Custom render function for each option.
+     * Receives the option of type T and returns a React node.
+     * If not provided, defaults to rendering a Check icon and the option label.
+     */
+    renderOption?: (option: T, isSelected: boolean) => React.ReactNode;
+    /**
+     * The name attribute for form submission.
+     * This is required for the autocomplete value to be included in form data.
+     */
+    name?: string;
+    /**
+     * Whether the autocomplete is required for form validation.
+     * When true, the form cannot be submitted without a selection.
+     */
+    required?: boolean;
+    /**
+     * Automatically focuses the autocomplete when the page loads.
+     */
+    autoFocus?: boolean;
 }
 
 export declare const Badge: React_2.ForwardRefExoticComponent<BadgeProps & React_2.RefAttributes<HTMLDivElement>>;
@@ -154,12 +183,14 @@ export declare function cn(...inputs: ClassValue[]): string;
 
 export declare const Combobox: default_2.ForwardRefExoticComponent<ComboboxProps & default_2.RefAttributes<HTMLButtonElement>>;
 
+declare type ComboboxFormAttributes = Pick<React.SelectHTMLAttributes<HTMLSelectElement>, 'name' | 'required' | 'autoFocus'>;
+
 export declare interface ComboboxOption {
     value: string;
     label: string;
 }
 
-export declare interface ComboboxProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'disabled'> {
+export declare interface ComboboxProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'disabled'>, ComboboxFormAttributes {
     options: ComboboxOption[];
     value: string;
     onChange: (value: string) => void;
@@ -170,6 +201,20 @@ export declare interface ComboboxProps extends Omit<ButtonHTMLAttributes<HTMLBut
     listClassName?: string;
     zIndex?: number;
     isDisabled?: boolean;
+    /**
+     * The name attribute for form submission.
+     * This is required for the combobox value to be included in form data.
+     */
+    name?: string;
+    /**
+     * Whether the combobox is required for form validation.
+     * When true, the form cannot be submitted without a selection.
+     */
+    required?: boolean;
+    /**
+     * Automatically focuses the combobox when the page loads.
+     */
+    autoFocus?: boolean;
 }
 
 /**
@@ -193,7 +238,9 @@ export declare function configureZIndex(config: Partial<ZIndexConfig>): void;
 
 export declare const DatePicker: default_2.ForwardRefExoticComponent<DatePickerProps & default_2.RefAttributes<HTMLButtonElement>>;
 
-export declare interface DatePickerProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'disabled' | 'value'> {
+declare type DatePickerFormAttributes = Pick<React.SelectHTMLAttributes<HTMLSelectElement>, 'name' | 'required' | 'autoFocus'>;
+
+export declare interface DatePickerProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'disabled' | 'value'>, DatePickerFormAttributes {
     value?: Date;
     startMonth?: Date;
     endMonth?: Date;
@@ -202,6 +249,20 @@ export declare interface DatePickerProps extends Omit<ButtonHTMLAttributes<HTMLB
     className?: string;
     zIndex?: number;
     isDisabled?: boolean;
+    /**
+     * The name attribute for form submission.
+     * This is required for the date picker value to be included in form data.
+     */
+    name?: string;
+    /**
+     * Whether the date picker is required for form validation.
+     * When true, the form cannot be submitted without a date selection.
+     */
+    required?: boolean;
+    /**
+     * Automatically focuses the date picker when the page loads.
+     */
+    autoFocus?: boolean;
 }
 
 export declare interface DateRange {
@@ -211,7 +272,9 @@ export declare interface DateRange {
 
 export declare const DateRangePicker: React_2.ForwardRefExoticComponent<DateRangePickerProps & React_2.RefAttributes<HTMLButtonElement>>;
 
-export declare interface DateRangePickerProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'disabled' | 'value'> {
+declare type DateRangePickerFormAttributes = Pick<React.SelectHTMLAttributes<HTMLSelectElement>, 'name' | 'required' | 'autoFocus'>;
+
+export declare interface DateRangePickerProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'disabled' | 'value'>, DateRangePickerFormAttributes {
     value: DateRange;
     onChange: (range: DateRange) => void;
     placeholder?: {
@@ -221,6 +284,20 @@ export declare interface DateRangePickerProps extends Omit<ButtonHTMLAttributes<
     className?: string;
     zIndex?: number;
     isDisabled?: boolean;
+    /**
+     * The name attribute for form submission.
+     * This is required for the date range picker value to be included in form data.
+     */
+    name?: string;
+    /**
+     * Whether the date range picker is required for form validation.
+     * When true, the form cannot be submitted without a date range selection.
+     */
+    required?: boolean;
+    /**
+     * Automatically focuses the date range picker when the page loads.
+     */
+    autoFocus?: boolean;
 }
 
 export declare const Dialog: FC<DialogPrimitive.DialogProps>;
@@ -369,12 +446,14 @@ declare type MultipleProps = {
 
 export declare const MultiSelect: default_2.ForwardRefExoticComponent<MultiSelectProps & default_2.RefAttributes<HTMLDivElement>>;
 
+declare type MultiSelectFormAttributes = Pick<React.SelectHTMLAttributes<HTMLSelectElement>, 'name' | 'required' | 'autoFocus'>;
+
 export declare interface MultiSelectOption {
     value: string;
     label: string;
 }
 
-export declare interface MultiSelectProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+export declare interface MultiSelectProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>, MultiSelectFormAttributes {
     options: MultiSelectOption[];
     value: string[];
     onChange: (value: string[]) => void;
@@ -385,6 +464,20 @@ export declare interface MultiSelectProps extends Omit<HTMLAttributes<HTMLDivEle
     listClassName?: string;
     zIndex?: number;
     isDisabled?: boolean;
+    /**
+     * The name attribute for form submission.
+     * This is required for the multi-select value to be included in form data.
+     */
+    name?: string;
+    /**
+     * Whether the multi-select is required for form validation.
+     * When true, the form cannot be submitted without at least one selection.
+     */
+    required?: boolean;
+    /**
+     * Automatically focuses the multi-select when the page loads.
+     */
+    autoFocus?: boolean;
 }
 
 declare type OmittedPrimitiveProps = Omit<ComponentPropsWithoutRef<typeof AccordionPrimitive.Root>, 'type' | 'value' | 'defaultValue' | 'collapsible' | 'onValueChange'>;
@@ -447,6 +540,8 @@ export declare interface SelectContentProps extends ComponentPropsWithoutRef<typ
     zIndex?: number;
 }
 
+declare type SelectFormAttributes = Pick<React.SelectHTMLAttributes<HTMLSelectElement>, 'name' | 'required' | 'autoFocus'>;
+
 export declare const SelectGroup: React_2.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React_2.RefAttributes<HTMLDivElement>>;
 
 export declare const SelectItem: React_2.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
@@ -462,7 +557,7 @@ export declare interface SelectOption {
     label: string;
 }
 
-export declare interface SelectProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'disabled'> {
+export declare interface SelectProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'disabled'>, SelectFormAttributes {
     options: SelectOption[];
     value: string;
     onChange: (value: string) => void;
@@ -470,6 +565,20 @@ export declare interface SelectProps extends Omit<ButtonHTMLAttributes<HTMLButto
     className?: string;
     zIndex?: number;
     isDisabled?: boolean;
+    /**
+     * The name attribute for form submission.
+     * This is required for the select value to be included in form data.
+     */
+    name?: string;
+    /**
+     * Whether the select is required for form validation.
+     * When true, the form cannot be submitted without a selection.
+     */
+    required?: boolean;
+    /**
+     * Automatically focuses the select when the page loads.
+     */
+    autoFocus?: boolean;
 }
 
 export declare const SelectRoot: React_2.FC<SelectPrimitive.SelectProps>;
@@ -606,10 +715,6 @@ export declare interface TabsProps extends ComponentPropsWithoutRef<typeof TabsP
      * The default value of the active tab when the component is uncontrolled.
      */
     defaultValue?: string;
-    /**
-     * How tabs are activated. When set to "automatic", tabs are activated when receiving focus. When set to "manual", tabs are activated when clicked.
-     */
-    activationMode?: 'automatic' | 'manual';
 }
 
 export declare const TabsTrigger: React_2.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & React_2.RefAttributes<HTMLButtonElement>, "ref"> & React_2.RefAttributes<HTMLButtonElement>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@capitaltg/vero",
-  "version": "1.8.2",
+  "version": "1.10.0",
   "description": "Accessible, modern, open source React component library inspired by USWDS built with Radix UI",
   "type": "module",
   "main": "dist/index.js",