@algolia/satellite 1.10.2 → 2.0.0-rc.1

package/dist/cjs/Actions/ToggleGroup/ToggleGroup.d.ts

@@ -1,17 +1,21 @@
-import type { ToggleGroupItemProps as RadixToggleGroupItemProps, ToggleGroupMultipleProps as RadixToggleGroupMultipleProps, ToggleGroupImplProps as RadixToggleGroupSharedProps, ToggleGroupSingleProps as RadixToggleGroupSingleProps } from "@radix-ui/react-toggle-group";
-import type { FC } from "react";
+import type { ToggleGroupItemProps as RadixToggleGroupItemProps, ToggleGroupMultipleProps as RadixToggleGroupMultipleProps, ToggleGroupSingleProps as RadixToggleGroupSingleProps } from "@radix-ui/react-toggle-group";
+import type { FC, PropsWithChildren } from "react";
 import type { ToggleButtonBaseProps } from "../ToggleButton/ToggleButtonBase";
 declare type ToggleGroupSharedProps = {
-    /** @ignore */
+    /**
+     * The class name of the `ToggleGroup`.
+     */
     className?: string;
     /**
      * Defines whether the `ToggleGroup` is disabled,
      * preventing the user from interacting with the toggle group and all its items.
      */
-    disabled?: RadixToggleGroupSharedProps["disabled"];
+    disabled?: boolean;
 };
 declare type ToggleGroupSingleProps = {
-    /** Defines whether a single or multiple items can be pressed at a time. */
+    /**
+     * Defines whether a single or multiple items can be pressed at a time.
+     */
     type: "single";
     /**
      * Defines the controlled value of the pressed item.
@@ -23,11 +27,15 @@ declare type ToggleGroupSingleProps = {
      * Use when you do not need to control the state of the items.
      */
     defaultValue?: RadixToggleGroupSingleProps["defaultValue"];
-    /** Defines the event handler called when the pressed state of an item changes. */
+    /**
+     * Defines the event handler called when the pressed state of an item changes.
+     */
     onChange?: RadixToggleGroupSingleProps["onValueChange"];
 };
 declare type ToggleGroupMultipleProps = {
-    /** Defines whether a single or multiple items can be pressed at a time. */
+    /**
+     * Defines whether a single or multiple items can be pressed at a time.
+     */
     type: "multiple";
     /**
      * Defines the controlled value of the pressed items.
@@ -39,22 +47,24 @@ declare type ToggleGroupMultipleProps = {
      * Use when you do not need to control the state of the items.
      */
     defaultValue?: RadixToggleGroupMultipleProps["defaultValue"];
-    /** Defines the event handler called when the pressed state of an item changes. */
+    /**
+     * Defines the event handler called when the pressed state of an item changes.
+     */
     onChange?: RadixToggleGroupMultipleProps["onValueChange"];
 };
 export declare type ToggleGroupProps = ToggleGroupSharedProps & (ToggleGroupSingleProps | ToggleGroupMultipleProps);
-declare type ToggleGroupComponent = FC<ToggleGroupProps> & {
-    Item: FC<ToggleGroupItemProps>;
+declare type ToggleGroupComponent = FC<PropsWithChildren<ToggleGroupProps>> & {
+    Item: FC<PropsWithChildren<ToggleGroupItemProps>>;
 };
 /**
  * The `ToggleGroupItem` component is a toggle group item that allows users to select one or more options.
  *
  * See the [ToggleGroupItem documentation page](https://satellite.algolia.com/components/actions/toggle-group) for more information.
  */
-export declare type ToggleGroupItemProps = ToggleButtonBaseProps & {
+export declare type ToggleGroupItemProps = PropsWithChildren<ToggleButtonBaseProps & {
     /** Defines a unique value for the item. */
     value: RadixToggleGroupItemProps["value"];
-};
+}>;
 /**
  * The `ToggleGroup` component is a toggle group that allows users to select one or more options.
  *

package/dist/cjs/Avatars/ApplicationAvatar/ApplicationAvatar.d.ts

@@ -1,11 +1,18 @@
-import type { VFC } from "react";
+import type { FC } from "react";
 import type { ApplicationAvatarSize, MinimalApplication } from "../types";
 export interface ApplicationAvatarProps {
-    /** A minimal application object containing `applicationID` and `name`. */
+    /**
+     * A minimal application object containing `applicationID` and `name`.
+     */
     application: MinimalApplication;
-    /** @default "medium" */
+    /**
+     * The size of the `ApplicationAvatar`.
+     * @default "medium"
+     */
     size?: ApplicationAvatarSize;
-    /** @ignore */
+    /**
+     * The class name of the `ApplicationAvatar`.
+     */
     className?: string;
 }
 /**
@@ -13,4 +20,4 @@ export interface ApplicationAvatarProps {
  *
  * See the [Application Avatar documentation page](https://satellite.algolia.com/components/images/application-avatar) for more information.
  */
-export declare const ApplicationAvatar: VFC<ApplicationAvatarProps>;
+export declare const ApplicationAvatar: FC<ApplicationAvatarProps>;

package/dist/cjs/Avatars/UserAvatar/UserAvatar.d.ts

@@ -1,23 +1,31 @@
-import type { VFC } from "react";
+import type { FC } from "react";
 import type { MinimalUser } from "../types";
 export declare type UserAvatarLocale = {
     fallbackText?: string;
 };
 export interface UserAvatarProps {
-    /** A minimal user object containing `name`, `email` and `avatar`. */
+    /**
+     * A minimal user object containing `name`, `email` and `avatar`.
+     */
     user: MinimalUser;
     /**
-     * in px
+     * The size of the `UserAvatar`.
      * @default 32
-     * */
+     */
     size?: number;
-    /** @ignore */
-    className?: string;
+    /**
+     * The locale of the `UserAvatar`.
+     * @default { fallbackText: `User's avatar` }"
+     */
     locale?: UserAvatarLocale;
+    /**
+     * The class name of the `UserAvatar`.
+     */
+    className?: string;
 }
 /**
  * The `UserAvatar` component is used as a visual representation of a user.
  *
  * See the [User Avatar documentation page](https://satellite.algolia.com/components/images/user-avatar) for more information.
  */
-export declare const UserAvatar: VFC<UserAvatarProps>;
+export declare const UserAvatar: FC<UserAvatarProps>;

package/dist/cjs/Avatars/types.d.ts

@@ -1,17 +1,39 @@
-export declare type ApplicationAvatarSize = "small" | "medium";
+export declare const applicationAvatarSizes: readonly ["small", "medium"];
+export declare type ApplicationAvatarSize = (typeof applicationAvatarSizes)[number];
 export declare type MinimalApplication = {
+    /**
+     * The application ID.
+     */
     applicationId: string;
+    /**
+     * The name of the application.
+     */
     name?: string;
 };
 declare type UserAvatarWithName = {
+    /**
+     * The name of the user.
+     */
     name: string;
+    /**
+     * The email of the user.
+     */
     email?: string;
 };
 declare type UserAvatarWithEmail = {
+    /**
+     * The email of the user.
+     */
     email: string;
+    /**
+     * The name of the user.
+     */
     name?: string;
 };
 export declare type MinimalUser = (UserAvatarWithName | UserAvatarWithEmail) & {
+    /**
+     * The avatar of the user.
+     */
     avatar?: string;
 };
 export {};

package/dist/cjs/Avatars/types.js

@@ -2,4 +2,6 @@
 
 Object.defineProperty(exports, "__esModule", {
   value: true
-});
+});
+exports.applicationAvatarSizes = void 0;
+var applicationAvatarSizes = exports.applicationAvatarSizes = ["small", "medium"];

package/dist/cjs/Fields/AutoComplete/components/AutoCompleteContext.d.ts

@@ -1,10 +1,10 @@
-import type { PropsWithChildren, VFC } from "react";
+import type { FC, PropsWithChildren } from "react";
 import type { AutoCompleteLocale } from "../types";
 declare type AutoCompleteContextType = {
     locale: Required<AutoCompleteLocale>;
 };
 declare type AutoCompleteProviderProps = PropsWithChildren<AutoCompleteContextType>;
-export declare const AutoCompleteProvider: VFC<AutoCompleteProviderProps>;
+export declare const AutoCompleteProvider: FC<AutoCompleteProviderProps>;
 export declare const useIsInsideAutoComplete: () => boolean;
 export declare const useAutoCompleteLocale: () => Required<AutoCompleteLocale>;
 export {};

package/dist/cjs/Fields/AutoComplete/components/AutoCompleteEmptyState.d.ts

@@ -1,12 +1,16 @@
-import type { ReactNode, VFC } from "react";
+import type { FC, ReactNode } from "react";
 import type { MedallionVariant } from "../../../Helpers";
 import { type IconComponentType } from "../../../Icons";
 export interface AutoCompleteEmptyStateProps {
     icon?: IconComponentType;
     variant?: MedallionVariant;
-    /** Descriptive title for state */
+    /**
+     * Descriptive title for state
+     */
     title: ReactNode;
-    /** Optional description to explain why the screen is empty or define next steps */
+    /**
+     * Optional description to explain why the screen is empty or define next steps
+     */
     description?: ReactNode;
 }
-export declare const AutoCompleteEmptyState: VFC<AutoCompleteEmptyStateProps>;
+export declare const AutoCompleteEmptyState: FC<AutoCompleteEmptyStateProps>;

package/dist/cjs/Fields/AutoComplete/components/DefaultOptionItem.d.ts

@@ -1,6 +1,6 @@
-import type { VFC } from "react";
+import type { FC } from "react";
 import type { AutoCompleteLocale, OptionItemProps } from "../types";
 export declare type DefaultOptionItemProps = OptionItemProps & {
     locale?: AutoCompleteLocale;
 };
-export declare const DefaultOptionItem: VFC<DefaultOptionItemProps>;
+export declare const DefaultOptionItem: FC<DefaultOptionItemProps>;

package/dist/cjs/Fields/AutoComplete/types.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentType, FocusEventHandler, ForwardedRef, ReactNode, RefObject } from "react";
+import type { ComponentType, FocusEventHandler, ForwardedRef, PropsWithChildren, ReactNode, RefObject } from "react";
 import type { IconComponentType } from "../../Icons";
 export declare type AutoCompleteVariant = "medium" | "large";
 export declare type AutoCompleteLocale = {
@@ -10,70 +10,209 @@ export declare type AutoCompleteLocale = {
     optionItemPrefix?: (multiple: boolean) => string;
 };
 export interface AutoCompleteBaseProps<T extends Option = Option> {
+    /**
+     * The id of the `AutoComplete`.
+     */
     id?: string;
+    /**
+     * The aria-label of the `AutoComplete`.
+     */
     "aria-label"?: string;
+    /**
+     * The label id of the `AutoComplete`.
+     */
     labelId?: string;
+    /**
+     * The icon of the `AutoComplete`.
+     */
     icon?: IconComponentType;
+    /**
+     * The name of the `AutoComplete`.
+     */
     name?: string;
+    /**
+     * Whether the `AutoComplete` is required.
+     * @default false
+     */
     required?: boolean;
+    /**
+     * The class name of the `AutoComplete`.
+     */
     className?: string;
+    /**
+     * The class name of the `AutoComplete` values.
+     */
     valuesClassName?: string;
+    /**
+     * The class name of the `AutoComplete` menu.
+     */
     menuClassName?: string;
+    /**
+     * The variant of the `AutoComplete`.
+     * @default "medium"
+     */
     variant?: AutoCompleteVariant;
+    /**
+     * The placeholder of the `AutoComplete`.
+     */
     placeholder?: string;
+    /**
+     * Whether the `AutoComplete` is disabled.
+     * @default false
+     */
     disabled?: boolean;
+    /**
+     * Whether the `AutoComplete` should be focused.
+     */
     autoFocus?: boolean;
+    /**
+     * The options of the `AutoComplete`.
+     */
     options?: T[];
+    /**
+     * The current value of the `AutoComplete`.
+     */
     inputValue?: string;
+    /**
+     * The callback function that is called when the text of the `AutoComplete` changes.
+     */
     onTextChange?: (text: string) => any;
+    /**
+     * The callback function that is called when the `AutoComplete` gains focus.
+     */
     onFocus?: FocusEventHandler<HTMLInputElement>;
+    /**
+     * The callback function that is called when the `AutoComplete` loses focus.
+     */
     onBlur?: FocusEventHandler<HTMLInputElement>;
+    /**
+     * Whether the `AutoComplete` is creatable.
+     */
     creatable?: boolean;
+    /**
+     * Whether the `AutoComplete` should clear the input value.
+     */
     clearable?: boolean;
+    /**
+     * Whether the `AutoComplete` should select the option on blur.
+     */
     selectOnBlur?: boolean;
+    /**
+     * The maximum number of results to display in the `AutoComplete` menu.
+     * @default 7
+     */
     maxResults?: number;
+    /**
+     * The function used to create options from the input value.
+     */
     createFromInputValue?: CreateFromInputValue<T>;
+    /**
+     * The keys used to split the input value into multiple options.
+     */
     separatorKeys?: string[];
+    /**
+     * The template used to render the value of the `AutoComplete`.
+     */
     renderValueTemplate?: (args: RenderValueTemplateArgs<T>) => JSX.Element;
+    /**
+     * The empty state of the `AutoComplete`.
+     */
     emptyState?: ReactNode;
+    /**
+     * The footer of the `AutoComplete` menu.
+     */
     menuFooter?: ReactNode;
+    /**
+     * The component used to render the option items.
+     */
     optionItemComponent?: OptionItemComponentType<T>;
-    /** Keep the input on a single line */
+    /**
+     * Whether the input should be kept on a single line.
+     */
     noWrap?: boolean;
+    /**
+     * The end item of the `AutoComplete`.
+     */
     endItem?: ReactNode;
     /**
-     * `medium` will display about 5 results in the dropdown; use `large` variant to display more
+     * The size of the `AutoComplete` menu.
+     * `medium` will display about 5 results in the dropdown; use `large` variant to display more.
      * @default "medium"
      */
     menuSize?: "medium" | "large";
+    /**
+     * The locale of the `AutoComplete`.
+     */
     locale?: AutoCompleteLocale;
-    /** @deprecated Use of this props is discouraged and is only there for backwards compatibility */
+    /**
+     * @deprecated Use of this props is discouraged and is only there for backwards compatibility.
+     */
     internalsRef?: ForwardedRef<AutoCompleteInternals>;
 }
 export interface AutoCompleteInternals {
-    /** Current internal inputValue */
+    /**
+     * Current internal inputValue
+     */
     inputValue: string;
-    /** RefObject containing the underlying combobox input element */
+    /**
+     * RefObject containing the underlying combobox input element
+     */
     inputRef: RefObject<HTMLInputElement>;
 }
 export interface AutoCompleteSingleProps<T extends Option = Option> extends AutoCompleteBaseProps<T> {
+    /**
+     * Whether the `AutoComplete` is a multiple selection.
+     */
     multiple?: false;
+    /**
+     * The value of the `AutoComplete`.
+     */
     value?: T;
+    /**
+     * The callback function that is called when the value of the `AutoComplete` changes.
+     */
     onChange: (option: T | null) => void;
 }
 export interface AutoCompleteMultiProps<T extends Option = Option> extends AutoCompleteBaseProps<T> {
+    /**
+     * Whether the `AutoComplete` is a multiple selection.
+     */
     multiple: true;
+    /**
+     * The value of the `AutoComplete`.
+     */
     value?: T[];
+    /**
+     * The callback function that is called when the value of the `AutoComplete` changes.
+     */
     onChange: (option: T[] | null) => void;
 }
 export declare type AutoCompleteProps<T extends Option = Option> = AutoCompleteMultiProps<T> | AutoCompleteSingleProps<T>;
 declare type OptionsValue = string | number | boolean;
 export interface Option {
+    /**
+     * The value of the `Option`.
+     */
     value: OptionsValue;
+    /**
+     * The label of the `Option`.
+     */
     label: string;
+    /**
+     * The metadata of the `Option`.
+     */
     metadata?: string[];
+    /**
+     * Whether the `Option` is new.
+     */
     new?: boolean;
+    /**
+     * Whether the `Option` is disabled.
+     */
     disabled?: boolean;
+    /**
+     * Whether the `Option` should bypass the needle match.
+     */
     bypassNeedleMatch?: boolean;
 }
 export interface OptionItemProps<T extends Option = Option> {
@@ -82,7 +221,7 @@ export interface OptionItemProps<T extends Option = Option> {
     inputValue: string;
     highlighted: boolean;
 }
-export declare type OptionItemComponentType<T extends Option = Option> = ComponentType<OptionItemProps<T>>;
+export declare type OptionItemComponentType<T extends Option = Option> = ComponentType<PropsWithChildren<OptionItemProps<T>>>;
 export interface OptionRendererParams {
     multiple: boolean;
     inputValue: string;

package/dist/cjs/Fields/Checkbox/Checkbox.d.ts

@@ -1,13 +1,16 @@
 import type { HTMLAttributes, InputHTMLAttributes } from "react";
 declare type CheckboxCustomProps = {
     /**
-     * `Checkbox` text position
+     * The text position of the `Checkbox`.
      * @default right
      */
     textPosition?: "left" | "right";
+    /**
+     * Whether the `Checkbox` is indeterminate.
+     */
     indeterminate?: boolean;
     /**
-     * Color of the `Checkbox`
+     * The color of the `Checkbox` when it is checked.
      * @default accent.600
      */
     checkedColor?: string;

package/dist/cjs/Fields/DateInput/DateInput.d.ts

@@ -0,0 +1,47 @@
+/// <reference types="react" />
+import type { DatePickerProps } from "../DatePicker";
+import type { InputProps } from "../Input";
+declare type DateValue = Date | null;
+export declare type DateInputLocale = {
+    tooltip?: (open: boolean) => string;
+};
+export interface DateInputProps extends Omit<InputProps, "type" | "defaultValue" | "value" | "onChange" | "locale" | "endItem"> {
+    /**
+     * Defines the default value of the `DateInput`.
+     */
+    defaultValue?: DateValue;
+    /**
+     * Defines the value of the `DateInput`.
+     */
+    value?: DateValue;
+    /**
+     * Defines the function to call when the `DateInput` value changes.
+     */
+    onChange?: (value: DateValue) => void;
+    /**
+     * Defines the format of the `DateInput` value.
+     * @default "MM/dd/yyyy"
+     */
+    valueFormat?: string;
+    /**
+     * Defines the separator of the `DateInput` value.
+     * @default "/"
+     */
+    separator?: string;
+    /**
+     * Defines the locale of the `DateInput`.
+     */
+    locale?: DateInputLocale;
+    /**
+     * Defines the props to pass to the `DatePicker`.
+     */
+    datePickerProps?: Omit<DatePickerProps, "value" | "onChange" | "renderTarget">;
+}
+/**
+ * The `DateInput` component provides a date input field with an integrated date picker.
+ * It allows users to either type a date manually or select one from a calendar interface.
+ *
+ * See the [DateInput documentation page](https://satellite.algolia.com/components/forms/date-input) for more information.
+ */
+export declare const DateInput: import("react").ForwardRefExoticComponent<DateInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export {};