@wistia/ui 0.4.9 → 0.4.10-beta.129a60b0.d418b13

package/dist/index.d.mts

@@ -1,9 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { ReactNode, Dispatch, SetStateAction, ComponentPropsWithoutRef, JSX, ComponentPropsWithRef, MouseEvent, ChangeEvent, ForwardedRef, Ref, JSXElementConstructor, ElementType as ElementType$1, InputHTMLAttributes, RefObject } from 'react';
+import { ReactNode, Dispatch, SetStateAction, ComponentPropsWithoutRef, JSX, ComponentPropsWithRef, MouseEvent, ChangeEvent, ForwardedRef, Ref, JSXElementConstructor, ElementType as ElementType$1, InputHTMLAttributes, RefObject, ForwardRefExoticComponent, RefAttributes } 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';
+import { ToggleGroupSingleProps } from '@radix-ui/react-toggle-group';
 
 type UIProviderProps = {
     children: ReactNode;
@@ -102,7 +103,7 @@ declare const ColorSchemeWrapper: {
 type ButtonVariants = 'ghost' | 'outline' | 'soft' | 'solid';
 
 type LinkTypes = 'default' | 'email' | 'external' | 'phone';
-type BaseProps = {
+type BaseProps$1 = {
     /**
      * A Promise to invoke before navigating to location.
      * _Caution: if used with `external` type prop a new window will **not** be opened_
@@ -143,11 +144,11 @@ type BaseProps = {
      */
     underline?: boolean;
 };
-type LinkAsLinkProps = BaseProps & ComponentPropsWithRef<'a'> & Omit<LinkProps$1, 'to'> & {
+type LinkAsLinkProps = BaseProps$1 & ComponentPropsWithRef<'a'> & Omit<LinkProps$1, 'to'> & {
     href: string | undefined;
     type?: LinkTypes;
 };
-type LinkAsButtonProps = BaseProps & ComponentPropsWithRef<'button'> & {
+type LinkAsButtonProps = BaseProps$1 & ComponentPropsWithRef<'button'> & {
     href?: never;
     type?: 'button' | 'reset' | 'submit';
 };
@@ -288,7 +289,7 @@ declare const useWindowSize: (interval?: number) => {
 
 type ActionButtonProps = {
     /**
-     * The Icon component to use, e.g. `<Icon type="favorite" />`
+     * The [Icon](?path=/docs/components-icon--docs) component to use, e.g. `<Icon type="favorite" />`
      */
     icon: JSX.Element;
     /**
@@ -309,7 +310,7 @@ type ActionButtonProps = {
  */
 declare const ActionButton: react.ForwardRefExoticComponent<(Omit<{
     /**
-     * The Icon component to use, e.g. `<Icon type="favorite" />`
+     * The [Icon](?path=/docs/components-icon--docs) component to use, e.g. `<Icon type="favorite" />`
      */
     icon: JSX.Element;
     /**
@@ -326,7 +327,7 @@ declare const ActionButton: react.ForwardRefExoticComponent<(Omit<{
     variant?: "default" | "gated" | "menu-down" | "menu-up";
 } & Omit<ButtonAsButtonProps, "size" | "leftIcon" | "rightIcon" | "isLoading" | "fullWidth" | "unstyled" | "variant">, "ref"> | Omit<{
     /**
-     * The Icon component to use, e.g. `<Icon type="favorite" />`
+     * The [Icon](?path=/docs/components-icon--docs) component to use, e.g. `<Icon type="favorite" />`
      */
     icon: JSX.Element;
     /**
@@ -527,10 +528,95 @@ type BoxProps = ComponentPropsWithoutRef<'div'> & {
 /**
  * Box is a layout container using [CSS Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox).
  */
-declare const Box: {
-    ({ alignContent, alignItems, alignSelf, basis, children, direction, fill, fillViewport, gap, grow, hasBoxParent, inline, justifyContent, order, shrink, wrapItems, ...otherProps }: BoxProps): JSX.Element;
-    displayName: string;
-};
+declare const Box: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    /**
+     * Specifies how the browser distributes space between and around
+     * items along the cross-axis of their container; has no effect on
+     * single line flexible boxes
+     */
+    alignContent?: AlignContentType;
+    /**
+     * Specifies how the browser distributes space between and around
+     * items along the cross-axis of their container; the difference
+     * to the alignContent prop is that alignItems specifies the
+     * alignment of the items within the current container's line,
+     * whereas alignContent specifies the alignment of the lines themselves
+     */
+    alignItems?: AlignItemsType;
+    /**
+     * Specifies how the browser aligns items of the current line, overriding the
+     * alignItems value of parent; if any of the item's cross-axis margin is set to auto,
+     * then alignSelf is ignored
+     *
+     * *Note: only works for nested `<Box />`*
+     */
+    alignSelf?: AlignSelfType;
+    /**
+     * Specifies the initial main size of an item
+     *
+     * *Note: only works for nested `<Box />`*
+     */
+    basis?: string;
+    /**
+     * Pass an arbitrary child node
+     */
+    children?: ReactNode;
+    /**
+     * Specifies the main axis of the container
+     */
+    direction?: DirectionType;
+    /**
+     * Specifies whether the width and/or height should fill the container
+     */
+    fill?: FillType;
+    /**
+     * Specifies whether the width and/or height should fill the viewport
+     */
+    fillViewport?: FillType;
+    /**
+     * Specifies the gaps (gutters) between rows and columns
+     */
+    gap?: Gap | Spacings;
+    /**
+     * Specifies what amount of space inside the flex container the item should take up
+     *
+     * *Note: only works for nested `<Box />`*
+     */
+    grow?: number | string;
+    /**
+     * @ignore
+     * Used internally to track if a Box is a child of another Box component
+     */
+    hasBoxParent?: boolean;
+    /**
+     * Make Layout behave like an inline element but still lay out its content according to flexbox model
+     */
+    inline?: boolean;
+    /**
+     * Specifies how the browser distributes space between and around
+     * items along the main axis of their container
+     */
+    justifyContent?: JustifyContentType;
+    /**
+     * Specifies the order used to lay out an item in its container. Items within the same
+     * container are rendered in ascending order according to their order values.
+     * Elements with the _same_ order value are rendered in the order in which they appear in code
+     *
+     * *Note: only works for nested `<Box />`*
+     */
+    order?: number | "inherit" | "initial" | "unset";
+    /**
+     * Specifies how items will shrink inside the container when the default size of
+     * items is larger than their container
+     *
+     * *Note: only works for nested `<Box />`*
+     */
+    shrink?: number;
+    /**
+     * Specifies whether items are forced into a single line or can be wrapped onto multiple lines
+     */
+    wrapItems?: boolean;
+} & react.RefAttributes<HTMLDivElement>>;
 
 type BreadcrumbsProps = ComponentPropsWithoutRef<'div'> & {
     /**
@@ -704,7 +790,7 @@ type CheckboxProps = Omit<ComponentPropsWithRef<'label'>, 'onChange'> & {
      */
     name?: string | undefined;
     /**
-     * Callback function invoked when the checkbox value changes
+     * Callback function invoked when the value changes
      */
     onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
     /**
@@ -1250,7 +1336,7 @@ type IconButtonProps = {
      */
     label: string;
     /**
-     * The Icon component to use, e.g. `<Icon type="favorite" />`
+     * The [Icon](?path=/docs/components-icon--docs) component to use, e.g. `<Icon type="favorite" />`
      */
     children: JSX.Element;
 } & (Omit<ButtonAsButtonProps, 'fullWidth' | 'leftIcon' | 'rightIcon'> | Omit<ButtonAsLinkProps, 'fullWidth' | 'leftIcon' | 'rightIcon'>);
@@ -1264,7 +1350,7 @@ declare const IconButton: react.ForwardRefExoticComponent<(Omit<{
      */
     label: string;
     /**
-     * The Icon component to use, e.g. `<Icon type="favorite" />`
+     * The [Icon](?path=/docs/components-icon--docs) component to use, e.g. `<Icon type="favorite" />`
      */
     children: JSX.Element;
 } & Omit<ButtonAsButtonProps, "leftIcon" | "rightIcon" | "fullWidth">, "ref"> | Omit<{
@@ -1273,7 +1359,7 @@ declare const IconButton: react.ForwardRefExoticComponent<(Omit<{
      */
     label: string;
     /**
-     * The Icon component to use, e.g. `<Icon type="favorite" />`
+     * The [Icon](?path=/docs/components-icon--docs) component to use, e.g. `<Icon type="favorite" />`
      */
     children: JSX.Element;
 } & Omit<ButtonAsLinkProps, "leftIcon" | "rightIcon" | "fullWidth">, "ref">) & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
@@ -2020,6 +2106,76 @@ declare const ScreenReaderOnly: {
     displayName: string;
 };
 
+type SegmentedControlProps = Omit<ToggleGroupSingleProps, 'type'> & {
+    /**
+     * `SegmentedControlItem`s that will be rendered in grouping
+     */
+    children?: ReactNode;
+    /**
+     * Set the entire `SegmentedControl` to be disabled
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Force `SegmentedControl` to fill the width of it's container
+     */
+    fullWidth?: boolean | undefined;
+    /**
+     * Callback function invoked when the value changes
+     */
+    onSelectedValueChange: (value: string) => void;
+    /**
+     * The value of the `SegmentedControlItem` which should be selected
+     */
+    selectedValue: string;
+};
+/**
+ * Provides a horizontal set of segments for switching between different values
+ */
+declare const SegmentedControl: ForwardRefExoticComponent<RefAttributes<HTMLDivElement> & SegmentedControlProps>;
+
+type BaseProps = {
+    /**
+     * Disable the `SegmentedControlItem`
+     */
+    disabled?: boolean | undefined;
+    /**
+     * The value of the item
+     */
+    value: string;
+};
+type IconWithLabel = {
+    /**
+     * The [Icon](?path=/docs/components-icon--docs) component to use, e.g. `<Icon type="favorite" />`
+     */
+    icon?: JSX.Element;
+    /**
+     * The label of the item
+     */
+    label?: ReactNode | string | undefined;
+    'aria-label'?: never;
+};
+type IconWithAriaLabel = {
+    /**
+     * The [Icon](?path=/docs/components-icon--docs) component to use, e.g. `<Icon type="favorite" />`
+     */
+    icon?: JSX.Element;
+    /**
+     * Use this when displaying an icon without a label
+     */
+    'aria-label'?: string | undefined;
+    label?: never;
+};
+type NoIcon = {
+    icon?: undefined;
+    /**
+     * The label of the item
+     */
+    label?: ReactNode | string | undefined;
+    'aria-label'?: never;
+};
+type SegmentedControlItemProps = BaseProps & (IconWithAriaLabel | IconWithLabel | NoIcon);
+declare const SegmentedControlItem: react.ForwardRefExoticComponent<SegmentedControlItemProps & react.RefAttributes<HTMLButtonElement>>;
+
 type StackProps = {
     /**
      * Optional children
@@ -2247,4 +2403,4 @@ type SelectOptionGroupProps = {
 };
 declare const SelectOptionGroup: ({ children, label, ...props }: SelectOptionGroupProps) => react_jsx_runtime.JSX.Element;
 
-export { ActionButton, type ActionButtonProps, Avatar, type AvatarProps, type AvatarStatus, Badge, type BadgeProps, Box, type BoxProps, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonProps, Card, type CardProps, 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, Select, SelectOption, SelectOptionGroup, type SelectOptionGroupProps, type SelectOptionProps, type SelectProps, Stack, SubMenu, Tag, type TagProps, Text, type TextProps, Tooltip, type TooltipProps, UIProvider, WistiaLogo, colorSchemeOptions, copyToClipboard, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mq, useActiveMq, useAriaLive, useBoolean, useFormState, useKey, useMq, useToast, useWindowSize };
+export { ActionButton, type ActionButtonProps, Avatar, type AvatarProps, type AvatarStatus, Badge, type BadgeProps, Box, type BoxProps, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonProps, Card, type CardProps, 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, SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, Select, SelectOption, SelectOptionGroup, type SelectOptionGroupProps, type SelectOptionProps, type SelectProps, Stack, SubMenu, Tag, type TagProps, Text, type TextProps, Tooltip, type TooltipProps, UIProvider, WistiaLogo, colorSchemeOptions, copyToClipboard, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mq, useActiveMq, useAriaLive, useBoolean, useFormState, useKey, useMq, useToast, useWindowSize };

package/dist/index.d.ts

@@ -1,9 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { ReactNode, Dispatch, SetStateAction, ComponentPropsWithoutRef, JSX, ComponentPropsWithRef, MouseEvent, ChangeEvent, ForwardedRef, Ref, JSXElementConstructor, ElementType as ElementType$1, InputHTMLAttributes, RefObject } from 'react';
+import { ReactNode, Dispatch, SetStateAction, ComponentPropsWithoutRef, JSX, ComponentPropsWithRef, MouseEvent, ChangeEvent, ForwardedRef, Ref, JSXElementConstructor, ElementType as ElementType$1, InputHTMLAttributes, RefObject, ForwardRefExoticComponent, RefAttributes } 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';
+import { ToggleGroupSingleProps } from '@radix-ui/react-toggle-group';
 
 type UIProviderProps = {
     children: ReactNode;
@@ -102,7 +103,7 @@ declare const ColorSchemeWrapper: {
 type ButtonVariants = 'ghost' | 'outline' | 'soft' | 'solid';
 
 type LinkTypes = 'default' | 'email' | 'external' | 'phone';
-type BaseProps = {
+type BaseProps$1 = {
     /**
      * A Promise to invoke before navigating to location.
      * _Caution: if used with `external` type prop a new window will **not** be opened_
@@ -143,11 +144,11 @@ type BaseProps = {
      */
     underline?: boolean;
 };
-type LinkAsLinkProps = BaseProps & ComponentPropsWithRef<'a'> & Omit<LinkProps$1, 'to'> & {
+type LinkAsLinkProps = BaseProps$1 & ComponentPropsWithRef<'a'> & Omit<LinkProps$1, 'to'> & {
     href: string | undefined;
     type?: LinkTypes;
 };
-type LinkAsButtonProps = BaseProps & ComponentPropsWithRef<'button'> & {
+type LinkAsButtonProps = BaseProps$1 & ComponentPropsWithRef<'button'> & {
     href?: never;
     type?: 'button' | 'reset' | 'submit';
 };
@@ -288,7 +289,7 @@ declare const useWindowSize: (interval?: number) => {
 
 type ActionButtonProps = {
     /**
-     * The Icon component to use, e.g. `<Icon type="favorite" />`
+     * The [Icon](?path=/docs/components-icon--docs) component to use, e.g. `<Icon type="favorite" />`
      */
     icon: JSX.Element;
     /**
@@ -309,7 +310,7 @@ type ActionButtonProps = {
  */
 declare const ActionButton: react.ForwardRefExoticComponent<(Omit<{
     /**
-     * The Icon component to use, e.g. `<Icon type="favorite" />`
+     * The [Icon](?path=/docs/components-icon--docs) component to use, e.g. `<Icon type="favorite" />`
      */
     icon: JSX.Element;
     /**
@@ -326,7 +327,7 @@ declare const ActionButton: react.ForwardRefExoticComponent<(Omit<{
     variant?: "default" | "gated" | "menu-down" | "menu-up";
 } & Omit<ButtonAsButtonProps, "size" | "leftIcon" | "rightIcon" | "isLoading" | "fullWidth" | "unstyled" | "variant">, "ref"> | Omit<{
     /**
-     * The Icon component to use, e.g. `<Icon type="favorite" />`
+     * The [Icon](?path=/docs/components-icon--docs) component to use, e.g. `<Icon type="favorite" />`
      */
     icon: JSX.Element;
     /**
@@ -527,10 +528,95 @@ type BoxProps = ComponentPropsWithoutRef<'div'> & {
 /**
  * Box is a layout container using [CSS Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox).
  */
-declare const Box: {
-    ({ alignContent, alignItems, alignSelf, basis, children, direction, fill, fillViewport, gap, grow, hasBoxParent, inline, justifyContent, order, shrink, wrapItems, ...otherProps }: BoxProps): JSX.Element;
-    displayName: string;
-};
+declare const Box: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    /**
+     * Specifies how the browser distributes space between and around
+     * items along the cross-axis of their container; has no effect on
+     * single line flexible boxes
+     */
+    alignContent?: AlignContentType;
+    /**
+     * Specifies how the browser distributes space between and around
+     * items along the cross-axis of their container; the difference
+     * to the alignContent prop is that alignItems specifies the
+     * alignment of the items within the current container's line,
+     * whereas alignContent specifies the alignment of the lines themselves
+     */
+    alignItems?: AlignItemsType;
+    /**
+     * Specifies how the browser aligns items of the current line, overriding the
+     * alignItems value of parent; if any of the item's cross-axis margin is set to auto,
+     * then alignSelf is ignored
+     *
+     * *Note: only works for nested `<Box />`*
+     */
+    alignSelf?: AlignSelfType;
+    /**
+     * Specifies the initial main size of an item
+     *
+     * *Note: only works for nested `<Box />`*
+     */
+    basis?: string;
+    /**
+     * Pass an arbitrary child node
+     */
+    children?: ReactNode;
+    /**
+     * Specifies the main axis of the container
+     */
+    direction?: DirectionType;
+    /**
+     * Specifies whether the width and/or height should fill the container
+     */
+    fill?: FillType;
+    /**
+     * Specifies whether the width and/or height should fill the viewport
+     */
+    fillViewport?: FillType;
+    /**
+     * Specifies the gaps (gutters) between rows and columns
+     */
+    gap?: Gap | Spacings;
+    /**
+     * Specifies what amount of space inside the flex container the item should take up
+     *
+     * *Note: only works for nested `<Box />`*
+     */
+    grow?: number | string;
+    /**
+     * @ignore
+     * Used internally to track if a Box is a child of another Box component
+     */
+    hasBoxParent?: boolean;
+    /**
+     * Make Layout behave like an inline element but still lay out its content according to flexbox model
+     */
+    inline?: boolean;
+    /**
+     * Specifies how the browser distributes space between and around
+     * items along the main axis of their container
+     */
+    justifyContent?: JustifyContentType;
+    /**
+     * Specifies the order used to lay out an item in its container. Items within the same
+     * container are rendered in ascending order according to their order values.
+     * Elements with the _same_ order value are rendered in the order in which they appear in code
+     *
+     * *Note: only works for nested `<Box />`*
+     */
+    order?: number | "inherit" | "initial" | "unset";
+    /**
+     * Specifies how items will shrink inside the container when the default size of
+     * items is larger than their container
+     *
+     * *Note: only works for nested `<Box />`*
+     */
+    shrink?: number;
+    /**
+     * Specifies whether items are forced into a single line or can be wrapped onto multiple lines
+     */
+    wrapItems?: boolean;
+} & react.RefAttributes<HTMLDivElement>>;
 
 type BreadcrumbsProps = ComponentPropsWithoutRef<'div'> & {
     /**
@@ -704,7 +790,7 @@ type CheckboxProps = Omit<ComponentPropsWithRef<'label'>, 'onChange'> & {
      */
     name?: string | undefined;
     /**
-     * Callback function invoked when the checkbox value changes
+     * Callback function invoked when the value changes
      */
     onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
     /**
@@ -1250,7 +1336,7 @@ type IconButtonProps = {
      */
     label: string;
     /**
-     * The Icon component to use, e.g. `<Icon type="favorite" />`
+     * The [Icon](?path=/docs/components-icon--docs) component to use, e.g. `<Icon type="favorite" />`
      */
     children: JSX.Element;
 } & (Omit<ButtonAsButtonProps, 'fullWidth' | 'leftIcon' | 'rightIcon'> | Omit<ButtonAsLinkProps, 'fullWidth' | 'leftIcon' | 'rightIcon'>);
@@ -1264,7 +1350,7 @@ declare const IconButton: react.ForwardRefExoticComponent<(Omit<{
      */
     label: string;
     /**
-     * The Icon component to use, e.g. `<Icon type="favorite" />`
+     * The [Icon](?path=/docs/components-icon--docs) component to use, e.g. `<Icon type="favorite" />`
      */
     children: JSX.Element;
 } & Omit<ButtonAsButtonProps, "leftIcon" | "rightIcon" | "fullWidth">, "ref"> | Omit<{
@@ -1273,7 +1359,7 @@ declare const IconButton: react.ForwardRefExoticComponent<(Omit<{
      */
     label: string;
     /**
-     * The Icon component to use, e.g. `<Icon type="favorite" />`
+     * The [Icon](?path=/docs/components-icon--docs) component to use, e.g. `<Icon type="favorite" />`
      */
     children: JSX.Element;
 } & Omit<ButtonAsLinkProps, "leftIcon" | "rightIcon" | "fullWidth">, "ref">) & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
@@ -2020,6 +2106,76 @@ declare const ScreenReaderOnly: {
     displayName: string;
 };
 
+type SegmentedControlProps = Omit<ToggleGroupSingleProps, 'type'> & {
+    /**
+     * `SegmentedControlItem`s that will be rendered in grouping
+     */
+    children?: ReactNode;
+    /**
+     * Set the entire `SegmentedControl` to be disabled
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Force `SegmentedControl` to fill the width of it's container
+     */
+    fullWidth?: boolean | undefined;
+    /**
+     * Callback function invoked when the value changes
+     */
+    onSelectedValueChange: (value: string) => void;
+    /**
+     * The value of the `SegmentedControlItem` which should be selected
+     */
+    selectedValue: string;
+};
+/**
+ * Provides a horizontal set of segments for switching between different values
+ */
+declare const SegmentedControl: ForwardRefExoticComponent<RefAttributes<HTMLDivElement> & SegmentedControlProps>;
+
+type BaseProps = {
+    /**
+     * Disable the `SegmentedControlItem`
+     */
+    disabled?: boolean | undefined;
+    /**
+     * The value of the item
+     */
+    value: string;
+};
+type IconWithLabel = {
+    /**
+     * The [Icon](?path=/docs/components-icon--docs) component to use, e.g. `<Icon type="favorite" />`
+     */
+    icon?: JSX.Element;
+    /**
+     * The label of the item
+     */
+    label?: ReactNode | string | undefined;
+    'aria-label'?: never;
+};
+type IconWithAriaLabel = {
+    /**
+     * The [Icon](?path=/docs/components-icon--docs) component to use, e.g. `<Icon type="favorite" />`
+     */
+    icon?: JSX.Element;
+    /**
+     * Use this when displaying an icon without a label
+     */
+    'aria-label'?: string | undefined;
+    label?: never;
+};
+type NoIcon = {
+    icon?: undefined;
+    /**
+     * The label of the item
+     */
+    label?: ReactNode | string | undefined;
+    'aria-label'?: never;
+};
+type SegmentedControlItemProps = BaseProps & (IconWithAriaLabel | IconWithLabel | NoIcon);
+declare const SegmentedControlItem: react.ForwardRefExoticComponent<SegmentedControlItemProps & react.RefAttributes<HTMLButtonElement>>;
+
 type StackProps = {
     /**
      * Optional children
@@ -2247,4 +2403,4 @@ type SelectOptionGroupProps = {
 };
 declare const SelectOptionGroup: ({ children, label, ...props }: SelectOptionGroupProps) => react_jsx_runtime.JSX.Element;
 
-export { ActionButton, type ActionButtonProps, Avatar, type AvatarProps, type AvatarStatus, Badge, type BadgeProps, Box, type BoxProps, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonProps, Card, type CardProps, 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, Select, SelectOption, SelectOptionGroup, type SelectOptionGroupProps, type SelectOptionProps, type SelectProps, Stack, SubMenu, Tag, type TagProps, Text, type TextProps, Tooltip, type TooltipProps, UIProvider, WistiaLogo, colorSchemeOptions, copyToClipboard, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mq, useActiveMq, useAriaLive, useBoolean, useFormState, useKey, useMq, useToast, useWindowSize };
+export { ActionButton, type ActionButtonProps, Avatar, type AvatarProps, type AvatarStatus, Badge, type BadgeProps, Box, type BoxProps, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonProps, Card, type CardProps, 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, SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, Select, SelectOption, SelectOptionGroup, type SelectOptionGroupProps, type SelectOptionProps, type SelectProps, Stack, SubMenu, Tag, type TagProps, Text, type TextProps, Tooltip, type TooltipProps, UIProvider, WistiaLogo, colorSchemeOptions, copyToClipboard, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mq, useActiveMq, useAriaLive, useBoolean, useFormState, useKey, useMq, useToast, useWindowSize };