@wistia/ui 0.0.21 → 0.0.22

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, JSXElementConstructor, ElementType as ElementType$1 } from 'react';
+import { ReactNode, ComponentPropsWithoutRef, JSX, ComponentPropsWithRef, MouseEvent, ChangeEvent, ForwardedRef, Ref, JSXElementConstructor, ElementType as ElementType$1 } 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';
@@ -515,6 +515,108 @@ declare const Ellipsis: {
     displayName: string;
 };
 
+type ActionCallback<T> = (data: T, nextData: T) => Promise<T> | T;
+type Action = (data: FormData | null) => Promise<void>;
+type FormActionState<T> = [{
+    data: T;
+    error: Error | null;
+}, Action, boolean];
+declare const useFormState: <T extends object>(action: ActionCallback<T>, initialData?: Partial<T>) => FormActionState<T>;
+
+type ValidationCallback<T> = (data: T) => FormErrors<T>;
+type FormWithLabelledByProps = {
+    'aria-label'?: never;
+    /**
+     * The id of the element that labels the form. Typically a heading.
+     */
+    'aria-labelledby': string;
+};
+type FormWithLabelProps = {
+    /**
+     * Accessible name of the form. Use this only when a visible label is not possible. If the form has a title or heading, use `aria-labelledby` instead.
+     */
+    'aria-label': string;
+    'aria-labelledby'?: never;
+};
+type FormErrors<T> = Partial<{
+    [K in keyof T]: string[] | string;
+}>;
+type FormProps<T> = Omit<ComponentPropsWithoutRef<'form'>, 'action' | 'aria-label' | 'aria-labelledby' | 'children'> & {
+    /**
+     * The action to be performed when the form is submitted. It can be asynchronous.
+     */
+    action?: Action;
+    /**
+     * The form elements used in the form
+     */
+    children: ReactNode;
+    /**
+     * An object that providesd errors for the form fields. This is created by `useFormState` and passed along to `FormField`s.
+     */
+    errors?: FormErrors<T>;
+    /**
+     * If true, fills the entire container
+     */
+    fullWidth?: boolean;
+    /**
+     * The function for handling validation.
+     */
+    validate?: ValidationCallback<T>;
+    /**
+     * An object that provides valuesfor the form fields. This is typically the `state.data` value from `useFormState` and passed along to `FormField`s.
+     */
+    values?: T;
+} & (FormWithLabelledByProps | FormWithLabelProps);
+/**
+ * x
+ */
+declare const FormComponent: {
+    <T>({ children, action, values, validate, fullWidth, ...props }: FormProps<T>, forwardedRef?: Ref<HTMLFormElement>): JSX.Element;
+    displayName: string;
+};
+declare const Form: <T>(props: FormProps<T> & {
+    ref?: ForwardedRef<HTMLUListElement>;
+}) => ReturnType<typeof FormComponent>;
+
+type FormErrorSummaryProps = {
+    description: string;
+};
+declare const FormErrorSummary: ({ description }: FormErrorSummaryProps) => react_jsx_runtime.JSX.Element | null;
+
+type FormFieldProps = ComponentPropsWithoutRef<'div'> & {
+    /**
+     * This should be a single child that is a valid form field (or can pretend to be one).
+     */
+    children: JSX.Element;
+    /**
+     * Valid label text
+     */
+    label: ReactNode;
+    /**
+     * If an id isn't supplied, one is generated internally.
+     */
+    id?: string;
+    /**
+     * Will show an error message and put the child input into an invalid state
+     */
+    error?: ReactNode;
+    /**
+     * The name attribute of the field. It will map to the form data passed into `useFormState`.
+     */
+    name: string;
+    /**
+     * A value that overrides the basic value. This should pair with `onChange`.
+     */
+    value?: string;
+};
+/**
+ * Component description goes here
+ */
+declare const FormField: {
+    ({ children, label, name, error, value, ...props }: FormFieldProps): JSX.Element;
+    displayName: string;
+};
+
 type ExtendedProps<Props = Record<string, unknown>, OverrideProps = Record<string, unknown>> = Omit<Props, keyof OverrideProps> & OverrideProps;
 type ElementType = JSXElementConstructor<any> | keyof JSX.IntrinsicElements;
 type PropsOf<C extends ElementType> = JSX.LibraryManagedAttributes<C, ComponentPropsWithoutRef<C>>;
@@ -1366,6 +1468,8 @@ declare const RadioMenuItem: {
 };
 
 type CheckboxMenuItemProps = DropdownMenuCheckboxItemProps & MenuItemButtonProps & {
+    /** Callback to fire when the checked status changes */
+    onCheckedChange: (checked: boolean) => void;
     /**
      * an [Icon](?path=/docs/components-icon--docs) to use as the indicator that the radio item is selected
      */
@@ -1388,7 +1492,7 @@ type CheckboxMenuItemProps = DropdownMenuCheckboxItemProps & MenuItemButtonProps
     ref?: never;
 };
 declare const CheckboxMenuItem: {
-    ({ onSelect, checked, onCheckedChange, indicator, ...props }: CheckboxMenuItemProps): react_jsx_runtime.JSX.Element;
+    ({ onSelect, checked, onCheckedChange, ...props }: CheckboxMenuItemProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
@@ -1404,7 +1508,7 @@ type RadioProps = ComponentPropsWithoutRef<'input'> & {
     /**
      * Indicates that there is an error with the input
      */
-    hasError?: boolean;
+    'aria-invalid'?: boolean;
     /**
      * Provides an ID for the input
      */
@@ -1447,7 +1551,7 @@ declare const Radio: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProp
     /**
      * Indicates that there is an error with the input
      */
-    hasError?: boolean;
+    'aria-invalid'?: boolean;
     /**
      * Provides an ID for the input
      */
@@ -1660,4 +1764,42 @@ declare const WistiaLogo: {
     displayName: string;
 };
 
-export { Avatar, type AvatarInstanceType, type AvatarProps, Badge, type BadgeProps, Box, type BoxProps, Button, ButtonGroup, type ButtonProps, Checkbox, CheckboxMenuItem, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, Divider, Ellipsis, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Label, type LabelProps, Link, type LinkProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Radio, 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, useMq, useWindowSize };
+type FormGroupProps = Omit<ComponentPropsWithoutRef<'fieldset'>, 'onChange'> & {
+    children: ReactNode;
+    label?: ReactNode;
+};
+/**
+ * For grouping like form elements together.
+ */
+declare const FormGroup: {
+    ({ children, label, ...props }: FormGroupProps): JSX.Element;
+    displayName: string;
+};
+
+type RadioGroupProps = FormGroupProps & {
+    onChange?: ((event: ChangeEvent<HTMLInputElement>) => void) | undefined;
+    value?: string | undefined;
+    name?: string | undefined;
+};
+/**
+ * For grouping like form elements togtether. Can serve as a checkbox
+ */
+declare const RadioGroup: {
+    ({ children, name, onChange, value, ...props }: RadioGroupProps): JSX.Element;
+    displayName: string;
+};
+
+type CheckboxGroupProps = FormGroupProps & {
+    onChange?: ((event: ChangeEvent<HTMLInputElement>) => void) | undefined;
+    value?: string | undefined;
+    name?: string | undefined;
+};
+/**
+ * For grouping like form elements togtether. Can serve as a checkbox
+ */
+declare const CheckboxGroup: {
+    ({ children, name, onChange, value, ...props }: CheckboxGroupProps): JSX.Element;
+    displayName: string;
+};
+
+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, 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, 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, JSXElementConstructor, ElementType as ElementType$1 } from 'react';
+import { ReactNode, ComponentPropsWithoutRef, JSX, ComponentPropsWithRef, MouseEvent, ChangeEvent, ForwardedRef, Ref, JSXElementConstructor, ElementType as ElementType$1 } 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';
@@ -515,6 +515,108 @@ declare const Ellipsis: {
     displayName: string;
 };
 
+type ActionCallback<T> = (data: T, nextData: T) => Promise<T> | T;
+type Action = (data: FormData | null) => Promise<void>;
+type FormActionState<T> = [{
+    data: T;
+    error: Error | null;
+}, Action, boolean];
+declare const useFormState: <T extends object>(action: ActionCallback<T>, initialData?: Partial<T>) => FormActionState<T>;
+
+type ValidationCallback<T> = (data: T) => FormErrors<T>;
+type FormWithLabelledByProps = {
+    'aria-label'?: never;
+    /**
+     * The id of the element that labels the form. Typically a heading.
+     */
+    'aria-labelledby': string;
+};
+type FormWithLabelProps = {
+    /**
+     * Accessible name of the form. Use this only when a visible label is not possible. If the form has a title or heading, use `aria-labelledby` instead.
+     */
+    'aria-label': string;
+    'aria-labelledby'?: never;
+};
+type FormErrors<T> = Partial<{
+    [K in keyof T]: string[] | string;
+}>;
+type FormProps<T> = Omit<ComponentPropsWithoutRef<'form'>, 'action' | 'aria-label' | 'aria-labelledby' | 'children'> & {
+    /**
+     * The action to be performed when the form is submitted. It can be asynchronous.
+     */
+    action?: Action;
+    /**
+     * The form elements used in the form
+     */
+    children: ReactNode;
+    /**
+     * An object that providesd errors for the form fields. This is created by `useFormState` and passed along to `FormField`s.
+     */
+    errors?: FormErrors<T>;
+    /**
+     * If true, fills the entire container
+     */
+    fullWidth?: boolean;
+    /**
+     * The function for handling validation.
+     */
+    validate?: ValidationCallback<T>;
+    /**
+     * An object that provides valuesfor the form fields. This is typically the `state.data` value from `useFormState` and passed along to `FormField`s.
+     */
+    values?: T;
+} & (FormWithLabelledByProps | FormWithLabelProps);
+/**
+ * x
+ */
+declare const FormComponent: {
+    <T>({ children, action, values, validate, fullWidth, ...props }: FormProps<T>, forwardedRef?: Ref<HTMLFormElement>): JSX.Element;
+    displayName: string;
+};
+declare const Form: <T>(props: FormProps<T> & {
+    ref?: ForwardedRef<HTMLUListElement>;
+}) => ReturnType<typeof FormComponent>;
+
+type FormErrorSummaryProps = {
+    description: string;
+};
+declare const FormErrorSummary: ({ description }: FormErrorSummaryProps) => react_jsx_runtime.JSX.Element | null;
+
+type FormFieldProps = ComponentPropsWithoutRef<'div'> & {
+    /**
+     * This should be a single child that is a valid form field (or can pretend to be one).
+     */
+    children: JSX.Element;
+    /**
+     * Valid label text
+     */
+    label: ReactNode;
+    /**
+     * If an id isn't supplied, one is generated internally.
+     */
+    id?: string;
+    /**
+     * Will show an error message and put the child input into an invalid state
+     */
+    error?: ReactNode;
+    /**
+     * The name attribute of the field. It will map to the form data passed into `useFormState`.
+     */
+    name: string;
+    /**
+     * A value that overrides the basic value. This should pair with `onChange`.
+     */
+    value?: string;
+};
+/**
+ * Component description goes here
+ */
+declare const FormField: {
+    ({ children, label, name, error, value, ...props }: FormFieldProps): JSX.Element;
+    displayName: string;
+};
+
 type ExtendedProps<Props = Record<string, unknown>, OverrideProps = Record<string, unknown>> = Omit<Props, keyof OverrideProps> & OverrideProps;
 type ElementType = JSXElementConstructor<any> | keyof JSX.IntrinsicElements;
 type PropsOf<C extends ElementType> = JSX.LibraryManagedAttributes<C, ComponentPropsWithoutRef<C>>;
@@ -1366,6 +1468,8 @@ declare const RadioMenuItem: {
 };
 
 type CheckboxMenuItemProps = DropdownMenuCheckboxItemProps & MenuItemButtonProps & {
+    /** Callback to fire when the checked status changes */
+    onCheckedChange: (checked: boolean) => void;
     /**
      * an [Icon](?path=/docs/components-icon--docs) to use as the indicator that the radio item is selected
      */
@@ -1388,7 +1492,7 @@ type CheckboxMenuItemProps = DropdownMenuCheckboxItemProps & MenuItemButtonProps
     ref?: never;
 };
 declare const CheckboxMenuItem: {
-    ({ onSelect, checked, onCheckedChange, indicator, ...props }: CheckboxMenuItemProps): react_jsx_runtime.JSX.Element;
+    ({ onSelect, checked, onCheckedChange, ...props }: CheckboxMenuItemProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
@@ -1404,7 +1508,7 @@ type RadioProps = ComponentPropsWithoutRef<'input'> & {
     /**
      * Indicates that there is an error with the input
      */
-    hasError?: boolean;
+    'aria-invalid'?: boolean;
     /**
      * Provides an ID for the input
      */
@@ -1447,7 +1551,7 @@ declare const Radio: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProp
     /**
      * Indicates that there is an error with the input
      */
-    hasError?: boolean;
+    'aria-invalid'?: boolean;
     /**
      * Provides an ID for the input
      */
@@ -1660,4 +1764,42 @@ declare const WistiaLogo: {
     displayName: string;
 };
 
-export { Avatar, type AvatarInstanceType, type AvatarProps, Badge, type BadgeProps, Box, type BoxProps, Button, ButtonGroup, type ButtonProps, Checkbox, CheckboxMenuItem, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, Divider, Ellipsis, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Label, type LabelProps, Link, type LinkProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Radio, 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, useMq, useWindowSize };
+type FormGroupProps = Omit<ComponentPropsWithoutRef<'fieldset'>, 'onChange'> & {
+    children: ReactNode;
+    label?: ReactNode;
+};
+/**
+ * For grouping like form elements together.
+ */
+declare const FormGroup: {
+    ({ children, label, ...props }: FormGroupProps): JSX.Element;
+    displayName: string;
+};
+
+type RadioGroupProps = FormGroupProps & {
+    onChange?: ((event: ChangeEvent<HTMLInputElement>) => void) | undefined;
+    value?: string | undefined;
+    name?: string | undefined;
+};
+/**
+ * For grouping like form elements togtether. Can serve as a checkbox
+ */
+declare const RadioGroup: {
+    ({ children, name, onChange, value, ...props }: RadioGroupProps): JSX.Element;
+    displayName: string;
+};
+
+type CheckboxGroupProps = FormGroupProps & {
+    onChange?: ((event: ChangeEvent<HTMLInputElement>) => void) | undefined;
+    value?: string | undefined;
+    name?: string | undefined;
+};
+/**
+ * For grouping like form elements togtether. Can serve as a checkbox
+ */
+declare const CheckboxGroup: {
+    ({ children, name, onChange, value, ...props }: CheckboxGroupProps): JSX.Element;
+    displayName: string;
+};
+
+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, 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, useWindowSize };