@wistia/ui 0.1.0 → 0.1.1

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { ReactNode, ComponentPropsWithoutRef, JSX, ComponentPropsWithRef, MouseEvent, ChangeEvent, ForwardedRef, Ref, JSXElementConstructor, ElementType as ElementType$1, InputHTMLAttributes } from 'react';
+import { ReactNode, ComponentPropsWithoutRef, JSX, ComponentPropsWithRef, MouseEvent, ChangeEvent, ForwardedRef, Ref, JSXElementConstructor, ElementType as ElementType$1, RefObject, InputHTMLAttributes } from 'react';
 import { LinkProps as LinkProps$1 } from 'react-router-dom';
 import * as styled_components from 'styled-components';
 import { DropdownMenuContentProps, DropdownMenuItemProps, DropdownMenuRadioGroupProps, DropdownMenuRadioItemProps, DropdownMenuCheckboxItemProps } from '@radix-ui/react-dropdown-menu';
@@ -1508,6 +1508,91 @@ declare const CheckboxMenuItem: {
     displayName: string;
 };
 
+type ModalProps = ComponentPropsWithoutRef<'div'> & {
+    /**
+     * The content of the modal.
+     */
+    children: ReactNode;
+    /**
+     * Whether or not the modal should take up the full height of the viewport
+     */
+    fullHeight?: boolean;
+    /**
+     * Ref to the element that should receive focus when the modal opens
+     */
+    initialFocusRef?: RefObject<HTMLElement>;
+    /**
+     * Determines if the modal is currently open
+     */
+    isOpen: boolean;
+    /**
+     * Determines if the close button is visible (if false, `esc` will still close the Modal)
+     */
+    hideCloseButton?: boolean;
+    /**
+     * Determines if the title is visible
+     */
+    hideTitle?: boolean;
+    /**
+     * When the Modal is dismissed, this function will be called. You'll typically want to set the
+     * state of `isOpen` to false here
+     */
+    onRequestClose?: () => void;
+    /**
+     * The title for the modal. If you want to hide the title, set the `hideTitle` prop to `true`
+     * and the title will be hidden but still accessible to screen readers.
+     */
+    title: string;
+    /**
+     * The base width to apply to the Modal
+     */
+    width?: string;
+};
+/**
+ * A Modal is a focused UI element that appears atop the main interface, requiring
+ * user interaction or dismissal before returning to the underlying content.
+ */
+declare const Modal: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    /**
+     * The content of the modal.
+     */
+    children: ReactNode;
+    /**
+     * Whether or not the modal should take up the full height of the viewport
+     */
+    fullHeight?: boolean;
+    /**
+     * Ref to the element that should receive focus when the modal opens
+     */
+    initialFocusRef?: RefObject<HTMLElement>;
+    /**
+     * Determines if the modal is currently open
+     */
+    isOpen: boolean;
+    /**
+     * Determines if the close button is visible (if false, `esc` will still close the Modal)
+     */
+    hideCloseButton?: boolean;
+    /**
+     * Determines if the title is visible
+     */
+    hideTitle?: boolean;
+    /**
+     * When the Modal is dismissed, this function will be called. You'll typically want to set the
+     * state of `isOpen` to false here
+     */
+    onRequestClose?: () => void;
+    /**
+     * The title for the modal. If you want to hide the title, set the `hideTitle` prop to `true`
+     * and the title will be hidden but still accessible to screen readers.
+     */
+    title: string;
+    /**
+     * The base width to apply to the Modal
+     */
+    width?: string;
+} & react.RefAttributes<HTMLDivElement>>;
+
 type RadioProps = ComponentPropsWithoutRef<'input'> & {
     /**
      * Indicates the state of the radio
@@ -1834,4 +1919,4 @@ declare const Input: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HT
     type?: "email" | "multiline" | "number" | "phone" | "search" | "text" | "url";
 } & react.RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;
 
-export { Avatar, type AvatarInstanceType, type AvatarProps, Badge, type BadgeProps, Box, type BoxProps, Button, ButtonGroup, type ButtonProps, Checkbox, CheckboxGroup, CheckboxMenuItem, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, Divider, Ellipsis, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Input, type InputProps, Label, type LabelProps, Link, type LinkProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Radio, RadioGroup, RadioMenuItem, type RadioProps, ScreenReaderOnly, Stack, SubMenu, Tag, type TagProps, Text, type TextProps, Tooltip, type TooltipProps, UIProvider, WistiaLogo, colorSchemeOptions, copyToClipboard, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mq, useActiveMq, useAriaLive, useFormState, useMq, useToast, useWindowSize };
+export { Avatar, type AvatarInstanceType, type AvatarProps, Badge, type BadgeProps, Box, type BoxProps, Button, ButtonGroup, type ButtonProps, Checkbox, CheckboxGroup, CheckboxMenuItem, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, Divider, Ellipsis, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Input, type InputProps, Label, type LabelProps, Link, type LinkProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Modal, type ModalProps, Radio, RadioGroup, RadioMenuItem, type RadioProps, ScreenReaderOnly, Stack, SubMenu, Tag, type TagProps, Text, type TextProps, Tooltip, type TooltipProps, UIProvider, WistiaLogo, colorSchemeOptions, copyToClipboard, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mq, useActiveMq, useAriaLive, useFormState, useMq, useToast, useWindowSize };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { ReactNode, ComponentPropsWithoutRef, JSX, ComponentPropsWithRef, MouseEvent, ChangeEvent, ForwardedRef, Ref, JSXElementConstructor, ElementType as ElementType$1, InputHTMLAttributes } from 'react';
+import { ReactNode, ComponentPropsWithoutRef, JSX, ComponentPropsWithRef, MouseEvent, ChangeEvent, ForwardedRef, Ref, JSXElementConstructor, ElementType as ElementType$1, RefObject, InputHTMLAttributes } from 'react';
 import { LinkProps as LinkProps$1 } from 'react-router-dom';
 import * as styled_components from 'styled-components';
 import { DropdownMenuContentProps, DropdownMenuItemProps, DropdownMenuRadioGroupProps, DropdownMenuRadioItemProps, DropdownMenuCheckboxItemProps } from '@radix-ui/react-dropdown-menu';
@@ -1508,6 +1508,91 @@ declare const CheckboxMenuItem: {
     displayName: string;
 };
 
+type ModalProps = ComponentPropsWithoutRef<'div'> & {
+    /**
+     * The content of the modal.
+     */
+    children: ReactNode;
+    /**
+     * Whether or not the modal should take up the full height of the viewport
+     */
+    fullHeight?: boolean;
+    /**
+     * Ref to the element that should receive focus when the modal opens
+     */
+    initialFocusRef?: RefObject<HTMLElement>;
+    /**
+     * Determines if the modal is currently open
+     */
+    isOpen: boolean;
+    /**
+     * Determines if the close button is visible (if false, `esc` will still close the Modal)
+     */
+    hideCloseButton?: boolean;
+    /**
+     * Determines if the title is visible
+     */
+    hideTitle?: boolean;
+    /**
+     * When the Modal is dismissed, this function will be called. You'll typically want to set the
+     * state of `isOpen` to false here
+     */
+    onRequestClose?: () => void;
+    /**
+     * The title for the modal. If you want to hide the title, set the `hideTitle` prop to `true`
+     * and the title will be hidden but still accessible to screen readers.
+     */
+    title: string;
+    /**
+     * The base width to apply to the Modal
+     */
+    width?: string;
+};
+/**
+ * A Modal is a focused UI element that appears atop the main interface, requiring
+ * user interaction or dismissal before returning to the underlying content.
+ */
+declare const Modal: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    /**
+     * The content of the modal.
+     */
+    children: ReactNode;
+    /**
+     * Whether or not the modal should take up the full height of the viewport
+     */
+    fullHeight?: boolean;
+    /**
+     * Ref to the element that should receive focus when the modal opens
+     */
+    initialFocusRef?: RefObject<HTMLElement>;
+    /**
+     * Determines if the modal is currently open
+     */
+    isOpen: boolean;
+    /**
+     * Determines if the close button is visible (if false, `esc` will still close the Modal)
+     */
+    hideCloseButton?: boolean;
+    /**
+     * Determines if the title is visible
+     */
+    hideTitle?: boolean;
+    /**
+     * When the Modal is dismissed, this function will be called. You'll typically want to set the
+     * state of `isOpen` to false here
+     */
+    onRequestClose?: () => void;
+    /**
+     * The title for the modal. If you want to hide the title, set the `hideTitle` prop to `true`
+     * and the title will be hidden but still accessible to screen readers.
+     */
+    title: string;
+    /**
+     * The base width to apply to the Modal
+     */
+    width?: string;
+} & react.RefAttributes<HTMLDivElement>>;
+
 type RadioProps = ComponentPropsWithoutRef<'input'> & {
     /**
      * Indicates the state of the radio
@@ -1834,4 +1919,4 @@ declare const Input: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HT
     type?: "email" | "multiline" | "number" | "phone" | "search" | "text" | "url";
 } & react.RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;
 
-export { Avatar, type AvatarInstanceType, type AvatarProps, Badge, type BadgeProps, Box, type BoxProps, Button, ButtonGroup, type ButtonProps, Checkbox, CheckboxGroup, CheckboxMenuItem, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, Divider, Ellipsis, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Input, type InputProps, Label, type LabelProps, Link, type LinkProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Radio, RadioGroup, RadioMenuItem, type RadioProps, ScreenReaderOnly, Stack, SubMenu, Tag, type TagProps, Text, type TextProps, Tooltip, type TooltipProps, UIProvider, WistiaLogo, colorSchemeOptions, copyToClipboard, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mq, useActiveMq, useAriaLive, useFormState, useMq, useToast, useWindowSize };
+export { Avatar, type AvatarInstanceType, type AvatarProps, Badge, type BadgeProps, Box, type BoxProps, Button, ButtonGroup, type ButtonProps, Checkbox, CheckboxGroup, CheckboxMenuItem, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, Divider, Ellipsis, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Input, type InputProps, Label, type LabelProps, Link, type LinkProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Modal, type ModalProps, Radio, RadioGroup, RadioMenuItem, type RadioProps, ScreenReaderOnly, Stack, SubMenu, Tag, type TagProps, Text, type TextProps, Tooltip, type TooltipProps, UIProvider, WistiaLogo, colorSchemeOptions, copyToClipboard, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mq, useActiveMq, useAriaLive, useFormState, useMq, useToast, useWindowSize };