@bloomreach/react-banana-ui 1.32.1 → 1.33.0

package/dist/components/data-display/actions-container/actions-container.types.d.ts

@@ -1,5 +1,5 @@
-import { ReactNode } from 'react';
-export interface ActionsContainerProps {
+import { HTMLAttributes, ReactNode } from 'react';
+export interface ActionsContainerProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * The content of the component.
      */

package/dist/components/data-display/badge/badge.types.d.ts

@@ -1,5 +1,5 @@
-import { ReactNode } from 'react';
-export interface BadgeProps {
+import { HTMLAttributes, ReactNode } from 'react';
+export interface BadgeProps extends Omit<HTMLAttributes<HTMLDivElement>, 'content'> {
     /**
      * The badge will be added as a notification relative to this node.
      */

package/dist/components/data-display/description/description.types.d.ts

@@ -1,5 +1,5 @@
-import { ReactNode } from 'react';
-export interface DescriptionProps {
+import { HTMLAttributes, ReactNode } from 'react';
+export interface DescriptionProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * The content of the component.
      */

package/dist/components/data-display/header/header.types.d.ts

@@ -1,5 +1,5 @@
-import { MouseEventHandler, ReactNode } from 'react';
-export interface HeaderProps {
+import { HTMLAttributes, MouseEventHandler, ReactNode } from 'react';
+export interface HeaderProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * The title of the component.
      */

package/dist/components/data-display/index.d.ts

@@ -1,18 +1,8 @@
 export * from './actions-container';
-export * from './asset-tag';
 export * from './badge';
 export * from './description';
-export * from './filter-tag';
 export * from './header';
-export * from './input-tag';
 export * from './table';
-export * from './table-body';
-export * from './table-cell';
-export * from './table-cell-action';
-export * from './table-foot';
-export * from './table-head';
-export * from './table-row';
-export * from './table-sort-label';
-export * from './tag-group';
+export * from './tags';
 export * from './trend-marker';
 export * from './typography';

package/dist/components/data-display/internal.d.ts

@@ -1 +1 @@
-export * from './tag';
+export * from './tags/tag';

package/dist/components/data-display/table/index.d.ts

@@ -1,2 +1,8 @@
-export { default as Table } from './table';
-export type { TableProps } from './table.types';
+export * from './table';
+export * from './table-body';
+export * from './table-cell';
+export * from './table-cell-action';
+export * from './table-foot';
+export * from './table-head';
+export * from './table-row';
+export * from './table-sort-label';

package/dist/components/data-display/table/table/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Table } from './table';
+export type { TableProps } from './table.types';

package/dist/components/data-display/tags/index.d.ts

@@ -0,0 +1,4 @@
+export * from './asset-tag';
+export * from './filter-tag';
+export * from './input-tag';
+export * from './tag-group';

package/dist/components/data-display/{tag → tags/tag}/tag.types.d.ts

@@ -1,5 +1,5 @@
-import { KeyboardEvent, MouseEvent, ReactElement, ReactNode } from 'react';
-export interface TagProps {
+import { HTMLAttributes, KeyboardEvent, MouseEvent, ReactElement, ReactNode } from 'react';
+export interface TagProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onClick'> {
     /**
      * If `true`, the tag has borders.
      * @default false

package/dist/components/data-display/{tag-group → tags/tag-group}/tag-group.types.d.ts

@@ -1,5 +1,5 @@
-import { ReactNode } from 'react';
-export interface TagGroupProps {
+import { HTMLAttributes, ReactNode } from 'react';
+export interface TagGroupProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * The content of the component.
      */

package/dist/components/date/date-range-quick-selections/date-range-quick-selections.d.ts

@@ -0,0 +1,9 @@
+import { DateRangeQuickSelectionsProps } from './date-range-quick-selections.types';
+/**
+ * DateRangeQuickSelections displays a list of preset date range options
+ * for quick selection in a date range picker.
+ *
+ * @internal
+ */
+declare const DateRangeQuickSelections: import('react').ForwardRefExoticComponent<DateRangeQuickSelectionsProps & import('react').RefAttributes<HTMLUListElement>>;
+export default DateRangeQuickSelections;

package/dist/components/date/date-range-quick-selections/date-range-quick-selections.types.d.ts

@@ -0,0 +1,25 @@
+import { DateRangeValue } from '../../../utils/types/date.types';
+import { DateRangePreset } from '../date-time-range-picker/date-time-range-picker.types';
+/**
+ * Props for the DateRangeQuickSelections component.
+ */
+export interface DateRangeQuickSelectionsProps {
+    /**
+     * Custom class name for the component.
+     */
+    className?: string;
+    /**
+     * Array of preset date range options to display.
+     */
+    presets: DateRangePreset[];
+    /**
+     * The ID of the currently selected preset.
+     */
+    selectedPresetId?: DateRangePreset['id'];
+    /**
+     * Handler called when a preset is selected.
+     * @param presetId - The ID of the selected preset
+     * @param value - The date range value from the preset
+     */
+    onPresetSelect: (presetId: string, value: DateRangeValue) => void;
+}

package/dist/components/date/date-range-quick-selections/index.d.ts

@@ -0,0 +1,2 @@
+export { default as DateRangeQuickSelections } from './date-range-quick-selections';
+export type { DateRangeQuickSelectionsProps } from './date-range-quick-selections.types';

package/dist/components/date/date-time-picker/date-time-picker.stories.d.ts

@@ -10,8 +10,14 @@ export declare const GranularityComparison: Story;
 export declare const HourCycleComparison: Story;
 export declare const WithMinMaxDates: Story;
 export declare const ErrorState: Story;
+export declare const WithLabel: Story;
+export declare const WithLabelAndHelperText: Story;
+export declare const WithLabelHelperTextAndTooltip: Story;
+export declare const WithLabelAndError: Story;
+export declare const RequiredWithLabel: Story;
 export declare const Disabled: Story;
 export declare const ReadOnly: Story;
+export declare const Clearable: Story;
 export declare const LocaleComparison: Story;
 export declare const WithTimezone: Story;
 export declare const EventHandlers: Story;

package/dist/components/date/date-time-picker/date-time-picker.types.d.ts

@@ -1,7 +1,7 @@
 import { DateFieldAria, DatePickerAria } from '@react-aria/datepicker';
 import { CalendarState } from '@react-stately/calendar';
 import { DateFieldState, DatePickerState } from '@react-stately/datepicker';
-import { DOMAttributes, FocusEventHandler, InputHTMLAttributes, KeyboardEventHandler, MouseEventHandler, RefObject } from 'react';
+import { DOMAttributes, FocusEventHandler, InputHTMLAttributes, KeyboardEventHandler, MouseEventHandler, ReactNode, RefObject } from 'react';
 import { DateValidationResult } from '../../../utils/date';
 import { ButtonProps } from '../../buttons';
 /**
@@ -26,6 +26,13 @@ export interface DateTimePickerProps {
      * Custom class name for the container of the dropdown component.
      */
     className?: string;
+    /**
+     * Whether the date-time picker should display a clear button.
+     * When enabled, shows a button to clear the current value.
+     * The clear button is hidden when the picker is disabled, read-only, or has no value.
+     * @default false
+     */
+    clearable?: boolean;
     /**
      * The date and time that is selected when the component first mounts (uncontrolled).
      * Should be a JavaScript Date object representing the initial value.
@@ -57,6 +64,11 @@ export interface DateTimePickerProps {
      * @default 'minute'
      */
     granularity?: 'day' | 'hour' | 'minute' | 'second';
+    /**
+     * The helper text content displayed below the input field.
+     * Use this to provide additional context or validation messages.
+     */
+    helperText?: ReactNode;
     /**
      * Whether to display time in 12 or 24 hour format.
      * By default, this is determined by the user's locale.
@@ -70,6 +82,11 @@ export interface DateTimePickerProps {
      * Used for accessibility and form association.
      */
     id?: string;
+    /**
+     * The label content for the date-time picker.
+     * Displays above the input field to describe its purpose.
+     */
+    label?: ReactNode;
     /**
      * The locale to use for formatting the date and time.
      * Follows BCP 47 language tag format (e.g., 'en-US', 'de-DE', 'ja-JP').
@@ -181,6 +198,11 @@ export interface DateTimePickerProps {
      * @default false
      */
     showTimezone?: boolean;
+    /**
+     * Tooltip content to display when hovering over the info icon next to the label.
+     * Only displays when a label is provided.
+     */
+    tooltip?: ReactNode;
     /**
      * The current date and time value (controlled).
      * Should be a JavaScript Date object representing the current value,

package/dist/components/date/date-time-range-picker/date-time-range-picker.stories.d.ts

@@ -10,10 +10,21 @@ export declare const GranularityComparison: Story;
 export declare const HourCycleComparison: Story;
 export declare const WithMinMaxDates: Story;
 export declare const ErrorState: Story;
+export declare const WithLabel: Story;
+export declare const WithLabelAndHelperText: Story;
+export declare const WithLabelHelperTextAndTooltip: Story;
+export declare const WithLabelAndError: Story;
+export declare const RequiredWithLabel: Story;
 export declare const Disabled: Story;
 export declare const ReadOnly: Story;
+export declare const Clearable: Story;
 export declare const LocaleComparison: Story;
 export declare const WithTimezoneDisplay: Story;
 export declare const RangeScenarios: Story;
 export declare const InteractiveDemo: Story;
 export declare const ComplexValidation: Story;
+export declare const WithQuickSelections: Story;
+export declare const CustomPresets: Story;
+export declare const QuickSelectionsWithTime: Story;
+export declare const ComprehensivePresetLibrary: Story;
+export declare const BuilderFunctionsDemo: Story;

package/dist/components/date/date-time-range-picker/date-time-range-picker.types.d.ts

@@ -2,7 +2,7 @@ import { DateFieldAria, DateRangePickerAria } from '@react-aria/datepicker';
 import { RangeCalendarState } from '@react-stately/calendar';
 import { DateFieldState, DateRangePickerState } from '@react-stately/datepicker';
 import { GroupDOMAttributes } from '@react-types/shared';
-import { DOMAttributes, FocusEventHandler, InputHTMLAttributes, KeyboardEventHandler, MouseEventHandler, RefObject } from 'react';
+import { DOMAttributes, FocusEventHandler, InputHTMLAttributes, KeyboardEventHandler, MouseEventHandler, ReactNode, RefObject } from 'react';
 import { DateValidationResult } from '../../../utils/date';
 import { DateRangeValue } from '../../../utils/types/date.types';
 import { ButtonProps } from '../../buttons';
@@ -16,6 +16,32 @@ export interface DateTimeRangePickerChangeHandlerContext extends DateValidationR
      */
     valid: boolean;
 }
+/**
+ * Represents a preset date range option for quick selection.
+ */
+export interface DateRangePreset {
+    /**
+     * Whether this preset is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Function that returns the date range value for this preset.
+     * Called when the preset is selected.
+     */
+    getValue: () => DateRangeValue;
+    /**
+     * Optional icon to display before the label.
+     */
+    icon?: React.ReactNode;
+    /**
+     * Unique identifier for the preset.
+     */
+    id: string;
+    /**
+     * Display label for the preset.
+     */
+    label: React.ReactNode;
+}
 /**
  * Props for the DateTimeRangePicker component.
  *
@@ -28,6 +54,13 @@ export interface DateTimeRangePickerProps {
      * Custom class name for the container of the component.
      */
     className?: string;
+    /**
+     * Whether the date-time range picker should display a clear button.
+     * When enabled, shows a button to clear the current range value.
+     * The clear button is hidden when the picker is disabled, read-only, or has no value.
+     * @default false
+     */
+    clearable?: boolean;
     /**
      * The date and time range that is selected when the component first mounts (uncontrolled).
      * Should be an object with start and end Date objects representing the initial range.
@@ -59,6 +92,11 @@ export interface DateTimeRangePickerProps {
      * @default 'minute'
      */
     granularity?: 'day' | 'hour' | 'minute' | 'second';
+    /**
+     * The helper text content displayed below the input field.
+     * Use this to provide additional context or validation messages.
+     */
+    helperText?: ReactNode;
     /**
      * The hour cycle to use for formatting the date and time.
      * @default 12
@@ -69,6 +107,11 @@ export interface DateTimeRangePickerProps {
      * Used for accessibility and form association.
      */
     id?: string;
+    /**
+     * The label content for the date-time range picker.
+     * Displays above the input field to describe its purpose.
+     */
+    label?: ReactNode;
     /**
      * The locale to use for formatting the date and time.
      * Follows BCP 47 language tag format (e.g., 'en-US', 'de-DE', 'ja-JP').
@@ -155,6 +198,14 @@ export interface DateTimeRangePickerProps {
      * ```
      */
     onOpenChange?: (open: boolean) => void;
+    /**
+     * Handler that is called when a preset is selected.
+     * Receives the preset ID and the calculated date range value.
+     *
+     * @param presetId - The ID of the selected preset
+     * @param value - The date range value calculated from the preset
+     */
+    onPresetSelect?: (presetId: string, value: DateRangeValue) => void;
     /**
      * A placeholder date that influences the format and default values of empty segments.
      * This date is used to determine the format and structure but is not the actual value.
@@ -165,6 +216,35 @@ export interface DateTimeRangePickerProps {
      * @example new Date('2024-12-31T23:59:59') // Shows full format structure
      */
     placeholderValue?: Date;
+    /**
+     * Array of preset date range options for quick selection.
+     * When provided, displays a sidebar with these preset options.
+     * Users can click on presets to quickly select common date ranges.
+     *
+     * @example
+     * ```tsx
+     * const presets: DateRangePreset[] = [
+     *   {
+     *     id: 'today',
+     *     label: 'Today',
+     *     getValue: () => ({
+     *       start: startOfDay(new Date()),
+     *       end: endOfDay(new Date())
+     *     })
+     *   },
+     *   {
+     *     id: 'last-7-days',
+     *     label: 'Last 7 days',
+     *     getValue: () => ({
+     *       start: startOfDay(subDays(new Date(), 6)),
+     *       end: endOfDay(new Date())
+     *     })
+     *   }
+     * ];
+     * return <DateTimeRangePicker presets={presets} />;
+     * ```
+     */
+    presets?: DateRangePreset[];
     /**
      * Whether the date-time range picker is read-only.
      * When true, the user can see the value but cannot edit it.
@@ -183,6 +263,11 @@ export interface DateTimeRangePickerProps {
      * @default false
      */
     showTimezone?: boolean;
+    /**
+     * Tooltip content to display when hovering over the info icon next to the label.
+     * Only displays when a label is provided.
+     */
+    tooltip?: ReactNode;
     /**
      * The current date and time range value (controlled).
      * Should be a DateRangeValue object with start and end Date objects,

package/dist/components/date/date-time-range-picker/index.d.ts

@@ -1,2 +1,3 @@
+export * from '../../../utils/date-range-presets';
 export { default as DateTimeRangePicker } from './date-time-range-picker';
 export type { DateTimeRangePickerChangeHandlerContext, DateTimeRangePickerProps } from './date-time-range-picker.types';

package/dist/components/dropdowns/menu/menu.stories.d.ts

@@ -3,5 +3,13 @@ import { Meta, StoryObj } from '@storybook/react-vite';
 declare const meta: Meta<typeof Menu>;
 export type Story = StoryObj<typeof Menu>;
 export default meta;
-export declare const GlobalRankingRule: Story;
+export declare const Basic: Story;
+export declare const WithIcons: Story;
+export declare const WithGroups: Story;
+export declare const WithDisabledItems: Story;
+export declare const ButtonVariants: Story;
 export declare const SplitButton: Story;
+export declare const Placements: Story;
+export declare const WithClickHandlers: Story;
+export declare const ControlledMenu: Story;
+export declare const RealWorldExample: Story;

package/dist/components/inputs/autocomplete/autocomplete.types.d.ts

@@ -62,6 +62,10 @@ export interface AutocompleteProps<AutocompleteOption extends NonNullable<unknow
      * @default false
      */
     hideSelectedOptions?: boolean;
+    /**
+     * The `id` of the autocomplete element.
+     */
+    id?: string;
     /**
      * The input value.
      */
@@ -96,8 +100,11 @@ export interface AutocompleteProps<AutocompleteOption extends NonNullable<unknow
     onClose?: () => void;
     /**
      * Callback fired when the input value changes.
+     * @param event The event source of the callback
+     * @param value The new value of the input
+     * @param reason The reason for the input change ('input' | 'reset' | 'clear')
      */
-    onInputChange?: (event: SyntheticEvent, value: string) => void;
+    onInputChange?: (event: SyntheticEvent, value: string, reason?: string) => void;
     /**
      * Callback fired when the popup opens.
      */

package/dist/components/inputs/autocomplete-field/autocomplete-field.d.ts

@@ -0,0 +1,26 @@
+import { AutocompleteFieldComponentType } from './autocomplete-field.types';
+/**
+ * The `AutocompleteField` component provides a complete field layout for the Autocomplete component,
+ * including label, helper text, and tooltip support. It allows users to search for value(s) to select
+ * from a list with enhanced form integration.
+ *
+ * ### Usage
+ *
+ * ```tsx
+ * import { AutocompleteField } from '@bloomreach/react-banana-ui';
+ *
+ * export default function MyAutocompleteField() {
+ *   return (
+ *     <AutocompleteField
+ *       label="Select a fruit"
+ *       helperText="Choose your favorite fruit"
+ *       options={['Banana', 'Apple', 'Orange', 'Pineapple', 'Strawberry', 'Grape', 'Watermelon']}
+ *       placeholder="Search fruits..."
+ *       onChange={(_, newValue) => console.log(newValue)}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+declare const _default: AutocompleteFieldComponentType;
+export default _default;

package/dist/components/inputs/autocomplete-field/autocomplete-field.qa.stories.d.ts

@@ -0,0 +1,34 @@
+import { Meta } from '@storybook/react-vite';
+import { AutocompleteField } from '.';
+import { Story } from './autocomplete-field.stories';
+declare const meta: Meta<typeof AutocompleteField>;
+export default meta;
+export declare const Basic: Story;
+export declare const DifferentStates: Story;
+export declare const FullWidth: Story;
+export declare const Single: Story;
+export declare const ControlledSingleValue: Story;
+export declare const Multiple: Story<string, true>;
+export declare const DefaultValueMultiple: Story<string, true>;
+export declare const ControlledMultipleValue: Story<string, true>;
+export declare const HideSelectedOptions: Story<string, true>;
+export declare const GroupedOptions: Story<{
+    firstLetter: string;
+    label: string;
+}>;
+export declare const DisabledOptions: Story<{
+    id: number;
+    label: string;
+}>;
+export declare const FreeSoloSingle: Story<string, false, true>;
+export declare const FreeSoloMultiple: Story<string, true, true>;
+export declare const CustomOptionRendering: Story<{
+    icon: React.ReactElement;
+    name: string;
+}, true, true>;
+export declare const Clearable: Story;
+export declare const Disabled: Story;
+export declare const ReadOnly: Story;
+export declare const Loading: Story;
+export declare const WithTooltip: Story;
+export declare const SetError: Story;

package/dist/components/inputs/autocomplete-field/autocomplete-field.stories.d.ts

@@ -0,0 +1,43 @@
+import { default as AutocompleteField } from './autocomplete-field';
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { ReactElement } from 'react';
+declare const meta: Meta<typeof AutocompleteField>;
+export default meta;
+export type Story<Value extends NonNullable<unknown> = string, Multiple extends boolean = false, FreeSolo extends boolean = false> = StoryObj<typeof AutocompleteField<Value, Multiple, FreeSolo>>;
+declare const fruits: string[];
+export declare const Basic: Story;
+export declare const WithLabel: Story;
+export declare const WithTooltip: Story;
+export declare const WithHelperText: Story;
+export declare const CompleteField: Story;
+export declare const FullWidth: Story;
+export declare const DefaultValue: Story;
+export declare const ControlledSingleValue: Story;
+export declare const Multiple: Story<(typeof fruits)[0], true>;
+export declare const DefaultValueMultiple: Story<(typeof fruits)[0], true>;
+export declare const ControlledMultipleValue: Story<(typeof fruits)[0], true>;
+export declare const Clearable: Story;
+export declare const Disabled: Story;
+export declare const DisabledMultiple: Story<(typeof fruits)[0], true>;
+export declare const ReadOnly: Story;
+export declare const ReadOnlyMultiple: Story<(typeof fruits)[0], true>;
+export declare const Error: Story;
+export declare const SetError: Story;
+export declare const HideSelectedOptions: Story<string, true>;
+export declare const GroupedOptions: Story<{
+    firstLetter: string;
+    label: string;
+}>;
+export declare const DisabledOptions: Story<{
+    id: number;
+    label: string;
+}>;
+export declare const FreeSoloSingle: Story<string, false, true>;
+export declare const FreeSoloMultiple: Story<string, true, true>;
+export declare const Loading: Story;
+export declare const CustomOptionRendering: Story<{
+    icon: ReactElement;
+    name: string;
+}, true, true>;
+export declare const FieldsInColumn: Story;
+export declare const FieldsInRow: Story;

package/dist/components/inputs/autocomplete-field/autocomplete-field.types.d.ts

@@ -0,0 +1,34 @@
+import { ForwardedRef, ReactElement, ReactNode } from 'react';
+import { AutocompleteProps } from '../../internal';
+export interface AutocompleteFieldComponentType {
+    <AutocompleteOption extends NonNullable<unknown>, Multiple extends boolean = false, FreeSolo extends boolean = false>(props: AutocompleteFieldProps<AutocompleteOption, Multiple, FreeSolo> & {
+        ref?: ForwardedRef<HTMLElement>;
+    }): null | ReactElement;
+    displayName?: string;
+}
+export interface AutocompleteFieldProps<AutocompleteOption extends NonNullable<unknown>, Multiple extends boolean, FreeSolo extends boolean> extends AutocompleteProps<AutocompleteOption, Multiple, FreeSolo> {
+    /**
+     * Custom class name for the container of the component.
+     */
+    className?: string;
+    /**
+     * If `true`, the ``field` will indicate an error and set the `aria-invalid` attribute for `input`.
+     */
+    error?: boolean;
+    /**
+     * If `true`, the field will take up the full width of its container.
+     */
+    fullWidth?: boolean;
+    /**
+     * The helper text content.
+     */
+    helperText?: ReactNode;
+    /**
+     * The label content.
+     */
+    label?: ReactNode;
+    /**
+     * Tooltip to display when the field has label.
+     */
+    tooltip?: ReactNode;
+}

package/dist/components/inputs/autocomplete-field/index.d.ts

@@ -0,0 +1,2 @@
+export { default as AutocompleteField } from './autocomplete-field';
+export * from './autocomplete-field.types';

package/dist/components/inputs/base-field/base-field.types.d.ts

@@ -33,6 +33,10 @@ export interface BaseFieldProps {
      * The metadata content.
      */
     metadata?: ReactNode;
+    /**
+     * If `true`, the field will display a red asterisk next to the label to indicate it is required.
+     */
+    required?: boolean;
     /**
      * Tooltip to display when the field has label.
      */

package/dist/components/inputs/index.d.ts

@@ -1,4 +1,5 @@
 export * from './autocomplete';
+export * from './autocomplete-field';
 export * from './checkbox';
 export * from './checkbox-field';
 export * from './checkbox-group';

package/dist/components/inputs/input-field/input-field.stories.d.ts

@@ -14,6 +14,7 @@ export declare const CompleteField: Story;
 export declare const Disabled: Story;
 export declare const ReadOnly: Story;
 export declare const Error: Story;
+export declare const Required: Story;
 export declare const FullWidth: Story;
 export declare const CompleteFieldFullWidth: Story;
 export declare const Controlled: Story;

package/dist/components/inputs/internal.d.ts

@@ -1,3 +1,4 @@
+export * from './autocomplete';
 export * from './base-field';
 export * from './base-input';
 export * from './checkbox';

package/dist/components/inputs/select-field/select-field.stories.d.ts

@@ -8,6 +8,7 @@ export declare const WithLabel: Story;
 export declare const WithTooltip: Story;
 export declare const WithHelperText: Story;
 export declare const CompleteField: Story;
+export declare const Required: Story;
 export declare const FullWidth: Story;
 export declare const ControlledSingleSelect: Story;
 export declare const Multiple: Story<string, true>;

package/dist/components/inputs/text-field/text-field.stories.d.ts

@@ -12,6 +12,7 @@ export declare const CompleteField: Story;
 export declare const Disabled: Story;
 export declare const ReadOnly: Story;
 export declare const Error: Story;
+export declare const Required: Story;
 export declare const ManuallyResizable: Story;
 export declare const MinRows: Story;
 export declare const AutoSize: Story;

package/dist/components/lists/listbox-item/listbox-item.types.d.ts

@@ -1,4 +1,4 @@
-import { HTMLAttributes, ReactNode } from 'react';
+import { HTMLAttributes, MouseEventHandler, ReactNode } from 'react';
 export interface ListboxItemProps {
     /**
      * The type of the check mark icon.
@@ -21,6 +21,10 @@ export interface ListboxItemProps {
      * If `true`, the item will be highlighted.
      */
     highlighted?: boolean;
+    /**
+     * The onClick handler for the list box item.
+     */
+    onClick?: MouseEventHandler<HTMLLIElement>;
     /**
      * The role of the list box item.
      * @default 'option'
@@ -30,4 +34,8 @@ export interface ListboxItemProps {
      * If `true`, the item will be selected.
      */
     selected?: boolean;
+    /**
+     * Icon displayed at the start of the item (before the content).
+     */
+    startIcon?: ReactNode;
 }

package/dist/components/lists/listbox-separator/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ListboxSeparator } from './listbox-separator';
+export type { ListboxSeparatorProps } from './listbox-separator.types';