Merge branch 'main' into turbo-module/release-add7425e2575

packages/frosted-ui/src/components/alert-dialog.tsx

@@ -11,12 +11,11 @@ import { Text } from './text';
 
 import type { ExtractPropsForTag, GetPropDefTypes } from '../helpers';
 
-interface AlertDialogRootProps extends React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Root> {}
+interface AlertDialogRootProps extends React.ComponentProps<typeof AlertDialogPrimitive.Root> {}
 const AlertDialogRoot: React.FC<AlertDialogRootProps> = (props) => <AlertDialogPrimitive.Root {...props} />;
 AlertDialogRoot.displayName = 'AlertDialogRoot';
 
-interface AlertDialogTriggerProps
-  extends Omit<React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Trigger>, 'asChild'> {}
+interface AlertDialogTriggerProps extends Omit<React.ComponentProps<typeof AlertDialogPrimitive.Trigger>, 'asChild'> {}
 
 const AlertDialogTrigger = (props: AlertDialogTriggerProps) => <AlertDialogPrimitive.Trigger {...props} asChild />;
 AlertDialogTrigger.displayName = 'AlertDialogTrigger';
@@ -31,7 +30,7 @@ const AlertDialogContentContext = React.createContext<AlertDialogContentContextV
 });
 
 interface AlertDialogContentProps
-  extends Omit<React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>, 'asChild'>,
+  extends Omit<React.ComponentProps<typeof AlertDialogPrimitive.Content>, 'asChild'>,
     AlertDialogContentOwnProps {
   container?: React.ComponentProps<typeof AlertDialogPrimitive.Portal>['container'];
 }
@@ -69,7 +68,7 @@ const AlertDialogContent = (props: AlertDialogContentProps) => {
 };
 AlertDialogContent.displayName = 'AlertDialogContent';
 
-type AlertDialogTitleProps = React.ComponentPropsWithoutRef<typeof Heading>;
+type AlertDialogTitleProps = React.ComponentProps<typeof Heading>;
 
 const AlertDialogTitle = ({ size: sizeProp, mb: mbProp, ...props }: AlertDialogTitleProps) => {
   const { size: contextSize } = React.useContext(AlertDialogContentContext);
@@ -143,14 +142,12 @@ const AlertDialogDescription = ({ size: sizeProp, mb: mbProp, ...props }: AlertD
 };
 AlertDialogDescription.displayName = 'AlertDialogDescription';
 
-interface AlertDialogActionProps
-  extends Omit<React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>, 'asChild'> {}
+interface AlertDialogActionProps extends Omit<React.ComponentProps<typeof AlertDialogPrimitive.Action>, 'asChild'> {}
 
 const AlertDialogAction = (props: AlertDialogActionProps) => <AlertDialogPrimitive.Action {...props} asChild />;
 AlertDialogAction.displayName = 'AlertDialogAction';
 
-interface AlertDialogCancelProps
-  extends Omit<React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>, 'asChild'> {}
+interface AlertDialogCancelProps extends Omit<React.ComponentProps<typeof AlertDialogPrimitive.Cancel>, 'asChild'> {}
 
 const AlertDialogCancel = (props: AlertDialogCancelProps) => <AlertDialogPrimitive.Cancel {...props} asChild />;
 AlertDialogCancel.displayName = 'AlertDialogCancel';

packages/frosted-ui/src/components/avatar-group.tsx

@@ -2,14 +2,14 @@
 
 import classNames from 'classnames';
 import * as React from 'react';
-import type { GetPropDefTypes, MarginProps, PropsWithoutRefOrColor } from '../helpers';
+import type { GetPropDefTypes, MarginProps, PropsWithoutColor } from '../helpers';
 import { extractMarginProps, withBreakpoints, withMarginProps } from '../helpers';
 import { Avatar } from './avatar';
 import { avatarGroupPropDefs } from './avatar-group.props';
 
 type AvatarGroupRootOwnProps = GetPropDefTypes<typeof avatarGroupPropDefs>;
 
-interface AvatarGroupRootProps extends PropsWithoutRefOrColor<'div'>, MarginProps, AvatarGroupRootOwnProps {}
+interface AvatarGroupRootProps extends PropsWithoutColor<'div'>, MarginProps, AvatarGroupRootOwnProps {}
 
 const AvatarGroupRoot = (props: AvatarGroupRootProps) => {
   const { rest: marginRest, ...marginProps } = extractMarginProps(props);

packages/frosted-ui/src/components/avatar.tsx

@@ -6,11 +6,11 @@ import * as React from 'react';
 import { extractMarginProps, withBreakpoints, withMarginProps } from '../helpers';
 import { avatarPropDefs } from './avatar.props';
 
-import type { GetPropDefTypes, MarginProps, PropsWithoutRefOrColor } from '../helpers';
+import type { GetPropDefTypes, MarginProps, PropsWithoutColor } from '../helpers';
 import { getInitials } from '../helpers/get-initials';
 
 type AvatarOwnProps = GetPropDefTypes<typeof avatarPropDefs>;
-interface AvatarProps extends PropsWithoutRefOrColor<typeof AvatarPrimitive.Image>, MarginProps, AvatarOwnProps {
+interface AvatarProps extends PropsWithoutColor<typeof AvatarPrimitive.Image>, MarginProps, AvatarOwnProps {
   // TODO: See if we can automate making prop defs with `required: true` non nullable
   fallback: NonNullable<AvatarOwnProps['fallback']>;
 }

packages/frosted-ui/src/components/badge.tsx

@@ -3,10 +3,10 @@ import * as React from 'react';
 import { extractMarginProps, withBreakpoints, withMarginProps } from '../helpers';
 import { badgePropDefs } from './badge.props';
 
-import type { GetPropDefTypes, MarginProps, PropsWithoutRefOrColor } from '../helpers';
+import type { GetPropDefTypes, MarginProps, PropsWithoutColor } from '../helpers';
 
 type BadgeOwnProps = GetPropDefTypes<typeof badgePropDefs>;
-interface BadgeProps extends PropsWithoutRefOrColor<'span'>, MarginProps, BadgeOwnProps {}
+interface BadgeProps extends PropsWithoutColor<'span'>, MarginProps, BadgeOwnProps {}
 
 const Badge = (props: BadgeProps) => {
   const { rest: marginRest, ...marginProps } = extractMarginProps(props);

packages/frosted-ui/src/components/base-button.tsx

@@ -4,14 +4,14 @@ import * as React from 'react';
 import { extractMarginProps, withBreakpoints, withMarginProps } from '../helpers';
 import { baseButtonPropDefs } from './base-button.props';
 
-import type { GetPropDefTypes, MarginProps, PropsWithoutRefOrColor } from '../helpers';
+import type { GetPropDefTypes, MarginProps, PropsWithoutColor } from '../helpers';
 import { mapButtonSizeToSpinnerSize, mapResponsiveProp } from '../helpers/map-prop-values';
 import { Flex } from './flex';
 import { Spinner } from './spinner';
 import { VisuallyHidden } from './visually-hidden';
 
 type BaseButtonOwnProps = GetPropDefTypes<typeof baseButtonPropDefs>;
-interface BaseButtonProps extends PropsWithoutRefOrColor<'button'>, MarginProps, BaseButtonOwnProps {
+interface BaseButtonProps extends PropsWithoutColor<'button'>, MarginProps, BaseButtonOwnProps {
   asChild?: boolean;
   loading?: boolean;
 }

packages/frosted-ui/src/components/blockquote.tsx

@@ -3,10 +3,10 @@ import * as React from 'react';
 import { blockquotePropDefs } from './blockquote.props';
 import { Text } from './text';
 
-import type { GetPropDefTypes, PropsWithoutRefOrColor } from '../helpers';
+import type { GetPropDefTypes, PropsWithoutColor } from '../helpers';
 
 type BlockQuoteOwnProps = GetPropDefTypes<typeof blockquotePropDefs>;
-interface BlockquoteProps extends PropsWithoutRefOrColor<'blockquote'>, BlockQuoteOwnProps {}
+interface BlockquoteProps extends PropsWithoutColor<'blockquote'>, BlockQuoteOwnProps {}
 
 const Blockquote = (props: BlockquoteProps) => {
   const { children, className, ...blockquoteProps } = props;

packages/frosted-ui/src/components/box.tsx

@@ -7,7 +7,7 @@ import { Slot } from './slot';
 import type { GetPropDefTypes, LayoutProps, MarginProps } from '../helpers';
 
 type BoxOwnProps = GetPropDefTypes<typeof boxPropDefs>;
-interface BoxProps extends React.ComponentPropsWithoutRef<'div'>, MarginProps, LayoutProps, BoxOwnProps {
+interface BoxProps extends React.ComponentProps<'div'>, MarginProps, LayoutProps, BoxOwnProps {
   asChild?: boolean;
 }
 

packages/frosted-ui/src/components/button.tsx

@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import * as React from 'react';
 import { BaseButton } from './base-button';
 
-interface ButtonProps extends React.ComponentPropsWithoutRef<typeof BaseButton> {}
+interface ButtonProps extends React.ComponentProps<typeof BaseButton> {}
 
 const Button = (props: ButtonProps) => <BaseButton {...props} className={classNames('fui-Button', props.className)} />;
 

packages/frosted-ui/src/components/callout.tsx

@@ -7,14 +7,14 @@ import { calloutRootPropDefs } from './callout.props';
 import { Text } from './text';
 import { textPropDefs } from './text.props';
 
-import type { ExtractPropsForTag, GetPropDefTypes, MarginProps, PropsWithoutRefOrColor } from '../helpers';
+import type { ExtractPropsForTag, GetPropDefTypes, MarginProps, PropsWithoutColor } from '../helpers';
 
 type CalloutRootOwnProps = GetPropDefTypes<typeof calloutRootPropDefs>;
 
 type CalloutContextValue = CalloutRootOwnProps;
 const CalloutContext = React.createContext<CalloutContextValue>({});
 
-interface CalloutRootProps extends PropsWithoutRefOrColor<'div'>, MarginProps, CalloutContextValue {}
+interface CalloutRootProps extends PropsWithoutColor<'div'>, MarginProps, CalloutContextValue {}
 
 const CalloutRoot = (props: CalloutRootProps) => {
   const { rest: marginRest, ...marginProps } = extractMarginProps(props);
@@ -50,7 +50,7 @@ const CalloutRoot = (props: CalloutRootProps) => {
 };
 CalloutRoot.displayName = 'CalloutRoot';
 
-interface CalloutIconProps extends PropsWithoutRefOrColor<'div'> {}
+interface CalloutIconProps extends PropsWithoutColor<'div'> {}
 
 const CalloutIcon = (props: CalloutIconProps) => {
   const { color, size, highContrast } = React.useContext(CalloutContext);

packages/frosted-ui/src/components/card.tsx

@@ -7,7 +7,7 @@ import { cardPropDefs } from './card.props';
 import type { GetPropDefTypes, MarginProps } from '../helpers';
 
 type CardOwnProps = GetPropDefTypes<typeof cardPropDefs>;
-interface CardProps extends React.ComponentPropsWithoutRef<'div'>, MarginProps, CardOwnProps {
+interface CardProps extends React.ComponentProps<'div'>, MarginProps, CardOwnProps {
   asChild?: boolean;
 }
 

packages/frosted-ui/src/components/checkbox.tsx

@@ -6,9 +6,9 @@ import * as React from 'react';
 import { extractMarginProps, withBreakpoints, withMarginProps } from '../helpers';
 import { checkboxPropDefs } from './checkbox.props';
 
-import type { GetPropDefTypes, MarginProps, PropsWithoutRefOrColor } from '../helpers';
+import type { GetPropDefTypes, MarginProps, PropsWithoutColor } from '../helpers';
 
-interface IconProps extends React.ComponentPropsWithoutRef<'svg'> {
+interface IconProps extends React.ComponentProps<'svg'> {
   children?: never;
   color?: string;
   size: CheckboxOwnProps['size'];
@@ -67,7 +67,7 @@ const CheckboxIndeterminateIcon = ({ color = 'currentColor', size, ...props }: I
 CheckboxIndeterminateIcon.displayName = 'CheckboxIndeterminateIcon';
 
 type CheckboxOwnProps = GetPropDefTypes<typeof checkboxPropDefs>;
-interface CheckboxProps extends PropsWithoutRefOrColor<typeof CheckboxPrimitive.Root>, MarginProps, CheckboxOwnProps {}
+interface CheckboxProps extends PropsWithoutColor<typeof CheckboxPrimitive.Root>, MarginProps, CheckboxOwnProps {}
 
 const Checkbox = (props: CheckboxProps) => {
   const { rest: marginRest, ...marginProps } = extractMarginProps(props);

packages/frosted-ui/src/components/circular-progress.tsx

@@ -6,7 +6,7 @@ import * as React from 'react';
 import {
   GetPropDefTypes,
   MarginProps,
-  PropsWithoutRefOrColor,
+  PropsWithoutColor,
   extractMarginProps,
   withBreakpoints,
   withMarginProps,
@@ -15,7 +15,7 @@ import { circularProgressPropDefs } from './circular-progress.props';
 
 type CircularProgressOwnProps = GetPropDefTypes<typeof circularProgressPropDefs>;
 interface CircularProgressProps
-  extends Omit<PropsWithoutRefOrColor<typeof ProgressPrimitive.Root>, 'children'>,
+  extends Omit<PropsWithoutColor<typeof ProgressPrimitive.Root>, 'children'>,
     MarginProps,
     CircularProgressOwnProps {}
 

packages/frosted-ui/src/components/code.tsx

@@ -3,10 +3,10 @@ import * as React from 'react';
 import { extractMarginProps, withBreakpoints, withMarginProps } from '../helpers';
 import { codePropDefs } from './code.props';
 
-import type { GetPropDefTypes, MarginProps, PropsWithoutRefOrColor } from '../helpers';
+import type { GetPropDefTypes, MarginProps, PropsWithoutColor } from '../helpers';
 
 type CodeOwnProps = GetPropDefTypes<typeof codePropDefs>;
-interface CodeProps extends PropsWithoutRefOrColor<'code'>, MarginProps, CodeOwnProps {}
+interface CodeProps extends PropsWithoutColor<'code'>, MarginProps, CodeOwnProps {}
 
 const Code = (props: CodeProps) => {
   const { rest: marginRest, ...marginProps } = extractMarginProps(props);

packages/frosted-ui/src/components/container.tsx

@@ -6,7 +6,7 @@ import { containerPropDefs } from './container.props';
 import type { GetPropDefTypes, LayoutProps, MarginProps } from '../helpers';
 
 type ContainerOwnProps = GetPropDefTypes<typeof containerPropDefs>;
-interface ContainerProps extends React.ComponentPropsWithoutRef<'div'>, MarginProps, LayoutProps, ContainerOwnProps {}
+interface ContainerProps extends React.ComponentProps<'div'>, MarginProps, LayoutProps, ContainerOwnProps {}
 
 const Container = (props: ContainerProps) => {
   const { rest: marginRest, ...marginProps } = extractMarginProps(props);

packages/frosted-ui/src/components/context-menu.tsx

@@ -14,22 +14,21 @@ import {
 } from './context-menu.props';
 import { ScrollArea } from './scroll-area';
 
-import type { GetPropDefTypes, PropsWithoutRefOrColor } from '../helpers';
+import type { GetPropDefTypes, PropsWithoutColor } from '../helpers';
 
-interface ContextMenuRootProps extends React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Root> {}
+interface ContextMenuRootProps extends React.ComponentProps<typeof ContextMenuPrimitive.Root> {}
 const ContextMenuRoot: React.FC<ContextMenuRootProps> = (props) => <ContextMenuPrimitive.Root {...props} />;
 ContextMenuRoot.displayName = 'ContextMenuRoot';
 
-interface ContextMenuTriggerProps
-  extends Omit<React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Trigger>, 'asChild'> {}
+interface ContextMenuTriggerProps extends Omit<React.ComponentProps<typeof ContextMenuPrimitive.Trigger>, 'asChild'> {}
 const ContextMenuTrigger = (props: ContextMenuTriggerProps) => <ContextMenuPrimitive.Trigger {...props} asChild />;
 ContextMenuTrigger.displayName = 'ContextMenuTrigger';
 
 type ContextMenuContentOwnProps = GetPropDefTypes<typeof contextMenuContentPropDefs>;
 type ContextMenuContentContextValue = ContextMenuContentOwnProps;
 const ContextMenuContentContext = React.createContext<ContextMenuContentContextValue>({});
 interface ContextMenuContentProps
-  extends PropsWithoutRefOrColor<typeof ContextMenuPrimitive.Content>,
+  extends PropsWithoutColor<typeof ContextMenuPrimitive.Content>,
     ContextMenuContentContextValue {
   container?: React.ComponentProps<typeof ContextMenuPrimitive.Portal>['container'];
 }
@@ -82,7 +81,7 @@ const ContextMenuContent = (props: ContextMenuContentProps) => {
 };
 ContextMenuContent.displayName = 'ContextMenuContent';
 
-interface ContextMenuLabelProps extends PropsWithoutRefOrColor<typeof ContextMenuPrimitive.Label> {}
+interface ContextMenuLabelProps extends PropsWithoutColor<typeof ContextMenuPrimitive.Label> {}
 const ContextMenuLabel = (props: ContextMenuLabelProps) => (
   <ContextMenuPrimitive.Label
     {...props}
@@ -92,9 +91,7 @@ const ContextMenuLabel = (props: ContextMenuLabelProps) => (
 ContextMenuLabel.displayName = 'ContextMenuLabel';
 
 type ContextMenuItemOwnProps = GetPropDefTypes<typeof contextMenuItemPropDefs>;
-interface ContextMenuItemProps
-  extends PropsWithoutRefOrColor<typeof ContextMenuPrimitive.Item>,
-    ContextMenuItemOwnProps {}
+interface ContextMenuItemProps extends PropsWithoutColor<typeof ContextMenuPrimitive.Item>, ContextMenuItemOwnProps {}
 const ContextMenuItem = (props: ContextMenuItemProps) => {
   const { className, children, color = contextMenuItemPropDefs.color.default, shortcut, ...itemProps } = props;
   return (
@@ -110,7 +107,7 @@ const ContextMenuItem = (props: ContextMenuItemProps) => {
 };
 ContextMenuItem.displayName = 'ContextMenuItem';
 
-interface ContextMenuGroupProps extends React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Group> {}
+interface ContextMenuGroupProps extends React.ComponentProps<typeof ContextMenuPrimitive.Group> {}
 const ContextMenuGroup = (props: ContextMenuGroupProps) => (
   <ContextMenuPrimitive.Group
     {...props}
@@ -119,7 +116,7 @@ const ContextMenuGroup = (props: ContextMenuGroupProps) => (
 );
 ContextMenuGroup.displayName = 'ContextMenuGroup';
 
-interface ContextMenuRadioGroupProps extends React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioGroup> {}
+interface ContextMenuRadioGroupProps extends React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup> {}
 const ContextMenuRadioGroup = (props: ContextMenuRadioGroupProps) => (
   <ContextMenuPrimitive.RadioGroup
     {...props}
@@ -128,7 +125,7 @@ const ContextMenuRadioGroup = (props: ContextMenuRadioGroupProps) => (
 );
 ContextMenuRadioGroup.displayName = 'ContextMenuRadioGroup';
 
-interface ContextMenuRadioItemProps extends React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem> {}
+interface ContextMenuRadioItemProps extends React.ComponentProps<typeof ContextMenuPrimitive.RadioItem> {}
 const ContextMenuRadioItem = (props: ContextMenuRadioItemProps) => {
   const { children, className, ...itemProps } = props;
   return (
@@ -153,7 +150,7 @@ ContextMenuRadioItem.displayName = 'ContextMenuRadioItem';
 
 type ContextMenuCheckboxItemOwnProps = GetPropDefTypes<typeof contextMenuCheckboxItemPropDefs>;
 interface ContextMenuCheckboxItemProps
-  extends React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>,
+  extends React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>,
     ContextMenuCheckboxItemOwnProps {}
 const ContextMenuCheckboxItem = (props: ContextMenuCheckboxItemProps) => {
   const { children, className, shortcut, ...itemProps } = props;
@@ -178,11 +175,11 @@ const ContextMenuCheckboxItem = (props: ContextMenuCheckboxItemProps) => {
 };
 ContextMenuCheckboxItem.displayName = 'ContextMenuCheckboxItem';
 
-interface ContextMenuSubProps extends React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Sub> {}
+interface ContextMenuSubProps extends React.ComponentProps<typeof ContextMenuPrimitive.Sub> {}
 const ContextMenuSub: React.FC<ContextMenuSubProps> = (props) => <ContextMenuPrimitive.Sub {...props} />;
 ContextMenuSub.displayName = 'ContextMenuSub';
 
-interface ContextMenuSubTriggerProps extends React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> {}
+interface ContextMenuSubTriggerProps extends React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> {}
 const ContextMenuSubTrigger = (props: ContextMenuSubTriggerProps) => {
   const { className, children, ...subTriggerProps } = props;
   return (
@@ -203,7 +200,7 @@ const ContextMenuSubTrigger = (props: ContextMenuSubTriggerProps) => {
 };
 ContextMenuSubTrigger.displayName = 'ContextMenuSubTrigger';
 
-interface ContextMenuSubContentProps extends React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent> {
+interface ContextMenuSubContentProps extends React.ComponentProps<typeof ContextMenuPrimitive.SubContent> {
   container?: React.ComponentProps<typeof ContextMenuPrimitive.Portal>['container'];
 }
 const ContextMenuSubContent = (props: ContextMenuSubContentProps) => {
@@ -238,7 +235,7 @@ const ContextMenuSubContent = (props: ContextMenuSubContentProps) => {
 };
 ContextMenuSubContent.displayName = 'ContextMenuSubContent';
 
-interface ContextMenuSeparatorProps extends React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator> {}
+interface ContextMenuSeparatorProps extends React.ComponentProps<typeof ContextMenuPrimitive.Separator> {}
 const ContextMenuSeparator = (props: ContextMenuSeparatorProps) => (
   <ContextMenuPrimitive.Separator
     {...props}