@algolia/satellite 1.10.1 → 1.11.0

package/dist/esm/Actions/Switch/SwitchOption.d.ts

@@ -1,7 +1,16 @@
 import type { ReactNode, VFC } from "react";
 export interface SwitchOptionProps {
+    /**
+     * The value associated with this `SwitchOption`.
+     */
     value: string;
+    /**
+     * Whether this `SwitchOption` is disabled.
+     */
     disabled?: boolean;
+    /**
+     * The content to display for this `SwitchOption`.
+     */
     children: ReactNode;
 }
 export declare const SwitchOption: VFC<SwitchOptionProps>;

package/dist/esm/Actions/Switch/types.d.ts

@@ -1,4 +1,5 @@
-export declare type SwitchSize = "small" | "medium" | "large";
+export declare const switchSizes: readonly ["small", "medium", "large"];
+export declare type SwitchSize = (typeof switchSizes)[number];
 export interface SwitchContextValue {
     name: string;
     value: string;

package/dist/esm/Actions/Switch/types.js

@@ -1 +1 @@
-export {};
+export var switchSizes = ["small", "medium", "large"];

package/dist/esm/Actions/ToggleButton/ToggleButton.d.ts

@@ -2,8 +2,17 @@
 import type { ToggleProps } from "@radix-ui/react-toggle";
 import type { ToggleButtonBaseProps } from "./ToggleButtonBase";
 export declare type ToggleButtonProps = {
+    /**
+     * The pressed state of the `ToggleButton`.
+     */
     pressed?: ToggleProps["pressed"];
+    /**
+     * The default pressed state of the `ToggleButton`.
+     */
     defaultPressed?: ToggleProps["defaultPressed"];
+    /**
+     * The callback function that is called when the pressed state changes.
+     */
     onPressedChange?: ToggleProps["onPressedChange"];
 } & ToggleButtonBaseProps;
 /**

package/dist/esm/Actions/ToggleButton/ToggleButtonBase.d.ts

@@ -1,15 +1,46 @@
-import type { ButtonHTMLAttributes, ReactNode } from "react";
+import type { ReactNode } from "react";
 import type { IconComponentType } from "../../Icons";
 import type { ButtonSize } from "../Button/types";
 declare type IconOnlyToggleButtonBaseProps = {
+    /**
+     * The icon to display for the `ToggleButton`.
+     */
     icon: IconComponentType;
+    /**
+     * The label to display for the `ToggleButton`.
+     */
     label: string;
 };
 declare type TextToggleButtonBaseProps = {
+    /**
+     * The icon to display for the `ToggleButton`.
+     */
     icon?: IconComponentType;
+    /**
+     * The content to display for the `ToggleButton`.
+     */
     children: ReactNode;
 };
-export declare type ToggleButtonBaseProps = Pick<ButtonHTMLAttributes<HTMLButtonElement>, "id" | "className" | "style" | "autoFocus" | "disabled"> & {
+export declare type ToggleButtonBaseProps = {
+    /**
+     * The id of the `ToggleButton`.
+     */
+    id?: string;
+    /**
+     * The class name of the `ToggleButton`.
+     */
+    className?: string;
+    /**
+     * Whether the `ToggleButton` should be auto focused.
+     */
+    autoFocus?: boolean;
+    /**
+     * Whether the `ToggleButton` should be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The size of the `ToggleButton`.
+     */
     size?: ButtonSize;
 } & (IconOnlyToggleButtonBaseProps | TextToggleButtonBaseProps);
 export declare const ToggleButtonBase: import("react").ForwardRefExoticComponent<ToggleButtonBaseProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/esm/Actions/ToggleButton/ToggleButtonBase.js

@@ -36,7 +36,7 @@ export var ToggleButtonBase = /*#__PURE__*/forwardRef(function (props, ref) {
         ref: ref,
         type: "button",
         "aria-label": label,
-        className: cx(stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["inline-flex items-center justify-center gap-1 min-w-min whitespace-nowrap typo-display-body"]))), stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["group/toggle-button rounded focusable-visible disabled:cursor-not-allowed"]))), stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["data-[state=on]:text-accent-600 disabled:!text-grey-300"]))), stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["bg-white data-[state=off]:hover:bg-grey-100 data-[state=on]:bg-accent-100 disabled:!bg-grey-50"]))), stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["border border-grey-200 data-[state=on]:border-accent-600 disabled:!border-grey-200"]))), !isIconOnly && stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["px-3"]))), isIconOnly ? ICON_ONLY_CLASSNAMES[size] : BUTTON_SIZE_CLASSNAMES[size], className)
+        className: cx(stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["inline-flex items-center justify-center gap-1 min-w-min whitespace-nowrap typo-display-body"]))), stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["group/toggle-button rounded focusable-visible focus-visible:border-transparent disabled:cursor-not-allowed"]))), stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["data-[state=on]:text-accent-600 disabled:!text-grey-300"]))), stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["bg-white data-[state=off]:hover:bg-grey-100 data-[state=on]:bg-accent-100 disabled:!bg-grey-50"]))), stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["border border-grey-200 data-[state=on]:border-accent-600 disabled:!border-grey-200"]))), !isIconOnly && stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["px-3"]))), isIconOnly ? ICON_ONLY_CLASSNAMES[size] : BUTTON_SIZE_CLASSNAMES[size], className)
       }, rest), {}, {
         children: [!!Icon && /*#__PURE__*/_jsx(Icon, {
           "aria-hidden": "true",

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

@@ -2,7 +2,9 @@ import type { ToggleGroupItemProps as RadixToggleGroupItemProps, ToggleGroupMult
 import type { FC } 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,
@@ -11,7 +13,9 @@ declare type ToggleGroupSharedProps = {
     disabled?: RadixToggleGroupSharedProps["disabled"];
 };
 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,7 +47,9 @@ 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);
@@ -52,7 +62,9 @@ declare type ToggleGroupComponent = FC<ToggleGroupProps> & {
  * See the [ToggleGroupItem documentation page](https://satellite.algolia.com/components/actions/toggle-group) for more information.
  */
 export declare type ToggleGroupItemProps = ToggleButtonBaseProps & {
-    /** Defines a unique value for the item. */
+    /**
+     * Defines a unique value for the item.
+     */
     value: RadixToggleGroupItemProps["value"];
 };
 /**

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

@@ -1,11 +1,18 @@
 import type { VFC } 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;
 }
 /**

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

@@ -4,16 +4,24 @@ 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.

package/dist/esm/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/esm/Avatars/types.js

@@ -1 +1 @@
-export {};
+export var applicationAvatarSizes = ["small", "medium"];

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

@@ -4,9 +4,13 @@ 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>;

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

@@ -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> {

package/dist/esm/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/esm/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 {};