etudes 27.5.0 → 28.0.0

package/build/components/Burger.d.ts

@@ -1,9 +1,22 @@
-import { HTMLAttributes } from 'react';
+import { HTMLAttributes, Ref } from 'react';
+/**
+ * Three-striped burger component that transforms into an "X" when active.
+ *
+ * @exports Burger.Bar Component for each bar in the burger.
+ */
+export declare function Burger({ className, ref, children, numberOfBars, isActive, isSplit, isTailHidden, ...props }: Burger.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace Burger {
+    var displayName: string;
+}
 export declare namespace Burger {
     /**
      * Type describing the props of {@link Burger}.
      */
     type Props = {
+        /**
+         * Reference to the root element.
+         */
+        ref?: Ref<HTMLDivElement>;
         /**
          * Specifies if the burger is in its activated state.
          */
@@ -22,18 +35,11 @@ export declare namespace Burger {
          */
         numberOfBars?: 2 | 3;
     } & HTMLAttributes<HTMLDivElement>;
-}
-/**
- * Three-striped burger component that transforms into an "X" when active.
- *
- * @exports Burger.Bar Component for each bar in the burger.
- */
-export declare const Burger: import('react').ForwardRefExoticComponent<Readonly<Burger.Props> & import('react').RefAttributes<HTMLDivElement>> & {
     /**
      * Component for each bar in a {@link Burger}.
      */
-    Bar: {
+    const Bar: {
         ({ ...props }: HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
-};
+}

package/build/components/BurgerButton.d.ts

@@ -1,10 +1,24 @@
-import { ButtonHTMLAttributes } from 'react';
+import { ButtonHTMLAttributes, Ref } from 'react';
 import { Burger } from './Burger.js';
+/**
+ * Three-striped burger button component that transforms into an "X" when
+ * active.
+ *
+ * @exports BurgerButton.Bar Component for each bar in the burger button.
+ */
+export declare function BurgerButton({ className, ref, style, children, numberOfBars, isActive, isSplit, isTailHidden, onActivate, onDeactivate, onToggle, ...props }: BurgerButton.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace BurgerButton {
+    var displayName: string;
+}
 export declare namespace BurgerButton {
     /**
      * Type describing the props of {@link BurgerButton}.
      */
     type Props = {
+        /**
+         * Reference to the root element.
+         */
+        ref?: Ref<HTMLButtonElement>;
         /**
          * Handler invoked when the button is activated.
          */
@@ -20,19 +34,11 @@ export declare namespace BurgerButton {
          */
         onToggle?: (isActive: boolean) => void;
     } & Omit<Burger.Props & ButtonHTMLAttributes<HTMLButtonElement>, 'onToggle'>;
-}
-/**
- * Three-striped burger button component that transforms into an "X" when
- * active.
- *
- * @exports BurgerButton.Bar Component for each bar in the burger button.
- */
-export declare const BurgerButton: import('react').ForwardRefExoticComponent<Readonly<BurgerButton.Props> & import('react').RefAttributes<HTMLButtonElement>> & {
     /**
      * Component for each bar in a {@link BurgerButton}.
      */
-    Bar: {
-        ({ ...props }: import('react').HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
+    const Bar: {
+        ({ ...props }: import("react").HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
-};
+}

package/build/components/CoverImage.d.ts

@@ -1,45 +1,43 @@
-import { HTMLAttributes } from 'react';
+import { HTMLAttributes, Ref } from 'react';
 import { Picture } from '../primitives/Picture.js';
-export declare const _Content: {
-    ({ children, ...props }: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-export declare const _Viewport: {
-    ({ children, ...props }: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+/**
+ * A component that displays an image with a fixed aspect ratio. The image is
+ * centered and cropped to fit the container (a.k.a. viewport).
+ *
+ * @exports CoverImage.Content Component for optional content inside the image.
+ * @exports CoverImage.Viewport Component for the viewport.
+ */
+export declare function CoverImage({ ref, style, alt, aspectRatio: externalAspectRatio, children, loadingMode, sources, src, onError, onLoad, onLoadStart, ...props }: Readonly<CoverImage.Props>): import("react/jsx-runtime").JSX.Element;
+export declare namespace CoverImage {
+    var displayName: string;
+}
 export declare namespace CoverImage {
     /**
      * Type describing the props of {@link CoverImage}.
      */
     type Props = {
+        /**
+         * Reference to the root element.
+         */
+        ref?: Ref<HTMLDivElement>;
         /**
          * The known aspect ratio of the image, expressed by width / height. If
          * unprovided, it will be inferred after loading the image.
          */
         aspectRatio?: number;
     } & Omit<HTMLAttributes<HTMLDivElement>, 'onLoadStart'> & Pick<Picture.Props, 'alt' | 'loadingMode' | 'onError' | 'onLoad' | 'onLoadStart' | 'sources' | 'src'>;
-}
-/**
- * A component that displays an image with a fixed aspect ratio. The image is
- * centered and cropped to fit the container (a.k.a. viewport).
- *
- * @exports CoverImage.Content Component for optional content inside the image.
- * @exports CoverImage.Viewport Component for the viewport.
- */
-export declare const CoverImage: import('react').ForwardRefExoticComponent<Readonly<CoverImage.Props> & import('react').RefAttributes<HTMLDivElement>> & {
     /**
      * Component for optional content inside a {@link CoverImage}.
      */
-    Content: {
+    const Content: {
         ({ children, ...props }: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     /**
      * Component for the viewport of a {@link CoverImage}.
      */
-    Viewport: {
+    const Viewport: {
         ({ children, ...props }: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
-};
+}

package/build/components/CoverVideo.d.ts

@@ -1,37 +1,43 @@
-import { HTMLAttributes } from 'react';
+import { HTMLAttributes, Ref } from 'react';
 import { Video } from '../primitives/Video.js';
+/**
+ * A component that displays a video with a fixed aspect ratio. The video is
+ * centered and cropped to fit the container (a.k.a. viewport).
+ *
+ * @exports CoverVideo.Content Component for optional content inside the video.
+ * @exports CoverVideo.Viewport Component for the viewport.
+ */
+export declare function CoverVideo({ className, ref, style, aspectRatio: externalAspectRatio, autoLoop, autoPlay, children, playsInline, posterSrc, src, hasControls, isMuted, onCanPlay, onEnd, onFullscreenChange, onLoadMetadata, onLoadMetadataComplete, onLoadMetadataError, onPause, onPlay, onSizeChange, ...props }: Readonly<CoverVideo.Props>): import("react/jsx-runtime").JSX.Element;
+export declare namespace CoverVideo {
+    var displayName: string;
+}
 export declare namespace CoverVideo {
     /**
      * Type describing the props of {@link CoverVideo}.
      */
     type Props = {
+        /**
+         * Reference to the root element.
+         */
+        ref?: Ref<HTMLDivElement>;
         /**
          * The known aspect ratio of the video, expressed by width / height. If
          * unprovided, it will be inferred after loading the video.
          */
         aspectRatio?: number;
     } & Omit<HTMLAttributes<HTMLDivElement>, 'onCanPlay' | 'onPause' | 'onPlay'> & Pick<Video.Props, 'autoLoop' | 'autoPlay' | 'hasControls' | 'isMuted' | 'onCanPlay' | 'onEnd' | 'onFullscreenChange' | 'onLoadMetadata' | 'onLoadMetadataComplete' | 'onLoadMetadataError' | 'onPause' | 'onPlay' | 'onSizeChange' | 'playsInline' | 'posterSrc' | 'src'>;
-}
-/**
- * A component that displays a video with a fixed aspect ratio. The video is
- * centered and cropped to fit the container (a.k.a. viewport).
- *
- * @exports CoverVideo.Content Component for optional content inside the video.
- * @exports CoverVideo.Viewport Component for the viewport.
- */
-export declare const CoverVideo: import('react').ForwardRefExoticComponent<Readonly<CoverVideo.Props> & import('react').RefAttributes<HTMLDivElement>> & {
     /**
      * Component for optional content inside a {@link CoverVideo}.
      */
-    Content: {
+    const Content: {
         ({ children, ...props }: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     /**
      * Component for the viewport of a {@link CoverVideo}.
      */
-    Viewport: {
+    const Viewport: {
         ({ children, ...props }: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
-};
+}

package/build/components/OptionButton.d.ts

@@ -1,4 +1,4 @@
-import { ButtonHTMLAttributes } from 'react';
+import { ButtonHTMLAttributes, Ref } from 'react';
 export declare namespace OptionButton {
     /**
      * Type describing the props of {@link OptionButton}.
@@ -19,6 +19,10 @@ export declare namespace OptionButton {
             label: string;
             value: string;
         }[] | string[];
+        /**
+         * Reference to the root element.
+         */
+        ref?: Ref<HTMLButtonElement>;
         /**
          * Handler invoked when the button is clicked.
          *
@@ -31,4 +35,7 @@ export declare namespace OptionButton {
 /**
  * A button component that cycles through a list of options when clicked.
  */
-export declare const OptionButton: import('react').ForwardRefExoticComponent<Readonly<OptionButton.Props> & import('react').RefAttributes<HTMLButtonElement>>;
+export declare function OptionButton({ ref, index, options, isDisabled, onChange, ...props }: OptionButton.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace OptionButton {
+    var displayName: string;
+}

package/build/components/PanoramaSlider.d.ts

@@ -1,11 +1,28 @@
-import { HTMLAttributes } from 'react';
+import { HTMLAttributes, Ref } from 'react';
 import { Size } from 'spase';
 import { Panorama } from '../primitives/Panorama.js';
+/**
+ * A slider for a {@link Panorama}.
+ *
+ * @exports Panorama.SliderIndicator Component for the active indicator that
+ *                                   appears when the slider is dragged.
+ * @exports Panorama.SliderReticle Component for the reticle that indicates the
+ *                                 FOV of the backing {@link Panorama}.
+ * @exports Panorama.SliderTrack Component for the slide track.
+ */
+export declare function PanoramaSlider({ className, ref, style, angle, autoDimension, children, fov, speed, src, viewportSize, zeroAnchor, onAngleChange, onDragEnd, onDragStart, onImageSizeChange, onLoadImageComplete, onLoadImageError, onLoadImageStart, onPositionChange, ...props }: Readonly<PanoramaSlider.Props>): import("react/jsx-runtime").JSX.Element;
+export declare namespace PanoramaSlider {
+    var displayName: string;
+}
 export declare namespace PanoramaSlider {
     /**
      * Type describing the props of {@link PanoramaSlider}.
      */
     type Props = {
+        /**
+         * Reference to the root element.
+         */
+        ref?: Ref<HTMLDivElement>;
         /**
          * Field-of-view (0.0 - 360.0 degrees, inclusive) that represents the size
          * of the reticle. 360 indicates the reticle covers the entire image. If
@@ -28,36 +45,25 @@ export declare namespace PanoramaSlider {
          */
         viewportSize?: Size;
     } & Panorama.Props;
-}
-/**
- * A slider for a {@link Panorama}.
- *
- * @exports Panorama.SliderIndicator Component for the active indicator that
- *                                  appears when the slider is dragged.
- * @exports Panorama.SliderReticle Component for the reticle that indicates the
- *                                FOV of the backing {@link Panorama}.
- * @exports Panorama.SliderTrack Component for the slide track.
- */
-export declare const PanoramaSlider: import('react').ForwardRefExoticComponent<Readonly<PanoramaSlider.Props> & import('react').RefAttributes<HTMLDivElement>> & {
     /**
      * Component for the active indicator of a {@link PanoramaSlider}.
      */
-    Indicator: {
+    const Indicator: {
         ({ ...props }: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     /**
      * Component for the active reticle of a {@link PanoramaSlider}.
      */
-    Reticle: {
+    const Reticle: {
         ({ ...props }: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     /**
      * Component for the slide track of a {@link PanoramaSlider}.
      */
-    Track: {
+    const Track: {
         ({ ...props }: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
-};
+}

package/build/components/SelectableButton.d.ts

@@ -1,4 +1,4 @@
-import { ButtonHTMLAttributes } from 'react';
+import { ButtonHTMLAttributes, Ref } from 'react';
 export declare namespace SelectableButton {
     /**
      * Type describing the props of {@link SelectableButton}.
@@ -20,6 +20,10 @@ export declare namespace SelectableButton {
          * The label of the button.
          */
         label?: string;
+        /**
+         * Reference to the root element.
+         */
+        ref?: Ref<HTMLButtonElement>;
         /**
          * Handler invoked when the button is deselected.
          */
@@ -39,4 +43,7 @@ export declare namespace SelectableButton {
 /**
  * A button component that can be selected or deselected.
  */
-export declare const SelectableButton: import('react').ForwardRefExoticComponent<Readonly<SelectableButton.Props> & import('react').RefAttributes<HTMLButtonElement>>;
+export declare function SelectableButton({ className, ref, children, label, isDeselectable, isDisabled, isSelected, onDeselect, onSelect, onToggle, ...props }: SelectableButton.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace SelectableButton {
+    var displayName: string;
+}