@wistia/ui 0.6.21 → 0.6.22-beta.4a9bd6c4.abe6245

package/dist/index.d.mts

@@ -828,7 +828,7 @@ declare const Card: {
 };
 
 type CheckboxSizeType = 'lg' | 'md' | 'sm';
-declare const Checkbox: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "onChange" | "size"> & {
+declare const Checkbox: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "label" | "onChange" | "size" | "hideLabel"> & {
     /**
      * Indicates the state of the checkbox
      */
@@ -844,7 +844,7 @@ declare const Checkbox: react.ForwardRefExoticComponent<Omit<Omit<react.Detailed
     /**
      * The label for the checkbox
      */
-    label?: JSX.Element | string | undefined;
+    label: JSX.Element | string;
     /**
      * The description for the checkbox
      */
@@ -869,6 +869,10 @@ declare const Checkbox: react.ForwardRefExoticComponent<Omit<Omit<react.Detailed
      * The value given as data when submitted with a `name`.
      */
     value?: string;
+    /**
+     * Whether to visually hide the label (it will still be available to screen readers)
+     */
+    hideLabel?: boolean;
 } & react.RefAttributes<HTMLInputElement>>;
 
 type ClickRegionProps = {
@@ -1067,7 +1071,7 @@ declare const EditableHeading: ({ children, onValueChange, onEditingChange, tool
 
 declare const ellipsisStyle: styled_components.FlattenSimpleInterpolation;
 declare const ellipsisFlexParentStyle: styled_components.FlattenSimpleInterpolation;
-type EllipsisProps = ComponentPropsWithoutRef<'div'> & {
+type EllipsisProps = ComponentPropsWithoutRef<'span'> & {
     /**
      * The text that will be truncated with an ellipsis
      */
@@ -1163,6 +1167,10 @@ 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;
+    /**
+     * Additional descriptive text to display below the form field
+     */
+    description?: ReactNode;
     /**
      * Valid label text
      */
@@ -1189,10 +1197,10 @@ type FormFieldProps = ComponentPropsWithoutRef<'div'> & {
     labelPosition?: 'block' | 'inline';
 };
 /**
- * Component description goes here
+ * FormField is a compound component that combines a label, form control, and optional description and error message.
  */
 declare const FormField: {
-    ({ children, label, name, error, value, labelPosition, id, ...props }: FormFieldProps): JSX.Element;
+    ({ children, description, error, id, label, labelPosition, name, value, ...props }: FormFieldProps): JSX.Element;
     displayName: string;
 };
 
@@ -2248,7 +2256,7 @@ declare const ProgressBar: {
 };
 
 type RadioSizeType = 'lg' | 'md' | 'sm';
-type RadioProps = Omit<ComponentPropsWithoutRef<'input'>, 'onChange' | 'size'> & {
+type RadioProps = Omit<ComponentPropsWithoutRef<'input'>, 'hideLabel' | 'label' | 'onChange' | 'size'> & {
     /**
      * Indicates the state of the radio
      */
@@ -2268,7 +2276,7 @@ type RadioProps = Omit<ComponentPropsWithoutRef<'input'>, 'onChange' | 'size'> &
     /**
      * The label for the input
      */
-    label?: JSX.Element | string;
+    label: JSX.Element | string;
     /**
      * The description for the radio
      */
@@ -2294,8 +2302,12 @@ type RadioProps = Omit<ComponentPropsWithoutRef<'input'>, 'onChange' | 'size'> &
      * The value attribute of the input
      */
     value?: string;
+    /**
+     * Whether to visually hide the label (it will still be available to screen readers)
+     */
+    hideLabel?: boolean;
 };
-declare const Radio: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "onChange" | "size"> & {
+declare const Radio: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "label" | "onChange" | "size" | "hideLabel"> & {
     /**
      * Indicates the state of the radio
      */
@@ -2315,7 +2327,7 @@ declare const Radio: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTM
     /**
      * The label for the input
      */
-    label?: JSX.Element | string;
+    label: JSX.Element | string;
     /**
      * The description for the radio
      */
@@ -2341,6 +2353,10 @@ declare const Radio: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTM
      * The value attribute of the input
      */
     value?: string;
+    /**
+     * Whether to visually hide the label (it will still be available to screen readers)
+     */
+    hideLabel?: boolean;
 } & react.RefAttributes<HTMLInputElement>>;
 
 type ScreenReaderOnlyProps = ComponentPropsWithoutRef<'div'> & {

package/dist/index.d.ts

@@ -828,7 +828,7 @@ declare const Card: {
 };
 
 type CheckboxSizeType = 'lg' | 'md' | 'sm';
-declare const Checkbox: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "onChange" | "size"> & {
+declare const Checkbox: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "label" | "onChange" | "size" | "hideLabel"> & {
     /**
      * Indicates the state of the checkbox
      */
@@ -844,7 +844,7 @@ declare const Checkbox: react.ForwardRefExoticComponent<Omit<Omit<react.Detailed
     /**
      * The label for the checkbox
      */
-    label?: JSX.Element | string | undefined;
+    label: JSX.Element | string;
     /**
      * The description for the checkbox
      */
@@ -869,6 +869,10 @@ declare const Checkbox: react.ForwardRefExoticComponent<Omit<Omit<react.Detailed
      * The value given as data when submitted with a `name`.
      */
     value?: string;
+    /**
+     * Whether to visually hide the label (it will still be available to screen readers)
+     */
+    hideLabel?: boolean;
 } & react.RefAttributes<HTMLInputElement>>;
 
 type ClickRegionProps = {
@@ -1067,7 +1071,7 @@ declare const EditableHeading: ({ children, onValueChange, onEditingChange, tool
 
 declare const ellipsisStyle: styled_components.FlattenSimpleInterpolation;
 declare const ellipsisFlexParentStyle: styled_components.FlattenSimpleInterpolation;
-type EllipsisProps = ComponentPropsWithoutRef<'div'> & {
+type EllipsisProps = ComponentPropsWithoutRef<'span'> & {
     /**
      * The text that will be truncated with an ellipsis
      */
@@ -1163,6 +1167,10 @@ 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;
+    /**
+     * Additional descriptive text to display below the form field
+     */
+    description?: ReactNode;
     /**
      * Valid label text
      */
@@ -1189,10 +1197,10 @@ type FormFieldProps = ComponentPropsWithoutRef<'div'> & {
     labelPosition?: 'block' | 'inline';
 };
 /**
- * Component description goes here
+ * FormField is a compound component that combines a label, form control, and optional description and error message.
  */
 declare const FormField: {
-    ({ children, label, name, error, value, labelPosition, id, ...props }: FormFieldProps): JSX.Element;
+    ({ children, description, error, id, label, labelPosition, name, value, ...props }: FormFieldProps): JSX.Element;
     displayName: string;
 };
 
@@ -2248,7 +2256,7 @@ declare const ProgressBar: {
 };
 
 type RadioSizeType = 'lg' | 'md' | 'sm';
-type RadioProps = Omit<ComponentPropsWithoutRef<'input'>, 'onChange' | 'size'> & {
+type RadioProps = Omit<ComponentPropsWithoutRef<'input'>, 'hideLabel' | 'label' | 'onChange' | 'size'> & {
     /**
      * Indicates the state of the radio
      */
@@ -2268,7 +2276,7 @@ type RadioProps = Omit<ComponentPropsWithoutRef<'input'>, 'onChange' | 'size'> &
     /**
      * The label for the input
      */
-    label?: JSX.Element | string;
+    label: JSX.Element | string;
     /**
      * The description for the radio
      */
@@ -2294,8 +2302,12 @@ type RadioProps = Omit<ComponentPropsWithoutRef<'input'>, 'onChange' | 'size'> &
      * The value attribute of the input
      */
     value?: string;
+    /**
+     * Whether to visually hide the label (it will still be available to screen readers)
+     */
+    hideLabel?: boolean;
 };
-declare const Radio: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "onChange" | "size"> & {
+declare const Radio: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "label" | "onChange" | "size" | "hideLabel"> & {
     /**
      * Indicates the state of the radio
      */
@@ -2315,7 +2327,7 @@ declare const Radio: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTM
     /**
      * The label for the input
      */
-    label?: JSX.Element | string;
+    label: JSX.Element | string;
     /**
      * The description for the radio
      */
@@ -2341,6 +2353,10 @@ declare const Radio: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTM
      * The value attribute of the input
      */
     value?: string;
+    /**
+     * Whether to visually hide the label (it will still be available to screen readers)
+     */
+    hideLabel?: boolean;
 } & react.RefAttributes<HTMLInputElement>>;
 
 type ScreenReaderOnlyProps = ComponentPropsWithoutRef<'div'> & {