@algolia/satellite 1.10.2 → 2.0.0-rc.1

package/dist/esm/Fields/DatePicker/DateRangePicker/DateRangePicker.d.ts

@@ -1,4 +1,4 @@
-import type { Dispatch, ReactNode, VFC } from "react";
+import type { Dispatch, FC, ReactNode } from "react";
 import type { DatePickerCalendarProps } from "../components/Calendar";
 import type { SharedDatePickerProps } from "../types";
 import type { DateRangePickerDisplayProps } from "./DateRangePickerDisplay";
@@ -18,17 +18,53 @@ interface RenderTargetParams {
     isOpen: boolean;
 }
 export declare type DateRangePickerProps = {
+    /**
+     * The id of the `DateRangePicker`.
+     */
     id?: string;
+    /**
+     * The range of the `DateRangePicker`.
+     */
     range: DateRangePickerTimeRange | null;
+    /**
+     * The ranges to only display in the `DateRangePicker`.
+     */
     displayOnlyRanges?: DateRangePickerTimeRange[];
+    /**
+     * The props of the `DateRangePicker` calendar.
+     */
     calendarProps?: Pick<DatePickerCalendarProps, "fromMonth" | "toMonth" | "disabled" | "numberOfMonths">;
+    /**
+     * The reducer of the `DateRangePicker`.
+     */
     stateReducer?: (state: DateRangePickerReducerState, action: DateRangePickerReducerAction, defaultReducer: typeof dateRangePickerReducer) => DateRangePickerReducerState;
+    /**
+     * The initial state of the `DateRangePicker`.
+     */
     initialState?: Partial<DateRangePickerReducerState>;
+    /**
+     * The callback function that is called when the `DateRangePicker` is changed.
+     */
     onAction?: (action: DateRangePickerReducerAction, state: DateRangePickerReducerState) => void;
+    /**
+     * The callback function that is called to validate the `DateRangePicker`.
+     */
     validate?: (state: DateRangePickerReducerState) => Error[] | null;
+    /**
+     * The callback function that is called to render the target of the `DateRangePicker`.
+     */
     renderTarget?: (args: RenderTargetParams) => ReactNode;
+    /**
+     * The callback function that is called to render the left footer of the `DateRangePicker`.
+     */
     renderLeftFooter?: (args: LeftFooterComponentArgs) => ReactNode;
+    /**
+     * The callback function that is called to render the right panel of the `DateRangePicker`.
+     */
     renderRightPanel?: (args: RightSidePanelComponentArgs) => ReactNode;
+    /**
+     * The size of the `DateRangePicker` button.
+     */
     buttonSize?: DateRangePickerDisplayProps["buttonSize"];
 } & SharedDatePickerProps;
 /**
@@ -36,5 +72,5 @@ export declare type DateRangePickerProps = {
  *
  * See the [Date Range Picker documentation page](https://satellite.algolia.com/layouts/date-range-picker) for more information.
  */
-export declare const DateRangePicker: VFC<DateRangePickerProps>;
+export declare const DateRangePicker: FC<DateRangePickerProps>;
 export {};

package/dist/esm/Fields/DatePicker/DateRangePicker/DateRangePicker.js

@@ -188,6 +188,7 @@ export var DateRangePicker = function DateRangePicker(_ref2) {
       evt.preventDefault();
       (_cancelElementRef$cur = cancelElementRef.current) === null || _cancelElementRef$cur === void 0 || _cancelElementRef$cur.focus();
     },
+    anchor: props.popoverAnchor,
     trigger: renderTarget ? renderTarget({
       toggle: state.show ? handleClose : handleOpen,
       isOpen: state.show

package/dist/esm/Fields/DatePicker/components/Calendar.d.ts

@@ -1,4 +1,4 @@
-import type { VFC } from "react";
+import type { FC } from "react";
 import type { DayPickerDefaultProps, DayPickerRangeProps, DayPickerSingleProps } from "react-day-picker";
 import type { WithRequiredProperty } from "../../../types";
 import type { DatePickerLocale } from "../types";
@@ -13,5 +13,5 @@ export declare type EditableYearProps = {
 export declare type DatePickerCalendarProps = Omit<Omit<DayPickerSingleProps | DayPickerRangeProps | DayPickerDefaultProps, "locale">, ExcludedDayPickerProps> & EditableYearProps & {
     locale: WithRequiredProperty<DatePickerLocale, "nextMonth" | "previousMonth">;
 };
-export declare const DatePickerCalendar: VFC<DatePickerCalendarProps>;
+export declare const DatePickerCalendar: FC<DatePickerCalendarProps>;
 export {};

package/dist/esm/Fields/DatePicker/components/Footer.d.ts

@@ -1,5 +1,5 @@
-import type { ReactNode, VFC } from "react";
+import type { FC, ReactNode } from "react";
 export declare type DatePickerFooterProps = {
     children: ReactNode;
 };
-export declare const DatePickerFooter: VFC<DatePickerFooterProps>;
+export declare const DatePickerFooter: FC<DatePickerFooterProps>;

package/dist/esm/Fields/DatePicker/components/NavBar.d.ts

@@ -1,4 +1,4 @@
-import type { VFC } from "react";
+import type { FC } from "react";
 import type { CaptionProps } from "react-day-picker";
 import type { WithRequiredProperty } from "../../../types";
 import type { DatePickerLocale } from "../types";
@@ -6,4 +6,4 @@ import type { EditableYearProps } from "./Calendar";
 export declare type NavBarProps = CaptionProps & EditableYearProps & {
     locale: WithRequiredProperty<DatePickerLocale, "nextMonth" | "previousMonth">;
 };
-export declare const NavBar: VFC<NavBarProps>;
+export declare const NavBar: FC<NavBarProps>;

package/dist/esm/Fields/DatePicker/components/Popover.d.ts

@@ -5,6 +5,7 @@ export interface DatePickerPopoverProps {
     onOpenChange: (open: boolean) => void;
     trigger: ReactNode;
     children: ReactNode;
+    anchor?: ReactNode;
     placement?: Popover.PopoverContentProps["side"] | `${Popover.PopoverContentProps["side"] & string}-${Popover.PopoverContentProps["align"] & string}`;
     onOpenAutoFocus?: (event: Event) => void;
     title?: string;

package/dist/esm/Fields/DatePicker/components/Popover.js

@@ -11,6 +11,7 @@ export var DatePickerPopover = function DatePickerPopover(_ref) {
     onOpenChange = _ref.onOpenChange,
     trigger = _ref.trigger,
     children = _ref.children,
+    anchor = _ref.anchor,
     _ref$placement = _ref.placement,
     placement = _ref$placement === void 0 ? "bottom-start" : _ref$placement,
     onOpenAutoFocus = _ref.onOpenAutoFocus,
@@ -27,7 +28,10 @@ export var DatePickerPopover = function DatePickerPopover(_ref) {
     children: [/*#__PURE__*/_jsx(Popover.Trigger, {
       asChild: true,
       children: trigger
-    }), createPortal( /*#__PURE__*/_jsx(Popover.Content, {
+    }), anchor ? /*#__PURE__*/_jsx(Popover.Anchor, {
+      asChild: true,
+      children: anchor
+    }) : null, createPortal( /*#__PURE__*/_jsx(Popover.Content, {
       side: side,
       sideOffset: 16,
       align: align,

package/dist/esm/Fields/DatePicker/components/SidePanel.d.ts

@@ -1,5 +1,5 @@
-import type { ReactNode, VFC } from "react";
+import type { FC, ReactNode } from "react";
 export declare type DatePickerSidePanelProps = {
     children: ReactNode;
 };
-export declare const DatePickerSidePanel: VFC<DatePickerSidePanelProps>;
+export declare const DatePickerSidePanel: FC<DatePickerSidePanelProps>;

package/dist/esm/Fields/DatePicker/types.d.ts

@@ -1,4 +1,5 @@
 import type { Locale as DateFnsLocale } from "date-fns";
+import type { ReactNode } from "react";
 import type { DatePickerPopoverProps } from "./components";
 export declare type DatePickerLocale = {
     /** The date-fns locale object used to localize dates. Defaults to* `en-US`. */
@@ -17,11 +18,31 @@ export declare type DatePickerLocale = {
     title?: string;
 };
 export declare type SharedDatePickerProps = {
+    /**
+     * The placement of the `DatePicker`/`DateRangePicker` modal.
+     * @todo Rename this prop to `side`/`align` in the next major version
+     */
     modalPlacement?: DatePickerPopoverProps["placement"];
+    /**
+     * The anchor element for the `DatePicker`/`DateRangePicker` popover.
+     */
+    popoverAnchor?: ReactNode;
+    /**
+     * The locale of the `DatePicker`/`DateRangePicker`.
+     */
     locale?: DatePickerLocale;
 } & ({
+    /**
+     * Whether the year is editable.
+     */
     editableYear?: false;
 } | {
+    /**
+     * Whether the year is editable.
+     */
     editableYear: true;
+    /**
+     * The years to display in the `DatePicker`/`DateRangePicker`.
+     */
     years?: number[];
 });

package/dist/esm/Fields/Dropzone/Dropzone.d.ts

@@ -5,23 +5,102 @@ export declare type DropzoneLocale = {
     placeholder?: (multiple: boolean) => string;
 };
 export interface DropzoneBaseProps {
+    /**
+     * The id of the `Dropzone`.
+     */
     id?: string;
+    /**
+     * The callback function that is called when files are added to the `Dropzone`.
+     */
     onChange?(acceptedFiles: File[], fileRejections: FileRejection[]): void;
+    /**
+     * The placeholder of the `Dropzone`.
+     */
     placeholder?: string;
-    /** @default false */
+    /**
+     * Whether the `Dropzone` is clearable.
+     * @default false
+     */
     clearable?: boolean;
-    /** @ignore */
+    /**
+     * The class name of the `Dropzone`.
+     */
     className?: string;
-    /** @default false */
+    /**
+     * Whether the `Dropzone` allows multiple files.
+     * @default false
+     */
     multiple?: boolean;
-    /** @default false */
+    /**
+     * Whether the `Dropzone` is required.
+     * @default false
+     */
     required?: boolean;
+    /**
+     * The locale of the `Dropzone`.
+     */
     locale?: DropzoneLocale;
+    /**
+     * The accepted file types of the `Dropzone`.
+     */
+    accept?: ReactDropZoneProps["accept"];
+    /**
+     * The minimum file size of the `Dropzone`.
+     */
+    minSize?: ReactDropZoneProps["minSize"];
+    /**
+     * The maximum file size of the `Dropzone`.
+     */
+    maxSize?: ReactDropZoneProps["maxSize"];
+    /**
+     * The maximum number of files of the `Dropzone`.
+     */
+    maxFiles?: ReactDropZoneProps["maxFiles"];
+    /**
+     * Whether the `Dropzone` prevents the drop event on the document.
+     */
+    preventDropOnDocument?: ReactDropZoneProps["preventDropOnDocument"];
+    /**
+     * Whether the `Dropzone` prevents the click event on the document.
+     */
+    noClick?: ReactDropZoneProps["noClick"];
+    /**
+     * Whether the `Dropzone` prevents the keyboard event on the document.
+     */
+    noKeyboard?: ReactDropZoneProps["noKeyboard"];
+    /**
+     * Whether the `Dropzone` prevents the drag event on the document.
+     */
+    noDrag?: ReactDropZoneProps["noDrag"];
+    /**
+     * Whether the `Dropzone` prevents the drag events bubbling.
+     */
+    noDragEventsBubbling?: ReactDropZoneProps["noDragEventsBubbling"];
+    /**
+     * Whether the `Dropzone` is disabled.
+     */
+    disabled?: ReactDropZoneProps["disabled"];
+    /**
+     * The callback function that is called to get the files from the event.
+     */
+    getFilesFromEvent?: ReactDropZoneProps["getFilesFromEvent"];
+    /**
+     * The callback function that is called when the file dialog is canceled.
+     */
+    onFileDialogCancel?: ReactDropZoneProps["onFileDialogCancel"];
+    /**
+     * The callback function that is called when the file dialog is opened.
+     */
+    onFileDialogOpen?: ReactDropZoneProps["onFileDialogOpen"];
+    /**
+     * The callback function that is called to validate the file.
+     */
+    validator?: ReactDropZoneProps["validator"];
 }
-export declare type DropzoneProps = DropzoneBaseProps & Omit<ReactDropZoneProps, "onDrop" | "onDropAccepted" | "onDropRejected" | "multiple">;
+export declare type DropzoneProps = DropzoneBaseProps;
 /**
  * The `Dropzone` component is used to upload files.
  *
  * See the [Dropzone documentation page](https://satellite.algolia.com/components/forms/dropzone) for more information.
  */
-export declare const Dropzone: import("react").ForwardRefExoticComponent<DropzoneBaseProps & Omit<ReactDropZoneProps, "onDrop" | "multiple" | "onDropAccepted" | "onDropRejected"> & import("react").RefAttributes<HTMLInputElement>>;
+export declare const Dropzone: import("react").ForwardRefExoticComponent<DropzoneBaseProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/esm/Fields/Field/Field.d.ts

@@ -1,24 +1,47 @@
-import { type ReactChild, type ReactNode, type VFC } from "react";
+import { type FC, type ReactChild, type ReactNode } from "react";
 import type { FieldState } from "./FieldContext";
 export interface FieldProps {
-    /** @ignore */
+    /**
+     * The class name of the `Field`.
+     */
     className?: string;
-    /** Define a label to display above the nested input. */
+    /**
+     * Define a label to display above the nested input.
+     */
     label?: ReactChild;
-    /** Define the `id` of the label. */
+    /**
+     * Define the `id` of the label.
+     */
     labelId?: string;
-    /** Define the `id` of the input used by the label. */
+    /**
+     * Define the `id` of the input used by the label.
+     */
     labelFor?: string;
-    /** Define an helpful description to show below the `Field`. */
+    /**
+     * Define an helpful description to show below the `Field`.
+     */
     description?: ReactNode;
-    /** Define the state of the `Field`. */
+    /**
+     * Define the state of the `Field`.
+     */
     state?: FieldState;
-    /** Define if the `Field` should be displayed inline. */
+    /**
+     * Define if the `Field` should be displayed inline.
+     * @default false
+     */
     inline?: boolean;
-    /** Define if the `Field` is required. */
+    /**
+     * Define if the `Field` is required.
+     */
     required?: boolean;
-    /** Define the visibility of the required indicator. */
+    /**
+     * Define the visibility of the required indicator.
+     * @default false
+     */
     hideRequiredIndicator?: boolean;
+    /**
+     * The children of the `Field`.
+     */
     children: ReactNode;
 }
 /**
@@ -26,4 +49,4 @@ export interface FieldProps {
  *
  * See the [Field documentation page](https://satellite.algolia.com/components/forms/field) for more information.
  */
-export declare const Field: VFC<FieldProps>;
+export declare const Field: FC<FieldProps>;

package/dist/esm/Fields/Form/Form.d.ts

@@ -1,4 +1,4 @@
-import type { FC, HTMLAttributes, ReactNode, VFC } from "react";
+import type { FC, HTMLAttributes, PropsWithChildren, ReactNode } from "react";
 import type { ButtonProps } from "../../Actions";
 import type { AlertProps } from "../../Indicators";
 import type { FormContextField } from "./FormContext";
@@ -12,7 +12,7 @@ export interface FormErrorMessageProps extends Omit<AlertProps, "children"> {
     locale?: FormLocale;
     extraErrors?: string[];
 }
-export declare const FormErrorMessage: VFC<FormErrorMessageProps>;
-export declare const Form: FC<FormProps>;
-export declare const FormSubmit: FC<ButtonProps>;
-export declare const FormReset: FC<ButtonProps>;
+export declare const FormErrorMessage: FC<FormErrorMessageProps>;
+export declare const Form: FC<PropsWithChildren<FormProps>>;
+export declare const FormSubmit: FC<PropsWithChildren<ButtonProps>>;
+export declare const FormReset: FC<PropsWithChildren<ButtonProps>>;

package/dist/esm/Fields/Form/stories/Complex.js

@@ -13,7 +13,7 @@ import * as yup from "yup";
 import { z } from "zod";
 import stl from "../../../styles/helpers/satellitePrefixer";
 import { Field } from "../../Field";
-import { AutoComplete, Checkbox, DatePicker, Dropzone } from "../../index";
+import { AutoComplete, Checkbox, DateInput, Dropzone } from "../../index";
 import { Input } from "../../Input";
 import { RadioButton, RadioGroup } from "../../RadioGroup";
 import { RangeSlider } from "../../RangeSlider";
@@ -98,6 +98,10 @@ var zodSchema = z.object({
         message: "You must specify a birthday"
       };
     }
+  }).refine(function (val) {
+    return val < now;
+  }, {
+    message: "You must specify a birthday in the past"
   }),
   age: z.coerce.number().min(1, {
     message: "You must specify an age"
@@ -367,14 +371,16 @@ export var RHFComplexComponent = function RHFComplexComponent() {
               description: "Please specify your birthday",
               state: getFieldState("birthday"),
               className: stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["w-full"]))),
-              children: /*#__PURE__*/_jsx(DatePicker, _objectSpread({
+              children: /*#__PURE__*/_jsx(DateInput, _objectSpread({
                 id: "birthday",
-                calendarProps: {
-                  disabled: {
-                    after: now
+                required: true,
+                datePickerProps: {
+                  calendarProps: {
+                    disabled: {
+                      after: now
+                    }
                   }
-                },
-                required: true
+                }
               }, field))
             });
           }
@@ -573,7 +579,9 @@ var yupSchema = yup.object({
     value: yup.string()
   })).min(1, "You must specify at least one job position"),
   employmentStatus: yup.string().oneOf(employmentStatuses).required("You must specify an employment status"),
-  birthday: yup.date().required("You must specify a birthday"),
+  birthday: yup.date().required("You must specify a birthday").test("birthday", "You must specify a birthday in the past", function (value) {
+    return value < now;
+  }),
   age: yup.number().min(18, "You must be at least 18 years old").max(100, "You must be at most 100 years old").required("You must specify an age"),
   interest: yup.number().min(5, "Your level of interest must be at least 5").required(),
   idealLocation: yup.array(yup.number().min(10, "Your minimum ideal location must be 10 km").max(40, "Your maximum ideal location must be 40 km").required()).required(),
@@ -764,14 +772,16 @@ export var FormikComplexComponent = function FormikComplexComponent() {
           description: "Please specify your birthday",
           state: getFieldState("birthday"),
           className: stl(_templateObject38 || (_templateObject38 = _taggedTemplateLiteral(["w-full"]))),
-          children: /*#__PURE__*/_jsx(DatePicker, {
+          children: /*#__PURE__*/_jsx(DateInput, {
             id: "birthday",
-            calendarProps: {
-              disabled: {
-                after: now
+            required: true,
+            datePickerProps: {
+              calendarProps: {
+                disabled: {
+                  after: now
+                }
               }
             },
-            required: true,
             onChange: function onChange(value) {
               return formik.setFieldValue("birthday", value);
             },

package/dist/esm/Fields/Input/Input.d.ts

@@ -8,15 +8,32 @@ export declare type InputPropsLocale = {
     decrement?: string;
 };
 export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "checked" | "defaultChecked"> {
+    /**
+     * Define the type of the `Input`.
+     * @default "text"
+     */
     type?: "text" | "number" | "search" | "email" | "password";
+    /**
+     * Define the variant of the `Input`.
+     * @default "medium"
+     */
     variant?: InputVariant;
+    /**
+     * Define the start icon of the `Input`.
+     */
     startIcon?: IconComponentType;
+    /**
+     * Define the end item of the `Input`.
+     */
     endItem?: ReactNode;
     /**
-     * Define whether or not a "clear input" x button should show on hover
+     * Define whether or not a "clear input" x button should show on hover.
      * @default false
      */
     clearable?: boolean;
+    /**
+     * Define the locale of the `Input`.
+     */
     locale?: InputPropsLocale;
 }
 /**

package/dist/esm/Fields/Input/Input.js

@@ -109,9 +109,11 @@ export var Input = /*#__PURE__*/forwardRef(function (_ref, externalRef) {
   return /*#__PURE__*/_jsxs("div", {
     className: cx(stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n            input group\n            ", "\n            ", "\n          "])), focused && "focusable-show", disabled && "input-disabled"), VARIANT_CLASSNAMES[variant], STATUS_CLASSNAMES[status], className),
     style: style,
-    onClick: function onClick() {
-      var _inputRef$current;
-      (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
+    onClick: function onClick(e) {
+      if (e.currentTarget.contains(e.target)) {
+        var _inputRef$current;
+        (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
+      }
     },
     children: [Icon && /*#__PURE__*/_jsx(Icon, {
       className: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["ml-4 shrink-0 ", ""])), disabled ? "text-grey-200" : focused ? "text-accent-600" : "text-grey-500"),

package/dist/esm/Fields/RadioGroup/RadioButton.d.ts

@@ -1,3 +1,69 @@
 import type { HTMLAttributes, InputHTMLAttributes } from "react";
-export declare type RadioButtonProps = HTMLAttributes<HTMLInputElement> & Pick<InputHTMLAttributes<HTMLInputElement>, "value" | "name" | "checked" | "defaultChecked" | "onChange" | "required" | "autoFocus" | "disabled">;
-export declare const RadioButton: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLInputElement> & Pick<InputHTMLAttributes<HTMLInputElement>, "name" | "value" | "defaultChecked" | "autoFocus" | "onChange" | "disabled" | "checked" | "required"> & import("react").RefAttributes<HTMLInputElement>>;
+export declare type RadioButtonProps = HTMLAttributes<HTMLInputElement> & {
+    /**
+     * The value of the `RadioButton`.
+     */
+    value?: InputHTMLAttributes<HTMLInputElement>["value"];
+    /**
+     * The name of the `RadioButton`.
+     */
+    name?: InputHTMLAttributes<HTMLInputElement>["name"];
+    /**
+     * Whether the `RadioButton` is checked.
+     */
+    checked?: InputHTMLAttributes<HTMLInputElement>["checked"];
+    /**
+     * The default checked state of the `RadioButton`.
+     */
+    defaultChecked?: InputHTMLAttributes<HTMLInputElement>["defaultChecked"];
+    /**
+     * Event handler for when the `RadioButton`'s value changes.
+     */
+    onChange?: InputHTMLAttributes<HTMLInputElement>["onChange"];
+    /**
+     * Whether the `RadioButton` is required.
+     */
+    required?: InputHTMLAttributes<HTMLInputElement>["required"];
+    /**
+     * Whether the `RadioButton` should automatically receive focus when the page loads.
+     */
+    autoFocus?: InputHTMLAttributes<HTMLInputElement>["autoFocus"];
+    /**
+     * Whether the `RadioButton` is disabled.
+     */
+    disabled?: InputHTMLAttributes<HTMLInputElement>["disabled"];
+};
+export declare const RadioButton: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLInputElement> & {
+    /**
+     * The value of the `RadioButton`.
+     */
+    value?: InputHTMLAttributes<HTMLInputElement>["value"];
+    /**
+     * The name of the `RadioButton`.
+     */
+    name?: InputHTMLAttributes<HTMLInputElement>["name"];
+    /**
+     * Whether the `RadioButton` is checked.
+     */
+    checked?: InputHTMLAttributes<HTMLInputElement>["checked"];
+    /**
+     * The default checked state of the `RadioButton`.
+     */
+    defaultChecked?: InputHTMLAttributes<HTMLInputElement>["defaultChecked"];
+    /**
+     * Event handler for when the `RadioButton`'s value changes.
+     */
+    onChange?: InputHTMLAttributes<HTMLInputElement>["onChange"];
+    /**
+     * Whether the `RadioButton` is required.
+     */
+    required?: InputHTMLAttributes<HTMLInputElement>["required"];
+    /**
+     * Whether the `RadioButton` should automatically receive focus when the page loads.
+     */
+    autoFocus?: InputHTMLAttributes<HTMLInputElement>["autoFocus"];
+    /**
+     * Whether the `RadioButton` is disabled.
+     */
+    disabled?: InputHTMLAttributes<HTMLInputElement>["disabled"];
+} & import("react").RefAttributes<HTMLInputElement>>;

package/dist/esm/Fields/RadioGroup/RadioGroup.d.ts

@@ -1,30 +1,47 @@
-import type { ForwardRefExoticComponent, ReactNode, RefAttributes, VFC } from "react";
+import type { ForwardRefExoticComponent, ReactNode, RefAttributes } from "react";
+import { RadioGroupItem } from "./RadioGroupItem";
 export interface RadioGroupProps {
+    /**
+     * The id of the `RadioGroup`.
+     */
     id?: string;
-    /** @ignore */
+    /**
+     * The class name of the `RadioGroup`.
+     */
     className?: string;
+    /**
+     * The name of the `RadioGroup`.
+     */
     name?: string;
+    /**
+     * The value of the `RadioGroup`.
+     */
     value: string;
+    /**
+     * Whether the `RadioGroup` is disabled.
+     */
     disabled?: boolean;
+    /**
+     * Whether the `RadioGroup` is required.
+     */
     required?: boolean;
     /**
-     * `RadioGroupItem` text position
+     * The text position of the `RadioGroupItem`.
      * @default left
      */
     textPosition?: "left" | "right";
+    /**
+     * Event handler for when the `RadioGroup`'s value changes.
+     */
     onChange: (newValue: string) => void;
-    children?: ReactNode;
-}
-export interface RadioGroupItemProps {
-    value: string;
-    disabled?: boolean;
-    required?: boolean;
+    /**
+     * The children of the `RadioGroup`.
+     */
     children?: ReactNode;
 }
 export declare type RadioGroupComponent = ForwardRefExoticComponent<RadioGroupProps & RefAttributes<HTMLFieldSetElement>> & {
     Item: typeof RadioGroupItem;
 };
-export declare const RadioGroupItem: VFC<RadioGroupItemProps>;
 /**
  * The `RadioGroup` component presents mutually exclusive options, allowing users to make a single selection from a list.
  *