@algolia/satellite 2.0.0-rc.1 → 2.0.0-rc.3

package/dist/esm/Fields/{Toggle/Toggle.tailwind.js → Switch/Switch.tailwind.js}

@@ -3,17 +3,17 @@ import _plugin from "tailwindcss/plugin";
 // @ts-check
 var plugin = _plugin;
 var rgba = _rgba;
-var togglePlugin = plugin(function (_ref) {
+var switchPlugin = plugin(function (_ref) {
   var addComponents = _ref.addComponents,
     theme = _ref.theme;
   var transition = "all 72ms ease-in-out";
   addComponents({
-    ".toggle-container": {
+    ".switch-container": {
       position: "relative",
       display: "block",
       height: "18px",
       width: "32px",
-      ".toggle-handle": {
+      ".switch-handle": {
         position: "absolute",
         top: "0px",
         left: "0px",
@@ -21,24 +21,24 @@ var togglePlugin = plugin(function (_ref) {
         height: "100%",
         opacity: "0",
         cursor: "pointer",
-        "&.toggle-disabled": {
+        "&.switch-disabled": {
           cursor: "not-allowed"
         }
       },
-      "&:hover .toggle:after": {
+      "&:hover .switch:after": {
         transform: "translateX(2px)"
       },
-      "&:hover .toggle-handle.toggle-checked ~ .toggle:after": {
+      "&:hover .switch-handle.switch-checked ~ .switch:after": {
         transform: "translateX(12px)"
       },
-      "&:hover .toggle-handle.toggle-disabled ~ .toggle:after": {
+      "&:hover .switch-handle.switch-disabled ~ .switch:after": {
         transform: "translateX(0px)"
       },
-      "&:hover .toggle-handle.toggle-checked.toggle-disabled ~ .toggle:after": {
+      "&:hover .switch-handle.switch-checked.switch-disabled ~ .switch:after": {
         transform: "translateX(14px)"
       }
     },
-    ".toggle": {
+    ".switch": {
       position: "absolute",
       top: "0px",
       left: "0px",
@@ -61,20 +61,20 @@ var togglePlugin = plugin(function (_ref) {
         boxShadow: "0px 1px 1px 0px ".concat(theme("colors.shadow.10")),
         transition: transition
       },
-      ".toggle-handle.toggle-checked ~ &": {
+      ".switch-handle.switch-checked ~ &": {
         background: theme("colors.accent.600"),
         boxShadow: "inset 0px 1px 4px 0px ".concat(rgba(theme("colors.grey.900"), 0.1)),
         "&:after": {
           transform: "translateX(14px)"
         }
       },
-      ".toggle-handle.toggle-disabled ~ &": {
+      ".switch-handle.switch-disabled ~ &": {
         background: theme("colors.grey.200")
       },
-      ".toggle-checked.toggle-handle.toggle-disabled ~ &": {
+      ".switch-checked.switch-handle.switch-disabled ~ &": {
         background: theme("colors.xenon.200")
       },
-      ".toggle-handle.toggle-invalid ~ &": {
+      ".switch-handle.switch-invalid ~ &": {
         background: theme("colors.red.700"),
         "&:after": {
           background: theme("colors.red.100")
@@ -83,4 +83,4 @@ var togglePlugin = plugin(function (_ref) {
     }
   });
 });
-export default togglePlugin;
+export default switchPlugin;

package/dist/esm/Fields/Switch/index.d.ts

@@ -0,0 +1 @@
+export * from "./Switch";

package/dist/esm/Fields/Switch/index.js

@@ -0,0 +1 @@
+export * from "./Switch";

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

@@ -4,10 +4,11 @@ export * from "./DateInput";
 export * from "./DatePicker";
 export * from "./Dropzone";
 export * from "./Field";
+export * from "./FilePicker";
 export * from "./Form";
 export * from "./Input";
 export * from "./RadioGroup";
 export * from "./RangeSlider";
 export * from "./Select";
 export * from "./TextArea";
-export * from "./Toggle";
+export * from "./Switch";

package/dist/esm/Fields/index.js

@@ -4,10 +4,11 @@ export * from "./DateInput";
 export * from "./DatePicker";
 export * from "./Dropzone";
 export * from "./Field";
+export * from "./FilePicker";
 export * from "./Form";
 export * from "./Input";
 export * from "./RadioGroup";
 export * from "./RangeSlider";
 export * from "./Select";
 export * from "./TextArea";
-export * from "./Toggle";
+export * from "./Switch";

package/dist/esm/Helpers/HelpUnderline/HelpUnderline.d.ts

@@ -1,6 +1,6 @@
 import type { FC } from "react";
 import type { TooltipWrapperProps } from "../../Overlay";
-import type { TooltipWrapperBaseProps } from "../../Overlay/Tooltip/types";
+import type { TooltipWrapperBaseProps } from "../../Overlay/TooltipWrapper/types";
 export declare type HelpUnderlineProps = {
     /**
      * The class name of the `HelpUnderline`.

package/dist/esm/Indicators/AnnouncementBadge/AnnouncementBadge.d.ts

@@ -5,15 +5,24 @@ export declare type AnnouncementBadgeLocale = {
     [key in AnnouncementBadgeTexts]?: string;
 };
 export interface AnnouncementBadgeProps extends HTMLAttributes<HTMLSpanElement> {
-    /** @default default */
+    /**
+     * The size of the `AnnouncementBadge`.
+     * @default default
+     */
     size?: AnnouncementBadgeSizes;
     /**
      * Define which text to display in the `AnnouncementBadge`
      * @default new
      */
     text?: AnnouncementBadgeTexts;
-    /** @default accent */
+    /**
+     * The variant of the `AnnouncementBadge`.
+     * @default accent
+     */
     variant?: "accent" | "red";
+    /**
+     * The locale of the `AnnouncementBadge`.
+     */
     locale?: AnnouncementBadgeLocale;
     children?: never;
 }

package/dist/esm/Indicators/Badge/Badge.d.ts

@@ -4,13 +4,24 @@ import type { AtLeastOne, ColorVariant } from "../../types";
 export declare type BadgeSizes = "small" | "medium" | "large";
 export declare type BadgeVariants = ColorVariant | "pink";
 interface BaseBadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    /**
+     * The variant of the `Badge`.
+     * @default grey
+     */
     variant?: BadgeVariants;
+    /**
+     * The size of the `Badge`.
+     * @default large
+     */
     size?: BadgeSizes;
 }
 declare type BadgeContentProps = {
+    /**
+     * The content of the `Badge`.
+     */
     children: ReactNode;
     /**
-     * An additional value to accompany the `Badge`
+     * An additional value to accompany the `Badge`.
      */
     value: ReactNode;
     /**
@@ -18,7 +29,7 @@ declare type BadgeContentProps = {
      */
     icon: IconComponentType;
 };
-export declare type BadgeProps = BaseBadgeProps & AtLeastOne<BadgeContentProps>;
+export declare type BadgeProps = Omit<BaseBadgeProps, "children"> & AtLeastOne<BadgeContentProps>;
 /**
  * The `Badge` component is a visual marker highlighting information or status. It enhances UI, indicates progress, and classifies data.
  *

package/dist/esm/Indicators/Banners/Alert/Alert.d.ts

@@ -4,26 +4,43 @@ import type { ColorVariant } from "../../../types";
 export declare type AlertContextType = "page" | "section";
 export declare type AlertColorVariant = Exclude<ColorVariant, "blue">;
 export interface AlertProps {
-    /** @ignore */
-    className?: string;
-    /** @ignore */
-    style?: CSSProperties;
-    /** Descriptive title for `Alert` */
+    /**
+     * Descriptive title for `Alert`.
+     */
     title?: ReactNode;
-    /** @default grey */
+    /**
+     * The variant of the `Alert`.
+     * @default grey
+     */
     variant?: AlertColorVariant;
     /**
-     * Usage context description
+     * Usage context description.
      * @default section
      */
     usageContext?: AlertContextType;
+    /**
+     * The icon of the `Alert`.
+     */
     icon?: IconComponentType;
     /**
      * Function triggered when the dismiss button is clicked.
      * Dismiss button won't be rendered if absent.
-     * */
+     */
     onDismiss?(): void;
+    /**
+     * The content of the `Alert`.
+     */
     children: ReactNode;
+    /**
+     * The class name of the `Alert`.
+     * @ignore
+     */
+    className?: string;
+    /**
+     * The style of the `Alert`.
+     * @ignore
+     */
+    style?: CSSProperties;
 }
 /**
  * The `Alert` component give users suggestions, tips, warnings, and error information without stopping them from completing the tasks they're doing.

package/dist/esm/Indicators/Banners/Promote/Promote.d.ts

@@ -1,22 +1,48 @@
 import type { FC, ReactNode } from "react";
 declare type PromoteVariants = "large" | "compact";
 interface CompactPromoteProps {
+    /**
+     * The variant of the `Promote`.
+     * @default compact
+     */
     variant?: Extract<PromoteVariants, "compact">;
+    /**
+     * The illustration of the `Promote`.
+     */
     illustration?: never;
 }
 interface WidePromoteProps {
+    /**
+     * The variant of the `Promote`.
+     * @default large
+     */
     variant?: Extract<PromoteVariants, "large">;
-    /** Plop in an `img` element or `svg` here */
+    /**
+     * The illustration of the `Promote`.
+     */
     illustration?: ReactNode;
 }
 export declare type PromoteProps = {
-    /** Product context for the banner */
+    /**
+     * Product context for the banner.
+     */
     context?: ReactNode;
-    /** Descriptive title for banner */
+    /**
+     * Descriptive title for banner.
+     */
     title: ReactNode;
-    /** Buttons */
+    /**
+     * Buttons.
+     */
     actions?: ReactNode;
+    /**
+     * Function triggered when the dismiss button is clicked.
+     * Dismiss button won't be rendered if absent.
+     */
     onDismiss?(): void;
+    /**
+     * The content of the `Promote`.
+     */
     children: ReactNode;
 } & (CompactPromoteProps | WidePromoteProps);
 /**

package/dist/esm/Indicators/Banners/SystemNotification/SystemNotification.d.ts

@@ -1,7 +1,13 @@
 import type { FC, ReactNode } from "react";
 import type { IconComponentType } from "../../../Icons";
 export interface SystemNotificationProps {
+    /**
+     * The icon of the `SystemNotification`.
+     */
     icon?: IconComponentType;
+    /**
+     * The content of the `SystemNotification`.
+     */
     children: ReactNode;
 }
 /**

package/dist/esm/Indicators/EmptyState/types.d.ts

@@ -3,30 +3,42 @@ import type { FlexGridDirection } from "../../Layout";
 export declare type EmptyStateUsageContexts = "result" | "feature" | "page";
 export declare type EmptyStateWidths = "medium" | "large" | "xlarge";
 export interface EmptyStatePropsAll {
-    /** Descriptive title for the state */
+    /**
+     * Descriptive title for the 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;
-    /** Buttons */
+    /**
+     * Buttons.
+     */
     actions?: ReactNode;
-    /** Direction overwrite for the buttons */
+    /**
+     * Direction overwrite for the buttons.
+     */
     actionsDirection?: FlexGridDirection;
-    /** Add a `<Medallion />`, an `img` element or `svg` in there */
+    /**
+     * Add a `<Medallion />`, an `img` element or `svg` in there.
+     */
     leadIllustration?: ReactNode;
-    /** Plop in an `img` element or `svg` here */
+    /**
+     * Plop in an `img` element or `svg` here.
+     */
     pageIllustration?: ReactNode;
     /**
-     * UsageContext of the component
+     * UsageContext of the component.
      * @default feature
      */
     usageContext?: EmptyStateUsageContexts;
     /**
-     * Define whether or not content should be centered
+     * Define whether or not content should be centered.
      * @default false
      */
     centered?: boolean;
     /**
-     * Defines how wide the EmptyState can expand
+     * Defines how wide the EmptyState can expand.
      * @default medium
      */
     width?: EmptyStateWidths;

package/dist/esm/Indicators/KeyboardKey/KeyboardKey.d.ts

@@ -2,6 +2,9 @@ import type { FC } from "react";
 export interface KeyboardKeyProps {
     /** @ignore */
     className?: string;
+    /**
+     * Value of the keyboard key.
+     */
     value: string;
 }
 /**

package/dist/esm/Indicators/ProgressBar/ProgressBar.d.ts

@@ -1,10 +1,16 @@
 import { type HTMLAttributes } from "react";
 export interface ProgressBarProps extends HTMLAttributes<HTMLDivElement> {
-    /** The current value of the progress bar. */
+    /**
+     * The current value of the progress bar.
+     */
     value: number;
-    /** The maximum value of the progress bar. */
+    /**
+     * The maximum value of the progress bar.
+     */
     max?: number;
-    /** The className to apply to the bar element. */
+    /**
+     * The className to apply to the bar element.
+     */
     barClassName?: string;
 }
 /**

package/dist/esm/Indicators/ProgressSpinner/ProgressSpinner.d.ts

@@ -1,8 +1,17 @@
 import type { FC, SVGAttributes } from "react";
 export declare type ProgressSpinnerAlign = "left" | "center" | "right";
 export interface ProgressSpinnerProps extends SVGAttributes<SVGSVGElement> {
+    /**
+     * The size of the progress spinner.
+     */
     size?: number;
+    /**
+     * The thickness of the progress spinner.
+     */
     thickness?: number;
+    /**
+     * The alignment of the progress spinner.
+     */
     align?: ProgressSpinnerAlign;
 }
 /**

package/dist/esm/Indicators/ScrollIndicator/ScrollIndicator.d.ts

@@ -1,13 +1,25 @@
 import type { CSSProperties, FC, ReactHTML, ReactNode } from "react";
 export declare type ScrollIndicatorVariant = "light" | "dark";
 export interface ScrollIndicatorProps {
+    /**
+     * The className to apply to the wrapper element.
+     */
     wrapperClassName?: string;
     /** @ignore */
     className?: string;
     /** @ignore */
     style?: CSSProperties;
+    /**
+     * The tag name to use for the scroll indicator content.
+     */
     tagName?: keyof ReactHTML;
+    /**
+     * The variant of the scroll indicator.
+     */
     variant?: ScrollIndicatorVariant;
+    /**
+     * The content of the scroll indicator.
+     */
     children: ReactNode;
 }
 /**

package/dist/esm/Indicators/Skeleton/Skeleton.d.ts

@@ -1,8 +1,20 @@
 import type { FC, PropsWithChildren } from "react";
 export interface SkeletonProps {
+    /**
+     * The className to apply to the skeleton element.
+     */
     className?: string;
+    /**
+     * The size of the skeleton.
+     */
     size?: keyof typeof DEFAULT_SKELETON_SIZES;
+    /**
+     * Whether the skeleton should be a circle.
+     */
     circle?: boolean;
+    /**
+     * Whether the skeleton should display an image icon.
+     */
     image?: boolean;
 }
 declare const DEFAULT_SKELETON_SIZES: {

package/dist/esm/Indicators/Tag/Tag.d.ts

@@ -6,21 +6,35 @@ export declare type TagLocale = {
     removeButton?: string | ((title: string) => string);
 };
 export interface TagProps extends DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> {
-    /** The "pink" variant should only be used for **Algolia admin** related things. */
+    /**
+     * The "pink" variant should only be used for **Algolia admin** related things.
+     */
     variant?: TagVariants;
-    /** Handler function called when the "add" button is clicked. */
+    /**
+     * Handler function called when the "add" button is clicked.
+     */
     onAdd?: MouseEventHandler<HTMLElement>;
-    /** The tooltip text to display when hovering over the "add" button. */
+    /**
+     * The tooltip text to display when hovering over the "add" button.
+     */
     addTooltip?: string;
-    /** Handler function called when the "remove" button is clicked. */
+    /**
+     * Handler function called when the "remove" button is clicked.
+     */
     onRemove?: MouseEventHandler<HTMLElement>;
-    /** The tooltip text to display when hovering over the "remove" button. */
+    /**
+     * The tooltip text to display when hovering over the "remove" button.
+     */
     removeTooltip?: string;
     /**
      * Customize the text describing the "add" and "remove" buttons.
      * If not provided, default values will be used.
      */
     locale?: TagLocale;
+    /**
+     * The content of the tag.
+     */
+    children: string;
 }
 /**
  * The `Tag` component is an interactive and customizable text label with varied color options.

package/dist/esm/Layout/Card/Card.d.ts

@@ -4,6 +4,9 @@ import { CardTitle } from "./components/CardTitle";
 export declare type CardElevation = "100" | "200" | "300" | "400" | "500";
 declare type CardAs = "section" | "aside" | "main" | "div" | "span";
 export interface CardProps {
+    /**
+     * The `id` attribute of the `Card`.
+     */
     id?: string;
     /** @ignore */
     className?: string;
@@ -16,6 +19,9 @@ export interface CardProps {
     as?: CardAs;
     /** Should the content take up full full width of the `Card`. */
     fullBleed?: boolean;
+    /**
+     * The content of the `Card`.
+     */
     children: ReactNode;
     /**
      * Specify distance off the page for the `Card`.

package/dist/esm/Layout/FlexGrid/FlexGrid.d.ts

@@ -6,22 +6,33 @@ export declare type FlexGridSpacing = "none" | "sm" | "md" | "lg" | "xl";
 export interface FlexGridProps {
     /** @ignore */
     className?: string;
-    /** Define which direction the content should flow */
+    /**
+     * Define which direction the content should flow.
+     * @default row
+     */
     direction?: FlexGridDirection;
     /**
-     * Define whether or not the contents be allowed to wrap
+     * Define whether or not the contents be allowed to wrap.
      * @default false
      */
     wrap?: boolean;
     /**
-     * Define whether or not the content be wrapped in an inline-flex container
+     * Define whether or not the content be wrapped in an inline-flex container.
      * @default false
      */
     inline?: boolean;
+    /**
+     * Define the alignment of the content.
+     * @default leading
+     */
     alignment?: FlexGridAlignment;
+    /**
+     * Define the distribution of the content.
+     * @default leading
+     */
     distribution?: FlexGridDistribution;
     /**
-     * The spacing directly corelates to our Tailwind spacing scale
+     * The spacing directly corelates to our Tailwind spacing scale.
      *
      * none: `spacing.0 → 0px`
      *
@@ -34,6 +45,9 @@ export interface FlexGridProps {
      * xl: `spacing.8 → 32px`
      */
     spacing?: FlexGridSpacing;
+    /**
+     * The content of the `FlexGrid`.
+     */
     children: ReactNode;
 }
 /**

package/dist/esm/Layout/Insert/Insert.d.ts

@@ -5,9 +5,17 @@ declare type InsertContext = {
     variant?: BadgeVariants;
 };
 export interface InsertProps {
-    /** Descriptive title for the `Insert` */
+    /**
+     * Descriptive title for the `Insert`.
+     */
     title: ReactNode;
+    /**
+     * An array of contexts which will be rendered as `Badge`s.
+     */
     contexts?: Array<string | InsertContext>;
+    /**
+     * The content of the `Insert`.
+     */
     children: ReactNode;
 }
 /**

package/dist/esm/Layout/Sidebar/Sidebar.d.ts

@@ -1,11 +1,23 @@
 import type { FC, PropsWithChildren } from "react";
 import type { SidebarLocale, SidebarLocation, SidebarVariant } from "./types";
 export declare type SidebarProps = PropsWithChildren<{
+    /**
+     * The ID of the `Sidebar`.
+     */
     id?: string;
     /** @ignore */
     className?: string;
+    /**
+     * Used for accessibility reasons, this label should be unique.
+     */
     label?: string;
+    /**
+     * The locale object to override the default locale.
+     */
     locale?: SidebarLocale;
+    /**
+     * Define whether the sidebar should be collapsed.
+     */
     collapsed?: boolean;
     /**
      * As the name of the variants imply,
@@ -23,10 +35,10 @@ export declare type SidebarProps = PropsWithChildren<{
      * @example <caption>with a location of /bar</caption>
      * isLinkActive('/foo', location) // returns false
      *
-     * */
+     */
     isLinkActive?: (href: string, location: SidebarLocation) => boolean;
     /**
-     * location is used in conjunction with `isLinkActive` to display active links properly.
+     * `location` is used in conjunction with `isLinkActive` to display active links properly.
      * It is injected from outside so that it can work with different router libraries and
      * re-render when necessary.
      */

package/dist/esm/Layout/Sidebar/SidebarButtonLink.d.ts

@@ -5,16 +5,34 @@ export declare type SidebarButtonLinkIcon = IconComponentType | {
     inactive: IconComponentType;
 };
 export interface SidebarButtonLinkProps {
+    /**
+     * The ID of the `SidebarButtonLink`.
+     */
     id?: string;
+    /**
+     * The icon of the `SidebarButtonLink`.
+     */
     icon: SidebarButtonLinkIcon;
+    /**
+     * The href of the `SidebarButtonLink`.
+     */
     href: string;
+    /**
+     * The onClick handler of the `SidebarButtonLink`.
+     */
     onClick?: MouseEventHandler<HTMLAnchorElement>;
+    /**
+     * Define whether the `SidebarButtonLink` should be disabled.
+     */
     disabled?: boolean;
     /**
      * Alternative content for the tooltip.
      * @default children
      */
     tooltipContent?: ReactNode;
+    /**
+     * The content of the `SidebarButtonLink`.
+     */
     children: ReactNode;
 }
 export declare const SidebarButtonLink: FC<SidebarButtonLinkProps>;